/* ========================================================================== CUTZ ADMIN — "SPRAWL TERMINAL" DESIGN SYSTEM High-Tech / Low-Life admin UI for a beauty-industry booking SaaS. Cyberpunk / glitch aesthetic — neon, chamfered panels, scanlines, CRT noise. Single production-ready stylesheet. No JS required. Toggle theme via: or data-theme="light" ========================================================================== */ /* -------------------------------------------------------------------------- 0. FONTS — system-available monospace stack (no external @import) -------------------------------------------------------------------------- */ :root { --font-display: "Segoe UI", "SFMono-Regular", "Consolas", "Liberation Mono", ui-monospace, monospace; --font-body: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", ui-monospace, monospace; --font-mono: var(--font-body); } /* -------------------------------------------------------------------------- 1. DESIGN TOKENS — DARK THEME (default / primary identity) -------------------------------------------------------------------------- */ :root, [data-theme="dark"] { color-scheme: dark; --bg: #0a0a0f; --bg-elevated: #0e0e16; --surface: #12121a; --surface-2: #171724; --muted: #1c1c2e; --muted-fg: #7d8394; --fg: #e2e4ea; --fg-dim: #9aa0b4; --border: #262636; --border-strong: #34344a; --input-bg: #12121a; --accent: #00ff88; /* primary neon green */ --accent-fg: #04120a; --accent-secondary: #ff2ec4; /* magenta */ --accent-tertiary: #00d4ff; /* cyan */ --danger: #ff3366; --danger-fg: #1a0208; --warning: #ffcc33; --warning-fg: #1a1300; --success: var(--accent); --success-fg: var(--accent-fg); --ring: #00ff88; --radius-sm: 3px; --radius-md: 4px; --chamfer: 10px; --chamfer-sm: 6px; --shadow-neon-sm: 0 0 3px rgba(0, 255, 136, 0.45), 0 0 8px rgba(0, 255, 136, 0.18); --shadow-neon: 0 0 6px rgba(0, 255, 136, 0.5), 0 0 16px rgba(0, 255, 136, 0.22); --shadow-neon-lg: 0 0 10px rgba(0, 255, 136, 0.55), 0 0 28px rgba(0, 255, 136, 0.3); --shadow-danger: 0 0 6px rgba(255, 51, 102, 0.55), 0 0 16px rgba(255, 51, 102, 0.25); --shadow-warning: 0 0 6px rgba(255, 204, 51, 0.45), 0 0 16px rgba(255, 204, 51, 0.2); --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 8px 24px rgba(0, 0, 0, 0.45); --scanline-opacity: 0.05; --grid-opacity: 0.05; --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1); } /* -------------------------------------------------------------------------- 1b. DESIGN TOKENS — LIGHT THEME Keeps the same terminal/neon identity but recast for a bright, bluish-grey "daylight HUD" surface instead of the void. -------------------------------------------------------------------------- */ [data-theme="light"] { color-scheme: light; --bg: #eef1f6; --bg-elevated: #f5f7fb; --surface: #ffffff; --surface-2: #f2f4f9; --muted: #e6e9f2; --muted-fg: #5b6178; --fg: #10121c; --fg-dim: #454a5e; --border: #d7dbe6; --border-strong: #c1c6d6; --input-bg: #ffffff; --accent: #049e5f; /* elegant emerald, legible on white */ --accent-fg: #ffffff; --accent-secondary: #b3009e; --accent-tertiary: #0086b3; --danger: #d81e4d; --danger-fg: #ffffff; --warning: #a56a00; --warning-fg: #1a1300; --success: var(--accent); --success-fg: var(--accent-fg); --ring: #049e5f; --shadow-neon-sm: 0 0 0 1px rgba(4, 158, 95, 0.25), 0 2px 6px rgba(4, 158, 95, 0.12); --shadow-neon: 0 0 0 1px rgba(4, 158, 95, 0.3), 0 4px 14px rgba(4, 158, 95, 0.16); --shadow-neon-lg: 0 0 0 1px rgba(4, 158, 95, 0.35), 0 10px 28px rgba(4, 158, 95, 0.2); --shadow-danger: 0 0 0 1px rgba(216, 30, 77, 0.3), 0 4px 14px rgba(216, 30, 77, 0.16); --shadow-warning: 0 0 0 1px rgba(165, 106, 0, 0.3), 0 4px 14px rgba(165, 106, 0, 0.14); --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 6px 18px rgba(20, 30, 60, 0.08); --scanline-opacity: 0.02; --grid-opacity: 0.03; } /* -------------------------------------------------------------------------- 2. RESET / BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; position: relative; } /* Ambient circuit-grid texture behind everything */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(0, 255, 136, var(--grid-opacity)) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 136, var(--grid-opacity)) 1px, transparent 1px); background-size: 46px 46px; } /* CRT scanline overlay */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1000; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 0, 0, var(--scanline-opacity)) 2px, rgba(0, 0, 0, var(--scanline-opacity)) 4px ); mix-blend-mode: multiply; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; margin: 0 0 0.5em; color: var(--fg); } a { color: var(--accent); text-decoration: none; } /* Focus-visible accessibility, everywhere */ :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- 3. CHAMFER UTILITY (shared clip-path corner cuts) -------------------------------------------------------------------------- */ .card, .inner-card, .metric-card, .empty-card, .admin-gallery-card, .btn, .form-control, select.form-control, .uid-pill, .pill, .badge, .status-badge, .alert, .step, .time-slot, .confirmation-card, .employee-card, .service-card { clip-path: polygon( 0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px) ); } .btn.small, .form-control, select.form-control, .uid-pill, .pill, .badge, .status-badge { clip-path: polygon( 0 5px, 5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px) ); } /* -------------------------------------------------------------------------- 4. APP SHELL / SIDEBAR -------------------------------------------------------------------------- */ .admin-shell { position: relative; z-index: 1; display: flex; min-height: 100vh; background: var(--bg); } .sidebar { width: 248px; flex-shrink: 0; background: linear-gradient(180deg, var(--bg-elevated), var(--bg)); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 20px 14px; position: relative; } [data-theme="dark"] .sidebar { box-shadow: inset -1px 0 0 rgba(0, 255, 136, 0.05); } .sidebar-brand { padding: 6px 10px 18px; border-bottom: 1px solid var(--border); margin-bottom: 14px; } .sidebar-brand h2 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); text-shadow: 0 0 8px rgba(0, 255, 136, 0.35); margin: 0; } .sidebar-brand p { margin: 4px 0 0; font-size: 11px; color: var(--muted-fg); text-transform: uppercase; letter-spacing: 0.12em; } .admin-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; } .admin-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; color: var(--fg-dim); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid transparent; border-radius: var(--radius-sm); transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } .admin-nav a:hover { color: var(--fg); background: var(--muted); border-color: var(--border-strong); } .admin-nav a.active { color: var(--accent); background: rgba(0, 255, 136, 0.08); border-color: rgba(0, 255, 136, 0.4); box-shadow: var(--shadow-neon-sm); } .sidebar-footer { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted-fg); text-transform: uppercase; letter-spacing: 0.1em; } .admin-main { flex: 1; min-width: 0; padding: 32px 40px 60px; position: relative; z-index: 1; } /* -------------------------------------------------------------------------- 5. PAGE HEAD -------------------------------------------------------------------------- */ .page-head { margin-bottom: 24px; } .page-head h1 { font-size: 21px; text-transform: uppercase; letter-spacing: 0.06em; } .eyebrow { display: inline-block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--accent-tertiary); margin-bottom: 6px; } .muted { color: var(--muted-fg); font-size: 12.5px; } /* -------------------------------------------------------------------------- 6. CARDS / GRIDS -------------------------------------------------------------------------- */ .card, .inner-card, .metric-card, .empty-card { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); padding: 18px 20px; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); } .card:hover { transform: translateY(-1px); border-color: var(--border-strong); } .inner-card { background: var(--surface-2); padding: 14px 16px; } .metric-card { background: linear-gradient(150deg, var(--surface) 0%, var(--surface-2) 100%); position: relative; overflow: hidden; } .metric-card::before { content: ""; position: absolute; top: -40%; right: -20%; width: 140px; height: 140px; background: radial-gradient(circle, rgba(0, 255, 136, 0.16), transparent 70%); pointer-events: none; } .metric-card strong { display: block; font-family: var(--font-display); font-size: 26px; color: var(--fg); text-shadow: 0 0 10px rgba(0, 255, 136, 0.18); } .empty-card { border-style: dashed; color: var(--muted-fg); text-align: center; padding: 34px 20px; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.08em; } .grid { display: grid; gap: 16px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px; } /* -------------------------------------------------------------------------- 7. FORMS -------------------------------------------------------------------------- */ .admin-form { display: flex; flex-direction: column; gap: 14px; } .form-group { display: flex; flex-direction: column; gap: 6px; } label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--fg-dim); font-weight: 600; } .form-control { background: var(--input-bg); border: 1px solid var(--border); color: var(--fg); font-family: var(--font-mono); font-size: 13px; padding: 8px 10px; width: 100%; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .form-control::placeholder { color: var(--muted-fg); } .form-control:focus { border-color: var(--accent); box-shadow: var(--shadow-neon-sm); outline: none; } textarea.form-control { min-height: 84px; resize: vertical; line-height: 1.5; } select.form-control { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%); background-position: calc(100% - 16px) calc(50% - 2px), calc(100% - 11px) calc(50% - 2px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px; } input[type="file"] { font-family: var(--font-mono); font-size: 12px; color: var(--muted-fg); border: 1px dashed var(--border-strong); background: var(--surface-2); padding: 14px 12px; width: 100%; cursor: pointer; } input[type="file"]::file-selector-button { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.07em; font-size: 11px; padding: 7px 12px; margin-right: 12px; border: 1px solid var(--accent); background: transparent; color: var(--accent); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast); } input[type="file"]::file-selector-button:hover { background: var(--accent); color: var(--accent-fg); box-shadow: var(--shadow-neon-sm); } .form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 6px; border-top: 1px solid var(--border); margin-top: 4px; } .check-inline { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-dim); text-transform: none; letter-spacing: 0; } .check-list { display: flex; flex-direction: column; gap: 8px; } input[type="checkbox"] { appearance: none; width: 16px; height: 16px; border: 1px solid var(--border-strong); background: var(--input-bg); position: relative; cursor: pointer; flex-shrink: 0; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } input[type="checkbox"]:checked { border-color: var(--accent); background: rgba(0, 255, 136, 0.12); box-shadow: var(--shadow-neon-sm); } input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); } .danger-check { color: var(--danger); } .danger-check input[type="checkbox"]:checked { border-color: var(--danger); background: rgba(255, 51, 102, 0.12); box-shadow: var(--shadow-danger); } .danger-check input[type="checkbox"]:checked::after { border-color: var(--danger); } /* -------------------------------------------------------------------------- 8. BUTTONS -------------------------------------------------------------------------- */ .btn, button.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding: 9px 16px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--fg); cursor: pointer; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), filter var(--transition-fast); } .btn:hover { transform: translateY(-1px); border-color: var(--border-strong); } .btn:active { transform: translateY(0); } .btn.primary { background: linear-gradient(135deg, var(--accent), #00cc6e); border-color: var(--accent); color: var(--accent-fg); box-shadow: var(--shadow-neon); } .btn.primary:hover { filter: brightness(1.08); box-shadow: var(--shadow-neon-lg); } .btn.danger { background: linear-gradient(135deg, var(--danger), #c21f4c); border-color: var(--danger); color: var(--danger-fg); box-shadow: var(--shadow-danger); } .btn.danger:hover { filter: brightness(1.08); } .btn.small { padding: 5px 11px; font-size: 11px; } .btn.full { width: 100%; } .btn:disabled, button.btn:disabled { opacity: 0.4; cursor: not-allowed; filter: none; box-shadow: none; transform: none; } .table-actions { display: flex; gap: 8px; } /* -------------------------------------------------------------------------- 9. TABLES -------------------------------------------------------------------------- */ .table-responsive { overflow-x: auto; border: 1px solid var(--border); } .table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .table th { text-align: left; padding: 10px 12px; background: var(--surface-2); color: var(--muted-fg); text-transform: uppercase; letter-spacing: 0.08em; font-size: 10.5px; border-bottom: 1px solid var(--border); } .table td { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--fg-dim); } .table tr:hover td { background: rgba(0, 255, 136, 0.04); color: var(--fg); } /* -------------------------------------------------------------------------- 10. PILLS / BADGES / ALERTS / PRICE -------------------------------------------------------------------------- */ .uid-pill, .pill, .badge, .status-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; padding: 3px 9px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--fg-dim); font-family: var(--font-mono); } .status-badge.ok, .status-badge.success, .badge.success { color: var(--accent); border-color: var(--accent); background: rgba(0, 255, 136, 0.08); } .status-badge.err, .status-badge.danger, .badge.danger { color: var(--danger); border-color: var(--danger); background: rgba(255, 51, 102, 0.08); } .status-badge.warning, .badge.warning { color: var(--warning); border-color: var(--warning); background: rgba(255, 204, 51, 0.08); } .alert { padding: 12px 14px; border: 1px solid var(--border); background: var(--surface-2); font-size: 12.5px; clip-path: none; border-left: 3px solid var(--border-strong); } .alert.ok, .alert.success { border-left-color: var(--accent); color: var(--fg); background: rgba(0, 255, 136, 0.06); } .alert.err { border-left-color: var(--danger); background: rgba(255, 51, 102, 0.06); } .alert.warning { border-left-color: var(--warning); background: rgba(255, 204, 51, 0.06); } .price { font-family: var(--font-display); font-size: 18px; color: var(--accent); text-shadow: 0 0 8px rgba(0, 255, 136, 0.25); } .small-price { font-family: var(--font-mono); font-size: 12px; color: var(--muted-fg); } /* -------------------------------------------------------------------------- 11. GALLERY / MEDIA CARDS / UPLOAD -------------------------------------------------------------------------- */ .admin-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; } .admin-gallery-card { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); } .admin-gallery-card:hover { transform: translateY(-2px); border-color: var(--accent-tertiary); box-shadow: var(--shadow-neon-sm); } .admin-gallery-card img { width: 100%; height: 220px; object-fit: cover; display: block; border-bottom: 1px solid var(--border); } .admin-gallery-form { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; } .admin-gallery-form .form-group { gap: 4px; } .admin-gallery-form .form-actions { border-top: none; padding-top: 2px; margin-top: 0; } .admin-preview, .avatar-preview, .service-preview, .cover-preview { border: 1px solid var(--border); background: var(--surface-2); padding: 4px; display: inline-block; } .avatar-preview img, .service-preview img, .cover-preview img, .admin-preview img { display: block; object-fit: cover; } .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } /* -------------------------------------------------------------------------- 12. PUBLIC BOOKING FLOW -------------------------------------------------------------------------- */ .container { max-width: 1120px; margin: 0 auto; padding: 0 20px; } .section { padding: 56px 0; position: relative; z-index: 1; } .hero, .salon-hero { position: relative; padding: 72px 0; background: radial-gradient(circle at 20% 20%, rgba(0, 255, 136, 0.08), transparent 55%), radial-gradient(circle at 80% 60%, rgba(0, 212, 255, 0.06), transparent 55%), var(--bg-elevated); border-bottom: 1px solid var(--border); text-align: center; } .service-card, .employee-card { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); padding: 20px; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .service-card:hover, .employee-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-neon-sm); } .employee-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); box-shadow: var(--shadow-neon-sm); } .employee-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-tertiary); } .employee-bio { font-size: 12.5px; color: var(--fg-dim); } .employee-gallery-preview { display: flex; gap: 6px; margin-top: 10px; } .employee-gallery-preview img { width: 48px; height: 48px; object-fit: cover; border: 1px solid var(--border); } .employee-actions { display: flex; gap: 8px; margin-top: 12px; } .steps { display: flex; gap: 8px; margin-bottom: 24px; } .step { flex: 1; text-align: center; padding: 10px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted-fg); } .step.active { border-color: var(--accent); color: var(--accent); box-shadow: var(--shadow-neon-sm); background: rgba(0, 255, 136, 0.06); } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .time-slot { text-align: center; padding: 9px 6px; font-size: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--fg-dim); cursor: pointer; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast); } .time-slot:hover { border-color: var(--accent-tertiary); color: var(--fg); } .time-slot.selected { border-color: var(--accent); color: var(--accent-fg); background: var(--accent); box-shadow: var(--shadow-neon); } .time-slot.disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; } .booking-form { display: flex; flex-direction: column; gap: 14px; max-width: 520px; } .confirmation-card { background: var(--surface); border: 1px solid var(--accent); box-shadow: var(--shadow-neon); padding: 26px; text-align: center; } /* -------------------------------------------------------------------------- 13. THEME TOGGLE -------------------------------------------------------------------------- */ .theme-toggle { display: inline-flex; border: 1px solid var(--border-strong); background: var(--surface-2); padding: 3px; gap: 3px; } .theme-toggle button { border: none; background: transparent; color: var(--muted-fg); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 10px; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: color var(--transition-fast), background var(--transition-fast); } .theme-toggle button.active, .theme-toggle .active { color: var(--accent-fg); background: var(--accent); box-shadow: var(--shadow-neon-sm); } .theme-toggle-icon { width: 13px; height: 13px; display: inline-block; } /* -------------------------------------------------------------------------- 14. RESPONSIVE -------------------------------------------------------------------------- */ @media (max-width: 1200px) { .grid-4 { grid-template-columns: repeat(3, 1fr); } .admin-main { padding: 28px 30px 50px; } } @media (max-width: 1024px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } .sidebar { width: 208px; } .admin-main { padding: 24px 22px 46px; } } @media (max-width: 768px) { .admin-shell { flex-direction: column; } .sidebar { width: 100%; flex-direction: row; align-items: center; overflow-x: auto; padding: 12px; border-right: none; border-bottom: 1px solid var(--border); } .sidebar-brand { border-bottom: none; padding: 0 12px 0 0; margin: 0; } .admin-nav { flex-direction: row; } .sidebar-footer { display: none; } .admin-main { padding: 18px 16px 40px; } .grid-2, .grid-3, .grid-4, .form-grid { grid-template-columns: 1fr; } .admin-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .steps { flex-wrap: wrap; } } @media (max-width: 520px) { .admin-gallery-grid, .gallery { grid-template-columns: 1fr 1fr; } .admin-gallery-card img { height: 160px; } .form-actions { flex-direction: column-reverse; } .btn.full, .form-actions .btn { width: 100%; } .calendar-grid { grid-template-columns: repeat(4, 1fr); } .table th, .table td { padding: 8px; font-size: 11.5px; } } /* ========================================================= Public booking/form readability baseline Applies to every public theme. Theme files may change colors, but inputs must stay readable. ========================================================= */ .public-theme .form-control, .public-theme input[type="date"], .public-theme input[type="text"], .public-theme input[type="email"], .public-theme input[type="tel"], .public-theme input[type="password"], .public-theme input[type="number"], .public-theme textarea, .public-theme select { background-color: var(--public-input-bg, #ffffff) !important; color: var(--public-input-fg, #111827) !important; border-color: var(--public-input-border, rgba(15, 23, 42, 0.18)) !important; color-scheme: light; } .public-theme .form-control::placeholder, .public-theme textarea::placeholder { color: var(--public-input-placeholder, #6b7280) !important; } .public-theme input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.75; cursor: pointer; filter: none; } .public-theme [data-theme="dark"] .form-control, .public-theme[data-theme="dark"] .form-control { background-color: var(--public-input-bg, #ffffff) !important; color: var(--public-input-fg, #111827) !important; }