/*
  Admin panel theme overrides (Tabler + Bootstrap)
  Base:   #0E120A
  Accent: #499506

  Usage:
  - Include this file AFTER Tabler CSS in `templates/base.html`, e.g.
    <link rel="stylesheet" href="{{ url_for(__name__ ~ ':statics', path='css/custom/theme.css') }}?v=1" />

  Notes:
  - This intentionally avoids editing vendor CSS and instead overrides CSS variables + common components.
*/

:root,
:root[data-bs-theme="dark"],
html.dark,
html[data-bs-theme="dark"],
body {
  /* Core palette */
  --uc-bg-0: #0e120a; /* page background */
  --uc-bg-1: #12180c; /* cards / elevated surfaces */
  --uc-bg-2: #1a2412; /* hover / active */
  --uc-border: #2a3a1d;
  --uc-text: #eaf2e1;
  --uc-text-muted: #a7b59a;

  --uc-accent: #499506;
  --uc-accent-2: #62b10e; /* hover-ish */
  --uc-accent-rgb: 73, 149, 6;

  --uc-danger: #e03131;
  --uc-warning: #f59f00;
  --uc-info: #228be6;

  color-scheme: dark;
}

/* Base page */
html,
body {
  background: var(--uc-bg-0) !important;
  color: var(--uc-text) !important;
}

a {
  color: var(--uc-accent) !important;
}
a:hover {
  color: var(--uc-accent-2) !important;
}

/* -----------------------------
   Bootstrap variables (Tabler is Bootstrap-based)
-------------------------------- */
:root,
:root[data-bs-theme="dark"] {
  --bs-body-bg: var(--uc-bg-0) !important;
  --bs-body-color: var(--uc-text) !important;
  --bs-secondary-color: var(--uc-text-muted) !important;
  --bs-tertiary-color: var(--uc-text-muted) !important;

  --bs-border-color: var(--uc-border) !important;
  --bs-border-color-translucent: rgba(42, 58, 29, 0.55) !important;

  --bs-link-color: var(--uc-accent) !important;
  --bs-link-hover-color: var(--uc-accent-2) !important;

  --bs-primary: var(--uc-accent) !important;
  --bs-primary-rgb: var(--uc-accent-rgb) !important;

  --bs-focus-ring-color: rgba(var(--uc-accent-rgb), 0.35) !important;

  /* Form controls */
  --bs-form-control-bg: var(--uc-bg-1) !important;
  --bs-form-control-color: var(--uc-text) !important;
  --bs-form-control-border-color: var(--uc-border) !important;
  --bs-form-control-focus-border-color: var(--uc-accent) !important;
}

/* -----------------------------
   Tabler CSS variables
-------------------------------- */
:root,
:root[data-bs-theme="dark"] {
  /* Backgrounds / surfaces */
  --tblr-body-bg: var(--uc-bg-0) !important;
  --tblr-bg-surface: var(--uc-bg-1) !important;
  --tblr-bg-surface-secondary: var(--uc-bg-1) !important;
  --tblr-bg-surface-tertiary: var(--uc-bg-2) !important;

  /* Text */
  --tblr-body-color: var(--uc-text) !important;
  --tblr-muted: var(--uc-text-muted) !important;

  /* Borders */
  --tblr-border-color: var(--uc-border) !important;

  /* Brand / primary */
  --tblr-primary: var(--uc-accent) !important;
  --tblr-primary-rgb: var(--uc-accent-rgb) !important;

  /* Links */
  --tblr-link-color: var(--uc-accent) !important;
  --tblr-link-hover-color: var(--uc-accent-2) !important;
}

/* -----------------------------
   Common layout elements
-------------------------------- */
.navbar,
.navbar.navbar-vertical,
.header,
.footer {
  background: var(--uc-bg-1) !important;
  border-color: var(--uc-border) !important;
}

.navbar .nav-link,
.navbar a,
.header a {
  color: var(--uc-text) !important;
}
.navbar .nav-link:hover,
.navbar a:hover,
.header a:hover {
  color: var(--uc-accent-2) !important;
}

/* Sidebar / nav active */
.navbar-vertical .nav-link.active,
.navbar-vertical .nav-link[aria-current="page"] {
  color: var(--uc-text) !important;
  background: rgba(var(--uc-accent-rgb), 0.18) !important;
  border-left: 2px solid var(--uc-accent) !important;
}

.navbar-vertical .nav-link:hover {
  background: var(--uc-bg-2) !important;
}

/* -----------------------------
   Cards / tables / dropdowns
-------------------------------- */
.card,
.modal-content,
.dropdown-menu,
.popover,
.toast,
.offcanvas {
  background: var(--uc-bg-1) !important;
  color: var(--uc-text) !important;
  border-color: var(--uc-border) !important;
}

.card-header,
.card-footer,
.modal-header,
.modal-footer {
  background: transparent !important;
  border-color: var(--uc-border) !important;
}

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--uc-text);
  --bs-table-border-color: var(--uc-border);
  color: var(--uc-text) !important;
}
.table thead th {
  color: var(--uc-text) !important;
  border-color: var(--uc-border) !important;
}
.table tbody tr:hover {
  background: rgba(26, 36, 18, 0.75) !important;
}

.dropdown-item {
  color: var(--uc-text) !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--uc-bg-2) !important;
  color: var(--uc-text) !important;
}
.dropdown-divider {
  border-color: rgba(42, 58, 29, 0.65) !important;
}

/* -----------------------------
   Buttons
-------------------------------- */
.btn {
  border-color: var(--uc-border) !important;
}

.btn-primary,
.btn.btn-primary {
  background: var(--uc-accent) !important;
  border-color: var(--uc-accent) !important;
  color: #0b0f07 !important;
}
.btn-primary:hover,
.btn.btn-primary:hover {
  background: var(--uc-accent-2) !important;
  border-color: var(--uc-accent-2) !important;
  color: #0b0f07 !important;
}

.btn-outline-primary,
.btn.btn-outline-primary {
  color: var(--uc-accent) !important;
  border-color: rgba(var(--uc-accent-rgb), 0.7) !important;
  background: transparent !important;
}
.btn-outline-primary:hover,
.btn.btn-outline-primary:hover {
  background: rgba(var(--uc-accent-rgb), 0.16) !important;
  border-color: var(--uc-accent) !important;
  color: var(--uc-text) !important;
}

.btn-secondary,
.btn.btn-secondary,
.btn-outline-secondary,
.btn.btn-outline-secondary {
  background: var(--uc-bg-1) !important;
  border-color: var(--uc-border) !important;
  color: var(--uc-text) !important;
}
.btn-secondary:hover,
.btn.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn.btn-outline-secondary:hover {
  background: var(--uc-bg-2) !important;
}

/* -----------------------------
   Forms
-------------------------------- */
.form-control,
.form-select,
.input-group-text,
.form-check-input,
textarea,
select {
  background: var(--uc-bg-1) !important;
  color: var(--uc-text) !important;
  border-color: var(--uc-border) !important;
}

.form-control::placeholder,
textarea::placeholder {
  color: rgba(167, 181, 154, 0.75) !important;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--uc-accent) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--uc-accent-rgb), 0.25) !important;
}

/* Checkboxes / radios */
.form-check-input:checked {
  background-color: var(--uc-accent) !important;
  border-color: var(--uc-accent) !important;
}
.form-check-input:not(:checked) {
  background-color: var(--uc-bg-1) !important;
}

/* -----------------------------
   Badges / Alerts
-------------------------------- */
.badge.bg-primary,
.badge.text-bg-primary {
  background: rgba(var(--uc-accent-rgb), 0.18) !important;
  color: var(--uc-text) !important;
  border: 1px solid rgba(var(--uc-accent-rgb), 0.45) !important;
}

.alert {
  background: var(--uc-bg-1) !important;
  color: var(--uc-text) !important;
  border-color: var(--uc-border) !important;
}
.alert-primary {
  border-color: rgba(var(--uc-accent-rgb), 0.45) !important;
}

/* -----------------------------
   Pagination
-------------------------------- */
.page-link {
  background: var(--uc-bg-1) !important;
  color: var(--uc-text) !important;
  border-color: var(--uc-border) !important;
}
.page-link:hover {
  background: var(--uc-bg-2) !important;
}
.page-item.active .page-link {
  background: rgba(var(--uc-accent-rgb), 0.22) !important;
  border-color: var(--uc-accent) !important;
  color: var(--uc-text) !important;
}

/* -----------------------------
   Tabs
-------------------------------- */
.nav-tabs {
  border-color: var(--uc-border) !important;
}
.nav-tabs .nav-link {
  color: var(--uc-text) !important;
  border-color: transparent !important;
}
.nav-tabs .nav-link:hover {
  background: var(--uc-bg-2) !important;
  border-color: var(--uc-border) !important;
}
.nav-tabs .nav-link.active {
  background: var(--uc-bg-1) !important;
  color: var(--uc-text) !important;
  border-color: var(--uc-border) !important;
  border-bottom-color: transparent !important;
}

/* -----------------------------
   Select2 (common in admin panels)
-------------------------------- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: var(--uc-bg-1) !important;
  border-color: var(--uc-border) !important;
  color: var(--uc-text) !important;
}
.select2-container--default .select2-results__option {
  background: var(--uc-bg-1) !important;
  color: var(--uc-text) !important;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--uc-bg-2) !important;
  color: var(--uc-text) !important;
}
.select2-dropdown {
  background: var(--uc-bg-1) !important;
  border-color: var(--uc-border) !important;
}

/* -----------------------------
   Utilities / small fixes
-------------------------------- */
hr {
  border-color: rgba(42, 58, 29, 0.65) !important;
}

.text-muted {
  color: var(--uc-text-muted) !important;
}

/* Reduce remaining "blue" focus for some components */
*:focus-visible {
  outline-color: rgba(var(--uc-accent-rgb), 0.65) !important;
}