/*!
 * the-yachtclub-sentinel.css
 * ---------------------------------------------------------------
 * The YachtClub · Sentinel — Bootstrap v5.3 theme
 * Look/feel: "Seventies Regatta" — nautical white/royal-blue with
 * the chevron-vest palette (red #d64424 / amber #f0a12b) and a
 * mono-first, console-label type system.
 *
 * Type:  body    IBM Plex Mono (.875rem base — mono runs wide)
 *        display Chakra Petch (headings, brands, console labels)
 *
 * Load order: AFTER bootstrap.min.css (and bootstrap-icons).
 * Strategy, in file order:
 *   1. Brand tokens            (--yc-*)
 *   2. Bootstrap theme vars    (:root --bs-* remapping — most of the
 *                               theme happens here with zero markup)
 *   3. Component vars          (only where 5.3 compiles literals:
 *                               .btn-*, .nav-pills, .table-light, forms)
 *   4. Custom layer            (what Sass alone controls: heading
 *                               face, claim register, chevron stripe,
 *                               logo, selection)
 *   5. Application layout      (Sentinel shell: navbar+sidebar+main,
 *                               activity streams, auth screens)
 *
 * Reporting doctrine hooks (requirements §6):
 *   .badge-claim  — sender-STATED values (declared interval_s,
 *                   reported status). Dashed border = asserted,
 *                   unverified. Derived observations use the solid
 *                   text-bg-{success|warning|danger|secondary} badges.
 *
 * Dark mode: not shipped. Extension point is a [data-bs-theme="dark"]
 * block remapping section 2; sections 3–5 reference variables only.
 * Charts: read tokens at runtime (see the Chart.js adapter in the
 * portal JS: --bs-primary-rgb, --bs-border-color, --bs-font-monospace).
 * ---------------------------------------------------------------
 */

@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;500;600;700&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");


/* ---------- 1. Brand tokens ---------- */
:root {
  --yc-ink:   #0f1c30;   /* logo navy — text emphasis, headings */
  --yc-navy:  #2b5cbf;   /* seventies royal blue — primary CTA, links */
  --yc-navy-deep: #1f478f;
  --yc-navbar: #182f5c;  /* navbar navy, chroma pushed to match */
  --yc-red:   #d64424;   /* vest chevron red — danger */
  --yc-amber: #f0a12b;   /* vest chevron amber — warning */
  --yc-green: #2f7d54;   /* spruce — success */
  --yc-slate: #5b6b85;   /* muted text */
  --yc-claim: #8a97ad;   /* the CLAIM register (sender-stated values) */
  --yc-surface: #f3f5f8;
  --yc-border:  #dbe1ea;
}

/* ---------- 2. Bootstrap theme-variable overrides ---------- */
:root, [data-bs-theme="light"] {
  --bs-primary: var(--yc-navy);        --bs-primary-rgb: 43,92,191;
  --bs-primary-text-emphasis: var(--yc-navy-deep);
  --bs-primary-bg-subtle: #e7edfa;     --bs-primary-border-subtle: #b9cbf0;
  --bs-success: var(--yc-green);       --bs-success-rgb: 47,125,84;
  --bs-success-text-emphasis: #24603f;
  --bs-success-bg-subtle: #e7f2ec;     --bs-success-border-subtle: #bcd9c9;
  --bs-warning: var(--yc-amber);       --bs-warning-rgb: 240,161,43;
  --bs-warning-text-emphasis: #7a4e0a;
  --bs-warning-bg-subtle: #fdf3e0;     --bs-warning-border-subtle: #f7d9a4;
  --bs-danger: var(--yc-red);          --bs-danger-rgb: 214,68,36;
  --bs-danger-text-emphasis: #8f2c15;
  --bs-danger-bg-subtle: #fbe9e4;      --bs-danger-border-subtle: #f2c4b6;
  --bs-secondary: var(--yc-slate);     --bs-secondary-rgb: 91,107,133;
  --bs-light: var(--yc-surface);       --bs-light-rgb: 243,245,248;
  --bs-dark: var(--yc-navbar);         --bs-dark-rgb: 24,47,92;

  --bs-body-bg: #ffffff;               --bs-body-bg-rgb: 255,255,255;
  --bs-body-color: #1c2b44;            --bs-body-color-rgb: 28,43,68;
  --bs-secondary-color: var(--yc-slate);
  --bs-tertiary-bg: #f6f8fa;           /* app canvas: near-white cool */
  --bs-border-color: var(--yc-border);
  --bs-heading-color: var(--yc-ink);
  --bs-link-color: var(--yc-navy);     --bs-link-color-rgb: 43,92,191;
  --bs-link-hover-color: var(--yc-navy-deep); --bs-link-hover-color-rgb: 31,71,143;
  --bs-code-color: #b83a1d;
  --bs-focus-ring-color: rgba(43,92,191,.25);

  --bs-font-monospace: "IBM Plex Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --bs-body-font-family: var(--bs-font-monospace);
  --bs-body-font-size: .875rem;        /* mono runs wide; NOC density */

  --bs-border-radius: .3rem;           /* squarish, C64-adjacent */
  --bs-border-radius-sm: .2rem;
  --bs-border-radius-lg: .4rem;
}

/* ---------- 3. Component-variable overrides (compiled literals) ---------- */
.btn { --bs-btn-font-weight: 500; }
.btn-primary {
  --bs-btn-bg: var(--yc-navy);              --bs-btn-border-color: var(--yc-navy);
  --bs-btn-hover-bg: var(--yc-navy-deep);   --bs-btn-hover-border-color: var(--yc-navy-deep);
  --bs-btn-active-bg: var(--yc-navy-deep);  --bs-btn-active-border-color: var(--yc-ink);
  --bs-btn-disabled-bg: var(--yc-navy);     --bs-btn-disabled-border-color: var(--yc-navy);
  --bs-btn-focus-shadow-rgb: 43,92,191;
}
.btn-outline-primary {
  --bs-btn-color: var(--yc-navy);           --bs-btn-border-color: var(--yc-navy);
  --bs-btn-hover-bg: var(--yc-navy);        --bs-btn-hover-border-color: var(--yc-navy);
  --bs-btn-active-bg: var(--yc-navy-deep);  --bs-btn-active-border-color: var(--yc-navy-deep);
  --bs-btn-focus-shadow-rgb: 43,92,191;
}
.btn-outline-secondary {
  --bs-btn-color: #44536d;                  --bs-btn-border-color: #c3cbd9;
  --bs-btn-hover-color: var(--yc-ink);      --bs-btn-hover-bg: #eef1f6;
  --bs-btn-hover-border-color: #b2bccd;
  --bs-btn-active-color: var(--yc-ink);     --bs-btn-active-bg: #e3e8ef;
  --bs-btn-active-border-color: #b2bccd;
  --bs-btn-focus-shadow-rgb: 91,107,133;
}
.btn-outline-danger  { --bs-btn-color: var(--yc-red); --bs-btn-border-color: var(--yc-red);
                       --bs-btn-hover-bg: var(--yc-red); --bs-btn-hover-border-color: var(--yc-red);
                       --bs-btn-focus-shadow-rgb: 214,68,36; }
.btn-dark { --bs-btn-bg: var(--yc-navbar); --bs-btn-border-color: var(--yc-navbar);
            --bs-btn-hover-bg: #0f1c30; --bs-btn-hover-border-color: #0f1c30; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--yc-navy);
             --bs-nav-pills-border-radius: var(--bs-border-radius); }
.table-light { --bs-table-bg: var(--yc-surface); --bs-table-color: #44536d; }
.card { --bs-card-border-color: var(--yc-border); --bs-card-cap-bg: #f8fafc; }
.badge { --bs-badge-font-weight: 600; --bs-badge-border-radius: var(--bs-border-radius-sm); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--yc-navy); }
.breadcrumb { --bs-breadcrumb-divider: "›"; }
/* Button groups: gapped, not fused — each button keeps its own corners.
   (!important needed to beat Bootstrap's corner-flattening :not() rules) */
.btn-group { gap: .35rem; }
.btn-group > .btn { border-radius: var(--bs-border-radius) !important; margin-left: 0 !important; }
.btn-group-sm > .btn { border-radius: var(--bs-border-radius-sm) !important; }
.progress { --bs-progress-bar-bg: var(--yc-navy); }
.form-control:focus, .form-select:focus {
  border-color: #9cb4e8;
  box-shadow: 0 0 0 .25rem rgba(43,92,191,.18);
}
.form-check-input:checked { background-color: var(--yc-navy); border-color: var(--yc-navy); }
.form-check-input:focus { border-color: #9cb4e8; box-shadow: 0 0 0 .25rem rgba(43,92,191,.18); }

/* ---------- 4. Custom layer (no Bootstrap hook exists) ---------- */
/* Headings: Chakra Petch — squared terminals, C64-adjacent but contemporary */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .navbar-brand {
  font-family: "Chakra Petch", var(--bs-font-monospace);
  letter-spacing: .01em;
}
/* Console-label card headers */
.card-header {
  font-family: "Chakra Petch", var(--bs-font-monospace);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--yc-ink);
}
.card-header .badge { letter-spacing: .02em; }
/* Console table heads */
.table thead th {
  font-family: "Chakra Petch", var(--bs-font-monospace);
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--yc-slate);
}
/* CLAIM register: sender-stated values (declared interval, reported
   status). Dashed border = asserted, unverified. Derived observations
   keep the solid text-bg-* treatment. */
.badge-claim {
  color: var(--yc-slate);
  background: #fbfcfe;
  border: 1px dashed #a6b1c4;
  font-weight: 500;
}
/* Chevron stripe — the vest, as a signature. Red over amber under
   every top bar (border supplies the red band, shadow the amber). */
.navbar.sticky-top, .yc-authbar {
  border-bottom: 3px solid var(--yc-red);
  box-shadow: 0 3px 0 var(--yc-amber);
}
.yc-authbar { background: var(--bs-body-bg); }
.yc-logo { width: 28px; height: 28px; color: var(--yc-ink); }
.yc-hero-sub { font-family: "Chakra Petch", var(--bs-font-monospace); letter-spacing: .01em; }
/* Peripheral history strips (instance show): one cell = one heartbeat's
   reported status. ok is muted so warning/error carry the signal;
   cells without a snapshot fall back to the surface gray. */
.peri-strip { display: flex; gap: 1px; }
.peri-strip .peri-cell { flex: 1 1 0; height: 18px; min-width: 2px; border-radius: 1px; background: var(--yc-surface); }
.peri-cell[data-s="ok"] { background: rgba(var(--bs-success-rgb), .45); }
.peri-cell[data-s="warning"] { background: var(--yc-amber); }
.peri-cell[data-s="error"] { background: var(--yc-red); }
.peri-legend { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; align-items: center; }
.peri-legend .peri-cell { display: inline-block; width: 14px; height: 10px; border-radius: 2px; background: var(--yc-surface); }
/* Medallion timeline (activity streams): icon medallions on a rail.
   Event type reads from the medallion before the text does. Anchor
   items keep list-group-style hover affordance. */
.yc-timeline { margin: 0; padding: .25rem 0; }
.yc-tl-item { position: relative; display: block; padding: .55rem 1rem .55rem 3.1rem;
  color: inherit; text-decoration: none; }
a.yc-tl-item:hover { background: var(--yc-surface); }
.yc-tl-item::before { content: ""; position: absolute; left: 1.45rem; top: 0; bottom: 0;
  width: 2px; background: var(--yc-border); }
.yc-tl-item:first-child::before { top: 1.4rem; }
.yc-tl-item:last-child::before { bottom: auto; height: 1.4rem; }
.yc-tl-item:only-child::before { display: none; }
.yc-medal { position: absolute; left: .55rem; top: .55rem; width: 1.85rem; height: 1.85rem;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--yc-surface); border: 1px solid var(--yc-border);
  color: var(--yc-slate); font-size: .85rem; box-shadow: 0 0 0 3px var(--bs-body-bg); }
.yc-medal.m-success { background: var(--bs-success-bg-subtle); border-color: var(--bs-success-border-subtle); color: var(--bs-success-text-emphasis); }
.yc-medal.m-warning { background: var(--bs-warning-bg-subtle); border-color: var(--bs-warning-border-subtle); color: var(--bs-warning-text-emphasis); }
.yc-medal.m-danger  { background: var(--bs-danger-bg-subtle);  border-color: var(--bs-danger-border-subtle);  color: var(--bs-danger-text-emphasis); }
.yc-medal.m-info    { background: var(--bs-primary-bg-subtle); border-color: var(--bs-primary-border-subtle); color: var(--bs-primary-text-emphasis); }
.yc-timeline .timeline-current { background: var(--bs-primary-bg-subtle); }
/* Status dot: instant health read next to an entity name.
   online green / degraded amber / offline red / pending slate. */
.yc-status-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--yc-slate); vertical-align: middle; }
.yc-status-dot[data-health="online"]   { background: var(--yc-green); }
.yc-status-dot[data-health="degraded"] { background: var(--yc-amber); }
.yc-status-dot[data-health="offline"]  { background: var(--yc-red); }
/* Compact variant for dense single-line streams (per-beat timelines):
   small medallions centered on the line so the rail stays visible.
   Full-size medallions are for two-line, mixed-event streams only. */
.yc-timeline-compact .yc-tl-item { padding: .4rem 1rem .4rem 2.45rem; }
.yc-timeline-compact .yc-tl-item::before { left: 1.12rem; }
.yc-timeline-compact .yc-tl-item:first-child::before { top: 50%; }
.yc-timeline-compact .yc-tl-item:last-child::before { bottom: auto; height: 50%; }
.yc-timeline-compact .yc-medal { width: 1.3rem; height: 1.3rem; font-size: .68rem;
  left: .5rem; top: 50%; transform: translateY(-50%);
  box-shadow: 0 0 0 2px var(--bs-body-bg); }
::selection { background: var(--yc-navy); color: #fff; }

/* ---------- 5. Application layout ---------- */
body { min-height: 100vh; }
.app-shell { display: flex; min-height: calc(100vh - 65px); }
.app-sidebar { width: 220px; flex-shrink: 0; }
.app-main { flex-grow: 1; min-width: 0; }
.activity-stream { max-height: calc(100vh - 180px); overflow-y: auto; }
.avatar { width: 32px; height: 32px; object-fit: cover; }
.auth-wrap { min-height: calc(100vh - 65px); display: flex; align-items: center; }
.timeline-current { border-left: 3px solid var(--bs-primary); }
tr[data-href] { cursor: pointer; }
@media (min-width: 768px) {
  .border-end-md { border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color); }
}
@media (max-width: 991.98px) { .app-sidebar { display: none; } }