/* ==========================================================================
   Roster — design tokens

   The tool is a pricing terminal for creator inventory. Density and legibility
   of numbers matter more than anything decorative, so: a cool ink palette,
   IBM Plex Sans for interface text, IBM Plex Mono for every figure so columns
   of money align on the digit, and colour reserved almost entirely for
   signalling cost freshness — the one thing that silently rots.
   ========================================================================== */

:root {
  --ink:        #14181F;
  --ink-2:      #454F5E;
  --ink-3:      #6B7686;
  --line:       #DFE4EA;
  --line-2:     #EDF0F3;
  --surface:    #FFFFFF;
  --canvas:     #F4F6F8;

  --petrol:     #163B5C;
  --petrol-600: #1E4F79;
  --petrol-50:  #EAF1F7;

  --fresh:      #0E7C66;
  --fresh-bg:   #E6F4F0;
  --amber:      #A65B00;
  --amber-bg:   #FDF1E1;
  --red:        #B02418;
  --red-bg:     #FCECEA;

  --radius:     6px;
  --radius-sm:  4px;
  --shadow:     0 1px 2px rgba(20, 24, 31, .06), 0 1px 3px rgba(20, 24, 31, .04);

  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--petrol-600); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Every figure is monospaced and tabular so columns align on the digit. */
.num, td.num, .money, .stat-value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ---------- shell ---------- */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 208px;
  flex: 0 0 208px;
  background: var(--petrol);
  color: #C9D8E6;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.brand-mark {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .10em;
  color: #fff;
  text-transform: uppercase;
}
.brand-sub { font-size: 11px; color: #8FA9C1; margin-top: 2px; letter-spacing: .02em; }

.nav { padding: 10px 0; flex: 1; overflow-y: auto; }
.nav-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .10em;
  color: #6E8CA8; padding: 12px 18px 5px;
}
.nav a {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 7px 18px; color: #C9D8E6; font-size: 13px;
  border-left: 2px solid transparent;
}
.nav a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.nav a.active { background: rgba(255,255,255,.10); color: #fff; border-left-color: #6FA8D6; font-weight: 500; }
.nav .pill {
  background: rgba(255,255,255,.16); color: #fff; font-family: var(--mono);
  font-size: 10px; padding: 1px 6px; border-radius: 20px;
}

.sidebar-foot {
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 12px 18px; font-size: 12px;
}
.sidebar-foot .who { color: #fff; font-weight: 500; }
.sidebar-foot .role { color: #8FA9C1; font-size: 11px; }
.sidebar-foot a { color: #8FA9C1; font-size: 12px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 12px 24px;
  display: flex; align-items: center; gap: 16px;
  position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 17px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.topbar .spacer { flex: 1; }

.content { padding: 20px 24px 60px; }

/* ---------- flash ---------- */
.flash {
  padding: 10px 14px; border-radius: var(--radius); margin-bottom: 14px;
  font-size: 13px; border: 1px solid;
}
.flash.ok   { background: var(--fresh-bg); border-color: #B6DED3; color: #0A5B4B; }
.flash.warn { background: var(--amber-bg); border-color: #EFCFA2; color: #7A4400; }
.flash.err  { background: var(--red-bg);   border-color: #F0C0BA; color: #8A1C13; }

/* ---------- cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 16px;
}
.card-head {
  padding: 12px 16px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 10px;
}
.card-head h2 { font-size: 13px; font-weight: 600; margin: 0; letter-spacing: .01em; }
.card-head .spacer { flex: 1; }
.card-body { padding: 16px; }
.card-body.tight { padding: 0; }

.grid { display: grid; gap: 16px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid.c6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
@media (max-width: 1100px) {
  .grid.c4, .grid.c6 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid.c3, .grid.c2 { grid-template-columns: 1fr; }
}

/* ---------- stats ---------- */
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.stat-label { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .07em; display: flex; align-items: center; }
.stat-value { font-size: 24px; font-weight: 500; margin-top: 4px; letter-spacing: -.02em; }
.stat-note { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3); font-weight: 600; padding: 9px 12px;
  border-bottom: 1px solid var(--line); background: var(--surface);
  position: sticky; top: 0; white-space: nowrap;
}
table.data td { padding: 9px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.data tbody tr:hover { background: var(--petrol-50); }
table.data td.num, table.data th.num { text-align: right; }
table.data .primary-cell { font-weight: 500; }
table.data .sub { font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); }

.empty { padding: 40px 20px; text-align: center; color: var(--ink-3); }
.empty strong { display: block; color: var(--ink-2); margin-bottom: 4px; font-size: 14px; }

/* ---------- badges ---------- */
.badge {
  display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 20px; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--ink-2); background: var(--canvas);
  white-space: nowrap;
}
.badge.tier-0 { background: #F1F3F5; color: #6B7686; }
.badge.tier-1 { background: #EDF3F9; color: #2C5C86; border-color: #CBDDEC; }
.badge.tier-2 { background: var(--amber-bg); color: #7A4400; border-color: #EFCFA2; }
.badge.tier-3 { background: var(--fresh-bg); color: #0A5B4B; border-color: #B6DED3; }
.badge.warn   { background: var(--amber-bg); color: #7A4400; border-color: #EFCFA2; }
.badge.danger { background: var(--red-bg); color: #8A1C13; border-color: #F0C0BA; }
.badge.plain  { text-transform: none; letter-spacing: 0; font-weight: 500; }

/* ---------- the signature element: cost freshness ---------------------
   Price is the thing this database exists to hold, and price is the thing
   that silently rots. So every price on every screen carries its own age.  */
.freshness {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 11px; padding: 1px 7px 1px 5px;
  border-radius: 20px; border: 1px solid; white-space: nowrap;
}
.freshness::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.freshness.fresh { color: var(--fresh); background: var(--fresh-bg); border-color: #B6DED3; }
.freshness.amber { color: var(--amber); background: var(--amber-bg); border-color: #EFCFA2; }
.freshness.red   { color: var(--red);   background: var(--red-bg);   border-color: #F0C0BA; }
.freshness.none  { color: var(--ink-3); background: var(--canvas);   border-color: var(--line); }

/* ---------- the "?" metric nudge ---------- */
.mhelp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-left: 5px; border-radius: 50%;
  background: var(--line); color: var(--ink-3);
  font-size: 9.5px; font-weight: 700; font-family: var(--sans);
  cursor: help; vertical-align: middle; position: relative; text-transform: none;
  border: 0; letter-spacing: 0;
}
.mhelp:hover, .mhelp:focus { background: var(--petrol); color: #fff; outline: none; }

#mtip {
  position: fixed; z-index: 1000; max-width: 340px;
  background: var(--ink); color: #E8EDF3; padding: 11px 13px;
  border-radius: var(--radius); font-size: 12px; line-height: 1.55;
  box-shadow: 0 6px 24px rgba(20,24,31,.28); pointer-events: none;
  opacity: 0; transition: opacity .12s ease; text-transform: none; letter-spacing: 0;
  font-weight: 400;
}
#mtip.on { opacity: 1; }
#mtip b { color: #fff; display: block; margin-bottom: 3px; font-size: 12.5px; }
#mtip i { color: #8FA9C1; font-style: normal; font-size: 10.5px;
          text-transform: uppercase; letter-spacing: .07em; display: block; margin-bottom: 1px; }
#mtip hr { border: 0; border-top: 1px solid rgba(255,255,255,.14); margin: 7px 0; }

/* ---------- forms ---------- */
.field { margin-bottom: 13px; }
.field label { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.field .hint { font-size: 11px; color: var(--ink-3); margin-top: 3px; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=url], select, textarea {
  width: 100%; padding: 7px 10px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-family: var(--sans); font-size: 13px;
  background: #fff; color: var(--ink);
}
input.num-input { font-family: var(--mono); font-variant-numeric: tabular-nums; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--petrol-600);
  box-shadow: 0 0 0 3px rgba(30,79,121,.12);
}
textarea { min-height: 76px; resize: vertical; }
.check { display: flex; align-items: center; gap: 7px; font-size: 13px; margin-bottom: 8px; }
.check input { width: auto; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: #fff; color: var(--ink); font-size: 13px; font-weight: 500;
  cursor: pointer; font-family: var(--sans);
}
.btn:hover { background: var(--canvas); text-decoration: none; }
.btn.primary { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.btn.primary:hover { background: var(--petrol-600); }
.btn.danger { color: var(--red); border-color: #F0C0BA; }
.btn.danger:hover { background: var(--red-bg); }
.btn.sm { padding: 4px 9px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.filters { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; }
@media (max-width: 1200px) { .filters { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 700px)  { .filters { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.filters .field { margin-bottom: 0; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 8px 14px; font-size: 13px; color: var(--ink-3); cursor: pointer;
  font-family: var(--sans); font-weight: 500;
}
.tabs button.on { color: var(--petrol); border-bottom-color: var(--petrol); }
.tab-panel { display: none; }
.tab-panel.on { display: block; }

/* ---------- misc ---------- */
.kv { display: grid; grid-template-columns: 132px 1fr; gap: 6px 12px; font-size: 13px; }
.kv dt { color: var(--ink-3); font-size: 11.5px; padding-top: 1px; }
.kv dd { margin: 0; }

.pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 12px 16px; font-size: 13px; }
.meta { font-size: 12px; color: var(--ink-3); }
.muted { color: var(--ink-3); }
.right { text-align: right; }
.mt { margin-top: 16px; }
.inline-form { display: inline; }

.login-wrap { min-height: 100vh; display: grid; place-items: center; background: var(--petrol); padding: 20px; }
.login-card { background: #fff; border-radius: 10px; padding: 30px; width: 100%; max-width: 380px; box-shadow: 0 18px 50px rgba(0,0,0,.24); }
.login-card .brand-mark { color: var(--petrol); font-size: 20px; }
.login-card .brand-sub { color: var(--ink-3); margin-bottom: 22px; }

@media (max-width: 820px) {
  .sidebar { display: none; }
  .content { padding: 14px; }
  .topbar { padding: 12px 14px; }
}

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

/* ==========================================================================
   Campaign stage matrix

   Colour encodes WHO IS HOLDING IT UP, not just the status. A stage waiting
   on the client has to look different from one waiting on our own team,
   because that distinction is the entire point of the screen.
   ========================================================================== */

:root {
  --party-agency:  #1E4F79;
  --party-brand:   #8A5A00;
  --party-creator: #6B3FA0;
  --party-third:   #47606F;
}

.matrix-wrap { overflow-x: auto; border-radius: var(--radius); }
table.matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
table.matrix th {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
  color: var(--ink-3); padding: 8px 6px; border-bottom: 1px solid var(--line);
  background: var(--surface); vertical-align: bottom; text-align: center;
  white-space: nowrap; position: sticky; top: 0; z-index: 3;
}
table.matrix th.creator-col, table.matrix td.creator-col {
  text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 4;
  border-right: 1px solid var(--line); min-width: 190px; max-width: 230px;
}
table.matrix th.creator-col { z-index: 6; }
table.matrix td { padding: 6px; border-bottom: 1px solid var(--line-2); text-align: center; }
table.matrix tbody tr:hover td { background: var(--petrol-50); }
table.matrix tbody tr:hover td.creator-col { background: var(--petrol-50); }

/* one cell = one stage */
.cell {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 42px; text-decoration: none; color: inherit; padding: 2px;
  border-radius: var(--radius-sm);
}
.cell:hover { background: rgba(22,59,92,.08); text-decoration: none; }
.dot {
  width: 17px; height: 17px; border-radius: 4px; border: 1.5px solid var(--line);
  background: #fff; display: block;
}
.cell .age { font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); line-height: 1; }
.cell .age.late { color: var(--red); font-weight: 600; }

.dot.done      { background: var(--fresh); border-color: var(--fresh); }
.dot.skipped   { background: repeating-linear-gradient(45deg,#E4E8EC,#E4E8EC 3px,#fff 3px,#fff 6px);
                 border-color: var(--line); }
.dot.blocked   { background: var(--red-bg); border-color: var(--red); }
.dot.changes   { background: var(--amber-bg); border-color: var(--amber); border-style: dashed; }
.dot.not_started { background: #fff; border-color: #CBD3DB; }

/* in progress or waiting: the fill says who is holding it */
.dot.p-agency  { background: var(--party-agency);  border-color: var(--party-agency); }
.dot.p-brand   { background: var(--party-brand);   border-color: var(--party-brand); }
.dot.p-creator { background: var(--party-creator); border-color: var(--party-creator); }
.dot.p-third   { background: var(--party-third);   border-color: var(--party-third); }
.dot.half {
  background-image: linear-gradient(135deg, currentColor 50%, #fff 50%);
}
.dot.in_progress.p-agency  { background: linear-gradient(135deg,var(--party-agency) 50%,#fff 50%); }
.dot.in_progress.p-brand   { background: linear-gradient(135deg,var(--party-brand) 50%,#fff 50%); }
.dot.in_progress.p-creator { background: linear-gradient(135deg,var(--party-creator) 50%,#fff 50%); }
.dot.in_progress.p-third   { background: linear-gradient(135deg,var(--party-third) 50%,#fff 50%); }

.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11.5px; color: var(--ink-2); align-items: center; }
.legend span.k { display: inline-flex; align-items: center; gap: 5px; }

/* party chips used in lists and the chase queue */
.party {
  display: inline-block; font-size: 10.5px; font-weight: 600; padding: 1px 7px;
  border-radius: 20px; letter-spacing: .03em; border: 1px solid;
}
.party.agency  { color: var(--party-agency);  border-color: #C3D6E6; background: #EDF3F9; }
.party.brand   { color: var(--party-brand);   border-color: #EFCFA2; background: var(--amber-bg); }
.party.creator { color: var(--party-creator); border-color: #D6C7EA; background: #F3EEFA; }
.party.third_party { color: var(--party-third); border-color: #CFD9E0; background: #EFF3F5; }
.party.unassigned  { color: var(--ink-3); border-color: var(--line); background: var(--canvas); }

/* progress bar used on campaign cards */
.bar { height: 6px; background: var(--line-2); border-radius: 3px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--fresh); }

/* checklist builder rows */
.builder-row {
  display: grid; grid-template-columns: 28px 1fr 110px 120px 130px 60px 80px auto;
  gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-2);
}
.builder-row .ord { font-family: var(--mono); color: var(--ink-3); font-size: 12px; text-align: center; }
.builder-row input, .builder-row select { padding: 6px 8px; font-size: 12.5px; }
@media (max-width: 1000px) { .builder-row { grid-template-columns: 1fr; } }

.stage-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line-2); }
.stage-row:hover { background: var(--petrol-50); }
.stage-row .grow { flex: 1; min-width: 0; }
.stage-row .nm { font-weight: 500; }