/* =========================================================
   WorkForce Admin — Core Stylesheet
   Theme: "Control Room" — deep navy console + mono readouts
   ========================================================= */

:root{
  /* Palette — "Gold Vault": black + gold, tuned for a jeweller's billing console */
  --navy-950:#0b0906;
  --navy-900:#14100a;
  --navy-800:#1d1710;
  --navy-700:#2a2015;
  --blue-600:#c9982f;   /* primary gold accent (kept var name for drop-in compatibility) */
  --blue-500:#d9ac4c;
  --blue-400:#e8c574;
  --bg:#f7f4ec;
  --surface:#ffffff;
  --surface-2:#fbf8f0;
  --border:#e9e0cc;
  --slate-900:#211a10;
  --slate-700:#4a3e28;
  --slate-500:#7a6a49;
  --slate-400:#a7976f;
  --success:#17b26a;
  --success-bg:#e7faf1;
  --warning:#f5a524;
  --warning-bg:#fef6e6;
  --danger:#ef4444;
  --danger-bg:#fdecec;
  --info:#0ea5c4;

  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(15,27,60,.06);
  --shadow-md:0 6px 20px rgba(15,27,60,.08);
  --shadow-lg:0 16px 40px rgba(15,27,60,.14);

  --sidebar-w:264px;
  --sidebar-w-collapsed:84px;
  --topbar-h:68px;

  --font-display:'Sora', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}

*{box-sizing:border-box;}

html,body{
  height:100%;
}

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--slate-900);
  font-size:.925rem;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6,.font-display{
  font-family:var(--font-display);
  color:var(--slate-900);
  letter-spacing:-0.01em;
}

.text-mono, .mono{
  font-family:var(--font-mono);
}

a{color:var(--blue-600);}
a:hover{color:var(--blue-500);}

::selection{background:var(--blue-400); color:#fff;}

/* Scrollbars */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#c3cbdd; border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:#a7b1c8;}

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

/* ---------- Sidebar ---------- */
.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  background:linear-gradient(195deg, var(--navy-900) 0%, var(--navy-950) 100%);
  color:#cfd8ef;
  position:fixed;
  top:0; left:0; bottom:0;
  z-index:1040;
  display:flex;
  flex-direction:column;
  transition:transform .28s ease, width .28s ease;
  box-shadow:4px 0 24px rgba(5,10,25,.18);
}

.sidebar-brand{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:1.35rem 1.4rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  min-height:var(--topbar-h);
}

.sidebar-brand .brand-mark{
  width:38px; height:38px;
  border-radius:10px;
  background:linear-gradient(140deg, var(--blue-500), var(--blue-600) 60%, #1747a6);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-weight:700;
  color:#fff;
  font-size:1.05rem;
  flex-shrink:0;
  box-shadow:0 0 0 4px rgba(71,132,245,.18);
}

.sidebar-brand .brand-text{
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
}
.sidebar-brand .brand-text strong{
  font-family:var(--font-display);
  color:#fff;
  font-size:1.02rem;
  display:block;
}
.sidebar-brand .brand-text span{
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--blue-400);
}

.sidebar-nav{
  flex:1;
  padding:1.1rem .85rem;
  overflow-y:auto;
}

.sidebar-section-label{
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#5b6a94;
  padding:.4rem .7rem;
  margin-top:.4rem;
}

.sidebar-nav .nav-link{
  display:flex;
  align-items:center;
  gap:.85rem;
  color:#aeb8d6;
  padding:.68rem .85rem;
  border-radius:10px;
  font-size:.89rem;
  font-weight:500;
  margin-bottom:.2rem;
  position:relative;
  transition:background .15s ease, color .15s ease;
  white-space:nowrap;
}

.sidebar-nav .nav-link i{
  font-size:1.08rem;
  width:22px;
  text-align:center;
  flex-shrink:0;
  color:#7f8bb3;
  transition:color .15s ease;
}

.sidebar-nav .nav-link:hover{
  background:rgba(255,255,255,.06);
  color:#fff;
}
.sidebar-nav .nav-link:hover i{color:var(--blue-400);}

.sidebar-nav .nav-link.active{
  background:linear-gradient(90deg, rgba(71,132,245,.22), rgba(71,132,245,.04));
  color:#fff;
}
.sidebar-nav .nav-link.active i{color:var(--blue-400);}
.sidebar-nav .nav-link.active::before{
  content:'';
  position:absolute;
  left:-.85rem;
  top:8%;
  bottom:8%;
  width:3px;
  border-radius:0 4px 4px 0;
  background:linear-gradient(180deg, var(--blue-400), var(--blue-600));
  box-shadow:0 0 12px var(--blue-500);
}

.sidebar-footer{
  padding:1rem 1.1rem 1.2rem;
  border-top:1px solid rgba(255,255,255,.08);
}

.sidebar-collapse-btn{
  display:flex; align-items:center; justify-content:center;
  gap:.5rem;
  width:100%;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:#9aa6cb;
  border-radius:10px;
  padding:.5rem;
  font-size:.8rem;
  transition:.15s;
}
.sidebar-collapse-btn:hover{background:rgba(255,255,255,.1); color:#fff;}

/* Collapsed desktop state */
.app-shell.sidebar-collapsed .sidebar{width:var(--sidebar-w-collapsed);}
.app-shell.sidebar-collapsed .sidebar-brand .brand-text,
.app-shell.sidebar-collapsed .sidebar-section-label,
.app-shell.sidebar-collapsed .sidebar-nav .nav-link span,
.app-shell.sidebar-collapsed .sidebar-collapse-btn span{
  display:none;
}
.app-shell.sidebar-collapsed .sidebar-nav .nav-link{justify-content:center;}
.app-shell.sidebar-collapsed .main-wrap{margin-left:var(--sidebar-w-collapsed);}
.app-shell.sidebar-collapsed .topbar{left:var(--sidebar-w-collapsed);}

/* ---------- Main area ---------- */
.main-wrap{
  margin-left:var(--sidebar-w);
  flex:1;
  min-width:0;
  transition:margin-left .28s ease;
  display:flex;
  flex-direction:column;
}

/* ---------- Topbar ---------- */
.topbar{
  height:var(--topbar-h);
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0 1.4rem;
  position:sticky;
  top:0;
  z-index:1020;
  left:var(--sidebar-w);
  transition:left .28s ease;
}

.topbar-left{display:flex; align-items:center; gap:.9rem; min-width:0;}
.topbar-toggle{
  border:1px solid var(--border);
  background:var(--surface-2);
  width:38px; height:38px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:var(--slate-700);
  flex-shrink:0;
}
.topbar-toggle:hover{background:var(--bg); color:var(--blue-600);}

.page-title{
  font-family:var(--font-display);
  font-size:1.12rem;
  font-weight:600;
  margin:0;
  color:var(--slate-900);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.page-subtitle{
  font-size:.74rem;
  color:var(--slate-500);
  font-family:var(--font-mono);
  letter-spacing:.03em;
}

.topbar-right{display:flex; align-items:center; gap:.7rem; flex-shrink:0;}

.topbar-icon-btn{
  width:38px; height:38px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface-2);
  display:flex; align-items:center; justify-content:center;
  color:var(--slate-700);
  position:relative;
}
.topbar-icon-btn:hover{background:var(--bg); color:var(--blue-600);}
.topbar-icon-btn .ping{
  position:absolute; top:6px; right:7px;
  width:7px; height:7px; border-radius:50%;
  background:var(--danger);
  box-shadow:0 0 0 2px #fff;
}

.admin-chip{
  display:flex; align-items:center; gap:.6rem;
  padding:.32rem .6rem .32rem .32rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface-2);
}
.admin-chip .avatar{
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(140deg, var(--blue-500), var(--navy-700));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:.82rem;
}
.admin-chip .who{line-height:1.1;}
.admin-chip .who strong{display:block; font-size:.8rem;}
.admin-chip .who span{font-size:.68rem; color:var(--slate-500);}

/* ---------- Page content ---------- */
.page-content{
  padding:1.6rem;
  flex:1;
}

.container-fluid.page-content{max-width:1500px;}

/* =========================================================
   CARDS
   ========================================================= */
.card{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.card-header{
  background:transparent;
  border-bottom:1px solid var(--border);
  padding:1.1rem 1.3rem;
}
.card-body{padding:1.3rem;}

/* Stat cards */
.stat-card{
  border-radius:var(--radius-lg);
  padding:1.3rem 1.4rem;
  position:relative;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  height:100%;
}
.stat-card::after{
  content:'';
  position:absolute;
  right:-30px; top:-30px;
  width:120px; height:120px;
  border-radius:50%;
  background:var(--stat-tint, rgba(201,152,47,.10));
}
.stat-card .stat-icon{
  width:44px; height:44px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem;
  margin-bottom:.9rem;
  background:var(--stat-tint, rgba(201,152,47,.14));
  color:var(--stat-color, var(--blue-600));
  position:relative;
  z-index:1;
}
.stat-card .stat-value{
  font-family:var(--font-mono);
  font-size:1.9rem;
  font-weight:600;
  line-height:1;
  color:var(--slate-900);
  position:relative; z-index:1;
}
.stat-card .stat-label{
  font-size:.78rem;
  color:var(--slate-500);
  margin-top:.35rem;
  position:relative; z-index:1;
}
.stat-card .stat-trend{
  font-size:.72rem;
  font-family:var(--font-mono);
  margin-top:.6rem;
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.15rem .5rem;
  border-radius:999px;
  position:relative; z-index:1;
}
.stat-trend.up{background:var(--success-bg); color:var(--success);}
.stat-trend.flat{background:var(--warning-bg); color:var(--warning);}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  border-radius:10px;
  font-size:.86rem;
  font-weight:500;
  padding:.5rem 1rem;
}
.btn-sm{border-radius:8px;}
.btn-primary{
  background:var(--blue-600);
  border-color:var(--blue-600);
}
.btn-primary:hover, .btn-primary:focus{
  background:#2559c9;
  border-color:#2559c9;
}
.btn-outline-primary{
  color:var(--blue-600);
  border-color:var(--blue-600);
}
.btn-outline-secondary{
  color:var(--slate-700);
  border-color:var(--border);
}
.btn-icon{
  width:36px; height:36px;
  padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9px;
}

/* =========================================================
   TABLES
   ========================================================= */
.table-card{
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.table{
  margin-bottom:0;
  font-size:.86rem;
}
.table thead th{
  font-family:var(--font-mono);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--slate-500);
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
  padding:.85rem 1rem;
  white-space:nowrap;
  font-weight:600;
}
.table tbody td{
  padding:.85rem 1rem;
  vertical-align:middle;
  color:var(--slate-700);
  border-bottom:1px solid var(--border);
}
.table tbody tr:last-child td{border-bottom:none;}
.table tbody tr:hover{background:var(--surface-2);}

.cell-primary{
  color:var(--slate-900);
  font-weight:600;
}
.cell-mono{font-family:var(--font-mono); font-size:.82rem; color:var(--slate-700);}

.row-avatar{
  width:34px; height:34px;
  border-radius:9px;
  background:linear-gradient(140deg, var(--blue-500), var(--navy-700));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.78rem;
  flex-shrink:0;
}

.product-thumb{
  width:42px; height:42px;
  border-radius:9px;
  object-fit:cover;
  border:1px solid var(--border);
  background:var(--surface-2);
}

.badge-soft{
  font-weight:600;
  font-size:.7rem;
  padding:.38rem .6rem;
  border-radius:7px;
  letter-spacing:.01em;
}
.badge-blue{background:rgba(201,152,47,.14); color:var(--blue-600);}
.badge-green{background:var(--success-bg); color:var(--success);}
.badge-orange{background:var(--warning-bg); color:var(--warning);}
.badge-gray{background:#eef0f6; color:var(--slate-500);}

.action-btns{display:flex; gap:.35rem;}
.action-btns .btn{
  width:32px; height:32px;
  padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px;
  font-size:.85rem;
}

/* =========================================================
   FORMS
   ========================================================= */
.form-label{
  font-size:.8rem;
  font-weight:600;
  color:var(--slate-700);
  margin-bottom:.35rem;
}
.form-control, .form-select{
  border-radius:9px;
  border-color:var(--border);
  font-size:.87rem;
  padding:.55rem .8rem;
}
.form-control:focus, .form-select:focus{
  border-color:var(--blue-500);
  box-shadow:0 0 0 .2rem rgba(71,132,245,.15);
}
.required-star{color:var(--danger); margin-left:2px;}

.upload-zone{
  border:1.5px dashed var(--border);
  border-radius:var(--radius-md);
  background:var(--surface-2);
  padding:1.2rem;
  text-align:center;
  cursor:pointer;
  transition:.15s;
}
.upload-zone:hover{border-color:var(--blue-500); background:#f2f6ff;}
.upload-zone i{font-size:1.6rem; color:var(--blue-500);}
.upload-zone .hint{font-size:.72rem; color:var(--slate-500); margin-top:.3rem;}

.img-preview-wrap{
  width:100%;
  height:150px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--surface-2);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  margin-top:.7rem;
}
.img-preview-wrap img{width:100%; height:100%; object-fit:cover;}
.img-preview-wrap .placeholder{color:var(--slate-400); font-size:.78rem; text-align:center;}
.img-preview-wrap .placeholder i{font-size:1.8rem; display:block; margin-bottom:.3rem;}

/* Color swatch picker */
.color-swatch-list{display:flex; flex-wrap:wrap; gap:.5rem;}
.color-swatch{
  width:32px; height:32px;
  border-radius:50%;
  border:2px solid #fff;
  box-shadow:0 0 0 1.5px var(--border);
  cursor:pointer;
  position:relative;
}
.color-swatch.selected{box-shadow:0 0 0 2px var(--blue-600);}
.color-swatch.selected::after{
  content:'\F26E';
  font-family:'bootstrap-icons';
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.9rem;
  text-shadow:0 0 3px rgba(0,0,0,.5);
}

/* Type chips (multi-select) */
.type-chip-input{display:none;}
.type-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.4rem .75rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface-2);
  font-size:.78rem;
  color:var(--slate-700);
  cursor:pointer;
  transition:.15s;
  user-select:none;
}
.type-chip i{font-size:.85rem; color:var(--slate-400);}
.type-chip-input:checked + .type-chip{
  background:rgba(201,152,47,.14);
  border-color:var(--blue-500);
  color:var(--blue-600);
}
.type-chip-input:checked + .type-chip i{color:var(--blue-600);}
.type-chip-input:checked + .type-chip i::before{content:'\F633';}

/* =========================================================
   MODALS
   ========================================================= */
.modal-content{
  border-radius:var(--radius-lg);
  border:none;
  box-shadow:var(--shadow-lg);
}
.modal-header{
  border-bottom:1px solid var(--border);
  padding:1.1rem 1.4rem;
}
.modal-header .modal-title{
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:600;
}
.modal-body{padding:1.4rem;}
.modal-footer{
  border-top:1px solid var(--border);
  padding:1rem 1.4rem;
}

.modal-icon-badge{
  width:40px; height:40px;
  border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(201,152,47,.14);
  color:var(--blue-600);
  font-size:1.1rem;
}

/* View modal (details) */
.detail-row{
  display:flex;
  justify-content:space-between;
  padding:.65rem 0;
  border-bottom:1px dashed var(--border);
  font-size:.85rem;
}
.detail-row:last-child{border-bottom:none;}
.detail-row .k{color:var(--slate-500);}
.detail-row .v{color:var(--slate-900); font-weight:600; text-align:right;}

/* =========================================================
   FILTER BAR
   ========================================================= */
.filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  align-items:center;
}
.search-input-wrap{
  position:relative;
  flex:1;
  min-width:220px;
}
.search-input-wrap i{
  position:absolute; left:.85rem; top:50%; transform:translateY(-50%);
  color:var(--slate-400);
}
.search-input-wrap input{padding-left:2.3rem;}

/* =========================================================
   EMPTY STATE
   ========================================================= */
.empty-state{
  text-align:center;
  padding:3rem 1.5rem;
  color:var(--slate-500);
}
.empty-state i{font-size:2.4rem; color:var(--slate-400); margin-bottom:.8rem; display:block;}
.empty-state h6{color:var(--slate-700); font-family:var(--font-display);}

/* =========================================================
   MISC
   ========================================================= */
.section-eyebrow{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue-600);
  font-weight:600;
}

.divider-label{
  display:flex; align-items:center; gap:.7rem;
  color:var(--slate-500);
  font-size:.72rem;
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin:.3rem 0 .9rem;
}
.divider-label::after{content:''; flex:1; height:1px; background:var(--border);}

.sidebar-overlay{
  display:none;
  position:fixed; inset:0;
  background:rgba(10,17,40,.55);
  z-index:1030;
}

.pulse-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--success);
  display:inline-block;
  box-shadow:0 0 0 0 rgba(23,177,106,.6);
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(23,177,106,.5);}
  70%{box-shadow:0 0 0 8px rgba(23,177,106,0);}
  100%{box-shadow:0 0 0 0 rgba(23,177,106,0);}
}

.progress-console{
  height:6px;
  border-radius:4px;
  background:var(--border);
  overflow:hidden;
}
.progress-console .bar{height:100%; border-radius:4px;}

.toast-container{z-index:1080;}