/* ============================================================
   DPMS Admin Panel — Shared Theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;700;900&family=Golos+Text:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  --bg-0:#FFFFFF;
  --bg-1:#FFFFFF;
  --bg-2:#FFFFFF;
  --sidebar-bg:rgba(255,255,255,0.98);
  --glass:rgba(255,255,255,0.9);
  --glass-strong:rgba(255,255,255,1);
  --border:rgba(16,23,40,0.08);
  --border-strong:rgba(16,23,40,0.16);
  --text-hi:#101728;
  --text-mid:#4B5568;
  --text-lo:#8891A6;
  --teal:#0FA895;
  --teal-dim:rgba(15,168,149,0.14);
  --amber:#B8790E;
  --amber-dim:rgba(184,121,14,0.14);
  --coral:#D24B4B;
  --coral-dim:rgba(210,75,75,0.14);
  --violet:#6E5AE0;
  --violet-dim:rgba(110,90,224,0.14);
  --radius:16px;
  --sidebar-w:264px;
  --topbar-h:64px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(1000px 560px at 90% -10%, rgba(139,124,246,0.12), transparent 55%),
    radial-gradient(800px 460px at -10% 10%, rgba(45,217,196,0.08), transparent 50%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 45%, var(--bg-2));
  background-attachment:fixed;
  color:var(--text-hi);
  font-family:'Golos Text', sans-serif;
  min-height:100vh;
}
::selection{background:var(--teal-dim); color:var(--teal);}
::-webkit-scrollbar{width:9px; height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border-strong); border-radius:10px;}

h1,h2,h3,h4,.display-font{font-family:'Unbounded', sans-serif; letter-spacing:-0.01em;}
.mono{font-family:'JetBrains Mono', monospace;}
.text-mid{color:var(--text-mid) !important;}
.text-lo{color:var(--text-lo) !important;}
a{text-decoration:none;}
small.hint{color:var(--text-lo); font-size:.78rem;}

.eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal); display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal); box-shadow:0 0 10px var(--teal);}

/* ============ GLASS ============ */
.glass{background:var(--glass); border:1px solid var(--border); border-radius:var(--radius); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 1px 2px rgba(16,23,40,0.04), 0 10px 28px rgba(16,23,40,0.05);}
.glass-strong{background:var(--glass-strong); border:1px solid var(--border-strong);}
.glass-hover{transition:transform .2s ease, border-color .2s ease, background .2s ease;}
.glass-hover:hover{transform:translateY(-3px); border-color:var(--border-strong); background:var(--glass-strong);}

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

/* --- Sidebar --- */
#layout-sidebar{
  width:var(--sidebar-w); flex-shrink:0; position:fixed; top:0; left:0; bottom:0;
  background:var(--sidebar-bg); border-right:1px solid var(--border);
  backdrop-filter:blur(20px); z-index:60; display:flex; flex-direction:column;
  transition:transform .25s ease;
}
.sb-brand{padding:1.3rem 1.3rem 1rem; display:flex; align-items:center; gap:10px;}
.brand-mark{width:36px;height:36px;border-radius:10px; background:linear-gradient(135deg, var(--teal), var(--violet)); display:flex; align-items:center; justify-content:center; font-family:'Unbounded'; font-weight:700; font-size:.8rem; color:#08111F; flex-shrink:0;}
.sb-brand .name{font-family:'Unbounded'; font-weight:700; font-size:1rem;}
.sb-brand .sub{font-size:.68rem; color:var(--text-lo); font-family:'JetBrains Mono';}

.sb-nav{flex:1; overflow-y:auto; padding:.5rem .8rem 1rem;}
.sb-group-label{font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-lo); padding:1rem .6rem .4rem;}
.sb-link{
  display:flex; align-items:center; gap:12px; padding:.62rem .8rem; border-radius:11px;
  color:var(--text-mid); font-size:.87rem; font-weight:500; margin-bottom:2px; transition:.15s;
  position:relative;
}
.sb-link .ic{width:18px; text-align:center; font-size:1rem;}
.sb-link:hover{background:var(--glass); color:var(--text-hi);}
.sb-link.active{background:var(--teal-dim); color:var(--teal); font-weight:600;}
.sb-link.active::before{content:""; position:absolute; left:-.8rem; top:50%; transform:translateY(-50%); width:3px; height:60%; background:var(--teal); border-radius:3px;}
.sb-link .badge-mini{margin-left:auto; font-family:'JetBrains Mono'; font-size:.66rem; background:var(--coral-dim); color:var(--coral); padding:.1rem .4rem; border-radius:6px;}

.sb-foot{padding:.9rem 1.3rem; border-top:1px solid var(--border);}
.role-badge{display:inline-flex; align-items:center; gap:6px; font-size:.72rem; color:var(--text-lo);}

/* --- Main / Topbar --- */
.app-main{flex:1; margin-left:var(--sidebar-w); min-width:0; display:flex; flex-direction:column;}
#layout-topbar{
  height:var(--topbar-h); position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,0.78); backdrop-filter:blur(14px); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; padding:0 1.5rem; gap:1rem;
}
.tb-search{
  background:var(--glass); border:1px solid var(--border); border-radius:11px; padding:.45rem .9rem;
  display:flex; align-items:center; gap:8px; max-width:340px; flex:1;
}
.tb-search input{background:transparent; border:none; color:var(--text-hi); font-size:.85rem; width:100%;}
.tb-search input:focus{outline:none;}
.tb-search input::placeholder{color:var(--text-lo);}
.tb-icon-btn{
  width:38px;height:38px;border-radius:11px; background:var(--glass); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--text-mid); position:relative; cursor:pointer; transition:.15s;
}
.tb-icon-btn:hover{background:var(--glass-strong); color:var(--text-hi);}
.tb-dot{position:absolute; top:6px; right:7px; width:7px; height:7px; border-radius:50%; background:var(--coral); box-shadow:0 0 8px var(--coral);}
.tb-avatar{width:36px;height:36px;border-radius:10px; background:linear-gradient(135deg, var(--violet), var(--teal)); display:flex; align-items:center; justify-content:center; font-family:'Unbounded'; font-weight:700; font-size:.78rem; color:#0B0F1A;}
.sb-toggle{display:none; background:transparent; border:1px solid var(--border-strong); color:var(--text-hi); border-radius:10px; width:38px; height:38px;}

.content{padding:1.6rem 1.7rem 3rem;}

.page-header{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:1.6rem;}
.page-title{font-size:1.5rem; font-weight:700; margin:0;}
.breadcrumb-mini{font-size:.76rem; color:var(--text-lo); font-family:'JetBrains Mono';}

/* ============ BUTTONS ============ */
.btn-teal{background:linear-gradient(135deg, var(--teal), #24C0AD); color:#052622; font-weight:700; border:none; border-radius:11px; padding:.55rem 1.2rem; font-size:.86rem; box-shadow:0 8px 22px rgba(45,217,196,0.22); transition:.2s;}
.btn-teal:hover{transform:translateY(-2px); color:#052622; box-shadow:0 12px 28px rgba(45,217,196,0.32);}
.btn-ghost{background:transparent; border:1px solid var(--border-strong); color:var(--text-hi); border-radius:11px; padding:.55rem 1.2rem; font-size:.86rem; font-weight:600; transition:.2s;}
.btn-ghost:hover{background:var(--glass); color:var(--text-hi); border-color:var(--teal);}
.btn-danger-ghost{background:var(--coral-dim); border:1px solid rgba(251,110,110,0.3); color:var(--coral); border-radius:10px; padding:.4rem .8rem; font-size:.8rem; font-weight:600;}

/* ============ FORM CONTROLS ============ */
.form-control, .form-select{
  background:var(--glass-strong) !important; border:1px solid var(--border) !important; color:var(--text-hi) !important;
  border-radius:10px !important; font-size:.87rem;
}
.form-control:focus, .form-select:focus{border-color:var(--teal) !important; box-shadow:0 0 0 3px var(--teal-dim) !important;}
.form-control::placeholder{color:var(--text-lo);}
.form-label{font-size:.8rem; color:var(--text-mid); font-weight:600; margin-bottom:.4rem;}
.form-check-input{background-color:var(--glass-strong); border-color:var(--border-strong);}
.form-check-input:checked{background-color:var(--teal); border-color:var(--teal);}

/* ============ KPI CARDS ============ */
.kpi-card{padding:1.2rem 1.3rem;}
.kpi-card .icon{width:36px;height:36px;border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:.95rem;}
.kpi-card .val{font-family:'JetBrains Mono'; font-weight:700; font-size:1.7rem; line-height:1;}
.trend{font-size:.74rem; font-weight:600;}
.trend.up{color:var(--teal);}
.trend.down{color:var(--coral);}

/* ============ TABLE ============ */
table.table-dark-glass{--bs-table-bg:transparent; color:var(--text-hi); border-color:var(--border); margin-bottom:0;}
table.table-dark-glass thead th{color:var(--text-lo); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; font-weight:600; border-bottom:1px solid var(--border); padding:.6rem .5rem .8rem; white-space:nowrap;}
table.table-dark-glass td{border-color:var(--border); padding:.7rem .5rem; font-size:.85rem; vertical-align:middle;}
table.table-dark-glass tbody tr{transition:background .15s;}
table.table-dark-glass tbody tr:hover{background:rgba(16,23,40,0.035);}
.table-toolbar{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:space-between; align-items:center; margin-bottom:1rem;}
.table-pager{display:flex; align-items:center; justify-content:space-between; padding-top:1rem; margin-top:.5rem; border-top:1px solid var(--border); font-size:.8rem; color:var(--text-lo);}

/* ============ BADGES ============ */
.badge-status{font-size:.7rem; font-weight:600; padding:.3rem .6rem; border-radius:8px; font-family:'JetBrains Mono'; white-space:nowrap;}
.badge-delivered{background:var(--teal-dim); color:var(--teal);}
.badge-transit{background:var(--violet-dim); color:var(--violet);}
.badge-late{background:var(--amber-dim); color:var(--amber);}
.badge-failed{background:var(--coral-dim); color:var(--coral);}
.badge-pending{background:rgba(16,23,40,0.06); color:var(--text-mid);}
.badge-active{background:var(--teal-dim); color:var(--teal);}
.badge-inactive{background:rgba(16,23,40,0.06); color:var(--text-lo);}

.role-pill{padding:.32rem .75rem; border-radius:100px; font-size:.76rem; font-weight:600; border:1px solid var(--border-strong); color:var(--text-mid); display:inline-block;}
.role-pill.on{border-color:var(--teal); color:var(--teal); background:var(--teal-dim);}

/* avatar chip */
.avatar-chip{width:30px;height:30px;border-radius:8px; display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono'; font-size:.7rem; font-weight:700; background:rgba(16,23,40,0.05); border:1px solid var(--border); color:var(--text-mid);}

/* ============ MODAL ============ */
.modal-content{background:linear-gradient(180deg, #FFFFFF, #F7F9FC); border:1px solid var(--border-strong); border-radius:18px; color:var(--text-hi);}
.modal-header, .modal-footer{border-color:var(--border);}
.btn-close{filter:invert(1) grayscale(1) brightness(1.6);}

/* ============ STEPS ============ */
.step-track{display:flex; align-items:center; gap:.5rem; margin-bottom:1.6rem;}
.step-item{display:flex; align-items:center; gap:.6rem; padding:.5rem .9rem; border-radius:11px; font-size:.82rem; color:var(--text-lo); border:1px solid var(--border);}
.step-item .n{width:22px;height:22px;border-radius:50%; background:var(--glass-strong); display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono'; font-size:.7rem;}
.step-item.active{border-color:var(--teal); color:var(--teal); background:var(--teal-dim);}
.step-item.active .n{background:var(--teal); color:#052622;}
.step-item.done{color:var(--text-mid);}
.step-item.done .n{background:var(--teal-dim); color:var(--teal);}
.step-sep{flex:1; height:1px; background:var(--border);}

/* dropzone */
.dropzone{border:1.5px dashed var(--border-strong); border-radius:16px; padding:3rem 1.5rem; text-align:center; transition:.2s; cursor:pointer;}
.dropzone:hover{border-color:var(--teal); background:var(--teal-dim);}

/* login */
.auth-shell{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem;}
.auth-card{width:100%; max-width:400px; padding:2.4rem;}

/* mobile */
.overlay-scrim{position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:55; display:none;}
@media (max-width:991px){
  #layout-sidebar{transform:translateX(-100%);}
  #layout-sidebar.open{transform:translateX(0);}
  .app-main{margin-left:0;}
  .sb-toggle{display:flex; align-items:center; justify-content:center;}
  .overlay-scrim.show{display:block;}
}
@media (max-width:575px){
  .content{padding:1.1rem 1rem 2.5rem;}
  .tb-search{display:none;}
}