/* Pricecision — custom styles layered on top of Tailwind (Play CDN) */

/* Tailwind handles most things; this file covers semantic classes that
   benefit from being named (badges, status pills, mode-toggle, print). */

/* ---------- Page-classification badges ---------- */
.badge-pw {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 9999px;
    padding: 0.25rem 0.625rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}
.badge-bw    { background: #f1f5f9; color: #1e293b; }
.badge-gray  { background: #e2e8f0; color: #1e293b; }
.badge-light { background: #fef3c7; color: #92400e; }
.badge-heavy { background: #fee2e2; color: #991b1b; }

/* ---------- Quotation status pills ---------- */
.status-pill {
    display: inline-flex;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.status-Draft     { background: #eef2ff; color: #4338ca; }
.status-Finalized { background: #ecfdf5; color: #065f46; }
.status-Cancelled { background: #fef2f2; color: #b91c1c; }

/* ---------- Page thumbnails ---------- */
.page-thumb {
    width: 92px;
    height: 118px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
}
.page-thumb-fallback {
    width: 92px;
    height: 118px;
    border-radius: 8px;
    border: 1px dashed #cbd5e1;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: #f8fafc;
}
/* Clickable preview that opens the matching page in the original PDF. */
.page-thumb-link {
    position: relative;
    display: inline-flex;
    border-radius: 8px;
    overflow: hidden;
    cursor: zoom-in;
}
.page-thumb-link:hover { outline: 2px solid #b91c1c; outline-offset: 1px; }
.page-thumb-zoom {
    position: absolute;
    right: 4px;
    bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(15, 23, 42, .72);
    color: #fff;
    font-size: 12px;
    opacity: 0;
    transition: opacity .12s;
}
.page-thumb-link:hover .page-thumb-zoom { opacity: 1; }

/* ---------- Coverage bar ---------- */
.coverage-bar {
    height: 6px;
    width: 100px;
    background: #f1f5f9;
    border-radius: 9999px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5rem;
}
.coverage-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #dc2626, #fb7185);
    border-radius: 9999px;
}

/* ---------- Pricing Rules: mode-aware progressive disclosure ---------- */
.mode-banner { display: none; }
.cost-mode-hint, .flat-mode-hint { display: none; }

#pricingShell.mode-cost-based .mode-cost { display: flex; }
#pricingShell.mode-cost-based .cost-mode-hint { display: inline; }
#pricingShell.mode-cost-based .cost-only-section { display: block; }

#pricingShell.mode-flat-rate .mode-flat { display: flex; }
#pricingShell.mode-flat-rate .flat-mode-hint { display: inline; }
#pricingShell.mode-flat-rate .cost-only-section { display: none; }

/* ---------- Print quotation ---------- */
@media print {
    .no-print { display: none !important; }
    body { background: #fff !important; }
}

/* ---------- Subtle scrollbar polish ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }