/* =====================================================================
   Retail Compliance Monitor — shared theme (used across the entire app)
   Source design: Store Manager Dashboard.html
   Audience may have little formal education: keep it large, plain, and
   show status as colour + icon + word (never colour alone).
   ===================================================================== */

:root {
  --rc-accent: #566372;  --rc-accent-dark: #45505d;
  --rc-red:   #b3261e;   --rc-red-bg:   #fbecea; --rc-red-bd:   #f1c7c2; --rc-red-tx:   #8a1c16;
  --rc-amber: #b06f00;   --rc-amber-bg: #fdf3e2; --rc-amber-bd: #f0d9ab; --rc-amber-tx: #8a5800;
  --rc-green: #1f7a4d;   --rc-green-bg: #eaf4ee; --rc-green-bd: #c4e3d1; --rc-green-tx: #1a6741;
  --rc-ink:   #1b1e22;   --rc-muted:    #6b747c; --rc-line:     #e3e6e9;
  /* The AI minute taker (script 148). Purple is used for one thing only in this
     app: something a machine wrote that no person has read yet. Never for a
     status, never decoratively -- if purple stops meaning that, the tint stops
     being information. */
  --rc-ai:    #574183;   --rc-ai-bg:    #f7f4fd; --rc-ai-bd:    #ddd4ee;
}

body {
  background: #f3f4f5;
  font-family: 'Public Sans', system-ui, -apple-system, sans-serif;
  color: var(--rc-ink);
  -webkit-font-smoothing: antialiased;
}

.rc-container { max-width: 1140px; }
.rc-muted { color: var(--rc-muted); }

/* Summary tiles (Tenants.aspx's Tile() helper, Invoice.aspx's line totals) and
   the money figures inside them. Designed in Docs/BillingPageMockup.html, which
   carries its own copy of this CSS scoped to .rc-app for that document only --
   these were never copied into the real stylesheet, so every summary tile in
   the live app has been rendering as plain unstyled text. */
.rc-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-tile-k { font-size: 11px; letter-spacing: .07em; color: var(--rc-muted); font-weight: 700; text-transform: uppercase; }
.rc-tile-v { font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.rc-tile-s { font-size: 12px; color: var(--rc-muted); }

/* ---- Top header / nav ---- */
.rc-header { background: #fff; }
.rc-brand  { font-size: 16px; letter-spacing: -.01em; color: #2b3138; }
.rc-logo {
  width: 52px; height: 52px; border-radius: 10px; background: #eef1f3;
  border: 1px dashed #c2cbd2; font-family: monospace; font-size: 10px;
  letter-spacing: .04em; color: #8b959d; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
/* Once a real company logo is set, drop the dashed-border / grey-fill placeholder
   look -- otherwise a logo with a transparent background renders "inside" the
   placeholder box instead of cleanly replacing it. */
.rc-logo.rc-logo-set { background: none; border: none; }
.rc-nav-link { color: #5c636b; font-weight: 500; border-radius: 8px; font-size: 15px; }
.rc-nav-link:hover { background: #eef1f3; color: #2b3138; }
.rc-nav-link.active { background: var(--rc-accent); color: #fff; font-weight: 600; }
.rc-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--rc-accent); font-size: 14px; }

/* ---- Buttons ---- */
.btn { min-height: 42px; }
.btn-rc-accent { background: var(--rc-accent); color: #fff; font-weight: 600; }
.btn-rc-accent:hover, .btn-rc-accent:focus { background: var(--rc-accent-dark); color: #fff; }

/* ---- Status pills (colour + icon + word) ---- */
.rc-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 50rem; padding: .5rem 1rem; font-weight: 700; font-size: 14px; border: 1px solid;
}
.rc-pill-red   { background: var(--rc-red-bg);   color: var(--rc-red-tx);   border-color: var(--rc-red-bd); }
.rc-pill-amber { background: var(--rc-amber-bg); color: var(--rc-amber-tx); border-color: var(--rc-amber-bd); }
.rc-pill-green { background: var(--rc-green-bg); color: var(--rc-green-tx); border-color: var(--rc-green-bd); }
.rc-pill-grey  { background: #eef1f3;            color: #5c636b;            border-color: #dfe4e8; }
/* "New" -- an unread notification (Notifications.aspx / PlatformPortal.aspx, script 163).
   Blue is not used anywhere else in this app, so it is free to mean exactly this: something
   nobody has looked at yet. Its opposite is .rc-pill-grey's "Seen". */
.rc-pill-blue  { background: #eaf1fb;            color: #1c5fa8;            border-color: #cfe0f4; }
/* Compact variant, for pills sitting inside a table row rather than a headline
   panel (the NCR Register's Risk and Status columns -- script 123). */
.rc-pill-sm    { padding: .25rem .6rem; font-size: 12px; gap: .3rem; }

/* ---- Branch-category tag (what a branch IS -- script 111) ----
   Deliberately quieter and smaller than .rc-pill: a category is a neutral
   label, not a status, and must not compete with the Active/Inactive pill
   sitting beside it in the same row. */
.rc-cat {
  display: inline-block; font-size: 12px; font-weight: 700; line-height: 1;
  padding: .28rem .5rem; border-radius: 6px; border: 1px solid #dfe4e8;
  background: #eef1f3; color: #5c636b; white-space: nowrap;
}
.rc-cat-store { background: #eef2f7; color: #3f5473; border-color: #d3dce7; }
.rc-cat-ho    { background: #f2eefa; color: #574183; border-color: #ddd4ee; }
.rc-cat-dc    { background: #eaf3f5; color: #2a6470; border-color: #c8dfe4; }

/* ---- Row cards ---- */
.rc-rowcard { background: #fff; border: 1px solid var(--rc-line); transition: box-shadow .15s ease; }
.rc-rowcard:hover { box-shadow: 0 2px 12px rgba(27,30,34,.09); }
.rc-rowcard.rc-red   { border-left: 6px solid var(--rc-red); }
.rc-rowcard.rc-amber { border-left: 6px solid var(--rc-amber); }
.rc-rowcard.rc-green { border-left: 6px solid var(--rc-green); }

/* ---- Icon boxes ---- */
.rc-iconbox {
  width: 46px; height: 46px; border-radius: 10px; flex-shrink: 0; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
}
.rc-iconbox-red   { background: var(--rc-red-bg);   color: var(--rc-red); }
.rc-iconbox-amber { background: var(--rc-amber-bg); color: var(--rc-amber); }
.rc-iconbox-green { background: var(--rc-green-bg); color: var(--rc-green); }
.rc-iconbox-grey  { background: #eef1f3;            color: #5c636b; }

/* ---- Drill-grid child icon (node vs store) ---- */
.rc-child-icon {
  width: 38px; height: 38px; border-radius: 9px; font-size: 16px;
  background: #eef1f3; color: #5c636b;
}

/* ---- Escalation badge (shown under the status of a climbing overdue item) ---- */
.rc-esc {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .4rem; font-size: 12px; font-weight: 600; line-height: 1;
  padding: .2rem .5rem; border-radius: 6px;
  background: var(--rc-red-bg); color: var(--rc-red-tx); border: 1px solid var(--rc-red-bd);
}

/* Quiet variant of the same badge, for "this has been passed up the chain"
   on an NCR register row, where the finding is being handled rather than
   going wrong (script 123). */
.rc-esc-quiet {
  background: #eef2f7; color: #3f5473; border-color: #d3dce7;
}

/* ---- Attached evidence shown in the NCR dialog. The thumbnail is the point:
   until Cloudinary is configured an upload is a data: URI, which a browser
   refuses to open as a top-level navigation, so showing it inline is what
   actually lets somebody SEE the photo. The link around it still opens it
   full size, via the blob conversion in NCRRegister.aspx. ---- */
.rc-evidence-thumb {
  max-width: 240px; max-height: 180px; width: auto; height: auto;
  display: block; margin-top: .35rem; background: #fff;
  border: 1px solid var(--rc-line); border-radius: 8px; padding: 3px;
}
.rc-evidence:hover .rc-evidence-thumb { border-color: #c2cbd2; }

/* ---- Choice tiles (LogNCR.aspx's "what kind of thing happened" and "how
   serious is it") -- the paper form's tick boxes drawn as real blocks, so a
   choice is something you can hit with a thumb rather than a 13px dot.

   The radio is a SIBLING placed before the label, not a child of it: that is
   what lets the selected look be pure CSS (`input:checked + .rc-tile`) with
   no `:has()` and no script. The label carries left padding to leave room for
   the radio, which is positioned into that gap. ---- */
.rc-tile-wrap { position: relative; height: 100%; }
.rc-tile-wrap > input[type="radio"] {
  position: absolute; top: 1rem; left: 1rem; margin: 0; z-index: 1; cursor: pointer;
}
.rc-tile {
  display: block; height: 100%; margin: 0; cursor: pointer;
  padding: .85rem 1rem .85rem 2.6rem;
  border: 1px solid var(--rc-line); border-radius: 12px; background: #fff;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.rc-tile:hover { border-color: #c2cbd2; box-shadow: 0 2px 10px rgba(27,30,34,.07); }
.rc-tile-title {
  display: flex; align-items: center; gap: .45rem;
  font-weight: 600; color: #2b3138; font-size: 15px; line-height: 1.3;
}
.rc-tile-desc {
  display: block; font-size: 13px; color: var(--rc-muted);
  margin-top: .3rem; line-height: 1.4;
}
/* Selected: accent border plus a neutral wash. The wash is deliberately NOT the
   accent colour -- a tenant can rebrand --rc-accent to anything (Demo Company is
   red), and a red-filled tile would read as an error rather than a choice. */
.rc-tile-wrap > input[type="radio"]:checked + .rc-tile {
  border-color: var(--rc-accent); background: #f4f6f8;
  box-shadow: inset 0 0 0 1px var(--rc-accent);
}
.rc-tile-wrap > input[type="radio"]:focus-visible + .rc-tile {
  outline: 2px solid var(--rc-accent); outline-offset: 2px;
}

/* Multi-tick groups (event category, body part, notification, evidence): no
   dot at all -- the checkbox is fully invisible and covers the whole tile as
   the click target, so the ONLY visible cue for "ticked" is the tile's own
   border-plus-wash, same treatment as the radio tiles above minus the dot.
   Darius, 2026-08-18: the native checkbox sitting next to the tile read as
   two separate controls rather than one block you tick. */
.rc-tile-wrap > input[type="checkbox"] {
  position: absolute; inset: 0; margin: 0; z-index: 1; cursor: pointer; opacity: 0;
}
.rc-tile-wrap > input[type="checkbox"] + .rc-tile { padding-left: 1rem; }
.rc-tile-wrap > input[type="checkbox"]:checked + .rc-tile {
  border-color: var(--rc-accent); background: #f4f6f8;
  box-shadow: inset 0 0 0 1px var(--rc-accent);
}
.rc-tile-wrap > input[type="checkbox"]:focus-visible + .rc-tile {
  outline: 2px solid var(--rc-accent); outline-offset: 2px;
}

/* Points at the ONE box a refusal was about (LogIncident.aspx, script 150
   follow-up). Validation lives in the stored proc, not the browser, on every
   tabbed hardcoded document -- so when a Submit is refused, something has to
   show WHICH box, not just which tab. Cleared the moment the person starts
   fixing it (see rcHighlightField in the page's own script). */
.rc-field-invalid { border-color: var(--rc-red) !important; box-shadow: 0 0 0 3px var(--rc-red-bg) !important; }
.rc-field-invalid-group { outline: 2px solid var(--rc-red); outline-offset: 6px; border-radius: 12px; }

/* ---- Missed-streak badge (Daily forms only -- sits inline next to the form name,
   since a Daily form's own deadline never carries urgency forward on its own). ---- */
.rc-missed-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  margin-left: .5rem; font-size: 12px; font-weight: 700; line-height: 1;
  padding: .2rem .55rem; border-radius: 50rem; vertical-align: middle;
  background: var(--rc-red-bg); color: var(--rc-red-tx); border: 1px solid var(--rc-red-bd);
  white-space: nowrap;
}

/* ---- Section headings ---- */
.rc-section-title { font-size: 19px; font-weight: 700; margin: 0; }

/* ---- Cards (input forms) ---- */
.rc-card-header { background: var(--rc-accent); color: #fff; font-weight: 600; }

/* ---- Checkbox list (store tagging) ---- */
/* asp:CheckBoxList with RepeatLayout="Flow" renders a bare <span>, i.e. an INLINE
   box. That is invisible in normal use, but the product tour's spotlight is a
   box-shadow -- and a shadow on an inline element is painted once per LINE BOX, so
   highlighting a four-line checkbox list drew four overlapping dark rectangles with
   only the last line cut out (screenshot from Darius, 2026-08-11). One block box,
   one shadow. No other visual effect: every one of these already sits on its own
   line under a block label. rc-tour.js has a general guard for anything else inline. */
.rc-checklist { display: block; }
.rc-checklist label { margin-left: .4rem; font-size: 16px; }
.rc-checklist input[type="checkbox"] { width: 1.1rem; height: 1.1rem; }
.rc-checklist td { padding: .35rem 1.25rem .35rem 0; }
.rc-checklist span { display: inline-block; margin-bottom: .6rem; }

/* ---- GridView styled as a Bootstrap table ---- */
.rc-grid { width: 100%; margin: 0; }
.rc-grid th {
  background: #f7f9fa; color: #5c636b; font-weight: 600; font-size: 14px;
  border-bottom: 1px solid var(--rc-line); padding: .75rem 1rem; text-align: left;
}
.rc-grid td { padding: .75rem 1rem; border-bottom: 1px solid #eef1f3; font-size: 15px; vertical-align: middle; }
.rc-grid tr:hover td { background: #f9fafb; }
/* An already-read notification row (script 163) -- quieter than an unread one, without
   disappearing: still fully readable, just visually receding compared to a "New" row. */
.rc-grid tr.rc-row-read td { background: #f8f9fa; }
.rc-grid .rc-grid-pager td { background: #fff; border-bottom: none; padding-top: 1rem; }
.rc-grid .rc-grid-pager a, .rc-grid .rc-grid-pager span {
  display: inline-block; padding: .25rem .6rem; margin: 0 .15rem; border-radius: 6px;
  text-decoration: none; color: var(--rc-accent); border: 1px solid var(--rc-line);
}
.rc-grid .rc-grid-pager span { background: var(--rc-accent); color: #fff; border-color: var(--rc-accent); }

/* ---------------------------------------------------------------------
   Companies list: click a row to reveal that company's actions.
   The buttons used to sit in a 6-button column on every row; they now
   live in a second, collapsed row underneath (Tenants.aspx, 2026-08-04).

   The two rows must read as ONE band: the company row therefore drops its
   bottom border and the detail row carries it, so a collapsed pair looks
   exactly like a single row and an expanded pair stays visually joined.
   The detail cell has no padding of its own -- the collapsed div inside it
   must be able to reach zero height, or every row gains a permanent gap.
   --------------------------------------------------------------------- */
.rc-companies .rc-row-toggle { cursor: pointer; }
.rc-companies .rc-row-toggle > td { border-bottom: 0; }
.rc-companies .rc-detail-row > td { padding: 0 1rem; border-bottom: 1px solid #eef1f3; }
.rc-companies .rc-detail-row:hover > td { background: transparent; }
.rc-companies .rc-chev {
  font-size: 11px; color: #9aa3ab; margin-right: .45rem;
  display: inline-block; transition: transform .15s ease;
}
.rc-companies .rc-row-toggle[aria-expanded="true"] .rc-chev { transform: rotate(90deg); }
.rc-companies .rc-row-toggle[aria-expanded="true"] > td { background: #f9fafb; }

/* Templates.aspx's own row list -- light-touch polish, same quiet hover treatment as the
   companies table above, so the list reads as one row you're pointing at rather than a
   flat block of text. Purely cosmetic; no behaviour change. */
.rc-template-row { transition: background-color .1s ease; }
.rc-template-row:hover { background: #f9fafb; }

/* =====================================================================
   Left sidebar shell (replaces the old top nav). Collapsed by default;
   the toggle expands it to show labels. Mobile-first: the collapsed rail
   is a slim icon strip that works on small screens too.
   ===================================================================== */
.rc-shell { display: flex; align-items: stretch; min-height: 100vh; }
/* overflow is VISIBLE here and the scrolling lives on .rc-sidebar-nav below
   (2026-08-13). It used to be the other way round, which clipped the account
   menu: in the 70px rail a 232px menu is simply cut off and vanishes. Scrolling
   the nav rather than the whole sidebar also keeps the logo and the profile row
   still while a long menu scrolls, which is what they were doing anyway. */
.rc-sidebar {
  flex: 0 0 290px; width: 290px; background: #fff; border-right: 1px solid var(--rc-line);
  position: sticky; top: 0; height: 100vh; overflow: visible;
  display: flex; flex-direction: column; z-index: 30;
  transition: flex-basis .18s ease, width .18s ease;
}
.rc-shell.rc-collapsed .rc-sidebar { flex-basis: 70px; width: 70px; }

.rc-sidebar-head { display: flex; align-items: center; gap: 10px; min-height: 68px; padding: 14px 16px; border-bottom: 1px solid var(--rc-line); }
.rc-toggle { min-height: 40px; width: 40px; padding: 0; flex-shrink: 0; border: 1px solid var(--rc-line); background: #fff; color: #5c636b; border-radius: 8px; }
.rc-toggle:hover { background: #eef1f3; color: #2b3138; }

/* min-height:0 is what actually lets this shrink and scroll inside the flex
   column; overflow-x stays hidden here because this is where the long labels
   are, and they are what the sidebar's old overflow-x rule was protecting. */
.rc-sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 10px; flex-grow: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.rc-sidebar-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: #5c636b; font-weight: 500; font-size: 15px; text-decoration: none; position: relative; }
.rc-sidebar-link:hover { background: #eef1f3; color: #2b3138; }
.rc-sidebar-link i { width: 22px; text-align: center; font-size: 18px; flex-shrink: 0; }
/* Allow long labels (e.g. "Occupational Health and Safety") to wrap rather than overflow */
.rc-sidebar-link .rc-nav-text { flex: 1 1 0; min-width: 0; }
/* Title + subtitle stack inside a sidebar link (same idiom as .rc-quick-title/.rc-quick-sub).
   Named .rc-nav-subtitle, NOT .rc-nav-sub -- that name is already taken below by the
   collapsible sub-menu container. */
.rc-sidebar-link .rc-nav-title { display: block; line-height: 1.25; }
.rc-sidebar-link .rc-nav-subtitle { display: block; font-size: 11.5px; font-weight: 400; color: #9aa1a8; line-height: 1.3; margin-top: 1px; }
.rc-sidebar-link:hover .rc-nav-subtitle { color: #7c8288; }

/* Red count badge on a sidebar link (e.g. "Documents to sign") -- same idea as
   OHAS.aspx's .ohas-block-badge, scaled down for a slim sidebar row instead of a
   square block tile. Sits in the top-right corner of the whole link, in both the
   expanded and icon-only-collapsed states, since .rc-sidebar-link is now relative. */
.rc-sidebar-badge {
  position: absolute; top: 2px; right: 6px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; border: 2px solid #fff;
  background: var(--rc-red); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(179, 38, 30, .35);
}

/* Current-page highlight (Site.Master.cs marks the matching link server-side) */
.rc-sidebar-link.rc-active { background: var(--rc-accent); color: #fff; }
.rc-sidebar-link.rc-active:hover { background: var(--rc-accent); color: #fff; }
.rc-sidebar-link.rc-active .rc-nav-subtitle { color: rgba(255, 255, 255, .78); }

/* ---- Categories collapse sub-menu ---- */
/* Trigger button: .rc-sidebar-link already provides all the visuals.
   This fully resets native <button> chrome (border, shadow, appearance). */
.rc-sidebar-collapse-btn {
  -webkit-appearance: none; appearance: none;
  background: none; border: none; box-shadow: none; outline: none;
  width: 100%; cursor: pointer; text-align: left;
}
.rc-sidebar-collapse-btn:focus-visible { outline: 2px solid var(--rc-accent); outline-offset: -2px; }
.rc-cat-chevron { font-size: 12px; margin-left: auto; flex-shrink: 0; transition: transform .2s ease; }
.rc-sidebar-collapse-btn[aria-expanded="true"] .rc-cat-chevron { transform: rotate(180deg); }
/* Sub-link list: same buttons as the rest, indented by the icon column width */
.rc-nav-sub { display: flex; flex-direction: column; gap: 2px; padding: 2px 0; }
/* .rc-sidebar-sublink + .rc-sidebar-link together = full sidebar-link look.
   The icon on each sub-link is smaller to signal nesting. */
.rc-sidebar-sublink i { font-size: 8px; color: #b3bbc2; }
/* Attention count badge on OHASA category links */
.rc-cat-badge {
    margin-left: auto;
    flex-shrink: 0;
    background: var(--rc-red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    line-height: 1;
}
/* Hide the collapse section entirely when the sidebar is collapsed to a rail */
.rc-shell.rc-collapsed .rc-nav-collapse { display: none !important; }

.rc-sidebar-user { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--rc-line); }
.rc-sidebar-user-top { display: flex; align-items: center; gap: 10px; }
.rc-user-text { line-height: 1.2; min-width: 0; flex: 1 1 auto; }
.rc-user-name { font-size: 14px; font-weight: 600; color: #2b3138; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-user-role { font-size: 12px; color: var(--rc-muted); white-space: nowrap; }
.rc-logout { margin-top: 5px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; min-height: 26px; border: 1px solid var(--rc-line); border-radius: 6px; background: #fff; color: #5c636b; font-weight: 600; font-size: 12px; text-decoration: none; }
.rc-logout:hover { background: #eef1f3; color: #2b3138; }

/* ---- Account menu (2026-08-13) ----------------------------------------
   The avatar row is now a dropdown toggle; every account action moved into
   the menu. It has to look and behave exactly like the row it replaces, so
   the button is stripped back to nothing and only gains a hover.

   .rc-user-menu keeps .rc-logout on its rows on purpose (the drawer-closing
   script and rc-tour.js both key off it) and only widens them into full-width
   menu rows -- the display here also has to survive rc-tour.js clearing a
   trigger's inline display:none, which falls back to exactly this rule. */
.rc-user-dropdown { width: 100%; }
button.rc-sidebar-user-top {
  width: 100%; padding: 5px; border: 0; border-radius: 10px;
  background: none; text-align: left; cursor: pointer;
}
button.rc-sidebar-user-top:hover { background: #eef1f3; }
button.rc-sidebar-user-top:focus-visible { outline: 2px solid var(--rc-accent); outline-offset: 2px; }
.rc-user-caret { margin-left: auto; flex-shrink: 0; color: var(--rc-muted); font-size: 13px; padding: 0 2px; }
.rc-user-menu {
  min-width: 232px; max-width: 280px; padding: 8px;
  border: 1px solid var(--rc-line); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
}
.rc-user-menu .rc-logout { display: flex; width: 100%; margin-top: 4px; }
.rc-user-menu .rc-logout:first-child { margin-top: 0; }

.rc-main { flex: 1 1 auto; min-width: 0; }
.rc-content { width: 100%; max-width: 1280px; margin: 0 auto; }

/* Mobile-only chrome: hidden on desktop, switched on in the mobile query below. */
.rc-mobile-bar { display: none; }
.rc-backdrop { display: none; }

/* Signature draw pad (Submit.aspx): border/background here, not inline, since both
   the form's sign-off box and every per-question Signature field share this markup.
   width:100% (not just max-width) so the pad actually fills its box on desktop instead
   of rendering at the canvas's raw 320x80 attribute size with dead space beside it. */
.rc-sig-wrap { border: 1px solid var(--rc-line); border-radius: 10px; background: #fff; overflow: hidden; }
.rc-sig-wrap canvas { width: 100%; max-width: 520px; height: auto; display: block; }

/* ---- Desktop (>= 768px): collapse to a slim icon rail ---- */
@media (min-width: 768px) {
  .rc-shell.rc-collapsed .rc-nav-text,
  .rc-shell.rc-collapsed .rc-brand-only,
  .rc-shell.rc-collapsed .rc-user-text { display: none; }
  .rc-shell.rc-collapsed .rc-sidebar-head { justify-content: center; padding-left: 0; padding-right: 0; }
  .rc-shell.rc-collapsed .rc-sidebar-link { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
  .rc-shell.rc-collapsed .rc-sidebar-user { align-items: center; }
}

/* ---- Mobile (< 768px): the sidebar becomes an off-canvas drawer ---- */
@media (max-width: 767.98px) {
  /* Drawer: fixed, off-screen, slides in. Always full-width labels (never the rail). */
  .rc-sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 290px; flex-basis: 290px;
    transform: translateX(-100%); transition: transform .22s ease; z-index: 1045;
    box-shadow: 0 0 40px rgba(0, 0, 0, .18);
  }
  .rc-shell.rc-collapsed .rc-sidebar { width: 290px; flex-basis: 290px; }
  .rc-shell.rc-mobile-open .rc-sidebar { transform: translateX(0); }

  /* Top bar with the hamburger that opens the drawer. */
  .rc-mobile-bar {
    display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 20;
    background: #fff; border-bottom: 1px solid var(--rc-line); padding: 10px 14px; min-height: 60px;
  }

  /* Dimmed backdrop behind the open drawer; tap to close. */
  .rc-shell.rc-mobile-open .rc-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .42); z-index: 1040;
  }

  .rc-content { padding-left: 12px; padding-right: 12px; }

  /* ------------------------------------------------------------------
     Page-level mobile fixes
     ------------------------------------------------------------------ */

  /* Horizontally scroll GridViews instead of overflowing the page.
     All grids live inside .card-body.p-0 — this one rule covers every page. */
  .card-body.p-0 { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Hero sections (store/dashboard pages): reduce the 48-px column gap
     when the title and score panel wrap onto separate rows. */
  .rc-hero { gap: 16px !important; }

  /* Score panels go full-width when the hero flex row wraps on phones. */
  .rc-score-panel { flex: 0 0 100% !important; min-width: 0 !important; width: 100%; }

  /* Section-title + subtitle: allow the subtitle to wrap below the heading. */
  .rc-section-header { flex-wrap: wrap; }

  /* Small buttons: taller tap target on touch screens. */
  .btn-sm { min-height: 38px; padding-left: .65rem; padding-right: .65rem; }

  /* Card-header action bars (search + buttons): wrap onto next line on phones. */
  .rc-card-actions { flex-wrap: wrap; width: 100%; }

  /* Card-header search/filter areas pushed to the right on desktop: on phones
     drop the auto-margin and let them fill the full row width instead. */
  .card-header .ms-auto { margin-left: 0 !important; width: 100%; }
  .card-header .ms-auto .form-control { flex: 1 1 auto; min-width: 0; }
}

/* ---- System Admin home: quick-action shortcut cards ---- */
.rc-quick { display: flex; padding: 12px; border: 1px solid var(--rc-line); border-radius: 12px; text-decoration: none; background: #fff; transition: background .12s ease, border-color .12s ease; }
.rc-quick:hover { background: #f7f9fa; border-color: #cdd5db; }
.rc-quick-ico { width: 42px; height: 42px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: #eef1f3; color: var(--rc-accent); font-size: 18px; }
.rc-quick-title { display: block; font-weight: 600; color: #2b3138; font-size: 15px; }
.rc-quick-sub { display: block; color: var(--rc-muted); font-size: 12px; }

/* ---- Tab strip (form builder, committee minutes) ----
   Lived inline in TemplateBuilder.aspx's own <style> until 2026-08-11, when the
   committee minutes were rebuilt around the same tabs and needed it too. Moved
   here unchanged rather than copied. */
.rc-tab-nav { border-bottom: 2px solid var(--rc-line); margin-bottom: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.rc-tab-nav::-webkit-scrollbar { display: none; }
.rc-tab-nav .nav-link { border:0; border-bottom:2px solid transparent; margin-bottom:-2px;
    padding:10px 20px; font-weight:600; color:var(--rc-muted); border-radius:0; white-space:nowrap; }
/* Filled, not just a colour swap -- the default --rc-accent (#566372) sits right next to
   --rc-muted (#6b747c), so a colour-only "active" state was nearly invisible, especially for
   platform accounts (Content Admin etc.), who never get a tenant's custom branding and always
   see this exact default pair. Same filled treatment as the sidebar's own .rc-nav-link.active. */
.rc-tab-nav .nav-link.active { background:var(--rc-accent); color:#fff; border-bottom-color:var(--rc-accent); border-radius:8px 8px 0 0; }
.rc-tab-nav .nav-link:hover:not(.active):not(.disabled) { color:var(--rc-ink); border-bottom-color:#dee2e6; }
.rc-tab-nav .nav-link.disabled { opacity:.45; cursor:not-allowed; pointer-events:none; }
.rc-tab-count { font-weight:600; opacity:.7; }

/* ---- Editable row grid (committee minutes) ----
   HSMeeting.aspx has used .rc-edit-grid, .scroll-x and .rc-rownum since it was
   built, and NONE of the three had ever been defined -- anywhere. Its eight
   tables therefore rendered as bare, unpadded HTML tables whose columns fought
   each other, and .scroll-x had no overflow rule at all, so a nine-column table
   of form controls pushed the whole PAGE sideways. That is most of what Darius
   meant by "too cluttered, too much scrolling" (2026-08-11). Defining them
   keeps the sideways scroll inside the table, where the house rule wants it. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rc-edit-grid { width: 100%; min-width: 700px; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.rc-edit-grid thead th {
  background: #f5f7f9; color: #5c636b; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  padding: .5rem .45rem; border-bottom: 1px solid var(--rc-line); text-align: left;
}
.rc-edit-grid thead th:first-child { border-top-left-radius: 8px; }
.rc-edit-grid thead th:last-child { border-top-right-radius: 8px; }
.rc-edit-grid td { padding: .35rem .45rem; border-bottom: 1px solid #eef1f3; vertical-align: middle; }
.rc-edit-grid tr:last-child td { border-bottom: 0; }
.rc-edit-grid .form-control, .rc-edit-grid .form-select { font-size: 14px; padding: .35rem .5rem; }
/* A locked dropdown must not advertise a chevron it will not honour. The Risk column
   on "Non-conformances reported" is disabled on every row pulled from the register
   (only Comments may change there), and the arrow still invited a click -- the rest of
   that row is a plain greyed box, so this is what makes the whole row read as locked.
   Applies to any disabled select in an edit grid, because the same is true of all of
   them. (Darius, 2026-08-17, NCR.PNG.) */
.rc-edit-grid .form-select:disabled {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: none; padding-right: .5rem;
}
.rc-rownum { color: #9aa2aa; font-size: 13px; text-align: center; white-space: nowrap; }

/* ---- "Nothing in this block yet" stand-in, shown instead of a header-only table ---- */
.rc-empty-block {
  border: 1px dashed #d3dce7; border-radius: 12px; background: #fbfcfd;
  padding: 1.25rem; text-align: center; color: var(--rc-muted); font-size: 14px;
}
.rc-empty-block i { font-size: 20px; display: block; margin-bottom: .5rem; color: #b9c3ce; }
/* The second half of an empty-block message tells you what to PUT there, which is
   only worth saying while the minutes can still be edited. Signed minutes keep the
   plain statement of fact and drop the invitation. */
.rc-empty-readonly .rc-empty-hint { display: none; }

/* ---- Section header divider (form builder + submit) ---- */
.rc-section-divider {
  font-size: 15px; font-weight: 700; color: var(--rc-accent);
  padding-bottom: .4rem; margin: 1.5rem 0 .75rem;
  border-bottom: 2px solid var(--rc-accent);
  letter-spacing: .01em;
}
/* On the submit form, let a section divider carry a "jump to next section" affordance. */
.rc-section-divider .rc-section-next {
  float: right; font-size: 12px; font-weight: 600; text-decoration: none;
  color: var(--rc-accent); border: 1px solid var(--rc-line);
  border-radius: 6px; padding: 1px 8px; letter-spacing: 0;
}
.rc-section-divider .rc-section-next:hover { background: #eef1f3; }

/* ---- Submit form: "X of Y answered" progress strip ---- */
.rc-progress-strip {
  position: sticky; top: 0; z-index: 15;
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--rc-line); border-radius: 12px;
  padding: 10px 14px; margin-bottom: 12px;
}
.rc-progress-label { font-size: 14px; font-weight: 700; color: var(--rc-ink); white-space: nowrap; }
.rc-progress-track { flex: 1 1 auto; height: 8px; border-radius: 50rem; background: #eef1f3; overflow: hidden; }
.rc-progress-fill  { display: block; height: 100%; width: 0%; border-radius: 50rem; background: var(--rc-accent); transition: width .2s ease, background .2s ease; }
.rc-progress-fill.rc-progress-done { background: var(--rc-green); }
@media (max-width: 767.98px) { .rc-mobile-bar ~ .rc-content .rc-progress-strip { top: 60px; } }

/* ---- Submit form: inline field validation (client-side layer) ---- */
.rc-field-invalid .form-control,
.rc-field-invalid .form-select { border-color: var(--rc-red); }
.rc-field-invalid .rc-yn-group .rc-yn-btn { border-color: var(--rc-red); }
.rc-field-error {
  display: none; margin-top: .35rem; font-size: 13px; font-weight: 600;
  color: var(--rc-red-tx);
}
.rc-field-invalid .rc-field-error { display: block; }
/* Corrective-action panel flagged as incomplete on submit. */
.rc-ca-panel.rc-ca-invalid { border-color: var(--rc-red); box-shadow: 0 0 0 1px var(--rc-red-bd); }

/* ---- Org tree (Organisation.aspx) ---- */
.rc-org-tree-row {
  display: flex; align-items: center; gap: 12px;
  padding: .65rem 1rem; border-bottom: 1px solid #eef1f3; min-height: 54px;
  transition: background .1s ease;
}
.rc-org-tree-row:last-child { border-bottom: none; }
.rc-org-tree-row:hover { background: #f9fafb; }
.rc-org-tree-icon {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}

/* ---- Toast notification system ---- */
.rc-toast-container {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
  display: flex; flex-direction: column; gap: .6rem;
  max-width: 380px; pointer-events: none;
}
.rc-toast {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .9rem 1.1rem 1rem; border-radius: 12px; border: 1px solid;
  box-shadow: 0 4px 24px rgba(0,0,0,.12); pointer-events: all;
  font-size: 15px; font-weight: 500; line-height: 1.45; position: relative;
  animation: rcToastIn .22s cubic-bezier(.16,1,.3,1);
}
@keyframes rcToastIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.rc-toast.rc-toast-out { animation: rcToastOut .2s ease forwards; }
@keyframes rcToastOut  { to { opacity: 0; transform: translateY(8px); } }
.rc-toast-success { background: var(--rc-green-bg); color: var(--rc-green-tx); border-color: var(--rc-green-bd); }
.rc-toast-error   { background: var(--rc-red-bg);   color: var(--rc-red-tx);   border-color: var(--rc-red-bd); }
.rc-toast-warning { background: var(--rc-amber-bg); color: var(--rc-amber-tx); border-color: var(--rc-amber-bd); }
.rc-toast-info    { background: #eef1f3; color: #2b3138; border-color: #dfe4e8; }
.rc-toast-icon  { font-size: 16px; margin-top: 1px; flex-shrink: 0; }
.rc-toast-body  { flex: 1 1 auto; }
.rc-toast-close { background: none; border: none; cursor: pointer; opacity: .5; font-size: 14px; padding: 0; margin-left: .4rem; flex-shrink: 0; color: inherit; line-height: 1; }
.rc-toast-close:hover { opacity: 1; }
.rc-toast-bar {
  position: absolute; bottom: 0; left: 0; height: 3px; border-radius: 0 0 12px 12px;
  background: currentColor; opacity: .22; animation: rcProgress linear forwards;
}
@keyframes rcProgress { from { width: 100%; } to { width: 0%; } }
@media (max-width: 767.98px) {
  .rc-toast-container { left: 1rem; right: 1rem; max-width: none; bottom: 1rem; }
}

/* ---- Page loading bar (rc-loading-bar.js) ----
   Every click/postback in this app is a full page reload (no AJAX anywhere),
   so there is no natural place for a "skeleton" that fills in async -- this is
   the pragmatic stand-in: a thin bar that sweeps across the very top of the
   viewport the instant something is clicked, giving an immediate "it's
   working" cue while the browser waits for the next full page to arrive. It
   never needs to be explicitly hidden -- the whole document (and this
   animation with it) is replaced the moment the new page loads. */
.rc-loading-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10000;
  overflow: hidden; opacity: 0; pointer-events: none;
  transition: opacity .15s ease;
}
.rc-loading-bar.rc-loading-active { opacity: 1; }
.rc-loading-bar::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: 30%;
  background: var(--rc-accent); border-radius: 0 2px 2px 0;
}
.rc-loading-bar.rc-loading-active::before { animation: rcLoadingSweep 1s ease-in-out infinite; }
@keyframes rcLoadingSweep {
  0%   { left: -30%; }
  100% { left: 100%; }
}

/* ---- Product tour (rc-tour.js) ---- */
/* Spotlight: one box-shadow dims the whole page around the target, correct
   at any scroll position, no backdrop element and no coordinate math. */
.rc-tour-target {
  position: relative; z-index: 10500; border-radius: 8px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .9), 0 0 0 9999px rgba(20, 22, 25, .55);
}
.rc-tour-card {
  position: fixed; z-index: 10600; width: 340px; max-width: calc(100vw - 28px);
  background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
  padding: 1.1rem 1.2rem 1rem; font-size: 15px;
}
.rc-tour-progress { font-size: 12px; font-weight: 700; color: var(--rc-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .3rem; }
.rc-tour-title { font-size: 17px; font-weight: 700; margin-bottom: .4rem; padding-right: 1.5rem; }
.rc-tour-body { color: #3f454b; line-height: 1.45; margin-bottom: .9rem; }
.rc-tour-footer { display: flex; justify-content: flex-end; gap: .5rem; }
.rc-tour-close {
  position: absolute; top: .7rem; right: .7rem; background: none; border: none;
  color: var(--rc-muted); font-size: 15px; padding: .2rem .3rem; line-height: 1; cursor: pointer;
}
.rc-tour-close:hover { color: var(--rc-ink); }
@media (max-width: 767.98px) {
  .rc-tour-card.rc-tour-sheet {
    top: auto !important; left: 0 !important; right: 0; bottom: 0; width: 100%; max-width: none;
    border-radius: 16px 16px 0 0; box-shadow: 0 -8px 32px rgba(0, 0, 0, .22);
    max-height: 55vh; overflow-y: auto;
  }
}

/* =====================================================================
   THE AI MINUTE TAKER (script 148, step 3)

   Docs/HSMeetingAIScribeMockup.html carried its own copy of these rules,
   scoped to .rc-app so that document could render in the app's styling.
   They were never in the real stylesheet -- these are them, once, here.
   ===================================================================== */

.btn-rc-ai { background: var(--rc-ai); color: #fff; font-weight: 600; }
.btn-rc-ai:hover, .btn-rc-ai:focus { background: #46346c; color: #fff; }
.rc-pill-ai { background: var(--rc-ai-bg); color: var(--rc-ai); border-color: var(--rc-ai-bd); }
.rc-iconbox-ai { background: var(--rc-ai-bg); color: var(--rc-ai); }

/* A card that belongs to the minute taker rather than to the minutes. */
.rc-ai-card { border-left: 5px solid var(--rc-ai) !important; }

/* A box the AI filled in that nobody has read yet. Deliberately a tint and a
   TAG, never colour alone: this audience may have little formal education and
   the app's rule is colour + icon + word everywhere else too. */
.rc-ai-field {
  background: var(--rc-ai-bg) !important;
  border-color: var(--rc-ai-bd) !important;
}
.rc-ai-tag, .rc-done-tag {
  display: inline-flex; align-items: center; gap: .25rem; margin-top: .25rem;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  border-radius: 4px; padding: 1px 5px; border: 1px solid;
}
.rc-ai-tag   { color: var(--rc-ai);       background: var(--rc-ai-bg);    border-color: var(--rc-ai-bd); }
.rc-done-tag { color: var(--rc-green-tx); background: var(--rc-green-bg); border-color: var(--rc-green-bd); }

/* One recording waiting to be sent, on the upload panel. */
.rc-file-row {
  display: flex; align-items: center; gap: .6rem;
  background: #fff; border: 1px solid var(--rc-line); border-radius: 10px;
  padding: .5rem .7rem; margin-bottom: .4rem; font-size: 14px;
}
.rc-file-row .rc-file-name { flex: 1 1 auto; min-width: 0; word-break: break-word; }

/* The two allowance bars: this meeting, and this branch's month. */
.rc-allowance {
  background: #f5f7f9; border: 1px solid var(--rc-line); border-radius: 10px;
  padding: .6rem .75rem; font-size: 13px; color: #5c636b; line-height: 1.5;
}
.rc-allowance .progress { height: 5px; margin: .25rem 0 .5rem; }
/* nowrap because "0 min of 3 h" broke across two lines in the narrow third
   column, which made a number look like two. */
.rc-allowance-value { font-weight: 700; color: var(--rc-ink); white-space: nowrap; }

/* =====================================================================
   THE RUNNING ORDER -- the printed script for the room.
   Read-only by design: a page with boxes on it puts somebody's head back
   down, and one left open untouched for 90 minutes logs them out anyway.
   ===================================================================== */
.rc-script-item {
  border: 1px solid var(--rc-line); border-left: 4px solid var(--rc-accent);
  border-radius: 10px; padding: .85rem 1rem; margin-bottom: .6rem; background: #fff;
}
.rc-script-item-done { border-left-color: var(--rc-green); }
.rc-script-id {
  display: inline-block; font-family: Consolas, monospace; font-weight: 800; font-size: 12px;
  color: #fff; background: var(--rc-accent); border-radius: 5px; padding: .1rem .45rem; margin-right: .5rem;
}
.rc-script-title { font-weight: 600; font-size: 15px; }
.rc-script-meta { font-size: 13px; color: var(--rc-muted); margin-top: .25rem; }
.rc-script-say {
  font-size: 13px; color: var(--rc-muted); font-style: italic; margin-top: .45rem;
  padding-left: .7rem; border-left: 2px solid var(--rc-line);
}
.rc-script-rules {
  background: var(--rc-ai-bg); border: 1px solid var(--rc-ai-bd); border-left: 6px solid var(--rc-ai);
  border-radius: 14px; padding: 1rem 1.1rem;
}

/* Print: the running order is meant to be carried into the meeting on paper.
   Nothing else in this app has ever been printed, so these are the first print
   rules it has -- keep them to the chrome, and let the content print as it is. */
@media print {
  .rc-sidebar, .rc-mobile-bar, .rc-backdrop, .rc-toast-container,
  .rc-no-print, .rc-loading-bar { display: none !important; }
  .rc-shell { display: block !important; }
  .rc-main, .rc-content { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
  body { background: #fff !important; font-size: 12pt; }
  .rc-script-item, .rc-script-rules, .card { break-inside: avoid; box-shadow: none !important; }
  a[href]:after { content: ""; }
}

/* Progressive-disclosure password checklist (ChangePassword.aspx / ResetPassword.aspx). Hidden
   until the password field is focused (Content/rc-password-rules.js), then each line ticks
   itself off live as that one rule is met -- never colour alone, same house rule as every other
   status in this app: an unmet rule is a plain grey circle, a met one is a green check AND its
   text stops being muted. */
.rc-pwrules { margin-top: .5rem; }
.rc-pwrule {
  display: flex; align-items: center; gap: .5rem;
  font-size: 13px; color: var(--rc-muted); line-height: 1.7;
}
.rc-pwrule-icon { font-size: 11px; width: 14px; text-align: center; color: var(--rc-muted); }
.rc-pwrule-met { color: var(--rc-ink); }
.rc-pwrule-met .rc-pwrule-icon { color: var(--rc-green); }