/* =========================================================
   THEME COMPONENTS — applies tokens across the whole app
========================================================= */

/* ── Page shell ─────────────────────────────────────────── */

body,
body.white-content {
  background: var(--bg-body) !important;
  color: var(--text-primary) !important;
}

.wrapper {
  background: var(--bg-body);
}

.main-panel,
body.white-content .main-panel {
  background: var(--bg-body) !important;
}

.content {
  color: var(--text-primary);
}

/* ── Typography ─────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6,
.card-title,
.card-category,
body.white-content h1,
body.white-content h2,
body.white-content h3,
body.white-content h4,
body.white-content h5,
body.white-content h6,
body.white-content p,
body.white-content .card-title,
body.white-content .card-category {
  color: var(--text-primary) !important;
}

.text-muted,
.card-stats .card-category,
body.white-content .text-muted {
  color: var(--text-secondary) !important;
}

/* ── Cards & dashboard ──────────────────────────────────── */

.card,
.card-chart,
.kpi-card {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary);
}

.card .card-header,
.card-chart .card-header {
  background: transparent !important;
  border-bottom-color: var(--border-color) !important;
}

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

.card-stats .card-title,
.card-chart .card-title {
  color: var(--text-primary) !important;
}

/* KPI dashboard icons */
.kpi-icon-info {
  background: var(--accent-soft) !important;
  color: var(--accent-color) !important;
}

.kpi-icon-info i {
  color: var(--accent-color) !important;
}

.kpi-icon-purple {
  background: var(--accent-soft) !important;
  color: var(--accent-color) !important;
}

.card-chart .card-header i.text-primary,
.card-chart .card-header i.text-info {
  color: var(--accent-color) !important;
}

/* ── Navbar ─────────────────────────────────────────────── */

.navbar,
body.white-content .navbar.navbar-transparent {
  background: var(--bg-navbar) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

body.white-content .navbar.navbar-transparent .navbar-brand,
body.white-content .navbar.navbar-transparent .navbar-nav li a:not(.dropdown-item) {
  color: var(--text-primary) !important;
}

/* ── Sidebar ────────────────────────────────────────────── */

.sidebar,
.off-canvas-sidebar,
body.white-content .sidebar {
  background: var(--bg-sidebar) !important;
  border-right: 1px solid var(--border-color) !important;
}

body.white-content .sidebar .nav li a:hover,
.sidebar .nav li a:hover {
  background: var(--sidebar-hover) !important;
  color: var(--text-primary) !important;
}

.sidebar .logo-normal,
.sidebar .nav p {
  color: var(--text-secondary) !important;
}

/* ── Tables ─────────────────────────────────────────────── */

.table,
.table thead th,
.table tbody td {
  color: var(--text-primary);
  border-color: var(--border-color) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background: var(--sidebar-hover);
}

body:not(.white-content) .table > thead > tr > th,
body:not(.white-content) .table > tbody > tr > td {
  border-color: var(--border-color) !important;
}

/* ── Forms ──────────────────────────────────────────────── */

.form-control,
body.white-content .form-control,
body:not(.white-content) select.form-control,
body:not(.white-content) input[type="date"].form-control {
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.form-control:focus,
body.white-content .form-control:focus,
body.white-content .input-group-focus .form-control {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 2px var(--accent-soft) !important;
}

body.white-content select.form-control option,
body:not(.white-content) select.form-control option {
  background-color: var(--bg-input);
  color: var(--text-primary);
}

/* ── Primary buttons (theme accent) ─────────────────────── */

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-fill.btn-primary,
.btn-fill.btn-primary:hover {
  background: var(--accent-color) !important;
  background-image: linear-gradient(
    to bottom left,
    var(--accent-color),
    var(--accent-dark),
    var(--accent-color)
  ) !important;
  background-size: 210% 210% !important;
  border-color: var(--accent-color) !important;
  color: #ffffff !important;
  box-shadow: none;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active:hover,
.btn-primary.active:hover {
  background-color: var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
}

.btn-primary.btn-simple,
.btn-primary.btn-simple:hover,
.btn-primary.btn-simple:focus {
  color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  background: transparent !important;
  background-image: none !important;
}

.btn-primary.btn-simple.active,
.btn-primary.btn-simple.active:hover {
  color: #fff !important;
  background: var(--accent-color) !important;
  background-image: linear-gradient(
    to bottom left,
    var(--accent-color),
    var(--accent-dark),
    var(--accent-color)
  ) !important;
  border-color: var(--accent-color) !important;
}

/* Info buttons on dashboard range toggles */
.btn-info.btn-simple.active,
.btn-info.btn-simple.active:hover {
  background: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #fff !important;
  background-image: none !important;
}

.btn-info.btn-simple {
  color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}

.btn-info.btn-simple:hover {
  color: var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
}

/* Links & text utilities */
.text-primary,
a.text-primary,
.tim-icons.text-primary {
  color: var(--accent-color) !important;
}

a,
.btn-link {
  color: var(--accent-color);
}

.badge-inward {
  background-color: var(--accent-color) !important;
}

/* ── Footer ─────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--border-color);
  color: var(--text-secondary) !important;
}

/* ── Dropdowns (nav) ──────────────────────────────────── */

.dropdown-menu {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}

.dropdown-item {
  color: var(--text-primary) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--accent-soft) !important;
  color: var(--accent-color) !important;
}

/* ── Modals ─────────────────────────────────────────────── */

.modal-content {
  background: var(--bg-card) !important;
  color: var(--text-primary);
  border-color: var(--border-color) !important;
}

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

/* ── Fixed plugin panel ─────────────────────────────────── */

.fixed-plugin .dropdown-menu.fp-panel {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary);
}

.fixed-plugin .fp-swatch-name {
  color: var(--text-secondary);
}

/* =========================================================
   READABILITY — ensure text always contrasts with background
========================================================= */

/* Table headers stand out from body rows */
.table thead th {
  background-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.08) !important;
  color: var(--text-primary) !important;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 2px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.25) !important;
}

/* Table body cells always readable */
.table tbody td,
.table tbody th {
  color: var(--text-primary) !important;
}

/* Table borders */
.table td,
.table th {
  border-color: var(--border-color) !important;
}

/* Striped rows */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.04) !important;
}

.table-striped tbody tr:nth-of-type(even) {
  background-color: transparent !important;
}

/* Table links */
.table a {
  color: var(--accent-color) !important;
  text-decoration: none;
  font-weight: 500;
}

.table a:hover {
  color: var(--accent-dark) !important;
  text-decoration: underline;
}

/* Card header text */
.card-header h4,
.card-header h5,
.card-header .card-title {
  color: var(--text-primary) !important;
}

/* Badges — always white text, solid fills */
.badge-unused,
.badge-inward,
.badge-outward,
.badge-remove {
  color: #ffffff !important;
}

/* Input labels */
label,
.filter-label {
  color: var(--text-secondary) !important;
}

/* "text-muted" stays readable — not invisible */
.text-muted {
  color: var(--text-secondary) !important;
  opacity: 1 !important;
}

/* Card category (sub-label) */
.card-category,
.card-stats .card-category {
  color: var(--text-secondary) !important;
  opacity: 1 !important;
}

/* Bordered tables in detail views */
.table-bordered {
  border-color: var(--border-color) !important;
}

.table-bordered th {
  background-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.08) !important;
  color: var(--text-primary) !important;
}

/* Notification table rows */
#notification-table td {
  color: var(--text-primary) !important;
  vertical-align: middle;
}