/* ================================================
   FINDESK PREMIUM UI — Light Mode Design System
   Dark sidebar + bright content area
================================================ */

:root {
  --fd-bg:          #f0f2f8;
  --fd-surface:     #e8eaf2;
  --fd-card:        #ffffff;
  --fd-border:      #e2e6f0;
  --fd-text:        #1e2533;
  --fd-muted:       #7a8499;
  --fd-accent:      #6366f1;
  --fd-accent2:     #8b5cf6;
  --fd-success:     #10b981;
  --fd-warning:     #f59e0b;
  --fd-danger:      #ef4444;
  --fd-info:        #06b6d4;
  --fd-sidebar-bg:  #0f1528;
  --fd-sidebar-w:   260px;
  --fd-radius:      14px;
  --fd-radius-sm:   9px;
  --fd-transition:  0.2s cubic-bezier(0.4,0,0.2,1);
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif !important;
  background: var(--fd-bg) !important;
  color: var(--fd-text) !important;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Subtle light mesh */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 15% 0%,  rgba(99,102,241,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 85% 100%, rgba(139,92,246,0.04) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

.wrapper { position: relative; z-index: 1; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.25); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.45); }

/* ================================================
   SIDEBAR — stays dark, premium
================================================ */
.main-sidebar,
.main-sidebar.sidebar-dark-primary {
  background: var(--fd-sidebar-bg) !important;
  border-right: 1px solid rgba(255,255,255,0.05) !important;
  box-shadow: 4px 0 40px rgba(0,0,0,0.25) !important;
  width: var(--fd-sidebar-w) !important;
}

/* Subtle right-edge glow */
.main-sidebar::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent 10%, rgba(99,102,241,0.5) 50%, transparent 90%);
}

.brand-link {
  padding: 20px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
}
.brand-link:hover { background: transparent !important; }

.sidebar { padding: 10px 0; }

.nav-sidebar > .nav-item > .nav-link {
  border-radius: var(--fd-radius-sm) !important;
  margin: 2px 10px !important;
  padding: 10px 14px !important;
  color: rgba(203,213,225,0.75) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all var(--fd-transition) !important;
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 10px;
}

.nav-sidebar > .nav-item > .nav-link:hover {
  background: rgba(99,102,241,0.12) !important;
  color: #fff !important;
  transform: translateX(3px);
}

.nav-sidebar > .nav-item > .nav-link.active {
  background: linear-gradient(135deg, rgba(99,102,241,0.25), rgba(139,92,246,0.18)) !important;
  color: #fff !important;
  border: 1px solid rgba(99,102,241,0.3) !important;
  box-shadow: 0 4px 16px rgba(99,102,241,0.2) !important;
}

.nav-sidebar > .nav-item > .nav-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 55%;
  background: var(--fd-accent);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 8px rgba(99,102,241,0.7);
}

.nav-icon { width: 18px !important; margin-right: 0 !important; font-size: 14px !important; }

/* ================================================
   TOP NAVBAR — light
================================================ */
.main-header.navbar {
  background: #ffffff !important;
  border-bottom: 1px solid var(--fd-border) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06) !important;
  margin-left: var(--fd-sidebar-w) !important;
  padding: 0 24px !important;
  min-height: 60px;
  z-index: 1040;
  backdrop-filter: none !important;
}

.main-header .nav-link {
  color: var(--fd-muted) !important;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 12px !important;
  border-radius: var(--fd-radius-sm);
  transition: all var(--fd-transition);
}
.main-header .nav-link:hover { color: var(--fd-text) !important; background: var(--fd-bg); }

.main-header span.nav-link,
.main-header .nav-link strong {
  color: var(--fd-text) !important;
  font-weight: 600;
}

.main-header .fas.fa-bars { color: var(--fd-muted); }

/* ================================================
   CONTENT
================================================ */
.content-wrapper {
  background: var(--fd-bg) !important;
  margin-left: var(--fd-sidebar-w) !important;
  padding: 0 !important;
  min-height: 100vh;
}

.content-wrapper section.content { padding: 0 !important; }

.content-wrapper [style*="padding: 24px"],
.content-wrapper [style*="padding:24px"],
.content-wrapper [style*="padding: 28px"] {
  padding: 28px 28px 48px !important;
}

/* Page headings */
.d-flex > h2.fw-bold,
h2.fw-bold {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--fd-text) !important;
  letter-spacing: -0.4px;
  margin: 0 !important;
}

/* ================================================
   CARDS
================================================ */
.card {
  background: var(--fd-card) !important;
  border: 1px solid var(--fd-border) !important;
  border-radius: var(--fd-radius) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04) !important;
  overflow: hidden;
  transition: transform var(--fd-transition), box-shadow var(--fd-transition);
}

.card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06) !important;
  transform: translateY(-1px);
}

.card-header {
  background: #fafbfd !important;
  border-bottom: 1px solid var(--fd-border) !important;
  padding: 16px 22px !important;
}

.card-header h6 { color: var(--fd-text) !important; font-weight: 600 !important; font-size: 14px !important; }
.card-body { padding: 22px !important; }
.card-body.p-0 { padding: 0 !important; }
.card-body.p-3 { padding: 16px !important; }
.card-body.p-4 { padding: 24px !important; }

/* ── KPI Stat Cards ── */
.fd-stat {
  background: var(--fd-card) !important;
  border: 1px solid var(--fd-border) !important;
  border-radius: var(--fd-radius) !important;
  padding: 22px;
  position: relative;
  overflow: hidden;
  transition: transform var(--fd-transition), box-shadow var(--fd-transition);
  height: 100%;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

/* Top colour bar */
.fd-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--c, var(--fd-accent));
  opacity: 0.9;
}

/* Ambient orb */
.fd-stat::after {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--c, var(--fd-accent));
  opacity: 0.06;
  filter: blur(16px);
}

.fd-stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(99,102,241,0.1) !important;
}

.fd-stat-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
  margin-bottom: 16px;
  background: color-mix(in srgb, var(--c, var(--fd-accent)) 12%, transparent);
  color: var(--c, var(--fd-accent));
}

.fd-stat-num {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--fd-text);
  letter-spacing: -1px;
  margin-bottom: 4px;
}

.fd-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fd-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.fd-stat-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c, var(--fd-accent));
  opacity: 0.85;
  text-decoration: none;
}
.fd-stat-link:hover { opacity: 1; text-decoration: none; color: var(--c, var(--fd-accent)); }

/* Colour tokens */
.c-purple { --c: #6366f1; }
.c-amber  { --c: #f59e0b; }
.c-green  { --c: #10b981; }
.c-blue   { --c: #3b82f6; }
.c-cyan   { --c: #06b6d4; }
.c-red    { --c: #ef4444; }
.c-pink   { --c: #ec4899; }
.c-orange { --c: #f97316; }

/* ================================================
   TABLES
================================================ */
.table {
  color: var(--fd-text) !important;
  border-color: var(--fd-border) !important;
  margin: 0 !important;
}

.table thead { background: #fafbfd !important; }

.table th {
  color: var(--fd-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-color: var(--fd-border) !important;
  padding: 13px 16px !important;
  white-space: nowrap;
}

.table td {
  color: var(--fd-text) !important;
  font-size: 14px !important;
  border-color: var(--fd-border) !important;
  padding: 14px 16px !important;
  vertical-align: middle !important;
}

.table th.ps-4, .table td.ps-4 { padding-left: 24px !important; }
.table th.pe-4, .table td.pe-4 { padding-right: 24px !important; }
.table th.py-3, .table td.py-3 { padding-top: 13px !important; padding-bottom: 13px !important; }

.table-hover tbody tr { transition: background var(--fd-transition); }
.table-hover tbody tr:hover { background: rgba(99,102,241,0.04) !important; }
.table-hover tbody tr:hover td { color: var(--fd-text) !important; }

.table thead th { border-bottom: 2px solid var(--fd-border) !important; }
.table tbody tr + tr td { border-top: 1px solid var(--fd-border) !important; }

/* ================================================
   BADGES
================================================ */
.badge {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  padding: 5px 10px !important;
  border-radius: 6px !important;
}

.badge.bg-warning,
span.badge.bg-warning.text-dark {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
}

.badge.bg-success {
  background: #d1fae5 !important;
  color: #065f46 !important;
  border: 1px solid #a7f3d0 !important;
}

.badge.bg-danger {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border: 1px solid #fecaca !important;
}

.badge.bg-info {
  background: #cffafe !important;
  color: #164e63 !important;
  border: 1px solid #a5f3fc !important;
}

.badge.bg-dark {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

.badge.bg-secondary {
  background: #f1f5f9 !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
}

.badge.bg-light {
  background: #f8fafc !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
}

.badge.text-white { color: inherit !important; }
.badge.text-dark  { color: #92400e !important; }

/* ================================================
   BUTTONS
================================================ */
.btn {
  font-weight: 600 !important;
  font-size: 13px !important;
  border-radius: var(--fd-radius-sm) !important;
  padding: 8px 16px !important;
  transition: all var(--fd-transition) !important;
  letter-spacing: 0.01em;
  border: none !important;
  cursor: pointer;
}

.btn-primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(99,102,241,0.3) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
  box-shadow: 0 6px 20px rgba(99,102,241,0.45) !important;
  transform: translateY(-1px);
  color: #fff !important;
}

.btn-success {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(16,185,129,0.25) !important;
}
.btn-success:hover {
  box-shadow: 0 6px 18px rgba(16,185,129,0.4) !important;
  transform: translateY(-1px);
  color: #fff !important;
}

.btn-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(245,158,11,0.25) !important;
}
.btn-warning:hover {
  box-shadow: 0 6px 18px rgba(245,158,11,0.4) !important;
  transform: translateY(-1px);
  color: #fff !important;
}
.btn-warning.text-dark { color: #fff !important; }

.btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(239,68,68,0.25) !important;
}
.btn-danger:hover {
  box-shadow: 0 6px 18px rgba(239,68,68,0.4) !important;
  transform: translateY(-1px);
  color: #fff !important;
}

.btn-secondary {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}
.btn-secondary:hover {
  background: #e2e8f0 !important;
  color: var(--fd-text) !important;
  transform: translateY(-1px);
}

.btn-light {
  background: #f8fafc !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
}
.btn-light:hover {
  background: #f1f5f9 !important;
  color: var(--fd-text) !important;
}

.btn-sm { padding: 5px 11px !important; font-size: 12px !important; }

/* Icon-only btn handled inline — no global override needed */

/* ================================================
   FORMS
================================================ */
.form-control,
.form-select {
  background: #fff !important;
  border: 1px solid var(--fd-border) !important;
  border-radius: var(--fd-radius-sm) !important;
  color: var(--fd-text) !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  transition: all var(--fd-transition) !important;
}
.form-control:focus,
.form-select:focus {
  background: #fff !important;
  border-color: var(--fd-accent) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12) !important;
  color: var(--fd-text) !important;
  outline: none;
}
.form-control::placeholder { color: #b0b8c8 !important; }

.form-label {
  color: var(--fd-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 6px !important;
}

.input-group-text {
  background: #f8fafc !important;
  border: 1px solid var(--fd-border) !important;
  color: var(--fd-muted) !important;
}

/* ================================================
   FOOTER
================================================ */
.main-footer {
  background: #fff !important;
  border-top: 1px solid var(--fd-border) !important;
  color: var(--fd-muted) !important;
  font-size: 12px !important;
  padding: 14px 28px !important;
  margin-left: var(--fd-sidebar-w) !important;
}

/* ================================================
   EMPTY STATES
================================================ */
.table td.text-center i { color: #cbd5e1 !important; margin-bottom: 8px; }
.table td.text-center span { font-size: 13px; color: var(--fd-muted) !important; }

/* ================================================
   LOGIN PAGE
================================================ */
body.login-page {
  background: var(--fd-bg) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-box { z-index: 10; position: relative; width: 100%; max-width: 420px; }
.login-logo { text-align: center; margin-bottom: 24px; }

.login-box .card {
  background: #fff !important;
  border: 1px solid var(--fd-border) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06) !important;
  border-radius: 20px !important;
}

.login-card-body { padding: 36px !important; }
.login-box-msg {
  color: var(--fd-muted) !important;
  font-size: 13px !important;
  text-align: center;
  margin-bottom: 24px !important;
}
.login-box .btn-primary {
  width: 100%;
  padding: 12px !important;
  font-size: 14px !important;
  letter-spacing: 0.03em;
  border-radius: 10px !important;
}

/* ================================================
   ADMIN LTE OVERRIDES
================================================ */
.elevation-4, .elevation-2, .elevation-3 { box-shadow: none !important; }
.navbar-white { background: #fff !important; }
.navbar-light .navbar-nav .nav-link { color: var(--fd-muted) !important; }
.sidebar-mini-md.sidebar-collapse .main-header.navbar { margin-left: 4.6rem !important; }
.sidebar-mini-md.sidebar-collapse .content-wrapper { margin-left: 4.6rem !important; }
.sidebar-mini-md.sidebar-collapse .main-footer { margin-left: 4.6rem !important; }

/* ================================================
   UTILITIES
================================================ */
.text-muted   { color: var(--fd-muted) !important; }
.fw-bold, .fw-semibold { color: var(--fd-text) !important; }
.border-bottom { border-color: var(--fd-border) !important; }
.border        { border-color: var(--fd-border) !important; }
.shadow-sm     { box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; }
.bg-white      { background: #fff !important; }
.rounded-3     { border-radius: var(--fd-radius) !important; }

.d-flex.justify-content-end.gap-2 { align-items: center; gap: 6px !important; }
.action-buttons { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }

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

.card  { animation: fd-in 0.28s ease both; }
.fd-stat { animation: fd-in 0.28s ease both; }

.row > [class*="col-"]:nth-child(1) .fd-stat { animation-delay: 0.04s; }
.row > [class*="col-"]:nth-child(2) .fd-stat { animation-delay: 0.09s; }
.row > [class*="col-"]:nth-child(3) .fd-stat { animation-delay: 0.14s; }
.row > [class*="col-"]:nth-child(4) .fd-stat { animation-delay: 0.19s; }
.row > [class*="col-"]:nth-child(5) .fd-stat { animation-delay: 0.24s; }
.row > [class*="col-"]:nth-child(6) .fd-stat { animation-delay: 0.29s; }

/* Responsive */
@media (max-width: 768px) {
  :root { --fd-sidebar-w: 0px; }
  .main-header.navbar { margin-left: 0 !important; }
  .content-wrapper    { margin-left: 0 !important; }
  .main-footer        { margin-left: 0 !important; }
}

/* ================================================
   FOOTER FIX — full width, outside content wrapper
================================================ */
.main-footer {
  background: #ffffff !important;
  border-top: 1px solid var(--fd-border) !important;
  color: var(--fd-muted) !important;
  font-size: 12px !important;
  padding: 16px 28px !important;
  margin-left: var(--fd-sidebar-w) !important;
  width: calc(100% - var(--fd-sidebar-w)) !important;
  text-align: center !important;
}

/* ================================================
   DATATABLES — light mode styling
================================================ */

/* Search input + length select */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: #fff !important;
  border: 1px solid var(--fd-border) !important;
  border-radius: 8px !important;
  color: var(--fd-text) !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  outline: none;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1) !important;
}

/* Info text "Showing 1 to 5 of 5 entries" */
.dataTables_wrapper .dataTables_info {
  color: var(--fd-muted) !important;
  font-size: 13px !important;
  padding: 14px 24px !important;
}

/* Pagination buttons */
.dataTables_wrapper .dataTables_paginate {
  padding: 10px 24px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 8px !important;
  border: 1px solid var(--fd-border) !important;
  background: #f8fafc !important;
  color: var(--fd-text) !important;
  font-size: 13px !important;
  padding: 5px 12px !important;
  margin: 0 2px !important;
  cursor: pointer;
  transition: all 0.18s;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #f1f5f9 !important;
  border-color: #6366f1 !important;
  color: #6366f1 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  border-color: #6366f1 !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(99,102,241,0.3) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  opacity: 0.4;
  cursor: not-allowed;
  color: var(--fd-muted) !important;
}

/* Export buttons */
.dt-buttons .btn,
.dt-buttons .dt-button {
  background: #f8fafc !important;
  border: 1px solid var(--fd-border) !important;
  color: var(--fd-text) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  padding: 6px 12px !important;
  margin-right: 4px !important;
  transition: all 0.18s;
}

.dt-buttons .btn:hover,
.dt-buttons .dt-button:hover {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
  color: #fff !important;
}

/* DataTables wrapper padding fix — sits inside .card already */
.dataTables_wrapper {
  padding: 0 !important;
}

div.dataTables_wrapper div.dataTables_filter {
  text-align: right;
  padding: 14px 24px 0 !important;
}

div.dataTables_wrapper div.dataTables_length {
  padding: 14px 0 0 24px !important;
}

/* Bottom section — info + pagination side by side */
div.dataTables_wrapper div.dataTables_info,
div.dataTables_wrapper div.dataTables_paginate {
  display: inline-block;
  vertical-align: middle;
}

div.dataTables_wrapper div.dataTables_paginate {
  float: right;
}