/* ═══════════════════════════════════════════════════════════════════════ PROHMOTION QMS — MASTER STYLESHEET v13 ─────────────────────────────────────────────────────────────────────── §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 §16 Directory (tags.php) §17 Modal & Editor System §18 Zen Mode §19 Policy Compliance Card §20 Calendar §21 Global Top Navigation §22 Floating Format Menu §23 Media Queries (all breakpoints, largest → smallest) ─────────────────────────────────────────────────────────────────────── Rules: one :root · zero duplicates · !important only vs inline-JS · media queries only at §23 · 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); } /* ─────────────────────────────────────────────────────────────────────── §2 GLOBAL RESET & BASE ─────────────────────────────────────────────────────────────────────── */ *,*::before,*::after { box-sizing:border-box; } html,body { font-family:var(--main-font); font-size:var(--txt-size); color:var(--text-strong); background:var(--sig-app-bg) !important; background-attachment:fixed !important; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; 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%); } 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%); } 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:8px; height:8px; } ::-webkit-scrollbar-track { background:transparent; border-radius:10px; } ::-webkit-scrollbar-thumb { background:rgba(148,163,184,0.34); border-radius:10px; transition:0.3s; } ::-webkit-scrollbar-thumb:hover { background:rgba(139,92,246,0.50); } /* ─────────────────────────────────────────────────────────────────────── §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; } #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; 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.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:absolute; top:120%; right:0; 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; transform:translateY(10px) scale(0.95); transition:all 0.25s cubic-bezier(0.2,0.8,0.2,1); z-index:9999 !important; padding:8px; transform-origin:top right; } .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; } .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-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); } /* ─────────────────────────────────────────────────────────────────────── §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; } /* ─────────────────────────────────────────────────────────────────────── §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:fixed !important; top:50% !important; left:50% !important; transform:translate(-50%,-50%) !important; display:flex; flex-direction:column; width:750px; max-height:95vh !important; min-width:300px; min-height:400px; resize:both; background-color:#FFF; border-radius:16px; box-shadow:0 25px 80px rgba(0,0,0,0.2) !important; border:1px solid rgba(0,0,0,0.1); 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-maximized #input_new_div { top:0 !important; left:0 !important; transform:none !important; width:100vw !important; height:100vh !important; max-height:100vh !important; border-radius:0 !important; box-shadow:none !important; } .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); } /* ─────────────────────────────────────────────────────────────────────── §20 CALENDAR ─────────────────────────────────────────────────────────────────────── */ .cal-wrapper { background:#FFF; border-radius:16px; box-shadow:0 10px 30px rgba(15,23,42,0.06); overflow:hidden; border:1px solid #E2E8F0; margin-bottom:50px; width:100%; } .cal-table { width:100%; border-collapse:collapse; table-layout:fixed; } .cal-th { background:#F8FAFC; padding:16px 10px; border-bottom:1px solid #E2E8F0; color:#64748B; font-size:8.5pt; text-transform:uppercase; letter-spacing:1.5px; text-align:center; font-weight:800; } .cal-td { border:1px solid #F1F5F9; height:135px; vertical-align:top; padding:10px; position:relative; transition:background 0.2s; } .cal-td:hover { background:#F8FAFC; } .cal-day-num { font-weight:700; color:#64748B; margin-bottom:8px; display:inline-flex; justify-content:center; align-items:center; font-size:10pt; width:28px; height:28px; border-radius:50%; transition:all 0.2s cubic-bezier(0.4,0,0.2,1); cursor:pointer; } .cal-day-num:hover { background:#0F62FE !important; color:#FFF !important; transform:scale(1.15); box-shadow:0 4px 10px rgba(15,98,254,0.3); } .cal-day-today { background:#0F172A; color:#FFF !important; } .cal-note { font-size:8.5pt; padding:8px 10px; border-radius:var(--radius-sm); margin-bottom:6px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border:1px solid rgba(0,0,0,0.04); transition:all 0.15s ease; font-weight:500; box-shadow:var(--shadow-xs); } .cal-note:hover { transform:scale(1.03) translateY(-2px); box-shadow:0 6px 14px rgba(15,23,42,0.1); position:relative; z-index:10; border-color:rgba(0,0,0,0.08); } .cal-drag-zone { min-height:40px; height:calc(100% - 35px); display:flex; flex-direction:column; gap:4px; touch-action:pan-y !important; } .mobile-day-name { display:none; } /* ─────────────────────────────────────────────────────────────────────── §21 GLOBAL TOP NAVIGATION ─────────────────────────────────────────────────────────────────────── */ #global_top_nav { position:sticky !important; z-index:1000; isolation:isolate; 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; } #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; z-index:-1; } /* ::after accent line — intentionally killed (was blocking pointer events) */ #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:40 !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:45; } /* 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:translate(3px,-3px) !important; } .search-item:active,.dropdown-item:active,.relation-pill:active,.hover-btn:active, .filter-pill:active,.div_button:active,.inbox-tab-ultra:active { transform:translate(1px,-1px) !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; } } /* 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:42px !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:translate(3px,-3px) !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; } /* 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 */ .mobile-action-bar { display:flex !important; margin-left:auto; } .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; } /* Calendar linearisation */ .cal-wrapper { background:transparent; box-shadow:none; border:none; overflow:visible !important; } .cal-table,.cal-table tbody,.cal-table tr,.cal-td { display:block; width:100%; height:auto !important; } .cal-th,.cal-td:empty { display:none !important; } .cal-day-num { font-size:14pt; width:auto; height:auto; text-align:left; margin-bottom:14px; color:#0F172A; border-radius:0; background:transparent; } .cal-day-num:hover { transform:none; background:transparent !important; color:#0F62FE !important; box-shadow:none; } .cal-day-today { background:transparent !important; color:#0F62FE !important; border-bottom:3px solid #0F62FE; padding-bottom:2px; } .cal-drag-zone { height:auto !important; min-height:40px !important; } .mobile-day-name { display:inline-block; margin-right:8px; color:#94A3B8; font-weight:700; text-transform:uppercase; font-size:10pt; letter-spacing:1px; } .cal-note { white-space:normal; padding:12px 14px; font-size:10.5pt; margin-bottom:8px; line-height:1.4; } /* 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; margin:-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:140px !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:2147483640 !important; background:rgba(255,255,255,0.95) !important; backdrop-filter:blur(12px) !important; -webkit-backdrop-filter:blur(12px) !important; border-top:1px solid #E2E8F0 !important; padding-bottom:calc(15px + env(safe-area-inset-bottom)) !important; padding-top:15px !important; padding-left:15px !important; padding-right:15px !important; box-shadow:0 -10px 25px rgba(15,23,42,0.05) !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; } .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. ═══════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────────── §1 CSS CUSTOM PROPERTIES (THE TACTILE CORE) ─────────────────────────────────────────────────────────────────────── */ :root { /* Luminous Brand Accents — Electric, yet professional */ --pro-accent-light: #A78BFA; --pro-accent-1: #8B5CF6; /* Vibrant active state */ --pro-accent-2: #6D28D9; /* Deep, grounded primary */ --pro-accent-3: #4C1D95; /* True Whitespace Surfaces */ --surface-bg: #FCFDFE; /* A breath of icy white */ --surface-card: #FFFFFF; --surface-hover: #F8FAFC; /* Text Hierarchy — High contrast, optical crispness */ --text-strong: #090E17; --text-body: #334155; --text-soft: #64748B; /* The "Zero-Gravity" Shadow System Instead of borders, we use a 1px sharp inner ring combined with deep, ultra-diffuse ambient shadows. This mimics machined glass. */ --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); /* Apple-style Spring Physics for sexy micro-interactions */ --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 (CLINICAL PRECISION) ─────────────────────────────────────────────────────────────────────── */ html, body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; /* Move to px for flawless sub-pixel rendering */ line-height: 1.6; color: var(--text-body); background: var(--surface-bg) !important; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; margin: 0; padding: 0; } ::selection { background: rgba(139, 92, 246, 0.2); color: var(--pro-accent-3); } /* ─────────────────────────────────────────────────────────────────────── §6 SURFACE PANELS & CARDS (LEVITATING BENTO) ─────────────────────────────────────────────────────────────────────── */ .div_box_1, .div_box_2, .div_window, .rich-card, .ultra-list-tile { 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, .ultra-list-tile: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. ═══════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────────── §8 AMBIENT SCROLLBARS (The Mac OS Treatment) ─────────────────────────────────────────────────────────────────────── */ /* Default scrollbars are brutalist and distracting. These float seamlessly. */ ::-webkit-scrollbar { width: 14px; height: 14px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.2); border-radius: 10px; /* The trick: use a transparent border to create a "floating" pill effect */ border: 4px solid rgba(255,255,255,0); background-clip: padding-box; transition: background var(--spring-fast); } ::-webkit-scrollbar-thumb:hover { background: rgba(124, 58, 237, 0.4); border: 4px solid rgba(255,255,255,0); background-clip: padding-box; } /* ─────────────────────────────────────────────────────────────────────── §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 */ .premium-dropdown-menu, .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; } /* 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; }