:root {
    /* Brand Colours — Ceres Certifications Ltd. */
    --navy: #1a2e1a;          /* deep forest green (was navy) */
    --navy-light: #243d24;
    --navy-mid: #1f361f;
    --gold: #4caf50;          /* brand green as accent */
    --gold-light: #6dcf71;
    --gold-pale: #e8f5e9;
    --cream: #f8fafc;
    --white: #ffffff;
    --slate: #64748b;
    --slate-light: #94a3b8;
    --green: #2e7d32;
    --green-bg: #e8f5e9;
    --red: #c62828;
    --red-bg: #ffebee;
    --amber: #e65100;
    --amber-bg: #fff3e0;
    --blue: #1565c0;
    --blue-bg: #e3f2fd;
    --border: #e2e8f0;
    --sidebar-w: 268px;
    --charcoal: #1c1c1c;
    --brand-green: #3a7d3a;
    --brand-green-dark: #1a5c1a;
    --brand-green-light: #5aad5e;
    --primary: #3b82f6;
    --primary-dark: #1d4ed8;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  /* Prevent browser swipe-back / swipe-forward gesture on touchpads */
  html {
    overscroll-behavior-x: none;
  }

  body {
    font-family: 'Inter', 'DM Sans', sans-serif;
    background: #f3f4f6;
    color: #111827;
    min-height: 100vh;
    /* body's overflow-x:hidden silently flips overflow-y to `auto`, making
       BODY the real page scroller. Force its vertical scrollbar to be
       permanently present so the content never reflows/"shakes" when the
       scrollbar shows and hides as the cursor moves on/off the main area. */
    overflow-x: hidden;
    overflow-y: scroll;
    overscroll-behavior-x: none;
    display: flex;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  /* When any modal is open, lock background scrolling (JS adds this class and
     compensates the scrollbar width via padding-right so nothing shifts). */
  body.ceres-scroll-lock {
    overflow: hidden !important;
  }

  /* Force a permanent, always-visible page scrollbar. Defining ::-webkit-scrollbar
     switches Chrome on macOS away from the auto-hiding overlay scrollbar to a
     classic always-present one. That auto-hide was the real culprit: when the
     bar hid (as the cursor moved onto the sidebar) Chrome failed to repaint the
     sticky topbar/stats-strip, blanking them out. Keeping the bar permanently
     present removes the hide/repaint entirely — and works for every user
     regardless of their OS "Show scroll bars" setting. */
  html::-webkit-scrollbar,
  body::-webkit-scrollbar { width: 10px; height: 10px; }
  html::-webkit-scrollbar-track,
  body::-webkit-scrollbar-track { background: transparent; }
  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb { background: #c4cad0; border-radius: 5px; }
  html::-webkit-scrollbar-thumb:hover,
  body::-webkit-scrollbar-thumb:hover { background: #aab1b8; }

  /* ── SIDEBAR — clean white with green accent ── */
  .sidebar {
    width: var(--sidebar-w);
    background: #ffffff;
    height: 100vh;
    position: fixed;
    left: 0; top: 0;
    display: flex;
    flex-direction: column;
    z-index: 100;
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: width 0.22s cubic-bezier(0.4,0,0.2,1);
  }

  /* ── Drag-to-resize handle (right edge of the sidebar) ── */
  .sidebar-resize-handle {
    position: absolute;
    top: 0; right: 0;
    width: 6px; height: 100%;
    cursor: col-resize;
    z-index: 130;
  }
  .sidebar-resize-handle:hover { background: var(--brand-green); opacity: 0.35; }
  .sidebar.collapsed .sidebar-resize-handle { display: none; }   /* expand first to resize */
  /* While dragging: kill transitions so resize tracks the mouse, and stop text selection */
  body.sidebar-resizing { cursor: col-resize; user-select: none; }
  body.sidebar-resizing .sidebar,
  body.sidebar-resizing .main { transition: none !important; }

  .sidebar-logo {
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--border);
  }
  .sidebar-logo .logo-pill {
    background: #1e293b;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    border: none;
  }
  .sidebar-logo img.brand-logo {
    width: 100%;
    max-width: 180px;
    max-height: 60px;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1);
    opacity: 1;
    transform: scale(0.85);
  }


  .sidebar-nav {
    flex: 1;
    padding: 12px 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: #c8e6c9 transparent;
    overscroll-behavior: contain;
  }
  .sidebar-nav::-webkit-scrollbar { width: 4px; }
  .sidebar-nav::-webkit-scrollbar-track { background: transparent; }
  .sidebar-nav::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
  .sidebar-nav::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

  .nav-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #94a3b8;
    padding: 16px 20px 5px;
  }

  .nav-item {
    display: block;
    padding: 0;
    margin: 1px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-left-color 0.15s ease;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    border: none;
    border-left: 3px solid transparent;
    background: transparent;
  }
  /* Inner <a> carries the flex layout — makes right-click → Open in New Tab work */
  .nav-item a.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 13px;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
  }
  .nav-item:hover { background: #f8fafc; color: #1e293b; }
  .nav-item:hover .nav-icon svg { opacity: 0.85; }
  .nav-item.active {
    background: #f1f5f9;
    color: #1e293b;
    font-weight: 600;
    border-left-color: #1e293b;
  }
  .nav-item.active .nav-icon svg { opacity: 1; }
  .nav-item .nav-icon {
    width: 16px; height: 16px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .nav-item .nav-icon svg { opacity: 0.55; transition: opacity 0.13s; }

  /* Per-module unread notification count beside the label, e.g. (2) */
  .nav-notif-count {
    margin-left: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #dc2626;
    flex-shrink: 0;
  }
  .sidebar.collapsed .nav-notif-count { display: none !important; }

  /* Panel opened by clicking that count — lists the unread items so you can
     see WHAT they are and jump straight to the record. */
  .notif-target-panel {
    position: fixed; z-index: 3000; width: 330px; max-height: 62vh; overflow-y: auto;
    background: #fff; border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15,23,42,0.18);
    font-size: 13px; animation: ntpIn 0.14s ease-out;
  }
  @keyframes ntpIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  .notif-target-panel .ntp-head {
    padding: 9px 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--slate);
    border-bottom: 1px solid var(--border); background: #f8fafc;
    border-radius: 12px 12px 0 0; position: sticky; top: 0;
  }
  .notif-target-panel .ntp-item {
    padding: 10px 14px; border-bottom: 1px solid #f1f5f9; cursor: pointer;
    border-left: 3px solid #dc2626; transition: background 0.12s;
  }
  .notif-target-panel .ntp-item:last-child { border-bottom: none; border-radius: 0 0 12px 12px; }
  .notif-target-panel .ntp-item:hover { background: #f8fafc; }
  .notif-target-panel .ntp-title { font-weight: 600; color: #111827; margin-bottom: 2px; }
  .notif-target-panel .ntp-body  { font-size: 12px; color: var(--slate); line-height: 1.4; }
  .notif-target-panel .ntp-time  { font-size: 11px; color: #94a3b8; margin-top: 4px; }
  .notif-target-panel .ntp-miss  { font-size: 11px; color: #b45309; margin-top: 4px; }

  /* ── Favourites: ☆ star toggle + drag-to-reorder ── */
  .nav-item { position: relative; }
  .nav-item a.nav-link { padding-right: 26px; }
  .nav-fav-star {
    position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; padding: 2px;
    font-size: 14px; line-height: 1; color: #e2e8f0;
    opacity: 0; transition: opacity .12s ease, color .12s ease; z-index: 3;
  }
  .nav-item:hover .nav-fav-star { opacity: 1; }
  .nav-fav-star:hover { color: #e2e8f0; }
  .nav-fav-star.is-fav { opacity: 1; color: #e2e8f0; }
  .nav-item.fav-zone { cursor: grab; }
  .nav-item.fav-zone:active { cursor: grabbing; }
  .nav-item.fav-dragging { opacity: .45; }
  .nav-section-label.nav-fav-label { color: #e2e8f0; }
  .sidebar.collapsed .nav-fav-star { display: none; }

  .sidebar-footer {
    padding: 14px 16px;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--slate);
    background: #fafafa;
  }
  .sidebar-footer .user-role { color: #a5d6a7; font-weight: 600; }

  /* ── SIDEBAR TOGGLE BUTTON ── */
  .sidebar-toggle-btn {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f8fafc;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700;
    color: #64748b;
    line-height: 1;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    padding: 0;
  }
  .sidebar-toggle-btn:hover { background: #1e293b; color: #fff; border-color: #1e293b; }

  /* ── SIDEBAR SEARCH BAR ── */
  .sidebar-search-wrap {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
  }
  .sidebar-search-input {
    width: 100%;
    padding: 6px 10px 6px 28px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 12px;
    color: #374151;
    background: #f9fafb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") 8px center no-repeat;
    outline: none;
    transition: border-color 0.15s, background-color 0.15s;
    box-shadow: none;
  }
  .sidebar-search-input { padding-right: 26px; }
  .sidebar-search-input:focus { border-color: var(--brand-green); background-color: #fff; }
  .sidebar-search-clear {
    display: none;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: #d1d5db;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #6b7280;
    font-size: 9px;
    line-height: 1;
    padding: 0;
    transition: background 0.15s;
  }
  .sidebar-search-clear:hover { background: #9ca3af; color: #fff; }

  /* ── SIDEBAR COLLAPSED STATE ── */
  .sidebar.collapsed { overflow: visible; }
  .sidebar.collapsed .sidebar-logo-pill { display: none; }
  .sidebar.collapsed .sidebar-search-wrap { display: none; }
  .sidebar.collapsed .nav-section-label { display: none; }
  .sidebar.collapsed .nav-label { display: none; }
  .sidebar.collapsed .sidebar-footer-text { display: none; }
  .sidebar.collapsed .notif-badge { display: none !important; }
  .sidebar.collapsed .nav-item {
    margin: 1px 4px;
    overflow: visible;
  }
  .sidebar.collapsed .nav-item a.nav-link {
    justify-content: center;
    padding: 9px 0;
  }
  .sidebar.collapsed .nav-icon { width: 18px; height: 18px; opacity: 0.85; }
  .sidebar.collapsed .nav-icon svg { width: 18px; height: 18px; }
  .sidebar.collapsed .nav-list { overflow: visible; }
  .sidebar.collapsed .sidebar-footer {
    padding: 10px 0;
    display: flex; flex-direction: column; align-items: center;
  }
  /* Tooltips for collapsed nav items */
  .sidebar.collapsed .nav-item {
    position: relative;
  }
  .sidebar.collapsed .nav-item::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%; transform: translateY(-50%);
    background: #1e293b; color: #fff;
    padding: 5px 10px; border-radius: 6px;
    font-size: 12px; font-weight: 500;
    white-space: nowrap;
    opacity: 0; pointer-events: none;
    z-index: 9999;
    transition: opacity 0.12s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  }
  .sidebar.collapsed .nav-item:hover::after { opacity: 1; }

  /* ── MAIN ── */
  .main {
    margin-left: var(--sidebar-w);
    flex: 1;
    min-height: 100vh;
    /* Reserve space for the now-fixed topbar (60px tall) so content starts
       below it instead of hiding underneath. */
    padding-top: 60px;
    overflow-x: clip;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: calc(100vw - var(--sidebar-w));
    transition: margin-left 0.22s cubic-bezier(0.4,0,0.2,1), max-width 0.22s cubic-bezier(0.4,0,0.2,1);
  }

  .topbar {
    background: var(--white);
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    padding: 0 32px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* FIXED, not sticky: pin the topbar to the viewport so it can never scroll
       away or blank out on a repaint. (As `sticky` it was vanishing on every
       module when the cursor moved onto the sidebar.) `left` tracks the
       --sidebar-w variable so it follows the sidebar collapse/expand. */
    position: fixed;
    top: 0;
    left: var(--sidebar-w);
    /* Size by width off 100vw (a constant that always includes the scrollbar)
       instead of `right: 0` (which tracks the viewport edge and shifts when the
       scrollbar shows/hides — that was making the fixed bar shake sideways as
       the cursor moved on/off the sidebar). Matches how .main is sized. */
    width: calc(100vw - var(--sidebar-w));
    z-index: 50;
    transition: left 0.22s cubic-bezier(0.4,0,0.2,1), width 0.22s cubic-bezier(0.4,0,0.2,1);
  }
  .topbar-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.2px;
  }
  .topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .topbar-date {
    font-size: 12px;
    color: var(--slate);
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
  }
  .btn-primary { background: #1e293b; color: #ffffff; }
  .btn-primary:hover { background: #334155; }
  .btn-gold { background: #1e293b; color: #ffffff; }
  .btn-gold:hover { background: #334155; }
  .btn-outline { background: transparent; color: var(--navy); border: 1.5px solid var(--border); }
  .btn-outline:hover { border-color: var(--navy); }
  .btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 6px; }
  .btn-danger { background: var(--red-bg); color: var(--red); border: 1px solid #fca5a5; }
  .btn-danger:hover { background: #fecaca; }

  /* ── CONTENT ── */
  .content { padding: 20px 24px 80px; flex: 1; background: #f3f4f6; box-sizing: border-box; width: 100%; }

  /* ── VIEWS ── */
  .view { display: none; }
  /* NOTE: fade opacity ONLY — no transform. A transform on `.view` would make it
     the containing block for its `position:fixed` children (e.g. the invoice
     pagination footer), pinning them to the view box instead of the viewport and
     displacing the bottom bar. */
  .view.active { display: block; animation: viewFadeIn 0.2s ease both; }
  @keyframes viewFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* ── STICKY STATS STRIP ── */
  .stats-strip {
    position: sticky;
    top: 60px;
    z-index: 49;
    background: #f3f4f6;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border);
  }

  /* ── STATS ROW ── */
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 0;
  }
  .stat-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s;
  }
  .stat-card:hover { box-shadow: var(--shadow-md); }
  .stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: #334155;
    border-radius: 2px 0 0 2px;
  }
  .stat-number {
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .stat-label { font-size: 12px; color: #6b7280; margin-top: 6px; font-weight: 500; }
  .stat-sub { font-size: 11px; color: #9ca3af; margin-top: 3px; }

  /* ── CARDS ── */
  .card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: clip;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
  }
  .card-header {
    padding: 16px 20px;
    min-height: 64px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: #ffffff;
  }
  .card-title {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    letter-spacing: -0.01em;
  }
  .search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 7px 12px;
    min-width: 220px;
    box-shadow: var(--shadow-sm);
  }
  .search-box:focus-within { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
  .search-box input {
    border: none;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #111827;
    outline: none;
    width: 100%;
  }

  table { width: 100%; border-collapse: collapse; }
  /* Fixed-layout tables: inputs must not overflow their column width */
  #tc-register-table td input,
  #tc-register-table td select,
  #as-table td input,
  #as-table td select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
  }
  thead th {
    background: #1e293b;
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 8px 12px;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 8;
  }
  thead th:first-child { padding-left: 24px; }
  /* Petty Cash: thin white divider between the sticky selection bar and the
     column header. Attached to the header cells so it is byte-identical in the
     at-rest table AND the pinned sticky clone (both matched by this one rule),
     keeping the two dark bars visually separated by an exact, consistent line. */
  #pc-debit-table  thead > tr:first-child > th,
  #pc-debit-table-sticky-clone  thead > tr:first-child > th,
  #pc-credit-table thead > tr:first-child > th,
  #pc-credit-table-sticky-clone thead > tr:first-child > th,
  #misc-sub-credit table thead > tr > th,
  #misc-sub-debit  table thead > tr > th {
    border-top: 5px solid #ffffff;
  }
  tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
  }
  tbody tr:hover { background: #e6edf6; }
  tbody tr:last-child { border-bottom: none; }
  td {
    padding: 13px 16px;
    font-size: 13px;
    vertical-align: middle;
  }
  td:first-child { padding-left: 24px; }

  /* ── Excel-style gridded data table ──────────────────────────────
     Thin gridlines on EVERY cell (vertical + horizontal) on a white
     background — a spreadsheet look for dense client-profile data tabs
     (Cert Updates, TC List) where the soft horizontal-only dividers read
     as a flat "ash" block. Overrides the global td / tbody tr rules via
     the higher-specificity .ceres-grid ancestor. */
  .ceres-grid { background: #fff; }
  .ceres-grid thead th { border-bottom: 1px solid #334155; }
  .ceres-grid td { border-bottom: 1px solid #cbd5e1; padding: 7px 10px; }
  .ceres-grid td:first-child { padding-left: 10px; }
  .ceres-grid thead th:first-child { padding-left: 12px; }
  .ceres-grid tbody tr { border-bottom: none; }
  .ceres-grid tbody tr:last-child { border-bottom: none; }
  .ceres-grid tbody tr:hover { background: #eef4fb; }

  .emp-id { font-family: 'DM Mono', monospace; font-size: 11.5px; color: var(--slate); }
  .emp-name { font-weight: 600; color: var(--navy); }
  .emp-desig { font-size: 12px; color: var(--slate); margin-top: 2px; }

  .badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
  }
  .badge-active   { background: #dcfce7; color: #166534; }
  .badge-inactive { background: #f3f4f6; color: #6b7280; }
  .badge-present  { background: #dcfce7; color: #166534; }
  .badge-absent   { background: #fee2e2; color: #991b1b; }
  .badge-late     { background: #fef3c7; color: #92400e; }
  .badge-leave    { background: #dbeafe; color: #1e40af; }
  .badge-pending  { background: #fef3c7; color: #92400e; }
  .badge-approved { background: #dcfce7; color: #166534; }
  .badge-rejected { background: #fee2e2; color: #991b1b; }

  /* status-badge — used in accessories module */
  .status-badge        { display:inline-flex;align-items:center;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:0.2px; }
  .status-complete     { background:#dcfce7;color:#166534; }
  .status-outstanding  { background:#fef3c7;color:#92400e; }
  .status-pending      { background:#fef9c3;color:#854d0e; }
  .status-inactive     { background:#f3f4f6;color:#6b7280; }
  .status-returned     { background:#f3f4f6;color:#6b7280; }

  .action-btns { display: flex; gap: 6px; align-items: center; }

  /* ── MODAL ──
     Hidden with display:none so BOTH open mechanisms in the app keep working:
       • adding the .open class (invoices, openModal/closeModal in index.html)
       • setting inline style.display='flex' (petty-cash, training, staff-performance)
     Centering lives on the base rule so inline-display modals still center.
     The smooth entrance animation is on the inner .modal, so it plays whenever
     the overlay becomes visible regardless of which toggle is used. (Earlier the
     overlay was hidden via opacity/visibility, which silently broke every modal
     opened by style.display — the buttons appeared dead.) */
  .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .modal-overlay.open { display: flex; }
  .modal {
    background: #ffffff;
    border-radius: 12px;
    width: 100%;
    max-width: 680px;
    /* Reserve 140px (topbar is 60px) so a tall modal, even when the overlay
       centers it on a SHORT viewport, never slides its header up under the fixed
       topbar. Centered top = (100vh − maxH)/2 ≥ 70px. The .modal-body (flex:1,
       min-height:0, overflow-y:auto) absorbs the extra height, so header + footer
       stay visible and only the body scrolls. */
    max-height: calc(100vh - 140px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    overscroll-behavior: contain;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    border: 1px solid var(--border);
    animation: modalIn 0.22s ease;
  }
  @keyframes modalIn {
    from { opacity: 0; transform: scale(0.96) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
  }
  .modal-lg { max-width: 860px; }

  /* Meetings: minutes are written INSIDE this modal, so it gets far more room
     than a form dialog — the old 820px cap made long bullet points unreadable
     while typing. */
  .modal-meeting {
    max-width: min(1450px, 95vw);
    max-height: calc(100vh - 80px);
  }
  /* ⛶ Focus mode — the whole window for writing minutes. */
  .modal-meeting.modal-focus {
    max-width: 98vw;
    max-height: calc(100vh - 32px);
  }
  .modal-meeting.modal-focus .meeting-tabs-bar,
  .modal-meeting.modal-focus .vm-hero { display: none; }
  .vm-focus-btn {
    border: 1px solid var(--border); background: #fff; border-radius: 8px;
    cursor: pointer; font-size: 12px; font-weight: 600; color: #475569;
    padding: 6px 10px; white-space: nowrap;
  }
  .vm-focus-btn:hover { border-color: var(--primary); color: #111827; }
  .modal-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fafafa;
  }
  .modal-title {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
  }
  .modal-close {
    width: 28px; height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #ffffff;
    cursor: pointer;
    font-size: 16px;
    color: var(--slate);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.1s;
  }
  .modal-close:hover { background: #f3f4f6; }
  .modal-body { padding: 20px 24px; flex: 1; min-height: 0; overflow-y: auto; }
  .modal-footer {
    padding: 14px 24px 20px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    border-top: 1px solid var(--border);
    background: #fafafa;
  }

  /* ── FORM ── */
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
  .form-group { display: flex; flex-direction: column; gap: 6px; }
  .form-group.span-2 { grid-column: span 2; }
  .form-group.span-3 { grid-column: span 3; }
  label { font-size: 12px; font-weight: 600; color: var(--navy); letter-spacing: 0.3px; }
  input, select, textarea {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: var(--navy);
    background: var(--cream);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    outline: none;
    transition: border-color 0.2s;
    width: 100%;
  }
  input:focus, select:focus, textarea:focus { border-color: #3b82f6; background: var(--white); box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
  textarea { resize: vertical; min-height: 80px; }

  /* Checkbox option lists in forms (e.g. Standards on the client/employee modals).
     Without this, each checkbox inherits the `input{width:100%}` rule above and
     balloons into a full-width box with its label pushed onto a separate line. */
  .checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--cream);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    margin-top: 6px;
  }
  .checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 400;
    color: var(--navy);
    letter-spacing: 0;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 6px 12px;
    min-width: 80px;
    white-space: nowrap;
    cursor: pointer;
    margin: 0;
  }
  .checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    accent-color: #2e7d32;
    cursor: pointer;
  }

  .section-divider {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 8px;
    margin: 20px 0 16px;
    grid-column: span 2;
  }

  /* ── EMPLOYEE PROFILE VIEW ── */
  .profile-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 12px;
    padding: 28px;
    display: flex;
    gap: 24px;
    align-items: center;
    margin-bottom: 20px;
    color: white;
  }
  .profile-avatar {
    width: 72px; height: 72px;
    background: #334155;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    color: #e2e8f0;
    font-weight: 700;
    flex-shrink: 0;
    border: 2px solid rgba(148,163,184,0.3);
  }
  .profile-name { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 600; }
  .profile-desig { color: #94a3b8; font-size: 13px; margin-top: 4px; }
  .profile-id { font-family: 'DM Mono', monospace; font-size: 12px; color: rgba(148,163,184,0.6); margin-top: 6px; }

  .profile-tabs { display: flex; gap: 4px; margin-bottom: 20px; flex-wrap: wrap; }
  .ptab {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--border);
    color: var(--slate);
    background: white;
    transition: all 0.15s;
  }
  .ptab:hover { border-color: var(--navy); color: var(--navy); }
  .ptab.active { background: #1e293b; color: #ffffff; border-color: #1e293b; }

  .profile-tab-content { display: none; }
  .profile-tab-content.active { display: block; }

  .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .info-item {
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
  }
  .info-item .info-label { font-size: 10.5px; font-weight: 600; color: var(--slate); letter-spacing: 1px; text-transform: uppercase; }
  .info-item .info-value { font-size: 14px; font-weight: 500; color: var(--navy); margin-top: 4px; }

  /* ── ATTENDANCE ── */
  .attendance-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .att-date-display {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--navy);
  }

  /* ── LEAVE ── */
  .leave-balance-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
  }
  .leave-balance-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
  }
  .leave-balance-card .lbc-num {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--navy);
  }
  .leave-balance-card .lbc-label { font-size: 11px; color: var(--slate); margin-top: 4px; font-weight: 500; }

  /* ── PAYROLL ── */
  .payroll-summary {
    background: linear-gradient(135deg,#1a7a3c,#2ea84f);
    border-radius: 12px;
    padding: 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 20px;
    color: white;
  }
  .ps-item .ps-label { font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 1px; text-transform: uppercase; }
  .ps-item .ps-value { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 600; color: #a5d6a7; margin-top: 4px; }

  /* ── ACCESSORIES & JD ── */
  .acc-list { list-style: none; }
  .acc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
  }
  .acc-item:last-child { border-bottom: none; }
  .acc-name { font-weight: 500; }
  .acc-meta { font-size: 12px; color: var(--slate); margin-top: 2px; }

  /* ── TRAINING ── */
  .training-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
  }
  .training-item .tr-title { font-weight: 600; font-size: 14px; }
  .training-item .tr-meta { font-size: 12px; color: var(--slate); margin-top: 4px; }

  /* ── TABS ── */
  .tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
  }
  .tab-btn {
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--slate);
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: 'Inter', sans-serif;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.15s;
  }
  .tab-btn:hover { color: #111827; }
  .tab-btn.active { color: var(--primary-dark); border-bottom-color: var(--primary); font-weight: 600; }

  .tab-content { display: none; }
  .tab-content.active { display: block; }

  /* ── LOGIN PAGE ── */
  #loginPage {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    background: #edf3ee;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
  }
  #loginPage.hidden { display: none; }
  #loginPage.visible { display: flex; }
  html.show-login #loginPage { display: flex; }
  /* Loading overlay shown while auto-login verifies token */
  #ceresLoader {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: #f3f4f6;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
  }
  html.has-token #ceresLoader { display: flex; }
  #ceresLoader.hidden { display: none !important; }
  .ceres-spinner {
    width: 40px; height: 40px;
    border: 3px solid #c8e6c9;
    border-top-color: #2e7d32;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  .login-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px;
    position: relative;
    overflow: hidden;
    background: #1a7a3c;
  }
  .login-left::before {
    content: '';
    position: absolute;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    top: -120px; left: -120px;
  }
  .login-left::after {
    content: '';
    position: absolute;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    bottom: -80px; right: -40px;
  }
  .login-brand { position: relative; z-index: 1; text-align: center; max-width: 380px; }
  .login-logo-ring {
    width: 88px; height: 88px;
    border-radius: 50%;
    border: 2px solid rgba(201,168,76,0.4);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 28px;
    position: relative;
  }
  .login-logo-ring::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: rgba(201,168,76,0.1);
  }
  .login-logo-ring span { font-size: 36px; position: relative; z-index: 1; }
  .login-org-name {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.25;
    margin-bottom: 10px;
  }
  .login-org-sub {
    font-size: 11px;
    color: rgba(255,255,255,0.9);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 40px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
  }
  .login-address {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    line-height: 1.7;
    text-align: center;
  }
  .login-divider { display: none; }
  .login-right {
    width: 440px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 52px 48px;
    position: relative;
    border-left: 1px solid #e5e7eb;
  }
  .login-welcome {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
  }
  .login-subtitle {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 28px;
  }
  .login-form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 18px;
  }
  .login-form-group label {
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    letter-spacing: 0;
    font-family: 'Inter', sans-serif;
  }
  .login-input-wrap { position: relative; }
  .login-input-wrap input {
    background: #f9fafb;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 10px 14px 10px 40px;
    font-size: 13px;
    color: #111827;
    width: 100%;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .login-input-wrap input:focus {
    border-color: var(--primary);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(29,185,84,0.12);
  }
  .login-input-wrap input.error { border-color: var(--red); }
  .login-input-icon {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    pointer-events: none;
  }
  .login-pw-toggle {
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none;
    cursor: pointer; font-size: 16px;
    color: var(--slate);
  }
  .login-role-select {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 22px;
  }
  .role-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    background: #f9fafb;
    transition: all 0.15s;
    font-family: 'Inter', sans-serif;
  }
  .role-chip:hover { border-color: var(--primary); color: #111827; }
  .role-chip.selected { border-color: var(--primary); background: var(--primary); color: white; }
  .role-chip .rc-icon { font-size: 18px; }

  .login-btn {
    width: 100%;
    padding: 11px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0;
    margin-top: 6px;
    position: relative;
  }
  .login-btn:hover { background: var(--primary-dark); }
  .login-btn:active { transform: scale(0.99); }
  .login-btn.loading { pointer-events: none; opacity: 0.8; }

  .login-error {
    background: var(--red-bg);
    border: 1px solid #fca5a5;
    color: var(--red);
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 16px;
    display: none;
  }
  .login-error.show { display: block; }

  /* ── Centered login card (Option B redesign) ── */
  .login-card {
    position: relative;
    z-index: 1;
    width: 408px;
    max-width: 100%;
    background: #ffffff;
    border: 1px solid #e6ebe7;
    border-radius: 16px;
    padding: 40px 38px 32px;
    box-shadow: 0 12px 44px rgba(15,45,28,0.10);
    text-align: center;
    box-sizing: border-box;
  }
  .login-card-logo {
    width: 152px;
    max-width: 62%;
    display: block;
    margin: 0 auto 22px;
  }
  .login-card .login-welcome { text-align: center; }
  .login-card .login-subtitle { text-align: center; margin-bottom: 26px; }
  .login-card form { text-align: left; }
  .login-card .login-input-icon { color: #94a3b8; display: flex; align-items: center; }
  .login-card .login-pw-toggle { color: #94a3b8; display: flex; align-items: center; }
  .login-card .login-btn {
    background: #15663a;
    border-radius: 8px;
    padding: 12px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
  }
  .login-card .login-btn:hover { background: #114f2c; }
  .login-card-foot {
    margin-top: 22px;
    font-size: 11px;
    color: #9ca3af;
    letter-spacing: 0.3px;
  }
  .login-bg-blob {
    position: absolute;
    border-radius: 50%;
    background: #15663a;
    opacity: 0.06;
    pointer-events: none;
  }

  .login-footer-note {
    margin-top: 20px;
    text-align: center;
    font-size: 11px;
    color: #9ca3af;
    font-family: 'Inter', sans-serif;
  }
  .login-footer-note strong { color: #6b7280; }

  /* Role badge in topbar after login */
  .topbar-role-badge {
    display: flex; align-items: center; gap: 8px;
    background: #f9fafb;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    font-family: 'Inter', sans-serif;
  }
  .topbar-role-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--primary);
  }

  /* Session info in sidebar footer */
  .session-user { color: #374151; font-weight: 600; font-size: 12px; }

  @keyframes loginFadeOut {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(1.03); }
  }
  .login-fade-out { animation: loginFadeOut 0.4s ease forwards; pointer-events: none; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }



  /* Password strength */
  .pw-strength { height: 4px; border-radius: 2px; margin-top: 6px; transition: all 0.3s; }
  .pw-strength.weak   { background: #ef5350; width: 33%; }
  .pw-strength.medium { background: #ffa726; width: 66%; }
  .pw-strength.strong { background: #2e7d32; width: 100%; }
  /* Location status badges */
  .badge-inoffice  { background:#e8f5e9; color:#2e7d32; }
  .badge-onaudit   { background:#e3f2fd; color:#1565c0; }
  .badge-inmeeting { background:#fff3e0; color:#e65100; }
  .badge-fieldwork { background:#fce4ec; color:#c62828; }
  .badge-offduty   { background:#f3e5f5; color:#6a1b9a; }

  /* ── MEETING MODULE ── */
  .meeting-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 16px;
    transition: box-shadow 0.2s;
  }
  .meeting-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
  .meeting-card-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
  }
  .meeting-date-block {
    background: #1e293b;
    color: white;
    border-radius: 10px;
    padding: 10px 14px;
    text-align: center;
    flex-shrink: 0;
    min-width: 58px;
  }
  .meeting-date-block .mdb-day {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
  }
  .meeting-date-block .mdb-month {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #94a3b8;
    margin-top: 3px;
  }
  .meeting-title-row { flex: 1; }
  .meeting-title {
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 6px;
  }
  .meeting-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--slate);
  }
  .meeting-meta span { display: flex; align-items: center; gap: 5px; }
  .meeting-status-badge {
    padding: 4px 12px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    align-self: flex-start;
  }
  .msb-scheduled  { background: #e3f2fd; color: #1565c0; }
  .msb-inprogress { background: #fff3e0; color: #e65100; }
  .msb-completed  { background: #e8f5e9; color: #2e7d32; }
  .msb-cancelled  { background: #ffebee; color: #c62828; }

  .meeting-body { padding: 0; }
  .meeting-tabs-bar {
    display: flex;
    border-bottom: 1px solid var(--border);
    padding: 0 24px;
    gap: 0;
    background: #fafffe;
  }
  .mtab {
    padding: 11px 18px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--slate);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: all 0.15s;
    font-family: 'DM Sans', sans-serif;
    border: none;
    background: transparent;
  }
  .mtab:hover { color: var(--navy); }
  .mtab.active { color: #1e293b; border-bottom: 3px solid #1e293b; }

  .mtab-content { display: none; padding: 20px 24px; }
  .mtab-content.active { display: block; }

  /* Attendee chips */
  .attendee-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
  .attendee-chip {
    display: flex; align-items: center; gap: 7px;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 99px;
    padding: 5px 12px 5px 6px;
    font-size: 12px;
  }
  .attendee-chip .ac-avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #1a2e1a;
    color: #a5d6a7;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700;
  }
  .attendee-chip .ac-rsvp {
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-left: 4px;
  }
  .rsvp-accepted  { background: #2e7d32; }
  .rsvp-declined  { background: #c62828; }
  .rsvp-pending   { background: #ffa726; }

  /* Action items */
  .action-item-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
  }
  .action-item-row:last-child { border-bottom: none; }
  .ai-check {
    width: 18px; height: 18px;
    border-radius: 4px;
    border: 2px solid var(--border);
    flex-shrink: 0;
    margin-top: 1px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
  }
  .ai-check.done { background: #2e7d32; border-color: #2e7d32; color: white; }

  /* Notification bell */
  .notif-bell {
    position: relative;
    cursor: pointer;
    padding: 4px;
  }
  .notif-count {
    position: absolute;
    top: -4px; right: -4px;
    background: #c62828;
    color: white;
    border-radius: 99px;
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
  }
  .notif-dropdown {
    position: absolute;
    top: 100%; right: 0;
    width: 340px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    z-index: 200;
    display: none;
    max-height: 420px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .notif-dropdown.open { display: block; }
  .notif-header {
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .notif-item {
    position: relative;
    padding: 8px 30px 8px 12px;   /* right room for the read/unread toggle dot */
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s;
  }
  .notif-item:hover { background: var(--cream); }
  /* Unread — clearly emphasised: red accent bar (matches the red bell badge), tinted row, bold title */
  .notif-item.unread { background: #fff5f5; border-left: 4px solid #c62828; }
  .notif-item.unread .ni-title { font-weight: 700; color: var(--navy); }
  /* Read — recede: dimmed, no accent (transparent bar keeps text aligned with unread rows) */
  .notif-item.read { opacity: 0.55; border-left: 4px solid transparent; }
  /* Clickable read/unread toggle dot (right side). Solid red = unread (click to read); hollow ring = read (click to unread). */
  .notif-item .ni-toggle {
    position: absolute;
    top: 9px; right: 10px;
    width: 14px; height: 14px;
    border-radius: 50%;
    box-sizing: border-box;
    cursor: pointer;
    transition: transform 0.1s ease, background 0.15s, border-color 0.15s;
  }
  .notif-item.unread .ni-toggle { background: #c62828; border: 2px solid #c62828; }
  .notif-item.read   .ni-toggle { background: transparent; border: 2px solid var(--slate-light); }
  .notif-item .ni-toggle:hover { transform: scale(1.3); }
  .notif-item.read   .ni-toggle:hover { border-color: var(--slate); }
  .notif-item:last-child { border-bottom: none; }
  .notif-item .ni-title { font-weight: 600; color: var(--navy); margin-bottom: 3px; }
  .notif-item .ni-body { color: var(--slate); line-height: 1.5; }
  .notif-item .ni-time { color: var(--slate-light); margin-top: 4px; font-size: 11px; }
  .notif-divider {
    padding: 6px 12px;
    font-size: 10px;
    font-weight: 600;
    color: var(--slate-light);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
  }
  .notif-section-header {
    padding: 7px 12px;
    font-size: 10px;
    font-weight: 700;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    background: #eef2f7;
    border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
  }
  .notif-empty-section {
    padding: 8px 14px;
    font-size: 11px;
    color: var(--slate-light);
    border-bottom: 1px solid var(--border);
    font-style: italic;
  }

  /* Minutes editor */
  .minutes-editor {
    width: 100%;
    min-height: 380px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    line-height: 1.7;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    resize: vertical;
    outline: none;
    background: var(--cream);
    transition: border-color 0.2s;
  }
  .minutes-editor:focus { border-color: #2e7d32; background: white; }

  /* Meeting invite preview card */
  .invite-preview {
    background: linear-gradient(135deg, #1e293b, #334155);
    border-radius: 14px;
    padding: 24px;
    color: white;
    margin-top: 16px;
  }
  .invite-preview .ip-label {
    font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
    color: #94a3b8; margin-bottom: 12px; font-weight: 600;
  }
  .invite-preview .ip-title {
    font-family: 'Playfair Display', serif;
    font-size: 20px; font-weight: 700; margin-bottom: 16px;
  }
  .invite-preview .ip-row {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: rgba(255,255,255,0.75); margin-bottom: 8px;
  }

  /* ── CLIENT MODULE ── */
  .client-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.18s;
    position: relative;
    overflow: hidden;
  }
  .client-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); border-color: #cbd5e1; }
  .client-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: #475569;
  }
  .client-avatar {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #334155;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
    font-family: 'Playfair Display', serif;
    flex-shrink: 0;
    border: 1px solid #e2e8f0;
  }
  .client-info { flex: 1; min-width: 0; }
  .client-name { font-weight: 600; font-size: 14px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .client-meta { font-size: 12px; color: var(--slate); margin-top: 3px; display: flex; gap: 12px; flex-wrap: wrap; }
  .std-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-right: 3px;
  }
  .std-GOTS,
  .std-OCS,
  .std-GRS,
  .std-RCS,
  .std-RWS,
  .std-RDS,
  .std-HIGG,
  .std-BCI,
  .std-CTPAT,
  .std-other { background: #e2e8f0; color: #1e293b; }
  label:has(.nc-std-check:checked) { background: #e8f5e9 !important; border-color: #2e7d32 !important; color: #1b5e20; font-weight: 600; }

  .expiry-alert {
    display: flex; align-items: center; gap: 8px;
    background: #fff3e0;
    border: 1px solid #ffcc80;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: #e65100;
    font-weight: 500;
  }
  .expiry-critical {
    background: #ffebee;
    border-color: #ef9a9a;
    color: #c62828;
  }

  /* Client profile page */
  .client-profile-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 16px;
    padding: 28px 32px;
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 20px;
    color: white;
  }
  .client-profile-avatar {
    width: 64px; height: 64px;
    border-radius: 14px;
    background: #334155;
    border: 2px solid rgba(148,163,184,0.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700;
    font-family: 'Playfair Display', serif;
    color: #e2e8f0;
    flex-shrink: 0;
  }

  /* Cert timeline */
  .cert-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
  }
  .cert-row:last-child { border-bottom: none; }
  .cert-std-badge {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    min-width: 60px;
    text-align: center;
  }
  .cert-expiry-bar {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
  }
  .cert-expiry-fill {
    height: 100%;
    border-radius: 3px;
  }
  
  /* Bulk upload */
  .upload-zone {
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--cream);
  }
  .upload-zone:hover, .upload-zone.dragover {
    border-color: #2e7d32;
    background: #f0f7f0;
  }
  .upload-zone .uz-icon { font-size: 40px; margin-bottom: 12px; }
  .upload-zone .uz-text { font-size: 14px; font-weight: 600; color: var(--navy); }
  .upload-zone .uz-sub { font-size: 12px; color: var(--slate); margin-top: 6px; }

  /* ── AUDIT SCHEDULE ── */
  .sched-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 16px;
    align-items: center;
    margin-bottom: 8px;
    transition: all 0.15s;
    cursor: pointer;
  }
  .sched-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); border-color: #cbd5e1; }
  .sched-date-box {
    background: #1e293b;
    color: white;
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
  }
  .sched-date-box .sd-day { font-family: 'DM Sans',sans-serif; font-size: 22px; font-weight: 800; line-height: 1; }
  .sched-date-box .sd-month { font-size: 9px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #94a3b8; margin-top: 3px; }
  .sched-date-box .sd-year { font-size: 9px; color: rgba(255,255,255,0.35); }
  .sched-info .si-client { font-weight: 600; font-size: 14px; color: var(--navy); margin-bottom: 4px; }
  .sched-info .si-meta { font-size: 12px; color: var(--slate); display: flex; gap: 14px; flex-wrap: wrap; }
  .sched-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

  /* Calendar week strip */
  .week-strip { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; margin-bottom: 20px; }
  .week-day {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
    min-height: 80px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .week-day:hover { border-color: #cbd5e1; background: #f8fafc; }
  .week-day.today { border-color: #3b82f6; background: #eff6ff; }
  .week-day.has-audit { border-color: #1565c0; }
  .week-day .wd-num { font-family: 'Playfair Display',serif; font-size: 18px; font-weight: 700; }
  .week-day .wd-name { font-size: 10px; color: var(--slate); text-transform: uppercase; letter-spacing: 1px; }
  .week-day .wd-dot { width: 6px; height: 6px; border-radius: 50%; background: #1565c0; margin: 4px auto 0; }

  /* ── CLIENT DIRECTORY RULE ── */
  .client-required-banner {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #475569;
    border-radius: 10px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #374151;
  }
  .client-required-banner strong { color: #1e293b; }
  .client-required-banner .crb-icon { font-size: 20px; flex-shrink: 0; }

  /* Reusable client picker widget */
  .client-picker-wrap { position: relative; }
  .client-picker-wrap input[type="text"] { padding-right: 36px; }
  .client-picker-dropdown {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: white;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    max-height: 220px;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 300;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  }
  .client-picker-dropdown .cpd-item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
    transition: background 0.12s;
  }
  .client-picker-dropdown .cpd-item:hover { background: #f0f7f0; }
  .client-picker-dropdown .cpd-item:last-child { border-bottom: none; }
  .client-picker-dropdown .cpd-item .cpd-name { font-weight: 600; }
  .client-picker-dropdown .cpd-item .cpd-meta { font-size: 11px; color: var(--slate); margin-top: 2px; }
  .client-picker-selected {
    display: none;
    background: #e8f5e9;
    border: 1px solid #c8e6c9;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    margin-top: 8px;
  }
  .client-picker-selected .cps-name { font-weight: 600; color: var(--navy); }
  .client-picker-selected .cps-meta { font-size: 11px; color: var(--slate); margin-top: 2px; }

  /* ── AUDIT DETAIL PAGE ── */
  .workflow-step {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }
  .workflow-step:last-child { border-bottom: none; }
  .ws-circle {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    font-weight: 700;
  }
  .ws-done    { background: #e8f5e9; color: #2e7d32; }
  .ws-pending { background: #f5f5f5; color: #9e9e9e; border: 2px dashed #e0e0e0; }
  .ws-current { background: #e3f2fd; color: #1565c0; border: 2px solid #90caf9; }
  .ws-label { font-size: 13px; font-weight: 500; flex: 1; }
  .ws-date  { font-size: 12px; color: var(--slate); }
  .ws-input { font-size: 12px; }

  /* Auditor assignment cards */
  .auditor-chip-lg {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 8px;
  }
  .auditor-chip-lg .ac-avatar-lg {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #1a2e1a;
    color: #a5d6a7;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    flex-shrink: 0;
  }
  .auditor-chip-lg .ac-info { flex: 1; }
  .auditor-chip-lg .ac-name { font-weight: 600; font-size: 13px; }
  .auditor-chip-lg .ac-role { font-size: 11px; color: var(--slate); margin-top: 2px; }
  .ac-lead-badge {
    background: #1a2e1a; color: #a5d6a7;
    padding: 2px 8px; border-radius: 4px;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.5px;
  }

  /* My Audits section on staff dashboard */
  .my-audit-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
  }
  .my-audit-row:hover { background: #f8fafc; margin: 0 -20px; padding: 12px 20px; }
  .my-audit-row:last-child { border-bottom: none; }
  /* ── SCROLLBAR ── */
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

  /* ── TOAST ── */
  .toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #111827;
    color: #ffffff;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    border-left: 3px solid var(--primary);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    z-index: 10001;
    animation: fadeInUp 0.25s ease;
    display: none;
    max-width: 320px;
  }
  .toast.show { display: block; }
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ── PAGINATION ── */
  .pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px 26px;
    border-top: 1px solid var(--border);
    justify-content: flex-end;
    position: fixed;
    bottom: 0;
    left: var(--sidebar-w);
    /* width off 100vw (constant) instead of right:0 (shifts with the
       scrollbar) — same anti-shake fix as .topbar above. */
    width: calc(100vw - var(--sidebar-w));
    background: #fff;
    z-index: 40;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
    transition: left 0.22s cubic-bezier(0.4,0,0.2,1), width 0.22s cubic-bezier(0.4,0,0.2,1);
  }
  .page-info { font-size: 12px; color: var(--slate); margin-right: auto; }

  /* Type-a-page jump box that sits where the "Page X of Y" text used to be. */
  .pg-jump { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--slate); padding: 0 4px; }
  .pg-jump-input {
    width: 58px; padding: 5px 6px; font-size: 13px; text-align: center;
    border: 1px solid var(--border); border-radius: 6px; background: #fff;
    color: #111827; font-family: inherit; -moz-appearance: textfield;
  }
  .pg-jump-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
  .pg-jump-input:disabled { background: #f8fafc; color: var(--slate); }
  .pg-jump-input::-webkit-outer-spin-button,
  .pg-jump-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

  /* TC register — Turkish office tab hides payment-tracking columns
     (Payment Record + Payment). Toggled by the tc-office-tr class on the view. */
  #view-tc-register.tc-office-tr .tc-paycol { display: none; }

  /* ── Sticky horizontal scrollbar ── */
  #sticky-hscroll {
    position: fixed;
    bottom: 52px;
    left: var(--sidebar-w);
    /* width off 100vw (constant) instead of right:0 — same anti-shake fix. */
    width: calc(100vw - var(--sidebar-w));
    transition: left 0.22s cubic-bezier(0.4,0,0.2,1), width 0.22s cubic-bezier(0.4,0,0.2,1);
    height: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 38;
    background: #f8fafc;
    border-top: 1px solid var(--border);
  }
  #sticky-hscroll-inner { height: 1px; }

  .empty-state {
    text-align: center;
    padding: 48px;
    color: #9ca3af;
  }
  .empty-state .es-icon { font-size: 36px; margin-bottom: 12px; opacity: 0.7; }
  .empty-state .es-text { font-size: 13px; color: #6b7280; }

  select option { font-family: 'DM Sans', sans-serif; }

  .filter-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  .filter-row select { width: auto; min-width: 140px; }

  /* ── EMPLOYEE PROFILE DASHBOARD ── */
  .profile-page-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 16px;
    padding: 32px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 28px;
    align-items: start;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
  }
  .profile-page-header::before {
    content: '';
    position: absolute;
    right: -40px; top: -40px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: rgba(148,163,184,0.06);
  }
  .profile-page-header::after {
    content: '';
    position: absolute;
    right: 60px; bottom: -60px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: rgba(148,163,184,0.04);
  }
  .profile-big-avatar {
    width: 90px; height: 90px;
    border-radius: 50%;
    background: #334155;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    font-weight: 700;
    color: #e2e8f0;
    border: 2px solid rgba(148,163,184,0.25);
    flex-shrink: 0;
    position: relative; z-index: 1;
  }
  .profile-page-info { position: relative; z-index: 1; }
  .profile-page-name {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.2;
  }
  .profile-page-desig { color: #a5d6a7; font-size: 14px; margin-top: 6px; font-weight: 500; }
  .profile-page-meta { display: flex; gap: 20px; margin-top: 14px; flex-wrap: wrap; }
  .profile-page-meta-item {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: rgba(255,255,255,0.55);
  }
  .profile-page-meta-item span { color: rgba(255,255,255,0.85); font-weight: 500; }
  .profile-page-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; position: relative; z-index: 1; }

  /* KPI mini cards in profile */
  .profile-kpi-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 24px;
  }
  .profile-kpi {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s;
  }
  .profile-kpi:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
  .profile-kpi .kpi-val {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
  }
  .profile-kpi .kpi-label { font-size: 11px; color: var(--slate); margin-top: 6px; font-weight: 500; }
  .profile-kpi .kpi-bar {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px;
  }

  /* Profile page tabs */
  .profile-tabs-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 20px;
  }
  .pptab-arrow {
    flex-shrink: 0;
    width: 30px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #f8fafc;
    color: #475569;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
  }
  .pptab-arrow:hover { background: #e2e8f0; color: #1e293b; }
  .profile-page-tabs {
    display: flex;
    gap: 2px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px;
    flex: 1;
    overflow-x: auto;
    scroll-behavior: auto;
    scrollbar-width: none;
    box-shadow: var(--shadow-sm);
  }
  .profile-page-tabs::-webkit-scrollbar { display: none; }
  .pptab {
    flex: 0 0 auto;
    padding: 8px 13px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--slate);
    font-family: 'Inter', sans-serif;
    transition: all 0.15s;
    text-align: center;
    white-space: nowrap;
  }
  .pptab:hover { color: #111827; background: #f3f4f6; }
  .pptab.active { background: #1e293b; color: #ffffff; font-weight: 600; }

  .pptab-content { display: none; }
  .pptab-content.active { display: block; }

  /* Attendance heatmap */
  .att-month-label { font-size: 11px; color: var(--slate); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
  .att-heatmap { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; }
  .att-cell {
    width: 28px; height: 28px; border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 600; cursor: default;
    position: relative;
  }
  .att-cell.present { background: var(--green-bg); color: var(--green); }
  .att-cell.absent  { background: var(--red-bg);   color: var(--red);   }
  .att-cell.late    { background: var(--amber-bg);  color: var(--amber); }
  .att-cell.leave   { background: var(--blue-bg);   color: var(--blue);  }
  .att-cell.future  { background: #f1f5f9; color: var(--slate-light); }
  .att-cell.weekend { background: #f8fafc; color: #cbd5e1; }

  /* Salary slip style */
  .salary-slip {
    border: 1.5px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
  }
  .salary-slip-header {
    background: #1a7a3c;
    color: white;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .salary-slip-header .ss-month { font-weight: 600; font-size: 14px; }
  .salary-slip-body { padding: 16px 20px; }
  .salary-row {
    display: flex; justify-content: space-between;
    padding: 7px 0; border-bottom: 1px solid var(--border);
    font-size: 13px;
  }
  .salary-row:last-child { border-bottom: none; }
  .salary-row.total-row { font-weight: 700; font-size: 14px; padding-top: 10px; }

  /* Timeline style for activity log */
  .timeline { position: relative; padding-left: 24px; }
  .timeline::before {
    content: '';
    position: absolute;
    left: 7px; top: 8px; bottom: 8px;
    width: 2px;
    background: var(--border);
  }
  .tl-item { position: relative; margin-bottom: 18px; }
  .tl-dot {
    position: absolute;
    left: -20px; top: 4px;
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 2px solid var(--white);
  }
  .tl-dot.green  { background: var(--green); }
  .tl-dot.gold   { background: #4caf50;  }
  .tl-dot.blue   { background: var(--blue);  }
  .tl-dot.amber  { background: var(--amber); }
  .tl-text { font-size: 13px; font-weight: 500; color: var(--navy); }
  .tl-date { font-size: 11px; color: var(--slate); margin-top: 2px; }

  /* Back breadcrumb */
  .breadcrumb {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: #6b7280;
    margin-bottom: 20px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
  }
  .breadcrumb:hover { color: #111827; }
  .breadcrumb .bc-sep { color: var(--slate-light); }

  /* Edit form inline */
  .edit-section-title {
    font-size: 11px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: #2e7d32;
    border-bottom: 1px solid var(--gold-pale);
    padding-bottom: 8px; margin: 20px 0 14px;
  }

/* ── Multi-select dropdown widget ───────────── */
.ms-wrap { position: relative; }
.ms-btn {
  width: 100%;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: var(--navy);
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 6px 28px 6px 10px;
  text-align: left;
  cursor: pointer;
  position: relative;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 36px;
  box-sizing: border-box;
  line-height: 1.4;
}
.ms-btn::after {
  content: '▾';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--slate);
  font-size: 10px;
}
.ms-btn:hover { border-color: #2e7d32; }
.ms-btn:focus, .ms-wrap.is-open .ms-btn { border-color: #2e7d32; background: var(--white); }
.ms-panel {
  display: none;
  position: fixed;
  min-width: 200px;
  width: max-content;
  max-width: 360px;
  background: #fff;
  border: 1.5px solid #2e7d32;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(26,61,26,0.22);
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 99999;
}
.ms-panel.open { display: block; }
.ms-panel label {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  color: var(--navy);
  font-weight: normal !important;
  margin: 0 !important;
  white-space: nowrap;
}
.ms-panel label:hover { background: #f1f8e9; }
.ms-panel label input[type=checkbox] {
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: auto;
  accent-color: #2e7d32;
  background: #fff;
  border: 1px solid #c8e6c9;
}
.ms-panel label > span {
  flex: 0 1 auto;
  white-space: nowrap;
}
.ms-panel .ms-actions {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid #c8e6c9;
  background: #f8faf8;
  position: sticky;
  bottom: 0;
}
.ms-panel .ms-actions button {
  flex: 1;
  font-size: 11px;
  padding: 6px 10px;
  border: 1px solid #c8e6c9;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  color: var(--navy);
  white-space: nowrap;
  font-weight: 500;
}
.ms-panel .ms-actions button:hover { background: #e8f5e9; border-color: #2e7d32; }

/* Search box pinned to the top of a long multi-select list. */
.ms-panel .ms-search {
  position: sticky;
  top: 0;
  background: #fff;
  padding: 8px 10px;
  border-bottom: 1px solid #e2e8f0;
  z-index: 1;
}
.ms-panel .ms-search input {
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  padding: 6px 9px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  outline: none;
}
.ms-panel .ms-search input:focus { border-color: #2e7d32; }
.inv-ms-panel .ms-search input:focus { border-color: #1565c0; }

/* Invoice filter multi-select — blue theme override */
.inv-ms-btn { background: #fff !important; border-color: #e2e8f0 !important; color: #374151 !important; }
.inv-ms-btn:hover { border-color: #1565c0 !important; }
.ms-wrap.is-open .inv-ms-btn { border-color: #1565c0 !important; }
.inv-ms-panel { border-color: #1565c0 !important; box-shadow: 0 8px 24px rgba(21,101,192,.18) !important; }
.inv-ms-panel label:hover { background: #dbeafe !important; }
.inv-ms-panel label input[type=checkbox] { accent-color: #1565c0 !important; }
.inv-ms-panel .ms-actions { border-top-color: #bfdbfe !important; background: #eff6ff !important; }
.inv-ms-panel .ms-actions button:hover { background: #dbeafe !important; border-color: #1565c0 !important; }

  .search-clear-btn { display:none; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; color:#94a3b8; font-size:14px; padding:0 4px; flex-shrink:0; line-height:1; }
  .search-clear-btn:hover { color:#c62828; }


/* ══════════════════════════════════════════════
   CLIENT PROFILE VIEW
══════════════════════════════════════════════ */
.profile-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 0 16px 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
}
.profile-panel-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 6px 0;
}
.profile-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.client-id {
  font-size: 12px;
  color: var(--slate);
  font-family: monospace;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 4px;
}
.btn-icon {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 14px;
  color: var(--slate);
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-icon:hover { background: #f1f5f9; }
/* Icon buttons that carry a file-presence badge (📎 ✓N / none) must grow to fit it,
   otherwise the badge overflows the fixed 32px box and spills onto the next button. */
.btn-icon:has(.att-badge) { width: auto; min-width: 32px; padding: 0 8px; gap: 1px; }

.profile-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  margin-bottom: 20px;
  background: #f8fafc;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--border);
}
.info-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.info-row.full-width { grid-column: span 2; }
.info-row label {
  font-size: 11px;
  font-weight: 600;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.info-row span {
  font-size: 13px;
  color: var(--navy);
  font-weight: 500;
}

.profile-edit-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.btn-secondary {
  background: #f1f5f9;
  color: var(--navy);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn-secondary:hover { background: #e2e8f0; }
.btn-primary {
  background: #1e293b;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary:hover { background: #334155; }

.profile-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 16px;
}
.tab-btn {
  padding: 8px 18px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--slate);
  cursor: pointer;
  border-radius: 6px 6px 0 0;
}
.tab-btn:hover { background: #f8fafc; color: var(--navy); }
.tab-btn.active { color: #1e293b; border-bottom-color: #1e293b; }

.cert-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0;
  margin-bottom: 10px;
  background: #fff;
  overflow: hidden;
  transition: box-shadow .15s;
}
.cert-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.cert-card-header {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 14px 8px;
  font-size: 13px;
  border-bottom: 1px solid #f1f5f9;
}
.cert-card-header strong { color: #0f172a; font-size: 14px; font-weight: 700; }
.cert-card-body {
  display: flex;
  gap: 20px;
  font-size: 12px;
  color: #64748b;
  flex-wrap: wrap;
  padding: 8px 14px 10px;
  align-items: center;
}
.cert-card-body span { display: flex; align-items: center; gap: 4px; }
.cert-card-actions {
  display: flex;
  gap: 8px;
  padding: 0 14px 10px;
}
.cert-expiry-ok   { color: #16a34a; font-weight: 600; }
.cert-expiry-soon { color: #d97706; font-weight: 600; }
.cert-expiry-exp  { color: #dc2626; font-weight: 600; }
.cert-notes { font-style: italic; color: #9e9e9e; }

.audit-row {
  display: grid;
  grid-template-columns: 120px 80px 120px 100px 100px;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.audit-id { font-family: monospace; font-size: 11px; color: var(--slate); }

.invoice-row {
  display: grid;
  grid-template-columns: 120px 100px 100px 120px;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.invoice-id { font-family: monospace; font-size: 11px; color: var(--slate); }

.panel-loading {
  padding: 40px;
  text-align: center;
  color: var(--slate);
  font-size: 14px;
}
.panel-error {
  padding: 40px;
  text-align: center;
  color: #c62828;
  font-size: 14px;
}
#dash-jd-body { display: none; }
.card:has(#dash-jd-body) { overflow: hidden; }

/* ========== OFFICE CALENDAR ========== */
#calendar-container { max-width: 960px; margin: 0 auto; }
.cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.cal-month-title { font-size:1.5rem; font-weight:700; color:#0f172a; letter-spacing:-0.3px; }
.cal-nav-btn { background:#f1f5f9; border:1px solid #e2e8f0; border-radius:8px; padding:7px 18px; cursor:pointer; font-size:1rem; color:#334155; font-weight:600; transition:all 0.15s; }
.cal-nav-btn:hover { background:#1e293b; color:#fff; border-color:#1e293b; }
.cal-legend { display:flex; align-items:center; gap:16px; margin-bottom:20px; flex-wrap:wrap; font-size:0.82rem; color:#64748b; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:10px 16px; }
.cal-legend span { vertical-align:middle; }
.cal-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.cal-day-header { text-align:center; font-size:0.72rem; font-weight:700; color:#94a3b8; padding:10px 0 8px; text-transform:uppercase; letter-spacing:0.08em; }
.cal-cell { background:#ffffff; border:1px solid #e2e8f0; border-radius:10px; min-height:72px; padding:8px 10px; cursor:pointer; transition:all 0.15s; }
.cal-cell:hover { background:#f0f4ff; border-color:#93c5fd; box-shadow:0 2px 8px rgba(59,130,246,0.1); }
.cal-cell-empty { background:transparent !important; border-color:transparent !important; cursor:default; min-height:72px; }
.cal-cell-weekend { background:#f8fafc !important; }
.cal-cell-weekend:hover { background:#eff6ff !important; }
.cal-cell-today { border-color:#3b82f6 !important; background:#eff6ff !important; box-shadow:0 0 0 2px rgba(59,130,246,0.15) !important; }
.cal-cell-today .cal-day-num { color:#3b82f6; font-weight:800; }
.cal-day-num { font-size:1rem; font-weight:700; color:#1e293b; display:block; margin-bottom:6px; }
.cal-dots { display:flex; gap:3px; flex-wrap:wrap; margin-top:4px; }
.cal-dot { display:inline-block; width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.cal-dot-audit { background:#1565c0; }
.cal-dot-meeting { background:#e65100; }
.cal-dot-training { background:#2e7d32; }
.cal-dot-holiday { background:#f59e0b; }
.cal-dot-note { background:#94a3b8; }
.cal-tag { display:inline-block; font-size:10px; font-weight:600; padding:1px 6px; border-radius:99px; white-space:nowrap; line-height:1.6; }
.cal-tag-audit    { background:#dbeafe; color:#1565c0; }
.cal-tag-meeting  { background:#ffedd5; color:#c2410c; }
.cal-tag-training { background:#dcfce7; color:#15803d; }
.cal-tag-holiday  { background:#fef3c7; color:#b45309; }
.cal-tag-note     { background:#f1f5f9; color:#64748b; }
.cal-tag-personal { background:#fdf4ff; color:#9333ea; }
.cal-loading { padding:60px 20px; text-align:center; color:#94a3b8; font-size:0.95rem; }

/* Mini calendar widget (personal dashboard) */
.cal-mini-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-mini-dow  { text-align:center; font-size:0.68rem; font-weight:700; color:var(--text-muted,#8a97b1); padding:4px 0; text-transform:uppercase; }
.cal-mini-empty { min-height:32px; }
.cal-mini-cell { text-align:center; min-height:32px; padding:2px 1px; border-radius:5px; background:transparent; }
.cal-mini-today .cal-mini-num { background:var(--primary,#4f6ef7); color:#fff; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; font-weight:700; }
.cal-mini-num  { font-size:0.78rem; font-weight:500; color:var(--text-primary); display:block; line-height:1.6; }

/* ── Shared Date Range Picker (drp.js) ─────────────────────── */
.drp-cell {
  width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  font-size:12px; cursor:pointer; border-radius:0; transition:background 0.08s;
  color:#374151; user-select:none; position:relative; z-index:1;
  background:transparent;
}
/* Default hover — soft circle shadow */
.drp-cell:not(.drp-empty):not(.drp-selected):not(.drp-in-range):not(.drp-preview):not(.drp-preview-end):hover {
  background: radial-gradient(circle 13px at 50% 50%, #e5e7eb 100%, transparent 0);
}
/* In-range — full-width light strip */
.drp-cell.drp-in-range { background:#dcfce7; border-radius:0; color:#166534; }
/* All selected endpoints share white bold text */
.drp-cell.drp-selected { color:#fff; font-weight:700; border-radius:0; }
/* Solo selection — plain circle, no band */
.drp-cell.drp-selected.drp-range-solo {
  background: radial-gradient(circle 13px at 50% 50%, #16a34a 100%, transparent 0);
}
/* Range-start — circle + right-half band leading into in-range */
.drp-cell.drp-selected.drp-range-start {
  background:
    radial-gradient(circle 13px at 50% 50%, #16a34a 100%, transparent 0),
    linear-gradient(to right, transparent 50%, #dcfce7 50%);
}
/* Range-end — circle + left-half band connecting from in-range */
.drp-cell.drp-selected.drp-range-end {
  background:
    radial-gradient(circle 13px at 50% 50%, #16a34a 100%, transparent 0),
    linear-gradient(to left, transparent 50%, #dcfce7 50%);
}
/* Today ring (when not selected) */
.drp-cell.drp-today:not(.drp-selected)::after {
  content:''; position:absolute; width:26px; height:26px; border-radius:50%;
  box-shadow:inset 0 0 0 1.5px #16a34a;
  top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none;
}
/* Empty cells */
.drp-cell.drp-empty, .drp-cell.drp-empty:hover { background:transparent; cursor:default; }

/* ── Preview range (hover before second click) ── */
/* In-between preview cells — faint strip */
.drp-cell.drp-preview { background:#f0fdf4; color:#166534; border-radius:0; }
/* Hovered potential end date — soft circle + left half-band */
.drp-cell.drp-preview-end {
  background:
    radial-gradient(circle 13px at 50% 50%, #86efac 100%, transparent 0),
    linear-gradient(to left, transparent 50%, #f0fdf4 50%);
  color:#15803d; font-weight:600; border-radius:0;
}
/* Start cell when hovering right of it — circle + right-half preview band */
.drp-cell.drp-selected.drp-preview-start-r {
  background:
    radial-gradient(circle 13px at 50% 50%, #16a34a 100%, transparent 0),
    linear-gradient(to right, transparent 50%, #f0fdf4 50%);
}
/* Start cell when hovering left of it — circle + left-half preview band */
.drp-cell.drp-selected.drp-preview-start-l {
  background:
    radial-gradient(circle 13px at 50% 50%, #16a34a 100%, transparent 0),
    linear-gradient(to left, transparent 50%, #f0fdf4 50%);
}
.cal-mini-dots { display:flex; justify-content:center; gap:2px; margin-top:1px; }

/* ── Staff Performance Dashboard (Session 105) ──────────── */
.sp-header {
  padding: 14px 20px 10px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.sp-top-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.sp-period-tabs {
  display: flex;
  gap: 3px;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 8px;
}
.sp-period-btn {
  border: none;
  background: transparent;
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  color: #64748b;
  font-weight: 500;
  transition: all 0.15s;
}
.sp-period-btn.active {
  background: #fff;
  color: #1e293b;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.sp-drp-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  color: #374151;
  white-space: nowrap;
  transition: border-color 0.15s;
}
.sp-drp-btn:hover { border-color: #16a34a; }
.sp-drp-label-text { color: #6b7280; }
.sp-dept-select {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 13px;
  color: #374151;
  background: #fff;
}
.sp-period-label {
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
}

/* Dept section */
.sp-dept-section { margin: 18px 20px 4px; }
.sp-dept-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  margin-bottom: 10px;
  background: #f8fafc;
  border-radius: 4px;
}
.sp-dept-name  { font-weight: 700; font-size: 14px; color: #1e293b; }
.sp-dept-count { font-size: 12px; color: #94a3b8; }

/* Cards grid */
.sp-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

/* Card */
.sp-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-top: 3px solid var(--sp-color, #64748b);
  border-radius: 8px;
  padding: 13px 14px;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sp-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
.sp-card.sp-card-muted { opacity: 0.65; }
.sp-card-top {
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 9px;
}
.sp-emp-name  { font-weight: 700; font-size: 13px; color: #1e293b; line-height: 1.3; }
.sp-emp-desig { font-size: 11px; color: #64748b; margin-top: 2px; }

/* Metrics */
.sp-metrics-section { display: flex; flex-direction: column; gap: 3px; }
.sp-metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.sp-metric-label { color: #64748b; }
.sp-metric-val   { font-weight: 700; min-width: 22px; text-align: right; }
.sp-mv-hi   { color: #16a34a; font-size: 14px; }
.sp-mv-pos  { color: #2563eb; }
.sp-mv-zero { color: #cbd5e1; }

/* Grade badges */
.sp-grade-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 3px;
}
.sp-grade-a { background: #dcfce7; color: #15803d; }
.sp-grade-b { background: #dbeafe; color: #1d4ed8; }
.sp-grade-c { background: #fef9c3; color: #a16207; }
.sp-grade-d { background: #fed7aa; color: #c2410c; }
.sp-grade-f { background: #fecdd3; color: #be123c; }
.sp-grades-row { margin-top: 4px; }

/* Card footer */
.sp-card-footer {
  border-top: 1px solid #f1f5f9;
  padding-top: 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sp-attn-row  { display: flex; gap: 10px; font-size: 12px; align-items: center; }
.sp-attn-none { color: #cbd5e1; font-style: italic; font-size: 11px; }
.sp-attn-p { color: #16a34a; font-weight: 600; }
.sp-attn-l { color: #d97706; font-weight: 600; }
.sp-attn-a { color: #dc2626; font-weight: 600; }
.sp-tasks-row  { font-size: 12px; font-weight: 600; }
.sp-tasks-none { color: #94a3b8; }
.sp-tasks-good { color: #16a34a; }
.sp-tasks-mid  { color: #d97706; }
.sp-tasks-low  { color: #dc2626; }

/* States */
.sp-loading, .sp-error, .sp-empty {
  text-align: center;
  padding: 48px 20px;
  color: #94a3b8;
  font-size: 14px;
}
.sp-error { color: #dc2626; }

/* Detail modal */
.sp-detail-box {
  background: #fff;
  border-radius: 12px;
  width: 820px;
  max-width: 95vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.sp-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 24px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.sp-detail-title  { font-size: 17px; font-weight: 700; color: #1e293b; }
.sp-detail-period { font-size: 12px; color: #94a3b8; margin-top: 3px; }
.sp-close-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: #64748b;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
}
.sp-close-btn:hover { background: #f1f5f9; }
.sp-detail-body   { overflow-y: auto; padding: 20px 24px; flex: 1; }
.sp-detail-section { margin-bottom: 22px; }
.sp-detail-sh {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 2px solid #e2e8f0;
}
.sp-dtable { width: 100%; border-collapse: collapse; font-size: 12px; }
.sp-dtable th {
  text-align: left;
  padding: 6px 10px;
  background: #f8fafc;
  color: #64748b;
  font-weight: 600;
  border-bottom: 1px solid #e2e8f0;
}
.sp-dtable td {
  padding: 7px 10px;
  border-bottom: 1px solid #f1f5f9;
  color: #374151;
}
.sp-dtable tr:hover td { background: #f8fafc; }
.sp-sbadge {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  background: #f1f5f9;
  border-radius: 10px;
  color: #475569;
}
/* Attendance badges inside detail table */
.sp-attn-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.sp-ab-present { background: #dcfce7; color: #15803d; }
.sp-ab-late    { background: #fef9c3; color: #a16207; }
.sp-ab-absent  { background: #fee2e2; color: #b91c1c; }
/* ── Return-to-row highlight flash (strong, two amber pulses + inner ring) ── */
@keyframes ceresRowFlash {
  0%   { background-color: #fef3a8; box-shadow: inset 0 0 0 2px #fde68a; }
  100% { background-color: transparent; box-shadow: inset 0 0 0 0 rgba(0,0,0,0); }
}
.ceres-row-flash { animation: ceresRowFlash 1.9s ease-out; border-radius: 6px; }

/* While any modal is open, hide the fixed sticky table-header clones + h-scroll
   bar so they don't show flush against / behind the modal (they're page chrome). */
body.modal-open [id$="-sticky-clone"],
body.modal-open #sticky-hscroll { display: none !important; }

/* Topbar Refresh button — spins its icon while the active module reloads (reuses @keyframes spin) */
#topbar-refresh-btn.refreshing { pointer-events: none; opacity: .85; }
#topbar-refresh-btn.refreshing .tb-refresh-icon { animation: spin 0.7s linear infinite; transform-origin: 50% 50%; }

/* ── Input-TC ledger tables — calm, uniform numeric grid ──────────────────────
   Scoped to #itc-table so the other .data-table modules (clients / payroll /
   statutory / mushak) are untouched. The value cells used to carry inline
   per-column colors + bold; those are removed in js/input-tc-balance.js so these
   rules take effect: one slate colour, one weight, tabular digits that align. */
#itc-table td          { color: #334155; font-weight: 400; font-variant-numeric: tabular-nums; }
#itc-table td.itc-key  { font-weight: 600; }          /* client name / TC number — the row's anchor */
#itc-table td.itc-flag { color: #b04a4a; }            /* restrained cue: zero balance / exhausted */
/* Header row: tighter letter-spacing + no stray wrapping keeps multi-word labels to
   their intended 2 lines (was spilling to 3–4), and less vertical padding makes the
   dark bar shorter. Scoped to #itc-table so other module headers are untouched. */
#itc-table thead th {
  white-space: nowrap; letter-spacing: .3px; line-height: 1.2;
  padding-top: 6px; padding-bottom: 6px; vertical-align: middle;
}
/* Facility-tag cell: an assigned unit shows as a calm static chip with a small "change"
   link (no permanent cramped native <select>); unassigned rows keep the dropdown, which
   gets extra right padding so its native caret isn't jammed against a long name. */
#itc-table .itc-fac-chip {
  display: inline-block; max-width: 148px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: middle;
  background: #ecfdf5; color: #0f766e; border: 1px solid #a7f3d0;
  border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 600;
}
#itc-table .itc-fac-change {
  margin-left: 6px; padding: 0; border: 0; background: none;
  color: #94a3b8; font-size: 11px; cursor: pointer; text-decoration: underline;
}
#itc-table .itc-fac-change:hover { color: #0f766e; }
#itc-table .itc-fac-select {
  max-width: 170px; font-size: 12px; padding: 4px 26px 4px 8px;
  border-radius: 6px; border: 1px solid #cbd5e1; cursor: pointer;
}

/* ── Notebook (My Notes / Team Board): full-width rich composer, masonry board,
   collapsible long notes ──────────────────────────────────────────────────── */
.nb-masonry { column-width: 235px; column-gap: 14px; }
.nb-note {
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  display: inline-block; width: 100%; margin: 0 0 14px;
  border-radius: 10px; padding: 12px 13px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.nb-note .nb-rich { font-size: 12.7px; color: #1f2937; line-height: 1.55; word-break: break-word; }
.nb-rich ul, .nb-rich ol { margin: 5px 0; padding-left: 22px; }
.nb-rich li { margin: 2px 0; }
.nb-rich b, .nb-rich strong { font-weight: 700; }
/* Collapsed long note: clamp height with a soft fade at the bottom. */
.nb-body-wrap.nb-clamped {
  max-height: 210px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
.nb-more {
  margin-top: 6px; padding: 0; border: 0; background: none;
  color: #1e293b; font-size: 12px; font-weight: 700; cursor: pointer; opacity: .75;
}
.nb-more:hover { opacity: 1; text-decoration: underline; }
/* Full-width composer + rich editor */
.nb-composer { border-radius: 10px; padding: 11px 12px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.nb-toolbar { display: flex; align-items: center; gap: 4px; margin-bottom: 9px; flex-wrap: wrap; }
.nb-tool {
  min-width: 30px; height: 29px; padding: 0 8px; border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.7); border-radius: 6px; font-size: 13px; color: #334155; cursor: pointer;
}
.nb-tool:hover { background: #fff; }
.nb-tool-sep { width: 1px; height: 18px; background: rgba(0,0,0,0.12); margin: 0 5px; }
.nb-editor {
  min-height: 150px; background: rgba(255,255,255,0.62); border-radius: 6px;
  padding: 10px 11px; font-size: 13px; color: #1f2937; line-height: 1.55;
  outline: none; overflow-y: auto; resize: vertical;
}
.nb-editor:empty:before { content: attr(data-placeholder); color: #94a3b8; }
.nb-editor ul, .nb-editor ol { margin: 5px 0; padding-left: 22px; }

/* Asset Register "By Category" side panel: same look as the main register table (dark
   flush header, hairline rows, shared hover) but with padding scaled down so all four
   columns fit the narrow sidebar without a horizontal scrollbar. */
.acc-cat-table th, .acc-cat-table td { padding: 10px 12px; font-size: 12.5px; }
.acc-cat-table th { font-size: 10px; }
.acc-cat-table th:first-child, .acc-cat-table td:first-child { padding-left: 14px; }
.acc-cat-table th:last-child, .acc-cat-table td:last-child { padding-right: 14px; }

/* ── My Dashboard (classic view) — no card may widen the page ──────────────
   A plain `1fr` track is really minmax(auto,1fr): one wide, non-wrapping table
   (My Audits has min-width:2400px) grew the right column to 2400px and pushed
   the whole dashboard off the right edge. The grid now uses minmax(0,1fr) and
   every card is allowed to be narrower than its content, so wide tables scroll
   inside their own overflow-x:auto wrapper instead of stretching the page. */
#my-dash-grid > .card { min-width: 0; max-width: 100%; }