/* Gtools V363 — one desktop design system for every browser route. */
@media (min-width: 1024px) and (hover: hover) {
  html:not(.capacitor-android) {
    --desktop-v363-max: 1440px;
    --desktop-v363-pad-x: 24px;
    --desktop-v363-pad-y: 20px;
    --desktop-v363-gap: 16px;
    --desktop-v363-radius: 14px;
    --desktop-v363-bg: #f1f4f8;
    --desktop-v363-surface: #fff;
    --desktop-v363-surface-2: #f8fafc;
    --desktop-v363-border: #dfe6ef;
    --desktop-v363-text: #172033;
    --desktop-v363-muted: #68778c;
  }

  html:not(.capacitor-android) body.app-authed,
  html:not(.capacitor-android) body.app-authed #app-main,
  html:not(.capacitor-android) body.app-authed #expensePage,
  html:not(.capacitor-android) body.app-authed .route-page {
    background: var(--desktop-v363-bg) !important;
    color: var(--desktop-v363-text) !important;
  }

  /* One content width and gutter for Expense and all routed pages. */
  html:not(.capacitor-android) body.app-authed[data-active-route="home"] #expensePage > .main-layout {
    width: min(100%, var(--desktop-v363-max)) !important;
    max-width: var(--desktop-v363-max) !important;
    margin: 0 auto !important;
    padding: var(--desktop-v363-pad-y) var(--desktop-v363-pad-x) 28px !important;
    gap: var(--desktop-v363-gap) !important;
  }
  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.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(100%, var(--desktop-v363-max)) !important;
    max-width: var(--desktop-v363-max) !important;
    min-width: 0 !important;
    min-height: 100% !important;
    margin: 0 auto !important;
    padding: var(--desktop-v363-pad-y) var(--desktop-v363-pad-x) 36px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Tasks and AI are no longer allowed to use a different outer page size. */
  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: 100% !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;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: var(--desktop-v363-radius) !important;
    box-sizing: border-box !important;
  }

  /* Common route typography and controls. */
  html:not(.capacitor-android) body.app-authed .route-page :is(h1,h2,h3,h4),
  html:not(.capacitor-android) body.app-authed #expensePage :is(h1,h2,h3,h4) {
    color: var(--desktop-v363-text) !important;
    letter-spacing: -.02em !important;
  }
  html:not(.capacitor-android) body.app-authed .route-page :is(input,select,textarea),
  html:not(.capacitor-android) body.app-authed #expensePage :is(input,select,textarea) {
    min-height: 40px;
    border-radius: 10px !important;
    border-color: var(--desktop-v363-border) !important;
    box-sizing: border-box !important;
  }
  html:not(.capacitor-android) body.app-authed .route-page :is(.btn-primary,.btn-secondary,.btn-danger),
  html:not(.capacitor-android) body.app-authed #expensePage :is(.btn-primary,.btn-secondary,.btn-danger) {
    min-height: 38px !important;
    border-radius: 10px !important;
  }

  /* Reusable panels get the same surface language across modules. */
  html:not(.capacitor-android) body.app-authed :is(
    #expensePage .section-container,
    #expensePage .dashboard-stats,
    .route-page .form-card,
    .route-page .settings-card,
    .route-page .report-card,
    .route-page .health-section,
    .route-page .unified-card,
    .route-page .tasks-list-card,
    .route-page .ai-chat-pane-v354
  ) {
    border: 1px solid var(--desktop-v363-border) !important;
    border-radius: var(--desktop-v363-radius) !important;
    background: var(--desktop-v363-surface) !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.035), 0 8px 24px rgba(15,23,42,.045) !important;
  }

  /* Same top spacing and divider treatment across routed modules. */
  html:not(.capacitor-android) body.app-authed .route-page :is(.health-route-title-container,.route-page-actions-bar,.modal-header) {
    min-height: 52px !important;
    margin: 0 0 16px !important;
    padding: 0 2px 12px !important;
    border-bottom: 1px solid var(--desktop-v363-border) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Daily health pages all share the same grid rhythm. */
  html:not(.capacitor-android) body.app-authed :is(#workoutPage,#foodPage,#habitsPage) .health-page-shell,
  html:not(.capacitor-android) body.app-authed :is(#workoutPage,#foodPage,#habitsPage) .unified-module-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    gap: var(--desktop-v363-gap) !important;
  }
  html:not(.capacitor-android) body.app-authed :is(#workoutPage,#foodPage,#habitsPage) .unified-card-list {
    gap: var(--desktop-v363-gap) !important;
  }

  /* Settings/reports must not bring back narrow phone dialogs on desktop. */
  html:not(.capacitor-android) body.app-authed :is(#settingsModal,#reportsModal,#settlementsModal,#bankStatementDraftsModal).route-page-visible {
    overflow: auto !important;
  }
}

@media (min-width: 1024px) and (hover: hover) {
  html:not(.capacitor-android)[data-theme="dark"] {
    --desktop-v363-bg: #080b10;
    --desktop-v363-surface: #10141b;
    --desktop-v363-surface-2: #151a22;
    --desktop-v363-border: #283140;
    --desktop-v363-text: #f1f5f9;
    --desktop-v363-muted: #9ba8ba;
  }
}