/* ==========================================================================
   MTCOM Master Design System & Component Architecture v31.0
   Enterprise Facility & Maintenance Management Design System
   Inspired by DailyPay Architecture · WCAG AA Compliant · Zero Unreadable Text
   Mobile-First Responsive · Glassmorphic Navigation · Instant Light/Dark Mode
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Kufi+Arabic:wght@100..900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* Self-Hosted Local Fallback @font-face */
@font-face {
    font-family: 'Google Sans';
    src: url('/fonts/GoogleSans-Regular.ttf') format('truetype');
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Google Sans';
    src: url('/fonts/GoogleSans-Bold.ttf') format('truetype');
    font-weight: 700 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Kufi Arabic';
    src: url('/fonts/NotoKufiArabic-Regular.ttf') format('truetype');
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Kufi Arabic';
    src: url('/fonts/NotoKufiArabic-Bold.ttf') format('truetype');
    font-weight: 700 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ----------------------------------------------------------------------
       Brand & Semantic Color Tokens (Light Mode - WCAG AA High Contrast)
       ---------------------------------------------------------------------- */
    --brand-primary:        #059669;
    --brand-primary-hover:  #047857;
    --brand-primary-dark:   #064e3b;
    --brand-primary-light:  #10b981;
    --brand-primary-tint:   #ecfdf5;
    --brand-primary-border: #a7f3d0;

    --brand-accent:         #4f46e5;
    --brand-accent-hover:   #4338ca;
    --brand-accent-tint:    #eef2ff;
    --brand-accent-border:  #c7d2fe;

    /* Surfaces & Layout Backgrounds */
    --bg-page:              #f8fafc;
    --bg-page-subtle:       #f1f5f9;
    --bg-card:              #ffffff;
    --bg-card-subtle:       #f8fafc;
    --bg-card-hover:        #f1f5f9;
    --bg-card-active:       #e2e8f0;
    --bg-surface:           #ffffff;
    --bg-surface-glass:     rgba(255, 255, 255, 0.94);
    --bg-overlay:           rgba(15, 23, 42, 0.72);

    /* Text & Ink Typography */
    --ink-primary:          #0f172a;
    --ink-secondary:        #1e293b;
    --ink-muted:            #475569;
    --ink-subtle:           #64748b;
    --ink-inverse:          #ffffff;

    /* Borders & Dividers */
    --border-light:         #e2e8f0;
    --border-subtle:        #f1f5f9;
    --border-strong:        #cbd5e1;
    --border-focus:         #059669;

    /* Semantic Status Colors */
    --success-bg:           #ecfdf5;
    --success-border:       #a7f3d0;
    --success-text:         #065f46;
    --success-accent:       #059669;

    --danger-bg:            #fff1f2;
    --danger-border:        #fecdd3;
    --danger-text:          #9f1239;
    --danger-accent:        #e11d48;
    --danger-hover:         #be123c;

    --warning-bg:           #fffbeb;
    --warning-border:       #fde68a;
    --warning-text:         #92400e;
    --warning-accent:       #d97706;

    --info-bg:              #f0f9ff;
    --info-border:          #bae6fd;
    --info-text:            #0369a1;
    --info-accent:          #0284c7;

    /* KPI Semantic Card Tokens */
    --kpi-tickets-bg:       linear-gradient(145deg, #f0fdf4 0%, #ffffff 100%);
    --kpi-tickets-border:   #86efac;
    --kpi-tickets-top:      #059669;
    --kpi-tickets-text:     #064e3b;
    --kpi-tickets-label:    #047857;

    --kpi-tasks-bg:         linear-gradient(145deg, #eef2ff 0%, #ffffff 100%);
    --kpi-tasks-border:     #c7d2fe;
    --kpi-tasks-top:        #4f46e5;
    --kpi-tasks-text:       #312e81;
    --kpi-tasks-label:      #3730a3;

    --kpi-critical-bg:      linear-gradient(145deg, #fff1f2 0%, #ffffff 100%);
    --kpi-critical-border:  #fecdd3;
    --kpi-critical-top:     #e11d48;
    --kpi-critical-text:    #9f1239;
    --kpi-critical-label:   #be123c;

    --kpi-inventory-bg:     linear-gradient(145deg, #fffbeb 0%, #ffffff 100%);
    --kpi-inventory-border: #fde68a;
    --kpi-inventory-top:    #d97706;
    --kpi-inventory-text:   #78350f;
    --kpi-inventory-label:  #92400e;

    --kpi-facility-bg:      linear-gradient(145deg, #f0f9ff 0%, #ffffff 100%);
    --kpi-facility-border:  #bae6fd;
    --kpi-facility-top:     #0284c7;
    --kpi-facility-text:    #0c4a6e;
    --kpi-facility-label:   #0369a1;

    /* Multi-layered Soft Shadows */
    --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 2px 6px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 6px 18px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -2px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 14px 32px -4px rgba(15, 23, 42, 0.1), 0 4px 14px -2px rgba(15, 23, 42, 0.05);
    --shadow-xl: 0 24px 48px -8px rgba(15, 23, 42, 0.16), 0 8px 20px -4px rgba(15, 23, 42, 0.06);

    /* Radii */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-full: 9999px;

    /* Dimensions */
    --app-bottom-height: 68px;

    /* Fonts */
    --font-sans: 'Google Sans', 'Product Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-arabic: 'Noto Kufi Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --font-family-base: var(--font-sans);
    --font-primary: var(--font-family-base);
    --bs-body-font-family: var(--font-family-base);
    --bs-font-sans-serif: var(--font-family-base);
}

[dir="rtl"], [lang="ar"] {
    --font-family-base: var(--font-arabic);
    --font-primary: var(--font-arabic);
    --bs-body-font-family: var(--font-arabic);
    --bs-font-sans-serif: var(--font-arabic);
}

/* ----------------------------------------------------------------------
   Dark Mode Tokens (WCAG AA High Contrast - Glowing Accents & Deep Slate)
   ---------------------------------------------------------------------- */
[data-theme="dark"] {
    --brand-primary:        #10b981;
    --brand-primary-hover:  #34d399;
    --brand-primary-dark:   #059669;
    --brand-primary-light:  #6ee7b7;
    --brand-primary-tint:   rgba(16, 185, 129, 0.14);
    --brand-primary-border: rgba(16, 185, 129, 0.35);

    --brand-accent:         #818cf8;
    --brand-accent-hover:   #a5b4fc;
    --brand-accent-tint:    rgba(129, 140, 248, 0.14);
    --brand-accent-border:  rgba(129, 140, 248, 0.35);

    --bg-page:              #090d16;
    --bg-page-subtle:       #0f172a;
    --bg-card:              #131c2d;
    --bg-card-subtle:       #182338;
    --bg-card-hover:        #1e2d48;
    --bg-card-active:       #243758;
    --bg-surface:           #131c2d;
    --bg-surface-glass:     rgba(19, 28, 45, 0.95);
    --bg-overlay:           rgba(0, 0, 0, 0.82);

    --ink-primary:          #f8fafc;
    --ink-secondary:        #e2e8f0;
    --ink-muted:            #94a3b8;
    --ink-subtle:           #64748b;
    --ink-inverse:          #0f172a;

    --border-light:         #23334d;
    --border-subtle:        #1a263a;
    --border-strong:        #334766;
    --border-focus:         #10b981;

    --success-bg:           rgba(16, 185, 129, 0.16);
    --success-border:       rgba(16, 185, 129, 0.4);
    --success-text:         #34d399;
    --success-accent:       #10b981;

    --danger-bg:            rgba(225, 29, 72, 0.16);
    --danger-border:        rgba(225, 29, 72, 0.4);
    --danger-text:          #fb7185;
    --danger-accent:        #f43f5e;
    --danger-hover:         #e11d48;

    --warning-bg:           rgba(217, 119, 6, 0.16);
    --warning-border:       rgba(217, 119, 6, 0.4);
    --warning-text:         #fbbf24;
    --warning-accent:       #f59e0b;

    --info-bg:              rgba(2, 132, 199, 0.16);
    --info-border:          rgba(2, 132, 199, 0.4);
    --info-text:            #38bdf8;
    --info-accent:          #0ea5e9;

    --kpi-tickets-bg:       linear-gradient(145deg, rgba(16, 185, 129, 0.15) 0%, #131c2d 100%);
    --kpi-tickets-border:   rgba(16, 185, 129, 0.4);
    --kpi-tickets-top:      #10b981;
    --kpi-tickets-text:     #34d399;
    --kpi-tickets-label:    #a7f3d0;

    --kpi-tasks-bg:         linear-gradient(145deg, rgba(99, 102, 241, 0.15) 0%, #131c2d 100%);
    --kpi-tasks-border:     rgba(99, 102, 241, 0.4);
    --kpi-tasks-top:        #818cf8;
    --kpi-tasks-text:       #a5b4fc;
    --kpi-tasks-label:      #c7d2fe;

    --kpi-critical-bg:      linear-gradient(145deg, rgba(225, 29, 72, 0.15) 0%, #131c2d 100%);
    --kpi-critical-border:  rgba(225, 29, 72, 0.4);
    --kpi-critical-top:     #f43f5e;
    --kpi-critical-text:    #fb7185;
    --kpi-critical-label:   #fecdd3;

    --kpi-inventory-bg:     linear-gradient(145deg, rgba(217, 119, 6, 0.15) 0%, #131c2d 100%);
    --kpi-inventory-border: rgba(217, 119, 6, 0.4);
    --kpi-inventory-top:    #f59e0b;
    --kpi-inventory-text:   #fbbf24;
    --kpi-inventory-label:  #fde68a;

    --kpi-facility-bg:      linear-gradient(145deg, rgba(2, 132, 199, 0.15) 0%, #131c2d 100%);
    --kpi-facility-border:  rgba(2, 132, 199, 0.4);
    --kpi-facility-top:     #38bdf8;
    --kpi-facility-text:    #7dd3fc;
    --kpi-facility-label:   #bae6fd;

    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 6px 0 rgba(0, 0, 0, 0.45);
    --shadow-md: 0 6px 18px -2px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 14px 32px -4px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 24px 48px -8px rgba(0, 0, 0, 0.75);
}

/* ----------------------------------------------------------------------
   Anti-Overflow Foundations & Base Typography
   ---------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box !important;
}

html, body, .app-body, main.container, .container, header.topbar, footer {
    max-width: 100vw !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
}

html, body, .app-body {
    font-family: var(--font-family-base) !important;
    background-color: var(--bg-page) !important;
    color: var(--ink-primary) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
}

body, button, input, select, textarea, .form-control, .btn, table, th, td, h1, h2, h3, h4, h5, h6, .navbar, .nav-link, .card, .dropdown-menu {
    font-family: var(--font-family-base) !important;
}

[dir="rtl"] * {
    letter-spacing: normal !important;
}

[dir="rtl"] .brand-text,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .eyebrow, [dir="rtl"] .drawer-section-title {
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* ----------------------------------------------------------------------
   Top Application Bar (Sticky Glassmorphic Header)
   ---------------------------------------------------------------------- */
.topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 20000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 62px !important;
    padding: 0 18px !important;
    background: var(--bg-surface-glass) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid var(--border-light) !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
}

[data-theme="dark"] .topbar {
    background: rgba(15, 23, 42, 0.94) !important;
    border-color: rgba(51, 65, 85, 0.7) !important;
}

.topbar-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
}

.brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
}

.brand-logo-icon {
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, var(--brand-primary), #0d9488) !important;
    box-shadow: 0 2px 10px rgba(5, 150, 105, 0.35) !important;
    flex-shrink: 0 !important;
}

.brand-text {
    font-size: 19px !important;
    font-weight: 900 !important;
    color: var(--ink-primary) !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
}

/* Desktop Primary Navigation */
.desktop-nav {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-inline-start: 12px !important;
    flex: 1 1 auto !important;
}

.desktop-nav a,
.nav-dropdown-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 11px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    color: var(--ink-secondary) !important;
    background: var(--bg-card-subtle) !important;
    border: 1px solid var(--border-light) !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.desktop-nav a:hover,
.nav-dropdown-btn:hover {
    background: var(--bg-card-hover) !important;
    color: var(--brand-primary) !important;
    border-color: var(--brand-primary-border) !important;
}

.desktop-nav a.active,
.nav-dropdown-btn.active {
    background: var(--brand-primary) !important;
    color: #ffffff !important;
    border-color: var(--brand-primary) !important;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35) !important;
}

.desktop-nav a.active svg,
.nav-dropdown-btn.active svg {
    color: #ffffff !important;
}

/* Desktop Dropdown Menus */
.nav-dropdown {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}

.nav-dropdown-btn .dropdown-chevron {
    transition: transform 0.2s ease !important;
}

.nav-dropdown.is-open .nav-dropdown-btn .dropdown-chevron,
.nav-dropdown:hover .nav-dropdown-btn .dropdown-chevron {
    transform: rotate(180deg) !important;
}

.nav-dropdown-menu {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: auto !important;
    min-width: 240px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    padding: 6px !important;
    z-index: 30000 !important;
    flex-direction: column !important;
    gap: 2px !important;
    pointer-events: auto !important;
    animation: menuSlideDown 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Invisible hover bridge to eliminate hover loss when cursor crosses the gap */
.nav-dropdown-menu::before {
    content: '' !important;
    position: absolute !important;
    top: -14px !important;
    left: 0 !important;
    right: 0 !important;
    height: 14px !important;
    background: transparent !important;
    pointer-events: auto !important;
}

/* Open State (via Class or Hover or Focus) */
.nav-dropdown.is-open > .nav-dropdown-menu,
.nav-dropdown:hover > .nav-dropdown-menu,
.nav-dropdown:focus-within > .nav-dropdown-menu {
    display: flex !important;
}

/* Critical directional alignment:
   In LTR, topbar-right is at the right edge of viewport, so menu must open towards left.
   In RTL, topbar-right is at the left edge of viewport, so menu must open towards right. */
.topbar-right .nav-dropdown-menu {
    left: auto !important;
    right: 0 !important;
}

[dir="rtl"] .topbar-right .nav-dropdown-menu {
    left: 0 !important;
    right: auto !important;
}

/* Default non-topbar-right RTL behavior */
[dir="rtl"] .topbar-left .nav-dropdown-menu,
[dir="rtl"] .desktop-nav .nav-dropdown-menu {
    left: auto !important;
    right: 0 !important;
}

@keyframes menuSlideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.nav-dropdown-menu a,
.nav-dropdown-menu button,
.user-menu-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 13px !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--ink-primary) !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: all 0.15s ease !important;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu button:hover,
.user-menu-item:hover {
    background: var(--bg-card-hover) !important;
    color: var(--brand-primary) !important;
}

.nav-dropdown-menu a.active,
.user-menu-item.active {
    background: var(--brand-primary) !important;
    color: #ffffff !important;
}

.nav-dropdown-menu a svg,
.nav-dropdown-menu a i,
.user-menu-item svg,
.user-menu-item i {
    width: 16px !important;
    font-size: 14px !important;
    color: var(--ink-muted) !important;
    flex-shrink: 0 !important;
    text-align: center !important;
    transition: color 0.15s ease !important;
}

.nav-dropdown-menu a:hover svg,
.nav-dropdown-menu a:hover i,
.user-menu-item:hover svg,
.user-menu-item:hover i {
    color: var(--brand-primary) !important;
}

/* User Menu Specific Details */
.user-dropdown-menu {
    min-width: 250px !important;
    padding: 8px !important;
}

.user-menu-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 10px 12px 10px !important;
    border-bottom: 1px solid var(--border-light) !important;
    margin-bottom: 4px !important;
}

.user-menu-avatar-mini {
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
    background: linear-gradient(135deg, #4f46e5, #06b6d4) !important;
    color: #ffffff !important;
    display: grid !important;
    place-items: center !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25) !important;
    flex-shrink: 0 !important;
}

.user-menu-info {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-width: 0 !important;
}

.user-menu-name {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: var(--ink-primary) !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.user-menu-role {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--brand-primary) !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.user-menu-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.user-menu-divider,
.drawer-divider {
    height: 1px !important;
    background: var(--border-light) !important;
    margin: 6px 4px !important;
}

.user-menu-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.user-menu-logout,
.nav-dropdown-menu a[href*="logout"] {
    color: #ef4444 !important;
}

.user-menu-logout svg,
.user-menu-logout i,
.nav-dropdown-menu a[href*="logout"] svg,
.nav-dropdown-menu a[href*="logout"] i {
    color: #ef4444 !important;
}

.user-menu-logout:hover,
.nav-dropdown-menu a[href*="logout"]:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #dc2626 !important;
}

.user-menu-logout:hover svg,
.user-menu-logout:hover i,
.nav-dropdown-menu a[href*="logout"]:hover svg,
.nav-dropdown-menu a[href*="logout"]:hover i {
    color: #dc2626 !important;
}

/* Dual Live Clocks */
.topbar-live-clocks {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

.clock-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 10px !important;
    border-radius: 9999px !important;
    font-size: 11.5px !important;
    font-weight: 750 !important;
    border: 1px solid var(--border-strong) !important;
    background: var(--bg-card-subtle) !important;
    color: var(--ink-primary) !important;
    white-space: nowrap !important;
}

.clock-badge.clock-server {
    background: rgba(5, 150, 105, 0.08) !important;
    border-color: rgba(5, 150, 105, 0.3) !important;
    color: #047857 !important;
}

[data-theme="dark"] .clock-badge.clock-server {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    color: #34d399 !important;
}

.clock-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    display: inline-block !important;
}

.clock-dot.server-pulse {
    background: #059669 !important;
    box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.3) !important;
    animation: pulseDot 2s infinite !important;
}

@keyframes pulseDot {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(5, 150, 105, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); }
}

.clock-dot.real-pulse {
    background: #0284c7 !important;
    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.3) !important;
}

.clock-val {
    font-family: var(--font-mono) !important;
    font-weight: 800 !important;
}

/* Topbar Right Controls */
.topbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
}

.topbar-quick-add-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 13px !important;
    border-radius: 8px !important;
    background: var(--brand-primary) !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: all 0.15s ease !important;
}

.topbar-quick-add-btn:hover {
    background: var(--brand-primary-hover) !important;
    transform: translateY(-1px) !important;
}

/* School Selector Dropdown */
.school-selector-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 11px !important;
    border-radius: 8px !important;
    background: var(--bg-card-subtle) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--ink-primary) !important;
    font-size: 12.5px !important;
    font-weight: 750 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.theme-toggle-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 8px !important;
    background: var(--bg-card-subtle) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--ink-primary) !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: all 0.15s ease !important;
}

.theme-toggle-btn:hover {
    background: var(--bg-card-hover) !important;
    color: var(--brand-primary) !important;
}

.theme-icon-sun { display: none !important; }
.theme-icon-moon { display: block !important; }
[data-theme="dark"] .theme-icon-sun { display: block !important; }
[data-theme="dark"] .theme-icon-moon { display: none !important; }

.locale-switch {
    display: flex !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-strong) !important;
    background: var(--bg-card-subtle) !important;
    overflow: hidden !important;
    height: 36px !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.locale-button {
    padding: 4px 9px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    border: none !important;
    background: transparent !important;
    color: var(--ink-muted) !important;
    cursor: pointer !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    text-decoration: none !important;
}

.locale-button.active {
    background: var(--brand-primary) !important;
    color: #ffffff !important;
}

.topbar-user-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
    background: linear-gradient(135deg, #4f46e5, #06b6d4) !important;
    color: #ffffff !important;
    display: grid !important;
    place-items: center !important;
    font-size: 13.5px !important;
    font-weight: 850 !important;
    border: 1.5px solid #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
    cursor: pointer !important;
}

.nav-toggle {
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 8px !important;
    background: var(--bg-card-subtle) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--ink-primary) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

/* ----------------------------------------------------------------------
   Mobile Slide Drawer
   ---------------------------------------------------------------------- */
.mobile-drawer,
.drawer-backdrop {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

@media (min-width: 901px) {
    .mobile-drawer,
    .drawer-backdrop,
    .mobile-bottom-nav,
    .mobile-fab-btn,
    .nav-toggle,
    .mobile-menu-toggle {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
    }
}

@media (max-width: 1180px) {
    .topbar-live-clocks {
        display: none !important;
    }
}

@media (max-width: 900px) {
    .desktop-nav {
        display: none !important;
    }
    .desktop-logout-form {
        display: none !important;
    }
    .nav-toggle {
        display: inline-flex !important;
    }
    .mobile-bottom-nav {
        display: grid !important;
    }
    .mobile-fab-btn {
        display: grid !important;
    }
    body.app-body,
    main.container,
    .container,
    .main-content {
        padding-bottom: calc(var(--app-bottom-height, 68px) + 24px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .mobile-drawer {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: auto !important;
        width: 310px !important;
        max-width: 86vw !important;
        height: 100% !important;
        height: 100dvh !important;
        background: var(--bg-card) !important;
        z-index: 50000 !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35) !important;
        transform: translate3d(-100%, 0, 0) !important;
        -webkit-transform: translate3d(-100%, 0, 0) !important;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s !important;
        display: flex !important;
        visibility: hidden !important;
        pointer-events: none !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        border-right: 1px solid var(--border-light) !important;
    }

    [dir="rtl"] .mobile-drawer {
        left: auto !important;
        right: 0 !important;
        border-right: none !important;
        border-left: 1px solid var(--border-light) !important;
        transform: translate3d(100%, 0, 0) !important;
        -webkit-transform: translate3d(100%, 0, 0) !important;
    }

    .drawer-backdrop {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: rgba(15, 23, 42, 0.72) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
        z-index: 49000 !important;
        display: block !important;
        visibility: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
        transition: opacity 0.25s ease, visibility 0.25s ease !important;
    }

    .mobile-drawer.open,
    html.mobile-drawer-open .mobile-drawer {
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
    }

    .drawer-backdrop.active,
    html.mobile-drawer-open .drawer-backdrop {
        visibility: visible !important;
        pointer-events: auto !important;
        opacity: 1 !important;
    }
}

/* Drawer Internal Structure */
.drawer-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 18px !important;
    border-bottom: 1px solid var(--border-light) !important;
}

.drawer-close {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: var(--bg-card-subtle) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--ink-primary) !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

.drawer-user-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 18px !important;
    background: var(--bg-card-subtle) !important;
    border-bottom: 1px solid var(--border-light) !important;
}

.drawer-user-avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, var(--brand-primary), #0284c7) !important;
    color: #ffffff !important;
    display: grid !important;
    place-items: center !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    flex-shrink: 0 !important;
}

.drawer-user-info {
    overflow: hidden !important;
}

.drawer-user-name {
    font-size: 14px !important;
    font-weight: 850 !important;
    color: var(--ink-primary) !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
}

.drawer-user-role {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: var(--brand-primary) !important;
}

.drawer-clock-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 18px !important;
    background: rgba(5, 150, 105, 0.05) !important;
    border-bottom: 1px solid var(--border-light) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
}

.drawer-content {
    padding: 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 1 auto !important;
}

.drawer-section-title {
    font-size: 11px !important;
    font-weight: 850 !important;
    text-transform: uppercase !important;
    color: var(--ink-muted) !important;
    margin: 12px 6px 4px 6px !important;
}

.drawer-content a,
.drawer-content button {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: 9px !important;
    font-size: 13.5px !important;
    font-weight: 750 !important;
    color: var(--ink-primary) !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
    width: 100% !important;
    text-align: start !important;
}

.drawer-content a:hover,
.drawer-content button:hover {
    background: var(--bg-card-hover) !important;
    color: var(--brand-primary) !important;
}

.drawer-content a.active {
    background: var(--brand-primary) !important;
    color: #ffffff !important;
}

.drawer-content a.active svg {
    color: #ffffff !important;
}

.drawer-divider {
    height: 1px !important;
    background: var(--border-light) !important;
    margin: 8px 0 !important;
}

/* ----------------------------------------------------------------------
   Mobile Bottom Navigation Bar & FAB
   ---------------------------------------------------------------------- */
.mobile-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: var(--app-bottom-height, 68px) !important;
    background: var(--bg-surface-glass) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-top: 1px solid var(--border-light) !important;
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08) !important;
    z-index: 25000 !important;
    display: none !important;
    grid-template-columns: repeat(5, 1fr) !important;
    align-items: center !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    box-sizing: border-box !important;
}

[data-theme="dark"] .mobile-bottom-nav {
    background: rgba(15, 23, 42, 0.96) !important;
    border-color: rgba(51, 65, 85, 0.7) !important;
}

.mobile-bottom-nav a,
.mobile-bottom-more {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    color: var(--ink-muted) !important;
    text-decoration: none !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    height: 100% !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    background: transparent !important;
    border: none !important;
}

.mobile-bottom-icon {
    width: 22px !important;
    height: 22px !important;
    display: grid !important;
    place-items: center !important;
    transition: transform 0.15s ease !important;
}

.mobile-bottom-icon svg {
    width: 20px !important;
    height: 20px !important;
}

.mobile-bottom-nav a:hover,
.mobile-bottom-more:hover {
    color: var(--brand-primary) !important;
}

.mobile-bottom-nav a.active {
    color: var(--brand-primary) !important;
    font-weight: 850 !important;
}

.mobile-bottom-nav a.active .mobile-bottom-icon {
    transform: scale(1.15) !important;
}

.mobile-fab-btn {
    position: fixed !important;
    bottom: calc(var(--app-bottom-height, 68px) + 16px + env(safe-area-inset-bottom, 0px)) !important;
    right: 18px !important;
    left: auto !important;
    z-index: 26000 !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--brand-primary), #0d9488) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(5, 150, 105, 0.45) !important;
    display: none !important;
    place-items: center !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

[dir="rtl"] .mobile-fab-btn {
    right: auto !important;
    left: 18px !important;
}

.mobile-fab-btn:active {
    transform: scale(0.92) !important;
}

/* ----------------------------------------------------------------------
   Universal Quick Action Modal
   ---------------------------------------------------------------------- */
.quick-action-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 100000 !important;
    background: var(--bg-overlay) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}

.quick-action-modal-overlay.open {
    display: flex !important;
}

.quick-action-modal {
    background: var(--bg-card) !important;
    border: 1.5px solid var(--border-strong) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3) !important;
    max-width: 520px;
    width: 100% !important;
    max-height: calc(100dvh - 32px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    animation: modalPop 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@media (max-width: 640px) {
    .quick-action-modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    .quick-action-modal {
        border-radius: 20px 20px 0 0 !important;
        max-width: 100% !important;
        max-height: 88dvh !important;
    }
    .quick-action-grid {
        grid-template-columns: 1fr !important;
        padding: 14px !important;
    }
}

@keyframes modalPop {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.quick-action-modal-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 22px !important;
    border-bottom: 1.5px solid var(--border-light) !important;
}

.quick-action-close-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
    background: var(--bg-card-subtle) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--ink-secondary) !important;
    display: grid !important;
    place-items: center !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.quick-action-close-btn:hover {
    background: var(--bg-card-hover) !important;
    color: var(--ink-primary) !important;
}

.quick-action-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 20px !important;
}

.quick-action-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    background: var(--bg-card-subtle) !important;
    border: 1.5px solid var(--border-light) !important;
    text-decoration: none !important;
    color: var(--ink-primary) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    text-align: start !important;
}

.quick-action-card:hover {
    background: var(--bg-card-hover) !important;
    border-color: var(--brand-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.12) !important;
}

.quick-card-icon {
    font-size: 24px !important;
    flex-shrink: 0 !important;
}

.quick-card-text strong {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 850 !important;
    color: var(--ink-primary) !important;
}

.quick-card-text small {
    display: block !important;
    font-size: 11.5px !important;
    color: var(--ink-muted) !important;
}

/* ==========================================================================
   MEGA APPS LAUNCHER MODAL (Universal Responsive System for Desktop & Mobile)
   ========================================================================== */
.mega-apps-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 105000 !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px 16px !important;
    box-sizing: border-box !important;
}

.mega-apps-modal-overlay.open {
    display: flex !important;
}

.mega-apps-modal {
    background: var(--bg-card, #ffffff) !important;
    border: 1.5px solid var(--border-strong, #cbd5e1) !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    width: 100% !important;
    max-width: 860px !important;
    max-height: 86vh !important;
    max-height: 86dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    animation: megaAppsZoom 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
}

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

@keyframes megaAppsSlideUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mega-apps-pill-bar {
    display: flex;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 2px;
}

.mega-apps-pill {
    width: 36px;
    height: 4.5px;
    border-radius: 999px;
    background: var(--border-strong, #cbd5e1);
}

.mega-apps-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 22px !important;
    border-bottom: 1.5px solid var(--border-light, #e2e8f0) !important;
    background: var(--bg-card, #ffffff) !important;
    flex-shrink: 0 !important;
    gap: 12px !important;
}

.mega-apps-head-content {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.mega-apps-head-icon {
    font-size: 24px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.mega-apps-title {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: var(--ink-primary, #0f172a) !important;
    margin: 0 !important;
    line-height: 1.25 !important;
}

.mega-apps-subtitle {
    font-size: 12.5px !important;
    color: var(--ink-muted, #64748b) !important;
    margin: 3px 0 0 0 !important;
    line-height: 1.2 !important;
}

.mega-apps-close-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 12px !important;
    background: var(--bg-card-subtle, #f1f5f9) !important;
    border: 1px solid var(--border-strong, #cbd5e1) !important;
    color: var(--ink-secondary, #475569) !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
}

.mega-apps-close-btn:hover {
    background: var(--bg-card-hover, #e2e8f0) !important;
    color: var(--ink-primary, #0f172a) !important;
    transform: scale(1.05);
}

.mega-apps-close-btn:active {
    transform: scale(0.95);
}

/* Instant Search Container */
.mega-apps-search-container {
    padding: 12px 22px 4px 22px !important;
    flex-shrink: 0 !important;
    background: var(--bg-card, #ffffff) !important;
}

.mega-apps-search-box {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background: var(--bg-card-subtle, #f8fafc) !important;
    border: 1.5px solid var(--border-light, #e2e8f0) !important;
    border-radius: 12px !important;
    padding: 0 14px !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

.mega-apps-search-box:focus-within {
    border-color: var(--brand-primary, #059669) !important;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15) !important;
}

.mega-apps-search-icon {
    color: var(--ink-muted, #94a3b8) !important;
    margin-inline-end: 10px !important;
    flex-shrink: 0 !important;
}

.mega-apps-search-input {
    width: 100% !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 10px 0 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--ink-primary, #0f172a) !important;
}

.mega-apps-search-input::placeholder {
    color: var(--ink-muted, #94a3b8) !important;
    font-weight: 500 !important;
}

.mega-apps-search-clear {
    background: none !important;
    border: none !important;
    color: var(--ink-muted, #94a3b8) !important;
    font-size: 14px !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
}

/* Modal Body & Scroll Area */
.mega-apps-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 16px 22px 24px 22px !important;
}

.mega-apps-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
}

/* Modern App Card */
.mega-app-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    background: var(--bg-card, #ffffff) !important;
    border: 1.5px solid var(--border-light, #e2e8f0) !important;
    text-decoration: none !important;
    color: var(--ink-primary, #0f172a) !important;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.mega-app-card:hover {
    transform: translateY(-2px) !important;
    border-color: var(--brand-primary, #059669) !important;
    box-shadow: 0 10px 24px -4px rgba(15, 23, 42, 0.1), 0 4px 8px -2px rgba(15, 23, 42, 0.05) !important;
    background: var(--bg-card, #ffffff) !important;
    color: var(--ink-primary, #0f172a) !important;
}

.mega-app-card:active {
    transform: scale(0.98) !important;
}

.mega-app-icon-wrap {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    background: var(--app-accent-bg, #eff6ff) !important;
    color: var(--app-accent-color, #2563eb) !important;
    display: grid !important;
    place-items: center !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
    transition: transform 0.18s ease !important;
}

.mega-app-card:hover .mega-app-icon-wrap {
    transform: scale(1.08) !important;
}

.mega-app-details {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.mega-app-name {
    display: block !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--ink-primary, #0f172a) !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.mega-app-desc {
    display: block !important;
    font-size: 11.5px !important;
    color: var(--ink-muted, #64748b) !important;
    margin-top: 2px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.mega-app-action-arrow {
    color: var(--ink-muted, #94a3b8) !important;
    opacity: 0.5 !important;
    flex-shrink: 0 !important;
    transition: transform 0.18s ease, opacity 0.18s ease !important;
}

.mega-app-card:hover .mega-app-action-arrow {
    opacity: 1 !important;
    color: var(--brand-primary, #059669) !important;
    transform: translateX(3px) !important;
}

[dir="rtl"] .mega-app-card:hover .mega-app-action-arrow {
    transform: translateX(-3px) !important;
}

[dir="rtl"] .mega-app-action-arrow svg {
    transform: rotate(180deg) !important;
}

/* Empty search state */
.mega-apps-empty {
    text-align: center;
    padding: 40px 20px;
}

.mega-apps-empty-icon {
    font-size: 36px;
    margin-bottom: 8px;
    opacity: 0.6;
}

.mega-apps-empty-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink-primary);
}

.mega-apps-empty-text {
    font-size: 12.5px;
    color: var(--ink-muted);
    margin: 4px 0 0 0;
}

/* Topbar & Drawer Mega Buttons */
.topbar-mega-icon-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
    background: var(--bg-card-subtle, #f1f5f9) !important;
    border: 1px solid var(--border-light, #e2e8f0) !important;
    color: var(--brand-primary, #059669) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: all 0.15s ease !important;
}

.topbar-mega-icon-btn:hover,
.topbar-mega-icon-btn:active {
    background: var(--brand-primary, #059669) !important;
    color: #ffffff !important;
}

.drawer-launcher-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 12px 14px !important;
    margin-bottom: 14px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.08), rgba(37, 99, 235, 0.08)) !important;
    border: 1.5px solid var(--brand-primary, #059669) !important;
    color: var(--ink-primary, #0f172a) !important;
    cursor: pointer !important;
    text-align: start !important;
    transition: all 0.18s ease !important;
    text-decoration: none !important;
}

.drawer-launcher-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.drawer-launcher-icon {
    font-size: 20px !important;
    line-height: 1 !important;
}

.drawer-launcher-title {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: var(--ink-primary, #0f172a) !important;
}

.drawer-launcher-desc {
    display: block !important;
    font-size: 11px !important;
    color: var(--ink-muted, #64748b) !important;
}

.drawer-launcher-btn svg {
    color: var(--brand-primary, #059669) !important;
    transition: transform 0.15s ease !important;
}

[dir="rtl"] .drawer-launcher-btn svg {
    transform: rotate(180deg) !important;
}

.drawer-launcher-btn:hover,
.drawer-launcher-btn:active {
    background: var(--brand-primary, #059669) !important;
    color: #ffffff !important;
}

.drawer-launcher-btn:hover .drawer-launcher-title,
.drawer-launcher-btn:hover .drawer-launcher-desc,
.drawer-launcher-btn:hover svg,
.drawer-launcher-btn:active .drawer-launcher-title,
.drawer-launcher-btn:active .drawer-launcher-desc,
.drawer-launcher-btn:active svg {
    color: #ffffff !important;
}

/* ==========================================================================
   RESPONSIVE DESIGN (TABLETS & MOBILE SMARTPHONES)
   ========================================================================== */

/* Tablets (641px to 860px) */
@media (max-width: 860px) {
    .mega-apps-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

/* Mobile Devices (<= 640px) -> Modern Native-Feel Bottom Sheet */
@media (max-width: 640px) {
    .mega-apps-modal-overlay {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    .mega-apps-modal {
        border-radius: 24px 24px 0 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        max-height: 88dvh !important;
        max-height: 88vh !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;
        animation: megaAppsSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
        padding-bottom: env(safe-area-inset-bottom, 16px) !important;
    }

    .mega-apps-head {
        padding: 14px 16px !important;
    }

    .mega-apps-title {
        font-size: 15.5px !important;
    }

    .mega-apps-subtitle {
        font-size: 11.5px !important;
    }

    .mega-apps-close-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        border-radius: 50% !important;
    }

    .mega-apps-search-container {
        padding: 8px 16px 4px 16px !important;
    }

    .mega-apps-body {
        padding: 12px 14px 24px 14px !important;
    }

    .mega-apps-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .mega-app-card {
        padding: 12px 14px !important;
        border-radius: 14px !important;
        gap: 12px !important;
    }

    .mega-app-icon-wrap {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        font-size: 18px !important;
    }

    .mega-app-name {
        font-size: 13.5px !important;
    }

    .mega-app-desc {
        font-size: 11px !important;
    }
}

/* ==========================================================================
   DARK THEME OVERRIDES FOR MEGA APPS
   ========================================================================== */
[data-theme="dark"] .mega-apps-modal {
    background: #111827 !important;
    border-color: #374151 !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .mega-apps-head {
    background: #111827 !important;
    border-color: #1f2937 !important;
}

[data-theme="dark"] .mega-apps-title {
    color: #f9fafb !important;
}

[data-theme="dark"] .mega-apps-subtitle {
    color: #9ca3af !important;
}

[data-theme="dark"] .mega-apps-close-btn {
    background: #1f2937 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}

[data-theme="dark"] .mega-apps-close-btn:hover {
    background: #374151 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .mega-apps-search-container {
    background: #111827 !important;
}

[data-theme="dark"] .mega-apps-search-box {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

[data-theme="dark"] .mega-apps-search-box:focus-within {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}

[data-theme="dark"] .mega-apps-search-input {
    color: #f9fafb !important;
}

[data-theme="dark"] .mega-apps-search-input::placeholder {
    color: #6b7280 !important;
}

[data-theme="dark"] .mega-app-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f9fafb !important;
}

[data-theme="dark"] .mega-app-card:hover {
    background: #1e293b !important;
    border-color: #10b981 !important;
    box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .mega-app-name {
    color: #f9fafb !important;
}

[data-theme="dark"] .mega-app-desc {
    color: #94a3b8 !important;
}

[data-theme="dark"] .mega-app-action-arrow {
    color: #64748b !important;
}

[data-theme="dark"] .mega-apps-pill {
    background: #4b5563 !important;
}

[data-theme="dark"] .drawer-launcher-btn {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(59, 130, 246, 0.15)) !important;
    border-color: #10b981 !important;
}

[data-theme="dark"] .drawer-launcher-title {
    color: #f9fafb !important;
}

[data-theme="dark"] .drawer-launcher-desc {
    color: #9ca3af !important;
}

[data-theme="dark"] .topbar-mega-icon-btn {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #10b981 !important;
}

/* ----------------------------------------------------------------------
   Dashboard Head & Multi-Section Tabs
   ---------------------------------------------------------------------- */
.page-head {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 22px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid var(--border-light) !important;
}

.page-head-eyebrow-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
    flex-wrap: wrap !important;
}

.eyebrow-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 10px !important;
    border-radius: 9999px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    background: var(--brand-primary-tint) !important;
    color: var(--brand-primary-dark) !important;
    border: 1px solid var(--brand-primary-border) !important;
}

[data-theme="dark"] .eyebrow-badge {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
}

.live-dot-pulse {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #059669 !important;
    box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.7) !important;
    animation: pulseDot 2s infinite !important;
}

.page-head-server-time {
    font-size: 12px !important;
    color: var(--ink-muted) !important;
}

.page-head h1 {
    font-size: 24px !important;
    font-weight: 900 !important;
    margin: 0 !important;
    color: var(--ink-primary) !important;
    letter-spacing: -0.02em !important;
}

.page-head-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* Multi-Section Dashboard Tabs */
.dashboard-tabs {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid var(--border-light) !important;
    scrollbar-width: none !important;
}

.dashboard-tabs::-webkit-scrollbar {
    display: none !important;
}

.dashboard-tabs a,
.dashboard-tab-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 16px !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    font-weight: 750 !important;
    color: var(--ink-secondary) !important;
    background: var(--bg-card) !important;
    border: 1.5px solid var(--border-light) !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.dashboard-tabs a:hover,
.dashboard-tab-btn:hover {
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary) !important;
}

.dashboard-tabs a.active,
.dashboard-tab-btn.active {
    background: var(--brand-primary) !important;
    color: #ffffff !important;
    border-color: var(--brand-primary) !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3) !important;
}

.dashboard-tabs a.active svg,
.dashboard-tab-btn.active svg {
    color: #ffffff !important;
}

/* ----------------------------------------------------------------------
   Grand KPI Cards System
   ---------------------------------------------------------------------- */
.kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

.kpi-card {
    position: relative !important;
    border-radius: 14px !important;
    padding: 18px !important;
    background: var(--bg-card) !important;
    border: 1.5px solid var(--border-light) !important;
    box-shadow: var(--shadow-sm) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    overflow: hidden !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.kpi-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}

.kpi-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
}

.kpi-card.kpi-tickets {
    background: var(--kpi-tickets-bg) !important;
    border-color: var(--kpi-tickets-border) !important;
}
.kpi-card.kpi-tickets::before { background: var(--kpi-tickets-top) !important; }

.kpi-card.kpi-tasks {
    background: var(--kpi-tasks-bg) !important;
    border-color: var(--kpi-tasks-border) !important;
}
.kpi-card.kpi-tasks::before { background: var(--kpi-tasks-top) !important; }

.kpi-card.kpi-critical {
    background: var(--kpi-critical-bg) !important;
    border-color: var(--kpi-critical-border) !important;
}
.kpi-card.kpi-critical::before { background: var(--kpi-critical-top) !important; }

.kpi-card.kpi-inventory {
    background: var(--kpi-inventory-bg) !important;
    border-color: var(--kpi-inventory-border) !important;
}
.kpi-card.kpi-inventory::before { background: var(--kpi-inventory-top) !important; }

.kpi-card.kpi-facility {
    background: var(--kpi-facility-bg) !important;
    border-color: var(--kpi-facility-border) !important;
}
.kpi-card.kpi-facility::before { background: var(--kpi-facility-top) !important; }

.kpi-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
}

.kpi-label {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--ink-muted) !important;
    text-transform: uppercase !important;
}

.kpi-icon-badge {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 17px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

.kpi-val {
    font-size: 32px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    color: var(--ink-primary) !important;
    font-family: var(--font-mono) !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 8px !important;
}

.kpi-sub {
    font-size: 12px !important;
    color: var(--ink-muted) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

/* ----------------------------------------------------------------------
   Status Badges & Priority Pills
   ---------------------------------------------------------------------- */
.badge-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 10px !important;
    border-radius: 9999px !important;
    font-size: 11.5px !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
}

.badge-status-open {
    background: #fffbeb !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
}

.badge-status-in-progress {
    background: #f0f9ff !important;
    color: #0369a1 !important;
    border: 1px solid #bae6fd !important;
}

.badge-status-resolved {
    background: #ecfdf5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
}

.badge-status-closed {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}

.badge-status-rejected,
.badge-status-overdue {
    background: #fff1f2 !important;
    color: #9f1239 !important;
    border: 1px solid #fecdd3 !important;
}

.badge-priority-critical {
    background: #fff1f2 !important;
    color: #9f1239 !important;
    border: 1.5px solid #fecdd3 !important;
    animation: criticalPulse 2s infinite !important;
}

@keyframes criticalPulse {
    0% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(225, 29, 72, 0); }
    100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0); }
}

.badge-priority-high {
    background: #fffbeb !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
}

.badge-priority-normal {
    background: #eef2ff !important;
    color: #3730a3 !important;
    border: 1px solid #c7d2fe !important;
}

.badge-priority-low {
    background: #f0fdf4 !important;
    color: #166534 !important;
    border: 1px solid #bbf7d0 !important;
}

/* ----------------------------------------------------------------------
   High-Contrast Buttons & Components
   ---------------------------------------------------------------------- */
.button,
.btn-dp {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 8px 16px !important;
    border-radius: 9px !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    border: 1.5px solid transparent !important;
    white-space: nowrap !important;
}

.button.primary,
.btn-dp.primary {
    background: var(--brand-primary) !important;
    color: #ffffff !important;
    border-color: var(--brand-primary) !important;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3) !important;
}

.button.primary:hover,
.btn-dp.primary:hover {
    background: var(--brand-primary-hover) !important;
    transform: translateY(-1px) !important;
}

.button.secondary,
.btn-dp.secondary {
    background: var(--bg-card) !important;
    color: var(--ink-primary) !important;
    border-color: var(--border-strong) !important;
}

.button.secondary:hover,
.btn-dp.secondary:hover {
    background: var(--bg-card-hover) !important;
    border-color: var(--brand-primary) !important;
}

.button.danger,
.btn-dp.danger {
    background: var(--danger-accent) !important;
    color: #ffffff !important;
    border-color: var(--danger-accent) !important;
}

/* ----------------------------------------------------------------------
   Modern Data Tables
   ---------------------------------------------------------------------- */
.data-table-card {
    background: var(--bg-card) !important;
    border: 1.5px solid var(--border-light) !important;
    border-radius: 14px !important;
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
}

.data-table-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    border-bottom: 1.5px solid var(--border-light) !important;
    background: var(--bg-card-subtle) !important;
}

.data-table-head h3 {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    color: var(--ink-primary) !important;
}

.data-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
}

.data-table {
    width: 100% !important;
    border-collapse: collapse !important;
    text-align: start !important;
    font-size: 13px !important;
}

.data-table thead th {
    padding: 12px 18px !important;
    background: var(--bg-card-subtle) !important;
    color: var(--ink-muted) !important;
    font-size: 11.5px !important;
    font-weight: 850 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    border-bottom: 1.5px solid var(--border-light) !important;
    white-space: nowrap !important;
}

.data-table tbody td {
    padding: 13px 18px !important;
    color: var(--ink-primary) !important;
    border-bottom: 1px solid var(--border-light) !important;
    vertical-align: middle !important;
}

.data-table tbody tr:hover {
    background: var(--bg-card-hover) !important;
}

/* ----------------------------------------------------------------------
   Bootstrap & Soft UI Global Modernization Overrides
   ---------------------------------------------------------------------- */
/* Card styling is defined once, under UNIVERSAL COMPONENT OVERRIDES below.
   A duplicate !important block here used to shadow it completely. */

.table {
    color: var(--ink-primary) !important;
    border-color: var(--border-light) !important;
}

.table th {
    color: var(--ink-muted) !important;
    font-weight: 850 !important;
}

/* Form control styling is defined once, further down - that block is a
   strict superset of what used to be duplicated here. */

.dropdown-menu {
    background: var(--bg-card) !important;
    border: 1.5px solid var(--border-strong) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-lg) !important;
}

.dropdown-item {
    color: var(--ink-primary) !important;
    font-weight: 700 !important;
}

.dropdown-item:hover {
    background: var(--bg-card-hover) !important;
    color: var(--brand-primary) !important;
}

.dropdown-item.active {
    background: var(--brand-primary) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   MASTER CANVAS & LAYOUT ENGINE (Fixes Soft UI 274px Blank Margin Across All Pages)
   ========================================================================== */
body.app-body,
body.g-sidenav-show,
body.g-sidenav-pinned,
body.g-sidenav-hidden {
    overflow-x: hidden !important;
    background-color: var(--bg-page, #f8fafc) !important;
    color: var(--ink-primary, #0f172a) !important;
    font-family: var(--font-primary) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Full Width Main Canvas */
body.app-body .main-content,
.main-content,
.main-content.position-relative,
.g-sidenav-show .main-content,
.g-sidenav-show .sidenav.fixed-start ~ .main-content,
.g-sidenav-hidden .main-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    min-height: calc(100vh - 120px) !important;
    transition: none !important;
    float: none !important;
}

[dir="rtl"] .main-content,
body.rtl .main-content {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Completely suppress legacy static sidenavs */
.sidenav,
#sidenav-main,
aside.sidenav {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Page Containers */
.main-content > .container-fluid,
.main-content > .container {
    max-width: 1700px !important;
    margin: 0 auto !important;
    padding: 16px 24px 40px 24px !important;
    box-sizing: border-box !important;
}

/* ----------------------------------------------------------------------
   UNIVERSAL COMPONENT OVERRIDES (Cards, Tables, Badges, Buttons)
   ---------------------------------------------------------------------- */
.card {
    background: var(--bg-card, #ffffff) !important;
    border: 1px solid var(--border-light, #e2e8f0) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
    color: var(--ink-primary, #0f172a) !important;
}

.card-header {
    background: var(--bg-card, #ffffff) !important;
    border-bottom: 1px solid var(--border-light, #e2e8f0) !important;
    padding: 18px 22px !important;
    color: var(--ink-primary, #0f172a) !important;
}

.card-header h5,
.card-header h6,
.card-header h4 {
    font-weight: 850 !important;
    color: var(--ink-primary, #0f172a) !important;
    margin: 0 !important;
}

.card-body {
    padding: 22px !important;
    color: var(--ink-primary, #0f172a) !important;
}

/* Tables */
.table-responsive {
    border-radius: 12px !important;
    border: 1px solid var(--border-light, #e2e8f0) !important;
    background: var(--bg-card, #ffffff) !important;
}

.table {
    margin-bottom: 0 !important;
    border-collapse: collapse !important;
    width: 100% !important;
}

.table thead th,
.table th {
    background: var(--bg-card-subtle, #f8fafc) !important;
    color: var(--ink-muted, #475569) !important;
    font-size: 11.5px !important;
    font-weight: 850 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 14px 18px !important;
    border-bottom: 1.5px solid var(--border-light, #e2e8f0) !important;
    white-space: nowrap !important;
}

.table tbody td,
.table td {
    padding: 14px 18px !important;
    color: var(--ink-primary, #0f172a) !important;
    border-bottom: 1px solid var(--border-light, #e2e8f0) !important;
    vertical-align: middle !important;
    font-size: 13px !important;
}

.table tbody tr:hover td {
    background: var(--bg-card-hover, #f1f5f9) !important;
}

/* High-Contrast Badges */
.badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.badge.bg-primary,
.badge-primary {
    background: #eef2ff !important;
    color: #4338ca !important;
    border: 1px solid #c7d2fe !important;
}

.badge.bg-success,
.badge-success {
    background: #ecfdf5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
}

.badge.bg-warning,
.badge-warning {
    background: #fffbeb !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
}

.badge.bg-danger,
.badge-danger {
    background: #fff1f2 !important;
    color: #9f1239 !important;
    border: 1px solid #fecdd3 !important;
}

.badge.bg-info,
.badge-info {
    background: #f0f9ff !important;
    color: #0369a1 !important;
    border: 1px solid #bae6fd !important;
}

.badge.bg-secondary,
.badge-secondary {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}

/* High-Contrast Buttons */
.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

.btn-primary {
    background: var(--brand-primary, #059669) !important;
    border-color: var(--brand-primary, #059669) !important;
    color: #ffffff !important;
}

.btn-primary:hover {
    background: var(--brand-primary-hover, #047857) !important;
    border-color: var(--brand-primary-hover, #047857) !important;
}

.btn-outline-primary {
    color: var(--brand-primary, #059669) !important;
    border-color: var(--brand-primary, #059669) !important;
    background: transparent !important;
}

.btn-outline-primary:hover {
    background: var(--brand-primary, #059669) !important;
    color: #ffffff !important;
}

/* Forms & Inputs */
.form-label,
label {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: var(--ink-secondary, #1e293b) !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

.form-control,
.form-select {
    background: var(--bg-card, #ffffff) !important;
    border: 1.5px solid var(--border-strong, #cbd5e1) !important;
    color: var(--ink-primary, #0f172a) !important;
    border-radius: 9px !important;
    padding: 9px 13px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-primary, #059669) !important;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2) !important;
    outline: none !important;
}

/* Breadcrumbs */
.breadcrumb {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    margin-bottom: 12px !important;
}

.breadcrumb-item a {
    color: var(--ink-muted, #475569) !important;
    text-decoration: none !important;
}

.breadcrumb-item a:hover {
    color: var(--brand-primary, #059669) !important;
}

.breadcrumb-item.active {
    color: var(--ink-primary, #0f172a) !important;
    font-weight: 850 !important;
}

/* Dark Theme Overrides for All Pages */
[data-theme="dark"] body.app-body {
    background-color: #0b1120 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .table-responsive,
[data-theme="dark"] .card-header {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .card-header h5,
[data-theme="dark"] .card-header h6,
[data-theme="dark"] .card-header h4 {
    color: #f8fafc !important;
}

[data-theme="dark"] .table thead th {
    background: #0f172a !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .table tbody td {
    color: #f8fafc !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .table tbody tr:hover td {
    background: #334155 !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background: #0f172a !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .form-label,
[data-theme="dark"] label {
    color: #cbd5e1 !important;
}

/* Hover-shadow and interactive card lifts for non-computer user UX */
.hover-shadow {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}

.hover-shadow:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.12), 0 4px 8px -2px rgba(15, 23, 42, 0.06) !important;
    border-color: var(--brand-primary, #059669) !important;
}

[data-theme="dark"] .hover-shadow:hover {
    box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.5) !important;
    border-color: #10b981 !important;
}

/* ==========================================================================
   UNIFIED ENTERPRISE UI-UX ARCHITECTURE FOR ALL MTCOM SYSTEM PAGES
   ========================================================================== */

/* Standard Page Header */
.mtcom-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.mtcom-page-head-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ink-primary, #0f172a);
    margin-bottom: 0.25rem;
    letter-spacing: -0.02em;
}

/*
 * Page-head subtitle.
 *
 * Thirteen admin index pages ship `.mtcom-page-head-sub` while the system only
 * defined `.mtcom-page-head-subtitle`, so their subtitles fell back to unstyled
 * browser defaults and each page looked slightly different. Both spellings are
 * now the same component.
 */
/* Page subtitles: `.muted` is the older spelling used by five screens and
   `.mtcom-page-head-sub(title)` the newer one. They must read identically. */
.mtcom-page-head-subtitle,
.mtcom-page-head-sub,
.page-head p.muted,
.mtcom-page-head p.muted {
    font-size: 0.875rem;
    color: var(--ink-muted, #64748b);
    margin-bottom: 0;
    max-width: 78ch;
    line-height: 1.5;
}

/*
 * Eyebrow row above a page title: a small badge, an optional live dot and a
 * short label. Also previously used in markup without a definition.
 */
.mtcom-page-head-eyebrow,
.page-head-eyebrow-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ink-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

@media (max-width: 575.98px) {
    .mtcom-page-head-title {
        font-size: 1.25rem;
    }

    .mtcom-page-head-actions {
        width: 100%;
    }

    .mtcom-page-head-actions > * {
        flex: 1 1 auto;
        justify-content: center;
    }
}

.mtcom-page-head-actions {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

/* Standard KPI Stat Tiles */
.mtcom-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.mtcom-kpi-tile {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 14px;
    padding: 1.15rem 1.25rem;
    display: flex;
    align-items: center;
    /* The icon belongs beside the figures, not pushed to the opposite edge. */
    justify-content: flex-start;
    gap: 0.9rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.05);
}

.mtcom-kpi-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.08);
    border-color: var(--brand-primary-border, #a7f3d0);
}

.mtcom-kpi-info {
    display: flex;
    flex-direction: column;
}

.mtcom-kpi-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-subtle, #64748b);
    margin-bottom: 0.25rem;
}

.mtcom-kpi-value {
    font-size: 1.65rem;
    font-weight: 850;
    color: var(--ink-primary, #0f172a);
    line-height: 1.1;
}

.mtcom-kpi-subtext {
    font-size: 0.725rem;
    color: var(--ink-muted, #94a3b8);
    margin-top: 0.25rem;
}

.mtcom-kpi-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Modern Card Container */
.mtcom-card {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 16px;
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 1px 2px 0 rgba(15, 23, 42, 0.02);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.mtcom-card-header {
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--border-light, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
}

.mtcom-card-title {
    font-size: 1rem;
    font-weight: 750;
    color: var(--ink-primary, #0f172a);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mtcom-card-body {
    padding: 1.25rem 1.5rem;
}

/* Modern Filter Bar */
.mtcom-filter-bar {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    display: flex;
    gap: 0.85rem;
    align-items: center;
    flex-wrap: wrap;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.mtcom-filter-search {
    flex: 1;
    min-width: 220px;
    position: relative;
}

.mtcom-filter-search i {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-subtle, #94a3b8);
    pointer-events: none;
}

[dir="rtl"] .mtcom-filter-search i {
    left: auto;
    right: 0.85rem;
}

.mtcom-filter-search input {
    padding-left: 2.35rem !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-light, #e2e8f0) !important;
    font-size: 0.875rem !important;
    height: 40px !important;
    background: var(--bg-card, #ffffff) !important;
}

[dir="rtl"] .mtcom-filter-search input {
    padding-left: 0.85rem !important;
    padding-right: 2.35rem !important;
}

.mtcom-filter-select {
    min-width: 160px;
    height: 40px;
    border-radius: 10px;
    font-size: 0.875rem;
    border: 1px solid var(--border-light, #e2e8f0);
    background: var(--bg-card, #ffffff);
    padding: 0 0.85rem;
}

/* Modern Data Table */
.mtcom-table {
    width: 100%;
    margin-bottom: 0;
    vertical-align: middle;
    border-collapse: separate;
    border-spacing: 0;
}

.mtcom-table thead th {
    background: var(--bg-card-subtle, #f8fafc) !important;
    color: var(--ink-muted, #475569) !important;
    font-size: 0.725rem !important;
    font-weight: 750 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.85rem 1.15rem !important;
    border-bottom: 1px solid var(--border-light, #e2e8f0) !important;
    border-top: none !important;
    white-space: nowrap;
}

.mtcom-table tbody td {
    padding: 0.95rem 1.15rem !important;
    font-size: 0.85rem !important;
    color: var(--ink-secondary, #1e293b) !important;
    border-bottom: 1px solid var(--border-light, #e2e8f0) !important;
    background: transparent !important;
    vertical-align: middle;
}

.mtcom-table tbody tr {
    transition: background-color 0.12s ease;
}

.mtcom-table tbody tr:hover td {
    background-color: var(--bg-card-subtle, #f8fafc) !important;
}

.mtcom-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Soft Pill Badges */
.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    border: 1px solid transparent;
}

.badge-soft-success {
    background: #ecfdf5 !important;
    color: #065f46 !important;
    border-color: #a7f3d0 !important;
}

.badge-soft-danger {
    background: #fff1f2 !important;
    color: #9f1239 !important;
    border-color: #fecdd3 !important;
}

.badge-soft-warning {
    background: #fffbeb !important;
    color: #92400e !important;
    border-color: #fde68a !important;
}

.badge-soft-info {
    background: #f0f9ff !important;
    color: #0369a1 !important;
    border-color: #bae6fd !important;
}

.badge-soft-primary {
    background: #eef2ff !important;
    color: #4338ca !important;
    border-color: #c7d2fe !important;
}

.badge-soft-secondary {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-color: #cbd5e1 !important;
}

/* Action Buttons Cluster */
.action-btn-group {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.action-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-light, #e2e8f0);
    background: var(--bg-card, #ffffff);
    color: var(--ink-secondary, #334155);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.825rem;
    cursor: pointer;
    transition: all 0.12s ease;
    text-decoration: none !important;
}

.action-icon-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.action-icon-btn.btn-view:hover {
    background: #f0f9ff;
    border-color: #bae6fd;
    color: #0284c7;
}

.action-icon-btn.btn-edit:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #4f46e5;
}

.action-icon-btn.btn-delete:hover {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #e11d48;
}

/* Avatar User Chip */
.user-avatar-chip {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.avatar-bubble {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--brand-primary, #059669), #047857);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}

.avatar-info {
    display: flex;
    flex-direction: column;
}

.avatar-name {
    font-size: 0.875rem;
    font-weight: 750;
    color: var(--ink-primary, #0f172a);
    line-height: 1.2;
}

.avatar-desc {
    font-size: 0.725rem;
    color: var(--ink-muted, #64748b);
}

/* Empty State Box */
.mtcom-empty-state {
    text-align: center;
    padding: 3.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mtcom-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.75;
}

.mtcom-empty-title {
    font-size: 1.15rem;
    font-weight: 750;
    color: var(--ink-primary, #0f172a);
    margin-bottom: 0.35rem;
}

.mtcom-empty-text {
    font-size: 0.875rem;
    color: var(--ink-muted, #64748b);
    max-width: 400px;
    margin-bottom: 1.25rem;
}

/* -------------------------------------------------------------
   Modern DataTables & SimpleDatatables SaaS Overrides
------------------------------------------------------------- */
.dataTable-wrapper {
    padding: 0;
}

.dataTable-top, .dataTable-bottom {
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.dataTable-input {
    border: 1.5px solid var(--border-light, #e2e8f0) !important;
    border-radius: 9px !important;
    padding: 0.45rem 0.85rem !important;
    font-size: 0.85rem !important;
    outline: none !important;
    color: var(--ink-primary, #0f172a) !important;
    background-color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    transition: all 0.15s ease !important;
    min-width: 220px;
}

.dataTable-input:focus {
    border-color: var(--brand-primary, #059669) !important;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12) !important;
}

.dataTable-selector {
    border: 1.5px solid var(--border-light, #e2e8f0) !important;
    border-radius: 8px !important;
    padding: 0.35rem 1.75rem 0.35rem 0.65rem !important;
    font-size: 0.825rem !important;
    color: var(--ink-primary, #0f172a) !important;
    outline: none !important;
    cursor: pointer;
}

.dataTable-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    border-top: 1px solid var(--border-light, #e2e8f0) !important;
    border-bottom: 1px solid var(--border-light, #e2e8f0) !important;
}

.dataTable-table thead th {
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 0.72rem !important;
    font-weight: 750 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.85rem 1.15rem !important;
    border-bottom: 1px solid var(--border-light, #e2e8f0) !important;
    white-space: nowrap;
}

.dataTable-table tbody td {
    padding: 0.85rem 1.15rem !important;
    font-size: 0.85rem !important;
    color: #334155 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
}

.dataTable-table tbody tr:hover td {
    background-color: #f8fafc !important;
}

.dataTable-pagination ul {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dataTable-pagination li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    transition: all 0.15s ease;
}

.dataTable-pagination li a:hover {
    background: #f1f5f9;
    color: var(--ink-primary, #0f172a);
    border-color: #cbd5e1;
}

.dataTable-pagination li.active a {
    background: var(--brand-primary, #059669) !important;
    color: #ffffff !important;
    border-color: var(--brand-primary, #059669) !important;
}

.dataTable-info {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
}


/* ==========================================================================
   MTCOM COMPONENT COMPLETION
   --------------------------------------------------------------------------
   Components whose markup already ships across the admin but whose styles were
   never written, so they rendered with browser defaults - invisible KPI icons,
   unstyled table headers, ghost stat cards. Everything below styles markup that
   already exists; no template had to change.
   ========================================================================== */

/* --------------------------------------------------------------------------
   KPI tiles
   Markup in every admin index is:
     .mtcom-kpi-tile > .mtcom-kpi-icon.<variant> + div > .mtcom-kpi-label
                                                       + .mtcom-kpi-value
                                                       + .mtcom-kpi-trend.<tone>
   The tile was `justify-content: space-between`, which shoved the icon and the
   figures to opposite edges of the card. They belong together.
   -------------------------------------------------------------------------- */
/* Keep the older icon-right variant working where a template opts into it. */
.mtcom-kpi-tile.kpi-split {
    justify-content: space-between;
}

.mtcom-kpi-tile > *:not(.mtcom-kpi-icon) {
    min-width: 0;
}

/* The icon had a size and a radius but never a colour, so all 13 index pages
   showed an empty 46px box. */
.mtcom-kpi-icon {
    background: var(--bg-card-subtle, #f8fafc);
    color: var(--ink-subtle, #64748b);
    border: 1px solid var(--border-subtle, #f1f5f9);
}

.mtcom-kpi-icon.primary {
    background: var(--brand-primary-tint, #ecfdf5);
    color: var(--brand-primary, #059669);
    border-color: var(--brand-primary-border, #a7f3d0);
}

.mtcom-kpi-icon.success {
    background: var(--success-bg, #ecfdf5);
    color: var(--success-accent, #059669);
    border-color: var(--success-border, #a7f3d0);
}

.mtcom-kpi-icon.warning {
    background: var(--warning-bg, #fffbeb);
    color: var(--warning-accent, #d97706);
    border-color: var(--warning-border, #fde68a);
}

.mtcom-kpi-icon.danger {
    background: var(--danger-bg, #fff1f2);
    color: var(--danger-accent, #e11d48);
    border-color: var(--danger-border, #fecdd3);
}

.mtcom-kpi-icon.info {
    background: var(--info-bg, #f0f9ff);
    color: var(--info-accent, #0284c7);
    border-color: var(--info-border, #bae6fd);
}

.mtcom-kpi-icon.secondary {
    background: var(--brand-accent-tint, #eef2ff);
    color: var(--brand-accent, #4f46e5);
    border-color: var(--brand-accent-border, #c7d2fe);
}

/* The caption under each figure - 49 usages, previously unstyled. */
.mtcom-kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--ink-subtle, #64748b);
}

.mtcom-kpi-trend.neutral {
    color: var(--ink-subtle, #64748b);
}

.mtcom-kpi-trend.positive {
    color: var(--success-accent, #059669);
}

.mtcom-kpi-trend.negative {
    color: var(--danger-accent, #e11d48);
}

.mtcom-kpi-trend.warning {
    color: var(--warning-accent, #d97706);
}

/* --------------------------------------------------------------------------
   Table headers
   18 templates use Bootstrap 4's `.thead-light`. This project runs Bootstrap 5,
   where it was renamed `.table-light`, so every one of those headers rendered
   with no background at all.
   -------------------------------------------------------------------------- */
.table > thead.thead-light > tr > th,
.table > thead.thead-light th,
thead.thead-light th {
    background: var(--bg-card-subtle, #f8fafc);
    color: var(--ink-muted, #475569);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    border-bottom: 1px solid var(--border-light, #e2e8f0);
    white-space: nowrap;
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Stat cards (location tracking, push notifications, QR codes)
   The icon carries its own inline colour; only the layout was missing.
   -------------------------------------------------------------------------- */
.stat-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 14px;
    padding: 1.15rem 1.25rem;
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.08);
    border-color: var(--brand-primary-border, #a7f3d0);
}

.stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    background: var(--bg-card-subtle, #f8fafc);
    color: var(--ink-subtle, #64748b);
}

.stat-value {
    font-size: 1.65rem;
    font-weight: 850;
    line-height: 1.1;
    color: var(--ink-primary, #0f172a);
}

.stat-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-subtle, #64748b);
}

/* Action cluster in a page head - same contract as .mtcom-page-head-actions. */
.mtcom-head-actions {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Page-head supporting text
   -------------------------------------------------------------------------- */
.page-head p.muted,
.mtcom-page-head p.muted,
p.muted,
span.muted {
    font-size: 0.875rem;
    color: var(--ink-subtle, #64748b);
    margin-bottom: 0;
}

/* The live Riyadh/server clock in page heads and the top bar. */
.server-clock {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    color: var(--ink-primary, #0f172a);
    letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   Bootstrap 3 leftovers on the password-reset and register screens.
   Those pages are publicly reachable, so map the old names onto the card
   language the rest of the product uses.
   -------------------------------------------------------------------------- */
.panel {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 16px;
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.panel-heading {
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--border-light, #e2e8f0);
    font-size: 1rem;
    font-weight: 750;
    color: var(--ink-primary, #0f172a);
    background: transparent;
}

.panel-body {
    padding: 1.25rem 1.5rem;
}

.control-label {
    display: inline-block;
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink-secondary, #1e293b);
}

.help-block {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--danger-accent, #e11d48);
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */
[data-theme="dark"] .mtcom-kpi-icon {
    background: rgba(148, 163, 184, 0.12);
    color: var(--ink-subtle, #94a3b8);
    border-color: rgba(148, 163, 184, 0.18);
}

[data-theme="dark"] .mtcom-kpi-icon.primary,
[data-theme="dark"] .mtcom-kpi-icon.success {
    background: rgba(16, 185, 129, 0.16);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .mtcom-kpi-icon.warning {
    background: rgba(245, 158, 11, 0.16);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.3);
}

[data-theme="dark"] .mtcom-kpi-icon.danger {
    background: rgba(244, 63, 94, 0.16);
    color: #fda4af;
    border-color: rgba(244, 63, 94, 0.3);
}

[data-theme="dark"] .mtcom-kpi-icon.info {
    background: rgba(56, 189, 248, 0.16);
    color: #7dd3fc;
    border-color: rgba(56, 189, 248, 0.3);
}

[data-theme="dark"] .mtcom-kpi-icon.secondary {
    background: rgba(129, 140, 248, 0.16);
    color: #c7d2fe;
    border-color: rgba(129, 140, 248, 0.3);
}

[data-theme="dark"] .mtcom-kpi-trend.positive {
    color: #6ee7b7;
}

[data-theme="dark"] .mtcom-kpi-trend.negative {
    color: #fda4af;
}

[data-theme="dark"] .mtcom-kpi-trend.warning {
    color: #fcd34d;
}

[data-theme="dark"] .table > thead.thead-light > tr > th,
[data-theme="dark"] .table > thead.thead-light th,
[data-theme="dark"] thead.thead-light th {
    background: rgba(148, 163, 184, 0.08);
    color: var(--ink-muted, #cbd5e1);
    border-bottom-color: var(--border-light, #334155);
}

[data-theme="dark"] .stat-card,
[data-theme="dark"] .panel {
    background: var(--bg-card, #1e293b);
    border-color: var(--border-light, #334155);
}

[data-theme="dark"] .stat-icon {
    background: rgba(148, 163, 184, 0.12);
    color: var(--ink-subtle, #94a3b8);
}

[data-theme="dark"] .stat-value,
[data-theme="dark"] .server-clock,
[data-theme="dark"] .panel-heading {
    color: var(--ink-primary, #f8fafc);
}

[data-theme="dark"] .panel-heading {
    border-bottom-color: var(--border-light, #334155);
}

[data-theme="dark"] .control-label {
    color: var(--ink-secondary, #e2e8f0);
}

/* --------------------------------------------------------------------------
   Right-to-left
   These components are built from logical flexbox, so RTL mirrors them for
   free; only the fixed-direction bits need a hand.
   -------------------------------------------------------------------------- */
[dir="rtl"] .mtcom-kpi-label,
[dir="rtl"] .stat-label,
[dir="rtl"] .mtcom-kpi-trend {
    letter-spacing: 0;
}

[dir="rtl"] .server-clock {
    direction: ltr;
    display: inline-block;
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .mtcom-kpi-tile,
    .stat-card {
        padding: 0.95rem 1rem;
        gap: 0.75rem;
    }

    .mtcom-kpi-value,
    .stat-value {
        font-size: 1.4rem;
    }

    .mtcom-kpi-icon,
    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1.05rem;
    }

    .mtcom-head-actions {
        width: 100%;
    }

    .mtcom-head-actions > * {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Row emphasis
   The escalations table flags an SLA breach with .table-warning-subtle, which
   exists in neither Bootstrap 5 nor this system - so urgent rows were rendered
   exactly like the rest.
   -------------------------------------------------------------------------- */
tr.table-warning-subtle,
.table > tbody > tr.table-warning-subtle {
    background: var(--warning-bg, #fffbeb);
}

tr.table-warning-subtle > td {
    box-shadow: inset 3px 0 0 0 var(--warning-accent, #d97706);
}

[dir="rtl"] tr.table-warning-subtle > td {
    box-shadow: inset -3px 0 0 0 var(--warning-accent, #d97706);
}

[data-theme="dark"] tr.table-warning-subtle,
[data-theme="dark"] .table > tbody > tr.table-warning-subtle {
    background: rgba(245, 158, 11, 0.1);
}

/* ==========================================================================
   BADGES IN DARK MODE
   --------------------------------------------------------------------------
   Every status, priority and soft badge was written with a hard-coded light
   hex background and !important, and none had a dark counterpart - so on a dark
   page they rendered as bright chips glaring off a dark card. Status badges
   appear on every list in the product, so this was the most visible dark-mode
   inconsistency in the app.

   Each tone is restated as a translucent tint of its own hue with a light
   foreground, which keeps the colour coding intact and the contrast comfortable.
   ========================================================================== */

[data-theme="dark"] .badge-status-open,
[data-theme="dark"] .badge-priority-high,
[data-theme="dark"] .badge.bg-warning,
[data-theme="dark"] .badge-warning,
[data-theme="dark"] .badge-soft-warning {
    background: rgba(245, 158, 11, 0.16) !important;
    color: #fcd34d !important;
    border-color: rgba(245, 158, 11, 0.32) !important;
}

[data-theme="dark"] .badge-status-in-progress,
[data-theme="dark"] .badge.bg-info,
[data-theme="dark"] .badge-info,
[data-theme="dark"] .badge-soft-info {
    background: rgba(56, 189, 248, 0.16) !important;
    color: #7dd3fc !important;
    border-color: rgba(56, 189, 248, 0.32) !important;
}

[data-theme="dark"] .badge-status-resolved,
[data-theme="dark"] .badge-priority-low,
[data-theme="dark"] .badge.bg-success,
[data-theme="dark"] .badge-success,
[data-theme="dark"] .badge-soft-success {
    background: rgba(16, 185, 129, 0.16) !important;
    color: #6ee7b7 !important;
    border-color: rgba(16, 185, 129, 0.32) !important;
}

[data-theme="dark"] .badge-status-closed,
[data-theme="dark"] .badge.bg-secondary,
[data-theme="dark"] .badge-secondary,
[data-theme="dark"] .badge-soft-secondary {
    background: rgba(148, 163, 184, 0.16) !important;
    color: #cbd5e1 !important;
    border-color: rgba(148, 163, 184, 0.32) !important;
}

[data-theme="dark"] .badge-status-rejected,
[data-theme="dark"] .badge-status-overdue,
[data-theme="dark"] .badge-priority-critical,
[data-theme="dark"] .badge.bg-danger,
[data-theme="dark"] .badge-danger,
[data-theme="dark"] .badge-soft-danger {
    background: rgba(244, 63, 94, 0.16) !important;
    color: #fda4af !important;
    border-color: rgba(244, 63, 94, 0.32) !important;
}

[data-theme="dark"] .badge-priority-normal,
[data-theme="dark"] .badge.bg-primary,
[data-theme="dark"] .badge-primary,
[data-theme="dark"] .badge-soft-primary {
    background: rgba(129, 140, 248, 0.16) !important;
    color: #c7d2fe !important;
    border-color: rgba(129, 140, 248, 0.32) !important;
}

/* The critical-priority badge animates a pulse built from a light-mode shadow;
   restate it so the glow reads on a dark surface too. */
[data-theme="dark"] .badge-priority-critical {
    box-shadow: 0 0 0 1px rgba(244, 63, 94, 0.35) !important;
}

/* ==========================================================================
   ROW ACTIONS AND DATATABLES IN DARK MODE
   --------------------------------------------------------------------------
   The last components still painting themselves light regardless of theme:
   the per-row action buttons (view / edit / delete appear on every list) and
   the DataTables widget chrome used by the admins, schools and contracts
   tables - its search box, header and pager stayed white on a dark page.
   ========================================================================== */

[data-theme="dark"] .action-icon-btn.btn-view:hover {
    background: rgba(56, 189, 248, 0.16);
    border-color: rgba(56, 189, 248, 0.32);
    color: #7dd3fc;
}

[data-theme="dark"] .action-icon-btn.btn-edit:hover {
    background: rgba(129, 140, 248, 0.16);
    border-color: rgba(129, 140, 248, 0.32);
    color: #c7d2fe;
}

[data-theme="dark"] .action-icon-btn.btn-delete:hover {
    background: rgba(244, 63, 94, 0.16);
    border-color: rgba(244, 63, 94, 0.32);
    color: #fda4af;
}

[data-theme="dark"] .dataTable-input,
[data-theme="dark"] .dataTable-selector {
    background-color: var(--bg-card, #1e293b) !important;
    border-color: var(--border-light, #334155) !important;
    color: var(--ink-primary, #f8fafc) !important;
}

[data-theme="dark"] .dataTable-input::placeholder {
    color: var(--ink-subtle, #94a3b8) !important;
}

[data-theme="dark"] .dataTable-table thead th {
    background: rgba(148, 163, 184, 0.08) !important;
    color: var(--ink-muted, #cbd5e1) !important;
    border-bottom-color: var(--border-light, #334155) !important;
}

[data-theme="dark"] .dataTable-table tbody tr:hover td {
    background: rgba(148, 163, 184, 0.08) !important;
}

[data-theme="dark"] .dataTable-pagination li a {
    background: var(--bg-card, #1e293b);
    border-color: var(--border-light, #334155);
    color: var(--ink-muted, #cbd5e1);
}

[data-theme="dark"] .dataTable-pagination li a:hover {
    background: rgba(148, 163, 184, 0.14);
    color: var(--ink-primary, #f8fafc);
}

[data-theme="dark"] .dataTable-dropdown label,
[data-theme="dark"] .dataTable-info {
    color: var(--ink-subtle, #94a3b8) !important;
}

/* --------------------------------------------------------------------------
   Live indicator
   `.animate-pulse` flags the realtime dot on the location tracking page. It had
   no rule, so the "live" indicator was static. Same 2s rhythm as .live-dot-pulse.
   -------------------------------------------------------------------------- */
.animate-pulse {
    animation: mtcomSoftPulse 2s ease-in-out infinite;
}

@keyframes mtcomSoftPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .animate-pulse,
    .live-dot-pulse {
        animation: none !important;
    }
}


/* ==========================================================================
   ONE PAGE SHAPE FOR EVERY SCREEN
   --------------------------------------------------------------------------
   The admin had grown two parallel page languages plus a couple of one-offs,
   so the same visual element was built four different ways depending on which
   screen you were on:

     page head   .page-head (with a divider)      vs .mtcom-page-head (without)
     surface     .card r14/shadow-A               vs .mtcom-card r16/shadow-B
     stat tile   .kpi-card 1.5px border, column   vs .mtcom-kpi-tile 1px, row
                 .stat-card                          .tickets-hub-card
     gutters     6 screens wrapped themselves in a second .container-fluid
                 inside the layout's own, doubling their side padding
     table head  styled only where .thead-light happened to be present

   Rather than rewrite a dozen large templates, the variants are reconciled
   here: one set of surface tokens that every card-like component consumes, one
   page-head treatment, one table header, one gutter. Existing markup keeps
   working; it simply stops disagreeing with itself.
   ========================================================================== */

:root {
    /* The single definition of a "surface" - cards, tiles, panels, wells. */
    --surface-radius:  14px;
    --surface-border:  1px solid var(--border-light, #e2e8f0);
    --surface-shadow:  0 1px 3px 0 rgba(15, 23, 42, 0.05);
    --surface-shadow-hover: 0 8px 20px -4px rgba(15, 23, 42, 0.10);
    --surface-gap:     1.25rem;
}

/* --------------------------------------------------------------------------
   1. Gutters - a page must not wrap itself in a second container
   -------------------------------------------------------------------------- */
.main-content > .container-fluid,
.main-content > .container-fluid > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

/* Several screens open with `container-fluid py-4`; the layout already spaces
   the main region, so collapse the duplicated vertical padding too. */
.main-content > .container-fluid.py-4 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   2. Page head - identical whichever class a template happens to use
   -------------------------------------------------------------------------- */
.page-head,
.mtcom-page-head {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 1.25rem !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid var(--border-light, #e2e8f0) !important;
}

.page-head h1,
.mtcom-page-head-title,
.page-head-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ink-primary, #0f172a);
    margin-bottom: 0.25rem;
    letter-spacing: -0.02em;
}

.page-head-actions,
.mtcom-page-head-actions,
.mtcom-head-actions {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   3. Surfaces - every card-like component is the same shape
   -------------------------------------------------------------------------- */
.card,
.mtcom-card,
.tkt-card,
.panel {
    border-radius: var(--surface-radius) !important;
    border: var(--surface-border) !important;
    box-shadow: var(--surface-shadow) !important;
}

.mtcom-card,
.card {
    margin-bottom: var(--surface-gap) !important;
}

/* --------------------------------------------------------------------------
   4. Stat tiles - one shape, whichever of the four names a screen uses
   -------------------------------------------------------------------------- */
.mtcom-kpi-tile,
.kpi-card,
.stat-card,
.tickets-hub-card {
    border-radius: var(--surface-radius) !important;
    border: var(--surface-border) !important;
    box-shadow: var(--surface-shadow) !important;
    padding: 1.15rem 1.25rem !important;
}

.mtcom-kpi-tile:hover,
.kpi-card:hover,
.stat-card:hover,
.tickets-hub-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--surface-shadow-hover) !important;
    border-color: var(--brand-primary-border, #a7f3d0) !important;
}

/* The tickets screen keeps its accent stripe; it must survive the shared
   border rule above. */
.tickets-hub-card.hub-blue   { border-inline-start: 4.5px solid #2563eb !important; }
.tickets-hub-card.hub-amber  { border-inline-start: 4.5px solid #d97706 !important; }
.tickets-hub-card.hub-purple { border-inline-start: 4.5px solid #7c3aed !important; }
.tickets-hub-card.hub-rose   { border-inline-start: 4.5px solid #e11d48 !important; }
.tickets-hub-card.hub-teal   { border-inline-start: 4.5px solid #0d9488 !important; }
.tickets-hub-card.hub-slate  { border-inline-start: 4.5px solid #475569 !important; }

/* Every stat row uses the same responsive grid. */
.mtcom-kpi-grid,
.tickets-hero-hub,
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   5. Table headers - consistent whether or not a template remembered
      .thead-light
   -------------------------------------------------------------------------- */
.table > thead > tr > th,
.table > thead th,
.mtcom-table > thead th {
    background: var(--bg-card-subtle, #f8fafc);
    color: var(--ink-muted, #475569);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    border-bottom: 1px solid var(--border-light, #e2e8f0);
    vertical-align: middle;
}

[data-theme="dark"] .table > thead > tr > th,
[data-theme="dark"] .table > thead th,
[data-theme="dark"] .mtcom-table > thead th {
    background: rgba(148, 163, 184, 0.08);
    color: var(--ink-muted, #cbd5e1);
    border-bottom-color: var(--border-light, #334155);
}

/* --------------------------------------------------------------------------
   6. Dark theme for the reconciled surfaces
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
    --surface-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
    --surface-shadow-hover: 0 8px 20px -4px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .kpi-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .tickets-hub-card,
[data-theme="dark"] .mtcom-kpi-tile,
[data-theme="dark"] .tkt-card {
    background: var(--bg-card, #1e293b) !important;
}

[data-theme="dark"] .page-head,
[data-theme="dark"] .mtcom-page-head {
    border-bottom-color: var(--border-light, #334155) !important;
}

/* --------------------------------------------------------------------------
   7. Small screens - the page head stacks instead of squeezing
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .page-head,
    .mtcom-page-head {
        gap: 0.85rem !important;
    }

    .page-head-actions,
    .mtcom-page-head-actions,
    .mtcom-head-actions {
        width: 100%;
    }

    .page-head-actions > *,
    .mtcom-page-head-actions > *,
    .mtcom-head-actions > * {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ==========================================================================
   ICON SIZING SAFETY NET
   --------------------------------------------------------------------------
   Icons are the CSS webfont build, sized by font-size. If anything ever injects
   Font Awesome's SVG build again - or any other library drops a bare <svg> into
   a button or badge - these rules stop it expanding to fill its container,
   which is what made every icon in the admin render oversized.
   ========================================================================== */

.svg-inline--fa,
svg.svg-inline--fa {
    height: 1em !important;
    width: auto !important;
    max-width: 1.5em !important;
    display: inline-block !important;
    vertical-align: -0.125em !important;
    overflow: visible !important;
}

/* A bare <svg> inside a control should follow the text, never dictate the box. */
.btn > svg:not([width]),
.badge > svg:not([width]),
.action-icon-btn > svg:not([width]),
.mtcom-kpi-icon > svg:not([width]),
.stat-icon > svg:not([width]),
.mtcom-empty-icon > svg:not([width]) {
    height: 1em;
    width: auto;
    max-width: 1.5em;
    vertical-align: -0.125em;
}

/* Nothing is declared for the webfont glyphs on purpose: Font Awesome leaves
   font-size unset, so an <i> already inherits from whatever contains it, and
   utility classes such as `text-xxs` on the icon itself keep working. Adding
   an `i.fas { font-size: inherit }` rule here would out-specify those. */


/* ==========================================================================
   OPERATIONS CONSOLE
   --------------------------------------------------------------------------
   The Command Center's layout language, promoted out of that one template so
   other screens can share it instead of copying it. A console screen is built
   from: a header box, a KPI strip, a pill tab bar and a table card.

   Command Center keeps its own copy of these rules in-page (page styles load
   after this file, so its values simply win); anything else adopting the
   language gets it from here.
   ========================================================================== */

.cc-container {
    max-width: 1700px;
    margin: 0 auto;
    padding-bottom: 60px;
}

/* --- Header box: title, subtitle and actions inside a card ---------------- */
.cc-header-box {
    background: var(--bg-card, #ffffff);
    border: 1.5px solid var(--border-light, #e2e8f0);
    border-radius: 16px;
    padding: 22px 26px;
    margin-bottom: 22px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.cc-title-wrap h1 {
    font-size: 22px;
    font-weight: 900;
    color: var(--ink-primary, #0f172a);
    margin: 0 0 4px 0;
    letter-spacing: -0.01em;
}

.cc-title-wrap .cc-subtitle {
    font-size: 13px;
    color: var(--ink-subtle, #64748b);
    margin: 0;
}

.cc-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* --- KPI strip ------------------------------------------------------------ */
.cc-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.cc-kpi-card {
    background: var(--bg-card, #ffffff);
    border: 1.5px solid var(--border-light, #e2e8f0);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
    color: inherit;
}

.cc-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    color: inherit;
}

.kpi-red     { border-inline-start: 4.5px solid #e11d48 !important; }
.kpi-amber   { border-inline-start: 4.5px solid #d97706 !important; }
.kpi-blue    { border-inline-start: 4.5px solid #2563eb !important; }
.kpi-emerald { border-inline-start: 4.5px solid #059669 !important; }
.kpi-violet  { border-inline-start: 4.5px solid #7c3aed !important; }
.kpi-slate   { border-inline-start: 4.5px solid #475569 !important; }

.kpi-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 22px;
    flex-shrink: 0;
}

.kpi-red     .kpi-icon-box { background: #fff1f2; color: #e11d48; }
.kpi-amber   .kpi-icon-box { background: #fffbeb; color: #d97706; }
.kpi-blue    .kpi-icon-box { background: #eff6ff; color: #2563eb; }
.kpi-emerald .kpi-icon-box { background: #ecfdf5; color: #059669; }
.kpi-violet  .kpi-icon-box { background: #f5f3ff; color: #7c3aed; }
.kpi-slate   .kpi-icon-box { background: #f1f5f9; color: #475569; }

.cc-kpi-body { min-width: 0; }

.cc-kpi-label {
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-subtle, #64748b);
    display: block;
    margin-bottom: 2px;
}

.cc-kpi-value {
    font-size: 26px;
    font-weight: 900;
    line-height: 1.1;
    color: var(--ink-primary, #0f172a);
}

.cc-kpi-note {
    font-size: 11.5px;
    color: var(--ink-muted, #94a3b8);
    margin-top: 2px;
}

/* --- Pill tab bar --------------------------------------------------------- */
.cc-nav-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    background: var(--bg-card, #ffffff);
    padding: 8px 12px;
    border-radius: 14px;
    border: 1.5px solid var(--border-light, #e2e8f0);
}

.cc-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ink-secondary, #475569);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.cc-nav-pill:hover {
    background: var(--bg-card-subtle, #f1f5f9);
    color: var(--ink-primary, #0f172a);
}

.cc-nav-pill.active {
    background: #059669;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
}

.cc-nav-pill.active .badge {
    background: #ffffff !important;
    color: #059669 !important;
}

/* --- Table card ----------------------------------------------------------- */
.cc-table-card {
    background: var(--bg-card, #ffffff);
    border: 1.5px solid var(--border-light, #e2e8f0);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    margin-bottom: 22px;
}

.cc-card-head {
    padding: 16px 20px;
    border-bottom: 1.5px solid var(--border-light, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cc-card-title {
    font-size: 14.5px;
    font-weight: 850;
    color: var(--ink-primary, #0f172a);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cc-table { width: 100%; border-collapse: collapse; margin: 0; }

.cc-table thead {
    background: var(--bg-card-subtle, #f8fafc);
    border-bottom: 2px solid var(--border-light, #e2e8f0);
}

.cc-table th {
    padding: 13px 16px;
    font-size: 11.5px;
    font-weight: 850;
    text-transform: uppercase;
    color: var(--ink-secondary, #64748b);
    letter-spacing: 0.03em;
    text-align: start;
    white-space: nowrap;
}

.cc-table td {
    padding: 14px 16px;
    font-size: 13px;
    color: var(--ink-primary, #0f172a);
    border-bottom: 1px solid var(--border-light, #f1f5f9);
    vertical-align: middle;
}

.cc-table tr:last-child td { border-bottom: 0; }

.cc-table tbody tr:hover td { background: var(--bg-card-subtle, #f8fafc); }

/* --- Reference chip (ticket / task codes) --------------------------------- */
.code-chip {
    font-family: var(--font-mono, monospace);
    font-weight: 800;
    font-size: 11.5px;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--bg-card-subtle, #f1f5f9);
    color: var(--ink-secondary, #475569);
    text-decoration: none;
    display: inline-block;
}

.code-chip:hover {
    background: var(--bg-card-active, #e2e8f0);
    color: var(--ink-primary, #1e293b);
}

/* --- Launch tiles (one-click entry points) -------------------------------- */
.cc-launch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.cc-launch-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--bg-card, #ffffff);
    border: 1.5px solid var(--border-light, #e2e8f0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.cc-launch-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
    border-color: var(--brand-primary-border, #a7f3d0);
    color: inherit;
}

.cc-launch-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 18px;
    flex-shrink: 0;
}

.cc-launch-title {
    font-size: 13.5px;
    font-weight: 850;
    color: var(--ink-primary, #0f172a);
}

.cc-launch-note {
    font-size: 11.5px;
    color: var(--ink-subtle, #64748b);
}

/* --- Dark theme ----------------------------------------------------------- */
[data-theme="dark"] .cc-header-box,
[data-theme="dark"] .cc-kpi-card,
[data-theme="dark"] .cc-nav-tabs,
[data-theme="dark"] .cc-table-card,
[data-theme="dark"] .cc-launch-card {
    background: var(--bg-card, #1e293b);
    border-color: var(--border-light, #334155);
}

[data-theme="dark"] .cc-table thead {
    background: rgba(148, 163, 184, 0.08);
    border-bottom-color: var(--border-light, #334155);
}

[data-theme="dark"] .cc-table td {
    border-bottom-color: var(--border-light, #334155);
}

[data-theme="dark"] .cc-table tbody tr:hover td {
    background: rgba(148, 163, 184, 0.08);
}

[data-theme="dark"] .kpi-red     .kpi-icon-box { background: rgba(244, 63, 94, 0.16);  color: #fda4af; }
[data-theme="dark"] .kpi-amber   .kpi-icon-box { background: rgba(245, 158, 11, 0.16); color: #fcd34d; }
[data-theme="dark"] .kpi-blue    .kpi-icon-box { background: rgba(59, 130, 246, 0.16); color: #93c5fd; }
[data-theme="dark"] .kpi-emerald .kpi-icon-box { background: rgba(16, 185, 129, 0.16); color: #6ee7b7; }
[data-theme="dark"] .kpi-violet  .kpi-icon-box { background: rgba(124, 58, 237, 0.16); color: #c4b5fd; }
[data-theme="dark"] .kpi-slate   .kpi-icon-box { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; }

[data-theme="dark"] .code-chip {
    background: rgba(148, 163, 184, 0.12);
    color: var(--ink-muted, #cbd5e1);
}

/* --- Small screens -------------------------------------------------------- */
@media (max-width: 767.98px) {
    .cc-header-box {
        padding: 18px;
        align-items: flex-start;
    }

    .cc-header-actions {
        width: 100%;
    }

    .cc-header-actions > * {
        flex: 1 1 auto;
        justify-content: center;
    }

    .cc-title-wrap h1 { font-size: 19px; }

    .cc-kpi-card { padding: 15px 16px; gap: 13px; }

    .kpi-icon-box { width: 42px; height: 42px; font-size: 19px; }

    .cc-kpi-value { font-size: 22px; }

    /* Wide tables scroll inside their card rather than breaking the page. */
    .cc-table-card .table-responsive,
    .cc-table-scroll { overflow-x: auto; }
}

/* ==========================================================================
   DATA TABLE CARDS ADOPT THE CONSOLE SHAPE
   --------------------------------------------------------------------------
   The dashboard's lower panels (daily activity, recent tickets, live feed,
   inventory health) are built from .data-table-card, while the Command Center
   uses .cc-table-card. They were a couple of pixels and one background apart,
   which is exactly the kind of near-miss that makes two screens feel unrelated.
   Aligning them here means those panels match without touching their markup.
   ========================================================================== */

.data-table-card {
    border-radius: 16px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
    margin-bottom: 22px !important;
}

.data-table-head {
    /* The console header sits on the card, not on a tinted strip. */
    background: transparent !important;
    border-bottom: 1.5px solid var(--border-light, #e2e8f0) !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.data-table thead {
    background: var(--bg-card-subtle, #f8fafc) !important;
    border-bottom: 2px solid var(--border-light, #e2e8f0) !important;
}

.data-table thead th {
    padding: 13px 16px !important;
    font-size: 11.5px !important;
    font-weight: 850 !important;
    text-transform: uppercase !important;
    color: var(--ink-secondary, #64748b) !important;
    letter-spacing: 0.03em !important;
}

.data-table tbody td {
    padding: 14px 16px !important;
    font-size: 13px !important;
    border-bottom: 1px solid var(--border-light, #f1f5f9) !important;
    vertical-align: middle !important;
}

.data-table tbody tr:last-child td { border-bottom: 0 !important; }

.data-table tbody tr:hover td { background: var(--bg-card-subtle, #f8fafc) !important; }

[data-theme="dark"] .data-table-head {
    border-bottom-color: var(--border-light, #334155) !important;
}

[data-theme="dark"] .data-table thead {
    background: rgba(148, 163, 184, 0.08) !important;
    border-bottom-color: var(--border-light, #334155) !important;
}

[data-theme="dark"] .data-table tbody td {
    border-bottom-color: var(--border-light, #334155) !important;
}

[data-theme="dark"] .data-table tbody tr:hover td {
    background: rgba(148, 163, 184, 0.08) !important;
}


/* ==========================================================================
   THE ONE PAGE SHAPE, MEASURED FROM /admin/tasks
   --------------------------------------------------------------------------
   The owner named the Tasks index as the reference for the whole admin. Its
   own dimensions were read off that page and are set here, LAST in the file,
   so they win over every earlier reconciliation. Every screen is built from
   the same six parts, and each part has exactly one size:

     page root      .mtcom-page            (= container-fluid px-0, no extra
                                             vertical padding: the layout pads)
     page head      .mtcom-page-head       title 22px/850, subtitle 14px muted,
                                             gap 16px, 24px below, no divider
     stat tiles     .mtcom-kpi-grid/.tile  auto-fit 210px, gap 16px, tile
                                             r14, 16px 20px, 3.5px top accent,
                                             label 12px caps, value 26px
     pill filters   .mtcom-filter-pills    6px 14px, r20, 12.5px/750, gap 8
     filter card    .card.mtcom-filter     h6 header, row g-3, small controls
     table card     .card + .table + .card-footer   th 11.5px caps 14px 18px,
                                             td 13px 14px 18px, footer 14px 22px

   The Tasks page's own class names (task-page-head, task-kpi-*, filter-pill,
   filter-pills-bar) are kept as aliases of the shared ones, so nothing that
   copied them ever drifts again.
   ========================================================================== */
:root {
    --surface-radius: 14px;
    --surface-gap: 20px;
    --page-head-title: 22px;
    --page-head-gap: 16px;
    --page-head-space: 24px;
    --kpi-gap: 16px;
    --kpi-pad: 16px 20px;
    --kpi-value: 26px;
    --kpi-label: 12px;
    --control-sm-font: 12.5px;
    --control-sm-height: 34px;
    --btn-sm-font: 11.5px;
    --btn-sm-pad: 6px 12px;
}

/* --- Page root ------------------------------------------------------------- */
.mtcom-page,
.main-content > .container-fluid,
.main-content > .container-fluid.py-3,
.main-content > .container-fluid.py-4 {
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

/* --- Page head ------------------------------------------------------------- */
.mtcom-page-head,
.task-page-head,
.page-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: var(--page-head-gap) !important;
    margin: 0 0 var(--page-head-space) 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: start;
}
.mtcom-page-head > div:first-child,
.task-page-head > div:first-child,
.page-head > div:first-child {
    min-width: 0;
    flex: 1 1 320px;
}
.mtcom-page-head-title,
.page-head-title,
.page-head h1,
.mtcom-page-head h1,
.mtcom-page-head h2,
.mtcom-page-head h3,
.task-page-head h3,
.page-head h3 {
    font-size: var(--page-head-title) !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
    color: var(--ink-primary, #0f172a) !important;
    margin: 0 0 4px 0 !important;
    letter-spacing: -0.01em !important;
}
.mtcom-page-head-subtitle,
.mtcom-page-head-sub,
.page-head p.muted,
.mtcom-page-head p.muted,
.mtcom-page-head p.text-muted,
.task-page-head p.text-muted,
.page-head p.text-muted {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--ink-muted, #475569) !important;
    margin: 0 !important;
    max-width: 78ch;
}
.mtcom-page-head-actions,
.page-head-actions,
.mtcom-head-actions {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}
.mtcom-page-head-actions .btn,
.page-head-actions .btn {
    margin-bottom: 0 !important;
}

/* --- Stat tiles ------------------------------------------------------------ */
.mtcom-kpi-grid,
.task-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    gap: var(--kpi-gap) !important;
    margin: 0 0 var(--page-head-space) 0 !important;
}
.mtcom-kpi-tile,
.task-kpi-tile,
.kpi-card,
.stat-card,
.tickets-hub-card {
    position: relative;
    overflow: hidden;
    background: var(--bg-card, #ffffff) !important;
    border: 1px solid var(--border-light, #e2e8f0) !important;
    border-radius: var(--surface-radius) !important;
    box-shadow: var(--surface-shadow) !important;
    padding: var(--kpi-pad) !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 92px;
    text-align: start;
}
.mtcom-kpi-tile:hover,
.task-kpi-tile:hover,
.kpi-card:hover,
.stat-card:hover,
.tickets-hub-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--surface-shadow-hover) !important;
    border-color: var(--border-strong, #cbd5e1) !important;
}
/* A 3.5px accent along the top, the way the Tasks tiles are marked. */
.mtcom-kpi-tile::before,
.task-kpi-tile::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3.5px;
    background: var(--tile-accent, var(--brand-primary, #059669));
}
.tile-blue    { --tile-accent: #2563eb; }
.tile-purple  { --tile-accent: #7c3aed; }
.tile-green   { --tile-accent: #10b981; }
.tile-red     { --tile-accent: #ef4444; }
.tile-amber   { --tile-accent: #f59e0b; }
.tile-slate   { --tile-accent: #64748b; }
.tile-teal    { --tile-accent: #0d9488; }
.mtcom-kpi-info,
.task-kpi-tile > div:only-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}
.mtcom-kpi-label,
.task-kpi-lbl,
.kpi-label,
.stat-label {
    font-size: var(--kpi-label) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--ink-subtle, #64748b) !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
}
.mtcom-kpi-value,
.task-kpi-val,
.kpi-value,
.stat-value {
    font-size: var(--kpi-value) !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    color: var(--ink-primary, #0f172a) !important;
    margin: 0 !important;
}
.mtcom-kpi-subtext,
.mtcom-kpi-tile .text-xs.text-muted,
.task-kpi-tile .text-xs.text-muted {
    font-size: 12px !important;
    color: var(--ink-muted, #475569) !important;
    margin-top: 2px !important;
    line-height: 1.4 !important;
}
.mtcom-kpi-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

/* --- Pill filters ---------------------------------------------------------- */
.mtcom-filter-pills,
.filter-pills-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 20px 0 !important;
}
.mtcom-filter-pill,
.filter-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: var(--bg-card, #ffffff) !important;
    border: 1.5px solid var(--border-light, #e2e8f0) !important;
    color: var(--ink-muted, #475569) !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 12.5px !important;
    font-weight: 750 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.mtcom-filter-pill:hover,
.filter-pill:hover,
.mtcom-filter-pill.active,
.filter-pill.active {
    background: var(--brand-primary-tint, #ecfdf5) !important;
    border-color: var(--brand-primary, #059669) !important;
    color: var(--brand-primary-dark, #064e3b) !important;
}

/* --- Filter card ----------------------------------------------------------- */
.card.mtcom-filter > .card-header,
.mtcom-filter-card > .card-header {
    cursor: pointer;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 22px !important;
}
.card.mtcom-filter > .card-header h6,
.mtcom-filter-card > .card-header h6 {
    font-size: 13.5px !important;
    font-weight: 850 !important;
    margin: 0 !important;
}
.card.mtcom-filter .row {
    row-gap: 12px;
}
.form-control-sm,
.form-select-sm {
    font-size: var(--control-sm-font) !important;
    min-height: var(--control-sm-height) !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    line-height: 1.4 !important;
}
.form-select-sm {
    padding-inline-end: 30px !important;
}
.form-label {
    margin-bottom: 6px !important;
}

/* --- Table card ------------------------------------------------------------ */
.card > .card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
}
.card > .card-header h5 {
    font-size: 15px !important;
    font-weight: 850 !important;
    margin: 0 !important;
}
.card > .card-header h6 {
    font-size: 13.5px !important;
    font-weight: 850 !important;
    margin: 0 !important;
}
.card > .card-header .text-xs,
.card > .card-header .text-muted.text-xs {
    font-size: 12px !important;
    color: var(--ink-muted, #475569) !important;
}
/* A table inside a card is framed by the card, not by a second frame. */
.card > .table-responsive,
.card > .card-body > .table-responsive:only-child {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.card > .card-body > .table-responsive:only-child {
    margin: -22px !important;
    width: calc(100% + 44px) !important;
}
.table th,
.table thead th {
    padding: 14px 18px !important;
    font-size: 11.5px !important;
}
.table td,
.table tbody td {
    padding: 14px 18px !important;
    font-size: 13px !important;
}
.th-sortable {
    cursor: pointer;
    user-select: none;
}
.th-sortable a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit !important;
    text-decoration: none !important;
}
.th-sortable:hover,
.th-sortable a:hover {
    color: var(--brand-primary, #059669) !important;
}
.card > .card-footer,
.card-footer {
    background: var(--bg-card, #ffffff) !important;
    border-top: 1px solid var(--border-light, #e2e8f0) !important;
    padding: 14px 22px !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.card-footer .text-xs {
    font-size: 12px !important;
    color: var(--ink-muted, #475569) !important;
}
.pagination {
    margin: 0 !important;
    gap: 4px;
    flex-wrap: wrap;
}
.page-link {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    min-width: 32px;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-light, #e2e8f0) !important;
    color: var(--ink-muted, #475569) !important;
    background: var(--bg-card, #ffffff) !important;
    box-shadow: none !important;
    margin: 0 !important;
}
.page-item.active .page-link {
    background: var(--brand-primary, #059669) !important;
    border-color: var(--brand-primary, #059669) !important;
    color: #ffffff !important;
}
.page-item.disabled .page-link {
    opacity: 0.5;
}

/* --- Buttons: the small size the reference uses everywhere ---------------- */
.btn-sm,
.btn-group-sm > .btn {
    font-size: var(--btn-sm-font) !important;
    padding: var(--btn-sm-pad) !important;
    border-radius: 8px !important;
    line-height: 1.35 !important;
}
.btn-sm.btn-icon,
.table .btn-sm {
    padding: 5px 10px !important;
}
.btn-white {
    background: var(--bg-card, #ffffff) !important;
    border: 1px solid var(--border-light, #e2e8f0) !important;
    color: var(--ink-muted, #475569) !important;
}
.btn-white:hover {
    background: var(--bg-card-hover, #f1f5f9) !important;
    color: var(--ink-primary, #0f172a) !important;
}

/* --- Forms (create / edit pages) ------------------------------------------ */
.mtcom-form-card > .card-header h5,
.mtcom-form-card > .card-header h6 {
    font-size: 15px !important;
}
.mtcom-form-card .form-control,
.mtcom-form-card .form-select {
    font-size: 13px !important;
    min-height: 40px !important;
    border-radius: 10px !important;
}
.mtcom-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 6px;
}
.mtcom-form-actions .btn {
    margin-bottom: 0 !important;
}

/* --- Small screens ---------------------------------------------------------- */
@media (max-width: 767.98px) {
    .mtcom-page-head,
    .task-page-head,
    .page-head {
        gap: 12px !important;
        margin-bottom: 18px !important;
    }
    .mtcom-page-head-title,
    .page-head-title,
    .mtcom-page-head h3,
    .task-page-head h3,
    .page-head h1,
    .page-head h3 {
        font-size: 19px !important;
    }
    .mtcom-page-head-actions,
    .page-head-actions,
    .task-page-head > div:last-child {
        width: 100%;
    }
    .mtcom-page-head-actions > .btn,
    .page-head-actions > .btn,
    .task-page-head > div:last-child > .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
    .mtcom-kpi-grid,
    .task-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
    .mtcom-kpi-tile,
    .task-kpi-tile {
        padding: 14px 16px !important;
        min-height: 84px;
    }
    .mtcom-kpi-value,
    .task-kpi-val {
        font-size: 22px !important;
    }
    .card-header,
    .card > .card-header {
        padding: 14px 16px !important;
    }
    .card-body {
        padding: 16px !important;
    }
    .card > .card-body > .table-responsive:only-child {
        margin: -16px !important;
        width: calc(100% + 32px) !important;
    }
    .table th,
    .table thead th,
    .table td,
    .table tbody td {
        padding: 12px 14px !important;
    }
    .card-footer,
    .card > .card-footer {
        padding: 12px 16px !important;
        justify-content: center;
        text-align: center;
    }
    .mtcom-form-actions {
        justify-content: stretch;
    }
    .mtcom-form-actions .btn {
        flex: 1 1 auto;
    }
}
@media (max-width: 419.98px) {
    .mtcom-kpi-grid,
    .task-kpi-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* --- Right-to-left --------------------------------------------------------- */
[dir="rtl"] .mtcom-page-head,
[dir="rtl"] .task-page-head,
[dir="rtl"] .page-head,
[dir="rtl"] .card > .card-header,
[dir="rtl"] .card-footer,
[dir="rtl"] .mtcom-kpi-tile,
[dir="rtl"] .task-kpi-tile {
    text-align: start;
}
[dir="rtl"] .mtcom-page-head-title,
[dir="rtl"] .mtcom-page-head h3,
[dir="rtl"] .task-page-head h3 {
    letter-spacing: 0 !important;
}
/* Legacy left/right utilities still present in older templates flip with the
   page direction instead of pinning to a physical side. */
[dir="rtl"] .text-left   { text-align: right !important; }
[dir="rtl"] .text-right  { text-align: left !important; }
[dir="rtl"] .float-left  { float: right !important; }
[dir="rtl"] .float-right { float: left !important; }
[dir="rtl"] .text-end    { text-align: left !important; }
[dir="rtl"] .text-start  { text-align: right !important; }
[dir="rtl"] .th-sortable a,
[dir="rtl"] .mtcom-filter-pill,
[dir="rtl"] .filter-pill {
    flex-direction: row;
}
[dir="rtl"] .form-select,
[dir="rtl"] .form-select-sm {
    background-position: left 10px center !important;
    padding-inline-end: 30px !important;
}
[dir="rtl"] .dropdown-menu {
    text-align: right;
}

/* --- Dark theme for the parts introduced above ----------------------------- */
[data-theme="dark"] .mtcom-filter-pill,
[data-theme="dark"] .filter-pill,
[data-theme="dark"] .btn-white,
[data-theme="dark"] .page-link {
    background: var(--bg-card, #1e293b) !important;
    border-color: var(--border-light, #334155) !important;
    color: var(--ink-muted, #94a3b8) !important;
}
[data-theme="dark"] .mtcom-filter-pill.active,
[data-theme="dark"] .filter-pill.active {
    background: rgba(16, 185, 129, 0.16) !important;
    border-color: #10b981 !important;
    color: #6ee7b7 !important;
}

/* --- Bounded scroll panes (tables inside modals / long lists) --------------- */
.mtcom-scroll-pane {
    max-height: 400px;
    overflow: auto;
}
.mtcom-scroll-pane-sm {
    max-height: 260px;
    overflow: auto;
}

/* --- Small shared utilities the converted pages asked for ------------------ */
a.mtcom-kpi-tile,
a.mtcom-kpi-tile:hover {
    color: inherit !important;
    text-decoration: none !important;
}
.mtcom-kpi-tile.active {
    border-color: var(--brand-primary, #059669) !important;
    box-shadow: 0 0 0 3px var(--brand-primary-tint, #ecfdf5), var(--surface-shadow) !important;
}
.mtcom-kpi-grid.in-card {
    margin-bottom: 0 !important;
}
.modal-content {
    border-radius: var(--surface-radius) !important;
    border: 1px solid var(--border-light, #e2e8f0) !important;
    box-shadow: var(--shadow-xl) !important;
}
.modal-header,
.modal-footer {
    padding: 14px 22px !important;
    border-color: var(--border-light, #e2e8f0) !important;
}
.modal-title {
    font-size: 15px !important;
    font-weight: 850 !important;
}
.table-responsive.mtcom-feed {
    max-height: 380px;
    overflow-y: auto;
}
.text-purple  { color: #7c3aed !important; }
.badge-purple { background: #f5f3ff !important; color: #5b21b6 !important; border: 1px solid #ddd6fe !important; }
.text-pre-line { white-space: pre-line; }
.badge.bg-primary-subtle   { background: #eef2ff !important; color: #4338ca !important; border: 1px solid #c7d2fe !important; }
.badge.bg-success-subtle   { background: #ecfdf5 !important; color: #065f46 !important; border: 1px solid #a7f3d0 !important; }
.badge.bg-warning-subtle   { background: #fffbeb !important; color: #92400e !important; border: 1px solid #fde68a !important; }
.badge.bg-danger-subtle    { background: #fff1f2 !important; color: #9f1239 !important; border: 1px solid #fecdd3 !important; }
.badge.bg-info-subtle      { background: #f0f9ff !important; color: #0369a1 !important; border: 1px solid #bae6fd !important; }
.badge.bg-secondary-subtle { background: #f1f5f9 !important; color: #475569 !important; border: 1px solid #cbd5e1 !important; }
.mtcom-form-section {
    background: var(--bg-card-subtle, #f8fafc);
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 16px;
}
.mtcom-avatar-sm, .mtcom-avatar-md, .mtcom-avatar-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    object-fit: cover;
}
.mtcom-avatar-sm { width: 32px; height: 32px; }
.mtcom-avatar-md { width: 44px; height: 44px; }
.mtcom-avatar-lg { width: 64px; height: 64px; border-radius: 14px; }