/* ═══════════════════════════════════════════════
   DannySat POS GHANA — MAIN STYLESHEET
═══════════════════════════════════════════════ */
:root {
  --bg:        #06101E;
  --bg-2:      #0D1829;
  --bg-3:      #111F35;
  --bg-4:      #172540;
  --border:    rgba(255,255,255,0.07);
  --border-2:  rgba(255,255,255,0.12);
  --em:        #00D4A0;
  --em-2:      #00B085;
  --em-dim:    rgba(0,212,160,0.12);
  --em-border: rgba(0,212,160,0.25);
  --gold:      #E8C06A;
  --text:      #E8ECF4;
  --text-2:    #8898A4;
  --text-3:    rgba(232,236,244,0.35);
  --danger:    #EF4444;
  --warning:   #F59E0B;
  --info:      #3B82F6;
  --purple:    #8B5CF6;
  --sidebar-w: 240px;
  --header-h:  64px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  22px;
}

/* LIGHT THEME */
[data-theme="light"] {
  --bg:        #F5F7FA;
  --bg-2:      #FFFFFF;
  --bg-3:      #F0F3F8;
  --bg-4:      #E8ECEF;
  --border:    rgba(0,0,0,0.08);
  --border-2:  rgba(0,0,0,0.12);
  --em:        #00D4A0;
  --em-2:      #00B085;
  --em-dim:    rgba(0,212,160,0.10);
  --em-border: rgba(0,212,160,0.20);
  --gold:      #D4A02E;
  --text:      #1F2937;
  --text-2:    #6B7280;
  --text-3:    rgba(31,41,55,0.40);
  --danger:    #EF4444;
  --warning:   #F59E0B;
  --info:      #3B82F6;
  --purple:    #8B5CF6;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:15px;scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;line-height:1.5}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:inherit}
::selection{background:var(--em);color:var(--bg)}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}

[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1)}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.2)}

/* ── APP WRAPPER ── */
.app-wrapper{display:flex;min-height:100vh}

/* ════════════════════════════════════════
   SIDEBAR
════════════════════════════════════════ */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:var(--bg-2);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;z-index:500;
  transition:transform .3s cubic-bezier(.17,.67,.45,1);
}
.sidebar-header{padding:20px 20px 0;display:flex;align-items:center;justify-content:space-between}
.sidebar-logo{display:flex;align-items:center;gap:10px}
.logo-icon{width:36px;height:36px;background:linear-gradient(135deg,var(--em),var(--em-2));border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;box-shadow:0 4px 16px rgba(0,212,160,.35);flex-shrink:0}
.logo-text{font-size:20px;font-weight:900;letter-spacing:.03em;color:var(--text)}
.logo-text span{color:var(--em)}
.sidebar-close{display:none;background:none;border:none;color:var(--text-2);font-size:18px;padding:4px}

.pharmacy-badge{margin:14px 16px 0;padding:10px 12px;background:var(--em-dim);border:1px solid var(--em-border);border-radius:var(--r-md);display:flex;align-items:center;gap:9px}
.pb-icon{font-size:18px}
.pb-name{font-size:12px;font-weight:700;color:var(--text);line-height:1.2}
.pb-branch{font-size:10.5px;color:var(--text-2)}

.sidebar-nav{flex:1;padding:16px 10px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-md);color:var(--text-2);font-size:13.5px;font-weight:500;transition:all .2s}
.nav-item:hover{background:rgba(255,255,255,.05);color:var(--text)}
.nav-item.active{background:var(--em-dim);color:var(--em);border:1px solid var(--em-border)}
.nav-icon{font-size:16px;flex-shrink:0;width:20px;text-align:center}
.nav-label{}

.sidebar-footer{padding:12px 10px;border-top:1px solid var(--border)}
.user-pill{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-md);transition:background .2s;flex:1}
.user-pill:hover{background:rgba(255,255,255,.05)}
.up-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--em),var(--em-2));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#06101E;flex-shrink:0}
.up-name{font-size:12.5px;font-weight:600;color:var(--text);line-height:1.2}
.up-role{font-size:10.5px;color:var(--text-2)}
.logout-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);background:none;border:1px solid var(--border);color:var(--text-2);font-size:16px;transition:all .2s;flex-shrink:0}
.logout-btn:hover{border-color:var(--danger);color:var(--danger);background:rgba(239,68,68,.1)}
.sidebar-footer{display:flex;align-items:center;gap:6px;padding:12px}

/* Overlay */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:499}

/* ════════════════════════════════════════
   MAIN AREA
════════════════════════════════════════ */
.main-area{flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;min-height:100vh;transition:margin-left .3s}

/* ════════════════════════════════════════
   HEADER
════════════════════════════════════════ */
.app-header{
  height:var(--header-h);padding:0 24px;
  background:var(--bg-2);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:400;
}
.header-left{display:flex;align-items:center;gap:14px}
.menu-toggle{display:none;background:none;border:none;color:var(--text-2);font-size:20px;padding:4px;width:36px;height:36px}
.page-title{font-size:16px;font-weight:700;color:var(--text)}
.header-right{display:flex;align-items:center;gap:12px}
.header-user{display:flex;align-items:center;gap:8px}
.header-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--em),var(--em-2));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#06101E}
.header-name{font-size:13px;font-weight:600;color:var(--text)}
.theme-toggle-btn{background:none;border:1px solid var(--border);border-radius:var(--r-md);width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--text-2);transition:all .2s;cursor:pointer}
.theme-toggle-btn:hover{border-color:var(--em);color:var(--em)}

/* Notifications */
.notif-wrap{position:relative}
.notif-btn{background:none;border:1px solid var(--border);border-radius:var(--r-md);width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--text-2);position:relative;transition:all .2s}
.notif-btn:hover{border-color:var(--em);color:var(--em)}
.notif-badge{position:absolute;top:-5px;right:-5px;background:var(--danger);color:#fff;font-size:9px;font-weight:700;border-radius:10px;padding:1px 5px;min-width:16px;text-align:center}
.notif-dropdown{position:absolute;right:0;top:44px;width:320px;background:var(--bg-3);border:1px solid var(--border-2);border-radius:var(--r-lg);box-shadow:0 20px 50px rgba(0,0,0,.5);display:none;z-index:600}
.notif-dropdown.open{display:block}
.notif-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border);font-size:13px;font-weight:700}
.mark-read-btn{font-size:11px;color:var(--em);background:none;border:none;cursor:pointer}
.notif-list{max-height:320px;overflow-y:auto}
.notif-item{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;gap:10px;cursor:pointer;transition:background .2s}
.notif-item:hover{background:rgba(255,255,255,.03)}
.notif-item.unread{background:rgba(0,212,160,.04)}
.ni-icon{font-size:18px;flex-shrink:0;margin-top:1px}
.ni-title{font-size:12.5px;font-weight:600;color:var(--text);margin-bottom:2px}
.ni-msg{font-size:11.5px;color:var(--text-2);line-height:1.4}
.ni-time{font-size:10px;color:var(--text-3);margin-top:3px}
.notif-loading{padding:20px;text-align:center;color:var(--text-2);font-size:13px}

/* ════════════════════════════════════════
   PAGE CONTENT
════════════════════════════════════════ */
.page-content{flex:1;padding:24px;overflow-x:hidden}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:16px}
.page-heading{font-size:20px;font-weight:800;color:var(--text)}

/* ════════════════════════════════════════
   CARDS
════════════════════════════════════════ */
.card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.card-sm .card-body{padding:14px 18px}
.card-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.card-title{font-size:14px;font-weight:700;color:var(--text)}
.card-badge{font-size:11px;background:var(--em-dim);color:var(--em);border:1px solid var(--em-border);padding:3px 10px;border-radius:100px}
.card-link{font-size:12.5px;color:var(--em);transition:opacity .2s}
.card-link:hover{opacity:.7}
.card-body{padding:20px}
.card-body.p-0{padding:0}

/* ════════════════════════════════════════
   STATS
════════════════════════════════════════ */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stats-grid-3{grid-template-columns:repeat(3,1fr)}
.stat-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;display:flex;align-items:center;gap:16px;transition:border-color .2s}
.stat-card:hover{border-color:var(--border-2)}
.stat-icon{width:46px;height:46px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.stat-label{font-size:12px;color:var(--text-2);margin-bottom:3px;font-weight:500}
.stat-value{font-size:22px;font-weight:800;color:var(--text);line-height:1}
.stat-sub{font-size:11.5px;color:var(--text-2);margin-top:3px}
.stat-change{font-size:11.5px;margin-top:3px;font-weight:600}
.stat-change.up{color:var(--em)}
.stat-change.down{color:var(--danger)}

/* ════════════════════════════════════════
   LAYOUT HELPERS
════════════════════════════════════════ */
.row-2-col{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;margin-bottom:24px}
.grid-2-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.col-span-2{grid-column:span 2}
.divider{border:none;border-top:1px solid var(--border);margin:20px 0}

/* ════════════════════════════════════════
   TABLES
════════════════════════════════════════ */
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{padding:11px 16px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);border-bottom:1px solid var(--border);white-space:nowrap;background:rgba(255,255,255,.02)}
.table td{padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:none}
.table-hover tbody tr:hover{background:rgba(255,255,255,.025)}
.table-footer{padding:12px 16px;border-top:1px solid var(--border);font-size:12px;color:var(--text-2)}
.row-warning td{background:rgba(245,158,11,.04)}
.text-right{text-align:right}
.text-center{text-align:center}
.text-muted{color:var(--text-2)}
.text-xs{font-size:11px}
.text-sm{font-size:12.5px}
.fw-bold,.fw-600{font-weight:600}
.mono{font-family:monospace;font-size:12px}

/* ════════════════════════════════════════
   BADGES & TAGS
════════════════════════════════════════ */
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:100px;font-size:11px;font-weight:700;white-space:nowrap}
.badge-success{background:rgba(0,212,160,.12);color:var(--em);border:1px solid rgba(0,212,160,.2)}
.badge-danger{background:rgba(239,68,68,.12);color:var(--danger);border:1px solid rgba(239,68,68,.2)}
.badge-warning{background:rgba(245,158,11,.12);color:var(--warning);border:1px solid rgba(245,158,11,.2)}
.badge-info{background:rgba(59,130,246,.12);color:var(--info);border:1px solid rgba(59,130,246,.2)}
.tag{display:inline-flex;padding:3px 9px;border-radius:6px;font-size:11.5px;font-weight:600;background:rgba(255,255,255,.06);color:var(--text-2)}

/* ════════════════════════════════════════
   BUTTONS
════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 18px;border-radius:var(--r-md);font-size:13.5px;font-weight:700;border:none;transition:all .2s;cursor:pointer;letter-spacing:.01em;white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--em),var(--em-2));color:#06101E;box-shadow:0 4px 14px rgba(0,212,160,.3)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,212,160,.4)}
.btn-ghost{background:transparent;color:var(--text-2);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--border-2);color:var(--text)}
.btn-danger{background:rgba(239,68,68,.15);color:var(--danger);border:1px solid rgba(239,68,68,.2)}
.btn-danger:hover{background:rgba(239,68,68,.25)}
.btn-warning{background:rgba(245,158,11,.15);color:var(--warning);border:1px solid rgba(245,158,11,.2)}
.btn-success{background:rgba(0,212,160,.15);color:var(--em);border:1px solid rgba(0,212,160,.2)}
.btn-sm{padding:6px 13px;font-size:12px}
.btn-lg{padding:13px 24px;font-size:15px}
.btn-xs{padding:4px 10px;font-size:11px}
.btn-full{width:100%}
.btn-group{display:flex;gap:8px;flex-wrap:wrap}

/* ════════════════════════════════════════
   FORMS
════════════════════════════════════════ */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-2);margin-bottom:6px}
.form-label.required::after{content:' *';color:var(--danger)}
.form-input{width:100%;padding:10px 14px;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text);font-size:14px;transition:border-color .2s}
.form-input:focus{outline:none;border-color:var(--em);box-shadow:0 0 0 3px rgba(0,212,160,.1)}
.form-input::placeholder{color:var(--text-3)}
.form-input:disabled{opacity:.5;cursor:not-allowed}
.form-input-sm{padding:7px 11px;font-size:13px}
.form-hint{font-size:11px;color:var(--text-3);margin-top:4px}
.form-section{margin-bottom:28px}
.form-section-title{font-size:13px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.07em;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.form-actions{display:flex;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}
.filter-row{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;padding:14px 20px}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.form-group-inline{display:flex;align-items:center;gap:8px}
.inline-input{width:64px;padding:3px 7px;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-size:12px}
.inline-input:focus{outline:none;border-color:var(--em)}

/* Toggle switch */
.toggle-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;font-weight:500;color:var(--text)}
input[type=checkbox]{display:none}
.toggle-switch{width:42px;height:24px;background:var(--bg-4);border:1px solid var(--border);border-radius:100px;position:relative;flex-shrink:0;transition:background .2s}
.toggle-switch::after{content:'';width:18px;height:18px;background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:transform .2s}
input[type=checkbox]:checked+.toggle-switch{background:var(--em);border-color:var(--em)}
input[type=checkbox]:checked+.toggle-switch::after{transform:translateX(18px)}

/* ════════════════════════════════════════
   FLASH MESSAGES
════════════════════════════════════════ */
.flash{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r-md);margin-bottom:16px;font-size:13.5px;position:relative}
.flash-icon{font-size:16px;flex-shrink:0}
.flash-close{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:inherit;font-size:18px;opacity:.5;cursor:pointer;padding:0 4px}
.flash-close:hover{opacity:1}

/* ════════════════════════════════════════
   MODALS
════════════════════════════════════════ */
.modal{position:fixed;inset:0;z-index:800;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.modal-box{background:var(--bg-2);border:1px solid var(--border-2);border-radius:var(--r-xl);width:100%;max-width:560px;position:relative;z-index:1;max-height:90vh;overflow-y:auto;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--border)}
.modal-header h3{font-size:16px;font-weight:800}
.modal-close{background:none;border:none;color:var(--text-2);font-size:18px;cursor:pointer;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s}
.modal-close:hover{background:rgba(239,68,68,.1);color:var(--danger)}
.modal-body{padding:24px}

/* ════════════════════════════════════════
   TABS
════════════════════════════════════════ */
.tab-nav{display:flex;gap:4px;margin-bottom:20px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);padding:6px;width:fit-content;flex-wrap:wrap}
.tab-btn{padding:8px 16px;border-radius:var(--r-md);border:none;background:transparent;color:var(--text-2);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{background:var(--em-dim);color:var(--em);border:1px solid var(--em-border)}
.tab-content{display:block}

/* ════════════════════════════════════════
   POS
════════════════════════════════════════ */
.pos-layout{display:grid;grid-template-columns:1fr 460px;gap:0;height:calc(100vh - var(--header-h));margin:-24px;overflow:hidden}
.pos-layout.cart-expanded{grid-template-columns:1fr 720px}

.pos-layout.cart-expanded .cart-items{max-height:calc(100vh - 140px)}
.pos-left{display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--border)}
.pos-search-wrap{padding:14px 16px;border-bottom:1px solid var(--border);background:var(--bg-2)}
.pos-search{width:100%;padding:11px 16px;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text);font-size:14px}
.pos-search:focus{outline:none;border-color:var(--em)}
.product-grid{flex:1;overflow-y:auto;padding:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;align-content:start}
.pos-empty,.pos-loading{grid-column:1/-1;padding:40px 20px;text-align:center;color:var(--text-2);font-size:14px}
.product-tile{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.product-tile:hover{border-color:var(--em);background:rgba(0,212,160,.04);transform:translateY(-1px)}
.product-tile.out-of-stock{opacity:.45;cursor:not-allowed}
.pt-name{font-size:13px;font-weight:700;color:var(--text);margin-bottom:3px;line-height:1.3}
.pt-generic{font-size:11px;color:var(--text-2);margin-bottom:10px}
.pt-bottom{display:flex;align-items:center;justify-content:space-between}
.pt-price{font-size:14px;font-weight:800;color:var(--em)}
.pt-stock{font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:100px}
.stock-ok{background:rgba(0,212,160,.12);color:var(--em)}
.stock-low{background:rgba(245,158,11,.12);color:var(--warning)}
.stock-out{background:rgba(239,68,68,.12);color:var(--danger)}
.nhis-tag{position:absolute;top:8px;right:8px;background:rgba(59,130,246,.15);color:var(--info);font-size:9px;font-weight:800;padding:2px 6px;border-radius:4px}

.pos-right{background:var(--bg-2);display:flex;flex-direction:column;overflow:hidden}
.cart-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.cart-title{font-size:15px;font-weight:800}
.cart-customer{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
.cart-items{flex:1;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:6px;max-height:calc(100vh - 360px)}
.cart-empty{padding:24px;text-align:center;color:var(--text-2);font-size:13px}
.cart-item{background:var(--bg-3);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 12px}
.ci-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.ci-name{font-size:13px;font-weight:600;flex:1;line-height:1.3}
.ci-remove{background:none;border:none;color:var(--text-3);font-size:14px;cursor:pointer;padding:0 2px;transition:color .2s}
.ci-remove:hover{color:var(--danger)}
.ci-controls{display:flex;align-items:center;gap:6px}
.ci-qty-btn{width:26px;height:26px;background:var(--bg-4);border:1px solid var(--border);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;color:var(--text);transition:all .2s;flex-shrink:0}
.ci-qty-btn:hover{border-color:var(--em);color:var(--em)}
.ci-qty-input{width:44px;height:26px;background:var(--bg-3);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;text-align:center;padding:0 4px}
.ci-qty-input:focus{outline:none;border-color:var(--em)}
.ci-unit{font-size:11px;color:var(--text-2);flex-shrink:0}
.nhis-label{display:flex;align-items:center;gap:4px;font-size:10.5px;color:var(--info);cursor:pointer;margin-left:4px}
.nhis-label input[type=checkbox]{display:inline-block;width:auto;accent-color:var(--info)}
.ci-price{margin-left:auto;font-size:13px;font-weight:700;color:var(--em);flex-shrink:0}

.cart-totals{padding:12px 16px;border-top:1px solid var(--border);background:var(--bg-3)}
.total-row{display:flex;justify-content:space-between;font-size:13.5px;padding:4px 0;color:var(--text-2)}
.total-row:last-child{color:var(--text)}
.total-grand{font-size:18px;font-weight:800;color:var(--em);padding-top:8px;margin-top:4px;border-top:1px solid var(--border)}

.payment-section{padding:12px 16px;border-top:1px solid var(--border)}
.pay-methods{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.pay-btn{padding:8px 4px;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text-2);font-size:11px;font-weight:700;cursor:pointer;transition:all .2s}
.pay-btn:hover{border-color:var(--em);color:var(--em)}
.pay-btn.active{background:var(--em-dim);border-color:var(--em-border);color:var(--em)}

/* ════════════════════════════════════════
   RECEIPT
════════════════════════════════════════ */
.receipt-page{max-width:480px;margin:0 auto}
.receipt-card{background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 4px 30px rgba(0,0,0,.3)}
.receipt-box{background:#fff;max-width:440px;border-radius:var(--r-lg);overflow:hidden}
.receipt-inner{padding:24px;font-family:'Courier New',monospace;font-size:13px;color:#111}
.receipt-header{text-align:center;margin-bottom:14px}
.rh-pharmacy{font-size:16px;font-weight:900;margin-bottom:4px}
.rh-address,.rh-phone{font-size:12px;color:#555}
.rh-divider{margin:8px 0;color:#999;font-size:12px}
.rh-title{font-size:14px;font-weight:700;letter-spacing:.1em}
.receipt-meta{margin-bottom:10px;font-size:12px;line-height:1.9}
.receipt-divider{margin:8px 0;color:#ccc;font-size:12px}
.receipt-items{width:100%;border-collapse:collapse;margin-bottom:10px;font-size:12px}
.receipt-items th{text-align:left;padding:3px 0;border-bottom:1px dashed #ccc;font-weight:700;font-size:11px}
.receipt-items td{padding:3px 0;vertical-align:top}
.receipt-items td:nth-child(2),.receipt-items td:nth-child(3),.receipt-items td:nth-child(4),.receipt-items th:nth-child(2),.receipt-items th:nth-child(3),.receipt-items th:nth-child(4){text-align:right}
.receipt-totals{margin-top:8px}
.rt-row{display:flex;justify-content:space-between;font-size:12px;padding:3px 0}
.rt-total{font-size:15px;font-weight:900;border-top:1px solid #111;border-bottom:1px solid #111;padding:5px 0;margin:5px 0}
.receipt-footer{text-align:center;margin-top:16px;font-size:11px;color:#777;line-height:1.6}
.receipt-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ════════════════════════════════════════
   DASHBOARD EXTRAS
════════════════════════════════════════ */
.top-product-row{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--border)}
.top-product-row:last-child{border-bottom:none}
.tp-rank{width:22px;height:22px;border-radius:50%;background:var(--em-dim);color:var(--em);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tp-info{flex:1;min-width:0}
.tp-name{font-size:13px;font-weight:600;margin-bottom:4px}
.tp-bar-wrap{height:5px;background:var(--bg-4);border-radius:100px;overflow:hidden}
.tp-bar{height:100%;background:linear-gradient(to right,var(--em),var(--em-2));border-radius:100px}
.tp-stats{text-align:right;flex-shrink:0}
.tp-qty{font-size:12px;color:var(--text-2)}
.tp-rev{font-size:13px;font-weight:700;color:var(--em)}

/* ════════════════════════════════════════
   BRANCHES GRID
════════════════════════════════════════ */
.branches-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.branch-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-xl);padding:24px;transition:all .2s;position:relative}
.branch-card:hover{border-color:var(--border-2);box-shadow:0 8px 30px rgba(0,0,0,.3)}
.branch-main{border-color:var(--em-border);background:rgba(0,212,160,.03)}
.branch-main-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--em),var(--em-2));color:#06101E;font-size:10px;font-weight:800;padding:3px 12px;border-radius:100px;white-space:nowrap}
.branch-icon{font-size:32px;margin-bottom:12px}
.branch-name{font-size:16px;font-weight:800;margin-bottom:8px}
.branch-meta{font-size:12.5px;color:var(--text-2);line-height:1.9;margin-bottom:12px}
.branch-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.bs-item{background:var(--bg-3);border-radius:var(--r-md);padding:8px 12px;text-align:center}
.bs-val{font-size:15px;font-weight:800;color:var(--em)}
.bs-lbl{font-size:10.5px;color:var(--text-2)}

/* ════════════════════════════════════════
   MISC
════════════════════════════════════════ */
.info-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:13.5px}
.info-row:last-child{border-bottom:none}
.info-label{color:var(--text-2);font-weight:600}
.empty-state{padding:40px 24px;text-align:center;color:var(--text-2);font-size:14px}
.empty-state a{color:var(--em)}
.link{color:var(--em);font-weight:600}
.link:hover{text-decoration:underline}
.user-cell{display:flex;align-items:center;gap:9px}
.user-avatar-sm{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--em),var(--em-2));display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#06101E;flex-shrink:0}
.action-btns{display:flex;gap:5px}

/* ════════════════════════════════════════
   AUTH PAGE
════════════════════════════════════════ */
.auth-body{background:var(--bg)}
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative}
.auth-bg{position:fixed;inset:0;pointer-events:none}
.auth-glow-1{position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(0,212,160,.09) 0%,transparent 65%);top:-200px;left:-200px}
.auth-glow-2{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(232,192,106,.06) 0%,transparent 65%);bottom:-100px;right:-100px}
.auth-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,212,160,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,160,.025) 1px,transparent 1px);background-size:54px 54px}
.auth-card{background:var(--bg-2);border:1px solid var(--border-2);border-radius:var(--r-xl);padding:40px;width:100%;max-width:420px;position:relative;z-index:2;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.auth-logo{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.auth-logo-icon{width:44px;height:44px;background:linear-gradient(135deg,var(--em),var(--em-2));border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 5px 20px rgba(0,212,160,.4)}
.auth-logo-text{font-size:28px;font-weight:900;letter-spacing:.03em;color:var(--text)}
.auth-logo-text span{color:var(--em)}
.auth-tagline{font-size:13px;color:var(--text-2);margin-bottom:28px}
.auth-form{}
.input-wrap{position:relative}
.input-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:15px;pointer-events:none}
.input-wrap .form-input{padding-left:38px}
.pass-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:15px}
.auth-hint{margin-top:20px;padding:14px;background:var(--bg-3);border-radius:var(--r-md);font-size:12px;color:var(--text-2)}
.auth-hint p{margin-bottom:8px}
.hint-grid{display:flex;gap:6px;flex-wrap:wrap}
.hint-chip{padding:4px 10px;background:var(--em-dim);color:var(--em);border:1px solid var(--em-border);border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;transition:all .2s}
.hint-chip:hover{background:var(--em);color:#06101E}
.auth-footer{text-align:center;margin-top:20px;font-size:12px;color:var(--text-3)}

/* ════════════════════════════════════════
   PRINT
════════════════════════════════════════ */
@page { size: auto; margin: 6mm; }
@media print {
   /* Page setup for receipt printing */
   @page { size: A4 portrait; margin: 6mm; }

   /* Hide UI elements */
   .sidebar, .app-header, .no-print, .sidebar-overlay { display: none !important; }
   .main-area { margin-left: 0 !important; }

   /* Page and body setup */
   html, body { 
     height: auto !important;
     margin: 0 !important;
     padding: 0 !important;
     background: #fff !important;
   }

   /* Receipt styling */
   .receipt-page, .receipt-card, .receipt-inner {
     max-width: 480px !important;
     margin: 0 auto !important;
     page-break-inside: avoid !important;
     background: #fff !important;
     color: #000 !important;
     box-shadow: none !important;
   }

   /* Receipt content */
   .receipt-header, .receipt-meta, .receipt-items, .receipt-totals, .receipt-footer {
     page-break-inside: avoid !important;
     background: #fff !important;
     color: #000 !important;
   }

   /* Table styling */
   .receipt-items table {
     width: 100% !important;
     border-collapse: collapse !important;
     background: #fff !important;
     color: #000 !important;
   }

   .receipt-items th, .receipt-items td {
     background: #fff !important;
     color: #000 !important;
     border: none !important;
   }

   /* Text styling */
   .rh-pharmacy, .rh-address, .rh-phone, .rh-title, .rh-divider,
   .rt-row, .receipt-meta div, .receipt-footer {
     color: #000 !important;
     background: #fff !important;
   }

   /* Ensure color accuracy */
   * { 
     -webkit-print-color-adjust: exact !important;
     print-color-adjust: exact !important;
   }
}

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width:1100px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .row-2-col{grid-template-columns:1fr}
  .pos-layout{grid-template-columns:1fr 340px}
}
@media (max-width:900px){
  :root{--sidebar-w:240px}
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .sidebar-close{display:flex}
  .sidebar-overlay.open{display:block}
  .main-area{margin-left:0}
  .menu-toggle{display:flex}
  .header-name{display:none}
  .pos-layout{grid-template-columns:1fr;grid-template-rows:1fr auto;height:auto;margin:0}
  .pos-left{height:400px}
  .pos-right{max-height:none}
}
@media (max-width:640px){
  .stats-grid{grid-template-columns:1fr 1fr}
  .grid-2-col,.grid-3-col{grid-template-columns:1fr}
  .col-span-2{grid-column:span 1}
  .branches-grid{grid-template-columns:1fr}
  .pay-methods{grid-template-columns:repeat(2,1fr)}
  .tab-nav{width:100%;justify-content:flex-start;overflow-x:auto}
  .page-content{padding:16px}
  .modal-box{max-width:100%;margin:0;border-radius:var(--r-lg) var(--r-lg) 0 0;position:fixed;bottom:0;left:0;right:0;max-height:92vh}
}