/* ---------------------------------------------------------------------------
   The A2Y dashboard stylesheet.

   The appearance comes from the approved design (A2Y_Redesign_Final.html): a
   navy sidebar, a light workspace, and white cards on a pale blue ground. The
   application behind it is unchanged — every id, handler and figure is the
   one that was already there.

   Two things are deliberately kept as they were:

     * the sign-in screen, approved separately, is reproduced below exactly as
       it was written; it carries its own tokens so the dashboard palette
       cannot reach into it.
     * the financial tables still print on white in a serif face, because a
       printed statement is a document, not a screen.

   Admin-only chrome is hidden by a single [data-role] rule rather than by
   deleting it, so one stylesheet serves both views.
   --------------------------------------------------------------------------- */

/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS — taken from the approved design.
   ═══════════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* The design's own palette, sampled from it rather than approximated. */
  --navy:#001e3f; --navy-deep:#001a36; --navy-active:#113c69;
  --ink:#00164c; --muted:#456493;
  --blue:#0879fa; --blue-strong:#1260be; --pale-blue:#eaf4ff;
  --gold:#f9bc29; --gold-light:#ffcf62; --gold-deep:#b57f07;
  --good:#00a754; --bad:#e53942;
  --surface:#fff; --bg:#f2f8ff; --line:#e3eefb;
  --shadow:0 3px 18px rgba(18,72,133,.045);
  --shadow-md:0 9px 25px rgba(22,60,114,.09);
  --shadow-lg:0 25px 80px rgba(0,27,59,.27);
  --radius:11px; --radius-sm:7px; --radius-lg:16px;
  --sidebar:232px;

  /* Report table tints. Four steps up from the page, light enough to stay
     modern and far enough apart to be scanned: the column heads, a section
     band, a subtotal, and the two figures that matter most. Every one keeps
     navy text — the darkest, --tint-strong, is 8.6:1 against --ink. */
  --tint-head:#e7f1fd;      /* column header row */
  --tint-head-line:#c8dcf3; /* and the rule under it */
  --tint-section:#dfeafa;   /* Revenue, Cost of Goods Sold, Operating Expenses */
  --tint-total:#eef5fd;     /* Total Income, Total Expense */
  --tint-strong:#cfe1f8;    /* Gross Profit, Net Income */
  --tint-gold:#f6c84a;      /* the gold edge that marks those two */

  /* Names the application already used, pointed at the new palette so no
     rule had to be hunted down and renamed. */
  --tx:var(--ink); --tx2:#193974; --tx3:var(--muted); --tx4:#6280a4;
  --s2:#f7fbff; --s3:var(--pale-blue);
  --br:var(--line); --br2:#d7e5fb;
  --green:var(--good); --gbg:#e0f8ed; --gbdr:#b6ecd2;
  --red:var(--bad); --rbg:#fff2f3; --rbdr:#ffd4d9;
  --orange:#b0710a; --obg:#fff8e9;
  --b50:#eef6ff; --b100:#c8dffc; --b200:#a6cbf7;
  --b500:var(--blue); --b600:var(--blue-strong); --b700:#0f4f9c; --b800:var(--navy);
  --g300:var(--gold-light); --g400:var(--gold); --g500:#e0a90f; --g600:var(--gold-deep);

  /* Typefaces. The statement keeps its serif; everything else is the
     design's IBM Plex Sans. */
  --sans:'IBM Plex Sans','DM Sans',system-ui,Arial,sans-serif;
  --mono:'IBM Plex Sans','DM Mono',ui-monospace,monospace;
  /* Print only. On screen the statement is set in the same sans as the
     rest of the dashboard, which is what the approved design does. */
  --acct:'Libre Baskerville',Georgia,serif;
  --num:'Libre Baskerville',Georgia,serif;
}

html{scroll-behavior:smooth}
html,body{font-family:var(--sans);background:var(--bg);color:var(--ink);min-height:100vh;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
button,select{cursor:pointer}
button{border:0;color:inherit;font-family:var(--sans);transition:background .16s,box-shadow .16s,transform .16s}
button:disabled{cursor:not-allowed;opacity:.48}
button:active:not(:disabled){transform:translateY(1px)}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
a{color:var(--blue);text-decoration:none}
h1,h2,h3,h4,p{margin:0}
[hidden]{display:none!important}

/* One focus ring for the whole application, gold so it reads on navy and on
   white alike. */
:focus-visible{outline:3px solid #d59a06;outline-offset:3px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:1px}

.ic{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:middle}
.ic-sm{width:15px;height:15px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Both roles share one page; this is the only thing that separates them in
   the markup. The server separates them in earnest. */
body[data-role="client"] .admin-only{display:none!important}
/* ─────────── LOGIN ───────────────────────────────────────────────────────
   A two-column sign-in: the A2Y brand on the left, the card on the right,
   over a bright room drawn entirely in CSS and one inline SVG. No photo, so
   nothing has to be admitted by the content policy, nothing extra downloads
   on a phone, and the type stays crisp at any density.

   The branding is A2Y and only A2Y. One account is meant to reach more than
   one application later, so this screen must not read as the door to any
   single one of them.
─────────────────────────────────────────────────────────────────────────── */
#login-screen{
  /* Sampled from front.png rather than guessed. The ground is a very light,
     almost flat blue-white; the gold is brighter than the dashboard's, and
     the secondary text is a good deal darker than a mid grey.

     Where that gold would be read as text it is darkened just far enough to
     pass and no further, so the mark still reads as the same gold. */
  --lg-navy:#071934;          /* headline, wordmark A, benefit titles */
  --lg-muted:#3a5578;         /* subtitle, benefit copy, sign-off line */
  --lg-gold:#dfa00b;          /* the brand gold, on graphic surfaces */
  --lg-gold-lg:#b57f07;       /* the same gold as large text  (3.5:1) */
  --lg-gold-sm:#9c6c06;       /* and as small text            (4.6:1) */
  --lg-field:#f4f9fe;         /* input fill */
  --lg-field-edge:#e4ecf7;    /* input edge, barely there in the design */

  position:fixed; inset:0; z-index:999; overflow:auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center; gap:40px; padding:40px clamp(24px,5vw,88px);
  background:linear-gradient(160deg,#f8fbfd 0%,#f4f8fc 42%,#eef4fa 100%);
  color:var(--lg-navy);
}

/* ── The room ───────────────────────────────────────────────────────────── */
.lg-scene{position:absolute; inset:0; overflow:hidden; pointer-events:none}

/* Light falling through a window, and its reflection on the floor. */
.lg-shaft{
  position:absolute; top:-25%; height:150%;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.34));
  transform:skewX(-13deg); filter:blur(2px);
}
.lg-shaft-1{left:40%; width:7%; opacity:.95}
.lg-shaft-2{left:52%; width:13%; opacity:.8}
.lg-shaft-3{left:70%; width:5%; opacity:.7}
.lg-shaft-4{left:80%; width:11%; opacity:.55}
/* A wash of daylight from the window side. */
.lg-glow{
  position:absolute; top:-28%; right:-14%; width:74%; height:132%;
  background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0));
}
/* The plant in the corner, kept faint so it never competes with the card. */
.lg-plant{
  position:absolute; right:-2%; bottom:-6%; width:min(21vw,290px); height:auto;
  color:#6f9c7e; opacity:.38;
}
.lg-plant .lg-leaves{opacity:.75}
.lg-plant .lg-leaf-blades{opacity:.9}
.lg-plant .lg-pot{fill:#d7dfec; opacity:.7}
/* Below the two-column breakpoint the plant would sit behind the card, so it
   steps aside rather than tinting the form. */
@media (max-width:1023px){ .lg-plant{width:min(34vw,220px); right:-4%; opacity:.34} }

/* ── LEFT: the brand ────────────────────────────────────────────────────── */
.lg-brand{position:relative; display:flex; justify-content:flex-end; min-width:0}
.lg-brand-inner{position:relative; width:100%; max-width:480px}

/* The oversized mark behind the sign-off, as in the design. */
.lg-watermark{
  position:absolute; left:-.06em; bottom:-2.2rem; z-index:0;
  font-family:var(--sans); font-weight:800; font-size:clamp(90px,11vw,168px);
  letter-spacing:-.04em; line-height:.8; color:rgba(7,25,52,.055);
  user-select:none; white-space:nowrap;
}
.lg-brand-inner > *{position:relative; z-index:1}

.lg-wordmark{
  font-family:var(--sans); font-weight:800; letter-spacing:-.045em;
  font-size:clamp(64px,7.6vw,124px); line-height:.92; margin:0;
}
.lg-wm-a{color:var(--lg-navy)}
.lg-wm-2y{color:var(--lg-gold)}
.lg-rule{
  display:block; width:104px; height:5px; border-radius:3px;
  background:var(--lg-gold); margin:18px 0 26px;
}

.lg-headline{
  font-family:var(--sans); font-weight:800; color:var(--lg-navy);
  font-size:clamp(30px,3.5vw,50px); line-height:1.1; letter-spacing:-.025em;
  margin:0 0 18px; text-wrap:balance;
}
.lg-sub{
  font-family:var(--sans); font-weight:400; color:var(--lg-muted);
  font-size:clamp(17px,1.6vw,25px); line-height:1.4; margin:0 0 34px;
}

.lg-benefits{list-style:none; margin:0 0 44px; padding:0; display:flex; flex-direction:column; gap:26px}
.lg-benefits li{display:flex; align-items:flex-start; gap:20px}
.lg-bicon{width:33px; height:33px; flex-shrink:0; color:var(--lg-navy); margin-top:1px}
.lg-benefits strong{
  display:block; font-size:1.16rem; font-weight:700; color:var(--lg-navy); line-height:1.3;
  margin-bottom:2px;
}
.lg-benefits span{display:block; font-size:1.08rem; color:var(--lg-muted); line-height:1.45}

.lg-signoff{display:flex; flex-direction:column; gap:3px}
.lg-signoff-name{font-size:1.4rem; font-weight:800; color:var(--lg-gold-lg); letter-spacing:-.01em}
.lg-signoff-line{font-size:1.08rem; color:var(--lg-muted)}

/* ── RIGHT: the card ────────────────────────────────────────────────────── */
.lg-panel{position:relative; display:flex; justify-content:flex-start; min-width:0}
.login-card{
  background:#fff; width:100%; max-width:512px; position:relative;
  border-radius:22px; padding:44px clamp(26px,3vw,46px) 30px;
  box-shadow:0 34px 70px -22px rgba(13,33,69,.28), 0 4px 16px rgba(13,33,69,.06);
  animation:slideUp .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes slideUp{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:translateY(0)}}

.lg-welcome{
  font-family:var(--sans); font-size:clamp(28px,2.5vw,36px); font-weight:800;
  color:var(--lg-navy); text-align:center; letter-spacing:-.025em; margin:0 0 8px;
}
.lg-welcome-sub{
  font-size:1.06rem; color:var(--lg-muted); text-align:center; margin:0 0 30px;
}

.lc-body{padding:0}
/* The design shows placeholders rather than labels, but a field a screen
   reader cannot name is a field nobody can name. The labels are here and
   readable; they are simply visually compact. */
.lc-body label{
  display:block; font-size:.8rem; font-weight:700; color:var(--lg-muted);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px;
  font-family:var(--sans);
}
.lc-field{margin-bottom:18px}
.lc-field:last-of-type{margin-bottom:24px}

.lc-input-wrap{position:relative; display:block}
.lc-field-icon{
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  width:21px; height:21px; color:var(--lg-navy); opacity:.78; pointer-events:none;
}
.lc-input{
  width:100%; padding:17px 18px 17px 52px; border:1.5px solid var(--lg-field-edge);
  border-radius:12px; background:var(--lg-field); color:var(--lg-navy);
  font-family:var(--sans); font-size:1.02rem; letter-spacing:0; outline:none;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.lc-input.has-toggle{padding-right:56px}
.lc-input::placeholder{color:#6b7480}
.lc-input:hover{background:#eaf2fb}
.lc-input:focus{background:#fff; border-color:var(--lg-gold); box-shadow:0 0 0 3px rgba(223,160,11,.2)}

.eye-btn{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--lg-muted); padding:0;
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:9px; transition:color .15s, background .15s;
}
.eye-btn .ic{width:21px; height:21px}
.eye-btn:hover{color:var(--lg-navy); background:rgba(7,25,52,.05)}
.eye-btn[aria-pressed="true"]{color:var(--lg-gold-sm)}

.btn-enter{
  width:100%; padding:18px; border:none; border-radius:12px;
  background:linear-gradient(90deg,#db9a08 0%,#fcc539 100%);
  color:#0a1020; font-family:var(--sans); font-size:1rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  box-shadow:0 12px 24px -10px rgba(219,154,8,.6);
  transition:filter .15s, transform .1s, box-shadow .15s;
}
.btn-enter:hover:not(:disabled){filter:brightness(1.05); box-shadow:0 16px 28px -10px rgba(219,154,8,.68)}
.btn-enter:active:not(:disabled){transform:translateY(1px)}

.login-err{
  display:none; margin-top:16px; padding:12px 14px; background:var(--rbg);
  border:1px solid #f2b8b8; border-left:3px solid #b91c1c; border-radius:10px;
  font-size:.9rem; color:#991b1b; align-items:center; gap:9px;
  font-family:var(--sans); line-height:1.45;
}
.login-err.show{display:flex; animation:shake .25s ease}
@keyframes shake{0%,100%{transform:translateX(0)} 33%{transform:translateX(-6px)} 66%{transform:translateX(6px)}}
.login-err .ic{width:16px; height:16px; flex-shrink:0}

.lc-help{
  margin:18px 0 0; font-size:.94rem; color:var(--lg-muted);
  font-family:var(--sans); text-align:center; line-height:1.5;
}

.lc-footer{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  margin-top:28px; padding-top:20px; border-top:1px solid #e8eef7;
}
.lc-footer span{font-size:.92rem; color:#4a6f9c; font-family:var(--sans); letter-spacing:0}
.lc-footer-right{text-align:right}
.lc-footer .gold{color:var(--lg-gold-sm); font-weight:700}


/* The sign-in screen keeps the typeface it was approved with; the dashboard's
   IBM Plex Sans stops at its edge. */
#login-screen{--sans:'DM Sans','IBM Plex Sans',system-ui,sans-serif}

/* Sign-in on a phone: one column, the brand first and the card under it. */
@media (max-width: 768px){
  #login-screen{
    grid-template-columns:1fr; align-items:start; gap:30px;
    padding:calc(28px + env(safe-area-inset-top,0px)) 18px calc(36px + env(safe-area-inset-bottom,0px));
  }
  .lg-brand, .lg-panel { justify-content:center }
  .lg-brand-inner, .login-card { max-width:520px; margin:0 auto }
  .login-card { padding:34px 22px 26px; border-radius:18px }
  .lc-input { font-size:16px; }   /* 16px or iOS zooms on focus */

  .lg-wordmark { font-size:clamp(52px,15vw,78px) }
  .lg-rule { width:78px; height:4px; margin:12px 0 18px }
  .lg-headline { font-size:clamp(26px,7vw,34px); margin-bottom:12px }
  .lg-sub { font-size:clamp(16px,4.4vw,19px); margin-bottom:22px }
  .lg-benefits { gap:16px; margin-bottom:24px }
  .lg-benefits li { gap:14px }
  .lg-bicon { width:26px; height:26px }
  .lg-benefits strong { font-size:1.02rem }
  .lg-benefits span { font-size:.96rem }
  .lg-signoff-name { font-size:1.16rem }
  .lg-signoff-line { font-size:.98rem }
  .lg-watermark { font-size:clamp(76px,22vw,120px); bottom:-1.4rem }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE SHELL — navy sidebar, light workspace.
   ═══════════════════════════════════════════════════════════════════════════ */
#app{display:none}
.skip-link{position:fixed;z-index:200;top:10px;left:calc(var(--sidebar) + 13px);transform:translateY(-160%);padding:12px 20px;background:#fff;border-radius:6px;box-shadow:var(--shadow-md)}
.skip-link:focus{transform:none}

.sidebar{
  position:fixed;inset:0 auto 0 0;width:var(--sidebar);z-index:70;
  background:linear-gradient(155deg,#002444 0%,#00203f 62%,#001b37 100%);
  color:#fff;display:flex;flex-direction:column;overflow:auto;
  scrollbar-width:thin;scrollbar-color:#264e77 transparent;
  border-right:1px solid #163b60;
}
.brand{display:block;color:#fff;padding:19px 27px 21px;background:none;text-align:left;width:100%}
.wordmark{display:block;font-size:56px;line-height:1.14;letter-spacing:-3.7px;font-weight:750}
.wordmark>span{background:linear-gradient(135deg,#ffdb87,#fdbb24);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-tag{display:block;font-size:15px;line-height:1.43;color:#e0ebff;margin-top:4px;letter-spacing:-.1px}
.sidebar nav{padding:9px 12px 0;display:flex;flex-direction:column;gap:3px}
.sidebar nav button{white-space:normal;overflow-wrap:anywhere;min-width:0}
.sidebar .nav-item .ic{flex-shrink:0}
.nav-item{
  width:100%;min-height:48px;padding:11px 15px;display:flex;align-items:center;
  gap:19px;text-align:left;font-size:14px;line-height:1.28;border-radius:8px;
  color:#ecf2ff;background:transparent;position:relative;
}
.nav-item .ic{width:24px;height:24px}
.nav-item:hover{background:#0b3459}
.nav-item.active{background:linear-gradient(90deg,#123f6c,#133963);color:#fff;font-weight:700}
.nav-item.active::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--gold)}
.nav-divider{height:1px;background:#244667;margin:16px 14px}
.sidebar-bottom{margin-top:auto;padding:23px 21px 17px}
.sidebar-copyright{font-size:12px;line-height:1.7;color:#c2d2e8;margin:0 9px}
.sidebar-copyright span{font-size:11px;color:#a2b9d1}
.sidebar-shade{display:none}

.workspace{margin-left:var(--sidebar);min-width:0;min-height:100vh;display:flex;flex-direction:column;
  background:linear-gradient(120deg,#edf6ff 0%,#f7fbff 65%,#f1f7fd 100%)}

/* ── The hero, which names the page and the company ── */
/* The hero paints above the content column: the account menu hangs out of
   its bottom edge, and a card underneath was catching the clicks. */
.hero{position:relative;z-index:5;background:linear-gradient(95deg,#eaf5ff,#f7fbff 68%,#fffbf5);padding:36px 35px 22px}
.hero-copy{position:relative;max-width:810px}
.hero-eyebrow{font-size:16px;color:var(--ink);margin:0 0 2px;line-height:1.3}
.hero h1{font-size:38px;line-height:1.12;letter-spacing:-1.25px;margin:5px 0 4px;font-weight:750;color:var(--ink)}
#hdr-subtitle{font-size:16px;color:#193a75;line-height:1.4}
.hero-controls{position:absolute;top:20px;right:29px;display:flex;gap:15px;align-items:center;z-index:4}
.hero-controls>.control-btn{min-width:184px}

/* The client picker is the page heading for an admin; for a client the same
   line is plain text, because there is nothing to pick between. */
.client-switch select{
  appearance:none;-webkit-appearance:none;border:0;
  background:transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300164c' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>") right center/22px no-repeat;
  padding:0 30px 0 0;font:inherit;font-size:38px;font-weight:750;color:var(--ink);
  cursor:pointer;line-height:1.15;letter-spacing:-1.25px;max-width:100%;
}
.client-switch select:focus-visible{outline:2px solid var(--gold);border-radius:6px}

.control-btn,.select-shell{
  height:43px;display:flex;gap:12px;align-items:center;border:1px solid #d7e5fb;
  border-radius:8px;background:#fffdfdf2;color:var(--ink);padding:0 14px;font-size:13px;
  white-space:nowrap;
}
.control-btn:hover{background:#f4f8ff}
.control-btn .ic-sm{margin-left:auto}
.control-btn>.ic,.select-shell>.ic{width:19px;height:19px}
.select-shell{position:relative;padding-right:32px;min-width:221px}
.select-shell select{border:0;outline:none!important;background:transparent;appearance:none;-webkit-appearance:none;width:100%;color:inherit;padding:9px 0;font-size:13px;min-width:0}
.select-shell>.ic-sm{position:absolute;right:12px;pointer-events:none}
.select-shell:focus-within{outline:2px solid var(--blue);outline-offset:1px}

.account-wrap{position:relative;margin-left:14px}
.account-button{display:flex;align-items:center;gap:12px;background:transparent;text-align:left;min-height:48px;padding:0 0 0 4px;min-width:184px}
.avatar{width:47px;height:47px;border-radius:50%;display:inline-grid;place-items:center;flex-shrink:0;background:#001f45;color:#fff;font-size:25px;font-weight:400}
.account-name{display:flex;flex-direction:column;line-height:1.3;min-width:90px}
.account-name strong{font-size:16px;letter-spacing:-.25px;font-weight:600}
.account-name>span{color:#34578b;font-size:14px}
.account-menu{position:absolute;right:0;top:calc(100% + 9px);width:238px;padding:9px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 38px #001c3e22;z-index:20}
.account-menu button{display:flex;gap:12px;align-items:center;width:100%;padding:12px;border-radius:7px;background:#fff;text-align:left;font-size:13px}
.account-menu button:hover{background:var(--pale-blue)}
.account-menu .ic{width:19px;height:19px}
.account-menu .danger{color:#b92e40}
.menu-caption{display:block;color:var(--muted);font-size:10px;letter-spacing:1.2px;padding:9px 11px;overflow-wrap:anywhere}
.mobile-menu{display:none!important}

.main{flex:1;padding:0 24px 12px;min-width:0;outline:none!important}
.page-enter{animation:pageEnter .27s ease-out}
@keyframes pageEnter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes barIn{from{transform:scaleY(.05);opacity:.3}to{transform:scaleY(1);opacity:1}}

.page-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 26px 16px;font-size:10px;color:#6d88a6}
.page-footer i{display:inline-block;width:5px;height:5px;margin:0 4px 2px 0;vertical-align:middle;background:#80a4ce;border-radius:50%}

/* Shown when the browser reports no connection. */
#offline-bar{position:sticky;top:0;z-index:300;background:#fff8e9;border-bottom:1px solid #f3db9e;color:#806120;font-size:12px;padding:9px 18px;text-align:center}

/* ═══════════════════════════════════════════════════════════════════════════
   PANELS AND CONTROLS
   ═══════════════════════════════════════════════════════════════════════════ */
.grid{display:grid;gap:16px;min-width:0}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-main{grid-template-columns:1.45fr 1fr}
.mt{margin-top:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0;overflow:hidden}
.card.padded{padding:18px 20px}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:13px;min-width:0}
.card-head h2{margin-top:2px}
.card-head p{font-size:13px;line-height:1.4;margin-top:4px;color:var(--muted)}
.card-head .control-btn{height:36px;min-width:90px;padding:0 11px;font-size:12px}
h2{font-size:21px;line-height:1.2;letter-spacing:-.65px}
h3{font-size:16px;line-height:1.3;letter-spacing:-.25px}
.card-title{font-size:16px;letter-spacing:-.25px;margin-bottom:12px}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.positive{color:var(--good)}
.negative{color:var(--bad)}
.small-text{font-size:12px}

.text-button{display:inline-flex;align-items:center;gap:7px;background:transparent;color:var(--blue);font-size:14px;white-space:nowrap;padding:4px 0;min-height:32px}
.text-button .ic{width:16px;height:16px}
.text-button:hover{text-decoration:underline}

.button,.mbtn,.hbtn,.cbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:43px;
  border:1px solid #d7e5fa;border-radius:8px;padding:9px 17px;background:#fff;color:var(--ink);
  font-size:13px;font-weight:600;white-space:nowrap;
}
.button .ic,.mbtn .ic,.hbtn .ic{width:18px;height:18px}
.button:hover,.mbtn:hover,.hbtn:hover,.cbtn:hover{background:#f2f7ff;border-color:#b9d3f5}
.button.primary,.mbtn.prim,.mbtn.gold,.hbtn-gold{
  background:linear-gradient(110deg,#ffbf32,#ffce66);border-color:#f9c451;
  box-shadow:0 1px 0 #fff4d4 inset;color:#052344;
}
.button.primary:hover,.mbtn.prim:hover,.mbtn.gold:hover,.hbtn-gold:hover{background:linear-gradient(110deg,#f7b323,#ffc858);box-shadow:0 4px 12px #dcab2530}
.button.navy{background:var(--navy);border-color:var(--navy);color:#fff}
.button.small,.cbtn{min-height:32px;padding:4px 16px;font-size:12px;font-weight:500}
.button.danger,.mbtn.danger-btn,.cbtn.del{color:#b92e40;background:#fff2f3;border-color:#ffd4d9}
.button.danger:hover,.mbtn.danger-btn:hover,.cbtn.del:hover{background:#ffe3e6;border-color:#ffb9c1}
.button.block,.mbtn.block{width:100%}
.cbtn.is-disabled{opacity:.5;cursor:not-allowed}
.icon-button,.mc-btn{width:36px;height:36px;display:inline-grid;place-items:center;border-radius:7px;background:transparent;flex-shrink:0;font-size:20px;color:var(--muted)}
.icon-button .ic{width:20px;height:20px}
.icon-button:hover,.mc-btn:hover{background:var(--pale-blue)}

.tile-icon{display:inline-flex;align-items:center;justify-content:center;width:65px;height:65px;flex-shrink:0;border-radius:14px;background:linear-gradient(130deg,#e9f5ff,#dfefff);color:var(--blue)}
.tile-icon .ic{width:37px;height:37px;stroke-width:1.8}
.tile-icon.green{background:linear-gradient(125deg,#eafbf2,#e1f8ee);color:#00ac61}
.tile-icon.gold{background:#fff7e5;color:#df9800}
.tile-icon.navy{background:#edf3ff;color:#2358ae}
.tile-icon.small{width:47px;height:47px;border-radius:10px}
.tile-icon.small .ic{width:28px;height:28px}

.search-shell{display:flex;align-items:center;gap:10px;padding:0 13px;border:1px solid #d8e6fa;border-radius:8px;min-height:42px;background:#fff;color:#1b4077;min-width:0}
.search-shell>.ic{width:20px;height:20px}
.search-shell input{width:100%;min-width:0;padding:9px 0;border:0;background:transparent;outline:none!important;font-size:13px;color:var(--ink)}
.search-shell input::placeholder{color:#607dad}
.search-shell:focus-within{outline:2px solid var(--blue);outline-offset:1px}

.toolbar{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin:24px 0 14px}
.toolbar>.search-shell{flex:1;min-width:240px;min-height:47px}
.toolbar>.select-shell{min-width:155px;min-height:47px}
.toolbar>.button{min-height:47px;min-width:145px;font-size:15px}

.page-heading{margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:15px}
.page-heading h2{font-size:35px;line-height:1.1;letter-spacing:-1px}
.page-heading p{font-size:15px;margin-top:8px;color:var(--muted)}
.light-surface{background:#ffffffa8;border-radius:12px;padding:8px 18px 20px}

/* ── KPI cards ── */
.kpi-card{min-height:143px;display:flex;align-items:flex-start;gap:18px;padding:23px 21px 18px;position:relative;transition:box-shadow .2s,transform .2s}
.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.kpi-text{min-width:0;width:100%}
.kpi-label{font-size:15px;letter-spacing:-.25px;line-height:1.3;color:var(--ink)}
.kpi-value{font-size:27px;line-height:1.23;font-weight:750;letter-spacing:-.85px;font-variant-numeric:tabular-nums;margin:5px 0;color:var(--ink)}
.kpi-value.green{color:var(--good)}
.kpi-value.red{color:var(--bad)}
.kpi-change,.kpi-trend{font-size:18px;line-height:1.2;font-weight:600;color:var(--good);display:flex;align-items:center;gap:4px}
.kpi-change.neutral{font-size:14px;color:var(--muted);font-weight:400}
.kpi-trend.dn{color:var(--bad)}
.kpi-trend.flat{color:var(--muted);font-weight:400}
.kpi-card small,.kpi-sub{display:block;font-size:13px;color:#3f6198;margin-top:3px}

/* ── Charts, drawn from the figures the application already holds ── */
.chart-card{min-height:272px}
.legend-inline{display:flex;gap:16px;align-items:center;font-size:12px;color:var(--muted)}
.legend-inline>span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.dot{display:inline-block;width:11px;height:11px;flex-shrink:0;border-radius:50%;background:var(--blue-strong)}
.dot.pale{background:#b7d1f3}
.chart-actions{display:flex;align-items:center;gap:18px}
.chart-actions .select-shell{min-width:107px;width:107px;height:34px;padding-left:12px}
.chart-actions .select-shell select{font-size:12px}
.chart-svg{display:block;width:100%;height:211px;overflow:visible}
.chart-svg text{font-family:var(--sans);font-size:12px;fill:#466995}
.chart-svg .gridline{stroke:#e6effa;stroke-width:1}
.chart-bar{transform-box:fill-box;transform-origin:bottom;animation:barIn .65s both}
.chart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px;text-align:center;color:var(--muted);padding:25px;background:linear-gradient(#fff,#f5f9ff);border-radius:8px}
.chart-empty .ic{width:31px;height:31px;color:#90b3df;margin-bottom:10px}
.ratio-comparison{padding:10px 11px 6px;border:1px solid #e8eff9;border-radius:9px;background:linear-gradient(130deg,#f9fcff,#f1f7ff);min-width:0}
.ratio-comparison h4{font-size:12px;margin:0 0 4px}
.mini-chart{display:block;width:100%;height:128px}
.mini-chart text{fill:#59769f;font:10px var(--sans)}

/* ── Quick actions and highlights ── */
.quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.quick-button{display:flex;align-items:center;gap:11px;padding:15px 13px;background:linear-gradient(120deg,#fff,#fbfdff);border:1px solid #e1ecfa;border-radius:10px;text-align:left;min-height:79px;box-shadow:0 3px 7px #123b6105}
.quick-button:hover{background:#f1f7ff;box-shadow:0 4px 14px #143e7410}
.quick-button>.ic-sm{margin-left:auto}
.quick-button strong{display:block;font-size:13px;line-height:1.2;letter-spacing:-.2px}
.quick-button small{display:block;color:#5475a2;font-size:10px;line-height:1.4;margin-top:5px}
.quick-button .tile-icon{width:38px;height:42px;border-radius:9px}
.quick-button .tile-icon .ic{width:26px;height:26px}
.callout{display:flex;align-items:center;gap:15px;border:1px solid #f3db9e;border-radius:9px;background:linear-gradient(100deg,#fff8e9,#fffbf2);min-height:62px;padding:11px 17px;font-size:12px;color:#806120;line-height:1.6}
.callout>.tile-icon{width:44px;height:41px;background:#fff;flex-shrink:0;border-radius:8px;color:#df9c00}
.callout strong{display:block;font-size:14px;color:var(--ink)}
.callout p{font-size:12px;line-height:1.45;color:#153567;margin-top:2px}
.callout .button{margin-left:auto;min-height:39px;font-size:12px}
.small-warning{background:#fff9eb;border:1px solid #f6dfac;border-radius:8px;padding:12px 15px;font-size:12px;color:#806120;line-height:1.6}

/* ═══════════════════════════════════════════════════════════════════════════
   REPORTS — the sub-tab row, the period toolbar and the statement itself.
   ═══════════════════════════════════════════════════════════════════════════ */
.subnav{display:flex;align-items:center;gap:19px;padding:0 13px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);margin-bottom:13px;min-height:54px}
.report-tabs{display:flex;align-self:stretch;gap:7px}
.report-tabs button{background:transparent;padding:13px 17px;border-bottom:3px solid transparent;color:#204682;font-size:15px;white-space:nowrap;min-height:53px}
.report-tabs button:hover{background:#f5f9ff}
.report-tabs button.active{font-weight:700;border-bottom-color:#ecae08;color:var(--ink)}
.subnav>.search-shell{margin-left:auto;max-width:310px;min-width:190px;height:38px}
.subnav>.text-button{margin-left:auto}

/* The period controls. Same ids, same handlers; they simply live in a card
   under the sub-tabs now instead of in a bar under the header. */
.filter-bar,.compare-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:11px 15px;margin-bottom:12px}
.compare-bar{padding:9px 15px;font-size:12px;color:var(--muted)}
.fb-group{display:flex;align-items:center;gap:9px;min-width:0}
.fb-label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.09em;white-space:nowrap}
.fb-pair{display:flex;gap:6px}
.fb-select{height:38px;border:1px solid #d8e6fa;border-radius:8px;background:#fff;color:var(--ink);font-size:13px;padding:0 10px;min-width:0}
.fb-select-wide{min-width:172px}
.fb-select-year{width:88px}
.fb-notice{display:flex;align-items:center;gap:8px;background:#fff9eb;border:1px solid #f6dfac;border-radius:8px;padding:7px 12px;font-size:12px;color:#806120;line-height:1.5}
.fb-notice .ic{width:17px;height:17px;flex-shrink:0}
.cb-title{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.09em}
.cb-check{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink);min-height:32px;cursor:pointer}
.cb-check input{width:17px;height:17px;accent-color:var(--blue)}
.cb-sep{width:1px;height:20px;background:var(--line)}

.report-card{padding:8px 13px 10px}
.table-scroll,.is-wrap{overflow:auto;max-width:100%;scrollbar-color:#b4cdee #f1f6fd;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.financial-table{border-spacing:0;width:100%;border-collapse:separate;min-width:730px;line-height:1.22;font-size:14px}
/* The column heads are a band, not a blank strip: tinted, in navy, with a
   rule under them so the figures below start somewhere definite. */
.financial-table th{
  font-size:12px;color:var(--ink);text-align:left;font-weight:600;
  letter-spacing:.01em;padding:11px 12px;background:var(--tint-head);
  border-bottom:1px solid var(--tint-head-line);white-space:nowrap;
}
.financial-table thead th:first-child{border-radius:7px 0 0 0}
.financial-table thead th:last-child{border-radius:0 7px 0 0}
.financial-table th small{display:block;color:#3d6394;font-weight:400;font-size:10px;margin-top:3px;letter-spacing:0}
.financial-table th.num{text-align:right}
.financial-table th:first-child{width:40%}
.financial-table td{padding:7px 12px;border-bottom:1px solid #e6effb;color:#193974}
.financial-table td:first-child{color:var(--ink)}
.financial-table .indent{padding-left:32px}
.financial-table .section td{
  background:var(--tint-section);color:var(--ink);font-weight:700;font-size:14px;
  border:0;padding:9px 12px;letter-spacing:.01em;
}
.financial-table .section td:first-child{border-radius:6px}
.financial-table .total td{
  background:var(--tint-total);color:var(--ink);font-weight:700;
  border-top:1px solid var(--tint-head-line);border-bottom:0;padding:9px 12px;
}
.financial-table .total td:first-child{border-radius:6px 0 0 6px}
.financial-table .total td:last-child{border-radius:0 6px 6px 0}
/* Gross profit and net income: the deepest tint of the four, with a gold
   edge down the left so the eye finds them without a heavier colour. */
.financial-table .emphasis td{
  background:var(--tint-strong);color:var(--ink);font-weight:700;
  padding:10px 12px;border:0;font-size:14.5px;
}
.financial-table .emphasis td:first-child{box-shadow:inset 3px 0 0 var(--tint-gold)}
.financial-table .emphasis td:first-child{border-radius:6px 0 0 6px}
.financial-table .emphasis td:last-child{border-radius:0 6px 6px 0}
.financial-table .margin-row td{font-size:12px;color:var(--muted);font-style:italic}
.financial-table tr.gap td{height:7px;border:0;padding:0}
.financial-table td.positive{color:var(--good)}
.financial-table td.negative{color:var(--bad)}
.financial-table td.grand{border-left:1px solid #e8eaed;font-weight:700}
.financial-table tbody tr:not(.section):not(.total):not(.emphasis):not(.gap):hover td{background:#f2f8ff}
.report-note{color:#6280a4;font-size:11px;margin:10px 8px 0;line-height:1.6}
.report-tools{display:flex;align-items:center;gap:12px;padding:6px 0 13px}
.report-tools p{font-size:12px;color:var(--muted)}
.report-tools .button{margin-left:auto}
.by-location-table{min-width:830px}
.by-location-table th small{display:block;color:var(--muted);font-size:10px;margin:3px 0}
.by-location-table td.unavailable{color:#9eafc5}
/* A figure summed from a range where some months are missing. */
.partial-data{position:relative}
.partial-data::after{content:"*";color:var(--orange);font-weight:700;margin-left:2px}

.full-bleed-table{border-collapse:collapse;width:100%;font-size:13px}
.full-bleed-table th{
  color:var(--ink);font-weight:600;text-align:left;padding:11px 12px;
  background:var(--tint-head);border-bottom:1px solid var(--tint-head-line);font-size:12px;
}
.full-bleed-table th:first-child{border-radius:7px 0 0 0}
.full-bleed-table th:last-child{border-radius:0 7px 0 0}
.full-bleed-table td:first-child{padding-left:12px}
.full-bleed-table td:last-child{padding-right:12px}
.full-bleed-table td{padding:12px 0;border-bottom:1px solid #e6effb}
.full-bleed-table td.num,.full-bleed-table th.num{text-align:right}
.full-bleed-table tr:last-child td{border-bottom:0}
.full-bleed-table .ic{width:20px;height:20px;margin-right:9px;color:#123767}
.recent-card{min-height:229px}
.recent-card .full-bleed-table td{padding:9px 0;font-size:12px}
.recent-card .full-bleed-table th{font-size:11px}
.report-name{display:flex;align-items:center;white-space:nowrap}

.ratio-layout{display:grid;grid-template-columns:minmax(0,1.58fr) minmax(0,.7fr);gap:18px;margin-top:16px;align-items:start}
.ratio-table{width:100%;border-collapse:collapse;font-size:13px}
.ratio-table th{
  font-size:12px;font-weight:600;color:var(--ink);padding:9px 10px;text-align:left;
  white-space:nowrap;background:var(--tint-head);border-bottom:1px solid var(--tint-head-line);
}
.ratio-table th:first-child{border-radius:7px 0 0 0}
.ratio-table th:last-child{border-radius:0 7px 0 0}
.ratio-table td:first-child{padding-left:10px}
.ratio-table td{padding:9px 0;border-top:1px solid #e4eefb;white-space:nowrap}
.ratio-table th.num,.ratio-table td.num{text-align:right}
.ratio-table td:first-child{padding-right:10px;white-space:normal}
.ratio-table td:last-child{padding-left:10px}
.ratio-card{padding:17px 18px}
.ratio-card h2{font-size:22px}
.ratio-card>p{font-size:13px;margin-top:3px;color:var(--muted)}
.ratio-card .card-head{margin-bottom:0}
.ratio-card .text-button{font-size:13px}
.ratio-meta{font-size:11px;color:#6d88ac;margin:12px 0 0}

/* ═══════════════════════════════════════════════════════════════════════════
   MANAGEMENT TABLES — clients, locations, files.
   ═══════════════════════════════════════════════════════════════════════════ */
.table-card{padding:0 18px;overflow:hidden}
.management-table{border-collapse:collapse;width:100%;font-size:14px;min-width:820px}
.management-table th{
  text-align:left;font-size:12px;font-weight:600;color:var(--ink);padding:12px;
  background:var(--tint-head);border-bottom:1px solid var(--tint-head-line);
}
.management-table th:first-child{border-radius:7px 0 0 0}
.management-table th:last-child{border-radius:0 7px 0 0}
.management-table td:first-child{padding-left:12px}
.management-table td:last-child{padding-right:12px}
.management-table td{padding:15px 0;border-bottom:1px solid #e4eefb}
.management-table td:not(:first-child),.management-table th:not(:first-child){padding-left:14px}
.management-table tr:last-child td{border-bottom:0}
.management-table .company-cell{display:flex;align-items:center;gap:13px}
.management-table strong{display:block;font-size:15px;line-height:1.35;letter-spacing:-.3px}
.management-table small{display:block;color:#5274a0;font-size:12px;margin-top:3px}
.management-table .contact{font-size:13px;color:#163874}
.management-table .action-cell{white-space:nowrap;text-align:right}
.management-table .action-cell .button,.management-table .action-cell .cbtn{margin-left:8px}
.initials,.location-code{display:inline-grid;place-items:center;width:44px;height:47px;border-radius:9px;background:linear-gradient(135deg,#ecf7ff,#d5eaff);color:var(--blue);font-size:17px;font-weight:700;flex-shrink:0}
.status{display:inline-flex;align-items:center;gap:7px;color:#008e55;background:#e0f8ed;border-radius:8px;padding:5px 10px;font-size:12px;white-space:nowrap}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:#00b76c}
.status.inactive{background:#ffe7ee;color:#d23859}
.status.inactive::before{background:#e34b6e}
.status.neutral{color:#517198;background:#edf3fa}
.status.neutral::before{background:#88a5c7}
.link-with-icon{display:inline-flex;gap:7px;align-items:center;color:#285d9f}
.link-with-icon .ic{width:16px;height:16px}
.table-empty,.list-empty,.empty-state{padding:40px 15px;text-align:center;color:var(--muted);font-size:13px}

/* ═══════════════════════════════════════════════════════════════════════════
   UPLOAD
   ═══════════════════════════════════════════════════════════════════════════ */
.drop-zone,.upload-zone{
  border:2px dashed #c8dffc;border-radius:12px;background:linear-gradient(160deg,#fff,#f5faff);
  min-height:211px;padding:28px;text-align:center;display:flex;flex-direction:column;
  align-items:center;justify-content:center;cursor:pointer;
}
.drop-zone.dragging,.upload-zone.dragging{border-color:var(--gold);background:#fffaeb}
.drop-zone>.tile-icon{margin-bottom:10px;width:65px;height:65px}
.drop-zone h3,.upload-zone-title{font-size:21px;margin-bottom:7px;letter-spacing:-.4px;color:var(--ink)}
.drop-zone p,.upload-zone-hint{font-size:12px;color:var(--muted)}
.drop-zone .button{margin:12px 0}
.drop-caption{font-size:11px;max-width:440px;color:var(--muted)}
.upload-status-inline{margin-top:12px;font-size:12px;color:var(--blue);font-weight:600}
.upload-status-inline.bad{color:var(--bad)}
.file-row-name,.fm-name{display:flex;gap:11px;align-items:center;min-width:0}
.file-row-name .ic{color:#12a767;flex-shrink:0;width:25px;height:25px}
.upload-summary-list,.summary{margin-top:4px}
.upload-summary-list>div,.summary-row{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}
.upload-summary-list>div:last-child,.summary-row:last-child{border-bottom:0}
.summary-row>span{color:var(--muted)}
.summary-row>strong{text-align:right;font-weight:600}
.preview-label,.inline-info{display:flex;gap:9px;align-items:flex-start;background:#eaf4ff;border-radius:7px;padding:10px 13px;color:#355b91;font-size:11px;margin-top:13px;line-height:1.5}
.inline-info .ic{color:var(--blue);width:21px;height:21px;flex-shrink:0}
.unavailable-view{text-align:center;padding:48px 20px;background:#fff;border:1px solid var(--line);border-radius:10px}
.unavailable-view .ic{width:45px;height:45px;color:#87b1e4;margin-bottom:13px}
.unavailable-view h2{font-size:21px}
.unavailable-view p{margin:9px auto 17px;max-width:550px;font-size:13px;color:var(--muted)}

.fm-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.fm-row:last-child{border-bottom:0}
.fm-info{flex:1;min-width:0}
.fm-name{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.fm-meta{font-size:11px;color:var(--muted);margin-top:3px}
.fm-actions{display:flex;gap:8px;flex-shrink:0}

/* ═══════════════════════════════════════════════════════════════════════════
   SETTINGS AND HELP
   ═══════════════════════════════════════════════════════════════════════════ */
.settings-card{padding:19px 21px;overflow:visible}
.settings-title{display:flex;align-items:center;gap:16px;margin-bottom:15px}
.settings-title .tile-icon{width:55px;height:58px;border-radius:12px}
.settings-title .ic{width:31px;height:31px}
.settings-title h2{font-size:22px}
.settings-title p{font-size:13px;margin-top:4px;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px 24px}
.field,.mf{display:flex;flex-direction:column;gap:6px;min-width:0;margin-bottom:13px}
.field>label,.field>span,.mf>label,.mf label{font-size:12px;color:#173972;font-weight:500}
.field input,.field select,.field textarea,.mi{
  width:100%;border:1px solid #d1e1f9;border-radius:6px;background:#fff;color:#15326a;
  font-size:13px;min-height:40px;padding:9px 11px;resize:vertical;font-family:var(--sans);
}
.field select,.mi{appearance:auto}
.field textarea{min-height:69px}
.mhint{font-size:11px;color:var(--muted);line-height:1.5}
.merr{background:#fff2f3;border:1px solid #ffd4d9;color:#b92e40;border-radius:8px;padding:10px 13px;font-size:12px;line-height:1.5}
.settings-bottom{display:grid;grid-template-columns:1.1fr 1.05fr 1.1fr;gap:16px;margin-top:14px}
.settings-bottom .settings-card{padding:17px 18px}
.settings-bottom .settings-title h2{font-size:19px;letter-spacing:-.55px}
.settings-bottom .settings-title p{font-size:11px}
.settings-bottom .settings-title .tile-icon{width:45px;height:48px}
.setting-line{display:flex;align-items:center;gap:10px;padding:11px 0;min-height:43px;border-bottom:1px solid var(--line);width:100%;background:transparent;text-align:left}
.setting-line:last-child{border-bottom:0}
.setting-line>div:first-of-type{flex:1;min-width:0}
.setting-line strong{display:block;font-size:13px;font-weight:600}
.setting-line small{display:block;color:#4a6c9e;font-size:11px;margin-top:3px;line-height:1.4}
.setting-line .leading-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.settings-footer{display:flex;align-items:center;gap:10px;margin:17px 0 0}
.settings-footer p{font-size:11px;margin-right:auto;color:#6883a8}
.user-row,.client-row,.login-row,.locname-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:13px}
.user-row:last-child,.client-row:last-child,.login-row:last-child,.locname-row:last-child{border-bottom:0}
.client-list,.login-list,.locname-list{display:block}
.c-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.c-name,.login-row-main{flex:1;min-width:0;font-weight:600}
.c-pw,.login-row-email{font-size:12px;color:var(--muted)}
.c-pw.has{color:var(--good)}
.c-actions,.fm-actions{display:flex;gap:8px;flex-shrink:0}
.login-row-name{font-weight:600}
.login-row-email{overflow-wrap:anywhere}
.locname-row{gap:10px}
.locname-code{width:52px;flex-shrink:0;font-weight:700;color:var(--blue)}
.locname-row input{flex:1}
.role-pill{color:var(--blue);background:#edf6ff;border-radius:6px;padding:3px 8px;font-size:11px}
.subform,.subform-static{border:1px solid var(--line);border-radius:10px;padding:15px 16px;margin-top:13px;background:#f9fcff}
.subform-title{font-size:13px;font-weight:600;margin-bottom:10px}
.mrow{display:flex;gap:10px;justify-content:flex-end}
.danger-zone{display:flex;align-items:center;gap:14px;margin-top:18px;padding:14px 16px;border:1px solid #ffd4d9;border-radius:10px;background:#fff8f8}
.danger-zone-text{flex:1;min-width:0}
.danger-zone-text strong{display:block;font-size:13px;color:#b92e40}
.danger-zone-text span{display:block;font-size:11px;color:#8a5560;margin-top:3px;line-height:1.5}

.help-page{padding:19px 18px 15px;border-radius:12px;background:#ffffffb0}
.help-page>.page-heading{margin:0 0 14px}
.help-page>.page-heading h2{font-size:40px}
.help-page>.page-heading p{font-size:16px}
.help-layout{display:grid;grid-template-columns:3.7fr 1fr;gap:16px;margin-top:16px}
.help-categories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.help-category{padding:18px 19px;min-height:149px}
.help-category-top{display:flex;gap:16px;align-items:flex-start}
.help-category .tile-icon{width:56px;height:61px}
.help-category .tile-icon .ic{width:34px;height:34px}
.help-category h3{font-size:17px;margin:3px 0 6px;letter-spacing:-.4px}
.help-category p{font-size:12px;line-height:1.5;color:var(--muted)}
.help-questions{padding:15px 20px;margin-top:15px}
.help-questions .card-head{margin-bottom:8px}
.question-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:25px}
.question-item{display:flex;align-items:flex-start;gap:12px;text-align:left;min-height:42px;width:100%;padding:11px 0;border-bottom:1px solid #e5eefb;font-size:12px;line-height:1.5;color:#153572}
.question-item>.ic{width:20px;height:20px;flex-shrink:0;color:var(--blue)}
.support-card{padding:21px 18px}
.support-card>.tile-icon{margin-bottom:15px;width:58px;height:66px}
.support-card h3{font-size:20px;line-height:1.2;letter-spacing:-.6px;margin-bottom:6px}
.support-card>p{font-size:12px;color:var(--muted)}
.support-detail{display:flex;gap:13px;align-items:flex-start;margin-top:20px;font-size:12px}
.support-detail>.ic{width:23px;height:23px;flex-shrink:0;color:var(--blue)}
.support-detail strong{display:block;font-size:12px}
.support-detail p{font-size:11px;line-height:1.5;margin-top:4px;color:#345b99;overflow-wrap:anywhere}

/* ═══════════════════════════════════════════════════════════════════════════
   EMPTY STATE, TOAST, MODALS
   ═══════════════════════════════════════════════════════════════════════════ */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:320px;text-align:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:40px 24px}
.empty-icon{width:45px;height:45px;color:#87b1e4;stroke-width:1.5}
.empty-h{font-size:21px;letter-spacing:-.5px;color:var(--ink)}
.empty-p{font-size:13px;color:var(--muted);max-width:550px;line-height:1.6}

.toast{
  position:fixed;right:25px;bottom:22px;z-index:640;max-width:min(450px,calc(100vw - 28px));
  background:#082849;color:#f4f8ff;box-shadow:0 9px 28px #001d3f33;border-left:3px solid var(--gold);
  border-radius:9px;padding:14px 18px;font-size:13px;transform:translateY(35px);opacity:0;
  pointer-events:none;transition:transform .2s,opacity .2s;display:flex;align-items:center;gap:10px;
}
.toast.show{opacity:1;transform:none}
.toast.err{border-left-color:var(--bad)}
.toast-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex-shrink:0}
.toast.err .toast-dot{background:var(--bad)}

.overlay{position:fixed;inset:0;background:#001b3b66;backdrop-filter:blur(3px);z-index:600;display:none;align-items:center;justify-content:center;padding:25px}
.overlay.show{display:flex}
.modal{
  background:#fff;border:1px solid #d9e8fa;border-radius:16px;box-shadow:var(--shadow-lg);
  max-width:580px;width:100%;max-height:calc(100dvh - 40px);display:flex;flex-direction:column;
  animation:pageEnter .2s;
}
.modal.sm{max-width:470px}
.modal.wide{max-width:760px}
.modal-head{padding:22px 24px 17px;display:flex;align-items:flex-start;justify-content:space-between;gap:15px;border-bottom:1px solid var(--line)}
.modal-head h3{font-size:23px;letter-spacing:-.5px;display:flex;align-items:center;gap:10px}
.modal-head.danger-head h3{color:#b92e40}
.modal-body{padding:20px 24px;overflow:auto}
.modal-body p{font-size:13px;line-height:1.6}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 24px;border-top:1px solid var(--line)}
.mtext{font-size:13px;line-height:1.6;color:var(--ink);margin-bottom:10px}
.mtext-strong{font-size:16px;font-weight:700;margin-bottom:12px}
.danger-text{color:#b92e40}
.mlist{margin:0 0 14px 18px;font-size:13px;color:var(--muted);line-height:1.7}
.danger-callout{background:#fff2f3;border-color:#ffd4d9;color:#8a3542}
.overlay.danger .modal{border-color:#ffd4d9}

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT — a statement is a document, so it keeps the serif and the white page.
   ═══════════════════════════════════════════════════════════════════════════ */
.print-head-title{font-family:var(--acct);font-size:16px;font-weight:700;text-align:center}
.print-head-meta{font-family:var(--acct);font-size:11px;text-align:center;margin-top:4px}
.ph-company{font-weight:700}
@page{size:letter portrait;margin:.65in .7in .6in .7in}
@media print{
  @page{size:letter portrait;margin:.55in .6in .55in .6in}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  body>*{display:none!important}
  #print-root{display:block!important;background:#fff}
  #print-root *{font-family:"Libre Baskerville",Georgia,serif}
  #print-root table{width:100%;border-collapse:collapse;font-size:10px}
  #print-root td,#print-root th{font-size:10px!important;padding:3px 6px!important}
  #print-root .financial-table{min-width:0}
  #print-root .financial-table .section td,#print-root .financial-table .total td,
  #print-root .financial-table .emphasis td{background:#f1f1f1!important;color:#000!important}
  #print-root .table-scroll{overflow:visible}
  /* The blank rows that space the sections apart on screen are not part of
     the statement. The printed page carries exactly the rows it always did. */
  #print-root tr.gap{display:none!important}
  /* The colour legend explains the screen. On paper the colours are flattened
     and the note is noise, so the printed statement is left as it was. */
  #print-root .report-note{display:none!important}
  html,body{background:#fff!important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — the design's own breakpoints.
   ═══════════════════════════════════════════════════════════════════════════ */
@media(min-width:1750px){
  :root{--sidebar:247px}
  .hero{padding-left:37px}
  .kpi-card{padding:25px;gap:22px}
  .kpi-value{font-size:30px}
  .chart-svg{height:236px}
  .chart-card{min-height:296px}
  .financial-table td{padding:9px 14px}
}
@media(max-width:1440px){
  :root{--sidebar:215px}
  .brand{padding-left:24px}
  .wordmark{font-size:51px}
  .brand-tag{font-size:14px}
  .nav-item{font-size:13px;gap:14px;padding-left:14px;min-height:46px}
  .nav-item .ic{width:22px;height:22px}
  .nav-divider{margin:13px 12px}
  .sidebar-bottom{padding:20px 17px 14px}
  .hero{padding-left:28px}
  .hero h1,.client-switch select{font-size:33px}
  .hero-eyebrow{font-size:14px}
  #hdr-subtitle{font-size:14px}
  .hero-controls{gap:11px;right:24px;top:16px}
  .hero-controls>.control-btn{min-width:162px}
  .hero-controls .select-shell{min-width:183px}
  .account-wrap{margin-left:7px}
  .account-button{min-width:159px;gap:9px}
  .account-name{min-width:76px}
  .account-name strong{font-size:14px}
  .account-name>span{font-size:12px}
  .avatar{width:41px;height:41px;font-size:22px}
  .kpi-card{padding:20px 15px;gap:13px;min-height:135px}
  .kpi-card>.tile-icon{width:54px;height:56px;border-radius:11px}
  .kpi-card>.tile-icon .ic{width:31px;height:31px}
  .kpi-value{font-size:24px;letter-spacing:-.8px}
  .kpi-label{font-size:13px}
  .kpi-change,.kpi-trend{font-size:16px}
  .kpi-card small,.kpi-sub{font-size:11px}
  .card.padded{padding:16px 18px}
  h2{font-size:19px}
  .chart-actions{gap:9px}
  .legend-inline{gap:9px;font-size:11px}
  .chart-svg{height:202px}
  .ratio-layout{gap:12px;grid-template-columns:1.6fr .75fr}
  .ratio-table{font-size:12px}
  .settings-bottom{grid-template-columns:1fr 1fr 1fr}
  .help-layout{grid-template-columns:3.35fr 1fr}
  .financial-table{font-size:13px}
}
@media(max-width:1200px){
  :root{--sidebar:200px}
  .nav-item{gap:10px;padding-left:12px;font-size:12px}
  .brand{padding-left:21px}
  .brand-tag{font-size:13px}
  .hero h1,.client-switch select{font-size:30px}
  .hero-copy{padding-top:22px}
  .account-name{display:none}
  .account-button{min-width:61px}
  .account-wrap{margin-left:0}
  .hero-controls>.control-btn{min-width:161px}
  .hero{padding-left:23px}
  .main{padding-left:18px;padding-right:18px}
  .grid{gap:13px}
  .mt{margin-top:13px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-main{grid-template-columns:1fr}
  .quick-grid{grid-template-columns:1fr}
  .ratio-layout{grid-template-columns:1fr}
  .form-grid{gap:12px 14px}
  .settings-bottom{grid-template-columns:1fr 1fr}
  .settings-bottom>.settings-card:last-child{grid-column:1/-1}
  .help-layout{grid-template-columns:1fr}
  .subnav{gap:8px}
  .report-tabs{gap:0}
  .report-tabs button{padding-left:12px;padding-right:12px;font-size:13px}
  .management-table{min-width:760px}
}
@media(max-width:900px){
  :root{--sidebar:180px}
  .nav-item{font-size:12px;padding-left:8px;gap:9px;min-height:47px}
  .nav-item .ic{width:20px}
  .brand{padding-left:19px}
  .wordmark{font-size:46px}
  .brand-tag{font-size:12px}
  .hero{padding:27px 18px 17px}
  .hero h1,.client-switch select{font-size:28px}
  .hero-copy{padding-top:38px}
  .hero-controls{right:18px;gap:10px;top:15px}
  .hero-controls>.control-btn{min-width:148px}
  .hero-controls .select-shell{min-width:149px}
  .control-btn,.select-shell{font-size:12px;height:39px;padding-left:10px;gap:8px}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toolbar{gap:10px}
  .toolbar>.search-shell{flex-basis:100%}
  .help-categories{grid-template-columns:1fr 1fr}
  .question-grid{grid-template-columns:1fr}
  .subnav{flex-wrap:wrap;padding-bottom:10px}
  .subnav>.search-shell{max-width:none;flex:1 1 100%}
  .report-tabs{width:100%}
  .page-footer{flex-direction:column;align-items:flex-start}
  .page-heading h2{font-size:30px}
}
@media(max-width:700px){
  :root{--sidebar:232px}
  .sidebar{transform:translateX(-100%);transition:transform .22s}
  .sidebar.open{transform:none}
  .sidebar .wordmark{font-size:53px}
  .sidebar .brand-tag{font-size:14px}
  .sidebar .nav-item{font-size:14px;gap:17px;padding-left:16px}
  .sidebar .nav-item .ic{width:23px}
  .sidebar-bottom{padding:18px 21px}
  .workspace{margin-left:0}
  .sidebar-shade.visible{display:block;position:fixed;inset:0;background:#00152b66;z-index:65;backdrop-filter:blur(2px)}
  .hero{padding:24px 17px 20px}
  .mobile-menu{display:inline-grid!important;position:absolute;left:12px;top:14px;width:44px;height:44px;border:1px solid #d7e7fa;background:#fff;z-index:5}
  /* The design drops the location picker on a phone. This dashboard cannot:
     a report is a location and a period, and both have to be reachable. So
     the hero becomes a column — the company, then the two pickers on a row of
     their own — and only the menu and the account stay pinned to the top. */
  .hero{display:flex;flex-direction:column;gap:12px;padding-top:66px}
  .hero-copy{order:1}
  .hero-controls{position:static;order:2;display:grid;grid-template-columns:1fr;gap:8px;width:100%}
  .hero-controls>.control-btn{min-width:0;width:100%;padding:0 12px;font-size:12px}
  .hero-controls .select-shell{display:flex;min-width:0;width:100%}
  .account-wrap{position:absolute;top:13px;right:13px;margin:0}
  .account-button{min-width:44px;padding:0;gap:6px}
  .account-button>.ic-sm{display:none}
  .avatar{width:40px;height:40px;font-size:22px}
  .hero-copy{padding-top:51px;max-width:100%}
  .hero h1,.client-switch select{font-size:26px;letter-spacing:-.6px}
  .hero-eyebrow{font-size:14px}
  #hdr-subtitle{font-size:12px;line-height:1.5}
  .main{padding:0 13px 13px}
  .g4,.g3{grid-template-columns:1fr 1fr;gap:10px}
  .kpi-card{padding:15px 12px;gap:10px;min-height:145px;flex-direction:column}
  .kpi-card>.tile-icon{width:41px;height:42px;border-radius:10px}
  .kpi-card>.tile-icon .ic{width:25px;height:25px}
  .kpi-label{font-size:12px}
  .kpi-value{font-size:23px;letter-spacing:-.6px;margin:4px 0}
  .kpi-change,.kpi-trend{font-size:14px}
  .card.padded{padding:17px 16px}
  .card-head h2{font-size:19px}
  .chart-svg{height:198px}
  .quick-grid{grid-template-columns:1fr}
  .callout{padding:13px;gap:10px;flex-wrap:wrap}
  .callout .button{width:100%;margin:2px 0 0}
  .report-tabs{width:100%;gap:0}
  .report-tabs button{flex:1;padding:12px 10px;font-size:13px}
  .subnav{padding:0 10px 10px;gap:7px}
  .report-card{padding:7px 9px 10px}
  .financial-table{min-width:755px}
  .financial-table td{padding:10px}
  .financial-table th:first-child,.financial-table td:first-child{
    position:sticky;left:0;z-index:1;background:#fff;min-width:172px;max-width:220px;white-space:normal;
  }
  .financial-table th:first-child{background:var(--tint-head)}
  .financial-table .section td{background:var(--tint-section);position:static}
  .financial-table .total td:first-child{background:var(--tint-total)}
  .financial-table .emphasis td:first-child{background:var(--tint-strong);box-shadow:inset 3px 0 0 var(--tint-gold)}
  .by-location-table{min-width:900px}
  .filter-bar,.compare-bar{padding:11px}
  .fb-group{flex:1 1 100%}
  .fb-select{min-height:44px;font-size:16px}
  .fb-select-wide{flex:1}
  .management-table{min-width:640px;font-size:13px}
  .management-table td{padding:14px 0}
  .toolbar>.select-shell{min-width:130px;height:44px}
  .toolbar .button{font-size:12px;min-height:44px;min-width:125px}
  .search-shell input{font-size:16px}
  .page-heading h2{font-size:28px}
  .settings-card{padding:19px 16px}
  .form-grid{grid-template-columns:1fr}
  .field input,.field select,.field textarea,.mi{font-size:16px;min-height:44px}
  .settings-bottom{grid-template-columns:1fr}
  .settings-bottom .settings-card:last-child{grid-column:auto}
  .settings-footer{flex-wrap:wrap}
  .settings-footer .button{flex:1}
  .help-page{padding:10px 0;background:transparent}
  .help-categories{grid-template-columns:1fr}
  .icon-button,.mc-btn{width:44px;height:44px}
  .button.small,.cbtn{min-height:42px}
  .nav-item{min-height:48px}
  /* Modals fill the screen, and a long one scrolls inside itself rather than
     pushing its buttons off the bottom. */
  .overlay{padding:0;align-items:flex-end}
  .modal,.modal.sm,.modal.wide{width:100%;max-width:100%;max-height:92dvh;border-radius:16px 16px 0 0}
  .modal-head{padding:18px}
  .modal-body{padding:18px;-webkit-overflow-scrolling:touch}
  .modal-footer{padding:13px 18px;position:sticky;bottom:0;background:#fff}
  .mi,.mf input,.mf select{font-size:16px}
  .account-menu{right:-1px;width:228px}
  .toast{bottom:15px;right:14px;left:14px;max-width:none}
  .fm-row{flex-wrap:wrap}
}
@media(max-width:400px){
  .g4,.g3{grid-template-columns:1fr}
  .kpi-card{flex-direction:row;min-height:118px}
  .kpi-card>.tile-icon{width:47px;height:50px}
  .report-tabs button{padding-left:7px;padding-right:7px;font-size:12px}
}
@media(max-height:800px) and (min-width:701px){
  .brand{padding-top:15px;padding-bottom:16px}
  .wordmark{font-size:46px}
  .brand-tag{font-size:13px}
  .sidebar nav{padding-top:3px}
  .nav-item{min-height:40px;padding-top:8px;padding-bottom:8px}
  .nav-divider{margin-top:10px;margin-bottom:10px}
  .sidebar-bottom{padding-top:14px;padding-bottom:10px}
}

/* Installed on a phone there is no browser chrome, so the page itself has to
   stay clear of the notch and the home indicator. */
@media (display-mode: standalone){
  .hero{padding-top:calc(24px + env(safe-area-inset-top,0px))}
  .sidebar{padding-top:env(safe-area-inset-top,0px)}
  .main{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
  #login-screen{padding-top:calc(24px + env(safe-area-inset-top,0px))}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   A FEW THINGS THE APPLICATION NEEDS THAT THE DESIGN DID NOT HAVE
   ═══════════════════════════════════════════════════════════════════════════ */

/* An admin picks the company from a control; a client reads it as a heading.
   Only one of the two is ever drawn. */
body[data-role="admin"] .client-only{display:none!important}

/* The heading a statement carries, the way a statement carries one. */
.report-doc-head{padding:16px 20px 10px;text-align:center}
.report-doc-company{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-.1px}
.report-doc-title{font-size:22px;font-weight:700;color:var(--ink);margin:4px 0 3px;letter-spacing:-.6px}
.report-doc-period{font-size:12px;color:var(--muted)}
@media(max-width:700px){
  .report-doc-head{padding:13px 12px 8px}
  .report-doc-title{font-size:18px}
}

/* The location code badge is narrower than a set of client initials. */
.location-code{width:45px;height:48px;font-size:15px;background:var(--pale-blue)}

/* A settings row is a button, so it gets a button's hover. */
.setting-line:hover{background:#f5f9ff}

/* The upload drop zone sits inside a card, so it needs no card of its own. */
.drop-zone .button{pointer-events:none}

/* A long email in a summary row has to wrap rather than push the page wide. */
.summary-row{gap:16px}
.summary-row>strong{overflow-wrap:anywhere;min-width:0}
.setting-line small{overflow-wrap:anywhere}

/* Two things the audit's floors ask for that the design's phone sizes miss:
   no control's text below 11px, and nothing tappable under 44px. */
@media(max-width:700px){
  .hero-controls>.control-btn{font-size:11px}
  .client-switch select{min-height:44px}
}


/* A card title beside its icon is a flex item, and a flex item does not
   shrink below its content unless it is told it may. */
.settings-title>div{min-width:0}
.settings-title h2,.settings-title p{overflow-wrap:anywhere}

/* The statement is set in the interface face on screen. The serif is kept
   for the printed page, where a statement is a document. */
.financial-table,.financial-table th,.financial-table td,
.ratio-table,.report-doc-head{font-family:var(--sans)}

/* ═══════════════════════════════════════════════════════════════════════════
   PHONE TOUCH TARGETS

   Measured rather than assumed: every control a finger lands on is at least
   44x44, and every field is at least 16px so iOS does not zoom the page on
   focus. A small icon inside a large button is fine; a small button is not.
   ═══════════════════════════════════════════════════════════════════════════ */
@media(max-width:700px){
  .button,.mbtn,.hbtn,.cbtn,.button.small,.icon-button,.mc-btn,
  .account-menu button,.nav-item,.report-tabs button,.quick-button,
  .setting-line,.control-btn,.select-shell{min-height:44px}
  .hero-controls>.control-btn{height:44px}
  .text-button{min-height:44px;padding:10px 0}
  .subnav>.text-button{padding-left:4px;padding-right:4px}
  .fb-select,.field input,.field select,.field textarea,.mi,.search-shell input{
    min-height:44px;font-size:16px;
  }
  /* The whole label is the target; the box inside it is only what it looks
     like. Both are made big enough rather than one of them. */
  .cb-check{min-height:44px;padding:4px 0}
  .cb-check input{width:24px;height:24px}
  /* A row of actions on a narrow screen wraps rather than shrinking its
     buttons below the floor. */
  .management-table .action-cell{white-space:normal}
  .management-table .action-cell .button{margin:3px 0 3px 8px}
  .fm-actions .cbtn{flex:1}
}

/* The select inside its shell is what the finger lands on, so it is the
   thing that has to be 44 tall — not just the frame around it. */
@media(max-width:700px){
  .select-shell{min-height:44px}
  .select-shell select{min-height:44px;font-size:16px}
}

/* Chart Trends: scoped to the report trend views. */
.trend-intro{display:flex;justify-content:space-between;gap:16px;align-items:center;margin:0 4px 18px;flex-wrap:wrap}
.trend-intro p{margin:0;color:var(--muted,#536b83)}
.trend-legend{display:flex;gap:20px;font-size:12px;color:#47617c;flex-wrap:wrap}
.trend-legend span{display:flex;align-items:center;gap:7px}
.trend-legend i{display:inline-block;width:24px;border-top:3px solid #1763ad}
.trend-legend .previous{border-top:3px dashed #8595a9}
.trend-chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.trend-chart-card{min-width:0;overflow:visible}
.trend-chart-card h2{font-size:17px;color:#082d50;margin:0 0 14px;border-bottom:1px solid #e5edf6;padding-bottom:13px}
.trend-svg{width:100%;height:auto;display:block;overflow:visible}
.trend-svg text{fill:#546b83;font-size:12px}
.trend-gridline{stroke:#e4edf5;stroke-width:1}
.trend-zero{stroke:#9baec1;stroke-width:1.2}
.trend-line{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.trend-line.cur{stroke:#1763ad}.trend-line.prior{stroke:#8595a9;stroke-dasharray:7 5;stroke-width:2}
.trend-point circle{fill:#1763ad;stroke:white;stroke-width:2}.trend-point.prior circle{fill:white;stroke:#8595a9}
.trend-point{cursor:pointer;outline:none}.trend-point:focus circle,.trend-point:hover circle{stroke:#d6a323;stroke-width:3}
.trend-tooltip{display:none;pointer-events:none}.trend-point:hover .trend-tooltip,.trend-point:focus .trend-tooltip{display:block}
.trend-tooltip rect{fill:#082d50}.trend-tooltip text{fill:#fff;font-size:12px}
@media(max-width:1050px){.trend-chart-grid{grid-template-columns:1fr}}
@media print{.trend-chart-grid{display:block}.trend-chart-card{break-inside:avoid;margin-bottom:20px}.trend-tooltip{display:none!important}}

.location-chart-grid{grid-template-columns:1fr}.location-chart-scroll{overflow-x:auto;width:100%}.location-chart-scroll:focus-visible{outline:2px solid #1763ad}.location-chart{width:100%;height:auto;max-width:none}.location-chart .bar-value{font-weight:700;fill:#193247}.location-chart-grid .trend-chart-card{overflow:hidden}.trend-legend{row-gap:8px}.location-chart-scroll .trend-tooltip text{font-size:11px}
/* Gap-only forecast presentation. Actual data remains visually neutral; an
   estimated cell carries a light amber tint and a clear status banner. */
.forecast-banner{display:flex;align-items:center;gap:11px;margin:0 0 14px;padding:11px 14px;border:1px solid #e8c778;border-radius:10px;background:#fff8e7;color:#72551a;font-size:13px;line-height:1.4}
.forecast-badge{flex:0 0 auto;padding:4px 7px;border-radius:5px;background:#d49b1c;color:#fff;font-size:10px;font-weight:800;letter-spacing:.08em}
.forecast-banner-copy{flex:1 1 auto;min-width:0}
.forecast-banner-copy strong{font-weight:800}
.forecast-rule{flex:0 0 auto;padding-left:11px;border-left:1px solid #e8c778;color:#8b6a25;font-size:11px;font-weight:700;white-space:nowrap}
.forecast-cell{background:#fff8e7!important;color:#72551a!important}
.forecast-col{background:#fff3d1!important;color:#72551a!important}
@media (max-width:700px){.forecast-banner{align-items:flex-start;flex-wrap:wrap}.forecast-rule{flex-basis:100%;padding:7px 0 0;border-left:0;border-top:1px solid #e8c778}}

.date-filter-copy{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.date-filter-copy small{font-size:11px;font-weight:400;color:var(--muted)}
.period-control{height:56px!important;min-height:56px}
.forecast-edit{width:130px;min-height:40px;text-align:right;border:1px solid #caa456;border-radius:6px;padding:6px;background:#fffdf6;color:#173451;font:inherit}
.forecast-actions{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin-top:14px}
.forecast-location-heading{border-left:2px solid #b6cdeb!important}
/* A2Y Portal application chooser. It intentionally reuses the Financial
   Dashboard card, border, and navy/gold palette. */
.portal-launcher{min-height:100vh;background:var(--mist,#eef5fc);display:grid;place-items:center;padding:32px}
.portal-launcher-card{width:min(760px,100%);background:#fff;border:1px solid #d8e6f5;border-radius:18px;padding:42px;box-shadow:0 18px 50px rgba(10,39,74,.12)}
.portal-eyebrow{color:#c9971a;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:12px}
.portal-launcher-card h1{color:#071f4f;font-size:34px;margin:10px 0 8px}.portal-launcher-card p{color:#506b8d;margin:0 0 26px}
.portal-app-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.portal-app-card{border:1px solid #cfe0f4;border-radius:12px;background:#fff;padding:22px;text-align:left;cursor:pointer;color:#071f4f;transition:.15s box-shadow,.15s transform}.portal-app-card:hover,.portal-app-card:focus-visible{box-shadow:0 8px 24px rgba(10,39,74,.14);transform:translateY(-2px)}.portal-app-card strong{display:block;font-size:18px;margin-bottom:7px}.portal-app-card span{font-size:13px;color:#617d9e}@media(max-width:600px){.portal-launcher{padding:18px}.portal-launcher-card{padding:26px 20px}.portal-app-cards{grid-template-columns:1fr}}
.app-switcher{position:relative;margin:0 12px 16px}.app-switcher-current{width:100%;min-height:44px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:rgba(255,255,255,.08);color:#fff;text-align:left;padding:10px 12px;font:inherit;cursor:pointer}.app-switcher-menu{position:absolute;z-index:20;left:0;right:0;top:48px;background:#fff;border-radius:8px;box-shadow:0 10px 25px rgba(0,0,0,.2);padding:6px}.app-switcher-link{display:block;width:100%;border:0;background:#fff;color:#082557;text-align:left;padding:11px 10px;border-radius:5px;cursor:pointer;font:inherit}.app-switcher-link:hover,.app-switcher-link:focus-visible{background:#edf4fc}
.portal-launcher{min-height:100dvh;background:linear-gradient(135deg,#eef6ff 0%,#f8fbff 48%,#eaf3fc 100%);display:flex;align-items:center;justify-content:center;padding:clamp(24px,6vw,80px);position:relative;overflow:hidden}.portal-launcher:before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-180px;top:-220px;background:rgba(255,194,31,.12)}.portal-launcher-card{position:relative;width:min(1080px,100%);padding:clamp(28px,5vw,64px);background:rgba(255,255,255,.94);border:1px solid #d4e3f3;border-radius:24px;box-shadow:0 22px 65px rgba(6,35,70,.14)}.portal-launcher-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px}.portal-launcher-brand{font-size:18px;font-weight:800;letter-spacing:.15em;color:#092b59;text-transform:uppercase}.portal-launcher-brand span{color:#f5b91a}.portal-launcher-card h1{color:#071f4f;font-size:clamp(30px,4vw,48px);letter-spacing:-.03em;margin:8px 0}.portal-launcher-card>p{font-size:17px;color:#5d7592;margin:0;max-width:590px}.portal-app-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.portal-app-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;border:1px solid #d6e4f2;border-radius:16px;background:#fff;padding:26px;min-height:300px;text-align:left;box-shadow:0 8px 22px rgba(8,43,82,.06);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.portal-app-card:hover,.portal-app-card:focus-within{transform:translateY(-4px);box-shadow:0 16px 30px rgba(8,43,82,.14);border-color:#94bce6}.portal-card-top{display:flex;width:100%;justify-content:space-between;align-items:center}.portal-card-number{font:500 13px 'DM Mono',monospace;color:#7992af}.portal-card-status{border-radius:999px;background:#edf8f1;color:#147341;padding:5px 10px;font-size:12px;font-weight:700}.portal-card-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:14px;margin:24px 0 18px;background:#edf5ff;color:#1766c2}.portal-app-efficiency .portal-card-icon{background:#fff7df;color:#ad7710}.portal-card-icon .ic{width:28px;height:28px}.portal-app-card h2{color:#08275a;font-size:23px;margin:0 0 10px}.portal-app-card p{color:#597391;line-height:1.55;margin:0 0 24px;max-width:400px}.portal-card-open{margin-top:auto;min-height:46px;border:0;border-radius:8px;padding:0 16px;background:#082b59;color:#fff;font:600 14px inherit;cursor:pointer}.portal-card-open:hover,.portal-card-open:focus-visible{background:#0d427f}.portal-app-efficiency .portal-card-open{background:#d29a18}.portal-app-efficiency .portal-card-open:hover,.portal-app-efficiency .portal-card-open:focus-visible{background:#b37c0c}.portal-card-open span{font-size:19px;margin-left:8px}@media(max-width:700px){.portal-launcher{padding:18px}.portal-launcher-card{padding:26px 20px;border-radius:18px}.portal-launcher-head{display:block;margin-bottom:26px}.portal-app-cards{grid-template-columns:1fr}.portal-app-card{min-height:0}.portal-card-open{width:100%}}
.portal-launcher-note{color:#617b99;font-size:13px;font-weight:600;letter-spacing:.02em;padding:12px 0 4px;white-space:nowrap}
@media(max-width:700px){.portal-launcher-note{padding-top:14px;white-space:normal}}
.portal-launcher-head p{font-size:17px;color:#5d7592;margin:0;max-width:590px;line-height:1.5}
/* Keep the date controls out of the company heading as labels grow. */
@media(min-width:701px){
  .hero{display:flex;flex-direction:column;gap:18px}
  .hero-controls{position:static;align-self:flex-end;flex-wrap:wrap;justify-content:flex-end;max-width:100%}
  .hero-copy{max-width:100%;min-width:0}
}