/* ============================================================ CHIPGAZ — MODERN THEME Applied via data-design="modern" on Design language (deliberately different from Классика): Классика : soft, warm, rounded, shadow-driven depth, orange Модерн : sharp, cool, line-driven structure, flat fills, indigo Structural signatures of Модерн (not just colour): - near-square geometry (3-8px radii) instead of 8-20px pills - depth from solid 1-2px rules, not from shadows - active state = indicator bar (under / above / left), not a filled pill - uppercase letter-spaced micro-labels, tabular numerals for time - schedule is a true data grid with a dark header band - squares where Классика uses circles (FAB, theme toggle, dots, badges) ============================================================ */ /* ============================================================ 1. TOKENS — LIGHT ============================================================ */ [data-design="modern"] { /* Page is a clearly cool grey so white panels read as panels. (The old #f8f9fc against #ffffff cards was a 2% step — invisible.) */ --bg-primary: #e7ecf4; --bg-secondary: #ffffff; --bg-card: #ffffff; --bg-elevated: #f2f5fa; --bg-hover: #e2e8f3; --text-primary: #101828; --text-secondary: #475467; --text-muted: #737f96; --accent: #4f46e5; --accent-hover: #4338ca; --accent-glow: rgba(79, 70, 229, 0.18); --accent-soft: #e9e8fd; --danger: #d92d20; --danger-hover: #b42318; --success: #067647; --success-hover: #05603a; /* style.css needs these for accent/danger used as TEXT on a light surface. Модерн's indigo (6.3:1) and red (4.8:1) already pass on white, so they map straight through — but they must be declared here, or Модерн would inherit Классика's amber. Resolved per element, so dark inherits too. */ --accent-text: var(--accent); --danger-text: var(--danger); /* Solid, visible lines — the whole theme hangs off these */ --border: #cfd7e6; --border-light: #aeb9cf; /* Flat by design: hairlines instead of drop shadows. Only overlays (modals, dropdowns, drag) get real elevation. */ --shadow-sm: none; --shadow-md: none; --shadow-lg: 0 16px 40px rgba(16, 24, 40, 0.18); --shadow-glow: none; --header-bg: #ffffff; --header-text: #101828; --header-border: #c5cee0; --modal-overlay: rgba(16, 24, 40, 0.55); --input-bg: #ffffff; --scrollbar-thumb: #b3bed3; --scrollbar-hover: #94a2bd; /* Sharp geometry */ --radius-sm: 3px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 8px; --transition: 0.14s ease; /* Modern-only tokens */ --mo-grid-bg: #ffffff; --mo-grid-zebra: #f6f8fc; --mo-thead-bg: #1e2537; --mo-thead-text: #b9c3d8; --mo-thead-border: #2c3549; --mo-inprogress: #0284c7; --mo-rule: 1px solid var(--border); --mo-rule-strong: 2px solid var(--border-light); } /* ============================================================ 2. TOKENS — DARK ============================================================ */ [data-design="modern"][data-theme="dark"] { --bg-primary: #090c15; --bg-secondary: #10141f; --bg-card: #151a28; --bg-elevated: #1c2233; --bg-hover: #262e44; --text-primary: #eef1f8; --text-secondary: #a4aec4; --text-muted: #737f99; --accent: #8b8cf9; --accent-hover: #a5a6fb; --accent-glow: rgba(139, 140, 249, 0.22); --accent-soft: #1f2240; --danger: #f97066; --danger-hover: #fda29b; --success: #47cd89; --success-hover: #6ce9a6; --border: #2a3247; --border-light: #3d4863; --shadow-sm: none; --shadow-md: none; --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.7); --shadow-glow: none; --header-bg: #0c1019; --header-text: #eef1f8; --header-border: #262e42; --modal-overlay: rgba(0, 0, 0, 0.75); --input-bg: #0c1019; --scrollbar-thumb: #2f3950; --scrollbar-hover: #43506e; --mo-grid-bg: #151a28; --mo-grid-zebra: #191f2f; --mo-thead-bg: #050810; --mo-thead-text: #8d99b3; --mo-thead-border: #1e2637; --mo-inprogress: #38bdf8; } /* ============================================================ 3. HEADER — flat bar, accent block wordmark, underline tabs ============================================================ */ [data-design="modern"] .app-header { background: var(--header-bg); border-bottom: 2px solid var(--header-border); box-shadow: none; height: 54px; padding: 0 14px; } /* Классика draws a glowing gradient hairline here — Модерн does not. */ [data-design="modern"] .app-header::after { display: none; } [data-design="modern"] .app-header h1 { /* undo the classic gradient-clipped text */ background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; color: var(--text-primary); font-size: 17px; font-weight: 700; letter-spacing: 3px; display: inline-flex; align-items: center; } /* Solid accent block instead of a gradient — a flag, not a glow */ [data-design="modern"] .app-header h1::before { content: ''; display: inline-block; width: 4px; height: 16px; background: var(--accent); margin-right: 9px; -webkit-text-fill-color: initial; } [data-design="modern"] .header-nav { gap: 2px; align-self: stretch; align-items: stretch; } [data-design="modern"] .header-nav button:not(.theme-toggle) { color: var(--text-secondary); background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; padding: 0 13px; margin-bottom: -2px; transition: color var(--transition), border-color var(--transition); } [data-design="modern"] .header-nav button:not(.theme-toggle):hover { color: var(--text-primary); background: none; border-bottom-color: var(--border-light); } /* Active = underline bar. Классика fills a soft pill. */ [data-design="modern"] .header-nav button:not(.theme-toggle).active { color: var(--accent); background: none; border-bottom-color: var(--accent); font-weight: 700; } /* ============================================================ 4. THEME TOGGLE — square, not a circle ============================================================ */ [data-design="modern"] .theme-toggle { border: 1px solid var(--border-light); border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--bg-elevated); width: 32px; height: 32px; /* the ☀/☾ glyphs are hairline-thin — they need size to register */ font-size: 17px; align-self: center; } [data-design="modern"] .theme-toggle .icon-sun, [data-design="modern"] .theme-toggle .icon-moon { color: inherit; -webkit-text-fill-color: currentColor; } [data-design="modern"] .theme-toggle:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } /* ============================================================ 5. WEEK NAV — flat segmented toolbar ============================================================ */ [data-design="modern"] .week-nav { background: var(--bg-secondary); border-bottom: var(--mo-rule); padding: 9px 14px; gap: 6px; } [data-design="modern"] .week-nav button { background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-primary); border-radius: var(--radius-sm); width: 32px; height: 32px; font-size: 15px; transition: all var(--transition); } [data-design="modern"] .week-nav button:hover { background: var(--accent); border-color: var(--accent); color: #fff; } [data-design="modern"] .week-nav .week-label { font-size: 13px; font-weight: 700; color: var(--text-primary); letter-spacing: 0.3px; font-variant-numeric: tabular-nums; padding: 0 4px; } /* Primary toolbar action: solid fill, no gradient, no lift */ [data-design="modern"] .btn-today { background: var(--accent) !important; color: #fff !important; border: 1px solid var(--accent) !important; border-radius: var(--radius-sm) !important; height: 32px !important; line-height: 30px !important; padding: 0 15px !important; font-size: 11px !important; font-weight: 700 !important; width: auto !important; letter-spacing: 1px; text-transform: uppercase; box-shadow: none !important; } [data-design="modern"] .btn-today:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; box-shadow: none !important; transform: none; } [data-design="modern"] .btn-filter-today, [data-design="modern"] .btn-refresh, [data-design="modern"] .btn-search-toggle, [data-design="modern"] .btn-export, [data-design="modern"] .btn-worker-filter, [data-design="modern"] .btn-dayview-toggle { background: var(--bg-elevated) !important; color: var(--text-secondary) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; height: 32px !important; width: auto !important; padding: 0 11px !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.4px; transition: all var(--transition) !important; } [data-design="modern"] .btn-filter-today:hover, [data-design="modern"] .btn-refresh:hover, [data-design="modern"] .btn-search-toggle:hover, [data-design="modern"] .btn-export:hover, [data-design="modern"] .btn-worker-filter:hover, [data-design="modern"] .btn-dayview-toggle:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; border-color: var(--border-light) !important; } /* Toggled-on state = solid fill, unmistakable */ [data-design="modern"] .btn-filter-today.active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; } [data-design="modern"] .btn-worker-filter.active, [data-design="modern"] .btn-dayview-toggle.active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; font-weight: 700 !important; } /* ============================================================ 6. TOTALS — uppercase micro-legend with square swatches ============================================================ */ [data-design="modern"] .schedule-totals { background: var(--bg-secondary); border-bottom: var(--mo-rule); padding: 8px 14px; gap: 18px; font-size: 11px; } [data-design="modern"] .total-item { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; } [data-design="modern"] .total-item b { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-primary); } /* Square legend swatch before each counter */ [data-design="modern"] .total-waiting::before, [data-design="modern"] .total-inprogress::before, [data-design="modern"] .total-done::before { content: ''; width: 8px; height: 8px; flex-shrink: 0; } [data-design="modern"] .total-waiting::before { background: var(--accent); } [data-design="modern"] .total-inprogress::before { background: var(--mo-inprogress); } [data-design="modern"] .total-done::before { background: var(--success); } [data-design="modern"] .total-waiting b { color: var(--accent); } [data-design="modern"] .total-inprogress b { color: var(--mo-inprogress); } [data-design="modern"] .total-done b { color: var(--success); } /* ============================================================ 7. SCHEDULE — a true data grid ============================================================ */ [data-design="modern"] .schedule-container { padding: 14px; } [data-design="modern"] .schedule-table { border-spacing: 0; border-collapse: collapse; border-radius: 0; overflow: hidden; box-shadow: none; border: var(--mo-rule-strong); } /* Dark header band in BOTH light and dark — the grid's signature */ [data-design="modern"] .schedule-table thead th { background: var(--mo-thead-bg); color: var(--mo-thead-text); font-size: 10px; font-weight: 700; padding: 10px 6px; text-transform: uppercase; letter-spacing: 1.2px; border-bottom: none; border-right: 1px solid var(--mo-thead-border); border-radius: 0 !important; } [data-design="modern"] .schedule-table thead th:last-child { border-right: none; } [data-design="modern"] .schedule-table thead th.today { background: var(--accent); color: #fff; font-weight: 800; border-bottom: none; } [data-design="modern"] .schedule-table th, [data-design="modern"] .schedule-table td { border-color: var(--border); } /* Worker column: left colour bar keyed off the existing --wc custom prop */ [data-design="modern"] .schedule-table .worker-name-cell { background: var(--bg-elevated); font-weight: 600; font-size: 13px; border-right: var(--mo-rule-strong); border-left: 3px solid var(--wc, var(--accent)); } [data-design="modern"] .worker-name-cell .worker-dot, [data-design="modern"] .worker-item .worker-dot { border-radius: 2px; box-shadow: none; } [data-design="modern"] .schedule-cell { background: var(--mo-grid-bg); transition: background var(--transition); } /* Классика bands the day COLUMNS (style.css `td.schedule-cell:nth-child(even)`, specificity 0-3-1). Модерн bands the worker ROWS instead — one row is one person, so that is the meaningful axis. Turn the column banding off first; these selectors must out-specify the classic rule. */ @media (min-width: 769px) { [data-design="modern"] .schedule-table td.schedule-cell:nth-child(even) { background: var(--mo-grid-bg); } [data-design="modern"] .schedule-table tbody tr:nth-child(even) td.schedule-cell { background: var(--mo-grid-zebra); } } [data-design="modern"] .schedule-table tbody tr:nth-child(even) .schedule-cell { background: var(--mo-grid-zebra); } [data-design="modern"] .schedule-cell:hover, [data-design="modern"] .schedule-table tbody tr:nth-child(even) .schedule-cell:hover, [data-design="modern"] .schedule-table tbody tr:nth-child(even) td.schedule-cell:hover, [data-design="modern"] .schedule-table td.schedule-cell:nth-child(even):hover { background: var(--bg-hover); } /* ============================================================ 8. APPOINTMENT CARDS — flat blocks, thick status bar ============================================================ */ [data-design="modern"] .apt-card { border-radius: var(--radius-sm); padding: 7px 28px 7px 9px; margin-bottom: 4px; font-size: 13px; box-shadow: none; border: none; transition: filter var(--transition), box-shadow var(--transition); } /* No glossy sheen in Модерн — flat fills only */ [data-design="modern"] .apt-card::before { display: none; } [data-design="modern"] .apt-card:hover { transform: none; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55); filter: brightness(1.04); } /* Time gets a rule under it — editorial, not decorative */ [data-design="modern"] .apt-card .apt-time { font-weight: 700; font-size: 11px; letter-spacing: 0.5px; font-variant-numeric: tabular-nums; opacity: 1; padding-bottom: 3px; margin-bottom: 3px; border-bottom: 1px solid rgba(255, 255, 255, 0.28); } [data-design="modern"] .apt-card .apt-service, [data-design="modern"] .apt-card .apt-note { opacity: 0.9; } [data-design="modern"] .apt-card .apt-note { max-width: 200px; } /* --- status: waiting --- */ [data-design="modern"] .apt-card.status-waiting { border-left: 4px solid rgba(255, 255, 255, 0.55); } /* --- status: in progress --- */ [data-design="modern"] .apt-card.status-inprogress { border-left: 4px solid var(--mo-inprogress); animation: modernBarPulse 2s ease-in-out infinite; } /* Flat theme: pulse the bar, never a glow halo */ @keyframes modernBarPulse { 0%, 100% { border-left-color: var(--mo-inprogress); } 50% { border-left-color: #e0f2fe; } } /* --- status: done --- Классика fades the card (opacity .55 + desaturate), which on a light background leaves white text on a near-white block — unreadable. Модерн instead turns it into a resolved, outlined "ledger" row. */ [data-design="modern"] .apt-card.status-done { background: var(--bg-elevated) !important; opacity: 1; filter: none; color: var(--text-secondary); border: 1px solid var(--border); border-left: 4px solid var(--success); } [data-design="modern"] .apt-card.status-done .apt-time { color: var(--text-secondary); border-bottom-color: var(--border); } [data-design="modern"] .apt-card.status-done .apt-client { color: var(--text-primary); } [data-design="modern"] .apt-card.status-done .apt-service, [data-design="modern"] .apt-card.status-done .apt-note { color: var(--text-muted); opacity: 1; } [data-design="modern"] .apt-card.status-done .apt-phone a { color: var(--text-secondary); } [data-design="modern"] .apt-card.status-done::after { color: var(--success); font-weight: 700; } [data-design="modern"] .apt-card.status-done:hover { box-shadow: none; filter: none; border-color: var(--border-light); border-left-color: var(--success); } /* ============================================================ 9. CELL CONTROLS — squares where Классика uses circles ============================================================ */ [data-design="modern"] .btn-apt-done { width: 20px; height: 20px; border-radius: 2px; border: 2px solid rgba(255, 255, 255, 0.7); background: rgba(0, 0, 0, 0.18); font-size: 11px; line-height: 16px; } [data-design="modern"] .btn-apt-done:hover { background: var(--success); border-color: #fff; border-radius: 2px; } [data-design="modern"] .apt-add-btn { border-radius: var(--radius-sm); border: 1px dashed var(--border-light); color: var(--text-muted); height: 26px; line-height: 24px; font-size: 14px; opacity: 0.7; transition: all var(--transition); } [data-design="modern"] .apt-add-btn:hover { opacity: 1; color: #fff; border-style: solid; border-color: var(--accent); background: var(--accent); } [data-design="modern"] .apt-count-badge { background: var(--accent); border-radius: 2px; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; width: 18px; height: 18px; line-height: 18px; top: 3px; right: 3px; } [data-design="modern"] .btn-set-dayoff { border-radius: 2px; border-color: var(--border-light); } [data-design="modern"] .btn-remove-dayoff { border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } /* ============================================================ 10. DAY OFF — legible hatch, no faded label ============================================================ */ [data-design="modern"] .schedule-cell.dayoff { background: repeating-linear-gradient( 45deg, var(--bg-elevated), var(--bg-elevated) 6px, var(--bg-hover) 6px, var(--bg-hover) 12px ) !important; } [data-design="modern"] .dayoff-label { color: var(--text-secondary); font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; opacity: 1; } /* ============================================================ 11. BOTTOM NAV — active marked by a bar above the item ============================================================ */ [data-design="modern"] #bottom-nav { background: var(--header-bg); border-top: 2px solid var(--header-border); box-shadow: none; height: 58px; } [data-design="modern"] #bottom-nav::before { display: none; } [data-design="modern"] #bottom-nav button { position: relative; color: var(--text-muted); font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; transition: color var(--transition); } [data-design="modern"] #bottom-nav button.active { color: var(--accent); } [data-design="modern"] #bottom-nav button.active::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); } [data-design="modern"] #bottom-nav button:hover { color: var(--text-primary); } [data-design="modern"] #bottom-nav button .nav-icon { font-size: 19px; } /* ============================================================ 12. FAB — square tile, not a circle ============================================================ */ [data-design="modern"] .fab { background: var(--accent); box-shadow: 0 6px 20px rgba(16, 24, 40, 0.28); border-radius: var(--radius-md); width: 48px; height: 48px; font-size: 24px; line-height: 46px; font-weight: 300; } [data-design="modern"] .fab:hover { background: var(--accent-hover); box-shadow: 0 8px 26px rgba(16, 24, 40, 0.34); transform: none; } /* ============================================================ 13. MODALS — square sheet with an accent rule on top ============================================================ */ [data-design="modern"] .modal-overlay { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } [data-design="modern"] .modal-content { background: var(--bg-secondary); border: 1px solid var(--border-light); border-top: 3px solid var(--accent); border-radius: var(--radius-md); padding: 22px 22px; box-shadow: var(--shadow-lg); } [data-design="modern"] .modal-content h2 { color: var(--text-primary); font-size: 14px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding-bottom: 10px; border-bottom: var(--mo-rule); } [data-design="modern"] .modal-header { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-secondary); } [data-design="modern"] .modal-pin-content { border: 1px solid var(--border-light); border-top: 3px solid var(--accent); border-radius: var(--radius-md); } /* Классика puts a soft gradient wisp here; Модерн already has a solid rule */ [data-design="modern"] .modal-pin-content::before { display: none; } [data-design="modern"] .modal-pin-content input { border-radius: var(--radius-sm); letter-spacing: 6px; } [data-design="modern"] .modal-pin-content input:focus { box-shadow: 0 0 0 3px var(--accent-glow); } [data-design="modern"] .pin-error { background: var(--accent-soft); border-left: 3px solid var(--danger); color: var(--danger); font-size: 13px; padding: 8px 10px; text-align: left; } /* ============================================================ 14. FORMS — square fields, hard focus ring ============================================================ */ [data-design="modern"] .form-group label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; } [data-design="modern"] .form-group input:not([type="checkbox"]), [data-design="modern"] .form-group select, [data-design="modern"] .form-group textarea, [data-design="modern"] .add-worker-form input, [data-design="modern"] .search-bar input { padding: 9px 11px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); font-size: 14px; background: var(--input-bg); color: var(--text-primary); transition: border-color var(--transition), box-shadow var(--transition); } [data-design="modern"] .form-group input:not([type="checkbox"]):focus, [data-design="modern"] .form-group select:focus, [data-design="modern"] .form-group textarea:focus, [data-design="modern"] .add-worker-form input:focus, [data-design="modern"] .search-bar input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); background: var(--input-bg); } [data-design="modern"] .backup-info { font-size: 12px; color: var(--text-muted); } /* ============================================================ 15. BUTTONS — flat fills, ghost secondary, no lift ============================================================ */ [data-design="modern"] .btn { border-radius: var(--radius-sm); font-weight: 600; font-size: 13px; letter-spacing: 0.5px; transition: all var(--transition); } [data-design="modern"] .btn-primary { background: var(--accent); color: #fff; border: 1px solid var(--accent); } [data-design="modern"] .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: none; transform: none; } /* Ghost, outlined — Классика's secondary is a filled grey block */ [data-design="modern"] .btn-secondary { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-light); } [data-design="modern"] .btn-secondary:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--text-muted); } [data-design="modern"] .btn-danger { background: var(--danger); color: #fff; border: 1px solid var(--danger); } [data-design="modern"] .btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); box-shadow: none; } [data-design="modern"] .btn-success { background: var(--success); color: #fff; border: 1px solid var(--success); } [data-design="modern"] .btn-success:hover { background: var(--success-hover); border-color: var(--success-hover); } /* ============================================================ 16. SETTINGS — section titles marked by a left rule ============================================================ */ [data-design="modern"] .settings-section { padding: 18px 16px; } [data-design="modern"] .settings-section h2 { color: var(--text-primary); font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; border-bottom: var(--mo-rule-strong); border-left: 3px solid var(--accent); padding: 0 0 8px 10px; margin-bottom: 14px; } [data-design="modern"] .collapsible-header:hover { opacity: 1; color: var(--accent); } [data-design="modern"] .collapse-arrow { color: var(--accent); font-size: 10px; } [data-design="modern"] .worker-item { background: var(--bg-card); border: var(--mo-rule); border-left: 3px solid var(--border-light); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 6px; transition: all var(--transition); } [data-design="modern"] .worker-item:hover { border-color: var(--border-light); border-left-color: var(--accent); background: var(--bg-elevated); box-shadow: none; } [data-design="modern"] .worker-item .worker-actions button { border-radius: var(--radius-sm); border: 1px solid var(--border-light); padding: 5px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; transition: all var(--transition); } [data-design="modern"] .worker-item .worker-actions .btn-edit:hover { background: var(--accent); color: #fff; border-color: var(--accent); } [data-design="modern"] .worker-item .worker-actions .btn-delete:hover { background: var(--danger); color: #fff; border-color: var(--danger); } [data-design="modern"] .worker-select-item { background: var(--bg-card); border: var(--mo-rule); border-left: 3px solid var(--border-light); border-radius: var(--radius-sm); padding: 12px 14px; transition: all var(--transition); } [data-design="modern"] .worker-select-item:hover { background: var(--bg-elevated); border-color: var(--border-light); border-left-color: var(--accent); } [data-design="modern"] .worker-select-item.active { background: var(--accent-soft); border-color: var(--accent); border-left-color: var(--accent); color: var(--accent); } /* ============================================================ 17. SEARCH ============================================================ */ [data-design="modern"] .search-bar { background: var(--bg-secondary); border-bottom: var(--mo-rule); padding: 9px 14px; } [data-design="modern"] .search-results { background: var(--bg-secondary); border-bottom: var(--mo-rule-strong); } [data-design="modern"] .search-result-item { border-bottom: var(--mo-rule); border-left: 3px solid transparent; } [data-design="modern"] .search-result-item:hover { background: var(--bg-elevated); border-left-color: var(--accent); } [data-design="modern"] .search-time { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; } [data-design="modern"] .search-date, [data-design="modern"] .search-svc { color: var(--text-muted); } [data-design="modern"] .search-empty, [data-design="modern"] .waitlist-empty, [data-design="modern"] .empty-state { color: var(--text-muted); } [data-design="modern"] .empty-state .icon { opacity: 0.35; } /* ============================================================ 18. WAITLIST ============================================================ */ [data-design="modern"] .waitlist-panel { background: var(--bg-secondary); border-bottom: var(--mo-rule-strong); padding: 11px 14px; } [data-design="modern"] .waitlist-header h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); } [data-design="modern"] .waitlist-card { background: var(--bg-card); border: var(--mo-rule); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 9px 11px; transition: all var(--transition); } [data-design="modern"] .waitlist-card:hover { box-shadow: none; background: var(--bg-elevated); border-color: var(--border-light); border-left-color: var(--accent); } [data-design="modern"] .waitlist-card .wl-service { color: var(--accent); font-weight: 600; } /* ============================================================ 19. DAY VIEW ============================================================ */ [data-design="modern"] .dayview-nav { background: var(--bg-secondary); border-bottom: var(--mo-rule); } [data-design="modern"] .dayview-nav button { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); transition: all var(--transition); } [data-design="modern"] .dayview-nav button:hover { background: var(--accent); border-color: var(--accent); color: #fff; } [data-design="modern"] .dayview-nav .dv-today { background: var(--accent); border: 1px solid var(--accent); color: #fff; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.8px; font-size: 11px; } [data-design="modern"] .dayview-nav .dv-today:hover { background: var(--accent-hover); border-color: var(--accent-hover); } [data-design="modern"] .dv-date-label { font-variant-numeric: tabular-nums; letter-spacing: 0.3px; } [data-design="modern"] .dayview-table th { background: var(--mo-thead-bg); color: var(--mo-thead-text); border-color: var(--mo-thead-border); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; } [data-design="modern"] .dayview-table th:first-child { background: var(--mo-thead-bg); } [data-design="modern"] .dayview-table td { border-color: var(--border); } [data-design="modern"] .dayview-table td:first-child { background: var(--bg-elevated); font-variant-numeric: tabular-nums; } [data-design="modern"] .dayview-apt { border-radius: 2px; box-shadow: none; border-left: 3px solid rgba(255, 255, 255, 0.55); } [data-design="modern"] .dayview-now-line::before { border-radius: 0; } /* ============================================================ 20. TRANSFER / HISTORY / DROPDOWN ============================================================ */ [data-design="modern"] .transfer-section { background: var(--bg-elevated); border: var(--mo-rule); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); } [data-design="modern"] .client-history label { font-size: 10px; letter-spacing: 1px; color: var(--text-muted); } [data-design="modern"] .history-item { background: var(--bg-elevated); border-left: 3px solid var(--border-light); border-radius: 0; } [data-design="modern"] .history-date { font-variant-numeric: tabular-nums; } [data-design="modern"] .history-status.status-inprogress { color: var(--mo-inprogress); } [data-design="modern"] .service-dropdown { background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: 0 0 var(--radius-sm) var(--radius-sm); box-shadow: var(--shadow-lg); } [data-design="modern"] .service-dropdown-item { border-left: 3px solid transparent; } [data-design="modern"] .service-dropdown-item:hover { background: var(--bg-elevated); color: var(--accent); border-left-color: var(--accent); } /* ============================================================ 21. DRAG / LOADING / SCROLLBAR ============================================================ */ [data-design="modern"] .apt-card.drag-clone { box-shadow: 0 12px 32px rgba(16, 24, 40, 0.35); outline: 2px solid var(--accent); outline-offset: 1px; border-radius: var(--radius-sm); } [data-design="modern"] .schedule-cell.drag-over { background: var(--accent-soft) !important; box-shadow: inset 0 0 0 2px var(--accent) !important; } [data-design="modern"] #loading-overlay { background: rgba(16, 24, 40, 0.35); } [data-design="modern"] .loading-spinner { border: 3px solid var(--border-light); border-top-color: var(--accent); width: 40px; height: 40px; } [data-design="modern"] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 0; } [data-design="modern"] ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); } /* ============================================================ 22. DARK — neutralise classic's hardcoded dark values ============================================================ */ [data-design="modern"][data-theme="dark"] .schedule-table th, [data-design="modern"][data-theme="dark"] .schedule-table td { border-color: var(--border); } [data-design="modern"][data-theme="dark"] .schedule-cell { background: var(--mo-grid-bg); } [data-design="modern"][data-theme="dark"] .schedule-table tbody tr:nth-child(even) .schedule-cell { background: var(--mo-grid-zebra); } [data-design="modern"][data-theme="dark"] .schedule-cell:hover, [data-design="modern"][data-theme="dark"] .schedule-table tbody tr:nth-child(even) .schedule-cell:hover { background: var(--bg-hover); } [data-design="modern"][data-theme="dark"] .schedule-table .worker-name-cell { background: var(--bg-elevated); border-right: var(--mo-rule-strong); /* the blanket `th, td { border-color }` rule above also resets the left edge, so the worker colour bar has to be re-asserted here */ border-left: 3px solid var(--wc, var(--accent)); } [data-design="modern"][data-theme="dark"] .worker-item, [data-design="modern"][data-theme="dark"] .worker-select-item, [data-design="modern"][data-theme="dark"] .waitlist-card { background: var(--bg-card); border-color: var(--border); } [data-design="modern"][data-theme="dark"] .worker-item:hover, [data-design="modern"][data-theme="dark"] .worker-select-item:hover, [data-design="modern"][data-theme="dark"] .waitlist-card:hover { background: var(--bg-elevated); border-color: var(--border-light); border-left-color: var(--accent); } [data-design="modern"][data-theme="dark"] .modal-content { background: var(--bg-secondary); border-color: var(--border-light); border-top-color: var(--accent); } [data-design="modern"][data-theme="dark"] .form-group input:not([type="checkbox"]), [data-design="modern"][data-theme="dark"] .form-group select, [data-design="modern"][data-theme="dark"] .form-group textarea, [data-design="modern"][data-theme="dark"] .add-worker-form input, [data-design="modern"][data-theme="dark"] .search-bar input { background: var(--input-bg); border-color: var(--border-light); color: var(--text-primary); } [data-design="modern"][data-theme="dark"] .week-nav, [data-design="modern"][data-theme="dark"] .search-bar, [data-design="modern"][data-theme="dark"] .schedule-totals, [data-design="modern"][data-theme="dark"] .waitlist-panel, [data-design="modern"][data-theme="dark"] .search-results, [data-design="modern"][data-theme="dark"] .dayview-nav { background: var(--bg-secondary); border-bottom-color: var(--border); } [data-design="modern"][data-theme="dark"] .week-nav button, [data-design="modern"][data-theme="dark"] .dayview-nav button { background: var(--bg-elevated); border-color: var(--border); } [data-design="modern"][data-theme="dark"] .btn-secondary { background: transparent; border-color: var(--border-light); color: var(--text-secondary); } [data-design="modern"][data-theme="dark"] .btn-filter-today, [data-design="modern"][data-theme="dark"] .btn-refresh, [data-design="modern"][data-theme="dark"] .btn-search-toggle, [data-design="modern"][data-theme="dark"] .btn-export, [data-design="modern"][data-theme="dark"] .btn-worker-filter, [data-design="modern"][data-theme="dark"] .btn-dayview-toggle { background: var(--bg-elevated) !important; border-color: var(--border) !important; } [data-design="modern"][data-theme="dark"] .settings-section h2 { border-bottom-color: var(--border-light); border-left-color: var(--accent); } [data-design="modern"][data-theme="dark"] .service-dropdown { background: var(--bg-secondary); border-color: var(--border-light); } [data-design="modern"][data-theme="dark"] .search-result-item { border-bottom-color: var(--border); } [data-design="modern"][data-theme="dark"] .transfer-section, [data-design="modern"][data-theme="dark"] .history-item { background: var(--bg-elevated); border-color: var(--border); } [data-design="modern"][data-theme="dark"] .apt-card { box-shadow: none; } [data-design="modern"][data-theme="dark"] .apt-card.status-done { background: var(--bg-elevated) !important; border-color: var(--border); border-left-color: var(--success); } [data-design="modern"][data-theme="dark"] .apt-card.status-waiting { border-left-color: rgba(255, 255, 255, 0.45); } [data-design="modern"][data-theme="dark"] .apt-card.status-inprogress { border-left-color: var(--mo-inprogress); } [data-design="modern"][data-theme="dark"] .dayview-table td:first-child { background: var(--bg-elevated); } [data-design="modern"][data-theme="dark"] #loading-overlay { background: rgba(0, 0, 0, 0.6); } [data-design="modern"][data-theme="dark"] .pin-error { background: var(--accent-soft); } /* ============================================================ 23. RESPONSIVE mobile.css loads after this file and forces radius/height with !important, so the mobile overrides below need it too. ============================================================ */ @media (max-width: 768px) { [data-design="modern"] .schedule-container { padding: 8px; } [data-design="modern"] .schedule-table tr.worker-row { border-radius: 0; box-shadow: none; border: var(--mo-rule-strong); overflow: hidden; } [data-design="modern"] .schedule-table .worker-name-cell { background: var(--bg-elevated); padding: 10px 14px; border-bottom: var(--mo-rule-strong); border-right: none; border-left: 4px solid var(--wc, var(--accent)); } [data-design="modern"] .modal-content { margin: 0; border-radius: 0; border-top: 3px solid var(--accent); max-height: 92vh; min-height: auto; padding: 18px 14px; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0)); } [data-design="modern"] .apt-card { padding: 9px 32px 9px 11px; border-radius: var(--radius-sm); } [data-design="modern"] .fab { bottom: 70px; right: 14px; width: 46px; height: 46px; font-size: 22px; line-height: 44px; border-radius: var(--radius-md); } [data-design="modern"] .week-nav { padding: 8px 10px; gap: 5px; } [data-design="modern"] .app-header { height: 50px; padding: 0 12px; } [data-design="modern"] .app-header h1 { letter-spacing: 1.5px; text-align: left !important; } [data-design="modern"] .settings-section { padding: 14px 12px; } /* beat mobile.css's `border-radius: 10px !important` toolbar pills */ [data-design="modern"] .btn-today, [data-design="modern"] .btn-filter-today, [data-design="modern"] .btn-refresh, [data-design="modern"] .btn-search-toggle, [data-design="modern"] .btn-export, [data-design="modern"] .btn-worker-filter, [data-design="modern"] .btn-dayview-toggle { border-radius: var(--radius-sm) !important; height: 36px !important; line-height: 34px !important; } } @media (max-width: 400px) { [data-design="modern"] .app-header h1 { font-size: 14px; letter-spacing: 1px; } [data-design="modern"] .btn-today, [data-design="modern"] .btn-filter-today { height: 32px !important; line-height: 30px !important; border-radius: var(--radius-sm) !important; } } /* ============================================================ 24. PRINT ============================================================ */ @media print { [data-design="modern"] .apt-card { border-left: 3px solid #666; border-radius: 0; } [data-design="modern"] .schedule-table thead th { background: #eee !important; color: #000 !important; } }