/* ============================================================================
   RP2 REPORT — STAFF SURFACE POLISH  (staff.css) · load LAST, staff page only.
   ----------------------------------------------------------------------------
   Fixes the "trang nhân viên + tổng kết thương hiệu quá xấu" report:
     1. Content was a 640px column adrift in a ~1960px main area (huge dead
        margins over the loud wallpaper). The TODAY + KIỂM TRA dashboards now
        break out to a real dashboard width; forms stay a comfortable column.
     2. main_bg.png toned down (heavier overlay + soft glow) so content pops.
     3. Brand "tổng kết" cards → clean summary tiles: logo + name + status pill
        (top-right) + 3 mini-stats (number over label) on a divided footer.
   EVERYTHING is scoped under body[data-app="staff"] so leader.html / admin.html
   are untouched. GEOMETRY/SKIN ONLY — no logic, no JS hooks changed.
   ============================================================================ */

/* ---- 1. calmer background: heavier overlay + soft top glow, mesh barely there ---- */
body[data-app="staff"] {
  background-image:
    radial-gradient(1200px 700px at 84% -8%, rgba(96, 175, 255, .10), transparent 62%),
    linear-gradient(rgba(9, 13, 26, .90), rgba(8, 11, 22, .955)),
    url(assets/main_bg.png);
}

/* ---- 2. width: forms comfortable, the two brand dashboards break out wide ---- */
body[data-app="staff"] .app-main { padding: 26px clamp(16px, 3.2vw, 44px) 44px; }
/* reading/form views stay a comfortable column; data/grid views break out wide so the
   ~1700px main area next to the 224px sidebar is actually used (fix "dồn cục ở giữa"). */
body[data-app="staff"] .app-main .container { max-width: 1080px; }
body[data-app="staff"] .app-main .container:has(#brand-grid),
body[data-app="staff"] .app-main .container:has(#check-grid),
body[data-app="staff"] .app-main .container:has(#task-list),
body[data-app="staff"] .app-main .container:has(#rank-list),
body[data-app="staff"] .app-main .container:has(#res-list),
body[data-app="staff"] .app-main .container:has(#hist-list),
body[data-app="staff"] .app-main .container:has(#users-list) { max-width: 1320px; }
@media (min-width: 1680px) {
  body[data-app="staff"] .app-main .container { max-width: 1200px; }
  body[data-app="staff"] .app-main .container:has(#brand-grid),
  body[data-app="staff"] .app-main .container:has(#check-grid),
  body[data-app="staff"] .app-main .container:has(#task-list),
  body[data-app="staff"] .app-main .container:has(#rank-list),
  body[data-app="staff"] .app-main .container:has(#res-list),
  body[data-app="staff"] .app-main .container:has(#hist-list),
  body[data-app="staff"] .app-main .container:has(#users-list) { max-width: 1560px; }
}
/* C9: header left/right gutters follow the same content padding so the brandmark lines up */
body[data-app="staff"] .app-header { padding-left: clamp(16px, 3.2vw, 44px); padding-right: clamp(16px, 3.2vw, 44px); }

/* ---- 3. today header a touch larger at dashboard width ---- */
body[data-app="staff"] #today-date { font-size: 27px; }

/* ---- 4. brand summary grid: responsive auto-fill, roomy tracks ---- */
body[data-app="staff"] #brand-grid {
  grid-template-columns: repeat(auto-fill, minmax(242px, 1fr)) !important;
  gap: 14px !important;
}

/* ---- 5. brand card → clean summary tile ----
   Grid places logo + name on the top row, status pill in the top-right corner,
   and the three stats as an evenly-divided mini-KPI footer (number over label).
   .brand-card__body is display:contents so name + meta land straight in the
   card grid; the decorative chevron is dropped (the whole tile is the button). */
body[data-app="staff"] #brand-grid .brand-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "logo name" "stats stats";
  align-items: center;
  gap: 11px 12px;
  min-height: 126px;
  padding: 16px 16px 14px;
  position: relative;
  border-radius: 16px;
}
body[data-app="staff"] #brand-grid .brand-card__logo {
  grid-area: logo; width: 44px; height: 44px; border-radius: 13px; font-size: 13px;
}
body[data-app="staff"] #brand-grid .brand-card__body { display: contents; }
body[data-app="staff"] #brand-grid .brand-card__name {
  grid-area: name; font-size: 16px; font-weight: 700; align-self: center;
  padding-right: 80px;  /* keep long names clear of the corner status pill */
}
body[data-app="staff"] #brand-grid .brand-card__meta {
  grid-area: stats;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 2px; padding-top: 12px; min-height: 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
body[data-app="staff"] #brand-grid .brand-card .pill {
  position: absolute; top: 14px; right: 14px; margin: 0;
}
body[data-app="staff"] #brand-grid .brand-card__meta .stat {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  line-height: 1.12; text-align: center; white-space: nowrap;
  font-size: 10.5px; color: var(--text-3, #CCD0E8);
}
body[data-app="staff"] #brand-grid .brand-card__meta .stat b {
  font-size: 18px; color: var(--text, #FAFAFF);
}
body[data-app="staff"] #brand-grid .brand-card__chev { display: none; }

/* ---- 6. wide today: center the submit CTA as a comfortable block (not full-bleed, not a
   marooned 680px island next to the wide card grid) ---- */
body[data-app="staff"] .container:has(#brand-grid) .submit-bar > * {
  max-width: 1040px; margin-left: auto; margin-right: auto;
}

/* ── U01: takedown-outcome control on infringer domain cards ─────────────────
   Rendered by renderOutcome() in app.js. Shown only for classification==='infringer';
   confirm buttons appear only for editors (canEdit). */
body[data-app="staff"] .domain-outcome {
  margin-top: var(--s3, 12px);
  padding-top: var(--s3, 12px);
  border-top: 1px dashed var(--glass-border);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
}
.domain-outcome .outcome-head { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.domain-outcome .outcome-state { font-weight: 700; }
.domain-outcome .outcome-state.outcome--none    { color: var(--text-3); }
.domain-outcome .outcome-state.outcome--pending { color: var(--warn); }
.domain-outcome .outcome-state.outcome--down    { color: var(--success); }
.domain-outcome .outcome-state.outcome--up      { color: var(--danger); }
.domain-outcome .outcome-actions { display: inline-flex; gap: 8px; margin-left: auto; }
.domain-outcome .outcome-when { flex-basis: 100%; font-size: 11px; }

/* ============================================================================
   7. WIDE/ULTRAWIDE BALANCE — kill "bố cục dồn cục ở giữa" on the today dashboard.
   (a) grid dashboards fill the wide main area instead of a 1560px column marooned
       in a 2560px screen. (b) the today view stretches to the column height and
       pins the submit-bar to the bottom, killing the ~600px dead band below it.
   (c) the submit CTA is a comfortable centred block, not a tiny 680px island.
   Scoped to body[data-app="staff"] — leader/admin untouched.
   ============================================================================ */
@media (min-width: 1680px) {
  body[data-app="staff"] .app-main .container:has(#brand-grid),
  body[data-app="staff"] .app-main .container:has(#check-grid),
  body[data-app="staff"] .app-main .container:has(#users-list),
  body[data-app="staff"] .app-main .container:has(#task-list),
  body[data-app="staff"] .app-main .container:has(#rank-list),
  body[data-app="staff"] .app-main .container:has(#res-list),
  body[data-app="staff"] .app-main .container:has(#hist-list) {
    /* clamp, NOT min(): the 1560px floor means the [1680,1860)px window (where 100vw-300<1560)
       never REGRESSES the list/table pages narrower than they already shipped; above ~1860px it
       grows to fill, capped at 1880px so lines/cards don't get uncomfortably wide. */
    max-width: clamp(1560px, calc(100vw - 300px), 1880px);
  }
}
/* today view fills the column height via a pure FLEX chain (no magic 100dvh-Npx guess that
   could overshoot the real chrome and force a scroll): .app-main is already flex:1 inside .main
   (min-height:100dvh), so making it a column and letting its child #view-slot flex-grow makes
   the container fill exactly the space between header and footer. The footer (sibling AFTER
   .app-main) stays below with no overlap. The submit-bar then pins to the bottom via margin:auto,
   killing the ~600px dead band on short content — without ever forcing the page taller than 100dvh. */
body[data-app="staff"] .app-main:has(#brand-grid) { display: flex; flex-direction: column; }
body[data-app="staff"] .app-main:has(#brand-grid) > .container { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
body[data-app="staff"] .container:has(#brand-grid) > .view { flex: 1 1 auto; display: flex; flex-direction: column; }
body[data-app="staff"] .container:has(#brand-grid) > .view > .submit-bar { margin-top: auto; }
/* 'nghi địch' stat reads as danger at a glance — on BOTH #/today (#brand-grid) and #/check (#check-grid) cards */
body[data-app="staff"] .brand-card__meta .stat--warn b { color: var(--warn, #ffcf70); }