),
not a single display value that would break one shape or the other. */
.trendy-pagination { display: none !important; }
[data-paginate] [hidden] { display: revert !important; }
body, .report-header, .ldr-top-stat, .ldr-summary-title, .ldr-summary-block-title,
.ldr-summary-agent-bar, .ldr-summary-footer, .stat-card, .badge, .sar-aging-chip {
-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* Lead Details Report — 3 pages: the header/KPI section (nothing
precedes it, so no break needed), Today's Activity, then the Lead
Summary breakdown. break-before is the modern property; the
page-break-before duplicate is the same rule for browsers still on
the older name. */
.ldr-activity-card, .ldr-summary {
break-before: page;
page-break-before: always;
}
/* Keep each small block whole rather than splitting a table row or a
KPI card across the page boundary those two breaks create. */
.stat-card, .ldr-top-stat, .ldr-summary-block, .ldr-activity-col {
break-inside: avoid;
page-break-inside: avoid;
}
}
/* Import Leads modal — preview/progress flow (modules/leads/views/index.php's
#import-leads-modal, assets/js/lead-import.js). Column-mapping rows read
"SOURCE_COLUMN → Target Field" with a Found/Not in file badge; the
progress view is a plain animated bar plus a running create/update/skip
line, since a real per-batch AJAX loop drives it rather than a fake
timed animation. */
.import-leads-dialog { max-height: 85vh; overflow-y: auto; }
.import-loading { color: var(--text-muted); font-size: 0.85rem; margin-top: 8px; }
.import-mapping-list { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 18px; max-height: 220px; overflow-y: auto; }
.import-mapping-row {
display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--radius-sm);
background: #fafcfb; font-size: 0.82rem;
}
.import-mapping-row-missing { opacity: 0.55; }
.import-mapping-source { font-weight: 700; font-family: monospace; color: var(--brand-dark); flex-shrink: 0; }
.import-mapping-arrow { color: var(--text-muted); flex-shrink: 0; }
.import-mapping-target { flex: 1; color: var(--text); }
.import-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.import-progress-bar-wrap { height: 10px; border-radius: 999px; background: #eef2f0; overflow: hidden; margin: 14px 0 10px; }
.import-progress-bar { height: 100%; background: var(--brand-gradient); border-radius: 999px; transition: width 0.25s var(--ease); width: 0%; }
.import-progress-stats { font-size: 0.82rem; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }
/* Agent Performance report (core/views/partials/_agent_performance_report.php)
— one colorful, staggered-entrance card per agent instead of a plain
table row, since the point is "how is each person doing" at a glance,
not a spreadsheet. Conversion rate reads as an animated fill bar (same
width-transition technique as the Import modal's progress bar) rather
than just a number, and each status shows as its own real badge
(Core\LeadStatusBadge — the exact same color every other status pill
app-wide already uses) so a color you already recognize from the Leads
grid carries straight into this report. */
.apr-agent-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.apr-agent-card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 18px 20px; box-shadow: var(--shadow-sm); animation: fadeInUp 0.4s var(--ease) both;
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.apr-agent-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.apr-agent-header { display: flex; align-items: center; gap: 12px; }
.apr-agent-avatar {
width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 800; font-size: 0.9rem; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.apr-agent-name { font-weight: 800; font-size: 1rem; }
.apr-agent-role { font-size: calc(0.78rem + 3px); color: var(--text-muted); }
.apr-agent-header-spacer { flex: 1; }
.apr-agent-total { text-align: right; }
.apr-agent-total-value { font-size: 1.5rem; font-weight: 800; color: var(--brand-dark); line-height: 1; }
.apr-agent-total-label { font-size: calc(0.72rem + 3px); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; }
.apr-agent-bar-wrap { height: 8px; border-radius: 999px; background: #eef2f0; overflow: hidden; margin: 14px 0 8px; }
.apr-agent-bar { height: 100%; background: linear-gradient(90deg, #34d399, #059669); border-radius: 999px; width: 0%; transition: width 0.6s var(--ease); }
.apr-agent-meta { font-size: calc(0.82rem + 3px); color: var(--text-muted); margin-bottom: 12px; }
.apr-agent-meta strong { color: var(--text); }
.apr-agent-statuses { display: flex; flex-wrap: wrap; gap: 6px; }
.apr-agent-statuses .badge { font-size: calc(0.72rem + 3px); }
.apr-empty-agents { text-align: center; padding: 40px 20px; color: var(--text-muted); }
/* Spells out how "Total Leads" and "Assigned to an Agent" relate right on
the KPI cards themselves — the gap between them (unassigned leads) was
easy to miss as a small parenthetical on just one card. */
.apr-kpi-footnote { font-size: calc(0.72rem + 3px); color: var(--text-muted); margin-top: 6px; }
/* Every small/muted caption on this report bumped +3px per explicit
request — calc(
+ 3px) rather than a hand-converted rem
value, so this stays exactly +3px regardless of the root font-size
Settings > Appearance might be set to. .stat-label itself is shared
site-wide (every other .stat-grid page), so it's scoped to .apr-report
(see that class on this partial's own outer div) rather than changed
at its own shared rule above — every other page's stat cards are
untouched. */
.apr-report .stat-card .stat-label { font-size: calc(0.85rem + 3px); }
/* CRM Hygiene Tracker (core/views/partials/_hygiene_tracker_report.php) —
each hygiene issue gets its own colored chip (a lead can carry more
than one at once) rather than one plain comma-joined string, and the
4 KPI cards double as instant filters (Total clears issue_type, each
other card sets it) via the report's own ajax-region. */
.hygiene-kpi-card { text-decoration: none; color: inherit; cursor: pointer; display: block; }
.hygiene-issue-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; margin: 2px 4px 2px 0; white-space: nowrap; }
.hygiene-issue-overdue_followup { background: var(--danger-light); color: var(--danger); }
.hygiene-issue-stale { background: #fef3c7; color: #b45309; }
.hygiene-issue-unassigned { background: #ede9fe; color: #6d28d9; }
.hygiene-table td { vertical-align: middle; }
.hygiene-unassigned-text { color: var(--text-muted); font-style: italic; }
/* Lead detail slide-over — richer redesign (modules/leads/views/panel.php):
a prev/next navbar above the existing header, an avatar + enriched
gradient header, colorized action buttons, and icon+title+subtitle
card headers per tab (panel_section_header() in panel.php). Base
layout/colors for .lead-panel-header, .tab-nav, .status-pills etc.
stay in app2.css — this only adds what's new. */
.lead-panel-navbar {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px 12px 24px; border-bottom: 1px solid var(--border);
}
.lead-panel-nav-group { display: flex; align-items: center; gap: 8px; }
.lead-panel-nav-btn {
width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border);
background: var(--surface); color: var(--brand-dark); display: inline-flex;
align-items: center; justify-content: center; cursor: pointer; padding: 0;
transition: background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.lead-panel-nav-btn:hover:not(:disabled) { background: var(--brand-gradient); color: #fff; border-color: transparent; transform: scale(1.08); }
.lead-panel-nav-btn:disabled { opacity: 0.35; cursor: default; }
.lead-panel-nav-pos { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); min-width: 60px; text-align: center; }
.lead-panel-navbar .lead-panel-close-x { position: static; }
.lead-panel-header {
background:
radial-gradient(720px 160px at 100% -20%, rgba(20, 184, 134, 0.16), transparent 60%),
linear-gradient(180deg, var(--brand-light) 0%, rgba(255,255,255,0) 100%);
}
.lead-panel-heading { gap: 16px; align-items: flex-start; }
.lead-panel-avatar {
width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
color: #fff; font-weight: 800; font-size: 1.2rem; letter-spacing: 0.02em;
box-shadow: var(--shadow-sm);
}
/* Name + contact line + source/assigned-to line, grouped so the score
badge (a sibling, pinned top-right via margin-left:auto below) never
has to share a row with them. min-width:0 lets the long email/name
text actually truncate-wrap instead of overflowing the flex row. */
.lead-panel-heading-main { flex: 1; min-width: 0; padding-top: 2px; }
.lead-panel-heading-main h2 { margin: 0; font-size: 1.4rem; letter-spacing: -0.02em; }
/* Mobile / city / email — moved right under the name (previously a
plain muted line near the bottom of the header, after the status
pills) so the two fields someone glances at first are the two right
next to the name. */
.lead-panel-contact { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; font-size: 0.88rem; color: var(--text); font-weight: 600; }
.lead-panel-contact span { display: inline-flex; align-items: center; gap: 5px; }
.lead-panel-contact svg { color: var(--brand-dark); flex-shrink: 0; }
.lead-panel-badge-light { background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); font-size: 0.82rem; padding: 4px 12px; }
.lead-panel-subline .lead-panel-meta { font-size: 0.9rem; color: var(--text-muted); }
.lead-panel-subline .lead-panel-meta strong { font-weight: 800; color: var(--brand-dark); font-size: 0.94rem; }
.lead-panel-score {
margin-left: auto; flex-shrink: 0; padding: 7px 16px; font-size: 0.82rem; border-radius: 999px;
box-shadow: var(--shadow-sm);
}
@media (max-width: 560px) {
/* Avatar + score together already eat ~200px of a ~330px-wide mobile
header, squeezing .lead-panel-heading-main (name/contact/subline)
down to a sliver that wraps every word onto its own line. Dropping
the score to its own full-width row frees virtually all of that
back up for the name/contact text, which is the one that actually
needs it. */
.lead-panel-score { flex-basis: 100%; margin-left: 0; margin-top: 2px; order: 3; }
}
/* Status pills — enclosed in their own labeled card instead of floating
loose pills, and colored per-status via Core\LeadStatusBadge's own
badge-* palette (already used for the exact same statuses on the
Leads grid and Dashboard tiles) instead of the old 3-color scheme
that left most statuses a flat, indistinct gray. */
.status-card { margin: 14px 24px 4px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.status-card-label { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--brand-dark); margin-bottom: 10px; }
.status-card .status-pills { padding: 0; margin: 0; }
.status-card .status-pill { padding: 6px 14px; font-size: 0.78rem; }
.status-card .status-pill.badge-new { background: #dbeafe; color: #1d4ed8; }
.status-card .status-pill.badge-assigned { background: #e0e7ff; color: #4338ca; }
.status-card .status-pill.badge-contacted { background: #cffafe; color: #0e7490; }
.status-card .status-pill.badge-followup { background: #fef3c7; color: #b45309; }
.status-card .status-pill.badge-prospect { background: #ede9fe; color: #6d28d9; }
.status-card .status-pill.badge-quotation { background: #ccfbf1; color: #0f766e; }
.status-card .status-pill.badge-sitevisit { background: #ffedd5; color: #c2410c; }
.status-card .status-pill.badge-converted { background: var(--brand-light); color: var(--brand-dark); }
.status-card .status-pill.badge-lost { background: var(--danger-light); color: var(--danger); }
.status-card .status-pill.badge-noresponse { background: #e2e8f0; color: #475569; }
.status-card .status-pill.badge-notinterested { background: #ffe4e6; color: #be123c; }
.status-card .status-pill.badge-callback { background: #e0f2fe; color: #0369a1; }
.status-card .status-pill.badge-wrongenquiry { background: #f3e8d8; color: #78350f; }
.status-card .status-pill.badge-advrecvd { background: #d1fae5; color: #047857; }
.status-card .status-pill.badge-tankpending { background: #fed7aa; color: #9a3412; }
.status-card .status-pill.badge-tankdone { background: #bbf7d0; color: #15803d; }
.status-card .status-pill.badge-duplication { background: #e5e7eb; color: #4b5563; }
.status-card .status-pill.badge-enzymerenew { background: #fce7f3; color: #be185d; }
.status-card .status-pill.badge-instcustscope { background: #fef9c3; color: #854d0e; }
/* Tab nav — a "tray" (soft background card) holding the icon+label
pills, replacing the old bare row of text-only buttons that just sat
directly on the header's bottom border and looked flat wrapped onto
2 ragged rows. Still wraps (every tab stays visible, none hidden
behind a scroll) — the tray background and icons are what make wrapping
read as intentional instead of accidental overflow. */
.tab-nav-wrap { margin: 0 24px 18px; padding: 6px; background: var(--bg); border-radius: 14px; }
.lead-panel-tabs .tab-nav { border-bottom: none; margin: 0; padding-bottom: 0; gap: 4px; }
.lead-panel-tabs .tab-btn { display: inline-flex; align-items: center; gap: 6px; }
.lead-panel-tabs .tab-btn svg { flex-shrink: 0; opacity: 0.7; }
.lead-panel-tabs .tab-btn.active svg { opacity: 1; }
.lead-panel-tabs .tab-btn:hover { background: var(--surface); }
.lead-panel-actions { gap: 10px; background: linear-gradient(180deg, rgba(14,164,114,0.03), transparent); }
.lead-panel-actions .btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; border: none; font-weight: 700; transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), filter 0.15s var(--ease); }
.lead-panel-actions .btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
.lead-panel-actions .btn svg { flex-shrink: 0; }
.lead-action-call { background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: #fff; box-shadow: 0 3px 10px rgba(29, 78, 216, 0.28); }
.lead-action-whatsapp { background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; box-shadow: 0 3px 10px rgba(18, 140, 126, 0.28); }
.lead-action-convert { background: var(--accent-gradient); color: #fff; box-shadow: 0 3px 10px rgba(180, 83, 9, 0.3); }
.lead-action-task { background: linear-gradient(135deg, #a78bfa, #6d28d9); color: #fff; box-shadow: 0 3px 10px rgba(109, 40, 217, 0.28); }
.lead-action-note { background: var(--brand-gradient); color: #fff; box-shadow: 0 3px 10px rgba(6, 95, 70, 0.28); }
.lead-action-update { background: var(--surface); color: var(--brand-dark); border: 1.5px solid var(--brand) !important; }
.lead-action-update:hover { background: var(--brand-light); }
/* Icon + title + subtitle header at the top of each tab's own content —
panel_section_header() in panel.php echoes this markup once per tab. */
.panel-section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; animation: fadeInUp 0.3s var(--ease); }
.panel-section-icon {
width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
background: var(--brand-gradient); color: #fff; font-size: 1.05rem;
box-shadow: 0 3px 8px rgba(6, 95, 70, 0.25);
}
.panel-section-header h4 { margin: 0; font-size: 1rem; letter-spacing: -0.01em; }
.panel-section-header p { margin: 2px 0 0; font-size: 0.8rem; color: var(--text-muted); }
.note-attachment-only-label { font-size: 0.82rem; color: var(--text-muted); font-style: italic; }
/* Attachment preview modal (modules/leads/views/panel.php,
#attachment-preview-modal / lead-panel.js's openAttachmentPreview) —
its own near-fullscreen dialog shape, echoing the gradient-header
look of core/views/partials/_pdf_preview_modal.php's .pdf-preview-*
classes, but built to hold any of image / iframe / generic-file-icon
content since one attachment could be any of those. */
.attachment-preview-dialog {
position: relative; z-index: 1; margin: 5vh auto 0; width: min(760px, calc(100% - 40px));
max-height: 88vh; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg);
display: flex; flex-direction: column; overflow: hidden; animation: fadeInUp 0.28s var(--ease); padding: 0;
}
/* PDF/Word/Excel previews are a document page or a spreadsheet grid —
both read far better with the extra horizontal room, unlike
image/video/audio/the placeholder which stay at the narrower default
width above. Matches the app's existing .pf-details-dialog-xl width. */
.attachment-preview-dialog-wide { width: min(1100px, calc(100% - 40px)); }
.attachment-preview-head {
display: flex; align-items: center; gap: 12px; padding: 16px 20px;
background: var(--brand-gradient); background-size: 200% 100%; animation: gradientDrift 8s ease infinite;
color: #fff; flex-shrink: 0;
}
.attachment-preview-icon { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.attachment-preview-title-wrap { flex: 1; min-width: 0; }
.attachment-preview-title-wrap h3 { margin: 0; font-size: 0.95rem; color: #fff; word-break: break-word; }
.attachment-preview-type { font-size: 0.74rem; color: rgba(255,255,255,0.8); font-weight: 600; }
.attachment-preview-download { background: rgba(255,255,255,0.18) !important; color: #fff !important; flex-shrink: 0; }
.attachment-preview-download:hover { background: rgba(255,255,255,0.3) !important; }
.attachment-preview-dialog .lead-panel-close-x { position: absolute; top: 14px; right: 16px; color: #fff; z-index: 2; }
.attachment-preview-dialog .lead-panel-close-x:hover { color: #fff; }
.attachment-preview-body { flex: 1; overflow: auto; background: #f4f6f5; display: flex; align-items: center; justify-content: center; min-height: 240px; }
.attachment-preview-image { max-width: 100%; max-height: 78vh; display: block; margin: auto; }
.attachment-preview-frame { width: 100%; height: 78vh; border: none; display: block; }
.attachment-preview-video { max-width: 100%; max-height: 78vh; display: block; margin: auto; background: #000; border-radius: var(--radius-sm); }
.attachment-preview-audio-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 60px 20px; width: 100%; }
.attachment-preview-audio-icon { width: 72px; height: 72px; border-radius: 999px; background: linear-gradient(150deg, #99f6e4, #f0fdfa); color: #0f766e; display: flex; align-items: center; justify-content: center; }
.attachment-preview-audio { width: 100%; max-width: 420px; }
.attachment-preview-placeholder { text-align: center; color: var(--text-muted); padding: 60px 20px; }
.attachment-preview-placeholder-icon { font-size: 2.6rem; display: block; margin-bottom: 10px; }
.attachment-preview-placeholder-hint { font-size: 0.82rem; }
.attachment-preview-spinner {
display: inline-block; width: 34px; height: 34px; margin-bottom: 14px;
border: 3px solid var(--border); border-top-color: var(--brand, #16a34a); border-radius: 50%;
animation: attachmentSpin 0.8s linear infinite;
}
@keyframes attachmentSpin { to { transform: rotate(360deg); } }
/* docx-preview renders straight into this div (a rendered document
page, white background, its own internal margins) — give it room to
breathe and its own scroll so a multi-page doc doesn't blow out the
modal's height. align-self:stretch overrides the body's centering
flex so the page uses the full dialog width, not just its own
content width. */
.attachment-preview-docx {
align-self: stretch; width: 100%; max-height: 78vh; overflow: auto;
background: #fff; padding: 24px; box-sizing: border-box;
}
/* SheetJS's sheet_to_html() output — a plain , styled here to
look like a real spreadsheet grid rather than an unstyled HTML table.
.attachment-preview-body lays its children out as a row, so the tab
strip + table both live inside this one column-stacked wrapper
(single child of body) rather than being appended to body directly,
which would place them side by side instead of stacked. */
.attachment-preview-xlsx-wrap { align-self: stretch; width: 100%; display: flex; flex-direction: column; min-height: 0; }
.attachment-preview-xlsx-tabs { display: flex; gap: 4px; padding: 10px 14px 0; flex-wrap: wrap; background: #fff; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.attachment-preview-xlsx-tabs button {
border: 1px solid var(--border); border-bottom: none; background: #f4f6f5; color: var(--text-muted);
font-size: 0.78rem; font-weight: 600; padding: 6px 14px; border-radius: 6px 6px 0 0; cursor: pointer;
}
.attachment-preview-xlsx-tabs button.active { background: #fff; color: var(--text); }
.attachment-preview-xlsx-table-wrap { width: 100%; max-height: 78vh; overflow: auto; background: #fff; }
.attachment-preview-xlsx-table-wrap table { border-collapse: collapse; font-size: 0.8rem; }
.attachment-preview-xlsx-table-wrap td, .attachment-preview-xlsx-table-wrap th {
border: 1px solid var(--border); padding: 5px 10px; white-space: nowrap;
}
.attachment-preview-xlsx-table-wrap tr:first-child td { background: #f4f6f5; font-weight: 700; }
@media (max-width: 640px) {
.attachment-preview-dialog, .attachment-preview-dialog-wide { width: 100%; height: 100%; max-height: 100%; margin: 0; border-radius: 0; }
.attachment-preview-image, .attachment-preview-frame, .attachment-preview-video { height: auto; max-height: 60vh; }
.attachment-preview-docx, .attachment-preview-xlsx-table-wrap { max-height: 55vh; }
}
/* ===== Quotation wizard (modules/quotation/views/form.php, assets/js/
quotation-wizard.js) — 4-step Customer & Details / Add Products /
Review / Generate shell wrapped around the form's own existing fields
(Customer search, Option Groups, line items, Payment QR — all
unchanged markup/JS, just relocated into step panels). Reuses this
app's own green brand palette throughout rather than introducing a
competing color scheme. =====
*/
.qt-wizard { display: flex; flex-direction: column; gap: 18px; }
.qt-wizard-hero {
position: relative; overflow: hidden;
background: var(--brand-gradient); background-size: 180% 180%;
animation: gradientDrift 12s ease infinite;
border-radius: var(--radius); padding: 18px 26px; min-height: 30px;
display: flex; align-items: center; justify-content: flex-end;
}
.qt-wizard-hero-leaf {
position: absolute; top: -20px; right: 10px; color: rgba(255,255,255,0.16); transform: rotate(-12deg);
}
.qt-wizard-tagline {
position: relative; z-index: 1; color: #fff; font-weight: 700; font-size: 0.92rem;
text-align: right; line-height: 1.35; margin: 0; text-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.qt-steps {
display: flex; align-items: flex-start; background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 18px 22px; box-shadow: var(--shadow-sm);
overflow-x: auto;
}
.qt-step { display: flex; align-items: center; gap: 10px; flex-shrink: 0; cursor: pointer; }
.qt-step-circle {
width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: var(--bg); color: var(--text-muted); font-weight: 800; font-size: 0.92rem;
border: 2px solid var(--border); transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.qt-step-text { display: flex; flex-direction: column; line-height: 1.25; }
.qt-step-text b { font-size: 0.86rem; color: var(--text-muted); font-weight: 700; transition: color 0.2s var(--ease); }
.qt-step-text span { font-size: 0.74rem; color: var(--text-muted); opacity: 0.8; white-space: nowrap; }
.qt-step.is-active .qt-step-circle { background: var(--brand-gradient); border-color: transparent; color: #fff; transform: scale(1.08); box-shadow: 0 4px 10px rgba(14, 164, 114, 0.35); }
.qt-step.is-active .qt-step-text b { color: var(--brand-dark); }
.qt-step.is-complete .qt-step-circle { background: var(--brand-dark); border-color: transparent; color: #fff; }
.qt-step.is-complete .qt-step-circle::after { content: "✓"; }
.qt-step.is-complete .qt-step-circle { font-size: 0; }
.qt-step.is-complete .qt-step-circle::after { font-size: 0.95rem; }
.qt-step-line { flex: 1; height: 2px; background: var(--border); margin: 17px 14px 0; min-width: 24px; }
.qt-wizard-body { display: grid; grid-template-columns: 1fr 280px; gap: 20px; align-items: flex-start; }
/* A grid item's default min-width is `auto`, not 0 — without this, the
two .line-items-table instances inside .qt-wizard-main (Step 2's own
option-group tables, each already wrapped in its own overflow-x:auto
div) stretch this whole grid track to fit them instead of scrolling
locally, blowing out the entire page's width on mobile. Same fix as
.inv-invoice-layout > * in app8.css and .content in app.css — see
either one's own comment for the full story. */
.qt-wizard-body > * { min-width: 0; }
.qt-wizard-main { margin: 0; }
.qt-wizard-sidebar { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }
.qt-step-panel { animation: fadeInUp 0.3s var(--ease) both; }
.qt-field-invalid { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important; }
/* GST off (.qt-wizard's own class, toggled by quotation-wizard.js's
syncGstVisibility() off the is_gst_invoice checkbox) — Tax %/Tax Amt
are always forced to 0 then (line-items.js's own applyGstState()), so
showing the column/row at all just reads as a stray "0" everywhere.
Hides the same three places together: Step 2's own table columns, the
sidebar summary's own Tax (GST) row, and (via populateReview() itself,
not CSS) the Review step's per-item Tax %/Tax Amt fields. */
.qt-gst-off .line-items-table .col-tax,
.qt-gst-off .line-items-table .col-tax-amount { display: none; }
.qt-gst-off [data-qt-tax-row] { display: none; }
.qt-step-actions {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border); flex-wrap: wrap;
}
.qt-step-actions-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.qt-next-btn, .qt-generate-btn { display: inline-flex; align-items: center; gap: 6px; }
.qt-draft-btn, .qt-preview-btn, .qt-back-btn { display: inline-flex; align-items: center; gap: 6px; }
[data-qt-save-draft].is-loading, [data-qt-generate].is-loading { opacity: 0.65; pointer-events: none; }
.qt-summary-card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.qt-summary-card h3 {
margin: 0 0 14px; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; color: var(--brand-dark);
}
.qt-summary-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 0.86rem; color: var(--text); border-bottom: 1px solid var(--bg); }
.qt-summary-row:last-child { border-bottom: none; }
.qt-summary-row[hidden] { display: none; }
.qt-summary-grand { margin-top: 4px; padding-top: 12px; border-top: 1.5px solid var(--border); font-weight: 800; font-size: 1.05rem; color: var(--brand-dark); }
.qt-summary-tip {
display: flex; align-items: flex-start; gap: 8px; background: var(--brand-light); color: var(--brand-dark);
border-radius: var(--radius); padding: 12px 14px; font-size: 0.8rem; line-height: 1.4;
}
.qt-summary-tip svg { flex-shrink: 0; margin-top: 1px; }
.qt-review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 10px; }
.qt-review-block {
position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 18px 20px 18px 22px; box-shadow: var(--shadow-sm); overflow: hidden;
}
.qt-review-block::before {
content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px;
background: linear-gradient(180deg, #34d399, #059669);
}
.qt-review-grid .qt-review-block:nth-child(2)::before { background: linear-gradient(180deg, #a78bfa, #7c3aed); }
.qt-review-block h4 { margin: 0 0 12px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 800; }
.qt-review-block dl { margin: 0 0 14px; display: grid; grid-template-columns: auto 1fr; gap: 9px 14px; align-items: baseline; }
.qt-review-block dt { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; }
.qt-review-block dd { margin: 0; font-size: 0.92rem; font-weight: 800; }
/* Same "every field its own fixed color" convention this app's list
pages/reports already use (see app4.css's own .col-party/.col-docno/
...), applied here to the Review step's Customer & Details card. */
[data-qt-c="party"] { color: #059669; }
[data-qt-c="company"] { color: #b45309; }
[data-qt-c="gst"] { color: #2563eb; }
[data-qt-c="docno"] { color: #7c3aed; }
[data-qt-c="balance"] { color: #dc2626; }
.qt-review-option { margin-bottom: 14px; }
.qt-review-option:last-child { margin-bottom: 0; }
.qt-review-option > b { font-size: 0.86rem; color: #7c3aed; display: block; margin-bottom: 8px; }
.qt-review-empty { color: var(--text-muted); font-size: 0.82rem; font-style: italic; margin: 4px 0 0; }
.qt-review-edit {
background: none; border: none; color: var(--brand-dark); font-weight: 700; font-size: 0.8rem;
cursor: pointer; padding: 0; margin-top: 10px;
}
.qt-review-edit:hover { text-decoration: underline; }
/* Products/Services item cards — Qty/Unit Price/Tax %/Tax Amt/Line Total
each its own color, matching the same convention as the Customer &
Details card's own [data-qt-c] above and the shared list-page/report
column-color convention (app4.css's own .col-total/.col-balance/...). */
.qt-review-item {
display: flex; align-items: center; gap: 12px; background: var(--bg);
border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px;
}
.qt-review-item:last-child { margin-bottom: 0; }
.qt-review-item-thumb { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border); }
.qt-review-item-body { min-width: 0; flex: 1; }
.qt-review-item-name { font-weight: 700; font-size: 0.88rem; margin-bottom: 4px; }
.qt-review-item-fields { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.76rem; color: var(--text-muted); }
.qt-review-item-fields b { font-size: 0.84rem; font-weight: 800; margin-left: 3px; }
.qt-review-item-fields span[data-qt-c="qty"] b { color: #0e7490; }
.qt-review-item-fields span[data-qt-c="price"] b { color: #2563eb; }
.qt-review-item-fields span[data-qt-c="tax"] b { color: #b45309; }
.qt-review-item-fields span[data-qt-c="taxamt"] b { color: #7c3aed; }
.qt-review-item-fields span[data-qt-c="total"] b { color: #059669; }
.qt-generate-panel, .qt-generate-success {
display: flex; flex-direction: column; align-items: center; text-align: center;
padding: 40px 20px; gap: 6px;
}
/* [hidden]'s own display:none (equal specificity, author stylesheet wins
over the UA default) would otherwise lose to the plain display:flex
above — same bug class documented elsewhere in this app; this is the
fix for "Generate Quotation" and the success panel both showing at
once. */
.qt-generate-panel[hidden], .qt-generate-success[hidden] { display: none; }
.qt-generate-icon, .qt-generate-success-icon {
width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
margin-bottom: 8px;
}
.qt-generate-icon { background: var(--brand-light); color: var(--brand-dark); }
.qt-generate-success-icon { background: #d1fae5; color: #059669; animation: fadeInUp 0.4s var(--ease) both; }
.qt-generate-btn { margin-top: 10px; font-size: 0.95rem; padding: 12px 26px; }
.qt-generate-success-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.qt-generate-approval-note { color: var(--text-muted); font-size: 0.85rem; max-width: 360px; }
/* Step 4's own inline PDF preview (assets/js/quotation-wizard.js's own
loadPdfPreview()) — a fixed-height box so the loading spinner/error
message (both absolutely centered within it) and the iframe itself
all share one stable footprint, rather than the page jumping as the
preview loads in. .pdf-preview-spinner's own @keyframes spin (app2.css,
the saved-quotation "Preview PDF" modal) is reused as-is here. */
.qt-pdf-preview { position: relative; width: 100%; height: 520px; margin-top: 18px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #4b5153; overflow-y: auto; overflow-x: hidden; }
/* Deliberately much taller than the outer box above — tall enough that
the embedded viewer renders the WHOLE document (every page) with no
internal scrolling of its own needed at all, so .qt-pdf-preview's own
native scrollbar is the only scroll surface that ever comes into
play (see form.php's own comment on this element for the full why).
A document shorter than this just leaves harmless blank space below
it — not ideal, but far better than the alternative. */
.qt-pdf-preview-inner { position: relative; width: 100%; height: 2200px; }
.qt-pdf-preview-inner[hidden] { display: none; }
.qt-pdf-preview-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
/* Transparent, but a real same-page element every click lands on
instead of the native PDF viewer underneath — its own contextmenu
handler (quotation-wizard.js) blocks the browser's native "Save as"/
Print menu, which nothing running on this page could otherwise reach.
Scrolling is unaffected: it's handled by .qt-pdf-preview's own
overflow-y above this element, never by this element itself. */
.qt-pdf-preview-shield { position: absolute; inset: 0; background: transparent; cursor: default; }
.qt-pdf-preview-loading, .qt-pdf-preview-error {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
color: #fff; font-size: 0.85rem; font-weight: 600; text-align: center; padding: 0 24px;
}
.qt-pdf-preview-loading[hidden], .qt-pdf-preview-error[hidden] { display: none; }
/* New "Tax Amt" column (_line_item_row.php's own 'taxAmount' opt, Quotation
only) — same footprint as the existing read-only "Total" column right
next to it. */
.col-tax-amount { white-space: nowrap; }
.item-tax-amount { font-weight: 600; color: var(--text-muted); }
@media (max-width: 900px) {
.qt-wizard-body { grid-template-columns: 1fr; }
.qt-wizard-sidebar { position: static; }
.qt-steps { gap: 4px; }
.qt-step-text span { display: none; }
}
@media (max-width: 640px) {
.qt-wizard-hero { justify-content: center; }
.qt-wizard-hero-leaf { display: none; }
.qt-step-text b { font-size: 0.76rem; }
.qt-step-line { margin: 17px 6px 0; min-width: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.qt-step-panel { animation: none !important; }
.qt-wizard-hero { animation: none !important; }
}
/* Step 2's own product-thumbnail click-to-zoom lightbox (form.php's
[data-qt-img-preview], opened/closed by quotation-wizard.js) — a
single shared overlay for every row's thumbnail rather than a modal
per row. Base rule sets display:flex for when it's shown; the
[hidden] override right after it is required — without it the class
rule's display:flex would beat the browser's own [hidden]{display:none}
UA rule (same specificity, author stylesheet wins) and the overlay
would show even while hidden. */
.qt-img-preview {
position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity 0.18s var(--ease);
}
.qt-img-preview[hidden] { display: none; }
.qt-img-preview.is-open { opacity: 1; }
.qt-img-preview-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.72); backdrop-filter: blur(3px); }
.qt-img-preview-dialog {
position: relative; z-index: 1; max-width: min(90vw, 480px); max-height: 85vh; background: #fff; border-radius: 16px;
padding: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); transform: scale(0.85);
transition: transform 0.18s var(--ease); display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.qt-img-preview.is-open .qt-img-preview-dialog { transform: scale(1); }
.qt-img-preview-dialog img { max-width: 100%; max-height: 68vh; border-radius: 10px; object-fit: contain; }
.qt-img-preview-close {
position: absolute; top: -14px; right: -14px; width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
background: #fff; color: var(--text); font-size: 1.2rem; line-height: 1; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
display: flex; align-items: center; justify-content: center; transition: background 0.15s var(--ease), transform 0.15s var(--ease);
}
.qt-img-preview-close:hover { background: var(--danger-light); color: var(--danger); transform: scale(1.08); }
.qt-img-preview-caption { font-weight: 700; color: var(--text); font-size: 0.9rem; text-align: center; }