@import url('/static/fonts/fonts.css');

/* EntreeBridge Insights
   ---------------------------------------------------------------------------
   Palette and type carried over from the Chef's Kitchen platform shell, with the
   accent moved from that customer's green to a neutral slate.

   The aging ramp below is the domain's own instrument -- the six buckets every
   AP report is organised by. It is reused for sync freshness because staleness
   IS an aging problem, which makes the shell's one signature element mean
   something rather than decorate. */

:root {
  --paper:      #faf8f3;
  --card:       #ffffff;
  --ink:        #1c1b18;
  --ink-2:      #6b6862;
  --ink-3:      #96918a;
  --rule:       #e7e2d6;
  --rule-soft:  #f0ece3;

  --green:      #2f5d7a;
  --green-deep: #234760;
  --green-wash: #eaf0f5;

  --amber:      #c98a23;
  --amber-wash: #fdf5e6;
  --rust:       #a8443a;
  --rust-wash:  #fbeeec;

  /* aging ramp: future -> long overdue */
  --age-0: #5a8f9e;
  --age-1: #2f6b4f;
  --age-2: #7a9a3a;
  --age-3: #c98a23;
  --age-4: #bf6a2c;
  --age-5: #a8443a;

  --ui:      'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Fraunces', Georgia, serif;

  --r:    10px;
  --r-sm: 7px;
  --shadow: 0 1px 2px rgba(28,27,24,.04), 0 8px 24px rgba(28,27,24,.06);
}

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

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

h1, h2, h3 { margin: 0; font-weight: 600; }
a { color: var(--green); }

/* Numbers must line up in columns. Money that jitters is money you re-read. */
.num, td.num, .figure { font-variant-numeric: tabular-nums; }

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

/* ------------------------------------------------------------------ shell */

.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--rule);
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 28px;
  height: 58px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.wordmark {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark span { color: var(--green); }

.nav { display: flex; gap: 2px; }
.nav a {
  padding: 7px 13px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
}
.nav a:hover { background: var(--rule-soft); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--green-wash); color: var(--green-deep); }

.spacer { flex: 1; }

.whoami { text-align: right; line-height: 1.25; }
.whoami b { display: block; font-size: 13px; font-weight: 600; }
.whoami span { font-size: 11px; color: var(--ink-3); text-transform: uppercase;
               letter-spacing: .07em; }

/* ------------------------------------------- freshness: the signature element

   The reason this platform exists is that a dashboard displayed two-month-old
   numbers under a hardcoded date and nobody could tell. So data age is stated
   permanently, computed never written, and it escalates: a quiet marker while
   healthy, a full banner once the sync has actually stopped. */

.fresh {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--rule);
  border-radius: 100px;
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
}
.fresh .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.fresh b { color: var(--ink); font-weight: 600; }

.fresh[data-state="fresh"] .dot { background: var(--age-1); }
.fresh[data-state="aging"] { border-color: #e8d3a8; background: var(--amber-wash); }
.fresh[data-state="aging"] .dot { background: var(--age-3); }
.fresh[data-state="stale"],
.fresh[data-state="none"] { border-color: #e6c2bd; background: var(--rust-wash); }
.fresh[data-state="stale"] .dot,
.fresh[data-state="none"] .dot { background: var(--age-5); }

.banner {
  background: var(--rust);
  color: #fff;
  padding: 13px 24px;
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 13px;
}
.banner b { font-weight: 700; }
.banner .why { opacity: .85; }

/* ----------------------------------------------------------------- layout */

.page { max-width: 1180px; margin: 0 auto; padding: 34px 24px 72px; }

.page-head { margin-bottom: 26px; }
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 5px;
}
.page-head h1 {
  font-family: var(--display);
  font-size: 30px;
  letter-spacing: -0.02em;
}
.page-head p { margin: 7px 0 0; color: var(--ink-2); max-width: 62ch; }

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 22px;
}
/* Stacked cards need separating, but grid children must not: the grid already
   owns their spacing, and letting this rule reach them pushes every card except
   the first one 18px down inside its own cell. */
.card + .card { margin-top: 18px; }
.grid > .card + .card { margin-top: 0; }
.card h2 { font-size: 15px; margin-bottom: 4px; }
.card .sub { color: var(--ink-2); font-size: 13px; margin: 0 0 16px; }

.grid { display: grid; gap: 18px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.stat .label {
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
}
.stat .figure {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 6px;
  line-height: 1.05;
}
.stat .note { font-size: 12px; color: var(--ink-3); margin-top: 3px; }

/* ------------------------------------------------------------------ forms */

.auth-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.auth {
  width: 100%;
  max-width: 372px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 32px;
  box-shadow: var(--shadow);
}
.auth .wordmark { font-size: 17px; }
.auth h1 {
  font-family: var(--display);
  font-size: 25px;
  letter-spacing: -0.02em;
  margin: 14px 0 6px;
}
.auth p.lede { color: var(--ink-2); margin: 0 0 22px; font-size: 13px; }

label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.field { margin-bottom: 15px; }
.field .hint { font-size: 12px; color: var(--ink-3); margin-top: 5px; }

input[type=text], input[type=email], input[type=password], select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font: inherit;
  color: var(--ink);
  background: var(--card);
}
input:focus, select:focus { border-color: var(--green); outline: none;
                            box-shadow: 0 0 0 3px var(--green-wash); }

input.code {
  font-size: 25px;
  letter-spacing: .34em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 12px;
}

button, .btn {
  font: inherit;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: var(--green);
  color: #fff;
  cursor: pointer;
}
button:hover { background: var(--green-deep); }
button.full { width: 100%; }
button.secondary { background: var(--card); color: var(--ink); border-color: var(--rule); }
button.secondary:hover { background: var(--rule-soft); }
button.danger { background: var(--card); color: var(--rust); border-color: #e6c2bd; }
button.danger:hover { background: var(--rust-wash); }
button.link {
  background: none; border: none; color: var(--green); padding: 0;
  text-decoration: underline; font-size: 13px;
}

.notice { padding: 11px 13px; border-radius: var(--r-sm); font-size: 13px; margin-bottom: 17px; }
.notice.error { background: var(--rust-wash); color: #7d312a; border: 1px solid #e6c2bd; }
.notice.ok    { background: var(--green-wash); color: var(--green-deep); border: 1px solid #cfe0d6; }
.notice.warn  { background: var(--amber-wash); color: #8a5d13; border: 1px solid #e8d3a8; }

/* ------------------------------------------------------------------ tables */

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 12px 9px;
  border-bottom: 1px solid var(--rule);
}
td { padding: 11px 12px; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; }

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tag.admin    { background: #ece4f3; color: #5b3b78; }
.tag.approver { background: var(--green-wash); color: var(--green-deep); }
.tag.viewer   { background: var(--rule-soft); color: var(--ink-2); }
.tag.off      { background: var(--rust-wash); color: #7d312a; }

.mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12px; }

.secret {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  background: var(--paper);
  border: 1px dashed var(--rule);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  font-size: 15px;
  word-break: break-all;
  user-select: all;
}

.inline-form { display: inline; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 880px) {
  .grid.cols-3 { grid-template-columns: 1fr; }
  .topbar { gap: 14px; padding: 0 14px; height: auto; flex-wrap: wrap; padding-block: 10px; }
  .topbar .fresh { order: 10; width: 100%; justify-content: flex-start; }
  .page { padding: 22px 14px 56px; }
  .page-head h1 { font-size: 25px; }
  .table-scroll { overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}



/* ---- Insights: AP module ------------------------------------------------ */
.foot { max-width: 1240px; margin: 28px auto 40px; padding: 0 24px; color: var(--ink-3); font-size: 12px; }
.grid.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid.cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1000px) { .grid.cols-2, .grid.cols-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .grid.cols-2, .grid.cols-4 { grid-template-columns: 1fr; } }
.row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.month-nav { display: flex; gap: 4px; align-items: center; font-size: 13px; }
.month-nav a { padding: 3px 9px; border-radius: 6px; text-decoration: none; color: var(--ink-2); }
.month-nav a[aria-current="page"] { background: var(--green-wash); color: var(--green-deep); font-weight: 600; }
.small { font-size: 12px; }
.late { color: var(--rust); }
.linkish { align-self: center; font-size: 13px; }

/* aging bands: the domain's own ramp, fixed regardless of theme */
.aging { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 8px; }
.aging .band { display: block; text-decoration: none; color: inherit; padding: 10px 10px 8px; border: 1px solid var(--rule); border-radius: var(--r-sm); }
.aging .band:hover { border-color: var(--ink-3); }
.aging .bar-wrap { height: 8px; background: var(--rule-soft); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.aging .bar { height: 100%; border-radius: 4px; }
.aging .band[data-band="0"] .bar { background: var(--age-0); }
.aging .band[data-band="1"] .bar { background: var(--age-1); }
.aging .band[data-band="2"] .bar { background: var(--age-2); }
.aging .band[data-band="3"] .bar { background: var(--age-3); }
.aging .band[data-band="4"] .bar { background: var(--age-4); }
.aging .band[data-band="5"] .bar { background: var(--age-5); }
.aging .band-label { font-size: 12px; color: var(--ink-2); }
.aging .band-figure { font-weight: 600; font-size: 16px; }
.aging .band-n { font-size: 11px; color: var(--ink-3); }
@media (max-width: 900px) { .aging { grid-template-columns: repeat(3, 1fr); } }

/* horizontal bar tables: forecast, vendors */
table.bars td { padding: 5px 6px; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
table.bars td.lbl { width: 34%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
table.bars td.bar-cell { width: 40%; }
table.bars .bar { height: 12px; background: var(--green); border-radius: 3px; min-width: 2px; }
table.bars tr.overdue .bar { background: var(--rust); }
table.bars td.cum { color: var(--ink-3); font-size: 12px; }

/* due-by-day calendar */
table.cal { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 3px; }
table.cal th { font-size: 11px; color: var(--ink-3); font-weight: 500; text-align: center; padding: 2px 0; }
table.cal td { height: 58px; vertical-align: top; border-radius: 6px; background: var(--rule-soft); padding: 4px 6px; position: relative; }
table.cal td.dim { background: transparent; color: var(--ink-3); }
table.cal td.today { outline: 2px solid var(--green); }
table.cal td a { display: block; height: 100%; text-decoration: none; color: inherit; border-radius: 4px; }
table.cal td[style*="--heat"] { background: color-mix(in srgb, var(--green) calc(var(--heat) * 55%), var(--rule-soft)); }
table.cal td.past[style*="--heat"] { background: color-mix(in srgb, var(--rust) calc(var(--heat) * 55%), var(--rule-soft)); }
table.cal .day { font-size: 11px; color: var(--ink-2); display: block; }
table.cal .amt { font-weight: 600; font-size: 12px; display: block; margin-top: 4px; }
table.cal .cnt { font-size: 10px; color: var(--ink-3); display: block; }

/* filters */
.filters { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 12px 16px; margin-bottom: 14px; }
.seg { display: flex; flex-wrap: wrap; gap: 2px; background: var(--rule-soft); border-radius: 8px; padding: 3px; }
.seg a { padding: 5px 10px; border-radius: 6px; font-size: 13px; text-decoration: none; color: var(--ink-2); }
.seg a[aria-current="page"] { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.search { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.search input[type="search"] { width: 240px; }

/* register */
table.register td, table.register th { white-space: nowrap; }
table.register td:first-child { white-space: normal; max-width: 280px; }
.tag.open    { background: var(--green-wash); color: var(--green-deep); }
.tag.partial { background: var(--amber-wash); color: #7a5314; }
.tag.credit  { background: var(--rule-soft); color: var(--ink-2); }