/* Desktop Mode shell — only active when html[data-desktop-mode="on"] */
:root {
--dm-taskbar-h: 56px;
/* Clearance between floating panels and taskbar. */
--dm-panel-gap: 10px;
--dm-accent: #2f81f7;
--dm-accent-soft: rgba(47, 129, 247, 0.22);
--dm-accent-border: rgba(47, 129, 247, 0.45);
--dm-brand-text: #2f81f7;
--dm-btn-bg: #2f81f7;
--dm-btn-fg: #ffffff;
--dm-dark-bg: #0b1220;
--dm-dark-surface: #121c2d;
--dm-dark-elevated: #182338;
--dm-dark-border: #243247;
--dm-taskbar-bg: rgba(11, 18, 32, 0.88);
/* Chrome text / surfaces (overridden per theme on #desktopModeRoot) */
--dm-text: #e2e8f0;
--dm-text-muted: #94a3b8;
--dm-text-subtle: #64748b;
--dm-hover: rgba(255, 255, 255, 0.08);
--dm-search-bg: rgba(24, 35, 56, 0.85);
--dm-tray-bg: rgba(24, 35, 56, 0.4);
--dm-popover-bg: rgba(18, 28, 45, 0.97);
--dm-rail-bg: rgba(11, 18, 32, 0.55);
--dm-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
--dm-taskbar-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
--dm-active-fg: #ffffff;
}
/* Classic chrome hidden only while Desktop Mode is active */
html[data-desktop-mode="on"] #sidebarShell,
html[data-desktop-mode="on"] body > .flex > main > header,
html[data-desktop-mode="on"] #portalPagesDockBar,
html[data-desktop-mode="on"] #dashboardView,
html[data-desktop-mode="on"] #toolFrameView,
html[data-desktop-mode="on"] #rightPanelDock,
html[data-desktop-mode="on"] #rightPanelExpandTab,
html[data-desktop-mode="on"] #michaelLauncher {
display: none !important;
}
/* Portal modals must stack above #desktopModeRoot (z-index 200) */
html[data-desktop-mode="on"] #siteAnnouncementModal,
html[data-desktop-mode="on"] #formChangeNotifyModal,
html[data-desktop-mode="on"] #portalSearchModal,
html[data-desktop-mode="on"] #siteAnnouncementModal.flex,
html[data-desktop-mode="on"] #formChangeNotifyModal.flex {
z-index: 400 !important;
}
/* MDE analytics overlay: reparented to body while DM is on (classic stays in tool frame). */
#mdeSubmitAnalyticsOverlay.mde-analytics-overlay--dm {
position: fixed !important;
inset: 0 !important;
z-index: 400 !important;
width: 100% !important;
height: 100% !important;
}
/* Spotlight-style search when Desktop Mode is on (classic modal chrome unchanged when off) */
html[data-desktop-mode="on"] #portalSearchModal {
align-items: center !important;
justify-content: flex-start !important;
padding-top: min(14vh, 6rem) !important;
background: rgba(3, 8, 18, 0.55) !important;
backdrop-filter: blur(6px);
}
html[data-desktop-mode="on"] #portalSearchModal > div[role="dialog"] {
max-width: 36rem;
box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
}
html[data-desktop-mode="on"] .portal-search-section {
font-size: 10px;
font-weight: 750;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #64748b;
padding: 10px 10px 4px;
}
html.dark[data-desktop-mode="on"] .portal-search-section {
color: #94a3b8;
}
html[data-desktop-mode="on"] body {
background: transparent !important;
}
html[data-desktop-mode="on"] body > .flex.h-screen {
background: transparent !important;
}
html[data-desktop-mode="on"] #mainContent,
html[data-desktop-mode="on"] #mainColumn {
background: transparent !important;
}
html[data-desktop-mode="on"] #mainContent {
padding-bottom: var(--dm-taskbar-h);
}
/* Wallpaper + icons behind classic workspace; shell chrome (taskbar/panels) above it.
Pass clicks through the transparent shell so desktop icons remain interactive. */
html[data-desktop-mode="on"] body > .flex.h-screen {
position: relative;
z-index: 50;
pointer-events: none;
}
/* Phase 4a: classic tool hosts stay hidden; DM window layer handles tools. */
/* Theme tokens — all 16 portal themes (DM chrome only) */
#desktopModeRoot.dm-theme-light {
--dm-accent: #2563eb;
--dm-accent-soft: rgba(37, 99, 235, 0.16);
--dm-accent-border: rgba(37, 99, 235, 0.42);
--dm-brand-text: #1d4ed8;
--dm-btn-bg: #2563eb;
--dm-btn-fg: #ffffff;
--dm-dark-bg: #e2e8f0;
--dm-dark-surface: #f8fafc;
--dm-dark-elevated: #ffffff;
--dm-dark-border: #cbd5e1;
--dm-taskbar-bg: rgba(248, 250, 252, 0.94);
}
#desktopModeRoot.dm-theme-light-blue {
--dm-accent: #0284c7;
--dm-accent-soft: rgba(2, 132, 199, 0.16);
--dm-accent-border: rgba(2, 132, 199, 0.42);
--dm-brand-text: #0369a1;
--dm-btn-bg: #0284c7;
--dm-btn-fg: #ffffff;
--dm-dark-bg: #e0f2fe;
--dm-dark-surface: #f0f9ff;
--dm-dark-elevated: #ffffff;
--dm-dark-border: #bae6fd;
--dm-taskbar-bg: rgba(240, 249, 255, 0.94);
}
#desktopModeRoot.dm-theme-light-purple {
--dm-accent: #7c3aed;
--dm-accent-soft: rgba(124, 58, 237, 0.16);
--dm-accent-border: rgba(124, 58, 237, 0.42);
--dm-brand-text: #6d28d9;
--dm-btn-bg: #7c3aed;
--dm-btn-fg: #ffffff;
--dm-dark-bg: #ede9fe;
--dm-dark-surface: #f5f3ff;
--dm-dark-elevated: #ffffff;
--dm-dark-border: #ddd6fe;
--dm-taskbar-bg: rgba(245, 243, 255, 0.94);
}
#desktopModeRoot.dm-theme-light-green {
--dm-accent: #059669;
--dm-accent-soft: rgba(5, 150, 105, 0.16);
--dm-accent-border: rgba(5, 150, 105, 0.42);
--dm-brand-text: #047857;
--dm-btn-bg: #059669;
--dm-btn-fg: #ffffff;
--dm-dark-bg: #d1fae5;
--dm-dark-surface: #ecfdf5;
--dm-dark-elevated: #ffffff;
--dm-dark-border: #a7f3d0;
--dm-taskbar-bg: rgba(236, 253, 245, 0.94);
}
#desktopModeRoot.dm-theme-light-pink {
--dm-accent: #db2777;
--dm-accent-soft: rgba(219, 39, 119, 0.16);
--dm-accent-border: rgba(219, 39, 119, 0.42);
--dm-brand-text: #be185d;
--dm-btn-bg: #db2777;
--dm-btn-fg: #ffffff;
--dm-dark-bg: #fce7f3;
--dm-dark-surface: #fdf2f8;
--dm-dark-elevated: #ffffff;
--dm-dark-border: #fbcfe8;
--dm-taskbar-bg: rgba(253, 242, 248, 0.94);
}
/* Shared light-family chrome (readable taskbar / menus / popovers) */
#desktopModeRoot.dm-theme-light,
#desktopModeRoot.dm-theme-light-blue,
#desktopModeRoot.dm-theme-light-purple,
#desktopModeRoot.dm-theme-light-green,
#desktopModeRoot.dm-theme-light-pink {
--dm-text: #0f172a;
--dm-text-muted: #334155;
--dm-text-subtle: #64748b;
--dm-hover: rgba(15, 23, 42, 0.07);
--dm-search-bg: rgba(255, 255, 255, 0.92);
--dm-tray-bg: rgba(15, 23, 42, 0.06);
--dm-popover-bg: rgba(255, 255, 255, 0.98);
--dm-rail-bg: rgba(241, 245, 249, 0.96);
--dm-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
--dm-taskbar-shadow: 0 -4px 24px rgba(15, 23, 42, 0.1);
--dm-active-fg: #0f172a;
}
#desktopModeRoot.dm-theme-qm {
--dm-accent: #2f81f7;
--dm-accent-soft: rgba(47, 129, 247, 0.22);
--dm-accent-border: rgba(47, 129, 247, 0.45);
--dm-brand-text: #93c5fd;
--dm-btn-bg: #2f81f7;
--dm-btn-fg: #fff;
--dm-dark-bg: #0b1220;
--dm-dark-surface: #121c2d;
--dm-dark-elevated: #182338;
--dm-dark-border: #243247;
--dm-taskbar-bg: rgba(11, 18, 32, 0.88);
--dm-text: #e2e8f0;
--dm-text-muted: #94a3b8;
--dm-text-subtle: #64748b;
}
#desktopModeRoot.dm-theme-glass {
--dm-accent: #55ccff;
--dm-accent-soft: rgba(85, 204, 255, 0.22);
--dm-accent-border: rgba(125, 211, 252, 0.55);
--dm-brand-text: #a7d0f9;
--dm-btn-bg: linear-gradient(180deg, #55ccff, #2d72ff);
--dm-btn-fg: #f0f7ff;
--dm-dark-surface: rgba(26, 52, 98, 0.92);
--dm-dark-elevated: rgba(34, 68, 122, 0.94);
--dm-dark-border: rgba(125, 211, 252, 0.48);
--dm-taskbar-bg: rgba(16, 39, 74, 0.82);
}
#desktopModeRoot.dm-theme-arctic-teal {
--dm-accent: #2dd4bf;
--dm-accent-soft: rgba(45, 212, 191, 0.22);
--dm-accent-border: rgba(45, 212, 191, 0.48);
--dm-brand-text: #99f6e4;
--dm-btn-bg: linear-gradient(180deg, #2dd4bf, #0f7668);
--dm-btn-fg: #ecfeff;
--dm-dark-surface: rgba(15, 90, 98, 0.92);
--dm-dark-elevated: rgba(18, 100, 110, 0.94);
--dm-dark-border: rgba(45, 212, 191, 0.48);
--dm-taskbar-bg: rgba(5, 48, 54, 0.88);
}
#desktopModeRoot.dm-theme-aurora {
--dm-accent: #38bdf8;
--dm-accent-soft: rgba(56, 189, 248, 0.2);
--dm-accent-border: rgba(56, 189, 248, 0.48);
--dm-brand-text: #fbcfe8;
--dm-btn-bg: linear-gradient(125deg, #14b8a6, #38bdf8, #a855f7);
--dm-btn-fg: #ecfeff;
--dm-dark-surface: rgba(22, 52, 96, 0.92);
--dm-dark-elevated: rgba(32, 68, 120, 0.94);
--dm-dark-border: rgba(56, 189, 248, 0.48);
--dm-taskbar-bg: rgba(10, 20, 40, 0.88);
}
#desktopModeRoot.dm-theme-ember-glass {
--dm-accent: #fb923c;
--dm-accent-soft: rgba(251, 146, 60, 0.22);
--dm-accent-border: rgba(251, 146, 60, 0.48);
--dm-brand-text: #fdba74;
--dm-btn-bg: linear-gradient(180deg, #fb923c, #c2410c);
--dm-btn-fg: #fff7ed;
--dm-dark-surface: rgba(61, 28, 16, 0.94);
--dm-dark-elevated: rgba(78, 36, 20, 0.96);
--dm-dark-border: rgba(251, 146, 60, 0.4);
--dm-taskbar-bg: rgba(28, 14, 10, 0.9);
}
#desktopModeRoot.dm-theme-dark-purple {
--dm-accent: #8f35e9;
--dm-accent-soft: rgba(143, 53, 233, 0.28);
--dm-accent-border: rgba(190, 103, 255, 0.45);
--dm-brand-text: #be67ff;
--dm-btn-bg: #8f35e9;
--dm-btn-fg: #f5edff;
--dm-dark-surface: #1d1730;
--dm-dark-elevated: #241536;
--dm-dark-border: #372655;
--dm-taskbar-bg: rgba(21, 17, 38, 0.92);
}
#desktopModeRoot.dm-theme-dark-green {
--dm-accent: #22c55e;
--dm-accent-soft: rgba(34, 197, 94, 0.22);
--dm-accent-border: rgba(34, 197, 94, 0.45);
--dm-brand-text: #86efac;
--dm-btn-bg: #16a34a;
--dm-btn-fg: #f0fdf4;
--dm-dark-surface: #0f1f17;
--dm-dark-elevated: #163024;
--dm-dark-border: #244835;
--dm-taskbar-bg: rgba(8, 20, 14, 0.92);
}
#desktopModeRoot.dm-theme-dark-pink {
--dm-accent: #ec4899;
--dm-accent-soft: rgba(236, 72, 153, 0.25);
--dm-accent-border: rgba(244, 114, 182, 0.5);
--dm-brand-text: #f9a8d4;
--dm-btn-bg: #db2777;
--dm-btn-fg: #fff1f2;
--dm-dark-surface: #1f1220;
--dm-dark-elevated: #2a1630;
--dm-dark-border: #4a2448;
--dm-taskbar-bg: rgba(22, 10, 24, 0.92);
}
#desktopModeRoot.dm-theme-neon-pink {
--dm-accent: #ff2d95;
--dm-accent-soft: rgba(255, 45, 149, 0.28);
--dm-accent-border: rgba(255, 92, 180, 0.65);
--dm-brand-text: #ff7ac3;
--dm-btn-bg: linear-gradient(180deg, #ff2d95, #c02674);
--dm-btn-fg: #fff0f7;
--dm-dark-surface: #1a0614;
--dm-dark-elevated: #2a0a1e;
--dm-dark-border: #5b1840;
--dm-taskbar-bg: rgba(18, 4, 14, 0.94);
}
/* Match portal Cyber (matrix lime on black) — not cyan/purple aurora */
#desktopModeRoot.dm-theme-cyber {
--dm-accent: #ccff00;
--dm-accent-soft: rgba(204, 255, 0, 0.16);
--dm-accent-border: rgba(204, 255, 0, 0.45);
--dm-brand-text: #ccff00;
--dm-btn-bg: #b6e62e;
--dm-btn-fg: #000000;
--dm-dark-bg: #000000;
--dm-dark-surface: #0c0c0f;
--dm-dark-elevated: #141418;
--dm-dark-border: #2a2a32;
--dm-taskbar-bg: rgba(0, 0, 0, 0.94);
--dm-text: #e8ffe8;
--dm-text-muted: #8fbf8f;
--dm-text-subtle: #5a7a5a;
--dm-hover: rgba(204, 255, 0, 0.1);
--dm-search-bg: rgba(18, 18, 24, 0.95);
--dm-tray-bg: rgba(20, 20, 28, 0.75);
--dm-popover-bg: rgba(12, 12, 15, 0.98);
--dm-rail-bg: rgba(0, 0, 0, 0.55);
--dm-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
--dm-active-fg: #ccff00;
}
#desktopModeRoot.dm-theme-hc {
--dm-accent: #ffff00;
--dm-accent-soft: rgba(255, 255, 0, 0.2);
--dm-accent-border: #ffff00;
--dm-brand-text: #ffff00;
--dm-btn-bg: #ffff00;
--dm-btn-fg: #000;
--dm-dark-surface: #000;
--dm-dark-elevated: #111;
--dm-dark-border: #ffff00;
--dm-taskbar-bg: rgba(0, 0, 0, 0.95);
}
/* Wallpapers */
.dm-wp-aurora {
background:
radial-gradient(ellipse 80% 60% at 20% 30%, rgba(56, 189, 248, 0.45), transparent 55%),
radial-gradient(ellipse 70% 50% at 80% 20%, rgba(167, 139, 250, 0.4), transparent 50%),
radial-gradient(ellipse 60% 40% at 50% 80%, rgba(52, 211, 153, 0.25), transparent 55%),
linear-gradient(160deg, #0b1220 0%, #1a2744 50%, #0f172a 100%);
}
.dm-wp-ember {
background:
radial-gradient(ellipse 70% 55% at 75% 25%, rgba(251, 146, 60, 0.4), transparent 50%),
radial-gradient(ellipse 50% 40% at 20% 70%, rgba(239, 68, 68, 0.22), transparent 55%),
linear-gradient(165deg, #1a0f0c 0%, #2a1510 45%, #0f1218 100%);
}
.dm-wp-midnight {
background:
radial-gradient(circle at 15% 20%, rgba(255,255,255,0.12) 0 1px, transparent 2px),
radial-gradient(circle at 40% 60%, rgba(255,255,255,0.08) 0 1px, transparent 2px),
radial-gradient(circle at 70% 30%, rgba(255,255,255,0.1) 0 1px, transparent 2px),
radial-gradient(ellipse 90% 70% at 50% 100%, rgba(47, 129, 247, 0.2), transparent 50%),
linear-gradient(180deg, #050810 0%, #0b1220 55%, #111827 100%);
}
.dm-wp-teal {
background:
radial-gradient(ellipse 60% 50% at 30% 40%, rgba(45, 212, 191, 0.35), transparent 55%),
radial-gradient(ellipse 50% 45% at 80% 60%, rgba(14, 165, 233, 0.3), transparent 50%),
linear-gradient(150deg, #042f2e 0%, #0f172a 55%, #082f49 100%);
}
.dm-wp-slate {
background:
repeating-linear-gradient(-12deg, transparent, transparent 40px, rgba(148, 163, 184, 0.03) 40px, rgba(148, 163, 184, 0.03) 41px),
linear-gradient(145deg, #1e293b 0%, #0f172a 40%, #334155 100%);
}
.dm-wp-rose {
background:
radial-gradient(ellipse 65% 50% at 25% 35%, rgba(244, 114, 182, 0.35), transparent 55%),
radial-gradient(ellipse 55% 45% at 85% 70%, rgba(251, 113, 133, 0.25), transparent 50%),
linear-gradient(160deg, #1a0a14 0%, #1e1030 50%, #0f1220 100%);
}
/* Vibrant wallpapers — richer blooms, still dark enough for icon labels */
.dm-wp-nebula {
background:
radial-gradient(ellipse 70% 55% at 18% 28%, rgba(192, 38, 211, 0.72), transparent 58%),
radial-gradient(ellipse 65% 50% at 82% 22%, rgba(59, 130, 246, 0.7), transparent 55%),
radial-gradient(ellipse 55% 45% at 55% 78%, rgba(236, 72, 153, 0.55), transparent 52%),
radial-gradient(circle at 70% 60%, rgba(167, 139, 250, 0.45), transparent 40%),
linear-gradient(155deg, #12061c 0%, #1a0b2e 45%, #0c1228 100%);
}
.dm-wp-citrus {
background:
radial-gradient(ellipse 75% 55% at 22% 30%, rgba(251, 146, 60, 0.75), transparent 56%),
radial-gradient(ellipse 60% 50% at 78% 25%, rgba(250, 204, 21, 0.65), transparent 52%),
radial-gradient(ellipse 55% 45% at 60% 80%, rgba(249, 115, 22, 0.5), transparent 50%),
radial-gradient(circle at 40% 70%, rgba(132, 204, 22, 0.35), transparent 42%),
linear-gradient(160deg, #1a0c06 0%, #2a1408 50%, #14100a 100%);
}
.dm-wp-voltage {
background:
radial-gradient(ellipse 70% 50% at 20% 25%, rgba(34, 211, 238, 0.7), transparent 55%),
radial-gradient(ellipse 60% 48% at 85% 30%, rgba(168, 85, 247, 0.68), transparent 52%),
radial-gradient(ellipse 50% 40% at 50% 85%, rgba(204, 255, 0, 0.42), transparent 48%),
radial-gradient(circle at 65% 55%, rgba(56, 189, 248, 0.4), transparent 38%),
linear-gradient(155deg, #020617 0%, #0a1628 50%, #0f0520 100%);
}
.dm-wp-lagoon {
background:
radial-gradient(ellipse 80% 60% at 25% 35%, rgba(45, 212, 191, 0.78), transparent 58%),
radial-gradient(ellipse 65% 50% at 80% 20%, rgba(56, 189, 248, 0.72), transparent 54%),
radial-gradient(ellipse 55% 45% at 55% 85%, rgba(52, 211, 153, 0.55), transparent 50%),
radial-gradient(circle at 40% 60%, rgba(125, 211, 252, 0.45), transparent 40%),
linear-gradient(150deg, #042f2e 0%, #0c4a6e 48%, #083344 100%);
}
.dm-wp-sherbet {
background:
radial-gradient(ellipse 75% 55% at 20% 30%, rgba(244, 114, 182, 0.7), transparent 56%),
radial-gradient(ellipse 65% 50% at 85% 25%, rgba(196, 181, 253, 0.72), transparent 54%),
radial-gradient(ellipse 55% 45% at 50% 82%, rgba(253, 186, 116, 0.58), transparent 50%),
radial-gradient(circle at 60% 50%, rgba(167, 243, 208, 0.4), transparent 42%),
linear-gradient(155deg, #2a1030 0%, #3b1c4a 45%, #1e1535 100%);
}
.dm-wp-daybreak {
background:
radial-gradient(ellipse 85% 55% at 30% 20%, rgba(251, 146, 60, 0.8), transparent 55%),
radial-gradient(ellipse 70% 50% at 85% 35%, rgba(251, 113, 133, 0.65), transparent 52%),
radial-gradient(ellipse 60% 45% at 45% 90%, rgba(250, 204, 21, 0.5), transparent 50%),
radial-gradient(circle at 15% 70%, rgba(251, 191, 36, 0.45), transparent 40%),
linear-gradient(165deg, #3b1a10 0%, #5c2a18 40%, #1e1430 100%);
}
#desktopModeWallpaper {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
}
.dm-desktop-icons {
position: absolute;
inset: 0;
bottom: var(--dm-taskbar-h);
z-index: 2;
pointer-events: none;
overflow: hidden;
}
.dm-desk-icon {
position: absolute;
width: 88px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 8px 4px;
border-radius: 10px;
cursor: grab;
user-select: none;
z-index: 5;
pointer-events: auto;
touch-action: none;
}
#desktopModeWallpaper[data-dm-icon-size="sm"] .dm-desk-icon,
#dmDesktopIcons[data-dm-icon-size="sm"] .dm-desk-icon {
width: 72px;
gap: 4px;
padding: 6px 2px;
}
#desktopModeWallpaper[data-dm-icon-size="lg"] .dm-desk-icon,
#dmDesktopIcons[data-dm-icon-size="lg"] .dm-desk-icon {
width: 104px;
gap: 8px;
padding: 10px 4px;
}
.dm-desk-icon:active,
.dm-desk-icon.is-dragging {
cursor: grabbing;
z-index: 20;
}
.dm-desk-icon:hover {
background: rgba(255, 255, 255, 0.08);
}
.dm-desk-icon.is-selected {
background: rgba(47, 129, 247, 0.28);
outline: 1px solid rgba(47, 129, 247, 0.5);
}
.dm-desk-icon-tile {
width: 48px;
height: 48px;
border-radius: 12px;
display: grid;
place-items: center;
color: #fff;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
#desktopModeWallpaper[data-dm-icon-size="sm"] .dm-desk-icon-tile,
#dmDesktopIcons[data-dm-icon-size="sm"] .dm-desk-icon-tile {
width: 40px;
height: 40px;
border-radius: 10px;
}
#desktopModeWallpaper[data-dm-icon-size="lg"] .dm-desk-icon-tile,
#dmDesktopIcons[data-dm-icon-size="lg"] .dm-desk-icon-tile {
width: 56px;
height: 56px;
border-radius: 14px;
}
.dm-desk-icon-tile .material-symbols-outlined.filled,
.dm-desk-icon-tile .material-symbols-outlined {
font-size: 24px !important;
font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
#desktopModeWallpaper[data-dm-icon-size="sm"] .dm-desk-icon-tile .material-symbols-outlined,
#dmDesktopIcons[data-dm-icon-size="sm"] .dm-desk-icon-tile .material-symbols-outlined {
font-size: 20px !important;
}
#desktopModeWallpaper[data-dm-icon-size="lg"] .dm-desk-icon-tile .material-symbols-outlined,
#dmDesktopIcons[data-dm-icon-size="lg"] .dm-desk-icon-tile .material-symbols-outlined {
font-size: 28px !important;
}
.dm-desk-icon-label {
font-size: 11px;
font-weight: 600;
text-align: center;
line-height: 1.25;
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.95),
0 0 10px rgba(0, 0, 0, 0.55);
max-width: 84px;
word-break: break-word;
color: #f8fafc;
}
#desktopModeWallpaper[data-dm-icon-size="sm"] .dm-desk-icon-label,
#dmDesktopIcons[data-dm-icon-size="sm"] .dm-desk-icon-label {
font-size: 10px;
max-width: 70px;
}
#desktopModeWallpaper[data-dm-icon-size="lg"] .dm-desk-icon-label,
#dmDesktopIcons[data-dm-icon-size="lg"] .dm-desk-icon-label {
font-size: 12px;
max-width: 100px;
}
.dm-desk-folder {
position: absolute;
}
.dm-desk-folder-tile {
width: 52px;
height: 44px;
border-radius: 8px 8px 10px 10px;
display: grid;
place-items: center;
position: relative;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.dm-desk-folder-tile::before {
content: "";
position: absolute;
top: -6px;
left: 6px;
width: 22px;
height: 10px;
border-radius: 4px 4px 0 0;
background: inherit;
filter: brightness(1.15);
}
.dm-desk-folder-preview {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3px;
width: 34px;
height: 28px;
}
.dm-desk-folder-mini {
border-radius: 5px;
display: grid;
place-items: center;
overflow: hidden;
}
.dm-desk-folder-mini .material-symbols-outlined {
font-size: 11px !important;
color: #fff;
}
.dm-desk-folder-mini--empty {
background: rgba(255, 255, 255, 0.18);
}
.dm-desk-folder-count {
position: absolute;
top: 4px;
right: 6px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.88);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #e2e8f0;
font-size: 9px;
font-weight: 800;
line-height: 14px;
text-align: center;
}
.dm-folder-expand {
position: absolute;
inset: 0;
bottom: var(--dm-taskbar-h);
z-index: 120;
display: flex;
align-items: center;
justify-content: center;
background: rgba(3, 8, 18, 0.5);
backdrop-filter: blur(8px);
pointer-events: auto;
}
.dm-folder-expand.hidden {
display: none !important;
}
.dm-folder-card {
width: min(520px, calc(100vw - 48px));
max-height: min(520px, calc(100vh - var(--dm-taskbar-h) - 48px));
overflow: auto;
border-radius: 22px;
background: var(--dm-popover-bg, rgba(24, 35, 56, 0.95));
border: 1px solid var(--dm-dark-border, rgba(255, 255, 255, 0.12));
padding: 18px;
box-shadow: var(--dm-shadow, 0 28px 80px rgba(0, 0, 0, 0.5));
animation: dmFolderPop 0.2s ease;
}
@keyframes dmFolderPop {
from {
opacity: 0;
transform: scale(0.92);
}
to {
opacity: 1;
transform: scale(1);
}
}
html[data-dm-reduce-motion="1"] .dm-folder-card {
animation: none;
}
.dm-folder-card-head {
display: flex;
align-items: center;
gap: 12px;
}
.dm-folder-card-tile {
width: 42px;
height: 42px;
border-radius: 12px;
display: grid;
place-items: center;
color: #fff;
flex-shrink: 0;
}
.dm-folder-card-tile .material-symbols-outlined {
font-size: 22px;
}
.dm-folder-card-title {
font-size: 16px;
font-weight: 750;
color: var(--dm-text, #e2e8f0);
}
.dm-folder-card-sub {
font-size: 12px;
color: var(--dm-text-muted, #94a3b8);
margin-top: 2px;
}
.dm-folder-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-top: 16px;
}
.dm-folder-app {
appearance: none;
border: 1px solid transparent;
background: transparent;
color: var(--dm-text, #e2e8f0);
border-radius: 14px;
padding: 10px 6px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
cursor: pointer;
font: inherit;
}
.dm-folder-app:hover,
.dm-folder-app:focus-visible {
background: var(--dm-hover, rgba(255, 255, 255, 0.08));
border-color: var(--dm-accent-border, rgba(47, 129, 247, 0.4));
outline: none;
}
.dm-folder-app-tile {
width: 48px;
height: 48px;
border-radius: 14px;
display: grid;
place-items: center;
color: #fff;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}
.dm-folder-app-tile .material-symbols-outlined {
font-size: 24px;
}
.dm-folder-app-label {
font-size: 11px;
font-weight: 650;
text-align: center;
line-height: 1.25;
max-width: 100%;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.dm-empty-hint {
position: absolute;
left: 50%;
top: 32%;
transform: translateX(-50%);
z-index: 1;
max-width: min(420px, calc(100vw - 48px));
text-align: center;
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
font-weight: 500;
line-height: 1.45;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
pointer-events: none;
}
.dm-empty-hint.hidden {
display: none;
}
/* Phase 4a single window */
.dm-window-layer {
position: absolute;
inset: 0;
bottom: var(--dm-taskbar-h);
z-index: 40;
pointer-events: none;
overflow: hidden;
}
.dm-window {
position: absolute;
z-index: 50;
display: flex;
flex-direction: column;
border-radius: 12px;
overflow: hidden;
background: var(--dm-dark-surface);
border: 1px solid var(--dm-dark-border);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
min-width: 280px;
min-height: 200px;
pointer-events: auto;
touch-action: none;
animation: dm-win-in 0.18s ease-out;
}
@keyframes dm-win-in {
from {
opacity: 0;
transform: translateY(8px) scale(0.985);
}
to {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.dm-window {
animation: none;
}
}
.dm-window.is-focused {
z-index: 60;
border-color: var(--dm-accent-border);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--dm-accent-soft);
}
.dm-window.hidden,
.dm-window.is-minimized {
display: none !important;
}
.dm-window.size-form {
width: min(420px, 92vw);
height: min(640px, calc(100% - 24px));
}
.dm-window.size-standard {
width: min(900px, 92vw);
height: min(620px, calc(100% - 24px));
}
.dm-window.size-full {
left: 8px !important;
top: 8px !important;
right: 8px;
bottom: 8px;
width: auto !important;
height: auto !important;
}
.dm-window.size-snap {
max-width: none;
max-height: none;
}
.dm-window-titlebar {
height: 40px;
display: flex;
align-items: center;
gap: 8px;
padding: 0 10px;
background: var(--dm-dark-elevated);
border-bottom: 1px solid var(--dm-dark-border);
cursor: grab;
flex-shrink: 0;
touch-action: none;
}
.dm-window-titlebar:active {
cursor: grabbing;
}
.dm-window-title {
flex: 1;
font-size: 13px;
font-weight: 600;
color: var(--dm-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.dm-window-controls {
display: flex;
gap: 4px;
align-items: center;
flex-shrink: 0;
overflow: visible;
position: relative;
z-index: 3;
}
.dm-win-max-wrap {
position: relative;
display: inline-flex;
align-items: center;
}
.dm-win-snap-pop {
display: none;
position: absolute;
top: 100%;
right: -4px;
z-index: 220;
padding-top: 8px;
filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45));
}
.dm-win-max-wrap:hover .dm-win-snap-pop:not(.hidden),
.dm-win-max-wrap:focus-within .dm-win-snap-pop:not(.hidden) {
display: block;
}
.dm-win-snap-pop.hidden {
display: none !important;
}
.dm-snap-overlay {
position: absolute;
inset: 0;
z-index: 88;
pointer-events: none;
display: flex;
justify-content: center;
padding-top: 12px;
background: rgba(0, 0, 0, 0.18);
}
.dm-snap-overlay:not(.hidden) {
pointer-events: auto;
}
.dm-snap-overlay.hidden {
display: none;
}
.dm-snap-overlay-inner {
pointer-events: auto;
}
.dm-snap-flyout {
pointer-events: auto;
background: rgba(18, 28, 45, 0.96);
border: 1px solid var(--dm-dark-border);
border-radius: 14px;
padding: 12px 14px 10px;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(16px);
min-width: 280px;
}
.dm-snap-flyout-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #94a3b8;
margin-bottom: 8px;
}
.dm-snap-layouts {
display: flex;
gap: 10px;
align-items: stretch;
}
.dm-snap-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3px;
width: 72px;
height: 48px;
padding: 4px;
border-radius: 8px;
background: rgba(0, 0, 0, 0.25);
border: 1px solid var(--dm-dark-border);
}
.dm-snap-layout--wide-narrow {
grid-template-columns: 2fr 1fr;
}
.dm-snap-layout--narrow-wide {
grid-template-columns: 1fr 2fr;
}
.dm-snap-layout--full {
grid-template-columns: 1fr;
width: 48px;
}
.dm-snap-zone {
border: none;
border-radius: 4px;
background: rgba(255, 255, 255, 0.12);
cursor: pointer;
padding: 0;
transition: background 0.12s, box-shadow 0.12s;
}
.dm-snap-zone:hover,
.dm-snap-zone.is-hot {
background: var(--dm-accent-soft);
box-shadow: inset 0 0 0 1px var(--dm-accent);
}
.dm-snap-hint {
margin: 8px 0 0;
font-size: 11px;
color: #64748b;
}
.dm-win-ctrl {
width: 28px;
height: 28px;
border-radius: 8px;
border: none;
background: transparent;
color: #94a3b8;
cursor: pointer;
display: grid;
place-items: center;
}
.dm-win-ctrl:hover {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
.dm-win-ctrl-close:hover {
background: #ef4444;
color: #fff;
}
.dm-window-body {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
background: var(--dm-dark-bg, #0b1220);
position: relative;
overflow: hidden;
}
.dm-hosted-body {
flex: 1;
min-height: 0;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
/* Portal Admin reparented into a DM window — classic overlay unchanged when DM is off */
#adminPanel.dm-admin-hosted {
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
border-radius: 0 !important;
}
.dm-tool-iframe {
flex: 1;
width: 100%;
height: 100%;
border: 0;
background: #fff;
}
.dm-taskbar-pins {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
min-width: 0;
flex-wrap: wrap;
max-width: min(420px, 40vw);
}
.dm-tb-pin {
width: var(--dm-tb-pin, 40px);
height: var(--dm-tb-pin, 40px);
border-radius: 12px;
border: 1px solid transparent;
background: var(--dm-hover);
color: var(--dm-text);
display: grid;
place-items: center;
cursor: pointer;
flex: 0 0 auto;
}
.dm-tb-pin .dm-tb-pin-icon {
font-size: 20px;
line-height: 1;
}
.dm-tb-pin.dm-tb-pin-pair {
width: auto;
min-width: var(--dm-tb-pin, 40px);
padding: 0 8px;
}
.dm-tb-pin-pair-icons {
display: inline-flex;
align-items: center;
gap: 2px;
}
.dm-tb-pin-pair .dm-tb-pin-icon {
font-size: 16px;
}
.dm-tb-pin-slash {
font-size: 11px;
font-weight: 700;
line-height: 1;
opacity: 0.55;
color: var(--dm-text-muted, #94a3b8);
user-select: none;
}
.dm-tb-pin:hover {
background: var(--dm-accent-soft);
}
.dm-tb-pin.is-active {
background: var(--dm-accent-soft);
border-color: var(--dm-accent-border);
color: var(--dm-active-fg);
}
.dm-tb-pin.is-min {
opacity: 0.55;
}
#desktopModeRoot {
position: fixed;
inset: 0;
z-index: 200;
pointer-events: none;
font-family: inherit;
color: #e2e8f0;
}
#desktopModeRoot .dm-hit {
pointer-events: auto;
}
/* Watchtower — desktop wallpaper widget (Phase 0).
Lives on #desktopModeWallpaper (under #desktopModeRoot windows/chrome).
Must NOT sit above tool windows. */
#desktopModeWallpaper .dm-watchtower {
position: absolute;
top: 14px;
right: 16px;
z-index: 6; /* above desktop icons (5) / empty hint (1); wallpaper is under window layer */
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
width: 72px;
padding: 8px 6px 6px;
border: 1px solid rgba(47, 129, 247, 0.45);
border-radius: 16px;
background: linear-gradient(165deg, rgba(18, 28, 45, 0.92), rgba(11, 18, 32, 0.88));
box-shadow:
0 0 0 1px rgba(147, 197, 253, 0.08),
0 10px 28px -12px rgba(47, 129, 247, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
color: #e2e8f0;
cursor: pointer;
appearance: none;
font: inherit;
pointer-events: auto; /* wallpaper is pointer-events: none */
}
#desktopModeWallpaper .dm-watchtower.hidden {
display: none !important;
}
#desktopModeWallpaper .dm-watchtower:hover {
border-color: rgba(47, 129, 247, 0.75);
box-shadow:
0 0 0 1px rgba(147, 197, 253, 0.16),
0 14px 32px -12px rgba(47, 129, 247, 0.7),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
#desktopModeWallpaper .dm-watchtower:focus-visible {
outline: 2px solid #2f81f7;
outline-offset: 2px;
}
#desktopModeWallpaper .dm-watchtower-core {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, rgba(147, 197, 253, 0.22), rgba(15, 23, 42, 0.55) 70%);
}
#desktopModeWallpaper .dm-watchtower-ring {
position: absolute;
top: 12px;
left: 50%;
width: 44px;
height: 44px;
margin-left: -22px;
border-radius: 50%;
border: 1px solid rgba(47, 129, 247, 0.35);
animation: dm-watchtower-pulse 2.8s ease-out infinite;
pointer-events: none;
}
#desktopModeWallpaper .dm-watchtower-ring--delay {
animation-delay: 1.1s;
}
#desktopModeWallpaper .dm-watchtower-label {
position: relative;
z-index: 2;
font-size: 10px;
font-weight: 650;
letter-spacing: 0.02em;
color: #93c5fd;
line-height: 1.1;
}
#desktopModeWallpaper .dm-watchtower.is-launching .dm-watchtower-core {
animation: dm-watchtower-beam 0.72s ease-out;
}
#desktopModeWallpaper .dm-watchtower.is-launching .dm-watchtower-ring {
animation: dm-watchtower-burst 0.72s ease-out;
border-color: rgba(147, 197, 253, 0.9);
}
@keyframes dm-watchtower-pulse {
0% {
transform: scale(0.85);
opacity: 0.65;
}
70% {
transform: scale(1.35);
opacity: 0;
}
100% {
transform: scale(1.35);
opacity: 0;
}
}
@keyframes dm-watchtower-beam {
0% {
transform: scale(1);
filter: brightness(1);
}
40% {
transform: scale(1.12);
filter: brightness(1.35);
}
100% {
transform: scale(1);
filter: brightness(1);
}
}
@keyframes dm-watchtower-burst {
0% {
transform: scale(1);
opacity: 0.8;
}
100% {
transform: scale(2.1);
opacity: 0;
}
}
html.dm-reduce-motion #desktopModeWallpaper .dm-watchtower-ring,
html.dm-reduce-motion #desktopModeWallpaper .dm-watchtower.is-launching .dm-watchtower-core,
html.dm-reduce-motion #desktopModeWallpaper .dm-watchtower.is-launching .dm-watchtower-ring {
animation: none !important;
}
.dm-panel-scrim {
position: absolute;
inset: 0;
bottom: var(--dm-taskbar-h);
z-index: 80;
background: rgba(0, 0, 0, 0.25);
}
.dm-panel-scrim.hidden {
display: none;
}
.dm-taskbar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: var(--dm-taskbar-h);
z-index: 100;
display: flex;
align-items: center;
gap: 8px;
padding: 0 10px;
background: var(--dm-taskbar-bg);
backdrop-filter: blur(18px) saturate(1.2);
border-top: 1px solid var(--dm-dark-border);
box-shadow: var(--dm-taskbar-shadow);
color: var(--dm-text);
}
/* Taskbar size presets (sm = current default) */
#desktopModeRoot[data-dm-tb-size="md"] {
--dm-tb-btn-h: 42px;
--dm-tb-pin: 46px;
--dm-tray-chip-h: 32px;
--dm-tray-icon: 18px;
--dm-q-mark: 26px;
--dm-michael: 38px;
}
#desktopModeRoot[data-dm-tb-size="lg"] {
--dm-tb-btn-h: 48px;
--dm-tb-pin: 52px;
--dm-tray-chip-h: 36px;
--dm-tray-icon: 20px;
--dm-q-mark: 28px;
--dm-michael: 42px;
}
#desktopModeRoot[data-dm-tb-size="sm"],
#desktopModeRoot:not([data-dm-tb-size]) {
--dm-tb-btn-h: 36px;
--dm-tb-pin: 40px;
--dm-tray-chip-h: 28px;
--dm-tray-icon: 15px;
--dm-q-mark: 22px;
--dm-michael: 32px;
}
.dm-tb-left,
.dm-tb-center,
.dm-tb-right {
display: flex;
align-items: center;
gap: 6px;
}
.dm-tb-left {
flex: 0 0 auto;
}
.dm-tb-center {
flex: 1 1 auto;
justify-content: center;
min-width: 0;
}
.dm-tb-right {
flex: 0 0 auto;
margin-left: auto;
}
.dm-tb-btn {
height: var(--dm-tb-btn-h, 36px);
min-width: var(--dm-tb-btn-h, 36px);
padding: 0 10px;
border-radius: 10px;
border: 1px solid transparent;
background: transparent;
color: var(--dm-text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
cursor: pointer;
font: inherit;
font-size: 12px;
font-weight: 600;
}
#desktopModeRoot[data-dm-tb-size="md"] .dm-tb-btn {
font-size: 13px;
}
#desktopModeRoot[data-dm-tb-size="lg"] .dm-tb-btn {
font-size: 14px;
}
.dm-tb-btn:hover {
background: var(--dm-hover);
color: var(--dm-text);
}
.dm-tb-btn:focus-visible,
.dm-tb-search:focus-visible,
.dm-tray-chip:focus-visible,
.dm-tray-clock-btn:focus-visible,
.dm-start-sec-btn:focus-visible,
.dm-start-item:focus-visible,
.dm-star-btn:focus-visible,
.dm-theme-tile:focus-visible,
.dm-scale-chip:focus-visible,
.dm-wp-swatch:focus-visible,
.dm-cal-day:focus-visible,
.dm-win-ctrl:focus-visible,
.dm-tb-pin:focus-visible {
outline: 2px solid var(--dm-accent);
outline-offset: 2px;
}
.dm-tb-btn.is-active {
background: var(--dm-accent-soft);
border-color: var(--dm-accent-border);
color: var(--dm-active-fg);
}
.dm-tb-btn-start,
.dm-tb-btn-start.is-active {
background: var(--dm-btn-bg);
border-color: var(--dm-accent-border);
color: var(--dm-btn-fg);
}
.dm-tb-btn-start.is-active {
box-shadow: 0 0 0 1px var(--dm-accent-border), 0 0 12px var(--dm-accent-soft);
filter: brightness(1.04);
}
.dm-q-mark {
width: var(--dm-q-mark, 22px);
height: var(--dm-q-mark, 22px);
border-radius: 7px;
display: grid;
place-items: center;
font-size: calc(var(--dm-q-mark, 22px) * 0.58);
font-weight: 800;
background: rgba(255, 255, 255, 0.2);
color: var(--dm-btn-fg, #fff);
line-height: 1;
}
#desktopModeRoot.dm-theme-cyber .dm-q-mark {
background: rgba(0, 0, 0, 0.28);
color: #000;
}
.dm-tb-search {
min-width: var(--dm-tb-btn-h, 36px);
padding: 0;
}
.dm-tb-search .material-symbols-outlined {
font-size: 20px !important;
color: var(--dm-brand-text, #93c5fd);
}
.dm-tb-search.is-active {
background: var(--dm-accent-soft);
border-color: var(--dm-accent-border);
color: var(--dm-active-fg, #fff);
}
.dm-tray {
display: flex;
align-items: center;
gap: 6px;
padding: 2px 2px 2px 4px;
border-radius: 10px;
background: var(--dm-tray-bg);
max-width: 100%;
overflow: visible;
}
.dm-tray-chip {
position: relative;
height: var(--dm-tray-chip-h, 28px);
padding: 0 5px;
border-radius: 8px;
border: none;
background: transparent;
color: var(--dm-text-muted);
font-size: 10px;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 3px;
flex: 0 0 auto;
font-family: inherit;
}
.dm-tray-chip .material-symbols-outlined {
font-size: var(--dm-tray-icon, 15px) !important;
}
.dm-tray-badge {
position: absolute;
top: -2px;
right: -2px;
min-width: 14px;
height: 14px;
padding: 0 3px;
border-radius: 999px;
background: #ef4444;
color: #fff;
font-size: 9px;
font-weight: 800;
line-height: 14px;
text-align: center;
box-shadow: 0 0 0 2px var(--dm-taskbar-bg);
}
.dm-tray-badge.dm-tray-badge--amber {
background: #f59e0b;
color: #111827;
}
.dm-tray-badge.hidden {
display: none !important;
}
.dm-tray-chip.dm-tray-notif.dm-tray-notif--setup {
color: #fbbf24;
background: rgba(245, 158, 11, 0.16);
border: 1px solid rgba(245, 158, 11, 0.45);
border-radius: 8px;
}
.dm-tray-chip.dm-tray-notif.dm-tray-notif--setup:hover,
.dm-tray-chip.dm-tray-notif.dm-tray-notif--setup.is-active {
background: rgba(245, 158, 11, 0.26);
border-color: rgba(251, 191, 36, 0.65);
color: #fde68a;
}
.dm-tray-chip:hover,
.dm-tray-chip.is-active {
background: var(--dm-hover);
color: var(--dm-text);
}
.dm-tray-chip.hidden {
display: none !important;
}
/* HRA faucet status on taskbar — green On / red Off */
.dm-tray-chip.dm-tray-hra-status {
border: 1px solid transparent;
padding: 0 7px;
gap: 4px;
font-size: 10px;
letter-spacing: 0.02em;
white-space: nowrap;
}
.dm-tray-chip.dm-tray-hra-on {
color: #6ee7b7;
background: rgba(16, 185, 129, 0.16);
border-color: rgba(16, 185, 129, 0.45);
}
.dm-tray-chip.dm-tray-hra-on:hover,
.dm-tray-chip.dm-tray-hra-on.is-active {
color: #a7f3d0;
background: rgba(16, 185, 129, 0.26);
}
.dm-tray-chip.dm-tray-hra-off {
color: #fca5a5;
background: rgba(239, 68, 68, 0.16);
border-color: rgba(239, 68, 68, 0.5);
}
.dm-tray-chip.dm-tray-hra-off:hover,
.dm-tray-chip.dm-tray-hra-off.is-active {
color: #fecaca;
background: rgba(239, 68, 68, 0.28);
}
/* Medicaid alerts pill on taskbar (left of HRA) */
.dm-tray-chip.dm-tray-medicaid {
position: relative;
border: 1px solid transparent;
padding: 0 8px 0 7px;
gap: 4px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.02em;
white-space: nowrap;
margin-right: 2px;
}
.dm-tray-medicaid-label {
line-height: 1;
}
.dm-tray-medicaid-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: #34d399;
flex-shrink: 0;
}
.dm-tray-chip.dm-tray-medicaid-green {
color: #6ee7b7;
background: rgba(16, 185, 129, 0.14);
border-color: rgba(16, 185, 129, 0.45);
}
.dm-tray-chip.dm-tray-medicaid-orange {
color: #fbbf24;
background: rgba(245, 158, 11, 0.16);
border-color: rgba(245, 158, 11, 0.5);
}
.dm-tray-chip.dm-tray-medicaid-red {
color: #fca5a5;
background: rgba(239, 68, 68, 0.16);
border-color: rgba(239, 68, 68, 0.5);
}
.dm-tray-chip.dm-tray-medicaid-green:hover,
.dm-tray-chip.dm-tray-medicaid-green.is-active {
background: rgba(16, 185, 129, 0.24);
}
.dm-tray-chip.dm-tray-medicaid-orange:hover,
.dm-tray-chip.dm-tray-medicaid-orange.is-active {
background: rgba(245, 158, 11, 0.26);
}
.dm-tray-chip.dm-tray-medicaid-red:hover,
.dm-tray-chip.dm-tray-medicaid-red.is-active {
background: rgba(239, 68, 68, 0.28);
}
.dm-tray-chip.dm-tray-medicaid-orange .dm-tray-badge {
background: #f59e0b;
}
.dm-tray-chip.dm-tray-medicaid-red .dm-tray-badge {
background: #ef4444;
}
#desktopModeRoot.dm-theme-light .dm-tray-chip.dm-tray-medicaid-green,
#desktopModeRoot.dm-theme-light-blue .dm-tray-chip.dm-tray-medicaid-green,
#desktopModeRoot.dm-theme-light-purple .dm-tray-chip.dm-tray-medicaid-green,
#desktopModeRoot.dm-theme-light-green .dm-tray-chip.dm-tray-medicaid-green,
#desktopModeRoot.dm-theme-light-pink .dm-tray-chip.dm-tray-medicaid-green {
color: #047857;
background: rgba(16, 185, 129, 0.12);
border-color: rgba(16, 185, 129, 0.4);
}
#desktopModeRoot.dm-theme-light .dm-tray-chip.dm-tray-medicaid-orange,
#desktopModeRoot.dm-theme-light-blue .dm-tray-chip.dm-tray-medicaid-orange,
#desktopModeRoot.dm-theme-light-purple .dm-tray-chip.dm-tray-medicaid-orange,
#desktopModeRoot.dm-theme-light-green .dm-tray-chip.dm-tray-medicaid-orange,
#desktopModeRoot.dm-theme-light-pink .dm-tray-chip.dm-tray-medicaid-orange {
color: #92400e;
background: rgba(245, 158, 11, 0.14);
border-color: rgba(245, 158, 11, 0.45);
}
#desktopModeRoot.dm-theme-light .dm-tray-chip.dm-tray-medicaid-red,
#desktopModeRoot.dm-theme-light-blue .dm-tray-chip.dm-tray-medicaid-red,
#desktopModeRoot.dm-theme-light-purple .dm-tray-chip.dm-tray-medicaid-red,
#desktopModeRoot.dm-theme-light-green .dm-tray-chip.dm-tray-medicaid-red,
#desktopModeRoot.dm-theme-light-pink .dm-tray-chip.dm-tray-medicaid-red {
color: #991b1b;
background: rgba(239, 68, 68, 0.12);
border-color: rgba(239, 68, 68, 0.45);
}
/* Glass-family desktop themes — opaque amber/red so teal/cyan don't wash the pill */
#desktopModeRoot.dm-theme-glass .dm-tray-chip.dm-tray-medicaid-green,
#desktopModeRoot.dm-theme-arctic-teal .dm-tray-chip.dm-tray-medicaid-green,
#desktopModeRoot.dm-theme-aurora .dm-tray-chip.dm-tray-medicaid-green,
#desktopModeRoot.dm-theme-ember-glass .dm-tray-chip.dm-tray-medicaid-green {
color: #a7f3d0;
background: rgba(6, 78, 59, 0.85);
border-color: rgba(110, 231, 183, 0.65);
}
#desktopModeRoot.dm-theme-glass .dm-tray-chip.dm-tray-medicaid-orange,
#desktopModeRoot.dm-theme-arctic-teal .dm-tray-chip.dm-tray-medicaid-orange,
#desktopModeRoot.dm-theme-aurora .dm-tray-chip.dm-tray-medicaid-orange,
#desktopModeRoot.dm-theme-ember-glass .dm-tray-chip.dm-tray-medicaid-orange {
color: #fef3c7;
background: rgba(120, 53, 15, 0.92);
border-color: #fbbf24;
}
#desktopModeRoot.dm-theme-glass .dm-tray-chip.dm-tray-medicaid-red,
#desktopModeRoot.dm-theme-arctic-teal .dm-tray-chip.dm-tray-medicaid-red,
#desktopModeRoot.dm-theme-aurora .dm-tray-chip.dm-tray-medicaid-red,
#desktopModeRoot.dm-theme-ember-glass .dm-tray-chip.dm-tray-medicaid-red {
color: #fecaca;
background: rgba(69, 10, 10, 0.92);
border-color: #fca5a5;
}
#desktopModeRoot.dm-theme-hc .dm-tray-chip.dm-tray-medicaid-green,
#desktopModeRoot.dm-theme-hc .dm-tray-chip.dm-tray-medicaid-orange,
#desktopModeRoot.dm-theme-hc .dm-tray-chip.dm-tray-medicaid-red {
color: #ffff00;
background: #000;
border: 2px solid #ffff00;
}
.dm-popover.dm-medicaid-popover {
padding: 0;
width: min(22rem, calc(100vw - 24px));
max-height: min(70vh, calc(100vh - var(--dm-taskbar-h) - 24px));
display: flex;
flex-direction: column;
overflow: hidden;
}
.dm-popover.dm-medicaid-popover.hidden {
display: none;
}
.dm-medicaid-pop-h {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
padding: 12px 14px;
border-bottom: 1px solid var(--dm-dark-border);
}
.dm-medicaid-pop-title {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
}
.dm-medicaid-pop-title .material-symbols-outlined {
font-size: 18px;
color: #fbbf24;
}
.dm-medicaid-level {
flex-shrink: 0;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 999px;
border: 1px solid rgba(16, 185, 129, 0.4);
background: rgba(16, 185, 129, 0.12);
color: #6ee7b7;
}
.dm-medicaid-list {
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
max-height: min(20rem, calc(70vh - 120px));
}
.dm-medicaid-pop-f {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 14px;
border-top: 1px solid var(--dm-dark-border);
background: var(--dm-tray-bg);
}
.dm-medicaid-center-btn {
flex-shrink: 0;
border: none;
background: transparent;
color: var(--dm-brand-text, #93c5fd);
font-size: 11px;
font-weight: 700;
cursor: pointer;
padding: 0;
}
.dm-medicaid-center-btn:hover {
text-decoration: underline;
}
.dm-medicaid-center-btn.hidden {
display: none !important;
}
#desktopModeRoot.dm-theme-light .dm-tray-chip.dm-tray-hra-on,
#desktopModeRoot.dm-theme-light-blue .dm-tray-chip.dm-tray-hra-on,
#desktopModeRoot.dm-theme-light-purple .dm-tray-chip.dm-tray-hra-on,
#desktopModeRoot.dm-theme-light-green .dm-tray-chip.dm-tray-hra-on,
#desktopModeRoot.dm-theme-light-pink .dm-tray-chip.dm-tray-hra-on {
color: #047857;
background: rgba(16, 185, 129, 0.18);
border-color: rgba(5, 150, 105, 0.55);
}
#desktopModeRoot.dm-theme-light .dm-tray-chip.dm-tray-hra-off,
#desktopModeRoot.dm-theme-light-blue .dm-tray-chip.dm-tray-hra-off,
#desktopModeRoot.dm-theme-light-purple .dm-tray-chip.dm-tray-hra-off,
#desktopModeRoot.dm-theme-light-green .dm-tray-chip.dm-tray-hra-off,
#desktopModeRoot.dm-theme-light-pink .dm-tray-chip.dm-tray-hra-off {
color: #b91c1c;
background: rgba(239, 68, 68, 0.14);
border-color: rgba(220, 38, 38, 0.55);
}
.dm-michael-tray {
position: relative;
width: var(--dm-michael, 32px);
height: var(--dm-michael, 32px);
border-radius: 10px;
border: 1px solid var(--dm-dark-border);
background: rgba(255, 255, 255, 0.06);
padding: 2px;
cursor: pointer;
overflow: visible;
flex: 0 0 auto;
}
.dm-michael-tray img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
display: block;
}
.dm-michael-tray-badge {
top: -4px;
right: -4px;
min-width: 15px;
height: 15px;
line-height: 15px;
font-size: 9px;
z-index: 2;
}
.dm-michael-tray.dm-tray-has-badge {
box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.45);
}
.dm-tray-clock-btn {
border: none;
background: transparent;
padding: 4px 8px;
margin-left: 2px;
border-radius: 10px;
cursor: pointer;
color: inherit;
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: flex-end;
}
.dm-tray-clock-btn:hover,
.dm-tray-clock-btn.is-active {
background: rgba(255, 255, 255, 0.08);
}
.dm-tray-clock {
display: block;
font-variant-numeric: tabular-nums;
font-size: 12px;
font-weight: 600;
color: var(--dm-text);
line-height: 1.25;
text-align: right;
white-space: nowrap;
}
.dm-tray-clock span {
display: block;
font-size: 10px !important;
color: var(--dm-text-muted) !important;
line-height: 1.2;
}
.dm-start-panel {
position: absolute;
left: 12px;
bottom: calc(var(--dm-taskbar-h) + var(--dm-panel-gap));
width: min(780px, calc(100vw - 24px));
/* Fixed shell size (Home footprint) so section switches don’t resize the panel. */
height: min(560px, calc(100vh - var(--dm-taskbar-h) - var(--dm-panel-gap) - 20px));
max-height: min(560px, calc(100vh - var(--dm-taskbar-h) - var(--dm-panel-gap) - 20px));
z-index: 90;
display: flex;
flex-direction: column;
border-radius: 16px;
overflow: hidden;
background: var(--dm-dark-surface);
border: 1px solid var(--dm-dark-border);
box-shadow: var(--dm-shadow);
backdrop-filter: blur(20px);
animation: dm-panel-in 0.16s ease-out;
color: var(--dm-text);
}
.dm-start-body {
display: flex;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.dm-start-powerbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex: 0 0 auto;
padding: 8px 12px;
border-top: 1px solid var(--dm-dark-border);
background: var(--dm-rail-bg);
}
.dm-start-powerbar-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--dm-text-subtle);
}
.dm-start-powerbar-actions {
display: flex;
align-items: center;
gap: 6px;
}
.dm-start-power-btn {
height: 34px;
padding: 0 12px;
border-radius: 10px;
border: 1px solid var(--dm-dark-border);
background: var(--dm-dark-elevated);
color: var(--dm-text);
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
font: inherit;
font-size: 12px;
font-weight: 600;
}
.dm-start-power-btn .material-symbols-outlined {
font-size: 18px !important;
}
.dm-start-power-btn:hover {
background: var(--dm-hover);
border-color: var(--dm-accent-border);
}
.dm-start-power-btn--exit:hover {
background: rgba(239, 68, 68, 0.16);
border-color: rgba(239, 68, 68, 0.45);
color: #fca5a5;
}
.dm-start-power-btn--watchtower:hover {
background: rgba(47, 211, 196, 0.14);
border-color: rgba(47, 211, 196, 0.45);
color: #5eead4;
}
.dm-start-power-btn.is-active {
border-color: var(--dm-accent-border);
background: var(--dm-accent-soft);
color: var(--dm-active-fg);
}
.dm-settings-window.dm-window {
position: absolute;
z-index: 110;
width: min(720px, calc(100vw - 32px));
height: min(640px, calc(100vh - var(--dm-taskbar-h) - 32px));
max-width: none;
display: flex;
flex-direction: column;
overflow: hidden;
pointer-events: auto;
/* Allow normal button clicks inside settings (base .dm-window sets touch-action: none). */
touch-action: auto;
animation: dm-panel-in 0.16s ease-out;
background: var(--dm-dark-surface);
border: 1px solid var(--dm-dark-border);
color: var(--dm-text);
}
.dm-settings-window .dm-window-titlebar {
touch-action: none;
}
.dm-settings-window .dm-settings-body {
touch-action: manipulation;
pointer-events: auto;
}
.dm-settings-window.dm-window.hidden,
.dm-settings-window.dm-window.is-minimized {
display: none !important;
}
.dm-settings-window.dm-window.is-maximized {
left: 8px !important;
top: 8px !important;
right: 8px;
bottom: calc(var(--dm-taskbar-h) + 8px);
width: auto !important;
height: auto !important;
}
.dm-settings-pin-host {
display: flex;
align-items: center;
gap: 4px;
}
.dm-settings-pin-host:empty {
display: none;
}
.dm-settings-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 12px 16px 18px;
display: flex;
flex-direction: column;
gap: 14px;
background: var(--dm-dark-bg, var(--dm-dark-surface));
}
.dm-settings-intro {
margin: 0;
font-size: 12px;
line-height: 1.4;
color: var(--dm-text-muted);
}
.dm-start-home-sec-label {
margin: 10px 2px 4px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--dm-text-subtle);
}
.dm-start-home-sec-label:first-of-type {
margin-top: 2px;
}
.dm-settings-columns {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
align-items: start;
}
@media (min-width: 700px) {
.dm-settings-columns {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
}
.dm-settings-window.is-maximized .dm-settings-columns {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}
.dm-settings-col {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
}
.dm-settings-section-title {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--dm-text-subtle);
margin-bottom: 8px;
}
.dm-settings-toggle {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid var(--dm-dark-border);
background: var(--dm-dark-elevated);
cursor: pointer;
}
.dm-settings-toggle input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.dm-settings-toggle-ui {
position: relative;
width: 40px;
height: 22px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.35);
flex: 0 0 auto;
margin-top: 2px;
transition: background 0.15s ease;
}
.dm-settings-toggle-ui::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
transition: transform 0.15s ease;
}
.dm-settings-toggle input:checked + .dm-settings-toggle-ui {
background: var(--dm-accent);
}
.dm-settings-toggle input:checked + .dm-settings-toggle-ui::after {
transform: translateX(18px);
}
.dm-settings-toggle-copy {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.dm-settings-toggle-label {
font-size: 13px;
font-weight: 700;
color: var(--dm-text);
}
.dm-settings-toggle-sub {
font-size: 11px;
line-height: 1.35;
color: var(--dm-text-muted);
}
.dm-settings-section {
display: flex;
flex-direction: column;
gap: 8px;
}
.dm-settings-mini-hint {
margin: 2px 0 0;
font-size: 11px;
font-weight: 600;
color: var(--dm-text-muted);
}
.dm-settings-chip-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.dm-settings-chip-row .dm-scale-chip,
.dm-icon-size-chip,
.dm-snap-pref-chip,
.dm-fav-sort-chip {
display: inline-flex;
align-items: center;
gap: 8px;
width: auto;
flex: 1 1 auto;
min-width: 0;
justify-content: center;
padding: 8px 10px;
border-radius: 10px;
border: 1px solid var(--dm-dark-border);
background: var(--dm-dark-elevated);
color: var(--dm-text);
font: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
pointer-events: auto;
position: relative;
z-index: 2;
-webkit-user-select: none;
user-select: none;
}
.dm-settings-chip-row .dm-scale-chip:hover,
.dm-icon-size-chip:hover,
.dm-snap-pref-chip:hover,
.dm-fav-sort-chip:hover {
border-color: var(--dm-accent-border);
background: var(--dm-hover);
}
.dm-settings-chip-row .dm-scale-chip.is-on,
.dm-icon-size-chip.is-on,
.dm-snap-pref-chip.is-on,
.dm-fav-sort-chip.is-on {
border-color: var(--dm-accent);
background: var(--dm-accent-soft);
color: var(--dm-active-fg);
}
.dm-settings-action-btn {
width: 100%;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--dm-dark-border);
background: var(--dm-dark-elevated);
color: var(--dm-text);
font: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-align: left;
}
.dm-settings-action-btn:hover {
border-color: var(--dm-accent-border);
background: var(--dm-hover);
}
.dm-settings-action-btn--exit:hover {
background: rgba(239, 68, 68, 0.16);
border-color: rgba(239, 68, 68, 0.45);
color: #fca5a5;
}
.dm-settings-section--danger {
padding-top: 4px;
border-top: 1px solid var(--dm-dark-border);
}
#desktopModeRoot.dm-icons-hidden #dmDesktopIcons,
#desktopModeWallpaper.dm-icons-hidden #dmDesktopIcons,
#desktopModeRoot.dm-icons-hidden #dmEmptyHint,
#desktopModeWallpaper.dm-icons-hidden #dmEmptyHint {
display: none !important;
}
#desktopModeRoot.dm-reduce-motion .dm-start-panel,
#desktopModeRoot.dm-reduce-motion .dm-settings-window,
#desktopModeRoot.dm-reduce-motion .dm-popover,
#desktopModeRoot.dm-reduce-motion .dm-calendar-panel,
html.dm-reduce-motion #desktopModeRoot .dm-start-panel,
html.dm-reduce-motion #desktopModeRoot .dm-settings-window {
animation: none !important;
}
#desktopModeRoot.dm-theme-light .dm-start-power-btn--exit:hover,
#desktopModeRoot.dm-theme-light-blue .dm-start-power-btn--exit:hover,
#desktopModeRoot.dm-theme-light-purple .dm-start-power-btn--exit:hover,
#desktopModeRoot.dm-theme-light-green .dm-start-power-btn--exit:hover,
#desktopModeRoot.dm-theme-light-pink .dm-start-power-btn--exit:hover {
color: #b91c1c;
background: rgba(239, 68, 68, 0.12);
}
@keyframes dm-panel-in {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.dm-start-panel {
animation: none;
}
}
.dm-start-panel.hidden {
display: none;
}
#desktopModeRoot.dm-theme-light .dm-start-item,
#desktopModeRoot.dm-theme-light-blue .dm-start-item,
#desktopModeRoot.dm-theme-light-purple .dm-start-item,
#desktopModeRoot.dm-theme-light-green .dm-start-item,
#desktopModeRoot.dm-theme-light-pink .dm-start-item,
#desktopModeRoot.dm-theme-light .dm-start-pin,
#desktopModeRoot.dm-theme-light-blue .dm-start-pin,
#desktopModeRoot.dm-theme-light-purple .dm-start-pin,
#desktopModeRoot.dm-theme-light-green .dm-start-pin,
#desktopModeRoot.dm-theme-light-pink .dm-start-pin,
#desktopModeRoot.dm-theme-light .dm-start-sec-btn,
#desktopModeRoot.dm-theme-light-blue .dm-start-sec-btn,
#desktopModeRoot.dm-theme-light-purple .dm-start-sec-btn,
#desktopModeRoot.dm-theme-light-green .dm-start-sec-btn,
#desktopModeRoot.dm-theme-light-pink .dm-start-sec-btn,
#desktopModeRoot.dm-theme-light .dm-window-title,
#desktopModeRoot.dm-theme-light-blue .dm-window-title,
#desktopModeRoot.dm-theme-light-purple .dm-window-title,
#desktopModeRoot.dm-theme-light-green .dm-window-title,
#desktopModeRoot.dm-theme-light-pink .dm-window-title,
#desktopModeRoot.dm-theme-light .dm-tb-btn:not(.dm-tb-btn-start),
#desktopModeRoot.dm-theme-light-blue .dm-tb-btn:not(.dm-tb-btn-start),
#desktopModeRoot.dm-theme-light-purple .dm-tb-btn:not(.dm-tb-btn-start),
#desktopModeRoot.dm-theme-light-green .dm-tb-btn:not(.dm-tb-btn-start),
#desktopModeRoot.dm-theme-light-pink .dm-tb-btn:not(.dm-tb-btn-start),
#desktopModeRoot.dm-theme-light .dm-tray-clock,
#desktopModeRoot.dm-theme-light-blue .dm-tray-clock,
#desktopModeRoot.dm-theme-light-purple .dm-tray-clock,
#desktopModeRoot.dm-theme-light-green .dm-tray-clock,
#desktopModeRoot.dm-theme-light-pink .dm-tray-clock,
#desktopModeRoot.dm-theme-light .dm-cal-title,
#desktopModeRoot.dm-theme-light-blue .dm-cal-title,
#desktopModeRoot.dm-theme-light-purple .dm-cal-title,
#desktopModeRoot.dm-theme-light-green .dm-cal-title,
#desktopModeRoot.dm-theme-light-pink .dm-cal-title,
#desktopModeRoot.dm-theme-light .dm-cal-day,
#desktopModeRoot.dm-theme-light-blue .dm-cal-day,
#desktopModeRoot.dm-theme-light-purple .dm-cal-day,
#desktopModeRoot.dm-theme-light-green .dm-cal-day,
#desktopModeRoot.dm-theme-light-pink .dm-cal-day,
#desktopModeRoot.dm-theme-light .dm-theme-tile,
#desktopModeRoot.dm-theme-light-blue .dm-theme-tile,
#desktopModeRoot.dm-theme-light-purple .dm-theme-tile,
#desktopModeRoot.dm-theme-light-green .dm-theme-tile,
#desktopModeRoot.dm-theme-light-pink .dm-theme-tile,
#desktopModeRoot.dm-theme-light .dm-scale-chip,
#desktopModeRoot.dm-theme-light-blue .dm-scale-chip,
#desktopModeRoot.dm-theme-light-purple .dm-scale-chip,
#desktopModeRoot.dm-theme-light-green .dm-scale-chip,
#desktopModeRoot.dm-theme-light-pink .dm-scale-chip,
#desktopModeRoot.dm-theme-light .dm-icon-size-chip,
#desktopModeRoot.dm-theme-light-blue .dm-icon-size-chip,
#desktopModeRoot.dm-theme-light-purple .dm-icon-size-chip,
#desktopModeRoot.dm-theme-light-green .dm-icon-size-chip,
#desktopModeRoot.dm-theme-light-pink .dm-icon-size-chip,
#desktopModeRoot.dm-theme-light .dm-snap-pref-chip,
#desktopModeRoot.dm-theme-light-blue .dm-snap-pref-chip,
#desktopModeRoot.dm-theme-light-purple .dm-snap-pref-chip,
#desktopModeRoot.dm-theme-light-green .dm-snap-pref-chip,
#desktopModeRoot.dm-theme-light-pink .dm-snap-pref-chip,
#desktopModeRoot.dm-theme-light .dm-fav-sort-chip,
#desktopModeRoot.dm-theme-light-blue .dm-fav-sort-chip,
#desktopModeRoot.dm-theme-light-purple .dm-fav-sort-chip,
#desktopModeRoot.dm-theme-light-green .dm-fav-sort-chip,
#desktopModeRoot.dm-theme-light-pink .dm-fav-sort-chip,
#desktopModeRoot.dm-theme-light .dm-settings-action-btn,
#desktopModeRoot.dm-theme-light-blue .dm-settings-action-btn,
#desktopModeRoot.dm-theme-light-purple .dm-settings-action-btn,
#desktopModeRoot.dm-theme-light-green .dm-settings-action-btn,
#desktopModeRoot.dm-theme-light-pink .dm-settings-action-btn {
color: #0f172a;
}
#desktopModeRoot.dm-theme-light .dm-settings-action-btn--exit:hover,
#desktopModeRoot.dm-theme-light-blue .dm-settings-action-btn--exit:hover,
#desktopModeRoot.dm-theme-light-purple .dm-settings-action-btn--exit:hover,
#desktopModeRoot.dm-theme-light-green .dm-settings-action-btn--exit:hover,
#desktopModeRoot.dm-theme-light-pink .dm-settings-action-btn--exit:hover {
color: #b91c1c;
}
#desktopModeRoot.dm-theme-light .dm-tray-chip,
#desktopModeRoot.dm-theme-light-blue .dm-tray-chip,
#desktopModeRoot.dm-theme-light-purple .dm-tray-chip,
#desktopModeRoot.dm-theme-light-green .dm-tray-chip,
#desktopModeRoot.dm-theme-light-pink .dm-tray-chip,
#desktopModeRoot.dm-theme-light .dm-tb-search,
#desktopModeRoot.dm-theme-light-blue .dm-tb-search,
#desktopModeRoot.dm-theme-light-purple .dm-tb-search,
#desktopModeRoot.dm-theme-light-green .dm-tb-search,
#desktopModeRoot.dm-theme-light-pink .dm-tb-search {
color: #334155;
}
#desktopModeRoot.dm-theme-light .dm-desk-icon-label,
#desktopModeRoot.dm-theme-light-blue .dm-desk-icon-label,
#desktopModeRoot.dm-theme-light-purple .dm-desk-icon-label,
#desktopModeRoot.dm-theme-light-green .dm-desk-icon-label,
#desktopModeRoot.dm-theme-light-pink .dm-desk-icon-label {
color: #0f172a;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.75);
}
.dm-start-sections {
width: 200px;
border-right: 1px solid var(--dm-dark-border);
overflow-y: auto;
padding: 10px;
background: var(--dm-rail-bg);
}
.dm-start-sec-btn {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border-radius: 10px;
border: none;
background: transparent;
color: var(--dm-text);
font: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-align: left;
}
.dm-start-sec-btn:hover {
background: var(--dm-hover);
}
.dm-start-sec-btn.is-active {
background: var(--dm-accent-soft);
color: var(--dm-active-fg);
box-shadow: inset 0 0 0 1px var(--dm-accent-border);
}
.dm-start-items {
flex: 1;
overflow-y: auto;
padding: 10px;
}
.dm-start-items--home {
padding: 12px 14px 14px;
}
.dm-start-home {
display: flex;
flex-direction: column;
gap: 4px;
min-height: 100%;
}
.dm-start-home-heading {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--dm-text-subtle);
padding: 2px 4px 8px;
}
.dm-start-home-heading--freq {
margin-top: 14px;
padding-top: 10px;
border-top: 1px solid var(--dm-dark-border);
}
.dm-start-home-hint {
margin-left: auto;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: none;
color: var(--dm-text-subtle);
}
.dm-start-home-empty {
margin: 0;
padding: 8px 6px 12px;
font-size: 12px;
line-height: 1.45;
color: var(--dm-text-muted);
}
.dm-start-pin-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
gap: 8px;
margin-bottom: 4px;
}
.dm-start-pin {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 10px 6px 8px;
border: 1px solid transparent;
border-radius: 12px;
background: var(--dm-hover);
color: var(--dm-text);
cursor: pointer;
font: inherit;
min-height: 96px;
}
.dm-start-pin:hover {
background: var(--dm-accent-soft);
border-color: var(--dm-accent-border);
}
.dm-start-pin-tile {
width: 44px;
height: 44px;
border-radius: 12px;
display: grid;
place-items: center;
color: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.dm-start-pin-tile .material-symbols-outlined {
font-size: 24px !important;
}
.dm-start-pin-label {
font-size: 11px;
font-weight: 600;
line-height: 1.25;
text-align: center;
max-width: 100%;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
.dm-start-pin .dm-star-btn {
position: absolute;
top: 4px;
right: 4px;
opacity: 0.35;
width: 26px;
height: 26px;
}
.dm-start-pin:hover .dm-star-btn,
.dm-start-pin .dm-star-btn.is-on {
opacity: 1;
}
.dm-start-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 10px;
cursor: pointer;
color: var(--dm-text);
font-size: 13px;
}
.dm-start-item:hover {
background: var(--dm-hover);
}
.dm-start-item-icon {
width: 32px;
height: 32px;
border-radius: 8px;
display: grid;
place-items: center;
color: #fff;
flex-shrink: 0;
background: var(--dm-accent);
}
.dm-star-btn {
margin-left: auto;
border: none;
background: transparent;
color: #64748b;
cursor: pointer;
width: 28px;
height: 28px;
border-radius: 8px;
display: grid;
place-items: center;
}
.dm-star-btn:hover {
background: rgba(255, 255, 255, 0.08);
color: #fbbf24;
}
.dm-star-btn.is-on {
color: #fbbf24;
}
.dm-star-btn .material-symbols-outlined.filled,
.dm-star-btn.is-on .material-symbols-outlined {
font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
.dm-popover {
position: absolute;
right: 12px;
bottom: calc(var(--dm-taskbar-h) + var(--dm-panel-gap));
width: 280px;
z-index: 95;
border-radius: 14px;
background: var(--dm-popover-bg);
border: 1px solid var(--dm-dark-border);
padding: 12px;
box-shadow: var(--dm-shadow);
color: var(--dm-text);
}
.dm-popover.hidden {
display: none;
}
.dm-tb-links {
min-width: var(--dm-tb-btn-h, 36px);
padding: 0;
}
.dm-tb-links .material-symbols-outlined {
font-size: 20px;
color: var(--dm-brand-text, #93c5fd);
}
.dm-tb-pages .material-symbols-outlined {
color: #7dd3fc;
}
.dm-tb-links.is-active {
background: var(--dm-accent-soft);
border-color: var(--dm-accent-border);
color: var(--dm-active-fg, #fff);
}
.dm-links-hub {
position: absolute;
left: 12px;
bottom: calc(var(--dm-taskbar-h) + var(--dm-panel-gap));
width: min(760px, calc(100vw - 24px));
max-height: min(640px, calc(100vh - var(--dm-taskbar-h) - var(--dm-panel-gap) - 16px));
z-index: 95;
border-radius: 14px;
background: var(--dm-popover-bg);
border: 1px solid var(--dm-dark-border);
padding: 12px;
box-shadow: var(--dm-shadow);
color: var(--dm-text);
display: flex;
flex-direction: column;
gap: 8px;
overflow: hidden;
}
.dm-links-hub.hidden {
display: none !important;
}
.dm-links-hub-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
color: var(--dm-text);
flex-shrink: 0;
}
.dm-links-hub-title .material-symbols-outlined {
font-size: 20px;
color: var(--dm-brand-text, #93c5fd);
}
.dm-links-hub-body {
overflow: auto;
min-height: 0;
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 8px;
padding-right: 2px;
}
.dm-links-hub-sec {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--dm-text-subtle);
padding: 4px 2px 0;
}
.dm-links-hub-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
gap: 10px;
}
.dm-links-hub-pin {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 12px 8px 10px;
border-radius: 12px;
cursor: pointer;
border: 1px solid transparent;
background: var(--dm-hover);
color: var(--dm-text);
text-align: center;
min-height: 100px;
}
.dm-links-hub-pin:hover,
.dm-links-hub-pin:focus-visible {
background: var(--dm-accent-soft);
border-color: var(--dm-accent-border);
outline: none;
}
.dm-links-hub-tile {
width: 48px;
height: 48px;
border-radius: 12px;
display: grid;
place-items: center;
color: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.dm-links-hub-tile--favicon {
background: #fff !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.dm-links-hub-favicon {
width: 28px;
height: 28px;
object-fit: contain;
display: block;
}
.dm-links-hub-tile .material-symbols-outlined {
font-size: 24px;
}
.dm-links-hub-favicon-fallback.hidden {
display: none !important;
}
.dm-links-hub-label {
font-size: 12px;
line-height: 1.25;
color: var(--dm-text);
max-width: 100%;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.dm-links-hub-pin .dm-star-btn {
position: absolute;
top: 4px;
right: 4px;
}
.dm-links-hub-empty {
margin: 16px 4px;
font-size: 13px;
color: var(--dm-text-muted);
text-align: center;
}
.dm-tb-layouts {
min-width: var(--dm-tb-btn-h, 36px);
padding: 0;
}
.dm-tb-layouts .material-symbols-outlined {
font-size: 20px;
color: #c4b5fd;
}
.dm-tb-layouts.is-active {
background: var(--dm-accent-soft);
border-color: var(--dm-accent-border);
color: var(--dm-active-fg, #fff);
}
.dm-layouts-panel {
position: absolute;
left: 12px;
bottom: calc(var(--dm-taskbar-h) + var(--dm-panel-gap));
width: min(360px, calc(100vw - 24px));
max-height: min(460px, calc(100vh - var(--dm-taskbar-h) - var(--dm-panel-gap) - 16px));
z-index: 95;
border-radius: 14px;
background: var(--dm-popover-bg);
border: 1px solid var(--dm-dark-border);
padding: 12px;
box-shadow: var(--dm-shadow);
display: flex;
flex-direction: column;
gap: 8px;
overflow: hidden;
}
.dm-layouts-panel.hidden {
display: none !important;
}
.dm-layouts-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 750;
color: var(--dm-text);
}
.dm-layouts-title .material-symbols-outlined {
color: #c4b5fd;
font-size: 20px;
}
.dm-layouts-hint {
margin: 0;
font-size: 11.5px;
line-height: 1.4;
color: var(--dm-text-muted);
}
.dm-layouts-list {
flex: 1 1 auto;
min-height: 80px;
max-height: 220px;
overflow: auto;
display: flex;
flex-direction: column;
gap: 6px;
}
.dm-layouts-empty {
margin: 12px 4px;
font-size: 12.5px;
color: var(--dm-text-muted);
text-align: center;
line-height: 1.4;
}
.dm-layouts-row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
border-radius: 10px;
border: 1px solid var(--dm-dark-border);
background: rgba(255, 255, 255, 0.03);
}
.dm-layouts-row-copy {
flex: 1 1 auto;
min-width: 0;
}
.dm-layouts-row-title {
font-size: 13px;
font-weight: 700;
color: var(--dm-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dm-layouts-row-sub {
font-size: 11px;
color: var(--dm-text-muted);
margin-top: 2px;
}
.dm-layouts-row-actions {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.dm-layouts-mini-btn {
appearance: none;
border: 1px solid var(--dm-dark-border);
background: var(--dm-elevated, rgba(255, 255, 255, 0.06));
color: var(--dm-text);
border-radius: 8px;
height: 28px;
padding: 0 8px;
font: inherit;
font-size: 11px;
font-weight: 700;
cursor: pointer;
}
.dm-layouts-mini-btn:hover {
border-color: var(--dm-accent-border);
}
.dm-layouts-mini-btn--danger {
color: #fca5a5;
}
.dm-layouts-save {
display: flex;
gap: 6px;
}
/* ID + !important + inset paint: beat UA/Tailwind white inputs that left QM text unreadable */
#desktopModeRoot #dmLayoutsNameInput {
appearance: none !important;
-webkit-appearance: none !important;
flex: 1 1 auto;
min-width: 0;
height: 34px;
border-radius: 10px;
border: 1px solid var(--dm-dark-border, #243247) !important;
background: #182338 !important;
background-color: #182338 !important;
color: #f1f5f9 !important;
-webkit-text-fill-color: #f1f5f9 !important;
caret-color: #f1f5f9 !important;
padding: 0 10px;
font: inherit;
font-size: 12.5px;
color-scheme: dark;
box-shadow: inset 0 0 0 999px #182338 !important;
}
#desktopModeRoot #dmLayoutsNameInput::placeholder {
color: #94a3b8 !important;
-webkit-text-fill-color: #94a3b8 !important;
opacity: 1 !important;
}
#desktopModeRoot #dmLayoutsNameInput:focus {
outline: 2px solid var(--dm-accent, #2f81f7);
outline-offset: 1px;
border-color: var(--dm-accent-border, rgba(47, 129, 247, 0.45)) !important;
}
#desktopModeRoot #dmLayoutsNameInput:-webkit-autofill,
#desktopModeRoot #dmLayoutsNameInput:-webkit-autofill:hover,
#desktopModeRoot #dmLayoutsNameInput:-webkit-autofill:focus {
-webkit-text-fill-color: #f1f5f9 !important;
caret-color: #f1f5f9 !important;
box-shadow: inset 0 0 0 999px #182338 !important;
transition: background-color 99999s ease-out 0s;
}
#desktopModeRoot.dm-theme-light #dmLayoutsNameInput,
#desktopModeRoot.dm-theme-light-blue #dmLayoutsNameInput,
#desktopModeRoot.dm-theme-light-purple #dmLayoutsNameInput,
#desktopModeRoot.dm-theme-light-green #dmLayoutsNameInput,
#desktopModeRoot.dm-theme-light-pink #dmLayoutsNameInput {
color-scheme: light;
background: #ffffff !important;
background-color: #ffffff !important;
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
caret-color: #0f172a !important;
border-color: #cbd5e1 !important;
box-shadow: inset 0 0 0 999px #ffffff !important;
}
#desktopModeRoot.dm-theme-light #dmLayoutsNameInput::placeholder,
#desktopModeRoot.dm-theme-light-blue #dmLayoutsNameInput::placeholder,
#desktopModeRoot.dm-theme-light-purple #dmLayoutsNameInput::placeholder,
#desktopModeRoot.dm-theme-light-green #dmLayoutsNameInput::placeholder,
#desktopModeRoot.dm-theme-light-pink #dmLayoutsNameInput::placeholder {
color: #64748b !important;
-webkit-text-fill-color: #64748b !important;
}
#desktopModeRoot.dm-theme-light #dmLayoutsNameInput:-webkit-autofill,
#desktopModeRoot.dm-theme-light #dmLayoutsNameInput:-webkit-autofill:hover,
#desktopModeRoot.dm-theme-light #dmLayoutsNameInput:-webkit-autofill:focus,
#desktopModeRoot.dm-theme-light-blue #dmLayoutsNameInput:-webkit-autofill,
#desktopModeRoot.dm-theme-light-blue #dmLayoutsNameInput:-webkit-autofill:hover,
#desktopModeRoot.dm-theme-light-blue #dmLayoutsNameInput:-webkit-autofill:focus,
#desktopModeRoot.dm-theme-light-purple #dmLayoutsNameInput:-webkit-autofill,
#desktopModeRoot.dm-theme-light-purple #dmLayoutsNameInput:-webkit-autofill:hover,
#desktopModeRoot.dm-theme-light-purple #dmLayoutsNameInput:-webkit-autofill:focus,
#desktopModeRoot.dm-theme-light-green #dmLayoutsNameInput:-webkit-autofill,
#desktopModeRoot.dm-theme-light-green #dmLayoutsNameInput:-webkit-autofill:hover,
#desktopModeRoot.dm-theme-light-green #dmLayoutsNameInput:-webkit-autofill:focus,
#desktopModeRoot.dm-theme-light-pink #dmLayoutsNameInput:-webkit-autofill,
#desktopModeRoot.dm-theme-light-pink #dmLayoutsNameInput:-webkit-autofill:hover,
#desktopModeRoot.dm-theme-light-pink #dmLayoutsNameInput:-webkit-autofill:focus {
-webkit-text-fill-color: #0f172a !important;
caret-color: #0f172a !important;
box-shadow: inset 0 0 0 999px #ffffff !important;
}
.dm-layouts-save-btn {
appearance: none;
height: 34px;
padding: 0 12px;
border-radius: 10px;
border: 1px solid var(--dm-accent-border);
background: var(--dm-accent-soft);
color: var(--dm-text);
font: inherit;
font-size: 12px;
font-weight: 750;
cursor: pointer;
flex-shrink: 0;
}
.dm-layouts-status {
margin: 0;
min-height: 14px;
font-size: 11px;
color: var(--dm-text-muted);
}
.dm-popover-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--dm-text-subtle);
}
.dm-popover-hint {
font-size: 12px;
color: var(--dm-text-muted);
margin: 4px 0 10px;
line-height: 1.35;
}
.dm-settings-window .dm-theme-grid {
max-height: none;
}
.dm-settings-window .dm-wp-swatches {
max-height: none;
}
.dm-tb-center {
gap: 6px;
}
.dm-theme-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
max-height: min(360px, 50vh);
overflow-y: auto;
padding-right: 2px;
}
.dm-theme-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 8px 4px 7px;
border-radius: 12px;
border: 1px solid var(--dm-dark-border);
background: var(--dm-dark-elevated);
color: var(--dm-text);
cursor: pointer;
font: inherit;
min-width: 0;
}
.dm-theme-tile:hover {
border-color: var(--dm-accent-border);
background: var(--dm-hover);
}
.dm-theme-tile.is-on {
border-color: var(--dm-accent);
background: var(--dm-accent-soft);
box-shadow: 0 0 0 1px var(--dm-accent-border);
}
.dm-theme-tile .theme-picker-swatch,
.dm-theme-swatch {
width: 36px;
height: 36px;
border-radius: 10px;
display: block;
flex-shrink: 0;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.dm-theme-tile-label {
font-size: 10px;
font-weight: 700;
line-height: 1.2;
text-align: center;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dm-scale-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.dm-scale-chip {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--dm-dark-border);
background: var(--dm-dark-elevated);
color: var(--dm-text);
font: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-align: left;
}
.dm-scale-chip:hover {
border-color: var(--dm-accent-border);
background: var(--dm-hover);
}
.dm-scale-chip.is-on {
border-color: var(--dm-accent);
background: var(--dm-accent-soft);
color: var(--dm-active-fg);
}
.dm-scale-chip-bar {
display: block;
width: 28px;
border-radius: 4px;
background: var(--dm-accent);
opacity: 0.85;
}
.dm-scale-chip-bar--sm {
height: 8px;
}
.dm-scale-chip-bar--md {
height: 12px;
}
.dm-scale-chip-bar--lg {
height: 16px;
}
.dm-wp-swatches {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
max-height: min(360px, 50vh);
overflow-y: auto;
padding-right: 2px;
}
.dm-wp-swatch {
aspect-ratio: 1.35;
border-radius: 10px;
border: 2px solid transparent;
cursor: pointer;
overflow: hidden;
}
.dm-wp-swatch.is-on {
border-color: var(--dm-accent);
box-shadow: 0 0 0 1px var(--dm-accent-border);
}
.dm-notif-empty {
margin: 0 0 8px;
font-size: 12px;
color: var(--dm-text-muted);
}
.dm-notif-row {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 8px;
border-radius: 10px;
cursor: pointer;
color: var(--dm-text);
font-size: 13px;
border: none;
background: transparent;
width: 100%;
text-align: left;
font: inherit;
}
.dm-notif-row.hidden {
display: none !important;
}
.dm-notif-row--alert {
border: 1px solid rgba(56, 189, 248, 0.45);
background: rgba(56, 189, 248, 0.1);
}
.dm-notif-row--setup {
border: 1px solid rgba(245, 158, 11, 0.5);
background: rgba(245, 158, 11, 0.14);
}
.dm-notif-row--setup:hover {
background: rgba(245, 158, 11, 0.22);
}
.dm-notif-row:hover {
background: var(--dm-hover);
}
.dm-notif-row .label {
font-weight: 600;
}
.dm-notif-row .sub {
font-size: 12px;
color: var(--dm-text-muted);
margin-top: 2px;
}
.dm-calendar-panel {
position: absolute;
right: 12px;
bottom: calc(var(--dm-taskbar-h) + var(--dm-panel-gap));
width: 280px;
z-index: 96;
border-radius: 14px;
background: var(--dm-popover-bg);
border: 1px solid var(--dm-dark-border);
padding: 12px;
box-shadow: var(--dm-shadow);
color: var(--dm-text);
}
.dm-calendar-panel.dm-calendar-panel--timeoff {
width: 320px;
max-height: min(72vh, 560px);
display: flex;
flex-direction: column;
overflow: hidden;
}
.dm-calendar-panel.hidden {
display: none;
}
.dm-cal-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
flex-shrink: 0;
}
.dm-cal-title {
font-size: 13px;
font-weight: 700;
color: var(--dm-text);
}
.dm-cal-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
margin-bottom: 4px;
text-align: center;
font-size: 10px;
font-weight: 700;
color: var(--dm-text-subtle);
flex-shrink: 0;
}
.dm-cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
flex-shrink: 0;
}
.dm-cal-day {
aspect-ratio: 1;
border: none;
border-radius: 8px;
background: transparent;
color: var(--dm-text);
font: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 2px 0 3px;
min-height: 0;
}
.dm-cal-day-num {
line-height: 1;
}
.dm-cal-day-dots {
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
min-height: 8px;
}
.dm-cal-day-count {
font-size: 8px;
font-weight: 800;
line-height: 1;
opacity: 0.85;
margin-left: 1px;
}
.dm-cal-timeoff-dot {
width: 5px;
height: 5px;
border-radius: 999px;
flex: 0 0 auto;
background: #94a3b8;
}
.dm-cal-timeoff-dot--pto {
background: #3b82f6;
}
.dm-cal-timeoff-dot--ppto {
background: #22c55e;
}
.dm-cal-timeoff-dot--fmla {
background: #a855f7;
}
.dm-cal-timeoff-dot--other {
background: #94a3b8;
}
.dm-cal-day:hover {
background: var(--dm-hover);
}
.dm-cal-day.muted {
color: var(--dm-text-subtle);
}
.dm-cal-day.today {
background: var(--dm-accent-soft);
color: var(--dm-brand-text);
box-shadow: inset 0 0 0 1px var(--dm-accent-border);
}
.dm-cal-day.selected {
background: var(--dm-btn-bg, var(--dm-accent));
color: var(--dm-btn-fg, #fff);
}
.dm-cal-day.selected .dm-cal-timeoff-dot {
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.dm-cal-timeoff-status {
margin: 8px 0 0;
font-size: 11px;
color: var(--dm-text-muted);
flex-shrink: 0;
}
.dm-cal-timeoff-detail {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--dm-dark-border);
min-height: 0;
flex: 1 1 auto;
overflow: auto;
}
.dm-cal-timeoff-detail.hidden {
display: none;
}
.dm-cal-timeoff-detail-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.dm-cal-timeoff-detail-title {
font-size: 12px;
font-weight: 750;
color: var(--dm-text);
}
.dm-cal-timeoff-legend {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 650;
color: var(--dm-text-muted);
white-space: nowrap;
}
.dm-cal-timeoff-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.dm-cal-timeoff-row {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.dm-cal-timeoff-meta {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.dm-cal-timeoff-name {
font-size: 12px;
font-weight: 650;
color: var(--dm-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dm-cal-timeoff-dept {
font-size: 10px;
color: var(--dm-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dm-cal-timeoff-type {
flex: 0 0 auto;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.02em;
padding: 2px 6px;
border-radius: 999px;
border: 1px solid transparent;
}
.dm-cal-timeoff-type--pto {
color: #93c5fd;
background: rgba(59, 130, 246, 0.18);
border-color: rgba(59, 130, 246, 0.35);
}
.dm-cal-timeoff-type--ppto {
color: #86efac;
background: rgba(34, 197, 94, 0.16);
border-color: rgba(34, 197, 94, 0.35);
}
.dm-cal-timeoff-type--fmla {
color: #d8b4fe;
background: rgba(168, 85, 247, 0.16);
border-color: rgba(168, 85, 247, 0.35);
}
.dm-cal-timeoff-type--other {
color: var(--dm-text-muted);
background: rgba(148, 163, 184, 0.14);
border-color: rgba(148, 163, 184, 0.3);
}
.dm-cal-timeoff-empty {
margin: 0;
font-size: 11px;
color: var(--dm-text-muted);
}
.dm-cal-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--dm-dark-border);
flex-shrink: 0;
}
.dm-cal-foot-actions {
display: flex;
align-items: center;
gap: 6px;
}
.dm-cal-open-mc {
appearance: none;
height: 30px;
padding: 0 10px;
border-radius: 10px;
border: 1px solid var(--dm-dark-border);
background: var(--dm-hover);
color: var(--dm-text);
font: inherit;
font-size: 11px;
font-weight: 650;
cursor: pointer;
}
.dm-cal-open-mc:hover {
background: var(--dm-accent-soft);
border-color: var(--dm-accent-border);
}
.dm-cal-open-mc.hidden {
display: none;
}
.dm-cal-live-time {
font-size: 12px;
font-weight: 600;
color: var(--dm-brand-text);
font-variant-numeric: tabular-nums;
}
.dm-cal-nav {
width: 30px;
height: 30px;
border: none;
border-radius: 8px;
background: transparent;
color: var(--dm-text-muted);
cursor: pointer;
display: grid;
place-items: center;
}
.dm-cal-nav:hover {
background: var(--dm-hover);
color: var(--dm-text);
}
.dm-win-ctrl {
width: 30px;
height: 30px;
border: none;
border-radius: 8px;
background: transparent;
color: var(--dm-text-muted);
cursor: pointer;
display: grid;
place-items: center;
}
.dm-win-ctrl:hover {
background: var(--dm-hover);
color: var(--dm-text);
}
@media (max-width: 720px) {
.dm-start-panel {
height: min(70vh, calc(100vh - var(--dm-taskbar-h) - var(--dm-panel-gap) - 12px));
max-height: min(70vh, calc(100vh - var(--dm-taskbar-h) - var(--dm-panel-gap) - 12px));
}
.dm-start-body {
flex-direction: column;
}
.dm-start-sections {
width: 100%;
max-height: 140px;
border-right: none;
border-bottom: 1px solid var(--dm-dark-border);
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 4px;
}
.dm-start-sec-btn {
width: auto;
white-space: nowrap;
}
.dm-tray-chip span:not(.material-symbols-outlined) {
display: none;
}
/* Keep HRA On/Off label visible — status is the point of this chip */
.dm-tray-chip.dm-tray-hra-status .dm-tray-hra-label {
display: inline !important;
}
.dm-tray-chip.dm-tray-medicaid .dm-tray-medicaid-label {
display: inline !important;
}
.dm-tray-chip.dm-tray-medicaid .dm-tray-medicaid-dot:not(.hidden) {
display: block !important;
}
.dm-tray-chip.dm-tray-medicaid .dm-tray-badge:not(.hidden) {
display: flex !important;
}
}