/* =============================================================================
   BIZCORE PLATFORM — Design System Stylesheet
   bizcore.css

   Version:  1.0.0
   Date:     March 2026
   Status:   Active — Development

   Description:
     The single source of truth for all BizCore UI styling. Every role-based
     application (Admin, Finance, HR, Operations, Staff, Client Portal, Supplier
     Portal) links to this file. Page-specific and screen-specific styles are
     added in separate per-page stylesheets that import or follow this file.

   Reference document:
     BizCore UI Design Standard v1.0 — March 2026

   Usage:
     <link rel="stylesheet" href="bizcore.css">
     Page-specific styles go in a separate <style> block or linked sheet.

   Table of Contents:
     1.  Design Tokens (CSS Custom Properties)
         1a. Brand Palette
         1b. Neutral Palette
         1c. Semantic Colours
         1d. Shell Variables (theme-aware)
         1e. Elevation (Shadows)
         1f. Spacing Scale
         1g. Border Radius
         1h. Transitions
     2.  Dark Mode Token Overrides
     3.  Reset & Base
     4.  Shell Layout
         4a. Shell Grid
         4b. Header
         4c. Sidebar & Navigation
         4d. Page Container (Main)
         4e. Footer
     5.  Breadcrumb
     6.  Page Header
     7.  Buttons
     8.  Badges / Status Labels
     9.  Form Controls
    10.  Data Tables
    11.  Cards & Panels
    12.  KPI Cards (Dashboard)
    13.  Dashboard Layouts
    14.  Attention Panel
    15.  Notification Drawer (Slide-Over)
    16.  Modals
    17.  Chart Legend
    18.  Utility Classes
    19.  Animations
    20.  Responsive Breakpoints
    21.  Accessibility

   Changelog:
     1.0.0 — March 2026
       • Initial extraction from bizcore_sample.html
       • Added Table of Contents and section headers
       • Added stubs for: Form Controls, Modals, Split-Pane, Kanban, Wizard
       • Organised into 21 sections for maintainability

   Planned additions (add as app specs are built):
     • Split-Pane layout (Section stub ready at end of file)
     • Form Wizard step indicator
     • Kanban / pipeline board
     • Calendar view component
     • Pagination component
     • Toast / snack-bar notifications
     • Skeleton loading states
     • Print styles
============================================================================= */


/* =============================================================================
   1. DESIGN TOKENS — Light Mode (Default)
============================================================================= */

:root {

  /* ── 1a. Brand Palette — BizCore Meridian ─────────────────────────────── */
  /* Primary #1E40AF · Secondary #475569 · Tertiary #0D9488 · Neutral #F8FAFC */
  --brand-900: #1E3A8A;   /* Darkest — header pressed, very dark contexts */
  --brand-800: #1E40AF;   /* Meridian Primary — header background */
  --brand-700: #1D4ED8;   /* Button hover */
  --brand-500: #2563EB;   /* Primary interactive — buttons, links, active states */
  --brand-400: #3B82F6;   /* Lighter accents */
  --brand-300: #93C5FD;   /* Dark mode active nav text */
  --brand-100: #DBEAFE;   /* Selected row bg, active nav bg (light) */
  --brand-50:  #EFF6FF;   /* Subtle tint — active nav bg, hover states */

  /* Tertiary — Teal (Meridian accent) */
  --teal-700:  #0F766E;   /* Teal hover / pressed */
  --teal-600:  #0D9488;   /* Meridian Tertiary — KPI accents, action highlights */
  --teal-100:  #CCFBF1;   /* Teal tint — badge bg */

  /* Secondary — Slate */
  --slate-600: #475569;   /* Meridian Secondary — secondary text, nav items */
  --slate-500: #64748B;   /* Muted text */
  --slate-400: #94A3B8;   /* Disabled, very muted */
  --slate-200: #E2E8F0;   /* Borders */
  --slate-100: #F1F5F9;   /* Row stripe, sidebar */
  --slate-50:  #F8FAFC;   /* Page canvas — Meridian Neutral */

  /* ── 1b. Neutral Palette (legacy aliases — kept for compatibility) ──────── */
  --neutral-900: #0F172A;
  --neutral-700: #334155;
  --neutral-500: #64748B;
  --neutral-400: #94A3B8;
  --neutral-200: #E2E8F0;
  --neutral-100: #F1F5F9;
  --neutral-50:  #F8FAFC;

  /* ── 1c. Semantic Colours ─────────────────────────────────────────────── */
  --success:     #059669;  /* Emerald 600 — Paid, Completed, Approved */
  --success-bg:  #D1FAE5;  /* Emerald tint */
  --warning:     #D97706;  /* Amber 600 — Pending, Draft, Expiring */
  --warning-bg:  #FEF3C7;  /* Amber tint */
  --error:       #DC2626;  /* Red 600 — Overdue, Rejected, Failed */
  --error-bg:    #FEE2E2;  /* Red tint */
  --info:        #1E40AF;  /* Brand — Active, Open, In Progress */
  --info-bg:     #DBEAFE;  /* Brand tint */

  /* ── 1d. Shell Variables (theme-aware) ────────────────────────────────── */
  --header-bg:          #1E40AF;  /* Meridian Primary — never inverted */
  --sidebar-bg:         #FFFFFF;
  --sidebar-border:     #E2E8F0;
  --page-bg:            #F8FAFC;  /* Meridian Neutral */
  --card-bg:            #FFFFFF;
  --card-border:        #E2E8F0;
  --text-primary:       #0F172A;
  --text-secondary:     #475569;  /* Meridian Secondary */
  --text-muted:         #64748B;
  --border:             #E2E8F0;
  --row-stripe:         #F8FAFC;
  --active-nav-bg:      #EFF6FF;  /* Brand 50 */
  --active-nav-border:  #1E40AF;  /* Brand 800 */

  /* ── 1e. Elevation (Shadows) ──────────────────────────────────────────── */
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.08);    /* Cards, panels */
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.12);   /* Dropdowns, popovers, sticky header */
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.16);   /* Modals, drawers */

  /* ── 1f. Spacing Scale (base 4px) ────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;

  /* ── 1g. Border Radius ────────────────────────────────────────────────── */
  --radius-sm: 6px;   /* Buttons, badges, inputs, tags */
  --radius-md: 8px;   /* Cards, panels */
  --radius-lg: 12px;  /* Modals, drawers */
  --radius-xl: 20px;  /* User menu pill, large pills */

  /* ── 1h. Transitions ──────────────────────────────────────────────────── */
  --transition:      200ms ease;
  --transition-slow: 350ms ease;
}


/* =============================================================================
   2. DARK MODE — Token Overrides
   Only shell variables change. Brand and semantic colours remain identical.
============================================================================= */

[data-theme="dark"] {
  --header-bg:          #1E3A8A;  /* Slightly darker in dark mode */
  --sidebar-bg:         #1E293B;  /* Slate 800 */
  --sidebar-border:     #334155;  /* Slate 700 */
  --page-bg:            #0F172A;  /* Slate 900 */
  --card-bg:            #1E293B;  /* Slate 800 */
  --card-border:        #334155;  /* Slate 700 */
  --text-primary:       #F1F5F9;  /* Slate 100 */
  --text-secondary:     #CBD5E1;  /* Slate 300 */
  --text-muted:         #94A3B8;  /* Slate 400 */
  --border:             #334155;  /* Slate 700 */
  --row-stripe:         #0F172A;  /* Slate 900 */
  --active-nav-bg:      rgba(30, 64, 175, 0.25);
  --active-nav-border:  #60A5FA;  /* Brand 400 — lighter for dark bg */
}

/* Dark mode badge adjustments — soften on dark backgrounds */
[data-theme="dark"] .badge-blue  { background: rgba(37, 99, 235, 0.2);  color: #93C5FD; }
[data-theme="dark"] .badge-green { background: rgba(22, 163, 74, 0.2);  color: #86EFAC; }
[data-theme="dark"] .badge-amber { background: rgba(217, 119, 6, 0.2);  color: #FCD34D; }
[data-theme="dark"] .badge-red   { background: rgba(220, 38, 38, 0.2);  color: #FCA5A5; }
[data-theme="dark"] .badge-grey  { background: rgba(107, 114, 128, 0.15); color: #9CA3AF; }

/* Dark mode table hover */
[data-theme="dark"] .data-table tbody tr:hover { background: rgba(37, 99, 235, 0.1); }

/* Dark mode active nav text */
[data-theme="dark"] .nav-item.active { color: var(--brand-300); }


/* =============================================================================
   3. RESET & BASE
============================================================================= */

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

html,
body {
  height: 100%;
  overflow: hidden;  /* Scroll is contained within .main and .card-scroll-body */
}

html {
  -webkit-text-size-adjust: 100%;
}

/* Google Fonts: add to <head> → Manrope:wght@400;500;600;700;800 + Inter:wght@400;500;600 */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--page-bg);
  /* Smooth theme transition — applied to body so all children inherit */
  transition: background var(--transition), color var(--transition);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--brand-500);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

img, svg { display: block; }
svg { display: inline-block; vertical-align: middle; }

button { font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; }


/* =============================================================================
   4. SHELL LAYOUT
============================================================================= */

/* ── 4a. Shell Grid ──────────────────────────────────────────────────────── */
.shell {
  display: grid;
  grid-template-rows: 56px 1fr 40px;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  height: 100vh;          /* Fixed to viewport — shell never grows */
  overflow: hidden;        /* Children manage their own scroll */
  /* Full viewport width — no max-width */
}


/* ── 4b. Header ──────────────────────────────────────────────────────────── */
.header {
  grid-area: header;
  background: var(--header-bg);  /* --header-bg: #1E40AF — Meridian Primary */
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  gap: var(--space-6);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-2);
}

.header-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  flex-shrink: 0;
}
.header-logo:hover { text-decoration: none; }

.logo-mark {
  width: 30px;
  height: 30px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: white;
  letter-spacing: -0.5px;
  flex-shrink: 0;
}

.logo-text {
  font-weight: 700;
  font-size: 16px;
  color: white;
  letter-spacing: -0.3px;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.header-nav-item {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: all var(--transition);
  border-bottom: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}
.header-nav-item:hover         { color: white; background: rgba(255, 255, 255, 0.1); text-decoration: none; }
.header-nav-item.active        { color: white; border-bottom-color: white; }
.header-nav-item.active:hover  { background: transparent; }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
  flex-shrink: 0;
}

/* Circular icon buttons in header (bell, theme toggle, etc.) */
.header-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  transition: background var(--transition);
  position: relative;
  flex-shrink: 0;
}
.header-btn:hover { background: rgba(255, 255, 255, 0.2); }
.header-btn:focus-visible {
  outline: 2px solid var(--brand-300);
  outline-offset: 2px;
}

/* ── User menu dropdown ──────────────────────────────────────────────────── */

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 180px;
  margin-top: 4px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  box-shadow: var(--shadow-3);
  z-index: 500;
  overflow: hidden;
}
.user-menu.open .dropdown-menu { display: block; }

.dropdown-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--stripe, #f9fafb);
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.dropdown-avatar {
  width: 32px; height: 32px;
  background: var(--c-primary, #1E40AF);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.dropdown-username {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #111827);
}
.dropdown-divider {
  height: 1px;
  background: var(--border, #e5e7eb);
  margin: 0;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, #111827);
  text-decoration: none;
  transition: background var(--transition);
}
.dropdown-item:hover { background: var(--stripe, #f9fafb); text-decoration: none; }
.dropdown-item--danger { color: var(--error, #DC2626) !important; }
.dropdown-item--danger:hover { background: #FEF2F2; }


/* Notification unread dot */
.notif-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: #EF4444;
  border-radius: 50%;
  border: 1.5px solid var(--header-bg);
  pointer-events: none;
}

/* User menu pill */
.user-menu {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 12px 4px 4px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: background var(--transition);
  flex-shrink: 0;
  position: relative;   /* needed for dropdown positioning */
}
.user-menu:hover { background: rgba(255, 255, 255, 0.2); }

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--teal-600);  /* Meridian Tertiary */
  color: white;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.user-name {
  font-size: 13px;
  font-weight: 500;
  color: white;
}


/* ── 4c. Sidebar & Navigation ────────────────────────────────────────────── */
.sidebar {
  grid-area: sidebar;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);  /* var(--sidebar-border) = slate-200 in Meridian */
  padding: var(--space-4) 0;
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px - 40px);
  overflow-y: auto;
  overflow-x: hidden;
  transition: background var(--transition), border-color var(--transition);
}

/* Sidebar scrollbar — subtle on webkit */
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.sidebar-section {
  margin-bottom: var(--space-3);
}

.sidebar-section-label {
  padding: 6px var(--space-4) 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  user-select: none;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px var(--space-4);
  margin: 1px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  position: relative;
  border-left: 2px solid transparent;
}
.nav-item:hover {
  background: var(--border);
  color: var(--text-primary);
  text-decoration: none;
}
.nav-item.active {
  background: var(--active-nav-bg);   /* --brand-50: #EFF6FF */
  color: var(--brand-800);            /* Meridian Primary */
  border-left-color: var(--active-nav-border);  /* --brand-800: #1E40AF */
  font-weight: 600;
}
.nav-item:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: -2px;
}

.nav-icon {
  width: 16px;
  height: 16px;
  opacity: 0.65;
  flex-shrink: 0;
  transition: opacity var(--transition);
}
.nav-item:hover .nav-icon  { opacity: 0.9; }
.nav-item.active .nav-icon { opacity: 1; }

/* ── ap-item selected state ──────────────────────────────────────────────── */
.ap-item.selected,
.ap-item--selected {
  background: var(--c-primary, #1E40AF) !important;
  color: #fff !important;
}
.ap-item.selected .ai-title,
.ap-item.selected .ai-ref,
.ap-item.selected .ai-meta,
.ap-item--selected .ai-title,
.ap-item--selected .ai-ref,
.ap-item--selected .ai-meta { color: rgba(255,255,255,0.9) !important; }


/* ── Hamburger / sidebar toggle ─────────────────────────────────────────── */
.header-hamburger {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 6px; border: none;
  background: transparent; color: rgba(255,255,255,0.85);
  cursor: pointer; flex-shrink: 0; margin-right: var(--space-2);
  transition: background var(--transition);
}
.header-hamburger:hover { background: rgba(255,255,255,0.15); }
.header-hamburger .bar {
  display: block; width: 16px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: all 0.25s;
}
.header-hamburger span { display: flex; flex-direction: column; gap: 4px; }

/* Collapsed sidebar state — applied via JS on any screen size */
.shell.sidebar--collapsed {
  grid-template-columns: 56px 1fr;
}
.shell.sidebar--collapsed .sidebar-section-label,
.shell.sidebar--collapsed .nav-item span,
.shell.sidebar--collapsed .nav-badge,
.shell.sidebar--collapsed .logo-text,
.shell.sidebar--collapsed .user-name {
  display: none;
}
.shell.sidebar--collapsed .sidebar { padding: var(--space-3) 0; }
.shell.sidebar--collapsed .nav-item {
  justify-content: center;
  padding: var(--space-3);
  margin: 2px var(--space-1);
}
.shell.sidebar--collapsed .nav-icon { opacity: 0.8; }

/* ===========================================================================
   APP RAIL (25 Sep 2026)

   The module apps move out of the header into a column of their own. A role app's own
   modules are the sidebar; the other apps you can open are a different kind of
   navigation, and a row of them across the header competed with the page title for the
   same strip.

   The shell is a grid, so the rail is a new first column and the areas shift with it.
   Only an app that includes emxml_blkShellAppRail.xml gets this - the rest keep the
   header links, which is why .header-nav is hidden by :has() rather than outright. It
   lives here rather than in bizheart-aurora.css because the rail is wanted in every role
   app, including the ones not yet converted, and those do not load the Aurora sheet.
============================================================================ */

.shell:has(.arail__item) {
  grid-template-columns: 74px 240px 1fr;
  grid-template-areas:
    "header  header  header"
    "arail   sidebar main"
    "footer  footer  footer";
}

/* With the sidebar collapsed the rail keeps its width - it is not the thing being
   collapsed, and letting it shrink put the icons off-centre. The second figure is the
   collapsed sidebar width from .shell.sidebar--collapsed above; keep them the same. */
.shell:has(.arail__item).sidebar--collapsed {
  grid-template-columns: 74px 56px 1fr;
}

.arail {
  grid-area: arail;
  background: var(--ink, #1A1E33);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 10px 8px;
  overflow-y: auto;
  scrollbar-width: none;
}
.arail::-webkit-scrollbar { display: none; }

/* An app with no module apps has an empty appmenu, so the rail renders with no rows.
   Everything above keys off .arail__item rather than .arail for that reason - the grid
   keeps its two columns and this hides the strip, instead of leaving a bare black
   column down the side. */
.arail:not(:has(.arail__item)) { display: none; }

.arail__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 2px;
  border-radius: 10px;
  text-decoration: none;
  color: rgba(255, 255, 255, .72);
  transition: background 140ms, color 140ms;
}
.arail__item:hover { background: rgba(255, 255, 255, .10); color: #fff; }

/* The app you are in. */
.arail__item--on { background: var(--c-primary); color: #fff; }

.arail__ico {
  font-size: 15px;
  line-height: 1;
  height: 18px;
  display: flex;
  align-items: center;
}

/* Named, not just an icon - "which one was the cube?" is a question a rail should not
   ask. A longer name wraps to a second line rather than being cut off: "Purchasi..." and
   "Accounti..." are worse than two short lines. */
.arail__lbl {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: center;
  line-height: 1.15;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* The header's own row of app links, replaced by the rail in the apps that have one -
   but only where the rail is actually showing. Below 767px the rail hides, and an app
   without the phone More sheet (emxml_blkShellBottomNav.xml) has nothing else carrying
   the module apps, so hiding these outright would strand them. Where the sheet IS
   present it lists the apps, so the header row goes. */
@media (min-width: 768px) {
  .shell:has(.arail__item) .header-nav { display: none; }
}
@media (max-width: 767px) {
  .shell:has(.msheet) .header-nav { display: none; }
}

@media (max-width: 767px) {
  /* No rail on a phone: the apps are in the More sheet (or the header links, in an app
     that has no sheet yet), where they can be named properly.

     The grid has to be restated. .shell:has(.arail__item) is more specific than the plain
     .shell mobile rule further down, so without this the phone kept the three column
     desktop grid and squeezed .main into the 1fr left over after 74px + 240px. */
  .shell:has(.arail__item) .arail { display: none; }
  .shell:has(.arail__item),
  .shell:has(.arail__item).sidebar--collapsed {
    grid-template-rows: 56px 1fr;
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main";
  }
}


/* Tooltip on collapsed nav items */
.shell.sidebar--collapsed .nav-item {
  position: relative;
}
.shell.sidebar--collapsed .nav-item::after {
  content: attr(data-label);
  position: absolute; left: 56px; top: 50%;
  transform: translateY(-50%);
  background: var(--text-primary); color: var(--card-bg);
  font-size: 12px; font-weight: 500;
  padding: 4px 10px; border-radius: 5px;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 0.15s;
  z-index: 200;
  box-shadow: var(--shadow-2);
}
.shell.sidebar--collapsed .nav-item:hover::after { opacity: 1; }


/* Pending count badge on nav items */
.nav-badge {
  margin-left: auto;
  background: var(--error);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  line-height: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-badge.amber { background: var(--warning); }
.nav-badge.blue  { background: var(--brand-500); }


/* ── 4d. Page Container (Main) ───────────────────────────────────────────── */
.main {
  grid-area: main;
  overflow-y: auto;        /* Main content area scrolls vertically */
  overflow-x: hidden;
  height: 100%;            /* Fill the grid row — do not grow past it */
  transition: background var(--transition);
}

/* Page content wrapper — provides the padding inside .main */
.page-content {
  padding: var(--space-6) var(--space-8);
}


/* ── 4e. Footer ──────────────────────────────────────────────────────────── */
.footer {
  grid-area: footer;
  background: var(--sidebar-bg);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  gap: var(--space-4);
  font-size: 11px;
  color: var(--text-muted);
  transition: background var(--transition);
}
.footer a { color: var(--text-muted); text-decoration: none; }
.footer a:hover { color: var(--brand-500); }
.footer-right { margin-left: auto; display: flex; gap: var(--space-4); }


/* =============================================================================
   5. BREADCRUMB
============================================================================= */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-500); }
.breadcrumb-sep { opacity: 0.5; user-select: none; }
.breadcrumb-current { color: var(--text-secondary); font-weight: 500; }


/* =============================================================================
   5b. NAV TRAIL — one classable component, two looks
   Base .navtrail renders as a breadcrumb; add .navtrail--tabs for a tab strip.
   Markup (emxml_blkShellNavTrail.xml) never changes — only the container's own
   class does. Driven by %navtrail_class%, defaulting to "navtrail".
============================================================================= */

.navtrail {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
.navtrail__item { display: flex; align-items: center; gap: var(--space-2); }
.navtrail__item:not(:last-child)::after { content: '/'; opacity: 0.5; }
.navtrail__item a { color: var(--text-muted); text-decoration: none; }
.navtrail__item a:hover { color: var(--brand-500); }
.navtrail__item.is-active { color: var(--text-secondary); font-weight: 500; }
.navtrail__item.is-active a { color: inherit; pointer-events: none; }

.navtrail--tabs {
  gap: 0;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-6);
}
.navtrail--tabs .navtrail__item { padding: var(--space-2) var(--space-4); border-bottom: 2px solid transparent; }
.navtrail--tabs .navtrail__item:not(:last-child)::after { content: ''; }
.navtrail--tabs .navtrail__item a { color: var(--text-secondary); }
.navtrail--tabs .navtrail__item.is-active { border-bottom-color: var(--brand-500); }
.navtrail--tabs .navtrail__item.is-active a { color: var(--text-primary); font-weight: 600; }


/* =============================================================================
   6. PAGE HEADER
============================================================================= */

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  line-height: 1.3;
}

.page-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 3px;
}

.page-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Date range toggle group */
.date-range {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
  transition: background var(--transition), border-color var(--transition);
}
.date-range-btn {
  padding: 5px 12px;
  border-radius: 4px;
  border: none;
  background: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}
.date-range-btn:hover       { color: var(--text-primary); background: var(--row-stripe); }
.date-range-btn.active      { background: var(--brand-500); color: white; }


/* =============================================================================
   7. BUTTONS
============================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 8px 16px;        /* Medium (md) — default */
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  user-select: none;
}
.btn:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}
.btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Size variants */
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-lg { padding: 10px 20px; font-size: 14px; }

/* Style variants */
.btn-primary {
  background: var(--brand-500);
  color: white;
  border-color: var(--brand-500);
}
.btn-primary:hover { background: var(--brand-700); border-color: var(--brand-700); text-decoration: none; }

.btn-secondary {
  background: var(--card-bg);
  color: var(--brand-500);
  border-color: var(--brand-500);
}
.btn-secondary:hover { background: var(--brand-100); text-decoration: none; }

.btn-destructive {
  background: var(--error);
  color: white;
  border-color: var(--error);
}
.btn-destructive:hover { background: #B91C1C; border-color: #B91C1C; text-decoration: none; }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--row-stripe); color: var(--text-primary); text-decoration: none; }

.btn-link {
  background: transparent;
  color: var(--brand-500);
  border-color: transparent;
  padding: 0;
}
.btn-link:hover { text-decoration: underline; }

/* Disabled state for all variants */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}


/* =============================================================================
   8. BADGES / STATUS LABELS
============================================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 16px;
  height: 20px;
}

.badge-blue   { background: var(--brand-100);   color: #1D4ED8; }
.badge-green  { background: var(--success-bg);  color: var(--success); }
.badge-amber  { background: var(--warning-bg);  color: var(--warning); }
.badge-red    { background: var(--error-bg);    color: var(--error); }
.badge-grey   { background: var(--neutral-100); color: var(--neutral-500); }
.badge-purple { background: #EDE9FE;            color: #7C3AED; }

[data-theme="dark"] .badge-purple { background: rgba(124, 58, 237, 0.2); color: #C4B5FD; }


/* =============================================================================
   9. FORM CONTROLS
   (Expanded in future releases as form screens are prototyped)
============================================================================= */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
}

.form-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.form-label .required {
  color: var(--error);
  margin-left: 2px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
}
.form-textarea {
  height: auto;
  min-height: 80px;
  padding: var(--space-2) var(--space-3);
  resize: vertical;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--neutral-400); }
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  background: var(--row-stripe);
  color: var(--text-muted);
  cursor: not-allowed;
}

.form-helper {
  font-size: 11px;
  color: var(--text-muted);
}
.form-error {
  font-size: 11px;
  color: var(--error);
  display: flex;
  align-items: center;
  gap: 4px;
}
.form-input.is-error,
.form-select.is-error {
  border-color: var(--error);
}
.form-input.is-error:focus,
.form-select.is-error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}


/* =============================================================================
   10. DATA TABLES
============================================================================= */

.table-wrap {
  overflow-x: auto;
  /* No border-radius here — the parent card provides it */
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table thead th {
  padding: 10px var(--space-4);
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--row-stripe);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  transition: color var(--transition);
}
.data-table thead th:hover { color: var(--text-primary); }
.data-table thead th.no-sort { cursor: default; }
.data-table thead th.no-sort:hover { color: var(--text-muted); }

/* Sort indicator */
.sort-icon { opacity: 0.35; margin-left: 4px; font-style: normal; }
.sort-icon.active { opacity: 1; color: var(--brand-500); }

.data-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.data-table tbody tr:last-child   { border-bottom: none; }
.data-table tbody tr:nth-child(even) { background: var(--row-stripe); }
.data-table tbody tr:hover        { background: var(--brand-100); }

.data-table td {
  padding: 10px var(--space-4);
  color: var(--text-primary);
  vertical-align: middle;
}

/* Monospace reference number */
.ref-code {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-500);
}

/* Row hover-reveal action buttons */
.row-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--transition);
}
.data-table tbody tr:hover .row-actions { opacity: 1; }

.action-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all var(--transition);
}
.action-btn:hover { background: var(--border); color: var(--text-primary); }
.action-btn svg { width: 14px; height: 14px; }

/* Empty state inside table */
/* ===========================================================================
   EMPTY LISTS (Khalid, 27 Sep 2026)

   The engine renders an <emptytable>/<emptylist> as a panel in place of the list, with
   class="bc-empty" unless the block names one. Nothing in either stylesheet styled that
   class, so every empty state that already existed rendered as a bare line of text
   against the left edge of its card - the Inventory batches page is the worked example.

   Centred, with room around it, so an empty list reads as a deliberate answer rather
   than as a card that failed to load.

   It lives here and not in bizheart-aurora.css because the module apps - Inventory,
   Accounting, CRM, Purchasing, Documents - never load that sheet, and they have lists
   too. The Inventory batches page was where this was spotted.
============================================================================ */

.bc-empty,
.table-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 120px;
  padding: 28px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* Inside a card that already has a header, the panel fills what is left of it rather
   than sitting at the top with space underneath. */
.card > .bc-empty,
.csb > .bc-empty,
.card > .table-empty,
.csb > .table-empty { flex: 1 1 auto; }

/* ...and when the list is wrapped for sideways scrolling, the WRAPPER is what the card
   holds, so it has to grow and centre too. Without this the message sat at the top of a
   tall card with the rest of it blank - the Documents dashboard, where every panel is a
   bare .table-wrap (27 Sep 2026). */
.card > .table-wrap:has(> .bc-empty),
.card > .table-wrap:has(> .table-empty),
.csb > .table-wrap:has(> .bc-empty),
.csb > .table-wrap:has(> .table-empty) {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.table-wrap > .bc-empty,
.table-wrap > .table-empty { flex: 1 1 auto; }

/* A second line, where the list says what belongs there as well as that it is empty. */
.bc-empty small,
.table-empty small {
  font-size: 12px;
  opacity: .85;
  max-width: 44ch;
}

.table-empty {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--text-muted);
}
.table-empty-icon  { font-size: 32px; margin-bottom: var(--space-3); }
.table-empty-title { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin-bottom: var(--space-2); }
.table-empty-desc  { font-size: 13px; margin-bottom: var(--space-5); }


/* =============================================================================
   11. CARDS & PANELS
============================================================================= */

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  transition:
    background var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border);
  gap: var(--space-4);
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.card-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.card-body {
  padding: var(--space-5) var(--space-6);
}



/* =============================================================================
   HEIGHT UTILITIES - Viewport-relative sizing
   The platform generates wrapper divs around module content that break
   the flex height chain from .main. These classes use calc() with fixed
   known heights to ensure panels fill the viewport regardless of wrappers.

   Shell fixed heights:
     Header:    56px
     Footer:    40px
     Page hdr:  ~65px
     Filter bar: ~50px
============================================================================ */

/* Split pane fills viewport minus shell chrome */
.split-pane {
  display: grid;
  grid-template-columns: 360px 1fr;
  overflow: hidden;
  width: 100%;
  /* Fill remaining viewport after header + footer + page header */
  height: calc(100dvh - 56px - 40px - 65px);
  min-height: 400px;
}

/* Dashboard fill card - stretches to viewport bottom */  
.card--fill {
  min-height: calc(100dvh - 56px - 40px - 280px);
}

/* Page shell variants using dvh */
.pg-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.pg-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding: 20px 24px;
  width: 100%;
  box-sizing: border-box;
}
.pg-body--split {
  flex: 1;
  overflow: hidden;
  min-height: 0;
  display: flex;
}

/* Mobile overrides */
@media(max-width: 768px) {
  /* The split-pane stacking rules are NOT here. .split-pane is declared a second
     time further down this file, and a media query adds no specificity, so
     anything set here that the later rule also sets is quietly thrown away. They
     live in "Mobile: split-pane stacks", after that second declaration. */
  .card--fill {
    min-height: calc(100dvh - 56px - 40px - 200px);
  }
}

/* Mobile padding override - 1px side margins */
@media(max-width: 768px) {
  .pg-body {
    padding: 16px 8px;
  }
  .page-content, .content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}


.card-footer {
  padding: var(--space-3) var(--space-6);
  border-top: 1px solid var(--border);
}

/* Divider inside content areas */
.divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-6) 0;
  border: none;
}

/* Section header (within a card or page) */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  gap: var(--space-4);
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}


/* =============================================================================
   12. KPI CARDS (Dashboard)
============================================================================= */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}

.kpi-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: box-shadow var(--transition), border-color var(--transition);
  position: relative;
  overflow: hidden;
}
.kpi-card:hover {
  box-shadow: var(--shadow-2);
  border-color: var(--brand-300);
}

/* Coloured top accent bar — set --kpi-accent inline */
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--kpi-accent, var(--brand-500));
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.kpi-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.kpi-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
  line-height: 1;
  margin-bottom: var(--space-2);
}

.kpi-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
}
.kpi-trend.up      { color: var(--success); }
.kpi-trend.down    { color: var(--error); }
.kpi-trend.neutral { color: var(--text-muted); }
.kpi-trend svg     { width: 12px; height: 12px; flex-shrink: 0; }

.kpi-period {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 4px;
  font-weight: 400;
}


/* =============================================================================
   13. DASHBOARD LAYOUTS
============================================================================= */

/* Standard 2-column dashboard layout: main chart + side panel */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

/* Chart legend */
.chart-legend {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--text-muted);
}
.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}


/* =============================================================================
   14. REQUIRES ATTENTION PANEL
============================================================================= */

.attention-list {
  display: flex;
  flex-direction: column;
}

.attention-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
  text-decoration: none;
  color: inherit;
}
.attention-item:last-of-type { border-bottom: none; }
.attention-item:hover { background: var(--row-stripe); }

.attention-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

.attention-content {
  flex: 1;
  min-width: 0;
}

.attention-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attention-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.attention-footer {
  padding: var(--space-3) var(--space-6);
  border-top: 1px solid var(--border);
}
.attention-footer a {
  font-size: 13px;
  color: var(--brand-500);
  font-weight: 500;
}


/* =============================================================================
   15. NOTIFICATION DRAWER (Slide-Over)
============================================================================= */

/* Scrim overlay */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.drawer-overlay.open {
  opacity: 1;
  pointer-events: all;
}

/* Drawer panel */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  background: var(--card-bg);
  box-shadow: var(--shadow-3);
  z-index: 201;
  transform: translateX(100%);
  transition: transform 250ms ease-out;
  display: flex;
  flex-direction: column;
}
.drawer.open {
  transform: translateX(0);
}

.drawer-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--card-bg);
  flex-shrink: 0;
}

.drawer-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.drawer-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--row-stripe);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  transition: all var(--transition);
}
.drawer-close:hover { background: var(--border); color: var(--text-primary); }

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) 0;
}

/* Individual notice item */
.notice-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
}
.notice-item:hover { background: var(--row-stripe); }
.notice-item:last-child { border-bottom: none; }

.notice-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
}

.notice-content { flex: 1; min-width: 0; }

/* .notice-item is a flex ROW, built to hold a .notice-icon-wrap beside a .notice-content
   column - the same anatomy as .bc-notice-card. Used without either, its children become
   columns of that row, which is how the HR dashboard's Leave Requests card ended up with
   the name, the dates and the Approve/Reject buttons side by side instead of stacked
   (Khalid, 27 Sep 2026; the third time this shape has gone wrong, after .bc-notice-card
   and .ap-item, so this is a guard rather than a fix to one page).

   An item with no icon and no content column has nothing to sit beside, so it stacks. */
.notice-item:not(:has(> .notice-icon-wrap)):not(:has(> .notice-content)) {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

/* The __ family was used in markup and defined nowhere, so these feeds had no styling at
   all beyond the row above. */
.notice-item__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.notice-item__type   { font-size: 13px; color: var(--text-primary); }
.notice-item__age    { font-size: 11.5px; white-space: nowrap; flex-shrink: 0; }
.notice-item__body   { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.notice-title   { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.notice-body    { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.notice-time    { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* Inline action buttons within a notice */
.notice-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.notice-btn {
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
}
.notice-btn-approve {
  background: var(--success-bg);
  color: var(--success);
}
.notice-btn-approve:hover { background: var(--success); color: white; }

.notice-btn-reject {
  background: var(--error-bg);
  color: var(--error);
}
.notice-btn-reject:hover { background: var(--error); color: white; }


/* =============================================================================
   16. MODALS
   (Stub — expanded when modal-heavy screens are prototyped)
============================================================================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
  padding: var(--space-6);
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.modal {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transform: translateY(8px);
  transition: transform var(--transition);
}
.modal-overlay.open .modal { transform: translateY(0); }

/* Size variants */
.modal-sm { max-width: 400px; }
.modal-md { max-width: 560px; }   /* Default */
.modal-lg { max-width: 720px; }

.modal-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--row-stripe);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.modal-close:hover { background: var(--border); color: var(--text-primary); }

.modal-body {
  padding: var(--space-6);
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-shrink: 0;
}


/* =============================================================================
   17. CHART LEGEND
   (Shared — used on any screen with charts)
============================================================================= */

/* See Section 13 above — .chart-legend and .legend-item are defined there
   alongside the dashboard layout they were designed for. */


/* =============================================================================
   18. UTILITY CLASSES
============================================================================= */

/* Text utilities */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-brand     { color: var(--brand-500); }
.text-success   { color: var(--success); }
.text-warning   { color: var(--warning); }
.text-error     { color: var(--error); }
/* .data-table td, .lt td and .dt td set a colour of their own; keep a colour class on a cell */
table td.text-muted   { color: var(--text-muted); }
table td.text-brand   { color: var(--brand-500); }
table td.text-success { color: var(--success); }
table td.text-warning { color: var(--warning); }
table td.text-error   { color: var(--error); }

.text-sm    { font-size: 12px; }
.text-base  { font-size: 14px; }
.text-lg    { font-size: 16px; }
.text-bold  { font-weight: 600; }
.text-mono  { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 13px; }

/* Display utilities */
.flex         { display: flex; }
.flex-col     { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }

/* Spacing utilities */
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

/* Overflow */
.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Visually hidden (accessible) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* =============================================================================
   19. ANIMATIONS
============================================================================= */

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

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideInRight {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* Apply staggered fade-in to KPI cards */
.kpi-card {
  animation: fadeInUp 300ms ease both;
}
.kpi-card:nth-child(1) { animation-delay:   0ms; }
.kpi-card:nth-child(2) { animation-delay:  60ms; }
.kpi-card:nth-child(3) { animation-delay: 120ms; }
.kpi-card:nth-child(4) { animation-delay: 180ms; }
.kpi-card:nth-child(5) { animation-delay: 240ms; }

/* Cards fade in after KPIs */
.card {
  animation: fadeInUp 300ms ease 200ms both;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* =============================================================================
   20. RESPONSIVE BREAKPOINTS
   Primary target: desktop (1025px+). Tablet and mobile are important for
   portal users and field staff.
============================================================================= */

/* Tablet: 768–1024px */
@media (max-width: 1024px) {
  .shell {
    grid-template-columns: 56px 1fr;  /* Collapsed sidebar */
  }

  .sidebar-section-label,
  .nav-item span,
  .nav-badge,
  .logo-text,
  .user-name {
    display: none;
  }

  .sidebar { padding: var(--space-3) 0; }
  .nav-item { justify-content: center; padding: var(--space-3); margin: 2px var(--space-1); }
  .nav-icon { opacity: 0.8; }

  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .content-grid { grid-template-columns: 1fr; }
}

/* Mobile: < 768px */
@media (max-width: 767px) {
  /* .sidebar--collapsed is also named here on purpose (24 Sep 2026). That rule
     lives outside every media query and, being two classes, out-specifies a bare
     .shell - so tapping the hamburger on a phone put the shell back on a two
     column desktop grid while the areas stayed single column, squeezing .main to
     56px. The state is remembered in localStorage, so it came back on every page
     load afterwards. There is nothing to collapse at this width in any case: the
     sidebar is display:none just below. */
  .shell,
  .shell.sidebar--collapsed {
    grid-template-rows: 56px 1fr;
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main";
  }

  /* Hidden until the hamburger asks for it. The menu is the same <aside> the
     desktop uses - there is no second copy of it to keep in step - shown as a
     drawer over the page rather than a column beside it (24 Sep 2026).
     Before this the hamburger did nothing you could see at this width. */
  .sidebar { display: none; }
  .shell.nav-open .sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 56px;               /* under the header, so the hamburger stays reachable */
    left: 0;
    bottom: 0;
    width: 264px;
    max-width: 82vw;
    height: auto;
    padding: var(--space-3) 0;
    z-index: 90;             /* over the page, under the header (100) and modals */
    overflow-y: auto;
    /* the dimmed page behind it, without a second element to position: a shadow
       is not hit-tested, so a tap out there still reaches the shell */
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45);
  }
  /* the labels are hidden by the collapsed/tablet rules; in a drawer they are the point */
  .shell.nav-open .sidebar .nav-item span,
  .shell.nav-open .sidebar .sidebar-section-label { display: inline; }
  .shell.nav-open .sidebar .nav-item {
    justify-content: flex-start;
    gap: 12px;
    padding: var(--space-3) var(--space-4);
    margin: 2px var(--space-2);
  }

  .footer  { display: none; }

  .main { padding: var(--space-4); }

  .kpi-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .kpi-value { font-size: 22px; }

  .page-header { flex-direction: column; align-items: flex-start; }
  .page-actions { width: 100%; }

  .drawer { width: 100%; }

  .data-table thead { display: none; }
  .data-table tbody tr {
    display: block;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
  }
  .data-table td {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    border: none;
  }
  .data-table td::before {
    content: attr(data-label);
    font-weight: 500;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
}

/* Wide: > 1280px — enforce content max-width */
@media (min-width: 1281px) {
  .main { padding: var(--space-6) var(--space-12); }
}


/* =============================================================================
   21. ACCESSIBILITY
============================================================================= */

/* Global focus ring — Brand 500 outline on all focusable elements */
:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

/* Remove default focus styles (we provide our own) */
:focus:not(:focus-visible) {
  outline: none;
}

/* High contrast mode support */
@media (forced-colors: active) {
  .btn-primary,
  .btn-destructive {
    forced-color-adjust: none;
  }
}




/* =============================================================================
   22. CORE LAYOUT PRINCIPLE — Fixed Chrome, Scrolling Content
   ─────────────────────────────────────────────────────────────────────────────
   This is the fundamental layout rule for the entire BizCore platform.
   It applies at every level: shell, page, card, panel.

   RULE 1 — SHELL
     html, body          → height:100%; overflow:hidden
     .shell              → height:100vh; overflow:hidden  (grid: header/sidebar/main/footer)
     .header, .footer    → fixed height, flex-shrink:0 — NEVER scroll off screen
     .sidebar            → height:100%, overflow-y:auto — scrolls independently if nav is long
     .main               → overflow-y:auto; height:100% — ONLY this scrolls vertically

   RULE 2 — CARDS WITH LISTS OR TABLES
     .card               → display:flex; flex-direction:column; overflow:hidden
                           height set explicitly (fixed px or flex:1 in a flex parent)
     .card-header        → flex-shrink:0 — title + actions, always visible
     .card-body-scroll   → flex:1; overflow-y:auto; min-height:0 — scrolls vertically
     .card-footer        → flex-shrink:0 — totals, pagination, summary — always visible
     Tables inside       → wrapped in .table-wrap for horizontal scroll

   RULE 3 — RESPONSIVE GRIDS — STACK DON'T SQUEEZE
     ALL grids use:  grid-template-columns: repeat(auto-fit, minmax(Xpx, 1fr))
     Never use:      grid-template-columns: repeat(N, 1fr)  — this squeezes on narrow screens
     Minimum widths by content type:
       KPI cards          → minmax(200px, 1fr)
       Summary/value cards→ minmax(260px, 1fr)
       Dashboard panels   → minmax(280px, 1fr)
       Data table cards   → minmax(320px, 1fr)
       Split-pane panes   → minmax(280px, 1fr)
     Result: columns wrap to next row rather than squeezing — naturally mobile-friendly
     with zero media queries needed for the basic stacking behaviour.

   RULE 4 — MINIMUM WIDTHS ON CONTAINERS
     Every card, panel, and pane has a min-width matching its minmax floor.
     This prevents flex/grid parents from squeezing a child below readable width.
     Set min-width:0 on flex children that should be allowed to shrink (e.g. .main,
     text containers) — this overrides the browser default of min-width:auto.
============================================================================= */

/* ── Card — scrollable variant ───────────────────────────────────────────── */
/* Apply .card + explicit height + these inner elements for any list/table card */

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  overflow: hidden;              /* Children manage their own scroll */
  min-width: 0;                  /* Allow flex parent to shrink this card */
}

/* Card header — always visible, never scrolls */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--card-bg);
}
.card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}

/* Card body — scrolls vertically. min-height:0 is CRITICAL for flex children */
.card-body-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}
.card-body-scroll::-webkit-scrollbar { width: 4px; }
.card-body-scroll::-webkit-scrollbar-track { background: transparent; }
.card-body-scroll::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}
.card-body-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Card footer — always visible, never scrolls. Used for totals, pagination */
.card-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--card-bg);
}

/* Static card body — no scroll, just padding (for cards with no list) */
.card-body { padding: var(--space-4) var(--space-5); }

/* ── Fixed height utilities ───────────────────────────────────────────────── */
/* Set on .card to give it a fixed height. Choose based on content density.   */
.card--h-sm   { height: 280px; }
.card--h-md   { height: 380px; }
.card--h-lg   { height: 480px; }   /* Default for dashboard panels */
.card--h-xl   { height: 580px; }   /* Full-page list cards */
.card--h-full { flex: 1; }          /* Fill remaining flex space */


/* =============================================================================
   23. DATA TABLE — SCROLL WRAPPER
   Tables can overflow both vertically (via .card-scroll-body) and
   horizontally (via .table-wrap). This combination handles wide + long tables.
============================================================================= */

/* Always wrap .data-table in this — handles horizontal overflow */
.table-wrap {
  overflow-x: auto;
  overflow-y: visible;           /* Vertical scroll is handled by .card-scroll-body */
  -webkit-overflow-scrolling: touch;
}

/* Horizontal scrollbar — subtle */
.table-wrap::-webkit-scrollbar { height: 5px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

/* Table inside wrap should never shrink below its content width */
.table-wrap .data-table { min-width: 100%; }

/* Sticky column header — stays visible during vertical scroll */
.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--brand-800);  /* Meridian Primary */
  color: #FFFFFF;                /* was the muted grey of the rule above: grey on the brand colour could not be read (18 Sep 2026) */
}
.data-table thead th:hover,
.data-table thead th.no-sort:hover { color: #FFFFFF; opacity: .85; }


/* =============================================================================
   24. GREETING BAR — Meridian
============================================================================= */

.greeting-bar {
  background: #1E293B;           /* Slate 800 — always dark, ignores theme */
  padding: var(--space-5) var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;                /* Never compressed by flex siblings */
}

.greeting-title {
  font-family: 'Manrope', var(--font-heading, sans-serif);
  font-size: 20px;
  font-weight: 700;
  color: #F1F5F9;
  letter-spacing: -0.3px;
}

.greeting-sub {
  font-size: 13px;
  color: #64748B;
  margin-top: 2px;
}

.greeting-actions {
  display: flex;
  gap: var(--space-2);
}

.greeting-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.8);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition);
}
.greeting-btn:hover { background: rgba(255,255,255,0.15); }
.greeting-btn--accent {
  background: var(--teal-600);
  border-color: var(--teal-600);
  color: #fff;
}
.greeting-btn--accent:hover { background: var(--teal-700); }


/* =============================================================================
   25. KPI CARDS — Meridian Operational Variant
============================================================================= */

/* Override existing .kpi-card with Meridian tokens */
.kpi-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.kpi-card:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
  border-color: var(--brand-100);
}

/* Top accent stripe — colour set via --kpi-accent CSS variable */
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--kpi-accent, var(--brand-800));
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Coloured icon box */
.kpi-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--kpi-icon-bg, var(--brand-50));
  color: var(--kpi-accent, var(--brand-800));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

/* KPI value — Manrope for impact */
.kpi-value {
  font-family: 'Manrope', sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
}

/* Trend indicator pills */
.kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 20px;
}
.kpi-trend--up   { color: var(--success); background: var(--success-bg); }
.kpi-trend--down { color: var(--error);   background: var(--error-bg); }
.kpi-trend--warn { color: var(--warning); background: var(--warning-bg); }

/* Accent colour variants */
.kpi-card--blue   { --kpi-accent: var(--brand-800); --kpi-icon-bg: var(--brand-50); }
.kpi-card--teal   { --kpi-accent: var(--teal-600);  --kpi-icon-bg: #F0FDFA; }
.kpi-card--amber  { --kpi-accent: var(--warning);   --kpi-icon-bg: var(--warning-bg); }
.kpi-card--green  { --kpi-accent: var(--success);   --kpi-icon-bg: var(--success-bg); }
.kpi-card--red    { --kpi-accent: var(--error);     --kpi-icon-bg: var(--error-bg); }


/* =============================================================================
   26. TAB BAR — Meridian
============================================================================= */

.tab-bar {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--neutral-100);
  border-radius: var(--radius-sm);
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.tab-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.6); }
.tab-btn.active {
  background: var(--card-bg);
  color: var(--brand-800);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.tab-count {
  background: var(--brand-100);
  color: var(--brand-800);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  font-family: 'Manrope', sans-serif;
}
.tab-btn.active .tab-count {
  background: var(--brand-800);
  color: #fff;
}


/* =============================================================================
   27. NOTICE / FEED ITEMS — Meridian
============================================================================= */

.feed-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
  cursor: pointer;
  position: relative;
}
.feed-item:last-child { border-bottom: none; }
.feed-item:hover { background: var(--neutral-50); }

.feed-item.feed--unread { background: var(--brand-50); }
.feed-item.feed--unread::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--brand-800);
  border-radius: 0 2px 2px 0;
}
.feed-item.feed--urgent::before { background: var(--error); }

.feed-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.feed-body { flex: 1; min-width: 0; }
.feed-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.35;
}
.feed-item.feed--unread .feed-title { font-weight: 600; }
.feed-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; line-height: 1.4; }

.feed-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-1);
}
.feed-time { font-size: 11px; color: var(--text-muted); }
.feed-action {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--brand-800);
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--brand-100);
  background: var(--brand-50);
  transition: background var(--transition);
}
.feed-action:hover { background: var(--brand-100); }


/* =============================================================================
   28. PANEL LIST ITEMS — Meridian (Split-pane left pane, follow-up lists)
============================================================================= */

.panel-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
  position: relative;
}
.panel-list-item:last-child { border-bottom: none; }
.panel-list-item:hover { background: var(--neutral-50); }
.panel-list-item.selected {
  background: var(--brand-50);
  border-left: 3px solid var(--brand-800);
}

.panel-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.panel-item-main { flex: 1; min-width: 0; }
.panel-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.panel-item-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-top: 2px;
}
.panel-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}
.panel-item-time { font-size: 11px; color: var(--text-muted); }
.panel-item-time--overdue { color: var(--error); font-weight: 600; }


/* =============================================================================
   29. SPLIT-PANE LAYOUT
============================================================================= */

.split-pane {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 0;
  height: 100%;
  overflow: hidden;
}

.split-pane__list {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card-bg);
}

.split-pane__list-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.split-pane__list-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.split-pane__detail {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--page-bg);
  padding: var(--space-5);
}

.split-pane__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-12);
}
.split-pane__empty-icon { font-size: 36px; margin-bottom: var(--space-3); opacity: 0.35; }
.split-pane__empty-title { font-weight: 600; font-size: 14px; margin-bottom: var(--space-1); }
.split-pane__empty-sub { font-size: 12.5px; }


/* =============================================================================
   30. DASHBOARD LAYOUT PATTERNS
   All grids use auto-fit + minmax — stacks gracefully on narrow screens.
   Never use repeat(N, 1fr) — that squeezes columns rather than wrapping.
============================================================================= */

/* KPI row — 4 cards desktop, 2x2 tablet, 1 col mobile */
.dash-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

/* Summary/value card pairs (e.g. Won/Lost) */
.dash-summary-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

/* Main content grid — 3 equal panels desktop, stacks on tablet/mobile */
.dash-content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

/* Two-column variant — e.g. list + calendar side by side */
.dash-content-grid--2col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

/* Full-page list card grid — single card taking full width */
.dash-full-width {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}


/* =============================================================================
   31. PROGRESS BAR — for target tracking
============================================================================= */

.progress-track {
  height: 6px;
  background: var(--neutral-100);
  border-radius: 3px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 600ms ease;
}
.progress-bar--green { background: var(--success); }
.progress-bar--amber { background: var(--warning); }
.progress-bar--red   { background: var(--error); }
.progress-bar--blue  { background: var(--brand-800); }
.progress-bar--teal  { background: var(--teal-600); }


/* =============================================================================
   32. EMPTY STATE
============================================================================= */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-8);
  text-align: center;
  color: var(--text-muted);
}
.empty-state__icon  { font-size: 36px; margin-bottom: var(--space-3); opacity: 0.35; }
.empty-state__title { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin-bottom: var(--space-2); }
.empty-state__sub   { font-size: 12.5px; }


/* =============================================================================
   STUBS — updated for Meridian
   (Kanban, Calendar, Pagination, Toast, Skeleton, Print — to be added next)
============================================================================= */


/* =============================================================================
   33. CRM / APP-LEVEL ADDITIONS
   Classes used by block files that extend the core design system.
============================================================================= */

/* Page header strip — above KPI grid in non-dashboard pages */
.pg-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--card-bg);
  flex-shrink: 0;
  gap: 12px;
  flex-wrap: wrap;
}
.pg-title {
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1, var(--text-primary));
  letter-spacing: -.3px;
}
.pg-sub {
  font-size: 12.5px;
  color: var(--text-3, var(--text-muted));
  margin-top: 2px;
}

/* KPI card accent variants — set --kpi-accent and --kpi-icon-bg via class */
/* A row of small stat cards. The class was used in five blocks and styled in none of
   them, so on Inventory's Bins & Zones page five one-number cards each took a full row
   and pushed the lists off the screen (Khalid, 27 Sep 2026). As many across as fit,
   stacking on a phone without needing a breakpoint. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}
.cards > .card { margin-bottom: 0; }
/* A stat card is not a clickable KPI tile - it should not lift or grow a pointer. */
.cards > .card .kpi {
  border: 0;
  background: none;
  box-shadow: none;
  padding: 0;
  cursor: default;
  font-size: 22px;
  font-weight: 700;
}
.cards > .card .kpi:hover { transform: none; box-shadow: none; }
.cards > .card .kpi::before { display: none; }

.kpi { position: relative; overflow: hidden; cursor: pointer;
       background: var(--card-bg); border: 1px solid var(--card-border, var(--border));
       border-radius: 10px; padding: 18px 20px;
       box-shadow: var(--sh1, var(--shadow-1));
       transition: box-shadow 180ms ease, transform 180ms ease; }
.kpi:hover { box-shadow: var(--shadow-2, var(--sh2)); transform: translateY(-2px); }
.kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
               background: var(--kpi-accent, var(--c-primary, #1E40AF));
               border-radius: 10px 10px 0 0; }
.kpi-top  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.kpi-lbl  { font-size: 11.5px; font-weight: 600; font-family: 'Manrope', sans-serif;
            letter-spacing: .04em; color: var(--text-3, var(--text-muted)); text-transform: uppercase; }
.kpi-ico  { width: 32px; height: 32px; border-radius: 6px;
            background: var(--kpi-icon-bg, var(--c-primary-xlight, #EFF6FF));
            color: var(--kpi-accent, var(--c-primary, #1E40AF));
            display: flex; align-items: center; justify-content: center; font-size: 14px; }
.kpi-val  { font-family: 'Manrope', sans-serif; font-size: 30px; font-weight: 800;
            letter-spacing: -1px; color: var(--text-1, var(--text-primary)); line-height: 1; margin-bottom: 8px; }
.kpi-foot { display: flex; align-items: center; gap: 8px; font-size: 12px;
            color: var(--text-3, var(--text-muted)); }
.kpi-trend        { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px;
                    font-weight: 600; padding: 2px 6px; border-radius: 20px; }
.kpi-trend--up    { color: var(--c-success, #059669); background: var(--c-success-bg, #D1FAE5); }
.kpi-trend--down  { color: var(--c-error, #DC2626);   background: var(--c-error-bg, #FEE2E2); }
.kpi-trend--warn  { color: var(--c-warning, #D97706); background: var(--c-warning-bg, #FEF3C7); }

/* KPI colour variants */
.kpi--blue  { --kpi-accent: #1E40AF; --kpi-icon-bg: #EFF6FF; }
.kpi--teal  { --kpi-accent: #0D9488; --kpi-icon-bg: #F0FDFA; }
.kpi--green { --kpi-accent: #059669; --kpi-icon-bg: #D1FAE5; }
.kpi--amber { --kpi-accent: #D97706; --kpi-icon-bg: #FEF3C7; }
.kpi--red   { --kpi-accent: #DC2626; --kpi-icon-bg: #FEE2E2; }

/* Notice feed item classes */
.nf-item--unread { background: var(--c-primary-xlight, #EFF6FF) !important; }
.nf-item--unread::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0;
                            width: 3px; background: var(--c-primary, #1E40AF); border-radius: 0 2px 2px 0; }
.nf-item--urgent::before { background: var(--c-error, #DC2626) !important; }
.nf-time--overdue { color: var(--c-error, #DC2626) !important; font-weight: 600; }
.nf-time--today   { color: var(--c-warning, #D97706) !important; font-weight: 600; }

/* Status dot */
.panel-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Detail card used inside split-pane right pane */
.dc { background: var(--card-bg); border: 1px solid var(--card-border);
      border-radius: 10px; box-shadow: var(--sh1, var(--shadow-1));
      overflow: hidden; margin-bottom: 16px; }
.dc-hdr { padding: 12px 20px; border-bottom: 1px solid var(--border);
          font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 700;
          color: var(--text-1, var(--text-primary)); }
.dc-body { padding: 16px 20px; }
.fg  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fl  { font-size: 11px; font-weight: 600; color: var(--text-3, var(--text-muted));
       text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }
.fv  { font-size: 14px; font-weight: 500; color: var(--text-1, var(--text-primary)); }
.fv-lg { font-family: 'Manrope', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -.5px; }

/* Lines / activity table */
.lt { width: 100%; border-collapse: collapse; font-size: 13px; }
.lt th { background: var(--c-primary, #1E40AF); color: #fff; padding: 9px 14px;
         text-align: left; font-size: 11.5px; font-weight: 600; white-space: nowrap;
         position: sticky; top: 0; z-index: 1; }
.lt td { padding: 9px 14px; border-bottom: 1px solid var(--border);
         color: var(--text-2, var(--text-secondary)); white-space: nowrap; }
.lt tr:nth-child(even) td { background: var(--stripe, var(--row-stripe)); }
.lt tfoot td { border-top: 2px solid var(--border); font-weight: 700;
               font-family: 'Manrope', sans-serif; padding: 9px 14px; }

/* Split-pane layout — used by CRM Leads, Approvals, etc. */
/* split-pane sizing — see HEIGHT UTILITIES section above */
.split-pane-inner { display: contents; }
.ap-list { border-right: 1px solid var(--border); display: flex; flex-direction: column;
           overflow: hidden; background: var(--card-bg);
           flex: 1; min-height: 0;
           height: calc(100dvh - 56px - 40px - 65px); }
.ap-list-hdr { padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--card-bg); }
.ap-list-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  /* Explicit height so scroll works regardless of platform wrapper divs.
     Total fixed heights: header 56 + footer 40 + pg-hdr 65 + ap-list-hdr ~115 = 276px */
  height: calc(100dvh - 56px - 40px - 65px - 115px);
}

/* ap-list-body height variants based on list header content.
   Base calc: 100dvh - 56(header) - 40(footer) - 65(pg-hdr) - Xpx(ap-list-hdr)
   Override with a modifier class on the ap-list element. */

/* Simple search only (~56px header) - contacts, companies, campaigns */
.ap-list--sm .ap-list-body {
  height: calc(100dvh - 56px - 40px - 65px - 56px);
}

/* Search + stage chips (~115px header) - leads */
.ap-list--lg .ap-list-body {
  height: calc(100dvh - 56px - 40px - 65px - 115px);
}

/* No search header - report menu, simple lists */
.ap-list--xs .ap-list-body {
  height: calc(100dvh - 56px - 40px - 65px - 40px);
}

.ap-list-body::-webkit-scrollbar { width: 4px; }
.ap-list-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.ap-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px;
           border-bottom: 1px solid var(--border); cursor: pointer;
           transition: background 180ms ease; position: relative; }

/* ...but never on a table row. .ap-item is the approval-list ITEM pattern; put on a <tr>
   its display:flex takes the cells out of the table's columns, so the headings line up
   with nothing. Six lists had picked it up that way and the fault reads as a rendering
   bug rather than a class in the wrong place, so it kept coming back (27 Sep 2026). */
tr.ap-item { display: table-row; padding: 0; gap: 0; }
tr.ap-item > td { display: table-cell; }
.ap-item:hover { background: var(--stripe, var(--row-stripe)); }
.ap-item.sel { background: var(--c-primary-xlight, #EFF6FF);
               border-left: 3px solid var(--c-primary, #1E40AF); }
.ap-item.urg { border-left: 3px solid var(--c-error, #DC2626); }
.ai-ico { width: 34px; height: 34px; border-radius: 6px; display: flex;
          align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.ai-body { flex: 1; min-width: 0; }
.ai-ref  { font-size: 11px; font-weight: 700; font-family: 'Manrope', sans-serif;
           color: var(--text-3); letter-spacing: .03em; text-transform: uppercase; }
.ai-title { font-size: 13px; font-weight: 500; color: var(--text-1, var(--text-primary));
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-meta  { font-size: 11.5px; color: var(--text-3); margin-top: 2px;
            display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ai-r     { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.ai-val   { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 13px;
            color: var(--text-1); }
.ai-age   { font-size: 11px; color: var(--text-3); }
.ai-age.urg { color: var(--c-error, #DC2626); font-weight: 600; }
.ap-detail { display: flex; flex-direction: column; overflow: hidden;
             background: var(--page-bg); flex: 1; min-height: 0; height: 100%; }
.ap-dhdr   { padding: 20px 24px; background: var(--card-bg);
             border-bottom: 1px solid var(--border); flex-shrink: 0;
             display: flex; align-items: flex-start; justify-content: space-between;
             gap: 16px; flex-wrap: wrap; }
.ap-dscroll { flex: 1; overflow-y: auto; padding: 20px 24px; min-height: 0; height: 0; }
.ap-dscroll::-webkit-scrollbar { width: 4px; }
.ap-dscroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.d-ref   { font-size: 11px; font-weight: 700; font-family: 'Manrope', sans-serif;
           color: var(--text-3); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 4px; }
.d-title { font-family: 'Manrope', sans-serif; font-size: 20px; font-weight: 700;
           color: var(--text-1); letter-spacing: -.3px; }
.d-meta  { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.a-bar   { display: flex; gap: 8px; flex-wrap: wrap; }

/* Empty state */
.split-pane__empty { display: flex; flex-direction: column; align-items: center;
                     justify-content: center; height: 100%; padding: 48px;
                     text-align: center; color: var(--text-3); }
.empty-state__icon  { font-size: 36px; margin-bottom: 12px; opacity: .35; }
.empty-state__title { font-size: 14px; font-weight: 600; font-family: 'Manrope', sans-serif;
                      color: var(--text-2); margin-bottom: 6px; }
.empty-state__sub   { font-size: 12.5px; }

/* Mobile: split-pane stacks.
   This has to sit after the .split-pane declaration just above - same selector,
   same specificity, so the later one wins and a media query counts for nothing.
   !important on the grid because eleven modules set grid-template-columns in a
   style attribute on the element itself, and an inline declaration beats any
   stylesheet rule without it. Both were found on 24 Sep 2026 when the CRM
   Companies list drew over the record below it on a phone. */
@media(max-width: 768px) {
  .split-pane {
    grid-template-columns: 1fr !important;
    /* half each: the list is worth scrolling and so is the record. 280px left the
       list four rows deep and gave the "select a record" placeholder the rest. */
    grid-template-rows: 1fr 1fr !important;
  }

  /* Each pane is a row now, not the full height, so it has to clip - and the list
     inside it has to stop asking for a whole viewport. Without this the list drew
     straight over the pane below. The middle selector is the unclassed wrapper
     <div> the engine puts round a block: it is not a flex child of anything by
     itself, so it has to be told to fill its pane and clip, the same way the
     modal fix at the end of this file tells a form's wrappers to. */
  .split-pane > * { min-height: 0; overflow: hidden; }
  .split-pane > * > * {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .split-pane .ap-list,
  .split-pane .ap-list-body,
  .split-pane .ap-list--xs .ap-list-body,
  .split-pane .ap-list--sm .ap-list-body,
  .split-pane .ap-list--lg .ap-list-body {
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
  }

  .ap-list { border-right: none; border-bottom: 1px solid var(--border); }
  .ap-dhdr { flex-direction: column; }
  .fg { grid-template-columns: 1fr; }
}


/* =============================================================================
   34. SHORTHAND ALIASES
   Short class names used in block files matching prototype HTML conventions.
   These are aliases for the longer class names defined elsewhere in this file.
============================================================================= */

/* Badge shorthands */
.bd   { display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;
        font-size:10.5px;font-weight:600;font-family:'Manrope',sans-serif;white-space:nowrap }
.bd-b { background:var(--c-info-bg,#DBEAFE);    color:var(--c-info,#1E40AF) }
.bd-g { background:var(--c-success-bg,#D1FAE5); color:var(--c-success,#059669) }
.bd-a { background:var(--c-warning-bg,#FEF3C7); color:var(--c-warning,#D97706) }
.bd-r { background:var(--c-error-bg,#FEE2E2);   color:var(--c-error,#DC2626) }
.bd-t { background:var(--c-teal-light,#CCFBF1); color:var(--c-teal-dark,#0F766E) }
.bd-n { background:var(--neutral-1,#F1F5F9);    color:var(--text-3,#64748B) }
/* badge--colour names used by the HR, CS, CRM, Inventory and Purchasing blocks */
.badge--blue  { background:var(--c-info-bg,#DBEAFE);    color:var(--c-info,#1E40AF) }
.badge--green { background:var(--c-success-bg,#D1FAE5); color:var(--c-success,#059669) }
.badge--amber { background:var(--c-warning-bg,#FEF3C7); color:var(--c-warning,#D97706) }
.badge--red   { background:var(--c-error-bg,#FEE2E2);   color:var(--c-error,#DC2626) }
.badge--slate { background:var(--neutral-1,#F1F5F9);    color:var(--text-3,#64748B) }

/* Button shorthands */
.btn-p { background:var(--c-primary,#1E40AF);color:#fff;border-color:var(--c-primary,#1E40AF) }
.btn-p:hover { background:var(--c-primary-hover,#2563EB) }
.btn-s { background:var(--c-success,#059669);color:#fff;border-color:var(--c-success) }
.btn-s:hover { background:#047857 }
.btn-d { background:var(--c-error,#DC2626);color:#fff;border-color:var(--c-error) }
.btn-d:hover { background:#B91C1C }
.btn-g { background:transparent;color:var(--text-2,#475569);border-color:var(--border,#E2E8F0) }
.btn-g:hover { background:var(--neutral-1,#F1F5F9);color:var(--text-1,#0F172A) }

/* Card shorthand — ch=card-header, ct=card-title, csb=card-body-scroll, cf=card-footer */
.ch  { display:flex;align-items:center;justify-content:space-between;
       padding:14px 20px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--card-bg) }
.ct  { font-family:'Manrope',sans-serif;font-size:14px;font-weight:700;
       color:var(--text-1,var(--text-primary));letter-spacing:-.2px }
/* height: 0 is a flex BASIS here, not a height - it only works while .csb is a direct
   flex child of a .card that has a height of its own. Put anything between them (a tab
   pane, a wrapper) and the card collapses to its header and the body disappears, rows
   and all. That has cost four rebuilds; bizheart-aurora.css resets it for the cases
   where a wrapper is unavoidable. */
.csb { flex:1;overflow-y:auto;overflow-x:hidden;min-height:0;height:0 }
.csb::-webkit-scrollbar { width:4px }
.csb::-webkit-scrollbar-thumb { background:var(--border);border-radius:2px }
.cf  { padding:14px 20px;border-top:1px solid var(--border);flex-shrink:0;background:var(--card-bg) }

/* Data table shorthand */
.dt { width:100%;border-collapse:collapse;font-size:13px }
.dt thead th { background:var(--c-primary,#1E40AF);color:#fff;padding:10px 14px;
               text-align:left;font-size:11.5px;font-weight:600;white-space:nowrap;
               position:sticky;top:0;z-index:2;border-right:1px solid rgba(255,255,255,.1) }
.dt thead th:last-child { border-right:none }
.dt tbody tr { cursor:pointer;transition:background 180ms ease }
.dt tbody tr:hover td { background:var(--c-primary-xlight,#EFF6FF)!important }
.dt td { padding:10px 14px;border-bottom:1px solid var(--border);
         color:var(--text-2,#475569);white-space:nowrap;vertical-align:middle }
.dt tr:nth-child(even) td { background:var(--stripe,var(--row-stripe,#F8FAFC)) }

/* Table wrap — horizontal scroll container */
.table-wrap { overflow-x:auto;-webkit-overflow-scrolling:touch }
.table-wrap::-webkit-scrollbar { height:4px }
.table-wrap::-webkit-scrollbar-thumb { background:var(--border);border-radius:2px }

/* Tab bar shorthands — tbar=container, tb=tab button, tc=tab count badge */
.tbar { display:flex;gap:2px;padding:3px;background:var(--neutral-1,#F1F5F9);border-radius:6px }
.tb   { display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:5px;
        font-size:12px;font-weight:500;color:var(--text-3,#64748B);
        background:transparent;border:none;cursor:pointer;transition:all 180ms ease;white-space:nowrap }
.tb:hover { color:var(--text-1);background:rgba(255,255,255,.6) }
.tb.on    { background:var(--card-bg);color:var(--c-primary,#1E40AF);
            font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.08) }
.tc { background:var(--c-primary-light,#DBEAFE);color:var(--c-primary,#1E40AF);
      font-size:10px;font-weight:700;padding:1px 5px;border-radius:10px;
      min-width:18px;text-align:center;font-family:'Manrope',sans-serif }
.tb.on .tc { background:var(--c-primary);color:#fff }

/* Feed / notice item shorthands */
.nf-item  { display:flex;align-items:flex-start;gap:12px;padding:12px 20px;
            border-bottom:1px solid var(--border);transition:background 180ms;
            cursor:pointer;position:relative }
.nf-item:last-child { border-bottom:none }
.nf-item:hover { background:var(--stripe,#F8FAFC) }
.nf-item.unread { background:var(--c-primary-xlight,#EFF6FF) }
.nf-item.unread::before,.nf-item--unread::before
  { content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
    background:var(--c-primary,#1E40AF);border-radius:0 2px 2px 0 }
.nf-item.urgent::before,.nf-item--urgent::before
  { background:var(--c-error,#DC2626) }
.nf-ico   { width:30px;height:30px;border-radius:6px;display:flex;
            align-items:center;justify-content:center;font-size:13px;flex-shrink:0 }
.nf-ico--blue  { background:var(--c-primary-xlight); color:var(--c-primary); }
.nf-ico--green { background:var(--c-success-bg);     color:var(--c-success); }
.nf-ico--amber { background:var(--c-warning-bg);     color:var(--c-warning); }
.nf-ico--red   { background:var(--c-error-bg);       color:var(--c-error);   }
.nf-ico--slate { background:var(--neutral-1);         color:var(--text-3);    }
.nf-body  { flex:1;min-width:0 }
.nf-title { font-size:13px;font-weight:500;color:var(--text-1);line-height:1.35 }
.nf-item.unread .nf-title { font-weight:600 }
.nf-sub   { font-size:11.5px;color:var(--text-3);margin-top:1px }
.nf-foot  { display:flex;align-items:center;justify-content:space-between;margin-top:4px }
.nf-time  { font-size:11px;color:var(--text-3) }
.nf-time--overdue { color:var(--c-error)!important;font-weight:600 }
.nf-time--today   { color:var(--c-warning)!important;font-weight:600 }
.nf-act   { font-size:11.5px;font-weight:600;color:var(--c-primary);
            padding:1px 7px;border-radius:5px;border:1px solid var(--c-primary-light,#DBEAFE);
            background:var(--c-primary-xlight,#EFF6FF) }
.nf-act:hover { background:var(--c-primary-light) }

/* Nav item shorthand — ni=nav item, .on=active state */
.ni { display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:10px;
      margin-bottom:2px;color:var(--text-2);font-size:13.5px;font-weight:500;
      text-decoration:none;transition:all 180ms;position:relative }
.ni:hover { background:var(--neutral-1);color:var(--text-1);text-decoration:none }
.ni.on { background:var(--c-primary-xlight,#EFF6FF);color:var(--c-primary);font-weight:600 }
.ni.on::before { content:'';position:absolute;left:0;top:20%;bottom:20%;
                 width:3px;background:var(--c-primary);border-radius:0 3px 3px 0 }

/* Utility */
.font-mono  { font-family:'Courier New',monospace }
.fw-600     { font-weight:600 }
.text-right { text-align:right }
.text-link  { color:var(--c-primary);text-decoration:none;font-weight:500 }
.text-link:hover { text-decoration:underline }
.report-content { padding:20px 24px }


/* ── Additional utility classes ─────────────────────────────────────────── */
.prog-track { height: 6px; background: var(--neutral-1, #F1F5F9); border-radius: 3px; overflow: hidden; }
.prog-bar   { height: 100%; border-radius: 3px; transition: width 600ms ease; }
.prog-bar.prog-green { background: var(--c-success, #059669); }
.prog-bar.prog-amber { background: var(--c-warning, #D97706); }
.prog-bar.prog-red   { background: var(--c-error,   #DC2626); }
.prog-bar.prog-blue  { background: var(--c-primary,  #1E40AF); }
.prog-bar.prog-teal  { background: var(--c-teal,     #0D9488); }
.status-strip { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 16px;
                border-bottom: 1px solid var(--border); background: var(--card-bg); }
.text-xs { font-size: 11px; }
.table-actions { display: flex; gap: 6px; flex-wrap: wrap; }


/* ── Manager App additional classes ─────────────────────────────────────── */
/* btn-d (danger) alias */
.btn-d { background:var(--c-error,#DC2626);color:#fff;border-color:var(--c-error) }
.btn-d:hover { background:#B91C1C }

/* btn-group — horizontal button row */
.btn-group { display:flex;gap:8px;flex-wrap:wrap;align-items:center }

/* table-link — inline link in table cells */
.table-link { color:var(--c-primary);font-size:12px;display:block;text-decoration:none }
.table-link:hover { text-decoration:underline }

/* filter-bar — horizontal filter button strip */
.filter-bar { display:flex;gap:8px;flex-wrap:wrap;padding:10px 20px;
              border-bottom:1px solid var(--border);background:var(--card-bg) }

/* split-pane__items — scrollable items column in approvals split pane */
.split-pane__items { border-right:1px solid var(--border);overflow-y:auto;
                     height:calc(100dvh - 56px - 40px - 65px);background:var(--card-bg) }

/* calendar-month grid — populated by emjs_bizcore_calendar.js */
.calendar-month {
    display: flex; flex-direction: column;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 10px; overflow: hidden;
}
.calendar-month__header {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    background: var(--c-primary, #1E40AF); color: #fff;
    flex-shrink: 0; width: 100%;
}
.calendar-month__dow {
    padding: 10px 4px; text-align: center; font-size: 11.5px;
    font-weight: 600; letter-spacing: .04em;
}
.calendar-month__body {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    flex: 1;
}
/* ── Calendar day cells — generated by emjs_bizcore_calendar.js ─────────── */
.calendar-month__day {
    /* a cell must be allowed to be narrower than the entry inside it, or a long title pushes the
       cell over its neighbours (20 Sep 2026) */
    min-width: 0; overflow: hidden;
    min-height: 80px; padding: 6px; cursor: pointer;
    border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
    font-size: 11px; transition: background .15s; position: relative;
}
.calendar-month__day:hover { background: var(--stripe); }
.calendar-month__day--empty { background: var(--bg); opacity: .4; cursor: default; }
.calendar-month__day--today {
    background: rgba(37, 99, 235, 0.06);
    box-shadow: inset 0 0 0 2px var(--c-primary, #1E40AF);
}
.calendar-month__day--today .calendar-month__day-num {
    color: #fff; font-weight: 700;
    background: var(--c-primary, #1E40AF); border-radius: 50%;
    width: 22px; height: 22px; display: inline-flex;
    align-items: center; justify-content: center;
    margin-left: auto; margin-bottom: 4px;
}
.calendar-month__day-num {
    font-size: 12px; font-weight: 600; color: var(--text-2);
    margin-bottom: 4px; text-align: right; display: block;
}
.calendar-month__entry {
    font-size: 11px; font-weight: 500; color: #fff;
    border-radius: 3px; padding: 2px 5px; margin-bottom: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: pointer; display: block;
}
/* Week view — taller cells */
.calendar-week__day { min-height: 200px !important; }
/* Day view — full height single column */
.calendar-day__day { min-height: 400px !important; }
/* btn-grp — inline button group for calendar toolbar */
.btn-grp { display: inline-flex; gap: 2px; }
.btn-grp .btn { border-radius: 4px; }

.cal-day { min-height: 80px; padding: 6px; border-right: 1px solid var(--border);
           border-bottom: 1px solid var(--border); font-size: 11px; }
.cal-day--today { background: var(--c-primary-xlight); }
.cal-day--other { color: var(--text-3); background: var(--stripe); }
.cal-day__num { font-weight: 700; font-size: 12px; margin-bottom: 3px;
                color: var(--text-2); font-family: 'Manrope', sans-serif; }
.cal-event { background: var(--c-primary); color: #fff; border-radius: 4px;
             padding: 2px 6px; font-size: 10.5px; margin-bottom: 2px;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
             cursor: pointer; transition: opacity 180ms; line-height: 1.4; }
.cal-event:hover { opacity: .85; }


/* btn-full — full width button (login page) */
.btn-full { width:100% }

/* directory-grid and directory-card — employee directory */
.directory-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
                  gap:16px;padding:20px }
.directory-card { background:var(--card-bg);border:1px solid var(--card-border);
                  border-radius:10px;padding:16px;display:flex;gap:12px;
                  transition:box-shadow 180ms;cursor:default }
.directory-card:hover { box-shadow:var(--sh2) }


/* =============================================================================
   35. MANAGER APP — bc-* component classes
   These are the Manager app's own design language for notice feed, team panels,
   calendar, directory and leave components. All use CSS variables from the
   Meridian design token set for theming.
============================================================================= */

/* ── Avatar / presence ────────────────────────────────────────────────── */
.bc-avatar-initials {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--c-primary, #1E40AF); color: #fff;
  font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 700;
  flex-shrink: 0; letter-spacing: .02em;
}
.bc-avatar-initials--sm { width: 26px; height: 26px; font-size: 10px; }

.bc-presence-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--card-bg); position: absolute;
  bottom: 0; right: 0;
}
.bc-dot--green { background: var(--c-success, #059669); }
.bc-dot--amber { background: var(--c-warning, #D97706); }
.bc-dot--red   { background: var(--c-error,   #DC2626); }
.bc-dot--grey  { background: var(--text-3,    #94A3B8); }

/* ── Notice feed (My Work) ────────────────────────────────────────────── */
.bc-feed-inner { display: flex; flex-direction: column; height: 100%; }
.bc-feed-empty { padding: 24px; text-align: center; color: var(--text-3);
                 font-size: 13px; }
.bc-notice-feed { display: flex; flex-direction: column; }
.bc-notice-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background 180ms; position: relative;
}
.bc-notice-card:hover { background: var(--stripe, #F8FAFC); }

/* Same guard as .notice-item below: .bc-notice-card is a flex ROW, built to hold a
   .bc-notice-icon dot beside a .bc-notice-content column. Used with neither - which has now
   happened four times, most recently on the supplier portal dashboard - the meta line, the
   subject and the body become three items of that row, side by side, and it reads fine only
   while every subject is short. With nothing to sit beside, it stacks (Khalid, 29 Sep 2026). */
.bc-notice-card:not(:has(> .bc-notice-icon)):not(:has(> .bc-notice-content)) {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.bc-notice-card--internal { background: var(--stripe); border-left: 3px solid var(--text-3); }
.bc-notice-card--unread { background: var(--c-primary-xlight, #EFF6FF); }
.bc-notice-card--unread::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--c-primary, #1E40AF);
}
.bc-notice-icon {
  width: 30px; height: 30px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.bc-notice-icon--amber { background: var(--c-warning-bg); color: var(--c-warning); }
.bc-notice-icon--green { background: var(--c-success-bg); color: var(--c-success); }
.bc-notice-icon--red   { background: var(--c-error-bg);   color: var(--c-error); }
.bc-notice-icon--blue  { background: var(--c-primary-xlight); color: var(--c-primary); }
.bc-notice-icon--slate { background: var(--neutral-1); color: var(--text-3); }
.bc-notice-content  { flex: 1; min-width: 0; }
.bc-notice-meta     { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.bc-notice-sender   { font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.bc-notice-time     { font-size: 11px; color: var(--text-3); }
.bc-notice-subject  { font-size: 13px; font-weight: 500; color: var(--text-1); margin-bottom: 2px; }
.bc-notice-body     { font-size: 12px; color: var(--text-3); line-height: 1.4; }
.bc-notice-actions  { display: flex; gap: 6px; margin-top: 8px; }
.bc-notice-actions--hidden { display: none; }
.bc-notice-dismiss  { background: none; border: none; cursor: pointer;
                      color: var(--text-3); font-size: 18px; padding: 0 4px;
                      line-height: 1; flex-shrink: 0;
                      position: absolute; top: 8px; right: 8px; }
.bc-notice-dismiss:hover { color: var(--text-1); }
.bc-notice-dismiss--hidden { display: none; }

/* ── Company News ─────────────────────────────────────────────────────── */
.bc-news-inner   { display: flex; flex-direction: column; height: 100%; }
.bc-news-empty   { padding: 24px; text-align: center; color: var(--text-3); font-size: 13px; }
.bc-news-feed    { display: flex; flex-direction: column; }
.bc-news-card    { padding: 14px 16px; border-bottom: 1px solid var(--border); position: relative; }
.bc-news-card--urgent { border-left: 3px solid var(--c-error); }
.bc-news-content { display: flex; flex-direction: column; gap: 4px; }
.bc-news-subject { font-size: 13px; font-weight: 600; color: var(--text-1); }
.bc-news-body    { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.bc-news-meta    { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.bc-news-sender  { font-size: 11px; font-weight: 600; color: var(--text-3); }
.bc-news-time    { font-size: 11px; color: var(--text-3); }

/* ── Panel (Team Availability, Today's Calendar) ──────────────────────── */
.bc-panel {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 10px; box-shadow: var(--sh1); display: flex;
  flex-direction: column; overflow: hidden;
  height: 320px;  /* Fixed height — body scrolls */
}
.bc-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.bc-panel-title {
  font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 700;
  color: var(--text-1); letter-spacing: -.2px;
}
.bc-panel-link {
  font-size: 12px; color: var(--c-primary); font-weight: 600; text-decoration: none;
}
.bc-panel-link:hover { text-decoration: underline; }

/* ── Team Availability list ────────────────────────────────────────────── */
.bc-avail-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; padding: 12px; overflow-y: auto; flex: 1; min-height: 0; align-content: start; }
.bc-avail-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--card-bg); text-align: center;
  transition: box-shadow 180ms;
}
.bc-avail-item:hover { box-shadow: var(--sh1); }
.bc-avail-avatar { position: relative; flex-shrink: 0; }
.bc-avail-info   { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.bc-avail-name   { font-size: 13px; font-weight: 500; color: var(--text-1);
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-avail-status { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }

/* ── Today's Calendar list ────────────────────────────────────────────── */
.bc-cal-list    { display: flex; flex-direction: column; flex: 1; overflow-y: auto; min-height: 0; }
.bc-cal-entry   {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px;
  border-bottom: 1px solid var(--border); cursor: pointer; transition: background 180ms;
}
.bc-cal-entry:hover { background: var(--stripe); }
.bc-cal-entry--past { opacity: .5; }
.bc-cal-dot     { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.bc-cal-time    { font-size: 11.5px; font-weight: 600; color: var(--text-3); min-width: 38px; flex-shrink: 0; }
.bc-cal-title   { font-size: 13px; font-weight: 500; color: var(--text-1); flex: 1; }
.bc-cal-location { font-size: 11px; color: var(--text-3); }
.bc-cal-empty   { padding: 20px 16px; text-align: center; color: var(--text-3); font-size: 13px; }
.bc-cal-footer  { padding: 10px 16px; border-top: 1px solid var(--border); flex-shrink: 0; background: var(--card-bg); }

/* ── Approvals list (split-pane left) ─────────────────────────────────── */
.approval-list  { display: flex; flex-direction: column; }
.approval-item  {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--border); cursor: pointer; transition: background 180ms;
}
.approval-item:hover { background: var(--stripe); }
.approval-item__icon {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
}
.approval-item__icon--amber { background: var(--c-warning-bg); }
.approval-item__icon--blue  { background: var(--c-primary-xlight); }
.approval-item__icon--red   { background: var(--c-error-bg); }
.approval-item__icon--green { background: var(--c-success-bg); }
.approval-item__icon--slate { background: var(--neutral-1); }
.approval-item__content { flex: 1; min-width: 0; }
.approval-item__title   { font-size: 13px; font-weight: 500; color: var(--text-1);
                           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.approval-item__meta    { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.approval-item__requester { font-size: 11.5px; color: var(--text-3); }
.approval-item__age       { font-size: 11px; color: var(--text-3); }
.approval-item__badges    { flex-shrink: 0; }

/* ── Approvals detail (split-pane right) ─────────────────────────────── */
.approval-detail          { padding: 20px 24px; }
.approval-detail__header  { display: flex; align-items: flex-start;
                             justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.approval-detail__title   { font-family: 'Manrope', sans-serif; font-size: 20px;
                             font-weight: 700; color: var(--text-1); letter-spacing: -.3px; }
.approval-detail__meta    { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }

/* ── Team Status grid ─────────────────────────────────────────────────── */
.team-status-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;
  padding: 16px;
}
.team-status-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px; display: flex; gap: 12px; align-items: flex-start;
}
.team-card__avatar   { position: relative; flex-shrink: 0; }
.team-card__info     { flex: 1; min-width: 0; }
.team-card__name     { font-size: 13px; font-weight: 600; color: var(--text-1); }
.team-card__role     { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.team-card__status   { font-size: 11.5px; color: var(--text-3); margin-top: 4px; }
.team-card__agenda   { font-size: 11px; color: var(--text-3); margin-top: 2px;
                        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Directory ────────────────────────────────────────────────────────── */
.dir-card__avatar  { position: relative; flex-shrink: 0; }
.dir-card__info    { flex: 1; min-width: 0; }
.dir-card__name    { font-size: 13px; font-weight: 600; color: var(--text-1); }
.dir-card__role    { font-size: 12px; color: var(--text-2); margin-top: 1px; }
.dir-card__dept    { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.dir-card__status  { font-size: 11.5px; color: var(--text-3); margin-top: 4px; }
.dir-card__contact { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.dir-link          { font-size: 11.5px; color: var(--c-primary); text-decoration: none; }
.dir-link:hover    { text-decoration: underline; }

/* ── Leave ────────────────────────────────────────────────────────────── */
.leave-balances      { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.leave-balance-row   { display: flex; flex-direction: column; gap: 4px; }
.leave-balance__label   { font-size: 12px; font-weight: 600; color: var(--text-2); }
.leave-balance__numbers { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.leave-balance__remaining { font-size: 13px; font-weight: 600; color: var(--text-1); }
.leave-progress      { height: 5px; background: var(--neutral-1); border-radius: 3px; overflow: hidden; }
.leave-progress__bar { height: 100%; background: var(--c-primary); border-radius: 3px; }

.upcoming-leave      { display: flex; flex-direction: column; padding: 0 16px 16px; }
.upcoming-leave__row { padding: 10px 0; border-bottom: 1px solid var(--border);
                        display: flex; flex-direction: column; gap: 4px; }
.upcoming-leave__dates { font-size: 13px; color: var(--text-1); }
.upcoming-leave__meta  { display: flex; align-items: center; gap: 8px; }

/* ── Documents list ────────────────────────────────────────────────────── */
.doc-list-wrapper { overflow-x: auto; }

/* ── cal-data-item (hidden data nodes for JS) ─────────────────────────── */
.cal-data-item { display: none; }
.cal-nav {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-bottom: 1px solid var(--border);
  background: var(--card-bg);
}
.cal-nav__title {
  font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 700;
  color: var(--text-1); min-width: 160px; text-align: center;
}
.calendar-grid {
  flex: 1; overflow-y: auto; padding: 0;
  display: flex; flex-direction: column;
  min-height: 500px;
}
.calendar-month {
  flex: 1; min-height: 0;
}


/* ── bc-panel modifier variants ─────────────────────────────────── */
.bc-panel--team     { height: 320px; }
.bc-panel--calendar { height: 320px; }

/* ── detail-list (HR details / approval detail) ─────────────────── */
.detail-list { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.detail-row  { display: flex; align-items: baseline; gap: 12px; padding: 9px 16px;
               border-bottom: 1px solid var(--border); }
.detail-row dt { font-size: 11.5px; font-weight: 600; color: var(--text-3);
                 min-width: 140px; flex-shrink: 0; text-transform: uppercase;
                 letter-spacing: .04em; }
.detail-row dd { font-size: 13px; color: var(--text-1); margin: 0; }

/* ── Login page ─────────────────────────────────────────────────── */
.login-shell  { min-height: 100vh; display: flex; align-items: center; justify-content: center;
                background: var(--page-bg); padding: 24px; }
.login-card   { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px;
                box-shadow: var(--sh2); padding: 40px; width: 100%; max-width: 400px; }
.login-brand  { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.login-brand__logo     { width: 40px; height: 40px; border-radius: 8px;
                          background: var(--c-primary); }
.login-brand__initials { color: #fff; font-family: 'Manrope', sans-serif;
                          font-size: 16px; font-weight: 800; }
.login-brand__name     { font-family: 'Manrope', sans-serif; font-size: 20px;
                          font-weight: 800; color: var(--text-1); letter-spacing: -.4px; }
.login-brand__tagline  { font-size: 12px; color: var(--text-3); margin-top: 1px; }
.login-error  { background: var(--c-error-bg); color: var(--c-error); border-radius: 6px;
                padding: 10px 14px; font-size: 13px; display: none; margin-bottom: 14px; }
.login-error--visible { display: block; }
.login-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.login-footer  { margin-top: 16px; text-align: center; font-size: 12px; color: var(--text-3); }


/* =============================================================================
   36. SALES MANAGER DASHBOARD — Component classes matching the prototype HTML
============================================================================= */

/* 3-column dashboard grid */
.dash-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

/* Won/Lost summary card */
.wl-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 20px; box-shadow: var(--sh1);
  display: flex; align-items: center; gap: 16px;
}
.wl-icon { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
           display: flex; align-items: center; justify-content: center; font-size: 20px; }
.wl-body { flex: 1; }
.wl-val  { font-family: 'Manrope', sans-serif; font-size: 26px; font-weight: 800;
           letter-spacing: -1px; color: var(--text-1); line-height: 1; }
.wl-lbl  { font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* Target progress rows */
.target-list   { display: flex; flex-direction: column; gap: 12px;
                 padding: 16px 20px; }
.target-row    { display: flex; flex-direction: column; gap: 4px; }
.target-header { display: flex; align-items: center;
                 justify-content: space-between; margin-bottom: 4px; }
.target-name   { font-size: 13px; font-weight: 500; color: var(--text-1); }
.target-figures { font-size: 12px; color: var(--text-3); }
.target-figures strong { color: var(--text-1); font-weight: 600; }
.prog-pct      { font-size: 11px; font-weight: 700; font-family: 'Manrope', sans-serif;
                 margin-top: 3px; text-align: right; }

/* Pipeline health rows */
.pipeline-health { display: flex; flex-direction: column; gap: 12px;
                   padding: 16px 20px; }
.ph-bar   { display: flex; height: 6px; border-radius: 3px; overflow: hidden;
            gap: 1px; margin-bottom: 16px; }
.ph-seg   { border-radius: 3px; }
.ph-stage { display: flex; align-items: center; gap: 12px; }
.ph-dot   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ph-label { flex: 1; font-size: 13px; color: var(--text-2); font-weight: 500; }
.ph-count { font-weight: 700; font-family: 'Manrope', sans-serif; color: var(--text-1);
            min-width: 24px; text-align: right; font-size: 13px; }
.ph-val   { color: var(--text-3); min-width: 55px; text-align: right; font-size: 12px; }
.ph-alert { display: flex; align-items: center; gap: 8px; font-size: 12px;
            padding: 8px 12px; border-radius: 6px; }
.ph-alert.amber { background: var(--c-warning-bg); color: var(--c-warning); }
.ph-alert.red   { background: var(--c-error-bg);   color: var(--c-error); }

/* card-body-scroll — scrollable card body used in SM dashboard cards */
.card-body-scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0;
}
.card-body-scroll::-webkit-scrollbar { width: 4px; }
.card-body-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* =============================================================================
   LEGACY STUBS — see sections 22–32 above for implemented versions
   These are placeholder comments marking where future sections go.
   Add styles directly below each stub comment when implementing.
=============================================================================

── SPLIT-PANE LAYOUT ──
   .split-pane { display: grid; grid-template-columns: 320px 1fr; ... }
   See Screen Pattern 11 in BizCore UI Design Standard v1.0

── FORM WIZARD / STEP INDICATOR ──
   .wizard-steps { ... }
   .wizard-step.completed / .active / .pending { ... }
   See Screen Pattern 9 in BizCore UI Design Standard v1.0

── KANBAN / PIPELINE BOARD ──
   .kanban-board { display: flex; gap: var(--space-4); overflow-x: auto; }
   .kanban-column { min-width: 260px; ... }
   .kanban-card { ... }
   Not yet in a screen pattern — add to UI Design Standard when designed

── CALENDAR VIEW ──
   .calendar-grid { ... }
   .cal-entry { ... }
   See Screen Pattern 10 in BizCore UI Design Standard v1.0

── PAGINATION ──
   .pagination { display: flex; align-items: center; gap: var(--space-2); }
   .page-btn { ... }

── TOAST / SNACK-BAR ──
   .toast-container { position: fixed; bottom: var(--space-6); right: var(--space-6); }
   .toast { ... }

── SKELETON LOADING STATES ──
   .skeleton { background: linear-gradient(90deg, var(--row-stripe) 25%, var(--border) 50%, var(--row-stripe) 75%); }

── PRINT STYLES ──
   @media print { .header, .sidebar, .footer { display: none; } ... }

============================================================================= */

/* =============================================================================
   Document Upload — Drag and Drop Zone
============================================================================= */
.doc-drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 180ms, background 180ms;
  background: var(--surface);
  position: relative;
}
.doc-drop-zone:hover,
.doc-drop-zone--active {
  border-color: var(--c-primary);
  background: var(--surface-raised);
}
.doc-drop-zone--has-file {
  border-color: var(--c-success);
  border-style: solid;
}
.doc-drop-icon {
  font-size: 32px;
  margin-bottom: 8px;
  color: var(--text-3);
}
.doc-drop-text {
  font-size: 14px;
  color: var(--text-2);
}
.doc-drop-link {
  color: var(--c-primary);
  text-decoration: underline;
  cursor: pointer;
}
.doc-drop-filename {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  padding: 8px 0;
}

/* Validation messages the engine writes under a field (<span class="field-error" id="error-...">).
   Red, small, and hidden while empty so a clean form shows nothing. */
.field-error { display: block; color: #dc2626; font-size: 12px; margin-top: 4px; }
.field-error:empty { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   CHARTS (emjs_bhcharts.js) — Khalid, 2026-09-12
   Sparkline, donut, bars, line and funnel. Every colour comes from the
   token palette above so the charts follow dark mode; nothing here sets a
   hex value of its own.
   ═══════════════════════════════════════════════════════════════════════ */

/* The shell a chart sits in, inside an existing .card */
.bh-chart      { width: 100%; }
.bh-chart--sm  { min-height: 120px; }
.bh-chart--md  { min-height: 168px; }
.bh-chart-empty { display: flex; align-items: center; justify-content: center;
                  min-height: 96px; font-size: 12.5px; color: var(--text-3, var(--text-muted));
                  font-style: italic; }

/* ── Sparkline: sits in a KPI tile's footer, no axes, no legend ───────── */
.kpi-spark  { display: inline-flex; align-items: center; margin-left: auto; }
.bh-spark   { display: block; overflow: visible; }

/* ── Donut ────────────────────────────────────────────────────────────── */
.bh-donut-wrap  { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.bh-donut       { flex: none; }
.bh-donut-centre { font-family: 'Manrope', sans-serif; font-size: 8px; font-weight: 800;
                   fill: var(--text-1, var(--text-primary)); letter-spacing: -.3px; }

/* ── Legend, shared by donut / bars / line ────────────────────────────── */
.bh-legend      { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bh-legend--row { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.bh-legend-row  { display: flex; align-items: center; gap: 7px; font-size: 12.5px;
                  color: var(--text-2, var(--text-secondary)); min-width: 0; }
.bh-legend-lbl  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-legend-row b { margin-left: auto; padding-left: 10px; font-weight: 700;
                   color: var(--text-1, var(--text-primary)); font-variant-numeric: tabular-nums; }
.bh-legend--row .bh-legend-row b { margin-left: 0; padding-left: 0; }
.bh-sw          { width: 9px; height: 9px; border-radius: 2px; flex: none; }

/* ── Bars: vertical by default, horizontal for long category names ────── */
.bh-bars        { display: flex; align-items: flex-end; justify-content: space-around;
                  gap: 10px; min-height: 140px; padding-top: 4px; }
.bh-bar-grp     { display: flex; flex-direction: column; align-items: center; gap: 5px;
                  flex: 1 1 0; min-width: 0; }
.bh-bar-stack   { width: 100%; max-width: 46px; display: flex; flex-direction: column;
                  border-radius: 4px 4px 0 0; overflow: hidden; min-height: 2px; }
.bh-bar-stack > div { width: 100%; min-height: 0; }
.bh-bar-lbl     { font-size: 11px; color: var(--text-3, var(--text-muted)); text-align: center;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.bh-bar-val     { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
                  color: var(--text-1, var(--text-primary)); }

.bh-bars--h     { flex-direction: column; align-items: stretch; justify-content: flex-start;
                  gap: 9px; min-height: 0; }
.bh-bars--h .bh-bar-grp   { flex-direction: row; align-items: center; gap: 10px; width: 100%; }
.bh-bars--h .bh-bar-lbl   { flex: 0 0 34%; text-align: left; }
/* the track takes the row's spare width; the bar is a percentage of it */
.bh-bars--h .bh-bar-track { flex: 1 1 auto; min-width: 0; }
.bh-bars--h .bh-bar-stack { width: 0; max-width: none; flex-direction: row;
                            height: 16px; border-radius: 4px; min-width: 2px; }
.bh-bars--h .bh-bar-stack > div { height: 100%; width: auto; }
.bh-bars--h .bh-bar-val   { flex: 0 0 auto; min-width: 44px; text-align: right; }

/* ── Line: scales to its card, so the viewBox is stretched ────────────── */
/* drawn at its measured pixel size, so no viewBox stretching to undo */
.bh-line   { display: block; max-width: 100%; }
.bh-axis   { font-size: 11px; fill: var(--text-3, var(--text-muted)); }

/* ── Funnel: centred taper, stage label left, figure right ────────────── */
.bh-funnel       { display: flex; flex-direction: column; gap: 8px; }
.bh-funnel-row   { display: flex; align-items: center; gap: 10px; }
.bh-funnel-lbl   { flex: 0 0 32%; font-size: 12.5px; color: var(--text-2, var(--text-secondary));
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-funnel-track { flex: 1 1 auto; display: flex; justify-content: center; }
.bh-funnel-bar   { height: 22px; border-radius: 4px; min-width: 2px;
                   transition: width .25s ease; }
.bh-funnel-val   { flex: 0 0 auto; min-width: 48px; text-align: right; font-size: 12.5px;
                   font-weight: 700; font-variant-numeric: tabular-nums;
                   color: var(--text-1, var(--text-primary)); }

/* Two charts side by side inside one card, stacking on narrow screens */
.bh-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .bh-split { grid-template-columns: 1fr; } }

/* ── Company Directory list view ────────────────────────────────────────
   The Grid/List buttons fetch two different blocks now, so the list is a
   real table (emxml_blkManagerDirectoryList.xml) rather than the cards
   restyled. The .directory-list class the old class-swap toggled is gone
   with it. (Khalid, 2026-09-13) */
.directory-table { width: 100%; }
.directory-table td, .directory-table th { vertical-align: middle; }
.bc-avatar-initials--sm { width: 24px; height: 24px; font-size: 10px;
                          display: inline-flex; align-items: center;
                          justify-content: center; margin-right: 8px; }
.dir-row__name    { font-weight: 600; }
/* email over phone, so the column stays the width of one of them */
.dir-row__contact { display: flex; flex-direction: column; gap: 1px;
                    font-size: 12px; color: var(--text-2, var(--text-secondary)); }

/* ── Document list empty states ──────────────────────────────────────────
   A document in a tinted circle, with a badge saying what the tab holds:
   up-arrow uploads, pencil sign-off, check published, share-alt shared.
   Used by emxml_blkManagerDocumentsList.xml. (Khalid, 2026-09-14) */
.doc-empty { padding: var(--space-12) var(--space-8); }
.doc-empty .empty-state__title { font-size: 15px; color: var(--text-primary); }
.doc-empty .empty-state__sub   { max-width: 42ch; line-height: 1.5; }

.empty-state__art {
  position: relative;
  width: 76px; height: 76px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
  font-size: 32px;
}
.empty-state__badge {
  position: absolute; right: -2px; bottom: 2px;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #FFFFFF;
  box-shadow: 0 0 0 3px var(--card-bg);
}
.empty-state__art--info    { background: var(--info-bg);    color: var(--info); }
.empty-state__art--info    .empty-state__badge { background: var(--brand-500); }
.empty-state__art--warning { background: var(--warning-bg); color: var(--warning); }
.empty-state__art--warning .empty-state__badge { background: var(--warning); }
.empty-state__art--success { background: var(--success-bg); color: var(--success); }
.empty-state__art--success .empty-state__badge { background: var(--success); }
.empty-state__art--teal    { background: var(--teal-100);   color: var(--teal-600); }
.empty-state__art--teal    .empty-state__badge { background: var(--teal-600); }

[data-theme="dark"] .empty-state__art--info    { background: rgba(37, 99, 235, 0.18); color: #93C5FD; }
[data-theme="dark"] .empty-state__art--warning { background: rgba(217, 119, 6, 0.18); color: #FCD34D; }
[data-theme="dark"] .empty-state__art--success { background: rgba(5, 150, 105, 0.18); color: #6EE7B7; }


/* =============================================================================
   Header bell - unread count (fix 0.02). The badge is empty (hidden) until
   the engine-registered unread-count call fills it.
============================================================================= */
.header-btn { position: relative; text-decoration: none; }
.notif-badge:empty { display: none; }
.notif-badge--count {
  width: auto;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  top: 0;
  right: -2px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  line-height: 13px;
  color: #FFFFFF;
  text-align: center;
}


/* =============================================================================
   Global search in the shell header (fix 0.13)
============================================================================= */
.header-search { position: relative; flex: 0 1 260px; min-width: 140px; }
.header-search__input {
  width: 100%;
  height: 32px;
  padding: 0 10px 0 30px;
  border-radius: 16px;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  font-size: 13px;
}
.header-search__input::placeholder { color: rgba(255, 255, 255, 0.7); }
.header-search__input:focus { outline: none; background: rgba(255, 255, 255, 0.22); }
.header-search__icon {
  position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  pointer-events: none;
}
.header-search__results {
  position: absolute; top: 38px; left: 0;
  width: 380px; max-width: 90vw; max-height: 70vh;
  overflow-y: auto;
  background: var(--card-bg, #FFFFFF);
  color: var(--text-1, #111827);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 1000;
}
.header-search__results:empty { display: none; }
.search-group__title {
  padding: 8px 12px 4px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-3, #6B7280);
}
.search-item {
  display: block;
  padding: 6px 12px;
  color: inherit;
  text-decoration: none;
}
.search-item:hover { background: var(--stripe, #F3F4F6); text-decoration: none; }
.search-item__label { display: block; font-size: 13px; font-weight: 600; }
.search-item__sub { display: block; font-size: 12px; color: var(--text-3, #6B7280); }
.search-empty { padding: 12px; font-size: 13px; color: var(--text-3, #6B7280); }
@media (max-width: 768px) { .header-search { display: none; } }


/* =============================================================================
   Printable documents (contract C9) - quotes, invoices, purchase orders.
   Put class="print-doc" on the document's outer element; a Print button
   calls window.print(). On paper only the document shows.
============================================================================= */
.print-doc {
  max-width: 210mm;
  margin: 24px auto;
  padding: 16mm;
  background: #FFFFFF;
  color: #111827;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}
.print-doc h1, .print-doc h2, .print-doc h3 { color: #111827; margin: 0 0 8px; }
.print-doc table { width: 100%; border-collapse: collapse; }
.print-doc th, .print-doc td { padding: 6px 8px; border-bottom: 1px solid #E5E7EB; text-align: left; vertical-align: top; }
.print-doc th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: #4B5563; }
.print-doc .text-right, .print-doc td.num, .print-doc th.num { text-align: right; }
.print-doc__header { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.print-doc__totals { margin-left: auto; width: 45%; margin-top: 16px; }
.print-doc__footer { margin-top: 32px; font-size: 11px; color: #6B7280; }
.print-doc__actions { max-width: 210mm; margin: 16px auto 0; display: flex; justify-content: flex-end; gap: 8px; }

@media print {
  @page { size: A4; margin: 12mm; }
  body * { visibility: hidden; }
  .print-doc, .print-doc * { visibility: visible; }
  .print-doc {
    position: absolute; left: 0; top: 0;
    width: 100%; max-width: none;
    margin: 0; padding: 0;
    box-shadow: none;
    font-size: 11pt;
  }
  .print-doc tr, .print-doc__totals { page-break-inside: avoid; }
  .print-doc__actions, .no-print { display: none !important; }
  [data-theme="dark"] .print-doc { background: #FFFFFF; color: #000000; }
}
[data-theme="dark"] .empty-state__art--teal    { background: rgba(13, 148, 136, 0.18); color: #5EEAD4; }

/* Utility used by blocks that hide action buttons by state (e.g. %approve_hide% = 'display-none'). Found missing in the 2026-09 browser test run (BUG-085). */
.display-none { display: none !important; }

/* BUG-153: header at phone and tablet width.
   The header is a grid item, so its min-content width (the module-app links alone are ~540px) stretched the
   shell column and pushed the theme toggle, bell and user menu off the right edge with no way to scroll to them.
   Let the header shrink, let the module links scroll sideways inside it, and keep the actions pinned on screen. */
@media (max-width: 1024px) {
  .header { min-width: 0; gap: var(--space-3); }
  .header-nav {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .header-nav::-webkit-scrollbar { display: none; }
  .header-actions { flex-shrink: 0; }
}
@media (max-width: 767px) {
  .header { padding: 0 var(--space-3); gap: var(--space-2); }
  .header-nav-item { padding: 6px 10px; }
  .header-actions { gap: var(--space-1); }
}

/* BUG-153: two-column dashboard split (was inline "2fr 1fr" on eight dashboards). minmax(0, …) lets a wide table
   scroll inside its own card instead of pushing the second column off screen; below 900px the columns stack. */
.dash-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 900px) { .dash-split { grid-template-columns: minmax(0, 1fr); } }
.dash-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .dash-split--even { grid-template-columns: minmax(0, 1fr); } }

/* BUG-153: KPI tiles at phone width. Several dashboards set the tile columns inline (repeat(3,1fr) / repeat(4,1fr)),
   which overrode the mobile two-across rule above, so four tiles squeezed into 375px and their labels and values were
   cut off. Restore the intended two-across layout on phones; wider screens keep each dashboard's own columns. */
@media (max-width: 767px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Bizheart logo (17 Sep 2026): heart mark from bizheart.co.uk replaces the "BC" box */
.logo-heart { display: block; width: 30px; height: 26px; flex-shrink: 0; }

/* =============================================================================
   Header (Khalid, 17 Sep 2026) - emxml_blkShellHeader.xml: role / module / portal
============================================================================= */
.header .header-logo { gap: 10px; }
.header .header-hamburger { margin-left: calc(-1 * var(--space-4)); margin-right: 0; }
.shell.sidebar--collapsed .header .header-hamburger { margin-left: calc(-1 * var(--space-5)); }

/* module app name with its Close link */
.app-switch {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-xl, 999px);
  background: rgba(255, 255, 255, 0.12);
  color: #fff; font-size: 14px; font-weight: 600;
  cursor: pointer; flex-shrink: 0; white-space: nowrap;
}
.app-switch:hover { background: rgba(255, 255, 255, 0.2); }
.app-switch__chevron { font-size: 9px; opacity: .6; }
.app-switch.open .dropdown-menu { display: block; }
.dropdown-menu--left { left: 0; right: auto; }

/* portal: portal type beside the logo, customer or supplier name before the user menu */
.header-portal-type {
  color: rgba(255, 255, 255, 0.85); font-size: 14px; font-weight: 600;
  padding-left: var(--space-3); border-left: 1px solid rgba(255, 255, 255, 0.25);
  white-space: nowrap;
}
.header-company {
  color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis;
}

/* search: a button that opens a dropdown with the search box and the results */
.header .header-search { position: relative; flex: 0 0 auto; min-width: 0; }
.header-search__panel {
  display: none;
  position: absolute; top: 44px; right: 0; left: auto;
  width: 400px; max-width: calc(100vw - 32px);
  background: var(--card-bg, #FFFFFF);
  color: var(--text-1, #111827);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 1000;
  overflow: hidden;
}
.header-search.open .header-search__panel { display: block; }
.header-search__field { position: relative; padding: 10px; border-bottom: 1px solid var(--border, #E5E7EB); }
.header-search__panel .header-search__input {
  height: 36px; padding: 0 10px 0 32px; border-radius: 6px;
  border: 1px solid var(--border, #E5E7EB);
  background: var(--page-bg, #F9FAFB); color: var(--text-1, #111827);
}
.header-search__panel .header-search__input::placeholder { color: var(--text-3, #6B7280); }
.header-search__panel .header-search__input:focus { outline: 2px solid var(--brand-300, #93C5FD); background: var(--card-bg, #FFFFFF); }
.header-search__panel .header-search__icon { left: 22px; color: var(--text-3, #6B7280); }
.header-search__panel .header-search__results {
  position: static; width: auto; max-width: none; max-height: 60vh;
  border: none; border-radius: 0; box-shadow: none;
}
@media (max-width: 768px) {
  .header .header-search { display: block; }
  .header-search__panel { position: fixed; top: 56px; left: 16px; right: 16px; width: auto; }
  .header-portal-type, .header-company { display: none; }
}

.dropdown-userrole { font-size: 12px; color: var(--text-3, #6B7280); }
.display-none { display: none !important; }
/* module apps have no app links, so push search to the right like the role header */
.header .header-search { margin-left: auto; }
.header .header-search + .header-actions { margin-left: 0; }
/* footer: company link and Powered by Dvl'epr (17 Sep 2026) */
.footer a { font-weight: 600; }
.footer-powered { margin-left: var(--space-4); color: var(--text-muted); }
.footer-right a { font-weight: 400; }
@media (max-width: 767px) { .footer-powered { display: none; } }
/* module app name is a label now; Close lives in the user menu (17 Sep 2026) */
.header span.app-switch { cursor: default; }
.header span.app-switch:hover { background: rgba(255, 255, 255, 0.12); }

/* ══════════════════════════════════════════════════════════════════
   Short colour names used by the screens (18 Sep 2026)
   Many screens (and rules above) use var(--text-3), var(--bg-2),
   var(--c-primary) and similar names that were never defined, so the
   browser dropped those colours: grey table headers came out black and
   header rows lost their background. Each name is an alias of the
   palette above, so it follows light and dark mode with it.
   ══════════════════════════════════════════════════════════════════ */
:root {
  --text-1:            var(--text-primary);
  --text-2:            var(--text-secondary);
  --text-3:            var(--text-muted);
  --bg:                var(--page-bg);
  --bg-2:              #F1F5F9;                 /* header rows, soft panels */
  --stripe:            var(--row-stripe);
  --neutral-1:         #F1F5F9;                 /* tab bar track */
  --surface:           var(--card-bg);
  --surface-raised:    var(--card-bg);
  --c-primary:         var(--brand-800);
  --color-primary:     var(--brand-800);
  --c-primary-hover:   var(--brand-900);
  --c-primary-light:   var(--brand-100);
  --c-primary-xlight:  var(--brand-50);
  --brand-600:         #2563EB;
  --c-success:         var(--success);
  --c-success-bg:      var(--success-bg);
  --c-warning:         var(--warning);
  --c-warning-bg:      var(--warning-bg);
  --color-warning:     var(--warning);
  --color-warning-bg:  var(--warning-bg);
  --c-amber:           var(--warning);
  --c-error:           var(--error);
  --c-error-bg:        var(--error-bg);
  --c-info:            var(--info);
  --c-info-bg:         var(--info-bg);
  --c-teal:            var(--teal-600);
  --c-teal-light:      var(--teal-100);
  --c-teal-dark:       var(--teal-700);
  --sh1:               var(--shadow-1);
  --sh2:               var(--shadow-2);
  --radius:            var(--radius-md);
  --font-heading:      'Manrope', sans-serif;
}
[data-theme="dark"] {
  --bg-2:              #0F172A;
  --neutral-1:         #0F172A;
  --c-primary:         var(--brand-500);        /* white text still reads on it; brighter on dark cards */
  --color-primary:     var(--brand-500);
  --c-primary-light:   rgba(30, 64, 175, 0.35);
  --c-primary-xlight:  rgba(30, 64, 175, 0.25);
}

/* Detail lists written as <dl class="detail-list"><dt>Label</dt><dd>Value</dd>…:
   label and value side by side (they were stacked, because .detail-list is a
   column meant for .detail-row children). A .detail-row inside still spans the
   full width and lays itself out as before. */
.detail-list {
  display: grid;
  grid-template-columns: minmax(110px, max-content) minmax(0, 1fr);
  column-gap: 20px;
}
.detail-list > :not(dt):not(dd) { grid-column: 1 / -1; }
.detail-list > dt {
  font-size: 12px; font-weight: 500; color: var(--text-muted);
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.detail-list > dd {
  font-size: 13px; color: var(--text-primary); margin: 0;
  padding: 7px 0; border-bottom: 1px solid var(--border);
  overflow-wrap: anywhere;
}
.detail-list > dt:nth-last-of-type(1), .detail-list > dd:last-child { border-bottom: none; }
@media (max-width: 480px) {
  /* phones: still side by side (as the label/value tables are); long labels wrap in up to 45% */
  .detail-list, .dc-dl { grid-template-columns: minmax(90px, 45%) minmax(0, 1fr); column-gap: 12px; }
}

/* Summary tiles: <div class="detail-list-grid__inner"><div><dt>Label</dt><dd>Value</dd></div>… */
.detail-list-grid__inner {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px;
}
.detail-list-grid__inner dt { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
.detail-list-grid__inner dd { font-size: 14px; color: var(--text-primary); margin: 0; }

/* Plain tables (no class) with a header row: the same header look as the list tables' light
   style, so a table without a class no longer shows black browser-default headers. Inline
   styles on a th still win. */
table:not([class]) > thead th {
  font-size: 12px; font-weight: 600; color: var(--text-muted); text-align: left;
  padding: 8px 12px; background: var(--bg-2); border-bottom: 2px solid var(--border);
}

/* Record detail pages (VAT return, leave, login, document detail): header line, meta line and
   spacing. These classes were used but never defined, so the header ran against the edge. */
.record-detail { padding: 16px 20px; }
.record-detail__inner { display: flex; flex-direction: column; gap: 12px; }
.record-detail__header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.record-detail__header h2 { margin: 0; }
.record-detail__header .btn { margin-left: auto; }
.record-detail__meta,
.dc-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--text-muted); }
.record-detail__meta span:empty, .dc-meta span:empty { display: none; }
.record-detail__header + .record-detail__meta { margin: 6px 0 14px; }

/* <dl class="dc-dl">: the same side-by-side layout as .detail-list */
.dc-dl {
  display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr);
  column-gap: 20px; margin: 0;
}
.dc-dl > dt { font-size: 12px; font-weight: 500; color: var(--text-muted); padding: 6px 0; border-bottom: 1px solid var(--border); }
.dc-dl > dd { font-size: 13px; color: var(--text-primary); margin: 0; padding: 6px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }

/* List tables: the actions cell (<td class="a-bar">) stays a table cell with its buttons on one
   line. .a-bar makes an element a wrapping flex row; on a <td> that stopped it behaving as a cell,
   squeezed it, and stacked the buttons, making those rows two or three times as tall (18 Sep 2026). */
table td.a-bar { display: table-cell; white-space: nowrap; }
table td.a-bar > .btn { display: inline-flex; vertical-align: middle; }
table td.a-bar > .btn + .btn { margin-left: 6px; }

/* Class names used by screens that had no style (18 Sep 2026); each follows an existing style. */
/* form-control (43 fields in 10 forms) = form-input */
.form-control {
  width: 100%; height: 36px; padding: 0 var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card-bg); color: var(--text-primary);
  font-size: 13px; font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}
textarea.form-control { height: auto; min-height: 80px; padding: var(--space-2) var(--space-3); resize: vertical; }
select.form-control { padding-right: 28px; }
.form-control:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.form-control::placeholder { color: var(--neutral-400); }
.form-control:disabled, .form-control[readonly] { background: var(--row-stripe); color: var(--text-muted); }
/* btn-r = btn-d (danger) */
.btn-r { background: var(--c-error); color: #fff; border-color: var(--c-error); }
.btn-r:hover { background: #B91C1C; }
/* btn-xs: smaller than btn-sm */
.btn-xs { padding: 3px 8px; font-size: 11px; }
/* card body with no padding (a table or list runs edge to edge) */
.card-body--flush { padding: 0; }
/* status filter buttons in a .status-strip: the same pill look as tab buttons (.tb) */
.status-strip__item {
  display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 5px;
  font-size: 12px; font-weight: 500; color: var(--text-muted); background: transparent;
  border: 1px solid var(--border); cursor: pointer; white-space: nowrap;
}
.status-strip__item:hover { color: var(--text-primary); background: var(--bg-2); }
.status-strip__item.on, .status-strip__item.active { background: var(--card-bg); color: var(--c-primary); font-weight: 600; border-color: var(--c-primary); }
/* table.table: the plain-table look */
table.table { width: 100%; border-collapse: collapse; }
table.table th {
  font-size: 12px; font-weight: 600; color: var(--text-muted); text-align: left;
  padding: 8px 12px; background: var(--bg-2); border-bottom: 2px solid var(--border);
}
table.table td { padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }

/* Label/value tables on detail screens (<table> with no class and no header row, each row
   starting with <td class="text-muted">Label</td>): the same look as .detail-list (the Purchase
   Request detail) - a narrow label column, the value beside it, a line between rows. The label
   widths set inline (40%, 50%, 60%) are overridden so values sit next to their labels.
   Right-aligned amounts keep their inline alignment. (Khalid, 18 Sep 2026) */
table:not([class]):not(:has(thead)):has(> tbody > tr > td.text-muted:first-child) {
  border-collapse: collapse;
}
table:not([class]):not(:has(thead)) > tbody > tr:has(> td.text-muted:first-child) > td {
  padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: baseline;
}
table:not([class]):not(:has(thead)) > tbody > tr:has(> td.text-muted:first-child) > td:first-child {
  width: 1% !important; white-space: nowrap; padding-right: 24px; font-size: 12px;
  font-weight: 500; color: var(--text-muted);
}
table:not([class]):not(:has(thead)) > tbody > tr:has(> td.text-muted:first-child):last-child > td { border-bottom: none; }

/* List tables: long-text columns (description, notes, subject, reason...) carry class="wrap".
   They take a set share of the width and wrap inside it, so a long description no longer
   stretches the table and pushes the other columns (Submitted, Status...) off the screen.
   Every other cell stays on one line as before. (Khalid, 18 Sep 2026) */
.lt td.wrap, .data-table td.wrap, .dt td.wrap {
  white-space: normal; overflow-wrap: break-word; width: 35%; min-width: 220px;
}

/* Phones (Khalid asked for a mobile check, 18 Sep 2026). Many screens lay out cards and button
   rows with inline styles, which the stylesheet cannot reach by class:
   - two-part grids (1fr 1fr, a fixed list column beside a detail, 1fr 1.5fr...) and three-across
     grids become one column; four-across becomes two. auto-fit/auto-fill grids already adapt.
   - inline flex rows may wrap onto a second line instead of running off the screen (a row that
     fits is unchanged). */
@media (max-width: 767px) {
  main [style*="grid-template-columns:1fr 1fr"],   main [style*="grid-template-columns: 1fr 1fr"],
  main [style*="grid-template-columns:1fr 1.5fr"], main [style*="grid-template-columns:1fr 3fr"],
  main [style*="grid-template-columns:1fr 360px"], main [style*="px 1fr"],
  main [style*="grid-template-columns:repeat(3,1fr)"], main [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  main [style*="grid-template-columns:repeat(4,1fr)"], main [style*="grid-template-columns:repeat(4,minmax(0,1fr))"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  main [style*="display:flex"], main [style*="display: flex"] { flex-wrap: wrap; row-gap: 8px; }
}

/* Phones: list tables as cards (Khalid, 18 Sep 2026; .bc-cards added 20 Sep 2026 for the
   detail screens, whose tables are written by hand with no class - see bcMarkCardTables()). Each row is a card: the first column
   (usually the reference) is its title, every other value sits on the right beside its column
   name (data-label, copied from the header row by bcLabelTableCells() in emjs_bizcore_core.js),
   and the actions cell runs along the bottom. Covers .lt and .data-table. Cells hidden inline
   stay hidden; a "no records" row spanning the table shows as plain text. */
@media (max-width: 767px) {
  table.lt, table.data-table , table.bc-cards { display: block; width: 100%; min-width: 0 !important; border: none; background: transparent; }
  table.lt thead, table.data-table thead , table.bc-cards thead { display: none; }
  table.lt tbody, table.data-table tbody, table.bc-cards tbody, table.lt tfoot, table.data-table tfoot , table.bc-cards tfoot { display: block; }
  table.lt tr, table.data-table tbody tr, table.bc-cards tbody tr, table.data-table tfoot tr , table.bc-cards tfoot tr {
    display: block; background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 10px 14px; margin: 0 0 10px; box-shadow: var(--shadow-1);
  }
  table.lt tr:nth-child(even) td, table.lt td, table.data-table td , table.bc-cards td { background: transparent; }
  table.lt td, table.data-table td , table.bc-cards td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 4px 0; border: none; white-space: normal; text-align: right;
    width: auto !important; min-width: 0 !important; overflow-wrap: break-word;
  }
  table.lt td::before, table.data-table td::before , table.bc-cards td::before {
    content: attr(data-label); flex-shrink: 0; max-width: 45%; text-align: left;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 11px; font-weight: 500; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  table.lt td[data-label=""]::before, table.data-table td[data-label=""]::before , table.bc-cards td[data-label=""]::before { content: none; }
  /* the first column is the card's title */
  table.lt td:first-child, table.data-table td:first-child , table.bc-cards td:first-child {
    justify-content: flex-start; text-align: left; font-weight: 600; font-size: 14px;
    color: var(--text-primary); padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
  }
  table.lt td:first-child::before, table.data-table td:first-child::before , table.bc-cards td:first-child::before { content: none; }
  /* actions along the bottom */
  table.lt td.a-bar, table.data-table td.a-bar, table.bc-cards td.a-bar,
  table.lt td:has(> .btn), table.data-table td:has(> .btn) , table.bc-cards td:has(> .btn) {
    display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 6px; padding-top: 8px; white-space: normal;
  }
  table.lt td.a-bar::before, table.data-table td.a-bar::before, table.bc-cards td.a-bar::before,
  table.lt td:has(> .btn)::before, table.data-table td:has(> .btn)::before , table.bc-cards td:has(> .btn)::before { content: none; }
  table.lt td.a-bar > .btn + .btn { margin-left: 0; }
  /* a row spanning the whole table ("No records found") */
  table.lt td[colspan], table.data-table td[colspan] , table.bc-cards td[colspan] { justify-content: center; text-align: center; font-weight: 400; border: none; }
  table.lt td[colspan]::before, table.data-table td[colspan]::before , table.bc-cards td[colspan]::before { content: none; }
  table.lt tr:has(> td[colspan]:only-child) { box-shadow: none; }
  /* the list's scroll box no longer needs to scroll sideways */
  /* was ".table-wrap:has(> table.data-table) , table.bc-cards)" - a stray bracket, and
     one bad selector in a list voids the WHOLE rule, so this never applied. */
  .table-wrap:has(> table.lt),
  .table-wrap:has(> table.data-table),
  .table-wrap:has(> table.bc-cards) { overflow-x: visible; }
}

/* ══════════════════════════════════════════════════════════════════
   User themes (Khalid, 18 Sep 2026)
   Each person picks light or dark and a colour theme in their user menu; it is saved to their
   login (login_accounts.ui_mode / ui_theme) and set on <html> as data-theme / data-accent by the
   shared header before the page content draws. A theme only swaps the brand scale, so the header,
   buttons, links, active menu items, tabs and list headers follow; status colours (paid, overdue,
   warnings) stay the same in every theme. No data-accent, or "blue": the Bizheart default above.
   ══════════════════════════════════════════════════════════════════ */
[data-accent="teal"] {
  --brand-900: #134E4A; --brand-800: #115E59; --brand-700: #0F766E; --brand-500: #0D9488;
  --brand-400: #14B8A6; --brand-300: #5EEAD4; --brand-100: #CCFBF1; --brand-50: #F0FDFA;
  --header-bg: #115E59; --info: #115E59; --info-bg: #CCFBF1;
  --active-nav-bg: #F0FDFA; --active-nav-border: #115E59;
}
[data-accent="heart"] {
  --brand-900: #7C2D12; --brand-800: #9A3412; --brand-700: #C2410C; --brand-500: #C2410C;
  --brand-400: #F97316; --brand-300: #FDBA74; --brand-100: #FFEDD5; --brand-50: #FFF7ED;
  --header-bg: #9A3412; --info: #9A3412; --info-bg: #FFEDD5;
  --active-nav-bg: #FFF7ED; --active-nav-border: #9A3412;
}
[data-accent="violet"] {
  --brand-900: #4C1D95; --brand-800: #5B21B6; --brand-700: #6D28D9; --brand-500: #7C3AED;
  --brand-400: #8B5CF6; --brand-300: #C4B5FD; --brand-100: #EDE9FE; --brand-50: #F5F3FF;
  --header-bg: #5B21B6; --info: #5B21B6; --info-bg: #EDE9FE;
  --active-nav-bg: #F5F3FF; --active-nav-border: #5B21B6;
}
[data-accent="graphite"] {
  --brand-900: #0F172A; --brand-800: #1E293B; --brand-700: #334155; --brand-500: #475569;
  --brand-400: #64748B; --brand-300: #CBD5E1; --brand-100: #E2E8F0; --brand-50: #F1F5F9;
  --header-bg: #1E293B; --info: #1E293B; --info-bg: #E2E8F0;
  --active-nav-bg: #F1F5F9; --active-nav-border: #1E293B;
}
/* dark mode: a deeper header and tinted (not pale) highlights for each theme */
[data-theme="dark"][data-accent="teal"]     { --header-bg: #134E4A; --active-nav-bg: rgba(13,148,136,0.22);  --active-nav-border: #2DD4BF; }
[data-theme="dark"][data-accent="heart"]    { --header-bg: #7C2D12; --active-nav-bg: rgba(234,88,12,0.22);   --active-nav-border: #FB923C; }
[data-theme="dark"][data-accent="violet"]   { --header-bg: #4C1D95; --active-nav-bg: rgba(124,58,237,0.24);  --active-nav-border: #A78BFA; }
[data-theme="dark"][data-accent="graphite"] { --header-bg: #020617; --active-nav-bg: rgba(148,163,184,0.16); --active-nav-border: #CBD5E1;
                                              --brand-500: #64748B; }

/* Appearance section of the user menu. The selected mode and colour are shown from the <html>
   attributes themselves, so the menu is always right without any script keeping it in step. */
.dropdown-section {
  padding: 10px 14px 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
}
.appearance-modes { display: flex; gap: 6px; padding: 0 14px 4px; }
.appearance-mode {
  flex: 1 1 0; height: 34px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--card-bg); color: var(--text-primary); font: inherit; font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.appearance-mode:hover { background: var(--bg-2); }
html:not([data-theme="dark"]) .appearance-mode[data-mode="light"],
[data-theme="dark"] .appearance-mode[data-mode="dark"] {
  border-color: var(--brand-500); color: var(--brand-800); background: var(--brand-50); font-weight: 600;
}
[data-theme="dark"] .appearance-mode[data-mode="dark"] { color: var(--text-primary); background: var(--active-nav-bg); }
.appearance-swatches { display: flex; gap: 6px; padding: 6px 14px 10px; }
.appearance-swatch {
  width: 40px; height: 40px; padding: 0; border-radius: 10px; border: 2px solid transparent;
  background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.appearance-swatch:hover { background: var(--bg-2); }
.appearance-swatch::after { content: ""; width: 24px; height: 24px; border-radius: 50%; background: var(--swatch); }
.appearance-swatch[data-choice="blue"]     { --swatch: #1E40AF; }
.appearance-swatch[data-choice="teal"]     { --swatch: #115E59; }
.appearance-swatch[data-choice="heart"]    { --swatch: #C2410C; }
.appearance-swatch[data-choice="violet"]   { --swatch: #6D28D9; }
.appearance-swatch[data-choice="graphite"] { --swatch: #334155; }
html:not([data-accent]) .appearance-swatch[data-choice="blue"],
[data-accent="blue"] .appearance-swatch[data-choice="blue"],
[data-accent="teal"] .appearance-swatch[data-choice="teal"],
[data-accent="heart"] .appearance-swatch[data-choice="heart"],
[data-accent="violet"] .appearance-swatch[data-choice="violet"],
[data-accent="graphite"] .appearance-swatch[data-choice="graphite"] { border-color: var(--swatch); }

/* ══════════════════════════════════════════════════════════════════
   UI refresh, step 1 (Khalid, 18 Sep 2026; from the invoice list mock-up)
   ══════════════════════════════════════════════════════════════════ */
/* Light table headers for all three list styles (.lt, .data-table, .dt): muted text on the card
   colour with a line under it, instead of a solid brand-coloured bar. Headers stay sticky, and
   follow light/dark and every colour theme. */
.lt th,
.data-table thead th,
.dt thead th {
  background: var(--card-bg);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: 1px solid var(--border);
  border-right: none;
}
.data-table thead th:hover,
.data-table thead th.no-sort:hover { color: var(--text-primary); opacity: 1; }
/* numbers line up in every list */
.lt, .data-table, .dt { font-variant-numeric: tabular-nums; }

/* References and codes in the normal font, semi-bold with lined-up numbers, instead of Courier
   (the stylesheet asked for JetBrains Mono, which was never loaded, so browsers fell back to
   Courier New). */
.font-mono, .text-mono, .ref-code {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: 0;
  font-weight: 500;
}

/* Table headers follow their column (Khalid, 19 Sep 2026): a header marked text-right / text-center
   keeps that alignment - .lt th and .data-table thead th set text-align:left, which out-ranked the
   class, so number headers sat on the left while their numbers sat on the right. Headers with no
   class are aligned to their column's cells by bcAlignTableHeaders() in emjs_bizcore_core.js. */
table th.text-right, table th.text-end { text-align: right; }
table th.text-center { text-align: center; }

/* Reports screens (Khalid, 19 Sep 2026): every app's Reports is the list of reports on the left and the chosen
   report beside it (Accounting, Finance and HR moved into the split CRM, Inventory, Purchasing and Sales Manager
   already had). The report area shows a prompt until a report is chosen; the chosen report is highlighted in the
   list (the Reports click handler in emjs_bizcore_core.js). */
.rpt-prompt {
  height: 100%; min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: var(--text-muted); text-align: center; padding: 32px 16px;
}
.rpt-prompt .fa { font-size: 30px; color: var(--border); }
.rpt-prompt p { margin: 0; font-size: 14px; }
[data-report-content] > #page1a, [data-report-content] { box-sizing: border-box; }
#page1[data-report-content] > #page1a { padding: 16px 20px; }
[data-report-menu] { height: 100%; display: flex; flex-direction: column; }
[data-report-menu] > .ap-list { flex: 1 1 auto; min-height: 0; }
[data-report-menu] .ap-item:focus-visible { outline: 2px solid var(--brand-500); outline-offset: -2px; }
/* the list is always beside the report, so the old "back to reports" buttons inside a report go */
[data-report-content] [onclick="getaccreportmenu()"],
[data-report-content] [onclick="getfsreportslist()"],
[data-report-content] [onclick="gethrheadcount()"],
[data-report-content] [onclick="getsmreportmenu()"] { display: none !important; }
/* On a phone the list sits above the report and the page scrolls: the fixed-height side-by-side grid left the
   report a small box (9px on Inventory). A tap on a report scrolls down to it. */
@media (max-width: 768px) {
  div:has(> [data-report-content]) { display: flex !important; flex-direction: column; height: auto !important; }
  div:has(> [data-report-content]) > * { height: auto !important; overflow: visible !important; }
  [data-report-menu], [data-report-menu] > .ap-list, [data-report-menu] .ap-list-body { height: auto !important; flex: none; }
  [data-report-content] { border-top: 1px solid var(--border); scroll-margin-top: 64px; }
  .rpt-prompt { min-height: 160px; }
}

/* Modal scrolling through a form block's own wrappers (20 Sep 2026).
   .modal is a flex column whose body scrolls, but a form block wraps the header, body and footer in
   its own <div> and <form>. Those sized to their content, so the body never shrank and a long form
   pushed its buttons off the bottom of the screen - unreachable on a phone, where nothing else
   scrolls either. The wrappers now pass the height constraint through. */
.modal > div,
.modal > form,
.modal > div > form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.modal .modal-body   { min-height: 0; }
.modal .modal-header { flex-shrink: 0; }
@media (max-width: 768px) {
  .modal-overlay { padding: var(--space-3); }
  .modal         { max-height: calc(100dvh - 24px); }   /* 90vh ignores a phone's browser bars */
}

/* Forms on a phone (20 Sep 2026).
   Nearly every form is a two-column table - the label beside the field - which on a 375px screen
   leaves the field about half the width, so dates, amounts and names are typed into a slot barely
   wider than the keyboard's suggestions. On a small screen the label sits above its field instead.
   Scoped to rows whose first cell really is a label, so a table of data inside a form is untouched. */
@media (max-width: 600px) {
  table.table tr:has(> td:first-child > label),
  table.table tr:has(> td:first-child > b > label) { display: block; }
  table.table tr:has(> td:first-child > label) > td,
  table.table tr:has(> td:first-child > b > label) > td {
    display: block; width: auto; padding: 2px 0; border: 0;
  }
  table.table tr:has(> td:first-child > label) > td:first-child,
  table.table tr:has(> td:first-child > b > label) > td:first-child {
    padding-top: 12px; font-weight: 600;
  }
  table.table tr:has(> td:first-child > label) input[type="text"],
  table.table tr:has(> td:first-child > label) input[type="date"],
  table.table tr:has(> td:first-child > label) input[type="number"],
  table.table tr:has(> td:first-child > label) input[type="email"],
  table.table tr:has(> td:first-child > label) input[type="password"],
  table.table tr:has(> td:first-child > label) select,
  table.table tr:has(> td:first-child > label) textarea,
  table.table tr:has(> td:first-child > label) .form-control,
  table.table tr:has(> td:first-child > label) .form-input,
  table.table tr:has(> td:first-child > label) .form-select,
  table.table tr:has(> td:first-child > label) .form-textarea { width: 100%; box-sizing: border-box; }
}

/* The month on a phone (20 Sep 2026): 7 columns in 375px means about 50px each, so the cells are
   shorter, the entries smaller, and a long entry title is clipped rather than widening its column
   (the grid columns are minmax(0,1fr) above for the same reason). */
@media (max-width: 600px) {
  .calendar-month__day    { min-height: 58px; padding: 3px 2px; }
  .calendar-month__day-num{ font-size: 10.5px; }
  .calendar-month__dow    { padding: 8px 2px; font-size: 10px; letter-spacing: 0; }
  .calendar-month__entry  { font-size: 9px; padding: 1px 3px; margin-bottom: 1px;
                            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cal-day                { min-height: 58px; font-size: 10px; }
  .cal-event              { font-size: 9px; padding: 1px 4px; }
}

/* Notes addressed to colleagues (21 Sep 2026): the To field, the @name list and a note in a list
   (emjs_bizcore_core.js, emxml_blkNotePanel.xml, Messages). */
.bc-noteto { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-height:40px;
  padding:5px 8px; border:1px solid var(--border); border-radius:8px; background:var(--surface, #fff); cursor:text; }
.bc-noteto__input { flex:1 1 140px; min-width:0; border:0; outline:0; padding:4px 2px; font:inherit;
  background:transparent; color:inherit; }
.bc-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 4px 2px 10px; border-radius:999px;
  background:var(--primary-50, #EFF6FF); color:var(--primary-700, #1E40AF); font-size:13px; font-weight:600; }
.bc-chip__x { border:0; background:transparent; color:inherit; font-size:16px; line-height:1; padding:0 4px; cursor:pointer; }
.bc-noteto__menu { display:none; position:absolute; left:0; right:0; top:100%; z-index:30; margin-top:4px;
  max-height:240px; overflow:auto; background:var(--surface, #fff); border:1px solid var(--border);
  border-radius:8px; box-shadow:0 8px 24px rgba(15,23,42,.14); }
.bc-mention__menu { position:relative; top:0; }
.bc-noteto__opt { display:block; width:100%; text-align:left; border:0; background:transparent; padding:8px 12px;
  font:inherit; color:inherit; cursor:pointer; }
.bc-noteto__opt.on, .bc-noteto__opt:hover { background:var(--primary-50, #EFF6FF); }
.bc-note { padding:10px 0; border-bottom:1px solid var(--border); }
.bc-note:last-child { border-bottom:0; }
.bc-note__head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; margin-bottom:4px; }
.bc-note__to { font-size:12px; color:var(--text-muted, #64748B); }
.bc-note__text { white-space:pre-wrap; font-size:14px; }
.bc-note--new { background:var(--primary-50, #EFF6FF); margin:0 -8px; padding:10px 8px; border-radius:6px; }

/* Tasks on the dashboard (21 Sep 2026): a goal, a message or a team plan as one tappable row. */
.bc-dashrow { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0;
  border-bottom:1px solid var(--border); color:inherit; text-decoration:none; }
.bc-dashrow:last-of-type { border-bottom:0; }
.bc-dashrow:hover .fw-600 { text-decoration:underline; }
.bc-dashrow__main { display:flex; flex-direction:column; min-width:0; }
.bc-dashrow__main > span { overflow:hidden; text-overflow:ellipsis; }
.bc-dashrow > span:last-child { flex-shrink:0; white-space:nowrap; }

/* ══════════════════════════════════════════════════════════════════
   Gantt chart (21 Sep 2026): Samepage's chart (emjs_bizcore_gantt.js), with its colours mapped to Bizheart's
   tokens. The rules below are Samepage's (samepage.css), copied as they are; [data-sp-theme="dark"] became
   [data-theme="dark"]. */
.sp-gantt {
  --sp-ink: var(--text-primary); --sp-text: var(--text-primary); --sp-text-soft: var(--text-secondary);
  --sp-text-faint: var(--text-muted); --sp-paper: var(--page-bg); --sp-surface: var(--card-bg);
  --sp-border: var(--border); --sp-border-soft: var(--border); --sp-row-alt: var(--row-stripe);
  --sp-accent: var(--brand-700); --sp-accent-ink: var(--brand-800); --sp-accent-soft: var(--brand-50);
  --sp-good: #2E9E5B; --sp-warn: #C6890F; --sp-warn-ink: #7A5408; --sp-warn-line: #F0D9AE;
  --sp-critical: #D5484B; --sp-critical-ink: #B4232A;
  --sp-gantt-weekend: #F1F3F4; --sp-gantt-bar: #D8DFE3; --sp-gantt-bar-active: #C7D7F5; --sp-gantt-bar-done: #CDEBD8;
  --sp-gantt-bar-late: #F6D3D3; --sp-gantt-bar-moved: #F6E5C4; --sp-gantt-bar-goal: #E3E7EA; --sp-gantt-line: #7C8A93;
}
[data-theme="dark"] .sp-gantt {
  --sp-accent-ink: #93C5FD; --sp-accent-soft: rgba(37, 99, 235, .18);
  --sp-good: #3DB870; --sp-warn: #D9A13A; --sp-warn-ink: #EBC67E; --sp-warn-line: #5C4A22;
  --sp-critical: #E4676A; --sp-critical-ink: #F29698;
  --sp-gantt-weekend: #1B272E; --sp-gantt-bar: #34444D; --sp-gantt-bar-goal: #2C3B43; --sp-gantt-bar-active: #1E3A6E;
  --sp-gantt-bar-done: #1E4B34; --sp-gantt-bar-late: #5B2B2E; --sp-gantt-bar-moved: #574521; --sp-gantt-line: #8898A2;
}
/* ---------- Project Gantt chart (emxml_blkprojgantt.xml + emjs_spgantt.js) ---------- */
.sp-gantt { padding: 10px 12px 12px; }
.sp-gantt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.sp-gantt-toolbar .btn-default { background: var(--sp-surface); border-color: var(--sp-border); color: var(--sp-text-soft); font-size: 12px; box-shadow: none; }
.sp-gantt-toolbar .btn-default:hover { background: var(--sp-border-soft); color: var(--sp-text); }
.sp-gantt-toolbar .btn-default.active { background: var(--sp-accent-soft); border-color: var(--sp-accent); color: var(--sp-accent-ink); box-shadow: none; }
.sp-gantt-period { font-weight: 650; font-size: 14px; color: var(--sp-text); margin: 0 4px; }
.sp-gantt-expand { margin-left: auto; }
.sp-gantt-empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 34px 0; color: var(--sp-text-faint); font-size: 13px; }
.sp-gantt-chart { display: flex; border: 1px solid var(--sp-border); border-radius: 8px; overflow: hidden; background: var(--sp-surface); }
.sp-gantt-names { flex: 0 0 auto; overflow: hidden; border-right: 1px solid var(--sp-border); background: var(--sp-surface); }
.sp-gantt-names-head { display: flex; justify-content: space-between; align-items: flex-end; height: 46px; padding: 0 10px 6px; box-sizing: border-box; border-bottom: 1px solid var(--sp-border); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sp-text-faint); background: var(--sp-paper); }
.sp-gantt-name { display: flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px 0 6px; box-sizing: border-box; border-bottom: 1px solid var(--sp-border-soft); font-size: 12.5px; color: var(--sp-text); white-space: nowrap; }
.sp-gantt-name .sp-gantt-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.sp-gantt-name .sp-gantt-col-dates { flex: 0 0 auto; font-size: 11px; color: var(--sp-text-faint); }
.sp-gantt-name.lvl0 { font-weight: 650; background: var(--sp-paper); }
.sp-gantt-name.lvl1 { padding-left: 10px; }
.sp-gantt-name.lvl2 { padding-left: 38px; color: var(--sp-text-soft); font-size: 12px; }
.sp-gantt-name.is-link .sp-gantt-label { cursor: pointer; }
.sp-gantt-name.is-link:hover .sp-gantt-label { color: var(--sp-accent); text-decoration: underline; }
.sp-gantt-toggle { flex: 0 0 16px; width: 16px; text-align: center; cursor: pointer; color: var(--sp-text-faint); font-size: 12px; user-select: none; }
.sp-gantt-toggle:hover { color: var(--sp-text); }
.sp-gantt-toggle.is-leaf { cursor: default; }
.sp-gantt-timeline { flex: 1 1 auto; overflow: auto; }
.sp-gantt-svg { display: block; font-family: inherit; }
.sp-gantt-head-bg { fill: var(--sp-paper); }
.sp-gantt-head-major { font-size: 12px; font-weight: 650; fill: var(--sp-text); }
.sp-gantt-head-minor { font-size: 11px; fill: var(--sp-text-soft); }
.sp-gantt-head-minor.weekend { fill: var(--sp-text-faint); }
.sp-gantt-head-sub { font-size: 9px; fill: var(--sp-text-faint); }
.sp-gantt-row { fill: transparent; }
.sp-gantt-row.odd { fill: var(--sp-row-alt); }
.sp-gantt-row.project { fill: var(--sp-paper); }
.sp-gantt-weekend { fill: var(--sp-gantt-weekend); }
.sp-gantt-grid { stroke: var(--sp-border-soft); stroke-width: 1; shape-rendering: crispEdges; }
.sp-gantt-grid.major { stroke: var(--sp-border); }
.sp-gantt-bar { stroke: none; }
.sp-gantt-bar.task, .sp-gantt-bar.task.is-new { fill: var(--sp-gantt-bar); }
.sp-gantt-bar.task.is-active { fill: var(--sp-gantt-bar-active); }
.sp-gantt-bar.task.is-done { fill: var(--sp-gantt-bar-done); }
.sp-gantt-bar.task.is-late, .sp-gantt-bar.task.is-missed { fill: var(--sp-gantt-bar-late); }
.sp-gantt-bar.task.is-moved { fill: var(--sp-gantt-bar-moved); }
.sp-gantt-bar.task.is-critical { stroke: var(--sp-critical); stroke-width: 1.5; }
.sp-gantt-bar.task-progress { pointer-events: none; }
.sp-gantt-bar.task-progress.is-new { fill: var(--sp-text-faint); }
.sp-gantt-bar.task-progress.is-active { fill: var(--sp-accent); }
.sp-gantt-bar.task-progress.is-done { fill: var(--sp-good); }
.sp-gantt-bar.task-progress.is-late, .sp-gantt-bar.task-progress.is-missed { fill: var(--sp-critical); }
.sp-gantt-bar.task-progress.is-moved { fill: var(--sp-warn); }
.sp-gantt-bar.task-actual, .sp-gantt-bar.project-actual { fill: var(--sp-ink); opacity: .55; }
.sp-gantt-bar.project { fill: var(--sp-ink); }
.sp-gantt-bar.project.is-done { fill: var(--sp-good); }
.sp-gantt-bar.goal { fill: var(--sp-gantt-bar-goal); }
.sp-gantt-bar.goal.is-active { fill: var(--sp-gantt-bar-active); }
.sp-gantt-bar.goal.is-done { fill: var(--sp-gantt-bar-done); }
.sp-gantt-bar.goal.is-late, .sp-gantt-bar.goal.is-missed { fill: var(--sp-gantt-bar-late); }
.sp-gantt-milestone { fill: var(--sp-ink); stroke: var(--sp-surface); stroke-width: 1.5; }
.sp-gantt-milestone.is-done { fill: var(--sp-good); }
.sp-gantt-milestone.is-late, .sp-gantt-milestone.is-missed { fill: var(--sp-critical); }
.sp-gantt-milestone.is-moved { fill: var(--sp-warn); }
.sp-gantt-milestone.is-active { fill: var(--sp-accent); }
.sp-gantt-goal { fill: var(--sp-text-faint); stroke: var(--sp-surface); stroke-width: 1; }
.sp-gantt-goal.is-active { fill: var(--sp-accent); }
.sp-gantt-goal.is-done { fill: var(--sp-good); }
.sp-gantt-goal.is-late, .sp-gantt-goal.is-missed { fill: var(--sp-critical); }
.sp-gantt-goal.is-moved { fill: var(--sp-warn); }
.sp-gantt-goal-actual { fill: var(--sp-good); stroke: var(--sp-surface); stroke-width: 1; }
.sp-gantt-goal-dot { fill: var(--sp-text-faint); }
.sp-gantt-goal-dot.is-done { fill: var(--sp-good); }
.sp-gantt-goal-dot.is-late, .sp-gantt-goal-dot.is-missed { fill: var(--sp-critical); }
.sp-gantt-goal-dot.is-active { fill: var(--sp-accent); }
.sp-gantt-goal-dot.is-moved { fill: var(--sp-warn); }
.sp-gantt-link { fill: none; stroke: var(--sp-gantt-line); stroke-width: 1.2; }
.sp-gantt-link-head { fill: var(--sp-gantt-line); }
.sp-gantt-today { stroke: var(--sp-critical); stroke-width: 1.5; stroke-dasharray: 4 3; }
.sp-gantt-today-label { font-size: 10px; font-weight: 600; fill: var(--sp-critical); }
.sp-gantt-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 11.5px; color: var(--sp-text-soft); }
.sp-gantt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sp-gantt-key { display: inline-block; width: 14px; height: 9px; border-radius: 2px; background: var(--sp-gantt-bar); border-left: 6px solid var(--sp-text-faint); box-sizing: border-box; }
.sp-gantt-key.is-active { background: var(--sp-gantt-bar-active); border-left-color: var(--sp-accent); }
.sp-gantt-key.is-done { background: var(--sp-gantt-bar-done); border-left-color: var(--sp-good); }
.sp-gantt-key.is-late { background: var(--sp-gantt-bar-late); border-left-color: var(--sp-critical); }
.sp-gantt-key.is-moved { background: var(--sp-gantt-bar-moved); border-left-color: var(--sp-warn); }
.sp-gantt-key.is-missed { background: var(--sp-gantt-bar-late); border-left-color: var(--sp-critical); }
.sp-gantt-key.key-actual { background: var(--sp-ink); opacity: .55; border: 0; height: 4px; }
.sp-gantt-key.key-milestone { width: 9px; height: 9px; border: 0; background: var(--sp-ink); transform: rotate(45deg); border-radius: 1px; }
.sp-gantt-empty[hidden], .sp-gantt-data[hidden] { display: none; }
.sp-gantt-bar.task[data-drag], .sp-gantt-milestone[data-drag] { cursor: move; }
.sp-gantt-handle { fill: transparent; cursor: col-resize; }
body.sp-gantt-dragging { user-select: none; cursor: move; }
body.sp-gantt-dragging .sp-gantt-svg * { pointer-events: none; }
.sp-gantt-bar.goal[data-drag], .sp-gantt-goal[data-drag] { cursor: move; }
.sp-gantt-page .sp-gantt-timeline { max-height: calc(100vh - 300px); }
.sp-gantt-page .sp-gantt-names { max-height: calc(100vh - 300px); }
/* The period arrows flank the period itself, so it reads as one control:
   step back, what you are looking at, step forward. */
.sp-gantt-period-nav { display: flex; align-items: center; gap: 4px; }
.sp-gantt-period-nav .sp-gantt-period { min-width: 152px; text-align: center; margin: 0; }
.sp-gantt-step { font-size: 15px; line-height: 1; padding: 3px 10px; }
/* the Gantt on a phone (2026-09-19): a narrow name column without its dates, so the timeline shows beside it */
.sp-gantt-names.is-narrow .sp-gantt-col-dates { display: none; }
.sp-gantt-names.is-narrow .sp-gantt-name { font-size: 12px; padding-right: 6px; }
/* critical path and dependencies (2026-09-19): emjs_spgantt.js, Task Detail's dependency card */
.sp-gantt-bar.task.is-onpath { stroke: var(--sp-critical-ink); stroke-width: 2; }
.sp-gantt-milestone.is-onpath { stroke: var(--sp-critical-ink); stroke-width: 2; }
.sp-gantt-link.is-onpath { stroke: var(--sp-critical-ink); stroke-width: 1.8; }
.sp-gantt-link-head.is-onpath { fill: var(--sp-critical-ink); }
.sp-gantt-link-label { font-size: 9.5px; fill: var(--sp-text-soft); font-variant-numeric: tabular-nums; }
.sp-gantt-conflict circle { fill: var(--sp-warn); }
.sp-gantt-conflict text { fill: #fff; font-size: 10px; font-weight: 700; pointer-events: none; }
.sp-gantt-key.key-onpath { background: transparent; border: 2px solid var(--sp-critical-ink); height: 10px; }
.sp-gantt-key.key-conflict { width: 10px; height: 10px; border-radius: 50%; background: var(--sp-warn); border: 0; }
.sp-gantt-cpsum { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; margin: 6px 0 8px; font-size: 12.5px; color: var(--sp-text-soft); }
.sp-gantt-cpsum[hidden] { display: none; }
.sp-gantt-cpsum span { display: inline-flex; align-items: center; gap: 6px; }
.sp-gantt-cp-n { color: var(--sp-text); font-weight: 600; }
.sp-gantt-cp-conf { color: var(--sp-warn-ink); }
.sp-gantt-gap { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 6px;
  border-radius: 50%; background: var(--sp-warn-line); color: var(--sp-warn-ink); font-size: 10px; font-weight: 700; line-height: 1; flex: none; }
[data-theme="dark"] .sp-gantt-bar.project,
[data-theme="dark"] .sp-gantt-bar.task-actual, [data-theme="dark"] .sp-gantt-bar.project-actual,
[data-theme="dark"] .sp-gantt-milestone { fill: #B9C6CE; }
[data-theme="dark"] .sp-gantt-key.key-actual,
[data-theme="dark"] .sp-gantt-key.key-milestone { background: #B9C6CE; }

/* My Time (21 Sep 2026): the week's hours grid */
.ts-grid .ts-cell { width: 4.2em; min-width: 3.4em; text-align: right; padding-left: 4px; padding-right: 6px; }
.ts-grid td { vertical-align: top; }