:root { color-scheme: light; --ink: #17140f; --paper: #faf8f5; --surface: #ffffff; --border: #ece7e0; --muted: #78716c; --accent: #c2410c; --accent-hover: #9a3412; --accent-soft: #fdece1; --success: #16a34a; --success-soft: #dcfce7; --success-ink: #166534; --danger: #dc2626; --danger-soft: #fee2e2; --danger-ink: #991b1b; --warning: #d97706; --warning-soft: #fef3c7; --warning-ink: #92400e; --sidebar-bg: #17140f; --sidebar-text: #a8a29e; --sidebar-text-active: #faf8f5; /* Semantic colors extracted from previously-hardcoded values so dark mode is a clean token flip. Light values match the originals. */ --label-ink: #44403c; --ink-soft: #57534e; --surface-subtle: #fdfbf9; --surface-muted: #f4f1ec; --hover-border: #ddd6cc; --accent-border: #fbd3b8; --danger-border: #fecaca; --warning-border: #fde68a; --success-border: #bbf7d0; --success-hover: #15803d; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --shadow-card: 0 1px 2px rgba(23, 20, 15, 0.03), 0 8px 20px rgba(23, 20, 15, 0.05); --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* ============ DARK THEME ============ */ /* Applied when the theme-init script sets data-theme="dark" on (manual per-device toggle, saved in localStorage). A warm dark palette so the brand's warmth carries over. The sidebar tokens stay as-is since the sidebar is the darkest layer in both modes. */ :root[data-theme="dark"] { color-scheme: dark; --ink: #f4f0ea; --paper: #1c1915; --surface: #26221c; --border: #38332b; --muted: #a39c92; --accent: #e2551d; --accent-hover: #f06a2e; --accent-soft: #3a2318; --success: #22c55e; --success-soft: #16321f; --success-ink: #6ee7a8; --success-border: #1e5233; --success-hover: #16a34a; --danger: #ef4444; --danger-soft: #3a1d1d; --danger-ink: #fca5a5; --danger-border: #6b2b2b; --warning: #f59e0b; --warning-soft: #3a2e15; --warning-ink: #fcd34d; --warning-border: #6b5a1e; --label-ink: #d6d0c7; --ink-soft: #c4bdb2; --surface-subtle: #221e18; --surface-muted: #2c2820; --hover-border: #4a443b; --accent-border: #5e3a24; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 20px rgba(0, 0, 0, 0.4); } /* Smooth the flip so it doesn't feel jarring. */ body, .sidebar, .form-card, .table-card, .welcome-card, .search-card, .dashboard-panel, .kpi-card { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-sans); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; } h1, h2, h3 { letter-spacing: -0.01em; } .app-container { display: flex; min-height: 100vh; } /* ============ SIDEBAR (desktop) ============ */ .sidebar { width: 248px; flex-shrink: 0; background: var(--sidebar-bg); color: white; padding: 26px 16px; display: flex; flex-direction: column; } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 0 10px; margin-bottom: 32px; } .sidebar-brand-mark { width: 32px; height: 32px; border-radius: 9px; background: var(--accent); color: white; font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sidebar-brand-name { font-size: 18px; font-weight: 700; color: white; } .sidebar-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; } .sidebar-nav a { display: flex; align-items: center; gap: 11px; color: var(--sidebar-text); text-decoration: none; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; transition: 0.15s ease; } .sidebar-nav a:hover { background: rgba(255, 255, 255, 0.06); color: white; } .sidebar-nav a.active { background: rgba(194, 65, 12, 0.22); color: var(--sidebar-text-active); box-shadow: inset 3px 0 0 var(--accent); } .sidebar-nav .nav-icon { width: 18px; height: 18px; flex-shrink: 0; display: inline-flex; } .sidebar-nav .nav-icon svg { width: 100%; height: 100%; } .sidebar-divider { height: 1px; background: rgba(255, 255, 255, 0.08); margin: 10px 8px; } .sidebar-user { padding: 14px 10px 0; margin-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .sidebar-user p { font-size: 12.5px; color: var(--sidebar-text); line-height: 1.5; margin-bottom: 10px; } .sidebar-user strong { color: white; } .logout-link { display: inline-flex; align-items: center; color: #fca5a5; text-decoration: none; font-size: 13px; font-weight: 600; padding: 7px 0; } .logout-link:hover { color: #fecaca; } /* ============ THEME TOGGLE ============ */ .theme-toggle { width: 100%; display: flex; align-items: center; gap: 11px; background: transparent; color: var(--sidebar-text); border: none; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 500; cursor: pointer; margin-bottom: 12px; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.06); color: white; } .theme-toggle-icon { width: 18px; height: 18px; flex-shrink: 0; display: inline-flex; } .theme-toggle-icon svg { width: 100%; height: 100%; } /* Settings-page variant sits on a light/dark card, not the dark sidebar. */ .appearance-toggle { display: inline-flex; align-items: center; gap: 10px; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 18px; font-size: 14.5px; font-weight: 600; cursor: pointer; } .appearance-toggle:hover { border-color: var(--hover-border); } /* Show the icon + label for the mode you'll switch TO. */ .icon-moon { display: block; } .icon-sun { display: none; } .label-light { display: none; } :root[data-theme="dark"] .icon-moon { display: none; } :root[data-theme="dark"] .icon-sun { display: block; } :root[data-theme="dark"] .label-dark { display: none; } :root[data-theme="dark"] .label-light { display: inline; } /* ============ MOBILE BOTTOM NAV ============ */ .mobile-nav { display: none; } .mobile-settings-btn { display: none; } @media (max-width: 860px) { .sidebar { display: none; } .mobile-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--sidebar-bg); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); justify-content: space-between; z-index: 40; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12); } .mobile-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--sidebar-text); text-decoration: none; font-size: 10.5px; font-weight: 600; padding: 6px 2px; border-radius: 10px; } .mobile-nav a.active { color: white; background: rgba(194, 65, 12, 0.28); } .mobile-nav .nav-icon { width: 20px; height: 20px; } .mobile-nav .nav-icon svg { width: 100%; height: 100%; } .mobile-settings-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); color: var(--ink); } .mobile-settings-btn svg { width: 20px; height: 20px; } .top-header { flex-wrap: nowrap; align-items: center; } .top-header > div { flex: 1; min-width: 0; } .main-content { padding-bottom: 84px !important; } } /* ============ MAIN CONTENT SHELL ============ */ .main-content { flex: 1; padding: 36px; min-width: 0; } .top-header { margin-bottom: 28px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .top-header h2 { font-size: 30px; font-weight: 700; margin-bottom: 6px; } .top-header p { color: var(--muted); font-size: 14.5px; } /* ============ CARDS ============ */ .form-card, .table-card, .welcome-card, .search-card, .dashboard-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 28px; margin-bottom: 26px; } .form-card h3, .table-card h3 { font-size: 19px; font-weight: 700; margin-bottom: 18px; } /* ============ KPI CARDS ============ */ .priority-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 26px; } @media (max-width: 1100px) { .priority-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .priority-grid { grid-template-columns: 1fr; } } .kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 20px 22px; display: flex; align-items: flex-start; gap: 14px; } .kpi-icon { width: 40px; height: 40px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .kpi-icon svg { width: 20px; height: 20px; } .kpi-icon.tone-danger { background: var(--danger-soft); color: var(--danger-ink); } .kpi-body h3 { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; } .kpi-body p { color: var(--muted); font-size: 13px; margin-top: 4px; } /* ============ WELCOME / QUICK ACTIONS ============ */ .welcome-card.dashboard-welcome { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .welcome-card h3 { font-size: 21px; font-weight: 700; margin-bottom: 8px; } .welcome-card p { color: var(--muted); max-width: 520px; line-height: 1.6; font-size: 14.5px; } .dashboard-welcome p { max-width: 650px; } .quick-actions { display: flex; gap: 10px; flex-wrap: wrap; } button, .primary-link-btn { background: var(--accent); color: white; border: none; padding: 12px 20px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14.5px; font-weight: 600; text-decoration: none; display: inline-block; } button:hover, .primary-link-btn:hover { background: var(--accent-hover); } .secondary-link-btn, .rental-link-btn { background: var(--surface); color: var(--ink); border: 1px solid var(--border); padding: 12px 20px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14.5px; font-weight: 600; text-decoration: none; display: inline-block; } .secondary-link-btn:hover, .rental-link-btn:hover { border-color: var(--accent); color: var(--accent); } /* ============ DASHBOARD PANELS ============ */ .dashboard-panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 1000px) { .dashboard-panels { grid-template-columns: 1fr; } } .dashboard-panel h3 { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin-bottom: 16px; } .metric-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; } .metric-row:last-child { border-bottom: none; } .metric-row span { color: var(--muted); } .metric-row strong { font-variant-numeric: tabular-nums; font-weight: 700; } .highlight-row strong { color: var(--accent); } /* ============ FORMS ============ */ .customer-form { display: flex; flex-direction: column; gap: 18px; } .form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } .main-content { padding: 18px; } .top-header h2 { font-size: 24px; } } .form-group { display: flex; flex-direction: column; } .form-group label { font-weight: 600; margin-bottom: 8px; font-size: 13.5px; color: var(--label-ink); } .form-group input, .form-group textarea, .form-group select { padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14.5px; font-family: var(--font-sans); background: var(--surface); color: var(--ink); } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--accent); } .form-actions { display: flex; gap: 12px; align-items: center; } /* ============ TABLES ============ */ table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 8px; } th, td { padding: 14px; text-align: left; } th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--border); } td { color: var(--label-ink); border-bottom: 1px solid var(--surface-muted); font-size: 14px; } tbody tr { transition: background 0.12s ease; } tbody tr:hover { background: var(--surface-subtle); } .empty-message { color: var(--muted); margin-top: 10px; } /* ============ EMPTY STATES ============ */ .empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 44px 24px 40px; } .empty-state-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--surface-muted); color: var(--muted); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .empty-state-icon svg { width: 28px; height: 28px; } .empty-state-title { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 6px; } .empty-state-text { color: var(--muted); font-size: 14.5px; line-height: 1.55; max-width: 380px; margin-bottom: 18px; } .empty-state-action { display: inline-block; background: var(--accent); color: white; text-decoration: none; font-size: 14px; font-weight: 600; padding: 10px 20px; border-radius: var(--radius-sm); } .empty-state-action:hover { background: var(--accent-hover); } /* ============ ACTION BUTTONS ============ */ .action-buttons { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .action-buttons form { margin: 0; } .edit-btn, .cancel-btn, .pdf-btn, .sign-btn, .invoice-btn, .notes-btn, .job-btn, .photos-btn, .view-btn, .small-save-btn { text-decoration: none; border: 1px solid var(--border); padding: 7px 12px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; cursor: pointer; display: inline-block; background: var(--surface); color: var(--label-ink); transition: 0.12s ease; } .edit-btn:hover, .cancel-btn:hover, .pdf-btn:hover, .sign-btn:hover, .invoice-btn:hover, .notes-btn:hover, .job-btn:hover, .photos-btn:hover, .view-btn:hover, .small-save-btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hover); } .email-btn { border: 1px solid var(--accent); padding: 7px 12px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; cursor: pointer; display: inline-block; background: var(--accent); color: white; transition: 0.12s ease; } .email-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .delete-btn { text-decoration: none; border: 1px solid var(--danger-border); padding: 7px 12px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; cursor: pointer; display: inline-block; background: var(--danger-soft); color: var(--danger-ink); } .delete-btn:hover { background: var(--danger-border); } /* ============ STATUS PILLS ============ */ select.status-select { appearance: none; -webkit-appearance: none; border: none; font-weight: 700; font-size: 12px; padding: 6px 26px 6px 12px; border-radius: 999px; cursor: pointer; background-color: var(--surface-muted); color: var(--label-ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2378716c' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } select.status-select[data-tone="success"] { background-color: var(--success-soft); color: var(--success-ink); } select.status-select[data-tone="danger"] { background-color: var(--danger-soft); color: var(--danger-ink); } select.status-select[data-tone="warning"] { background-color: var(--warning-soft); color: var(--warning-ink); } /* ============ RENTALS: hauling badge + equipment specs (ported) ============ */ .hauling-badge { display: inline-block; background: var(--accent-soft); color: var(--accent-hover); border: 1px solid var(--accent-border); border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 700; margin-top: 4px; } .equipment-specs { margin-top: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; background: var(--surface-subtle); } .equipment-specs summary { cursor: pointer; font-weight: 600; color: var(--label-ink); font-size: 13px; } .equipment-specs-list { list-style: none; margin: 10px 0 0; padding: 0; } .equipment-specs-list li { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; color: var(--muted); border-bottom: 1px dashed var(--border); } .equipment-specs-list li strong { color: var(--ink); } .equipment-pricing { display: flex; gap: 14px; margin-top: 12px; } .equipment-pricing div { flex: 1; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px; } .equipment-pricing strong { display: block; color: var(--accent); font-size: 15px; } .equipment-pricing small { color: var(--muted); font-size: 11px; } .equipment-built-for { margin-top: 10px; font-size: 12px; color: var(--muted); } .service-type-group { margin-top: 4px; } .service-type-options { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; } .service-type-option { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--label-ink); font-size: 14px; } .service-type-option input { width: auto; } /* ============ SEARCH ============ */ .search-form { display: flex; gap: 12px; } .search-form input { flex: 1; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14.5px; font-family: var(--font-sans); background: var(--surface); color: var(--ink); } .search-form input:focus { outline: none; border-color: var(--accent); } /* ============ AUTH / PUBLIC PAGES ============ */ .auth-page, .sign-page { min-height: 100vh; background: var(--paper); display: flex; justify-content: center; align-items: center; padding: 30px; } .sign-page { align-items: flex-start; } .auth-card, .sign-card { background: var(--surface); width: 100%; max-width: 430px; padding: 35px; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); border: 1px solid var(--border); } .auth-card h1 { font-size: 34px; margin-bottom: 8px; color: var(--ink); } .auth-card h2 { font-size: 24px; margin-bottom: 8px; color: var(--ink); } .auth-card p { color: var(--muted); line-height: 1.5; margin-bottom: 22px; } .sign-card { max-width: 650px; padding: 28px; } .sign-card h1 { font-size: 28px; margin-bottom: 8px; } .sign-card h2 { margin-bottom: 18px; color: var(--muted); font-weight: 600; font-size: 16px; } .auth-form { display: flex; flex-direction: column; gap: 18px; } .auth-error { background: var(--danger-soft); color: var(--danger-ink); padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size: 14px; } .success-message { background: var(--success-soft); color: var(--success-ink); padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size: 14px; } .auth-footer-text { margin-top: 22px; margin-bottom: 0 !important; font-size: 14px; text-align: center; } .auth-footer-text a { color: var(--accent); text-decoration: none; font-weight: 600; } /* ============ SPLIT-PANEL AUTH PAGES (login/register) ============ */ .split-auth-page { min-height: 100vh; background: var(--paper); display: flex; justify-content: center; align-items: center; padding: 24px; } .split-auth-shell { width: 100%; max-width: 1000px; min-height: 620px; display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: 32px; box-shadow: var(--shadow-card); overflow: hidden; } .split-auth-form-panel { flex: 1 1 50%; min-width: 0; padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; } .split-auth-brand { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--muted); margin-bottom: 28px; } .split-auth-brand .brand-mark { width: 26px; height: 26px; border-radius: 8px; background: var(--accent); color: white; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; } .auth-mode-toggle { display: inline-flex; align-self: flex-start; background: var(--paper); border: 1px solid var(--border); border-radius: 999px; padding: 4px; gap: 2px; margin-bottom: 32px; } .auth-mode-toggle a { padding: 8px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: none; } .auth-mode-toggle a.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); } .split-auth-form-panel h1 { font-size: 30px; font-weight: 700; color: var(--ink); margin-bottom: 8px; } .split-auth-subtitle { color: var(--muted); margin-bottom: 28px; } .split-auth-footer-text { margin-top: 24px; font-size: 14px; text-align: center; color: var(--muted); } .split-auth-footer-text a { color: var(--accent); font-weight: 600; text-decoration: none; } .split-auth-image-panel { position: relative; flex: 1 1 50%; min-width: 0; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%); } .split-auth-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.8s ease; } .split-auth-slide.active { opacity: 1; } .split-auth-slide img { width: 100%; height: 100%; object-fit: cover; } .split-auth-placeholder-mark { font-size: 130px; font-weight: 800; color: rgba(255, 255, 255, 0.18); } .split-auth-dots { position: absolute; bottom: 24px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; } .split-auth-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); } .split-auth-dot.active { background: white; } .split-auth-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; padding: 0; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.32); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; } .split-auth-arrow:hover { background: rgba(0, 0, 0, 0.5); } .split-auth-arrow svg { width: 18px; height: 18px; } .split-auth-arrow.prev { left: 16px; } .split-auth-arrow.next { right: 16px; } @media (max-width: 860px) { .split-auth-image-panel { display: none; } .split-auth-shell { border-radius: 20px; min-height: 0; } .split-auth-form-panel { padding: 32px 24px; } } .sign-summary { background: var(--surface-subtle); padding: 16px; border-radius: var(--radius-md); margin-bottom: 20px; } .sign-summary p { margin-bottom: 8px; } .sign-link-card { background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--accent-hover); padding: 18px; border-radius: var(--radius-md); margin-bottom: 25px; } .sign-link-card h3 { margin-bottom: 8px; } .agreement-box { background: var(--surface-subtle); border: 1px solid var(--border); padding: 14px; border-radius: var(--radius-sm); margin: 16px 0; } .signature-actions { display: flex; gap: 12px; margin-top: 16px; } .signature-actions button { flex: 1; } /* ============ DASHBOARD (legacy stat-card, kept for compatibility) ============ */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 30px; } @media (max-width: 1100px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .stats-grid { grid-template-columns: 1fr; } } .stat-card { background: var(--surface); padding: 25px; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); border: 1px solid var(--border); } .stat-card h3 { font-size: 32px; color: var(--accent); } .priority-card h3 { font-size: 32px; } /* ============ MISC ADMIN / DATA CARDS ============ */ .summary-card { background: var(--surface); padding: 25px 30px; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); border: 1px solid var(--border); margin-bottom: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; } @media (max-width: 900px) { .summary-card { grid-template-columns: 1fr; } } .summary-card h3 { font-size: 16px; color: var(--label-ink); } .summary-card p { color: var(--muted); margin-bottom: 4px; } .big-total { font-size: 34px; font-weight: bold; color: var(--accent) !important; } .section-header-row { display: flex; justify-content: space-between; align-items: center; } .inline-form { display: flex; gap: 8px; align-items: center; } .inline-form input[type="date"] { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; } .role-badge { display: inline-block; background: var(--accent-soft); color: var(--accent-hover); padding: 7px 10px; border-radius: 999px; font-size: 13px; text-transform: capitalize; } /* ============ JOB NOTES ============ */ .notes-list { display: flex; flex-direction: column; gap: 15px; } .note-card { border: 1px solid var(--border); background: var(--surface-subtle); padding: 18px; border-radius: var(--radius-md); } .note-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .note-header strong { color: var(--label-ink); font-size: 14px; } .note-card p { color: var(--ink-soft); line-height: 1.5; } /* ============ JOB PHOTOS ============ */ .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 20px; } @media (max-width: 1100px) { .photo-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .photo-grid { grid-template-columns: 1fr; } } .photo-card { background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .photo-card img { width: 100%; height: 220px; object-fit: cover; display: block; } .photo-card-body { padding: 15px; } .photo-badge { display: inline-block; background: var(--accent); color: white; padding: 5px 9px; border-radius: 999px; font-size: 12px; margin-bottom: 8px; } .photo-date { color: var(--muted); font-size: 13px; margin-bottom: 8px; } .photo-notes { color: var(--label-ink); line-height: 1.5; margin-bottom: 12px; } /* ============ AI ASSISTANT ============ */ .ai-card { background: var(--surface); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-card); border: 1px solid var(--border); max-width: 950px; } .ai-intro { margin-bottom: 20px; } .ai-intro h3 { font-size: 22px; color: var(--ink); margin-bottom: 8px; } .ai-intro p { color: var(--muted); } .ai-suggestions { background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; margin-bottom: 20px; } .ai-suggestions p { margin-bottom: 10px; color: var(--label-ink); } .ai-suggestions div { display: flex; gap: 10px; flex-wrap: wrap; } .ai-suggestions button { background: var(--accent-soft); color: var(--accent-hover); border: 1px solid var(--accent-border); border-radius: 999px; padding: 8px 12px; cursor: pointer; font-size: 13px; font-weight: 600; } .ai-suggestions button:hover { background: var(--accent-border); } .ai-form { display: flex; flex-direction: column; gap: 12px; } .ai-form label { font-weight: 600; color: var(--label-ink); } .ai-form textarea { width: 100%; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 15px; resize: vertical; min-height: 120px; font-family: var(--font-sans); } .ai-form textarea:focus { outline: none; border-color: var(--accent); } .ai-form button { align-self: flex-start; } .ai-conversation-note { margin-bottom: 16px; background: var(--surface-muted); color: var(--ink-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; } .ai-thread { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; } .ai-bubble { max-width: 85%; padding: 14px 16px; border-radius: var(--radius-md); line-height: 1.5; } .ai-bubble p { white-space: pre-wrap; } .ai-bubble-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; opacity: 0.7; } .ai-bubble-user { align-self: flex-end; background: var(--accent-soft); color: var(--accent-hover); } .ai-bubble-assistant { align-self: flex-start; background: var(--surface-muted); color: var(--ink); } .ai-bubble-action-note { margin-top: 8px; font-size: 12px; font-style: italic; color: var(--accent-hover); } .ai-answer { margin-top: 24px; background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--ink); padding: 20px; border-radius: var(--radius-md); } .ai-answer h3 { margin-bottom: 10px; color: var(--accent-hover); } .ai-answer p { white-space: pre-wrap; line-height: 1.55; } .ai-confirm-box { margin-top: 22px; background: var(--warning-soft); border: 1px solid var(--warning-border); border-radius: var(--radius-md); padding: 20px; } .ai-confirm-box h3 { color: var(--warning-ink); margin-bottom: 8px; } .ai-action-preview { background: var(--surface); border: 1px solid var(--warning-border); border-radius: var(--radius-md); padding: 14px; margin-top: 14px; } .ai-action-preview pre { white-space: pre-wrap; overflow-x: auto; margin-top: 8px; font-size: 13px; color: var(--label-ink); } .ai-confirm-form { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; } .ai-confirm-form button { background: var(--success); } .ai-confirm-form button:hover { background: var(--success-hover); } .ai-confirm-form a { color: var(--muted); text-decoration: none; font-weight: 600; } .ai-result { margin-bottom: 20px; background: var(--success-soft); border: 1px solid var(--success-border); color: var(--success-ink); padding: 18px; border-radius: var(--radius-md); } .ai-result h3 { margin-bottom: 8px; } .ai-result p { white-space: pre-wrap; line-height: 1.55; } /* ============ MOBILE NAV PICKER (Settings) ============ */ .mobile-nav-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; } @media (max-width: 640px) { .mobile-nav-picker { grid-template-columns: repeat(2, 1fr); } } .mobile-nav-option { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px; font-weight: 500; color: var(--label-ink); cursor: pointer; } .mobile-nav-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); } .mobile-nav-option input { width: auto; } /* ============ TOAST NOTIFICATIONS ============ */ .toast-stack { position: fixed; top: 20px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 12px; width: 360px; max-width: calc(100vw - 40px); pointer-events: none; } .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--muted); border-radius: var(--radius-md); box-shadow: 0 6px 24px rgba(23, 20, 15, 0.12); padding: 14px 16px; animation: toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .toast-leaving { animation: toast-out 0.3s ease forwards; } @keyframes toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } @keyframes toast-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(24px); } } .toast-icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; margin-top: 1px; } .toast-icon svg { width: 14px; height: 14px; } .toast-message { flex: 1; min-width: 0; font-size: 14px; line-height: 1.45; color: var(--ink); font-weight: 500; } .toast-close { flex-shrink: 0; width: 22px; height: 22px; padding: 0; background: transparent; border: none; border-radius: 6px; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; } .toast-close:hover { background: var(--paper); color: var(--ink); } .toast-close svg { width: 14px; height: 14px; } .toast-success { border-left-color: var(--success); } .toast-success .toast-icon { background: var(--success); } .toast-error { border-left-color: var(--danger); } .toast-error .toast-icon { background: var(--danger); } .toast-info { border-left-color: var(--accent); } .toast-info .toast-icon { background: var(--accent); } @media (max-width: 640px) { .toast-stack { top: auto; bottom: 84px; left: 16px; right: 16px; width: auto; } } /* ============ DASHBOARD: CLICKABLE KPI CARDS ============ */ .kpi-card { text-decoration: none; color: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .kpi-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(23, 20, 15, 0.09); border-color: var(--hover-border); } /* ============ DASHBOARD: ALERT CARDS ============ */ .dashboard-alerts { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; } .alert-card { display: flex; align-items: center; gap: 14px; background: var(--danger-soft); border: 1px solid rgba(220, 38, 38, 0.25); border-radius: var(--radius-lg); padding: 16px 20px; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; } .alert-card:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(220, 38, 38, 0.14); } .alert-icon { width: 40px; height: 40px; border-radius: 11px; background: var(--danger); color: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .alert-icon svg { width: 22px; height: 22px; } .alert-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .alert-body strong { font-size: 15px; font-weight: 700; color: var(--danger-ink); } .alert-body span { font-size: 13.5px; color: var(--danger-ink); opacity: 0.82; } .alert-arrow { flex-shrink: 0; color: var(--danger-ink); opacity: 0.7; display: flex; } .alert-arrow svg { width: 18px; height: 18px; } /* ============ DASHBOARD: REVENUE CHART ============ */ .chart-panel { margin-bottom: 26px; } .chart-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .revenue-chart-svg { width: 100%; height: auto; display: block; } .revenue-chart-svg text { font-family: var(--font-sans); } .chart-bar { fill: var(--accent); } .chart-baseline { stroke: var(--border); stroke-width: 1; } .chart-value { fill: var(--muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; } .chart-month { fill: var(--muted); font-size: 12px; } .chart-empty { padding: 26px 4px 8px; } .chart-empty p { color: var(--muted); font-size: 14.5px; line-height: 1.55; max-width: 460px; }