/* Mona Sans is the NYX primary typeface. Its width axis stands in for the
   secondary face, Aktiv Grotesk Expanded, which is licensed and can't be served
   here — headings use the expanded end of Mona Sans instead. */
@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:wdth,wght@75..125,200..900&display=swap');

/* ---------------------------------------------------------------------------
   NYX Realty Investments brand palette (Brand Book, May 2025).

     Strong Navy Blue    #193976
     Vibrant Royal Blue  #2845cf
     Soft Cool Gray      #d3d8e0
     Lime                #01ffa4

   The brand book's approved pairings are navy/gray, royal/gray, lime/gray and
   royal/lime — lime is never paired with white. That matters here: lime on white
   sits at roughly 1.5:1 contrast, far under the 4.5:1 needed for text. So lime
   is used as a *fill* (bars, accents, badge grounds) and a darkened tone of the
   same hue carries any lime-coloured text.
   --------------------------------------------------------------------------- */
:root {
  /* A pale tint of Soft Cool Gray, so the page ground stays in the brand's
     cool-neutral family instead of plain white. */
  --surface-bg: #f4f6f9;
  --card-bg: #ffffff;
  --dark: #193976;          /* Strong Navy Blue */
  --dark-light: #24437f;
  --muted: #67758e;         /* Soft Cool Gray, darkened to clear 4.5:1 on white */
  --border: #d3d8e0;        /* Soft Cool Gray */
  --primary: #2845cf;       /* Vibrant Royal Blue */
  --primary-hover: #1e35a8;
  --primary-soft: rgba(40, 69, 207, 0.1);

  --accent: #01ffa4;        /* Lime — fills and accents only, never text */
  --accent-soft: rgba(1, 255, 164, 0.18);

  /* Readable stand-in for lime wherever the colour has to carry text. */
  --success: #00875a;
  --success-bg: rgba(1, 255, 164, 0.22);
  --warning: #b45309;
  --warning-bg: rgba(251, 191, 36, 0.18);
  /* Not a brand colour, but books need a negative. Tuned cool so it sits with
     the navy rather than fighting it. */
  --danger: #d92d20;
  --danger-bg: rgba(217, 45, 32, 0.1);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

/* --- Base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-bg);
  color: var(--dark);
  font-family: 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }

h1 { font-size: 1.6rem; font-weight: 700; font-stretch: 112%; letter-spacing: -0.01em; margin: 0 0 1.25rem; }
h2 { font-size: 1.2rem; font-weight: 600; font-stretch: 108%; margin: 1.75rem 0 0.75rem; }
h3 { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
     color: var(--muted); margin: 1.75rem 0 0.6rem; }

small { color: var(--muted); font-size: 0.78rem; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
main.container { padding-top: 1.75rem; padding-bottom: 4rem; }

/* --- Header -------------------------------------------------------------- */

.app-header { background: var(--dark); color: #fff; }
.app-header-inner {
  max-width: 1280px; margin: 0 auto; padding: 0.9rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand-mark {
  width: 30px; height: 30px; background: var(--accent); color: var(--dark);
  display: grid; place-items: center; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em;
  /* Three square corners and one rounded, echoing the brand's graphic elements. */
  border-radius: 0 var(--r-sm) 0 var(--r-sm);
}
.brand-name { font-weight: 700; letter-spacing: -0.01em; }
.brand-divider { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.2); }
.brand-context { color: #cbd5e1; font-size: 0.9rem; }

.company-picker { display: flex; align-items: center; gap: 1rem; }
.company-picker label {
  margin: 0; font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: #94a3b8;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.last-updated { text-align: right; line-height: 1.3; }
.last-updated-label {
  display: block; font-size: 0.65rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: #94a3b8;
}
.last-updated-value { display: block; font-size: 0.8rem; font-weight: 500; color: #e2e8f0; }

/* --- User menu ------------------------------------------------------------ */

.user-menu { display: flex; align-items: center; gap: 0.55rem; padding-left: 1rem;
             border-left: 1px solid rgba(255, 255, 255, 0.15); }
.user-avatar {
  width: 30px; height: 30px; border-radius: 999px; background: var(--accent); color: var(--dark);
  display: grid; place-items: center; font-size: 0.8rem; font-weight: 700;
}
.user-details { display: flex; flex-direction: column; line-height: 1.25; }
.user-name { font-size: 0.8rem; font-weight: 600; color: #e2e8f0; }
.user-role { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; }
.user-signout {
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); color: #cbd5e1;
  font-size: 0.72rem; font-weight: 500; padding: 0.3rem 0.6rem;
}
.user-signout:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* --- Settings (gear) menu ------------------------------------------------- */

.settings-menu { position: relative; }
.settings-menu > summary {
  list-style: none; cursor: pointer; padding: 0.45rem 0.75rem; border-radius: var(--r-sm);
  color: var(--muted); font-size: 1rem; line-height: 1.2;
}
.settings-menu > summary::-webkit-details-marker { display: none; }
.settings-menu > summary:hover { color: var(--dark); background: var(--surface-bg); }
.settings-menu.active > summary { color: #fff; background: var(--dark); }
.settings-dropdown {
  position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 20; min-width: 200px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-md); padding: 0.35rem;
}
.settings-dropdown a {
  display: block; padding: 0.5rem 0.7rem; border-radius: var(--r-sm);
  color: var(--dark-light); font-size: 0.85rem; white-space: nowrap;
}
.settings-dropdown a:hover { background: var(--surface-bg); color: var(--dark); }
.settings-dropdown hr { border: none; border-top: 1px solid var(--border); margin: 0.35rem 0; }

/* --- Login --------------------------------------------------------------- */

.login-page { min-height: 100vh; display: grid; place-items: center; background: var(--dark); }
.login-card {
  width: min(400px, calc(100vw - 2rem));
  background: var(--card-bg); border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  padding: 2rem;
}
.login-brand { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 1.5rem; }
.login-brand .brand-name { color: var(--dark); font-size: 1.05rem; }
.login-submit { width: 100%; margin-top: 0.5rem; padding: 0.65rem; }

/* --- Attachments --------------------------------------------------------- */

.doc-cell { text-align: center; width: 44px; }
.doc-link {
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  border: 1px dashed var(--border); border-radius: var(--r-sm);
  color: var(--muted); font-size: 0.95rem; line-height: 1; text-decoration: none;
}
.doc-link:hover { border-style: solid; border-color: var(--primary); color: var(--primary); }
/* Once a row has documents the marker becomes solid and shows the count. */
.doc-link .doc-count {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: var(--primary-soft); color: var(--primary);
  border-radius: calc(var(--r-sm) - 1px); font-size: 0.72rem; font-weight: 700;
}

/* Inline "create a new account" fields, revealed from the category dropdown. */
.new-account-fields { margin-top: 0.5rem; display: grid; gap: 0.35rem; }
.new-account-fields[hidden] { display: none; }
.company-picker select {
  margin-top: 0; width: auto; min-width: 210px;
  background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18);
  color: #fff; font-weight: 500;
}
.company-picker select:hover { background: rgba(255, 255, 255, 0.14); }
.company-picker select option { background: var(--dark); color: #fff; }

/* --- Section nav (pill tabs, like the portal's module switcher) ---------- */

.section-nav { padding: 1.25rem 1.5rem 0; display: flex; justify-content: center; }
.section-nav-inner {
  /* No overflow scrolling here: it would also clip vertically and swallow the
     settings dropdown, which is positioned below the bar. Few enough items to
     wrap instead. */
  display: flex; gap: 0.2rem; max-width: 100%; flex-wrap: wrap; justify-content: center;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm); padding: 0.35rem;
}
.section-nav a {
  white-space: nowrap; color: var(--muted); font-size: 0.85rem; font-weight: 500;
  padding: 0.45rem 0.85rem; border-radius: var(--r-sm);
}
.section-nav a:hover { color: var(--dark); background: var(--surface-bg); }
.section-nav a.active { color: #fff; background: var(--dark); font-weight: 600; }

/* --- Cards --------------------------------------------------------------- */

.card, table, .account-tile, .report-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* The brand's graphic elements are flat blocks with a single rounded corner.
   Applied to the tiles, where it reads as identity rather than noise. */
.account-tile, .kpi, .report-card { border-radius: 0 var(--r-lg) 0 var(--r-lg); }

/* --- Tables -------------------------------------------------------------- */

/* No `overflow: hidden` here, however tempting it is for the rounded corners:
   it clips every absolutely-positioned descendant too, which silently swallows
   the info tooltips in the header row. The corners are rounded on the corner
   cells instead, which needs `border-collapse: separate` to work. */
table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 1.25rem; }
table > thead > tr:first-child > *:first-child { border-top-left-radius: var(--r-lg); }
table > thead > tr:first-child > *:last-child { border-top-right-radius: var(--r-lg); }
table > tbody > tr:last-child > *:first-child { border-bottom-left-radius: var(--r-lg); }
table > tbody > tr:last-child > *:last-child { border-bottom-right-radius: var(--r-lg); }

th {
  text-align: left; font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted);
  padding: 0.7rem 0.9rem; background: var(--surface-bg); border-bottom: 1px solid var(--border);
}
td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafbfc; }

.amount { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.amount.negative { color: var(--danger); }

table.reports td, table.reports th { padding: 0.55rem 0.9rem; }
.section-header td {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); background: var(--surface-bg);
}
.total-row td { font-weight: 700; border-top: 1px solid var(--border); }

/* --- Forms --------------------------------------------------------------- */

label { display: block; font-size: 0.82rem; font-weight: 500; color: var(--dark-light); margin-bottom: 0.9rem; }

/* Every text-ish input, so a new input type never silently falls back to
   browser defaults the way email/password did. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea {
  display: block; width: 100%; margin-top: 0.3rem;
  padding: 0.5rem 0.7rem;
  font-family: inherit; font-size: 0.88rem; color: var(--dark);
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-sm);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
/* The min-width is for dropdowns, which are unusable when squeezed. Applying it
   to a tick box blows 16px out to 150 and takes a whole column with it —
   min-width wins over width no matter which is declared last. */
td select, td input:not([type="checkbox"]):not([type="radio"]) { margin-top: 0; min-width: 150px; }
td input[type="checkbox"], td input[type="radio"] { margin-top: 0; }
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); }

fieldset { border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem; margin: 0 0 1.25rem; }
legend { font-size: 0.8rem; font-weight: 600; color: var(--dark-light); padding: 0 0.4rem; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; align-items: end; }
.grid > label { margin-bottom: 0; }
.grid > button { justify-self: start; }

/* --- Buttons ------------------------------------------------------------- */

button, [role="button"] {
  display: inline-block; font-family: inherit; font-size: 0.85rem; font-weight: 600;
  padding: 0.5rem 1rem; border-radius: var(--r-sm); border: 1px solid transparent;
  background: var(--primary); color: #fff; cursor: pointer; white-space: nowrap;
}
button:hover, [role="button"]:hover { background: var(--primary-hover); color: #fff; }

button.secondary, [role="button"].secondary,
button.outline, [role="button"].outline,
button.contrast, [role="button"].contrast {
  background: var(--card-bg); color: var(--dark-light); border-color: var(--border);
}
button.secondary:hover, [role="button"].secondary:hover,
button.outline:hover, [role="button"].outline:hover,
button.contrast:hover, [role="button"].contrast:hover {
  background: var(--surface-bg); color: var(--dark); border-color: #cbd5e1;
}

/* --- Badges -------------------------------------------------------------- */

.badge {
  display: inline-block; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem; border-radius: 999px;
}
.badge-success { color: var(--success); background: var(--success-bg); }
.badge-warning { color: var(--warning); background: var(--warning-bg); }
.badge-muted   { color: var(--muted);   background: var(--surface-bg); }

.callout {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.9rem; border-radius: var(--r-md); font-size: 0.85rem; font-weight: 500;
}
.callout-success { color: #047857; background: var(--success-bg); }
.callout-danger  { color: #b91c1c; background: var(--danger-bg); }
/* Informational, not an error: something to look at, not something that broke. */
.callout-warning { color: #7a5b12; background: #fdf6e3; }

/* --- Tabs (in-page, underlined) ------------------------------------------ */

.tabs { display: flex; align-items: center; gap: 0.25rem; margin: 0 0 1.25rem;
        border-bottom: 1px solid var(--border); }
.tabs a {
  padding: 0.6rem 0.9rem; color: var(--muted); font-size: 0.87rem; font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--dark); }
.tabs a.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

/* --- Account tiles (portal-style stat cards) ----------------------------- */

.account-tiles { display: flex; gap: 0.9rem; overflow-x: auto; padding: 0.25rem 0 0.75rem; margin-bottom: 0.5rem; }
.account-tile {
  flex: 0 0 210px; padding: 0.9rem 1rem; position: relative; color: inherit;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.account-tile:hover { box-shadow: var(--shadow-md); color: inherit; }
.account-tile.active {
  border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary);
  border-top: 3px solid var(--accent);
}
.account-tile .name {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); margin-bottom: 0.3rem;
}
.account-tile .balance { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }
.account-tile .badge-count {
  position: absolute; top: 0.75rem; right: 0.85rem;
  background: var(--primary); color: #fff; border-radius: 999px;
  min-width: 20px; height: 20px; padding: 0 0.35rem;
  display: grid; place-items: center; font-size: 0.7rem; font-weight: 700;
}

/* --- Report cards -------------------------------------------------------- */

.report-cards { display: flex; gap: 1rem; flex-wrap: wrap; }
.report-card {
  flex: 1 1 250px; padding: 1.1rem 1.2rem; color: inherit;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.report-card:hover { box-shadow: var(--shadow-md); border-color: var(--primary); color: inherit; }
.report-card strong { display: block; font-size: 0.98rem; font-weight: 600; }
.report-card p { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.85rem; }

/* --- Misc ---------------------------------------------------------------- */

.form-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: 1.25rem 1.35rem; max-width: 620px; margin-bottom: 1.25rem;
}
.form-card.wide { max-width: 100%; }
.form-card > *:last-child { margin-bottom: 0; }

/* Page header: title on the left, primary action on the right. */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.page-header h1 { margin: 0; }
.page-header-actions { display: flex; align-items: center; gap: 0.5rem; }

/* Small "i" that reveals an explanation on hover or keyboard focus. */
.info-hint { position: relative; display: inline-flex; vertical-align: middle; }
.info-hint > .info-icon {
  /* Explicit padding and box-sizing: the global button rule doesn't reach this
     any more, but a 16px circle is one stray `padding` away from a pill. */
  box-sizing: border-box; padding: 0; flex: none;
  width: 16px; height: 16px; border-radius: 999px;
  border: 1.5px solid var(--border); background: transparent; color: var(--muted);
  display: grid; place-items: center;
  font-size: 0.6rem; font-weight: 700; font-style: normal; line-height: 1;
  font-family: var(--font-body); cursor: help;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.info-hint:hover > .info-icon,
.info-hint > .info-icon:focus-visible {
  background: var(--primary); border-color: var(--primary); color: #fff;
}

/* The bubble sits above the icon and centred on it. `translateX(-50%)` off the
   icon's own centre keeps it centred whatever the icon's position in the row,
   and `max-width` with `width: max-content` lets a short hint stay short
   instead of padding out to a fixed box. */
.info-hint > .info-bubble {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(2px);
  z-index: 40;
  width: max-content; max-width: 230px;
  padding: 0.5rem 0.7rem;
  background: #10192e; color: #eef2f9; border-radius: 8px;
  box-shadow: 0 8px 20px -6px rgba(16, 25, 46, 0.45);
  font-size: 0.75rem; font-weight: 400; line-height: 1.4;
  font-style: normal; text-align: left; text-transform: none; letter-spacing: 0;
  white-space: normal;
  opacity: 0; visibility: hidden;
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
}
.info-hint:hover > .info-bubble,
.info-hint > .info-icon:focus-visible + .info-bubble {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

/* Near the top of a page there's no room above, so those flip below. */
.info-hint.below > .info-bubble {
  bottom: auto; top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-2px);
}
.info-hint.below:hover > .info-bubble,
.info-hint.below > .info-icon:focus-visible + .info-bubble {
  transform: translateX(-50%) translateY(0);
}

/* In the last columns of a table a centred bubble runs off the right edge. */
.info-hint.left > .info-bubble { left: auto; right: 0; transform: translateY(2px); }
.info-hint.left:hover > .info-bubble,
.info-hint.left > .info-icon:focus-visible + .info-bubble { transform: translateY(0); }

.page-actions { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.muted-note { color: var(--muted); font-size: 0.87rem; }
.table-scroll { overflow-x: auto; margin-bottom: 1.25rem; }
.spacer { margin-left: auto; }

/* --- Bill/invoice matching ------------------------------------------------ */

.match-hint {
  margin-top: 0.5rem; padding: 0.5rem 0.6rem;
  background: var(--primary-soft); border-radius: var(--r-sm);
  display: grid; gap: 0.35rem; justify-items: start;
}
.match-hint strong { font-size: 0.78rem; color: var(--primary); }
.match-hint small { font-size: 0.72rem; }

/* A confident suggestion gets a left edge; a weak one stays a plain list, so
   the difference between "this is it" and "one of these might be" is visible
   before reading a word. */
.match-strong { border-left: 3px solid var(--primary); }

/* No small-caps here: the reasons quote the vendor's own name, and small-caps
   leaves "DTE Energy" looking mis-typed next to the rest. */
.match-why { color: var(--muted); font-size: 0.7rem; line-height: 1.35; }
.match-others { width: 100%; }
.match-others > summary {
  cursor: pointer; font-size: 0.72rem; color: var(--primary); font-weight: 600;
  padding: 0.15rem 0;
}
.match-others > summary::-webkit-details-marker { display: none; }
.match-others > summary::before { content: "▸ "; }
.match-others[open] > summary::before { content: "▾ "; }
.match-others form { margin: 0.3rem 0 0; display: grid; gap: 0.1rem; justify-items: start; }

.pay-menu > summary { cursor: pointer; display: inline-block; }
.pay-menu > summary::-webkit-details-marker { display: none; }
.pay-menu .form-card { margin-top: 0.5rem; max-width: 340px; }

/* --- 1099 vendor totals --------------------------------------------------- */

.vendor-block {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: 1rem 1.15rem; margin-bottom: 1.25rem;
}
.vendor-block table { border: none; box-shadow: none; border-radius: 0; margin-bottom: 0.75rem; }
.vendor-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem;
}
.vendor-total { text-align: right; }
.vendor-total .amount { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }
.vendor-total small { display: block; }
/* An excluded payment stays visible but reads as struck off the total. */
.line-excluded { opacity: 0.5; }
.line-excluded td:not(:first-child) { text-decoration: line-through; }

/* --- Project investment KPIs ---------------------------------------------- */

.kpi-row { display: flex; gap: 0.9rem; flex-wrap: wrap; margin: 1.25rem 0; }
.kpi {
  flex: 1 1 190px; background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 0.9rem 1rem;
}
.kpi-highlight {
  border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary);
  border-top: 3px solid var(--accent);
}
.kpi-label {
  display: block; font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted); margin-bottom: 0.3rem;
}
.kpi-value {
  display: block; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.kpi-value.negative { color: var(--danger); }
.kpi small { display: block; margin-top: 0.25rem; line-height: 1.3; }

/* --- Cash timeline -------------------------------------------------------- */

.timeline-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: 1rem 1.25rem 0.5rem; margin-bottom: 1.25rem;
}
.timeline-legend {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  font-size: 0.8rem; color: var(--muted); margin-bottom: 0.5rem;
}
.timeline-legend strong { color: var(--dark); margin-left: 0.35rem; }
.timeline-legend strong.negative { color: var(--danger); }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 0.35rem; }
.swatch-in { background: var(--success); }
.swatch-out { background: var(--danger); }

.timeline { position: relative; padding: 0.5rem 0; }

/* Year band on top, months under it, gridlines running down behind the bars. */
.tl-years, .tl-months { position: relative; height: 18px; }
.tl-year, .tl-month {
  position: absolute; top: 0; text-align: center; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
}
.tl-year {
  font-size: 0.7rem; font-weight: 700; color: var(--dark-light);
  border-bottom: 1px solid var(--border);
}
.tl-month {
  font-size: 0.65rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted);
  border-left: 1px solid var(--border);
  padding-left: 3px; text-align: left;
}
.tl-grid { position: absolute; top: 36px; bottom: 0; left: 0; right: 0; pointer-events: none; }
.tl-gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); opacity: 0.5; }
/* Two lanes mirrored around a shared date axis: in on top, out below. */
.timeline-lane { position: relative; height: 92px; }
.timeline-lane-in { display: flex; align-items: flex-end; }
.timeline-lane-out { display: flex; align-items: flex-start; }

.timeline-axis { position: relative; height: 1px; background: var(--border); margin: 0.15rem 0; }
.tl-tick {
  position: absolute; top: -3px; width: 1px; height: 7px;
  background: var(--border); transform: translateX(-50%);
}
.tl-today {
  position: absolute; top: -46px; width: 2px; height: 92px;
  background: var(--primary); opacity: 0.45; transform: translateX(-50%);
}

.tl-item {
  position: absolute; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; height: 100%;
  min-width: 60px;
}
.timeline-lane-in .tl-item { justify-content: flex-end; }
.tl-bar { width: 22px; border-radius: 3px; min-height: 6px; }
.tl-bar-in { background: var(--success); }
.tl-bar-out { background: var(--danger); }
/* Overdue reads as unsettled rather than done. */
.tl-late {
  background-image: repeating-linear-gradient(45deg,
    rgba(255,255,255,.55) 0 3px, transparent 3px 6px);
}
.tl-amount { font-size: 0.68rem; font-weight: 600; white-space: nowrap; padding: 2px 0; }
.tl-date { font-size: 0.62rem; color: var(--muted); white-space: nowrap; }
.timeline-range { margin: 0.25rem 0 0.5rem; }

/* --- Filter bar + repeat block -------------------------------------------- */

.filter-bar {
  display: flex; align-items: end; gap: 0.75rem; flex-wrap: wrap;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 0 var(--r-lg) 0 var(--r-lg); box-shadow: var(--shadow-sm);
  padding: 0.85rem 1rem; margin-bottom: 1rem;
}
.filter-bar label { margin-bottom: 0; }
.filter-bar input, .filter-bar select { min-width: 150px; }

.repeat-block {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 0.6rem 0.85rem; margin-bottom: 1rem;
}
.repeat-block > summary {
  cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--primary);
}
.repeat-block[open] > summary { margin-bottom: 0.6rem; }

/* Bulk selection toolbar — appears only once rows are ticked. */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0.75rem 0;
  padding: 0.65rem 0.9rem;
  background: var(--dark);
  color: #fff;
  border-radius: 8px;
}
.bulk-bar[hidden] { display: none; }
.bulk-bar strong { color: var(--accent); }
.bulk-bar small { color: #c6d0e4; flex-basis: 100%; }
.bulk-bar button { margin: 0; }
.bulk-bar button.secondary { background: transparent; border-color: #7c8db0; color: #fff; }

/* Export links sit under the report's own filter form. */
.export-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0.5rem 0 1rem;
}
.export-bar a[role="button"] { padding: 0.3rem 0.75rem; font-size: 0.85rem; margin: 0; }
.export-bar small { flex-basis: 100%; }

/* The year being acted on, inside a long depreciation schedule. */
.row-highlight { background: #eef2fb; }
.row-highlight td { font-weight: 600; }

/* Per-row buttons: side by side, since each is its own form. */
.row-actions { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.row-actions form { margin: 0; }
.row-actions a[role="button"], .row-actions button { margin: 0; font-size: 0.85rem; padding: 0.3rem 0.7rem; }

/* A register row carries ten columns. `width: 1%` on the ones holding a single
   control collapses them to their content instead of taking an equal share, so
   the table fits the viewport rather than scrolling the whole page sideways. */
.table-compact th, .table-compact td { padding: 0.6rem 0.55rem; }
.table-compact .shrink { width: 1%; white-space: nowrap; }
.table-compact select, .table-compact input[type="text"] { min-width: 0; }

/* --- P&L broken out by tag ------------------------------------------------ */

/* Wide by nature — one column per property. The account name stays pinned so
   you can still tell which row you're reading after scrolling right.
   `.table-scroll` clips vertically as well as horizontally, which is fine
   here: this report carries no tooltips or dropdowns to swallow. */
.grid-report { min-width: 100%; width: auto; }
.grid-report th, .grid-report td { white-space: nowrap; }

.grid-report .sticky-col {
  position: sticky; left: 0; z-index: 1;
  background: var(--card-bg);
  border-right: 1px solid var(--border);
  white-space: normal; min-width: 220px;
}
.grid-report thead .sticky-col,
.grid-report .section-header .sticky-col { background: var(--surface-bg); }
.grid-report .total-row .sticky-col { background: var(--card-bg); }
.grid-report tbody tr:hover .sticky-col { background: #fafbfc; }

/* The untagged column is the one to notice, not the one to hide. */
.grid-report .col-unassigned { background: #fbfaf5; }
.grid-report .col-total { border-left: 2px solid var(--border); font-weight: 600; }
.grid-report .net-row td { font-size: 0.95rem; border-top: 2px solid var(--border); }

/* A split shows as one register row with the breakdown folded underneath, so
   the register keeps matching the bank statement line for line. */
.split-detail > summary { cursor: pointer; font-size: 0.82rem; }
.split-detail > summary::-webkit-details-marker { display: none; }
.split-detail > summary::after { content: " ▸"; color: var(--muted); }
.split-detail[open] > summary::after { content: " ▾"; }
.split-lines { margin: 0.4rem 0 0; box-shadow: none; border: 1px solid var(--border); }
.split-lines td { padding: 0.3rem 0.5rem; font-size: 0.8rem; border-bottom: 1px solid var(--border); }
.split-lines tr:last-child td { border-bottom: none; }

/* What the balance would be once the pending queue is cleared. */
.account-tile .tile-pending { font-size: 0.68rem; color: var(--muted); margin-top: 0.15rem; }
.account-tile.active .tile-pending { color: var(--primary); }

/* --- Detalle desplegable en el reporte por proyecto ----------------------- */

/* El importe clickeable, como en QuickBooks: se ve que es un link y al abrirlo
   queda marcado. Hereda la tipografía tabular para que las columnas de números
   sigan alineadas — un botón con la fuente del sistema las desalinearía. */
.amount-link {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; font-variant-numeric: tabular-nums;
  color: var(--primary); cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 3px;
}
.amount-link:hover { background: none; color: var(--primary-hover); text-decoration-style: solid; }
.drill.open .amount-link { font-weight: 600; text-decoration-style: solid; }
.drill-detail > td { padding: 0 0 0.5rem 2.5rem; background: #fbfcfd; }
.drill-lines { box-shadow: none; border: 1px solid var(--border); margin: 0; }
.drill-lines td { padding: 0.3rem 0.6rem; font-size: 0.78rem; border-bottom: 1px solid var(--border); }
.drill-lines tr:last-child td { border-bottom: none; }

/* Cuenta madre de un grupo de sub-cuentas: se lee como encabezado del bloque. */
.account-parent > td { font-weight: 600; }
.account-parent + tr td:first-child { color: var(--dark-light); }

/* Importe clickeable dentro de la grilla por propiedad. Se subraya punteado
   como los del balance y el P&L, para que la señal de "esto se abre" sea la
   misma en todos los reportes. */
.cell-link {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.cell-link:hover { text-decoration: underline solid; }

/* Atajos de período en los reportes. Se leen como una fila de pestañas: el
   activo con fondo, los otros planos, para que el rango que estás mirando se
   reconozca sin buscar en los campos de fecha. */
.periodos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.3rem 0 0.9rem; }
.periodos .periodo {
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--muted-border, #d0d0d0);
  border-radius: 999px;
  font-size: 0.85rem;
  text-decoration: none;
  color: inherit;
}
.periodos .periodo:hover { border-color: currentColor; }
.periodos .periodo.activo { background: var(--accent, #2b6cb0); color: #fff; border-color: transparent; }

/* Barras del timeline que se pueden abrir. El cursor y el realce al pasar
   avisan que hay algo detrás; sin eso nadie descubre que se clickean. */
.tl-abrible { cursor: pointer; }
.tl-abrible:hover .tl-bar,
.tl-abrible.abierta .tl-bar { filter: brightness(1.15); outline: 2px solid currentColor; outline-offset: 1px; }
.tl-detalle { margin: 0.6rem 0 0; padding: 0.6rem 0.8rem; border-top: 1px solid var(--muted-border, #e2e2e2); }

/* Botón de entrar con Google. Ocupa el ancho como el de enviar el formulario,
   para que los dos caminos se vean igual de válidos. */
.login-google {
  display: block;
  padding: 0.7rem 1rem;
  border: 1px solid var(--muted-border, #d0d0d0);
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  font-weight: 500;
}
.login-google:hover { border-color: currentColor; }
.login-separador {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 1rem 0; color: var(--muted, #888); font-size: 0.85rem;
}
.login-separador::before, .login-separador::after {
  content: ""; flex: 1; height: 1px; background: var(--muted-border, #e2e2e2);
}

/* Los permisos por empresa se editan en la misma fila que el resto de la
   persona: separarlos en otra pantalla haría que nadie los mire. */
.acceso-empresas { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; }
.acceso-empresas label { font-size: 0.8rem; font-weight: 400; display: flex;
  align-items: center; gap: 0.35rem; margin: 0; }
.acceso-empresas input[type="checkbox"] { margin: 0; }
.acceso-empresas button { margin-top: 0.3rem; padding: 0.15rem 0.5rem; font-size: 0.75rem; }
.acceso-empresas legend { font-size: 0.8rem; color: var(--muted); }