:root{ /* Theme tokens (overridden by .theme-day / .theme-night on ) */ --bg:#0f1220; --panel:#171a2b; --ink:#e9edf1; --muted:#9aa3b2; --line:#262a40; --accent:#7cc4ff; --gap:12px; --panelW:380px; --tab-offset:64px; } /* All theme tokens are overridden by .theme-day/.theme-night; keep layout tokens (e.g., --gap, --panelW) here. */ /* ========================= Light (Day) theme tokens ========================= */ body.theme-day{ --bg:#f3f4f6; /* page background */ --panel:#ffffff; /* sidebar panel */ --card:#f9fafb; /* section/card background (soft, not pure white) */ --field:#ffffff; /* input/button background */ --ink:#0f172a; /* primary text */ --muted:#4b5563; /* secondary text */ --line:#e5e7eb; /* borders */ --accent:#2563eb; /* primary accent */ } /* ========================= Dark (Night) theme tokens ========================= */ body.theme-night{ --bg:#0f1220; --panel:#171a2b; --card:#11152a; --field:#0f1325; --ink:#e9edf1; --muted:#9aa3b2; --line:#262a40; --accent:#7cc4ff; } /* Base element resets & global transitions */ *{box-sizing:border-box} html,body{height:100%;margin:0} body{min-height:100dvh;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;overflow:auto} /* Lock page while password gate is active */ body.gated{ overflow:hidden; position:fixed; inset:0; width:100%; height:100dvh; overscroll-behavior:none; } body, .card, .sidebar, #map, input, button { transition: background-color .35s ease, color .35s ease, border-color .35s ease; } /* Layout & sidebar */ .app{display:grid;grid-template-rows:auto 1fr;min-height:100dvh} .tab-bar{grid-column:1 / -1;display:flex;gap:0;padding:0 12px 0 0;background:var(--panel);border-bottom:1px solid var(--line);align-items:center;min-height:var(--tab-offset)} .tab-btn{ width:auto; flex:0 0 auto; align-self:stretch; margin:0; padding:0 18px; border-radius:0; border-width:0 1px; border-style:solid; border-color:transparent var(--line); background:transparent; color:var(--ink); font-weight:600; display:inline-flex; align-items:center; justify-content:center; } .tab-btn[hidden]{ display:none !important; } .tab-btn:first-of-type{border-left:1px solid var(--line)} .tab-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)} html[data-initial-tab="dispatch"] body:not(.tabs-ready) .tab-btn[data-tab-target="dispatch"], html[data-initial-tab="optimizer"] body:not(.tabs-ready) .tab-btn[data-tab-target="optimizer"], html[data-initial-tab="emails"] body:not(.tabs-ready) .tab-btn[data-tab-target="emails"], html[data-initial-tab="dev"] body:not(.tabs-ready) .tab-btn[data-tab-target="dev"]{ background:var(--accent); color:#fff; border-color:var(--accent); } .theme-toggle{margin-left:auto;display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden} .theme-option{position:relative;display:flex;align-items:center} .theme-option input{position:absolute;opacity:0;pointer-events:none} .theme-option span{display:block;padding:6px 12px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);cursor:pointer;background:transparent;transition:background .2s,color .2s} .theme-option input:checked + span{background:var(--accent);color:#fff} .dev-toggle-btn{ width:auto; margin-top:0; margin-left:8px; padding:6px 14px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; } .dev-toggle-btn.is-on{ background:#16a34a; border-color:#16a34a; color:#fff; } .sidebar{padding:16px;background:var(--panel);border-bottom:1px solid var(--line)} .header h1{margin:0 0 4px;font-size:20px} .sub{margin:0;color:var(--muted);font-size:12px} /* Cards, rows, and typographic tweaks */ .card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:12px} /* Reduce extra top space for card titles */ .card h3{ margin: 0 0 8px; } .row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:6px 0} .row > :first-child{flex:1;min-width:0} .row > :last-child{flex:none} .total{font-weight:800} .row.price-toggle{ margin-top: 14px; } /* Form controls */ input,textarea,button{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--field);color:var(--ink)} button{border:0;background:var(--accent);color:#fff;font-weight:800;cursor:pointer;margin-top:8px} @keyframes autofillFlashFade{ 0%{ border-color:#f59e0b; box-shadow:inset 0 0 0 999px rgba(250, 204, 21, 0.42); } 70%{ border-color:color-mix(in srgb, var(--line) 60%, #f59e0b 40%); box-shadow:inset 0 0 0 999px rgba(250, 204, 21, 0.16); } 100%{ border-color:var(--line); box-shadow:inset 0 0 0 999px rgba(250, 204, 21, 0); } } input.autofill-flash, textarea.autofill-flash{ animation:autofillFlashFade 1.8s ease-out; } .hint{color:var(--muted);font-size:12px;margin:6px 0 0} .dispatch-source-group{ display:flex; flex-wrap:nowrap; gap:6px; margin-bottom:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; } .dispatch-source-group .mode-chip{ flex:1 1 0; min-width:0; } .dispatch-source-group .mode-chip span{ width:100%; } .dispatch-source-controls{ display:grid; grid-template-columns:1fr; gap:8px; margin-top:10px; } .dispatch-source-controls[hidden]{ display:none !important; } .dispatch-addr-locked{ background:color-mix(in srgb, var(--field) 72%, #9ca3af 28%); color:color-mix(in srgb, var(--ink) 74%, #6b7280 26%); border-color:color-mix(in srgb, var(--line) 70%, #9ca3af 30%); cursor:not-allowed; } .dispatch-inline-btn{ width:auto; max-width:none; margin-top:0; justify-self:start; padding:8px 12px; } .dispatch-square-profile-address{ margin-top:0; } #dispatchSquareHint{ margin-top:0; margin-bottom:10px; } .dispatch-status-ok{ color:#15803d; } .dispatch-status-error{ color:#991b1b; } /* Prevent iOS Safari zoom-on-focus by ensuring controls are >=16px text size */ html{ -webkit-text-size-adjust: 100%; } input, select, textarea{ font-size:16px; } /* Mono font for numeric readouts */ .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:nowrap} /* Map area */ .map{ min-height:45vh; position:relative; } #map{ width:100%; height:100%; border-top:1px solid var(--line); } #map{touch-action: pan-y;} @media (max-width: 899px){ .app{ display:block; min-height:auto; } .tab-bar{position:sticky;top:0;z-index:5} .map{ height:60vh; } #map{ height:100%; } } /* Responsive: put sidebar left of map on wide screens */ @media (min-width: 900px){ body{overflow:hidden;} .app{ grid-template-columns:var(--panelW) 1fr; grid-template-rows:auto minmax(0,1fr); min-height:100vh; } .sidebar{ height:calc(100vh - var(--tab-offset)); border-right:1px solid var(--line); border-bottom:0; overflow:auto; padding-right:8px; } .map{ position:sticky; top:var(--tab-offset); height:calc(100vh - var(--tab-offset)); min-height:0; } #map{ height:100%; } } /* ===== iOS-like Emergency toggle ===== */ .toggle-card { display: flex; align-items: center; justify-content: space-between; } .switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; } .switch input { display: none; } .switch .slider { position: relative; width: 52px; height: 32px; border-radius: 999px; background: #2a2f47; transition: background 200ms ease, box-shadow 200ms ease; box-shadow: inset 0 0 0 1px #0a0f1f; } .switch.standard .slider { background: #2a2f47; } /* neutral for standard/off */ .switch.emergency .slider { background: #dc2626; } /* red for emergency/on */ .switch .slider::before { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform 200ms ease; box-shadow: 0 1px 2px rgba(0,0,0,.35); } .switch.emergency .slider::before { transform: translateX(20px); } .toggle-label { font-weight: 600; font-size: 14px; } /* Show only ONE pricing card at a time (Emergency is hidden by default) */ #emergencyPricing { display: none; } /* Red emphasis for long routes (≥100 mi or ≥2h) */ .mono.danger { color: #dc2626; } /* Applied by updateThresholdAlert when miles ≥ ALERT_MILE_THRESHOLD or duration ≥ ALERT_DURATION_THRESHOLD_SEC */ /* ===== Copy icon next to Miles over 20 ===== */ .copy-wrap{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} /* Inline layout: places the copy icon immediately left of the numeric readout without breaking layout on narrow screens */ .icon-btn{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;padding:0 2px;cursor:pointer;color:var(--muted);line-height:1} .icon-btn:hover{color:var(--ink)} .icon-btn:active{transform:scale(0.96)} /* Make the SVG ignore text baselines so it truly centers within the flex button */ .icon-btn svg{width:16px;height:16px;display:block;transform:translateY(-4px)} /* ===== Simple password gate overlay ===== */ #gateOverlay{position:fixed;inset:0;z-index:9999;background:#0a0c18;display:flex;align-items:center;justify-content:center;padding:20px} .gate-card{width:min(480px, 92vw);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.4)} .gate-card h2{margin:0 0 6px;font-size:18px} .gate-card p{margin:6px 0 14px;color:var(--muted);font-size:13px} .gate-row{display:flex;flex-direction:column;gap:10px;align-items:stretch} .gate-row input{flex:initial} .gate-error{color:#dc2626;font-size:12px;min-height:16px;margin-top:8px} .hidden{display:none !important} /* Make the sidebar Map Controls Satellite toggle turn green when ON */ .map-controls .switch.emergency .slider { background: #16a34a; } .email-panel{grid-column:1 / -1;padding:16px;display:flex;justify-content:center;width:100%;box-sizing:border-box} .email-panel[hidden]{display:none} .optimizer-panel{ grid-column:1 / -1; padding:0; width:100%; box-sizing:border-box; background:var(--bg); } .optimizer-panel[hidden]{display:none} .optimizer-shell{ width:100%; display:grid; grid-template-columns:minmax(320px, var(--panelW)) minmax(0, 1fr); min-height:calc(100vh - var(--tab-offset)); } .optimizer-sidebar{ background:var(--panel); border-right:1px solid var(--line); min-height:calc(100vh - var(--tab-offset)); overflow:auto; } .optimizer-sidebar-inner{ padding:16px 10px 24px 16px; } .optimizer-header h1{ margin:0 0 4px; font-size:20px; } .optimizer-selected-date{ margin:12px 0 10px; font-size:14px; font-weight:700; color:var(--ink); } .optimizer-list-toolbar{ display:flex; align-items:center; justify-content:flex-start; gap:8px; flex-wrap:wrap; } .optimizer-start-time-wrap{ display:flex; align-items:center; gap:8px; } .optimizer-start-time-label{ font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.01em; text-transform:uppercase; } .optimizer-start-time-input{ appearance:none; height:38px; min-width:120px; padding:0 10px; border-radius:10px; border:1px solid var(--line); background:var(--field); color:var(--ink); font:inherit; } .optimizer-start-time-input:focus{ outline:2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:1px; } .optimizer-optimize-btn{ flex:1 1 180px; min-width:0; margin-top:0; } .optimizer-btn-working{ background:#334155; border:1px solid #334155; color:#fff; } .optimizer-btn-optimized{ background:#16a34a; border:1px solid #15803d; color:#fff; } .optimizer-btn-dirty{ background:#f59e0b; border:1px solid #d97706; color:#1f2937; } .optimizer-btn-success{ background:#16a34a; border:1px solid #15803d; color:#fff; } .optimizer-appointment-list{ list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns:1fr; gap:8px; max-height:none; overflow:visible; padding-right:2px; } .optimizer-stop{ margin:0; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--field); } .optimizer-stop.is-dragging{ opacity:.62; } .optimizer-stop.is-drop-target{ border-color:var(--accent); box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 65%, transparent) inset; } .optimizer-drop-placeholder{ border:1px dashed color-mix(in srgb, var(--line) 55%, #9ca3af 45%); background:color-mix(in srgb, var(--field) 70%, #d1d5db 30%); border-radius:10px; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent); min-height:44px; } .optimizer-stop-top{ display:flex; align-items:center; gap:8px; min-height:26px; } .optimizer-leg-swatch{ width:10px; height:10px; border-radius:999px; display:inline-block; flex:none; } .optimizer-stop-number{ width:22px; height:22px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--ink); font-size:12px; font-weight:700; flex:none; } .optimizer-stop-title{ font-size:14px; line-height:1.35; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .optimizer-drag-handle{ margin-left:auto; width:30px; min-width:30px; height:28px; margin-top:0; padding:0; border-radius:8px; border:1px solid var(--line); background:var(--field); color:var(--muted); display:inline-flex; align-items:center; justify-content:center; cursor:grab; } .optimizer-drag-handle:active{ cursor:grabbing; } .optimizer-drag-handle::before{ content:""; width:12px; height:10px; border-radius:2px; background: linear-gradient(currentColor, currentColor) center 2px / 12px 2px no-repeat, linear-gradient(currentColor, currentColor) center 7px / 12px 2px no-repeat; opacity:.9; } .optimizer-stop-meta-chips{ margin-top:7px; display:flex; flex-wrap:wrap; gap:6px; } .optimizer-stop-chip{ display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; border:1px solid color-mix(in srgb, var(--line) 72%, var(--accent) 28%); background:color-mix(in srgb, var(--field) 82%, var(--accent) 18%); color:var(--ink); font-size:12px; font-weight:700; line-height:1.2; } .optimizer-stop-address{ margin-top:7px; font-size:12px; line-height:1.4; color:var(--muted); } .optimizer-return-row{ margin:0; padding:8px 10px; border:1px dashed var(--line); border-radius:10px; background:color-mix(in srgb, var(--field) 85%, var(--card) 15%); font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:7px; } .optimizer-empty{ margin:0; padding:12px; border:1px dashed var(--line); border-radius:10px; color:var(--muted); background:color-mix(in srgb, var(--field) 84%, var(--card) 16%); } .optimizer-summary-card{ margin-top:12px; border:1px solid var(--line); border-radius:10px; padding:10px; background:color-mix(in srgb, var(--field) 88%, var(--card) 12%); } .optimizer-current-travel-row[hidden]{ display:none !important; } .optimizer-current-travel-row.is-custom #optimizerCurrentTravel{ color:#f59e0b; font-weight:800; } .optimizer-day-window-value{ display:inline-flex; align-items:center; gap:6px; } .optimizer-day-time-label{ color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.01em; } .optimizer-day-time{ color:var(--ink); font-weight:700; } .optimizer-day-time-in-range{ color:#16a34a; } .optimizer-day-time-out-of-range{ color:#dc2626; } .optimizer-day-separator{ color:var(--muted); opacity:.8; } .optimizer-update-wrap{ margin-top:12px; display:grid; grid-template-columns:1fr; gap:8px; } .optimizer-update-btn{ margin-top:0; } .optimizer-main{ min-height:calc(100vh - var(--tab-offset)); display:flex; flex-direction:column; background:var(--panel); } .optimizer-calendar-bar{ border-bottom:1px solid var(--line); background:var(--panel); padding:10px 12px 10px; } .optimizer-calendar-top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; } .optimizer-week-label{ margin:0; text-align:center; font-weight:700; font-size:14px; color:var(--ink); flex:1 1 auto; min-width:180px; } .optimizer-week-strip{ margin-top:8px; display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:6px; } .optimizer-week-day{ width:100%; margin-top:0; border:1px solid var(--line); border-radius:10px; background:var(--field); color:var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:78px; padding:6px 4px; font-weight:700; } .optimizer-week-day:hover{ border-color:color-mix(in srgb, var(--line) 50%, var(--accent) 50%); } .optimizer-week-day.is-selected{ border-color:var(--accent); box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 65%, transparent) inset; } .optimizer-week-day.is-today{ background:color-mix(in srgb, var(--field) 82%, var(--accent) 18%); } .optimizer-week-dayname{ font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); } .optimizer-week-daynum{ font-size:16px; line-height:1; } .optimizer-week-dots{ display:flex; align-items:center; justify-content:center; gap:4px; min-height:22px; } .optimizer-week-dot{ width:20px; height:20px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#ffffff; line-height:1; } .optimizer-week-dot-job{background:#f59e0b;color:#111827} .optimizer-week-dot-emergency{background:#dc2626} .optimizer-week-dot-personal{background:#2563eb} .optimizer-week-none{ font-size:11px; color:var(--muted); } .optimizer-week-legend{ margin-top:8px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; font-size:11px; color:var(--muted); } .optimizer-week-legend span{ display:inline-flex; align-items:center; gap:6px; } .optimizer-map-switch{ margin-left:0; } .optimizer-map-canvas{ flex:1; width:100%; min-height:360px; height:auto; background:color-mix(in srgb, var(--field) 75%, #0f172a 25%); } .optimizer-map-pin{ width:28px; height:28px; border-radius:999px; border:3px solid #ffffff; background:#2563eb; color:#ffffff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.32); } .optimizer-status-ok{color:#15803d} .optimizer-status-warn{color:#a16207} .optimizer-status-error{color:#991b1b} .email-shell{width:100%;max-width:1200px;min-height:200px} .email-layout{ display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; align-items:start; } .email-card{max-width:900px;margin:0 auto} .email-layout .email-card{ max-width:none; margin:0; } .email-fields{display:grid;grid-template-columns:1fr;gap:8px;margin-top:14px} .email-fields[hidden]{display:none !important} .email-fields label{margin-top:4px} .email-field-label-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:4px; } .email-field-label-row label{ margin-top:0; } .email-client-label-row{ justify-content:flex-start; gap:6px; } .email-customer-search-wrap{ position:relative; } .email-customer-search-wrap #emailCustomerSearch{ padding-right:14px; } .email-customer-search-wrap.has-appointment-found #emailCustomerSearch{ padding-right:196px; } .email-customer-inline-actions{ position:absolute; right:8px; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:6px; z-index:2; } .email-refresh-icon-btn{ width:30px; min-width:30px; height:30px; margin-top:0; padding:0; border-radius:999px; border:1px solid var(--line); background:var(--field); color:var(--muted); display:inline-flex; align-items:center; justify-content:center; } .email-refresh-icon-btn svg{ width:15px; height:15px; display:block; } .email-refresh-icon-btn:hover{ color:var(--ink); border-color:color-mix(in srgb, var(--line) 55%, var(--accent) 45%); } .email-refresh-icon-btn:disabled{ opacity:.65; cursor:not-allowed; } .email-refresh-icon-btn.is-refreshing svg{ animation:emailRefreshSpin 0.9s linear infinite; } @keyframes emailRefreshSpin{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} } .email-refresh-btn{ position:static; width:auto; min-width:84px; max-width:none; margin-top:0; padding:6px 10px; border-radius:10px; border:1px solid var(--line); background:var(--field); color:var(--ink); font-size:12px; font-weight:700; z-index:2; } .email-refresh-btn:disabled{ opacity:.65; cursor:not-allowed; } .email-appointment-found-btn{ min-width:170px; border-color:#f59e0b; background:#f59e0b; color:#1f2937; } .email-appointment-found-btn:hover{ background:#fbbf24; border-color:#fbbf24; } .email-appointment-found-btn:active{ background:#d97706; border-color:#d97706; } .email-appointment-found-btn[hidden]{ display:none !important; } .email-date-row{ display:grid; grid-template-columns:minmax(0, 1fr); gap:10px; } .email-date-col{ min-width:0; position:relative; display:grid; grid-template-columns:1fr; align-content:start; gap:8px; } .email-date-col[hidden]{display:none !important} .email-validity-col{ min-width:0; display:grid; grid-template-columns:1fr; align-content:start; gap:8px; } .email-validity-col[hidden]{display:none !important} .email-validity-col .hint{ margin:0; } .email-validity-inline{ display:flex; align-items:stretch; gap:8px; } .email-validity-inline input{ flex:1; width:auto; } .email-validity-suffix{ display:inline-flex; align-items:center; justify-content:center; min-width:58px; padding:0 10px; border:1px solid var(--line); border-radius:10px; background:color-mix(in srgb, var(--field) 80%, #94a3b8 20%); color:var(--ink); font-size:13px; font-weight:700; text-transform:uppercase; } @media (min-width: 760px){ .email-date-row{ grid-template-columns:minmax(0, 1fr); align-items:start; } .email-date-row.has-matched{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:start; } .email-date-row.has-secondary{ grid-template-columns:minmax(0, 1fr) minmax(180px, 230px); align-items:start; } } .email-top-controls{ margin-top:8px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 10px; } .email-customer-hint-appointment{ color:#ca8a04; font-weight:700; } .email-appointment-alert{ margin-top:6px; padding:10px 12px; border:1px solid #fca5a5; border-radius:10px; background:#fef2f2; display:grid; grid-template-columns:1fr; gap:8px; } .email-appointment-alert[hidden]{display:none !important} .email-appointment-alert-message{ margin:0; color:#991b1b; font-size:12.5px; font-weight:700; line-height:1.4; } .email-appointment-match-select{ width:100%; margin-top:0; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--field); color:var(--ink); font-size:14px; } .email-appointment-load-btn{ width:auto; max-width:none; margin-top:0; justify-self:start; background:#b45309; border:1px solid #92400e; color:#fff; } .email-appointment-load-btn:hover{ background:#92400e; } .email-customer-options{ border:1px solid var(--line); border-radius:10px; background:var(--field); max-height:220px; overflow:auto; } .email-customer-options[hidden]{display:none !important} .address-autocomplete-options{ margin-top:4px; } .email-customer-option{ width:100%; margin-top:0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; color:var(--ink); text-align:left; font-weight:500; padding:10px 12px; cursor:pointer; } .email-customer-option:last-child{border-bottom:0} .email-customer-option:hover, .email-customer-option.is-active{ background:color-mix(in srgb, var(--accent) 16%, transparent); } .email-profile-address{ margin-top:0; height:48px; min-height:48px; resize:none; overflow-y:auto; background:color-mix(in srgb, var(--field) 70%, #9ca3af 30%); color:color-mix(in srgb, var(--ink) 75%, #6b7280 25%); border-color:color-mix(in srgb, var(--line) 70%, #9ca3af 30%); font-size:14px; font-weight:600; line-height:1.5; white-space:pre-line; } .email-mode-group{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px} .email-mode-group-compact{margin-top:0;gap:6px} .mode-chip{position:relative;display:inline-flex} .mode-chip input{position:absolute;opacity:0;pointer-events:none} .mode-chip span{ display:inline-flex; align-items:center; justify-content:center; padding:8px 14px; border-radius:999px; border:1px solid var(--line); color:var(--ink); font-weight:600; cursor:pointer; background:transparent; transition:background .2s,color .2s,border-color .2s; } .mode-chip input:checked + span{ background:var(--accent); border-color:var(--accent); color:#fff; } .mode-chip-sm span{ padding:6px 10px; font-size:12px; letter-spacing:.01em; } .email-type-group{ display:flex; flex-wrap:wrap; gap:6px; margin-left:auto; justify-content:flex-end; } .appt-chip{position:relative;display:inline-flex} .appt-chip[hidden]{display:none !important} .appt-chip input{position:absolute;opacity:0;pointer-events:none} .appt-chip span{ display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:999px; border:1px solid var(--line); color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; background:transparent; cursor:pointer; transition:background .2s,color .2s,border-color .2s; } .appt-chip input:checked + span{ color:#fff; background:#0f766e; border-color:#0f766e; } .appt-chip input#emailNextDayToggle:checked + span{ background:#f59e0b; border-color:#f59e0b; color:#1f2937; } .appt-chip input#emailEmergencyToggle:checked + span{ background:#b91c1c; border-color:#b91c1c; } .email-date-native{ position:absolute !important; left:0 !important; top:calc(100% - 46px) !important; width:100% !important; height:46px !important; opacity:0 !important; pointer-events:none !important; } #emailDateDisplay{ cursor:pointer; } .email-actions{margin-top:14px;display:flex;flex-direction:column;gap:8px} .email-action-buttons{display:flex;flex-wrap:wrap;gap:10px} .email-action-buttons button{width:auto;margin-top:0;max-width:none;min-width:170px} .email-calendar-view[hidden]{display:none !important} .email-calendar-view h3{margin:8px 0 4px} .email-calendar-fields{margin-top:12px} .email-calendar-title-row{ display:grid; grid-template-columns:fit-content(58%) minmax(240px, 1fr); gap:8px; align-items:stretch; } .email-calendar-title-prefix{ display:flex; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:color-mix(in srgb, var(--field) 78%, #9ca3af 22%); color:var(--ink); font-weight:700; white-space:normal; overflow-wrap:anywhere; min-height:46px; } .email-calendar-readonly{ min-height:54px; resize:none; background:color-mix(in srgb, var(--field) 70%, #9ca3af 30%); color:color-mix(in srgb, var(--ink) 75%, #6b7280 25%); border-color:color-mix(in srgb, var(--line) 70%, #9ca3af 30%); } .email-calendar-readonly-input{ background:color-mix(in srgb, var(--field) 70%, #9ca3af 30%); color:color-mix(in srgb, var(--ink) 75%, #6b7280 25%); border-color:color-mix(in srgb, var(--line) 70%, #9ca3af 30%); font-weight:700; } .email-calendar-action-buttons{ justify-content:flex-start; } .scheduling-context-card{ margin-top:0; position:sticky; top:calc(var(--tab-offset) + 12px); } .scheduling-context-card h3{ margin:0 0 10px; font-size:16px; color:var(--ink); } .scheduling-selected-appointment{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:color-mix(in srgb, var(--field) 80%, var(--card) 20%); } .scheduling-selected-empty{ margin:0; color:var(--muted); font-size:13px; } .scheduling-selected-row{ margin:0; font-size:13px; line-height:1.45; color:var(--ink); } .scheduling-selected-row + .scheduling-selected-row{ margin-top:6px; } .scheduling-selected-title{ font-weight:700; color:var(--ink); } .scheduling-mini-calendar-wrap{ margin-top:12px; } .scheduling-mini-calendar-head{ display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; margin-bottom:8px; padding:6px 8px; border:1px solid var(--line); border-radius:10px; background:color-mix(in srgb, var(--field) 88%, var(--card) 12%); } .scheduling-month-nav{ min-width:34px; padding:6px 0; border-radius:8px; font-size:16px; line-height:1; } .scheduling-month-label{ text-align:center; font-weight:700; font-size:13px; color:var(--ink); text-shadow:0 0 0 transparent; } .scheduling-mini-calendar{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; } .scheduling-mini-weekday{ text-align:center; font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); padding:2px 0; } .scheduling-mini-day{ min-height:36px; border:1px solid var(--line); border-radius:8px; background:var(--field); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:3px 2px; } .scheduling-mini-day.is-outside{ opacity:.45; } .scheduling-mini-day.is-selected{ border-color:#2563eb; box-shadow:0 0 0 1px rgba(37,99,235,.32) inset; } .scheduling-mini-day.is-service-date{ border-color:#f59e0b; box-shadow:0 0 0 1px rgba(245,158,11,.38) inset; } .scheduling-mini-daynum{ font-size:11px; font-weight:700; line-height:1; } .scheduling-mini-dots{ display:flex; align-items:center; justify-content:center; gap:3px; min-height:6px; } .dot{ width:6px; height:6px; border-radius:999px; display:inline-block; } .dot-job{background:#f59e0b} .dot-emergency{background:#dc2626} .dot-personal{background:#2563eb} .dot-match{background:#0f766e} .scheduling-mini-legend{ margin-top:8px; display:flex; flex-wrap:wrap; gap:8px 12px; font-size:11px; color:var(--muted); } .scheduling-mini-legend span{ display:inline-flex; align-items:center; gap:5px; } .email-action-btn{ min-height:50px; padding:12px 18px; font-size:16px; font-weight:800; letter-spacing:.01em; transition:transform .12s ease, filter .12s ease, box-shadow .12s ease, background .2s ease; } .email-action-btn:disabled{ cursor:not-allowed; opacity:.78; box-shadow:none; } .email-action-btn:hover{ filter:brightness(1.05); box-shadow:0 6px 14px rgba(0,0,0,.14); } .email-action-btn:active{ transform:translateY(1px) scale(.99); filter:brightness(.92); } .email-action-btn.is-sent, .email-action-btn.is-sent:disabled{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:color-mix(in srgb, var(--field) 70%, #9ca3af 30%); border:1px solid color-mix(in srgb, var(--line) 66%, #9ca3af 34%); color:var(--muted); opacity:1; filter:none; transform:none; } .email-send-check{ color:#16a34a; font-size:18px; font-weight:900; line-height:1; } .email-preview-btn{ background:var(--field); color:var(--ink); border:1px solid var(--line); } .email-preview-btn:active{ background:color-mix(in srgb, var(--field) 70%, var(--accent) 30%); } .email-confirm-overlay{ position:fixed; inset:0; z-index:10060; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(15,23,42,.48); } .email-confirm-panel{ width:min(520px, 92vw); border:1px solid var(--line); border-radius:14px; background:var(--panel); box-shadow:0 18px 50px rgba(0,0,0,.4); padding:16px 16px 14px; } .email-confirm-title{ margin:0; font-size:18px; line-height:1.3; } .email-confirm-message{ margin:10px 0 0; white-space:pre-line; font-size:14px; line-height:1.5; color:var(--ink); } .email-confirm-actions{ margin-top:14px; display:flex; justify-content:flex-end; gap:8px; } .email-confirm-cancel, .email-confirm-send{ width:auto; max-width:none; min-width:92px; margin-top:0; padding:10px 14px; } .email-confirm-cancel{ background:var(--field); color:var(--ink); border:1px solid var(--line); } .email-confirm-send{ background:#b91c1c; color:#ffffff; border:1px solid #991b1b; } .email-confirm-send:hover{ background:#991b1b; } .email-confirm-send:active{ background:#7f1d1d; } .email-confirm-customer{ color:#b91c1c; font-weight:700; } .email-status-ok{color:#15803d} #emailSendStatus.email-status-error, #emailCalendarStatus.email-status-error{ margin-top:8px; padding:10px 12px; border-radius:10px; border:1px solid #fecaca; background:#fef2f2; color:#991b1b; font-weight:700; line-height:1.45; } .dev-debug-block{ margin-top:14px; padding:12px; border:1px solid #d1d5db; border-radius:10px; background:#ffffff; color:#111827; } .dev-debug-block h3{ margin:0 0 8px; font-size:14px; line-height:1.4; color:#111827; } .dev-debug-pre{ margin:0; background:#ffffff; color:#111827; white-space:pre-wrap; word-break:break-word; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; line-height:1.45; } .dev-panel{ grid-column:1 / -1; padding:16px; background:var(--panel); display:flex; justify-content:center; width:100%; box-sizing:border-box; } .dev-panel[hidden]{ display:none; } .dev-shell{ width:100%; max-width:1400px; min-height:200px; } .dev-card{ margin-top:0; } .dev-subtab-bar{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; } .dev-subtab-btn{ width:auto; margin-top:0; padding:8px 12px; border-radius:8px; border:1px solid #d1d5db; background:#ffffff; color:#111827; font-weight:700; } .dev-subtab-btn.active{ background:#111827; border-color:#111827; color:#ffffff; } .dev-subtab-panel{ margin-top:12px; } .dev-automation-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .dev-automation-btn{ width:auto; margin-top:0; min-width:172px; border:1px solid #d1d5db; background:#ffffff; color:#111827; font-weight:700; } .dev-automation-btn:disabled{ opacity:.7; cursor:not-allowed; } .dev-automation-toolbar .hint{ margin:0; } #devOAuthStatus{ font-weight:600; } .dev-oauth-status-ok{ color:#166534; } .dev-oauth-status-warn{ color:#92400e; } .dev-oauth-status-error{ color:#991b1b; } .dev-automation-error{ margin-top:10px; padding:10px 12px; border-radius:10px; border:1px solid #fecaca; background:#fef2f2; color:#991b1b; font-weight:700; } .dev-automation-summary-grid{ margin-top:10px; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px; } .dev-automation-summary-card{ border:1px solid #d1d5db; border-radius:10px; background:#ffffff; color:#111827; padding:10px; } .dev-automation-summary-card.is-ok{ border-color:#bbf7d0; background:#f0fdf4; } .dev-automation-summary-card.is-warn{ border-color:#fde68a; background:#fffbeb; } .dev-automation-summary-card.is-error{ border-color:#fecaca; background:#fef2f2; } .dev-automation-summary-label{ font-size:12px; color:#4b5563; font-weight:700; } .dev-automation-summary-value{ margin-top:4px; font-size:20px; font-weight:800; color:#111827; } .dev-automation-sections{ margin-top:12px; display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:10px; } .dev-automation-raw{ margin-top:10px; border:1px solid #d1d5db; border-radius:10px; background:#ffffff; padding:8px 10px; } .dev-automation-raw summary{ cursor:pointer; font-weight:700; color:#111827; } .card-header-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px} .card-header-row h2{margin:0} .pac-container{z-index:10000!important} /* ===== Assistant chat ===== */ .assistant-fab{ position:fixed; right:18px; bottom:calc(env(safe-area-inset-bottom, 0px) + 88px); margin-top:0; width:auto; display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; border:1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, #0f172a), color-mix(in srgb, var(--accent) 68%, #0b1024)); color:#fff; font-weight:700; box-shadow:0 8px 24px rgba(0,0,0,.35); z-index:45; } .assistant-fab:disabled, .assistant-fab.is-disabled{ background:linear-gradient(135deg, #6b7280, #4b5563); border:1px solid #6b7280; color:#e5e7eb; box-shadow:none; cursor:not-allowed; opacity:.9; } .assistant-fab svg{width:18px;height:18px;display:block} .assistant-fab span{font-size:13px;line-height:1} .assistant-panel{ position:fixed; right:18px; bottom:calc(env(safe-area-inset-bottom, 0px) + 148px); width:min(420px, calc(100vw - 24px)); height:min(560px, calc(100vh - 110px)); display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px; background:var(--panel); box-shadow:0 22px 60px rgba(0,0,0,.45); z-index:44; overflow:hidden; } .assistant-panel[hidden]{display:none !important} .assistant-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line); } .assistant-close{ width:auto; margin-top:0; padding:6px 10px; border-radius:999px; background:transparent; color:var(--ink); border:1px solid var(--line); font-weight:600; } .assistant-messages{ flex:1; overflow:auto; padding:12px; display:flex; flex-direction:column; gap:10px; background:color-mix(in srgb, var(--panel) 90%, var(--bg)); } .assistant-msg{display:flex} .assistant-msg.user{justify-content:flex-end} .assistant-msg.assistant{justify-content:flex-start} .assistant-bubble{ max-width:88%; white-space:pre-wrap; line-height:1.45; font-size:14px; border-radius:12px; border:1px solid var(--line); padding:9px 11px; background:var(--card); } .assistant-msg.user .assistant-bubble{ background:color-mix(in srgb, var(--accent) 88%, #0a1124); border-color:color-mix(in srgb, var(--accent) 58%, var(--line)); color:#fff; } .assistant-compose{ display:grid; grid-template-columns:1fr auto; gap:8px; padding:10px 12px 8px; border-top:1px solid var(--line); } .assistant-compose input{margin:0} .assistant-compose button{ width:auto; margin-top:0; padding:10px 14px; } .assistant-status{ margin:0; min-height:22px; padding:0 12px 10px; font-size:12px; color:var(--muted); } @media (min-width: 900px){ .optimizer-panel{ height:calc(100vh - var(--tab-offset)); overflow:hidden; } .email-panel{ height:calc(100vh - var(--tab-offset)); overflow:auto; padding-bottom:48px; } .dev-panel{ height:calc(100vh - var(--tab-offset)); overflow:auto; padding-bottom:48px; } .email-card{ padding:18px; } } @media (min-width: 1100px){ .email-layout{ grid-template-columns:minmax(0, 2.1fr) minmax(280px, 1fr); } } @media (max-width: 899px){ .optimizer-shell{ grid-template-columns:1fr; min-height:auto; } .optimizer-sidebar{ min-height:auto; border-right:0; border-bottom:1px solid var(--line); } .optimizer-main{ min-height:58vh; } } @media (max-width: 640px){ .email-mode-group{ flex-direction:column; align-items:flex-start; } .email-type-group{ margin-left:0; justify-content:flex-start; width:100%; } .email-calendar-title-row{ grid-template-columns:1fr; } .email-action-buttons{ flex-direction:column; } .email-action-buttons button{ width:100%; min-width:0; } .email-calendar-action-buttons{ flex-direction:row; } .email-calendar-action-buttons button{ width:auto; min-width:130px; flex:1 1 0; } .scheduling-context-card{ position:static; } .assistant-fab{ right:12px; bottom:calc(env(safe-area-inset-bottom, 0px) + 76px); } .assistant-panel{ right:12px; bottom:calc(env(safe-area-inset-bottom, 0px) + 132px); width:calc(100vw - 24px); height:min(500px, calc(100vh - 90px)); } .optimizer-calendar-top{ display:grid; grid-template-columns:auto 1fr auto; gap:8px; } .optimizer-map-switch{ grid-column:1 / -1; justify-self:start; } .optimizer-week-strip{ overflow-x:auto; grid-template-columns:repeat(7, minmax(70px, 1fr)); padding-bottom:2px; } .optimizer-week-day{ min-height:74px; padding:6px 3px; } .optimizer-map-canvas{ height:52vh; min-height:320px; } .optimizer-optimize-btn{ flex:1 1 auto; min-width:0; } .optimizer-start-time-wrap{ width:100%; justify-content:space-between; } .optimizer-start-time-input{ flex:1 1 auto; min-width:0; } .optimizer-drag-handle{ width:34px; min-width:34px; height:34px; } }