/* =============================================================================
   THEME: PREMIUM  ·  override layer loaded AFTER style.css
   Direction: sophisticated enterprise — deep ink-aurora sidebar with liquid
   glass navigation, tinted-glass controls, calm refined content surfaces,
   fluid restrained motion. No markup changes; safe to remove by deleting
   this one <link>.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1 · TOKENS
--------------------------------------------------------------------------- */
:root {
  --color-bg: #f4f6fb;
  --color-border: #e4e9f2;
  --color-border-strong: #d3dae6;

  --ink-1: #0a0e23;            /* sidebar deep ink */
  --ink-2: #12173a;
  --aurora-indigo: rgba(99, 91, 255, 0.30);
  --aurora-plum:   rgba(179, 68, 127, 0.22);   /* nod to the AMG brand maroon */
  --aurora-cyan:   rgba(5, 112, 222, 0.16);

  --glass-border:      rgba(255, 255, 255, 0.14);
  --glass-border-hi:   rgba(255, 255, 255, 0.26);
  --glass-fill:        linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  --glass-fill-active: linear-gradient(135deg, rgba(120,110,255,.38), rgba(99,91,255,.20));

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow-xs: 0 1px 2px rgba(13, 18, 48, 0.05);
  --shadow-sm: 0 2px 6px rgba(13, 18, 48, 0.06), 0 1px 2px rgba(13, 18, 48, 0.04);
  --shadow-md: 0 6px 16px -4px rgba(13, 18, 48, 0.10), 0 2px 6px rgba(13, 18, 48, 0.05);
  --shadow-lg: 0 18px 40px -12px rgba(13, 18, 48, 0.18), 0 8px 18px -8px rgba(13, 18, 48, 0.10);

  --spring: cubic-bezier(.2, .8, .2, 1);
  --motion-fast: 150ms;
  --motion-normal: 220ms;
}

::selection { background: rgba(99, 91, 255, .18); }

html { scrollbar-width: thin; scrollbar-color: #c3cbdd transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #c3cbdd; border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #a8b3ca; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* NOTE: no entrance animation on .main-content — an animated/retained
   transform on a modal ancestor re-anchors every position:fixed overlay
   (modals opened ~4000px off-screen). Interaction transitions only. */

/* ---------------------------------------------------------------------------
   2 · SIDEBAR — ink aurora + liquid glass tabs
--------------------------------------------------------------------------- */
.sidebar {
  background:
    radial-gradient(90% 40% at 110% -5%,  var(--aurora-indigo), transparent 60%),
    radial-gradient(80% 34% at -25% 108%, var(--aurora-plum),   transparent 62%),
    radial-gradient(60% 30% at 120% 55%,  var(--aurora-cyan),   transparent 60%),
    linear-gradient(180deg, var(--ink-1) 0%, var(--ink-2) 58%, #0c1130 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); background-clip: padding-box; }

.sidebar-brand { border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand-image { border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25); }

.sidebar-section-title {
  color: rgba(255,255,255,.52);
  letter-spacing: .12em;
  font-size: 10.5px;
}

/* Liquid glass nav tab */
.sidebar-nav a {
  position: relative;
  padding: 10px 14px;
  margin-bottom: 3px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.72);
  transition:
    transform var(--motion-normal) var(--spring),
    background var(--motion-normal) ease,
    border-color var(--motion-normal) ease,
    color var(--motion-fast) ease,
    box-shadow var(--motion-normal) ease;
}
/* specular top-light painted as an extra background layer on the anchor
   itself in :hover/.active below — no pseudo, no z-index, no stacking-
   context management needed */
.sidebar-nav a:hover {
  color: #fff;
  background:
    linear-gradient(120deg, rgba(255,255,255,.11), rgba(255,255,255,.022) 38%, transparent 62%),
    var(--glass-fill);
  border-color: var(--glass-border);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}
.sidebar-nav a:active { transform: scale(.97); }

.sidebar-nav a.active {
  color: #fff;
  background:
    linear-gradient(120deg, rgba(255,255,255,.15), rgba(255,255,255,.03) 38%, transparent 62%),
    var(--glass-fill-active);
  border-color: var(--glass-border-hi);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    0 8px 22px rgba(64, 56, 200, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
/* glowing indicator filament */
.sidebar-nav a.active::before {
  left: -12px;
  width: 3px;
  height: 22px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #a5b4ff, #635bff);
  box-shadow: 0 0 10px 1px rgba(120, 110, 255, .8);
}
.sidebar-nav a svg { transition: transform var(--motion-normal) var(--spring); }
.sidebar-nav a:hover svg { transform: translateX(1px) scale(1.06); }

.sidebar-nav-badge, .sidebar-chat-badge {
  background: linear-gradient(135deg, #ff5c7a, #df1b41);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 2px 8px rgba(223,27,65,.45), inset 0 1px 0 rgba(255,255,255,.35);
}

.sidebar-user {
  border-top: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.28));
}

/* ---------------------------------------------------------------------------
   2b · TOPBAR — frosted, anchored
--------------------------------------------------------------------------- */
.topbar {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--color-border);
}
.topbar-title { letter-spacing: -0.015em; }

/* ---------------------------------------------------------------------------
   3 · BUTTONS — tinted glass controls
--------------------------------------------------------------------------- */
.btn {
  border-radius: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
  position: relative;
  isolation: isolate;
  transition:
    transform var(--motion-normal) var(--spring),
    box-shadow var(--motion-normal) ease,
    background var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    color var(--motion-fast) ease;
}
.btn:active { transform: scale(.96); }
.btn:focus-visible { outline: 2px solid #635bff; outline-offset: 2px; }
.btn svg { transition: transform var(--motion-normal) var(--spring); }

.btn-primary {
  background: linear-gradient(135deg, rgba(124, 116, 255, .96), rgba(84, 76, 236, .92));
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 6px 18px rgba(84, 76, 236, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
/* sheen: static at rest (no transform — diagonal baked into the gradient
   angle); hover sweeps via transform only, so the animation is compositor-only */
.btn-primary::after {
  content: '';
  position: absolute;
  width: 45%; height: 190%;
  top: -45%; left: -65%;
  background: linear-gradient(108deg, transparent, rgba(255,255,255,.28), transparent);
  transition: transform 600ms var(--spring);
  pointer-events: none;
}
.btn-primary:hover {
  background: linear-gradient(135deg, rgba(134, 126, 255, 1), rgba(94, 86, 246, .96));
  box-shadow:
    0 10px 26px rgba(84, 76, 236, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.40);
  transform: translateY(-1px);
}
.btn-primary:hover::after { transform: translateX(420%); }

.btn-secondary {
  background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.62));
  border: 1px solid var(--color-border-strong);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,.9);
}
.btn-secondary:hover {
  background: #fff;
  border-color: #b9c3d6;
  box-shadow: var(--shadow-sm), inset 0 1px 0 #fff;
  transform: translateY(-1px);
}

.btn-ghost { border-radius: 10px; }
.btn-ghost:hover { background: rgba(13, 18, 48, 0.05); }

.btn-danger {
  background: linear-gradient(135deg, rgba(240, 62, 96, .95), rgba(200, 24, 58, .92));
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 6px 16px rgba(223, 27, 65, .35), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-danger:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(223,27,65,.42), inset 0 1px 0 rgba(255,255,255,.34); }

.btn-success {
  box-shadow: 0 5px 14px rgba(0, 170, 130, .30), inset 0 1px 0 rgba(255,255,255,.28);
  border: 1px solid rgba(255,255,255,.22);
}

/* small utility buttons stay quiet */
.btn-sm { border-radius: 9px; }
.btn-sm:active { transform: scale(.95); }

/* ---------------------------------------------------------------------------
   4 · SURFACES — cards, tables, forms, modals
--------------------------------------------------------------------------- */
.card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.stat-card {
  border-radius: var(--radius-lg);
  transition: transform var(--motion-normal) var(--spring), box-shadow var(--motion-normal) ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.table thead th {
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  /* #64748b keeps AA contrast for meaningful header text; the uppercase +
     letter-spacing treatment already provides the de-emphasis */
  color: #64748b;
}
.table tbody tr { transition: background var(--motion-fast) ease; }
.table tbody tr:hover { background: rgba(99, 91, 255, 0.035); }

.form-control {
  border-radius: 10px;
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background var(--motion-fast) ease;
}
.form-control:focus {
  border-color: #8f88ff;
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.16);
}

.modal-overlay {
  background: rgba(10, 14, 35, 0.45);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
}
/* NOTE: no custom modal animation — the base style.css "modalIn" handles the
   entrance; redefining keyframes of the same name (or adding fill-mode:both
   here) left dialogs stuck invisible on some machines. */
.modal { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.6) inset; }

.pagination-btn { border-radius: 9px; transition: transform var(--motion-fast) var(--spring), background var(--motion-fast) ease; }
.pagination-btn:hover { transform: translateY(-1px); }
.pagination-btn-current { background: linear-gradient(135deg, #7c74ff, #544cec); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(84,76,236,.35); }

/* ---------------------------------------------------------------------------
   5 · CHAT — smoother, faster
--------------------------------------------------------------------------- */
/* big win: skip rendering off-screen messages in long conversations */
.chat-messages { scroll-behavior: smooth; overscroll-behavior: contain; }
.chat-messages .msg { content-visibility: auto; contain-intrinsic-size: 0 76px; }

/* NOTE: no keyframe animation on messages — same off-screen/fill-mode risk
   class as the modal bug; transitions on interactive elements are enough. */

.msg-bubble {
  border-radius: 16px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--motion-fast) ease;
}
.msg-them .msg-bubble { border: 1px solid var(--color-border); background: #fff; border-bottom-left-radius: 6px; }
.msg-me .msg-bubble {
  background: linear-gradient(135deg, #f0eeff, #e6e9ff);
  border: 1px solid rgba(99, 91, 255, .22);
  border-bottom-right-radius: 6px;
}
.msg-bubble:hover { box-shadow: var(--shadow-sm); }

.chat-sidebar { border-right: 1px solid var(--color-border); }
.chat-item {
  border-radius: 12px;
  transition: background var(--motion-fast) ease, transform var(--motion-normal) var(--spring);
}
.chat-item:hover { background: rgba(99, 91, 255, 0.06); }
.chat-item:active { transform: scale(.985); }
.chat-item.active {
  background: linear-gradient(135deg, rgba(99,91,255,.12), rgba(5,112,222,.07));
  box-shadow: inset 0 0 0 1px rgba(99,91,255,.18);
}
.chat-unread-badge {
  background: linear-gradient(135deg, #ff5c7a, #df1b41);
  box-shadow: 0 2px 6px rgba(223,27,65,.35);
}

.chat-composer {
  border-top: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(255,255,255,.75), #fff 40%);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
}
.chat-composer-input {
  border-radius: 14px;
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.chat-composer-input:focus { border-color: #8f88ff; box-shadow: 0 0 0 3px rgba(99,91,255,.14); }
.chat-send-btn {
  border-radius: 12px;
  background: linear-gradient(135deg, #7c74ff, #544cec);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 5px 14px rgba(84,76,236,.35), inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform var(--motion-normal) var(--spring), box-shadow var(--motion-normal) ease;
}
.chat-send-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(84,76,236,.45), inset 0 1px 0 rgba(255,255,255,.4); }
.chat-send-btn:hover svg { transform: translate(1px, -1px); }
.chat-send-btn:active { transform: scale(.95); }

.lead-pill {
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  transition: transform var(--motion-fast) var(--spring);
}
.lead-pill:hover { transform: translateY(-1px); }
.lead-pill-total { background: linear-gradient(135deg, #efedff, #e4e8ff); }

.msg-reaction, .msg-receipt-btn { transition: transform var(--motion-fast) var(--spring), background var(--motion-fast) ease; }
.msg-reaction:hover { transform: translateY(-1px) scale(1.04); }
.msg-reaction:active { transform: scale(.93); }

/* ---------------------------------------------------------------------------
   6 · MICRO-POLISH
--------------------------------------------------------------------------- */
.badge { border-radius: 99px; letter-spacing: .01em; }
.chat-new-btn, .chat-header-search-btn, .msg-menu-btn {
  transition: transform var(--motion-fast) var(--spring), background var(--motion-fast) ease, color var(--motion-fast) ease;
}
.chat-new-btn:hover, .chat-header-search-btn:hover { transform: translateY(-1px); }
.chat-new-btn:active, .chat-header-search-btn:active { transform: scale(.92); }

.user-pick-item, .il-row { transition: background var(--motion-fast) ease; }

.toast, .alert { border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }

/* ---------------------------------------------------------------------------
   7 · ACCESSIBILITY & REDUCED MOTION
--------------------------------------------------------------------------- */
a:focus-visible, button:focus-visible { outline: 2px solid #635bff; outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  /* Exempt the base loading spinner (style.css @keyframes spin, 700ms linear
     infinite): without this the universal clamp freezes it after one 0.01ms
     iteration and every loading state renders as a static, seemingly hung
     glyph. !important is required to out-cascade the clamp above. */
  .spinner {
    animation-duration: 700ms !important;
    animation-iteration-count: infinite !important;
  }
  .btn-primary::after { display: none; }
  .sidebar-nav a:hover, .btn:hover, .stat-card:hover { transform: none; }
}

/* ============ V2 PAGE LAYERS ============ */

/* ===== PAGE: login ===== */
/* Standalone auth screen: ink-aurora backdrop (sidebar language), frosted
   glass card, glowing indigo focus rings, liquid-glass sign-in button.
   Requires theme-premium.css linked before this block (tokens). */

/* --- Page backdrop: deep ink with aurora glows, echoing the sidebar --- */
.auth-page {
  background:
    radial-gradient(55% 42% at 78% -8%,  var(--aurora-indigo), transparent 62%),
    radial-gradient(48% 38% at -12% 100%, var(--aurora-plum),   transparent 64%),
    radial-gradient(40% 32% at 108% 72%, var(--aurora-cyan),   transparent 60%),
    radial-gradient(70% 55% at 50% 118%, rgba(99, 91, 255, 0.10), transparent 70%),
    linear-gradient(180deg, var(--ink-1) 0%, var(--ink-2) 58%, #0c1130 100%);
}
/* existing decorative layer: fine white filament grid instead of indigo lines */
.auth-page::before {
  background:
    repeating-linear-gradient(45deg,  transparent, transparent 90px, rgba(255, 255, 255, 0.028) 90px, rgba(255, 255, 255, 0.028) 91px),
    repeating-linear-gradient(-45deg, transparent, transparent 90px, rgba(255, 255, 255, 0.018) 90px, rgba(255, 255, 255, 0.018) 91px);
  opacity: 0.9;
}

/* --- Frosted glass card ------------------------------------------------- */
.auth-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96) 0%, rgba(246, 248, 253, 0.92) 100%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-lg);
  box-shadow:
    0 30px 70px -18px rgba(4, 7, 24, 0.65),
    0 12px 28px -12px rgba(4, 7, 24, 0.45),
    0 0 0 1px rgba(10, 14, 35, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  padding: 40px 40px 36px;
}
.auth-card h1 {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: #0a1230;
}
.auth-card .subtitle {
  color: #5a657e;
  font-size: 14px;
  letter-spacing: -0.005em;
}

/* --- Brand chip: miniature ink-aurora panel ----------------------------- */
.auth-brand {
  background:
    radial-gradient(90% 90% at 100% 0%,  var(--aurora-indigo), transparent 65%),
    radial-gradient(80% 80% at 0% 110%,  var(--aurora-plum),   transparent 66%),
    linear-gradient(160deg, var(--ink-1), var(--ink-2));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow:
    0 10px 24px -8px rgba(4, 7, 24, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.auth-brand-image {
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.auth-brand-name {
  color: #ffffff;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* --- Alerts inside the card -------------------------------------------- */
.auth-card .alert {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

/* --- Inputs: crisp fields with a glowing indigo focus ring -------------- */
.auth-card .form-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #33405c;
  letter-spacing: 0.01em;
}
.auth-card .form-control {
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-normal) ease, background var(--motion-fast) ease;
}
.auth-card .form-control:hover { border-color: #b9c3d6; }
.auth-card .form-control:focus {
  background: #ffffff;
  border-color: #8f88ff;
  box-shadow:
    0 0 0 4px rgba(99, 91, 255, 0.16),
    0 6px 18px -6px rgba(99, 91, 255, 0.35),
    inset 0 1px 0 #ffffff;
}
.auth-card .form-control::placeholder { color: #9aa5b8; }
.auth-card input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 60px #ffffff inset;
  -webkit-text-fill-color: #0a1230;
  caret-color: #0a1230;
}

/* --- Sign-in button: liquid glass primary ------------------------------- */
.auth-card .btn-primary {
  border-radius: 11px;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffff;
  background: linear-gradient(135deg, rgba(124, 116, 255, 0.98), rgba(84, 76, 236, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.30);
  box-shadow:
    0 8px 22px -4px rgba(64, 56, 200, 0.55),
    0 2px 6px rgba(13, 18, 48, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10);
  transition:
    transform var(--motion-normal) var(--spring),
    box-shadow var(--motion-normal) ease,
    background var(--motion-fast) ease;
}
.auth-card .btn-primary:hover {
  background: linear-gradient(135deg, rgba(136, 128, 255, 1), rgba(94, 86, 246, 0.98));
  box-shadow:
    0 12px 30px -6px rgba(64, 56, 200, 0.65),
    0 3px 8px rgba(13, 18, 48, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  transform: translateY(-1px);
}
.auth-card .btn-primary:active {
  transform: scale(0.97);
  box-shadow:
    0 5px 14px -4px rgba(64, 56, 200, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.auth-card .btn-primary:focus-visible {
  outline: 2px solid #c9c5ff;
  outline-offset: 2px;
}

/* --- Footer note -------------------------------------------------------- */
.auth-card .text-muted { color: #64748b; }
.auth-card .text-sm { letter-spacing: -0.003em; }

/* ===== PAGE: dashboard ===== */
/* Scopes: .stat-grid and .dashboard-grid exist only in pages/dashboard.php.
   Greeting rules are bound to the page via :has(.dashboard-greet-avatar).
   Cosmetic overrides with interaction transitions only. */

/* ---- 1 · Greeting header ------------------------------------------------ */
.page-header-text h1:has(.dashboard-greet-avatar) {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #0d1130;
}
.page-header-text:has(.dashboard-greet-avatar) p {
  color: #5b6478;
  font-size: 13.5px;
  letter-spacing: 0.005em;
}
.page-header-text:has(.dashboard-greet-avatar) [data-clock] {
  padding: 1px 4px;
  border-radius: 6px;
  background: rgba(99, 91, 255, 0.08);
  border: 1px solid rgba(99, 91, 255, 0.16);
  color: #4f46e5;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.page-header-text:has(.dashboard-greet-avatar) [data-clock]:empty { opacity: 0; }
.dashboard-greet-avatar {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px rgba(99, 91, 255, 0.35),
    0 4px 12px rgba(13, 18, 48, 0.16);
}

/* ---- 2 · Stat tiles - liquid-glass light surface ------------------------ */
.stat-grid .stat-card {
  background:
    radial-gradient(130% 90% at 100% 0%, rgba(99, 91, 255, 0.055), transparent 52%),
    linear-gradient(165deg, #ffffff, #fbfcff);
  border-color: var(--color-border);
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    transform var(--motion-normal) var(--spring),
    box-shadow var(--motion-normal) ease,
    border-color var(--motion-fast) ease,
    background var(--motion-fast) ease;
}
.stat-grid .stat-card:hover {
  border-color: #ccd4e4;
  box-shadow: var(--shadow-md), inset 0 1px 0 #fff;
}
/* per-tile aurora wash keyed off the icon accent */
.stat-grid .stat-card:has(.stat-card-icon.success) {
  background:
    radial-gradient(130% 90% at 100% 0%, rgba(6, 164, 120, 0.06), transparent 52%),
    linear-gradient(165deg, #ffffff, #fbfefd);
}
.stat-grid .stat-card:has(.stat-card-icon.warning) {
  background:
    radial-gradient(130% 90% at 100% 0%, rgba(217, 155, 22, 0.075), transparent 52%),
    linear-gradient(165deg, #ffffff, #fffdf8);
}
.stat-grid .stat-card:has(.stat-card-icon.danger) {
  background:
    radial-gradient(130% 90% at 100% 0%, rgba(223, 27, 65, 0.055), transparent 52%),
    linear-gradient(165deg, #ffffff, #fffbfc);
}

/* ---- 3 · Differentiated accent icons ------------------------------------ */
.stat-grid .stat-card-icon {
  border-radius: 11px;
  background: linear-gradient(135deg, #eceafe, #dcd9ff);
  color: #4f46e5;
  border: 1px solid rgba(99, 91, 255, 0.20);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 3px 8px rgba(99, 91, 255, 0.16);
  transition: transform var(--motion-normal) var(--spring), box-shadow var(--motion-normal) ease;
}
.stat-grid .stat-card-icon.success {
  background: linear-gradient(135deg, #ddf7e9, #c5efd9);
  color: #067250;
  border-color: rgba(6, 145, 96, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 3px 8px rgba(6, 145, 96, 0.14);
}
.stat-grid .stat-card-icon.warning {
  background: linear-gradient(135deg, #fdf0d3, #fae2ab);
  color: #8a5a06;
  border-color: rgba(180, 129, 9, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 3px 8px rgba(180, 129, 9, 0.14);
}
.stat-grid .stat-card-icon.danger {
  background: linear-gradient(135deg, #fde3ea, #fbcfdc);
  color: #be123c;
  border-color: rgba(190, 18, 60, 0.20);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 3px 8px rgba(190, 18, 60, 0.13);
}
.stat-grid .stat-card:hover .stat-card-icon {
  transform: translateY(-1px) scale(1.03);
}

/* ---- 4 · Tile typography - tabular numerals ----------------------------- */
.stat-grid .stat-card-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #5b6478;
}
.stat-grid .stat-card-value {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: #0d1130;
  font-variant-numeric: tabular-nums lining-nums;
}
.stat-grid .stat-card-meta { color: #64748b; font-size: 12.5px; }
.stat-grid .stat-card-chevron { color: #64748b; }

/* ---- 5 · Expandable tiles + inline people lists ------------------------- */
.stat-grid .stat-card-expandable:hover {
  background:
    radial-gradient(130% 90% at 100% 0%, rgba(99, 91, 255, 0.08), transparent 55%),
    linear-gradient(165deg, #ffffff, #f8f8ff);
  border-color: rgba(99, 91, 255, 0.30);
}
.stat-grid .stat-card-expandable.expanded {
  border-color: rgba(99, 91, 255, 0.34);
  background: linear-gradient(170deg, #ffffff, #f8f8ff);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.10), var(--shadow-md), inset 0 1px 0 #fff;
}
.stat-grid .stat-card-list {
  border-top: 1px solid rgba(99, 91, 255, 0.16);
  padding-top: 8px;
}
.stat-grid .stat-card-list-row {
  padding: 8px 4px;
  border-radius: 8px;
  border-bottom: 1px solid rgba(228, 233, 242, 0.7);
  transition: background var(--motion-fast) ease;
}
.stat-grid .stat-card-list-row:hover { background: rgba(99, 91, 255, 0.05); }
.stat-grid .stat-card-list-name { color: #1a1f36; font-weight: 600; font-size: 13px; }
.stat-grid .stat-card-list-meta { color: #64748b; font-variant-numeric: tabular-nums; }
.stat-grid .muted-small { color: #64748b; }
.stat-grid .stat-card-list-empty { color: #64748b; font-size: 12.5px; }

/* ---- 6 · Recent-leave / holidays / birthdays panels --------------------- */
.dashboard-grid .card {
  background: linear-gradient(180deg, #ffffff, #fcfdff);
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.dashboard-grid .card-header {
  background: linear-gradient(180deg, rgba(244, 246, 251, 0.65), rgba(255, 255, 255, 0));
  border-bottom: 1px solid var(--color-border);
}
.dashboard-grid .card-header h3 { letter-spacing: -0.012em; color: #16203c; }
.dashboard-grid .card-header .btn-ghost { color: #4f46e5; font-weight: 600; }
.dashboard-grid .card-header .text-muted {
  color: #64748b;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dashboard-grid .user-cell-name { font-weight: 600; color: #1a1f36; letter-spacing: -0.005em; }
.dashboard-grid .user-cell-meta { color: #64748b; }
.dashboard-grid .font-medium { color: #16203c; font-weight: 600; letter-spacing: -0.005em; }
.dashboard-grid .text-muted { color: #64748b; }
.dashboard-grid .badge {
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px rgba(13, 18, 48, 0.05);
}

/* ---- 7 · Empty states --------------------------------------------------- */
.dashboard-grid .empty-state-icon {
  background: linear-gradient(135deg, #eef0f8, #e2e7f5);
  color: #4f46e5;
  border: 1px solid var(--color-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 4px 12px rgba(13, 18, 48, 0.06);
}
.dashboard-grid .empty-state h3 { color: #16203c; letter-spacing: -0.01em; }
.dashboard-grid .empty-state p { color: #64748b; }

/* ===== PAGE: employees ===== */
/* People directory: glass view-picker, avatar rings, role/status chips,
   quiet-until-hover row actions, refined add/import/permissions/delete modals.
   Cosmetic override layer only - loaded after style.css + theme-premium.css. */

/* --- View picker: liquid-glass filter control ----------------------------- */
.view-picker-trigger {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.62));
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #0a0e23;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    transform var(--motion-normal) var(--spring),
    box-shadow var(--motion-normal) ease,
    border-color var(--motion-fast) ease,
    background var(--motion-fast) ease;
}
.view-picker-trigger:hover {
  background: #fff;
  border-color: rgba(99, 91, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.10), var(--shadow-sm), inset 0 1px 0 #fff;
  transform: translateY(-1px);
}
.view-picker-trigger:active { transform: scale(0.98); }
.view-picker-trigger svg { color: #635bff; }

.view-picker-menu {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 8px;
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.65) inset;
}
.view-picker-item {
  border-radius: 9px;
  color: #33415c;
  transition:
    background var(--motion-fast) ease,
    color var(--motion-fast) ease,
    transform var(--motion-fast) var(--spring);
}
.view-picker-item:hover { background: rgba(99, 91, 255, 0.07); color: #0a0e23; }
.view-picker-item:active { transform: scale(0.985); }
.view-picker-item.active {
  color: #4f46e5;
  background: linear-gradient(135deg, rgba(99, 91, 255, 0.12), rgba(5, 112, 222, 0.06));
  box-shadow: inset 0 0 0 1px rgba(99, 91, 255, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.view-picker-divider {
  background: linear-gradient(90deg, transparent, var(--color-border-strong), transparent);
}
.view-count {
  color: #64748b;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

/* Import / Export / Add - tiny icon lift on hover only */
.page-header-actions .btn:hover svg { transform: translateY(-1px); }

/* --- Directory rows: avatar ring + crisp identity block ------------------- */
.user-cell .avatar {
  box-shadow:
    0 0 0 2px #fff,
    0 2px 6px rgba(13, 18, 48, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  text-shadow: 0 1px 1px rgba(13, 18, 48, 0.18);
}
.user-cell-name { font-weight: 600; color: #0a0e23; letter-spacing: -0.008em; }
.user-cell-meta { color: #64748b; letter-spacing: 0.005em; }

/* --- Role / status chips --------------------------------------------------- */
.table-wrapper .badge {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.015em;
  color: #47536b;
  background: linear-gradient(135deg, #f7f9fd, #eef1f8);
  border: 1px solid rgba(13, 18, 48, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.table-wrapper .badge-success {
  color: #0b7a4b;
  background: linear-gradient(135deg, #e5f8ef, #d5f3e4);
  border-color: rgba(11, 138, 84, 0.25);
}
.table-wrapper .badge-warning {
  color: #8a6100;
  background: linear-gradient(135deg, #fdf4dd, #faeac4);
  border-color: rgba(180, 129, 9, 0.28);
}
.table-wrapper .badge-danger {
  color: #b3261e;
  background: linear-gradient(135deg, #fdeaea, #fadbdb);
  border-color: rgba(201, 48, 48, 0.25);
}
.table-wrapper .badge-success::before,
.table-wrapper .badge-warning::before,
.table-wrapper .badge-danger::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* --- Row actions: quiet glass icon buttons -------------------------------- */
/* min 40px keeps row controls at the tap-target floor (base .btn already
   centers content with inline-flex) */
.actions-cell .btn-sm { padding: 7px 9px; min-height: 40px; min-width: 40px; }
.actions-cell .btn-ghost {
  border: 1px solid transparent;
  border-radius: 9px;
  color: #64748b;
  transition:
    background var(--motion-fast) ease,
    color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-normal) ease,
    transform var(--motion-normal) var(--spring);
}
.actions-cell .btn-ghost:hover {
  color: #0a0e23;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(244, 246, 251, 0.85));
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}
.actions-cell .btn-ghost:active { transform: scale(0.95); }
.actions-cell .btn-ghost.text-danger:hover {
  color: #c2183b;
  background: linear-gradient(135deg, #fff1f3, #ffe4e8);
  border-color: rgba(223, 27, 65, 0.30);
  box-shadow: 0 2px 8px rgba(223, 27, 65, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* --- Empty state ----------------------------------------------------------- */
.empty-state-icon {
  color: #574fe0;
  background: linear-gradient(135deg, #eef0ff, #e3e9ff);
  border: 1px solid rgba(99, 91, 255, 0.22);
  box-shadow: 0 8px 20px -8px rgba(84, 76, 236, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.empty-state h3 { letter-spacing: -0.01em; font-weight: 600; color: #0a0e23; }
.empty-state p { color: #64748b; }

/* --- Import result stat pills ---------------------------------------------- */
.stat-pill {
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.stat-pill-success {
  color: #0c6b3d;
  background: linear-gradient(135deg, #e2f7ec, #cfefdf);
  border-color: rgba(17, 107, 47, 0.22);
}
.stat-pill-danger {
  color: #b02a2a;
  background: linear-gradient(135deg, #fdeaea, #f9d8d8);
  border-color: rgba(201, 48, 48, 0.22);
}

/* --- Permissions modal: checkbox rows read as a list ----------------------- */
.checkbox-group {
  border-radius: 9px;
  padding: 8px 4px;
  transition: background var(--motion-fast) ease;
}
.checkbox-group:hover { background: rgba(99, 91, 255, 0.05); }
.checkbox-group label { color: #33415c; font-weight: 500; }

/* --- Delete-employee modal: high-stakes, softened -------------------------- */
.delete-modal-icon-circle {
  color: #c2183b;
  background: linear-gradient(135deg, #ffe9ec, #ffd6dd);
  border: 1px solid rgba(223, 27, 65, 0.20);
  box-shadow: 0 10px 24px -10px rgba(223, 27, 65, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.delete-modal-title { color: #0a0e23; letter-spacing: -0.02em; }
.delete-modal-subtitle { color: #47536b; }
.delete-warning-box {
  background: linear-gradient(180deg, #fff7f7, #fff1f2);
  border: 1px solid #f8d7dc;
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.delete-target-name {
  color: #0a0e23;
  background: linear-gradient(135deg, #f6f8fc, #eef1f8);
  border: 1px dashed #c7d0e0;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.delete-modal-close {
  width: 40px;
  height: 40px;
  transition:
    background var(--motion-fast) ease,
    color var(--motion-fast) ease,
    transform var(--motion-fast) var(--spring);
}
.delete-modal-close:hover { background: #f1f4fa; color: #0a0e23; }
.delete-modal-close:active { transform: scale(0.92); }

/* ===== PAGE: profile ===== */

/* ---------------------------------------------------------------------------
   Identity card (left column) — premium aurora identity band.
   The band is painted purely as layered card backgrounds: a soft indigo wash
   over the top ~96px with a hairline delimiter, so the XL avatar overlaps the
   band edge like a cover photo. No layout properties touched.
--------------------------------------------------------------------------- */
.profile-layout > .card {
  background:
    linear-gradient(180deg, transparent 95px, rgba(211, 218, 230, 0.9) 95px, rgba(211, 218, 230, 0.9) 96px, transparent 96px),
    radial-gradient(150% 130px at 50% -30px, rgba(120, 110, 255, 0.18), transparent 70%),
    radial-gradient(100% 110px at -10% 60px, rgba(179, 68, 127, 0.08), transparent 70%),
    radial-gradient(100% 110px at 110% 40px, rgba(5, 112, 222, 0.09), transparent 70%),
    linear-gradient(180deg, rgba(99, 91, 255, 0.05) 0, rgba(99, 91, 255, 0.02) 96px, rgba(255, 255, 255, 0) 96px),
    #ffffff;
  border-color: #d9e0ee;
  box-shadow: var(--shadow-md);
}

/* Avatar — white ring + indigo halo so it lifts off the identity band */
.profile-avatar-wrap .avatar {
  box-shadow:
    0 0 0 3px #ffffff,
    0 0 0 4.5px rgba(99, 91, 255, 0.30),
    0 14px 30px -10px rgba(13, 18, 48, 0.28);
}

/* Name + designation typography */
.profile-layout > .card h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #101433;
}
.profile-layout .card .text-muted {
  color: #64748b;
  font-weight: 500;
}

/* Status + role pills — glassier, crisper */
.profile-layout .badge {
  border: 1px solid rgba(13, 18, 48, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(13, 18, 48, 0.05);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------------
   Tab strip — liquid-glass segmented control (scoped; base underline removed)
--------------------------------------------------------------------------- */
.profile-layout .tabs {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.62));
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 4px;
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.profile-layout .tab {
  border-bottom: 2px solid transparent;
  border-radius: 10px;
  padding: 11px 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #566070;
  transition:
    background var(--motion-fast) ease,
    color var(--motion-fast) ease,
    box-shadow var(--motion-normal) ease;
}
.profile-layout .tab:hover {
  color: #1a2033;
  background: rgba(13, 18, 48, 0.045);
}
.profile-layout .tab.active {
  color: #4b44d6;
  border-bottom-color: transparent;
  background: linear-gradient(135deg, rgba(120, 110, 255, 0.16), rgba(99, 91, 255, 0.08));
  box-shadow:
    inset 0 0 0 1px rgba(99, 91, 255, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 2px 7px rgba(84, 76, 236, 0.16);
}

/* ---------------------------------------------------------------------------
   Section cards — refined headers, footers and form typography
--------------------------------------------------------------------------- */
.profile-layout .card-header {
  background: linear-gradient(180deg, #fbfcfe, #ffffff);
  border-bottom: 1px solid var(--color-border);
}
.profile-layout .card-header h3 {
  letter-spacing: -0.01em;
  color: #14192e;
}
.profile-layout .card-header h3::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  border-radius: 99px;
  background: linear-gradient(180deg, #a5b4ff, #635bff);
  box-shadow: 0 0 6px rgba(120, 110, 255, 0.45);
  margin-right: 9px;
  vertical-align: -2px;
}
.profile-layout .card-footer {
  background: linear-gradient(180deg, #f9fafd, #f3f5fb);
}

.profile-layout .form-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.015em;
  color: #3f4757;
}
.profile-layout .form-control {
  background: #fcfdff;
}
.profile-layout .form-control:focus {
  background: #ffffff;
}
.profile-layout .form-control:disabled {
  background: #f2f4fa;
  color: #5b6472;
  border-color: var(--color-border);
}
.profile-layout .form-hint {
  color: #64748b;
}

/* ---------------------------------------------------------------------------
   Tables (salary structure, payslips) — quiet premium banding
--------------------------------------------------------------------------- */
.profile-layout .table th {
  background: #f8f9fd;
  border-bottom: 1px solid var(--color-border-strong);
  color: #5a6474;
}
.profile-layout .table td {
  border-color: #eceff7;
}

/* Payslips empty state — tinted glass icon medallion */
.profile-layout .empty-state-icon {
  background: linear-gradient(135deg, rgba(120, 110, 255, 0.14), rgba(99, 91, 255, 0.06));
  color: #635bff;
  border: 1px solid rgba(99, 91, 255, 0.18);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.profile-layout .empty-state h3 {
  letter-spacing: -0.01em;
}

/* ===== PAGE: attendance ===== */

/* ---------------------------------------------------------------------------
   PUNCH CARD - hero control. Same ink-aurora family as the sidebar so the
   page's single most important action reads as "premium hardware".
--------------------------------------------------------------------------- */
.punch-card {
  background:
    radial-gradient(120% 85% at 88% -25%, var(--aurora-indigo), transparent 58%),
    radial-gradient(90% 60% at -12% 112%, var(--aurora-plum), transparent 60%),
    radial-gradient(70% 48% at 112% 78%, var(--aurora-cyan), transparent 60%),
    linear-gradient(160deg, #191e4c 0%, var(--ink-2) 52%, var(--ink-1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  box-shadow:
    0 24px 48px -16px rgba(13, 18, 48, 0.45),
    0 10px 24px -10px rgba(84, 76, 236, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
/* soften the legacy decorative circle into a specular sheen */
.punch-card::before {
  background: radial-gradient(circle, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.03) 45%, transparent 70%);
}

.punch-date {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.68);
  opacity: 1;
}
.punch-clock {
  color: #fff;
  background: linear-gradient(180deg, #ffffff 30%, #c7c2ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
/* shift line + secondary text sit on dark ink now */
.punch-card .muted { color: rgba(255, 255, 255, 0.75); }
.punch-card strong { color: #fff; font-weight: 600; }

/* status pill - liquid glass over the aurora */
.punch-pill {
  background: linear-gradient(135deg, rgba(255,255,255,0.17), rgba(255,255,255,0.07));
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.26);
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.punch-pill .dot {
  background: #34e3a8;
  box-shadow: 0 0 10px 2px rgba(52, 227, 168, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.45);
}
.punch-pill .dot-grey { background: rgba(255, 255, 255, 0.45); box-shadow: none; }

/* punch buttons - tactile glass */
.btn-punch {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  letter-spacing: -0.01em;
  box-shadow:
    0 12px 26px -8px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition:
    transform var(--motion-normal) var(--spring),
    box-shadow var(--motion-normal) ease,
    background var(--motion-fast) ease,
    border-color var(--motion-fast) ease;
}
.btn-punch.btn-login {
  background: linear-gradient(180deg, #ffffff, #edefff);
  color: #4f46e5;
}
.btn-punch svg { transition: transform var(--motion-normal) var(--spring); }
.btn-punch:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 34px -8px rgba(0, 0, 0, 0.5),
    0 4px 10px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 #fff;
}
.btn-punch:hover svg { transform: translateX(1px) scale(1.03); }
.btn-punch:active { transform: scale(0.96); }
.btn-punch:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.btn-punch.btn-logout {
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08));
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.btn-punch.btn-logout:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.26), rgba(255,255,255,0.12));
  border-color: rgba(255, 255, 255, 0.45);
}

.punch-done {
  background: linear-gradient(135deg, rgba(52, 227, 168, 0.22), rgba(52, 227, 168, 0.10));
  border: 1px solid rgba(52, 227, 168, 0.40);
  border-radius: 12px;
  color: #c9f9e5;
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

/* ---------------------------------------------------------------------------
   THIS MONTH - mini stats as quiet glass tiles
--------------------------------------------------------------------------- */
.mini-stat {
  background: linear-gradient(135deg, rgba(255,255,255,0.86), rgba(244,246,251,0.72));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    transform var(--motion-normal) var(--spring),
    box-shadow var(--motion-normal) ease,
    border-color var(--motion-fast) ease;
}
.mini-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}
.mini-stat-value { letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mini-stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: #64748b;
}

/* ---------------------------------------------------------------------------
   CALENDAR - crisp day chips with tinted status rings
--------------------------------------------------------------------------- */
.cal-head { font-size: 10.5px; letter-spacing: 0.1em; color: #64748b; }
.cal-day {
  background: linear-gradient(160deg, #f8fafd, #eef1f8);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition:
    transform var(--motion-fast) var(--spring),
    box-shadow var(--motion-fast) ease,
    border-color var(--motion-fast) ease;
}
.cal-day:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  border-color: var(--color-border-strong);
}
.cal-empty { background: transparent; border-color: transparent; box-shadow: none; }
.cal-empty:hover { transform: none; box-shadow: none; border-color: transparent; }
.cal-num { font-size: 12.5px; }
.cal-label { font-size: 9px; letter-spacing: 0.06em; opacity: 0.95; }

.cal-day.cal-present { background: linear-gradient(160deg, #e9fbf2, #dcf6ea); color: #047857; border-color: rgba(16, 185, 129, 0.30); }
.cal-day.cal-leave   { background: linear-gradient(160deg, #fff7e0, #fdefc8); color: #8a5a00; border-color: rgba(217, 164, 6, 0.32); }
.cal-day.cal-lop,
.cal-day.cal-absent  { background: linear-gradient(160deg, #ffecec, #fddede); color: #b91c1c; border-color: rgba(220, 38, 38, 0.28); }
.cal-day.cal-holiday { background: linear-gradient(160deg, #e8f2ff, #dcebff); color: #0a4b8c; border-color: rgba(37, 99, 235, 0.26); }
.cal-day.cal-weekoff { background: linear-gradient(160deg, #f1f2f7, #e9ebf2); color: #64748b; border-color: rgba(100, 116, 139, 0.20); }
/* half-day statuses (built dynamically as cal-half_day / cal-half_day_lop) */
.cal-day.cal-half_day     { background: linear-gradient(135deg, #e9fbf2 48%, #fff3d6 52%); color: #8a5a00; border-color: rgba(217, 164, 6, 0.32); }
.cal-day.cal-half_day_lop { background: linear-gradient(135deg, #e9fbf2 48%, #fddede 52%); color: #b91c1c; border-color: rgba(220, 38, 38, 0.28); }

.cal-day.cal-today {
  border-color: rgba(99, 91, 255, 0.55);
  box-shadow:
    inset 0 0 0 2px #635bff,
    0 4px 12px -2px rgba(99, 91, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.cal-legend { font-size: 12px; color: #64748b; }
.cal-legend .leg { border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(13, 18, 48, 0.10); }
.leg-present { background: linear-gradient(160deg, #e9fbf2, #dcf6ea); }
.leg-leave   { background: linear-gradient(160deg, #fff7e0, #fdefc8); }
.leg-lop     { background: linear-gradient(160deg, #ffecec, #fddede); }
.leg-holiday { background: linear-gradient(160deg, #e8f2ff, #dcebff); }
.leg-weekoff { background: linear-gradient(160deg, #f1f2f7, #e9ebf2); }

/* ---------------------------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn-punch:hover, .cal-day:hover, .mini-stat:hover { transform: none; }
}

/* ===== PAGE: reports ===== */
/* Attendance report grid — calm, data-dense, premium. Works entirely through
   cosmetic channels (shadows, borders, type) because day-cell backgrounds and
   sticky positioning are inline. No animation, no !important, no layout. */

/* --- Grid base: tabular numerals, crisper hairlines --------------------- */
.table.report-grid {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* Fix v1 regression: theme-premium's `.table thead th` muted color wins over
   the dark ink header and leaves gray-on-ink text. Restore crisp white and
   give the header a glass top-light. */
.table.report-grid thead th {
  color: rgba(255, 255, 255, 0.92);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Day tiles: soft inner bevel so each pastel status cell reads as a chip,
   plus a faint text lift for legibility on tinted grounds. */
.report-grid tbody td {
  border-bottom: 1px solid rgba(211, 218, 230, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: box-shadow var(--motion-fast) ease;
}

/* Row hover: indigo wash painted with an inset spread shadow — the only way
   to tint cells whose background color is inline. */
.report-grid tr:hover td {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 0 0 999px rgba(99, 91, 255, 0.05);
}

/* Editable cells: clear premium affordance for management. */
.report-grid .att-cell-editable {
  transition: box-shadow var(--motion-fast) ease, outline-color var(--motion-fast) ease;
}
.report-grid .att-cell-editable:hover {
  outline: 2px solid rgba(99, 91, 255, 0.95);
  outline-offset: -2px;
  box-shadow:
    inset 0 0 0 999px rgba(99, 91, 255, 0.10),
    0 3px 10px -2px rgba(99, 91, 255, 0.40);
}
.report-grid .att-cell-editable:active {
  outline: 2px solid rgba(84, 76, 236, 1);
  outline-offset: -2px;
  box-shadow: inset 0 0 0 999px rgba(99, 91, 255, 0.16);
}

/* Sticky employee column: floats over the horizontally-scrolling grid with a
   soft right-edge shadow so the elevation reads. Placed after the hover rules
   so the edge shadow never flickers away on row hover. */
.report-grid tbody td[style*="position:sticky"] {
  border-right: 1px solid var(--color-border-strong);
  box-shadow: 6px 0 14px -8px rgba(13, 18, 48, 0.14);
}
.report-grid thead th[style*="position:sticky"] {
  border-right: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    6px 0 14px -8px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Employee identity cell */
.report-grid .user-cell-name {
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.report-grid .user-cell-meta {
  font-size: 11px;
  letter-spacing: 0.02em;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}
.report-grid .avatar {
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(13, 18, 48, 0.18);
}

/* --- Legend: pastel pills with a liquid-glass top light ----------------- */
.leg-chip {
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.015em;
  color: #1a1f36;
  border: 1px solid rgba(13, 18, 48, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(13, 18, 48, 0.06);
  transition: transform var(--motion-fast) var(--spring), box-shadow var(--motion-fast) ease;
}
.leg-chip:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 3px 8px rgba(13, 18, 48, 0.10);
}

/* --- Edit Attendance modal (scoped to this page's dialog) --------------- */
#edit-att-modal .modal-title {
  letter-spacing: -0.015em;
  font-weight: 700;
}
#edit-att-modal .form-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #425466;
}
#edit-att-modal .modal-footer {
  border-top: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(248, 249, 253, 0.6), #f6f8fc);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
#edit-att-modal .modal-close {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  transition: background var(--motion-fast) ease, transform var(--motion-fast) var(--spring), color var(--motion-fast) ease;
}
#edit-att-modal .modal-close:hover {
  background: rgba(13, 18, 48, 0.06);
  transform: scale(1.03);
}

/* Leave-balance impact preview: quiet indigo-tinted note card */
#eatt-preview {
  border: 1px solid rgba(99, 91, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70);
  color: #425466;
  line-height: 1.5;
}
#eatt-context {
  letter-spacing: -0.01em;
  font-size: 13.5px;
}

/* ===== PAGE: leave-holidays ===== */

/* ---------------------------------------------------------------------------
   Balance stat cards — glass wash, indigo breath, real numeric hierarchy
   (.stat-label / .stat-value ship unstyled in base CSS; this defines them)
--------------------------------------------------------------------------- */
.stats-grid .stat-card {
  background:
    linear-gradient(180deg, rgba(99, 91, 255, 0.055), transparent 46%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78));
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.stat-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.stat-value {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #0a0e23;
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
}
.stat-unit {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  color: #64748b;
}
.stat-hint {
  font-size: 12px;
  color: #64748b;
  letter-spacing: 0.01em;
  padding-top: 2px;
}

/* ---------------------------------------------------------------------------
   Approval queue + approved-leaves rows — crisper identity lines
--------------------------------------------------------------------------- */
.card-title { letter-spacing: -0.01em; }
.cell-strong-sm { letter-spacing: -0.005em; font-variant-numeric: tabular-nums; }

#approved-leaves .card-header {
  background: linear-gradient(180deg, rgba(99, 91, 255, 0.045), transparent);
}
#approved-leaves .card-title .muted-small { letter-spacing: 0.01em; }
#alm-select {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.76));
  border-color: var(--color-border-strong);
  border-radius: 10px;
  font-weight: 600;
  color: #303a52;
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
#alm-select:hover { border-color: #b9c3d6; box-shadow: var(--shadow-sm), inset 0 1px 0 #fff; }

/* ---------------------------------------------------------------------------
   Segmented controls (Full/Half day, halves, convert-to) — recessed liquid
   track with a lifted glass thumb; targets grow to comfortable size
--------------------------------------------------------------------------- */
.seg-control {
  background: linear-gradient(180deg, #eceff6, #f2f4fa);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: inset 0 1px 3px rgba(13, 18, 48, 0.07);
}
.seg-btn {
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 10px 16px;
  font-weight: 600;
  color: #525f7f;
  letter-spacing: -0.005em;
  transition:
    color var(--motion-fast) ease,
    background var(--motion-normal) ease,
    border-color var(--motion-normal) ease,
    box-shadow var(--motion-normal) ease,
    transform var(--motion-normal) var(--spring);
}
.seg-btn:hover { color: #1a1f36; background: rgba(255, 255, 255, 0.55); }
.seg-btn:active { transform: scale(0.97); }
.seg-btn.active {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.8));
  border-color: rgba(99, 91, 255, 0.35);
  color: #4640d8;
  box-shadow: 0 2px 8px rgba(84, 76, 236, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* ---------------------------------------------------------------------------
   Apply / Decide / Holiday modals — scoped refinement of themed globals
--------------------------------------------------------------------------- */
#apply-leave .modal-header,
#decide-modal .modal-header,
#holiday-modal .modal-header {
  background: linear-gradient(180deg, rgba(99, 91, 255, 0.06), transparent);
  border-bottom: 1px solid var(--color-border);
}
#apply-leave .modal-footer,
#decide-modal .modal-footer,
#holiday-modal .modal-footer {
  background: linear-gradient(180deg, rgba(246, 247, 252, 0.55), #f5f6fb);
  border-top: 1px solid var(--color-border);
}
#apply-leave .form-label,
#decide-modal .form-label,
#holiday-modal .form-label { font-weight: 600; color: #303a52; letter-spacing: 0.01em; }

#decide-emp-info {
  border: 1px solid var(--color-border);
  border-left: 3px solid #635bff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  color: #425466;
  font-size: 12.5px;
  line-height: 1.55;
}
#al-summary,
#split-validation {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  font-size: 13px;
  line-height: 1.55;
}
#apply-leave .checkbox-row {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 4px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(246, 247, 252, 0.9));
  transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
#apply-leave .checkbox-row:hover {
  border-color: rgba(99, 91, 255, 0.4);
  background: #f7f6ff;
  box-shadow: var(--shadow-xs);
}
#al-lop { accent-color: #635bff; }

/* ---------------------------------------------------------------------------
   Holiday date tiles — the SEP/14 squares become mini calendar leaves:
   indigo-tinted glass, tabular day numeral, small-caps month in brand ink
--------------------------------------------------------------------------- */
.holiday-date-cell {
  padding: 8px 12px;
  background:
    linear-gradient(180deg, rgba(99, 91, 255, 0.12), rgba(99, 91, 255, 0.02) 48%),
    linear-gradient(180deg, #ffffff, #f8f9fe);
  border: 1px solid rgba(99, 91, 255, 0.22);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 6px rgba(13, 18, 48, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition:
    transform var(--motion-normal) var(--spring),
    border-color var(--motion-normal) ease,
    box-shadow var(--motion-normal) ease;
}
.holiday-date-cell:hover {
  transform: translateY(-1px) scale(1.02);
  border-color: rgba(99, 91, 255, 0.42);
  box-shadow: 0 6px 14px -4px rgba(84, 76, 236, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.holiday-date-day {
  font-size: 19px;
  color: #1a1f4f;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.holiday-date-mon {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #5049d8;
}
.row-muted .holiday-date-cell {
  background: linear-gradient(180deg, #fbfcfe, #f4f6fa);
  border-color: var(--color-border);
  box-shadow: none;
}
.row-muted .holiday-date-mon { color: #64748b; }

/* ===== PAGE: chat ===== */
/* v2 polish pass — thread header, in-thread search, reply bar, popovers,
   action menu, group info drawer, avatar zoom. All rules scoped under
   body.page-chat (set by the page itself); no v1 rules re-declared. */

/* --- Thread header ------------------------------------------------------- */
.page-chat .chat-thread-header {
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, var(--shadow-xs);
}
.page-chat .chat-thread-header-clickable:hover {
  background: linear-gradient(180deg, #ffffff, rgba(99, 91, 255, 0.045));
}
.page-chat .chat-thread-name {
  color: #0a0e23;
  letter-spacing: -0.012em;
}
.page-chat .chat-thread-meta { color: #64748b; }
.page-chat .chat-thread-header .chat-avatar {
  box-shadow: 0 0 0 2px #ffffff, 0 3px 10px rgba(13, 18, 48, 0.14);
}
.page-chat .chat-thread-header-chevron {
  color: #8a94ab;
  transition: transform var(--motion-normal) var(--spring), color var(--motion-fast) ease;
}
.page-chat .chat-thread-header-clickable:hover .chat-thread-header-chevron { color: #635bff; }
.page-chat .chat-header-search-btn:hover {
  background: linear-gradient(135deg, rgba(99, 91, 255, 0.10), rgba(5, 112, 222, 0.06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 6px rgba(13, 18, 48, 0.08);
}

/* --- Sidebar search + section labels ------------------------------------ */
.page-chat .chat-search-box {
  background: linear-gradient(135deg, rgba(238, 241, 248, 0.9), rgba(244, 246, 251, 0.75));
  border: 1px solid transparent;
  box-shadow: inset 0 1px 2px rgba(13, 18, 48, 0.04);
  transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.page-chat .chat-search-box:focus-within {
  background: #ffffff;
  border-color: #8f88ff;
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.14), var(--shadow-xs);
}
.page-chat .chat-search-icon { color: #64748b; }
.page-chat .chat-section-label { color: #64748b; letter-spacing: 0.1em; }
.page-chat .chat-empty-illustration { color: #c9d0ea; }
.page-chat .chat-empty h3 { letter-spacing: -0.012em; }

/* --- In-thread message search bar ---------------------------------------- */
.page-chat .chat-msg-search-bar {
  background: linear-gradient(180deg, rgba(247, 249, 253, 0.88), rgba(255, 255, 255, 0.82));
  border-bottom: 1px solid var(--color-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.page-chat .chat-msg-search-input-wrap {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78));
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.page-chat .chat-msg-search-input-wrap:focus-within {
  border-color: #8f88ff;
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.14), var(--shadow-xs);
}
.page-chat .chat-msg-search-count { color: #64748b; }
.page-chat .chat-msg-search-nav,
.page-chat .chat-msg-search-close {
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease, transform var(--motion-fast) var(--spring);
}
.page-chat .chat-msg-search-nav:hover:not(:disabled) {
  background: rgba(99, 91, 255, 0.10);
  color: #544cec;
  transform: translateY(-1px);
}
.page-chat .chat-msg-search-nav:active { transform: scale(0.95); }
.page-chat .chat-msg-search-close:hover { background: rgba(223, 27, 65, 0.09); color: #c0264a; }
.page-chat .chat-msg-hl { border-radius: 4px; }

/* --- Reply preview bar ---------------------------------------------------- */
.page-chat .chat-reply-bar {
  background: linear-gradient(135deg, rgba(240, 238, 255, 0.8), rgba(230, 233, 255, 0.55));
  border-top: 1px solid rgba(99, 91, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.page-chat .chat-reply-bar-bar {
  background: linear-gradient(180deg, #a5b4ff, #635bff);
  box-shadow: 0 0 8px rgba(120, 110, 255, 0.5);
}
.page-chat .chat-reply-bar-label { color: #544cec; letter-spacing: 0.01em; }
.page-chat .chat-reply-bar-text { color: #525b70; }
.page-chat .chat-reply-bar-close {
  color: #64748b;
  border-radius: 8px;
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease, transform var(--motion-fast) var(--spring);
}
.page-chat .chat-reply-bar-close:hover { background: rgba(99, 91, 255, 0.12); color: #544cec; }
.page-chat .chat-reply-bar-close:active { transform: scale(0.95); }

/* --- Emoji picker (liquid glass pill) ------------------------------------- */
.page-chat .emoji-picker {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.72));
  border: 1px solid var(--color-border-strong);
  border-radius: 99px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  padding: 7px 9px;
}
.page-chat .emoji-pick:hover { background: rgba(99, 91, 255, 0.12); }
.page-chat .emoji-pick:active { transform: scale(0.95); }

/* --- Readers + reactions popovers ----------------------------------------- */
.page-chat .readers-popover {
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  border: 1px solid var(--color-border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.65) inset;
}
.page-chat .readers-popover-header {
  background: linear-gradient(180deg, #f7f8fd, #eef1fa);
  border-bottom: 1px solid var(--color-border);
  color: #0a0e23;
  letter-spacing: -0.005em;
}
.page-chat .readers-popover-close {
  color: #64748b;
  border-radius: 7px;
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease;
}
.page-chat .readers-popover-close:hover { background: rgba(99, 91, 255, 0.12); color: #544cec; }
.page-chat .readers-popover-row {
  border-bottom: 1px solid #f0f2f8;
  transition: background var(--motion-fast) ease;
}
.page-chat .readers-popover-row:hover { background: rgba(99, 91, 255, 0.04); }
.page-chat .readers-popover-time { color: #64748b; }
.page-chat .readers-popover-empty { color: #64748b; }
.page-chat .reactions-popover-remove {
  border-radius: 99px;
  border-color: var(--color-border-strong);
  color: #64748b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* --- Floating message action menu ----------------------------------------- */
.page-chat .msg-action-menu {
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.65) inset;
}
.page-chat .msg-action {
  border-radius: 8px;
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease;
}
.page-chat .msg-action:hover { background: rgba(99, 91, 255, 0.08); color: #1a1f36; }
.page-chat .msg-action:hover svg { color: #635bff; }
.page-chat .msg-action:active { transform: scale(0.98); }
.page-chat .msg-action[data-action="delete_for_all"]:hover { background: rgba(223, 27, 65, 0.09); color: #c0264a; }
.page-chat .msg-action[data-action="delete_for_all"]:hover svg { color: #c0264a; }

/* --- Group info drawer ----------------------------------------------------- */
.page-chat .chat-info-panel {
  background: linear-gradient(180deg, #fbfcfe, #f7f9fd);
  border-left: 1px solid var(--color-border);
}
.page-chat .chat-info-header {
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0));
}
.page-chat .chat-info-header h3 { color: #0a0e23; letter-spacing: -0.015em; }
.page-chat .chat-info-close {
  color: #64748b;
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease, transform var(--motion-fast) var(--spring);
}
.page-chat .chat-info-close:hover { background: rgba(99, 91, 255, 0.10); color: #544cec; }
.page-chat .chat-info-close:active { transform: scale(0.95); }
.page-chat .chat-info-section { border-bottom: 1px solid var(--color-border); }
.page-chat .chat-info-label { color: #64748b; letter-spacing: 0.1em; }
.page-chat .chat-info-name-display { color: #0a0e23; letter-spacing: -0.01em; }
.page-chat .chat-info-edit-link,
.page-chat .chat-info-add-btn {
  border-radius: 8px;
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.page-chat .chat-info-edit-link:hover,
.page-chat .chat-info-add-btn:hover {
  background: linear-gradient(135deg, rgba(99, 91, 255, 0.12), rgba(5, 112, 222, 0.07));
  color: #544cec;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.page-chat .chat-info-member {
  border-radius: 10px;
  transition: background var(--motion-fast) ease;
}
.page-chat .chat-info-member:hover { background: rgba(99, 91, 255, 0.05); }
.page-chat .chat-info-member-meta { color: #64748b; }
.page-chat .chat-info-tag {
  border-radius: 5px;
  background: #eef0f6;
  color: #5a647c;
  letter-spacing: 0.05em;
}
.page-chat .chat-info-tag-creator {
  background: linear-gradient(135deg, #fff3d6, #ffecc0);
  color: #7a5b00;
}
.page-chat .chat-info-remove-btn { transition: background var(--motion-fast) ease, transform var(--motion-fast) var(--spring); }
.page-chat .chat-info-remove-btn:hover { background: rgba(223, 27, 65, 0.10); }
.page-chat .chat-info-remove-btn:active { transform: scale(0.95); }

/* --- User pick lists (create group / add member modals) -------------------- */
.page-chat .user-pick-list { border-radius: var(--radius-md); border-color: var(--color-border-strong); }
.page-chat .user-pick-item:hover { background: rgba(99, 91, 255, 0.05); }
.page-chat .user-pick-item input[type="checkbox"] { accent-color: #635bff; }

/* --- Avatar zoom overlay ---------------------------------------------------- */
.page-chat .avatar-zoom { background: rgba(10, 14, 35, 0.88); }
.page-chat .avatar-zoom img {
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.page-chat .avatar-zoom-close {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 14px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  transition: background var(--motion-fast) ease, transform var(--motion-fast) var(--spring);
}
.page-chat .avatar-zoom-close:hover { background: rgba(255, 255, 255, 0.26); }
.page-chat .avatar-zoom-close:active { transform: scale(0.95); }

/* ===== PAGE: event-logging ===== */

/* ---- Pre-Sales leaderboard card: calm aurora wash on white ---- */
.ps-leaderboard {
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(99, 91, 255, 0.06), transparent 65%),
    radial-gradient(40% 70% at 0% 100%, rgba(5, 112, 222, 0.04), transparent 60%),
    #ffffff;
  border-color: var(--color-border);
}
.ps-head-text h3 { letter-spacing: -0.015em; font-weight: 700; color: #0f1533; }
.ps-subtle { color: #64748b; }
.ps-empty { color: #64748b; }

/* ---- Leaderboard tiles: liquid glass ---- */
.ps-tile {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.62));
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    transform var(--motion-normal) var(--spring),
    box-shadow var(--motion-normal) ease,
    border-color var(--motion-fast) ease,
    background var(--motion-fast) ease;
}
.ps-tile:hover {
  background: #ffffff;
  border-color: #b9c3d6;
  box-shadow: var(--shadow-sm), inset 0 1px 0 #ffffff;
  transform: translateY(-1px);
}
.ps-tile-bar {
  background: linear-gradient(90deg, rgba(99, 91, 255, 0.13), rgba(99, 91, 255, 0.02));
  border-radius: 0 99px 99px 0;
}
.ps-tile-name { color: #1a1f36; font-weight: 600; letter-spacing: -0.005em; }
.ps-tile-count {
  font-variant-numeric: tabular-nums;
  color: #4f46e5;
  background: rgba(99, 91, 255, 0.09);
  border: 1px solid rgba(99, 91, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  font-size: 13px;
}

/* Top performer: subtly celebrated with an indigo halo + star marker */
.ps-tile-top {
  background: linear-gradient(135deg, rgba(124, 116, 255, 0.14), rgba(255, 255, 255, 0.88) 58%);
  border-color: rgba(99, 91, 255, 0.38);
  box-shadow:
    0 8px 20px -8px rgba(84, 76, 236, 0.30),
    var(--shadow-xs),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.ps-tile-top:hover {
  border-color: rgba(99, 91, 255, 0.55);
  box-shadow:
    0 12px 26px -10px rgba(84, 76, 236, 0.38),
    var(--shadow-sm),
    inset 0 1px 0 #ffffff;
  transform: translateY(-1px);
}
.ps-tile-top .ps-tile-bar {
  background: linear-gradient(90deg, rgba(99, 91, 255, 0.20), rgba(120, 110, 255, 0.04));
}
.ps-tile-top .ps-tile-name { color: #1e1b4b; font-weight: 700; }
.ps-tile-top .ps-tile-avatar { box-shadow: 0 0 0 2px rgba(99, 91, 255, 0.35), 0 2px 6px rgba(84, 76, 236, 0.25); }
.ps-tile-top .ps-tile-count {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 3px 10px rgba(84, 76, 236, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.ps-tile-top .ps-tile-count::before { content: '\2605'; font-size: 0.8em; margin-right: 4px; opacity: 0.9; }

/* ---- Duplicate-detection summary + row badges ---- */
.dup-summary {
  background: linear-gradient(135deg, rgba(255, 247, 237, 0.96), rgba(255, 237, 213, 0.72));
  border: 1px solid rgba(251, 146, 60, 0.35);
  border-radius: 99px;
  padding: 7px 14px;
  color: #9a3412;
  font-weight: 500;
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.dup-summary strong { font-variant-numeric: tabular-nums; }
.dup-summary-sub { color: #a1580c; font-size: 11.5px; }
.dup-summary-clean {
  background: linear-gradient(135deg, rgba(240, 253, 244, 0.96), rgba(220, 252, 231, 0.72));
  border-color: rgba(34, 197, 94, 0.32);
  color: #166534;
}
.dup-badge {
  background: linear-gradient(135deg, rgba(13, 18, 48, 0.08), rgba(13, 18, 48, 0.04));
  border: 1px solid rgba(13, 18, 48, 0.16);
  color: #1f2937;
  border-radius: 6px;
  padding: 3px 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.event-row-bad .badge-bad {
  background: linear-gradient(135deg, rgba(254, 226, 226, 0.95), rgba(254, 202, 202, 0.7));
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: #991b1b;
  border-radius: 99px;
  letter-spacing: 0.05em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ---- Industry chip + notes preview in the events table ---- */
.event-industry-chip {
  background: linear-gradient(135deg, rgba(238, 242, 255, 0.95), rgba(224, 231, 255, 0.6));
  border: 1px solid rgba(99, 91, 255, 0.22);
  color: #4338ca;
  border-radius: 99px;
  padding: 3px 9px;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.event-notes-preview {
  background: linear-gradient(90deg, #f5f6fb, #fbfcfe);
  border-left: 2px solid rgba(99, 91, 255, 0.35);
  border-radius: 0 8px 8px 0;
  padding: 5px 10px;
  color: #5b6472;
}

/* ---- Export dropdown panel: floating glass sheet ---- */
.export-panel {
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  padding: 16px;
}
.export-section-label { color: #64748b; letter-spacing: 0.08em; font-size: 10.5px; }
.export-custom-row label { color: #5b6472; font-weight: 500; }
.export-custom-row input {
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  background: #ffffff;
  min-height: 40px;
  padding: 8px 10px;
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.export-custom-row input:focus {
  outline: none;
  border-color: #8f88ff;
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.16);
}
.export-format-row .btn-pill {
  min-height: 40px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(246, 247, 252, 0.72));
  border: 1px solid var(--color-border-strong);
  color: #1a1f36;
  letter-spacing: -0.01em;
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    transform var(--motion-normal) var(--spring),
    box-shadow var(--motion-normal) ease,
    background var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    color var(--motion-fast) ease;
}
.export-format-row .btn-pill:hover {
  background: linear-gradient(135deg, #ffffff, rgba(238, 242, 255, 0.85));
  border-color: rgba(99, 91, 255, 0.45);
  color: #4f46e5;
  box-shadow: var(--shadow-sm), inset 0 1px 0 #ffffff;
  transform: translateY(-1px);
}
.export-format-row .btn-pill:active { transform: scale(0.97); }
.export-format-row .btn-pill:focus-visible { outline: 2px solid #635bff; outline-offset: 2px; }
.export-dedupe {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: rgba(248, 249, 252, 0.65);
  padding: 11px 12px;
  transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.export-dedupe:hover { background: rgba(238, 242, 255, 0.55); border-color: rgba(99, 91, 255, 0.30); }
.export-dedupe small { color: #64748b; }
.export-hint { color: #64748b; }
.export-toggle .export-caret { opacity: 0.6; }

/* ---- Log/Edit Event modal fields: crisp Inter hierarchy ---- */
.form-label { font-weight: 600; color: #232a45; letter-spacing: 0.005em; }
.form-label .required { color: #df1b41; }
.form-group .muted { color: #64748b; font-size: 12px; }
.country-error-panel {
  background: linear-gradient(135deg, rgba(255, 241, 240, 0.98), rgba(255, 228, 225, 0.8));
  border: 1px solid rgba(217, 45, 32, 0.28);
  border-radius: 10px;
  color: #a8071a;
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ===== PAGE: event-directory ===== */

/* ---------------------------------------------------------------------------
   Filter side panel (the <aside class="card"> on the left)
   Quiet glass surface, kicker-style section titles, crisp micro-labels.
--------------------------------------------------------------------------- */
aside.card {
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.97), rgba(247, 248, 253, 0.94));
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
aside.card .card-header {
  background: linear-gradient(180deg, rgba(99, 91, 255, 0.05), rgba(99, 91, 255, 0));
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
aside.card .card-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: #64748b;
}
aside.card .form-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}
aside.card .form-control {
  background: linear-gradient(180deg, #ffffff, #fafbfe);
  border-color: var(--color-border-strong);
  box-shadow: inset 0 1px 2px rgba(13, 18, 48, 0.04);
  font-size: 13px;
}
aside.card .form-control:hover { border-color: #b9c3d6; }
aside.card .form-control::placeholder { color: #94a3b8; }
aside.card .btn {
  min-height: 40px;
  border-radius: 10px;
  font-size: 13px;
}

/* ---------------------------------------------------------------------------
   Type badges — Conference vs Expo in clearly distinct hues
   Conference: azure glass · Expo: teal glass (badge-secondary had no base style)
--------------------------------------------------------------------------- */
.badge.badge-info {
  background: linear-gradient(135deg, #e9f3ff, #dcebff);
  color: #0b5cca;
  border: 1px solid rgba(5, 112, 222, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  font-weight: 600;
  letter-spacing: 0.015em;
}
.badge.badge-secondary {
  background: linear-gradient(135deg, #e5f7f1, #d9f2ea);
  color: #0c7a61;
  border: 1px solid rgba(12, 148, 118, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  font-weight: 600;
  letter-spacing: 0.015em;
}

/* ---------------------------------------------------------------------------
   Listing readability — industry / venue / location secondary text
   (base .muted-small is #8898aa, below AA for meaningful table text)
--------------------------------------------------------------------------- */
.table .muted-small {
  color: #5b6b84;
  line-height: 1.45;
}
.table .cell-strong { letter-spacing: -0.005em; }

/* ---------------------------------------------------------------------------
   Import / Sync modal internals (scoped to this page's two dialogs)
--------------------------------------------------------------------------- */
#import-events-modal .modal-header,
#sync-phq-modal .modal-header {
  background: linear-gradient(180deg, rgba(99, 91, 255, 0.05), rgba(99, 91, 255, 0));
  border-bottom: 1px solid var(--color-border);
}
#import-events-modal .modal-header h3,
#sync-phq-modal .modal-header h3 { letter-spacing: -0.015em; }

#import-events-modal .modal-close,
#sync-phq-modal .modal-close {
  border-radius: 9px;
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease, transform var(--motion-fast) var(--spring);
}
#import-events-modal .modal-close:hover,
#sync-phq-modal .modal-close:hover { background: rgba(13, 18, 48, 0.06); color: #0a0e23; }
#import-events-modal .modal-close:active,
#sync-phq-modal .modal-close:active { transform: scale(0.95); }

#import-events-modal .modal-footer,
#sync-phq-modal .modal-footer {
  border-top: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(246, 247, 252, 0.55), rgba(246, 247, 252, 0.9));
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

#import-events-modal .form-label,
#sync-phq-modal .form-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}

/* Help copy: legible slate instead of faded grey */
#import-events-modal .muted,
#sync-phq-modal .muted { color: #64748b; font-size: 12.5px; line-height: 1.55; }
#import-events-modal .muted-small,
#sync-phq-modal .muted-small { color: #64748b; line-height: 1.5; }
#import-events-modal .muted strong,
#sync-phq-modal .muted strong { color: #425466; }
#import-events-modal .muted-small strong,
#sync-phq-modal .muted-small strong { color: #425466; }

/* Native controls pick up the indigo primary */
#import-events-modal input[type="checkbox"],
#sync-phq-modal input[type="checkbox"] { accent-color: #635bff; }

/* File picker button as a small glass control */
#import-events-modal input[type="file"]::file-selector-button {
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(244, 246, 251, 0.92));
  color: #425466;
  font-weight: 600;
  font-size: 12.5px;
  padding: 4px 10px;
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease;
}
#import-events-modal input[type="file"]::file-selector-button:hover {
  background: #ffffff;
  border-color: #b9c3d6;
}

/* ---------------------------------------------------------------------------
   Sync progress — recessed track, lit indigo fill, tabular counters
   (fill color + width are inline; sheen/glow layered via box-shadow)
--------------------------------------------------------------------------- */
#phq-progress > div:first-child {
  box-shadow: inset 0 1px 2px rgba(13, 18, 48, 0.09), inset 0 0 0 1px rgba(13, 18, 48, 0.03);
}
#phq-progress-bar {
  border-radius: 99px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 0 10px rgba(99, 91, 255, 0.55);
}
#phq-progress-text {
  color: #425466;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* ===== PAGE: documents-letters ===== */

/* ---------------------------------------------------------------------------
   DOCUMENTS - table rows with file-type accent chips
   The inline style on .doc-file-icon supplies the per-type background tint
   and currentColor; the ring, top-light and hover glow below borrow that
   same accent via color-mix so PDF stays red, XLS green, etc.
--------------------------------------------------------------------------- */
.doc-cell .doc-file-icon {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(13, 18, 48, 0.06);
  transition:
    transform var(--motion-normal) var(--spring),
    box-shadow var(--motion-normal) ease;
}
.doc-cell:hover .doc-file-icon {
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 7px 16px -6px color-mix(in srgb, currentColor 55%, transparent);
}
.doc-cell-info .cell-strong {
  letter-spacing: -0.011em;
  font-size: 13.5px;
  color: var(--color-text);
}
.doc-cell-info .muted-small {
  font-size: 11.5px;
  letter-spacing: 0.01em;
  color: #64748b;
}

/* Empty state (documents table) - soft indigo glass medallion */
.table-wrapper .empty-state-icon {
  background: linear-gradient(160deg, #eef0ff, #f8f9fe 72%);
  border: 1px solid rgba(99, 91, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 12px 26px -14px rgba(84, 76, 236, 0.35);
  color: #635bff;
}

/* ---------------------------------------------------------------------------
   LETTERS - tab strip (For an Employee / New Joining / Internship)
   The strip is built from .btn elements inside .tabs (only this page nests
   buttons in .tabs), toggled by JS between btn-secondary (active) and
   btn-ghost (idle). Restyled as a liquid-glass segmented control.
--------------------------------------------------------------------------- */
.tabs .btn {
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.tabs .btn-ghost {
  color: #55607a;
  border: 1px solid transparent;
}
.tabs .btn-ghost:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.62));
  border-color: var(--color-border-strong);
  color: var(--color-text);
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.tabs .btn-secondary {
  background: linear-gradient(135deg, rgba(122, 114, 255, 0.17), rgba(99, 91, 255, 0.08));
  border: 1px solid rgba(99, 91, 255, 0.38);
  color: #4038c8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 4px 12px -4px rgba(84, 76, 236, 0.35);
}
.tabs .btn-secondary:hover {
  background: linear-gradient(135deg, rgba(122, 114, 255, 0.22), rgba(99, 91, 255, 0.11));
  border-color: rgba(99, 91, 255, 0.5);
  color: #362fb4;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 6px 16px -5px rgba(84, 76, 236, 0.42);
}

/* ---------------------------------------------------------------------------
   LETTERS - form sections inside the generator cards
--------------------------------------------------------------------------- */
/* Conditional per-document field groups get an indigo filament + faint wash
   so the contextual section reads as one unit when it appears. */
.ef {
  border-left: 2px solid rgba(99, 91, 255, 0.4);
  padding-left: 4px;
  background: linear-gradient(90deg, rgba(99, 91, 255, 0.045), transparent 58%);
  border-radius: 0 10px 10px 0;
}

/* Crisper field labels across the three letter-builder cards */
#tab-emp .form-label,
#tab-new .form-label,
#tab-int .form-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.015em;
  color: #3f4a63;
}

/* ---------------------------------------------------------------------------
   LETTERS - issued letters register (right-hand panel)
   Row hover background comes from inline JS; the ring and lifted shadow
   below add definition on top of it.
--------------------------------------------------------------------------- */
.il-section .il-row {
  transition:
    background var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}
.il-section .il-row:hover {
  box-shadow:
    inset 0 0 0 1px rgba(99, 91, 255, 0.16),
    0 1px 3px rgba(13, 18, 48, 0.05);
}

/* ---------------------------------------------------------------------------
   Reduced motion - neutralise the one decorative transform added above
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .doc-cell:hover .doc-file-icon { transform: none; }
}

/* ===== PAGE: lead-report ===== */
/* Data-dense incentive grid: ink-unified header band, calmed cell tints via
   translucent inset veils (inline backgrounds are untouchable), indigo edit
   affordances, emphasized totals columns, glass plans modal.
   Note: inline style="" colors on th/td cannot be overridden without
   !important, so wide inset box-shadows are used as tint washes instead. */

/* ---- 1 · Header band: unify the five loud column hues into deep ink ---- */
.lead-report-grid thead th {
  background: linear-gradient(180deg, #1b2148 0%, #12173a 100%);
  border-bottom: 1px solid rgba(99, 91, 255, 0.38);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 0 999px rgba(10, 14, 35, 0.45);
}
.lead-report-grid thead th:first-child {
  padding: 8px 8px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 10.5px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset -1px 0 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 999px rgba(10, 14, 35, 0.45);
}

/* ---- 2 · Body cells: hairline grid rhythm + tabular numerals ---- */
.lead-report-grid tbody td {
  border-right: 1px solid rgba(13, 18, 48, 0.05);
  border-bottom: 1px solid rgba(13, 18, 48, 0.06);
  font-variant-numeric: tabular-nums;
  transition: box-shadow var(--motion-fast) ease;
}
/* sticky employee column: floats above the scrolling grid with a soft edge */
.lead-report-grid tbody td:first-child {
  border-right: 1px solid var(--color-border);
  box-shadow:
    inset -1px 0 0 var(--color-border),
    8px 0 14px -10px rgba(13, 18, 48, 0.14);
}
.lead-report-grid .user-cell-name {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: #12173a;
}
.lead-report-grid .user-cell-meta {
  font-size: 11px;
  letter-spacing: 0.02em;
  color: #64748b;
}

/* ---- 3 · Day cells: calm the raw mint/blush inline tints ---- */
.lead-report-grid td.lr-val {
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.38);
  color: #1f2547;
}
.lead-report-grid td.lr-holiday {
  color: #3c64a2;
  letter-spacing: 0.04em;
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.30);
}
.lead-report-grid td.lr-weekoff {
  color: #5b6478;
  letter-spacing: 0.04em;
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.30);
}
/* editable affordance: indigo inner ring replaces the harsh 1px outline */
.lead-report-grid td.lr-editable:hover {
  outline: none;
  box-shadow:
    inset 0 0 0 2px rgba(99, 91, 255, 0.55),
    inset 0 0 0 999px rgba(255, 255, 255, 0.46);
}

/* ---- 4 · Totals & incentive columns: quiet jewel tints, strong figures ---- */
.lead-report-grid td.lr-total-leads {
  color: #2f3aa0;
  font-size: 12.5px;
  letter-spacing: -0.01em;
  box-shadow:
    inset 2px 0 0 rgba(99, 91, 255, 0.35),
    inset 0 0 0 999px rgba(255, 255, 255, 0.30);
}
.lead-report-grid td.lr-plan {
  color: #6d5405;
  font-weight: 600;
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.36);
}
.lead-report-grid td.lr-topper {
  color: #6f2380;
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.30);
}
.lead-report-grid td.lr-topper:hover {
  box-shadow:
    inset 0 0 0 2px rgba(111, 35, 128, 0.40),
    inset 0 0 0 999px rgba(255, 255, 255, 0.44);
}
.lead-report-grid td.lr-total-inc {
  font-size: 12.5px;
  letter-spacing: -0.01em;
  box-shadow:
    inset 2px 0 0 rgba(10, 127, 63, 0.45),
    inset 0 0 0 999px rgba(255, 255, 255, 0.26);
}

/* ---- 5 · Inline cell editor: indigo focus jewel ---- */
.lr-edit-input {
  border: 2px solid #8f88ff;
  border-radius: 6px;
  background: #ffffff;
  color: #12173a;
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.16), var(--shadow-xs);
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.lr-edit-input:focus {
  border-color: #635bff;
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.22), var(--shadow-xs);
}

/* ---- 6 · Incentive-plans modal: match the v1 glass surface language ----
   (page ships its own inline <style>; descendant selectors out-rank it) */
div.lr-modal-backdrop { background: rgba(10, 14, 35, 0.55); }
.lr-modal-backdrop .lr-modal {
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  padding: 24px 26px;
}
.lr-modal .lr-modal-head { padding-bottom: 4px; }
.lr-modal-head h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #12173a;
}
.lr-modal-head .lr-modal-x {
  color: #64748b;
  border-radius: 8px;
  transition: color var(--motion-fast) ease, transform var(--motion-fast) var(--spring);
}
.lr-modal-head .lr-modal-x:hover { color: #12173a; }
.lr-modal-head .lr-modal-x:active { transform: scale(0.95); }

/* plan rows as liquid-glass list cards */
.lr-modal .lr-plan-item {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(247, 249, 253, 0.92));
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-normal) ease,
    transform var(--motion-normal) var(--spring);
}
.lr-modal .lr-plan-item:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm), inset 0 1px 0 #ffffff;
  transform: translateY(-1px);
}
.lr-modal .lr-plan-item strong {
  font-size: 13.5px;
  letter-spacing: -0.01em;
  color: #12173a;
}
.lr-modal .lr-plan-item .meta { color: #64748b; }
.lr-modal .form-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #2c3350;
}

/* ===== PAGE: pay ===== */
/* Pay Runs (pages/pay_runs.php) scoped through the page-unique tab hooks
   [data-tab="run"] / [data-tab="history"], plus screen-only chrome for the
   standalone payslip document (pages/payslip.php). Transitions only. */

/* ---- Payroll tabs: refined underline nav ------------------------------- */
.tab[data-tab="run"],
.tab[data-tab="history"] {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #5b6478;
  padding: 12px 16px;
  border-radius: 10px 10px 0 0;
  transition: color var(--motion-fast) ease,
              background var(--motion-fast) ease,
              border-color var(--motion-fast) ease;
}
.tab[data-tab="run"]:hover,
.tab[data-tab="history"]:hover {
  color: #1e2242;
  background: linear-gradient(180deg, rgba(99, 91, 255, .06), rgba(99, 91, 255, 0));
}
.tab.active[data-tab="run"],
.tab.active[data-tab="history"] {
  color: #544cec;
  border-bottom-color: #635bff;
  background: linear-gradient(180deg, rgba(99, 91, 255, .08), rgba(99, 91, 255, 0));
}

/* ---- Cards: calm layered surfaces -------------------------------------- */
.tab-content[data-tab="run"] .card,
.tab-content[data-tab="history"] .card {
  background: linear-gradient(180deg, #ffffff, #fdfdff);
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .85);
}
.tab-content[data-tab="run"] .card-header,
.tab-content[data-tab="history"] .card-header {
  background: linear-gradient(180deg, #fbfcfe, #f7f8fc);
  border-bottom-color: var(--color-border);
}
.tab-content[data-tab="run"] .card-header h3,
.tab-content[data-tab="history"] .card-header h3 {
  letter-spacing: -0.015em;
  color: #1e2242;
}

/* ---- Run status chips: glass pills with tinted variants ----------------- */
.tab-content[data-tab="run"] .badge,
.tab-content[data-tab="history"] .badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 10px;
  color: #475069;
  border: 1px solid var(--color-border-strong);
  background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(244, 246, 251, .85));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(13, 18, 48, .05);
}
.tab-content[data-tab="run"] .badge-success,
.tab-content[data-tab="history"] .badge-success {
  color: #0b7a55;
  border-color: rgba(11, 122, 85, .28);
  background: linear-gradient(135deg, #e9faf2, #d7f3e6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(11, 122, 85, .08);
}
.tab-content[data-tab="run"] .badge-info,
.tab-content[data-tab="history"] .badge-info {
  color: #4f46e5;
  border-color: rgba(99, 91, 255, .32);
  background: linear-gradient(135deg, #efedff, #e3e6ff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(84, 76, 236, .10);
}

/* ---- Tables: tabular numerals + crisp header / total bands -------------- */
.tab-content[data-tab="run"] .table,
.tab-content[data-tab="history"] .table {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.tab-content[data-tab="run"] thead th,
.tab-content[data-tab="history"] thead th {
  background: linear-gradient(180deg, #f9fafd, #f2f4fa);
  border-bottom: 1px solid var(--color-border-strong);
  color: #64748b;
  font-size: 11px;
  letter-spacing: .08em;
}
.tab-content[data-tab="run"] .table td,
.tab-content[data-tab="history"] .table td {
  color: #2a3049;
}
.tab-content[data-tab="run"] tfoot th,
.tab-content[data-tab="history"] tfoot th {
  border-top: 2px solid rgba(99, 91, 255, .25);
  background: linear-gradient(180deg, rgba(99, 91, 255, .055), rgba(99, 91, 255, .02));
  color: #1e2242;
  font-size: 13px;
  font-variant-numeric: tabular-nums lining-nums;
}
.tab-content[data-tab="run"] td a {
  color: #1e2242;
  transition: color var(--motion-fast) ease;
}
.tab-content[data-tab="run"] td a:hover { color: #544cec; }

/* ---- Draft review inputs (LOP / incentive): quiet numeric fields -------- */
.tab-content[data-tab="run"] .table .form-control {
  min-height: 40px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  border-radius: 8px;
  background: #fbfcfe;
  border-color: var(--color-border-strong);
  transition: border-color var(--motion-fast) ease,
              box-shadow var(--motion-fast) ease,
              background var(--motion-fast) ease;
}
.tab-content[data-tab="run"] .table .form-control:hover {
  border-color: #b3aef7;
  background: #ffffff;
}

/* ---- Period picker: labelled micro-typography --------------------------- */
.tab-content[data-tab="run"] .form-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #64748b;
}
.tab-content[data-tab="run"] .form-control { min-height: 40px; }

/* =========================================================================
   PAYSLIP DOCUMENT (pages/payslip.php) — screen chrome only. The printable
   sheet content is untouched; @media screen guarantees identical print output.
   ========================================================================= */
@media screen {
  .toolbar .btn-back {
    padding: 11px 18px;
    border-radius: 10px;
    color: #334155;
    border: 1px solid var(--color-border-strong, #d3dae6);
    background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(244, 246, 251, .88));
    box-shadow: 0 1px 2px rgba(13, 18, 48, .05), inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: transform var(--motion-normal, 220ms) var(--spring, cubic-bezier(.2, .8, .2, 1)),
                box-shadow var(--motion-normal, 220ms) ease,
                border-color var(--motion-fast, 150ms) ease,
                background var(--motion-fast, 150ms) ease;
  }
  .toolbar .btn-back:hover {
    background: #ffffff;
    border-color: #b9c3d6;
    box-shadow: 0 4px 10px rgba(13, 18, 48, .08), inset 0 1px 0 #ffffff;
    transform: translateY(-1px);
  }
  .toolbar .btn-back:active { transform: scale(.97); }

  .toolbar .btn-print {
    padding: 11px 18px;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(124, 116, 255, .96), rgba(84, 76, 236, .92));
    border: 1px solid rgba(255, 255, 255, .28);
    box-shadow: 0 6px 18px rgba(84, 76, 236, .34),
                inset 0 1px 0 rgba(255, 255, 255, .32),
                inset 0 -1px 0 rgba(0, 0, 0, .08);
    transition: transform var(--motion-normal, 220ms) var(--spring, cubic-bezier(.2, .8, .2, 1)),
                box-shadow var(--motion-normal, 220ms) ease,
                background var(--motion-fast, 150ms) ease;
  }
  .toolbar .btn-print:hover {
    background: linear-gradient(135deg, rgba(134, 126, 255, 1), rgba(94, 86, 246, .96));
    box-shadow: 0 10px 26px rgba(84, 76, 236, .42), inset 0 1px 0 rgba(255, 255, 255, .4);
    transform: translateY(-1px);
  }
  .toolbar .btn-print:active { transform: scale(.97); }

  .toolbar .btn-back:focus-visible,
  .toolbar .btn-print:focus-visible {
    outline: 2px solid #635bff;
    outline-offset: 2px;
  }

  /* the sheet frame (screen elevation only; print strips shadows anyway) */
  .sheet .netbox { border-radius: 12px; }
  .sheet {
    border-radius: 14px;
    border: 1px solid rgba(228, 233, 242, .9);
    box-shadow: 0 18px 40px -12px rgba(13, 18, 48, .14),
                0 4px 12px -4px rgba(13, 18, 48, .07);
  }
}

/* ===== PAGE: settings-notifications ===== */

/* --- Page + section chrome ------------------------------------------------ */
.page-title { letter-spacing: -0.025em; color: #0f1330; }
.page-subtitle { color: #5f6784; font-size: 13.5px; letter-spacing: -0.005em; }

.card-header {
  background: linear-gradient(180deg, rgba(244, 246, 251, 0.6), rgba(244, 246, 251, 0));
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.card-header .card-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #14183a;
}
/* indigo filament — echoes the sidebar's active-tab indicator */
.card-header .card-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 14px;
  border-radius: 4px;
  margin-right: 10px;
  vertical-align: -2px;
  background: linear-gradient(180deg, #a5b4ff, #635bff);
  box-shadow: 0 0 8px rgba(120, 110, 255, 0.4);
}

.form-group > label { font-size: 12.5px; font-weight: 600; color: #3c4257; }

/* --- Weekly off-day picker — liquid glass day chips ----------------------- */
.check-card {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.66));
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  padding: 15px 9px;
  transition:
    transform var(--motion-normal) var(--spring),
    box-shadow var(--motion-normal) ease,
    border-color var(--motion-fast) ease,
    background var(--motion-fast) ease;
}
.check-card:hover {
  border-color: #b9c3d6;
  box-shadow: var(--shadow-sm), inset 0 1px 0 #fff;
  transform: translateY(-1px);
}
.check-card:active { transform: scale(0.97); }
.check-day {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #4a5169;
  transition: color var(--motion-fast) ease;
}
.check-card.checked {
  border-color: rgba(99, 91, 255, 0.55);
  background: linear-gradient(135deg, rgba(124, 116, 255, 0.18), rgba(99, 91, 255, 0.07) 55%, rgba(255, 255, 255, 0.9));
  box-shadow:
    0 4px 14px -4px rgba(84, 76, 236, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.check-card.checked:hover {
  border-color: rgba(99, 91, 255, 0.75);
  box-shadow:
    0 7px 18px -5px rgba(84, 76, 236, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.check-card.checked .check-day { color: #4038c8; font-weight: 700; }

/* --- Notifications list --------------------------------------------------- */
.notif-list .card {
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: radial-gradient(120% 90% at 50% 0%, rgba(99, 91, 255, 0.05), rgba(99, 91, 255, 0) 60%), #fff;
  box-shadow: none;
}

.notif-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.78));
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    transform var(--motion-normal) var(--spring),
    box-shadow var(--motion-normal) ease,
    border-color var(--motion-fast) ease;
}
.notif-card:hover {
  border-color: #c4cbdb;
  box-shadow: var(--shadow-md), inset 0 1px 0 #fff;
  transform: translateY(-1px);
}

.notif-card.unread {
  border-color: rgba(99, 91, 255, 0.3);
  border-left: 3px solid #635bff;
  background: linear-gradient(135deg, rgba(124, 116, 255, 0.1), rgba(255, 255, 255, 0.92) 55%);
  box-shadow:
    0 4px 16px -6px rgba(84, 76, 236, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.notif-card.unread:hover {
  border-left-color: #544cec;
  box-shadow:
    0 8px 22px -8px rgba(84, 76, 236, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.notif-card.unread .notif-title { color: #13163a; font-weight: 700; }

.notif-card.read {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(248, 250, 253, 0.65));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.notif-card.read .notif-title { color: #454b63; }
.notif-card.read .notif-dot { opacity: 0.45; }

/* type dot becomes a small glass orb (color stays inline per type) */
.notif-dot {
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.45),
    0 0 0 3px rgba(13, 18, 48, 0.05),
    0 1px 4px rgba(13, 18, 48, 0.22);
}
.notif-card.unread .notif-dot {
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    0 0 0 3px rgba(99, 91, 255, 0.14),
    0 1px 6px rgba(13, 18, 48, 0.25);
}

.notif-title { font-size: 14px; letter-spacing: -0.01em; color: #1a1f36; }
.notif-message { color: #464d66; line-height: 1.5; }
.notif-meta { color: #5f6784; letter-spacing: 0.01em; }

/* =========================================================================
   FIX — own-message (.msg-me) readability on the premium light bubble.
   This theme repaints my bubbles as a light lavender gradient, but the base
   stylesheet still colours everything inside them WHITE (text, time, file
   chip, deleted notice) — near-invisible. Repaint the contents in indigo
   ink on the lavender glass. The WhatsApp-blue read ticks and "Read · date"
   receipt keep their #5fc8ff colour untouched (defined in style.css).
   ========================================================================= */
.msg-me .msg-bubble { color: #312e81; }                          /* message text */
.msg-me .msg-time { color: #7d7ab5; }                            /* timestamp */
.msg-me .msg-deleted { color: #7d7ab5; }                         /* deleted notice */
.msg-me .msg-file {                                              /* attachment chip */
    background: rgba(99, 91, 255, 0.10);
    border: 1px solid rgba(99, 91, 255, 0.22);
}
.msg-me .msg-menu-btn:hover { background: rgba(99, 91, 255, 0.14); }
.msg-me .msg-reply-quote { background: rgba(99, 91, 255, 0.10); }
.msg-me .msg-reply-quote:hover { background: rgba(99, 91, 255, 0.16); }
.msg-me .msg-reply-bar { background: #635bff; }
.msg-me .msg-reaction { background: rgba(99, 91, 255, 0.12); color: #312e81; }
.msg-me .msg-reaction:hover { background: rgba(99, 91, 255, 0.18); }
.msg-me .msg-reaction.is-mine { background: rgba(99, 91, 255, 0.20); border-color: rgba(99, 91, 255, 0.50); }