/* ==========================================================================
   Salex - Navy + Gold Theme
   ========================================================================== */
:root {
  --salex-primary: #1E3A8A;
  --salex-primary-50: #EEF2FF;
  --salex-primary-100: #E0E7FF;
  --salex-primary-200: #C7D2FE;
  --salex-primary-300: #A5B4FC;
  --salex-primary-400: #6366F1;
  --salex-primary-500: #4338CA;
  --salex-primary-600: #1E40AF;
  --salex-primary-700: #1E3A8A;
  --salex-primary-800: #1B2F6F;
  --salex-primary-900: #172554;
  --salex-accent: #F59E0B;
  --salex-accent-50: #FFFBEB;
  --salex-accent-100: #FEF3C7;
  --salex-accent-200: #FDE68A;
  --salex-accent-300: #FCD34D;
  --salex-accent-400: #FBBF24;
  --salex-accent-500: #F59E0B;
  --salex-accent-600: #D97706;
  --salex-accent-700: #B45309;

  --salex-success: #10B981;
  --salex-success-50: #ECFDF5;
  --salex-info: #0EA5E9;
  --salex-info-50: #E0F2FE;
  --salex-warning: #F59E0B;
  --salex-warning-50: #FFFBEB;
  --salex-danger: #EF4444;
  --salex-danger-50: #FEF2F2;
  --salex-purple: #8B5CF6;
  --salex-pink: #EC4899;
  --salex-teal: #14B8A6;

  --salex-body-bg: #F4F6FB;
  --salex-card-bg: #FFFFFF;
  --salex-border: #E5E7EB;
  --salex-border-soft: #F1F2F6;
  --salex-text: #0F172A;
  --salex-text-muted: #64748B;
  --salex-text-soft: #94A3B8;
  --salex-heading: #0B1437;

  --salex-sidebar-bg: #0B1437;
  --salex-sidebar-text: #C7D2FE;
  --salex-sidebar-active: #F59E0B;
  --salex-sidebar-hover: rgba(255,255,255,0.06);
  --salex-sidebar-heading: #6B7CB6;
  --salex-sidebar-border: rgba(255,255,255,0.05);

  --salex-topbar-bg: #FFFFFF;
  --salex-topbar-border: #E5E7EB;

  --salex-shadow-sm: 0 1px 2px rgba(15,23,42,0.04);
  --salex-shadow: 0 4px 12px rgba(15,23,42,0.06);
  --salex-shadow-lg: 0 12px 32px rgba(15,23,42,0.08);
  --salex-radius: 10px;
  --salex-radius-lg: 14px;
  --salex-radius-sm: 6px;

  --salex-sidebar-width: 260px;
  --salex-sidebar-collapsed: 78px;
  --salex-topbar-h: 66px;

  --bs-primary: #1E3A8A;
  --bs-primary-rgb: 30, 58, 138;
  --bs-link-color: #1E3A8A;
  --bs-link-hover-color: #172554;
}

/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--salex-body-bg);
  color: var(--salex-text);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 { color: var(--salex-heading); font-weight: 700; letter-spacing: -0.01em; }
a { color: var(--salex-primary); text-decoration: none; }
a:hover { color: var(--salex-primary-900); }

/* Bootstrap overrides */
.btn { font-weight: 500; border-radius: var(--salex-radius-sm); padding: 0.5rem 0.95rem; transition: all .15s ease; }
.btn-sm { padding: 0.32rem 0.7rem; font-size: 0.8rem; }
.btn-lg { padding: 0.7rem 1.2rem; font-size: 0.95rem; }
.btn-primary { background: var(--salex-primary); border-color: var(--salex-primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--salex-primary-900); border-color: var(--salex-primary-900); }
.btn-outline-primary { border-color: var(--salex-primary); color: var(--salex-primary); }
.btn-outline-primary:hover { background: var(--salex-primary); border-color: var(--salex-primary); color: #fff; }
.btn-warning { background: var(--salex-accent); border-color: var(--salex-accent); color: #1B2F6F; }
.btn-warning:hover { background: var(--salex-accent-600); border-color: var(--salex-accent-600); color: #fff; }
.btn-soft-primary { background: var(--salex-primary-50); color: var(--salex-primary); }
.btn-soft-primary:hover { background: var(--salex-primary-100); color: var(--salex-primary-900); }
.btn-soft-success { background: var(--salex-success-50); color: var(--salex-success); }
.btn-soft-warning { background: var(--salex-warning-50); color: var(--salex-warning); }
.btn-soft-danger { background: var(--salex-danger-50); color: var(--salex-danger); }
.btn-soft-info { background: var(--salex-info-50); color: var(--salex-info); }
.btn-icon { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--salex-radius-sm); }
.btn-icon.btn-sm { width: 30px; height: 30px; }
.btn-icon.btn-lg { width: 44px; height: 44px; }
.btn-ghost { background: transparent; color: var(--salex-text-muted); border: 1px solid transparent; }
.btn-ghost:hover { background: var(--salex-border-soft); color: var(--salex-text); }

.form-control, .form-select {
  border: 1px solid var(--salex-border);
  border-radius: var(--salex-radius-sm);
  font-size: 0.875rem;
  padding: 0.5rem 0.8rem;
  color: var(--salex-text);
  background-color: #fff;
}
.form-control:focus, .form-select:focus {
  border-color: var(--salex-primary-300);
  box-shadow: 0 0 0 3px rgba(30,58,138,0.12);
}
.form-control::placeholder { color: var(--salex-text-soft); }
.form-label { font-weight: 500; color: var(--salex-heading); margin-bottom: 0.4rem; font-size: 0.83rem; }
.form-check-input:checked { background-color: var(--salex-primary); border-color: var(--salex-primary); }
.form-switch .form-check-input:checked { background-color: var(--salex-primary); }
.input-group-text { background: var(--salex-border-soft); border-color: var(--salex-border); color: var(--salex-text-muted); font-size: 0.85rem; }

.card {
  border: 1px solid var(--salex-border);
  border-radius: var(--salex-radius-lg);
  box-shadow: var(--salex-shadow-sm);
  background: var(--salex-card-bg);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--salex-border-soft);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.card-title { font-size: 1rem; font-weight: 600; margin: 0; color: var(--salex-heading); }
.card-subtitle { font-size: 0.8rem; color: var(--salex-text-muted); margin-top: 0.15rem; }
.card-body { padding: 1.25rem; }

.table { color: var(--salex-text); margin: 0; }
.table > :not(caption) > * > * { padding: 0.85rem 1rem; vertical-align: middle; }
.table > thead { background: var(--salex-border-soft); }
.table > thead > tr > th {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--salex-text-muted);
  border-bottom: 1px solid var(--salex-border);
}
.table > tbody > tr { border-bottom: 1px solid var(--salex-border-soft); }
.table > tbody > tr:last-child { border-bottom: 0; }
.table-hover > tbody > tr:hover { background: var(--salex-primary-50); }
.table-sm > :not(caption) > * > * { padding: 0.5rem 0.75rem; }

.badge { font-weight: 500; padding: 0.35em 0.65em; border-radius: 999px; font-size: 0.72rem; }
.badge-soft-primary { background: var(--salex-primary-50); color: var(--salex-primary); }
.badge-soft-success { background: var(--salex-success-50); color: var(--salex-success); }
.badge-soft-warning { background: var(--salex-warning-50); color: var(--salex-warning-700, var(--salex-accent-700)); }
.badge-soft-danger { background: var(--salex-danger-50); color: var(--salex-danger); }
.badge-soft-info { background: var(--salex-info-50); color: var(--salex-info); }
.badge-soft-secondary { background: #F1F5F9; color: #475569; }
.badge-soft-purple { background: #F3E8FF; color: var(--salex-purple); }
.badge-dot { width: 8px; height: 8px; padding: 0; display: inline-block; border-radius: 50%; margin-right: 0.4rem; }

.dropdown-menu {
  border: 1px solid var(--salex-border);
  border-radius: var(--salex-radius);
  box-shadow: var(--salex-shadow-lg);
  padding: 0.4rem;
  font-size: 0.85rem;
  min-width: 200px;
}
.dropdown-item {
  border-radius: var(--salex-radius-sm);
  padding: 0.5rem 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--salex-text);
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--salex-primary-50); color: var(--salex-primary); }
.dropdown-item.active { background: var(--salex-primary); color: #fff; }
.dropdown-divider { border-top: 1px solid var(--salex-border-soft); margin: 0.35rem 0; }
.dropdown-header { font-size: 0.7rem; text-transform: uppercase; color: var(--salex-text-soft); letter-spacing: 0.06em; }

.nav-tabs { border-bottom: 1px solid var(--salex-border); gap: 0.25rem; }
.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--salex-text-muted);
  padding: 0.7rem 1rem;
  font-weight: 500;
  border-radius: 0;
}
.nav-tabs .nav-link.active {
  color: var(--salex-primary);
  border-color: var(--salex-primary);
  background: transparent;
}
.nav-pills .nav-link { color: var(--salex-text-muted); border-radius: var(--salex-radius-sm); padding: 0.45rem 0.85rem; font-weight: 500; }
.nav-pills .nav-link.active { background: var(--salex-primary); color: #fff; }

.modal-content { border: none; border-radius: var(--salex-radius-lg); box-shadow: 0 24px 64px rgba(15,23,42,0.18); }
.modal-header { border-bottom: 1px solid var(--salex-border-soft); padding: 1rem 1.25rem; }
.modal-title { font-size: 1.05rem; font-weight: 600; }
.modal-footer { border-top: 1px solid var(--salex-border-soft); padding: 0.85rem 1.25rem; }

.alert { border: none; border-radius: var(--salex-radius); padding: 0.85rem 1rem; }
.alert-primary { background: var(--salex-primary-50); color: var(--salex-primary); }
.alert-success { background: var(--salex-success-50); color: var(--salex-success); }
.alert-warning { background: var(--salex-warning-50); color: var(--salex-accent-700); }
.alert-danger { background: var(--salex-danger-50); color: var(--salex-danger); }
.alert-info { background: var(--salex-info-50); color: var(--salex-info); }

.progress { height: 8px; border-radius: 999px; background: var(--salex-border-soft); }
.progress-bar { background: var(--salex-primary); }
.progress-bar.bg-warning { background: var(--salex-accent) !important; }
.progress-bar.bg-success { background: var(--salex-success) !important; }
.progress-bar.bg-danger { background: var(--salex-danger) !important; }

.text-muted { color: var(--salex-text-muted) !important; }
.text-soft { color: var(--salex-text-soft) !important; }
.text-primary { color: var(--salex-primary) !important; }
.text-accent { color: var(--salex-accent) !important; }
.text-success { color: var(--salex-success) !important; }
.text-warning { color: var(--salex-warning) !important; }
.text-danger { color: var(--salex-danger) !important; }
.text-info { color: var(--salex-info) !important; }
.bg-primary { background-color: var(--salex-primary) !important; }
.bg-accent { background-color: var(--salex-accent) !important; }
.bg-soft-primary { background-color: var(--salex-primary-50) !important; }
.bg-soft-accent { background-color: var(--salex-accent-50) !important; }
.bg-soft-success { background-color: var(--salex-success-50) !important; }
.bg-soft-info { background-color: var(--salex-info-50) !important; }
.bg-soft-warning { background-color: var(--salex-warning-50) !important; }
.bg-soft-danger { background-color: var(--salex-danger-50) !important; }
.bg-light { background-color: var(--salex-border-soft) !important; }

.fs-xs { font-size: 0.72rem !important; }
.fs-sm { font-size: 0.82rem !important; }
.fs-md { font-size: 0.95rem !important; }
.fs-lg { font-size: 1.1rem !important; }
.fs-xl { font-size: 1.4rem !important; }
.fs-2xl { font-size: 1.8rem !important; }
.fs-3xl { font-size: 2.4rem !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }

.gap-xs { gap: 0.25rem; }
.rounded-soft { border-radius: var(--salex-radius); }
.rounded-pill { border-radius: 999px !important; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.18); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,0.32); }

/* Utility */
.divider-h { height: 1px; background: var(--salex-border-soft); margin: 1rem 0; }
.kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--salex-border-soft); border: 1px solid var(--salex-border); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; font-size: 0.72rem; color: var(--salex-text); }
.cursor-pointer { cursor: pointer; }
.no-underline { text-decoration: none; }

/* ==========================================================================
   Dark Mode
   ========================================================================== */
html.theme-dark {
  --salex-body-bg: #0B1437;
  --salex-card-bg: #172554;
  --salex-border: #1E3A8A;
  --salex-border-soft: #1B2F6F;
  --salex-text: #E5E7EB;
  --salex-text-muted: #94A3B8;
  --salex-text-soft: #64748B;
  --salex-heading: #F1F5F9;

  --salex-topbar-bg: #172554;
  --salex-topbar-border: #1E3A8A;

  --salex-primary-50: rgba(99,102,241,0.14);
  --salex-success-50: rgba(16,185,129,0.14);
  --salex-info-50: rgba(14,165,233,0.14);
  --salex-warning-50: rgba(245,158,11,0.14);
  --salex-danger-50: rgba(239,68,68,0.14);
  --salex-accent-50: rgba(245,158,11,0.14);

  --salex-shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --salex-shadow: 0 4px 12px rgba(0,0,0,0.4);
  --salex-shadow-lg: 0 12px 32px rgba(0,0,0,0.5);

  color-scheme: dark;
}
html.theme-dark body { background: var(--salex-body-bg); color: var(--salex-text); }
html.theme-dark h1, html.theme-dark h2, html.theme-dark h3,
html.theme-dark h4, html.theme-dark h5, html.theme-dark h6 { color: var(--salex-heading); }
html.theme-dark a { color: #C7D2FE; }
html.theme-dark a:hover { color: var(--salex-accent); }
html.theme-dark .text-muted { color: var(--salex-text-muted) !important; }
html.theme-dark .text-soft { color: var(--salex-text-soft) !important; }

html.theme-dark .card,
html.theme-dark .modal-content,
html.theme-dark .stat-card,
html.theme-dark .file-tile,
html.theme-dark .timeline-content,
html.theme-dark .kanban-card {
  background: var(--salex-card-bg);
  border-color: var(--salex-border);
  color: var(--salex-text);
}
html.theme-dark .card-header,
html.theme-dark .modal-header,
html.theme-dark .modal-footer,
html.theme-dark .nav-tabs { border-color: var(--salex-border); }
html.theme-dark .card-title, html.theme-dark .card-subtitle { color: var(--salex-heading); }

html.theme-dark .table { color: var(--salex-text); --bs-table-bg: transparent; }
html.theme-dark .table > thead { background: rgba(255,255,255,0.04); }
html.theme-dark .table > thead > tr > th { color: var(--salex-text-muted); border-bottom-color: var(--salex-border); }
html.theme-dark .table > tbody > tr { border-bottom-color: var(--salex-border-soft); }
html.theme-dark .table-hover > tbody > tr:hover { background: rgba(245,158,11,0.06); color: var(--salex-text); }

html.theme-dark .form-control,
html.theme-dark .form-select {
  background-color: rgba(255,255,255,0.04);
  border-color: var(--salex-border);
  color: var(--salex-text);
}
html.theme-dark .form-control::placeholder { color: var(--salex-text-soft); }
html.theme-dark .form-control:focus,
html.theme-dark .form-select:focus {
  background-color: rgba(255,255,255,0.06);
  border-color: var(--salex-accent);
  box-shadow: 0 0 0 3px rgba(245,158,11,0.18);
  color: var(--salex-text);
}
html.theme-dark .form-control:disabled { background-color: rgba(255,255,255,0.02); color: var(--salex-text-soft); }
html.theme-dark .form-label { color: var(--salex-heading); }
html.theme-dark .input-group-text {
  background: rgba(255,255,255,0.04);
  border-color: var(--salex-border);
  color: var(--salex-text-muted);
}
html.theme-dark .form-check-input { background-color: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }
html.theme-dark .form-check-input:checked { background-color: var(--salex-accent); border-color: var(--salex-accent); }

html.theme-dark .dropdown-menu {
  background: var(--salex-card-bg);
  border-color: var(--salex-border);
  color: var(--salex-text);
}
html.theme-dark .dropdown-item { color: var(--salex-text); }
html.theme-dark .dropdown-item:hover,
html.theme-dark .dropdown-item:focus { background: rgba(245,158,11,0.1); color: var(--salex-accent); }
html.theme-dark .dropdown-item.active { background: var(--salex-accent); color: #1B2F6F; }
html.theme-dark .dropdown-divider { border-top-color: var(--salex-border); }
html.theme-dark .dropdown-header { color: var(--salex-text-soft); }

html.theme-dark .nav-tabs .nav-link { color: var(--salex-text-muted); }
html.theme-dark .nav-tabs .nav-link.active { color: var(--salex-accent); border-color: var(--salex-accent); background: transparent; }
html.theme-dark .nav-pills .nav-link { color: var(--salex-text-muted); }
html.theme-dark .nav-pills .nav-link.active { background: var(--salex-accent); color: #1B2F6F; }

html.theme-dark .progress { background: rgba(255,255,255,0.06); }
html.theme-dark hr { border-color: var(--salex-border); opacity: 1; }
html.theme-dark .border,
html.theme-dark .border-top,
html.theme-dark .border-bottom,
html.theme-dark .border-start,
html.theme-dark .border-end { border-color: var(--salex-border) !important; }

html.theme-dark .bg-light { background-color: rgba(255,255,255,0.04) !important; }
html.theme-dark .bg-soft-primary { background-color: rgba(99,102,241,0.14) !important; }
html.theme-dark .bg-soft-success { background-color: rgba(16,185,129,0.14) !important; }
html.theme-dark .bg-soft-warning { background-color: rgba(245,158,11,0.14) !important; }
html.theme-dark .bg-soft-danger { background-color: rgba(239,68,68,0.14) !important; }
html.theme-dark .bg-soft-info { background-color: rgba(14,165,233,0.14) !important; }
html.theme-dark .badge-soft-secondary { background: rgba(148,163,184,0.18); color: #CBD5E1; }
html.theme-dark .breadcrumb-item, html.theme-dark .breadcrumb-item a { color: var(--salex-text-muted); }
html.theme-dark .breadcrumb-item.active { color: var(--salex-text); }
html.theme-dark .breadcrumb-item + .breadcrumb-item::before { color: var(--salex-text-soft); }

html.theme-dark .btn-outline-primary { color: #C7D2FE; border-color: var(--salex-border); }
html.theme-dark .btn-outline-primary:hover { background: var(--salex-accent); border-color: var(--salex-accent); color: #1B2F6F; }
html.theme-dark .btn-ghost { color: var(--salex-text-muted); }
html.theme-dark .btn-ghost:hover { background: rgba(255,255,255,0.06); color: var(--salex-text); }
html.theme-dark .btn-soft-primary { background: rgba(99,102,241,0.18); color: #C7D2FE; }
html.theme-dark .btn-soft-primary:hover { background: rgba(99,102,241,0.3); color: #fff; }
html.theme-dark .btn-soft-success { background: rgba(16,185,129,0.18); color: #6EE7B7; }
html.theme-dark .btn-soft-warning { background: rgba(245,158,11,0.18); color: #FCD34D; }
html.theme-dark .btn-soft-danger { background: rgba(239,68,68,0.18); color: #FCA5A5; }
html.theme-dark .btn-soft-info { background: rgba(14,165,233,0.18); color: #7DD3FC; }
html.theme-dark .btn-close { filter: invert(1) brightness(2); }

html.theme-dark .alert-primary { background: rgba(99,102,241,0.15); color: #C7D2FE; }
html.theme-dark .alert-success { background: rgba(16,185,129,0.15); color: #6EE7B7; }
html.theme-dark .alert-warning { background: rgba(245,158,11,0.15); color: #FCD34D; }
html.theme-dark .alert-danger { background: rgba(239,68,68,0.15); color: #FCA5A5; }
html.theme-dark .alert-info { background: rgba(14,165,233,0.15); color: #7DD3FC; }

html.theme-dark .chip { background: rgba(255,255,255,0.08); color: var(--salex-text); }
html.theme-dark code { background: rgba(255,255,255,0.08); color: #FCD34D; padding: 1px 5px; border-radius: 3px; }
html.theme-dark pre { background: rgba(0,0,0,0.4) !important; color: #C7D2FE !important; }
html.theme-dark .kbd { background: rgba(255,255,255,0.1); border-color: var(--salex-border); color: var(--salex-text); }

html.theme-dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); }
html.theme-dark ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.32); }

html.theme-dark .page-link {
  background: var(--salex-card-bg);
  border-color: var(--salex-border);
  color: var(--salex-text);
}
html.theme-dark .page-link:hover { background: rgba(245,158,11,0.12); border-color: var(--salex-accent); color: var(--salex-accent); }
html.theme-dark .page-item.active .page-link { background: var(--salex-accent); border-color: var(--salex-accent); color: #1B2F6F; }
html.theme-dark .page-item.disabled .page-link { background: rgba(255,255,255,0.02); color: var(--salex-text-soft); }