/*
  Admin panel theme overrides (Tabler + Bootstrap)
  Goal: neutral shadcn-like palette (slate/gray), subtle borders, restrained primary.

  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 (neutral / shadcn-like dark) */
    --uc-bg-0: #0b0f14; /* page background */
    --uc-bg-1: #0f172a; /* cards / elevated surfaces */
    --uc-bg-2: #111c33; /* hover / active */
    --uc-border: rgba(148, 163, 184, 0.18);
    --uc-text: #e5e7eb;
    --uc-text-muted: #94a3b8;

    /* Primary (subtle neutral-blue, not "brand-green") */
    --uc-accent: #3b82f6;
    --uc-accent-2: #60a5fa; /* hover-ish */
    --uc-accent-rgb: 59, 130, 246;

    --uc-danger: #ef4444;
    --uc-warning: #f59e0b;
    --uc-info: #38bdf8;

    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(148, 163, 184, 0.08) !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(148, 163, 184, 0.18) !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(148, 163, 184, 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)
   Goal: match Tabler/Bootstrap input paddings + height in edit/create forms
-------------------------------- */
.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;

    /* Align with typical Tabler/Bootstrap controls */
    min-height: calc(1.5em + 0.75rem + 2px) !important; /* ~38px */
    border-radius: 0.375rem !important; /* match .form-control */
}

/* Single select: center text + consistent horizontal padding */
.select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    color: var(--uc-text) !important;
    padding-left: 0.75rem !important;
    padding-right: 2.25rem !important; /* room for arrow/clear */
    line-height: calc(1.5em + 0.75rem) !important;
}

/* Arrow: vertically centered */
.select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    height: calc(1.5em + 0.75rem + 2px) !important;
    right: 0.5rem !important;
}

/* Multiple select: nicer chips spacing and padding */
.select2-container--default .select2-selection--multiple {
    padding: 0.25rem 0.5rem !important;
}
.select2-container--default
    .select2-selection--multiple
    .select2-selection__rendered {
    padding: 0 !important;
}
.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice {
    background: rgba(148, 163, 184, 0.1) !important;
    border: 1px solid var(--uc-border) !important;
    color: var(--uc-text) !important;
    border-radius: 999px !important;
    padding: 0.15rem 0.5rem !important;
    margin-top: 0.25rem !important;
    margin-right: 0.25rem !important;
}
.select2-container--default
    .select2-selection--multiple
    .select2-search__field {
    color: var(--uc-text) !important;
    margin-top: 0.25rem !important;
}

/* Focus ring consistent with the rest of the theme */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus
    .select2-selection--multiple {
    border-color: var(--uc-accent) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--uc-accent-rgb), 0.25) !important;
}

/* Dropdown */
.select2-container--default .select2-results__option {
    background: var(--uc-bg-1) !important;
    color: var(--uc-text) !important;
    padding: 0.5rem 0.75rem !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(148, 163, 184, 0.18) !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;
}