/* Gtools V364 — desktop-only visual authority.
   IMPORTANT: every rule is scoped away from the Capacitor Android shell. */
@media (min-width: 900px) {
  html:not(.capacitor-android) {
    --d364-max: 1360px;
    --d364-page-x: clamp(18px, 2vw, 30px);
    --d364-page-y: 22px;
    --d364-gap: 16px;
    --d364-radius: 14px;
    --d364-radius-sm: 10px;
    --d364-bg: #f4f6f9;
    --d364-panel: #ffffff;
    --d364-panel-soft: #f8fafc;
    --d364-border: #dfe5ec;
    --d364-border-strong: #cdd6e2;
    --d364-text: #172033;
    --d364-muted: #66758a;
    --d364-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 28px rgba(15,23,42,.045);
    --d364-control-h: 40px;
  }

  html:not(.capacitor-android),
  html:not(.capacitor-android) body,
  html:not(.capacitor-android) body.app-authed,
  html:not(.capacitor-android) body.app-authed #app-main {
    min-width: 0 !important;
    background: var(--d364-bg) !important;
    color: var(--d364-text) !important;
  }

  /* ---------- One application header on every desktop route ---------- */
  html:not(.capacitor-android) body.app-authed #app-main > header,
  html:not(.capacitor-android) body.app-authed .app-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    min-height: 68px !important;
    height: 68px !important;
    margin: 0 !important;
    padding: 0 max(var(--d364-page-x), calc((100vw - var(--d364-max)) / 2 + var(--d364-page-x))) !important;
    background: color-mix(in srgb, var(--d364-panel) 94%, transparent) !important;
    border-bottom: 1px solid var(--d364-border) !important;
    box-shadow: 0 1px 0 rgba(15,23,42,.02) !important;
    backdrop-filter: blur(12px);
  }
  html:not(.capacitor-android) body.app-authed .header-top {
    width: 100% !important;
    max-width: var(--d364-max) !important;
    min-height: 68px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  html:not(.capacitor-android) body.app-authed #mobile-menu-btn {
    display: inline-grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    border: 1px solid var(--d364-border) !important;
    border-radius: 11px !important;
    background: var(--d364-panel) !important;
    box-shadow: 0 2px 8px rgba(15,23,42,.045) !important;
  }
  html:not(.capacitor-android) body.app-authed .common-banner-title {
    margin: 0 !important;
    font-size: 20px !important;
    line-height: 1.15 !important;
    font-weight: 750 !important;
    letter-spacing: -.02em !important;
    color: var(--d364-text) !important;
  }
  html:not(.capacitor-android) body.app-authed .header-right-panel {
    margin-left: auto !important;
    gap: 8px !important;
  }
  html:not(.capacitor-android) body.app-authed .header-right-panel > .btn-icon,
  html:not(.capacitor-android) body.app-authed #header-context-action-btn,
  html:not(.capacitor-android) body.app-authed .module-report-button {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border: 1px solid var(--d364-border) !important;
    border-radius: 10px !important;
    background: var(--d364-panel) !important;
  }

  /* ---------- Drawer: never permanently occupy desktop width ---------- */
  html:not(.capacitor-android) body.app-authed #app-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(330px, 88vw) !important;
    max-width: 330px !important;
    height: 100dvh !important;
    transform: translateX(-105%) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transition: transform .18s ease, opacity .16s ease, visibility 0s linear .18s !important;
    z-index: 500 !important;
    background: var(--d364-panel) !important;
    border-right: 1px solid var(--d364-border) !important;
    box-shadow: 18px 0 40px rgba(15,23,42,.14) !important;
  }
  html:not(.capacitor-android) body.app-authed #app-sidebar.open {
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition-delay: 0s !important;
  }
  html:not(.capacitor-android) body.app-authed #sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: rgba(15,23,42,.34) !important;
    z-index: 490 !important;
    transition: opacity .16s ease, visibility 0s linear .16s !important;
  }
  html:not(.capacitor-android) body.app-authed #sidebar-overlay.open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition-delay: 0s !important;
  }

  /* ---------- One page frame for every route ---------- */
  html:not(.capacitor-android) body.app-authed #expensePage,
  html:not(.capacitor-android) body.app-authed .route-page,
  html:not(.capacitor-android) body.app-authed .layout-right > .route-page {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: calc(100dvh - 68px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--d364-bg) !important;
    overflow: visible !important;
  }
  html:not(.capacitor-android) body.app-authed .layout-right {
    min-width: 0 !important;
  }

  /* Exactly the same page width/gutter for Expense, health, Tasks, AI and utilities. */
  html:not(.capacitor-android) body.app-authed[data-active-route="home"] #expensePage > .main-layout,
  html:not(.capacitor-android) body.app-authed .layout-right > .route-page.route-page-visible > .modal-content,
  html:not(.capacitor-android) body.app-authed #settingsModal.route-page-visible > .modal-content,
  html:not(.capacitor-android) body.app-authed #tasksPage.route-page-visible > .tasks-page-content,
  html:not(.capacitor-android) body.app-authed #aiPage.route-page-visible > .ai-page-content-v354 {
    width: min(calc(100% - (2 * var(--d364-page-x))), var(--d364-max)) !important;
    max-width: var(--d364-max) !important;
    min-width: 0 !important;
    min-height: calc(100dvh - 68px - (2 * var(--d364-page-y))) !important;
    margin: 0 auto !important;
    padding: var(--d364-page-y) 0 34px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Expense follows the same 2-column rhythm instead of its own oversized layout. */
  html:not(.capacitor-android) body.app-authed[data-active-route="home"] #expensePage > .main-layout {
    display: grid !important;
    grid-template-columns: minmax(250px, 310px) minmax(0, 1fr) !important;
    align-items: start !important;
    gap: var(--d364-gap) !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="home"] #expensePage .layout-left,
  html:not(.capacitor-android) body.app-authed[data-active-route="home"] #expensePage .layout-right {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  /* ---------- Unified surfaces ---------- */
  html:not(.capacitor-android) body.app-authed :is(
    #expensePage .dashboard-stats,
    #expensePage .section-container,
    #expensePage .filters-container,
    .route-page .form-card,
    .route-page .settings-card,
    .route-page .settings-section,
    .route-page .report-card,
    .route-page .reports-filter-bar,
    .route-page .reports-section > *,
    .route-page .health-section,
    .route-page .unified-card,
    .route-page .tasks-list-card,
    .route-page .settlement-detail-shell,
    .route-page .settlement-search-shell,
    #tasksPage .tasks-shell,
    #aiPage .ai-shell-v354
  ) {
    border: 1px solid var(--d364-border) !important;
    border-radius: var(--d364-radius) !important;
    background: var(--d364-panel) !important;
    box-shadow: var(--d364-shadow) !important;
  }

  /* Route content shells all use the same vertical rhythm. */
  html:not(.capacitor-android) body.app-authed :is(#workoutPage,#foodPage,#habitsPage) .modal-content {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--d364-gap) !important;
  }
  html:not(.capacitor-android) body.app-authed :is(#workoutPage,#foodPage,#habitsPage) :is(.health-page-shell,.unified-module-shell) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: var(--d364-gap) !important;
  }
  html:not(.capacitor-android) body.app-authed :is(#workoutPage,#foodPage,#habitsPage) :is(.unified-card-list,.health-card-list) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--d364-gap) !important;
    align-items: start !important;
  }

  /* Tasks and AI occupy the same desktop rectangle as the other routes. */
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage.tasks-route-page:not(.tasks-desktop-fullscreen-page),
  html:not(.capacitor-android) body.app-authed[data-active-route="ai"] #aiPage.ai-route-page-v354 {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: calc(100dvh - 68px) !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html:not(.capacitor-android) body.app-authed #tasksPage .tasks-shell,
  html:not(.capacitor-android) body.app-authed #aiPage .ai-shell-v354 {
    width: 100% !important;
    max-width: none !important;
    height: calc(100dvh - 68px - (2 * var(--d364-page-y))) !important;
    min-height: 620px !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  html:not(.capacitor-android) body.app-authed #aiPage .ai-chat-toolbar-v354,
  html:not(.capacitor-android) body.app-authed #tasksPage :is(.tasks-desktop-toolbar,.tasks-topbar,.tasks-list-toolbar) {
    min-height: 54px !important;
    border-bottom: 1px solid var(--d364-border) !important;
    background: var(--d364-panel) !important;
  }

  /* ---------- Common typography ---------- */
  html:not(.capacitor-android) body.app-authed :is(#expensePage,.route-page) :is(h1,h2,h3,h4) {
    color: var(--d364-text) !important;
    letter-spacing: -.02em !important;
  }
  html:not(.capacitor-android) body.app-authed :is(#expensePage,.route-page) h2 { font-size: 20px !important; }
  html:not(.capacitor-android) body.app-authed :is(#expensePage,.route-page) h3 { font-size: 16px !important; }
  html:not(.capacitor-android) body.app-authed :is(#expensePage,.route-page) :is(p,small,.muted,.subtext,.helper-text) {
    color: var(--d364-muted);
  }

  /* ---------- Common route title/action rows ---------- */
  html:not(.capacitor-android) body.app-authed .route-page :is(.health-route-title-container,.route-page-actions-bar,.modal-header,.settlement-route-titlebar) {
    width: 100% !important;
    min-height: 52px !important;
    margin: 0 0 var(--d364-gap) !important;
    padding: 0 2px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--d364-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* ---------- Controls ---------- */
  html:not(.capacitor-android) body.app-authed :is(#expensePage,.route-page) :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea,.dropdown-select,.txn-input) {
    min-height: var(--d364-control-h) !important;
    border: 1px solid var(--d364-border-strong) !important;
    border-radius: var(--d364-radius-sm) !important;
    background: var(--d364-panel) !important;
    color: var(--d364-text) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }
  html:not(.capacitor-android) body.app-authed :is(#expensePage,.route-page) :is(input,select,textarea):focus {
    outline: none !important;
    border-color: #788aa3 !important;
    box-shadow: 0 0 0 3px rgba(100,116,139,.12) !important;
  }
  html:not(.capacitor-android) body.app-authed :is(#expensePage,.route-page) :is(.btn-primary,.btn-secondary,.btn-danger,.btn-black-pill,.btn-text) {
    min-height: 38px !important;
    border-radius: var(--d364-radius-sm) !important;
    font-weight: 700 !important;
  }
  html:not(.capacitor-android) body.app-authed :is(#expensePage,.route-page) :is(.btn-icon,.btn-icon-small) {
    border-radius: var(--d364-radius-sm) !important;
  }

  /* ---------- Reports / settlements / settings grids ---------- */
  html:not(.capacitor-android) body.app-authed #reportsModal .reports-page,
  html:not(.capacitor-android) body.app-authed #settlementsModal .settlement-body,
  html:not(.capacitor-android) body.app-authed #settingsModal .settings-page {
    width: 100% !important;
    max-width: none !important;
  }
  html:not(.capacitor-android) body.app-authed #reportsModal .reports-filter-pro-grid {
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 12px !important;
  }
  html:not(.capacitor-android) body.app-authed #settlementsModal .people-grid {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: var(--d364-gap) !important;
  }
  html:not(.capacitor-android) body.app-authed #settingsModal :is(.settings-grid,.settings-cards-grid) {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: var(--d364-gap) !important;
  }

  /* Keep modal dialogs modal; the authority above is only for route pages. */
  html:not(.capacitor-android) body.app-authed .modal:not(.route-page) > .modal-content {
    max-height: min(88dvh, 900px) !important;
  }

  /* Explicit desktop route isolation: only the active page can display. */
  html:not(.capacitor-android) body.app-authed .route-page:not(.route-page-visible):not(#expensePage) {
    display: none !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route]:not([data-active-route="ai"]) #aiPage {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="workout"] #workoutPage,
  html:not(.capacitor-android) body.app-authed[data-active-route="food"] #foodPage,
  html:not(.capacitor-android) body.app-authed[data-active-route="habits"] #habitsPage,
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage,
  html:not(.capacitor-android) body.app-authed[data-active-route="ai"] #aiPage,
  html:not(.capacitor-android) body.app-authed[data-active-route="reports"] #reportsModal,
  html:not(.capacitor-android) body.app-authed[data-active-route="settings"] #settingsModal,
  html:not(.capacitor-android) body.app-authed[data-active-route="settlements"] #settlementsModal {
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

@media (min-width: 900px) and (max-width: 1150px) {
  html:not(.capacitor-android) body.app-authed[data-active-route="home"] #expensePage > .main-layout {
    grid-template-columns: 250px minmax(0,1fr) !important;
  }
  html:not(.capacitor-android) body.app-authed :is(#workoutPage,#foodPage,#habitsPage) :is(.unified-card-list,.health-card-list),
  html:not(.capacitor-android) body.app-authed #settlementsModal .people-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
  html:not(.capacitor-android) body.app-authed #reportsModal .reports-filter-pro-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

@media (min-width: 900px) {
  html:not(.capacitor-android)[data-theme="dark"] {
    --d364-bg: #090c11;
    --d364-panel: #11161d;
    --d364-panel-soft: #161c24;
    --d364-border: #28313d;
    --d364-border-strong: #354153;
    --d364-text: #eef2f7;
    --d364-muted: #9aa8ba;
    --d364-shadow: 0 1px 2px rgba(0,0,0,.28), 0 12px 30px rgba(0,0,0,.18);
  }
}