:root{
  --bg:#eef0f6; --bg2:#f6f7fb;
  --panel:#ffffff; --border:#edeef3; --border-in:#e3e5ee;
  --ink:#171826; --ink-2:#42465a; --muted:#8b8fa3; --muted-2:#aab0c0;
  --sidebar-a:#1c1f2b; --sidebar-b:#13151e; --sidebar-tx:#c7cad6; --sidebar-mut:#767b8d;
  --primary:#ff6a2b; --primary-d:#f0560f; --primary-sf:#fff1e9;
  --grad:linear-gradient(135deg,#ff8a3d,#ff5a2c);
  --grad-soft:linear-gradient(135deg,#ffb27a,#ff7a4d);
  --success:#12b06b; --success-sf:#e6f7ef; --danger:#ec4646; --danger-sf:#fdeaea;
  --warn:#dd8a12; --warn-sf:#fdf2df;
  --sb:236px; --radius:16px;
  --shadow-sm:0 1px 2px rgba(23,24,38,.05), 0 1px 3px rgba(23,24,38,.04);
  --shadow:0 2px 6px rgba(23,24,38,.05), 0 10px 30px rgba(23,24,38,.06);
  --shadow-lg:0 12px 40px rgba(23,24,38,.12);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Inter,Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h3,h4{margin:0; letter-spacing:-.01em}
button{font-family:inherit; cursor:pointer}
input,textarea,select{
  font-family:inherit; font-size:14px; width:100%; padding:11px 14px;
  border:1.5px solid var(--border-in); border-radius:12px; background:#fff; color:var(--ink);
  outline:none; transition:border-color .15s, box-shadow .15s;
}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:focus,textarea:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-sf)}
textarea{min-height:76px; resize:vertical}
.muted{color:var(--muted)}

/* ============ APP SHELL ============ */
.app{display:flex; min-height:100vh}

/* ---- Sidebar ---- */
.sidebar{
  width:var(--sb); flex-shrink:0; color:var(--sidebar-tx);
  background:linear-gradient(180deg,var(--sidebar-a),var(--sidebar-b));
  display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0; z-index:40;
}
.side-brand{display:flex; flex-direction:column; gap:13px; padding:22px 20px 18px; border-bottom:1px solid rgba(255,255,255,.06)}
.side-logos{display:flex; align-items:center; gap:12px}
.lg-img{width:auto; display:block}
.lg-yay{height:40px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}
.lg-cav{height:15px; opacity:.95}
.lg-div{width:1px; height:28px; background:rgba(255,255,255,.13)}
.side-title{display:flex; flex-direction:column; line-height:1.25}
.side-title b{font-size:15px; color:#fff; font-weight:700}
.side-title span{font-size:11px; color:var(--sidebar-mut)}

.side-nav{padding:14px 12px; display:flex; flex-direction:column; gap:3px; flex:1}
.nav-item{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:11px 13px; border:none; background:none; color:var(--sidebar-tx);
  border-radius:12px; font-size:13.5px; font-weight:500; position:relative;
  transition:background .18s, color .18s, transform .12s;
}
.nav-item svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; opacity:.8; transition:transform .28s cubic-bezier(.34,1.56,.64,1)}
.nav-item:hover{background:rgba(255,255,255,.06); color:#fff}
.nav-item:hover svg{opacity:1; transform:scale(1.16) rotate(-6deg)}
.nav-item:active{transform:scale(.98)}
.nav-item.active{background:var(--grad); color:#fff; box-shadow:0 6px 18px rgba(255,90,44,.4)}
.nav-item.active svg{opacity:1; animation:iconpop .4s ease}
@keyframes iconpop{0%{transform:scale(.6)}55%{transform:scale(1.2)}100%{transform:scale(1)}}
.nav-item.primary-nav{margin:7px 0; background:rgba(255,106,43,.13); color:#ffb083}
.nav-item.primary-nav:hover{background:rgba(255,106,43,.2); color:#fff}
.nav-item.primary-nav.active{background:var(--grad); color:#fff}

.side-foot{padding:14px 16px 16px; border-top:1px solid rgba(255,255,255,.06); font-size:11px; color:var(--sidebar-tx)}
.side-foot .muted{color:var(--sidebar-mut); margin-top:10px; padding:0 4px}
.logout-btn{display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border:none; border-radius:10px; background:rgba(255,255,255,.05); color:var(--sidebar-tx); font-size:13px; font-weight:600; transition:.15s}
.logout-btn svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.logout-btn:hover{background:rgba(236,70,70,.18); color:#ff8b8b}

/* ============ LOGIN ============ */
.login-screen{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px;
  background:linear-gradient(150deg,#1c1f2b 0%,#141620 55%,#20140d 100%)}
.login-card{background:#fff; border-radius:22px; width:100%; max-width:380px; padding:36px 30px 26px; text-align:center;
  box-shadow:0 30px 70px rgba(0,0,0,.45); animation:pop .25s cubic-bezier(.34,1.56,.64,1)}
.login-logos{display:flex; align-items:center; justify-content:center; gap:13px; margin-bottom:18px}
.login-logos .ll-yay{height:52px}
.login-logos .ll-cav{height:19px}
.login-logos .ll-div{width:1px; height:34px; background:var(--border-in)}
.login-card h2{font-size:22px; font-weight:800; letter-spacing:-.02em}
.login-sub{color:var(--muted); font-size:14px; margin:6px 0 22px}
.login-card form{display:flex; flex-direction:column; gap:12px}
.login-card input{padding:13px 15px; font-size:15px; border-radius:12px; text-align:center}
.login-card .btn-primary{padding:14px; font-size:15px; margin-top:4px}
.login-err{color:var(--danger); font-size:13px; font-weight:600; min-height:18px}
.login-foot{margin-top:22px; font-size:11.5px; color:var(--muted-2)}
.side-overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:39; backdrop-filter:blur(2px)}

/* ---- Main ---- */
.main{flex:1; margin-left:var(--sb); min-width:0; display:flex; flex-direction:column}
.topbar{
  height:64px; background:rgba(255,255,255,.8); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:14px; padding:0 26px; position:sticky; top:0; z-index:20;
}
.topbar h1{font-size:19px; font-weight:700}
.top-actions{margin-left:auto; display:flex; gap:8px}
.hamb{display:none; flex-direction:column; gap:4px; background:none; border:none; padding:6px}
.hamb span{width:20px; height:2px; background:var(--ink-2); border-radius:2px}
.content{padding:26px; max-width:1200px; width:100%}

/* ============ VIEWS ============ */
.view{display:none; animation:fade .28s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

.panel{background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:20px; overflow:hidden}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 20px; border-bottom:1px solid var(--border)}
.panel-head h3{font-size:15px; font-weight:700}
.panel .row-form,.panel .table-wrap,.panel #lowStock,.panel #recentHandouts,.panel #topItems,.panel #outstandingByLeader{padding:18px 20px}

/* dashboard bar (ən çox verilən) */
.barline{margin:11px 0}
.barline:first-child{margin-top:2px}
.barline .bl-top{display:flex; justify-content:space-between; font-size:13.5px; margin-bottom:6px}
.barline .bl-top b{font-weight:650}
.barline .bl-top .bl-val{color:var(--muted); font-weight:600}
.barline .bl-track{height:8px; background:#eef0f5; border-radius:20px; overflow:hidden}
.barline .bl-fill{height:100%; background:var(--grad); border-radius:20px}
.head-search{max-width:240px; padding:9px 13px; border-radius:11px}
.head-tools{display:flex; gap:8px; align-items:center}
.link-btn{background:none; border:none; color:var(--primary); font-weight:700; font-size:12.5px}
.link-btn:hover{text-decoration:underline}
.field-label{display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:9px}

/* ---- KPI ---- */
.kpi-row{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:20px}
.kpi{
  background:var(--panel); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:14px; transition:transform .18s, box-shadow .18s;
}
.kpi:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.kpi-ic{
  width:46px; height:46px; border-radius:13px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:22px;
  background:var(--primary-sf);
}
.kpi-ic.green{background:var(--success-sf)}
.kpi-ic.red{background:var(--danger-sf)}
.kpi-ic.blue{background:#eaf1ff}
.kpi .lab{font-size:11.5px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.4px}
.kpi .val{font-size:27px; font-weight:800; margin-top:3px; line-height:1; letter-spacing:-.02em}
.kpi .val.orange{color:var(--primary)}
.kpi .val.green{color:var(--success)}
.kpi .val.red{color:var(--danger)}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px}

/* ---- Tables ---- */
table{width:100%; border-collapse:collapse; font-size:13.5px}
thead th{
  text-align:left; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px;
  padding:11px 15px; border-bottom:1px solid var(--border); background:#fbfbfd; white-space:nowrap;
}
tbody td{padding:13px 15px; border-bottom:1px solid var(--border); vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .12s}
tbody tr:hover{background:#fafaff}
.table-wrap{overflow-x:auto}
td .t-main{font-weight:650}
td .t-sub{font-size:12px; color:var(--muted)}
.stock-edit{width:80px; padding:7px 9px; text-align:center; font-weight:700; border-radius:10px}
.row-empty{text-align:center; color:var(--muted); padding:40px 0; font-size:14px}

/* ---- Badges ---- */
.badge{display:inline-block; font-size:11.5px; font-weight:700; padding:4px 11px; border-radius:20px; white-space:nowrap}
.badge.ok{background:var(--success-sf); color:var(--success)}
.badge.warn{background:var(--warn-sf); color:var(--warn)}
.badge.out{background:var(--danger-sf); color:var(--danger)}
.badge.neutral{background:#eef0f5; color:var(--ink-2)}
.chip{display:inline-block; background:#f1f2f7; border-radius:8px; padding:4px 10px; font-size:12px; font-weight:600; margin:2px 4px 2px 0}

/* ---- Buttons ---- */
.btn-primary,.btn-success,.btn-ghost{
  border-radius:12px; font-weight:700; font-size:13.5px; padding:11px 18px; border:1.5px solid transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:7px; text-decoration:none; white-space:nowrap;
  transition:transform .12s, box-shadow .18s, filter .15s, background .15s;
}
.btn-primary{background:var(--grad); color:#fff; box-shadow:0 6px 16px rgba(255,90,44,.28)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 9px 22px rgba(255,90,44,.36)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:.45; box-shadow:none; transform:none; cursor:not-allowed}
.btn-success{background:linear-gradient(135deg,#1ac47b,#0f9d5f); color:#fff; box-shadow:0 6px 16px rgba(18,176,107,.28)}
.btn-success:hover{transform:translateY(-1px); box-shadow:0 9px 22px rgba(18,176,107,.36)}
.btn-ghost{background:#fff; color:var(--ink-2); border-color:var(--border-in)}
.btn-ghost:hover{background:#f7f8fc; border-color:var(--muted-2)}
.btn-ghost.sm,.btn-primary.sm{padding:8px 13px; font-size:12.5px}
.icon-del{background:none; border:none; color:var(--muted-2); padding:7px; border-radius:9px; transition:background .15s, color .15s; display:inline-flex; align-items:center; justify-content:center}
.icon-del:hover{background:var(--danger-sf); color:var(--danger)}
.ic-trash{width:18px; height:18px; display:block; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.ic-trash .lid{transform-origin:center 7px; transition:transform .28s cubic-bezier(.34,1.56,.64,1)}
.icon-del:hover .ic-trash .lid{transform:translateY(-2px) rotate(-16deg)}
.icon-del:active .ic-trash{transform:scale(.88)}

/* ---- Forms ---- */
.row-form{display:grid; grid-template-columns:1fr; gap:11px}
@media(min-width:640px){.row-form{grid-template-columns:2fr 1.4fr 1fr .8fr auto}}

/* ---- Dashboard lists ---- */
.list-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid var(--border)}
.list-row:last-child{border-bottom:none}
.list-row .r-main{font-weight:650}
.list-row .r-sub{font-size:12px; color:var(--muted)}

/* ============ WIZARD ============ */
.wizard{max-width:800px; margin:16px auto 0}
[data-view="give"]{padding-top:4px}
.wizard .panel-head h3{font-size:16px}
.steps{display:flex; gap:12px; padding:22px 28px; border-bottom:1px solid var(--border); overflow-x:auto}
.step{display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--muted); white-space:nowrap}
.step b{width:28px; height:28px; border-radius:50%; background:#eef0f5; color:var(--muted); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; transition:.2s}
.step.active{color:var(--ink)}
.step.active b{background:var(--grad); color:#fff; box-shadow:0 4px 12px rgba(255,90,44,.35)}
.step.done b{background:var(--success); color:#fff}
.wiz-panel{padding:28px; min-height:330px}
.wiz-panel .field-label{font-size:14.5px; margin-bottom:14px; font-weight:700}
.wiz-panel input[type=search]{margin-bottom:16px; padding:13px 16px; font-size:15px}
.pick-list{display:flex; flex-direction:column; gap:11px; margin-top:4px}
.pick-row{display:flex; align-items:center; justify-content:space-between; gap:10px; border:1.5px solid var(--border-in); border-radius:13px; padding:16px 18px; background:#fff; transition:border-color .14s, background .14s, box-shadow .14s}
.pick-row.clickable{cursor:pointer}
.pick-row.clickable:hover{border-color:var(--primary); box-shadow:0 4px 14px rgba(255,90,44,.1)}
.pick-row.sel{border-color:var(--primary); background:var(--primary-sf)}
.pick-row .nm{font-weight:700; font-size:15.5px}
.pick-row .sub{font-size:13px; color:var(--muted)}
.qty{display:flex; align-items:center; gap:8px}
.qty button{width:36px; height:36px; border-radius:10px; border:1.5px solid var(--border-in); background:#fff; font-size:18px; font-weight:700; color:var(--primary); display:flex; align-items:center; justify-content:center; transition:.14s}
.qty button:hover:not(:disabled){border-color:var(--primary); background:var(--primary-sf)}
.qty button:disabled{opacity:.35}
.qty input{width:54px; text-align:center; padding:7px; font-weight:800; font-size:15px}
.btn-ghost#addLeaderQuick{margin-top:16px; width:100%; padding:14px}
.wiz-nav{display:flex; align-items:center; gap:12px; padding:22px 28px; border-top:1px solid var(--border)}
.wiz-nav .spacer{flex:1}
.wiz-nav button{padding:13px 26px; font-size:15px}

/* ---- Camera ---- */
.cam-wrap{position:relative; width:100%; max-width:410px; aspect-ratio:3/4; max-height:56vh; margin:0 auto 18px; background:#0d0f13; border-radius:18px; overflow:hidden; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow)}
.cam-wrap video,.cam-wrap img{width:100%; height:100%; object-fit:cover}
.cam-wrap video{transform:scaleX(-1)} /* güzgü (mirror) önizləmə */
.cam-controls{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.file-label{margin:0}

/* ---- Summary ---- */
.summary{border:1.5px solid var(--border); border-radius:14px; padding:18px; margin-bottom:14px; background:#fbfbfd}
.sum-leader{display:flex; align-items:center; gap:14px; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--border)}
.sum-photo{width:58px; height:58px; border-radius:12px; object-fit:cover; border:2.5px solid var(--primary); box-shadow:0 4px 12px rgba(255,90,44,.25)}
.summary ul{margin:8px 0 0; padding-left:20px}
.summary li{padding:3px 0; font-size:14.5px}

/* ---- Təhvil alma ---- */
#returnsList{padding:18px 20px; display:flex; flex-direction:column; gap:14px}
.ret-group{border:1.5px solid var(--border); border-radius:14px; overflow:hidden; transition:box-shadow .18s}
.ret-group:hover{box-shadow:var(--shadow)}
.ret-head{display:flex; align-items:center; gap:13px; padding:14px 16px; background:#fbfbfd; border-bottom:1px solid var(--border)}
.ret-head .rh-photo{width:44px; height:44px; border-radius:11px; object-fit:cover; border:1.5px solid var(--border); cursor:pointer}
.ret-head .rh-name{font-weight:700}
.ret-head .rh-sub{font-size:12px; color:var(--muted)}
.ret-head .rh-when{margin-left:auto; font-size:12px; color:var(--muted)}
.ret-line{display:flex; align-items:center; gap:14px; padding:13px 16px; border-bottom:1px solid var(--border)}
.ret-line:last-child{border-bottom:none}
.ret-line .rl-name{font-weight:650; flex:1; font-size:14.5px}
.ret-line .rl-out{font-size:13px; color:var(--muted)}
.ret-line .qty{margin:0 4px}
.ret-line .btn-success{padding:8px 15px; font-size:13px}

/* ---- History thumb ---- */
.thumb{width:50px; height:50px; border-radius:10px; object-fit:cover; cursor:pointer; border:1.5px solid var(--border); transition:transform .15s}
.thumb:hover{transform:scale(1.05)}
.thumb-empty{width:50px; height:50px; border-radius:10px; background:#eef0f5}

/* ---- Form modal ---- */
.modal-form{position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:20px}
.modal-form.hidden{display:none}
.mf-bg{position:absolute; inset:0; background:rgba(15,17,25,.5); backdrop-filter:blur(4px)}
.mf-card{position:relative; background:#fff; border-radius:18px; width:100%; max-width:420px; box-shadow:var(--shadow-lg); overflow:hidden; animation:pop .2s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{from{opacity:0; transform:translateY(12px) scale(.96)}to{opacity:1; transform:none}}
.mf-head{padding:18px 22px; font-weight:700; font-size:16px; border-bottom:1px solid var(--border)}
.mf-card form{padding:18px 22px; display:flex; flex-direction:column}
.mf-card .field-label{margin-top:13px}
.mf-card form > .field-label:first-child{margin-top:0}
.mf-actions{display:flex; gap:11px; justify-content:flex-end; margin-top:22px}

/* ---- Modal / toast ---- */
.modal{position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:24px}
.modal.hidden{display:none}
.modal-bg{position:absolute; inset:0; background:rgba(0,0,0,.82); backdrop-filter:blur(4px)}
.modal-body{position:relative; max-width:100%; max-height:100%}
.modal-body img{max-width:100%; max-height:86vh; border-radius:14px; box-shadow:var(--shadow-lg)}
.toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:13px 22px; border-radius:14px; z-index:70; font-weight:600; font-size:14px; box-shadow:var(--shadow-lg); max-width:92vw; text-align:center; animation:toastin .25s ease}
@keyframes toastin{from{opacity:0; transform:translate(-50%,12px)}to{opacity:1; transform:translate(-50%,0)}}
.toast.err{background:linear-gradient(135deg,#f05656,#d63b3b)}
.toast.ok{background:linear-gradient(135deg,#1ac47b,#0f9d5f)}
.hidden{display:none !important}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .kpi-row{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
}
@media(max-width:760px){
  .app{overflow-x:hidden}
  .sidebar{width:270px; transform:translateX(-100%); transition:transform .24s ease; box-shadow:0 0 50px rgba(0,0,0,.4)}
  .app.nav-open .sidebar{transform:none}
  .app.nav-open .side-overlay{display:block}
  .main{margin-left:0; width:100%}
  .content{padding:14px; max-width:100%}
  .hamb{display:flex}
  .topbar{padding:0 14px; height:58px}
  .topbar h1{font-size:17px}
  .head-search{max-width:140px}

  /* KPI */
  .kpi-row{gap:12px; margin-bottom:14px}
  .kpi{padding:14px; gap:11px}
  .kpi .val{font-size:22px}
  .kpi .lab{font-size:10.5px}
  .kpi-ic{width:40px; height:40px; font-size:19px; border-radius:11px}
  .grid-2{gap:14px}
  .panel{margin-bottom:14px}

  /* Cədvəllər — daha yığcam */
  thead th{padding:9px 11px; font-size:10.5px}
  tbody td{padding:10px 11px}
  .chip{font-size:11px; padding:3px 8px}

  /* Sihirbaz addımları — mobil-də yalnız aktiv etiket */
  .wizard{margin-top:0}
  .wiz-panel{padding:18px; min-height:auto}
  .steps{padding:16px; gap:9px; justify-content:center; align-items:center}
  .step{gap:0; font-size:12.5px}
  .step .s-lab{display:none}
  .step.active{gap:8px}
  .step.active .s-lab{display:inline; color:var(--primary)}
  .step.done b, .step b{width:26px; height:26px}
  .wiz-nav{padding:16px 18px}
  .wiz-nav button{padding:12px 18px; font-size:14px}
  .cam-controls .btn-primary,.cam-controls .btn-ghost{flex:1; min-width:calc(50% - 5px)}
}
@media(max-width:400px){
  .kpi-row{grid-template-columns:1fr 1fr}
  .kpi{flex-direction:row}
  .side-title b{font-size:14px}
}