/* ============================================================================================
   Premier Connect — shell styles.

   THIS FILE IS THE DESIGN. Change a colour, a radius or a shadow here and it propagates; do not
   paste a value into a rule below. `reference/premier-connect.html` is where the design came from
   and is kept as a reference, but it is a static file nothing builds — the two drifted apart once
   already, which is how the sidebar came to render two designs at the same time.

   Every token below is the mockup's own value.
   ============================================================================================ */
:root {
    /* --- Brand ------------------------------------------------------------------------------
       The navy ramp is a ramp: --navy for surfaces that carry white text (the topbar), --navy-2
       for a raised tile on top of it (icon buttons), --navy-3 for hover and gradient ends,
       --navy-4 for accents. Using a flat --navy where the mockup steps the ramp is why the
       topbar reads flatter than the design. */
    --navy: #0e2a47;
    --navy-2: #143a61;
    --navy-3: #1d4d7c;
    --navy-4: #226395;

    /* Amber is the action colour. Text on amber is --on-amber, never white: white on amber fails
       contrast at this weight, which is why the mockup pairs it with a dark brown. */
    --amber: #f2a13b;
    --amber-d: #d8851d;
    --on-amber: #3a2400;

    --green: #7ab648;
    --green-d: #5f9636;

    /* --- Surfaces and text ------------------------------------------------------------------ */
    --ink: #1b2733;
    --muted: #5e6b7a;
    --line: #e4e9ef;
    --bg: #f4f6f9;
    --card: #ffffff;

    /* --- Status ----------------------------------------------------------------------------- */
    --good: #1f9d63;
    --bad: #d6492f;
    --warn: #e0a106;

    /* --- Shape ------------------------------------------------------------------------------
       --radius is for surfaces (cards, panels, tables, the user menu); --radius-ctl for controls
       (buttons, inputs, nav items, icon buttons); 8px for small controls. The stylesheet
       previously used 8, 9, 12 and 14px with no rule behind which went where.

       Three deliberate exceptions, all stated at their rule: pills use 999px, the avatar is a
       circle, and .pc-login-card keeps 18px because it is a hero card floating on a gradient
       rather than an inline surface. */
    --radius: 12px;
    --radius-ctl: 9px;

    /* Two layers: a tight edge and a soft lift. A single flat shadow is what makes the current
       cards look pasted on rather than raised. */
    --shadow: 0 1px 3px rgba(16,40,70,.08), 0 6px 24px rgba(16,40,70,.06);

    /* --- Frame ------------------------------------------------------------------------------ */
    --topbar-h: 60px;
    --sidebar-w: 264px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
}

h1, h2, h3 { color: var(--navy); }
h1:focus { outline: none; }
code { color: #c02d76; }

/* ---------- App frame ---------- */
.pc-app { min-height: 100vh; }

.pc-topbar {
    position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h);
    display: flex; align-items: center; gap: 14px; padding: 0 16px;
    background: var(--navy); color: #fff; z-index: 40;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
}

.pc-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
/* Navy tile, amber letter — the mockup's way round. This was inverted (amber tile, navy letter),
   which put a large amber FILL on a mark that repeats on every screen, competing with the primary
   button for the eye. Amber still serves the brand here as the letter; what it no longer does is
   fill. */
.pc-logo-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: var(--radius-ctl);
    background: linear-gradient(135deg, var(--navy), var(--navy-3));
    color: var(--amber); font-weight: 800; font-size: 18px;
    box-shadow: 0 4px 12px rgba(14,42,71,.25); flex-shrink: 0;
}
.pc-logo-lg { width: 56px; height: 56px; border-radius: var(--radius); font-size: 30px; }
.pc-wordmark { display: flex; flex-direction: column; line-height: 1; }
.pc-wordmark .w1 { font-size: 11px; letter-spacing: 3px; color: var(--amber); font-weight: 700; }
.pc-wordmark .w2 { font-size: 15px; letter-spacing: 2px; font-weight: 700; }
.pc-wordmark-lg .w1 { font-size: 14px; }
.pc-wordmark-lg .w2 { font-size: 22px; }

.pc-spacer { flex: 1; }

/* .pc-search-icon is the sidebar filter's icon; the top-bar .pc-search block it once
   shared styles with is gone (the search there was never functional). */
.pc-search-icon { opacity: .8; font-size: 13px; }

/* A raised tile on the navy bar, not a transparent hit area. Transparent buttons on a dark bar read
   as decoration until you hover them. */
.pc-iconbtn {
    background: var(--navy-2); border: 0; color: #cfe0f0; font-size: 15px; cursor: pointer;
    width: 36px; height: 36px; border-radius: var(--radius-ctl);
    display: inline-flex; align-items: center; justify-content: center;
}
/* Up the navy ramp on hover, rather than a white wash — the tile already has a colour to lighten. */
.pc-iconbtn:hover:not(:disabled) { background: var(--navy-3); color: #fff; }
.pc-iconbtn:disabled { opacity: .5; cursor: default; }
.pc-menu-toggle { font-size: 18px; }

/* User chip + profile menu.

   Click-driven, not hover. The menu carries identity, store scope and a sign-out, and a hover menu
   at this height is a moving target -- it also cannot be opened at all by touch. The old version
   needed a ::before bridge to span the gap between chip and menu, because the pointer left
   .pc-user on the way down and :hover went false before the menu could be clicked; under click
   that whole problem, and the hack, disappear.

   Shape and metrics mirror PremierPulse's panel so the two apps answer "who am I signed in as" the
   same way. Every colour goes through a token: the two stylesheets already define an identical
   palette, so nothing here needs a literal. */
.pc-user { position: relative; }
/* Amber with --on-amber, never white: at this weight white on amber fails contrast, which is why
   the mockup pairs them this way. Green was the shell's own invention and collided with the
   green NEW badge, so "person" and "new thing" wore the same colour. */
.pc-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--amber); color: var(--on-amber); font-weight: 700; font-size: 13px; cursor: default;
}
.pc-avatar-lg { width: 52px; height: 52px; font-size: 18px; }
/* The chip is a <button> now; without these it inherits the UA's button chrome and font. */
.pc-avatar-btn { border: 0; padding: 0; font-family: inherit; cursor: pointer; }
.pc-avatar-btn:hover { filter: brightness(.96); }

/* Matches .pc-notif-scrim's z-index exactly: the two topbar panels sit at the same depth and
   neither should be able to cover the other's dismiss surface. */
.pc-usermenu-scrim { position: fixed; inset: 0; z-index: 59; }
.pc-usermenu {
    position: absolute; right: 0; top: 46px; width: 274px; z-index: 60;
    background: #fff; color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius); padding: 8px;
    /* The notifications panel's shadow, not the old hover menu's. These two dropdowns sit side by
       side in the same bar and reading as one component matters more than either prior value. */
    box-shadow: 0 16px 40px rgba(16,40,70,.22);
}
.pc-pm-head { display: flex; gap: 12px; align-items: center; padding: 10px 10px 12px; }
.pc-pm-av {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--amber); color: var(--on-amber); font-weight: 700; font-size: 16px;
}
/* min-width:0 so the ellipsis below can actually engage inside a flex child. */
.pc-pm-id { min-width: 0; }
.pc-pm-n { font-weight: 700; font-size: 14px; color: var(--ink); }
.pc-pm-e { font-size: 12px; color: var(--muted); }
.pc-pm-n, .pc-pm-e { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-pm-meta { padding: 2px 10px 8px; font-size: 12.5px; }
.pc-pm-meta div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; color: var(--muted); }
.pc-pm-meta b { color: var(--ink); font-weight: 600; text-align: right; }
.pc-pm-div { height: 1px; background: var(--line); margin: 4px 2px; }
.pc-pm-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    border: 0; background: none; font-family: inherit; text-align: left;
    padding: 9px 10px; border-radius: var(--radius-ctl); font-size: 13.5px; color: var(--ink);
    cursor: pointer;
}
.pc-pm-item span { width: 16px; text-align: center; }
.pc-pm-item:hover { background: #f3f6fa; }
.pc-pm-danger { color: var(--bad); }
.pc-pm-danger:hover { background: rgba(214,73,47,.08); }
/* Selectable: the whole point of showing a version is that someone can quote it back. */
.pc-pm-ver { padding: 6px 10px 4px; font-size: 11px; color: var(--muted); user-select: text; word-break: break-all; }

/* ---------- Body: sidebar + main ---------- */
.pc-body { display: flex; padding-top: var(--topbar-h); min-height: 100vh; }

.pc-sidebar {
    position: fixed; top: var(--topbar-h); bottom: 0; left: 0; width: var(--sidebar-w);
    background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column;
    transition: transform .18s ease;
}
.sidebar-collapsed .pc-sidebar { transform: translateX(-100%); }
.pc-side-head { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.pc-side-title { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.pc-side-search {
    display: flex; align-items: center; gap: 6px; margin-top: 10px;
    background: #f7f9fc; border: 1px solid var(--line); border-radius: var(--radius-ctl); padding: 6px 9px;
}
.pc-side-search input { background: transparent; border: 0; outline: 0; width: 100%; font-size: 13px; color: var(--ink); }
/* The whole box reacts to focus, not just the invisible input inside it. */
.pc-side-search:focus-within { border-color: var(--navy-3); background: var(--card); }
.pc-nav-scroll { flex: 1; overflow-y: auto; padding: 12px; }
.pc-nav-empty { color: var(--muted); font-size: 13px; padding: 10px; text-align: center; }
.pc-side-foot { padding: 12px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }

.pc-main {
    flex: 1; margin-left: var(--sidebar-w); padding: 28px 32px; transition: margin .18s ease;
}
.sidebar-collapsed .pc-main { margin-left: 0; }

/* ---------- Content ---------- */
.pc-h1 { font-size: 26px; margin: 0 0 6px; }
.pc-lede { color: var(--muted); margin: 0 0 22px; }
.pc-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; max-width: 620px; box-shadow: var(--shadow); }
.pc-card-error { border-color: var(--bad); color: var(--bad); }
.pc-muted { color: var(--muted); }
.pc-small { font-size: 12.5px; }
.pc-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; }

.pc-profile { display: flex; align-items: center; gap: 16px; }
.pc-profile-name { font-weight: 700; font-size: 17px; color: var(--navy); }
.pc-profile-sub { color: var(--muted); font-size: 13px; margin: 2px 0 6px; }

.pc-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.pc-badge-active { background: rgba(31,157,99,.14); color: var(--good); }
.pc-badge-disabled { background: rgba(214,73,47,.14); color: var(--bad); }

.pc-facts { display: flex; gap: 40px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.pc-facts dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.pc-facts dd { margin: 4px 0 0; font-weight: 600; }

/* ---------- Buttons ---------- */
/* Three weights of action, and the colour carries the meaning:
     .pc-btn          navy   — the default. Most buttons are this.
     .pc-btn-primary  amber  — the one action a screen is FOR. Amber is reserved for it, which is
                               why the logo badge stopped being amber in step 4.
     .pc-btn-ghost    quiet  — secondary actions that still deserve a button.
   Flat, not gradients. A gradient reads as a raised object and competes with the surface it sits on;
   the mockup uses flat fills and lets shadow do the lifting. */
.pc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid transparent; border-radius: var(--radius-ctl);
    padding: 10px 15px; font-size: 13.5px; font-weight: 600;
    background: var(--navy); color: #fff;
    cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s;
}
.pc-btn:hover:not(:disabled) { background: var(--navy-2); }

.pc-btn-primary { background: var(--amber); color: var(--on-amber); }
.pc-btn-primary:hover:not(:disabled) { background: var(--amber-d); }

.pc-btn-ghost { background: var(--card); color: var(--navy); border-color: var(--line); }
.pc-btn-ghost:hover:not(:disabled) { background: #f3f6fa; }

.pc-btn:disabled { opacity: .65; cursor: default; }

/* ---------- Login ---------- */
.pc-login-shell, .pc-splash { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(1200px 600px at 50% -10%, #17385c, var(--navy)); }
.pc-splash { color: #fff; }
/* Keeps its own radius and shadow on purpose: a hero card floating on a gradient, not an inline
   surface. --radius and --shadow are tuned for cards sitting on the page background. */
.pc-login-card { background: #fff; border-radius: 18px; padding: 40px 36px; width: 380px; max-width: 92vw; box-shadow: 0 20px 60px rgba(0,0,0,.3); text-align: center; }
.pc-login-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 8px; }
.pc-login-brand .pc-wordmark { align-items: center; }
.pc-login-sub { color: var(--muted); font-size: 14px; margin: 6px 0 22px; }
.pc-login-card .pc-btn-primary { width: 100%; padding: 13px; font-size: 15px; }
.pc-login-note { color: var(--muted); font-size: 12px; margin-top: 14px; }
.pc-login-error { background: rgba(214,73,47,.1); color: var(--bad); border-radius: var(--radius-ctl); padding: 10px; font-size: 13px; margin-bottom: 16px; }

/* ---------- Sidebar nav links ---------- */
/* One nav language for the whole panel — see .pc-nav-item below. The pinned links used to have
   their own class here (amber active state, 14px, different padding), which put two designs in one
   sidebar the moment the menu tree arrived. */
.pc-nav-ico { width: 18px; text-align: center; flex-shrink: 0; font-size: 14px; color: #7a8aa0; }
.pc-nav-group { margin: 14px 8px 4px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 700; }

/* ---------- Admin pages ---------- */
.pc-h2 { font-size: 16px; margin: 0 0 12px; color: var(--navy); }
.pc-strong { font-weight: 600; color: var(--ink); }
.pc-right { text-align: right; }
.pc-mt { margin-top: 8px; }
.pc-breadcrumb { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.pc-breadcrumb a { color: var(--muted); }

.pc-toolbar { margin-bottom: 16px; }
.pc-input { padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--radius-ctl); font-size: 13px; background: #fff; color: var(--ink); }
select.pc-input { min-width: 120px; }
.pc-input-wide { display: block; width: 100%; max-width: 560px; margin-bottom: 10px; box-sizing: border-box; }
.pc-textarea { min-height: 90px; resize: vertical; font-family: inherit; }

.pc-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pc-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fbfcfe; }
.pc-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
.pc-table tr:last-child td { border-bottom: 0; }
.pc-table-tight td, .pc-table-tight th { padding: 8px 12px; }
.pc-row { cursor: pointer; }
.pc-row:hover td { background: var(--bg); }

.pc-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; box-shadow: var(--shadow); }
.pc-panel-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; gap: 12px; }

/* Home's store figures: one card per amount, then the mix in its own card. The period and scope
   are stated once above them all, so the cards carry only their own number. */
.pc-figures-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; max-width: 620px; }
.pc-figures-head .pc-h2 { margin-bottom: 0; }
.pc-figures-caveat { max-width: 620px; margin-top: 4px; }
/* auto-fit rather than three fixed columns: at 620px they sit in a row, and on a phone they fold
   to two and then one instead of clipping a currency amount. */
.pc-figures-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 14px; max-width: 620px; margin: 12px 0 14px; }
/* Tighter than a full card: a stat card holds a label and a number, not prose. */
.pc-stat-card { padding: 16px 18px; max-width: none; }
.pc-figure-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
/* Tabular figures so the amounts line up on their digits rather than drifting card to card. */
.pc-figure-value { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 4px; }

/* Income mix: one series, so one hue — the row labels carry identity, not the colour, which is why
   this is not a nine-colour rainbow. Both fills were checked against the white card rather than
   chosen by eye: --navy-4 sits at 6.39:1 and the "Other" grey at 3.47:1, clearing the 3:1 floor for
   graphical objects, and the two are 16.5 apart in OKLab (the normal-vision floor is 15) so the
   remainder never reads as just another component. */
/* Its own card now, so no divider rule is needed to separate it from the figures above. */
.pc-mix-card { margin-bottom: 18px; }
.pc-mix-head { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 10px; }
/* 2px row gap = the surface spacer between adjacent bars. */
.pc-mix-row { display: grid; grid-template-columns: 8.5rem 1fr 3.5rem; align-items: center; gap: 10px; margin-bottom: 2px; padding: 3px 0; }
.pc-mix-label { font-size: 13px; color: var(--ink); }
.pc-mix-track { background: var(--line); border-radius: 4px; height: 10px; overflow: hidden; }
/* min-width keeps a 0.2% component visible instead of vanishing to nothing. */
.pc-mix-bar { display: block; height: 100%; min-width: 2px; background: var(--navy-4); border-radius: 4px; }
.pc-mix-bar-other { background: #7d8b9d; }
.pc-mix-value { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }

@media (max-width: 520px) {
    /* The label column is the first thing to run out of room; let it shrink before the bar does. */
    .pc-mix-row { grid-template-columns: 6.5rem 1fr 3.2rem; }
}

.pc-columns { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.pc-col { flex: 1; min-width: 320px; }
.pc-col-narrow { flex: 0 0 300px; }
.pc-profile-head { margin-bottom: 18px; }

.pc-form-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.pc-btn-sm { padding: 7px 11px; font-size: 12.5px; border-radius: 8px; }
.pc-link-danger { background: none; border: 0; color: var(--bad); cursor: pointer; font-size: 13px; padding: 0; }
.pc-link-danger:hover { text-decoration: underline; }

.pc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-chip { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-family: ui-monospace, Consolas, monospace; color: var(--ink); }
/* ---- Categorised navigation (adapted from premier-connect.html) ---- */
.pc-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-ctl);
  font-size: 13.5px; font-weight: 500; color: #42526a;
  cursor: pointer; user-select: none; text-decoration: none;
}
.pc-nav-item:hover { background: #f3f6fa; }
.pc-nav-item:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.pc-nav-item.active { background: #eaf1f9; color: var(--navy); font-weight: 600; }
.pc-nav-lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-nav-caret { font-size: 10px; color: #9aa7b5; transition: transform .18s; flex-shrink: 0; }
.pc-nav-section.open > .pc-nav-caret { transform: rotate(180deg); }
.pc-nav-children { margin-left: 14px; padding-left: 10px; border-left: 1px solid #eef2f6; }
.pc-nav-children .pc-nav-item { font-size: 13px; }
/* Child bullets recede: at this depth the icon is a tick mark, not an icon. */
.pc-nav-children .pc-nav-ico { font-size: 6px; color: #c0cad6; }
.pc-nav-badge {
  background: var(--green); color: #fff; font-size: 10px; font-weight: 800;
  padding: 1px 7px; border-radius: 10px; letter-spacing: .3px;
}
/* SOON is not NEW. Without this both render green and a "coming soon" item reads as newly
   available — the opposite of what it means. */
.pc-nav-badge-soon { background: #e7edf3; color: #7a8aa0; }
.pc-nav-ext { font-size: 10px; color: #9aa7b5; }
.pc-nav-note { padding: 8px 10px; font-size: 12px; color: var(--muted); }
.pc-nav-note-error { color: var(--bad); }

/* Menu editor: stacked form fields, the placement warning, and a hidden node. */
.pc-form-col { display: flex; flex-direction: column; gap: 8px; }
.pc-card-warn { background: #fff8e6; border: 1px solid #e8d08a; border-radius: var(--radius-ctl); padding: 8px 10px; margin: 2px 0; }
/* Dimmed AND italic: "hidden" must not depend on colour alone. */
.pc-row-disabled { opacity: .6; font-style: italic; }

/* An item withheld from an otherwise-granted section. Struck through as well as recoloured, so the
   state survives a monochrome screen and does not rely on colour alone. */
.pc-chip-denied { opacity: .65; text-decoration: line-through; border-style: dashed; }
.pc-chip button { margin-left: 6px; }
.pc-link { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 11px; padding: 0; }
.pc-link:hover { text-decoration: underline; }

/* Pre-loaded from the directory, never used. Deliberately quiet -- it is a state, not a problem, and
   the row's real status badge next to it should stay the loud one. */
.pc-badge-staged { background: rgba(14,42,71,.08); color: var(--muted); margin-left: 6px; }
.pc-badge-system { background: rgba(14,42,71,.1); color: var(--navy); }
.pc-badge-custom { background: rgba(242,161,59,.18); color: var(--amber-d); }
.pc-badge-grant { background: rgba(31,157,99,.14); color: var(--good); }
.pc-badge-deny { background: rgba(214,73,47,.14); color: var(--bad); }

.pc-tree-row { display: flex; align-items: center; gap: 9px; padding: 7px 4px; border-bottom: 1px solid var(--line); font-size: 14px; }
.pc-tree-row:last-child { border-bottom: 0; }
.pc-tree-type { width: 20px; text-align: center; }

/* ---------- Tools / launcher ---------- */
.pc-section { margin-top: 30px; }
.pc-badge-kind { background: rgba(14,42,71,.1); color: var(--navy); }
.pc-badge-legacy { background: rgba(224,161,6,.16); color: var(--warn); }
.pc-tool-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.pc-tool-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; width: 200px; box-shadow: var(--shadow); }
.pc-tool-name { font-weight: 700; color: var(--navy); margin-bottom: 2px; }
.pc-tool-card .pc-btn { margin-top: 12px; }

/* ---------- Blazor framework UI (from template; index.html depends on these) ---------- */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); box-sizing: border-box;
    display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.blazor-error-boundary {
    background: #b32121; padding: 1rem 1rem 1rem 1rem; color: white;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

.loading-progress {
    position: absolute; display: block; width: 8rem; height: 8rem; inset: 20vh 0 auto 0; margin: 0 auto;
}
.loading-progress circle {
    fill: none; stroke: #e0e0e0; stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: var(--amber);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
    position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }

/* ---------- Calendar ---------- */

/* EVERY RULE BELOW THAT TOUCHES .pc-panel IS PREFIXED .pc-calendar-page, AND MUST STAY THAT WAY.
   .pc-panel is used by thirteen other files -- Broadcasts, Store Directory, the Home week panel and
   the Admin panels. An unscoped rule here restyles all of them, and this page would look exactly as
   intended while it happened, so nothing would point at the cause. */
/* Scoped, and NOT because .pc-page-head sounded generic -- because StoreDirectory.razor already uses
   that class, with no rule behind it, as a plain div stacking a heading over its subtitle. Styling
   the bare selector laid this page's flex row over that page, putting its heading and subtitle side
   by side. Caught by grepping the class name before trusting that a new-looking name was unused. */
.pc-calendar-page .pc-page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 22px;
}
.pc-calendar-page .pc-page-head .pc-lede { margin-bottom: 0; }
.pc-calendar-page .pc-head-actions { display: flex; gap: 10px; align-items: center; }

/* The title sits in its own bar, ruled off from the content, rather than sharing one padded box. */
.pc-calendar-page .pc-panel { padding: 0; }
.pc-calendar-page .pc-panel > .pc-h2 {
    padding: 15px 18px; border-bottom: 1px solid var(--line); margin: 0;
}
.pc-calendar-page .pc-panel-body { padding: 8px 18px 16px; }

/* The event form, in the prototype's .fld pattern: the label sits ABOVE its field, so every field
   starts at the same left edge. Labels beside fields is what made this form ragged -- each row began
   wherever its own label happened to end, giving "Starts", "Time zone" and "Repeats" four different
   left edges and no column to read down. */
.pc-calendar-page .pc-fld {
    display: flex; flex-direction: column; gap: 5px;
    font-size: 12.5px; font-weight: 600; color: #37475a;
}
.pc-calendar-page .pc-fld > .pc-input, .pc-calendar-page .pc-fld > .pc-textarea {
    font-weight: 400; font-size: 13.5px;
}
/* Fields that belong together on one line -- start/end, type/all-day. Wraps rather than squashing,
   so a narrow window stacks them instead of shrinking the date inputs below usable width. */
.pc-calendar-page .pc-fld-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.pc-calendar-page .pc-fld-row > .pc-fld { flex: 0 1 auto; }
/* .pc-check carries no rule of its own anywhere in this stylesheet, so on a flex-end row the
   checkbox would hang off the bottom of the select beside it. Matching the input height puts it
   level with the field instead. */
.pc-calendar-page .pc-fld-row > .pc-check {
    display: flex; align-items: center; gap: 6px; height: 35px; font-size: 13.5px;
}

.pc-calendar-page .pc-form-grid { display: grid; gap: 14px; }

/* Destructive left, safe right, primary last. Delete is deliberately far from Save: they were
   adjacent before, which puts "remove this event forever" one slip away from "keep my edits". */
.pc-calendar-page .pc-form-actions {
    display: flex; align-items: center; gap: 10px;
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.pc-calendar-page .pc-form-actions .pc-spacer { flex: 1; }

/* Seven columns of whole weeks, so the grid is always rectangular and a month never reflows into a
   different shape as you page through it. */
/* Separated cards rather than a hairline table: the gap does the dividing, so each cell carries its
   own border and radius. */
.pc-cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
    margin-bottom: 16px;
}
.pc-cal-head {
    background: var(--card); padding: 8px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; color: var(--muted); text-align: center;
}
.pc-cal-cell {
    background: #fff; border: 1px solid var(--line); border-radius: 9px;
    min-height: 82px; padding: 7px 8px;
}
/* Days from the neighbouring months are present so the weeks are whole, but recede. */
.pc-cal-outside { background: #fafbfd; }
.pc-cal-outside .pc-cal-date { color: var(--muted); }
/* Navy, not amber. This file reserves amber for "the one action a screen is FOR", and today's date
   is not an action -- it is a position. Marking it amber spent the page's loudest colour on
   something nobody clicks, and left the real action competing with it. */
.pc-cal-today { border-color: var(--navy-3); box-shadow: 0 0 0 2px rgba(29,77,124,.15); }
.pc-cal-date { font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }

/* One line per event. Truncated rather than wrapped: a cell that grows with its contents makes the
   whole grid jump about as you page through months. */
.pc-cal-event {
    font-size: 10.5px; padding: 1px 5px; border-radius: 5px; margin-top: 3px;
    background: rgba(14,42,71,.08); color: var(--navy);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default;
}
.pc-cal-meeting   { background: rgba(14,42,71,.10);  color: var(--navy); }
.pc-cal-pvn       { background: rgba(242,161,59,.18); color: var(--amber-d); }
.pc-cal-finance   { background: rgba(31,157,99,.14);  color: var(--good); }
.pc-cal-training  { background: rgba(59,130,246,.14); color: #1d4ed8; }
.pc-cal-milestone { background: rgba(147,51,234,.14); color: #6d28d9; }
.pc-cal-other     { background: rgba(14,42,71,.06);   color: var(--muted); }

.pc-cal-day { padding: 10px 0; border-bottom: 1px solid var(--line); }
.pc-cal-day:last-child { border-bottom: 0; }
.pc-cal-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; flex-wrap: wrap; }

/* The Home panel: a week at a glance, denser than the calendar page. */
.pc-week-row { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.pc-week-row:last-child { border-bottom: 0; }
.pc-week-day { min-width: 5.5rem; font-size: 12px; font-weight: 700; color: var(--muted); }

/* ---- Subscribe panel ------------------------------------------------------------------------ */

.pc-sub-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
/* The vendor buttons are anchors, not buttons, so they need the button box explicitly. */
.pc-sub-buttons > a { display: inline-flex; align-items: center; text-decoration: none; }

/* A button that reads as a link: for the secondary way out of a choice, where a real button would
   compete with the action it sits under. */
.pc-linkish {
    background: none; border: 0; padding: 0; margin-top: 8px;
    color: var(--navy); text-decoration: underline; cursor: pointer; display: block;
}
.pc-linkish:hover { color: var(--amber-d); }

.pc-sub-phone { margin: 12px 0; }
.pc-qr { max-width: 200px; margin: 8px 0; }
.pc-qr svg { width: 100%; height: auto; display: block; }

/* DEVICE DETECTION, AND WHY IT IS CSS.
   The iPhone button is the only one that must cross a device boundary: the reader is at their work
   PC, where a webcal:// link opens Outlook rather than their phone. So a desktop gets a QR to scan
   and a phone gets a link to tap.

   A pointer media query rather than the user agent, because UA sniffing is where this kind of
   feature rots -- it needs a new exception every time a vendor renames itself. Both elements are
   always in the DOM and only one is displayed, so nothing here decides anything irreversible: a
   touchscreen laptop matches "coarse" and guesses wrong, and the toggle inside each block reveals
   the other. A wrong guess costs a click. */
.pc-sub-qr, .pc-sub-tap { display: none; }
@media (pointer: fine)   { .pc-sub-qr  { display: block; } }
@media (pointer: coarse) { .pc-sub-tap { display: block; } }
/* No pointer support at all (older browsers): show the QR, which is the desktop case and the more
   likely one for a browser old enough to lack the query. */
@supports not (pointer: fine) { .pc-sub-qr { display: block; } }

.pc-sub-phone-alt { margin: 12px 0; padding: 12px; border: 1px dashed var(--line); border-radius: 8px; }
.pc-sub-phone-alt .pc-qr { max-width: 200px; }
/* The escape hatch shows whichever the media query hid, so each half hides its own duplicate. */
@media (pointer: fine)   { .pc-sub-phone-alt .pc-qr { display: none; } }
@media (pointer: coarse) { .pc-sub-phone-alt > a { display: none; } }

.pc-sub-manual { margin: 12px 0; }
.pc-sub-manual summary { cursor: pointer; color: var(--muted); }
.pc-sub-reset { margin-top: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- Admin: calendar subscriptions ----------------------------------------------------------- */

.pc-sub-revoked { color: var(--muted); text-decoration: line-through; }
.pc-sub-never { color: var(--muted); font-style: italic; }

/* ---- Notifications: the bell, its dropdown, and arrival toasts -------------------------------
   Every value here is the mockup's (`reference/premier-connect.html`, "notification center" and
   "email-style broadcast toasts"), re-expressed against the tokens above so a brand change still
   propagates. */

.pc-notif-wrap { position: relative; }

/* The badge sits on the bell tile, so the bell must be the positioned ancestor. */
.pc-notif-wrap .pc-iconbtn { position: relative; }
/* Bordered in --navy so the red disc reads as a badge ON the tile rather than a dot beside it. */
.pc-ncount {
    position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 9px; background: var(--bad); color: #fff; font-size: 10px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--navy);
}

/* Catches the next click anywhere and closes the panel. Invisible and unstyled on purpose: it is a
   hit area, not a dimmer — dimming the page behind a dropdown would read as a modal. */
.pc-notif-scrim { position: fixed; inset: 0; z-index: 59; }

.pc-notif-panel {
    position: absolute; top: 46px; right: 0; width: 340px; max-height: 440px; overflow-y: auto;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 16px 40px rgba(16,40,70,.22); z-index: 60;
}
/* Sticky, so "Mark all read" stays reachable however far down the twenty items you have scrolled. */
.pc-notif-h {
    display: flex; align-items: center; justify-content: space-between; padding: 13px 15px;
    border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff;
}
.pc-notif-h h4 { font-size: 14px; font-weight: 700; color: var(--ink); margin: 0; }
.pc-notif-h button {
    font-size: 11.5px; color: var(--navy-3); background: none; border: 0; font-weight: 700; cursor: pointer;
}
.pc-notif-empty { padding: 30px 16px; text-align: center; color: var(--muted); font-size: 13px; }
.pc-notif-item {
    display: flex; gap: 11px; padding: 12px 15px; border-bottom: 1px solid #eef2f6; cursor: pointer;
}
.pc-notif-item:last-child { border-bottom: 0; }
.pc-notif-item:hover { background: #f7f9fc; }
.pc-notif-item.unread { background: #f3f8ff; }
/* Hidden rather than absent, so a read row and an unread one keep the same text indent. */
.pc-notif-item .nb {
    width: 8px; height: 8px; border-radius: 50%; background: var(--amber); margin-top: 5px;
    flex-shrink: 0; visibility: hidden;
}
.pc-notif-item.unread .nb { visibility: visible; }
.pc-notif-item .nbody h5 { font-size: 13px; font-weight: 700; margin: 0 0 2px; color: var(--ink); }
/* Two lines then an ellipsis: the panel lists twenty of these, and a long announcement would push
   the rest out of reach. */
.pc-notif-item .nbody p {
    font-size: 12px; color: var(--muted); line-height: 1.4; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pc-notif-item .nbody .nt { font-size: 11px; color: #9aa7b5; margin-top: 3px; }

/* Toasts stack below the top bar on the right, clear of the bell they came from. */
.pc-toast-stack {
    position: fixed; top: calc(var(--topbar-h) + 12px); right: 18px; z-index: 90;
    display: flex; flex-direction: column; gap: 10px; width: 330px; max-width: 92vw;
}
/* The left border is the priority: amber for an announcement, red when it is urgent. */
.pc-toast {
    background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--amber);
    border-radius: 11px; box-shadow: 0 10px 30px rgba(16,40,70,.18);
    padding: 12px 30px 12px 14px; cursor: pointer; position: relative;
}
.pc-toast.high { border-left-color: var(--bad); }
.pc-toast-title {
    display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--ink);
}
.pc-toast-pill {
    font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 8px;
    background: #fdf0dc; color: var(--amber-d); letter-spacing: .3px;
}
.pc-toast-pill.high { background: #f7d9d3; color: #9a2a18; }
.pc-toast p {
    font-size: 12px; color: var(--muted); margin: 4px 0 0; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pc-toast-x {
    position: absolute; top: 8px; right: 10px; background: none; border: 0; padding: 0;
    color: #c0cad6; font-size: 14px; cursor: pointer; line-height: 1;
}
.pc-toast-x:hover { color: var(--muted); }

/* ---- Home: the two-column top row ------------------------------------------------------------
   Figures left, announcements right, both capped at the 620px module .pc-card already uses.

   NOT fr units. The columns were 1.3fr / 1fr, which on a wide monitor handed the left column ~860px
   while everything inside it -- .pc-figures-grid, .pc-figures-head, and every .pc-card -- stops at
   max-width: 620px. The surplus became ~240px of dead space INSIDE the left column, so the
   announcements panel (a .pc-panel, which has no cap and therefore does fill its track) appeared
   stranded far to the right with a hole beside it. Sizing the tracks to the cap the content already
   obeys closes that hole, and makes the two columns equal instead of nominally 1.3:1 but actually
   620:whatever-is-left.

   justify-content: start keeps the pair left-aligned rather than letting leftover width push them
   apart again. WeekAheadPanel sits outside this grid and is a .pc-card, so its 620px lines up under
   the figures column on its own.

   It folds to one column early (1100px) because three stat cards plus a mix bar in a half-width
   column is where the figures start clipping, not where the viewport runs out. */
.pc-home-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 620px)); gap: 16px;
    align-items: start; justify-content: start;
}
@media (max-width: 1100px) {
    .pc-home-grid { grid-template-columns: 1fr; }
}

/* ---- Broadcasts: announcement rows, shared by the reader page and the Home panel --------------
   Both surfaces render the same row so a broadcast is never described two different ways. The
   reader's rows are divs that open a modal; Home's are links to the reader page. */

/* Scoped to its own page for the same reason the calendar's rules are: .pc-page-head is a bare
   stacking div on StoreDirectory, and an unscoped flex row here would lay that page out sideways. */
.pc-broadcasts-page .pc-page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 22px;
}
.pc-broadcasts-page .pc-page-head .pc-lede { margin-bottom: 0; }
.pc-broadcasts-page .pc-head-actions { display: flex; gap: 10px; align-items: center; }

/* The list is one panel with hairline-separated rows, not a stack of cards: a card each turned six
   announcements into six competing surfaces. */
.pc-ann-list { padding: 6px 18px 8px; }
.pc-ann-panel { padding: 0 18px 12px; }
.pc-ann-panel .pc-panel-head { padding: 0; margin: 0; border-bottom: 1px solid var(--line); }
.pc-ann-panel .pc-panel-head .pc-h2 { margin: 15px 0; }
.pc-ann-panel .pc-panel-head .pc-btn { margin: 10px 0; }

.pc-ann {
    display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid #eef2f6;
    cursor: pointer; color: inherit; text-decoration: none;
}
.pc-ann:last-child { border-bottom: none; }
.pc-ann:hover .a-body h5 { color: var(--navy-3); }
/* The icon is the status: a bell while unread, an opened envelope once read, amber when it is a
   high-priority announcement. */
.pc-ann .a-ic {
    width: 34px; height: 34px; border-radius: var(--radius-ctl); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
    background: #eaf1f9; color: var(--navy);
}
.pc-ann .a-ic.amber { background: #fdf0dc; color: var(--amber-d); }
.pc-ann .a-body { min-width: 0; }
.pc-ann .a-body h5 {
    font-size: 13.5px; font-weight: 700; margin: 0; color: var(--ink);
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
/* Two lines then an ellipsis: the row is a summary, and the modal is where the whole thing is read. */
.pc-ann .a-body p {
    font-size: 12.5px; color: var(--muted); margin: 2px 0 0; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pc-ann .a-body .when { font-size: 11px; color: #9aa7b5; margin-top: 3px; }

/* HIGH says the sender marked it urgent; NEW says this reader has not opened it. Two different
   facts, so two different marks -- one a filled pill, the other a bare amber word. */
.pc-pill {
    font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 8px;
    background: #fdf0dc; color: var(--amber-d); letter-spacing: .3px;
}
.pc-pill-high { background: #f7d9d3; color: #9a2a18; }
.pc-new { color: var(--amber-d); font-size: 10px; font-weight: 800; }

/* Manage table: the action column is the only one that must not wrap mid-button. */
.pc-broadcasts-page .pc-table-wrap { overflow-x: auto; }
.pc-broadcasts-page .pc-cell-actions { text-align: right; white-space: nowrap; }
.pc-broadcasts-page .pc-cell-actions .pc-btn { margin-left: 6px; }
.pc-broadcasts-page .pc-table-note { margin-top: 10px; }

/* Form fields, the same label-above-field pattern the calendar's event form uses. Scoped rather
   than shared for now: the calendar's copy is scoped too, and lifting both into one unscoped rule
   is a change to that page as well as this one. */
.pc-broadcasts-page .pc-fld {
    display: flex; flex-direction: column; gap: 5px;
    font-size: 12.5px; font-weight: 600; color: #37475a;
}
.pc-broadcasts-page .pc-fld > .pc-input { font-weight: 400; font-size: 13.5px; }
.pc-broadcasts-page .pc-fld-row { display: flex; gap: 14px; flex-wrap: wrap; }
.pc-broadcasts-page .pc-fld-row > .pc-fld { flex: 1 1 200px; }
.pc-broadcasts-page .pc-check {
    display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #37475a;
}

/* ---- Modal ----------------------------------------------------------------------------------
   The app's first modal. Kept minimal on purpose: it holds a broadcast to read or a short form,
   and a heavier dialog framework would be more machinery than either needs. */
.pc-modal-overlay {
    position: fixed; inset: 0; background: rgba(10,32,56,.5); z-index: 95;
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
.pc-modal {
    background: #fff; border-radius: 14px; max-width: 600px; width: 100%; max-height: 84vh;
    overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,.3);
}
.pc-modal-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 18px 22px 12px;
}
.pc-modal-head h2 {
    font-size: 18px; font-weight: 800; margin: 0;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.pc-modal-x { background: none; border: 0; color: #9aa7b5; font-size: 18px; cursor: pointer; line-height: 1; }
.pc-modal-x:hover { color: var(--ink); }
.pc-modal-body { padding: 0 22px 4px; display: grid; gap: 12px; }
/* Broadcast bodies are typed as plain text, so their line breaks have to be honoured rather than
   collapsed -- otherwise a message written as paragraphs arrives as one block. */
.pc-prose { white-space: pre-wrap; line-height: 1.55; font-size: 14px; color: var(--ink); }
.pc-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px 20px; }
/* Send-now on the left, the buttons on the right: the checkbox is a property of the thing being
   saved, not another action. */
.pc-modal-foot-split { justify-content: space-between; align-items: center; }

/* The bell's own error line, for a "Mark all read" the server refused. */
.pc-notif-error { padding: 10px 15px; font-size: 12px; color: var(--bad); background: rgba(214,73,47,.08); }