/*
  Hospital UI (Offline)
  - No Bootstrap / No Tailwind / No external CDN
  - Provides a small "bootstrap-like" class set used across Blade files
*/

:root{
  --bg: #f6f7fb;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --shadow: 0 10px 25px rgba(2,6,23,.08), 0 2px 6px rgba(2,6,23,.06);

  /* Premium Royal Gold palette (softer, less yellow) */
  --gold: #d6b04a;
  --gold2: #f1d27a;
  --goldDark: #8a6a00;
  --goldSoft: rgba(214,176,74,.14);
  --goldLine: rgba(0,0,0,.18);

  /* Layout-specific gold tones */
  --goldMenuTop: #f4dda0;
  --goldMenuMid: #e7c76b;
  --goldMenuBot: #d6b04a;
  --goldHeaderTop: #f7e6b5;
  --goldHeaderBot: #e0bd5c;

  --ok: #16a34a;
  --warn: #f59e0b;
  --danger: #dc2626;
  --dark: #0b1220;

  --radius: 14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans Bengali", "Hind Siliguri", sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 500px at 10% -10%, rgba(212,175,55,.22), transparent 60%),
    radial-gradient(900px 600px at 90% -20%, rgba(243,207,110,.18), transparent 55%),
    linear-gradient(180deg, #fbfcff, var(--bg));
}

/* ---------- Guest/Auth pages ---------- */
.is-guest .app-shell{width: min(1100px, calc(100% - 32px));}
.auth-wrap{
  display:grid;
  place-items:center;
  padding: 26px 0 46px;
}
.auth-grid{
  width: min(980px, calc(100% - 0px));
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 900px){
  .auth-grid{grid-template-columns: 1.05fr .95fr; gap: 18px;}
}
.auth-hero{
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,.60);
  background:
    radial-gradient(900px 360px at 15% 10%, rgba(212,175,55,.25), transparent 60%),
    radial-gradient(700px 380px at 90% 0%, rgba(243,207,110,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.78));
  box-shadow: var(--shadow);
  padding: 18px;
  overflow:hidden;
  position: relative;
}
.auth-hero__title{font-size: 22px; font-weight: 950; margin: 6px 0 6px}
.auth-hero__subtitle{color: var(--muted); font-weight: 700; line-height: 1.45}
.auth-features{margin-top: 14px; display:grid; gap:10px}
.auth-pill{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,.72);
  background: rgba(255,255,255,.78);
}
.auth-pill__ico{
  width:36px;height:36px; border-radius: 14px;
  display:grid;place-items:center;
  background: linear-gradient(135deg, rgba(212,175,55,.28), rgba(243,207,110,.18));
  border: 1px solid rgba(212,175,55,.32);
}
.auth-pill__t{font-weight: 900}
.auth-pill__d{color: var(--muted); font-weight: 700; font-size: 13px; margin-top: 2px}

/* ---------- Input group (icons / actions) ---------- */
.input-group{display:flex;align-items:stretch}
.input-group .form-control{border-top-right-radius:0;border-bottom-right-radius:0}
.input-group .input-group-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0 .75rem;
  border: 1px solid var(--border);
  border-left: none;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  background: rgba(255,255,255,.92);
  cursor:pointer;
  font-weight: 800;
  color: var(--muted);
  user-select:none;
}
.input-group .input-group-btn:hover{color: var(--text); border-color: rgba(212,175,55,.55)}
.input-hint{color: var(--muted); font-size: 12px; font-weight: 700; margin-top: 6px}

/* ---------- Form sections / stepper ---------- */
.stepper{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 2px 0 16px;
}
.step{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.75);
  background: rgba(255,255,255,.80);
  font-size: 13px;
  font-weight: 900;
}
.step__no{
  width: 24px; height: 24px;
  display:grid; place-items:center;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color:#1a1400;
}
.section-card{
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 28px rgba(2,6,23,.06);
  padding: 14px;
}
.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.section-title{font-weight: 950; margin: 0}
.section-sub{color: var(--muted); font-weight: 700; font-size: 13px; margin-top: 2px}

/* ---------- Detail view helpers (serial-by-serial look) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  flex: 0 0 auto;
  min-width: 160px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,.75);
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
}
.chip span{display:block;color:var(--muted);font-weight:800;font-size:12px}
.chip b{display:block;font-weight:950;margin-top:2px}

.subcard{
  border: 1px solid rgba(226,232,240,.85);
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  padding: 12px;
}
.subcard__title{font-weight:950;margin:0 0 10px;color:#1f2937}

.kv{display:grid;grid-template-columns: 1fr;gap:8px}
.kv > div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed rgba(226,232,240,.9);padding-bottom:6px}
.kv > div:last-child{border-bottom:none;padding-bottom:0}
.kv span{color:var(--muted);font-weight:800}
.kv b{font-weight:950;text-align:right}

.addr-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width: 768px){.addr-grid{grid-template-columns:1fr 1fr}}
.addr{border:1px solid rgba(226,232,240,.85);border-radius:14px;padding:10px;background:rgba(15,23,42,.02)}
.addr__t{font-weight:950;margin-bottom:6px}
.addr__d{color:var(--text);font-weight:700;line-height:1.55}

.note{padding:10px 12px;border-radius:14px;border:1px solid rgba(245,158,11,.30);background:rgba(245,158,11,.08);font-weight:700}

.sticky-actions{
  position: sticky;
  bottom: 10px;
  z-index: 5;
  margin-top: 16px;
}
.sticky-actions__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(226,232,240,.75);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(2,6,23,.10);
}

.btn-soft{
  background: rgba(0,0,0,.06);
  border-color: rgba(15,23,42,.14);
}
.btn-soft:hover{background: rgba(15,23,42,.06)}

a{color:inherit;text-decoration:none}
a:hover{opacity:.95}

.container{
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
}

.page{padding: 18px 0 36px}

/* ---------- Topbar ---------- */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  /* Match sidebar gold, but slightly lighter for separation */
  background:
    radial-gradient(900px 240px at 15% 0%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(700px 220px at 90% 40%, rgba(0,0,0,.10), transparent 62%),
    linear-gradient(180deg, var(--goldHeaderTop) 0%, var(--goldHeaderBot) 100%);
  color: #0b0b0b;
  border-bottom: 1px solid rgba(0,0,0,.16);
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}
.topbar a{color: inherit;}
.topbar::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.35), transparent);
  opacity:.55;
}
.topbar__left{display:flex;align-items:center;gap:10px}
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.16);
  background: rgba(255,255,255,.28);
  color: #0b0b0b;
  cursor:pointer;
  transition: box-shadow .18s ease, border-color .18s ease, transform .06s ease;
  user-select:none;
}
.icon-btn:hover{border-color: rgba(0,0,0,.35); box-shadow: 0 12px 26px rgba(2,6,23,.08)}
.icon-btn:active{transform: translateY(1px)}
.nav-btn{display:none}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 0;
}
.brand{display:flex;align-items:center;gap:10px}
.brand__logo{width:36px;height:36px;object-fit:contain;border-radius:12px;padding:2px;background:rgba(255,255,255,.85);box-shadow: 0 10px 20px rgba(2,6,23,.15)}
.brand__mark{
  width:36px;height:36px;display:grid;place-items:center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color:#1a1400;
  font-weight: 800;
  box-shadow: 0 10px 20px rgba(212,175,55,.25);
}
.brand__text{font-weight:800;letter-spacing:.2px}

.topbar__right{display:flex;align-items:center;gap:12px}

.topbar__search{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 6px 8px;
  border: 1px solid rgba(0,0,0,.16);
  border-radius: 12px;
  background: rgba(255,255,255,.28);
}
.topbar__search input{
  border:none;
  outline:none;
  background: transparent;
  min-width: 220px;
  font-weight: 700;
}
.topbar__search input::placeholder{
  color: rgba(0,0,0,.55);
  font-weight: 700;
}
@media (max-width: 768px){
  .topbar__search input{min-width: 140px;}
}

.topbar__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.userchip{
  display:flex;
  flex-direction:column;
  line-height:1.1;
  padding: 6px 10px;
  border:1px solid rgba(0,0,0,.16);
  border-radius: 12px;
  background: rgba(255,255,255,.28);
}
.userchip__name{font-weight:700;font-size:14px}
.userchip__role{font-size:12px;color:rgba(0,0,0,.55)}

/* ---------- App shell (Sidebar + Content) ---------- */
.nav-toggle{
  position: fixed;
  left: -9999px;
  top: -9999px;
}

.app-shell{
  display:flex;
  gap: 16px;
  align-items: stretch;
  width: min(1400px, calc(100% - 32px));
  margin: 0 auto;
}

.sidebar{
  width: 270px;
  flex: 0 0 270px;
  padding: 14px;
  margin-top: 14px;
  border-radius: 18px;
  /* Premium gold: clean, readable, enterprise look */
  background:
    radial-gradient(620px 280px at 18% 0%, rgba(255,255,255,.52), transparent 62%),
    radial-gradient(560px 260px at 92% 20%, rgba(0,0,0,.11), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 2px, rgba(0,0,0,.02) 2px 7px),
    linear-gradient(180deg, var(--goldMenuTop), var(--goldMenuMid) 48%, var(--goldMenuBot));
  border: 1px solid rgba(0,0,0,.18);
  box-shadow:
    0 18px 44px rgba(2,6,23,.16),
    0 0 0 1px rgba(255,255,255,.22) inset;
  position: sticky;
  top: 74px; /* below topbar */
  height: calc(100vh - 90px);
  overflow: auto;
  color: #000;
}


.app-content{flex:1; min-width:0}

.sidebar__inner{display:flex;flex-direction:column;gap: 14px;min-height:100%}
.sidebar__brand{padding: 2px 4px 0 4px;}
.sidebar__brand .brand__text{font-size:14px;}
.sidebar__profile{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.18);
  background:
    linear-gradient(135deg, rgba(255,255,255,.26), rgba(0,0,0,.04));
}
.sidebar__avatar{
  width:42px;height:42px;display:grid;place-items:center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color:#1a1400;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(212,175,55,.22);
}
.sidebar__name{color:#000;font-weight:900;letter-spacing:.2px}
.sidebar__role{color: rgba(0,0,0,.70); font-size: 12px; font-weight: 800}

.nav-section{
  color: rgba(0,0,0,.70);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .9px;
  text-transform: uppercase;
  padding: 6px 8px;
}

.nav-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  color: #000;
  font-weight: 800;
  letter-spacing: .15px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  transition: background .15s ease, border-color .15s ease, transform .06s ease, box-shadow .18s ease;
  position: relative;
}
.nav-item:hover{
  background: rgba(255,255,255,.28);
  border-color: rgba(0,0,0,.22);
  box-shadow: 0 12px 24px rgba(0,0,0,.10);
}
.nav-item:active{transform: translateY(1px)}

.nav-item.active{
  background:
    linear-gradient(135deg, rgba(0,0,0,.16), rgba(255,255,255,.12));
  border-color: rgba(0,0,0,.32);
  color:#000;
  box-shadow: 0 16px 30px rgba(0,0,0,.14);
}
.nav-item.active::before{
  content:"";
  position:absolute;
  left: 8px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 999px;
  background: #000;
  opacity: .9;
}
.nav-item--soft{
  background: rgba(255,255,255,.22);
  border-color: rgba(0,0,0,.12);
}

.nav-ico{
  width: 26px;
  height: 26px;
  display:grid;
  place-items:center;
  border-radius: 10px;
  background: rgba(0,0,0,.07);
  border: 1px solid rgba(0,0,0,.18);
  flex: 0 0 26px;
}

/* Make icons pop a bit on hover/active */
.nav-item:hover .nav-ico{background: rgba(0,0,0,.10)}
.nav-item.active .nav-ico{background: rgba(0,0,0,.12)}

/* Sidebar scrollbar */
.sidebar::-webkit-scrollbar{width:10px}
.sidebar::-webkit-scrollbar-thumb{background: rgba(0,0,0,.55); border-radius: 10px; border: 2px solid rgba(255,255,255,.35)}
.sidebar::-webkit-scrollbar-thumb:hover{background: rgba(0,0,0,.70)}
.sidebar::-webkit-scrollbar-track{background: rgba(255,255,255,.18); border-radius: 10px}

.sidebar__foot{margin-top:auto}
.sidebar__hint{
  color: rgba(255,255,255,.62);
  font-size: 12px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px dashed rgba(226,232,240,.18);
  background: rgba(255,255,255,.03);
}

.sidebar-overlay{display:none}

@media (max-width: 991px){
  .nav-btn{display:inline-flex}

  .app-shell{width: calc(100% - 22px);}

  .sidebar{
    position: fixed;
    left: 10px;
    top: 66px;
    height: calc(100vh - 86px);
    transform: translateX(-110%);
    transition: transform .22s ease;
    z-index: 60;
  }

  .sidebar-overlay{
    display:block;
    position: fixed;
    inset: 66px 0 0 0;
    background: rgba(2,6,23,.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
    z-index: 55;
  }

  /* Toggle open */
  .nav-toggle:checked ~ .topbar .nav-btn{border-color: rgba(212,175,55,.55)}
  .nav-toggle:checked ~ .app-shell .sidebar{transform: translateX(0)}
  .nav-toggle:checked ~ .app-shell .sidebar-overlay{opacity:1; pointer-events:auto}
}


@media (min-width: 992px){
  /* Desktop: fixed left sidebar like an admin panel */
  .app-shell{
    display:block;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .sidebar{
    position: fixed;
    left: 0;
    top: 66px;
    margin-top: 0;
    height: calc(100vh - 66px);
    border-radius: 0 18px 18px 0;
    z-index: 40;
  }

  .app-content{
    margin-left: 286px; /* 270px sidebar + 16px gap */
    padding: 0 16px;
  }

  /* Content container inside the shifted area */
  .app-content .container{
    width: min(1100px, calc(100% - 48px));
    margin: 0 auto;
  }
}

@media (min-width: 992px){
  .app-shell{display:block;width:100%;margin:0;padding:0;}
  .sidebar{position:fixed;left:0;top:74px;margin-top:0;height:calc(100vh - 74px);border-radius:0 18px 18px 0;z-index:40;}
  .app-content{margin-left:286px;padding:0 16px;}
  .app-content .container{width:min(1100px,calc(100% - 48px));margin:0 auto;}
}

@media (min-width: 992px){
  /* desktop-fixed-sidebar */
  .app-shell{display:block;width:100%;margin:0;padding:0;}
  .sidebar{position:fixed;left:0;top:74px;margin-top:0;height:calc(100vh - 74px);border-radius:0 18px 18px 0;z-index:40;}
  .app-content{margin-left:286px;padding:0 16px;}
  .app-content .container{width:min(1100px,calc(100% - 48px));margin:0 auto;}
}
/* ---------- Alerts ---------- */
.alert{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid;
  margin-bottom: 14px;
  background: var(--surface);
}
.alert ul{margin:0;padding-left:18px}
.alert-success{border-color: rgba(22,163,74,.25); background: rgba(22,163,74,.08); color:#14532d}
.alert-danger{border-color: rgba(220,38,38,.25); background: rgba(220,38,38,.08); color:#7f1d1d}
.alert-warning{border-color: rgba(245,158,11,.30); background: rgba(245,158,11,.10); color:#7c2d12}

/* ---------- Cards ---------- */
.card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .08s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{transform: translateY(-1px); box-shadow: 0 18px 40px rgba(2,6,23,.11), 0 3px 10px rgba(2,6,23,.06)}
.card-body{padding: 16px}
.gold-card{
  border-color: rgba(212,175,55,.35);
  box-shadow: 0 16px 34px rgba(2,6,23,.09), 0 2px 8px rgba(2,6,23,.06);
}
.gold-card:hover{border-color: rgba(212,175,55,.55); box-shadow: 0 22px 50px rgba(2,6,23,.12), 0 4px 12px rgba(2,6,23,.08)}
.card, .gold-card{
  position: relative;
  overflow: hidden;
}
.card:hover, .gold-card:hover{box-shadow: 0 18px 40px rgba(2,6,23,.12), 0 3px 10px rgba(2,6,23,.08)}
.gold-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(520px 260px at 15% 0%, rgba(212,175,55,.18), transparent 60%);
  opacity: .9;
}
.card-body{position:relative; z-index:1}
.gold-hero{
  border-color: rgba(212,175,55,.45);
  background:
    radial-gradient(700px 300px at 10% 0%, rgba(212,175,55,.20), transparent 60%),
    radial-gradient(600px 280px at 90% 10%, rgba(243,207,110,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.92));
}

/* ---------- Typography & helpers ---------- */
.fw-bold{font-weight:800}
.fw-semibold{font-weight:700}
.small-muted{color:var(--muted);font-size: 12px}
.link{color:#0b5bd3;font-weight:600}
.link:hover{text-decoration:underline}

.text-end{text-align:right}
.w-100{width:100%}

.mb-0{margin-bottom:0}
.mb-1{margin-bottom:.25rem}
.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:1rem}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:1rem}
.mt-4{margin-top:1.5rem}
.my-4{margin-top:1.5rem;margin-bottom:1.5rem}

.p-3{padding:1rem}
.p-4{padding:1.25rem}

.rounded{border-radius: var(--radius)}
.bg-white{background: var(--surface)}
.bg-transparent{background: transparent}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding: .64rem 1rem;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 700;
  cursor:pointer;
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  user-select:none;
}
.btn:active{transform: translateY(1px)}
.btn-sm{padding:.45rem .75rem;border-radius:10px;font-size: 13px}
.btn-dark{background: var(--dark); color:#fff}
.btn-dark:hover{box-shadow: 0 10px 20px rgba(2,6,23,.18)}
.btn-gold{
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color:#1a1400;
  border-color: rgba(138,106,0,.25);
}
.btn-gold:hover{box-shadow: 0 12px 26px rgba(212,175,55,.28)}
.btn-outline-dark{background: transparent; border-color: rgba(0,0,0,.28)}
.btn-outline-dark:hover{background: rgba(0,0,0,.06)}
.btn-danger{background: var(--danger); color:#fff}
.btn-danger:hover{box-shadow: 0 10px 20px rgba(220,38,38,.2)}

/* ---------- Grid (bootstrap-ish) ---------- */
.row{display:flex;flex-wrap:wrap}
.g-3{gap:1rem}
.gap-2{gap:.5rem}

.col-12{flex:0 0 100%;max-width:100%}
.col-6{flex:0 0 50%;max-width:50%}

/* ---------- Landscape helpers ----------
   Use when you want 2 columns ONLY in landscape mode (phones/tablets).
   Example: class="col-12 col-land-6"
--------------------------------------- */
@media (orientation: landscape){
  .col-land-6{flex:0 0 50%;max-width:50%}
}

@media (min-width: 768px){
  .col-md-3{flex:0 0 25%;max-width:25%}
  .col-md-4{flex:0 0 33.3333%;max-width:33.3333%}
  .col-md-5{flex:0 0 41.6667%;max-width:41.6667%}
  .col-md-6{flex:0 0 50%;max-width:50%}
  .col-md-7{flex:0 0 58.3333%;max-width:58.3333%}
  .col-md-8{flex:0 0 66.6667%;max-width:66.6667%}
}
@media (min-width: 992px){
  .col-lg-6{flex:0 0 50%;max-width:50%}
}

/* ---------- Flex utilities ---------- */
.d-flex{display:flex}
.flex-wrap{flex-wrap:wrap}
.justify-content-between{justify-content:space-between}
.justify-content-end{justify-content:flex-end}
.justify-content-center{justify-content:center}
.align-items-center{align-items:center}

/* ---------- Forms ---------- */
.form-label{display:block;font-weight:700;margin-bottom:.35rem}
.form-control,
.form-select,
textarea{
  width:100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .62rem .85rem;
  background: rgba(255,255,255,.92);
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.form-control:focus,
.form-select:focus,
textarea:focus{
  border-color: rgba(212,175,55,.75);
  box-shadow: 0 0 0 4px rgba(212,175,55,.18);
}
.form-control-sm,.form-select-sm{padding:.45rem .65rem;border-radius:10px;font-size:13px}

.form-check{display:flex;align-items:flex-start;gap:.55rem}
.form-check-input{margin-top:.2rem;width:18px;height:18px;accent-color: var(--gold)}
.form-check-label{line-height:1.25}

hr{border:none;border-top:1px solid var(--border)}

.check-grid{
  display:grid;
  grid-template-columns: repeat(1, minmax(0,1fr));
  gap: .55rem .9rem;
}
@media (min-width: 768px){
  .check-grid{grid-template-columns: repeat(3, minmax(0,1fr));}
}

/* ---------- Tables ---------- */
.table-responsive{overflow:auto}

/* Dashboard wide tables: show full layout on desktop (no inner scrollbar) */
@media (min-width: 992px){
  .dash-wide-table{overflow: visible}
}
.dash-wide-table .table{table-layout: fixed}
.dash-wide-table th,.dash-wide-table td{white-space: normal}
.dash-wide-table .text-nowrap{white-space: nowrap}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:.65rem .65rem;border-bottom:1px solid var(--border);vertical-align:top}
.table thead th{
  font-size:13px;
  text-transform:none;
  color:#0b1220;
  font-weight:900;
  background:
    linear-gradient(180deg, rgba(212,175,55,.20), rgba(243,207,110,.10));
  border-bottom: 1px solid rgba(0,0,0,.10);
}
.table tbody tr:hover{background: rgba(212,175,55,.07)}
.table-striped tbody tr:nth-child(odd){background: rgba(15,23,42,.02)}
.table-sm th,.table-sm td{padding:.5rem .55rem}
.align-middle td,.align-middle th{vertical-align:middle}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.22rem .55rem;border-radius:999px;font-size:12px;font-weight:800;border:1px solid transparent}
.text-bg-success{background: rgba(22,163,74,.12);color:#14532d;border-color: rgba(22,163,74,.25)}
.text-bg-warning{background: rgba(245,158,11,.14);color:#7c2d12;border-color: rgba(245,158,11,.25)}
.text-bg-dark{background: rgba(15,23,42,.12);color:#0b1220;border-color: rgba(15,23,42,.22)}
.text-bg-secondary{background: rgba(100,116,139,.14);color:#0f172a;border-color: rgba(100,116,139,.25)}

/* ---------- Admin Stats ---------- */
.stat{
  display:block;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  transition: transform .08s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
}
.stat:hover{transform: translateY(-1px); box-shadow: 0 14px 30px rgba(2,6,23,.10)}
.stat::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 3px;
  background: linear-gradient(90deg, rgba(212,175,55,.0), rgba(212,175,55,.75), rgba(243,207,110,.0));
  opacity: .9;
}
.stat__label{color:var(--muted);font-weight:800;font-size:12px}
.stat__value{font-size:34px;font-weight:900;line-height:1.1;margin-top:4px}
.stat--sm{padding:12px;border-radius:12px}
.stat--sm .stat__label{font-size:11px}
.stat--sm .stat__value{font-size:26px}
.stat--warn{border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.07)}
.stat--ok{border-color: rgba(22,163,74,.30); background: rgba(22,163,74,.06)}
.stat--soft{border-color: rgba(59,130,246,.30); background: rgba(59,130,246,.06)}

/* Make all stat tiles feel part of the gold theme */
.stat{ border-color: rgba(212,175,55,.22); }
.stat--gold{
  border-color: rgba(212,175,55,.55);
  background: linear-gradient(135deg, rgba(212,175,55,.18), rgba(243,207,110,.10));
}


/* Stat grid helper (dashboard) */
.stat-grid{
  display:grid;
  /* Auto-fit so 5-6 cards don't look broken on desktop */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.stat-grid--2{grid-template-columns: repeat(2, minmax(0,1fr));}
@media (orientation: landscape){.stat-grid--2{grid-template-columns: repeat(2, minmax(0,1fr));}}
@media (min-width: 992px){.stat-grid--2{grid-template-columns: repeat(2, minmax(0,1fr));}}
@media (orientation: landscape){
  .stat-grid{grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));}
}
@media (min-width: 992px){
  .stat-grid{grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));}
}


/* ---------- Pagination ---------- */
.pagination-wrap{margin-top: 16px}
.pagination{display:flex;gap:8px;flex-wrap:wrap;align-items:center;list-style:none;padding:0;margin:0}
.page-item{display:block}
.page-link{
  display:inline-flex;align-items:center;justify-content:center;
  min-width: 38px;
  padding: .45rem .7rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.92);
  font-weight:800;
  color: var(--text);
}
.page-link:hover{border-color: rgba(212,175,55,.55); box-shadow: 0 10px 22px rgba(2,6,23,.08)}
.page-item.active .page-link{background: linear-gradient(135deg, var(--gold), var(--gold2)); border-color: rgba(138,106,0,.22); color:#1a1400}
.page-item.disabled .page-link{opacity:.45;cursor:not-allowed}

/* ---------- Footer ---------- */
.footer{padding: 18px 0; color: var(--muted); font-size: 12px}
.footer__inner{display:flex;justify-content:center}

/* ---------- Mobile polish (user friendly) ---------- */
@media (max-width: 576px){
  /* More usable space */
  .container{width: calc(100% - 18px);}
  .page{padding: 12px 0 24px;}

  /* Topbar: stack nicely */
  .topbar__inner{flex-direction:column;align-items:stretch;gap:10px;}
  .topbar__left{justify-content:space-between;}
  .topbar__right{flex-direction:column;align-items:stretch;gap:10px;}
  .topbar__search{width:100%;}
  .topbar__search input{min-width:0;width:100%;}
  .topbar__actions{justify-content:space-between;}
  .userchip{flex-direction:row;justify-content:space-between;gap:10px;width:100%;}
  .userchip__name{font-size:13px;}
  .userchip__role{font-size:12px;}

  /* Stats/cards: readable + less tall */
  .stat-grid{grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:10px;}
  .stat{padding: 12px;}
  .stat__label{font-size:11px;}
  .stat__value{font-size:24px;}
  .stat--sm{padding:10px;}
  .stat--sm .stat__value{font-size:20px;}

  /* Tables: better on small screens */
  .table-responsive{-webkit-overflow-scrolling: touch;}
  .table{font-size:12px;}
  .table th,.table td{padding:.5rem .55rem;}

  /* Buttons: easier tap targets without taking too much space */
  .btn-sm{padding:.5rem .7rem;}
}

/* ---------- Print tweaks ---------- */
@media print{
  body, body *{font-weight:700 !important}
  .topbar,.footer,.btn,.sidebar,.sidebar-overlay{display:none !important}
  .no-print{display:none !important}
  body{background:#fff}
  .card,.section-card,.subcard,.chip{box-shadow:none}
  .section-card,.subcard,.chip{border-color:#ddd}
  .container{width:100%;margin:0}
  .page{padding:0}
}



/* ---------- Bill-style Print Layout ---------- */
.screen-only{display:block}
.print-only{display:none}

/* ---------- Bill-style Screen Preview (same as print layout) ---------- */
/* Add .bill-preview on a parent container to show the bill layout on screen */
.bill-preview .screen-only{display:none}
.bill-preview .print-only{display:block}

/* Screen-friendly bill styles (mirrors the @media print rules) */
.bill-preview .bill-wrap{ width: min(148mm, 100%); margin: 0 auto; }
.bill-preview .bill-card{ border: 1px solid #111; border-radius: 14px; padding: 12px; background:#fff; box-shadow: 0 24px 50px rgba(2,6,23,.14); }
.bill-preview .bill-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding-bottom:10px; border-bottom: 2px solid #111; }
.bill-preview .bill-brand{ display:flex; align-items:center; gap:10px; }
.bill-preview .bill-mark{ width:36px; height:36px; border-radius: 12px; border:2px solid #111; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:18px; overflow:hidden; background:#fff; }
.bill-preview .bill-mark .bill-logo{width:100%;height:100%;object-fit:contain;padding:2px;}
.bill-preview .bill-hosp{ font-weight: 900; font-size: 18px; line-height: 1.1; }
.bill-preview .bill-sub{ font-size: 13px; line-height: 1.25; margin-top: 2px; color:#111; }

.bill-preview .bill-hosp-en{ font-weight: 900; }
.bill-preview .bill-doc{ font-weight: 900; margin-top: 4px; }
.bill-preview .bill-title{ margin-top:6px; font-size: 13px; font-weight: 900; letter-spacing:.3px; text-transform: uppercase; color:#111; }
.bill-preview .bill-meta{ text-align:right; font-size: 13px; color:#111; }
.bill-preview .bill-meta div{ line-height: 1.35; }
.bill-preview .bill-meta span{ color:#222; }
.bill-preview .bill-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
@media (max-width: 640px){
  .bill-preview .bill-grid{ grid-template-columns: 1fr; }
  .bill-preview .bill-meta{ text-align:left; }
}
.bill-preview .bill-box{ border:1px solid #111; border-radius: 12px; padding: 10px; }
.bill-preview .bill-box h6{ margin:0 0 8px 0; font-size: 13px; font-weight: 900; }
/* Ensure label/value alignment in print views */
.bill-kv{ display:grid; grid-template-columns: 1fr auto; gap: 3px 12px; }
.bill-kv b{ justify-self: end; text-align: right; white-space: nowrap; }


.bill-preview .bill-kv{ display:grid; grid-template-columns: 1fr auto; gap: 3px 12px; font-size: 13px; }
.bill-preview .bill-kv b{ font-weight: 900; justify-self: end; text-align: right; white-space: nowrap; }
.bill-preview .bill-table{ width:100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
.bill-preview .bill-table th, .bill-preview .bill-table td{ border-bottom: 1px solid #222; padding: 8px 8px; vertical-align: top; }
.bill-preview .bill-table thead th{ border-bottom: 2px solid #111; font-weight: 900; }
.bill-preview .bill-table td.num, .bill-preview .bill-table th.num{ text-align:right; white-space:nowrap; }
.bill-preview .bill-table td.mid, .bill-preview .bill-table th.mid{ text-align:center; }
.bill-preview .bill-totals{ margin-top: 12px; display:flex; justify-content:flex-end; }
.bill-preview .bill-totals .bill-box{ width: 64%; }
@media (max-width: 640px){
  .bill-preview .bill-totals .bill-box{ width:100%; }
}
.bill-preview .bill-totals .bill-kv{ grid-template-columns: 1fr 110px; }
.bill-preview .bill-totals .bill-kv span{ color:#222; }
.bill-preview .bill-totals .bill-kv .grand{ border-top:2px solid #111; margin-top:8px; padding-top:8px; }
.bill-preview .bill-footer{ margin-top: 12px; display:flex; justify-content:space-between; gap: 10px; }
.bill-preview .sign{ flex: 1; border-top: 1px solid #111; text-align:center; padding-top: 8px; font-size: 12px; color:#111; }
.bill-preview .bill-note{ margin-top: 10px; font-size: 12px; color:#111; }

@media print{
  .screen-only{display:none !important}
  .print-only{display:block !important}

  /* A5 print setup */
  /* Browsers can *request* A5 using @page, but some print dialogs may still require
     selecting A5 manually depending on OS/printer/driver. */
  /* NOTE: Avoid transform-based scaling for printing.
     Transforms do not change layout size and can create blank pages / extra sheets in Chrome.
     Use smaller font + tighter spacing instead. */
  .one-page-print{ transform: none !important; }
  .bill-card{ break-inside: avoid; page-break-inside: avoid; }
  .bill-table tr{ break-inside: avoid; page-break-inside: avoid; }

  @page{ size: A5 portrait; margin: 3mm; }

  /* base */
  html, body{ width: 148mm; }
  body{ color:#000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; margin:0 !important; }
  .bill-wrap{ width: 100%; max-width: 148mm; margin: 0 auto; }
  .bill-card{ border: 1px solid #111; border-radius: 8px; padding: 5px; }

  /* header */
  .bill-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding-bottom:6px; border-bottom: 2px solid #111; }
  .bill-brand{ display:flex; align-items:center; gap:10px; }
  .bill-mark{ width:32px; height:32px; border-radius: 10px; border:2px solid #111; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:16px; }
  .bill-mark .bill-logo{width:100%;height:100%;object-fit:contain;padding:2px;}
  .bill-hosp{ font-weight: 900; font-size: 15px; line-height: 1.1; }
  .bill-sub{ font-size: 9px; line-height: 1.18; margin-top: 1px; }
  .bill-hosp-en{ font-weight: 900; }
  .bill-doc{ font-weight: 900; margin-top: 3px; }
  .bill-title{ margin-top:4px; font-size: 10px; font-weight: 900; letter-spacing:.22px; text-transform: uppercase; }

  .bill-meta{ text-align:right; font-size: 9px; }
  .bill-meta div{ line-height: 1.35; }
  .bill-meta span{ color:#222; }

  /* patient/info blocks */
  .bill-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 6px; }
  .bill-box{ border:1px solid #111; border-radius: 8px; padding: 5px; }
  .bill-box h6{ margin:0 0 4px 0; font-size: 9.3px; font-weight: 900; }
  .bill-kv{ display:grid; grid-template-columns: 72px 1fr; gap: 2px 5px; font-size: 9px; }
  .bill-kv b{ font-weight: 900; }

  /* table */
  .bill-table{ width:100%; border-collapse: collapse; margin-top: 6px; font-size: 9px; }
  .bill-table th, .bill-table td{ border-bottom: 1px solid #222; padding: 3px 3px; vertical-align: top; }
  .bill-table thead th{ border-bottom: 2px solid #111; font-weight: 900; }
  .bill-table td.num, .bill-table th.num{ text-align:right; white-space:nowrap; }
  .bill-table td.mid, .bill-table th.mid{ text-align:center; }

  /* totals */
  .bill-totals{ margin-top: 6px; display:flex; justify-content:flex-end; }
  .bill-totals .bill-box{ width: 64%; }
  .bill-totals .bill-kv{ grid-template-columns: 1fr 80px; }
  .bill-totals .bill-kv span{ color:#222; }
  .bill-totals .bill-kv .grand{ border-top:2px solid #111; margin-top:5px; padding-top:5px; }

  /* footer */
  .bill-footer{ margin-top: 6px; display:flex; justify-content:space-between; gap: 6px; }
  .sign{ flex: 1; border-top: 1px solid #111; text-align:center; padding-top: 4px; font-size: 7.8px; }
  .bill-note{ margin-top: 5px; font-size: 7.6px; color:#111; }
}


/* =========================================================
   Bootstrap-like helpers used in Blade templates
   (kept minimal, styled to match the gold theme)
   ========================================================= */

:root{
  --primary: #0d6efd;
  --secondary: #6c757d;
  --success: #198754;
  --warning: #f59f00;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #111827;
}

/* text */
.text-danger{ color: var(--danger) !important; }
.text-success{ color: var(--success) !important; }
.text-secondary{ color: var(--secondary) !important; }
.text-muted{ color: var(--muted) !important; }
.text-nowrap{ white-space: nowrap !important; }
.d-block{ display:block !important; }
.fs-5{ font-size: 1.25rem !important; }
.small{ font-size: .875rem !important; }

/* background */
.bg-light{ background: var(--light) !important; }

/* borders */
.border{ border: 1px solid var(--border) !important; }
.border-warning{ border-color: rgba(245,159,0,.55) !important; }
.border-success{ border-color: rgba(25,135,84,.55) !important; }
.border-danger{ border-color: rgba(220,53,69,.55) !important; }

/* spacing */
.px-3{ padding-left: 1rem !important; padding-right: 1rem !important; }
.py-2{ padding-top: .5rem !important; padding-bottom: .5rem !important; }
.ps-3{ padding-left: 1rem !important; }

/* validation */
.invalid-feedback{
  display:block;
  margin-top: .35rem;
  font-size: .875rem;
  color: var(--danger);
}
.is-invalid{
  border-color: rgba(220,53,69,.7) !important;
  box-shadow: 0 0 0 4px rgba(220,53,69,.12) !important;
}

/* outline buttons */
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-success,
.btn-outline-warning{
  background: transparent;
  border: 1px solid;
  box-shadow: none;
}
.btn-outline-secondary{ border-color: rgba(108,117,125,.45); color: var(--secondary); }
.btn-outline-primary{ border-color: rgba(13,110,253,.45); color: var(--primary); }
.btn-outline-success{ border-color: rgba(25,135,84,.45); color: var(--success); }
.btn-outline-warning{ border-color: rgba(245,159,0,.45); color: var(--warning); }

.btn-outline-secondary:hover{ background: rgba(108,117,125,.08); border-color: rgba(108,117,125,.65); }
.btn-outline-primary:hover{ background: rgba(13,110,253,.08); border-color: rgba(13,110,253,.65); }
.btn-outline-success:hover{ background: rgba(25,135,84,.08); border-color: rgba(25,135,84,.65); }
.btn-outline-warning:hover{ background: rgba(245,159,0,.10); border-color: rgba(245,159,0,.75); }

.btn-outline-secondary:focus{ box-shadow: 0 0 0 4px rgba(108,117,125,.12); }
.btn-outline-primary:focus{ box-shadow: 0 0 0 4px rgba(13,110,253,.12); }
.btn-outline-success:focus{ box-shadow: 0 0 0 4px rgba(25,135,84,.12); }
.btn-outline-warning:focus{ box-shadow: 0 0 0 4px rgba(245,159,0,.12); }

/* radio/checkbox toggle buttons (Bootstrap .btn-check pattern) */
.btn-check{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}
.btn-check:focus + .btn{ box-shadow: 0 0 0 4px rgba(212,175,55,.18); }

.btn-check:checked + .btn-outline-secondary{ background: rgba(108,117,125,.12); border-color: rgba(108,117,125,.85); }
.btn-check:checked + .btn-outline-primary{ background: rgba(13,110,253,.12); border-color: rgba(13,110,253,.85); }
.btn-check:checked + .btn-outline-success{ background: rgba(25,135,84,.12); border-color: rgba(25,135,84,.85); }
.btn-check:checked + .btn-outline-warning{ background: rgba(245,159,0,.14); border-color: rgba(245,159,0,.95); }

/* make tables feel nicer */
.table tbody tr:hover{ background: rgba(17,24,39,.03); }


/* === Golden Theme Upgrade (Bootstrap-compatible helpers) === */

/* Primary brand */
:root{
  --primary: var(--gold);
  --primary-ink: #0b1220;
  --primary-soft: rgba(212,175,55,.18);
  --primary-soft-2: rgba(212,175,55,.10);
}

/* Give cards & headers a subtle gold sheen */
.card, .panel, .gold-card{
  position: relative;
}
.card::before, .gold-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(700px 220px at 15% 0%, rgba(212,175,55,.16), transparent 55%);
  opacity:.9;
}
.card > *{position: relative; z-index:1}

/* Bootstrap-like button aliases */
.btn-primary,
.btn-success,
.btn-warning,
.btn-info{
  --_bg: linear-gradient(180deg, rgba(212,175,55,.98), rgba(184,134,11,.96));
  --_border: rgba(212,175,55,.50);
  --_text: var(--primary-ink);
  background: var(--_bg) !important;
  color: var(--_text) !important;
  border: 1px solid var(--_border) !important;
  box-shadow: 0 12px 24px rgba(212,175,55,.18), 0 3px 10px rgba(2,6,23,.10) !important;
}
.btn-primary:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-info:hover{
  filter: brightness(1.02);
  transform: translateY(-1px);
}
.btn-primary:active,
.btn-success:active,
.btn-warning:active,
.btn-info:active{
  transform: translateY(0);
  filter: brightness(.98);
}
.btn-secondary{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.80)) !important;
  color: var(--text) !important;
  border: 1px solid rgba(226,232,240,.80) !important;
}
.btn-danger{
  background: linear-gradient(180deg, rgba(239,68,68,.96), rgba(220,38,38,.96)) !important;
  border: 1px solid rgba(239,68,68,.55) !important;
  color: #fff !important;
}
.btn-outline-primary{
  background: transparent !important;
  border: 1px solid rgba(212,175,55,.55) !important;
  color: var(--gold) !important;
}
.btn-outline-primary:hover{
  background: rgba(212,175,55,.12) !important;
}

/* Link-style buttons seen in some pages */
.btn-link{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: var(--gold) !important;
}

/* Bootstrap table aliases */
.table{
  width:100%;
  border-collapse: separate;
  border-spacing:0;
  background: var(--surface);
  border: 1px solid rgba(226,232,240,.75);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(2,6,23,.06);
}
.table thead th{
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color: #1a1400;
  border-bottom: 1px solid rgba(138,106,0,.22);
  padding: 12px 12px;
  font-weight: 700;
}
.table td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(226,232,240,.75);
}
.table tbody tr:hover td{ background: rgba(212,175,55,.06); }
.table-striped tbody tr:nth-child(odd) td{ background: rgba(15,23,42,.02); }
.table-bordered td, .table-bordered th{ border-right:1px solid rgba(226,232,240,.75); }
.table-bordered tr td:last-child, .table-bordered tr th:last-child{ border-right:none; }

/* Badges */
.badge, .badge.bg-primary, .badge.bg-success, .badge.bg-warning, .badge.bg-info{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  border: 1px solid rgba(212,175,55,.28);
  background: rgba(212,175,55,.12);
  color: rgba(11,18,32,.92);
}
.badge.bg-danger{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.12);
  color: rgba(127,29,29,.95);
}

/* Form controls */
.form-control, .form-select, select.form-control, input.form-control{
  border: 1px solid rgba(226,232,240,.85);
}
.form-control:focus, .form-select:focus{
  border-color: rgba(212,175,55,.65);
  box-shadow: 0 0 0 4px rgba(212,175,55,.18);
}

/* KPI / stat boxes (support for legacy markup) */
.stat-box, .small-stat, .info-box, .small-box{
  border-radius: 18px;
  border: 1px solid rgba(212,175,55,.28);
  background:
    radial-gradient(700px 240px at 20% 0%, rgba(212,175,55,.20), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
  box-shadow: 0 16px 32px rgba(212,175,55,.10), 0 6px 14px rgba(2,6,23,.08);
}


/* Finance report tables: full layout */
.report-table { width: 100%; }
.report-table .table { width: 100%; margin-bottom: 0; border-radius: 16px; overflow: hidden; }
.report-table thead th { background: linear-gradient(90deg, rgba(214,180,70,0.95), rgba(230,194,91,0.95)); color: #111; border-bottom: 1px solid rgba(0,0,0,0.08); }
.report-table tbody td { vertical-align: middle; }
.report-table tbody tr:hover { background: rgba(0,0,0,0.03); }
.report-table .btn { border-radius: 12px; }




@media print{
  .bill-totals{ display:block !important; }
  .bill-box{ width:100% !important; }
  .bill-kv{ width:100% !important; grid-template-columns: 1fr max-content !important; column-gap: 18px !important; row-gap: 3px !important; }
  .bill-kv span{ min-width:0 !important; }
  .bill-kv b{ justify-self:end !important; text-align:right !important; white-space:nowrap !important; }
}