/* * me.themes.css — user personalization skin layer. * ============================================================================= * Loaded LAST (theme_boot partial). Everything is keyed off attributes the * boot script stamps on : * * data-me-theme : classic | nordic | carbon | aurora | neo | atelier * data-me-mode : light | dark (per theme) * data-me-glass : 0 | 1 (liquid-glass modifier) * data-me-size-ui / -text / -btn (density scales — work on ALL themes) * * ARCHITECTURE * 1. Each theme×mode defines ONE canonical token set (--me-*). * 2. A single override block re-skins the shared chrome (header, dock, * dropdowns, modals, widgets, tables, inputs) THROUGH the tokens. * 3. The matter workspace is already tokenized (--mw-*): one remap block * pipes --me-* into --mw-* so the whole workspace follows every theme. * 4. data-me-theme="classic" matches NOTHING below — the current design * ships untouched, byte for byte. */ /* ╔══════════════════════ 1 · THEME TOKENS ══════════════════════╗ */ /* ---------- NORDIC · pure minimalism, indigo on paper-white ---------- */ html[data-me-theme="nordic"] { --me-ground: #f7f8fa; --me-bg-elev: #f2f4f7; --me-surface: #ffffff; --me-surface-2: #fafbfc; --me-border: #e8ebef; --me-border-strong: #d6dbe1; --me-divider: #eef0f3; --me-text: #16181d; --me-muted: #6b7280; --me-subtle: #9aa1ac; --me-heading: #111318; --me-heading-2: #16181d; --me-accent: #4f46e5; --me-accent-deep: #4338ca; --me-accent-soft: #eef2ff; --me-accent-100: #e0e7ff; --me-ok: #16a34a; --me-ok-soft: #ecfdf3; --me-warn: #d97706; --me-warn-soft: #fffaeb; --me-bad: #dc2626; --me-bad-soft: #fef2f2; --me-radius: 10px; --me-radius-lg: 14px; --me-ctl-radius: 8px; --me-shadow-1: 0 1px 2px rgba(17, 19, 24, .05); --me-shadow-2: 0 8px 28px rgba(17, 19, 24, .09); --me-header-bg: #16181d; --me-header-border: #16181d; --me-glass-bg: rgba(255, 255, 255, .62); --me-glass-stroke: rgba(255, 255, 255, .8); --me-btn-grad: var(--me-accent); } html[data-me-theme="nordic"][data-me-mode="dark"] { --me-warn-strong: #ffd699; --me-ground: #0e1013; --me-bg-elev: #121419; --me-surface: #17191f; --me-surface-2: #1c1f26; --me-border: #262932; --me-border-strong: #343846; --me-divider: #1f222a; --me-text: #e9eaee; --me-muted: #9ba1ad; --me-subtle: #6d7380; --me-heading: #f2f3f6; --me-heading-2: #e9eaee; --me-accent: #818cf8; --me-accent-deep: #a5b0ff; --me-accent-soft: #1d2040; --me-accent-100: #2b2f57; --me-ok: #34d38a; --me-ok-soft: #10281c; --me-warn: #fbbf24; --me-warn-soft: #2b2210; --me-bad: #f87171; --me-bad-soft: #321616; --me-shadow-1: 0 1px 2px rgba(0, 0, 0, .5); --me-shadow-2: 0 12px 34px rgba(0, 0, 0, .55); --me-header-bg: #0a0c0f; --me-header-border: #1f222a; --me-glass-bg: rgba(23, 25, 31, .58); --me-glass-stroke: rgba(255, 255, 255, .1); } /* ---------- CARBON · futurist HUD, graphite + cyan, tight radii ---------- */ html[data-me-theme="carbon"] { --me-ground: #eef1f3; --me-bg-elev: #e9edf0; --me-surface: #fbfcfd; --me-surface-2: #f3f6f8; --me-border: #dbe1e6; --me-border-strong: #c3ccd4; --me-divider: #e6ebef; --me-text: #0d1117; --me-muted: #57646f; --me-subtle: #8795a1; --me-heading: #0d1117; --me-heading-2: #1b232b; --me-accent: #0891b2; --me-accent-deep: #0e7490; --me-accent-soft: #e6f7fb; --me-accent-100: #cff1f8; --me-ok: #059669; --me-ok-soft: #e8f8f2; --me-warn: #d97706; --me-warn-soft: #fdf4e3; --me-bad: #dc2626; --me-bad-soft: #fdeeee; --me-radius: 6px; --me-radius-lg: 8px; --me-ctl-radius: 5px; --me-shadow-1: 0 1px 2px rgba(13, 17, 23, .06); --me-shadow-2: 0 10px 30px rgba(13, 17, 23, .1); --me-header-bg: #0d1117; --me-header-border: #0d1117; --me-glass-bg: rgba(251, 252, 253, .6); --me-glass-stroke: rgba(255, 255, 255, .75); --me-btn-grad: linear-gradient(135deg, #0e7490, #0891b2); } html[data-me-theme="carbon"][data-me-mode="dark"] { --me-warn-strong: #ffd699; --me-ground: #090d11; --me-bg-elev: #0d1319; --me-surface: #111820; --me-surface-2: #151d27; --me-border: #1f2933; --me-border-strong: #2d3a47; --me-divider: #182028; --me-text: #dce3ea; --me-muted: #8b98a5; --me-subtle: #5d6a77; --me-heading: #e8eef4; --me-heading-2: #dce3ea; --me-accent: #22d3ee; --me-accent-deep: #67e3f5; --me-accent-soft: #0b2a33; --me-accent-100: #113d49; --me-ok: #34d399; --me-ok-soft: #0c2b20; --me-warn: #fbbf24; --me-warn-soft: #2b2210; --me-bad: #f87171; --me-bad-soft: #321616; --me-shadow-1: 0 1px 2px rgba(0, 0, 0, .55); --me-shadow-2: 0 0 0 1px rgba(34, 211, 238, .06), 0 14px 38px rgba(0, 0, 0, .6); --me-header-bg: #070b0f; --me-header-border: #1f2933; --me-glass-bg: rgba(17, 24, 32, .55); --me-glass-stroke: rgba(103, 227, 245, .12); --me-btn-grad: linear-gradient(135deg, #0891b2, #22d3ee); } /* ---------- AURORA · liquid-glass native, ambient scene ---------- */ html[data-me-theme="aurora"] { --me-ground: linear-gradient(160deg, #e3ecff 0%, #f4ecff 45%, #ffeeDD 100%); --me-bg-elev: rgba(255, 255, 255, .38); --me-surface: rgba(255, 255, 255, .82); --me-surface-2: rgba(255, 255, 255, .6); --me-border: rgba(255, 255, 255, .85); --me-border-strong: rgba(30, 45, 90, .14); --me-divider: rgba(30, 45, 90, .08); --me-text: #101828; --me-muted: #5d6a81; --me-subtle: #8b96ab; --me-heading: #101828; --me-heading-2: #1c2740; --me-accent: #2f6bff; --me-accent-deep: #1d4fd7; --me-accent-soft: rgba(47, 107, 255, .12); --me-accent-100: rgba(47, 107, 255, .2); --me-ok: #0fa968; --me-ok-soft: rgba(15, 169, 104, .13); --me-warn: #e28800; --me-warn-soft: rgba(226, 136, 0, .14); --me-bad: #e2483d; --me-bad-soft: rgba(226, 72, 61, .13); --me-radius: 18px; --me-radius-lg: 22px; --me-ctl-radius: 13px; --me-shadow-1: 0 4px 16px rgba(30, 45, 90, .1); --me-shadow-2: 0 18px 50px rgba(30, 45, 90, .16); --me-header-bg: rgba(16, 24, 48, .72); --me-header-border: rgba(255, 255, 255, .14); --me-glass-bg: rgba(255, 255, 255, .55); --me-glass-stroke: rgba(255, 255, 255, .78); --me-btn-grad: linear-gradient(135deg, #2f6bff, #1d4fd7); } html[data-me-theme="aurora"][data-me-mode="dark"] { --me-warn-strong: #ffd9a1; --me-ground: linear-gradient(160deg, #0a1024 0%, #141033 48%, #251437 100%); --me-bg-elev: rgba(10, 16, 36, .35); --me-surface: rgba(23, 31, 55, .78); --me-surface-2: rgba(23, 31, 55, .55); --me-border: rgba(255, 255, 255, .13); --me-border-strong: rgba(255, 255, 255, .2); --me-divider: rgba(255, 255, 255, .08); --me-text: #eef2fb; --me-muted: #a5b0c6; --me-subtle: #76829b; --me-heading: #f3f6fd; --me-heading-2: #dfe7f7; --me-accent: #6d9bff; --me-accent-deep: #a7c2ff; --me-accent-soft: rgba(109, 155, 255, .16); --me-accent-100: rgba(109, 155, 255, .26); --me-ok: #3ed598; --me-ok-soft: rgba(62, 213, 152, .15); --me-warn: #ffb454; --me-warn-soft: rgba(255, 180, 84, .15); --me-bad: #ff7a6e; --me-bad-soft: rgba(255, 122, 110, .15); --me-shadow-1: 0 6px 20px rgba(0, 0, 0, .35); --me-shadow-2: 0 22px 60px rgba(0, 0, 0, .5); --me-header-bg: rgba(8, 12, 28, .66); --me-header-border: rgba(255, 255, 255, .1); --me-glass-bg: rgba(22, 30, 52, .5); --me-glass-stroke: rgba(255, 255, 255, .14); } /* ---------- NEO · soft-UI neumorphism, one extruded surface ---------- */ html[data-me-theme="neo"] { --me-ground: #e8ecf2; --me-bg-elev: #e8ecf2; --me-surface: #e8ecf2; --me-surface-2: #edf0f5; --me-border: transparent; --me-border-strong: rgba(58, 66, 82, .14); --me-divider: rgba(58, 66, 82, .1); --me-text: #333b4d; --me-muted: #6d7688; --me-subtle: #98a0b0; --me-heading: #2a3140; --me-heading-2: #333b4d; --me-accent: #5b7cfa; --me-accent-deep: #4a67e0; --me-accent-soft: #dde4f8; --me-accent-100: #ccd7f6; --me-ok: #24a56d; --me-ok-soft: #dcefe6; --me-warn: #d78a1e; --me-warn-soft: #f4e9d7; --me-bad: #d8544a; --me-bad-soft: #f5e0de; --me-radius: 16px; --me-radius-lg: 20px; --me-ctl-radius: 12px; --neo-out: 7px 7px 14px #c9cfda, -7px -7px 14px #ffffff; --neo-out-sm: 4px 4px 9px #cdd3dd, -4px -4px 9px #ffffff; --neo-in: inset 4px 4px 9px #c9cfda, inset -4px -4px 9px #ffffff; --me-shadow-1: var(--neo-out-sm); --me-shadow-2: var(--neo-out); --me-header-bg: #2b3242; --me-header-border: #2b3242; --me-glass-bg: rgba(232, 236, 242, .6); --me-glass-stroke: rgba(255, 255, 255, .7); --me-btn-grad: linear-gradient(135deg, #5b7cfa, #4a67e0); } html[data-me-theme="neo"][data-me-mode="dark"] { --me-warn-strong: #f0c98d; --me-ground: #23272e; --me-bg-elev: #23272e; --me-surface: #23272e; --me-surface-2: #272c34; --me-border: transparent; --me-border-strong: rgba(255, 255, 255, .1); --me-divider: rgba(255, 255, 255, .07); --me-text: #d5dae2; --me-muted: #8f97a4; --me-subtle: #666e7b; --me-heading: #e6eaf0; --me-heading-2: #d5dae2; --me-accent: #7c9aff; --me-accent-deep: #9fb5ff; --me-accent-soft: #2b3350; --me-accent-100: #37406a; --me-ok: #3bc98a; --me-ok-soft: #1c2f26; --me-warn: #e8a43c; --me-warn-soft: #2f2818; --me-bad: #e0685f; --me-bad-soft: #331d1b; --neo-out: 7px 7px 14px #1a1d23, -7px -7px 14px #2c323b; --neo-out-sm: 4px 4px 9px #1a1d23, -4px -4px 9px #2c323b; --neo-in: inset 4px 4px 9px #1a1d23, inset -4px -4px 9px #2c323b; --me-shadow-1: var(--neo-out-sm); --me-shadow-2: var(--neo-out); --me-header-bg: #1a1d23; --me-header-border: #1a1d23; --me-glass-bg: rgba(35, 39, 46, .6); --me-glass-stroke: rgba(255, 255, 255, .08); } /* ---------- ATELIER · modern skeuomorphism, ivory paper + bronze ---------- */ html[data-me-theme="atelier"] { --me-ground: #f4f0e6; --me-bg-elev: #efeadd; --me-surface: #fffdf6; --me-surface-2: #faf7ee; --me-border: #e6dfcd; --me-border-strong: #d4c9ae; --me-divider: #ece6d6; --me-text: #2b2620; --me-muted: #6f675a; --me-subtle: #9a9181; --me-heading: #3d2f1f; --me-heading-2: #2b2620; --me-accent: #9a6b2f; --me-accent-deep: #7c5525; --me-accent-soft: #f3ead9; --me-accent-100: #ead9bc; --me-ok: #4c7c3f; --me-ok-soft: #e9f0e4; --me-warn: #b06a10; --me-warn-soft: #f7ecd8; --me-bad: #a63a30; --me-bad-soft: #f6e4e1; --me-radius: 9px; --me-radius-lg: 12px; --me-ctl-radius: 7px; --me-shadow-1: 0 1px 2px rgba(61, 47, 31, .1), inset 0 1px 0 rgba(255, 255, 255, .85); --me-shadow-2: 0 10px 26px rgba(61, 47, 31, .14), inset 0 1px 0 rgba(255, 255, 255, .85); --me-header-bg: #33291c; --me-header-border: #4a3d2a; --me-glass-bg: rgba(255, 253, 246, .62); --me-glass-stroke: rgba(255, 255, 255, .75); --me-btn-grad: linear-gradient(180deg, #ad7a37, #8a5f28); } html[data-me-theme="atelier"][data-me-mode="dark"] { --me-warn-strong: #e8c890; --me-ground: #201b14; --me-bg-elev: #251f17; --me-surface: #2b2419; --me-surface-2: #322a1e; --me-border: #3e3423; --me-border-strong: #52452f; --me-divider: #362d1f; --me-text: #ece4d3; --me-muted: #b0a58e; --me-subtle: #82785f; --me-heading: #f2ead9; --me-heading-2: #ece4d3; --me-accent: #c89b52; --me-accent-deep: #e0b76f; --me-accent-soft: #3a2f1b; --me-accent-100: #4c3d22; --me-ok: #7fb56f; --me-ok-soft: #26301f; --me-warn: #d9a04b; --me-warn-soft: #33280f; --me-bad: #cf7167; --me-bad-soft: #38201c; --me-shadow-1: 0 1px 2px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05); --me-shadow-2: 0 12px 30px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05); --me-header-bg: #17130d; --me-header-border: #362d1f; --me-glass-bg: rgba(43, 36, 25, .6); --me-glass-stroke: rgba(255, 255, 255, .08); --me-btn-grad: linear-gradient(180deg, #c89b52, #9a7433); } /* ---------- MAKTAB · brand default: navy chrome, blue actions on paper-light ---------- The forced default theme. Consumes the same --me-* contract as every other theme, so the shared chrome block (§2+) and the --me-lg-/--bs-/--dash- bridges apply for free; the redesign component layer (me.redesign.css) reads --me-* and the --mk-* brand extensions below. */ html[data-me-theme="maktab"] { --me-ground: #f6f7fb; --me-bg-elev: #eef1f7; --me-surface: #ffffff; --me-surface-2: #f8fafc; --me-border: #e5e9f2; --me-border-strong: #d5dbe7; --me-divider: #eef1f6; --me-text: #101828; --me-muted: #667085; --me-subtle: #98a2b3; --me-heading: #0a1a47; --me-heading-2: #101828; --me-accent: #2563eb; --me-accent-deep: #1d4fd7; --me-accent-soft: #eff4ff; --me-accent-100: #dce7ff; --me-ok: #12b76a; --me-ok-soft: #ecfdf3; --me-warn: #f79009; --me-warn-soft: #fef6e7; --me-bad: #f04438; --me-bad-soft: #fef3f2; --me-radius: 10px; --me-radius-lg: 14px; --me-ctl-radius: 8px; --me-shadow-1: 0 1px 2px rgba(16, 24, 40, .05); --me-shadow-2: 0 12px 32px rgba(16, 24, 40, .14); --me-header-bg: #0a1a47; --me-header-border: #132a5e; --me-glass-bg: rgba(255, 255, 255, .62); --me-glass-stroke: rgba(255, 255, 255, .8); --me-btn-grad: var(--me-accent); /* brand extension tokens — consumed only by the redesign component layer */ --mk-navy: #0a1a47; --mk-navy-700: #132a5e; --mk-blue: #2563eb; --mk-indigo: #1d4fd7; --mk-ai: #7c3aed; --mk-ai-soft: #f4f0fe; --mk-select2-option-bg: #f6faff; } html[data-me-theme="maktab"][data-me-mode="dark"] { --me-warn-strong: #ffd699; --me-ground: #0b1220; --me-bg-elev: #0f1728; --me-surface: #121a2b; --me-surface-2: #18233a; --me-border: #233150; --me-border-strong: #2f4066; --me-divider: #1b2740; --me-text: #e7ecf5; --me-muted: #94a3b8; --me-subtle: #64748b; --me-heading: #f2f5fb; --me-heading-2: #e7ecf5; --me-accent: #5b8def; --me-accent-deep: #85abf5; --me-accent-soft: #16213b; --me-accent-100: #1e2d4d; --me-ok: #34d399; --me-ok-soft: #0f2a20; --me-warn: #fbbf24; --me-warn-soft: #2c2410; --me-bad: #f87171; --me-bad-soft: #341a1a; --me-shadow-1: 0 1px 2px rgba(0, 0, 0, .5); --me-shadow-2: 0 14px 38px rgba(0, 0, 0, .55); --me-header-bg: #070e1c; --me-header-border: #1b2740; --me-glass-bg: rgba(18, 26, 43, .58); --me-glass-stroke: rgba(255, 255, 255, .1); --mk-navy: #0a1a47; --mk-navy-700: #16264d; --mk-blue: #5b8def; --mk-indigo: #85abf5; --mk-ai: #a78bfa; --mk-ai-soft: #221c3a; } /* ╔══════════ 1a2 · PER-THEME RADIUS SCALE + SOFT SURFACE ══════════╗ */ html[data-me-theme="maktab"] { --me-lg-r-sm: 6px; --me-lg-r-md: 10px; --me-lg-r-lg: 14px; } html[data-me-theme="nordic"] { --me-lg-r-sm: 8px; --me-lg-r-md: 10px; --me-lg-r-lg: 14px; } html[data-me-theme="carbon"] { --me-lg-r-sm: 4px; --me-lg-r-md: 6px; --me-lg-r-lg: 8px; } html[data-me-theme="aurora"] { --me-lg-r-sm: 12px; --me-lg-r-md: 16px; --me-lg-r-lg: 22px; } html[data-me-theme="neo"] { --me-lg-r-sm: 12px; --me-lg-r-md: 16px; --me-lg-r-lg: 20px; } html[data-me-theme="atelier"] { --me-lg-r-sm: 6px; --me-lg-r-md: 9px; --me-lg-r-lg: 12px; } html{ --me-lg-surface-soft: color-mix(in srgb, var(--me-surface) 65%, transparent); } /* ╔══════════ 1b · LEGACY-TOKEN BRIDGE (deep theming) ══════════╗ me.global.theme.css is tokenized with var(--me-lg-*, ) fallbacks: classic (no definitions) renders byte-identical; every other theme feeds the ORIGINAL stylesheet through its own palette — no override wars. */ html{ --me-lg-navy: var(--me-heading); --me-lg-blue: var(--me-accent); --me-lg-blue-deep: var(--me-accent-deep); --me-lg-blue-lt: var(--me-accent); --me-lg-blue-dim: var(--me-muted); --me-lg-ink: var(--me-text); --me-lg-muted: var(--me-muted); --me-lg-muted-2: var(--me-muted); --me-lg-border: var(--me-border-strong); --me-lg-bg: var(--me-bg-elev); --me-lg-surface: var(--me-surface); --me-lg-on-dark: #ffffff; --me-lg-dark: var(--me-header-bg); } /* ╔══════════ 1c · BOOTSTRAP VARIABLE BRIDGE ══════════╗ Bootstrap 5.3 components read --bs-* custom properties; feeding them the theme palette makes every BS component (modals, dropdowns, lists, tables, forms, links) theme-native without per-component overrides. */ html{ --bs-body-color: var(--me-text); --bs-emphasis-color: var(--me-heading); --bs-secondary-color: var(--me-muted); --bs-tertiary-color: var(--me-subtle); --bs-secondary-bg: var(--me-surface-2); --bs-tertiary-bg: var(--me-bg-elev); --bs-border-color: var(--me-border); --bs-link-color: var(--me-accent); --bs-link-hover-color: var(--me-accent-deep); --bs-heading-color: var(--me-heading); } /* dashboard-redesign has its own token set — bridge it to the theme */ html{ --dash-card-bg: var(--me-surface); --dash-subcard-bg: var(--me-surface-2); --dash-card-border: var(--me-border); --dash-card-shadow: var(--me-shadow-1); --dash-accent: var(--me-accent); --dash-accent-light: var(--me-accent-deep); --dash-text: var(--me-text); --dash-text-muted: var(--me-muted); --dash-green: var(--me-ok); --dash-orange: var(--me-warn); --dash-red: var(--me-bad); } /* Bootstrap bg utilities follow the surface tokens */ .bg-white { background-color: var(--me-surface) !important; } .bg-light { background-color: var(--me-surface-2) !important; } .bg-secondary { background-color: var(--me-surface-2) !important; color: var(--me-text) !important; } .text-secondary { color: var(--me-muted) !important; } .text-body { color: var(--me-text) !important; } .border-light { border-color: var(--me-border) !important; } /* ╔══════════════════ 2 · SHARED CHROME OVERRIDES ══════════════════╗ Scoped to every theme EXCEPT classic. */ body { color: var(--me-text); background: var(--me-ground); } html[data-me-mode="dark"]:not([data-me-theme="classic"]) { color-scheme: dark; } /* application header (logo/text are white — every theme keeps dark chrome) */ header.system-header-bar { background: var(--me-header-bg) !important; border-bottom: 1px solid var(--me-header-border); box-shadow: 0 1px 12px rgba(0, 0, 0, .28) !important; backdrop-filter: blur(10px); } /* bottom dock */ .global-bottom-nav { background: var(--me-surface) !important; border: 1px solid var(--me-border-strong); box-shadow: var(--me-shadow-2); border-radius: var(--me-radius-lg); color: var(--me-text); } .global-bottom-nav .item { color: var(--me-muted) !important; } .global-bottom-nav .item.active, .global-bottom-nav .item:hover { color: var(--me-accent) !important; } /* dropdowns + modals */ .dropdown-menu { background: var(--me-surface); border: 1px solid var(--me-border-strong); border-radius: var(--me-radius) !important; box-shadow: var(--me-shadow-2); color: var(--me-text); } .dropdown-item { color: var(--me-text); } .dropdown-item:hover { background: var(--me-accent-soft); color: var(--me-accent-deep); } .modal-content { background: var(--me-surface); border: 1px solid var(--me-border-strong); border-radius: var(--me-radius-lg); box-shadow: var(--me-shadow-2); color: var(--me-text); } /* widget / landing containers */ .landingpage-container, .mainTableContainer { background: var(--me-bg-elev) !important; color: var(--me-text); } /* landing/full-page headers carry white text + clock — keep dark themed chrome */ .landing-page-header { background: var(--me-header-bg) !important; border-bottom: 1px solid var(--me-header-border); } /* tables */ table.dataTable, .dataTables_wrapper { background: transparent; color: var(--me-text); } table.dataTable thead th { background: var(--me-surface-2) !important; color: var(--me-muted) !important; border-color: var(--me-divider) !important; } table.dataTable tbody td { background: var(--me-surface) !important; color: var(--me-text) !important; border-color: var(--me-divider) !important; } table.dataTable tbody tr:hover td { background: var(--me-surface-2) !important; } /* legacy hardcoded colors inside table cells (e.g. matter-name links are #000) */ table.dataTable tbody td a, a.workspace-matter-name { color: var(--me-text) !important; } table.dataTable tbody td a:hover, a.workspace-matter-name:hover { color: var(--me-accent) !important; } /* datatable pagination */ .dataTables_paginate .page-link, button.page-link { background: var(--me-surface-2) !important; color: var(--me-text) !important; border-color: var(--me-border-strong) !important; } .dataTables_paginate .page-item.active .page-link { background: var(--me-accent) !important; color: #fff !important; border-color: var(--me-accent) !important; } /* settings shell (white content column + light-blue main) */ main.setting-main { background: var(--me-ground) !important; } .setting-main-content { background: var(--me-bg-elev) !important; color: var(--me-text); } /* dark-mode Bootstrap text utilities (near-black rgba on dark surfaces) */ html[data-me-mode="dark"]:not([data-me-theme="classic"]) .text-muted { color: var(--me-muted) !important; } html[data-me-mode="dark"]:not([data-me-theme="classic"]) .text-dark { color: var(--me-text) !important; } /* dt-paging: legacy :has() rules out-specify the generic overrides — match them. "previous" keeps its CTA treatment but through the theme's gradient; "next" was hardcoded #2F2F2F (invisible on dark surfaces). */ .dt-paging .page-item:has(.previous), .dt-paging .page-item:has(.previous) .previous { background: var(--me-btn-grad, var(--me-accent)) !important; } .dt-paging .page-item:has(.next) .next { color: var(--me-text) !important; } .dt-paging .pagination .active { background: var(--me-btn-grad, var(--me-accent)) !important; } /* legacy pagination variants (matters datatable uses .previous/.next buttons) */ .page-link.previous, .page-link.next, li.previous .page-link, li.next .page-link { background: var(--me-surface-2) !important; color: var(--me-text) !important; border-color: var(--me-border-strong) !important; } .dataTables_info, .dataTables_length, .dataTables_filter { color: var(--me-muted) !important; } /* inputs (global — the workspace remap handles its own) */ input.me-input-style, select.me-input-style, .me-textarea-style { background: var(--me-surface) !important; border-color: var(--me-border-strong) !important; color: var(--me-text) !important; border-radius: var(--me-ctl-radius) !important; } .me-input-title { color: var(--me-text) !important; } .select2-container .select2-selection--single, .select2-container .select2-selection--multiple { background: var(--me-surface) !important; border-color: var(--me-border-strong) !important; border-radius: var(--me-ctl-radius) !important; } .select2-container .select2-selection__rendered { color: var(--me-text) !important; } .select2-dropdown { background: var(--me-surface); border-color: var(--me-border-strong); color: var(--me-text); } /* scrollbars */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--me-border-strong); border-radius: 8px; } ::-webkit-scrollbar-track { background: transparent; } /* ╔════════════ 3 · WORKSPACE TOKEN REMAP (one block, all themes) ════════════╗ */ .matter-workspace, .matter-workspace-page { --mw-navy: var(--me-heading); --mw-navy-2: var(--me-heading-2); --mw-accent: var(--me-accent); --mw-accent-600: var(--me-accent-deep); --mw-accent-soft: var(--me-accent-soft); --mw-accent-100: var(--me-accent-100); --mw-surface: var(--me-surface); --mw-bg: var(--me-bg-elev); --mw-panel-bg: var(--me-surface-2); --mw-border: var(--me-border); --mw-border-strong: var(--me-border-strong); --mw-divider: var(--me-divider); --mw-text: var(--me-text); --mw-text-muted: var(--me-muted); --mw-text-subtle: var(--me-subtle); --mw-success: var(--me-ok); --mw-success-soft: var(--me-ok-soft); --mw-warning: var(--me-warn); --mw-warning-soft: var(--me-warn-soft); --mw-warning-strong: var(--me-warn-strong, #92400e); --mw-danger: var(--me-bad); --mw-danger-soft: var(--me-bad-soft); --mw-r-sm: var(--me-ctl-radius); --mw-r-md: var(--me-radius); --mw-r-lg: var(--me-radius-lg); --mw-ctl-r: var(--me-ctl-radius); --mw-sh-xs: var(--me-shadow-1); --mw-sh-sm: var(--me-shadow-1); --mw-sh-lg: var(--me-shadow-2); } .matter-workspace .me-input-title { color: var(--me-muted) !important; } .mw-btn-primary { background: var(--me-btn-grad, var(--me-accent)); box-shadow: var(--me-shadow-1); } /* ╔══════════════════ 4 · THEME PERSONALITIES ══════════════════╗ */ /* NEO — extruded cards, inset fields, borderless soft world */ html[data-me-theme="neo"] .mw-card, html[data-me-theme="neo"] .mw-panel-card, html[data-me-theme="neo"] .dropdown-menu, html[data-me-theme="neo"] .modal-content, html[data-me-theme="neo"] .global-bottom-nav { border-color: transparent !important; box-shadow: var(--neo-out) !important; } html[data-me-theme="neo"] input.me-input-style, html[data-me-theme="neo"] select.me-input-style, html[data-me-theme="neo"] .me-textarea-style, html[data-me-theme="neo"] .select2-container .select2-selection--single, html[data-me-theme="neo"] .select2-container .select2-selection--multiple { background: var(--me-surface) !important; border-color: transparent !important; box-shadow: var(--neo-in) !important; } html[data-me-theme="neo"] .mw-btn { border-color: transparent; box-shadow: var(--neo-out-sm); } html[data-me-theme="neo"] .mw-btn:not(:disabled):active { box-shadow: var(--neo-in); transform: none; } html[data-me-theme="neo"] table.dataTable tbody td { background: var(--me-surface) !important; } /* CARBON — technical: tabular numerals + crisp focus glow */ html[data-me-theme="carbon"] body { font-variant-numeric: tabular-nums; } html[data-me-theme="carbon"] .matter-workspace, html[data-me-theme="carbon"] .matter-workspace-page { --mw-ring: 0 0 0 3px rgba(34, 211, 238, .22); } html[data-me-theme="carbon"][data-me-mode="dark"] .mw-card:focus-within { box-shadow: 0 0 0 1px rgba(34, 211, 238, .25); } /* ATELIER — tactile primary buttons (pressed bevel) */ html[data-me-theme="atelier"] .mw-btn-primary { background: var(--me-btn-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 5px rgba(61, 47, 31, .3); text-shadow: 0 1px 1px rgba(0, 0, 0, .2); } html[data-me-theme="atelier"] .mw-btn-primary:not(:disabled):active { box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3); } /* AURORA — surfaces are translucent by design (blur even with glass off) */ html[data-me-theme="aurora"] .mw-card, html[data-me-theme="aurora"] .mw-panel-card, html[data-me-theme="aurora"] .dropdown-menu, html[data-me-theme="aurora"] .modal-content, html[data-me-theme="aurora"] .global-bottom-nav, html[data-me-theme="aurora"] .landingpage-container { backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); } /* ╔══════════════════ 5 · LIQUID-GLASS MODIFIER ══════════════════╗ Orthogonal: any non-classic theme can turn it on. */ html[data-me-glass="1"]:not([data-me-theme="classic"]) .mw-card, html[data-me-glass="1"]:not([data-me-theme="classic"]) .mw-panel-card, html[data-me-glass="1"]:not([data-me-theme="classic"]) .dropdown-menu, html[data-me-glass="1"]:not([data-me-theme="classic"]) .modal-content, html[data-me-glass="1"]:not([data-me-theme="classic"]) .global-bottom-nav, html[data-me-glass="1"]:not([data-me-theme="classic"]) .matter-workspace-actionbar, html[data-me-glass="1"]:not([data-me-theme="classic"]) .mw-tabs-scroller, html[data-me-glass="1"]:not([data-me-theme="classic"]) .landingpage-container { background: var(--me-glass-bg) !important; border-color: var(--me-glass-stroke) !important; backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); } html[data-me-glass="1"]:not([data-me-theme="classic"]) .matter-workspace, html[data-me-glass="1"]:not([data-me-theme="classic"]) .matter-workspace-page { --mw-surface: var(--me-glass-bg); --mw-panel-bg: transparent; } html[data-me-glass="1"]:not([data-me-theme="classic"]) header.system-header-bar { backdrop-filter: blur(20px) saturate(1.4); } /* ╔══════════════════ 6 · SIZE SCALES (work on EVERY theme) ══════════════════╗ */ /* interface scale — global zoom of all components */ html[data-me-size-ui="90"] body { zoom: .9; } html[data-me-size-ui="110"] body { zoom: 1.1; } /* text scale */ html[data-me-size-text="sm"] .matter-workspace, html[data-me-size-text="sm"] .dropdown-menu, html[data-me-size-text="sm"] table.dataTable { font-size: 12.5px; } html[data-me-size-text="lg"] .matter-workspace, html[data-me-size-text="lg"] .dropdown-menu, html[data-me-size-text="lg"] table.dataTable { font-size: 15px; } html[data-me-size-text="lg"] .me-input-title { font-size: 14.5px !important; } html[data-me-size-text="sm"] .me-input-title { font-size: 12px !important; } /* button scale */ html[data-me-size-btn="sm"] .mw-btn { height: 36px; font-size: 12.5px; padding: 0 12px; } html[data-me-size-btn="lg"] .mw-btn { height: 48px; font-size: 15px; padding: 0 22px; } html[data-me-size-btn="sm"] .matter-workspace, html[data-me-size-btn="sm"] .matter-workspace-page { --mw-ctl-h: 38px; } html[data-me-size-btn="lg"] .matter-workspace, html[data-me-size-btn="lg"] .matter-workspace-page { --mw-ctl-h: 48px; } /* reduced motion stays respected — no theme adds animation */ /* ╔══════════════ 7 · GLOBAL COMPONENT FAMILIES ══════════════╗ Every reusable component in the system follows the tokens, so any blade built from these families is themed automatically. */ /* headings + selection */ h1, h2, h3, h4, h5, h6 { color: var(--me-heading); } ::selection { background: var(--me-accent-100); } /* Bootstrap buttons */ .btn-primary { background: var(--me-btn-grad, var(--me-accent)) !important; border-color: transparent !important; color: #fff !important; } .btn-secondary, .btn-light, .btn-default { background: var(--me-surface-2) !important; border-color: var(--me-border-strong) !important; color: var(--me-text) !important; } .btn-outline-primary { color: var(--me-accent) !important; border-color: var(--me-accent) !important; } .btn-outline-primary:hover { background: var(--me-accent-soft) !important; } .btn-close { filter: none; } html[data-me-mode="dark"]:not([data-me-theme="classic"]) .btn-close { filter: invert(1) grayscale(1); } /* badges / alerts / cards / list groups */ .badge.bg-light { background: var(--me-surface-2) !important; color: var(--me-text) !important; } .alert-success { background: var(--me-ok-soft); color: var(--me-ok); border-color: transparent; } .alert-danger { background: var(--me-bad-soft); color: var(--me-bad); border-color: transparent; } .alert-warning { background: var(--me-warn-soft); color: var(--me-warn-strong, var(--me-warn)); border-color: transparent; } .alert-info { background: var(--me-accent-soft); color: var(--me-accent-deep); border-color: transparent; } .card { background: var(--me-surface); border-color: var(--me-border); border-radius: var(--me-radius-lg); color: var(--me-text); } .card-header { background: var(--me-surface-2); border-color: var(--me-border); } .list-group-item { background: var(--me-surface); border-color: var(--me-divider); color: var(--me-text); } .list-group-item.active { background: var(--me-accent); border-color: var(--me-accent); } /* nav tabs / pills / breadcrumb / progress */ .nav-tabs { border-color: var(--me-border); } .nav-tabs .nav-link { color: var(--me-muted); } .nav-tabs .nav-link.active { background: var(--me-surface); color: var(--me-accent); border-color: var(--me-border) var(--me-border) transparent; } .nav-pills .nav-link { color: var(--me-muted); } .nav-pills .nav-link.active { background: var(--me-accent); color: #fff; } .breadcrumb-item, .breadcrumb-item a { color: var(--me-muted); } .progress { background: var(--me-divider); } .progress-bar { background-color: var(--me-accent); } /* generic Bootstrap forms (module pages beyond the workspace) */ input.form-control, textarea.form-control, select.form-select { background-color: var(--me-surface) !important; border-color: var(--me-border-strong) !important; color: var(--me-text) !important; border-radius: var(--me-ctl-radius); } input.form-control::placeholder, textarea.form-control::placeholder { color: var(--me-subtle); } .input-group-text { background: var(--me-surface-2); border-color: var(--me-border-strong); color: var(--me-muted); } .form-check-input { background-color: var(--me-surface-2); border-color: var(--me-border-strong); } .form-check-input:checked { background-color: var(--me-accent); border-color: var(--me-accent); } .form-label, label { color: var(--me-text); } /* generic .table (Bootstrap) — dataTable handled above */ .table { color: var(--me-text); border-color: var(--me-divider); } .table > :not(caption) > * > * { background: var(--me-surface); color: var(--me-text); border-color: var(--me-divider); } .table thead th { background: var(--me-surface-2); color: var(--me-muted); } /* jq-toast notifications */ .jq-toast-single { background: var(--me-surface) !important; color: var(--me-text) !important; border: 1px solid var(--me-border-strong) !important; border-radius: var(--me-radius); box-shadow: var(--me-shadow-2); } .jq-toast-single h2 { color: var(--me-heading) !important; } .jq-toast-loader { background: var(--me-accent) !important; } /* offcanvas + tooltips + popovers */ .offcanvas { background: var(--me-surface); color: var(--me-text); } .tooltip-inner { background: var(--me-heading); color: var(--me-ground); } .popover { background: var(--me-surface); border-color: var(--me-border-strong); color: var(--me-text); } /* date pickers (body-appended panels) */ .daterangepicker { background: var(--me-surface); border-color: var(--me-border-strong); color: var(--me-text); } .daterangepicker .calendar-table { background: var(--me-surface); border-color: var(--me-border); } .daterangepicker td, .daterangepicker th { color: var(--me-text); } .daterangepicker td.off { color: var(--me-subtle); background: transparent; } .daterangepicker td.active { background: var(--me-accent) !important; color: #fff !important; } .daterangepicker td.in-range { background: var(--me-accent-soft); color: var(--me-text); } .flatpickr-calendar { background: var(--me-surface); border: 1px solid var(--me-border-strong); box-shadow: var(--me-shadow-2); } .flatpickr-day { color: var(--me-text); } .flatpickr-day.selected { background: var(--me-accent); border-color: var(--me-accent); } .flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--me-subtle); } .flatpickr-months, .flatpickr-weekdays { background: var(--me-surface-2); } .flatpickr-current-month, .flatpickr-weekday { color: var(--me-heading) !important; fill: var(--me-heading) !important; } /* select2 results panel (body-appended) */ .select2-results__option { color: var(--me-text); } .select2-results__option--highlighted.select2-results__option--selectable { background: var(--me-accent) !important; color: #fff !important; } .select2-search--dropdown .select2-search__field { background: var(--me-surface-2); border-color: var(--me-border-strong) !important; color: var(--me-text); } /* module landing sidebars (matters/tasks/expenses… list-side-nav pattern) */ .landing-side { background: var(--me-surface) !important; border-color: var(--me-border) !important; } .list-side-nav { color: var(--me-text) !important; } .list-side-nav span { color: inherit !important; } .list-side-nav:hover, .list-side-nav.active { background: var(--me-accent-soft) !important; color: var(--me-accent-deep) !important; border-radius: var(--me-radius); } .filter-tag-text { color: var(--me-heading) !important; } /* chatify messenger (its own light css hardcodes whites) */ .messenger, .messenger-listView, .messenger-messagingView { background: var(--me-surface) !important; color: var(--me-text) !important; } .messenger-list-item { color: var(--me-text) !important; } .messenger-list-item:hover { background: var(--me-surface-2) !important; } .messenger-sendCard { background: var(--me-surface-2) !important; border-color: var(--me-border) !important; } .messenger-sendCard textarea { background: transparent !important; color: var(--me-text) !important; } /* ╔══════════════ 8 · ALWAYS-ON COMPONENT STYLES ══════════════╗ (Styles that must exist in EVERY theme incl. classic — moved out of blades as part of the inline-CSS cleanup.) */ .me-theme-dot{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0} /* brand swatch (fixed literal — DATA, independent of the active theme) */ .me-theme-dot-maktab{background:linear-gradient(135deg,#0a1a47 0 55%,#2563eb 55% 100%)} .me-theme-dot.me-opt-active{border-color:#111827;box-shadow:0 0 0 2px #fff inset} .me-theme-mini{border:1px solid #e5e7eb;background:#fff;border-radius:8px;width:30px;height:26px;cursor:pointer;font-size:12px;padding:0} .me-theme-mini.me-opt-active{border-color:#2563eb;background:#eef4ff} .me-theme-mini { background: var(--me-surface-2); border-color: var(--me-border-strong); } .me-theme-mini.me-opt-active { border-color: var(--me-accent); background: var(--me-accent-soft); } .me-theme-dot.me-opt-active { border-color: var(--me-text); } /* glass extension to the component families */ html[data-me-glass="1"]:not([data-me-theme="classic"]) .card, html[data-me-glass="1"]:not([data-me-theme="classic"]) .offcanvas, html[data-me-glass="1"]:not([data-me-theme="classic"]) .jq-toast-single, html[data-me-glass="1"]:not([data-me-theme="classic"]) .daterangepicker, html[data-me-glass="1"]:not([data-me-theme="classic"]) .flatpickr-calendar, html[data-me-glass="1"]:not([data-me-theme="classic"]) .select2-dropdown, html[data-me-glass="1"]:not([data-me-theme="classic"]) .landing-side { background: var(--me-glass-bg) !important; border-color: var(--me-glass-stroke) !important; backdrop-filter: blur(22px) saturate(1.45); -webkit-backdrop-filter: blur(22px) saturate(1.45); } /* ╔══════════ 9 · DATATABLES FULL PARAM THEMING ══════════╗ */ .dataTables_wrapper, .dt-container { color: var(--me-text); } table.dataTable { border-color: var(--me-divider) !important; } table.dataTable.stripe tbody tr:nth-child(odd) td, table.dataTable.display tbody tr:nth-child(odd) td { background: var(--me-surface-2) !important; } table.dataTable thead th.sorting:before, table.dataTable thead th.sorting:after, table.dataTable thead th.sorting_asc:before, table.dataTable thead th.sorting_asc:after, table.dataTable thead th.sorting_desc:before, table.dataTable thead th.sorting_desc:after, .dt-column-order:before, .dt-column-order:after { color: var(--me-accent) !important; opacity: .55; } .dataTables_length select, .dataTables_filter input, .dt-search input, .dt-length select { background: var(--me-surface) !important; border: 1px solid var(--me-border-strong) !important; color: var(--me-text) !important; border-radius: var(--me-lg-r-sm, 6px) !important; } .dt-processing, div.dataTables_processing { background: var(--me-surface) !important; color: var(--me-text) !important; border: 1px solid var(--me-border-strong); border-radius: var(--me-lg-r-md, 10px); } .dt-buttons .btn, .dt-button { background: var(--me-surface-2) !important; color: var(--me-text) !important; border: 1px solid var(--me-border-strong) !important; } table.dataTable tbody tr.selected td { background: var(--me-accent-soft) !important; color: var(--me-text) !important; } /* ╔══════════ 10 · GLASS AT TOKEN LEVEL — ALL STACKED LAYERS ══════════╗ The app is layered widgets; with glass ON the surface TOKENS themselves turn translucent so every layer inherits it, and blur is applied to the major layer containers. */ html[data-me-glass="1"]:not([data-me-theme="classic"]) { --me-surface: var(--me-glass-bg); --me-surface-2: color-mix(in srgb, var(--me-glass-bg) 78%, transparent); --me-bg-elev: color-mix(in srgb, var(--me-glass-bg) 55%, transparent); --me-lg-surface: var(--me-glass-bg); --me-lg-bg: color-mix(in srgb, var(--me-glass-bg) 60%, transparent); --me-lg-surface-soft: color-mix(in srgb, var(--me-glass-bg) 45%, transparent); --dash-card-bg: var(--me-glass-bg); --dash-subcard-bg: color-mix(in srgb, var(--me-glass-bg) 70%, transparent); } html[data-me-glass="1"]:not([data-me-theme="classic"]) .landingpage-container, html[data-me-glass="1"]:not([data-me-theme="classic"]) .mainTableContainer, html[data-me-glass="1"]:not([data-me-theme="classic"]) .landing-side, html[data-me-glass="1"]:not([data-me-theme="classic"]) .setting-main-content, html[data-me-glass="1"]:not([data-me-theme="classic"]) .missing-info-container, html[data-me-glass="1"]:not([data-me-theme="classic"]) .doc-popup, html[data-me-glass="1"]:not([data-me-theme="classic"]) .dash-card-dark, html[data-me-glass="1"]:not([data-me-theme="classic"]) .messenger, html[data-me-glass="1"]:not([data-me-theme="classic"]) .matter--child-content { backdrop-filter: blur(22px) saturate(1.45); -webkit-backdrop-filter: blur(22px) saturate(1.45); } /* ╔══════════ 11 · SVG ICON THEMING (grey fills/strokes follow the theme) ══════════╗ */ svg [fill="#2F2F2F"], svg[fill="#2F2F2F"], svg [fill="#2f2f2f"], svg [fill="#303030"], svg [fill="#2D2D2D"], svg [fill="#2d2d2d"], svg [fill="#000"], svg [fill="#000000"], svg [fill="black"] { fill: var(--me-text) !important; } svg [fill="#7D7D7D"], svg [fill="#7d7d7d"], svg [fill="#797979"], svg [fill="#777777"], svg [fill="#6A6A6A"], svg [fill="#6a6a6a"], svg [fill="#505050"], svg [fill="#575757"], svg [fill="#4B4F52"], svg [fill="#2c333899"], svg [fill="#353739"], svg [fill="#3A3A3A"], svg [fill="#3a3a3a"], svg [fill="#4F4F4F"] { fill: var(--me-muted) !important; } svg [stroke="#2F2F2F"], svg [stroke="#2f2f2f"], svg [stroke="#303030"], svg [stroke="#2D2D2D"], svg [stroke="#000"], svg [stroke="black"], svg [stroke="#000000"] { stroke: var(--me-text) !important; } svg [stroke="#7D7D7D"], svg [stroke="#797979"], svg [stroke="#777777"], svg [stroke="#6A6A6A"], svg [stroke="#505050"], svg [stroke="#575757"] { stroke: var(--me-muted) !important; } /* brand-navy icons follow the accent family */ svg [fill="#003B64"], svg [fill="#003b64"], svg [fill="#025EB5"], svg [fill="#025eb5"] { fill: var(--me-accent) !important; } svg [stroke="#003B64"], svg [stroke="#025EB5"] { stroke: var(--me-accent) !important; } /* ╔══════════ 12 · PLACEHOLDERS + FIELD POLISH (dark-safe everywhere) ══════════╗ */ input::placeholder, textarea::placeholder { color: var(--me-subtle) !important; opacity: 1; } html[data-me-mode="dark"]:not([data-me-theme="classic"]) input:-webkit-autofill, html[data-me-mode="dark"]:not([data-me-theme="classic"]) input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--me-surface) inset; -webkit-text-fill-color: var(--me-text); } /* ╔══════════ 13 · GOLDEN SIZING LAYER (non-classic) ══════════╗ One rhythm: 4px grid, 40px touch targets, consistent icon + padding scale. */ .btn { min-height: 38px;min-width: 38px; border-radius: var(--me-lg-r-sm, 8px); } .btn svg { width: 18px; height: 18px; } .global-bottom-nav .item svg { width: 20px; height: 20px; } /* table.dataTable tbody td { padding: 12px 14px !important; } table.dataTable thead th { padding: 11px 14px !important; font-size: 12px; } */ .card-body { padding: 18px 20px; } .dropdown-item { padding: 9px 16px; } .modal-header, .modal-footer { padding: 16px 20px; } .modal-body { padding: 20px; } /* dock polish (the "weird background" was an extracted translucent-white chip; the dock now composes cleanly in every theme) */ .global-bottom-nav { background: var(--me-surface) !important; backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-radius: var(--me-lg-r-lg, 14px); } .global-bottom-nav .item { border-radius: var(--me-lg-r-md, 10px); padding: 6px 10px; } .global-bottom-nav .item.active, .global-bottom-nav .item:hover { background: var(--me-accent-soft) !important; } /* ╔══════════ 14 · SMALL-SCREEN STANDARDS (all themes — usability layer) ══════════╗ */ @media (max-width: 768px) { /* module landing sidebars become a sticky horizontal chip rail */ .landing-side, .landing-sidebar-col { position: sticky; top: 0; z-index: 25; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; padding: 6px 8px !important; } .landing-side, .landing-sidebar-col ul, .landing-sidebar-col .nav { display: flex !important; flex-direction: row !important; align-items: center; overflow-x: auto; overflow-y: hidden; gap: 6px; margin: 0; padding: 4px 2px; scrollbar-width: none; list-style: none; } .landing-side::-webkit-scrollbar, .landing-sidebar-col ul::-webkit-scrollbar { display: none; } .list-side-nav { flex: 0 0 auto; white-space: nowrap; border-radius: 999px !important; padding: 9px 16px !important; min-height: 40px; display: inline-flex !important; align-items: center; gap: 6px; width: auto !important; } .collapce-landing-sidebar { display: none !important; } /* collapse toggle is meaningless on the rail */ /* dock becomes a fixed app bar with 48px touch targets + scroll-snap. The wrapper (#global_bottom_nav_icons) is fixed AND transformed, so a fixed child anchors to IT, not the viewport — the wrapper itself must become the full-width anchor. */ #global_bottom_nav_icons { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: 100vw !important; max-width: 100vw !important; min-width: 0 !important; height: auto !important; margin: 0 !important; transform: none !important; z-index: 1050; display: block !important; } .global-bottom-nav { position: static !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 64px; margin: 0 !important; border-radius: 16px 16px 0 0 !important; display: flex !important; justify-content: flex-start !important; overflow-x: auto !important; overflow-y: hidden; scroll-snap-type: x proximity; padding: 6px 8px !important; scrollbar-width: none; transform: none !important; } .global-bottom-nav .item { display: flex !important; } .global-bottom-nav .nav-handle { display: none !important; } /* drag handle is pointless on the app bar */ .global-bottom-nav::-webkit-scrollbar { display: none; } .global-bottom-nav .item { scroll-snap-align: start; min-width: 64px; min-height: 48px; justify-content: center; } /* tables always scroll inside their own container */ .dataTables_wrapper, .table-responsive, .mainTableContainer { overflow-x: auto !important; } /* near-fullscreen modals */ .modal-dialog { margin: 8px auto !important; max-width: calc(100vw - 16px) !important; } /* comfortable form controls */ input.me-input-style, select.me-input-style, .me-textarea-style, .form-control, .form-select { min-height: 44px; } /* swiper chrome: gestures replace the peeking prev/next arrows */ .swiper-button-prev, .swiper-button-next { display: none !important; } /* decorative banner circles overflow tiny screens — hide, they are ornament */ .circle.delay1, .circle.delay2, .circle.delay3, .circle.delay4 { display: none !important; } /* tables scroll inside their container (DT1 + DT2 + custom wrappers) */ .dataTables_wrapper, .dt-container, .mainTableContainer .table-responsive, .mainTableContainer { overflow-x: auto !important; max-width: 100vw; } /* workspace tab rail scrolls */ .mw-tabs-scroller { max-width: 100%; overflow-x: auto !important; } /* status filter chips wrap instead of spilling */ div:has(> .status-filter-item) { flex-wrap: wrap !important; row-gap: 6px; } /* announcement carousel clips its stage */ .owl-carousel { max-width: 100% !important; overflow: hidden !important; } .alert-text, .alert-time { max-width: 92vw; overflow: hidden; text-overflow: ellipsis; } /* settings shell: the RTL/LTR-scoped fixed sidebar rules beat plain selectors — match their specificity with dir-scoped overrides. */ [dir="rtl"] aside.sidebar, [dir="ltr"] aside.sidebar, aside.sidebar { position: static !important; width: 100% !important; height: auto !important; max-height: none !important; flex-direction: row !important; overflow-x: auto !important; max-width: 100vw !important; inset: auto !important; } aside.sidebar .nav, aside.sidebar ul { display: flex !important; flex-direction: row !important; gap: 4px; margin: 0; } aside.sidebar .nav-item { flex: 0 0 auto; } /* tab headers become a scrollable rail */ div:has(> .p-settings-tabs), .p-settings-tabs-container { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; max-width: 100vw !important; scrollbar-width: none; } .p-settings-tabs { flex: 0 0 auto !important; white-space: nowrap; } /* personalization page stacks its control groups */ .mep-row { flex-direction: column !important; } .mep-row .mep-group { width: 100%; flex: 1 1 auto !important; } /* generic guards */ img, video, canvas { max-width: 100%; height: auto; } .dropdown-menu { max-width: 94vw; } } /* ╔══════════════ 15 · DESIGN-QA REFINEMENT LAYER ══════════════╗ */ /* header icon buttons: translucent chips on the dark chrome, never white slabs */ header.system-header-bar .btn-default, .landing-page-header .btn-default { background: rgba(255, 255, 255, .12) !important; border-color: transparent !important; color: #fff !important; } header.system-header-bar .btn-default:hover, .landing-page-header .btn-default:hover { background: rgba(255, 255, 255, .22) !important; } /* module sidebar: inset pill active state (not an edge-to-edge slab) */ .list-side-nav { margin-inline: 8px; border-radius: var(--me-lg-r-md, 10px) !important; } /* toasts never overlap the app bar on phones */ @media (max-width: 768px) { .jq-toast-wrap.bottom-left, .jq-toast-wrap.bottom-right { bottom: 92px !important; } } /* settings tab rail: quiet strip + pill tabs */ .p-settings-tabs { border-radius: 999px !important; padding: 9px 18px !important; color: var(--me-muted); background: transparent; } .p-settings-tabs.active-tab { background: var(--me-accent-soft) !important; color: var(--me-accent-deep) !important; font-weight: 700; } div:has(> .p-settings-tabs) { background: transparent !important; border-bottom: 1px solid var(--me-border); gap: 4px; padding: 6px 10px; } /* ── φ type & rhythm (golden-scale ≈ ×1.272 per step) ── */ body { line-height: 1.6; } h1 { font-size: 27.6px; line-height: 1.25; } h2 { font-size: 21.7px; line-height: 1.3; } h3 { font-size: 17px; line-height: 1.35; } h4 { font-size: 14.5px; line-height: 1.4; } .mw-card-title, .card-title { font-size: 17px; } /* card padding at 1:φ vertical:horizontal */ .mw-card-body { padding: 17px 27px; } .mw-panel-card { padding: 14px 18px; } /* golden proportion for the workspace panel: main:panel ≈ φ:1 of the golden section */ .matter-workspace, .matter-workspace-page { --mw-panel-w: clamp(300px, 24.6vw, 354px); } /* one visible focus ring for EVERY interactive element (a11y baseline) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--me-accent) !important; outline-offset: 2px; }