:root { /* Palette sampled directly from the Allied logo and alliedbiz.co.za site: --red is the logo wordmark red; --blue/--blue-dark are the deep teal-blue from the site's footer gradient (kept dark enough for text/button contrast); --blue-accent is the vivid sky-blue used across the site's hero/footer backgrounds, reserved for decorative accents rather than small text. */ --blue: #08567d; --blue-dark: #063e5a; --blue-light: #e6f5fc; --blue-accent: #0098e4; --red: #d9232e; --red-dark: #a31a22; --red-light: #fcedee; --white: #ffffff; --gray-50: #f7f8fa; --gray-100: #eef0f3; --gray-200: #dde1e6; --gray-300: #c3c9d1; --gray-400: #9aa2ad; --gray-600: #5b6470; --gray-800: #262b33; --radius: 8px; --shadow: 0 1px 3px rgba(20, 30, 60, 0.08), 0 1px 2px rgba(20, 30, 60, 0.06); --sidebar-width: 240px; /* Sidebar: light blue fill with dark, high-contrast text on top; Topbar: light grey, reusing --gray-100 which was already the exact shade we want. */ --sidebar-bg: #a6c9ec; --sidebar-text: var(--gray-800); --sidebar-text-muted: var(--blue-dark); --sidebar-active-bg: var(--white); --sidebar-hover-bg: rgba(255, 255, 255, 0.4); --sidebar-divider: rgba(6, 62, 90, 0.18); --sidebar-count-bg: rgba(255, 255, 255, 0.6); --topbar-bg: var(--gray-100); /* Status/semantic tints used by flashes, badges and pills. Kept as variables (rather than one-off hex values) so the dark theme below can swap them in one place. */ --success-bg: #e6f4ea; --success-text: #1e7a3d; --success-border: #c3ecd3; --warning-bg: #fff2cf; --warning-text: #8a6400; --warning-border: #f7e3a3; --due-bg: #ffe8cf; --due-text: #a15a12; --danger-border: #f3b9c0; --info-border: #cdd9f2; /* Extra tints, Customer Type badges only (Government/Doctor) -- kept separate from the semantic status colors above so a Type badge is never mistaken for a status/warning indicator. */ --purple-bg: #f1e9fb; --purple-text: #6b3fa0; --teal-bg: #e1f4f3; --teal-text: #157a72; color-scheme: light; } /* ========================================================================== Dark theme Toggled by setting data-theme="dark" on (see theme.js). Every rule in this file is written against the variables above, so re-pointing them here is enough to re-skin the whole app — no rule below this block needed its own dark-mode override. ========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; --blue: #3d8fd6; --blue-dark: #82c4f5; --blue-light: rgba(61, 143, 214, 0.16); --blue-accent: #58a6e0; --red: #e0626d; --red-dark: #ffb3ba; --red-light: rgba(224, 82, 96, 0.16); --white: #1b212c; --gray-50: #10141b; --gray-100: #202836; --gray-200: #2c3646; --gray-300: #3c4759; --gray-400: #838da0; --gray-600: #aab2c2; --gray-800: #e7ebf1; --shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35); --sidebar-bg: #131a24; --sidebar-hover-bg: rgba(255, 255, 255, 0.06); --sidebar-divider: rgba(255, 255, 255, 0.08); --sidebar-count-bg: rgba(255, 255, 255, 0.12); --success-bg: rgba(46, 160, 90, 0.16); --success-text: #6fd38f; --success-border: rgba(46, 160, 90, 0.35); --warning-bg: rgba(217, 168, 30, 0.16); --warning-text: #e8c05f; --warning-border: rgba(217, 168, 30, 0.35); --due-bg: rgba(224, 122, 41, 0.16); --due-text: #f0a868; --danger-border: rgba(224, 82, 96, 0.35); --info-border: rgba(61, 143, 214, 0.35); --purple-bg: rgba(155, 107, 214, 0.16); --purple-text: #c9a6ee; --teal-bg: rgba(45, 176, 168, 0.16); --teal-text: #6fd9d0; /* .btn-primary / .quick-add-menu use --blue-dark as a hover/pressed background elsewhere in the light theme; in dark mode --blue-dark is repurposed as a light "text on tinted background" color (badges, active nav item, etc.), so pressed states get their own darker blue here instead of reusing it. */ --blue-press: #1f6fb0; --red-press: #b8434c; } :root[data-theme="dark"] .btn-primary:hover { background: var(--blue-press); } :root[data-theme="dark"] .quick-add-menu summary:hover, :root[data-theme="dark"] .quick-add-menu[open] summary { background: var(--blue-press); } :root[data-theme="dark"] .btn-danger:hover { background: var(--red-press); } :root[data-theme="dark"] .auth-page { background: var(--sidebar-bg); } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--gray-50); color: var(--gray-800); min-height: 100vh; } a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------- App shell (sidebar + main) ---------- */ .app-shell { display: flex; min-height: 100vh; align-items: stretch; } /* ---------- Sidebar ---------- */ .sidebar { width: var(--sidebar-width); flex: 0 0 var(--sidebar-width); background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-divider); display: flex; flex-direction: column; position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; } .sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 20px 20px 18px; border-bottom: 1px solid var(--sidebar-divider); } .brand-icon-img { height: 32px; width: auto; flex-shrink: 0; display: block; } .brand-text { min-width: 0; } .brand-title { font-weight: 700; font-size: 14px; color: var(--sidebar-text); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-subtitle { font-size: 12px; color: var(--sidebar-text-muted); margin-top: 1px; } .sidebar-nav { flex: 1; padding: 14px 12px; display: flex; flex-direction: column; gap: 2px; } .sidebar-nav a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--radius); color: var(--sidebar-text); font-weight: 500; font-size: 14px; } .sidebar-nav a:hover { background: var(--sidebar-hover-bg); text-decoration: none; } .sidebar-nav a.active { background: var(--sidebar-active-bg); color: var(--blue-dark); box-shadow: var(--shadow); } .nav-label { display: flex; align-items: center; gap: 10px; } .nav-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--sidebar-text-muted); } .nav-icon svg { display: block; width: 100%; height: 100%; } .sidebar-nav a.active .nav-icon { color: var(--blue-dark); } /* Pins Reports and Admin to the bottom of the sidebar nav, directly above the sidebar footer — the main nav items stay grouped at the top and this block absorbs the remaining space. Each of Reports and Admin sits in its own .sidebar-nav-partition, so each gets its own divider above it and reads as a distinct section, with Reports directly above Admin. */ .sidebar-nav-bottom { margin-top: auto; display: flex; flex-direction: column; } .sidebar-nav-partition { display: flex; flex-direction: column; gap: 2px; } .sidebar-nav-partition .sidebar-divider { margin: 10px 12px 12px; } .nav-count { background: var(--sidebar-count-bg); color: var(--blue-dark); font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; min-width: 20px; text-align: center; } .sidebar-nav a.active .nav-count { background: var(--blue-light); color: var(--blue-dark); } .sidebar-divider { height: 1px; background: var(--sidebar-divider); margin: 10px 12px; } .sidebar-footer { padding: 16px 20px 20px; border-top: 1px solid var(--sidebar-divider); font-size: 12px; } .sidebar-footer-links { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .pill-link { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--sidebar-text-muted); background: var(--sidebar-hover-bg); border: 1px solid var(--sidebar-divider); } .pill-link:hover { background: var(--sidebar-active-bg); color: var(--blue-dark); text-decoration: none; } .sidebar-footer-note { color: var(--sidebar-text-muted); line-height: 1.4; } /* ---------- Main column ---------- */ .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { background: var(--topbar-bg); border-bottom: 1px solid var(--gray-200); padding: 22px 32px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 20px; position: sticky; top: 0; z-index: 5; } .topbar-left { display: flex; align-items: center; gap: 12px; justify-content: flex-start; } .topbar-titles { text-align: center; } .topbar-titles h1 { margin: 0; } .topbar-titles .subtitle { margin-top: 4px; } .topbar-actions { display: flex; align-items: center; gap: 12px; justify-content: flex-end; } .global-search { display: flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 0 12px; } .global-search .search-icon { color: var(--gray-400); font-size: 13px; } .global-search input { border: none; background: transparent; padding: 9px 0; width: 220px; font-size: 14px; } .global-search input:focus { outline: none; box-shadow: none; } .global-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light); } /* ---------- Layout ---------- */ .page { max-width: 1200px; margin: 0; padding: 28px 32px 60px; } .footer { text-align: center; color: var(--gray-400); font-size: 12px; padding: 24px; } .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; /* Same dark blue as the primary/login button (--blue), for a matching feel. */ background: var(--blue); } .auth-card { background: var(--white); border-radius: 12px; box-shadow: var(--shadow); padding: 40px; width: 360px; } .auth-card .brand { display: flex; align-items: center; justify-content: center; margin-bottom: 24px; } .auth-card .brand img { height: 42px; width: auto; } /* ---------- Flash messages ---------- */ .flash-stack { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; } .flash { padding: 12px 16px; border-radius: var(--radius); font-size: 14px; border: 1px solid transparent; } .flash-success { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); } .flash-danger { background: var(--red-light); color: var(--red-dark); border-color: var(--danger-border); } .flash-warning { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); } .flash-info { background: var(--blue-light); color: var(--blue-dark); border-color: var(--info-border); } /* ---------- Typography / headers ---------- */ h1 { font-size: 24px; margin: 0 0 4px; color: var(--gray-800); } h2 { font-size: 18px; margin: 0 0 12px; color: var(--gray-800); } h3 { font-size: 15px; margin: 0 0 4px; color: var(--gray-800); } .page-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; } .subtitle { color: var(--gray-600); font-size: 14px; margin-top: 4px; } /* ---------- Content action rows (search / filter + primary button) ---------- */ .content-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .content-actions .search-form { margin-bottom: 0; flex: 1; max-width: 480px; } /* ---------- Cards / stats ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 28px; } .stat-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; border: 1px solid var(--gray-200); border-top: 3px solid var(--blue-accent); } .stat-card.stat-danger { border-top-color: var(--red); } .stat-card .stat-value { font-size: 28px; font-weight: 700; color: var(--gray-800); } .stat-card .stat-label { font-size: 13px; color: var(--gray-600); margin-top: 2px; } .card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--gray-200); padding: 20px 24px; margin-bottom: 20px; } /* ---------- Warranty warning banner ---------- */ .warning-banner { background: var(--red-light); border: 1px solid var(--danger-border); border-left: 4px solid var(--red); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 20px; } .warning-banner h2 { color: var(--red-dark); display: flex; align-items: center; gap: 8px; } .warning-banner .warn-icon { font-size: 18px; } /* ---------- Tables ---------- */ table { width: 100%; border-collapse: collapse; font-size: 14px; } th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--gray-100); } th { color: var(--gray-600); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; } tr:hover td { background: var(--gray-50); } td.numeric, th.numeric { text-align: right; } /* ---------- Badges ---------- */ .badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; } .badge-ok { background: var(--success-bg); color: var(--success-text); } .badge-warning { background: var(--warning-bg); color: var(--warning-text); } .badge-expired { background: var(--red-light); color: var(--red-dark); } .badge-unknown { background: var(--gray-100); color: var(--gray-600); } .badge-super-admin { background: var(--red-light); color: var(--red-dark); } .badge-admin { background: var(--blue-light); color: var(--blue-dark); } .badge-user { background: var(--gray-100); color: var(--gray-600); } .badge-viewer { background: var(--blue-light); color: var(--blue); } .badge-inactive { background: var(--gray-100); color: var(--gray-400); } .badge-sla { background: var(--warning-bg); color: var(--warning-text); } /* Customer Type badges (Customers list/detail) -- see CUSTOMER_TYPES and CUSTOMER_TYPE_LABELS in app/models.py for the full set of values. */ .badge-type-business { background: var(--blue-light); color: var(--blue-dark); } .badge-type-private { background: var(--gray-100); color: var(--gray-600); } .badge-type-sla { background: var(--warning-bg); color: var(--warning-text); } .badge-type-school { background: var(--success-bg); color: var(--success-text); } .badge-type-government { background: var(--purple-bg); color: var(--purple-text); } .badge-type-doctor { background: var(--teal-bg); color: var(--teal-text); } .badge-type-internal { background: var(--gray-100); color: var(--gray-400); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--radius); font-size: 14px; font-weight: 600; border: 1px solid transparent; cursor: pointer; text-decoration: none; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--blue); color: #fff; } .btn-primary:hover { background: var(--blue-dark); } .btn-danger { background: var(--red); color: #fff; } .btn-danger:hover { background: var(--red-dark); } .btn-ghost { background: transparent; color: var(--blue); border-color: var(--gray-200); } .btn-ghost:hover { background: var(--gray-100); } .btn-small { padding: 6px 12px; font-size: 13px; } .btn-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .btn:disabled, .btn:disabled:hover, .btn.disabled, .btn.disabled:hover { opacity: 0.45; cursor: not-allowed; background: var(--gray-200); color: var(--gray-600); pointer-events: none; } .pagination-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 4px 4px; margin-top: 8px; border-top: 1px solid var(--gray-200); } .pagination-status { font-size: 13px; color: var(--gray-600); } /* ---------- Forms ---------- */ form .form-row { margin-bottom: 16px; } label { display: block; font-size: 13px; font-weight: 600; color: var(--gray-600); margin-bottom: 6px; } input[type=text], input[type=email], input[type=password], input[type=date], input[type=time], input[type=search], select, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--gray-200); border-radius: var(--radius); font-size: 14px; font-family: inherit; background: var(--white); color: var(--gray-800); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light); } textarea { resize: vertical; min-height: 80px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* Same issue as .tab-panel/.file-preview-overlay/.display-popup/.chat-feed below: .form-grid's own `display: grid` has the same specificity as the browser default `[hidden] { display: none }` rule, and author styles win ties over the UA stylesheet -- so a form-grid toggled via the `hidden` attribute/property (e.g. tickets/form.html's inline New Contact fields) would otherwise stay visible instead of collapsing. */ .form-grid[hidden] { display: none; } .checkbox-row { display: flex; align-items: center; gap: 8px; } .checkbox-row input { width: auto; } /* ---------- Disk cards (Asset -> Disks tab) ---------- */ .disk-list { display: flex; flex-direction: column; gap: 16px; } .disk-card { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 18px 20px; } .disk-card-col { display: flex; flex-direction: column; gap: 10px; } .disk-card-title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--gray-800); margin-bottom: 2px; } .disk-icon { font-size: 16px; } .disk-field { display: flex; align-items: baseline; gap: 12px; font-size: 14px; } .disk-field span { color: var(--gray-600); min-width: 150px; flex-shrink: 0; } .disk-field strong { color: var(--gray-800); font-weight: 600; } .disk-more { margin-top: 2px; } .disk-more summary { cursor: pointer; color: var(--blue); font-size: 13px; font-weight: 600; list-style: none; } .disk-more summary::-webkit-details-marker { display: none; } .disk-more summary::before { content: "\25B8 "; display: inline-block; } .disk-more[open] summary::before { content: "\25BE "; } .disk-more .disk-field { margin-top: 8px; } .disk-bar-track { background: var(--gray-100); border-radius: 999px; height: 8px; overflow: hidden; margin-top: 6px; } .disk-bar-fill { height: 100%; border-radius: 999px; } .disk-bar-ok { background: var(--blue); } .disk-bar-warning { background: #e0a020; } .disk-bar-critical { background: var(--red); } .disk-bar-caption { display: flex; justify-content: space-between; font-size: 12px; color: var(--gray-600); margin-top: 4px; } @media (max-width: 700px) { .disk-card { grid-template-columns: 1fr; } } .search-form { display: flex; gap: 10px; margin-bottom: 20px; max-width: 480px; flex-wrap: wrap; } .search-form input { flex: 1; } .empty-state { color: var(--gray-400); padding: 32px 20px; text-align: center; font-size: 14px; } .empty-state::before { content: "\25A2"; display: block; font-size: 22px; color: var(--gray-300); margin-bottom: 10px; } .empty-state-title { color: var(--gray-800); font-weight: 700; font-size: 15px; margin-bottom: 4px; } .empty-state-text { color: var(--gray-600); font-size: 13px; max-width: 420px; margin: 0 auto; } .section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } /* ---------- Admin landing ---------- */ .admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .admin-tile { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--gray-200); padding: 22px; display: block; color: inherit; } .admin-tile:hover { text-decoration: none; box-shadow: 0 4px 14px rgba(20, 30, 60, 0.12); } .admin-tile-icon { width: 40px; height: 40px; border-radius: 8px; background: var(--blue-light); color: var(--blue-dark); display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 14px; } .admin-tile h3 { margin: 0 0 4px; } .admin-tile p { margin: 0; font-size: 13px; color: var(--gray-600); } .breadcrumb { font-size: 13px; color: var(--gray-400); margin-bottom: 4px; } .breadcrumb a { color: var(--gray-600); font-weight: 500; } /* ---------- Ticket status pill row (dashboard) ---------- */ .pill-row { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; row-gap: 18px; } .pill-stat { display: flex; align-items: center; gap: 12px; } .pill-stat .pill-count { font-size: 26px; font-weight: 700; color: var(--gray-800); } .status-pill { display: inline-block; padding: 4px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; } .status-pill-open { background: var(--blue-light); color: var(--blue); } .status-pill-pending { background: var(--warning-bg); color: var(--warning-text); } .status-pill-due { background: var(--due-bg); color: var(--due-text); } .status-pill-overdue { background: var(--red-light); color: var(--red-dark); } .status-pill-neutral { background: var(--gray-100); color: var(--gray-600); } .status-pill-ok { background: var(--success-bg); color: var(--success-text); } button.status-pill { cursor: pointer; border: none; font: inherit; } button.status-pill:hover { filter: brightness(0.93); } /* ---------- Dashboard split row (two cards side by side) ---------- */ .dash-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; margin-bottom: 20px; } .dash-split .card { margin-bottom: 0; } /* ---------- Search results ---------- */ .result-group { margin-bottom: 20px; } .result-group h2 { font-size: 15px; } /* ---------- Customer entity header ---------- */ .entity-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 20px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 18px 20px; } .entity-header-main { display: flex; align-items: center; gap: 16px; min-width: 0; } .entity-back { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; color: var(--gray-600); border: 1px solid var(--gray-200); flex-shrink: 0; font-size: 16px; } .entity-back:hover { background: var(--gray-100); text-decoration: none; } .entity-avatar { width: 56px; height: 56px; border-radius: 10px; flex-shrink: 0; overflow: hidden; background: var(--blue-light); color: var(--blue-dark); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; position: relative; } .entity-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .entity-avatar-edit { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(8, 86, 125, 0.75); color: #fff; font-size: 10px; font-weight: 700; text-align: center; line-height: 1.2; opacity: 0; transition: opacity 0.15s; cursor: pointer; } .entity-avatar:hover .entity-avatar-edit { opacity: 1; } .entity-name-block { min-width: 0; } .entity-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .entity-name-row h1 { margin: 0; font-size: 20px; } .entity-rank-form select { width: auto; padding: 4px 10px; font-size: 12px; font-weight: 600; border-radius: 999px; background: var(--gray-100); color: var(--gray-600); border: 1px solid var(--gray-200); } .entity-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px; font-size: 13px; color: var(--gray-600); } .entity-meta span { display: inline-flex; align-items: center; gap: 6px; } .entity-meta .meta-icon { color: var(--gray-400); font-size: 12px; } .entity-actions { display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .overflow-menu { position: relative; } .overflow-menu summary { list-style: none; cursor: pointer; width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gray-200); color: var(--gray-600); font-size: 16px; } .overflow-menu summary::-webkit-details-marker { display: none; } .overflow-menu summary:hover { background: var(--gray-100); } .overflow-menu[open] summary { background: var(--gray-100); } .overflow-menu-list { position: absolute; right: 0; top: calc(100% + 6px); background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 190px; z-index: 20; overflow: hidden; } .overflow-menu-list a, .overflow-menu-list button { display: block; width: 100%; text-align: left; padding: 10px 14px; font-size: 14px; color: var(--gray-800); background: none; border: none; cursor: pointer; font-family: inherit; } /* Quick-add dropdown (topbar "+ Add" button) — reuses .overflow-menu's positioning/list, just with a labeled primary-button-style trigger instead of the small round "..." icon. */ .quick-add-menu summary { width: auto; height: auto; border-radius: var(--radius); padding: 9px 16px; font-size: 14px; font-weight: 600; background: var(--blue); color: #fff; border: none; gap: 6px; } .quick-add-menu summary:hover { background: var(--blue-dark); } .quick-add-menu[open] summary { background: var(--blue-dark); } .quick-add-menu .caret { font-size: 10px; } .overflow-menu-list a:hover, .overflow-menu-list button:hover { background: var(--gray-100); text-decoration: none; } .overflow-menu-list .danger { color: var(--red); } /* ---------- Tabs ---------- */ .tab-nav { display: flex; gap: 0; border-bottom: 1px solid var(--gray-200); margin: 18px 0 0; overflow-x: auto; } .tab-link { padding: 12px 4px; margin-right: 24px; font-size: 14px; font-weight: 600; color: var(--gray-600); border-bottom: 2px solid transparent; white-space: nowrap; background: none; border-top: none; border-left: none; border-right: none; cursor: pointer; } .tab-link:hover { color: var(--blue); text-decoration: none; } .tab-link.active { color: var(--gray-800); border-bottom-color: var(--red); } .tab-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0 16px; flex-wrap: wrap; } .tab-panel[hidden] { display: none; } .inline-form-toggle { display: none; margin-bottom: 20px; } .inline-form-toggle.open { display: block; } /* ---------- Passwords ---------- */ .password-value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 1px; } /* ---------- Attachments ---------- */ .attachment-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--gray-100); } .attachment-row:last-child { border-bottom: none; } .attachment-file { display: flex; align-items: center; gap: 12px; min-width: 0; } .attachment-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--gray-100); color: var(--gray-600); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; text-transform: uppercase; } .attachment-name { font-weight: 600; color: var(--gray-800); } .attachment-meta-text { font-size: 12px; color: var(--gray-600); } /* ---------- Small avatar chip (customer list) ---------- */ .avatar-chip { width: 28px; height: 28px; border-radius: 6px; background: var(--blue-light); color: var(--blue-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; overflow: hidden; vertical-align: middle; margin-right: 8px; } .avatar-chip img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---------- Theme switch (dark theme toggle) ---------- */ .theme-switch { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--gray-600); user-select: none; white-space: nowrap; } .theme-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .theme-switch-track { position: relative; width: 38px; height: 22px; flex-shrink: 0; background: var(--gray-200); border-radius: 999px; transition: background 0.15s; } .theme-switch-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow); transition: transform 0.15s; } .theme-switch input:checked + .theme-switch-track { background: var(--blue); } .theme-switch input:checked + .theme-switch-track .theme-switch-thumb { transform: translateX(16px); } .theme-switch input:focus-visible + .theme-switch-track { box-shadow: 0 0 0 3px var(--blue-light); } .theme-switch-icon { font-size: 13px; line-height: 1; } /* ---------- File preview modal (Leads/Task/Customer/Asset documents) ---------- */ body.file-preview-open { overflow: hidden; } .file-preview-overlay { position: fixed; inset: 0; background: rgba(10, 16, 28, 0.55); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 1000; } .file-preview-overlay[hidden] { display: none; } .file-preview-dialog { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); width: min(920px, 100%); max-height: min(85vh, 900px); display: flex; flex-direction: column; overflow: hidden; } .file-preview-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--gray-200); flex-shrink: 0; } .file-preview-title { font-weight: 600; color: var(--gray-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-preview-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .file-preview-close { border: none; background: transparent; font-size: 22px; line-height: 1; color: var(--gray-600); cursor: pointer; padding: 2px 8px; border-radius: 6px; } .file-preview-close:hover { background: var(--gray-100); color: var(--gray-800); } .file-preview-body { padding: 18px; overflow: auto; flex: 1; } .file-preview-message { color: var(--gray-600); text-align: center; padding: 40px 0 16px; } .file-preview-frame { width: 100%; height: 72vh; border: none; display: block; } .file-preview-image { max-width: 100%; display: block; margin: 0 auto; } .file-preview-text { white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; color: var(--gray-800); } .file-preview-table-wrap { overflow: auto; } .file-preview-table { border-collapse: collapse; font-size: 13px; color: var(--gray-800); } .file-preview-table th, .file-preview-table td { border: 1px solid var(--gray-200); padding: 6px 10px; text-align: left; white-space: nowrap; } .file-preview-table th { background: var(--gray-50); font-weight: 600; } .file-preview-note { margin-top: 10px; font-size: 12px; color: var(--gray-600); } .file-preview-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .file-preview-tab { border: 1px solid var(--gray-200); background: var(--gray-50); color: var(--gray-800); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; } .file-preview-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; } .file-preview-docx { max-width: 720px; margin: 0 auto; color: var(--gray-800); line-height: 1.55; } .file-preview-docx table { border-collapse: collapse; margin: 12px 0; } .file-preview-docx table td, .file-preview-docx table th { border: 1px solid var(--gray-200); padding: 6px 10px; } .file-preview-docx img { max-width: 100%; } @media (max-width: 640px) { .file-preview-overlay { padding: 0; } .file-preview-dialog { width: 100%; height: 100%; max-height: 100%; border-radius: 0; } } /* ---------- Display board (wall/TV dashboard at /display) ---------- Always dark (the template hardcodes data-theme="dark" on ), so this deliberately doesn't need its own light/dark split — it just reuses the dark-theme variable values set above. Text sizes are bumped up throughout since this is read from across a room, not from a desk. */ .display-board { max-width: 1900px; margin: 0 auto; padding: 16px 28px 24px; } /* Header reuses the same .topbar/.sidebar-brand markup and classes every other (staff-facing) page's header is built from, so this board reads as the same app instead of a bolted-on separate site — just without the +Add menu or global search, which don't apply to a read-only kiosk page with no logged-in staff account behind it. */ .display-brand { border-bottom: none; padding: 0; } .display-topbar-actions { gap: 20px; } .display-clock { text-align: right; } .display-clock-time { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gray-800); line-height: 1; } .display-clock-date { font-size: 12px; color: var(--gray-600); margin-top: 4px; } .display-grid { display: grid; /* Fixed at 3 columns (rather than auto-fit/minmax, which was collapsing to a single column any time the effective viewport — including a browser zoomed in on a wall-mounted screen — read as narrower than ~1360px) so this always lays out the same side-by-side 3-across grid; the media queries below step it down to 2 and then 1 column only for genuinely narrow screens. */ grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; } .display-panel h2 { font-size: 17px; margin-top: 0; } .display-panel .pill-count { font-size: 30px; } .display-panel table { font-size: 15px; } .display-panel th { font-size: 12px; } /* Every block on the grid renders as the same fixed-size tile (matching the compact "Ticket Status" pill-only block) instead of growing to whatever its longest list happens to be — a uniform grid reads much better from across a room. This only works because every list-style block is capped server-side to DISPLAY_LIST_LIMIT rows (see app/routes/display.py); overflow:hidden is just a safety net, not the mechanism doing the fitting. */ .display-panel { display: flex; flex-direction: column; /* Slightly shorter than this used to be, and .card's usual margin-bottom is dropped in favor of .display-grid's own gap — otherwise the two stack and the 3rd row (Leads/Resolved Tickets) needs a scroll to reach on a normal monitor. */ height: 260px; margin-bottom: 0; overflow: hidden; } .display-panel h2 { flex-shrink: 0; } .display-panel .section-title { flex-shrink: 0; } /* Pill-only blocks (Ticket Status, Customers & Equipment) have nothing else to fill the fixed height with — let their pill row grow to fill it and vertically center its (possibly wrapped) rows, rather than leaving them stranded at the top above a slab of empty space. Blocks that pair a pill row with a table below it (Leads) deliberately don't get this — the table still needs room of its own. */ .display-panel-pills .pill-row { flex: 1; align-content: center; } /* 2026-09: adding the Collected/Delivered ticket status pushed Ticket Status from 3 pill-rows to 4 (9 pills -> 10), which the fixed 260px .display-panel height above no longer had room for -- the bottom row (Overdue) was clipped by that panel's overflow:hidden. Tightening just this row-gap (row-gap only, not the 40px column gap) buys back enough vertical space for a 4th row without touching every other pill-only tile's spacing or the shared panel height. */ .display-panel-pills .pill-row { row-gap: 10px; } /* The dedicated "View All" pages (display/resolved_tickets.html and its siblings) reuse the .card.display-panel look for visual consistency but show the full, uncapped list, so they opt back out of the fixed height and clipping above. */ .display-panel-full { height: auto; overflow: visible; margin-bottom: 20px; } /* The Alerts tile (disk space, tickets stuck in Resolved, contacts needing review — see _combined_alerts in app/routes/display.py) used to be full-width banners above the grid; folded into a fixed-size grid tile instead so an alert appearing doesn't shove every other block down the page. Keeps the same red warning coloring those banners had. */ .display-panel-alert { background: var(--red-light); border: 1px solid var(--danger-border); border-left: 4px solid var(--red); } .display-panel-alert h2 { color: var(--red-dark); } /* Green instead of red when there's currently nothing to flag — the template only adds .display-panel-alert when the tile actually has alerts to show (see display/index.html), so an all-clear board reads as all-clear at a glance instead of a permanently "alarming" red tile. */ .display-panel-alert-ok { background: var(--success-bg); border: 1px solid var(--success-border); border-left: 4px solid var(--success-text); } .display-panel-alert-ok h2 { color: var(--success-text); } .alert-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; } .alert-list li { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--danger-border); font-size: 14px; line-height: 1.4; } .alert-list li:last-child { border-bottom: none; } /* New-ticket popup: fixed banner near the top of the viewport, slides down into view. Dismissed by display/index.html's own JS either after a timeout or on click; [hidden] falls back to plain display:none so it starts (and stays, if JS never un-hides it) completely off-screen. */ .display-popup { position: fixed; top: 100px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; background: var(--blue); color: var(--white); box-shadow: var(--shadow); border-radius: var(--radius); padding: 16px 24px; max-width: 90vw; z-index: 100; cursor: pointer; animation: display-popup-in 0.4s ease-out; } .display-popup[hidden] { display: none; } .display-popup-icon { font-size: 24px; } .display-popup-title { font-weight: 700; font-size: 15px; } .display-popup-body { font-size: 14px; opacity: 0.9; } @keyframes display-popup-in { from { transform: translate(-50%, -30px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } } @media (max-width: 1400px) { .display-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1000px) { .display-grid { grid-template-columns: 1fr; } .display-topbar { grid-template-columns: 1fr; row-gap: 12px; } .display-topbar .topbar-actions { justify-content: center; } } /* ---------- Responsive ---------- */ @media (max-width: 860px) { .app-shell { flex-direction: column; } .sidebar { position: relative; width: 100%; flex: none; height: auto; border-right: none; border-bottom: 1px solid var(--gray-200); } .sidebar-nav { flex-direction: row; flex-wrap: wrap; } .sidebar-nav-bottom { margin-top: 0; flex-direction: row; align-items: center; flex-wrap: wrap; } .sidebar-nav-partition { flex-direction: row; align-items: center; flex-wrap: wrap; } .sidebar-nav-partition .sidebar-divider { display: none; } .topbar { padding: 18px 20px; grid-template-columns: 1fr; row-gap: 12px; } .topbar-left { order: 2; } .topbar-titles { order: 1; text-align: left; } .topbar-actions { order: 3; justify-content: flex-start; } .page { padding: 20px 20px 48px; } .global-search input { width: 140px; } .dash-split { grid-template-columns: 1fr; } } /* ---------- Rich text editor (ticket reply / canned response body) ---------- */ .rich-editor-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border: 1px solid var(--gray-200); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; background: var(--gray-50); } .rich-editor-btn { min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--gray-800); font-size: 13px; cursor: pointer; } .rich-editor-btn:hover { background: var(--gray-100); border-color: var(--gray-200); } .rich-editor-sep { width: 1px; background: var(--gray-200); margin: 4px 4px; } .rich-editor-surface { min-height: 140px; max-height: 420px; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--gray-200); border-radius: 0 0 var(--radius) var(--radius); background: var(--white); color: var(--gray-800); font-size: 14px; line-height: 1.5; } .rich-editor-surface:focus { outline: 2px solid var(--blue-accent); outline-offset: -1px; } .rich-editor-surface img { max-width: 100%; border-radius: 4px; } .rich-editor-surface p { margin: 0 0 10px; } .rich-editor-surface ul, .rich-editor-surface ol { margin: 0 0 10px 20px; } .variable-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .variable-chip { padding: 3px 10px; border-radius: 999px; background: var(--blue-light); color: var(--blue-dark); font-size: 12px; font-weight: 600; border: 1px solid transparent; cursor: pointer; } .variable-chip:hover { border-color: var(--blue-accent); } /* ---------- Ticket Activity: chat-style feed ---------- */ .chat-feed { display: flex; flex-direction: column; gap: 14px; } /* Toggled by the Activity tab's Collapse/Expand button (tickets/detail.html) — needed explicitly because .chat-feed's own `display: flex` above is an author-level rule and would otherwise beat the browser's default (lower-priority) [hidden] behavior. */ .chat-feed[hidden] { display: none; } .chat-row { display: flex; } .chat-row.chat-row-me { justify-content: flex-end; } .chat-row.chat-row-them { justify-content: flex-start; } .chat-bubble { max-width: 78%; padding: 10px 14px; border-radius: 14px; background: var(--gray-100); color: var(--gray-800); font-size: 14px; line-height: 1.45; } .chat-row-me .chat-bubble { background: var(--blue-light); border-bottom-right-radius: 4px; } .chat-row-them .chat-bubble { background: var(--gray-100); border-bottom-left-radius: 4px; } .chat-meta { font-size: 11px; color: var(--gray-600); margin-bottom: 4px; display: flex; gap: 6px; align-items: center; } .chat-bubble-body { white-space: pre-wrap; word-wrap: break-word; } .chat-email-card { max-width: 86%; border: 1px solid var(--gray-200); border-radius: 10px; background: var(--white); overflow: hidden; } .chat-row-me .chat-email-card { border-color: var(--blue-light); } .chat-email-card-header { padding: 8px 14px; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); font-size: 12px; color: var(--gray-600); } .chat-email-card-header strong { color: var(--gray-800); } .chat-email-card-body { padding: 14px; font-size: 14px; line-height: 1.5; color: var(--gray-800); } .chat-email-card-body img { max-width: 100%; } .chat-email-card-body p { margin: 0 0 10px; } .chat-email-card-body p:last-child { margin-bottom: 0; } .chat-composer { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--gray-200); } .rich-editor-surface:empty:before { content: attr(data-placeholder); color: var(--gray-400); pointer-events: none; } /* ---------- Customer Picker (searchable, replaces a plain