/* ═══════════════════════════════════════════════════════════════════════
   PROHMOTION QMS  —  MASTER STYLESHEET  v14
   ───────────────────────────────────────────────────────────────────────
    §1   CSS Custom Properties (all tokens in one place)
    §2   Global Reset & Base
    §3   Keyframe Animations
    §4   Utility Classes
    §5   App Layout Shells
    §6   Surface Panels & Card Containers
    §7   Control Family  (every button/pill/toggle)
    §8   Dropdown Menus
    §9   Filter Bar, Island Tabs & f-tabs
   §10   Search Inputs
   §11   Badges & Status Indicators
   §12   Inbox Rows & List Tiles
   §13   Chat Bubbles
   §14   Rich Cards, Ghost Cards & Relation Pills
   §15   Dossier / Entity View            (entity.php)
   §16   Compliance Command Center        (shared: entity.php + tags.php)
   §17   Directory                        (tags.php — incl. Momentum Lane)
   §18   Monitor                          (monitor.php)
   §19   Modal & Editor System
   §20   Zen Mode
   §21   Policy Compliance Card
   §22   Calendar                         (calendar_view.php — elite)
   §23   Global Top Navigation
   §24   Floating Format Menu
   §25   Media Queries                    (all breakpoints, largest → smallest)
   §26   Legacy Overrides  (v16 · v17 · v19 · KPM · Spotlight · Cascade · FAB · Top-Nav Redesign)
   §27   Modal Utility Classes  (mi-*)
   ───────────────────────────────────────────────────────────────────────
   Rules: one :root · zero duplicates · !important only vs inline-JS ·
   media queries only at §25 · every class in its logical section.
   ═══════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────
   §1  CSS CUSTOM PROPERTIES
   ─────────────────────────────────────────────────────────────────────── */
:root {
    /* Brand accent */
    --pro-accent-1:     #8B5CF6;
    --pro-accent-2:     #7C3AED;
    --pro-accent-3:     #4F46E5;
    --pro-accent-blue:  #3457FF;
    --accent-400:       #818CF8;
    --accent-500:       #6366F1;
    --accent-600:       #4F46E5;
    --accent-700:       #4338CA;
    --accent-indigo:    #4338CA;
    --accent-blue:      #3457FF;

    /* Surfaces */
    --pro-surface-0:         #FFFFFF;
    --pro-surface-1:         #FCFDFE;
    --pro-surface-2:         #FAFBFD;
    --pro-surface-3:         #F1F5F9;
    --surface-app:           #F8FAFC;
    --surface-1:             #FFFFFF;
    --surface-2:             #F8FAFC;
    --surface-3:             #F1F5F9;
    --surface-purple-soft:   #F8FAFF;
    --surface-purple-tint:   #EEF2FF;
    --folder-bg:             #FFFFFF;

    /* Borders */
    --pro-line-1:       rgba(226,232,240,0.78);
    --pro-line-2:       #DCE4EE;
    --border-subtle:    #E2E8F0;
    --border-strong:    #CBD5E1;
    --border-accent:    #C7D2FE;
    --folder-border:    #E2E8F0;

    /* Text */
    --pro-text-1:   #0F172A;
    --pro-text-2:   #334155;
    --pro-text-3:   #64748B;
    --text-strong:  #0F172A;
    --text-body:    #334155;
    --text-soft:    #64748B;
    --text-faint:   #94A3B8;

    /* Semantic states */
    --success-bg:     #F0FDF4;
    --success-border: #BBF7D0;
    --success-text:   #166534;
    --danger-bg:      #FEF2F2;
    --danger-border:  #FECACA;
    --danger-text:    #B91C1C;

    /* Typography */
    --main-font:   "Inter","Roboto","Segoe UI","Helvetica Neue",Arial,sans-serif,system-ui;
    --menu-font:   Inter,"Segoe UI",Roboto,system-ui,sans-serif,Arial;
    --txt-size:    10.5pt;
    --menu-offset: 20px;

    /* Radius */
    --pro-radius-pill:   14px;
    --pro-radius-card:   20px;
    --pro-radius-panel:  26px;
    --radius-xs:    8px;
    --radius-sm:    10px;
    --radius-md:    12px;
    --radius-lg:    16px;
    --radius-xl:    20px;
    --radius-2xl:   24px;
    --radius-pill:  999px;
    --ux-radius-pill:    999px;
    --ux-radius-soft:    16px;
    --ux-radius-compact: 14px;

    /* Shadows */
    --pro-shadow-sm: 0 2px 8px rgba(15,23,42,0.028);
    --pro-shadow-md: 0 10px 22px rgba(15,23,42,0.05);
    --pro-shadow-lg: 0 16px 30px rgba(15,23,42,0.07);
    --shadow-xs:     0 1px 2px rgba(15,23,42,0.03);
    --shadow-sm:     0 4px 12px rgba(15,23,42,0.04);
    --shadow-md:     0 10px 26px rgba(15,23,42,0.06);
    --shadow-lg:     0 16px 36px rgba(15,23,42,0.10);
    --shadow-purple: 0 14px 30px rgba(79,70,229,0.14);

    /* Timing */
    --pro-tr-fast:   0.16s;
    --pro-tr-base:   0.22s;
    --pro-ease:      cubic-bezier(0.16,1,0.3,1);
    --ease-standard: cubic-bezier(0.22,1,0.36,1);
    --ease-soft:     cubic-bezier(0.2,0.8,0.2,1);
    --tr-fast: 0.18s;
    --tr-base: 0.24s;
    --tr-slow: 0.36s;

    /* Motion */
    --pro-hover-shift:      translate(1px,-1px);
    --pro-hover-shift-card: translateY(-2px);
    --hover-shift-soft:     translate3d(4px,-3px,0);
    --hover-shift-press:    translate3d(2px,-1px,0);

    /* Control sizing */
    --control-height:    40px;
    --control-height-sm: 34px;
    --nav-pill-height:   42px;
    --nav-pill-pad-x:    18px;
    --nav-pill-gap:      10px;

    /* Control backgrounds (final tuned values) */
    --pro-control-bg:        linear-gradient(180deg,rgba(255,255,255,0.995) 0%,rgba(249,250,252,0.975) 100%);
    --pro-control-bg-hover:  linear-gradient(180deg,rgba(255,255,255,1) 0%,rgba(248,244,255,0.94) 100%);
    --pro-primary-bg:        linear-gradient(135deg,rgba(109,40,217,0.95) 0%,rgba(91,33,182,0.94) 58%,rgba(79,70,229,0.92) 100%);
    --pro-primary-bg-soft:   linear-gradient(135deg,rgba(245,243,255,0.82) 0%,rgba(238,242,255,0.88) 100%);
    --qms-purple:            linear-gradient(135deg,#7C3AED 0%,#5B21B6 46%,#4F46E5 100%);
    --qms-purple-soft:       linear-gradient(180deg,#FFFFFF 0%,#FAF5FF 100%);

    /* App backgrounds */
    --sig-app-bg:
        radial-gradient(1200px 520px at 12% -6%,rgba(139,92,246,0.16),transparent 58%),
        radial-gradient(980px 440px at 86% 0%,rgba(59,130,246,0.08),transparent 56%),
        linear-gradient(180deg,#F8FAFC 0%,#F8FAFC 36%,#F4F6FB 100%);
    --sig-nav-bg:    linear-gradient(180deg,rgba(255,255,255,0.92),rgba(250,247,255,0.82));
    --sig-nav-shadow:
        0 18px 54px rgba(15,23,42,0.065),
        0 8px 18px rgba(124,58,237,0.06),
        inset 0 1px 0 rgba(255,255,255,0.96);
    --sig-surface-bg:              linear-gradient(180deg,rgba(255,255,255,0.985),rgba(252,248,255,0.94));
    --sig-surface-bg-hover:        linear-gradient(180deg,rgba(255,255,255,1),rgba(249,243,255,0.96));
    --sig-surface-border:          rgba(226,232,240,0.92);
    --sig-surface-border-strong:   rgba(196,181,253,0.82);
    --sig-surface-shadow:
        0 20px 48px rgba(15,23,42,0.055),
        0 8px 18px rgba(124,58,237,0.055),
        inset 0 1px 0 rgba(255,255,255,0.98);
    --sig-surface-shadow-hover:
        0 26px 64px rgba(15,23,42,0.08),
        0 14px 30px rgba(124,58,237,0.10),
        inset 0 1px 0 rgba(255,255,255,1);

    /* Control shadow ramp */
    --sig-control-bg:              linear-gradient(180deg,rgba(255,255,255,0.985),rgba(247,250,252,0.93));
    --sig-control-bg-hover:        linear-gradient(180deg,rgba(255,255,255,1),rgba(248,242,255,0.97));
    --sig-control-border:          rgba(226,232,240,0.94);
    --sig-control-border-strong:   rgba(192,132,252,0.72);
    --sig-control-shadow:
        0 10px 24px rgba(15,23,42,0.05),
        0 3px 9px rgba(124,58,237,0.04),
        inset 0 1px 0 rgba(255,255,255,0.98);
    --sig-control-shadow-hover:
        0 20px 36px rgba(15,23,42,0.075),
        0 10px 22px rgba(124,58,237,0.12),
        inset 0 1px 0 rgba(255,255,255,1);
    --sig-control-shadow-pressed:
        0 7px 16px rgba(15,23,42,0.05),
        inset 0 2px 8px rgba(124,58,237,0.10),
        inset 0 1px 0 rgba(255,255,255,0.90);
    --sig-primary-bg:
        linear-gradient(135deg,#3457FF 0%,#5B6CFF 52%,#7C8DFF 100%);
    --sig-primary-shadow:
        0 14px 28px rgba(52,87,255,0.22),
        0 8px 18px rgba(99,102,241,0.16),
        inset 0 1px 0 rgba(255,255,255,0.24);
    --sig-primary-shadow-hover:
        0 22px 40px rgba(52,87,255,0.26),
        0 10px 24px rgba(99,102,241,0.18),
        inset 0 1px 0 rgba(255,255,255,0.28);
    --sig-success-bg: linear-gradient(135deg,#22C55E 0%,#15803D 100%);
    --sig-warning-bg: linear-gradient(135deg,#F59E0B 0%,#B45309 100%);
    --sig-danger-bg:  linear-gradient(135deg,#EF4444 0%,#B91C1C 100%);

    /* UX system */
    --ux-border:         rgba(226,232,240,0.94);
    --ux-border-strong:  rgba(192,132,252,0.60);
    --ux-border-pressed: rgba(167,139,250,0.72);
    --ux-shadow-rest:    0 4px 12px rgba(15,23,42,0.045),inset 0 1px 0 rgba(255,255,255,0.98);
    --ux-shadow-hover:   0 16px 28px rgba(124,58,237,0.12),0 4px 10px rgba(15,23,42,0.04),inset 0 1px 0 rgba(255,255,255,1);
    --ux-shadow-pressed: 0 7px 16px rgba(124,58,237,0.10),inset 0 2px 8px rgba(124,58,237,0.10);
    --ux-shadow-primary: 0 18px 34px rgba(124,58,237,0.22),inset 0 1px 0 rgba(255,255,255,0.22);
    --ux-shadow-success: 0 16px 28px rgba(21,128,61,0.16),inset 0 1px 0 rgba(255,255,255,0.20);
    --ux-shadow-warning: 0 16px 28px rgba(180,83,9,0.16),inset 0 1px 0 rgba(255,255,255,0.20);
    --ux-shadow-danger:  0 16px 28px rgba(220,38,38,0.14),inset 0 1px 0 rgba(255,255,255,0.20);
    --ux-control-shadow-rest:
        0 8px 18px rgba(15,23,42,0.045),0 2px 6px rgba(124,58,237,0.03),inset 0 1px 0 rgba(255,255,255,0.98);
    --ux-control-shadow-hover:
        0 16px 30px rgba(15,23,42,0.078),0 8px 18px rgba(124,58,237,0.10),inset 0 1px 0 rgba(255,255,255,1);
    --ux-control-shadow-pressed:
        0 7px 14px rgba(15,23,42,0.05),inset 0 2px 4px rgba(15,23,42,0.07),inset 0 1px 0 rgba(255,255,255,0.9);
    --ux-primary-shadow-rest:
        0 12px 24px rgba(99,102,241,0.22),0 6px 14px rgba(124,58,237,0.16),inset 0 1px 0 rgba(255,255,255,0.22);
    --ux-primary-shadow-hover:
        0 20px 36px rgba(99,102,241,0.28),0 10px 24px rgba(124,58,237,0.22),inset 0 1px 0 rgba(255,255,255,0.26);
    --ux-panel-bg:     linear-gradient(180deg,rgba(255,255,255,0.985),rgba(250,247,255,0.94));
    --ux-panel-border: rgba(226,232,240,0.94);
    --ux-panel-shadow:
        0 14px 36px rgba(15,23,42,0.055),0 2px 8px rgba(124,58,237,0.035),inset 0 1px 0 rgba(255,255,255,0.96);
    --ux-panel-shadow-hover:
        0 22px 48px rgba(15,23,42,0.082),0 8px 20px rgba(124,58,237,0.095),inset 0 1px 0 rgba(255,255,255,1);
    --ux-bg-rest:    linear-gradient(180deg,rgba(255,255,255,0.985),rgba(248,250,252,0.94));
    --ux-bg-hover:   linear-gradient(180deg,rgba(255,255,255,1),rgba(250,245,255,0.97));
    --ux-bg-pressed: linear-gradient(180deg,rgba(250,245,255,0.96),rgba(245,243,255,0.92));
    --ux-tr:
        background var(--tr-base) var(--ease-standard),
        background-color var(--tr-base) var(--ease-standard),
        border-color var(--tr-base) var(--ease-standard),
        color var(--tr-base) var(--ease-standard),
        box-shadow var(--tr-base) var(--ease-standard),
        transform var(--tr-base) var(--ease-standard),
        opacity var(--tr-fast) ease,
        filter var(--tr-base) var(--ease-standard);

    /* v15 additions — spring physics + ring system + surface aliases */
    --pro-accent-light: #A78BFA;
    --surface-bg:       #FCFDFE;
    --surface-card:     #FFFFFF;
    --surface-hover:    #F8FAFC;
    --ring-subtle:      0 0 0 1px rgba(15,23,42,0.04);
    --ring-accent:      0 0 0 1px rgba(124,58,237,0.15);
    --shadow-float:     var(--ring-subtle), 0 4px 12px -4px rgba(15,23,42,0.03), 0 16px 32px -8px rgba(15,23,42,0.05);
    --shadow-hover:     var(--ring-accent), 0 8px 24px -4px rgba(124,58,237,0.12), 0 24px 48px -12px rgba(124,58,237,0.15);
    --shadow-primary:   0 0 0 1px var(--pro-accent-2), 0 2px 4px rgba(255,255,255,0.15) inset, 0 8px 16px -4px rgba(109,40,217,0.35);
    --spring-fast:      0.4s cubic-bezier(0.16,1,0.3,1);
    --spring-bouncy:    0.5s cubic-bezier(0.34,1.56,0.64,1);
}


/* ───────────────────────────────────────────────────────────────────────
   §2  GLOBAL RESET & BASE
   ─────────────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }

html,body {
    font-family:var(--main-font); font-size:14px; line-height:1.6;
    color:var(--text-body);
    background:var(--sig-app-bg) !important; background-attachment:fixed !important;
    text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden; min-height:100vh; width:100%; position:relative; margin:0; padding:0;
}
/* Ambient glow orbs — cosmetic only */
body::before {
    content:""; position:fixed; top:92px; left:-90px; width:280px; height:280px;
    border-radius:999px; pointer-events:none; z-index:0; filter:blur(18px); opacity:0.7;
    background:radial-gradient(circle,rgba(139,92,246,0.10) 0%,rgba(139,92,246,0) 72%);
    will-change:transform;
}
body::after {
    content:""; position:fixed; top:220px; right:-110px; width:320px; height:320px;
    border-radius:999px; pointer-events:none; z-index:0; filter:blur(18px); opacity:0.7;
    background:radial-gradient(circle,rgba(59,130,246,0.08) 0%,rgba(59,130,246,0) 74%);
    will-change:transform;
}
body.initial-load { cursor:url("images/icons/cross.png"),crosshair,auto !important; user-select:none; }

a       { font-family:inherit; color:var(--accent-blue); text-decoration:underline; }
a:hover { color:var(--accent-700); text-decoration:none; cursor:pointer; }
textarea,input,select { font-family:inherit; font-size:inherit; }

::selection,::-moz-selection { background:rgba(139,92,246,0.3); color:var(--text-strong); }
input:focus,textarea:focus,select:focus {
    outline:none !important;
    box-shadow:0 0 0 3px rgba(139,92,246,0.2) !important;
    border-color:var(--pro-accent-1) !important;
}
::-webkit-scrollbar       { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb {
    background:rgba(100,116,139,0.20); border-radius:10px;
    border:3px solid transparent; background-clip:padding-box;
    transition:background var(--spring-fast);
}
::-webkit-scrollbar-thumb:hover {
    background:rgba(124,58,237,0.40);
    border:3px solid transparent; background-clip:padding-box;
}


/* ───────────────────────────────────────────────────────────────────────
   §3  KEYFRAME ANIMATIONS
   ─────────────────────────────────────────────────────────────────────── */
@keyframes fadeInUniform     { from{opacity:0;transform:translateY(8px)}  to{opacity:1;transform:translateY(0)} }
@keyframes slideUpFade       { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes ultraBentoSlideUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes cinematicFadeIn   { from{opacity:0;transform:scale(1.02);filter:blur(8px)} to{opacity:1;transform:scale(1);filter:blur(0)} }
@keyframes liquidAurora      { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes meshDrift         { 0%,100%{background-position:0% 0%} 50%{background-position:100% 100%} }
@keyframes pulseGlow         { 0%,100%{opacity:0.5;transform:scale(0.95)} 50%{opacity:0.8;transform:scale(1.02)} }
@keyframes fadeInHelp        { from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:translateY(0)} }
@keyframes shimmerDir        { 0%{background-position:-1000px 0} 100%{background-position:1000px 0} }
@keyframes badgePulseAlert   { 0%{box-shadow:0 0 0 0 rgba(239,68,68,0.5)} 70%{box-shadow:0 0 0 6px rgba(239,68,68,0)} 100%{box-shadow:0 0 0 0 rgba(239,68,68,0)} }
@keyframes pulse-yellow      { 0%{box-shadow:0 0 0 0 rgba(245,158,11,0.4)} 70%{box-shadow:0 0 0 6px rgba(245,158,11,0)}  100%{box-shadow:0 0 0 0 rgba(245,158,11,0)} }
@keyframes pulse-red         { 0%{box-shadow:0 0 0 0 rgba(239,68,68,0.5)}  70%{box-shadow:0 0 0 8px rgba(239,68,68,0)}  100%{box-shadow:0 0 0 0 rgba(239,68,68,0)} }
@keyframes pulse-yellow-lg   { 0%{box-shadow:0 0 0 0 rgba(245,158,11,0.3)} 70%{box-shadow:0 0 0 10px rgba(245,158,11,0)} 100%{box-shadow:0 0 0 0 rgba(245,158,11,0)} }
@keyframes pulse-red-lg      { 0%{box-shadow:0 0 0 0 rgba(239,68,68,0.4)}  50%{box-shadow:0 0 0 12px rgba(239,68,68,0)}  100%{box-shadow:0 0 0 0 rgba(239,68,68,0)} }


/* ───────────────────────────────────────────────────────────────────────
   §4  UTILITY CLASSES
   ─────────────────────────────────────────────────────────────────────── */
.ui-disabled     { opacity:0.4 !important; pointer-events:none !important; filter:grayscale(100%) !important; cursor:not-allowed !important; }
.fade-in-uniform { animation:fadeInUniform 0.3s cubic-bezier(0.2,0.8,0.2,1) forwards !important; }
.ui-icon    { width:auto !important; height:16px !important; max-width:16px !important; object-fit:contain; vertical-align:middle; display:inline-block; }
.ui-icon-lg { width:auto !important; height:24px !important; max-width:24px !important; object-fit:contain; vertical-align:middle; display:inline-block; }
.mobile-hide-text { display:inline; }
.desktop-divider  { width:1px; height:24px; background:#CBD5E1; margin:0 6px; border-radius:2px; }
.mobile-action-bar { display:none; }
.is-dragging    { user-select:none !important; cursor:grabbing !important; }
.sortable-ghost { opacity:0.4; background-color:#F0F0F0 !important; border:2px dashed #CCC !important; }
.sortable-item  { touch-action:pan-y; }
.left-menu      { display:none !important; }


/* ───────────────────────────────────────────────────────────────────────
   §5  APP LAYOUT SHELLS
   ─────────────────────────────────────────────────────────────────────── */
#main_body,#content_list,#input_container,#company_list_container { position:relative; z-index:1; }
#company_slider, #company_slider_wrapper { z-index:2147483647 !important; }
#main_body           { margin:0 !important; width:100% !important; padding:22px !important; }
#start_menu_extended { transition:all 0.2s cubic-bezier(0.2,0.8,0.2,1); opacity:0; margin-top:-100px; }

#top_container_fixed {
    position:fixed; left:50%; top:20px; transform:translateX(-50%);
    display:flex; gap:15px; z-index:1000; padding:10px 20px; border-radius:var(--radius-lg);
    background:rgba(255,255,255,0.86); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    box-shadow:var(--shadow-sm); border:1px solid rgba(226,232,240,0.92);
}
#bottom_container_fixed {
    position:fixed !important; bottom:40px !important; left:50% !important; transform:translateX(-50%) !important;
    background:rgba(255,255,255,0.97) !important; box-shadow:var(--shadow-lg) !important;
    border-radius:var(--radius-pill) !important; padding:10px 25px !important;
    z-index:9999999 !important; display:none !important;
    min-width:550px; height:75px; align-items:center; justify-content:center; border:1px solid #E2E8F0;
}
#content_list,#company_list_container {
    display:flex !important; flex-wrap:wrap !important; gap:22px !important;
    transition:margin-left 0.2s ease; padding-top:0 !important; width:100% !important;
    margin:18px 0 0 0 !important; justify-content:center !important; text-align:center !important;
}
#content_list { opacity:0; }
#company_list_container > div.div_box_1 { margin-left:0 !important; width:100% !important; max-width:380px !important; }
body.view-companies #content_list   { display:none !important; }
body.view-companies #input_container { position:relative !important; z-index:2000005 !important; }
.frosted-command-center { background:rgba(255,255,255,0.85) !important; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(0,0,0,0.05) !important; }


/* ───────────────────────────────────────────────────────────────────────
   §6  SURFACE PANELS & CARD CONTAINERS
   ─────────────────────────────────────────────────────────────────────── */
.div_box_1,.div_box_2,.div_window {
    padding:20px; font-size:10.5pt;
    background:linear-gradient(180deg,#FFFFFF 0%,#FCFDFE 100%) !important;
    border:1px solid var(--pro-line-1) !important; border-radius:var(--radius-lg);
    box-shadow:0 14px 36px rgba(15,23,42,0.055),inset 0 1px 0 rgba(255,255,255,0.98) !important;
    transition:transform var(--pro-tr-base) var(--pro-ease),box-shadow var(--pro-tr-base) var(--pro-ease),border-color var(--pro-tr-base) ease;
}
.div_box_1:hover,.div_box_2:hover,.div_window:hover {
    transform:var(--pro-hover-shift-card) !important; border-color:#D8B4FE !important;
    box-shadow:0 22px 46px rgba(15,23,42,0.08),0 8px 18px rgba(124,58,237,0.08),inset 0 1px 0 rgba(255,255,255,1) !important;
}
/* Note card (drag board) */
.note-card-base {
    flex-grow:1; width:100%; min-width:320px; max-width:480px; padding:22px; cursor:grab;
    display:flex; flex-direction:column; text-align:left; border-radius:16px;
    box-shadow:0 4px 12px rgba(15,23,42,0.04); position:relative; border:1px solid #E2E8F0;
    transition:transform 0.2s ease,box-shadow 0.2s ease;
}
.note-card-base:hover { transform:translateY(-4px); box-shadow:0 14px 28px rgba(15,23,42,0.08); border-color:#CBD5E1; z-index:10; }
/* Generic chip */
.entity-tag { font-size:8.5pt; font-weight:600; padding:5px 12px; border-radius:20px; display:inline-flex; align-items:center; gap:5px; transition:transform 0.15s; box-shadow:0 2px 4px rgba(15,23,42,0.04); border:1px solid transparent; }
/* Masonry grid */
.masonry-grid { display:grid; gap:20px; width:100%; align-items:start; grid-template-columns:repeat(4,1fr); }
/* Manila folder engine */
.folder-wrapper { position:relative; flex-grow:1; width:100%; display:flex; flex-direction:column; margin-top:25px; transition:transform 0.2s cubic-bezier(0.2,0.8,0.2,1); cursor:grab; text-align:left; }
.folder-wrapper:hover  { transform:translateY(-5px); z-index:20; }
.folder-wrapper:active { cursor:grabbing; }
.folder-tab {
    align-self:flex-end; display:flex; align-items:center; gap:12px; padding:6px 16px;
    border-radius:12px 12px 0 0; border:1.5px solid var(--folder-border); border-bottom:none;
    background-color:var(--folder-bg); position:relative; z-index:2; margin-bottom:-1.5px;
}
.folder-tab::after { content:''; position:absolute; bottom:-2px; left:0; right:0; height:4px; background-color:var(--folder-bg); z-index:3; }
.folder-body {
    border:1.5px solid var(--folder-border); border-radius:14px 0 14px 14px;
    background-color:var(--folder-bg); padding:22px; position:relative; z-index:1;
    display:flex; flex-direction:column; box-shadow:0 4px 12px rgba(15,23,42,0.03);
    transition:box-shadow 0.2s ease; height:max-content;
}
.folder-wrapper:hover .folder-body { box-shadow:0 15px 35px rgba(15,23,42,0.08); }
.folder-badge {
    position:absolute; top:-12px; left:15px; z-index:5; padding:4px 12px; border-radius:20px;
    font-size:7.5pt; font-weight:800; text-transform:uppercase; letter-spacing:0.5px;
    display:inline-flex; align-items:center; gap:5px; box-shadow:0 4px 10px rgba(0,0,0,0.06); backdrop-filter:blur(4px);
}


/* ───────────────────────────────────────────────────────────────────────
   §7  CONTROL FAMILY
   Every button, pill, toggle and select lives here — one source of truth.
   ─────────────────────────────────────────────────────────────────────── */

/* Strip link chrome from every control used as <a> */
a.filter-pill,a.div_button,a.inbox-tab-ultra,a.dropdown-item,a.card-header-btn,
a.hover-btn,a.sim-btn,a.mark-complete-btn,a.restore-active-btn,a.sleek-clear-btn,
a.btn-purple-pro,a.quick-add-pill,a.f-tab,
a.filter-pill:visited,a.div_button:visited,a.inbox-tab-ultra:visited,
a.dropdown-item:visited,a.card-header-btn:visited,a.hover-btn:visited,
a.sim-btn:visited,a.mark-complete-btn:visited,a.restore-active-btn:visited,
a.sleek-clear-btn:visited,a.btn-purple-pro:visited,a.quick-add-pill:visited,
a.f-tab:visited { text-decoration:none !important; }

/* Shared layout + motion base */
.filter-pill,.blue-pill-select,.inbox-tab-ultra,.div_button,.card-header-btn,.hover-btn,
.edit-record-btn,.sim-btn,.sleek-clear-btn,.mark-complete-btn,.restore-active-btn,
.sleek-toggle,.format-action-btn,.focus-tier-btn,.cal-status-btn,.save-action-btn,
.btn-purple-pro,.quick-add-pill,.unlink-btn,.dropdown-item,.relation-pill {
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    white-space:nowrap; vertical-align:middle; text-align:center; line-height:1;
    font-family:var(--main-font); font-weight:800; letter-spacing:0.18px;
    border-width:1px !important; text-decoration:none !important;
    position:relative; isolation:isolate;
    transition:
        transform var(--pro-tr-base) var(--pro-ease),
        box-shadow var(--pro-tr-base) var(--pro-ease),
        border-color var(--pro-tr-base) ease,
        background var(--pro-tr-base) ease,
        background-color var(--pro-tr-base) ease,
        color var(--pro-tr-base) ease,
        opacity var(--pro-tr-fast) ease !important;
}
/* Content must sit above ::after sheen */
.div_button > *,
.filter-pill > *,
.inbox-tab-ultra > * { position:relative; z-index:1; }

/* Legacy glass button aliases — same visual as .div_button */
.btn_box,.div_menu {
    min-width:110px; display:inline-flex; align-items:center; justify-content:center;
    gap:10px; padding:10px 22px; font-size:10pt; font-weight:800; color:#334155;
    letter-spacing:0.3px; border-radius:100px; cursor:pointer; text-decoration:none;
    position:relative; overflow:hidden; transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
    background:rgba(255,255,255,0.7); border:1px solid rgba(226,232,240,0.9);
    backdrop-filter:blur(16px) saturate(180%); -webkit-backdrop-filter:blur(16px) saturate(180%);
    box-shadow:0 4px 12px rgba(124,58,237,0.03),inset 0 2px 4px rgba(255,255,255,1),inset 0 -2px 4px rgba(241,245,249,0.5);
}
.btn_box:hover,.div_menu:hover {
    background:#FFFFFF; color:#4C1D95; border-color:#D8B4FE; transform:translateY(-3px) scale(1.02);
    box-shadow:0 12px 28px -6px rgba(124,58,237,0.25),0 4px 12px -2px rgba(15,23,42,0.04),inset 0 2px 4px rgba(255,255,255,1);
}
.btn_box:active,.div_menu:active { transform:translateY(1px) scale(0.98); background:#FAF5FF; box-shadow:0 2px 4px rgba(124,58,237,0.06),inset 0 2px 6px rgba(124,58,237,0.08); }
.btn_box::after,.div_menu::after,.div_button::after {
    content:''; position:absolute; top:0; left:-100%; width:50%; height:100%;
    z-index:0; opacity:0.66;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.9),transparent);
    transform:skewX(-20deg); transition:0s;
}
.btn_box:hover::after,.div_menu:hover::after,.div_button:hover::after { left:200%; transition:0.7s cubic-bezier(0.16,1,0.3,1); }
.btn_box img,.btn_box svg,.div_menu img,.div_menu svg { transition:all 0.4s cubic-bezier(0.16,1,0.3,1); opacity:0.7; transform:scale(1); max-height:18px; }
.btn_box:hover img,.btn_box:hover svg,.div_menu:hover img,.div_menu:hover svg { opacity:1; transform:scale(1.15); }

/* Sheen sweep — killed on filter-pill / inbox-tab-ultra / btn-purple-pro */
.div_button::before,.card-header-btn::before,.hover-btn::before,.sim-btn::before,
.sleek-clear-btn::before,.mark-complete-btn::before,.restore-active-btn::before,
.sleek-toggle::before,.format-action-btn::before,.focus-tier-btn::before,
.cal-status-btn::before,.save-action-btn::before,.quick-add-pill::before,.unlink-btn::before {
    content:""; position:absolute; inset:0; border-radius:inherit;
    background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,0) 24%,rgba(255,255,255,0.55) 39%,rgba(255,255,255,0.08) 52%,transparent 68%);
    transform:translateX(-135%); opacity:0.65; pointer-events:none;
    transition:transform 0.85s cubic-bezier(0.16,1,0.3,1),opacity 0.32s ease;
}
.div_button:hover::before,.card-header-btn:hover::before,.hover-btn:hover::before,
.sim-btn:hover::before,.sleek-clear-btn:hover::before,.mark-complete-btn:hover::before,
.restore-active-btn:hover::before,.sleek-toggle:hover::before,.format-action-btn:hover::before,
.focus-tier-btn:hover::before,.cal-status-btn:hover::before,.save-action-btn:hover::before,
.quick-add-pill:hover::before,.unlink-btn:hover::before { transform:translateX(135%); opacity:0.9; }
.filter-pill::before,.inbox-tab-ultra::before,.btn-purple-pro::before,
.btn-purple-pro:hover::before,.btn-purple-pro:active::before { display:none !important; animation:none !important; }

/* Active-state sheen — white shimmer visible on primary pills */
.filter-active-blue::before,.filter-pill.active::before,.filter-pill.active-view::before,
.active-tab-ultra::before,.f-tab.active::before {
    opacity:1;
    background:linear-gradient(135deg,rgba(255,255,255,0.18),rgba(255,255,255,0.04) 50%,rgba(255,255,255,0) 72%);
}

/* Icon behaviour */
.filter-pill img,.filter-pill svg,.blue-pill-select img,.blue-pill-select svg,
.inbox-tab-ultra img,.inbox-tab-ultra svg,.div_button img,.div_button svg,
.card-header-btn img,.card-header-btn svg,.hover-btn img,.hover-btn svg,
.edit-record-btn img,.edit-record-btn svg,.sim-btn img,.sim-btn svg,
.sleek-clear-btn img,.sleek-clear-btn svg,.mark-complete-btn img,.mark-complete-btn svg,
.restore-active-btn img,.restore-active-btn svg,.sleek-toggle img,.sleek-toggle svg,
.format-action-btn img,.format-action-btn svg,.focus-tier-btn img,.focus-tier-btn svg,
.cal-status-btn img,.cal-status-btn svg,.save-action-btn img,.save-action-btn svg,
.btn-purple-pro img,.btn-purple-pro svg,.quick-add-pill img,.quick-add-pill svg,
.unlink-btn img,.unlink-btn svg,.dropdown-item img,.dropdown-item svg,
.relation-pill img,.relation-pill svg {
    opacity:0.82; transform:scale(1);
    transition:opacity var(--pro-tr-fast) ease,transform var(--pro-tr-base) var(--pro-ease),filter var(--pro-tr-base) var(--pro-ease) !important;
}
.filter-pill:hover img,.filter-pill:hover svg,.blue-pill-select:hover img,
.inbox-tab-ultra:hover img,.inbox-tab-ultra:hover svg,.div_button:hover img,.div_button:hover svg,
.card-header-btn:hover img,.hover-btn:hover img,.edit-record-btn:hover img,
.sim-btn:hover img,.sleek-clear-btn:hover img,.mark-complete-btn:hover img,
.restore-active-btn:hover img,.dropdown-item:hover img,.dropdown-item:hover svg {
    transform:translate(1px,-1px) scale(1.03) !important; opacity:1;
}

/* Default (neutral white) controls */
.filter-pill,.blue-pill-select,.inbox-tab-ultra,.div_button,.card-header-btn,.hover-btn,
.edit-record-btn,.sim-btn,.sleek-clear-btn,.restore-active-btn,.sleek-toggle,
.format-action-btn,.focus-tier-btn,.quick-add-pill,.unlink-btn,.relation-pill {
    background:var(--pro-control-bg) !important;
    border-color:rgba(226,232,240,0.74) !important;
    box-shadow:0 8px 18px rgba(15,23,42,0.04),inset 0 1px 0 rgba(255,255,255,0.98) !important;
}
.filter-pill:hover,.blue-pill-select:hover,.inbox-tab-ultra:hover,.div_button:hover,
.card-header-btn:hover,.hover-btn:hover,.edit-record-btn:hover,.sim-btn:hover,
.sleek-clear-btn:hover,.restore-active-btn:hover,.sleek-toggle:hover:not(.active-toggle),
.format-action-btn:hover,.focus-tier-btn:hover:not(.active-toggle),.quick-add-pill:hover,
.unlink-btn:hover,.relation-pill:hover {
    background:var(--pro-control-bg-hover) !important;
    border-color:rgba(196,181,253,0.54) !important;
    transform:var(--pro-hover-shift) !important;
    box-shadow:0 14px 26px rgba(15,23,42,0.05),0 6px 14px rgba(124,58,237,0.06),inset 0 1px 0 rgba(255,255,255,1) !important;
}
.filter-pill:active,.inbox-tab-ultra:active,.div_button:active,.card-header-btn:active,
.hover-btn:active,.edit-record-btn:active,.sim-btn:active,.sleek-clear-btn:active,
.mark-complete-btn:active,.restore-active-btn:active,.sleek-toggle:active,.format-action-btn:active,
.focus-tier-btn:active,.cal-status-btn:active,.save-action-btn:active,.btn-purple-pro:active,
.quick-add-pill:active,.unlink-btn:active,.dropdown-item:active,.relation-pill:active,
.f-tab:active { transform:var(--hover-shift-press) !important; }

/* Size tiers */
.filter-pill,.inbox-tab-ultra,.div_button,.save-action-btn,.btn-purple-pro,.edit-record-btn {
    min-height:42px !important; padding:9px 18px !important; font-size:9.6pt !important; line-height:1.15 !important;
}
.filter-pill,.blue-pill-select,.inbox-tab-ultra,.div_button { color:var(--text-body) !important; border-radius:100px !important; }
.card-header-btn,.hover-btn,.sleek-clear-btn,.sleek-toggle,.format-action-btn,
.focus-tier-btn,.quick-add-pill,.mark-complete-btn,.restore-active-btn,.cal-status-btn,.sim-btn,.unlink-btn {
    min-height:38px !important; padding:8px 14px !important; border-radius:14px !important; font-size:8.8pt !important; font-weight:800 !important;
}
.sleek-toggle,.focus-tier-btn,.quick-add-pill,.unlink-btn,.format-action-btn { border-radius:999px !important; }

/* PRIMARY / active state */
#submit_btn_container.div_button,.save-action-btn,.btn-purple-pro,
.filter-active-blue,.filter-pill.active,.filter-pill.active-view,
.active-tab-ultra,.f-tab.active,.sleek-toggle.active-toggle,.focus-tier-btn.active-toggle,
.filter-pill[style*="background:#0F62FE"],.filter-pill[style*="background: #0F62FE"] {
    background:var(--pro-primary-bg) !important; color:#FFFFFF !important;
    animation:none !important; border-color:rgba(91,33,182,0.20) !important; text-shadow:none !important;
    box-shadow:0 14px 24px rgba(91,33,182,0.18),0 6px 14px rgba(79,70,229,0.12),inset 0 1px 0 rgba(255,255,255,0.20) !important;
}
#submit_btn_container.div_button:hover,.save-action-btn:hover,.btn-purple-pro:hover,
.filter-active-blue:hover,.filter-pill.active:hover,.filter-pill.active-view:hover,
.active-tab-ultra:hover,.f-tab.active:hover,.sleek-toggle.active-toggle:hover,.focus-tier-btn.active-toggle:hover {
    transform:var(--pro-hover-shift) !important;
    box-shadow:0 16px 28px rgba(109,40,217,0.22),0 6px 14px rgba(79,70,229,0.14),inset 0 1px 0 rgba(255,255,255,0.20) !important;
}
/* Active icon inversion */
.filter-active-blue .ui-icon,.filter-pill.active img,.filter-pill.active-view img,
.filter-pill[style*="background:#0F62FE"] img,.active-tab-ultra img,.f-tab.active img {
    filter:brightness(0) invert(1) !important; opacity:1 !important;
}
.filter-active-blue option { background-color:#FFFFFF !important; color:#333 !important; font-weight:normal !important; }
.filter-pill img,.filter-pill svg { max-height:16px !important; opacity:0.78; }
.filter-pill .ui-icon { height:14px !important; opacity:0.6; transition:0.3s; }
.filter-pill:hover .ui-icon { opacity:0.9; }

/* btn-purple-pro overrides */
.btn-purple-pro { text-transform:none !important; letter-spacing:0.16px !important; }
.btn-purple-pro img,.btn-purple-pro svg,.btn-purple-pro .ui-icon { filter:brightness(0) invert(1) !important; opacity:0.98 !important; }
.btn-purple-pro *,.btn-purple-pro:hover *,.btn-purple-pro:visited * { color:#FFFFFF !important; }
#submit_btn_container.save-action-btn { min-width:200px !important; font-size:10.25pt !important; }

/* Create New (Indigo) */
.btn-create-new {
    background:linear-gradient(135deg,#6366F1,#4338CA) !important;
    color:#FFFFFF !important; border:none !important; font-weight:800 !important;
    border-radius:100px !important; display:inline-flex !important; align-items:center !important; gap:10px !important;
    box-shadow:inset 0 2px 4px rgba(255,255,255,0.2),0 4px 12px rgba(99,102,241,0.25) !important;
}
.btn-create-new:hover {
    background:linear-gradient(135deg,#4F46E5,#3730A3) !important;
    transform:translateY(-3px) scale(1.02) !important;
    box-shadow:inset 0 2px 4px rgba(255,255,255,0.25),0 12px 24px rgba(99,102,241,0.35) !important;
}
.btn-create-new img { filter:brightness(0) invert(1) !important; opacity:1 !important; }

/* Colour-coded semantic groups */
/* Green / success */
.mark-complete-btn,.sim-btn-link {
    background:linear-gradient(180deg,rgba(240,253,244,0.98),rgba(220,252,231,0.92)) !important;
    color:#166534 !important; border-color:rgba(134,239,172,0.92) !important;
    box-shadow:0 8px 18px rgba(15,23,42,0.04),inset 0 1px 0 rgba(255,255,255,0.98) !important;
}
.mark-complete-btn:hover,.sim-btn-link:hover {
    background:linear-gradient(180deg,#FFFFFF,rgba(220,252,231,0.98)) !important;
    box-shadow:0 18px 32px rgba(21,128,61,0.16),inset 0 1px 0 rgba(255,255,255,0.96) !important;
    transform:var(--pro-hover-shift) !important;
}
/* Amber / warning */
.sim-btn-merge,.cal-status-btn.warn {
    background:linear-gradient(180deg,rgba(255,251,235,0.98),rgba(254,243,199,0.92)) !important;
    color:#B45309 !important; border-color:rgba(252,211,77,0.94) !important;
}
.sim-btn-merge:hover,.cal-status-btn.warn:hover {
    background:linear-gradient(180deg,#FFFFFF,rgba(254,243,199,0.98)) !important;
    box-shadow:0 18px 32px rgba(180,83,9,0.15),inset 0 1px 0 rgba(255,255,255,0.96) !important;
}
/* Red / danger */
.sleek-clear-btn {
    background:#FEF2F2 !important; color:var(--danger-text) !important;
    border-color:var(--danger-border) !important;
    box-shadow:0 8px 18px rgba(15,23,42,0.04),inset 0 1px 0 rgba(255,255,255,0.98) !important;
}
.sleek-clear-btn:hover {
    background:#FEE2E2 !important; color:#991B1B !important; border-color:#F87171 !important;
    transform:var(--pro-hover-shift) !important; box-shadow:var(--ux-shadow-danger) !important;
}
.unlink-btn,.sim-btn-ignore {
    background:linear-gradient(180deg,rgba(254,242,242,0.98),rgba(254,226,226,0.94)) !important;
    color:#B91C1C !important; border-color:rgba(252,165,165,0.95) !important;
    border-radius:var(--radius-pill) !important;
}
.unlink-btn:hover,.sim-btn-ignore:hover {
    background:linear-gradient(180deg,#FFFFFF,#FEE2E2) !important; border-color:#FCA5A5 !important;
    transform:var(--pro-hover-shift) !important; box-shadow:var(--ux-shadow-danger) !important;
}
.restore-active-btn,.sim-btn-ignore { border-color:#CBD5E1 !important; }
.restore-active-btn:hover {
    background:#64748B !important; color:#FFF !important; border-color:#475569 !important;
    transform:var(--pro-hover-shift) !important;
}
/* Blue */
.card-header-btn,.sim-btn-link {
    background:linear-gradient(180deg,#FFFFFF,#EFF6FF) !important;
    color:var(--accent-blue) !important; border-color:#BFDBFE !important;
}
.card-header-btn:hover,.sim-btn-link:hover {
    background:linear-gradient(180deg,#FFFFFF,#DBEAFE) !important; color:#0B57D0 !important;
    transform:var(--pro-hover-shift) !important;
    box-shadow:0 16px 28px rgba(15,98,254,0.15),inset 0 1px 0 rgba(255,255,255,0.24) !important;
}
.sim-btn-ignore { background:#F8FAFC !important; color:#475569; border-color:#CBD5E1 !important; }
.sim-btn-ignore:hover { background:#E2E8F0 !important; transform:var(--pro-hover-shift) !important; }
/* Quick-add dashed pill */
.quick-add-pill {
    background:linear-gradient(180deg,#FFFFFF,#FAF5FF) !important;
    border-color:rgba(196,181,253,0.65) !important; border-style:dashed !important; color:#6D28D9 !important;
}
.quick-add-pill:hover {
    background:linear-gradient(180deg,#FFFFFF,#F3E8FF) !important;
    color:#4C1D95 !important; border-color:rgba(167,139,250,0.80) !important;
}
/* Cal status */
.cal-status-btn.div_button { min-height:44px; padding:10px 18px !important; border-radius:14px !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }

/* Focus ring */
.filter-pill:focus-visible,.inbox-tab-ultra:focus-visible,.div_button:focus-visible,
.card-header-btn:focus-visible,.hover-btn:focus-visible,.sim-btn:focus-visible,
.sleek-toggle:focus-visible,.format-action-btn:focus-visible,
.quick-add-pill:focus-visible,.unlink-btn:focus-visible,.sleek-select:focus-visible {
    outline:none !important;
    box-shadow:0 0 0 4px rgba(139,92,246,0.16),var(--sig-control-shadow-hover) !important;
}

/* Select overrides */
select.blue-pill-select,select.filter-pill,.sleek-select {
    appearance:none !important; -webkit-appearance:none !important;
    color:var(--text-body) !important; border-radius:100px !important;
    font-size:9pt !important; font-weight:800 !important; padding:8px 28px 8px 14px !important;
    cursor:pointer !important; max-width:180px !important; text-overflow:ellipsis !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important; background-position:right 10px center !important;
    border-color:rgba(226,232,240,0.74) !important;
    background-color:var(--pro-control-bg) !important;
    box-shadow:0 8px 18px rgba(15,23,42,0.04),inset 0 1px 0 rgba(255,255,255,0.98) !important;
    transition:var(--ux-tr) !important;
}
select.blue-pill-select:hover,select.filter-pill:hover,.sleek-select:hover {
    background-color:#F8FAFC !important; border-color:rgba(196,181,253,0.54) !important;
    box-shadow:0 12px 22px rgba(124,58,237,0.08),inset 0 1px 0 rgba(255,255,255,0.24) !important;
}
select.blue-pill-select:focus,select.filter-pill:focus,.sleek-select:focus {
    background-color:#FFFFFF !important; border-color:rgba(139,92,246,0.55) !important;
    box-shadow:0 0 0 3px rgba(139,92,246,0.15),0 12px 22px rgba(124,58,237,0.08) !important;
}
.inpTA,select.filter-pill,.sleek-select { border-radius:16px !important; color:var(--text-strong) !important; }
.inpTA:hover,select.filter-pill:hover,.sleek-select:hover { border-color:rgba(192,132,252,0.62) !important; }
.inpTA:focus,select.filter-pill:focus,.sleek-select:focus {
    border-color:#A78BFA !important;
    box-shadow:0 0 0 4px rgba(139,92,246,0.14),0 18px 38px rgba(124,58,237,0.08),inset 0 1px 0 rgba(255,255,255,1) !important;
    background:linear-gradient(180deg,#FFFFFF,#FCFAFF) !important;
}

/* Blue pill wrapper container */
.blue-pill-container {
    flex-shrink:0 !important; white-space:nowrap !important; display:inline-flex; align-items:center;
    background:#FFFFFF; border:1px solid #E2E8F0; padding:4px 4px 4px 14px; border-radius:30px;
    box-shadow:0 2px 6px rgba(15,23,42,0.02); gap:8px; transition:all 0.25s cubic-bezier(0.2,0.8,0.2,1);
}
.blue-pill-container:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(15,23,42,0.06); border-color:#CBD5E1; }
.blue-pill-label { font-size:8pt; font-weight:800; color:#64748B; text-transform:uppercase; letter-spacing:0.5px; }
.filter-group    { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
div:has(> .blue-pill-container) { flex-wrap:nowrap !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; scrollbar-width:none !important; justify-content:flex-start !important; }
div:has(> .blue-pill-container)::-webkit-scrollbar { display:none !important; }

/* Toolbar buttons */
.toolbar-btn { background:#FFF; border:1px solid #DDD; height:32px; border-radius:6px; padding:4px 6px; font-size:8.5pt; font-weight:600; color:#444; cursor:pointer; transition:background 0.2s,border-color 0.2s; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; flex-shrink:0; }
.toolbar-btn:hover { background:#F5F5F5; }
.toolbar-btn img,.toolbar-btn img,.filter-pill img { max-height:18px !important; }

/* Mode switch (editor toolbar) */
.mode-switch { display:flex; background:#F1F5F9; padding:2px; border-radius:8px; border:1px solid #E2E8F0; height:30px; }
.mode-label  { padding:2px 10px; border-radius:6px; cursor:pointer; font-size:7.5pt; font-weight:700; color:#64748B; transition:0.2s; display:flex; align-items:center; height:100%; }
.mode-switch input { display:none; }
.mode-switch input:checked + .mode-label { background:#FFF; color:#0F62FE; box-shadow:0 2px 4px rgba(0,0,0,0.05); }


/* ───────────────────────────────────────────────────────────────────────
   §8  DROPDOWN MENUS
   ─────────────────────────────────────────────────────────────────────── */
.premium-dropdown-wrapper { position:relative; display:inline-flex; align-items:center; }
.premium-dropdown-wrapper,.premium-dropdown-wrapper *,.premium-dropdown-menu,.premium-dropdown-menu * { pointer-events:auto !important; }
.premium-dropdown-menu {
    position:fixed; top:70px; right:12px; left:auto !important;
    background:#FFFFFF; min-width:260px; border-radius:16px;
    border:1px solid #E2E8F0; box-shadow:0 10px 40px rgba(15,23,42,0.12);
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateY(10px) scale(0.95);
    transition:opacity 0.25s cubic-bezier(0.2,0.8,0.2,1), transform 0.25s cubic-bezier(0.2,0.8,0.2,1), visibility 0.25s;
    z-index:2147483647 !important; padding:8px; transform-origin:top right;
}
.premium-dropdown-menu.is-open {
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateY(0) scale(1);
}
.dropdown-header  { font-size:7.5pt; font-weight:800; color:#94A3B8; text-transform:uppercase; letter-spacing:0.5px; padding:8px 12px 4px; margin-bottom:4px; }
.dropdown-divider { height:1px; background:#EAEAEA; margin:6px 0; }
.dropdown-badge   { background:#EF4444; color:#FFF; font-size:7.5pt; padding:2px 6px; border-radius:12px; font-weight:800; margin-left:auto; box-shadow:0 2px 4px rgba(239,68,68,0.3); }
.dropdown-item {
    display:flex; align-items:center; gap:10px; padding:9px 12px !important;
    font-size:9.5pt; font-weight:700 !important; color:#334155; border-radius:14px !important;
    cursor:pointer; border:1px solid transparent !important; min-height:38px;
    background:transparent !important;
    transition:background 0.32s cubic-bezier(0.16,1,0.3,1),border-color 0.32s cubic-bezier(0.16,1,0.3,1),
               box-shadow 0.32s cubic-bezier(0.16,1,0.3,1),transform 0.32s cubic-bezier(0.16,1,0.3,1),color 0.24s ease !important;
}
.dropdown-item:hover {
    color:#4C1D95 !important; background:linear-gradient(180deg,#FFFFFF,#F8F5FF) !important;
    border-color:rgba(216,180,254,0.52) !important; transform:var(--hover-shift-soft) !important;
    box-shadow:0 12px 22px rgba(124,58,237,0.08),inset 0 1px 0 rgba(255,255,255,0.24) !important;
    text-decoration:none !important;
}
.dropdown-item img { height:14px; opacity:0.6; transition:0.2s; }
.dropdown-item:hover img { opacity:1; filter:brightness(0) saturate(100%) invert(26%) sepia(87%) saturate(2250%) hue-rotate(213deg) brightness(101%) contrast(106%); }
.global-top-profile-link,.global-top-profile-link:hover { text-decoration:none !important; }


/* ───────────────────────────────────────────────────────────────────────
   §9  FILTER BAR, ISLAND TABS & F-TABS
   ─────────────────────────────────────────────────────────────────────── */
.filter-bar-wrapper { flex-wrap:nowrap !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; scrollbar-width:none !important; justify-content:flex-start !important; min-width:0; max-width:100%; }
.filter-bar-wrapper::-webkit-scrollbar { display:none !important; }
.filter-tray-container { position:relative; width:100%; max-height:0; opacity:0; overflow:hidden; transition:all 0.4s cubic-bezier(0.16,1,0.3,1); transform:translateY(-10px); transform-origin:top center; z-index:998; }
.filter-tray-container.tray-open { max-height:400px; opacity:1; transform:translateY(0); overflow:visible; padding:14px 4px 4px; margin-top:8px; border-top:1px solid #E2E8F0; }
.filter-wrapper { display:flex; gap:12px; align-items:center; width:100%; overflow-x:auto; scrollbar-width:none; padding:4px 0 8px; }
.filter-wrapper::-webkit-scrollbar { display:none; }

.sleek-control-group,.island-tabs {
    border:1px solid rgba(226,232,240,0.86) !important;
    background:linear-gradient(180deg,rgba(255,255,255,0.92),rgba(248,250,252,0.84)) !important;
    box-shadow:0 18px 42px rgba(15,23,42,0.05),inset 0 1px 0 rgba(255,255,255,0.92) !important;
}
.sleek-control-group { display:inline-flex; align-items:center; border-radius:var(--radius-pill); min-height:46px; padding:4px; flex-shrink:0; transition:0.2s; }
.sleek-control-group:hover { border-color:rgba(216,180,254,0.46) !important; box-shadow:0 14px 28px rgba(124,58,237,0.08),inset 0 1px 0 rgba(255,255,255,0.82) !important; }
.sleek-control-group > span { color:var(--text-soft) !important; font-size:7.85pt !important; font-weight:900 !important; letter-spacing:0.6px !important; }
.control-divider { width:1px; height:18px; background:#E2E8F0; margin:0 4px; }

.sleek-toggle { padding:6px 16px; font-size:9.5pt; font-weight:700; color:#64748B; cursor:pointer; transition:all 0.2s ease; border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; }
.sleek-toggle:hover:not(.active-toggle) { color:var(--accent-700); background:#EEF2FF; }
.sleek-toggle.active-toggle,.focus-tier-btn.active-toggle {
    background:linear-gradient(135deg,var(--pro-accent-2),var(--accent-indigo)) !important;
    color:#FFFFFF !important; border-color:transparent !important; box-shadow:0 10px 20px rgba(124,58,237,0.20) !important;
}
.floating-filter-btn {
    position:absolute; bottom:-7px; right:-7px; min-height:22px;
    background:linear-gradient(135deg,#6D28D9,#9333EA) !important; color:#FFFFFF;
    font-size:7pt; font-weight:900; padding:4px 9px; border-radius:var(--radius-pill);
    letter-spacing:0.46px; text-transform:uppercase; border:1px solid rgba(255,255,255,0.20);
    cursor:pointer; display:inline-flex; align-items:center; gap:4px;
    box-shadow:0 10px 20px rgba(124,58,237,0.28),inset 0 1px 0 rgba(255,255,255,0.26) !important;
    transition:all 0.3s cubic-bezier(0.16,1,0.3,1); z-index:100;
}
.floating-filter-btn:hover { transform:var(--pro-hover-shift) scale(1.04) !important; }

.island-tabs {
    display:flex; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    border-radius:var(--radius-pill); padding:6px; gap:4px;
    box-shadow:0 8px 32px rgba(15,23,42,0.05),inset 0 1px 2px rgba(255,255,255,1);
    margin:0 auto 25px; max-width:100%; justify-content:flex-start;
}
.island-tabs::-webkit-scrollbar { display:none; }
.inbox-tab-ultra { flex:0 0 auto; padding:8px 16px; border-radius:100px; cursor:pointer; font-weight:700; font-size:9pt; color:#64748B; background:transparent; border:1px solid transparent; transition:all 0.3s cubic-bezier(0.16,1,0.3,1); display:flex; align-items:center; gap:6px; white-space:nowrap; }
.inbox-tab-ultra:hover  { background:rgba(255,255,255,0.8); color:var(--text-strong); box-shadow:0 4px 12px rgba(0,0,0,0.04); transform:var(--pro-hover-shift); }
.inbox-tab-ultra:active { transform:translateY(1px) scale(0.96); }
.active-tab-ultra { background:var(--pro-primary-bg) !important; color:#FFFFFF !important; border:none !important; }
.active-tab-ultra .tab-badge-count { background:rgba(255,255,255,0.25) !important; color:#FFFFFF !important; box-shadow:inset 0 1px 2px rgba(255,255,255,0.4) !important; text-shadow:0 1px 2px rgba(0,0,0,0.2); }
.tab-badge-count { font-size:7.5pt; padding:2px 6px; border-radius:999px !important; margin-left:2px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; box-shadow:inset 0 1px 0 rgba(255,255,255,0.15); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.52); }
#tab_btn_approvals .tab-badge-count,#tab_btn_pastdue .tab-badge-count,#tab_btn_unread .tab-badge-count { animation:badgePulseAlert 2s infinite; }

/* Inbox tab variants */
.inbox-tab-premium { flex:1; min-width:120px; display:flex; align-items:center; justify-content:center; gap:10px; padding:10px 16px; border-radius:12px; cursor:pointer; font-weight:700; font-size:9.5pt; transition:all 0.25s cubic-bezier(0.2,0.8,0.2,1); white-space:nowrap; border:1px solid transparent; }
.inbox-tab-premium:hover { background:#FFF; border-color:#E2E8F0; transform:translateY(-2px); box-shadow:0 6px 12px rgba(15,23,42,0.06); color:#0F172A; }
.active-tab-premium { border:none !important; box-shadow:inset 0 2px 4px rgba(255,255,255,0.2),0 4px 12px rgba(15,98,254,0.25) !important; }

/* f-tabs (directory filter rail) */
.filter-tabs { display:inline-flex !important; align-items:center !important; flex-wrap:wrap !important; gap:8px !important; padding:7px !important; border-radius:22px !important; overflow-x:auto; background:linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%) !important; border:1px solid rgba(226,232,240,0.98) !important; box-shadow:0 12px 24px rgba(15,23,42,0.05),inset 0 1px 0 rgba(255,255,255,0.98) !important; scrollbar-width:none; }
.filter-tabs::-webkit-scrollbar { display:none; }
.f-tab,a.f-tab,a.f-tab:visited {
    position:relative !important; min-height:46px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    padding:10px 17px !important; border-radius:15px !important; border:1px solid transparent !important;
    background:linear-gradient(180deg,#FFFFFF 0%,#FBFBFE 100%) !important;
    color:#64748B !important; font-size:9pt !important; font-weight:850 !important;
    text-decoration:none !important; white-space:nowrap; cursor:pointer;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.78) !important;
    transition:transform 0.22s cubic-bezier(0.16,1,0.3,1),background 0.22s ease,color 0.22s ease,border-color 0.22s ease,box-shadow 0.22s ease;
}
.f-tab::before { content:"" !important; position:absolute !important; inset:0 !important; border-radius:inherit !important; background:linear-gradient(135deg,rgba(124,58,237,0.08),rgba(99,102,241,0.03)) !important; opacity:0 !important; transition:var(--ux-tr) !important; pointer-events:none; }
.f-tab:hover { color:#3F2A91 !important; border-color:rgba(216,180,254,0.56) !important; background:linear-gradient(180deg,#FFFFFF 0%,#FBF7FF 100%) !important; transform:var(--pro-hover-shift) !important; text-decoration:none !important; }
.f-tab:hover::before { opacity:1 !important; }
.f-tab.active,.f-tab.active:hover { color:#FFFFFF !important; border-color:rgba(255,255,255,0.14) !important; background:var(--pro-primary-bg) !important; box-shadow:0 20px 34px rgba(91,33,182,0.22),0 8px 18px rgba(79,70,229,0.16),inset 0 1px 0 rgba(255,255,255,0.24) !important; }
.f-tab.active::before { opacity:0.18 !important; background:linear-gradient(135deg,rgba(255,255,255,0.28),rgba(255,255,255,0)) !important; }


/* ───────────────────────────────────────────────────────────────────────
   §10  SEARCH INPUTS
   ─────────────────────────────────────────────────────────────────────── */
/* Shared base — both sleek-search and relation-search-box input share tokens */
.sleek-search,.relation-search-box input {
    border-color:var(--border-subtle);
    background:linear-gradient(180deg,rgba(255,255,255,0.98),rgba(248,250,252,0.96));
    box-shadow:0 1px 2px rgba(15,23,42,0.03),inset 0 1px 0 rgba(255,255,255,0.96);
}
.sleek-search:hover,.relation-search-box input:hover { border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.sleek-search:focus-within,.relation-search-box input:focus {
    border-color:var(--accent-500);
    box-shadow:0 0 0 4px rgba(139,92,246,0.10),0 10px 24px rgba(124,58,237,0.10);
}
.sleek-search input,.relation-search-box input { color:var(--text-strong); }
.sleek-search input::placeholder { color:#64748B; font-weight:500; transition:all 0.2s ease; }
.sleek-search:hover input::placeholder { color:#5B6B82; }
.sleek-search:focus-within input::placeholder { color:#8A7BB8; opacity:0.95; }

/* Sleek search full anatomy */
.sleek-search {
    position:relative; display:flex; align-items:center; overflow:hidden; cursor:text; isolation:isolate;
    border-radius:100px; min-height:42px; padding:0 14px; transition:all 0.22s ease;
}
.sleek-search::before {
    content:""; position:absolute; inset:0; border-radius:inherit; z-index:0; pointer-events:none; opacity:0.85;
    background:radial-gradient(circle at 0% 50%,rgba(99,102,241,0.055),transparent 32%),radial-gradient(circle at 100% 50%,rgba(168,85,247,0.05),transparent 34%);
}
.sleek-search::after {
    content:""; position:absolute; top:0; left:-170%; width:55%; height:100%; z-index:1; pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.8),transparent); transform:skewX(-20deg);
}
.sleek-search:focus-within::after { left:160%; transition:left 0.7s cubic-bezier(0.22,1,0.36,1); }
.sleek-search img { position:relative; z-index:2; height:14px; width:14px; margin-right:8px; flex-shrink:0; opacity:0.5; transition:all 0.2s ease; }
.sleek-search:hover img { opacity:0.72; transform:scale(1.03); }
.sleek-search:focus-within img { opacity:0.96; transform:scale(1.06); filter:brightness(0) saturate(100%) invert(43%) sepia(65%) saturate(1250%) hue-rotate(230deg) brightness(97%) contrast(98%); }
.sleek-search input { position:relative; z-index:2; font-size:10pt; width:100%; border:none; outline:none !important; background:transparent; padding:0; margin:0; font-weight:600; letter-spacing:0.01em; }
.sleek-search input:-webkit-autofill { -webkit-text-fill-color:var(--text-strong) !important; transition:background-color 9999s ease-in-out 0s; box-shadow:0 0 0 1000px transparent inset !important; }

/* Relation search */
.relation-search-box { position:relative; margin-bottom:20px; }
.relation-search-box input {
    width:100%; padding:14px 16px 14px 42px; border-radius:14px; border:1px solid #CBD5E1;
    outline:none; font-size:10.5pt; font-family:inherit; transition:0.2s;
}
.relation-search-box input::placeholder { color:var(--text-soft); }

/* Modern search box (forms context) */
.search-box-modern { position:relative; flex-grow:1; max-width:500px; }
.search-box-modern img { position:absolute; left:16px; top:50%; transform:translateY(-50%); height:16px; opacity:0.4; }
.search-box-modern input { width:100%; padding:12px 20px 12px 42px; border-radius:30px; border:1px solid #CBD5E1; font-size:10.5pt; font-family:inherit; outline:none; box-shadow:0 2px 6px rgba(0,0,0,0.02); transition:all 0.2s; font-weight:500; }
.search-box-modern input:focus { border-color:#0F62FE; box-shadow:0 0 0 3px rgba(15,98,254,0.15); }

/* Search dropdown */
.search-dropdown {
    position:absolute; top:100%; left:0; width:100%; background:#FFF;
    border:1px solid var(--border-subtle) !important; border-radius:18px !important;
    box-shadow:var(--ux-panel-shadow) !important; display:none; overflow:hidden !important;
    max-height:280px; margin-top:8px; z-index:1000;
}
.search-item {
    padding:14px 18px !important; border-bottom:1px solid rgba(241,245,249,0.96) !important;
    cursor:pointer; display:flex; align-items:center; gap:12px; font-size:10pt; font-weight:600; background:transparent;
    transition:background 0.32s cubic-bezier(0.16,1,0.3,1),transform 0.32s cubic-bezier(0.16,1,0.3,1),
               box-shadow 0.32s cubic-bezier(0.16,1,0.3,1),color 0.24s ease !important;
}
.search-item:hover { transform:translateX(5px) !important; background:linear-gradient(180deg,rgba(255,255,255,1),rgba(250,245,255,0.96)) !important; box-shadow:inset 5px 0 0 rgba(124,58,237,0.18),inset 0 1px 0 rgba(255,255,255,0.80) !important; }
.search-item:last-child { border-bottom:none !important; }
.search-item:active { transform:translate(1px,-1px) !important; }

/* Toolbar search */
.search-and-tag-wrapper { display:flex; align-items:center; gap:4px; flex-shrink:1; min-width:0; }
.toolbar-search-wrapper.search-box { width:120px; max-width:120px; flex-shrink:1; position:relative; }
.toolbar-search-wrapper input { padding:0 6px 0 20px; font-size:8pt; width:100%; border-radius:4px; }


/* ───────────────────────────────────────────────────────────────────────
   §11  BADGES & STATUS INDICATORS
   ─────────────────────────────────────────────────────────────────────── */
.alert-pill,.tab-badge-count,.rc-badge,.status-badge,.dm-user-badge {
    border-radius:999px !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.52); box-shadow:0 8px 18px rgba(15,23,42,0.07),inset 0 1px 0 rgba(255,255,255,0.82);
}
.alert-pill { font-size:7.5pt; font-weight:800; padding:4px 8px; display:flex; align-items:center; gap:4px; }
.status-indicator-wrap { position:absolute; left:0; top:0; bottom:0; width:4px; z-index:10; display:flex; align-items:center; }
.status-indicator { width:100%; height:100%; border-radius:0; transition:all 0.3s ease; opacity:0.85; }
.ultra-list-tile:hover .status-indicator { height:60px; border-radius:6px; opacity:1; }
.status-red      { background:linear-gradient(180deg,#EF4444,#B91C1C); box-shadow:0 0 10px rgba(239,68,68,0.4); }
.status-green    { background:linear-gradient(180deg,#10B981,#047857); }
.status-blue     { background:linear-gradient(180deg,#0F62FE,#002D9C); }
.status-gray     { background:linear-gradient(180deg,#94A3B8,#64748B); }
.status-yellow   { background:#F59E0B; }
.status-archived { background:repeating-linear-gradient(45deg,#F8FAFC,#F8FAFC 4px,#E2E8F0 4px,#E2E8F0 8px); border-right:1px solid #CBD5E1; }
.health-dot { position:absolute; top:20px; right:20px; width:10px; height:10px; border-radius:50%; box-shadow:0 0 0 4px rgba(255,255,255,0.8); z-index:5; }
.dossier-header .health-dot { top:30px; right:30px; width:14px; height:14px; box-shadow:0 0 0 4px rgba(255,255,255,0.2); }
.health-green  { background:#10B981; }
.health-yellow { animation:pulse-yellow    2s   infinite; background:#F59E0B; }
.health-red    { animation:pulse-red       1.5s infinite; background:#EF4444; }
.dossier-header .health-yellow { animation:pulse-yellow-lg 2s   infinite; }
.dossier-header .health-red    { animation:pulse-red-lg    1.5s infinite; }


/* ───────────────────────────────────────────────────────────────────────
   §12  INBOX ROWS & LIST TILES
   ─────────────────────────────────────────────────────────────────────── */
/* Classic flat inbox row */
.inbox-row { display:flex; align-items:flex-start; padding:16px 22px; border-bottom:1px solid #F1F5F9; cursor:pointer; background:#FFF; transition:all 0.2s ease; position:relative; opacity:0; animation:slideUpFade 0.4s cubic-bezier(0.2,0.8,0.2,1) forwards; }
.inbox-row:hover { background:#F8FAFC; transform:translateX(4px); box-shadow:-4px 4px 12px rgba(15,98,254,0.04); z-index:10; }
.inbox-row.unread-row    { border-left:3px solid #0F62FE; }
.inbox-row.read-row      { border-left:3px solid transparent; }
.inbox-row.snoozed-row   { border-left:3px solid #F59E0B; }
.inbox-row.past-due-edge { border-left:3px solid #DC2626 !important; }

/* Frosted aurora tiles inside inbox context */
.inbox-row .ultra-list-tile,#inbox_container .ultra-list-tile { background:rgba(255,255,255,0.6) !important; backdrop-filter:blur(16px) !important; -webkit-backdrop-filter:blur(16px) !important; border-radius:16px !important; border:1px solid rgba(226,232,240,0.8) !important; transition:all 0.4s cubic-bezier(0.16,1,0.3,1) !important; box-shadow:0 4px 20px rgba(15,23,42,0.03),inset 0 1px 1px rgba(255,255,255,1) !important; }
.inbox-row .ultra-list-tile:hover,#inbox_container .ultra-list-tile:hover { transform:translateX(6px) translateY(-2px) scale(1.01) !important; border-color:rgba(139,92,246,0.4) !important; box-shadow:-8px 12px 24px -6px rgba(139,92,246,0.2),inset 0 1px 1px rgba(255,255,255,1) !important; z-index:10; }

/* Inbox row anatomy */
.inbox-avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--accent-blue),#4338CA); color:#FFF; display:flex; align-items:center; justify-content:center; font-weight:500; font-size:12pt; margin-right:16px; flex-shrink:0; text-transform:uppercase; }
.read-row .inbox-avatar { background:linear-gradient(135deg,#94A3B8,#64748B); box-shadow:none; }
.inbox-content       { flex-grow:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.inbox-header-line   { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.inbox-sender-group  { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.inbox-sender        { font-weight:600; color:#1E293B; font-size:10.5pt; letter-spacing:-0.2px; }
.inbox-badges        { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.privacy-badge   { font-size:7pt; font-weight:600; padding:3px 8px; border-radius:6px; display:inline-flex; align-items:center; letter-spacing:0.3px; }
.privacy-private { background:#F1F5F9; color:#475569; border:1px solid #E2E8F0; }
.privacy-public  { background:#F0F9FF; color:#0369A1; border:1px solid #BAE6FD; }
.role-badge      { font-size:7pt; font-weight:600; padding:3px 8px; border-radius:6px; text-transform:uppercase; letter-spacing:0.3px; border:1px solid transparent; }
.inbox-meta-group    { display:flex; align-items:center; gap:12px; }
.inbox-date          { font-size:8.5pt; color:#94A3B8; font-weight:500; white-space:nowrap; }
.inbox-actions       { display:flex; align-items:center; gap:6px; opacity:0; transition:opacity 0.2s; }
.inbox-row:hover .inbox-actions { opacity:1; }
.inbox-action-btn       { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#FFF; border:1px solid #E2E8F0; cursor:pointer; transition:0.2s; }
.inbox-action-btn:hover { background:#F1F5F9; transform:scale(1.05); box-shadow:0 2px 4px rgba(0,0,0,0.03); }
.inbox-action-btn img   { height:12px; opacity:0.6; transition:0.2s; }
.inbox-action-btn:hover img { opacity:0.9; }
.inbox-message        { font-size:10pt; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#64748B; font-weight:400; }
.inbox-message.unread { font-weight:600; color:#0F172A; }
.inbox-tab            { flex:1; justify-content:center; padding:12px 18px; cursor:pointer; font-weight:600; font-size:10pt; display:flex; align-items:center; gap:8px; transition:0.2s; white-space:nowrap; letter-spacing:-0.2px; }
.content-datetime-wrap { width:100%; flex-wrap:wrap; justify-content:flex-end; margin-top:6px; }

/* Bento staggered entry */
.paginate-container > * { opacity:0; animation:ultraBentoSlideUp 0.6s cubic-bezier(0.16,1,0.3,1) forwards; }
.paginate-container > *:nth-child(1){animation-delay:.05s}
.paginate-container > *:nth-child(2){animation-delay:.10s}
.paginate-container > *:nth-child(3){animation-delay:.15s}
.paginate-container > *:nth-child(4){animation-delay:.20s}
.paginate-container > *:nth-child(5){animation-delay:.25s}
.paginate-container > *:nth-child(6){animation-delay:.30s}
.paginate-container > *:nth-child(n+7){animation-delay:.35s}

/* Ultra list tile — solid white base */
.ultra-list-tile {
    display:flex; align-items:stretch;
    background:linear-gradient(180deg,#FFFFFF 0%,#FCFDFE 100%) !important;
    border-radius:20px !important; border:1px solid var(--pro-line-1) !important;
    margin-bottom:16px;
    box-shadow:0 14px 36px rgba(15,23,42,0.055),inset 0 1px 0 rgba(255,255,255,0.98) !important;
    position:relative; cursor:pointer; overflow:hidden; width:100% !important;
    transition:transform var(--pro-tr-base) var(--pro-ease),box-shadow var(--pro-tr-base) var(--pro-ease),border-color var(--pro-tr-base) ease !important;
}
.ultra-list-tile:hover {
    transform:translateX(3px) translateY(-2px) scale(1.005) !important;
    border-color:rgba(216,180,254,0.40) !important;
    box-shadow:0 22px 46px rgba(15,23,42,0.08),0 8px 18px rgba(124,58,237,0.08),inset 0 1px 0 rgba(255,255,255,1) !important;
    z-index:10;
}
/* Shared border-color reset */
.ultra-list-tile,.inbox-row .ultra-list-tile,.chat-bubble-container,
.inset-content-block,.rc-owner,.tile-avatar,.quick-action-bar { border-color:var(--border-subtle) !important; }

/* Tile internals */
.tile-body    { padding:16px 20px; flex-grow:1; display:flex; align-items:stretch; gap:16px; -webkit-font-smoothing:antialiased; }
.tile-content { flex-grow:1; min-width:0; display:flex; flex-direction:column; gap:6px; justify-content:center; }
/* Shared surface background */
.tile-avatar,.rc-owner,.inset-content-block { background:var(--surface-2); }
/* Shared box-shadow */
.tile-avatar,.chat-bubble-avatar,.inbox-avatar { box-shadow:inset 0 1px 0 rgba(255,255,255,0.94),0 8px 18px rgba(15,23,42,0.08),0 3px 8px rgba(124,58,237,0.06); }
.tile-avatar { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1px solid #E2E8F0; transition:all 0.2s ease; position:relative; z-index:2; }
.ultra-list-tile:hover .tile-avatar { border-color:#CBD5E1; }
.tile-avatar img { height:20px; opacity:0.6; transition:all 0.2s ease; }
.ultra-list-tile:hover .tile-avatar img { opacity:0.8; }
.inset-content-block { border:1px solid #E2E8F0; border-radius:8px; padding:10px 14px; margin:6px 0; position:relative; transition:all 0.2s ease; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.inset-content-block::before { content:""; position:absolute; left:-1px; top:12px; bottom:12px; width:3px; border-radius:3px; background:var(--status-color,#CBD5E1); transition:background 0.2s; }
.ultra-list-tile:hover .inset-content-block { border-color:#CBD5E1; }
.quick-action-bar {
    position:absolute; right:20px; top:16px; display:flex; gap:8px; align-items:center;
    background:rgba(255,255,255,0.88); padding:8px 14px; border-radius:100px;
    border:1px solid rgba(226,232,240,0.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(12px);
    transition:all 0.3s ease; opacity:0; transform:translateX(10px); pointer-events:none;
}
.ultra-list-tile:hover .quick-action-bar { background:#FFFFFF; box-shadow:0 6px 16px rgba(15,23,42,0.06); border-color:#CBD5E1; transform:translateX(0); opacity:1; pointer-events:auto; }


/* ───────────────────────────────────────────────────────────────────────
   §13  CHAT BUBBLES
   ─────────────────────────────────────────────────────────────────────── */
.chat-bubble-container { display:flex; flex-direction:column; gap:14px; margin-top:20px; padding:20px; border-radius:20px; background:rgba(248,250,252,0.6); border:1px solid rgba(226,232,240,0.8); transition:all 0.3s cubic-bezier(0.16,1,0.3,1); box-shadow:inset 0 2px 4px rgba(0,0,0,0.01); cursor:pointer; overflow:hidden; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.ultra-list-tile:hover .chat-bubble-container,.chat-bubble-container:hover { background:#FFFFFF; border-color:rgba(216,180,254,0.40) !important; box-shadow:0 22px 46px rgba(15,23,42,0.08),0 8px 18px rgba(124,58,237,0.08),inset 0 1px 0 rgba(255,255,255,1) !important; transform:var(--pro-hover-shift-card); }
.chat-bubble-row    { display:flex; gap:14px; align-items:flex-start; }
.chat-bubble-avatar { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9pt; font-weight:900; flex-shrink:0; border:1px solid rgba(0,0,0,0.05); transition:transform 0.2s; }
.chat-bubble-content { background:#FFFFFF; padding:14px 18px; border-radius:8px 18px 18px 18px; border:1px solid var(--border-subtle); max-width:85%; transition:all 0.3s cubic-bezier(0.16,1,0.3,1); box-shadow:0 4px 12px rgba(15,23,42,0.03); text-align:left; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.chat-bubble-row:hover .chat-bubble-content { transform:translateY(-2px); box-shadow:0 8px 24px rgba(15,23,42,0.06); border-color:#CBD5E1; }
.chat-bubble-row:hover .chat-bubble-avatar  { transform:scale(1.1); }
.chat-bubble-author { font-size:8pt; font-weight:800; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px; text-align:left; }
.chat-bubble-text   { font-size:10.5pt; color:#334155; line-height:1.5; text-align:left; }


/* ───────────────────────────────────────────────────────────────────────
   §14  RICH CARDS, GHOST CARDS & RELATION PILLS
   ─────────────────────────────────────────────────────────────────────── */
.rich-card,.dossier-card { border-radius:var(--radius-lg); }
.rich-card {
    background:linear-gradient(180deg,#FFFFFF 0%,#FCFDFE 100%) !important;
    border:1px solid var(--pro-line-1) !important;
    padding:20px; text-decoration:none; display:flex; flex-direction:column;
    box-shadow:0 14px 36px rgba(15,23,42,0.055),inset 0 1px 0 rgba(255,255,255,0.98) !important;
    position:relative; overflow:hidden;
    transition:transform var(--pro-tr-base) var(--pro-ease),box-shadow var(--pro-tr-base) var(--pro-ease),border-color var(--pro-tr-base) ease;
}
.rich-card:hover,.dossier-card:hover,.relation-pill:hover,.ultra-list-tile:hover { box-shadow:var(--shadow-md) !important; }
.div_box_1:hover,.div_box_2:hover,.rich-card:hover,.ultra-list-tile:hover,.relation-pill:hover { border-color:rgba(196,181,253,0.78) !important; box-shadow:var(--ux-panel-shadow-hover) !important; }
.rich-card:hover { transform:var(--pro-hover-shift-card) !important; border-color:#D8B4FE !important; z-index:10; }
/* Card active variants */
.active-ncr-card { background:linear-gradient(145deg,#FEF2F2,#FFF) !important; border-color:#FECACA !important; }
.active-cal-card { background:linear-gradient(145deg,#F0F9FF,#FFF) !important; border-color:#BAE6FD !important; }
.active-car-card { background:linear-gradient(145deg,#FFEDD5,#FFF) !important; border-color:#FED7AA !important; }
.active-far-card { background:linear-gradient(145deg,#FEF2F2,#FFF) !important; border-color:#FECACA !important; }
.active-wpi-card { background:linear-gradient(145deg,#FDF2F8,#FFF) !important; border-color:#FBCFE8 !important; }
.active-cri-card { background:linear-gradient(145deg,#FDF2F8,#FFF) !important; border-color:#FBCFE8 !important; }
.active-lti-card { background:linear-gradient(145deg,#FDF2F8,#FFF) !important; border-color:#FBCFE8 !important; }
.active-dyn-card { background:linear-gradient(145deg,#F5F3FF,#FFF) !important; border-color:#DDD6FE !important; }
.sim-card        { background:linear-gradient(145deg,#FFFBEB,#FEF3C7) !important; border-color:#FCD34D !important; }
/* Card anatomy */
.rc-top       { display:flex; align-items:flex-start; gap:15px; margin-bottom:12px; }
.rc-icon-wrap { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 2px 4px rgba(255,255,255,0.3),0 8px 16px rgba(15,23,42,0.08); flex-shrink:0; }
.rc-icon-wrap img   { height:20px; filter:brightness(0) invert(1); }
.rc-title-area { flex-grow:1; min-width:0; padding-right:20px; }
.rc-badge      { font-size:7pt; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; padding:3px 8px; border-radius:6px; display:inline-block; margin-bottom:4px; }
.rc-title      { font-size:12.5pt; font-weight:900; color:var(--text-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2; }
.rc-meta-grid  { display:flex; flex-direction:column; gap:6px; margin-bottom:15px; }
.rc-meta-row   { display:flex; align-items:center; gap:8px; font-size:9pt; color:#64748B; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rc-meta-row img { height:12px; opacity:0.5; flex-shrink:0; }
.rc-footer     { display:flex; justify-content:space-between; align-items:center; border-top:1px solid #F1F5F9; padding-top:12px; margin-top:auto; }
.rc-owner      { display:flex; align-items:center; gap:6px; font-size:8pt; font-weight:700; color:#475569; padding:4px 10px; border-radius:12px; border:1px solid #E2E8F0; }
.rc-owner img  { height:10px; opacity:0.6; }
.rc-alerts     { display:flex; gap:6px; }
.rc-hover-actions { position:absolute; bottom:-60px; left:0; right:0; background:rgba(255,255,255,0.95); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); padding:12px 10px; display:flex; gap:8px; transition:0.3s cubic-bezier(0.2,0.8,0.2,1); border-top:1px solid #E2E8F0; justify-content:center; z-index:20; }
.rich-card:hover .rc-hover-actions { bottom:0; }
.hover-btn     { font-size:8pt; font-weight:800; padding:6px 10px; border-radius:8px; cursor:pointer; transition:0.2s; display:flex; align-items:center; gap:4px; flex:1; justify-content:center; }
.btn-note  { background:#F1F5F9; color:#475569; border:1px solid #E2E8F0; } .btn-note:hover  { background:#E2E8F0; color:var(--text-strong); }
.btn-ncr   { background:#FEF2F2; color:#B91C1C; border:1px solid #FECACA; } .btn-ncr:hover   { background:#FEE2E2; }
.btn-cal   { background:#F0FDF4; color:#166534; border:1px solid #BBF7D0; } .btn-cal:hover   { background:#DCFCE7; }
/* Card colour themes */
.theme-contact .rc-icon-wrap { background:linear-gradient(135deg,#0F62FE,#4338CA); }
.theme-contact .rc-badge     { background:#EFF6FF; color:#0F62FE; border:1px solid #BFDBFE; }
.theme-goods .rc-icon-wrap   { background:linear-gradient(135deg,#059669,#047857); }
.theme-goods .rc-badge       { background:#ECFDF5; color:#059669; border:1px solid #A7F3D0; }
.theme-tag .rc-badge         { background:#F8FAFC; border:1px solid #E2E8F0; }
/* Ghost card */
.ghost-card { border:2px dashed #CBD5E1 !important; background:linear-gradient(180deg,rgba(255,255,255,0.7),rgba(255,255,255,0.3)) !important; backdrop-filter:blur(16px) saturate(180%) !important; -webkit-backdrop-filter:blur(16px) saturate(180%) !important; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px; border-radius:var(--radius-lg) !important; cursor:pointer; transition:all 0.3s cubic-bezier(0.16,1,0.3,1) !important; min-height:160px; text-align:center; height:100%; box-shadow:0 8px 32px rgba(15,23,42,0.02),inset 0 0 20px rgba(255,255,255,0.6) !important; }
.ghost-card:hover { border-color:rgba(139,92,246,0.8) !important; background:linear-gradient(135deg,rgba(255,255,255,0.9),rgba(255,255,255,0.5)) !important; transform:var(--pro-hover-shift-card) !important; box-shadow:0 12px 40px rgba(139,92,246,0.15),inset 0 0 20px rgba(255,255,255,0.9) !important; color:var(--accent-blue) !important; }
.ghost-icon { width:40px; height:40px; border-radius:50%; background:#FFF; display:flex; align-items:center; justify-content:center; font-size:18pt; font-weight:900; margin-bottom:12px; box-shadow:0 4px 10px rgba(0,0,0,0.06); transition:0.3s; }
.ghost-card:hover .ghost-icon { background:var(--accent-blue); color:#FFF; box-shadow:0 4px 15px rgba(15,98,254,0.3); transform:rotate(90deg); }
/* Relation pills */
.relation-pill { display:flex; align-items:center; justify-content:space-between; padding:13px 16px !important; background:var(--pro-control-bg) !important; border:1px solid var(--pro-line-1) !important; border-radius:18px !important; margin-bottom:10px; overflow:hidden; transition:background 0.32s cubic-bezier(0.16,1,0.3,1),border-color 0.32s cubic-bezier(0.16,1,0.3,1),box-shadow 0.32s cubic-bezier(0.16,1,0.3,1),transform 0.32s cubic-bezier(0.16,1,0.3,1),color 0.24s ease !important; }
.relation-pill:hover { background:linear-gradient(180deg,#FFFFFF,#FAF5FF) !important; transform:translateX(5px) !important; border-color:rgba(196,181,253,0.54) !important; box-shadow:0 14px 26px rgba(15,23,42,0.05),0 6px 14px rgba(124,58,237,0.06),inset 0 1px 0 rgba(255,255,255,1) !important; }



/* ───────────────────────────────────────────────────────────────────────
   §15  DOSSIER / ENTITY VIEW
   ─────────────────────────────────────────────────────────────────────── */
.dossier-wrapper { max-width:1400px; margin:0 auto; display:flex; flex-direction:column; gap:24px; padding:10px 20px 80px; font-family:inherit; }
.dossier-header { border-radius:24px; padding:40px; color:#FFF; margin-bottom:30px; position:relative; overflow:hidden; display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:center; box-shadow:0 20px 40px -10px rgba(15,23,42,0.3); }
.dossier-header::before { content:""; position:absolute; right:-5%; top:-20%; width:50%; height:150%; background:radial-gradient(circle,rgba(255,255,255,0.15) 0%,transparent 70%); pointer-events:none; }
.dossier-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.dossier-card { background:#FFF; border-radius:20px; padding:30px; border:1px solid #E2E8F0; box-shadow:0 4px 6px -1px rgba(0,0,0,0.02); transition:transform 0.3s ease,box-shadow 0.3s ease; }
.dossier-card:hover { transform:var(--pro-hover-shift-card) !important; border-color:#D8B4FE !important; box-shadow:0 22px 46px rgba(15,23,42,0.08),0 8px 18px rgba(124,58,237,0.08),inset 0 1px 0 rgba(255,255,255,1) !important; }
.dossier-wrapper .metric-grid { display:flex; flex-wrap:wrap; gap:15px; margin:20px 0; }
.dossier-wrapper .metric-card { flex:1; min-width:140px; background:#F8FAFC; border:1px solid #E2E8F0; padding:15px; border-radius:14px; display:flex; flex-direction:column; gap:4px; cursor:default; }
.dossier-wrapper .metric-lbl  { font-size:8pt; font-weight:800; color:#64748B; text-transform:uppercase; letter-spacing:0.5px; }
.dossier-wrapper .metric-val  { font-size:11pt; font-weight:800; color:var(--text-strong); word-break:break-word; }
/* Metric cards — dark context (inside dossier-header) */
.dir-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; width:100%; }
.dir-metrics .metric-card { flex:1; min-width:0; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); padding:12px 5px; border-radius:16px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); text-align:center; transition:all 0.3s cubic-bezier(0.2,0.8,0.2,1); cursor:pointer; position:relative; overflow:hidden; }
.dir-metrics .metric-card:hover { transform:translateY(-4px); background:rgba(255,255,255,0.1); box-shadow:0 10px 25px rgba(0,0,0,0.3); }
.dir-metrics .metric-val { font-size:clamp(14pt,4vw,20pt); font-weight:900; color:#FFF; margin-bottom:4px; }
.dir-metrics .metric-lbl { font-size:clamp(6.5pt,2vw,8pt); font-weight:800; color:#94A3B8; text-transform:uppercase; letter-spacing:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.edit-record-btn { background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3); color:#FFF; font-weight:800; font-size:9.5pt; padding:10px 24px; border-radius:30px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); transition:all 0.3s; }
.edit-record-btn:hover { background:rgba(255,255,255,0.25); transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.15); }



/* ── ENTITY-PAGE UI  (entity.php)  ─────────────────────────────────────
   Breadcrumb · Status Chips · Action Row · Responsibility · CTAs ·
   Filter Trays · Attachment Grid · 5-Recent Limiter. Paired with the
   Compliance Command Center in §16 which renders at the top of every
   entity page. Mobile rules for this block live in §25. */

/* ——— BREADCRUMB ——— */
.ent-breadcrumb {
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    padding:4px 4px 10px 4px; font-size:9.5pt; color:#64748B;
    font-weight:600;
}
/* Entity pages want a bit more breathing room below the crumb (14px vs 10px)
   and a hair of letter-spacing. .dossier-wrapper scopes it to entity.php only. */
.dossier-wrapper .ent-breadcrumb { padding-bottom:14px; letter-spacing:0.01em; }
.ent-breadcrumb .ent-crumb-link {
    color:#64748B; text-decoration:none; padding:6px 12px; border-radius:8px;
    transition:all 0.18s ease; display:inline-flex; align-items:center; gap:4px;
    border:1px solid transparent;
}
.ent-breadcrumb .ent-crumb-link:hover { background:#F1F5F9; border-color:#E2E8F0; color:#0F172A; }
.ent-breadcrumb .ent-crumb-arrow { font-size:14pt; line-height:0; }
.ent-breadcrumb .ent-crumb-sep { color:#CBD5E1; font-weight:400; }
.ent-breadcrumb .ent-crumb-current { color:#94A3B8; }
.ent-breadcrumb .ent-crumb-active {
    color:#0F172A; font-weight:800;
    max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ——— STATUS CHIPS ——— */
.ent-chip {
    padding:5px 11px; border-radius:999px; font-size:8.5pt; font-weight:800;
    text-transform:uppercase; letter-spacing:0.06em;
    display:inline-flex; align-items:center; gap:6px;
    white-space:nowrap;
    transition:transform 0.15s ease;
}
.ent-chip:hover { transform:translateY(-1px); }
.ent-chip-danger  { background:#FEF2F2; color:#B91C1C; border:1px solid #FECACA; }
.ent-chip-warn    { background:#FFFBEB; color:#92400E; border:1px solid #FDE68A; }
.ent-chip-success { background:#F0FDF4; color:#15803D; border:1px solid #BBF7D0; }

.ent-description {
    margin-top:14px !important; font-size:10.5pt !important; line-height:1.6 !important;
    max-width:100% !important;
}

/* ——— ACTION ROW (Command Header) ——— */
.ent-action-row { margin-top:18px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.ent-readonly-pill {
    background:rgba(0,0,0,0.4); backdrop-filter:blur(5px);
    padding:10px 20px; border-radius:30px; font-size:9pt; font-weight:800;
    border:1px solid rgba(255,255,255,0.2); color:#FFF;
}

/* Primary Edit Profile button — always readable over the command-header gradient */
.ent-edit-btn {
    padding:10px 18px; border-radius:30px;
    background:linear-gradient(180deg,#FFFFFF 0%,#F5F3FF 100%);
    color:#0F172A;
    font-size:9pt; font-weight:800; cursor:pointer;
    display:inline-flex; align-items:center; gap:8px;
    border:1px solid rgba(15,23,42,0.08);
    box-shadow:0 4px 14px rgba(15,23,42,0.18), inset 0 1px 0 rgba(255,255,255,0.8);
    transition:all 0.2s cubic-bezier(0.16,1,0.3,1);
    white-space:nowrap;
}
.ent-edit-btn:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(15,23,42,0.25), inset 0 1px 0 rgba(255,255,255,0.9);
    background:linear-gradient(180deg,#FFFFFF 0%,#EDE9FE 100%);
}
.ent-edit-btn img { filter:none !important; opacity:0.85; }

/* ——— RESPONSIBILITY DROPDOWN (inline in header) ——— */
.ent-resp-wrap {
    display:inline-flex; align-items:center; gap:10px;
    background:rgba(255,255,255,0.96);
    border:1px solid rgba(255,255,255,0.6);
    padding:6px 14px; border-radius:30px;
    box-shadow:0 4px 14px rgba(15,23,42,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
    transition:all 0.2s ease;
}
.ent-resp-wrap:hover {
    box-shadow:0 6px 22px rgba(15,23,42,0.18), inset 0 1px 0 rgba(255,255,255,0.7);
    transform:translateY(-1px);
}
.ent-resp-label {
    font-size:8pt; font-weight:900; color:#64748B;
    text-transform:uppercase; letter-spacing:0.08em; white-space:nowrap;
}
.ent-resp-select {
    border:none; outline:none; background:transparent;
    font-size:9.5pt; font-weight:700; color:#0F172A;
    cursor:pointer; max-width:240px; padding:4px 2px; font-family:inherit;
}
.ent-resp-select:disabled { cursor:not-allowed; opacity:0.6; }
.ent-resp-select option { color:#0F172A; background:#FFF; }

/* ——— QUICK CTAs in header ——— */
.ent-cta-row { display:inline-flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
.ent-cta-btn {
    padding:10px 16px; border-radius:30px;
    font-size:9pt; font-weight:800; cursor:pointer;
    display:inline-flex; align-items:center; gap:6px;
    transition:all 0.2s cubic-bezier(0.16,1,0.3,1);
    border:1px solid transparent;
    backdrop-filter:blur(5px); white-space:nowrap;
}
.ent-cta-btn:hover { transform:translateY(-2px); }
.ent-cta-ncr {
    background:rgba(239,68,68,0.92); color:#FFF;
    border-color:rgba(185,28,28,0.8);
    box-shadow:0 4px 14px rgba(239,68,68,0.35);
}
.ent-cta-ncr:hover { box-shadow:0 8px 20px rgba(239,68,68,0.5); }
.ent-cta-audit {
    background:rgba(14,165,233,0.92); color:#FFF;
    border-color:rgba(3,105,161,0.8);
    box-shadow:0 4px 14px rgba(14,165,233,0.3);
}
.ent-cta-audit:hover { box-shadow:0 8px 20px rgba(14,165,233,0.45); }
.ent-cta-note { background:rgba(255,255,255,0.9); color:#334155; border-color:rgba(203,213,225,0.8); }
.ent-cta-note:hover { background:#FFF; }

/* ——— SECTION HEADER ROW (title + single CTA) ——— */
.ent-section-header-row {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:14px; flex-wrap:wrap; gap:10px;
}

/* ——— ATTACHMENT TILE GRID (preview-style) ——— */
.ent-attach-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
    gap:14px;
}
.ent-attach-tile {
    display:flex; flex-direction:column;
    background:#FFF; border:1px solid #E2E8F0; border-radius:14px;
    overflow:hidden; text-decoration:none; color:inherit;
    transition:all 0.2s cubic-bezier(0.16,1,0.3,1);
    box-shadow:0 2px 8px rgba(15,23,42,0.04);
}
.ent-attach-tile:hover {
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(15,23,42,0.08);
    border-color:#CBD5E1;
}
.ent-attach-preview {
    width:100%; aspect-ratio:4/3;
    display:flex; align-items:center; justify-content:center;
    position:relative;
    border-bottom:1px solid rgba(226,232,240,0.6);
}
.ent-attach-image {
    background-size:cover; background-position:center; background-repeat:no-repeat;
    background-color:#F8FAFC;
}
.ent-attach-file { font-weight:900; }
.ent-attach-ext {
    font-size:15pt; font-weight:900;
    letter-spacing:-0.02em; line-height:1;
    padding:8px 14px; border-radius:10px;
    background:rgba(255,255,255,0.45);
    border:1px solid rgba(255,255,255,0.85);
    text-shadow:0 1px 0 rgba(255,255,255,0.6);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.9);
}
.ent-attach-meta {
    padding:10px 12px 12px 12px;
    display:flex; flex-direction:column; gap:3px; min-width:0;
}
.ent-attach-name {
    font-size:9.5pt; font-weight:800; color:#0F172A;
    letter-spacing:-0.01em; line-height:1.3;
    overflow:hidden; text-overflow:ellipsis;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.ent-attach-sub {
    font-size:7.5pt; font-weight:800; color:#94A3B8;
    text-transform:uppercase; letter-spacing:0.06em;
}

/* ——— 5-RECENT LIMITER: overflow cards hide until "Show More" clicked ——— */
.rich-card.ent-overflow-hidden { display:none !important; }
.ent-show-more-btn {
    padding:10px 16px; margin-top:10px;
    text-align:center; cursor:pointer;
    background:linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%);
    border:1px dashed #CBD5E1; border-radius:12px;
    color:#475569; font-size:9pt; font-weight:800;
    letter-spacing:0.01em;
    transition:all 0.2s cubic-bezier(0.16,1,0.3,1);
    user-select:none;
}
.ent-show-more-btn:hover {
    background:linear-gradient(180deg,#F8FAFC 0%,#F1F5F9 100%);
    border-color:#94A3B8; color:#0F172A;
    border-style:solid;
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(15,23,42,0.06);
}

/* ——— TRAY-PILL FILTER BAR (matches monitor.php mon-tray-pill model) ——— */
.ent-tray-filter {
    display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center;
    padding:9px 12px; margin-bottom:2px;
    background:linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%);
    border:1px solid rgba(226,232,240,0.9);
    border-radius:14px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.98);
}
.ent-tray-sub {
    display:inline-flex; align-items:center; gap:6px;
    padding:3px 5px 3px 10px;
    background:#FFF; border:1px solid #E2E8F0; border-radius:999px;
    box-shadow:0 2px 6px rgba(15,23,42,0.04);
}
.ent-tray-label {
    font-size:7.5pt; font-weight:900; color:#64748B;
    text-transform:uppercase; letter-spacing:0.1em; padding:0 4px;
}
.ent-tray-pill {
    padding:5px 12px; font-size:9pt; font-weight:800;
    color:#64748B; cursor:pointer; border-radius:999px;
    transition:all 0.15s cubic-bezier(0.16,1,0.3,1); user-select:none;
    border:1px solid transparent; white-space:nowrap;
    display:inline-flex; align-items:center; gap:5px;
}
.ent-tray-pill:hover { background:#F1F5F9; color:#334155; }
.ent-tray-pill.active {
    background:linear-gradient(135deg,#7C3AED,#4C1D95);
    color:#FFF; border-color:rgba(255,255,255,0.14);
    box-shadow:0 4px 12px rgba(124,58,237,0.28), inset 0 1px 0 rgba(255,255,255,0.22);
    font-weight:900;
}
.ent-tray-pill.active:hover {
    background:linear-gradient(135deg,#6D28D9,#3B0F82);
    color:#FFF; transform:translateY(-1px);
}

/* LEGACY CLASSES — kept so the old inline `.ent-filter-bar`/`.ent-filter-pill`
   markup still renders reasonably if anything in the codebase emits them.
   New markup should use `.ent-tray-filter` / `.ent-tray-pill` only. */
.ent-filter-bar {
    display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center;
    padding:10px 12px; background:#F8FAFC; border:1px solid #E2E8F0;
    border-radius:14px; margin-bottom:2px;
}
.ent-filter-group {
    display:inline-flex; align-items:center; gap:6px;
    padding:3px 5px; background:#FFF; border:1px solid #E2E8F0; border-radius:12px;
}
.ent-filter-label {
    font-size:7.5pt; font-weight:900; color:#64748B;
    text-transform:uppercase; letter-spacing:0.1em; padding:0 6px 0 8px;
}
.ent-filter-pill {
    padding:6px 13px; font-size:9pt; font-weight:700;
    color:#64748B; cursor:pointer; border-radius:8px;
    transition:all 0.15s ease; user-select:none; border:1px solid transparent;
    white-space:nowrap;
}
.ent-filter-pill:hover { background:#F1F5F9; color:#334155; }
.ent-filter-pill.is-active {
    background:linear-gradient(180deg,#0F172A,#1E293B); color:#FFF;
    box-shadow:0 3px 10px rgba(15,23,42,0.25), inset 0 1px 0 rgba(255,255,255,0.1);
    font-weight:800;
}
.ent-filter-pill.is-active:hover { background:linear-gradient(180deg,#1E293B,#334155); color:#FFF; }



/* ───────────────────────────────────────────────────────────────────────
   §16  COMPLIANCE COMMAND CENTER          (shared: entity.php + tags.php)
   ───────────────────────────────────────────────────────────────────────
   Premium three-panel data hero: Health Ring · At-Risk · Activity Pulse.
   Both entity.php and tags.php render `<div class="cc-container">`; the
   entity page additionally adds `.cc-container-entity` which enables the
   four scoped overrides marked "ENTITY VARIANT" below. Mobile rules live
   in §25.
   ─────────────────────────────────────────────────────────────────────── */

.cc-container {
    display:grid; grid-template-columns:1fr 1.5fr 1.2fr;
    gap:18px; margin-bottom:24px;
}
.cc-container-entity { margin-top:4px; }

.cc-panel {
    position:relative; padding:20px 22px 22px 22px;
    border-radius:22px;
    background:linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,250,252,0.92) 100%);
    border:1px solid rgba(226,232,240,0.78);
    box-shadow:
        0 14px 32px rgba(15,23,42,0.06),
        0 2px 6px rgba(15,23,42,0.04),
        inset 0 1px 0 rgba(255,255,255,0.98);
    backdrop-filter:blur(16px) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    overflow:hidden;
    transition:transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
    display:flex; flex-direction:column;
}
.cc-panel:hover {
    transform:translateY(-2px);
    box-shadow:
        0 22px 44px rgba(15,23,42,0.08),
        0 4px 10px rgba(15,23,42,0.05),
        inset 0 1px 0 rgba(255,255,255,0.98);
}
.cc-panel::before {
    content:""; position:absolute; inset:0; pointer-events:none;
    border-radius:inherit;
    background:radial-gradient(80% 60% at 20% 0%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 60%);
    opacity:0.8;
}

.cc-panel-head {
    display:flex; align-items:baseline; justify-content:space-between;
    gap:10px; margin-bottom:14px; position:relative;
}
.cc-panel-title { font-size:10pt; font-weight:900; color:#0F172A; letter-spacing:-0.01em; }
.cc-panel-sub   { font-size:7.5pt; font-weight:800; color:#94A3B8; text-transform:uppercase; letter-spacing:0.08em; white-space:nowrap; }

/* ─── HEALTH RING ─── */
.cc-health { align-items:center; text-align:center; }
.cc-health::after {
    content:""; position:absolute; top:0; left:0; right:0; height:4px;
    background:var(--cc-accent); opacity:0.85;
    border-radius:22px 22px 0 0;
}
.cc-ring-wrap { position:relative; width:156px; height:156px; margin:6px auto 12px auto; }
.cc-ring-svg  { width:100%; height:100%; display:block; filter:drop-shadow(0 4px 8px rgba(15,23,42,0.06)); }
.cc-ring-progress {
    stroke-dashoffset:var(--cc-ring-offset, 0);
    animation:cc-ring-fill 1.4s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes cc-ring-fill {
    from { stroke-dashoffset:345.57; }
    to   { stroke-dashoffset:var(--cc-ring-offset, 0); }
}
.cc-ring-center {
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    pointer-events:none;
}
.cc-ring-pct {
    font-size:34pt; font-weight:900; color:#0F172A;
    letter-spacing:-0.04em; line-height:1;
    font-variant-numeric:tabular-nums;
}
.cc-ring-pct span { font-size:16pt; font-weight:800; color:#64748B; margin-left:2px; }
.cc-ring-cap {
    font-size:8pt; font-weight:800; color:#94A3B8;
    text-transform:uppercase; letter-spacing:0.16em; margin-top:3px;
}
.cc-health-label {
    display:inline-flex; align-items:center; gap:7px;
    padding:5px 12px; background:var(--cc-tint); border:1px solid var(--cc-accent);
    border-radius:999px; margin:0 auto 10px auto;
}
.cc-health-dot {
    width:8px; height:8px; border-radius:50%; background:var(--cc-accent);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--cc-accent) 25%, transparent);
    animation:cc-pulse-dot 2s ease-in-out infinite;
}
@keyframes cc-pulse-dot { 0%,100%{transform:scale(1);} 50%{transform:scale(1.3);} }
.cc-health-tone { font-size:9pt; font-weight:900; color:var(--cc-accent); letter-spacing:-0.01em; }
.cc-health-break {
    display:flex; justify-content:center; gap:14px;
    font-size:9pt; font-weight:800; color:#475569;
    margin-top:auto; padding-top:4px;
}
.cc-health-break span { display:inline-flex; align-items:center; gap:5px; }
.cc-break-dot { width:7px; height:7px; border-radius:50%; display:inline-block; box-shadow:0 0 0 2px rgba(255,255,255,0.9); }

/* ─── AT-RISK / RECENT EVENTS LIST ─── */
.cc-atrisk-list { display:flex; flex-direction:column; gap:6px; margin:2px 0 0 0; }
.cc-atrisk-row {
    display:flex; align-items:center; gap:12px;
    padding:9px 10px; border-radius:12px;
    text-decoration:none; color:inherit;
    transition:all 0.2s cubic-bezier(0.16,1,0.3,1);
    border:1px solid transparent;
    background:rgba(248,250,252,0.6);
    opacity:0; animation:cc-row-in 0.5s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes cc-row-in {
    from { opacity:0; transform:translateX(-8px); }
    to   { opacity:1; transform:translateX(0); }
}
.cc-atrisk-row:hover {
    background:#FFF; border-color:#E2E8F0;
    transform:translateX(3px);
    box-shadow:0 4px 14px rgba(15,23,42,0.06);
}
.cc-atrisk-icon {
    flex-shrink:0; width:36px; height:36px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:inset 0 1px 2px rgba(255,255,255,0.4), 0 4px 10px rgba(15,23,42,0.08);
}
.cc-atrisk-icon img { height:15px; filter:brightness(0) invert(1); opacity:0.95; }
.cc-atrisk-icon.atr-contact { background:linear-gradient(135deg, #0F62FE, #4338CA); }
.cc-atrisk-icon.atr-goods   { background:linear-gradient(135deg, #059669, #047857); }
.cc-atrisk-icon.atr-tag     { background:linear-gradient(135deg, #7C3AED, #5B21B6); }
/* Entity-only atrisk icons (NCR & Calendar Away) */
.cc-atrisk-icon.atr-ncr     { background:linear-gradient(135deg, #EF4444, #B91C1C); }
.cc-atrisk-icon.atr-cal     { background:linear-gradient(135deg, #A78BFA, #7C3AED); }

.cc-atrisk-body { flex-grow:1; min-width:0; }
.cc-atrisk-name {
    font-size:10pt; font-weight:800; color:#0F172A;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    letter-spacing:-0.01em;
}
.cc-atrisk-sub {
    font-size:7.5pt; font-weight:700; color:#94A3B8;
    text-transform:uppercase; letter-spacing:0.06em; margin-top:1px;
}
.cc-atrisk-reason {
    flex-shrink:0; padding:3px 9px; border-radius:999px;
    font-size:7.5pt; font-weight:900;
    white-space:nowrap; letter-spacing:0.03em;
}
.cc-atrisk-reason.reason-ncr  { background:#FEF2F2; color:#B91C1C; border:1px solid #FECACA; }
.cc-atrisk-reason.reason-past { background:#FEF2F2; color:#B91C1C; border:1px solid #FECACA; }
.cc-atrisk-reason.reason-soon { background:#FFFBEB; color:#92400E; border:1px solid #FDE68A; }
.cc-atrisk-arrow {
    flex-shrink:0; font-size:18pt; color:#CBD5E1;
    font-weight:400; line-height:1;
    transition:transform 0.2s ease, color 0.2s ease;
}
.cc-atrisk-row:hover .cc-atrisk-arrow { color:#7C3AED; transform:translateX(3px); }
.cc-atrisk-more {
    display:inline-block; font-size:8.5pt; font-weight:800;
    color:#7C3AED; text-decoration:none;
    margin-top:10px; padding:4px 0;
}
.cc-atrisk-more:hover { color:#5B21B6; text-decoration:underline; }
.cc-atrisk-clear {
    text-align:center; padding:22px 12px;
    flex-grow:1; display:flex; flex-direction:column;
    justify-content:center; align-items:center;
}
.cc-atrisk-clear-icon {
    width:52px; height:52px; border-radius:50%;
    background:linear-gradient(135deg, #10B981, #059669);
    color:#FFF; font-size:26pt; font-weight:900; line-height:52px;
    margin:0 auto 10px auto;
    box-shadow:0 10px 24px rgba(16,185,129,0.35);
    animation:cc-clear-in 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes cc-clear-in { from {transform:scale(0.3); opacity:0;} to {transform:scale(1); opacity:1;} }
.cc-atrisk-clear-title { font-size:14pt; font-weight:900; color:#0F172A; letter-spacing:-0.02em; }
.cc-atrisk-clear-sub   { font-size:9pt; font-weight:600; color:#64748B; margin-top:4px; }

/* ─── 7-DAY ACTIVITY PULSE ─── */
.cc-pulse-chart {
    flex-grow:1; display:flex; align-items:flex-end; justify-content:space-between;
    gap:6px; min-height:96px; margin:4px 0 10px 0; padding:4px 2px;
}
.cc-pulse-col {
    flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;
    height:100%; min-width:0;
}
.cc-pulse-bar-wrap {
    width:100%; flex-grow:1;
    display:flex; align-items:flex-end; justify-content:center; position:relative;
}
.cc-pulse-bar {
    width:100%; max-width:28px; min-height:4px;
    border-radius:6px 6px 3px 3px;
    overflow:hidden; position:relative;
    display:flex; flex-direction:column-reverse;
    background:#F1F5F9;
    box-shadow:inset 0 1px 2px rgba(255,255,255,0.8);
    transform-origin:bottom; transform:scaleY(0);
    animation:cc-bar-grow 0.7s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes cc-bar-grow { to { transform:scaleY(1); } }
.cc-pulse-seg { width:100%; transition:filter 0.2s ease; }
.cc-pulse-ncr { background:linear-gradient(180deg, #EF4444, #B91C1C); }
.cc-pulse-cal { background:linear-gradient(180deg, #A78BFA, #7C3AED); }
.cc-pulse-col:hover .cc-pulse-bar { filter:brightness(1.08); }
.cc-pulse-today .cc-pulse-bar {
    box-shadow:inset 0 1px 2px rgba(255,255,255,0.8), 0 0 0 2px rgba(124,58,237,0.28);
}
.cc-pulse-today .cc-pulse-lbl { color:#7C3AED; font-weight:900; }
.cc-pulse-lbl {
    font-size:7.5pt; font-weight:800; color:#94A3B8;
    text-transform:uppercase; letter-spacing:0.06em;
}
.cc-pulse-tooltip {
    position:absolute; bottom:calc(100% + 8px); left:50%;
    transform:translateX(-50%) translateY(4px);
    background:#0F172A; color:#FFF;
    padding:6px 10px; border-radius:8px;
    font-size:8pt; font-weight:700; line-height:1.4;
    white-space:nowrap; opacity:0; pointer-events:none;
    transition:all 0.2s ease; z-index:10;
    box-shadow:0 8px 20px rgba(15,23,42,0.25);
}
.cc-pulse-tooltip::after {
    content:""; position:absolute; top:100%; left:50%;
    transform:translateX(-50%);
    border:5px solid transparent; border-top-color:#0F172A;
}
.cc-pulse-col:hover .cc-pulse-tooltip { opacity:1; transform:translateX(-50%) translateY(0); }
.cc-pulse-summary {
    display:flex; align-items:center; gap:16px;
    padding-top:10px; border-top:1px solid rgba(226,232,240,0.8);
    font-size:9pt; font-weight:600; color:#475569;
}
.cc-pulse-stat { display:inline-flex; align-items:center; gap:6px; }
.cc-pulse-stat b { color:#0F172A; font-weight:900; font-size:10.5pt; }
.cc-pulse-dot { width:9px; height:9px; border-radius:3px; display:inline-block; }
.cc-pulse-dot-ncr { background:linear-gradient(180deg, #EF4444, #B91C1C); }
.cc-pulse-dot-cal { background:linear-gradient(180deg, #A78BFA, #7C3AED); }

/* ENTITY VARIANTS — only apply when .cc-container-entity is present.
   These preserve entity.php's original pre-merge values (gap:4px, 7pt labels
   with min-height) while tags.php continues to render with the base values
   (gap:6px, 7.5pt labels). */
.cc-container-entity .cc-pulse-chart { gap:4px; }
.cc-container-entity .cc-pulse-lbl   {
    font-size:7pt; letter-spacing:0.04em; min-height:10px;
}


/* ───────────────────────────────────────────────────────────────────────
   §16  DIRECTORY  (tags.php)
   ─────────────────────────────────────────────────────────────────────── */
.dir-layout { width:100% !important; max-width:1500px !important; margin:0 auto !important; padding:18px 22px 110px 22px !important; display:flex; flex-direction:column; gap:0; position:relative; }
.dir-section { margin-bottom:50px; }
.dir-dashboard {
    position:relative; overflow:hidden; display:grid !important;
    grid-template-columns:minmax(0,1.55fr) minmax(340px,0.95fr) !important;
    align-items:center !important; gap:30px !important; padding:36px 36px 34px 36px !important;
    border-radius:30px !important; color:var(--pro-text-1) !important;
    background:
        radial-gradient(circle at 0% 0%,rgba(124,58,237,0.10) 0%,rgba(124,58,237,0) 28%),
        radial-gradient(circle at 100% 0%,rgba(59,130,246,0.08) 0%,rgba(59,130,246,0) 26%),
        radial-gradient(circle at 100% 100%,rgba(16,185,129,0.07) 0%,rgba(16,185,129,0) 24%),
        linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%) !important;
    border:1px solid rgba(226,232,240,0.72) !important;
    box-shadow:0 24px 56px rgba(15,23,42,0.08),inset 0 1px 0 rgba(255,255,255,0.98) !important;
    margin-bottom:28px; isolation:isolate;
}
.dir-dashboard::before { content:"" !important; position:absolute; inset:0; pointer-events:none; background:linear-gradient(125deg,rgba(255,255,255,0.72),rgba(255,255,255,0.06) 34%,rgba(255,255,255,0) 58%); opacity:0.9; z-index:0; }
.dir-dashboard::after  { content:"" !important; position:absolute; right:-6%; top:-28%; width:410px; height:410px; pointer-events:none; background:radial-gradient(circle,rgba(255,255,255,0.86) 0%,rgba(124,58,237,0.14) 34%,rgba(255,255,255,0) 74%); opacity:0.9; filter:blur(6px); z-index:0; }
.dir-title-wrapper,.dir-metrics { position:relative; z-index:1; }
.dir-title-wrapper { display:flex; flex-direction:column; gap:10px; min-width:0; }
.dir-title { display:flex !important; align-items:center !important; gap:16px !important; margin:0; color:var(--pro-text-1) !important; text-shadow:none !important; font-size:clamp(20pt,3vw,29pt) !important; font-weight:950 !important; letter-spacing:-0.05em !important; line-height:1.02; margin-bottom:12px !important; }
.dir-title > div:first-child { display:flex !important; align-items:center; justify-content:center; width:62px !important; height:62px !important; padding:0 !important; border-radius:22px !important; background:linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%) !important; border:1px solid rgba(226,232,240,0.96) !important; box-shadow:0 12px 24px rgba(15,23,42,0.08),inset 0 1px 0 rgba(255,255,255,0.98) !important; }
.dir-title > div:first-child img { height:28px !important; width:24px; display:block; filter:none !important; opacity:0.8; }
.dir-subtitle { margin:0; max-width:760px !important; color:var(--pro-text-3) !important; font-size:11pt !important; font-weight:600 !important; line-height:1.68 !important; }
/* Metric cards — light context (directory) overrides the dark base above */
.dir-layout .dir-metrics { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:16px !important; width:100% !important; }
.dir-layout .dir-metrics .metric-card { min-width:0 !important; min-height:122px !important; padding:20px 16px 16px !important; border-radius:24px !important; position:relative; overflow:hidden; background:linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%) !important; border:1px solid rgba(226,232,240,0.98) !important; box-shadow:0 12px 28px rgba(15,23,42,0.05),inset 0 1px 0 rgba(255,255,255,0.98) !important; text-align:center; transition:transform 0.24s cubic-bezier(0.16,1,0.3,1),box-shadow 0.24s cubic-bezier(0.16,1,0.3,1),border-color 0.24s ease; }
.dir-layout .dir-metrics .metric-card:hover { transform:var(--pro-hover-shift-card) !important; border-color:rgba(216,180,254,0.46) !important; }
.dir-layout .dir-metrics .metric-card::before { content:""; position:absolute; left:16px !important; right:16px !important; top:0 !important; height:4px !important; border-radius:999px !important; }
.dir-layout .dir-metrics .metric-card::after  { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,0.12),rgba(255,255,255,0) 40%); opacity:0.55; pointer-events:none; }
.dir-layout .dir-metrics .metric-val { color:var(--pro-text-1) !important; font-size:clamp(15pt,2vw,22pt) !important; font-weight:950 !important; margin-bottom:6px !important; letter-spacing:-0.03em; line-height:1; }
.dir-layout .dir-metrics .metric-lbl { color:var(--pro-text-3) !important; font-size:7.9pt !important; font-weight:900 !important; letter-spacing:0.15em !important; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.metric-contact { background:linear-gradient(180deg,#FFFFFF 0%,#F6FAFF 100%) !important; }
.metric-goods   { background:linear-gradient(180deg,#FFFFFF 0%,#F4FCF9 100%) !important; }
.metric-tag     { background:linear-gradient(180deg,#FFFFFF 0%,#FAF5FF 100%) !important; }
.metric-contact::before { background:linear-gradient(90deg,#60A5FA,#4F46E5) !important; }
.metric-goods::before   { background:linear-gradient(90deg,#34D399,#059669) !important; }
.metric-tag::before     { background:linear-gradient(90deg,#A78BFA,#7C3AED) !important; }
.metric-contact:hover::before { background:#0F62FE; }
.metric-goods:hover::before   { background:#059669; }
.metric-tag:hover::before     { background:#7C3AED; }
/* Command rail */
.control-center { position:sticky !important; top:78px !important; z-index:15 !important; display:flex !important; align-items:center !important; gap:18px !important; flex-wrap:wrap !important; margin:-2px 0 34px 0 !important; padding:16px !important; border-radius:28px !important; background:rgba(255,255,255,0.92) !important; border:1px solid rgba(226,232,240,0.72) !important; box-shadow:0 16px 34px rgba(15,23,42,0.08),inset 0 1px 0 rgba(255,255,255,0.98) !important; backdrop-filter:blur(16px) saturate(150%) !important; -webkit-backdrop-filter:blur(16px) saturate(150%) !important; }
#search_form { flex:1 1 480px !important; }
.search-box-premium { position:relative !important; width:100% !important; flex:1 1 360px; }
.search-box-premium img { position:absolute !important; left:18px !important; top:50% !important; transform:translateY(-50%) !important; width:17px !important; height:17px !important; opacity:0.46 !important; transition:var(--ux-tr) !important; pointer-events:none; }
.search-box-premium input { width:100% !important; min-height:56px !important; padding:16px 18px 16px 52px !important; border-radius:18px !important; border:1px solid #D9E1EC !important; background:#FFFFFF !important; color:var(--text-strong) !important; font-size:10.5pt !important; font-weight:750 !important; outline:none; box-shadow:0 10px 20px rgba(15,23,42,0.04),inset 0 1px 0 rgba(255,255,255,0.98) !important; transition:border-color 0.22s ease,box-shadow 0.22s ease,background 0.22s ease,transform 0.22s ease; }
.search-box-premium input:hover { border-color:rgba(216,180,254,0.46) !important; box-shadow:0 16px 28px rgba(15,23,42,0.06),0 8px 18px rgba(124,58,237,0.08),inset 0 1px 0 rgba(255,255,255,0.98) !important; transform:var(--hover-shift-soft) !important; }
.search-box-premium input:focus { border-color:#7C3AED !important; box-shadow:0 0 0 4px rgba(124,58,237,0.10),0 18px 34px rgba(91,33,182,0.10),inset 0 1px 0 rgba(255,255,255,0.98) !important; transform:var(--hover-shift-soft) !important; }
.search-box-premium input:focus + img { opacity:0.92 !important; filter:brightness(0) saturate(100%) invert(23%) sepia(56%) saturate(3166%) hue-rotate(255deg) brightness(92%) contrast(94%) !important; }
.search-box-premium input::placeholder { color:#94A3B8; font-weight:600; }
/* Section wrappers */
.section-wrap { width:100% !important; margin-bottom:34px !important; padding:26px 26px 18px 26px !important; border-radius:26px !important; background:linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%) !important; border:1px solid rgba(226,232,240,0.72) !important; box-shadow:0 18px 42px rgba(15,23,42,0.06),0 8px 16px rgba(15,23,42,0.03),inset 0 1px 0 rgba(255,255,255,0.98) !important; }
.dir-section-header { position:relative !important; display:flex !important; align-items:center !important; gap:12px !important; margin-bottom:18px !important; padding:0 0 16px 0 !important; border-bottom:1px solid #E8ECF4 !important; color:var(--pro-text-1) !important; font-size:15.5pt !important; font-weight:950 !important; letter-spacing:-0.03em !important; }
.dir-section-header::after { content:"" !important; position:absolute !important; left:0 !important; bottom:-1px !important; width:96px !important; height:3px !important; border-radius:999px !important; background:linear-gradient(90deg,#7C3AED 0%,#4F46E5 100%) !important; opacity:0.96 !important; }
.dir-badge { display:inline-flex !important; align-items:center !important; justify-content:center !important; min-height:30px !important; padding:5px 12px !important; margin-left:2px; border-radius:999px !important; background:linear-gradient(180deg,#FFFFFF 0%,#FAF5FF 100%) !important; border:1px solid rgba(216,180,254,0.46) !important; color:#5B21B6 !important; font-size:8.5pt; font-weight:900; box-shadow:0 8px 16px rgba(15,23,42,0.04),inset 0 1px 0 rgba(255,255,255,0.98) !important; }
.sub-cat-header { display:flex !important; align-items:center !important; gap:12px !important; margin:30px 0 14px !important; color:#475569 !important; font-size:9pt !important; font-weight:900 !important; text-transform:uppercase !important; letter-spacing:0.16em !important; }
.sub-cat-header::before { content:"" !important; width:10px !important; height:10px !important; border-radius:50% !important; flex-shrink:0 !important; background:linear-gradient(135deg,#A78BFA 0%,#5B21B6 100%) !important; box-shadow:0 0 0 5px rgba(124,58,237,0.10) !important; }
/* Entity grid */
.entity-grid { display:grid !important; grid-auto-flow:row; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:22px !important; align-items:stretch !important; justify-items:stretch !important; margin-bottom:22px !important; width:100% !important; }
.entity-grid > * { min-width:0 !important; width:100% !important; max-width:none !important; }
/* Directory rich card overrides */
.dir-layout .rich-card,.dir-layout .ghost-card { height:100% !important; }
.dir-layout .rich-card { display:flex !important; flex-direction:column !important; background:linear-gradient(180deg,rgba(255,255,255,0.995) 0%,rgba(248,250,252,0.985) 100%) !important; border:1px solid rgba(226,232,240,0.98) !important; border-radius:22px !important; box-shadow:0 14px 32px rgba(15,23,42,0.05),0 6px 14px rgba(15,23,42,0.02),inset 0 1px 0 rgba(255,255,255,0.98) !important; }
.dir-layout .rich-card::before { content:"" !important; position:absolute !important; left:18px !important; right:18px !important; top:0 !important; height:3px !important; border-radius:999px !important; opacity:0.98 !important; }
.dir-layout .rich-card.theme-contact::before { background:linear-gradient(90deg,#60A5FA,#4F46E5) !important; }
.dir-layout .rich-card.theme-goods::before   { background:linear-gradient(90deg,#34D399,#059669) !important; }
.dir-layout .rich-card.theme-tag::before     { background:linear-gradient(90deg,#A78BFA,#5B21B6) !important; }
.dir-layout .rich-card:hover { border-color:rgba(216,180,254,0.52) !important; box-shadow:0 24px 44px rgba(15,23,42,0.09),0 12px 24px rgba(124,58,237,0.08),inset 0 1px 0 rgba(255,255,255,1) !important; }
.dir-layout .ghost-card { border:1.5px dashed #C9D4E4 !important; background:linear-gradient(180deg,rgba(255,255,255,0.98),rgba(248,250,252,0.94)) !important; box-shadow:0 14px 32px rgba(15,23,42,0.04),inset 0 1px 0 rgba(255,255,255,0.98) !important; }
.dir-layout .ghost-card:hover { border-color:rgba(124,58,237,0.60) !important; background:linear-gradient(180deg,rgba(255,255,255,1),rgba(250,245,255,0.96)) !important; box-shadow:0 20px 40px rgba(124,58,237,0.10),inset 0 1px 0 rgba(255,255,255,1) !important; color:var(--pro-accent-2) !important; }
.dir-layout .ghost-icon { width:44px; height:44px; background:linear-gradient(180deg,#FFFFFF,#F8FAFC); border:1px solid #E2E8F0; box-shadow:0 8px 16px rgba(15,23,42,0.06),inset 0 1px 0 rgba(255,255,255,0.98); }
.dir-layout .ghost-card:hover .ghost-icon { background:var(--pro-primary-bg); box-shadow:0 10px 22px rgba(91,33,182,0.22); }
.dir-layout .rc-icon-wrap { width:48px !important; height:48px !important; border-radius:16px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,0.30),0 10px 20px rgba(15,23,42,0.08) !important; }
.dir-layout .theme-contact .rc-icon-wrap { background:linear-gradient(135deg,#4F8FF8,#4F46E5) !important; }
.dir-layout .theme-goods .rc-icon-wrap   { background:linear-gradient(135deg,#10B981,#059669) !important; }
.dir-layout .theme-tag .rc-icon-wrap     { background:linear-gradient(135deg,#8B5CF6,#5B21B6) !important; }
.dir-layout .rc-badge  { border-radius:999px !important; padding:5px 10px !important; letter-spacing:0.08em !important; font-weight:850 !important; }
.dir-layout .theme-contact .rc-badge { background:linear-gradient(180deg,#FFFFFF,#EFF6FF) !important; color:#3B4FE2 !important; border:1px solid #BFDBFE !important; }
.dir-layout .theme-goods .rc-badge   { background:linear-gradient(180deg,#FFFFFF,#ECFDF5) !important; color:#059669 !important; border:1px solid #A7F3D0 !important; }
.dir-layout .theme-tag .rc-badge     { background:linear-gradient(180deg,#FFFFFF,#FAF5FF) !important; color:#5B21B6 !important; border:1px solid rgba(216,180,254,0.56) !important; }
.dir-layout .rc-title  { color:var(--pro-text-1) !important; font-size:13pt !important; font-weight:900 !important; letter-spacing:-0.02em !important; }
.dir-layout .rc-meta-grid { display:flex !important; flex-direction:column !important; gap:7px !important; margin-bottom:16px !important; }
.dir-layout .rc-footer { margin-top:auto !important; padding-top:14px !important; border-top:1px solid #E8ECF4 !important; }
.dir-layout .rc-owner  { background:linear-gradient(180deg,#FFFFFF,#F8FAFC) !important; border:1px solid #DCE5F0 !important; color:#334155 !important; }
.dir-layout .rc-hover-actions { display:flex !important; gap:8px !important; background:rgba(255,255,255,0.98) !important; backdrop-filter:blur(14px) saturate(135%) !important; -webkit-backdrop-filter:blur(14px) saturate(135%) !important; border-top:1px solid #E5EAF2 !important; }
.dir-layout .hover-btn   { min-height:36px !important; border-radius:13px !important; font-weight:800 !important; }
.dir-layout .btn-note    { background:linear-gradient(180deg,#FFFFFF 0%,#FAF5FF 100%) !important; border:1px solid rgba(216,180,254,0.56) !important; color:#5B21B6 !important; }
.dir-layout .btn-note:hover { background:linear-gradient(180deg,#FFFFFF 0%,#F4EDFF 100%) !important; border-color:rgba(167,139,250,0.72) !important; color:#4C1D95 !important; }
.dir-layout .btn-ncr   { background:linear-gradient(180deg,#FFFFFF 0%,#FEF2F2 100%) !important; border:1px solid #FECACA !important; color:#B91C1C !important; }
.dir-layout .btn-ncr:hover { border-color:#FCA5A5 !important; }
.dir-layout .btn-cal   { background:linear-gradient(180deg,#FFFFFF 0%,#F3F0FF 100%) !important; border:1px solid #DDD6FE !important; color:#4338CA !important; }
.dir-layout .btn-cal:hover { border-color:#C4B5FD !important; color:#3730A3 !important; }



/* ── MOMENTUM LANE  (tags.php)  ─────────────────────────────────────────
   Trend chip + streak + smart insights. A narrow horizontal band that
   sits between the Command Center hero and the dashboard/control-center.
   Composed of three cards in a 1·1·2 grid. Mobile rules live in §25. */

.ml-lane {
    display:grid;
    grid-template-columns:1fr 1fr 2fr;
    gap:14px;
    margin:-8px 0 24px 0;
    padding:14px;
    border-radius:20px;
    background:linear-gradient(135deg, rgba(124,58,237,0.03) 0%, rgba(59,130,246,0.03) 50%, rgba(16,185,129,0.03) 100%);
    border:1px solid rgba(226,232,240,0.6);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.8);
    position:relative; overflow:hidden;
}
.ml-lane::before {
    content:"";
    position:absolute;
    top:0; left:-100%; right:0; height:1px;
    background:linear-gradient(90deg, transparent, #7C3AED, transparent);
    animation:ml-sweep 6s ease-in-out infinite;
}
@keyframes ml-sweep {
    0%, 100% { left:-100%; }
    50%      { left:100%; }
}

/* ─── Trend & Streak cards (shared) ─── */
.ml-card {
    position:relative;
    display:flex; align-items:center; gap:12px;
    padding:12px 16px; border-radius:14px;
    background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(252,252,253,0.92));
    border:1px solid rgba(226,232,240,0.8);
    box-shadow:0 4px 12px rgba(15,23,42,0.04), inset 0 1px 0 rgba(255,255,255,0.98);
    transition:transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease;
    overflow:hidden;
}
.ml-card:hover {
    transform:translateY(-1px);
    box-shadow:0 10px 22px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.98);
}
.ml-card-emoji {
    flex-shrink:0; font-size:24pt; line-height:1;
    width:48px; height:48px;
    display:flex; align-items:center; justify-content:center;
    background:#F8FAFC; border-radius:12px;
    border:1px solid rgba(226,232,240,0.8);
}
.ml-card-body  { min-width:0; flex-grow:1; }
.ml-card-value {
    font-size:16pt; font-weight:900; color:#0F172A;
    letter-spacing:-0.03em; line-height:1.1;
    font-variant-numeric:tabular-nums;
}
.ml-card-label {
    font-size:8pt; font-weight:800; color:#64748B;
    text-transform:uppercase; letter-spacing:0.08em;
    margin-top:2px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Trend tones */
.ml-trend.ml-trend-up   .ml-card-value { color:#15803D; }
.ml-trend.ml-trend-up   .ml-card-emoji { background:#F0FDF4; border-color:#BBF7D0; }
.ml-trend.ml-trend-down .ml-card-value { color:#B91C1C; }
.ml-trend.ml-trend-down .ml-card-emoji { background:#FEF2F2; border-color:#FECACA; }
.ml-trend.ml-trend-flat .ml-card-value { color:#475569; }
.ml-trend.ml-trend-flat .ml-card-emoji { background:#F1F5F9; border-color:#CBD5E1; }

/* Streak tones + sparkle flourish */
.ml-streak.ml-streak-strong .ml-card-value { color:#5B21B6; }
.ml-streak.ml-streak-strong .ml-card-emoji { background:#F5F3FF; border-color:#DDD6FE; }
.ml-streak.ml-streak-ok     .ml-card-value { color:#0F172A; }
.ml-streak.ml-streak-ok     .ml-card-emoji { background:#F0F9FF; border-color:#BAE6FD; }
.ml-streak.ml-streak-reset  .ml-card-value { color:#92400E; }
.ml-streak.ml-streak-reset  .ml-card-emoji { background:#FFFBEB; border-color:#FDE68A; }

.ml-streak-sparkles {
    position:absolute; inset:0;
    pointer-events:none; overflow:hidden;
}
.ml-streak-sparkles span {
    position:absolute;
    top:50%; left:50%;
    font-size:10pt; color:#A78BFA;
    opacity:0;
    animation:ml-sparkle 3s ease-in-out infinite;
    animation-delay:var(--d, 0s);
}
.ml-streak-sparkles span:nth-child(1) { top:20%; left:30%; }
.ml-streak-sparkles span:nth-child(2) { top:60%; left:60%; }
.ml-streak-sparkles span:nth-child(3) { top:30%; left:78%; }
@keyframes ml-sparkle {
    0%, 100% { opacity:0;   transform:scale(0.5) rotate(0deg); }
    50%      { opacity:0.9; transform:scale(1.2) rotate(180deg); }
}

/* ─── Smart Insights ─── */
.ml-insights {
    padding:10px 14px; border-radius:14px;
    background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,245,255,0.92));
    border:1px solid rgba(216,180,254,0.38);
    box-shadow:0 4px 12px rgba(15,23,42,0.04), inset 0 1px 0 rgba(255,255,255,0.98);
    display:flex; flex-direction:column; gap:6px;
    min-width:0;
}
.ml-insights-title {
    font-size:7.5pt; font-weight:900;
    color:#7C3AED;
    text-transform:uppercase; letter-spacing:0.14em;
    display:flex; align-items:center; gap:6px;
}
.ml-insights-title::before {
    content:"";
    width:6px; height:6px; border-radius:50%;
    background:#7C3AED;
    box-shadow:0 0 0 2px rgba(124,58,237,0.2);
    animation:cc-pulse-dot 2s ease-in-out infinite;
}
.ml-insights-list { display:flex; flex-direction:column; gap:4px; }
.ml-insight {
    display:inline-flex; align-items:center; gap:10px;
    padding:6px 10px; border-radius:10px;
    font-size:9.5pt; font-weight:700; line-height:1.35;
    opacity:0;
    animation:ml-ins-in 0.5s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes ml-ins-in {
    from { opacity:0; transform:translateX(-6px); }
    to   { opacity:1; transform:translateX(0); }
}
.ml-ins-emoji { font-size:11pt; flex-shrink:0; line-height:1; }
.ml-ins-text  {
    min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    letter-spacing:-0.005em;
}
.ml-ins-good { background:linear-gradient(90deg, rgba(240,253,244,0.9), rgba(240,253,244,0.5)); color:#14532D; border:1px solid rgba(187,247,208,0.6); }
.ml-ins-warn { background:linear-gradient(90deg, rgba(255,251,235,0.9), rgba(255,251,235,0.5)); color:#92400E; border:1px solid rgba(253,230,138,0.6); }
.ml-ins-bad  { background:linear-gradient(90deg, rgba(254,242,242,0.9), rgba(254,242,242,0.5)); color:#991B1B; border:1px solid rgba(254,202,202,0.6); }
.ml-ins-info { background:linear-gradient(90deg, rgba(240,249,255,0.9), rgba(240,249,255,0.5)); color:#1E3A8A; border:1px solid rgba(186,230,253,0.6); }

/* ── DIRECTORY-DASHBOARD CONTROLS & CHIPS  (tags.php)  ──────────────────
   Health-chip row, control-center selects (View/Sort), active-filter
   chip strip, and empty-state hero. Used only by tags.php. */

.dir-health-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }

.dir-controls-row { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dir-ctl-group {
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 4px 4px 12px;
    background:#F8FAFC; border:1px solid #E2E8F0; border-radius:12px;
    cursor:pointer; transition:all 0.15s ease;
}
.dir-ctl-group:hover { background:#FFF; border-color:#CBD5E1; box-shadow:0 4px 10px rgba(15,23,42,0.04); }
.dir-ctl-label {
    font-size:7.5pt; font-weight:900; color:#64748B;
    text-transform:uppercase; letter-spacing:0.08em;
}
.dir-ctl-select {
    border:none; outline:none; background:transparent;
    font-size:9.5pt; font-weight:700; color:#0F172A;
    cursor:pointer; padding:6px 8px; font-family:inherit;
}

.dir-active-filters {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    margin:-20px 0 24px 0; padding:10px 14px;
    background:linear-gradient(180deg,#FAF5FF 0%,#F5F3FF 100%);
    border:1px solid rgba(216,180,254,0.46);
    border-radius:14px;
}
.dir-filter-chip {
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 14px; border-radius:999px;
    background:#FFF; color:#5B21B6; font-size:9pt; font-weight:700;
    border:1px solid rgba(216,180,254,0.5);
    box-shadow:0 2px 6px rgba(124,58,237,0.06);
}
.dir-filter-chip-x {
    cursor:pointer; opacity:0.5; font-size:13pt; line-height:0.6;
    margin-left:-2px; padding:0 2px; border-radius:50%;
    transition:all 0.15s ease;
}
.dir-filter-chip-x:hover { opacity:1; color:#B91C1C; }

.dir-empty-hero {
    text-align:center; padding:70px 20px;
    background:linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%);
    border:2px dashed #CBD5E1; border-radius:24px;
    margin-bottom:30px;
}
.dir-empty-hero a { color:#7C3AED; text-decoration:none; font-weight:700; }
.dir-empty-hero a:hover { text-decoration:underline; }



/* ═══════════════════════════════════════════════════════════════════════
   §18  MONITOR                              (monitor.php)
   ───────────────────────────────────────────────────────────────────────
   Everything scoped under `#monitor_wrapper`. Dual-scroll split layout
   (left panel: folders/filters, right panel: report cards). Density
   tokens (--mon-*) let a single body class (mon-density-thin / -med /
   default=comfy) retune every gap, padding, and font-size at once.
   The "IMPRESS ME" header override at the end of this section is
   intentionally a second #mon_header rule (all !important); it wins the
   cascade to force equal-share flex behavior for the tabs + filter tray.
   Mobile rules live in §25.
   ═══════════════════════════════════════════════════════════════════════ */

#monitor_wrapper {
    max-width: 1600px; margin: 0 auto;
    padding: var(--mon-wrap-pad-t, 6px) var(--mon-wrap-pad-x, 12px) 12px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #0F172A;
    /* Dual-scroll layout: wrapper fills viewport minus style.php top nav.
       --mon-topbar-offset can be overridden inline if style.php header height changes. */
    --mon-topbar-offset: 78px;
    /* ── Density tokens (Thin / Med / Comfy) ──
       These CSS variables cascade into card, header, and panel styles so one
       body class toggle can retune every gap and padding at once. Default = Comfy. */
    --mon-card-pad-y: 14px;
    --mon-card-pad-x: 16px;
    --mon-card-gap:   8px;
    --mon-card-title: 10.5pt;
    --mon-hdr-pad-t:  4px;
    --mon-hdr-pad-b:  10px;
    --mon-hdr-mb:     10px;
    --mon-hdr-gap:    14px;
    --mon-split-gap:  16px;
    --mon-left-pad:   10px 6px;
    --mon-leaf-pad:   5px 10px;
    --mon-wrap-pad-t: 6px;
    --mon-wrap-pad-x: 12px;
    --mon-count-head-pad-y: 10px;
    --mon-count-head-mb:    10px;
    --mon-panel-pad-y:      6px;
    --mon-clearall-mb:      8px;
    display: flex; flex-direction: column;
    height: calc(100vh - var(--mon-topbar-offset));
    min-height: 500px;
    box-sizing: border-box;
}
/* Density overrides — tighten the TOP of both panes on Med + Thin only.
   Comfy (default above) is intentionally untouched per user spec. */
body.mon-density-med #monitor_wrapper {
    --mon-card-pad-y: 10px; --mon-card-pad-x: 13px; --mon-card-gap: 6px;
    --mon-card-title: 10pt;
    --mon-hdr-pad-t: 2px;  --mon-hdr-pad-b: 6px;  --mon-hdr-mb: 6px;  --mon-hdr-gap: 10px;
    --mon-split-gap: 10px; --mon-left-pad: 4px 6px;
    --mon-leaf-pad: 4px 9px;
    --mon-wrap-pad-t: 2px; --mon-wrap-pad-x: 10px;
    --mon-count-head-pad-y: 6px;  --mon-count-head-mb: 6px;
    --mon-panel-pad-y: 3px;       --mon-clearall-mb: 5px;
}
body.mon-density-thin #monitor_wrapper {
    --mon-card-pad-y: 7px;  --mon-card-pad-x: 10px; --mon-card-gap: 4px;
    --mon-card-title: 9.5pt;
    --mon-hdr-pad-t: 0px;  --mon-hdr-pad-b: 3px;  --mon-hdr-mb: 3px;  --mon-hdr-gap: 8px;
    --mon-split-gap: 6px;  --mon-left-pad: 2px 5px;
    --mon-leaf-pad: 3px 8px;
    --mon-wrap-pad-t: 0px; --mon-wrap-pad-x: 8px;
    --mon-count-head-pad-y: 4px;  --mon-count-head-mb: 4px;
    --mon-panel-pad-y: 2px;       --mon-clearall-mb: 3px;
}

/* ── Left-panel view switcher: All · KPM · Log · ⟨Collapse⟩ ──
   Tight 4-button group. No icons. When the left pane is collapsed
   (40px wide), ONLY the collapse toggle is visible — the 3 view tabs
   hide entirely so the user can still click the ≡ to expand. */
#mon_left_view_switch, .mon-lvs {
    display: flex; align-items: stretch; gap: 3px;
    padding: 3px;
    margin: 0 8px var(--mon-count-head-mb, 10px);
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 1px solid rgba(226,232,240,0.9);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15,23,42,0.04), inset 0 1px 0 rgba(255,255,255,0.98);
}
.mon-lvs-tab {
    flex: 1 1 0; min-width: 0;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 5px;
    padding: 6px 4px;
    border-radius: 8px;
    font-size: 9pt; font-weight: 800; color: #64748B;
    text-decoration: none; user-select: none;
    transition: all 0.15s cubic-bezier(0.16,1,0.3,1);
    border: 1px solid transparent;
    background: transparent;
    white-space: nowrap; overflow: hidden;
    cursor: pointer; font-family: inherit;
}
.mon-lvs-tab:hover { background: #F1F5F9; color: #0F172A; }
.mon-lvs-tab.active {
    background: linear-gradient(135deg, #7C3AED, #4C1D95);
    color: #FFF;
    box-shadow: 0 3px 10px rgba(124,58,237,0.28), inset 0 1px 0 rgba(255,255,255,0.22);
    font-weight: 900;
}
.mon-lvs-lbl { overflow: hidden; text-overflow: ellipsis; }
.mon-lvs-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 16px; padding: 0 5px;
    background: rgba(124,58,237,0.12); color: #6D28D9;
    border-radius: 100px;
    font-size: 7.5pt; font-weight: 900;
    flex-shrink: 0;
}
.mon-lvs-tab.active .mon-lvs-count {
    background: rgba(255,255,255,0.22); color: #FFF;
}
/* Collapse toggle — slightly smaller, icon-only */
.mon-lvs-collapse {
    flex: 0 0 30px;
    padding: 6px 0;
    color: #94A3B8;
}
.mon-lvs-collapse:hover { color: #6D28D9; background: #F5F3FF; }
.mon-lvs-collapse-icon { font-size: 13pt; line-height: 1; font-weight: 700; }

/* ── COLLAPSED LEFT PANE: only the expand button is visible ──
   Panel shrinks to 40px strip; everything but the collapse toggle is
   hidden. User clicks ≡ to expand again. */
#mon_split.left-collapsed #mon_left_view_switch {
    padding: 3px; margin: 0 2px 10px;
    background: transparent; border: none; box-shadow: none;
    gap: 0;
}
#mon_split.left-collapsed .mon-lvs-tab:not(.mon-lvs-collapse) { display: none; }
#mon_split.left-collapsed .mon-lvs-collapse {
    flex: 1 1 auto;
    background: linear-gradient(135deg, #7C3AED, #4C1D95);
    color: #FFF;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(124,58,237,0.25);
}
#mon_split.left-collapsed .mon-lvs-collapse:hover { background: linear-gradient(135deg, #8B5CF6, #5B21B6); }
#mon_split.left-collapsed .mon-lvs-collapse .mon-lvs-collapse-icon { font-size: 16pt; }
/* Hide every other left-panel widget when collapsed */
#mon_split.left-collapsed .mon-panel-header,
#mon_split.left-collapsed .mon-clearall,
#mon_split.left-collapsed .mon-folder,
#mon_split.left-collapsed .mon-bottom-toggle,
#mon_split.left-collapsed .mon-tags-toggle {
    display: none;
}

/* ── Bottom-of-panel toggles (List/Grid, Space, Tags) — consistent frame ── */
.mon-bottom-toggle {
    margin: 6px 8px 0; padding: 8px 12px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: #FAFBFD; border: 1px solid rgba(226,232,240,0.8); border-radius: 10px;
}
.mon-bottom-toggle-label {
    font-size: 7.5pt; font-weight: 800; color: #64748B; letter-spacing: 0.4px;
    text-transform: uppercase;
}
.mon-view-toggle-v2, .mon-density-pair {
    display: inline-flex; gap: 2px; background: #F1F5F9; border-radius: 8px; padding: 2px;
}
.mon-view-toggle-v2 a, .mon-density-pill {
    padding: 4px 10px; border-radius: 6px; font-size: 7.5pt; font-weight: 800;
    color: #64748B; cursor: pointer; user-select: none; text-decoration: none;
    display: inline-flex; align-items: center; gap: 4px;
}
.mon-view-toggle-v2 a.active, .mon-density-pill.active {
    background: linear-gradient(135deg, #7C3AED, #4C1D95); color: #FFF;
    box-shadow: 0 2px 4px rgba(124,58,237,0.22);
}

/* ── Combined header: Row 2 (tabs) + Row 3 (VIEW toggles) share one flex row ── */
#mon_header {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    gap: var(--mon-hdr-gap, 14px);
    flex-wrap: wrap; /* wraps to 2 rows on narrow screens */
    padding: var(--mon-hdr-pad-t, 4px) 2px var(--mon-hdr-pad-b, 10px);
    margin: 0 0 var(--mon-hdr-mb, 10px);
    border-bottom: 1px solid rgba(226,232,240,0.7);
}
#mon_top_tabs {
    display: flex; align-items: center; gap: 6px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    min-width: 0; flex-shrink: 0;
}
#mon_top_tabs::-webkit-scrollbar { display: none; }

.mon-ttab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 16px; border-radius: 100px; min-height: 34px; box-sizing: border-box;
    font-size: 9pt; font-weight: 700; cursor: pointer;
    background: #FFF; border: 1.5px solid rgba(203,213,225,0.7); color: #475569;
    transition: all 0.18s cubic-bezier(0.2,0.8,0.2,1);
    white-space: nowrap; flex-shrink: 0; user-select: none;
    text-decoration: none;
}
.mon-ttab:hover {
    border-color: rgba(124,58,237,0.4); color: #6D28D9;
    background: rgba(124,58,237,0.04);
    transform: translateY(-1px);
}
.mon-ttab.active {
    background: linear-gradient(135deg, #7C3AED, #4C1D95);
    color: #FFF; border-color: #4C1D95;
    box-shadow: 0 4px 12px rgba(124,58,237,0.25);
    /* Stretched-out prominence for the active tab — indicates "you are
       here" at a glance and anchors the filter tray visually. */
    flex-grow: 1;
    min-width: 180px;
    padding: 10px 24px;
    font-size: 10.5pt;
    font-weight: 800;
    letter-spacing: 0.01em;
    justify-content: flex-start;
    border-radius: 100px;
}
.mon-ttab.active img { height: 15px; }
.mon-ttab .mon-ttab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 18px; padding: 0 6px; border-radius: 100px;
    background: #EF4444; color: #FFF; font-size: 8pt; font-weight: 800;
}
.mon-ttab.active .mon-ttab-badge { background: rgba(255,255,255,0.22); }

/* ── split layout: both panels scroll independently on desktop ── */
#mon_split {
    flex: 1 1 auto; min-height: 0; /* min-height:0 is the key that enables flex-child scrolling */
    display: grid;
    /* Three columns: [LEFT][RESIZER][RIGHT]. Left width is driven by a CSS
       custom property that the drag handler updates. Default 280px. */
    grid-template-columns: var(--mon-left-w, 280px) 6px 1fr;
    gap: 0;
    overflow: hidden;
}
#mon_split.left-collapsed { grid-template-columns: 40px 0 1fr; }
#mon_split.left-collapsed #mon_resizer {
    /* CRITICAL: use visibility (not display:none). `display:none` removes the
       resizer from the grid entirely, which causes #mon_right to auto-flow
       LEFT into the 0-width middle column and vanish. visibility:hidden keeps
       the resizer in layout so grid columns stay aligned. */
    visibility: hidden;
    pointer-events: none;
}

/* ── Resizer handle ──
   Thin vertical strip that reveals a purple grip on hover. Cursor changes
   to horizontal-resize and a .is-resizing class on <body> disables text
   selection + pointer events on the panels while dragging. */
#mon_resizer {
    height: 100%;
    background: transparent;
    cursor: col-resize;
    position: relative;
    user-select: none;
    transition: background 0.15s ease;
}
#mon_resizer::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 2px; height: 32px;
    background: rgba(203,213,225,0.6);
    border-radius: 2px;
    transition: background 0.15s ease, height 0.15s ease;
}
#mon_resizer:hover { background: rgba(124,58,237,0.05); }
#mon_resizer:hover::before { background: #7C3AED; height: 48px; }
#mon_resizer:focus { outline: none; }
#mon_resizer:focus::before { background: #7C3AED; height: 48px; box-shadow: 0 0 0 2px rgba(124,58,237,0.25); }
body.mon-is-resizing { cursor: col-resize !important; user-select: none; }
body.mon-is-resizing #mon_left, body.mon-is-resizing #mon_right { pointer-events: none; }

/* Desktop: internal scroll on both panels */
#mon_left, #mon_right {
    height: 100%; overflow-y: auto; min-width: 0;
    scrollbar-width: thin;
}
#mon_left::-webkit-scrollbar,
#mon_right::-webkit-scrollbar { width: 6px; }
#mon_left::-webkit-scrollbar-thumb,
#mon_right::-webkit-scrollbar-thumb { background: rgba(203,213,225,0.6); border-radius: 3px; }
#mon_left::-webkit-scrollbar-thumb:hover,
#mon_right::-webkit-scrollbar-thumb:hover { background: rgba(124,58,237,0.5); }

/* The right-panel sticky header (Reports / count / List-Grid toggle) stays visible
   while cards scroll below it. */
.mon-right-header {
    position: sticky; top: 0; z-index: 5;
    background: var(--surface-app, #F8FAFC);
    padding: 6px 2px;
}

/* ── MOBILE / narrow: revert to a single column with the natural page scroll ── */

/* ── LEFT PANEL ── */
#mon_left {
    background: #FFF;
    border: 1px solid rgba(226,232,240,0.8);
    border-radius: 14px;
    padding: var(--mon-left-pad, 10px 6px);
    box-shadow: 0 2px 12px rgba(15,23,42,0.04);
    /* Desktop height + overflow come from the #mon_left rule above; keep cosmetic here. */
}

.mon-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--mon-panel-pad-y, 6px) 10px var(--mon-panel-pad-y, 6px);
    font-size: 7.5pt; font-weight: 900;
    letter-spacing: 0.8px; color: #94A3B8; text-transform: uppercase;
}
.mon-panel-header .mon-collapse-toggle {
    cursor: pointer; color: #CBD5E1; font-size: 10pt; padding: 2px 6px;
    border-radius: 6px; user-select: none;
}
.mon-panel-header .mon-collapse-toggle:hover { background: rgba(124,58,237,0.08); color: #7C3AED; }

.mon-folder { margin-bottom: 2px; }
.mon-folder-head {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; cursor: pointer;
    border-radius: 8px; font-size: 9pt; font-weight: 700; color: #1E293B;
    user-select: none;
    transition: background 0.15s ease;
}
.mon-folder-head:hover { background: rgba(241,245,249,0.7); }
.mon-folder-chev {
    width: 12px; height: 12px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 8pt; color: #94A3B8; transition: transform 0.2s ease;
}
.mon-folder.open > .mon-folder-head .mon-folder-chev { transform: rotate(90deg); color: #7C3AED; }
.mon-folder-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; }
.mon-folder-label { flex: 1; }
.mon-folder-count {
    background: #F1F5F9; color: #64748B; padding: 1px 8px;
    border-radius: 20px; font-size: 7.5pt; font-weight: 800;
}

.mon-folder-body { display: none; padding: 2px 0 6px 8px; }
.mon-folder.open > .mon-folder-body { display: block; }

.mon-leaf {
    display: flex; align-items: center; gap: 8px; padding: 5px 10px;
    border-radius: 7px; cursor: pointer; font-size: 8.5pt; color: #334155;
    text-decoration: none; transition: all 0.15s ease;
    position: relative;
}
.mon-leaf:hover { background: rgba(124,58,237,0.07); color: #6D28D9; }
.mon-leaf.active {
    background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(168,85,247,0.06));
    color: #6D28D9; font-weight: 700;
}
.mon-leaf.active::before {
    content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px;
    background: linear-gradient(180deg, #7C3AED, #A855F7); border-radius: 0 4px 4px 0;
}
.mon-leaf-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #CBD5E1; flex-shrink: 0;
}
.mon-leaf-icon { width: 14px; height: 14px; opacity: 0.75; flex-shrink: 0; }
.mon-leaf-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon-leaf-count {
    font-size: 7.5pt; color: #94A3B8; font-weight: 700;
    padding: 0 6px; min-width: 16px; text-align: center;
}
.mon-leaf.drop-target { background: rgba(124,58,237,0.18); outline: 2px dashed #7C3AED; outline-offset: -2px; }

/* Per-leaf ✕ to remove an active filter (visible only when .active) */
.mon-leaf .mon-leaf-x {
    display: none; margin-left: 4px; width: 18px; height: 18px;
    border-radius: 50%; align-items: center; justify-content: center;
    background: rgba(124,58,237,0.15); color: #6D28D9; font-size: 10pt;
    font-weight: 800; cursor: pointer; flex-shrink: 0;
    transition: all 0.15s ease;
}
.mon-leaf.active .mon-leaf-x { display: inline-flex; }
.mon-leaf .mon-leaf-x:hover { background: #DC2626; color: #FFF; }

/* ── Per-leaf ⊖ exclude button (ask #5) ──
   Sits to the LEFT of the count. Faint by default; glows red on hover.
   When the leaf is in .excluded state, the button glows red (active) and
   the rest of the leaf dims to a strikethrough muted style.
   Clicking the ⊖ always toggles the exclusion regardless of leaf state. */
.mon-leaf .mon-leaf-exclude {
    display: inline-flex;
    width: 18px; height: 18px;
    border-radius: 50%;
    align-items: center; justify-content: center;
    background: transparent;
    color: #CBD5E1;
    font-size: 11pt; font-weight: 800;
    cursor: pointer; flex-shrink: 0;
    margin-right: 2px; margin-left: auto;  /* push toward right side, near count */
    transition: all 0.12s ease;
    user-select: none;
}
.mon-leaf:hover .mon-leaf-exclude { color: #94A3B8; }
.mon-leaf .mon-leaf-exclude:hover {
    background: #FEE2E2; color: #DC2626; transform: scale(1.15);
}
/* Excluded state: leaf dims, text strikethrough, exclude button glows red */
.mon-leaf.excluded {
    opacity: 0.55;
    background: #FEF2F2;
    border-color: rgba(220,38,38,0.25) !important;
}
.mon-leaf.excluded .mon-leaf-label {
    text-decoration: line-through;
    color: #B91C1C;
}
.mon-leaf.excluded .mon-leaf-count {
    color: #B91C1C;
    background: rgba(220,38,38,0.1);
    border-radius: 100px;
}
.mon-leaf.excluded .mon-leaf-exclude {
    background: #DC2626; color: #FFF;
}
.mon-leaf.excluded .mon-leaf-exclude:hover {
    background: #991B1B; transform: scale(1.1);
}
/* An excluded leaf shouldn't also look "active" — exclude wins visually */
.mon-leaf.excluded.active { background: #FEF2F2; }
.mon-leaf.excluded .mon-leaf-x { display: none !important; }

/* ── Active EXCLUSIONS chip bar (ask #5 follow-up) ──
   Shown between mon_header and mon_split when any exclusion is active.
   Red-tinted pills that the user can click (or click the ✕) to remove the
   exclusion. Whole pill is clickable so users don't have to aim for the X. */
#mon_exclusions {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    padding: 8px 14px 10px;
    background: linear-gradient(180deg, rgba(254,226,226,0.3), transparent);
    border-top: 1px solid rgba(254,202,202,0.4);
}
.mon-exc-label {
    font-size: 7.5pt; font-weight: 900; letter-spacing: 1px;
    color: #991B1B; text-transform: uppercase;
    padding-right: 4px;
}
.mon-exc-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px 4px 8px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 100px;
    font-size: 8.5pt; font-weight: 800;
    color: #991B1B;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(220,38,38,0.08);
}
.mon-exc-chip:hover {
    background: #DC2626; color: #FFF;
    border-color: #B91C1C;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(220,38,38,0.25);
}
.mon-exc-chip:hover .mon-exc-minus,
.mon-exc-chip:hover .mon-exc-x { color: #FFF; }
.mon-exc-minus {
    font-size: 11pt; font-weight: 900; line-height: 1;
    color: #DC2626;
}
.mon-exc-name {
    max-width: 200px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}
.mon-exc-x {
    font-size: 9pt; font-weight: 800;
    color: #B91C1C;
    margin-left: 2px;
}

/* Clear-All banner inside the left panel (only when filters active) */
.mon-clearall {
    margin: 4px 8px var(--mon-clearall-mb, 10px); padding: 8px 12px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: linear-gradient(135deg, rgba(239,68,68,0.08), rgba(220,38,38,0.04));
    border: 1px solid rgba(239,68,68,0.25); border-radius: 10px;
}
.mon-clearall-label { font-size: 8pt; font-weight: 800; color: #991B1B; letter-spacing: 0.3px; }
.mon-clearall-btn {
    padding: 4px 10px; border-radius: 8px; cursor: pointer;
    background: #EF4444; color: #FFF; font-size: 7.5pt; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.5px; border: none;
}
.mon-clearall-btn:hover { background: #B91C1C; }

/* ── ROW 3: filter-tray bar (My/Shared, Active/Archived, Public/Private, Clear) ── */
/* No padding / margin / border here — all of that lives on #mon_header.
   Keeping mon_tray a pure flex strip is what makes it vertically align
   pixel-perfect with mon_top_tabs. */
#mon_tray {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 0; margin: 0; border: none;
}
.mon-tray-group { display: inline-flex; align-items: center; background: #F8FAFC; border: 1px solid rgba(226,232,240,0.8); border-radius: 10px; padding: 3px; gap: 2px; min-height: 34px; box-sizing: border-box; }
.mon-tray-pill {
    padding: 5px 11px; border-radius: 7px; cursor: pointer;
    font-size: 8pt; font-weight: 700; color: #64748B;
    transition: all 0.15s ease; user-select: none; white-space: nowrap;
}
.mon-tray-pill:hover { color: #6D28D9; background: rgba(124,58,237,0.06); }
.mon-tray-pill.active {
    background: linear-gradient(135deg, #7C3AED, #4C1D95); color: #FFF;
    box-shadow: 0 2px 6px rgba(124,58,237,0.22);
}
.mon-tray-label {
    font-size: 7.5pt; font-weight: 900; letter-spacing: 0.6px; color: #94A3B8;
    text-transform: uppercase; padding: 0 4px 0 8px; align-self: center;
}
.mon-tray-clear {
    margin-left: auto; padding: 5px 12px; border-radius: 100px;
    background: #FEF2F2; color: #991B1B; border: 1px solid #FCA5A5;
    font-size: 7.5pt; font-weight: 800; cursor: pointer;
}
.mon-tray-clear:hover { background: #EF4444; color: #FFF; border-color: #B91C1C; }

.mon-show-more {
    display: block; padding: 5px 10px; font-size: 8pt; color: #7C3AED;
    cursor: pointer; text-align: center; font-weight: 700;
}
.mon-show-more:hover { text-decoration: underline; }

/* ── RIGHT PANEL ── */
#mon_right { min-width: 0; }

.mon-right-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 14px; margin-bottom: 10px;
    background: #FFF; border: 1px solid rgba(226,232,240,0.7); border-radius: 12px;
    box-shadow: 0 2px 10px rgba(15,23,42,0.03);
}
.mon-right-header-title { font-size: 10pt; font-weight: 800; color: #1E293B; display: flex; align-items: center; gap: 10px; }
.mon-right-header-title .mon-count-chip {
    background: rgba(124,58,237,0.1); color: #6D28D9; padding: 2px 10px;
    border-radius: 100px; font-size: 8.5pt; font-weight: 800;
}
.mon-view-toggle { display: inline-flex; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 10px; padding: 3px; gap: 2px; }

.mon-view-toggle a {
    padding: 5px 10px; border-radius: 7px; cursor: pointer; color: #64748B;
    font-size: 8pt; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
}
.mon-view-toggle a.active { background: linear-gradient(135deg, #7C3AED, #4C1D95); color: #FFF; box-shadow: 0 2px 6px rgba(124,58,237,0.25); }

/* ── LIST VIEW ── */
.mon-list { display: flex; flex-direction: column; gap: var(--mon-card-gap, 8px); }

.mon-card {
    position: relative;
    display: grid; grid-template-columns: 4px 42px 1fr auto; gap: var(--mon-hdr-gap, 14px);
    align-items: flex-start;
    background: #FFF; border: 1px solid rgba(226,232,240,0.8);
    border-radius: 12px;
    padding: var(--mon-card-pad-y, 14px) var(--mon-card-pad-x, 16px) var(--mon-card-pad-y, 14px) 0;
    box-shadow: 0 2px 8px rgba(15,23,42,0.03);
    transition: all 0.2s cubic-bezier(0.2,0.8,0.2,1);
    cursor: pointer; overflow: hidden;
}
.mon-card:hover {
    transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,0.08);
    border-color: rgba(124,58,237,0.3);
}
.mon-card.pastdue {
    background: linear-gradient(180deg, #FFF, #FFFBEB 60%);
    border-color: #FCD34D;
}
.mon-card.pastdue::after {
    content: 'PAST DUE'; position: absolute; top: 8px; left: 56px;
    font-size: 6.5pt; font-weight: 900; letter-spacing: 0.8px;
    color: #B45309; background: #FEF3C7; padding: 2px 8px; border-radius: 100px;
    border: 1px solid #FCD34D; z-index: 2;
    pointer-events: none;
}

/* Role border strip (left edge) */
.mon-card-stripe {
    width: 4px; align-self: stretch; border-radius: 2px 0 0 2px;
    background: var(--mon-stripe-color, #CBD5E1);
}

/* Avatar circle */
.mon-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #FFF; font-size: 10pt; font-weight: 800;
    background: var(--mon-avatar-bg, #7C3AED);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    flex-shrink: 0;
}

/* Body column */
.mon-card-body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }

.mon-card-title-row {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    font-weight: 800; color: #0F172A;
}
.mon-card-title { font-size: var(--mon-card-title, 10.5pt); line-height: 1.3; }
.mon-card-type-label {
    font-size: 7.5pt; font-weight: 800; letter-spacing: 0.6px;
    color: #94A3B8; text-transform: uppercase;
}
.mon-card-type-label.muted { color: #CBD5E1; }
.mon-card-custom-title { font-style: normal; color: #4C1D95; }
.mon-card-custom-title.placeholder { color: #CBD5E1; font-weight: 600; font-style: italic; }
.mon-card-custom-title[contenteditable="true"] {
    outline: none; border-radius: 6px; padding: 3px 8px; margin: -3px -8px;
    cursor: text; transition: all 0.12s ease;
    border: 1px dashed transparent;
    min-width: 120px; display: inline-block;
}
.mon-card-custom-title[contenteditable="true"]:hover {
    border-color: rgba(124,58,237,0.35); background: rgba(124,58,237,0.05);
}
.mon-card-custom-title[contenteditable="true"]:focus {
    border-color: #7C3AED; border-style: solid;
    background: #FFF; color: #0F172A; font-style: normal;
    box-shadow: 0 2px 8px rgba(124,58,237,0.15);
    min-width: 200px;
}

.mon-card-preview {
    color: #475569; line-height: 1.5;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
}

/* ── Calendar banner on Calendar Away / Calendar Event cards (ask #1) ── */
.mon-card-cal-banner {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 6px 10px; margin: 2px 0 4px;
    background: linear-gradient(135deg, #EEF2FF, #F8FAFF);
    border: 1px solid rgba(124,58,237,0.18); border-radius: 8px;
    font-size: 8.5pt; font-weight: 600; color: #4C1D95;
}
.mon-cal-icon { font-size: 10pt; }
.mon-cal-date { font-weight: 800; }
.mon-cal-days { background: rgba(124,58,237,0.14); color: #6D28D9; padding: 1px 8px; border-radius: 100px; font-size: 7.5pt; font-weight: 800; }
.mon-cal-who  { color: #64748B; font-weight: 700; }
.mon-cal-badge {
    padding: 1px 8px; border-radius: 100px; font-size: 7.5pt; font-weight: 800;
    letter-spacing: 0.4px; text-transform: uppercase;
}
.mon-cal-badge.pay   { background: #DCFCE7; color: #166534; border: 1px solid #86EFAC; }
.mon-cal-badge.unpay { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }
.mon-cal-reason {
    color: #64748B; font-size: 8pt; font-weight: 600; font-style: italic;
    max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mon-card-footer {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 8pt; color: #64748B; margin-top: 2px;
}
.mon-card-footer .mon-meta-item { display: inline-flex; align-items: center; gap: 4px; }
.mon-card-footer .mon-meta-item.warn { color: #B45309; font-weight: 700; }

.mon-card-tags {
    display: flex; gap: 4px; flex-wrap: wrap;
    grid-column: 3 / 5;     /* span across body+actions in the card grid */
    margin-top: 6px;
}
.mon-card-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: 100px; font-size: 7.5pt; font-weight: 700;
    /* Fallback for browsers without CSS color-mix() support */
    background: rgba(124,58,237,0.1);
    color: #6D28D9;
    border: 1px solid rgba(124,58,237,0.22);
    /* Modern browsers: mix per-chip color */
    background: color-mix(in srgb, var(--chip-color, #7C3AED) 12%, #FFF);
    color: color-mix(in srgb, var(--chip-color, #7C3AED) 85%, #000);
    border-color: color-mix(in srgb, var(--chip-color, #7C3AED) 30%, #FFF);
    white-space: nowrap;
}
/* Body class lets the left-panel toggle hide all tag-chip rows at once */
body.mon-hide-tags [data-card-tags] { display: none !important; }

/* Small-variant action buttons for grid view (corner of card head) */
.mon-grid-actions { display: inline-flex; gap: 4px; flex-shrink: 0; }
.mon-action-btn.mon-action-sm { width: 24px; height: 24px; font-size: 11pt; }

/* Grid title wrapper — gives the editable span breathing room */
.mon-grid-title-wrap { font-size: 10pt; margin-top: 3px; }
.mon-grid-title-wrap .mon-card-custom-title { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; }

/* Left-panel "Show Tags" toggle footer */
.mon-tags-toggle {
    margin: 10px 8px 4px; padding: 8px 12px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: #FAFBFD; border: 1px solid rgba(226,232,240,0.8); border-radius: 10px;
}
.mon-tags-toggle-label {
    font-size: 7.5pt; font-weight: 800; color: #64748B; letter-spacing: 0.4px;
    text-transform: uppercase; display: flex; align-items: center; gap: 6px;
}
.mon-tags-toggle-pair { display: inline-flex; gap: 2px; background: #F1F5F9; border-radius: 8px; padding: 2px; }
.mon-tags-toggle-pill {
    padding: 3px 9px; border-radius: 6px; font-size: 7.5pt; font-weight: 800;
    color: #64748B; cursor: pointer; user-select: none;
}
.mon-tags-toggle-pill.active {
    background: linear-gradient(135deg, #7C3AED, #4C1D95); color: #FFF;
    box-shadow: 0 2px 4px rgba(124,58,237,0.22);
}

/* Right-side action column (favorite / snooze / color) */
.mon-card-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-right: 6px; }
.mon-action-btn {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; background: #F8FAFC; border: 1px solid rgba(226,232,240,0.8);
    color: #94A3B8; transition: all 0.15s ease;
}
.mon-action-btn:hover { background: #FFF; color: #7C3AED; border-color: rgba(124,58,237,0.4); }
.mon-action-btn.active { background: #FEF3C7; border-color: #FCD34D; color: #B45309; }

/* Hide-from-view button — neutral grey idle, muted red on hover so the
   "remove" intent reads clearly and doesn't collide with favorite/snooze. */
.mon-action-btn.mon-hide-btn {
    color: #94A3B8; font-size: 14pt; font-weight: 700; line-height: 0;
    padding-bottom: 2px;
}
.mon-action-btn.mon-hide-btn:hover {
    background: #FEF2F2; color: #B91C1C; border-color: rgba(239,68,68,0.4);
}

/* Dragging state */
.mon-card.dragging { opacity: 0.5; transform: scale(0.98); }

/* ── GRID VIEW ── 
.mon-grid {
    display: grid; 
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; 
    gap: 16px;
}*/
/* ── GRID VIEW (Strict Two-Column Layout) ── */
.mon-grid {
    display: grid; 
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; 
    gap: 16px; /* Slightly wider gap to let the two columns breathe */
}
.mon-grid-card {
    position: relative;
    background: #FFF; border: 1px solid rgba(226,232,240,0.8);
    border-radius: 14px; overflow: hidden;
    cursor: pointer; transition: all 0.2s cubic-bezier(0.2,0.8,0.2,1);
    box-shadow: 0 2px 8px rgba(15,23,42,0.03);
    display: flex; flex-direction: column;
    min-height: 180px;
}
.mon-grid-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(15,23,42,0.08); }
.mon-grid-card .mon-card-stripe {
    position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
}
.mon-grid-card .mon-grid-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 14px 8px 18px;
}
.mon-grid-card .mon-grid-body {
    padding: 2px 16px 12px 18px; flex: 1;
    color: #475569; line-height: 1.5;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5;
}
.mon-grid-card .mon-grid-footer {
    padding: 10px 14px; border-top: 1px solid rgba(226,232,240,0.7);
    display: flex; align-items: center; justify-content: space-between;
    font-size: 8pt; color: #64748B; background: #FAFBFD;
}
.mon-grid-card.pastdue { background: linear-gradient(180deg, #FFFBEB, #FFF); border-color: #FCD34D; }

/* ── EMPTY STATE ── */
.mon-empty {
    text-align: center; padding: 60px 20px; color: #94A3B8;
    background: #FFF; border-radius: 14px; border: 1px dashed rgba(203,213,225,0.8);
}
.mon-empty-icon { font-size: 36pt; opacity: 0.4; margin-bottom: 8px; }
.mon-empty-title { font-size: 12pt; font-weight: 800; color: #475569; margin-bottom: 4px; }
.mon-empty-sub { font-size: 9pt; color: #94A3B8; }

/* ── PAGINATION ── */
.mon-pagination {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 20px 0 4px; flex-wrap: wrap;
}
.mon-page-btn {
    min-width: 34px; height: 34px; padding: 0 12px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; background: #FFF; border: 1px solid rgba(226,232,240,0.8);
    color: #475569; font-size: 8.5pt; font-weight: 700; cursor: pointer;
    text-decoration: none; transition: all 0.15s ease;
}
.mon-page-btn:hover { border-color: rgba(124,58,237,0.4); color: #6D28D9; }
.mon-page-btn.active { background: linear-gradient(135deg, #7C3AED, #4C1D95); color: #FFF; border-color: #4C1D95; box-shadow: 0 4px 12px rgba(124,58,237,0.25); }
.mon-page-btn.disabled { opacity: 0.4; pointer-events: none; }

/* (drawer behavior removed — mobile layout reflows left panel to top strip instead) */

/* ═══════════════════════════════════════════════════════════════════════
   FINAL POLISH — purely visual, zero logic impact.
   1. Stagger-fade cards in on load: each card starts slightly offset, animates
      to rest. CSS-only via nth-child delays, no JS.
   2. Drop-target glow on Topic/Report leaves while dragging a card over them.
   3. Gentle elevation on card hover so they feel clickable.
   4. prefers-reduced-motion: honor the OS setting — kills all motion.
   ══════════════════════════════════════════════════════════════════════ */

@keyframes mon-card-rise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mon-card, .mon-grid-card {
    animation: mon-card-rise 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
/* Stagger first 10 cards; after that delays saturate so pagination stays snappy. */
.mon-card:nth-child(1),  .mon-grid-card:nth-child(1)  { animation-delay: 0.00s; }
.mon-card:nth-child(2),  .mon-grid-card:nth-child(2)  { animation-delay: 0.03s; }
.mon-card:nth-child(3),  .mon-grid-card:nth-child(3)  { animation-delay: 0.06s; }
.mon-card:nth-child(4),  .mon-grid-card:nth-child(4)  { animation-delay: 0.09s; }
.mon-card:nth-child(5),  .mon-grid-card:nth-child(5)  { animation-delay: 0.12s; }
.mon-card:nth-child(6),  .mon-grid-card:nth-child(6)  { animation-delay: 0.15s; }
.mon-card:nth-child(7),  .mon-grid-card:nth-child(7)  { animation-delay: 0.18s; }
.mon-card:nth-child(8),  .mon-grid-card:nth-child(8)  { animation-delay: 0.21s; }
.mon-card:nth-child(9),  .mon-grid-card:nth-child(9)  { animation-delay: 0.24s; }
.mon-card:nth-child(n+10), .mon-grid-card:nth-child(n+10) { animation-delay: 0.27s; }

/* Soft lift on card hover — 1px elevate + slight shadow expansion */
.mon-card:hover, .mon-grid-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(15,23,42,0.08), 0 1px 3px rgba(15,23,42,0.04);
}

/* Drop-target glow — fires while dragging a card over a Topic/Report leaf.
   The existing drop-target class is set by the dragover handler; we already
   style it above (outline dashed); this adds a breathing glow underneath so
   it's more obvious which leaf will catch the drop. */
.mon-leaf.drop-target {
    animation: mon-leaf-pulse 1.1s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(124,58,237,0.35);
}
@keyframes mon-leaf-pulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(124,58,237,0.35); }
    50%      { box-shadow: 0 0 0 6px rgba(124,58,237,0.00); }
}

/* Count-chip subtle pop when values update (purely decorative; triggered
   whenever content re-renders, which is on every nav anyway). */
.mon-lvs-tab.active .mon-lvs-count {
    animation: mon-count-pop 0.45s cubic-bezier(0.2, 1.4, 0.3, 1) both;
}
@keyframes mon-count-pop {
    from { transform: scale(0.6); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* Accessibility: users who set OS "reduce motion" get no animations at all.
   Leaves static CSS in place; just disables transitions + keyframes. */










/* =================================================================
   THE "IMPRESS ME" FLUID HEADER ENGINE (PASTE AT ABSOLUTE BOTTOM)
   ================================================================= */

/* 1. The Master Container */
#mon_header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 10px !important;
}

/* 2. The Two Main Groups (Tabs vs Filters) */
#mon_top_tabs, #mon_tray {
    display: flex !important;
    /* 350px is the math trigger: 
       If screen  700px, they share 1 row. 
       If screen  700px, they break into 2 rows and stretch to 100% */
    flex: 1 1 350px !important; 
    gap: 8px !important;
    min-width: 0 !important;
    /* Kill the old mobile swipe rails so they can wrap properly */
    overflow-x: visible !important; 
    flex-wrap: wrap !important; 
}

/* 3. Group 1 Inner Buttons (Reports / Approvals / Unread) */
.mon-ttab {
    flex: 1 1 0 !important; /* Forces all buttons to stretch equally to fill the row */
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    min-width: max-content !important; /* Prevents icon and text from squishing */
}

/* 4. Group 2 Inner Wrappers (The Filter Pills) */
#mon_tray {
    justify-content: flex-end !important; /* Right-aligns when on Row 1 */
}

.mon-tray-group {
    display: flex !important;
    flex: 1 1 auto !important; /* Stretch the segmented groups */
    gap: 2px !important;
}

.mon-tray-pill {
    flex: 1 1 0 !important; /* Forces pills inside a group to stretch equally */
    justify-content: center !important;
    text-align: center !important;
    padding: 6px 12px !important;
    white-space: nowrap !important;
}

/* 5. The Clear Button */
.mon-tray-clear {
    flex: 1 1 auto !important; /* Stretches nicely if it drops to its own line on super small screens */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
}


/* ───────────────────────────────────────────────────────────────────────
   §17  MODAL & EDITOR SYSTEM
   ─────────────────────────────────────────────────────────────────────── */
#input_container {
    margin:0 !important; width:100vw !important; left:0 !important;
    position:fixed !important; top:0 !important; height:100vh !important; z-index:9999999 !important;
    overflow:hidden !important; background:rgba(15,23,42,0.35) !important;
    backdrop-filter:blur(10px) saturate(120%) !important;
    -webkit-backdrop-filter:blur(10px) saturate(120%) !important;
    overscroll-behavior:contain !important;
    transition: background 0.3s ease;
}
#input_new_div {
    position:absolute !important; top:0 !important; left:0 !important;
    transform:none !important; display:flex; flex-direction:column;
    width:100% !important; height:100% !important; max-height:none !important;
    min-width:0; min-height:0; resize:none;
    background-color:#FFF; border-radius:0 !important;
    box-shadow:none !important; border:none !important;
    padding:0; overflow:hidden; overscroll-behavior:contain !important;
}
.modal-maximized {
    position:fixed !important; top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
    width:100% !important; height:100dvh !important; margin:0 !important; border-radius:0 !important;
    z-index:20000000 !important; transform:none !important; opacity:1 !important;
    overflow:hidden !important; /* Container locks scroll — canvas scrolls internally */
}
.modal-closing-max { position:fixed !important; top:0 !important; left:0 !important; width:100% !important; height:100% !important; margin:0 !important; border-radius:0 !important; z-index:20000000 !important; }
body.modal-open-max { overflow:hidden !important; touch-action:none !important; }
/* Structural regions */
.modal-header,.editor-toolbar,.editor-footer { flex-shrink:0; width:100%; }
.modal-canvas  { flex:1 1 0%; min-height:0; overflow-y:auto; overflow-x:hidden; padding:25px 30px; background:#FAFAFA; width:100%; -webkit-overflow-scrolling:touch; }
.modal-body    { flex-grow:1; display:flex; flex-direction:column; overflow-y:auto; padding:25px 35px; }
.modal-footer  { display:flex; justify-content:space-between; flex-wrap:wrap; padding:15px 25px; background:#FFF; border-top:1px solid #F0F0F0; align-items:center; flex-shrink:0; gap:15px; }
/* Accordion */
.acc-card   { background:#FFF; border:1px solid #E2E8F0; border-radius:8px; margin-bottom:12px; box-shadow:0 2px 4px rgba(0,0,0,0.02); flex-shrink:0; transition:0.2s; }
.acc-header { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; background:#F8FAFC; cursor:pointer; font-weight:600; color:#1E293B; transition:0.2s; user-select:none; border-radius:8px; }
.acc-header:hover { background:#F1F5F9; }
.acc-open .acc-header { border-bottom-left-radius:0; border-bottom-right-radius:0; }
.acc-body { padding:20px; display:none; border-top:1px solid #E2E8F0; }
.acc-icon { color:#64748B; font-size:10pt; transition:transform 0.3s; }
.acc-open .acc-body { display:block; }
.acc-open .acc-icon { transform:rotate(180deg); }
.section-title { font-size:11pt; font-weight:600; color:#1E293B; margin-bottom:15px; display:flex; align-items:center; gap:8px; text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid #F1F5F9; padding-bottom:10px; }
/* Content editable */
.inpTA      { background-color:#FAFAFA; font-family:inherit; border:1px solid #EAEAEA; border-radius:8px; padding:20px; flex-grow:1; white-space:pre-wrap; outline:none; transition:0.2s ease; }
.inpTA:focus{ border:1px solid #CBD5E1; background-color:#FFFFFF; box-shadow:0 0 0 3px rgba(15,98,254,0.05); }
[contenteditable="true"] { user-select:text !important; -webkit-user-select:text !important; cursor:text !important; }
#append_output:empty:before { content:attr(data-placeholder); color:#94A3B8; pointer-events:none; display:block; }
/* Typing output */
#typing_output.inpTA > * { opacity:1 !important; visibility:visible !important; filter:none !important; transform:none !important; height:auto !important; margin-bottom:0.5em !important; }
#typing_output.inpTA div,#typing_output.inpTA p,#typing_output.inpTA ul,#typing_output.inpTA ol { display:block !important; }
#typing_output.inpTA table { display:table !important; }
#typing_output.inpTA tr    { display:table-row !important; }
#typing_output.inpTA td,#typing_output.inpTA th { display:table-cell !important; }
#typing_output span,#typing_output font,#typing_output p,#typing_output div { background-color:transparent !important; }
#typing_output { caret-color:var(--accent-blue); }
#typing_output p { margin-bottom:0.8em; line-height:1.7; }
#typing_output blockquote { border-left:4px solid var(--accent-blue); padding:4px 14px; color:#475569; font-style:italic; background:rgba(15,98,254,0.05) !important; border-radius:0 8px 8px 0; margin:10px 0; }
#typing_output::-webkit-scrollbar { width:6px; } #typing_output::-webkit-scrollbar-track { background:transparent; } #typing_output::-webkit-scrollbar-thumb { background:#CBD5E1; border-radius:10px; } #typing_output::-webkit-scrollbar-thumb:hover { background:#94A3B8; }
/* Toolbar */
.editor-toolbar,.editor_toolbar { display:flex; flex-wrap:nowrap; overflow:visible; align-items:center; justify-content:space-between; width:100%; background:#FFF; gap:4px; padding:6px 10px; border-bottom:1px solid #E2E8F0; position:relative; z-index:50; }
/* Footer */
.editor-footer         { position:relative !important; z-index:9999999 !important; display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:15px; padding:10px 20px; background:#FFF; border-top:1px solid #F0F0F0; }
.footer-actions-left   { display:flex; align-items:center; gap:10px; flex-wrap:nowrap; flex-shrink:1; overflow:hidden; }
.footer-actions-right  { display:flex; align-items:center; gap:10px; flex-wrap:nowrap; flex-shrink:0; }
.footer-btn-container  { display:flex; gap:10px; justify-content:flex-end; flex:1; align-items:stretch; }
.footer-left-container { display:flex; flex-direction:column; gap:8px; }
.footer-secondary-group{ display:flex; flex-grow:1; justify-content:space-between; align-items:center; flex-wrap:nowrap; gap:10px; overflow:visible; }
.footer-save-group     { flex-shrink:0; }
/* Forms */
.form-row       { display:flex; gap:15px; margin-bottom:15px; width:100%; }
.form-row > div { flex:1; }
.form-input     { width:100%; padding:10px; border:1px solid #ccc; border-radius:5px; }
.form-label     { color:grey; font-size:9pt; font-weight:700; display:block; margin-bottom:4px; }
/* Attachments & threads */
.attachment-bubble  { border:1px solid #EAEAEA; border-radius:8px; background:#FAFAFA; padding:8px 12px; display:flex; align-items:center; gap:10px; transition:transform 0.1s; cursor:pointer; }
.attachment-bubble:hover { transform:scale(1.02); }
.thread-note        { border-radius:8px; padding:15px; margin-bottom:12px; transition:background 0.3s ease; }
.thread-note-read   { background:#FAFAFA; border:1px solid #EAEAEA; }
.thread-note-unread { background:#FFF8E1; border:1px solid #FFE082; }
/* Help text */
.help-text { display:none; font-size:9.5pt; color:var(--accent-blue); background:#EFF6FF; border:1px solid #BFDBFE; padding:12px 16px; border-radius:8px; margin-bottom:15px; font-weight:500; line-height:1.5; }
.show-help .help-text { display:block; animation:fadeInHelp 0.3s ease-in-out; }
/* Compliance locks */
#input_new_div.compliance-locked #modal_header,#input_new_div.compliance-locked #floating_format_menu,
#input_new_div.compliance-locked .editor-toolbar,#input_new_div.compliance-locked #top_meta_row,
#input_new_div.compliance-locked #main_text_wrapper,#input_new_div.compliance-locked #acc_wrapper_active_report,
#input_new_div.compliance-locked #contributions_card,#input_new_div.compliance-locked #acc_wrapper_add_report,
#input_new_div.compliance-locked .editor-footer,
.compliance-locked #modal_header,.compliance-locked #floating_format_menu,.compliance-locked .editor-toolbar,
.compliance-locked #top_meta_row,.compliance-locked #main_text_wrapper,.compliance-locked #acc_wrapper_active_report,
.compliance-locked #contributions_card,.compliance-locked #acc_wrapper_add_report,.compliance-locked .editor-footer { display:none !important; }
body.compliance-locked-body { overflow:hidden !important; }



/* ───────────────────────────────────────────────────────────────────────
   §18  ZEN MODE
   ─────────────────────────────────────────────────────────────────────── */
body.focus-active #input_container { background:rgba(15,23,42,0.9) !important; backdrop-filter:blur(10px) !important; -webkit-backdrop-filter:blur(10px) !important; }
.zen-modest-active .acc-card:not(.zen-target) { opacity:0.2 !important; pointer-events:none !important; filter:grayscale(100%); transition:0.4s ease; }
.zen-modest-active #modal_header,.zen-modest-active .editor-toolbar,.zen-modest-active #top_meta_row { opacity:0.1 !important; pointer-events:none !important; transition:0.4s ease; }
.zen-modest-active .zen-target { transform:scale(1.02); box-shadow:0 25px 50px rgba(0,0,0,0.15) !important; z-index:100; position:relative; border-color:var(--pro-accent-1) !important; transition:0.4s ease; }
.zen-extreme-active .zen-expanded { position:fixed !important; top:0 !important; left:0 !important; right:0 !important; bottom:0 !important; width:100vw !important; height:100dvh !important; z-index:9999998 !important; max-height:none !important; min-height:100dvh !important; max-width:none !important; transition:none !important; transform:none !important; display:block !important; border-radius:0 !important; border:none !important; box-shadow:none !important; padding:100px 10% 120px !important; background:#FAFAFA !important; font-size:13pt !important; line-height:1.8 !important; overflow-y:auto !important; overflow-x:hidden !important; margin:0 !important; }
.zen-extreme-active #modal_header,.zen-extreme-active .editor-toolbar,.zen-extreme-active #top_meta_row,.zen-extreme-active .acc-card:not(.zen-target),.zen-extreme-active .acc-header { display:none !important; }
.zen-extreme-active .editor-footer { position:fixed !important; bottom:0 !important; left:0 !important; right:0 !important; z-index:9999999 !important; box-shadow:0 -10px 25px rgba(0,0,0,0.1) !important; }
.zen-extreme-active .modal-canvas  { padding:0 !important; background:#FFF !important; }
#zen_context_header { position:fixed; top:20px; left:20px; right:20px; z-index:9999999; pointer-events:none; opacity:0; transition:opacity 0.3s; display:flex; flex-direction:column; gap:6px; }
.zen-extreme-active #zen_context_header { opacity:1; pointer-events:auto; }
.zen-header-row { font-size:10pt; color:#94A3B8; font-weight:600; line-height:1.6; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }
.zen-toc-row    { display:flex; flex-wrap:wrap; gap:8px; pointer-events:auto; }
#zen_exit_icon  { position:fixed; top:25px; right:25px; z-index:9999999; cursor:pointer; opacity:0; pointer-events:none; transition:0.3s ease; background:#FFF; border-radius:50%; padding:10px; box-shadow:0 4px 15px rgba(0,0,0,0.15); border:1px solid #E2E8F0; display:flex; align-items:center; justify-content:center; }
.zen-extreme-active #zen_exit_icon { opacity:1; pointer-events:auto; }
#zen_exit_icon:hover { background:#FEF2F2; border-color:#FECACA; transform:scale(1.05); }
/* Universal exemptions from zen hiding */
.zen-extreme-active #universal_desk,.zen-modest-active #universal_desk  { display:block !important; opacity:1 !important; pointer-events:auto !important; filter:none !important; }
.zen-extreme-active #policy_compliance_card,.zen-modest-active #policy_compliance_card { display:flex !important; opacity:1 !important; pointer-events:auto !important; }
.zen-extreme-active #wizard_app_wrapper,.zen-modest-active #wizard_app_wrapper  { display:block !important; opacity:1 !important; pointer-events:auto !important; }



/* ───────────────────────────────────────────────────────────────────────
   §19  POLICY COMPLIANCE CARD
   ─────────────────────────────────────────────────────────────────────── */
#policy_compliance_card_wrap { position:fixed !important; top:0 !important; left:0 !important; width:100vw !important; height:100vh !important; z-index:9999998 !important; background:radial-gradient(circle at 10% 40%,rgba(124,58,237,0.06),transparent 60%),radial-gradient(circle at 90% 60%,rgba(59,130,246,0.04),transparent 60%),#F8FAFC; background-size:200% 200%; animation:meshDrift 30s ease infinite; }
#policy_compliance_card_wrap::after { content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(148,163,184,0.15) 1px,transparent 1px); background-size:24px 24px; pointer-events:none; }
#policy_compliance_card { position:fixed !important; top:0 !important; left:0 !important; width:100vw !important; height:100vh !important; z-index:9999999 !important; border-radius:0 !important; margin:0 !important; border:none !important; display:flex !important; flex-direction:column !important; overflow-y:auto !important; background:rgba(255,255,255,0.4) !important; backdrop-filter:blur(40px) saturate(180%) !important; -webkit-backdrop-filter:blur(40px) saturate(180%) !important; animation:cinematicFadeIn 0.8s cubic-bezier(0.16,1,0.3,1) forwards; }
#policy_compliance_card .acc-header { cursor:default !important; pointer-events:none !important; padding:50px 20px 30px !important; justify-content:center !important; background:transparent !important; border:none !important; }
#policy_compliance_card .acc-icon   { display:none !important; }
#policy_compliance_card .acc-body   { padding:0 20px 80px !important; max-width:850px !important; margin:0 auto !important; width:100% !important; background:transparent !important; }
#policy_compliance_card::-webkit-scrollbar       { width:8px; }
#policy_compliance_card::-webkit-scrollbar-track { background:transparent; }
#policy_compliance_card::-webkit-scrollbar-thumb { background:rgba(124,58,237,0.2); border-radius:10px; border:2px solid transparent; background-clip:padding-box; }
#policy_compliance_card::-webkit-scrollbar-thumb:hover { background-color:rgba(124,58,237,0.4); }
.ccb-doc-container::-webkit-scrollbar       { width:6px; }
.ccb-doc-container::-webkit-scrollbar-track { background:transparent; border-radius:10px; }
.ccb-doc-container::-webkit-scrollbar-thumb { background:rgba(203,213,225,0.6); border-radius:10px; }
.ccb-doc-container::-webkit-scrollbar-thumb:hover { background:rgba(148,163,184,0.8); }



/* ───────────────────────────────────────────────────────────────────────
   §22  CALENDAR                             (calendar_view.php — elite)
   ───────────────────────────────────────────────────────────────────────
   "Elite" calendar redesign. Class families:
     .elite-cal-*    · wrapper, table, headers, day cells
     .elite-day-*    · day numbers + today highlight
     .elite-toggle-* · month/year toggle pill
     .cal-note       · base note tile (overrides the stale pre-v14 rule)
     .cal-note-*     · title · wrapper · meta-tray (expanded on hover)
     .span-single/.span-start/.span-middle/.span-end · multi-day ribbons
     .sortable-item  · drag cursor (complements the .sortable-item rule
                       in §4 which sets touch-action)
     .locked-event   · non-draggable events
   Mobile rules live in §25.
   ─────────────────────────────────────────────────────────────────────── */

/* Global Calendar Wrapper */
    .elite-cal-wrapper { 
        background: #FFFFFF; border-radius: 24px; box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.05); 
        overflow: hidden; border: 1px solid #E2E8F0; margin: 0 auto 50px auto; 
        width: 100%; max-width: 1400px; box-sizing: border-box; text-align: left;
    }
    .elite-cal-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
    
    /* Sleek Headers */
    .elite-cal-th { 
        background: #F8FAFC; padding: 18px 10px; border-bottom: 1px solid #E2E8F0; 
        color: #64748B; font-size: 8pt; text-transform: uppercase; letter-spacing: 2px; 
        text-align: center; font-weight: 800; border-right: 1px solid #F1F5F9;
    }
    .elite-cal-th:last-child { border-right: none; }
    
    /* Day Cells */
    .elite-cal-td { 
        border-right: 1px solid #F1F5F9; border-bottom: 1px solid #F1F5F9; 
        height: 145px; vertical-align: top; padding: 42px 6px 10px 6px; position: relative; 
        transition: all 0.2s ease; box-sizing: border-box; background: transparent;
    }
    .elite-cal-td:last-child { border-right: none; }
    .elite-cal-td:hover { background: #FAFAFA; }

    /* Modern Day Number */
    .elite-day-num { 
        position: absolute; top: 10px; right: 10px; font-weight: 700; color: #94A3B8; 
        font-size: 11pt; width: 30px; height: 30px; border-radius: 50%; display: flex; 
        align-items: center; justify-content: center; transition: 0.2s; cursor: pointer; z-index: 2;
    }
    .elite-cal-td:hover .elite-day-num { color: #0F172A; background: #F1F5F9; }
    .elite-day-num:hover { transform: scale(1.1); color: #0F62FE !important; }
    .elite-day-today { background: #0F62FE !important; color: #FFF !important; box-shadow: 0 4px 10px rgba(15, 98, 254, 0.3); font-weight: 800; }
    
    .cal-drag-zone { display: flex; flex-direction: column; gap: 4px; min-height: 100%; }
    
    /* Note Wrapper & Draggability */
    .cal-note-wrapper { position: relative; height: 32px; width: 100%; z-index: 10; margin-bottom: 1px; }
    .sortable-item { cursor: grab !important; }
    .sortable-item:active { cursor: grabbing !important; }
    .locked-event { cursor: pointer; }

    /* Seamless Ribbon Overrides */
    .span-start { padding-right: 0 !important; margin-right: -7px !important; z-index: 8; width: calc(100% + 7px); }
    .span-start .cal-note { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-right: none !important; }
    
    .span-middle { padding-left: 0 !important; padding-right: 0 !important; margin-left: -7px !important; margin-right: -7px !important; z-index: 7; width: calc(100% + 14px); }
    .span-middle .cal-note { border-radius: 0 !important; border-left: none !important; border-right: none !important; }
    
    .span-end { padding-left: 0 !important; margin-left: -7px !important; z-index: 8; width: calc(100% + 7px); }
    .span-end .cal-note { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-left: none !important; }

    /* Base Note Styling */
    .cal-note { 
        position: absolute; top: 0; left: 0; width: 100%; box-sizing: border-box;
        font-size: 8.5pt; padding: 7px 10px; border-radius: 8px; 
        transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s; 
        font-weight: 650; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03); overflow: hidden;
        height: 32px; display: flex; flex-direction: column; gap: 8px; justify-content: flex-start;
    }
    
    .span-single:not(.locked-event):hover .cal-note { 
        height: auto; max-height: 250px; transform: scale(1.03) translateY(-2px); 
        box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12); z-index: 100;
    }
    
    /* Perfect Title Clipping */
    .cal-note-title { 
        white-space: nowrap; overflow: hidden; text-overflow: clip; 
        line-height: 16px; min-height: 16px; transition: 0.2s; display: block; width: 100%;
    }
    /* Only allow expansion and wrapping on single items */
    .span-single:hover .cal-note-title { white-space: normal; }
    .span-single:hover .cal-note-wrapper { z-index: 100; }

    /* Metadata expansion */
    .cal-note-meta-tray { display: none; flex-direction: column; gap: 8px; opacity: 0; border-top: 1px dashed rgba(0,0,0,0.1); padding-top: 6px; }
    .span-single:hover .cal-note-meta-tray { display: flex; opacity: 1; }
    
    /* Toggle Switch Aesthetics */
    .elite-toggle-pill {
        display: inline-flex; background: #F1F5F9; border-radius: 100px; padding: 4px; border: 1px solid #E2E8F0;
    }
    .elite-toggle-opt {
        padding: 8px 16px; border-radius: 100px; font-size: 8.5pt; font-weight: 800; cursor: pointer; color: #64748B; transition: 0.3s;
    }
    .elite-toggle-opt.active { background: #FFFFFF; color: #0F172A; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border: 1px solid #E2E8F0; }




/* ───────────────────────────────────────────────────────────────────────
   §21  GLOBAL TOP NAVIGATION
   ─────────────────────────────────────────────────────────────────────── */
#global_top_nav {
    position:sticky !important; z-index:1000; overflow:visible !important;
    background:rgba(255,255,255,0.82) !important;
    backdrop-filter:blur(24px) saturate(175%) !important; -webkit-backdrop-filter:blur(24px) saturate(175%) !important;
    border-bottom:1px solid rgba(226,232,240,0.70) !important;
    box-shadow:0 10px 24px rgba(15,23,42,0.045) !important;
}
/* Decorative gradient — no z-index needed, it's visually behind content naturally */
#global_top_nav::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,0.54),rgba(255,255,255,0) 46%),radial-gradient(900px 180px at 12% 0%,rgba(139,92,246,0.08),transparent 56%); pointer-events:none; }
#global_top_nav::after { content:none; }

.top-nav-primary-row { position:relative; z-index:1; display:flex; align-items:center; gap:14px; width:100%; min-width:0; flex-wrap:nowrap !important; overflow:visible !important; padding-right:122px; }
.top-nav-scroll { position:relative; z-index:2; display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0; flex-wrap:nowrap !important; white-space:nowrap; overflow-x:auto !important; overflow-y:hidden !important; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:4px 6px 4px 4px; }
.top-nav-scroll::-webkit-scrollbar { display:none; }
.top-nav-scroll > *,.top-nav-btn { flex:0 0 auto !important; white-space:nowrap !important; }
/* Trailing spacer — prevents last pill hiding under avatar circles */
.top-nav-scroll::after,
#global_top_nav .top-nav-scroll::after { content:""; display:block; flex:0 0 96px; width:96px; min-width:96px; height:1px; pointer-events:none; }
.top-nav-search-wrap { position:relative; z-index:1; flex:0 0 270px; min-width:240px; max-width:300px; }

/* Fixed avatar / action area */
.global-top-actions {
    position:absolute !important; top:50% !important; right:0 !important;
    transform:translateY(-50%) !important; display:flex !important; align-items:center !important;
    gap:10px !important; z-index:2147483647 !important; padding-left:16px;
    background:transparent !important; pointer-events:none !important;
}
.global-top-actions > *,.global-top-actions .premium-dropdown-wrapper { pointer-events:auto !important; position:relative; z-index:2147483647; }
/* Blur shield — intentionally killed to unblock pointer events on pills */
.global-top-actions::before,.global-top-actions::after { content:none !important; display:none !important; }

/* Nav pills — scoped overrides (border-radius + shadows) */
#global_top_nav .filter-pill,
#global_top_nav .inbox-tab-premium,
#global_top_nav .f-tab {
    min-height:46px !important; padding:10px 18px !important; font-size:9.7pt !important;
    border-radius:999px !important;
    background:linear-gradient(180deg,rgba(255,255,255,0.98),rgba(248,250,252,0.90)) !important;
    box-shadow:0 12px 26px rgba(15,23,42,0.055),0 5px 12px rgba(124,58,237,0.05),inset 0 1px 0 rgba(255,255,255,0.98) !important;
}
#global_top_nav .filter-pill .ui-icon { height:15px !important; width:auto !important; opacity:0.80; }
#global_top_nav .filter-pill:hover,
#global_top_nav .inbox-tab-premium:hover,
#global_top_nav .f-tab:hover {
    color:#1E293B !important; border-color:rgba(192,132,252,0.52) !important;
    background:linear-gradient(180deg,#FFFFFF,#F8F3FF) !important;
    box-shadow:0 14px 28px rgba(124,58,237,0.12),0 4px 12px rgba(15,23,42,0.04),inset 0 1px 0 rgba(255,255,255,1) !important;
}
/* Active nav pills */
#global_top_nav .filter-pill.filter-active-blue,
#global_top_nav .filter-pill.active,
#global_top_nav .filter-pill.active-view {
    color:#FFFFFF !important;
    background:linear-gradient(135deg,#4F46E5,#7C3AED 58%,#9333EA) !important;
    border-color:rgba(255,255,255,0.12) !important;
    box-shadow:0 18px 34px rgba(124,58,237,0.26),inset 0 1px 0 rgba(255,255,255,0.24),0 0 0 1px rgba(124,58,237,0.12) !important;
}
/* Scoped pointer-event restoration */
#global_top_nav .global-top-actions { position:absolute !important; top:50% !important; right:0 !important; transform:translateY(-50%) !important; pointer-events:none !important; gap:6px !important; z-index:40 !important; background:transparent !important; }
#global_top_nav .global-top-actions > *,
#global_top_nav .global-top-actions .premium-dropdown-wrapper,
#global_top_nav .global-top-actions .global-top-profile-link,
#global_top_nav .global-top-actions .premium-dropdown-menu,
#global_top_nav .global-top-actions .inbox-avatar { pointer-events:auto !important; }
#global_top_nav .top-nav-scroll > *,
#global_top_nav .top-nav-btn,
#global_top_nav .filter-pill,
#global_top_nav .btn-purple-pro { flex:0 0 auto !important; flex-grow:0 !important; flex-shrink:0 !important; white-space:nowrap !important; max-width:none !important; }
#global_top_nav .inbox-avatar { width:40px; height:40px; font-size:12pt; }



/* ───────────────────────────────────────────────────────────────────────
   §22  FLOATING FORMAT MENU
   ─────────────────────────────────────────────────────────────────────── */
#floating_format_menu button.format-action-btn,
#floating_format_menu button.format-action-btn:hover,
#floating_format_menu button.format-action-btn:active,
#floating_format_menu button.format-action-btn:focus {
    width:28px !important; height:28px !important; min-width:28px !important; min-height:28px !important;
    padding:0 !important; margin:0 !important; border:none !important; border-radius:50% !important;
    background:transparent !important; box-shadow:none !important; transform:none !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    overflow:visible !important; isolation:auto !important; color:#334155 !important;
}
#floating_format_menu button.format-action-btn::before,
#floating_format_menu button.format-action-btn::after { content:none !important; display:none !important; }
#floating_format_menu button.format-action-btn svg  { width:14px !important; height:14px !important; min-width:14px !important; min-height:14px !important; display:block !important; opacity:1 !important; filter:none !important; transform:none !important; stroke:#334155 !important; fill:none !important; }
#floating_format_menu button.format-action-btn span { color:#334155 !important; opacity:1 !important; text-shadow:none !important; position:static !important; z-index:auto !important; }
#floating_format_menu button.format-action-btn:hover { background:#F1F5F9 !important; }
#floating_format_menu button.format-action-btn img   { height:15px !important; width:auto !important; opacity:0.82 !important; filter:none !important; transform:none !important; }
#floating_format_menu #btn_auto_focus_float { min-height:auto !important; width:auto !important; height:auto !important; box-shadow:none !important; background:transparent !important; }



/* ───────────────────────────────────────────────────────────────────────
   §23  MEDIA QUERIES  (all breakpoints, largest → smallest)
   ─────────────────────────────────────────────────────────────────────── */

/* Feature / capability */
@media print {
    html,body,#content_list,#drag_container { height:auto !important; overflow:visible !important; position:static !important; display:block !important; width:100% !important; margin:0 !important; padding:0 !important; }
    .div_box_1 { display:block !important; width:100% !important; max-width:100% !important; position:relative !important; margin:20px 0 !important; padding:15px !important; border:1px solid #ddd !important; box-shadow:none !important; transform:none !important; page-break-inside:avoid !important; visibility:visible !important; opacity:1 !important; }
    #start_menu,#start_menu_extended,#top_container_fixed,#bottom_container_fixed,#input_container,.no_print,.div_button { display:none !important; }
}
@supports not (height: 100dvh) { .modal-maximized { height:100% !important; } }
@media (pointer: coarse)       { body.initial-load { cursor:auto !important; user-select:auto !important; } }
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
    .div_button::before,.card-header-btn::before,.hover-btn::before,.sim-btn::before,
    .sleek-clear-btn::before,.mark-complete-btn::before,.restore-active-btn::before,.sleek-toggle::before,
    .format-action-btn::before,.focus-tier-btn::before,.cal-status-btn::before,.save-action-btn::before,
    .quick-add-pill::before,.unlink-btn::before { display:none !important; }
}
@media (hover: none) and (pointer: coarse) {
    .rich-card:hover,.ultra-list-tile:hover,.search-item:hover,.dropdown-item:hover,
    .relation-pill:hover,.hover-btn:hover,.filter-pill:hover,.div_button:hover,.inbox-tab-ultra:hover { transform:none !important; }
    .search-item:active,.dropdown-item:active,.relation-pill:active,.hover-btn:active,
    .filter-pill:active,.div_button:active,.inbox-tab-ultra:active { transform:scale(0.97) !important; }
}

/* Masonry breakpoints */
@media (max-width: 1600px) { .masonry-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width: 1100px) { .masonry-grid { grid-template-columns:repeat(2,1fr); } }

/* Min-width helpers */
@media (min-width: 1400px) { .zen-extreme-active .zen-expanded { padding:100px 18% 120px !important; } }
@media (min-width: 801px)  { .mobile-action-bar { display:none !important; } }
@media (min-width: 800px)  {
    .toolbar-search-wrapper.search-box { max-width:400px !important; }
    .dir-metrics .metric-card { min-width:100px; padding:15px 25px; }
}

/* Directory grid steps */
@media (max-width: 1460px) { .entity-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; } }
@media (max-width: 1180px) {
    .dir-dashboard { grid-template-columns:1fr !important; }
    .entity-grid   { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

/* 979px — close the gap between 1180px and 900px for tablets */
@media (max-width: 979px) {
    .entity-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    .paginate-container.layout-grid { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)) !important; }
}

/* 980px — general mobile density */
@media (max-width: 980px) {
    :root { --mobile-shell-pad:12px; --mobile-card-radius:20px; --mobile-control-radius:16px; }
    body { background:linear-gradient(180deg,#FBFCFE 0%,#F7F9FC 100%) !important; -webkit-text-size-adjust:100%; }
    #main_body { padding:12px var(--mobile-shell-pad) 88px var(--mobile-shell-pad) !important; }
    #content_list,#company_list_container { gap:18px !important; }
    #top_container_fixed    { left:12px !important; right:12px !important; top:12px !important; transform:none !important; width:auto !important; gap:10px !important; padding:10px 12px !important; border-radius:18px !important; justify-content:center !important; flex-wrap:wrap !important; }
    #bottom_container_fixed { left:12px !important; right:12px !important; bottom:max(12px,env(safe-area-inset-bottom)) !important; transform:none !important; min-width:0 !important; width:auto !important; height:auto !important; padding:10px 12px !important; border-radius:22px !important; gap:10px !important; flex-wrap:wrap !important; }
    .div_box_1,.div_box_2,.div_window,.rich-card,.ultra-list-tile,.chat-bubble-container,.relation-pill,.search-dropdown,.section-wrap,.control-center,.dir-dashboard { border-radius:var(--mobile-card-radius) !important; }
    .filter-pill,.blue-pill-select,.inbox-tab-ultra,.div_button,.card-header-btn,.hover-btn,.edit-record-btn,.sim-btn,.sleek-clear-btn,.mark-complete-btn,.restore-active-btn,.sleek-toggle,.format-action-btn,.focus-tier-btn,.cal-status-btn,.save-action-btn,.btn-purple-pro,.quick-add-pill,.unlink-btn,.dropdown-item,.relation-pill,.sleek-select,select.filter-pill { min-height:44px !important; border-radius:var(--mobile-control-radius) !important; font-size:9.2pt !important; }
    .filter-pill:hover,.div_button:hover,.card-header-btn:hover,.hover-btn:hover,.search-item:hover,.ultra-list-tile:hover,.rich-card:hover { transform:none !important; }
    .dropdown-item,.relation-pill,.search-item { padding-top:11px !important; padding-bottom:11px !important; }
    #input_new_div { width:calc(100vw - 12px) !important; max-width:none !important; min-height:calc(100dvh - 12px) !important; max-height:calc(100dvh - 12px) !important; margin:6px auto !important; border-radius:22px !important; overflow:hidden !important; }
    .modal-header,.editor-toolbar,.editor-footer { padding-left:12px !important; padding-right:12px !important; }
    .modal-canvas { padding:18px 14px 24px 14px !important; }
    .inpTA,textarea,input[type="text"],input[type="search"],input[type="email"],input[type="tel"],input[type="number"],select { font-size:16px; } /* prevents iOS zoom */
}

/* 900px — DM layout + top nav shrink */
@media (max-width: 900px) {
    .dm-master-row    { flex-direction:column !important; align-items:stretch !important; }
    .dm-tray-container { width:100% !important; border-left:none !important; padding-left:0 !important; margin-left:0 !important; border-top:1px dashed #CBD5E1 !important; padding-top:12px !important; margin-top:4px !important; }
    #dm_user_select   { width:100% !important; }
    .dm-status-compact { align-self:flex-start !important; margin-top:8px !important; }
    .top-nav-primary-row { gap:0; padding-right:90px !important; min-height:48px; }
    .top-nav-scroll  { width:100%; gap:8px; padding-right:96px !important; }
    .top-nav-search-wrap { display:none !important; }
    .global-top-actions { gap:6px !important; }
    #global_top_nav .inbox-avatar { width:34px !important; height:34px !important; font-size:10pt !important; }
}

/* 820px — directory compact */
@media (max-width: 820px) {
    .dir-layout { max-width:100% !important; padding:12px 12px 96px 12px !important; gap:0 !important; }
    .dir-dashboard { padding:22px 18px 20px !important; margin-bottom:18px !important; gap:18px !important; border-radius:24px !important; }
    .dir-title { font-size:clamp(17pt,5.8vw,22pt) !important; line-height:1.08 !important; gap:12px !important; flex-wrap:nowrap !important; }
    .dir-title > div:first-child { width:46px !important; height:46px !important; min-width:46px !important; border-radius:15px !important; }
    .dir-title img { height:22px !important; }
    .dir-subtitle  { max-width:100% !important; font-size:9.5pt !important; line-height:1.45 !important; }
    .dir-layout .dir-metrics { gap:10px !important; }
    .dir-layout .dir-metrics .metric-card { min-width:0 !important; padding:14px 10px 12px !important; border-radius:18px !important; }
    .dir-layout .dir-metrics .metric-val  { font-size:clamp(15pt,5vw,20pt) !important; }
    .dir-layout .dir-metrics .metric-lbl  { font-size:7pt !important; }
    .control-center { position:static !important; padding:12px !important; gap:10px !important; margin-bottom:20px !important; border-radius:20px !important; align-items:stretch !important; }
    .control-center form,.control-center .search-box-premium { width:100% !important; flex:1 1 100% !important; min-width:100% !important; }
    .search-box-premium input { min-height:48px !important; border-radius:15px !important; font-size:10pt !important; }
    .filter-tabs { width:100% !important; gap:6px !important; padding:5px !important; overflow-x:auto !important; flex-wrap:nowrap !important; }
    .f-tab,a.f-tab { min-height:42px !important; padding:9px 13px !important; font-size:8.8pt !important; }
    .section-wrap { padding:16px 14px 18px !important; margin-bottom:18px !important; border-radius:22px !important; }
    .dir-section-header { font-size:12.2pt !important; padding-bottom:10px !important; margin-bottom:14px !important; }
    .dir-badge { min-width:26px !important; height:26px !important; padding:0 9px !important; }
    .entity-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:14px !important; }
    .rich-card { padding:16px !important; border-radius:20px !important; }
    .rc-icon-wrap { width:42px !important; height:42px !important; border-radius:14px !important; }
    .rc-title { font-size:11.3pt !important; white-space:normal !important; display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden !important; }
    .dir-layout .rc-footer,.rc-footer { display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:10px !important; }
    .rc-owner { min-height:34px !important; padding:6px 10px !important; font-size:8.2pt !important; }
    .dir-layout .rc-hover-actions,.rc-hover-actions { position:static !important; margin-top:14px !important; padding:14px 0 0 !important; background:transparent !important; border-top:1px solid #E9EEF5 !important; backdrop-filter:none !important; display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important; opacity:1 !important; transform:none !important; visibility:visible !important; }
    .rich-card:hover .rc-hover-actions { bottom:auto !important; }
    .dir-layout .hover-btn,.hover-btn { min-height:40px !important; padding:8px !important; border-radius:14px !important; font-size:8.2pt !important; }
    .dir-layout .hover-btn img,.hover-btn img { height:12px !important; flex-shrink:0; }
}

/* 800px — primary mobile breakpoint */
@media (max-width: 800px) {
    #main_body { padding:10px 8px !important; }
    #input_new_div { width:95% !important; min-height:450px !important; margin:0 auto !important; }
    #input_container,.modal-maximized #input_new_div { height:100dvh !important; max-height:100dvh !important; }
    .note-card,.div_box_1 { width:100% !important; max-width:100% !important; margin:0 0 25px 0 !important; }
    .folder-wrapper    { width:100% !important; max-width:100% !important; margin:0 0 25px 0 !important; }
    #company_slider    { width:100% !important; right:0 !important; padding:15px !important; }
    .masonry-grid      { grid-template-columns:1fr; }
    .dossier-grid      { grid-template-columns:1fr; }
    /* Action bars */
    .action-bar { padding:12px !important; justify-content:center !important; gap:12px !important; }
    .action-bar-left,.action-bar-right { justify-content:center !important; width:100% !important; }
    #submit_btn_container { flex-grow:1; justify-content:center !important; }
    .action-bar .div_button { font-size:9.5pt !important; padding:8px 12px !important; }
    /* Filters */
    .filter-bar-wrapper { display:flex; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:4px 2px 8px 2px; gap:5px; }
    .filter-bar-wrapper::-webkit-scrollbar { display:none; }
    .filter-group      { flex-wrap:nowrap; flex-shrink:0; gap:5px; }
    .filter-pill       { max-width:none; flex-grow:1; font-size:8.5pt; padding:8px 10px; }
    .desktop-divider   { display:none !important; }
    .mobile-hide-text  { display:none !important; }
    .control-center    { flex-direction:column; align-items:stretch; position:static; }
    .filter-tabs       { overflow-x:auto; }
    /* Editor toolbar */
    #input_new_div .editor-toolbar { flex-direction:row !important; flex-wrap:nowrap !important; overflow-x:auto !important; align-items:center !important; }
    .toolbar-right { width:100% !important; justify-content:space-between !important; flex-wrap:nowrap !important; margin-top:10px; }
    #toolbar_row_2 { flex-direction:column !important; align-items:stretch !important; gap:8px !important; width:100%; margin-top:4px; }
    .assignee-box  { flex:none !important; width:100% !important; max-width:100% !important; }
    #assignee_container { flex:0 0 48% !important; max-width:none !important; margin:0 !important; }
    .search-and-tag-wrapper { width:100% !important; justify-content:space-between !important; margin-top:0; }
    .editor-toolbar .toolbar-search-wrapper { flex-grow:1 !important; max-width:none !important; }
    .toolbar-search-wrapper input,.editor-toolbar .toolbar-search-wrapper input { width:100% !important; }
    #archive_btn { flex:1 1 auto !important; min-width:100px; }
    #max_btn_wrapper { display:none !important; }
	.mon-grid { grid-template-columns: 1fr !important; }
    
	
	
	/* THE ONE-LINE SWIPEABLE FOOTER */
	.editor-footer { 
		flex-wrap: nowrap !important; 
		overflow-x: auto !important; 
		-webkit-overflow-scrolling: touch !important; 
		scrollbar-width: none !important;
	}
	.editor-footer::-webkit-scrollbar { display: none !important; } /* Chrome/Safari hide scrollbar */

	.footer-left-container, .footer-btn-container { 
		display: flex !important; 
		flex-direction: row !important; 
		flex-wrap: nowrap !important; 
		width: auto !important; 
		gap: 8px !important; 
		align-items: center !important;
	}

	/* Push the update button group to the right if there's room on tablets */
	.footer-btn-container { margin-left: auto; }

	/* Stop buttons from squishing or dropping to new lines */
	.editor-footer .div_button { 
		width: auto !important; 
		flex-shrink: 0 !important; 
		white-space: nowrap !important; 
		margin: 0 !important;
		padding: 8px 16px !important; /* Slightly tighter padding for mobile */
	}
	
	
	.form-row { flex-direction:column; gap:10px; }
    .form-row > div { width:100%; flex:none; }
    /* Zen */
    .zen-extreme-active .zen-expanded { padding:130px 20px 120px !important; font-size:11pt !important; }
    #zen_context_header { top:15px !important; left:15px !important; right:15px !important; }
    /* Mobile action bar */

    .content-datetime-wrap { width:100%; flex-wrap:wrap; justify-content:flex-end; margin-top:6px; }
    /* Inbox */
    .inbox-row     { padding:14px 16px; }
    .inbox-avatar  { width:34px; height:34px; font-size:10pt; margin-right:12px; }
    .inbox-header-line { flex-direction:column; align-items:flex-start; }
    .inbox-meta-group  { width:100%; justify-content:space-between; margin-top:4px; flex-direction:row-reverse; }
    .inbox-actions { opacity:1; }
    .inbox-message { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; margin-top:2px; }
    .island-tabs   { padding:4px; gap:4px; }
    .inbox-tab-ultra  { padding:8px 12px; font-size:8.5pt; min-width:140px; flex:none; }
    .inbox-tab-premium { min-width:140px; flex:none; }
    /* Tiles */
    .tile-body { flex-direction:column; padding:16px 16px 16px 20px; gap:12px; }
    .left-col-actions { display:none !important; }
    .mobile-action-bar { display:flex !important; margin-left:auto; }
    .status-indicator-wrap { width:5px; }
    .ultra-list-tile { border-radius:18px !important; }
    /* Chat */
    .chat-bubble-container { padding:16px 14px; gap:12px; margin-top:16px; border-radius:16px; }
    .chat-bubble-content   { max-width:95%; padding:12px 16px; }
    .chat-bubble-avatar    { width:28px; height:28px; font-size:8pt; }
    .chat-bubble-text      { font-size:10pt; }
    /* Compliance */
    #policy_compliance_card .acc-header { padding:30px 15px 20px !important; }
    #policy_compliance_card .acc-body   { padding:0 15px 60px !important; }
    .ccb-doc-container  { padding:30px 20px !important; border-radius:16px !important; }
    .ccb-action-box     { padding:30px 20px !important; flex-direction:column !important; text-align:center !important; align-items:center !important; }
    .ccb-action-buttons { flex-direction:column !important; width:100% !important; gap:15px !important; }
    .ccb-action-buttons .div_button { width:100% !important; min-width:0 !important; }
    .ccb-doc-header  { flex-direction:column !important; align-items:flex-start !important; gap:15px !important; }
    .ccb-chat-bubble { max-width:90% !important; }
    /* Governance */
    .gov-desk-wrapper { margin-left:-20px !important; margin-right:-20px !important; width:calc(100% + 40px) !important; border-radius:0 !important; border:none !important; padding:35px 20px !important; box-shadow:none !important; background:rgba(255,255,255,0.98) !important; backdrop-filter:none !important; }
    .gov-header-wrap  { flex-direction:row !important; align-items:center !important; gap:12px !important; padding:0 0 20px !important; border-bottom:1px solid #F1F5F9 !important; }
    .gov-header-icon  { width:44px !important; height:44px !important; font-size:16pt !important; border-radius:12px !important; }
    .gov-header-title { font-size:13pt !important; white-space:nowrap !important; }
    .gov-header-subtitle { display:none !important; }
    .gov-action-cards { grid-template-columns:1fr !important; gap:10px !important; }
    .gov-action-card  { flex-direction:row !important; text-align:left !important; padding:15px 20px !important; justify-content:flex-start !important; }
    .gov-action-card .gov-card-icon { margin-bottom:0 !important; margin-right:15px !important; font-size:20pt !important; }
    /* Stretch widgets */
    .stretch-reminder-widget,.stretch-event-widget { margin-left:-20px !important; margin-right:-20px !important; width:calc(100% + 40px) !important; border-radius:0 !important; border-left:none !important; border-right:none !important; }
    .stretch-reminder-widget { padding:20px 15px !important; }
    .stretch-event-widget    { padding:25px 20px !important; }
    .reminder-inner-group    { flex-direction:column !important; align-items:stretch !important; }
    .reminder-inner-group > div { width:100% !important; }
    .reminder-quick-btns    { justify-content:center !important; width:100% !important; }
    .event-inner-grid       { grid-template-columns:1fr !important; gap:12px !important; }
    /* Top nav swipe rail */
    #global_top_nav .top-nav-primary-row { padding-right:0 !important; gap:0 !important; }
    #global_top_nav .top-nav-search-wrap { display:none !important; }
    #global_top_nav .top-nav-scroll { width:100% !important; min-width:0 !important; overflow-x:auto !important; overflow-y:hidden !important; flex-wrap:nowrap !important; white-space:nowrap !important; -webkit-overflow-scrolling:touch !important; touch-action:pan-x !important; padding:4px 0 4px 4px !important; }
    #global_top_nav .global-top-actions { position:absolute !important; top:50% !important; right:0 !important; transform:translateY(-50%) !important; pointer-events:none !important; gap:6px !important; z-index:40 !important; background:transparent !important; }
    #global_top_nav .global-top-actions > *,#global_top_nav .global-top-actions .premium-dropdown-wrapper,#global_top_nav .global-top-actions .global-top-profile-link,#global_top_nav .global-top-actions .premium-dropdown-menu,#global_top_nav .global-top-actions .inbox-avatar { pointer-events:auto !important; }
    /* Modal lock with dynamic viewport height */
    #input_new_div,#input_container,.modal-canvas-wrapper { position:fixed !important; top:0 !important; left:0 !important; right:0 !important; bottom:0 !important; height:100dvh !important; max-height:100dvh !important; margin-top:0 !important; transform:none !important; }
    .modal-canvas { height:100% !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch !important; padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
    .action-bar,.editor-footer,#submit_btn_container_wrapper,.bottom-save-row { position:fixed !important; bottom:0 !important; left:0 !important; right:0 !important; z-index:2147483646 !important; background:rgba(255,255,255,0.98) !important; backdrop-filter:blur(12px) !important; -webkit-backdrop-filter:blur(12px) !important; border-top:1px solid #E2E8F0 !important; padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px)) !important; padding-top:12px !important; padding-left:15px !important; padding-right:15px !important; box-shadow:0 -6px 20px rgba(15,23,42,0.04) !important; }
    /* No lateral slide on narrow dropdowns — colour feedback is enough */
    .dropdown-item:hover { transform:none !important; }
    /* Hide decorative orbs on mobile to avoid reflow & horizontal overflow */
    body::before, body::after { display:none !important; }
}

/* 760px — directory padding */
@media (max-width: 760px) {
    .dir-layout { padding-left:14px !important; padding-right:14px !important; }
    .dir-dashboard,.control-center,.section-wrap { padding-left:18px !important; padding-right:18px !important; border-radius:24px !important; }
    .dir-layout .dir-metrics { grid-template-columns:1fr !important; }
    .entity-grid { grid-template-columns:1fr !important; gap:18px !important; }
}
@media (max-width: 640px) {
    .dir-layout { padding-left:14px !important; padding-right:14px !important; }
    .dir-dashboard { padding:26px 18px 22px !important; border-radius:24px !important; }
    .dir-title { font-size:clamp(18pt,7vw,22pt) !important; }
    .dir-title > div:first-child { width:48px !important; height:48px !important; border-radius:16px !important; }
    .entity-grid { gap:18px !important; }
    .f-tab,a.f-tab { min-height:42px !important; padding:9px 13px !important; }
}
@media (max-width: 620px) {
    .entity-grid { grid-template-columns:1fr !important; }
    .dir-layout .dir-metrics { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
    .dir-layout .dir-metrics .metric-card { padding:12px 8px 10px !important; border-radius:16px !important; }
    .dir-layout .dir-metrics .metric-val  { font-size:clamp(14pt,5.4vw,18pt) !important; }
    .dir-layout .dir-metrics .metric-lbl  { font-size:6.5pt !important; }
    .dir-title    { font-size:clamp(16pt,6.4vw,20pt) !important; }
    .dir-subtitle { font-size:9pt !important; }
    .dir-layout .rc-hover-actions,.rc-hover-actions { grid-template-columns:1fr !important; }
    .dir-layout .hover-btn,.hover-btn { min-height:42px !important; justify-content:center !important; }
}
@media (max-width: 480px) {
    #main_body { padding:10px 8px 94px 8px !important; }
    .paginate-container.layout-grid { grid-template-columns:1fr !important; }
    .dir-layout { padding-left:8px !important; padding-right:8px !important; }
    .dir-dashboard,.control-center,.section-wrap { border-radius:18px !important; }
    .dir-dashboard { padding:18px 14px 16px !important; gap:16px !important; }
    .dir-title { font-size:clamp(15pt,6.8vw,18pt) !important; gap:10px !important; }
    .dir-title > div:first-child { width:42px !important; height:42px !important; min-width:42px !important; }
    .dir-subtitle { font-size:8.8pt !important; line-height:1.4 !important; }
    .dir-layout .dir-metrics { gap:8px !important; }
    .control-center { padding:10px !important; }
    .search-box-premium input { min-height:46px !important; padding-left:42px !important; }
    .search-box-premium img   { left:14px !important; height:15px !important; }
    .filter-tabs { border-radius:16px !important; }
    .f-tab,a.f-tab { min-height:40px !important; padding:8px 11px !important; font-size:8.3pt !important; }
    .dir-section-header { font-size:11.4pt !important; }
    .rich-card { padding:14px !important; border-radius:18px !important; }
    .rc-icon-wrap { width:38px !important; height:38px !important; border-radius:12px !important; }
    .rc-title     { font-size:10.8pt !important; }
    .dir-layout .hover-btn,.hover-btn { min-height:40px !important; font-size:8.1pt !important; border-radius:13px !important; }
    #input_new_div { width:calc(100vw - 8px) !important; min-height:calc(100dvh - 8px) !important; max-height:calc(100dvh - 8px) !important; border-radius:18px !important; margin:4px auto !important; }
    .modal-canvas { padding:16px 12px 20px !important; }
    .top-nav-primary-row { padding-right:84px !important; }
    .global-top-actions { gap:6px !important; }
    #global_top_nav .inbox-avatar { width:32px !important; height:32px !important; font-size:9.5pt !important; }
}














/* ═══════════════════════════════════════════════════════════════════════
   PROHMOTION QMS  —  v15 "ZERO-GRAVITY" OVERHAUL
   ───────────────────────────────────────────────────────────────────────
   Concept: Ultra-premium Spatial UI. Zero hard borders, multi-layered 
   diffuse shadows, spring-physics animations, and luminous interactions.
   ═══════════════════════════════════════════════════════════════════════ */



/* ── §25 additions — merged from monitor/entity/tags/calendar inline CSS ──
   Each sub-block is tagged with its source page for quick navigation. */

/* ─── COMPLIANCE COMMAND CENTER (entity.php + tags.php) ─── */
@media (max-width: 1180px) {
    .cc-container { grid-template-columns:1fr 1fr; }
    .cc-pulse     { grid-column:1 / -1; }
}
@media (max-width: 820px) {
    .cc-container { grid-template-columns:1fr; gap:14px; margin-bottom:18px; }
    .cc-pulse     { grid-column:auto; }
    .cc-ring-wrap { width:134px; height:134px; }
    .cc-ring-pct  { font-size:28pt; }
    .cc-panel     { padding:18px; }
    .cc-atrisk-name { font-size:9.5pt; }
    .cc-pulse-bar   { max-width:22px; }
}

/* ─── MOMENTUM LANE (tags.php) ─── */
@media (max-width: 1180px) {
    .ml-lane     { grid-template-columns:1fr 1fr; }
    .ml-insights { grid-column:1 / -1; }
}
@media (max-width: 640px) {
    .ml-lane       { grid-template-columns:1fr; gap:10px; padding:12px; }
    .ml-insights   { grid-column:auto; }
    .ml-card-value { font-size:13pt; }
    .ml-card-emoji { width:40px; height:40px; font-size:20pt; }
    .ml-ins-text   { white-space:normal; }
}

/* ─── ENTITY PAGE (entity.php) ─── */
@media (max-width: 820px) {
    /* 1. Force the Action Bars (Filters + Log Buttons) to wrap to the next line */
    .section-wrap > div[style*="display:flex"] > div[style*="align-items:center"] {
        flex-wrap:wrap !important;
    }
    /* 2. Allow long text inside Similarity Buttons to break into multiple lines */
    .sim-btn {
        white-space:normal !important;
        text-align:left !important;
        line-height:1.4 !important;
        height:auto !important;
    }
    /* 3. Allow long entity names inside Linked Relation Pills to break */
    .relation-pill        { white-space:normal !important; height:auto !important; }
    .relation-pill span   { white-space:normal !important; overflow-wrap:anywhere !important; }
    /* 4. Force heavy text blocks (URLs, system logs) to snap to the container width */
    .rich-card, .ultra-list-tile, .inset-content-block, .report-card-body div {
        overflow-wrap:anywhere !important;
        word-break:break-word !important;
    }
    /* 5. Ensure the masonry grid fully collapses into a single column safely */
    #smart_masonry_grid { max-width:100vw !important; overflow-x:hidden !important; }
    /* 6. Entity header action row stacks on mobile */
    .ent-action-row                 { flex-direction:column; align-items:stretch; }
    .ent-action-row .ent-cta-row    { margin-left:0; justify-content:flex-start; }
    .ent-resp-wrap                  { width:100%; justify-content:space-between; }
    .ent-resp-select                { flex:1; max-width:none; }

    /* 7. Filter pills wrap gracefully */
    .ent-filter-bar   { gap:8px; padding:8px; }
    .ent-filter-group { flex-wrap:wrap; }
}

/* ─── DIRECTORY CONTROLS (tags.php) ─── */
@media (max-width: 820px) {
    .dir-controls-row { width:100%; }
    .dir-ctl-group    { flex:1; min-width:140px; }
    .dir-health-row   { gap:6px; }
    .ent-chip         { padding:4px 9px; font-size:8pt; }
    .dir-active-filters      { padding:8px 10px; gap:8px; }
    .dir-active-filters span { margin-left:0 !important; flex-basis:100%; }
    .ent-breadcrumb .ent-crumb-active { max-width:180px; }
}

/* ─── CALENDAR (calendar_view.php) ─── */
@media screen and (max-width: 800px) {
    .elite-cal-wrapper { border:none; box-shadow:none; background:transparent; padding:0 10px; }
    .elite-cal-table, .elite-cal-table tbody, .elite-cal-table tr, .elite-cal-td { display:block; width:100%; height:auto !important; }
    .elite-cal-th      { display:none; }
    .elite-cal-td:empty{ display:none !important; }
    .elite-cal-td      { background:#FFF; border:1px solid #E2E8F0; border-radius:16px; margin-bottom:16px; padding:15px !important; box-shadow:0 4px 12px rgba(15, 23, 42, 0.03); }
    .elite-day-num     { position:static; font-size:16pt; width:auto; height:auto; text-align:left; margin-bottom:12px; color:#0F172A; display:inline-block; }
    .elite-day-today   { background:transparent !important; color:#0F62FE !important; font-weight:900; box-shadow:none; }
    .cal-drag-zone     { padding:0 !important; gap:8px; }
    /* Break Ribbons for Mobile Stacking */
    .span-start, .span-middle, .span-end { margin:0 !important; width:100% !important; z-index:1 !important; }
    .span-start .cal-note, .span-middle .cal-note, .span-end .cal-note {
        border-radius:12px !important; border:1px solid inherit !important;
    }
    .cal-note-wrapper   { height:auto; margin-bottom:4px; }
    .cal-note           { position:relative; height:auto; white-space:normal; padding:12px 14px; font-size:10pt; border-radius:12px; }
    .cal-note-title     { white-space:normal; }
    .cal-note-meta-tray { opacity:1; display:flex; }
}

/* ─── MONITOR (monitor.php) ─── */
@media (max-width: 720px) {
    /* On narrow screens the tray wraps; give the active tab a sane max so it
       doesn't consume an entire row on its own. */
    .mon-ttab.active { min-width:140px; padding:9px 18px; font-size:10pt; }
}
@media (max-width: 1024px) {
    #monitor_wrapper {
        height:auto; min-height:0;      /* natural page scroll */
        padding:6px 10px 40px;
    }
    /* On mobile the panes stack vertically (single column). The collapse
       button toggles the LEFT pane's HEIGHT rather than its width. */
    #mon_split, #mon_split.left-collapsed {
        grid-template-columns:1fr; gap:12px;
        overflow:visible;
    }
    #mon_resizer { display:none; }
    #mon_left, #mon_right { height:auto; overflow:visible; }
    #mon_left {
        padding:8px 10px !important;
        max-height:none;
        transition:max-height 0.25s cubic-bezier(0.16,1,0.3,1);
    }
    #mon_left .mon-panel-header { display:none; }

    /* COLLAPSED on mobile: shrink left-pane height to just the view switcher. */
    #mon_split.left-collapsed #mon_left {
        max-height:58px;
        overflow:hidden;
    }
    #mon_split.left-collapsed .mon-lvs-collapse .mon-lvs-collapse-icon {
        transform:rotate(90deg);
    }

    /* TOP-LEVEL folders = full-width accordion rows. */
    #mon_left > .mon-folder {
        display:block; margin:0 0 6px; width:100%;
    }
    #mon_left > .mon-folder > .mon-folder-head {
        padding:11px 14px; border-radius:10px;
        background:#F1F5F9; display:flex; align-items:center; gap:10px;
        font-size:9pt;
    }
    #mon_left > .mon-folder > .mon-folder-head:hover { background:#E2E8F0; }
    #mon_left > .mon-folder.open > .mon-folder-head {
        background:rgba(124,58,237,0.10); color:#6D28D9;
        border-radius:10px 10px 0 0;
    }
    #mon_left > .mon-folder > .mon-folder-body {
        display:none; padding:8px 8px 6px;
        border:1px solid rgba(226,232,240,0.8);
        border-top:none; border-radius:0 0 10px 10px;
        background:#FFF;
    }
    #mon_left > .mon-folder.open > .mon-folder-body { display:block; }

    /* NESTED folders stack vertically inside */
    #mon_left .mon-folder .mon-folder {
        display:block; margin:0 0 4px; width:auto;
    }
    #mon_left .mon-folder .mon-folder > .mon-folder-head {
        background:transparent; padding:7px 10px; border-radius:8px;
    }
    #mon_left .mon-folder .mon-folder > .mon-folder-head:hover { background:rgba(124,58,237,0.06); }
    #mon_left .mon-folder .mon-folder > .mon-folder-body {
        padding:2px 0 4px 8px;
        border:none; border-radius:0; background:transparent;
    }
    #mon_left .mon-leaf { padding:9px 12px; font-size:9pt; }

    .mon-right-header { position:static; }

    /* Header: stack the two rows vertically. */
    #mon_header {
        flex-direction:column; align-items:stretch; flex-wrap:nowrap;
        gap:8px; padding-bottom:8px;
    }
    #mon_top_tabs {
        width:100%; flex-wrap:nowrap;
        overflow-x:auto; -webkit-overflow-scrolling:touch;
    }
    #mon_tray {
        width:100%; flex-wrap:nowrap;
        overflow-x:auto; -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        gap:6px; padding:0; margin:0; border:none;
    }
    #mon_tray::-webkit-scrollbar { display:none; }
    #mon_tray .mon-tray-label { display:none; }
    #mon_tray .mon-tray-group { flex-shrink:0; }
    #mon_tray .mon-tray-pill  { padding:5px 10px; font-size:8pt; }
    #mon_tray .mon-tray-clear { flex-shrink:0; margin-left:4px; }
}
@media (max-width: 600px) {
    #monitor_wrapper   { padding:4px 6px 60px; }
    .mon-card          { grid-template-columns:3px 36px 1fr auto; padding:10px 10px 10px 0; gap:10px; }
    .mon-avatar        { width:36px; height:36px; font-size:9pt; }
    .mon-card-footer   { font-size:7.5pt; gap:6px; }
    .mon-ttab          { padding:6px 12px; font-size:8.5pt; }
    /* Ultra-tight pills to maximize chance of one-line fit on 360px viewports */
    #mon_tray .mon-tray-group { padding:2px; }
    #mon_tray .mon-tray-pill  { padding:5px 9px; font-size:7.5pt; }
    /* Tighter accordion head + pills on ultra-narrow screens */
    #mon_left > .mon-folder > .mon-folder-head { padding:10px 12px; font-size:8.5pt; }
}
@media (prefers-reduced-motion: reduce) {
    .mon-card, .mon-grid-card,
    .mon-lvs-tab.active .mon-lvs-count,
    .mon-leaf.drop-target {
        animation:none !important;
    }
    .mon-card:hover, .mon-grid-card:hover { transform:none; }
}



/* ═══════════════════════════════════════════════════════════════════════
   §26  LEGACY OVERRIDES
   ───────────────────────────────────────────────────────────────────────
   Accumulated override passes: v16 "Focus & Flow" · v17 "Living Interface" ·
   v19 "Liquid Amethyst" · KPM Convergence · Tri-View Matrix · Kinetic
   Spotlight · Skeleton Engine · Cascade Glass Filter · Monitor Control
   Center · FAB Chain · Top-Nav Redesign.

   These rules live at the END of the cascade on purpose — they override
   earlier sections by specificity or !important. DO NOT re-order them
   relative to each other without testing every affected page.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────
   §2  GLOBAL RESET & BASE (CLINICAL PRECISION)
   ─────────────────────────────────────────────────────────────────────── */
/* (Merged into §2 above — no duplicate needed) */

/* (html,body and ::selection merged into §2 above) */

/* ───────────────────────────────────────────────────────────────────────
   §6  SURFACE PANELS & CARDS (LEVITATING BENTO)
   ─────────────────────────────────────────────────────────────────────── */
.div_box_1, .div_box_2, .div_window, .rich-card {
    background: var(--surface-card) !important;
    border: none !important; /* Kill the hard border */
    border-radius: 24px;     /* Softer, more modern radius */
    box-shadow: var(--shadow-float) !important;
    padding: 28px;           /* Luxurious whitespace */
    transition: all var(--spring-fast);
    position: relative;
    overflow: hidden;
}

/* The Luminous Hover State */
.div_box_1:hover, .div_box_2:hover, .div_window:hover, .rich-card:hover {
    transform: translateY(-4px) scale(1.005) !important; 
    box-shadow: var(--shadow-hover) !important;
    z-index: 10;
}

/* ───────────────────────────────────────────────────────────────────────
   §7  CONTROL FAMILY (LIQUID TACTILITY)
   ─────────────────────────────────────────────────────────────────────── */
/* Shared Base */
.filter-pill, .div_button, .card-header-btn, .sleek-toggle, .btn-purple-pro {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: inherit; font-weight: 600; letter-spacing: 0.01em;
    border-radius: 12px; /* Machined rectangle, not a loose pill */
    padding: 10px 18px;
    cursor: pointer;
    text-decoration: none !important;
    border: none !important;
    transition: all var(--spring-bouncy);
    user-select: none;
}

/* Neutral / Ghost Buttons (Sleek, clickable hardware feel) */
.filter-pill, .div_button {
    background: var(--surface-card) !important;
    color: var(--text-body) !important;
    box-shadow: var(--ring-subtle), 0 2px 4px -1px rgba(15, 23, 42, 0.03) !important;
}

.filter-pill:hover, .div_button:hover {
    background: var(--surface-hover) !important;
    color: var(--text-strong) !important;
    box-shadow: var(--ring-accent), 0 6px 12px -2px rgba(124, 58, 237, 0.08) !important;
    transform: translateY(-2px);
}

.filter-pill:active, .div_button:active {
    transform: scale(0.96); /* Satisfying tactile squish */
    box-shadow: var(--ring-accent), 0 1px 2px rgba(124, 58, 237, 0.05) !important;
}

/* Primary Accent Buttons (The Crown Jewel) */
#submit_btn_container.div_button, .save-action-btn, .btn-purple-pro, .active-tab-ultra {
    background: linear-gradient(180deg, var(--pro-accent-1) 0%, var(--pro-accent-2) 100%) !important;
    color: #FFFFFF !important;
    box-shadow: var(--shadow-primary) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Keeps white text razor sharp */
}

#submit_btn_container.div_button:hover, .save-action-btn:hover, .btn-purple-pro:hover {
    background: linear-gradient(180deg, #9D75F8 0%, var(--pro-accent-1) 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px var(--pro-accent-1), 
                0 2px 4px rgba(255, 255, 255, 0.25) inset, 
                0 14px 28px -4px rgba(109, 40, 217, 0.45) !important;
}

#submit_btn_container.div_button:active, .save-action-btn:active, .btn-purple-pro:active {
    transform: scale(0.96);
    box-shadow: 0 0 0 1px var(--pro-accent-2), 
                0 4px 8px -2px rgba(109, 40, 217, 0.3) !important;
}

/* ───────────────────────────────────────────────────────────────────────
   §10 INPUTS (FLUSH & FOCUSED)
   ─────────────────────────────────────────────────────────────────────── */
input, textarea, select {
    background: var(--surface-card);
    box-shadow: var(--ring-subtle), 0 2px 4px -2px rgba(15, 23, 42, 0.02) inset;
    border: none !important;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 14px;
    transition: all var(--spring-fast);
}

input:focus, textarea:focus, select:focus {
    box-shadow: 0 0 0 2px var(--surface-card), 
                0 0 0 4px var(--pro-accent-1), 
                0 4px 12px rgba(124, 58, 237, 0.15) !important;
    transform: translateY(-1px);
    outline: none;
}




















/* ═══════════════════════════════════════════════════════════════════════
   PROHMOTION QMS  —  v16 "FOCUS & FLOW" EXPANSION
   ───────────────────────────────────────────────────────────────────────
   Concept: Ambient scrollbars, cinematic modal blurring, and "Ghost Rows" 
   that reduce cognitive load while keeping data highly scannable.
   ═══════════════════════════════════════════════════════════════════════ */

/* (scrollbar styles merged into §2) */

/* ───────────────────────────────────────────────────────────────────────
   §11 BADGES & STATUS INDICATORS (The "Tint & Pulse" System)
   ─────────────────────────────────────────────────────────────────────── */
/* Ditching solid fills. We use 8% opacity backgrounds with sharp text. */
.alert-pill, .tab-badge-count, .rc-badge, .status-badge {
    background: rgba(124, 58, 237, 0.08) !important;
    color: var(--pro-accent-2) !important;
    border: none !important;
    box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.15) !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: inline-flex; 
    align-items: center; 
    gap: 6px;
}

/* Add a crisp, glowing status dot inside the badges */
.alert-pill::before, .status-badge::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pro-accent-1);
    box-shadow: 0 0 6px var(--pro-accent-1);
}

/* Semantic Overrides for Badges */
.status-green  { background: rgba(21, 128, 61, 0.08) !important; color: #15803D !important; box-shadow: inset 0 0 0 1px rgba(21, 128, 61, 0.15) !important; }
.status-green::before { background: #10B981; box-shadow: 0 0 6px rgba(16, 185, 129, 0.6); }

.status-red    { background: rgba(185, 28, 28, 0.08) !important; color: #B91C1C !important; box-shadow: inset 0 0 0 1px rgba(185, 28, 28, 0.15) !important; }
.status-red::before { background: #EF4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.6); }

/* ───────────────────────────────────────────────────────────────────────
   §12 INBOX ROWS & LIST TILES (Ghost Rows)
   ─────────────────────────────────────────────────────────────────────── */
/* Make rows practically invisible until hovered to reduce spreadsheet-fatigue */
.inbox-row { 
    background: transparent !important; 
    border-bottom: 1px solid var(--border-subtle);
    padding: 18px 24px; 
    cursor: pointer; 
    transition: all var(--spring-fast); 
    position: relative; 
    border-radius: 12px;
    margin-bottom: 2px;
}

/* The Reveal: Only show the card/shadow structure on hover */
.inbox-row:hover { 
    background: var(--surface-card) !important; 
    transform: scale(1.01); 
    box-shadow: var(--shadow-float);
    border-color: transparent;
    z-index: 10; 
}

/* Subtle accent line on the left for unread/important rows */
.inbox-row.unread-row {
    box-shadow: inset 3px 0 0 var(--pro-accent-1);
}
.inbox-row.unread-row:hover {
    box-shadow: inset 3px 0 0 var(--pro-accent-1), var(--shadow-float);
}

.inbox-avatar { 
    width: 42px; height: 42px; 
    border-radius: 12px; /* Machined squircle, not a circle */
    background: rgba(124, 58, 237, 0.08); 
    color: var(--pro-accent-2); 
    box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.15);
    font-weight: 700;
}

/* ───────────────────────────────────────────────────────────────────────
   §17 MODAL & EDITOR SYSTEM (Cinematic Focus)
   ─────────────────────────────────────────────────────────────────────── */

/* The Modal Box itself */
#input_new_div {
    background-color: var(--surface-card);
    border-radius: 24px;
    border: none !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset, 
                0 32px 64px -16px rgba(15, 23, 42, 0.2) !important;
}

/* Modal Headers & Footers - seamless integration */
.modal-header, .editor-footer { 
    background: var(--surface-card); 
    border-color: var(--border-subtle);
}
.modal-canvas { 
    background: var(--surface-hover); /* Slightly off-white to contrast the white inputs */
}





















/* ═══════════════════════════════════════════════════════════════════════
   PROHMOTION QMS  —  v17 "THE LIVING INTERFACE" EXPANSION
   ───────────────────────────────────────────────────────────────────────
   Concept: Holographic data cards, breathing mesh dashboards, and a 
   "Hyper-Focus" Zen Mode that feels like a spatial computing OS.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────
   §1  FLUID MESH ANIMATIONS (The "Breathing" Dashboard)
   ─────────────────────────────────────────────────────────────────────── */
/* We create a subtle, slow-moving ambient aurora for the main directory shell */
@keyframes ambientAurora {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.dir-dashboard {
    background: linear-gradient(-45deg, 
        rgba(252, 253, 255, 1), 
        rgba(241, 245, 249, 0.8), 
        rgba(238, 242, 255, 0.9), 
        rgba(250, 245, 255, 0.9)
    ) !important;
    background-size: 300% 300% !important;
    animation: ambientAurora 20s ease-in-out infinite !important;
    border: none !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 
                0 24px 48px -12px rgba(15, 23, 42, 0.05) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
}

/* ───────────────────────────────────────────────────────────────────────
   §2  HOLOGRAPHIC METRICS (Directory & Dossier)
   ─────────────────────────────────────────────────────────────────────── */
/* Ditching flat boxes. These cards now look like etched glass with a glowing core. */
.dir-layout .dir-metrics .metric-card, .dossier-wrapper .metric-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.3)) !important;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.03) !important;
    position: relative;
    overflow: hidden;
    transition: transform var(--spring-bouncy), box-shadow var(--spring-bouncy) !important;
}

/* The Holographic Sweep: A shimmering line that glides across the card on hover */
.dir-layout .dir-metrics .metric-card::after, .dossier-wrapper .metric-card::after {
    content: "";
    position: absolute;
    top: 0; left: -150%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.8), 
        transparent
    );
    transform: skewX(-25deg);
    transition: left 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 1;
}

.dir-layout .dir-metrics .metric-card:hover::after, .dossier-wrapper .metric-card:hover::after {
    left: 150%;
}

.dir-layout .dir-metrics .metric-card:hover, .dossier-wrapper .metric-card:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.2), 
                0 16px 32px -8px rgba(124, 58, 237, 0.1) !important;
}

/* Metric Typography: Making numbers look like financial tickers */
.dir-layout .dir-metrics .metric-val, .dossier-wrapper .metric-val {
    font-family: "Inter", monospace; /* Adding monospace tabular feel to digits */
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, var(--text-strong), var(--pro-accent-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 12px rgba(124, 58, 237, 0.1);
}

/* ───────────────────────────────────────────────────────────────────────
   §3  HYPER-FOCUS ZEN MODE (§18 Overhaul)
   ─────────────────────────────────────────────────────────────────────── */
/* When Zen mode activates, the app literally fades into the shadows, leaving 
   only the content suspended in mid-air. */
body.focus-active {
    background: #020617 !important; /* Slate 950 - true darkness */
    transition: background 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.zen-modest-active .acc-card:not(.zen-target) {
    opacity: 0.05 !important; /* Pushed further back */
    filter: blur(4px) grayscale(100%);
    transform: scale(0.98);
}

.zen-modest-active .zen-target {
    background: var(--surface-card) !important;
    transform: scale(1.04);
    border-radius: 16px;
    /* A divine spotlight effect from above */
    box-shadow: 0 -20px 60px -20px rgba(124, 58, 237, 0.15), 
                0 40px 80px -20px rgba(0, 0, 0, 0.5), 
                inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(124, 58, 237, 0.3) !important;
    z-index: 100;
}

























/* ═══════════════════════════════════════════════════════════════════════
   PROHMOTION QMS  —  v19 "LIQUID AMETHYST" FINALE
   ───────────────────────────────────────────────────────────────────────
   Concept: Flawless contrast overrides for active states, combined with 
   Apple VisionOS-style liquid glass for all dropdowns and floating docks.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────
   §1  THE CONTRAST LOCK (Fixing White-on-White Active States)
   ─────────────────────────────────────────────────────────────────────── */
/* We use !important here defensively to ensure hover states never wash out active buttons */
.filter-pill.active, 
.filter-pill.active-view, 
.sleek-toggle.active-toggle, 
.focus-tier-btn.active-toggle, 
.active-tab-ultra, 
.f-tab.active,
.inbox-tab-ultra.active,
#tab_btn_approvals.active-tab-ultra,
#tab_btn_unread.active-tab-ultra {
    /* Deep, rich, unmistakable gradient */
    background: linear-gradient(135deg, var(--pro-accent-2) 0%, var(--pro-accent-3) 100%) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(109, 40, 217, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important; /* Locks crispness */
    transform: translateY(0) !important;
}

/* The Active Hover: It should glow brighter, not turn white */
.filter-pill.active:hover, 
.sleek-toggle.active-toggle:hover, 
.focus-tier-btn.active-toggle:hover, 
.active-tab-ultra:hover, 
.f-tab.active:hover {
    background: linear-gradient(135deg, var(--pro-accent-1) 0%, var(--pro-accent-2) 100%) !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(109, 40, 217, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
}

/* Force icons inside active buttons to invert to pure white */
.filter-pill.active img, 
.active-tab-ultra img, 
.sleek-toggle.active-toggle img {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
}

/* ───────────────────────────────────────────────────────────────────────
   §2  LIQUID GLASS MENUS & DROPDOWNS (The VisionOS Treatment)
   ─────────────────────────────────────────────────────────────────────── */
/* Elevating floating menus from flat white boxes to frosted glass */
.search-dropdown, .rc-hover-actions {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.15), 
                0 0 0 1px rgba(15, 23, 42, 0.03) !important;
    border-radius: 20px !important;
    padding: 8px !important;
}
/* Premium dropdown gets solid white — backdrop-filter creates stacking context that fights z-index */
.premium-dropdown-menu {
    background: #FFFFFF !important;
    box-shadow: 0 20px 48px -8px rgba(15,23,42,0.16), 0 0 0 1px rgba(15,23,42,0.04) !important;
}

/* Dropdown/Search Item Micro-Interactions */
.dropdown-item, .search-item {
    border-radius: 12px !important;
    transition: all var(--spring-fast) !important;
    margin-bottom: 2px;
    background: transparent !important;
}

/* Rather than a heavy gray hover, we use a beautiful faint violet tint that slides in */
.dropdown-item:hover, .search-item:hover {
    background: rgba(124, 58, 237, 0.06) !important;
    color: var(--pro-accent-2) !important;
    transform: translateX(6px) !important; /* Sleek lateral slide */
    box-shadow: none !important;
}

/* ───────────────────────────────────────────────────────────────────────
   §3  THE FLOATING DOCKS (Island Tabs & Filter Rails)
   ─────────────────────────────────────────────────────────────────────── */
/* Transforming the top filter bars into floating iOS-style docks */
.island-tabs, .filter-tabs, .control-center {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(16px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 8px 32px -8px rgba(15, 23, 42, 0.05) !important;
    border-radius: 24px !important;
    padding: 8px !important;
}

/* Beautiful structural separators for your blue-pill filters */
.control-divider {
    width: 2px;
    height: 16px;
    background: rgba(226, 232, 240, 0.6);
    border-radius: 2px;
    margin: 0 8px;
}






















/* ═══════════════════════════════════════════════════════════════════════
   §20  THE KPM CONVERGENCE (Report Tiles)
   ─────────────────────────────────────────────────────────────────────── */
.ultra-list-tile {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03) !important;
    padding: 0 !important; /* Stripped to allow flush headers/footers */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ultra-list-tile:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 25px rgba(15, 23, 42, 0.06) !important;
    border-color: #94A3B8 !important;
}

/* Redefining the Tile Body as a vertical stack */
.ultra-list-tile .tile-body {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    gap: 0 !important;
}

/* The New Report Header (Mimics .kpm-header) */
.report-card-header {
    padding: 16px 24px;
    border-bottom: 1px solid #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
}

/* The New Report Body (Mimics .kpm-body) */
.report-card-body {
    padding: 20px 24px;
    flex-grow: 1;
    background: transparent;
}

/* The New Report Footer (Mimics .kpm-footer) */
.report-card-footer {
    padding: 12px 24px;
    background: #F8FAFC;
    border-top: 1px solid #E2E8F0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

















/* ═══════════════════════════════════════════════════════════════════════
   §21  THE TRI-VIEW MATRIX (Wide, Grid, List)
   ─────────────────────────────────────────────────────────────────────── */

/* Toggle Button Styling */
.view-toggle-btn {
    background: transparent; border: none; color: #94A3B8; padding: 6px 12px;
    border-radius: 8px; cursor: pointer; transition: all var(--spring-fast);
}
.view-toggle-btn:hover { background: #F1F5F9; color: #475569; }
.view-toggle-btn.active-toggle {
    background: #FFFFFF; color: var(--pro-accent-2);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(15, 23, 42, 0.05);
}

/* -----------------------------------------------------------------------
   VIEW 1: WIDE (Default - No specific overrides needed)
   ----------------------------------------------------------------------- */
.paginate-container { display: flex; flex-direction: column; gap: 16px; }


/* -----------------------------------------------------------------------
   VIEW 2: GRID (The Bento Board)
   ----------------------------------------------------------------------- */
.paginate-container.layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    align-items: stretch;
}

.layout-grid .ultra-list-tile { height: 100%; justify-content: space-between; }

/* Fold the Header */
.layout-grid .report-card-header {
    flex-direction: column; align-items: flex-start; gap: 16px;
}
.layout-grid .report-card-header > div:last-child { align-self: flex-end; }

/* Truncate Content Heavily */
.layout-grid .report-card-body .inset-content-block { padding: 12px; }
.layout-grid .report-card-body .inset-content-block > div > div { -webkit-line-clamp: 2 !important; }
.layout-grid .chat-bubble-container { display: none !important; } /* Hide chat in grid */

/* Fold the Footer */
.layout-grid .report-card-footer { flex-direction: column; gap: 12px; align-items: stretch; }
.layout-grid .report-card-footer > div { justify-content: space-between; width: 100%; }


/* -----------------------------------------------------------------------
   VIEW 3: LIST (The Audit Log)
   ----------------------------------------------------------------------- */
.paginate-container.layout-list {
    display: flex; flex-direction: column; gap: 6px;
}

.layout-list .ultra-list-tile {
    border-radius: 12px !important;
    min-height: 60px;
}

/* Transform the body into a single flex row */
.layout-list .ultra-list-tile .tile-body {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between;
    padding: 10px 16px !important;
    gap: 20px !important;
}

/* Strip padding from header and make it flow */
.layout-list .report-card-header {
    padding: 0; border: none; flex-direction: row; flex-grow: 1; min-width: 0;
}
.layout-list .report-card-header > div:first-child { width: 250px; flex-shrink: 0; }

/* HIDE THE ENTIRE NARRATIVE BODY */
.layout-list .report-card-body { display: none !important; }

/* Strip padding from footer and make it flow */
.layout-list .report-card-footer {
    padding: 0; border: none; background: transparent; flex-direction: row; gap: 16px; flex-shrink: 0;
}

/* Hide heavy tags in the list view to keep it clean */
.layout-list .report-card-footer > div:first-child > div:nth-child(2) { display: none; }

























/* ═══════════════════════════════════════════════════════════════════════
   §22  THE KINETIC SPOTLIGHT & SKELETON ENGINE
   ───────────────────────────────────────────────────────────────────────
   Concept: Cursor-tracking radial gradients for physical depth, and 
   shimmering skeletons for zero-latency perceived load times.
   ═══════════════════════════════════════════════════════════════════════ */

/* -----------------------------------------------------------------------
   THE SPOTLIGHT MASK (Cursor-Tracking Glow)
   ----------------------------------------------------------------------- */
.ultra-list-tile {
    /* Set baseline coordinates in case JS hasn't fired yet */
    --mouse-x: 50%;
    --mouse-y: 50%;
    /* We use isolate to ensure the glow never bleeds over text/images */
    isolation: isolate; 
}

/* The Background Glow */
.ultra-list-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* A localized, high-blur radial gradient tracking the mouse */
    background: radial-gradient(
        600px circle at var(--mouse-x) var(--mouse-y), 
        rgba(124, 58, 237, 0.04), /* Subtle violet core */
        transparent 40%
    );
    opacity: 0;
    transition: opacity var(--spring-fast);
    pointer-events: none;
    z-index: -1; /* Sits beneath the content, above the white card base */
}

/* The Border Glow (The "Glass Edge") */
.ultra-list-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px; /* 1px border thickness */
    background: radial-gradient(
        400px circle at var(--mouse-x) var(--mouse-y), 
        rgba(124, 58, 237, 0.4), /* Sharp violet edge */
        transparent 40%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--spring-fast);
    pointer-events: none;
}

/* Ignite the spotlight on hover */
.ultra-list-tile:hover::before,
.ultra-list-tile:hover::after {
    opacity: 1;
}

/* -----------------------------------------------------------------------
   SKELETON SHIMMER (For blazing fast perceived loading)
   ----------------------------------------------------------------------- */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

.skeleton-box {
    background: #F1F5F9;
    background-image: linear-gradient(
        90deg, 
        rgba(255, 255, 255, 0) 0, 
        rgba(255, 255, 255, 0.6) 20%, 
        rgba(255, 255, 255, 0) 40%
    );
    background-size: 1000px 100%;
    background-repeat: no-repeat;
    animation: shimmer 2s infinite linear;
    border-radius: 8px;
    color: transparent !important;
    pointer-events: none;
}

/* When applying .skeleton-box to an avatar */
.avatar-circle.skeleton-box { border-radius: 50%; }

/* Staggered entrance for the actual content when it replaces the skeleton */
.content-ready {
    animation: ultraBentoSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}











.editor-footer .div_button * {
    pointer-events: none;
}
/* Footer buttons must not shift position — buttons are too close together */
.editor-footer .div_button:hover,
.editor-footer .div_button:active {
    transform: none !important;
}
.editor-footer .div_button:hover img,
.editor-footer .div_button:hover svg {
    transform: none !important;
}


/* ==========================================
   🚀 THE NUCLEAR MOBILE SWIPE OVERRIDE
   ========================================== */
@media (max-width: 768px) {
    /* 1. Brick wall for the parent: do not stretch past the screen! */
    .top-nav-primary-row {
        width: 100vw !important;
        max-width: 100% !important;
        overflow: hidden !important;
        position: relative !important;
    }

    /* 2. The Scroll Track: Must have explicit width to trigger overflow */
    .top-nav-scroll {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important; /* Firefox */
        width: 100% !important; 
        padding-right: 80px !important; /* Extra padding so the last button clears the profile icons */
    }

    .top-nav-scroll::-webkit-scrollbar {
        display: none !important; /* Chrome/Safari */
    }

    /* 3. STOP THE SQUISH: The absolute cure for "boxes in boxes" */
    .top-nav-scroll > * {
        flex: 0 0 auto !important; /* Do not grow, DO NOT SHRINK, keep natural size */
        white-space: nowrap !important; /* Force text to stay on one line */
    }

    /* 4. The Click-Shield Assassin: Pin the right-side icons and kill their background */
    .global-top-actions {
        position: absolute !important;
        right: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: transparent !important;
        width: auto !important; /* Stop it from stretching across the screen */
        pointer-events: none !important; /* Ghost the wrapper */
    }

    .global-top-actions > * {
        pointer-events: auto !important; /* Keep the actual avatars clickable */
    }
}
















/* =============================================
   CASCADE GLASS FILTER ENGINE
   Correlated with FAB purple: #7C3AED / #A855F7
   ============================================= */

/* Monitor button — active state widens + glows */
a.monitor-pill {
    transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    position: relative;
}
a.monitor-pill.tray-is-open {
    min-width: 130px !important;
    background: linear-gradient(135deg, rgba(124,58,237,0.09), rgba(168,85,247,0.05)) !important;
    border: 1px solid rgba(124,58,237,0.35) !important;
    color: #6D28D9 !important;
    box-shadow: 0 4px 14px rgba(124,58,237,0.12), inset 0 1px 0 rgba(255,255,255,0.7) !important;
}
a.monitor-pill .mon-chevron {
    display: inline-block;
    margin-left: 5px;
    font-size: 8px;
    opacity: 0.5;
    transition: transform 0.35s ease, opacity 0.2s ease;
    vertical-align: middle;
}


/* The Glass Tray */
#cascade_tray {
    position: relative;
    width: 100%;
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border-bottom: 1px solid rgba(226,232,240,0.7);
    border-top: 1px solid rgba(255,255,255,0.9);
    box-shadow: 0 8px 32px -8px rgba(15,23,42,0.10), inset 0 1px 0 rgba(255,255,255,0.95);
    overflow: hidden;
    transition: max-height 0.38s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease;
    max-height: 300px;
    opacity: 1;
}
#cascade_tray.tier-all-hidden {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    border: none;
    box-shadow: none;
}

/* Tier 2 — Quick pill row */
#tray_tier2 {
    padding: 10px 16px 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    transition: max-height 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.25s ease, padding 0.3s ease;
    max-height: 80px;
    opacity: 1;
    overflow: hidden;
}
#tray_tier2.tier2-hidden {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
}

/* Quick filter pills — same DNA as sleek-toggle */
/* No separate qt-pill needed — they now USE sleek-toggle directly */

/* Always-visible active badges strip */
#tray_active_badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 8px 16px 10px;
    border-top: 1px solid rgba(226,232,240,0.6);
    background: rgba(248,250,252,0.5);
}
#tray_active_badges:empty { display: none; }

.active-filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px 5px 13px;
    border-radius: 100px;
    font-size: 8.5pt; font-weight: 700;
    cursor: pointer; user-select: none;
    transition: all 0.18s ease;
    border: 1.5px solid;
}
.active-filter-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.active-filter-chip .chip-x {
    width: 16px; height: 16px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11pt; line-height: 1; opacity: 0.5;
    transition: opacity 0.15s, background 0.15s;
    background: transparent;
}
.active-filter-chip:hover .chip-x { opacity: 1; }

/* Tier 2/3 divider */
.tray-tier-divider {
    height: 1px;
    margin: 0 16px;
    background: linear-gradient(90deg, transparent, rgba(203,213,225,0.6), transparent);
    transition: opacity 0.2s;
}
.tray-tier-divider.divider-hidden { opacity: 0; }

/* Collapse bar */
.tray-collapse-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 16px;
    background: rgba(248,250,252,0.6);
    border-top: 1px solid rgba(226,232,240,0.5);
    font-size: 7.5pt;
    font-weight: 800;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    cursor: default;
    user-select: none;
}
.tray-collapse-btn {
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 7.5pt;
    font-weight: 800;
    cursor: pointer;
    color: #64748B;
    background: rgba(241,245,249,0.8);
    border: 1px solid rgba(203,213,225,0.6);
    transition: all 0.15s ease;
    letter-spacing: 0.5px;
}
.tray-collapse-btn:hover {
    background: #FFF;
    color: #7C3AED;
    border-color: rgba(124,58,237,0.3);
}

/* Unify view toggle buttons with the glass system */
.view-toggle-btn {
    background: rgba(248,250,252,0.7) !important;
    border: 1.5px solid rgba(203,213,225,0.7) !important;
    border-radius: 10px !important;
    padding: 6px 10px !important;
    transition: all 0.18s ease !important;
}
.view-toggle-btn:hover {
    background: #FFF !important;
    border-color: #A855F7 !important;
    box-shadow: 0 2px 8px rgba(124,58,237,0.1) !important;
}
.view-toggle-btn.active-toggle {
    background: linear-gradient(135deg, rgba(124,58,237,0.1), rgba(168,85,247,0.06)) !important;
    border-color: rgba(124,58,237,0.4) !important;
    color: #6D28D9 !important;
}
















/* ============================================
   MONITOR CONTROL CENTER — Complete System
   ============================================ */

/* Tray Shell */
#cascade_tray {
    position: relative; width: 100%;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border-bottom: 1px solid rgba(226,232,240,0.7);
    box-shadow: 0 8px 32px -8px rgba(15,23,42,0.10), inset 0 1px 0 rgba(255,255,255,0.95);
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease;
    max-height: 500px; opacity: 1;
}
#cascade_tray.tier-all-hidden {
    max-height: 0; opacity: 0; pointer-events: none;
    border: none; box-shadow: none;
}

/* Tier rows */
.monitor-tier {
    transition: max-height 0.32s cubic-bezier(0.16,1,0.3,1), opacity 0.25s ease, padding 0.3s ease;
    overflow: hidden;
}
.monitor-tier.tier-hidden,
#tray_tier3.tier-hidden {
    max-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* Tier 1 — View controls + Quick pills */
#tray_tier1 {
    max-height: 60px;
    padding: 8px 16px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    border-bottom: 1px solid rgba(226,232,240,0.5);
}

/* Tier 2 — Inbox tab navigation */
#tray_tier2 {
    max-height: 70px;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(226,232,240,0.4);
    background: rgba(248,250,252,0.4);
}
.monitor-tabs-row {
    display: flex; align-items: center; gap: 5px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}
.monitor-tabs-row::-webkit-scrollbar { display: none; }

/* Tab pills — inherit from inbox but elevated */
.mon-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 13px; border-radius: 10px; white-space: nowrap;
    font-size: 8.5pt; font-weight: 700; cursor: pointer;
    border: 1.5px solid rgba(203,213,225,0.7);
    background: rgba(248,250,252,0.8); color: #475569;
    transition: all 0.2s cubic-bezier(0.2,0.8,0.2,1);
    position: relative; user-select: none; flex-shrink: 0;
}
.mon-tab:hover {
    background: linear-gradient(135deg, #8B5CF6, #6D28D9);
    color: #FFF; border-color: #5B21B6;
    box-shadow: 0 4px 14px rgba(109,40,217,0.25);
    transform: translateY(-1px);
}
.mon-tab:hover img { filter: brightness(0) invert(1) !important; opacity: 1 !important; }
.mon-tab.mon-tab-active {
    background: linear-gradient(135deg, #7C3AED, #4C1D95);
    color: #FFF; border-color: #4C1D95;
    box-shadow: 0 4px 16px rgba(124,58,237,0.35);
}
.mon-tab.mon-tab-active img { filter: brightness(0) invert(1) !important; opacity: 1 !important; }
.mon-tab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: rgba(255,255,255,0.25); color: inherit;
    font-size: 7.5pt; font-weight: 800; border-radius: 20px;
    transition: background 0.2s;
}
.mon-tab.mon-tab-active .mon-tab-badge { background: rgba(255,255,255,0.2); }
.mon-tab:not(.mon-tab-active) .mon-tab-badge {
    background: #EF4444; color: #FFF;
}
.mon-tab:not(.mon-tab-active) .mon-tab-badge.badge-blue { background: #0F62FE; color: #FFF; }
.mon-tab:not(.mon-tab-active) .mon-tab-badge.badge-teal { background: #0F766E; color: #FFF; }
.mon-tab:not(.mon-tab-active) .mon-tab-badge.badge-amber { background: #F59E0B; color: #FFF; }
.mon-tab:not(.mon-tab-active) .mon-tab-badge.badge-slate { background: #64748B; color: #FFF; }
.mon-tab:not(.mon-tab-active) .mon-tab-badge.badge-violet { background: #8B5CF6; color: #FFF; }
.mon-tab-divider {
    width: 1px; height: 22px; background: rgba(203,213,225,0.7);
    flex-shrink: 0; margin: 0 2px;
}

/* Tier 3 — Deep filter dropdowns */
#tray_tier3 {
    max-height: 1000px;
    overflow: visible;
    opacity: 1;
    transition: max-height 0.38s cubic-bezier(0.16,1,0.3,1), opacity 0.25s ease;
}
#tray_tier3.tier-hidden {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Quick pills (report type) */
.qt-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 100px;
    font-size: 8.5pt; font-weight: 700; cursor: pointer;
    border: 1.5px solid rgba(203,213,225,0.8);
    background: rgba(248,250,252,0.8); color: #475569;
    transition: all 0.18s ease; white-space: nowrap; user-select: none;
}
.qt-pill:hover { background:#FFF; border-color:#A855F7; color:#7C3AED; box-shadow:0 2px 8px rgba(124,58,237,0.12); transform:translateY(-1px); }
.qt-pill.qt-active { background:linear-gradient(135deg,rgba(124,58,237,0.1),rgba(168,85,247,0.06)); border-color:rgba(124,58,237,0.4); color:#6D28D9; }

/* View toggle buttons */
.view-toggle-btn {
    background: rgba(248,250,252,0.7) !important;
    border: 1.5px solid rgba(203,213,225,0.7) !important;
    border-radius: 10px !important; padding: 6px 10px !important;
    transition: all 0.18s ease !important; cursor: pointer;
}
.view-toggle-btn:hover { background:#FFF !important; border-color:#A855F7 !important; box-shadow:0 2px 8px rgba(124,58,237,0.1) !important; }
.view-toggle-btn.active-toggle, .view-toggle-btn.active-view {
    background: linear-gradient(135deg,rgba(124,58,237,0.1),rgba(168,85,247,0.06)) !important;
    border-color: rgba(124,58,237,0.4) !important; color: #6D28D9 !important;
}

/* Active filter badges */
.monitor-active-badge {
    padding: 4px 12px; font-size: 8.5pt; font-weight: 700; border-radius: 100px;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    transition: all 0.15s ease;
}
.monitor-active-badge:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

/* Collapse/hide controls */
.tray-collapse-btn {
    padding: 4px 12px; border-radius: 100px; font-size: 8pt; font-weight: 700;
    cursor: pointer; color: #64748B; background: rgba(241,245,249,0.8);
    border: 1px solid rgba(203,213,225,0.6); transition: all 0.15s ease; white-space: nowrap;
}
.tray-collapse-btn:hover { background:#FFF; color:#7C3AED; border-color:rgba(124,58,237,0.3); }

/* Animations */
@keyframes pulse-red {
	0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.6), 0 4px 20px rgba(239,68,68,0.3); }
	60%  { box-shadow: 0 0 0 11px rgba(239,68,68,0), 0 4px 20px rgba(239,68,68,0.3); }
	100% { box-shadow: 0 0 0 0 rgba(239,68,68,0), 0 4px 20px rgba(239,68,68,0.3); }
}
@keyframes pulse-orange {
	0%   { box-shadow: 0 0 0 0 rgba(249,115,22,0.6), 0 4px 20px rgba(249,115,22,0.3); }
	60%  { box-shadow: 0 0 0 11px rgba(249,115,22,0), 0 4px 20px rgba(249,115,22,0.3); }
	100% { box-shadow: 0 0 0 0 rgba(249,115,22,0), 0 4px 20px rgba(249,115,22,0.3); }
}
@keyframes pulse-green {
	0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.6), 0 4px 20px rgba(34,197,94,0.3); }
	60%  { box-shadow: 0 0 0 11px rgba(34,197,94,0), 0 4px 20px rgba(34,197,94,0.3); }
	100% { box-shadow: 0 0 0 0 rgba(34,197,94,0), 0 4px 20px rgba(34,197,94,0.3); }
}

/* Monitor button active state */
a.monitor-pill { transition: all 0.35s cubic-bezier(0.2,0.8,0.2,1) !important; }
a.monitor-pill.tray-is-open {
    min-width: 130px !important;
    background: linear-gradient(135deg,rgba(124,58,237,0.09),rgba(168,85,247,0.05)) !important;
    border: 1px solid rgba(124,58,237,0.35) !important; color: #6D28D9 !important;
    box-shadow: 0 4px 14px rgba(124,58,237,0.12), inset 0 1px 0 rgba(255,255,255,0.7) !important;
}
.mon-chevron {
    display: inline-block; margin-left: 5px; font-size: 8px; opacity: 0.5;
    transition: transform 0.35s ease, opacity 0.2s ease; vertical-align: middle;
}
a.monitor-pill.tray-is-open .mon-chevron { transform: rotate(180deg); opacity: 1; color: #7C3AED; }







#fab_chain_wrapper {
	position: fixed; bottom: 84px; right: 24px;
	display: flex; flex-direction: column; align-items: center;
	z-index: 10000000; touch-action: none; user-select: none;
}
.fab-chain-line {
	width: 2px; height: 16px; flex-shrink: 0;
	border-radius: 2px;
	background: linear-gradient(180deg, rgba(168,85,247,0.7), rgba(124,58,237,0.2));
	transition: background 0.3s ease;
}
#fab_sub_chain { flex-direction: column; align-items: center; }
.fab-sub-btn {
	width: 38px; height: 38px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: #FFF; flex-shrink: 0; cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.fab-sub-btn:hover { transform: scale(1.12) !important; animation: none !important; }











/* ═══════════════════════════════════════════════
   TOP NAV REDESIGN
═══════════════════════════════════════════════ */
#global_top_nav {
    position: sticky; top: 0; width: 100%; z-index: 999;
    display: flex; flex-direction: column;
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    border-bottom: 1px solid rgba(226,232,240,0.7);
    box-shadow: 0 2px 20px rgba(15,23,42,0.05);
    box-sizing: border-box;
}

/* Primary row */
.tnav-row {
    display: flex; align-items: center;
    gap: 8px; padding: 8px 14px;
    width: 100%; box-sizing: border-box;
}

/* Action buttons — equal share */
.tnav-actions {
    display: flex; align-items: center;
    gap: 4px; flex: 1; min-width: 0;
}
.tnav-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 5px; flex: 1;
    padding: 7px 10px; border-radius: 100px;
    font-size: 8.5pt; font-weight: 700; color: #475569;
    background: rgba(248,250,252,0.9);
    border: 1.5px solid rgba(203,213,225,0.7);
    cursor: pointer; text-decoration: none;
    transition: all 0.18s ease; white-space: nowrap;
    user-select: none; min-width: 0;
}
.tnav-btn svg { flex-shrink: 0; opacity: 0.65; }
.tnav-btn:hover {
    background: #fff; border-color: rgba(124,58,237,0.35);
    color: #6D28D9; box-shadow: 0 2px 10px rgba(124,58,237,0.1);
}
.tnav-btn:hover svg { opacity: 1; }
.tnav-btn-new {
    background: linear-gradient(135deg, #7C3AED, #4C1D95) !important;
    color: #fff !important; border-color: transparent !important;
    box-shadow: 0 3px 12px rgba(124,58,237,0.3) !important;
}
.tnav-btn-new svg { opacity: 1 !important; }
.tnav-btn-active {
    background: linear-gradient(135deg, rgba(124,58,237,0.09), rgba(168,85,247,0.05)) !important;
    border-color: rgba(124,58,237,0.3) !important; color: #6D28D9 !important;
}
.tnav-btn-active svg { opacity: 1 !important; }
.mon-chevron {
    font-size: 8px; opacity: 0.5; margin-left: 1px;
    transition: transform 0.3s ease;
}
.tray-is-open .mon-chevron { transform: rotate(180deg); opacity: 1; }

/* Search */
.tnav-search-wrap {
    flex: 2; min-width: 75px; max-width: 340px;
}
.tnav-search-inner {
    display: flex; align-items: center; gap: 0px;
    background: rgba(248,250,252,0.95);
    border: 1.5px solid rgba(203,213,225,0.7);
    border-radius: 100px; padding: 2px 5px;
    transition: all 0.2s ease;
    box-shadow: inset 0 1px 3px rgba(15,23,42,0.04);
}
.tnav-search-inner:focus-within {
    background: #fff;
    border-color: rgba(124,58,237,0.45);
    box-shadow: 0 0 0 3px rgba(124,58,237,0.08), inset 0 1px 3px rgba(15,23,42,0.04);
}
.tnav-search-icon { color: #94A3B8; flex-shrink: 0; transition: color 0.2s; }
.tnav-search-inner:focus-within .tnav-search-icon { color: #7C3AED; }
.tnav-search-input {
    border: none; outline: none; background: transparent;
    font-size: 9pt; font-weight: 100; color: #0F172A;
    width: 100%; min-width: 0;
}
.tnav-search-input::placeholder { color: #94A3B8; font-weight: 100; }
.tnav-search-clear {
    width: 18px; height: 18px; border-radius: 50%;
    background: #FEE2E2; color: #B91C1C;
    display: flex; align-items: center; justify-content: center;
    font-size: 9pt; font-weight: 900; cursor: pointer;
    flex-shrink: 0; transition: all 0.15s ease;
}
.tnav-search-clear:hover { background: #FECACA; transform: scale(1.1); }

/* Avatars */
.tnav-avatars {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.tnav-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 9.5pt; font-weight: 800; color: #fff;
    cursor: pointer; flex-shrink: 0;
    background: linear-gradient(135deg, #10B981, #047857);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tnav-avatar:hover { transform: scale(1.08); box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.tnav-avatar-user { background: linear-gradient(135deg, #7C3AED, #4C1D95); }
.tnav-avatar-wrap { position: relative; }

/* Icon button (Advanced ⚙️) */
.tnav-icon-btn {
    width: 30px; height: 30px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(248,250,252,0.9); border: 1.5px solid rgba(203,213,225,0.7);
    cursor: pointer; color: #64748B; flex-shrink: 0;
    transition: all 0.18s ease;
}
.tnav-icon-btn:hover, .tnav-icon-btn-active {
    background: linear-gradient(135deg, rgba(124,58,237,0.09), rgba(168,85,247,0.05));
    border-color: rgba(124,58,237,0.3); color: #6D28D9;
}

/* Small action chips */
.tnav-action-chip {
    padding: 4px 11px; border-radius: 100px;
    font-size: 8pt; font-weight: 700; cursor: pointer;
    color: #64748B; background: rgba(241,245,249,0.9);
    border: 1.5px solid rgba(203,213,225,0.6);
    transition: all 0.15s ease; white-space: nowrap;
    display: inline-flex; align-items: center;
}
.tnav-action-chip:hover { background: #fff; color: #7C3AED; border-color: rgba(124,58,237,0.3); }
.tnav-chip-clear { color: #B91C1C !important; background: #FEF2F2 !important; border-color: #FECACA !important; }
.tnav-chip-clear:hover { background: #FEE2E2 !important; }

/* Compact dropdowns */
.compact-drop-wrap {
    position: relative; display: inline-flex; align-items: center;
    padding: 0 10px; gap: 4px; cursor: pointer;
}
.compact-drop-label {
    font-size: 8.5pt; font-weight: 700; color: #475569;
    white-space: nowrap; pointer-events: none;
}
.compact-drop-select {
    position: absolute; inset: 0; opacity: 0;
    cursor: pointer; width: 100%; border: none;
    font-size: 8.5pt;
}
.compact-drop-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #7C3AED; flex-shrink: 0;
}
.compact-drop-wrap:hover .compact-drop-label { color: #7C3AED; }

/* ═══════════════════════════════════════════════
   MONITOR TAB ROW (always visible)
═══════════════════════════════════════════════ */
#monitor_tab_row {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 5px; padding: 6px 14px 7px;
    background: rgba(250,250,252,0.6);
    border-bottom: 1px solid rgba(226,232,240,0.6);
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
#monitor_tab_row::-webkit-scrollbar { display: none; }

.mtab-group {
    display: flex; align-items: center; gap: 3px;
    background: rgba(255,255,255,0.85);
    border: 1.5px solid rgba(203,213,225,0.65);
    border-radius: 100px; padding: 3px;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(15,23,42,0.04);
}
.mtab-group-secondary {
    /* On mobile, drops to next row */
}

.mtab {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 13px; border-radius: 100px;
    font-size: 8.5pt; font-weight: 700; color: #475569;
    cursor: pointer; white-space: nowrap; user-select: none;
    transition: all 0.18s ease;
    border: 1.5px solid transparent;
}
.mtab:hover {
    background: linear-gradient(135deg, #8B5CF6, #6D28D9);
    color: #fff;
}
.mtab.mtab-active {
    background: linear-gradient(135deg, #7C3AED, #4C1D95);
    color: #fff;
    box-shadow: 0 3px 10px rgba(124,58,237,0.3);
}
.mtab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 17px; height: 17px; padding: 0 4px;
    background: #EF4444; color: #fff;
    font-size: 7pt; font-weight: 800; border-radius: 20px;
}
.mtab.mtab-active .mtab-badge {
    background: rgba(255,255,255,0.25);
}

/* Cascade tray (now just row 4) */
#cascade_tray {
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(226,232,240,0.6);
    transition: max-height 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.25s ease;
    max-height: 500px; opacity: 1; overflow: visible;
}
#cascade_tray.tier-all-hidden {
    max-height: 0; opacity: 0; overflow: hidden;
    pointer-events: none; border: none;
}

/* tier3 (sort/advanced) hidden by default */
#tray_tier3 { display: none; }

/* Mobile */
@media (max-width: 768px) {
    .tnav-btn span { display: none; }
    .tnav-btn { padding: 7px 10px; flex: 0 0 auto; }
    .tnav-actions { flex: 0 0 auto; }
    .tnav-search-wrap { flex: 1; }
    .tnav-search-input::placeholder { font-size: 8pt; }
	.tnav-search-icon::placeholder { left:7px; }
    .mtab-group-secondary {
        order: 10; width: 100%;
        overflow-x: auto; flex-wrap: nowrap;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   §24  MODAL UTILITY CLASSES
   ───────────────────────────────────────────────────────────────────────
   Extracted from input_new.php inline styles.
   Prefix: mi- (modal-inline)
   Rule: keep these single-purpose; no nesting; no !important needed here
   since they replace inline styles (not fight them).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Layout: flex rows ── */
.mi-row         { display:flex; align-items:center; }
.mi-row-4       { display:flex; align-items:center; gap:4px; }
.mi-row-6       { display:flex; align-items:center; gap:6px; }
.mi-row-8       { display:flex; align-items:center; gap:8px; }
.mi-row-10      { display:flex; align-items:center; gap:10px; }
.mi-row-12      { display:flex; align-items:center; gap:12px; }
.mi-row-14      { display:flex; align-items:center; gap:14px; }
.mi-row-16      { display:flex; align-items:center; gap:16px; }
.mi-row-20      { display:flex; align-items:center; gap:20px; }

.mi-row-center  { display:flex; align-items:center; justify-content:center; }
.mi-irow-8      { display:inline-flex; align-items:center; gap:8px; }
.mi-irow-6      { display:inline-flex; align-items:center; gap:6px; }
.mi-irow-10     { display:inline-flex; align-items:center; gap:10px; }
.mi-irow-between{ display:inline-flex; align-items:center; justify-content:space-between; }

/* ── Layout: flex columns ── */
.mi-col-4       { display:flex; flex-direction:column; gap:4px; }
.mi-col-8       { display:flex; flex-direction:column; gap:8px; }
.mi-col-12      { display:flex; flex-direction:column; gap:12px; }
.mi-col-14      { display:flex; flex-direction:column; gap:14px; }
.mi-col-16      { display:flex; flex-direction:column; gap:16px; }
.mi-col-24      { display:flex; flex-direction:column; gap:24px; }

/* ── Layout: grids ── */
.mi-grid-2      { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mi-grid-auto   { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; }

/* ── Structural helpers ── */
.mi-grow        { flex-grow:1; min-width:0; }
.mi-shrink-0    { flex-shrink:0; }

.mi-nowrap      { white-space:nowrap; }
.mi-overflow-h  { overflow:hidden; }

.mi-tags        { display:flex; gap:14px; flex-wrap:wrap; }
.mi-mb-4        { margin-bottom:4px; }
.mi-mb-6        { margin-bottom:6px; }
.mi-mb-8        { margin-bottom:8px; }
.mi-mb-12       { margin-bottom:12px; }
.mi-mb-15       { margin-bottom:15px; }


/* ── Dividers ── */
.mi-vdivider    { width:1px; height:20px; background:#CBD5E1; margin:0 4px; flex-shrink:0; }
.mi-hdivider    { flex:1; height:1px; background:linear-gradient(90deg,#E2E8F0 0%,transparent 100%); }
.mi-hdivider-full { width:100%; height:1px; background:#E2E8F0; margin:16px 0; }

/* ── Invisible/hidden inputs ── */
.mi-hidden-input { width:0; height:0; border:none; visibility:hidden; position:absolute; }

/* ── Typography ── */
.mi-label       { font-size:7.5pt; font-weight:700; color:#94A3B8; display:block; margin-bottom:4px; }
.mi-label-xs    { font-size:8pt; font-weight:800; color:#64748B; text-transform:uppercase; letter-spacing:0.5px; }
.mi-label-section { font-size:8pt; font-weight:800; color:#64748B; display:block; margin-bottom:8px; text-transform:uppercase; letter-spacing:0.5px; }
.mi-section-title { color:#0F172A; font-size:14pt; font-weight:900; letter-spacing:-0.3px; margin-bottom:4px; }
.mi-meta        { font-size:9.5pt; color:#94A3B8; font-weight:500; line-height:1.4; }
.mi-field-val   { font-size:10.5pt; font-weight:800; color:#0F172A; }
.mi-field-label { font-size:11pt; font-weight:700; color:var(--pro-text-1); }
.mi-chevron     { color:#CBD5E1; font-size:12pt; margin-left:8px; }
.mi-heading     { margin:0; font-size:11pt; font-weight:900; color:#0F172A; text-transform:uppercase; letter-spacing:0.5px; }
.mi-heading-sub { margin:0 0 12px 0; font-size:8pt; font-weight:800; color:#94A3B8; text-transform:uppercase; letter-spacing:0.5px; }
.mi-hint        { color:#1E293B; font-size:10.5pt; line-height:1.6; background:#F8FAFC; padding:15px; border-radius:8px; border-left:4px solid #0F62FE; }
.mi-version-lbl { font-size:8.5pt; font-weight:700; color:#0F62FE; margin-bottom:6px; text-transform:uppercase; }
.mi-icon-sm     { height:14px; opacity:0.6; }
.mi-icon-filter-red { height:14px; filter:brightness(0) saturate(100%) invert(35%) sepia(85%) saturate(3065%) hue-rotate(345deg) brightness(100%) contrast(93%); }
.mi-icon-filter-blue { height:14px; margin-right:8px; filter:brightness(0) invert(0.2) sepia(1) saturate(5) hue-rotate(200deg); }

/* ── Surfaces / containers ── */
.mi-pad-30      { padding:30px; background:#FFFFFF; }
.mi-surface-pill { background:var(--pro-surface-2); padding:16px; border-radius:var(--pro-radius-pill); border:1px solid var(--pro-line-1); }
.mi-version-box { background:#F8FAFC; border:1px dashed #CBD5E1; border-radius:8px; padding:15px; margin-bottom:15px; }
.mi-version-row { font-size:9pt; color:#475569; margin-bottom:12px; border-bottom:1px solid #E2E8F0; padding-bottom:12px; }
.mi-version-row-header { display:flex; justify-content:space-between; margin-bottom:6px; }
.mi-version-row-date { font-size:8pt; color:#94A3B8; font-weight:600; }
.mi-text-muted  { color:#1E293B; line-height:1.5; }

/* ── Controls ── */
.mi-btn-close   { cursor:pointer; padding:6px; border-radius:8px; background:#F1F5F9; transition:all 0.2s; }
.mi-btn-close:hover { background:#E2E8F0; }
.mi-btn-close-red { cursor:pointer; padding:6px; border-radius:8px; background:#FEE2E2; transition:all 0.2s; }
.mi-btn-close-red:hover { background:#FECACA; }
.mi-btn-settings { display:inline-flex; align-items:center; cursor:pointer; padding:6px 14px; border-radius:100px; background:#F1F5F9; border:1px solid #E2E8F0; font-size:8pt; font-weight:800; color:#475569; text-transform:uppercase; letter-spacing:0.5px; transition:all 0.2s; }
.mi-btn-settings:hover { background:#E2E8F0; color:#0F172A; }

/* ── Form field surfaces ── */
.mi-field-box   { background:#F8FAFC; border:1px solid #E2E8F0; border-radius:16px; padding:18px 20px; transition:all 0.2s; }
.mi-field-box:hover { border-color:#BAE6FD; background:#F0F9FF; }
.mi-select-box  { width:100%; padding:12px 14px; border-radius:12px; border:1px solid #CBD5E1; font-size:10pt; font-weight:600; color:#0F172A; background:#F8FAFC; outline:none; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,0.02); appearance:none; }
.mi-readonly-box { width:100%; padding:12px 14px; border-radius:12px; border:1px solid #CBD5E1; font-size:10pt; font-weight:600; color:#475569; background:#F1F5F9; }
.mi-readonly-empty { width:100%; padding:12px 14px; border-radius:12px; border:1px dashed #CBD5E1; font-size:10pt; font-weight:600; color:#94A3B8; background:transparent; }
.mi-wizard-field { width:100%; min-height:80px; border:1px solid #CBD5E1; border-radius:8px; padding:15px; font-size:10.5pt; color:#0F172A; line-height:1.6; outline:none; background:#FFF; box-shadow:inset 0 2px 4px rgba(0,0,0,0.02); transition:0.2s; }
.mi-wizard-field:focus { border-color:#0F62FE; box-shadow:0 0 0 3px rgba(15,98,254,0.1); }

/* ── Pass 2 additions ── */
.mi-acc-card    { border:1px solid #F1F5F9; border-radius:16px; margin-bottom:20px; overflow:hidden; box-shadow:0 8px 30px rgba(15,23,42,0.04); background:#FFFFFF; }
.mi-acc-header  { background:#FFFFFF; padding:24px 30px; border-bottom:1px solid #F8FAFC; display:flex; justify-content:space-between; align-items:center; }
.mi-alert-dot   { background:#B91C1C; color:#FFF; width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:7pt; font-weight:900; flex-shrink:0; margin-top:2px; }
.mi-label-purple { font-size:8pt; font-weight:800; color:#7C3AED; text-transform:uppercase; letter-spacing:0.5px; display:block; margin-bottom:6px; }
.mi-label-xs-alt { font-size:7.5pt; text-transform:uppercase; font-weight:900; color:var(--pro-text-3); letter-spacing:1px; margin-bottom:6px; }
.mi-label-faint  { font-size:8.5pt; font-weight:800; color:#94A3B8; text-transform:uppercase; letter-spacing:1.5px; }
.mi-row-start-8  { display:flex; align-items:flex-start; gap:8px; }
.mi-danger-heading { font-weight:900; color:#991B1B; font-size:11pt; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.mi-icon-20     { height:20px; }
.mi-icon-18     { height:18px; }
.mi-icon-12-mr4 { height:12px; margin-right:4px; }
.mi-icon-xl     { font-size:28pt; margin-bottom:8px; display:block; }
.mi-p-22-24     { padding:22px 24px; }
.mi-p-18-20     { padding:18px 20px; }
.mi-info-link-box { padding:15px; color:#0F62FE; font-weight:bold; width:100%; text-align:center; background:#EFF6FF; border-radius:8px; border:1px dashed #BFDBFE; }
.mi-reset       { margin:0; border:none; padding:0; }
.mi-icon-filter-purple { height:14px; margin-right:8px; filter:brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(2000%) hue-rotate(250deg); opacity:0.8; }
.mi-icon-filter-green  { height:12px; filter:brightness(0) saturate(100%) invert(32%) sepia(85%) saturate(1324%) hue-rotate(137deg) brightness(96%) contrast(97%); opacity:0.8; }

/* ── Pass 3 additions ── */
.mi-lh-13       { line-height:1.3; }
.mi-h-25        { height:25px; }
.mi-h-40        { height:40px; }
.mi-flex-8      { display:flex; gap:8px; }
.mi-flex-action { flex:1; min-width:160px; }
.mi-mr-4        { margin-right:4px; }
.mi-pe-none     { pointer-events:none; }
.mi-w-100       { width:100px; }
.mi-row-18      { display:flex; align-items:center; gap:18px; }
.mi-section-border-bottom { margin-bottom:15px; border-bottom:1px solid #E2E8F0; padding-bottom:8px; }
.mi-btn-link-pill  { cursor:pointer; font-size:8.5pt; background:#FFFFFF; border:1px solid #E9D5FF; color:#7C3AED; padding:8px 16px; border-radius:100px; font-weight:800; transition:all 0.3s cubic-bezier(0.16,1,0.3,1); box-shadow:0 4px 10px rgba(124,58,237,0.06); text-transform:uppercase; letter-spacing:0.5px; display:flex; align-items:center; gap:6px; }
.mi-btn-link-chip  { cursor:pointer; font-size:8.5pt; background:#FAF5FF; border:1px solid #D8B4FE; color:#7C3AED; padding:4px 10px; border-radius:12px; font-weight:800; transition:0.2s; box-shadow:0 2px 4px rgba(124,58,237,0.1); }
.mi-btn-action-purple { cursor:pointer; color:#5B21B6; background:#FFF; border:1px solid #D8B4FE; padding:12px 14px; border-radius:10px; font-size:9.5pt; font-weight:800; display:flex; align-items:center; box-shadow:0 2px 4px rgba(124,58,237,0.05); transition:0.2s; }
.mi-btn-action-blue   { cursor:pointer; color:#0F62FE; background:#EFF6FF; border:1px solid #BFDBFE; padding:12px 14px; border-radius:10px; font-size:9.5pt; font-weight:700; display:flex; align-items:center; box-shadow:0 2px 4px rgba(0,0,0,0.02); transition:0.2s; }
.mi-btn-action-danger { background:linear-gradient(135deg,#EF4444,#B91C1C); color:#FFF; border:none; padding:15px; font-size:11pt; font-weight:900; border-radius:var(--pro-radius-pill); box-shadow:0 8px 20px rgba(239,68,68,0.2); cursor:pointer; }
.mi-btn-action-success{ background:linear-gradient(135deg,#10B981,#047857); color:#FFF; border:none; padding:15px; font-size:11pt; font-weight:900; border-radius:var(--pro-radius-pill); box-shadow:0 8px 20px rgba(16,185,129,0.2); cursor:pointer; }
.mi-btn-approve       { background:#ECFDF5; color:#059669; border:1px solid #A7F3D8; padding:14px 18px; font-size:9pt; font-weight:800; border-radius:100px; box-shadow:0 2px 6px rgba(5,150,105,0.05); transition:all 0.2s; text-transform:uppercase; letter-spacing:0.5px; display:flex; justify-content:center; flex:1; cursor:pointer; }
.mi-alert-danger      { background:linear-gradient(135deg,#FEF2F2,#FFF); border:1px solid #FECACA; border-left:4px solid #B91C1C; padding:18px 22px; border-radius:var(--pro-radius-pill); box-shadow:var(--pro-shadow-sm); }
.mi-icon-box-blue     { background:linear-gradient(135deg,#EFF6FF,#DBEAFE); color:#2563EB; width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:20pt; box-shadow:0 10px 20px rgba(37,99,235,0.08),inset 0 2px 5px rgba(255,255,255,1); border:1px solid rgba(191,219,254,0.5); flex-shrink:0; }
.mi-icon-box-amber    { width:44px; height:44px; background:#FEF3C7; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mi-icon-box-red      { width:44px; height:44px; background:#FEE2E2; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mi-icon-box-blue-sm  { width:44px; height:44px; background:#DBEAFE; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mi-drag-handle       { color:#94A3B8; font-size:14pt; line-height:1; padding:0 4px; user-select:none; cursor:grab; position:relative; z-index:2147483647; display:flex; align-items:center; height:28px; }
.mi-vdivider-sm       { width:1px; height:18px; background:#CBD5E1; margin:0 2px; flex-shrink:0; }
.mi-err-text          { color:#D32F2F; font-size:8pt; font-weight:bold; margin-left:5px; }
.mi-strong-11         { font-size:11pt; font-weight:800; letter-spacing:-0.2px; }
.mi-body-11           { font-size:11pt; color:#333; line-height:1.5; }
.mi-color-overlay     { opacity:0; position:absolute; width:150%; height:150%; top:-25%; left:-25%; cursor:pointer; margin:0; padding:0; border:none; -webkit-appearance:none; z-index:11; }
.mi-input-field       { width:100%; padding:12px 14px; border:1px solid #CBD5E1; border-radius:10px; font-size:10pt; font-weight:600; color:#1E293B; background:#F8FAFC; outline:none; margin-top:6px; cursor:pointer; transition:0.2s; box-shadow:inset 0 1px 3px rgba(0,0,0,0.02); box-sizing:border-box; }
.mi-input-lg          { width:100%; padding:14px 16px; border:1px solid #CBD5E1; border-radius:12px; font-size:10.5pt; font-weight:500; outline:none; box-sizing:border-box; box-shadow:inset 0 2px 4px rgba(0,0,0,0.02); transition:all 0.3s ease; background:#FFFFFF; }
.mi-input-padded-l    { padding-left:44px; font-weight:700; color:#1E293B; font-family:inherit; }
.mi-input-purple-center { width:100%; padding:12px 14px; border:1px solid #D8B4FE; border-radius:10px; font-size:11pt; font-weight:900; color:#4C1D95; background:#FFF; box-sizing:border-box; text-align:center; outline:none; box-shadow:0 2px 4px rgba(124,58,237,0.05); transition:0.2s; }












/* ── inbox.php classes ── */
.mi-empty-card   { margin:20px 0; padding:30px 40px; text-align:left; background:rgba(248,250,252,0.5); border:2px dashed #CBD5E1; border-radius:20px; display:flex; align-items:flex-start; gap:24px; }
.mi-empty-title  { font-size:14pt; font-weight:800; color:#0F172A; margin-bottom:8px; letter-spacing:-0.5px; }
.mi-empty-body   { color:#64748B; font-weight:500; font-size:10.5pt; }
.mi-lh-1         { line-height:1; }
.mi-text-left    { text-align:left; }
.mi-pl-4         { padding-left:4px; }
.mi-center-pad   { padding:40px; text-align:center; color:#64748B; font-size:10pt; }
.mi-no-underline { text-decoration:none; }
.mi-stamp        { position:absolute; top:12px; right:12px; padding:4px 14px; font-size:10pt; font-weight:900; border-radius:8px; text-transform:uppercase; letter-spacing:1.5px; transform:rotate(2deg); box-shadow:0 4px 6px rgba(0,0,0,0.05); z-index:10; pointer-events:none; border-width:2px; border-style:solid; }
.mi-stamp-amber  { background:#FFFBEB; color:#D97706; border-color:#FDE68A; }
.mi-stamp-red    { background:#FEF2F2; color:#B91C1C; border-color:#FECACA; }
.mi-stamp-gray   { background:#F8FAFC; color:#64748B; border-color:#E2E8F0; }
.mi-stamp-green  { background:#F0FDF4; color:#15803D; border-color:#BBF7D0; }
.mi-view-toggle-group { padding:4px; border-radius:8px; background:#F8FAFC; border:1px solid #CBD5E1; display:flex; align-items:center; }
.mi-empty-tab-msg { padding:15px 20px; font-size:9pt; color:#94A3B8; text-align:center; }

/* ── entity.php classes ── */
.mi-mb-0         { margin-bottom:0; }
.mi-mb-16        { margin-bottom:16px; }
.mi-mb-18        { margin-bottom:18px; }
.mi-mb-24        { margin-bottom:24px; }
.mi-section-hr   { height:1px; background:#E8ECF4; width:100%; margin-bottom:16px; }
.mi-wrap         { flex-wrap:wrap; }
.mi-row-between  { display:flex; justify-content:space-between; align-items:center; }
.mi-flex-basis-full { flex-basis:100%; }
.mi-icon-18-mr10 { height:18px; opacity:0.6; margin-right:10px; }
.mi-icon-12-mr6  { height:12px; margin-right:6px; }
.mi-icon-filter-blue-sm { height:12px; filter:brightness(0) invert(0.2) sepia(1) saturate(5) hue-rotate(200deg); }
.mi-warning-heading { font-weight:900; font-size:11.5pt; color:#78350F; margin-bottom:16px; }
.mi-col-2        { display:flex; flex-direction:column; gap:2px; }
.mi-col-28       { display:flex; flex-direction:column; gap:28px; }
.mi-w-full       { width:100%; }


























/* ═══════════════════════════════════════════════════════════════════════
   🧊 THE "HIGH-KEY GLASS LEDGER" (Right Pane Cards)
   ───────────────────────────────────────────────────────────────────────
   Barely-there frosted white, whisper-thin dashed wireframes, and an 
   incredibly subtle red wash for Past Due. 
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. Collapse the Gaps */
.mon-list {
    gap: 0 !important; 
}

/* 2. The High-Key Glass Base (Shared Mechanics) */
.mon-card, .mon-grid-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Individual Card Structuring */
.mon-card {
    border: none !important;
    border-radius: 0 !important; 
    border-bottom: 1px dashed rgba(203, 213, 225, 0.5) !important; 
    margin-bottom: 0 !important;
    padding: 14px 16px 14px 0 !important; 
}
.mon-card:last-child {
    border-bottom: none !important;
}
.mon-grid-card {
    border: 1px dashed rgba(203, 213, 225, 0.6) !important; 
    border-radius: 12px !important;
}

/* 3. The Analytical Highlight (Shared Hover Mechanics) */
.mon-card:hover, .mon-grid-card:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 100%) !important;
    transform: none !important; 
    z-index: 10;
}
.mon-card:hover {
    border-bottom: 1px dashed rgba(148, 163, 184, 0.4) !important;
}
.mon-grid-card:hover {
    border-color: rgba(148, 163, 184, 0.4) !important; 
}

/* 4. The Data-Line (Role Stripe) */
.mon-card .mon-card-stripe, 
.mon-grid-card .mon-card-stripe {
    width: 3px !important; 
    height: calc(100% - 16px) !important;
    margin: 8px 0 8px 4px !important; 
    border-radius: 3px !important;
    background: var(--mon-stripe-color) !important;
    opacity: 0.6;
    transition: opacity 0.2s ease !important;
}
.mon-card:hover .mon-card-stripe, 
.mon-grid-card:hover .mon-card-stripe {
    opacity: 1;
}

/* 5. Avatars */
.mon-avatar {
    background: var(--mon-avatar-bg) !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: none !important; 
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mon-card:hover .mon-avatar, 
.mon-grid-card:hover .mon-avatar {
    transform: scale(1.04) !important; 
}

/* 6. Perfect Typography Hierarchy */
.mon-card-custom-title {
    color: #4C1D95 !important; 
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    transition: color 0.2s ease;
}
.mon-card-custom-title.placeholder {
    color: #94A3B8 !important; 
    font-weight: 500 !important;
    font-style: normal !important;
}
.mon-card:hover .mon-card-custom-title:not(.placeholder) {
    color: #6D28D9 !important;
}

/* 7. PAST DUE: A Whisper of Urgency */
.mon-card.pastdue {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.7) 85%, rgba(254, 226, 226, 0.35) 100%) !important;
    border-bottom: 1px dashed rgba(254, 202, 202, 0.8) !important; 
}
.mon-card.pastdue:hover {
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 80%, rgba(254, 202, 202, 0.25) 100%) !important;
    border-bottom: 1px dashed rgba(252, 165, 165, 0.8) !important;
}

.mon-grid-card.pastdue {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 70%, rgba(254, 226, 226, 0.35) 100%) !important;
    border-color: rgba(254, 202, 202, 0.8) !important;
}
.mon-grid-card.pastdue:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 60%, rgba(254, 202, 202, 0.25) 100%) !important;
    border-color: rgba(252, 165, 165, 0.8) !important;
}

/* The Inline Blueprint Badge */
.mon-past-due-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    background: rgba(225, 29, 72, 0.05); 
    color: #BE123C;
    font-size: 6.5pt;
    font-weight: 850;
    letter-spacing: 0.12em;
    border-radius: 4px;
    border: 1px solid rgba(225, 29, 72, 0.2);
    box-shadow: 0 1px 2px rgba(225, 29, 72, 0.02);
    line-height: 1.2;
    margin-left: 6px;
    white-space: nowrap;
    user-select: none;
}

/* The Frosted Minimalist Badge */
.mon-card.pastdue::after, 
.mon-grid-card.pastdue::after {
    content: 'PAST DUE';
    position: absolute;
    top: 14px;
    right: 50px !important; 
    left: auto;
    font-size: 7pt;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #BE123C; 
    
    background: rgba(255, 255, 255, 0.6); 
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(251, 113, 133, 0.3); 
    z-index: 10;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   📂 THE "STEALTH" ACCORDION SYSTEM (CSS-Only Hijack)
   ───────────────────────────────────────────────────────────────────────
   Overrides inline PHP styles. Closed accordions are structural 
   wireframes. Open accordions bloom into elevated workspaces.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. The Base Card: Invisible until opened */
.acc-card, .mi-acc-card { 
    background: transparent !important; 
    border: none !important; 
    border-radius: 0 !important; 
    box-shadow: none !important; 
    margin-bottom: 0 !important; 
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 2. The Header: A technical blueprint line */
.acc-header, .mi-acc-header { 
    background: transparent !important; 
    padding: 12px 0 !important; 
    border-bottom: 1px solid rgba(203, 213, 225, 0.4) !important; 
    border-radius: 0 !important;
}
.acc-header:hover, .mi-acc-header:hover { 
    border-bottom: 1px solid rgba(148, 163, 184, 0.6) !important; 
}

/* 3. HIJACKING THE INLINE ICON */
:is(.acc-header, .mi-acc-header) .mi-row-16 > div:first-child {
    width: 28px !important; 
    height: 28px !important; 
    border-radius: 6px !important; 
    font-size: 11pt !important;
    background: rgba(241, 245, 249, 0.8) !important; 
    border: 1px solid rgba(203, 213, 225, 0.5) !important;
    box-shadow: none !important;
    filter: grayscale(1) opacity(0.6) !important; 
    transition: all 0.4s ease !important;
}

/* 4. HIJACKING THE TYPOGRAPHY */
:is(.acc-header, .mi-acc-header) .mi-section-title {
    font-size: 8.5pt !important; 
    font-weight: 800 !important; 
    color: #64748B !important; 
    text-transform: uppercase !important; 
    letter-spacing: 0.15em !important; 
    margin-bottom: 0 !important;
    border: none !important; padding: 0 !important;
    transition: color 0.3s ease !important;
}
:is(.acc-header, .mi-acc-header) .mi-meta {
    display: none !important; 
}

/* 5. HIJACKING THE FOCUS BUTTON */
:is(.acc-header, .mi-acc-header) .mi-btn-link-pill {
    opacity: 0 !important; 
    background: transparent !important;
    border: 1px solid rgba(203, 213, 225, 0.5) !important;
    box-shadow: none !important;
    color: #94A3B8 !important;
    font-size: 7pt !important;
    padding: 3px 8px !important;
    transform: none !important; 
    transition: all 0.2s ease !important;
}
:is(.acc-header, .mi-acc-header):hover .mi-btn-link-pill {
    opacity: 1 !important;
}
:is(.acc-header, .mi-acc-header) .mi-btn-link-pill:hover {
    color: #7C3AED !important;
    border-color: rgba(124, 58, 237, 0.4) !important;
    background: rgba(124, 58, 237, 0.05) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   THE "BLOOM" STATE (When Accordion is Open)
   ═══════════════════════════════════════════════════════════════════════ */

/* The card physically manifests as a white workspace */
.acc-card.acc-open, .mi-acc-card.acc-open {
    background: #FFFFFF !important;
    border-radius: 12px !important;
    box-shadow: inset 0 0 0 1px #E2E8F0, 0 12px 32px -8px rgba(15, 23, 42, 0.06) !important;
    margin: 16px 0 !important; 
}

/* The Header expands and drops its bottom line */
.acc-open .acc-header, .acc-open .mi-acc-header {
    padding: 20px 24px !important;
    border-bottom: 1px solid transparent !important;
}

/* The Icon ignites */
.acc-open :is(.acc-header, .mi-acc-header) .mi-row-16 > div:first-child {
    filter: grayscale(0) opacity(1) !important;
    background: linear-gradient(135deg, #F5F3FF, #EDE9FE) !important;
    border-color: rgba(216, 180, 254, 0.5) !important;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 1) !important;
}

/* The Typography switches to commanding contrast */
.acc-open :is(.acc-header, .mi-acc-header) .mi-section-title {
    color: #0F172A !important;
    font-size: 11pt !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
}
.acc-open :is(.acc-header, .mi-acc-header) .mi-meta {
    display: block !important;
    font-size: 8pt !important;
    margin-top: 2px !important;
}

/* The Body Flow */
.acc-body { 
    padding: 0 24px 24px 24px !important; 
    border-top: none !important; 
}
.acc-open .acc-icon { 
    transform: rotate(180deg); 
    color: #7C3AED !important; 
}

/* ═══════════════════════════════════════════════════════════════════════
   ZEN MODE HIJACK
   ═══════════════════════════════════════════════════════════════════════ */
.zen-modest-active .acc-card:not(.zen-target) { 
    opacity: 0.1 !important; 
    pointer-events: none !important; 
    filter: blur(2px) grayscale(100%) !important; 
}
.zen-modest-active .zen-target { 
    transform: scale(1.02) !important; 
    box-shadow: inset 0 0 0 1px #D8B4FE, 0 30px 60px -15px rgba(15, 23, 42, 0.15) !important; 
    z-index: 100 !important; 
    background: #FFFFFF !important; 
}

/* ═══════════════════════════════════════════════════════════════════════
   MONITOR HEADER: GRID LAYOUT (Tabs & Dates Left, Filters Right)
   ═══════════════════════════════════════════════════════════════════════ */

#mon_header {
    display: grid !important;
    grid-template-columns: max-content 1fr !important;
    grid-template-areas:
        "tabs filters"
        "dates filters" !important;
    row-gap: 8px !important;
    column-gap: 24px !important;
    align-items: center !important;
}

#mon_top_tabs {
    grid-area: tabs !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 !important;
}

#mon_date_range {
    grid-area: dates !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 12px !important;
    background: #FAFBFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#mon_tray {
    grid-area: filters !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    height: 100% !important;
}

/* 📱 Mobile Fallback */
@media (max-width: 1024px) {
    #mon_header {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "tabs"
            "dates"
            "filters" !important;
        row-gap: 12px !important;
    }
}

/* ================================================================== */
/* WIDESCREEN STRUCTURAL LOCK (Taming the Ultra-Wide Monitor Chaos)   */
/* ================================================================== */

#input_new_div {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
}

#input_new_div .sleek-select {
    max-width: 350px !important;
    flex: 1 1 auto;
}

#input_new_div .mi-row-16 {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
    align-items: center;
    justify-content: flex-start !important; 
}

/* ═══════════════════════════════════════════════════════════════════════
   §22  FLOATING FORMAT MENU (The "Vanguard Dock" Overhaul)
   ───────────────────────────────────────────────────────────────────────
   Fixes the squished Auto-Focus button and transforms the toolbar into an 
   ultra-premium, VisionOS-style floating glass dock.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. The Glass Dock Container */
#floating_format_menu {
    background: rgba(255, 255, 255, 0.75) !important;
    -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
    backdrop-filter: blur(32px) saturate(180%) !important;
    border: none !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 0 0 1px rgba(226, 232, 240, 0.6),
        0 16px 40px -8px rgba(15, 23, 42, 0.12) !important;
    border-radius: 100px !important;
    padding: 6px 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 2. Standard Icon Buttons */
#floating_format_menu button.format-action-btn:not(#btn_auto_focus_float) {
    width: 32px !important; 
    height: 32px !important; 
    min-width: 32px !important; 
    min-height: 32px !important;
    padding: 0 !important; 
    margin: 0 !important; 
    border: none !important; 
    border-radius: 50% !important;
    background: transparent !important; 
    box-shadow: none !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important;
    color: #475569 !important;
    transition: all 0.2s ease !important;
}
#floating_format_menu button.format-action-btn:not(#btn_auto_focus_float):hover {
    background: rgba(15, 23, 42, 0.05) !important;
    color: #0F172A !important;
    transform: translateY(-1px) !important;
}
#floating_format_menu button.format-action-btn:not(#btn_auto_focus_float) svg {
    width: 14px !important; height: 14px !important; stroke: currentColor !important;
}

/* 3. THE BUG FIX: The Auto-Focus Button */
#floating_format_menu #btn_auto_focus_float {
    width: auto !important; 
    height: 32px !important; 
    min-height: 32px !important; 
    min-width: 0 !important;
    padding: 0 14px !important; 
    margin: 0 6px !important;
    border: 1px solid rgba(124, 58, 237, 0.15) !important; 
    border-radius: 100px !important;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(124, 58, 237, 0.03)) !important; 
    color: #6D28D9 !important;
    font-size: 8pt !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-shadow: none !important;
}
#floating_format_menu #btn_auto_focus_float:hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(124, 58, 237, 0.06)) !important;
    border-color: rgba(124, 58, 237, 0.3) !important;
    color: #5B21B6 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 4px 10px rgba(124, 58, 237, 0.1) !important;
    transform: translateY(-1px) !important;
}
#floating_format_menu #btn_auto_focus_float.active,
#floating_format_menu #btn_auto_focus_float:active {
    background: linear-gradient(135deg, #7C3AED, #4C1D95) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
    transform: translateY(0) !important;
}

/* 4. BONUS UPGRADE: The Modal Close Button */
.modal-maximized .mi-btn-close,
.modal-maximized .mi-btn-close-red {
    background: rgba(255, 255, 255, 0.6) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
    border-radius: 50% !important; 
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.modal-maximized .mi-btn-close:hover,
.modal-maximized .mi-btn-close-red:hover {
    background: #FEF2F2 !important;
    border-color: #FCA5A5 !important;
    color: #B91C1C !important;
    box-shadow: 0 6px 16px rgba(225, 29, 72, 0.15) !important;
    transform: scale(1.08) rotate(90deg) !important; 
}

/* ═══════════════════════════════════════════════════════════════════════
   🏢 THE "SIGNATURE QMS" COMMAND PALETTE (Role & Search Menus)
   ───────────────────────────────────────────────────────────────────────
   Professional, grounded glassmorphism. Perfectly matches the brand's 
   signature violet accents. Zero bouncing, pure enterprise confidence.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. The Grounded Glass Canvas */
.qms-palette {
    background: rgba(255, 255, 255, 0.95) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(216, 180, 254, 0.6) !important; 
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(124, 58, 237, 0.04) !important; 
    width: 320px;
    overflow: hidden;
    animation: qms-fade-in 0.2s ease-out forwards;
}

@keyframes qms-fade-in {
    0% { opacity: 0; transform: translateY(-4px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 2. The Header */
.qms-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px 8px 16px;
}
.qms-title {
    font-size: 7.5pt; font-weight: 800; color: #64748B;
    text-transform: uppercase; letter-spacing: 0.1em;
}
.qms-close {
    font-size: 16pt; color: #CBD5E1; cursor: pointer;
    line-height: 1; padding: 0 4px;
    transition: color 0.15s ease;
}
.qms-close:hover { color: #EF4444; }

/* 3. The Professional List Items */
.qms-body { padding: 4px 12px 12px 12px; }

.qms-role-item {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 10px; 
    border-radius: 8px;
    cursor: pointer; 
    border-left: 3px solid transparent; 
    transition: all 0.15s ease;
}
.qms-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12pt; flex-shrink: 0;
    background: var(--qms-bg); 
}
.qms-text {
    font-size: 10pt; font-weight: 700; color: #1E293B;
    transition: color 0.15s ease;
}
.qms-role-item:hover {
    background: rgba(248, 250, 252, 0.8);
    border-left-color: var(--qms-brand); 
    transform: translateX(2px); 
}
.qms-role-item:hover .qms-text {
    color: var(--qms-brand); 
}
.qms-divider { 
    height: 1px; background: rgba(226, 232, 240, 0.8); margin: 6px 8px; 
}

/* 4. The Data-Chip */
.qms-header-chip { padding: 12px 16px 8px 16px; }

.qms-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 6px 4px 10px; border-radius: 100px;
    background: #F5F3FF; 
    color: #6D28D9;
    border: 1.5px solid #DDD6FE;
    font-size: 7.5pt; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
}
.qms-chip-icon { font-size: 11pt; line-height: 1; }
.qms-chip-close {
    margin-left: 2px; font-size: 12pt; opacity: 0.4; 
    cursor: pointer; line-height: 1; 
    transition: all 0.15s ease;
}
.qms-chip-close:hover { opacity: 1; color: #EF4444; }

/* 5. The Grounded Search Input */
.qms-search-groove {
    margin: 0 16px 16px 16px;
    display: flex; align-items: center; gap: 8px;
    background: #F8FAFC;
    border-radius: 10px;
    border: 1px solid rgba(216, 180, 254, 0.3); 
    padding: 10px 14px;
    box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.01);
    transition: all 0.2s ease;
}
.qms-search-groove svg { color: #94A3B8; transition: color 0.2s ease; flex-shrink: 0; }
.qms-search-groove input {
    border: none; background: transparent; outline: none;
    width: 100%; font-size: 10pt; font-weight: 600; color: #0F172A;
}
.qms-search-groove input::placeholder { color: #94A3B8; font-weight: 500; }
.qms-search-groove:focus-within {
    background: #FFFFFF;
    border-color: #7C3AED; 
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15); 
}
.qms-search-groove:focus-within svg { stroke: #7C3AED; }

/* ═══════════════════════════════════════════════════════════════════════
   💬 THE "ENTERPRISE iMESSAGE" OVERHAUL
   ───────────────────────────────────────────────────────────────────────
   Familiar, native-feeling chat bubbles. Slack-style overlapping 
   reactions, and a Telegram-inspired frosted glass input pill.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. The Feed */
.qms-chat-feed {
    display: flex; flex-direction: column; gap: 16px;
    margin-bottom: 24px; padding: 10px 10px 20px 10px;
}
.qms-chat-wrapper {
    display: flex; flex-direction: column;
    max-width: 80%; 
    animation: chat-pop-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.qms-wrapper-me { align-self: flex-end; align-items: flex-end; }
.qms-wrapper-them { align-self: flex-start; align-items: flex-start; }

@keyframes chat-pop-in {
    0% { opacity: 0; transform: translateY(10px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 2. The Meta Data (Name & Time) */
.qms-chat-meta {
    display: flex; align-items: baseline; gap: 8px;
    margin-bottom: 4px; padding: 0 4px;
}
.qms-chat-name { font-size: 8pt; font-weight: 800; color: #64748B; letter-spacing: 0.05em; text-transform: uppercase; }
.qms-chat-time { font-size: 7.5pt; font-weight: 600; color: #94A3B8; }

/* 3. The Bubbles */
.qms-chat-bubble {
    padding: 12px 18px;
    font-size: 10.5pt;
    line-height: 1.5;
    position: relative;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
    transition: transform 0.2s ease;
}
.qms-chat-bubble:hover { transform: translateY(-1px); }

.qms-chat-me {
    background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
    color: #FFFFFF;
    border-radius: 20px 20px 4px 20px;
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.2);
}
.qms-chat-me a { color: #E9D5FF; text-decoration: underline; }

.qms-chat-them {
    background: #FFFFFF;
    color: #1E293B;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 20px 20px 20px 4px;
}
.qms-chat-them a { color: #0F62FE; text-decoration: underline; }

/* Archived Notes */
.qms-chat-archive {
    font-style: italic; opacity: 0.9;
    padding: 10px; border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.1);
}
.qms-chat-them .qms-chat-archive {
    border-color: #CBD5E1; background: #F8FAFC;
}

/* 4. The Reactions */
.qms-chat-reactions {
    display: flex; gap: 4px;
    margin-top: -8px; 
    z-index: 2; position: relative;
}
.qms-wrapper-me .qms-chat-reactions { padding-right: 12px; }
.qms-wrapper-them .qms-chat-reactions { padding-left: 12px; }

.qms-rx-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 100px;
    font-size: 7.5pt; font-weight: 800;
    cursor: pointer; user-select: none;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 0 0 2px #FAFCFF; 
}
.qms-rx-pill:hover { transform: scale(1.15); }

.qms-rx-idle { background: #F1F5F9; color: #94A3B8; border: 1px solid #E2E8F0; }
.qms-rx-idle:hover { background: #E2E8F0; color: #64748B; }

.qms-rx-active-ag { background: #ECFDF5; color: #059669; border: 1px solid #A7F3D0; }
.qms-rx-active-dis { background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA; }

/* 5. The Seamless Input Pill */
.qms-input-bar {
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 30px;
    padding: 6px 6px 6px 20px;
    display: flex; align-items: flex-end; gap: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    transition: all 0.3s ease;
}
.qms-input-bar:focus-within {
    border-color: #A855F7;
    box-shadow: 0 12px 32px rgba(124, 58, 237, 0.12), inset 0 0 0 1px #A855F7;
    transform: translateY(-2px);
}

.qms-input-box {
    flex-grow: 1; border: none; outline: none;
    font-family: inherit; font-size: 10.5pt; color: #0F172A;
    line-height: 1.5; min-height: 24px; max-height: 150px;
    overflow-y: auto; background: transparent;
    padding: 12px 0;
}
.qms-input-box:empty:before {
    content: attr(data-placeholder);
    color: #94A3B8; pointer-events: none; display: block;
}

.qms-send-btn {
    background: linear-gradient(135deg, #8B5CF6, #6D28D9);
    color: #FFFFFF; width: 40px; height: 40px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}
.qms-send-btn:hover {
    transform: scale(1.1) rotate(-10deg);
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.4);
}

/* 6. Empty State */
.qms-chat-empty {
    text-align: center; padding: 40px 20px;
    background: #F8FAFC; border: 1px dashed #CBD5E1;
    border-radius: 16px; margin-bottom: 24px;
}
.qms-empty-icon { font-size: 28pt; opacity: 0.4; }
.qms-empty-title { color: #475569; font-size: 10.5pt; font-weight: 800; margin-top: 12px; margin-bottom: 4px; }
.qms-empty-sub { color: #94A3B8; font-size: 9pt; }

/* ═══════════════════════════════════════════════════════════════════════
   🏢 THE "VANGUARD" ADD-REPORT TILES (Modal View)
   ───────────────────────────────────────────────────────────────────────
   Technical blueprint resting states. Volumetric LED hover physics.
   ═══════════════════════════════════════════════════════════════════════ */

/* The Layout */
.qms-add-grid-wrap { display: flex; flex-direction: column; gap: 20px; }
.qms-add-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

/* The Section Headers */
.qms-section-header { display: flex; align-items: center; gap: 12px; }
.qms-label-faint { font-size: 8.5pt; font-weight: 800; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.15em; }
.qms-hdivider { flex-grow: 1; height: 1px; background: linear-gradient(90deg, rgba(203, 213, 225, 0.5) 0%, transparent 100%); }

/* The Tiles */
.qms-add-tile {
    position: relative;
    display: flex; align-items: center; gap: 16px;
    padding: 16px 20px;
    background: #FFFFFF;
    border-radius: 14px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 2px 4px -1px rgba(15, 23, 42, 0.02);
    cursor: pointer;
    isolation: isolate; 
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

/* The Holographic LED Layer */
.qms-add-tile::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(90deg, var(--tile-glow) 0%, transparent 80%);
    border-left: 4px solid var(--tile-color);
    opacity: 0; transform: translateX(-10px); z-index: -1;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.qms-tile-icon-wrap {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: #F8FAFC; border: 1px solid #E2E8F0;
    flex-shrink: 0; transition: all 0.3s ease;
}
.qms-tile-icon {
    height: 20px; opacity: 0.6; transition: all 0.3s ease; filter: grayscale(100%); 
}

.qms-tile-text { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qms-tile-title { font-size: 11pt; font-weight: 800; color: #0F172A; letter-spacing: -0.01em; }
.qms-tile-sub { font-size: 7.5pt; font-weight: 600; color: #64748B; text-transform: uppercase; letter-spacing: 0.05em; transition: color 0.3s ease; }
.qms-tile-chevron { color: #CBD5E1; transition: all 0.3s ease; flex-shrink: 0; }

/* The Hover Ignition */
.qms-add-tile:hover { transform: translateY(-2px); border-color: transparent; box-shadow: 0 12px 24px -6px rgba(15, 23, 42, 0.06); }
.qms-add-tile:hover::before { opacity: 1; transform: translateX(0); }
.qms-add-tile:hover .qms-tile-icon-wrap { background: #FFFFFF; border-color: transparent; box-shadow: 0 4px 12px var(--tile-glow); transform: scale(1.1); }
.qms-add-tile:hover .qms-tile-icon { opacity: 1; filter: grayscale(0%); }
.qms-add-tile:hover .qms-tile-sub { color: var(--tile-color); }
.qms-add-tile:hover .qms-tile-chevron { color: var(--tile-color); transform: translateX(3px); }

/* Thematic Colors */
.qms-add-tile[data-theme="red"] { --tile-color: #DC2626; --tile-glow: rgba(239, 68, 68, 0.15); }
.qms-add-tile[data-theme="red"]:hover .qms-tile-icon { filter: brightness(0) saturate(100%) invert(27%) sepia(91%) saturate(3015%) hue-rotate(348deg) brightness(91%) contrast(97%); }

.qms-add-tile[data-theme="blue"] { --tile-color: #2563EB; --tile-glow: rgba(59, 130, 246, 0.15); }
.qms-add-tile[data-theme="blue"]:hover .qms-tile-icon { filter: brightness(0) saturate(100%) invert(32%) sepia(91%) saturate(3015%) hue-rotate(210deg) brightness(91%) contrast(97%); }

.qms-add-tile[data-theme="orange"] { --tile-color: #EA580C; --tile-glow: rgba(249, 115, 22, 0.15); }
.qms-add-tile[data-theme="orange"]:hover .qms-tile-icon { filter: brightness(0) saturate(100%) invert(54%) sepia(83%) saturate(1638%) hue-rotate(346deg) brightness(99%) contrast(96%); }
.qms-add-tile[data-theme="pink"] { --tile-color: #BE185D; --tile-glow: rgba(236, 72, 153, 0.15); }
.qms-add-tile[data-theme="pink"]:hover .qms-tile-icon { filter: brightness(0) saturate(100%) invert(28%) sepia(86%) saturate(2618%) hue-rotate(309deg) brightness(89%) contrast(89%); }

.qms-add-tile[data-theme="amber"] { --tile-color: #D97706; --tile-glow: rgba(245, 158, 11, 0.15); }
.qms-add-tile[data-theme="amber"]:hover .qms-tile-icon { filter: brightness(0) saturate(100%) invert(45%) sepia(91%) saturate(3015%) hue-rotate(25deg) brightness(91%) contrast(97%); }

.qms-add-tile:not([data-theme]) { --tile-color: #7C3AED; --tile-glow: rgba(124, 58, 237, 0.15); }
.qms-add-tile:not([data-theme]):hover .qms-tile-icon { filter: brightness(0) saturate(100%) invert(30%) sepia(91%) saturate(3015%) hue-rotate(255deg) brightness(91%) contrast(97%); }

/* ═══════════════════════════════════════════════════════════════════════
   🚀 SENTINEL WORKFLOW ENGINE (Sequential Timeline UI)
   ───────────────────────────────────────────────────────────────────────
   Converts standard stacked forms into a connected timeline workflow.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. Accordion Header Restyling */
.sentinel-acc-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; background: #FFFFFF;
    border-bottom: 1px solid #E2E8F0; border-radius: 12px 12px 0 0;
    cursor: pointer; transition: background 0.2s ease;
}
.sentinel-acc-header:hover { background: #F8FAFC; }
.sentinel-header-left { display: flex; align-items: center; gap: 14px; }
.sentinel-icon-ring {
    width: 36px; height: 36px; border-radius: 10px; background: #EFF6FF;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #BFDBFE; box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
}
.sentinel-icon-ring img { height: 18px; width: 18px; }
.sentinel-title { font-size: 11pt; font-weight: 800; color: #0F172A; display: flex; align-items: center; gap: 10px; letter-spacing: -0.2px; }
.sentinel-meta { font-size: 9pt; color: #64748B; margin-top: 2px; }
.sentinel-badge { background: #3B82F6; color: #FFF; font-size: 7.5pt; font-weight: 700; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px; }

/* 2. The Module Chassis (Individual Report Container) */
.sentinel-module-chassis {
    background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 14px;
    padding: 24px; margin-bottom: 28px;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04);
    position: relative; overflow: hidden;
}
.sentinel-module-chassis::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; }
.sentinel-module-chassis[data-theme="red"]::after { background: linear-gradient(90deg, #EF4444, #FCA5A5); }
.sentinel-module-chassis[data-theme="blue"]::after { background: linear-gradient(90deg, #3B82F6, #93C5FD); }
.sentinel-module-chassis[data-theme="orange"]::after { background: linear-gradient(90deg, #F97316, #FDBA74); }
.sentinel-module-chassis[data-theme="pink"]::after { background: linear-gradient(90deg, #EC4899, #F9A8D4); }

.sentinel-module-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.module-title { font-size: 15pt; font-weight: 800; color: #0F172A; letter-spacing: -0.2px; }
.module-sub { font-size: 8.5pt; font-weight: 600; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 3px; }

.sentinel-focus-btn {
    display: flex; align-items: center; gap: 6px;
    font-size: 8pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: #475569; background: #F1F5F9; padding: 6px 12px; border-radius: 20px; cursor: pointer; transition: all 0.2s ease;
}
.sentinel-focus-btn:hover { background: #E2E8F0; color: #0F172A; transform: translateY(-1px); }
.focus-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.focus-dot.red { background: #EF4444; box-shadow: 0 0 6px #EF4444; }
.focus-dot.blue { background: #3B82F6; box-shadow: 0 0 6px #3B82F6; }
.focus-dot.orange { background: #F97316; box-shadow: 0 0 6px #F97316; }
.focus-dot.pink { background: #EC4899; box-shadow: 0 0 6px #EC4899; }

/* iOS SEGMENTED CONTROL (Calibration) */
.vanguard-segmented-control { display: flex; gap: 4px; background: #F1F5F9; border-radius: 10px; padding: 4px; }
.vanguard-segment-btn {
    flex: 1; text-align: center; padding: 10px 0; font-size: 9.5pt; font-weight: 700; color: #64748B;
    border-radius: 8px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.vanguard-segment-btn:hover { color: #0F172A; }
.vanguard-segment-btn.active { background: #FFFFFF; color: #0F172A; box-shadow: 0 2px 6px rgba(15,23,42,0.08); }
.vanguard-segment-btn.active.pass { color: #10B981; }
.vanguard-segment-btn.active.monitor { color: #F59E0B; }
.vanguard-segment-btn.active.fail { color: #EF4444; }

/* 3. THE SEQUENTIAL THREAD ENGINE (The Magic Workflow Line) */
.sentinel-sequential-thread {
    position: relative; display: flex; flex-direction: column; gap: 20px;
    padding-left: 28px; 
}
.sentinel-sequential-thread::before {
    content: ''; position: absolute; top: 10px; bottom: 20px; left: 6px;
    width: 2px; background: #E2E8F0; border-radius: 2px;
}
.sentinel-node { position: relative; width: 100%; }
.sentinel-node::before {
    content: ''; position: absolute; top: 24px; left: -26px; 
    width: 10px; height: 10px;
    background: #FFFFFF; border: 2px solid #CBD5E1; border-radius: 50%;
    box-shadow: 0 0 0 4px #FFFFFF; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2;
}
.sentinel-sequential-thread[data-theme="red"] .sentinel-node:focus-within::before {
    border-color: #EF4444; transform: scale(1.3); box-shadow: 0 0 0 4px #FFFFFF, 0 0 10px rgba(239, 68, 68, 0.4);
}
.sentinel-sequential-thread[data-theme="blue"] .sentinel-node:focus-within::before {


    border-color: #3B82F6; transform: scale(1.3); box-shadow: 0 0 0 4px #FFFFFF, 0 0 10px rgba(59, 130, 246, 0.4);


}
.sentinel-sequential-thread[data-theme="orange"] .sentinel-node:focus-within::before {
    border-color: #F97316; transform: scale(1.3); box-shadow: 0 0 0 4px #FFFFFF, 0 0 10px rgba(249, 115, 22, 0.4);
}
.sentinel-sequential-thread[data-theme="pink"] .sentinel-node:focus-within::before {
    border-color: #EC4899; transform: scale(1.3); box-shadow: 0 0 0 4px #FFFFFF, 0 0 10px rgba(236, 72, 153, 0.4);
}

/* 4. MOBILE RESPONSIVENESS */
@media (max-width: 600px) {
    .sentinel-module-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .sentinel-focus-btn { align-self: flex-start; }
    .sentinel-sequential-thread { padding-left: 20px; }
    .sentinel-node::before { left: -18px; top: 20px; width: 8px; height: 8px; }
    .sentinel-sequential-thread::before { left: 4px; }
    .sentinel-module-chassis { padding: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   👑 THE "VANGUARD" ADMIN HUB (Modal View)
   ───────────────────────────────────────────────────────────────────────
   Authoritative, heavy-glass aesthetics for structural tools. Features
   Obsidian Dark Mode and Prismatic Indigo.
   ═══════════════════════════════════════════════════════════════════════ */

.qms-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }

.qms-admin-tile {
    position: relative; display: flex; align-items: center; gap: 16px;
    padding: 20px 24px; border-radius: 16px; cursor: pointer; isolation: isolate;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden;
}

.qms-admin-icon-wrap {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.qms-admin-icon { height: 24px; opacity: 0.8; transition: all 0.3s ease; }
.qms-admin-text { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.qms-admin-title { font-size: 11.5pt; font-weight: 800; letter-spacing: -0.01em; }
.qms-admin-sub { font-size: 8pt; font-weight: 600; transition: color 0.3s ease; }
.qms-admin-badge {
    padding: 6px 12px; border-radius: 8px; font-size: 7.5pt; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.08em; flex-shrink: 0; transition: all 0.3s ease;
}

.qms-admin-tile:hover { transform: translateY(-2px); }
.qms-admin-tile:hover .qms-admin-icon-wrap { transform: scale(1.08); }
.qms-admin-tile:hover .qms-admin-icon { opacity: 1; }

/* ── THEME 1: OBSIDIAN ── */
.qms-admin-tile[data-theme="obsidian"] {
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
    border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 6px 16px rgba(15, 23, 42, 0.15);
}
.qms-admin-tile[data-theme="obsidian"] .qms-admin-title { color: #F8FAFC; }
.qms-admin-tile[data-theme="obsidian"] .qms-admin-sub { color: #94A3B8; }
.qms-admin-tile[data-theme="obsidian"] .qms-admin-icon-wrap { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.05); }
.qms-admin-tile[data-theme="obsidian"] .qms-admin-icon { filter: brightness(0) invert(1); }
.qms-admin-tile[data-theme="obsidian"] .qms-admin-badge { background: rgba(255, 255, 255, 0.1); color: #E2E8F0; border: 1px solid rgba(255, 255, 255, 0.05); }

.qms-admin-tile[data-theme="obsidian"]:hover { background: linear-gradient(135deg, #334155 0%, #1E293B 100%); border-color: rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 12px 24px -6px rgba(15, 23, 42, 0.4); }
.qms-admin-tile[data-theme="obsidian"]:hover .qms-admin-icon-wrap { background: rgba(255, 255, 255, 0.1); }
.qms-admin-tile[data-theme="obsidian"]:hover .qms-admin-sub { color: #CBD5E1; }
.qms-admin-tile[data-theme="obsidian"]:hover .qms-admin-badge { background: #FFFFFF; color: #0F172A; }

/* ── THEME 2: PRISMATIC INDIGO ── */
.qms-admin-tile[data-theme="indigo"] {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 1px solid rgba(226, 232, 240, 0.8); box-shadow: inset 0 1px 0 #FFFFFF, 0 6px 16px -2px rgba(15, 23, 42, 0.03);
}
.qms-admin-tile[data-theme="indigo"] .qms-admin-title { color: #0F172A; }
.qms-admin-tile[data-theme="indigo"] .qms-admin-sub { color: #64748B; }
.qms-admin-tile[data-theme="indigo"] .qms-admin-icon-wrap { background: #F5F3FF; border: 1px solid #DDD6FE; box-shadow: inset 0 2px 4px #FFFFFF; }
.qms-admin-tile[data-theme="indigo"] .qms-admin-icon { filter: brightness(0) saturate(100%) invert(30%) sepia(91%) saturate(3015%) hue-rotate(255deg) brightness(91%) contrast(97%); }
.qms-admin-tile[data-theme="indigo"] .qms-admin-badge { background: #EFF6FF; color: #3B82F6; border: 1px solid #BFDBFE; }

.qms-admin-tile[data-theme="indigo"]:hover { background: linear-gradient(135deg, #FFFFFF 0%, #F5F3FF 100%); border-color: #C4B5FD; box-shadow: inset 0 1px 0 #FFFFFF, 0 12px 32px -8px rgba(124, 58, 237, 0.2); }
.qms-admin-tile[data-theme="indigo"]:hover .qms-admin-icon-wrap { background: #FFFFFF; border-color: #C4B5FD; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15); }
.qms-admin-tile[data-theme="indigo"]:hover .qms-admin-sub { color: #7C3AED; }
.qms-admin-tile[data-theme="indigo"]:hover .qms-admin-badge { background: #3B82F6; color: #FFFFFF; }

/* ==========================================================================
   🚀 PROHMOTION V2: STEALTH AUTHORITY BANNER (UNIVERSAL ENGINE)
   ========================================================================== */

.qms-stealth-banner {
    position: relative; margin: 16px 24px 8px 24px; padding: 14px 20px;
    background: rgba(248, 250, 252, 0.85); 
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgba(203, 213, 225, 0.5); border-radius: 12px;
    display: flex; align-items: center; justify-content: space-between;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.02), 0 2px 4px -1px rgba(15, 23, 42, 0.02), inset 0 1px 0 rgba(255, 255, 255, 0.8); 
    overflow: hidden; animation: stealth-entrance 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.qms-stealth-glow {
    position: absolute; top: -50%; left: -10%; width: 120%; height: 200%;
    background: radial-gradient(circle at 0% 50%, rgba(124, 58, 237, 0.04) 0%, transparent 50%);
    z-index: 0; pointer-events: none; 
}

.qms-stealth-avatar-wrap { position: relative; z-index: 1; margin-right: 14px; }
.qms-stealth-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, #F8FAFC, #E2E8F0); border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.06); display: flex; align-items: center; justify-content: center;
    font-size: 11pt; font-weight: 700; color: #334155; font-family: 'Inter', -apple-system, sans-serif;
}

.qms-stealth-identity { position: relative; z-index: 1; flex-grow: 1; display: flex; flex-direction: column; gap: 2px; }
.qms-stealth-label { font-size: 7.5pt; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: #94A3B8; }
.qms-stealth-name { font-size: 11.5pt; font-weight: 600; color: #0F172A; letter-spacing: -0.2px; }
.qms-stealth-email { font-size: 9.5pt; font-weight: 400; color: #64748B; margin-left: 6px; }

.qms-stealth-status {
    position: relative; z-index: 1; display: flex; align-items: center; gap: 8px;
    padding: 6px 14px; background: rgba(255, 255, 255, 0.8); border-radius: 30px;
    font-size: 8.5pt; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); border: 1px solid rgba(226, 232, 240, 0.8);
}

.qms-stealth-dot { width: 6px; height: 6px; border-radius: 50%; animation: stealth-pulse-dot 2.5s infinite cubic-bezier(0.4, 0, 0.2, 1); }

@keyframes stealth-entrance {
    from { opacity: 0; transform: translateY(-8px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes stealth-pulse-dot {
    0%, 100% { transform: scale(0.85); opacity: 0.6; }
    50% { transform: scale(1.3); opacity: 1; }
}

@media (max-width: 600px) {
    .qms-stealth-banner { margin: 10px 12px 4px; padding: 10px 12px; gap: 8px; }
    .qms-stealth-avatar { width: 32px; height: 32px; font-size: 10pt; }
    .qms-stealth-avatar-wrap { margin-right: 8px; }
    .qms-stealth-identity { min-width: 0; }
    .qms-stealth-name { font-size: 10.5pt; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
    .qms-stealth-email { display: none !important; }
    .qms-stealth-status { padding: 4px 10px; font-size: 7.5pt; letter-spacing: 0.2px; flex-shrink: 0; margin-left: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   🌙 ZEN MODE: ICON & GLOW ADAPTER (The Missing Image Fix)
   ───────────────────────────────────────────────────────────────────────
   Converts standard daylight images into glowing dark-mode silhouettes 
   and restores the Red/Blue ambient neon glows.
   ═══════════════════════════════════════════════════════════════════════ */

body:is(.focus-active, .zen-extreme-active) .holo-icon-wrap img {
    display: block !important; 
    filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0,0,0,0.8)) !important;
    opacity: 0.95 !important; transition: all 0.4s ease !important;
}

body:is(.focus-active, .zen-extreme-active) .holo-icon-wrap:is(.red-glow, .blue-glow) { background: #1E293B !important; }

body:is(.focus-active, .zen-extreme-active) .holo-icon-wrap.red-glow {
    border: 1px solid rgba(248, 113, 113, 0.4) !important; 
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.3), inset 0 0 8px rgba(239, 68, 68, 0.15) !important;
}
body:is(.focus-active, .zen-extreme-active) .holo-icon-wrap.blue-glow {
    border: 1px solid rgba(96, 165, 250, 0.4) !important; 
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.3), inset 0 0 8px rgba(59, 130, 246, 0.15) !important;
}

/* ====================================================================
   📱 MOBILE UI SPACING OVERRIDES (STRICTLY GAPS ONLY)
   ==================================================================== */
@media (max-width: 768px) {
    #mon_tray, #mon_tray > div, #mon_top_tabs { gap: 4px !important; }
    .mon-tray-group { gap: 2px !important; }
    #mon_date_range { gap: 6px !important; padding-inline: 8px !important; }
}



















/* ═══════════════════════════════════════════════════════════════════════
   14. CLICK-JACKING PROTECTION (The "Ghost-Buster" Layer)
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. Prevent pseudo-elements (glows, borders, shadows) from stealing clicks */
#input_new_div .div_button::before,
#input_new_div .div_button::after,
#input_new_div .btn-purple-pro::before,
#input_new_div .btn-purple-pro::after,
#input_new_div .mark-complete-btn::before,
#input_new_div .mark-complete-btn::after,
#input_new_div .save-action-btn::before,
#input_new_div .save-action-btn::after {
    pointer-events: none !important; 
}

/* 2. Isolate the Stacking Context of every button */
/* This forces the browser to calculate the button's exact borders for clicks, ignoring any spilled-over shadows */
body:not(.focus-active):not(.zen-extreme-active) #input_new_div .div_button,
body:not(.focus-active):not(.zen-extreme-active) #input_new_div .btn-purple-pro,
body:not(.focus-active):not(.zen-extreme-active) #input_new_div .mark-complete-btn,
body:not(.focus-active):not(.zen-extreme-active) #input_new_div .save-action-btn {
    position: relative !important; /* Establishes a firm hit-box */
    z-index: 10 !important; /* Lifts the actual button above any overlapping glass layers */
    isolation: isolate !important; /* Locks the click area to the physical button only */
}

/* 3. Elevate them on hover so they don't dip under other elements */
body:not(.focus-active):not(.zen-extreme-active) #input_new_div .div_button:hover,
body:not(.focus-active):not(.zen-extreme-active) #input_new_div .btn-purple-pro:hover,
body:not(.focus-active):not(.zen-extreme-active) #input_new_div .mark-complete-btn:hover,
body:not(.focus-active):not(.zen-extreme-active) #input_new_div .save-action-btn:hover {
    z-index: 20 !important;
}

/* 4. Kill pointer-events on icons/spans inside the button */
/* Ensures the click registers on the BUTTON tag, preventing Javascript "Event Bubbling" misfires */
body:not(.focus-active):not(.zen-extreme-active) #input_new_div .div_button *,
body:not(.focus-active):not(.zen-extreme-active) #input_new_div .btn-purple-pro *,
body:not(.focus-active):not(.zen-extreme-active) #input_new_div .mark-complete-btn *,
body:not(.focus-active):not(.zen-extreme-active) #input_new_div .save-action-btn * {
    pointer-events: none !important; 
}











/* ═══════════════════════════════════════════════════════════════════════
   16. ABSOLUTE VISIBILITY ENFORCEMENT (The "Stay Dead" Rule)
   ═══════════════════════════════════════════════════════════════════════ */

/* If JavaScript or PHP explicitly tells an element to hide, OVERRIDE all other rules and force it to hide */
#input_new_div [style*="display: none"],
#input_new_div [style*="display:none"],
#input_new_div [style*="DISPLAY: NONE"],
#input_new_div [style*="DISPLAY:NONE"] {
    display: none !important;
}

/* Enforce standard hidden classes and HTML5 hidden attributes */
#input_new_div .hidden,
#input_new_div .d-none,
#input_new_div [hidden] {
    display: none !important;
}










/* ═══════════════════════════════════════════════════════════════════════
   17. SENTINEL GLASS PANE DENSITY (Perfected Timeline & Spacing)
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. Tighten the wasted space without destroying the border */
#input_new_div .sentinel-sequential-thread {
    padding-left: 16px !important; /* Brings the input boxes closer to the line */
    margin-left: 8px !important;   /* Pushes the line slightly off the left wall */
}

/* 2. Color-code the NATIVE line (Only changes the color, doesn't add a new line) */
#input_new_div .sentinel-sequential-thread[data-theme="red"] {
    border-color: rgba(239, 68, 68, 0.5) !important; /* NCR Red */
}
#input_new_div .sentinel-sequential-thread[data-theme="blue"] {


    border-color: rgba(59, 130, 246, 0.5) !important; /* Calibration Blue */


}
#input_new_div .sentinel-sequential-thread[data-theme="orange"] {
    border-color: rgba(249, 115, 22, 0.5) !important; /* Corrective Action Orange */
}
#input_new_div .sentinel-sequential-thread[data-theme="pink"] {
    border-color: rgba(236, 72, 153, 0.5) !important; /* Workplace Inspection Pink */
}

/* 3. Strip the wasted padding inside the individual nodes */
#input_new_div .sentinel-node {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* 4. Pull the entire chassis flush to the left */
#input_new_div .sentinel-module-chassis {
    padding-left: 12px !important; 
    padding-right: 12px !important;
}
/* ═══════════════════════════════════════════════════════════════════════
   18. AUDIT TRAIL CIRCLE ALIGNMENT (The Geometry Fix)
   ═══════════════════════════════════════════════════════════════════════ */

/* Re-align the native circles to mathematically match our new 16px padding */
#input_new_div .sentinel-node::before,
#input_new_div .sentinel-node::after,
#input_new_div .sentinel-sequential-thread > div::before,
#input_new_div .sentinel-sequential-thread > div::after {
    /* The Math: 
       Line is 16px away + 2px line thickness. 
       Pulling the circle back by ~22px perfectly centers it! 
    */
    left: -14px !important; 
}










/* ═══════════════════════════════════════════════════════════════════════
   19. MODAL HEADER ACTIONS (The Corner Dock Fix)
   ═══════════════════════════════════════════════════════════════════════ */

/* Targets the container holding the Close/Maximize buttons and physically pulls them into the corner */
#input_new_div .mi-window-actions,
#input_new_div .top-right-actions,
#input_new_div #max_btn_wrapper,
#input_new_div .mi-btn-close {
    margin-top: -8px !important;  /* Pulls them up toward the ceiling */
    margin-right: -8px !important; /* Pulls them right toward the wall */
}











/* ========================================================================  
   THE NUCLEAR FORCE-DARK MODE (Chrome Flag Replica)
   ======================================================================== 
@media (prefers-color-scheme: dark) {
    html {
        // 1. BRUTE FORCE INVERT EVERY PIXEL ON THE SCREEN 
        // invert(1) flips light to dark. hue-rotate(180deg) stops your purples and blues from turning neon green/yellow. 
        filter: invert(1) hue-rotate(180deg) !important;
        
        // Force the base background to be light so it correctly inverts to dark slate/black 
        background-color: #F8FAFC !important; 
    }

    // 2. DOUBLE-INVERT MEDIA & AVATARS 
    // We must re-invert photos, icons, and avatars so they don't look like photo-negative x-rays. 
    img, 
    svg, 
    video, 
    iframe, 
    canvas,
    .ui-icon, 
    .mon-avatar, 
    .tile-avatar, 
    .inbox-avatar, 
    .chat-bubble-avatar, 
    .ghost-icon, 
    .rc-icon-wrap, 
    .qms-stealth-avatar, 
    .qms-admin-icon-wrap,
    .ent-attach-image {
        filter: invert(1) hue-rotate(180deg) !important;
    }
}*/

/* ========================================================================  
   THE UNIVERSAL OLED ENGINE v8: PURE PROFESSIONAL (THE FINAL CATCH-ALL)
   ======================================================================== */
@media (prefers-color-scheme: dark) {
    
    /* 1. THE GLOBAL DOM FLIP */
    html {
        filter: invert(1) hue-rotate(180deg) brightness(1.05) contrast(0.95) saturate(1.05) !important;
        background-color: #F8FAFC !important; 
        color-scheme: dark !important;
    }

    /* 2. SMART MEDIA RE-INVERSION */
    img, svg, video, iframe, canvas, .ui-icon {
        filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(1.1) !important;
    }

    /* 3. THE BRAND SHIELD: MATTE PURPLE (ZERO GLOW) */
    /* Added: .btn-create-new, .active-tab-premium, .mon-lvs-tab.active, .tnav-avatar-user, text, and stripes */
    .active, .active-toggle, .active-view, .mon-ttab.active,
    .mon-tab-active, .mon-tab.active, .mtab.mtab-active, .mtab.active, 
    .tnav-btn-new, .tnav-btn-active, .btn-create-new,
    .f-tab.active, .mon-tray-pill.active, .qt-active, .qt-pill.active, .mon-leaf.active,
    .view-toggle-btn.active-toggle, .active-tab-ultra, .active-tab-premium, .inbox-tab-premium.active, 
    .active-filter-chip, .mon-lvs-tab.active,
    #submit_btn_container.div_button, .btn-purple-pro, .floating-filter-btn, 
    .fab-sub-btn, .alert-pill, .tab-badge-count, .mon-lvs-collapse,
    .tnav-avatar-user, .mon-card-custom-title, .mon-card-stripe {
        /* Flat, rich purple. No shadows. */
        filter: invert(1) hue-rotate(180deg) brightness(1.2) saturate(1.1) contrast(1.1) !important;
        box-shadow: none !important; 
        border-color: transparent !important;
    }

    /* 4. CRISP ICONS */
    .active img, .active svg, .active .ui-icon,
    .mon-ttab.active img, .mon-ttab.active svg,
    .tnav-btn-new img, .tnav-btn-new svg, .btn-create-new img, .btn-create-new svg,
    #submit_btn_container.div_button img, #submit_btn_container.div_button svg,
    .btn-purple-pro img, .btn-purple-pro svg,
    .floating-filter-btn img, .floating-filter-btn svg,
    .fab-sub-btn img, .fab-sub-btn svg,
    .mon-lvs-tab.active img, .mon-lvs-tab.active svg {
        filter: brightness(1.5) !important; 
    }

    /* 5. FONT SMOOTHING */
    * {
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }

    /* 6. KILL ALL FROSTED GLARES, SHEENS & SHADOWS GLOBALLY */
    body::before, body::after, #global_top_nav::before, #global_top_nav::after,
    .div_button::before, .div_button::after, .btn-purple-pro::before, .btn-purple-pro::after,
    .mark-complete-btn::before, .mark-complete-btn::after, .save-action-btn::before, .save-action-btn::after,
    .card-header-btn::before, .card-header-btn::after, .hover-btn::before, .hover-btn::after,
    .sim-btn::before, .sim-btn::after, .sleek-clear-btn::before, .sleek-clear-btn::after,
    .restore-active-btn::before, .restore-active-btn::after, .sleek-toggle::before, .sleek-toggle::after,
    .format-action-btn::before, .format-action-btn::after, .focus-tier-btn::before, .focus-tier-btn::after,
    .cal-status-btn::before, .cal-status-btn::after, .quick-add-pill::before, .quick-add-pill::after,
    .unlink-btn::before, .unlink-btn::after, .btn_box::before, .btn_box::after,
    .div_menu::before, .div_menu::after, .filter-pill::before, .filter-pill::after {
        display: none !important;
        animation: none !important;
        background: none !important;
        box-shadow: none !important;
    }

    /* 7. THE MATTE SCROLLBAR */
    ::-webkit-scrollbar { width: 14px !important; height: 14px !important; background: #F8FAFC !important; }
    ::-webkit-scrollbar-track { background: #F8FAFC !important; }
    ::-webkit-scrollbar-thumb { background: #CBD5E1 !important; border-radius: 10px !important; border: 3px solid #F8FAFC !important; }
    ::-webkit-scrollbar-thumb:hover { background: #94A3B8 !important; }

    /* 8. FLAT ACTION BUTTONS (Matte Slate) */
    .mark-complete-btn, .save-action-btn, .card-header-btn, 
    .hover-btn, .sim-btn, .sleek-clear-btn, .restore-active-btn, 
    .sleek-toggle, .format-action-btn, .focus-tier-btn, 
    .cal-status-btn, .quick-add-pill, .unlink-btn, .btn-purple-pro {
        background: #F8FAFC !important; /* Inverts to flat #0A0A0A */
        color: #334155 !important;      /* Inverts to cool grey text */
        border: 1px solid #E2E8F0 !important; /* Inverts to hair-thin dark border */
        box-shadow: none !important;
        transform: none !important;     /* Kills the hover jump */
    }

    .mark-complete-btn:hover, .save-action-btn:hover, .card-header-btn:hover, 
    .hover-btn:hover, .sim-btn:hover, .sleek-clear-btn:hover, .restore-active-btn:hover, 
    .sleek-toggle:hover, .format-action-btn:hover, .focus-tier-btn:hover, 
    .cal-status-btn:hover, .quick-add-pill:hover, .unlink-btn:hover, .btn-purple-pro:hover {
        background: #E2E8F0 !important; /* Inverts to slightly lighter charcoal */
        border-color: #CBD5E1 !important;
        color: #0F172A !important;      
        box-shadow: none !important;
        transform: none !important;
    }

    /* 9. GROUND THE CARDS (No Jumping, No Blurring) */
    .mon-card, .mon-grid-card, .ultra-list-tile {
        box-shadow: none !important;
        transform: none !important;
    }
    
    .mon-list:hover .mon-card, .mon-grid:hover .mon-grid-card, #content_list:hover .ultra-list-tile,
    .mon-card:hover, .mon-grid-card:hover, .ultra-list-tile:hover,
    .mon-list:hover .mon-card:hover, .mon-grid:hover .mon-grid-card:hover, #content_list:hover .ultra-list-tile:hover {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        box-shadow: none !important;
    }
	
}














/* ========================================================================  
   GLOBAL HOVER & GLARE REDUCTION (Applies permanently to Light & Dark Mode)
   ======================================================================== */

/* 1. ASSASSINATE EVERY SHEEN LAYER GLOBALLY (Both ::before and ::after) */
/* This catches every single button type and explicitly kills the diagonal sweep animations */
.div_button::before, .div_button::after,
.btn-purple-pro::before, .btn-purple-pro::after,
.mark-complete-btn::before, .mark-complete-btn::after,
.save-action-btn::before, .save-action-btn::after,
.card-header-btn::before, .card-header-btn::after,
.hover-btn::before, .hover-btn::after,
.sim-btn::before, .sim-btn::after,
.sleek-clear-btn::before, .sleek-clear-btn::after,
.restore-active-btn::before, .restore-active-btn::after,
.sleek-toggle::before, .sleek-toggle::after,
.format-action-btn::before, .format-action-btn::after,
.focus-tier-btn::before, .focus-tier-btn::after,
.cal-status-btn::before, .cal-status-btn::after,
.quick-add-pill::before, .quick-add-pill::after,
.unlink-btn::before, .unlink-btn::after,
.btn_box::before, .btn_box::after,
.div_menu::before, .div_menu::after,
.filter-pill::before, .filter-pill::after {
    display: none !important;
    animation: none !important;
    background: none !important;
    background-image: none !important;
    opacity: 0 !important;
    box-shadow: none !important;
}

/* 2. TAME THE SAVE/UPDATE BUTTON HOVER SHADOWS */
/* Replaces the massive, glowing 28px neon shadow with a crisp, subtle, professional lift */
#submit_btn_container.div_button:hover, 
.save-action-btn:hover, 
.btn-purple-pro:hover {
    box-shadow: 0 4px 10px rgba(109, 40, 217, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-1px) !important; /* Keeps the tactile physical click feel */
}

/* 3. SUBDUE THE ACTION BUTTONS (Snooze, Mark Complete, Mark Unread) */
/* Stops the action buttons from glowing and popping too aggressively */
.mon-action-btn:hover, 
.card-header-btn:hover, 
.mark-complete-btn:hover {
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05) !important;
    transform: translateY(-1px) !important;
}