/* ==========================================================================
   GST Reconciliation additions on top of the FTA "Ledger" design system.
   app.css is copied from the FTA Redesign Prototype and tokens.css carries the
   FTA production palette; everything app-specific lives here.
   ========================================================================== */

html, body { height: 100%; }
.frame { height: 100vh; height: 100dvh; }

/* ---------- Brand chrome: navy sidebar, as in the FTA app (fta-shell.css) ----------
   White text on the navy; the active item is a white pill. Menus keep the theme surface. */
.app {
  --sidebar-bg: #1F3D75;
  --chrome-ink: #FFFFFF; --chrome-ink-2: rgba(255, 255, 255, .84); --chrome-muted: rgba(255, 255, 255, .5);
  --chrome-line: rgba(255, 255, 255, .18); --chrome-hover: rgba(255, 255, 255, .12); --chrome-soft: rgba(255, 255, 255, .12);
  --chrome-pill: #FFFFFF; --chrome-pill-ink: #0F1E4D; --chrome-accent: #1F3D75;
  --chrome-focus: 0 0 0 2px #FFFFFF;
}
.sidebar { border-right-color: var(--chrome-line); position: relative; }
/* Logo on the top bar's surface, same height and bottom rule as the top bar */
.sidebar .sb-head { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 12px 0 16px; }
.app.collapsed .sidebar .sb-head { padding: 14px 0 12px; align-items: center; }
.sidebar .sb-scroll { padding-top: 14px; }
.sidebar .nav-group > .t-overline { color: var(--chrome-ink-2); }
.sidebar .nav-item { color: var(--chrome-ink-2); }
.sidebar .nav-item:hover { background: var(--chrome-hover); color: var(--chrome-ink); }
.sidebar .nav-item:focus-visible { box-shadow: var(--chrome-focus); }
.sidebar .nav-item.active { background: var(--chrome-pill); color: var(--chrome-pill-ink); box-shadow: 0 1px 2px rgba(10, 20, 60, .2); }
.sidebar .nav-item.active::before { background: #FFFFFF; }
.sidebar .nav-item.active .ico { color: var(--chrome-accent); }
.sidebar .nav-item .nav-meta { color: var(--chrome-ink); }
.sidebar .nav-item.locked { color: var(--chrome-muted); }
.sidebar .nav-item.active.locked { color: var(--chrome-pill-ink); }
.sidebar .nav-item.active.locked .nav-meta { color: var(--warning); }
.app.collapsed .sidebar .nav-group { border-top-color: var(--chrome-line); }
.sidebar .sb-foot { border-top-color: var(--chrome-line); position: relative; }
.sidebar .sb-foot .btn-ghost { color: var(--chrome-ink-2); }
.sidebar .sb-foot .btn-ghost:hover { background: var(--chrome-hover); color: var(--chrome-ink); }
.sidebar .sb-version { color: var(--chrome-ink-2); }
@container frame (max-width: 1100px) {
  .app .sidebar .nav-group { border-top-color: var(--chrome-line); }
  /* Narrow rail: the logo is cropped to its symbol, as in the collapsed sidebar */
  .app .sidebar .sb-head { padding: 14px 0 12px; justify-content: center; }
  .app .sb-logo { padding: 0 !important; }
  .app .sb-logo img { width: 27px; height: 32px; object-fit: cover; object-position: left center; }
}

/* Subscription card in the sidebar footer */
.sidebar .quota-card { display: flex; flex-direction: column; gap: 6px; background: var(--chrome-soft); border-color: var(--chrome-line); color: var(--chrome-ink); text-decoration: none !important; }
.sidebar .quota-card:hover { border-color: rgba(255, 255, 255, .34); }
.sidebar .quota-card:focus-visible { box-shadow: var(--chrome-focus); }
.sidebar .quota-card .row { color: var(--chrome-ink-2); }
.sidebar .quota-card .row b { color: var(--chrome-ink); font-size: 12.5px; font-weight: 600; }
.sidebar .quota-card .q-note { font-size: 11.5px; color: var(--chrome-ink-2); display: flex; justify-content: space-between; gap: 6px; }
.app.collapsed .sidebar .quota-card { display: none; }
@container frame (max-width: 1100px) { .app .sidebar .quota-card { display: none; } }
.quota-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.quota-bar > span { display: block; height: 100%; border-radius: inherit; background: #FFFFFF; }
.quota-bar.low > span { background: var(--warning); }
.quota-bar.locked > span { background: var(--error); width: 100% !important; }

/* Signed-in user and their menu */
.sidebar .user-chip { color: var(--chrome-ink); }
.sidebar .user-chip:hover { background: var(--chrome-hover); }
.sidebar .user-chip:focus-visible { box-shadow: var(--chrome-focus); }
.sidebar .user-chip .uc-text span, .sidebar .user-chip .uc-caret { color: var(--chrome-ink-2); }
.user-chip .uc-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip .uc-caret { margin-left: auto; flex: none; }
.sidebar .avatar.me { background: #FFFFFF; color: var(--chrome-accent); }
.sb-foot .menu.up { top: auto; bottom: calc(100% - 4px); left: 12px; right: 12px; min-width: 0; color: var(--text); transform-origin: bottom left; }
.app.collapsed .sb-foot .menu.up { right: auto; width: 230px; left: 8px; }
.menu .m-head b { display: block; font-size: 13px; font-weight: 600; }
.menu .m-head span { font-size: 12px; color: var(--text-3); overflow-wrap: anywhere; }
@container frame (max-width: 1100px) { .app .sb-foot .menu.up { right: auto; width: 230px; left: 8px; } }

/* Sign-in page */
.auth { min-height: 100%; }
.auth-art { background: #1F3D75; }
.auth-art .aa-logo { display: inline-flex; background: #FFFFFF; border-radius: 10px; padding: 6px 12px; }
.auth-art .aa-logo img { display: block; height: 40px; width: auto; }
.auth-art p { color: #C9D3E8; }
.auth-art .aa-stats span, .auth-art .aa-foot { color: #A9B7D3; }
.auth-art .aa-stats b { font-size: 16px; }
.auth-mobile-logo { display: none; height: 40px; width: auto; align-self: flex-start; }
@container frame (max-width: 900px) { .auth-mobile-logo { display: block; } }

.auth-card.wide { max-width: 480px; }
.auth-card .ac-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13.5px; }
.auth-card .ac-head p b { color: var(--text); font-weight: 600; }
.auth-card .otp { gap: 12px; }
.auth-card .otp input { max-width: 64px; height: 56px; font-size: 24px; font-weight: 600; }
.auth-card form.ac-foot { display: block; }
.btn-link { border: 0; background: none; padding: 0; font: inherit; color: var(--primary-ink); cursor: pointer; }
.btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Tables: green header band, as in the FTA app */
.table th { background: var(--th-bg); color: var(--th-ink); font-weight: 600; }
.kpi .kpi-label .ico { color: var(--kpi-ico); }

/* Upload */
.upload-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dropzone.has-file { border-style: solid; border-color: var(--success); background: var(--success-soft); }
.dropzone .dz-file { font-size: 12.5px; color: var(--success-ink); font-weight: 500; word-break: break-all; }
.dropzone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone { position: relative; }

/* Result tabs: one per sheet the macro produced */
.sheet-tabs { padding: 0 8px; }
/* More tabs than fit: show a thin scrollbar so the hidden ones can be reached */
.sheet-tabs { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.sheet-tabs::-webkit-scrollbar { display: block; height: 6px; }
.sheet-tabs::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.sheet-tabs::-webkit-scrollbar-track { background: transparent; }
.sheet-tabs .tab .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* Wide spreadsheet tables */
.sheet-table { max-height: 62vh; overflow: auto; }
.sheet-table .table th, .sheet-table .table td { padding: 8px 12px; white-space: nowrap; }
.sheet-table .table th { top: 0; }
.sheet-table .table td.r { font-variant-numeric: tabular-nums; }
.sheet-table .table td.hl { background: color-mix(in srgb, var(--warning) 12%, transparent); }
.sheet-table .table th.hl { color: var(--warning-ink); }
.sheet-table .table td.idx { color: var(--text-3); font-size: 12px; font-family: var(--font-mono); }
.sheet-table .table tr[hidden] { display: none; }

/* Party views: a party row opens that party's rows in every tab */
.sheet-table tr.party-link { cursor: pointer; }
.sheet-table tr.party-link:hover > td { background: var(--surface-2); }
.party-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 20px; background: var(--primary-soft); color: var(--primary-ink); border-bottom: 1px solid var(--border); border-radius: var(--r-lg, 12px) var(--r-lg, 12px) 0 0; }
.party-bar .pb-text { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.party-bar .pb-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.party-bar b { color: var(--text); }
.party-bar .spacer { flex: 1; }

/* Summary table (the macro's Summary sheet) */
.summary-table th { white-space: normal !important; line-height: 16px; vertical-align: bottom; }
.summary-table td, .summary-table th { text-align: center; }
.summary-table td:first-child, .summary-table th:first-child { text-align: left; }
.summary-table td { font-variant-numeric: tabular-nums; font-size: 14px; }

/* KPI tone accents */
.kpi.tone-success .kpi-value { color: var(--success-ink); }
.kpi.tone-warning .kpi-value { color: var(--warning-ink); }
.kpi.tone-error .kpi-value { color: var(--error-ink); }
.kpi .kpi-foot a { font-size: 12px; }

/* Manual */
.manual-steps .step .s-text span { font-size: 13px; line-height: 20px; }

/* Keep toasts inside the viewport on the static page */
.toasts { position: fixed; }
.overlay-root { position: fixed; }

@container frame (max-width: 900px) {
  .upload-grid { grid-template-columns: minmax(0, 1fr); }
}
@container frame (max-width: 640px) {
  .sheet-table { max-height: none; }
}
/* Collapsed sidebar: crop the logo to its symbol only */
.app.collapsed .sb-logo img { width: 27px; }

/* Form validation (app.js): invalid selects, upload boxes and code boxes, like .input.invalid */
.select.invalid, .otp.invalid input { border-color: var(--error); }
.select.invalid:focus, .otp.invalid input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 25%, transparent); }
.dropzone.invalid, .dropzone.invalid:hover { border-color: var(--error); background: var(--error-soft, transparent); }