/* ============================================================================ Voice Henry Admin Console — stylesheet ---------------------------------------------------------------------------- Design system: - Fibonacci spacing scale (base 4px × 1,2,3,5,8,13,21,34,55,89) - Fibonacci font sizes (12,13,16,21,34,55) - Golden ratio (1.618) for line-height - Fibonacci-aligned border radii (5, 8, 13) - All colors driven by CSS custom properties at :root — white-labelers override these ~15 values and the whole UI re-themes. ========================================================================= */ :root { /* ============ BRAND / WHITE-LABEL (override these to theme) ============ */ --color-primary: #6366f1; /* indigo-500 */ --color-primary-hover: #5558e3; --color-primary-subtle: #eef2ff; --color-primary-text: #ffffff; --color-accent: #14b8a6; /* teal-500 */ --color-accent-hover: #0f9d8a; --brand-logo-emoji: "\1F3A7"; /* 🎧 — white-labelers can override via content */ /* ============ SEMANTIC COLORS (rarely changed per white-label) ========= */ --color-bg: #fafafa; --color-surface: #ffffff; --color-surface-elevated: #ffffff; --color-surface-hover: #f5f5f7; --color-border: #e5e7eb; --color-border-strong: #d1d5db; --color-text: #111827; --color-text-muted: #6b7280; --color-text-subtle: #9ca3af; --color-success: #10b981; --color-success-subtle: #d1fae5; --color-warning: #f59e0b; --color-warning-subtle: #fef3c7; --color-danger: #ef4444; --color-danger-subtle: #fee2e2; --color-info: #3b82f6; --color-info-subtle: #dbeafe; /* ============ FIBONACCI SPACING (base 4px) ============================= */ --fib-1: 4px; --fib-2: 8px; --fib-3: 12px; --fib-5: 20px; --fib-8: 32px; --fib-13: 52px; --fib-21: 84px; --fib-34: 136px; --fib-55: 220px; --fib-89: 356px; /* ============ FIBONACCI TYPOGRAPHY ===================================== */ --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif; --font-mono: "SF Mono", "JetBrains Mono", "Monaco", Consolas, monospace; --font-xs: 12px; --font-sm: 13px; --font-base: 16px; --font-md: 21px; --font-lg: 34px; --font-xl: 55px; --line-tight: 1.2; --line-normal: 1.5; --line-golden: 1.618; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ============ RADII (fibonacci) ======================================== */ --radius-sm: 5px; --radius-md: 8px; --radius-lg: 13px; --radius-full: 9999px; /* ============ SHADOWS (fibonacci offsets) ============================== */ --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05); --shadow-md: 0 5px 13px rgba(17, 24, 39, 0.08); --shadow-lg: 0 13px 34px rgba(17, 24, 39, 0.12); /* ============ MOTION =================================================== */ --transition-fast: 100ms ease; --transition-base: 200ms ease; --transition-slow: 400ms ease; /* ============ LAYOUT (fibonacci ratios) ================================ */ --sidebar-width: 220px; /* fib(55) * 4 */ --content-max-width: 1136px; /* ~fib-friendly */ --detail-panel-width: 520px; /* ~fib-friendly */ } /* ============================================================================ DARK THEME ---------------------------------------------------------------------------- Activated by setting data-theme="dark" on (admin.html does this inline before paint, driven by the Theme setting in the Settings panel or the user's OS preference). Only the semantic colors get overridden; spacing / typography / radii / motion stay shared with light mode. ========================================================================= */ html[data-theme="dark"] { --color-primary: #818cf8; /* indigo-400 — slightly lighter on dark */ --color-primary-hover: #a5b4fc; --color-primary-subtle: #1e1b4b; /* deep indigo for selected nav row */ --color-primary-text: #ffffff; --color-accent: #2dd4bf; --color-accent-hover: #5eead4; --color-bg: #0b0d1c; /* near-black, slight blue tint */ --color-surface: #14172b; --color-surface-elevated: #1b1f3a; --color-surface-hover: #1e2240; --color-border: #2a2f4a; --color-border-strong: #3a3f5e; --color-text: #e5e7eb; --color-text-muted: #9ca3af; --color-text-subtle: #6b7280; --color-success: #34d399; --color-success-subtle: #064e3b; --color-warning: #fbbf24; --color-warning-subtle: #78350f; --color-danger: #f87171; --color-danger-subtle: #7f1d1d; --color-info: #60a5fa; --color-info-subtle: #1e3a8a; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 5px 13px rgba(0, 0, 0, 0.5); --shadow-lg: 0 13px 34px rgba(0, 0, 0, 0.6); color-scheme: dark; /* tells the UA to dark-style native form controls */ } /* ============================================================================ RESET / BASE ========================================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--font-sans); font-size: var(--font-base); line-height: var(--line-golden); color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } button { font-family: inherit; font-size: inherit; border: none; background: none; cursor: pointer; color: inherit; } input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } input:focus, select:focus, textarea:focus, button:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; } .hidden { display: none !important; } /* ============================================================================ LOGIN SCREEN ========================================================================= */ .login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--fib-5); background: linear-gradient(135deg, var(--color-primary-subtle), var(--color-bg)); } .login-form { width: 100%; max-width: 356px; /* fib-89 */ background: var(--color-surface); padding: var(--fib-13); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: var(--fib-5); } .login-brand { display: flex; flex-direction: column; align-items: center; gap: var(--fib-2); margin-bottom: var(--fib-3); } .login-brand-logo { width: 84px; /* fib-21 — brand mark, larger on the auth screen */ height: 84px; object-fit: contain; display: block; } .login-brand h1 { font-size: var(--font-md); font-weight: var(--weight-semibold); } .login-brand p { font-size: var(--font-sm); color: var(--color-text-muted); } .login-form input { padding: var(--fib-3) var(--fib-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); transition: border-color var(--transition-base); } /* Password reveal (v0.6.0) — eye-toggle next to password inputs */ .password-field { position: relative; } .password-field input[type="password"], .password-field input[type="text"] { width: 100%; padding-right: 40px; } .password-reveal-btn { position: absolute; right: var(--fib-2); top: 50%; transform: translateY(-50%); background: none; border: none; font-size: var(--font-md); cursor: pointer; padding: 4px 8px; opacity: 0.6; color: var(--color-text-muted); } .password-reveal-btn:hover { opacity: 1; } .login-form input:focus { border-color: var(--color-primary); outline: none; } .login-form button[type="submit"] { padding: var(--fib-3) var(--fib-5); background: var(--color-primary); color: var(--color-primary-text); border-radius: var(--radius-md); font-weight: var(--weight-semibold); transition: background var(--transition-base); } .login-form button[type="submit"]:hover { background: var(--color-primary-hover); } .error-banner { padding: var(--fib-3); background: var(--color-danger-subtle); color: var(--color-danger); border-radius: var(--radius-sm); font-size: var(--font-sm); } .info-banner { padding: var(--fib-3); background: var(--color-primary-subtle); color: var(--color-primary); border-radius: var(--radius-sm); font-size: var(--font-sm); } .login-form > form { display: flex; flex-direction: column; gap: var(--fib-5); } .auth-instructions { font-size: var(--font-sm); color: var(--color-text-muted); text-align: center; } .link-btn { background: none; border: none; color: var(--color-primary); cursor: pointer; font-size: var(--font-sm); padding: var(--fib-1) 0; text-align: center; } .link-btn:hover { text-decoration: underline; } /* ============================================================================ APP LAYOUT ========================================================================= */ .app { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: 100vh; } /* ============================================================================ SIDEBAR ========================================================================= */ .sidebar { background: var(--color-surface); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; padding: var(--fib-5); gap: var(--fib-8); } .sidebar-brand { display: flex; align-items: center; gap: var(--fib-2); padding: var(--fib-2); } .sidebar-brand-logo { width: 32px; /* fib-8 */ height: 32px; object-fit: contain; display: block; } .sidebar-brand h1 { font-size: var(--font-base); font-weight: var(--weight-semibold); } .sidebar-nav { display: flex; flex-direction: column; gap: var(--fib-1); flex: 1; } .nav-item { display: flex; align-items: center; gap: var(--fib-3); padding: var(--fib-3) var(--fib-5); border-radius: var(--radius-md); font-size: var(--font-sm); color: var(--color-text-muted); font-weight: var(--weight-medium); text-align: left; transition: all var(--transition-base); } .nav-item:hover { background: var(--color-surface-hover); color: var(--color-text); } .nav-item.active { background: var(--color-primary-subtle); color: var(--color-primary); } .sidebar-footer { padding-top: var(--fib-5); border-top: 1px solid var(--color-border); } /* ============================================================================ MAIN CONTENT ========================================================================= */ .main-content { padding: var(--fib-13) var(--fib-8); max-width: var(--content-max-width); width: 100%; overflow-y: auto; } .section { display: none; animation: fadeIn var(--transition-slow) ease; } .section.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--fib-8); padding-bottom: var(--fib-5); border-bottom: 1px solid var(--color-border); } .section-header h2 { font-size: var(--font-lg); font-weight: var(--weight-bold); line-height: var(--line-tight); } .section-subtitle { font-size: var(--font-sm); color: var(--color-text-muted); margin-top: var(--fib-1); } /* ============================================================================ BUTTONS ========================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--fib-2); padding: var(--fib-2) var(--fib-5); border-radius: var(--radius-md); font-size: var(--font-sm); font-weight: var(--weight-medium); transition: all var(--transition-base); white-space: nowrap; } .btn-primary { background: var(--color-primary); color: var(--color-primary-text); } .btn-primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-ghost { background: transparent; color: var(--color-text-muted); } .btn-ghost:hover { background: var(--color-surface-hover); color: var(--color-text); } .btn-danger { background: transparent; color: var(--color-danger); } .btn-danger:hover { background: var(--color-danger-subtle); } .btn-sm { padding: var(--fib-1) var(--fib-3); font-size: var(--font-xs); } .btn-icon { width: 32px; /* fib-8 */ height: 32px; padding: 0; border-radius: var(--radius-sm); } /* ============================================================================ EXTENSIONS SECTION ========================================================================= */ .extensions-list { display: flex; flex-direction: column; gap: var(--fib-5); } .extension-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--fib-8); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-base); } .extension-card:hover { box-shadow: var(--shadow-md); } .extension-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--fib-5); gap: var(--fib-5); } .extension-name-input { flex: 1; font-size: var(--font-md); font-weight: var(--weight-semibold); border: 1px solid transparent; border-radius: var(--radius-sm); padding: var(--fib-2) var(--fib-3); background: transparent; transition: all var(--transition-base); } .extension-name-input:hover { border-color: var(--color-border); } .extension-name-input:focus { border-color: var(--color-primary); background: var(--color-surface); outline: none; } .extension-id { font-family: var(--font-mono); font-size: var(--font-xs); color: var(--color-text-subtle); } /* ---- Hunt list numbers ---- */ .numbers-section-label { font-size: var(--font-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-subtle); margin-bottom: var(--fib-3); } .numbers-list { display: flex; flex-direction: column; gap: var(--fib-2); margin-bottom: var(--fib-5); } .number-row { display: grid; grid-template-columns: 32px 1fr 1.3fr auto auto; align-items: center; gap: var(--fib-3); padding: var(--fib-2) var(--fib-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); transition: all var(--transition-base); } .number-row:hover { border-color: var(--color-border-strong); background: var(--color-surface-hover); } .number-row-handle { display: flex; flex-direction: column; gap: 2px; align-items: center; color: var(--color-text-subtle); } .number-row-handle button { width: 20px; height: 14px; display: flex; align-items: center; justify-content: center; border-radius: 3px; font-size: 10px; } .number-row-handle button:hover { background: var(--color-surface-hover); color: var(--color-primary); } .number-row input { padding: var(--fib-2) var(--fib-3); border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; transition: all var(--transition-fast); } .number-row input:hover { background: var(--color-surface); border-color: var(--color-border); } .number-row input:focus { background: var(--color-surface); border-color: var(--color-primary); outline: none; } .number-row input.number-row-phone { font-family: var(--font-mono); font-size: var(--font-sm); } .add-number-btn { display: flex; align-items: center; justify-content: center; gap: var(--fib-2); padding: var(--fib-3); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); color: var(--color-text-muted); font-size: var(--font-sm); font-weight: var(--weight-medium); transition: all var(--transition-base); width: 100%; } .add-number-btn:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-subtle); } /* ---- Queue settings (timers etc) ---- */ .queue-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--fib-5); padding-top: var(--fib-5); border-top: 1px solid var(--color-border); } .setting-field { display: flex; flex-direction: column; gap: var(--fib-2); } .setting-label { font-size: var(--font-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-subtle); } .setting-input, .setting-select { padding: var(--fib-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); transition: border-color var(--transition-base); } .setting-input:focus, .setting-select:focus { border-color: var(--color-primary); outline: none; } .setting-input[type="number"] { font-family: var(--font-mono); } .setting-hint { font-size: var(--font-xs); color: var(--color-text-subtle); } /* ---- Toggle switch ---- */ .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: var(--fib-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; transition: border-color var(--transition-base); } .toggle-row:hover { border-color: var(--color-border-strong); } .toggle-row-label { display: flex; flex-direction: column; gap: var(--fib-1); } .toggle-row-label strong { font-size: var(--font-sm); font-weight: var(--weight-medium); } .toggle-row-label span { font-size: var(--font-xs); color: var(--color-text-subtle); } .toggle-switch { position: relative; width: 44px; /* not strict fib but visually balanced */ height: 24px; background: var(--color-border-strong); border-radius: var(--radius-full); transition: background var(--transition-base); flex-shrink: 0; } .toggle-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: var(--color-surface); border-radius: var(--radius-full); box-shadow: var(--shadow-sm); transition: transform var(--transition-base); } .toggle-switch.on { background: var(--color-primary); } .toggle-switch.on::after { transform: translateX(20px); } /* ---- Save indicator (per-field) ---- */ .save-indicator { font-size: var(--font-xs); color: var(--color-success); opacity: 0; transition: opacity var(--transition-slow); } .save-indicator.visible { opacity: 1; } /* ============================================================================ CALL LOG SECTION ========================================================================= */ .filters { display: flex; gap: var(--fib-1); padding: var(--fib-1); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .filter-btn { padding: var(--fib-2) var(--fib-5); border-radius: var(--radius-sm); font-size: var(--font-sm); color: var(--color-text-muted); transition: all var(--transition-base); } .filter-btn:hover { color: var(--color-text); } .filter-btn.active { background: var(--color-primary); color: var(--color-primary-text); } .calls-table-wrapper { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; } .calls-table { width: 100%; border-collapse: collapse; font-size: var(--font-sm); } .calls-table thead th { text-align: left; padding: var(--fib-3) var(--fib-5); font-size: var(--font-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-subtle); background: var(--color-surface-hover); border-bottom: 1px solid var(--color-border); } .calls-table tbody tr { border-bottom: 1px solid var(--color-border); cursor: pointer; transition: background var(--transition-fast); } .calls-table tbody tr:last-child { border-bottom: none; } .calls-table tbody tr:hover { background: var(--color-surface-hover); } .calls-table td { padding: var(--fib-3) var(--fib-5); } .calls-table .call-from { font-family: var(--font-mono); font-size: var(--font-sm); } .calls-table .call-duration { font-variant-numeric: tabular-nums; color: var(--color-text-muted); } /* ---- Outcome badges ---- */ .badge { display: inline-flex; align-items: center; gap: var(--fib-1); padding: 3px var(--fib-2); border-radius: var(--radius-sm); font-size: var(--font-xs); font-weight: var(--weight-medium); white-space: nowrap; } .badge-success { background: var(--color-success-subtle); color: var(--color-success); } .badge-warning { background: var(--color-warning-subtle); color: var(--color-warning); } .badge-danger { background: var(--color-danger-subtle); color: var(--color-danger); } .badge-info { background: var(--color-info-subtle); color: var(--color-info); } .badge-neutral { background: var(--color-surface-hover); color: var(--color-text-muted); } /* ============================================================================ DETAIL PANEL (call detail) ========================================================================= */ .detail-panel { position: fixed; top: 0; right: 0; width: var(--detail-panel-width); height: 100vh; background: var(--color-surface); border-left: 1px solid var(--color-border); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform var(--transition-slow); display: flex; flex-direction: column; z-index: 100; overflow: hidden; } .detail-panel.visible { transform: translateX(0); } .detail-panel-header { padding: var(--fib-5) var(--fib-8); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; } .detail-panel-header h3 { font-size: var(--font-md); font-weight: var(--weight-semibold); } .detail-panel-body { flex: 1; overflow-y: auto; padding: var(--fib-8); display: flex; flex-direction: column; gap: var(--fib-8); } .detail-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fib-5); } .detail-meta-field { display: flex; flex-direction: column; gap: var(--fib-1); } .detail-meta-field .label { font-size: var(--font-xs); color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: 0.5px; font-weight: var(--weight-semibold); } .detail-meta-field .value { font-size: var(--font-sm); font-weight: var(--weight-medium); } .detail-meta-field .value.mono { font-family: var(--font-mono); } .detail-section-title { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text); margin-bottom: var(--fib-3); padding-bottom: var(--fib-2); border-bottom: 1px solid var(--color-border); } .attempts-list { display: flex; flex-direction: column; gap: var(--fib-2); } .attempt-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--fib-3); padding: var(--fib-3); background: var(--color-surface-hover); border-radius: var(--radius-md); font-size: var(--font-sm); } .attempt-index { width: 24px; height: 24px; background: var(--color-surface); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); } .attempt-label { display: flex; flex-direction: column; gap: 2px; } .attempt-label strong { font-size: var(--font-sm); } .attempt-label .phone { font-family: var(--font-mono); font-size: var(--font-xs); color: var(--color-text-muted); } .events-timeline { display: flex; flex-direction: column; gap: var(--fib-2); font-family: var(--font-mono); font-size: var(--font-xs); } .event-row { display: grid; grid-template-columns: 84px 1fr; gap: var(--fib-3); padding: var(--fib-2); border-radius: var(--radius-sm); } .event-row:hover { background: var(--color-surface-hover); } .event-row .time { color: var(--color-text-subtle); } .event-row .tag { color: var(--color-text); font-weight: var(--weight-medium); } /* ============================================================================ GREETINGS SECTION ========================================================================= */ .greetings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(356px, 1fr)); gap: var(--fib-5); } .greeting-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--fib-8); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--fib-3); } .greeting-card h3 { font-size: var(--font-base); font-weight: var(--weight-semibold); } .greeting-card-desc { font-size: var(--font-sm); color: var(--color-text-muted); } .greeting-current { font-family: var(--font-mono); font-size: var(--font-xs); color: var(--color-text-subtle); word-break: break-all; padding: var(--fib-2); background: var(--color-surface-hover); border-radius: var(--radius-sm); } .greeting-upload { display: flex; gap: var(--fib-2); align-items: center; } .greeting-audio { width: 100%; height: 40px; } /* ---- In-browser recorder (per greeting card) ---- */ .greeting-record { display: flex; flex-direction: column; gap: var(--fib-2); } .record-or { text-align: center; font-size: var(--font-xs); color: var(--color-text-subtle); letter-spacing: 0.05em; } .record-controls { display: flex; gap: var(--fib-2); align-items: center; flex-wrap: wrap; } .record-start, .record-stop { display: inline-flex; align-items: center; gap: var(--fib-2); } .record-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-danger); flex-shrink: 0; } .record-controls.recording .record-dot { animation: record-pulse 1.2s ease-in-out infinite; } @keyframes record-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } } .record-stop { color: var(--color-danger); border: 1px solid var(--color-danger); } .record-stop:hover { background: var(--color-danger-subtle); } .record-timer { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--font-xs); color: var(--color-text-muted); margin-left: var(--fib-1); } .record-review { display: flex; gap: var(--fib-2); align-items: center; flex-wrap: wrap; } /* ---- Settings ---- */ .settings-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--fib-8); margin-bottom: var(--fib-5); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--fib-3); max-width: 720px; } .settings-card h3 { font-size: var(--font-base); font-weight: var(--weight-semibold); } .settings-hint { font-size: var(--font-sm); color: var(--color-text-muted); } .hours-grid { display: flex; flex-direction: column; gap: var(--fib-2); } .hours-row { display: grid; grid-template-columns: 100px 100px 30px 100px 80px 100px; align-items: center; gap: var(--fib-2); padding: var(--fib-2); border-radius: var(--radius-sm); } .hours-row.closed { opacity: 0.55; } .hours-row .hours-day { font-weight: var(--weight-semibold); } .hours-row input[type="time"] { padding: var(--fib-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--font-sm); } .hours-row .hours-dash { text-align: center; color: var(--color-text-muted); } .hours-row .hours-closed-label { font-size: var(--font-sm); color: var(--color-text-muted); } .file-input-wrapper { position: relative; flex: 1; } .file-input-wrapper input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .file-input-label { display: block; padding: var(--fib-2) var(--fib-3); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm); font-size: var(--font-xs); color: var(--color-text-muted); text-align: center; transition: all var(--transition-base); } .file-input-wrapper:hover .file-input-label { border-color: var(--color-primary); color: var(--color-primary); } /* ============================================================================ EMPTY STATES ========================================================================= */ .empty-state { padding: var(--fib-13) var(--fib-8); text-align: center; color: var(--color-text-muted); font-size: var(--font-sm); background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); } .empty-state-title { font-size: var(--font-base); font-weight: var(--weight-medium); color: var(--color-text); margin-bottom: var(--fib-2); } /* ============================================================================ TOAST NOTIFICATIONS ========================================================================= */ .toast-container { position: fixed; bottom: var(--fib-8); right: var(--fib-8); display: flex; flex-direction: column; gap: var(--fib-2); z-index: 200; pointer-events: none; } .toast { padding: var(--fib-3) var(--fib-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); font-size: var(--font-sm); display: flex; align-items: center; gap: var(--fib-2); animation: slideIn var(--transition-slow) ease; pointer-events: auto; max-width: 356px; } .toast-success { border-left: 3px solid var(--color-success); } .toast-error { border-left: 3px solid var(--color-danger); } .toast-info { border-left: 3px solid var(--color-info); } @keyframes slideIn { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ============================================================================ RESPONSIVE ========================================================================= */ @media (max-width: 900px) { .app { grid-template-columns: 1fr; } .sidebar { flex-direction: row; border-right: none; border-bottom: 1px solid var(--color-border); overflow-x: auto; } .sidebar-nav { flex-direction: row; gap: var(--fib-1); } .sidebar-footer { border-top: none; padding-top: 0; padding-left: var(--fib-5); border-left: 1px solid var(--color-border); } .main-content { padding: var(--fib-5); } .detail-panel { width: 100%; } .number-row { grid-template-columns: 32px 1fr auto; } .number-row input.number-row-phone { grid-column: 2; } } /* ===== Costs panel ===== */ .costs-range-tabs { display: flex; gap: var(--fib-2); } .costs-range-btn { padding: var(--fib-2) var(--fib-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--font-sm); cursor: pointer; color: var(--color-text-muted); transition: all 0.15s; } .costs-range-btn:hover { background: var(--color-surface-hover, var(--color-surface)); color: var(--color-text); } .costs-range-btn.active { background: var(--color-primary, #2563eb); color: white; border-color: var(--color-primary, #2563eb); } .costs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--fib-5); margin-bottom: var(--fib-8); } .costs-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--fib-7); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--fib-2); } .costs-card-total { border-color: var(--color-primary, #2563eb); background: linear-gradient(135deg, var(--color-surface) 0%, rgba(37, 99, 235, 0.04) 100%); } .costs-card-label { font-size: var(--font-sm); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .costs-card-value { font-size: var(--font-2xl, 2rem); font-weight: var(--weight-semibold); color: var(--color-text); font-variant-numeric: tabular-nums; } .costs-card-sub { font-size: var(--font-sm); color: var(--color-text-muted); } .costs-rates { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--fib-7); max-width: 720px; } .costs-rates h4 { font-size: var(--font-base); font-weight: var(--weight-semibold); margin-bottom: var(--fib-3); } .costs-rates ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--fib-2); } .costs-rates li { font-size: var(--font-sm); color: var(--color-text-muted); padding: var(--fib-2) 0; } .costs-rates li strong { color: var(--color-text); font-variant-numeric: tabular-nums; } .costs-rates-hint { margin-top: var(--fib-3); font-size: var(--font-xs); color: var(--color-text-muted); } .costs-loading, .costs-error { padding: var(--fib-7); text-align: center; color: var(--color-text-muted); } .costs-error { color: var(--color-danger, #dc2626); } /* ============================================================================ TENANTS (v0.5.5) ========================================================================= */ .tenants-global-status { font-size: var(--font-xs); color: var(--color-text-muted); text-align: right; line-height: 1.4; } .tenants-global-status .pill { margin-left: var(--fib-1); } .tenants-list { display: flex; flex-direction: column; gap: var(--fib-3); } .tenant-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--fib-5) var(--fib-8); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--fib-3); } .tenant-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--fib-5); flex-wrap: wrap; } .tenant-card-title { font-size: var(--font-md); font-weight: var(--weight-semibold); margin-bottom: var(--fib-1); } .tenant-card-sub { font-family: var(--font-mono); font-size: var(--font-xs); color: var(--color-text-muted); } .tenant-card-badges { display: flex; gap: var(--fib-2); flex-wrap: wrap; align-items: center; } .pill { display: inline-block; padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--font-xs); font-weight: var(--weight-medium); background: var(--color-surface-hover); color: var(--color-text-muted); border: 1px solid var(--color-border); line-height: 1.4; } .pill.pill-internal { background: var(--color-info-subtle); color: var(--color-info); border-color: var(--color-info); } .pill.pill-customer { background: var(--color-success-subtle); color: var(--color-success); border-color: var(--color-success); } .pill.pill-suspended { background: var(--color-danger-subtle); color: var(--color-danger); border-color: var(--color-danger); } .pill.pill-low-balance { background: var(--color-warning-subtle); color: var(--color-warning); border-color: var(--color-warning); } .pill.pill-history-on { background: var(--color-primary-subtle); color: var(--color-primary); border-color: var(--color-primary); } .tenant-card-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--fib-3); } .tenant-card-stat { display: flex; flex-direction: column; gap: 2px; } .tenant-card-stat-label { font-size: var(--font-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .tenant-card-stat-value { font-size: var(--font-base); font-weight: var(--weight-semibold); } .tenant-card-toggles { display: flex; gap: var(--fib-5); flex-wrap: wrap; padding-top: var(--fib-3); border-top: 1px solid var(--color-border); } .tenant-toggle { display: flex; align-items: center; gap: var(--fib-2); font-size: var(--font-sm); color: var(--color-text-muted); cursor: pointer; user-select: none; } .tenant-toggle input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 36px; height: 20px; border-radius: var(--radius-full); background: var(--color-border-strong); position: relative; cursor: pointer; transition: background var(--transition-base); flex-shrink: 0; } .tenant-toggle input[type="checkbox"]::before { content: ''; position: absolute; width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--color-surface); top: 2px; left: 2px; transition: left var(--transition-base); box-shadow: var(--shadow-sm); } .tenant-toggle input[type="checkbox"]:checked { background: var(--color-primary); } .tenant-toggle input[type="checkbox"]:checked::before { left: 18px; } .tenant-toggle input[type="checkbox"]:disabled { opacity: 0.5; cursor: not-allowed; } .tenant-toggle .toggle-disabled-hint { font-size: var(--font-xs); color: var(--color-text-subtle); margin-left: 4px; } .tenant-card-actions { display: flex; gap: var(--fib-2); } /* Tenant detail body inside the existing detail panel */ .tenant-detail h4 { font-size: var(--font-sm); font-weight: var(--weight-semibold); margin-top: var(--fib-5); margin-bottom: var(--fib-2); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); } .tenant-detail h4:first-child { margin-top: 0; } .tenant-detail .phones-list, .tenant-detail .ledger-list, .tenant-detail .callers-list { display: flex; flex-direction: column; gap: var(--fib-1); margin-bottom: var(--fib-3); } .phone-row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--fib-2); align-items: center; padding: var(--fib-2) var(--fib-3); background: var(--color-surface-hover); border-radius: var(--radius-sm); font-size: var(--font-sm); } .phone-row-number { font-family: var(--font-mono); } .phone-row-label { color: var(--color-text-muted); font-size: var(--font-xs); } .phone-add-form, .notif-edit-form { display: flex; flex-direction: column; gap: var(--fib-2); padding: var(--fib-3); background: var(--color-surface-hover); border-radius: var(--radius-sm); border: 1px dashed var(--color-border-strong); } .phone-add-form input, .notif-edit-form input, .notif-edit-form textarea { padding: var(--fib-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-size: var(--font-sm); } .notif-edit-form textarea { min-height: 60px; font-family: var(--font-mono); font-size: var(--font-xs); resize: vertical; } .notif-edit-form .form-row { display: flex; gap: var(--fib-3); align-items: center; font-size: var(--font-sm); } .ledger-row, .caller-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--fib-2); padding: var(--fib-2) var(--fib-3); background: var(--color-surface-hover); border-radius: var(--radius-sm); font-size: var(--font-xs); align-items: center; } .ledger-row-type, .caller-row-phone { font-family: var(--font-mono); } .ledger-row-delta-debit { color: var(--color-danger); } .ledger-row-delta-credit { color: var(--color-success); } .tenant-detail .empty-hint { font-size: var(--font-sm); color: var(--color-text-subtle); font-style: italic; } /* Role-based UI visibility (v0.6.0). body class set by admin.js after /v1/whoami: role-admin | role-customer | role-pending. */ body:not(.role-admin) .admin-only { display: none !important; } body:not(.role-customer) .customer-only { display: none !important; } /* Customer packages (v0.6.0) */ .packages-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--fib-3); margin-bottom: var(--fib-5); } .package-card { background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--fib-8); text-align: center; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--fib-2); } .package-card h3 { font-size: var(--font-xl); font-weight: var(--weight-bold); color: var(--color-text); } .package-card.package-card-featured { border-color: var(--color-primary); position: relative; } .package-card.package-card-featured::after { content: 'Recommended'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--color-primary); color: var(--color-primary-text); padding: 2px 12px; border-radius: var(--radius-full); font-size: var(--font-xs); font-weight: var(--weight-semibold); } .package-credits { font-size: var(--font-md); font-weight: var(--weight-semibold); } .package-detail { font-size: var(--font-sm); color: var(--color-text-muted); margin-bottom: var(--fib-3); } /* Customer account summary panel (v0.6.0) */ #account-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--fib-3); margin-bottom: var(--fib-5); } #account-summary .summary-tile { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--fib-3) var(--fib-5); box-shadow: var(--shadow-sm); } #account-summary .summary-tile .label { font-size: var(--font-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } #account-summary .summary-tile .value { font-size: var(--font-md); font-weight: var(--weight-semibold); margin-top: 2px; } #account-notif-form textarea { width: 100%; margin-top: var(--fib-1); padding: var(--fib-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--font-xs); background: var(--color-surface); } /* Setup wizard form */ #setup-form .form-row { display: flex; flex-direction: column; gap: var(--fib-1); margin-bottom: var(--fib-3); font-size: var(--font-sm); color: var(--color-text-muted); } #setup-form input[type="text"], #setup-form input[type="tel"] { padding: var(--fib-2) var(--fib-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-size: var(--font-base); color: var(--color-text); } /* Dispatch integration help block (v0.6.0 admin-onboarding help) */ .integration-help { background: var(--color-surface-hover); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--fib-2) var(--fib-3); margin-bottom: var(--fib-3); font-size: var(--font-sm); } .integration-help > summary { cursor: pointer; font-weight: var(--weight-medium); color: var(--color-primary); user-select: none; list-style: revert; padding: var(--fib-1) 0; } .integration-help > summary:hover { color: var(--color-primary-hover); } .integration-help-body { padding-top: var(--fib-2); border-top: 1px solid var(--color-border); margin-top: var(--fib-2); } .integration-help-body p, .integration-help-body ul, .integration-help-body ol { margin-bottom: var(--fib-2); } .integration-help-body ul, .integration-help-body ol { padding-left: var(--fib-5); } .integration-help-body li { margin-bottom: var(--fib-1); } .integration-help-body code { font-family: var(--font-mono); font-size: var(--font-xs); background: var(--color-surface); padding: 1px 4px; border-radius: 3px; border: 1px solid var(--color-border); } .integration-help-body pre { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--fib-2); font-family: var(--font-mono); font-size: var(--font-xs); overflow-x: auto; margin-top: var(--fib-1); }