/* UI kit for the daily pages: toolbars, tables, chips, panels, forms, pop-ups. Loaded after app.css. */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { font-size: 24px; }
.page-head .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.toolbar .grow { flex: 1; min-width: 200px; }
.search { position: relative; }
.search input { width: 100%; padding: 10px 14px 10px 38px; font: inherit; border: 1px solid #d1d5db; border-radius: var(--radius-sm); background: #fff; }
.search input:focus, .toolbar select:focus, .toolbar input[type=date]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(233, 69, 96, .15); }
.search .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.toolbar select, .toolbar input[type=date] { padding: 9px 12px; font: inherit; border: 1px solid #d1d5db; border-radius: var(--radius-sm); background: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 7px 14px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: .12s; }
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip b { margin-left: 6px; padding: 0 7px; font-size: 12px; border-radius: 4px; background: rgba(255, 255, 255, .28); }
.chip:not(.is-on) b { background: var(--brand-soft); color: var(--brand-dark); }

.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel + .panel { margin-top: 16px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.panel-head h2 { font-size: 16px; }
.panel-body { padding: 18px; }
.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
.t th { padding: 11px 16px; text-align: left; white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: #f9fafb; border-bottom: 1px solid var(--line); }
.t td { padding: 12px 16px; border-bottom: 1px solid #f0f1f4; vertical-align: middle; }
.t tr:last-child td { border-bottom: 0; }
.t tbody tr:hover td { background: #fafbfc; }
.t .num, .t th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.t .strong { font-weight: 650; }
.t a.row-link { color: var(--ink); font-weight: 650; white-space: nowrap; }
.t a.row-link:hover { color: var(--brand); }
.t small { display: block; color: var(--muted); font-size: 12px; }
.t-empty { padding: 44px 18px; text-align: center; color: var(--muted); }

.pill { display: inline-block; padding: 2px 9px; font-size: 12px; font-weight: 700; letter-spacing: .02em; border-radius: 5px; background: #f3f4f6; color: var(--ink-2); white-space: nowrap; }
.pill-green { background: #dcfce7; color: #166534; }
.pill-red { background: #fee2e2; color: #991b1b; }
.pill-amber { background: #fef3c7; color: #92400e; }
.pill-blue { background: #dbeafe; color: #1e40af; }
.pill-teal { background: #ccfbf1; color: #115e59; }
.pill-indigo { background: #e0e7ff; color: #3730a3; }
.pill-grey { background: #e5e7eb; color: #4b5563; }
.pos { color: var(--green); }
.neg { color: var(--red); }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.field select, .field textarea { width: 100%; padding: 12px 14px; font: inherit; border: 1px solid #d1d5db; border-radius: var(--radius-sm); background: #fff; }
.field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(233, 69, 96, .18); }
.field textarea { min-height: 84px; resize: vertical; }
.field .hint { display: block; margin-top: 5px; font-size: 12.5px; color: var(--muted); }
.field .err { display: block; margin-top: 5px; font-size: 12.5px; color: var(--red); font-weight: 600; }
.money-input { position: relative; }
.money-input::before { content: "\20B9"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 650; }
.money-input input { padding-left: 30px; }

.kv { display: grid; gap: 2px; }
.kv-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px dashed #eceef2; font-size: 14px; }
.kv-row:last-child { border-bottom: 0; }
.kv-row span { color: var(--muted); flex: none; }
.kv-row strong { flex: 1; font-variant-numeric: tabular-nums; text-align: right; word-break: break-word; }
.kv-row strong.pos { color: var(--green); }
.kv-row strong.neg { color: var(--red); }
.kv-row.total strong { font-size: 18px; }

.hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; margin-bottom: 16px; color: #fff; border-radius: var(--radius); background: linear-gradient(135deg, #b45309, #f59e0b); box-shadow: var(--shadow); }
.hero.teal { background: linear-gradient(135deg, #0f766e, #2dd4bf); }
.hero small { display: block; opacity: .85; font-size: 13px; }
.hero strong { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.hero .side { text-align: right; font-weight: 650; }

.tabs { display: flex; gap: 6px; padding: 4px; margin-bottom: 16px; overflow-x: auto; background: #eceef3; border-radius: var(--radius-sm); width: fit-content; max-width: 100%; }
.tab { padding: 8px 16px; white-space: nowrap; font-size: 14px; font-weight: 650; color: var(--ink-2); border-radius: 6px; }
.tab.is-on { background: #fff; color: var(--brand); box-shadow: var(--shadow); }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid #d1d5db; border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; }
.loading { padding: 40px; text-align: center; color: var(--muted); }
details.more { margin-top: 10px; }
details.more summary { cursor: pointer; font-weight: 650; color: var(--brand); }
.picker { position: relative; }
.picker-list { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: 4px; max-height: 260px; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(16, 24, 40, .14); }
.picker-item { display: block; width: 100%; padding: 10px 14px; text-align: left; font: inherit; background: none; border: 0; border-bottom: 1px solid #f3f4f6; cursor: pointer; }
.picker-item:hover, .picker-item:focus { background: var(--brand-soft); outline: none; }
.picker-item small { display: block; color: var(--muted); }
.picker-none { padding: 12px 14px; color: var(--muted); font-size: 14px; }
.modal-wide { width: min(640px, 94vw); }
.sticky-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; padding: 14px 0 0; margin-top: 18px; background: linear-gradient(180deg, transparent, var(--bg) 40%); }
.btn-danger { color: var(--red); border-color: #fecaca; }
.btn-danger:hover { background: #fef2f2; }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.btn-ok { background: var(--green); border-color: var(--green); color: #fff; }
.btn-ok:hover { background: #166534; }

@media (max-width: 900px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grid { grid-template-columns: 1fr; }
    .hero strong { font-size: 24px; }
    .t th, .t td { padding: 10px 12px; }
}
@media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.hero-red { background: linear-gradient(135deg, #b91c1c, #f87171); }
.summary-row { cursor: pointer; list-style: none; }
.summary-row::-webkit-details-marker { display: none; }
.block { display: block; }
.row-gap { display: flex; align-items: center; gap: 12px; }
.big { font-size: 18px; }
@media print {
    .sidebar, .topbar, .toasts, .page-head .actions, .toolbar, .scrim, .live-dot { display: none !important; }
    .shell { display: block; } .content { max-width: none; padding: 0; } body { background: #fff; }
    .panel, .hero { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
    .hero { color: #000; background: #f5f5f5 !important; }
}

/* ---------- bills: list, new-bill form, item rows ---------- */
.hide-sm { }
@media (max-width: 720px) { .hide-sm { display: none; } }
.more-cell { text-align: center; padding: 14px; }
.btn-soft { background: #fdf2f4; border-color: #f9c9d1; color: var(--brand-dark); }
.btn-soft:hover { background: #fce7ea; }
.modal:has(.modal-wide) { width: min(640px, 94vw); }
.check { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; cursor: pointer; }
.check input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--brand); }
.check small { display: block; color: var(--muted); font-size: 12.5px; }
.om-row { border-bottom: 1px dashed #eceef2; }
.om-row b { margin-left: auto; font-variant-numeric: tabular-nums; }
.panel-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); }
.bill-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.bill-main { display: grid; gap: 16px; }
.bill-side .sticky-panel { position: sticky; top: 76px; }
.stock-add { display: flex; gap: 8px; }
.stock-add input { min-width: 0; width: 210px; padding: 8px 12px; font: inherit; border: 1px solid #d1d5db; border-radius: var(--radius-sm); }
.item-row { padding: 14px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fcfcfd; }
.item-top { display: flex; align-items: flex-end; gap: 8px; }
.item-top .grow { flex: 1; }
.item-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 12px; }
.item-grid .span-2 { grid-column: span 2; }
.item-row .more { margin-top: 4px; }
.item-row .more summary { cursor: pointer; padding: 6px 0; color: var(--brand-dark); font-weight: 600; font-size: 13.5px; }
.return-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed #eceef2; }
.return-line .money-input { width: 150px; flex: none; }
.return-total { margin: 12px 0; }
@media (max-width: 1150px) {
    .bill-layout { grid-template-columns: 1fr; }
    .bill-side .sticky-panel { position: static; }
}
@media (max-width: 720px) { .item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stock-add input { width: 140px; } }
.t tr.is-link { cursor: pointer; } .t tr.is-link:hover td { background: #fafafb; }

/* ---------- dues: one bill per row, grouped by customer via rowspan (no click-to-expand) ---------- */
.dues-t .cust-cell { vertical-align: top; border-right: 1px solid var(--line); }
.dues-t .cust-cell .btn { margin-top: 6px; }
.dues-t .cust-end td { border-bottom: 2px solid var(--line); }
.dues-t .cust-end:last-child td { border-bottom: 0; }
.grid + .panel, .panel + .grid, .grid + .grid { margin-top: 16px; }

/* ---------- stock ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 16px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; display: grid; gap: 2px; }
.stat span { color: var(--muted); font-size: 13px; font-weight: 600; }
.stat strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.stat small { color: var(--muted); }
.thumb-cell { width: 56px; padding-right: 0; }
.thumb { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius-sm); background: #f3f4f6; }
.thumb-none { color: #9ca3af; }
.photos { display: flex; flex-wrap: wrap; gap: 12px; }
.photos img { width: 140px; height: 140px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); }

/* ---------- stock tally ---------- */
.bar { height: 8px; border-radius: 8px; background: #e5e7eb; overflow: hidden; margin-top: 8px; }
.bar > span { display: block; height: 100%; background: var(--green, #16a34a); border-radius: 8px; transition: width .3s; }
.box-row { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr 70px; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px dashed #eceef2; font-size: 14px; }
.box-row .bar { margin: 0; }
.box-row b { text-align: right; font-variant-numeric: tabular-nums; }
.box-row.is-done { color: var(--muted); }
.scan-form { display: flex; gap: 10px; }
.scan-form input { flex: 1; min-width: 0; padding: 14px 16px; font: inherit; font-size: 18px; border: 2px solid #d1d5db; border-radius: var(--radius-sm); }
.scan-form input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(233, 69, 96, .15); }
.scan-result { display: grid; gap: 4px; margin-top: 12px; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid; }
.scan-result span { font-size: 13.5px; }
.scan-result input { padding: 10px 12px; font: inherit; border: 1px solid #d1d5db; border-radius: var(--radius-sm); }
.scan-result.is-ok { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.scan-result.is-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.scan-result.is-bad { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.wrap { flex-wrap: wrap; }

/* ---------- GST ---------- */
.gst-tabs { margin-bottom: 14px; }
.gst-tabs .chip { text-decoration: none; }
.gst-controls { margin-top: 4px; }
.section-title { margin: 26px 0 12px; font-size: 18px; }
.check-row { display: grid; gap: 2px; padding: 9px 12px; margin-bottom: 8px; border-radius: var(--radius-sm); border: 1px solid; font-size: 14px; }
.check-row small { opacity: .85; }
.check-row.is-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.check-row.is-warn, .check-row.is-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.check-row.is-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px; }
.t th a { color: inherit; text-decoration: none; }
.t th a:hover { color: var(--brand); }

/* ---------- admin ---------- */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 24px; }
.perm-list { display: grid; gap: 0; }
.perm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed #eceef2; font-size: 14px; }
.perm-row:last-child { border-bottom: 0; }
.perm-row select { padding: 6px 10px; font: inherit; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; }
.perm-row select.perm-allow { border-color: #86efac; background: #f0fdf4; }
.perm-row select.perm-block { border-color: #fca5a5; background: #fef2f2; }
.notif-list { display: grid; gap: 0; }
.notif { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px dashed #eceef2; font-size: 14px; }
.notif:last-child { border-bottom: 0; }
.notif small { color: var(--muted); }
.chg-cell { max-width: 320px; }
.chg-line { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.chg-cell small { display: inline-block; margin: 0 8px 0 0; }
.chg-cell .link-btn.small { font-size: 12.5px; }

/* ---------- data backup ---------- */
.backup-notes { margin: 14px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; color: var(--ink-2); }
#backup-result { margin-top: 16px; }
#backup-result:empty { margin: 0; }
#backup-result .more { margin: 2px 0 10px 28px; }
.panel-foot > .muted { margin-right: auto; align-self: center; }
form + .grid, form + .panel { margin-top: 16px; }

/* Stock page: "Check the stock" cards, one per metal */
.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.check-card { border: 1px solid var(--line, #e5e7eb); border-radius: var(--radius-sm, 8px); padding: 12px 14px; }
.check-card h3 { margin: 0 0 8px; font-size: 1rem; }

/* Stock Summary: the metal balance */
.bn, .bn-inline { font-family: 'Noto Sans Bengali', 'Segoe UI', Arial, sans-serif; color: #6b7280; }
.bn { display: block; font-size: 0.82em; font-weight: 400; margin-top: 1px; }
.bn-inline { font-size: 0.7em; font-weight: 500; margin-left: 6px; }
.confidence { border-radius: var(--radius-sm, 8px); padding: 10px 14px; margin: 0 0 8px; border: 1px solid; }
.confidence.reliable { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.confidence.check { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.confidence.fix { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.confidence .bn { color: inherit; opacity: 0.85; }
.asof { margin: 0 0 14px; font-size: 13px; }
.metal-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 16px; }
.metal-card.gold { border-top: 4px solid #d4a017; }
.metal-card.silver { border-top: 4px solid #94a3b8; }
.metal-card .panel-head h2 { margin: 0; }
.metal-total { font-size: 1.5rem; }
.calc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.calc-table th { text-align: left; font-weight: 500; padding: 7px 8px 7px 0; border-bottom: 1px dashed #eceef2; }
.calc-table td { padding: 7px 0; border-bottom: 1px dashed #eceef2; white-space: nowrap; }
.calc-table tr.sub th, .calc-table tr.sub td { font-weight: 700; border-bottom: 1px solid #d7dbe3; }
.calc-table tr.diff-row th, .calc-table tr.diff-row td { padding-top: 12px; padding-bottom: 12px; font-weight: 700; border-bottom: 0; background: #fffbeb; }
.calc-table tr.diff-row.normal th, .calc-table tr.diff-row.normal td { background: #ecfdf5; }
.calc-table tr.diff-row.high th, .calc-table tr.diff-row.high td { background: #fef2f2; }
.calc-table tr.diff-row th { padding-left: 8px; }
.diff-note { margin: 8px 0 0; font-size: 13px; }
.headline { margin: 10px 0 0; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 16px; }
.check-list { list-style: none; margin: 0; padding: 0; }
.chk { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #eceef2; font-size: 14px; }
.chk-ico { flex: 0 0 auto; margin-top: 1px; }
.chk.error .chk-ico { color: #dc2626; } .chk.warn .chk-ico { color: #d97706; } .chk.info .chk-ico { color: #64748b; }
.insights .insight { padding: 10px 12px; border-radius: var(--radius-sm, 8px); margin-bottom: 12px; background: #f8fafc; border-left: 4px solid #94a3b8; }
.insights .insight.normal { border-left-color: #10b981; } .insights .insight.moderate { border-left-color: #f59e0b; } .insights .insight.high { border-left-color: #ef4444; }
.insights h3 { margin: 0 0 6px; font-size: 1rem; } .insights h4 { margin: 10px 0 4px; font-size: 0.9rem; }
.insights ul { margin: 0; padding-left: 18px; font-size: 14px; }
.movements { list-style: none; margin: 0; padding: 0; }
.mv { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #eceef2; font-size: 14px; }
.mv-ico { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #f1f5f9; font-weight: 700; flex: 0 0 auto; }
.mv.in .mv-ico { background: #dcfce7; color: #166534; } .mv.out .mv-ico { background: #fee2e2; color: #991b1b; }
.mv-main { flex: 1 1 auto; min-width: 0; } .mv-main small { display: block; }
.mv-g { font-weight: 700; white-space: nowrap; }
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 16px; }
.spark { width: 100%; height: auto; display: block; background: #fafbfc; border-radius: 6px; }
.spark .line { fill: none; stroke: #4f46e5; stroke-width: 2; }
.spark .dot { fill: #4f46e5; }
.spark .zero { stroke: #cbd5e1; stroke-dasharray: 4 4; }
.spark-scale { display: flex; justify-content: space-between; font-size: 12px; margin-top: 4px; }
.gold-text { color: #a16207; } .silver-text { color: #475569; }
.hist .grp { text-align: center; border-bottom: 1px solid #e5e7eb; }
.hist td.diff small { color: #64748b; }
.hist tr.method-change td { border-top: 2px solid #94a3b8; }
@media print { .no-print, .sidebar, .topbar { display: none !important; } .metal-card, .panel { break-inside: avoid; } }

/* Summary: the explanation is folded away until someone wants it */
.advice > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.advice > summary::-webkit-details-marker { display: none; }
.advice .adv-open { display: none; } .advice[open] .adv-open { display: inline; } .advice[open] .adv-closed { display: none; }
.advice-toggle { white-space: nowrap; }