/* Vilobot ERP — Vilo Fence brand light theme
Brand: burgundy #691d20, teal-green #253938, tan #f1e8df, rose #c18774
Same DOM/class structure as original ViloBot so layout is identical. */
:root {
--bg: #ffffff; /* white page background */
--bg2: #f1e8df; /* tan cards / sidebar */
--bg3: #e6dbcc; /* slightly darker neutral for hovers/rows */
--border: rgba(37,57,56,0.12);
--text: #000000; /* true black — high contrast on tan/white surfaces */
--text-dim: rgba(0,0,0,0.65);
--accent: #691d20; /* burgundy primary action */
--accent-hover: #500f12;
--green: #2f7a3d; /* status green */
--yellow: #b88312;
--red: #b91c1c; /* error / destructive */
--blue: #2563eb;
--purple: #6d28d9;
--radius: 10px;
--sidebar-width: 260px;
}
/* Light theme tweaks for active nav item (was rgba on dark, needs adjustment on light) */
.nav-item.active { background: rgba(105,29,32,0.08) !important; color: var(--accent) !important; border-left-color: var(--accent) !important; }
.nav-item:hover { background: rgba(105,29,32,0.05) !important; color: var(--accent) !important; }
.sidebar-header h1 { color: var(--accent) !important; }
body { background: var(--bg); }
.sidebar { background: var(--bg2); }
.app-header { background: var(--bg2); border-bottom: 1px solid var(--border); }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* ── Scrollbar ─────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 3px; }
/* ── Layout ────────────────────────────── */
.app-shell { display: flex; min-height: 100vh; }
/* ── Sidebar ───────────────────────────── */
.sidebar { width: var(--sidebar-width); background: var(--bg2); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; height: 100dvh; overflow: hidden; z-index: 100; transition: transform 0.25s ease, width 0.2s ease; }
/* Collapsed sidebar — thin vertical bar */
.sidebar.collapsed { width: 44px; min-width: 44px; overflow: visible; }
.sidebar.collapsed .sidebar-header h1,
.sidebar.collapsed .sidebar-header .user-name,
.sidebar.collapsed .sidebar-section,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .sidebar-footer { display: none; }
.sidebar.collapsed .sidebar-header { padding: 12px 8px; }
.sidebar.collapsed .sidebar-nav { overflow-y: hidden; overflow-x: hidden; width: 44px; }
.sidebar.collapsed .nav-item { padding: 10px 12px; justify-content: center; gap: 0; border-left: none; overflow: hidden; white-space: nowrap; width: 44px; }
.sidebar.collapsed .nav-item .nav-icon { width: auto; font-size: 18px; }
/* Toggle bar — sits on top edge of sidebar */
.sidebar-toggle { position: absolute; top: 8px; right: -20px; width: 20px; height: 40px; background: var(--bg2); border: 1px solid var(--border); border-left: none; border-radius: 0 6px 6px 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 11px; z-index: 200; }
.sidebar-toggle:hover { background: var(--accent); color: #fff; }
.sidebar-header { padding: 20px 16px; border-bottom: 1px solid var(--border); }
.sidebar-header h1 { font-size: 22px; font-weight: 700; color: var(--accent); }
.sidebar-header .user-name { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.sidebar-nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 8px 0 16px; }
.sidebar-section { padding: 8px 16px 4px; font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: var(--text-dim); font-size: 14px; cursor: pointer; transition: all 0.15s; border-left: 3px solid transparent; }
.nav-item:hover { background: var(--bg3); color: var(--text); }
.nav-item.active { background: rgba(232,115,90,0.1); color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
.nav-item .nav-icon { width: 20px; text-align: center; font-size: 16px; }
.sidebar-footer { padding: 12px 16px; border-top: 1px solid var(--border); }
.logout-btn { width: 100%; padding: 10px; background: var(--bg3); border: 1px solid var(--border); color: var(--text-dim); border-radius: 8px; cursor: pointer; font-size: 13px; }
.logout-btn:hover { color: var(--red); border-color: var(--red); }
/* ── Main content ──────────────────────── */
.main-content { flex: 1; margin-left: var(--sidebar-width); min-height: 100vh; overflow-x: hidden; width: calc(100vw - var(--sidebar-width)); max-width: calc(100vw - var(--sidebar-width)); transition: margin-left 0.2s ease, max-width 0.2s ease; }
.sidebar.collapsed ~ .main-content { margin-left: 44px; width: calc(100vw - 44px); max-width: calc(100vw - 44px); }
.app-header { position: sticky; top: 0; background: var(--bg); border-bottom: 1px solid var(--border); padding: 14px 20px; display: flex; align-items: center; gap: 12px; z-index: 50; }
.app-header .menu-toggle { display: none; background: none; border: none; color: var(--text); font-size: 22px; cursor: pointer; padding: 4px; }
.app-header h2 { font-size: 18px; font-weight: 600; flex: 1; }
.app-body { padding: 16px 20px; width: 100%; max-width: 100%; overflow-x: auto; box-sizing: border-box; }
/* ── Mobile sidebar ────────────────────── */
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99; }
@media (max-width: 768px) {
.sidebar { transform: translateX(-100%); width: 280px; }
.sidebar.open { transform: translateX(0); }
.sidebar-overlay.open { display: block; }
.sidebar-toggle { display: none; }
.sidebar.open .sidebar-toggle { display: flex; }
.main-content { margin-left: 0 !important; max-width: 100vw !important; }
.app-header .menu-toggle { display: block; }
.app-body { padding: 12px; }
}
/* ── Tablet (iPad) ────────────────────── */
@media (min-width: 769px) and (max-width: 1180px) {
:root { --sidebar-width: 200px; }
.sidebar .nav-label { font-size: 12px; }
.app-body { padding: 12px 14px; }
}
/* ── Kiosk mode (hideSidebar roles) ───── */
body.app-kiosk .sidebar { display: none !important; }
body.app-kiosk .main-content { margin-left: 0 !important; width: 100vw !important; max-width: 100vw !important; }
body.app-kiosk .app-header .menu-toggle { display: none !important; }
.kiosk-logout { background: none; border: none; cursor: pointer; font-size: 18px; color: var(--text-dim); padding: 4px 8px; line-height: 1; }
.kiosk-logout:hover { color: var(--accent); }
/* ── Cards ─────────────────────────────── */
.card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.card-title { font-size: 15px; font-weight: 600; }
.card-subtitle { font-size: 13px; color: var(--text-dim); }
/* ── Badges ────────────────────────────── */
.badge { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.badge-green { background: rgba(74,222,128,0.15); color: var(--green); }
.badge-yellow { background: rgba(251,191,36,0.15); color: var(--yellow); }
.badge-red { background: rgba(248,113,113,0.15); color: var(--red); }
.badge-blue { background: rgba(96,165,250,0.15); color: var(--blue); }
.badge-purple { background: rgba(167,139,250,0.15); color: var(--purple); }
.badge-gray { background: rgba(255,255,255,0.08); color: var(--text-dim); }
.badge-accent { background: rgba(232,115,90,0.15); color: var(--accent); }
/* ── Buttons ───────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 10px; font-size: 15px; font-weight: 600; border: none; cursor: pointer; transition: all 0.15s; min-height: 44px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn:active { transform: scale(0.97); opacity: 0.9; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--bg3); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--accent); }
.btn-sm { padding: 10px 14px; font-size: 13px; min-height: 40px; }
.btn-icon { padding: 10px; background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 18px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
/* ── Forms ─────────────────────────────── */
.form-input, .form-select { width: 100%; padding: 12px 14px; background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 16px; outline: none; min-height: 44px; -webkit-appearance: none; }
.form-input:focus, .form-select:focus { border-color: var(--accent); }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.form-label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 4px; }
.form-group { margin-bottom: 12px; }
/* ── Search bar ────────────────────────── */
.search-bar { position: relative; }
.search-bar input { padding-left: 36px; }
.search-bar::before { content: "\1F50D"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; opacity: 0.5; }
/* ── Tabs ──────────────────────────────── */
.tabs { display: flex; gap: 4px; padding: 4px; background: var(--bg2); border-radius: 12px; margin-bottom: 16px; overflow-x: auto; flex-wrap: wrap; }
.tab { padding: 10px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--text-dim); cursor: pointer; white-space: nowrap; transition: all 0.15s; min-height: 44px; display: flex; align-items: center; -webkit-tap-highlight-color: transparent; }
.tab.active { background: var(--accent); color: #fff; }
.tab:active:not(.active) { background: var(--bg3); }
.tab:hover:not(.active) { color: var(--text); }
/* ── Table ─────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { text-align: left; padding: 10px 12px; font-size: 12px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); }
.data-table td { padding: 10px 12px; font-size: 14px; border-bottom: 1px solid var(--border); }
.data-table tr:hover td { background: rgba(255,255,255,0.02); }
.data-table .clickable { cursor: pointer; }
.data-table .clickable:hover td { background: rgba(232,115,90,0.05); }
/* ── Kanban ────────────────────────────── */
.kanban-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; }
.kanban-col { min-width: 280px; flex: 1; }
.kanban-col-header { padding: 10px 12px; background: var(--bg2); border-radius: var(--radius) var(--radius) 0 0; border: 1px solid var(--border); border-bottom: 2px solid var(--accent); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.kanban-col-header .count { background: var(--bg3); padding: 2px 8px; border-radius: 10px; font-size: 11px; color: var(--text-dim); }
.kanban-col-body { border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius) var(--radius); padding: 8px; min-height: 100px; background: var(--bg); }
.kanban-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 8px; cursor: pointer; transition: border-color 0.15s; }
.kanban-card:hover { border-color: var(--accent); }
.kanban-card .kc-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.kanban-card .kc-customer { font-size: 13px; color: var(--text-dim); }
.kanban-card .kc-amount { font-size: 14px; font-weight: 600; color: var(--green); margin-top: 6px; }
.kanban-card .kc-date { font-size: 12px; color: var(--text-dim); }
.kanban-card .kc-meta { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
/* ── Stats row ─────────────────────────── */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 16px; width: 100%; box-sizing: border-box; }
.stat-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; text-align: center; }
.stat-value { font-size: 24px; font-weight: 700; }
.stat-label { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
/* ── Filter bar ────────────────────────── */
.filter-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.filter-bar .form-input, .filter-bar .form-select { width: auto; min-width: 140px; padding: 8px 12px; font-size: 14px; }
/* ── Detail view ───────────────────────── */
.detail-back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 14px; cursor: pointer; margin-bottom: 16px; }
.detail-back:hover { color: var(--accent); }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 768px) { .detail-grid { grid-template-columns: 1fr; } }
/* Payment & Signature card — 2-col inner grid (desktop), stacks on mobile */
.pay-card-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 24px; }
@media (max-width: 900px) { .pay-card-grid { grid-template-columns: 1fr; } }
.pay-card-grid .pay-col { min-width: 0; }
.pay-card-grid .pay-rows { display: grid; grid-template-columns: 130px 1fr; gap: 10px 14px; align-items: center; font-size: 14px; }
.pay-card-grid .pay-rows > .label { color: var(--text-dim); font-weight: 600; }
.pay-card-grid .pay-rows > .value { font-size: 14px; }
.pay-card-grid .pay-subhead { font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.pay-card-grid .pay-divider { border-top: 1px solid var(--border); margin: 14px 0; }
.pay-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.pay-actions .btn { font-size: 14px; min-height: 40px; padding: 8px 16px; }
.pay-actions .btn-primary-action { background: var(--green); color: #fff; font-weight: 700; }
.detail-section { margin-bottom: 20px; }
.detail-section h3 { font-size: 14px; font-weight: 600; color: var(--text-dim); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.detail-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.detail-row .label { color: var(--text-dim); }
.detail-row .value { font-weight: 500; text-align: right; }
/* ── Line items table ──────────────────── */
.line-items { width: 100%; }
.line-items th { text-align: left; padding: 8px; font-size: 12px; color: var(--text-dim); border-bottom: 1px solid var(--border); }
.line-items td { padding: 8px; font-size: 13px; border-bottom: 1px solid var(--border); }
.line-items .section-row td { font-weight: 600; color: var(--accent); padding-top: 14px; }
.line-items .note-row td { color: var(--text-dim); font-style: italic; }
/* ── Loading ───────────────────────────── */
.loading { display: flex; align-items: center; justify-content: center; padding: 40px; color: var(--text-dim); }
.loading::before { content: ""; width: 24px; height: 24px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.6s linear infinite; margin-right: 10px; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ── Empty state ───────────────────────── */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-dim); }
.empty-state .icon { font-size: 48px; margin-bottom: 12px; opacity: 0.3; }
.empty-state h3 { font-size: 16px; margin-bottom: 4px; color: var(--text); }
.empty-state p { font-size: 14px; }
/* ── Toast ─────────────────────────────── */
.toast { position: fixed; bottom: 20px; right: 20px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 20px; font-size: 14px; z-index: 1000; transform: translateY(100px); opacity: 0; transition: all 0.3s; }
.toast.show { transform: translateY(0); opacity: 1; }
.toast.error { border-color: var(--red); }
/* ── Calendar grid ─────────────────────── */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-header { font-size: 11px; font-weight: 600; color: var(--text-dim); text-align: center; padding: 8px 4px; }
.cal-day { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; min-height: 80px; padding: 4px; }
.cal-day-num { font-size: 11px; color: var(--text-dim); padding: 2px 4px; }
.cal-event { background: rgba(232,115,90,0.15); border-left: 2px solid var(--accent); border-radius: 3px; padding: 2px 4px; font-size: 11px; margin-top: 2px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 768px) {
.kanban-board { flex-direction: column; }
.kanban-col { min-width: unset; }
.stats-row { grid-template-columns: repeat(2, 1fr); }
.filter-bar { flex-direction: column; }
.filter-bar .form-input, .filter-bar .form-select { width: 100%; }
/* ── Mobile SO Detail ────────────── */
.so-detail-grid { grid-template-columns: 1fr !important; }
/* Line items table → card layout on mobile */
.line-items { display: block; }
.line-items thead { display: none; }
.line-items tbody { display: flex; flex-direction: column; gap: 8px; }
.line-items tr {
display: flex; flex-wrap: wrap; gap: 4px 12px;
padding: 12px 12px 10px; padding-right: 40px; /* room for action buttons */
background: var(--bg2); border-radius: 8px; border: 1px solid var(--border);
align-items: flex-start; position: relative;
}
.line-items tr.section-row, .line-items tr.note-row { background: none; border: none; padding: 8px 0; }
.line-items td { border: none; padding: 2px 0; font-size: 13px; }
.line-items td:first-child { flex: 1 1 100%; min-width: 0; padding-right: 30px; }
.line-items td:nth-child(2), .line-items td:nth-child(3), .line-items td:nth-child(4) { font-size: 13px; font-weight: 600; }
.line-items td:nth-child(2)::before { content: "Qty: "; color: var(--text-dim); font-weight: 400; font-size: 11px; }
.line-items td:nth-child(3)::before { content: "Price: "; color: var(--text-dim); font-weight: 400; font-size: 11px; }
.line-items td:nth-child(4)::before { content: "Total: "; color: var(--text-dim); font-weight: 400; font-size: 11px; }
.line-items td:last-child { position: absolute; right: 6px; top: 6px; display: flex; flex-direction: column; gap: 2px; }
/* ── Mobile Site Plan Editor ──────── */
.spe-top { padding: 4px 6px !important; gap: 3px !important; }
.spe-top .spe-tb { min-width: 40px !important; min-height: 40px !important; padding: 2px !important; font-size: 13px !important; }
.spe-bot { padding: 4px 8px !important; gap: 3px !important; }
.spe-float-btn { padding: 10px 16px !important; font-size: 13px !important; bottom: 8px !important; }
/* Footer totals row — clean layout */
.line-items tfoot { display: block; margin-top: 8px; }
.line-items tfoot tr {
background: none; border: none; padding: 4px 0;
display: flex; justify-content: flex-end; gap: 8px; align-items: center;
}
.line-items tfoot td { border: none; padding: 0; }
.line-items tfoot td::before { content: none !important; }
}
/* ── iPad / Tablet optimizations (768px+, touch device) ── */
@media (min-width: 768px) and (pointer: coarse) {
/* Bigger touch targets for field workers */
.btn { padding: 14px 22px; font-size: 15px; border-radius: 12px; min-height: 48px; }
.btn-sm { padding: 11px 16px; font-size: 14px; min-height: 44px; }
.btn-icon { min-width: 48px; min-height: 48px; font-size: 20px; }
/* Navigation */
.nav-item { padding: 14px 18px; font-size: 15px; min-height: 48px; }
.nav-item .nav-icon { font-size: 18px; }
.sidebar-section { font-size: 12px; padding: 10px 18px 6px; }
/* Cards — more breathing room */
.card { padding: 18px; margin-bottom: 14px; border-radius: 12px; }
.card-title { font-size: 16px; }
/* Forms */
.form-input, .form-select { padding: 14px 16px; font-size: 16px; border-radius: 10px; min-height: 48px; }
/* Tabs */
.tab { padding: 12px 20px; font-size: 15px; min-height: 48px; }
/* Table cells */
.data-table td { padding: 14px; font-size: 15px; }
.data-table th { padding: 12px 14px; font-size: 13px; }
.line-items td { padding: 12px 10px; font-size: 14px; }
/* Detail rows */
.detail-row { padding: 10px 0; font-size: 15px; }
.detail-back { font-size: 15px; padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center; }
/* Badges */
.badge { padding: 5px 12px; font-size: 13px; }
/* Kanban cards */
.kanban-card { padding: 16px; }
.kanban-card .kc-name { font-size: 15px; }
/* Toast */
.toast { padding: 16px 24px; font-size: 15px; border-radius: 12px; }
/* Stats */
.stat-value { font-size: 28px; }
.stat-label { font-size: 13px; }
.stat-card { padding: 18px; }
}
/* ── iPhone / Small phone (max 480px) ── */
@media (max-width: 480px) {
/* Global font bump */
body { font-size: 16px; }
.app-body { padding: 8px !important; }
.app-header { padding: 8px 12px; }
.app-header .app-title { font-size: 18px; }
/* Tabs — horizontal scroll, bigger touch */
.tabs { flex-wrap: nowrap; overflow-x: auto; gap: 2px; padding: 3px; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tab { font-size: 14px; padding: 10px 14px; min-height: 44px; white-space: nowrap; flex-shrink: 0; }
/* Buttons — bigger touch targets */
.btn { font-size: 15px; padding: 12px 16px; min-height: 48px; }
.btn-sm { font-size: 14px; padding: 10px 14px; min-height: 44px; }
/* Inputs — bigger */
.form-input, .form-select, input, select, textarea { font-size: 16px !important; padding: 12px !important; min-height: 48px !important; border-radius: 8px; }
/* Cards — tighter padding */
.card { padding: 12px; margin-bottom: 8px; border-radius: 10px; }
.card-title { font-size: 17px; }
.card-subtitle { font-size: 14px; }
/* Stats — 2 cols on small phones, compact */
.stats-row { grid-template-columns: 1fr 1fr !important; gap: 6px; }
.cs-stats-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 4px !important; }
.cs-stats-grid > div { padding: 8px 4px !important; }
.cs-stats-grid > div > div:first-child { font-size: 18px !important; }
.cs-stats-grid > div > div:last-child { font-size: 9px !important; }
.stat-card { padding: 10px; }
.stat-value { font-size: 22px; }
.stat-label { font-size: 11px; }
/* Badges */
.badge { font-size: 11px; padding: 3px 8px; }
/* Tables */
.data-table { font-size: 13px; }
.data-table td { padding: 8px 6px; }
.data-table th { padding: 6px; font-size: 11px; }
/* Navigation sidebar items */
.nav-item { padding: 14px 16px; font-size: 16px; min-height: 48px; }
/* Button groups — stack vertically */
.filter-bar { flex-direction: column; gap: 6px; }
.filter-bar > * { width: 100%; }
/* Modals/Overlays — near full width with padding */
[style*="max-width:400px"], [style*="max-width:420px"], [style*="max-width:450px"], [style*="max-width:460px"] {
max-width: calc(100vw - 16px) !important; width: calc(100vw - 16px) !important; border-radius: 12px !important;
}
/* SO detail action buttons — wrap nicely */
[style*="display:flex"][style*="gap:8px"][style*="flex-wrap:wrap"] > .btn,
[style*="display:flex"][style*="gap:6px"] > button {
flex: 1 1 45%; min-width: 120px;
}
/* Estimator quote cards */
.est-quote-card { padding: 12px !important; }
/* Site plan editor — compact toolbar for phone */
.spe-top { padding: 3px 4px !important; gap: 1px !important; flex-wrap: wrap; }
.spe-top .spe-tb { min-width: 36px !important; height: 36px !important; padding: 2px !important; font-size: 14px !important; }
.spe-top .spe-tbl { font-size: 8px !important; }
.spe-bot { padding: 3px 6px !important; gap: 2px !important; flex-wrap: wrap; }
.spe-bot .spe-tb { min-width: 34px !important; height: 34px !important; font-size: 12px !important; }
.spe-bot .spe-tbl { font-size: 9px !important; }
/* Grid layouts — single column */
[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
/* ── Estimator + Sales: mobile-first compaction (2026-05-29) ──────── */
/* Estimator's horizontal-scroll tab strip lives inline-styled — keep
the scroll behaviour, just enlarge tap targets and tighten spacing. */
.est-tabs.est-tabs--primary {
padding: 6px 8px 8px !important;
gap: 5px !important;
}
.est-tabs.est-tabs--primary .est-tab {
padding: 6px 11px !important;
font-size: 12px !important;
min-height: 34px !important;
}
.est-tabs.est-tabs--primary .est-tab span:first-child {
font-size: 13px !important;
}
/* iOS renders as a giant tan block by default. Lock
down the visual to the inline-style cap so it never grows past it. */
input[type="date"].form-input {
font-size: 13px !important;
padding: 6px 8px !important;
min-height: 36px !important;
max-width: 170px;
}
/* Sales / Quotes data-table — too wide on phones; restyle as stacked
cards so each quote row reads as a card. Tap row to open. */
.data-table tbody tr.clickable {
display: block;
margin-bottom: 8px;
padding: 10px 12px;
border: 1px solid var(--border, #e5e7eb);
border-radius: 10px;
background: var(--bg-card, #fff);
}
.data-table tbody tr.clickable td {
display: inline-block;
border: none;
padding: 2px 6px 2px 0;
}
.data-table tbody tr.clickable td:first-child {
font-weight: 700;
font-size: 15px;
width: 100%;
}
.data-table thead {
display: none;
}
}
/* Skeleton loading animation */
.skeleton{background:linear-gradient(90deg,var(--bg3,#21262d) 25%,var(--bg2,#161b22) 50%,var(--bg3,#21262d) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-text{height:14px;margin-bottom:8px}
.skeleton-title{height:22px;width:60%;margin-bottom:12px}
.skeleton-block{height:80px;margin-bottom:12px}
.skeleton-line{height:12px;margin-bottom:6px}
#sales-content,#ea-content,[id^="est-section-"]{transition:opacity .15s ease}
#sales-content.fading,#ea-content.fading{opacity:0}
/* Estimator app — larger fonts for readability */
[data-app="estimator"]{font-size:15px}
[data-app="estimator"] .card{font-size:15px}
[data-app="estimator"] .form-input,[data-app="estimator"] .form-select,[data-app="estimator"] .btn{font-size:15px;padding:10px 14px}
[data-app="estimator"] .btn-sm{font-size:14px;padding:8px 12px}
[data-app="estimator"] .tab,[data-app="estimator"] .tabs .tab{font-size:14px;padding:10px 16px}
[data-app="estimator-admin"]{font-size:15px}
[data-app="estimator-admin"] .card{font-size:15px}
[data-app="estimator-admin"] .form-input,[data-app="estimator-admin"] .form-select,[data-app="estimator-admin"] .btn{font-size:15px;padding:10px 14px}
[data-app="estimator-admin"] .btn-sm{font-size:14px;padding:8px 12px}
/* ── Locked photo apps — no scroll (mobile only) ── */
@media (max-width: 768px) {
[data-app="powder-coating"],[data-app="driver-scanner"],[data-app="welding-photos"],[data-app="aluminum-photos"]{position:relative;overflow:hidden !important;height:calc(100dvh - 52px);padding:0 !important}
body.photo-app-lock{overflow:hidden !important;height:100dvh;position:fixed;width:100%}
body.photo-app-lock .main-content{overflow:hidden !important;height:100dvh;min-height:0}
}
/* ────── Drafting Workflow ──────
Per-day calendar of installs/deliveries with drafting work, plus a
templates manager. Re-uses ops-* calendar styles where possible. */
.dw-shell { display: flex; flex-direction: column; gap: 12px; }
.dw-tabs {
display: flex; gap: 4px; padding: 4px;
background: var(--bg2); border-radius: 12px;
overflow-x: auto; flex-wrap: wrap;
}
.dw-tab {
padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 600;
color: var(--text-dim); cursor: pointer; white-space: nowrap;
display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
transition: all 0.15s;
}
.dw-tab:hover { background: rgba(105,29,32,0.06); color: var(--accent); }
.dw-tab.active { background: var(--accent); color: #fff; }
.dw-tab-icon { font-size: 16px; }
.dw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.dw-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: 999px;
font-size: 12px; font-weight: 600;
background: var(--bg2); border: 1px solid var(--border);
color: var(--text); cursor: pointer; transition: all 0.15s;
}
.dw-chip:hover { background: rgba(105,29,32,0.06); border-color: var(--accent); }
.dw-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.dw-chip-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
font-size: 11px; font-weight: 700;
background: rgba(0,0,0,0.08); color: inherit;
}
.dw-chip.active .dw-chip-count { background: rgba(255,255,255,0.25); color: #fff; }
.dw-card {
background: var(--bg); border: 1px solid var(--border); border-left: 4px solid var(--border);
border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; cursor: pointer;
transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
}
.dw-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); transform: translateY(-1px); }
.dw-card.dw-stage-needs { border-left-color: #9ca3af; }
.dw-card.dw-stage-progress { border-left-color: #2563eb; }
.dw-card.dw-stage-awaiting { border-left-color: #eab308; }
.dw-card.dw-stage-done { border-left-color: var(--green); background: #f0fdf4; }
.dw-card-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 2px; }
.dw-card-so { font-weight: 700; color: var(--accent); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-card-cust { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.dw-card-assignee { font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-day-count { background: var(--accent); color: #fff; padding: 1px 6px; border-radius: 8px; font-weight: 700; font-size: 10px; }
.dw-undated-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; margin-top: 8px; }
.dw-tpl-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; flex-wrap: wrap; }
.dw-tpl-title { font-size: 18px; color: var(--accent); margin: 0; }
.dw-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.dw-tpl-tile {
position: relative; background: var(--bg2); border: 1px solid var(--border);
border-radius: 12px; padding: 14px; cursor: pointer;
display: flex; flex-direction: column; gap: 8px;
transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.dw-tpl-tile:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(0,0,0,0.08); transform: translateY(-1px); }
.dw-tpl-thumb { font-size: 36px; text-align: center; padding: 10px 0; background: var(--bg); border-radius: 8px; }
.dw-tpl-info { flex: 1; }
.dw-tpl-name { font-weight: 700; font-size: 14px; color: var(--text); margin-bottom: 4px; }
.dw-tpl-meta { font-size: 11px; color: var(--text-dim); }
.dw-tpl-desc { font-size: 12px; color: var(--text-dim); margin-top: 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dw-tpl-del {
position: absolute; top: 8px; right: 8px;
width: 22px; height: 22px; border-radius: 50%;
border: none; background: rgba(0,0,0,0.06); color: var(--text-dim);
font-size: 12px; cursor: pointer; line-height: 1;
}
.dw-tpl-del:hover { background: var(--red); color: #fff; }
.dw-tpl-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.dw-tpl-detail-desc { color: var(--text-dim); font-size: 13px; padding: 8px 0; line-height: 1.5; }
.dw-modal-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.45);
display: flex; align-items: center; justify-content: center;
z-index: 9999; padding: 16px;
}
.dw-modal {
background: var(--bg); border-radius: 12px; max-width: 480px; width: 100%;
box-shadow: 0 12px 40px rgba(0,0,0,0.25); display: flex; flex-direction: column;
}
.dw-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.dw-modal-head h3 { margin: 0; font-size: 16px; color: var(--accent); }
.dw-modal-x { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--text-dim); line-height: 1; }
.dw-modal-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.dw-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-dim); }
.dw-field input, .dw-field textarea { font-size: 14px; }
.dw-modal-hint { font-size: 12px; color: var(--text-dim); font-style: italic; }
.dw-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }
/* ────── Ops Manager v2 ────── */
/* Dark teal mode bar (matches reference screenshots). White text on dark
teal background per the brand. */
.opsv2-modebar {
display: flex; align-items: stretch; gap: 8px;
background: var(--text); /* dark teal #253938 */
border-radius: 12px; padding: 6px 8px;
margin-bottom: 12px; color: #fff;
position: relative;
}
.opsv2-modebar-inner {
display: flex; gap: 2px; flex: 1; overflow-x: auto; align-items: center;
scrollbar-width: thin;
}
.opsv2-modebar-inner::-webkit-scrollbar { height: 4px; }
.opsv2-modebar-inner::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); }
.opsv2-mode {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 12px; border-radius: 8px;
background: transparent; color: rgba(255,255,255,0.78);
border: none; cursor: pointer; font-size: 13px; font-weight: 600;
white-space: nowrap; transition: background 0.12s, color 0.12s;
position: relative;
}
.opsv2-mode:hover { background: rgba(255,255,255,0.08); color: #fff; }
.opsv2-mode.active {
background: var(--accent); color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.opsv2-mode-anchor {
background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.9);
padding: 8px 10px;
}
.opsv2-mode-anchor.active { background: var(--accent); }
.opsv2-mode-icon { font-size: 15px; line-height: 1; }
.opsv2-mode-label { font-size: 13px; font-weight: 600; }
.opsv2-mode-dot {
width: 8px; height: 8px; border-radius: 50%; display: inline-block;
margin-left: 2px;
}
.opsv2-dot-purple { background: var(--purple); }
.opsv2-dot-green { background: var(--green); }
.opsv2-dot-red { background: var(--red); }
.opsv2-dot-yellow { background: var(--yellow); }
.opsv2-mode-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
font-size: 10px; font-weight: 800; color: #fff; margin-left: 2px;
}
.opsv2-count-red { background: #dc2626; }
.opsv2-count-yellow { background: #d97706; }
.opsv2-search-wrap {
display: flex; align-items: center; flex-shrink: 0;
padding-left: 6px; border-left: 1px solid rgba(255,255,255,0.12);
}
.opsv2-search {
width: 220px; padding: 8px 12px; border-radius: 8px;
background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);
color: #fff; font-size: 13px; outline: none;
}
.opsv2-search::placeholder { color: rgba(255,255,255,0.55); }
.opsv2-search:focus { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.4); }
/* ── Sub-bar (date nav + view toggle) ─────────────────────────────────── */
.opsv2-subbar {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
padding: 8px 10px; margin-bottom: 10px; flex-wrap: wrap;
}
.opsv2-date-nav { display: flex; align-items: center; gap: 6px; }
.opsv2-subbar-right {
display: flex; align-items: center; gap: 4px; margin-left: auto;
}
.opsv2-date-range {
font-size: 13px; font-weight: 700; color: var(--text); margin-left: 8px;
}
.opsv2-weld-alerts {
font-size: 12px; color: var(--yellow); font-weight: 600;
}
.opsv2-icon-btn {
background: var(--bg3); border: 1px solid var(--border); color: var(--text);
width: 30px; height: 30px; border-radius: 6px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700; padding: 0;
}
.opsv2-icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.opsv2-icon-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.opsv2-pill {
background: var(--bg3); border: 1px solid var(--border); color: var(--text);
padding: 6px 12px; border-radius: 6px; cursor: pointer;
font-size: 12px; font-weight: 700; min-height: 30px;
}
.opsv2-pill:hover { border-color: var(--accent); color: var(--accent); }
.opsv2-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }
/* ── Calendar mode 7-day grid ─────────────────────────────────────────── */
.opsv2-cal-grid {
display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 6px; margin-top: 4px;
}
.opsv2-day-col {
background: var(--bg2); border: 1px solid var(--border);
border-radius: 8px; min-height: 200px; display: flex; flex-direction: column;
overflow: hidden;
}
.opsv2-day-col.is-today { outline: 2px solid var(--accent); outline-offset: -1px; }
.opsv2-day-head {
padding: 6px 8px; border-bottom: 1px solid var(--border);
background: var(--bg3);
}
.opsv2-day-wd { font-size: 11px; font-weight: 800; color: var(--accent); letter-spacing: 0.5px; }
.opsv2-day-md { font-weight: 600; color: var(--text); margin-left: 4px; }
.opsv2-day-count {
font-size: 10px; font-weight: 700; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 0.4px; margin-top: 2px;
}
.opsv2-day-body { padding: 4px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.opsv2-day-empty {
color: var(--text-dim); font-size: 12px; text-align: center; padding: 12px 0;
}
/* Install card sizing — mirrors legacy Business-Hub compact card
(artifacts/vilobot/portal/js/ops-manager.js L3164-3168, L2807-2816):
• flex:1, height:100%, min-height:130px → fills slot top-to-bottom
• compact padding 7px 9px, font-size 11px, SO 15px, partner 13px
Slot container .op-cal-installs is already display:flex column with
flex:1 1 auto, so flex:1 on each card stretches them to share remaining
space — no whitespace gap below the bottom card. */
.opsv2-install-card {
/* Card sizes to content (legacy parity: padding 7px 9px, min-height 130px).
Slot container .op-cal-installs no longer forces extra min-height, so
card + slot heights match — no whitespace at the bottom. */
min-height: 130px;
padding: 7px 9px;
border-radius: 6px; cursor: pointer; font-size: 11px;
line-height: 1.25;
box-sizing: border-box; overflow: hidden;
transition: transform 0.1s, box-shadow 0.1s;
}
.opsv2-install-card:hover {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.opsv2-install-card.compact { font-size: 11px; }
.opsv2-card-row1 {
display: flex; align-items: center; gap: 4px; min-width: 0;
}
.opsv2-card-so {
font-weight: 800; flex: 1; min-width: 0; font-size: 15px;
/* Title can wrap to multiple lines so the field-crew tag
("YENSI--PVC--M-27-Coddington Community Association") stays
legible. Cards grow to fit instead of clipping the prefix the
install team relies on to identify the job at a glance. */
white-space: normal; overflow-wrap: anywhere; word-break: break-word;
line-height: 1.2;
}
.opsv2-card-local { font-size: 10px; font-weight: 600; flex-shrink: 0; }
.opsv2-badge-811 {
font-size: 9px; font-weight: 800; padding: 1px 4px; border-radius: 3px;
flex-shrink: 0;
}
.opsv2-card-vendor {
font-size: 10px; font-weight: 500; line-height: 1.2; margin-top: 1px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.opsv2-card-partner {
font-weight: 600; line-height: 1.2; margin-top: 1px; font-size: 13px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.opsv2-card-footer {
display: flex; justify-content: space-between; align-items: center; margin-top: 1px;
}
.opsv2-card-crew { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px; background: rgba(0,0,0,0.25); color: #fff; }
.opsv2-card-assign {
font-size: 11px; font-weight: 700; color: #fff;
text-decoration: underline; padding: 0;
background: transparent;
}
.opsv2-repair-tag {
display: inline-block; font-size: 9px; font-weight: 800;
background: #fde68a; color: #92400e; padding: 1px 5px;
border-radius: 3px; margin-bottom: 3px;
}
.opsv2-unscheduled { margin-top: 16px; }
.opsv2-unscheduled summary {
cursor: pointer; font-weight: 700; padding: 8px 0;
color: var(--text); list-style: none;
}
.opsv2-unscheduled summary::before { content: "▸ "; color: var(--accent); }
.opsv2-unscheduled[open] summary::before { content: "▾ "; }
/* ── Welding sub-tabs + filter chips ─────────────────────────────────── */
.opsv2-weld-subtabs {
display: flex; gap: 4px; padding: 6px;
background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
margin-bottom: 8px; align-items: center; overflow-x: auto;
}
.opsv2-weld-subtab {
background: transparent; border: none; color: var(--text-dim);
padding: 6px 12px; border-radius: 6px; cursor: pointer;
font-size: 13px; font-weight: 600; white-space: nowrap;
position: relative;
}
.opsv2-weld-subtab:hover { background: var(--bg3); color: var(--text); }
.opsv2-weld-subtab.active { background: var(--accent); color: #fff; }
.opsv2-subtab-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px;
font-size: 10px; font-weight: 800; color: #fff;
background: var(--red); margin-left: 4px;
}
.opsv2-add-block-btn {
margin-left: auto; background: var(--accent); color: #fff; border: none;
padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 700;
cursor: pointer; white-space: nowrap;
}
.opsv2-add-block-btn:hover { background: var(--accent-hover); }
.opsv2-weld-chips {
display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px;
}
.opsv2-chip {
background: var(--bg2); border: 1px solid var(--border); color: var(--text-dim);
padding: 5px 10px; border-radius: 16px; cursor: pointer;
font-size: 12px; font-weight: 600; white-space: nowrap;
display: inline-flex; align-items: center; gap: 4px;
}
.opsv2-chip:hover { border-color: var(--accent); color: var(--accent); }
.opsv2-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.opsv2-chip-count { font-size: 11px; font-weight: 800; opacity: 0.85; }
/* Welder legend */
.opsv2-weld-legend {
display: flex; flex-wrap: wrap; gap: 8px;
background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
padding: 8px 12px; margin-bottom: 8px;
}
.opsv2-legend-item {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 600; color: var(--text);
}
.opsv2-legend-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.opsv2-legend-count { color: var(--text-dim); font-size: 12px; }
/* Welder week grid */
.opsv2-grid-wrap {
background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
overflow-x: auto;
}
.opsv2-grid-header {
display: grid; grid-template-columns: 140px repeat(7, minmax(120px, 1fr));
background: var(--bg3); border-bottom: 1px solid var(--border);
}
.opsv2-grid-corner {
padding: 8px 10px; font-size: 11px; font-weight: 800; color: var(--accent);
text-transform: uppercase; letter-spacing: 0.5px; border-right: 1px solid var(--border);
}
.opsv2-grid-dayhdr {
padding: 8px 10px; font-size: 12px; color: var(--text);
border-right: 1px solid var(--border); display: flex; align-items: center; gap: 6px;
}
.opsv2-grid-dayhdr:last-child { border-right: none; }
.opsv2-grid-dayname { font-weight: 800; }
.opsv2-grid-dayhours { color: var(--text-dim); font-weight: 600; font-size: 11px; }
.opsv2-grid-body { display: flex; flex-direction: column; }
.opsv2-grid-row {
display: grid; grid-template-columns: 140px repeat(7, minmax(120px, 1fr));
border-bottom: 1px solid var(--border); min-height: 80px;
}
.opsv2-grid-row:last-child { border-bottom: none; }
.opsv2-grid-welder {
padding: 8px 10px; background: var(--bg3); border-right: 1px solid var(--border);
display: flex; flex-direction: column; justify-content: center;
}
.opsv2-grid-welder-name { font-size: 13px; font-weight: 700; color: var(--text); }
.opsv2-grid-welder-hours { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.opsv2-grid-cell {
padding: 4px; border-right: 1px solid var(--border);
display: flex; flex-direction: column; gap: 4px;
}
.opsv2-grid-cell:last-child { border-right: none; }
/* Task card (used inside grid cells & kanban) */
.opsv2-task-card {
background: #fff; border: 1px solid var(--border); border-radius: 6px;
padding: 6px 8px; font-size: 11px; cursor: pointer;
transition: transform 0.1s, box-shadow 0.1s;
}
.opsv2-task-card:hover {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.opsv2-task-row1 {
display: flex; align-items: center; justify-content: space-between; gap: 4px;
}
.opsv2-task-so { font-weight: 800; color: var(--accent); font-size: 12px; }
.opsv2-task-dept {
font-size: 9px; font-weight: 800; color: #fff; padding: 1px 4px;
border-radius: 3px; letter-spacing: 0.3px;
}
.opsv2-dept-wld { background: #2563eb; }
.opsv2-dept-al { background: #b88312; }
.opsv2-dept-pnt { background: #6d28d9; }
.opsv2-dept-hr { background: #ec4899; }
.opsv2-dept-bd { background: #0f766e; }
.opsv2-task-partner {
font-weight: 600; color: var(--text); margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.opsv2-task-meta { font-size: 10px; color: var(--text-dim); }
.opsv2-task-stage {
display: inline-block; margin-top: 3px; font-size: 9px; font-weight: 700;
padding: 1px 5px; border-radius: 3px; background: var(--bg3); color: var(--text-dim);
text-transform: capitalize;
}
.opsv2-stage-in-progress { background: rgba(37,99,235,0.15); color: var(--blue); }
.opsv2-stage-done { background: rgba(47,122,61,0.15); color: var(--green); }
.opsv2-stage-on-hold { background: rgba(184,131,18,0.15); color: var(--yellow); }
.opsv2-stage-queued { background: rgba(105,29,32,0.10); color: var(--accent); }
.opsv2-task-actions {
display: flex; gap: 2px; margin-top: 4px; padding-top: 4px;
border-top: 1px solid var(--border);
}
.opsv2-task-action {
flex: 1; background: transparent; border: none; cursor: pointer;
font-size: 11px; padding: 2px 4px; border-radius: 3px; color: var(--text-dim);
}
.opsv2-task-action:hover { background: var(--bg3); color: var(--accent); }
/* Kanban view (welding) */
.opsv2-kanban {
display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px;
}
.opsv2-kanban-col {
flex: 1 1 0; min-width: 200px; background: var(--bg2);
border: 1px solid var(--border); border-radius: 8px; padding: 8px;
display: flex; flex-direction: column; gap: 6px;
}
.opsv2-kanban-head {
font-size: 12px; font-weight: 800; color: var(--accent);
text-transform: uppercase; letter-spacing: 0.4px;
display: flex; align-items: center; justify-content: space-between;
}
.opsv2-kanban-count { font-size: 11px; font-weight: 700; color: var(--text-dim); }
.opsv2-kanban-body { display: flex; flex-direction: column; gap: 4px; }
.opsv2-kanban-empty { color: var(--text-dim); font-size: 12px; text-align: center; padding: 12px 0; }
/* Empty state */
.opsv2-empty {
background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
padding: 36px 20px; text-align: center;
}
.opsv2-empty-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.opsv2-empty-sub { font-size: 13px; color: var(--text-dim); }
/* Generic list row (handrails, sub-work, stopped, blockers) */
.opsv2-list-head {
font-size: 13px; font-weight: 600; color: var(--text-dim); margin-bottom: 8px;
}
.opsv2-row-list { display: flex; flex-direction: column; gap: 6px; }
.opsv2-row {
background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
padding: 10px 14px; cursor: pointer;
display: flex; align-items: center; gap: 10px;
transition: background 0.1s;
}
.opsv2-row:hover { background: var(--bg3); }
.opsv2-row-main { flex: 1; min-width: 0; }
.opsv2-row-so { font-weight: 700; color: var(--accent); font-size: 14px; }
.opsv2-row-cust { font-size: 13px; color: var(--text); margin-top: 2px; }
.opsv2-row-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.opsv2-row-side { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.opsv2-row-date { font-size: 11px; color: var(--text-dim); }
/* Reports stats */
.opsv2-stats-row {
display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px; margin-bottom: 16px;
}
.opsv2-stat-card {
background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
padding: 14px; text-align: center;
}
.opsv2-stat-value { font-size: 28px; font-weight: 800; color: var(--accent); line-height: 1.1; }
.opsv2-stat-label { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 4px; }
.opsv2-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 13px; }
.opsv2-bar-label { width: 140px; color: var(--text); font-weight: 600; text-transform: capitalize; }
.opsv2-bar-track { flex: 1; height: 16px; background: var(--bg3); border-radius: 4px; overflow: hidden; }
.opsv2-bar-fill { height: 100%; background: var(--accent); transition: width 0.3s; }
.opsv2-bar-count { width: 100px; text-align: right; color: var(--text-dim); font-weight: 600; }
/* Bot mode card */
.opsv2-bot-card {
background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
padding: 48px 24px; text-align: center; margin-top: 12px;
}
.opsv2-bot-icon { font-size: 56px; margin-bottom: 12px; }
.opsv2-bot-title { font-size: 22px; font-weight: 800; color: var(--accent); margin-bottom: 4px; }
.opsv2-bot-sub { font-size: 14px; color: var(--text-dim); }
/* ── ViloBot AI assistant chat ─────────────────────────────────────────── */
.opsv2-bot-chat {
display: flex; flex-direction: column;
height: calc(100vh - 220px); min-height: 360px;
background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
margin-top: 12px; overflow: hidden;
}
.opsv2-bot-head {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg2);
}
.opsv2-bot-head-icon { font-size: 26px; }
.opsv2-bot-head-title { font-weight: 800; color: var(--accent); }
.opsv2-bot-head-sub { font-size: 12px; color: var(--text-dim); }
.opsv2-bot-clear {
margin-left: auto; font-size: 12px; padding: 5px 10px; cursor: pointer;
background: transparent; color: var(--text-dim);
border: 1px solid var(--border); border-radius: 6px;
}
.opsv2-bot-clear:hover { color: var(--accent); border-color: var(--accent); }
.opsv2-bot-log { flex: 1; overflow-y: auto; padding: 16px; }
.opsv2-bot-empty { text-align: center; color: var(--text-dim); padding: 32px 12px; }
.opsv2-bot-empty-icon { font-size: 40px; margin-bottom: 8px; }
.opsv2-bot-suggest { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.opsv2-bot-chip {
font-size: 13px; padding: 7px 12px; cursor: pointer;
background: var(--bg); color: var(--text); text-align: left;
border: 1px solid var(--border); border-radius: 16px;
}
.opsv2-bot-chip:hover { border-color: var(--accent); color: var(--accent); }
.opsv2-bot-msg { display: flex; margin-bottom: 12px; }
.opsv2-bot-msg.user { justify-content: flex-end; }
.opsv2-bot-bubble {
max-width: 80%; padding: 10px 14px; border-radius: 14px;
font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word;
}
.opsv2-bot-msg.user .opsv2-bot-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.opsv2-bot-msg.bot .opsv2-bot-bubble { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.opsv2-bot-bubble code { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; background: rgba(0,0,0,0.06); padding: 1px 4px; border-radius: 4px; }
.opsv2-bot-tools { margin-top: 8px; font-size: 11px; color: var(--text-dim); font-style: italic; }
.opsv2-bot-typing { color: var(--text-dim); font-style: italic; }
.opsv2-bot-inputrow {
display: flex; gap: 8px; align-items: flex-end;
padding: 12px 16px; border-top: 1px solid var(--border);
}
.opsv2-bot-input {
flex: 1; resize: none; font: inherit; font-size: 14px; line-height: 1.4;
padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
background: var(--bg); color: var(--text); max-height: 140px;
}
.opsv2-bot-input:focus { outline: none; border-color: var(--accent); }
.opsv2-bot-input:disabled { opacity: 0.6; cursor: not-allowed; }
.opsv2-bot-send {
padding: 10px 18px; font-weight: 700; cursor: pointer;
background: var(--accent); color: #fff; border: none; border-radius: 10px;
}
.opsv2-bot-send:hover { filter: brightness(1.08); }
.opsv2-bot-send:disabled { opacity: 0.5; cursor: not-allowed; }
/* Schedule mode (month) */
.opsv2-sched-weekdays {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px;
}
.opsv2-sched-wd {
text-align: center; font-size: 11px; font-weight: 700; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 0.5px; padding: 4px;
}
.opsv2-sched-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.opsv2-sched-cell {
background: var(--bg2); border: 1px solid var(--border); border-radius: 6px;
min-height: 100px; padding: 4px; display: flex; flex-direction: column; gap: 2px;
}
.opsv2-sched-cell.is-today { outline: 2px solid var(--accent); outline-offset: -2px; }
.opsv2-sched-cell.empty { visibility: hidden; }
.opsv2-sched-daynum { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.opsv2-sched-pills { display: flex; flex-direction: column; gap: 2px; }
.opsv2-sched-pill {
font-size: 10px; font-weight: 700; color: #fff;
padding: 2px 6px; border-radius: 4px; cursor: pointer;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.opsv2-sched-pill:hover { opacity: 0.85; }
.opsv2-sched-pill-more { font-size: 10px; color: var(--text-dim); padding: 1px 4px; }
.opsv2-blockers-sum { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.opsv2-blockers-sum .badge { font-size: 13px; padding: 6px 12px; }
/* ── Operations Calendar — pre-determined block grid (Vilobot parity) ────
Rows = 30-min time slots from 07:00 to 20:00, plus an "unscheduled" lane.
Cols = TIME header + 7 days of the displayed week.
Cells hold zero-or-more install blocks rendered side-by-side via flex.
Block position is read from `calendarDay`/`calendarSlot`/`sideBySideCol`
with a `scheduledDate` fallback; drag-drop persists those columns.
*/
/* ────── Operations Calendar — day-column block grid (Vilobot parity) ──────
Layout per day column, top-to-bottom:
• day header (DOW, date, INSTALLS count)
• install block stack (drag between days to reschedule)
• "+ new slot" dashed tile
• MATERIAL PICKUP header + stacked pickup cards
• MATERIAL DELIVERY header + stacked delivery cards
----------------------------------------------------------------------- */
.op-cal-wrap {
background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
overflow: auto; max-height: calc(100vh - 200px); padding: 6px;
}
.op-cal-grid {
display: grid;
grid-template-columns: repeat(7, minmax(150px, 1fr));
gap: 6px;
align-items: start;
}
.op-cal-daycol {
background: var(--bg3); border: 1px solid var(--border); border-radius: 8px;
display: flex; flex-direction: column;
min-height: 480px;
overflow: hidden;
}
.op-cal-daycol.is-today {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent) inset;
}
.op-cal-dayhdr {
padding: 8px 6px; text-align: center;
background: var(--bg2);
border-bottom: 1px solid var(--border);
}
.op-cal-daycol.is-today .op-cal-dayhdr {
background: rgba(232, 115, 90, 0.08);
}
.op-cal-wd { font-size: 11px; font-weight: 800; color: var(--accent); letter-spacing: 0.6px; }
.op-cal-md { font-size: 14px; font-weight: 800; color: var(--text); margin-top: 2px; }
.op-cal-daycount {
font-size: 10px; font-weight: 700; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 0.4px; margin-top: 4px;
}
.op-cal-daycount-num {
display: inline-block; padding: 1px 6px; min-width: 18px;
background: var(--border); color: var(--text);
border-radius: 4px; font-weight: 800; margin-left: 2px;
}
.op-cal-installs {
padding: 6px;
display: flex; flex-direction: column; gap: 4px;
min-height: 80px;
flex: 0 0 auto;
/* Calendar's day column never lets content escape — install cards live
in fixed-height row slots so wide titles can't push the whole column
wider than its grid column. */
overflow: hidden;
}
/* Fixed row height — every row across all 7 days renders at the same Y so
the calendar reads like a true grid. Slim by default, can be raised
per-row when content needs more room. */
:root { --op-cal-slot-h: 140px; }
/* One horizontal row in a day. Children are .op-cal-slot cells flexed
side-by-side. */
.op-cal-installs-row {
display: flex;
gap: 4px;
align-items: stretch;
/* Fixed height = uniform blocks, exactly like legacy. The full title
is made to fit by SHRINKING the title font (JS auto-fit in
ops-manager.js fitInstallTitles), not by growing the card. */
height: var(--op-cal-slot-h);
width: 100%;
min-width: 0;
}
/* Thin drop-target sliver below the last row in a day — drag a card on
it and a brand-new horizontal row materialises across all 7 columns.
18 px tall (was 10 px) so the cursor can release inside it reliably;
browsers fire `drop` on whatever element is under the cursor at
mouseup, and a 10 px target proved too small in practice. */
.op-cal-installs-row.is-newrow-sliver {
height: 18px;
min-height: 18px;
}
.op-cal-installs-row.is-newrow-sliver.is-droptarget,
.op-cal-installs-row.is-newrow-sliver.is-droptarget .op-cal-slot {
background: rgba(232, 115, 90, 0.15);
border-color: var(--accent);
}
.op-cal-slot {
border-radius: 6px;
overflow: hidden;
flex: 1 1 0;
/* Critical: lets flex children shrink to share a parent's width evenly
instead of forcing their content's intrinsic width. Without min-width:0
cards with long titles claim more than their fair share and squeeze
siblings to a sliver. */
min-width: 0;
display: flex; flex-direction: column;
height: 100%;
}
.op-cal-slot.is-empty {
border: 2px dashed var(--border);
align-items: center; justify-content: center;
color: var(--text-dim);
font-size: 18px; font-weight: 700;
user-select: none;
background: rgba(0,0,0,0.01);
transition: border-color 0.1s, background 0.1s, color 0.1s;
}
.op-cal-slot.is-empty.is-newrow-sliver-slot {
/* The sliver slot is the bottom drop-only zone — no hover affordance,
no padding. Fills the 18 px sliver row entirely so anywhere inside
the row catches drag/drop events. */
border: 1px dashed var(--border);
border-radius: 4px;
height: 100%;
background: rgba(0,0,0,0.02);
}
.op-cal-installs-row.is-newrow-sliver .op-cal-slot.is-empty.is-newrow-sliver-slot.is-droptarget {
background: rgba(232, 115, 90, 0.22);
border-color: var(--accent);
border-style: solid;
}
.op-cal-slot.is-droptarget {
border-color: var(--accent);
background: rgba(232, 115, 90, 0.18);
outline: 2px dashed var(--accent); outline-offset: -2px;
}
.op-cal-slot.is-filled {
/* Filled slots have the install card stretched edge-to-edge. */
background: transparent;
}
.op-cal-slot.is-filled .op-cal-block {
height: 100%;
min-height: 0;
width: 100%;
min-width: 0;
max-width: 100%;
/* Hard clip everything past the card edges so no title or address
escapes into a neighbouring slot. The title is shrunk to fit by the
JS auto-fit pass (fitInstallTitles) so nothing is actually clipped. */
overflow: hidden;
}
.op-cal-slot-plus { line-height: 1; }
/* Every text row inside an install card truncates with ellipsis instead
of wrapping past the card width. Cascade min-width:0 so flex children
can shrink below their content size — the real fix for "text overflows
the block" reported on the ops calendar. */
.op-cal-slot.is-filled .op-cal-block,
.op-cal-slot.is-filled .op-cal-block * {
min-width: 0;
max-width: 100%;
}
.op-cal-slot.is-filled .opsv2-card-row1,
.op-cal-slot.is-filled .opsv2-card-partner,
.op-cal-slot.is-filled .opsv2-card-vendor,
.op-cal-slot.is-filled .opsv2-card-footer {
min-width: 0;
}
.op-cal-slot.is-filled .opsv2-card-so {
/* Same wrap-don't-clip policy as the base .opsv2-card-so rule:
install crews need the full "YENSI--PVC--M-27-…" title at a
glance even inside a filled calendar slot. */
white-space: normal; overflow-wrap: anywhere; word-break: break-word;
}
.op-cal-slot.is-filled .opsv2-card-partner,
.op-cal-slot.is-filled .opsv2-card-vendor {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.op-cal-installs.is-droptarget {
background: rgba(232, 115, 90, 0.12);
outline: 2px dashed var(--accent); outline-offset: -2px;
}
.op-cal-day-empty {
text-align: center; color: var(--text-dim); font-size: 12px;
padding: 12px 0;
}
.op-cal-newslot {
margin: 4px 6px;
padding: 6px;
border: 2px dashed var(--border);
border-radius: 6px;
text-align: center;
color: var(--text-dim);
font-size: 11px; font-weight: 600;
cursor: pointer;
user-select: none;
transition: border-color 0.1s, background 0.1s, color 0.1s;
}
.op-cal-newslot:hover {
border-color: var(--accent); color: var(--accent);
background: rgba(232, 115, 90, 0.06);
}
.op-cal-newslot.is-droptarget {
border-color: var(--accent);
background: rgba(232, 115, 90, 0.12);
color: var(--accent);
}
.op-cal-matsection {
border-top: 1px solid var(--border);
padding: 4px 6px 6px 6px;
background: var(--bg2);
}
.op-cal-mat-hdr {
font-size: 10px; font-weight: 800; letter-spacing: 0.4px;
text-transform: uppercase; margin: 2px 0 4px 0;
display: flex; align-items: center; gap: 5px;
}
.op-cal-mat-hdr-pickup { color: #d97706; }
.op-cal-mat-hdr-delivery { color: #2563eb; }
.op-cal-mat-count {
display: inline-block; padding: 1px 5px; min-width: 16px;
background: var(--border); color: var(--text);
border-radius: 4px; font-weight: 800; font-size: 10px;
}
.op-cal-mat-count-blue { background: #bfdbfe; color: #1d4ed8; }
.op-cal-mat-body {
display: flex; flex-direction: column; gap: 3px;
min-height: 18px;
}
.op-cal-mat-empty {
text-align: center; color: var(--text-dim);
font-size: 11px; padding: 2px 0;
}
.op-cal-matblock {
background: #fff; border: 1px solid var(--border); border-radius: 5px;
padding: 4px 6px; font-size: 11px;
display: flex; flex-direction: column; gap: 2px;
}
.op-cal-matblock.is-delivery { background: #eff6ff; border-color: #bfdbfe; }
.op-cal-matblock-row1 {
display: flex; justify-content: space-between; align-items: center;
gap: 4px;
}
.op-cal-matblock-label {
font-weight: 800; color: #1a1a2e; font-size: 11px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.op-cal-matblock-state {
font-size: 8px; font-weight: 800; padding: 1px 5px;
border-radius: 3px; color: #fff; text-transform: uppercase;
letter-spacing: 0.3px; flex-shrink: 0;
}
.op-cal-matblock-ref {
font-size: 9px; color: var(--text-dim);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.op-cal-matblock-cust {
font-size: 11px; font-weight: 600; color: #333;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.op-cal-block {
cursor: grab; border-radius: 6px;
font-size: 11px;
display: flex; flex-direction: column;
padding: 7px 9px;
line-height: 1.25;
overflow: hidden; box-sizing: border-box;
user-select: none;
transition: box-shadow 0.1s, transform 0.1s;
min-height: 130px;
}
.op-cal-block:active { cursor: grabbing; }
.op-cal-block:hover {
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
transform: translateY(-1px);
}
.op-cal-block.is-dragging { opacity: 0.45; }
/* Responsive */
@media (max-width: 1100px) {
.op-cal-grid { grid-template-columns: repeat(7, minmax(120px, 1fr)); }
.opsv2-grid-header, .opsv2-grid-row { grid-template-columns: 120px repeat(7, minmax(100px, 1fr)); }
}
@media (max-width: 900px) {
/* Stack the calendar 2 days per row on narrow viewports — keep the
day-column-with-blocks shape, just wrap. */
.op-cal-grid { grid-template-columns: repeat(2, 1fr); }
.opsv2-mode-label { display: none; }
.opsv2-search { width: 140px; }
.opsv2-mode { padding: 8px 10px; }
.opsv2-grid-header, .opsv2-grid-row { grid-template-columns: 110px repeat(7, minmax(90px, 1fr)); }
}
/* ────── Inventory ────── */
.inv-shell { display: flex; flex-direction: column; gap: 12px; }
.inv-tabs {
display: flex; gap: 4px; flex-wrap: wrap;
border-bottom: 1px solid var(--border); padding-bottom: 0;
}
.inv-tab {
background: transparent; border: none; cursor: pointer;
padding: 10px 16px; font-size: 14px; font-weight: 600;
color: var(--text-dim); border-bottom: 2px solid transparent;
transition: color 0.12s, border-color 0.12s;
}
.inv-tab:hover { color: var(--text); }
.inv-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.inv-toolbar {
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
margin-bottom: 12px;
}
.inv-toolbar-spacer { flex: 1; }
.inv-toolbar-info { color: var(--text-dim); font-size: 12px; }
.inv-table-wrap {
background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
overflow-x: auto;
}
.inv-stock-table, .inv-moves-table, .inv-low-table {
width: 100%; border-collapse: separate; border-spacing: 0;
font-size: 13px;
}
.inv-stock-table thead th, .inv-moves-table thead th, .inv-low-table thead th {
background: var(--bg3); color: var(--text); font-weight: 700;
text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border);
position: sticky; top: 0; z-index: 1; white-space: nowrap;
}
.inv-stock-table tbody td, .inv-moves-table tbody td, .inv-low-table tbody td {
padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle;
}
.inv-stock-table tbody tr:hover, .inv-moves-table tbody tr:hover { background: rgba(105,29,32,0.04); }
.inv-row-low { background: rgba(185,28,28,0.06); }
.inv-row-low:hover { background: rgba(185,28,28,0.12) !important; }
.inv-col-img { width: 48px; padding: 6px !important; }
.inv-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; background: var(--bg3); display: block; }
.inv-thumb-empty { display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--text-dim); }
.inv-col-sku { font-family: monospace; font-size: 12px; white-space: nowrap; }
.inv-col-sku code { background: var(--bg3); padding: 2px 6px; border-radius: 4px; font-size: 11px; }
.inv-col-name { min-width: 180px; font-weight: 600; }
.inv-col-name .inv-uom { font-size: 11px; color: var(--text-dim); font-weight: 400; margin-top: 2px; }
.inv-col-cat { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.inv-col-loc { text-align: center; min-width: 70px; font-variant-numeric: tabular-nums; }
.inv-col-total { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 60px; }
.inv-col-min { text-align: right; color: var(--text-dim); font-variant-numeric: tabular-nums; min-width: 50px; }
.inv-col-actions { text-align: right; white-space: nowrap; min-width: 160px; }
.inv-col-actions .btn { padding: 4px 10px; font-size: 12px; }
.inv-col-num { text-align: right; font-variant-numeric: tabular-nums; }
.inv-col-note { font-size: 12px; color: var(--text-dim); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-qty-pos { color: var(--green); font-weight: 600; }
.inv-qty-zero { color: var(--text-dim); }
.inv-qty-low { color: var(--red); font-weight: 700; }
.inv-loc-head { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; }
.inv-loc-head > span:first-child { font-size: 16px; }
.inv-empty-cell { text-align: center; padding: 24px !important; color: var(--text-dim); }
/* Locations tab */
.inv-loc-grid { display: flex; flex-direction: column; gap: 18px; }
.inv-loc-group-title { font-size: 14px; color: var(--text-dim); margin-bottom: 8px; font-weight: 700; }
.inv-loc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.inv-loc-card {
background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
padding: 14px 16px;
}
.inv-loc-name { font-size: 15px; font-weight: 700; color: var(--text); }
.inv-loc-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.inv-loc-addr { font-size: 12px; color: var(--text); margin-top: 6px; }
/* Modals */
.inv-modal-backdrop {
position: fixed; inset: 0; background: rgba(0,0,0,0.45);
display: flex; align-items: center; justify-content: center;
z-index: 2000; padding: 20px;
}
.inv-modal {
background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
width: 100%; max-width: 460px; box-shadow: 0 20px 60px rgba(0,0,0,0.25);
display: flex; flex-direction: column; max-height: 90vh;
}
.inv-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.inv-modal-head h3 { font-size: 16px; color: var(--text); }
.inv-modal-close { background: transparent; border: none; font-size: 24px; color: var(--text-dim); cursor: pointer; padding: 0 4px; }
.inv-modal-close:hover { color: var(--text); }
.inv-modal-body { padding: 16px 18px; overflow-y: auto; }
.inv-modal-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--border); }
.inv-modal-sku { font-family: monospace; font-size: 12px; color: var(--text-dim); margin-bottom: 12px; }
@media (max-width: 700px) {
.inv-col-cat, .inv-col-min { display: none; }
.inv-col-actions { min-width: 130px; }
.inv-col-actions .btn { padding: 3px 8px; font-size: 11px; }
}
/* ────── Inventory Extended (BOMs, Reorder Points, Requisitions) ────── */
/* Yellow / warn row (below target but above min) — companion to .inv-row-low. */
.inv-row-warn { background: rgba(184,131,18,0.07); }
.inv-row-warn:hover { background: rgba(184,131,18,0.14) !important; }
/* BOM / Requisition detail header — shown above lines table. */
.inv-bom-head {
display: flex; justify-content: space-between; align-items: flex-start;
padding: 12px 14px; margin: 8px 0 4px;
background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
}
.inv-bom-title { font-size: 18px; font-weight: 700; color: var(--text); }
.inv-bom-sub { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.inv-bom-sub code { background: transparent; padding: 0; }
.inv-bom-section-title {
margin: 18px 0 8px;
font-size: 13px; font-weight: 700; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 0.5px;
}
.inv-bom-empty {
text-align: center; padding: 20px; color: var(--text-dim);
border: 1px dashed var(--border); border-radius: 6px;
font-size: 13px; background: var(--bg2);
}
/* Inline add-component row (used by BOM detail + new-requisition modal). */
.inv-bom-addline { margin-top: 10px; }
.inv-bom-addrow {
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
padding: 10px; background: var(--bg2); border-radius: 6px;
border: 1px solid var(--border);
}
.inv-bom-addrow .form-select,
.inv-bom-addrow .form-input { min-width: 0; }
/* Wide variant of the inventory modal — used by New Requisition. */
.inv-modal-wide { max-width: 720px; }
/* Side-by-side from / to location selects in new-requisition modal. */
.inv-newreq-locs { display: flex; gap: 10px; }
.inv-newreq-locs > div { display: flex; flex-direction: column; }
/* Clickable BOM rows in the list. */
.inv-bom-row { cursor: pointer; }
.inv-bom-row:hover { background: var(--bg2); }
/* Generic badge fallbacks if not already styled. */
.inv-stock-table .badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 700; }
@media (max-width: 700px) {
.inv-bom-head { flex-direction: column; gap: 8px; }
.inv-newreq-locs { flex-direction: column; }
.inv-bom-addrow { flex-direction: column; align-items: stretch; }
.inv-bom-addrow .form-input,
.inv-bom-addrow .form-select { width: 100%; max-width: none; }
}
/* ────── Purchasing ────── */
.pur-shell { display: flex; flex-direction: column; gap: 12px; }
.pur-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); padding-bottom: 6px; flex-wrap: wrap; align-items: center; }
.pur-tab { background: transparent; border: none; padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--text-dim); cursor: pointer; border-radius: 6px 6px 0 0; }
.pur-tab:hover { color: var(--text); }
.pur-tab.active { background: var(--bg2); color: var(--accent); border-bottom: 2px solid var(--accent); }
.pur-tab-action { margin-left: auto; color: #fff !important; background: var(--accent) !important; border-radius: 6px; padding: 8px 16px; }
.pur-tab-action:hover { background: var(--accent-hover) !important; }
.pur-detail-head { display: flex; flex-direction: column; gap: 12px; }
.pur-action-row { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--border); }
.pur-totals { display: flex; justify-content: flex-end; gap: 16px; padding: 10px 14px; margin-top: 8px; border-top: 1px solid var(--border); background: var(--bg2); border-radius: 6px; }
.pur-totals-label { font-weight: 700; color: var(--text-dim); }
.pur-totals-value { font-weight: 800; color: var(--green); font-size: 18px; }
/* Modals (used by new PO, vendor edit, receive line, link SO) */
.pur-modal-bg { position: fixed; inset: 0; background: rgba(37,57,56,0.45); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.pur-modal { background: var(--bg); border-radius: 12px; max-width: 520px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
.pur-modal-wide { max-width: 720px; }
.pur-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.pur-modal-head h3 { font-size: 16px; color: var(--text); margin: 0; }
.pur-modal-x { background: transparent; border: none; font-size: 24px; color: var(--text-dim); cursor: pointer; padding: 0 4px; }
.pur-modal-x:hover { color: var(--text); }
.pur-modal-body { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.pur-modal-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--border); }
.pur-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.pur-field > span { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
@media (max-width: 700px) {
.pur-tab-action { margin-left: 0; }
.pur-action-row .btn { font-size: 12px; padding: 6px 10px; }
}
/* ────── Purchasing Extended (Vendor Pricing / Bills / RFQs / Reports) ────── */
/* Filter chip row (Vendor Bills + RFQs state filter) */
.pur-chip-row { display: flex; gap: 4px; flex-wrap: wrap; }
.pur-chip {
background: var(--bg2); border: 1px solid var(--border); padding: 5px 12px;
font-size: 12px; font-weight: 600; color: var(--text-dim); cursor: pointer;
border-radius: 999px; text-transform: capitalize;
}
.pur-chip:hover { background: var(--bg); color: var(--text); }
.pur-chip.active {
background: var(--accent); color: #fff; border-color: var(--accent);
}
/* Vendor multi-select chips (used in New RFQ modal) */
.pur-vendor-chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.pur-vendor-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px;
font-size: 12px; cursor: pointer; background: var(--bg2);
}
.pur-vendor-chip input { margin: 0; }
.pur-vendor-chip.active { background: rgba(105,29,32,0.08); border-color: var(--accent); color: var(--accent); }
/* Reports KPI grid */
.pur-kpi-row {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
}
.pur-kpi-card {
background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
padding: 14px;
}
.pur-kpi-label {
font-size: 11px; font-weight: 700; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 0.5px;
}
.pur-kpi-value { font-size: 24px; font-weight: 800; color: var(--accent); margin-top: 4px; }
.pur-kpi-sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.pur-top-vendor {
display: flex; justify-content: space-between; padding: 3px 0;
font-size: 13px; border-bottom: 1px dashed var(--border);
}
.pur-top-vendor:last-child { border-bottom: none; }
.pur-top-vendor-name { color: var(--text); font-weight: 500; }
.pur-top-vendor-amt { color: var(--green); font-weight: 700; }
/* Monthly spend HTML/CSS bar chart */
.pur-bar-chart { display: flex; flex-direction: column; gap: 6px; }
.pur-bar-row {
display: grid; grid-template-columns: 80px 1fr 110px; gap: 8px;
align-items: center;
}
.pur-bar-label { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.pur-bar-track {
height: 18px; background: var(--bg2); border-radius: 4px; overflow: hidden;
border: 1px solid var(--border);
}
.pur-bar-fill {
height: 100%; background: linear-gradient(90deg, var(--accent), var(--green));
transition: width 200ms ease-out;
}
.pur-bar-value { font-size: 12px; font-weight: 700; color: var(--text); text-align: right; }
/* Small responsive nudges */
@media (max-width: 700px) {
.pur-bar-row { grid-template-columns: 60px 1fr 80px; }
.pur-kpi-value { font-size: 20px; }
}
/* ────── Operations & Status v2 ────── */
.ops-status-card { display: grid; gap: 14px; }
.ops-status-header {
display: flex; justify-content: space-between; align-items: center; gap: 8px;
flex-wrap: wrap;
}
.ops-status-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-ops-mini {
font-size: 11px; padding: 5px 10px; border-radius: 6px; border: 0;
font-weight: 600; cursor: pointer; line-height: 1; color: #fff;
display: inline-flex; align-items: center; gap: 4px;
}
.btn-ops-mini:hover { filter: brightness(0.92); }
.btn-ops-orange { background: #e07a3c; }
.btn-ops-purple { background: var(--purple); }
.btn-ops-dark { background: var(--text); }
.btn-ops-danger {
background: var(--red); color: #fff; border: 0; border-radius: 6px;
font-weight: 600; cursor: pointer; padding: 5px 12px;
}
.btn-ops-danger:hover { filter: brightness(0.92); }
.ops-section { display: grid; gap: 6px; }
.ops-section-label {
font-size: 12px; font-weight: 700; color: var(--text);
text-transform: none; letter-spacing: 0;
}
.ops-section-label-row {
display: flex; justify-content: space-between; align-items: center;
}
/* Chip row for operation types */
.ops-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ops-chip {
display: inline-flex; align-items: center; gap: 5px;
font-size: 12px; padding: 5px 10px; border-radius: 999px;
background: var(--bg3); color: var(--text-dim);
border: 1px solid var(--border); cursor: pointer;
transition: background 0.12s, color 0.12s, transform 0.06s;
}
.ops-chip[data-state="ready"] {
background: var(--bg); color: var(--text);
border-color: rgba(105, 29, 32, 0.2);
}
.ops-chip[data-state="ready"]:hover {
background: rgba(105, 29, 32, 0.08); color: var(--accent);
border-color: var(--accent);
}
.ops-chip:active { transform: scale(0.97); }
.ops-chip-icon { font-size: 12px; }
.ops-chip-label { font-weight: 600; }
.ops-chip-detail {
margin-top: 6px; padding: 8px 10px; border: 1px dashed var(--border);
border-radius: 8px; background: var(--bg);
}
.ops-create-row {
display: flex; align-items: center; gap: 10px; margin-top: 2px;
}
.ops-create-hint { font-size: 11px; color: var(--text-dim); }
/* Generic list rows used by shop orders & installations */
.ops-list { display: grid; gap: 6px; }
.ops-list-row {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
background: var(--bg);
}
.ops-list-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ops-list-actions { display: flex; gap: 4px; }
.btn-icon-soft {
background: transparent; border: 0; cursor: pointer; padding: 4px 6px;
border-radius: 6px; font-size: 13px;
}
.btn-icon-soft:hover { background: var(--bg3); }
.btn-icon-danger:hover { background: rgba(185, 28, 28, 0.1); color: var(--red); }
.ops-kind-chip {
font-size: 10px; font-weight: 700; padding: 2px 8px;
border-radius: 999px; text-transform: uppercase;
background: var(--bg3); color: var(--text-dim); letter-spacing: 0.4px;
}
.ops-kind-welding { background: rgba(232,115,90,0.15); color: #b04830; }
.ops-kind-aluminum { background: rgba(37,99,235,0.15); color: #1d4ed8; }
.ops-kind-breakdown { background: rgba(184,131,18,0.18); color: #8a6210; }
.ops-kind-permit { background: rgba(109,40,217,0.15); color: #5b21b6; }
.ops-kind-powder_coating { background: rgba(139,92,246,0.15); color: #6d28d9; }
.ops-kind-handrail { background: rgba(168,85,247,0.15); color: #7e22ce; }
.ops-kind-drafting { background: rgba(6,182,212,0.18); color: #0e7490; }
.ops-stage-chip {
font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
background: var(--bg3); color: var(--text-dim);
}
.ops-stage-not-started { background: var(--bg3); color: var(--text-dim); }
.ops-stage-queued { background: rgba(37,99,235,0.15); color: #1d4ed8; }
.ops-stage-in-progress { background: rgba(47,122,61,0.15); color: var(--green); }
.ops-stage-qc { background: rgba(184,131,18,0.18); color: #8a6210; }
.ops-stage-done { background: rgba(47,122,61,0.22); color: var(--green); }
.ops-stage-on-hold { background: rgba(184,131,18,0.18); color: #8a6210; }
.ops-stage-cancelled { background: rgba(185,28,28,0.15); color: var(--red); }
.ops-due { font-size: 11px; color: var(--text-dim); }
/* Operation-as-parent card on the SO detail OPERATIONS & STATUS section.
Burgundy left rail keeps it visually tied to the install-popup OP cards.
Shop rows nest inside .ops-op-card-shops; "+ Add" buttons sit on a
dashed-border row at the bottom. */
.ops-ops-cards { display: grid; gap: 10px; }
.ops-op-card {
border: 1px solid var(--border);
border-left: 4px solid #691d20;
border-radius: 10px;
padding: 10px 12px;
background: rgba(241, 232, 223, 0.35);
display: grid;
gap: 8px;
}
.ops-op-card-head {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.ops-op-card-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 22px;
padding: 0 6px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
color: #fff;
background: #691d20;
letter-spacing: 0.5px;
}
.ops-op-card-title { font-size: 13px; font-weight: 700; }
.ops-op-card-meta { font-size: 11px; color: var(--text-dim); margin-left: auto; }
.ops-op-card-shops { display: grid; gap: 6px; }
.ops-op-addrow {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding-top: 6px;
border-top: 1px dashed var(--border);
}
.ops-op-add-btn { min-height: 44px; }
.ops-op-deco-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ops-chip-deco {
font-size: 11px;
background: transparent;
border: 1px dashed var(--border);
border-radius: 999px;
padding: 4px 10px;
display: inline-flex;
align-items: center;
gap: 4px;
cursor: pointer;
color: var(--text-dim);
}
.ops-chip-deco:hover {
background: rgba(105, 29, 32, 0.06);
border-color: #691d20;
color: var(--text);
}
.ops-install-lead { font-weight: 600; color: var(--text); }
.ops-install-meta { font-size: 11px; color: var(--text-dim); }
/* Promised date row */
.ops-promised-row {
display: grid; grid-template-columns: auto 1fr auto; gap: 10px;
align-items: center; padding: 8px 10px; border: 1px solid var(--border);
border-radius: 8px; background: var(--bg);
}
.ops-promised-label { font-weight: 600; color: var(--text); font-size: 13px; }
.ops-promised-value { font-size: 13px; color: var(--text); }
/* Blockers row */
.ops-blockers-row {
display: grid; grid-template-columns: auto 1fr auto; gap: 10px;
align-items: center; padding: 8px 10px; border: 1px solid var(--border);
border-radius: 8px; background: var(--bg);
}
.ops-blockers-label { font-weight: 600; color: var(--text); font-size: 13px; }
.ops-blockers-list { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ops-blockers-empty { font-size: 12px; color: var(--text-dim); font-style: italic; }
.ops-blocker-pill {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; padding: 3px 8px; border-radius: 999px;
background: rgba(185, 28, 28, 0.10); color: var(--red);
border: 1px solid rgba(185, 28, 28, 0.25);
}
.ops-blocker-pill[data-severity="critical"] {
background: rgba(185, 28, 28, 0.18);
border-color: rgba(185, 28, 28, 0.45);
}
.ops-blocker-sev {
text-transform: uppercase; font-size: 9px; font-weight: 800; letter-spacing: 0.4px;
}
.ops-blocker-desc { font-weight: 500; }
.ops-followups-card { display: grid; gap: 6px; }
/* ────── Install Popup v3 ──────
Pixel-match the legacy Vilobot universal SO popup: two-column layout,
tinted operation cards on the right, sticky action bar at the bottom.
Re-uses the existing overlay backdrop (.vb-popup-overlay). */
.vb-ipv3-overlay {
position: fixed; inset: 0; background: rgba(37,57,56,0.55);
z-index: 9999; display: flex; align-items: flex-start; justify-content: center;
padding: 24px 16px; overflow-y: auto;
}
.vb-ipv3-card {
width: 100%; max-width: 1120px; background: var(--bg2); color: var(--text);
border-radius: 14px; box-shadow: 0 14px 56px rgba(37,57,56,0.32);
position: relative; padding: 0; max-height: calc(100vh - 48px);
overflow: hidden; display: flex; flex-direction: column;
}
.vb-ipv3-close {
position: absolute; top: 10px; right: 12px; width: 32px; height: 32px;
border-radius: 50%; background: rgba(255,255,255,0.6); border: none;
color: var(--text); font-size: 20px; cursor: pointer; line-height: 1; z-index: 3;
}
.vb-ipv3-close:hover { background: var(--accent); color: #fff; }
.vb-ipv3-body { padding: 16px 18px 0; overflow-y: auto; overscroll-behavior: contain; }
/* Header ----------------------------------------------------------------- */
.vb-ipv3-header {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 16px; padding: 4px 32px 12px 4px; border-bottom: 1px solid var(--border);
margin-bottom: 12px; flex-wrap: wrap;
}
.vb-ipv3-header-l { flex: 1; min-width: 0; }
.vb-ipv3-num-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vb-ipv3-custom-label {
flex: 1 1 240px; min-width: 180px; max-width: 360px;
padding: 10px 12px; font-size: 14px; font-weight: 600;
background: #fffefa; border: 2px solid var(--accent, #691d20);
border-radius: 8px; color: var(--text); min-height: 40px;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}
.vb-ipv3-custom-label::placeholder { color: var(--text-dim); font-weight: 400; font-style: italic; }
.vb-ipv3-custom-label:focus {
outline: none; border-color: var(--accent, #691d20);
box-shadow: 0 0 0 3px rgba(105,29,32,0.18);
}
.vb-ipv3-custom-label:disabled { opacity: 0.4; cursor: not-allowed; border-style: dashed; }
.vb-ipv3-num { font-size: 24px; font-weight: 700; color: var(--accent); }
.vb-ipv3-num-sub { font-size: 12px; color: var(--text-dim); }
.vb-ipv3-cust-name { font-size: 18px; color: var(--text); margin-top: 4px; }
.vb-ipv3-header-r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.vb-ipv3-est-row { display: flex; align-items: center; gap: 8px; }
.vb-ipv3-est { font-size: 12px; font-weight: 700; color: var(--text-dim); letter-spacing: 0.6px; }
/* Two-column grid -------------------------------------------------------- */
.vb-ipv3-grid {
display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: 14px; align-items: start;
}
.vb-ipv3-left, .vb-ipv3-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@media (max-width: 900px) {
.vb-ipv3-grid { grid-template-columns: 1fr; }
}
/* Sections (left column) ------------------------------------------------- */
.vb-ipv3-section {
background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
padding: 10px 12px;
}
.vb-ipv3-section-title {
font-size: 11px; font-weight: 700; color: var(--accent);
text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 8px;
}
.vb-ipv3-empty { font-size: 12px; color: var(--text-dim); font-style: italic; padding: 4px 0; }
.vb-ipv3-muted { color: var(--text-dim); }
.vb-ipv3-info-row {
font-size: 13px; color: var(--text); padding: 6px 12px;
background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
}
.vb-ipv3-info-row strong { color: var(--text); }
.vb-ipv3-addr { font-size: 14px; color: var(--text); padding: 4px 0; }
.vb-ipv3-addr a { color: var(--accent); }
.vb-ipv3-contact-row { display: flex; gap: 14px; flex-wrap: wrap; padding: 2px 0 4px; }
.vb-ipv3-contact-link {
font-size: 15px; color: var(--accent); font-weight: 600; text-decoration: none;
}
.vb-ipv3-contact-link:hover { text-decoration: underline; }
/* Install row 3-col grid ------------------------------------------------- */
.vb-ipv3-install-grid {
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
padding: 10px 12px;
}
.vb-ipv3-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vb-ipv3-field label {
font-size: 10px; font-weight: 700; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 0.5px;
}
.vb-ipv3-input, .vb-ipv3-textarea {
background: var(--bg); color: var(--text); border: 1px solid var(--border);
border-radius: 6px; padding: 6px 8px; font-size: 13px; font-family: inherit;
width: 100%; box-sizing: border-box;
}
.vb-ipv3-input-sm { padding: 4px 6px; font-size: 12px; }
.vb-ipv3-textarea { min-height: 60px; resize: vertical; }
.vb-ipv3-row-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.vb-ipv3-row-inline { display: flex; gap: 6px; align-items: center; }
.vb-ipv3-row-inline .vb-ipv3-input { flex: 1; }
/* Ops manager note pinned banner ----------------------------------------- */
.vb-ipv3-opsnote {
background: rgba(37,99,235,0.06); border: 1px solid rgba(37,99,235,0.18);
border-left: 4px solid var(--blue); border-radius: 8px; padding: 8px 12px;
}
.vb-ipv3-opsnote-label {
font-size: 10px; font-weight: 700; color: var(--blue);
text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 4px;
}
.vb-ipv3-opsnote-body { font-size: 13px; color: var(--text); white-space: pre-wrap; }
/* 811 line --------------------------------------------------------------- */
.vb-ipv3-811-line {
font-size: 13px; color: var(--text); padding: 6px 12px;
background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
}
.vb-ipv3-ok { color: var(--green); font-weight: 700; }
.vb-ipv3-warn { color: var(--yellow); font-weight: 700; }
.vb-ipv3-bad { color: var(--red); font-weight: 700; }
.vb-ipv3-link { color: var(--blue); text-decoration: underline; cursor: pointer; }
/* SO items --------------------------------------------------------------- */
.vb-ipv3-items { display: flex; flex-direction: column; }
.vb-ipv3-item {
display: flex; justify-content: space-between; gap: 8px;
padding: 3px 0; font-size: 13px;
}
.vb-ipv3-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-ipv3-item-qty { color: var(--text-dim); font-weight: 600; flex-shrink: 0; }
.vb-ipv3-item-canvas .vb-ipv3-item-name { color: var(--text-dim); font-style: italic; }
/* Blockers --------------------------------------------------------------- */
.vb-ipv3-blockers { background: rgba(185,28,28,0.04); border-color: rgba(185,28,28,0.22); }
.vb-ipv3-blockers .vb-ipv3-section-title { color: var(--red); }
/* Other visits ----------------------------------------------------------- */
.vb-ipv3-visit-row {
display: flex; align-items: center; gap: 8px; padding: 4px 0;
font-size: 13px; border-bottom: 1px dashed rgba(37,57,56,0.08);
}
.vb-ipv3-visit-row:last-child { border-bottom: none; }
.vb-ipv3-visit-date { font-weight: 600; }
.vb-ipv3-visit-state { color: var(--text-dim); text-transform: capitalize; }
.vb-ipv3-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.vb-ipv3-dot-green { background: var(--green); }
.vb-ipv3-dot-blue { background: var(--blue); }
.vb-ipv3-dot-yellow { background: var(--yellow); }
.vb-ipv3-dot-red { background: var(--red); }
.vb-ipv3-dot-purple { background: var(--purple); }
/* Right column — Operation cards ----------------------------------------- */
.vb-ipv3-card-op {
background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
}
.vb-ipv3-card-empty { background: rgba(255,255,255,0.55); }
.vb-ipv3-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vb-ipv3-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 32px; height: 22px; padding: 0 6px; border-radius: 4px;
font-size: 11px; font-weight: 700; color: #fff; letter-spacing: 0.5px;
flex-shrink: 0;
}
.vb-ipv3-badge-orange { background: #e07a3a; }
.vb-ipv3-badge-teal { background: #1f8a87; }
.vb-ipv3-badge-purple { background: #6d28d9; }
.vb-ipv3-badge-blue { background: #2563eb; }
.vb-ipv3-badge-cyan { background: #0891b2; }
.vb-ipv3-badge-green { background: #2f7a3d; }
.vb-ipv3-badge-red { background: #b91c1c; }
.vb-ipv3-card-state { font-size: 13px; font-weight: 600; }
.vb-ipv3-files-count {
font-size: 11px; color: var(--text-dim); background: var(--bg3);
padding: 1px 8px; border-radius: 10px;
}
.vb-ipv3-card-headbtn { margin-left: auto; }
.vb-ipv3-card-meta { font-size: 12px; color: var(--text); }
.vb-ipv3-card-targ {
display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
color: var(--text); font-weight: 600;
}
.vb-ipv3-card-targ input { margin-left: 4px; }
.vb-ipv3-card-empty-body {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 6px 0;
}
.vb-ipv3-card-empty-msg { font-size: 12px; color: var(--text-dim); font-style: italic; }
.vb-ipv3-card-assign { font-size: 12px; color: var(--text-dim); }
.vb-ipv3-card-notes { font-size: 12px; color: var(--text); }
.vb-ipv3-card-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.vb-ipv3-tag-yellow {
display: inline-block; padding: 2px 8px; background: #fde68a; color: #78350f;
border-radius: 4px; font-size: 12px; font-weight: 600;
}
.vb-ipv3-files { display: flex; flex-direction: column; gap: 4px; }
.vb-ipv3-file-row {
display: block; padding: 4px 8px; background: #fef3c7; color: var(--text);
border-radius: 4px; font-size: 12px; text-decoration: none;
}
.vb-ipv3-file-row:hover { background: #fde68a; }
/* Operations-as-parent card. Wraps nested shop rows so they read as
"Operation #N → its shop orders". Brand burgundy left rail. */
.vb-ipv3-op-card {
background: var(--bg);
border: 1px solid var(--border);
border-left: 4px solid #691d20;
border-radius: 10px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.vb-ipv3-op-card-head {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.vb-ipv3-op-card-title {
font-size: 13px;
font-weight: 700;
color: var(--text);
}
.vb-ipv3-op-card-meta {
font-size: 11px;
color: var(--text-dim);
margin-left: auto;
}
.vb-ipv3-op-card-body {
display: flex;
flex-direction: column;
gap: 6px;
}
.vb-ipv3-op-card-body .vb-ipv3-card-op {
/* Nested shop cards inside an op card — softer border + tan tint. */
background: rgba(241, 232, 223, 0.55);
}
.vb-ipv3-op-empty { padding: 4px 0; }
.vb-ipv3-op-addrow {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding-top: 6px;
border-top: 1px dashed var(--border);
}
.vb-ipv3-op-addrow .vb-ipv3-btn {
/* Tap targets ≥ 44px on touch (iPad). */
min-height: 44px;
font-size: 12px;
font-weight: 600;
}
.vb-ipv3-photos-row { display: flex; gap: 4px; flex-wrap: wrap; }
.vb-ipv3-thumb {
display: inline-block; width: 48px; height: 48px; border-radius: 4px;
overflow: hidden; background: var(--bg3); border: 1px solid var(--border);
}
.vb-ipv3-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vb-ipv3-upload-row { display: flex; gap: 4px; align-items: center; }
.vb-ipv3-invs { display: flex; flex-direction: column; gap: 4px; }
.vb-ipv3-inv-row {
display: grid; grid-template-columns: 1fr auto auto; gap: 6px;
font-size: 12px; padding: 2px 0; align-items: center;
}
/* Buttons ---------------------------------------------------------------- */
.vb-ipv3-btn {
padding: 6px 12px; font-size: 13px; background: var(--bg);
color: var(--text); border: 1px solid var(--border); border-radius: 6px;
cursor: pointer; font-weight: 500; display: inline-flex; align-items: center;
gap: 4px; text-decoration: none;
}
.vb-ipv3-btn:hover { background: var(--bg3); }
.vb-ipv3-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.vb-ipv3-btn-sm { padding: 3px 8px; font-size: 12px; }
.vb-ipv3-btn-green { background: #2f7a3d; color: #fff; border-color: #2f7a3d; }
.vb-ipv3-btn-green:hover { background: #246030; }
.vb-ipv3-btn-blue { background: #2563eb; color: #fff; border-color: #2563eb; }
.vb-ipv3-btn-blue:hover { background: #1d4ed8; }
.vb-ipv3-btn-orange { background: #e07a3a; color: #fff; border-color: #e07a3a; }
.vb-ipv3-btn-orange:hover { background: #c5642a; }
.vb-ipv3-btn-red { background: #b91c1c; color: #fff; border-color: #b91c1c; }
.vb-ipv3-btn-red:hover { background: #991414; }
.vb-ipv3-btn-purple { background: #6d28d9; color: #fff; border-color: #6d28d9; }
.vb-ipv3-btn-purple:hover { background: #5b21b6; }
.vb-ipv3-btn-cyan { background: #0891b2; color: #fff; border-color: #0891b2; }
.vb-ipv3-btn-cyan:hover { background: #0e7490; }
.vb-ipv3-btn-teal { background: #1f8a87; color: #fff; border-color: #1f8a87; }
/* Sticky action bar at the bottom of the popup --------------------------- */
.vb-ipv3-actionbar {
position: sticky; bottom: 0; left: 0; right: 0;
display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
padding: 10px 14px; background: var(--bg2);
border-top: 1px solid var(--border); margin: 14px -18px 0;
}
/* ══════════════════════════════════════════════════════════════════════════
Site Plan Editor (sp-*) — full-replacement port of Vilobot's site-plan-editor.
Brand: burgundy #691d20, teal-green #253938, tan #f1e8df.
────────────────────────────────────────────────────────────────────────── */
/* Shell */
.sp-shell { display: flex; flex-direction: column; height: calc(100dvh - 56px); margin: -16px -20px; background: var(--bg); overflow: hidden; position: relative; }
/* ── sp-fullscreen mode (added 2026-05-28) ───────────────────────────────
When the site-plan editor is mounted, drafting.js adds `sp-fullscreen`
to . We:
1. Hide the outer dashboard `.app-header` ("? canvas" white bar) —
the sp-header already carries "Edit Site Plan — Sxxxxx".
2. Re-flow `.app-body` so the editor lives edge-to-edge with no
16/20px page padding eating screen height.
3. Let `.sp-shell` claim the full viewport instead of `100dvh - 56px`.
Result: ~50-60px of extra vertical canvas room on both iPad + desktop,
without rewriting the dashboard layout. */
body.sp-fullscreen .app-header { display: none !important; }
body.sp-fullscreen .app-body { padding: 0 !important; overflow: hidden; }
body.sp-fullscreen .sp-shell { height: 100dvh; margin: 0; }
/* Header */
.sp-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--bg2); border-bottom: 1px solid var(--border); flex-shrink: 0; gap: 12px; }
.sp-header-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sp-back { cursor: pointer; font-size: 22px; color: var(--text-dim); padding: 4px 8px; border-radius: 6px; }
.sp-back:hover { color: var(--accent); background: rgba(105,29,32,0.06); }
.sp-title { font-size: 15px; font-weight: 700; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-subtitle { font-size: 12px; color: var(--text-dim); }
.sp-header-r { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }
.sp-hbtn { padding: 8px 14px; font-size: 13px; font-weight: 600; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; background: var(--bg); color: var(--text); }
.sp-hbtn-secondary { background: var(--bg); }
.sp-hbtn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.sp-hbtn-primary:hover { background: var(--accent-hover); }
.sp-hbtn[disabled] { opacity: 0.5; cursor: not-allowed; }
/* Autosave indicator */
.sp-autosave { font-size: 11px; color: var(--text-dim); padding: 4px 10px; border-radius: 8px; background: transparent; transition: background 0.15s, color 0.15s; min-height: 22px; display: inline-flex; align-items: center; }
.sp-autosave.pending { color: var(--yellow); background: rgba(184,131,18,0.10); }
.sp-autosave.saving { color: var(--blue); background: rgba(37,99,235,0.10); }
.sp-autosave.saved { color: var(--green); background: rgba(47,122,61,0.10); }
.sp-autosave.error { color: var(--red); background: rgba(185,28,28,0.10); }
/* Dark top toolbar (matches Vilobot's icon-above-label style) */
.sp-toolbar { display: flex; align-items: center; gap: 4px; padding: 6px 10px; background: #1a1f26; color: #e6edf3; border-bottom: 1px solid #2d343d; flex-shrink: 0; flex-wrap: wrap; overflow-x: auto; }
.sp-toolbar::-webkit-scrollbar { height: 0; }
.sp-tb { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 56px; padding: 5px 7px; border: none; background: transparent; color: #c9d1d9; cursor: pointer; font-size: 18px; border-radius: 6px; transition: background 0.12s, color 0.12s; -webkit-tap-highlight-color: transparent; flex-shrink: 0; }
.sp-tb:hover { background: #21262d; color: #fff; }
.sp-tb.on { background: var(--accent); color: #fff; }
.sp-tb .sp-tb-ic { font-size: 18px; line-height: 1; }
.sp-tb .sp-tb-lb { font-size: 10px; font-weight: 700; letter-spacing: 0.3px; color: inherit; }
.sp-tb-armed { font-size: 10px; padding: 1px 5px; background: rgba(255,255,255,0.18); border-radius: 4px; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-tb-util { color: #c9d1d9; }
.sp-sep { width: 1px; height: 32px; background: #2d343d; margin: 0 4px; flex-shrink: 0; }
.sp-cpick { width: 38px; height: 38px; padding: 0; border: 2px solid #2d343d; border-radius: 6px; background: none; cursor: pointer; flex-shrink: 0; }
.sp-cpick::-webkit-color-swatch-wrapper { padding: 0; }
.sp-cpick::-webkit-color-swatch { border: none; border-radius: 4px; }
.sp-slider { width: 100px; accent-color: var(--accent); flex-shrink: 0; }
.sp-lw-val { font-size: 12px; color: #c9d1d9; min-width: 22px; text-align: center; }
/* Bottom chip bar (Survey/Clearing/Undo/Redo/Clear/Comm/Labor + zoom) */
.sp-bottombar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: #22272e; color: #c9d1d9; border-bottom: 1px solid #2d343d; flex-shrink: 0; flex-wrap: wrap; }
.sp-chip { padding: 6px 12px; border-radius: 16px; border: 1px solid #2d343d; background: #2d333b; color: #c9d1d9; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; -webkit-tap-highlight-color: transparent; flex-shrink: 0; }
.sp-chip:hover { background: #383f47; color: #fff; }
.sp-chip .sp-chip-g { font-weight: 700; }
.sp-chip.set-green { background: #1a3a1f; color: #3fb950; border-color: #3fb95055; }
.sp-chip.set-yellow { background: #2a2210; color: #d29922; border-color: #d2992288; }
.sp-chip.set-cyan { background: #08313a; color: #1f9ece; border-color: #1f9ece88; }
.sp-chip.set-red { background: #3a1518; color: #f85149; border-color: #f8514988; }
.sp-chip.set-neutral { background: #2d333b; color: #8b949e; }
.sp-chip.sp-chip-danger:hover { background: #b91c1c; color: #fff; border-color: #b91c1c; }
.sp-bb-sep { flex: 1; }
.sp-zoom-slider { width: 110px; accent-color: var(--accent); }
.sp-zm-val { font-size: 12px; min-width: 38px; text-align: center; color: #c9d1d9; }
/* Warning banner */
.sp-banner { padding: 10px 18px; background: rgba(240,131,62,0.14); border-bottom: 1px solid rgba(240,131,62,0.45); color: #c0651b; font-size: 13px; font-weight: 600; text-align: center; flex-shrink: 0; }
.sp-banner strong { color: #b85a10; }
/* Body */
.sp-body { flex: 1; display: flex; min-height: 0; overflow: hidden; }
/* Legend-below variant — main+legend stack vertically.
PREVIOUS layout pinned the legend at the bottom of the canvas viewport
with `position: sticky` + `max-height: 30vh`, which always ate 30% of
the screen even when the user didn't need the legend. Per user request
(2026-05-28), the legend now sits BELOW the canvas in the document
flow: the canvas fills the viewport, and scrolling the body reveals
the legend underneath. More canvas room on iPad + desktop, legend is
still one swipe away. */
.sp-body-vstack { flex-direction: column; overflow: hidden; }
/* sp-main claims the full visible body height. The legend is a tap-open
slide-up sheet anchored to the editor shell (see .sp-legend-bar.
sp-legend-open below) — earlier "scroll to reveal" UX was unreachable
on iPad because .sp-cw uses touch-action:none for drawing and the
swipe never bubbled up. */
.sp-body-vstack .sp-main { flex: 1 1 auto; min-height: 0; }
/* Legend sheet — pinned to bottom of the editor shell. Hidden by default
(translated down out of view), slides up when .sp-legend-open is on.
Capped at 60% of viewport so the canvas behind stays visible. */
.sp-legend-bar {
position: absolute;
left: 0; right: 0; bottom: 0;
max-height: 60vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: var(--bg);
border-top: 1px solid var(--border);
padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) 14px;
box-shadow: 0 -8px 24px rgba(0,0,0,0.12);
transform: translateY(100%);
transition: transform 220ms ease-out;
z-index: 5;
}
.sp-legend-bar.sp-legend-open { transform: translateY(0); }
/* FAB to open the legend sheet — bottom-right of the editor body. Stays
visible at all times when the sheet is CLOSED; hides while open to
avoid covering the close affordance. */
.sp-legend-fab {
position: absolute;
right: 14px;
bottom: calc(14px + env(safe-area-inset-bottom));
z-index: 4;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
background: var(--red, #691d20);
color: #fff;
border: none;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
box-shadow: 0 6px 18px rgba(0,0,0,0.22);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.sp-legend-fab:active { transform: translateY(1px); }
.sp-legend-fab .sp-legend-fab-count {
display: inline-block;
min-width: 22px;
padding: 2px 6px;
border-radius: 11px;
background: rgba(255,255,255,0.18);
font-size: 12px;
font-weight: 800;
text-align: center;
}
.sp-legend-fab[hidden] { display: none; }
/* Close (X) button on the legend sheet header. */
.sp-legend-close {
position: absolute;
top: 8px;
right: 10px;
width: 32px;
height: 32px;
border: none;
background: transparent;
font-size: 22px;
line-height: 1;
color: var(--text);
cursor: pointer;
}
.sp-legend-close:active { opacity: 0.6; }
.sp-legend-bar .sp-panel-title { margin-bottom: 6px; padding-right: 36px; /* leave room for the close × */ }
.sp-legend-bar .sp-legend {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 6px;
}
/* Grand-totals header — spans the full row in grid view so the user sees
the one-line summary above the per-letter cards. */
.sp-legend-bar .sp-legend .sp-legend-totals { grid-column: 1 / -1; }
/* Grand-totals row */
.sp-legend-totals {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 6px;
position: sticky;
top: 0;
z-index: 1;
}
.sp-legend-totals-label { font-size: 11px; font-weight: 800; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.6px; }
.sp-legend-totals-chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.sp-legend-totals-price { font-size: 14px; font-weight: 800; color: var(--green); }
/* Per-letter state chips — colored to match marker visuals: blue = normal,
red = teardown, orange = optional. Sized for thumb-tap on iPad. */
.sp-legend-chips { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; flex-shrink: 0; max-width: 140px; justify-content: flex-end; }
.sp-legend-chip {
display: inline-block;
font-size: 10px;
font-weight: 700;
padding: 2px 6px;
border-radius: 10px;
white-space: nowrap;
line-height: 1.3;
}
.sp-chip-count { background: #eef2f7; color: var(--text); border: 1px solid #d6dde5; }
.sp-chip-normal { background: #dbeafe; color: #1e4ea0; border: 1px solid #aaccff; }
.sp-chip-td { background: #fde2e2; color: var(--red); border: 1px solid #f5b5b5; }
.sp-chip-opt { background: #ffe5cc; color: #b15c00; border: 1px solid #ffc890; }
/* iPad portrait: legend cards stack single-column so the chip stack fits
without wrapping into a second line. Bigger tap targets too. */
@media (max-width: 900px) {
.sp-legend-bar .sp-legend { grid-template-columns: 1fr; }
.sp-legend-item { padding: 10px; }
.sp-legend-chip { font-size: 11px; padding: 3px 8px; }
}
/* Main */
.sp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); position: relative; }
.sp-tabs { display: flex; gap: 4px; padding: 6px 12px 0; background: var(--bg2); border-bottom: 1px solid var(--border); overflow-x: auto; flex-shrink: 0; align-items: flex-end; }
.sp-tab { padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--text-dim); cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; transition: all 0.15s; }
.sp-tab:hover { color: var(--text); }
.sp-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.sp-tab-new { padding: 6px 12px; font-size: 12px; color: var(--text-dim); background: none; border: 1px dashed var(--border); border-radius: 6px; cursor: pointer; margin-left: 8px; margin-bottom: 4px; }
.sp-tab-new:hover { color: var(--accent); border-color: var(--accent); }
/* Inline plan-tabs variant — lives at the right edge of the dark toolbar
instead of its own row above the canvas. Saves ~36px of vertical space
and reuses the empty horizontal area to the right of Pen/Line/Books/etc. */
.sp-tabs.sp-tabs-inline {
margin-left: auto;
background: transparent;
border-bottom: none;
padding: 0;
align-items: center;
gap: 4px;
}
.sp-tabs.sp-tabs-inline .sp-tab {
padding: 4px 10px;
font-size: 12px;
color: #c9d1d9;
border-bottom: none;
border-radius: 6px;
background: rgba(255,255,255,0.04);
border: 1px solid transparent;
}
.sp-tabs.sp-tabs-inline .sp-tab:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sp-tabs.sp-tabs-inline .sp-tab.active {
color: #fff;
background: var(--accent);
border-color: var(--accent);
}
.sp-tabs.sp-tabs-inline .sp-tab-close { color: rgba(255,255,255,0.7) !important; }
.sp-tabs.sp-tabs-inline .sp-tab.active .sp-tab-close { color: rgba(255,255,255,0.9) !important; }
.sp-tabs.sp-tabs-inline .sp-tab-new {
margin: 0 0 0 4px;
padding: 4px 10px;
font-size: 12px;
color: #c9d1d9;
border: 1px dashed rgba(255,255,255,0.35);
border-radius: 6px;
}
.sp-tabs.sp-tabs-inline .sp-tab-new:hover { color: #fff; border-color: #fff; }
/* Canvas wrapper — touch-action: none across the board.
Per Dariel 2026-06-01 (multiple reports): tapping titles wouldn't
register, dragging titles stopped after ~5px, tapping the canvas to
place an armed product did nothing, Alejandro was "completely locked"
trying to add. All same root cause: iOS Safari was treating the canvas
as a pan-y scroll surface and hijacking every touch at the browser
layer BEFORE our pointer handlers could fire. The previous
`.sp-cw.sp-dragging` class-flip ran AFTER pointerdown set the drag
state, but touch-action is evaluated at gesture START — too late to
un-hijack.
The canvas isn't a scroll surface (parent shell scrolls); blocking
touch-action entirely keeps every touch on our pointermove handler. */
.sp-cw { flex: 1; position: relative; overflow: hidden; background: #f0e7d8; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; min-height: 400px; }
.sp-cw.tool-active { touch-action: none; }
.sp-cw.sp-dragging { touch-action: none; }
.sp-cw canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; }
/* Floating tool-hint pill (top center) */
.sp-hint { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; padding: 8px 18px; border-radius: 24px; font-size: 13px; font-weight: 600; z-index: 30; box-shadow: 0 4px 12px rgba(105,29,32,0.35); white-space: nowrap; pointer-events: auto; }
.sp-hint-x { display: inline-block; margin-left: 10px; padding: 2px 10px; background: rgba(255,255,255,0.22); border-radius: 12px; font-size: 11px; cursor: pointer; }
/* Floating deselect button */
.sp-deselect { position: fixed; top: 110px; right: 16px; z-index: 99999; background: #ef4444; color: #fff; border: 3px solid #fff; border-radius: 50%; width: 50px; height: 50px; font-size: 22px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 18px rgba(239,68,68,0.6); display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
/* Inline drawing-delete popover */
.sp-popover { position: absolute; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 8px; min-width: 160px; box-shadow: 0 6px 20px rgba(37,57,56,0.18); z-index: 30; display: flex; flex-direction: column; gap: 6px; }
.sp-pop-row { font-size: 13px; padding: 2px 4px; }
.sp-pop-btn { padding: 6px 12px; font-size: 12px; font-weight: 600; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; }
.sp-pop-btn:hover { background: var(--bg2); }
.sp-pop-btn-del { background: #fdecec; color: var(--red); border-color: #f5c2c2; }
.sp-pop-btn-del:hover { background: var(--red); color: #fff; border-color: var(--red); }
/* Sidebar Legend */
.sp-sidebar { width: 280px; flex-shrink: 0; background: var(--bg2); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; padding: 10px; gap: 10px; }
.sp-panel { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sp-panel-title { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.sp-panel-hint { font-size: 11px; color: var(--text-dim); font-weight: 400; text-transform: none; letter-spacing: 0; }
.sp-legend { display: flex; flex-direction: column; gap: 4px; flex: 1; overflow-y: auto; }
.sp-legend-empty { font-size: 12px; color: var(--text-dim); padding: 12px 4px; line-height: 1.5; }
.sp-legend-item { display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--bg2); border-radius: 8px; cursor: pointer; transition: background 0.12s; }
.sp-legend-item:hover { background: var(--bg3); }
.sp-legend-sw { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; flex-shrink: 0; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.18); }
.sp-legend-info { flex: 1; min-width: 0; }
.sp-legend-name { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 4px; }
.sp-legend-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.sp-legend-tag { display: inline-block; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; margin-left: 4px; }
.sp-tag-td { background: #fde2e2; color: var(--red); border: 1px solid #f5b5b5; }
.sp-tag-opt { background: #dbeafe; color: var(--blue); border: 1px solid #aaccff; }
.sp-legend-price { font-size: 13px; font-weight: 700; color: var(--green); flex-shrink: 0; }
/* Modal backdrop + dialogs */
.sp-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: flex-start; justify-content: center; z-index: 100000; padding: 24px 0; overflow-y: auto; }
.sp-modal { background: #fff; border-radius: 14px; padding: 20px; min-width: 360px; max-width: 580px; width: 92vw; max-height: 84vh; overflow-y: auto; box-shadow: 0 16px 50px rgba(0,0,0,0.4); margin: auto 0; }
.sp-modal-narrow { max-width: 420px; }
.sp-modal-edit { max-width: 540px; }
.sp-modal-title { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 16px; }
.sp-modal-name { font-weight: 700; min-width: 0; overflow-wrap: anywhere; color: var(--text); flex: 1; }
.sp-modal-count { color: var(--text-dim); font-size: 12px; font-weight: 500; flex-shrink: 0; }
.sp-edit-chip { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 16px; flex-shrink: 0; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.sp-fld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.sp-fld-row { display: flex; gap: 12px; margin-bottom: 12px; }
.sp-fld-row > .sp-fld { flex: 1; margin-bottom: 0; }
.sp-fld-lbl { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.sp-input { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text); font-size: 14px; font-family: inherit; width: 100%; box-sizing: border-box; outline: none; transition: border-color 0.12s; }
.sp-input:focus { border-color: var(--accent); }
textarea.sp-input { resize: vertical; min-height: 70px; line-height: 1.5; }
.sp-fld-chks { display: flex; gap: 18px; margin: 6px 0 4px; }
.sp-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; }
.sp-chk input[type=checkbox] { width: 18px; height: 18px; }
.sp-sku-row { font-size: 12px; color: var(--text-dim); margin: -6px 0 12px; }
.sp-sku-row code { background: var(--bg2); padding: 1px 6px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: 11px; }
.sp-swap-link { display: inline-block; color: #f0883e; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; padding: 4px 0; }
.sp-swap-link:hover { text-decoration: underline; }
.sp-swap-section { margin: -6px 0 12px; }
.sp-swap-list { max-height: 200px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; margin-top: 6px; background: var(--bg2); }
.sp-swap-empty { padding: 10px; color: var(--text-dim); font-size: 13px; }
.sp-swap-row { padding: 8px 10px; border-bottom: 1px solid var(--border); cursor: pointer; display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.sp-swap-row:hover { background: var(--bg3); }
.sp-swap-row:last-child { border-bottom: none; }
.sp-swap-text { flex: 1; font-size: 13px; color: var(--text); min-width: 0; }
.sp-swap-chip { background: var(--accent); color: #fff; padding: 1px 6px; border-radius: 3px; font-size: 10px; margin-right: 4px; font-weight: 700; }
.sp-swap-sku { color: var(--text-dim); font-size: 11px; margin-left: 4px; }
.sp-swap-price { color: var(--green); font-size: 12px; font-weight: 600; }
.sp-swap-picked { padding: 8px 10px; color: var(--green); font-size: 13px; font-weight: 600; }
.sp-total-box { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: #f3f4f6; border-radius: 8px; margin: 10px 0 0; }
.sp-total-lbl { color: var(--text-dim); font-size: 13px; font-weight: 600; }
.sp-total-val { font-size: 16px; font-weight: 800; color: var(--green); }
.sp-modal-actions { display: flex; gap: 8px; margin-top: 14px; align-items: center; flex-wrap: wrap; }
.sp-mbtn { padding: 9px 16px; font-size: 13px; font-weight: 700; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; background: var(--bg); color: var(--text); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.sp-mbtn-secondary { background: #fff; color: var(--text); }
.sp-mbtn-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.sp-mbtn-primary:hover { background: #1d4ed8; }
.sp-mbtn-warn { background: #f0883e; color: #fff; border-color: #f0883e; }
.sp-mbtn-warn:hover { background: #d97520; }
.sp-mbtn-danger { background: var(--red); color: #fff; border-color: var(--red); }
.sp-mbtn-danger:hover { background: #991b1b; }
/* ────── Survey + Site-Clearing popups (Vilobot verbatim port — 0031) ─────
z-index above install/section popups (100100 ≥ 100100 spec). Buttons are
≥44px tall for iPad tap-targets and use the brand-status palette. */
.sp-modal-backdrop.spe-popup-z { z-index: 100200; }
.spe-popup { background: #161b22 !important; color: #c9d1d9 !important; padding: 22px 22px 18px; max-width: 440px; }
.spe-popup h3 { color: #f0f6fc; font-size: 17px; }
.spe-sc-btn {
display: block; width: 100%;
min-height: 48px; padding: 12px 14px;
margin: 0 0 8px;
border: 1px solid transparent; border-radius: 10px;
font-size: 14px; font-weight: 700;
text-align: left; cursor: pointer;
color: #fff;
-webkit-tap-highlight-color: transparent;
}
.spe-sc-btn:hover { filter: brightness(1.1); }
.spe-sc-btn.green { background: #2ea043; }
.spe-sc-btn.cyan { background: #1f9ece; }
.spe-sc-btn.yellow { background: #d29922; color: #1f1305; }
.spe-sc-btn.red { background: #da3633; }
.spe-sc-btn.blue { background: #1f6feb; }
.spe-sc-step-title { font-size: 13px; color: #8b949e; margin: 0 0 10px; }
.spe-sc-input {
display: block; width: 100%; box-sizing: border-box;
padding: 12px 14px; min-height: 44px;
background: #0d1117; color: #f0f6fc;
border: 1px solid #30363d; border-radius: 8px;
font-size: 16px; font-weight: 600; outline: none;
}
.spe-sc-input:focus { border-color: #1f6feb; }
.spe-btns { display: flex; gap: 8px; margin-top: 14px; align-items: center; flex-wrap: wrap; }
.spe-bs, .spe-bp {
padding: 10px 16px; min-height: 44px;
border-radius: 8px; border: 1px solid #30363d;
font-size: 13px; font-weight: 700; cursor: pointer;
}
.spe-bs { background: #21262d; color: #c9d1d9; }
.spe-bs:hover { background: #30363d; }
.spe-bp { background: #1f6feb; color: #fff; border-color: #1f6feb; margin-left: auto; }
.spe-bp:hover { background: #1d4ed8; }
/* Color picker (first-marker prompt) */
.sp-color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 6px; margin-top: 8px; }
.sp-color-opt { padding: 12px 10px; border: 2px solid transparent; border-radius: 8px; font-weight: 700; font-size: 13px; cursor: pointer; transition: transform 0.1s; }
.sp-color-opt:hover { transform: scale(1.03); }
.sp-color-opt.on { border-color: var(--text); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--text); }
/* Code Books modal list */
.sp-cb-list { display: flex; flex-direction: column; gap: 6px; }
.sp-cb-link { padding: 12px 14px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; transition: background 0.1s; }
.sp-cb-link:hover { background: var(--bg3); color: var(--accent); text-decoration: none; }
/* ────── Product Catalog full-page overlay ────── */
.sp-cat-ov { position: fixed; inset: 0; background: var(--bg); z-index: 1000000; display: flex; flex-direction: column; overflow: hidden; font-family: inherit; color: var(--text); }
.sp-cat-topbar { display: flex; align-items: center; gap: 14px; padding: 14px 22px; background: var(--bg2); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.sp-cat-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; }
.sp-cat-srch { flex: 1; max-width: 720px; }
.sp-cat-srch input { width: 100%; padding: 11px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font-size: 15px; box-sizing: border-box; outline: none; transition: border-color 0.12s; }
.sp-cat-srch input:focus { border-color: var(--accent); }
.sp-cat-xbtn { width: 44px; height: 44px; border: none; border-radius: 10px; background: var(--bg); color: var(--text); font-size: 22px; cursor: pointer; flex-shrink: 0; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.sp-cat-xbtn:hover { background: var(--accent); color: #fff; }
.sp-cat-body { flex: 1; overflow-y: auto; padding: 16px 22px; }
.sp-cat-sectn { font-size: 11px; font-weight: 800; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.7px; padding: 12px 4px 8px; }
.sp-cat-count { color: var(--text-dim); font-weight: 500; font-size: 11px; }
.sp-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
/* touch-action: manipulation — critical. Per Dariel 2026-06-01:
Alejandro tapped catalog cards on tablet, nothing happened. iOS Safari
treats taps inside scrollable containers (.sp-cat-body has overflow-y:
auto) as potential scroll gestures; >5px finger drift converts the
touch into a pan and suppresses the click. `manipulation` strips the
double-tap-zoom + scroll heuristics so the tap fires immediately. */
.sp-cat-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; text-align: center; transition: border-color 0.1s, background 0.1s, transform 0.1s; min-height: 170px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.sp-cat-card:hover { border-color: var(--accent); background: var(--bg2); transform: translateY(-2px); }
.sp-cat-cimg, .sp-cat-cimg-ph { width: 72px; height: 72px; border-radius: 10px; object-fit: contain; background: var(--bg2); margin-bottom: 8px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 28px; }
.sp-cat-ccd { font-size: 11px; color: var(--text-dim); font-family: ui-monospace, monospace; margin-bottom: 3px; }
.sp-cat-cnm { font-size: 12px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 4px; color: var(--text); }
.sp-cat-ccat { font-size: 10px; color: var(--text-dim); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.3px; }
.sp-cat-cpr { font-size: 13px; font-weight: 700; color: var(--green); margin-top: auto; }
.sp-cat-empty { padding: 60px 20px; text-align: center; color: var(--text-dim); font-size: 14px; }
.sp-cat-empty-glyph { font-size: 40px; margin-bottom: 12px; opacity: 0.5; }
.sp-cat-loading { padding: 40px; text-align: center; color: var(--text-dim); font-size: 14px; }
.sp-cat-footer { display: flex; align-items: center; gap: 14px; padding: 12px 22px; background: var(--bg2); border-top: 1px solid var(--border); flex-shrink: 0; }
.sp-cat-hint { flex: 1; font-size: 12px; color: var(--text-dim); text-align: right; line-height: 1.4; }
.sp-cat-hint kbd { display: inline-block; padding: 1px 6px; margin: 0 2px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; font-family: ui-monospace, "SF Mono", monospace; font-size: 11px; color: var(--text); box-shadow: 0 1px 0 var(--border); }
/* Mobile / tablet tweaks for site-plan editor */
@media (max-width: 900px) {
.sp-toolbar { padding: 4px 8px; gap: 3px; }
.sp-tb { min-width: 48px; padding: 4px 5px; }
.sp-tb .sp-tb-lb { font-size: 9px; }
.sp-bottombar { padding: 4px 8px; gap: 4px; }
.sp-chip { padding: 5px 9px; font-size: 11px; }
.sp-sidebar { width: 240px; }
.sp-cat-topbar { padding: 10px 14px; gap: 8px; }
.sp-cat-title { font-size: 15px; max-width: 30vw; }
.sp-cat-srch input { padding: 10px 12px; font-size: 14px; }
.sp-cat-xbtn { width: 40px; height: 40px; font-size: 20px; }
.sp-cat-body { padding: 12px 14px 20px; }
}
/* iPad / tablet — 3-wide grid, larger tiles. The desktop default packs
~6 columns at 160px each which is too cramped on touch screens.
Force 3 columns with big tiles so a rep can read SKU + price at a
glance and tap accurately. Sits between the desktop default and the
phone-narrow override below. */
@media (min-width: 641px) and (max-width: 1100px) {
.sp-cat-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sp-cat-card { min-height: 230px; padding: 16px 12px; border-radius: 14px; }
.sp-cat-cimg, .sp-cat-cimg-ph { width: 132px; height: 132px; font-size: 42px; margin-bottom: 12px; border-radius: 12px; }
.sp-cat-ccd { font-size: 12px; margin-bottom: 4px; }
.sp-cat-cnm { font-size: 15px; line-height: 1.35; -webkit-line-clamp: 3; }
.sp-cat-ccat { font-size: 11px; }
.sp-cat-cpr { font-size: 18px; margin-top: 10px; }
}
@media (max-width: 640px) {
.sp-sidebar { display: none; }
.sp-cat-title { display: none; }
.sp-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sp-cat-card { padding: 12px 10px; min-height: 180px; }
.sp-cat-cimg, .sp-cat-cimg-ph { width: 90px; height: 90px; }
.sp-cat-cnm { font-size: 13px; }
.sp-cat-cpr { font-size: 15px; }
.sp-cat-hint { display: none; }
}
/* =========================================================================
New Quote Wizard (VBNewQuote)
--------------------------------------------------------------------------
5-step modal: Customer → Service → Address → Sales Rep → Details.
Was missing — restored to brand light theme after the canvas-rewrite agent
inadvertently dropped them.
========================================================================= */
.vbnq-overlay {
position: fixed; inset: 0; z-index: 10000;
background: rgba(0,0,0,0.55);
/* Anchor card at top so tall content stays reachable even on short screens. */
display: flex; align-items: flex-start; justify-content: center;
padding: 24px 24px 48px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.vbnq-card {
background: var(--bg2, #ffffff);
border: 1px solid var(--border, #e6dbcc);
border-radius: 14px;
width: 100%; max-width: 720px;
/* Let card grow with content; the overlay scrolls. No max-height. */
display: flex; flex-direction: column;
box-shadow: 0 24px 64px rgba(0,0,0,.35);
margin: auto 0;
}
/* Ensure the body section can grow without an internal scroll hiding results. */
.vbnq-body { padding: 22px; min-height: 320px; }
.vbnq-header {
display: flex; justify-content: space-between; align-items: center;
padding: 16px 22px;
border-bottom: 1px solid var(--border, #e6dbcc);
background: var(--bg, #f1e8df);
}
.vbnq-header h3 {
margin: 0; color: var(--accent, #691d20);
font-size: 18px; font-weight: 800; letter-spacing: 0.3px;
}
.vbnq-x {
background: transparent; border: none; cursor: pointer;
font-size: 28px; line-height: 1; color: var(--text-dim, #888);
padding: 0 6px;
}
.vbnq-x:hover { color: var(--accent, #691d20); }
.vbnq-stepper {
display: flex; align-items: center; gap: 6px;
padding: 14px 22px;
border-bottom: 1px solid var(--border, #e6dbcc);
background: var(--bg2, #ffffff);
}
.vbnq-step {
display: flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 700;
color: var(--text-dim, #888);
}
.vbnq-step.active { color: var(--accent, #691d20); }
.vbnq-step.done { color: #16a34a; }
.vbnq-step-n {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 11px;
background: var(--bg, #f1e8df); color: var(--text-dim, #888);
font-size: 11px; font-weight: 800;
}
.vbnq-step.active .vbnq-step-n {
background: var(--accent, #691d20); color: #ffffff;
}
.vbnq-step.done .vbnq-step-n { background: #16a34a; color: #ffffff; }
.vbnq-step-l { letter-spacing: 0.3px; }
.vbnq-step-sep {
flex: 1; min-width: 12px; height: 1px;
background: var(--border, #e6dbcc);
}
/* Body grows with content; OUTER overlay scrolls. Inner scroll hid the
customer-search results on small viewports. */
.vbnq-body { padding: 22px; min-height: 280px; }
.vbnq-footer {
display: flex; gap: 8px; align-items: center;
padding: 14px 22px;
border-top: 1px solid var(--border, #e6dbcc);
background: var(--bg, #f1e8df);
}
/* =========================================================================
New Quote Wizard — Step content
Inner element styles (the shell rules are above; these style every step's
form fields, cards, lists). Without these, results render as raw text.
========================================================================= */
.vbnq-body { padding: 22px; min-height: 320px; font-size: 14px; color: var(--text); }
.vbnq-label { display:block; font-size:11px; font-weight:700; color:var(--text-dim); letter-spacing:.5px; margin-bottom:4px; }
.vbnq-sub-label { font-size:11px; color:var(--text-dim); }
.vbnq-help { font-size:11px; color:var(--text-dim); margin-top:6px; }
.vbnq-section { margin-bottom:18px; }
.vbnq-row { display:flex; gap:10px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.vbnq-check { display:flex; gap:6px; align-items:center; cursor:pointer; font-size:13px; }
/* ── Step 1: Customer ──────────────────────────────────────────────────── */
.vbnq-cust-search {
width:100%; padding:10px 12px; font-size:14px;
border:1px solid var(--border); border-radius:8px;
background:var(--bg); color:var(--text); box-sizing:border-box;
margin-bottom:10px;
}
.vbnq-results { display:flex; flex-direction:column; gap:6px; max-height:380px; overflow-y:auto; padding:2px; }
.vbnq-results-loading, .vbnq-results-empty {
padding:14px; text-align:center; color:var(--text-dim); font-size:13px;
}
.vbnq-result-item {
display:block; width:100%; text-align:left;
padding:10px 14px; background:var(--bg2); border:1px solid var(--border);
border-radius:8px; cursor:pointer; transition:all .12s;
color:var(--text);
}
.vbnq-result-item:hover { background:#fff5f0; border-color:var(--accent); }
.vbnq-result-name { font-weight:700; color:var(--text); font-size:14px; display:flex; align-items:center; gap:6px; }
.vbnq-result-sub { font-size:12px; color:var(--text-dim); margin-top:2px; }
.vbnq-new-cust-btn {
margin-top:10px; padding:8px 14px;
background:transparent; color:var(--accent);
border:1px dashed var(--accent); border-radius:8px;
font-weight:700; font-size:12px; cursor:pointer;
}
.vbnq-new-cust-btn:hover { background:var(--accent); color:#fff; }
.vbnq-new-cust-form, .vbnq-new-addr-form, .vbnq-subform {
margin-top:14px; padding:14px;
background:var(--bg); border:1px solid var(--border); border-radius:10px;
display:flex; flex-direction:column; gap:8px;
}
.vbnq-nc-name, .vbnq-nc-email, .vbnq-nc-phone, .vbnq-nc-company,
.vbnq-na-street, .vbnq-na-city, .vbnq-na-state, .vbnq-na-zip, .vbnq-na-country, .vbnq-na-label,
.vbnq-validity, .vbnq-notes, .vbnq-terms {
width:100%; padding:8px 10px; font-size:13px;
border:1px solid var(--border); border-radius:6px;
background:var(--bg2); color:var(--text); box-sizing:border-box;
}
.vbnq-nc-save, .vbnq-na-save {
padding:8px 14px; background:var(--accent); color:#fff;
border:none; border-radius:6px; font-weight:700; font-size:12px; cursor:pointer;
}
.vbnq-nc-cancel, .vbnq-na-cancel {
padding:8px 14px; background:var(--bg2); color:var(--text-dim);
border:1px solid var(--border); border-radius:6px; font-size:12px; cursor:pointer;
}
/* "Selected customer" pill at top of subsequent steps */
.vbnq-selected {
display:flex; justify-content:space-between; align-items:center;
padding:10px 14px; background:#fff5f0;
border:1px solid #e6c8c0; border-radius:8px; margin-bottom:14px;
}
.vbnq-selected-name { font-weight:700; color:var(--accent); }
.vbnq-selected-sub { font-size:12px; color:var(--text-dim); }
.vbnq-change-cust {
background:transparent; border:1px solid var(--accent); color:var(--accent);
padding:4px 10px; border-radius:6px; font-size:11px; cursor:pointer; font-weight:700;
}
/* ── Step 2: Service ───────────────────────────────────────────────────── */
.vbnq-services {
display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
gap:10px;
}
.vbnq-service-card {
padding:18px 14px; background:var(--bg2);
border:2px solid var(--border); border-radius:12px;
cursor:pointer; transition:all .15s;
text-align:center; color:var(--text);
display:flex; flex-direction:column; gap:6px; align-items:center;
}
.vbnq-service-card:hover {
border-color:var(--accent);
background:#fff5f0;
transform:translateY(-1px);
}
.vbnq-service-card.selected {
border-color:var(--accent);
background:#fff5f0;
box-shadow:0 4px 12px rgba(105,29,32,.18);
}
.vbnq-service-emoji { font-size:32px; line-height:1; }
.vbnq-service-label { font-size:14px; font-weight:800; color:var(--accent); }
.vbnq-service-note { font-size:11px; color:var(--text-dim); line-height:1.3; }
/* ── Step 3: Address ───────────────────────────────────────────────────── */
.vbnq-addr-list { display:flex; flex-direction:column; gap:6px; max-height:340px; overflow-y:auto; }
.vbnq-addr-row {
display:flex; gap:10px; align-items:flex-start; padding:10px 12px;
background:var(--bg2); border:1px solid var(--border); border-radius:8px;
cursor:pointer;
}
.vbnq-addr-row:hover { border-color:var(--accent); }
.vbnq-addr-radio { margin-top:3px; }
.vbnq-addr-label { font-weight:700; color:var(--text); font-size:13px; }
.vbnq-addr-info { font-size:12px; color:var(--text); }
.vbnq-addr-sub { font-size:11px; color:var(--text-dim); }
.vbnq-new-addr-btn {
margin-top:10px; padding:8px 14px;
background:transparent; color:var(--accent);
border:1px dashed var(--accent); border-radius:8px;
font-weight:700; font-size:12px; cursor:pointer;
}
/* ── Step 4: Sales Rep ─────────────────────────────────────────────────── */
.vbnq-rep-card {
display:flex; gap:12px; align-items:center;
padding:12px 14px; background:var(--bg2);
border:2px solid var(--border); border-radius:10px;
cursor:pointer; margin-bottom:6px;
}
.vbnq-rep-card:hover { border-color:var(--accent); background:#fff5f0; }
.vbnq-rep-card.selected { border-color:var(--accent); background:#fff5f0; }
.vbnq-rep-avatar {
width:38px; height:38px; border-radius:50%;
background:var(--accent); color:#fff;
display:flex; align-items:center; justify-content:center;
font-weight:800; font-size:14px; flex-shrink:0;
}
.vbnq-rep-name { font-weight:700; color:var(--text); }
.vbnq-rep-sub { font-size:11px; color:var(--text-dim); }
/* ── Step 5: Details ───────────────────────────────────────────────────── */
.vbnq-summary {
background:#fff5f0; border:1px solid #e6c8c0; border-radius:10px;
padding:12px 14px; margin-top:14px;
}
.vbnq-summary div { padding:4px 0; font-size:13px; color:var(--text); }
/* Footer button — disabled state */
.vbnq-footer button[disabled] { opacity:.5; cursor:not-allowed; }
/* ── Address row selected state + radio glyph ──────────────────────────── */
.vbnq-addr-row.selected {
border-color: var(--accent);
background: #fff5f0;
box-shadow: 0 2px 8px rgba(105,29,32,.12);
}
.vbnq-addr-radio {
width: 16px; height: 16px; display: inline-flex;
align-items: center; justify-content: center;
color: var(--accent);
font-size: 18px; line-height: 1; margin-top: 0;
}
/* ── Inline submit-error banner on Step 5 ──────────────────────────────── */
.vbnq-submit-error {
margin-top: 12px;
padding: 10px 12px;
background: #fdecea;
border: 1px solid #f5c6c2;
border-radius: 8px;
color: #8a1f24;
font-size: 13px;
font-weight: 600;
}
/* Force two-column rows in subforms to stretch properly */
.vbnq-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vbnq-row.two .form-input { width: 100%; }
/* ── CHATTER (activity timeline) ────────────────────────────────────────── */
.vb-chatter-card { padding: 14px; }
.vb-chatter-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 10px; gap: 8px;
}
.vb-chatter-count { color: var(--text-dim); font-weight: 500; }
.vb-chatter-input {
display: flex; flex-direction: column; gap: 8px;
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border);
}
.vb-chatter-textarea { min-height: 44px; font-size: 14px; resize: vertical; }
.vb-chatter-input-actions {
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap;
}
.vb-chatter-pending { font-size: 12px; color: var(--text-dim); flex: 1; }
.vb-chatter-list { display: flex; flex-direction: column; gap: 12px; max-height: 520px; overflow-y: auto; }
.vb-chatter-empty { padding: 12px; }
.vb-chatter-entry {
display: flex; gap: 10px; padding: 8px 0;
border-bottom: 1px dashed var(--border);
}
.vb-chatter-entry:last-child { border-bottom: none; }
.vb-chatter-avatar {
flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%;
background: #691d20; color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
}
.vb-chatter-entry-main { flex: 1; min-width: 0; }
.vb-chatter-entry-meta {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
font-size: 13px; color: var(--text-dim); margin-bottom: 4px;
}
.vb-chatter-entry-meta strong { color: var(--text); }
.vb-chatter-time { font-size: 12px; color: var(--text-dim); }
.vb-chatter-entry-actions { margin-left: auto; display: inline-flex; gap: 4px; }
.vb-chatter-entry-actions .btn-icon { min-width: 32px; min-height: 32px; font-size: 14px; padding: 4px; }
.vb-chatter-entry-body { font-size: 14px; word-break: break-word; line-height: 1.45; }
.vb-chatter-entry-body a { color: #253938; text-decoration: underline; }
.vb-chatter-atts {
display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.vb-chatter-thumb {
display: inline-block; width: 96px; height: 96px;
border-radius: 8px; overflow: hidden;
border: 1px solid var(--border); background: var(--bg3);
}
.vb-chatter-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vb-chatter-audio { max-width: 100%; }
.vb-chatter-file {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 10px; border-radius: 8px;
background: var(--bg3); color: var(--text);
font-size: 13px; text-decoration: none;
border: 1px solid var(--border);
min-height: 32px;
}
.vb-chatter-file:hover { background: var(--bg2); }
/* ============================================================
VBKeypad — full-viewport dark navy numeric entry for field-ops
============================================================ */
.vb-kp-root {
display: flex; flex-direction: column;
width: 100%;
min-height: calc(100vh - 64px); /* fills section area below app header */
/* iOS Safari: 100vh ignores the dynamic toolbar, so the bottom keypad row
(NEXT) was pushed off-screen on small iPhones. dvh = the actual visible
height, so the whole keypad fits. (Falls back to the vh line above.) */
min-height: calc(100dvh - 64px);
background: #1a1f2e;
color: #fff;
font-family: inherit;
user-select: none; -webkit-user-select: none;
/* Block iOS Safari's double-tap-to-zoom across the entire keypad
shell. Without this, rapid taps on the same digit (e.g. typing
"9966") fire iOS's double-tap gesture and zoom the page. */
touch-action: manipulation;
}
/* Slotted display: a row of underscores; filled slots show the typed digit */
.vb-kp-display {
display: flex; align-items: center; justify-content: center;
gap: 16px;
padding: 28px 16px 20px;
font-size: 56px; font-weight: 700; letter-spacing: 6px;
color: rgba(255,255,255,0.45);
font-variant-numeric: tabular-nums;
background: #1a1f2e;
}
.vb-kp-slot {
display: inline-block;
min-width: 34px; text-align: center;
line-height: 1;
font-size: inherit; font-weight: 700;
}
.vb-kp-slot-filled { color: #fff; }
/* Prefix glyph in front of the digit slots. Static when there's only one
prefix; pulses + underlines when more than one is configured to hint the
rep can tap it to cycle (e.g. V → S → Z for native/legacy disambig). */
.vb-kp-prefix {
display: inline-block;
color: #fff;
font-weight: 700;
margin-right: 8px;
}
.vb-kp-prefix-cycle {
cursor: pointer;
border-bottom: 3px dashed rgba(255,255,255,0.45);
padding-bottom: 2px;
}
.vb-kp-prefix-cycle:active { color: #f97171; }
/* Live preview row between the slot display and the keypad grid. Shows
"S10051 · John Smith" as the rep types so they can verify before NEXT.
Reserve line-height to keep the layout stable when the hint is empty. */
.vb-kp-hint {
min-height: 22px;
padding: 0 12px 10px;
text-align: center;
font-size: 14px;
font-weight: 600;
color: rgba(255,255,255,0.85);
background: #1a1f2e;
letter-spacing: 0.2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vb-kp-hint-ok { color: #5be584; }
.vb-kp-hint-warn { color: #f59e0b; }
/* 4-row x 3-col grid that fills the rest of the viewport. Buttons are
edge-to-edge with subtle 1px separators (lighter than the bg). */
.vb-kp-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
gap: 1px;
background: rgba(255,255,255,0.06);
flex: 1;
min-height: 0;
/* Same double-tap-zoom guard as the buttons — covers the 1px gap
between keys so a stray tap there doesn't trigger zoom either. */
touch-action: manipulation;
}
.vb-kp-key {
background: #1a1f2e;
color: #fff;
border: none;
font-size: 44px;
font-weight: 700;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
-webkit-tap-highlight-color: rgba(255,255,255,0.08);
transition: background 0.08s ease;
font-variant-numeric: tabular-nums;
/* iOS Safari: prevent double-tap zoom + text selection on rapid taps.
Per Dariel 2026-06-01: typing "9966" was zooming the page because
iOS interprets two quick taps on the same number as a double-tap
gesture. `touch-action: manipulation` opts out of double-tap-zoom
while keeping pan and pinch. `user-select: none` + the webkit
prefix stop iOS from selecting the digit text on a long-press. */
touch-action: manipulation;
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
.vb-kp-key:active:not(:disabled) { background: #2a2f3e; }
.vb-kp-key:disabled { opacity: 0.45; cursor: not-allowed; }
/* Red backspace, gray NEXT — matches Vilobot's look */
.vb-kp-key-bksp {
background: #ef4444; color: #fff;
}
.vb-kp-key-bksp:active:not(:disabled) { background: #dc2626; }
.vb-kp-key-bksp span { font-size: 38px; }
.vb-kp-key-next {
background: #3a3f4e; color: #cbd1d8;
font-size: 32px; font-weight: 700; letter-spacing: 2px;
}
.vb-kp-key-next:not(:disabled) { background: #ef4444; color: #fff; }
.vb-kp-key-next:not(:disabled):active { background: #dc2626; }
.vb-kp-status {
text-align: center;
font-size: 14px; color: rgba(255,255,255,0.7);
padding: 8px 12px;
background: #1a1f2e;
min-height: 20px;
}
.vb-kp-status-error { color: #ff6b6b; font-weight: 700; }
.vb-kp-status-warn { color: #ffd86b; font-weight: 600; }
/* Collapsed pill after a WO is loaded — sits at top of section content */
.vb-kp-pill {
display: flex; align-items: center; gap: 12px;
padding: 12px 18px;
background: #1a1f2e; color: #fff;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.vb-kp-pill-value {
font-weight: 800; font-size: 18px; letter-spacing: 2px;
font-variant-numeric: tabular-nums;
}
.vb-kp-pill-edit {
margin-left: auto;
background: rgba(255,255,255,0.14); color: #fff;
border: none; border-radius: 8px; padding: 8px 16px;
font-weight: 700; font-size: 12px; cursor: pointer;
letter-spacing: 1px; text-transform: uppercase;
}
.vb-kp-pill-edit:hover { background: rgba(255,255,255,0.24); }
@media (min-width: 720px) {
.vb-kp-display { font-size: 64px; gap: 20px; padding: 36px 16px 24px; }
.vb-kp-slot { min-width: 40px; }
.vb-kp-key { font-size: 52px; }
.vb-kp-key-next { font-size: 36px; }
}
/* Short viewports — small iPhones (SE/mini) and landscape. Shrink the display
+ keys so the full keypad, including the NEXT row, fits without being cut off
(Dariel 2026-06-03: keypad cut off on a small iPhone). */
@media (max-height: 600px) {
.vb-kp-display { font-size: 30px; gap: 8px; padding: 8px 12px 4px; letter-spacing: 3px; }
.vb-kp-slot { min-width: 20px; }
.vb-kp-hint { min-height: 14px; padding: 0 8px 4px; font-size: 11px; }
.vb-kp-key { font-size: 24px; }
.vb-kp-key-bksp span { font-size: 22px; }
.vb-kp-key-next { font-size: 16px; letter-spacing: 1px; }
.vb-kp-status { padding: 3px 8px; min-height: 12px; font-size: 11px; }
}
/* ════════════════════════════════════════════════════════════════════════
* Ops calendar — install block STATUS overlays (2026-05-28)
* ----------------------------------------------------------------------
* Server-computed paymentState + permit811State map to one of four classes:
* .opsv2-card--status-red SO signed, deposit not paid, NOT pay-at-end
* .opsv2-card--status-black no 811 ticket OR PDF not uploaded (not_needed)
* .opsv2-card--status-striped both of the above apply
* .opsv2-card--status-none neither — default border (no override)
*
* The 4px LEFT BORDER overrides the inline crew-color border (set by
* buildInstallCard for back-compat). Background gets a faint 6% tinted
* overlay on top of the existing crew tint via a ::before layer so the
* crew identity stays readable underneath. !important needed because
* the renderer still emits an inline `border-left` for crew color.
* ════════════════════════════════════════════════════════════════════════ */
.opsv2-card--status-red {
border-left: 4px solid #dc2626 !important;
position: relative;
}
.opsv2-card--status-red::before {
content: ""; position: absolute; inset: 0;
background: rgba(220, 38, 38, 0.06);
pointer-events: none; border-radius: inherit;
}
.opsv2-card--status-black {
border-left: 4px solid #1a1a1a !important;
position: relative;
}
.opsv2-card--status-black::before {
content: ""; position: absolute; inset: 0;
background: rgba(26, 26, 26, 0.06);
pointer-events: none; border-radius: inherit;
}
.opsv2-card--status-striped {
/* Diagonal red/black stripes painted directly into the 4px left border
* via a CSS gradient. border-image keeps it tight to the 4px strip; the
* fallback border color preserves layout if border-image isn't supported. */
border-left: 4px solid #1a1a1a !important;
border-image: repeating-linear-gradient(
45deg,
#dc2626 0 8px,
#1a1a1a 8px 16px
) 1 !important;
position: relative;
}
.opsv2-card--status-striped::before {
content: ""; position: absolute; inset: 0;
background: rgba(120, 20, 20, 0.06);
pointer-events: none; border-radius: inherit;
}
.opsv2-card--status-none {
/* No-op anchor class kept for completeness so JS can switch through all
* four states without ever leaving an empty className branch. */
}
/* Keep card contents above the tinted ::before layer. */
.opsv2-install-card.opsv2-card--status-red > *,
.opsv2-install-card.opsv2-card--status-black > *,
.opsv2-install-card.opsv2-card--status-striped > * {
position: relative;
z-index: 1;
}
/* ════════════════════════════════════════════════════════════════════════
* Field Workflow Shell — Welding Photos / Aluminum Photos / Driver /
* Powder Coating, post-keypad. Forces a fullscreen dark-navy takeover
* regardless of the app's theme so the shop-floor tech sees the same
* giant-button UI in every section.
*
* Mounted into #app-body via JS as `…`. The
* shell pulls itself out of normal flow and paints over the whole viewport
* below the app header.
* ════════════════════════════════════════════════════════════════════════ */
.vb-field-shell {
position: fixed;
/* The app-header is 56px tall (see .app-header). Sit below it so the
hamburger + section title still work. */
top: 56px;
left: 0; right: 0; bottom: 0;
background: #0c121f;
color: #fff;
z-index: 30;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
font-family: inherit;
}
@media (min-width: 769px) {
/* On desktop the sidebar is 240px wide and pinned left. Keep the shell
visible only over the main content. */
.vb-field-shell { left: 240px; }
}
.vb-field-shell * { box-sizing: border-box; }
.vb-fw {
display: flex;
flex-direction: column;
gap: 14px;
padding: 14px;
/* Full width — per Dariel 2026-06-03 the 640px cap made the capture
UI a narrow strip on a landscape tablet with empty space around it.
Use the whole shell width (which already sits right of the 240px
sidebar on desktop). */
max-width: 100%;
margin: 0 auto;
min-height: 100%;
}
/* Top SO-header row: small kind label (left) + giant SO short name (right). */
.vb-fw-hdr {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px;
padding: 4px 4px 0;
}
.vb-fw-hdr-l {
font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.55);
text-transform: uppercase; letter-spacing: 1.5px;
padding-top: 8px;
}
.vb-fw-hdr-r { text-align: right; min-width: 0; flex: 1; }
.vb-fw-hdr-so {
font-size: 36px; font-weight: 900; color: #fff;
letter-spacing: 1px; line-height: 1.05;
font-variant-numeric: tabular-nums;
}
.vb-fw-hdr-cust {
font-size: 14px; font-weight: 600;
color: rgba(255,255,255,0.55);
margin-top: 4px; word-break: break-word;
}
/* Big red VOLVER button. Tap → expand keypad. */
.vb-fw-back {
display: flex; align-items: center; justify-content: center;
width: 100%;
min-height: 64px;
background: #dc2626;
color: #fff;
border: none;
border-radius: 14px;
font-size: 22px; font-weight: 900; letter-spacing: 2px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.vb-fw-back:active { background: #b91c1c; }
/* Question prompt + category picker buttons (Step 2). */
.vb-fw-prompt {
text-align: center;
font-size: 20px; font-weight: 800;
color: rgba(255,255,255,0.6);
margin: 12px 0 4px;
letter-spacing: 0.5px;
}
.vb-fw-cats { display: flex; flex-direction: column; gap: 12px; }
.vb-fw-cat {
width: 100%;
min-height: 160px;
display: flex; align-items: center; justify-content: center;
gap: 18px;
background: rgba(255,255,255,0.04);
border-radius: 20px;
border: 4px solid currentColor;
font-size: 38px; font-weight: 900; letter-spacing: 2px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
padding: 18px;
text-align: center;
}
.vb-fw-cat:active { background: rgba(255,255,255,0.08); }
.vb-fw-cat-emoji { font-size: 48px; line-height: 1; }
.vb-fw-cat-label { line-height: 1.1; }
/* Selected category chip (Step 3). */
.vb-fw-chip {
display: inline-flex; align-items: center; gap: 8px;
align-self: flex-start;
padding: 8px 16px;
border-radius: 999px;
font-size: 16px; font-weight: 900; letter-spacing: 1px;
background: rgba(255,255,255,0.06);
border: 2px solid currentColor;
}
/* Reference photos collapsible panel. */
.vb-fw-ref {
border: 1px solid rgba(255,255,255,0.10);
border-radius: 12px;
background: rgba(255,255,255,0.03);
overflow: hidden;
}
.vb-fw-ref-head {
display: flex; align-items: center; justify-content: space-between;
width: 100%;
padding: 12px 14px;
background: transparent;
border: none;
color: #fff;
font-size: 14px; font-weight: 800;
cursor: pointer;
text-align: left;
letter-spacing: 0.5px;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.vb-fw-ref-head:active { background: rgba(255,255,255,0.06); }
.vb-fw-ref-body {
padding: 8px 12px 12px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
max-height: 50vh;
overflow-y: auto;
}
.vb-fw-ref-empty {
padding: 14px;
color: rgba(255,255,255,0.55);
font-size: 13px;
text-align: center;
}
.vb-fw-ref-thumb {
width: 100%; aspect-ratio: 1 / 1;
background: #1a2030;
border: 1px solid rgba(255,255,255,0.10);
border-radius: 8px;
overflow: hidden;
cursor: pointer;
}
.vb-fw-ref-thumb img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Big dashed camera-tile. */
.vb-fw-cam {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
width: 100%;
/* Grow to fill the leftover vertical space so the camera target is a
big, easy tap on a tablet instead of a short tile with a dead band
of empty screen below it. min-height keeps a floor on tiny phones. */
flex: 1 1 auto;
min-height: 240px;
border: 3px dashed rgba(255,255,255,0.28);
border-radius: 18px;
background: rgba(255,255,255,0.03);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
padding: 16px;
}
.vb-fw-cam:active { background: rgba(255,255,255,0.06); }
/* Secondary "pick from gallery" link under the camera tile. */
.vb-fw-gallery {
display: block;
text-align: center;
font-size: 14px;
font-weight: 700;
color: rgba(255,255,255,0.62);
padding: 10px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.vb-fw-gallery:active { color: #fff; }
.vb-fw-gallery .vb-fw-cam-input { display: none; }
.vb-fw-cam-emoji { font-size: 56px; line-height: 1; margin-bottom: 8px; }
.vb-fw-cam-label {
font-size: 24px; font-weight: 900; color: #fff;
letter-spacing: 1px; text-align: center;
}
.vb-fw-cam-input { display: none; }
.vb-fw-cam-help {
text-align: center;
font-size: 13px;
color: rgba(255,255,255,0.45);
margin-top: -4px;
}
/* Queued photos grid + counter chip. */
.vb-fw-queue { display: flex; flex-direction: column; gap: 8px; }
.vb-fw-queue-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.vb-fw-queue-item {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 10px;
overflow: hidden;
background: #1a2030;
border: 1px solid rgba(255,255,255,0.10);
}
.vb-fw-queue-item img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.vb-fw-queue-rm {
position: absolute; top: -6px; right: -6px;
width: 28px; height: 28px;
border-radius: 50%;
background: #dc2626; color: #fff;
border: 2px solid #0c121f;
font-size: 14px; font-weight: 900;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.vb-fw-queue-count {
align-self: center;
padding: 6px 14px;
border-radius: 999px;
background: rgba(255,255,255,0.10);
color: #fff;
font-size: 14px; font-weight: 900; letter-spacing: 1px;
}
/* Sticky LISTO submit. */
.vb-fw-listo {
position: sticky; bottom: 8px;
width: 100%;
min-height: 80px;
background: #10b981;
color: #fff;
border: none;
border-radius: 16px;
font-size: 28px; font-weight: 900; letter-spacing: 2px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
box-shadow: 0 8px 24px rgba(16,185,129,0.35);
}
.vb-fw-listo:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }
.vb-fw-listo:active:not(:disabled) { background: #059669; }
/* Step 5 — success screen. */
.vb-fw-done {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center;
padding: 32px 16px;
gap: 14px;
min-height: calc(100vh - 56px - 28px);
}
.vb-fw-done-emoji { font-size: 120px; line-height: 1; }
.vb-fw-done-title {
font-size: 36px; font-weight: 900;
color: #10b981; letter-spacing: 2px;
}
.vb-fw-done-so {
font-size: 28px; font-weight: 800;
color: #fff; letter-spacing: 1px;
}
.vb-fw-done-next {
width: 100%;
min-height: 72px;
margin-top: 14px;
background: #3b82f6;
color: #fff;
border: none;
border-radius: 14px;
font-size: 22px; font-weight: 900; letter-spacing: 1.5px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.vb-fw-done-next:active { background: #2563eb; }
/* Inline error/info banner inside a shell. */
.vb-fw-banner {
background: rgba(220,38,38,0.15);
border: 1px solid rgba(220,38,38,0.45);
color: #fecaca;
border-radius: 10px;
padding: 10px 12px;
font-size: 14px;
font-weight: 700;
}
/* Small top-right toggle to expose Manager View from inside the shell
* (powder coating only). */
.vb-fw-mgr-row {
display: flex; justify-content: flex-end;
padding: 0 4px;
}
.vb-fw-mgr-toggle {
background: rgba(255,255,255,0.10);
color: #fff;
border: 1px solid rgba(255,255,255,0.20);
border-radius: 8px;
padding: 8px 14px;
font-size: 12px; font-weight: 700;
letter-spacing: 0.5px;
cursor: pointer;
}
.vb-fw-mgr-toggle:active { background: rgba(255,255,255,0.18); }
/* Lightbox shared by reference-photo viewer. */
.vb-fw-lb {
position: fixed; inset: 0;
background: rgba(0,0,0,0.94);
z-index: 99999;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 12px;
}
.vb-fw-lb-img {
max-width: 100%; max-height: calc(100vh - 80px);
object-fit: contain; border-radius: 8px;
}
.vb-fw-lb-close {
position: absolute; top: 12px; right: 16px;
background: none; border: none; color: #fff;
font-size: 32px; font-weight: 900;
cursor: pointer;
}
/* ─────────────────────────────────────────────────────────────────────────
Kill native number-input spinners on every .
Per Dariel 2026-05-29: "remove the circle and the arrows to go up and
down i cant use that all is o nthe canvas and it cullters the area."
The corresponding inputs are tagged inputmode="decimal" so iPad gets the
proper numeric keypad even without the spinner control.
───────────────────────────────────────────────────────────────────────── */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}