/*
 * Crewly Ascend — Portal Design System
 * Layout/chrome architecture cloned from FarmAscend's portal css (sidebar/topbar shell,
 * p- component classes, compact type ladder), re-tokened with the Crewly identity from the
 * live portal's global.css: brand navy #23486A + champagne gold #E2AC4B.
 * LIGHT is the default (:root); .theme-dark flips the tokens (inverse of FA's dark-default).
 */

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Brand constants (identical in both themes) */
  --ca-navy: #23486A;
  --ca-navy-dark: #16293F;
  --ca-navy-light: #2E5A7D;
  /* The ORIGINAL Crewly warm amber-orange (#FFC04C), restored by request — the visual port
     had muted it to champagne gold #E2AC4B. Hover/text variants stay darker for contrast. */
  --ca-gold: #FFC04C;
  --ca-gold-hover: #E8A62F;
  --ca-green: #3FA96C;
  --ca-red: #CC4B4B;

  /* Base surfaces — light */
  --dk-surface-0: #F3F4F6;
  --dk-surface-1: #FFFFFF;
  --dk-surface-2: #FFFFFF;
  --dk-surface-border: rgba(23, 41, 60, 0.10);
  --dk-surface-border-strong: rgba(23, 41, 60, 0.22);
  --dk-shadow-md: 0 18px 45px -20px rgba(23, 41, 60, 0.35);

  /* Primary interactive accent — Crewly navy */
  --dk-accent: #23486A;
  --dk-accent-hover: #2E5A7D;
  --dk-accent-soft: rgba(35, 72, 106, 0.10);
  --dk-focus-ring: 0 0 0 0.22rem rgba(255, 192, 76, 0.32);

  /* Secondary accent — Crewly gold */
  --dk-gold: #FFC04C;
  --dk-gold-hover: #E8A62F;
  --dk-gold-soft: rgba(255, 192, 76, 0.16);

  --dk-warning: #B45309;
  --dk-darker-bg: var(--dk-surface-0);

  /* Text */
  --dk-text-primary: #17293C;
  --dk-text-secondary: #2B3F53;
  --dk-text-muted: #64748B;
  --dk-text-subtle: #94A3B8;

  /* Sidebar — the navy brand canvas (both themes) */
  --sidebar-width: 250px;
  --sidebar-width-collapsed: 78px;
  --sidebar-bg: linear-gradient(160deg, var(--ca-navy-dark) 0%, var(--ca-navy) 60%, var(--ca-navy-dark) 100%);
  --on-brand: #FFFFFF;
  --on-brand-muted: rgba(255, 255, 255, 0.72);
  --on-brand-faint: rgba(255, 255, 255, 0.45);

  /* p- surfaces */
  --p-bg:             #F3F4F6;
  --p-surface:        #FFFFFF;
  --p-surface-raised: #FAFAF8;
  --p-border:         rgba(23, 41, 60, 0.10);
  --p-border-hover:   rgba(23, 41, 60, 0.22);

  /* p- card */
  --p-card-bg:        var(--p-surface);
  --p-card-bg-hover:  #F6F2E7;
  --p-card-border:    var(--p-border);
  --p-card-radius:    0.875rem;
  --p-card-shadow:    0 1px 3px rgba(23, 41, 60, 0.07), 0 4px 12px rgba(23, 41, 60, 0.05);

  /* Section label */
  --p-label-color:    #64748B;
  --p-label-size:     0.6rem;

  /* Status palette (darkened for white surfaces) */
  --p-green:   #256B46;  --p-green-rgb:   63, 169, 108;
  --p-red:     #A03232;  --p-red-rgb:     204,  75,  75;
  --p-amber:   #8A6414;  --p-amber-rgb:   255, 192,  76;
  --p-blue:    #23486A;  --p-blue-rgb:     35,  72, 106;
  --p-gold:    var(--ca-gold);
  --p-gold-text: #8A6414;
  --p-accent:  var(--dk-accent);
  --p-accent-rgb: 35, 72, 106;

  /* Text ramp */
  --p-text-strong: #17293C;
  --p-text:        #2B3F53;
  --p-text-muted:  #4A5B6E;
  --p-text-dim:    #64748B;
  --p-text-faint:  #7C8B9D;
  --p-text-quiet:  #94A3B8;
  --p-text-ghost:  rgba(23, 41, 60, 0.42);
  --p-text-trace:  rgba(23, 41, 60, 0.18);

  /* Hairlines & subtle fills */
  --p-line:        rgba(23, 41, 60, 0.08);
  --p-line-soft:   rgba(23, 41, 60, 0.04);
  --p-fill:        rgba(23, 41, 60, 0.035);
  --p-fill-hover:  rgba(23, 41, 60, 0.06);

  --p-transition: 160ms ease;
}

/* ── Dark theme — token flips ───────────────────────────────────────── */
:root.theme-dark,
.theme-dark {
  --dk-darker-bg: #0D131C;
  --dk-surface-0: #0D131C;
  --dk-surface-1: #151F2C;
  --dk-surface-2: #1A2634;
  --dk-surface-border: rgba(255, 255, 255, 0.08);
  --dk-surface-border-strong: rgba(255, 255, 255, 0.18);
  --dk-shadow-md: 0 18px 45px -20px rgba(0, 0, 0, 0.75);

  /* Navy reads too dark on dark surfaces — lift the interactive accent */
  --dk-accent: #6FA0CE;
  --dk-accent-hover: #8FB6DC;
  --dk-accent-soft: rgba(111, 160, 206, 0.14);
  --dk-gold-hover: #FFD07A;

  --dk-text-primary: #F1F5F9;
  --dk-text-secondary: #CBD5E1;
  --dk-text-muted: #8FA0B3;
  --dk-text-subtle: #64748B;

  --sidebar-bg: linear-gradient(160deg, #0B1622 0%, var(--ca-navy-dark) 60%, #0B1622 100%);

  --p-bg:             #0D131C;
  --p-surface:        #151F2C;
  --p-surface-raised: #1A2634;
  --p-border:         rgba(255, 255, 255, 0.08);
  --p-border-hover:   rgba(255, 255, 255, 0.18);
  --p-card-bg:        #151F2C;
  --p-card-bg-hover:  #1E2A3A;
  --p-card-border:    rgba(255, 255, 255, 0.08);
  --p-card-shadow:    0 4px 24px rgba(0, 0, 0, 0.45);
  --p-label-color:    rgba(255, 255, 255, 0.45);
  --p-gold-text:      #FFC97E;

  --p-green:   #7BD3A4;
  --p-red:     #EE9A9A;
  --p-amber:   #E8C070;
  --p-blue:    #9FC3E3;

  --p-text-strong: #F1F5F9;
  --p-text:        #CBD5E1;
  --p-text-muted:  #AAB8C7;
  --p-text-dim:    #8FA0B3;
  --p-text-faint:  #74869A;
  --p-text-quiet:  #64748B;
  --p-text-ghost:  rgba(255, 255, 255, 0.35);
  --p-text-trace:  rgba(255, 255, 255, 0.14);

  --p-line:        rgba(255, 255, 255, 0.08);
  --p-line-soft:   rgba(255, 255, 255, 0.04);
  --p-fill:        rgba(255, 255, 255, 0.04);
  --p-fill-hover:  rgba(255, 255, 255, 0.08);
}

/* ── Base ───────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  font-family: 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
  background: var(--dk-darker-bg);
  color: var(--dk-text-primary);
  margin: 0;
  overflow-x: hidden;
}

html, body { height: 100%; background: var(--dk-darker-bg); }

.page, #app, .layout-root, .main-ca, .content-ca {
  background: var(--dk-darker-bg);
  color: var(--dk-text-primary);
}

p, span, div, li, td, th, label { color: var(--dk-text-secondary); }

h1, h2, h3, h4, h5, h6 { color: var(--dk-text-primary); font-weight: 600; }

small, .small, .text-muted { color: var(--dk-text-muted) !important; }

a { color: var(--dk-accent); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--dk-gold-hover); text-decoration: underline; }

/* ── Display utilities (bootstrap css is NOT loaded — only its icon font is) ─ */
.d-none { display: none !important; }
.d-flex { display: flex !important; }
.me-2 { margin-right: 0.5rem; }
@media (min-width: 576px) {
  .d-sm-flex { display: flex !important; }
}
@media (min-width: 768px) {
  .d-md-flex { display: flex !important; }
  .d-md-inline { display: inline !important; }
}
@media (min-width: 992px) {
  .d-lg-inline { display: inline !important; }
  .d-lg-none { display: none !important; }
}
@media (max-width: 991.98px) {
  .d-none.d-lg-inline { display: none !important; }
}

/* ── Layout root ────────────────────────────────────────────────────── */
.layout-root {
  display: flex;
  min-height: 100vh;
  width: 100%;
  position: relative;
}

.layout-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-left: var(--sidebar-width);
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 100vh;
}

.layout-root.sidebar-collapsed .layout-main {
  margin-left: var(--sidebar-width-collapsed);
}

@media (max-width: 991.98px) {
  .layout-main { margin-left: 0 !important; }
}

.main-ca { flex: 1; width: 100%; padding: 0; }

.content-ca {
  width: 100%;
  max-width: 100%;
  padding: 1.5rem;
}

/* ── Top bar ────────────────────────────────────────────────────────── */
.topbar-ca {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 56px;
  padding: 0 1.25rem;
  background: var(--dk-surface-1);
  border-bottom: 1px solid var(--dk-surface-border);
}

.topbar-crumb { display: flex; align-items: center; gap: .5rem; min-width: 0; color: var(--dk-text-primary); font-weight: 600; font-size: .95rem; }
.topbar-crumb-icon { color: var(--ca-gold-hover); font-size: 1.05rem; flex-shrink: 0; }
.topbar-crumb-group { color: var(--dk-text-muted); font-weight: 500; white-space: nowrap; }
.topbar-crumb-sep { color: var(--dk-text-subtle); font-size: .7rem; }
.topbar-crumb-page { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topbar-actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; }

.topbar-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--p-fill); border: 1px solid var(--dk-surface-border); border-radius: .5rem; color: var(--dk-text-muted); cursor: pointer; transition: background .15s, color .15s; }
.topbar-icon-btn:hover { color: var(--ca-gold-hover); background: var(--p-fill-hover); }

.topbar-user { position: relative; }
.topbar-user-btn { display: flex; align-items: center; gap: .5rem; background: var(--p-fill); border: 1px solid var(--dk-surface-border); border-radius: .6rem; color: var(--dk-text-primary); padding: .3rem .6rem; cursor: pointer; }
.topbar-user-btn .bi-person-circle { font-size: 1.3rem; color: var(--dk-accent); }
.topbar-user-info { flex-direction: column; line-height: 1.1; text-align: left; }
.topbar-user-info strong { font-size: .78rem; color: var(--dk-text-primary); }
.topbar-user-info small { font-size: .68rem; color: var(--dk-text-muted); }
.topbar-user-menu { position: absolute; right: 0; top: calc(100% + .4rem); min-width: 200px; background: var(--dk-surface-2); border: 1px solid var(--dk-surface-border); border-radius: .6rem; box-shadow: var(--dk-shadow-md); padding: .35rem; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 1040; }
.topbar-user.open .topbar-user-menu { opacity: 1; visibility: visible; transform: none; }
.topbar-user.open { z-index: 1051; }
.topbar-user-item { display: flex; align-items: center; gap: .6rem; width: 100%; background: transparent; border: 0; color: var(--dk-text-secondary); text-decoration: none; padding: .5rem .6rem; border-radius: .45rem; font-size: .85rem; cursor: pointer; }
.topbar-user-item:hover { background: var(--p-fill-hover); color: var(--dk-text-primary); }

.topbar-backdrop { position: fixed; inset: 0; z-index: 1030; background: transparent; }

/* ── Top-bar dropdown menus (Reports / Admin) ───────────────────────── */
.topbar-config { position: relative; }
.topbar-config-btn { display: inline-flex; align-items: center; gap: .4rem; background: var(--p-fill); border: 1px solid var(--dk-surface-border); border-radius: .6rem; color: var(--dk-text-secondary); padding: .35rem .7rem; font-size: .85rem; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.topbar-config-btn:hover { color: var(--dk-text-primary); background: var(--p-fill-hover); }
.topbar-config.open .topbar-config-btn { color: var(--dk-accent); border-color: var(--dk-accent); background: var(--dk-accent-soft); }
.topbar-config-caret { font-size: .7rem; transition: transform .15s; }
.topbar-config.open .topbar-config-caret { transform: rotate(180deg); }

.topbar-config-menu { position: absolute; left: 0; top: calc(100% + .4rem); display: grid; grid-template-columns: repeat(3, minmax(158px, 1fr)); gap: .35rem 1.5rem; min-width: 560px; max-width: min(720px, calc(100vw - 2.5rem)); background: var(--dk-surface-2); border: 1px solid var(--dk-surface-border); border-radius: .6rem; box-shadow: var(--dk-shadow-md); padding: .85rem; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 1040; }
.topbar-config.open { z-index: 1051; }
.topbar-config.open .topbar-config-menu { opacity: 1; visibility: visible; transform: none; }

.topbar-config-col { min-width: 0; }
.topbar-config-heading { padding: .3rem .5rem .25rem; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dk-text-subtle); }
.topbar-config-item { display: flex; align-items: center; gap: .55rem; padding: .38rem .5rem; border-radius: .45rem; color: var(--dk-text-secondary); text-decoration: none; font-size: .83rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-config-item:hover { background: var(--p-fill-hover); color: var(--dk-text-primary); text-decoration: none; }
.topbar-config-item.active { background: var(--dk-accent-soft); color: var(--dk-accent); }
.topbar-config-item .bi { font-size: .9rem; flex-shrink: 0; }

@media (max-width: 991.98px) {
  .topbar-config-menu { grid-template-columns: repeat(2, minmax(140px, 1fr)) !important; min-width: 320px !important; }
}
@media (max-width: 575.98px) {
  .topbar-config-menu { grid-template-columns: 1fr !important; min-width: 220px !important; }
}

/* ── Sidebar — the navy brand canvas ────────────────────────────────── */
.sidebar-ca {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 1030;
  display: flex;
  flex-direction: column;
  transition: width .25s cubic-bezier(.4, 0, .2, 1);
}

.sidebar-ca.collapsed { width: var(--sidebar-width-collapsed); }

.sidebar-ca .sidebar-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Brand */
.sidebar-brand { display: flex; align-items: center; gap: .6rem; padding: .85rem .85rem .7rem .85rem; position: relative; }
.sidebar-brand::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: 0; height: 1px; background: rgba(255,255,255,.12); }
.brand-link { display: flex; align-items: center; gap: .5rem; color: var(--on-brand); text-decoration: none; font-weight: 600; font-size: .95rem; letter-spacing: .3px; }
.brand-link:hover { color: var(--ca-gold); text-decoration: none; }
.brand-link span { color: inherit; }
.brand-mark-img { width: 26px; height: 26px; object-fit: contain; }
.sidebar-ca.collapsed .brand-mark-img { width: 22px; height: 22px; }
.sidebar-collapse-toggle { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: var(--on-brand-muted); padding: .35rem .45rem; border-radius: .4rem; cursor: pointer; transition: background .15s, color .15s; margin-left: auto; }
.sidebar-collapse-toggle:hover { background: rgba(255,255,255,.12); color: var(--ca-gold); }
.sidebar-close { background: transparent; border: none; color: var(--on-brand-muted); margin-left: auto; font-size: 1rem; display: none; }
.sidebar-close:hover { color: var(--ca-gold); }

/* Nav */
.sidebar-nav { padding: .65rem .6rem 0 .6rem; overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 4px; }

.sidebar-link { width: 100%; display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem; font-size: .82rem; font-weight: 500; color: var(--on-brand-muted); background: transparent; border: 0; border-radius: .5rem; text-decoration: none; cursor: pointer; transition: background .15s, color .15s; position: relative; }
.sidebar-link span { color: inherit; }
.sidebar-link i { font-size: 1rem; width: 20px; text-align: center; opacity: .75; color: inherit; }
.sidebar-link:hover { background: rgba(255,255,255,.07); color: var(--on-brand); text-decoration: none; }
.sidebar-link:hover i { opacity: 1; color: var(--ca-gold); }
.sidebar-link.active { background: var(--dk-gold-soft); color: var(--ca-gold); font-weight: 600; }
.sidebar-link.active i { opacity: 1; color: var(--ca-gold); }
.sidebar-link.has-children { justify-content: flex-start; }
.sidebar-link .caret { margin-left: auto; font-size: .6rem; transition: transform .2s ease; opacity: .5; }
.sidebar-group.open > .sidebar-link .caret { transform: rotate(180deg); opacity: .8; }
.sidebar-group { margin-bottom: .15rem; }

.sidebar-cat { padding: .85rem .75rem .3rem; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--on-brand-faint); user-select: none; }
.sidebar-ca.collapsed .sidebar-cat { height: 1px; padding: 0; margin: .5rem .6rem; overflow: hidden; color: transparent; background: rgba(255,255,255,.12); }

.sidebar-empty-section { padding: .35rem .85rem .5rem; }
.sidebar-empty-section small { color: var(--on-brand-faint) !important; }

.sidebar-sub { max-height: 0; overflow: hidden; padding: 0 0 0 .2rem; transition: max-height .25s ease-out, opacity .2s ease-out, padding .2s ease-out; opacity: 0; }
.sidebar-group.open > .sidebar-sub { max-height: 600px; opacity: 1; padding: .15rem 0 .3rem .2rem; transition: max-height .3s ease-in, opacity .2s ease-in, padding .2s ease-in; }
.sidebar-sublink { display: flex; align-items: center; gap: .5rem; padding: .35rem .7rem .35rem 2rem; font-size: .78rem; color: var(--on-brand-faint); border-radius: .45rem; text-decoration: none; position: relative; transition: background .15s, color .15s; }
.sidebar-sublink span { color: inherit; }
.sidebar-sublink i { font-size: .8rem; width: 16px; text-align: center; opacity: .7; color: inherit; }
.sidebar-sublink:hover { background: rgba(255,255,255,.07); color: var(--on-brand); text-decoration: none; }
.sidebar-sublink:hover i { opacity: 1; color: var(--ca-gold); }
.sidebar-sublink.active { background: var(--dk-gold-soft); color: var(--ca-gold); font-weight: 600; }
.sidebar-sublink.active i { opacity: 1; color: var(--ca-gold); }

.sidebar-spacer { margin-top: .5rem; }

/* Collapsed behavior */
.sidebar-ca.collapsed .brand-text,
.sidebar-ca.collapsed .sidebar-link span,
.sidebar-ca.collapsed .sidebar-sublink span,
.sidebar-ca.collapsed .caret { display: none; }
.sidebar-ca.collapsed .sidebar-link { justify-content: center; padding: .65rem .6rem; }
.sidebar-ca.collapsed .sidebar-sublink { padding-left: 1.05rem; justify-content: center; }
.sidebar-ca.collapsed .sidebar-group { position: relative; }
.sidebar-ca.collapsed .sidebar-nav { overflow: visible; }
.sidebar-ca.collapsed .sidebar-group.open > .sidebar-sub,
.sidebar-ca.collapsed .sidebar-group:hover > .sidebar-sub { display: block; position: absolute; left: 100%; top: 0; max-height: none; opacity: 1; overflow: visible; background: var(--ca-navy-dark); border: 1px solid rgba(255,255,255,.12); padding: .4rem; border-radius: .5rem; min-width: 200px; box-shadow: 0 8px 24px rgba(0,0,0,.45); z-index: 1090; }
.sidebar-ca.collapsed .sidebar-group.open > .sidebar-sub .sidebar-sublink,
.sidebar-ca.collapsed .sidebar-group:hover > .sidebar-sub .sidebar-sublink { justify-content: flex-start; padding: .35rem .7rem; }
.sidebar-ca.collapsed .sidebar-group.open > .sidebar-sub .sidebar-sublink span,
.sidebar-ca.collapsed .sidebar-group:hover > .sidebar-sub .sidebar-sublink span { display: inline; }
.sidebar-ca.collapsed .sidebar-search { display: none; }

/* Mobile floating toggle */
.sidebar-toggle-floating { position: fixed; bottom: 1.25rem; left: 1.25rem; background: linear-gradient(135deg, var(--ca-navy) 0%, var(--ca-navy-light) 100%); border: 0; color: #fff; padding: .85rem .95rem; border-radius: 1rem; font-size: 1.15rem; z-index: 1100; box-shadow: 0 10px 25px -5px rgba(35, 72, 106, .5); display: flex; align-items: center; justify-content: center; transition: .3s; }
.sidebar-toggle-floating:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -8px rgba(35, 72, 106, .6); }

/* Sidebar search */
.sidebar-search { padding: .5rem .7rem; position: relative; flex-shrink: 0; }
.sidebar-search-input { width: 100%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: .45rem; color: var(--on-brand); font-size: .75rem; padding: .4rem 1.8rem .4rem 2rem; outline: none; transition: border-color .2s, background .2s; }
.sidebar-search-input:focus { border-color: rgba(226,172,75,.5); background: rgba(255,255,255,.12); box-shadow: var(--dk-focus-ring); }
.sidebar-search-input::placeholder { color: rgba(255,255,255,.4); }
.sidebar-search-icon { position: absolute; left: 1.15rem; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.4); font-size: .78rem; pointer-events: none; }
.sidebar-search-clear { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: rgba(255,255,255,.45); font-size: .85rem; padding: 0; line-height: 1; cursor: pointer; transition: color .15s; }
.sidebar-search-clear:hover { color: var(--ca-gold); }

/* Mobile - sidebar becomes overlay */
@media (max-width: 991.98px) {
  .sidebar-ca {
    transform: translateX(-100%);
    width: var(--sidebar-width);
    box-shadow: 0 0 0 1px rgba(226,172,75,.05), 0 20px 40px rgba(0,0,0,.55);
    transition: transform 0.35s ease;
  }
  .sidebar-ca.open-mobile { transform: translateX(0); }
  .sidebar-close { display: inline-flex; }
}

/* ── Login page ─────────────────────────────────────────────────────── */
.login-page {
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(226, 172, 75, 0.18), transparent 60%),
    radial-gradient(1000px 600px at -10% 110%, rgba(35, 72, 106, 0.22), transparent 55%),
    var(--ca-navy-dark);
  min-height: 100vh;
}
.login-page .main-ca, .login-page .content-ca { background: transparent; }

.ca-login {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  min-height: calc(100vh - 3rem);
}

.ca-login-card {
  width: 100%;
  max-width: 400px;
  background: #FFFFFF;
  border: 1px solid rgba(226, 172, 75, 0.35);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(10, 18, 28, 0.45), 0 0 0 1px rgba(10, 18, 28, 0.08);
  padding: 2.5rem 2.25rem 1.75rem;
  animation: caLoginIn 0.4s ease;
}

@keyframes caLoginIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ca-login-head { text-align: center; margin-bottom: 1.75rem; }

.ca-login-mark-img { width: 64px; height: 64px; object-fit: contain; margin: 0 auto 0.5rem auto; display: block; }

.ca-login-title {
  color: var(--ca-navy);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 0 0 0.25rem;
}

.ca-login-sub { color: #64748B !important; font-size: 0.9rem; margin: 0; }

.ca-login-field { margin-bottom: 1.1rem; }

.ca-login-field > label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #4A5B6E !important;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.ca-login-input-wrap { position: relative; display: flex; align-items: center; }

.ca-login-input-icon {
  position: absolute;
  left: 0.85rem;
  color: #94A3B8;
  font-size: 0.95rem;
  pointer-events: none;
}

.ca-login-input {
  width: 100%;
  background: #FAFAF8;
  border: 1px solid rgba(23, 41, 60, 0.14);
  border-radius: 10px;
  color: #17293C;
  font-size: 0.95rem;
  padding: 0.75rem 0.9rem 0.75rem 2.5rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.ca-login-input::placeholder { color: #A9B4C0; }

.ca-login-input:focus {
  outline: none;
  border-color: var(--ca-gold);
  box-shadow: 0 0 0 3px rgba(226, 172, 75, 0.20);
}

.ca-login-eye {
  position: absolute;
  right: 0.4rem;
  background: none;
  border: none;
  color: #94A3B8;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.ca-login-eye:hover { color: var(--ca-navy); }

.ca-login-alert {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.ca-login-alert span { color: inherit !important; }
.ca-login-alert--error { background: rgba(204, 75, 75, 0.10); border: 1px solid rgba(204, 75, 75, 0.30); color: #A03232; }
.ca-login-alert--info { background: rgba(63, 114, 175, 0.10); border: 1px solid rgba(63, 114, 175, 0.30); color: #2F5A8A; }
.ca-login-alert--success { background: rgba(58, 141, 92, 0.10); border: 1px solid rgba(58, 141, 92, 0.30); color: #2C6B46; }

/* Invitation activation cards (/register, /invitations/accept) — same chrome as the login
   card, a little wider because they carry a name/password form or an invitation summary. */
.ca-login-card--wide { max-width: 520px; }

.ca-login-alert i { flex: 0 0 auto; align-self: flex-start; margin-top: 0.15rem; }
.ca-login-alert--info span, .ca-login-alert--error span, .ca-login-alert--success span { line-height: 1.45; }

.ca-login-hint { margin: 0.35rem 0 0; font-size: 0.75rem; color: #64748B !important; }

.ca-invite-details { margin: 0 0 1.1rem; font-size: 0.88rem; }
.ca-invite-details dt { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: #4A5B6E !important; margin-top: 0.6rem; }
.ca-invite-details dd { margin: 0.1rem 0 0; color: #17293C; }

.theme-dark .ca-login-hint { color: var(--p-text-dim) !important; }
.theme-dark .ca-invite-details dt { color: var(--p-text-muted) !important; }
.theme-dark .ca-invite-details dd { color: var(--p-text-strong); }

.ca-login-submit { width: 100%; justify-content: center; padding: 0.8rem; font-size: 0.95rem; margin-top: 0.25rem; }

.ca-login-foot {
  text-align: center;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(226, 172, 75, 0.30);
  color: #64748B !important;
  font-size: 0.8rem;
}

.ca-login-foot i { color: var(--ca-gold-hover); margin-right: 0.35rem; }

/* Dark-mode login card */
.theme-dark .ca-login-card { background: var(--p-surface); border-color: rgba(226, 172, 75, 0.28); }
.theme-dark .ca-login-title { color: var(--dk-gold); }
.theme-dark .ca-login-sub { color: var(--p-text-dim) !important; }
.theme-dark .ca-login-field > label { color: var(--p-text-muted) !important; }
.theme-dark .ca-login-input { background: var(--p-surface-raised); border-color: var(--p-border); color: var(--p-text-strong); }
.theme-dark .ca-login-input::placeholder { color: var(--p-text-quiet); }
.theme-dark .ca-login-foot { color: var(--p-text-dim) !important; }

/* ── p-page ─────────────────────────────────────────────────────────── */
.p-page {
  padding-top: 0.25rem;
  padding-bottom: 3rem;
}

.theme-dark .p-page {
  background-image: radial-gradient(circle, var(--p-line-soft) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ── Dashboard hero ─────────────────────────────────────────────────── */
.p-dash-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
  padding: 1.4rem 1.6rem;
  border-radius: var(--p-card-radius);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(226, 172, 75, 0.12), transparent 55%),
    var(--p-surface);
  border: 1px solid var(--p-border);
  border-left: 3px solid var(--ca-gold);
  box-shadow: var(--p-card-shadow);
}

.p-dash-hero-text { min-width: 0; }

.p-dash-greeting {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--p-text-strong);
  margin: 0 0 0.35rem;
  line-height: 1.2;
  letter-spacing: -0.3px;
}

.p-dash-greeting-name { color: var(--p-gold-text); }

.p-dash-welcome { margin: 0.3rem 0 0; font-size: 0.92rem; color: var(--p-text-dim) !important; }

.p-dash-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--p-text-dim);
}

.p-dash-meta i { opacity: 0.6; }

.p-scope-pill {
  background: var(--dk-accent-soft);
  border: 1px solid rgba(35, 72, 106, 0.22);
  color: var(--dk-accent);
  font-size: 0.67rem;
  font-weight: 600;
  padding: 0.1rem 0.55rem;
  border-radius: 20px;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.theme-dark .p-scope-pill { border-color: rgba(111, 160, 206, 0.3); }

.p-scope-pill--gold {
  background: var(--dk-gold-soft);
  border-color: rgba(226, 172, 75, 0.4);
  color: var(--p-gold-text);
}

@media (max-width: 640px) {
  .p-dash-hero { padding: 1.1rem 1.15rem; }
}

/* ── Section label ──────────────────────────────────────────────────── */
.p-section-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--p-label-size);
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--p-label-color);
  margin-bottom: 0.8rem;
  padding-left: 0.6rem;
  border-left: 2px solid rgba(226, 172, 75, 0.55);
  user-select: none;
}

.p-section-label i { opacity: 0.65; }

/* ── Cards & stats ──────────────────────────────────────────────────── */
.p-card {
  background: var(--p-card-bg);
  border: 1px solid var(--p-card-border);
  border-radius: var(--p-card-radius);
  box-shadow: var(--p-card-shadow);
  overflow: hidden;
}

.p-card-header {
  padding: 0.85rem 1.15rem 0.65rem;
  border-bottom: 1px solid var(--p-card-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.p-card-title { font-size: 0.8rem; font-weight: 600; color: var(--p-text-strong); margin: 0; }
.p-card-body { padding: 1rem 1.15rem; }

.p-stat {
  background: var(--p-card-bg);
  border: 1px solid var(--p-card-border);
  border-radius: var(--p-card-radius);
  padding: 1.1rem 1.15rem;
}

.p-stat-value { font-size: 1.65rem; font-weight: 700; color: var(--p-text-strong); line-height: 1; margin-bottom: 0.2rem; }
.p-stat-label { font-size: 0.72rem; color: var(--p-text-quiet); }
.p-stat-icon { font-size: 1rem; margin-bottom: 0.35rem; display: block; }

/* ── Home tiles (capability-driven) ─────────────────────────────────── */
.ca-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.9rem;
}

.ca-tile {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  background: var(--p-card-bg);
  border: 1px solid var(--p-card-border);
  border-radius: var(--p-card-radius);
  box-shadow: var(--p-card-shadow);
  text-decoration: none;
  transition: border-color var(--p-transition), transform var(--p-transition), box-shadow var(--p-transition);
}

.ca-tile:hover {
  text-decoration: none;
  border-color: rgba(226, 172, 75, 0.55);
  transform: translateY(-2px);
}

.ca-tile-icon {
  font-size: 1.5rem;
  color: var(--dk-accent);
  background: var(--dk-accent-soft);
  border-radius: 0.7rem;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ca-tile-body { min-width: 0; }
.ca-tile-title { font-size: 0.9rem; font-weight: 700; color: var(--p-text-strong); }
.ca-tile-text { font-size: 0.75rem; color: var(--p-text-dim); line-height: 1.35; }
.ca-tile-go { margin-left: auto; color: var(--p-text-quiet); font-size: 0.9rem; flex-shrink: 0; transition: color var(--p-transition), transform var(--p-transition); }
.ca-tile:hover .ca-tile-go { color: var(--ca-gold-hover); transform: translateX(3px); }

/* ── Loading & empty ────────────────────────────────────────────────── */
.p-loading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0 1.25rem;
  font-size: 0.82rem;
  color: var(--p-text-quiet);
}

.p-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 3rem 1rem;
  text-align: center;
}

.p-empty i     { font-size: 2rem; color: var(--p-text-trace); }
.p-empty-icon  { font-size: 3.5rem !important; color: var(--p-text-trace) !important; margin-bottom: 0.25rem; display: block; }
.p-empty-title { font-size: 0.95rem; font-weight: 700; color: var(--p-text-dim); margin: 0 0 0.35rem; }
.p-empty-text  { font-size: 0.82rem; color: var(--p-text-ghost); margin: 0 0 1.1rem; max-width: 320px; line-height: 1.5; }

@keyframes p-spin { to { transform: rotate(360deg); } }
.spin { display: inline-block; animation: p-spin 0.7s linear infinite; }

/* ── Badges ─────────────────────────────────────────────────────────── */
.p-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 0.15rem 0.55rem;
  border-radius: 20px;
}

.p-badge--success  { background: rgba(var(--p-green-rgb), 0.14); color: var(--p-green); }
.p-badge--warning  { background: rgba(var(--p-amber-rgb), 0.16); color: var(--p-amber); }
.p-badge--danger   { background: rgba(var(--p-red-rgb), 0.12); color: var(--p-red); }
.p-badge--info     { background: rgba(var(--p-blue-rgb), 0.12); color: var(--p-blue); }
.p-badge--gold     { background: rgba(226, 172, 75, 0.16); color: var(--p-gold-text); }
.p-badge--muted    { background: var(--p-fill-hover); color: var(--p-text-quiet); }
.p-badge--active   { background: rgba(var(--p-green-rgb), 0.14); color: var(--p-green); }
.p-badge--inactive { background: var(--p-fill); color: var(--p-text-quiet); }

/* ── Management page header ─────────────────────────────────────────── */
.p-mgmt-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem 0 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.p-mgmt-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--p-text-strong);
  margin: 0 0 0.2rem;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.p-mgmt-title i { color: var(--dk-accent); }
.p-mgmt-subtitle { font-size: 0.78rem; color: var(--p-text-faint); margin: 0; }
.p-mgmt-actions { display: flex; gap: 0.5rem; flex-shrink: 0; flex-wrap: wrap; align-items: flex-start; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.p-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border-radius: 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--p-transition);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.4;
}

.p-btn:hover { text-decoration: none; }
.p-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.p-btn--primary { background: var(--ca-navy); color: #ffffff; border-color: var(--ca-navy); }
.p-btn--primary:hover:not(:disabled) { background: var(--ca-navy-light); border-color: var(--ca-navy-light); color: #ffffff; }
.p-btn--gold { background: var(--ca-gold); color: #241804; border-color: var(--ca-gold); }
.p-btn--gold:hover:not(:disabled) { background: var(--ca-gold-hover); color: #241804; }
.p-btn--secondary { background: var(--p-surface-raised); border-color: var(--p-border); color: var(--p-text-muted); }
.p-btn--secondary:hover:not(:disabled) { border-color: var(--p-border-hover); color: var(--p-text-strong); }
.p-btn--danger { background: rgba(204, 75, 75, 0.10); border-color: rgba(204, 75, 75, 0.25); color: var(--p-red); }
.p-btn--danger:hover:not(:disabled) { background: rgba(204, 75, 75, 0.18); color: var(--p-red); }
.p-btn--sm { padding: 0.28rem 0.65rem; font-size: 0.78rem; }
.p-btn i { font-size: 0.88em; }
.p-btn span, .p-btn text { color: inherit; }

/* ── Filter bar ─────────────────────────────────────────────────────── */
.p-filter-bar {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  flex-wrap: wrap;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-card-radius);
  padding: 0.7rem 1rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--p-card-shadow);
}

.p-search-wrap { position: relative; flex: 1; min-width: 180px; }
.p-search-icon { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); opacity: 0.4; font-size: 0.82rem; pointer-events: none; }
.p-search-input {
  width: 100%;
  background: var(--p-surface-raised);
  border: 1px solid var(--p-border);
  border-radius: 0.5rem;
  color: var(--p-text-strong);
  padding: 0.38rem 2rem 0.38rem 2rem;
  font-size: 0.82rem;
  outline: none;
  transition: border-color var(--p-transition);
}
.p-search-input:focus { border-color: rgba(226, 172, 75, 0.55); }
.p-search-input::placeholder { color: var(--p-text-ghost); }
.p-search-clear {
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--p-text-quiet);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: 0.85rem;
}
.p-search-clear:hover { color: var(--p-text-muted); }

.p-filter-select {
  background: var(--p-surface-raised);
  border: 1px solid var(--p-border);
  border-radius: 0.5rem;
  color: var(--p-text-muted);
  padding: 0.38rem 0.75rem;
  font-size: 0.82rem;
  outline: none;
  cursor: pointer;
  transition: border-color var(--p-transition);
}
.p-filter-select:focus { border-color: rgba(226, 172, 75, 0.55); }
.p-search-input option,
.p-filter-select option { background-color: var(--p-surface); color: var(--p-text-strong); }

.p-filter-count { font-size: 0.76rem; color: var(--p-text-quiet); margin-left: auto; white-space: nowrap; }
.p-filter-count strong { color: var(--dk-accent); }

/* ── Table ──────────────────────────────────────────────────────────── */
.p-table-wrap {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-card-radius);
  overflow: hidden;
  box-shadow: var(--p-card-shadow);
  margin-bottom: 1.5rem;
}

.p-table-wrap--scrollx { overflow-x: auto; overflow-y: visible; }

.p-table { width: 100%; border-collapse: collapse; margin: 0; }
.p-table thead tr { background: var(--ca-navy); }
.p-table th {
  padding: 0.62rem 1rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--on-brand-muted);
  border-bottom: 1px solid var(--p-border);
  text-align: left;
  white-space: nowrap;
}
.p-table td {
  padding: 0.6rem 1rem;
  font-size: 0.82rem;
  color: var(--p-text-muted);
  border-bottom: 1px solid var(--p-line);
  vertical-align: middle;
}
.p-table tbody tr:last-child td { border-bottom: none; }
.p-table tbody tr:hover td { background: var(--p-fill); }
.p-table .p-col-actions { text-align: right; }
.ca-cell-strong { color: var(--p-text-strong); }

/* ── Pagination ─────────────────────────────────────────────────────── */
.p-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
  padding: 0.8rem 1.25rem;
  border-top: 1px solid var(--p-border);
  flex-wrap: wrap;
}
.p-page-btn {
  background: transparent;
  border: 1px solid var(--p-border);
  border-radius: 0.45rem;
  color: var(--p-text-faint);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.75rem;
  transition: all var(--p-transition);
  padding: 0;
}
.p-page-btn:hover:not(:disabled) { border-color: rgba(226, 172, 75, 0.5); color: var(--ca-gold-hover); }
.p-page-btn:disabled { opacity: 0.28; cursor: not-allowed; }
.p-pagination-info { font-size: 0.73rem; color: var(--p-text-quiet); margin: 0 0.25rem; }

/* ── Forms (ready for the next migrated pages) ──────────────────────── */
.p-form-section {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  color: var(--p-gold-text);
  margin: 1.1rem 0 0.65rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--p-border);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.p-form-section:first-child { margin-top: 0; }

.p-field-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--p-text-muted);
  margin-bottom: 0.3rem;
  display: block;
}

.p-field-hint { font-size: 0.7rem; color: var(--p-text-quiet); margin-top: 0.2rem; display: block; }

.p-form-control {
  background: var(--p-surface-raised) !important;
  border: 1px solid var(--p-border) !important;
  color: var(--p-text-strong) !important;
  border-radius: 0.5rem !important;
  font-size: 0.84rem !important;
}
.p-form-control:focus {
  border-color: rgba(226, 172, 75, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(226, 172, 75, 0.12) !important;
}
select.p-form-control option { background-color: var(--p-surface); color: var(--p-text-strong); }

/* ── Inline alerts ──────────────────────────────────────────────────── */
.p-alert-inline {
  padding: 0.55rem 0.85rem;
  border-radius: 0.5rem;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.p-alert-inline--success { background: rgba(var(--p-green-rgb), 0.12); color: var(--p-green); border: 1px solid rgba(var(--p-green-rgb), 0.25); }
.p-alert-inline--error   { background: rgba(var(--p-red-rgb), 0.10); color: var(--p-red); border: 1px solid rgba(var(--p-red-rgb), 0.25); }
.p-alert-inline--warning { background: rgba(var(--p-amber-rgb), 0.14); color: var(--p-amber); border: 1px solid rgba(var(--p-amber-rgb), 0.3); }
.p-alert-inline--info    { background: rgba(var(--p-blue-rgb), 0.08); color: var(--p-blue); border: 1px solid rgba(var(--p-blue-rgb), 0.3); }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 576px) {
  .p-dash-greeting { font-size: 1.3rem; }
  .p-mgmt-header { flex-direction: column; }
  .content-ca { padding: 1rem; }
}

/* ── People tier: form cards, field grid, detail cards, modal, uploads ─
   Added with the employees pages (migration Phase N, increment 2); every later
   form/detail tier reuses these. */

.p-form-card {
  background: var(--p-card-bg);
  border: 1px solid var(--p-card-border);
  border-radius: var(--p-card-radius);
  box-shadow: var(--p-card-shadow);
  padding: 1rem 1.15rem 1.15rem;
  margin-bottom: 1rem;
}
.p-form-card .p-form-section { margin-top: 0; }
.p-form-card-subtext { font-size: 0.76rem; color: var(--p-text-dim); margin: -0.25rem 0 0.75rem; }

/* 12-column field grid (the Server pages' bootstrap row/col layout, portal-native). */
.p-form-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.85rem;
}
.p-col-2  { grid-column: span 2; }
.p-col-3  { grid-column: span 3; }
.p-col-4  { grid-column: span 4; }
.p-col-5  { grid-column: span 5; }
.p-col-6  { grid-column: span 6; }
.p-col-8  { grid-column: span 8; }
.p-col-12 { grid-column: span 12; }
@media (max-width: 991.98px) {
  .p-col-2, .p-col-3, .p-col-4, .p-col-5 { grid-column: span 6; }
  .p-col-6, .p-col-8 { grid-column: span 12; }
}
@media (max-width: 575.98px) {
  .p-col-2, .p-col-3, .p-col-4, .p-col-5, .p-col-6 { grid-column: span 12; }
}

.p-form-control { width: 100%; padding: 0.45rem 0.65rem; }
textarea.p-form-control { resize: vertical; }
.p-field-hint--error { color: var(--p-red); }
.p-field-hint a, .p-field-hint--error a { color: inherit; text-decoration: underline; }

.p-check { display: flex; align-items: center; gap: 0.45rem; min-height: 2.15rem; }
.p-check label { font-size: 0.8rem; color: var(--p-text-muted); margin: 0; cursor: pointer; }
.p-check input { accent-color: var(--ca-navy); width: 1rem; height: 1rem; cursor: pointer; }

/* Checkbox grids (user edit/invite role, module and org-access pickers). */
.p-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.35rem 1rem;
}

.p-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin: 1rem 0 2rem;
}

/* EditForm validation (DataAnnotationsValidator output). */
.validation-message { color: var(--p-red); font-size: 0.72rem; margin-top: 0.2rem; display: block; }
.validation-errors {
  background: rgba(var(--p-red-rgb), 0.08);
  border: 1px solid rgba(var(--p-red-rgb), 0.25);
  border-radius: 0.5rem;
  color: var(--p-red);
  font-size: 0.8rem;
  padding: 0.6rem 0.85rem 0.6rem 1.9rem;
  margin-bottom: 1rem;
}
.p-form-control.invalid, select.invalid, input.invalid, textarea.invalid { border-color: rgba(var(--p-red-rgb), 0.55) !important; }

/* Detail page cards (EmployeeDetails' emp-detail-grid, portal-native). */
.p-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}
.p-detail-card {
  background: var(--p-card-bg);
  border: 1px solid var(--p-card-border);
  border-radius: var(--p-card-radius);
  box-shadow: var(--p-card-shadow);
  padding: 1rem 1.15rem;
}
.p-detail-card h3 {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  color: var(--p-gold-text);
  margin: 0 0 0.65rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--p-border);
}
.p-detail-card dl { display: grid; grid-template-columns: minmax(110px, 40%) 1fr; gap: 0.3rem 0.75rem; margin: 0; }
.p-detail-card dt { font-size: 0.74rem; font-weight: 600; color: var(--p-text-quiet); }
.p-detail-card dd { font-size: 0.8rem; color: var(--p-text); margin: 0; overflow-wrap: anywhere; }
.p-detail-card ul { margin: 0 0 0.25rem; padding-left: 1.1rem; }
.p-detail-wide { grid-column: 1 / -1; }

/* Modal (ConfirmDialog). */
.p-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13, 19, 28, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  padding: 1rem;
}
.p-modal {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-card-radius);
  box-shadow: var(--dk-shadow-md);
  width: min(440px, 100%);
  padding: 1.15rem 1.25rem;
}
.p-modal-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--p-text-strong);
  margin: 0 0 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.p-modal-icon--danger { color: var(--p-red); }
.p-modal-body { font-size: 0.82rem; color: var(--p-text-muted); margin-bottom: 1rem; }
.p-modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }

/* Image upload (ImageUpload component). */
.p-image-upload { display: flex; flex-direction: column; gap: 0.45rem; }
.p-image-preview {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 0.6rem;
  border: 1px solid var(--p-border);
}
.p-image-upload-controls { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--p-text-muted); }

/* Table row action buttons + missing-field badges (people lists). */
.p-row-actions { display: flex; justify-content: flex-end; gap: 0.35rem; flex-wrap: wrap; }
.p-badge-stack { display: flex; flex-wrap: wrap; gap: 0.25rem; }

/* ── Organization tier (Phase N increment 3) ────────────────────────── */

/* Entity card grids (Departments list view, Sites) — the Server dept-grid/site-grid twins. */
.p-entity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 0.9rem;
}
.p-entity-card {
  background: var(--p-card-bg);
  border: 1px solid var(--p-card-border);
  border-radius: var(--p-card-radius);
  box-shadow: var(--p-card-shadow);
  padding: 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.p-entity-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.p-entity-head h3 { font-size: 0.95rem; font-weight: 700; color: var(--p-text-strong); margin: 0 0 0.15rem; }
.p-entity-code {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--p-text-quiet);
  text-transform: uppercase;
}
.p-entity-meta { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.78rem; color: var(--p-text-muted); }
.p-entity-meta i { margin-right: 0.3rem; opacity: 0.7; }
.p-entity-stats {
  display: flex;
  gap: 1.4rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--p-border);
  border-bottom: 1px solid var(--p-border);
}
.p-entity-stats > div { display: flex; flex-direction: column; }
.p-entity-stats strong { font-size: 1.05rem; color: var(--p-text-strong); line-height: 1.1; }
.p-entity-stats span { font-size: 0.68rem; color: var(--p-text-quiet); }
.p-entity-card .p-row-actions { justify-content: flex-start; margin-top: auto; }

/* Department tree view (Server dept-tree twin). */
.p-tree {
  background: var(--p-card-bg);
  border: 1px solid var(--p-card-border);
  border-radius: var(--p-card-radius);
  box-shadow: var(--p-card-shadow);
  padding: 0.75rem 1rem;
}
.p-tree-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0.5rem;
  flex-wrap: wrap;
}
.p-tree-row:hover { background: var(--p-fill); }
.p-tree-icon { color: var(--p-gold-text); font-size: 0.85rem; }
.p-tree-name { font-size: 0.85rem; font-weight: 600; color: var(--p-text-strong); text-decoration: none; }
.p-tree-name:hover { text-decoration: underline; }
.p-tree-code { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; color: var(--p-text-quiet); text-transform: uppercase; }
.p-tree-meta, .p-tree-count { font-size: 0.74rem; color: var(--p-text-muted); }
.p-tree-meta i, .p-tree-count i { margin-right: 0.2rem; opacity: 0.7; }
.p-tree-delete { margin-left: auto; opacity: 0; transition: opacity 0.15s; }
.p-tree-row:hover .p-tree-delete { opacity: 1; }

/* View-mode toggle (Departments tree/list). */
.p-viewmode-group { display: inline-flex; gap: 0.25rem; }
.p-btn--active { border-color: rgba(226, 172, 75, 0.65) !important; color: var(--p-gold-text) !important; }

/* Tab bar (Sites active/inactive). */
.p-tab-bar { display: flex; gap: 0.4rem; margin-bottom: 1rem; border-bottom: 1px solid var(--p-border); }
.p-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.45rem 0.7rem;
  font-size: 0.82rem;
  color: var(--p-text-muted);
  cursor: pointer;
}
.p-tab:hover { color: var(--p-text-strong); }
.p-tab--active { color: var(--p-text-strong); border-bottom-color: var(--p-gold-text); font-weight: 600; }
.p-tab-count {
  background: var(--p-fill);
  border-radius: 999px;
  font-size: 0.7rem;
  padding: 0.05rem 0.5rem;
  color: var(--p-text-quiet);
}

/* Site details setup checklist. */
.p-checklist { list-style: none; margin: 0; padding: 0; }
.p-checklist li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--p-border);
  font-size: 0.82rem;
  color: var(--p-text);
}
.p-checklist li:last-child { border-bottom: none; }
.p-checklist i { margin-right: 0.35rem; }
.p-check-done { color: var(--p-green); }
.p-check-todo { color: var(--p-text-quiet); }

/* Department details sub-department list. */
.p-sub-list { list-style: none; margin: 0; padding: 0; }
.p-sub-list li { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0; font-size: 0.82rem; }
.p-sub-list a { font-weight: 600; color: var(--p-text-strong); text-decoration: none; }
.p-sub-list a:hover { text-decoration: underline; }

/* Site settings access-grant add row. */
.p-access-add { display: flex; align-items: flex-end; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 1rem; }
.p-access-add-user { min-width: 260px; flex: 1 1 260px; }

/* Managed Lists layout (Server lists-layout twin). */
.p-lists-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 800px) { .p-lists-layout { grid-template-columns: 1fr; } }
.p-lists-nav {
  background: var(--p-card-bg);
  border: 1px solid var(--p-card-border);
  border-radius: var(--p-card-radius);
  box-shadow: var(--p-card-shadow);
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.p-lists-nav-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p-text-quiet);
  padding: 0.35rem 0.6rem;
}
.p-lists-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: none;
  border: none;
  border-radius: 0.5rem;
  padding: 0.45rem 0.6rem;
  font-size: 0.8rem;
  color: var(--p-text-muted);
  text-align: left;
  cursor: pointer;
}
.p-lists-nav-item:hover { background: var(--p-fill); color: var(--p-text-strong); }
.p-lists-nav-item.active { background: rgba(226, 172, 75, 0.14); color: var(--p-gold-text); font-weight: 600; }
.p-lists-nav-count {
  background: var(--p-fill);
  border-radius: 999px;
  font-size: 0.68rem;
  padding: 0.05rem 0.45rem;
  color: var(--p-text-quiet);
}
.p-lists-editor {
  background: var(--p-card-bg);
  border: 1px solid var(--p-card-border);
  border-radius: var(--p-card-radius);
  box-shadow: var(--p-card-shadow);
  padding: 1rem 1.15rem;
}
.p-lists-editor-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.9rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.p-lists-editor-header h3 { font-size: 0.95rem; font-weight: 700; color: var(--p-text-strong); margin: 0 0 0.2rem; }
.p-lists-editor-sub { font-size: 0.76rem; color: var(--p-text-quiet); margin: 0; }
.p-lists-add { display: flex; gap: 0.6rem; margin-bottom: 0.5rem; }
.p-lists-add .p-form-control { flex: 1; }
.p-lists-hint { font-size: 0.74rem; color: var(--p-text-quiet); margin: 0.25rem 0 0.75rem; }
.p-lists-values { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.p-lists-value {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.25rem;
  border-bottom: 1px solid var(--p-border);
  font-size: 0.82rem;
}
.p-lists-value:last-child { border-bottom: none; }
.p-lists-value-text { flex: 1; color: var(--p-text); }
.p-lists-edit { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.p-lists-edit-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.p-lists-edit-row .p-form-control { flex: 1; min-width: 160px; }
.p-lists-scope-select { max-width: 230px; }

/* Field hint under form controls (Server form-text twin). */
.p-field-hint { font-size: 0.72rem; color: var(--p-text-quiet); margin-top: 0.2rem; }

/* ── Reports tier (Phase N increment 4): generic report renderer ─────
   Visual language ported from the Server portal's wwwroot/css/pages/reports.css
   (BI-style sections, accent KPI cards, scope pill, dense data tables), re-tokened
   onto the p- system. Chart cards stay WHITE in both themes: the SVG charts are the
   export pipeline's own drawing (fixed report-paper palette), so the tile renders
   like the printed report rather than inheriting the dark surface. */

.reports-page { display: flex; flex-direction: column; gap: 1.1rem; }

.rp-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.rp-header-titles h1 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--p-text-strong);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.rp-header-titles h1 i { color: var(--dk-accent); }
.rp-subtitle { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--p-text-muted); }
.rp-header-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* Scope / filter context pill (Server .report-scope twin). */
.rp-scope {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  background: var(--dk-accent-soft);
  border: 1px solid var(--p-border);
  color: var(--dk-accent);
  border-radius: 2rem;
  font-size: 0.8rem;
  font-weight: 600;
  width: fit-content;
}
.theme-dark .rp-scope { color: var(--p-text); }

/* Per-report controls (turnover date range, groupBy select). */
.rp-controls {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.rp-control { display: flex; flex-direction: column; gap: 0.25rem; }
.rp-control > span {
  font-size: var(--p-label-size, 0.72rem);
  color: var(--p-label-color, var(--p-text-quiet));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rp-control .p-form-control { width: auto; }

/* Titled visual container (Server .report-section twin). */
.rp-section { display: flex; flex-direction: column; gap: 0.85rem; }
.rp-section-head {
  border-bottom: 2px solid var(--p-line, var(--p-border));
  padding-bottom: 0.45rem;
}
.rp-section-head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--p-text-strong);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.rp-section-head h2 i { color: var(--dk-accent); }

/* KPI cards (Server .kpi-grid/.kpi-card twins): navy accent, hover lift. */
.rp-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.75rem;
}
.rp-kpi-card {
  background: var(--p-surface);
  border: 1px solid var(--p-card-border, var(--p-border));
  border-left: 4px solid var(--dk-accent);
  border-radius: var(--p-card-radius, 0.5rem);
  padding: 0.8rem 0.95rem;
  box-shadow: var(--p-card-shadow, none);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.rp-kpi-card:hover { transform: translateY(-1px); }
.rp-kpi-card h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--p-text-strong);
  overflow-wrap: anywhere;
}
.rp-kpi-card p { margin: 0.2rem 0 0; font-size: 0.76rem; color: var(--p-text-muted); }

/* Chart tiles — white "report paper" in both themes (see header note). */
.rp-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 0.9rem;
}
.rp-chart-card {
  background: #ffffff;
  border: 1px solid var(--p-card-border, var(--p-border));
  border-radius: var(--p-card-radius, 0.5rem);
  padding: 0.8rem 0.95rem 0.6rem;
  box-shadow: var(--p-card-shadow, none);
}
.rp-chart-title { margin: 0 0 0.4rem; font-size: 0.9rem; font-weight: 700; color: #1f2a44; }
.rp-chart-empty { margin: 0.5rem 0; color: #6c757d; font-size: 0.85rem; }
.rp-chart-svg svg { display: block; width: 100%; height: auto; }

/* Report tables (Server .report-table-card/.report-table twins): dense data grid
   in its own tile; wide tables scroll inside the wrap. */
.rp-table-card {
  background: var(--p-surface);
  border: 1px solid var(--p-card-border, var(--p-border));
  border-radius: var(--p-card-radius, 0.5rem);
  padding: 0.6rem 0.85rem 0.85rem;
  box-shadow: var(--p-card-shadow, none);
}
.rp-table-title { margin: 0.15rem 0 0.45rem; font-size: 0.9rem; font-weight: 700; color: var(--p-text-strong); }
.rp-table-wrap { overflow-x: auto; }
.rp-table { width: 100%; border-collapse: collapse; table-layout: auto; }
.rp-table thead th {
  text-align: left;
  padding: 0.5rem 0.7rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--p-text-strong);
  background: var(--p-surface-raised);
  border-bottom: 2px solid var(--p-border);
  white-space: nowrap;
}
.rp-table thead th.rp-th-group {
  text-align: center;
  background: var(--dk-accent);
  color: #ffffff;
  border-right: 1px solid rgba(255, 255, 255, 0.35);
}
.rp-table tbody td {
  padding: 0.5rem 0.7rem;
  font-size: 0.84rem;
  color: var(--p-text);
  border-bottom: 1px solid var(--p-line-soft, var(--p-border));
}
.rp-table tbody tr:nth-child(even) td { background: var(--p-fill, transparent); }
.rp-table tfoot td {
  padding: 0.5rem 0.7rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--p-text-strong);
  border-top: 2px solid var(--dk-gold);
}
.rp-table .rp-num { text-align: right; }
.rp-table-empty { color: var(--p-text-muted); font-style: italic; }

/* BI-pack card on the hub (Server Dashboard quick-reports card twin). */
.rp-bipack-card { padding: 1rem 1.1rem; }
.rp-bipack-text { margin: 0 0 0.75rem; font-size: 0.85rem; color: var(--p-text-muted); }
.rp-bipack-row { margin: 0.5rem 0 0.4rem; font-size: 0.85rem; color: var(--p-text); }
.rp-bipack-muted { color: var(--p-text-quiet); }
.rp-bipack-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.rp-bipack-busy { margin-top: 0.75rem; font-size: 0.85rem; color: var(--p-text-muted); }

/* ── Payroll tier (Phase N increment 5) ─────────────────────────────── */

/* Attendance day tints (Server payroll.css twins): gold = public holiday,
   green = approved leave, red = absence flag. Dark surfaces mute translucent
   tints, so dark mode raises the alpha to keep the hues readable at cell size. */
.p-page {
  --p-att-tint-holiday: rgba(226, 172, 75, 0.20);
  --p-att-tint-leave:   rgba(63, 169, 108, 0.20);
  --p-att-tint-flag:    rgba(204, 75, 75, 0.16);
}
:root.theme-dark .p-page,
.theme-dark .p-page {
  --p-att-tint-holiday: rgba(226, 172, 75, 0.18);
  --p-att-tint-leave:   rgba(63, 169, 108, 0.26);
  --p-att-tint-flag:    rgba(204, 75, 75, 0.28);
}

/* Period selector (Attendance, Pay Period, Overtime, DMPR month stepper). */
.p-period-selector { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.p-period-label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--p-text-strong);
  min-width: 9.5rem;
  text-align: center;
}
.p-period-to { font-size: 0.8rem; color: var(--p-text-quiet); }
.p-date-input { width: auto; }
.p-btn--toggled {
  background: var(--p-fill-hover);
  border-color: var(--p-border-hover);
  color: var(--p-text-strong);
}
.p-lock-hint { max-width: 16rem; font-size: 0.74rem; color: var(--p-text-quiet); align-self: center; }

/* Alert spacing wrapper (payroll pages stack several alerts above content). */
.p-att-alert { margin-bottom: 1rem; }

/* KPI strip (Pay Period, Overtime, DMPR). */
.p-kpis { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.p-kpi {
  background: var(--p-card-bg);
  border: 1px solid var(--p-card-border);
  border-left: 4px solid var(--dk-accent);
  border-radius: 0.5rem;
  padding: 0.6rem 1rem;
  min-width: 9rem;
  box-shadow: var(--p-card-shadow);
}
.p-kpi span {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--p-text-strong);
  font-variant-numeric: tabular-nums;
}
.p-kpi label { color: var(--p-text-dim); font-size: 0.74rem; }

/* Tabs (Leave). */
.p-tabs { display: flex; gap: 0.25rem; border-bottom: 2px solid var(--p-border); margin-bottom: 1rem; }
.p-tab {
  border: none;
  background: none;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--p-text-dim);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
}
.p-tab.active { color: var(--p-text-strong); border-bottom-color: var(--ca-gold); }

/* Table helpers shared by the payroll tables. */
.p-table-nowrap { white-space: nowrap; font-variant-numeric: tabular-nums; }
.p-td-num { text-align: right !important; white-space: nowrap; }
.p-th-center { text-align: center !important; }
.p-num-danger { color: var(--p-red); }
.p-num-ok { color: var(--p-green); }
.p-cell-sub { color: var(--p-text-quiet); }
.p-cell-block { display: block; }
.p-att-footnote { font-size: 0.76rem; color: var(--p-text-dim); margin: 0.6rem 0 0; }
.p-footnote-tight { margin-top: 0.35rem; }

/* Two-row header (Leave Balances). */
.p-table-2h thead tr:first-child th { height: 2.6rem; }

/* Inline decide row (Leave). */
.p-decide-row { align-items: center; }
.p-decide-note { width: 160px; display: inline-block; }

/* Overtime zero-rows toggle. */
.p-showall { margin-bottom: 0.75rem; }

/* DMPR appendix / settings holiday toolbar. */
.p-appendix-toggle { display: flex; justify-content: flex-end; margin-bottom: 0.5rem; }
.p-holiday-add { margin-bottom: 1rem; }
.p-form-actions--inline { justify-content: flex-start; border-top: none; padding-top: 0; margin-top: 0; align-self: end; }

/* Inline cell editor (Attendance). */
.p-cell-editor {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  background: var(--p-card-bg);
  border: 1px solid var(--p-card-border);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: var(--p-text);
}
.p-cell-editor-date { color: var(--p-text-quiet); }
.p-cell-editor .p-form-control { width: auto; }
.p-cell-editor-ot { display: flex; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.8rem; color: var(--p-text-muted); }
.p-cell-editor-ot input { width: 5rem; }
.p-cell-editor-note { width: 14rem !important; }

/* Legend chips (Attendance; swatches reuse the tint classes so the legend
   always matches the actual cell colors in both themes). */
.p-att-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  align-items: center;
  margin-bottom: 0.6rem;
  font-size: 0.76rem;
  color: var(--p-text-dim);
}
.p-att-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.p-att-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid var(--p-border);
  border-radius: 0.3rem;
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--p-text);
  background: var(--p-fill);
}

/* The attendance grid itself. */
.p-att-grid-wrap {
  overflow: auto;
  max-height: min(75vh, 42rem); /* engages the sticky header + name column */
  background: var(--p-card-bg);
  border: 1px solid var(--p-card-border);
  border-radius: 0.5rem;
}
.p-att-grid { border-collapse: collapse; width: 100%; font-size: 0.82rem; color: var(--p-text); }
.p-att-grid th,
.p-att-grid td {
  border: 1px solid var(--p-line);
  text-align: center;
  padding: 0.15rem 0.2rem;
}
.p-att-grid tbody td { border-bottom-color: var(--p-border); }
.p-att-grid thead th {
  background: var(--p-surface-raised);
  color: var(--p-text-strong);
  font-weight: 600;
  border-bottom: 2px solid var(--p-border-hover);
  position: sticky;
  top: 0;
  z-index: 1;
}
.p-att-grid tbody tr:nth-child(even) { background: var(--p-fill); }
.p-att-grid tbody tr:nth-child(even) .p-att-name-col { background: var(--p-surface-raised); }
.p-att-grid tbody tr:hover { background: var(--p-fill-hover); }
.p-att-grid tbody tr:hover .p-att-name-col { background: var(--p-fill-hover); }
.p-att-name-col {
  text-align: left !important;
  padding: 0.25rem 0.5rem !important;
  white-space: nowrap;
  position: sticky;
  left: 0;
  background: var(--p-surface);
  z-index: 2;
  min-width: 11rem;
}
.p-att-grid thead .p-att-name-col { background: var(--p-surface-raised); z-index: 3; }
.p-att-viewonly { color: var(--p-text-quiet); margin-left: 0.25rem; }
.p-att-day-col { min-width: 1.9rem; font-size: 0.72rem; line-height: 1.1; }
.p-att-day-num { font-weight: 400; color: var(--p-text-dim); }
.p-att-all-btn {
  border: none;
  background: none;
  color: var(--p-green);
  font-size: 0.7rem;
  padding: 0;
  cursor: pointer;
}
.p-att-cell { cursor: pointer; min-width: 1.9rem; height: 1.9rem; position: relative; }
.p-att-cell:hover { outline: 2px solid var(--ca-gold); outline-offset: -2px; }

/* Day tints. Source order matters: weekend → holiday → leave → flag, so a
   status tint always beats the underlying day tint when a cell carries both. */
.p-att-weekend { background: var(--p-fill-hover); }
.p-att-holiday { background: var(--p-att-tint-holiday); }
.p-att-leave { background: var(--p-att-tint-leave); cursor: default; }
.p-att-leave .p-att-glyph { color: var(--p-green); }
.p-att-flag { background: var(--p-att-tint-flag); }
.p-att-flag .p-att-glyph { color: var(--p-red); }

/* Closed-month days inside a range: read-only, muted (over the day tints). */
.p-att-locked { opacity: 0.55; }
td.p-att-locked { cursor: not-allowed; }
td.p-att-locked:hover { outline: none; }
.p-att-selected {
  outline: 2px solid var(--ca-gold);
  outline-offset: -2px;
  box-shadow: var(--dk-focus-ring);
}
.p-att-glyph { font-weight: 600; }
.p-att-ot-badge {
  position: absolute;
  top: 0;
  right: 1px;
  font-size: 0.68rem;
  color: var(--p-blue);
  font-weight: 700;
}
.p-att-ot-col { min-width: 3rem; background: var(--p-surface-raised); }

@media (max-width: 768px) {
  .p-att-name-col { min-width: 8rem; white-space: normal; }
  .p-cell-editor-note { width: 100% !important; }
}