/* DMS — design tokens Driven by data-theme / data-card / data-density attributes on . */ :root { /* Primary — Deep ocean blue (professional, trustworthy) */ --primary-50: #eff6ff; --primary-500: #3b82f6; --primary-600: #2563eb; --primary-700: #1d4ed8; --primary-900: #1e3a8a; /* Accent — overridden by JS tweak; default coral */ --accent-500: #f97316; /* Semantic */ --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --info: #06b6d4; /* Neutrals (light theme defaults) */ --gray-50: #fafafa; --gray-100: #f4f4f5; --gray-200: #e4e4e7; --gray-300: #d4d4d8; --gray-500: #71717a; --gray-700: #3f3f46; --gray-900: #18181b; /* Surfaces */ --bg: var(--gray-50); --surface: #ffffff; --surface-2: #f4f4f5; --surface-blur: rgba(255, 255, 255, 0.78); --fg: #18181b; --fg-muted: #71717a; --border: #e4e4e7; /* Shadows */ --shadow-xs: 0 1px 2px rgba(0,0,0,.04); --shadow-sm: 0 1px 3px rgba(0,0,0,.06); --shadow-md: 0 4px 12px rgba(0,0,0,.08); --shadow-lg: 0 12px 32px rgba(0,0,0,.12); --shadow-xl: 0 24px 60px rgba(0,0,0,.18); /* Type */ --font-sans: 'Inter', 'IBM Plex Sans Thai', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* ── Dark theme ──────────────────────────────────────────────────────────── */ [data-theme="dark"] { --bg: #0a0a0b; --surface: #131316; --surface-2: #1c1c20; --surface-blur: rgba(19, 19, 22, 0.78); --fg: #fafafa; --fg-muted: #a1a1aa; --border: #27272a; --shadow-xs: 0 1px 2px rgba(0,0,0,.4); --shadow-sm: 0 1px 3px rgba(0,0,0,.5); --shadow-md: 0 4px 12px rgba(0,0,0,.5); --shadow-lg: 0 12px 32px rgba(0,0,0,.6); --shadow-xl: 0 24px 60px rgba(0,0,0,.7); } /* ── Card style variants ─────────────────────────────────────────────────── */ [data-card="flat"] .rounded-xl, [data-card="flat"] .rounded-lg { box-shadow: none !important; } [data-card="bordered"] .rounded-xl, [data-card="bordered"] .rounded-lg { box-shadow: none !important; } [data-card="bordered"] { --border: #c4c4c8; } [data-card="bordered"][data-theme="dark"] { --border: #3f3f46; } /* ── Density variants ────────────────────────────────────────────────────── */ [data-density="dense"] { font-size: 13px; } [data-density="dense"] .py-3 { padding-top: .375rem; padding-bottom: .375rem; } [data-density="dense"] .py-3\.5 { padding-top: .5rem; padding-bottom: .5rem; } [data-density="dense"] .py-2\.5 { padding-top: .375rem; padding-bottom: .375rem; } [data-density="dense"] .py-4 { padding-top: .625rem; padding-bottom: .625rem; } [data-density="dense"] .py-5 { padding-top: .875rem; padding-bottom: .875rem; } [data-density="dense"] .p-4 { padding: .75rem; } [data-density="dense"] .p-5 { padding: 1rem; } [data-density="dense"] .gap-3 { gap: .5rem; } [data-density="dense"] .gap-4 { gap: .625rem; } [data-density="dense"] .h-9 { height: 2rem; } [data-density="dense"] .h-10 { height: 2.25rem; } [data-density="dense"] .h-11 { height: 2.5rem; } [data-density="spacious"] .py-3 { padding-top: 1rem; padding-bottom: 1rem; } [data-density="spacious"] .py-2\.5 { padding-top: .875rem; padding-bottom: .875rem; } [data-density="spacious"] .py-3\.5 { padding-top: 1.125rem; padding-bottom: 1.125rem; } [data-density="spacious"] .p-4 { padding: 1.25rem; } [data-density="spacious"] .p-5 { padding: 1.75rem; } [data-density="spacious"] .gap-3 { gap: 1rem; } [data-density="spacious"] .gap-4 { gap: 1.25rem; } /* ── Base ────────────────────────────────────────────────────────────────── */ html, body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv11', 'ss01'; letter-spacing: -0.005em; } body { background: var(--bg); color: var(--fg); } * { box-sizing: border-box; } .font-mono { font-family: var(--font-mono); } /* Native form controls + scrollbars in dark mode */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { color: var(--fg); color-scheme: dark; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--fg-muted); } /* Date / time picker icon visibility in dark mode */ [data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator, [data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.9); } /* Scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--gray-300); background-clip: padding-box; border: 2px solid transparent; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3f3f46; background-clip: padding-box; border: 2px solid transparent; } /* Animations */ @keyframes modalIn { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scanline { 0% { top: 10%; } 50% { top: 85%; } 100% { top: 10%; } } /* Selection */ ::selection { background: rgba(59, 130, 246, 0.2); } /* Online presence indicator — green dot with pulsing ring */ @keyframes dms-pulse-online { 0% { box-shadow: 0 0 0 0 rgba(16,185,129, 0.55); } 70% { box-shadow: 0 0 0 6px rgba(16,185,129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129, 0); } } .dms-online-dot { background: #10b981; border-radius: 9999px; animation: dms-pulse-online 1.8s ease-out infinite; } /* ── Phone-only overrides (<768px) ────────────────────────────────────────── */ @media (max-width: 767px) { /* Tap targets — make buttons and links comfortable on touch */ button, [role="button"], .h-9 { min-height: 36px; } /* Tighter outer padding on common content containers. !important needed because Tailwind CDN injects its own rules at runtime — without it our overrides may lose the cascade race depending on load timing. */ .px-6 { padding-left: 14px !important; padding-right: 14px !important; } .px-8 { padding-left: 16px !important; padding-right: 16px !important; } .py-6 { padding-top: 14px !important; padding-bottom: 14px !important; } .p-5 { padding: 14px !important; } .p-6 { padding: 16px !important; } /* Stat cards & big numbers shrink slightly so they don't overflow */ .text-\[28px\] { font-size: 22px !important; } .text-\[24px\] { font-size: 20px !important; } /* Native form inputs — 16px font prevents iOS Safari from zooming */ input, select, textarea { font-size: 16px !important; } } /* ── Tablet + phone (<1024px) layout overrides ────────────────────────────── */ /* These cover iPad portrait (820–834px) where the sidebar is now a drawer but tables / panels still need help fitting the narrow content area. */ @media (max-width: 1023px) { /* Tables — make any direct child table scroll horizontally. Uses :has() so existing markup picks this up without changes. Falls back gracefully on browsers without :has() — the table just clips, same as before. */ .dms-table-wrap, :where(div:has(> table)) { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } /* Modal / dialog — give breathing room from screen edge but allow full-height */ [data-modal], .dms-modal { width: calc(100vw - 24px) !important; max-width: 100vw !important; max-height: calc(100vh - 24px) !important; border-radius: 14px !important; } [data-modal-fullscreen] { width: 100vw !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; } /* Notifications / profile dropdown — pin to right edge with a margin */ .dms-notif-panel { position: fixed !important; top: 60px !important; right: 8px !important; left: auto !important; max-width: calc(100vw - 16px) !important; } } /* Phone-only: notif panel goes full width */ @media (max-width: 767px) { .dms-notif-panel { left: 8px !important; width: auto !important; } } /* Prevent horizontal page scrolling on mobile even if a child overflows. `hidden` turns html/body into scroll containers, which silently kills position:sticky (the pinned sidebar) — `clip` blocks the overflow without doing that, so prefer it wherever supported. */ html, body { overflow-x: hidden; } @supports (overflow-x: clip) { html, body { overflow-x: clip; } }