/* Project custom CSS — loaded AFTER css/style.css so overrides win the cascade.
   Ported from the predecessor project's custom.css, updated for CoreUI 5.

   STRUCTURE — rules are grouped by cascade priority; add new rules to the
   matching section, never append at EOF:
     1. THEME VARIABLES  — :root-level var overrides (highest leverage)
     2. GLOBAL ELEMENTS  — body, links, icons, form chrome
     3. COMPONENT VARIANTS — brand-color math for .btn/.callout/.form-*
     4. APP CHROME       — sidebar/header structural scope (most specific)
*/

/* ==========================================================================
   1. THEME VARIABLES — :root-level overrides.
   CoreUI 5 compiles primary literals into component rules, so the primary
   family needs both the vars and the component mirrors in §3. Text color
   is owned by --cui-body-color: the framework re-derives color on body,
   cards, tables, and forms from it — overriding the var paints everything;
   a direct body { color } would only paint the <body> element itself.
   ========================================================================== */

:root,
[data-coreui-theme="light"] {
  --cui-primary: #1769ff;
  --cui-primary-rgb: 23, 105, 255;
  --cui-primary-contrast: #fff;          /* 4.66:1 vs #1769ff — WCAG AA */
  --cui-primary-text-emphasis: #104ab3;  /* shade 30% */
  --cui-primary-bg-subtle: #d1e1ff;      /* tint 80% */
  --cui-primary-border-subtle: #a2c3ff;  /* tint 60% */

  /* Old-project navy body text (CoreUI v2 look). */
  --cui-body-color: #3c4b64;

  /* Header: explicit white (old c-header-light look) instead of the
     transparent header showing the app background through. */
  --cui-header-bg: #fff;
}

/* ==========================================================================
   2. GLOBAL ELEMENTS
   ========================================================================== */

/* Typography — match the old project (CoreUI v2 look): 14px body text. */
body {
  font-size: 0.875rem;   /* 14px — CoreUI v2 default; CoreUI v5 ships 1rem */
  line-height: 1.5;
  /* App background: the signature light blue-gray from the old project. */
  background-color: #edf2f9;
}

/* Links — no underline by default, underline on hover.
   Replicates the old project's CoreUI 3 reboot behavior (CoreUI 5 follows
   the Bootstrap 5.3+ convention of underlined links by default).
   The hover rule is scoped to plain anchors only: component links
   (.dropdown-item, .nav-link, .btn, ...) manage their own decoration and
   must never underline — a:hover alone would out-specify their (0,1,0)
   component rules. */
a {
  text-decoration: none;
}

a:hover:not([class]) {
  text-decoration: underline;
}

/* Icons — CoreUI icon font has only a 400 face (unlike FontAwesome 5's
   weighted .fas-900). Emulate the old project's .fas boldness via text
   stroke. */
[class^="cil-"],
[class*=" cil-"] {
  -webkit-text-stroke: 0.04em currentColor;
}

/* FA6 solid glyphs read thinner than FA5 at equal size; thicken the same
   way as .cil- above. */
.fa-solid {
  -webkit-text-stroke: 0.01em currentColor;
}

/* CoreUI flags set width (1.333em) but no height; empty inline-blocks
   collapse to 0-height, so the flag SVG never paints. Give flag spans the
   matching 1em box. */
[class^="cif-"],
[class*=" cif-"] {
  height: 1em;
}

/* Form chrome — make disabled/readonly inputs visually distinct
   (old project behavior). */
.form-control:disabled,
.form-control[readonly] {
  background-color: #eee !important;
  opacity: 1;
}

/* Form inputs — old-project compact look (CoreUI 3 parity): smaller text,
   #768192 content, #d8dbe0 border. Focus state stays on --cui-primary
   (the old theme's indigo focus ring is deliberately not ported). */
.form-control,
.form-select {
  font-size: 0.875rem;
  color: #768192;
  border-color: #d8dbe0;
  border-radius: 0.25rem;
}

.form-control:focus,
.form-select:focus {
  color: #768192;
}

.form-control::placeholder {
  color: #a5abc5;
}

/* Page fade-in — old project wrapped page content in .fade-in (1s opacity
   animation); modernized to 0.3s. Pages fade on navigation. */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fade-in {
  animation-name: fadeIn;
  animation-duration: 0.9s;
}

/* Lookup search: fixed width — a plain input can't outgrow it, and the
   header keeps a stable shape. */
.lookup-search-wrap {
  width: 22rem;
}

/* Positioning anchor for the autocomplete dropdown (the menu is the
   form's child, outside the .input-group). The form is as tall as the
   search box, so top:100% still lands the menu right under it. */
.lookup-search-form {
  position: relative;
}

/* Autocomplete dropdown for the header search: positioned under the input
   (.lookup-search-wrap is the relative containing block; the menu itself
   lives in the form, outside the .input-group, so group radius rules keep
   applying to the buttons). */
.lookup-search-menu {
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  max-height: 15rem;
  overflow-y: auto;
  /* Match the table/body typography (0.875rem), as in the old project's
     dropdown (CoreUI 3 compile shipped 0.875rem there). */
  --cui-dropdown-font-size: 0.875rem;
}

/* The custom clear button replaces the browser's native search-cancel ×. */
.lookup-search-wrap input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* The header search keeps the plain-input look: no focus ring. */
.lookup-search-wrap .form-control:focus {
  border-color: #d8dbe0;
  box-shadow: none;
}

/* Lookup list loading spinner: floats just left of the search input group
   while the AJAX fragment fetch is in flight (slow connections would
   otherwise show a stale table with no feedback). Anchored to the form
   (.lookup-search-form is position:relative for the autocomplete menu) so
   the input group's markup and chrome are untouched. Absolutely positioned
   = out of the layout flow, so nothing ever shifts. */
.lookup-search-loading {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 0.5rem;
  line-height: 0;
  visibility: hidden;
}

.lookup-search-loading.active {
  visibility: visible;
}

/* ==========================================================================
   3. COMPONENT VARIANTS — brand-color math.
   CoreUI 5 compiles primary literals into .btn-primary, outline/ghost
   variants, border/callout utilities, and form focus rules — overriding
   --cui-primary alone is not enough. This block mirrors the framework's
   own button-variant() shade/tint math for the brand color.
   ========================================================================== */

/* Solid button variant */
.btn-primary {
  --cui-btn-color: #fff;
  --cui-btn-bg: #1769ff;
  --cui-btn-border-color: #1769ff;
  --cui-btn-hover-color: #fff;
  --cui-btn-hover-bg: #155fe6;           /* shade 10% */
  --cui-btn-hover-border-color: #155fe6;
  --cui-btn-focus-shadow-rgb: 23, 105, 255;
  --cui-btn-active-color: #fff;
  --cui-btn-active-bg: #1254cc;          /* shade 20% */
  --cui-btn-active-border-color: #1254cc;
  --cui-btn-disabled-color: #fff;
  --cui-btn-disabled-bg: #1769ff;
  --cui-btn-disabled-border-color: #1769ff;
}

/* Outline button variant */
.btn-outline-primary {
  --cui-btn-color: #1769ff;
  --cui-btn-border-color: #1769ff;
  --cui-btn-hover-color: #fff;
  --cui-btn-hover-bg: #1769ff;
  --cui-btn-hover-border-color: #1769ff;
  --cui-btn-focus-shadow-rgb: 23, 105, 255;
  --cui-btn-active-color: #fff;
  --cui-btn-active-bg: #1769ff;
  --cui-btn-active-border-color: #1769ff;
  --cui-btn-disabled-color: #1769ff;
  --cui-btn-disabled-bg: transparent;
  --cui-btn-disabled-border-color: #1769ff;
}

/* Ghost button variant */
.btn-ghost-primary {
  --cui-btn-color: #1769ff;
  --cui-btn-border-color: transparent;
  --cui-btn-hover-bg: #1769ff;
  --cui-btn-hover-border-color: #1769ff;
  --cui-btn-hover-color: #fff;
  --cui-btn-active-bg: #1769ff;
  --cui-btn-active-border-color: #1769ff;
  --cui-btn-active-color: #fff;
  --cui-btn-disabled-color: #1769ff;
  --cui-btn-disabled-bg: transparent;
  --cui-btn-disabled-border-color: transparent;
}

/* Border utilities — .border-primary itself follows --cui-primary-rgb;
   only the directional variants compile literals. */
.border-top-primary,
.border-end-primary,
.border-bottom-primary,
.border-start-primary {
  --cui-border-color: #1769ff;
  border-color: #1769ff !important;
}

/* Callout */
.callout-primary {
  --cui-callout-border-left-color: #1769ff;
}

/* Alerts — old-project (CoreUI 4) palette, ported for visual parity.
   Success is the CRUD feedback banner (edit/delete/save); danger renders
   on login and form non-field errors. */
.alert-success {
  --cui-alert-color: #18603a;
  --cui-alert-bg: #d5f1de;
  --cui-alert-border-color: #c4ebd1;
}

.alert-danger {
  --cui-alert-color: #772b35;
  --cui-alert-bg: #fadddd;
  --cui-alert-border-color: #f8cfcf;
}

/* "No record selected" guard dialog: original CoreUI modal + a 7px error
   accent. Border color follows the alert type; this dialog is always an
   error, so it resolves to danger. */
.lookup-error-box {
  border-top: 0.4375rem solid var(--cui-danger);
}

.lookup-error-box .cil-warning {
  color: var(--cui-danger); /* icon matches the top border color */
}

/* Success-message toast (MESSAGES_STYLE = "toast"): floats over the app
   header, horizontally centered; CoreUI Toast JS auto-dismisses it. */
.messages-toast-container {
  position: fixed;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
}

/* Sidebar logout is a POST form rendered as a nav-link button: strip the
   browser's button chrome so it is pixel-equal to the anchor nav-links
   (hover/active colors come from CoreUI's class-based .nav-link rules). */
.sidebar-nav button.nav-link {
  width: 100%;
  background: transparent;
  border: 0;
  text-align: start;
}

/* Form focus states (framework compiles literals) */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: #8bb4ff;                 /* tint 50% */
  box-shadow: 0 0 0 0.25rem rgba(23, 105, 255, 0.25);
}

.nav-link:focus-visible,
.form-range:focus::-webkit-slider-thumb,
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 0.25rem rgba(23, 105, 255, 0.25);
}

.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(23, 105, 255, 0.25);
}

/* Table row text color — CoreUI 5's .table>:not(caption)>*>* sets color on
   every cell, so a text-* utility on the <tr> never inherits into cells.
   Route the muted color through the framework's own table color cascade
   (same mechanism as .table-active); specificity (0,3,1) also beats
   .table-hover>tbody>tr:hover (0,2,2), keeping the tint on hover. */
.table > :not(caption) > tr.text-body-secondary > * {
  --cui-table-color-state: var(--cui-secondary-color);
}

/* ==========================================================================
   4. APP CHROME — sidebar/header (color scheme restored from the
   predecessor project, CoreUI 3 light theme: brand-blue sidebar #1769ff,
   light brand strip, white header). The app is light-only; no script sets
   data-coreui-theme, so the framework default (light) always applies.
   ========================================================================== */

/* Sidebar: brand blue (the old project's custom-compiled CoreUI 3 shipped
   .c-sidebar { background: #1769ff }; c-sidebar-dark only supplied the
   light-on-dark text colors). Reaches the sidebar background via
   .sidebar's --cui-sidebar-bg: var(--cui-body-bg) chain. */
.sidebar-dark {
  --cui-body-bg: #1769ff;                        /* sidebar background */
  --cui-tertiary-bg: #3a80ff;                    /* hover/active tint (15% white tint) */
  --cui-secondary-bg: #1254cc;                   /* darker pressed step (20% shade) */
  --cui-border-color: rgba(255, 255, 255, 0.15); /* dividers on blue */
  /* Right edge must match the header's border color (#dbdfe6): the
     .border-end utility resolves var(--cui-border-color) to the scoped
     white-alpha here, which reads as a pale blue line over the blue
     background. !important + base.css's later load order beats the
     utility's !important shorthand. */
  border-inline-end-color: #dbdfe6 !important;
}

/* Minimizer area: transparent on the blue sidebar (old look); the framework
   default is already transparent — pinned explicitly as belt-and-braces. */
.sidebar-footer {
  background: transparent;
}

.sidebar-toggler {
  --cui-sidebar-toggler-bg: transparent;
}

/* Brand strip: light background behind the full-color logo (the logo is
   designed for a light backdrop; ported from the old inline style). */
.sidebar-header {
  background-color: #edf2f9;
  /* Divider must match the header's border (#dbdfe6): the .border-bottom
     utility resolves var(--cui-border-color) to the sidebar-scoped
     white-alpha inside .sidebar-dark — pin the global light-theme value
     here so the strip divider matches --cui-header-border-color's chain. */
  --cui-border-color: #dbdfe6;
}

/* Compact header top bar (framework default: min-height calc(4rem + 1px)).
   The sidebar-header selector is inert here — the brand strip's height is
   driven by the 95px logo, not min-height. */
.header > .container-fluid,
.sidebar-header {
  min-height: calc(3.0rem + 1px);
}

/* Breadcrumb row: compact height, distinct from the 3.5rem top bar.
   Flex centers the breadcrumb vertically inside the 2.5rem strip. */
.app-breadcrumb {
  display: flex;
  align-items: center;
  min-height: 2.5rem !important;
}

/* Sub-item icons slightly smaller than top-level nav icons (1.25rem);
   the group-items alignment rule resolves these vars on the element,
   so label alignment stays consistent. */
.sidebar-nav .nav-group-items .nav-icon {
  --cui-sidebar-nav-link-icon-width: 1rem;
  --cui-sidebar-nav-link-icon-height: 1rem;
}
