/* style.css — Lok Sudhar Eye Hospital */
:root {
  --primary:#2E86AB; --primary-dark:#236983; --primary-light:#E6F0F5;
  --secondary:#1B998B; --secondary-dark:#157067;
  --bg:#F8F9FA; --card:#FFF; --text:#2C3E50; --text-muted:#6C757D;
  --border:#DEE2E6; --success:#28A745; --danger:#DC3545;
  --warning:#FFC107; --info:#17A2B8;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08);
  --shadow:0 2px 6px rgba(0,0,0,.10);
  --shadow-lg:0 8px 24px rgba(0,0,0,.12);
  --radius:8px; --radius-sm:4px;
  --font:'Inter',system-ui,sans-serif;
  --sidebar-w:250px; --topbar-h:56px; --transition:.2s ease;
}
* { box-sizing:border-box; }
html { font-size:14px; }
body { margin:0; font-family:var(--font); background:var(--bg);
  color:var(--text); line-height:1.5; -webkit-font-smoothing:antialiased; }
.auth-page { background:var(--bg); min-height:100vh; }
.auth-wrap { min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:1.5rem; }
.auth-card { width:100%; max-width:420px; border:none;
  border-radius:var(--radius); box-shadow:var(--shadow-lg); }
.auth-brand { text-align:center; padding:1.75rem 1.5rem 1rem;
  border-bottom:1px solid var(--border); }
.auth-logo { height:56px; width:auto; image-rendering:crisp-edges;
  display:inline-block; }
.auth-logo-fallback { font-size:2.4rem; color:var(--primary);
  display:none; margin-top:.25rem; }
.auth-brand h1 { font-size:1.3rem; font-weight:700;
  color:var(--text); margin-top:.5rem; }
.auth-note { margin-top:1rem; text-align:center; }

/* =============================================================================
   Typography — 14px base, 16px inputs, 18-24px headers (specs.md §7)
   ========================================================================== */
h1, h2 { font-size:24px; font-weight:700; }
h3, h4 { font-size:20px; font-weight:600; }
h5 { font-size:18px; font-weight:600; }
.form-control, .form-select, .form-check-label, .btn { font-size:16px; }
.form-label { font-size: 0.95rem; font-weight: 500; margin-bottom: 0.25rem; }
.form-label.small, label.small, .filter-bar .form-label { font-size: 0.92rem; font-weight: 500; }
.form-control-sm, .form-select-sm, .btn-sm { font-size: 13.5px; }
.small, small, .text-muted.small, .form-text { font-size: 0.88rem; }
.form-control:focus, .form-select:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 .18rem rgba(46,134,171,.22);
}
a { color:var(--primary-dark); text-decoration:none; }
a:hover { color:var(--primary); text-decoration:underline; }
.btn { border-radius:var(--radius-sm); transition:all var(--transition); }
.btn-primary { background:var(--primary); border-color:var(--primary); }
.btn-primary:hover, .btn-primary:focus { background:var(--primary-dark); border-color:var(--primary-dark); }
.btn-success { background:var(--success); border-color:var(--success); }
.btn-outline-primary { color:var(--primary); border-color:var(--primary); }
.btn-outline-primary:hover { background:var(--primary); border-color:var(--primary); }
.btn-outline-success { color:var(--secondary); border-color:var(--secondary); }
.btn-outline-success:hover { background:var(--secondary); border-color:var(--secondary); }
.btn-outline-info { color:var(--info); border-color:var(--info); }
.btn-outline-info:hover { background:var(--info); border-color:var(--info); }

/* =============================================================================
   App shell: fixed sidebar + main column
   ========================================================================== */
.app-shell { display:flex; min-height:100vh; }
.sidebar {
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:#fff; border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:fixed; top:0; bottom:0; left:0; z-index:1040;
  box-shadow:var(--shadow-sm);
  transition:transform .25s ease;
}
.sidebar-brand {
  display:flex; align-items:center; gap:.6rem;
  padding:.7rem .9rem; border-bottom:1px solid var(--border);
  min-height:var(--topbar-h); background:var(--primary-light);
}
.brand-logo { height:34px; width:auto; object-fit:contain; }
.brand-fallback { font-size:1.6rem; color:var(--primary); }
.brand-text { display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.brand-text strong { font-size:15px; color:var(--primary-dark); }
.brand-text small { font-size:11px; color:var(--text-muted); }
.sidebar-close {
  margin-left:auto; border:0; background:transparent; color:var(--text-muted);
  font-size:18px; line-height:1; padding:.15rem .3rem; border-radius:var(--radius-sm);
}
.sidebar-close:hover { background:#fff; color:var(--danger); }

.sidebar-nav { flex:1 1 auto; overflow-y:auto; padding:.75rem .6rem; }
.sidebar-nav::-webkit-scrollbar { width:6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background:#CED4DA; border-radius:3px; }
.nav-section-label {
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--text-muted);
  margin:.9rem .55rem .35rem;
}
.nav-section-label:first-child { margin-top:.15rem; }
.nav-link-item {
  display:flex; align-items:center; gap:.65rem;
  padding:.55rem .7rem; margin-bottom:.15rem;
  border-radius:var(--radius); color:var(--text);
  text-decoration:none; font-size:14px; font-weight:500;
  transition:background var(--transition), color var(--transition);
}
.nav-link-item i { width:18px; text-align:center; color:var(--text-muted); font-size:14px; }
.nav-link-item:hover { background:var(--primary-light); color:var(--primary-dark); text-decoration:none; }
.nav-link-item:hover i { color:var(--primary); }
.nav-link-item.active { background:var(--primary-light); color:var(--primary-dark); font-weight:600; border-left:3px solid var(--primary); box-shadow:none; }
.nav-link-item.active i { color:var(--primary-dark); }
.nav-badge {
  margin-left:auto; background:#ea580c !important; color:#ffffff !important;
  font-size:11px; font-weight:700; border-radius:999px; padding:.05rem .42rem;
}
.nav-link-item.active .nav-badge { background:#ea580c !important; color:#ffffff !important; }
.sidebar-footer {
  border-top:1px solid var(--border); padding:.55rem .9rem;
  line-height:1.4; font-size:11px; background:#FBFCFD;
}
.sidebar-backdrop {
  display:none; position:fixed; inset:0;
  background:rgba(44,62,80,.45); z-index:1035;
}
.app-shell.sidebar-open .sidebar-backdrop { display:block; }

/* =============================================================================
   Topbar + main column
   ========================================================================== */
.app-main {
  flex:1 1 auto; min-width:0;
  margin-left:var(--sidebar-w);
  display:flex; flex-direction:column; min-height:100vh;
}
.topbar {
  height:var(--topbar-h); flex:0 0 var(--topbar-h);
  background:#fff; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:.75rem;
  padding:0 1rem; position:sticky; top:0; z-index:1020;
  box-shadow:var(--shadow-sm);
}
.topbar-toggle {
  border:1px solid var(--border); background:#fff; color:var(--text);
  border-radius:var(--radius-sm); padding:.25rem .55rem; font-size:16px;
  transition:all var(--transition);
}
.topbar-toggle:hover { background:var(--primary-light); border-color:var(--primary); color:var(--primary-dark); }
.page-title {
  font-size:19px; font-weight:600; margin:0;
  color:var(--text); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis;
}
.topbar-actions { margin-left:auto; display:flex; align-items:center; gap:.5rem; }
.user-chip {
  border:1px solid var(--border); background:#fff; border-radius:999px;
  padding:.28rem .7rem; font-size:13px; display:inline-flex;
  align-items:center; gap:.45rem;
}
.user-chip:hover { border-color:var(--primary); background:var(--primary-light); }
.user-chip::after { margin-left:.15rem; }

/* Role badges */
.role-badge {
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; border-radius:999px; padding:.1rem .45rem;
  background:#E9ECEF; color:var(--text-muted); border:1px solid var(--border);
}
.role-admin { background:#FDECEA; color:#9B2C2C; border-color:#F5C6CB; }
.role-doctor { background:var(--primary-light); color:var(--primary-dark); border-color:#BFDCE9; }
.role-receptionist { background:#E6F7F4; color:var(--secondary-dark); border-color:#BEE6DF; }
.role-viewer { background:#EDF2F7; color:#4A5568; border-color:#CBD5E0; }

/* =============================================================================
   Content area + footer
   ========================================================================== */
.app-content {
  flex:1 1 auto; padding:1rem;
  animation:fadeInUp .25s ease both;
}
.app-footer {
  flex:0 0 auto;
  border-top:1px solid var(--border);
  background:#fff;
  padding:.5rem 1rem;
  font-size:12px;
  color:var(--text-muted);
  display:flex;
  align-items:center;
  justify-content:center;    /* center the text horizontally */
  gap:.5rem;
  flex-wrap:wrap;
  width:100%;
}
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* =============================================================================
   Cards
   ========================================================================== */
.card {
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); background:var(--card);
  transition:box-shadow var(--transition);
}
.card-header {
  background:#fff; border-bottom:1px solid var(--border);
  font-weight:600; font-size:14px; color:var(--text);
  border-radius:var(--radius) var(--radius) 0 0 !important;
  padding:.6rem .9rem;
}
.card-body { padding:.9rem; }
.card-icon { font-size:2rem; opacity:.85; }

/* Landing hero (home.html) */
.landing-hero { border:none; box-shadow:var(--shadow-lg); }
.hero-icon { font-size:3rem; color:var(--primary); }

/* =============================================================================
   KPI cards (dashboard.html §11)
   ========================================================================== */
.kpi-row { --bs-gutter-y:1rem; }
.kpi-card {
  display:flex; align-items:center; gap:.85rem;
  border-left:4px solid var(--primary);
  height:100%;
}
.kpi-card:hover { box-shadow:var(--shadow-lg); }
.kpi-icon {
  width:46px; height:46px; flex:0 0 46px; border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  background:var(--primary-light); color:var(--primary); font-size:19px;
}
.kpi-label {
  display:block; font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted);
}
.kpi-value { display:block; font-size:23px; font-weight:700; line-height:1.15; color:var(--text); }


/* =============================================================================
   Filter bars (patient_list, reports, patient_view)
   ========================================================================== */
.filter-bar { border-left:4px solid var(--primary-light); }
.filter-bar .card-body { padding:.7rem .9rem !important; }
.filter-bar .form-label { color:var(--text-muted); font-weight:600; }
.filter-bar .form-control, .filter-bar .form-select { min-width:120px; }

/* =============================================================================
   Data tables (§10) — compact professional grid
   ========================================================================== */
.data-table { font-size:13px; margin-bottom:0; }
.data-table > thead > tr > th {
  background:#F1F5F8; color:var(--primary-dark);
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; white-space:nowrap;
  border-bottom:1px solid var(--border); padding:.55rem .7rem;
  position:sticky; top:0; z-index:2;
}
.data-table > tbody > tr > td { padding:.5rem .7rem; vertical-align:middle; }
.data-table > tbody > tr { transition:background var(--transition); }
.data-table > tbody > tr:hover { background:var(--primary-light); }
.data-table a { font-weight:500; }

/* Sortable column headers */
.data-table th a { color:var(--primary-dark); text-decoration:none; }
.data-table th a:hover { color:var(--primary); text-decoration:underline; }
.data-table th .sort-arrow { font-size:10px; margin-left:.25rem; opacity:.75; }

/* =============================================================================
   Row action icons (§10) — View=blue, Edit=grey, Delete=red
   ========================================================================== */
.action-icons { white-space:nowrap; }
.action-icons .act {
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; margin-left:.2rem;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:#fff; color:var(--text-muted); font-size:13px;
  cursor:pointer; text-decoration:none;
  transition:all var(--transition);
}
.action-icons .act:hover { transform:translateY(-1px); box-shadow:var(--shadow-sm); text-decoration:none; }
.act-view { color:var(--primary) !important; border-color:#BFDCE9 !important; }
.act-view:hover { background:var(--primary) !important; color:#fff !important; }
.act-edit { color:#6C757D !important; border-color:#D6DBDF !important; }
.act-edit:hover { background:#6C757D !important; color:#fff !important; }
.act-delete, .act-del { color:var(--danger) !important; border-color:#F1B0B7 !important; }
.act-delete:hover, .act-del:hover { background:var(--danger) !important; color:#fff !important; }
.delete-form { display:inline; }

/* =============================================================================
   Status pills (queue / visit status)
   ========================================================================== */
.status-pill {
  display:inline-block; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
  border-radius:999px; padding:.18rem .55rem; border:1px solid transparent;
}
.status-waiting { background:#FFF3CD; color:#8A6100; border-color:#FFE69C; }
.status-in-consultation { background:var(--primary-light); color:var(--primary-dark); border-color:#BFDCE9; }
.status-completed { background:#E3F6E8; color:#1B6B32; border-color:#B7E2C4; }
.status-cancelled { background:#E9ECEF; color:var(--text-muted); border-color:#D6DBDF; }

/* =============================================================================
   Pagination + empty states
   ========================================================================== */
.pagination { margin:0; }
.page-link { color:var(--primary-dark); border-color:var(--border); font-size:13px; }
.page-link:hover { background:var(--primary-light); color:var(--primary-dark); }
.page-item.active .page-link { background:var(--primary); border-color:var(--primary); }
.page-item.disabled .page-link { color:#ADB5BD; }
.empty-state { padding:2.2rem 1rem; text-align:center; color:var(--text-muted); }
.empty-state i { font-size:2rem; display:block; margin-bottom:.5rem; color:#B6C3CC; }

/* =============================================================================
   Reception search results + selected patient card
   ========================================================================== */
.search-results {
  max-height:270px; overflow-y:auto;
  border:1px solid var(--border); border-radius:var(--radius);
  background:#fff;
}
.search-results:empty { display:none; }
.search-result-item {
  display:block; padding:.5rem .7rem; border-bottom:1px solid #EEF1F4;
  color:var(--text); cursor:pointer; text-decoration:none;
  transition:background var(--transition);
}
.search-result-item:last-child { border-bottom:0; }
.search-result-item:hover, .search-result-item.active {
  background:var(--primary-light); color:var(--primary-dark); text-decoration:none;
}
.search-result-item strong { color:var(--primary-dark); }
.selected-patient-card {
  background:var(--primary-light); border:1px solid #BFDCE9;
  border-radius:var(--radius); padding:.7rem .85rem;
}
.profile-fields { font-size:13px; }
.profile-fields .row { padding:.3rem 0; border-bottom:1px dashed #E9EEF2; }
.profile-fields .row:last-child { border-bottom:0; }
.profile-fields .label { color:var(--text-muted); font-weight:600; }

/* =============================================================================
   Dashboard chart wrappers (§11)
   ========================================================================== */
.chart-box { position:relative; width:100%; min-height:260px; }
.chart-box canvas { max-width:100%; }
.chart-legend-note { font-size:11px; color:var(--text-muted); }

/* =============================================================================
   Loading spinner (specs.md §7 animations)
   ========================================================================== */
.spinner-overlay {
  position:fixed; inset:0; z-index:2000;
  background:rgba(255,255,255,.66);
  display:none; align-items:center; justify-content:center;
}
.spinner-overlay.is-active { display:flex; }
.spinner {
  width:38px; height:38px; border-radius:50%;
  border:3px solid var(--primary-light);
  border-top-color:var(--primary);
  animation:lseh-spin .7s linear infinite;
}
.btn.is-loading { color:transparent !important; pointer-events:none; }
.btn.is-loading::after {
  content:''; position:absolute; top:50%; left:50%;
  width:15px; height:15px; margin:-7.5px 0 0 -7.5px; border-radius:50%;
  border:2px solid rgba(255,255,255,.55); border-top-color:#fff;
  animation:lseh-spin .7s linear infinite;
}
.btn-outline-primary.is-loading::after,
.btn-outline-secondary.is-loading::after,
.btn-light.is-loading::after {
  border-color:rgba(46,134,171,.35); border-top-color:var(--primary);
}
@keyframes lseh-spin { to { transform:rotate(360deg); } }

/* =============================================================================
   Toast notifications - top-right, auto-dismiss 3s (specs.md §14)
   ========================================================================== */
.toast-stack {
  position:fixed; top:14px; right:14px; z-index:2100;
  display:flex; flex-direction:column; gap:.5rem;
  width:330px; max-width:calc(100vw - 28px);
  pointer-events:none;
}
.app-toast {
  pointer-events:auto;
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.65rem .8rem;
  background:#fff; border-radius:var(--radius);
  border-left:4px solid var(--primary);
  box-shadow:var(--shadow-lg);
  font-size:13px; color:var(--text);
  animation:lseh-toast-in .28s cubic-bezier(.21,1.02,.73,1) both;
}
.app-toast.is-hiding { animation:lseh-toast-out .25s ease-in forwards; }
.app-toast .toast-icon { font-size:15px; margin-top:1px; color:var(--primary); }
.app-toast .toast-text { flex:1 1 auto; word-break:break-word; }
.app-toast .toast-close {
  flex:0 0 auto; background:transparent; border:0; padding:0 .1rem;
  font-size:16px; line-height:1; color:#9AA7B2; cursor:pointer;
}
.app-toast .toast-close:hover { color:var(--danger); }
.app-toast-success { border-left-color:var(--success); }
.app-toast-success .toast-icon { color:var(--success); }
.app-toast-danger, .app-toast-error { border-left-color:var(--danger); }
.app-toast-danger .toast-icon, .app-toast-error .toast-icon { color:var(--danger); }
.app-toast-warning { border-left-color:var(--warning); }
.app-toast-warning .toast-icon { color:#B8860B; }
.app-toast-info { border-left-color:var(--info); }
.app-toast-info .toast-icon { color:var(--info); }
@keyframes lseh-toast-in {
  from { opacity:0; transform:translateX(22px); }
  to { opacity:1; transform:translateX(0); }
}
@keyframes lseh-toast-out {
  from { opacity:1; transform:translateX(0); }
  to { opacity:0; transform:translateX(26px); }
}


/* =============================================================================
   AI assistant - local rule-based chat, bottom-right (specs.md §14)
   ========================================================================== */
.ai-assistant { position:fixed; right:18px; bottom:18px; z-index:2050; }
/* FIX 3: never let the floating assistant sit on top of an open modal
   (Bootstrap modals live at z-index 1055). */
body.modal-open .ai-assistant { display:none !important; }
/* Round 2 FIX 2: an open modal must be above EVERY fixed overlay —
   spinner (2000), assistant (2050) and the toast stack (2100). */
.modal { z-index:3055 !important; }
.modal-backdrop { z-index:3050 !important; }
.ai-toggle {
  width:52px; height:52px; border-radius:50%; border:0;
  background:var(--primary); color:#fff; font-size:20px; line-height:1;
  box-shadow:var(--shadow-lg); cursor:pointer;
  transition:transform var(--transition), background var(--transition);
}
.ai-toggle:hover { background:var(--primary-dark); transform:translateY(-2px); }
.ai-toggle:focus-visible { outline:2px solid var(--primary-dark); outline-offset:2px; }
.ai-panel {
  position:absolute; right:0; bottom:64px;
  width:342px; max-width:calc(100vw - 36px);
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); overflow:hidden;
  display:flex; flex-direction:column;
  animation:fadeIn .2s ease both;
}
.ai-header {
  display:flex; align-items:center;
  background:var(--primary); color:#fff;
  padding:.6rem .75rem; font-size:14px; font-weight:600;
}
.ai-close {
  margin-left:auto; border:0; background:transparent; color:#fff;
  font-size:18px; line-height:1; padding:0 .2rem;
  cursor:pointer; opacity:.85;
}
.ai-close:hover { opacity:1; }
.ai-messages {
  flex:1 1 auto; max-height:320px; overflow-y:auto;
  padding:.7rem; display:flex; flex-direction:column; gap:.5rem;
  background:#FBFCFD;
}
.ai-msg {
  max-width:88%; padding:.5rem .65rem;
  font-size:13px; line-height:1.45; white-space:pre-line;
  border-radius:var(--radius); word-break:break-word;
}
.ai-msg-bot { align-self:flex-start; background:#fff; border:1px solid var(--border); }
.ai-msg-user { align-self:flex-end; background:var(--primary); color:#fff; }
.ai-input-row {
  display:flex; gap:.4rem; padding:.55rem;
  border-top:1px solid var(--border); background:#fff;
}
.ai-input-row .form-control { font-size:14px; }

/* =============================================================================
   Responsive — off-canvas sidebar under 992px (specs.md §7: 1024px+ target,
   graceful below so the app still runs on a small laptop)
   ========================================================================== */
@media (max-width: 991.98px) {
  .sidebar { transform:translateX(-100%); box-shadow:var(--shadow-lg); }
  .app-shell.sidebar-open .sidebar { transform:translateX(0); }
  .app-main { margin-left:0; }
  .page-title { font-size:16px; }
  .kpi-card .kpi-value { font-size:22px; }
  .app-footer { flex-direction:column; align-items:flex-start; justify-content:center; gap:.15rem; }
}
@media (min-width: 1200px) {
  .app-content { padding:1.15rem 1.35rem; }
}
@media print {
  .ai-assistant, .toast-stack { display:none !important; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* =============================================================================
   Topbar message bell + unread badge (in-app messages)
   ========================================================================== */
.topbar-msg { position:relative; display:inline-flex; align-items:center;
  justify-content:center; width:38px; height:38px; margin-right:.35rem;
  border-radius:50%; color:#2E86AB; background:rgba(46,134,171,.08);
  text-decoration:none; }
.topbar-msg:hover { background:rgba(46,134,171,.18); color:#2E86AB; }
.topbar-msg.has-unread { background:#DC3545; color:#fff; }
.msg-badge { position:absolute; top:-2px; right:-2px; min-width:18px; height:18px;
  padding:0 5px; border-radius:9px; background:#DC3545; color:#fff;
  font-size:11px; font-weight:600; line-height:18px; text-align:center; }
.msg-body { white-space:pre-wrap; }

/* =============================================================================
   Thermal token / receipt preview (58mm slip) — Change 10
   ========================================================================== */
.token-preview { display:flex; flex-direction:column; align-items:center; gap:1rem; }
.token-paper {
  width:58mm; min-height:90mm; background:#fff; color:#000;
  border:1px dashed #333; border-radius:4px; padding:6mm 4mm;
  font-family:"Courier New",Courier,monospace; font-size:12px; line-height:1.5;
}
.token-paper .token-center { text-align:center; }
.token-paper .token-rule { border-top:1px dashed #333; margin:5px 0; }
.token-paper .token-title { font-weight:700; font-size:13px; letter-spacing:.04em; }
.token-paper .token-row { display:flex; justify-content:space-between; gap:8px; }
.token-paper .token-token { font-size:26px; font-weight:700; letter-spacing:.12em; }
.token-paper .token-note { font-size:11px; text-align:center; margin-top:6px; }
.token-actions { display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; }

@media print {
  .token-actions, .token-preview > .no-print { display:none !important; }
  .token-paper { border:0; border-radius:0; width:auto; padding:0; min-height:0; }
}

/* =============================================================================
   Basic slip (A5 / half A4) — reception "Print Basic Slip"
   ========================================================================== */
.basic-slip {
  width:148mm; min-height:210mm; background:#fff; color:#111;
  border:1px solid #d0d0d0; border-radius:4px; box-shadow:0 3px 14px rgba(0,0,0,.15);
  padding:12mm 10mm; font-family:"Inter",Arial,sans-serif; font-size:12px; line-height:1.55;
}
.basic-slip .bs-header { text-align:center; }
.basic-slip .bs-title { font-size:17px; font-weight:700; letter-spacing:.03em; }
.basic-slip .bs-addr { font-size:10px; color:#333; margin-top:2px; }
.basic-slip .bs-rule { border-top:1px dashed #555; margin:8px 0; }
.basic-slip .bs-rule-strong { border-top:1px solid #111; }
/* Compact two-column label/value layout */
.basic-slip .bs-grid,
.basic-slip .bs-footer {
  display:grid; grid-template-columns:1fr 1fr; gap:6px 16px;
}
.basic-slip .bs-item {
  display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  border-bottom:1px dotted #bbb; padding:3px 0; min-width:0;
}
.basic-slip .bs-wide { grid-column:1 / -1; }
.basic-slip .bs-label { color:#444; font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.03em; }
.basic-slip .bs-value { font-weight:600; text-align:right; overflow-wrap:anywhere; }
.basic-slip .bs-footer { margin-top:4px; }
.basic-slip .bs-note { text-align:center; font-size:10px; color:#333; margin-top:10px; }

@media print {
  .basic-slip {
    width:auto; min-height:0; margin:0; padding:0;
    border:0; border-radius:0; box-shadow:none;
    font-size:11pt;
  }
  .basic-slip .bs-grid, .basic-slip .bs-footer { break-inside:avoid; }
}