/* ============================================================
   VTClean — Veritiv-inspired theme with Light / Dark mode
   ============================================================ */

/* ---------- CSS Custom Properties (Light - default) ---------- */
:root,
[data-theme="light"] {
  --vt-primary:       #002B5C;
  --vt-primary-rgb:   0, 43, 92;
  --vt-primary-hover: #001f42;
  --vt-secondary:     #0072CE;
  --vt-accent:        #E31937;
  --vt-accent-hover:  #c1142e;

  --vt-bg:            #F2F3F5;
  --vt-bg-card:       #FFFFFF;
  --vt-bg-card-alt:   #F8F9FA;
  --vt-bg-input:      #FFFFFF;
  --vt-bg-navbar:     #002B5C;
  --vt-bg-code:       #eef1f5;

  --vt-border:        #DEE2E6;
  --vt-border-light:  #E9ECEF;

  --vt-text:          #212529;
  --vt-text-secondary:#5A6270;
  --vt-text-muted:    #8B929A;
  --vt-text-on-primary:#FFFFFF;

  --vt-shadow:        0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --vt-shadow-lg:     0 4px 12px rgba(0,0,0,.1);
  --vt-radius:        0.625rem;
  --vt-radius-lg:     0.875rem;

  --vt-table-stripe:  rgba(0, 43, 92, .03);
  --vt-table-hover:   rgba(0, 43, 92, .06);

  --vt-success:       #198754;
  --vt-warning:       #F0AD4E;
  --vt-danger:        #DC3545;
  --vt-info:          #0072CE;

  color-scheme: light;
}

/* ---------- Dark theme ---------- */
[data-theme="dark"] {
  --vt-primary:       #4DA3FF;
  --vt-primary-rgb:   77, 163, 255;
  --vt-primary-hover: #7ABBFF;
  --vt-secondary:     #5BB8FF;
  --vt-accent:        #FF5C6E;
  --vt-accent-hover:  #FF8490;

  --vt-bg:            #111827;
  --vt-bg-card:       #1F2937;
  --vt-bg-card-alt:   #1a2332;
  --vt-bg-input:      #283346;
  --vt-bg-navbar:     #0f172a;
  --vt-bg-code:       #283346;

  --vt-border:        #374151;
  --vt-border-light:  #2d3a4a;

  --vt-text:          #E5E7EB;
  --vt-text-secondary:#9CA3AF;
  --vt-text-muted:    #6B7280;
  --vt-text-on-primary:#111827;

  --vt-shadow:        0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --vt-shadow-lg:     0 4px 16px rgba(0,0,0,.4);

  --vt-table-stripe:  rgba(255,255,255,.03);
  --vt-table-hover:   rgba(255,255,255,.06);

  --vt-success:       #34D399;
  --vt-warning:       #FBBF24;
  --vt-danger:        #F87171;
  --vt-info:          #60A5FA;

  color-scheme: dark;
}

/* ---------- Transition for theme switch ---------- */
body,
.card, .card-header, .card-body, .card-footer,
.navbar, .form-control, .form-select, .btn,
.table, .alert, .badge, .list-group-item,
.nav-tabs .nav-link {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* ---------- Base ---------- */
body {
  background-color: var(--vt-bg);
  color: var(--vt-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--vt-text);
}

a { color: var(--vt-secondary); }
a:hover { color: var(--vt-primary); }

code {
  background-color: var(--vt-bg-code);
  color: var(--vt-accent);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.88em;
}

/* ---------- Navbar ---------- */
.navbar {
  background-color: var(--vt-bg-navbar) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  padding: 0.6rem 1rem;
}

.navbar-brand {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #fff !important;
  text-transform: uppercase;
}

.navbar-brand i {
  color: var(--vt-accent);
}

[data-theme="dark"] .navbar-brand i {
  color: var(--vt-accent);
}

/* ---------- Theme Toggle ---------- */
.theme-toggle {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.05rem;
  transition: background .2s, transform .2s;
}

.theme-toggle:hover {
  background: rgba(255,255,255,.22);
  transform: scale(1.1);
}

.theme-toggle:active {
  transform: scale(0.95);
}

/* ---------- Cards ---------- */
.card {
  background-color: var(--vt-bg-card);
  border: 1px solid var(--vt-border);
  border-radius: var(--vt-radius-lg);
  box-shadow: var(--vt-shadow);
}

.card-header {
  background-color: var(--vt-bg-card);
  border-bottom: 1px solid var(--vt-border);
  font-weight: 600;
  font-size: 0.93rem;
  color: var(--vt-text);
  border-radius: var(--vt-radius-lg) var(--vt-radius-lg) 0 0 !important;
  padding: 0.75rem 1rem;
}

.card-body {
  color: var(--vt-text);
}

.card-footer {
  background-color: var(--vt-bg-card-alt);
  border-top: 1px solid var(--vt-border);
  color: var(--vt-text-muted);
}

.card.text-decoration-none:hover {
  box-shadow: var(--vt-shadow-lg);
  border-color: var(--vt-secondary);
  transform: translateY(-2px);
  transition: all .2s ease;
}

.card.text-decoration-none {
  color: var(--vt-text);
}

/* ---------- Dashboard stat cards ---------- */
.card.text-center .card-body .fs-2 {
  font-weight: 800;
}

/* ---------- Buttons ---------- */
.btn-primary {
  background-color: var(--vt-primary);
  border-color: var(--vt-primary);
  color: var(--vt-text-on-primary);
  font-weight: 600;
  border-radius: var(--vt-radius);
}

[data-theme="dark"] .btn-primary {
  color: #111827;
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--vt-primary-hover);
  border-color: var(--vt-primary-hover);
}

.btn-outline-primary {
  color: var(--vt-primary);
  border-color: var(--vt-primary);
}

.btn-outline-primary:hover {
  background-color: var(--vt-primary);
  color: var(--vt-text-on-primary);
}

.btn-outline-secondary {
  color: var(--vt-text-secondary);
  border-color: var(--vt-border);
}

.btn-outline-secondary:hover {
  background-color: var(--vt-bg-card-alt);
  color: var(--vt-text);
  border-color: var(--vt-text-secondary);
}

.btn-outline-danger {
  color: var(--vt-danger);
  border-color: var(--vt-danger);
}

.btn-outline-danger:hover {
  background-color: var(--vt-danger);
  color: #fff;
}

.btn-outline-warning {
  color: var(--vt-warning);
  border-color: var(--vt-warning);
}

.btn-outline-warning:hover {
  background-color: var(--vt-warning);
  color: #000;
}

.btn-warning {
  background-color: var(--vt-warning);
  border-color: var(--vt-warning);
  color: #000;
  font-weight: 600;
}

.btn-success {
  background-color: var(--vt-success);
  border-color: var(--vt-success);
  font-weight: 600;
}

.btn-outline-light {
  border-color: rgba(255,255,255,.4);
  color: #fff;
}

.btn-outline-light:hover {
  background-color: rgba(255,255,255,.15);
  color: #fff;
  border-color: rgba(255,255,255,.6);
}

.btn {
  border-radius: var(--vt-radius);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ---------- Forms ---------- */
.form-control, .form-select {
  background-color: var(--vt-bg-input);
  border-color: var(--vt-border);
  color: var(--vt-text);
  border-radius: var(--vt-radius);
}

.form-control:focus, .form-select:focus {
  border-color: var(--vt-secondary);
  box-shadow: 0 0 0 3px rgba(var(--vt-primary-rgb), .15);
  background-color: var(--vt-bg-input);
  color: var(--vt-text);
}

.form-control::placeholder {
  color: var(--vt-text-muted);
}

.form-label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--vt-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
}

.form-check-input {
  border-color: var(--vt-border);
  background-color: var(--vt-bg-input);
}

.form-check-input:checked {
  background-color: var(--vt-primary);
  border-color: var(--vt-primary);
}

.form-check-label {
  color: var(--vt-text);
}

.form-check-lg .form-check-input {
  width: 1.4em;
  height: 1.4em;
  margin-top: 0.15em;
}

.form-check-lg .form-check-label {
  padding-left: 0.3rem;
  font-size: 1rem;
  line-height: 1.6;
}

/* ---------- Tables ---------- */
.table {
  color: var(--vt-text);
  --bs-table-bg: transparent;
  --bs-table-color: var(--vt-text);
}

.table th {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vt-text-muted);
  border-bottom-color: var(--vt-border);
  padding: 0.65rem 0.75rem;
}

.table td {
  border-bottom-color: var(--vt-border-light);
  padding: 0.65rem 0.75rem;
  vertical-align: middle;
}

.table-hover > tbody > tr:hover {
  background-color: var(--vt-table-hover);
  --bs-table-hover-bg: var(--vt-table-hover);
}

.table-light, thead.table-light {
  --bs-table-bg: var(--vt-bg-card-alt);
  --bs-table-color: var(--vt-text);
}

[data-theme="dark"] .table-light th,
[data-theme="dark"] thead.table-light th {
  background-color: var(--vt-bg-card-alt);
  color: var(--vt-text-muted);
}

.table-danger {
  --bs-table-bg: rgba(220, 53, 69, .08);
}

[data-theme="dark"] .table-danger {
  --bs-table-bg: rgba(248, 113, 113, .1);
}

thead.table-danger {
  --bs-table-bg: rgba(220, 53, 69, .12);
}

[data-theme="dark"] thead.table-danger {
  --bs-table-bg: rgba(248, 113, 113, .15);
}

/* ---------- Nav Tabs ---------- */
.nav-tabs {
  border-bottom-color: var(--vt-border);
}

.nav-tabs .nav-link {
  color: var(--vt-text-secondary);
  border-bottom: 3px solid transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  font-weight: 500;
  padding: 0.6rem 1rem;
  margin-bottom: -1px;
}

.nav-tabs .nav-link:hover {
  color: var(--vt-primary);
  border-bottom-color: rgba(var(--vt-primary-rgb), .3);
  background-color: transparent;
}

.nav-tabs .nav-link.active {
  color: var(--vt-primary);
  font-weight: 700;
  border-bottom-color: var(--vt-primary);
  background-color: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
}

/* ---------- Alerts ---------- */
.alert {
  border-radius: var(--vt-radius);
  border: none;
  font-weight: 500;
}

.alert-danger {
  background-color: rgba(220, 53, 69, .1);
  color: var(--vt-danger);
}

.alert-success {
  background-color: rgba(25, 135, 84, .1);
  color: var(--vt-success);
}

.alert-info {
  background-color: rgba(0, 114, 206, .1);
  color: var(--vt-info);
}

.alert-warning {
  background-color: rgba(240, 173, 78, .12);
  color: #856404;
}

[data-theme="dark"] .alert-warning {
  color: var(--vt-warning);
}

/* ---------- Badges ---------- */
.badge {
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.35em 0.65em;
  border-radius: 6px;
}

.badge.bg-secondary {
  background-color: var(--vt-text-muted) !important;
}

.badge.bg-success {
  background-color: var(--vt-success) !important;
}

.badge.bg-warning {
  background-color: var(--vt-warning) !important;
}

.badge.bg-danger {
  background-color: var(--vt-danger) !important;
}

.badge.bg-info {
  background-color: var(--vt-info) !important;
}

/* ---------- List Groups ---------- */
.list-group-item {
  background-color: var(--vt-bg-card);
  border-color: var(--vt-border-light);
  color: var(--vt-text);
}

/* ---------- Utilities override ---------- */
.text-primary { color: var(--vt-primary) !important; }
.text-success { color: var(--vt-success) !important; }
.text-warning { color: var(--vt-warning) !important; }
.text-danger  { color: var(--vt-danger) !important; }
.text-info    { color: var(--vt-info) !important; }
.text-muted   { color: var(--vt-text-muted) !important; }

.bg-light {
  background-color: var(--vt-bg-card-alt) !important;
}

.border {
  border-color: var(--vt-border) !important;
}

.border-danger {
  border-color: var(--vt-danger) !important;
}

.shadow-sm {
  box-shadow: var(--vt-shadow) !important;
}

/* ---------- Navbar text helpers ---------- */
.text-white-50 {
  color: rgba(255,255,255,.55) !important;
}

/* ---------- Scrollbar (dark mode) ---------- */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--vt-bg);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--vt-border);
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--vt-text-muted);
}

/* ---------- Page header accent bar ---------- */
h4 > i.bi {
  position: relative;
}

/* ---------- Responsive ---------- */
@media (max-width: 576px) {
  .container-fluid {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  h4 { font-size: 1.1rem; }
}

/* ---------- Print ---------- */
@media print {
  .navbar, .theme-toggle, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}