/* ============================================================
   Editorial Ledger — design system for adservices
   Single source of truth. Mirrored verbatim in admin-console.

   Aesthetic: warm cream paper + ink + burnt-sienna single accent.
   Display serif (Fraunces) for hero numbers and section heads;
   geometric sans (Geist) for body; mono (Geist Mono) for IDs,
   numbers in tables, and small-caps labels.

   No Bootstrap. No bootstrap-icons. Utility classes match the
   Bootstrap-5 naming convention so templates don't need to be
   reshuffled — visual primitives are reimplemented from zero.
   ============================================================ */

@font-face{
  font-family:'Fraunces';font-style:normal;font-display:swap;
  font-weight:300 700;
  src:url('/static/fonts/Fraunces.woff2') format('woff2-variations'),
      url('/static/fonts/Fraunces.woff2') format('woff2');
}
@font-face{
  font-family:'Geist';font-style:normal;font-display:swap;
  font-weight:300 700;
  src:url('/static/fonts/Geist.woff2') format('woff2-variations'),
      url('/static/fonts/Geist.woff2') format('woff2');
}
@font-face{
  font-family:'Geist Mono';font-style:normal;font-display:swap;
  font-weight:300 600;
  src:url('/static/fonts/GeistMono.woff2') format('woff2-variations'),
      url('/static/fonts/GeistMono.woff2') format('woff2');
}

:root{
  color-scheme:light;
  /* v2 — richer kraft cream + stronger hairlines + warmer mid-tones.
     Was reading too pastel; pulls the surface 4-5% darker and adds
     ~10% chroma to paper/hair/muted to anchor the editorial feel. */
  --paper:        #F1E8D4;
  --paper-tint:   #E8DEC6;
  --paper-elev:   #FAF2DD;
  --ink:          #14110D;
  --ink-soft:     #2C2925;
  --muted:        #665E51;
  --muted-soft:   #8A8170;
  --hair:         #D6CBB4;
  --hair-soft:    #E2D9C4;
  --hair-strong:  #B8A98A;

  --sienna:       #C66B30;
  --sienna-deep:  #7A3F1B;
  --sienna-tint:  #EBD7BD;
  --sienna-wash:  rgba(198,107,48,0.10);

  --forest:       #3F6B4A;
  --forest-tint:  rgba(63,107,74,0.12);
  --oxblood:      #A4322E;
  --oxblood-tint: rgba(164,50,46,0.12);
  --indigo:       #3E5276;
  --indigo-tint:  rgba(62,82,118,0.12);

  --lens-accent:  var(--sienna);

  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body:    'Geist', system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;

  --rule-sienna:  1px;

  /* Legacy aliases — older templates reference Blueprint Dusk tokens
     (--text-soft, --green, etc) in inline styles. Map them onto the
     Editorial Ledger palette so the migration is incremental, not
     coordinated. Remove a line here once a sweep through templates
     confirms no references remain. */
  --text:        var(--ink);
  --text-soft:   var(--muted);
  --text-faint:  var(--muted-soft);
  --bg-base:     var(--paper);
  --bg-panel:    var(--paper-elev);
  --bg-elev:     var(--paper-tint);
  --bg-elev-2:   var(--paper-tint);
  --border:      var(--hair);
  --border-soft: var(--hair-soft);
  --border-hot:  var(--hair-strong);
  --green:       var(--forest);
  --green-soft:  var(--forest-tint);
  --amber:       var(--sienna);
  --amber-soft:  var(--sienna-wash);
  --red:         var(--oxblood);
  --red-soft:    var(--oxblood-tint);
  --purple:      var(--indigo);
  --blue:        var(--indigo);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink)}
body{
  font-family:var(--font-body);
  font-size:14.5px;line-height:1.55;
  font-feature-settings:'ss01','cv11';
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  display:flex;min-height:100vh;
}

/* Mono only where data identity matters: IDs, numbers, timestamps,
   small-caps labels, badges. NOT entire tables — names and free-text
   cells read like dev-debug output in mono, which fights the editorial
   voice. Body font (Geist) carries text content; mono is reserved for
   identity surfaces. */
code,.mono,.font-monospace,
.id-cell,kbd,samp,
.lbl,.smallcaps,
.badge,.btn,.pagination,
.form-control,.form-select,
.stat-tile .value,.stat-tile .label,.stat-tile .sub,
.topbar,#sidebar .brand .sub,#sidebar .nav-section,
.card-header,.table thead th,.empty,
.lens-switch,.prov-legend{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
}

/* Table body cells default to body font for readability, but keep
   tabular numerals so columns of numbers stay aligned. */
.table tbody td{font-variant-numeric:tabular-nums}

a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair-strong);transition:color .12s,border-color .12s}
a:hover{color:var(--sienna);border-bottom-color:var(--sienna)}
a.plain,a.btn,a.nav-link,a.page-link,a.list-group-item-action{border-bottom:0}

/* ── Editorial primitives ───────────────────────────────── */

.lbl,.smallcaps{
  font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
  font-weight:500;font-feature-settings:'ss01';
}
.dia{color:var(--sienna);padding:0 6px;font-size:9px;vertical-align:1px}
.rule-sienna{height:1px;background:var(--sienna);border:0;margin:.55rem 0}
.rule-hair{height:1px;background:var(--hair);border:0;margin:.55rem 0}
.rule-thin{height:.5px;background:var(--hair-strong);border:0;margin:.4rem 0}

/* Fraunces hero display number — optical sizing live */
.hero{
  font-family:var(--font-display);
  font-variation-settings:'opsz' 144,'SOFT' 50;
  font-weight:500;color:var(--sienna);
  line-height:.92;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.hero.ink{color:var(--ink)}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-variation-settings:'opsz' 36;
  font-weight:500;color:var(--ink);
  letter-spacing:-.005em;line-height:1.2;
  margin:0 0 .35rem;
}
h1{font-size:1.8rem;font-variation-settings:'opsz' 48}
h2{font-size:1.35rem}
h3{font-size:1.1rem}
h4{font-size:.95rem;font-variation-settings:'opsz' 24}

p{margin:0 0 .9rem}
small,.small{font-size:.8rem;color:var(--muted)}

.text-secondary,.text-muted{color:var(--muted) !important}
.text-faint{color:var(--muted-soft) !important}
.text-success{color:var(--forest) !important}
.text-warning{color:var(--sienna-deep) !important}
.text-danger{color:var(--oxblood) !important}
.text-info{color:var(--indigo) !important}
.text-accent{color:var(--sienna) !important}
.text-ink{color:var(--ink) !important}

/* ── Sidebar ─────────────────────────────────────────────── */

#sidebar{
  width:228px;min-height:100vh;flex-shrink:0;
  background:var(--paper-tint);
  border-right:1px solid var(--hair);
  display:flex;flex-direction:column;
  overflow-y:auto;
}
#sidebar .brand{
  padding:1rem 1.1rem .85rem;
  border-bottom:1px solid var(--hair);
  display:flex;flex-direction:column;gap:.15rem;
  user-select:none;
}
#sidebar .brand .name{
  font-family:var(--font-display);font-variation-settings:'opsz' 18;
  font-size:1.02rem;font-weight:500;color:var(--ink);
  letter-spacing:-.005em;
}
#sidebar .brand .name::before{
  content:'';display:inline-block;
  width:6px;height:6px;background:var(--sienna);
  margin-right:.55rem;vertical-align:1px;
}
#sidebar .brand .sub{font-size:10px;color:var(--muted);letter-spacing:.04em;font-family:var(--font-mono)}

#sidebar .nav-section{
  padding:1.1rem 1.1rem .25rem;
  font-size:9px;font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;
  color:var(--muted-soft);
}
#sidebar .nav-section .badge-soft{
  display:inline-block;margin-left:.4rem;
  padding:.02rem .3rem;font-size:9px;
  border:1px solid var(--hair-strong);color:var(--muted);
  letter-spacing:.08em;border-radius:0;
}
#sidebar .nav-link{
  display:flex;align-items:center;gap:.55rem;
  padding:.4rem 1.1rem;
  color:var(--ink-soft);
  font-size:13px;font-weight:400;
  text-decoration:none;border-bottom:0;
  border-left:2px solid transparent;
  transition:color .12s,background .12s,border-color .12s;
}
#sidebar .nav-link:hover{color:var(--ink);background:var(--paper-elev)}
#sidebar .nav-link.active{
  color:var(--sienna);background:var(--sienna-wash);
  border-left-color:var(--sienna);font-weight:500;
}
#sidebar .foot{
  margin-top:auto;padding:.95rem 1.1rem 1.1rem;
  border-top:1px solid var(--hair);
  font-family:var(--font-mono);font-size:10px;
  color:var(--muted);letter-spacing:.04em;line-height:1.7;
}
#sidebar .foot .row{display:flex;justify-content:space-between;gap:.5rem}
#sidebar .foot .row span:last-child{color:var(--ink-soft)}
#sidebar .foot .ok{color:var(--forest)}

/* ── Topbar + content ────────────────────────────────────── */

#content{flex:1;overflow-x:auto;min-width:0;background:var(--paper)}

.topbar{
  display:flex;align-items:center;gap:.65rem;
  padding:.7rem 1.5rem;
  background:var(--paper);
  border-bottom:1px solid var(--hair);
  font-size:11.5px;color:var(--muted);
}
.topbar .crumb{color:var(--ink)}
.topbar .crumb-sep{color:var(--muted-soft);padding:0 .25rem}
.topbar .meta{margin-left:auto;color:var(--muted);font-size:10.5px;letter-spacing:.05em}

/* Lab lens banner — single hairline marker, not a colour bar */
.lens-banner{
  margin:0 1.5rem 0;padding:.45rem .9rem;
  background:transparent;
  border-top:1px solid var(--sienna-deep);
  border-bottom:1px solid var(--sienna-deep);
  color:var(--sienna-deep);
  font-size:11.5px;letter-spacing:.02em;
  display:flex;align-items:center;gap:.5rem;
}
.lens-banner::before{
  content:'LAB · ';font-weight:500;
  font-family:var(--font-mono);letter-spacing:.14em;
}
.lens-banner em{font-style:normal;border-bottom:1px solid var(--sienna-deep)}

/* Lens switcher */
.lens-switch{display:inline-flex;gap:0;background:transparent;border:0;padding:0;font-size:11px}
.lens-switch button{
  border:1px solid var(--hair-strong);
  background:transparent;color:var(--muted);
  padding:.22rem .65rem;cursor:pointer;
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--font-mono);font-size:inherit;
  letter-spacing:.08em;text-transform:uppercase;
  border-radius:0;border-right-width:0;
  transition:color .12s,border-color .12s,background .12s;
}
.lens-switch button:last-child{border-right-width:1px}
.lens-switch button:hover{color:var(--ink);background:var(--paper-elev)}
.lens-switch button.active{
  color:var(--sienna);border-color:var(--sienna);
  background:var(--sienna-wash);position:relative;z-index:1;
}
.lens-switch button.active+button{border-left-color:var(--sienna)}
.lens-switch .lens-dot{width:.55em;display:inline-block;font-family:var(--font-mono)}
.lens-switch .lens-dot::before{content:'○'}
.lens-switch button.active .lens-dot::before{content:'●'}

/* ── Cards ───────────────────────────────────────────────── */

.card{
  background:var(--paper-tint);
  border:1px solid var(--hair-strong);
  border-radius:0;
  margin-bottom:1rem;
  /* Wide tables scroll inside the card instead of spilling outside. */
  overflow-x:auto;
}
.card-header{
  background:var(--paper-tint);
  border-bottom:1px solid var(--hair);
  font-family:var(--font-mono);font-size:10px;
  font-weight:500;color:var(--muted);
  text-transform:uppercase;letter-spacing:.14em;
  padding:.65rem .95rem;
}
.card-body{padding:1rem 1.15rem}
.card-footer{
  background:transparent;border-top:1px solid var(--hair);
  font-size:11px;color:var(--muted);padding:.6rem .95rem;
}

/* ── Tables ──────────────────────────────────────────────── */

.table{
  width:100%;color:var(--ink);
  border-collapse:collapse;margin-bottom:0;
  /* Fixed layout makes the declared column widths authoritative —
     without it the browser sizes columns by content, so a column full
     of "—" collapses and its centred header drifts away from where the
     header label sits. Fixed = every header centres inside its real
     declared width, perfectly over the cell below. */
  table-layout:fixed;
}
.table th,.table td{overflow:hidden;overflow-wrap:break-word}
.table thead th{
  background:var(--paper-tint);
  font-family:var(--font-mono);font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;
  font-size:10px;color:var(--muted);
  border-bottom:1px solid var(--hair-strong);
  padding:.7rem .95rem;white-space:nowrap;
  /* Column alignment system: every header sits centred over its
     column content (cells default to center too, below). Numeric
     columns opt into .text-end (right edge, decimal-aligned money
     convention); anything needing left uses .text-start. The three
     utilities carry !important so they always beat this default. */
  text-align:center;
}
/* Utility text-align must beat the th default. Without !important the
   3-selector .table thead th outscored the 1-selector .text-end and
   numeric-column headers ended up left-aligned over right-aligned cells. */
.text-start{text-align:left !important}
.text-end{text-align:right !important}
.text-center{text-align:center !important}
.table tbody td{
  border-bottom:1px solid var(--hair-soft);
  padding:.65rem .95rem;font-size:13.5px;
  vertical-align:middle;
  background:var(--paper-elev);
  /* Mirror of the th default — value sits centred under its header.
     Numeric cells use .text-end, long prose uses .text-start. */
  text-align:center;
}
.table tbody tr:hover td{background:var(--paper)}
.table tbody tr:last-child td{border-bottom:0}
.table-sm thead th,.table-sm tbody td{padding:.35rem .65rem;font-size:12px}

/* ── Badges (outline pill, square) ───────────────────────── */

.badge{
  display:inline-block;border-radius:0;
  font-weight:500;font-size:10px;
  text-transform:uppercase;letter-spacing:.14em;
  padding:.18rem .55rem;border:1px solid transparent;
  vertical-align:middle;background:transparent;
}
/* Filled (solid) status badges. Outline-only read too light against
   the kraft-paper surface — operators scanning a long table need the
   row state visible at a glance, not a hairline accent. */
.badge-enabled{color:var(--paper);background:var(--forest);border-color:var(--forest)}
.badge-disabled{color:var(--paper);background:var(--muted);border-color:var(--muted)}
.badge-archived{color:var(--paper);background:var(--oxblood);border-color:var(--oxblood)}
.badge-warn{color:var(--paper);background:var(--sienna-deep);border-color:var(--sienna-deep)}
.badge-info{color:var(--paper);background:var(--indigo);border-color:var(--indigo)}
.badge-accent{color:var(--paper);background:var(--sienna);border-color:var(--sienna)}

/* Entity-type tags — softer than status badges; tinted fill on cream so
   the eye distinguishes Source / Campaign / Client without each being
   visually as loud as enabled/disabled. Used in sync activity log and
   anywhere a row is keyed by entity type. */
.tag-source  {color:var(--sienna-deep);background:var(--sienna-wash);border-color:var(--sienna)}
.tag-campaign{color:var(--forest);background:var(--forest-tint);border-color:var(--forest)}
.tag-client  {color:var(--indigo);background:var(--indigo-tint);border-color:var(--indigo)}
.tag-event   {color:var(--muted);background:var(--paper-tint);border-color:var(--hair-strong)}

/* ── Buttons ─────────────────────────────────────────────── */

.btn{
  display:inline-block;border-radius:0;
  font-family:var(--font-mono);font-size:11px;
  font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;
  padding:.45rem .9rem;cursor:pointer;
  background:transparent;border:1px solid var(--hair-strong);
  color:var(--ink);transition:all .12s;
  text-decoration:none;
}
.btn:hover{border-color:var(--ink);background:var(--paper-elev)}
.btn:focus{outline:none;box-shadow:0 0 0 2px var(--sienna-wash)}
.btn-sm{padding:.3rem .7rem;font-size:10px}
.btn-lg{padding:.6rem 1.2rem;font-size:12px}

.btn-primary{
  background:var(--sienna);color:var(--paper);border-color:var(--sienna);
}
.btn-primary:hover{background:var(--sienna-deep);border-color:var(--sienna-deep);color:var(--paper)}
.btn-outline-primary{color:var(--sienna);border-color:var(--sienna)}
.btn-outline-primary:hover{background:var(--sienna-wash);color:var(--sienna-deep);border-color:var(--sienna-deep)}
.btn-outline-secondary{color:var(--muted);border-color:var(--hair-strong)}
.btn-outline-secondary:hover{color:var(--ink);border-color:var(--ink)}
.btn-outline-success{color:var(--forest);border-color:var(--forest)}
.btn-outline-success:hover{background:var(--forest-tint);color:var(--forest)}
.btn-outline-danger{color:var(--oxblood);border-color:var(--oxblood)}
.btn-outline-danger:hover{background:var(--oxblood-tint);color:var(--oxblood)}
.btn:disabled,.btn.disabled{opacity:.45;cursor:not-allowed}

/* ── Forms ───────────────────────────────────────────────── */

.form-label,label{
  display:block;font-family:var(--font-mono);
  font-size:10px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);margin-bottom:.3rem;font-weight:500;
}
.form-control,.form-select,input[type=text],input[type=password],input[type=email],input[type=number],textarea,select{
  display:block;width:100%;
  background:var(--paper-elev);
  border:1px solid var(--hair-strong);
  color:var(--ink);border-radius:0;
  font-family:var(--font-mono);font-size:13px;
  padding:.45rem .65rem;line-height:1.4;
  transition:border-color .12s,box-shadow .12s;
}
.form-control:focus,.form-select:focus,input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--sienna);
  box-shadow:0 0 0 2px var(--sienna-wash);
}
.form-control-sm,.form-select-sm{font-size:12px;padding:.3rem .55rem}
.form-text{font-size:10.5px;color:var(--muted);margin-top:.25rem;font-family:var(--font-mono);letter-spacing:.04em}
.form-check{display:flex;align-items:center;gap:.5rem;margin:.4rem 0}
.form-check-input{width:14px;height:14px;accent-color:var(--sienna);margin:0}
.form-check-label{font-family:var(--font-body);font-size:13px;text-transform:none;letter-spacing:0;color:var(--ink);margin:0}

/* ── Stat tile ───────────────────────────────────────────── */

.stat-tile{
  background:var(--paper-elev);
  border:1px solid var(--hair);
  border-radius:0;padding:.95rem 1.05rem;
  display:flex;flex-direction:column;gap:.4rem;
  transition:border-color .12s;
}
.stat-tile:hover{border-color:var(--hair-strong)}
.stat-tile a{color:inherit;text-decoration:none;border-bottom:0}
.stat-tile .label{
  font-family:var(--font-mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500;
}
.stat-tile .value{
  font-family:var(--font-mono);font-size:1.45rem;
  font-weight:500;color:var(--ink);line-height:1;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}
.stat-tile .sub{font-family:var(--font-mono);font-size:10.5px;color:var(--muted)}
.stat-tile.accent .value{color:var(--sienna)}
.stat-tile.accent .label{color:var(--sienna-deep)}

/* ── Provenance dot + legend (admin lens) ─────────────────── */

.prov-dot{
  display:inline-block;width:6px;height:6px;
  margin-right:8px;vertical-align:middle;
  border-radius:0;flex-shrink:0;
}
.prov-stripe{
  display:flex;height:8px;
  background:var(--paper-tint);border:1px solid var(--hair);border-radius:0;
}
.prov-stripe>span{box-shadow:inset -1px 0 0 var(--paper);transition:filter .12s}
.prov-stripe>span:last-child{box-shadow:none}
.prov-stripe>span:hover{filter:brightness(1.15)}
.prov-legend{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.5rem;font-size:10.5px;color:var(--muted)}
.prov-legend .leg{display:inline-flex;align-items:center;gap:.35rem}
/* ID columns left-align: a centred cell floats the leading provenance
   dot to a different x per row (IDs vary in digit count), so the
   markers never line up. Left keeps every dot on the same column edge.
   !important beats the global .table tbody td center default. */
.id-cell{white-space:nowrap;font-family:var(--font-mono);text-align:left !important}

/* ── Empty state — editorial commentary ──────────────────── */

.empty{
  text-align:left;padding:1.3rem 1rem;
  color:var(--muted);font-size:13px;
  font-family:var(--font-mono);letter-spacing:.02em;
  line-height:1.7;
}
.empty::before{content:'— '}
.empty a{color:var(--sienna);border-bottom-color:var(--sienna-tint)}
.empty a:hover{border-bottom-color:var(--sienna)}
.empty .hint{display:block;margin-top:.45rem;color:var(--muted)}

/* ── Pagination ──────────────────────────────────────────── */

.pagination{display:inline-flex;gap:0;padding:0;margin:0;list-style:none}
.pagination .page-item .page-link{
  display:block;background:transparent;
  border:1px solid var(--hair-strong);border-right-width:0;
  color:var(--muted);border-radius:0;
  font-family:var(--font-mono);font-size:11px;
  padding:.3rem .7rem;text-decoration:none;
  transition:all .12s;
}
.pagination .page-item:last-child .page-link{border-right-width:1px}
.pagination .page-item .page-link:hover{background:var(--paper-elev);color:var(--ink);border-color:var(--ink)}
.pagination .page-item.active .page-link{background:var(--sienna-wash);color:var(--sienna);border-color:var(--sienna)}
.pagination .page-item.disabled .page-link{color:var(--muted-soft);cursor:not-allowed}

/* ── Bootstrap-compatible utility classes (handwritten) ──── */

.container{max-width:1280px;margin:0 auto;padding:0 1.5rem}
.container-fluid{padding:0 1.5rem}
.row{display:flex;flex-wrap:wrap;margin:0 -.5rem}
.row>[class^=col]{padding:0 .5rem}
.col{flex:1}
.col-1{flex:0 0 8.333%;max-width:8.333%}
.col-2{flex:0 0 16.667%;max-width:16.667%}
.col-3{flex:0 0 25%;max-width:25%}
.col-4{flex:0 0 33.333%;max-width:33.333%}
.col-5{flex:0 0 41.667%;max-width:41.667%}
.col-6{flex:0 0 50%;max-width:50%}
.col-7{flex:0 0 58.333%;max-width:58.333%}
.col-8{flex:0 0 66.667%;max-width:66.667%}
.col-9{flex:0 0 75%;max-width:75%}
.col-10{flex:0 0 83.333%;max-width:83.333%}
.col-12{flex:0 0 100%;max-width:100%}
@media(min-width:768px){
  .col-md-1{flex:0 0 8.333%;max-width:8.333%}
  .col-md-2{flex:0 0 16.667%;max-width:16.667%}
  .col-md-3{flex:0 0 25%;max-width:25%}
  .col-md-4{flex:0 0 33.333%;max-width:33.333%}
  .col-md-6{flex:0 0 50%;max-width:50%}
  .col-md-8{flex:0 0 66.667%;max-width:66.667%}
  .col-md-12{flex:0 0 100%;max-width:100%}
}
@media(min-width:992px){
  .col-lg-2{flex:0 0 16.667%;max-width:16.667%}
  .col-lg-3{flex:0 0 25%;max-width:25%}
  .col-lg-4{flex:0 0 33.333%;max-width:33.333%}
  .col-lg-6{flex:0 0 50%;max-width:50%}
}

.d-flex{display:flex}
.d-inline-flex{display:inline-flex}
.d-grid{display:grid}
.d-block{display:block}
.d-inline-block{display:inline-block}
.d-none{display:none}
.flex-column{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.flex-grow-1{flex-grow:1}
.flex-shrink-0{flex-shrink:0}
.justify-content-start{justify-content:flex-start}
.justify-content-center{justify-content:center}
.justify-content-end{justify-content:flex-end}
.justify-content-between{justify-content:space-between}
.justify-content-around{justify-content:space-around}
.align-items-start{align-items:flex-start}
.align-items-center{align-items:center}
.align-items-end{align-items:flex-end}
.align-items-baseline{align-items:baseline}

.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.85rem}.gap-4{gap:1.3rem}.gap-5{gap:2rem}

.m-0{margin:0}.m-1{margin:.25rem}.m-2{margin:.5rem}.m-3{margin:1rem}.m-4{margin:1.5rem}
.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}.mt-5{margin-top:2rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}.mb-5{margin-bottom:2rem}
.ms-1{margin-left:.25rem}.ms-2{margin-left:.5rem}.ms-3{margin-left:1rem}.ms-auto{margin-left:auto}
.me-1{margin-right:.25rem}.me-2{margin-right:.5rem}.me-3{margin-right:1rem}.me-auto{margin-right:auto}

.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:1rem}.p-4{padding:1.5rem}.p-5{padding:2rem}
.pt-2{padding-top:.5rem}.pt-3{padding-top:1rem}.pt-4{padding-top:1.5rem}
.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:1rem}.pb-4{padding-bottom:1.5rem}
.ps-2{padding-left:.5rem}.ps-3{padding-left:1rem}
.pe-2{padding-right:.5rem}.pe-3{padding-right:1rem}
.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:1rem;padding-right:1rem}.px-4{padding-left:1.5rem;padding-right:1.5rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:1rem;padding-bottom:1rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}

/* text-* utilities defined above with !important for th specificity */
.text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}
.text-decoration-none{text-decoration:none;border-bottom:0}
.text-nowrap{white-space:nowrap}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fw-500{font-weight:500}.fw-600{font-weight:500}

.w-100{width:100%}.w-50{width:50%}.w-auto{width:auto}
.h-100{height:100%}
.border-0{border:0 !important}
.border-top{border-top:1px solid var(--hair)}
.border-bottom{border-bottom:1px solid var(--hair)}

.bg-transparent{background:transparent}
.bg-success{background:var(--forest) !important;color:#fff}
.bg-info{background:var(--indigo) !important;color:#fff}
.bg-warning{background:var(--sienna-deep) !important;color:#fff}
.bg-danger{background:var(--oxblood) !important;color:#fff}
.bg-secondary{background:var(--paper-tint) !important;color:var(--muted)}
.bg-primary{background:var(--sienna) !important;color:var(--paper)}
.bg-dark{background:var(--ink) !important;color:var(--paper)}
.bg-light{background:var(--paper-tint) !important;color:var(--ink)}

/* Progress bar (auctions win-rate, etc.) — sienna fill on cream paper. */
.progress{display:block;width:100%;height:6px;background:var(--paper-tint);border:1px solid var(--hair);border-radius:0;overflow:hidden}
.progress-bar{height:100%;background:var(--sienna);transition:width .3s ease}
.progress-bar.bg-success{background:var(--forest) !important}
.progress-bar.bg-danger{background:var(--oxblood) !important}
.progress-bar.bg-warning{background:var(--sienna-deep) !important}

/* Editorial iconbox — uniform sienna-tint accent for all stat tiles
   instead of per-category color stops (old Blueprint Dusk had
   green/blue/red iconboxes which fight the single-accent rule). */
.iconbox{
  width:34px;height:34px;flex-shrink:0;
  background:var(--sienna-wash);border:1px solid var(--sienna-tint);
  border-radius:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-variation-settings:'opsz' 14;
  font-size:14px;color:var(--sienna-deep);font-weight:500;
}

/* ── List group (admin sidebar mini-lists) ───────────────── */

.list-group{display:flex;flex-direction:column;border:1px solid var(--hair);background:transparent}
.list-group-item{
  background:transparent;border-bottom:1px solid var(--hair);
  color:var(--ink);padding:.55rem .85rem;
  font-family:var(--font-mono);font-size:12px;
  display:flex;justify-content:space-between;gap:.5rem;
  border-radius:0;text-decoration:none;border-left:0;border-right:0;
  transition:background .1s;
}
.list-group-item:last-child{border-bottom:0}
.list-group-item.bg-transparent{background:transparent;color:var(--ink-soft)}
.list-group-item:hover{background:var(--paper-tint);color:var(--ink)}

/* ── uPlot chart theming overrides ───────────────────────── */

.uplot{font-family:var(--font-mono) !important}
.uplot .u-title{font-family:var(--font-mono);font-size:10px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
.uplot .u-legend{font-family:var(--font-mono);font-size:11px;color:var(--ink)}
.uplot .u-legend .u-label{color:var(--muted)}
.uplot .u-legend .u-value{color:var(--ink);font-weight:500}
.uplot .u-axis{font-family:var(--font-mono);font-size:10px;color:var(--muted)}
.u-tooltip{
  background:var(--paper-elev) !important;
  border:1px solid var(--hair-strong) !important;
  color:var(--ink) !important;border-radius:0 !important;
  font-family:var(--font-mono) !important;font-size:11px !important;
  padding:.4rem .65rem !important;
}

/* ── Login (standalone view) ─────────────────────────────── */

.login-shell{
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;width:100%;
  /* Solid paper with one thematic ornament: a faint revenue trace —
     the same daily-earnings curve the dashboard draws — crossing the
     page behind the card, with brand-square markers on data points.
     Adtech identity, editorial restraint: ~20% sienna stroke on cream
     reads as a watermark, not as a chart. */
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900'%3E%3Cpath d='M0,620 L120,585 L240,600 L360,540 L480,560 L600,480 L720,500 L840,430 L960,450 L1080,380 L1200,395 L1320,330 L1440,300 L1440,900 L0,900 Z' fill='%23C66B30' opacity='0.045'/%3E%3Cpath d='M0,620 L120,585 L240,600 L360,540 L480,560 L600,480 L720,500 L840,430 L960,450 L1080,380 L1200,395 L1320,330 L1440,300' fill='none' stroke='%23C66B30' stroke-width='1.5' opacity='0.22'/%3E%3Crect x='357' y='537' width='7' height='7' fill='%23C66B30' opacity='0.35'/%3E%3Crect x='717' y='497' width='7' height='7' fill='%23C66B30' opacity='0.35'/%3E%3Crect x='1077' y='377' width='7' height='7' fill='%23C66B30' opacity='0.35'/%3E%3Crect x='1317' y='327' width='7' height='7' fill='%23C66B30' opacity='0.45'/%3E%3C/svg%3E");
  background-size:cover;background-position:center;background-repeat:no-repeat;
  padding:2rem;
}
.login-card{
  width:100%;max-width:380px;
  background:var(--paper-elev);
  border:1px solid var(--hair);
  border-top:2px solid var(--sienna);
  padding:2.2rem 2.4rem 2rem;
}
.login-card .brand{font-family:var(--font-display);font-variation-settings:'opsz' 36;font-size:1.4rem;color:var(--ink);font-weight:500;letter-spacing:-.01em;text-align:center}
.login-card .brand::before{content:'';display:inline-block;width:6px;height:6px;background:var(--sienna);margin-right:.55rem;vertical-align:3px}
/* Invisible mirror of the ::before square — balances the brand line so
   the word itself (not square+word) sits on the card's true centre,
   flush with the CUSTOMER PORTAL sub below. */
.login-card .brand::after{content:'';display:inline-block;width:6px;height:6px;margin-left:.55rem;visibility:hidden}
/* padding-left compensates the trailing letter-space after the last
   glyph, which otherwise drags centred tracked text left of centre. */
.login-card .sub{font-family:var(--font-mono);font-size:10px;color:var(--muted);letter-spacing:.16em;text-transform:uppercase;margin-top:.2rem;text-align:center;padding-left:.16em}
.login-card form{margin-top:1.8rem}
.login-card form .field+.field{margin-top:1rem}
.login-card form button{width:100%;margin-top:1.4rem}
.login-card .err{color:var(--oxblood);font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;margin-top:1rem;padding:.5rem .7rem;border:1px solid var(--oxblood);background:var(--oxblood-tint)}

/* Bootstrap-icons removed under Editorial Ledger. Decorative <i class="bi …">
   nodes collapse rather than rendering as glyph-name text. */
i.bi,.bi{display:none}

/* ── HTMX state ──────────────────────────────────────────── */

.htmx-request{opacity:.6;transition:opacity .15s}

/* ── Print styles — editorial conceit ────────────────────── */

@media print{
  body{background:#fff;color:#000;display:block}
  #sidebar,.topbar,.lens-switch,.btn,.pagination{display:none !important}
  #content{overflow:visible}
  .card{break-inside:avoid;border-color:#666}
}

/* ── Reduced motion ──────────────────────────────────────── */

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