/*
 * CLADA theme — the app's accent palette.
 *
 * Loaded from index.html directly after the NiceAdmin template (style.css) and
 * before anything Vite bundles, so it can repaint both the template and
 * Bootstrap without either file being edited: the template stays a drop-in
 * vendor asset, and every accent decision lives here.
 *
 * ── Where the colours come from ──────────────────────────────────────────────
 * The anchor is the CLADA mark itself (assets/img/cladabg.png): #136ab1, with
 * #10436c in its darker strokes. Everything else is tuned to sit in the same
 * register as that blue — mid saturation, lightness around 30–45% — so no
 * accent shouts over the others. The template's own palette (#4154f1 indigo,
 * #2eca6a green, #ff771d orange) and Bootstrap's defaults (#0d6efd, #dc3545)
 * were considerably brighter and are fully replaced below.
 *
 * Every accent below clears 4.5:1 against white, so white-on-accent buttons and
 * accent-on-white text are both AA at normal size.
 *
 * The Mantine side of the palette lives in src/theme.ts and is generated from
 * the same bases — keep the two in sync.
 */

:root {
  /* ---------------------------------------------------------------- brand -- */
  --clada-primary: #136ab1;
  --clada-primary-hover: #105995;
  --clada-primary-active: #0d497a;
  /* Backgrounds for selected/hover rows and soft fills. */
  --clada-primary-wash: #eaf3fa;
  --clada-primary-wash-strong: #dce9f4;
  --clada-primary-rgb: 19, 106, 177;

  /* Headings and body-dark text. The template's #012970 leaned violet; this is
     the mark's own dark blue, so headings and the logo share a hue. */
  --clada-navy: #103f66;

  /* ------------------------------------------------------------- accents -- */
  --clada-green: #1f7a55;
  --clada-orange: #a75f26;
  --clada-yellow: #8f6a15;
  --clada-red: #b04238;
  --clada-grape: #71559b;
  --clada-teal: #256f7e;

  /* Tinted surfaces + their edges, used by the dashboard bands and by any card
     that carries an accent. Edges are deliberately a full step darker than the
     fill so a band still has a visible boundary on a bright screen. */
  --clada-primary-tint: #eef4f9;
  --clada-primary-tint-border: #b2cce1;
  --clada-green-tint: #eff8f4;
  --clada-green-tint-border: #b8dbcd;
  --clada-orange-tint: #f8f3ef;
  --clada-orange-tint-border: #dcc7b7;
  --clada-yellow-tint: #f9f6ee;
  --clada-yellow-tint-border: #dfd2b4;
  --clada-red-tint: #f7f0f0;
  --clada-red-tint-border: #d9bdba;
  --clada-grape-tint: #f3f1f6;
  --clada-grape-tint-border: #c8c1d2;
  --clada-teal-tint: #f0f6f7;
  --clada-teal-tint-border: #b9d4da;
  --clada-navy-tint: #eef4f9;
  --clada-navy-tint-border: #b4cbdf;

  /* ------------------------------------------------------------ neutrals -- */
  /*
   * The three depths every page is built from, named so the dark palette in
   * clada-dark.css can swap them wholesale. In light they restate what the
   * template already hardcodes, so nothing here changes the current look:
   * `bg` is the page, `panel` the header/sidebar/card surfaces that sit on it,
   * and `panel-raised` what floats above those — dropdowns, popovers, modals.
   */
  --clada-bg: #f6f9ff;
  --clada-panel: #ffffff;
  --clada-panel-raised: #ffffff;
  /* The travelling highlight in a loading skeleton: a step *away* from
     `--clada-surface`, whichever direction that is in the palette in force. */
  --clada-shimmer: #f8fafc;
  /* Body copy. The template's own #444444. */
  --clada-ink: #444444;

  /* Secondary text. The template's #899bbd is 2.8:1 on white — under AA for
     body copy, and these are labels people actually read. */
  --clada-muted: #607492;
  --clada-surface: #eef1f5;
  /* Dividers and card edges: 1.5:1 on white, where the template's #dee2e6 and
     #eef0f5 sat at 1.1–1.3 and disappeared on brighter monitors. */
  --clada-border: #c8d2e0;
  /* Anything that bounds an interactive control (inputs, selects, table cells)
     — needs to hold its own, so a step darker again. */
  --clada-border-strong: #8d9db8;
}

/*--------------------------------------------------------------
# Bootstrap
# 5.3 drives every component off per-class custom properties, so
# remapping those covers buttons, links, forms and badges without
# touching the vendor file.
--------------------------------------------------------------*/

:root {
  --bs-primary: var(--clada-primary);
  --bs-primary-rgb: var(--clada-primary-rgb);
  --bs-link-color: var(--clada-primary);
  --bs-link-color-rgb: var(--clada-primary-rgb);
  --bs-link-hover-color: var(--clada-primary-hover);
  --bs-link-hover-color-rgb: 16, 89, 149;
  --bs-border-color: var(--clada-border);
  --bs-border-color-translucent: var(--clada-border);
}

.btn-primary {
  --bs-btn-bg: var(--clada-primary);
  --bs-btn-border-color: var(--clada-primary);
  --bs-btn-hover-bg: var(--clada-primary-hover);
  --bs-btn-hover-border-color: var(--clada-primary-hover);
  --bs-btn-active-bg: var(--clada-primary-active);
  --bs-btn-active-border-color: var(--clada-primary-active);
  --bs-btn-disabled-bg: var(--clada-primary);
  --bs-btn-disabled-border-color: var(--clada-primary);
  --bs-btn-focus-shadow-rgb: var(--clada-primary-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--clada-primary);
  --bs-btn-border-color: var(--clada-primary);
  --bs-btn-hover-bg: var(--clada-primary);
  --bs-btn-hover-border-color: var(--clada-primary);
  --bs-btn-active-bg: var(--clada-primary-active);
  --bs-btn-active-border-color: var(--clada-primary-active);
  --bs-btn-disabled-color: var(--clada-primary);
  --bs-btn-disabled-border-color: var(--clada-primary);
  --bs-btn-focus-shadow-rgb: var(--clada-primary-rgb);
}

.btn-danger {
  --bs-btn-bg: var(--clada-red);
  --bs-btn-border-color: var(--clada-red);
  --bs-btn-hover-bg: #993931;
  --bs-btn-hover-border-color: #993931;
  --bs-btn-active-bg: #823129;
  --bs-btn-active-border-color: #823129;
  --bs-btn-disabled-bg: var(--clada-red);
  --bs-btn-disabled-border-color: var(--clada-red);
  --bs-btn-focus-shadow-rgb: 176, 66, 56;
}

.btn-success {
  --bs-btn-bg: var(--clada-green);
  --bs-btn-border-color: var(--clada-green);
  --bs-btn-hover-bg: #196244;
  --bs-btn-hover-border-color: #196244;
  --bs-btn-active-bg: #134933;
  --bs-btn-active-border-color: #134933;
  --bs-btn-disabled-bg: var(--clada-green);
  --bs-btn-disabled-border-color: var(--clada-green);
  --bs-btn-focus-shadow-rgb: 31, 122, 85;
}

.btn-link {
  --bs-btn-color: var(--clada-primary);
  --bs-btn-hover-color: var(--clada-primary-hover);
  --bs-btn-active-color: var(--clada-primary-active);
}

/* Form controls: a visible resting edge, and a focus ring in the brand blue
   rather than Bootstrap's #86b7fe. */
.form-control,
.form-select {
  border-color: var(--clada-border-strong);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--clada-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--clada-primary-rgb), 0.2);
}

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

/* The template leaves placeholders at Bootstrap's default, which is the same
   grey as disabled text; this keeps them legible but clearly secondary. */
.form-control::placeholder,
.form-select::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--clada-muted);
  opacity: 0.75;
}

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

.bg-primary {
  background-color: var(--clada-primary) !important;
}

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

.table {
  --bs-table-border-color: var(--clada-border);
}

/*--------------------------------------------------------------
# NiceAdmin template
--------------------------------------------------------------*/

a {
  color: var(--clada-primary);
}

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

.pagetitle h1,
.card-title,
.logo span,
.header .toggle-sidebar-btn,
.header .search-form input,
.header .search-form button i,
.header-nav .nav-icon,
.header-nav .nav-profile,
.dashboard .info-card h6,
.iconslist .icon,
.profile .profile-overview .card-title,
.error-404 h2,
.footer .copyright,
.footer .credits {
  color: var(--clada-navy);
}

.card-title span,
.sidebar-nav .nav-heading,
.breadcrumb,
.breadcrumb a,
.breadcrumb .breadcrumb-item::before,
.dashboard .filter .icon,
.dashboard .filter .dropdown-header h6 {
  color: var(--clada-muted);
}

.breadcrumb a:hover,
.breadcrumb .active {
  color: var(--clada-navy);
}

.back-to-top,
.contact .php-email-form button[type="submit"] {
  background: var(--clada-primary);
}

.accordion-flush .accordion-button:not(.collapsed),
.nav-tabs-bordered .nav-link:hover,
.nav-tabs-bordered .nav-link:focus,
.nav-tabs-bordered .nav-link.active,
.dashboard .news h4 a:hover,
.dashboard .filter .icon:hover,
.dashboard .filter .icon:focus,
.faq .basic h6,
.contact .info-box i,
.error-404 h1 {
  color: var(--clada-primary);
}

.nav-tabs-bordered .nav-link.active {
  border-bottom-color: var(--clada-primary);
}

.accordion-button:not(.collapsed) {
  color: var(--clada-navy);
  background-color: var(--clada-primary-wash);
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--clada-primary);
}

.error-404 .btn {
  background: var(--clada-navy);
}

/* The template's own stat cards, kept in the family. */
.dashboard .sales-card .card-icon {
  color: var(--clada-primary);
  background: var(--clada-primary-tint);
}

.dashboard .revenue-card .card-icon {
  color: var(--clada-green);
  background: var(--clada-green-tint);
}

.dashboard .customers-card .card-icon {
  color: var(--clada-orange);
  background: var(--clada-orange-tint);
}

/* Sidebar. The structural rules (the expanded Databases block) stay in
   src/components/Sidebar.css; only the colours belong here. */
.sidebar {
  scrollbar-color: var(--clada-border-strong) transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: var(--clada-border-strong);
}

.sidebar-nav .nav-link,
.sidebar-nav .nav-link i,
.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link:hover i,
.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active {
  color: var(--clada-primary);
}

.sidebar-nav .nav-link,
.sidebar-nav .nav-link:hover {
  background: var(--clada-primary-wash);
}

.sidebar-nav .nav-link.collapsed {
  color: var(--clada-navy);
}

.sidebar-nav .nav-link.collapsed i,
.sidebar-nav .nav-content a i {
  color: var(--clada-muted);
}

.sidebar-nav .nav-content a {
  color: var(--clada-navy);
}

.sidebar-nav .nav-content a.active i {
  background-color: var(--clada-primary);
}

/*--------------------------------------------------------------
# Contrast pass
# The template draws every rule and edge in #ebeef4 / #eaedf1 /
# #dee2e6 — all around 1.1–1.3:1 against white, which survives a
# dim laptop panel and disappears on a bright one. Everything
# below is the same edge at ~1.5:1, and the controls at ~2.8:1.
--------------------------------------------------------------*/

/* Cards sit on a near-white page; without a real edge they float. */
.card {
  border: 1px solid var(--clada-border);
  box-shadow: 0 0 12px rgba(16, 63, 102, 0.08);
}

.card-header,
.card-footer {
  border-color: var(--clada-border);
  /* was #798eb3 — a label, so it gets the same treatment as .text-muted */
  color: var(--clada-muted);
}

.accordion-item,
.list-group-item,
.dropdown-divider {
  border-color: var(--clada-border);
}

.nav-tabs-bordered {
  border-bottom-color: var(--clada-border);
}

.footer {
  border-top-color: var(--clada-border);
}

/* The dropdown floats over content and had no edge at all, only a shadow. */
.dropdown-menu {
  border: 1px solid var(--clada-border);
}

/* Header and sidebar are the two panels that frame every page; a shadow alone
   left them bleeding into the content on a bright screen. */
.header {
  border-bottom: 1px solid var(--clada-border);
}

.sidebar {
  border-right: 1px solid var(--clada-border);
}

.header .search-form input {
  border-color: var(--clada-border-strong);
}

/* Table rules read as structure, not decoration — the header rule especially. */
.table > :not(caption) > * > * {
  border-bottom-color: var(--clada-border);
}

.table > thead {
  border-bottom: 2px solid var(--clada-border-strong);
}

.dashboard .recent-sales .table thead,
.dashboard .top-selling .table thead {
  background: var(--clada-surface);
}

/*--------------------------------------------------------------
# Mantine
# The ramps come from src/theme.ts; these are the few surfaces
# Mantine paints from its own neutral scale rather than from the
# theme's colours.
--------------------------------------------------------------*/

:root {
  --mantine-color-anchor: var(--clada-primary);
  --mantine-color-default-border: var(--clada-border-strong);
  --mantine-color-gray-3: var(--clada-border);
  --mantine-color-gray-4: var(--clada-border-strong);
  --mantine-color-placeholder: var(--clada-muted);
}