:root{
  --a-ink:#1A1A1A; --a-navy:#0B3D62; --a-navy-deep:#062A44; --a-navy-tint:#E8F0F6;
  --a-page-bg:#FFFFFF; --a-parchment:#F4F6F8; --a-parchment-deep:#E4E9ED; --a-card:#FBFCFD;
  --a-saffron:#E27C1A; --a-saffron-deep:#B85F0E;
  --a-chilli:#A63A2B; --a-coriander:#2E6B3E;
  --a-line:#C9D2D9;
  /* elevation scale — layered (soft ambient + tighter contact shadow) for real
     depth rather than a single flat drop-shadow */
  --a-shadow-sm:0 1px 2px rgba(11,61,98,0.06), 0 1px 1px rgba(11,61,98,0.08);
  --a-shadow:0 1px 2px rgba(11,61,98,0.07), 0 6px 16px rgba(11,61,98,0.08);
  --a-shadow-lg:0 2px 4px rgba(11,61,98,0.1), 0 16px 36px rgba(11,61,98,0.16);
  --a-inset-hi:inset 0 1px 0 rgba(255,255,255,0.35);
  --a-font-body:Arial,"Segoe UI","Work Sans",-apple-system,sans-serif;
  --a-font-mono:"IBM Plex Mono","Courier New",monospace;
  --a-font-display:Arial,"Segoe UI","Work Sans",-apple-system,sans-serif;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--a-page-bg);color:var(--a-ink);font-family:var(--a-font-body);font-size:14px;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--a-font-display);font-weight:700;margin:0;}
.admin-shell{display:flex;min-height:100vh;flex-direction:column;}

/* tricolour strip — signature of an Indian govt/PSU portal */
.gov-strip{height:4px;display:flex;flex-shrink:0;}
.gov-strip span{flex:1;}
.gov-strip span:nth-child(1){background:#FF9933;}
.gov-strip span:nth-child(2){background:#FFFFFF;border-top:1px solid #ddd;border-bottom:1px solid #ddd;}
.gov-strip span:nth-child(3){background:#138808;}

.admin-shell-body{display:flex;flex:1;min-height:0;}

/* sidebar */
.admin-sidebar{
  width:222px;background:linear-gradient(180deg, var(--a-navy) 0%, var(--a-navy-deep) 100%);color:#fff;
  display:flex;flex-direction:column;padding:0 0 16px;
  position:sticky;top:0;height:calc(100vh - 4px);flex-shrink:0;
  box-shadow:2px 0 10px rgba(0,0,0,0.12);
}
.admin-sidebar .brand{
  display:flex;align-items:center;gap:10px;padding:20px 18px;margin-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.admin-sidebar .brand-mark-frame{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:#fff;border-radius:8px;padding:4px 7px;
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
.admin-sidebar .brand-mark{height:32px;width:auto;display:block;}
.admin-sidebar .brand-text{font-size:15px;font-weight:700;letter-spacing:.03em;line-height:1.2;}
.admin-sidebar .brand-text em{display:block;font-style:normal;font-size:10.5px;font-weight:600;color:var(--a-saffron);letter-spacing:.12em;}
.side-nav{display:flex;flex-direction:column;padding:0 12px;gap:2px;overflow-y:auto;}
.side-group{
  font-family:var(--a-font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  color:rgba(255,255,255,0.4);padding:14px 10px 4px;
}
.admin-sidebar a{
  height:40px;border-radius:6px;display:flex;align-items:center;gap:12px;padding:0 10px;
  font-size:13.5px;font-weight:600;color:rgba(255,255,255,0.78);position:relative;
  transition:background .12s ease, color .12s ease;
}
.admin-sidebar a .ic{font-size:16px;width:20px;text-align:center;flex-shrink:0;}
.admin-sidebar a.active{background:rgba(255,255,255,0.16);color:#fff;box-shadow:inset 3px 0 0 var(--a-saffron);}
.admin-sidebar a:hover{background:rgba(255,255,255,0.09);color:#fff;}
.admin-sidebar .spacer{flex:1;}
.side-nav-single{margin:8px 12px 0;}
.side-nav-top{
  margin:0 12px 10px;color:rgba(255,255,255,0.6)!important;
  border-bottom:1px solid rgba(255,255,255,0.1);border-radius:6px 6px 0 0;
}
.side-nav-top:hover{background:rgba(166,58,43,0.35);color:#fff!important;}

/* main */
.admin-main{flex:1;min-width:0;background:var(--a-page-bg);}
.admin-topbar{
  background:linear-gradient(90deg, var(--a-navy), var(--a-navy-deep) 140%);color:#fff;
  padding:16px 28px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:3px solid var(--a-saffron);
}
.admin-topbar h1{font-size:19px;color:#fff;}
.admin-topbar .who{font-family:var(--a-font-mono);font-size:12px;color:rgba(255,255,255,0.8);display:flex;align-items:center;gap:14px;}
.admin-content{padding:28px;max-width:1300px;}

.compliance-banner{
  padding:10px 28px;font-size:13px;font-weight:700;border-bottom:1px solid var(--a-line);
}
.compliance-banner-red{background:#FBE7E3;color:#8A2E1B;}
.compliance-banner-amber{background:#FCF0D9;color:#7A5A0A;}

/* cards / stats */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px;}
.stat-card{
  background:var(--a-card);border:1px solid var(--a-line);border-top:3px solid var(--a-navy);
  border-radius:8px;padding:18px;box-shadow:var(--a-shadow), var(--a-inset-hi);
  transition:transform .15s ease, box-shadow .15s ease;
}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--a-shadow-lg), var(--a-inset-hi);}
.stat-card .label{font-family:var(--a-font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#5a6672;}
.stat-card .value{font-family:var(--a-font-mono);font-size:26px;font-weight:700;margin-top:8px;color:var(--a-navy-deep);}
.stat-card .value.gold{color:var(--a-saffron-deep);}
@media(max-width:900px){.stat-grid{grid-template-columns:repeat(2,1fr);}}

.compliance-cat-card{transition:transform .15s ease, box-shadow .15s ease;}
.compliance-cat-card:hover{transform:translateY(-3px);box-shadow:var(--a-shadow-lg);}
.compliance-cat-card-active{border-top-color:var(--a-saffron);background:var(--a-navy-tint);}

.panel{background:var(--a-card);border:1px solid var(--a-line);border-radius:8px;margin-bottom:22px;box-shadow:var(--a-shadow);overflow:hidden;}
.panel-head{
  padding:14px 20px;background:linear-gradient(90deg, var(--a-parchment), var(--a-parchment) 60%, var(--a-navy-tint));
  border-bottom:1px solid var(--a-line);border-left:4px solid var(--a-navy);
  box-shadow:var(--a-inset-hi);
  display:flex;align-items:center;justify-content:space-between;
}
.panel-head h3{font-size:14.5px;color:var(--a-navy-deep);text-transform:uppercase;letter-spacing:.03em;}
.panel-body{padding:20px;overflow-x:auto;}

.table-scroll{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:13.5px;}
th{text-align:left;font-family:var(--a-font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#fff;background:var(--a-navy);padding:10px 14px;box-shadow:0 2px 4px rgba(6,42,68,0.18);position:relative;}
td{padding:11px 14px;border-bottom:1px solid var(--a-line);}
tr:last-child td{border-bottom:none;}
tr:nth-child(even) td{background:var(--a-parchment);}
tr:hover td{background:var(--a-navy-tint);}

.btn{
  display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:6px;border:1px solid transparent;
  font-size:13px;font-weight:700;cursor:pointer;transition:transform .1s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{background:linear-gradient(180deg, var(--a-navy), var(--a-navy-deep));color:#fff;box-shadow:0 2px 5px rgba(11,61,98,0.3), var(--a-inset-hi);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(11,61,98,0.4), var(--a-inset-hi);}
.btn-primary:active{transform:translateY(0);box-shadow:0 1px 3px rgba(11,61,98,0.3);}
.btn-dark{background:linear-gradient(180deg, var(--a-saffron), var(--a-saffron-deep));color:#fff;box-shadow:0 2px 5px rgba(226,124,26,0.3), var(--a-inset-hi);}
.btn-dark:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(226,124,26,0.4), var(--a-inset-hi);}
.btn-dark:active{transform:translateY(0);box-shadow:0 1px 3px rgba(226,124,26,0.3);}
.btn-outline{background:#fff;border-color:var(--a-navy);color:var(--a-navy);box-shadow:var(--a-shadow-sm);}
.btn-outline:hover{background:var(--a-navy-tint);transform:translateY(-1px);box-shadow:var(--a-shadow);}
.btn-danger{background:none;border-color:var(--a-chilli);color:var(--a-chilli);}
.btn-danger:hover{background:#FBE7E3;}
.btn-sm{padding:6px 10px;font-size:12px;}

.badge{font-family:var(--a-font-mono);font-size:10.5px;padding:3px 9px;border-radius:3px;text-transform:uppercase;letter-spacing:.03em;display:inline-block;border:1px solid transparent;box-shadow:var(--a-shadow-sm);}
.badge-pending{background:#FCF0D9;color:#8A5A0F;border-color:#EBD3A0;}
.badge-confirmed{background:#DCE6D5;color:#3F5A32;}
.badge-packed{background:var(--a-navy-tint);color:var(--a-navy-deep);border-color:#B9CEDD;}
.badge-shipped{background:#E0D9EC;color:#5A3F82;}
.badge-delivered{background:#DCEEE0;color:#1C6B33;border-color:#B7DABE;}
.badge-cancelled{background:#FBE7E3;color:#8A3222;border-color:#F0C4BA;}
.badge-active{background:#DCEEE0;color:#1C6B33;border-color:#B7DABE;}
.badge-inactive{background:#EAEDEF;color:#5a6672;border-color:var(--a-line);}
.badge-low{background:#FBE7E3;color:#8A3222;border-color:#F0C4BA;}

.form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.form-row label{font-size:12.5px;color:#3d4852;font-weight:700;}
.form-row input,.form-row select,.form-row textarea{
  border:1px solid var(--a-line);border-radius:3px;padding:10px 12px;font-size:14px;font-family:var(--a-font-body);
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:2px solid var(--a-navy);outline-offset:1px;}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.checkbox-row{display:flex;align-items:center;gap:8px;font-size:13.5px;}

.variant-table input{width:100%;border:1px solid var(--a-line);border-radius:3px;padding:7px 9px;font-size:13px;}
.variant-row-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr auto;gap:8px;align-items:center;margin-bottom:8px;}

.flash{padding:12px 18px;border-radius:3px;margin-bottom:18px;font-size:13.5px;border:1px solid transparent;}
.flash-success{background:#DCEEE0;color:#1C6B33;border-color:#B7DABE;}
.flash-error{background:#FBE7E3;color:#8A3222;border-color:#F0C4BA;}

.login-shell{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 15% 15%, rgba(226,124,26,0.18), transparent 40%),
    radial-gradient(circle at 85% 85%, rgba(19,136,8,0.15), transparent 45%),
    linear-gradient(150deg, var(--a-navy) 0%, var(--a-navy-deep) 100%);
}
.login-card{background:var(--a-card);padding:40px;border-radius:8px;width:380px;border-top:5px solid var(--a-saffron);box-shadow:0 20px 50px rgba(0,0,0,0.35);}
.login-card .brand{font-size:22px;font-weight:700;color:var(--a-navy);margin-bottom:6px;letter-spacing:.02em;}
.login-card p.sub{color:#5a6672;font-size:13px;margin-bottom:24px;}

.search-box{display:flex;gap:10px;margin-bottom:18px;justify-content:space-between;flex-wrap:wrap;}
.search-box input{flex:1;border:1px solid var(--a-line);border-radius:3px;padding:10px 14px;font-size:14px;}

/* ============================================================
   Responsive — tablet (≤900px) and phone (≤640px). Sidebar becomes an
   off-canvas drawer on both, toggled by a pure-CSS checkbox hack (no JS):
   #nav-toggle is a hidden checkbox; the ☰ label in the topbar flips it,
   and a full-screen backdrop label closes it again on outside tap.
   ============================================================ */
.nav-toggle-input{display:none;}
.nav-toggle-btn{display:none;font-size:20px;line-height:1;cursor:pointer;color:var(--a-navy);flex-shrink:0;}
.nav-toggle-backdrop{display:none;}

@media(max-width:900px){
  .admin-content{padding:20px;}
  .form-grid-2{grid-template-columns:1fr;}
  .variant-row-grid{grid-template-columns:1fr 1fr;}
  .login-card{width:min(380px, 90vw);padding:32px 26px;}
}

@media(max-width:640px){
  .admin-shell-body{position:relative;}
  .nav-toggle-btn{display:block;}
  .admin-sidebar{
    position:fixed;top:0;left:0;height:100vh;z-index:40;width:250px;
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:var(--a-shadow-lg);
  }
  .nav-toggle-input:checked ~ .admin-shell-body .admin-sidebar{transform:translateX(0);}
  .nav-toggle-backdrop{
    display:none;position:fixed;inset:0;background:rgba(6,42,68,0.45);z-index:35;
  }
  .nav-toggle-input:checked ~ .admin-shell-body .nav-toggle-backdrop{display:block;}

  .admin-topbar{padding:14px 16px;}
  .admin-topbar h1{font-size:16px;}
  .admin-topbar .who{display:none;}
  .admin-content{padding:14px;}
  .stat-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .stat-card{padding:14px;}
  .stat-card .value{font-size:21px;}
  .panel-body{padding:14px;}
  .panel-head{padding:12px 14px;}
  table{font-size:12.5px;}
  th,td{padding:9px 10px;}
  .search-box{flex-direction:column;}
  .btn{padding:10px 14px;}
  .login-card{padding:26px 20px;}
}