/* ============================================================
   Katomiks brand skin — dark overlay on the Flexy template.
   Loaded after styles.min.css; keep every override in here so
   the vendor CSS stays untouched (same approach as the app/web:
   bg #12101A, card #201C2C, line #302A40, accent #F43F6B,
   gold #FFB94A, dim #948AA6, prose #DED7E6).
   ============================================================ */

:root {
  --kat-bg: #12101A;
  --kat-card: #201C2C;
  --kat-card-2: #2A2438;
  --kat-line: #302A40;
  --kat-accent: #F43F6B;
  --kat-accent-press: #D8355D;
  --kat-accent-soft: rgba(244, 63, 107, 0.14);
  --kat-gold: #FFB94A;
  --kat-dim: #948AA6;
  --kat-prose: #DED7E6;
  --kat-white: #F6F2FA;
  --kat-font: "Plus Jakarta Sans", -apple-system, sans-serif;
  --kat-serif: "Lora", Georgia, serif;
  --kat-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* ---------- Base ---------- */
html, body {
  background: var(--kat-bg) !important;
  color: var(--kat-prose) !important;
  font-family: var(--kat-font) !important;
}
.page-wrapper, .body-wrapper, .body-wrapper-inner {
  background: var(--kat-bg) !important;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--kat-white) !important;
  font-family: var(--kat-font) !important;
}
p, span, label, td, th, li, small { color: inherit; }
a { color: var(--kat-accent); }
a:hover { color: var(--kat-accent-press); }
.text-muted { color: var(--kat-dim) !important; }
.text-dark { color: var(--kat-prose) !important; }
hr { border-color: var(--kat-line); opacity: 1; }
::selection { background: var(--kat-accent); color: #fff; }

/* Brand wordmark (sidebar + login) */
.kat-wordmark {
  font-family: var(--kat-serif) !important;
  font-style: italic;
  font-weight: 600;
  color: var(--kat-white) !important;
  letter-spacing: 0.2px;
}
.kat-wordmark .kat-dot { color: var(--kat-accent); }
.kat-admin-chip {
  font-family: var(--kat-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--kat-dim);
  border: 1px solid var(--kat-line);
  border-radius: 6px;
  padding: 2px 6px;
  vertical-align: middle;
}
.logo-img img { border-radius: 10px; }

/* ---------- Sidebar ---------- */
.left-sidebar {
  background: var(--kat-card) !important;
  border-right: 1px solid var(--kat-line) !important;
  box-shadow: none !important;
}
.left-sidebar .brand-logo { border-bottom: 1px solid var(--kat-line); }
.sidebar-nav .nav-small-cap {
  color: var(--kat-dim) !important;
  font-family: var(--kat-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.sidebar-nav ul .sidebar-item .sidebar-link {
  color: var(--kat-dim) !important;
  border-radius: 10px;
}
.sidebar-nav ul .sidebar-item .sidebar-link iconify-icon { color: inherit !important; }
.sidebar-nav ul .sidebar-item .sidebar-link:hover {
  background: var(--kat-card-2) !important;
  color: var(--kat-white) !important;
}
.sidebar-nav ul .sidebar-item .sidebar-link.active,
.sidebar-nav ul .sidebar-item .sidebar-link.active:hover {
  background: var(--kat-accent-soft) !important;
  color: var(--kat-accent) !important;
  box-shadow: none !important;
}
.left-sidebar .hide-menu { color: inherit; }
.close-btn, .sidebartoggler { color: var(--kat-dim) !important; }

/* ---------- Topbar ---------- */
.app-header {
  background: rgba(18, 16, 26, 0.85) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--kat-line);
  box-shadow: none !important;
}
.app-header .navbar { background: transparent !important; }
.app-header .nav-link { color: var(--kat-dim) !important; }
.app-header .nav-link:hover { color: var(--kat-white) !important; }

/* ---------- Cards ---------- */
.card {
  background: var(--kat-card) !important;
  border: 1px solid var(--kat-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  color: var(--kat-prose);
  margin-bottom: 24px !important;
}
/* Equal-height cards: a lone card inside a grid column stretches to the
   tallest sibling in the row, keeping the 24px row gap consistent
   (stat cards were ragged and the tallest one touched the next row). */
.row > [class^="col"] > .card:only-child,
.row > [class*=" col"] > .card:only-child {
  height: calc(100% - 24px);
}
.card .card-title { color: var(--kat-white) !important; }
.card-header, .card-footer {
  background: transparent !important;
  border-color: var(--kat-line) !important;
}

/* ---------- Tables (incl. DataTables) ---------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--kat-prose);
  --bs-table-border-color: var(--kat-line);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
  --bs-table-striped-color: var(--kat-prose);
  --bs-table-hover-bg: var(--kat-card-2);
  --bs-table-hover-color: var(--kat-white);
  color: var(--kat-prose) !important;
  border-color: var(--kat-line) !important;
}
.table thead th {
  color: var(--kat-dim) !important;
  border-bottom: 1px solid var(--kat-line) !important;
  font-family: var(--kat-mono);
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-weight: 500;
}
.table td, .table th { border-color: var(--kat-line) !important; }
table.dataTable { border-color: var(--kat-line) !important; }
div.dt-container .dt-info,
div.dt-container .dt-length label,
div.dt-container .dt-search label,
.dataTables_info, .dataTables_length label, .dataTables_filter label {
  color: var(--kat-dim) !important;
}
div.dt-container select, div.dt-container input,
.dataTables_length select, .dataTables_filter input {
  background: var(--kat-bg) !important;
  border: 1px solid var(--kat-line) !important;
  color: var(--kat-prose) !important;
  border-radius: 8px;
}
table.dataTable > tbody > tr { background: transparent !important; }
table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * {
  box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.02) !important;
  color: var(--kat-prose);
}
table.dataTable.table-hover > tbody > tr:hover > * {
  box-shadow: inset 0 0 0 9999px var(--kat-card-2) !important;
  color: var(--kat-white);
}

/* Pagination */
.page-link {
  background: transparent !important;
  border-color: var(--kat-line) !important;
  color: var(--kat-dim) !important;
}
.page-link:hover { color: var(--kat-white) !important; background: var(--kat-card-2) !important; }
.page-item.active .page-link,
.dt-paging-button.current, .dt-paging-button.current:hover {
  background: var(--kat-accent) !important;
  border-color: var(--kat-accent) !important;
  color: #fff !important;
}
.page-item.disabled .page-link { color: var(--kat-line) !important; }
/* DataTables 2 paging renders <button class="dt-paging-button"> — style it
   directly too, in case the bs5 .page-link classes aren't applied. */
button.dt-paging-button {
  background: transparent !important;
  border: 1px solid var(--kat-line) !important;
  color: var(--kat-dim) !important;
  border-radius: 8px;
}
button.dt-paging-button:hover:not(.disabled):not(.current) {
  background: var(--kat-card-2) !important;
  color: var(--kat-white) !important;
}
button.dt-paging-button.disabled { color: var(--kat-line) !important; opacity: 1; }

/* ---------- Forms ---------- */
.form-label, .col-form-label { color: var(--kat-prose) !important; }
.form-control, .form-select, textarea.form-control {
  background: var(--kat-bg) !important;
  border: 1px solid var(--kat-line) !important;
  color: var(--kat-prose) !important;
  border-radius: 10px !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--kat-accent) !important;
  box-shadow: 0 0 0 3px var(--kat-accent-soft) !important;
}
.form-control::placeholder { color: var(--kat-dim) !important; }
.form-control:disabled, .form-select:disabled { background: var(--kat-card-2) !important; }
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23948AA6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 14px 10px !important;
}
.form-check-input {
  background-color: var(--kat-bg);
  border-color: var(--kat-line);
}
.form-check-input:checked {
  background-color: var(--kat-accent) !important;
  border-color: var(--kat-accent) !important;
}
.input-group-text {
  background: var(--kat-card-2) !important;
  border-color: var(--kat-line) !important;
  color: var(--kat-dim) !important;
}

/* ---------- Buttons ---------- */
/* Flexy sizes buttons for its own font; Plus Jakarta Sans has taller
   metrics and descenders were clipping ("Unpublish…"). Let buttons size
   from their content instead. */
.btn {
  height: auto !important;
  line-height: 1.5 !important;
  overflow: visible !important;
}
.btn-primary {
  background: var(--kat-accent) !important;
  border-color: var(--kat-accent) !important;
  color: #fff !important;
  border-radius: 10px;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: var(--kat-accent-press) !important;
  border-color: var(--kat-accent-press) !important;
}
.btn-outline-primary {
  color: var(--kat-accent) !important;
  border-color: var(--kat-accent) !important;
  border-radius: 10px;
}
.btn-outline-primary:hover {
  background: var(--kat-accent) !important;
  color: #fff !important;
}
.btn-secondary, .btn-light {
  background: var(--kat-card-2) !important;
  border-color: var(--kat-line) !important;
  color: var(--kat-prose) !important;
  border-radius: 10px;
}
.btn-secondary:hover, .btn-light:hover { background: var(--kat-line) !important; color: var(--kat-white) !important; }
.btn-outline-secondary {
  color: var(--kat-dim) !important;
  border-color: var(--kat-line) !important;
  border-radius: 10px;
}
.btn-outline-secondary:hover { background: var(--kat-card-2) !important; color: var(--kat-white) !important; }
.btn-warning { background: var(--kat-gold) !important; border-color: var(--kat-gold) !important; color: #1c1408 !important; }
.btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

/* ---------- Badges (mono, like the app) ---------- */
.badge {
  font-family: var(--kat-mono) !important;
  font-weight: 500 !important;
  letter-spacing: 0.4px;
  border-radius: 6px;
}
.bg-primary { background-color: var(--kat-accent) !important; }
.bg-warning { background-color: var(--kat-gold) !important; color: #1c1408 !important; }
.bg-light-primary, .bg-primary-subtle { background-color: var(--kat-accent-soft) !important; color: var(--kat-accent) !important; }
.text-primary { color: var(--kat-accent) !important; }
.text-warning { color: var(--kat-gold) !important; }

/* Bootstrap light-on-white utilities remapped to dark surfaces —
   modules use "bg-light text-dark" for neutral chips and read-only
   panels (synopsis, bio, sample text), which stay white otherwise. */
.bg-light, .bg-white {
  background-color: var(--kat-card-2) !important;
  color: var(--kat-prose) !important;
}
.badge.bg-light, .badge.bg-white { color: var(--kat-dim) !important; border: 1px solid var(--kat-line); }
.border { border-color: var(--kat-line) !important; }
.border-top, .border-bottom, .border-start, .border-end { border-color: var(--kat-line) !important; }

/* ---------- Dropdowns ---------- */
.dropdown-menu {
  background: var(--kat-card) !important;
  border: 1px solid var(--kat-line) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
  color: var(--kat-prose);
}
.dropdown-item { color: var(--kat-prose) !important; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--kat-card-2) !important; color: var(--kat-white) !important; }
.dropdown-divider { border-color: var(--kat-line); }

/* ---------- Modals ---------- */
.modal-content {
  background: var(--kat-card) !important;
  border: 1px solid var(--kat-line) !important;
  border-radius: 16px !important;
  color: var(--kat-prose);
}
.modal-header, .modal-footer { border-color: var(--kat-line) !important; }
.modal-title { color: var(--kat-white) !important; }
.modal-backdrop.show { opacity: 0.7; }

/* Tabs inside modals */
.nav-tabs { border-color: var(--kat-line) !important; }
.nav-tabs .nav-link { color: var(--kat-dim) !important; border: none !important; }
.nav-tabs .nav-link.active {
  background: transparent !important;
  color: var(--kat-accent) !important;
  border-bottom: 2px solid var(--kat-accent) !important;
}

/* ---------- Alerts ---------- */
.alert-danger {
  background: rgba(244, 63, 107, 0.12) !important;
  border-color: rgba(244, 63, 107, 0.4) !important;
  color: #ff8aa6 !important;
}
.alert-success {
  background: rgba(34, 197, 94, 0.12) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #7ce0a3 !important;
}

/* ---------- Select2 (bootstrap-5 theme) ---------- */
.select2-container--bootstrap-5 .select2-selection {
  background: var(--kat-bg) !important;
  border: 1px solid var(--kat-line) !important;
  color: var(--kat-prose) !important;
  border-radius: 10px !important;
}
.select2-container--bootstrap-5 .select2-selection__rendered { color: var(--kat-prose) !important; }
.select2-container--bootstrap-5 .select2-dropdown {
  background: var(--kat-card) !important;
  border-color: var(--kat-line) !important;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
  background: var(--kat-bg) !important;
  border-color: var(--kat-line) !important;
  color: var(--kat-prose) !important;
}
.select2-container--bootstrap-5 .select2-results__option { color: var(--kat-prose); }
.select2-container--bootstrap-5 .select2-results__option--highlighted {
  background: var(--kat-accent) !important;
  color: #fff !important;
}
.select2-container--bootstrap-5 .select2-results__option--selected {
  background: var(--kat-card-2) !important;
  color: var(--kat-white) !important;
}

/* ---------- SweetAlert2 / Notyf ---------- */
.swal2-popup {
  background: var(--kat-card) !important;
  color: var(--kat-prose) !important;
  border: 1px solid var(--kat-line);
  border-radius: 16px !important;
}
.swal2-title { color: var(--kat-white) !important; }
.swal2-html-container { color: var(--kat-prose) !important; }
.swal2-styled.swal2-confirm {
  background: var(--kat-accent) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.swal2-styled.swal2-cancel {
  background: var(--kat-card-2) !important;
  border-radius: 10px !important;
}

/* ---------- Daterangepicker ---------- */
.daterangepicker {
  background: var(--kat-card) !important;
  border: 1px solid var(--kat-line) !important;
  font-family: var(--kat-font) !important;
}
.daterangepicker .calendar-table {
  background: var(--kat-card) !important;
  border: none !important;
  color: var(--kat-prose);
}
.daterangepicker .calendar-table td, .daterangepicker .calendar-table th { color: var(--kat-prose); }
.daterangepicker td.off { color: var(--kat-dim) !important; background: transparent !important; }
.daterangepicker td.available:hover, .daterangepicker th.available:hover { background: var(--kat-card-2) !important; }
.daterangepicker td.in-range { background: var(--kat-accent-soft) !important; color: var(--kat-white) !important; }
.daterangepicker td.active, .daterangepicker td.active:hover { background: var(--kat-accent) !important; }
.daterangepicker .ranges li.active { background: var(--kat-accent) !important; }
.daterangepicker .ranges li:hover { background: var(--kat-card-2) !important; }
.daterangepicker:after, .daterangepicker:before { border-bottom-color: var(--kat-card) !important; }
.daterangepicker .drp-buttons { border-top-color: var(--kat-line) !important; }

/* ---------- Login page ---------- */
.kat-auth-bg {
  background: var(--kat-bg) !important;
  background-image: radial-gradient(ellipse 70% 50% at 50% -10%, rgba(244, 63, 107, 0.12), transparent) !important;
}

/* ---------- Loaders / misc ---------- */
.is-loading:after, .loader { border-color: var(--kat-accent); border-bottom-color: transparent; }
.btn-primary.is-loading:after { border-color: #fff; border-bottom-color: transparent; }
.simplebar-scrollbar:before { background: var(--kat-line) !important; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--kat-bg); }
::-webkit-scrollbar-thumb { background: var(--kat-line); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--kat-dim); }