/* Django-specific additions on top of reference.css (which is a verbatim copy).
   Every rule here either MIRRORS an existing reference rule for an element the
   reference renders differently (e.g. <a> instead of <button>), or covers a
   state the reference does not show (validation errors, sign-in screen).
   Only reference tokens are used. See docs/decisions.md ADR-015..ADR-019. */

/* ---------- Mirrors: links/labels that play the role of reference buttons ---------- */
a.btn-primary, a.btn-secondary, a.nav-item, a.modal-close, a.btn-ghost{ text-decoration:none; }
a.btn-primary, a.btn-secondary, label.btn-secondary{ width:fit-content; }
.settings-nav a{ text-align:right; padding:11px 14px; border-radius:10px; border:none; font-size:14px; color:var(--ink-soft); text-decoration:none; }
.settings-nav a.active{ background:var(--card); color:var(--deep-teal); font-weight:700; border:1px solid var(--line); }
.row-actions a{ width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.row-actions a svg{ width:14px; height:14px; }
.row-actions form{ display:contents; }

/* ---------- Avatar with an uploaded image (reference shows initials only) ---------- */
.avatar{ overflow:hidden; }
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- Form feedback (state implied but not shown by the reference) ---------- */
.field-error{ font-size:12px; color:var(--coral); font-weight:600; }
.form-errors{ background:var(--coral-bg); color:var(--coral); border-radius:var(--radius-sm); padding:10px 14px; font-size:13px; font-weight:600; margin-bottom:16px; }
.form-group input[aria-invalid="true"], .form-group select[aria-invalid="true"], .form-group textarea[aria-invalid="true"]{ border-color:var(--coral); }
.form-help{ font-size:12px; color:var(--ink-soft); }
.form-group input:disabled, .form-group select:disabled{ background:#E9F0EE; color:var(--ink-faint); }
.check-row{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:18px; }
.check-row input{ width:16px; height:16px; accent-color:var(--deep-teal); }
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Keyboard focus stays visible (reference removes outlines on inputs only). */
.btn-primary:focus-visible, .btn-secondary:focus-visible, .nav-item:focus-visible, .settings-nav a:focus-visible,
.row-actions a:focus-visible, .row-actions button:focus-visible, .modal-close:focus-visible, label.btn-secondary:focus-within{
  outline:2px solid var(--deep-teal); outline-offset:2px;
}

/* ---------- Sidebar: sign-out control next to the user card ---------- */
.pharmacist-card > div:nth-child(2){ flex:1; min-width:0; }
.sidebar-logout{ width:30px; height:30px; border-radius:8px; border:none; background:none; color:#A9CFC4; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.sidebar-logout:hover{ background:rgba(255,255,255,.07); color:#fff; }
.sidebar-logout svg{ width:17px; height:17px; }

/* ---------- Sign-in / password screens (composed from reference components) ---------- */
.auth-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px; }
.auth-card{ width:100%; max-width:440px; }
.auth-brand{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.auth-brand .brand-name{ color:var(--ink); }
.auth-brand .brand-sub{ color:var(--ink-soft); }
.auth-card .page-head{ margin-bottom:18px; }
.auth-card .btn-primary{ width:100%; justify-content:center; }
.auth-links{ display:flex; justify-content:center; margin-top:16px; }

/* ---------- Public registration (ADR-024): same shell, wider card for the two-column .form-row ---------- */
.auth-card.auth-card-wide{ max-width:640px; }
.auth-card .panel-head{ margin-bottom:12px; }
.auth-card .panel-head.auth-section{ margin-top:8px; }
.auth-links-split{ justify-content:space-between; flex-wrap:wrap; gap:8px; }
.auth-links .auth-hint{ font-size:13.5px; color:var(--ink-soft); align-self:center; }
.auth-links .auth-hint + .btn-ghost{ margin-left:6px; }
.auth-note{ font-size:13px; color:var(--ink-soft); margin-bottom:18px; }
.terms-group{ margin-bottom:18px; }
.terms-group .check-row{ margin-bottom:0; }

/* ---------- Base UI shell (phase 04, ADR-028) ---------- */
/* Drawer/modal open: stop the page behind from scrolling (reference only hides the backdrop). */
body.no-scroll{ overflow:hidden; }

/* Skip link: hidden until focused (accessibility; no visual change for mouse users). */
.skip-link{ position:absolute; left:16px; top:-48px; z-index:300; background:var(--deep-teal); color:#fff; padding:10px 16px; border-radius:var(--radius-sm); font-size:14px; font-weight:600; text-decoration:none; }
.skip-link:focus{ top:12px; }
.main:focus{ outline:none; }

/* Controls the reference renders as <div>/<button> only */
a.icon-btn{ text-decoration:none; }
button.icon-btn{ font-family:inherit; padding:0; }
.icon-btn:focus-visible, .menu-toggle-btn:focus-visible, .lang-btn:focus-visible, .btn-ghost:focus-visible, .sidebar-logout:focus-visible{ outline:2px solid var(--deep-teal); outline-offset:2px; }
.sidebar .nav-item:focus-visible, .sidebar-logout:focus-visible{ outline-color:#fff; }
.search-box:focus-within{ border-color:var(--deep-teal); }
.search-box input::-webkit-search-cancel-button{ display:none; }

/* Toast levels (reference has a single style): accent edge only, palette tokens, white text unchanged. */
.toast[data-level="success"]{ border-inline-start:4px solid var(--teal-bg); }
.toast[data-level="error"]{ border-inline-start:4px solid var(--coral); }
.toast[data-level="warning"]{ border-inline-start:4px solid var(--gold); }
.toast[data-level="info"]{ border-inline-start:4px solid var(--blue); }

/* Button variants named by the brief (reference shows primary/secondary/ghost only) */
.btn-sm{ padding:7px 12px; font-size:13px; border-radius:10px; }
.btn-primary.btn-danger{ background:var(--coral-bg); color:var(--coral); }
.btn-primary:disabled, .btn-secondary:disabled{ opacity:.55; cursor:not-allowed; }
.btn-primary:focus-visible{ outline:2px solid var(--deep-teal); outline-offset:2px; }

/* Form field: required marker and modal body spacing */
.form-group label.is-required::after{ content:" *"; color:var(--coral); } /* pseudo-content: not part of the accessible name */
.modal-body > :first-child{ margin-top:0; }

/* Pagination */
.pagination{ display:flex; gap:8px; align-items:center; justify-content:center; margin-top:18px; }
.pagination-status{ font-size:13.5px; color:var(--ink-soft); }

/* ---------- Dashboard (phase 05, ADR-029) ---------- */
/* Period switch is real navigation: <a> mirrors the reference .tab-switch span. */
.tab-switch a{ font-size:12.5px; padding:6px 12px; border-radius:8px; cursor:pointer; color:var(--ink-soft); text-decoration:none; }
.tab-switch a.active{ background:#fff; color:var(--ink); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.tab-switch a:focus-visible{ outline:2px solid var(--deep-teal); outline-offset:2px; }

/* Stat card note: context under the label when a figure is empty/unavailable (reference shows demo numbers only). */
.stat-note{ font-size:12px; color:var(--ink-soft); margin-top:6px; }
.stat-value.stat-empty{ color:var(--ink-faint); }

/* Empty state: same look as the reference "coming soon" panel, scaled for a panel. */
.empty-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:28px 16px; color:var(--ink-soft); font-size:13.5px; }
.empty-state.chart-wrap{ height:230px; }
.empty-icon{ width:44px; height:44px; border-radius:13px; background:var(--teal-bg); color:var(--deep-teal); display:flex; align-items:center; justify-content:center; }
.chart-fallback{ font-size:13px; color:var(--ink-soft); padding:16px 0; }
ul.expiry-list{ list-style:none; }
.table-scroll:focus-visible{ outline:2px solid var(--deep-teal); outline-offset:2px; }

/* Grid item must be allowed to shrink below its content: without this, .main grows to the table's intrinsic
   width (718px) inside the single-column mobile grid and the whole page scrolls sideways. The reference has
   the same blow-out; ADR-029 records this fix. No effect on desktop. */
.main{ min-width:0; }
/* Same grid blow-out inside .content-grid: a responsive Chart.js canvas keeps the width it had when the
   chart was created and would stop the panel from shrinking on phones. */
.content-grid > .panel{ min-width:0; }

/* ===== Inventory (phase 06, ADR-030 §12) ===== */
/* "+N" after the batch number when more batches of the product hold stock (the reference row has one batch). */
.batch-more{ font-size:11.5px; font-weight:700; color:var(--ink-faint); margin-left:4px; white-space:nowrap; }
/* Validation message under a unit-pricing row (reference has no error state; same colour as .field-error). */
.unit-price-error{ flex-basis:100%; }
/* Note at the top of the edit modal when the product has other batches. */
.modal-note{ margin-bottom:14px; }
/* Empty state row inside a table: no zebra/hover look, full width. */
tr.empty-row td{ border-bottom:none; }

/* ===== Sales & POS (phase 09, ADR-032 §13) ===== */
/* Product search above the reference category tabs (the reference has this search only in its New Sale modal). */
.pos-search{ margin-bottom:14px; }
.pos-search .search-box{ max-width:none; }
.pos-products-col{ min-width:0; }
a.cat-tab{ text-decoration:none; display:inline-block; white-space:nowrap; }
.cat-tab:focus-visible, .unit-btn:focus-visible, .pay-method:focus-visible, .discount-mode-btn:focus-visible, .switch:focus-visible,
.qty-mini-stepper button:focus-visible, .qty-stepper button:focus-visible, .add-to-cart-btn:focus-visible, .btn-checkout:focus-visible{ outline:2px solid var(--deep-teal); outline-offset:2px; }
/* Reference divs/spans that are buttons here (keyboard + screen readers): reset native button styling only. */
button.pay-method{ background:none; font-family:inherit; }
button.pay-method.active{ background:var(--teal-bg); }
button.switch{ border:none; padding:0; }
button.btn-ghost{ font-family:inherit; padding:0; }
.add-to-cart-btn:disabled, .btn-checkout:disabled{ opacity:.55; cursor:not-allowed; }
.add-to-cart-btn:disabled:hover{ background:var(--teal-bg); color:var(--deep-teal); }
/* Reference inline style of the empty cart message, as a class. */
.cart-empty{ text-align:center; padding:20px 0; color:var(--ink-faint); font-size:13.5px; }
.cart-item-error{ font-size:11.5px; color:var(--coral); font-weight:600; margin-top:3px; }
.pos-errors{ font-size:12px; color:var(--coral); font-weight:600; margin-top:10px; line-height:1.5; }
.pos-errors:empty{ display:none; }
/* Customer selector (reference "Select Customer" form-group + search-box + modal-product-list). */
.pos-customer{ margin-bottom:6px; }
.pos-customer .search-box{ max-width:none; padding:9px 12px; }
/* The reference .form-group input border must not apply to the input inside the search box. */
.pos-customer .search-box input{ border:none; padding:0; border-radius:0; background:transparent; }
.pos-customer-clear{ border:none; background:none; color:var(--ink-faint); cursor:pointer; display:flex; padding:0; }
.pos-customer-results{ margin-top:6px; max-height:200px; }
button.modal-product-row{ width:100%; background:#fff; border:none; border-bottom:1px solid var(--line); font-family:inherit; text-align:inherit; }
button.modal-product-row:focus-visible{ outline:2px solid var(--deep-teal); outline-offset:-2px; }
/* Printable invoice page (sales:print). */
body.print-page{ padding:24px 16px; }
body.print-page .print-area{ margin:0 auto; }

/* ===== Invoices (phase 10, ADR-033 §9) ===== */
/* Reference inline styles of the invoice tables, as classes. */
.table-empty{ text-align:center !important; color:var(--ink-faint); padding:26px 0 !important; }
td.summary-total{ font-weight:700; color:var(--deep-teal); }
/* Invoice number opens the stored invoice (the reference rows are not clickable). */
a.invoice-link{ color:var(--deep-teal); font-weight:600; text-decoration:none; }
a.invoice-link:hover{ text-decoration:underline; }
a.invoice-link:focus-visible{ outline:2px solid var(--deep-teal); outline-offset:2px; border-radius:4px; }
a.btn-sm-inline{ text-decoration:none; display:inline-flex; }
/* Full-page (no-JavaScript) invoice and customer summary: the modal card inline in the page. */
.invoice-page{ margin:0 auto; max-height:none; }

/* ===== Settings (phase 12, ADR-034) ===== */
/* Reference .switch driven by a real checkbox: the transparent input covers the track and takes the clicks;
   :checked reproduces .switch.on (reference lines 277-279). */
.switch-field{ position:relative; display:inline-flex; flex-shrink:0; }
.switch-input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:1; }
.switch-input:checked + .switch{ background:var(--deep-teal); }
.switch-input:checked + .switch::after{ right:21px; }
.switch-input:focus-visible + .switch{ outline:2px solid var(--deep-teal); outline-offset:2px; }
.toggle-row{ gap:12px; }  /* long labels never touch the switch on phones */
/* Delete link inside the edit-user modal: inline text button. */
.modal .form-help .btn-ghost{ color:var(--coral); font-weight:600; font-size:inherit; }
/* Reference defect fixed (ADR-034 §12): the one-column .settings-grid (≤ 900px) grows to the staff/permission
   tables' min-content width (718px document at 390px in the reference itself). min-width:0 lets the grid item
   shrink so those tables scroll inside .table-scroll instead of the whole page. */
.settings-grid > *{ min-width:0; }
/* The reference's last switch row keeps its divider (it is not :last-child there); the group wrapper must not drop it. */
.toggle-group .toggle-row:last-child{ border-bottom:1px solid var(--line); }

/* ===== Suppliers (phase 08, ADR-035) ===== */
/* Supplier names are headings (one per card) styled exactly as the reference .supplier-name div. */
h2.supplier-name{ margin:0; overflow-wrap:anywhere; }
.supplier-info{ min-width:0; }
.supplier-contact{ overflow-wrap:anywhere; }
/* One page-level note while purchase figures/ordering are unavailable (the reference has no such line). */
.supplier-note{ margin:0 0 14px; }

/* ===== Accounting / Due / Payments (ADR-037) ===== */
/* POS "Amount Paid": reference discount-row styles, but always visible (the reference hides discount rows/hints by
   discount mode) and wide enough for taka amounts. */
.amount-paid-row, .cart-panel.mode-per .amount-paid-row{ display:flex; margin:14px 0 4px; }
.amount-paid-help, .cart-panel.mode-per .amount-paid-help{ display:block; margin-bottom:12px; }
.amount-paid-row .discount-input-wrap input{ width:96px; text-align:right; }
.amount-paid-row .discount-input-wrap:focus-within{ outline:2px solid var(--deep-teal); outline-offset:1px; }
.summary-row.due-row span:last-child{ color:var(--coral); font-weight:700; }
/* Notifications list: unread rows read slightly stronger (status is also given as text). */
tr.unread td:first-child{ font-weight:600; color:var(--ink); }
/* Accounting has three header controls (date, export, supplier bill); the reference header has at most two and
   does not wrap, so let them wrap on narrow screens instead of overflowing the page. */
#page-accounting .page-head-actions{ flex-wrap:wrap; }

/* ===== Notification Engine + Global search (ADR-038) ===== */
/* Search results: one reference .table-panel per entity group, spaced like the reference's stacked panels. */
.search-group + .search-group{ margin-top:18px; }
.search-group{ scroll-margin-top:16px; }
.search-group .panel-head{ margin-bottom:12px; }
/* The topbar search box is now a <form> with the reference .search-box class; forms add no margin of their own. */
form.search-box{ margin:0; }
form.search-box input::-webkit-search-cancel-button{ cursor:pointer; }
/* Notification messages are sentences: let that one column wrap (the reference keeps cells on one line), so the
   time/status/actions stay on screen instead of forcing a long horizontal scroll. */
#page-notifications tbody td:first-child{ white-space:normal; min-width:260px; line-height:1.45; padding-right:16px; }