/*
 * Minimal mobile layout overrides for Postiz v2.21.8.
 *
 * The companion script adds the postiz-* hook classes. Keeping the selectors
 * behind those hooks avoids changing Postiz on desktop or relying on generated
 * Tailwind selectors for the main layout.
 */

@media (max-width: 767px) {
  html.postiz-mobile-override,
  html.postiz-mobile-override body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .postiz-root-shell {
    min-width: 0 !important;
    min-height: 100dvh !important;
    padding: 4px 4px 68px !important;
  }

  .postiz-layout-row,
  .postiz-app-shell,
  .postiz-content-row,
  .postiz-calendar-panel {
    min-width: 0 !important;
  }

  .postiz-layout-row {
    gap: 0 !important;
  }

  .postiz-primary-nav-shell {
    width: 0 !important;
    min-width: 0 !important;
  }

  #left-menu {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    z-index: 1000;
    width: 100% !important;
    height: 64px !important;
    padding: 4px 8px;
    border-top: 1px solid var(--new-table-border);
    background: var(--new-bgColorInner);
  }

  #left-menu > div {
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  #left-menu > div::-webkit-scrollbar {
    display: none;
  }

  #left-menu > div > svg {
    display: none;
  }

  #left-menu > div > div {
    flex: none !important;
    flex-direction: row !important;
    gap: 4px !important;
  }

  #left-menu a,
  #left-menu button {
    width: auto !important;
    min-width: 64px;
    height: 56px !important;
    padding: 4px 8px !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex: none !important;
  }

  #left-menu a > div:first-child,
  #left-menu button > div:first-child {
    display: block !important;
  }

  .postiz-app-shell {
    width: 100% !important;
    border-radius: 8px !important;
  }

  .postiz-header {
    height: 52px !important;
    padding-inline: 12px !important;
  }

  .postiz-header-title {
    font-size: 20px !important;
  }

  .postiz-header-tools {
    display: none !important;
  }

  .postiz-content-row {
    overflow: hidden;
  }

  html.postiz-launches-route .postiz-content-row {
    flex-direction: column !important;
  }

  html.postiz-third-party-route .postiz-content-row {
    flex-direction: column !important;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .postiz-third-party-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-height: 160px;
    padding: 12px !important;
    flex: none !important;
    overflow-y: auto;
    border-bottom: 1px solid var(--new-bgLineColor);
  }

  .postiz-third-party-sidebar > div > div:first-child {
    display: none !important;
  }

  .postiz-third-party-content {
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    flex: none !important;
  }

  .postiz-third-party-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
  }

  .postiz-third-party-grid > div {
    min-width: 0;
    padding: 16px !important;
  }

  .postiz-channels-panel {
    width: 100% !important;
    min-width: 0 !important;
    height: 60px;
    min-height: 60px;
    flex: none !important;
    border-bottom: 1px solid var(--new-bgLineColor);
  }

  .postiz-channels-panel > div {
    position: static !important;
    height: 60px !important;
    padding: 8px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .postiz-channels-panel > div > div:first-child,
  .postiz-channels-panel > div > div:last-child,
  .postiz-empty-channels {
    display: none !important;
  }

  .postiz-channels-panel > div > div:nth-child(2) {
    flex: none !important;
  }

  .postiz-channels-panel > div > div:nth-child(3) {
    min-width: 0;
    flex: 1 !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .postiz-channels-panel button {
    min-height: 44px;
  }

  .postiz-channels-panel button:first-child {
    min-width: 132px;
  }

  .postiz-channels-panel button > .text-start {
    display: block !important;
  }

  .postiz-calendar-panel {
    width: 100% !important;
    padding: 8px !important;
    gap: 8px !important;
    overflow: hidden;
  }

  .postiz-calendar-filters {
    width: 100%;
    align-items: stretch !important;
  }

  .postiz-calendar-filters > div {
    max-width: 100%;
  }

  .postiz-calendar-filters > .flex-grow {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
  }

  .postiz-range-control {
    min-width: 180px;
    max-width: 100%;
    flex: 1;
  }

  .postiz-fixed-label {
    min-width: 0 !important;
    flex: 1;
  }

  .postiz-view-switch,
  .postiz-list-state-switch {
    display: grid !important;
    width: 100%;
  }

  .postiz-view-switch {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .postiz-list-state-switch {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    flex-basis: 100%;
  }

  .postiz-view-switch > div,
  .postiz-list-state-switch > div {
    width: auto !important;
    min-width: 0 !important;
    min-height: 40px;
    padding-inline: 4px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .postiz-list-state-switch > div {
    font-size: 12px;
  }

  .postiz-week-grid {
    grid-template-columns: 64px repeat(7, minmax(112px, 1fr)) !important;
  }

  .postiz-month-grid {
    grid-template-columns: repeat(7, minmax(112px, 1fr)) !important;
  }

  .mantine-Modal-content {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
  }

  .mantine-Modal-root .grid-cols-5,
  .mantine-Modal-root .grid-cols-9 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}