/* ============================================================================ TTC Billing Platform — Stylesheet Liquid Glass · Soft Modern design system ============================================================================ */ :root { /* Colours */ --red: #BD0000; --red-dark: #8B0000; --red-glow: rgba(189, 0, 0, 0.14); --red-soft: rgba(189, 0, 0, 0.07); --black: #1C1C1E; --grey-700: #4A4A50; --grey-600: #6B6B72; --grey-500: #8E8E93; --grey-400: #AEAEB2; --grey-300: #C8C8CF; --grey-200: #DCDCE0; --grey-100: #F2F2F4; --page-bg: #EDEAE2; /* Glass */ --glass: rgba(255, 255, 255, 0.60); --glass-heavy: rgba(255, 255, 255, 0.82); --glass-bg: rgba(255, 255, 255, 0.70); --glass-border: rgba(255, 255, 255, 0.75); --glass-border-out: rgba(0, 0, 0, 0.08); --glass-blur: saturate(180%) blur(24px); /* Shadows */ --sh-sm: 0 4px 16px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.88); --sh-md: 0 8px 40px rgba(0,0,0,0.09), 0 2px 8px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.88); --sh-lg: 0 20px 64px rgba(0,0,0,0.12), 0 4px 20px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.90); --sh-red: 0 4px 18px rgba(189,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.14); /* Radii */ --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-pill: 100px; /* Fonts */ --f-display: 'Sora', -apple-system, system-ui, sans-serif; --f-body: 'DM Sans', -apple-system, system-ui, sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, monospace; } /* Base */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--f-body); background: var(--page-bg); color: var(--black); font-size: 15px; line-height: 1.6; /* clip (not hidden) so the ambient orbs can't cause a horizontal scrollbar WITHOUT turning into a scroll container — the latter breaks position:sticky for descendants (e.g. the bill-run / trackers bulk bars). */ overflow-x: clip; min-height: 100vh; position: relative; } a { color: var(--red); text-decoration: none; } a:hover { color: var(--red-dark); } h1, h2, h3, h4, h5, h6 { font-family: var(--f-display); font-weight: 700; color: var(--black); letter-spacing: -0.02em; } h1 { font-size: 28px; } h2 { font-size: 22px; } h3 { font-size: 18px; } /* Ambient orbs (required on every page) */ .bg-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .bg-canvas::before { content: ''; position: absolute; width: 800px; height: 800px; top: -200px; right: -150px; background: radial-gradient(circle, rgba(189,0,0,0.11) 0%, transparent 70%); border-radius: 50%; animation: orb1 18s ease-in-out infinite; } .bg-canvas::after { content: ''; position: absolute; width: 500px; height: 500px; bottom: -80px; left: -100px; background: radial-gradient(circle, rgba(189,0,0,0.07) 0%, transparent 70%); border-radius: 50%; animation: orb2 24s ease-in-out infinite; } @keyframes orb1 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(-50px,70px) scale(1.1); } 66% { transform: translate(30px,-40px) scale(0.95); } } @keyframes orb2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(70px,-50px) scale(1.12); } } /* Main layout */ .main-wrap { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 96px 24px 48px 24px; } /* ============================================================================ NAV — pill-shaped glass top bar ============================================================================ */ .topnav { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); width: calc(100% - 32px); max-width: 1200px; z-index: 100; background: var(--glass-heavy); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--r-pill); box-shadow: var(--sh-md); padding: 10px 20px; display: flex; align-items: center; gap: 24px; } .topnav__logo { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 800; color: var(--black); font-size: 14px; letter-spacing: -0.02em; } .logo-clip { display: block; overflow: hidden; height: 36px; width: 84px; } .logo-clip img { height: 90px; width: auto; margin-top: -27px; } .topnav__links { display: flex; gap: 4px; flex: 1; justify-content: center; flex-wrap: wrap; } .topnav__links a { font-family: var(--f-body); font-weight: 500; font-size: 13px; color: var(--grey-700); padding: 8px 14px; border-radius: var(--r-pill); transition: all 0.2s ease; } .topnav__links a:hover { background: rgba(0, 0, 0, 0.04); color: var(--black); } .topnav__links a.active { background: var(--red); color: #fff; box-shadow: var(--sh-red); } .topnav__user { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--grey-700); } .topnav__user .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-family: var(--f-display); font-weight: 700; font-size: 13px; } .topnav__user a { color: var(--grey-500); font-size: 12px; } .topnav__user a:hover { color: var(--red); } /* Nav dropdowns */ .topnav__dropdown { position: relative; } .topnav__dropdown > a { display: flex; align-items: center; gap: 3px; } .topnav__caret { font-size: 9px; opacity: 0.55; transition: transform .15s ease; line-height: 1; margin-top: 1px; } .topnav__dropdown:hover .topnav__caret { transform: rotate(180deg); } .topnav__dropdown-menu { position: absolute; top: 100%; left: 50%; padding-top: 10px; transform: translateX(-50%) translateY(-6px); background: var(--glass-heavy); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--r-md); box-shadow: var(--sh-md); padding: 6px; min-width: 160px; opacity: 0; visibility: hidden; transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 200; pointer-events: none; } .topnav__dropdown:hover .topnav__dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; } .topnav__dropdown-menu a { display: block; padding: 8px 14px; border-radius: var(--r-sm); white-space: nowrap; color: var(--grey-700); font-size: 13px; font-family: var(--f-body); font-weight: 500; transition: background .12s ease, color .12s ease; } .topnav__dropdown-menu a:hover { background: rgba(0, 0, 0, 0.05); color: var(--black); } /* ============================================================================ CARDS — glass surfaces ============================================================================ */ .card { position: relative; background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--r-md); box-shadow: var(--sh-md); padding: 24px; margin-bottom: 16px; } .card--heavy { background: var(--glass-heavy); box-shadow: var(--sh-lg); } .card--feature { border-top: 3px solid var(--red); } .card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; } .card__title { font-family: var(--f-display); font-size: 20px; font-weight: 700; } /* Eyebrow label */ .eyebrow { font-family: var(--f-mono); font-size: 10px; font-weight: 500; color: var(--red); letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 8px; } .eyebrow::before { content: "// "; } /* Page header */ .page-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; flex-wrap: wrap; gap: 16px; } .page-header h1 { font-size: 32px; letter-spacing: -0.03em; } .page-header__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* ============================================================================ BUTTONS ============================================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--f-body); font-weight: 500; font-size: 14px; padding: 10px 18px; border-radius: var(--r-sm); border: none; cursor: pointer; transition: all 0.2s ease; text-decoration: none; line-height: 1; } .btn--primary { background: var(--red); color: #fff; box-shadow: var(--sh-red); font-weight: 600; } .btn--primary:hover { background: var(--red-dark); color: #fff; transform: translateY(-1px); } .btn--glass { background: var(--glass); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); color: var(--black); box-shadow: var(--sh-sm); } .btn--glass:hover { background: var(--glass-heavy); } .btn--ghost { background: transparent; color: var(--grey-700); border: 1px solid var(--grey-300); } .btn--ghost:hover { border-color: var(--black); color: var(--black); } .btn--danger { background: var(--red); color: #fff; } .btn--sm { padding: 6px 12px; font-size: 12px; } /* Tiny inline copy-to-clipboard icon button (e.g. next to an IMEI). Sized to sit inside a table cell without disturbing the row height. */ .copy-btn { background: none; border: none; cursor: pointer; color: var(--grey-400); font-size: 11px; line-height: 1; padding: 0 3px; margin-left: 4px; vertical-align: baseline; transition: color 0.15s ease; } .copy-btn:hover { color: var(--red); } /* ============================================================================ FORMS ============================================================================ */ .field { margin-bottom: 16px; } .field label { display: block; font-family: var(--f-body); font-weight: 500; font-size: 13px; color: var(--grey-700); margin-bottom: 6px; } .field input[type=text], .field input[type=email], .field input[type=password], .field input[type=number], .field input[type=date], .field input[type=tel], .field input[type=search], .field textarea, .field select { width: 100%; padding: 10px 14px; font-family: var(--f-body); font-size: 14px; background: rgba(255, 255, 255, 0.7); border: 1px solid var(--grey-300); border-radius: var(--r-sm); color: var(--black); transition: all 0.15s ease; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--red); background: #fff; box-shadow: 0 0 0 3px rgba(189, 0, 0, 0.12); } .field textarea { min-height: 80px; resize: vertical; } .field--row { display: flex; gap: 16px; } .field--row > .field { flex: 1; } .field-hint { font-size: 12px; color: var(--grey-500); margin-top: 4px; } /* ============================================================================ TABLES ============================================================================ */ .table-wrap { background: var(--glass); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--r-md); box-shadow: var(--sh-md); overflow: hidden; } table.data { width: 100%; border-collapse: collapse; font-size: 14px; } table.data thead th { text-align: left; padding: 14px 18px; font-family: var(--f-body); font-weight: 500; font-size: 12px; color: var(--grey-500); text-transform: uppercase; letter-spacing: 0.06em; background: rgba(255, 255, 255, 0.3); border-bottom: 1px solid var(--grey-300); } table.data tbody td { padding: 14px 18px; border-bottom: 1px solid rgba(0, 0, 0, 0.04); vertical-align: middle; } table.data tbody tr:last-child td { border-bottom: none; } table.data tbody tr:hover { background: rgba(255, 255, 255, 0.4); } table.data td.r, table.data th.r { text-align: right; } table.data .mono { font-family: var(--f-mono); font-size: 13px; } /* ============================================================================ BADGES / STATUS PILLS ============================================================================ */ .pill { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); font-family: var(--f-body); font-weight: 500; font-size: 11px; letter-spacing: 0.02em; } .pill--paid { background: #E2F3E8; color: #1A7340; } .pill--partially_paid { background: #FFF3E0; color: #B4590A; } .pill--sent { background: #E3F0FF; color: #0957A8; } .pill--draft { background: var(--grey-100); color: var(--grey-700); } .pill--overdue { background: #FFDEDE; color: var(--red-dark); } .pill--cancelled, .pill--void { background: var(--grey-100); color: var(--grey-500); text-decoration: line-through; } .pill--active { background: #E2F3E8; color: #1A7340; } .pill--inactive { background: var(--grey-100); color: var(--grey-500); } .pill--on_hold { background: #FFF3E0; color: #B4590A; } .pill--retainer { background: var(--red-soft); color: var(--red-dark); font-weight: 600; } /* ============================================================================ KPI / STAT CARDS ============================================================================ */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } .kpi { background: var(--glass); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--r-md); box-shadow: var(--sh-md); padding: 20px; border-top: 3px solid var(--red); } .kpi__label { font-family: var(--f-mono); font-size: 10px; color: var(--red); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 6px; } .kpi__value { font-family: var(--f-display); font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--black); line-height: 1.1; } .kpi__hint { font-size: 12px; color: var(--grey-500); margin-top: 4px; } .kpi--link { display: block; text-decoration: none; color: inherit; cursor: pointer; transition: box-shadow .15s ease, transform .12s ease, border-top-color .15s ease; } .kpi--link:hover, .kpi--link:focus-visible { box-shadow: var(--sh-md), 0 0 0 3px var(--red-glow); transform: translateY(-2px); border-top-color: var(--red); color: inherit; text-decoration: none; } .kpi--link::after { content: '→'; float: right; margin-top: -2px; font-size: 14px; color: var(--grey-400); transition: transform .15s ease, color .15s ease; } .kpi--link:hover::after { color: var(--red); transform: translateX(3px); } /* ============================================================================ INVOICE EDITOR — line item table ============================================================================ */ .item-editor { width: 100%; border-collapse: collapse; margin-bottom: 16px; } .item-editor th { text-align: left; padding: 8px 6px; font-size: 12px; color: var(--grey-500); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; } .item-editor td { padding: 4px; vertical-align: middle; } .item-editor input, .item-editor select { width: 100%; padding: 8px 10px; font-size: 13px; border: 1px solid var(--grey-300); border-radius: var(--r-sm); background: #fff; } .item-editor .col-desc { width: 42%; } .item-editor .col-qty { width: 12%; } .item-editor .col-rate { width: 15%; } .item-editor .col-amt { width: 18%; } .item-editor .col-act { width: 40px; } .item-editor .col-amt input { text-align: right; } .btn-remove-row { background: none; border: none; color: var(--grey-500); font-size: 18px; cursor: pointer; padding: 6px; } .btn-remove-row:hover { color: var(--red); } .item-note-toggle { display: inline-block; margin-top: 3px; font-size: 11px; color: var(--grey-500); text-decoration: none; } .item-note-toggle:hover { color: var(--red); } .field-note { margin-top: 4px; font-size: 12px; color: var(--grey-700); } /* Totals box on invoice editor */ .totals-box { margin-left: auto; width: 320px; background: rgba(255,255,255,0.5); border-radius: var(--r-md); padding: 16px 20px; } .totals-box .row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; } .totals-box .row--total { border-top: 1px solid var(--grey-300); padding-top: 10px; margin-top: 6px; font-family: var(--f-display); font-weight: 700; font-size: 17px; } /* ============================================================================ AUTH / LOGIN PAGE ============================================================================ */ .login-wrap { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; padding: 20px; } .login-card { width: 100%; max-width: 400px; background: var(--glass-heavy); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: 40px; border-top: 3px solid var(--red); } .login-card img.logo { height: 40px; margin-bottom: 24px; } .login-card h1 { font-size: 24px; margin-bottom: 20px; } /* ============================================================================ FLASH / ALERTS ============================================================================ */ .alert { padding: 12px 16px; border-radius: var(--r-sm); margin-bottom: 16px; font-size: 14px; border: 1px solid; } .alert--success { background: #E2F3E8; border-color: #A6DAB8; color: #1A7340; } .alert--error { background: #FFDEDE; border-color: #F5A6A6; color: var(--red-dark); } .alert--info { background: #E3F0FF; border-color: #A6C8F0; color: #0957A8; } /* ============================================================================ STUB PAGE (for not-yet-built modules) ============================================================================ */ .stub { text-align: center; padding: 60px 40px; } .stub h1 { font-size: 28px; margin-bottom: 12px; } .stub p { color: var(--grey-700); max-width: 520px; margin: 0 auto 20px; } .stub .stub-features { text-align: left; background: rgba(255, 255, 255, 0.5); border-radius: var(--r-md); padding: 20px 24px; max-width: 520px; margin: 20px auto 0; } .stub .stub-features h3 { font-size: 14px; margin-bottom: 10px; color: var(--grey-500); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; } .stub .stub-features ul { list-style: none; padding: 0; } .stub .stub-features li { padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,0.05); font-size: 14px; } .stub .stub-features li:last-child { border-bottom: none; } .stub .stub-features li::before { content: "→ "; color: var(--red); font-weight: 600; } /* ============================================================================ DASH NAV BLOCKS (Quick Access grids — dashboard, trackers, sims) ============================================================================ */ .dash-nav-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .dash-nav-block { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 18px 20px 16px; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-top: 3px solid transparent; border-radius: var(--r-md); box-shadow: var(--sh-sm); cursor: pointer; text-decoration: none; color: var(--black); transition: border-top-color .15s ease, box-shadow .15s ease, transform .12s ease; text-align: left; width: 100%; font-family: inherit; outline: none; } .dash-nav-block:hover, .dash-nav-block:focus-visible { border-top-color: var(--red); box-shadow: var(--sh-md), 0 0 0 3px var(--red-glow); transform: translateY(-2px); color: var(--black); text-decoration: none; } .dash-nav-block--primary { border-top-color: var(--red); box-shadow: var(--sh-sm), 0 0 0 1px var(--red-glow); } .dash-nav-block--active { border-top-color: var(--red); background: var(--red-soft); } .dash-nav-block__icon { display: flex; align-items: center; color: var(--grey-700); margin-bottom: 10px; } .dash-nav-block--primary .dash-nav-block__icon, .dash-nav-block--active .dash-nav-block__icon { color: var(--red); } .dash-nav-block:hover .dash-nav-block__icon, .dash-nav-block:focus-visible .dash-nav-block__icon { color: var(--red); } .dash-nav-block__label { font-family: var(--f-display); font-size: 14px; font-weight: 600; color: var(--black); line-height: 1.2; margin-bottom: 4px; } .dash-nav-block__sub { font-size: 11px; color: var(--grey-500); font-family: var(--f-body); } /* ============================================================================ UTILITIES ============================================================================ */ .muted { color: var(--grey-500); } .right { text-align: right; } .mono { font-family: var(--f-mono); } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .flex { display: flex; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .gap-1 { gap: 8px; } .gap-2 { gap: 16px; } /* Responsive */ @media (max-width: 720px) { .topnav { flex-wrap: wrap; padding: 10px 14px; border-radius: var(--r-md); } .topnav__links { gap: 2px; } .topnav__links a { padding: 6px 10px; font-size: 12px; } .main-wrap { padding: 120px 16px 40px; } .page-header { flex-direction: column; align-items: flex-start; } .card { padding: 18px; } .field--row { flex-direction: column; gap: 0; } .totals-box { width: 100%; } .item-editor { font-size: 12px; } .item-editor .col-desc { width: auto; } } /* ============================================================================ ADDITIONAL BADGE STATES ============================================================================ */ .pill--in_progress { background: #E3F0FF; color: #0957A8; } .pill--accepted { background: #E2F3E8; color: #1A7340; } .pill--expired { background: var(--grey-100); color: var(--grey-500); text-decoration: line-through; } .pill--pending { background: #FFF3E0; color: #B4590A; } .pill--declined { background: #FFDEDE; color: var(--red-dark); } /* ============================================================================ FORM ERROR STATE ============================================================================ */ .field--error label { color: var(--red-dark); } .field--error input, .field--error textarea, .field--error select { border-color: var(--red) !important; background: #fff8f8 !important; } .field-error-msg { font-size: 12px; color: var(--red-dark); margin-top: 4px; } /* ============================================================================ DANGER BUTTON HOVER ============================================================================ */ .btn--danger:hover { background: var(--red-dark); color: #fff; transform: translateY(-1px); } /* ============================================================================ NAVIGATION CARD GRID (settings, reports hub pages) ============================================================================ */ .card--nav { display: block; text-decoration: none; color: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease; } .card--nav:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); color: inherit; } /* ============================================================================ ADDITIONAL UTILITIES ============================================================================ */ .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nowrap { white-space: nowrap; } .required-star { color: var(--red); font-weight: 600; margin-left: 2px; } /* KPI feature border (standardised — avoids inline border-top on .kpi) */ .kpi--feature { border-top-color: var(--red); } /* Async status indicator used on sync/refresh operations */ .async-status { font-size: 11px; color: var(--grey-500); display: flex; align-items: center; gap: 4px; } .async-status--error { color: var(--red-dark); } /* Filter select — matches .btn--glass height/font */ .filter-select { height: 38px; padding: 0 12px; font-family: var(--f-body); font-size: 13px; background: var(--glass); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--r-sm); color: var(--black); box-shadow: var(--sh-sm); cursor: pointer; appearance: auto; } /* ============================================================================ INSTALLER MAP MODULE ============================================================================ */ #installer-map, #installer-form-map { width: 100%; border-radius: var(--r-md); border: 1px solid var(--glass-border); box-shadow: var(--sh-sm); z-index: 1; } .leaflet-popup-content-wrapper { background: var(--glass-heavy) !important; backdrop-filter: var(--glass-blur) !important; border: 1px solid var(--glass-border) !important; border-radius: var(--r-sm) !important; box-shadow: var(--sh-md) !important; font-family: var(--f-body) !important; font-size: 13px !important; color: var(--black) !important; } .leaflet-popup-tip { background: rgba(255,255,255,0.85) !important; } .leaflet-popup-content { margin: 12px 16px !important; } #installer-detail-panel { position: fixed; top: 80px; right: -380px; width: 360px; max-height: calc(100vh - 100px); overflow-y: auto; z-index: 500; background: var(--glass-heavy); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--r-lg) 0 0 var(--r-lg); box-shadow: var(--sh-lg); padding: 24px; transition: right 0.3s ease-out; } #installer-detail-panel.open { right: 0; } #installer-detail-panel .panel-close { position: absolute; top: 14px; right: 14px; background: none; border: none; font-size: 18px; cursor: pointer; color: var(--grey-500); padding: 4px; } #installer-detail-panel .panel-close:hover { color: var(--red); } .pill--prospect { background: rgba(180,89,10,0.1); color: #B4590A; } .pill--manual { background: rgba(26,115,64,0.1); color: #1A7340; } .pill--google { background: rgba(9,87,168,0.1); color: #0957A8; } .staging-expand { background: rgba(189,0,0,0.03); border-top: 1px solid var(--glass-border); padding: 16px; } /* Map card — shrinks when detail panel slides in */ #installer-map-card { position: relative; transition: margin-right 0.3s ease-out; } #installer-map-card.panel-open { margin-right: 380px; } /* Loading overlay inside map card */ #map-loading { display: none; position: absolute; inset: 0; z-index: 800; align-items: center; justify-content: center; gap: 10px; background: rgba(237, 234, 226, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: var(--r-md); font-size: 14px; color: var(--grey-600); } #map-loading .loading-spinner { width: 18px; height: 18px; border: 2px solid var(--grey-300); border-top-color: var(--red); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Detail panel row layout — moved from inline view styles */ .detail-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; } .detail-label { color: var(--grey-500); } /* Map legend (Leaflet control) */ .map-legend { background: var(--glass-heavy); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border) !important; border-radius: var(--r-sm) !important; box-shadow: var(--sh-sm) !important; padding: 8px 12px; font-family: var(--f-body); } .legend-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--grey-700); padding: 2px 0; } .legend-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); flex-shrink: 0; } /* Filter bar inputs */ #pin-search { max-width: 210px; } #addr-search { flex: 1; } /* Feature 3: Customer Tag Pills */ .tag-pill { display: inline-block; padding: 2px 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; margin-right: 4px; } .tag-pill--red { background: rgba(189,0,0,0.12); color: var(--red); } .tag-pill--amber { background: rgba(217,119,6,0.12); color: #B45309; } .tag-pill--green { background: rgba(26,115,64,0.12); color: #1A7340; } .tag-pill--blue { background: rgba(9,87,168,0.12); color: #0957A8; } .tag-pill--purple { background: rgba(107,33,168,0.12); color: #6B21A8; } .tag-pill--grey { background: rgba(0,0,0,0.06); color: var(--grey-700); } /* Feature 6: Toast notifications */ .toast { position: fixed; bottom: 20px; right: 20px; background: var(--glass-heavy); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--r-sm); padding: 12px 20px; font-size: 14px; box-shadow: var(--sh-md); opacity: 0; transform: translateY(20px); transition: opacity 0.3s, transform 0.3s; z-index: 9999; } .toast--show { opacity: 1; transform: translateY(0); } .toast--success { border-left: 3px solid #1A7340; } .toast--error { border-left: 3px solid var(--red); }