/* ════════════════════════════════════════════════════════
   Haidari Integrated Library Management System
   Professional Edition — Stylesheet
   ════════════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --sidebar:#1a2744; --sidebar-hover:rgba(255,255,255,0.08); --sidebar-active:#2563eb;
  --blue:#2563eb; --blue-d:#1d4ed8; --blue-light:#eff6ff;
  --green:#16a34a; --green-light:#f0fdf4;
  --red:#dc2626; --red-light:#fef2f2;
  --orange:#ea580c; --orange-light:#fff7ed;
  --purple:#7c3aed; --purple-light:#f5f3ff;
  --teal:#0d9488; --teal-light:#f0fdfa;
  --gray-50:#f8fafc; --gray-100:#f1f5f9; --gray-200:#e2e8f0; --gray-300:#cbd5e1;
  --gray-400:#94a3b8; --gray-500:#64748b; --gray-600:#475569; --gray-700:#334155;
  --gray-800:#1e293b; --gray-900:#0f172a; --white:#fff;
  --shadow:0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:0 4px 12px rgba(0,0,0,0.08); --shadow-lg:0 12px 32px rgba(0,0,0,0.14);
  --r:8px; --rl:12px;
}
@font-face{font-family:'Rabar';src:url('fonts/Rabar_021 (1).ttf') format('truetype');font-weight:normal;font-style:normal;font-display:swap;}
html{zoom:1.15;}
html,body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}
html[lang="ckb"] body,html[lang="ar"] body{font-family:'Rabar','Segoe UI',Tahoma,sans-serif;}
html[lang="en"] body{font-family:'Poppins','Segoe UI',sans-serif;}
body{background:var(--gray-50);color:var(--gray-800);font-size:14px;line-height:1.5;overflow:hidden;}

/* ─── LOGIN ─── */
#login{position:fixed;inset:0;z-index:2000;background:linear-gradient(135deg,#1a2744 0%,#0f172a 100%);display:flex;align-items:center;justify-content:center;}
.login-card{background:var(--white);border-radius:18px;padding:38px 36px;width:380px;box-shadow:var(--shadow-lg);}
.login-logo{display:flex;flex-direction:column;align-items:center;margin-bottom:24px;}
.login-logo .ll-icon{width:64px;height:64px;background:var(--blue-light);border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--blue);margin-bottom:14px;}
.login-logo .ll-icon svg{width:32px;height:32px;}
.login-logo h1{font-size:19px;font-weight:800;color:var(--gray-900);text-align:center;}
.login-logo p{font-size:11px;color:var(--gray-400);margin-top:2px;}
.login-card .fg{margin-bottom:14px;}
.login-card label{display:block;font-size:12px;font-weight:600;color:var(--gray-600);margin-bottom:5px;}
.login-card input{width:100%;border:1px solid var(--gray-300);border-radius:9px;padding:10px 12px;font-size:13px;outline:none;}
.login-card input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,0.12);}
.login-btn{width:100%;padding:11px;background:var(--blue);color:#fff;border:none;border-radius:9px;font-size:14px;font-weight:700;cursor:pointer;margin-top:6px;}
.login-btn:hover{background:var(--blue-d);}
.login-err{background:var(--red-light);color:var(--red);font-size:12px;padding:9px 12px;border-radius:8px;margin-bottom:12px;display:none;}
.login-hint{text-align:center;font-size:11px;color:var(--gray-400);margin-top:16px;}

/* ─── LAYOUT ─── */
.app{display:flex;height:100vh;}
.app.hidden{display:none;}
.sidebar{width:232px;flex-shrink:0;background:var(--sidebar);display:flex;flex-direction:column;overflow-y:auto;}
.main{flex:1;display:flex;flex-direction:column;min-width:0;}
.content{flex:1;overflow-y:auto;padding:24px;}

/* ─── SIDEBAR ─── */
.s-logo{padding:18px 16px;border-bottom:1px solid rgba(255,255,255,0.07);display:flex;align-items:center;gap:12px;}
.s-logo-icon{width:42px;height:42px;background:rgba(255,255,255,0.12);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;}
.s-logo-icon svg{width:22px;height:22px;}
.s-logo h2{color:#fff;font-size:13px;font-weight:700;line-height:1.3;}
.s-logo p{color:rgba(255,255,255,0.45);font-size:10px;margin-top:1px;}
.s-nav{flex:1;padding:10px 8px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;color:rgba(255,255,255,0.65);cursor:pointer;border-radius:7px;margin-bottom:2px;transition:all .15s;font-size:13px;}
.nav-item:hover{background:var(--sidebar-hover);color:#fff;}
.nav-item.active{background:var(--sidebar-active);color:#fff;}
.nav-item .ni{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.nav-item .ni svg{width:18px;height:18px;}
.nav-item .ne{flex:1;font-weight:500;}
.nav-item .nf{font-size:10px;color:rgba(255,255,255,0.35);margin-inline-start:auto;}
.nav-item.active .nf{color:rgba(255,255,255,0.6);}
.s-footer{padding:12px;border-top:1px solid rgba(255,255,255,0.07);}
.s-stats{background:rgba(255,255,255,0.07);border-radius:10px;padding:12px;margin-bottom:10px;}
.s-stats .sl{font-size:10px;color:rgba(255,255,255,0.4);margin-bottom:1px;}
.s-stats .sv{font-size:18px;font-weight:700;color:#fff;margin-bottom:8px;}
.s-stats .sv:last-child{margin-bottom:0;}
.logout-btn{width:100%;display:flex;align-items:center;gap:8px;padding:9px 10px;background:rgba(255,255,255,0.06);border:none;border-radius:8px;color:rgba(255,255,255,0.7);font-size:13px;cursor:pointer;}
.logout-btn:hover{background:rgba(220,38,38,0.2);color:#fff;}
.logout-btn svg{width:16px;height:16px;flex-shrink:0;}

/* ─── HEADER ─── */
.header{height:54px;background:var(--white);border-bottom:1px solid var(--gray-200);padding:0 24px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:16px;}
.h-title h1{font-size:18px;font-weight:700;color:var(--gray-900);display:flex;align-items:baseline;gap:8px;}
.h-title h1 span{font-size:12px;font-weight:400;color:var(--gray-400);}
.h-right{display:flex;align-items:center;gap:12px;}
.h-search{display:flex;align-items:center;gap:8px;background:var(--gray-100);border-radius:8px;padding:7px 12px;width:240px;}
.h-search svg{width:14px;height:14px;color:var(--gray-400);flex-shrink:0;}
.h-search input{border:none;background:none;outline:none;font-size:13px;color:var(--gray-700);width:100%;}
.h-search input::placeholder{color:var(--gray-400);}
.h-icon-btn{position:relative;background:none;border:1px solid var(--gray-200);border-radius:7px;cursor:pointer;color:var(--gray-500);padding:6px 8px;display:inline-flex;align-items:center;justify-content:center;}
.h-icon-btn svg{width:16px;height:16px;}
.h-badge{position:absolute;top:-5px;inset-inline-end:-5px;background:var(--red);color:#fff;font-size:9px;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;}
.lang-btn{border:1px solid var(--gray-200);border-radius:7px;padding:5px 10px;font-size:12px;color:var(--gray-600);background:none;cursor:pointer;}
.lang-btn.active{background:var(--blue);border-color:var(--blue);color:#fff;}
.lang-pick-btn{position:relative;background:none;border:1px solid var(--gray-200);border-radius:7px;cursor:pointer;color:var(--gray-500);padding:6px 8px;display:inline-flex;align-items:center;justify-content:center;}
.lang-pick-btn svg{width:16px;height:16px;}
.lang-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;width:140px;background:var(--white);border-radius:12px;box-shadow:var(--shadow-lg);z-index:1500;display:none;flex-direction:column;gap:2px;padding:6px;}
.lang-menu.open{display:flex;}
.lang-opt{padding:8px 10px;border-radius:7px;font-size:13px;color:var(--gray-700);cursor:pointer;}
.lang-opt:hover{background:var(--gray-100);}
.lang-opt.active{background:var(--blue-light);color:var(--blue);font-weight:700;}
.bell-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;width:280px;background:var(--white);border-radius:12px;box-shadow:var(--shadow-lg);z-index:1500;display:none;flex-direction:column;gap:6px;padding:8px;max-height:340px;overflow-y:auto;}
.bell-menu.open{display:flex;}
.bell-menu .al{padding:8px 10px;}
.user-chip{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:8px;}
.u-avatar{width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}
.prov-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;flex-shrink:0;}
.row-selected{background:rgba(37,99,235,.06);}
.u-text h4{font-size:13px;font-weight:600;color:var(--gray-800);}
.u-text p{font-size:10px;color:var(--gray-500);}

/* ─── VIEWS ─── */
.view{display:none;}
.view.active{display:block;}

/* ─── METRIC CARDS ─── */
.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px;}
.mc{background:var(--white);border-radius:var(--rl);padding:18px 20px;box-shadow:var(--shadow);display:flex;align-items:flex-start;gap:14px;}
.mc-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;font-weight:800;}
.mc-icon.blue{background:var(--blue-light);color:var(--blue);}
.mc-icon.green{background:var(--green-light);color:var(--green);}
.mc-icon.orange{background:var(--orange-light);color:var(--orange);}
.mc-icon.purple{background:var(--purple-light);color:var(--purple);}
.mc-icon.red{background:var(--red-light);color:var(--red);}
.mc-icon.teal{background:var(--teal-light);color:var(--teal);}
.mc-label{font-size:12px;color:var(--gray-500);margin-bottom:3px;}
.mc-label small{display:block;font-size:10px;color:var(--gray-400);}
.mc-val{font-size:22px;font-weight:800;color:var(--gray-900);margin-bottom:3px;letter-spacing:-0.5px;}
.mc-chg{font-size:11px;color:var(--green);}
.mc-chg.down{color:var(--red);}

/* ─── CHART / TABLE CARDS ─── */
.charts-row{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-bottom:22px;}
.cc,.tc{background:var(--white);border-radius:var(--rl);padding:18px 20px;box-shadow:var(--shadow);}
.cc-head,.tc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.cc-title,.tc-title{font-size:13px;font-weight:700;color:var(--gray-800);}
.cc-title small,.tc-title small{display:block;font-size:10px;font-weight:400;color:var(--gray-400);margin-top:1px;}
.cc-select{border:1px solid var(--gray-200);border-radius:6px;padding:4px 8px;font-size:11px;color:var(--gray-600);outline:none;cursor:pointer;background:var(--white);}
.legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;}
.li{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--gray-500);}
.ld{width:10px;height:10px;border-radius:50%;}
.cat-list .cl-row{display:flex;justify-content:space-between;font-size:11px;padding:4px 0;border-bottom:1px solid var(--gray-100);}
.cat-list .cl-row:last-child{border-bottom:none;}
.cat-list .dot{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px;}
.bottom-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;}

/* ─── TABLE ─── */
table{width:100%;border-collapse:collapse;}
th{font-size:10px;font-weight:700;color:var(--gray-400);text-transform:uppercase;letter-spacing:.05em;padding:6px 8px;border-bottom:1px solid var(--gray-200);text-align:start;white-space:nowrap;}
td{padding:9px 8px;border-bottom:1px solid var(--gray-100);font-size:12px;color:var(--gray-700);}
tr:last-child td{border-bottom:none;}
tbody tr:hover td{background:var(--gray-50);}
.empty-row td{text-align:center;color:var(--gray-400);padding:30px;font-style:italic;}
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:600;white-space:nowrap;}
.b-green{background:#dcfce7;color:#15803d;} .b-red{background:#fee2e2;color:#b91c1c;}
.b-blue{background:#dbeafe;color:#1d4ed8;} .b-orange{background:#ffedd5;color:#c2410c;}
.b-purple{background:#ede9fe;color:#6d28d9;} .b-gray{background:var(--gray-100);color:var(--gray-600);}
.b-teal{background:#ccfbf1;color:#0f766e;}
.act-btn{background:none;border:none;cursor:pointer;font-size:14px;padding:2px 4px;}
.act-btn.del{color:var(--red);} .act-btn.edit{color:var(--blue);} .act-btn.view{color:var(--gray-500);}

/* ─── ALERTS ─── */
.alerts{display:flex;flex-direction:column;gap:8px;}
.al{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:var(--gray-50);border-radius:8px;border-inline-start:3px solid var(--orange);}
.al.danger{border-inline-start-color:var(--red);background:#fff5f5;}
.al-icon{width:28px;height:28px;background:var(--orange-light);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
.al.danger .al-icon{background:var(--red-light);}
.al-body{flex:1;min-width:0;}
.al-title{font-size:12px;font-weight:600;color:var(--gray-800);}
.al-sub{font-size:10px;color:var(--gray-500);margin-top:1px;}

/* ─── PAGE HEADER ─── */
.page-hd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:10px;}
.page-hd h1{font-size:20px;font-weight:700;color:var(--gray-900);}
.page-hd p{font-size:12px;color:var(--gray-500);margin-top:2px;}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;}
.btn-p{padding:8px 16px;background:var(--blue);color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px;}
.btn-p:hover{background:var(--blue-d);}
.btn-o{padding:8px 16px;background:var(--white);color:var(--gray-700);border:1px solid var(--gray-300);border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px;}
.btn-o:hover{background:var(--gray-100);}
.btn-d{padding:8px 16px;background:var(--red);color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;}
.btn-sm{padding:5px 11px;font-size:11px;}

/* ─── FORM ─── */
.form-card{background:var(--white);border-radius:var(--rl);padding:22px 24px;box-shadow:var(--shadow);margin-bottom:20px;}
.fs-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--blue);margin-bottom:18px;padding-bottom:12px;border-bottom:2px solid #dbeafe;}
.fgrid{display:grid;gap:14px;margin-bottom:14px;}
.fg3{grid-template-columns:repeat(3,1fr);} .fg4{grid-template-columns:repeat(4,1fr);}
.fg2{grid-template-columns:repeat(2,1fr);} .fg1{grid-template-columns:1fr;}
.fg{display:flex;flex-direction:column;gap:4px;min-width:0;}
.fg label{font-size:11px;font-weight:600;color:var(--gray-600);}
.fg label .req{color:var(--red);}
.fg input,.fg select,.fg textarea{border:1px solid var(--gray-300);border-radius:7px;padding:7px 11px;font-size:12px;color:var(--gray-800);outline:none;transition:border .15s;background:var(--white);font-family:inherit;}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,0.1);}
.fg input.err{border-color:var(--red);}
.err-msg{font-size:10px;color:var(--red);margin-top:1px;}
.pfx{display:flex;align-items:center;border:1px solid var(--gray-300);border-radius:7px;overflow:hidden;}
.pfx span{background:var(--gray-100);padding:7px 9px;font-size:11px;color:var(--gray-500);border-inline-end:1px solid var(--gray-200);white-space:nowrap;}
.pfx input{border:none!important;border-radius:0;flex:1;padding:7px 10px;box-shadow:none!important;}
.bc-row{display:flex;gap:7px;min-width:0;}.bc-row input{flex:1;min-width:0;}
.bc-btn{padding:7px 11px;border:1px solid var(--blue);border-radius:7px;background:var(--blue);color:#fff;cursor:pointer;font-size:12px;flex-shrink:0;}

/* ─── FILTER BAR ─── */
.filter-bar{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap;}
.filter-bar .fsearch{display:flex;align-items:center;gap:7px;background:var(--white);border:1px solid var(--gray-200);border-radius:8px;padding:7px 11px;flex:1;min-width:200px;}
.filter-bar .fsearch svg{width:14px;height:14px;color:var(--gray-400);flex-shrink:0;}
.filter-bar .fsearch input{border:none;outline:none;font-size:12px;width:100%;}
.filter-bar select{border:1px solid var(--gray-200);border-radius:8px;padding:8px 11px;font-size:12px;background:var(--white);outline:none;cursor:pointer;}

/* ─── TABS ─── */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--gray-200);margin-bottom:18px;}
.tab{padding:9px 16px;font-size:13px;font-weight:600;color:var(--gray-500);cursor:pointer;border-bottom:2px solid transparent;}
.tab:hover{color:var(--gray-700);}
.tab.active{color:var(--blue);border-bottom-color:var(--blue);}
.tabpane{display:none;} .tabpane.active{display:block;}

/* ─── POS ─── */
#view-pos{height:calc(100vh - 54px);overflow:hidden;}
.pos-wrap{display:grid;grid-template-columns:175px 1fr 345px;height:100%;}
.pos-cats{background:var(--white);border-inline-end:1px solid var(--gray-200);overflow-y:auto;padding:8px;}
.pcat{display:flex;align-items:center;gap:9px;padding:10px 12px;cursor:pointer;border:none;background:none;width:100%;text-align:start;font-size:12px;font-weight:500;color:var(--gray-600);border-radius:8px;border-inline-end:3px solid transparent;margin-bottom:2px;}
.pcat:hover{background:var(--gray-50);}
.pcat.active{background:var(--blue-light);color:var(--blue);border-inline-end-color:var(--blue);}
.pcat .ci{font-size:20px;width:26px;text-align:center;}
.pos-products{background:var(--gray-50);overflow-y:auto;padding:16px;}
.pp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.pp-head h3{font-size:14px;font-weight:700;color:var(--gray-800);}
.pp-search{display:flex;align-items:center;gap:7px;background:var(--white);border:1px solid var(--gray-200);border-radius:8px;padding:7px 11px;}
.pp-search svg{width:14px;height:14px;color:var(--gray-400);flex-shrink:0;}
.pp-search input{border:none;outline:none;font-size:12px;color:var(--gray-700);width:160px;}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;}
.pcard{background:var(--white);border-radius:var(--rl);overflow:hidden;cursor:pointer;border:2px solid transparent;transition:all .15s;box-shadow:var(--shadow);position:relative;}
.pcard:hover{border-color:var(--blue);box-shadow:var(--shadow-md);}
.pcard:active{transform:scale(.96);}
.pcard.oos{opacity:.5;pointer-events:none;}
.pstock{position:absolute;top:5px;inset-inline-end:5px;background:rgba(15,23,42,.7);color:#fff;font-size:9px;padding:1px 6px;border-radius:10px;}
.pimg{height:82px;display:flex;align-items:center;justify-content:center;font-size:34px;}
.pimg.book{background:linear-gradient(135deg,#dbeafe,#e0e7ff);}
.pimg.coffee{background:linear-gradient(135deg,#fef9c3,#fef08a);}
.pimg.tea{background:linear-gradient(135deg,#dcfce7,#bbf7d0);}
.pimg.pastry{background:linear-gradient(135deg,#fff7ed,#fed7aa);}
.pimg.drink{background:linear-gradient(135deg,#ffe4e6,#fecdd3);}
.pinfo{padding:8px 9px;}
.pname{font-size:11px;font-weight:600;color:var(--gray-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ptype{font-size:10px;color:var(--gray-400);margin-bottom:3px;}
.pprice{font-size:13px;font-weight:700;color:var(--blue);}
.psizes{display:flex;flex-direction:column;gap:3px;}
.psize-btn{width:100%;border:1px solid var(--gray-200);background:var(--gray-50);border-radius:6px;padding:3px 6px;font-size:10px;font-weight:700;color:var(--blue);cursor:pointer;text-align:center;}
.psize-btn:hover{border-color:var(--blue);background:var(--blue-light);}
.psize-btn:disabled{opacity:.5;pointer-events:none;}
.pos-cart{background:var(--white);border-inline-start:1px solid var(--gray-200);display:flex;flex-direction:column;overflow:hidden;}
.cart-hd{padding:12px 14px;border-bottom:1px solid var(--gray-200);font-size:13px;font-weight:700;color:var(--gray-800);display:flex;align-items:center;gap:8px;}
.cart-hd-tot,.cart-chevron{display:none;}
.cart-scan{display:flex;align-items:center;gap:7px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:8px;padding:8px 11px;margin:10px 14px 0;}
.cart-scan input{border:none;outline:none;background:none;font-size:12px;color:var(--gray-700);width:100%;}
.cart-cnt{background:var(--blue);color:#fff;border-radius:20px;padding:1px 8px;font-size:11px;font-weight:600;}
.cart-body{flex:1;overflow-y:auto;}
.cart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:180px;color:var(--gray-300);}
.cart-empty .ce-icon{font-size:38px;margin-bottom:8px;}
.ci-item{border-bottom:1px solid var(--gray-100);}
.ci-row{display:flex;align-items:center;gap:9px;padding:9px 14px;}
.ci-emoji{font-size:18px;flex-shrink:0;}
.ci-info{flex:1;min-width:0;}
.ci-name{font-size:12px;font-weight:600;color:var(--gray-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ci-price{font-size:10px;color:var(--gray-400);}
.ci-saletype-row{padding:0 14px 9px 14px;}
.ci-saletype{width:100%;font-size:10px;padding:4px 6px;border:1px solid var(--gray-200);border-radius:5px;color:var(--gray-600);background:var(--white);cursor:pointer;}
.ci-qty{display:flex;align-items:center;gap:5px;}
.qbtn{width:20px;height:20px;border-radius:50%;border:1px solid var(--gray-300);background:none;cursor:pointer;font-size:13px;color:var(--gray-600);}
.qbtn:hover{background:var(--gray-100);}
.qn{font-size:12px;font-weight:700;min-width:18px;text-align:center;}
.ci-tot{font-size:12px;font-weight:700;color:var(--gray-800);min-width:44px;text-align:end;}
.del-btn{background:none;border:none;cursor:pointer;color:var(--red);font-size:13px;padding:2px;}
.cart-bot{border-top:1px solid var(--gray-200);flex-shrink:0;}
.disc-row{display:flex;align-items:center;gap:7px;padding:9px 14px;border-bottom:1px solid var(--gray-100);}
.disc-row span{font-size:12px;color:var(--gray-500);}
.disc-row input{width:60px;border:1px solid var(--gray-200);border-radius:6px;padding:5px 7px;font-size:12px;outline:none;text-align:center;}
.disc-row select{border:1px solid var(--gray-200);border-radius:6px;padding:5px 6px;font-size:11px;outline:none;background:var(--white);}
.summary{padding:9px 14px;background:var(--gray-50);}
.sr{display:flex;justify-content:space-between;font-size:12px;color:var(--gray-500);margin-bottom:3px;}
.sr.tot{font-size:15px;font-weight:800;color:var(--gray-900);border-top:1px solid var(--gray-200);padding-top:7px;margin-top:3px;}
.pay-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:9px 14px;}
.pbtn{padding:7px 4px;border-radius:8px;border:1.5px solid var(--gray-200);background:none;font-size:11px;font-weight:600;cursor:pointer;color:var(--gray-700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pbtn:hover{border-color:var(--blue);color:var(--blue);}
.pbtn.active{border-color:var(--blue);background:var(--blue-light);color:var(--blue);}
.checkout-btn{margin:0 14px 12px;padding:11px;border-radius:10px;background:var(--blue);color:#fff;border:none;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;letter-spacing:.3px;}
.checkout-btn:hover{background:var(--blue-d);}
.checkout-btn:disabled{background:var(--gray-300);cursor:not-allowed;}

/* ─── GENRE MANAGER ─── */
.gm-chips{display:flex;flex-wrap:wrap;gap:6px;}
.gm-chip{background:var(--gray-100);color:var(--gray-500);font-size:11px;padding:5px 10px;border-radius:20px;}
.gm-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--gray-100);}
.gm-row:last-child{border-bottom:none;}
.gm-row .gm-name{flex:1;font-size:13px;color:var(--gray-800);}
.gm-row input{flex:1;border:1px solid var(--gray-300);border-radius:7px;padding:6px 10px;font-size:12px;outline:none;}
.gm-empty{font-size:12px;color:var(--gray-400);padding:10px 0;text-align:center;}

/* ─── MODAL ─── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;padding:20px;}
.overlay.open{opacity:1;pointer-events:all;}
.modal{background:var(--white);border-radius:16px;padding:30px 28px;width:420px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);}
.modal.sm{width:380px;text-align:center;}
.modal h2{font-size:17px;font-weight:700;color:var(--gray-900);margin-bottom:4px;}
.modal .mo-icon{font-size:50px;margin-bottom:8px;text-align:center;}
.modal p{font-size:13px;color:var(--gray-500);}
.modal .mo-amount{font-size:34px;font-weight:800;color:var(--blue);margin:14px 0 4px;text-align:center;}
.modal .mo-receipt{font-size:11px;color:var(--gray-400);text-align:center;}
.modal .mo-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.modal-close{background:none;border:none;font-size:20px;color:var(--gray-400);cursor:pointer;}

/* ─── RECEIPT (screen) ─── */
.receipt{font-family:'Courier New',monospace;font-size:12px;color:var(--gray-800);border:1px dashed var(--gray-300);border-radius:8px;padding:16px;margin-top:14px;}
.receipt .rc-center,.rc-center{text-align:center;}
.receipt .rc-line,.rc-line{border-top:1px dashed var(--gray-300);margin:8px 0;}
.receipt .rc-row,.rc-row{display:flex;justify-content:space-between;}
.receipt .rc-tot,.rc-tot{font-weight:700;font-size:14px;}

/* ─── RECEIPT (modern thermal POS design) — kept unscoped from .receipt so it
   still renders correctly once copied into #print-area for printing ─── */
.rcpt{font-family:'Rabar','Segoe UI',Tahoma,sans-serif;color:#000;font-weight:700;print-color-adjust:exact;-webkit-print-color-adjust:exact;}
.rcpt-logo{text-align:center;margin-bottom:6px;}
.rcpt-logo img{max-width:110px;max-height:110px;}
.rcpt-logo .rcpt-logo-fallback{font-size:26px;line-height:1;}
.rcpt-shop{text-align:center;font-size:17px;font-weight:900;letter-spacing:.2px;color:#000;}
.rcpt-addr{text-align:center;font-size:11.5px;color:#000;font-weight:700;line-height:1.5;margin-top:2px;}
.rcpt-divider{border-top:2px dashed #000;margin:9px 0;}
.rcpt-divider.solid{border-top-style:solid;border-color:#000;}
.rcpt-meta{display:flex;justify-content:space-between;font-size:11.5px;color:#000;font-weight:700;margin:2px 0;}
.rcpt-item{margin:7px 0;}
.rcpt-item-top{display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:800;color:#000;}
.rcpt-item-top .gift{color:#7c3aed;}
.rcpt-item-sub{display:flex;justify-content:space-between;font-size:11.5px;color:#000;font-weight:700;margin-top:1px;}
.rcpt-item-sub .strike{text-decoration:line-through;color:#333;margin-inline-end:4px;}
.rcpt-row{display:flex;justify-content:space-between;font-size:12.5px;margin:4px 0;color:#000;font-weight:800;}
.rcpt-total{display:flex;justify-content:space-between;font-size:17px;font-weight:900;color:#000;border-top:2.5px solid #000;margin-top:7px;padding-top:8px;}
.rcpt-pay{text-align:center;font-size:12px;color:#000;font-weight:800;margin-top:9px;}
.rcpt-pay .badge-pay{display:inline-block;background:#fff;border:1.5px solid #000;border-radius:20px;padding:3px 12px;font-weight:800;}
.rcpt-footer{text-align:center;font-size:13.5px;font-weight:800;color:#000;margin-top:11px;}
.rcpt-tagline{text-align:center;font-size:10.5px;color:#000;font-weight:700;margin-top:2px;}
.rcpt-section{text-align:center;font-weight:800;font-size:12.5px;color:#000;margin:2px 0 6px;}
.rcpt-line{font-size:11.5px;color:#000;font-weight:700;margin:3px 0;line-height:1.4;}

/* ─── BARCODE LABEL (4cm × 2cm) ─── */
.bclabel{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Segoe UI',Tahoma,sans-serif;overflow:hidden;}
.bclabel-name{font-size:8.5px;font-weight:700;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;margin-bottom:1mm;}
.bclabel svg{max-width:100%;}

/* ─── TOAST ─── */
#toast{position:fixed;bottom:24px;inset-inline-end:24px;z-index:3000;display:flex;flex-direction:column;gap:8px;}
.toast{background:var(--gray-900);color:#fff;padding:11px 16px;border-radius:9px;font-size:13px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:8px;animation:slidein .25s ease;}
.toast.ok{background:#15803d;} .toast.err{background:#b91c1c;}
@keyframes slidein{from{transform:translateX(40px);opacity:0;}to{transform:translateX(0);opacity:1;}}

/* ─── SETTINGS ─── */
.set-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.set-card{background:var(--white);border-radius:var(--rl);padding:20px 22px;box-shadow:var(--shadow);}
.set-card h3{font-size:14px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.kpi-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--gray-100);font-size:13px;}
.kpi-row:last-child{border-bottom:none;}
.kpi-row span:last-child{font-weight:700;}

/* ─── MOBILE SIDEBAR TOGGLE ─── */
.menu-toggle{display:none;background:none;border:1px solid var(--gray-200);border-radius:7px;font-size:16px;padding:6px 10px;cursor:pointer;color:var(--gray-600);flex-shrink:0;}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1700;}
.app.sidebar-open .sidebar-overlay{display:block;}

/* ─── RESPONSIVE ─── */
@media (max-width:1200px){
  .metrics-grid{grid-template-columns:repeat(2,1fr);}
  .charts-row,.bottom-grid{grid-template-columns:1fr;}
  .set-grid{grid-template-columns:1fr;}
  .pos-wrap{grid-template-columns:150px 1fr 300px;}
}
@media (max-width:900px){
  html{zoom:1;}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;}
  .sidebar{position:fixed;top:0;bottom:0;inset-inline-start:0;z-index:1800;transform:translateX(-100%);transition:transform .25s ease;}
  html[dir="rtl"] .sidebar{transform:translateX(100%);}
  .app.sidebar-open .sidebar{transform:translateX(0);}
  .h-search{width:140px;}
  .pos-wrap{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:auto;min-height:100%;}
  .pos-cats{display:flex;overflow-x:auto;overflow-y:hidden;border-inline-end:none;border-bottom:1px solid var(--gray-200);padding:8px;}
  .pcat{width:auto;flex-shrink:0;border-inline-end:none;border-bottom:3px solid transparent;white-space:nowrap;}
  .pcat.active{border-inline-end-color:transparent;border-bottom-color:var(--blue);}
  #view-pos{height:auto;overflow-y:auto;}
  /* Cart becomes a bottom sheet: only the header bar (--cart-bar-h) stays visible;
     tapping it toggles .open (see toggleMobileCart in frontend/pos.js). */
  .pos-cart{--cart-bar-h:48px;position:fixed;top:auto;bottom:0;inset-inline:0;z-index:1600;max-height:78vh;border-inline-start:none;border-top:1px solid var(--gray-200);border-radius:16px 16px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.18);transform:translateY(calc(100% - var(--cart-bar-h)));transition:transform .25s ease;padding-bottom:env(safe-area-inset-bottom);}
  .pos-cart.open{transform:translateY(0);}
  .pos-cart .cart-hd{height:var(--cart-bar-h);box-sizing:border-box;cursor:pointer;user-select:none;}
  .cart-hd-tot{display:inline;margin-inline-start:auto;color:var(--blue);font-weight:800;}
  .cart-chevron{display:inline-block;font-size:10px;color:var(--gray-400);transition:transform .25s ease;}
  .pos-cart.open .cart-chevron{transform:rotate(180deg);}
  .pos-products{padding-bottom:calc(var(--cart-bar-h,48px) + 24px);}
}
@media (max-width:640px){
  .header{padding:0 12px;gap:10px;}
  .h-search{display:none;}
  .metrics-grid{grid-template-columns:1fr;}
  .fg2,.fg3,.fg4{grid-template-columns:1fr;}
  .tc,.cc{overflow-x:auto;}
  .modal{width:calc(100vw - 32px);padding:22px 18px;}
  .login-card{width:calc(100vw - 40px);padding:30px 24px;}
  .page-hd{flex-direction:column;align-items:stretch;}
  .pp-head{flex-wrap:wrap;gap:8px;}
  .pp-search{flex:1 1 100%;}
  .pp-search input{width:100%;}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px;}
  .qbtn{width:28px;height:28px;font-size:15px;}
}

/* ─── PRINT ─── */
@media print{
  body *{visibility:hidden;}
  #print-area,#print-area *{visibility:visible;}
  #print-area{display:block!important;position:absolute;left:0;top:0;width:100%;padding:20px;}
  /* thermal printers render color as faint grey — force pure black on paper */
  #print-area .gift,#print-area .rcpt *{color:#000!important;}
}

::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--gray-200);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--gray-300);}