/* Yantra Quote Builder — matches smart.yantra24x7.com PMS dashboard look */
* { box-sizing: border-box; }
:root {
--orange: #E07B3E; /* softened brand orange (was #E07B3E) — calmer on the eyes */
--orange-light: #ECA06E; /* was #ECA06E */
--orange-dark: #C4692F; /* was #C4692F */
--orange-soft: #FBF0E8;
--navy: #1A2540;
--navy-2: #0E1A2B;
--text: #2A3447;
--muted: #6B7585;
--border: #E5E9EE;
--border-soft: #EEF1F5;
--bg: #F4F6F9;
--card: #FFFFFF;
--danger: #DC2626;
--green: #10B981;
--purple: #A78BFA;
--yellow: #FBBF24;
--shadow: 0 2px 8px rgba(20, 30, 60, 0.06);
--shadow-card: 0 1px 3px rgba(20, 30, 60, 0.04);
}
body {
margin: 0;
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.55;
font-weight: 400;
font-size: 14px;
padding-left: 248px;
transition: padding-left 0.2s;
zoom: 0.95; /* overall compact scale — slightly larger than the 90% baseline (Suresh's preference) */
}
body.sb-collapsed { padding-left: 72px; }
/* ── SIDEBAR (matches smart.yantra24x7.com left nav) ─────────────── */
.sidebar {
position: fixed;
left: 0; top: 0; bottom: 0;
width: 248px;
background: #ffffff;
color: #475569;
display: flex; flex-direction: column;
padding: 14px 0;
z-index: 60;
transition: width 0.2s;
border-right: 1px solid #e8edf3;
box-shadow: 1px 0 3px rgba(15,23,42,0.03);
}
body.sb-collapsed .sidebar { width: 72px; }
.sb-toggle {
background: transparent; color: #64748b;
border: none; cursor: pointer;
width: 44px; height: 44px;
margin: 0 0 14px 14px;
display: flex; align-items: center; justify-content: center;
border-radius: 8px;
transition: all 0.15s;
}
.sb-toggle:hover { background: #f1f5f9; color: #0f172a; }
body.sb-collapsed .sb-toggle { margin-left: 14px; }
.sb-nav {
display: flex; flex-direction: column; gap: 7px;
padding: 0 12px 14px;
flex: 1 1 auto; /* fill remaining vertical space below sb-toggle */
overflow-y: auto; /* internal scroll when items exceed viewport (2026-06-29 v3 — added Hardware + Workflow + Logistics sections) */
min-height: 0; /* required for flex children with overflow */
scrollbar-width: thin;
scrollbar-color: #cbd5e1 transparent;
}
.sb-nav::-webkit-scrollbar { width: 8px; }
.sb-nav::-webkit-scrollbar-track { background: transparent; }
.sb-nav::-webkit-scrollbar-thumb {
background: #d7dee7;
border-radius: 4px;
}
.sb-nav::-webkit-scrollbar-thumb:hover { background: #b8c2d0; }
.sb-nav button {
background: transparent;
color: #475569;
border: none; cursor: pointer;
padding: 11px 12px;
display: flex; align-items: center; gap: 10px;
border-radius: 10px;
font-family: inherit;
font-size: 13px;
font-weight: 500;
text-align: left;
transition: all 0.15s;
white-space: nowrap;
overflow: hidden;
position: relative;
}
.sb-nav button:hover {
background: #f4f6f9;
color: #0f172a;
}
.sb-nav button.active {
background: #fff4ec;
color: #ea580c;
font-weight: 650;
}
/* orange left-accent bar + right chevron on the active item (smart1 style) */
.sb-nav button.active::before {
content: ''; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 3.5px;
background: var(--orange); border-radius: 3px;
}
.sb-nav button.active::after {
content: '\203A'; margin-left: auto; padding-left: 8px;
font-size: 18px; line-height: 1; font-weight: 700; color: var(--orange);
}
.sb-nav button svg { flex-shrink: 0; }
.sb-nav button span { transition: opacity 0.2s; }
.sb-nav button em { font-style: normal; color: #94a3b8; margin-left: 4px; }
.sb-nav button.active em { color: #fb923c; }
body.sb-collapsed .sb-nav button span { opacity: 0; pointer-events: none; }
body.sb-collapsed .sb-nav button.active::after { display: none; }
/* ── TOP-RIGHT user chip ───────────────────────────────────────── */
.top-right { display: flex; align-items: center; gap: 12px; }
.user-chip {
display: flex; align-items: center; gap: 10px;
padding: 6px 14px 6px 6px;
background: var(--bg);
border-radius: 999px;
}
.user-avatar {
width: 34px; height: 34px; border-radius: 50%;
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
color: white;
display: flex; align-items: center; justify-content: center;
font-weight: 600; font-size: 12px;
}
.user-meta { line-height: 1.2; }
.user-role {
font-size: 10px; color: var(--muted);
text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500;
}
.user-name { font-size: 13px; color: var(--text); font-weight: 600; }
.logout-btn {
background: transparent; border: none;
color: var(--muted); cursor: pointer;
padding: 6px; border-radius: 6px;
display: flex; align-items: center; margin-left: 4px;
transition: all 0.15s;
}
.logout-btn:hover { background: white; color: var(--danger); }
/* ── TOPBAR (white, matches your dashboard) ────────────────────── */
.topbar {
background: white;
color: var(--text);
padding: 12px 28px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 1px 4px rgba(20, 30, 60, 0.05);
position: sticky; top: 0; z-index: 50;
border-bottom: 1px solid var(--border-soft);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-logo-img {
height: 46px; width: auto; display: block;
}
/* topbar-nav removed — sidebar handles nav now */
/* ── CONTAINER ─────────────────────────────────────────────────── */
.container { max-width: 1180px; margin: 28px auto; padding: 0 24px; }
/* Full-width layout — fill the screen, no wasted left/right blank margins (applied to every page). Cap high so ultra-wide monitors don't over-stretch. */
.container-wide { max-width: 1920px; }
.page-head {
display: flex; justify-content: space-between; align-items: end;
margin-bottom: 22px; flex-wrap: wrap; gap: 16px;
}
/* Customer-detail page-head: name + address get full width; action-button
row drops below them. Prevents the 10-button cluster from cannibalising
the heading area and forcing the name/address to wrap vertically. */
.page-head.cust-head { flex-direction: column; align-items: stretch; }
.page-head.cust-head > div:first-child { width: 100%; }
.page-head.cust-head .cust-actions {
display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
width: 100%;
}
/* Action Plan page-head: floating-label fields like the dashboard builder.
Label sits on top of the box, clean white field below, all in one row. */
.page-head.actionplan-head {
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.page-head.actionplan-head .action-plan-title {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
width: 100%;
}
/* Floating-form (ff-) input pattern — label notched into the border,
matches the dashboard-builder style (Machine Group / Shift / Date etc.) */
.ff-field {
position: relative;
display: inline-block;
min-width: 280px;
}
.ff-label {
position: absolute;
top: -8px; /* sits half-on-the-border */
left: 14px;
background: var(--bg, #F8FAFC); /* punches through border with page bg */
padding: 0 6px;
font-size: 11px; font-weight: 600; text-transform: uppercase;
color: var(--muted); letter-spacing: 0.5px;
z-index: 1;
pointer-events: none;
}
.ff-input {
appearance: none; -webkit-appearance: none;
width: 100%;
background: white;
border: 1.5px solid var(--border-soft);
border-radius: 10px;
padding: 12px 38px 12px 16px;
font-size: 14px; font-weight: 600;
color: var(--navy-2);
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ff-input:hover { border-color: #94A3B8; }
.ff-input:focus {
outline: none;
border-color: #FB923C;
box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.15);
}
.ff-btn-orange {
background: white;
border: 1.5px solid var(--border-soft);
color: var(--navy-2);
padding: 12px 18px;
border-radius: 10px;
font-size: 14px; font-weight: 600;
cursor: pointer;
transition: all 0.12s ease;
}
.ff-btn-orange:hover {
background: #FB923C; color: white; border-color: #E07B3E;
}
.seg-chip-strip {
display: flex; align-items: center; gap: 6px;
flex-wrap: wrap;
margin-left: 8px;
padding-left: 12px;
border-left: 1px solid var(--border-soft); /* subtle vertical divider */
}
@media (max-width: 900px) {
.seg-chip-strip {
margin-left: 0; padding-left: 0; border-left: none;
width: 100%; margin-top: 4px;
}
}
.seg-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 12px; border-radius: 999px;
font-size: 12.5px; font-weight: 600;
background: white; border: 1px solid var(--border-soft);
color: var(--navy-2); white-space: nowrap;
}
.seg-chip strong { font-weight: 800; font-size: 14px; color: var(--navy-2); }
.seg-chip-total { background: #F1F5F9; }
.seg-chip-tbc { background: #FEF9C3; border-color: #FDE68A; color: #713F12; }
.seg-chip-tbc strong { color: #713F12; }
.seg-chip-sme { background: #DBEAFE; border-color: #93C5FD; color: #1E3A8A; }
.seg-chip-sme strong { color: #1E3A8A; }
.seg-chip-enterprise { background: #DCFCE7; border-color: #86EFAC; color: #14532D; }
.seg-chip-enterprise strong { color: #14532D; }
/* Hover popover anchored to the segment chip */
.seg-chip { position: relative; cursor: default; }
.chip-popover {
position: absolute; top: calc(100% + 6px); left: 0;
background: #0F172A; color: #E2E8F0;
padding: 10px 14px; border-radius: 8px;
font-size: 12px; font-weight: 500;
white-space: nowrap; line-height: 1.6;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.35);
opacity: 0; visibility: hidden;
transform: translateY(-4px);
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
z-index: 100;
pointer-events: none;
}
.chip-popover strong { color: white; font-weight: 700; }
.seg-chip:hover .chip-popover {
opacity: 1; visibility: visible; transform: translateY(0);
}
.page-head h1 {
margin: 0; font-size: 24px;
color: var(--navy-2); font-weight: 600;
letter-spacing: -0.3px;
}
/* Filter-bar style for quote meta (matches your dashboard filters) */
.quote-meta {
display: flex; gap: 14px; align-items: end;
background: white;
padding: 12px 16px;
border-radius: 10px;
box-shadow: var(--shadow-card);
}
.quote-meta label {
font-size: 11px; color: var(--muted);
display: flex; flex-direction: column; gap: 4px;
font-weight: 500;
}
.quote-meta input {
padding: 7px 11px; font-size: 13px;
border: 1px solid var(--border); border-radius: 7px;
background: white; color: var(--text);
font-family: inherit;
}
/* ── CARD (matches dashboard cards) ────────────────────────────── */
.card {
background: white;
border: 1px solid var(--border-soft);
border-radius: 12px;
padding: 24px 26px;
margin-bottom: 20px;
box-shadow: var(--shadow-card);
}
.card h2 {
margin: 0 0 20px;
font-size: 16px; color: var(--navy-2); font-weight: 600;
display: flex; align-items: center; gap: 10px;
letter-spacing: -0.2px;
}
.card h3 {
font-size: 14px; color: var(--navy-2);
margin: 18px 0 10px; font-weight: 600;
}
.row-between { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.hint {
color: var(--muted); font-size: 12.5px;
margin: 8px 0; font-style: italic; font-weight: 400;
}
/* ── FORM ──────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 14px; margin-bottom: 14px; }
label {
display: flex; flex-direction: column;
font-size: 12px; font-weight: 500; color: var(--muted);
gap: 5px;
text-transform: none;
letter-spacing: 0;
}
label.full { width: 100%; }
/* Customer form (New / Edit) — even vertical rhythm + bottom-aligned paired inputs
so the two columns line up even when one caption is longer than the other. */
.cform .grid-2 { align-items: end; gap: 14px 16px; margin-bottom: 14px; }
.cform > label { margin-bottom: 14px; }
.cform label { gap: 6px; }
.cform .grid-2 > label > input,
.cform .grid-2 > label > select,
.cform .grid-2 > label > textarea { margin-top: auto; }
/* Custom tag picker (customer form) — replaces the native datalist; searchable + create-on-type */
.tag-combo { position: relative; }
.tag-dropdown {
position: absolute; left: 0; right: 74px; top: calc(100% + 4px); z-index: 40;
background: #fff; border: 1px solid var(--border); border-radius: 10px;
box-shadow: 0 10px 28px rgba(15, 23, 42, .14);
max-height: 240px; overflow-y: auto; padding: 5px;
}
.tag-opt {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
padding: 8px 11px; border-radius: 8px; cursor: pointer; font-size: 12.5px; color: var(--text);
}
.tag-opt:hover { background: #eef2f7; }
.tag-opt-create { color: #0891b2; font-weight: 600; margin-top: 3px; border-top: 1px solid #eef2f7; }
.tag-opt-create:hover { background: #ecfeff; }
input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="tel"], select, textarea {
width: 100%;
padding: 10px 13px;
font-size: 13.5px;
border: 1px solid var(--border);
border-radius: 8px;
background: white;
color: var(--text);
font-family: inherit;
font-weight: 400;
transition: border-color 0.15s, box-shadow 0.15s;
}
input::placeholder, textarea::placeholder { color: #B0B6BE; }
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--orange);
box-shadow: 0 0 0 3px rgba(255, 107, 26, 0.1);
}
textarea { resize: vertical; min-height: 60px; }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236B7585' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 11px 7px; -webkit-appearance: none; appearance: none; padding-right: 32px; }
/* ── LINE ITEM ─────────────────────────────────────────────────── */
.line-item {
background: #F9FAFB;
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 18px;
margin-bottom: 14px;
}
.line-item-head {
display: flex; align-items: center; gap: 12px;
margin-bottom: 14px;
}
.line-num {
background: linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%);
color: white;
width: 30px; height: 30px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 600; font-size: 13px; flex-shrink: 0;
box-shadow: 0 4px 8px rgba(255, 107, 26, 0.25);
}
.line-item-head select {
flex: 1;
font-weight: 500;
background-color: white;
}
.line-item-head strong { flex: 1; font-size: 14px; color: var(--navy-2); font-weight: 600; }
.btn-del {
background: #FEF2F2; color: var(--danger);
border: none; border-radius: 7px;
width: 32px; height: 32px;
font-size: 18px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all 0.15s;
}
.btn-del:hover { background: var(--danger); color: white; }
.addon-note {
color: var(--orange); font-size: 12.5px;
margin: 10px 0; font-weight: 500;
background: var(--orange-soft); padding: 8px 12px; border-radius: 7px;
}
.line-total {
text-align: right; margin-top: 10px;
font-size: 13px; color: var(--muted);
padding-top: 10px; border-top: 1px dashed var(--border);
}
.line-total strong { color: var(--navy-2); font-size: 15px; font-weight: 600; }
/* ── TOTALS ────────────────────────────────────────────────────── */
.totals .totals-grid {
display: grid; grid-template-columns: 1fr auto;
gap: 10px 36px;
max-width: 480px; margin-left: auto;
font-size: 14px;
}
.totals-grid > div:nth-child(2n) {
text-align: right; font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--text);
}
.totals-grid > div:nth-child(2n-1) { color: var(--muted); }
.totals-grid .grand {
border-top: 2px solid var(--orange);
padding-top: 14px;
font-size: 18px;
color: var(--navy-2);
font-weight: 700;
margin-top: 4px;
}
/* ── ACTIONS / BUTTONS ─────────────────────────────────────────── */
.actions {
display: flex; gap: 12px; justify-content: flex-end;
flex-wrap: wrap; margin-top: 20px;
}
button.btn-primary, button.btn-secondary, .actions button.danger {
padding: 11px 24px;
border: none; border-radius: 8px;
font-size: 13.5px; font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: all 0.15s;
}
.btn-primary {
background: var(--orange); color: white;
box-shadow: 0 4px 12px rgba(255, 107, 26, 0.25);
}
.btn-primary:hover { background: var(--orange-dark); box-shadow: 0 6px 14px rgba(255, 107, 26, 0.35); }
.btn-primary.big { padding: 14px 32px; font-size: 14.5px; }
.btn-secondary {
background: white; color: var(--text);
border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--bg); border-color: var(--muted); }
/* Selected-state styling for toggle buttons (Model, Basis, quick-pick chips, etc.) */
.btn-secondary.active {
background: #E07B3E; color: #ffffff;
border-color: #ea580c;
box-shadow: 0 1px 4px rgba(249, 115, 22, 0.35);
}
.btn-secondary.active:hover {
background: #ea580c; color: #ffffff; border-color: #c2410c;
}
/* Field Dashboard cards */
.field-visit-card.state-not_started { border-left: 4px solid #64748b; }
.field-visit-card.state-checked_in { border-left: 4px solid #E07B3E; background: #fff7ed; }
.field-visit-card.state-checked_out { border-left: 4px solid #22c55e; background: #f0fdf4; opacity: 0.85; }
button.danger {
background: white; color: var(--danger);
border: 1px solid #FECACA;
}
button.danger:hover { background: var(--danger); color: white; }
/* ── TABS ──────────────────────────────────────────────────────── */
.tabs {
display: flex; gap: 4px; margin-bottom: 18px;
border-bottom: 2px solid var(--border-soft);
flex-wrap: wrap;
}
.tabs button {
background: transparent; color: var(--muted);
border: none; padding: 10px 18px;
font-size: 13px; font-weight: 500;
cursor: pointer; border-bottom: 3px solid transparent;
margin-bottom: -2px;
font-family: inherit;
}
.tabs button:hover { color: var(--text); }
.tabs button.active { color: var(--orange); border-bottom-color: var(--orange); font-weight: 600; }
/* ── TABLE ─────────────────────────────────────────────────────── */
.data-table {
width: 100%; border-collapse: collapse;
font-size: 13px; margin-bottom: 14px;
}
.data-table th, .data-table td {
padding: 10px 12px;
border-bottom: 1px solid var(--border-soft);
text-align: left;
}
.data-table th {
background: var(--bg); color: var(--navy-2);
font-weight: 600; font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.data-table td input, .data-table td select {
padding: 6px 9px; font-size: 13px;
background: white;
}
.data-table tbody tr:hover { background: #FAFBFC; }
.data-table tbody tr.row-clickable { cursor: pointer; transition: background 0.12s ease, box-shadow 0.12s ease; }
.data-table tbody tr.row-clickable:hover { background: #F1F5F9; box-shadow: inset 3px 0 0 #FB923C; }
.data-table button {
padding: 5px 11px; margin-right: 4px;
background: white; border: 1px solid var(--border); border-radius: 6px;
font-size: 12px; cursor: pointer; font-family: inherit;
color: var(--text); font-weight: 500;
}
.data-table button:hover { background: var(--bg); }
.data-table button.danger {
color: var(--danger); border-color: #FECACA;
background: #FEF2F2;
}
.data-table button.danger:hover { background: var(--danger); color: white; }
/* Aligned per-row action buttons (quotes lists) — one tidy line, never wraps */
.row-actions {
display: flex; align-items: center; justify-content: flex-end;
gap: 4px; flex-wrap: nowrap; white-space: nowrap;
}
.row-actions button { margin-right: 0; padding: 5px 9px; }
/* Icon-only action buttons (SVG logos) — compact so the table fits without horizontal scroll */
.row-actions-icon button { padding: 5px 6px; min-width: 30px; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.row-actions-icon button svg { width: 16px; height: 16px; display: block; }
.row-actions-icon .act-dot { position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: #E07B3E; }
/* ── TOAST ─────────────────────────────────────────────────────── */
.toast {
position: fixed; bottom: 24px; right: 24px;
background: var(--navy-2); color: white;
padding: 12px 20px; border-radius: 10px;
font-size: 13.5px; font-weight: 500;
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
z-index: 100;
}
/* ── KPI CARDS (dashboard) ─────────────────────────────────────── */
.kpi-row {
display: grid; grid-template-columns: repeat(5, 1fr);
gap: 10px; margin-bottom: 14px;
}
.kpi-card {
background: white; border: 1px solid var(--border-soft); border-radius: 10px;
padding: 10px 13px; display: flex; align-items: center; gap: 10px;
box-shadow: var(--shadow-card);
}
.kpi-icon {
width: 34px; height: 34px; border-radius: 9px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.kpi-text { flex: 1; min-width: 0; }
.kpi-value {
font-size: 18px; font-weight: 700; color: var(--navy-2);
line-height: 1.15;
}
.kpi-label { font-size: 11px; color: var(--muted); font-weight: 500; margin-top: 1px; }
/* ── PIPELINE STRIP (dashboard) ────────────────────────────────── */
.pipeline-strip {
display: grid; grid-template-columns: repeat(7, 1fr);
gap: 10px;
}
.pipe-stage {
background: #fafbfc; border-radius: 10px;
padding: 14px 12px; transition: all 0.15s;
border: 1px solid var(--border-soft);
}
.pipe-stage:hover { background: white; box-shadow: var(--shadow-card); transform: translateY(-2px); }
.pipe-stage-bar { height: 3px; border-radius: 2px; margin-bottom: 10px; }
.pipe-stage-name { font-size: 12px; font-weight: 600; color: var(--navy-2); }
.pipe-stage-count { font-size: 11px; color: var(--muted); margin-top: 2px; }
.pipe-stage-value { font-size: 14px; font-weight: 700; color: var(--text); margin-top: 6px; font-variant-numeric: tabular-nums; }
/* ── ACTION ROWS (overdue, upcoming) ───────────────────────────── */
.action-row {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 0; border-bottom: 1px solid var(--border-soft);
cursor: pointer;
}
.action-row:hover { background: #fafbfc; }
.action-row:last-child { border-bottom: none; }
.action-name { font-size: 13.5px; font-weight: 600; color: var(--navy-2); }
.action-note { font-size: 12px; color: var(--muted); margin-top: 2px; }
.action-date { font-size: 12.5px; font-weight: 600; color: var(--text); padding: 4px 10px; background: #fafbfc; border-radius: 6px; }
.action-date.overdue, .overdue { color: var(--danger); background: #FEF2F2 !important; }
/* ── KANBAN ────────────────────────────────────────────────────── */
.kanban {
display: grid; grid-template-columns: repeat(7, minmax(240px, 1fr));
gap: 14px;
overflow-x: auto;
overflow-y: hidden;
height: calc(100vh - 200px);
padding-bottom: 12px;
}
.kanban-col {
background: #F1F3F6;
border-radius: 10px;
padding: 0;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.kanban-col-header {
position: sticky; top: 0; z-index: 2;
background: #F1F3F6;
padding: 14px 12px 10px;
border-bottom: 1px solid #E2E8F0;
border-radius: 10px 10px 0 0;
}
.kanban-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.kanban-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--navy-2); }
.kanban-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.kanban-count { background: white; color: var(--text); padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.kanban-value { font-size: 11px; color: var(--muted); }
.kanban-cards {
display: flex; flex-direction: column; gap: 8px;
padding: 10px 12px 14px;
overflow-y: auto;
flex: 1;
min-height: 0;
}
.kanban-card {
background: white; border-radius: 8px; padding: 12px;
cursor: pointer; transition: all 0.15s;
border: 1px solid var(--border-soft);
}
.kanban-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.kan-card-name { font-size: 13px; font-weight: 600; color: var(--navy-2); margin-bottom: 4px; }
.kan-card-meta { font-size: 11.5px; color: var(--muted); margin-bottom: 8px; }
.kan-card-foot { display: flex; justify-content: space-between; font-size: 11px; padding-top: 6px; border-top: 1px solid var(--border-soft); }
/* Implementation pipeline board (6 status columns, draggable cards) */
.impl-kanban { grid-template-columns: repeat(6, minmax(250px, 1fr)); height: calc(100vh - 260px); }
.impl-kanban .kanban-card.impl-kcard { display: flex; flex-direction: column; gap: 4px; padding: 7px 9px; cursor: grab; }
.impl-kanban .kanban-card.impl-kcard:active { cursor: grabbing; }
.impl-kanban .kanban-card.impl-kcard:hover { transform: none; }
.impl-kanban .kan-card-meta { margin-bottom: 0; font-size: 11px; }
.impl-kc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.impl-kc-head .kan-card-name { margin: 0; font-size: 12px; line-height: 1.2; }
.impl-type.sm { flex: 0 0 auto; color: #fff; font-size: 11px; border-radius: 6px; padding: 1px 6px; line-height: 1.6; }
.impl-krow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.impl-krow select { width: 100%; min-width: 0; box-sizing: border-box; font-size: 11px; padding: 3px 6px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; cursor: pointer; }
/* START | END side by side; running-day badge spans its own row below */
.impl-kdemo { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; align-items: end; }
.impl-kdemo label, .impl-ksched { display: flex; flex-direction: column; gap: 1px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; color: #94a3b8; margin: 0; min-width: 0; }
.impl-kdemo input, .impl-ksched input { width: 100%; box-sizing: border-box; font-size: 11px; padding: 3px 5px; border: 1px solid #e5e7eb; border-radius: 6px; }
.impl-days { grid-column: 1 / -1; justify-self: start; background: #ecfdf5; color: #047857; font-weight: 800; font-size: 11px; border-radius: 6px; padding: 1px 8px; white-space: nowrap; }
.impl-klogsel { width: 100%; box-sizing: border-box; font-size: 11.5px; padding: 4px 7px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; color: #0f766e; font-weight: 600; cursor: pointer; }
.impl-knote { width: 100%; box-sizing: border-box; font-size: 11.5px; padding: 4px 7px; border: 1px solid #e5e7eb; border-radius: 6px; }
.impl-knote-hist { font-size: 11px; color: #475569; background: #f8fafc; border-radius: 6px; padding: 5px 7px; white-space: pre-wrap; max-height: 66px; overflow: auto; }
/* Card: latest log line only + "view all" affordance */
.impl-klatest { font-size: 11px; color: #475569; background: #f8fafc; border-radius: 6px; padding: 4px 7px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Next-action due / overdue badge on an implementation card */
.impl-due { align-self: flex-start; font-size: 11px; font-weight: 800; border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.impl-due-over { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.impl-due-today { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.impl-due-soon { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.impl-due-future { background: #f1f5f9; color: #64748b; }
.impl-due-none { background: #f8fafc; color: #94a3b8; border: 1px dashed #e2e8f0; }
.impl-kmore { align-self: flex-start; border: 0; background: transparent; color: #0f766e; font-size: 11px; font-weight: 700; padding: 1px 0; cursor: pointer; }
.impl-kmore:hover { text-decoration: underline; }
/* Request detail popup */
.impl-dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; font-size: 13px; color: #0f172a; }
.impl-dgrid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.impl-dk { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #94a3b8; letter-spacing: .02em; }
.impl-dlog { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; max-height: 40vh; overflow-y: auto; }
.impl-dlog-line { font-size: 12.5px; color: #334155; background: #f8fafc; border-left: 3px solid #cbd5e1; border-radius: 0 6px 6px 0; padding: 6px 9px; white-space: pre-wrap; }
.impl-kc-foot { display: flex; align-items: center; gap: 6px; padding-top: 2px; }
/* Minimal card: show ONLY customer name + responsible engineer + dates/due badge.
Priority, update box, note, latest-log and footer live in the detail popup (click the card). */
.impl-kanban .kan-card-meta { display: none; }
.impl-krow { grid-template-columns: 1fr; }
.impl-krow select[title="Priority"] { display: none; }
.impl-klogsel, .impl-knote, .impl-klatest, .impl-kmore, .impl-kc-foot { display: none; }
/* Implementation Completed column — "show older" toggle */
.impl-done-more { width: 100%; text-align: left; border: 1px dashed #cbd5e1; background: #f8fafc; color: #475569; font-size: 11.5px; font-weight: 600; padding: 6px 9px; border-radius: 8px; cursor: pointer; margin-bottom: 6px; }
.impl-done-more:hover { background: #eef2f7; border-color: #94a3b8; }
/* Blackout (stealth recording) mode */
.rec-blackout-btn { border: 0; background: #1e293b; color: #fff; font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 8px; cursor: pointer; }
.rec-blackout-btn:hover { background: #0f172a; }
.rec-blackout { position: fixed; inset: 0; background: #000; z-index: 100000; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.rbo-hint { text-align: center; color: #3a3a3a; opacity: .6; font-size: 15px; font-weight: 600; letter-spacing: .04em; user-select: none; }
.rbo-sub { font-size: 11px; color: #2a2a2a; margin-top: 8px; font-weight: 400; letter-spacing: 0; }
.rbo-dot { display: inline-block; width: 9px; height: 9px; border-radius: 999px; background: #7f1d1d; margin-right: 8px; vertical-align: middle; animation: rbo-pulse 2.4s ease-in-out infinite; }
.rbo-dot-paused { background: #78350f; }
@keyframes rbo-pulse { 0%,100% { opacity: .35 } 50% { opacity: .8 } }
/* Recording waveform + integrated player */
.rec-player { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.rec-play { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 999px; border: 0; background: #E07B3E; color: #fff; font-size: 16px; cursor: pointer; line-height: 1; }
.rec-play:hover { background: #d16a2a; }
.rec-mid { flex: 1; min-width: 0; }
.wf-canvas { width: 100%; height: 64px; display: block; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; cursor: pointer; }
.wf-legend { font-size: 11px; color: #64748b; margin-top: 4px; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.wf-k { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: 3px; vertical-align: middle; }
.wf-k.wf-speech { background: #9aa6b6; }
.wf-k.wf-silence { background: #eef2f7; border: 1px solid #e2e8f0; }
.wf-k.wf-played { background: #E07B3E; }
/* Sortable table headers */
.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.th-sort:hover { background: #eef2f7; }
/* BOM reference images & documents */
.bom-docs { margin-top: 8px; padding-top: 14px; border-top: 1px solid #eef2f7; }
.bom-docs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bom-doc-upload { cursor: pointer; }
.bom-doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.bom-doc { position: relative; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; background: #fff; }
.bom-doc-thumb { display: flex; align-items: center; justify-content: center; height: 96px; background: #f8fafc; text-decoration: none; }
.bom-doc-thumb img { width: 100%; height: 96px; object-fit: cover; display: block; }
.bom-doc-ic { font-size: 40px; }
.bom-doc-name { font-size: 11.5px; color: #475569; padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid #eef2f7; }
.bom-doc-del { position: absolute; top: 5px; right: 5px; z-index: 2; border: 0; background: rgba(15,23,42,.6); color: #fff; width: 20px; height: 20px; border-radius: 999px; cursor: pointer; font-size: 12px; line-height: 1; }
.bom-doc-del:hover { background: #dc2626; }
/* Per-customer "Shared with" view-only multi-select dropdown */
.sw-combo { position: relative; }
.sw-control { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-height: 40px; padding: 6px 30px 6px 10px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; cursor: pointer; position: relative; }
.sw-control:hover { border-color: #cbd5e1; }
.sw-placeholder { color: #94a3b8; font-size: 13px; }
.sw-caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 10px; }
.sw-pill { display: inline-flex; align-items: center; gap: 4px; background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; border-radius: 999px; padding: 2px 4px 2px 9px; font-size: 12px; font-weight: 600; }
.sw-pill button { border: 0; background: transparent; color: #1d4ed8; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 3px; border-radius: 999px; }
.sw-pill button:hover { background: #dbeafe; }
.sw-dropdown { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; max-height: 220px; overflow-y: auto; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 8px 24px rgba(15,23,42,.14); padding: 4px; }
.sw-optrow { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; font-size: 13px; color: #334155; cursor: pointer; }
.sw-optrow:hover { background: #f1f5f9; }
.sw-optrow input { width: auto; margin: 0; }
.sw-optrow.sw-active { background: #eff6ff; font-weight: 600; color: #1d4ed8; }
.sw-box { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1.5px solid #cbd5e1; border-radius: 4px; font-size: 11px; font-weight: 800; color: #fff; flex: 0 0 auto; }
.sw-box.on { background: #2563eb; border-color: #2563eb; }
.sw-x { cursor: pointer; color: #1d4ed8; font-size: 14px; line-height: 1; padding: 0 3px; border-radius: 999px; }
.sw-x:hover { background: #dbeafe; }
.sw-single { font-size: 13px; font-weight: 600; color: #0f172a; }
/* Customer-view renewal status card */
.renewal-status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.renewal-status-item { border: 1px solid #e2e8f0; border-left: 4px solid #94a3b8; border-radius: 8px; padding: 10px 12px; background: #fff; }
.renewal-status-item.lvl-expired { border-left-color: #dc2626; background: #fef2f2; }
.renewal-status-item.lvl-urgent { border-left-color: #ea580c; background: #fff7ed; }
.renewal-status-item.lvl-soon { border-left-color: #d97706; background: #fffbeb; }
.renewal-status-item.lvl-ok { border-left-color: #059669; background: #f0fdf4; }
.renewal-status-item .rs-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.renewal-status-item .rs-kind { font-weight: 700; font-size: 13px; color: #0f172a; }
.renewal-status-item .rs-badge { font-size: 9.5px; font-weight: 800; letter-spacing: .03em; padding: 2px 7px; border-radius: 999px; text-transform: uppercase; }
.rs-badge.lvl-expired { background: #dc2626; color: #fff; }
.rs-badge.lvl-urgent { background: #ea580c; color: #fff; }
.rs-badge.lvl-soon { background: #f59e0b; color: #fff; }
.rs-badge.lvl-ok { background: #059669; color: #fff; }
.renewal-status-item .rs-date { font-size: 15px; font-weight: 800; color: #0f172a; margin-top: 6px; font-variant-numeric: tabular-nums; }
.renewal-status-item .rs-days { font-size: 11.5px; color: #64748b; margin-top: 1px; }
.renewal-status-item .rs-actions { display: flex; gap: 6px; margin-top: 8px; }
/* Customer payment reconciliation table */
.recon-card { border-left: 4px solid #0ea5e9; }
.recon-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.recon-pill { font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.recon-pill strong { margin-left: 4px; font-weight: 800; }
.recon-pill.paid { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.recon-pill.pending { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.recon-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 12px; }
.recon-stat { border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; background: #fff; border-top: 3px solid #94a3b8; }
.recon-stat .rst-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #64748b; }
.recon-stat .rst-value { font-size: 20px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; color: #0f172a; }
.recon-stat.total { border-top-color: #2563eb; background: #eff6ff; }
.recon-stat.paid { border-top-color: #059669; background: #f0fdf4; }
.recon-stat.paid .rst-value { color: #047857; }
.recon-stat.due { border-top-color: #dc2626; background: #fef2f2; }
.recon-stat.due .rst-value { color: #b91c1c; }
.recon-stat.upcoming { border-top-color: #d97706; background: #fffbeb; }
.recon-stat.upcoming .rst-value { color: #b45309; }
/* Single page scroll only — table fits the card width, no inner scroll box */
.recon-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #eef2f7; border-radius: 10px; }
.recon-table { font-variant-numeric: tabular-nums; width: 100%; margin: 0; }
.recon-table td, .recon-table th { vertical-align: top; }
.recon-table tbody td { padding-top: 12px; padding-bottom: 12px; }
.recon-table tfoot .recon-total td { font-weight: 800; border-top: 2px solid #e2e8f0; padding-top: 10px; background: #f8fafc; vertical-align: middle; }
.recon-table .recon-poval { width: 100px; }
/* Freeze the Update (action) column to the right so the button is always reachable without scrolling */
.recon-table .recon-sticky-r { position: sticky; right: 0; background: #fff; box-shadow: -8px 0 8px -8px rgba(15,23,42,.18); z-index: 2; }
.recon-table thead .recon-sticky-r { background: #f8fafc; z-index: 3; }
.recon-table tfoot .recon-sticky-r { background: #f8fafc; }
/* Keep the milestone list compact inside the reconciliation table */
.recon-table .pf-ms-list { width: auto; max-width: 220px; min-width: 150px; }
.recon-table .pf-ms-row { font-size: 11px; }
.recon-note { font-size: 11px; color: #64748b; font-weight: 400; margin-top: 2px; max-width: 260px; white-space: normal; line-height: 1.3; }
.recon-poval { width: 110px; text-align: right; border: 1px solid #e5e7eb; border-radius: 6px; padding: 4px 6px; font-size: 13px; background: #fff; }
.recon-poval:hover { border-color: #cbd5e1; }
.recon-poval:focus { outline: 2px solid #bae6fd; border-color: #0ea5e9; }
/* DC line-item numeric inputs: drop the spinner arrows so all digits are visible in the narrow cells */
.dc-num::-webkit-outer-spin-button, .dc-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dc-num { -moz-appearance: textfield; appearance: textfield; }
.impl-fld-label { display: block; font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase; margin-bottom: 5px; }
.impl-fld-input { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 13px; background: #fff; }
/* Wide tables scroll inside their own container so the page body never scrolls sideways */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.table-scroll > table { margin: 0; }
/* "Different solution" flag on the quote header (a plain checkbox, no native dropdown) */
.sep-deal-flag { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; font-size: 12.5px; color: #475569; cursor: pointer; align-self: flex-end; padding-bottom: 8px; white-space: nowrap; }
.sep-deal-flag input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: #E07B3E; }
.sep-deal-flag em { font-style: normal; color: #94a3b8; font-size: 11px; }
/* Different-solution tag on a quote row */
.sol-tag { display: inline-block; margin-top: 3px; font-size: 10.5px; font-weight: 600; color: #6d28d9; background: #f5f3ff; border: 1px solid #ede9fe; border-radius: 6px; padding: 1px 6px; }
.quote-for { margin-top: 2px; font-size: 11.5px; font-weight: 500; color: #64748b; line-height: 1.3; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kan-card-quotes { color: var(--muted); }
.kan-card-val { font-weight: 600; color: var(--text); }
.kan-card-action {
margin-top: 6px; padding: 6px 8px;
background: #FFF8F0; color: var(--orange-dark); border-radius: 6px;
font-size: 11px; font-weight: 500;
}
.kanban-empty { color: var(--muted); font-size: 12px; text-align: center; padding: 12px; font-style: italic; }
/* ── TAG PILLS ─────────────────────────────────────────────────── */
.tag-pill {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.2px;
margin-right: 4px;
margin-bottom: 2px;
white-space: nowrap;
}
.tag-pill.tag-intec {
background: linear-gradient(135deg, #FF6B35, #F7931E);
color: white;
box-shadow: 0 1px 3px rgba(247, 147, 30, 0.4);
}
.tag-pill.tag-default { background: #E0E7FF; color: #3730A3; }
/* Segment pills */
.seg-pill {
display: inline-block; padding: 2px 9px; border-radius: 6px;
font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px;
margin-right: 4px;
}
.seg-pill.seg-sme { background: #DBEAFE; color: #1E40AF; }
.seg-pill.seg-ent { background: #DCFCE7; color: #166534; border: 1px solid #86EFAC; }
.seg-pill.seg-tbc { background: #FEF3C7; color: #92400E; border: 1px dashed #FCD34D; }
/* SME subscription picker (machine count dropdown) */
.sub-picker-control {
display: flex; align-items: center; gap: 12px;
background: #FFF7ED; padding: 12px 16px;
border-radius: 10px; border: 1px solid #FED7AA;
}
.sub-picker-control label {
margin: 0; font-size: 13px; font-weight: 600; color: var(--navy-2);
}
.machine-count-select {
background: white;
border: 1px solid #CBD5E1; border-radius: 8px;
padding: 8px 14px; font-size: 14px; font-weight: 700;
color: var(--orange-dark); cursor: pointer; min-width: 160px;
}
.machine-count-select:focus { outline: none; border-color: var(--orange-dark); box-shadow: 0 0 0 3px rgba(247,147,30,0.15); }
.package-card.large {
max-width: 460px; margin-left: auto; margin-right: auto;
border: 2px solid var(--orange-dark);
}
/* ── CALL / WHATSAPP / OPEN BUTTONS ────────────────────────────── */
.contact-btn {
display: inline-flex; align-items: center; gap: 5px;
padding: 6px 12px; border-radius: 8px;
font-size: 12.5px; font-weight: 700;
text-decoration: none; cursor: pointer;
border: 1px solid transparent;
transition: transform 0.1s, box-shadow 0.15s;
background: white;
white-space: nowrap;
}
.contact-btn:hover:not(.disabled) {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.contact-btn.call { background: #DBEAFE; color: #1E40AF; border-color: #93C5FD; }
.contact-btn.whatsapp{ background: #DCFCE7; color: #166534; border-color: #86EFAC; }
.contact-btn.email { background: #FCE7F3; color: #9D174D; border-color: #F9A8D4; }
.contact-btn.schedule{ background: #FFF7ED; color: #C2410C; border-color: #FDBA74; }
/* ── BROADCASTS ────────────────────────────────────────────────── */
.bcast-templates {
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
}
.bcast-tpl-card {
background: white; border: 1.5px solid var(--border-soft);
border-radius: 12px; padding: 16px;
cursor: pointer; text-align: left;
transition: all 0.15s;
display: flex; flex-direction: column;
gap: 10px;
min-height: 92px;
position: relative;
}
.bcast-tpl-card:hover {
border-color: var(--orange-dark);
transform: translateY(-2px);
box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.bcast-tpl-card.active {
border-color: var(--orange-dark);
background: linear-gradient(135deg, #FFF7ED 0%, #FFFBEB 100%);
box-shadow: 0 2px 12px rgba(247, 147, 30, 0.15);
}
.bcast-tpl-card.active::before {
content: '✓';
position: absolute; top: 10px; right: 12px;
background: var(--orange-dark); color: white;
width: 22px; height: 22px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700;
}
.bcast-tpl-name {
font-size: 14.5px; font-weight: 700; color: var(--navy-2);
line-height: 1.3;
}
.bcast-tpl-ch-row {
display: flex; gap: 6px; flex-wrap: wrap;
margin-top: auto;
}
.bcast-ch-pill {
display: inline-block; padding: 3px 10px;
border-radius: 999px;
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.3px;
}
.bcast-ch-pill.ch-email { background: #DBEAFE; color: #1E40AF; }
.bcast-ch-pill.ch-wa { background: #DCFCE7; color: #166534; }
.bcast-tpl-editor {
background: #FAFBFC; border: 1px solid var(--border-soft);
border-radius: 10px; padding: 14px;
margin-bottom: 14px;
}
/* Discovery multiselect (checkbox grid) */
.multi-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 6px; margin-top: 4px;
}
.multi-chk {
display: flex !important; flex-direction: row !important;
align-items: center !important; gap: 8px;
padding: 6px 10px; background: white;
border: 1px solid var(--border-soft); border-radius: 6px;
font-size: 12.5px; color: var(--text); cursor: pointer;
text-transform: none !important;
font-weight: 500 !important;
margin: 0 !important;
transition: all 0.15s;
}
.multi-chk:hover { border-color: var(--orange-dark); background: #FFF7ED; }
.multi-chk input[type="checkbox"] { margin: 0; flex-shrink: 0; }
.multi-chk input[type="checkbox"]:checked + span { font-weight: 700; color: var(--orange-dark); }
/* Role pills */
.role-pill {
display: inline-block; padding: 3px 10px; border-radius: 999px;
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.3px;
}
.role-pill.role-admin { background: #FCE7F3; color: #9D174D; }
.role-pill.role-manager { background: #FEF3C7; color: #92400E; }
.role-pill.role-sales { background: #DBEAFE; color: #1E40AF; }
.role-pill.role-ceo { background: #EDE9FE; color: #5B21B6; }
/* Quote tracking */
.view-pill {
display: inline-block; padding: 3px 9px; border-radius: 999px;
background: #DBEAFE; color: #1E40AF;
font-size: 11px; font-weight: 700;
}
/* Email-open pill (HubSpot-style) — sits next to the page-view pill */
.open-pill {
display: inline-block; margin-left: 4px; padding: 3px 9px; border-radius: 999px;
background: #DCFCE7; color: #15803D; font-size: 11px; font-weight: 700; cursor: help;
}
.open-pill.open-pill-zero { background: #f1f5f9; color: #94a3b8; }
.open-pill.open-pill-click { cursor: pointer; }
.open-pill.open-pill-click:hover { filter: brightness(0.96); }
/* Travel-voucher paid/pending/draft summary — compact pills on the tabs row */
.voucher-stats { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vstat { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 11px; border-radius: 999px; border: 1px solid #e2e8f0; background: #f8fafc; white-space: nowrap; }
.vstat-paid { background: #f0fdf4; border-color: #bbf7d0; }
.vstat-pending { background: #fffbeb; border-color: #fde68a; }
.vstat-draft { background: #f1f5f9; border-color: #e2e8f0; }
.vstat-total { background: #eff6ff; border-color: #bfdbfe; }
.vstat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #64748b; }
.vstat-num { font-size: 15px; font-weight: 800; color: #0f172a; }
.vstat-paid .vstat-num { color: #15803d; }
.vstat-pending .vstat-num { color: #b45309; }
.vstat-draft .vstat-num { color: #475569; }
.vstat-total .vstat-num { color: #1d4ed8; }
.vstat-sub { font-size: 11.5px; font-weight: 600; color: #94a3b8; }
/* Audit log */
.audit-entity {
background: #F1F5F9; padding: 2px 8px; border-radius: 6px;
font-size: 11px; font-weight: 600; color: var(--navy-2);
text-transform: uppercase; letter-spacing: 0.3px;
}
.audit-action {
padding: 2px 8px; border-radius: 6px;
font-size: 11px; font-weight: 700; text-transform: uppercase;
}
.audit-action.act-upsert { background: #DCFCE7; color: #166534; }
.audit-action.act-delete { background: #FEE2E2; color: #B91C1C; }
/* POs */
.pos-card { border-left: 3px solid #10B981; }
.po-block {
background: #F8FAFC; border: 1px solid var(--border-soft);
border-radius: 10px; padding: 14px; margin-bottom: 10px;
}
.po-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.po-meta { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.po-status {
display: inline-block; padding: 2px 10px; border-radius: 999px;
font-size: 10.5px; font-weight: 700; margin-left: 6px;
text-transform: uppercase; letter-spacing: 0.3px;
}
.po-status.st-open { background: #DBEAFE; color: #1E40AF; }
.po-status.st-partial { background: #FEF3C7; color: #92400E; }
.po-status.st-completed { background: #DCFCE7; color: #166534; }
.po-status.st-cancelled { background: #F1F5F9; color: #64748B; }
.po-status.st-pending { background: #FED7AA; color: #9A3412; }
.po-status.st-received { background: #DCFCE7; color: #166534; }
.po-status.st-overdue { background: #FEE2E2; color: #B91C1C; }
.po-status.st-waived { background: #F1F5F9; color: #64748B; }
.payments-mini { background: white; border-radius: 6px; padding: 8px; }
.bcast-count {
margin-top: 14px; padding: 12px 16px;
background: #ECFDF5; border: 1px solid #6EE7B7;
border-radius: 8px; font-size: 14px; color: #065F46;
}
.bcast-count strong {
font-size: 18px; color: #065F46;
}
.bcast-preview {
margin-top: 14px; padding: 14px;
background: #F8FAFC; border-left: 4px solid var(--orange-dark);
border-radius: 6px;
}
.bcast-preview-block {
margin-top: 8px; padding: 12px;
background: white; border: 1px solid var(--border-soft);
border-radius: 6px; font-size: 12.5px;
}
.bcast-preview-block pre {
margin: 8px 0 0; padding: 0;
font-family: inherit; white-space: pre-wrap; word-wrap: break-word;
color: var(--text); font-size: 12.5px;
}
.sent-row td { background: #ECFDF5; }
/* Template editor */
.tpl-placeholders {
background: #F0F9FF; border: 1px solid #BAE6FD; border-radius: 8px;
padding: 10px 14px; font-size: 12px; color: #1E3A8A;
margin-bottom: 16px;
}
.tpl-placeholders code {
background: white; border: 1px solid #BAE6FD; border-radius: 4px;
padding: 2px 6px; font-size: 11.5px; margin: 0 3px;
color: #1D4ED8; font-family: ui-monospace, monospace;
}
.tpl-sub {
margin: 18px 0 8px;
font-size: 13px; color: var(--navy-2); font-weight: 700;
letter-spacing: 0.3px; text-transform: uppercase;
padding-bottom: 4px; border-bottom: 1px dashed var(--border-soft);
}
/* Documents (customer attachments) */
.documents-card { border-left: 3px solid #6366F1; }
.doc-cat {
background: #EEF2FF; color: #4338CA;
font-size: 11px; font-weight: 700;
padding: 3px 9px; border-radius: 999px;
white-space: nowrap;
}
/* Customer 360 Timeline */
.timeline-card { border-left: 3px solid #F59E0B; }
.timeline { position: relative; padding-left: 28px; margin-top: 10px; }
.timeline::before {
content: ''; position: absolute; left: 12px; top: 4px; bottom: 4px;
width: 2px; background: #E2E8F0;
}
.timeline-event {
position: relative; padding: 8px 0 12px 12px;
}
.tl-marker {
position: absolute; left: -28px; top: 4px;
width: 30px; height: 30px;
background: white; border: 2px solid #E2E8F0;
border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-size: 14px;
}
.timeline-event.tl-quote .tl-marker { border-color: #F59E0B; background: #FEF3C7; }
.timeline-event.tl-document .tl-marker { border-color: #6366F1; background: #EEF2FF; }
.timeline-event.tl-activity .tl-marker { border-color: #10B981; background: #ECFDF5; }
.timeline-event.tl-system .tl-marker { border-color: #94A3B8; background: #F1F5F9; }
.timeline-event.tl-edit .tl-marker { border-color: #8B5CF6; background: #F5F3FF; }
.timeline-event.tl-danger .tl-marker { border-color: #EF4444; background: #FEF2F2; }
/* User Activity — expanded row: time-per-tab list + what-they-did timeline */
.ua-expand { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .ua-expand { grid-template-columns: 1fr; } }
.ua-col-title { font-size: 12px; font-weight: 700; color: var(--navy-2); margin-bottom: 8px; }
.ua-page-list { display: flex; flex-direction: column; gap: 2px; }
.ua-page-row {
display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
padding: 7px 12px; background: white; border: 1px solid var(--border-soft); border-radius: 8px;
}
.ua-page-name { font-size: 12.5px; color: var(--text); }
.ua-page-time { font-size: 12.5px; font-weight: 700; color: var(--navy-2); font-variant-numeric: tabular-nums; text-align: right; }
.ua-page-visits { font-size: 11px; color: var(--muted); white-space: nowrap; min-width: 56px; text-align: right; }
.tl-body {
background: white; border: 1px solid var(--border-soft);
border-radius: 8px; padding: 10px 12px;
}
.tl-head {
display: flex; justify-content: space-between; align-items: center;
gap: 8px; margin-bottom: 2px;
}
.tl-head strong { font-size: 13px; color: var(--navy-2); }
.tl-text {
font-size: 12.5px; color: var(--text);
white-space: pre-line; /* preserve \n line breaks from activity notes */
line-height: 1.55;
}
.tl-link {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 10px; margin: 4px 2px 0 0;
background: #EEF2FF; color: #4338CA;
border: 1px solid #C7D2FE; border-radius: 999px;
font-size: 11.5px; font-weight: 600;
text-decoration: none; transition: background 0.12s ease;
}
.tl-link:hover { background: #C7D2FE; }
.tl-link-map { background: #FFEDD5; color: #9A3412; border-color: #FDBA74; }
.tl-link-map:hover { background: #FDBA74; }
.link-customer {
color: #2563eb; text-decoration: none; font-weight: 600;
cursor: pointer; transition: color 0.12s ease;
}
.link-customer:hover { text-decoration: underline; color: #1d4ed8; }
/* Tab bar (used by Scratchpads) */
.tab-btn {
background: #f1f5f9; border: 1px solid #e2e8f0; color: #475569;
padding: 8px 14px; border-radius: 8px; font-weight: 600; font-size: 13px;
cursor: pointer; transition: all 0.12s ease;
}
.tab-btn:hover { background: #e2e8f0; color: #1e293b; }
.tab-btn.active { background: #E07B3E; color: white; border-color: #E07B3E; }
/* Scratchpad — header bar (rename + actions) */
.scratch-headbar {
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
padding: 10px 14px; background: #fafbfc; border-bottom: 1px solid #e2e8f0;
}
.scratch-name-input {
flex: 1; min-width: 240px;
font-weight: 700; font-size: 15px;
padding: 8px 12px;
border: 1px solid #cbd5e1; border-radius: 6px;
background: white; outline: none;
transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.scratch-name-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
/* Scratchpad — format toolbar (Excel-style B/I/U/colour/align/size) */
.scratch-format-bar {
display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
padding: 6px 10px;
background: #f1f5f9; border-bottom: 1px solid #e2e8f0;
}
.fmt-btn {
background: white; border: 1px solid #cbd5e1; border-radius: 5px;
padding: 4px 8px; font-size: 13px; cursor: pointer; color: #334155;
min-width: 32px; height: 30px;
display: inline-flex; align-items: center; justify-content: center; gap: 4px;
transition: all 0.1s ease; user-select: none;
}
.fmt-btn:hover { background: #e2e8f0; border-color: #94a3b8; }
.fmt-btn.active { background: #2563eb; color: white; border-color: #2563eb; }
.fmt-btn.active:hover { background: #1d4ed8; }
.fmt-color-btn { position: relative; padding: 4px 6px; overflow: hidden; }
.fmt-color-btn input[type="color"] {
position: absolute; inset: 0; opacity: 0; cursor: pointer; border: none; padding: 0;
}
.fmt-sep { width: 1px; height: 22px; background: #cbd5e1; margin: 0 4px; }
.fmt-select {
background: white; border: 1px solid #cbd5e1; border-radius: 5px;
padding: 4px 6px; font-size: 12px; height: 30px; cursor: pointer; color: #334155;
}
.fmt-hint {
margin-left: auto; font-size: 11.5px; color: #64748b; font-weight: 600;
padding: 0 8px;
}
.scratch-foot {
padding: 6px 14px; background: #fafbfc; border-top: 1px solid #e2e8f0;
font-size: 11.5px; color: #64748b;
}
.scratch-grid-wrap {
overflow: auto; max-height: 74vh;
border-bottom: 1px solid #e5e7eb;
}
/* Scratchpad grid (Excel-style) */
.scratch-grid {
border-collapse: collapse; font-size: 13px;
table-layout: fixed; min-width: 100%;
}
.scratch-grid th, .scratch-grid td {
border: 1px solid #e5e7eb; padding: 0;
}
.scratch-grid th.colhead {
background: #f8fafc; color: #475569; font-weight: 600; text-align: center;
min-width: 80px; padding: 4px 6px; position: sticky; top: 0; z-index: 2;
}
.scratch-grid th.rowhead {
background: #f8fafc; color: #475569; font-weight: 600; text-align: center;
width: 40px; padding: 4px 0; position: sticky; left: 0; z-index: 1;
}
.scratch-grid th.corner { position: sticky; top: 0; left: 0; z-index: 3; background: #f1f5f9; }
.scratch-grid td {
background: #ffffff; min-width: 80px; height: 24px; padding: 4px 6px;
outline: none; word-break: break-word; vertical-align: top;
}
.scratch-grid td:focus { box-shadow: inset 0 0 0 2px #2563eb; }
.scratch-grid td.sel-range {
background: rgba(37, 99, 235, 0.12);
box-shadow: inset 0 0 0 1px #93c5fd;
}
.scratch-help-bar {
padding: 5px 10px; background: #ecfdf5; border-bottom: 1px solid #bbf7d0;
font-size: 11.5px; color: #065f46;
}
.scratch-help-bar code {
background: white; border: 1px solid #d1fae5; border-radius: 4px;
padding: 1px 5px; font-size: 11px; color: #047857;
}
/* Team Users — job title under the name (display only, role enum drives permissions) */
.user-title {
font-size: 11.5px;
color: #64748b;
font-style: italic;
margin-top: 2px;
font-weight: 500;
letter-spacing: 0.1px;
}
/* Team Performance dashboard table — visual hierarchy improvements */
.team-perf { font-size: 13px; }
.team-perf th { white-space: nowrap; padding: 10px 8px; font-size: 11.5px; letter-spacing: 0.4px; text-transform: uppercase; color: #475569; }
.team-perf td { padding: 12px 8px; }
.team-perf th.num, .team-perf td.num { text-align: right; }
.team-perf td.num { font-variant-numeric: tabular-nums; font-weight: 600; color: #1e293b; }
.team-perf .stat-zero { color: #cbd5e1; font-weight: 400; }
.team-perf .stat-won { color: #16a34a; font-weight: 700; }
.team-perf .stat-strong { color: #1e293b; font-weight: 700; }
.team-perf .stat-hot { color: #16a34a; font-weight: 700; }
.team-perf tr:hover { background: #f8fafc; }
.team-perf .user-title { display: block; }
.team-perf .role-pill { white-space: nowrap; }
.team-perf-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.team-perf tbody tr { cursor: pointer; transition: background 0.12s ease; }
.team-perf tbody tr:hover { background: #fef3c7; }
/* Rep drill-down page */
.rep-header {
display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
.rep-id { flex: 1; min-width: 240px; }
.rep-avatar {
width: 64px; height: 64px; border-radius: 50%;
color: white; font-size: 26px; font-weight: 800;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
flex-shrink: 0;
}
.rep-timeline { list-style: none; padding: 0; margin: 8px 0 0; }
.rep-timeline-item {
display: flex; gap: 14px; padding: 12px 6px;
border-bottom: 1px solid #f1f5f9; align-items: flex-start;
}
.rep-timeline-item:last-child { border-bottom: none; }
.rep-timeline-item:hover { background: #fafbfc; }
.timeline-icon {
font-size: 20px; line-height: 1; width: 32px; text-align: center;
flex-shrink: 0; padding-top: 2px;
}
.timeline-body { flex: 1; min-width: 0; }
.timeline-date {
font-size: 11px; color: #64748b; font-weight: 600;
letter-spacing: 0.3px; text-transform: uppercase;
margin-bottom: 2px;
}
.rep-timeline-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.rep-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .rep-twocol { grid-template-columns: 1fr; } }
/* Compact Stage & Lifecycle card */
.lifecycle-compact .lifecycle-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 10px 14px; margin-top: 8px;
}
.lifecycle-compact .lifecycle-grid label {
display: block; font-size: 12px; font-weight: 600; color: #475569;
}
.lifecycle-compact .lifecycle-grid .kv-val {
display: block; padding: 8px 10px; background: #f8fafc;
border: 1px solid #e5e7eb; border-radius: 6px; color: #1e293b;
font-weight: 600; margin-top: 2px;
}
.lifecycle-compact hr { display: none; }
.lifecycle-compact .priority-buttons .pri-btn { padding: 6px 10px; font-size: 12px; }
/* Collapsible (used for Contract & Renewal dates) */
.collapsible { border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.collapsible-toggle {
display: flex; gap: 8px; align-items: center; width: 100%;
padding: 10px 12px; background: #f8fafc; border: none; cursor: pointer;
font-weight: 600; color: #1e293b; font-size: 13px; text-align: left;
}
.collapsible-toggle:hover { background: #f1f5f9; }
.collapsible.open .collapsible-toggle { border-bottom: 1px solid #e5e7eb; }
.collapsible-body { padding: 12px; background: white; }
.renewal-label {
font-size: 11px; color: #64748b; font-weight: 700;
letter-spacing: 0.3px; text-transform: uppercase; margin-bottom: 6px;
}
/* Machine status pills */
.machine-status {
display: inline-block; padding: 2px 8px; border-radius: 10px;
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.3px;
}
.mstatus-active { background: #dcfce7; color: #166534; }
.mstatus-maintenance { background: #fef3c7; color: #92400e; }
.mstatus-amc-expired { background: #fee2e2; color: #991b1b; }
.mstatus-retired { background: #e5e7eb; color: #4b5563; }
.activity-total {
font-size: 14px; font-weight: 700; color: #1e293b;
line-height: 1.1;
}
.activity-mix {
font-size: 11px; color: #64748b; font-weight: 500;
margin-top: 2px; white-space: nowrap;
}
.tl-delete {
background: transparent; border: 1px solid transparent;
cursor: pointer; padding: 2px 6px; border-radius: 6px;
font-size: 13px; line-height: 1; opacity: 0.6; transition: all 0.12s ease;
}
.tl-delete:hover { opacity: 1; background: #FEE2E2; border-color: #FCA5A5; }
/* Renewals view */
.renewal-summary {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 12px; margin-bottom: 18px;
}
.renewal-stat {
background: white; padding: 9px 14px;
border-radius: 9px; border: 1px solid var(--border-soft);
text-align: center;
}
.renewal-stat strong {
font-size: 19px; font-weight: 800; display: block;
}
.renewal-stat span { font-size: 11px; color: var(--muted); margin-top: 1px; display: block; }
.renewal-stat.lvl-expired { border-left: 4px solid #DC2626; }
.renewal-stat.lvl-expired strong { color: #DC2626; }
.renewal-stat.lvl-urgent { border-left: 4px solid #F59E0B; }
.renewal-stat.lvl-urgent strong { color: #F59E0B; }
.renewal-stat.lvl-soon { border-left: 4px solid #3B82F6; }
.renewal-stat.lvl-soon strong { color: #3B82F6; }
.renewal-stat.lvl-ok { border-left: 4px solid #10B981; }
.renewal-stat.lvl-ok strong { color: #10B981; }
.renewal-pill {
display: inline-block; padding: 3px 10px; border-radius: 999px;
font-size: 11.5px; font-weight: 700;
}
.renewal-pill.lvl-expired { background: #FEE2E2; color: #B91C1C; }
.renewal-pill.lvl-urgent { background: #FED7AA; color: #9A3412; }
.renewal-pill.lvl-soon { background: #DBEAFE; color: #1E40AF; }
.renewal-pill.lvl-ok { background: #DCFCE7; color: #166534; }
tr.renewal-expired td:first-child { border-left: 3px solid #DC2626; }
tr.renewal-urgent td:first-child { border-left: 3px solid #F59E0B; }
.renewal-kind-pill {
display: inline-block; padding: 3px 9px; border-radius: 6px;
font-size: 11px; font-weight: 700;
}
.renewal-kind-pill.kind-amc { background: #FEF3C7; color: #92400E; }
.renewal-kind-pill.kind-subscription { background: #DBEAFE; color: #1E40AF; }
.renewal-block {
background: #FAFBFC; border-radius: 8px;
padding: 12px; border: 1px solid var(--border-soft);
}
@media (max-width: 700px) {
.renewal-summary { grid-template-columns: repeat(2, 1fr); }
}
/* Contacts (multi-contact per customer) */
.contacts-card { border-left: 3px solid #10B981; }
.contacts-card-top { margin-bottom: 16px; }
.contacts-card-top .contact-row { padding: 10px 12px; }
/* ── VISIT PLANNER (Action Plan → Visit Planner tab) ───────────────── */
/* True kanban: all 7 columns (Unplanned + 6 time buckets) in one horizontal
row that scrolls sideways when the screen is narrow. Each column is the
same height and scrolls its own cards independently. */
.planner-board {
display: flex;
gap: 10px;
overflow-x: auto;
padding-bottom: 8px;
scrollbar-width: thin;
scrollbar-color: #CBD5E1 transparent;
/* Each column sizes to its own content; empty buckets stay compact
instead of stretching to match the tallest. */
align-items: flex-start;
}
.planner-board::-webkit-scrollbar { height: 8px; }
.planner-board::-webkit-scrollbar-track { background: transparent; }
.planner-board::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
.planner-col {
background: #F8FAFC;
border: 2px dashed #CBD5E1;
border-radius: 10px;
padding: 10px 10px 12px;
/* All columns same fixed width — kanban look */
flex: 0 0 230px;
max-width: 230px;
/* Compact by default; grows with content; capped at 70vh + scrolls cards. */
max-height: 70vh;
min-height: 180px;
display: flex; flex-direction: column;
transition: background 0.15s ease, border-color 0.15s ease;
}
.planner-col .planner-cards {
/* Only scroll when content exceeds the column — empty columns stay short. */
min-height: 80px;
}
.planner-pool {
flex: 0 0 260px; /* Unplanned a bit wider since it's the source pool */
max-width: 260px;
}
.planner-col.drag-over {
background: #FEF3C7;
border-color: #F59E0B;
border-style: solid;
}
.planner-col h3 {
margin: 0 0 4px;
font-size: 13px; font-weight: 700;
color: var(--navy-2);
display: flex; align-items: center; gap: 6px;
flex-shrink: 0;
}
.planner-count {
display: inline-block;
background: #E2E8F0; color: var(--navy-2);
padding: 2px 10px; border-radius: 999px;
font-size: 11px; font-weight: 700;
flex-shrink: 0;
}
.planner-col > .hint {
flex-shrink: 0;
}
.planner-cards {
flex: 1 1 auto;
overflow-y: auto;
overflow-x: hidden;
/* Pretty scrollbar */
scrollbar-width: thin;
scrollbar-color: #CBD5E1 transparent;
}
.planner-cards::-webkit-scrollbar { width: 6px; }
.planner-cards::-webkit-scrollbar-track { background: transparent; }
.planner-cards::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
.planner-cards::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
.planner-pool { border-color: #94A3B8; background: #F1F5F9; }
@media (max-width: 700px) {
/* On phones, buckets get a touch narrower + snap so each takes most of the
viewport — swipe between them. */
.planner-board { scroll-snap-type: x mandatory; }
.planner-col { flex-basis: 78vw; max-width: 78vw; scroll-snap-align: start; }
.planner-pool { flex-basis: 82vw; max-width: 82vw; }
}
.bucket-backlog { border-color: #dc2626; background: #FEF2F2; border-width: 2px; }
.bucket-backlog h3 { color: #b91c1c; }
.bucket-backlog .planner-count.backlog-count {
background: #dc2626; color: white; font-weight: 700;
animation: backlog-pulse 1.6s ease-in-out infinite;
}
@keyframes backlog-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); }
50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}
.backlog-card {
border-left: 3px solid #dc2626; background: white;
}
.backlog-card .overdue-badge {
display: inline-block; background: #fee2e2; color: #b91c1c;
padding: 1px 7px; border-radius: 10px; font-size: 10px; font-weight: 700;
margin-left: 6px;
}
.backlog-card:hover { background: #FEF2F2; }
.bucket-today { border-color: #FB923C; background: #FFF7ED; }
.bucket-tomorrow { border-color: #FBBF24; background: #FEFCE8; }
.bucket-thisWeek { border-color: #34D399; background: #F0FDF4; }
.bucket-nextWeek { border-color: #60A5FA; background: #EFF6FF; }
.bucket-thisMonth{ border-color: #A78BFA; background: #F5F3FF; }
.bucket-later { border-color: #94A3B8; background: #F8FAFC; }
.planner-cards {
display: flex; flex-direction: column; gap: 6px;
margin-top: 8px;
flex: 1 1 auto;
overflow-y: auto;
overflow-x: hidden;
padding-right: 2px;
scrollbar-width: thin;
scrollbar-color: #CBD5E1 transparent;
}
.planner-card {
background: white;
border: 1px solid var(--border-soft);
border-radius: 8px;
padding: 8px 10px;
cursor: grab;
transition: all 0.15s ease;
font-size: 12.5px;
}
.planner-card:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.08); transform: translateY(-1px); }
.planner-card:active { cursor: grabbing; }
.planner-card-name { font-weight: 600; color: var(--navy-2); margin-bottom: 2px; }
.planner-card-meta {
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
font-size: 11px; color: var(--muted);
}
.planner-card-action {
font-size: 11px; color: #475569; margin-top: 3px;
font-style: italic;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.planner-pri { font-size: 13px; }
.planner-quick-assign {
margin-top: 4px; width: 100%;
font-size: 11px; padding: 3px 6px;
border: 1px solid var(--border-soft);
background: #F8FAFC; border-radius: 6px;
color: var(--muted); cursor: pointer;
}
.planner-quick-assign:hover { background: white; color: var(--navy-2); }
.planner-filters {
display: grid;
grid-template-columns: 1.5fr repeat(3, 1fr);
gap: 8px;
margin-bottom: 8px;
}
.planner-filters > input,
.planner-filters > select {
width: 100%; /* fill its grid cell only, not the whole row */
padding: 7px 10px;
font-size: 13px;
}
@media (max-width: 1100px) {
.planner-filters { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 700px) {
.planner-filters { grid-template-columns: 1fr 1fr; }
}
/* Combined toolbar: chips + view toggle + week nav, all in one tight row */
.planner-toolbar {
display: flex; gap: 10px; align-items: center;
margin-bottom: 12px; flex-wrap: wrap;
}
.planner-toolbar-chips {
display: flex; gap: 4px; align-items: center;
padding: 4px; background: #F1F5F9;
border: 1px solid var(--border-soft); border-radius: 999px;
}
.planner-toolbar .quickchip {
padding: 4px 8px; font-size: 14px; line-height: 1; min-width: 30px;
background: transparent; border: none; cursor: pointer;
border-radius: 999px;
transition: all 0.12s ease;
}
.planner-toolbar .quickchip:hover { background: white; transform: scale(1.1); }
.planner-toolbar .quickchip.active { background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.planner-toolbar .quickchip-clear { background: #FEE2E2; color: #991B1B; font-size: 11px; padding: 4px 8px; font-weight: 700; }
.planner-toolbar .quickchip-clear:hover { background: #DC2626; color: white; transform: none; }
.planner-view-toggle {
display: flex; gap: 2px; align-items: center;
padding: 4px; background: #F1F5F9;
border: 1px solid var(--border-soft); border-radius: 8px;
}
.planner-view-toggle > button {
background: transparent; border: none;
padding: 6px 12px; font-size: 12.5px; font-weight: 600;
color: var(--muted); cursor: pointer; border-radius: 6px;
transition: all 0.12s ease;
white-space: nowrap;
}
.planner-view-toggle > button:hover { color: var(--navy-2); }
.planner-view-toggle > button.active {
background: white; color: #9A3412;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.cal-nav { display: flex; gap: 4px; margin-left: auto; }
.cal-nav-btn {
background: white; border: 1px solid var(--border-soft);
padding: 5px 10px; font-size: 12px; font-weight: 600;
border-radius: 6px; cursor: pointer; color: var(--navy-2);
transition: all 0.12s ease;
}
.cal-nav-btn:hover { background: #FFF7ED; border-color: #FB923C; color: #9A3412; }
/* Week Calendar — 7 day columns, drag-drop between them */
.planner-calendar {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 8px;
min-height: 480px;
}
.cal-day {
background: #F8FAFC;
border: 2px dashed #CBD5E1;
border-radius: 10px;
min-height: 360px;
max-height: 70vh;
display: flex; flex-direction: column;
transition: background 0.15s ease, border-color 0.15s ease;
}
.cal-day.drag-over {
background: #FEF3C7; border-color: #F59E0B; border-style: solid;
}
.cal-day.cal-today { border-color: #FB923C; background: #FFF7ED; }
.cal-day.cal-today .cal-day-head { background: #FB923C; color: white; }
.cal-day.cal-weekend { background: #F1F5F9; }
.cal-day.cal-past { opacity: 0.6; }
.cal-day-head {
padding: 10px 12px;
border-radius: 8px 8px 0 0;
text-align: center;
background: white;
border-bottom: 1px solid var(--border-soft);
flex-shrink: 0;
}
.cal-day.cal-today .cal-day-head { border-bottom-color: #E07B3E; }
.cal-day-name { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); letter-spacing: 0.5px; }
.cal-day.cal-today .cal-day-name { color: white; opacity: 0.95; }
.cal-day-num { font-size: 24px; font-weight: 800; line-height: 1.2; color: var(--navy-2); }
.cal-day.cal-today .cal-day-num { color: white; }
.cal-day-month { font-size: 10px; color: var(--muted); }
.cal-day.cal-today .cal-day-month { color: white; opacity: 0.9; }
.cal-day-count {
font-size: 10px; font-weight: 700; margin-top: 3px;
background: #E2E8F0; color: var(--navy-2);
display: inline-block; padding: 2px 8px; border-radius: 999px;
}
.cal-day.cal-today .cal-day-count { background: white; color: #9A3412; }
.cal-day-cards {
flex: 1; overflow-y: auto;
padding: 8px; display: flex; flex-direction: column; gap: 6px;
scrollbar-width: thin;
}
.cal-card {
background: white;
border: 1px solid var(--border-soft);
border-left: 3px solid #FB923C;
border-radius: 6px;
padding: 6px 8px;
cursor: grab;
font-size: 11.5px;
transition: all 0.12s ease;
}
.cal-card:hover { box-shadow: 0 2px 5px rgba(0,0,0,0.08); transform: translateY(-1px); }
.cal-card:active { cursor: grabbing; }
.cal-card-name { font-weight: 600; color: var(--navy-2); font-size: 11.5px; }
.cal-card-meta { display: flex; gap: 4px; align-items: center; font-size: 10px; color: var(--muted); margin-top: 2px; flex-wrap: wrap; }
.cal-card-pri { font-size: 11px; }
.cal-card-note { font-size: 10px; color: #475569; margin-top: 2px; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) {
.planner-calendar {
grid-template-columns: repeat(7, 38vw);
overflow-x: auto;
scrollbar-width: thin;
}
}
/* ── GANTT VIEW — one compact row per customer × 14 days ──────────── */
.planner-gantt-wrap { width: 100%; }
.planner-gantt {
width: 100%;
overflow-x: auto;
border: 1px solid var(--border-soft);
border-radius: 10px;
background: white;
scrollbar-width: thin;
}
.gantt-row {
display: grid;
grid-template-columns: 240px repeat(14, minmax(60px, 1fr));
border-bottom: 1px solid #F1F5F9;
min-height: 36px;
align-items: stretch;
}
.gantt-row:last-child { border-bottom: none; }
.gantt-row:hover:not(.gantt-header) { background: #FAFBFC; }
.gantt-header {
background: #F8FAFC;
border-bottom: 2px solid var(--border-soft);
position: sticky; top: 0; z-index: 2;
min-height: 56px;
}
.gantt-cell-name {
padding: 6px 10px;
/* Solid white background so visit markers from off-screen days don't bleed
through the sticky column when scrolling horizontally. Higher z-index
than cell contents (which are z-index 0). */
background: white;
position: sticky; left: 0;
z-index: 5;
border-right: 2px solid var(--border-soft);
box-shadow: 4px 0 6px -2px rgba(15, 23, 42, 0.06);
display: flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 600; color: var(--navy-2);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
cursor: pointer;
transition: background 0.12s ease;
}
.gantt-header .gantt-cell-name {
background: #F8FAFC;
z-index: 6; /* above body sticky cells when header is also sticky */
cursor: default;
font-weight: 700; font-size: 11px; text-transform: uppercase; color: var(--muted);
letter-spacing: 0.5px;
}
.gantt-row:not(.gantt-header) .gantt-cell-name:hover { background: #FFF7ED; color: #9A3412; }
.gantt-row:not(.gantt-header):hover .gantt-cell-name { background: #FFF7ED; }
.gantt-pri { flex-shrink: 0; font-size: 12px; }
.gantt-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gantt-city { color: var(--muted); font-weight: 400; font-size: 11px; flex-shrink: 0; }
.gantt-cell-day {
padding: 6px 4px;
border-right: 1px solid #F1F5F9;
text-align: center;
display: flex; flex-direction: column; justify-content: center; align-items: center;
font-size: 11px;
}
.gantt-day-name { font-size: 9px; color: var(--muted); font-weight: 700; text-transform: uppercase; }
.gantt-day-num { font-size: 16px; font-weight: 700; color: var(--navy-2); line-height: 1.2; }
.gantt-day-mon { font-size: 9px; color: var(--muted); }
.gantt-cell-day.gantt-today { background: #FB923C; color: white; }
.gantt-cell-day.gantt-today .gantt-day-name,
.gantt-cell-day.gantt-today .gantt-day-num,
.gantt-cell-day.gantt-today .gantt-day-mon { color: white; }
.gantt-cell-day.gantt-weekend { background: #F1F5F9; }
.gantt-cell-day.gantt-past { opacity: 0.55; }
.gantt-cell-slot {
border-right: 1px solid #F1F5F9;
padding: 4px;
display: flex; align-items: center; justify-content: center;
min-height: 36px;
transition: background 0.12s ease;
}
.gantt-cell-slot.gantt-today { background: rgba(251, 146, 60, 0.07); }
.gantt-cell-slot.gantt-weekend { background: #FAFBFC; }
.gantt-cell-slot.gantt-past { opacity: 0.55; }
.gantt-cell-slot.drag-over { background: #FEF3C7; outline: 2px solid #F59E0B; outline-offset: -2px; }
.gantt-visit {
display: block; width: 100%;
padding: 4px 6px;
border-radius: 4px;
font-size: 10.5px;
font-weight: 600;
text-align: center;
cursor: grab;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.gantt-visit:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.12); }
.gantt-visit:active { cursor: grabbing; }
.gantt-visit.visit-high { background: #DCFCE7; color: #14532D; border-left: 3px solid #16A34A; }
.gantt-visit.visit-med { background: #FEF3C7; color: #713F12; border-left: 3px solid #EAB308; }
.gantt-visit.visit-low { background: #FFEDD5; color: #7C2D12; border-left: 3px solid #EA580C; }
.gantt-visit.visit-neutral { background: #E0E7FF; color: #3730A3; border-left: 3px solid #6366F1; }
/* Selected for move (touch pattern): pulsing orange outline */
.gantt-visit.visit-moving {
outline: 2px solid #E07B3E;
outline-offset: 2px;
animation: ganttPulse 1.1s ease-in-out infinite;
}
@keyframes ganttPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.5); }
50% { box-shadow: 0 0 0 8px rgba(249, 115, 22, 0); }
}
/* Highlight empty cells as drop targets when a visit is "picked up" */
.gantt-cell-slot.gantt-target:not(.gantt-past):hover {
background: rgba(251, 146, 60, 0.18);
cursor: pointer;
}
.gantt-cell-slot.gantt-target {
cursor: copy;
}
.gantt-empty {
grid-column: 1 / -1;
padding: 20px;
text-align: center;
}
.planner-quickchips {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
margin-bottom: 14px; padding: 8px 12px;
background: #F8FAFC; border: 1px solid var(--border-soft);
border-radius: 10px;
}
.quickchip-label { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; margin-right: 4px; }
.quickchip {
padding: 5px 12px; font-size: 12px; font-weight: 600;
background: white; color: var(--navy-2);
border: 1.5px solid var(--border-soft); border-radius: 999px;
cursor: pointer; transition: all 0.12s ease;
}
.quickchip:hover { border-color: #FB923C; color: #9A3412; }
.quickchip.active { background: #FB923C; color: white; border-color: #E07B3E; }
.quickchip-clear {
margin-left: auto;
background: #FEE2E2; color: #991B1B; border-color: #FCA5A5;
}
.quickchip-clear:hover { background: #DC2626; color: white; border-color: #B91C1C; }
/* Reusable save bar at the bottom of cards (Stage & Lifecycle, Next Action) */
.card-save-bar {
display: flex; justify-content: space-between; align-items: center;
gap: 10px; margin-top: 14px; padding-top: 12px;
border-top: 1px dashed var(--border-soft);
flex-wrap: wrap;
}
.card-save-bar .hint { margin: 0; color: var(--muted); }
.card-save-bar .btn-primary { padding: 6px 16px; font-size: 12.5px; }
/* Priority (Hot / Warm / Cold) toggle buttons */
.priority-block label { font-weight: 600; font-size: 13px; color: var(--navy-2); }
.priority-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.pri-btn {
flex: 1; min-width: 80px;
padding: 10px 8px; border: 2px solid var(--border-soft);
background: white; border-radius: 8px;
font-size: 13px; font-weight: 600; cursor: pointer;
color: var(--muted); transition: all 0.15s ease;
}
.pri-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.06); }
.pri-btn.active { color: white; }
/* Colours match the round emoji dots in the labels:
🟢 = green, 🟡 = pure yellow (not amber), 🟠 = vivid orange. */
.pri-btn-high.active { background: linear-gradient(135deg, #22C55E, #16A34A); border-color: #15803D; }
.pri-btn-med.active { background: linear-gradient(135deg, #FACC15, #EAB308); border-color: #CA8A04; color: #422006; }
.pri-btn-low.active { background: linear-gradient(135deg, #FB923C, #EA580C); border-color: #C2410C; }
/* Date quick-set buttons (Next Action, Install, AMC, Subscription dates) */
.date-quickset {
display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px;
}
.date-quickset button {
padding: 4px 10px; font-size: 11px;
background: #F1F5F9; border: 1px solid #E2E8F0;
color: #475569; border-radius: 999px; cursor: pointer;
font-weight: 500; transition: all 0.12s ease;
}
.date-quickset button:hover {
background: #FB923C; border-color: #E07B3E; color: white;
}
.contact-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.contact-row {
display: flex; gap: 12px; align-items: flex-start;
padding: 10px 12px; background: #F8FAFC;
border-radius: 8px; border: 1px solid var(--border-soft);
transition: all 0.15s;
}
.contact-row.primary {
background: #ECFDF5; border-color: #6EE7B7;
}
.contact-row:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.contact-star {
background: transparent; border: none; cursor: pointer;
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
font-size: 18px;
color: #94A3B8; transition: transform 0.1s;
}
.contact-star.active { color: #F59E0B; }
.contact-star:hover { transform: scale(1.15); }
.contact-info { flex: 1; min-width: 0; }
.contact-name {
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
font-size: 14px; color: var(--navy-2); margin-bottom: 2px;
}
.contact-role {
background: #DBEAFE; color: #1E40AF;
font-size: 10.5px; font-weight: 700;
padding: 2px 8px; border-radius: 999px;
text-transform: uppercase; letter-spacing: 0.3px;
}
.contact-meta { font-size: 12.5px; color: var(--muted); }
.contact-notes { font-size: 12px; color: var(--text); margin-top: 4px; font-style: italic; }
.contact-actions { display: flex; gap: 4px; flex-wrap: wrap; }
/* Customer detail — tabs (Overview · Discovery · Timeline) */
.cust-tabs {
display: flex; gap: 4px; margin: 14px 0 16px;
border-bottom: 2px solid var(--border-soft);
flex-wrap: wrap;
}
.cust-tabs button {
background: transparent; border: none; padding: 10px 18px;
font-size: 14px; font-weight: 600; color: var(--muted);
cursor: pointer; border-bottom: 3px solid transparent;
margin-bottom: -2px; transition: all 0.15s ease;
display: inline-flex; align-items: center; gap: 8px;
border-radius: 8px 8px 0 0;
}
.cust-tabs button:hover { color: var(--navy-2); background: #F1F5F9; }
.cust-tabs button.active {
color: #E07B3E; border-bottom-color: #E07B3E; background: #FFF7ED;
}
.cust-tab-badge {
display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 700;
background: #E2E8F0; color: var(--navy-2); border-radius: 999px;
min-width: 24px; text-align: center;
}
.cust-tabs button.active .cust-tab-badge { background: #FDBA74; color: #7C2D12; }
/* Discovery (customer detail) */
.discovery-card { border-left: 3px solid #6366F1; }
.discovery-section { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--border-soft); }
.discovery-section:first-of-type { border-top: none; padding-top: 0; }
.discovery-section h3 {
font-size: 13px; color: var(--navy-2); font-weight: 700;
letter-spacing: 0.3px; text-transform: uppercase;
margin: 0 0 10px; padding-bottom: 4px;
border-bottom: 1px solid #E0E7FF; color: #4338CA;
}
.discovery-progress {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; color: var(--muted);
}
.discovery-progress .bar {
display: inline-block; width: 100px; height: 7px;
background: #E0E7FF; border-radius: 4px; overflow: hidden;
}
.discovery-progress .bar-fill {
display: block; height: 100%;
background: linear-gradient(90deg, #6366F1, #8B5CF6);
transition: width 0.2s;
}
.duration-input {
display: flex; align-items: center; gap: 6px;
flex-wrap: nowrap;
}
.duration-input input[type="number"] {
width: 70px; text-align: center; padding: 8px 6px;
font-variant-numeric: tabular-nums;
}
.duration-input .dur-unit {
font-size: 12px; color: var(--muted); font-weight: 600;
margin-right: 4px; user-select: none;
}
.discovery-savebar {
margin: 10px 0 6px; padding: 10px 12px;
background: #F8FAFC; border: 1px solid var(--border-soft);
border-radius: 8px;
flex-wrap: wrap; gap: 10px;
}
.save-status {
font-size: 12px; font-weight: 600;
padding: 4px 10px; border-radius: 999px;
display: inline-flex; align-items: center; gap: 4px;
}
.save-status.saved { background: #DCFCE7; color: #166534; }
.save-status.dirty { background: #FEF3C7; color: #92400E; }
.save-status.saving { background: #DBEAFE; color: #1E40AF; }
/* Post-schedule instructions overlay */
.sched-steps { display: flex; flex-direction: column; gap: 14px; margin: 14px 0 18px; }
.sched-step {
display: flex; align-items: flex-start; gap: 12px;
padding: 12px 14px; background: #F8FAFC;
border: 1px solid #E2E8F0; border-radius: 10px;
}
.sched-step .step-num {
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 30px; width: 30px; height: 30px;
background: linear-gradient(135deg, #FB923C, #E07B3E);
color: white; font-weight: 700; border-radius: 50%;
font-size: 14px;
}
.sched-step strong { color: #0F172A; }
.sched-step .step-hint { font-size: 12px; color: #64748B; margin-top: 4px; }
.sched-step .step-hint a { color: #6366F1; text-decoration: none; }
.sched-step .step-hint a:hover { text-decoration: underline; }
.sched-backup {
margin-top: 18px; padding: 14px;
background: #FEFCE8; border: 1px solid #FDE68A; border-radius: 10px;
}
.sched-backup h3 { font-size: 13px; color: #92400E; margin: 0 0 10px; font-weight: 700; }
.sched-backup .hint { font-size: 12px; color: #78350F; }
/* Discovery template editor */
.tpl-section {
background: #F8FAFC; border: 1px solid var(--border-soft);
border-radius: 10px; padding: 14px; margin-bottom: 14px;
}
.tpl-section-head {
display: flex; gap: 10px; align-items: flex-end;
margin-bottom: 12px; padding-bottom: 10px;
border-bottom: 1px dashed var(--border-soft);
}
.tpl-question {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr 32px;
gap: 8px; margin-bottom: 8px;
align-items: end;
}
.tpl-question label { margin: 0; }
@media (max-width: 700px) {
.tpl-question { grid-template-columns: 1fr 1fr; }
}
.contact-btn.met { background: #FFE4D6; color: #C2410C; border-color: #FDBA74; }
.contact-btn.demo { background: #EDE9FE; color: #6D28D9; border-color: #C4B5FD; }
.contact-btn.note { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }
.contact-btn.open { background: #F1F5F9; color: var(--navy-2); border-color: #CBD5E1; }
.contact-btn.disabled {
opacity: 0.4; cursor: not-allowed; pointer-events: none;
}
.contact-btn.sm {
padding: 4px 8px; font-size: 12px;
min-width: 32px; justify-content: center;
}
/* Position the action row on the follow-up card */
.followup-actions {
display: flex; gap: 6px; justify-content: flex-end;
margin-bottom: 8px;
flex-wrap: wrap;
}
/* ── LEAD AGING ALERTS ────────────────────────────────────────── */
.alert-chip {
display: inline-block; padding: 3px 9px; border-radius: 6px;
font-size: 11px; font-weight: 600;
margin-right: 4px; margin-top: 4px;
white-space: nowrap;
}
.alert-chip.lvl-critical { background: #FEE2E2; color: #B91C1C; border: 1px solid #FCA5A5; }
.alert-chip.lvl-warning { background: #FED7AA; color: #9A3412; border: 1px solid #FDBA74; }
.alert-chip.lvl-info { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; }
.alert-dot {
display: inline-block; font-size: 11px; margin-left: 6px;
vertical-align: middle;
}
.followup-alerts { margin-top: 4px; }
/* Banner on customer detail page */
.alert-banner {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 12px 16px; border-radius: 10px; margin-bottom: 14px;
font-size: 13px;
}
.alert-banner.lvl-critical { background: #FEF2F2; border: 1px solid #FCA5A5; color: #991B1B; }
.alert-banner.lvl-warning { background: #FFFBEB; border: 1px solid #FDBA74; color: #9A3412; }
.alert-banner.lvl-info { background: #FEFCE8; border: 1px solid #FCD34D; color: #854D0E; }
/* Kanban card alert tint */
.kanban-card.alert-critical { border-left: 3px solid #DC2626; padding-left: 9px; }
.kanban-card.alert-warning { border-left: 3px solid #F59E0B; padding-left: 9px; }
.kanban-card.alert-info { border-left: 3px solid #EAB308; padding-left: 9px; }
/* Needs Attention tab */
.tab-badge {
display: inline-block; background: #DC2626; color: white;
font-size: 10.5px; font-weight: 700;
padding: 2px 8px; border-radius: 999px;
margin-left: 6px; vertical-align: middle;
}
/* Needs Attention list cards */
.attention-card {
display: flex; gap: 12px; align-items: flex-start;
background: white; border-radius: 10px;
padding: 12px 14px; margin-bottom: 10px;
border: 1px solid var(--border-soft);
border-left: 4px solid #94A3B8;
transition: box-shadow 0.15s;
}
.attention-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.attention-card.lvl-critical { border-left-color: #DC2626; background: linear-gradient(90deg, #FEF2F2 0%, white 12%); }
.attention-card.lvl-warning { border-left-color: #F59E0B; background: linear-gradient(90deg, #FFFBEB 0%, white 12%); }
.attention-card.lvl-info { border-left-color: #EAB308; background: linear-gradient(90deg, #FEFCE8 0%, white 12%); }
.attention-actions {
display: flex; flex-direction: column; gap: 4px; flex-shrink: 0;
}
.attention-body { flex: 1; min-width: 0; }
.attention-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.attention-name strong { font-size: 14.5px; color: var(--navy-2); }
.attention-meta { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.attention-alerts { display: flex; flex-wrap: wrap; }
.needs-attention-kpi:hover { box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15); transform: translateY(-1px); transition: all 0.15s; }
/* ── MANAGER DASHBOARD ────────────────────────────────────────── */
.mgr-grid {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 16px; margin: 22px 0;
}
.mgr-card { padding: 16px 18px; }
.mgr-card-wide { grid-column: 1 / -1; }
.mgr-card-head {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 12px;
}
.mgr-card-head h2 { font-size: 15px; margin: 0; color: var(--navy-2); }
.mgr-card-head .hint { font-size: 11px; color: var(--muted); }
.mgr-big-stat {
font-size: 36px; font-weight: 800; color: var(--orange-dark);
line-height: 1; margin-bottom: 6px;
}
.mgr-sub { font-size: 11.5px; color: var(--muted); }
.mgr-table { width: 100%; font-size: 12.5px; }
.mgr-table th { background: #F8FAFC; color: var(--muted); font-size: 11px; font-weight: 600; padding: 6px 8px; text-align: left; text-transform: uppercase; letter-spacing: 0.3px; }
.mgr-table td { padding: 7px 8px; border-bottom: 1px solid #F1F5F9; }
.mgr-table tr:last-child td { border-bottom: none; }
.hot-leads-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 10px;
}
.hot-lead-row {
display: grid; grid-template-columns: 12px 1fr auto;
gap: 10px; align-items: center;
padding: 10px 12px; background: white;
border: 1px solid var(--border-soft); border-radius: 8px;
border-left: 3px solid #DC2626;
transition: box-shadow 0.15s;
}
.hot-lead-row:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.hot-lead-name {
display: flex; align-items: center; gap: 6px;
font-size: 13px; color: var(--navy-2);
}
.hot-lead-meta {
grid-column: 2 / 3;
font-size: 11.5px; color: var(--muted); margin-top: 2px;
}
.hot-lead-actions { grid-row: 1 / 3; grid-column: 3; display: flex; gap: 4px; }
@media (max-width: 900px) {
.mgr-grid { grid-template-columns: 1fr; }
}
.pkg-interp-flag {
display: inline-block; margin-left: 8px;
background: #FEF3C7; color: #92400E;
font-size: 10.5px; font-weight: 700;
padding: 2px 8px; border-radius: 999px;
border: 1px dashed #FCD34D;
vertical-align: middle;
}
.kpi-mini.sme { background: #DBEAFE; color: #1E40AF; }
.kpi-mini.ent { background: #DCFCE7; color: #166534; }
.kpi-mini.tbc { background: #FEF3C7; color: #92400E; }
.kanban-card.has-intec-tag {
background: #FFF7ED;
border-left: 4px solid #F7931E;
}
.data-table tr.has-intec-tag { background: #FFFBF5; }
.data-table tr.has-intec-tag td:first-child { border-left: 3px solid #F7931E; }
.tags-line { margin: 2px 0 6px; }
/* ── INTEC 2026 VIEW ───────────────────────────────────────────── */
.intec-summary { display: flex; gap: 10px; flex-wrap: wrap; }
/* Segment-first KPI strip (segments outer, priority breakdown inside) */
.seg-kpi-strip {
display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch;
margin-top: 4px;
}
.seg-kpi-total {
display: flex; flex-direction: column; justify-content: center;
align-items: center; padding: 8px 16px;
background: #F1F5F9; border-radius: 10px; min-width: 90px;
}
.seg-kpi-total strong { font-size: 22px; font-weight: 800; color: var(--navy-2); line-height: 1; }
.seg-kpi-total span { font-size: 11px; color: var(--muted); margin-top: 2px; }
.seg-kpi-card {
display: flex; flex-direction: column; gap: 6px;
padding: 8px 12px; border-radius: 10px; min-width: 170px;
border: 1px solid transparent;
}
.seg-kpi-card.seg-tbc { background: #FEF9C3; border-color: #FCD34D; }
.seg-kpi-card.seg-sme { background: #DBEAFE; border-color: #93C5FD; }
.seg-kpi-card.seg-enterprise { background: #DCFCE7; border-color: #86EFAC; }
.seg-kpi-head { display: flex; align-items: center; gap: 6px; }
.seg-kpi-icon { font-size: 14px; }
.seg-kpi-name { font-size: 12px; font-weight: 700; letter-spacing: 0.3px; color: var(--navy-2); }
.seg-kpi-count {
margin-left: auto; font-size: 18px; font-weight: 800;
color: var(--navy-2); line-height: 1;
}
.seg-kpi-bars { display: flex; gap: 6px; flex-wrap: wrap; }
.kpi-bar {
display: inline-block; padding: 3px 9px; border-radius: 999px;
font-size: 11.5px; font-weight: 700; background: white;
}
.kpi-bar.hot { color: #059669; border: 1px solid #6EE7B7; }
.kpi-bar.warm { color: #B45309; border: 1px solid #FCD34D; }
.kpi-bar.cold { color: #C2410C; border: 1px solid #FDBA74; }
.action-plan-title { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.source-picker {
display: inline-flex !important;
flex-direction: row !important;
align-items: center;
gap: 8px;
margin: 0;
}
.source-picker > span {
font-size: 11px; color: var(--muted); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.5px;
white-space: nowrap;
}
.source-picker select {
appearance: none;
-webkit-appearance: none;
background: white url("data:image/svg+xml;utf8,") no-repeat right 12px center;
background-size: 10px 6px;
border: 1px solid #CBD5E1;
border-radius: 8px;
padding: 8px 32px 8px 14px;
font-size: 13px;
font-weight: 600;
color: var(--navy-2);
cursor: pointer;
min-width: 220px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.source-picker select:hover { border-color: var(--orange-dark); }
.source-picker select:focus {
outline: none;
border-color: var(--orange-dark);
box-shadow: 0 0 0 3px rgba(247, 147, 30, 0.15);
}
.kpi-mini {
background: #F1F5F9; padding: 6px 14px; border-radius: 999px;
font-size: 13px; color: var(--navy-2);
}
.kpi-mini.hot { background: #FEE2E2; color: #B91C1C; }
.kpi-mini.warm { background: #FEF3C7; color: #B45309; }
.kpi-mini.cold { background: #DBEAFE; color: #1E3A8A; }
.intec-tabs { display: flex; gap: 0; margin-bottom: 16px; border-bottom: 2px solid #E2E8F0; }
.intec-tabs button {
background: transparent; border: none; padding: 10px 18px;
font-size: 14px; font-weight: 600; color: var(--muted);
cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.intec-tabs button:hover { color: var(--navy-2); }
.intec-tabs button.active { color: var(--orange-dark); border-bottom-color: var(--orange-dark); }
/* Follow-up cards */
.followup-list { display: flex; flex-direction: column; gap: 12px; }
.followup-card {
background: white; border-radius: 10px; padding: 14px 16px;
border: 1px solid var(--border-soft); /* full subtle border around card */
border-left: 4px solid #94A3B8; /* keep colored accent on the left */
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
transition: all 0.15s;
}
.followup-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-1px); border-color: #CBD5E1; }
/* Full-card pastel tint so the responsiveness colour reads at-a-glance. */
.followup-card.pri-hot { border-left-color: #059669; background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%); }
.followup-card.pri-warm { border-left-color: #F59E0B; background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%); }
.followup-card.pri-cold { border-left-color: #E07B3E; background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%); }
.followup-top { display: flex; gap: 16px; align-items: flex-start; }
.followup-priority { flex: 0 0 160px; }
.followup-customer { flex: 1; }
.followup-name { font-size: 16px; font-weight: 700; color: var(--navy-2); margin-bottom: 4px; }
.followup-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.followup-when { font-size: 11.5px; color: var(--muted); display: block; margin-top: 4px; font-weight: 500; }
.followup-action { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #E2E8F0; font-size: 13px; }
.followup-action-title { margin-bottom: 6px; }
.followup-action-title strong { color: var(--orange-dark); }
.followup-talking ul { margin: 4px 0 0 18px; padding: 0; }
.followup-talking li { margin: 3px 0; color: var(--text); font-size: 12.5px; }
.pri-badge {
display: inline-block; padding: 4px 10px; border-radius: 999px;
font-size: 11.5px; font-weight: 700; letter-spacing: 0.2px;
}
.pri-badge.pri-hot { background: #059669; color: white; }
.pri-badge.pri-warm { background: #F59E0B; color: white; }
.pri-badge.pri-cold { background: #E07B3E; color: white; }
.pri-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.pri-dot.pri-hot { background: #059669; }
.pri-dot.pri-warm { background: #F59E0B; }
.pri-dot.pri-cold { background: #E07B3E; }
/* Cluster grid */
.cluster-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 14px;
}
.cluster-card {
background: white; border: 1px solid var(--border-soft); border-radius: 10px;
padding: 14px 16px;
}
.cluster-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cluster-city { font-size: 15px; font-weight: 700; color: var(--navy-2); }
.cluster-count { font-size: 12px; color: var(--muted); background: #F1F5F9; padding: 3px 10px; border-radius: 999px; }
.cluster-stats { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.cluster-days { font-size: 11.5px; color: var(--orange-dark); font-weight: 600; margin-left: auto; }
.cluster-customers {
max-height: 280px; overflow-y: auto;
border-top: 1px solid var(--border-soft); padding-top: 8px;
}
.cluster-row {
display: flex; align-items: center; gap: 10px;
padding: 6px 4px; font-size: 12.5px;
cursor: pointer; border-radius: 4px;
}
.cluster-row:hover { background: #F8FAFC; }
.cluster-name { flex: 1; color: var(--navy-2); font-weight: 500; }
.cluster-contact { color: var(--muted); font-size: 11.5px; }
/* ── CITY PLAN (zone-grouped) ─────────────────────────────────── */
.cityplan {
background: #FAFBFC; border-radius: 12px; padding: 16px 18px;
margin-bottom: 18px; border: 1px solid var(--border-soft);
}
.cityplan-head {
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 10px; margin-bottom: 14px; padding-bottom: 10px;
border-bottom: 2px solid #E2E8F0;
}
.cityplan-title { font-size: 18px; font-weight: 700; color: var(--navy-2); }
.cityplan-summary { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cityplan-count { font-size: 12.5px; color: var(--muted); font-weight: 500; margin-left: 8px; }
.zones-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 12px;
}
.zone-card {
background: white; border-radius: 10px; padding: 12px 14px;
border: 1px solid var(--border-soft);
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.zone-head {
display: flex; justify-content: space-between; align-items: flex-start;
margin-bottom: 8px; gap: 8px;
}
.zone-day {
display: inline-block; padding: 3px 10px; border-radius: 6px;
background: var(--orange-dark); color: white;
font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
margin-right: 8px; vertical-align: middle;
}
.zone-day.day-tbd { background: #94A3B8; }
.zone-name { font-size: 13.5px; font-weight: 600; color: var(--navy-2); }
.zone-count { font-size: 11.5px; color: var(--muted); background: #F1F5F9; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.zone-stats { display: flex; gap: 5px; margin-bottom: 8px; flex-wrap: wrap; }
.zone-customers {
max-height: 240px; overflow-y: auto;
border-top: 1px dashed var(--border-soft); padding-top: 8px;
}
.cluster-name-block { flex: 1; min-width: 0; }
.cluster-contact-line { font-size: 11px; color: var(--muted); margin-top: 1px; }
/* ── DRILL-DOWN VISIT PLAN ─────────────────────────────────────── */
.plan-summary {
background: linear-gradient(135deg, #FFF7ED 0%, #FFFBEB 100%);
border-radius: 10px; padding: 10px 14px; margin-bottom: 14px;
border: 1px solid #FED7AA;
}
.plan-summary-row {
display: grid; grid-template-columns: repeat(6, 1fr);
gap: 8px;
}
.plan-stat { text-align: center; padding: 2px 0; }
.plan-stat-num { font-size: 18px; font-weight: 800; color: var(--navy-2); line-height: 1.1; }
.plan-stat-label { font-size: 10.5px; color: var(--muted); margin-top: 2px; font-weight: 500; }
.plan-stat.hot .plan-stat-num { color: #059669; }
.plan-stat.warm .plan-stat-num { color: #F59E0B; }
.plan-controls {
display: flex; gap: 8px; justify-content: flex-end;
margin-top: 12px; padding-top: 12px; border-top: 1px dashed #FED7AA;
}
.plan-city {
background: white; border: 1px solid var(--border-soft);
border-radius: 10px; margin-bottom: 10px; overflow: hidden;
transition: box-shadow 0.15s;
}
.plan-city.open { box-shadow: 0 4px 12px rgba(0,0,0,0.06); border-color: #FDBA74; }
.plan-city-row {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 18px; cursor: pointer;
transition: background 0.1s;
}
.plan-city-row:hover { background: #FFFBF5; }
.plan-city-left { display: flex; align-items: center; gap: 10px; }
.plan-city-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan-caret {
width: 18px; display: inline-block; color: var(--muted);
font-size: 11px; transition: transform 0.15s;
}
.plan-city-icon { font-size: 16px; }
.plan-city-name { font-size: 16px; font-weight: 700; color: var(--navy-2); }
.plan-city-leads { font-size: 12.5px; color: var(--muted); margin-right: 6px; }
.plan-city-days { font-size: 12px; color: var(--orange-dark); font-weight: 600; margin-left: 4px; }
.plan-zones {
padding: 6px 14px 14px 28px;
background: linear-gradient(180deg, #FAFBFC 0%, white 100%);
border-top: 1px dashed var(--border-soft);
}
.plan-zone {
background: white; border: 1px solid var(--border-soft);
border-radius: 8px; margin: 8px 0; overflow: hidden;
}
.plan-zone.open { border-color: var(--orange-dark); }
.plan-zone-row {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 14px; cursor: pointer;
transition: background 0.1s;
}
.plan-zone-row:hover { background: #FAFBFC; }
.plan-zone-left { display: flex; align-items: center; gap: 10px; }
.plan-zone-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.plan-zone-name { font-size: 13.5px; font-weight: 600; color: var(--navy-2); }
.zone-print-btn {
background: var(--orange-dark); color: white; border: none;
padding: 4px 10px; border-radius: 6px;
font-size: 11px; font-weight: 700; cursor: pointer;
white-space: nowrap;
}
.zone-print-btn:hover { background: #E67900; }
.plan-customers {
padding: 6px 14px 12px 36px;
background: #FAFBFC;
border-top: 1px dashed var(--border-soft);
}
.plan-customers .cluster-row { background: white; margin: 4px 0; padding: 8px 10px; border-radius: 6px; }
@media (max-width: 760px) {
.plan-summary-row { grid-template-columns: repeat(2, 1fr); }
.plan-city-right, .plan-zone-right { gap: 5px; }
}
/* ── FILTER BAR ────────────────────────────────────────────────── */
.filter-bar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.filter-bar input[type="text"] { flex: 2; min-width: 180px; }
.filter-bar select { flex: 1; max-width: 220px; min-width: 130px; }
.filter-bar input[type="date"] { flex: 1; min-width: 140px; max-width: 185px; }
.pipeline-filter-card { padding: 14px 18px; margin-bottom: 14px; }
.pipeline-filter-card .filter-bar { margin-bottom: 0; }
.pipeline-filter-summary {
margin-top: 10px;
padding: 8px 12px;
background: #f1f5f9;
border-radius: 6px;
font-size: 12.5px;
color: #334155;
}
.pipeline-filter-toggle {
flex: 0 0 auto !important;
background: #f8fafc;
border: 1px solid #e2e8f0;
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 13px !important;
color: #334155 !important;
}
.pipeline-filter-toggle:hover { background: #f1f5f9; }
.pipeline-filter-toggle input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; margin: 0; }
/* ── STAGE / STATUS PILLS ──────────────────────────────────────── */
.stage-pill, .status-pill {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 600;
white-space: nowrap;
}
.muted-small { color: var(--muted); font-size: 12px; }
/* ── CUSTOMER DETAIL ───────────────────────────────────────────── */
.back-link {
display: inline-flex; align-items: center; gap: 6px;
background: #FFF7ED; border: 1.5px solid #FB923C; color: #9A3412;
font-size: 13px; font-weight: 600;
cursor: pointer; padding: 6px 14px;
font-family: inherit; border-radius: 999px;
margin-bottom: 10px;
transition: all 0.15s ease;
box-shadow: 0 1px 2px rgba(251, 146, 60, 0.15);
}
.back-link:hover {
background: #FB923C; color: white;
transform: translateX(-3px);
box-shadow: 0 2px 6px rgba(251, 146, 60, 0.35);
}
.back-link:active { transform: translateX(-1px); }
.cust-meta { color: var(--muted); font-size: 13px; margin-top: 4px; }
.cust-address {
margin-top: 6px; font-size: 13px; color: #475569;
line-height: 1.4; max-width: 720px;
padding: 6px 10px; background: #F8FAFC;
border-left: 3px solid #FB923C; border-radius: 4px;
}
.cust-address span { color: #1E293B; font-weight: 500; }
.kv { display: flex; padding: 8px 0; border-bottom: 1px dashed var(--border-soft); font-size: 13px; }
.kv:last-child { border-bottom: none; }
.kv span:first-child { color: var(--muted); width: 100px; font-weight: 500; }
.kv span:last-child { color: var(--text); flex: 1; font-weight: 500; }
hr { border: none; border-top: 1px solid var(--border-soft); margin: 16px 0; }
/* ── ACTIVITY LOG ──────────────────────────────────────────────── */
.activity-row {
display: flex; gap: 12px; padding: 12px 0;
border-bottom: 1px solid var(--border-soft);
}
.activity-row:last-child { border-bottom: none; }
.activity-icon {
width: 36px; height: 36px; border-radius: 50%;
background: var(--bg);
display: flex; align-items: center; justify-content: center;
font-size: 18px; flex-shrink: 0;
}
.activity-body { flex: 1; min-width: 0; }
.activity-head { display: flex; justify-content: space-between; margin-bottom: 4px; }
.activity-head strong { font-size: 13px; color: var(--navy-2); }
.activity-notes { font-size: 13px; color: var(--text); }
/* ── MODALS ────────────────────────────────────────────────────── */
.modal-overlay {
position: fixed; inset: 0;
background: rgba(10,20,40,0.5);
display: flex; align-items: flex-start; justify-content: center;
padding: 60px 20px;
z-index: 200;
overflow-y: auto;
}
.modal {
background: white;
border-radius: 14px;
padding: 28px 30px;
width: 100%; max-width: 720px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.modal h2 { margin: 0 0 20px; font-size: 18px; color: var(--navy-2); font-weight: 700; }
/* Send-quote modal: fixed title + action bar, only the body scrolls (no page/nested scroll fight) */
.modal.send-modal { padding: 0; max-height: calc(100vh - 90px); display: flex; flex-direction: column; }
.send-modal-inner { display: flex; flex-direction: column; min-height: 0; padding: 24px 28px; }
.send-modal-inner > h2 { flex: 0 0 auto; }
.send-modal-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; margin: 0 -28px; padding: 0 28px 4px; }
.modal.send-modal .actions { flex: 0 0 auto; margin-top: 14px; padding-top: 14px; border-top: 1px solid #eef2f7; }
/* Send-mode picker — compact segmented toggle (customer vs internal review) */
.send-mode { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; padding: 10px 12px; margin-top: 6px; }
.send-seg { display: flex; gap: 4px; background: #fde3c7; border-radius: 9px; padding: 3px; }
.send-seg-btn { flex: 1; border: 0; background: transparent; color: #9a5218; font-size: 13px; font-weight: 600; padding: 8px 10px; border-radius: 7px; cursor: pointer; transition: background .12s, color .12s, box-shadow .12s; white-space: nowrap; }
.send-seg-btn:hover { color: #7c2d12; }
.send-seg-btn.is-on { background: #E07B3E; color: #fff; box-shadow: 0 1px 3px rgba(249,115,22,.35); }
.send-seg-hint { font-size: 11.5px; color: #a16207; margin-top: 7px; line-height: 1.35; }
/* Quote review modal */
.rv-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 9px; padding: 10px 12px; }
.rv-summary > div { display: flex; flex-direction: column; gap: 1px; }
.rv-summary span { font-size: 10px; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.rv-summary b { font-size: 13.5px; color: #0f172a; }
.rv-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.rv-comments-h { font-size: 12px; font-weight: 800; color: #334155; text-transform: uppercase; letter-spacing: .04em; margin: 16px 0 8px; }
.rv-thread { display: flex; flex-direction: column; gap: 8px; }
.rv-comment { background: #fff; border: 1px solid #eef2f7; border-left: 3px solid #E07B3E; border-radius: 8px; padding: 8px 12px; }
.rv-c-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.rv-c-head b { font-size: 12.5px; color: #7c2d12; }
.rv-c-head span { font-size: 11px; color: #94a3b8; white-space: nowrap; }
.rv-c-text { font-size: 13px; color: #1e293b; line-height: 1.45; white-space: pre-wrap; }
.rv-compose { flex: 0 0 auto; display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef2f7; }
.rv-compose textarea { flex: 1; padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 13px; resize: vertical; font-family: inherit; }
.rv-compose .btn-primary { flex: 0 0 auto; }
/* ── SME CART PICKER ───────────────────────────────────────────── */
.sme-cart-grid {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
gap: 18px;
align-items: start;
}
@media (max-width: 880px) {
.sme-cart-grid { grid-template-columns: 1fr; }
}
.sme-cart-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 10px;
}
.sme-cart-header label { display: block; font-weight: 600; font-size: 14px; color: var(--navy-2); }
.sme-cart-header .btn-secondary { padding: 4px 10px; font-size: 12px; }
.sme-cart-list {
border: 1px solid #e2e8f0; border-radius: 8px;
max-height: 380px; overflow-y: auto;
background: #fff;
}
.sme-cart-row {
display: flex !important;
flex-direction: row !important;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid #f1f5f9;
cursor: pointer;
margin: 0;
font-size: 14px;
font-weight: 500;
color: #0f172a;
text-transform: none;
}
.sme-cart-row:last-child { border-bottom: none; }
.sme-cart-row.checked { background: #fff7ed; }
.sme-cart-row input[type="checkbox"] {
width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; margin: 0;
}
.sme-cart-badge {
flex-shrink: 0;
width: 38px; height: 38px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 20px; line-height: 1;
background: #f1f5f9; color: #334155;
border: 1px solid #e2e8f0;
}
.sme-cart-badge.fam-foundation { background: #fff7ed; border-color: #fed7aa; color: #c2410c; } /* orange */
.sme-cart-badge.fam-productivity { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; } /* blue */
.sme-cart-badge.fam-reliability { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; } /* green */
.sme-cart-badge.fam-intelligence { background: #faf5ff; border-color: #e9d5ff; color: #7e22ce; } /* purple */
.sme-cart-badge.fam-precision { background: #fef2f2; border-color: #fecaca; color: #b91c1c; } /* red */
.sme-cart-row .sme-cart-info { flex: 1; min-width: 0; }
.sme-cart-row .sme-cart-name { font-weight: 500; font-size: 14px; color: #0f172a; }
.sme-cart-row .sme-cart-price { font-size: 11.5px; color: #64748b; margin-top: 2px; font-weight: 400; }
.sme-cart-row .sme-cart-usecase {
font-size: 11.5px; color: #64748b; margin-top: 2px;
line-height: 1.3;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sme-cart-row.checked .sme-cart-usecase { color: #9a3412; }
.sme-cart-row { padding: 8px 14px; }
.sme-cart-list { max-height: 520px; }
.sme-cart-right label { display: block; font-weight: 600; font-size: 14px; color: var(--navy-2); margin-bottom: 6px; }
.sme-cart-hint {
margin-top: 10px; font-size: 12px; color: #64748b; line-height: 1.5;
}
.sme-cart-selected {
background: #f1f5f9; padding: 10px 14px; border-radius: 6px; margin-bottom: 10px;
}
.sme-cart-selected-title { font-size: 12px; font-weight: 600; color: #0f172a; margin-bottom: 6px; }
.sme-cart-selected-list { margin: 0; padding-left: 20px; font-size: 12.5px; color: #334155; line-height: 1.55; }
.sme-cart-selected-footer {
margin-top: 8px; padding-top: 8px; border-top: 1px solid #e2e8f0;
font-size: 12px; color: #475569;
}
.sme-cart-empty {
background: #fef2f2; color: #b91c1c; padding: 10px 14px;
border-radius: 6px; margin-bottom: 10px; font-size: 13px;
}
/* ── DRAWINGS / SPEC SHEETS ────────────────────────────────────── */
.drawing-detail-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
@media (max-width: 1100px) {
.drawing-detail-grid { grid-template-columns: 1fr; }
}
.page-viewer {
display: flex; flex-direction: column; gap: 10px;
max-height: 80vh; overflow-y: auto;
background: #F9FAFB; padding: 12px; border-radius: 8px;
}
.drawing-page-img {
width: 100%; height: auto; display: block;
border: 1px solid var(--border); border-radius: 4px;
background: white;
}
.spec-card {
max-height: 80vh; overflow-y: auto;
}
.spec-display .spec-section {
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border-soft);
}
.spec-display .spec-section:last-child { border-bottom: none; }
.spec-display h3 {
font-size: 13px; font-weight: 700; color: var(--navy-2);
margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.5px;
}
.spec-display ul, .spec-display ol {
margin: 6px 0 0 20px; padding: 0; font-size: 13px;
line-height: 1.7;
}
.spec-table {
width: 100%; border-collapse: collapse; font-size: 13px;
}
.spec-table th, .spec-table td {
padding: 6px 10px; border-bottom: 1px solid var(--border-soft); text-align: left;
}
.spec-table th { background: var(--bg); font-size: 11px; text-transform: uppercase; color: var(--muted); }
/* ── BUTTON SMALL VARIANT ──────────────────────────────────────── */
button.small { padding: 6px 12px !important; font-size: 12px !important; }
/* ── PACKAGE PICKER ────────────────────────────────────────────── */
.picker-type-tabs {
display: flex; gap: 4px; margin: 6px 0 14px;
background: #F4F6F9; padding: 4px; border-radius: 10px;
}
.picker-type-tabs button {
flex: 1;
background: transparent; color: var(--muted);
border: none; padding: 10px 16px;
font-size: 13px; font-weight: 600;
cursor: pointer; border-radius: 8px;
font-family: inherit;
transition: all 0.15s;
}
.picker-type-tabs button.active {
background: #E07B3E; color: #ffffff;
box-shadow: 0 2px 8px rgba(249, 115, 22, 0.35);
}
.package-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px; margin: 18px 0;
}
.package-card {
background: white; border: 1.5px solid var(--border);
border-radius: 12px;
padding: 18px 16px;
cursor: pointer;
transition: all 0.15s;
display: flex; flex-direction: column;
}
.package-card:hover {
border-color: var(--orange);
box-shadow: 0 8px 22px -8px rgba(255,107,26,0.3);
transform: translateY(-2px);
}
.pkg-head { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
.pkg-machine-count { font-size: 32px; font-weight: 800; color: var(--orange); line-height: 1; }
.pkg-machine-label { font-size: 12px; color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.pkg-name { font-size: 12.5px; font-weight: 600; color: var(--navy-2); margin-bottom: 12px; line-height: 1.3; }
.pkg-breakdown { font-size: 12px; flex: 1; }
.pkg-breakdown > div {
display: flex; justify-content: space-between;
padding: 4px 0;
border-bottom: 1px dashed var(--border-soft);
}
.pkg-breakdown > div:last-child { border-bottom: none; }
.pkg-breakdown span:first-child { color: var(--muted); }
.pkg-breakdown span:last-child { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.pkg-total {
border-top: 2px solid var(--orange) !important;
border-bottom: none !important;
margin-top: 6px; padding-top: 8px !important;
font-size: 13px !important;
}
.pkg-total span:last-child { color: var(--orange) !important; font-size: 14px; }
.pkg-renewal {
background: #FFF8F0; margin: 8px -6px 0 -6px;
padding: 6px 10px !important; border-radius: 6px;
border-bottom: none !important;
}
.pkg-renewal span:last-child { color: var(--orange-dark); }
/* ── MIGRATION BANNER / OFFLINE INDICATOR ──────────────────────── */
.migration-banner {
position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
background: #FFF8F0; border: 1px solid var(--orange);
padding: 14px 22px; border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
display: flex; align-items: center; gap: 20px;
max-width: 700px; z-index: 150;
font-size: 13.5px; color: var(--text);
}
.api-offline {
position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
background: var(--danger); color: white;
padding: 8px 16px; border-radius: 999px;
font-size: 12.5px; font-weight: 600;
z-index: 150;
box-shadow: 0 4px 12px rgba(220,38,38,0.3);
}
/* ── RESPONSIVE ────────────────────────────────────────────────── */
.topbar-left { display: flex; align-items: center; gap: 8px; }
.mobile-hamburger {
display: none;
background: transparent; border: 1px solid #E2E8F0; cursor: pointer;
width: 44px; height: 44px; min-width: 44px;
border-radius: 10px; color: var(--navy-2);
align-items: center; justify-content: center;
-webkit-tap-highlight-color: rgba(255,107,26,0.2);
touch-action: manipulation;
flex-shrink: 0;
position: relative;
z-index: 51;
}
.mobile-hamburger:active { background: #F1F5F9; transform: scale(0.96); }
.mobile-hamburger:hover { background: #F1F5F9; }
.mobile-backdrop {
display: none;
position: fixed; inset: 0;
background: rgba(0,0,0,0.5);
z-index: 55;
}
@media (max-width: 1200px) {
.kpi-row { grid-template-columns: repeat(3, 1fr); }
.pipeline-strip { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
body { padding-left: 72px; }
.sidebar { width: 72px; }
.sb-nav button span { opacity: 0; pointer-events: none; }
.kpi-row { grid-template-columns: repeat(2, 1fr); }
.pipeline-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.topbar { padding: 10px 14px; gap: 10px; }
.container { padding: 0 14px; margin: 16px auto; }
.card { padding: 16px; }
.page-head { flex-direction: column; align-items: stretch; }
.quote-meta { flex-wrap: wrap; }
}
/* ── MOBILE (drawer) — all touch devices ───────────────────────── */
@media (max-width: 900px) {
/* Body padding = 0, sidebar becomes drawer */
body, body.sb-collapsed { padding-left: 0; }
.mobile-hamburger { display: inline-flex; }
.sidebar {
width: 250px !important;
transform: translateX(-100%);
transition: transform 0.22s ease-out;
z-index: 60;
box-shadow: 4px 0 16px rgba(0,0,0,0.2);
}
body.sb-mobile-open .sidebar { transform: translateX(0); }
body.sb-mobile-open .mobile-backdrop { display: block; }
/* Always show full text in drawer when open */
.sidebar .sb-nav button span { opacity: 1 !important; pointer-events: auto !important; }
body.sb-collapsed .sidebar { width: 250px !important; }
.sb-toggle { display: none; }
/* Topbar adjustments */
.topbar { padding: 8px 12px; flex-wrap: wrap; }
.brand-logo-img { height: 32px !important; }
.top-right { gap: 6px; }
.top-right .btn-secondary.small { padding: 6px 10px; font-size: 12px; }
.user-meta { display: none; }
.user-chip { padding: 4px !important; }
/* Container & cards */
.container { padding: 0 12px; margin: 12px auto; }
.card { padding: 14px; }
h1 { font-size: 20px !important; }
h2 { font-size: 15px !important; }
/* Page head stacks */
.page-head, .page-head.actionplan-head { flex-direction: column; align-items: stretch; gap: 12px; }
.page-head > div { width: 100%; }
.action-plan-title { width: 100%; }
.source-picker select { min-width: 0; width: 100%; }
.page-head.actionplan-head .seg-kpi-strip { margin-left: 0; width: 100%; }
/* KPI cards */
.kpi-row { grid-template-columns: 1fr 1fr !important; gap: 8px; }
.kpi-card { padding: 12px; }
.kpi-value { font-size: 18px !important; }
.kpi-label { font-size: 11.5px !important; }
/* Pipeline overview & kanban */
.pipeline-strip { grid-template-columns: repeat(2, 1fr) !important; }
.kanban {
grid-template-columns: repeat(7, 78vw) !important;
height: calc(100vh - 160px);
}
/* Manager grid */
.mgr-grid { grid-template-columns: 1fr; gap: 12px; }
.mgr-big-stat { font-size: 26px; }
.hot-leads-grid { grid-template-columns: 1fr; }
/* Segment KPI strip */
.seg-kpi-strip { gap: 8px; }
.seg-kpi-card { min-width: 0; flex: 1 1 100%; }
.seg-kpi-total { flex: 1 1 100%; flex-direction: row; gap: 10px; justify-content: center; padding: 10px; }
.seg-kpi-total strong { font-size: 18px; }
/* Filter bar */
.filter-bar { flex-direction: column; gap: 8px; }
.filter-bar input[type="text"], .filter-bar select { width: 100% !important; max-width: none !important; }
/* Tables: horizontal scroll wrapper */
.data-table, .mgr-table {
display: block;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
/* Touch-friendly buttons (44px target) */
.contact-btn { padding: 10px 14px; font-size: 13px; }
.contact-btn.sm { padding: 8px 10px; min-width: 40px; min-height: 40px; font-size: 14px; }
.btn-primary, .btn-secondary, button { min-height: 38px; }
/* Follow-up cards: actions wrap */
.followup-actions { justify-content: flex-start; }
.followup-top { flex-direction: column; gap: 8px; }
.followup-priority { flex: 0 0 auto; }
/* Visit plan zones */
.zones-grid { grid-template-columns: 1fr; }
.plan-city-row { padding: 12px 14px; flex-direction: column; align-items: flex-start; gap: 8px; }
.plan-city-right { width: 100%; }
.plan-zones { padding: 6px 8px 10px 14px; }
.plan-zone-row { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; }
.plan-zone-right { width: 100%; }
/* Cluster grid */
.cluster-grid { grid-template-columns: 1fr; }
/* Attention list */
.attention-card { flex-direction: column; gap: 8px; padding: 12px; }
.attention-actions { flex-direction: row; }
/* Pricing picker */
.package-card.large { max-width: none; }
.sub-picker-control { flex-direction: column; align-items: stretch; }
.machine-count-select { width: 100%; }
/* Modals */
.modal { padding: 16px !important; max-height: 90vh; overflow-y: auto; }
.picker-type-tabs { flex-direction: column; }
/* Source picker */
.source-picker { width: 100%; }
}
/* Extra small phones */
@media (max-width: 380px) {
.kpi-row { grid-template-columns: 1fr !important; }
.pipeline-strip { grid-template-columns: 1fr !important; }
.container { padding: 0 10px; }
.card { padding: 12px; }
.contact-btn { font-size: 12px; padding: 8px 10px; }
}
.tl-planned_action .tl-icon { background: #dcfce7; }
.tl-pill-planned_action { background: #dcfce7; color: #166534; }
/* Overdue (action='overdue') gets a red tint */
.tl-row.tl-planned_action[data-action="overdue"] .tl-icon { background: #fee2e2; }
/* === Timeline visual/infographic view (2026-06-26) === */
.tl-view-toggle { display:inline-flex; background:#f1f5f9; border-radius:6px; padding:2px; gap:2px; }
.tl-view-toggle button {
background:transparent; border:none; padding:6px 12px; font-size:12px; font-weight:600;
color:#475569; cursor:pointer; border-radius:5px;
}
.tl-view-toggle button.active { background:#fff; color:#0f172a; box-shadow:0 1px 2px rgba(0,0,0,0.08); }
.tl-infographic { padding:18px 24px; }
.tl-info-legend {
display:flex; align-items:center; gap:18px;
font-size:12px; color:#475569; padding-bottom:14px;
border-bottom:1px solid #f1f5f9; margin-bottom:18px; flex-wrap:wrap;
}
.tl-legend-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; }
/* Make the track itself the positioning context with explicit min-height */
.tl-info-above
.tl-info-below
.tl-info-pill {
display:inline-block; background:#f1f5f9; color:#475569;
font-weight:700; font-size:10px; padding:2px 6px; border-radius:3px;
margin-bottom:4px; letter-spacing:0.3px;
}
.tl-info-title { font-weight:700; color:#0f172a; font-size:12px; line-height:1.3; margin-bottom:3px; }
.tl-info-sub { color:#475569; font-size:11px; line-height:1.4;
overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.tl-info-meta { color:#94a3b8; font-size:10px; margin-top:4px; }
.tl-info-stage_change { border-left:3px solid #fbbf24; }
.tl-info-activity { border-left:3px solid #3b82f6; }
.tl-info-audit { border-left:3px solid #a855f7; }
.tl-info-planned_action { border-left:3px solid #22c55e; }
.tl-info-planned_action[data-action="overdue"] { border-left-color:#ef4444; }
/* Force the line to NEVER be hidden by stops */
/* Alternate left/right via :nth-child — odd stops put card on LEFT, even put card on RIGHT */
.tl-info-stop:nth-child(odd) .tl-info-card { grid-column: 1; justify-self: end; margin-right: 14px; }
.tl-info-stop:nth-child(even) .tl-info-card { grid-column: 3; justify-self: start; margin-left: 14px; }
/* Connecting arrow from card to bubble */
.tl-info-stop:nth-child(odd) .tl-info-card::after {
content: ''; position: absolute; top: 18px; right: -7px;
border-style: solid; border-width: 7px 0 7px 7px;
border-color: transparent transparent transparent #fff;
filter: drop-shadow(1px 0 0 #e2e8f0);
}
.tl-info-stop:nth-child(even) .tl-info-card::after {
content: ''; position: absolute; top: 18px; left: -7px;
border-style: solid; border-width: 7px 7px 7px 0;
border-color: transparent #fff transparent transparent;
filter: drop-shadow(-1px 0 0 #e2e8f0);
}
/* === Phase 2 v7: HORIZONTAL timeline (restored 2026-06-26) === */
.tl-info-scroll { overflow-x: auto; padding-bottom: 12px; }
.tl-info-track {
position: relative;
min-width: max-content;
height: 460px;
display: flex;
align-items: center;
padding: 100px 100px;
gap: 0;
}
.tl-info-line {
position: absolute;
left: 100px;
right: 100px;
top: calc(50% - 3px);
height: 6px;
border-radius: 3px;
background-color: #cbd5e1;
background-image: linear-gradient(90deg, #3b82f6 0%, #06b6d4 20%, #22c55e 40%, #eab308 60%, #E07B3E 80%, #ef4444 100%);
z-index: 1;
pointer-events: none;
}
.tl-info-stop {
position: relative;
flex: 0 0 200px;
min-width: 200px;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
z-index: auto;
}
.tl-info-bubble {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 46px; height: 46px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: #fff; border: 3px solid #fbbf24;
font-size: 20px;
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
z-index: 3;
}
.tl-info-bubble-activity { border-color: #3b82f6; }
.tl-info-bubble-audit { border-color: #a855f7; }
.tl-info-bubble-planned_action { border-color: #22c55e; }
.tl-info-bubble-planned_action[data-action="overdue"] { border-color: #ef4444; }
.tl-info-bubble-stage_change { border-color: #fbbf24; }
.tl-info-card {
position: absolute; left: 50%; transform: translateX(-50%);
width: 160px;
background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
padding: 10px 12px;
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
font-size: 11px;
text-align: left;
transition: transform .15s, box-shadow .15s;
}
.tl-info-card:hover { transform: translateX(-50%) translateY(-3px); box-shadow: 0 6px 14px rgba(0,0,0,0.12); }
/* Alternate above/below via :nth-child */
.tl-info-stop:nth-child(odd) .tl-info-card { bottom: calc(50% + 38px); }
.tl-info-stop:nth-child(even) .tl-info-card { top: calc(50% + 38px); }
/* === 2026-06-29: Team Timeline — per-user horizontal swim lanes === */
.tl-teamline { padding: 0; overflow: hidden; }
.tl-teamline-head {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 16px; border-bottom: 1px solid #e5e7eb; flex-wrap: wrap; gap: 12px;
background: linear-gradient(135deg, #FFF7ED 0%, #FFFBEB 100%);
}
.tl-teamline-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; }
.tl-teamline-legend-row { display: inline-flex; align-items: center; gap: 6px; color: #475569; font-weight: 600; }
.tl-teamline-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.tl-teamline-sub { font-size: 12px; color: #92400e; font-weight: 700; }
/* 2026-06-29: Bound height so BOTH scrollbars sit inside the panel — user
no longer needs to scroll the whole page down to find the horizontal bar. */
.tl-teamline-wrap {
overflow: auto;
padding: 0 16px 18px;
max-height: calc(100vh - 280px);
min-height: 420px;
}
.tl-teamline-grid {
width: 100%; border-collapse: separate; border-spacing: 0; min-width: 760px;
position: relative;
}
/* Header row — sticky to top so day labels stay visible while scrolling vertically */
.tl-teamline-grid thead th {
background: #ffffff;
padding: 12px 6px 14px;
font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase;
letter-spacing: 0.5px; text-align: center;
position: sticky; top: 0; z-index: 3;
box-shadow: inset 0 -1px 0 #e5e7eb;
}
.tl-teamline-user-col {
text-align: left !important; padding-left: 12px !important;
min-width: 160px; width: 160px;
left: 0; z-index: 4; /* sticks in BOTH directions — top-left corner */
}
.tl-teamline-totals-col { width: 70px; }
.tl-teamline-day-col { min-width: 140px; }
.tl-teamline-day-dow { font-size: 10px; color: #94a3b8; font-weight: 700; }
.tl-teamline-day-num { font-size: 13px; color: #0f172a; font-weight: 800; margin-top: 1px; }
.tl-teamline-day-today { background: linear-gradient(180deg, #fff7ed 0%, transparent 100%); }
.tl-teamline-day-today .tl-teamline-day-num { color: #E07B3E; }
/* Gradient timeline bar UNDER the header — runs across all day columns */
.tl-teamline-grid thead::after {
content: '';
}
.tl-teamline-grid thead tr::after {
content: '';
}
/* Add the time-axis bar by styling a thin gradient line above the first body row */
.tl-teamline-grid tbody tr:first-child td {
border-top: 4px solid transparent;
background-image: linear-gradient(90deg, #3b82f6 0%, #06b6d4 20%, #22c55e 40%, #eab308 60%, #E07B3E 80%, #ef4444 100%);
background-position: top;
background-size: 100% 4px;
background-repeat: no-repeat;
padding-top: 12px;
}
.tl-teamline-grid tbody tr:first-child .tl-teamline-user-cell,
.tl-teamline-grid tbody tr:first-child .tl-teamline-total-cell {
background-image: none;
background-color: #ffffff;
padding-top: 12px;
}
.tl-teamline-grid tbody tr:first-child .tl-teamline-total-cell { background-color: #fafbfc; }
/* Body rows */
.tl-teamline-grid tbody tr { transition: background 0.1s; }
.tl-teamline-grid tbody tr:hover { background: #fafbfc; }
.tl-teamline-user-cell {
padding: 12px 14px; vertical-align: top;
border-right: 1px solid #f1f5f9;
background: #ffffff;
position: sticky; left: 0; z-index: 1;
}
.tl-teamline-user-name { font-size: 13px; font-weight: 700; color: #0f172a; }
.tl-teamline-user-sub { font-size: 11px; color: #64748b; margin-top: 2px; }
.tl-teamline-day-cell {
vertical-align: top; padding: 8px 6px;
border-bottom: 1px dashed #f1f5f9;
min-height: 56px;
position: relative;
}
.tl-teamline-day-today { background: rgba(249, 115, 22, 0.04); }
.tl-teamline-day-empty {
background-image: radial-gradient(circle, #e2e8f0 1px, transparent 1px);
background-size: 12px 12px;
background-position: center;
background-repeat: no-repeat;
}
.tl-teamline-day-events { display: flex; flex-direction: column; gap: 5px; }
/* Event bubbles */
.tl-teamline-event {
display: flex; align-items: center; gap: 6px;
padding: 5px 8px; border-radius: 999px;
background: #ffffff;
border: 1.5px solid #e2e8f0;
font-size: 11px; line-height: 1.3;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
transition: transform 0.12s, box-shadow 0.12s;
max-width: 100%;
}
.tl-teamline-event:hover {
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}
.tl-teamline-event-icon { font-size: 13px; line-height: 1; flex-shrink: 0; }
.tl-teamline-event-text { display: flex; flex-direction: column; min-width: 0; overflow: hidden; line-height: 1.2; }
.tl-teamline-event-text strong { font-size: 11px; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-teamline-event-text span { font-size: 10px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.tl-teamline-ev-stage_change { border-color: #fbbf24; background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%); }
.tl-teamline-ev-activity { border-color: #3b82f6; background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%); }
.tl-teamline-ev-audit { border-color: #a855f7; background: linear-gradient(180deg, #faf5ff 0%, #f3e8ff 100%); }
.tl-teamline-ev-planned_action { border-color: #22c55e; background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%); }
.tl-teamline-ev-planned_action[title*="overdue" i] {
border-color: #ef4444; background: linear-gradient(180deg, #fef2f2 0%, #fecaca 100%);
}
.tl-teamline-total-cell {
text-align: center; vertical-align: middle;
border-left: 1px solid #f1f5f9; background: #fafbfc;
padding: 10px 6px;
}
.tl-teamline-total-num {
display: inline-block; min-width: 32px;
background: linear-gradient(135deg, #E07B3E, #ea580c); color: #ffffff;
font-size: 12px; font-weight: 800; padding: 4px 10px;
border-radius: 999px;
box-shadow: 0 1px 3px rgba(249,115,22,0.4);
}
/* === 2026-06-29: one card per (user, day, customer) + expand-to-see-extras === */
.tl-teamline-group { display: flex; flex-direction: column; gap: 3px; }
.tl-teamline-more-badge {
margin-left: auto;
background: #E07B3E; color: #ffffff;
font-size: 9px; font-weight: 800;
padding: 2px 6px;
border-radius: 999px;
flex-shrink: 0;
line-height: 1;
box-shadow: 0 1px 2px rgba(249,115,22,0.35);
}
.tl-teamline-extras {
display: flex; flex-direction: column; gap: 3px;
margin: 2px 0 4px 14px;
padding-left: 8px;
border-left: 2px solid #fed7aa;
}
.tl-teamline-extra {
font-size: 10px;
opacity: 0.92;
padding: 3px 7px;
}
.tl-teamline-extra .tl-teamline-event-text span {
font-size: 10px; color: #475569;
}
/* ====================================================================== */
/* 2026-06-29 · Hardware Fulfillment v1a */
/* Inventory Items · Stock Ledger · Low-Stock Dashboard · Modals */
/* ====================================================================== */
/* Sidebar section divider */
.nav-section {
margin: 16px 0 4px;
padding: 12px 16px 4px;
border-top: 1px solid #eef2f6;
}
.nav-section-title {
font-size: 10.5px; font-weight: 700;
color: #94a3b8;
text-transform: uppercase; letter-spacing: 0.09em;
}
/* Summary tile grid */
.inv-tiles {
display: flex; flex-wrap: wrap; gap: 10px;
margin-bottom: 12px;
}
.inv-tile {
display: inline-flex; align-items: baseline; gap: 8px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 7px 14px;
}
.inv-tile-label {
font-size: 10px; font-weight: 700; color: #64748b;
text-transform: uppercase; letter-spacing: 0.4px;
}
.inv-tile-num {
font-size: 17px; font-weight: 800; color: #0f172a;
margin-top: 0;
}
.inv-tile-fg { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border-color: #86efac; }
.inv-tile-comp { background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%); border-color: #d8b4fe; }
.inv-tile-raw { background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); border-color: #fdba74; }
.inv-tile-warn { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border-color: #fcd34d; }
.inv-tile-warn .inv-tile-num { color: #b45309; }
.inv-tile-value { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border-color: #93c5fd; }
.inv-tile-value .inv-tile-num { color: #1d4ed8; font-size: 18px; }
/* Filters bar */
.inv-filters {
display: flex; justify-content: space-between; align-items: center;
gap: 12px; flex-wrap: wrap;
margin-bottom: 12px;
}
.inv-filter-tabs { display: inline-flex; gap: 6px; }
.inv-filter-tabs button {
background: #ffffff; border: 1px solid #e5e7eb;
color: #475569; font-size: 12px; font-weight: 600;
padding: 6px 14px; border-radius: 999px; cursor: pointer;
transition: all 0.12s;
}
.inv-filter-tabs button:hover { border-color: #cbd5e1; background: #f8fafc; }
.inv-filter-tabs button.active {
background: linear-gradient(135deg, #E07B3E, #ea580c);
border-color: #ea580c; color: #ffffff;
box-shadow: 0 1px 3px rgba(249,115,22,0.4);
}
.inv-search {
flex: 1; min-width: 200px; max-width: 360px;
padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 8px;
font-size: 13px;
}
/* Items table */
.inv-table {
width: 100%; border-collapse: collapse;
background: #ffffff; border-radius: 10px; overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.inv-table thead th {
background: #f8fafc; border-bottom: 1px solid #e5e7eb;
text-align: left; padding: 10px 12px;
font-size: 11px; font-weight: 700; color: #64748b;
text-transform: uppercase; letter-spacing: 0.4px;
}
.inv-table tbody td {
border-bottom: 1px solid #f1f5f9;
padding: 10px 12px; font-size: 13px; color: #0f172a;
vertical-align: top;
}
.inv-table tbody tr:hover { background: #fafbfc; }
.inv-row-low td { background: #fffbeb; }
.inv-row-low:hover td { background: #fef3c7; }
.inv-row-out td { background: #fef2f2; }
.inv-row-out:hover td { background: #fecaca; }
.inv-code {
display: inline-block;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 12px; font-weight: 700;
background: #f1f5f9; color: #1e293b;
padding: 2px 8px; border-radius: 6px;
}
.inv-type-badge {
display: inline-block;
font-size: 10px; font-weight: 700;
padding: 2px 8px; border-radius: 999px;
text-transform: uppercase; letter-spacing: 0.4px;
}
.inv-type-FG { background: #dcfce7; color: #15803d; }
.inv-type-COMP { background: #f3e8ff; color: #6b21a8; }
.inv-type-RAW { background: #ffedd5; color: #9a3412; }
.inv-status-ok { color: #16a34a; font-weight: 700; font-size: 11px; }
.inv-status-low { color: #d97706; font-weight: 700; font-size: 11px; }
.inv-status-out { color: #b91c1c; font-weight: 700; font-size: 11px; }
/* Small action buttons */
.btn-tiny {
display: inline-block;
background: #f8fafc; border: 1px solid #e2e8f0;
color: #475569; font-size: 11px; font-weight: 600;
padding: 4px 8px; border-radius: 6px; cursor: pointer;
margin-left: 4px; transition: all 0.12s;
font-family: inherit;
}
.btn-tiny:hover { background: #f1f5f9; border-color: #cbd5e1; transform: translateY(-1px); }
.btn-tiny.btn-danger { color: #b91c1c; border-color: #fecaca; }
.btn-tiny.btn-danger:hover { background: #fef2f2; }
.inv-btn-in { color: #15803d; border-color: #86efac; background: #f0fdf4; }
.inv-btn-in:hover { background: #dcfce7; }
.inv-btn-out { color: #b45309; border-color: #fcd34d; background: #fffbeb; }
.inv-btn-out:hover { background: #fef3c7; }
.inv-btn-adj { color: #6b21a8; border-color: #d8b4fe; background: #faf5ff; }
.inv-btn-adj:hover { background: #f3e8ff; }
/* Stock Ledger */
.ledger-filters {
display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
align-items: center;
}
.ledger-filters select,
.ledger-filters input[type=date] {
padding: 7px 10px; border: 1px solid #e5e7eb; border-radius: 8px;
font-size: 13px; background: #ffffff;
}
.ledger-table .qty-pos { color: #15803d; }
.ledger-table .qty-neg { color: #b91c1c; }
.ledger-table .qty-adj { color: #6b21a8; }
.ledger-badge {
display: inline-block;
font-size: 10px; font-weight: 800;
padding: 3px 8px; border-radius: 999px;
letter-spacing: 0.4px;
}
.ledger-badge-IN { background: #dcfce7; color: #15803d; }
.ledger-badge-OUT { background: #fee2e2; color: #b91c1c; }
.ledger-badge-ADJ { background: #ede9fe; color: #6b21a8; }
.ledger-badge-BUILD { background: #fef3c7; color: #b45309; }
/* Generic status pills — used by travel-voucher status (Paid / awaiting / rejected …) */
.badge {
display: inline-block;
font-size: 11.5px; font-weight: 700;
padding: 4px 11px; border-radius: 999px;
line-height: 1.4; white-space: nowrap;
}
.badge-gray { background: #f1f5f9; color: #475569; }
.badge-blue { background: #dbeafe; color: #1d4ed8; }
.badge-yellow { background: #fef3c7; color: #b45309; }
.badge-red { background: #fee2e2; color: #b91c1c; }
.badge-green { background: #dcfce7; color: #15803d; }
.ledger-badge-UNBUILD { background: #f3f4f6; color: #475569; }
/* ── Generic modal scaffolding (re-usable; namespaced separately
so it doesn't fight the existing .modal-overlay) ────────── */
.modal-backdrop {
position: fixed; inset: 0;
background: rgba(10, 20, 40, 0.55);
display: flex; align-items: flex-start; justify-content: center;
padding: 60px 20px;
overflow-y: auto;
z-index: 200;
}
.modal-backdrop .modal {
background: #ffffff;
border-radius: 14px;
width: 100%; max-width: 560px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
padding: 0;
}
.modal-header {
display: flex; justify-content: space-between; align-items: center;
padding: 18px 24px;
border-bottom: 1px solid #e5e7eb;
}
.modal-header h3 { margin: 0; font-size: 17px; color: #0f172a; font-weight: 700; }
.bom-total-pill { margin-left: auto; margin-right: 12px; background: #fff7ed; border: 1px solid #fed7aa; color: #c2410c; font-weight: 800; font-size: 13px; padding: 6px 12px; border-radius: 8px; white-space: nowrap; }
/* Inventory list: keep the notes line to one row so tall notes don't blow up row height */
.inv-note { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Inventory actions: compact buttons, one nowrap row; the table scrolls in .inv-scroll if needed */
.inv-cat-tag { font-size: 10px; color: #64748b; background: #f1f5f9; border-radius: 5px; padding: 1px 7px; white-space: nowrap; }
.inv-actions { text-align: right; white-space: nowrap; }
.inv-actions .btn-tiny { padding: 3px 7px; font-size: 11px; margin-left: 3px; }
/* Cap the height so the table scrolls INSIDE this box — the horizontal scrollbar
stays reachable at the bottom of the visible area instead of far below the page. */
.inv-scroll { max-width: 100%; max-height: calc(100vh - 300px); overflow: auto; }
.inv-scroll .inv-table thead th { position: sticky; top: 0; z-index: 2; }
/* Supplier-quote best-price highlight */
.sq-best td { background: #f0fdf4 !important; }
.sq-badge { display: inline-block; margin-left: 5px; font-size: 9px; font-weight: 800; color: #16a34a; background: #dcfce7; border: 1px solid #86efac; border-radius: 5px; padding: 0 5px; text-transform: uppercase; vertical-align: middle; }
.kpi-chip { display: inline-block; font-size: 12px; color: #334155; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px; padding: 5px 10px; }
.inv-link { cursor: pointer; }
.inv-link:hover { color: #E07B3E; text-decoration: underline; }
.inv-rowclick { cursor: pointer; }
.inv-rowclick:hover td { background: #fff7ed; }
/* ── Item detail modal — polished ── */
.fd-modal-wide .fd-body { padding: 18px 22px 22px; }
.fd-body h4 { font-size: 14px; font-weight: 800; color: #0f172a; display: flex; align-items: center; gap: 6px; margin: 22px 0 10px; }
.fd-body h4:first-child { margin-top: 0; }
.detail-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.dt { background: #fff; border: 1px solid #e9eef5; border-left: 3px solid #E07B3E; border-radius: 10px; padding: 11px 14px; box-shadow: 0 1px 2px rgba(15,23,42,.03); }
.dt-lbl { font-size: 10px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .4px; }
.dt-val { font-size: 19px; font-weight: 800; color: #0f172a; margin-top: 4px; letter-spacing: -.2px; }
/* subtle (non-alarming) row for missing data */
.row-muted td { background: #fafbfc; color: #94a3b8; }
.noquote-chip { display: inline-block; font-size: 10px; font-weight: 700; color: #94a3b8; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 5px; padding: 1px 8px; text-transform: uppercase; }
.listprice-chip { display: inline-block; font-size: 10px; font-weight: 700; color: #2563eb; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 5px; padding: 1px 8px; text-transform: uppercase; }
/* Spreadsheet preview (SheetJS sheet_to_html output) */
.sheet-view { overflow: auto; max-height: 70vh; border: 1px solid #e2e8f0; border-radius: 8px; }
.sheet-view table { border-collapse: collapse; font-size: 12px; width: max-content; min-width: 100%; }
.sheet-view td, .sheet-view th { border: 1px solid #e5e7eb; padding: 4px 8px; white-space: nowrap; color: #0f172a; }
.sheet-view tr:first-child td { background: #f8fafc; font-weight: 700; position: sticky; top: 0; }
/* cleaner detail tables */
.fd-body .fd-table th { color: #94a3b8; font-size: 10.5px; letter-spacing: .3px; border-bottom: 1px solid #eef2f7; padding: 8px 10px; }
.fd-body .fd-table td { padding: 9px 10px; border-bottom: 1px solid #f4f6f9; }
.fd-body .fd-table tbody tr:hover td { background: #fbfcfe; }
.mv-badge { display: inline-block; font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 5px; }
.mv-IN { background: #dcfce7; color: #166534; } .mv-OUT { background: #fee2e2; color: #991b1b; }
.mv-ADJ { background: #ede9fe; color: #5b21b6; } .mv-BUILD { background: #ffedd5; color: #9a3412; } .mv-UNBUILD { background: #f1f5f9; color: #475569; }
.modal-close {
background: transparent; border: none; cursor: pointer;
font-size: 18px; color: #64748b; padding: 4px 10px; border-radius: 6px;
font-family: inherit;
}
.modal-close:hover { background: #f1f5f9; color: #0f172a; }
.modal-body { padding: 20px 24px; }
.modal-footer {
display: flex; justify-content: flex-end; gap: 10px;
padding: 14px 24px;
border-top: 1px solid #e5e7eb;
background: #fafbfc;
border-radius: 0 0 14px 14px;
}
.form-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 16px;
}
@media (max-width: 580px) {
.form-grid-2 { grid-template-columns: 1fr; }
}
.form-field { display: flex; flex-direction: column; gap: 4px; }
.form-field label {
font-size: 11px; font-weight: 700; color: #475569;
text-transform: uppercase; letter-spacing: 0.4px;
}
.form-field input,
.form-field select,
.form-field textarea {
padding: 8px 12px;
border: 1px solid #e5e7eb; border-radius: 8px;
font-size: 13px; color: #0f172a;
font-family: inherit;
background: #ffffff;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
outline: none; border-color: #E07B3E;
box-shadow: 0 0 0 3px rgba(249,115,22,0.15);
}
.inv-item-pill {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 10px 12px;
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 8px;
font-size: 13px;
}
/* ── v1b: BOM + Build ───────────────────────────────────────────── */
.inv-btn-bom { color: #1d4ed8; border-color: #93c5fd; background: #eff6ff; }
.inv-btn-bom:hover { background: #dbeafe; }
.inv-btn-build { color: #ffffff; border-color: #ea580c; background: linear-gradient(135deg, #E07B3E, #ea580c); }
.inv-btn-build:hover { background: linear-gradient(135deg, #ea580c, #c2410c); box-shadow: 0 2px 6px rgba(249,115,22,0.4); }
.bom-table thead th { background: #fff7ed; color: #9a3412; }
.bom-table tfoot td { background: #fffbeb; border-top: 2px solid #fed7aa; }
.bom-add-row {
display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
background: #f0fdf4; border: 1px dashed #86efac; border-radius: 10px;
padding: 12px 14px;
margin-top: 6px;
}
.build-qty-row {
display: flex; align-items: center; gap: 14px;
padding: 14px 18px;
background: #fffbeb; border: 1px solid #fcd34d; border-radius: 10px;
margin-bottom: 14px;
}
.build-summary {
padding: 12px 16px;
border-radius: 10px;
font-size: 14px; font-weight: 600;
margin-bottom: 12px;
}
.build-summary-ok { background: linear-gradient(135deg, #f0fdf4, #dcfce7); color: #15803d; border: 1px solid #86efac; }
.build-summary-short { background: linear-gradient(135deg, #fef2f2, #fee2e2); color: #b91c1c; border: 1px solid #fca5a5; }
.build-warning {
background: #fef3c7; border: 1px solid #fcd34d; color: #b45309;
padding: 14px 16px; border-radius: 10px; font-size: 13px;
}
.build-table thead th { background: #fffbeb; color: #b45309; }
/* ====================================================================== */
/* 2026-06-29 · v2 · PO Fulfillment + PI Workflow + Inboxes */
/* ====================================================================== */
/* PI status pills (reused everywhere) */
.pi-pill {
display: inline-block;
font-size: 10px; font-weight: 800;
padding: 2px 9px;
border-radius: 999px;
margin-left: 6px;
letter-spacing: 0.4px;
vertical-align: middle;
}
.pi-pill-DRAFT { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.pi-pill-SENT { background: #dbeafe; color: #1d4ed8; border: 1px solid #93c5fd; }
.pi-pill-ADVANCE_RECEIVED { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.pi-pill-RELEASED { background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; }
.pi-pill-IN_PROGRESS { background: #faf5ff; color: #7e22ce; border: 1px solid #d8b4fe; }
.pi-pill-FULFILLED { background: #ecfccb; color: #4d7c0f; border: 1px solid #a3e635; }
.pi-pill-CANCELLED { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
/* Fulfillment section inside a PO block */
.fulfillment-section {
margin: 12px 0 8px;
padding: 10px 12px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-left: 4px solid #E07B3E;
border-radius: 8px;
}
.fulfillment-head {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-size: 13px; color: #0f172a;
}
.fulfillment-table { font-size: 12px; }
.fulfillment-table thead th { padding: 6px 8px; font-size: 10px; }
.fulfillment-table tbody td { padding: 6px 8px; }
/* Inbox grid (Finance + Procurement) */
.inbox-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
}
.inbox-card {
background: #ffffff;
border: 1px solid #e5e7eb;
border-left: 5px solid #cbd5e1;
border-radius: 12px;
padding: 14px 16px;
display: flex; flex-direction: column; gap: 10px;
transition: transform 0.12s, box-shadow 0.12s;
}
.inbox-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
.inbox-card-DRAFT { border-left-color: #94a3b8; }
.inbox-card-SENT { border-left-color: #3b82f6; }
.inbox-card-ADVANCE_RECEIVED { border-left-color: #22c55e; background: linear-gradient(135deg, #ffffff 60%, #f0fdf4 100%); }
.inbox-card-RELEASED { border-left-color: #f59e0b; background: linear-gradient(135deg, #ffffff 60%, #fffbeb 100%); }
.inbox-card-IN_PROGRESS { border-left-color: #a855f7; background: linear-gradient(135deg, #ffffff 60%, #faf5ff 100%); }
.inbox-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.inbox-card-body { flex: 1; }
.inbox-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.inbox-card-actions .btn,
.inbox-card-actions .btn-secondary {
font-size: 12px; padding: 6px 12px;
}
/* PI editor inner layout */
.pi-meta-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
padding: 12px 14px;
background: #f8fafc;
border-radius: 8px;
font-size: 12px;
}
.pi-totals-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid #e5e7eb;
}
.pi-totals-summary {
margin-top: 14px;
padding: 14px 16px;
background: linear-gradient(135deg, #fffbeb, #fef3c7);
border: 1px solid #fcd34d;
border-radius: 10px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 8px;
font-size: 13px;
color: #0f172a;
}
.pi-totals-summary .pi-grand { font-size: 16px; font-weight: 800; color: #b45309; grid-column: 1/-1; }
/* ====================================================================== */
/* 2026-06-29 · v3 · Shipments + Suppliers + Supplier POs */
/* ====================================================================== */
/* Shipments Kanban */
.ship-kanban {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 900px) { .ship-kanban { grid-template-columns: 1fr; } }
.ship-col {
background: #f8fafc;
border-radius: 12px;
padding: 12px;
min-height: 300px;
}
.ship-col-head {
font-size: 12px; font-weight: 800;
color: #475569; text-transform: uppercase; letter-spacing: 0.6px;
padding-bottom: 8px;
margin-bottom: 10px;
border-bottom: 3px solid #cbd5e1;
display: flex; justify-content: space-between; align-items: center;
}
.ship-col-head-PACKED { border-bottom-color: #f59e0b; color: #b45309; }
.ship-col-head-DISPATCHED { border-bottom-color: #3b82f6; color: #1d4ed8; }
.ship-col-head-DELIVERED { border-bottom-color: #22c55e; color: #15803d; }
.ship-col-count {
background: #ffffff; border: 1px solid #e2e8f0;
padding: 2px 8px; border-radius: 999px;
font-size: 11px; font-weight: 800; color: #0f172a;
}
.ship-card {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 10px 12px;
margin-bottom: 8px;
font-size: 12px;
transition: transform 0.12s, box-shadow 0.12s;
}
.ship-card:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.08); }
.ship-card-actions {
display: flex; gap: 6px; flex-wrap: wrap;
margin-top: 8px; padding-top: 8px;
border-top: 1px solid #f1f5f9;
}
/* SPO status pills reuse the .pi-pill base */
.pi-pill-OPEN { background: #dbeafe; color: #1d4ed8; border: 1px solid #93c5fd; }
.pi-pill-PARTIAL { background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; }
.pi-pill-RECEIVED { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
/* ====================================================================== */
/* 2026-06-29 · v3.1 · PI ageing + Tally PI block + Nudge */
/* ====================================================================== */
.age-badge {
display: inline-block;
font-size: 11px; font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
letter-spacing: 0.2px;
white-space: nowrap;
}
.age-fresh { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.age-chase { background: #fef9c3; color: #854d0e; border: 1px solid #facc15; }
.age-urgent { background: #fed7aa; color: #9a3412; border: 1px solid #E07B3E;
animation: agePulse 2.4s ease-in-out infinite; }
.age-overdue { background: #fecaca; color: #7f1d1d; border: 1px solid #ef4444; font-weight: 800;
animation: agePulse 1.6s ease-in-out infinite; }
@keyframes agePulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18); }
}
.age-chase { animation: none; } /* gentle yellow doesn't pulse */
.age-fresh { animation: none; }
.nudge-line { font-size: 11px; color: #b45309; font-weight: 600; margin-top: 4px; }
/* Tally PI source-of-truth block in PI editor */
.tally-pi-block {
margin-top: 16px;
padding: 14px 16px;
background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
border: 1px solid #c084fc;
border-radius: 10px;
}
.tally-pi-head {
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
margin-bottom: 10px;
color: #6b21a8;
}
/* v3.3: Link-Quote prompt + quote picker */
.link-quote-banner {
display: flex; justify-content: space-between; align-items: center;
gap: 12px; flex-wrap: wrap;
margin-top: 12px;
padding: 10px 14px;
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
border: 1px solid #93c5fd;
border-left: 4px solid #2563eb;
border-radius: 8px;
font-size: 13px;
color: #1e3a8a;
}
.quote-pick-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.quote-pick-row {
display: flex; align-items: center; gap: 12px;
padding: 10px 14px;
border: 1px solid #e5e7eb; border-radius: 8px;
background: #ffffff; cursor: pointer;
transition: background 0.12s, border-color 0.12s;
}
.quote-pick-row:hover { background: #f8fafc; border-color: #cbd5e1; }
.quote-pick-selected { background: #eff6ff !important; border-color: #2563eb !important; }
.quote-pick-info { flex: 1; }
.quote-pick-total { font-weight: 700; color: #0f172a; }
/* v3.4: discount tag on PO line / fulfillment table */
.disc-tag {
display: inline-block;
font-size: 10px;
font-weight: 700;
background: #fef3c7;
color: #854d0e;
border: 1px solid #fcd34d;
padding: 1px 6px;
border-radius: 999px;
margin-top: 2px;
}
/* v3.5: Order-level discount fieldset in Edit PO modal */
.po-discount-fieldset {
margin: 14px 0 8px;
padding: 10px 14px;
border: 1px solid #fcd34d;
border-left: 4px solid #E07B3E;
border-radius: 8px;
background: #fffbeb;
}
.po-discount-fieldset legend {
font-weight: 700;
color: #854d0e;
font-size: 13px;
padding: 0 6px;
}
.po-disc-row {
display: flex;
gap: 16px;
margin-top: 6px;
flex-wrap: wrap;
}
.po-disc-radio {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
cursor: pointer;
font-weight: 600;
color: #854d0e;
}
.po-disc-preview {
margin-top: 10px;
padding: 8px 12px;
background: #ffffff;
border: 1px solid #fcd34d;
border-radius: 6px;
font-size: 12px;
color: #0f172a;
}
.po-disc-preview > div { padding: 2px 0; }
.po-disc-net {
border-top: 1px dashed #fcd34d;
margin-top: 4px;
padding-top: 4px !important;
font-size: 13px;
color: #b45309;
}
.muted-small { font-size: 11px; color: #94a3b8; font-weight: 400; }
/* ===== Field Visit Log (Timeline → Customer visits filter) — 2026-07-17 ===== */
.tl-visitlog { padding: 18px 24px; }
.tl-visitlog-head {
display: flex; align-items: baseline; gap: 12px;
margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #e2e8f0;
}
.tl-visitlog-title { font-size: 16px; font-weight: 700; color: #0f172a; }
.tl-visitlog-sub { font-size: 13px; color: #64748b; }
.tl-visitlog-empty {
padding: 28px 16px; text-align: center; color: #94a3b8; font-size: 14px;
}
.tl-visitlog-list { display: flex; flex-direction: column; gap: 10px; }
.tl-visit-card {
border: 1px solid #e2e8f0; border-left: 4px solid #E07B3E; border-radius: 10px;
padding: 12px 14px; background: #fff; transition: box-shadow .15s, transform .15s;
}
.tl-visit-card:hover { box-shadow: 0 4px 14px rgba(15,23,42,.08); transform: translateY(-1px); }
.tl-visit-cust {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px;
}
.tl-visit-cust strong { font-size: 15px; color: #0f172a; }
.tl-visit-rep { font-size: 12px; color: #2563eb; font-weight: 600; }
.tl-visit-times {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-size: 13px; color: #475569;
}
.tl-visit-times strong { color: #0f172a; font-weight: 600; }
.tl-visit-arrow { color: #cbd5e1; font-weight: 700; }
.tl-visit-dur {
background: #fff7ed; color: #c2410c; font-weight: 700; font-size: 12px;
padding: 2px 9px; border-radius: 999px; border: 1px solid #fed7aa;
}
.tl-visit-open { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; font-weight: 600; }
.tl-visit-outcome {
font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
border: 1px solid transparent; white-space: nowrap;
}
.tl-visit-chips {
display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.tl-visit-chip {
font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
border: 1px solid #cbd5e1; background: #fff; color: #475569; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px; transition: all .12s;
}
.tl-visit-chip:hover { filter: brightness(0.97); box-shadow: 0 1px 4px rgba(15,23,42,.08); }
.tl-visit-chip.active { color: #fff; }
.tl-visit-chip-n {
font-size: 11px; font-weight: 700; background: rgba(100,116,139,.15);
border-radius: 999px; padding: 0 6px; min-width: 18px; text-align: center;
}
.tl-visit-chip.active .tl-visit-chip-n { background: rgba(255,255,255,.28); }
.tl-visit-addr { font-size: 12px; color: #64748b; margin-top: 6px; }
.tl-visit-disc {
font-size: 13px; color: #334155; margin-top: 6px;
background: #f8fafc; border-radius: 6px; padding: 6px 10px;
}
@media (max-width: 640px) {
.tl-visitlog { padding: 14px 14px; }
.tl-visit-times { gap: 6px; font-size: 12px; }
}
/* ===== Sales Analysis page — 2026-07-17 ===== */
.sa-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .sa-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sa-cards { grid-template-columns: 1fr; } }
.sa-card {
background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px 18px;
box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
.sa-card-click { cursor: pointer; transition: box-shadow .12s, transform .12s, border-color .12s; }
.sa-card-click:hover { box-shadow: 0 4px 14px rgba(15,23,42,.1); transform: translateY(-1px); border-color: #cbd5e1; }
.sa-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sa-card-emoji { font-size: 18px; }
.sa-card-label { font-size: 12px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.sa-card-actual { font-size: 26px; font-weight: 800; color: #0f172a; line-height: 1.1; }
.sa-card-target { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.sa-card-target strong { color: #475569; }
.sa-card-pct { font-size: 12px; font-weight: 700; margin-top: 4px; }
.sa-bar { height: 8px; background: #f1f5f9; border-radius: 999px; overflow: hidden; margin-top: 10px; }
.sa-bar-fill { height: 100%; border-radius: 999px; transition: width .3s ease; }
.sa-bar-sm { height: 6px; margin-top: 5px; }
/* 6-month trend mini bar chart */
.sa-trend-toggle { display: inline-flex; gap: 2px; background: #f1f5f9; border-radius: 9px; padding: 3px; }
.sa-trend-toggle button {
border: none; background: transparent; font-size: 12px; font-weight: 600; color: #64748b;
padding: 5px 11px; border-radius: 7px; cursor: pointer; white-space: nowrap; transition: all .12s;
}
.sa-trend-toggle button:hover { color: #0f172a; }
.sa-trend-toggle button.active { background: #fff; color: #0f172a; box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.sa-trend { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; }
.sa-trend-col {
display: flex; flex-direction: column; align-items: center; gap: 4px;
cursor: pointer; padding: 6px 4px; border-radius: 10px; transition: background .12s;
}
.sa-trend-col:hover { background: #f8fafc; }
.sa-trend-cur { background: #fff7ed; }
.sa-trend-cur:hover { background: #ffedd5; }
.sa-trend-val { font-size: 14px; font-weight: 800; color: #0f172a; }
.sa-trend-bar-wrap { height: 120px; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.sa-trend-bar {
width: 60%; max-width: 42px; min-height: 3px; border-radius: 6px 6px 0 0;
background: linear-gradient(180deg, #fb923c, #E07B3E); transition: height .3s ease;
}
.sa-trend-cur .sa-trend-bar { background: linear-gradient(180deg, #E07B3E, #ea580c); box-shadow: 0 0 0 2px #fed7aa; }
.sa-trend-month { font-size: 12px; font-weight: 700; color: #475569; }
.sa-trend-sub { font-size: 11px; color: #0891b2; font-weight: 600; display: flex; flex-direction: column; align-items: center; line-height: 1.4; }
@media (max-width: 560px) { .sa-trend-bar-wrap { height: 80px; } .sa-trend-val, .sa-trend-sub { font-size: 10px; } }
/* Targets are leadership-only: hide the target numbers/bars for the sales team */
.hide-targets .sa-card-target,
.hide-targets .sa-card-pct,
.hide-targets .sa-cell-target,
.hide-targets .sa-cell-pct,
.hide-targets .sa-bar,
.hide-targets .sa-bar-sm { display: none !important; }
/* Month/Quarter/Year toggle */
.sa-gran-toggle { display: inline-flex; gap: 2px; background: #f1f5f9; border-radius: 9px; padding: 3px; }
.sa-gran-toggle button { border: none; background: transparent; font-size: 12px; font-weight: 600; color: #64748b; padding: 5px 12px; border-radius: 7px; cursor: pointer; transition: all .12s; }
.sa-gran-toggle button:hover { color: #0f172a; }
.sa-gran-toggle button.active { background: #fff; color: #0f172a; box-shadow: 0 1px 3px rgba(15,23,42,.12); }
/* Sales Analysis filter bar — labelled dropdowns */
.sa-filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.sa-filter { display: flex; flex-direction: column; gap: 4px; }
.sa-filter > label { font-size: 10.5px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .4px; padding-left: 2px; }
.sa-filter select, .sa-filter input[type="month"] { height: 36px; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0 10px; font-size: 13px; font-weight: 600; color: #0f172a; background: #fff; cursor: pointer; }
.sa-filter select:focus, .sa-filter input[type="month"]:focus { outline: none; border-color: #E07B3E; box-shadow: 0 0 0 3px rgba(249,115,22,.12); }
@media (max-width: 640px){ .sa-filters { width: 100%; } .sa-filter { flex: 1 1 44%; } .sa-filter select, .sa-filter input[type="month"] { width: 100%; } }
/* Horizontal by-member bars */
.sa-hbar { display: flex; flex-direction: column; gap: 8px; }
.sa-hbar-row { display: grid; grid-template-columns: 160px 1fr 90px; align-items: center; gap: 12px; cursor: pointer; padding: 3px 4px; border-radius: 8px; transition: background .12s; }
.sa-hbar-row:hover { background: #f8fafc; }
.sa-hbar-name { font-size: 13px; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-hbar-track { height: 18px; background: #f1f5f9; border-radius: 6px; overflow: hidden; }
.sa-hbar-fill { height: 100%; border-radius: 6px; transition: width .3s ease; background: #E07B3E; }
.sa-hbar-visits { background: #E07B3E; }
.sa-hbar-revenue { background: linear-gradient(90deg,#fcd34d,#ca8a04); }
.sa-hbar-pos { background: linear-gradient(90deg,#22d3ee,#0891b2); }
.sa-hbar-wins { background: #16a34a; }
.sa-hbar-val { font-size: 13px; font-weight: 800; color: #0f172a; text-align: right; }
@media (max-width: 560px){ .sa-hbar-row { grid-template-columns: 110px 1fr 66px; } }
/* Sales funnel (pipeline snapshot) */
.sa-funnel-stats { display: flex; gap: 18px; }
.sa-fstat { text-align: center; }
.sa-fstat-val { font-size: 20px; font-weight: 800; color: #0f172a; line-height: 1.1; }
.sa-fstat-lbl { font-size: 11px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .3px; }
/* Clean centered bar-funnel (replaces the jagged clip-path version) */
.sa-funnel2 { max-width: 640px; margin: 16px auto 0; display: flex; flex-direction: column; align-items: center; }
.sa-fn-row { width: 100%; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.sa-fn-conv { font-size: 11px; font-weight: 700; color: #94a3b8; margin: 5px 0; line-height: 1; }
.sa-fn-bar {
height: 48px; min-width: 120px; border-radius: 10px; color: #fff;
display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px;
box-shadow: 0 2px 6px rgba(15,23,42,.12); transition: filter .12s, transform .12s;
}
.sa-fn-row:hover .sa-fn-bar { filter: brightness(1.07); transform: translateY(-1px); }
.sa-fn-name { font-size: 13.5px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.25); white-space: nowrap; }
.sa-fn-count { font-size: 20px; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.sa-fn-meta { font-size: 11px; color: #64748b; font-weight: 600; margin: 4px 0 2px; white-space: nowrap; }
.sa-fn-split { display: flex; gap: 8px; margin: 2px 0 4px; }
.sa-fn-split span { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 8px; }
.sa-fn-new { color: #047857; background: #ecfdf5; border: 1px solid #d1fae5; }
.sa-fn-old { color: #b45309; background: #fffbeb; border: 1px solid #fde68a; }
/* Lost-analysis: highlight the clicked rep row */
.sa-rep-active { background: #fff7ed; }
.sa-rep-active td { color: #c2410c; font-weight: 700; }
.sa-funnel { display: flex; flex-direction: column; align-items: stretch; max-width: 560px; margin: 16px auto 0; }
.sa-funnel-seg { height: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 3px; cursor: pointer; transition: filter .12s, transform .12s; }
.sa-funnel-seg:hover { filter: brightness(1.06); }
.sa-funnel-num { font-size: 24px; font-weight: 800; color: #fff; line-height: 1.05; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.sa-funnel-lbl { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.3); line-height: 1.15; }
.sa-funnel-val { font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); line-height: 1.2; max-width: 96%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-funnel-conv { font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.82); text-shadow: 0 1px 2px rgba(0,0,0,.3); line-height: 1.2; max-width: 96%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-funnel-num { line-height: 1.05; }
@media (max-width: 560px){ .sa-funnel-stats { gap: 12px; } .sa-funnel-seg { height: 66px; } .sa-funnel-num { font-size: 21px; } }
/* Funnel drill-down modal */
.fd-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(15,23,42,.5); display: flex; align-items: center; justify-content: center; padding: 20px; }
.fd-modal { background: #fff; border-radius: 14px; width: 100%; max-width: 760px; max-height: 82vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(15,23,42,.3); overflow: hidden; }
.fd-modal-wide { max-width: 1000px; }
.loc-badge { display: inline-block; margin-left: 5px; font-size: 10px; font-weight: 700; color: #0891b2; background: #ecfeff; border: 1px solid #a5f3fc; border-radius: 5px; padding: 0 5px; vertical-align: middle; white-space: nowrap; }
.fd-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #eef2f7; }
.fd-close { border: none; background: #f1f5f9; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 15px; color: #475569; }
.fd-close:hover { background: #e2e8f0; color: #0f172a; }
.fd-body { overflow-y: auto; padding: 6px 20px 18px; }
.fd-row { cursor: pointer; }
.fd-row:hover td { background: #f8fafc; }
/* drill-down tables fit the modal — no horizontal scroll */
.fd-table { min-width: 0 !important; width: 100%; table-layout: fixed; }
.fd-table th, .fd-table td { padding: 10px 8px; word-break: break-word; overflow-wrap: anywhere; }
.fd-table th.fd-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.fd-table th.fd-sort:hover { color: #0f172a; }
.fd-sort-ic { color: #cbd5e1; font-size: 11px; margin-left: 2px; }
.fd-table th.fd-sort:hover .fd-sort-ic { color: #64748b; }
[x-cloak] { display: none !important; }
/* Custom hover tooltip — replaces native title= */
.app-tip { position: fixed; z-index: 9999; pointer-events: none; transform: translate(-24px, 24px);
background: #0f172a; color: #fff; padding: 7px 11px; border-radius: 7px; font-size: 12px; font-weight: 500;
line-height: 1.4; max-width: 320px; box-shadow: 0 6px 20px rgba(15,23,42,.28); white-space: normal; }
.app-tip.tip-left { transform: translate(calc(-100% + 24px), 24px); }
/* KPI scorecard table */
.kpi-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.kpi-table th { text-align: left; font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .3px; padding: 8px 12px; border-bottom: 2px solid #e2e8f0; }
.kpi-table th.num, .kpi-table td.num { text-align: right; }
.kpi-table td { padding: 12px; border-bottom: 1px solid #f1f5f9; color: #0f172a; vertical-align: middle; }
.kpi-table tr:hover td { background: #f8fafc; }
.kpi-note { display: block; font-size: 11px; font-weight: 400; color: #94a3b8; margin-top: 2px; }
.kpi-pct-wrap { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; min-width: 130px; }
.kpi-pct-track { width: 78px; height: 8px; background: #f1f5f9; border-radius: 5px; overflow: hidden; }
.kpi-pct-fill { height: 100%; border-radius: 5px; transition: width .3s ease; }
.kpi-pct-num { font-weight: 800; min-width: 38px; text-align: right; }
.kpi-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.kpi-status-lbl { font-size: 12px; font-weight: 700; }
/* dots + fills carry the background colour */
.kpi-dot.kpi-good, .kpi-pct-fill.kpi-good { background-color: #16a34a; }
.kpi-dot.kpi-ok, .kpi-pct-fill.kpi-ok { background-color: #2563eb; }
.kpi-dot.kpi-warn, .kpi-pct-fill.kpi-warn { background-color: #f59e0b; }
.kpi-dot.kpi-bad, .kpi-pct-fill.kpi-bad { background-color: #ef4444; }
.kpi-dot.kpi-na, .kpi-pct-fill.kpi-na { background-color: #cbd5e1; }
/* text labels carry the ink colour only */
.kpi-status-lbl.kpi-good { color: #16a34a; } .kpi-status-lbl.kpi-ok { color: #2563eb; }
.kpi-status-lbl.kpi-warn { color: #b45309; } .kpi-status-lbl.kpi-bad { color: #dc2626; } .kpi-status-lbl.kpi-na { color: #94a3b8; }
/* Sales trend line chart */
.sa-line-plot { position: relative; height: 180px; }
.sa-line-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sa-line-pt { position: absolute; transform: translate(-50%, -50%); cursor: pointer; z-index: 2; }
.sa-line-dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: #E07B3E; border: 2px solid #fff; transition: transform .12s; }
.sa-line-pt:hover .sa-line-dot { transform: scale(1.25); }
.sa-line-dot.cur { width: 12px; height: 12px; }
.sa-line-val { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: #0f172a; white-space: nowrap; }
.sa-line-labels { display: flex; margin-top: 8px; }
.sa-line-lbl { flex: 1; text-align: center; font-size: 12px; font-weight: 600; color: #475569; cursor: pointer; }
.sa-line-lbl:hover { color: #0f172a; }
.sa-line-lbl.cur { color: #ea580c; font-weight: 800; }
/* Floating jump-to-top / jump-to-bottom control for long lists */
.jump-nav { position: fixed; right: 22px; bottom: 26px; z-index: 90; display: flex; flex-direction: column; gap: 9px; }
.jump-nav button {
width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
background: #E07B3E; color: #fff; font-size: 18px; line-height: 1;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 5px 14px rgba(15,23,42,0.22); transition: background 0.15s, transform 0.15s;
}
.jump-nav button:hover { background: #ea580c; transform: translateY(-1px); }
.jump-nav button:active { transform: translateY(1px); }
.seg-toggle { display: inline-flex; gap: 4px; background: #f1f5f9; border-radius: 10px; padding: 4px; margin-top: 14px; }
.seg-toggle button { border: none; background: transparent; color: #475569; font-weight: 600; font-size: 13px; padding: 6px 16px; border-radius: 8px; cursor: pointer; transition: all 0.15s; }
.seg-toggle button span { color: #94a3b8; font-weight: 500; }
.seg-toggle button.active { background: #fff; color: #E07B3E; box-shadow: 0 1px 3px rgba(15,23,42,0.12); }
.seg-toggle button.active span { color: #fb923c; }
/* Searchable customer picker (quote form) */
.cust-picker { position: relative; }
.cust-picker-menu {
position: absolute; top: 100%; left: 0; right: 0; z-index: 40; margin-top: 4px;
background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
box-shadow: 0 8px 24px rgba(15,23,42,0.12); max-height: 300px; overflow-y: auto;
}
.cust-picker-item { padding: 9px 14px; cursor: pointer; font-size: 13.5px; border-bottom: 1px solid #f1f5f9; }
.cust-picker-item:last-child { border-bottom: none; }
.cust-picker-item:hover { background: #f8fafc; }
.fy-select { border: 1px solid #e2e8f0; background: #fff; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; color: #0f172a; cursor: pointer; }
.fy-select:focus { outline: none; border-color: #E07B3E; }
/* Compact All-Quotes header — smaller controls + tighter spacing so the table starts higher */
.q-filters-card { padding-top: 10px; padding-bottom: 10px; }
/* keep the whole filter row on one line — compact controls */
.q-filters .filter-bar { flex-wrap: nowrap; }
.q-filters .filter-bar > * { flex: 0 0 auto; }
.q-filters .filter-bar input[type="text"] { flex: 1 1 auto; }
.q-filters .filter-bar select, .q-filters .filter-bar input,
.q-filters .filter-bar input[type="date"] { padding: 7px 9px; font-size: 12.5px; }
@media (max-width: 1100px) { .q-filters .filter-bar { flex-wrap: wrap; } }
.q-filters input, .q-filters select { height: 34px; padding: 5px 9px; font-size: 12.5px; border-radius: 8px; box-sizing: border-box; }
/* don't let selects/dates grow — pack them tight so all filters fit one row */
.q-filters .filter-bar select, .q-filters .filter-bar input[type="date"] { flex: 0 1 auto; }
.q-filters .filter-bar select { min-width: 96px; max-width: 150px; }
.q-filters .filter-bar input[type="date"] { min-width: 128px; max-width: 148px; }
.q-filters .seg-toggle button { padding: 5px 10px; font-size: 12px; }
.q-filters input[type="checkbox"] { height: auto; }
.pf-summary { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.pf-sum-tile { display: inline-flex; align-items: baseline; gap: 6px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 5px 10px; }
.pf-sum-label { font-size: 9.5px; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.pf-sum-num { font-size: 14px; font-weight: 800; color: #0f172a; margin-top: 0; white-space: nowrap; }
.pf-age { font-size: 12px; font-weight: 700; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 2px 9px; }
.pf-age.pf-overdue { color: #b91c1c; background: #fee2e2; }
.pf-status { display:inline-block; font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #475569; background: #e2e8f0; border-radius: 4px; padding: 1px 6px; margin-top: 2px; }
/* Payment Follow-up — compact milestones cell (no wall-of-text wrapping) */
.pf-ms-list { display: flex; flex-direction: column; gap: 3px; width: 268px; max-width: 268px; }
.pf-ms-row { display: grid; grid-template-columns: 14px minmax(0,1fr) auto auto; align-items: center; gap: 6px; font-size: 11.5px; line-height: 1.3; cursor: default; }
.pf-ms-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pf-ms-amt { font-weight: 700; font-variant-numeric: tabular-nums; opacity: .9; text-align: right; white-space: nowrap; }
.pf-ms-date { font-size: 10.5px; color: #94a3b8; font-weight: 600; white-space: nowrap; }
/* Payment Follow-up — tidy action buttons (primary row + compact icon row) */
.pf-actions { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.pf-actions-main { display: flex; gap: 6px; }
.pf-actions-icons { display: flex; gap: 4px; }
.pf-ibtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; border: 1px solid #e2e8f0; background: #fff; border-radius: 7px; font-size: 14px; cursor: pointer; text-decoration: none; transition: background .12s, border-color .12s; }
.pf-ibtn:hover { background: #f1f5f9; border-color: #cbd5e1; }
/* Voucher line drag-to-reorder */
.vch-grip { font-size: 15px; line-height: 1; }
.vch-grip:hover { color: #64748b !important; }
.vch-grip:active { cursor: grabbing !important; }
tr.vch-drag-over > td { background: #f0f7ff; }
.sa-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.sa-table th {
text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .3px;
color: #94a3b8; font-weight: 700; padding: 8px 12px; border-bottom: 2px solid #e2e8f0;
}
.sa-table th.num, .sa-table td.num { text-align: right; }
.sa-table td { padding: 12px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.sa-cell-nums { display: flex; align-items: baseline; gap: 5px; }
.sa-cell-actual { font-size: 16px; font-weight: 700; color: #0f172a; }
.sa-cell-target { font-size: 12px; color: #94a3b8; }
.sa-cell-pct { font-size: 11px; color: #64748b; font-weight: 600; margin-top: 3px; }
.sa-total-row td { border-top: 2px solid #e2e8f0; border-bottom: none; background: #f8fafc; font-size: 15px; }
.sa-rep-row { cursor: pointer; transition: background .12s; }
.sa-rep-row:hover { background: #fff7ed; }
/* Rep drill-down modal */
.sa-drill { max-width: 680px; max-height: 88vh; overflow-y: auto; }
.sa-drill-summary {
display: flex; flex-wrap: wrap; gap: 14px; margin: 14px 0 6px; padding: 12px 14px;
background: #f8fafc; border-radius: 10px; font-size: 13px; color: #475569;
}
.sa-drill-summary strong { color: #0f172a; }
.sa-drill-h { font-size: 14px; margin: 18px 0 8px; color: #0f172a; border-bottom: 1px solid #e2e8f0; padding-bottom: 6px; }
.sa-drill-list { display: flex; flex-direction: column; gap: 8px; }
.sa-drill-item {
border: 1px solid #e2e8f0; border-radius: 9px; padding: 10px 12px; transition: box-shadow .12s;
}
.sa-drill-item:hover { box-shadow: 0 2px 8px rgba(15,23,42,.07); }
.sa-drill-item-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sa-drill-item-top strong { font-size: 14px; color: #0f172a; }
.sa-drill-money { font-size: 14px; font-weight: 800; color: #ca8a04; white-space: nowrap; }
.sa-disco { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.sa-chip {
font-size: 11px; font-weight: 600; color: #475569; background: #f1f5f9;
border: 1px solid #e2e8f0; border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.sa-chip-seg { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.sa-disco-empty { font-size: 11px; color: #cbd5e1; font-style: italic; }
/* ===== Org / Reporting chart — 2026-07-17 ===== */
.org-tree { display: flex; flex-direction: column; gap: 6px; }
.org-node { display: flex; align-items: center; gap: 4px; }
.org-elbow { color: #cbd5e1; font-size: 16px; margin-right: 2px; }
.org-card {
display: flex; align-items: center; gap: 10px; flex: 1;
border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 12px; background: #fff;
transition: box-shadow .12s; max-width: 460px;
}
.org-card:hover { box-shadow: 0 2px 8px rgba(15,23,42,.07); }
.org-root .org-card { border-color: #fdba74; background: #fff7ed; }
.org-avatar {
width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg, #E07B3E, #ea580c); color: #fff;
display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px;
}
.org-root .org-avatar { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.org-info { min-width: 0; }
.org-name { font-size: 14px; font-weight: 700; color: #0f172a; display: flex; align-items: center; gap: 8px; }
.org-reports { font-size: 11px; font-weight: 700; color: #E07B3E; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 999px; padding: 1px 7px; }
.org-sub { font-size: 12px; color: #64748b; }
/* ===== Edit-protected quote description — 2026-07-21 ===== */
.desc-label-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.desc-lock-controls { display: inline-flex; align-items: center; gap: 8px; }
.desc-lock-tag { font-size: 11px; font-weight: 600; color: #94a3b8; }
.desc-unlocked-tag { font-size: 11px; font-weight: 700; color: #16a34a; }
.desc-edit-btn {
font-size: 12px; font-weight: 600; color: #c2490b; background: #fff7ed;
border: 1px solid #fed7aa; border-radius: 7px; padding: 3px 10px; cursor: pointer; transition: background .12s;
}
.desc-edit-btn:hover { background: #ffedd5; }
input.desc-ro, textarea.desc-ro {
background: #f1f5f9 !important; color: #64748b !important; cursor: not-allowed;
border-style: dashed !important;
}
.co-disco {
border: 1px solid #fed7aa; background: #fff8f2; border-radius: 10px;
padding: 12px 14px; margin-bottom: 14px;
}
.co-disco-head { font-size: 13px; font-weight: 700; color: #c2490b; margin-bottom: 6px; }
.co-disco-sub { font-weight: 500; color: #94a3b8; font-size: 11px; }
.co-disco-scroll { max-height: 44vh; overflow-y: auto; padding-right: 6px; }
.co-disco-section { margin-top: 10px; }
.co-disco-section h4 {
font-size: 11px; font-weight: 700; color: #0f172a; margin: 6px 0 8px;
text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid #fde4cf; padding-bottom: 4px;
}
.co-disco-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.co-disco-grid > label { font-size: 12px; color: #475569; font-weight: 600; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 560px) { .co-disco-grid { grid-template-columns: 1fr; } }
.visit-summary-card { padding: 14px 18px; }
.vs-row { display: flex; gap: 14px; flex-wrap: wrap; }
.vs-stat {
flex: 1; min-width: 110px; text-align: center; padding: 6px 8px;
border-right: 1px solid #eef2f6;
}
.vs-stat:last-child { border-right: none; }
.vs-num { font-size: 17px; font-weight: 700; color: #E07B3E; line-height: 1.15; }
.vs-lbl { font-size: 11px; color: #64748b; font-weight: 600; margin-top: 3px; }
.vs-clickable { cursor: pointer; border-radius: 8px; transition: background .12s; }
.vs-clickable:hover { background: #fff7ed; }
.vs-history { margin-top: 12px; padding-top: 10px; border-top: 1px solid #eef2f6; display: flex; flex-direction: column; gap: 6px; }
.vs-visit-row {
display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
font-size: 13px; color: #475569; padding: 6px 10px; background: #f8fafc; border-radius: 8px;
}
.vs-visit-when strong, .vs-visit-when span { color: #0f172a; }
.vs-visit-dur { font-size: 12px; font-weight: 700; color: #c2490b; white-space: nowrap; }
@media (max-width: 560px) { .vs-stat { min-width: 45%; border-right: none; } }
/* Searchable "Add from visit" picker in the travel voucher */
.vch-visit-picker { position: relative; }
.vch-visit-input {
font-size: 12px; padding: 6px 10px; min-width: 230px;
border: 1px solid #cbd5e1; border-radius: 8px;
}
.vch-visit-menu {
position: absolute; z-index: 30; top: calc(100% + 4px); right: 0;
min-width: 260px; max-height: 260px; overflow-y: auto;
background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
box-shadow: 0 8px 24px rgba(15,23,42,.12); padding: 4px;
}
.vch-visit-item {
font-size: 12.5px; color: #334155; padding: 8px 10px; border-radius: 7px; cursor: pointer;
}
.vch-visit-item:hover { background: #fff7ed; color: #0f172a; }
.vch-visit-empty { font-size: 12px; color: #94a3b8; padding: 10px; text-align: center; }
.vch-menu-close { text-align: right; font-size: 11px; font-weight: 600; color: #94a3b8; padding: 4px 8px; cursor: pointer; border-bottom: 1px solid #f1f5f9; }
.vch-menu-close:hover { color: #ef4444; }
/* Voucher period calendar strip */
.vch-cal { margin-top: 14px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px 14px; background: #fff; }
.vch-cal-head { font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 10px; }
.vch-cal-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.vch-cal-day {
position: relative; flex: 0 0 auto; width: 46px; text-align: center; padding: 6px 4px;
border: 1px solid #e5e7eb; border-radius: 8px; background: #f8fafc;
}
.vch-cal-click { cursor: pointer; transition: background .12s, box-shadow .12s; }
.vch-cal-click:hover { background: #fff7ed; box-shadow: 0 2px 6px rgba(15,23,42,.08); }
.vch-cal-weekend { background: #f1f5f9; }
.vch-cal-has { border-color: #fdba74; background: #fff4ec; }
.vch-cal-dow { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; font-weight: 700; }
.vch-cal-num { font-size: 16px; font-weight: 800; color: #0f172a; line-height: 1.1; }
.vch-cal-mon { font-size: 9px; color: #94a3b8; }
.vch-cal-badge {
position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; line-height: 16px;
font-size: 10px; font-weight: 700; color: #fff; background: #E07B3E; border-radius: 999px; padding: 0 4px;
}
.vch-visit-sep { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; font-weight: 700; padding: 6px 10px 3px; border-top: 1px solid #eef2f6; margin-top: 2px; }
.vch-cust-item { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
/* ── Travel voucher editor — mobile layout ──────────────────────────────
On phones the sticky top header (trip + periods + the whole add-line
toolbar + search) was eating the entire viewport, hiding the line-items
table, and the "Or add from visit" input overflowed the right edge. */
@media (max-width: 640px) {
/* Full-screen editor so the grid actually has room */
.vch-modal {
width: 100vw !important; max-width: 100vw !important;
height: 100vh !important; max-height: 100vh !important;
height: 100dvh !important; max-height: 100dvh !important;
border-radius: 0 !important;
}
/* Let the header scroll away instead of pinning — the table becomes reachable */
.vch-frozen-top { position: static !important; padding: 12px 12px 8px !important; }
/* Tighter side padding for the whole body + items region */
.vch-modal .modal-body > div { padding-left: 12px !important; padding-right: 12px !important; }
.vch-frozen-top { padding-left: 12px !important; padding-right: 12px !important; }
/* "Or add from visit / customer" — stack the label above a full-width input */
.vch-addfrom-row { flex-direction: column !important; align-items: stretch !important; gap: 6px !important; }
.vch-addfrom-row .vch-visit-picker { width: 100% !important; }
/* Keep the action bar pinned + compact so Save/Submit are always reachable */
.vch-frozen-bottom { padding: 10px 12px !important; }
.vch-frozen-bottom > div:last-child { flex-wrap: wrap; gap: 6px; }
.vch-frozen-bottom .btn { font-size: 12px; padding: 8px 10px; }
.vch-frozen-bottom > div:first-child > div:last-child { font-size: 20px !important; }
/* Add-line toolbar buttons a touch smaller so more fit per row */
.vch-frozen-top .btn.btn-sm { font-size: 12px; padding: 7px 9px; }
}
.vch-cust-main { flex: 1; cursor: pointer; }
.vch-mini { font-size: 10px; padding: 2px 8px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; color: #64748b; cursor: pointer; white-space: nowrap; }
.vch-mini:hover { background: #f1f5f9; color: #0f172a; }
/* ── Implementation requests board ──────────────────────────────────────── */
.impl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; margin-top: 12px; }
.impl-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; background: #fff; display: flex; flex-direction: column; gap: 10px; }
.impl-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.impl-cust { font-weight: 800; font-size: 15px; color: #0f172a; overflow-wrap: anywhere; }
.impl-type { color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px; white-space: nowrap; flex-shrink: 0; }
.impl-meta { font-size: 12px; color: #64748b; display: flex; gap: 6px; flex-wrap: wrap; }
.impl-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.impl-controls label { font-size: 10px; font-weight: 700; color: #475569; text-transform: uppercase; display: flex; flex-direction: column; gap: 3px; }
.impl-controls select, .impl-controls input { font-size: 13px; padding: 6px 8px; border: 1px solid #e5e7eb; border-radius: 7px; font-weight: 400; text-transform: none; color: #0f172a; width: 100%; box-sizing: border-box; }
.impl-log-add { display: flex; gap: 6px; margin-bottom: 6px; }
.impl-log-add input { flex: 1; min-width: 0; font-size: 12px; padding: 6px 8px; border: 1px solid #e5e7eb; border-radius: 7px; }
.impl-notes { width: 100%; box-sizing: border-box; font-size: 12px; padding: 8px; border: 1px solid #e5e7eb; border-radius: 7px; resize: vertical; font-family: inherit; white-space: pre-wrap; }
.impl-card-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) { .impl-grid { grid-template-columns: 1fr; } }
/* ── Wide tables on mobile: scroll sideways instead of collapsing to 1 char/line ──
Any many-column table (data-table / sa-table / cart / line-item / quote) was being
squeezed by width:100% until every cell wrapped one letter per row. Turn the table
into its own horizontally-scrollable block on phones so columns keep their width. */
@media (max-width: 640px) {
table.data-table, table.sa-table, table.cart-table, table.li-table, table.itemquote-table {
display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
table.data-table th, table.sa-table th, table.cart-table th, table.li-table th, table.itemquote-table th { white-space: nowrap; }
table.data-table td, table.sa-table td, table.cart-table td { white-space: nowrap; }
}
.rev-badge {
font-size: 12px; font-weight: 700; color: #c2490b; background: #fff4ec;
border: 1px solid #fed7aa; border-radius: 999px; padding: 3px 11px; letter-spacing: .02em;
}
/* v3.5: Hide x-cloak elements until Alpine has initialized — prevents flash of modals on page refresh */
[x-cloak] { display: none !important; }
/* 🔔 Notification bell — swing/ring animation while unread notifications exist */
@keyframes bell-swing {
0% { transform: rotate(0); }
6% { transform: rotate(17deg); }
13% { transform: rotate(-15deg); }
20% { transform: rotate(12deg); }
27% { transform: rotate(-9deg); }
34% { transform: rotate(6deg); }
40% { transform: rotate(0); }
100% { transform: rotate(0); } /* rest for the remainder of the cycle */
}
.bell-ring {
display: inline-block;
transform-origin: top center;
animation: bell-swing 2.4s ease-in-out infinite;
}
@keyframes bell-badge-pulse {
0%,100% { transform: scale(1); }
50% { transform: scale(1.18); }
}
.bell-badge-pulse { animation: bell-badge-pulse 1.4s ease-in-out infinite; }
/* On phones, anchor the notification panel to the viewport so it can't run off the left edge */
@media (max-width: 640px) {
.notif-panel {
position: fixed !important;
left: 8px !important; right: 8px !important; top: 60px !important;
width: auto !important; max-width: none !important;
max-height: 70vh !important;
}
}
.notif-item { display: flex; gap: 11px; padding: 12px 14px; border-bottom: 1px solid #f1f5f9; }
.notif-item.notif-unread { background: #fff7ed; }
.notif-item:hover { background: #f8fafc; }
.notif-dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; }
.notif-dot-read { background: #dfe4ea; }
.notif-dot-unread { background: #E07B3E; }
.notif-body-col { flex: 1; min-width: 0; }
.notif-clickable { cursor: pointer; }
.notif-title { font-weight: 700; font-size: 13px; color: #0f172a; line-height: 1.3; }
.notif-msg { font-size: 12px; color: #5b6675; margin-top: 2px; line-height: 1.35; word-break: break-word; }
.notif-time { font-size: 10.5px; color: #a3adba; margin-top: 3px; }
.notif-actions { flex: 0 0 auto; align-self: center; }
.notif-mark {
border: 1px solid #fed7aa; background: #fff7ed; color: #c2410c;
font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 7px; cursor: pointer; white-space: nowrap;
}
.notif-mark:hover { background: #ffedd5; }
.notif-mark-undo { border-color: #e2e8f0; background: #f8fafc; color: #64748b; padding: 4px 8px; }
.notif-mark-undo:hover { background: #eef2f7; }
/* Document editor — spreadsheet-like table editing (grid lines + hover) shown only while editing */
/* Component supplier-quote table — keep Notes from blowing out the row */
.itemquote-table td:nth-child(10) { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
/* Supplier online-portal credentials cell */
.sup-portal { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.sup-portal-link { color: #2563eb; font-weight: 600; text-decoration: none; }
.sup-portal-link:hover { text-decoration: underline; }
.sup-cred { display: flex; align-items: center; gap: 5px; }
.sup-cred-lbl { color: #94a3b8; font-size: 10px; text-transform: uppercase; width: 30px; }
.sup-cred code { background: #f1f5f9; border-radius: 4px; padding: 1px 6px; font-size: 12px; }
.sup-copy { border: none; background: none; cursor: pointer; font-size: 12px; padding: 0 2px; color: #64748b; }
.sup-copy:hover { color: #E07B3E; }
/* Floating recorder bar (fixed, above everything) */
.rec-float {
position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 1100;
display: flex; align-items: center; gap: 12px;
background: #1a2b4a; color: #fff; border-radius: 999px; padding: 10px 16px;
box-shadow: 0 8px 24px rgba(0,0,0,.28); font-weight: 600; font-size: 14px;
}
.rec-float .rec-time { color: #fca5a5; font-variant-numeric: tabular-nums; }
.rec-float .rec-stop { background: #dc2626; color: #fff; border: none; border-radius: 999px; padding: 7px 14px; font-weight: 700; cursor: pointer; }
.rec-float .rec-stop:hover { background: #b91c1c; }
/* Paused (mic muted by a screen lock) — amber, so it never looks like it's still capturing */
.rec-float.rec-paused { background: #78350f; }
.rec-float.rec-paused .rec-dot, .rec-live.rec-paused .rec-dot { background: #f59e0b; animation: none; }
.rec-live.rec-paused { background: #fffbeb; border-color: #fde68a; }
/* Visit voice recordings */
.rec-box { display: flex; align-items: center; gap: 14px; margin: 10px 0 16px; }
.rec-start {
display: inline-flex; align-items: center; gap: 8px; background: #E07B3E; color: #fff;
border: none; border-radius: 10px; padding: 12px 22px; font-size: 15px; font-weight: 700; cursor: pointer;
}
.rec-start:hover { background: #ea6a0c; }
.rec-start:disabled { opacity: .55; cursor: not-allowed; }
.rec-live { display: inline-flex; align-items: center; gap: 14px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 10px 18px; }
.rec-dot { width: 13px; height: 13px; border-radius: 50%; background: #dc2626; animation: recPulse 1s infinite; }
@keyframes recPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.rec-time { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 18px; color: #b91c1c; min-width: 52px; }
.rec-stop { background: #dc2626; color: #fff; border: none; border-radius: 8px; padding: 9px 18px; font-weight: 700; cursor: pointer; }
.rec-stop:hover { background: #b91c1c; }
.rec-list { display: flex; flex-direction: column; gap: 12px; }
.rec-item { border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; background: #fff; }
.rec-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rec-item-actions { display: flex; gap: 8px; margin-top: 8px; }
/* Procurement cart rows — top-align so the note under the component lines up cleanly */
.cart-table td { vertical-align: top; padding-top: 10px; padding-bottom: 10px; }
.cart-table td.num { white-space: nowrap; }
.cart-table select, .cart-table input { vertical-align: top; }
/* Delivery Challan — party type toggle (Customer / Supplier) */
.dc-party-toggle { display: inline-flex; gap: 0; margin-bottom: 8px; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
.dc-party-toggle button {
border: none; background: #fff; color: #64748b; font-weight: 600; font-size: 13px;
padding: 7px 16px; cursor: pointer; transition: background .12s, color .12s;
}
.dc-party-toggle button + button { border-left: 1px solid #e2e8f0; }
.dc-party-toggle button.on { background: #E07B3E; color: #fff; }
/* Line items as a compact editable table (detail behind ⚙ master edit) */
.li-table-wrap { overflow-x: auto; margin-top: 8px; }
.li-table { width: 100%; border-collapse: collapse; }
.li-table thead th {
text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
color: #94a3b8; font-weight: 700; padding: 6px 8px; border-bottom: 2px solid #e2e8f0;
}
.li-table .li-c-num { width: 34px; text-align: center; color: #94a3b8; font-weight: 700; }
.li-table .li-c-qty { width: 92px; }
.li-table .li-c-price { width: 140px; }
.li-table .li-c-total { width: 130px; text-align: right; }
.li-table thead .li-c-total { text-align: right; }
.li-table .li-c-act { width: 78px; text-align: right; }
.li-tbody { border-bottom: 1px solid #eef1f5; }
.li-tbody.li-open { background: #fffdf9; }
.li-row td { padding: 6px 8px; vertical-align: middle; }
.li-row td.li-c-total { text-align: right; font-weight: 700; white-space: nowrap; }
.li-inp { width: 100%; padding: 7px 9px; border: 1px solid #e2e8f0; border-radius: 7px; font-size: 13.5px; box-sizing: border-box; }
.li-inp:focus { border-color: #E07B3E; outline: none; box-shadow: 0 0 0 2px rgba(249,115,22,.12); }
.li-num { text-align: right; }
.li-inp.desc-ro { background: #f8fafc; color: #64748b; }
.li-c-desc { position: relative; }
.li-desc-click {
display: flex; align-items: center; gap: 8px; cursor: pointer;
padding: 8px 10px; border: 1px solid transparent; border-radius: 7px;
font-size: 13.5px; color: #1e293b; transition: background .12s, border-color .12s;
}
.li-desc-click:hover { background: #fff7ed; border-color: #fed7aa; }
.li-desc-click > span:first-child { flex: 1; min-width: 0; white-space: normal; }
.li-desc-click.li-open-txt { background: #fff7ed; border-color: #fed7aa; }
.li-desc-empty { color: #94a3b8; font-style: italic; }
.li-desc-pen { flex: 0 0 auto; color: #cbd5e1; font-size: 12px; }
.li-desc-click:hover .li-desc-pen { color: #E07B3E; }
.li-type-tag {
flex: 0 0 auto; font-size: 9px; text-transform: uppercase; letter-spacing: .5px; color: #94a3b8;
background: #f1f5f9; padding: 1px 6px; border-radius: 6px;
}
.li-btn { width: 30px; height: 30px; border: 1px solid #e2e8f0; background: #fff; border-radius: 7px; cursor: pointer; font-size: 14px; color: #475569; line-height: 1; }
.li-btn:hover { background: #f8fafc; }
.li-btn-on { background: #fff7ed; border-color: #fed7aa; color: #E07B3E; }
.li-del { color: #dc2626; margin-left: 4px; }
.li-del:hover { background: #fef2f2; }
.li-detail-row > td { background: #f8fafc; padding: 14px 16px; border-top: 1px dashed #e2e8f0; }
.li-detail > .li-detail-type { display: block; max-width: 320px; margin-bottom: 10px; }
.li-detail .full { margin-top: 10px; }
/* Compact customer + sales-contact row on the quote page */
.cust-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.cust-row > label { margin: 0; }
.cust-row-cust { flex: 3 1 300px; }
.cust-row-sales { flex: 2 1 200px; }
.cust-row-val { flex: 0 1 120px; }
.cust-detail-toggle {
flex: 0 0 auto; height: 38px; align-self: flex-end;
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
color: #2563eb; font-size: 13px; font-weight: 600; padding: 0 14px; cursor: pointer;
white-space: nowrap; transition: background .15s, border-color .15s;
}
.cust-detail-toggle:hover { background: #eff6ff; border-color: #bfdbfe; }
.cust-summary { margin-top: 8px; font-size: 12.5px; color: #64748b; }
.cust-details { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #e2e8f0; }
.qdoc-editable .qdoc-pagebreak {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin: 14px 0; padding: 4px 0; user-select: none;
color: #94a3b8; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
border-top: 2px dashed #cbd5e1;
}
.qdoc-editable table { border-collapse: collapse; }
.qdoc-editable td, .qdoc-editable th { min-width: 44px; }
.qdoc-editable table td, .qdoc-editable table th { outline: 1px solid #e2e8f0; }
.qdoc-editable table tr:hover td { background: rgba(37,99,235,0.035); }
.qdoc-editable table td:hover, .qdoc-editable table th:hover { box-shadow: inset 0 0 0 2px rgba(37,99,235,0.18); }
/* Document editor — selected cell(s) highlight (drag-select like Sheets) */
.qdoc-editable td.qdoc-cellsel, .qdoc-editable th.qdoc-cellsel {
background: rgba(37,99,235,0.16) !important;
box-shadow: inset 0 0 0 1px #2563eb;
}
/* Notification-panel "enable push" row (class-based so x-show can't wipe the flex) */
.notif-pushrow { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid #f1f5f9; }
.notif-pushlabel { flex: 1; font-size: 12px; color: #475569; line-height: 1.35; }
/* Compact on/off slider switch (notifications, etc.) */
.yswitch { position: relative; display: inline-block; width: 38px; height: 22px; flex: 0 0 auto; cursor: pointer; }
.yswitch input { opacity: 0; width: 0; height: 0; position: absolute; }
.yswitch-track { position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px; transition: background .18s; }
.yswitch-track::before { content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.yswitch input:checked + .yswitch-track { background: #E07B3E; }
.yswitch input:checked + .yswitch-track::before { transform: translateX(16px); }
/* Document editor — floating live-sum pill pinned to a cell selection */
.qdoc-sumfloat {
position: fixed; z-index: 650; transform: translateX(-100%);
display: flex; align-items: center; gap: 9px;
background: #0f172a; color: #fff; border-radius: 9px;
padding: 5px 8px 5px 11px; box-shadow: 0 6px 20px rgba(2,6,23,.32);
font-size: 12.5px; white-space: nowrap; pointer-events: auto;
}
.qdoc-sumfloat .sf-sum { font-weight: 600; }
.qdoc-sumfloat .sf-sum b { font-size: 14px; font-weight: 800; }
.qdoc-sumfloat .sf-meta { color: #94a3b8; font-weight: 600; }
.qdoc-sumfloat button {
border: 0; background: #22c55e; color: #06231a; font-weight: 800;
font-size: 12px; border-radius: 6px; padding: 4px 9px; cursor: pointer;
}
.qdoc-sumfloat button:hover { background: #16a34a; color: #fff; }
/* Document editor — compact Google-style toolbar */
.qdoc-topbar { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; padding:5px 14px; border-bottom:1px solid #eef2f7; background:#fff; }
.qdoc-topbar h2 { margin:0; font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#0f172a; }
.qdoc-toolbar { display:flex; flex-wrap:nowrap; align-items:center; gap:2px; padding:5px 10px; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; }
.qdoc-toolbar::-webkit-scrollbar { height:6px; }
.qdoc-toolbar::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:3px; }
.qtb { display:inline-flex; align-items:center; justify-content:center; gap:4px; height:29px; min-width:29px; padding:0 7px; border:0; border-radius:6px; background:transparent; color:#3c4759; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; flex-shrink:0; line-height:1; }
.qtb:hover { background:#e6eaf0; }
.qtb.danger { color:#dc2626; } .qtb.accent { color:#0f766e; }
.qtb-sep { width:1px; height:20px; background:#dce1e8; margin:0 5px; flex-shrink:0; }
.qtb-sel { height:29px; width:84px !important; min-width:84px; max-width:84px; box-sizing:border-box; border:1px solid #dce1e8; border-radius:6px; font-size:12.5px; padding:0 6px; background:#fff; color:#3c4759; cursor:pointer; flex:0 0 84px; }
.qdoc-toolbar input[type=color] { flex:0 0 auto; }
.qtb-swatch { width:18px; height:18px; border:1px solid #cbd5e1; border-radius:4px; cursor:pointer; flex-shrink:0; padding:0; }
/* Quote builder — single consolidated header */
.quote-header { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:16px; }
.quote-header .qh-left h1 { margin:0; font-size:22px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.qh-actions { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; }
.qh-field { display:flex; flex-direction:column; gap:4px; font-size:10.5px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.03em; }
.qh-field input { height:40px; border:1px solid #e2e8f0; border-radius:9px; padding:0 11px; font-size:14px; font-weight:500; color:#0f172a; text-transform:none; letter-spacing:normal; box-sizing:border-box; }
.qh-field input:focus { border-color:#2563eb; outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.qh-btn { display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 14px; border:1px solid #e2e8f0; border-radius:9px; background:#fff; color:#334155; font-weight:600; font-size:13px; cursor:pointer; white-space:nowrap; box-shadow:0 1px 2px rgba(16,24,40,.05); transition:border-color .15s,background .15s,color .15s,box-shadow .15s; }
.qh-btn:hover { border-color:#cbd5e1; background:#f8fafc; }
.qh-edit { color:#1d4ed8; border-color:#bfdbfe; background:#eff6ff; }
.qh-edit:hover { background:#dbeafe; border-color:#93c5fd; }
.qh-primary { background:#E07B3E; border-color:#E07B3E; color:#fff; box-shadow:0 2px 7px rgba(249,115,22,.28); }
.qh-primary:hover { background:#ea6a0d; border-color:#ea6a0d; color:#fff; }
.qh-div { width:1px; height:34px; align-self:center; background:#e5e7eb; margin:0 3px; }
/* Document editor — table right-click context menu */
.qdoc-menu { min-width:224px; background:#fff; border:1px solid #e2e8f0; border-radius:12px; box-shadow:0 14px 44px rgba(16,24,40,.22); padding:6px; }
.qdoc-menu button { display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:none; border:0; padding:7px 10px; border-radius:7px; font-size:13px; font-weight:500; color:#334155; cursor:pointer; }
.qdoc-menu button:hover { background:#f1f5f9; }
.qdoc-menu button.danger { color:#dc2626; }
.qdoc-menu button > span:first-child { width:16px; text-align:center; color:#64748b; font-size:13px; }
.qdoc-menu button.danger > span:first-child { color:#dc2626; }
.qdoc-menu hr { border:0; border-top:1px solid #f1f5f9; margin:5px 2px; }
/* ── Travel-voucher View sheet (👁 View) — line items table, responsive ───── */
.vch-lines-wrap { overflow-x:auto; }
.vch-lines { width:100%; border-collapse:collapse; font-size:12.5px; }
.vch-lines th, .vch-lines td { border:1px solid #d7dbe3; padding:6px 8px; text-align:left; vertical-align:top; }
.vch-lines thead th { background:#c5e0b4; color:#0a1e3f; }
.vch-lines .c-purpose, .vch-lines .c-km, .vch-lines .c-rate { text-align:center; }
.vch-lines .c-amt { text-align:right; white-space:nowrap; }
.vch-lines .c-date { white-space:nowrap; }
.vch-lines tfoot .vch-total td { background:#f5f5f5; font-weight:800; }
.vch-lines .c-total-label { text-align:center; }
.vch-lines .c-empty { text-align:center; color:#94a3b8; padding:10px; }
/* Mobile: reflow each expense line into a stacked card — all fields visible, no sideways scroll */
@media (max-width:640px) {
.vch-lines-wrap { overflow:visible; }
.vch-lines, .vch-lines tbody, .vch-lines tfoot, .vch-lines tr, .vch-lines td { display:block; width:auto; }
.vch-lines thead { display:none; }
.vch-lines tbody tr { border:1px solid #d7dbe3; border-radius:8px; margin-bottom:10px; overflow:hidden; }
.vch-lines td { border:0; border-bottom:1px solid #eef2f7; display:flex; justify-content:space-between; align-items:baseline; gap:14px; text-align:right; padding:8px 12px; }
.vch-lines tr td:last-child { border-bottom:0; }
.vch-lines td::before { content:attr(data-label); font-weight:700; color:#64748b; text-align:left; flex:0 0 auto; }
.vch-lines td:empty { display:none; } /* hide blank date / km / rate cells */
.vch-lines .c-desc { text-align:right; font-weight:600; }
.vch-lines .c-amt { font-weight:700; color:#0a1e3f; }
.vch-lines tfoot .vch-total { border:0; margin-top:2px; }
.vch-lines .c-total-label { display:none; } /* the amount cell shows "Total" via data-label */
.vch-lines tfoot .c-amt { background:#f5f5f5; border:1px solid #d7dbe3; border-radius:8px; font-weight:800; font-size:13px; }
}
/* 2026-09-25: Payment Follow-up — keep horizontal scrollbar on-screen + sticky header */
.pf-scroll { max-height: 72vh; overflow: auto; margin-top: 12px; }
.pf-scroll thead th { position: sticky; top: 0; background: #ffffff; z-index: 3; box-shadow: 0 1px 0 #e5e7eb; }
/* ============================================================
GLOBAL RESPONSIVE HARDENING — 2026-09-26
Additive safety net (small screens only) so every page, table
and modal fits any device without side-scrolling the whole app.
Desktop (>900px) is untouched.
============================================================ */
@media (max-width: 900px) {
html, body { max-width: 100%; overflow-x: hidden; }
/* Any wide table scrolls inside itself instead of pushing the page sideways */
.data-table, .inv-table, .mgr-table, .pf-table, .build-table, .bom-table, .recon-table {
display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
/* Modals always fit the viewport */
.modal { max-width: 96vw !important; }
.modal-backdrop, .modal-overlay { padding: 8px; box-sizing: border-box; }
/* Media + form controls never overflow their container */
img, video, canvas, iframe, svg { max-width: 100%; }
input, select, textarea { max-width: 100%; box-sizing: border-box; }
/* Any remaining two/three-column form grids fall back to one column */
.form-grid-2, .form-grid-3, .form-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
.card { padding: 12px !important; }
.row-between { flex-wrap: wrap; gap: 8px; }
/* Filter/action button rows wrap instead of overflowing */
.inv-filters, .inv-filter-tabs, .q-filters, .filter-bar { flex-wrap: wrap; }
.modal-footer { flex-wrap: wrap; gap: 8px; }
.modal-header h3 { font-size: 15px; }
}
/* Font Awesome nav icons — match the 22px SVGs they replaced */
.sb-nav button i.fa-solid, .sb-nav button i.fa-regular, .sb-nav button i.fa-brands { flex-shrink:0; width:22px; text-align:center; font-size:17px; }
.nav-section-title i.fa-solid { width:16px; text-align:center; margin-right:2px; font-size:12px; }
/* content compact — shrink view content text/spacing, leave sidebar + top header as-is */
main { zoom: 1; }
/* header + filter compact */
main h1 { font-size: 20px !important; }
.filter-bar input[type="text"], .filter-bar select, .filter-bar input[type="date"] { font-size: 12.5px; padding: 7px 10px; }
.pipeline-filter-toggle { font-size: 12px !important; padding: 5px 10px; }
.filter-bar .btn-secondary, .filter-bar button, .filter-bar label { font-size: 12.5px; }
/* ===== compact summary pills — all pages (reduce padding + number size) ===== */
.inv-tile { padding: 6px 11px !important; gap: 6px !important; }
.inv-tile-num, .inv-tile-value .inv-tile-num { font-size: 14px !important; }
.inv-tile-label { font-size: 9px !important; }
.vstat { padding: 3px 9px !important; gap: 5px !important; }
.vstat-num { font-size: 13px !important; }
.vstat-label, .vstat-sub { font-size: 10px !important; }
.seg-chip { padding: 4px 10px !important; }
.seg-chip strong { font-size: 12px !important; }
.sa-chip, .sa-chip-seg { padding: 4px 10px !important; font-size: 12px !important; }
.seg-kpi-card { padding: 8px 10px !important; }
.seg-kpi-count, .seg-kpi-total { font-size: 15px !important; }
.kpi-card { padding: 8px 10px !important; }
.kpi-value { font-size: 15px !important; }
.kpi-mini { font-size: 13px !important; }
.mgr-big-stat { font-size: 18px !important; }
.plan-stat { padding: 6px 10px !important; }
.plan-stat-num { font-size: 14px !important; }
.plan-stat-label { font-size: 9px !important; }
.recon-pill, .recon-stat { padding: 4px 9px !important; font-size: 13px !important; }
.renewal-stat, .renewal-pill { font-size: 13px !important; }
.sa-fstat-val { font-size: 15px !important; }
.sa-fstat-lbl { font-size: 9px !important; }
.pf-sum-tile { padding: 6px 10px !important; }
.cluster-stats, .zone-stats, .recon-stats { gap: 8px !important; }
/* quotes header align — match the filter/pills card 26px inset */
.qpage .page-head { padding: 0; }
/* overview pills right-aligned (all pages) */
.pf-summary, .inv-tiles, .seg-chip-strip, .recon-stats, .sa-funnel-stats, .voucher-stats { justify-content: flex-end !important; }
/* more overview pills right */
.recon-pills, .cluster-stats, .zone-stats { justify-content: flex-end !important; }
/* ── 2026-09-29: All Quotes — phone layout (≤760px). Desktop unchanged. ──────────────────────────
The desktop inline sizing (search flex-basis 190px, filter-bar flex:0 1 auto) broke once the mobile
rules stacked the bar vertically: the basis became HEIGHT (tall search box) and the bar stayed ~60% wide. */
@media (max-width: 760px) {
.qpage .page-head > div { display: flex !important; gap: 8px !important; width: 100%; }
.qpage .page-head > div > button { flex: 1 1 0; justify-content: center; }
.qpage .q-filters { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
.qpage .q-filters .filter-bar {
display: grid !important; grid-template-columns: 1fr 18px 1fr; gap: 8px !important;
width: 100%; flex: 1 1 100% !important; margin-bottom: 0;
}
.qpage .q-filters .filter-bar > * {
flex: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important;
height: 40px; box-sizing: border-box; margin: 0;
}
/* search + period: full row */
.qpage .q-filters .filter-bar > input[type="text"],
.qpage .q-filters .filter-bar > select:nth-of-type(1) { grid-column: 1 / -1; }
/* from → to on one row */
.qpage .q-filters .filter-bar > span { width: auto !important; height: auto; text-align: center; align-self: center; }
/* type | status side by side */
.qpage .q-filters .filter-bar > select:nth-of-type(2) { grid-column: 1 / 2; }
.qpage .q-filters .filter-bar > select:nth-of-type(3) { grid-column: 2 / 4; }
.qpage .q-filters input, .qpage .q-filters select { font-size: 14px !important; } /* 14px+ stops iOS zoom-on-focus */
/* row 2: group-by · highest/lowest · clear · count */
.qpage .q-filters > div:last-child {
margin-left: 0 !important; width: 100%; justify-content: space-between; gap: 10px !important; row-gap: 8px !important;
}
.qpage .q-filters .seg-toggle { margin-top: 0; }
.qpage .q-filters > div:last-child > span { margin-left: 0 !important; width: 100%; text-align: right; }
/* summary tiles: tidy 2-column grid, value under the label */
.qpage .pf-summary { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; justify-content: stretch !important; }
.qpage .pf-sum-tile { display: flex !important; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.qpage .pf-sum-tile:nth-child(2) { grid-column: 1 / -1; } /* total value: full width */
.qpage .pf-sum-num { font-size: 16px; }
}
/* ── 2026-09-29: page-header / filter alignment fixes (Travel Vouchers, Payment Follow-up, Inventory, Timeline, top bar) ── */
/* Plain `.btn` had NO styling anywhere → rendered as bare browser buttons (voucher status filters, "+ New Item").
:where() keeps specificity at 0 so .btn-primary / .btn-secondary / .active still win. */
:where(button.btn) {
padding: 9px 18px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text);
font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .15s;
display: inline-flex; align-items: center; gap: 6px;
}
:where(button.btn):hover { background: var(--bg); border-color: var(--muted); }
:where(button.btn.btn-sm) { padding: 6px 12px; font-size: 12.5px; }
button.btn.btn-sm.btn-primary { padding: 6px 12px; font-size: 12.5px; border: 1px solid transparent; } /* selected chip same size as the rest */
@media (max-width: 760px) {
/* Top bar: ONE row — hamburger · logo · icon-only actions */
.topbar { flex-wrap: nowrap !important; gap: 6px !important; padding: 8px 10px !important; }
.topbar-left { flex: 0 1 auto; min-width: 0; gap: 4px; }
.brand-logo-img { height: 28px !important; width: auto; max-width: 118px; object-fit: contain; }
.top-right { flex: 0 0 auto; gap: 4px !important; flex-wrap: nowrap !important; }
.top-right > button.btn-secondary.small { font-size: 0 !important; padding: 8px 9px !important; } /* Backup / Restore → icon only */
.top-right > button.btn-secondary.small > i { font-size: 15px; }
/* Overview tiles/pills: were right-aligned (desktop rule) → staircase on phones. Fill each row instead. */
.pf-summary, .inv-tiles, .recon-stats, .voucher-stats, .seg-chip-strip, .recon-pills, .cluster-stats, .zone-stats {
justify-content: flex-start !important; margin-left: 0 !important; width: 100%;
}
.pf-summary > *, .inv-tiles > *, .voucher-stats > *, .recon-stats > * { flex: 1 1 auto; justify-content: space-between; min-width: 0; }
/* Filter bars (stacked on phones): date inputs + buttons were half-width and centred */
.filter-bar { align-items: stretch !important; }
.filter-bar input[type="date"] { width: 100% !important; max-width: none !important; min-width: 0 !important; }
.filter-bar > button { justify-content: center; }
.inv-search { width: 100% !important; max-width: none !important; box-sizing: border-box; }
}