/**
 * palette.css — Central Colour Harmonisation Stylesheet (Step S4.5 & S4.6)
 *
 * Single source of truth for app-wide colours, backgrounds, borders, and custom properties.
 * Pure colour/background/border/shadow properties only — zero layout or geometry alterations.
 * All colour values defined strictly as tokens in :root; zero colour literals outside :root.
 */

:root {
  /* Neutral & Base Tokens */
  --brand-white: #FFFFFF;
  --brand-text: #1B2140;
  --brand-text-muted: #5F6785;
  --brand-border: #E3E6EE;
  --brand-surface: #FFFFFF;
  --brand-surface-subtle: #F8FAFC;
  --brand-page-bg: #FFFFFF;
  --brand-card-ring: #E5E7EB;

  /* Primary Tokens */
  --brand-primary: #3B4BC8;
  --brand-primary-rgb: 59, 75, 200;
  --brand-primary-hover: #3240AE;
  --brand-primary-soft: #E9ECFC;
  --brand-primary-text-soft: #2A369B;

  /* Secondary Tokens */
  --brand-secondary: #64748B;
  --brand-secondary-rgb: 100, 116, 139;
  --brand-secondary-hover: #475569;
  --brand-secondary-soft: #F1F5F9;

  /* Success Tokens */
  --brand-success: #15803D;
  --brand-success-rgb: 21, 128, 61;
  --brand-success-hover: #166534;
  --brand-success-soft: #DCFCE7;
  --brand-success-text-soft: #166534;

  /* Danger Tokens */
  --brand-danger: #C62828;
  --brand-danger-rgb: 198, 40, 40;
  --brand-danger-hover: #B71C1C;
  --brand-danger-soft: #FEE2E2;
  --brand-danger-text-soft: #991B1B;

  /* Warning Tokens (Amber solid for visibility, Brown on soft/text for contrast) */
  --brand-warning: #B45309;
  --brand-warning-rgb: 180, 83, 9;
  --brand-warning-solid: #F59E0B;
  --brand-warning-hover: #D97706;
  --brand-warning-text: #1F2937;
  --brand-warning-soft: #FDF0DC;

  /* Info Tokens */
  --brand-info: #0369A1;
  --brand-info-rgb: 3, 105, 161;
  --brand-info-hover: #0284C7;
  --brand-info-soft: #E0F2FE;
  --brand-info-text-soft: #075985;

  /* Navy Sidebar Tokens */
  --brand-sidebar-navy: #1E285A;
  --brand-sidebar-active: #2B3775;
  --brand-sidebar-bar: #8FA2FF;
  --brand-sidebar-text: #DCE1F5;
  --brand-sidebar-muted: #9AA4D4;
  --brand-sidebar-hover: rgba(255, 255, 255, 0.07);
  --brand-page-muted: #F8FAFC;

  /* Categorical Charts Palette */
  --brand-chart-1: #3B4BC8;
  --brand-chart-2: #15803D;
  --brand-chart-3: #B45309;
  --brand-chart-4: #C62828;
  --brand-chart-5: #0369A1;
  --brand-chart-6: #64748B;

  /* Template Custom Property Overrides (:root) */
  --primary-rgb: var(--brand-primary-rgb);
  --primary-color: var(--brand-primary);
  --primary-border: var(--brand-primary);
  --primary005: rgba(var(--brand-primary-rgb), 0.05);
  --primary01: rgba(var(--brand-primary-rgb), 0.1);
  --primary02: rgba(var(--brand-primary-rgb), 0.2);
  --primary03: rgba(var(--brand-primary-rgb), 0.3);
  --primary04: rgba(var(--brand-primary-rgb), 0.4);
  --primary05: rgba(var(--brand-primary-rgb), 0.5);
  --primary06: rgba(var(--brand-primary-rgb), 0.6);
  --primary07: rgba(var(--brand-primary-rgb), 0.7);
  --primary08: rgba(var(--brand-primary-rgb), 0.8);
  --primary09: rgba(var(--brand-primary-rgb), 0.9);

  --secondary-rgb: var(--brand-secondary-rgb);
  --success-rgb: var(--brand-success-rgb);
  --danger-rgb: var(--brand-danger-rgb);
  --warning-rgb: var(--brand-warning-rgb);
  --info-rgb: var(--brand-info-rgb);

  --default-text-color: var(--brand-text);
  --text-muted: var(--brand-text-muted);
  --default-border: var(--brand-border);
  --input-border: var(--brand-border);
  --default-background: var(--brand-surface);
  --custom-white: var(--brand-surface);

  /* Bootstrap Custom Properties Overrides */
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: var(--brand-primary-rgb);
  --bs-secondary: var(--brand-secondary);
  --bs-secondary-rgb: var(--brand-secondary-rgb);
  --bs-success: var(--brand-success);
  --bs-success-rgb: var(--brand-success-rgb);
  --bs-danger: var(--brand-danger);
  --bs-danger-rgb: var(--brand-danger-rgb);
  --bs-warning: var(--brand-warning-solid);
  --bs-warning-rgb: var(--brand-warning-rgb);
  --bs-info: var(--brand-info);
  --bs-info-rgb: var(--brand-info-rgb);
  --bs-link-color: var(--brand-primary);
  --bs-link-hover-color: var(--brand-primary-hover);
  --bs-body-color: var(--brand-text);
  --bs-border-color: var(--brand-border);
  --default-font-family: var(--brand-font);
  --bs-font-sans-serif: var(--brand-font);
  --bs-body-font-family: var(--brand-font);
  --bs-font-monospace: var(--brand-font-mono);
}

/* Page & Surface Backgrounds */
html,
body,
.page,
.main-content,
.app-content {
  background-color: var(--brand-page-bg) !important;
  color: var(--brand-text);
}

/* Card 1px Ring (Moved from auth.blade.php inline style to central stylesheet) */
.card {
  box-shadow: 0 0 0 1px var(--brand-card-ring) !important;
}

/* Button Colour Overrides */
.btn-primary,
.btn-primary:focus,
.btn-check:focus + .btn-primary,
.btn-check:checked + .btn-primary {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-white) !important;
}

.btn-primary:hover,
.btn-primary:active,
.btn-check:active + .btn-primary {
  background-color: var(--brand-primary-hover) !important;
  border-color: var(--brand-primary-hover) !important;
  color: var(--brand-white) !important;
}

.btn-secondary,
.btn-secondary:focus {
  background-color: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
  color: var(--brand-white) !important;
}

.btn-secondary:hover,
.btn-secondary:active {
  background-color: var(--brand-secondary-hover) !important;
  border-color: var(--brand-secondary-hover) !important;
  color: var(--brand-white) !important;
}

.btn-success,
.btn-success:focus {
  background-color: var(--brand-success) !important;
  border-color: var(--brand-success) !important;
  color: var(--brand-white) !important;
}

.btn-success:hover,
.btn-success:active {
  background-color: var(--brand-success-hover) !important;
  border-color: var(--brand-success-hover) !important;
  color: var(--brand-white) !important;
}

.btn-danger,
.btn-danger:focus {
  background-color: var(--brand-danger) !important;
  border-color: var(--brand-danger) !important;
  color: var(--brand-white) !important;
}

.btn-danger:hover,
.btn-danger:active {
  background-color: var(--brand-danger-hover) !important;
  border-color: var(--brand-danger-hover) !important;
  color: var(--brand-white) !important;
}

.btn-warning,
.btn-warning:focus {
  background-color: var(--brand-warning-solid) !important;
  border-color: var(--brand-warning-solid) !important;
  color: var(--brand-warning-text) !important;
}

.btn-warning:hover,
.btn-warning:active {
  background-color: var(--brand-warning-hover) !important;
  border-color: var(--brand-warning-hover) !important;
  color: var(--brand-warning-text) !important;
}

.btn-info,
.btn-info:focus {
  background-color: var(--brand-info) !important;
  border-color: var(--brand-info) !important;
  color: var(--brand-white) !important;
}

.btn-info:hover,
.btn-info:active {
  background-color: var(--brand-info-hover) !important;
  border-color: var(--brand-info-hover) !important;
  color: var(--brand-white) !important;
}

/* Light / Soft Buttons and Transparent Badges */
.btn.btn-primary-light,
.bg-primary-transparent,
.badge.bg-primary-transparent {
  background-color: var(--brand-primary-soft) !important;
  color: var(--brand-primary-text-soft) !important;
  border-color: transparent !important;
}

.btn.btn-secondary-light,
.bg-secondary-transparent,
.badge.bg-secondary-transparent {
  background-color: var(--brand-secondary-soft) !important;
  color: var(--brand-secondary) !important;
  border-color: transparent !important;
}

.btn.btn-success-light,
.bg-success-transparent,
.badge.bg-success-transparent {
  background-color: var(--brand-success-soft) !important;
  color: var(--brand-success-text-soft) !important;
  border-color: transparent !important;
}

.btn.btn-danger-light,
.bg-danger-transparent,
.badge.bg-danger-transparent {
  background-color: var(--brand-danger-soft) !important;
  color: var(--brand-danger-text-soft) !important;
  border-color: transparent !important;
}

.btn.btn-warning-light,
.bg-warning-transparent,
.badge.bg-warning-transparent,
.bg-warning-subtle {
  background-color: var(--brand-warning-soft) !important;
  color: var(--brand-warning) !important;
  border-color: transparent !important;
}

.btn.btn-info-light,
.bg-info-transparent,
.badge.bg-info-transparent {
  background-color: var(--brand-info-soft) !important;
  color: var(--brand-info-text-soft) !important;
  border-color: transparent !important;
}

/* Warning Utility Classes (Follow-up 3: Amber for solid bg, Brown for text/border) */
.bg-warning {
  background-color: var(--brand-warning-solid) !important;
  color: var(--brand-warning-text) !important;
}

.badge.bg-warning {
  background-color: var(--brand-warning-solid) !important;
  color: var(--brand-warning-text) !important;
}

.text-warning {
  color: var(--brand-warning) !important;
}

.border-warning {
  border-color: var(--brand-warning-solid) !important;
}

/* Outline Buttons */
.btn-outline-primary {
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-white) !important;
}

.btn-outline-secondary {
  color: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
  background-color: transparent !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:active {
  background-color: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
  color: var(--brand-white) !important;
}

/* Links & Interactive Elements */
a {
  color: var(--brand-primary);
}

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

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-rgb), 0.25) !important;
}

.page-item.active .page-link {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-white) !important;
}

/* Table Hover Background */
.table-hover > tbody > tr:hover > * {
  background-color: var(--brand-surface-subtle) !important;
}

/* One font for all UI text. Icon fonts (.fe, .bi, .ti, .fa*) are not listed, so they keep their own family. */
body,
button,
input,
select,
textarea,
h1, h2, h3, h4, h5, h6,
.btn,
.form-control,
.form-select,
.dropdown-menu,
.modal-content,
.toast,
.swal2-popup,
.side-menu__item,
.card-title,
.page-title,
.table,
.dataTables_wrapper,
.tom-select,
.flatpickr-calendar {
  font-family: var(--brand-font);
}

/* Identifiers and codes: item numbers, IMEI, invoice and voucher numbers. */
.ui-code,
code,
kbd {
  font-family: var(--brand-font-mono);
  font-variant-numeric: tabular-nums;
}

/* Numbers line up in every table cell that is meant to be a figure. */
.table td.text-end,
.table th.text-end,
.num {
  font-variant-numeric: tabular-nums;
}

/* Product mark and name (components/brand-logo.blade.php) */
.brand-logo { display: inline-flex; align-items: center; gap: 0.65rem; min-width: 0; }
.brand-logo__mark { flex: 0 0 auto; width: 2rem; height: 2rem; }
.brand-logo__name { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-logo--dark .brand-logo__bg { fill: #FFFFFF; }
.brand-logo--dark .brand-logo__bar { fill: var(--brand-primary); }
.brand-logo--dark .brand-logo__name { color: #FFFFFF; }
.brand-logo--light .brand-logo__bg { fill: var(--brand-primary); }
.brand-logo--light .brand-logo__bar { fill: #FFFFFF; }
.brand-logo--light .brand-logo__name { color: var(--brand-text); }