/* ===========================================================================
   Tracker — dark admin panel.

   Numbers are set in a monospace with tabular figures, so digits line up
   column to column and an anomaly is visible by shape before you read it.
   Colour means direction, not decoration: green is money in, red is money out,
   white is what you kept. Nothing else is coloured, so a red cell always means
   the same thing.

   No webfonts, no icon font, no CDN. The panel loads even when nothing else does.
   =========================================================================== */

:root {
  --bg:      #0e1116;   /* page */
  --rail:    #0a0d12;   /* sidebar, one step darker than the page */
  --panel:   #161b22;   /* cards, tables */
  --panel-2: #1b212a;   /* hover */
  --line:    #242b35;
  --line-2:  #333c48;

  --text:    #e4e8ee;
  --dim:     #8a94a3;
  --faint:   #5b6572;

  --accent:  #5b8cff;
  --in:      #3fb87a;   /* revenue */
  --out:     #e5674b;   /* payout  */

  --sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --rail-w: 232px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ic { width: 18px; height: 18px; flex: 0 0 18px; }

/* --- frame --------------------------------------------------------------- */

.frame { display: flex; min-height: 100vh; }
.body  { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* --- sidebar ------------------------------------------------------------- */

.rail {
  width: var(--rail-w);
  flex: 0 0 var(--rail-w);
  background: var(--rail);
  border-right: 1px solid var(--line);
  padding-bottom: 40px;
  overflow-y: auto;
}

.mark {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 18px;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.mark-dot {
  width: 9px; height: 9px;
  background: var(--accent);
  transform: rotate(45deg);
}

.mark-word {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.menu { padding: 10px 8px; }

.grp {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 5px;
  color: var(--dim);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.grp::-webkit-details-marker { display: none; }
.grp:hover { color: var(--text); background: var(--panel); }

.grp-flat { text-decoration: none; }
.grp-flat.on { color: var(--text); background: var(--panel); box-shadow: inset 2px 0 0 var(--accent); }

.caret {
  width: 14px; height: 14px;
  margin-left: auto;
  color: var(--faint);
  transition: transform 0.12s ease;
}

.grp-wrap[open] > .grp { color: var(--text); }
.grp-wrap[open] .caret { transform: rotate(90deg); }

.sub {
  list-style: none;
  margin: 2px 0 6px;
  padding: 0 0 0 27px;   /* aligns text under the icon's label, not the icon */
  border-left: 1px solid var(--line);
  margin-left: 19px;
}

.sub-link {
  display: block;
  padding: 5px 10px;
  border-radius: 4px;
  color: var(--faint);
  text-decoration: none;
  font-size: 13px;
}

.sub-link:hover { color: var(--text); background: var(--panel); }
.sub-link.on    { color: var(--accent); font-weight: 500; }

/* --- topbar -------------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 24px;
  background: var(--rail);
  border-bottom: 1px solid var(--line);
}

.spacer { flex: 1; }

.burger {
  display: none;
  width: 34px; height: 32px;
  align-items: center; justify-content: center;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  color: var(--text);
  cursor: pointer;
}
.burger svg { width: 18px; height: 18px; }

.account { display: flex; align-items: center; gap: 10px; }
.who { font-size: 14px; font-weight: 500; }

.tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  padding: 2px 6px;
}

.tag-root { color: var(--accent); border-color: var(--accent); }
.inline { display: inline; }

/* --- main ---------------------------------------------------------------- */

.main { padding: 28px 24px 72px; max-width: 1280px; }

.head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.eyebrow {
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}

.h1 { margin: 0; font-size: 25px; font-weight: 600; letter-spacing: -0.02em; }
.h2 { margin: 0; font-size: 16px; font-weight: 600; }

.daypick { display: flex; align-items: center; gap: 8px; }
.daypick .label { margin: 0; }
.input-date { width: auto; font-family: var(--mono); font-size: 13px; color-scheme: dark; }

/* --- KPI cards ----------------------------------------------------------- */

.tape {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 30px;
}

.tick {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 16px 16px;
}

.tick-k {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.tick-v {
  margin: 0;
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tick-u { font-size: 14px; color: var(--faint); }

.tick-in  .tick-v { color: var(--in); }
.tick-out .tick-v { color: var(--out); }

/* Profit is the only number that decides anything, so it gets the emphasis. */
.tick-net { border-color: var(--line-2); background: var(--panel-2); }
.tick-net .tick-v { color: #fff; }

/* --- blocks -------------------------------------------------------------- */

.block { margin-bottom: 34px; }

.block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.block-sub { margin: 0; font-family: var(--mono); font-size: 11px; color: var(--faint); }

/* --- table --------------------------------------------------------------- */

.grid-wrap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow-x: auto;   /* scroll wide tables horizontally */
}

.grid { width: 100%; border-collapse: collapse; }

.grid th, .grid td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.grid thead th {
  background: var(--rail);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

.grid tbody tr:hover { background: var(--panel-2); }
.grid .r { text-align: right; }

.num {
  font-family: var(--mono);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.in  { color: var(--in); }
.out { color: var(--out); }
.net { color: #fff; font-weight: 600; }
.dim { color: var(--dim); }

.name { font-weight: 500; font-size: 14px; }
.name-t { display: block; }
.name-id { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--faint); }

.links a {
  font-size: 12.5px;
  color: var(--accent);
  text-decoration: none;
  margin-left: 12px;
  white-space: nowrap;
}
.links a:hover { text-decoration: underline; }

.grid tfoot th, .grid tfoot td {
  border-top: 1px solid var(--line-2);
  border-bottom: 0;
  background: var(--rail);
  font-weight: 600;
}

/* --- activity ------------------------------------------------------------ */

.log { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: 12.5px; }

.log-row {
  display: grid;
  grid-template-columns: 165px 150px 1fr;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.log-t   { color: var(--faint); }
.log-who { color: var(--text); }
.log-a   { color: var(--dim); }

/* --- empty --------------------------------------------------------------- */

.void {
  padding: 52px 24px;
  text-align: center;
  background: var(--panel);
  border: 1px dashed var(--line-2);
  border-radius: 6px;
}

.void-h { margin: 0 0 6px; font-weight: 600; }
.void-p { margin: 0; color: var(--dim); font-size: 14px; }

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

.stack { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }

.label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  background: #0b0e13;
  color: var(--text);
  font: inherit;
  /* Render native date/time/month pickers and their calendar icon in dark mode,
     so the text and icon stay visible on the dark background (Safari/macOS
     otherwise draws them dark-on-dark). */
  color-scheme: dark;
}

.input:focus-visible { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(91,140,255,0.18); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.btn-solid { background: var(--accent); color: #08090c; font-weight: 600; }
.btn-solid:hover { filter: brightness(1.12); }

.btn-ghost { border-color: var(--line-2); color: var(--text); }
.btn-ghost:hover { background: var(--panel); border-color: var(--dim); }

.btn-wide { width: 100%; height: 42px; }

.flash {
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1px solid;
  border-radius: 5px;
  font-size: 14px;
}

.flash-bad { border-color: rgba(229,103,75,0.4); background: rgba(229,103,75,0.09); color: var(--out); }
.flash-ok  { border-color: rgba(63,184,122,0.4); background: rgba(63,184,122,0.09); color: var(--in); }

/* --- sign in ------------------------------------------------------------- */

.gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.gate-panel {
  width: 100%;
  max-width: 370px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 32px;
}

.gate-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 26px; }
.gate-h { margin: 0 0 22px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }

.gate-note {
  margin: 20px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--faint);
}

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

@media (max-width: 900px) {
  .rail {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 20;
    transform: translateX(-100%);
    transition: transform 0.18s ease;
  }
  .rail-open .rail { transform: none; }
  .burger { display: inline-flex; }
  .main { padding: 20px 16px 60px; }
  .head { flex-direction: column; align-items: stretch; }
  .log-row { grid-template-columns: 1fr; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}

/* ===========================================================================
   DataTable: toolbar, sortable headers, pager.
   =========================================================================== */

.dt-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.dt-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  white-space: nowrap;
}

.dt-search { display: flex; gap: 6px; margin-left: auto; }
.dt-exports { display: flex; gap: 6px; }

.input-sm { height: 30px; padding: 0 10px; font-size: 13px; width: 190px; }
.btn-sm   { height: 30px; padding: 0 11px; font-size: 12.5px; }

/* Sortable header. The arrow tells you which column ordered the data — without
   it, a sorted table and an unsorted one look identical. */
.th-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}

.th-sort:hover { color: var(--text); }
.th-sort.on    { color: var(--accent); }
.th-arrow      { font-size: 10px; }

.lk { color: var(--accent); text-decoration: none; font-size: 12.5px; }
.lk:hover { text-decoration: underline; }

/* --- pager --------------------------------------------------------------- */

.pager {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12.5px;
}

.pg {
  min-width: 32px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  color: var(--dim);
  text-decoration: none;
}

.pg:hover { color: var(--text); border-color: var(--line-2); }

.pg.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #08090c;
  font-weight: 600;
}

.pg.off { opacity: 0.35; pointer-events: none; }
.pg-gap { color: var(--faint); padding: 0 2px; }

@media (max-width: 700px) {
  .dt-bar { flex-wrap: wrap; }
  .dt-search { margin-left: 0; width: 100%; }
  .input-sm { flex: 1; width: auto; }
}

/* ===========================================================================
   Forms and status pills.
   =========================================================================== */

.form-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 560px;
  padding: 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.label.sub { margin-top: 10px; }

.field.bad .input { border-color: var(--out); }

/* Field errors are red, but hints are grey — a hint styled like an error trains
   people to ignore red, which is how real errors get missed. */
.fe { margin: 0; font-size: 13px; color: var(--out); }
.fh { margin: 0; font-size: 12.5px; color: var(--faint); line-height: 1.5; }

.form-actions {
  display: flex;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

select.input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%),
                    linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position: calc(100% - 16px) 17px, calc(100% - 11px) 17px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

/* --- status pills -------------------------------------------------------- */

.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid;
  white-space: nowrap;
}

.pill-ok   { color: var(--in);     border-color: rgba(63,184,122,0.45); }
.pill-bad  { color: var(--out);    border-color: rgba(229,103,75,0.45); }
.pill-warn { color: #d9a441;       border-color: rgba(217,164,65,0.45); }

/* A button that reads as a link. It is a real <button> inside a real <form>,
   because changing a user's status is a POST with a CSRF token — not a GET link
   that any page could trigger by loading an image. */
.linkbtn {
  background: none;
  border: 0;
  padding: 0;
  margin-left: 8px;
  font: inherit;
  font-size: 12.5px;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
}

.linkbtn:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .row2 { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Manager-assignment: inline dropdown + save button per row.
   =========================================================================== */

.assign-form { display: flex; gap: 6px; align-items: center; }

.input-mini {
  height: 30px;
  padding: 0 8px;
  font-size: 13px;
  width: auto;
  max-width: 190px;
}

/* ===========================================================================
   Advertiser form grid + detail view + approvals.
   =========================================================================== */

.form-wide { max-width: 900px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field-wide { grid-column: 1 / -1; }

/* --- detail table -------------------------------------------------------- */

.detail-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.detail { width: 100%; border-collapse: collapse; }

.detail th, .detail td {
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  vertical-align: top;
}

.detail tr:last-child th, .detail tr:last-child td { border-bottom: 0; }

.detail th {
  width: 190px;
  color: var(--faint);
  font-weight: 500;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- approvals ----------------------------------------------------------- */

.approve-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.approve-col {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px;
}

.multi { height: auto; padding: 6px; font-family: var(--sans); }
.multi option { padding: 4px 6px; }

@media (max-width: 700px) {
  .form-grid, .approve-grid { grid-template-columns: 1fr; }
  .detail th { width: 130px; }
}

/* ===========================================================================
   Advertiser detail: key/value table, wide form.
   =========================================================================== */

.form-wide { max-width: 760px; }

/* key/value detail table: label column tight, values roomy */
.grid.kv th[scope="row"] {
  width: 200px;
  color: var(--dim);
  font-weight: 500;
  background: var(--rail);
  font-family: var(--sans);
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}

.grid.kv td { font-size: 14px; }

select[multiple].input {
  height: auto;
  padding: 6px;
  background-image: none;   /* the dropdown-arrow bg makes no sense on a listbox */
}

select[multiple].input option { padding: 4px 6px; }

/* "Login as" — a POST button styled like the inline .lk links beside it. */
.lk-btn {
  background: none;
  border: 0;
  padding: 0;
  margin-left: 12px;
  font: inherit;
  font-size: 12.5px;
  color: var(--accent);
  cursor: pointer;
}
.lk-btn:hover { text-decoration: underline; }

/* Offer pages: readonly link boxes, wrapping detail cells. */
textarea.input.mono {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
}
.grid td.wrap { white-space: normal; word-break: break-word; max-width: 520px; }

/* Banner creative uploads. */
.uploads { display: flex; flex-direction: column; gap: 8px; }

.upl {
  display: grid;
  grid-template-columns: 74px 1fr auto auto;
  gap: 10px;
  align-items: center;
}

.upl-size {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 0.02em;
}

.input-file { height: 32px; padding: 5px 8px; font-size: 12.5px; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; }

.upl-msg { font-size: 12px; color: var(--faint); min-width: 90px; }
.upl-msg.ok  { color: var(--in); }
.upl-msg.bad { color: var(--out); }

@media (max-width: 700px) {
  .upl { grid-template-columns: 1fr; gap: 6px; }
}

/* Report range picker. */
.range-bar {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin: 0 0 6px;
}
.range-tabs { display: flex; gap: 2px; background: var(--panel); padding: 3px; border-radius: 8px; }
.dim-tabs   { display: flex; gap: 2px; background: var(--panel); padding: 3px; border-radius: 8px;
              margin-bottom: 10px; width: fit-content; }
.range-tab {
  display: inline-block; padding: 6px 12px; border-radius: 6px;
  font-size: 12.5px; color: var(--dim); text-decoration: none; white-space: nowrap;
}
.range-tab:hover { color: var(--fg); background: rgba(255,255,255,0.04); }
.range-tab.on    { color: var(--fg); background: var(--rail); box-shadow: inset 0 0 0 1px var(--line); }
.range-custom { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.range-custom .input { width: auto; height: 32px; padding: 4px 8px; font-size: 12.5px; }
.range-note { font-size: 12.5px; color: var(--faint); margin: 0 0 14px; }
@media (max-width: 800px) {
  .range-custom { margin-left: 0; }
  .range-tabs   { overflow-x: auto; }
}

/* Conversion charts. */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}
.chart-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
}
.chart-title { font-size: 13px; color: var(--dim); margin: 0 0 12px; font-weight: 600; }
.conv-chart { width: 100%; height: auto; }
.conv-lab { fill: var(--faint); font-size: 12px; }
.conv-val { fill: white;    font-size: 12px; font-variant-numeric: tabular-nums; }
.conv-bar { fill: var(--accent); opacity: 0.85; }
.conv-bar:hover { opacity: 1; }

/* Report filter bar. */
.filter-bar { gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.filter-bar .input { width: auto; height: 34px; padding: 4px 10px; font-size: 13px; }
.filter-bar select.input { max-width: 240px; }
.table-scroll-x { overflow-x: visible; }

/* ---- Responsive collapsible columns ----------------------------------------
   Columns given a 'priority' (1 = drop first, 3 = drop last) collapse into an
   expandable child row when the viewport gets too narrow to show them. On a wide
   screen nothing collapses: the expander button and child rows stay hidden.
   Priority 0 / unset columns never collapse — they're always visible. */

.dt-expander-col, .dt-expander { width: 34px; text-align: center; padding: 0; }

/* Expander button hidden until at least one column actually collapses. */
.dt-toggle { display: none; }
.dt-child  { display: none; }
.dt-child[hidden] { display: none !important; }  /* hidden attr always wins */

.dt-toggle {
  width: 22px; height: 22px; border-radius: 5px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--fg);
  font-size: 15px; line-height: 1; padding: 0;
}
.dt-toggle::before { content: '+'; pointer-events: none; }
.dt-toggle.dt-on::before { content: '\2212'; }  /* minus when expanded */
.dt-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* Child row layout: label / value pairs. */
.dt-child > td { background: var(--panel-2, rgba(255,255,255,0.02)); }
.dt-child-list { margin: 0; padding: 10px 6px; display: flex; flex-direction: column; gap: 8px; }
.dt-child-item { display: flex; gap: 8px; align-items: baseline;
                 border-bottom: 1px solid var(--line); padding-bottom: 7px; }
.dt-child-item dt { color: var(--dim); font-size: 12px; min-width: 140px; font-weight: 600; flex-shrink: 0; }
.dt-child-item dd { margin: 0; font-size: 13px; word-break: break-word; }
/* By default every collapsible item is hidden in the child list; each breakpoint
   below reveals the ones whose column is currently hidden in the row. */
.dt-child-item { display: none; }

/* Breakpoints. Each step hides the next priority tier in the row AND shows the
   matching items in the child list, and turns the expander on. */
/* Collapse by screen width. Wide tables can still scroll horizontally; on
   narrower screens the lower-priority columns fold into the expand panel so you
   don't have to scroll as far. Each step hides the next tier and reveals the
   matching items in the panel. */
@media (max-width: 1500px) {
  th.dt-p1, td.dt-p1 { display: none; }
  .dt-toggle { display: inline-block; }
  .dt-child:not([hidden]) { display: table-row; }
  .dt-child-item.dt-p1 { display: flex; }
}
@media (max-width: 1150px) {
  th.dt-p2, td.dt-p2 { display: none; }
  .dt-child-item.dt-p2 { display: flex; }
}
@media (max-width: 850px) {
  th.dt-p3, td.dt-p3 { display: none; }
  .dt-child-item.dt-p3 { display: flex; }
}

/* Long-value columns get a width cap so they can't hog the row and force other
   columns to collapse early. The value truncates with an ellipsis in the cell;
   the full value is always visible in the expand panel and in exports. */
.grid td.dt-clip,
.grid td.dt-clip-lg {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Fixed widths so a long value (URL, user-agent) can't stretch the column and
   overlap its neighbours; the text truncates with an ellipsis instead. */
.grid td.dt-clip,    .grid th.dt-clip    { max-width: 160px; width: 160px; }
.grid td.dt-clip-lg, .grid th.dt-clip-lg { max-width: 300px; width: 300px; }
/* The inline span inside a clipped cell must not force its own width. */
.grid td.dt-clip span, .grid td.dt-clip-lg span { display: inline; }

/* ---- Invoice ---------------------------------------------------------------- */
.head-actions { display: flex; gap: 8px; }
.invoice {
  background: #fff; color: #1a1f28; max-width: 820px; margin: 0 auto;
  padding: 44px 48px; border-radius: 8px; border: 1px solid var(--line);
}
.inv-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 32px; }
.inv-brand { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; }
.inv-muted { color: #7a828e; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.inv-meta { text-align: right; font-size: 13px; }
.inv-meta > div { margin-bottom: 3px; }
.inv-meta span { color: #7a828e; margin-right: 10px; }
.inv-paid   { color: #1a9c5b; }
.inv-unpaid { color: #d1483a; }
.inv-billto { margin-bottom: 28px; }
.inv-billname { font-size: 16px; font-weight: 600; margin-top: 4px; }
.inv-billaddr { font-size: 13px; color: #47505c; line-height: 1.5; }
.inv-lines { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.inv-lines th { text-align: left; font-size: 12px; color: #7a828e; border-bottom: 2px solid #e6e8ec; padding: 8px 10px; }
.inv-lines td { padding: 10px; border-bottom: 1px solid #eef0f3; font-size: 14px; }
.inv-lines .r { text-align: right; }
.inv-lines tfoot td { border-bottom: none; padding: 6px 10px; }
.inv-total td { font-size: 17px; font-weight: 700; border-top: 2px solid #e6e8ec; padding-top: 12px; }
.inv-notes { margin-top: 24px; font-size: 13px; color: #47505c; }
.inv-notes > div:last-child { margin-top: 4px; }

@media print {
  .no-print, .sidebar, header.head, .dt-bar, .pager, footer, nav { display: none !important; }
  body, .main, .content { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  .invoice { border: none; border-radius: 0; max-width: none; margin: 0; padding: 0; }
}

/* Inline action forms in table cells. */
.inline-form { display: inline; margin: 0; }
.row-actions { display: flex; gap: 10px; }
.linkbtn-danger { color: var(--out); }
.linkbtn-danger:hover { color: #ff7a63; }

/* Fraud dashboard stat cards + mini tables. */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; padding-bottom:10px; }
.stat-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
.stat-n { font-size: 26px; font-weight: 700; line-height: 1; }
.stat-l { font-size: 12px; color: var(--dim); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.4px; }
.stat-bad  { color: var(--out); }
.stat-warn { color: #e0a23c; }
.mini-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mini-table td { padding: 6px 4px; border-bottom: 1px solid var(--line); }
.mini-table td.r { text-align: right; color: var(--dim); white-space: nowrap; }
.mini-table tr:last-child td { border-bottom: none; }
.block-title { font-size: 15px; margin: 0 0 12px; }

/* A truncated cell with a title tooltip hints it's hoverable. */
.grid td.dt-clip-lg [title], .grid td.dt-clip [title] { cursor: help; }

/* Invoice company header (logo + details). */
.inv-logo { height: 48px; width: auto; display: block; margin-bottom: 10px; }
.inv-co-addr { font-size: 12px; color: #47505c; line-height: 1.5; white-space: pre-line; }
.inv-co-line { font-size: 12px; color: #47505c; margin-top: 2px; }
@media print {
  .inv-logo { height: 44px; }
}

/* Invoice company name + payment details. */
.inv-co-name { font-size: 15px; font-weight: 700; margin-bottom: 2px; color: #1a1f28; }
.inv-pay { margin-top: 26px; border-top: 1px solid #e6e8ec; padding-top: 16px; }
.inv-pay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 8px; }
.inv-pay-block { font-size: 13px; }
.inv-pay-h { font-weight: 600; color: #1a1f28; margin-bottom: 3px; }
.inv-pay-b { color: #47505c; line-height: 1.5; white-space: pre-line; }

/* Definition list used on the view pages. */
.dl { margin: 0; }
.dl-row { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); }
.dl-row:last-child { border-bottom: none; }
.dl-row dt { color: var(--dim); font-size: 12px; min-width: 140px; flex-shrink: 0; font-weight: 600; }
.dl-row dd { margin: 0; font-size: 13px; word-break: break-word; }

/* Native date/time picker icon: keep it visible on the dark theme in WebKit
   (Safari/Chrome on macOS). color-scheme:dark handles most of it; this makes the
   little calendar/clock indicator clearly clickable and light. */
.input::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.4);
  opacity: 0.75;
  cursor: pointer;
}
.input::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.input::-webkit-datetime-edit,
.input::-webkit-datetime-edit-fields-wrapper { color: var(--text); }
/* Report tables: let the name column absorb leftover horizontal space so the
   table fills its container instead of leaving a gap on the right. */
/*.grid th.dt-grow, .grid td.dt-grow { width: 100%; }*/