/* ============================================================
   XURA -- Design System
   Black x Electric Purple
   ============================================================ */

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

:root {
  /* Core palette -- accent (same for all themes) */
  --g-500: #A855F7;
  --g-400: #C084FC;
  --g-600: #7C3AED;
  --g-glow: rgba(168, 85, 247, 0.18);
  --g-glow-sm: rgba(168, 85, 247, 0.08);

  /* State */
  --red:    #ff4d4d;
  --yellow: #ffc740;
  --blue:   #4d9eff;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* Transitions */
  --ease: cubic-bezier(.4,0,.2,1);
}

/* -- Dark theme (default) ---------------------------------------- */
html, html[data-theme="dark"] {
  --b-900: #050508;
  --b-800: #0d0d12;
  --b-700: #111118;
  --b-600: #18181f;
  --b-500: #22222c;
  --b-400: #2e2e3a;
  --b-300: #3d3d4d;

  --t-100: #ffffff;
  --t-200: #e2e2ea;
  --t-400: #9090a8;
  --t-600: #5a5a70;

  color-scheme: dark;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--b-900);
  color: var(--t-200);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--g-500); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--g-400); }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--b-800); }
::-webkit-scrollbar-thumb { background: var(--b-400); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--g-600); }

/* ============================================================
   BOOTSTRAP DARK OVERRIDES
   ============================================================ */
.card {
  background: var(--b-700) !important;
  border-color: var(--b-400) !important;
  color: var(--t-200) !important;
}
.card-header {
  background: var(--b-500) !important;
  border-bottom-color: var(--b-400) !important;
  color: var(--t-100) !important;
}
.card-body { color: var(--t-200) !important; }
.card-footer { background: var(--b-500) !important; border-top-color: var(--b-400) !important; }
.card-title { color: var(--t-100) !important; }

.form-control, .form-select {
  background: var(--b-600) !important;
  border-color: var(--b-400) !important;
  color: var(--t-100) !important;
  transition: border-color .2s, box-shadow .2s;
}
.form-control:focus, .form-select:focus {
  background: var(--b-600) !important;
  border-color: var(--g-500) !important;
  color: var(--t-100) !important;
  box-shadow: 0 0 0 3px var(--g-glow) !important;
}
.form-control::placeholder { color: var(--t-600) !important; }
.form-label {
  color: var(--t-400) !important;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 7px;
}
.form-text { color: var(--t-600) !important; }
.input-group-text {
  background: var(--b-500) !important;
  border-color: var(--b-400) !important;
  color: var(--t-400) !important;
}
.is-invalid { border-color: var(--red) !important; }
.invalid-feedback { color: var(--red) !important; font-size: 12px; }
.btn-close { filter: invert(1) grayscale(1); }

/* Alerts */
.alert-danger  { background: rgba(255,77,77,.1) !important; border-color: rgba(255,77,77,.25) !important; color: #ff9999 !important; }
.alert-success { background: rgba(168,85,247,.07) !important; border-color: rgba(168,85,247,.2) !important; color: #66ffb2 !important; }
.alert-info    { background: rgba(77,158,255,.08) !important; border-color: rgba(77,158,255,.2) !important; color: #99c8ff !important; }
.alert-warning { background: rgba(255,199,64,.08) !important; border-color: rgba(255,199,64,.2) !important; color: #ffd97a !important; }

/* Table */
.table {
  color: var(--t-200) !important;
  --bs-table-color: var(--t-200);
  --bs-table-bg: transparent;
  --bs-table-hover-bg: var(--g-glow-sm);
  --bs-table-hover-color: var(--t-100);
  --bs-table-border-color: var(--b-400);
}
.table thead { background: var(--b-500); }
.table th {
  padding: 13px 18px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--t-400) !important;
  border-bottom-color: var(--b-400) !important;
  background: var(--b-500);
}
.table td {
  padding: 14px 18px !important;
  border-bottom-color: var(--b-400) !important;
  color: var(--t-200) !important;
  vertical-align: middle;
}
.table-responsive { overflow-x: auto; }

/* Buttons */
.btn-primary {
  background: var(--g-500) !important;
  border-color: var(--g-500) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: .3px;
  box-shadow: 0 0 20px var(--g-glow);
  transition: all .2s var(--ease) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: var(--g-400) !important;
  border-color: var(--g-400) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 0 32px rgba(168,85,247,.3) !important;
}
.btn-secondary {
  background: var(--b-500) !important;
  border-color: var(--b-400) !important;
  color: var(--t-200) !important;
  font-weight: 600 !important;
  transition: all .2s var(--ease) !important;
}
.btn-secondary:hover, .btn-secondary:focus {
  background: var(--b-400) !important;
  border-color: var(--g-600) !important;
  color: var(--t-100) !important;
}
.btn-danger {
  background: rgba(255,77,77,.15) !important;
  border-color: rgba(255,77,77,.35) !important;
  color: var(--red) !important;
  font-weight: 600 !important;
  transition: all .2s var(--ease) !important;
}
.btn-danger:hover, .btn-danger:focus {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: white !important;
}
.btn-sm { padding: 5px 12px !important; font-size: 12px !important; }

/* Dropdown */
.dropdown-menu { background: var(--b-600); border-color: var(--b-400); }
.dropdown-item { color: var(--t-200); }
.dropdown-item:hover { background: var(--b-500); color: var(--g-500); }
.dropdown-divider { border-color: var(--b-400); }

/* Modal */
.modal-content { background: var(--b-700) !important; border-color: var(--b-400) !important; color: var(--t-200) !important; }
.modal-header { border-bottom-color: var(--b-400) !important; }
.modal-footer { border-top-color: var(--b-400) !important; }

/* Badge colours */
.badge.bg-primary   { background: rgba(168,85,247,.15) !important; color: var(--g-500) !important; }
.badge.bg-success   { background: rgba(168,85,247,.12) !important; color: var(--g-400) !important; }
.badge.bg-danger    { background: rgba(255,77,77,.15) !important;  color: var(--red)   !important; }
.badge.bg-warning   { background: rgba(255,199,64,.12) !important; color: var(--yellow) !important; }
.badge.bg-secondary { background: var(--b-500) !important; color: var(--t-400) !important; }

.text-muted { color: var(--t-400) !important; }
.border-top, .border-bottom, .border { border-color: var(--b-400) !important; }

/* ============================================================
   APP SHELL LAYOUT
   ============================================================ */
.app-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--b-900);
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  width: 240px;
  background: var(--b-800);
  border-right: 1px solid var(--b-400);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  transition: width .28s cubic-bezier(.4,0,.2,1);
}

/* collapsed — icon rail only */
.sidebar.collapsed {
  width: 60px !important;
}

.sidebar.collapsed .sidebar-brand-text,
.sidebar.collapsed .sidebar-nav-link span,
.sidebar.collapsed .sidebar-user-name,
.sidebar.collapsed .sidebar-user-role,
.sidebar.collapsed .sidebar-footer .fa-sign-out-alt {
  opacity: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .2s, width .2s;
}

.sidebar.collapsed .sidebar-brand {
  justify-content: center;
}

.sidebar.collapsed .sidebar-nav-link {
  justify-content: center;
  padding: 10px 0;
  gap: 0;
}

.sidebar.collapsed .sidebar-user {
  justify-content: center;
  padding: 8px 0;
}

.sidebar.collapsed .sidebar-nav-link.active::after { display: none; }

.sidebar.collapsed .sidebar-nav-link i,
.sidebar.collapsed .sidebar-user-avatar {
  margin: 0 auto;
}

/* green accent line top of sidebar */
.sidebar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--g-500), transparent);
}

.sidebar-header {
  padding: 28px 20px 20px;
  border-bottom: 1px solid var(--b-400);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-brand-icon {
  width: 34px;
  height: 34px;
  background: var(--g-500);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #ffffff;
  font-weight: 900;
  flex-shrink: 0;
  box-shadow: 0 0 14px var(--g-glow);
}

.sidebar-brand-text {
  display: flex;
  flex-direction: column;
}

.sidebar-brand-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--t-100);
  letter-spacing: 2px;
  line-height: 1;
}

.sidebar-brand-sub {
  font-size: 9px;
  font-weight: 500;
  color: var(--g-600);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 2px;
}

/* nav section labels */
.sidebar-section {
  padding: 20px 20px 6px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--t-600);
}

.sidebar-nav {
  flex: 1;
  padding: 8px 10px;
  list-style: none;
}

.sidebar-nav-item { margin: 2px 0; }

.sidebar-nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  color: var(--t-400);
  font-weight: 500;
  font-size: 13.5px;
  transition: all .2s var(--ease);
  position: relative;
  overflow: hidden;
}

.sidebar-nav-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--g-glow-sm);
  opacity: 0;
  transition: opacity .2s;
  border-radius: var(--r-md);
}

.sidebar-nav-link:hover {
  color: var(--t-100);
  text-decoration: none;
}
.sidebar-nav-link:hover::before { opacity: 1; }

.sidebar-nav-link.active {
  color: var(--g-500);
  background: var(--g-glow-sm);
  font-weight: 600;
}

.sidebar-nav-link.active::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  background: var(--g-500);
  border-radius: 99px 0 0 99px;
  box-shadow: 0 0 8px var(--g-500);
}

.sidebar-nav-link i {
  font-size: 15px;
  width: 17px;
  text-align: center;
  flex-shrink: 0;
}

/* sidebar user card */
.sidebar-footer {
  padding: 12px;
  border-top: 1px solid var(--b-400);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background .2s;
  border: 1px solid transparent;
}

.sidebar-user:hover {
  background: var(--g-glow-sm);
  border-color: rgba(168,85,247,.12);
}

.sidebar-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--g-600), var(--g-500));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
  flex-shrink: 0;
}

.sidebar-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--t-100);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.sidebar-user-role {
  font-size: 10px;
  color: var(--g-600);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  height: 58px;
  background: var(--b-800);
  border-bottom: 1px solid var(--b-400);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  flex-shrink: 0;
}

.topbar-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--t-100);
  margin: 0;
  letter-spacing: .3px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* topbar clock badge */
.topbar-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--t-400);
  background: var(--b-600);
  border: 1px solid var(--b-400);
  padding: 5px 12px;
  border-radius: 99px;
}

.topbar-logout {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  background: rgba(255,77,77,.08);
  border: 1px solid rgba(255,77,77,.2);
  border-radius: var(--r-md);
  color: var(--red);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s var(--ease);
}

.topbar-logout:hover {
  background: var(--red);
  color: white;
  border-color: var(--red);
}

/* ============================================================
   CONTENT WRAPPER
   ============================================================ */
.content-wrapper {
  flex: 1;
  overflow-y: auto;
  padding: 28px 30px;
}

/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-header {
  margin-bottom: 28px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.page-header-text {}

.page-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--t-100);
  margin: 0 0 3px;
  letter-spacing: -.3px;
  line-height: 1.2;
}

.page-subtitle {
  font-size: 13px;
  color: var(--t-400);
  margin: 0;
}

/* ============================================================
   STAT CARDS
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.stat-card {
  background: var(--b-700);
  border: 1px solid var(--b-400);
  border-radius: var(--r-lg);
  padding: 22px 20px;
  position: relative;
  overflow: hidden;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}

.stat-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--g-600), var(--g-500));
  opacity: 0;
  transition: opacity .25s;
}

.stat-card:hover {
  border-color: rgba(168,85,247,.3);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(168,85,247,.08);
}

.stat-card:hover::after { opacity: 1; }

.stat-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--g-glow-sm);
  border: 1px solid rgba(168,85,247,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: var(--g-500);
  margin-bottom: 16px;
}

.stat-card-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--t-100);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -1px;
}

.stat-card-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--t-400);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ============================================================
   XURA PANEL (generic card)
   ============================================================ */
.xura-panel {
  background: var(--b-700);
  border: 1px solid var(--b-400);
  border-radius: var(--r-lg);
  margin-bottom: 20px;
  transition: border-color .25s;
}

.xura-panel:hover { border-color: var(--b-300); }

.xura-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--b-400);
}

.xura-panel-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--t-100);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.xura-panel-title i { color: var(--g-500); }

.xura-panel-body { padding: 22px; }

/* ============================================================
   TWO-COLUMN GRID
   ============================================================ */
.xura-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.xura-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ============================================================
   XURA TABLE (inside panel, no outer borders)
   ============================================================ */
.xura-table-wrap {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--b-400);
}

/* ============================================================
   BADGES
   ============================================================ */
.xura-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
}

.xura-badge-green   { background: rgba(168,85,247,.12);  color: var(--g-500); }
.xura-badge-red     { background: rgba(255,77,77,.12);  color: var(--red);   }
.xura-badge-yellow  { background: rgba(255,199,64,.1);  color: var(--yellow);}
.xura-badge-blue    { background: rgba(77,158,255,.1);  color: var(--blue);  }
.xura-badge-neutral { background: var(--b-500);         color: var(--t-400); }

/* Legacy badge helpers (keep backward compat) */
.badge-primary   { background: rgba(168,85,247,.12) !important;  color: var(--g-500) !important; }
.badge-success   { background: rgba(168,85,247,.08) !important;  color: var(--g-400) !important; }
.badge-warning   { background: rgba(255,199,64,.1) !important;  color: var(--yellow) !important;}
.badge-danger    { background: rgba(255,77,77,.12) !important;  color: var(--red) !important;   }
.badge-secondary { background: var(--b-500) !important;         color: var(--t-400) !important; }

/* ============================================================
   FORM SECTIONS
   ============================================================ */
.form-section {
  border-top: 1px solid var(--b-400);
  padding-top: 22px;
  margin-top: 22px;
}

.form-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--t-400);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-section-title i { color: var(--g-500); }

/* ============================================================
   USER AVATAR (generic)
   ============================================================ */
.u-avatar {
  border-radius: 50%;
  background: linear-gradient(135deg, var(--g-600), var(--g-500));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #040404;
  flex-shrink: 0;
}

/* ============================================================
   INFO ROW (label + value pairs)
   ============================================================ */
.info-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 18px;
}

.info-row-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--t-600);
}

.info-row-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--t-100);
}

/* ============================================================
   PDF CARD (library grid)
   ============================================================ */
.pdf-card {
  background: var(--b-700);
  border: 1px solid var(--b-400);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}

.pdf-card:hover {
  border-color: rgba(168,85,247,.3);
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(168,85,247,.07);
}

.pdf-card-top {
  background: linear-gradient(135deg, var(--b-600), var(--b-500));
  padding: 20px;
  border-bottom: 1px solid var(--b-400);
  display: flex;
  align-items: center;
  gap: 12px;
}

.pdf-card-icon {
  width: 42px;
  height: 42px;
  background: rgba(168,85,247,.1);
  border: 1px solid rgba(168,85,247,.2);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--g-500);
  font-size: 18px;
  flex-shrink: 0;
}

.pdf-card-filename {
  font-size: 13px;
  font-weight: 600;
  color: var(--t-100);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.pdf-card-body { padding: 18px; }

.pdf-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 13px;
}

.pdf-stat-row:last-of-type { margin-bottom: 0; }

.pdf-stat-key { color: var(--t-400); }

.pdf-stat-val {
  font-weight: 700;
  color: var(--g-500);
}

.pdf-card-actions {
  display: flex;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--b-400);
  background: var(--b-800);
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  background: var(--b-600);
  border: 1px solid var(--b-400);
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--t-600);
  margin: 0 auto 16px;
}

.empty-state-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--t-200);
  margin-bottom: 6px;
}

.empty-state-text {
  font-size: 13px;
  color: var(--t-400);
  max-width: 320px;
  margin: 0 auto;
}

/* ============================================================
   PROGRESS BAR (analytics)
   ============================================================ */
.xura-progress-bg {
  height: 5px;
  background: var(--b-500);
  border-radius: 99px;
  overflow: hidden;
  flex: 1;
}

.xura-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--g-600), var(--g-500));
  border-radius: 99px;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes xura-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes xura-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.xura-anim { animation: xura-in .35s var(--ease) both; }

/* stagger children */
.xura-anim-stagger > * {
  animation: xura-in .35s var(--ease) both;
}
.xura-anim-stagger > *:nth-child(1) { animation-delay: .05s; }
.xura-anim-stagger > *:nth-child(2) { animation-delay: .10s; }
.xura-anim-stagger > *:nth-child(3) { animation-delay: .15s; }
.xura-anim-stagger > *:nth-child(4) { animation-delay: .20s; }

/* ============================================================
   UTILITIES
   ============================================================ */
.d-flex  { display: flex !important; }
.flex-1  { flex: 1; }
.gap-8   { gap: 8px; }
.gap-12  { gap: 12px; }
.gap-16  { gap: 16px; }
.gap-20  { gap: 20px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }

.text-green  { color: var(--g-500) !important; }
.text-red    { color: var(--red)   !important; }
.text-muted-custom { color: var(--t-400); }
.fw-800 { font-weight: 800 !important; }

.divider {
  height: 1px;
  background: var(--b-400);
  margin: 20px 0;
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
.xura-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 380px;
  width: calc(100% - 32px);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(32px) scale(.97); }
  to   { opacity: 1; transform: translateX(0)    scale(1);   }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0)    scale(1);   max-height: 120px; margin-bottom: 0; }
  to   { opacity: 0; transform: translateX(32px) scale(.97); max-height: 0;     margin-bottom: -10px; }
}
@keyframes toast-progress {
  from { width: 100%; }
  to   { width: 0%; }
}

.xura-toast {
  background: var(--b-700);
  border: 1px solid var(--b-300);
  border-radius: var(--r-lg);
  padding: 14px 14px 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  pointer-events: all;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  animation: toast-in .3s var(--ease) both;
  position: relative;
  overflow: hidden;
}
.xura-toast.removing {
  animation: toast-out .28s var(--ease) both;
  pointer-events: none;
}
.xura-toast-success { border-left: 3px solid var(--g-500); }
.xura-toast-error   { border-left: 3px solid var(--red);    }
.xura-toast-warning { border-left: 3px solid var(--yellow); }
.xura-toast-info    { border-left: 3px solid var(--blue);   }

.xura-toast-icon { font-size: 17px; flex-shrink: 0; margin-top: 2px; }
.xura-toast-success .xura-toast-icon { color: var(--g-500); }
.xura-toast-error   .xura-toast-icon { color: var(--red);    }
.xura-toast-warning .xura-toast-icon { color: var(--yellow); }
.xura-toast-info    .xura-toast-icon { color: var(--blue);   }

.xura-toast-body  { flex: 1; min-width: 0; }
.xura-toast-title { font-size: 13px; font-weight: 700; color: var(--t-100); margin-bottom: 2px; }
.xura-toast-msg   { font-size: 12.5px; color: var(--t-400); line-height: 1.5; }

.xura-toast-close {
  background: none; border: none; color: var(--t-600);
  cursor: pointer; font-size: 13px; padding: 2px; line-height: 1;
  flex-shrink: 0; margin-top: 2px; transition: color .15s;
}
.xura-toast-close:hover { color: var(--t-200); }

.xura-toast-bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  animation: toast-progress 4s linear forwards;
}
.xura-toast-success .xura-toast-bar { background: var(--g-500); }
.xura-toast-error   .xura-toast-bar { background: var(--red);    }
.xura-toast-warning .xura-toast-bar { background: var(--yellow); }
.xura-toast-info    .xura-toast-bar { background: var(--blue);   }

/* ============================================================
   FORM FIELD COMPONENTS
   ============================================================ */
.xura-field { position: relative; margin-bottom: 20px; }
.xura-field:last-of-type { margin-bottom: 0; }

.xura-field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--t-400);
  margin-bottom: 7px;
}
.xura-field-label .req { color: var(--red); margin-left: 3px; }
.xura-field-label .opt { color: var(--t-600); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; margin-left: 4px; }

.xura-field-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}

.xura-field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--t-600);
  font-size: 13px;
  pointer-events: none;
  z-index: 2;
  transition: color .2s;
}

.xura-field-wrap:focus-within .xura-field-icon { color: var(--g-500); }

.xura-field-wrap .form-control,
.xura-field-wrap .form-select {
  padding-left: 40px !important;
}

.xura-field-wrap .form-control.no-icon,
.xura-field-wrap .form-select.no-icon {
  padding-left: 14px !important;
}

/* eye toggle for password */
.xura-field-eye {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--t-600);
  cursor: pointer;
  font-size: 13px;
  padding: 4px;
  z-index: 2;
  transition: color .15s;
  line-height: 1;
}
.xura-field-eye:hover { color: var(--g-500); }

.xura-field-wrap .form-control.has-eye { padding-right: 40px !important; }

/* hint text below field */
.xura-field-hint { font-size: 11.5px; color: var(--t-600); margin-top: 5px; }

/* char counter */
.xura-field-counter { font-size: 11px; color: var(--t-600); text-align: right; margin-top: 4px; }

/* ── Enhanced table search bar ─────────────────────────── */
.xura-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--b-400);
  flex-wrap: wrap;
}
.xura-search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 320px;
}
.xura-search-wrap i {
  position: absolute;
  left: 13px; top: 50%;
  transform: translateY(-50%);
  color: var(--t-600);
  font-size: 13px;
  pointer-events: none;
}
.xura-search-wrap input {
  width: 100%;
  background: var(--b-600);
  border: 1px solid var(--b-400);
  border-radius: var(--r-md);
  color: var(--t-100);
  font-size: 13px;
  padding: 8px 12px 8px 36px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.xura-search-wrap input:focus {
  border-color: var(--g-500);
  box-shadow: 0 0 0 3px var(--g-glow);
}
.xura-search-wrap input::placeholder { color: var(--t-600); }

/* ── Table row animation ─────────────────────────────── */
.table tbody tr {
  transition: background .15s;
}
.table tbody tr.hidden-row { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Large tablets */
@media (max-width: 1280px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .xura-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* Tablets */
@media (max-width: 992px) {
  .xura-grid-2 { grid-template-columns: 1fr; }
  .xura-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .content-wrapper { padding: 20px; }
}

/* Mobile */
@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .xura-grid-2,
  .xura-grid-3 { grid-template-columns: 1fr; }

  /* Sidebar: slide-in drawer */
  .sidebar {
    position: fixed !important;
    left: -260px;
    top: 0; bottom: 0;
    width: 240px !important;
    flex: none !important;
    transition: left .3s cubic-bezier(.4,0,.2,1);
    z-index: 1050;
    box-shadow: none;
  }
  .sidebar.open {
    left: 0 !important;
    box-shadow: 8px 0 32px rgba(0,0,0,.5);
  }
  /* On mobile, collapsed = same as closed — open always wins */
  .sidebar.collapsed { left: -260px; width: 240px !important; }
  .sidebar.open.collapsed { left: 0 !important; }

  /* Main content fills full width when sidebar is off-screen */
  .main-content { width: 100% !important; margin-left: 0 !important; }

  /* Overlay behind open drawer */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(5,5,8,.6);
    backdrop-filter: blur(2px);
    z-index: 999;
  }
  .sidebar-overlay.show { display: block; }

  .content-wrapper { padding: 14px; }
  .topbar { padding: 0 14px; }
  .topbar-title { font-size: 13px; }
  .topbar-time { display: none; }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
  }

  .pdf-card-actions { flex-wrap: wrap; }
  .stat-card { padding: 18px 16px; }

  /* Table scroll hint */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .table th, .table td { padding: 10px 12px !important; font-size: 12px !important; }
}

/* Small mobile */
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .content-wrapper { padding: 10px; }
  .topbar-logout span { display: none; }
  .xura-panel-header { flex-wrap: wrap; gap: 8px; }
}
/* ========================================
   XURA STARBUCKS - PROFESSIONAL UI THEME
   ======================================== */

:root {
    --primary: #A855F7;
    --primary-dark: #7C3AED;
    --primary-light: #C084FC;
    --secondary: #0f1419;
    --secondary-light: #1a1f26;
    --secondary-lighter: #252b33;
    --text-primary: #ffffff;
    --text-secondary: #b0b8c1;
    --border: #353d47;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;
}

/* ========================================
   RESET & BASE
   ======================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    background-color: var(--secondary);
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 14px;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-light);
    text-decoration: none;
}

/* ========================================
   BOOTSTRAP DARK THEME OVERRIDES
   ======================================== */

.bg-white  { background-color: var(--secondary-light)   !important; }
.bg-light  { background-color: var(--secondary-lighter) !important; }
.text-dark { color: var(--text-primary)   !important; }
.text-muted { color: var(--text-secondary) !important; }
.border-top    { border-color: var(--border) !important; }
.border-bottom { border-color: var(--border) !important; }
.border        { border-color: var(--border) !important; }

/* Cards */
.card {
    background: var(--secondary-light) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}
.card-header {
    background: var(--secondary-lighter) !important;
    border-bottom-color: var(--border) !important;
    color: var(--text-primary) !important;
}
.card-body  { color: var(--text-primary) !important; }
.card-footer {
    background: var(--secondary-lighter) !important;
    border-top-color: var(--border) !important;
}
.card-title { color: var(--text-primary)   !important; }
.card-text  { color: var(--text-secondary) !important; }

/* Alerts */
.alert-danger {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #fca5a5 !important;
}
.alert-success {
    background: rgba(168,85,247, 0.12) !important;
    border-color: rgba(168,85,247, 0.3) !important;
    color: #6ee7b7 !important;
}
.alert-info {
    background: rgba(59, 130, 246, 0.12) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #93c5fd !important;
}
.alert-warning {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fcd34d !important;
}
.btn-close { filter: invert(1) grayscale(1); }

/* Form controls */
.form-control,
.form-select {
    background-color: var(--secondary-lighter) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-control:focus,
.form-select:focus {
    background-color: var(--secondary-light) !important;
    border-color: var(--primary) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 3px rgba(168,85,247, 0.15) !important;
}
.form-control::placeholder { color: var(--text-secondary) !important; }
.form-label {
    color: var(--text-primary) !important;
    font-weight: 600;
    margin-bottom: 6px;
}
.form-text      { color: var(--text-secondary) !important; }
.input-group-text {
    background-color: var(--secondary-lighter) !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}
.is-invalid      { border-color: var(--danger) !important; }
.invalid-feedback { color: var(--danger) !important; }

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    border-color: var(--primary-dark) !important;
    color: #0f1419 !important;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(168,85,247, 0.3);
    transition: all 0.3s ease;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%) !important;
    border-color: var(--primary) !important;
    color: #0f1419 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(168,85,247, 0.4) !important;
}
.btn-secondary {
    background: var(--secondary-lighter) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
    font-weight: 600;
    transition: all 0.3s ease;
}
.btn-secondary:hover,
.btn-secondary:focus {
    background: var(--border) !important;
    border-color: var(--primary) !important;
    color: var(--text-primary) !important;
}
.btn-danger {
    background: var(--danger) !important;
    border-color: #dc2626 !important;
    color: white !important;
    font-weight: 600;
    transition: all 0.3s ease;
}
.btn-danger:hover,
.btn-danger:focus {
    background: #dc2626 !important;
    border-color: #b91c1c !important;
    transform: translateY(-2px);
}
.btn-success {
    background: var(--success) !important;
    border-color: #059669 !important;
    color: white !important;
    font-weight: 600;
}
.btn-sm {
    padding: 5px 12px !important;
    font-size: 12px !important;
}

/* Tables */
.table {
    color: var(--text-primary) !important;
    --bs-table-color: var(--text-primary);
    --bs-table-bg: transparent;
    --bs-table-hover-bg: rgba(168,85,247,0.05);
    --bs-table-hover-color: var(--text-primary);
    --bs-table-striped-bg: rgba(168,85,247, 0.03);
    --bs-table-border-color: var(--border);
}
.table thead { background: var(--secondary-lighter); }
.table th {
    padding: 14px 16px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-secondary) !important;
    border-bottom-color: var(--border) !important;
    background: var(--secondary-lighter);
}
.table td {
    padding: 14px 16px !important;
    border-bottom-color: var(--border) !important;
    color: var(--text-primary) !important;
    vertical-align: middle;
}
.table-responsive {
    overflow-x: auto;
}

/* Dropdowns */
.dropdown-menu {
    background: var(--secondary-light);
    border-color: var(--border);
}
.dropdown-item { color: var(--text-primary); }
.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--secondary-lighter);
    color: var(--primary);
}
.dropdown-divider { border-color: var(--border); }

/* Modals */
.modal-content {
    background: var(--secondary-light) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}
.modal-header { border-bottom-color: var(--border) !important; }
.modal-footer { border-top-color: var(--border)   !important; }

/* Badge colour variants */
.badge.bg-primary   { background-color: rgba(168,85,247,0.2)   !important; color: var(--primary)  !important; }
.badge.bg-success   { background-color: rgba(168,85,247, 0.2)  !important; color: var(--success)  !important; }
.badge.bg-danger    { background-color: rgba(239, 68, 68, 0.2)   !important; color: var(--danger)   !important; }
.badge.bg-warning   { background-color: rgba(245, 158, 11, 0.2)  !important; color: var(--warning)  !important; }
.badge.bg-secondary { background-color: var(--secondary-lighter) !important; color: var(--text-secondary) !important; }

/* Pagination */
.page-item .page-link {
    background: var(--secondary-lighter);
    border-color: var(--border);
    color: var(--text-primary);
}
.page-item.active .page-link {
    background: var(--primary);
    border-color: var(--primary);
    color: #0f1419;
}
.page-item .page-link:hover {
    background: var(--border);
    color: var(--primary);
}

/* ========================================
   SCROLLBAR
   ======================================== */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--secondary-light); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ========================================
   LAYOUT - APP SHELL
   ======================================== */

.app-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ========================================
   SIDEBAR (legacy — structural only, no position/width override)
   ======================================== */

.sidebar {
    background: var(--secondary-light);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
    z-index: 1000;
}

.sidebar-header {
    padding: 24px 20px;
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.sidebar-logo {
    font-size: 22px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 1px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.sidebar-logo i {
    -webkit-text-fill-color: var(--primary);
}

.sidebar-nav {
    flex: 1;
    padding: 16px 0;
    list-style: none;
    margin: 0;
}

.sidebar-nav-item {
    margin: 2px 10px;
}

.sidebar-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    border-radius: 8px;
    transition: all 0.25s ease;
}

.sidebar-nav-link:hover {
    color: var(--primary);
    background: rgba(168,85,247, 0.08);
    text-decoration: none;
}

.sidebar-nav-link.active {
    color: var(--primary);
    background: rgba(168,85,247, 0.12);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--primary);
}

.sidebar-nav-link i {
    font-size: 16px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.sidebar-footer {
    padding: 16px;
    border-top: 1px solid var(--border);
}

/* ========================================
   USER CARD
   ======================================== */

.user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(168,85,247, 0.06);
    border: 1px solid rgba(168,85,247, 0.15);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.user-card:hover {
    background: rgba(168,85,247, 0.12);
    border-color: rgba(168,85,247, 0.35);
}

.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: #0f1419;
    flex-shrink: 0;
}

.user-info { flex: 1; min-width: 0; }

.user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    line-height: 1.4;
}

.user-role {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 2px 0 0 0;
}

/* ========================================
   MAIN CONTENT AREA
   ======================================== */

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* ========================================
   TOPBAR
   ======================================== */

.topbar {
    height: 60px;
    background: var(--secondary-lighter);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    flex-shrink: 0;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.topbar-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.logout-btn {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 7px 16px;
    border-radius: 7px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.25s ease;
}

.logout-btn:hover {
    background: var(--danger);
    color: white;
    border-color: var(--danger);
    transform: translateY(-1px);
}

/* ========================================
   CONTENT WRAPPER
   ======================================== */

.content-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 28px;
}

/* ========================================
   PAGE HEADER
   ======================================== */

.page-header {
    margin-bottom: 28px;
}

.page-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.page-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

/* ========================================
   XURA CARDS
   ======================================== */

.xura-card {
    background: var(--secondary-light);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 24px;
}

.xura-card:hover {
    border-color: rgba(168,85,247, 0.4);
    box-shadow: 0 4px 20px rgba(168,85,247, 0.08);
}

.xura-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.xura-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.xura-card-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 4px 0 0 0;
}

/* ========================================
   STAT CARDS
   ======================================== */

.stat-card {
    background: var(--secondary-light);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
}

.stat-card:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(168,85,247, 0.15);
}

.stat-icon {
    font-size: 30px;
    margin-bottom: 10px;
    display: block;
}

.stat-value {
    font-size: 30px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1;
}

.stat-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 8px;
}

/* ========================================
   XURA GRID (CSS Grid wrapper)
   ======================================== */

.xura-grid {
    display: grid;
    gap: 20px;
}

.xura-grid.cols-1 { grid-template-columns: repeat(1, 1fr); }
.xura-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.xura-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.xura-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ========================================
   XURA BADGES
   ======================================== */

.xura-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.xura-badge-primary   { background: rgba(168,85,247,0.2);   color: var(--primary); }
.xura-badge-success   { background: rgba(168,85,247, 0.2);  color: var(--success); }
.xura-badge-warning   { background: rgba(245, 158, 11, 0.2);  color: var(--warning); }
.xura-badge-danger    { background: rgba(239, 68, 68, 0.2);   color: var(--danger);  }
.xura-badge-secondary { background: var(--secondary-lighter); color: var(--text-secondary); }

/* Legacy badge colour helpers (no conflict with Bootstrap .badge) */
.badge-primary   { background: rgba(168,85,247,0.2)   !important; color: var(--primary)  !important; }
.badge-success   { background: rgba(168,85,247, 0.2)  !important; color: var(--success)  !important; }
.badge-warning   { background: rgba(245, 158, 11, 0.2)  !important; color: var(--warning)  !important; }
.badge-danger    { background: rgba(239, 68, 68, 0.2)   !important; color: var(--danger)   !important; }
.badge-secondary { background: var(--secondary-lighter) !important; color: var(--text-secondary) !important; }

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

@keyframes slideIn {
    from { transform: translateX(-16px); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}

.fade-in  { animation: fadeIn  0.3s ease forwards; }
.slide-in { animation: slideIn 0.3s ease forwards; }

/* ========================================
   UTILITIES
   ======================================== */

.text-center { text-align: center; }
.text-right  { text-align: right; }
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.mt-30 { margin-top: 30px; }
.mb-30 { margin-bottom: 30px; }
.p-20  { padding: 20px; }

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gap-10 { gap: 10px; }
.gap-20 { gap: 20px; }

/* ============================================================
   LIGHT THEME VARIABLES
   ============================================================ */
html[data-theme="light"] {
  --b-900: #f0f0f8;
  --b-800: #ffffff;
  --b-700: #ffffff;
  --b-600: #f5f5fb;
  --b-500: #ebebf4;
  --b-400: #d8d8ec;
  --b-300: #c5c5dc;
  --t-100: #0a0a18;
  --t-200: #1a1a32;
  --t-400: #5a5a80;
  --t-600: #9090b0;
  --g-glow:    rgba(168,85,247,.12);
  --g-glow-sm: rgba(168,85,247,.06);
  /* Legacy variable remapping — fixes second CSS block */
  --secondary:          #ebebf4;
  --secondary-light:    #ffffff;
  --secondary-lighter:  #f5f5fb;
  --text-primary:       #0a0a18;
  --text-secondary:     #5a5a80;
  --border:             #d8d8ec;
  color-scheme: light;
}

/* Light — hero banner gradient (dark end-stop fix) */
html[data-theme="light"] .xura-page-hero-banner,
html[data-theme="light"] .users-hero-banner {
  background: linear-gradient(135deg,
    rgba(168,85,247,.22) 0%,
    rgba(168,85,247,.06) 55%,
    rgba(240,240,248,.92) 100%) !important;
}

/* Light — hero icon shadow */
html[data-theme="light"] .xura-page-hero-icon,
html[data-theme="light"] .users-hero-icon {
  box-shadow: 0 0 28px rgba(168,85,247,.28), 0 6px 20px rgba(0,0,0,.10) !important;
}

/* Light — stat card hover */
html[data-theme="light"] .stat-card:hover {
  box-shadow: 0 8px 28px rgba(168,85,247,.10);
}

/* Light — delete modal overlay */
html[data-theme="light"] #xura-delete-modal {
  background: rgba(100,100,160,.42) !important;
}

/* Light — native form element color scheme */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .xura-filter-input {
  color-scheme: light !important;
}

/* Light — scrollbar */
html[data-theme="light"] ::-webkit-scrollbar-track { background: #f0f0f8; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #c8c8dc; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--g-600); }

/* Light — toast shadow */
html[data-theme="light"] .xura-toast {
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* Light — dropdown / picker shadows */
html[data-theme="light"] .xura-picker-menu,
html[data-theme="light"] .theme-toggle-menu {
  box-shadow: 0 12px 32px rgba(0,0,0,.15);
}

/* Light — pdf card top gradient */
html[data-theme="light"] .pdf-card-top {
  background: linear-gradient(135deg, #f8f8fd, #f0f0f8);
}

/* Light — sidebar accent line */
html[data-theme="light"] .sidebar::before {
  opacity: .5;
}

/* Light — alerts (text was hardcoded for dark bg) */
html[data-theme="light"] .alert-danger  { color: #b91c1c !important; background: rgba(239,68,68,.07)   !important; border-color: rgba(239,68,68,.2)   !important; }
html[data-theme="light"] .alert-success { color: #5b21b6 !important; background: rgba(168,85,247,.07)  !important; border-color: rgba(168,85,247,.2)  !important; }
html[data-theme="light"] .alert-info    { color: #1d4ed8 !important; background: rgba(59,130,246,.07)  !important; border-color: rgba(59,130,246,.2)  !important; }
html[data-theme="light"] .alert-warning { color: #92400e !important; background: rgba(245,158,11,.07)  !important; border-color: rgba(245,158,11,.2)  !important; }

/* Light — btn-close (was inverted for dark mode, not needed in light) */
html[data-theme="light"] .btn-close { filter: none; }

/* Light — bootstrap bg helper classes */
html[data-theme="light"] .bg-white { background-color: #ffffff !important; }
html[data-theme="light"] .bg-light { background-color: #f5f5fb !important; }

/* Light — Bootstrap table striped */
html[data-theme="light"] .table {
  --bs-table-striped-bg: rgba(168,85,247,.04);
  --bs-table-hover-bg:   rgba(168,85,247,.06);
}

/* Light — dropdown shadow */
html[data-theme="light"] .dropdown-menu {
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
}

/* Light — modal backdrop */
html[data-theme="light"] .modal-backdrop { opacity: .25 !important; }

/* Light — mobile sidebar drawer shadow */
html[data-theme="light"] .sidebar.open { box-shadow: 8px 0 32px rgba(0,0,0,.12); }

/* Light — sidebar mobile overlay */
html[data-theme="light"] .sidebar-overlay { background: rgba(80,80,120,.35); }

/* Light — toast shadow + border */
html[data-theme="light"] .xura-toast {
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  border-color: var(--b-300);
}

/* Light — badge secondary bg (was dark) */
html[data-theme="light"] .badge.bg-secondary,
html[data-theme="light"] .xura-badge-secondary,
html[data-theme="light"] .badge-secondary {
  background: var(--b-500) !important;
  color: var(--t-400) !important;
}

/* Light — btn-secondary text contrast */
html[data-theme="light"] .btn-secondary {
  color: var(--t-100) !important;
}

/* Light — xura progress track */
html[data-theme="light"] .xura-progress-bg { background: var(--b-400); }

/* Light — empty state icon */
html[data-theme="light"] .empty-state-icon {
  background: var(--b-500);
  border-color: var(--b-400);
}

/* Light — sidebar section label */
html[data-theme="light"] .sidebar-section { color: var(--t-600); }

/* ============================================================
   THEME TOGGLE
   ============================================================ */
.theme-toggle-wrap { position: relative; }

.theme-toggle-btn {
  background: var(--b-500);
  border: 1.5px solid var(--b-300);
  border-radius: var(--r-md);
  color: var(--g-400);
  font-size: 14px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s, box-shadow .2s;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
}
.theme-toggle-btn:hover {
  border-color: var(--g-500);
  color: var(--g-500);
  background: var(--g-glow);
  box-shadow: 0 0 12px var(--g-glow);
}

.theme-toggle-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--b-700);
  border: 1.5px solid var(--b-400);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  display: none;
  flex-direction: column;
  min-width: 148px;
  padding: 6px;
  z-index: 2000;
}
.theme-toggle-menu.open { display: flex; }

.theme-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--t-200);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .15s, color .15s;
  text-align: left;
  font-family: inherit;
  width: 100%;
}
.theme-option:hover {
  background: var(--g-glow);
  color: var(--t-100);
}
.theme-option.active {
  color: var(--g-500);
  background: rgba(168,85,247,.14);
  font-weight: 700;
}
.theme-option i { width: 15px; text-align: center; font-size: 12px; color: var(--g-400); }

@media (max-width: 1200px) {
    .xura-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
    .xura-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .xura-grid.cols-2,
    .xura-grid.cols-3,
    .xura-grid.cols-4 { grid-template-columns: 1fr; }
}
/* ========================================
   XURA STARBUCKS - PROFESSIONAL UI THEME
   ======================================== */

/* CSS Variables - Professional Color Palette */
:root {
    --xura-primary: #A855F7;
    --xura-primary-dark: #7C3AED;
    --xura-primary-light: #C084FC;
    --xura-bg: #0f1419;
    --xura-bg-light: #1a1f26;
    --xura-bg-lighter: #252b33;
    --xura-text: #ffffff;
    --xura-text-muted: #b0b8c1;
    --xura-border: #353d47;
    --xura-success: #10b981;
    --xura-warning: #f59e0b;
    --xura-danger: #ef4444;

    /* Keep these as aliases so existing blade templates still work */
    --primary: #A855F7;
    --primary-dark: #7C3AED;
    --primary-light: #C084FC;
    --secondary: #0f1419;
    --secondary-light: #1a1f26;
    --secondary-lighter: #252b33;
    --text-primary: #ffffff;
    --text-secondary: #b0b8c1;
    --border: #353d47;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;
}

/* ========================================
   GLOBAL STYLES + BOOTSTRAP DARK OVERRIDES
   ======================================== */

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    background-color: var(--secondary) !important;
    color: var(--text-primary) !important;
    line-height: 1.6;
    font-size: 14px;
}

/* Bootstrap global dark overrides */
.navbar { background: var(--secondary-light) !important; border-bottom: 1px solid var(--border); }
.navbar-brand { color: var(--primary) !important; font-weight: 700; }
.nav-link { color: var(--text-secondary) !important; }
.nav-link:hover, .nav-link.active { color: var(--primary) !important; }
.dropdown-menu { background: var(--secondary-light); border-color: var(--border); }
.dropdown-item { color: var(--text-primary); }
.dropdown-item:hover { background: var(--secondary-lighter); color: var(--primary); }
.alert-danger { background: rgba(239, 68, 68, 0.1) !important; border-color: rgba(239,68,68,0.3) !important; color: #fca5a5 !important; }
.alert-success { background: rgba(16,185,129,0.1) !important; border-color: rgba(16,185,129,0.3) !important; color: #6ee7b7 !important; }
.alert-info { background: rgba(59,130,246,0.1) !important; border-color: rgba(59,130,246,0.3) !important; color: #93c5fd !important; }
.text-muted { color: var(--text-secondary) !important; }
.border-top { border-color: var(--border) !important; }
.border-bottom { border-color: var(--border) !important; }

/* Bootstrap Card overrides for dark theme */
.card { background: var(--secondary-light) !important; border-color: var(--border) !important; color: var(--text-primary) !important; }
.card-header { background: var(--secondary-lighter) !important; border-bottom-color: var(--border) !important; color: var(--text-primary) !important; }
.card-body { color: var(--text-primary) !important; }
.card-footer { background: var(--secondary-lighter) !important; border-top-color: var(--border) !important; }
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    background-color: var(--secondary);
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 14px;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--primary-light);
    text-decoration: none;
}

/* ========================================
   SCROLLBAR STYLING
   ======================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--secondary-light);
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-light);
}

/* ========================================
   LAYOUT - SIDEBAR + MAIN
   ======================================== */

.app-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* SIDEBAR (legacy 2 — structural only) */
.sidebar {
    background: var(--secondary-light);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
    transition: width .28s cubic-bezier(.4,0,.2,1);
}

.sidebar-header {
    padding: 25px 20px;
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.sidebar-logo {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.sidebar-nav {
    flex: 1;
    padding: 20px 0;
    list-style: none;
    margin: 0;
}

.sidebar-nav-item {
    margin: 5px 0;
}

.sidebar-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.sidebar-nav-link:hover {
    color: var(--primary);
    background: rgba(168,85,247,0.05);
    padding-left: 25px;
}

.sidebar-nav-link.active {
    color: var(--primary);
    background: rgba(168,85,247,0.1);
    border-right: 3px solid var(--primary);
}

.sidebar-nav-link i {
    font-size: 18px;
    width: 20px;
    text-align: center;
}

.sidebar-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--border);
    margin-top: auto;
}

.user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: rgba(168,85,247,0.05);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.user-card:hover {
    background: rgba(168,85,247,0.1);
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    color: var(--secondary);
    flex-shrink: 0;
}

.user-info {
    flex: 1;
    min-width: 0;
}

.user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.user-role {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 2px 0 0 0;
}

/* MAIN CONTENT */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* TOP BAR */
.topbar {
    height: 60px;
    background: var(--secondary-lighter);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    z-index: 500;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.topbar-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.topbar-icon {
    font-size: 20px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.topbar-icon:hover {
    color: var(--primary);
}

.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--danger);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

.logout-btn {
    background: var(--danger);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.logout-btn:hover {
    background: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
XURA CARDS
   ======================================== */

.xura-card {
    background: var(--secondary-light);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.xura-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(168,85,247,0.1);
}

.xura-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border);
}

.xura-card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.xura-   border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.xura-card:hover {
   XURA FORMS - Override Bootstrap Dark Theme
   ======================================== */

.xura-form-group {
    margin-bottom: 20px;
}

/* Dark theme overrides for Bootstrap form controls */
.form-control, .form-select {
    background-color: var(--secondary-lighter) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

.form-control:focus, .form-select:focus {
    background-color: var(--secondary-light) !important;
    border-color: var(--primary) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 3px rgba(168,85,247, 0.15) !important;
}

.form-control::placeholder {
    color: var(--text-secondary) !important;
}

.form-label {
    color: var(--text-primary) !important;
    font-weight: 600econdary) !important;
}

.form-label {
   XURA BUTTONS - Override Bootstrap
   ======================================== */

/* Override Bootstrap btn-primary */
.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    border-color: var(--primary-dark) !important;
    color: #0f1419 !important;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(168,85,247, 0.3);
    transition: all 0.3s ease;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%) !important;
    border-color: var(--primary) !important;
    color: #0f1419 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(168,85,247, 0.4) !important;
}

/* Override Bootstrap btn-secondary */
.btn-secondary {
    background: var(--secondary-lighter) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-secondary:hover, .btn-secondary:focus {
    background: var(--border) !important;
    border-color: var(--primary) !important;
    color: var(--text-primary) !important;
}

/* Override Bootstrap btn-danger */
.btn-danger {
    background: var(--danger) !important;
    border-color: #dc2626 !important;
    color: white !important;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-danger:hover, .btn-danger:focus {
    background: #dc2626 !important;
    border-color: #b91c1c !important;
    transform: translateY(-2px);
}

.btn-sm {
    padding: 6px 12px !important;
    font-size: 12px !importantmportant;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
   XURA TABLES - Override Bootstrap
   ======================================== */

.table {
    color: var(--text-primary) !important;
    --bs-table-color: var(--text-primary);
    --bs-table-bg: transparent;
    --bs-table-hover-bg: rgba(168,85,247,0.05);
    --bs-table-hover-color: var(--text-primary);
    --bs-table-border-color: var(--border);
}

.table thead {
    background: var(--secondary-lighter);
}

.table th {
    padding: 15px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary) !important;
    border-bottom-color: var(--border) !important;
    background: var(--secondary-lighter);
}

.table td {
    padding: 15px !important;
    border-bottom-color: var(--border) !important;
    color: var(--text-primary) !important;
    vertical-align: middle

.xura-badge-danger {
    background: rgba(239, 68, 68, 0.2);
   XURA BADGES
   ======================================== */

.xura-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.xura-badge-primary {
    background: rgba(168,85,247,0.2);
    color: var(--primary);
}

.xura-badge-success {
    background: rgba(168,85,247, 0.2);
    color: var(--success);
}

.xura-badge-warning {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.xura-badge-danger {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger);
}

.xura-badge-secondary {
    background: var(--secondary-lighter);
    color: var(--text-secondary);
}

/* Keep old class names working too */
.badge-primary { background: rgba(168,85,247,0.2); color: var(--primary); }
.badge-success { background: rgba(168,85,247, 0.2); color: var(--success); }
.badge-warning { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.badge-danger { background: rgba(239, 68, 68, 0.2); color: var(--danger); }
.badge-secondary { background: var(--secondary-lighter); color: var(--text-secondary); }

/* ========================================
   STAT CARDS
   ======================================== */

.stat-card {
    background: var(--secondary-light);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
}

.stat-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(168,85,247, 0.15);
}

.stat-icon {
    font-size: 32px;
    margin-bottom: 12px;
    display: block;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
}

/* ========================================
   XURA GRID LAYOUTS (non-conflicting names)
   ======================================== */

.xura-grid {
    display: grid;
    gap: 20px;
}

.xura-grid.cols-1 { grid-template-columns: repeat(1, 1fr); }
.xura-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.xura-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.xura-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1200px) {
    .xura-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .xura-grid.cols-2 { grid-template-columns: 1fr; }
    .xura-grid.cols-3 { grid-template-columns: 1fr; }
    .xura-grid.cols-4 { grid-template-columns: 1fr; }
}

@keyframes slideIn {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.3s ease forwards;
}

.slide-in {
    animation: slideIn 0.3s ease forwards;
}

/* ========================================
   UTILITIES
   ======================================== */

.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.mt-30 { margin-top: 30px; }
.mb-30 { margin-bottom: 30px; }
.p-20 { padding: 20px; }
.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.gap-10 { gap: 10px; }
.gap-20 { gap: 20px; }