/* App shell: sidebar, main column, topbar */

.app{
  display:grid;
  grid-template-columns:236px 1fr;
  min-height:100vh;
}

.sidebar{
  background:var(--ink);
  color:#e9e9f2;
  padding:26px 20px 20px;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  /* position:sticky makes this its own stacking context, so the tooltips' z-index
     only ranks them *within* the sidebar. The metric cards animate `opacity`, which
     makes each of them a stacking context too — and being later in the DOM at the
     same level, they painted over the tooltips. Lifting the whole sidebar fixes it
     for everything inside. Stays below the toast (100) and the auth gate (60). */
  z-index:10;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 4px 26px;
  min-width:0;
}
.brand-text{min-width:0;}

/* Lives in the sync row, pushed to the far end by margin-left:auto. */
.sidebar-toggle{
  flex-shrink:0;
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  padding:0;
  border:none;
  border-radius:8px;
  background:transparent;
  color:#7d8098;
  cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.sidebar-toggle:hover{background:var(--ink-2); color:#e9e9f2;}
.sidebar-toggle:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
/* Sized like .auth-mark, and for the same reason: the wallet fills only the
   middle of its icon canvas, so the image is drawn larger and pulled in by the
   margin until the wallet itself fills the 34px slot. */
.brand-mark{
  width:52px;height:52px;
  margin:-9px;
  flex-shrink:0;
}
.brand-name{
  font-family:var(--font-display);
  font-weight:600;
  font-size:16px;
  letter-spacing:0.05em;
  color:#fbfbfe;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:150px;
}

nav.navlist{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:6px;
}
.nav-item{
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px 12px;
  border-radius:9px;
  background:transparent;
  border:none;
  color:#a9acc2;
  font-size:13.5px;
  font-weight:500;
  text-align:left;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.nav-item svg{flex-shrink:0; opacity:.85;}
.nav-item:hover{background:var(--ink-2); color:#fff;}
.nav-item.active{background:var(--ink-3); color:#fff;}
.nav-item.active svg{opacity:1;}


.main{
  padding:30px 40px 60px;
  max-width:1360px;
  width:100%;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:28px;
  flex-wrap:wrap;
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--teal);
  margin:0 0 6px;
  font-weight:600;
}
h1.page-title{
  font-family:var(--font-display);
  font-size:30px;
  font-weight:700;
  margin:0 0 6px;
  letter-spacing:-0.01em;
}
.page-sub{
  font-size:13.5px;
  color:var(--text-dim);
  margin:0;
  max-width:480px;
  /* pre-line, not pre: the sentence still wraps to the column, but a newline in
     the text is honoured — which is how the dashboard's period keeps a line to
     itself instead of splitting across whatever break the width produces. */
  white-space:pre-line;
}
.topbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
/* ---- Period picker ----
   A native <select> here grew by thirteen options a year, and the OS drew the
   menu tall enough to cover the dashboard behind it. This is the same control
   to look at, opening onto a year of months laid out as a grid: four rows
   instead of thirteen, and the same height however long the ledger gets. */

.period-picker{position:relative;}
#periodMenu{right:0; width:272px;}
.period-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--card);
  border:1px solid var(--line-input);
  border-radius:9px;
  padding:9px 14px;
  font-size:13px;
  font-weight:500;
  color:var(--text);
  cursor:pointer;
  white-space:nowrap;
}
.period-btn:hover{border-color:var(--indigo);}
.period-caret{width:10px; height:6px; flex:none; color:var(--text-dim);}

/* Anchored menu, shared by the period picker and the currency field. Width and
   side are set by whichever field it belongs to. */
.menu{
  position:absolute;
  top:100%;
  margin-top:8px;
  /* Tall enough for the longest menu to open whole — ten currency rows come to
     about 336px. Capped against the viewport so a short window scrolls rather
     than running the panel off the screen. */
  max-height:min(420px, 70vh);
  overflow-y:auto;
  /* Only reached on a viewport too short for the list. Snapping to row edges
     keeps a half-cut row from being what it settles on. */
  scroll-snap-type:y proximity;
  scroll-padding:8px 0;
  padding:8px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
  box-shadow:0 1px 2px rgba(17,18,28,0.05), 0 18px 44px -20px rgba(17,18,28,0.45);
  z-index:30;
}
.menu[hidden]{display:none;}

.menu-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:8px 10px;
  border:none;
  border-radius:8px;
  background:none;
  font-size:13px;
  font-weight:500;
  color:var(--text);
  text-align:left;
  cursor:pointer;
  scroll-snap-align:start;
}
.menu-row:hover{background:var(--paper);}
/* Two selection attributes because the two menus are different things: the
   period picker's rows are toggle buttons, the currency menu is a listbox. */
.menu-row[aria-pressed="true"],
.menu-row[aria-selected="true"]{background:var(--indigo-soft); color:var(--indigo-deep);}
/* The tick marks the selection, so it is only ever drawn on the selected row. */
.menu-tick{font-size:11px; visibility:hidden;}
.menu-row[aria-pressed="true"] .menu-tick,
.menu-row[aria-selected="true"] .menu-tick{visibility:visible;}

.menu-sep{height:1px; background:var(--line); margin:8px 4px;}

.period-years{display:flex; gap:6px; padding:0 4px 8px;}
.period-year{
  flex:1;
  padding:6px 0;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--card);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  color:var(--text-dim);
  cursor:pointer;
}
.period-year:hover{border-color:var(--line-input);}
.period-year[aria-pressed="true"]{
  background:var(--indigo);
  border-color:var(--indigo);
  color:var(--on-accent);
}

.period-months{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:4px;
  padding:0 4px 4px;
}
.period-month{
  padding:7px 0;
  border:none;
  border-radius:7px;
  background:none;
  font-size:12px;
  font-weight:500;
  color:var(--text);
  cursor:pointer;
}
.period-month:hover:not(:disabled){background:var(--paper);}
.period-month[aria-pressed="true"]{background:var(--indigo); color:var(--on-accent);}
.period-month:disabled{color:var(--text-disabled); cursor:default;}

/* ---- Sidebar footer: sync status + account ---- */

.sidebar-foot{
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid #262940;
}

.sync-row{
  display:flex;
  align-items:center;
  gap:9px;
  padding:6px 6px 10px;
  font-size:12.5px;
  color:#7d8098;
}
.sync-icon{
  display:flex;
  flex-shrink:0;
  color:#585c78;               /* neutral until a sync has actually happened */
}
.sync-row.is-ok .sync-icon{color:#3fbf94;}
.sync-row.is-warn .sync-icon{color:#d98466;}
.sync-label{
  color:#c7c9dc;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sync-row.is-warn .sync-label{color:#e0a892;}

.account{position:relative;}

.account-btn{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 8px;
  border:none;
  border-radius:10px;
  background:transparent;
  color:inherit;
  cursor:pointer;
  text-align:left;
  transition:background .12s ease;
}
.account-btn:hover{background:var(--ink-2);}
.account-btn[aria-expanded="true"]{background:var(--ink-2);}
.account-btn:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}

.account-mark{
  width:30px;height:30px;
  border-radius:9px;
  /* Pinned, not var(--teal): the mark is a logo, and the dark theme's lighter
     teal left its near-white letter at 2.17:1. */
  background:linear-gradient(155deg, #1f7a63, #133c30);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:13.5px;
  color:#eafff5;
  flex-shrink:0;
}
/* min-width:0 lets the two lines below actually ellipsis inside the flex row. */
.account-text{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.account-name{
  font-size:13.5px;
  font-weight:600;
  color:#fbfbfe;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.account-email{
  font-size:11px;
  color:#7d8098;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.account-chevron{
  margin-left:auto;
  flex-shrink:0;
  color:#7d8098;
}

.account-menu{
  position:absolute;
  bottom:calc(100% + 6px);
  left:0;
  right:0;
  background:var(--ink-2);
  border:1px solid #2f3350;
  border-radius:11px;
  padding:6px;
  box-shadow:0 16px 40px -12px rgba(0,0,0,0.7);
  z-index:20;
}
.account-menu[hidden]{display:none;}

.account-menu-item{
  display:block;
  width:100%;
  padding:9px;
  border:none;
  border-radius:8px;
  background:transparent;
  color:#e9e9f2;
  font-size:12.5px;
  font-weight:500;
  text-align:left;
  cursor:pointer;
}
.account-menu-item:hover{background:var(--ink-3);}
.account-menu-item:focus-visible{outline:2px solid var(--teal); outline-offset:-2px;}

/* ---- Collapsed sidebar ---- */

/* Scoped above the mobile breakpoint on purpose: below it the sidebar is already a
   horizontal bar, and a 72px rail would fight that layout. */
@media (min-width: 761px){
  .app{transition:grid-template-columns .18s ease;}

  .app.sidebar-collapsed{grid-template-columns:72px 1fr;}
  .app.sidebar-collapsed .sidebar{padding:26px 14px 20px;}

  .app.sidebar-collapsed .brand{justify-content:center; padding:0 0 22px;}
  .app.sidebar-collapsed .brand-text{display:none;}

  .app.sidebar-collapsed .nav-item{
    justify-content:center;
    padding:10px 0;
  }

  /* Stacked, because 72px minus padding does not fit the status dot and the toggle
     side by side. Both stay visible: one reports state, the other is the only way
     back out of the rail.
     column-reverse puts the toggle above the status dot, so the control sits nearer
     the nav it acts on and the dot stays adjacent to the account row. */
  .app.sidebar-collapsed .sync-row{
    flex-direction:column-reverse;
    gap:8px;
    padding:6px 0 10px;
  }
  .app.sidebar-collapsed .sync-label{display:none;}
  .app.sidebar-collapsed .sidebar-toggle{margin-left:0;}

  .app.sidebar-collapsed .account-btn{justify-content:center; padding:8px 0;}
  .app.sidebar-collapsed .account-text,
  .app.sidebar-collapsed .account-chevron{display:none;}

  /* The rail is too narrow to hold a readable menu, so it breaks out to the right. */
  .app.sidebar-collapsed .account-menu{
    left:0;
    right:auto;
    width:210px;
  }
}

/* The divider bar mirrors to the far side when collapsed, so the icon shows which
   state you are in rather than only naming the action in its tooltip. */
.sidebar-toggle svg{transition:transform .18s ease;}
.app.sidebar-collapsed .sidebar-toggle svg{transform:scaleX(-1);}

@media (min-width: 761px){
  /* ---- Sidebar tooltips ---- */

  /* Three sources, one appearance:
     - nav items reposition their real `.nav-label` (below), so the text stays in the
       DOM and the button keeps its accessible name when the rail hides the label;
     - the toggle and account buttons have no label of their own, so they draw one
       from `data-tip`.
     Light pill on the dark rail, so it reads as sitting above the sidebar. */
  .sidebar-toggle::after,
  .app.sidebar-collapsed .account-btn::after,
  .app.sidebar-collapsed .nav-label{
    position:absolute;
    left:calc(100% + 12px);
    top:50%;
    transform:translate(-4px, -50%);
    z-index:30;

    background:var(--card);
    color:var(--text);
    font-family:var(--font-body);
    font-size:12.5px;
    font-weight:600;
    letter-spacing:0;
    text-transform:none;
    white-space:nowrap;
    padding:7px 12px;
    border-radius:9px;
    box-shadow:0 8px 24px -8px rgba(17,18,28,0.45), 0 1px 2px rgba(17,18,28,0.12);

    opacity:0;
    /* Not visibility:hidden — that would drop the nav label out of the accessibility
       tree and leave a collapsed nav button with no name to announce. */
    pointer-events:none;
    transition:opacity .13s ease, transform .13s ease;
  }

  .sidebar-toggle::after,
  .app.sidebar-collapsed .account-btn::after{content:attr(data-tip);}

  .sidebar-toggle,
  .account-btn,
  .nav-item{position:relative;}

  .sidebar-toggle:hover::after,
  .sidebar-toggle:focus-visible::after,
  .app.sidebar-collapsed .account-btn:hover::after,
  .app.sidebar-collapsed .account-btn:focus-visible::after,
  .app.sidebar-collapsed .nav-item:hover .nav-label,
  .app.sidebar-collapsed .nav-item:focus-visible .nav-label{
    opacity:1;
    transform:translate(0, -50%);
  }

  /* An open account menu already names the account; a tooltip over it is noise. */
  .app.sidebar-collapsed .account-btn[aria-expanded="true"]::after{opacity:0;}
}