@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Judson&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Krub&display=swap');

/* ════════════════════════════════════════════
   COLOR TOKENS — OKLCH semantic palette
   Hue anchors: 68 (warm amber) / 76 (sand)
   Chroma kept ≤ 0.14 to prevent eye fatigue.
   Tinted shadows match background hue.
   ════════════════════════════════════════════ */

:root {
  --base-clr0: 68; --base-clr1: 76;
  --base-primary: 303; --base-secondary: 270;
  --base-info: 220; --base-success: 150;
  --base-warning: 68; --base-danger: 22;
}

@supports (color: oklch(50% 0.15 68)) {

  html[data-theme='light'] {
    /* Surfaces */
    --cbg0:  oklch(94% 0.018 68);
    --cbg1:  oklch(90% 0.022 76);
    --cfg0:  oklch(26% 0.052 68);
    --cfg1:  oklch(30% 0.044 76);
    --cbd0:  oklch(72% 0.06 68 / 70%);
    --cbd1:  oklch(68% 0.06 76 / 70%);
    --cmed:  oklch(82% 0.020 68);
    --cbg:   oklch(90% 0.022 76 / 69%);
    --clight: oklch(95% 0.014 68 / 69%);
    --cbg-modal: oklch(28% 0.04 68 / 82%);

    /* Semantic */
    --cbg-primary:   oklch(88% 0.08 303);  --cfg-primary:   oklch(36% 0.12 303); --cbd-primary:   oklch(72% 0.10 303 / 70%);
    --cbg-secondary: oklch(90% 0.025 270); --cfg-secondary: oklch(38% 0.06 270); --cbd-secondary: oklch(70% 0.05 270 / 60%);
    --cbg-info:      oklch(88% 0.07 220);  --cfg-info:      oklch(36% 0.10 220);  --cbd-info:      oklch(72% 0.09 220 / 70%);
    --cbg-success:   oklch(88% 0.08 150);  --cfg-success:   oklch(34% 0.11 150);  --cbd-success:   oklch(72% 0.10 150 / 70%);
    --cbg-warning:   oklch(90% 0.09 68);   --cfg-warning:   oklch(40% 0.11 58);   --cbd-warning:   oklch(72% 0.09 68 / 70%);
    --cbg-danger:    oklch(90% 0.08 22);   --cfg-danger:    oklch(38% 0.13 22);   --cbd-danger:    oklch(72% 0.10 22 / 70%);

    /* Shadows — warm amber hue, never pure black */
    --shadow-card:  0 2px 8px oklch(60% 0.04 68 / 18%), 0 1px 2px oklch(50% 0.06 68 / 12%);
    --shadow-lift:  0 6px 20px oklch(55% 0.06 68 / 22%), 0 2px 6px oklch(50% 0.05 68 / 14%);
    --shadow-modal: 0 12px 40px oklch(40% 0.08 68 / 30%);
  }

  html[data-theme='dark'] {
    --cfg0:  oklch(79% 0.022 68); --cbg0:  oklch(22% 0.018 68); --cbd0:  oklch(52% 0.06 68 / 70%);
    --cfg1:  oklch(83% 0.020 76); --cbg1:  oklch(25% 0.016 76); --cbd1:  oklch(50% 0.05 76 / 70%);
    --cmed:  oklch(36% 0.022 68);
    --cbg:   oklch(25% 0.016 76 / 69%);
    --clight: oklch(24% 0.016 68 / 69%);
    --cbg-modal: oklch(72% 0.025 68 / 65%);

    --cbg-primary:   oklch(30% 0.09 303); --cfg-primary:   oklch(72% 0.10 303); --cbd-primary:   oklch(60% 0.10 303 / 70%);
    --cbg-secondary: oklch(28% 0.04 270); --cfg-secondary: oklch(70% 0.08 270); --cbd-secondary: oklch(58% 0.08 270 / 70%);
    --cbg-info:      oklch(28% 0.08 220); --cfg-info:      oklch(70% 0.09 220); --cbd-info:      oklch(60% 0.09 220 / 70%);
    --cbg-success:   oklch(26% 0.09 150); --cfg-success:   oklch(72% 0.10 150); --cbd-success:   oklch(60% 0.10 150 / 70%);
    --cbg-warning:   oklch(28% 0.08 68);  --cfg-warning:   oklch(76% 0.09 68);  --cbd-warning:   oklch(62% 0.08 68 / 70%);
    --cbg-danger:    oklch(26% 0.09 22);  --cfg-danger:    oklch(72% 0.10 22);  --cbd-danger:    oklch(60% 0.10 22 / 70%);

    --shadow-card:  0 2px 8px  oklch(10% 0.03 68 / 40%), 0 1px 2px oklch(10% 0.03 68 / 25%);
    --shadow-lift:  0 6px 24px oklch(10% 0.04 68 / 55%), 0 2px 6px oklch(10% 0.03 68 / 30%);
    --shadow-modal: 0 16px 50px oklch(8% 0.05 68 / 65%);
  }
}

/* HSL fallback */
@supports not (color: oklch(50% 0.15 68)) {
  html[data-theme='light'] {
    --cbg-modal: hsla(68, 34%, 29%, 86%);
    --cbg0: hsl(68, 27%, 79%); --cfg0: hsl(68, 69%, 34%); --cbd0: hsla(68, 57%, 73%, 83%);
    --cbg1: hsl(76, 11%, 69%); --cfg1: hsl(76, 69%, 34%); --cbd1: hsla(76, 57%, 73%, 83%);
    --cbg-primary:   hsl(303, 59%, 77%); --cfg-primary:   hsl(303, 79%, 44%); --cbd-primary:   hsla(303, 57%, 73%, 83%);
    --cbg-secondary: hsl(270, 11%, 77%); --cfg-secondary:  hsl(270, 41%, 44%); --cbd-secondary: hsla(270, 69%, 69%, 69%);
    --cbg-info:      hsl(220, 69%, 77%); --cfg-info:      hsl(220, 83%, 34%); --cbd-info:      hsla(220, 68%, 68%, 83%);
    --cbg-success:   hsl(150, 69%, 77%); --cfg-success:   hsl(150, 83%, 34%); --cbd-success:   hsla(150, 68%, 69%, 83%);
    --cbg-warning:   hsl(68,  69%, 77%); --cfg-warning:   hsl(50,  83%, 34%); --cbd-warning:   hsla(68,  65%, 55%, 83%);
    --cbg-danger:    hsl(22,  69%, 79%); --cfg-danger:    hsl(22,  83%, 34%); --cbd-danger:    hsla(22,  68%, 68%, 83%);
    --shadow-card: 0 2px 8px rgba(100,80,50,.14); --shadow-lift: 0 6px 20px rgba(100,80,50,.20); --shadow-modal: 0 12px 40px rgba(80,60,40,.28);
  }
  html[data-theme='dark'] {
    --cbg-modal: hsla(68, 17%, 12%, 93%);
    --cbg0: hsl(68, 9%, 14%); --cfg0: hsl(68, 69%, 79%); --cbd0: hsla(68, 68%, 34%, 79%);
    --cbg1: hsl(76, 7%, 25%); --cfg1: hsl(76, 69%, 79%); --cbd1: hsla(76, 68%, 34%, 79%);
    --cbg-primary:   hsl(303, 79%, 21%); --cfg-primary:   hsl(303, 79%, 83%); --cbd-primary:   hsla(303, 68%, 34%, 79%);
    --cbg-secondary: hsl(270, 34%, 21%); --cfg-secondary: hsl(270, 69%, 79%); --cbd-secondary: hsla(270, 79%, 34%, 79%);
    --cbg-info:      hsl(220, 69%, 21%); --cfg-info:      hsl(220, 79%, 69%); --cbd-info:      hsla(220, 68%, 34%, 79%);
    --cbg-success:   hsl(150, 69%, 21%); --cfg-success:   hsl(150, 79%, 69%); --cbd-success:   hsla(150, 68%, 34%, 79%);
    --cbg-warning:   hsl(68,  69%, 21%); --cfg-warning:   hsl(68,  79%, 69%); --cbd-warning:   hsla(68,  68%, 34%, 79%);
    --cbg-danger:    hsl(22,  79%, 21%); --cfg-danger:    hsl(22,  79%, 69%); --cbd-danger:    hsla(22,  68%, 34%, 79%);
    --shadow-card: 0 2px 8px rgba(0,0,0,.38); --shadow-lift: 0 6px 24px rgba(0,0,0,.52); --shadow-modal: 0 16px 50px rgba(0,0,0,.62);
  }
}

/* ════════════════════════════════════════════
   GLOBAL RESETS (override classless.css defaults)
   ════════════════════════════════════════════ */

body { padding: initial; max-width: 100vw; --navpos: sticky; }
body > footer, header { margin: initial; }
nav+* { margin-top: initial; }
section::after { content: ''; margin: unset; }

/* ════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════ */

.header .logo-container { text-align: center; }
header.header {
  background-color: var(--cbg0);
  border-bottom: 1px solid var(--cmed);
  box-shadow: 0 1px 8px oklch(50% 0.04 68 / 10%);
}
html[data-theme='dark'] header.header {
  box-shadow: 0 1px 12px oklch(10% 0.03 68 / 30%);
}

/* ════════════════════════════════════════════
   SIDEBAR / NAV
   ════════════════════════════════════════════ */

nav-sidebar { grid-area: sidebar; width: 100%; }
main { grid-area: main; overflow: inherit; }
content-holder { grid-area: main; }

/* Nav item sizing — desktop */
.nav-link .svg-icon, .navbar-item .svg-icon { height: 10vh; font-size: 2em; }

.navbar-item {
  display: block; text-align: center; text-decoration: none; align-content: center;
  border-radius: 8px; padding: 0.5rem 0.4rem;
  transition: background-color 200ms ease, color 200ms ease, transform 150ms ease;
}
.navbar-item a { text-decoration: none; }
nav > .navbar-item:not(:last-of-type) { padding-bottom: 0.4em; }

/* Active state — left accent bar */
nav > .navbar-item.active {
  color: var(--cfg-primary);
  background-color: var(--cbg-primary);
  box-shadow: inset 3px 0 0 var(--cfg-primary);
}

/* Hover state */
.navbar-item:hover {
  background-color: var(--cbg0);
  color: var(--cfg-primary);
  transform: translateX(2px);
  filter: none;
}

/* Menu section titles */
.menu-title {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cdark);
  padding: 0.8rem 0.5rem 0.2rem; list-style: none; opacity: 0.7;
}

.nav-tabs { position: sticky; top: 0; z-index: 39; }

.sidebar { transition: all 0.5s; width: 250px; height: 100vh; position: fixed; top: 0; left: 0; z-index: 41; }

/* ─── Mobile nav (≤445px) ─── */
@media (max-width: 445px) {
  nav-sidebar { position: fixed; bottom: 0; grid-area: sidebar; }
  nav-sidebar nav { display: -webkit-inline-box; overflow-x: auto; }
  nav-sidebar nav a { margin: .5em 1em; }
  nav-sidebar nav a div { display: none; }
  /* Icons shrunk — overrides the 10vh above */
  .nav-link .svg-icon, .navbar-item .svg-icon { height: 32px !important; font-size: 1.5rem !important; }
  nav > .navbar-item { margin-bottom: 0; }
  nav ul:first-child > li:first-child::after { content: unset; }
  .heading button { margin-right: 0 !important; }
  .list { display: inline list-item; margin-left: 1em; }
  .responsive-flex.list > span:not(first-child) { margin-left: 1em; }
}

/* ════════════════════════════════════════════
   LOADING SPINNER
   ════════════════════════════════════════════ */

@keyframes spin { 100% { transform: rotate(360deg); } }
/* .loading::after {content: "↻"; font-size: 3em;
  position: absolute; top: 0em; left: 1.8em;
  animation-name: spin;
  animation-duration: 0.6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
} */
.hidden { display: none !important; }
.fs-1 { font-size: 1em; } .fs-1_5 { font-size: 1.5em; } .fs-2 { font-size: 2em; }

/* ════════════════════════════════════════════
   CLOSE BUTTON
   ════════════════════════════════════════════ */

.close {
  vertical-align: middle; border: none; color: inherit;
  border-radius: 50%; background: transparent; position: relative;
  width: 32px; height: 32px; opacity: 0.55; padding: 0; margin-top: 0;
  transition: opacity 150ms ease;
}
.close:hover { opacity: 0.9; }
.close::before, .close::after {
  content: " "; position: absolute; top: 50%; left: 50%;
  height: 18px; width: 3px; background-color: currentColor;
}
.close::before { transform: translate(-50%, -50%) rotate(45deg); }
.close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

button.delete { border-radius: 50%; padding: 0; width: 1.1em; height: 1.1em; margin-top: 0; }
button.delete > [class^="bi-"]::before,
button.delete > [class*=" bi-"]::before { font-size: 1em; vertical-align: .1em; }

/* ════════════════════════════════════════════
   NOTYF TOASTS
   ════════════════════════════════════════════ */

.notyf__dismiss { width: unset; }
.notyf__dismiss button { margin: unset; }
.notyf__toast--dismissible .notyf__wrapper { padding-right: 3em; }

/* ════════════════════════════════════════════
   NAVBAR SHADOW (themed, not generic black)
   ════════════════════════════════════════════ */

.navbar, .navbar-brand, .navbar-menu {
  box-shadow: 0 2px 8px oklch(50% 0.04 68 / 10%);
}
html[data-theme='dark'] .navbar,
html[data-theme='dark'] .navbar-brand,
html[data-theme='dark'] .navbar-menu {
  box-shadow: 0 2px 12px oklch(10% 0.04 68 / 30%);
}

/* ════════════════════════════════════════════
   TABLE
   ════════════════════════════════════════════ */

table, .dropdown-content {
  background-color: var(--cbg1);
  color: var(--cfg1);
  border-radius: 8px;
  overflow: hidden;
}
tbody { font-family: Judson; }
table thead td, table thead th, table tfoot td, table tfoot th, .card-content {
  align-items: baseline; margin: .5em 0;
}
table.striped tbody tr:not(.selected):nth-child(even) {
  background-color: var(--cbg1);
  filter: brightness(0.95);
}
table th {
  color: var(--cfg-info); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.04em; text-transform: uppercase;
}
table td { border-bottom: 1px solid var(--cmed); transition: background-color 150ms ease; }
tr:hover > td { background-color: var(--cbg0); }

/* ════════════════════════════════════════════
   CARDS
   ════════════════════════════════════════════ */

.card, .dropdown-item, table th { background-color: var(--cbg1); color: var(--cfg1); position: relative; }
.card {
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--cmed);
  transition: box-shadow 220ms ease, border-color 220ms ease;
}

.card-body p { border-bottom: 1px solid var(--cbd-warning); margin: 0; padding: .5em 1em; }
.card-body p i { margin-right: .5em; }

.card-header, .modal-header, .modal-card-head {
  border-bottom: 1px solid var(--cmed);
  font-weight: 600; color: var(--cfg-info);
  margin: 0; padding: .6em .75em;
  border-radius: 8px 8px 0 0;
}
.card-header .title { line-height: 1.35; letter-spacing: 0.01em; }
.card-header .subtitle { color: var(--cdark); margin-top: 0.15rem; opacity: 0.85; font-weight: 400; }
.card-header .toolbar { flex-shrink: 0; display: flex; gap: 0.1rem; align-items: center; }

.card-content {
  display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.5rem;
  align-items: baseline; padding: 0.6rem 0.75rem;
}
.card-content label { color: var(--cdark); opacity: 0.85; }

.card-footer { border-radius: 0 0 8px 8px; padding: 0.4rem 0.75rem; min-height: 4px; }
.card-footer:empty { padding: 0; min-height: 2px; }

/* Staggered card entry */
@keyframes card-enter { from { opacity: 0; margin-top: 12px; } to { opacity: 1; margin-top: 0px; } }
.columns > .card { animation: card-enter 680ms ease forwards; } /* it creates a new containing block which breaks the `position: fixed` children. */
.columns > .card:nth-child(1)  { animation-delay: 0ms; }
.columns > .card:nth-child(2)  { animation-delay: 50ms; }
.columns > .card:nth-child(3)  { animation-delay: 100ms; }
.columns > .card:nth-child(4)  { animation-delay: 150ms; }
.columns > .card:nth-child(5)  { animation-delay: 200ms; }
.columns > .card:nth-child(6)  { animation-delay: 250ms; }
.columns > .card:nth-child(7)  { animation-delay: 300ms; }
.columns > .card:nth-child(8)  { animation-delay: 350ms; }
.columns > .card:nth-child(9)  { animation-delay: 400ms; }
.columns > .card:nth-child(10) { animation-delay: 450ms; }
.columns > .card:nth-child(11) { animation-delay: 500ms; }
.columns > .card:nth-child(12) { animation-delay: 550ms; }

/* Content fade-in */
@keyframes content-fade { from { opacity: 0; margin-top: 12px; } to { opacity: 1; margin-top: 0px; } }
.content.animated { animation: content-fade 680ms ease forwards; }

/* ════════════════════════════════════════════
   MODALS
   ════════════════════════════════════════════ */

.modal, .modal-background {
  bottom: 0; left: 0; position: absolute; right: 0; top: 0;
}
.modal {
  align-items: center; display: none; flex-direction: column; inset: 0; height: 100dvh;
  justify-content: center; overflow: hidden; position: fixed; z-index: 42;
}
.modal.active { display: flex; }
.columns > .card:has(.modal.active) { animation: none; } /* removes the animation on .card that freeing the position: fixed from being trapped */
.clipped { overflow: hidden !important; }
.modal-background { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  background-color: oklch(from var(--cbg-modal) l c h / 69%); }
.modal-content, .modal-card {
  padding: 0.5em;
  max-height: calc(100vh - 10em);
  overflow: auto; position: relative; width: 100%;
  border-radius: 10px; border: 1px solid var(--cmed);
  box-shadow: var(--shadow-modal);
}
.modal-card { display: flex; flex-direction: column; max-height: calc(100vh - 8em); overflow: hidden; padding: 0; }
.modal-max-height, .modal-lg { max-height: calc(100dvh - 40px); }
.modal-card-body { -webkit-overflow-scrolling: touch; background-color: oklch(from var(--cbg0) calc(l - 0.021) calc(c + 0.007) h); color: var(--cfg0);
  flex-grow: 1; flex-shrink: 1; overflow: auto; padding: 0.5em; }
.modal-card-head { background-color: var(--cbg0); display: block; padding: 0.7em; position: relative; }
.modal-card-foot {
  align-items: center; background-color: var(--cbg0); display: flex; flex-shrink: 0;
  justify-content: center; padding: 0.7em; position: relative;
  border-top: 1px solid var(--cmed); border-radius: 0 0 8px 8px;
  box-shadow: 0 -2px 6px oklch(50% 0.04 68 / 8%);
}
.modal-card-foot comp-pagination {margin: 0.25em}
/* ════════════════════════════════════════════
   TYPOGRAPHY + BUTTONS
   ════════════════════════════════════════════ */

.title, .modal-card-title, .card-header-title, button, label {
  font: var(--font-h); display: inline-table; text-decoration-line: none;
}
.title + .subtitle { color: var(--cfg-primary); font-weight: bold; }
.truncate {
  display: -webkit-inline-box; overflow: hidden; text-overflow: ellipsis;
  -webkit-box-orient: vertical; -webkit-line-clamp: 4;
}

/* ════════════════════════════════════════════
   INPUTS
   ════════════════════════════════════════════ */

textarea, input:not([type="range"]), button, select {
  background-color: var(--cbg1); color: var(--cfg0); border-color: var(--cbd1);
  font-size: 100%; line-height: normal;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
input::placeholder, select::placeholder, textarea::placeholder { color: var(--cmed) !important; }
/*html[data-theme='light'] input::placeholder,
html[data-theme='light'] select::placeholder,
html[data-theme='light'] textarea::placeholder {
  color: oklch(from var(--cbg1) calc(l - 20) c h) !important;
}*/
.heading > input[type=search] { flex-grow: 1; width: unset; }

/* Firefox search icon */
@-moz-document url-prefix() {
  input[type=search] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" class="bi bi-search" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/></svg>');
    background-repeat: no-repeat; background-size: 1.2em 1.2em;
    background-position: 0.4em; flex-grow: 1; width: unset !important; padding-left: 2em;
  }
}

/* Focus rings — accessibility */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--cfg-info); outline-offset: 2px;
  box-shadow: 0 0 0 4px oklch(from var(--cfg-info) l c h / 20%);
}

/* ════════════════════════════════════════════
   SEMANTIC COLOR CLASSES
   ════════════════════════════════════════════ */

.primary   { background-color: var(--cbg-primary)   !important; border-color: var(--cbd-primary)   !important; color: var(--cfg-primary)   !important; }
.secondary { background-color: var(--cbg-secondary) !important; border-color: var(--cbd-secondary) !important; color: var(--cfg-secondary) !important; }
.info      { background-color: var(--cbg-info)      !important; border-color: var(--cbd-info)      !important; color: var(--cfg-info)      !important; }
.success   { background-color: var(--cbg-success)   !important; border-color: var(--cbd-success)   !important; color: var(--cfg-success)   !important; }
.warning   { background-color: var(--cbg-warning)   !important; border-color: var(--cbd-warning)   !important; color: var(--cfg-warning)   !important; }
.danger    { background-color: var(--cbg-danger)    !important; border-color: var(--cbd-danger)    !important; color: var(--cfg-danger)    !important; }
div.primary:empty, div.info:empty, div.success:empty, div.warning:empty, div.danger:empty { display: none; }
.alert:empty { display: none !important; }

/* ════════════════════════════════════════════
   BUTTONS — reset / hover states
   ════════════════════════════════════════════ */

.reset {
  padding: 0 .3em; border: none !important;
  background-color: transparent !important; color: inherit !important; text-decoration: none;
  border-radius: 6px; transition: filter 150ms ease, background-color 150ms ease;
}
.reset:hover { filter: brightness(1.15) !important; }
html[data-theme='light'] .reset:hover { color: var(--cfg-warning) !important; filter: brightness(1.1) saturate(1.2) !important; }
html[data-theme='dark']  .reset:hover { color: var(--cfg-warning) !important; filter: brightness(1.2) !important; }

.toolbar button.reset { padding: 0.25rem 0.35rem; }
.toolbar button.reset:hover { background-color: var(--cbg1) !important; }

a:hover, button:not([disabled]):hover, input[type="checkbox"]:hover {
  border-color: unset;
  filter: brightness(1.06);
}
button:disabled, button[disabled] { filter: blur(0.1em); cursor: not-allowed; }
.big-button { margin: 0.3em; padding: 0.1em 0.7em; font-size: 150%; }
.semibold { font-weight: 600 !important; }

/* ════════════════════════════════════════════
   LAYOUT HELPERS
   ════════════════════════════════════════════ */

.heading { display: flex; align-items: flex-start; gap: 0.3em !important; flex-wrap: wrap; }
.heading h4 { margin-top: 0.5em !important; }
.heading button { margin-top: 0 !important; }
.left-right { display: flex; justify-content: space-between; }

/* ════════════════════════════════════════════
   PAGINATION
   ════════════════════════════════════════════ */

comp-pagination, comp-pagination ul {
  display: flex; flex-wrap: wrap; flex: 1; gap: 0.5em; margin: 1em 0;
  align-items: center; justify-content: center; padding: unset;
}
comp-pagination a, .pagination a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.3em 0.5em; text-decoration: none; border-radius: 6px;
  flex: 0 1 3em; text-align: center; border: 2px solid; min-width: 3.4rem;
  background-color: var(--cbg0); color: var(--cfg0); border-color: var(--cmed);
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 120ms ease;
}
comp-pagination a.active, .pagination a.active {
  filter: brightness(110%) saturate(1.3);
  box-shadow: 0 2px 6px oklch(from var(--cfg-warning) l c h / 25%);
}
.pagination { display: flex; align-items: center; justify-content: center; gap: 0.4em; margin: 0.5em; flex-wrap: wrap; }
.pagination a:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* ════════════════════════════════════════════
   ICON DETAIL (card hover reveal)
   ════════════════════════════════════════════ */

.icon-detail { position: absolute; bottom: 20px; right: 20px; height: auto; display: none; }
.icon, .icon-detail i { font-size: 3em; }
.card:hover .icon-detail { display: inline-block; }

/* ════════════════════════════════════════════
   MODAL WIDTHS
   ════════════════════════════════════════════ */

.modal-xs, .modal-sm, .modal-md, .modal-lg { width: 100vw; }

/* ════════════════════════════════════════════
   TAGS / BADGES — square, not pill
   ════════════════════════════════════════════ */

.tags { align-items: center; display: flex; flex-wrap: wrap; justify-content: flex-start; }
.tags .tag:not(:last-child) { margin-right: 0.5em; }
.tag {
  align-items: center; display: inline-flex;
  background-color: var(--cfg1); color: var(--cbg1);
  border-radius: 0.25em; /* was 0.5em pill → square badge */
  font-size: 0.7em; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  height: auto; padding: 0.2em 0.5em; margin-bottom: 0.5em;
  white-space: nowrap; justify-content: center;
}
.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: var(--cbg-danger);
  color: var(--cfg-danger);
  font-size: 0.6875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--cbd-danger);
}
button:has(.notification-badge) {
  position: relative;
}
/* ════════════════════════════════════════════
   DL / DT
   ════════════════════════════════════════════ */

dl { overflow: hidden; }
dt { float: left; margin-right: 1em; }

/* ════════════════════════════════════════════
   FORM SWITCH
   ════════════════════════════════════════════ */

.form-switch { display: block; line-height: 1.2em; margin: 0.2em 0; min-height: 1.4em; padding: 0.1em 0.4em 0.1em 2em; position: relative; }
.form-switch input { clip: rect(0,0,0,0); height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; }
.form-switch input:checked + .form-icon { background-color: var(--cfg-success); border-color: var(--cfg-success); }
.form-switch .form-icon {
  border: 0.1em solid var(--cmed); cursor: pointer; display: inline-block; position: absolute;
  transition: background 0.2s ease, border 0.2s ease, box-shadow 0.2s ease;
  background: var(--cmed); border-radius: 0.5em; height: 1em; left: 0; top: 0.2em; width: 1.8em;
}
.form-switch .form-icon::before {
  background: var(--cbg0); border-radius: 50%; content: ""; display: block;
  height: 0.85em; left: 0; position: absolute; top: 0;
  transition: background 0.2s ease, left 0.2s ease; width: 0.85em;
}
.form-switch input:checked + .form-icon::before { left: 14px; }

/* ════════════════════════════════════════════
   CHECKBOX
   ════════════════════════════════════════════ */

input[type="checkbox"] {
  appearance: none; background-color: inherit; color: currentColor;
  margin: 0; margin-right: .4em; padding-right: 0.1em;
  font: inherit; border-radius: 0.2em; transform: translateY(0.2em);
  width: 1.2em; height: 1.2em; border: 0.1em solid currentColor;
  display: grid; place-content: center; float: left;
}
input[type="checkbox"]::before {
  box-shadow: inset 1em 1em var(--cfg0); content: ""; width: 0.7em; height: 0.7em;
  transform: scale(0); transform-origin: bottom left; transition: 120ms transform ease-in-out;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
input[type="checkbox"]:checked::before { transform: scale(1) translateX(-0.34em); }

/* ════════════════════════════════════════════
   FORM VALIDATION
   ════════════════════════════════════════════ */

.validated input:invalid {
  border-color: var(--cfg-danger);
  padding-right: calc(1.5em + 0.75em);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875em) center;
  background-size: calc(0.75em + 0.375em) calc(0.75em + 0.375em);
}
.icon-input { grid-template-columns: 1fr; display: inline-grid; align-items: center; }
.icon-input * { grid-column-start: 1; grid-row-start: 1; }
.icon-input *:first-child { padding-left: 2em; }
.icon-input .icofont { margin-left: .5em; width: fit-content; }
form .help.danger { display: none; padding: 0 1em; }
form.validated *:invalid ~ .help.danger { display: inline-block; }
.fade { transition: opacity .15s linear; }

/* ════════════════════════════════════════════
   CHAT WIDGET
   ════════════════════════════════════════════ */

.chat-wrapper {
  width: 385px; position: fixed; right: 40px; bottom: 40px; z-index: 11;
  transition: transform 400ms ease; transform: translateY(130%);
}
.chat-wrapper.open { transform: translateY(0); }

/* ════════════════════════════════════════════
   NAV USER
   ════════════════════════════════════════════ */

.nav-user { padding: calc(31px / 2) 20px calc(31px / 2) 57px !important; text-align: left !important; position: relative; border-width: 0 1px; min-height: 70px; }
.nav-user .account-user-avatar { position: absolute; top: calc(38px / 2); left: 15px; }
.nav-user .account-user-avatar img { height: 32px; width: 32px; }
.nav-user .account-position { display: block; font-size: 12px; margin-top: -3px; }
.nav-user .account-user-name { display: block; font-weight: 600; }

/* ════════════════════════════════════════════
   HVR REVEAL
   ════════════════════════════════════════════ */

.hvr-reveal { display: inline-block; vertical-align: middle; transform: perspective(1px) translateZ(0); position: relative; overflow: hidden; }
.hvr-reveal:before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; bottom: 0;
  border-color: var(--cbd-success); border-style: solid; border-width: 0;
  transition: border-width 0.1s ease-out;
}
.hvr-reveal:hover:before, .hvr-reveal:focus:before, .hvr-reveal:active:before { border-width: 4px; }

/* ════════════════════════════════════════════
   DROPDOWN ARROW
   ════════════════════════════════════════════ */

.arrow-down { display: inline-block; }
.arrow-down:after {
  border-color: initial; border-style: solid; border-width: 0 0 1px 1px; content: "";
  height: .4em; display: inline-block; right: 5px; top: 50%; margin-left: 10px;
  transform: rotate(-45deg) translateY(-50%); transform-origin: top;
  transition: all .3s ease-out; width: .4em;
}

/* ════════════════════════════════════════════
   DROPDOWN
   ════════════════════════════════════════════ */

.dropdown { display: inline-flex; position: relative; }
.dropdown.active .dropdown-menu, .dropdown:hover .dropdown-menu {
  background-color: var(--cbg1); display: flex; flex-direction: column; gap: 10px; max-width: 40vw;
}
html[data-theme='dark'] .dropdown-menu { background-color: var(--cbg0); }
.dropdown-menu {
  display: none; position: fixed; top: 40px; padding: .5em; min-width: 15em; z-index: 50;
  background-color: var(--cbg0); border: 1px solid var(--cmed); border-radius: 8px;
  box-shadow: var(--shadow-lift);
  animation-name: DropDownSlide; animation-duration: .3s; animation-fill-mode: both;
}
.dropdown-content {
  width: inherit; border-radius: 8px; padding: 0.5em;
  box-shadow: var(--shadow-lift); /* was generic rgba black */
}
.dropdown-item {
  cursor: pointer; display: block; line-height: 1.5; padding: 0.35em 0.6em;
  position: relative; border-radius: 6px; background-color: transparent;
  transition: background-color 150ms ease, color 150ms ease;
}
.dropdown-item:hover { background-color: var(--cbg1); color: var(--cfg-primary); }

.dropdown-menu-animated {
  animation-name: DropDownSlide; animation-duration: .3s; animation-fill-mode: both;
  position: absolute; margin: 0; z-index: 1000;
}
.dropdown-menu-animated.dropdown-menu-end[style] { left: auto !important; right: 0 !important; }
.dropdown-menu-animated.show { top: 100% !important; }
.dropdown-menu-animated i { display: inline-block; }
.dropdown-menu-animated.dropdown-menu[data-popper-placement^=left],
.dropdown-menu-animated.dropdown-menu[data-popper-placement^=right],
.dropdown-menu-animated.dropdown-menu[data-popper-placement^=top] { top: auto !important; animation: none !important; }

@keyframes DropDownSlide { 0% { transform: translateY(10px); } 100% { transform: translateY(0); } }

/* ════════════════════════════════════════════
   INPUT NUMBER — hide spinners
   ════════════════════════════════════════════ */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* ════════════════════════════════════════════
   CALLOUT
   ════════════════════════════════════════════ */

.callout {
  padding: 1rem 1.1rem; margin: 1rem 0;
  border: 1px solid var(--cmed); border-left-width: 3px;
  border-radius: 6px; background-color: var(--cbg0);
}
.callout h4 { margin-bottom: .25em; }
.callout code { border-radius: .25em; }
.callout + .callout { margin-top: -.25em; }
.callout-info    { border-left-color: var(--cfg-info); }
.callout-warning { border-left-color: var(--cfg-warning); }
.callout-danger  { border-left-color: var(--cfg-danger); }

/* ════════════════════════════════════════════
   STATUS + ACTIVE INDICATORS
   ════════════════════════════════════════════ */

h4.card-title[data-status="Đang hoạt động"] i:before { display: none; }
i[data-status]:not([data-status="Đang hoạt động"]):before { content: "\f05e"; color: var(--cfg-danger); }

.status-inactive {
  width: unset;
  text-decoration: line-through wavy var(--cfg-danger);
  -webkit-text-decoration: line-through wavy var(--cfg-danger);
  opacity: 0.7;
}

/* ════════════════════════════════════════════
   BORDER ANIMATION (themed, not hardcoded)
   ════════════════════════════════════════════ */

.border-animation {
  outline: 3px dashed var(--cfg-success);
  box-shadow: 0 0 6px var(--cbd-success);
  animation: maskBorder 2s linear infinite;
}
@keyframes maskBorder {
  to { outline-color: var(--cbg-success); box-shadow: 0 0 8px var(--cfg-success); }
}

/* ════════════════════════════════════════════
   CUBE LOADER (themed, not hardcoded #2BA0C7)
   ════════════════════════════════════════════ */

.thecube { width: 75px; height: 75px; margin: 40px auto 0; position: relative; transform: rotateZ(45deg); }
.thecube .cube { position: relative; float: left; width: 50%; height: 50%; transform: scale(2) rotateZ(45deg); }
.thecube .cube:before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-color: var(--cfg-info); /* was hardcoded #2BA0C7 */
  animation: foldthecube 2.4s infinite linear both; transform-origin: 100% 100%;
}
.thecube .c2 { transform: scale(2) rotateZ(90deg); }
.thecube .c3 { transform: scale(2) rotateZ(180deg); }
.thecube .c4 { transform: scale(2) rotateZ(270deg); }
.thecube .c2:before { animation-delay: 0.3s; }
.thecube .c3:before { animation-delay: 0.6s; }
.thecube .c4:before { animation-delay: 0.9s; }
@keyframes foldthecube {
  0%, 10%  { transform: perspective(140px) rotateX(-180deg); opacity: 0; }
  25%, 75% { transform: perspective(140px) rotateX(0deg); opacity: 1; }
  90%, 100%{ transform: perspective(140px) rotateY(180deg); opacity: 0; }
}

/* ════════════════════════════════════════════
   GRID UTILITIES
   ════════════════════════════════════════════ */

.grid { display: grid; }
.grid-overlay { grid-area: 1/1; }
.grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.whole-row { grid-column: 1/-1; }
.blur { filter: blur(3px); opacity: 0.7; }

/* ════════════════════════════════════════════
   PLACEHOLDERS + WHITESPACE
   ════════════════════════════════════════════ */

::-moz-placeholder { font-size: 0.9em; }
::-webkit-input-placeholder { font-size: 0.9em; }
.card-content span, .notification { white-space: pre-wrap; }
.notification { padding: 0 .5em; }
.nowrap { white-space: nowrap; }
form span { white-space: nowrap; }
.wrap-long {white-space: break-spaces; width: 90%;}
input[type=date] { width: auto !important; }

/* ════════════════════════════════════════════
   FLEX UTILITIES
   ════════════════════════════════════════════ */

.flex, footer div[slot=footer] { display: flex; align-items: center; }
.flex.text-right { justify-content: end; flex-wrap: wrap; }
.responsive-flex { display: block; }
.one-third input[type=date] { width: 100% !important; }
.basis-auto { flex-basis: auto; max-width: 100vw; }
.shrink { flex-shrink: unset; } .grow { flex-grow: 1; }
.basis { flex-basis: 100%; } .basis-min { flex-basis: min-content; } .basis-3 { flex-basis: 3em; }

/* VAT invoice specifics */
.vat-toolbar { color: var(--cfg-warning) !important; position: absolute; top: .5em; right: .5em; }
.vat-title { display: inline; width: 7em !important; } .vat-content { flex: 1; }
.vat-unit { width: 48% !important; } .vat-money { width: 40% !important; }
.w-max { display: inline-block; width: max-content; }

/* ════════════════════════════════════════════
   COLUMNS GRID
   ════════════════════════════════════════════ */

.columns { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1em; width: 100%; align-items: start; overflow-y: scroll; padding: 0.5em; }
.modal-card-body .columns {overflow-y: unset;}
.columns article.card {margin: 0.2em; padding: 0.5em}

/* ════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ════════════════════════════════════════════ */

@media (min-width: 666px) {
  .hidden-mobile { display: flex !important; }
  .card { padding: 1em; }
  .half { flex: none; width: 50%; }
  .responsive-flex { display: flex; align-items: center; gap: .5em; }
  .responsive-flex.text-right { justify-content: end; }
  .responsive-flex input:last-of-type { margin-right: 0; }
  .responsive-flex.list { justify-content: space-evenly; }
  .vat-title { flex: none; width: 18% !important; } .vat-label { width: 15% !important; }
  .vat-unit { width: 5em !important; } .vat-money { width: 8em !important; }
}

@media (min-width: 768px) {
  .notyf__toast { max-width: 50vw; }
  .flex .one-third, .responsive-flex .one-third { width: 33.3333%; }
  .modal-content, .modal-card { margin: 0 auto; max-height: calc(100vh - 40px); }
  form { display: grid; grid-template-columns: max-content 1fr; grid-gap: 0.3em 0.6em; grid-auto-flow: dense; align-items: center; }
  comp-modal-vat-invoice form { grid-template-columns: 1fr 9fr; }
  .modal-xs { width: 30vw; } .modal-sm { width: 60vw; } .modal-md { width: 80vw; } .modal-lg { width: 86vw; }
  .field-body { flex-grow: 9; flex-wrap: wrap; }
  .vat-title { flex: none; width: 16% !important; }
  .vat-unit, .vat-money { margin-left: 0.5em; }
}

@media (min-width: 992px) {
  view-company .columns, view-product-vat-invoice .columns { grid-template-columns: repeat(2, 1fr); }
  .modal-xs { width: 25vw; } .modal-sm { width: 50vw; } .modal-md { width: 72vw; }
  .left { float: left; }
  .vat-title { flex: none; width: 15% !important; } .vat-label { width: 12% !important; } .vat-money { width: 20% !important; }
}

@media (min-width: 1300px) {
  .columns { grid-template-columns: repeat(2, 1fr); }
  view-company .columns { grid-template-columns: repeat(3, 1fr); }
  .modal-xs { width: 21vw; } .modal-sm { width: 44vw; } .modal-md { width: 65vw; }
  .vat-title { flex: none; width: 7em !important; } .vat-label { width: 11% !important; } .vat-money { width: 7em !important; }
}

@media (min-width: 1800px) {
  .columns { grid-template-columns: repeat(3, 1fr); }
  view-company .columns { grid-template-columns: repeat(4, 1fr); }
  .modal-xs { width: 16vw; } .modal-sm { width: 36vw; } .modal-md { width: 58vw; }
  view-phone-log .columns { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
}