/*
 * MWKConnect colour system: the only place colours are defined (light + dark).
 * Overrides Bootstrap 5.3 / AdminLTE 4 variables, so components, utilities
 * (bg-*-subtle, text-danger, btn-primary...) and popups all follow these tokens.
 * Loaded after adminlte.min.css, before mwk-v4.css. To change a colour, change it here.
 *
 * Roles:  action (blue)  = buttons, links, focus, selected rows
 *         brand (vivid red) = school identity only: hero, logo (the sidebar keeps its original colours). Never on buttons, badges or text.
 *         danger (red)   = irreversible work and errors only
 *         success / warning / info = status.
 * Surfaces: page (tertiary) < card/popup (body) < table head/field (secondary).
 */

/* Light */
:root,
[data-bs-theme="light"] {
  --bs-primary: #2f6fed;       --bs-primary-rgb: 47, 111, 237;
  --bs-success: #198754;       --bs-success-rgb: 25, 135, 84;
  --bs-info: #0b7c95;          --bs-info-rgb: 11, 124, 149;
  --bs-warning: #f0a30a;       --bs-warning-rgb: 240, 163, 10;
  --bs-danger: #dc3545;        --bs-danger-rgb: 220, 53, 69;

  --bs-primary-bg-subtle: #e7effd;   --bs-primary-border-subtle: #bfd3fa;   --bs-primary-text-emphasis: #1b4bb0;
  --bs-success-bg-subtle: #dff3e8;   --bs-success-border-subtle: #b5e0c8;   --bs-success-text-emphasis: #0f5a3a;
  --bs-info-bg-subtle: #dcf3f8;      --bs-info-border-subtle: #a8dbe7;      --bs-info-text-emphasis: #0a5366;
  --bs-warning-bg-subtle: #fff4d6;   --bs-warning-border-subtle: #f6dc95;   --bs-warning-text-emphasis: #7a4f01;
  --bs-danger-bg-subtle: #fdecee;    --bs-danger-border-subtle: #f5c2c7;    --bs-danger-text-emphasis: #8a1c27;

  --bs-body-bg: #ffffff;             --bs-body-bg-rgb: 255, 255, 255;
  --bs-secondary-bg: #f0f3f7;        --bs-secondary-bg-rgb: 240, 243, 247;
  --bs-tertiary-bg: #f5f7fa;         --bs-tertiary-bg-rgb: 245, 247, 250;
  --bs-body-color: #1d2433;          --bs-body-color-rgb: 29, 36, 51;
  --bs-secondary-color: #5f6b7d;
  --bs-tertiary-color: #8792a3;
  --bs-border-color: #e1e6ed;
  --bs-border-color-translucent: rgba(29, 36, 51, .1);
  --bs-link-color: #2f6fed;          --bs-link-color-rgb: 47, 111, 237;
  --bs-link-hover-color: #1b4bb0;    --bs-link-hover-color-rgb: 27, 75, 176;
}

/* Dark: tinted blue-grey, never pure black; solid colours lighten to stay readable */
[data-bs-theme="dark"] {
  --bs-primary: #6ea2ff;       --bs-primary-rgb: 110, 162, 255;
  --bs-success: #4cc38a;       --bs-success-rgb: 76, 195, 138;
  --bs-info: #4cc3dd;          --bs-info-rgb: 76, 195, 221;
  --bs-warning: #ffc24d;       --bs-warning-rgb: 255, 194, 77;
  --bs-danger: #f0707c;        --bs-danger-rgb: 240, 112, 124;

  --bs-primary-bg-subtle: #172544;   --bs-primary-border-subtle: #2b4a86;   --bs-primary-text-emphasis: #a9c6ff;
  --bs-success-bg-subtle: #12301f;   --bs-success-border-subtle: #1f5b40;   --bs-success-text-emphasis: #8fe0b5;
  --bs-info-bg-subtle: #0f2f3a;      --bs-info-border-subtle: #1d5666;      --bs-info-text-emphasis: #92dded;
  --bs-warning-bg-subtle: #3a2d0c;   --bs-warning-border-subtle: #6b5116;   --bs-warning-text-emphasis: #ffd98a;
  --bs-danger-bg-subtle: #3b1b20;    --bs-danger-border-subtle: #6a2c35;    --bs-danger-text-emphasis: #f6a6ae;

  --bs-body-bg: #171c26;             --bs-body-bg-rgb: 23, 28, 38;
  --bs-secondary-bg: #1e2431;        --bs-secondary-bg-rgb: 30, 36, 49;
  --bs-tertiary-bg: #0f131a;         --bs-tertiary-bg-rgb: 15, 19, 26;
  --bs-body-color: #e8ecf3;          --bs-body-color-rgb: 232, 236, 243;
  --bs-secondary-color: #98a3b5;
  --bs-tertiary-color: #6d788a;
  --bs-border-color: #2a3242;
  --bs-border-color-translucent: rgba(232, 236, 243, .12);
  --bs-link-color: #6ea2ff;          --bs-link-color-rgb: 110, 162, 255;
  --bs-link-hover-color: #a9c6ff;    --bs-link-hover-color-rgb: 169, 198, 255;
}

/* Shell and row-state colours. `html` selector: the sidebar is an always-dark scope and must not redefine these. */
html,
html[data-bs-theme="light"] {
  --mwk-brand: #dc2626;
  --mwk-brand-gradient: radial-gradient(circle at 18% 0%, rgba(254, 202, 202, .55), transparent 34%), linear-gradient(135deg, #dc2626 0%, #dc2626 50%, #ef4444 100%);
  --mwk-on-brand: #ffffff;
  --mwk-on-action: #ffffff;
  --mwk-nav-active-bg: #dc3545;   /* sidebar active item keeps the original red (user, 2026-10-21) */
  --mwk-nav-badge-bg: rgba(255, 255, 255, .12);   /* sidebar "ใหม่" chip: a soft lift of the dark sidebar, light text, so it blends with the background (user, 2026-10-23) */
  --mwk-nav-badge-fg: #e9ecef;
  --mwk-nav-badge-border: rgba(255, 255, 255, .2);
  --mwk-row-highlight: #fff6d0;   /* row just saved */
  --mwk-row-selected: #e7effd;
  --mwk-grid-line: rgba(29, 36, 51, .03);   /* faint graph-paper lines on the white page */
  --mwk-card-shadow: 0 1px 2px rgba(29, 36, 51, .05), 0 8px 20px -8px rgba(29, 36, 51, .16);
  --mwk-skel: rgba(29, 36, 51, .07);   /* loading skeleton block and its moving highlight */
  --mwk-skel-shine: rgba(255, 255, 255, .7);
}
html[data-bs-theme="dark"] {
  --mwk-brand: #dc2626;
  --mwk-brand-gradient: radial-gradient(circle at 18% 0%, rgba(254, 202, 202, .4), transparent 34%), linear-gradient(135deg, #cf2323 0%, #d62626 50%, #e5484d 100%);
  --mwk-on-brand: #ffffff;
  --mwk-on-action: #0a1530;
  --mwk-nav-active-bg: #dc3545;
  --mwk-nav-badge-bg: rgba(255, 255, 255, .12);
  --mwk-nav-badge-fg: #e9ecef;
  --mwk-nav-badge-border: rgba(255, 255, 255, .2);
  --mwk-row-highlight: #3a3210;
  --mwk-row-selected: #172544;
  --mwk-grid-line: rgba(232, 236, 243, .045);
  --mwk-card-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 22px -8px rgba(0, 0, 0, .6);
  --mwk-skel: rgba(232, 236, 243, .08);
  --mwk-skel-shine: rgba(255, 255, 255, .06);
}

/* Sidebar keeps its original Bootstrap dark colours in both modes (user, 2026-10-21) */
.mwk-v4-sidebar {
  --bs-body-bg: #212529;      --bs-body-bg-rgb: 33, 37, 41;
  --bs-secondary-bg: #343a40; --bs-secondary-bg-rgb: 52, 58, 64;
  --bs-tertiary-bg: #2b3035;  --bs-tertiary-bg-rgb: 43, 48, 53;
  --bs-body-color: #dee2e6;   --bs-body-color-rgb: 222, 226, 230;
  --bs-secondary-color: rgba(222, 226, 230, .75);
  --bs-border-color: #495057;
}

/* Bootstrap buttons hard-code their colours; map them to the tokens above */
.btn-primary {
  --bs-btn-color: var(--mwk-on-action); --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--mwk-on-action); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 88%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 88%, #000);
  --bs-btn-active-color: var(--mwk-on-action); --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 80%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 80%, #000);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-disabled-color: var(--mwk-on-action); --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--mwk-on-action); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color: var(--mwk-on-action); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-disabled-color: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary);
}
.btn-danger {
  --bs-btn-color: #fff; --bs-btn-bg: var(--bs-danger); --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--bs-danger) 88%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-danger) 88%, #000);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: color-mix(in srgb, var(--bs-danger) 80%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-danger) 80%, #000);
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--bs-danger); --bs-btn-disabled-border-color: var(--bs-danger);
}
.btn-outline-danger {
  --bs-btn-color: var(--bs-danger); --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bs-danger); --bs-btn-hover-border-color: var(--bs-danger);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--bs-danger); --bs-btn-active-border-color: var(--bs-danger);
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
  --bs-btn-disabled-color: var(--bs-danger); --bs-btn-disabled-border-color: var(--bs-danger);
}
.btn-success {
  --bs-btn-color: #fff; --bs-btn-bg: var(--bs-success); --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--bs-success) 88%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-success) 88%, #000);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: color-mix(in srgb, var(--bs-success) 80%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-success) 80%, #000);
  --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--bs-success); --bs-btn-disabled-border-color: var(--bs-success);
}
.btn-outline-success {
  --bs-btn-color: var(--bs-success); --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bs-success); --bs-btn-hover-border-color: var(--bs-success);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--bs-success); --bs-btn-active-border-color: var(--bs-success);
  --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
}
.btn-warning {
  --bs-btn-color: #2a1c03; --bs-btn-bg: var(--bs-warning); --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-color: #2a1c03; --bs-btn-hover-bg: color-mix(in srgb, var(--bs-warning) 88%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-warning) 88%, #000);
  --bs-btn-active-color: #2a1c03; --bs-btn-active-bg: color-mix(in srgb, var(--bs-warning) 80%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-warning) 80%, #000);
  --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
}
.btn-info {
  --bs-btn-color: #fff; --bs-btn-bg: var(--bs-info); --bs-btn-border-color: var(--bs-info);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--bs-info) 88%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-info) 88%, #000);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: color-mix(in srgb, var(--bs-info) 80%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-info) 80%, #000);
  --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
}
[data-bs-theme="dark"] .btn-info { --bs-btn-color: #04222b; --bs-btn-hover-color: #04222b; --bs-btn-active-color: #04222b; }
[data-bs-theme="dark"] .btn-success { --bs-btn-color: #04200f; --bs-btn-hover-color: #04200f; --bs-btn-active-color: #04200f; }
[data-bs-theme="dark"] .btn-danger { --bs-btn-color: #2b0a0e; --bs-btn-hover-color: #2b0a0e; --bs-btn-active-color: #2b0a0e; --bs-btn-disabled-color: #2b0a0e; }

/* Form focus ring, checked controls, selected states, tables */
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: color-mix(in srgb, var(--bs-primary) 60%, var(--bs-border-color));
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .2);
}
.form-check-input:checked, .form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--bs-primary); border-color: var(--bs-primary);
}
.page-item.active .page-link, .nav-pills .nav-link.active, .list-group-item.active, .dropdown-item.active {
  background-color: var(--bs-primary); border-color: var(--bs-primary); color: var(--mwk-on-action);
}
.table {
  --bs-table-striped-bg: var(--bs-tertiary-bg);
  --bs-table-hover-bg: color-mix(in srgb, var(--bs-primary) 6%, var(--bs-body-bg));
  --bs-table-active-bg: var(--mwk-row-selected);
}
.table > thead > tr > th { background-color: var(--bs-secondary-bg); }