/* ============================================================
   STEELWORKS ERP — WHITE INDUSTRIAL THEME
   Fonts: DM Sans + DM Mono
   Accent: Steel Blue #1D4ED8  |  Warm: #EA580C
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-page:      #F1F5F9;
  --bg-white:     #FFFFFF;
  --bg-subtle:    #F8FAFC;
  --bg-hover:     #F1F5F9;

  /* Sidebar */
  --sb-bg:        #0F172A;
  --sb-text:      #94A3B8;
  --sb-text-act:  #FFFFFF;
  --sb-hover:     rgba(255,255,255,0.06);
  --sb-active:    rgba(255,255,255,0.10);
  --sb-border:    rgba(255,255,255,0.06);
  --sb-label:     #475569;
  --sb-w:         250px;
  --sb-collapsed: 64px;

  /* Header */
  --header-h:     60px;
  --header-bg:    #FFFFFF;
  --header-border:#E2E8F0;

  /* Text */
  --text-900:     #0F172A;
  --text-700:     #334155;
  --text-500:     #64748B;
  --text-400:     #94A3B8;
  --text-300:     #CBD5E1;

  /* Borders */
  --border:       #E2E8F0;
  --border-strong:#CBD5E1;

  /* Accent — Steel Blue */
  --accent:       #1D4ED8;
  --accent-hover: #1E40AF;
  --accent-light: #EFF6FF;
  --accent-mid:   #BFDBFE;
  --accent-text:  #1D4ED8;

  /* Status Colors */
  --green:        #16A34A;
  --green-bg:     #F0FDF4;
  --green-border: #BBF7D0;
  --red:          #DC2626;
  --red-bg:       #FEF2F2;
  --red-border:   #FECACA;
  --orange:       #EA580C;
  --orange-bg:    #FFF7ED;
  --orange-border:#FED7AA;
  --yellow:       #D97706;
  --yellow-bg:    #FFFBEB;
  --yellow-border:#FDE68A;
  --purple:       #7C3AED;
  --purple-bg:    #F5F3FF;
  --purple-border:#DDD6FE;
  --cyan:         #0891B2;
  --cyan-bg:      #ECFEFF;
  --cyan-border:  #A5F3FC;

  /* Misc */
  --radius:       8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --shadow-sm:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:    0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:    0 10px 32px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.05);
  --shadow-xl:    0 20px 60px rgba(0,0,0,.15);
  --transition:   all 0.18s ease;

  --font-ui:      'DM Sans', system-ui, sans-serif;
  --font-display: 'Barlow Condensed', sans-serif;
  --font-mono:    'DM Mono', monospace;
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
html { font-size:14px; scroll-behavior:smooth; }
body { font-family:var(--font-ui); background:var(--bg-page); color:var(--text-700); margin:0; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { text-decoration:none; color:inherit; }
button { font-family:var(--font-ui); cursor:pointer; }
input,select,textarea { font-family:var(--font-ui); }

/* Scrollbar */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--bg-page); }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:#94A3B8; }

/* ── Shell Layout ──────────────────────────────────────────── */
.erp-shell { display:flex; min-height:100vh; }

/* ── SIDEBAR ───────────────────────────────────────────────── */
.sidebar {
  width:var(--sb-w);
  background:var(--sb-bg);
  position:fixed; top:0; left:0; bottom:0;
  display:flex; flex-direction:column;
  z-index:200;
  transition:width 0.22s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.sidebar.collapsed { width:var(--sb-collapsed); }

/* Brand */
.sb-brand {
  height:var(--header-h);
  display:flex; align-items:center;
  padding:0 16px; gap:10px;
  border-bottom:1px solid var(--sb-border);
  flex-shrink:0; overflow:hidden;
}
.sb-logo {
  width:34px; height:34px; flex-shrink:0;
  background:var(--accent); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:15px; font-weight:800; color:#fff;
  letter-spacing:.02em;
}
.sb-name { overflow:hidden; white-space:nowrap; }
.sb-title { font-family:var(--font-display); font-size:16px; font-weight:700; color:#F8FAFC; letter-spacing:.06em; line-height:1.2; }
.sb-sub   { font-size:10px; color:var(--sb-label); letter-spacing:.1em; text-transform:uppercase; margin-top:1px; }

/* Scroll area */
.sb-scroll { flex:1; overflow-y:auto; overflow-x:hidden; padding:8px 0 16px; }
.sb-scroll::-webkit-scrollbar { width:3px; }
.sb-scroll::-webkit-scrollbar-track { background:var(--sb-bg); }
.sb-scroll::-webkit-scrollbar-thumb { background:#3B82F6; border-radius:10px; }
.sb-scroll::-webkit-scrollbar-thumb:hover { background:#2563EB; }

/* Group labels */
.sb-group {
  font-size:10px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--sb-label);
  padding:14px 18px 5px;
  white-space:nowrap; overflow:hidden;
  transition:opacity .15s, height .22s;
}
.sidebar.collapsed .sb-group { opacity:0; height:0; padding:0; overflow:hidden; }

/* Nav items */
.nav-link {
  display:flex; align-items:center; gap:10px;
  padding:9px 16px;
  color:var(--sb-text);
  font-size:13px; font-weight:500;
  cursor:pointer; transition:var(--transition);
  white-space:nowrap; border-radius:0;
  position:relative;
}
.nav-link:hover { background:var(--sb-hover); color:var(--sb-text-act); }
.nav-link.active { background:var(--accent); color:#fff; }
.nav-link.active .nav-ico { color:#fff; }

.nav-ico { width:18px; text-align:center; font-size:13px; flex-shrink:0; }
.nav-txt { overflow:hidden; flex:1; }
.nav-badge {
  background:#EF4444; color:#fff;
  font-size:10px; font-weight:700; padding:1px 6px;
  border-radius:10px; flex-shrink:0; margin-left:auto;
}
.nav-arrow { font-size:9px; color:var(--sb-label); flex-shrink:0; transition:transform .2s; }
.nav-link.open .nav-arrow { transform:rotate(90deg); }

/* Submenu */
.nav-sub { overflow:hidden; max-height:0; transition:max-height .22s ease; background:rgba(0,0,0,.2); }
.nav-sub.open { max-height:500px; }
.nav-sub .nav-link { padding-left:44px; font-size:12.5px; font-weight:400; }
.nav-sub .nav-link.active { background:rgba(29,78,216,.5); }

/* Collapsed nav */
.sidebar.collapsed .nav-txt,
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .nav-arrow { display:none; }
.sidebar.collapsed .nav-link { padding:10px 0; justify-content:center; }
.sidebar.collapsed .nav-sub { display:none; }

/* Sidebar toggle btn at bottom */
.sb-toggle {
  height:48px; border-top:1px solid var(--sb-border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:#fff; font-size:14px;
  flex-shrink:0; transition:var(--transition);
  width:100%;
  border-left:0;
  border-right:0;
  border-bottom:0;
  background:transparent;
  appearance:none;
}
.sb-toggle:hover { background:var(--sb-hover); color:#fff; }
.sb-toggle i { transition:transform .3s; }
.sidebar.collapsed .sb-toggle i { transform:rotate(180deg); }

/* Mobile overlay */
.sb-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.5); z-index:199;
}
.sb-overlay.show { display:block; }

/* ── HEADER ────────────────────────────────────────────────── */
.main-header {
  position:fixed; top:0; right:0;
  left:var(--sb-w);
  height:var(--header-h);
  background:var(--header-bg);
  border-bottom:1px solid var(--header-border);
  display:flex; align-items:center; padding:0 20px; gap:12px;
  z-index:100;
  transition:left .22s cubic-bezier(.4,0,.2,1);
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.main-header.sb-collapsed { left:var(--sb-collapsed); }

.mobile-toggle-btn {
  display:none; width:36px; height:36px; border-radius:8px;
  border:1px solid var(--border); background:var(--bg-white);
  align-items:center; justify-content:center; cursor:pointer;
  color:var(--text-500); flex-shrink:0;
}

.header-breadcrumb { flex:1; display:flex; align-items:center; gap:6px; }
.bc-item { font-size:13px; color:var(--text-400); }
.bc-sep  { color:var(--text-300); font-size:11px; }
.bc-item.cur { color:var(--text-700); font-weight:600; }

.header-right { display:flex; align-items:center; gap:6px; }
.header-divider { width:1px; height:22px; background:var(--border); margin:0 4px; }

.hdr-btn {
  width:36px; height:36px; border-radius:8px;
  border:1px solid var(--border); background:transparent;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-500); cursor:pointer; transition:var(--transition);
  position:relative;
}
.hdr-btn:hover { background:var(--bg-hover); color:var(--text-700); }
.notif-dot { position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%; background:#EF4444; border:1.5px solid #fff; }

.user-chip {
  display:flex; align-items:center; gap:8px;
  padding:5px 10px 5px 5px; border-radius:20px; cursor:pointer;
  border:1px solid transparent; transition:var(--transition);
  background:transparent;
  appearance:none;
}
.user-chip:hover { background:var(--bg-hover); border-color:var(--border); }
.u-avatar { width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); }
.u-name { font-size:13px; font-weight:600; color:var(--text-700); }
.u-role { font-size:10px; color:var(--text-400); text-transform:uppercase; letter-spacing:.05em; }

/* ── MAIN CONTENT ──────────────────────────────────────────── */
.main-content {
  margin-left:var(--sb-w);
  margin-top:var(--header-h);
  min-height:calc(100vh - var(--header-h));
  padding:24px;
  transition:margin-left .22s cubic-bezier(.4,0,.2,1);
}
.main-content.sb-collapsed { margin-left:var(--sb-collapsed); }

/* ── Page Header ───────────────────────────────────────────── */
.page-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:22px; gap:16px; flex-wrap:wrap;
}
.page-title { font-family:var(--font-display); font-size:26px; font-weight:700; color:var(--text-900); letter-spacing:.03em; line-height:1; }
.page-sub   { font-size:12.5px; color:var(--text-500); margin-top:4px; }
.page-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ── CARDS ─────────────────────────────────────────────────── */
.card {
  background:var(--bg-white); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.card-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--border);
  background:var(--bg-white);
}
.card-title { font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--text-900); letter-spacing:.04em; }
.card-body   { padding:18px; }
.card-footer { padding:12px 18px; border-top:1px solid var(--border); background:var(--bg-subtle); }

/* ── STAT CARDS ────────────────────────────────────────────── */
.stat-card {
  background:var(--bg-white); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:18px 20px;
  display:flex; align-items:flex-start; gap:14px;
  box-shadow:var(--shadow-sm); transition:var(--transition);
}
.stat-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.stat-card.blue   { border-top:3px solid var(--accent); }
.stat-card.green  { border-top:3px solid var(--green); }
.stat-card.red    { border-top:3px solid var(--red); }
.stat-card.orange { border-top:3px solid var(--orange); }
.stat-card.yellow { border-top:3px solid var(--yellow); }
.stat-card.purple { border-top:3px solid var(--purple); }
.stat-card.cyan   { border-top:3px solid var(--cyan); }

.stat-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.stat-icon.blue   { background:var(--accent-light); color:var(--accent); }
.stat-icon.green  { background:var(--green-bg);  color:var(--green); }
.stat-icon.red    { background:var(--red-bg);    color:var(--red); }
.stat-icon.orange { background:var(--orange-bg); color:var(--orange); }
.stat-icon.yellow { background:var(--yellow-bg); color:var(--yellow); }
.stat-icon.purple { background:var(--purple-bg); color:var(--purple); }
.stat-icon.cyan   { background:var(--cyan-bg);   color:var(--cyan); }

.stat-body { flex:1; min-width:0; }
.stat-val { font-family:var(--font-display); font-size:28px; font-weight:800; color:var(--text-900); line-height:1; }
.stat-lbl { font-size:11.5px; color:var(--text-500); margin-top:3px; font-weight:500; text-transform:uppercase; letter-spacing:.07em; }
.stat-delta { font-size:11.5px; margin-top:6px; font-weight:500; display:flex; align-items:center; gap:3px; }
.stat-delta.up   { color:var(--green); }
.stat-delta.down { color:var(--red); }
.stat-delta.neu  { color:var(--text-400); }

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:var(--radius);
  font-family:var(--font-ui); font-size:13px; font-weight:600;
  cursor:pointer; border:1px solid transparent;
  white-space:nowrap; transition:var(--transition);
  text-decoration:none;
}
.btn-sm { padding:6px 12px; font-size:12px; }
.btn-xs { padding:4px 9px; font-size:11.5px; border-radius:6px; }
.btn-icon { padding:7px; width:32px; height:32px; justify-content:center; }
.btn-lg { padding:10px 22px; font-size:14px; }

.btn-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); box-shadow:0 4px 12px rgba(29,78,216,.25); }

.btn-white { background:#fff; color:var(--text-700); border-color:var(--border); box-shadow:var(--shadow-sm); }
.btn-white:hover { background:var(--bg-hover); border-color:var(--border-strong); }

.btn-secondary { background:var(--bg-subtle); color:var(--text-700); border-color:var(--border); }
.btn-secondary:hover { background:var(--bg-hover); border-color:var(--border-strong); }

.btn-success { background:var(--green-bg); color:var(--green); border-color:var(--green-border); }
.btn-success:hover { background:var(--green); color:#fff; }

.btn-danger { background:var(--red-bg); color:var(--red); border-color:var(--red-border); }
.btn-danger:hover { background:var(--red); color:#fff; }

.btn-warning { background:var(--orange-bg); color:var(--orange); border-color:var(--orange-border); }
.btn-warning:hover { background:var(--orange); color:#fff; }

.btn-ghost { background:transparent; color:var(--text-500); border-color:transparent; }
.btn-ghost:hover { background:var(--bg-hover); color:var(--text-700); }

.btn-outline { background:transparent; color:var(--accent); border-color:var(--accent); }
.btn-outline:hover { background:var(--accent-light); }

/* ── BADGES ────────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:20px;
  font-size:11px; font-weight:600; letter-spacing:.04em;
}
.badge-dot { width:5px; height:5px; border-radius:50%; }

.badge-success  { background:var(--green-bg); color:var(--green); border:1px solid var(--green-border); }
.badge-danger   { background:var(--red-bg); color:var(--red); border:1px solid var(--red-border); }
.badge-warning  { background:var(--yellow-bg); color:var(--yellow); border:1px solid var(--yellow-border); }
.badge-orange   { background:var(--orange-bg); color:var(--orange); border:1px solid var(--orange-border); }
.badge-info     { background:var(--accent-light); color:var(--accent); border:1px solid var(--accent-mid); }
.badge-purple   { background:var(--purple-bg); color:var(--purple); border:1px solid var(--purple-border); }
.badge-cyan     { background:var(--cyan-bg); color:var(--cyan); border:1px solid var(--cyan-border); }
.badge-neutral  { background:var(--bg-hover); color:var(--text-500); border:1px solid var(--border); }

/* ── FORMS ─────────────────────────────────────────────────── */
.form-group { margin-bottom:16px; }
.form-label {
  display:block; font-size:12px; font-weight:600;
  color:var(--text-700); margin-bottom:6px; letter-spacing:.03em;
}
.form-label .req { color:var(--red); margin-left:2px; }

.form-control {
  width:100%; padding:9px 12px; border:1.5px solid var(--border);
  border-radius:var(--radius); font-size:13px; font-family:var(--font-ui);
  color:var(--text-700); background:var(--bg-white);
  transition:var(--transition); outline:none;
}
.form-control:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(29,78,216,.1); }
.form-control::placeholder { color:var(--text-400); }
.form-control:disabled, .form-control[readonly] { background:var(--bg-subtle); cursor:default; color:var(--text-500); }
.form-control.is-invalid { border-color:var(--red); box-shadow:0 0 0 3px rgba(220,38,38,.1); }
.form-control-sm { padding:6px 10px; font-size:12px; }
select.form-control { cursor:pointer; }
textarea.form-control { resize:vertical; min-height:80px; }

.form-hint  { font-size:11px; color:var(--text-400); margin-top:4px; }
.form-error { font-size:11px; color:var(--red); margin-top:4px; display:none; }
.form-error.show { display:block; }

.input-group { display:flex; }
.input-group .form-control { border-radius:var(--radius) 0 0 var(--radius); flex:1; }
.input-addon {
  padding:0 12px; background:var(--bg-subtle); border:1.5px solid var(--border);
  border-left:none; font-size:13px; color:var(--text-500);
  display:flex; align-items:center; white-space:nowrap;
  border-radius:0 var(--radius) var(--radius) 0;
}
.input-group-btn .form-control { border-radius:var(--radius) 0 0 var(--radius); }
.input-group-btn .btn { border-radius:0 var(--radius) var(--radius) 0; height:100%; }

.form-check { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; }
.form-check-input { width:15px; height:15px; accent-color:var(--accent); cursor:pointer; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.form-row-4 { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:16px; }
.col-span-2 { grid-column:span 2; }
.col-span-full { grid-column:1/-1; }

/* ── MODALS ────────────────────────────────────────────────── */
.modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(15,23,42,.5); z-index:500;
  align-items:center; justify-content:center;
  padding:20px; backdrop-filter:blur(2px);
}
.modal-overlay.open { display:flex; animation:fadeIn .15s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.modal-box {
  background:#fff; border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl);
  width:100%; max-width:540px;
  max-height:90vh; display:flex; flex-direction:column;
  animation:slideUp .18s ease;
}
.modal-box.modal-md { max-width:640px; }
.modal-box.modal-lg { max-width:820px; }
.modal-box.modal-xl { max-width:1020px; }
@keyframes slideUp { from{transform:translateY(16px);opacity:0} to{transform:none;opacity:1} }

.modal-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.modal-title { font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--text-900); letter-spacing:.03em; }
.modal-close {
  width:30px; height:30px; border-radius:8px; border:none;
  background:var(--bg-subtle); color:var(--text-500);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:var(--transition); font-size:13px;
}
.modal-close:hover { background:var(--red-bg); color:var(--red); }
.modal-body  { padding:22px; overflow-y:auto; flex:1; }
.modal-foot  { padding:14px 22px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; background:var(--bg-subtle); flex-shrink:0; border-radius:0 0 var(--radius-xl) var(--radius-xl); }

/* ── TABLES / DATATABLES ───────────────────────────────────── */
table.dataTable { width:100% !important; border-collapse:collapse; font-size:13px; }
table.dataTable thead th {
  background:var(--bg-subtle); color:var(--text-500);
  font-family:var(--font-display); font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:11px 14px; border-bottom:1px solid var(--border);
  border-top:none; white-space:nowrap; cursor:pointer;
}
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc { color:var(--accent); }
table.dataTable tbody td { padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:middle; color:var(--text-700); }
table.dataTable tbody tr:last-child td { border-bottom:none; }
table.dataTable tbody tr:hover td { background:var(--bg-subtle) !important; }

.dt-card { background:var(--bg-white); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }

.dataTables_wrapper { font-family:var(--font-ui); color:var(--text-700); }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { padding:12px 16px; font-size:12.5px; color:var(--text-500); border-bottom:1px solid var(--border); background:var(--bg-subtle); }
.dataTables_wrapper .dataTables_length { float:left; }
.dataTables_wrapper .dataTables_filter { float:right; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background:var(--bg-white); border:1.5px solid var(--border);
  color:var(--text-700); border-radius:6px; padding:5px 9px;
  font-size:12px; font-family:var(--font-ui); outline:none;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color:var(--accent); box-shadow:0 0 0 2px rgba(29,78,216,.08); }
.dataTables_wrapper .dataTables_info { padding:12px 16px; font-size:12px; color:var(--text-400); float:left; }
.dataTables_wrapper .dataTables_paginate { padding:10px 14px; float:right; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background:var(--bg-white) !important; border:1px solid var(--border) !important;
  color:var(--text-500) !important; border-radius:6px !important;
  padding:4px 10px !important; margin:0 2px !important; font-size:12px !important;
  transition:var(--transition) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background:var(--bg-hover) !important; color:var(--accent) !important; border-color:var(--accent-mid) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background:var(--accent) !important; color:#fff !important; border-color:var(--accent) !important; font-weight:700 !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity:.4 !important; cursor:default !important; }
.dataTables_wrapper::after { content:''; display:table; clear:both; }

/* ── TABS ──────────────────────────────────────────────────── */
.tab-nav { display:flex; border-bottom:2px solid var(--border); gap:0; margin-bottom:20px; }
.tab-item {
  padding:10px 18px; font-size:13px; font-weight:600;
  color:var(--text-500); cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-2px;
  transition:var(--transition); white-space:nowrap;
}
.tab-item:hover { color:var(--text-700); }
.tab-item.active { color:var(--accent); border-bottom-color:var(--accent); }
.tab-pane { display:none; }
.tab-pane.active { display:block; animation:fadeIn .15s ease; }

/* ── ALERTS ────────────────────────────────────────────────── */
.alert {
  display:flex; gap:10px; padding:12px 14px;
  border-radius:var(--radius); border:1px solid; margin-bottom:14px;
}
.alert-icon { flex-shrink:0; padding-top:1px; }
.alert-body { flex:1; font-size:13px; }
.alert-info    { background:var(--accent-light); border-color:var(--accent-mid); color:var(--accent); }
.alert-success { background:var(--green-bg);  border-color:var(--green-border); color:var(--green); }
.alert-warning { background:var(--yellow-bg); border-color:var(--yellow-border);color:var(--yellow); }
.alert-danger  { background:var(--red-bg);    border-color:var(--red-border);   color:var(--red); }

/* ── PROGRESS BAR ──────────────────────────────────────────── */
.progress { height:6px; background:var(--border); border-radius:10px; overflow:hidden; }
.progress-bar { height:100%; border-radius:10px; transition:width .8s ease; }
.progress-bar.blue   { background:var(--accent); }
.progress-bar.green  { background:var(--green); }
.progress-bar.orange { background:var(--orange); }
.progress-bar.red    { background:var(--red); }

/* ── TIMELINE ──────────────────────────────────────────────── */
.timeline { display:flex; align-items:center; overflow-x:auto; padding:6px 0 10px; }
.tl-step { display:flex; flex-direction:column; align-items:center; flex:1; position:relative; min-width:80px; }
.tl-step:not(:last-child)::after {
  content:''; position:absolute; top:14px; left:50%; width:100%;
  height:2px; background:var(--border); z-index:0;
}
.tl-step.done:not(:last-child)::after { background:var(--accent); }
.tl-step.active:not(:last-child)::after { background:var(--border); }

.tl-dot {
  width:28px; height:28px; border-radius:50%; z-index:1;
  border:2px solid var(--border); background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--text-400); transition:var(--transition);
}
.tl-step.done .tl-dot { background:var(--accent); border-color:var(--accent); color:#fff; }
.tl-step.active .tl-dot { background:#fff; border-color:var(--orange); color:var(--orange); box-shadow:0 0 0 4px rgba(234,88,12,.1); }
.tl-lbl { font-size:10px; color:var(--text-400); margin-top:6px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; text-align:center; }
.tl-step.done .tl-lbl { color:var(--accent); }
.tl-step.active .tl-lbl { color:var(--orange); }

/* ── LIVE DOT ──────────────────────────────────────────────── */
.live-badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700; color:var(--red);
  text-transform:uppercase; letter-spacing:.07em;
}
.live-badge::before {
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--red); animation:pulse 1.3s ease infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.6)} }

/* ── DROPDOWN ──────────────────────────────────────────────── */
.dropdown { position:relative; }
.dropdown-menu {
  display:none; position:absolute; right:0; top:calc(100% + 6px);
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); min-width:180px; z-index:300; overflow:hidden;
  animation:dropIn .14s ease;
}
.dropdown-menu.open { display:block; }
@keyframes dropIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
.dd-item {
  display:flex; align-items:center; gap:8px; padding:9px 14px;
  font-size:13px; color:var(--text-500); cursor:pointer; transition:var(--transition);
}
.dd-item[type="button"] {
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  font-family:inherit;
}
.dd-item:hover { background:var(--bg-hover); color:var(--text-700); }
.dd-item.danger { color:var(--red); }
.dd-item.danger:hover { background:var(--red-bg); }
.dd-sep { height:1px; background:var(--border); }

/* ── FILTER PANEL ──────────────────────────────────────────── */
.filter-panel {
  display:none; background:var(--bg-white); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:18px; margin-bottom:16px;
  box-shadow:var(--shadow-sm); animation:fadeIn .15s ease;
}
.filter-panel.open { display:block; }

/* ── STATUS BAR ────────────────────────────────────────────── */
.status-bar {
  display:flex; align-items:center; gap:16px;
  padding:10px 16px; background:var(--bg-white);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  margin-bottom:20px; flex-wrap:wrap; box-shadow:var(--shadow-sm);
}
.status-sep { width:1px; height:16px; background:var(--border); flex-shrink:0; }
.status-item { font-size:12.5px; color:var(--text-500); }
.status-item strong { color:var(--text-900); }

/* ── MONO / HEAT NUMBER ────────────────────────────────────── */
.mono { font-family:var(--font-mono); font-size:12px; color:var(--accent); }
.heat-no { font-family:var(--font-mono); font-size:12px; color:var(--accent); font-weight:500; }

/* ── TABLE ACTION BTNS ─────────────────────────────────────── */
.act-btns { display:flex; gap:4px; flex-wrap:nowrap; }

/* ── GRIDS ─────────────────────────────────────────────────── */
.g-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.g-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.g-4 { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:14px; }
.g-stat-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
.g-stat-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }

/* ── SECTION DIVIDER ───────────────────────────────────────── */
.section-hd {
  font-family:var(--font-display); font-size:12px; font-weight:700;
  color:var(--text-400); text-transform:uppercase; letter-spacing:.1em;
  display:flex; align-items:center; gap:8px; margin:20px 0 12px;
}
.section-hd::after { content:''; flex:1; height:1px; background:var(--border); }

/* ── LOGIN ─────────────────────────────────────────────────── */
.login-wrap {
  min-height:100vh; display:flex;
  background:linear-gradient(135deg,#EFF6FF 0%,#F1F5F9 50%,#E0E7FF 100%);
}
.login-left {
  flex:1; background:var(--sb-bg); display:flex; flex-direction:column;
  justify-content:center; padding:60px; position:relative; overflow:hidden;
}
.login-left::before {
  content:''; position:absolute; inset:0; opacity:.04;
  background-image:repeating-linear-gradient(0deg,transparent,transparent 39px,#fff 39px,#fff 40px),
    repeating-linear-gradient(90deg,transparent,transparent 39px,#fff 39px,#fff 40px);
}
.login-right { width:480px; display:flex; align-items:center; justify-content:center; padding:40px; }
.login-card { width:100%; max-width:400px; }

/* ── TOASTIFY OVERRIDE ─────────────────────────────────────── */
.toastify { font-family:var(--font-ui) !important; font-size:13px !important; font-weight:600 !important; border-radius:10px !important; box-shadow:var(--shadow-lg) !important; padding:12px 18px !important; }

/* ── CHART CONTAINER ───────────────────────────────────────── */
.chart-wrap { position:relative; }

/* ── UTILS ─────────────────────────────────────────────────── */
.flex { display:flex; } .items-center { align-items:center; } .justify-between { justify-content:space-between; } .justify-end { justify-content:flex-end; } .flex-1 { flex:1; } .flex-wrap { flex-wrap:wrap; } .flex-col { flex-direction:column; }
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-5{margin-top:20px}.mt-6{margin-top:24px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-5{margin-bottom:20px}.mb-6{margin-bottom:24px}
.mr-2{margin-right:8px}.ml-auto{margin-left:auto}
.p-0{padding:0}.p-4{padding:16px}.p-5{padding:20px}
.w-full{width:100%}
.text-sm{font-size:12px}.text-xs{font-size:11px}.text-lg{font-size:15px}
.text-primary{color:var(--text-900)}.text-secondary{color:var(--text-500)}.text-muted{color:var(--text-400)}
.text-accent{color:var(--accent)}.text-green{color:var(--green)}.text-red{color:var(--red)}.text-orange{color:var(--orange)}
.font-mono{font-family:var(--font-mono);font-size:12px}
.font-bold{font-weight:700}.font-semibold{font-weight:600}
.font-display{font-family:var(--font-display)}
.hidden{display:none !important}
.d-none{display:none !important}
.border-t{border-top:1px solid var(--border)}
.border-b{border-bottom:1px solid var(--border)}
.rounded{border-radius:var(--radius)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.overflow-hidden{overflow:hidden}
.relative{position:relative}
.shadow{box-shadow:var(--shadow-sm)}
.bg-white{background:var(--bg-white)}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media(max-width:1200px) {
  .g-4 { grid-template-columns:1fr 1fr 1fr; }
  .g-stat-4 { grid-template-columns:1fr 1fr; }
  .form-row-4 { grid-template-columns:1fr 1fr; }
}
@media(max-width:1024px) {
  .g-3 { grid-template-columns:1fr 1fr; }
  .g-stat-4 { grid-template-columns:1fr 1fr; }
  .login-left { display:none; }
  .login-right { width:100%; }
}
@media(max-width:768px) {
  .sidebar { left:calc(-1 * var(--sb-w)); transition:left .22s ease,width .22s ease; }
  .sidebar.mob-open { left:0; }
  .main-header { left:0 !important; }
  .main-content { margin-left:0 !important; padding:14px; }
  .mobile-toggle-btn { display:flex; }
  .header-breadcrumb { display:none; }
  .g-2,.g-3,.g-4 { grid-template-columns:1fr; }
  .g-stat-4,.g-stat-3 { grid-template-columns:1fr 1fr; }
  .form-row,.form-row-3,.form-row-4 { grid-template-columns:1fr; }
  .col-span-2 { grid-column:auto; }
  .page-header { flex-direction:column; }
}
@media(max-width:480px) {
  .g-stat-4,.g-stat-3 { grid-template-columns:1fr; }
  .modal-box { max-width:100%; border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
  .modal-overlay { align-items:flex-end; padding:0; }
}