/* ============================================================================ * ui-theme.css * * Central design system for HomePros desktop/web pages. Ports the modern * Go-Time / Franchise View Settings look into a reusable --ui-* token kit * plus generic .ui-* component classes. * * Loading this file is harmless on its own: nothing visually changes until a * page sets and uses .ui-* class names. That keeps * legacy pages 100% intact while we migrate them one by one. * * Source palette and tap-target sizes mirror go-time.php (canonical mobile); * desktop layout primitives (.ui-shell, .ui-card, .ui-table, .ui-stat, ...) * are generalized from franchise_view_settings.php. * ============================================================================ */ /* ============================================================================ * Tokens * ============================================================================ */ :root { --ui-bg: #fafafa; --ui-bg-card: #ffffff; --ui-bg-soft: #fbfbfb; --ui-text: #333333; --ui-text-soft: #6b7280; --ui-muted: #9e9e9e; --ui-border: #eeeeee; --ui-border-strong: #e0e0e0; --ui-primary: #00d4ff; --ui-primary-deep: #0096b5; --ui-primary-soft: #f0fbfe; --ui-primary-edge: #cfeef6; --ui-success: #28a745; --ui-success-soft: #e8f8ee; --ui-danger: #ff4444; --ui-danger-soft: #fdecec; --ui-warning: #fd7e14; --ui-warning-soft: #fff4e6; --ui-row-hover: #f7fbfd; --ui-status-estimate: #6c757d; --ui-status-scheduled:#007bff; --ui-status-en-route: #17a2b8; --ui-status-started: #fd7e14; --ui-status-finished: #28a745; --ui-radius-sm: 6px; --ui-radius: 8px; --ui-radius-lg: 12px; --ui-radius-pill: 999px; --ui-shadow-card: 0 1px 2px rgba(0, 0, 0, .03); --ui-shadow-pop: 0 4px 12px rgba(0, 0, 0, .08); --ui-shadow-focus: 0 0 0 3px rgba(0, 212, 255, .15); --ui-shell-max: 1600px; --ui-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; --ui-font-mono: 'SF Mono', Menlo, Consolas, monospace; --ui-safe-top: env(safe-area-inset-top, 0px); --ui-safe-bottom: env(safe-area-inset-bottom, 0px); } /* ============================================================================ * Body opt-in * Pages set to adopt the system fonts + bg + reset. * We DO NOT touch unprefixed body/html so legacy pages keep Poppins, etc. * ============================================================================ */ body.ui-page { background: var(--ui-bg) !important; color: var(--ui-text); font-family: var(--ui-font); } body.ui-page input, body.ui-page select, body.ui-page textarea { /* Match go-time: 16px base prevents iOS zoom on focus */ font-size: 16px; } body.ui-page button.ui-btn, body.ui-page .ui-tappable { min-height: 44px; cursor: pointer; } /* ============================================================================ * Layout primitives * ============================================================================ */ .ui-shell { padding: 24px 32px 64px; max-width: var(--ui-shell-max); margin: 0 auto; } .ui-page-header { margin-bottom: 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .ui-page-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 4px; color: var(--ui-text); display: flex; align-items: center; gap: 10px; } .ui-title-icon { width: 32px; height: 32px; border-radius: var(--ui-radius); background: linear-gradient(135deg, var(--ui-primary) 0%, var(--ui-primary-deep) 100%); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .ui-page-subtitle { color: var(--ui-text-soft); font-size: .9rem; margin: 0; max-width: 760px; line-height: 1.45; } /* ============================================================================ * Stats strip * ============================================================================ */ .ui-stats { display: flex; gap: 12px; flex-wrap: wrap; } .ui-stat { background: var(--ui-bg-card); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); padding: 10px 16px; min-width: 110px; } .ui-stat-label { font-size: .72rem; color: var(--ui-muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; } .ui-stat-value { font-size: 1.2rem; font-weight: 700; color: var(--ui-text); line-height: 1.2; margin-top: 2px; font-variant-numeric: tabular-nums; } /* ============================================================================ * Card * ============================================================================ */ .ui-card { background: var(--ui-bg-card); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); overflow: hidden; box-shadow: var(--ui-shadow-card); margin-bottom: 16px; } .ui-card-header { padding: 14px 20px; border-bottom: 1px solid var(--ui-border); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .ui-card-header h2, .ui-card-header .ui-card-title { margin: 0; font-size: .95rem; font-weight: 700; color: var(--ui-text); display: flex; align-items: center; gap: 8px; } .ui-card-header h2 i, .ui-card-header .ui-card-title i { color: var(--ui-primary-deep); } .ui-card-header .ui-card-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ui-card-body { padding: 16px 20px; } /* Info banner (cyan, left-bordered) */ .ui-info { margin: 16px 20px 0; padding: 12px 14px; background: var(--ui-primary-soft); border: 1px solid var(--ui-primary-edge); border-left: 4px solid var(--ui-primary); border-radius: var(--ui-radius); color: #07485a; font-size: .87rem; line-height: 1.45; } .ui-info i { color: var(--ui-primary-deep); margin-right: 4px; } .ui-info--success { background: var(--ui-success-soft); border-color: #cdebd6; border-left-color: var(--ui-success); color: #14532d; } .ui-info--danger { background: var(--ui-danger-soft); border-color: #f5c2c2; border-left-color: var(--ui-danger); color: #7f1d1d; } .ui-info--warning { background: var(--ui-warning-soft); border-color: #ffd9a8; border-left-color: var(--ui-warning); color: #7c2d12; } /* ============================================================================ * Tables * ============================================================================ */ .ui-table-wrap { padding: 8px 0 0; overflow-x: auto; } table.ui-table { width: 100%; border-collapse: separate; border-spacing: 0; } table.ui-table thead th { text-align: left; padding: 12px 18px; font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; color: var(--ui-muted); background: var(--ui-bg-soft); border-bottom: 1px solid var(--ui-border); border-top: 1px solid var(--ui-border); position: sticky; top: 0; z-index: 1; white-space: nowrap; } table.ui-table thead th:first-child { padding-left: 24px; } table.ui-table thead th:last-child { padding-right: 24px; } table.ui-table tbody td { padding: 14px 18px; border-bottom: 1px solid var(--ui-border); vertical-align: middle; color: var(--ui-text); font-size: .92rem; } table.ui-table tbody td:first-child { padding-left: 24px; } table.ui-table tbody td:last-child { padding-right: 24px; } table.ui-table tbody tr { transition: background .12s; } table.ui-table tbody tr:hover { background: var(--ui-row-hover); } .ui-pill { display: inline-flex; align-items: center; justify-content: center; background: #f3f4f6; color: var(--ui-text-soft); font-weight: 600; font-size: .8rem; padding: 3px 10px; border-radius: var(--ui-radius-pill); font-variant-numeric: tabular-nums; min-width: 36px; } /* ============================================================================ * Forms * ============================================================================ */ .ui-input, .ui-select, .ui-textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius); background: var(--ui-bg-card); color: var(--ui-text); font-size: .92rem; font-family: var(--ui-font); transition: border-color .15s, box-shadow .15s; } .ui-input:focus, .ui-select:focus, .ui-textarea:focus { outline: none; border-color: var(--ui-primary); box-shadow: var(--ui-shadow-focus); } .ui-textarea { min-height: 80px; resize: vertical; } .ui-input::placeholder { color: #cbd5e1; } .ui-search-input { width: 100%; padding: 8px 12px 8px 36px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius); background: var(--ui-bg-card) url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239e9e9e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='11' cy='11' r='8'/%3e%3cpath d='m21 21-4.3-4.3'/%3e%3c/svg%3e") no-repeat 10px center; background-size: 16px 16px; font-size: .9rem; color: var(--ui-text); font-family: var(--ui-font); } .ui-search-input:focus { outline: none; border-color: var(--ui-primary); box-shadow: var(--ui-shadow-focus); } .ui-phone-input { padding: 8px 12px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius); width: 100%; max-width: 200px; font-variant-numeric: tabular-nums; letter-spacing: .04em; font-size: .92rem; background: var(--ui-bg-card); color: var(--ui-text); transition: border-color .15s, box-shadow .15s; } .ui-phone-input::placeholder { color: #cbd5e1; } .ui-phone-input:focus { outline: none; border-color: var(--ui-primary); box-shadow: var(--ui-shadow-focus); } .ui-phone-input.is-complete { border-color: var(--ui-success); } .ui-phone-input.is-invalid { border-color: var(--ui-danger); } .ui-field-label { display: block; font-size: .78rem; color: var(--ui-text-soft); font-weight: 600; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 6px; } /* ============================================================================ * Buttons * ============================================================================ */ .ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: var(--ui-radius); font-size: .85rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background .12s, border-color .12s, color .12s, transform .05s; text-decoration: none; line-height: 1.2; font-family: var(--ui-font); background: var(--ui-bg-card); color: var(--ui-text); } .ui-btn:active { transform: translateY(1px); } .ui-btn[disabled], .ui-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; } .ui-btn:focus-visible { outline: none; box-shadow: var(--ui-shadow-focus); } .ui-btn-primary { background: var(--ui-primary); color: #fff; border-color: var(--ui-primary); } .ui-btn-primary:hover { background: var(--ui-primary-deep); border-color: var(--ui-primary-deep); color: #fff; } .ui-btn-outline { background: transparent; color: var(--ui-text); border-color: var(--ui-border-strong); } .ui-btn-outline:hover { border-color: var(--ui-primary); color: var(--ui-primary-deep); } .ui-btn-ghost { background: transparent; color: var(--ui-text-soft); border-color: transparent; } .ui-btn-ghost:hover { background: #f3f4f6; color: var(--ui-text); } .ui-btn-success { background: var(--ui-success); color: #fff; border-color: var(--ui-success); } .ui-btn-success:hover { background: #1f8a39; border-color: #1f8a39; color: #fff; } .ui-btn-danger { background: var(--ui-danger); color: #fff; border-color: var(--ui-danger); } .ui-btn-danger:hover { background: #d83232; border-color: #d83232; color: #fff; } .ui-btn-sm { padding: 5px 10px; font-size: .78rem; } .ui-btn-lg { padding: 11px 20px; font-size: .95rem; } /* ============================================================================ * Toggle (Bootstrap form-switch restyle, mirrors franchise_view_settings) * ============================================================================ */ .ui-toggle-cell { display: flex; align-items: center; gap: 10px; } .ui-toggle-cell .form-check { padding-left: 2.6em; margin: 0; min-height: auto; } .ui-toggle-cell .form-check-input { width: 2.2em; height: 1.2em; margin-left: -2.6em; cursor: pointer; border-color: var(--ui-border-strong); background-color: #e5e7eb; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e"); } .ui-toggle-cell .form-check-input:focus { box-shadow: var(--ui-shadow-focus); border-color: var(--ui-primary); } .ui-toggle-cell .form-check-input:checked { background-color: var(--ui-primary); border-color: var(--ui-primary); } .ui-toggle-state { font-size: .78rem; color: var(--ui-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .8px; min-width: 26px; } .ui-toggle-state.is-on { color: var(--ui-success); } .ui-toggle-state.is-off { color: var(--ui-muted); } /* ============================================================================ * Badges * ============================================================================ */ .ui-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--ui-radius-pill); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #fff; background: var(--ui-muted); line-height: 1.4; } .ui-badge--estimate { background: var(--ui-status-estimate); } .ui-badge--scheduled { background: var(--ui-status-scheduled); } .ui-badge--en-route { background: var(--ui-status-en-route); } .ui-badge--started { background: var(--ui-status-started); } .ui-badge--finished { background: var(--ui-status-finished); } .ui-badge--success { background: var(--ui-success); } .ui-badge--warning { background: var(--ui-warning); } .ui-badge--danger { background: var(--ui-danger); } .ui-badge--soft { background: #f3f4f6; color: var(--ui-text-soft); } /* ============================================================================ * Sub-nav (corporate-style horizontal pills) * ============================================================================ */ .ui-sub-nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0; margin-bottom: 18px; } .ui-sub-nav-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--ui-radius-sm); font-size: .8125rem; font-weight: 600; text-decoration: none; transition: all .2s; border: 1px solid var(--ui-border-strong); background: var(--ui-bg-card); color: var(--ui-text); } .ui-sub-nav-btn:hover { border-color: var(--ui-primary); color: var(--ui-primary-deep); } .ui-sub-nav-btn.active { background: var(--ui-primary); color: #fff; border-color: var(--ui-primary); } .ui-sub-nav-btn.active:hover { color: #fff; } /* ============================================================================ * Utility * ============================================================================ */ .ui-row-status { margin-left: 10px; font-size: .8rem; color: var(--ui-text-soft); transition: color .15s; } .ui-row-status.is-saving { color: var(--ui-muted); } .ui-row-status.is-saved { color: var(--ui-success); } .ui-row-status.is-error { color: var(--ui-danger); } .ui-empty { color: #b0b6be; font-style: italic; font-size: .85rem; } .ui-divider { height: 1px; background: var(--ui-border); margin: 16px 0; border: 0; } .ui-stack { display: flex; flex-direction: column; gap: 12px; } .ui-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* ============================================================================ * Breakpoints * ≥1200 desktop default * ≤992 card-header search slot full width, table padding tightens * ≤768 shell padding 16px, stats/header stack * ≤576 table cells 12px padding, ui-stat min-width drops * ============================================================================ */ @media (max-width: 992px) { .ui-card-header .ui-card-actions { margin-left: 0; width: 100%; } table.ui-table thead th, table.ui-table tbody td { padding: 12px 12px; } table.ui-table thead th:first-child, table.ui-table tbody td:first-child { padding-left: 16px; } table.ui-table thead th:last-child, table.ui-table tbody td:last-child { padding-right: 16px; } } @media (max-width: 768px) { .ui-shell { padding: 16px; } .ui-page-header { flex-direction: column; align-items: stretch; } .ui-stats { width: 100%; } .ui-card-header { padding: 12px 16px; } .ui-card-body { padding: 14px 16px; } .ui-info { margin: 12px 16px 0; } .ui-page-title { font-size: 1.25rem; } } @media (max-width: 576px) { table.ui-table thead th, table.ui-table tbody td { padding: 10px 10px; font-size: .85rem; } .ui-stat { flex: 1 1 130px; min-width: 0; } .ui-stat-value { font-size: 1.05rem; } } /* ============================================================================ * Dark mode (deferred — opt-in via body.ui-page.dark-mode) * Mirrors includes/go_time_theme.php; no JS toggle wired in Phase 1. * ============================================================================ */ body.ui-page.dark-mode { --ui-bg: #121212; --ui-bg-card: #1e1e1e; --ui-bg-soft: #181818; --ui-text: #e0e0e0; --ui-text-soft: #aaaaaa; --ui-muted: #888888; --ui-border: #2a2a2a; --ui-border-strong: #3a3a3a; --ui-row-hover: #1a242a; --ui-primary-soft: #07303a; --ui-primary-edge: #0e4a59; color-scheme: dark; } body.ui-page.dark-mode .ui-pill { background: #2a2a2a; color: var(--ui-text-soft); } body.ui-page.dark-mode .ui-btn-ghost:hover { background: #2a2a2a; color: var(--ui-text); } body.ui-page.dark-mode .ui-input::placeholder, body.ui-page.dark-mode .ui-phone-input::placeholder { color: #555; }