/* ==========================================================================
   BOSSWARE PLATFORM — dashboard styles
   Same tokens as the marketing site. No build step, no npm.
   ========================================================================== */

:root {
  --brand:#163EAE; --brand-600:#123595; --brand-700:#0E2B77;
  --brand-100:#DDE5F8; --brand-50:#F1F5FD;
  --ink:#0A1633; --body:#414C6B; --muted:#6B7590; --faint:#96A0B8;
  --white:#fff; --surface:#F6F8FC; --line:#E2E8F4; --line-strong:#CBD5EA;
  --ok:#0F7B4F; --ok-bg:#E7F6EF;
  --warn:#8A5A00; --warn-bg:#FDF3E0;
  --danger:#B3261E; --danger-bg:#FDECEA;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --radius:12px; --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(10,22,51,.05),0 4px 12px -4px rgba(10,22,51,.06);
  --shadow:0 2px 4px rgba(10,22,51,.04),0 14px 34px -12px rgba(10,22,51,.14);
  --sidebar:264px;
}

/* ==========================================================================
   WHICH HAT AM I WEARING?

   Bossware staff do two different jobs in one dashboard. Editing a client's
   article and deleting that client are a couple of clicks apart, and until now
   the only thing telling them apart was remembering which mode you were in.
   Remembering is not a safety feature.

   So the two modes now look different at a glance:

     working on a client   grey throughout, client tools only
     platform work         Bossware blue, platform tools only

   The colour is the whole point. Nobody reads a label at the top of a page they
   have opened four hundred times, but nobody misses the entire screen changing
   colour either.
   ========================================================================== */

body.in-client-mode {
  /* Deliberately drained of colour. Someone else's content, handled with care —
     and visibly not the place where clients get created or deleted. */
  --brand:#4A5568; --brand-600:#3D4757; --brand-700:#2D3648;
  --brand-100:#E4E7EC; --brand-50:#F4F5F7;
  --ink:#2A3142;
}

/* The words that go with the colour are written into the template, not added
   here. A ::after on ".brand span" matched both of the nested spans and printed
   the label twice. */

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
body{font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--body);
  background:var(--surface);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--ink);font-weight:700;line-height:1.2;letter-spacing:-.02em}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
ul{list-style:none;padding:0}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- shell */
.app{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh}
@media (max-width:900px){.app{grid-template-columns:1fr}}

.sidebar{background:var(--ink);color:#A9B7DA;padding:20px 16px;
  display:flex;flex-direction:column;gap:24px}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:4px}
.sidebar .brand img{width:32px;height:32px;border-radius:7px}
.sidebar .brand b{color:#fff;font-size:15px;letter-spacing:-.02em;display:block;line-height:1.1}
.sidebar .brand span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#6F8CD8}

.site-switch{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-sm);padding:10px 12px}
.site-switch .lbl{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#6F8CD8;
  margin-bottom:6px}
.site-switch select{width:100%;background:transparent;border:0;color:#fff;font-weight:600;
  font-size:14px;cursor:pointer;padding:0}
.site-switch select option{background:#0A1633;color:#fff}

.nav-group+.nav-group{margin-top:18px}
.nav-group .hd{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#5E6E9B;
  padding:0 12px;margin-bottom:6px}
.sidebar nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius-sm);
  color:#A9B7DA;font-size:14px;font-weight:500;text-decoration:none}
.sidebar nav a:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.sidebar nav a.is-active{background:var(--brand);color:#fff}
.sidebar nav a svg{width:17px;height:17px;flex:none}

.sidebar .foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding-top:14px}
.sidebar .foot .who{font-size:13px;color:#fff;font-weight:600}
.sidebar .foot .role{font-size:11px;color:#6F8CD8;margin-bottom:10px}
.sidebar .foot button{background:none;border:0;color:#A9B7DA;font-size:13px;cursor:pointer;padding:0}
.sidebar .foot button:hover{color:#fff;text-decoration:underline}

.main{padding:28px clamp(16px,3vw,36px) 60px;min-width:0}
.page-head{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;
  justify-content:space-between;margin-bottom:24px}
.page-head h1{font-size:clamp(22px,1.4rem+.8vw,30px)}
.page-head p{color:var(--muted);margin-top:4px;max-width:64ch}

/* ---------------------------------------------------------------- cards */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm)}
.card+.card{margin-top:20px}
.card>.hd{padding:16px 20px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.card>.hd h2{font-size:15px}
.card>.hd p{font-size:13px;color:var(--muted);margin-top:2px}
.card>.bd{padding:20px}
.card>.bd.tight{padding:0}

.grid{display:grid;gap:20px}
.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.grid.c3,.grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}}

.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.stat .k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.stat .v{font-size:28px;font-weight:750;color:var(--ink);letter-spacing:-.03em;line-height:1.1;
  margin-top:6px}
.stat .sub{font-size:13px;color:var(--muted);margin-top:2px}

/* ---------------------------------------------------------------- tables */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);font-weight:650;padding:12px 20px;border-bottom:1px solid var(--line);
  background:var(--surface)}
td{padding:14px 20px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:14px}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--brand-50)}
td .name{font-weight:600;color:var(--ink)}
td .sub{font-size:12.5px;color:var(--muted)}
.table-wrap{overflow-x:auto}

/* ---------------------------------------------------------------- forms */
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.field .hint{font-size:12.5px;color:var(--muted);margin-top:5px}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;background:#fff;
  border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);font-size:14px;color:var(--ink)}
.field textarea{min-height:88px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-100)}
.field.err input,.field.err select,.field.err textarea{border-color:var(--danger)}
.field .msg{font-size:12.5px;color:var(--danger);margin-top:5px;font-weight:500}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:600px){.row{grid-template-columns:1fr}}

.check{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1.5px solid var(--line-strong);
  border-radius:var(--radius-sm);cursor:pointer;margin-bottom:8px}
.check:hover{border-color:var(--brand)}
.check input{margin-top:3px;width:16px;height:16px;flex:none;accent-color:var(--brand)}
.check .t{font-size:14px;font-weight:600;color:var(--ink)}
.check .d{font-size:12.5px;color:var(--muted)}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 16px;border-radius:var(--radius-sm);border:1.5px solid var(--brand);
  background:var(--brand);color:#fff;font-size:14px;font-weight:600;cursor:pointer;
  white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--brand-600);border-color:var(--brand-600);text-decoration:none;color:#fff}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line-strong)}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-50)}
.btn.danger{background:var(--danger);border-color:var(--danger)}
.btn.danger:hover{background:#8F1E17;border-color:#8F1E17}
.btn.sm{padding:6px 11px;font-size:13px}
.btn.block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-link{background:none;border:0;color:var(--danger);font-size:13px;font-weight:600;cursor:pointer;padding:0}
.btn-link:hover{text-decoration:underline}
.actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---------------------------------------------------------------- misc */
.pill{display:inline-block;padding:3px 9px;border-radius:99px;font-size:11.5px;font-weight:650;
  letter-spacing:.02em}
.pill.owner{background:var(--brand);color:#fff}
.pill.editor{background:var(--brand-100);color:var(--brand-700)}
.pill.author{background:#EAF0F9;color:var(--body)}
.pill.viewer{background:var(--surface);color:var(--muted);border:1px solid var(--line)}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.off{background:var(--danger-bg);color:var(--danger)}

.alert{padding:12px 16px;border-radius:var(--radius-sm);font-size:14px;margin-bottom:20px;
  border:1px solid}
.alert.ok{background:var(--ok-bg);border-color:#BFE5D3;color:var(--ok)}
.alert.err{background:var(--danger-bg);border-color:#F5C6C2;color:var(--danger)}
.alert.warn{background:var(--warn-bg);border-color:#EFD9A8;color:var(--warn)}

.keybox{font-family:var(--mono);font-size:13px;background:var(--ink);color:#9CE3C0;
  padding:14px 16px;border-radius:var(--radius-sm);word-break:break-all;
  display:flex;gap:12px;align-items:center;justify-content:space-between}
.keybox button{background:rgba(255,255,255,.12);border:0;color:#fff;padding:6px 10px;
  border-radius:6px;font-size:12px;cursor:pointer;font-family:var(--sans);font-weight:600;flex:none}
.keybox button:hover{background:rgba(255,255,255,.22)}
code.inline{font-family:var(--mono);font-size:13px;background:var(--surface);
  border:1px solid var(--line);padding:1px 6px;border-radius:5px;color:var(--ink)}

.empty{text-align:center;padding:44px 20px;color:var(--muted)}
.empty h3{font-size:16px;margin-bottom:6px}
.empty p{font-size:14px;max-width:44ch;margin:0 auto 16px}

.log{display:grid;gap:0}
.log li{display:flex;gap:12px;align-items:baseline;padding:11px 20px;border-bottom:1px solid var(--line);
  font-size:13.5px}
.log li:last-child{border-bottom:0}
.log .act{font-family:var(--mono);font-size:12px;color:var(--brand);flex:none}
.log .who{color:var(--ink);font-weight:550}
.log .when{margin-left:auto;color:var(--faint);font-size:12.5px;flex:none}

/* ---------------------------------------------------------------- auth */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:linear-gradient(180deg,var(--brand-50),var(--surface))}
.auth .box{width:100%;max-width:400px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:32px}
.auth .brand{display:flex;align-items:center;gap:11px;margin-bottom:24px}
.auth .brand img{width:40px;height:40px}
.auth .brand b{display:block;font-size:16px;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.auth .brand span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.auth h1{font-size:21px;margin-bottom:5px}
.auth .sub{font-size:14px;color:var(--muted);margin-bottom:22px}
.auth .rem{display:flex;align-items:center;gap:8px;font-size:13.5px;margin-bottom:18px}
.auth .rem input{width:16px;height:16px;accent-color:var(--brand)}

/* ==========================================================================
   PICTURES
   ========================================================================== */

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.media-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.media-card > a { display: block; background: var(--surface); }
.media-card img { width: 100%; height: 140px; object-fit: cover; }
.media-meta { padding: 10px 12px 12px; }
.media-name {
  font-size: 13px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.media-sub { font-size: 11.5px; color: var(--faint); margin-bottom: 8px; }
.media-meta input[type=text] {
  width: 100%; padding: 5px 8px; font-size: 12.5px;
  border: 1px solid var(--line-strong); border-radius: 6px;
}
.media-meta form + form { margin-top: 8px; }

/* -------------------------------------------------------- fields on a form */
.img-field {
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.img-preview { display: flex; align-items: center; gap: 12px; min-height: 62px; }
.img-preview img {
  width: 84px; height: 62px; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--line);
}
.img-preview span { font-size: 13px; color: var(--ink); }
.img-field .actions { margin-top: 10px; align-items: center; }

.gallery-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.gallery-list li { position: relative; }
.gallery-list img {
  width: 88px; height: 66px; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--line); display: block;
}
.gallery-list button {
  position: absolute; top: -7px; right: -7px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: var(--danger); color: #fff;
  font-size: 15px; line-height: 1; cursor: pointer;
}

.rt-toolbar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}

/* ------------------------------------------------------------ the picker */
.picker {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 22, 51, .55);
  display: grid; place-items: center; padding: 20px;
}
.picker[hidden] { display: none; }
.picker-box {
  background: #fff; border-radius: var(--radius);
  width: min(860px, 100%); max-height: 85vh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow);
}
.picker-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.picker-head h2 { font-size: 16px; }
.picker-upload {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.picker-grid {
  overflow-y: auto; padding: 16px 20px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px;
}
.picker-item {
  border: 1.5px solid var(--line); border-radius: 8px;
  background: #fff; padding: 0; cursor: pointer; overflow: hidden; text-align: left;
}
.picker-item:hover { border-color: var(--brand); }
.picker-item img { width: 100%; height: 96px; object-fit: cover; display: block; }
.picker-item span {
  display: block; padding: 6px 8px; font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ------------------------------------------------------------------
   Mobile menu
   ------------------------------------------------------------------
   Below 900px the app grid stops putting the sidebar beside the page
   and stacks it on top instead. Without a way to fold it away, every
   page on a phone opens with the whole menu and you scroll past it to
   reach the content.

   The menu only collapses once JavaScript has marked the page with
   .has-js. With scripts off it stays fully open - which is what it
   does today. Worse to look at, never unreachable.
   ------------------------------------------------------------------ */
.nav-toggle { display: none; }

@media (max-width: 900px) {

  .sidebar { position: relative; padding-right: 72px; }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.08);
    color: #fff;
    cursor: pointer;
  }

  .nav-toggle svg { width: 22px; height: 22px; }
  .nav-toggle .icon-close { display: none; }

  /* Collapsed by default on a narrow screen. */
  .has-js .sidebar .site-switch,
  .has-js .sidebar nav,
  .has-js .sidebar .foot { display: none; }

  .has-js .nav-open .sidebar .site-switch,
  .has-js .nav-open .sidebar nav,
  .has-js .nav-open .sidebar .foot { display: block; }

  .has-js .nav-open .nav-toggle .icon-open { display: none; }
  .has-js .nav-open .nav-toggle .icon-close { display: inline; }

  /* The footer is pushed to the bottom by auto margin on a tall
     sidebar. Stacked on a phone that would leave a large gap. */
  .sidebar .foot { margin-top: 18px; }
}

/* ------------------------------------------------------------------
   Phone layout fixes
   ------------------------------------------------------------------
   Symptom on a phone: the dark bar stopped short of the right edge,
   and the page text was clipped along the left.

   Cause: the single column was written as 1fr. A 1fr column will not
   shrink below the widest thing inside it, so one long unbreakable
   word - an audit entry such as platform.sync.checks_run - made the
   page wider than the screen. The page then scrolled sideways, and
   the bar, being only as wide as the screen, no longer reached what
   had become the right edge.

   The desktop rule already guards against this with minmax(0, 1fr).
   The phone rule did not. Same guard, applied in the same place.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {

  .app { grid-template-columns: minmax(0, 1fr); }

  /* Stays put while the page scrolls, so the menu button is always in
     reach. Capped to the screen height and scrollable inside itself,
     so an open menu can never leave the page stranded behind it. */
  .sidebar {
    position: sticky;
    top: 0;
    z-index: 40;
    max-height: 100vh;
    overflow-y: auto;
  }

  /* Belt and braces for the cause above: long unbroken words wrap
     rather than forcing the whole page wider than the screen. */
  .card table { width: 100%; }
  .card td, .card th { overflow-wrap: anywhere; }
  code { overflow-wrap: anywhere; }
}