/* ==========================================================================
   C4$h — Desktop / wide-screen layout
   --------------------------------------------------------------------------
   Progressive enhancement over the mobile-first style.css. Below 900px this
   file is almost inert (the sidebar is simply hidden); at ≥900px it turns the
   single-column Mini App into a two-pane cockpit: a fixed left sidebar for
   navigation + a wide content column. Every existing view reflows for free —
   no view markup changed. Applies both in Telegram Desktop and in a plain
   browser tab (body.web).
   ========================================================================== */

/* Sidebar is desktop-only; hidden by default so mobile is untouched. */
.sidebar { display: none; }
.side-logout { display: none; }

/* ----- Drag-and-drop receipt overlay (works in any browser) ----- */
.dropzone {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  background: rgba(14, 16, 20, 0.72);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.dropzone.show { display: flex; }
.dropzone-card {
  pointer-events: none;
  border: 2px dashed var(--button);
  border-radius: 20px;
  padding: 44px 60px;
  text-align: center;
  background: var(--surface-1);
  box-shadow: var(--shadow-md);
  animation: dz-pop 0.14s ease;
}
@keyframes dz-pop { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.dz-emoji { font-size: 52px; margin-bottom: 10px; }
.dz-title { font-size: 20px; font-weight: 700; }
.dz-sub { color: var(--hint); font-size: 13px; margin-top: 6px; }

/* ----- Light theme (web opt-in) -----
   Applied only in the browser (body.web + body.theme-light). The alpha-surface
   tokens (--w2..--w18) flip from white-alpha to black-alpha, so every surface
   and hairline defined through them inverts in one place. Telegram is never
   given this class, so the Mini App is untouched. */
body.theme-light {
  color-scheme: light;
  --bg: #f4f6f9;
  --secondary-bg: #ffffff;
  --text: #1b1f27;
  --hint: #5b6675;
  --link: #1f6fd6;
  --destructive: #e5484d;
  --success: #17915a;
  --warn: #c77700;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.12);
  --w2: rgba(0,0,0,.03);  --w25: rgba(0,0,0,.035);
  --w3: rgba(0,0,0,.04);  --w4: rgba(0,0,0,.05);
  --w5: rgba(0,0,0,.06);  --w6: rgba(0,0,0,.07);
  --w7: rgba(0,0,0,.08);  --w8: rgba(0,0,0,.09);
  --w10: rgba(0,0,0,.11); --w12: rgba(0,0,0,.13);
  --w16: rgba(0,0,0,.10); --w18: rgba(0,0,0,.12);
  /* CRITICAL: these derived tokens are computed once at :root (with the dark
     base values) and inherited already-resolved, so overriding only the base
     tokens above leaves surfaces/borders dark. Re-declare them here so they
     recompute against this block's --secondary-bg / --wN values. */
  --surface-1: var(--secondary-bg);
  --surface-2: var(--w4);
  --border: var(--w6);
  --border-strong: var(--w10);
}
/* Keep the sidebar logo/brand vivid on white. */
body.theme-light .side-brand .side-logo { box-shadow: 0 6px 16px rgba(46,163,255,0.30); }
body.theme-light .topbar { background: var(--bg); }

.side-theme { display: none; }

@media (min-width: 900px) {
  /* ----- App shell: sidebar + content grid ----- */
  #app {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "side top"
      "side access"
      "side main";
    max-width: 1360px;
    margin-inline: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .sidebar { grid-area: side; }
  .topbar  { grid-area: top; }
  #accessSwitcher { grid-area: access; }
  main     { grid-area: main; }

  /* Bottom tab bar is replaced by the sidebar on desktop. */
  .bottomnav { display: none !important; }

  /* ----- Sidebar ----- */
  .sidebar {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    padding: 22px 14px;
    background: var(--surface-1);
    border-right: 1px solid var(--border);
    overflow-y: auto;
  }
  .side-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 10px 22px;
  }
  .side-logo {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2ea3ff, #1f6fd6);
    color: #fff; font-weight: 800; font-size: 24px;
    display: grid; place-items: center;
    box-shadow: 0 6px 16px rgba(46, 163, 255, 0.35);
  }
  .side-name {
    font-size: 20px; font-weight: 800; letter-spacing: -0.3px;
  }
  .side-nav { display: flex; flex-direction: column; gap: 4px; }

  /* Re-shape the shared .navbtn from a tiny stacked pill into a full-width
     sidebar row (icon + label, left-aligned). Overrides mobile rules. */
  .sidebar .navbtn {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--r-md);
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--hint);
    transition: background 0.12s ease, color 0.12s ease;
  }
  .sidebar .navbtn .navico { font-size: 20px; width: 24px; text-align: center; }
  .sidebar .navbtn .navlbl { font-size: var(--fs-body); }
  .sidebar .navbtn:hover { background: var(--surface-2); color: var(--text); }
  .sidebar .navbtn.active {
    background: color-mix(in srgb, var(--button) 16%, transparent);
    color: var(--button);
  }
  /* Kill the mobile FAB/active decorations inside the sidebar. */
  .sidebar .navbtn.fab,
  .sidebar .navbtn::before { all: unset; }
  .sidebar .navbtn.active::before,
  .sidebar .navbtn:not(.fab).active::before { content: none; }

  .side-foot { margin-top: auto; padding-top: 14px; }
  .side-logout {
    display: flex; align-items: center; gap: 14px;
    width: 100%; padding: 11px 14px;
    background: transparent; border: none; cursor: pointer;
    border-radius: var(--r-md);
    color: var(--hint); font-size: var(--fs-body); font-weight: 600;
    font-family: inherit;
  }
  .side-logout:hover { background: var(--surface-2); color: var(--destructive); }
  .side-logout .navico { font-size: 20px; width: 24px; text-align: center; }

  .side-theme {
    display: flex; align-items: center; gap: 14px;
    width: 100%; padding: 11px 14px; margin-bottom: 4px;
    background: transparent; border: none; cursor: pointer;
    border-radius: var(--r-md);
    color: var(--hint); font-size: var(--fs-body); font-weight: 600;
    font-family: inherit;
  }
  .side-theme:hover { background: var(--surface-2); color: var(--text); }
  .side-theme .navico { font-size: 20px; width: 24px; text-align: center; }

  /* ----- Topbar (content column header) -----
     Two tidy columns: brand + big balance hug the left, currency switcher +
     toggles hug the right. Replaces the mobile stacked layout that looked
     scattered when stretched across a wide viewport. */
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand   ccy"
      "balance toggles";
    align-items: center;
    column-gap: 24px;
    row-gap: 4px;
    padding: 24px 32px 18px;
    background: var(--bg);
  }
  .topbar .brand { grid-area: brand; align-self: end; }
  .topbar .balance { grid-area: balance; font-size: 40px; align-self: start; }
  .topbar .ccy-switcher { grid-area: ccy; justify-self: end; margin: 0; }
  .topbar .nw-toggles { grid-area: toggles; justify-self: end; margin: 0; }

  /* ----- Content column ----- */
  main {
    padding: 8px 32px 48px;
  }

  /* Wallet cards → responsive tile grid on wide screens. */
  #accountsList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--s3);
  }

  /* Category sub-grids can breathe into more columns. */
  .cat-subgrid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  }

  /* Give long single-column views a comfortable max reading width while
     leaving the wide dashboards (wallet, categories) full-bleed. */
  #view-tx, #view-settings, #view-add {
    max-width: 860px;
  }

  /* Two-column dashboard: net-worth chart (left) beside the account-status
     column — upcoming payments + integration health (right). Stacking those
     two on the right balances the tall chart so neither column ends short. */
  .wallet-dash {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(320px, 1fr);
    gap: 18px;
    align-items: start;
    margin-bottom: var(--s3);
  }
  .wallet-dash-main,
  .wallet-dash-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
  }
  .wallet-dash-main > *,
  .wallet-dash-side > * { margin: 0 !important; }
  /* A more substantial chart on the roomy desktop canvas. The 96-tall viewBox
     stretches (preserveAspectRatio=none) — fine for a trend line. */
  .wallet-dash #networthChart .nwch-canvas svg { height: 150px; }
  .wallet-dash #networthChart { padding: 16px 18px; }
  /* Keyboard focus is invisible on touch but essential with a keyboard. */
  :focus-visible {
    outline: 2px solid var(--button);
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* Pointer devices get a hover affordance the touch UI doesn't need. */
  @media (hover: hover) {
    .card { cursor: pointer; }
    .card:hover {
      background: var(--surface-2);
      border-color: var(--border-strong);
      transform: translateY(-1px);
    }
    .card:active { transform: translateY(0); }
  }

  /* Slimmer, themed scrollbars for the desktop chrome. */
  .sidebar::-webkit-scrollbar { width: 8px; }
  .sidebar::-webkit-scrollbar-thumb {
    background: var(--border-strong); border-radius: 8px;
  }
}

/* Extra-wide screens: let the two big dashboards use two columns of content
   where it reads well, without touching the mobile/touch layout. */
@media (min-width: 1320px) {
  #accountsList {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  }
}