/* =========================================================
   desktop.css — Desktop layout (768px and above)
   Sizes/colors/type stay identical to mobile; only layout changes.
   Depends on: tokens.css, base.css, components.css
   ========================================================= */

@media (min-width: 768px) {

  /* Hide mobile-only chrome */
  .mobile-only, .bottom-nav, .menu-toggle, .overlay { display: none !important; }

  /* ---------- App shell: fixed sidebar + topbar + content ---------- */
  .app {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    grid-template-rows: var(--topbar-height) minmax(0, 1fr);
    grid-template-areas:
      "sidebar topbar"
      "sidebar main";
    min-height: 100vh;
  }

  .sidebar {
    grid-area: sidebar;
    position: sticky; top: 0;
    height: 100vh;
    display: flex; flex-direction: column; gap: var(--space-24);
    padding: var(--space-16);
    background: var(--color-bg-card);
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
  }
  .sidebar-brand { display: flex; align-items: center; gap: var(--space-12); height: var(--control-md); padding: 0 var(--space-12); }
  .sidebar-nav   { display: flex; flex-direction: column; gap: var(--space-4); }
  .sidebar-footer { margin-top: auto; }

  .topbar {
    grid-area: topbar;
    position: sticky; top: 0; z-index: var(--z-sticky);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
    padding: 0 var(--space-32);
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border);
  }
  .topbar-search { width: 100%; max-width: 360px; }
  .topbar-actions { display: flex; align-items: center; gap: var(--space-8); }

  .main { grid-area: main; min-width: 0; }

  .page {
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--space-32);
    display: flex; flex-direction: column; gap: var(--space-24);
  }

  .page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
  .page-actions { display: flex; align-items: center; gap: var(--space-8); }

  /* ---------- Grids ---------- */
  .grid { display: grid; gap: var(--space-24); }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-sidebar-right { grid-template-columns: minmax(0, 1fr) 320px; }  /* content + aside */
  .grid-sidebar-left  { grid-template-columns: 320px minmax(0, 1fr); }
  .grid-gap-16 { gap: var(--space-16); }

  .col-span-2 { grid-column: span 2; }
  .col-span-3 { grid-column: span 3; }

  /* ---------- Forms: multi-column ---------- */
  .form { display: flex; flex-direction: column; gap: var(--space-20); }
  .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-20); }
  .form-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form-actions { display: flex; justify-content: flex-end; gap: var(--space-8); }

  /* ---------- Toolbar (filters + actions on one line) ---------- */
  .toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
  .toolbar-filters { display: flex; align-items: center; gap: var(--space-8); }
  .toolbar .input-group { width: 280px; }

  /* ---------- Table: full table layout ---------- */
  .table-responsive thead { display: table-header-group; }

  /* ---------- Modal: centered dialog ---------- */
  .modal-backdrop { align-items: center; justify-content: center; padding: var(--space-32); }
  .modal { max-width: 480px; border-radius: var(--radius-modal); }
  .modal-lg { max-width: 720px; }

  /* ---------- Side drawer (right panel) ---------- */
  .drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-drawer);
    width: 420px; display: flex; flex-direction: column;
    background: var(--color-bg-card); border-left: 1px solid var(--color-border);
  }

  /* ---------- Dropdown positioning ---------- */
  .dropdown { position: relative; display: inline-block; }
  .dropdown > .menu { position: absolute; top: calc(100% + var(--space-4)); right: 0; z-index: var(--z-sticky); }

  /* ---------- Hide-on-desktop helper already handled by .mobile-only ---------- */
}