/* ============================================================
   P1 FOUNDATION — the "Plain" direction.

   Loaded LAST on the client portal, so it owns the look. The
   older sheets (admin.css, portal.css, client-kb.css) still
   supply structure for panel internals; this file re-tones them
   and removes the devices that made the portal read as a
   generic dark dashboard.

   Three things it deletes on purpose, everywhere:
     1. hover LIFTS  — translateY on cards. Nothing floats.
     2. blur SHADOWS — replaced by 1px borders.
     3. large RADII  — everything lands on 3px.

   And one it enforces: lime is punctuation. It appears on
   links, the short rule under a section heading, and state.
   Never as a gradient, glow, or a border on everything.

   Light is the base palette. Dark redefines tokens only, in
   both the prefers-color-scheme and the [data-theme] blocks,
   so all three viewer states resolve as a complete set.
   ============================================================ */

/* ── tokens ───────────────────────────────────────────────── */
:root,
[data-theme="light"]{
  --p-page:#FFFFFF;
  --p-band:#F5F7F1;
  --p-sunk:#FAFBF7;
  --p-line:#E2E5D9;
  --p-line-strong:#CBD0BE;

  --p-ink:#15180F;
  --p-dim:#575E4B;
  --p-mute:#868D77;

  /* darkened lime for text contrast on white; full brand lime is
     kept for the heading rule and state marks, where it sits on
     a wash rather than carrying the text itself */
  --p-accent:#4C7A0B;
  --p-mark:#A3E635;
  --p-wash:#F0F7DF;

  --p-warn:#8A5B05;
  --p-warn-wash:#FBF3E2;
  --p-ok:#3F7320;
  --p-ok-wash:#EFF6E4;
  --p-crit:#9E3327;
  --p-crit-wash:#FBEEEC;

  --p-sans:ui-sans-serif,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --p-mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;
  --p-r:3px;

  /* legacy aliases — older sheets still reference these names */
  --p-bg:var(--p-page);
  --p-bg2:var(--p-band);
  --p-surf:var(--p-page);
  --p-surf2:var(--p-sunk);
  --p-soft:var(--p-dim);
  --p-line2:var(--p-line-strong);
  --p-brand:var(--p-mark);
  --p-brand-txt:var(--p-accent);
  --p-brand-soft:var(--p-wash);
  --p-brand-ink:#15180F;
  --p-brand-strong:var(--p-accent);
  --p-shadow:rgba(21,24,15,.10);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --p-page:#14170F;
    --p-band:#191D13;
    --p-sunk:#11140C;
    --p-line:#2C3223;
    --p-line-strong:#3C4430;

    --p-ink:#ECEFE2;
    --p-dim:#A9B199;
    --p-mute:#7B8369;

    --p-accent:#B4EE4E;
    --p-mark:#A3E635;
    --p-wash:#1D2413;

    --p-warn:#E4AE3A;
    --p-warn-wash:#241C0C;
    --p-ok:#9BD45C;
    --p-ok-wash:#18200F;
    --p-crit:#E08276;
    --p-crit-wash:#251512;

    --p-brand-ink:#14170F;
    --p-shadow:rgba(0,0,0,.5);
  }
}
[data-theme="dark"]{
  --p-page:#14170F;
  --p-band:#191D13;
  --p-sunk:#11140C;
  --p-line:#2C3223;
  --p-line-strong:#3C4430;

  --p-ink:#ECEFE2;
  --p-dim:#A9B199;
  --p-mute:#7B8369;

  --p-accent:#B4EE4E;
  --p-mark:#A3E635;
  --p-wash:#1D2413;

  --p-warn:#E4AE3A;
  --p-warn-wash:#241C0C;
  --p-ok:#9BD45C;
  --p-ok-wash:#18200F;
  --p-crit:#E08276;
  --p-crit-wash:#251512;

  --p-brand-ink:#14170F;
  --p-shadow:rgba(0,0,0,.5);
}

/* ── global de-clichéing ──────────────────────────────────────
   Blanket removals. Written once here rather than hunted through
   six stylesheets, and scoped to the portal body so nothing else
   on the site is touched by accident. */
body.p1-plain *{
  box-shadow:none !important;
}
body.p1-plain *:hover{
  transform:none !important;
}
body.p1-plain :focus-visible{
  outline:2px solid var(--p-accent) !important;
  outline-offset:2px;
  box-shadow:none !important;
}

body.p1-plain{
  background:var(--p-page);
  color:var(--p-ink);
  font-family:var(--p-sans);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body.p1-plain a{ color:var(--p-accent); }

/* ── top navigation ───────────────────────────────────────── */
.p1-nav{ border-bottom:1px solid var(--p-line); background:var(--p-page); }
.p1-nav-in{
  max-width:1180px; margin:0 auto; padding:0 24px; height:56px;
  display:flex; align-items:center; gap:26px;
}
.p1-logo{ font-family:var(--p-mono); font-size:13px; letter-spacing:.16em; font-weight:700; color:var(--p-ink); text-decoration:none; white-space:nowrap; }
.p1-logo em{ font-style:normal; color:var(--p-accent); }

.p1-tabs{ display:flex; gap:22px; overflow-x:auto; scrollbar-width:none; }
.p1-tabs::-webkit-scrollbar{ display:none; }
/* These buttons keep .sidebar-btn so portal.js still binds them, which drags
   along that class's pill styling — a rounded wash box around the active tab.
   Neutralised here; the only active marker is the rule underneath. */
.p1-tab{
  font-family:inherit; font-size:14px; color:var(--p-dim);
  background:transparent !important;
  border:0 !important; border-bottom:2px solid transparent !important;
  border-radius:0 !important; padding:18px 0 17px !important;
  width:auto !important; display:block; cursor:pointer; white-space:nowrap;
}
.p1-tab:hover{ color:var(--p-ink) !important; background:transparent !important; }
.p1-tab.active{
  color:var(--p-ink) !important; font-weight:600;
  border-bottom-color:var(--p-mark) !important;
}

.p1-nav-right{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.p1-who{ font-size:13.5px; color:var(--p-dim); white-space:nowrap; }
.p1-who b{ color:var(--p-ink); font-weight:600; }

/* ── hero band ────────────────────────────────────────────── */
.p1-band{
  background:var(--p-band); border-bottom:1px solid var(--p-line);
  padding:44px 24px 50px; text-align:center;
}
.p1-band h1{
  font-size:clamp(1.3rem,2.6vw,1.7rem); font-weight:600; letter-spacing:-.02em;
  margin:0 0 20px; color:var(--p-ink); text-wrap:balance;
}
.p1-search{
  max-width:720px; margin:0 auto; display:flex; align-items:center; gap:11px;
  background:var(--p-page); border:1px solid var(--p-line-strong); border-radius:var(--p-r);
  padding:13px 15px; text-align:left; cursor:text; width:100%;
  font-family:inherit; color:var(--p-mute); font-size:15px;
}
.p1-search:hover{ border-color:var(--p-line-strong); }
.p1-search svg{ width:17px; height:17px; color:var(--p-mute); flex:none; }
/* Only the placeholder grows. `.p1-search span{flex:1}` also caught the
   keyboard hint, which stretched the Ctrl+K chip across half the field. */
.p1-search > span:not(.k){ flex:1; }
.p1-search .k{
  flex:none;
  font-family:var(--p-mono); font-size:10.5px; color:var(--p-mute);
  border:1px solid var(--p-line); border-radius:var(--p-r); padding:3px 7px;
}

/* ── page column ──────────────────────────────────────────── */
.p1-wrap{ max-width:1000px; margin:0 auto; padding:40px 24px 80px; }

/* ── section heading: the one borrowed device ─────────────── */
.p1-sec{ margin-bottom:44px; }
.p1-sec:last-child{ margin-bottom:0; }
.p1-sec-h{
  font-family:var(--p-mono); font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--p-ink); margin:0 0 3px;
}
.p1-sec-h + .p1-rule{ width:34px; height:2px; background:var(--p-mark); margin-bottom:18px; }
.p1-sec-note{ font-size:14px; color:var(--p-dim); margin:0 0 18px; max-width:64ch; }

/* ── lists ────────────────────────────────────────────────── */
.p1-list{ border:1px solid var(--p-line); border-radius:var(--p-r); overflow:hidden; }
.p1-item{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:center;
  padding:14px 16px; border-bottom:1px solid var(--p-line);
  background:var(--p-page); color:inherit; text-decoration:none; cursor:pointer;
  width:100%; text-align:left; font-family:inherit; border-left:0; border-right:0; border-top:0;
}
.p1-item:last-child{ border-bottom:0; }
.p1-item:hover{ background:var(--p-sunk); }
.p1-num{ font-family:var(--p-mono); font-size:12px; color:var(--p-mute); font-variant-numeric:tabular-nums; }
.p1-ttl{ font-size:14.5px; color:var(--p-ink); min-width:0; }
.p1-ttl small{ display:block; font-size:12.5px; color:var(--p-mute); margin-top:2px; font-weight:400; }
.p1-side{ display:flex; align-items:center; gap:12px; }
.p1-ts{ font-family:var(--p-mono); font-size:11px; color:var(--p-mute); white-space:nowrap; }

.p1-pill{
  font-family:var(--p-mono); font-size:9.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; padding:4px 8px; border-radius:var(--p-r); white-space:nowrap;
}
.p1-pill.ok{ color:var(--p-ok); background:var(--p-ok-wash); }
.p1-pill.wait{ color:var(--p-warn); background:var(--p-warn-wash); }
.p1-pill.new{ color:var(--p-accent); background:var(--p-wash); }
.p1-pill.off{ color:var(--p-mute); background:var(--p-sunk); }

/* ── panels + cards ───────────────────────────────────────── */
.p1-panel{ border:1px solid var(--p-line); border-radius:var(--p-r); padding:20px; background:var(--p-page); }
.p1-panel + .p1-panel{ margin-top:14px; }
.p1-panel h3{ font-size:13px; font-weight:700; margin:0 0 14px; color:var(--p-ink); }

.p1-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:12px; }
.p1-card{ border:1px solid var(--p-line); border-radius:var(--p-r); padding:12px 14px; background:var(--p-page); }
.p1-card.you{ border-color:var(--p-mark); background:var(--p-wash); }
.p1-card .nm{ font-size:14px; font-weight:600; color:var(--p-ink); }
.p1-card .nm span{
  font-family:var(--p-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--p-accent); margin-left:7px; font-weight:700;
}
.p1-card .org{ font-size:12.5px; color:var(--p-mute); margin-top:5px; }
.p1-card a{ font-size:12.5px; text-decoration:none; display:block; margin-top:2px; word-break:break-all; }
.p1-card a:hover{ text-decoration:underline; }
.p1-card .seen{
  font-family:var(--p-mono); font-size:10px; color:var(--p-mute); margin-top:7px;
  letter-spacing:.06em; text-transform:uppercase;
}

.p1-empty{ border:1px dashed var(--p-line-strong); border-radius:var(--p-r); padding:26px 20px; }
.p1-empty p{ margin:0 0 12px; color:var(--p-dim); font-size:14px; max-width:56ch; }
.p1-empty p:last-child{ margin-bottom:0; }

/* ── undo the old shell's geometry ────────────────────────────
   admin.css lays out a FIXED 248px sidebar under a FIXED 64px
   navbar, and compensates with .admin-main{margin-left:248px}
   and .admin-dashboard{padding-top:64px}. Both elements are gone
   here, so those offsets became a 248px shove to the right and a
   64px gap above the nav. Every value below is an undo, not a
   preference — which is why they are grouped and labelled. */
body.p1-plain .admin-dashboard{
  display:block !important;
  padding-top:0 !important;          /* was: var(--nav-height), for the hidden navbar */
  min-height:0 !important;
  background:var(--p-page) !important; /* was: two radial-gradient glows */
}
body.p1-plain .admin-sidebar{ display:none !important; }
body.p1-plain .admin-main{
  margin-left:0 !important;          /* was: 248px, for the hidden sidebar */
  padding:0 !important;
  min-height:0 !important;
  flex:none !important;
  background:transparent !important;
}
body.p1-plain .admin-panel{ display:none; }
body.p1-plain .admin-panel.active{ display:block; }

/* Deliberately NOT a blanket `.admin-panel h2/h3` rule: it would outrank
   .ckb-cat-title and shrink the KB's category heading to a section label.
   The panel headings are handled by the scoped rules further down. */

body.p1-plain .panel-header{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:0 0 18px; padding:0 0 3px; border:0;
}
body.p1-plain .admin-panel > h2,
body.p1-plain .panel-header h2{
  font-family:var(--p-mono); font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--p-ink); margin:0;
}
body.p1-plain .panel-sub{ font-size:14px; color:var(--p-dim); margin:8px 0 18px; max-width:64ch; }

body.p1-plain .ticket-card,
body.p1-plain .create-form,
body.p1-plain .ticket-detail-header,
body.p1-plain .reply-card,
body.p1-plain .reply-form,
body.p1-plain .rm-card,
body.p1-plain .dl-card{
  border:1px solid var(--p-line) !important;
  border-radius:var(--p-r) !important;
  background:var(--p-page) !important;
}
body.p1-plain .ticket-card:hover{ background:var(--p-sunk) !important; }
body.p1-plain .ticket-card h3{ font-size:14.5px; font-weight:600; }

body.p1-plain .badge{
  font-family:var(--p-mono); font-size:9.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; border-radius:var(--p-r); padding:4px 8px; border:0;
}
body.p1-plain .badge-open,
body.p1-plain .badge-normal{ color:var(--p-ok); background:var(--p-ok-wash); }
body.p1-plain .badge-waiting,
body.p1-plain .badge-high,
body.p1-plain .badge-in-progress{ color:var(--p-warn); background:var(--p-warn-wash); }
body.p1-plain .badge-urgent{ color:var(--p-crit); background:var(--p-crit-wash); }
body.p1-plain .badge-resolved,
body.p1-plain .badge-closed,
body.p1-plain .badge-low{ color:var(--p-mute); background:var(--p-sunk); }

body.p1-plain input,
body.p1-plain select,
body.p1-plain textarea{
  border:1px solid var(--p-line-strong) !important;
  border-radius:var(--p-r) !important;
  background:var(--p-page) !important;
  color:var(--p-ink) !important;
  font-family:inherit;
}
body.p1-plain input:focus,
body.p1-plain select:focus,
body.p1-plain textarea:focus{ border-color:var(--p-accent) !important; }
body.p1-plain label{ color:var(--p-dim); font-size:13px; }

body.p1-plain .btn-primary{
  background:var(--p-accent) !important; color:#FFFFFF !important;
  border:1px solid var(--p-accent) !important; border-radius:var(--p-r) !important;
  font-weight:600; padding:10px 17px;
}
[data-theme="dark"] body.p1-plain .btn-primary,
body.p1-plain[data-theme="dark"] .btn-primary{ color:var(--p-brand-ink) !important; }
body.p1-plain .btn-sm,
body.p1-plain .btn-outline{
  background:transparent !important; color:var(--p-dim) !important;
  border:1px solid var(--p-line-strong) !important; border-radius:var(--p-r) !important;
  padding:8px 14px; font-weight:600;
}
body.p1-plain .btn-sm:hover,
body.p1-plain .btn-outline:hover{ color:var(--p-ink) !important; background:var(--p-sunk) !important; }

/* the old site chrome has no place on a signed-in tool page */
body.p1-plain .navbar{ display:none !important; }

/* The theme switch is styled from shared.css against the old --dark-*/--cyan
   tokens, which this palette does not define — so it rendered as an off-brand
   amber pill. Re-pointed at the portal's own tokens. */
body.p1-plain .theme-toggle{
  background:var(--p-sunk) !important;
  border:1px solid var(--p-line-strong) !important;
  width:40px !important; height:22px !important;
}
body.p1-plain .theme-toggle::after,
body.p1-plain .theme-toggle::before{ background:var(--p-mute) !important; }
body.p1-plain .theme-toggle-icon{ color:var(--p-mute); font-size:13px; }

/* ── login ────────────────────────────────────────────────── */
body.p1-plain .login-screen{
  min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--p-band);
}
body.p1-plain .login-card{
  width:100%; max-width:400px; background:var(--p-page);
  border:1px solid var(--p-line) !important; border-radius:var(--p-r) !important; padding:34px 30px;
}
body.p1-plain .login-card h2{ font-size:1.15rem; font-weight:650; letter-spacing:-.02em; }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width:820px){
  .p1-nav-in{ gap:16px; padding:0 16px; }
  .p1-who{ display:none; }
  .p1-wrap{ padding:30px 16px 60px; }
  .p1-band{ padding:32px 16px 36px; }
}

@media (prefers-reduced-motion: reduce){
  body.p1-plain *{ transition:none !important; animation:none !important; }
}

/* ── announcement banner ──────────────────────────────────────
   Sits at the top of the portal home. Plain frame, no shadow, no
   crop: agencies upload a finished graphic, and cropping it to a
   fixed ratio would cut the words off their own artwork. */
.p1-banner-img{
  display:block; width:100%; height:auto;
  border:1px solid var(--p-line); border-radius:var(--p-r);
  background:var(--p-sunk);
}
.p1-banner-link{ display:block; }
.p1-banner-link:hover .p1-banner-img{ border-color:var(--p-line-strong); }
.p1-banner-link:focus-visible .p1-banner-img{ outline:2px solid var(--p-accent); outline-offset:2px; }
.p1-banner-cap{ font-size:13.5px; color:var(--p-dim); margin:10px 0 0; max-width:64ch; }