/* Scolava staff screens. A light, airy dashboard: white side menu, top bar with search,
   white rounded cards on a soft grey page, colour used for status and actions.
   Built for non-technical staff: 16px minimum text, labels in plain words, every
   colour pair at 4.5:1 or better, big touch targets, a dark mode that keeps contrast.
   Component class names (pjm-*) are kept so every staff view works unchanged. */

[hidden]{display:none!important}
@font-face{font-family:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;src:url('../fonts/nunito-latin-wght-normal.woff2') format('woff2')}

:root{
  --bg:#f4f6fb; --card:#ffffff; --line:#e6e9f2; --line-2:#d5dbe8;
  --text:#1b2236; --muted:#4f5a72; --soft:#eef1f8;
  --primary:#3150e0; --primary-ink:#ffffff; --primary-soft:#e8ecfd; --primary-text:#2a44c4;
  --signal:#ff5a1f;                       /* Scolava orange: logo, current menu item */
  --ok:#11845b; --ok-soft:#e3f5ed; --warn:#9a5b00; --warn-soft:#fff2db; --bad:#c42b1c; --bad-soft:#fde8e6;
  --shadow:0 1px 2px rgba(20,30,60,.06),0 8px 24px -12px rgba(20,30,60,.12);
  --r:12px; --r-sm:8px;
  --font:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
}
:root[data-theme="dark"]{
  --bg:#0e1424; --card:#161e33; --line:#24304d; --line-2:#33416a;
  --text:#e8ecf6; --muted:#a9b3cc; --soft:#1d2741;
  --primary:#6f87ff; --primary-ink:#0b1022; --primary-soft:#232f57; --primary-text:#9db0ff;
  --ok:#4cd39b; --ok-soft:#173a2e; --warn:#ffc061; --warn-soft:#3b2e14; --bad:#ff8a7d; --bad-soft:#40201d;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0e1424; --card:#161e33; --line:#24304d; --line-2:#33416a;
    --text:#e8ecf6; --muted:#a9b3cc; --soft:#1d2741;
    --primary:#6f87ff; --primary-ink:#0b1022; --primary-soft:#232f57; --primary-text:#9db0ff;
    --ok:#4cd39b; --ok-soft:#173a2e; --warn:#ffc061; --warn-soft:#3b2e14; --bad:#ff8a7d; --bad-soft:#40201d;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6);
  }
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:16px/1.55 var(--font);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:var(--primary-text)}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:6px}
.pjm-sr,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:20px;height:20px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---- shell ------------------------------------------------------------- */
.sc-shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}
.sc-side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:var(--card);border-right:1px solid var(--line);min-height:0}
.sc-logo{display:flex;align-items:center;gap:10px;height:64px;padding:0 20px;flex:0 0 auto}
.sc-logo img{height:26px;width:auto}
.sc-logo .dark{display:none}
:root[data-theme="dark"] .sc-logo .light{display:none}
:root[data-theme="dark"] .sc-logo .dark{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sc-logo .light{display:none}:root:not([data-theme="light"]) .sc-logo .dark{display:block}}
.sc-district{margin:4px 14px 10px;padding:12px 14px;border-radius:var(--r-sm);background:var(--soft)}
.sc-district b{display:block;font-weight:800;line-height:1.25}
.sc-district span{font-size:14px;color:var(--muted)}
.sc-nav{flex:1;overflow-y:auto;min-height:0;padding:6px 12px 16px}
.sc-nav h2{font-size:14px;font-weight:800;color:var(--muted);margin:18px 10px 6px}
.sc-nav a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:var(--r-sm);color:var(--text);text-decoration:none;font-weight:600;transition:background-color .15s}
.sc-nav a:hover{background:var(--soft)}
.sc-nav a[aria-current="page"]{background:var(--primary-soft);color:var(--primary-text);font-weight:800;box-shadow:inset 3px 0 0 var(--signal)}
.sc-side-foot{padding:14px 20px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}

.sc-main{min-width:0;display:flex;flex-direction:column}
.sc-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;height:64px;padding:0 24px;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.sc-ibtn.sc-menu{display:none}
.sc-search{display:flex;align-items:center;gap:8px;min-width:0;width:min(420px,40vw);height:42px;padding:0 14px;border-radius:999px;background:var(--soft);color:var(--muted)}
.sc-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;color:var(--text);outline:0}
.sc-search:focus-within{box-shadow:0 0 0 3px var(--primary-soft);background:var(--card)}
.sc-top .grow{flex:1}
.sc-ibtn{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:999px;border:0;background:var(--soft);color:var(--text);cursor:pointer;text-decoration:none;transition:background-color .15s}
.sc-ibtn:hover{background:var(--line)}
.sc-viewsite{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:999px;background:var(--soft);color:var(--text);font-weight:700;text-decoration:none}
.sc-user{display:flex;align-items:center;gap:10px}
.sc-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:999px;background:var(--primary);color:var(--primary-ink);font-weight:800}
.sc-user b{display:block;font-size:15px;line-height:1.2}
.sc-user form button{border:0;background:none;padding:0;font:inherit;font-size:14px;color:var(--primary-text);cursor:pointer;text-decoration:underline;text-underline-offset:3px}

.sc-page{width:100%;max-width:1320px;padding:24px 24px 64px}
.sc-crumbs{font-size:15px;color:var(--muted);margin-bottom:6px}
.sc-crumbs a{text-decoration:none}
.pjm-adminhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.pjm-adminhead h1{font-size:28px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.pjm-adminhead-view{display:none}

.sc-support{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:10px 24px;background:#fff2db;color:#5c3600;font-weight:700;border-bottom:1px solid #f1d7a6}
.sc-support a{color:#5c3600}
:root[data-theme="dark"] .sc-support{background:#3b2e14;color:#ffd99a;border-color:#5a4520}:root[data-theme="dark"] .sc-support a{color:#ffd99a}

/* ---- messages ---------------------------------------------------------- */
.pjm-alert{display:flex;gap:10px;align-items:center;padding:14px 18px;border-radius:var(--r);margin-bottom:20px;font-weight:700}
.pjm-alert--ok{background:var(--ok-soft);color:var(--ok)}
.pjm-alert--error{background:var(--bad-soft);color:var(--bad)}
.pjm-alert--warn{background:var(--warn-soft);color:var(--warn)}

/* ---- cards ------------------------------------------------------------- */
.pjm-board{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.pjm-board-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px}
.pjm-board-head h2{font-size:19px;font-weight:800}
.pjm-board-count{font-size:15px;color:var(--muted)}
.pjm-mt-28{margin-top:24px}.pjm-mt-24{margin-top:20px}
.pjm-empty{padding:4px 22px 22px;color:var(--muted)}

.pjm-statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.pjm-stat,.pjm-wstat{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;align-items:center;padding:20px 22px;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);color:var(--text);text-decoration:none}
.pjm-stat .ico,.pjm-wstat .ico{grid-row:1/3;display:grid;place-items:center;width:52px;height:52px;border-radius:14px}
.ico.blue{background:var(--primary-soft);color:var(--primary-text)}.ico.green{background:var(--ok-soft);color:var(--ok)}.ico.amber{background:var(--warn-soft);color:var(--warn)}.ico.red{background:var(--bad-soft);color:var(--bad)}
.pjm-stat-n{font-size:30px;font-weight:800;line-height:1.1}
.pjm-stat-l{color:var(--muted);font-weight:600}

/* ---- tables ------------------------------------------------------------ */
.pjm-board-table{width:100%;border-collapse:collapse}
.pjm-board-table th{padding:12px 22px;text-align:left;font-size:15px;font-weight:800;color:var(--muted);background:var(--soft)}
.pjm-board-table td{padding:14px 22px;border-top:1px solid var(--line);vertical-align:middle}
.pjm-board-table tbody tr:hover td{background:color-mix(in srgb,var(--soft) 60%,transparent)}
.pjm-num{text-align:right}
.pjm-since{color:var(--muted);font-size:15px}
.pjm-pkg-meta{color:var(--muted);font-size:15px}

/* status pills: words first, colour backs them up */
.pjm-state{display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:999px;font-size:15px;font-weight:800;white-space:nowrap}
.pjm-dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.pjm-state--live{background:var(--ok-soft);color:var(--ok)}
.pjm-state--work{background:var(--warn-soft);color:var(--warn)}
.pjm-state--stamp{background:var(--bad-soft);color:var(--bad)}
.pjm-state--archived,.pjm-state--delivered{background:var(--soft);color:var(--muted)}

/* ---- forms ------------------------------------------------------------- */
.pjm-staged{padding:20px 22px 22px;border-top:1px solid var(--line)}
.pjm-form{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.pjm-row2,.pjm-row3{display:grid;gap:16px;width:100%}
.pjm-row2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pjm-row3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pjm-field{display:flex;flex-direction:column;gap:6px;width:100%}
.pjm-field>span{font-weight:800}
.pjm-field small{color:var(--muted);font-size:15px}
.pjm-field small.pjm-fix,.pjm-fix{color:var(--bad);font-weight:700}
.pjm-field input,.pjm-field select,.pjm-field textarea{width:100%;min-height:46px;padding:10px 14px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);background:var(--card);color:var(--text);font:inherit;transition:border-color .15s,box-shadow .15s}
.pjm-field input:focus,.pjm-field select:focus,.pjm-field textarea:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.pjm-field input:has(+ .pjm-fix){border-color:var(--bad)}
.pjm-check{display:flex;align-items:center;gap:10px;font-weight:600}
.pjm-check input{width:20px;height:20px;accent-color:var(--primary)}
.pjm-skipnote{color:var(--muted);font-size:15px}

.pjm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border:0;border-radius:var(--r-sm);background:var(--primary);color:var(--primary-ink);font:800 16px/1 var(--font);cursor:pointer;text-decoration:none;box-shadow:0 6px 16px -8px var(--primary);transition:transform .15s,filter .15s}
.pjm-btn:hover{filter:brightness(1.07)}
.pjm-btn:active{transform:translateY(1px)}
.pjm-btn--big{width:100%;min-height:52px}
.pjm-btn--ghost{background:var(--soft);color:var(--text);box-shadow:none}
.pjm-btn.is-busy{opacity:.7;pointer-events:none}

/* ---- lists with inline edit --------------------------------------------- */
.pjm-pkgrow{padding:16px 22px;border-top:1px solid var(--line)}
.pjm-pkgrow-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.pjm-pkgrow-head strong{font-size:17px}
.pjm-pkgrow-edit summary{margin-top:6px;cursor:pointer;color:var(--primary-text);font-weight:700;list-style:none}
.pjm-pkgrow-edit summary::-webkit-details-marker{display:none}
.pjm-pkgrow-edit summary::before{content:"+ "}
.pjm-pkgrow-edit[open] summary::before{content:"\2212  "}

/* row actions, tabs, small buttons */
.pjm-actions,.pjm-rowacts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pjm-rowacts form{margin:0}
.pjm-btn--tiny{min-height:40px;padding:0 14px;font-size:15px}
.pjm-client{font-weight:800;color:var(--text);text-decoration:none;overflow-wrap:anywhere}
.pjm-client:hover{color:var(--primary-text);text-decoration:underline}
.pjm-check{display:flex;align-items:center;gap:10px;font-weight:600}
.pjm-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:12px 16px 0;border-bottom:1px solid var(--line)}
.pjm-tabs a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--r-sm) var(--r-sm) 0 0;color:var(--muted);font-weight:700;text-decoration:none;box-shadow:inset 0 -3px 0 transparent}
.pjm-tabs a span{min-width:24px;padding:1px 7px;border-radius:999px;background:var(--soft);font-size:14px;text-align:center}
.pjm-tabs a.is-on{color:var(--primary-text);box-shadow:inset 0 -3px 0 var(--primary)}
.sc-headacts{display:flex;justify-content:flex-end;margin:-6px 0 18px}

/* the Post button in the top bar */
.sc-post{position:relative}
.sc-post summary{list-style:none;min-height:42px;padding:0 16px}
.sc-post summary::-webkit-details-marker{display:none}
.sc-post-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:300px;padding:8px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow)}
.sc-post-menu a,.sc-post-menu span{display:grid;grid-template-columns:24px 1fr;column-gap:12px;align-items:center;padding:10px 12px;border-radius:var(--r-sm);color:var(--text);text-decoration:none}
.sc-post-menu svg{grid-row:span 2}
.sc-post-menu small{color:var(--muted);font-size:14px}
.sc-post-menu a:hover,.sc-post-menu a:focus-visible{background:var(--primary-soft)}
.sc-post-menu .is-soon{color:var(--muted)}

/* story form */
.sc-story{max-width:760px}
.sc-photo{display:grid;gap:14px;width:100%;padding:16px;border:1px dashed var(--line-2);border-radius:var(--r)}
.sc-photo img{width:100%;max-width:320px;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-sm)}
.sc-rte{width:100%;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--card)}
.sc-rte:focus-within{box-shadow:0 0 0 3px var(--primary-soft);border-color:var(--primary)}
.sc-rte-bar{display:flex;flex-wrap:wrap;gap:4px;padding:6px;border-bottom:1px solid var(--line)}
.sc-rte-bar button{min-width:44px;min-height:40px;padding:0 10px;border:0;border-radius:6px;background:var(--soft);color:var(--text);font:700 15px/1 var(--font);cursor:pointer}
.sc-rte-bar button:hover{background:var(--line)}
.sc-rte-link{display:flex;gap:6px;flex:1 1 260px}
.sc-rte-link input{flex:1;min-width:0;min-height:40px;padding:0 10px;border:1px solid var(--line-2);border-radius:6px;font:inherit;background:var(--card);color:var(--text)}
.sc-rte-area{min-height:220px;padding:12px 14px;outline:0;font-size:17px;line-height:1.6}
.sc-rte-area>:first-child{margin-top:0}
.sc-rte textarea{width:100%;min-height:220px;border:0;padding:12px 14px;font:inherit;background:transparent;color:var(--text)}
.sc-side-out{display:none}

/* inline confirm from confirm.js */
.pjm-confirm{display:inline-flex;align-items:center;gap:10px;font-weight:700}

/* ---- sign-in ------------------------------------------------------------ */
.sc-auth{min-height:100svh;display:grid;place-items:center;padding:24px 16px;background:var(--bg)}
.sc-auth .card{width:min(440px,100%);padding:36px 32px;background:var(--card);border-radius:18px;box-shadow:var(--shadow)}
.sc-auth img{height:30px;width:auto;margin-bottom:28px}
.sc-auth h1{font-size:28px;font-weight:800;line-height:1.15}
.sc-auth .who{color:var(--muted);margin:6px 0 24px}
.sc-auth form{display:flex;flex-direction:column;gap:16px}

/* ---- phone and tablet --------------------------------------------------- */
@media (max-width:1024px){
  .sc-shell{grid-template-columns:1fr}
  .sc-side{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);z-index:40;transform:translateX(-105%);transition:transform .25s ease;box-shadow:var(--shadow)}
  .sc-side.is-open{transform:none}
  .sc-scrim{position:fixed;inset:0;z-index:30;background:rgba(8,12,24,.45)}
  .sc-ibtn.sc-menu{display:inline-grid}
  .sc-search{width:auto;flex:1 1 0}
  .sc-top{gap:8px}
  .sc-user b,.sc-user form,.sc-viewsite span{display:none}
  .sc-top{padding:0 14px}
  .sc-page{padding:18px 14px 56px}
  .sc-post summary span{display:none}
  .sc-post summary{padding:0 12px}
  .sc-post-menu{position:fixed;left:14px;right:14px;top:72px;width:auto}
  .sc-side-out{display:block;margin-top:8px}
  .sc-side-out button{border:0;background:none;padding:0;font:inherit;color:var(--primary-text);text-decoration:underline;cursor:pointer;min-height:40px}
}
@media (max-width:720px){
  .sc-search{display:none}
  .pjm-row2,.pjm-row3{grid-template-columns:1fr}
  .sc-viewsite{display:none}
  .pjm-board-table thead{display:none}
  .pjm-board-table tr{display:block;border-top:1px solid var(--line);padding:10px 0}
  .pjm-board-table td{display:flex;justify-content:space-between;gap:16px;border:0;padding:6px 18px}
  .pjm-board-table td::before{content:attr(data-label);font-weight:800;color:var(--muted)}
  .pjm-board-table td[data-label="Story"]{display:block}
  .pjm-board-table td[data-label="Story"]::before{display:none}
  .sc-headacts .pjm-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}