/* ============================================================
   Operations page — the few pieces app.css does not already have.

   Everything else on /admin is borrowed: the shell and sidebar, the job cards and their status
   pills, the thumbnail strips, the skeletons, the empty/error state box, the lightbox and the
   modal backdrop. What is left is a filter bar, a summary strip, a table and a detail sheet —
   none of which exist anywhere else on the site, because nothing else on the site has a filter,
   a number to total, a table or a two-column dialog.

   1. Filter bar
   2. Summary strip
   3. Truncation banner
   4. Table
   5. Detail sheet
   6. Small screens
   ============================================================ */

.hidden{display:none !important}

/* ============================================================
   1. Filter bar
   ============================================================ */
.bar{display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--s2); margin-bottom:var(--s3)}

/* There is not a single input rule in base.css or app.css — this is the first form control on the
   site, so it borrows .btn--ghost's shape rather than inventing a look. */
.field{display:flex; flex-direction:column; gap:5px}
.field__label{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.field__input{
  font:inherit; font-size:14.5px; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:10px; padding:9px 12px; min-height:42px;
}
.field__input:hover{border-color:#E2D9DC}
/* Safari and Chrome both need this or a date input renders at its own intrinsic width. */
input.field__input[type=date]{min-width:148px}

.chips{display:flex; flex-wrap:wrap; gap:6px; align-self:flex-end}
.chip{
  font-size:13.5px; font-weight:600; color:var(--ink-2); background:#fff;
  border:1px solid var(--line); border-radius:999px; padding:8px 14px; line-height:1.2;
  transition:background-color .2s, color .2s, border-color .2s;
}
.chip:hover{background:var(--bg-2); color:var(--ink)}
.chip.is-on{background:var(--pink-tint); border-color:var(--pink-tint); color:var(--pink)}

.hint{color:var(--ink-3); font-size:13px; margin-bottom:var(--s3)}
.hint--bad{color:#B4392B}

/* A flow's heading above its grid. The icons are the same ones the product dashboard uses in its
   sidebar, so the two pages name the three flows identically. */
.flow__head{display:flex; align-items:center; gap:9px; font-size:15px; font-weight:700; margin-bottom:var(--s2)}
.flow__head .icon{width:19px; height:19px; color:var(--ink-3)}

/* ============================================================
   2. Summary strip
   ============================================================ */
.stats{display:grid; grid-template-columns:repeat(auto-fill, minmax(148px,1fr)); gap:var(--s2); margin-bottom:var(--s3)}
.stat{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:12px 14px}
.stat__n{font-size:21px; font-weight:700; letter-spacing:-.02em; line-height:1.25}
.stat__k{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin-top:2px}
.stat__sub{font-size:12px; color:var(--ink-2); margin-top:4px}

/* ============================================================
   3. Truncation banner

   .notice exists but is error-coloured and there is no neutral variant, so "showing 250 of 412"
   gets its own amber one rather than borrowing red for something that is not wrong.
   ============================================================ */
.banner{
  background:#FFF8EC; border:1px solid #F0DDBB; color:#7A5418;
  border-radius:var(--r); padding:11px 14px; font-size:13.5px; margin-bottom:var(--s3);
}

/* ============================================================
   4. Table

   Re-scoped from legal.css, which has the only table styles on the site — gated pages do not load
   that stylesheet. The wrapper scrolls rather than the page: a nine-column table cannot be made to
   fit a phone, and squeezing it is worse than swiping it.
   ============================================================ */
.tbl__wrap{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow-x:auto; box-shadow:var(--shadow-sm)}
.tbl{width:100%; border-collapse:collapse; font-size:13.5px; min-width:840px}
.tbl th,.tbl td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap}
.tbl thead th{
  color:var(--ink-3); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer; user-select:none; background:var(--bg-2); position:sticky; top:0;
}
.tbl thead th:hover{color:var(--ink-2)}
.tbl thead th[aria-sort] .tbl__sort{color:var(--pink)}
.tbl__sort{margin-left:5px; font-size:10px}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--bg-2)}
.tbl__who{white-space:normal; min-width:190px}
.tbl__sub{color:var(--ink-3); font-size:12px}
.tbl__dim{color:var(--ink-3)}
.tbl__flag{color:#B4392B; font-weight:600}

/* ============================================================
   5. Detail sheet

   Sits on the existing .modal backdrop, but .modal__box caps at 460px — far too narrow for photos
   beside their facts — so the box is its own.
   ============================================================ */
.det__box{
  background:#fff; border-radius:var(--r-xl); width:min(1120px, 100%); max-height:92vh;
  display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow-md);
}
.det__head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  padding:16px 18px; border-bottom:1px solid var(--line); flex:none;
}
.det__head h2{font-size:18px; font-weight:700; letter-spacing:-.018em}
.det__cols{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); min-height:0; flex:1}
.det__left{padding:18px; overflow-y:auto; border-right:1px solid var(--line)}
.det__right{padding:18px; overflow-y:auto; background:var(--bg-2)}

.det__hero{width:100%; border-radius:var(--r); background:var(--bg-2); cursor:zoom-in}
.det__cap{color:var(--ink-3); font-size:12.5px; margin-top:8px}
.det__label{
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); margin:var(--s3) 0 8px;
}
.det__left .det__label:first-child{margin-top:0}
.det__strip{display:flex; flex-wrap:wrap; gap:7px}
.det__strip button{
  width:62px; height:62px; border-radius:10px; overflow:hidden; padding:0;
  border:2px solid transparent; background:var(--bg-2); transition:border-color .2s, transform .2s;
}
.det__strip button:hover{border-color:var(--pink); transform:translateY(-2px)}
.det__strip button.is-on{border-color:var(--pink)}
.det__strip img{width:100%; height:100%; object-fit:cover}
.det__none{color:var(--ink-3); font-size:13px}

.det__sec{margin-bottom:var(--s3)}
.det__sec:last-child{margin-bottom:0}
.det__dl{display:grid; grid-template-columns:minmax(96px, auto) minmax(0,1fr); gap:5px 12px; margin:0; font-size:13.5px}
.det__dl dt{color:var(--ink-3)}
.det__dl dd{margin:0; overflow-wrap:anywhere}
.det__dl code{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px; background:#fff; border:1px solid var(--line); border-radius:6px; padding:1px 5px}
.det__flag{color:#B4392B; font-weight:600}
.det__copy{cursor:copy}

/* ============================================================
   6. Email campaign

   Same tokens and the same tile shape as the day stats above — this is another view of the same
   dashboard, not a second product. The preview frame is the one thing here with a fixed height:
   the email inside it is a full document with its own styling, and letting it size itself would
   mean either a scrollbar inside a scrollbar or a page that jumps every time a preview is taken.
   ============================================================ */
.em__stats{display:grid; grid-template-columns:repeat(auto-fill, minmax(148px,1fr)); gap:var(--s2); margin-bottom:var(--s3)}
.em__stat{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; display:flex; flex-direction:column}
.em__stat-value{font-size:21px; font-weight:700; letter-spacing:-.02em; line-height:1.25}
.em__stat-label{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin-top:2px}

.em__bar{display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; margin-bottom:var(--s3)}

.em__progress{margin-bottom:var(--s3)}
.em__progress-track{height:8px; border-radius:999px; background:var(--bg-2); border:1px solid var(--line); overflow:hidden}
.em__progress-fill{height:100%; width:0; background:var(--pink); transition:width .3s var(--ease)}
.em__progress-label{margin:8px 0 0; font-size:13px; color:var(--ink-2)}

.em__log{margin:0 0 var(--s3); font-size:13.5px; color:var(--ink-2); min-height:20px}
.em__log--bad{color:#B4392B}

.em__preview{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.em__preview-subject{margin:0; padding:12px 16px; border-bottom:1px solid var(--line); font-size:14px; font-weight:600; background:var(--bg-2)}
.em__frame{display:block; width:100%; height:640px; border:0; background:#fff}

@media (max-width:520px){
  .em__frame{height:460px}
  .em__bar .btn{flex:1 1 auto}
}

/* ============================================================
   7. Small screens
   ============================================================ */
@media (max-width:900px){
  .det__cols{grid-template-columns:1fr}
  .det__left{border-right:0; border-bottom:1px solid var(--line)}
}
@media (max-width:520px){
  .bar{gap:var(--s1) var(--s2)}
  .stats, .em__stats{grid-template-columns:repeat(auto-fill, minmax(128px,1fr))}
  .det__strip button{width:52px; height:52px}
}

/* ============================================================
   8. Pager and toast

   Shared with the Business dashboard, which loads this stylesheet too (see ui.js).
   ============================================================ */
.pager{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:var(--s3)}
.pager:empty{display:none}
.pager__n{
  min-width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:#fff;
  font-weight:600; font-size:14px; color:var(--ink-2);
}
.pager__n.is-on{background:var(--pink-tint); border-color:var(--pink-tint); color:var(--pink)}
.pager__info{color:var(--ink-3); font-size:13px; margin-left:auto}

.toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%, 20px); opacity:0; pointer-events:none; z-index:120;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:12px; font-size:14px; box-shadow:var(--shadow-md);
  max-width:calc(100vw - 32px); transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.toast.is-on{opacity:1; transform:translate(-50%, 0)}

/* ============================================================
   9. Business section (#/biz — admin-biz.js)

   Built from the pieces above: the same stat tiles, table, chips, banner and detail sheet. What is
   new is an account header card, a gallery grid, and the one dialog every control goes through.
   ============================================================ */
/* .pill floats over a job card's photo in app.css; in a table or a header it sits in the text. */
#bizPane .pill, #det .pill{position:static; box-shadow:none; background:var(--bg-2); padding:5px 9px; font-size:11px; white-space:nowrap}

.stat--bad{border-color:#F3D6D1; background:#FFF6F4}
.stat--bad .stat__n{color:#B4392B}
.banner--info{background:var(--bg-2); border-color:var(--line); color:var(--ink-2)}
.banner a{color:inherit; font-weight:700; text-decoration:underline}

.bz__h{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s2); margin:var(--s4) 0 var(--s2)}
.bz__h h2{font-size:15px; font-weight:700; letter-spacing:-.01em}
.bz__h a{font-size:13px; font-weight:600; color:var(--pink-dark)}
.bz__grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:0 var(--s3)}
.bz__empty{color:var(--ink-3); font-size:13.5px; padding:14px 16px; background:#fff; border:1px dashed var(--line); border-radius:var(--r)}
.bz__wrap{white-space:normal !important; min-width:180px; max-width:340px; overflow-wrap:anywhere}
.bz__pos{color:#2E7D4F; font-weight:600}
.bz__neg{color:#B4392B; font-weight:600}
.tbl--narrow{min-width:0}
.tbl tr.is-link{cursor:pointer}
.tbl code{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; background:var(--bg-2); border-radius:6px; padding:2px 6px}
.tbl a{color:var(--pink-dark); font-weight:600}

.bz__search input{min-width:220px}
.bz__tabs{margin:var(--s3) 0 var(--s2)}
.bz__tabs a.chip{text-decoration:none}

/* The account header: who it is, its key, and the four controls. */
.bz__card{
  display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:var(--s3);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s3); box-shadow:var(--shadow-sm);
}
.bz__who{display:flex; gap:var(--s2); min-width:0; flex:1 1 360px}
.bz__who .side__avatar{width:48px; height:48px; font-size:18px}
.bz__who > div{min-width:0; display:grid; gap:4px}
.bz__who .tbl__sub a{color:var(--pink-dark); font-weight:600}
.bz__who code{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; background:var(--bg-2); border-radius:6px; padding:1px 6px}
.bz__name{font-size:18px; font-weight:700; letter-spacing:-.015em; display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.bz__actions{display:flex; flex-wrap:wrap; gap:8px}

/* Small thumbnails in a table cell or the detail sheet; each opens the lightbox. */
.bz__thumbs{display:flex; gap:4px}
.bz__thumbs button{width:38px; height:38px; padding:0; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:var(--bg-2)}
.bz__thumbs button:hover{border-color:var(--pink)}
.bz__thumbs img{width:100%; height:100%; object-fit:cover}
.det__left .bz__thumbs{flex-wrap:wrap; gap:7px}
.det__left .bz__thumbs button{width:62px; height:62px; border-radius:10px}
.bz__stuckbtn{margin-top:var(--s3)}

.bz__gallery{display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:var(--s2)}
.bz__gallery figure{margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm)}
.bz__gallery figure > button{display:block; width:100%; aspect-ratio:1; padding:0; border:0; background:var(--bg-2); cursor:zoom-in}
.bz__gallery img{width:100%; height:100%; object-fit:cover; display:block}
.bz__gallery figcaption{display:grid; gap:2px; padding:8px 10px; font-size:12.5px; cursor:pointer}
.bz__gallery figcaption strong{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bz__gallery figcaption span{color:var(--ink-3)}
.bz__gallery figcaption .btn{margin-top:6px; justify-self:start}
.bz__noimg{aspect-ratio:1; display:grid; place-items:center; color:var(--ink-3); font-size:13px; background:var(--bg-2)}

/* The one dialog for every control. Wider than .modal__box's 460px for the longer explanations. */
.bz__act{max-width:520px; display:grid; gap:var(--s2)}
.bz__act h2{font-size:19px}
.bz__acttext{color:var(--ink-2); font-size:14px; line-height:1.55; margin:0}
.bz__act textarea.field__input{resize:vertical; min-height:74px}
#bizActFields{display:grid; gap:var(--s2)}
#bizActFields:empty{display:none}
.bz__actbtns{display:flex; justify-content:flex-end; gap:8px; margin-top:4px}

@media (max-width:520px){
  .bz__search input{min-width:0; width:100%}
  .bz__search{flex:1 1 100%}
  .bz__actions .btn{flex:1 1 auto}
  .bz__gallery{grid-template-columns:repeat(auto-fill, minmax(140px, 1fr))}
  .bz__grid{grid-template-columns:1fr}
}