/* ============================================================================
   styles.css — Fire Premium Calculator (green theme, summary rail)
   ========================================================================== */
:root{
  --green:#15803d; --green-mid:#16a34a; --green-deep:#14532d;
  --green-soft:#dcfce7; --green-tint:#ecfdf5; --green-ring:#e7f6ee;
  --ink:#1f2937; --muted:#6b7280; --line:#e5e7eb;
  --bg:#f3f4f6; --card:#ffffff; --field:#f9fafb;
  --font:"DM Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box; font-family:var(--font)}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:14px}
input,select,textarea,button{font-family:var(--font)}

/* top bar */
.topbar{display:flex; justify-content:space-between; align-items:center;
  background:var(--card); padding:18px 28px; border-bottom:1px solid var(--line); flex-wrap:wrap; gap:12px}
.brand{display:flex; align-items:center; gap:16px}
.logo{display:grid; place-items:center; width:48px; height:48px; border-radius:12px;
  background:linear-gradient(135deg,var(--green-mid),var(--green-deep)); box-shadow:0 4px 10px rgba(21,128,61,.25)}
.topbar h1{font-size:22px; margin:0; letter-spacing:.5px; color:#111827; font-weight:800}
.subtitle{margin:2px 0 0; color:var(--muted); font-size:13px}

/* layout */
.grid{display:grid; grid-template-columns:1.55fr 1fr; gap:22px; padding:24px; max-width:1500px; margin:0 auto; align-items:start}
.col{display:flex; flex-direction:column; gap:22px}
.rail{position:sticky; top:18px}
@media(max-width:980px){.grid{grid-template-columns:1fr} .rail{position:static}}

/* cards */
.card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px 24px; box-shadow:0 1px 3px rgba(0,0,0,.04)}
.card-head{display:flex; align-items:center; gap:12px; margin-bottom:18px}
.card-head h2{font-size:15px; font-weight:800; letter-spacing:.4px; margin:0; color:#111827; flex:1}
.ic{display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--green-ring); font-size:17px}
.ic-r{display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--green-ring); font-size:15px}

/* fields */
.lbl{display:block; font-size:12.5px; font-weight:600; color:#374151; margin:14px 0 7px}
.two > div:first-child .lbl, .two > div .lbl{margin-top:14px}
.card > .lbl:first-of-type, .ac-wrap + .risk-desc{margin-top:0}
.req{color:#dc2626}
.input{width:100%; padding:12px 13px; background:var(--card); border:1px solid var(--line); border-radius:11px; font-size:14px; color:var(--ink); font-family:inherit}
.input:focus{outline:none; border-color:var(--green-mid); box-shadow:0 0 0 3px var(--green-soft)}
textarea.input{resize:vertical}
.two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.inline-check{align-self:end; margin-bottom:4px}
.row-between{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px}

.risk-desc{margin-top:12px; padding:12px 13px; background:var(--green-tint); border-radius:11px; color:var(--green); font-weight:600}
.risk-desc.muted{background:var(--field); color:var(--muted); font-weight:400}
.product-pill{font-size:11px; color:var(--muted)}

/* risk autocomplete */
.ac-wrap{position:relative}
.ac-results{position:absolute; z-index:20; left:0; right:0; top:calc(100% + 4px); background:#fff;
  border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 24px rgba(15,23,42,.14); max-height:280px; overflow:auto; display:none}
.ac-item{padding:10px 13px; font-size:13px; cursor:pointer; border-bottom:1px solid var(--line)}
.ac-item:last-child{border-bottom:none}
.ac-item:hover{background:var(--green-tint)}
.ac-item b{color:var(--green); margin-right:4px}

/* sum insured grid */
.si-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 20px}
.rupee{display:flex; align-items:center; gap:8px; background:var(--field); border:1px solid var(--line); border-radius:11px; padding:0 13px}
.rupee:focus-within{border-color:var(--green-mid); box-shadow:0 0 0 3px var(--green-soft)}
.rupee span{color:var(--muted); font-weight:600}
.rupee input{flex:1; border:none; background:transparent; padding:12px 0; font-size:14px; font-family:inherit; outline:none}
#custom_rows{margin-top:8px}
.custom_si_row{display:flex; gap:10px; align-items:center; margin-top:12px}
.custom_si_row .custom_label{flex:1; padding:11px 12px; border:1px solid var(--line); border-radius:10px}
.custom_si_row .custom_si_input{width:150px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; text-align:right}
.add-btn{width:100%; margin-top:16px; padding:13px; background:var(--green); color:#fff; border:1.5px solid var(--green); border-radius:12px; font-weight:700; cursor:pointer}
.add-btn:hover{opacity:.9}

/* floater locations */
.hidden{display:none !important}
.loc-head,.loc-row{display:grid; gap:10px; align-items:center}
.loc-head{grid-template-columns:1.4fr 1fr .8fr 1.1fr auto; padding:0 2px 8px; font-size:11px; font-weight:700; color:var(--muted)}
.loc-row{grid-template-columns:1.4fr 1fr .8fr 1.1fr auto; padding:7px 0}
.loc-head.no-si,.loc-row.no-si{grid-template-columns:1.7fr 1fr 1fr auto}
.loc-row input{padding:10px 11px; border:1px solid var(--line); border-radius:9px; font-size:13px; width:100%}
.loc-row .loc-zone{background:var(--field); border-radius:9px; padding:10px 11px; font-size:13px; color:var(--green); font-weight:700; text-align:center}
.loc-row .rm{background:none; border:none; color:#dc2626; cursor:pointer; font-size:15px}
.si-total{display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding:14px 15px; background:var(--field); border-radius:11px}
.si-total span{font-size:12px; font-weight:800; letter-spacing:.4px}
.si-total strong{font-size:17px; color:var(--green)}

/* coverage table */
.cov-head{display:grid; grid-template-columns:1.7fr 1fr 1fr .9fr; gap:10px; padding:0 2px 12px; font-size:12px; font-weight:700; color:var(--muted); border-bottom:1px solid var(--line)}
.cov-row{display:grid; grid-template-columns:1.7fr 1fr 1fr .9fr; gap:10px; align-items:center; padding:14px 2px; border-bottom:1px solid var(--line)}
.cov-row:last-child{border-bottom:none}
.cov-name{font-weight:600; display:flex; align-items:center; gap:10px}
.r{text-align:right}
.rate-in,.prem-in{padding:9px 11px; border:1px solid var(--line); border-radius:9px; text-align:right; font-size:13px; font-family:inherit; width:100%; font-variant-numeric:tabular-nums}
.prem-in{background:var(--field); color:var(--ink)}
.rate-in:focus{outline:none; border-color:var(--green-mid); box-shadow:0 0 0 3px var(--green-soft)}
.final{font-weight:800; color:var(--green); font-variant-numeric:tabular-nums}
input[type=checkbox]{width:17px; height:17px; accent-color:var(--green); flex:none}

/* summary rail */
.summary-hero{border-radius:14px; padding:22px; text-align:center; margin-bottom:6px}
.summary-hero span{font-size:12px; font-weight:700; letter-spacing:.6px; opacity:.9}
.summary-hero strong{display:block; font-size:32px; font-weight:800; margin:8px 0 2px}
.summary-hero strong span{font-size:inherit; font-weight:inherit; letter-spacing:normal; opacity:1}
.summary-hero small{font-size:11px; opacity:.85}
.green-deep{background:linear-gradient(135deg,var(--green),var(--green-deep)); color:#fff}
.green-tint{background:var(--green-tint); color:var(--green-deep); border:1px solid var(--green-soft)}
.sum-list{margin-top:14px}
.sum-list div:not(#qs_fixed):not(#qs_custom_wrap){display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 0; font-size:13.5px; color:#374151; border-bottom:1px dashed var(--line)}
.sum-list div:not(#qs_fixed):not(#qs_custom_wrap) span{min-width:0}
.sum-list b{font-weight:700; color:var(--ink); white-space:nowrap}
.sum-total,.sum-sub{border-bottom:none !important; margin-top:4px; padding-top:13px !important; border-top:2px solid var(--green-soft)}
.sum-total span,.sum-sub span{font-weight:800; color:var(--green)}
.sum-total b,.sum-sub b{color:var(--green) !important; font-weight:800}

/* buttons */
.btn{padding:12px 18px; border-radius:12px; border:1px solid transparent; font-weight:700; cursor:pointer; font-size:14px; font-family:inherit}
.btn-green{background:linear-gradient(135deg,var(--green-mid),var(--green)); color:#fff; box-shadow:0 4px 12px rgba(21,128,61,.22)}
.btn-green:hover{filter:brightness(1.05)}
.btn-outline{background:var(--green); border-color:var(--green); color:#fff}
.btn-outline:hover{opacity:.9}
.block{width:100%; padding:14px}
.link-btn{background:none; border:none; color:var(--green); cursor:pointer; font-size:13px; padding:0}
.check{display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:#374151}

/* modal */
.modal{display:none; position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:50; padding:30px; overflow:auto}
.modal.open{display:block}
.modal-card{max-width:960px; margin:0 auto; background:#fff; border-radius:16px; padding:24px}
.modal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.modal-head h2{margin:0; font-size:19px}
.small{font-size:12px} .muted{color:var(--muted)}
.new-rate{display:grid; grid-template-columns:1fr 2fr 1fr 1fr 1fr auto auto; gap:9px; align-items:center; margin:16px 0 12px}
.rates-tools{display:flex; gap:10px; margin-bottom:14px; align-items:center}
.file-label{display:inline-flex; align-items:center; cursor:pointer}
.rates-table{width:100%; border-collapse:collapse; font-size:13px}
.rates-table th,.rates-table td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line)}
.rates-table th{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px}
.desc-cell{max-width:340px}

/* print / pdf */
.print-only{display:none}
@media print{
  /* The page used to be blanked with visibility:hidden, which HIDES an element
     but still reserves its full height. The calculator is several screens tall,
     so all of that height was printed as empty pages after the quotation.
     display:none removes it from the layout entirely, and #quote_view goes back
     to normal flow so the document ends where the content ends. */
  @page{margin:12mm}
  html,body{height:auto; margin:0; padding:0; background:#fff}
  body > *{display:none !important}
  #quote_view{display:block !important; position:static; padding:0; font-size:13px; color:#000}
  /* Keep the closing blocks whole rather than split across a page break. */
  .q-final,.q-footer,.q-banner{page-break-inside:avoid; break-inside:avoid}
  .q-meta tr,.q-cov tr,.q-final tr{page-break-inside:avoid; break-inside:avoid}
  .q-head h2{margin:0; font-size:20px; color:var(--green-deep)}
  .q-sub{color:#555; margin:4px 0 18px; font-weight:600}
  .q-meta,.q-cov,.q-final{width:100%; border-collapse:collapse; margin-bottom:16px}
  .q-meta td{padding:6px 8px; border:1px solid #ccc}
  .q-meta td:nth-child(odd){background:#f3f4f6; font-weight:600; width:120px}
  .q-cov th,.q-cov td{padding:8px; border:1px solid #ccc}
  .q-cov th{background:#f3f4f6}
  .q-final td{padding:8px; border:1px solid #ccc}
  .q-final .grand td{font-weight:700; background:#ecfdf5}
  .q-cov .r,.q-final .r{text-align:right}
  .q-warr{margin:14px 0; line-height:1.6}
  .q-note{margin-top:24px; font-size:11px; color:#777}
  .q-banner{display:flex; justify-content:space-around; background:#f7941e; color:#fff; font-weight:800; letter-spacing:1.5px; padding:11px; margin-bottom:14px; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .q-date{text-align:right; font-size:12px; color:#555; margin-bottom:10px}
  .q-footer{display:flex; align-items:center; gap:14px; margin-top:28px; padding:12px 16px; border:1px solid #1e7a34; border-top:3px solid #1e7a34; border-bottom:3px solid #7a3b1e}
  .q-avatar{width:42px; height:42px; border-radius:50%; border:2px solid #555; display:grid; place-items:center; font-size:22px; color:#555; flex:none}
  .q-adv-info b{font-size:14px}
  .q-adv-info small{color:#333}
  .q-adv-info a{color:#0645ad; text-decoration:none}
  .q-adv-right{margin-left:auto; color:#1e7a34; font-weight:600; white-space:nowrap}
}

/* IFFCO WC employee rows */
.wc2-head, .wc2-row{display:grid; grid-template-columns:1.3fr .7fr .9fr .9fr .9fr .9fr 26px; gap:6px; align-items:center; margin-top:8px}
.wc2-head{font-size:10.5px; font-weight:700; color:#6b7280; letter-spacing:.04em}
.wc2-row .rm{background:none; border:none; color:#dc2626; cursor:pointer; font-size:15px}
.wc2-row span.r{font-size:12.5px}
.chk{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600}

/* AHP section rows */
.ahp-head, .ahp-row{display:grid; grid-template-columns:1.7fr 1.1fr .7fr 1fr; gap:8px; align-items:center; margin-top:8px}
.ahp-head{font-size:11px; font-weight:700; color:#6b7280; letter-spacing:.05em}
.ahp-lbl{font-size:12.5px; font-weight:600; line-height:1.3}
.ahp-prem{font-weight:700; font-size:13px}
.ahp-group{margin-top:16px; font-size:11px; font-weight:800; color:var(--green); letter-spacing:.06em}
.ahp-group small{color:#9ca3af; font-weight:600}

/* Bajaj Event rows */
/* generic rate-row grids */
.rt-head, .rt-row{display:grid; gap:8px; align-items:center; margin-top:8px}
.rt-head{font-size:11px; font-weight:700; color:#6b7280; letter-spacing:.05em}
.rt-lbl{font-size:12.5px; font-weight:600; line-height:1.3}
.rt-prem{font-weight:700; font-size:13px}
.c4{grid-template-columns:1.9fr 1.1fr .7fr 1fr}
.warn-note{margin-top:10px; font-size:12px; font-weight:700; color:#b45309; background:#fffbeb; border:1px solid #fcd34d; border-radius:10px; padding:9px 11px}
.warn-note.bad{color:#b91c1c; background:#fef2f2; border-color:#fca5a5}
.chip{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.04em; padding:3px 9px; border-radius:999px; background:var(--green-tint); color:var(--green)}