/* =================================================================
   easiBooks global stylesheet  ·  eb-app.css
   -----------------------------------------------------------------
   Baseline + shared components. Uses only var(--eb-*) from
   eb-tokens.css. Page-specific rules go in css/{page}.css.
   Class prefix: eb-  (avoids clashes if Bootstrap is ever added)
   ================================================================= */

/* ---------- 1. Baseline ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--eb-bg);
    color: var(--eb-ink);
    font-family: var(--eb-font-ui);
    font-size: var(--eb-text-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p { margin: 0; }
[hidden] { display: none !important; }

a { color: var(--eb-link); text-decoration: none; }
a:hover { color: var(--eb-link-hover); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--eb-focus); outline-offset: 2px; border-radius: 4px; }

small, .eb-small, label, caption { font-size: var(--eb-text-sm); }

/* Every number that lines up in a column uses tabular figures */
.eb-num, .eb-money, td.eb-r, .eb-kpi { font-variant-numeric: tabular-nums; }

/* ---------- 2. Typography --------------------------------------- */
.eb-title {
    font-family: var(--eb-font-display);
    font-weight: 500;
    font-size: var(--eb-text-3xl);
    line-height: 1.1;
    color: var(--eb-ink);
}
.eb-h2      { font-size: var(--eb-text-lg); font-weight: 600; }
.eb-eyebrow {
    font-size: var(--eb-text-xs); font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--eb-ink-3);
}
.eb-caption { font-size: var(--eb-text-sm); color: var(--eb-ink-2); }
.eb-kpi     { font-size: var(--eb-text-2xl); font-weight: 600; letter-spacing: -0.01em; }
.eb-wordmark { font-family: var(--eb-font-display); font-size: 24px; color: var(--eb-selected-fg); }
.eb-wordmark::after { content: "."; color: var(--eb-brand-dot); }

/* ---------- 3. Page shell -------------------------------------- */
/* The sidebar itself lives in partials/nav.html + css/nav.css.       */
.eb-shell { display: flex; flex-wrap: wrap; min-height: 100vh; }
#nav-root { display: contents; }   /* injected <aside> becomes a flex child of .eb-shell */
.eb-main {
    flex: 999 1 560px; min-width: 0;
    padding: var(--eb-space-8) var(--eb-space-10) var(--eb-space-12);
    display: flex; flex-direction: column; gap: var(--eb-space-6);
}
.eb-page-head {
    display: flex; flex-wrap: wrap; gap: var(--eb-space-4);
    justify-content: space-between; align-items: flex-end;
}
.eb-page-head__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Popover menu (used by nav "+ New", company switcher, row actions) */
.eb-menu {
    position: absolute; z-index: 40; min-width: 220px; padding: 6px;
    background: var(--eb-surface); border: 1px solid var(--eb-line);
    border-radius: var(--eb-radius-lg); box-shadow: var(--eb-shadow-pop);
    display: flex; flex-direction: column;
}
.eb-menu[hidden] { display: none; }
.eb-menu__item {
    display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px;
    border: 0; border-radius: var(--eb-radius-md); background: transparent;
    font: 400 var(--eb-text-md) var(--eb-font-ui); color: var(--eb-ink); text-align: left; cursor: pointer;
}
.eb-menu__item:hover, .eb-menu__item:focus-visible { background: var(--eb-surface-hover); text-decoration: none; color: var(--eb-ink); }
.eb-menu__item--danger { color: var(--eb-negative-fg); }
.eb-menu__sep { height: 1px; margin: 6px 4px; background: var(--eb-line-soft); }
.eb-menu__item[hidden], .eb-menu__sep[hidden] { display: none; }

/* ---------- 4. Buttons ------------------------------------------ */
.eb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: var(--eb-control-h); padding: 0 16px;
    border-radius: var(--eb-radius-md); border: 1px solid transparent;
    font: 600 var(--eb-text-md) var(--eb-font-ui);
    white-space: nowrap; cursor: pointer; text-decoration: none;
    transition: background-color .12s, border-color .12s;
}
.eb-btn:hover { text-decoration: none; }
.eb-btn svg { width: 16px; height: 16px; }

.eb-btn--primary   { background: var(--eb-primary); color: var(--eb-on-primary); }
.eb-btn--primary:hover { background: var(--eb-primary-hover); color: var(--eb-on-primary); }

.eb-btn--secondary { background: var(--eb-surface); color: var(--eb-ink); border-color: var(--eb-line-strong); }
.eb-btn--secondary:hover { border-color: var(--eb-line-hover); color: var(--eb-ink); }

.eb-btn--quiet     { background: transparent; color: var(--eb-link); }
.eb-btn--quiet:hover { background: var(--eb-neutral-bg); }

.eb-btn--danger    { background: var(--eb-surface); color: var(--eb-negative-fg); border-color: var(--eb-negative-panel-line); }
.eb-btn--danger:hover { background: var(--eb-negative-panel); }

.eb-btn--icon  { width: var(--eb-control-h); padding: 0; }
.eb-btn--block { width: 100%; }

.eb-btn:disabled, .eb-btn[aria-disabled="true"] {
    background: var(--eb-surface-2); color: var(--eb-ink-disabled);
    border-color: var(--eb-line); cursor: not-allowed;
}

/* ---------- 5. Forms -------------------------------------------- */
.eb-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.eb-field.eb-check { flex-direction: row; align-items: center; gap: 8px; }   /* a statement the person ticks to confirm */
.eb-label { font-size: var(--eb-text-sm); font-weight: 500; color: var(--eb-ink); }
.eb-label__opt { font-weight: 400; color: var(--eb-ink-3); }
.eb-hint  { font-size: var(--eb-text-xs); color: var(--eb-ink-2); }
.eb-error { font-size: var(--eb-text-xs); color: var(--eb-negative-fg); font-weight: 500; }

.eb-input, .eb-select {
    width: 100%; height: var(--eb-control-h); padding: 0 12px;
    border: 1px solid var(--eb-line-strong); border-radius: var(--eb-radius-md);
    background: var(--eb-surface); color: var(--eb-ink);
    font: 400 var(--eb-text-md) var(--eb-font-ui);
}
.eb-input::placeholder { color: var(--eb-ink-disabled); }
.eb-input:focus, .eb-select:focus { outline: 2px solid var(--eb-focus); outline-offset: 1px; border-color: var(--eb-focus); }
.eb-input[readonly], .eb-input:disabled { background: var(--eb-surface-2); color: var(--eb-ink-2); }
.eb-input.is-invalid { border-color: var(--eb-negative-dot); }

/* Styled native select: keeps keyboard + screen-reader behavior */
.eb-select {
    appearance: none; -webkit-appearance: none; padding-right: 36px;
    background-image: linear-gradient(45deg, transparent 50%, var(--eb-ink-2) 50%),
                      linear-gradient(135deg, var(--eb-ink-2) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

/* Date inputs: the picker icon follows color-scheme set in eb-tokens.css */
.eb-input[type="date"]::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }

/* Search box with icon */
.eb-search {
    display: flex; align-items: center; gap: 8px; height: var(--eb-control-h); padding: 0 12px;
    border: 1px solid var(--eb-line-strong); border-radius: var(--eb-radius-md); background: var(--eb-surface);
}
.eb-search input { border: 0; outline: 0; background: transparent; width: 100%; font: 400 var(--eb-text-md) var(--eb-font-ui); color: var(--eb-ink); }
.eb-search:focus-within { outline: 2px solid var(--eb-focus); outline-offset: 1px; }

/* Checkbox / radio accent */
input[type="checkbox"], input[type="radio"] { accent-color: var(--eb-primary); width: 18px; height: 18px; }

/* Switch: <button class="eb-switch" role="switch" aria-checked="true"> */
.eb-switch {
    position: relative; width: 40px; height: 24px; flex: none; padding: 0;
    border: 0; border-radius: 12px; background: var(--eb-line-strong); cursor: pointer;
}
.eb-switch::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
    border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0,0,0,.25);
    transition: left .15s;
}
.eb-switch[aria-checked="true"] { background: var(--eb-primary); }
.eb-switch[aria-checked="true"]::after { left: 19px; }

/* Settings section: description left, fields right */
.eb-form-section {
    display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
    gap: var(--eb-space-10); padding: 28px var(--eb-space-8);
    border-bottom: 1px solid var(--eb-line-soft);
}
.eb-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.eb-form-grid .is-wide { grid-column: 1 / -1; }
.eb-save-bar {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--eb-space-3);
    padding: var(--eb-space-4) var(--eb-space-8); background: var(--eb-surface-2);
    position: sticky; bottom: 0;
}

/* ---------- 6. Cards & panels ----------------------------------- */
.eb-card {
    background: var(--eb-surface); border: 1px solid var(--eb-line);
    border-radius: var(--eb-radius-lg);
}
.eb-card--pad { padding: var(--eb-space-6); }
.eb-card--negative { background: var(--eb-negative-panel); border-color: var(--eb-negative-panel-line); }
.eb-card--positive { background: var(--eb-positive-panel); border-color: var(--eb-positive-panel-line); }
.eb-card--warning  { background: var(--eb-warning-panel);  border-color: var(--eb-warning-panel-line); }

/* KPI tile */
.eb-stat { padding: 18px var(--eb-space-5); display: flex; flex-direction: column; gap: 6px; }

/* Grid of tiles that wraps on small screens */
.eb-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }

/* Paper sheet for read-mode documents (invoice, bill, JE, reports) */
.eb-sheet {
    background: var(--eb-surface); border: 1px solid var(--eb-line);
    border-radius: var(--eb-radius-sm); box-shadow: var(--eb-shadow-sheet);
    padding: var(--eb-space-12) 52px;
}

/* Key / value list */
.eb-kv { display: flex; justify-content: space-between; gap: var(--eb-space-3); padding: 10px 0; border-bottom: 1px solid var(--eb-line-soft); font-size: var(--eb-text-md); }
.eb-kv:last-child { border-bottom: 0; }
.eb-kv__k { color: var(--eb-ink-2); }

/* Banner / callout */
.eb-banner {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--eb-space-4);
    padding: var(--eb-space-4) var(--eb-space-5); border-radius: var(--eb-radius-lg);
    border: 1px solid var(--eb-warning-panel-line); background: var(--eb-warning-bg); color: var(--eb-warning-fg);
}

/* Empty state */
.eb-empty {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    padding: var(--eb-space-6); border: 1px dashed var(--eb-line-strong);
    border-radius: var(--eb-radius-lg); background: var(--eb-surface-hover);
}

/* ---------- 7. Status pills -------------------------------------- */
.eb-pill {
    display: inline-flex; align-items: center; gap: 6px;
    height: 24px; padding: 0 10px; border-radius: var(--eb-radius-pill);
    font-size: var(--eb-text-xs); font-weight: 600; white-space: nowrap;
    background: var(--eb-neutral-bg); color: var(--eb-neutral-fg);
}
.eb-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--eb-neutral-dot); }
.eb-pill--positive { background: var(--eb-positive-bg); color: var(--eb-positive-fg); }
.eb-pill--positive::before { background: var(--eb-positive-dot); }
.eb-pill--warning  { background: var(--eb-warning-bg);  color: var(--eb-warning-fg); }
.eb-pill--warning::before  { background: var(--eb-warning-dot); }
.eb-pill--negative { background: var(--eb-negative-bg); color: var(--eb-negative-fg); }
.eb-pill--negative::before { background: var(--eb-negative-dot); }
.eb-pill--info     { background: var(--eb-info-bg);     color: var(--eb-info-fg); }
.eb-pill--info::before     { background: var(--eb-info-dot); }
.eb-pill--void     { text-decoration: line-through; }
.eb-pill--void::before, .eb-pill--plain::before { display: none; }
.eb-count { /* small count badge in nav and tabs */
    font-size: var(--eb-text-xs); font-weight: 600; padding: 1px 8px;
    border-radius: var(--eb-radius-pill); background: var(--eb-neutral-bg); color: var(--eb-ink-body);
}

/* ---------- 8. Tabs, chips, segmented ---------------------------- */
.eb-tabs { display: flex; flex-wrap: wrap; gap: 22px; border-bottom: 1px solid var(--eb-line); }
.eb-tab {
    display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 4px;
    font-size: var(--eb-text-md); font-weight: 500; color: var(--eb-ink-2);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.eb-tab:hover { color: var(--eb-ink); text-decoration: none; }
.eb-tab.is-active { color: var(--eb-selected-fg); font-weight: 600; border-bottom-color: var(--eb-selected-fg); }

.eb-chip {
    display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
    border-radius: var(--eb-radius-pill); border: 1px solid var(--eb-line-strong);
    background: var(--eb-surface); color: var(--eb-ink-body);
    font: 500 var(--eb-text-sm) var(--eb-font-ui); cursor: pointer;
}
.eb-chip[aria-pressed="true"], .eb-chip.is-active { background: var(--eb-primary); border-color: var(--eb-primary); color: var(--eb-on-primary); }

.eb-segmented { display: inline-flex; border: 1px solid var(--eb-line-strong); border-radius: var(--eb-radius-md); overflow: hidden; background: var(--eb-surface); }
.eb-segmented button {
    height: 38px; padding: 0 14px; border: 0; border-right: 1px solid var(--eb-line);
    background: transparent; color: var(--eb-ink-body); font: 500 var(--eb-text-md) var(--eb-font-ui); cursor: pointer;
}
.eb-segmented button:last-child { border-right: 0; }
.eb-segmented button[aria-pressed="true"] { background: var(--eb-selected-bg); color: var(--eb-selected-fg); font-weight: 600; }

/* ---------- 9. Tables ------------------------------------------- */
.eb-table-wrap { position: relative; overflow-x: auto; }   /* positioned: see .pg-lines-wrap */
.eb-table { width: 100%; border-collapse: collapse; font-size: var(--eb-text-md); }
.eb-table th {
    padding: 12px 16px; text-align: left; white-space: nowrap;
    font-size: var(--eb-text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--eb-ink-2); background: var(--eb-surface-2); border-bottom: 1px solid var(--eb-line);
}
.eb-table td { padding: 14px 16px; border-bottom: 1px solid var(--eb-line-soft); color: var(--eb-ink); }
.eb-table tbody tr:hover td { background: var(--eb-surface-hover); }
.eb-table .eb-r { text-align: right; font-variant-numeric: tabular-nums; }
.eb-table tr.is-void td { color: var(--eb-ink-2); }
.eb-table tr.is-void .eb-amount { text-decoration: line-through; }
.eb-table tfoot td { font-weight: 600; background: var(--eb-surface-2); border-top: 1.5px solid var(--eb-ink); border-bottom: 0; }
.eb-table-foot {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--eb-space-3);
    padding: 14px var(--eb-space-5); background: var(--eb-surface-2);
}
.eb-late { color: var(--eb-negative-fg); font-size: var(--eb-text-sm); font-weight: 500; }

/* Financial statement table (inside .eb-sheet) */
.eb-statement { width: 100%; border-collapse: collapse; font-size: var(--eb-text-md); }
.eb-statement th { padding: 10px 0; text-align: left; font-size: var(--eb-text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--eb-ink-2); border-bottom: 1.5px solid var(--eb-ink); }
.eb-statement td { padding: 11px 0; border-bottom: 1px solid var(--eb-line-soft); }
.eb-statement .eb-r { text-align: right; font-variant-numeric: tabular-nums; }
.eb-statement .is-section td { padding-top: 26px; border-bottom: 0; font-size: var(--eb-text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--eb-selected-fg); }
.eb-statement .is-account td:first-child { padding-left: 20px; }
.eb-statement .is-total td { font-weight: 600; background: var(--eb-surface-2); border-bottom-color: var(--eb-line-strong); }
.eb-statement .is-grand td { font-weight: 600; font-size: 16px; border-top: 1.5px solid var(--eb-ink); border-bottom: 3px double var(--eb-ink); padding: 14px 0; }
.eb-drill { color: var(--eb-ink); border-bottom: 1px dotted var(--eb-line-hover); }
.eb-drill:hover { color: var(--eb-link-hover); border-bottom-color: currentColor; text-decoration: none; }

/* ---------- 10. Avatars ----------------------------------------- */
.eb-avatar {
    width: 28px; height: 28px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--eb-text-xs); font-weight: 600;
    background: var(--eb-neutral-bg); color: var(--eb-neutral-fg);
}
.eb-avatar--lg { width: 52px; height: 52px; font-size: 18px; }

/* ---------- 11. Charts ------------------------------------------ */
.eb-chart-line { stroke: var(--eb-chart-line); fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.eb-chart-area { fill: var(--eb-chart-area); }
.eb-chart-grid { stroke: var(--eb-chart-grid); fill: none; }
.eb-bar { height: 8px; border-radius: 4px; background: var(--eb-line-soft); overflow: hidden; }
.eb-bar__fill { height: 100%; border-radius: 4px; background: var(--eb-chart-1); }

/* ---------- 12. Phone ------------------------------------------- */
@media (max-width: 720px) {
    .eb-main { padding: var(--eb-space-5) var(--eb-space-4) 96px; }   /* room for the tab bar */
    .eb-btn, .eb-input, .eb-select { height: var(--eb-touch-h); }
    .eb-form-section { grid-template-columns: 1fr; gap: var(--eb-space-4); padding: var(--eb-space-6) var(--eb-space-5); }
    .eb-form-grid { grid-template-columns: 1fr; }
    .eb-sheet { padding: var(--eb-space-6) var(--eb-space-5); }
    .eb-title { font-size: var(--eb-text-2xl); }
}

/* ---------- 13. Utilities --------------------------------------- */
.eb-row   { display: flex; align-items: center; gap: var(--eb-space-3); }
.eb-stack { display: flex; flex-direction: column; gap: var(--eb-space-3); }
.eb-wrap  { flex-wrap: wrap; }
.eb-grow  { flex: 1 1 auto; min-width: 0; }
.eb-ml-auto { margin-left: auto; }
.eb-positive { color: var(--eb-positive-fg); }
.eb-negative { color: var(--eb-negative-fg); }
.eb-muted    { color: var(--eb-ink-2); }
.eb-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- 14. Print: documents always print in the light theme  */
@media print {
    :root, :root[data-theme="dark"] { color-scheme: light; }
    body { background: #FFFFFF; color: #17201B; }
    #nav-root, .eb-page-head__actions, .eb-no-print { display: none !important; }
    .eb-main { padding: 0; }
    .eb-sheet { box-shadow: none; border: 0; padding: 0; background: #FFFFFF; color: #17201B; }
}

/* ---------- 15. Toasts (showSuccess / showError in utils.js) ----- */
.eb-toast-root {
    position: fixed; right: var(--eb-space-6); bottom: var(--eb-space-6); z-index: 60;
    display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px));
}
.eb-toast {
    padding: 12px 16px; border-radius: var(--eb-radius-md);
    background: var(--eb-ink); color: var(--eb-bg);
    font-size: var(--eb-text-md); box-shadow: var(--eb-shadow-pop);
}
.eb-toast--success { background: var(--eb-positive-bg); color: var(--eb-positive-fg); border: 1px solid var(--eb-positive-panel-line); }
.eb-toast--error   { background: var(--eb-negative-bg); color: var(--eb-negative-fg); border: 1px solid var(--eb-negative-panel-line); }
@media (max-width: 720px) { .eb-toast-root { right: 16px; left: 16px; bottom: 92px; } }

.eb-btn--sm { height: 32px; padding: 0 12px; font-size: var(--eb-text-sm); }