/* PACING'S OWN LAYER, ON TOP OF adtini.css. Only what the pacing pages add:
   the pacing states, the editable element table and the daily grid. Every
   colour is one of adtini's own tokens so the two tools read as one product. */

.flash{background:#EAF2FE;border-radius:10px;color:var(--navy);
  font-size:12.5px;font-weight:600;margin:0 0 14px;padding:10px 14px}
.empty{color:var(--muted);text-align:center;padding:28px 8px}
.note{max-width:none;padding-left:0}

/* ---- how a number is pacing -------------------------------------------- */
/* Over is the orange the dashboard already uses for "look at this", under is
   its red. On pace is green and deliberately quiet - most rows are fine and
   should not compete for attention. */
.pace{display:inline-flex;align-items:center;border-radius:999px;
  font-size:12px;font-weight:600;padding:4px 11px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.pace.on-pace{background:#D6F2E0;color:#17603A}
.pace.under{background:#FBE3E3;color:#B3261E}
.pace.over{background:#FBEBC2;color:#7A4C09}
.pace.unknown{background:var(--fill);color:var(--muted)}
.qtile .pace{font-size:20px;padding:2px 12px;margin-top:2px}
.qtile b.small{font-size:14px;word-break:break-all}

/* ---- overview ----------------------------------------------------------- */
/* Month pacing is the column the whole page is for, so it stays on screen:
   the table is trimmed to fit and the column is pinned to the right edge. */
/* Wide enough that the browser always offers horizontal scroll, so the
   pinned pacing column has somewhere to scroll out from over rather than
   permanently covering the column beneath it. */
table.overview{min-width:1620px}
table.overview th.pacecol,table.overview td.pacecol{position:sticky;right:0;
  background:var(--card);box-shadow:-6px 0 8px -6px rgba(16,40,70,.16)}
table.overview thead th.pacecol{background:var(--navy)}
table.overview tbody tr:hover td.pacecol{background:#FAFBFC}
/* One order is one line. A wrapped client name turns a scannable list into
   a ragged one, so the long ones clip and carry their full text as a title. */
table.overview td.clip{max-width:168px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
table.overview td.ordname{max-width:210px}
table.overview th,table.overview td{padding-left:7px;padding-right:7px}
table.overview td.ordname{color:var(--muted);max-width:280px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tag.type-impression{background:var(--blue)}
.tag.type-click{background:var(--gold);color:#3A2508}
.tag.type-event{background:#7E6BD6}
/* `form select` in adtini.css is width:100%, which stacked these down the
   page instead of sitting beside the search box. */
.controls .filtersel{flex:0 0 auto;width:auto;min-width:158px;
  border:1px solid var(--line);border-radius:12px;background:var(--card);
  font-family:inherit;font-size:13px;padding:12px 14px;color:var(--text)}
/* Same story: `form input[type=text]` wins over `.search input`, and took the
   room the magnifier sits in. */
.controls .search input{padding-left:40px;min-height:0}
.controls .btn-cat{flex:0 0 auto}
.endedbox{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  font-weight:500;color:var(--muted)}
.endedbox input{accent-color:var(--blue);width:15px;height:15px}

/* ---- the order's campaign elements -------------------------------------- */
.ordercard{margin-bottom:20px}
.orderterms{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:14px 18px;padding:18px 18px 20px;border-bottom:1px solid var(--line)}
.orderterms .f.wide{grid-column:1 / -1}
.orderterms label{font-size:12.5px;font-weight:600;margin-bottom:6px;display:block}
.orderterms input[type=text],.orderterms input[type=date],.orderterms select{
  width:100%;background:var(--fill);border:1px solid transparent;border-radius:10px;
  padding:10px 12px;font-family:inherit;font-size:13px;color:var(--text);min-height:41px}
.orderterms input:focus,.orderterms select:focus{outline:2px solid var(--blue-lt);
  outline-offset:-1px}
.pausebox{display:inline-flex;align-items:center;gap:8px;margin-top:26px}
.pausebox input{accent-color:var(--orange);width:16px;height:16px}

table.elements{min-width:1180px}
/* A cell the buyer types in and a cell the tool works out have to look
   different, or the sheet reads as if all of it were editable. */
table.elements td.ro{color:var(--text);font-variant-numeric:tabular-nums;
  background:#FAFBFC}
table.elements input{width:100%;min-width:82px;background:var(--fill);
  border:1px solid transparent;border-radius:8px;padding:7px 9px;
  font-family:inherit;font-size:12.5px;color:var(--text);
  font-variant-numeric:tabular-nums}
table.elements td.num input{text-align:right}
table.elements input:focus{outline:2px solid var(--blue-lt);outline-offset:-1px;
  background:var(--card)}
/* The name has to be readable, not truncated - two strategies the feed ships
   under one name are only told apart by the tail of the label. */
table.elements td.elname{min-width:320px}
table.elements td.elname input{min-width:300px}
table.elements td.elname input{text-align:left;font-weight:500}
table.elements tr.needssetup td.elname input{border-color:var(--gold)}
.setupflag{display:inline-block;margin-top:5px;background:#FBEBC2;color:#7A4C09;
  border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  padding:3px 9px;text-transform:uppercase}
table.elements tr.totalrow td{background:var(--fill);font-weight:600;
  border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.rowdel{width:44px;text-align:right}
.cardfoot{display:flex;justify-content:flex-end;gap:10px;padding:14px 18px}
.cardfoot .btn{border-radius:10px;padding:11px 22px}
.addrow{display:flex;gap:10px;align-items:center;margin:0 0 24px}
.addrow input{flex:0 1 320px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:11px 14px;font-family:inherit;font-size:13px}
.btn2.addprod{background:var(--card);border:1px solid var(--line);color:var(--navy);
  cursor:pointer;font-family:inherit;font-weight:600}

/* ---- daily grid --------------------------------------------------------- */
/* NOT `.grid`. adtini.css uses that class for the modal's two-column form
   layout, so a <table class="grid"> became display:grid and laid its thead
   and tbody out side by side - the header rendered and the rows went off the
   right edge of the page. */
.dailygrid{background:var(--card);box-shadow:0 1px 3px rgba(16,40,70,.08)}
.dailygrid > summary{padding:14px 18px;font-size:13.5px;color:var(--navy)}
.dailygrid > *:not(summary){margin:0}
table.daily{min-width:0;font-size:12px}
table.daily thead th{background:var(--navy);font-size:11px;padding:9px 7px;
  text-align:right;white-space:nowrap}
table.daily thead th:first-child{text-align:left}
table.daily td{padding:7px;font-variant-numeric:tabular-nums;white-space:nowrap}
/* The days that did not serve are the ones worth seeing, so the ones that did
   are what recedes. */
table.daily td.zero{color:#C6CCD4}
table.daily td.elname{position:sticky;left:0;background:var(--card);
  font-weight:500;min-width:210px;text-align:left}
table.daily tr.ontrack td{color:var(--muted);border-top:1px solid var(--line);
  font-style:italic}
table.daily tr.ontrack td.elname,table.daily tr:hover td.elname{background:var(--card)}

/* ---- data page ---------------------------------------------------------- */
.datacard{margin-bottom:24px}
.datarow{border-bottom:1px solid var(--line)}
.datarow:last-child{border-bottom:0}
.datarow form{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 18px}
.datarow h4{margin:0 0 3px;font-size:14px;font-weight:600}
.datarow .hint{margin:0;max-width:520px}
.datarow form > div:first-of-type{flex:1 1 320px}
.datarow .btn{margin-left:auto}
.datarow code{background:var(--fill);border-radius:5px;padding:1px 5px;
  font-size:11.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.forcebox{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.forcebox input{accent-color:var(--blue);width:15px;height:15px}
.datarow input[type=file]{font-family:inherit;font-size:12.5px;max-width:300px}

/* ---- login -------------------------------------------------------------- */
body.loginpage{padding-left:0;display:flex;align-items:center;justify-content:center;
  min-height:100vh}
.loginbox{background:var(--card);border-radius:14px;padding:30px 32px;width:340px;
  box-shadow:0 8px 30px rgba(11,36,64,.14)}
.loginbox h1{margin:0 0 20px;font-size:18px;font-weight:600;color:var(--navy)}
.loginbox label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px}
.loginbox input{width:100%;background:var(--fill);border:1px solid transparent;
  border-radius:10px;padding:11px 12px;font-family:inherit;font-size:13px;
  margin-bottom:16px}
.loginbox .btn{width:100%;border-radius:10px;padding:12px}

@media (max-width:820px){
  .orderterms{grid-template-columns:1fr 1fr}
  .datarow .btn{margin-left:0}
}

/* A figure the tool knows is incomplete says so where it is read, not in a
   footnote. */
/* Sits under the figure it qualifies, not beside it - beside it, the badge
   was as wide as the number and read as a second column. */
.partial{display:block;margin-top:3px;color:var(--muted);font-size:9.5px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:help}
.warnbar{background:#FBEBC2;border-radius:10px;color:#7A4C09;font-size:12.5px;
  margin:0 0 16px;padding:11px 15px}
.pager a{color:var(--blue);font-weight:600;text-decoration:none}
.pager a:hover{text-decoration:underline}

/* ---- daily delivery chart ----------------------------------------------- */
/* Colours live in chart.js, where the validator's output is recorded next to
   them. Nothing here assigns a series colour. */
.chartcard{margin-bottom:20px;padding:0 0 16px}
.charthead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:16px 18px 10px}
.charthead h3{margin:0;font-size:15px;font-weight:600}
.clegends{display:flex;flex-wrap:wrap;gap:8px 18px;padding:0 18px 12px}
.clegend{display:inline-flex;align-items:center;gap:7px;font-size:12px;
  color:var(--muted)}
.clegend i{width:11px;height:11px;border-radius:3px;flex:0 0 11px}
.chartbox{position:relative;padding:0 8px}
.chartbox svg{display:block;overflow:visible}
/* Grid and axes recede; the lines are what is read. */
.cgrid{stroke:#EDF0F3;stroke-width:1}
.caxis{fill:var(--muted);font-size:10.5px;font-family:inherit}
.cright{text-anchor:end}
.cmid{text-anchor:middle}
.cend{text-anchor:end}
.ctarget{stroke:var(--muted);stroke-width:1.5;stroke-dasharray:5 4;opacity:.7}
.chair{stroke:var(--navy);stroke-width:1;opacity:.35}
.ctip{position:absolute;top:8px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;box-shadow:0 6px 20px rgba(11,36,64,.16);padding:9px 11px;
  font-size:12px;pointer-events:none;min-width:190px;max-width:340px;z-index:5}
.ctip[hidden]{display:none}
.ctip b{display:block;margin-bottom:6px;font-size:11.5px;color:var(--navy)}
.ctiprow{display:flex;align-items:center;gap:8px;padding:2px 0}
.ctiprow i{width:9px;height:9px;border-radius:2px;flex:0 0 9px}
.ctiprow span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--text)}
.ctiprow em{font-style:normal;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--text)}
.strategytable{background:var(--card);box-shadow:0 1px 3px rgba(16,40,70,.08);
  margin-bottom:22px}
.strategytable > summary{padding:14px 18px;font-size:13.5px;color:var(--navy)}
.strategytable > *:not(summary){margin:0}
table.daily td.muted{color:var(--muted)}
.lockmark{margin-right:auto;background:#EAF2FE;color:var(--navy);border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.04em;padding:5px 11px;
  text-transform:uppercase}