/* ════════════════════════════════════════════
   ATYAAFCO OPS SYSTEM — Brand Identity v7
   Colors: #E9E6E4 | #989187 | #5F5144 | #000
   Fonts: Cinzel (EN display) | Noto Naskh (AR)
════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Noto+Naskh+Arabic:wght@400;500;600;700&family=DM+Mono:wght@300;400;500&display=swap');

:root {
  /* Brand Colors */
  --brand-beige:  #E9E6E4;
  --brand-gray:   #989187;
  --brand-brown:  #5F5144;
  --brand-black:  #000000;

  /* UI Palette */
  --bg:       #ECEAE7;
  --sf:       #FFFFFF;
  --sf2:      #F5F3F1;
  --sf3:      #ECEAE7;
  --b:        #E2DFDA;
  --b2:       #C8C1BA;
  --ac:       #5F5144;
  --ac2:      #7A6A5A;
  --ac-bg:    #F0EDE9;
  --dk:       #0D0B09;
  --dk2:      #1A1410;
  --tx:       #1A1410;
  --tx2:      #5F5144;
  --tx3:      #9C9188;
  --red:      #C0392B;
  --red-bg:   #FEF2F2;
  --red-b:    #FECACA;
  --gr:       #16A34A;
  --gr-bg:    #F0FDF4;
  --gr-b:     #BBF7D0;
  --ye:       #B45309;
  --ye-bg:    #FFFBEB;
  --ye-b:     #FDE68A;
  --bl:       #1D4ED8;
  --bl-bg:    #EFF6FF;
  --bl-b:     #BFDBFE;
  --gold:     #CA8A04;
  --gold-bg:  #FEFCE8;
  --gold-b:   #FEF08A;

  /* Typography */
  --fa: 'Noto Naskh Arabic', serif;
  --fe: 'Cinzel', serif;
  --fm: 'DM Mono', monospace;

  /* Dimensions */
  --r:  10px;
  --r2: 7px;
  --s1: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --s2: 0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --s3: 0 16px 48px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.06);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { font-size:14px }
body { background:var(--bg); color:var(--tx); font-family:var(--fa); min-height:100vh; line-height:1.6 }
::-webkit-scrollbar { width:4px; height:4px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--b2); border-radius:4px }

/* ══════════════════════════════════════
   BRAND PATTERN — matches identity
   Dense diagonal repeating text rows
══════════════════════════════════════ */

/* Light version — for sidebar, cards, light backgrounds */
.brand-pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='80'%3E%3Ctext x='0' y='18' font-family='Georgia,serif' font-size='11' font-weight='400' fill='%235F5144' opacity='0.09' letter-spacing='4'%3EATYAAFCO ATYAAFCO%3C/text%3E%3Ctext x='20' y='38' font-family='Georgia,serif' font-size='11' font-weight='400' fill='%235F5144' opacity='0.09' letter-spacing='4'%3EATYAAFCO ATYAAFCO%3C/text%3E%3Ctext x='0' y='58' font-family='Georgia,serif' font-size='11' font-weight='400' fill='%235F5144' opacity='0.09' letter-spacing='4'%3EATYAAFCO ATYAAFCO%3C/text%3E%3Ctext x='20' y='78' font-family='Georgia,serif' font-size='11' font-weight='400' fill='%235F5144' opacity='0.09' letter-spacing='4'%3EATYAAFCO ATYAAFCO%3C/text%3E%3C/svg%3E");
  background-size: 200px 80px;
  transform: rotate(-25deg) scale(1.5);
}

/* Dark version — for black/dark backgrounds */
.brand-pattern-dark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='80'%3E%3Ctext x='0' y='18' font-family='Georgia,serif' font-size='11' font-weight='400' fill='%23ffffff' opacity='0.07' letter-spacing='4'%3EATYAAFCO ATYAAFCO%3C/text%3E%3Ctext x='20' y='38' font-family='Georgia,serif' font-size='11' font-weight='400' fill='%23ffffff' opacity='0.07' letter-spacing='4'%3EATYAAFCO ATYAAFCO%3C/text%3E%3Ctext x='0' y='58' font-family='Georgia,serif' font-size='11' font-weight='400' fill='%23ffffff' opacity='0.07' letter-spacing='4'%3EATYAAFCO ATYAAFCO%3C/text%3E%3Ctext x='20' y='78' font-family='Georgia,serif' font-size='11' font-weight='400' fill='%23ffffff' opacity='0.07' letter-spacing='4'%3EATYAAFCO ATYAAFCO%3C/text%3E%3C/svg%3E");
  background-size: 200px 80px;
}

/* ══════════════════════════════════════
   LOGIN — Split layout
══════════════════════════════════════ */
#login-screen {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; min-height: 100vh;
}

/* Left dark panel */
.lg-bg {
  width: 45%;
  flex-shrink: 0;
  background: linear-gradient(160deg, #3D3028 0%, #1A1410 60%, #0D0B09 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}

/* Dense diagonal brand pattern — matches identity */
.lg-bg::before {
  content: '';
  position: absolute;
  top: -60%; left: -30%;
  width: 200%; height: 220%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='90'%3E%3Ctext x='0' y='22' font-family='Georgia,serif' font-size='12' fill='%23ffffff' opacity='0.08' letter-spacing='5'%3EATYAAFCO ATYAAFCO%3C/text%3E%3Ctext x='20' y='46' font-family='Georgia,serif' font-size='12' fill='%23ffffff' opacity='0.08' letter-spacing='5'%3EATYAAFCO ATYAAFCO%3C/text%3E%3Ctext x='0' y='70' font-family='Georgia,serif' font-size='12' fill='%23ffffff' opacity='0.08' letter-spacing='5'%3EATYAAFCO ATYAAFCO%3C/text%3E%3Ctext x='20' y='94' font-family='Georgia,serif' font-size='12' fill='%23ffffff' opacity='0.08' letter-spacing='5'%3EATYAAFCO ATYAAFCO%3C/text%3E%3C/svg%3E");
  background-size: 240px 90px;
  transform: rotate(-30deg);
  pointer-events: none;
}

/* Accent line on right edge of dark panel */
.lg-bg::after {
  content: '';
  position: absolute; right: 0; top: 15%; bottom: 15%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(152,145,135,.3), transparent);
}

/* Right light panel */
.lg-grid {
  flex: 1;
  background: #F0EDE9;
  background-image:
    linear-gradient(rgba(95,81,68,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,81,68,.035) 1px, transparent 1px);
  background-size: 36px 36px;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 36px;
}

.lg-dots { display: none }
.lg-wrap { width: 100%; max-width: 400px; }

.lg-card {
  background: #FFFFFF;
  border: 1px solid rgba(95,81,68,.12);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(95,81,68,.1), 0 4px 16px rgba(0,0,0,.06);
}

/* Top brand accent line */
.lg-card::before {
  content: '';
  display: block; height: 3px;
  background: linear-gradient(90deg, #1A1410 0%, #5F5144 40%, #989187 100%);
}

.lg-header {
  padding: 32px 36px 22px;
  text-align: center;
  border-bottom: 1px solid rgba(95,81,68,.08);
}
.lg-header::before { display: none }

.lg-orn {
  font-size: 7px; color: var(--tx3); font-family: var(--fm);
  letter-spacing: 4px; text-transform: uppercase; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.lg-orn::before, .lg-orn::after { content: ''; flex: 1; height: 1px; background: var(--b); }

.lg-en {
  font-family: var(--fe); font-size: 26px; font-weight: 500;
  color: #1A1410; letter-spacing: 9px; text-transform: uppercase; line-height: 1;
}
.lg-ar { font-family: var(--fa); font-size: 11px; color: var(--tx3); margin-top: 6px; }
.lg-sep {
  width: 30px; height: 1px;
  background: linear-gradient(90deg, transparent, #5F5144, transparent);
  margin: 14px auto;
}
.lg-tag { font-size: 7px; color: var(--tx3); font-family: var(--fm); letter-spacing: 3px; text-transform: uppercase; }

.lg-body { padding: 26px 32px 30px }

.lg-lbl {
  display: block; font-size: 9.5px; color: var(--tx2);
  font-family: var(--fm); letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 7px; font-weight: 600;
}

.lg-inp {
  width: 100%; background: var(--sf2);
  border: 1.5px solid var(--b); border-radius: 8px;
  color: var(--tx); padding: 11px 14px;
  font-family: var(--fa); font-size: 14px;
  outline: none; transition: all .2s; margin-bottom: 14px;
  direction: ltr;
}
.lg-inp:focus { border-color: var(--ac); background: #fff; box-shadow: 0 0 0 4px rgba(95,81,68,.08); }
.lg-inp::placeholder { color: var(--tx3) }

.lg-btn {
  width: 100%; padding: 13px;
  background: #1A1410; color: #E9E6E4;
  border: none; border-radius: 8px;
  font-family: var(--fe); font-size: 10px;
  font-weight: 600; letter-spacing: 4px; text-transform: uppercase;
  cursor: pointer; transition: all .2s; margin-top: 4px;
}
.lg-btn:hover { background: #5F5144; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(95,81,68,.25); }
.lg-btn:active { transform: translateY(0) }

.lg-err {
  font-size: 11px; color: var(--red); font-family: var(--fm); text-align: center;
  margin-top: 10px; background: var(--red-bg); border: 1px solid var(--red-b);
  border-radius: 8px; padding: 8px 12px; display: none;
}
.lg-err.show { display: block }

.lg-forg {
  text-align: center; margin-top: 13px; font-size: 9px;
  color: var(--tx3); font-family: var(--fm); letter-spacing: .8px; cursor: pointer; transition: color .15s;
}
.lg-forg:hover { color: var(--ac) }

.lg-footer {
  text-align: center; padding: 11px;
  border-top: 1px solid var(--b);
  font-size: 7.5px; color: var(--tx3);
  font-family: var(--fm); letter-spacing: 1.5px;
  background: var(--sf2);
}

/* Panel logo styles */
.lg-panel-logo {
  position: relative; z-index: 1;
  text-align: center; padding: 40px;
}

/* Mobile: stack vertically */
@media (max-width: 700px) {
  #login-screen { flex-direction: column; }
  .lg-bg { width: 100%; min-height: 220px; flex-shrink: 0; }
  .lg-grid { padding: 24px 16px 32px; }
}

/* ══════════════════════════════════════
   HEADER — Brand black bar
══════════════════════════════════════ */
/* HEADER — warm cream with brand pattern accent */
#header {
  position:sticky; top:0; z-index:300;
  background:#FFFFFF;
  height:58px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px;
  border-bottom:1px solid #EAE7E3;
  box-shadow: 0 2px 12px rgba(95,81,68,.06);
  overflow:hidden;
}

#header::before {
  content:'';
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='58'%3E%3Ctext x='0' y='18' font-family='Georgia,serif' font-size='10' fill='%235F5144' opacity='0.045' letter-spacing='4'%3EATYAAFCO ATYAAFCO ATYAAFCO%3C/text%3E%3Ctext x='15' y='36' font-family='Georgia,serif' font-size='10' fill='%235F5144' opacity='0.045' letter-spacing='4'%3EATYAAFCO ATYAAFCO ATYAAFCO%3C/text%3E%3Ctext x='0' y='54' font-family='Georgia,serif' font-size='10' fill='%235F5144' opacity='0.045' letter-spacing='4'%3EATYAAFCO ATYAAFCO ATYAAFCO%3C/text%3E%3C/svg%3E");
  background-size: 280px 58px;
  pointer-events:none;
}

#header::after {
  content:'';
  position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, #5F5144 0%, #989187 50%, #E9E6E4 100%);
  pointer-events:none;
}

.lw { display:flex; align-items:center; gap:14px; position:relative }
.le {
  font-family:var(--fe); font-size:18px; font-weight:600;
  color:#1A1410; letter-spacing:7px; text-transform:uppercase; line-height:1;
}
.la { font-family:var(--fa); font-size:10px; color:var(--tx3); line-height:1; margin-top:3px }
.ls { width:1px; height:24px; background:rgba(95,81,68,.25) }
.lt { font-family:var(--fm); font-size:7px; color:var(--tx3); letter-spacing:2.5px; text-transform:uppercase }

.hr { display:flex; align-items:center; gap:8px; position:relative }
.lsw { display:flex; background:var(--sf2); border-radius:6px; border:1px solid var(--b); overflow:hidden }
.lsw button { padding:5px 11px; background:none; border:none; color:var(--tx3); font-family:var(--fm); font-size:10px; cursor:pointer; transition:all .15s; letter-spacing:1px }
.lsw button.on { background:#5F5144; color:#E9E6E4 }

.upill {
  display:flex; align-items:center; gap:8px;
  padding:5px 12px;
  background:var(--sf2);
  border-radius:8px; border:1px solid var(--b);
  cursor:pointer; transition:all .15s;
}
.upill:hover { border-color:var(--ac); background:var(--ac-bg) }
.uav {
  width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg,#5F5144,#8B7B6B);
  display:grid; place-items:center; font-size:11px; color:#E9E6E4;
  font-weight:700; flex-shrink:0; font-family:var(--fm);
}
.un { font-size:11px; color:var(--tx); font-family:var(--fm); font-weight:600 }
.ur { font-size:9px; color:var(--tx3); font-family:var(--fm) }

/* SIDEBAR — warm white with brand pattern */
#app { display:flex; min-height:calc(100vh - 58px) }
#sidebar {
  width: clamp(200px, 16vw, 230px);
  flex-shrink:0;
  background:#FDFCFB;
  border-left:1px solid #EAE7E3;
  padding:16px 0;
  position:sticky; top:58px;
  height:calc(100vh - 58px); overflow-y:auto;
  box-shadow: -2px 0 12px rgba(95,81,68,.04);
}

/* Pattern overlay on sidebar */
#sidebar::before {
  content:'';
  position:fixed;
  top:58px; right:0; width:220px;
  height:calc(100vh - 58px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='100'%3E%3Ctext x='0' y='22' font-family='Georgia,serif' font-size='10' fill='%235F5144' opacity='0.05' letter-spacing='3'%3EATYAAFCO ATYAAFCO%3C/text%3E%3Ctext x='15' y='44' font-family='Georgia,serif' font-size='10' fill='%235F5144' opacity='0.05' letter-spacing='3'%3EATYAAFCO ATYAAFCO%3C/text%3E%3Ctext x='0' y='66' font-family='Georgia,serif' font-size='10' fill='%235F5144' opacity='0.05' letter-spacing='3'%3EATYAAFCO ATYAAFCO%3C/text%3E%3Ctext x='15' y='88' font-family='Georgia,serif' font-size='10' fill='%235F5144' opacity='0.05' letter-spacing='3'%3EATYAAFCO ATYAAFCO%3C/text%3E%3C/svg%3E");
  background-size: 220px 100px;
  pointer-events:none;
  z-index:0;
}

#sidebar > * { position:relative; z-index:1; }

/* Section labels */
.sbl {
  font-family: var(--fa);
  font-size: 13px;
  font-weight: 700;
  color: #5F5144;
  letter-spacing: 0;
  padding: 0 14px;
  margin: 22px 0 5px;
}

/* Nav items */
.sbi {
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; margin:1px 8px; border-radius:8px;
  background:none; border:none;
  color:var(--tx2);
  font-family:var(--fa); font-size:14px; font-weight:500;
  cursor:pointer; width:calc(100% - 16px); text-align:right;
  transition:all .15s;
}
.sbi:hover {
  background:var(--ac-bg);
  color:var(--ac);
}
.sbi.on {
  background:linear-gradient(90deg, var(--ac-bg), rgba(95,81,68,.08));
  color:var(--ac);
  border-right:3px solid var(--ac);
  font-weight:700;
}
.sbi .ic { font-size:14px; width:18px; text-align:center; flex-shrink:0; opacity:.7 }
.sbi:hover .ic { opacity:1 }
.sbi.on .ic { opacity:1 }
.sdv { height:1px; background:#EAE7E3; margin:8px 14px }
.sbadge { margin-right:auto; background:#C0392B; color:white; font-size:9px; font-family:var(--fm); padding:1px 7px; border-radius:10px; font-weight:700 }

#content { flex:1; padding:28px; overflow-y:auto; background:var(--bg) }
.page { display:none }
.page.on { display:block }

/* PAGE HEADER */
.ph { margin-bottom:22px }
.ph-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px }
.ph h1 { font-size:22px; font-weight:800; letter-spacing:-.4px }
.ph-sub { font-family:var(--fm); font-size:9px; color:var(--tx3); letter-spacing:1.5px; text-transform:uppercase; margin-top:3px }

/* STATS */
.stats { display:grid; grid-template-columns:repeat(2,1fr); gap:13px; margin-bottom:22px }
.stat {
  background:var(--sf); border:1px solid var(--b); border-radius:var(--r);
  padding:20px 22px; box-shadow:var(--s2); position:relative; overflow:hidden; transition:box-shadow .15s;
}
.stat:hover { box-shadow:0 8px 24px rgba(0,0,0,.1); transform:translateY(-1px) }
.stat::after {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--ac), var(--ac2));
  border-radius:var(--r) var(--r) 0 0;
}
.stat.danger::after { background:linear-gradient(90deg, var(--red), #F87171) }
.stat.success::after { background:linear-gradient(90deg, var(--gr), #4ADE80) }
.stat.gold::after { background:linear-gradient(90deg, var(--gold), #FDE047) }
.stat-l { font-family:var(--fm); font-size:9px; color:var(--tx3); letter-spacing:.8px; text-transform:uppercase; margin-bottom:8px }
.stat-v { font-size:32px; font-weight:900; color:var(--tx); font-family:var(--fm); line-height:1 }
.stat-s { font-size:10px; color:var(--tx3); margin-top:5px }
.stat.danger .stat-v { color:var(--red) }
.stat.success .stat-v { color:var(--gr) }
.stat.gold .stat-v { color:var(--gold) }

/* CARDS */
.card {
  background:var(--sf); border:1px solid var(--b); border-radius:var(--r);
  padding:22px; margin-bottom:16px; box-shadow:var(--s2); transition:all .15s;
}
.card:hover { box-shadow:0 8px 28px rgba(0,0,0,.09) }
.card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px }
.card-title { font-size:13.5px; font-weight:800; display:flex; align-items:center; gap:9px; color:var(--tx) }
.card-title::before {
  content:''; width:4px; height:18px;
  background:linear-gradient(180deg, var(--ac), var(--ac2));
  border-radius:2px; display:block; flex-shrink:0;
}

/* FORMS */
.fg { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.fi { display:flex; flex-direction:column; gap:5px }
.fi.full { grid-column:1/-1 }
label { font-size:11px; font-weight:700; color:var(--tx2); letter-spacing:.2px }
input, select, textarea {
  background:var(--sf2); border:1.5px solid var(--b); border-radius:var(--r2);
  color:var(--tx); padding:9px 12px; font-family:var(--fa); font-size:13px;
  outline:none; transition:all .18s; width:100%;
}
input:focus, select:focus, textarea:focus {
  border-color:var(--ac); background:#fff; box-shadow:0 0 0 3px rgba(95,81,68,.1);
}
textarea { resize:vertical; min-height:72px }
input[type="file"] { padding:7px 12px; cursor:pointer }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 17px; border-radius:var(--r2); border:none; font-family:var(--fa); font-size:13px; font-weight:700; cursor:pointer; transition:all .18s; white-space:nowrap }
.btn-dk { background:var(--dk); color:white }
.btn-dk:hover { background:#2e261e; transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.2) }
.btn-p  { background:var(--ac); color:white }
.btn-p:hover { background:var(--ac2); transform:translateY(-1px) }
.btn-d  { background:var(--red); color:white }
.btn-d:hover { opacity:.9; transform:translateY(-1px) }
.btn-s  { background:var(--gr); color:white }
.btn-s:hover { opacity:.9; transform:translateY(-1px) }
.btn-o  { background:transparent; border:1.5px solid var(--b2); color:var(--tx2) }
.btn-o:hover { border-color:var(--ac); color:var(--ac); background:var(--ac-bg) }
.btn-g  { background:var(--sf2); color:var(--tx2); border:1px solid var(--b) }
.btn-g:hover { background:var(--sf3); border-color:var(--b2) }
.btn-sm { padding:6px 13px; font-size:11.5px }
.btn-xs { padding:3px 9px; font-size:10.5px; border-radius:5px }
.btn-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; padding-top:16px; border-top:1px solid var(--b) }

/* BADGES */
.badge { display:inline-flex; align-items:center; padding:3px 9px; border-radius:20px; font-size:10px; font-family:var(--fm); font-weight:600 }
.ba    { background:var(--ac-bg); color:var(--ac);  border:1px solid rgba(95,81,68,.2) }
.bd    { background:var(--red-bg); color:var(--red); border:1px solid var(--red-b) }
.bs    { background:var(--gr-bg);  color:var(--gr);  border:1px solid var(--gr-b) }
.bw    { background:var(--ye-bg);  color:var(--ye);  border:1px solid var(--ye-b) }
.bi    { background:var(--bl-bg);  color:var(--bl);  border:1px solid var(--bl-b) }
.bg    { background:var(--sf2);    color:var(--tx3); border:1px solid var(--b) }
.bgold { background:var(--gold-bg); color:var(--gold); border:1px solid var(--gold-b) }

/* TABLE */
.tw { overflow-x:auto; border-radius:var(--r); border:1px solid var(--b); box-shadow:var(--s1) }
table { width:100%; border-collapse:collapse; font-size:12.5px }
th { background:var(--sf2); padding:11px 14px; text-align:right; font-size:9.5px; font-weight:700; color:var(--tx2); font-family:var(--fm); border-bottom:1px solid var(--b); white-space:nowrap; letter-spacing:.4px }
td { padding:11px 14px; border-bottom:1px solid var(--b); vertical-align:middle }
tr:last-child td { border-bottom:none }
tr:hover td { background:var(--sf2) }

/* TABS */
.tabs {
  display:flex; gap:2px; margin-bottom:20px;
  background:var(--sf2); border:1px solid var(--b);
  border-radius:var(--r); padding:4px; width:fit-content; flex-wrap:wrap;
  box-shadow:var(--s1);
}
.tab { padding:7px 16px; background:none; border:none; border-radius:7px; color:var(--tx3); font-family:var(--fa); font-size:12.5px; font-weight:600; cursor:pointer; transition:all .15s }
.tab:hover { color:var(--tx); background:rgba(95,81,68,.06) }
.tab.on { color:var(--tx); background:var(--sf); box-shadow:0 1px 4px rgba(0,0,0,.1); font-weight:700 }

/* CHIPS */
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px }
.chip { padding:5px 14px; background:var(--sf); border:1.5px solid var(--b); border-radius:20px; font-size:11.5px; font-weight:600; color:var(--tx2); cursor:pointer; transition:all .15s; box-shadow:var(--s1) }
.chip:hover { border-color:var(--ac2); background:var(--ac-bg) }
.chip.on { background:var(--dk); border-color:var(--dk); color:white; box-shadow:0 2px 8px rgba(0,0,0,.2) }

/* MODALS */
.ov { position:fixed; inset:0; background:rgba(0,0,0,.4); backdrop-filter:blur(6px); z-index:500; display:none; place-items:center; padding:16px }
.ov.on { display:grid }
.modal { background:var(--sf); border-radius:16px; box-shadow:var(--s3); width:100%; max-height:92vh; overflow-y:auto; padding:26px; border:1px solid var(--b) }
.mo-sm { max-width:460px } .mo-md { max-width:640px } .mo-lg { max-width:820px } .mo-xl { max-width:960px }
.mo-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--b) }
.mo-title { font-size:17px; font-weight:800 }
.mo-sub { font-size:9.5px; color:var(--tx3); font-family:var(--fm); letter-spacing:1px; text-transform:uppercase; margin-top:3px }
.xbtn { background:var(--sf2); border:1px solid var(--b); width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:14px; color:var(--tx3); display:grid; place-items:center; flex-shrink:0; transition:all .15s }
.xbtn:hover { background:var(--sf3); color:var(--tx) }

/* STATUS */
.st { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:20px; font-size:10px; font-family:var(--fm); font-weight:600 }
.st::before { content:''; width:5px; height:5px; border-radius:50%; flex-shrink:0 }
.st-iss { background:#FFFBEB; color:#92400E; border:1px solid #FDE68A } .st-iss::before { background:#F59E0B }
.st-pen { background:var(--bl-bg); color:var(--bl); border:1px solid var(--bl-b) } .st-pen::before { background:#3B82F6; animation:pulse 1.5s infinite }
.st-sig { background:var(--gr-bg); color:#15803D; border:1px solid var(--gr-b) } .st-sig::before { background:var(--gr) }
.st-fin { background:var(--ac-bg); color:var(--ac); border:1px solid rgba(95,81,68,.2) } .st-fin::before { background:var(--ac) }
.st-cls { background:var(--sf2); color:var(--tx3); border:1px solid var(--b) } .st-cls::before { background:var(--b2) }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* INFO BOXES */
.ib { padding:12px 15px; border-radius:var(--r2); margin-bottom:14px; font-size:12.5px; display:flex; align-items:flex-start; gap:9px; line-height:1.5 }
.ib-d { background:var(--red-bg); border:1px solid var(--red-b); color:var(--red) }
.ib-w { background:var(--ye-bg);  border:1px solid var(--ye-b);  color:var(--ye) }
.ib-s { background:var(--gr-bg);  border:1px solid var(--gr-b);  color:#15803D }
.ib-i { background:var(--bl-bg);  border:1px solid var(--bl-b);  color:var(--bl) }

/* LEADERBOARD */
.lbi { display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:12px; padding:13px 16px; background:var(--sf); border:1px solid var(--b); border-radius:var(--r); margin-bottom:6px; transition:all .15s; box-shadow:var(--s1) }
.lbi:hover { border-color:var(--b2); box-shadow:var(--s2) }
.lbr { font-size:19px; font-weight:900; font-family:var(--fm); text-align:center; color:var(--tx3) }
.lbr.r1 { color:#CA8A04 } .lbr.r2 { color:#6B7280 } .lbr.r3 { color:#92400E }
.lbn { font-size:13.5px; font-weight:700 }
.lbm { font-size:10px; color:var(--tx3); font-family:var(--fm); margin-top:2px }
.sbar { height:6px; background:var(--sf2); border-radius:6px; overflow:hidden; margin-top:7px }
.sfill { height:100%; border-radius:6px; transition:width .6s ease; background:linear-gradient(90deg, var(--gr), #22C55E) }
.snum { font-family:var(--fm); font-weight:900; font-size:16px }

/* PRODUCTS */
.pgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(256px,1fr)); gap:14px }
.pcard { background:var(--sf); border:1px solid var(--b); border-radius:var(--r); overflow:hidden; box-shadow:var(--s1); transition:all .2s; cursor:pointer }
.pcard:hover { box-shadow:var(--s2); transform:translateY(-2px); border-color:var(--b2) }
.pimg { width:100%; height:140px; object-fit:cover; display:block }
.pimg-ph { width:100%; height:140px; background:linear-gradient(135deg, var(--sf2), var(--sf3)); display:grid; place-items:center; font-size:32px; color:var(--b2) }
.phead { background:var(--dk); padding:14px 16px; display:flex; justify-content:space-between; align-items:flex-start }
.pbr { font-size:7.5px; font-family:var(--fm); color:rgba(152,145,135,.55); letter-spacing:2.5px; text-transform:uppercase; margin-bottom:4px }
.pna { font-size:15px; font-weight:700; color:white }
.pne { font-size:10px; color:rgba(255,255,255,.3); font-family:var(--fe) }
.pbody { padding:12px 15px }
.pinfo { font-size:11px; color:var(--tx3); font-family:var(--fm); margin-bottom:6px }
.pfoot { padding:10px 14px; border-top:1px solid var(--b); background:var(--sf2); display:flex; gap:5px; align-items:center }
.tb { padding:2px 9px; border-radius:20px; font-size:9px; font-family:var(--fm); font-weight:600 }
.tf { background:var(--gr-bg); color:var(--gr); border:1px solid var(--gr-b) }
.tc { background:var(--bl-bg); color:var(--bl); border:1px solid var(--bl-b) }
.tz { background:#F0E9FF; color:#6D28D9; border:1px solid #DDD6FE }

/* KITCHEN CARD */
.sec-lbl { font-size:9px; font-weight:700; color:var(--tx3); font-family:var(--fm); letter-spacing:1.5px; text-transform:uppercase; padding-bottom:7px; border-bottom:1px solid var(--b); margin-bottom:10px; margin-top:16px }
.kc-info { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px }
.kci { background:var(--sf2); border:1px solid var(--b); padding:12px; text-align:center; border-radius:var(--r) }
.kci-l { font-size:8px; color:var(--tx3); font-family:var(--fm); text-transform:uppercase; letter-spacing:.8px }
.kci-v { font-size:15px; font-weight:800; color:var(--ac); font-family:var(--fm); margin-top:4px }
.kc-yield { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px }
.kcy { background:linear-gradient(135deg, var(--ac-bg), var(--sf)); border:1px solid rgba(95,81,68,.15); padding:12px; text-align:center; border-radius:var(--r) }
.kcy-l { font-size:8px; color:var(--tx3); font-family:var(--fm); text-transform:uppercase; letter-spacing:.8px }
.kcy-v { font-size:20px; font-weight:900; color:var(--ac); font-family:var(--fm); margin-top:3px }
.kcy-s { font-size:9px; color:var(--tx3); margin-top:2px }
.steprow { display:flex; gap:10px; margin-bottom:10px; align-items:flex-start }
.stepn { width:24px; height:24px; background:var(--ac); color:white; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:800; flex-shrink:0; margin-top:2px }
.stepn.br { background:var(--ac2) }
.stept { flex:1; font-size:13px; line-height:1.6; padding-top:1px }
.qbox { background:linear-gradient(135deg, rgba(95,81,68,.04), transparent); border:1.5px solid rgba(95,81,68,.2); border-radius:var(--r); padding:14px 16px; margin-bottom:10px }
.qbox-t { font-size:9px; font-weight:700; color:var(--ac); font-family:var(--fm); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:9px }
.alg-chip { display:inline-flex; padding:3px 9px; background:var(--ye-bg); border:1px solid var(--ye-b); border-radius:20px; font-size:10.5px; color:var(--ye); margin:2px; font-weight:600 }
.ref-photos { display:flex; flex-wrap:wrap; gap:8px; padding:12px; background:var(--sf2); border:1px solid var(--b); border-radius:var(--r); margin-bottom:12px }
.ref-photo-item { text-align:center }
.ref-photo-item img { width:96px; height:84px; object-fit:cover; border-radius:var(--r2); border:2px solid var(--ac); cursor:pointer; transition:all .15s }
.ref-photo-item img:hover { transform:scale(1.05); box-shadow:var(--s2) }
.ref-photo-lbl { font-size:8.5px; font-family:var(--fm); font-weight:700; color:var(--tx2); margin-top:4px }

/* VIOLATIONS */
.pdisp { background:var(--red-bg); border:1.5px solid var(--red-b); border-radius:var(--r); padding:14px 16px; display:flex; justify-content:space-between; align-items:center; margin:12px 0 }
.pamnt { font-size:28px; font-weight:800; color:var(--red); font-family:var(--fm) }
.vrow { background:var(--sf); border:1px solid var(--b); border-radius:var(--r); padding:12px 15px; margin-bottom:7px; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px; box-shadow:var(--s1); transition:all .15s }
.vrow:hover { box-shadow:var(--s2) }
.vrow.h { border-right:3px solid var(--red) }
.vrow.m { border-right:3px solid var(--ye) }
.vrow.l { border-right:3px solid var(--ac) }
.vrn { font-size:13px; font-weight:700 }
.vre { font-size:13px; color:var(--tx2); font-family:var(--fm); margin-top:3px; font-weight:500 }
.pcol { display:flex; flex-direction:column; gap:3px }
.ppill { padding:2px 9px; border-radius:20px; font-size:9.5px; font-family:var(--fm); font-weight:600; background:var(--red-bg); color:var(--red); border:1px solid var(--red-b); text-align:center; white-space:nowrap }

/* IMAGE UPLOAD */
.iup { border:2px dashed var(--b2); border-radius:var(--r); padding:18px; text-align:center; cursor:pointer; transition:all .15s; background:var(--sf2) }
.iup:hover { border-color:var(--ac); background:var(--ac-bg) }
.iup input { display:none }
.iprevs { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px }
.iprev { position:relative; width:70px; height:70px }
.iprev img { width:100%; height:100%; object-fit:cover; border-radius:var(--r2); border:2px solid var(--b) }
.iprev .rm { position:absolute; top:-5px; right:-5px; width:18px; height:18px; background:var(--red); color:white; border-radius:50%; border:none; cursor:pointer; font-size:9px; display:grid; place-items:center; box-shadow:0 2px 4px rgba(0,0,0,.2) }

/* CHECKLIST */
.cli { display:flex; align-items:center; gap:11px; padding:11px 14px; background:var(--sf); border:1px solid var(--b); border-radius:var(--r); margin-bottom:6px; transition:all .15s; box-shadow:var(--s1) }
.cli:hover { border-color:var(--b2); box-shadow:var(--s2) }
.clc { width:18px; height:18px; border-radius:5px; border:2px solid var(--b2); display:grid; place-items:center; cursor:pointer; flex-shrink:0; transition:all .15s }
.clc.on { background:var(--gr); border-color:var(--gr); color:white; font-size:10px }
.cl-crit { border-right:3px solid var(--red) }
.cl-imp  { border-right:3px solid var(--ye) }
.cl-done { opacity:.5 }
.cl-prog { height:6px; background:var(--sf2); border-radius:6px; overflow:hidden; margin-bottom:13px }
.cl-prog-fill { height:100%; border-radius:6px; transition:width .4s ease }

/* TASKS */
.titem { display:flex; gap:11px; align-items:flex-start; padding:12px 15px; background:var(--sf); border:1px solid var(--b); border-radius:var(--r); margin-bottom:6px; transition:all .15s; box-shadow:var(--s1) }
.titem:hover { border-color:var(--b2); box-shadow:var(--s2) }
.tcheck { width:18px; height:18px; border-radius:5px; border:2px solid var(--b2); display:grid; place-items:center; cursor:pointer; flex-shrink:0; margin-top:2px; transition:all .15s }
.tcheck.on { background:var(--gr); border-color:var(--gr); color:white; font-size:10px }
.ttit { font-size:13px; font-weight:700 }
.tmeta { font-size:10px; color:var(--tx3); font-family:var(--fm); margin-top:2px }
.tfreq { padding:2px 9px; border-radius:20px; font-size:9px; font-family:var(--fm); font-weight:600 }
.tf-d { background:var(--bl-bg); color:var(--bl); border:1px solid var(--bl-b) }
.tf-w { background:var(--ye-bg); color:var(--ye); border:1px solid var(--ye-b) }
.tf-m { background:var(--ac-bg); color:var(--ac); border:1px solid rgba(95,81,68,.2) }
.tpri { font-size:8.5px; font-weight:700; font-family:var(--fm); letter-spacing:1px; text-transform:uppercase; color:var(--tx3); margin:13px 0 7px; padding:7px 0; border-bottom:1px solid var(--b) }

/* TEMP */
.temp-ok  { color:var(--gr)  !important }
.temp-war { color:var(--ye)  !important }
.temp-bad { color:var(--red) !important }

/* GRABTEC */
.gr-result-ok  { background:var(--gr-bg); border:2px solid var(--gr-b); border-radius:var(--r); padding:18px; text-align:center }
.gr-result-bad { background:var(--red-bg); border:2px solid var(--red-b); border-radius:var(--r); padding:18px }
.gr-missing-item { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; background:var(--sf); border:1px solid var(--red-b); border-radius:var(--r); margin-bottom:6px }

/* REWARDS */
.rrow { background:var(--sf); border:1px solid var(--b); border-radius:var(--r); padding:14px 16px; margin-bottom:7px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:11px; box-shadow:var(--s1); transition:all .15s }
.rrow:hover { box-shadow:var(--s2) }
.rrow.gold   { border-right:3px solid var(--gold) }
.rrow.silver { border-right:3px solid #6B7280 }

/* UTILS */
.g2  { display:grid; grid-template-columns:1fr 1fr;         gap:13px }
.g3  { display:grid; grid-template-columns:1fr 1fr 1fr;     gap:13px }
.g4  { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:12px }
.mt8  { margin-top:8px }
.mt12 { margin-top:12px }
.mt16 { margin-top:16px }
.divider { height:1px; background:var(--b); margin:14px 0 }
.empty { text-align:center; padding:44px 20px; color:var(--tx3) }
.empty-ic { font-size:32px; margin-bottom:10px; opacity:.4 }
.empty-t  { font-size:14px; font-weight:700; color:var(--tx2) }
.empty-s  { font-size:12px; margin-top:4px }
.tag-note { font-size:10.5px; color:var(--tx3); font-family:var(--fm); margin-top:4px }
.tag-note a { color:var(--ac); cursor:pointer; text-decoration:underline }

/* SIGN PAGE */
.sign-wrap { min-height:100vh; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:16px; font-family:var(--fa); direction:rtl }
.sign-card { background:white; border:1px solid var(--b); border-radius:16px; max-width:480px; width:100%; overflow:hidden; box-shadow:var(--s3) }
.sign-header { background:var(--dk); padding:18px 22px }
.sign-btn { width:100%; padding:14px; background:var(--ac); color:white; border:none; border-radius:10px; font-family:var(--fa); font-size:15px; font-weight:700; cursor:pointer; transition:all .2s }
.sign-btn:hover { background:var(--ac2); transform:translateY(-1px) }
.sign-btn.done { background:var(--gr); cursor:default }

/* PRINT */
@media print {
  #header, #sidebar, .btn-row, .no-print { display:none !important }
  body { background:white; font-size:11px }
  .page { display:block !important }
}

/* RESPONSIVE */
@media (max-width:768px) {
  #sidebar { display:none }
  .stats   { grid-template-columns:1fr 1fr }
  .fg, .g2, .g3, .g4 { grid-template-columns:1fr }
  .fi.full { grid-column:1 }
  #content { padding:14px }
  .pgrid   { grid-template-columns:1fr }
  .kc-info, .kc-yield { grid-template-columns:1fr 1fr 1fr }
  .tabs { width:100% }
}

/* DASHBOARD GRID */
.dash-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; align-items:start }
@media (max-width:1200px) { .dash-grid { grid-template-columns:1fr 1fr } }
@media (max-width:900px)  { .dash-grid { grid-template-columns:1fr } }

/* ══════════════════════════════════════════
   NEW PAGES — BAR LEVEL / DRIVER / BLOGGERS
   ══════════════════════════════════════════ */

/* Tab containers */
.bl-tab, .bg-tab { display:block }

/* Driver page — needs input */
#driver-branches .card table { width:100%; border-collapse:collapse }
#driver-branches .card td, #driver-branches .card th {
  padding:7px 10px; border-bottom:1px solid var(--b);
}
#driver-branches .card th { background:var(--sf2); font-size:11px; color:var(--tx3) }

/* Bar level comparison table */
#bl-calc-result table th,
#bl-calc-result table td { border:1px solid var(--b) }

/* Bar level current table */
#bl-current table th { white-space:nowrap; font-size:11px; color:var(--tx3); font-family:var(--fm) }
#bl-current table td { white-space:nowrap }

/* Bloggers fridge card */
#bg-fridge .empty, #bg-today .empty, #bg-clips .empty, #bg-log .empty {
  padding:32px 0;
}

/* Route settings checkboxes */
#bl-routes-body label input[type=checkbox] { cursor:pointer }

/* ══════════════════════════════════════════
   POLISH v8 — Stock, Analysis, Tasks, Approval
   ══════════════════════════════════════════ */

/* ── Stock Overview ── */
.stock-loc-row {
  background: var(--sf);
  border: 1px solid var(--b);
  border-radius: var(--r);
  padding: 12px 16px;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all .18s;
  box-shadow: var(--s1);
}
.stock-loc-row:hover {
  border-color: var(--ac);
  box-shadow: var(--s2);
  transform: translateX(-2px);
}
.stock-loc-row.red  { border-right: 3px solid var(--red);  background: var(--red-bg) }
.stock-loc-row.yellow { border-right: 3px solid var(--ye); background: var(--ye-bg) }
.stock-loc-row.green  { border-right: 3px solid var(--gr) }

/* ── Analysis page ── */
.anlys-score-ring {
  width: 100px; height: 100px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--fm);
  font-size: 32px; font-weight: 900;
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
  margin: 0 auto 16px;
}

.anlys-source-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  background: var(--sf2);
  border: 1.5px solid var(--b);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
  transition: all .15s;
}
.anlys-source-btn.active {
  background: var(--ac-bg);
  border-color: var(--ac);
  color: var(--ac);
}
.anlys-source-btn:hover {
  border-color: var(--ac);
}

.anlys-rec {
  display: flex;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--b);
  align-items: flex-start;
}
.anlys-rec:last-child { border-bottom: none }
.anlys-rec-badge {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 9.5px;
  font-family: var(--fm);
  font-weight: 700;
  margin-top: 2px;
}
.anlys-rec-badge.high   { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-b) }
.anlys-rec-badge.medium { background: var(--ye-bg);  color: var(--ye);  border: 1px solid var(--ye-b) }
.anlys-rec-badge.low    { background: var(--gr-bg);  color: var(--gr);  border: 1px solid var(--gr-b) }

/* ── Task cards ── */
.task-card {
  border-radius: var(--r);
  padding: 12px 14px;
  margin-bottom: 8px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  transition: all .15s;
  border: 1px solid transparent;
}
.task-card.critical { background: var(--red-bg); border-color: rgba(192,57,43,.2) }
.task-card.important { background: var(--ye-bg);  border-color: rgba(180,83,9,.2) }
.task-card.routine  { background: var(--gr-bg);  border-color: rgba(22,163,74,.15) }
.task-card.done     { background: var(--sf2); opacity: .55 }
.task-priority-dot  {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0; margin-top: 5px;
}
.task-priority-dot.critical  { background: var(--red) }
.task-priority-dot.important { background: var(--ye) }
.task-priority-dot.routine   { background: var(--gr) }
.task-priority-dot.done      { background: var(--b2) }
.task-execute-btn {
  margin-top: 8px;
  padding: 6px 14px;
  border: none;
  border-radius: 7px;
  font-family: var(--fa);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.task-execute-btn:hover { transform: translateY(-1px); box-shadow: var(--s1) }

/* ── Approval flow ── */
.appr-phase-indicator {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 16px;
  background: var(--sf);
  border: 1px solid var(--b);
  border-radius: 30px;
  padding: 4px;
  box-shadow: var(--s1);
}
.appr-phase-step {
  flex: 1;
  text-align: center;
  padding: 7px 4px;
  border-radius: 26px;
  font-size: 10px;
  font-family: var(--fm);
  font-weight: 700;
  color: var(--tx3);
  transition: all .2s;
}
.appr-phase-step.active {
  background: var(--ac);
  color: white;
  box-shadow: 0 2px 8px rgba(95,81,68,.3);
}
.appr-phase-step.done {
  color: var(--gr);
}

/* ── Camera capture button ── */
.cam-btn {
  width: 100%;
  padding: 20px;
  font-size: 18px;
  font-weight: 800;
  background: var(--ac);
  color: white;
  border: none;
  border-radius: var(--r);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all .2s;
  box-shadow: 0 4px 16px rgba(95,81,68,.25);
}
.cam-btn:hover { background: var(--dk); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(95,81,68,.35) }
.cam-btn:active { transform: translateY(0) }
.cam-btn.reject { background: var(--red); box-shadow: 0 4px 16px rgba(192,57,43,.25) }
.cam-btn.reject:hover { background: #991B1B }

/* ── Driver tabs ── */
.drv-tab-btn {
  flex: 1;
  padding: 11px;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: var(--r);
  cursor: pointer;
  border: 1.5px solid var(--b);
  background: var(--sf2);
  color: var(--tx2);
  font-family: var(--fa);
  transition: all .15s;
}
.drv-tab-btn.active {
  background: var(--ac);
  color: white;
  border-color: var(--ac);
  box-shadow: 0 2px 8px rgba(95,81,68,.25);
}
.drv-tab-btn:hover:not(.active) {
  border-color: var(--ac);
  color: var(--ac);
  background: var(--ac-bg);
}

/* ── Progress bar ── */
.progress-bar-wrap {
  height: 6px;
  background: var(--sf2);
  border-radius: 3px;
  overflow: hidden;
  margin: 8px 0;
}
.progress-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .4s ease;
}

/* ── Product grid in approval ── */
.appr-prod-slot {
  flex-shrink: 0;
  background: rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 6px 8px;
  text-align: center;
  min-width: 56px;
  transition: all .2s;
}
.appr-prod-slot.done   { background: rgba(34,197,94,.25) }
.appr-prod-slot.fail   { background: rgba(239,68,68,.25) }
.appr-prod-slot.active { background: rgba(255,255,255,.2); outline: 2px solid rgba(255,255,255,.5) }

/* ── Mobile improvements ── */
@media (max-width: 768px) {
  .ph h1 { font-size: 18px }
  .ph-sub { font-size: 8px }
  .card { padding: 16px }
  .stat { padding: 16px 18px }
  .stat-v { font-size: 26px }
  .modal { padding: 18px }
  .mo-title { font-size: 15px }
  .cam-btn { padding: 18px; font-size: 16px }
  .drv-tab-btn { font-size: 11px; padding: 9px 6px }
}

/* ── Animations ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px) }
  to   { opacity: 1; transform: translateY(0) }
}
@keyframes shimmer {
  0%   { background-position: -200% center }
  100% { background-position:  200% center }
}
@keyframes spin {
  to { transform: rotate(360deg) }
}

.fade-in-up { animation: fadeInUp .25s ease both }
.loading-shimmer {
  background: linear-gradient(90deg, var(--sf2) 25%, var(--sf) 50%, var(--sf2) 75%);
  background-size: 200% auto;
  animation: shimmer 1.5s linear infinite;
}

/* ── Smooth page transitions ── */
.page.on { animation: fadeInUp .2s ease both }

/* ── Scrollbar in modals ── */
.modal::-webkit-scrollbar { width: 3px }
.modal::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 3px }

/* ── AI loading screen ── */
.ai-loading {
  text-align: center;
  padding: 64px 20px;
}
.ai-loading-icon {
  font-size: 52px;
  margin-bottom: 18px;
  display: block;
  animation: pulse 1.8s ease-in-out infinite;
}
.ai-loading-bar {
  height: 4px;
  background: var(--sf2);
  border-radius: 2px;
  overflow: hidden;
  max-width: 280px;
  margin: 28px auto 0;
}
.ai-loading-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ac), var(--ac2));
  border-radius: 2px;
  transition: width 4s ease;
}

/* ── Score display ── */
.score-hero {
  text-align: center;
  padding: 24px 20px;
  border-radius: 14px;
  border: 2px solid;
  margin-bottom: 14px;
}
.score-hero .score-num {
  font-family: var(--fm);
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 6px;
}
.score-hero.approved {
  background: var(--gr-bg);
  border-color: var(--gr-b);
}
.score-hero.approved .score-num { color: var(--gr) }
.score-hero.rejected {
  background: var(--red-bg);
  border-color: var(--red-b);
}
.score-hero.rejected .score-num { color: var(--red) }


/* ══════════════════════════════════════════
   MOBILE NAVIGATION — Full polish
   ══════════════════════════════════════════ */

/* Hamburger bars */
.mob-bar {
  display: block;
  width: 22px; height: 2px;
  background: var(--tx2);
  border-radius: 2px;
  transition: all .25s;
}

/* Mobile: show hamburger, hide desktop items */
@media (max-width: 768px) {
  #mob-menu-btn { display: flex !important }

  /* Sidebar slides in from right */
  #sidebar {
    display: block !important;
    position: fixed;
    top: 58px; right: -260px;
    width: 240px;
    height: calc(100vh - 58px);
    z-index: 450;
    transition: right .3s cubic-bezier(.4,0,.2,1);
    box-shadow: -8px 0 32px rgba(0,0,0,.15);
  }
  #sidebar.mob-open {
    right: 0;
  }

  /* Content full width */
  #content { padding: 14px; width: 100% }

  /* Page header */
  .ph h1 { font-size: 17px }
  .ph-sub { font-size: 8px }

  /* Cards */
  .card { padding: 14px; margin-bottom: 10px }
  .card-title { font-size: 12.5px }

  /* Stats */
  .stats { grid-template-columns: 1fr 1fr; gap: 8px }
  .stat  { padding: 14px 16px }
  .stat-v { font-size: 24px }

  /* Forms */
  .fg, .g2, .g3, .g4 { grid-template-columns: 1fr }
  .fi.full { grid-column: 1 }

  /* Tables — horizontal scroll */
  .tw { overflow-x: auto; -webkit-overflow-scrolling: touch }
  table { font-size: 11.5px; min-width: 380px }
  th, td { padding: 8px 10px }

  /* Modals — full screen on mobile */
  .ov { padding: 0; align-items: flex-end }
  .modal {
    border-radius: 18px 18px 0 0;
    max-height: 92vh;
    padding: 20px 16px 32px;
  }

  /* Buttons — bigger touch targets */
  .btn { padding: 10px 18px; font-size: 13px }
  .btn-row { gap: 6px }
  .cam-btn { padding: 22px; font-size: 17px }

  /* Tabs — scrollable */
  .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; width: 100% }
  .tab  { white-space: nowrap; padding: 7px 12px }

  /* Product grid */
  .pgrid { grid-template-columns: 1fr }

  /* Dashboard grid */
  .dash-grid { grid-template-columns: 1fr }

  /* Input fields — prevent zoom on iOS */
  input, select, textarea { font-size: 16px !important }

  /* AI loading screens */
  .ai-loading { padding: 40px 16px }
  .ai-loading-icon { font-size: 42px }

  /* Score hero */
  .score-hero .score-num { font-size: 38px }

  /* Bottom safe area for iPhone */
  #content { padding-bottom: calc(14px + env(safe-area-inset-bottom)) }
}

/* Mobile hamburger animation when open */
#sidebar.mob-open ~ * #mob-menu-btn .mob-bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
#sidebar.mob-open ~ * #mob-menu-btn .mob-bar:nth-child(2) {
  opacity: 0;
}
#sidebar.mob-open ~ * #mob-menu-btn .mob-bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Touch-friendly nav items */
@media (max-width: 768px) {
  .sbi { padding: 12px 14px; font-size: 14.5px; min-height: 48px }
  .sbl { padding: 0 14px; margin: 18px 0 4px }
}

/* ── Bottom Navigation Bar (optional enhancement) ── */
/* Quick access bar for most-used pages */
#mob-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(56px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--sf);
  border-top: 1px solid var(--b);
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
  z-index: 300;
  justify-content: space-around;
  align-items: center;
}

@media (max-width: 768px) {
  #mob-bottom-nav { display: flex }
  #content { padding-bottom: calc(70px + env(safe-area-inset-bottom)) }
}

.mob-nav-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 6px 10px;
  background: none; border: none; cursor: pointer;
  color: var(--tx3); font-family: var(--fa); font-size: 9.5px;
  min-width: 48px; border-radius: 10px; transition: all .15s;
}
.mob-nav-btn .mob-nav-ic { font-size: 22px; line-height: 1 }
.mob-nav-btn.active { color: var(--ac) }
.mob-nav-btn:active { transform: scale(.92) }



/* Spinner for attendance AI verification */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--b);
  border-top-color: var(--ac);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}


/* ════════════════════════════════════════════════════════════════════
   PHASE 3 — DESIGN SYSTEM POLISH
   High-impact visual refinements layered on top of existing styles
   ════════════════════════════════════════════════════════════════════ */

/* ── Smooth, premium page transitions ── */
.page.on {
  animation: pageEnter .35s cubic-bezier(.25,.1,.25,1) both;
}
@keyframes pageEnter {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── Polished card hover ── */
.card {
  transition: transform .22s cubic-bezier(.25,.1,.25,1),
              box-shadow .22s cubic-bezier(.25,.1,.25,1);
  will-change: transform;
}
.card:not(.no-hover):hover {
  transform: translateY(-1px);
  box-shadow: var(--s2);
}

/* ── Smoother buttons with tactile feedback ── */
.btn {
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
  position: relative;
  overflow: hidden;
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Shine overlay on primary buttons */
.btn-dk::before, .btn-ac::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
}
.btn-dk:hover::before, .btn-ac:hover::before { opacity: 1; }

/* ── Inputs: smooth focus ── */
input, select, textarea {
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ac) !important;
  box-shadow: 0 0 0 4px rgba(95, 81, 68, .09);
  background: var(--sf);
}

/* ── Sidebar items: refined hover ── */
.sbi {
  position: relative;
  transition: background .15s ease, color .15s ease;
}
.sbi::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 60%;
  background: var(--ac);
  border-radius: 0 3px 3px 0;
  transition: transform .25s cubic-bezier(.25,.1,.25,1);
}
html[dir="rtl"] .sbi::before { left: auto; right: 0; border-radius: 3px 0 0 3px; }
.sbi:hover::before,
.sbi.on::before { transform: translateY(-50%) scaleY(1); }

/* ── Stats: lift on hover ── */
.stat {
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: default;
}
.stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--s2);
}

/* ── Tables: smoother hover ── */
.tw table tbody tr {
  transition: background .15s ease;
}
.tw table tbody tr:hover {
  background: var(--sf2);
}

/* ── Badges: subtle polish ── */
.badge {
  letter-spacing: .3px;
  font-weight: 600;
}

/* ── Empty states: refined ── */
.empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--tx3);
  animation: fadeIn .5s ease both;
}
.empty-ic {
  font-size: 48px;
  opacity: .35;
  margin-bottom: 14px;
  display: inline-block;
  animation: floatY 3s ease-in-out infinite;
}
.empty-t {
  font-size: 15px;
  font-weight: 600;
  color: var(--tx2);
  margin-bottom: 4px;
}
.empty-s {
  font-size: 12px;
  color: var(--tx3);
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Skeleton loader utility ── */
.skel {
  background: linear-gradient(90deg, var(--sf2) 0%, var(--b) 50%, var(--sf2) 100%);
  background-size: 200% 100%;
  animation: skelShimmer 1.6s linear infinite;
  border-radius: 6px;
  color: transparent;
  user-select: none;
}
@keyframes skelShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Modals: smoother entrance ── */
.mo {
  animation: fadeIn .2s ease both;
}
.mo > div:first-child,
.mo .ct {
  animation: modalRise .28s cubic-bezier(.2,1,.3,1) both;
}
@keyframes modalRise {
  0% { opacity: 0; transform: translateY(16px) scale(.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Progressive shadow depth levels ── */
.card.elevated { box-shadow: var(--s2); }
.card.floating { box-shadow: var(--s3); }

/* ── Number font polish (tabular numbers) ── */
.stat-v,
td[style*="var(--fm)"],
[style*="font-family:var(--fm)"] {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.3px;
}

/* ── Section dividers: refined ── */
.sdv {
  background: linear-gradient(90deg, transparent, var(--b), transparent);
}

/* ── Mobile polish ── */
@media (max-width: 768px) {
  .card { border-radius: 12px; }
  .btn { min-height: 42px; }
  input, select, textarea { font-size: 16px; /* prevents iOS zoom */ }
}

/* ── Accessibility: respect motion preferences ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Scrollbars: subtle and branded ── */
* { scrollbar-width: thin; scrollbar-color: var(--b2) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--b2);
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--ac2);
}

/* ── Print: clean professional output ── */
@media print {
  .sb, .mo, .btn, #app-toast, #app-confirm-overlay, #app-confirm { display: none !important; }
  .page.on { animation: none; }
  body { background: white; color: black; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}

/* ── Live indicator pulse ── */
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gr);
  animation: livePulse 1.8s ease-in-out infinite;
  margin-inline-end: 6px;
  vertical-align: middle;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,.5); }
  50% { box-shadow: 0 0 0 6px rgba(22,163,74,0); }
}

/* ── Avatar polish ── */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ac), var(--ac2));
  color: white;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.5px;
}

/* ── Refined logo treatment ── */
.logo-text {
  font-family: var(--fe);
  letter-spacing: 2px;
  font-weight: 500;
}

/* ── Selection color ── */
::selection {
  background: var(--ac);
  color: white;
}


/* ── Notification bell ── */
#notif-bell {
  color: var(--tx2);
  transition: color .15s, transform .15s;
}
#notif-bell:hover {
  color: var(--ac);
  transform: scale(1.05);
}
#notif-bell.has-unread { 
  color: var(--ac);
}
#notif-badge {
  animation: badgePulse 2.2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, .5); }
  50% { box-shadow: 0 0 0 4px rgba(192, 57, 43, 0); }
}

/* Mobile: hide bell label */
@media (max-width: 640px) {
  #notif-bell { padding: 6px; }
}