/* ════════════════════════════════════════════════════
   LOYCOM FZCO — Premium Design System
   Colors: Charcoal #2d2d2d | Green #4CAF50
════════════════════════════════════════════════════ */

/* ── FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── ROOT VARIABLES ── */
:root{
  --green:#4CAF50;
  --green-d:#388E3C;
  --green-l:#81C784;
  --green-xl:#C8E6C9;
  --green-glow:rgba(76,175,80,0.25);
  --charcoal:#2d2d2d;
  --charcoal2:#1a1a1a;
  --charcoal3:#3a3a3a;
  --bg:#f0f4f0;
  --surface:#ffffff;
  --border:#dce8dc;
  --text:#1a2a1a;
  --muted:#6a7a6a;
  --orange:#F57C00;
  --blue:#1565C0;
  --red:#C62828;
  --sidebar-w:240px;
  --radius:14px;
  --radius-sm:9px;
  --shadow-sm:0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:0 4px 20px rgba(0,0,0,0.08);
  --shadow-green:0 8px 30px rgba(76,175,80,0.2);
  --transition:all 0.25s cubic-bezier(0.4,0,0.2,1);
}

/* ── RESET ── */
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ width:100%; height:100vh; overflow:hidden; font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; }
body{ background:var(--bg); }

/* ════════════════════════════════════════════════════
   APP WRAPPER — FLEX LAYOUT
════════════════════════════════════════════════════ */
#app-wrapper{ display:flex; flex-direction:column; height:100vh; overflow:hidden; }

/* ── MODULE BAR ── */
#module-bar{
  height:44px; min-height:44px;
  background:#ffffff;
  display:flex; align-items:center; padding:0 20px; gap:10px;
  z-index:10000;
  box-shadow:0 2px 20px rgba(0,0,0,0.4),0 1px 0 rgba(76,175,80,0.3);
  flex-shrink:0;
  position:relative;
}
#module-bar::after{
  content:'';
  position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--green),var(--green-l),var(--green),transparent);
  animation:barShine 3s linear infinite;
  pointer-events:none;
}
@keyframes barShine{
  0%{ background-position:-200% center; }
  100%{ background-position:200% center; }
}

#mod-imei-btn, #mod-parts-btn{
  padding:7px 18px; border-radius:6px; border:none; cursor:pointer;
  font-size:12px; font-weight:800; transition:var(--transition);
  letter-spacing:0.3px; position:relative; overflow:hidden;
}
#mod-imei-btn::before, #mod-parts-btn::before{
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
  transition:left 0.5s;
}
#mod-imei-btn:hover::before, #mod-parts-btn:hover::before{ left:100%; }
#mod-imei-btn:hover, #mod-parts-btn:hover{ transform:translateY(-1px); }

/* ── CONTENT AREA ── */
#content-area{ flex:1; display:flex; overflow:hidden; }






/* ════════════════════════════════════════════════════
   SIDEBAR — WHITE & PREMIUM
════════════════════════════════════════════════════ */
.sidebar{
  background:#fff;
  display:flex; flex-direction:column;
  border-right:1.5px solid var(--border);
  z-index:100;
  position:relative; overflow:hidden;
  box-shadow:4px 0 30px rgba(76,175,80,0.08);
  transition:var(--transition);
}

/* Animated stripe */
.sidebar-stripe{
  height:4px; width:100%; flex-shrink:0;
  background:linear-gradient(90deg,var(--green-d),var(--green),var(--green-l),var(--green),var(--green-d));
  background-size:300% 100%;
  animation:stripeMove 4s linear infinite;
}
@keyframes stripeMove{ 0%{ background-position:0% } 100%{ background-position:300% } }

/* Sidebar background glow */
.sidebar::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 15%,rgba(76,175,80,0.06) 0%,transparent 55%),
    radial-gradient(ellipse at 80% 85%,rgba(76,175,80,0.04) 0%,transparent 55%);
}

/* LOGO AREA */
.sidebar-logo{
  padding:20px 16px 16px; border-bottom:1.5px solid var(--border);
  position:relative; z-index:1; flex-shrink:0;
}
.logo-wrap{
  display:flex; align-items:center; justify-content:center;
  animation:logoEntrance 0.8s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes logoEntrance{
  from{ opacity:0; transform:translateX(-20px) scale(0.9); }
  to{ opacity:1; transform:translateX(0) scale(1); }
}
.sidebar-logo img{
  height:54px; width:auto;
  filter:drop-shadow(0 4px 12px rgba(76,175,80,0.3));
  animation:logoBob 3s ease-in-out infinite;
  transition:var(--transition);
}
.sidebar-logo img:hover{
  filter:drop-shadow(0 6px 18px rgba(76,175,80,0.5));
  transform:translateY(-2px) scale(1.03);
}
@keyframes logoBob{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}

/* NAV LINKS */
nav{ padding:8px 0; flex:1; overflow-y:auto; }
nav::-webkit-scrollbar{ width:0; }

.nav-link{
  display:flex; align-items:center; gap:12px;
  padding:12px 18px; color:var(--muted);
  border:none; background:none; text-align:left;
  cursor:pointer; width:100%; font-weight:600; font-size:13px;
  transition:var(--transition);
  border-left:3px solid transparent;
  position:relative; overflow:hidden;
}
.nav-link::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(76,175,80,0.08),transparent);
  opacity:0; transition:opacity 0.2s;
}
.nav-link:hover:not(.active)::after{ opacity:1; }
.nav-link:hover:not(.active){
  color:var(--green-d); border-left-color:var(--green-l);
}
.nav-link:hover:not(.active) .nav-icon{ background:var(--green-xl); transform:scale(1.05); }

.nav-link.active{
  background:#f0f0f0 !important;
  color:#444 !important;
  border-left:3px solid #bbb !important;
  font-weight:800;
}
.nav-link.active .nav-icon{ background:#e0e0e0 !important; color:#555 !important; box-shadow:none !important; }
.nav-link.active .nav-label{ color:#444 !important; }

.nav-icon{
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; background:var(--bg);
  transition:var(--transition); flex-shrink:0;
}
.nav-label{ font-size:13px; font-weight:inherit; }
.nav-badge{
  margin-left:auto; background:var(--green-xl); color:var(--green-d);
  font-size:10px; font-weight:800; padding:2px 7px;
  border-radius:99px; display:none;
  animation:badgePop 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes badgePop{ from{ transform:scale(0); } to{ transform:scale(1); } }

/* NAV ENTRANCE ANIMATION */
.nav-link{ animation:navIn 0.5s ease both; }
.nav-link:nth-child(1){ animation-delay:0.05s }
.nav-link:nth-child(2){ animation-delay:0.1s }
.nav-link:nth-child(3){ animation-delay:0.15s }
.nav-link:nth-child(4){ animation-delay:0.2s }
@keyframes navIn{
  from{ opacity:0; transform:translateX(-14px); }
  to{ opacity:1; transform:translateX(0); }
}

/* STORAGE BAR */
.storage-bar{
  margin:0 10px 8px; background:var(--bg);
  border:1px solid var(--border); border-radius:8px;
  padding:9px 11px; flex-shrink:0;
}
.storage-bar-label{
  font-size:10px; font-weight:800; color:var(--muted);
  text-transform:uppercase; letter-spacing:0.5px;
  margin-bottom:5px; display:flex; justify-content:space-between;
}
.storage-track{ background:#dce8dc; border-radius:99px; height:5px; overflow:hidden; }
.storage-fill{
  height:5px; border-radius:99px;
  background:linear-gradient(90deg,var(--green-d),var(--green));
  transition:width 0.6s cubic-bezier(0.4,0,0.2,1);
  position:relative; overflow:hidden;
}
.storage-fill::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);
  animation:shimmer 2s linear infinite;
}
@keyframes shimmer{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(100%); } }
.storage-nums{ font-size:10px; color:var(--muted); margin-top:3px; display:flex; justify-content:space-between; }

/* SIDEBAR FOOTER */
.sidebar-footer{ border-top:1.5px solid var(--border); padding:10px; flex-shrink:0; }
.btn-excel{
  width:100%; display:flex; align-items:center; gap:10px;
  padding:10px 13px; border:1.5px solid var(--border);
  background:var(--bg); color:var(--charcoal);
  border-radius:var(--radius-sm); cursor:pointer;
  font-weight:700; font-size:12px; transition:var(--transition);
}
.btn-excel:hover{
  background:var(--green-d); color:white; border-color:var(--green-d);
  box-shadow:var(--shadow-green); transform:translateY(-1px);
}

/* AUTO-SAVE DOT */
#autosave-dot{
  width:8px; height:8px; border-radius:50%; background:#ccc;
  display:inline-block; margin-right:4px; transition:background 0.3s;
}
#autosave-dot.saved{ background:var(--green); animation:savePop 0.5s ease; }
@keyframes savePop{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.8)} }

/* ════════════════════════════════════════════════════
   PAGES & LAYOUT
════════════════════════════════════════════════════ */
.page{ display:none; width:100%; animation:pageIn 0.3s ease both; }
.page.active{ display:block; }
@keyframes pageIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
.parts-page{ display:none; width:100%; animation:pageIn 0.3s ease both; }
.parts-page.active{ display:block; }

/* PAGE HEADER */
.page-header{
  display:flex; align-items:center; gap:14px;
  margin-bottom:22px; padding-bottom:16px;
  border-bottom:2px solid var(--border);
}
.page-header-icon{
  width:44px; height:44px; border-radius:12px;
  background:linear-gradient(135deg,var(--green-d),var(--green));
  display:flex; align-items:center; justify-content:center; font-size:22px;
  box-shadow:0 4px 16px rgba(76,175,80,0.4);
  animation:iconPop 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
  transition:var(--transition);
}
.page-header-icon:hover{ transform:rotate(-5deg) scale(1.1); }
@keyframes iconPop{ from{transform:scale(0) rotate(-20deg)} to{transform:scale(1) rotate(0)} }
.page-header-text h2{ font-size:20px; font-weight:900; color:var(--charcoal); }
.page-header-text span{ font-size:12px; color:var(--muted); font-weight:500; }

/* ════════════════════════════════════════════════════
   CARDS — 3D HOVER EFFECT
════════════════════════════════════════════════════ */
.card{
  background:var(--surface);
  border-radius:var(--radius);
  border:1.5px solid var(--border);
  padding:20px; margin-bottom:18px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow 0.3s,transform 0.3s;
  position:relative; overflow:hidden;
  transform-style:preserve-3d;
}
.card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--green),var(--green-l),var(--green-d));
  transform:scaleX(0); transform-origin:left;
  transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.card::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 0%,rgba(76,175,80,0.04),transparent 60%);
  opacity:0; transition:opacity 0.3s;
}
.card:hover{
  box-shadow:0 8px 30px rgba(76,175,80,0.12),var(--shadow-md);
  transform:translateY(-2px);
}
.card:hover::before{ transform:scaleX(1); }
.card:hover::after{ opacity:1; }

/* ════════════════════════════════════════════════════
   KPI CARDS — 3D FLOAT
════════════════════════════════════════════════════ */
.kpi-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
.kpi-card{
  background:white; padding:22px 16px; border-radius:var(--radius);
  text-align:center; border:1.5px solid var(--border);
  position:relative; overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
  animation:kpiFloat 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
  transform-style:preserve-3d;
  cursor:default;
}
.kpi-card:nth-child(1){ animation-delay:0.05s }
.kpi-card:nth-child(2){ animation-delay:0.1s }
.kpi-card:nth-child(3){ animation-delay:0.15s }
.kpi-card:nth-child(4){ animation-delay:0.2s }
.kpi-card:nth-child(5){ animation-delay:0.25s }
@keyframes kpiFloat{
  from{ opacity:0; transform:translateY(24px) scale(0.92); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.kpi-card:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 16px 40px rgba(76,175,80,0.18);
}
.kpi-card::before{
  content:''; position:absolute; bottom:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--green-d),var(--green));
  transform:scaleX(0.3); transition:transform 0.35s ease;
}
.kpi-card:hover::before{ transform:scaleX(1); }
.kpi-card::after{
  content:''; position:absolute; top:-40px; right:-40px;
  width:100px; height:100px; border-radius:50%;
  background:radial-gradient(circle,rgba(76,175,80,0.08),transparent 70%);
  transition:var(--transition);
}
.kpi-card:hover::after{ transform:scale(1.5); }
.kpi-card h2{
  font-size:32px; font-weight:900; color:var(--charcoal);
  margin-bottom:6px; transition:var(--transition);
  letter-spacing:-1px;
}
.kpi-card:hover h2{ transform:scale(1.1); color:var(--green-d); }
.kpi-card p{ font-size:10px; font-weight:800; color:var(--green-d); text-transform:uppercase; letter-spacing:1px; }

/* ════════════════════════════════════════════════════
   GRIDS
════════════════════════════════════════════════════ */
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:12px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:12px; }

/* ════════════════════════════════════════════════════
   FORM ELEMENTS
════════════════════════════════════════════════════ */
label{
  display:block; font-size:10px; font-weight:800;
  color:var(--muted); text-transform:uppercase;
  margin-bottom:5px; letter-spacing:0.6px;
}
input,select{
  width:100%; padding:10px 12px;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  font-size:13px; font-family:inherit;
  background:#fafcfa; transition:var(--transition); color:var(--text);
}
input:focus,select:focus{
  outline:none; border-color:var(--green);
  box-shadow:0 0 0 3px rgba(76,175,80,0.14);
  background:white; transform:translateY(-1px);
}
input:hover,select:hover{ border-color:var(--green-l); }

/* ════════════════════════════════════════════════════
   BUTTONS — 3D PRESS EFFECT
════════════════════════════════════════════════════ */
.btn-main{
  background:linear-gradient(135deg,var(--charcoal2),var(--charcoal));
  color:white; padding:13px; border:none; border-radius:10px;
  cursor:pointer; font-weight:800; width:100%; margin-top:10px;
  font-size:13px; letter-spacing:0.4px; font-family:inherit;
  box-shadow:0 4px 0 #111,0 6px 12px rgba(0,0,0,0.25);
  transition:var(--transition); position:relative; overflow:hidden;
}
.btn-main::before{
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);
  transition:left 0.5s;
}
.btn-main:hover::before{ left:100%; }
.btn-main:hover{
  background:linear-gradient(135deg,var(--green-d),var(--green));
  box-shadow:0 4px 0 var(--green-d),0 6px 20px rgba(76,175,80,0.35);
  transform:translateY(-2px);
}
.btn-main:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--green-d); }

.btn-green{
  background:linear-gradient(135deg,var(--green-d),var(--green));
  color:white; padding:9px 16px; border:none; border-radius:var(--radius-sm);
  cursor:pointer; font-weight:700; font-size:12px; font-family:inherit;
  box-shadow:0 3px 0 var(--green-d),var(--shadow-green);
  transition:var(--transition); position:relative; overflow:hidden;
}
.btn-green::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.15),transparent);
  opacity:0; transition:opacity 0.2s;
}
.btn-green:hover::before{ opacity:1; }
.btn-green:hover{ transform:translateY(-2px); box-shadow:0 5px 0 var(--green-d),0 8px 20px rgba(76,175,80,0.4); }
.btn-green:active{ transform:translateY(1px); box-shadow:0 1px 0 var(--green-d); }

.btn-blue{
  background:linear-gradient(135deg,#1565C0,#1976D2);
  color:white; padding:9px 16px; border:none; border-radius:var(--radius-sm);
  cursor:pointer; font-weight:700; font-size:12px; font-family:inherit;
  box-shadow:0 3px 0 #1565C0,0 4px 12px rgba(21,101,192,0.3);
  transition:var(--transition);
}
.btn-blue:hover{ transform:translateY(-2px); box-shadow:0 5px 0 #1565C0,0 8px 20px rgba(21,101,192,0.4); }
.btn-blue:active{ transform:translateY(1px); }

.btn-sm{
  border:none; padding:5px 10px; border-radius:6px;
  cursor:pointer; font-size:11px; font-weight:700; font-family:inherit;
  transition:var(--transition);
}
.btn-sm:hover{ transform:translateY(-1px) scale(1.05); }
.btn-sm:active{ transform:scale(0.97); }
.btn-edit{ background:linear-gradient(135deg,#1565C0,#1976D2); color:white; box-shadow:0 2px 6px rgba(21,101,192,0.3); }
.btn-del{ background:linear-gradient(135deg,var(--red),#EF5350); color:white; box-shadow:0 2px 6px rgba(198,40,40,0.3); }
.btn-view{ background:linear-gradient(135deg,#4a148c,#7b1fa2); color:white; box-shadow:0 2px 6px rgba(74,20,140,0.3); }

/* ════════════════════════════════════════════════════
   TOAST NOTIFICATION
════════════════════════════════════════════════════ */
#top-toast{
  position:fixed; top:-70px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,var(--green-d),var(--green));
  color:white; padding:12px 36px;
  border-radius:0 0 16px 16px;
  z-index:9999; font-weight:800; font-size:13px; letter-spacing:0.3px;
  box-shadow:0 8px 30px rgba(76,175,80,0.5);
  transition:top 0.4s cubic-bezier(0.18,0.89,0.32,1.28);
  white-space:nowrap;
}
#top-toast.show{ top:0; }
#top-toast.warn{
  background:linear-gradient(135deg,var(--red),#EF5350);
  box-shadow:0 8px 30px rgba(198,40,40,0.4);
  top:0;
}

/* ════════════════════════════════════════════════════
   TABLES
════════════════════════════════════════════════════ */
.table-container{
  width:100%; overflow-x:auto;
  border:1.5px solid var(--border); border-radius:12px;
  background:white; box-shadow:var(--shadow-sm);
}
.table-container::-webkit-scrollbar{ height:6px; }
.table-container::-webkit-scrollbar-track{ background:transparent; }
.table-container::-webkit-scrollbar-thumb{ background:var(--green-xl); border-radius:99px; }
table{ width:100%; border-collapse:collapse; }
th{
  background:linear-gradient(180deg,#f5faf5,#edf7ed);
  padding:12px 10px; text-align:left; font-size:10px; color:var(--muted);
  text-transform:uppercase; white-space:nowrap; font-weight:800;
  letter-spacing:0.5px; border-bottom:1.5px solid var(--border);
  position:sticky; top:0; z-index:1;
}
td{
  padding:11px 10px; border-bottom:1px solid #f0f7f0;
  font-size:12px; color:var(--text);
  transition:background 0.15s;
}
tr:last-child td{ border-bottom:none; }
tbody tr{ transition:background 0.15s; }
tbody tr:hover td{ background:linear-gradient(90deg,rgba(76,175,80,0.04),transparent); }

/* ════════════════════════════════════════════════════
   MODALS — SPRING ANIMATION
════════════════════════════════════════════════════ */
.modal-overlay{
  position:fixed; inset:0;
  background:rgba(10,20,10,0.6);
  backdrop-filter:blur(8px);
  z-index:5000; display:flex; align-items:center; justify-content:center;
}
.modal-box{
  background:white; border-radius:18px; padding:28px;
  width:680px; max-width:96vw;
  box-shadow:0 30px 80px rgba(0,0,0,0.3),0 0 0 1.5px rgba(76,175,80,0.2);
  max-height:92vh; overflow-y:auto;
  animation:modalSpring 0.35s cubic-bezier(0.34,1.56,0.64,1);
  position:relative;
}
.modal-box::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--green-d),var(--green),var(--green-l));
  border-radius:18px 18px 0 0;
}
@keyframes modalSpring{
  from{ opacity:0; transform:scale(0.85) translateY(30px); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}
.modal-box h3{ margin-bottom:18px; color:var(--charcoal); font-size:16px; font-weight:900; margin-top:8px; }
.modal-actions{ display:flex; gap:10px; margin-top:18px; }
.modal-actions button{
  flex:1; padding:12px; border:none; border-radius:10px;
  cursor:pointer; font-weight:800; font-size:13px;
  transition:var(--transition); font-family:inherit;
}
.modal-save{
  background:linear-gradient(135deg,var(--green-d),var(--green));
  color:white; box-shadow:0 3px 0 var(--green-d),var(--shadow-green);
}
.modal-save:hover{ transform:translateY(-2px); box-shadow:0 5px 0 var(--green-d),0 8px 24px rgba(76,175,80,0.4); }
.modal-save:active{ transform:translateY(1px); }
.modal-cancel{ background:#f1f5f1; color:var(--muted); }
.modal-cancel:hover{ background:#e4ede4; transform:translateY(-1px); }

/* ════════════════════════════════════════════════════
   BADGES
════════════════════════════════════════════════════ */
.badge{
  display:inline-block; padding:3px 10px;
  border-radius:6px; font-size:10px; font-weight:800;
  text-transform:uppercase; letter-spacing:0.5px;
  animation:badgeIn 0.3s ease;
}
@keyframes badgeIn{ from{transform:scale(0.8);opacity:0} to{transform:scale(1);opacity:1} }
.badge-active{ background:#e8f5e9; color:#2e7d32; }
.badge-open{ background:#fff8e1; color:#f57f17; }
.badge-done{ background:#e8f5e9; color:#2e7d32; }
.badge-partial{ background:#e3f2fd; color:#1565c0; }

/* ════════════════════════════════════════════════════
   SECTION HEADER
════════════════════════════════════════════════════ */
.section-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px;
}
.section-header h3{ font-size:15px; color:var(--charcoal); font-weight:900; }

/* ════════════════════════════════════════════════════
   PROGRESS BARS
════════════════════════════════════════════════════ */
.progress-wrap{
  background:#e8f5e9; border-radius:99px; height:8px;
  width:100%; overflow:hidden;
}
.progress-bar{
  height:8px; border-radius:99px;
  background:linear-gradient(90deg,var(--green-d),var(--green));
  transition:width 0.6s cubic-bezier(0.4,0,0.2,1);
  position:relative; overflow:hidden;
}
.progress-bar::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
  animation:progressShimmer 2s linear infinite;
}
@keyframes progressShimmer{ 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
.progress-bar.warn{ background:linear-gradient(90deg,#BF360C,var(--orange)); }

/* ════════════════════════════════════════════════════
   STAT BOXES
════════════════════════════════════════════════════ */
.stat-box{
  background:#f5fdf5; border:1.5px solid var(--border);
  border-radius:10px; padding:14px; text-align:center;
  transition:var(--transition);
}
.stat-box:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 20px rgba(76,175,80,0.12);
  border-color:var(--green-l);
}
.stat-box .num{ font-size:26px; font-weight:900; color:var(--charcoal); }
.stat-box .lbl{ font-size:10px; font-weight:800; color:var(--muted); text-transform:uppercase; margin-top:3px; letter-spacing:0.5px; }

/* ════════════════════════════════════════════════════
   SCANNER ZONE
════════════════════════════════════════════════════ */
.scanner-wrap{
  width:100%; border:2px dashed var(--border);
  border-radius:var(--radius); padding:24px 20px;
  margin-bottom:18px; text-align:center;
  background:white; transition:var(--transition);
  position:relative;
}
.scanner-wrap.scan-on{
  border-color:var(--green); border-style:solid;
  background:linear-gradient(135deg,#f1f8e9,#e8f5e9);
  box-shadow:0 0 0 5px rgba(76,175,80,0.1),0 8px 30px rgba(76,175,80,0.15);
  animation:scanPulse 2s ease-in-out infinite;
}
@keyframes scanPulse{
  0%,100%{ box-shadow:0 0 0 5px rgba(76,175,80,0.1),0 8px 30px rgba(76,175,80,0.15); }
  50%{ box-shadow:0 0 0 10px rgba(76,175,80,0.05),0 8px 40px rgba(76,175,80,0.2); }
}
.off-title{ font-size:15px; font-weight:700; color:var(--muted); margin-bottom:4px; }
.off-sub{ font-size:12px; color:#475569; margin-bottom:18px; }

.btn-start{
  background:linear-gradient(135deg,var(--green-d),var(--green));
  color:white; border:none; padding:14px 44px;
  border-radius:12px; font-size:15px; font-weight:900;
  cursor:pointer; letter-spacing:0.8px; font-family:inherit;
  box-shadow:0 4px 0 var(--green-d),0 6px 24px rgba(76,175,80,0.45);
  transition:var(--transition); position:relative; overflow:hidden;
}
.btn-start::before{
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);
  transition:left 0.6s;
}
.btn-start:hover::before{ left:100%; }
.btn-start:hover{
  transform:translateY(-3px);
  box-shadow:0 7px 0 var(--green-d),0 10px 32px rgba(76,175,80,0.55);
}
.btn-start:active{ transform:translateY(1px); box-shadow:0 2px 0 var(--green-d); }

.btn-stop{
  background:linear-gradient(135deg,var(--red),#EF5350);
  color:white; border:none; padding:12px 32px; border-radius:12px;
  font-size:13px; font-weight:900; cursor:pointer; letter-spacing:0.6px;
  box-shadow:0 4px 0 var(--red),0 6px 16px rgba(198,40,40,0.4);
  transition:var(--transition); font-family:inherit;
}
.btn-stop:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 0 var(--red),0 8px 24px rgba(198,40,40,0.5);
}
.btn-stop:active{ transform:translateY(1px); }

.scan-on-row{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:8px; }
.scan-dot{
  width:13px; height:13px; background:var(--green); border-radius:50%;
  animation:scanRipple 1.4s ease-out infinite;
}
@keyframes scanRipple{
  0%{ box-shadow:0 0 0 0 rgba(76,175,80,0.6); }
  70%{ box-shadow:0 0 0 14px rgba(76,175,80,0); }
  100%{ box-shadow:0 0 0 0 rgba(76,175,80,0); }
}
.scan-on-title{ font-size:15px; font-weight:900; color:var(--green-d); }
.scan-sub{ font-size:12px; color:var(--muted); margin-bottom:16px; }
#scan-trap{ position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }

/* ════════════════════════════════════════════════════
   INFO & WARN BOXES
════════════════════════════════════════════════════ */
.warn-box{
  background:linear-gradient(135deg,#fff8e1,#fffde7);
  border:1.5px solid #FFD54F; border-radius:10px;
  padding:12px 14px; margin-bottom:14px;
  font-size:12px; color:#E65100; font-weight:600; line-height:1.6;
}
.info-box{
  background:linear-gradient(135deg,#e8f5e9,#f1f8e9);
  border:1.5px solid var(--green-l); border-radius:10px;
  padding:12px 14px; margin-bottom:6px;
  font-size:12px; color:#2e7d32; font-weight:600;
}

/* ════════════════════════════════════════════════════
   MISC ELEMENTS
════════════════════════════════════════════════════ */
.curr-badge{
  background:#e8f5e9; color:#2e7d32;
  border-radius:5px; padding:2px 8px;
  font-size:11px; font-weight:800;
}
.imei-cell{ color:var(--green-d); font-weight:900; font-family:monospace; font-size:12px; }
.remaining-zero{ color:var(--green-d); font-weight:900; }
.remaining-some{ color:var(--orange); font-weight:900; }

/* ════════════════════════════════════════════════════
   PARTS SIDEBAR BUTTONS
════════════════════════════════════════════════════ */
#parts-sidebar-wrap button:hover{
  background:#f0f7f0 !important;
  color:#388E3C !important;
  border-left:3px solid #4CAF50 !important;
}
#parts-sidebar-wrap button.active{
  background:#f0f0f0 !important;
  color:#444 !important;
  border-left:3px solid #bbb !important;
  font-weight:800 !important;
}

/* ════════════════════════════════════════════════════
   PARTS MAIN SCROLLBAR
════════════════════════════════════════════════════ */
#parts-main-wrap{
  scrollbar-width:thin;
  scrollbar-color:var(--green-xl) transparent;
}
#parts-main-wrap::-webkit-scrollbar{ width:6px; }
#parts-main-wrap::-webkit-scrollbar-track{ background:transparent; }
#parts-main-wrap::-webkit-scrollbar-thumb{ background:var(--green-xl); border-radius:99px; }

/* ════════════════════════════════════════════════════
   BULK IMPORT MODAL
════════════════════════════════════════════════════ */
#bulk-modal .modal-box{ width:700px; }

/* ════════════════════════════════════════════════════
   RESPONSIVE SIDEBAR
════════════════════════════════════════════════════ */
.sidebar{ height:100%; }


/* ════════════════════════════════════════════════════
   FLOATING PARTICLES (sidebar background)
════════════════════════════════════════════════════ */
@keyframes floatUp{
  0%{ transform:translateY(100%) scale(0); opacity:0; }
  10%{ opacity:0.06; }
  90%{ opacity:0.03; }
  100%{ transform:translateY(-20%) scale(1.5); opacity:0; }
}

/* ════════════════════════════════════════════════════
   SELECTION COLOR
════════════════════════════════════════════════════ */
::selection{ background:rgba(76,175,80,0.2); color:var(--green-d); }