/* ==========================================================================
   KeepMyBill - application stylesheet
   Loaded on every page after Bootstrap. Everything visual lives here; pages
   should not carry inline colours or spacing any more.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */

:root {
  /* Brand - indigo actions on a deep plum chrome, continuing the original
     #2f2035 / #6c6df2 pairing the marketing pages used. */
  --kmb-brand-50:  #eef2ff;
  --kmb-brand-100: #e0e7ff;
  --kmb-brand-200: #c7d2fe;
  --kmb-brand-300: #a5b4fc;
  --kmb-brand-400: #818cf8;
  --kmb-brand-500: #6366f1;
  --kmb-brand-600: #4f46e5;
  --kmb-brand-700: #4338ca;
  --kmb-brand-800: #3730a3;

  --kmb-plum-700: #2f2035;
  --kmb-plum-800: #271b2c;
  --kmb-plum-900: #1e1423;

  /* Neutrals */
  --kmb-ink:         #1f2430;
  --kmb-ink-soft:    #475069;
  --kmb-ink-muted:   #6b7385;
  --kmb-border:      #e3e6ef;
  --kmb-border-soft: #eef0f6;
  --kmb-surface:     #ffffff;
  --kmb-surface-2:   #f7f8fc;
  --kmb-surface-3:   #f1f3f9;

  /* Status */
  --kmb-success:    #15803d;
  --kmb-success-bg: #e8f6ee;
  --kmb-warning:    #b45309;
  --kmb-warning-bg: #fdf3e3;
  --kmb-danger:     #c2253c;
  --kmb-danger-bg:  #fdecee;
  --kmb-info:       #0e7490;
  --kmb-info-bg:    #e6f5f9;

  /* Shape and depth */
  --kmb-radius-sm: 8px;
  --kmb-radius:    12px;
  --kmb-radius-lg: 18px;
  --kmb-shadow-xs: 0 1px 2px rgba(24, 27, 45, .06);
  --kmb-shadow-sm: 0 1px 3px rgba(24, 27, 45, .07), 0 1px 2px rgba(24, 27, 45, .04);
  --kmb-shadow:    0 4px 14px rgba(24, 27, 45, .08);
  --kmb-shadow-lg: 0 12px 32px rgba(24, 27, 45, .12);

  /* Layout */
  --kmb-sidebar-w: 264px;
  --kmb-topbar-h:  60px;

  /* Bootstrap overrides - so stock .btn-primary, links and focus rings pick up
     the brand without every page restating it. */
  --bs-primary: #4f46e5;
  --bs-primary-rgb: 79, 70, 229;
  --bs-link-color: #4f46e5;
  --bs-link-color-rgb: 79, 70, 229;
  --bs-link-hover-color: #3730a3;
  --bs-body-color: #1f2430;
  --bs-body-bg: #f7f8fc;
  --bs-border-color: #e3e6ef;
  --bs-border-radius: 12px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 18px;
  --bs-font-sans-serif: Prompt, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --------------------------------------------------------------- 2. Base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--bs-font-sans-serif);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--kmb-ink);
  background-color: var(--kmb-surface-2);
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--kmb-ink); letter-spacing: -.01em; }
h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); }
h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .6vw, 1.4rem); }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

hr { border-color: var(--kmb-border); opacity: 1; }

/* A visible focus ring on every interactive element - keyboard users could not
   tell where they were before. */
:focus-visible {
  outline: 2px solid var(--kmb-brand-500);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* ----------------------------------------------------------- 3. App shell */

.app-shell { display: flex; min-height: 100vh; }

/* Top bar ------------------------------------------------------------- */
.app-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--kmb-topbar-h);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 1rem;
  background: var(--kmb-surface);
  border-bottom: 1px solid var(--kmb-border);
  box-shadow: var(--kmb-shadow-xs);
  z-index: 1035;
}

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--kmb-ink);
  white-space: nowrap;
}
.app-brand:hover { color: var(--kmb-brand-700); text-decoration: none; }
.app-brand img { height: 32px; width: auto; display: block; }

.app-topbar__spacer { flex: 1 1 auto; }
.app-topbar__actions { display: flex; align-items: center; gap: .4rem; }

/* Icon-only round button used in the top bar */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--kmb-ink-soft);
  transition: background-color .15s ease, color .15s ease;
}
.btn-icon:hover { background: var(--kmb-surface-3); color: var(--kmb-brand-700); }

/* User chip */
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .6rem .3rem .35rem;
  border: 1px solid var(--kmb-border);
  border-radius: 999px;
  background: var(--kmb-surface);
  color: var(--kmb-ink-soft);
  font-size: .85rem;
  max-width: 16rem;
}
.user-chip:hover { border-color: var(--kmb-brand-300); color: var(--kmb-brand-700); text-decoration: none; }
.user-chip__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--kmb-brand-100);
  color: var(--kmb-brand-700);
  font-weight: 600;
  font-size: .8rem;
  flex: 0 0 auto;
}
.user-chip__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sidebar ------------------------------------------------------------ */
.app-sidebar {
  width: var(--kmb-sidebar-w);
  flex: 0 0 var(--kmb-sidebar-w);
  background: var(--kmb-plum-800);
  color: rgba(255, 255, 255, .72);
  border-right: 0;
}

@media (min-width: 992px) {
  .app-sidebar {
    position: fixed;
    top: var(--kmb-topbar-h);
    bottom: 0;
    left: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    /* Above its breakpoint Bootstrap's responsive offcanvas forces
       `background-color: transparent !important`, which left white menu text on
       a white page. Reassert the sidebar surface. */
    background: var(--kmb-plum-800) !important;
    visibility: visible !important;
    transform: none !important;
  }
  /* The drawer's own title bar is only meaningful while it slides over. */
  .app-sidebar > .offcanvas-header { display: none; }
  .app-sidebar::-webkit-scrollbar { width: 8px; }
  .app-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 4px; }

  /* Collapsed rail -------------------------------------------------------
     The width token drives both the sidebar and the main column's margin, so
     narrowing it here moves everything at once. Icons stay visible and keep
     their tooltips, so navigation is still one click away. */
  :root[data-sidebar="collapsed"] {
    --kmb-sidebar-w: 74px;
  }
  :root[data-sidebar="collapsed"] .app-nav__text,
  :root[data-sidebar="collapsed"] .app-nav__caret,
  :root[data-sidebar="collapsed"] .app-nav__section,
  :root[data-sidebar="collapsed"] .app-nav__sub {
    display: none;
  }
  :root[data-sidebar="collapsed"] .app-nav {
    padding-left: .55rem;
    padding-right: .55rem;
  }
  :root[data-sidebar="collapsed"] .app-nav__link {
    justify-content: center;
    padding: .7rem .5rem;
  }
  :root[data-sidebar="collapsed"] .app-nav__icon {
    flex-basis: auto;
    width: auto;
    font-size: 1.05rem;
  }
  /* A hairline where a section heading used to be, so the groups stay legible. */
  :root[data-sidebar="collapsed"] .app-nav__section + li > .app-nav__link {
    margin-top: .45rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-top: .8rem;
    border-radius: 0 0 var(--kmb-radius-sm) var(--kmb-radius-sm);
  }

  /* Only animate the shell on the wide layout, and only for the collapse. */
  .app-sidebar,
  .app-main--with-sidebar {
    transition: width .18s ease, margin-left .18s ease, flex-basis .18s ease;
  }
}

/* The toggle only makes sense where the sidebar is a persistent column: below
   992px the hamburger opens the drawer instead.
   Scoped to .app-topbar so it outranks the generic .btn display rule further
   down this file, which would otherwise show the button on every screen. */
.app-topbar .sidebar-toggle { display: none; }
@media (min-width: 992px) {
  .app-topbar .sidebar-toggle { display: inline-flex; }
}
:root[data-sidebar="collapsed"] .sidebar-toggle .fa-angles-left {
  transform: rotate(180deg);
}

.app-sidebar .offcanvas-header {
  background: var(--kmb-plum-900);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.app-sidebar .offcanvas-header .btn-close { filter: invert(1) grayscale(1) brightness(2); }

.app-nav { list-style: none; margin: 0; padding: .75rem .6rem 2rem; }
.app-nav__section {
  padding: 1rem .75rem .35rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .36);
}

.app-nav__link {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .75rem;
  margin-bottom: 2px;
  border-radius: var(--kmb-radius-sm);
  color: rgba(255, 255, 255, .76);
  font-size: .9rem;
  line-height: 1.35;
  transition: background-color .15s ease, color .15s ease;
}
.app-nav__link:hover,
.app-nav__link:focus-visible {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  text-decoration: none;
}
.app-nav__link.is-active {
  background: var(--kmb-brand-600);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--kmb-brand-300);
}
.app-nav__icon {
  flex: 0 0 1.25rem;
  width: 1.25rem;
  text-align: center;
  font-size: .95rem;
  opacity: .9;
}
.app-nav__text { flex: 1 1 auto; min-width: 0; }

/* Collapsible group */
.app-nav__toggle {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.app-nav__caret { transition: transform .18s ease; font-size: .7rem; opacity: .6; }
.app-nav__toggle[aria-expanded="true"] .app-nav__caret { transform: rotate(90deg); }
.app-nav__sub { list-style: none; margin: 0 0 .25rem; padding: 0 0 0 1.45rem; }
.app-nav__sub .app-nav__link { font-size: .85rem; padding: .45rem .7rem; }

/* Main --------------------------------------------------------------- */
.app-main {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: var(--kmb-topbar-h);
  display: flex;
  flex-direction: column;
}

@media (min-width: 992px) {
  .app-main--with-sidebar { margin-left: var(--kmb-sidebar-w); }
}

.app-content { flex: 1 1 auto; padding: 1.25rem 0 2rem; }

/* Public pages (marketing, login) have no sidebar. */
.app-main--public { margin-left: 0; }

/* Page header -------------------------------------------------------- */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1.1rem;
}
.page-head__title { margin: 0; font-size: 1.3rem; display: flex; align-items: center; gap: .55rem; }
.page-head__title i { color: var(--kmb-brand-600); }
.page-head__sub { margin: .15rem 0 0; font-size: .85rem; color: var(--kmb-ink-muted); }
.page-head__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------------------------------------------------------- 4. Components */

/* Cards / panels ----------------------------------------------------- */
.card {
  --bs-card-border-color: var(--kmb-border);
  --bs-card-border-radius: var(--kmb-radius);
  --bs-card-bg: var(--kmb-surface);
  box-shadow: var(--kmb-shadow-sm);
}
.card-header {
  background: var(--kmb-surface);
  border-bottom: 1px solid var(--kmb-border-soft);
  font-weight: 600;
  padding: .85rem 1.1rem;
}

/* Neutral panel that replaces the hardcoded #eeeeed boxes */
.panel {
  background: var(--kmb-surface);
  border: 1px solid var(--kmb-border);
  border-radius: var(--kmb-radius);
  box-shadow: var(--kmb-shadow-sm);
  padding: 1.15rem;
}
.panel--muted { background: var(--kmb-surface-3); box-shadow: none; }
.panel__title {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
}
.panel__title i { color: var(--kmb-brand-600); }

/* Stat / KPI tile ---------------------------------------------------- */
.stat {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  height: 100%;
  padding: 1rem 1.1rem;
  background: var(--kmb-surface);
  border: 1px solid var(--kmb-border);
  border-radius: var(--kmb-radius);
  box-shadow: var(--kmb-shadow-sm);
}
.stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border-radius: var(--kmb-radius-sm);
  background: var(--kmb-brand-50);
  color: var(--kmb-brand-700);
  font-size: 1.1rem;
}
.stat__body { min-width: 0; }
.stat__label {
  display: block;
  font-size: .78rem;
  color: var(--kmb-ink-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.stat__value {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.stat__hint { font-size: .8rem; color: var(--kmb-ink-muted); }

.stat--success .stat__icon { background: var(--kmb-success-bg); color: var(--kmb-success); }
.stat--warning .stat__icon { background: var(--kmb-warning-bg); color: var(--kmb-warning); }
.stat--danger  .stat__icon { background: var(--kmb-danger-bg);  color: var(--kmb-danger); }
.stat--info    .stat__icon { background: var(--kmb-info-bg);    color: var(--kmb-info); }

/* Forms -------------------------------------------------------------- */
.form-label {
  font-size: .83rem;
  font-weight: 500;
  color: var(--kmb-ink-soft);
  margin-bottom: .3rem;
}
.form-label .req { color: var(--kmb-danger); }

.form-control, .form-select {
  border-color: var(--kmb-border);
  border-radius: var(--kmb-radius-sm);
  padding: .5rem .7rem;
  font-size: .92rem;
  background-color: var(--kmb-surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--kmb-brand-400);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .14);
}
.form-control[readonly], .form-control:disabled, .form-select:disabled {
  background-color: var(--kmb-surface-3);
  color: var(--kmb-ink-soft);
}
textarea.form-control { min-height: 5rem; }

/* .form-group is a Bootstrap 4 class and does nothing in Bootstrap 5, so the
   spacing many pages relied on had silently disappeared. Restore it. */
.form-group { margin-bottom: 1rem; }

.form-hint { font-size: .78rem; color: var(--kmb-ink-muted); margin-top: .25rem; }

/* Buttons ------------------------------------------------------------ */
.btn {
  --bs-btn-border-radius: var(--kmb-radius-sm);
  --bs-btn-font-weight: 500;
  --bs-btn-padding-y: .45rem;
  --bs-btn-padding-x: .9rem;
  font-size: .9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  --bs-btn-bg: var(--kmb-brand-600);
  --bs-btn-border-color: var(--kmb-brand-600);
  --bs-btn-hover-bg: var(--kmb-brand-700);
  --bs-btn-hover-border-color: var(--kmb-brand-700);
  --bs-btn-active-bg: var(--kmb-brand-800);
  --bs-btn-active-border-color: var(--kmb-brand-800);
  --bs-btn-disabled-bg: var(--kmb-brand-300);
  --bs-btn-disabled-border-color: var(--kmb-brand-300);
  box-shadow: var(--kmb-shadow-xs);
}
.btn-outline-primary {
  --bs-btn-color: var(--kmb-brand-700);
  --bs-btn-border-color: var(--kmb-brand-300);
  --bs-btn-hover-bg: var(--kmb-brand-600);
  --bs-btn-hover-border-color: var(--kmb-brand-600);
}

/* Loading state driven by assets/js/app.js */
.btn.is-loading { position: relative; pointer-events: none; opacity: .75; }
.btn.is-loading > :not(.btn-spinner) { visibility: hidden; }
.btn-spinner {
  position: absolute;
  width: 1rem; height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: kmb-spin .65s linear infinite;
}
@keyframes kmb-spin { to { transform: rotate(360deg); } }

/* Tables ------------------------------------------------------------- */
.table {
  --bs-table-bg: var(--kmb-surface);
  --bs-table-border-color: var(--kmb-border-soft);
  --bs-table-striped-bg: #fafbfe;
  --bs-table-hover-bg: var(--kmb-brand-50);
  margin-bottom: 0;
  font-size: .88rem;
}
.table > thead > tr > th {
  background: var(--kmb-surface-3);
  color: var(--kmb-ink-soft);
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
  border-bottom: 1px solid var(--kmb-border);
  vertical-align: middle;
}
.table > tbody > tr > td { vertical-align: middle; }
.table td.num, .table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The report tables are wide by nature. Give them their own scroll container
   with a rounded frame so the page body never scrolls sideways. */
.table-frame {
  background: var(--kmb-surface);
  border: 1px solid var(--kmb-border);
  border-radius: var(--kmb-radius);
  box-shadow: var(--kmb-shadow-sm);
  overflow: hidden;
}
.table-scroll {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}
.table-scroll > .table { min-width: 100%; }

/* Sticky header / total row inside a scrolling table */
.table-sticky > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--kmb-surface-3);
}
.table-sticky > tfoot > tr > th {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: var(--kmb-surface-3);
  border-top: 2px solid var(--kmb-border);
  font-variant-numeric: tabular-nums;
}

/* Row action buttons */
.row-actions { display: inline-flex; gap: .3rem; white-space: nowrap; }
.row-actions .btn {
  --bs-btn-padding-y: .25rem;
  --bs-btn-padding-x: .5rem;
  font-size: .8rem;
}

/* Badges ------------------------------------------------------------- */
.badge { font-weight: 500; letter-spacing: .01em; padding: .35em .6em; border-radius: 999px; }
.badge-soft-success { background: var(--kmb-success-bg); color: var(--kmb-success); }
.badge-soft-warning { background: var(--kmb-warning-bg); color: var(--kmb-warning); }
.badge-soft-danger  { background: var(--kmb-danger-bg);  color: var(--kmb-danger); }
.badge-soft-info    { background: var(--kmb-info-bg);    color: var(--kmb-info); }
.badge-soft-muted   { background: var(--kmb-surface-3);  color: var(--kmb-ink-soft); }

/* Alerts ------------------------------------------------------------- */
.alert { border: 1px solid transparent; border-radius: var(--kmb-radius); font-size: .9rem; }
.alert-danger  { background: var(--kmb-danger-bg);  border-color: #f6cdd3; color: var(--kmb-danger); }
.alert-success { background: var(--kmb-success-bg); border-color: #c3e8d2; color: var(--kmb-success); }
.alert-warning { background: var(--kmb-warning-bg); border-color: #f5dcb3; color: var(--kmb-warning); }
.alert-info    { background: var(--kmb-info-bg);    border-color: #bfe4ee; color: var(--kmb-info); }

/* Empty state -------------------------------------------------------- */
.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--kmb-surface);
  border: 1px dashed var(--kmb-border);
  border-radius: var(--kmb-radius);
  color: var(--kmb-ink-muted);
}
.empty-state__icon { font-size: 2.5rem; color: var(--kmb-brand-300); margin-bottom: .75rem; display: block; }

/* Modals ------------------------------------------------------------- */
.modal-content { border: 0; border-radius: var(--kmb-radius-lg); box-shadow: var(--kmb-shadow-lg); }
.modal-header {
  border-bottom: 1px solid var(--kmb-border-soft);
  padding: 1rem 1.25rem;
  background: var(--kmb-surface);
  border-radius: var(--kmb-radius-lg) var(--kmb-radius-lg) 0 0;
}
.modal-title { font-size: 1.02rem; }
.modal-footer { border-top: 1px solid var(--kmb-border-soft); padding: .85rem 1.25rem; }
.modal-body { padding: 1.25rem; }

/* Footer ------------------------------------------------------------- */
.app-footer {
  padding: 1rem 0;
  border-top: 1px solid var(--kmb-border);
  background: var(--kmb-surface);
  color: var(--kmb-ink-muted);
  font-size: .83rem;
}

/* Column chooser (expense report) ------------------------------------ */
.colvis-menu {
  min-width: 15rem;
  max-height: min(70vh, 26rem);
  overflow-y: auto;
}
.colvis-menu .dropdown-item {
  cursor: pointer;
  border-radius: 6px;
  font-size: .9rem;
  white-space: normal;
}
.colvis-menu .form-check-input { flex: 0 0 auto; margin-top: 0; }

/* Floating Messenger button ------------------------------------------ */
.messenger-button {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1040;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: #0084ff;
  color: #fff;
  font-size: .9rem;
  font-weight: 500;
  box-shadow: var(--kmb-shadow);
}
.messenger-button:hover { background: #0069cc; color: #fff; text-decoration: none; }

@media (max-width: 575.98px) {
  /* Shrink to a circle so it stops covering table content on phones. */
  .messenger-button { padding: .8rem; border-radius: 50%; }
  .messenger-button span { display: none; }
}

/* ------------------------------------------------- 5. Third-party polish */

/* Select2 - match the height and radius of .form-control */
.select2-container--default .select2-selection--single {
  height: calc(1.6em + 1rem + 2px);
  border-color: var(--kmb-border);
  border-radius: var(--kmb-radius-sm);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: calc(1.6em + 1rem);
  padding-left: .7rem;
  color: var(--kmb-ink);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(1.6em + 1rem);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--kmb-brand-400);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .14);
}
.select2-dropdown { border-color: var(--kmb-border); border-radius: var(--kmb-radius-sm); box-shadow: var(--kmb-shadow); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--kmb-brand-600); }
/* Inside a modal the dropdown must outrank the backdrop. */
.select2-container { z-index: 1080; }

/* DataTables */
div.dataTables_wrapper { padding: .75rem; }
div.dataTables_wrapper div.dataTables_filter input {
  border: 1px solid var(--kmb-border);
  border-radius: var(--kmb-radius-sm);
  padding: .35rem .6rem;
  margin-left: .4rem;
}
div.dataTables_wrapper div.dataTables_length select {
  border: 1px solid var(--kmb-border);
  border-radius: var(--kmb-radius-sm);
  padding: .3rem 1.4rem .3rem .5rem;
}
div.dataTables_wrapper div.dataTables_info,
div.dataTables_wrapper div.dataTables_paginate { font-size: .83rem; }
.page-link { border-radius: var(--kmb-radius-sm) !important; margin: 0 2px; border-color: var(--kmb-border); }
.page-item.active .page-link { background: var(--kmb-brand-600); border-color: var(--kmb-brand-600); }

/* jQuery UI autocomplete (withholding-tax payee lookup) */
.ui-autocomplete {
  z-index: 1085;
  max-height: 17rem;
  overflow-y: auto;
  font-family: var(--bs-font-sans-serif);
  font-size: .88rem;
  border: 1px solid var(--kmb-border);
  border-radius: var(--kmb-radius-sm);
  box-shadow: var(--kmb-shadow);
  padding: .25rem;
  background: var(--kmb-surface);
}
.ui-autocomplete .ui-menu-item-wrapper { padding: .4rem .6rem; border: 0; border-radius: 6px; }
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active { background: var(--kmb-brand-600); color: #fff; }
.ui-helper-hidden-accessible { display: none; }

/* jQuery UI datepicker (วันที่เอกสาร on the expense form).
   jQuery UI writes a low z-index inline on this element, so it was stacking
   underneath the Select2 control below it (.select2-container is 1080) and the
   calendar appeared to overlap ประเภทค่าใช้จ่าย. !important is required to beat
   the inline style. */
.ui-datepicker {
  z-index: 1090 !important;
  font-family: var(--bs-font-sans-serif);
  font-size: .88rem;
  padding: .35rem;
  border: 1px solid var(--kmb-border);
  border-radius: var(--kmb-radius-sm);
  box-shadow: var(--kmb-shadow);
  background: var(--kmb-surface);
}
.ui-datepicker .ui-datepicker-header {
  background: var(--kmb-surface-3);
  border: 0;
  border-radius: 6px;
  padding: .35rem 0;
  color: var(--kmb-ink);
  font-weight: 600;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next { cursor: pointer; }
.ui-datepicker td a,
.ui-datepicker td span {
  text-align: center;
  padding: .35rem;
  border-radius: 6px;
}
.ui-datepicker td a.ui-state-active,
.ui-datepicker td a.ui-state-highlight {
  background: var(--kmb-brand-600);
  color: #fff;
  border-color: var(--kmb-brand-600);
}

/* SweetAlert2 */
.swal2-popup { font-family: var(--bs-font-sans-serif); border-radius: var(--kmb-radius-lg); }
.swal2-title { font-size: 1.15rem; }
.swal2-html-container { font-size: .93rem; }
.swal2-styled.swal2-confirm { background: var(--kmb-brand-600) !important; border-radius: var(--kmb-radius-sm) !important; }
.swal2-styled.swal2-deny,
.swal2-styled.swal2-cancel { border-radius: var(--kmb-radius-sm) !important; }

/* Date range picker */
.daterangepicker {
  font-family: var(--bs-font-sans-serif);
  border-color: var(--kmb-border);
  border-radius: var(--kmb-radius);
  box-shadow: var(--kmb-shadow);
}
.daterangepicker td.active, .daterangepicker td.active:hover { background: var(--kmb-brand-600); }
.daterangepicker .ranges li.active { background: var(--kmb-brand-600); }

/* A .form-control acting as a date-range trigger */
.input-trigger { cursor: pointer; display: flex; align-items: center; gap: .5rem; }
.input-trigger i:first-child { color: var(--kmb-brand-600); }
.input-trigger span { flex: 1 1 auto; }

/* ------------------------------------------------------- 6. Utilities */

.text-brand { color: var(--kmb-brand-600) !important; }
.bg-brand-soft { background: var(--kmb-brand-50) !important; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.shadow-soft { box-shadow: var(--kmb-shadow-sm) !important; }
.rounded-xl { border-radius: var(--kmb-radius-lg) !important; }
.cursor-pointer { cursor: pointer; }
.min-w-0 { min-width: 0; }

/* ------------------------------------------------------- 7. Print */

@media print {
  .app-topbar, .app-sidebar, .app-footer, .messenger-button,
  .page-head__actions, .no-print { display: none !important; }
  .app-main { margin-left: 0 !important; padding-top: 0 !important; }
  body { background: #fff; }
  .table-frame, .card, .panel { border: 0; box-shadow: none; }
}

/* --------------------------------------------- 8. Reduced motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}