/* Technaus Sales India – additions on top of the India HR portal's app.css + staff.css. Tables and lists, never tiles. */

/* ---------- stage badges (Zoho stages grouped) */
body.staff .stage.g-visit { --sw: #edf3ff; --sc: #1d4ed8; }
body.staff .stage.g-quote { --sw: #f1edfd; --sc: #5b3fb8; }
body.staff .stage.g-hold { --sw: #fff5e3; --sc: #a15c07; }
body.staff .stage.g-won, body.staff .stage.g-done { --sw: #e8f6ee; --sc: #15803d; }
body.staff .stage.g-work { --sw: #e6f4fa; --sc: #07729f; }
body.staff .stage.g-lost { --sw: #f1f3f6; --sc: #6a7890; }
.pill.g-ok { background: var(--green-wash); color: var(--green); }

/* ---------- banners */
body.staff .safe-banner { display: flex; gap: 10px; align-items: center; background: linear-gradient(90deg, #eef6ff, #f7fbff);
  border-color: #cfe2fb; color: #1d4e89; }
body.staff .safe-banner .ic { flex: none; color: #2563eb; }
.m-safe { display: flex; align-items: center; gap: 6px; color: #1d4e89; background: #eef6ff; border: 1px solid #cfe2fb;
  border-radius: 8px; padding: 6px 10px; margin-bottom: 14px; }
.m-safe .ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ---------- list page */
body.staff .views { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 12px; }
body.staff .view-chip { display: inline-flex; align-items: center; background: var(--paper); border-radius: 999px; box-shadow: var(--lift-1); font-size: 13px; }
body.staff .view-chip a { padding: 4px 4px 4px 12px; color: var(--ink-2); font-weight: 550; }
body.staff .view-chip.on { background: var(--blue-wash); }
body.staff .view-chip form { display: inline; }
body.staff .view-chip button { border: 0; background: none; color: var(--faint); cursor: pointer; padding: 2px 10px 2px 4px; font-size: 15px; }
body.staff .view-chip button:hover { color: var(--bad); }
body.staff details.save-view { position: relative; }
body.staff details.save-view > summary { list-style: none; cursor: pointer; }
body.staff details.save-view > summary::-webkit-details-marker { display: none; }
body.staff details.save-view .pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; display: flex; gap: 6px;
  background: var(--paper); padding: 10px; border-radius: 12px; box-shadow: var(--lift-2); width: 320px; }
body.staff details.save-view .pop input { flex: 1; }
body.staff .table-scroll { overflow-x: auto; }
body.staff table.sales-table td { vertical-align: middle; }
body.staff table.sales-table .who .t { max-width: 320px; }
body.staff tr[data-href] { cursor: pointer; }
.today { font-weight: 650; color: var(--blue-ink); }
.past, .overdue { color: var(--bad, #b42318); font-weight: 600; }

/* ---------- detail page */
body.staff .sale-head { margin-bottom: 18px; }
body.staff .coming-actions { background: #fafbfd; }
body.staff table.list.compact td { padding: 8px 14px; }
body.staff .panel.narrow { max-width: 760px; }
ol.timeline { list-style: none; margin: 0; padding: 6px 20px 14px; }
ol.timeline li { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
ol.timeline li:last-child { border-bottom: 0; }
ol.timeline .when { color: var(--muted); font-size: 12.5px; padding-top: 2px; }
ol.timeline li.call b { color: #07729f; }
.appt-now { display: flex; gap: 10px; align-items: center; background: var(--blue-wash); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.appt-now .ic { color: var(--blue); width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
dl.kv.tight { grid-template-columns: 130px 1fr; font-size: 13.5px; }

/* ---------- dashboard: stacked tables, two columns on wide screens */
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; align-items: start; }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: 1fr; } }

/* ---------- admin */
.checklist.inline { display: flex; gap: 18px; flex-wrap: wrap; }
.checklist { display: grid; gap: 6px; }
.wa-mini { background: #f3f7f3; border: 1px solid #e1ebe1; border-radius: 0 10px 10px 10px; padding: 8px 10px; font-size: 13px; line-height: 1.45; max-width: 460px; }
pre.tpl-src { white-space: pre-wrap; background: #f6f8fb; border: 1px solid var(--line-2); border-radius: 8px; padding: 10px; font-size: 12.5px; }
.wa .chat .chat-to { align-self: flex-start; margin: 6px 0 -6px 4px; }
.wa .bubble.email { background: #fdfdfb; border-left: 3px solid #088ac2; }
.wa.single { height: auto; min-height: 0; grid-template-columns: 1fr; }
code { font-size: 12.5px; background: #f1f4f8; padding: 1px 5px; border-radius: 5px; }

/* ---------- login */
.demo-card { margin-top: 16px; }
.demo-card h2 { font-size: 16px; margin-bottom: 4px; }
table.demo-list td { padding: 9px 4px; border-bottom: 1px solid var(--line-2); }
table.demo-list tr:last-child td { border-bottom: 0; }

/* ---------- consultant (mobile) */
body.mobile { background: #f3f5f9; }
.m-wrap { max-width: 560px; padding: 16px 14px 60px; }
.m-top { margin-bottom: 12px; }
.m-top img { width: 130px; }
.m-back { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.m-hello h1 { font-size: 24px; margin: 4px 0 0; color: #22274f; }
.m-hello p { margin: 2px 0 12px; }
.m-h { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 4px 8px; }
.m-list { background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(16,35,62,.06), 0 0 0 1px rgba(16,35,62,.04); overflow: hidden; }
.m-list.warn { box-shadow: 0 0 0 1.5px #f3c77a; }
.m-list.done .m-row { opacity: .7; }
.m-row { display: grid; grid-template-columns: 76px 1fr 18px; gap: 12px; align-items: center; padding: 14px; border-bottom: 1px solid var(--line-2); color: var(--ink); }
.m-row:last-child { border-bottom: 0; }
.m-row:hover { text-decoration: none; background: #f8fafc; }
.m-when b { display: block; font-size: 14px; }
.m-when span { font-size: 13px; color: var(--muted); }
.m-what { min-width: 0; }
.m-what b { display: block; }
.m-what span { display: block; font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-row .chev { transform: rotate(180deg); color: var(--muted); }
.m-empty { padding: 18px 14px; }
.m-card { margin-bottom: 12px; padding: 18px; }
.m-card h2 { font-size: 16px; margin-bottom: 10px; }
.m-when-big { font-weight: 650; color: var(--blue-ink); margin-bottom: 4px; }
.m-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 8px; }
.m-actions .btn { padding: 12px 10px; }
.m-addr { font-size: 14px; color: var(--ink-2); margin: 6px 0 0; }
.m-q { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.m-q:last-child, .m-note:last-child { border-bottom: 0; }
.m-note { padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.m-note p { margin: 2px 0 0; font-size: 14px; }
.m-soon { background: #fafbfd; }

/* ---------- list page header (title, region switch, stage tabs, one toolbar) */
body.staff .lh { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 4px 0 18px; animation: rise .5s var(--ease-out, ease) both; }
body.staff .lh-kicker { font-size: 11px; text-transform: uppercase; color: #088ac2; font-weight: 600; margin-bottom: 4px; }
body.staff .lh h1 { display: flex; align-items: center; gap: 12px; font-size: 28px; margin: 0; }
body.staff .lh h1::after { display: none; }
body.staff .lh-count { font-size: 14px; font-weight: 650; color: #fff; background: linear-gradient(135deg, #088ac2, #2563eb); padding: 3px 11px;
  border-radius: 999px; box-shadow: 0 4px 12px -4px rgba(37, 99, 235, .55); }
body.staff .lh-sub { color: var(--muted); font-size: 13.5px; margin-top: 6px; }
body.staff .lh-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body.staff .region-switch { display: flex; background: var(--paper); border-radius: 12px; padding: 4px; box-shadow: var(--lift-1); }
body.staff .region-switch a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 550; color: var(--ink-2); transition: background .2s, color .2s; }
body.staff .region-switch a:hover { background: #f3f6fa; text-decoration: none; }
body.staff .region-switch a span { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
body.staff .region-switch a.on { background: #10233e; color: #fff; }
body.staff .region-switch a.on span { color: #88d0f0; }
.rdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.rdot.r-chennai { background: #2563eb; } .rdot.r-puducherry { background: #0ea5a4; } .rdot.r-kerala { background: #16a34a; }

body.staff .list-card { overflow: visible; }
body.staff .stage-tabs { position: relative; display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--line-2); overflow-x: auto; scrollbar-width: none; }
body.staff .stage-tabs a { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 15px 12px 14px; font-size: 14px; font-weight: 550;
  color: var(--muted); white-space: nowrap; transition: color .2s; }
body.staff .stage-tabs a:hover { color: var(--ink); text-decoration: none; }
body.staff .stage-tabs a.on { color: #22274f; font-weight: 650; }
body.staff .stage-tabs .count { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: #f1f4f8; color: var(--muted); font-variant-numeric: tabular-nums; transition: background .2s, color .2s; }
body.staff .stage-tabs a.on .count { background: #e6f0fe; color: #1d4ed8; }
body.staff .st-marker { position: absolute; left: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, #088ac2, #2563eb);
  transition: transform .4s var(--ease-out, ease), width .4s var(--ease-out, ease); }
.gdot { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; }
.gdot.g-open { background: #64748b; } .gdot.g-visit { background: #2563eb; } .gdot.g-quote { background: #7c3aed; }
.gdot.g-hold { background: #d97706; } .gdot.g-won { background: #16a34a; } .gdot.g-lost { background: #94a3b8; }

body.staff .toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--line-2); background: #fbfcfe; }
body.staff .toolbar .ic { width: 16px; height: 16px; color: var(--faint); flex: none; }
body.staff .tb-search { flex: 1 1 260px; max-width: 420px; display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 38px; border-radius: 10px;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s; margin: 0; }
body.staff .tb-search:focus-within { box-shadow: inset 0 0 0 1.5px #2563eb, 0 0 0 4px rgba(37, 99, 235, .1); }
body.staff .tb-search input { border: 0 !important; box-shadow: none !important; background: transparent; padding: 0; height: 100%; flex: 1; font-size: 14px; outline: none; min-width: 0; }
body.staff .tb-select, body.staff .tb-toggle { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 4px 0 11px; border-radius: 10px; margin: 0;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; color: var(--ink-2); font-weight: 500; cursor: pointer; transition: box-shadow .2s, background .2s; }
body.staff .tb-select:hover, body.staff .tb-toggle:hover { box-shadow: inset 0 0 0 1px #b9c6d8; }
body.staff .tb-select select { border: 0 !important; box-shadow: none !important; background-color: transparent; font-size: 13.5px; padding: 0 26px 0 0; height: 100%; max-width: 190px; cursor: pointer; }
body.staff .tb-toggle { padding-right: 12px; }
body.staff .tb-toggle input { display: none; }
body.staff .tb-toggle span { font-size: 11.5px; padding: 0 7px; border-radius: 999px; background: #fff4e0; color: #9a5b00; }
body.staff .tb-toggle.on { background: #10233e; color: #fff; box-shadow: none; }
body.staff .tb-toggle.on .ic { color: #88d0f0; }
body.staff .tb-gap { flex: 1; }
body.staff .toolbar .save-view summary { height: 38px; display: inline-flex; align-items: center; gap: 6px; }
body.staff .chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
body.staff .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #e6f0fe; color: #1d4ed8; font-size: 12.5px; font-weight: 550;
  animation: pop .3s ease both; }
body.staff .chip b { font-weight: 700; opacity: .6; } body.staff .chip:hover { text-decoration: none; background: #d7e6fd; }
body.staff .chip.clear { background: none; color: var(--muted); } body.staff .chip.clear:hover { color: var(--bad); background: none; }
body.staff .chips-sep { width: 1px; height: 18px; background: var(--line); margin: 0 6px; }
body.staff .views { display: none; }
@media (max-width: 860px) { body.staff .tb-gap { display: none; } body.staff .tb-search { max-width: none; } }

/* ---------- sale actions: bar + slide-in drawers */
body.staff .action-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -4px 0 18px; animation: rise .5s ease .1s both; }
body.staff .ab-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 11px; border: 0; cursor: pointer;
  background: var(--paper); color: var(--ink-2); font: 600 13.5px Inter, sans-serif; box-shadow: var(--lift-1); transition: transform .15s, box-shadow .2s, background .2s; }
body.staff .ab-btn:hover { transform: translateY(-1px); box-shadow: var(--lift-2); }
body.staff .ab-btn .ic { width: 17px; height: 17px; color: #088ac2; }
body.staff .ab-btn.primary { background: linear-gradient(135deg, #2563eb, #088ac2); color: #fff; box-shadow: 0 6px 16px -6px rgba(37,99,235,.6); }
body.staff .ab-btn.primary .ic { color: #fff; }
body.staff .ab-btn.warn { background: #fff4e0; color: #9a5b00; } body.staff .ab-btn.warn .ic { color: #d97706; }
body.staff .ab-soon { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--faint); padding: 0 8px; }
body.staff .ab-soon .ic { width: 15px; height: 15px; }

dialog.drawer { position: fixed; inset: 0 0 0 auto; margin: 0; height: 100vh; max-height: none; width: min(480px, 100vw); border: 0; padding: 0;
  background: var(--paper, #fff); box-shadow: -30px 0 60px -20px rgba(10,26,48,.45); overflow-y: auto; }
dialog.drawer[open] { animation: drawer-in .45s cubic-bezier(.16,1,.3,1); }
dialog.drawer::backdrop { background: rgba(10,26,48,.42); backdrop-filter: blur(2px); animation: fade .3s ease; }
@keyframes drawer-in { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } }
dialog.drawer form { padding: 0 24px 24px; }
dialog.drawer header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; margin: 0 -24px 18px; padding: 18px 24px;
  background: linear-gradient(135deg, #10233e, #173a63); color: #fff; }
dialog.drawer header h2 { color: #fff; font-size: 17px; margin: 0; }
dialog.drawer header .x { background: rgba(255,255,255,.12); border: 0; color: #fff; width: 32px; height: 32px; border-radius: 9px; font-size: 20px; cursor: pointer; }
dialog.drawer header .x:hover { background: rgba(255,255,255,.22); }
dialog.drawer footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
dialog.drawer .field label { font-weight: 600; font-size: 13px; }
dialog.drawer input, dialog.drawer select, dialog.drawer textarea { width: 100%; box-sizing: border-box; }
.req { font-size: 11px; color: #b42318; font-weight: 600; margin-left: 4px; }
.radio-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.radio-pills label { margin: 0; }
.radio-pills input { display: none; }
.radio-pills span { display: inline-block; padding: 7px 12px; border-radius: 999px; background: #f1f4f8; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s, color .15s; }
.radio-pills input:checked + span { background: #10233e; color: #fff; }
.quick-dates { display: flex; gap: 6px; margin-top: 6px; }
.quick-dates button { border: 0; background: #eef4fb; color: #1d4ed8; font: 500 12px Inter, sans-serif; padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.cons-pick { display: grid; gap: 6px; max-height: 280px; overflow-y: auto; }
.cons-opt { display: grid !important; grid-template-columns: 18px 34px 1fr; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; margin: 0;
  box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .15s, background .15s; font-weight: 400 !important; }
.cons-opt:has(input:checked) { box-shadow: inset 0 0 0 2px #2563eb; background: #f3f7ff; }
.cons-opt input { width: auto !important; }
.co-t b { display: block; font-size: 14px; } .co-s { font-size: 12.5px; color: var(--muted); }
.co-s .busy { color: #9a5b00; font-style: normal; } .co-s .free { color: #15803d; font-style: normal; } .co-s .warn-t { color: #b42318; font-style: normal; }
.send-preview { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #effaf3; color: #14532d; font-size: 13px; }
.send-preview .ic { color: #16a34a; flex: none; margin-top: 2px; } .send-preview span { display: block; color: #3f6b50; }
ol.timeline li.activity b { color: #7c3aed; }

/* ---------- timeline: compact, scrolls inside its box, expands into a big window */
body.staff .tl-tools { display: flex; align-items: center; gap: 8px; }
.tl-filter { display: inline-flex; background: #f1f4f8; border-radius: 9px; padding: 3px; }
.tl-filter button { border: 0; background: none; font: 550 12.5px Inter, sans-serif; color: var(--muted); padding: 5px 10px; border-radius: 7px; cursor: pointer; }
.tl-filter button.on { background: #fff; color: #22274f; box-shadow: 0 1px 2px rgba(16,35,62,.12); }
.tl-expand { display: inline-flex; align-items: center; gap: 6px; border: 0; background: #eef4fb; color: #1d4ed8; font: 600 12.5px Inter, sans-serif;
  padding: 6px 11px; border-radius: 9px; cursor: pointer; } .tl-expand .ic { width: 14px; height: 14px; }
.tl-panel ol.timeline { max-height: 420px; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 10px;
  mask-image: linear-gradient(#000 88%, transparent); -webkit-mask-image: linear-gradient(#000 88%, transparent); }
ol.timeline li { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 9px 0 9px 18px; border-bottom: 1px solid var(--line-2); }
ol.timeline li[hidden] { display: none; }
ol.timeline .tl-dot { position: absolute; left: 0; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; box-shadow: 0 0 0 3px #f1f4f8; }
ol.timeline li.call .tl-dot { background: #088ac2; } ol.timeline li.activity .tl-dot { background: #7c3aed; } ol.timeline li.note .tl-dot { background: #64748b; }
ol.timeline li::before { content: ""; position: absolute; left: 3.5px; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
ol.timeline .tl-when { font-size: 12.5px; color: var(--ink-2); font-weight: 550; font-variant-numeric: tabular-nums; }
ol.timeline .tl-when span { display: block; font-weight: 400; color: var(--faint); font-size: 11.5px; }
ol.timeline .tl-kind { font-weight: 650; font-size: 13px; color: #22274f; } ol.timeline li.call .tl-kind { color: #07729f; } ol.timeline li.activity .tl-kind { color: #7c3aed; }
ol.timeline .tl-by { font-size: 12px; color: var(--muted); margin-left: 8px; }
ol.timeline p { margin: 2px 0 0; font-size: 13.5px; color: var(--ink); line-height: 1.45; }

dialog.bigview { background: #fff; color: var(--ink); width: min(1100px, 92vw); height: 86vh; max-height: none; border: 0; padding: 0; border-radius: 18px; overflow: hidden;
  display: none; flex-direction: column; box-shadow: 0 40px 90px -30px rgba(10,26,48,.6); }
dialog.bigview[open] { display: flex; }
dialog.bigview::backdrop { background: rgba(10,26,48,.5); backdrop-filter: blur(3px); animation: fade .35s ease; }
@keyframes big-in { from { opacity: 0; transform: scale(.94) translateY(16px); } to { opacity: 1; transform: none; } }
dialog.bigview header { display: flex; align-items: center; gap: 14px; padding: 16px 22px; background: linear-gradient(135deg, #10233e, #173a63); }
dialog.bigview header h2 { color: #fff; font-size: 16px; margin: 0; flex: 1; }
dialog.bigview header .tl-filter { background: rgba(255,255,255,.1); } dialog.bigview header .tl-filter button { color: #bfe0f2; }
dialog.bigview header .tl-filter button.on { background: #fff; color: #10233e; }
dialog.bigview header .x { background: rgba(255,255,255,.12); border: 0; color: #fff; width: 34px; height: 34px; border-radius: 9px; font-size: 20px; cursor: pointer; }
dialog.bigview .bv-body { flex: 1; overflow-y: auto; padding: 8px 26px 20px; }
dialog.bigview ol.timeline { max-height: none; mask-image: none; -webkit-mask-image: none; padding: 0; }
dialog.bigview ol.timeline li { grid-template-columns: 140px 1fr; padding: 12px 0 12px 20px; }
dialog.bigview ol.timeline p { font-size: 14.5px; }
.flash.success { background: #e8f6ee; color: #15803d; }
body.staff .tl-panel .panel-head { flex-wrap: wrap; overflow: visible; }

/* ---------- long tables scroll inside their panel; Expand opens them large */
body.staff .scroll-box { max-height: 440px; overflow: auto; overscroll-behavior: contain; }
body.staff .scroll-box table.list thead th { position: sticky; top: 0; z-index: 2; background: #fafbfd; box-shadow: 0 1px 0 var(--line-2); }
body.staff .panel:has(> .scroll-box)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; pointer-events: none;
  background: linear-gradient(rgba(255,255,255,0), #fff); border-radius: 0 0 var(--r-lg) var(--r-lg); }
body.staff .ph-tools { display: flex; align-items: center; gap: 10px; }
dialog.bigview .scroll-box { max-height: none; overflow: visible; }
dialog.bigview table.list thead th { position: sticky; top: -8px; z-index: 2; background: #fafbfd; }
dialog.bigview table.list td { padding: 12px 14px; font-size: 14px; }
.waited { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-2); }
.waited.long { color: #b42318; } .waited.mid { color: #a15c07; }
body.staff table.list th.right, body.staff table.list thead th.right { text-align: right; }
ol.timeline p { white-space: pre-line; }

/* ---------- pricing: quotes, margins, ladder */
dialog.drawer.wide { width: min(640px, 100vw); }
.pkg-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.pkg { margin: 0 !important; cursor: pointer; } .pkg input { display: none; }
.pkg span { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s, background .15s, transform .15s; }
.pkg span b { font-size: 15px; color: #22274f; } .pkg span small { font-size: 11.5px; color: var(--muted); } .pkg span em { font-style: normal; font-weight: 650; font-size: 13px; color: #1d4ed8; }
.pkg:hover span { transform: translateY(-1px); } .pkg input:checked + span { box-shadow: inset 0 0 0 2px #2563eb; background: #f3f7ff; }
.rupee-in { display: flex; align-items: center; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--line); background: #fff; overflow: hidden; }
.rupee-in span { padding: 0 10px; color: var(--muted); font-weight: 600; } .rupee-in .unit { font-size: 12px; font-weight: 500; white-space: nowrap; }
.rupee-in input { border: 0 !important; box-shadow: none !important; font-size: 16px; font-weight: 650; padding: 9px 8px; width: 100%; min-width: 0; font-variant-numeric: tabular-nums; }
.rupee-in.sm input { font-size: 14px; padding: 6px 8px; font-weight: 600; } .rupee-in.inl { display: inline-flex; width: 110px; vertical-align: middle; margin-left: 6px; }
.q-check { min-height: 22px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; margin-bottom: 12px; background: #f6f8fb; transition: background .25s; }
.q-check.ok { background: #effaf3; color: #14532d; } .q-check.warn { background: #fff7e6; color: #7a4a00; } .q-check.bad { background: #fdeeec; color: #b42318; }
.q-more summary { cursor: pointer; font-weight: 600; font-size: 13px; color: #1d4ed8; margin-bottom: 10px; }
.mchip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-weight: 650; font-size: 12.5px; font-variant-numeric: tabular-nums; background: #eef2f7; }
.mchip.ok { background: #e8f6ee; color: #15803d; } .mchip.warn { background: #fff4e0; color: #9a5b00; } .mchip.bad { background: #fdeeec; color: #b42318; }
.qstat { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #eef2f7; color: #3b4a5e; white-space: nowrap; }
.qstat.s-awaiting_approval, .qstat.s-pending { background: #fff4e0; color: #9a5b00; } .qstat.s-approved, .qstat.s-ready { background: #e8f6ee; color: #15803d; }
.qstat.s-declined { background: #fdeeec; color: #b42318; } .qstat.s-sent { background: #e6f0fe; color: #1d4ed8; } .qstat.s-signed { background: #10233e; color: #fff; }
.qstat.s-superseded { background: #f1f3f6; color: #94a3b8; }
body.staff table.ladder input { width: 100%; min-width: 0; padding: 6px 8px; } body.staff table.ladder .w-num { width: 64px; } body.staff table.ladder .w-name { width: 110px; font-weight: 600; }
body.staff table.ladder tr.below td { background: #fffaf0; } body.staff table.ladder tr.below td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
.del { cursor: pointer; color: var(--faint); } .del input { display: none; } .del:has(input:checked) { color: #b42318; } tr:has(.del input:checked) { opacity: .4; }
.tag.est { background: #fff4e0 !important; color: #9a5b00 !important; }
.inl-email { display: inline-block; width: 230px; margin-left: 8px; font-size: 12.5px; padding: 4px 8px; }
.radio-pills.big span { padding: 10px 18px; font-size: 14px; font-weight: 600; }
.drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px; border: 2px dashed #c9d6e6; border-radius: 16px; cursor: pointer; text-align: center; transition: border-color .2s, background .2s; }
.drop:hover { border-color: #2563eb; background: #f6f9ff; } .drop input { display: none; } .drop .ic { width: 30px; height: 30px; color: #088ac2; }
.drop span { font-size: 12.5px; color: var(--muted); } .drop em { font-style: normal; font-size: 12.5px; color: #15803d; }
ol.steps { padding-left: 18px; margin: 0; } ol.steps li { margin: 4px 0; }
body.staff table.list tr.tot td { background: #fafbfd; }
.books-go { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.books-go select { width: auto; display: inline-block; margin: 0 4px; }
.job { margin: 6px 0 10px; } .job-line { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 13.5px; }
.job .bar { height: 10px; } .job .btn { margin-top: 10px; }
details.panel > summary { list-style: none; cursor: pointer; } details.panel > summary::-webkit-details-marker { display: none; }

/* ---------- consultant: site visit */
.sync-pill { position: sticky; top: 8px; z-index: 20; display: flex; align-items: center; gap: 8px; width: fit-content; margin: 0 auto 10px;
  padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: #e8f6ee; color: #15803d; box-shadow: 0 4px 14px -6px rgba(16,35,62,.3); transition: background .3s, color .3s; }
.sync-pill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sync-pill[data-state=busy] { background: #e6f0fe; color: #1d4ed8; } .sync-pill[data-state=busy] i { animation: blip 1s ease-out infinite; }
.sync-pill[data-state=off] { background: #fff4e0; color: #9a5b00; }
.v-progress { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .v-progress .bar { flex: 1; height: 10px; } .v-progress span { font-weight: 650; font-size: 13px; }
.v-list { display: grid; gap: 10px; margin-bottom: 12px; }
.v-item { background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 1px 2px rgba(16,35,62,.06), 0 0 0 1px rgba(16,35,62,.05); transition: box-shadow .25s; }
.v-item.ok { box-shadow: 0 0 0 1.5px #86efac, 0 1px 2px rgba(16,35,62,.06); }
.v-item header { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; }
.v-item header b { display: block; font-size: 15px; } .v-item header small { color: var(--muted); font-size: 12.5px; }
.v-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #cbd5e1; margin-top: 2px; transition: all .25s; }
.v-item.ok .v-dot { border-color: #16a34a; background: #16a34a; box-shadow: inset 0 0 0 3px #fff; }
.v-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; margin: 10px 0 0; }
.v-photos:empty { display: none; }
.v-photos figure { position: relative; margin: 0; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #eef2f7; animation: pop .3s ease both; }
.v-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-photos figure.pending::after { content: "⏳"; position: absolute; left: 4px; bottom: 4px; font-size: 13px; background: rgba(255,255,255,.85); border-radius: 6px; padding: 0 4px; }
.v-del { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(10,26,48,.65); color: #fff; font-size: 15px; line-height: 1; }
.v-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.v-cam { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 11px; background: linear-gradient(135deg, #2563eb, #088ac2); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; }
.v-cam input { display: none; } .v-cam .ic { color: #fff; }
.v-na { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-2); margin: 0; }
.v-note { margin-top: 8px; width: 100%; box-sizing: border-box; font-size: 13.5px; }
.v-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.v-grid label, .v-full { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 10px; }
.v-grid select, .v-full input, .v-full select, .v-full textarea { font-size: 15px; width: 100%; box-sizing: border-box; }
.v-outcome { margin-bottom: 12px; } .v-outcome span { flex: 1; text-align: center; } .v-outcome { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.done-card { text-align: center; background: linear-gradient(135deg, #effaf3, #fff); }
.small-ok { width: 46px; height: 46px; margin: 0 auto 6px; border-radius: 50%; background: #16a34a; color: #fff; display: grid; place-items: center; font-size: 24px; animation: pop .5s ease both; }
.m-start { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 16px; font-size: 16px; margin: 4px 0 14px;
  background: linear-gradient(135deg, #2563eb, #088ac2); box-shadow: 0 10px 24px -10px rgba(37,99,235,.7); }
.m-start .ic { color: #fff; width: 20px; height: 20px; } .m-start.done { background: #10233e; box-shadow: none; }

/* ---------- office: photos on the sale page */
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; padding: 12px 16px 16px; }
.ph-grid a { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; display: block; background: #eef2f7; }
.ph-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .ph-grid a:hover img { transform: scale(1.06); }
.ph-grid span { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; font-size: 10.5px; color: #fff; background: linear-gradient(transparent, rgba(10,26,48,.75)); }
.ph-drive { font-size: 11px; color: var(--muted); padding: 0 16px 12px; }
.v-na-done { margin: 8px 0 0 30px; }

/* ---------- customer quote page */
body.cq { margin: 0; background: #f3f6fa; color: var(--ink); }
.cq-hero { position: relative; overflow: hidden; color: #e6f5fc; background: radial-gradient(90% 120% at 85% 10%, #1a4474 0%, #10233e 55%, #0a1a30 100%); }
.cq-hero::before { content: ""; position: absolute; inset: 0; opacity: .1; background-image: linear-gradient(rgba(136,208,240,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(136,208,240,.6) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(180deg, #000, transparent); }
.cq-hero-in { position: relative; max-width: 980px; margin: 0 auto; padding: 26px 20px 34px; }
.cq-hero .hud { position: absolute; right: -40px; top: 30px; width: 260px; opacity: .55; }
.cq-logo { height: 30px; margin-bottom: 26px; }
.cq-kicker { font-size: 11px; text-transform: uppercase; color: #88d0f0; }
.cq-hero h1 { color: #fff; font-size: clamp(24px, 5vw, 34px); line-height: 1.15; margin: 6px 0 8px; max-width: 640px; animation: rise .6s ease both; }
.cq-hero p { color: #9fcde3; margin: 0; }
.cq-cons { display: inline-flex; gap: 10px; align-items: center; margin-top: 18px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.08); backdrop-filter: blur(4px); }
.cq-cons b { display: block; color: #fff; } .cq-cons span { font-size: 13px; color: #9fcde3; } .cq-cons a { color: #cfeaf7; }
.cq-main { max-width: 980px; margin: -18px auto 0; padding: 0 14px 40px; position: relative; }
.cq-sec { background: #fff; border-radius: 18px; padding: 20px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(16,35,62,.05), 0 10px 30px -18px rgba(16,35,62,.25); animation: rise .6s ease both; }
.cq-sec h2 { font-size: 19px; color: #22274f; margin: 0 0 12px; }
.cq-table-wrap { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
.cq-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 520px; font-size: 14px; }
.cq-table th, .cq-table td { padding: 11px 12px; border-bottom: 1px solid #eef1f5; text-align: left; vertical-align: top; }
.cq-table td:first-child { color: var(--muted); font-size: 13px; width: 26%; position: sticky; left: 0; background: #fff; }
.cq-table th { padding-top: 16px; } .cq-table th b { display: block; font-size: 16px; color: #22274f; } .cq-table th span { color: var(--muted); font-weight: 500; font-size: 13px; }
.cq-table th.chosen, .cq-table td.chosen { background: #effaf3; }
.cq-badge { display: inline-block; margin-bottom: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 650; background: linear-gradient(135deg, #2563eb, #088ac2); color: #fff !important; }
.cq-table small { color: var(--muted); }
.cq-price td b { font-size: 20px; color: #10233e; } .cq-net td b { font-size: 17px; color: #15803d; }
.cq-table td.good { color: #15803d; } .cq-act td { border-bottom: 0; } .cq-act .btn { width: 100%; }
.cq-fine { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.cq-video { position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: #0a1a30; }
.cq-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cq-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin-top: 10px; }
.cq-photos a { aspect-ratio: 1; border-radius: 12px; overflow: hidden; } .cq-photos img { width: 100%; height: 100%; object-fit: cover; }
.cq-plan { list-style: none; margin: 0; padding: 0; position: relative; }
.cq-plan::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(#16a34a, #088ac2 30%, #dbe4ef); }
.cq-plan li { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 8px 0; animation: row-slide .5s ease both; animation-delay: calc(var(--i) * 90ms + .2s); }
.cq-plan i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 13px; background: #fff; color: #088ac2; box-shadow: 0 0 0 2px #cfe2f3; position: relative; }
.cq-plan li.done i { background: #16a34a; color: #fff; box-shadow: 0 0 0 4px #dcfce7; }
.cq-plan b { color: #22274f; } .cq-plan .mono { margin-left: 8px; font-size: 11px; color: #088ac2; } .cq-plan p { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-2); }
.cq-accepted { display: flex; gap: 12px; align-items: center; background: #effaf3; border-radius: 16px; padding: 14px 16px; margin-bottom: 14px; box-shadow: 0 0 0 1px #bbf7d0; }
.cq-accepted b { display: block; } .cq-accepted span { font-size: 13px; color: #3f6b50; } .cq-accepted .small-ok { margin: 0; flex: none; }
.cq-foot { text-align: center; color: var(--muted); font-size: 13px; padding: 10px 0; } .cq-foot b { display: block; color: var(--ink-2); }
.cq-dlg form { padding: 0 22px 22px; }

/* ---------- quote builder */
dialog.drawer.xwide { width: min(760px, 100vw); }
.qb-tabs { display: flex; gap: 6px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.qb-tab { display: inline-flex; align-items: center; gap: 8px; border: 0; background: #f1f4f8; color: var(--ink-2); font: 600 13.5px Inter, sans-serif; padding: 8px 14px; border-radius: 10px; cursor: pointer; }
.qb-tab.on { background: #10233e; color: #fff; }
.qb-chip:empty { display: none; } .qb-tab .qb-chip { font-size: 11px; padding: 1px 7px; }
.qb-add { display: inline-flex; align-items: center; gap: 6px; border: 1px dashed #b9c6d8; background: none; color: #1d4ed8; font: 600 13px Inter, sans-serif; padding: 7px 12px; border-radius: 10px; cursor: pointer; }
.qb-opt { animation: fade .25s ease; }
.qb-remove-wrap { display: flex; align-items: flex-end; justify-content: flex-end; }
.qb-addons { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.qb-addon { margin: 0 !important; cursor: pointer; } .qb-addon input { display: none; }
.qb-addon span { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 500; }
.qb-addon span em { font-style: normal; color: #1d4ed8; font-weight: 600; } .qb-addon input:checked + span { box-shadow: inset 0 0 0 2px #2563eb; background: #f3f7ff; }
.qb-fin { display: flex; gap: 6px; margin-top: 8px; } .qb-fin select { width: auto; flex: 1; }
.danger-text { color: #b42318 !important; }
.qopt { padding: 3px 0; } .qopt + .qopt { border-top: 1px dashed var(--line-2); } .qopt.acc b { color: #15803d; } .qopt .small { display: block; }

/* ---------- phase 3: layout, 3D, mock-ups */
.ly { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.ly-map-wrap { position: relative; border-radius: 16px; overflow: hidden; box-shadow: var(--lift-2); }
.ly-map { height: calc(100vh - 230px); min-height: 480px; background: #0a1a30; }
.ly-hint { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(10,26,48,.85); color: #e6f5fc; font-size: 13.5px; backdrop-filter: blur(4px); }
.ly-hint b { color: #ffd84d; }
.ly-side .panel { margin-bottom: 12px; }
.ly-find { display: flex; gap: 6px; margin-bottom: 10px; } .ly-find input { flex: 1; min-width: 0; }
.ly-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.ly-set label { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.ly-set label input, .ly-set label select { width: 150px; }
.ly-result { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: #f3f7fc; font-size: 13.5px; }
.ly-saved { width: 100%; display: block; }
@media (max-width: 1000px) { .ly { grid-template-columns: 1fr; } .ly-map { height: 60vh; } }
.model3d { height: calc(100vh - 220px); min-height: 460px; border-radius: 16px; overflow: hidden; box-shadow: var(--lift-2); background: #dfefff; }
.mk { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.mk-stage { border-radius: 16px; overflow: hidden; box-shadow: var(--lift-2); background: #0a1a30; }
.mk-stage canvas { width: 100%; display: block; touch-action: none; cursor: grab; }
@media (max-width: 1000px) { .mk { grid-template-columns: 1fr; } }
.lay-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; padding: 12px 16px 16px; }
.lay-strip a { border-radius: 12px; overflow: hidden; display: block; aspect-ratio: 1; background: #eef2f7; position: relative; }
.lay-strip img { width: 100%; height: 100%; object-fit: cover; } .lay-strip span { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px; font-size: 11px; color: #fff; background: linear-gradient(transparent, rgba(10,26,48,.8)); }

.cq-3d { position: relative; height: 380px; border-radius: 14px; overflow: hidden; background: #dfefff; margin: 10px 0; }
.cq-3d-tip { position: absolute; left: 10px; top: 10px; z-index: 2; font-size: 10.5px; color: #10233e; background: rgba(255,255,255,.8); padding: 3px 8px; border-radius: 999px; }
.cq-lay { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.cq-lay a { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; display: block; background: #eef2f7; }
.cq-lay img { width: 100%; height: 100%; object-fit: cover; } .cq-lay span { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 10px; color: #fff; font-size: 12px; background: linear-gradient(transparent, rgba(10,26,48,.8)); }

/* consultant quotes on the phone */
.mq { padding: 10px 0; border-bottom: 1px solid var(--line-2); } .mq:last-child { border-bottom: 0; }
.mq-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.mq-opt { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 3px 0; }
.mq-act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .mq-act form { display: inline; }
.mqb .qb-addons { grid-template-columns: 1fr; } .mqb-lab { font-size: 12.5px; font-weight: 600; color: var(--ink-2); display: block; margin-bottom: 4px; }
.m-quote-btn { margin: -4px 0 14px; display: flex; gap: 8px; align-items: center; justify-content: center; }
body.staff .tag.test { background: #fff4e0; color: #9a5b00; }
.ly-mag { position: absolute; inset: 0; z-index: 4; background: #0a1a30; }
.ly-mag canvas { width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }
.ly-mag-bar { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: rgba(10,26,48,.85); color: #e6f5fc; font-size: 11px; }
.ly-mag-bar input[type=range] { flex: 1; accent-color: #ffd84d; }
.ly-mag-btn { position: absolute; top: 12px; left: 12px; z-index: 3; display: inline-flex; gap: 6px; align-items: center; border: 0; border-radius: 10px; padding: 8px 12px; font: 600 13px Inter, sans-serif; color: #10233e; background: #ffd84d; box-shadow: 0 6px 16px -6px rgba(0,0,0,.5); cursor: pointer; }

/* ---------- consultant visit: step by step (photos → layout → mock-up → quote → finish) */
.m-steps { display: flex; gap: 4px; margin: 0 0 12px; padding: 6px; border-radius: 14px; background: rgba(255,255,255,.08); overflow-x: auto; scrollbar-width: none; }
.m-steps::-webkit-scrollbar { display: none; }
.m-step { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 10px; color: #9fb4cc; font-size: 11.5px; font-weight: 600; text-decoration: none; transition: background .2s, color .2s; }
.m-step i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; border: 2px solid currentColor; }
.m-step.ok { color: #6ee7a8; } .m-step.ok i { background: #15803d; border-color: #15803d; color: #fff; }
.m-step.on { background: #fff; color: #10233e; box-shadow: 0 6px 18px -8px rgba(0,0,0,.5); }
.m-step.on i { border-color: #10233e; } .m-step.on.ok i { border-color: #15803d; }
.m-next { margin: 14px 0 6px; }
.m-summary { list-style: none; margin: 8px 0 0; padding: 0; }
.m-summary li { display: grid; grid-template-columns: 26px 1fr; gap: 2px 8px; align-items: center; padding: 8px 0; border-top: 1px solid #e8eef5; }
.m-summary li:first-child { border-top: 0; }
.m-summary li i { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; background: #e8eef5; color: #64748b; }
.m-summary li.ok i { background: #15803d; color: #fff; }
.m-summary li a { font-weight: 600; color: inherit; }
.m-mocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.m-mocks img { width: 100%; border-radius: 10px; display: block; }
/* the layout editor and mock-up on a phone */
body.mobile .m-wide { max-width: 1100px; }
body.mobile .ly-map { height: 62vh; min-height: 340px; }
body.mobile .ly-hint { font-size: 12.5px; padding: 8px 10px; }
body.mobile .ly-set label input, body.mobile .ly-set label select { width: 140px; }
body.mobile .ly .panel, body.mobile .mk .panel { background: #fff; border-radius: 14px; }
.ly-turn { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.ly-turn input { width: 64px; }
.mk-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; margin: 10px 0 6px; }
.mk-leg input[type=range] { width: 100%; accent-color: #ffd84d; }
.mk-kinds { display: flex; gap: 6px; margin: 0 0 12px; padding: 5px; border-radius: 12px; background: #e8eef5; }
.mk-kinds a { flex: 1; text-align: center; padding: 9px 10px; border-radius: 9px; font-weight: 600; font-size: 13.5px; color: #475569; text-decoration: none; }
.mk-kinds a.on { background: #fff; color: #10233e; box-shadow: 0 4px 12px -6px rgba(16,35,62,.4); }
.ftin { display: inline-flex; align-items: center; gap: 4px; }
.ftin input { width: 58px !important; text-align: right; }
.ftin i { font-style: normal; font-size: 12px; color: #64748b; margin-right: 4px; }
.ly-models { margin-bottom: 10px; }
.ly-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.ly-chip { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border-radius: 10px; border: 1.5px solid #d6dfea; background: #fff; cursor: pointer; font: inherit; color: #10233e; }
.ly-chip b { font-size: 13.5px; } .ly-chip small { font-size: 10.5px; color: #64748b; }
.ly-chip.on { border-color: #1d4ed8; background: #eaf1ff; box-shadow: 0 0 0 3px rgba(29,78,216,.12); }
.ly-step { display: inline-flex; align-items: center; gap: 4px; }
.ly-set .ly-step input { width: 56px !important; text-align: center; }
.ly-step .btn { min-width: 38px; font-size: 18px; line-height: 1; padding: 6px 0; }

/* ---------- site photos: the camera inside the page (no camera app, so Android can't drop the page) */
.v-cam { border: 0; font-family: inherit; }
.v-gal { display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 11px; border: 1.5px solid #c9d6e6; color: #1d4ed8; font-weight: 600; font-size: 13.5px; cursor: pointer; background: #fff; }
.v-gal input { display: none; }
body.cam-open { overflow: hidden; }
.cam { position: fixed; inset: 0; z-index: 1000; background: #000; display: flex; flex-direction: column; }
.cam[hidden] { display: none; }
.cam video { flex: 1; width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.cam-top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: max(14px, env(safe-area-inset-top)) 16px 14px; background: linear-gradient(rgba(0,0,0,.6), transparent); color: #fff; font-size: 16px; }
.cam-x { border: 0; border-radius: 22px; padding: 10px 20px; background: #ffd84d; color: #10233e; font: 700 15px Inter, sans-serif; }
.cam-strip { position: absolute; left: 12px; right: 12px; bottom: 132px; display: flex; gap: 6px; overflow-x: auto; }
.cam-strip img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; border: 2px solid #fff; flex: none; }
.cam-bar { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 18px 20px max(26px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.cam-n { color: #fff; font-size: 14px; font-weight: 600; }
.cam-shut { width: 78px; height: 78px; border-radius: 50%; border: 5px solid #fff; background: #fff; box-shadow: inset 0 0 0 4px #000; cursor: pointer; transition: transform .1s; }
.cam-shut:active { transform: scale(.92); }
.cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cam-flash.go { animation: camflash .35s ease-out; }
@keyframes camflash { from { opacity: .85; } to { opacity: 0; } }

/* ---------- products & datasheets */
.prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.prod { display: block; padding: 14px 16px; border-radius: 14px; border: 1px solid #e3e9f1; background: #fbfcfe; color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.prod:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(16,35,62,.4); }
.prod-top { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.prod-model { font-size: 13.5px; margin: 2px 0 6px; color: #334155; }
.prod-spec { color: #64748b; }
.prod-file { margin-top: 8px; display: flex; gap: 6px; align-items: center; color: #15803d; }

/* ---------- customer page: 25 years with solar + products */
.cq-ptabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.cq-ptabs button { border: 1.5px solid #d6dfea; background: #fff; border-radius: 22px; padding: 8px 14px; font: 600 13px Inter, sans-serif; color: #334155; cursor: pointer; }
.cq-ptabs button.on { background: #10233e; border-color: #10233e; color: #fff; }
.cq-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.cq-stats > div { padding: 14px 16px; border-radius: 14px; background: linear-gradient(160deg, #f6f9fd, #eef4fb); border: 1px solid #e3eaf3; }
.cq-stats span { display: block; font-size: 12px; color: #64748b; font-weight: 500; }
.cq-stats b { display: block; font-size: 22px; letter-spacing: -.02em; color: #10233e; margin-top: 4px; }
.cq-stats b.good { color: #15803d; }
.cq-stats em { font-style: normal; font-size: 12px; color: #64748b; }
.cq-charts { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 820px; }
@media (max-width: 860px) { .cq-charts { grid-template-columns: 1fr; } }
.cq-charts figure { margin: 0; padding: 14px 14px 6px; border-radius: 16px; border: 1px solid #e3eaf3; background: #fff; }
.cq-charts figcaption { margin-bottom: 6px; }
.cq-charts figcaption b { display: block; font-size: 14.5px; color: #10233e; }
.cq-charts figcaption span { font-size: 12px; color: #64748b; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.cq-charts .k { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: 2px; vertical-align: middle; }
.cq-charts .k.bar { background: #8fd3a8; } .cq-charts .k.cum { background: #1d4ed8; height: 3px; }
.pchart { width: 100%; height: auto; display: block; font-family: Inter, sans-serif; }
.pchart .g { stroke: #eef2f7; stroke-width: 1; } .pchart .z { stroke: #94a3b8; stroke-width: 1.2; }
.pchart .ax { fill: #94a3b8; font-size: 11px; }
.pchart .ln { stroke: #e69c00; stroke-width: 2.5; stroke-linejoin: round; }
.pchart .dot { fill: #e69c00; stroke: #fff; stroke-width: 2; }
.pchart .lb { fill: #10233e; font-size: 12px; font-weight: 600; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.pchart .bar { fill: #8fd3a8; } .pchart .bar:hover { fill: #22a35a; }
.pchart .cum { stroke: #1d4ed8; stroke-width: 2.8; stroke-linejoin: round; }
.pchart .cdot { fill: #1d4ed8; stroke: #fff; stroke-width: 2; }
.pchart .pb { stroke: #15803d; stroke-width: 1.5; stroke-dasharray: 4 4; }
.pchart .hit { fill: transparent; } .pchart .hit:hover { fill: rgba(230,156,0,.25); }
.cq-prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.cq-prod { padding: 16px; border-radius: 16px; border: 1px solid #e3eaf3; background: linear-gradient(170deg, #fff, #f6f9fd); display: flex; flex-direction: column; gap: 2px; }
.cq-prod-k { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #088ac2; }
.cq-prod b { font-size: 17px; color: #10233e; } .cq-prod > span { color: #475569; font-size: 13.5px; }
.cq-prod ul { margin: 8px 0 12px; padding-left: 18px; font-size: 13px; color: #334155; flex: 1; }
.cq-prod .btn { align-self: flex-start; }

/* ---------- company & offices */
.offices { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.office { padding: 12px; border-radius: 12px; border: 1px solid #e3e9f1; background: #fbfcfe; display: flex; flex-direction: column; gap: 8px; transition: opacity .2s; }
.office.removing { opacity: .4; }
.office-top { display: flex; gap: 8px; align-items: center; }
.office-top input { flex: 1; font-weight: 600; }
.office-n { width: 24px; height: 24px; border-radius: 50%; background: #10233e; color: #fff; display: grid; place-items: center; font-size: 11px; flex: none; }
.office textarea { resize: vertical; }
.cq-offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 14px; text-align: left; }
.cq-offices div { font-size: 12.5px; color: #64748b; display: flex; flex-direction: column; gap: 2px; }
.cq-offices b { color: #10233e; font-size: 13px; }
/* camera: review the shot before keeping it */
.cam-shot { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; z-index: 1; }
.cam.review .cam-shot { display: block; }
.cam.review .cam-bar, .cam.review .cam-strip { display: none; }
.cam-top { z-index: 2; }
.cam-review { display: none; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; gap: 12px; padding: 18px 20px max(26px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0,0,0,.75)); }
.cam.review .cam-review { display: flex; }
.cam-btn { flex: 1; border: 0; border-radius: 14px; padding: 16px; font: 700 17px Inter, sans-serif; background: #ffd84d; color: #10233e; }
.cam-btn.ghost { background: rgba(255,255,255,.18); color: #fff; border: 1.5px solid rgba(255,255,255,.6); }
.cam-btn:disabled { opacity: .6; }
/* thumbnails: uploading / uploaded */
.v-photos figure.up::after { content: "✓"; position: absolute; left: 4px; bottom: 4px; width: 20px; height: 20px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: #15803d; border-radius: 50%; }
.v-toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translate(-50%, 30px); opacity: 0; z-index: 1100; max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: 12px; background: #10233e; color: #fff; font-size: 14px; font-weight: 500; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); transition: transform .25s, opacity .25s; pointer-events: none; }
.v-toast.on { transform: translate(-50%, 0); opacity: 1; }
/* upload rule + status */
.up-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: -4px 0 12px; font-size: 13px; color: #475569; }
.up-row select { font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid #d6dfea; background: #fff; margin-left: 4px; max-width: 220px; }
.sync-pill[data-state=wait] { background: #fff7e0; color: #8a5a00; } .sync-pill[data-state=wait] i { background: #e69c00; }
.v-photos figure.pending::after { content: "On phone"; font-size: 10.5px; font-weight: 600; padding: 2px 6px; color: #8a5a00; }
.v-photos figure.sending::after { content: "Uploading…"; color: #1d4ed8; }
.install { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0 0 14px; border-radius: 14px; background: linear-gradient(135deg, #10233e, #173a63); color: #fff; }
.install img { width: 42px; height: 42px; border-radius: 10px; flex: none; }
.install div { flex: 1; display: flex; flex-direction: column; font-size: 12.5px; color: #c7d6ea; } .install b { color: #fff; font-size: 14px; }
.install .btn { background: #ffd84d; color: #10233e; border: 0; }
.install-x { background: none; border: 0; color: #c7d6ea; font-size: 16px; padding: 4px; }
/* consultant: can't do this visit */
.cant summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.cant summary::-webkit-details-marker { display: none; }
.cant summary b { color: #b45309; }
.cant[open] summary { margin-bottom: 12px; }
.cant-f { display: flex; flex-direction: column; gap: 10px; }
/* office: visits handed back by the consultant */
.rebook-banner { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 14px 18px; border-radius: 14px; background: #fff7e0; border: 1px solid #f5d27a; color: #7a4d00; }
.rebook-banner > .ic { width: 22px; height: 22px; flex: none; }
.rebook-banner div { flex: 1; display: flex; flex-direction: column; gap: 2px; } .rebook-banner b { color: #5c3a00; } .rebook-banner span { font-size: 13px; }
.pill.rebook { background: #fff1d6; color: #9a5b00; }
.rebook-panel { border: 1px solid #f5d27a; }
.closed-card { display: flex; flex-direction: column; gap: 6px; border-left: 4px solid #15803d; }
.closed-card b { color: #15803d; }
.how-calc { border-top: 1px solid #e8eef5; background: #fbfcfe; } .how-calc ol { margin: 6px 0 8px; padding-left: 20px; } .how-calc li { margin: 3px 0; }

/* ---------- component-by-component quote builder (quotes/_components.html) */
.qc { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 12px; }
.qc-start { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; padding: 10px 12px; border-radius: 12px; background: #f4f7fb; }
.qc-start select { font-weight: 500; }
.qc-step { border: 1px solid #e3e9f1; border-radius: 14px; padding: 12px; background: #fff; }
.qc-step[hidden] { display: none; }
.qc-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.qc-h i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; color: #fff; background: #15803d; flex: none; }
.qc-h b { font-size: 14.5px; color: #10233e; } .qc-h b[hidden] { display: none; }
.qc-kw { margin-left: auto; font-weight: 700; color: #15803d; font-size: 13.5px; }
.qc-type .qc-h i { background: #10233e; }
.qc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.qc-grid > div[hidden], .qc-grid > label[hidden] { display: none; }
.qc-f { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: #475569; }
.qc-f select, .qc-f input { font-weight: 500; }
.qc-pills { flex-wrap: wrap; } .qc-pills label span { font-size: 13px; }
.qc-type .radio-pills label span { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.qc-type .radio-pills small { font-weight: 500; font-size: 11px; opacity: .8; }
.qc-type label.hybrid input:checked + span { background: #ea7a0c; border-color: #ea7a0c; color: #fff; }
.qc-type label.ongrid input:checked + span { background: #15803d; border-color: #15803d; color: #fff; }
.qc-note { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: #fff7e0; color: #7a4d00; font-size: 12px; }
.qc-other { margin-top: 4px; }
/* component costs */
.list.cc { margin-bottom: 6px; } .cc td:first-child { width: 46%; }
.cc-cell small { display: block; font-size: 10.5px; color: #64748b; margin-top: 2px; }
.cc-cell.cc-estimate small { color: #b45309; } .cc-cell.cc-missing small { color: #b91c1c; font-weight: 600; }
.cc-cell .rupee-in { max-width: 150px; }
.cc-books { font-weight: 600; color: #10233e; } .cc-cell.cc-books small { color: #15803d; }

/* ---------- consultant dashboard */
.mb-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; margin: 0 0 16px; }
.mb-stats > * { display: flex; flex-direction: column; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid #e3e9f1; text-decoration: none; color: inherit; }
.mb-stats b { font-size: 24px; letter-spacing: -.02em; color: #10233e; line-height: 1.1; }
.mb-stats span { font-size: 11.5px; color: #64748b; margin-top: 3px; line-height: 1.25; }
.mb-stats .warn { background: #fff7e0; border-color: #f5d27a; } .mb-stats .warn b { color: #9a5b00; }
.m-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #e69c00; color: #fff; font-size: 11px; vertical-align: middle; }
.mb-rem, .mb-fu { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.mb-r { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid #e3e9f1; border-left: 4px solid #94a3b8; }
.mb-r > div { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mb-r b { font-size: 14px; color: #10233e; } .mb-r span { font-size: 12.5px; color: #64748b; }
.mb-r.approval { border-left-color: #e69c00; } .mb-r.ready { border-left-color: #15803d; } .mb-r.due { border-left-color: #dc2626; }
.mb-r.viewed { border-left-color: #1d4ed8; } .mb-r.visit { border-left-color: #10233e; }
.mb-f { padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid #e3e9f1; }
.mb-f summary { list-style: none; display: flex; gap: 12px; align-items: center; cursor: pointer; } .mb-f summary::-webkit-details-marker { display: none; }
.mb-f summary div { display: flex; flex-direction: column; } .mb-f summary span { font-size: 12.5px; color: #64748b; }
.mb-d { flex: none; min-width: 64px; font-weight: 700; color: #10233e !important; font-size: 12.5px !important; }
.mb-f.due .mb-d { color: #dc2626 !important; }
.mb-f form { display: flex; gap: 8px; margin-top: 10px; } .mb-f form input { flex: 1; min-width: 0; }
.cant.fu summary b { color: #1d4ed8; }
.enq-add { margin: 0 0 14px; }
.enq h2 { margin: 14px 0 8px; font-size: 15px; } .enq h2:first-of-type { margin-top: 0; }
.enq label { margin-bottom: 8px; }
.tag.enq { background: #e6f0fe; color: #1d4ed8; }
.enq-banner { background: #eef4ff; border-color: #bcd2fb; color: #1e3a8a; } .enq-banner b { color: #10233e; }
.enq-panel { border: 1px solid #bcd2fb; }