/* Neumorphism ("soft UI") skin, shared by every page. The idea: surfaces are the SAME color as the canvas behind them and are only told apart by a pair of shadows (a light one + a dark one, as if lit from the top-left) - raised = pushed out, inset = pressed in. This file retrofits that look onto the existing markup by targeting the exact class combinations kit.js and the page shell already use for cards/buttons/inputs/nav, so no page or component needed to be rewritten. Reacts to light/dark automatically: theme.js toggles `.dark` on , and the two variable blocks below simply supply a different canvas + shadow pair for each - every rule underneath is written once and works in both. */ :root { --neu-bg: #e9edf3; --neu-hi: rgba(255, 255, 255, 0.85); --neu-lo: rgba(163, 177, 198, 0.55); --neu-accent-bg: #dcf3e8; } html.dark { /* Brand palette (2026 refresh): Brand chính: #2F80ED (blue) Accent/Active: #22C55E core, #34D399 ink Nền admin: #0F172A canvas / #111827 raised surface SOS: #EF4444 The neumorph vars below alias these, so any rule that already reads --neu-* automatically picks up the new tokens. */ --neu-bg: #0F172A; --neu-surface: #111827; --neu-hi: rgba(255, 255, 255, 0.04); --neu-lo: rgba(0, 0, 0, 0.65); --neu-brand: #2F80ED; --neu-accent: #22C55E; --neu-accent-ink: #34D399; --neu-accent-bg: rgba(34, 197, 94, 0.14); --neu-accent-glow: #22C55E; --neu-hover-bg: rgba(34, 197, 94, 0.07); --neu-sos: #EF4444; --neu-sos-bg: rgba(239, 68, 68, 0.18); --neu-sos-ink: #FCA5A5; } /* distance/blur scale by size, so small chips don't get cavernous shadows */ .neu-raise-sm { box-shadow: 3px 3px 6px var(--neu-lo), -3px -3px 6px var(--neu-hi); } .neu-raise { box-shadow: 6px 6px 14px var(--neu-lo), -6px -6px 14px var(--neu-hi); } .neu-raise-lg { box-shadow: 10px 10px 24px var(--neu-lo), -10px -10px 24px var(--neu-hi); } .neu-inset { box-shadow: inset 3px 3px 7px var(--neu-lo), inset -3px -3px 7px var(--neu-hi); } .neu-flat { background: var(--neu-bg); } /* Canvas: body + the header/sidebar strip that sit directly on it become the same flat color, so cards read as "raised out of" them rather than sitting on a contrasting fill. */ body[class*="bg-slate-50"], body[class*="bg-surface"] { background: var(--neu-bg) !important; } aside[class*="bg-white"], header[class*="bg-white"] { background: var(--neu-bg) !important; border-color: transparent !important; } header[class*="bg-white"] { box-shadow: 0 4px 14px var(--neu-lo); } aside[class*="bg-white"] { box-shadow: 4px 0 14px var(--neu-lo); } /* Cards: kit.js's stat tiles, section card(), and the table wrapper all share this exact signature. */ .bg-white.rounded-lg.border.border-slate-200.p-4.shadow-sm, .bg-white.rounded-lg.border.border-slate-200.shadow-sm { background: var(--neu-bg) !important; border-color: transparent !important; box-shadow: 6px 6px 14px var(--neu-lo), -6px -6px 14px var(--neu-hi) !important; } /* Drawer panel, modal, and confirm dialog - lifted further off the canvas since they float above everything else. */ aside.bg-white.shadow-2xl, form.bg-white.rounded-xl.shadow-2xl, div.bg-white.rounded-xl.shadow-2xl { background: var(--neu-bg) !important; box-shadow: -14px 0 34px var(--neu-lo), 14px 0 34px var(--neu-lo) !important; } form.bg-white.rounded-xl.shadow-2xl, div.bg-white.rounded-xl.shadow-2xl { box-shadow: 12px 12px 30px var(--neu-lo), -12px -12px 30px var(--neu-hi) !important; } /* Buttons - secondary (white) buttons become raised pill-outs of the canvas; primary/danger keep their accent fill but pick up a soft colored lift instead of a flat drop shadow so they still read as part of the same system. Pressed state (:active) flips raised -> inset, the classic neumorphic "push" feedback. */ button.bg-white.hover\:bg-slate-50.text-slate-700.border-slate-300, a.bg-white.hover\:bg-slate-50.text-slate-700.border-slate-300 { background: var(--neu-bg) !important; border-color: transparent !important; box-shadow: 4px 4px 10px var(--neu-lo), -4px -4px 10px var(--neu-hi) !important; } button.bg-emerald-700.hover\:bg-emerald-800.text-white.border-emerald-700 { border-color: transparent !important; box-shadow: 4px 4px 12px rgba(4, 120, 87, 0.45), -4px -4px 10px var(--neu-hi) !important; } button.bg-rose-600.hover\:bg-rose-700.text-white.border-rose-600 { border-color: transparent !important; box-shadow: 4px 4px 12px rgba(190, 18, 60, 0.4), -4px -4px 10px var(--neu-hi) !important; } button.bg-white.hover\:bg-slate-50.text-slate-700.border-slate-300:active, a.bg-white.hover\:bg-slate-50.text-slate-700.border-slate-300:active, button.bg-emerald-700.hover\:bg-emerald-800.text-white.border-emerald-700:active, button.bg-rose-600.hover\:bg-rose-700.text-white.border-rose-600:active { box-shadow: inset 3px 3px 7px var(--neu-lo), inset -3px -3px 7px var(--neu-hi) !important; } /* Inputs - pressed-in fields read naturally as "you type into a groove". */ input.rounded-lg.border-slate-300, textarea.rounded-lg.border-slate-300, select.rounded-lg.border-slate-300, header input[placeholder*="Tìm"], table input[type="search"] { background: var(--neu-bg) !important; border-color: transparent !important; box-shadow: inset 3px 3px 7px var(--neu-lo), inset -3px -3px 7px var(--neu-hi) !important; } input.rounded-lg.border-slate-300:focus, textarea.rounded-lg.border-slate-300:focus, select.rounded-lg.border-slate-300:focus { box-shadow: inset 3px 3px 7px var(--neu-lo), inset -3px -3px 7px var(--neu-hi), 0 0 0 2px rgba(4, 120, 87, 0.35) !important; } kbd.bg-white.border.border-slate-200 { background: var(--neu-bg) !important; border-color: transparent !important; box-shadow: 2px 2px 5px var(--neu-lo), -2px -2px 5px var(--neu-hi) !important; } /* Sidebar nav: the active item is "pressed into" the sidebar rather than flat-filled + bordered; hovered/inactive items get a faint raise on hover only, so the resting list stays calm and only the current page and the thing your mouse is over pop. */ aside a[data-path] { border-color: transparent !important; transition: box-shadow .15s ease, background-color .15s ease; } aside a[data-path][aria-current="page"] { background: var(--neu-accent-bg) !important; box-shadow: inset 3px 3px 7px var(--neu-lo), inset -2px -2px 5px var(--neu-hi) !important; } aside a[data-path]:not([aria-current="page"]):hover { background: var(--neu-bg) !important; box-shadow: 3px 3px 7px var(--neu-lo), -3px -3px 7px var(--neu-hi) !important; } /* Dark-mode sidebar tone (Ảnh 2 palette): bg #123C2F · glow #1E5A45 · ink/icon #59E3B2 · hover #0F2F26 */ html.dark aside a[data-path][aria-current="page"] { background: var(--neu-accent-bg) !important; color: var(--neu-accent-ink) !important; border-color: var(--neu-accent-glow) !important; box-shadow: inset 0 0 0 1px var(--neu-accent-glow), inset 3px 3px 8px rgba(0, 0, 0, 0.55), 0 0 12px -2px rgba(89, 227, 178, 0.18) !important; } html.dark aside a[data-path][aria-current="page"] .material-symbols-outlined, html.dark aside a[data-path][aria-current="page"] span { color: var(--neu-accent-ink) !important; } html.dark aside a[data-path]:not([aria-current="page"]):hover { background: var(--neu-hover-bg) !important; color: var(--neu-accent-ink) !important; box-shadow: inset 0 0 0 1px rgba(30, 90, 69, 0.35) !important; } html.dark aside a[data-path]:not([aria-current="page"]):hover .material-symbols-outlined, html.dark aside a[data-path]:not([aria-current="page"]):hover span { color: var(--neu-accent-ink) !important; } /* Sidebar section labels ("TỔNG QUAN", "AN TOÀN & HỖ TRỢ", "TÀI CHÍNH"…): drop them further so they read as page structure, not as another list of navigation. Two templates use different Tailwind shades, hence the OR list. */ html.dark aside nav .uppercase.tracking-wider { color: rgba(148, 163, 184, 0.40) !important; /* slate-400 @ 40% */ font-weight: 500 !important; } /* SOS badge in the sidebar row + the header pill: red #EF4444 on a faded backing so it reads "urgent" without competing with the emerald accent. */ html.dark aside a[data-path="sos-khan-cap"]:not(.sos-idle) [data-bind="sos-badge"], html.dark header a[data-path="sos-khan-cap"]:not(.sos-idle) [data-bind="sos-alert"] { background: var(--neu-sos-bg) !important; color: var(--neu-sos-ink) !important; border-color: var(--neu-sos) !important; } html.dark header a[data-path="sos-khan-cap"]:not(.sos-idle) { background: var(--neu-sos-bg) !important; color: var(--neu-sos-ink) !important; border-color: var(--neu-sos) !important; } html.dark header a[data-path="sos-khan-cap"]:not(.sos-idle) .rounded-full { background: var(--neu-sos) !important; } /* Idle SOS state (0 open cases): swap red urgency for a neutral chip so the dispatcher can tell "quiet hold" from "action required" at a glance. Applies to any anchor tagged .sos-idle by data.js. */ a[data-path="sos-khan-cap"].sos-idle, a[data-path="sos-khan-cap"].sos-idle [data-bind="sos-alert"], a[data-path="sos-khan-cap"].sos-idle [data-bind="sos-badge"] { background: rgba(148, 163, 184, 0.10) !important; color: rgba(148, 163, 184, 0.85) !important; border-color: rgba(148, 163, 184, 0.28) !important; } a[data-path="sos-khan-cap"].sos-idle .rounded-full, a[data-path="sos-khan-cap"].sos-idle .animate-pulse { background: rgba(148, 163, 184, 0.55) !important; animation: none !important; } /* Dashboard "SOS đang mở" stat tile - same idle logic: red only while there's actually something open, calm slate otherwise. Toggled by data.js. */ #sos-kpi-card.sos-idle { border-color: rgba(148, 163, 184, 0.35) !important; } #sos-kpi-card.sos-idle [class*="text-rose-"] { color: rgb(100, 116, 139) !important; /* slate-500 */ } #sos-kpi-card.sos-idle .bg-rose-600 { background: rgb(148, 163, 184) !important; /* slate-400 */ } /* :not(.ring-2) so the click-to-select ring (data.js toggles ring-2 ring-emerald-500 on the chosen KPI card) isn't clobbered by this idle-state box-shadow - both set box-shadow, and without the exclusion this rule's higher specificity always won, so the SOS tile alone among the 6 KPI cards could never show its selected ring while SOS count was 0. */ html.dark #sos-kpi-card.sos-idle:not(.ring-2) { background: var(--neu-bg) !important; border-color: transparent !important; box-shadow: 6px 6px 14px var(--neu-lo), -6px -6px 14px var(--neu-hi) !important; } html.dark #sos-kpi-card.sos-idle.ring-2 { background: var(--neu-bg) !important; border-color: transparent !important; } html.dark #sos-kpi-card.sos-idle [class*="text-rose-"] { color: rgb(148, 163, 184) !important; } /* The sidebar's own SOS text/icon shouldn't turn grey while it is the active page — the active-nav rule still wins there. */ html.dark a[data-path="sos-khan-cap"].sos-idle[aria-current="page"] { background: var(--neu-accent-bg) !important; color: var(--neu-accent-ink) !important; border-color: var(--neu-accent-glow) !important; } /* Brand blue (#2F80ED) — used for the logo tile and the "VẬN HÀNH" chip next to it, so brand identity stays separate from the emerald accent we reserve for the active-nav state. */ html.dark aside .bg-emerald-700, html.dark aside .bg-teal-800 { background: var(--neu-brand) !important; } html.dark aside .text-emerald-700, html.dark aside .text-teal-800 { color: var(--neu-brand) !important; } /* The little "VẬN HÀNH" chip at the top of the sidebar. */ html.dark aside span.bg-primary-fixed, html.dark aside span.bg-slate-100.uppercase { background: rgba(47, 128, 237, 0.15) !important; color: #93C5FD !important; border-color: rgba(47, 128, 237, 0.4) !important; } /* Table filter tabs and small icon buttons (search icon button, theme toggle, notification bell, avatar) - subtle raise so the whole chrome feels like one soft-molded surface instead of flat rectangles. */ header button[type="button"], [data-theme-toggle] { box-shadow: 3px 3px 7px var(--neu-lo), -3px -3px 7px var(--neu-hi); border-radius: 0.5rem; } header button[type="button"]:active, [data-theme-toggle]:active { box-shadow: inset 2px 2px 5px var(--neu-lo), inset -2px -2px 5px var(--neu-hi); } /* Avoid double shadows on elements that scroll or clip - neumorphic shadows need visible overflow on their own box, not a clipped ancestor. */ .overflow-x-auto:has(> table) { box-shadow: none !important; } /* Kill the browser's default blue focus ring on mouse clicks - it was stacking on top of the "selected" pill styling on filter tabs (two different highlight colors on the same bar). Keyboard users still get a visible ring, just in the app's own emerald instead of browser blue; inputs keep Tailwind's own focus:ring/focus:border feedback untouched. */ button:focus:not(:focus-visible), a:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible) { outline: none; } button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid rgba(4, 120, 87, 0.55); outline-offset: 1px; } /* The global `::-webkit-scrollbar{display:none}` in each page's