/* Theme 2026 - Orange & White (Enterprise) */
:root{
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --surface-2: #F5F7FA;
  --border: #E5E7EB;
  --text: #1E293B;
  --muted: #64748B;
  --accent: #F97316;
  --accent-dark: #EA580C;
  --accent-light: #FFF7ED;
  --accent-soft: #FDBA74;
  --info: #3B82F6;
  --success: #22C55E;
  --warning: #F59E0B;
  --danger: #EF4444;
  --shadow: 0 8px 25px rgba(15,23,42,.08);
  --glass: rgba(255,255,255,0.6);
}

/* Page background and base text */
body{
  background: var(--bg) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Navbar */
.navbar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
}
.navbar-brand { color: var(--accent) !important; font-weight:700 !important; }
.nav-link { color: var(--muted) !important; transition: color .25s ease, border-bottom .25s ease; }
.nav-link:hover, .nav-link.active { color: var(--accent) !important; }
.navbar .nav-link.active::after{ content:''; display:block; height:2px; background:var(--accent); width:24px; margin-top:6px; border-radius:2px; }

/* Panels and cards */
.panel, .glass-card, .summary-item, .metric-card, .stat-card, .section-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  border-radius: 16px !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.panel:hover, .metric-card:hover, .stat-card:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 40px rgba(15,23,42,0.12) !important; }

.panel::before, .metric-card::before{ background: linear-gradient(135deg, rgba(249,115,22,0.06), rgba(234,88,12,0.02)) !important; }

/* Metric card specifics */
.metric-label{ color:var(--muted) !important; }
.metric-value{ color:var(--text) !important; }
.metric-value.blue{ color: var(--info) !important; }
.metric-value.green{ color: var(--success) !important; }
.metric-value.yellow{ color: var(--warning) !important; }
.metric-value.red{ color: var(--danger) !important; }

.icon-pill{ background: var(--accent-light) !important; color: var(--accent) !important; border-radius:12px !important; }
.icon-pill.green{ background: rgba(34,197,94,0.08) !important; color:var(--success) !important; }
.icon-pill.yellow{ background: rgba(245,158,11,0.08) !important; color:var(--warning) !important; }
.icon-pill.red{ background: rgba(239,68,68,0.08) !important; color:var(--danger) !important; }

/* Buttons */
.btn-primary-custom, .btn-primary, .btn.btn-primary {
  background: linear-gradient(90deg,var(--accent) 0%, var(--accent-dark) 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  box-shadow: 0 6px 18px rgba(249,115,22,0.09) !important;
  border-radius: 12px !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-primary-custom:hover, .btn-primary:hover{ transform: translateY(-3px); background: linear-gradient(90deg,var(--accent-dark) 0%, #FF7A00 100%) !important; }

.btn-secondary-custom, .btn-outline-secondary{ background: #FFFFFF !important; color: var(--accent) !important; border:1px solid var(--accent) !important; }
.btn-secondary-custom:hover{ transform: translateY(-2px); background: var(--accent-light) !important; }

.btn-danger{ background: linear-gradient(90deg,#ef4444 0%, #dc2626 100%) !important; color:#fff !important; }
.btn-success{ background: linear-gradient(90deg,#22c55e 0%, #16a34a 100%) !important; color:#fff !important; }

/* Forms */
.form-control, .form-select, input, textarea {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 18px rgba(15,23,42,0.04) inset !important;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
..form-control:focus, .form-select:focus, input:focus, textarea:focus{ outline: none !important; border-color: var(--accent) !important; box-shadow: 0 6px 18px rgba(249,115,22,0.08) !important; }

.form-check-input {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.2rem;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid var(--border) !important;
  border-radius: 0.35rem !important;
  background-color: #fff !important;
  position: relative;
  cursor: pointer;
}
.form-check-input[type="checkbox"] {
  border-radius: 0.35rem !important;
}
.form-check-input[type="radio"] {
  border-radius: 50% !important;
}
.form-check-input:checked {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.form-check-input[type="checkbox"]:checked::after,
.form-check-input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.form-check-input[type="checkbox"]:checked::after {
  width: 0.5rem;
  height: 0.9rem;
  border: solid #fff;
  border-width: 0 0.2rem 0.2rem 0;
  transform: translate(-50%, -55%) rotate(45deg);
}
.form-check-input[type="radio"]:checked::after {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #fff;
}
.form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(249,115,22,0.25) !important;
}

/* Tables */
.table-personel, .table { border-collapse: separate !important; border-spacing:0 !important; background: transparent !important; }
.table thead th{ background: linear-gradient(90deg, rgba(249,115,22,0.12), rgba(249,115,22,0.06)) !important; color: var(--text) !important; border-bottom:1px solid var(--border) !important; }
.table tbody td{ background: #FFFFFF !important; color: var(--text) !important; border-bottom:1px solid var(--border) !important; }
.table tbody tr:hover td{ background: rgba(234, 122, 20, 0.04) !important; }
.table .text-secondary{ color: var(--muted) !important; }

/* Badges mapping */
.badge-soft{ font-weight:600 !important; }
.badge-soft.info{ background: rgba(59,130,246,0.12) !important; color: var(--info) !important; border:1px solid rgba(59,130,246,0.12) !important; }
.badge-soft.success{ background: rgba(34,197,94,0.12) !important; color: var(--success) !important; border:1px solid rgba(34,197,94,0.12) !important; }
.badge-soft.warning{ background: rgba(249,115,22,0.12) !important; color: var(--accent) !important; border:1px solid rgba(249,115,22,0.10) !important; }
.badge-soft.danger{ background: rgba(239,68,68,0.12) !important; color: var(--danger) !important; border:1px solid rgba(239,68,68,0.10) !important; }

/* Status badges mapping to requested colors */
.status-badge.danger{ background: rgba(239,68,68,0.08) !important; color: var(--danger) !important; }
.status-badge.warning{ background: rgba(249,115,22,0.08) !important; color: var(--accent) !important; }
.status-badge.info{ background: rgba(234,242,255,0.8) !important; color: var(--info) !important; }

/* Scrollbar modern */
::-webkit-scrollbar{ height:10px; width:10px; }
::-webkit-scrollbar-track{ background: var(--surface-2); }
::-webkit-scrollbar-thumb{ background: linear-gradient(180deg,var(--accent) 0%, var(--accent-soft) 100%); border-radius:999px; }

/* Transitions */
*{ transition: all .25s ease-in-out; }

/* Chart canvas fallback styles */
.chart-shell{ background: var(--surface-2) !important; border-radius:12px !important; }

/* Small utility */
.text-white{ color:#fff !important; }
.text-info{ color: var(--info) !important; }
.text-danger{ color: var(--danger) !important; }
.text-warning{ color: var(--warning) !important; }
.text-success{ color: var(--success) !important; }

/* Ensure links use accent */
a, a:hover { color: var(--accent) !important; }

/* Bootstrap dark components override */
.navbar-dark, .dropdown-menu-dark, .modal-content, .bg-dark, .text-light, .btn-outline-light {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--accent-light) !important;
  color: var(--accent) !important;

}
.modal-header, .modal-footer {
  border-color: var(--border) !important;
}
.btn-close {
  filter: var(--bs-btn-close-white-filter) !important;
}
