:root {
  /* ═══════════════════════════════════════════════════════════════
     COLOR PALETTE — the ONLY place a raw colour code is allowed.
     Everything else references these by name: var(--c-blue-800) etc.
     ═══════════════════════════════════════════════════════════════ */
  /* Neutrals */
  --c-white: #ffffff;
  --c-white-07: rgba(255, 255, 255, 0.07);
  --c-white-08: rgba(255, 255, 255, 0.08);
  --c-white-10: rgba(255, 255, 255, 0.1);
  --c-white-12: rgba(255, 255, 255, 0.12);
  --c-white-13: rgba(255, 255, 255, 0.13);
  --c-white-14: rgba(255, 255, 255, 0.14);
  --c-white-15: rgba(255, 255, 255, 0.15);
  --c-white-16: rgba(255, 255, 255, 0.16);
  --c-white-17: rgba(255, 255, 255, 0.17);
  --c-white-18: rgba(255, 255, 255, 0.18);
  --c-white-25: rgba(255, 255, 255, 0.25);
  --c-white-50: rgba(255, 255, 255, 0.5);
  --c-white-65: rgba(255, 255, 255, 0.65);
  --c-white-72: rgba(255, 255, 255, 0.72);
  --c-white-78: rgba(255, 255, 255, 0.78);
  --c-white-90: rgba(255, 255, 255, 0.9);
  --c-white-98: rgba(255, 255, 255, 0.98);
  --c-black-10: rgba(0, 0, 0, 0.1);
  --c-black-15: rgba(0, 0, 0, 0.15);
  --c-black-18: rgba(0, 0, 0, 0.18);
  --c-black-20: rgba(0, 0, 0, 0.2);
  --c-black-30: rgba(0, 0, 0, 0.3);

  /* Brand cyan (primary) */
  --c-cyan-500: #17736b;
  --c-cyan-700: #17736b;
  --c-cyan-800: #17736b;
  --c-cyan-glow-12: rgba(0, 120, 110, 0.12);

  /* Navy / blue */
  --c-navy-950: #004c46;
  --c-navy-800: #10605a;
  --c-navy-700: #1b625c;
  --c-navy-shadow: rgba(26, 74, 70, 0.28);
  --c-blue-900: #12665f;
  --c-blue-800: #17736b;
  --c-blue-700: #17736b;
  --c-blue-600: #11766e;
  --c-blue-500: #17736b;
  --c-blue-50: #e3efee;
  --c-blue-30: #f4fbff;
  --c-blue-glow-35: rgba(23, 115, 107, 0.35);
  --c-blue-bright-30: rgba(14, 153, 142, 0.3);

  /* Teal / aqua */
  --c-teal-900: #0f6e56;
  --c-teal-700: #0d776e;
  --c-teal-600: #17736b;
  --c-teal-400: #15867d;
  --c-teal-50: #e1f5ee;
  --c-aqua-500: #1abc9c;
  --c-aqua-pulse: rgba(26, 188, 156, 0.45);
  --c-aqua-pulse-0: rgba(26, 188, 156, 0);

  /* Red */
  --c-red-950: #7b0000;
  --c-red-700: #c0392b;
  --c-red-650: #e74c3c;
  --c-red-600: #e53e3e;
  --c-red-300: #fca5a5;
  --c-red-fade-18: rgba(239, 68, 68, 0.18);
  --c-red-fade-35: rgba(239, 68, 68, 0.35);
  --c-red-bright-50: rgba(231, 76, 60, 0.5);

  /* Amber / purple */
  --c-amber-800: #854f0b;
  --c-amber-50: #faeeda;
  --c-purple-700: #2e746e;
  --c-purple-50: #edfefd;

  /* Ink / slate / grey */
  --c-ink-850: #1a2e2c;
  --c-ink-800: #1a3b38;
  --c-slate-800: #274745;
  --c-slate-500: #7f8c8d;
  --c-slate-350: #517370;
  --c-slate-300: #577774;
  --c-slate-250: #598783;
  --c-grey-500: #888888;
  --c-grey-250: #e0eae9;
  --c-grey-150: #f0f5f5;
  --c-grey-130: #f1f8f7;
  --c-grey-100: #f7f9fb;

  /* ── extended palette (rest of app) ── */
  /* Blues / sky */
  --c-blue-750: #17736b;
  --c-blue-150: #1ac8b9;
  --c-blue-130: #49a9a1;
  --c-blue-45: #e3efee;
  --c-blue-43: #e3efee;
  --c-blue-20: #e3efee;
  --c-blue-15: #f5fbff;
  --c-sky-300: #23a398;
  --c-sky-100: #c2fffa;

  /* Blue-greys */
  --c-bluegrey-200: #598581;
  --c-bluegrey-150: #f0fdfa;
  --c-bluegrey-100: #000;
  --c-bluegrey-50: #efefef70;
  --c-bluegrey-row: #dbefee70;

  /* Teal / aqua (more) */
  --c-teal-750: #070707;
  --c-teal-650: #070707;
  --c-aqua-300: #2ee8c8;
  --c-aqua-fade-06: rgba(46, 232, 200, 0.06);

  /* Green (success) */
  --c-green-800: #0a6640;
  --c-green-200: #b6f0d4;
  --c-green-50: #edfdf5;

  /* Red (more) */
  --c-red-500: #e05c5c;
  --c-red-200: #f5b3b3;
  --c-red-50: #fdeaea;

  /* Ink / slate / grey (more) */
  --c-ink-900: #000000;
  --c-slate-600: #000000;
  --c-slate-400: #000000;
  --c-grey-300: #d6e0df;
  --c-grey-200: #e2e8f0;
  --c-grey-80: #fafbfc;

  /* Dark theme */
  --c-dark-900: #0d1716;
  --c-dark-850: #162221;
  --c-grey-600: #6e7681;
  --c-grey-450: #000000;
  --c-dark-shadow: rgba(13, 23, 22, 0.8);
  --c-ink-fade-65: rgba(10, 44, 41, 0.65);
  --c-navy-fade-55: rgba(11, 67, 62, 0.55);

  /* Brand glows / fades (more) */
  --c-cyan-glow-25: rgba(0, 120, 110, 0.25);
  --c-cyan-glow-35: rgba(0, 120, 110, 0.35);
  --c-cyan-fade-05: rgba(0, 100, 92, 0.05);
  --c-black-03: rgba(0, 0, 0, 0.03);

  /* ── Action button colour tokens (used by ALL pages) ── */
  /* Create */
  --vyo-create-bg: #17736b;
  --vyo-create-bg-hover: #17736b;
  --vyo-create-shadow: rgba(46, 125, 50, 0.28);
  --vyo-create-shadow-hover: rgba(46, 125, 50, 0.38);
  /* Edit */
  --vyo-edit-color: #4183c0;
  --vyo-edit-bg: #d3e9fc;
  --vyo-edit-border: #4183c0;
  /* Delete reuses existing --vyo-danger / --vyo-danger-bg / --vyo-danger-border */
  /* Filter */
  --vyo-filter-color: #0e7e6a;
  --vyo-filter-bg: #eaf8f4;
  --vyo-filter-border: #7ed4be;
  /* Clear */
  --vyo-clear-color: #c07d20;
  --vyo-clear-bg: #fef4e6;
  --vyo-clear-border: #f0c070;

  /* Brand colours */
  --vyo-primary: var(--c-cyan-700);
  /* ← change this ONE value to repaint all buttons, links, borders */
  --vyo-primary-light: var(--c-cyan-500);
  --vyo-primary-dark: var(--c-cyan-800);
  --vyo-primary-glow: var(--c-cyan-glow-12);

  /* ═══════════════════════════════════════════════════════════════
     NAVBAR CONTROL PANEL — the single source of truth.
     Change ONE value here and it updates the navbar on EVERY page.
     (navbar.css reads every value below via var(); no literals there.)
     ═══════════════════════════════════════════════════════════════ */

  /* Bar */
  --vyo-navbar-bg: linear-gradient(
    135deg,
    var(--c-blue-900) 0%,
    var(--c-blue-800) 60%,
    var(--c-blue-700) 100%
  );
  /* whole bar background */
  --vyo-navbar-height: 52px;
  /* bar height */
  --vyo-navbar-padding-x: 1.5rem;
  /* left/right padding */
  --vyo-navbar-shadow: 0 2px 12px var(--c-navy-shadow);
  --vyo-navbar-z: 1050;
  /* stacking order */
  --vyo-navbar-transition: 0.17s ease;
  /* hover speed across the bar */

  /* Top-level links (Home, Masters, Operations …) */
  --vyo-navbar-link: var(--c-white-78);
  /* link text colour */
  --vyo-navbar-link-hover: var(--c-white);
  /* link text on hover/active */
  --vyo-navbar-link-size: 13.5px;
  --vyo-navbar-link-pad: 6px 12px;
  --vyo-navbar-link-radius: 7px;
  --vyo-navbar-link-hover-bg: var(--c-white-10);
  /* hover pill */
  --vyo-navbar-link-active-bg: var(--c-white-18);
  /* active pill */
  --vyo-navbar-link-active-border: var(--c-white-25);

  /* Dropdown + mega panels */
  --vyo-navbar-dropdown-bg: var(--c-white);
  /* simple dropdown background */
  --vyo-navbar-dropdown-item: var(--c-teal-600);
  /* item text colour */
  --vyo-navbar-dropdown-hover: var(--c-blue-800);
  /* item hover background */
  --vyo-navbar-dropdown-radius: 10px;
  --vyo-navbar-dropdown-shadow: 0 10px 32px var(--c-black-18);
  --vyo-navbar-mega-bg: var(--c-white-98);
  /* mega items panel background */
  --vyo-navbar-mega-header: var(--c-blue-800);
  /* mega left-rail background */
  --vyo-navbar-mega-rail-w: 220px;
  /* mega left-rail width */
  --vyo-navbar-item-size: 12.5px;
  /* mega/dropdown item text size */
  --vyo-navbar-item-pad: 7px 16px;
  --vyo-navbar-overlay-hover: var(--c-white-10);
  /* rail item hover */
  --vyo-navbar-overlay-active: var(--c-white-16);
  /* rail item active */
  --vyo-navbar-accent: var(--c-white-90);
  /* active rail accent line */
  --vyo-navbar-mobile-bg: var(--c-teal-600);
  /* mobile collapsed menu background */

  /* Search + Logout buttons */
  --vyo-navbar-btn-color: var(--c-white-72);
  --vyo-navbar-btn-bg: var(--c-white-10);
  --vyo-navbar-btn-border: var(--c-white-14);
  --vyo-navbar-btn-hover-bg: var(--c-white-17);
  --vyo-navbar-btn-hover-border: var(--c-white-25);
  --vyo-navbar-logout-color: var(--c-white-65);
  --vyo-navbar-logout-bg: var(--c-white-08);
  --vyo-navbar-logout-border: var(--c-white-12);
  --vyo-navbar-logout-hover-color: var(--c-red-300);
  --vyo-navbar-logout-hover-bg: var(--c-red-fade-18);
  --vyo-navbar-logout-hover-border: var(--c-red-fade-35);

  /* Quick Access (waffle) panel */
  --vyo-wf-width: 275px;
  --vyo-wf-bg: var(--c-white);
  --vyo-wf-border: var(--c-grey-250);

  /* Page background */
  --vyo-bg: var(--c-bluegrey-50);
  /* ← body / page background */
  --vyo-page-bg: var(--c-bluegrey-50);
  /* ← inner .vyo-page tint */

  /* Borders */
  --vyo-border: var(--c-grey-300);
  --vyo-border-light: var(--c-grey-200);

  /* Text */
  --vyo-text-primary: var(--c-ink-900);
  --vyo-text-secondary: var(--c-slate-600);
  --vyo-text-muted: var(--c-slate-400);

  /* Status colours */
  --vyo-success-bg: var(--c-green-50);
  --vyo-success-text: var(--c-green-800);
  --vyo-success-border: var(--c-green-200);
  --vyo-danger: var(--c-red-500);
  --vyo-danger-bg: var(--c-red-50);
  --vyo-danger-border: var(--c-red-200);
  --vyo-dept-bg: var(--c-blue-45);
  --vyo-dept-text: var(--c-blue-750);
  --vyo-dept-border: var(--c-blue-150);

  /* Table */
  --vyo-row-hover: var(--c-bluegrey-150);
  --vyo-row-bg: var(--c-bluegrey-row);

  /* Shape */
  --vyo-radius: 8px;
  --vyo-radius-sm: 5px;
  --vyo-radius-lg: 12px;

  --vyo-font:
    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";

  /* Master Status Badge variables */
  --vyo-master-status-active-bg: #e8fff2;
  --vyo-master-status-active-text: #16a34a;
  --vyo-master-status-active-border: #4fd882;
  --vyo-master-status-inactive-bg: #fdecec;
  --vyo-master-status-inactive-text: #dc2626;
  --vyo-master-status-inactive-border: #ffaaaa;
}

/*
   § 2 · BASE / RESET
 */
body {
  background: var(--vyo-bg) !important;
  color: var(--vyo-text-primary);
  font-family:
    var(--vyo-font), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
  font-size: var(--vyo-font-size);
}

label {
  font-size: 12px;
  font-weight: 600;
  color: var(--vyo-text-secondary);
  margin-bottom: 4px;
  display: block;
}

@keyframes vyoFadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
   § 3 · BREADCRUMB
 */
.vyo-breadcrumb {
  background: var(--vyo-bg);
  border-bottom: 1px solid var(--vyo-border);
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.bc-item {
  font-size: 11.5px;
  color: var(--vyo-text-muted);
  cursor: pointer;
}

.bc-item:hover {
  color: var(--vyo-primary);
}

.bc-sep {
  font-size: 10px;
  color: var(--c-bluegrey-200);
}

.bc-cur {
  font-size: 11.5px;
  color: var(--vyo-primary);
  font-weight: 600;
}

/*
   § 4 · PAGE LAYOUT
 */
.vyo-page {
  /*   */
  min-height: calc(100vh - 100px);
  /* Match Supplier Creation spacing app-wide: container-fluid gutter
     (12px each side) + mb-5 bottom margin (48px). Applied globally so
     every list page has the same breathing room around page and table. */
  padding-left: 12px;
  padding-right: 12px;
  margin-bottom: 48px;
}

.vyo-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  animation: vyoFadeUp 0.3s ease both;
  padding-top: 0px;
  /* Match Supplier Creation: same 12px side gutter as .vyo-page so the
     filter bar lines up with the table below it. */
  padding-left: 12px;
  padding-right: 12px;
  background-color: #dbefee;
}

.vyo-page-title-wrap {
  border-left: 3.5px solid var(--vyo-primary);
  padding-left: 10px;
}

/* Pages already wrapped in .container-fluid (e.g. Supplier Creation) get
   their side gutter from Bootstrap; cancel the global .vyo-page/.vyo-page-
   header side padding there so spacing stays 12px, not doubled. */
.container-fluid > .vyo-page,
.container-fluid .vyo-page-header,
.container-fluid > .vyo-page-header {
  padding-left: 0;
  padding-right: 0;
}
.container-fluid > .vyo-page {
  margin-bottom: 0;
}

/* When the header sits INSIDE .vyo-page (some pages nest it), the parent
   already supplies the side gutter — so drop the header's own side padding
   to avoid a doubled indent. */
.vyo-page .vyo-page-header {
  padding-left: 0;
  padding-right: 0;
}

.vyo-page-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--vyo-text-primary);
  letter-spacing: -0.3px;
  line-height: 2.2;
  margin: 0;
}

/*
   § 5 · STAT CARDS
 */
.vyo-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
  animation: vyoFadeUp 0.3s ease 0.05s both;
}

.vyo-stat-card {
  background: white;
  border-radius: var(--vyo-radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: box-shadow 0.15s;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.vyo-stat-card:hover {
  box-shadow: 0 2px 12px var(--vyo-primary-glow);
}

.vyo-stat-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.si-total {
  background: var(--c-blue-43);
  color: var(--vyo-primary);
}

.si-read {
  background: var(--vyo-success-bg);
  color: var(--vyo-success-text);
}

.si-dept {
  background: var(--vyo-dept-bg);
  color: var(--vyo-dept-text);
}

/* ---------------------------------------------------------------------------
   CRM CARD ICONS — remove the green/blue tinted icon backgrounds so every
   stat/summary card icon uses the brand teal tint consistently (Issue #24).
   High specificity (html body) so it also wins over page-level inline
   <style> blocks that hard-coded green (var(--vyo-success-bg)) or the old
   blue dept tint. Semantic status PILLS (.skin-pill / .vyo-badge) are NOT
   affected — only the decorative stat-card icons.
--------------------------------------------------------------------------- */
html body .vyo-stat-icon.si-total,
html body .vyo-stat-icon.si-read,
html body .vyo-stat-icon.si-dept,
html body .vyo-stat-icon.si-biz,
html body .vyo-stat-icon.si-today,
html body .vyo-stat-icon.si-approved,
html body .vyo-stat-icon.si-pending {
  background: #e3efee !important;
  color: var(--vyo-primary, #17736b) !important;
}

.vyo-stat-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--vyo-text-primary);
  line-height: 1;
}

.vyo-stat-label {
  font-size: 11px;
  color: var(--vyo-text-muted);
  margin-top: 3px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/*
   § 6 · BUTTONS
 */

/* Primary create / save button — Green across all pages */
.vyo-create-btn {
  background: #2c948c;
  color: var(--c-white) !important;
  border: none;
  padding: 5px 10px;
  border-radius: var(--vyo-radius-sm);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition:
    background 0.15s,
    box-shadow 0.15s,
    transform 0.1s;
  letter-spacing: 0.2px;
  text-decoration: none;
}

.vyo-create-btn:hover {
  background: var(--vyo-create-bg-hover);
  box-shadow: 0 4px 14px var(--vyo-create-shadow-hover);
  transform: translateY(-1px);
  color: var(--c-white) !important;
}

.vyo-create-btn i {
  font-size: 14px;
}

/* Icon-only small button */
.vyo-icon-btn {
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--vyo-border);
  border-radius: var(--vyo-radius-sm);
  background: var(--c-grey-80);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--vyo-primary);
  font-size: 13px;
  transition: all 0.15s;
  text-decoration: none;
}

.vyo-icon-btn:hover {
  background: var(--vyo-primary-glow);
  border-color: var(--vyo-primary-light);
  color: var(--vyo-primary);
}

/* Filter toolbar button — Teal */
.vyo-icon-btn-search {
  width: 40%;
  height: 26px;
  border: 1px solid #17736b !important;
  border-radius: var(--vyo-radius-sm);
  background: #b4f0eb !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #17736b;
  font-size: 13px;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s,
    transform 0.1s;
  text-decoration: none;
}

.vyo-icon-btn-search:hover {
  background: #17736b !important;
  border-color: #17736b !important;
  color: var(--c-white) !important;
  transform: translateY(-1px) !important;
}

/* Clear / Reset toolbar button — Amber */
.vyo-icon-btn-reset {
  width: 40%;
  height: 26px;
  border: 1px solid #d1312c !important;
  border-radius: var(--vyo-radius-sm);
  background: #f5d3d2 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #d1312c;
  font-size: 13px;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s,
    transform 0.1s;
  text-decoration: none;
}

.vyo-icon-btn-reset:hover {
  background: #d1312c !important;
  border-color: #d1312c !important;
  color: var(--c-white) !important;
  transform: translateY(-1px) !important;
}

#clearFilterBtn i {
  color: #d1312c;
}

/* ── Table row action buttons — icon style, ALL pages ── */
.action-block {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.editBtn::after,
.del-button::after {
  content: none !important;
  display: none !important;
}

.editBtn .edit-svg,
.del-button svg,
.svgdelIcon,
.bin-top,
.bin-bottom {
  display: none !important;
}

/* Shared icon-button base */
.editBtn,
.del-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 7px !important;
  font-size: 10px !important;
  font-family: inherit !important;
  line-height: 1 !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  position: static !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s,
    transform 0.1s !important;
}

.editBtn:hover,
.del-button:hover {
  transform: translateY(-1px) !important;
}

/* Delete — Red */
.del-button {
  background: var(--vyo-danger-bg) !important;
  color: var(--vyo-danger) !important;
  border: 1.5px solid var(--vyo-danger-border) !important;
}

/* Action wrapper used by renderTable() */
.action-btns-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

/* Modal footer save button — Green, matches Create button */
.modal-footer .btn-primary,
.modal-footer .btn-primary:hover,
.modal-footer .btn-primary:focus,
.modal-footer .btn-primary:active,
.modal-footer .btn-primary:focus-visible {
  transition:
    background 0.15s,
    transform 0.1s !important;
  transform: none !important;
  box-shadow: 0 2px 8px var(--vyo-create-shadow) !important;
  background-image: none !important;
  background-color: var(--vyo-create-bg) !important;
  border-color: var(--vyo-create-bg) !important;
  color: var(--c-white) !important;
  filter: none !important;
}

.modal-footer .btn-primary:hover {
  background-color: var(--vyo-create-bg-hover) !important;
  border-color: var(--vyo-create-bg-hover) !important;
  transform: translateY(-1px) !important;
}

/* Modal header — branded primary bar */
.modal-header {
  background: var(--vyo-primary) !important;
  border-radius: var(--vyo-radius-lg) var(--vyo-radius-lg) 0 0 !important;
  border-bottom: none !important;
  padding: 14px 20px !important;
}

.modal-title {
  color: var(--c-white) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

.modal-header .btn-close {
  filter: invert(1) brightness(2);
}

/*
   § 7 · FILTER BAR
 */
.vyo-filterbar {
  background: var(--vyo-page-bg);
  border-radius: 10px;
  padding: 11px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.vyo-fl {
  font-size: 12px;
  color: var(--vyo-text-secondary);
  font-weight: 600;
  white-space: nowrap;
}

.vyo-filter-select {
  border: 1.5px solid var(--vyo-border);
  border-radius: var(--vyo-radius-sm);
  padding: 6px 12px;
  font-size: 12px;
  color: var(--vyo-text-primary);
  background: var(--c-grey-80);
  width: 235px;
  outline: none;
  height: 32px;
}

.vyo-filter-select:focus {
  border-color: var(--vyo-primary-light);
  box-shadow: 0 0 0 3px var(--vyo-primary-glow);
}

/*
   § 8 · REPORT FILTER CARD
 */
.vyo-report-filters-card {
  background: white;
  border: 1px solid var(--vyo-border);
  border-radius: var(--vyo-radius-lg);
  padding: 12px 15px;
  margin-bottom: 15px;
  box-shadow: 0 1px 6px var(--c-black-03);
  overflow: visible !important;
  position: relative;
  z-index: 10;
}

.vyo-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  align-items: flex-end;
}

.vyo-filter-field-wrap {
  display: flex;
  flex-direction: column;
}

.vyo-filter-field-wrap label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--vyo-text-secondary);
  margin-bottom: 4px;
}

.vyo-report-input {
  border: 1.5px solid var(--vyo-border);
  border-radius: var(--vyo-radius-sm);
  padding: 6px 12px;
  font-size: 12px;
  color: var(--vyo-text-primary);
  background: var(--c-grey-80);
  height: 26px;
  outline: none;
  width: 100%;
  transition: all 0.15s;
  box-sizing: border-box;
}

.vyo-report-input:focus {
  border-color: var(--vyo-primary-light);
  box-shadow: 0 0 0 3px var(--vyo-primary-glow);
  background: var(--c-white);
}

select.vyo-report-input {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--c-grey-80);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238fa4b2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

select.vyo-report-input option {
  background-color: var(--c-white);
  color: var(--vyo-text-primary);
  padding: 8px;
}

.vyo-filter-actions-block {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding-bottom: 1px;
}

/*
   § 9 · CARD & TABLE WRAPPER
 */
.vyo-card {
  background: var(--c-white);
  border: 1px solid var(--vyo-border);
  border-radius: var(--vyo-radius-lg);
  box-shadow: 0 1px 8px var(--c-cyan-fade-05);
  animation: vyoFadeUp 0.3s ease 0.1s both;
  overflow: hidden;
}

.vyo-table-wrap {
  overflow-x: auto;
}

/*
   § 10 · DATATABLE STYLES
 */
#datasTable,
table.dataTable {
  width: 100% !important;
  border-collapse: collapse !important;
}

#datasTable thead th,
table.dataTable thead th {
  padding: 4px 8px !important;
  text-align: left !important;
  color: black !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.7px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  background: #f0f0f0 !important;
  border: none !important;
  border-bottom: 1.5px solid var(--vyo-border) !important;
}

#datasTable thead th:hover,
table.dataTable thead th:hover {
  color: var(--vyo-primary) !important;
}

#datasTable tbody tr,
table.dataTable tbody tr {
  border-bottom: 1px solid var(--vyo-border-light) !important;
  background-color: #f0f0f0 !important;
}

#datasTable tbody tr:hover,
table.dataTable tbody tr:hover {
  background: var(--vyo-row-hover) !important;
  box-shadow: inset 3px 0 0 var(--vyo-primary-light) !important;
}

#datasTable tbody td,
table.dataTable tbody td {
  padding: 6px 8px !important;
  font-size: 12px !important;
  color: var(--vyo-text-primary) !important;
  vertical-align: middle !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--vyo-border-light) !important;
}

table.dataTable.stripe > tbody > tr.odd > *,
table.dataTable.display > tbody > tr.odd > *,
table.dataTable.stripe > tbody > tr.even > *,
table.dataTable.display > tbody > tr.even > * {
  box-shadow: none !important;
  background-color: var(--c-white) !important;
}

/* Hide DataTable sort arrows */
table.dataTable thead .sorting::before,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_desc::after,
table.dataTable thead .sorting_asc_disabled::before,
table.dataTable thead .sorting_asc_disabled::after,
table.dataTable thead .sorting_desc_disabled::before,
table.dataTable thead .sorting_desc_disabled::after {
  display: none !important;
  content: "" !important;
}

/*
   § 11 · DATATABLE CONTROLS (length / filter / pagination / export)
 */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  font-size: 12px !important;
  color: var(--vyo-text-muted) !important;
  padding: 5px 15px !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1.5px solid var(--vyo-border) !important;
  border-radius: var(--vyo-radius-sm) !important;
  padding: 5px 8px !important;
  font-size: 12px !important;
  background: var(--c-grey-80) !important;
  outline: none !important;
}

/* --------------------------------------------------------------------------
   SHOW ENTITIES ("Show N entries") LENGTH MENU — global compact sizing.
   The navbar wraps every .dataTables_length <select> in a plain Select2
   (tealLengthMenu) but Select2's default width resolves large, which made
   the "Show Entities" dropdown look oversized on HRM/CRM pages that did not
   carry their own override (master pages did). These rules size the length
   menu consistently everywhere — normal font-weight, compact width/height —
   so every module matches without per-page CSS.
--------------------------------------------------------------------------- */
html body .dataTables_length .select2-container,
html body .vyo-dt-length-wrap .select2-container {
  width: 58.4px !important;
  min-width: 58.4px !important;
  margin: 0 4px;
  vertical-align: middle;
  text-align: left;
}
html body .vyo-dt-length-wrap .select2-container--default .select2-selection--single,
html body .dataTables_length .select2-container--default .select2-selection--single {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 22px 0 8px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 28px !important;
  display: flex;
  align-items: center;
}
/* Fallback before Select2 wraps the native <select> */
html body .dataTables_length select,
html body .dataTables_length .form-select {
  width: 62px !important;
  min-width: 0 !important;
  padding: 5px 8px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}
html body .dataTables_length .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 !important;
  line-height: 28px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}
html body .dataTables_length .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 28px !important;
}
/* Tight option list for the length menu dropdown only */
html body .select2-container--default .dt-length-dropdown .select2-results__option {
  padding: 4px 8px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 5px 12px !important;
  border: 1.5px solid var(--vyo-border) !important;
  border-radius: var(--vyo-radius-sm) !important;
  font-size: 12px !important;
  background: var(--c-white) !important;
  color: var(--vyo-text-secondary) !important;
  font-weight: 500 !important;
  margin: 0 2px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--vyo-primary) !important;
  color: var(--c-white) !important;
  border-color: var(--vyo-primary) !important;
  font-weight: 700 !important;
}

.dt-buttons .dt-button,
div.dt-buttons > button.dt-button {
  padding: 7px 13px !important;
  border: 1.5px solid var(--vyo-border) !important;
  border-radius: var(--vyo-radius-sm) !important;
  background: var(--c-grey-80) !important;
  font-size: 12px !important;
  color: var(--vyo-text-secondary) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

.dt-buttons .dt-button:hover,
div.dt-buttons > button.dt-button:hover {
  background: var(--c-blue-20) !important;
  border-color: var(--vyo-primary-light) !important;
  color: var(--vyo-primary) !important;
}

/* Focus / active state for the Export & Column Visibility (and any other)
   DataTables buttons. Without this the browser / Bootstrap default shows a
   BLUE focus ring when the button is clicked; override it with the teal
   navbar colour (--vyo-primary => #17736b) so it matches the theme. */
.dt-buttons .dt-button:focus,
.dt-buttons .dt-button:focus-visible,
.dt-buttons .dt-button:active,
.dt-buttons .dt-button.active,
div.dt-buttons > button.dt-button:focus,
div.dt-buttons > button.dt-button:focus-visible,
div.dt-buttons > button.dt-button:active {
  outline: none !important;
  border-color: var(--vyo-primary, #17736b) !important;
  color: var(--vyo-primary, #17736b) !important;
  box-shadow: 0 0 0 0.2rem rgba(15, 115, 107, 0.25) !important;
}

.vyo-dt-controls {
  /* display: flex !important; */
  align-items: center !important;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0px 5px 0px 5px;
}

.vyo-dt-controls .dt-buttons,
#datasTable_wrapper .dt-buttons {
  display: flex !important;
  align-items: center !important;
  margin: 5px !important;
}

#datasTable_wrapper .dataTables_length {
  display: flex !important;
  align-items: center !important;
  margin-left: 0 !important;
  padding-top: 10px !important;
}

/*
   § 12 · FORM INPUTS
 */
.vyo-input {
  border: 1.5px solid var(--vyo-border) !important;
  border-radius: var(--vyo-radius-sm) !important;
  padding: 7px 12px !important;
  font-size: 13px !important;
  background: var(--c-grey-80) !important;
  transition: all 0.15s !important;
  width: 100%;
}

.vyo-input:focus {
  border-color: var(--vyo-primary-light) !important;
  background: var(--c-white) !important;
  box-shadow: 0 0 0 3px var(--vyo-primary-glow) !important;
  outline: none !important;
}

/*
   § 13 · MODAL
 */
.modal-content {
  border-radius: var(--vyo-radius-lg) !important;
  border: none !important;
  box-shadow: 0 10px 40px var(--c-black-15) !important;
}

/* modal-header, modal-title, btn-close are defined in § 6 · BUTTONS above */

/*
   § 14 · SELECT2
 */
.select2-container--default .select2-selection--single {
  border-radius: 5px !important;
  border: 1px solid var(--c-blue-130) !important;
  height: 32px;
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 0px !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 30px !important;
  padding-left: 12px !important;
  color: var(--c-teal-650) !important;
  font-weight: 400 !important;
}

/*
   § 15 · USER LINK (clickable name in tables)
 */
.vyo-user-link {
  color: #17736b;
  text-decoration: underline;
  text-decoration-color: #17736b;
  font-weight: 500;
}

.vyo-user-link:hover {
  text-decoration: underline;
  text-decoration-color: #17736b;
  color: #17736b;
}

/*
   § 16 · DARK THEME OVERRIDES
 */
body.dark-theme {
  --vyo-bg: var(--c-dark-900);
  --vyo-page-bg: var(--c-dark-shadow);
  --vyo-border: var(--c-white-12);
  --vyo-border-light: var(--c-white-07);
  --vyo-text-primary: var(--c-bluegrey-100);
  --vyo-text-secondary: var(--c-grey-450);
  --vyo-text-muted: var(--c-grey-600);
  --vyo-row-hover: var(--c-aqua-fade-06);
}

body.dark-theme .vyo-report-filters-card {
  background: var(--c-navy-fade-55) !important;
  border-color: var(--c-white-12) !important;
}

body.dark-theme .vyo-filter-field-wrap label {
  color: var(--c-sky-100) !important;
}

body.dark-theme .vyo-report-input,
body.dark-theme select.vyo-report-input {
  background-color: var(--c-ink-fade-65) !important;
  color: var(--c-blue-15) !important;
  border-color: var(--c-white-18) !important;
}

body.dark-theme .vyo-card {
  background: var(--c-dark-850) !important;
  border-color: var(--c-white-10) !important;
}

body.dark-theme table.dataTable tbody tr {
  background-color: var(--c-dark-850) !important;
}

body.dark-theme table.dataTable tbody td {
  color: var(--vyo-text-primary) !important;
  border-color: var(--c-white-07) !important;
}

body.dark-theme table.dataTable thead th {
  background: var(--c-dark-900) !important;
  color: var(--c-aqua-300) !important;
  border-color: var(--c-white-10) !important;
}

/*
   § 17 · RESPONSIVE
 */
@media (max-width: 768px) {
  .vyo-stats {
    grid-template-columns: 1fr;
  }

  .vyo-page-header {
    flex-direction: column;
    gap: 12px;
  }

  .vyo-filterbar {
    flex-wrap: wrap;
  }

  .vyo-filter-grid {
    grid-template-columns: 1fr 1fr;
  }

  .action-block {
    flex-direction: column;
    gap: 4px;
  }
}

@media (max-width: 480px) {
  .vyo-filter-grid {
    grid-template-columns: 1fr;
  }
}

/* for calendar date range picker */
/* ═══════════════════════════════════════════════════════════════════════════
   VYO CRM Premium Theme Matching for DateRangePicker (Enhanced Background)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Main Dropdown Container Theme Match */
body .daterangepicker {
  border-radius: var(--vyo-radius-lg) !important;
  border: 1.5px solid #4b8e89 !important;
  box-shadow:
    0 14px 40px rgba(15, 46, 43, 0.25),
    0 2px 8px rgba(15, 46, 43, 0.12) !important;
  font-family: var(--vyo-font) !important;
}

/* Arrow indicators */
body .daterangepicker:after {
  border-bottom-color: var(--vyo-card-bg, #ffffff) !important;
}

body .daterangepicker:before {
  border-bottom-color: var(--vyo-border) !important;
}

/* NEW: Beautiful soft tint background specifically for the calendar grids */
body .daterangepicker .calendar-table {
  background-color: #f4f7fc !important;
  /* Premium soft blue-gray tint matching the system theme */
  border: 1px solid var(--vyo-border-light) !important;
  border-radius: var(--vyo-radius) !important;
  padding: 8px !important;
}

/* Left Sidebar Presets Panel Styling */
body .daterangepicker .ranges li {
  font-size: 12px !important;
  color: var(--vyo-text-secondary) !important;
  transition: all 0.12s ease;
  border-radius: var(--vyo-radius-sm);
  margin: 4px 6px;
}

body .daterangepicker .ranges li:hover {
  background: linear-gradient(180deg, #e6f6f3, #cdeae5) !important;
  color: #0d4a44 !important;
}

body .daterangepicker .ranges li.active {
  background-color: var(--vyo-primary) !important;
  color: #ffffff !important;
}

/* When the active preset (e.g. "Today") is hovered, match the same dark-green
   hover text/background as the other options instead of keeping the white
   active text color, which is unreadable/inconsistent on hover. */
body .daterangepicker .ranges li.active:hover {
  background: linear-gradient(180deg, #e6f6f3, #cdeae5) !important;
  color: #0d4a44 !important;
}

/* Calendar Headers & Month Controls */
body .daterangepicker .calendar-table th,
body .daterangepicker th.month {
  color: var(--vyo-dept-text) !important;
  font-weight: 700 !important;
}

body .daterangepicker .calendar-table th.prev span,
body .daterangepicker .calendar-table th.next span {
  border-color: var(--vyo-text-secondary) !important;
}

body .daterangepicker .calendar-table th.prev:hover,
body .daterangepicker .calendar-table th.next:hover {
  background-color: var(--vyo-primary-glow) !important;
  border-radius: var(--vyo-radius-sm);
}

/* Clear transparent fallback for unselected dates so the new background shows cleanly */
body .daterangepicker td.available {
  background-color: transparent !important;
  color: var(--vyo-text-primary) !important;
}

body .daterangepicker td.available:hover {
  background-color: var(--vyo-primary) !important;
  color: #ffffff !important;
  border-radius: var(--vyo-radius-sm) !important;
}

/* Dates from adjacent months */
body .daterangepicker td.off,
body .daterangepicker td.off.in-range {
  background-color: transparent !important;
  color: var(--vyo-text-muted) !important;
  opacity: 0.5;
}

/* Highlighting Selected Ranges & Active Endpoints */
body .daterangepicker td.in-range {
  background-color: rgba(0, 120, 110, 0.12) !important;
  /* Slightly clearer range matching image_09316c.png colors */
  color: var(--vyo-primary) !important;
  border-radius: 0 !important;
}

body .daterangepicker td.active,
body .daterangepicker td.active:hover {
  background-color: var(--vyo-primary) !important;
  color: #ffffff !important;
  border-radius: var(--vyo-radius-sm) !important;
}

/* Custom dropdown selects for Month & Year inside header fields */
body .daterangepicker select.monthselect,
body .daterangepicker select.yearselect {
  border: 1px solid var(--vyo-border) !important;
  border-radius: var(--vyo-radius-sm) !important;
  color: var(--vyo-text-primary) !important;
  font-size: 12px !important;
  padding: 2px !important;
  outline: none !important;
  background-color: #ffffff !important;
}

/* Footer Bottom Strip Actions Block Formatting */
body .daterangepicker .drp-buttons {
  border-top: 1px solid var(--vyo-border) !important;
  background-color: #fafbfc !important;
}

body .daterangepicker .drp-selected {
  color: var(--vyo-text-secondary) !important;
  font-weight: 500 !important;
}

body .daterangepicker .drp-buttons .btn-primary,
body .daterangepicker .drp-buttons .applyBtn {
  background-color: var(--vyo-primary) !important;
  border-color: var(--vyo-primary) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: var(--vyo-radius-sm) !important;
  padding: 5px 14px !important;
  transition: background-color 0.15s ease;
}

body .daterangepicker .drp-buttons .btn-primary:hover,
body .daterangepicker .drp-buttons .applyBtn:hover {
  background-color: #17736b !important;
}

body .daterangepicker .drp-buttons .btn-default,
body .daterangepicker .drp-buttons .cancelBtn {
  background-color: #eef6f5 !important;
  color: var(--vyo-text-secondary) !important;
  border: 1px solid var(--vyo-border) !important;
  font-weight: 600 !important;
  border-radius: var(--vyo-radius-sm) !important;
  padding: 5px 14px !important;
}

body .daterangepicker .drp-buttons .cancelBtn:hover {
  background-color: #e2e8f0 !important;
  color: var(--vyo-text-primary) !important;
}

/* ── DataTables collections (Export / Column visibility) — no page dimming ── */
/* Keep the overlay element (so clicking outside still closes the menu) but
   remove the dark tint so the dropdown shows normally over the page. */
div.dt-button-background,
.dtb-collection-background {
  background: transparent !important;
  background-color: transparent !important;
  opacity: 1 !important;
}

/* Clean, professional dropdown panel for the collection menus */
div.dt-button-collection,
.dt-button-collection {
  background: #ffffff !important;
  border: 1px solid #e3efee !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18) !important;
  padding: 6px !important;
}

div.dt-button-collection .dt-button,
.dt-button-collection .dt-button {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 7px !important;
  margin: 1px 0 !important;
  padding: 7px 12px !important;
  font-size: 12.5px !important;
  color: var(--vyo-text-secondary, #35514f) !important;
  box-shadow: none !important;
}

div.dt-button-collection .dt-button:hover,
.dt-button-collection .dt-button:hover {
  background: linear-gradient(180deg, #e6f6f3, #cdeae5) !important;
  color: #0d4a44 !important;
  border: none !important;
}

/* Focus / active state inside the Export / Column Visibility dropdown so the
   clicked item shows the teal navbar colour instead of the default blue. */
div.dt-button-collection .dt-button:focus,
div.dt-button-collection .dt-button:focus-visible,
div.dt-button-collection .dt-button:active,
.dt-button-collection .dt-button:focus,
.dt-button-collection .dt-button:focus-visible,
.dt-button-collection .dt-button:active {
  outline: none !important;
  background: linear-gradient(180deg, #e6f6f3, #cdeae5) !important;
  color: #0d4a44 !important;
  border: none !important;
  box-shadow: 0 0 0 0.2rem rgba(15, 115, 107, 0.25) !important;
}

div.dt-button-collection .dt-button.dt-button-active,
.dt-button-collection .dt-button.active {
  background: linear-gradient(180deg, #e6f6f3, #cdeae5) !important;
}

.text-muted {
  --bs-text-opacity: 1;
  color: #000000 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  cursor: default;
  color: #000 !important;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
}

/* ================================================================
   CALENDAR SLIDE-IN PANEL — SHARED DRAWER STYLES
   ================================================================ */

/* Outer layout wrapper — enables shrink behaviour */
.app-content-flex-row {
  display: flex;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  transition: gap 0.35s ease;
}

/* Page main areas shrink when panel is open */
.dashboard-workspace-wrapper,
.vyo-page,
.saa-main-content {
  transition:
    margin-right 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* @media (min-width: 992px) {
  body.cal-panel-open .dashboard-workspace-wrapper,
  body.cal-panel-open .vyo-page,
  body.cal-panel-open .saa-main-content {
    margin-right: 280px !important;
    width: auto !important;
    max-width: none !important;
  }
} */

/* ── Calendar Panel Shell ── */
.cal-side-panel {
  position: fixed;
  top: 56px;
  right: 0;
  width: 280px;
  height: calc(100vh - 56px);
  background: #ffffff;
  border-left: 1px solid #e3efee;
  border-radius: 12px 0 0 12px;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 9000;
}

/* Open state */
.cal-side-panel.open {
  transform: translateX(0);
}

/* Inner scroll container */
.cal-panel-inner {
  width: 280px;
  /* fixed — clips during slide-in */
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (max-width: 991.98px) {
  .cal-side-panel {
    width: 100vw !important;
    max-width: 100% !important;
    border-radius: 0 !important;
  }

  .cal-panel-inner {
    width: 100% !important;
  }
}

/* ── Header Banner ── */
.cal-panel-header {
  background: #17736b;
  padding: 14px 34px 12px 14px;
  border-radius: 12px 0 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  position: relative;
}

.cal-header-left .cal-day-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 2px;
}

.cal-header-left .cal-date-big {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.15;
  white-space: nowrap;
}

.cal-header-left .cal-year-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 1px;
}

.cal-header-stats {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.cal-stat-badge {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 6px 8px;
  text-align: center;
  min-width: 48px;
}

.cal-stat-badge .stat-num {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}

.cal-stat-badge .stat-lbl {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 2px;
  white-space: nowrap;
}

/* Close button */
.cal-close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  z-index: 2;
}

.cal-close-btn:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* ── Filter Bar ── */
.cal-filter-bar {
  padding: 8px 14px;
  border-bottom: 1px solid #e3efee;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.cal-select {
  flex: 1;
  min-width: 0;
  border: 1.5px solid #e3efee;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 11.5px;
  color: #0f2e2b;
  background: #fafbfc;
  outline: none;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-filter-icon-btn {
  width: 26px;
  height: 26px;
  border: 1.5px solid #e3efee;
  border-radius: 6px;
  background: #fafbfc;
  color: #17736b;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
}

.cal-filter-icon-btn:hover {
  background: #e3efee;
  border-color: #17736b;
}

/* ── Mini Calendar ── */
.cal-month-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px 3px;
  flex-shrink: 0;
}

.cal-month-nav .month-label {
  font-size: 13px;
  font-weight: 600;
  color: #0f2e2b;
}

.cal-nav-btn {
  width: 24px;
  height: 24px;
  border: 1px solid #e3efee;
  border-radius: 5px;
  background: #fafbfc;
  color: #35514f;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.cal-nav-btn:hover {
  background: #e3efee;
  color: #17736b;
}

.cal-grid {
  padding: 0 14px 6px;
  flex-shrink: 0;
}

.cal-day-headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  margin-bottom: 2px;
}

.cal-day-headers span {
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  color: #4c6e6b;
  padding: 1px 0;
}

.cal-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.cal-day-cell {
  aspect-ratio: 1;
  max-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  color: #0f2e2b;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: background 0.12s;
}

.cal-day-cell:hover:not(.other-month):not(.today-cell) {
  background: #e3efee;
  color: #17736b;
}

.cal-day-cell.other-month {
  color: #588682;
  cursor: default;
}

.cal-day-cell.other-month:hover {
  background: transparent;
}

.cal-day-cell.today-cell {
  background: #17736b;
  color: #ffffff;
  font-weight: 700;
}

.cal-day-cell.has-tasks::after {
  content: "";
  position: absolute;
  bottom: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f97316;
}

.cal-day-cell.today-cell.has-tasks::after {
  background: #ffedd5;
}

.cal-day-cell.selected:not(.today-cell) {
  background: #17736b;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(23, 115, 107, 0.4);
}

/* ── Task List Area ── */
.cal-task-area {
  flex: 1;
  min-height: 0;
  padding: 6px 14px 12px;
  border-top: 1px solid #e3efee;
  overflow-y: auto;
}

.cal-task-area-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #4c6e6b;
  margin-bottom: 6px;
}

.cal-task-empty {
  text-align: center;
  padding: 24px 0;
  color: #4c6e6b;
  font-size: 12px;
}

.cal-task-empty i {
  font-size: 28px;
  margin-bottom: 8px;
  display: block;
  color: #588682;
}

.cal-task-item {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e3efee;
  background: #fafbfc;
  margin-bottom: 7px;
  transition:
    box-shadow 0.12s,
    transform 0.12s;
  cursor: pointer;
}

.cal-task-item:hover {
  box-shadow: 0 4px 12px rgba(0, 120, 110, 0.1);
  transform: translateY(-1px);
}

.cal-task-top {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.cal-task-item.open .cal-task-top {
  margin-bottom: 6px;
}

.cal-task-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cal-task-title {
  flex: 1;
  font-size: 12.5px;
  font-weight: 600;
  color: #0f2e2b;
}

.cal-task-chevron {
  font-size: 10px;
  color: #4c6e6b;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.cal-task-item.open .cal-task-chevron {
  transform: rotate(180deg);
}

.cal-task-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease;
}

.cal-task-item.open .cal-task-collapse {
  grid-template-rows: 1fr;
}

.cal-task-collapse > * {
  overflow: hidden;
}

.cal-task-details {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 10.5px;
  color: #4c6e6b;
}

.cal-task-detail-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cal-task-bottom {
  display: flex;
  align-items: center;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed #e3efee;
}

.cal-reminder-btn {
  background: none;
  border: none;
  color: #4c6e6b;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 11px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition:
    color 0.15s,
    background-color 0.15s;
}

.cal-reminder-btn:hover {
  color: #17736b;
  background-color: rgba(23, 115, 107, 0.08);
}

/* ── Calendar icon toggle btn in header ── */
#saaCalendarWrap {
  position: fixed;
  top: 2px;
  right: 40px;
  z-index: 9700;
}

#calendarToggleBtn {
  position: relative;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(19, 86, 80, 0.14);
  color: #17736b;
  font-size: 15px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

#calendarToggleBtn:hover {
  background: #eefcfb;
}

#calendarToggleBtn.cal-active {
  background: rgba(23, 115, 107, 0.12) !important;
  border-color: #17736b !important;
  color: #17736b !important;
}

/* Responsive grid overrides when calendar is open */
/* body.cal-panel-open .top-cards-strip {
  display: flex !important;
}
body.cal-panel-open .vyo-micro-spark-grid {
  grid-template-columns: repeat(4, 1fr) !important;
}
body.cal-panel-open .charts-2-column-grid {
  grid-template-columns: repeat(2, 1fr) !important;
} */

.form-select {
  font-size: 12px;
}

.form-control {
  font-size: 12px;
}

.card .card-header h6 {
  font-size: 14px;
}

/* Global responsiveness rules for DataTables and wide tables */
.dataTables_wrapper,
.table-responsive,
div.dataTables_wrapper div.dataTables_processing {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Hide the DataTables built-in "processing" indicator (the three animated
   teal dots shown in the middle of the table during ajax loads). The app
   already shows the brand logo preloader on page load, so this second
   loader is redundant and was appearing as a stray "three dots" loader. */
div.dataTables_wrapper div.dataTables_processing,
div.dataTables_processing {
  display: none !important;
}

/* Ensure layout adjustments when inside small screens */
@media (max-width: 991.98px) {
  .container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  /* Keep global page/header gutter in step with container-fluid (10px). */
  .vyo-page,
  .vyo-page-header {
    padding-left: 10px;
    padding-right: 10px;
  }
  .container-fluid > .vyo-page,
  .container-fluid .vyo-page-header,
  .container-fluid > .vyo-page-header {
    padding-left: 0;
    padding-right: 0;
  }
  .vyo-page .vyo-page-header {
    padding-left: 0;
    padding-right: 0;
  }

  /* Shrink padding on forms and panels */
  .vyo-report-filters-card {
    padding: 10px !important;
  }
}

.select2-container--default
  .select2-results__option--highlighted.select2-results__option--selectable {
  background: linear-gradient(180deg, #e6f6f3, #cdeae5) !important;
  color: #0d4a44 !important;
}

.select2-results__option--selectable {
  font-size: 12px;
}

.btn-primary {
  background-color: #17736b !important;
  border-color: #17736b !important;
}

.swal2-confirm {
  background-color: #17736b !important;
}

.modal-body {
  border-radius: 10px;
}

/* ---------------------------------------------------------------------------
   MODAL SIZING (Issue #33) — many CRM popups used the Bootstrap default
   (500px), which felt cramped for their form content. Give ONLY the default
   dialog (no .modal-sm/.modal-lg/.modal-xl and no inline max-width) a roomier
   width on tablet-and-up. Explicitly sized modals and small screens are left
   untouched, so nothing overflows the viewport.
--------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .modal-dialog:not(.modal-sm):not(.modal-lg):not(.modal-xl):not(.modal-fullscreen):not([style*="max-width"]) {
    max-width: 720px;
  }
}

.select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background: linear-gradient(180deg, #e6f6f3, #cdeae5);
  color: #0d4a44;
}

#pdcModal .pdc-modal__section-body .form-control,
#pdcModal .pdc-modal__section-body .form-select {
  font-size: 12px !important;
  padding: 4px 11px;
}

#pdcUpdateModal .pdcup-modal__section-body .form-control {
  font-size: 12px !important;
  padding: 4px 11px;
}

/* ═══════════════════════════════════════════════════════════════════════
   MINI CALENDAR PANEL — TAB STRIP + PRODUCTIVITY WIDGETS
   (To-Do List / Events / Reminders / Sticky Notes)
   ═══════════════════════════════════════════════════════════════════════ */

.cal-tabs {
  display: flex;
  border-bottom: 1px solid #e3efee;
  padding: 8px 8px 0;
  gap: 2px;
}

.cal-tab-btn {
  flex: 1;
  background: none;
  border: none;
  border-radius: 8px 8px 0 0;
  padding: 8px 4px;
  font-size: 10px;
  font-weight: 600;
  color: #4c6e6b;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition:
    color 0.15s,
    background-color 0.15s;
}

.cal-tab-btn i {
  font-size: 14px;
}

.cal-tab-btn:hover {
  color: #17736b;
  background: #f0fcfb;
}

.cal-tab-btn.active {
  color: #17736b;
  background: #e3efee;
  box-shadow: inset 0 -2px 0 #17736b;
}

.cal-tab-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  /* let this shrink inside the panel so its own list can scroll */
}

.cal-tab-panel.d-none {
  display: none !important;
}

/* ── Shared "add row" for To-Do / Events / Reminders ── */
.cal-widget-add-row {
  display: flex;
  gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid #e3efee;
}

.cal-widget-add-row-wrap {
  flex-wrap: wrap;
}

.cal-mini-input {
  flex: 1;
  min-width: 120px;
  border: 1.5px solid #e3efee;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: #0f2e2b;
  background: #fafbfc;
  outline: none;
}

.cal-mini-input:focus {
  border-color: #17736b;
}

.cal-mini-input-sm {
  border: 1.5px solid #e3efee;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 11.5px;
  color: #0f2e2b;
  background: #fafbfc;
  outline: none;
  flex: 1;
  min-width: 100px;
  accent-color: #17736b;
  color-scheme: light;
}

/* Teal-green theme for every native date/time picker inside the calendar
   side panel and the landing page — overrides the browser's default blue. */
.cal-side-panel,
.cal-panel-inner,
.qod-wrap {
  accent-color: #17736b;
}
.cal-side-panel input[type="date"],
.cal-side-panel input[type="datetime-local"],
.cal-side-panel input[type="time"],
.cal-side-panel input[type="month"],
.qod-wrap input[type="date"],
.qod-wrap input[type="datetime-local"],
.qod-wrap input[type="time"],
.qod-wrap input[type="month"] {
  accent-color: #17736b;
  color-scheme: light;
}
.cal-side-panel input[type="date"]::-webkit-calendar-picker-indicator,
.cal-side-panel input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.cal-side-panel input[type="time"]::-webkit-calendar-picker-indicator,
.qod-wrap input[type="date"]::-webkit-calendar-picker-indicator,
.qod-wrap input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(38%) sepia(38%) saturate(700%) hue-rotate(130deg)
    brightness(88%) contrast(90%);
}

.cal-mini-input-sm:focus {
  border-color: #17736b;
}

.cal-mini-add-btn {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: none;
  border-radius: 6px;
  background: #17736b;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.cal-mini-add-btn:hover {
  background: #004c46;
}

.cal-widget-list {
  flex: 1;
  min-height: 0;
  padding: 12px 14px 16px;
  overflow-y: auto;
}

/* ── To-Do items ── */
.cal-todo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid #e3efee;
  background: #fafbfc;
  margin-bottom: 7px;
}

.cal-todo-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 5px;
  border: 1.5px solid #588682;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.cal-todo-check.checked {
  background: #1c7b71;
  border-color: #1c7b71;
}

.cal-todo-title {
  flex: 1;
  font-size: 12.5px;
  font-weight: 500;
  color: #0f2e2b;
  word-break: break-word;
}

.cal-todo-item.done .cal-todo-title {
  text-decoration: line-through;
  color: #4c6e6b;
}

.cal-widget-del-btn {
  background: none;
  border: none;
  color: #588682;
  cursor: pointer;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  transition:
    color 0.15s,
    background-color 0.15s;
}

.cal-widget-del-btn:hover {
  color: #e05c5c;
  background-color: #fdeaea;
}

/* ── Event items ── */
.cal-event-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e3efee;
  border-left: 3.5px solid #169c91;
  background: #fafbfc;
  margin-bottom: 7px;
}

.cal-event-datebox {
  flex-shrink: 0;
  width: 40px;
  text-align: center;
  background: #e0fffc;
  border-radius: 6px;
  padding: 4px 2px;
}

.cal-event-datebox .ev-day {
  font-size: 14px;
  font-weight: 700;
  color: #169c91;
  line-height: 1.1;
}

.cal-event-datebox .ev-mon {
  font-size: 9px;
  font-weight: 600;
  color: #169c91;
  text-transform: uppercase;
}

.cal-event-body {
  flex: 1;
  min-width: 0;
}

.cal-event-title {
  font-size: 12.5px;
  font-weight: 600;
  color: #0f2e2b;
  word-break: break-word;
}

.cal-event-meta {
  font-size: 10.5px;
  color: #4c6e6b;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.cal-event-notes {
  font-size: 10.5px;
  color: #35514f;
  margin-top: 4px;
}

/* ── Reminder items ── */
.cal-reminder-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e3efee;
  border-left: 3.5px solid #f97316;
  background: #fafbfc;
  margin-bottom: 7px;
}

.cal-reminder-item.done {
  border-left-color: #1c7b71;
  opacity: 0.6;
}

.cal-reminder-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #fff7ed;
  color: #f97316;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.cal-reminder-item.done .cal-reminder-icon {
  background: #ecfdf5;
  color: #1c7b71;
}

.cal-reminder-body {
  flex: 1;
  min-width: 0;
}

.cal-reminder-title {
  font-size: 12.5px;
  font-weight: 600;
  color: #0f2e2b;
  word-break: break-word;
}

.cal-reminder-item.done .cal-reminder-title {
  text-decoration: line-through;
  color: #4c6e6b;
}

.cal-reminder-time {
  font-size: 10.5px;
  color: #4c6e6b;
  margin-top: 3px;
}

.cal-reminder-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.cal-reminder-done-btn {
  background: none;
  border: none;
  color: #588682;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 4px;
  transition:
    color 0.15s,
    background-color 0.15s;
}

.cal-reminder-done-btn:hover {
  color: #1c7b71;
  background-color: #ecfdf5;
}

.cal-reminder-item.done .cal-reminder-done-btn {
  color: #1c7b71;
}

/* ── Sticky Notes board ── */
.cal-note-add-btn {
  width: 100%;
  border: 1.5px dashed #588682;
  border-radius: 8px;
  background: #fafbfc;
  color: #17736b;
  font-size: 12px;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.cal-note-add-btn:hover {
  background: #e3efee;
  border-color: #17736b;
}

.cal-note-board {
  flex: 1;
  min-height: 0;
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}

/* Compact by default so many notes fit on screen at once — a note only
   grows to full size when it's the one being read/edited (.expanded,
   applied on click/focus via JS). This keeps the whole board scrollable
   and readable instead of every note taking up 180px of space. */
.cal-sticky-note {
  position: relative;
  border-radius: 8px;
  padding: 14px 14px 40px;
  min-height: 64px;
  max-height: 64px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  transform: rotate(-0.4deg);
  transition:
    transform 0.15s,
    box-shadow 0.15s,
    max-height 0.2s ease;
  cursor: pointer;
}

.cal-sticky-note:nth-child(even) {
  transform: rotate(0.4deg);
}

.cal-sticky-note:hover {
  transform: rotate(0deg);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  z-index: 2;
}

.cal-sticky-note.expanded {
  max-height: 220px;
  min-height: 180px;
  z-index: 3;
  cursor: default;
}

.cal-sticky-note textarea {
  width: 100%;
  height: 100%;
  min-height: 30px;
  border: none;
  background: transparent;
  resize: none;
  outline: none;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.55;
  color: #33291a;
  pointer-events: none;
  /* collapsed: clicks fall through to the note wrapper so it can expand */
}

.cal-sticky-note.expanded textarea {
  min-height: 140px;
  resize: vertical;
  pointer-events: auto;
}

.cal-sticky-note-footer {
  position: absolute;
  bottom: 6px;
  right: 6px;
  left: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cal-sticky-color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  cursor: pointer;
  border: 1.5px solid rgba(0, 0, 0, 0.15);
}

.cal-sticky-note.color-yellow {
  background: #fff6b7;
}

.cal-sticky-note.color-pink {
  background: #ffd6e8;
}

.cal-sticky-note.color-blue {
  background: #cffffb;
}

.cal-sticky-note.color-green {
  background: #d4f7dc;
}

.cal-sticky-note.color-purple {
  background: #e6d9ff;
}

.cal-sticky-note.color-orange {
  background: #ffe0c2;
}

.cal-sticky-color-picker {
  display: flex;
  gap: 4px;
}

@media (max-width: 991.98px) {
  .cal-sticky-note {
    min-height: 150px;
  }
}

/* ── Task Detail Popup (SweetAlert2 content) ── */
.cal-task-modal-body {
  text-align: left;
}

.cal-task-modal-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #e2e8f0;
  font-size: 13px;
}

.cal-task-modal-row:last-child {
  border-bottom: none;
}

.cal-task-modal-label {
  font-weight: 600;
  color: #35514f;
  flex-shrink: 0;
}

.cal-task-modal-value {
  color: #0f2e2b;
  text-align: right;
  word-break: break-word;
}

/*
   § GLOBAL LINK STYLE — applies to any plain <a> hyperlink site-wide.
   Component-specific classes (buttons, nav items, dropdown links, etc.)
   keep their own styling since class selectors win over this rule.
 */
a {
  color: #17736b;
  text-decoration: underline;
  text-decoration-color: #17736b;
}

/* a:hover,
a:visited,
a:active,
a:focus {
  color: #17736b;
  text-decoration: underline;
  text-decoration: none;
} */

.btn-outline-primary {
  border-color: #17736b !important;
  color: #17736b !important;
}

.btn-outline-primary:hover {
  background-color: #17736b !important;
  color: #ffffff !important;
}

.info-section-title i {
  color: #17736b !important;
}

.btn-info {
  background-color: #17736b !important;
  border-color: #17736b !important;
  color: #fff !important;
}
.btn-info:hover, .btn-info:focus, .btn-info:active {
  background-color: #0f5f58 !important;
  border-color: #0f5f58 !important;
  color: #fff !important;
}

#historyBtn {
  background-color: #17736b !important;
  color: white !important;
  border-color: #17736b !important;
}

#custDetailsPopupBtn {
  background-color: #17736b !important;
  color: white !important;
  border-color: #17736b !important;
}

.cust-name-label i {
  color: #17736b !important;
}

.select2-container--bootstrap-5
  .select2-dropdown
  .select2-search
  .select2-search__field {
  height: 26px;
  line-height: 0px;
  font-size: 12px;
}

#krTable_wrapper .dt-buttons {
  padding: 5px !important;
}

.form-select:focus {
  border-color: #1c7b71;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgb(32 129 118 / 15%);
}

.form-control:focus {
  border-color: #1c7b71;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgb(32 129 118 / 15%);
}

/* ═══════════════════════════════════════════════════════════════
   MASTER MODULE STATUS PILLS & PULSE ANIMATION
   ═══════════════════════════════════════════════════════════════ */
.status-col,
th.status-col,
td.status-col {
  text-align: center !important;
  width: 110px !important;
  min-width: 110px !important;
  max-width: 110px !important;
}

.status-active,
.status-inactive,
.user-pg__badge-active,
.user-pg__badge-inactive,
.ud-status-pill.is-active,
.ud-status-pill.is-inactive,
.cd-badge-active,
.cd-badge-inactive,
.master-module-page .status-active,
.master-module-page .user-pg__badge-active,
.master-module-page .ud-status-pill.is-active,
.master-module-page .cd-badge-active {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--vyo-master-status-active-bg) !important;
  color: var(--vyo-master-status-active-text) !important;
  border: 1px solid var(--vyo-master-status-active-border) !important;
  min-width: 80px !important;
  width: 80px !important;
  padding: 4px 0 !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  text-align: center !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  gap: 6px !important;
}

/* Green dot for active status */
.status-active::before,
.user-pg__badge-active::before,
.ud-status-pill.is-active::before,
.cd-badge-active::before,
.master-module-page .status-active::before,
.master-module-page .user-pg__badge-active::before,
.master-module-page .ud-status-pill.is-active::before,
.master-module-page .cd-badge-active::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background-color: #22c55e !important;
  flex-shrink: 0 !important;
  animation: active-dot-pulse 1.5s infinite ease-in-out !important;
}

.status-inactive,
.user-pg__badge-inactive,
.ud-status-pill.is-inactive,
.cd-badge-inactive,
.master-module-page .status-inactive,
.master-module-page .user-pg__badge-inactive,
.master-module-page .ud-status-pill.is-inactive,
.master-module-page .cd-badge-inactive {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--vyo-master-status-inactive-bg) !important;
  color: var(--vyo-master-status-inactive-text) !important;
  border: 1px solid var(--vyo-master-status-inactive-border) !important;
  min-width: 80px !important;
  width: 80px !important;
  padding: 4px 0 !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  text-align: center !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  gap: 6px !important;
}

/* Red dot for inactive status */
.status-inactive::before,
.user-pg__badge-inactive::before,
.ud-status-pill.is-inactive::before,
.cd-badge-inactive::before,
.master-module-page .status-inactive::before,
.master-module-page .user-pg__badge-inactive::before,
.master-module-page .ud-status-pill.is-inactive::before,
.master-module-page .cd-badge-inactive::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background-color: #ef4444 !important;
  flex-shrink: 0 !important;
}

/* Hide any nested FontAwesome icons to ensure only our status dot is shown */
.master-module-page .status-active i,
.master-module-page .status-inactive i,
.master-module-page .user-pg__badge-active i,
.master-module-page .user-pg__badge-inactive i,
.master-module-page .ud-status-pill.is-active i,
.master-module-page .ud-status-pill.is-inactive i,
.master-module-page .cd-badge-active i,
.master-module-page .cd-badge-inactive i {
  display: none !important;
}

@keyframes active-dot-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }

  70% {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}
/* ═══ GLOBAL VERTICAL PADDING REDUCTION ═══ */
.container-fluid.px-3 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.vyo-report-filters-card {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  margin-bottom: 10px !important;
}
.vyo-filterbar {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  margin-bottom: 8px !important;
}
.vyo-stat-card {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}
.vyo-page-title {
  line-height: 1.6 !important;
}

#datasTable_length label {
  display: flex;
  align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL SweetAlert2 popup sizing — smaller box, lighter text
   Applies to every confirmation / warning / session dialog app-wide.
   (custom.css is loaded on all pages via the base template.)
   ═══════════════════════════════════════════════════════════════════════ */
div:where(.swal2-container) div:where(.swal2-popup) {
  --swal2-width: 24em;              /* was 32em — narrower box            */
  --swal2-padding: 0 0 1em;         /* trims bottom padding (shorter box) */
  font-size: 0.9rem !important;     /* scales all em-based children down  */
  border-radius: 12px !important;
}

/* Title: smaller and less bold */
div:where(.swal2-container) h2:where(.swal2-title) {
  font-size: 1.4em !important;
  font-weight: 500 !important;
  padding: 0.6em 1em 0.2em !important;
}

/* Message text: smaller and normal weight */
div:where(.swal2-container) div:where(.swal2-html-container) {
  font-size: 1em !important;
  font-weight: 400 !important;
  margin: 0.3em 1.2em !important;
}

/* Icon: smaller so the header takes less vertical space */
div:where(.swal2-container) div:where(.swal2-icon) {
  transform: scale(0.64);
  transform-origin: center top;
  margin: 0.9em auto 0.2em !important;
}
div:where(.swal2-container) div:where(.swal2-icon) .swal2-icon-content {
  font-size: 2.4em !important;
}

/* Buttons: slightly more compact */
div:where(.swal2-container) button:where(.swal2-styled) {
  font-size: 0.95em !important;
  padding: 0.5em 1.1em !important;
}
/* Default Cancel button colour — SweetAlert2 renders a grey .swal2-cancel
   when no cancelButtonColor is supplied (e.g. the Activity Logs Excel popup).
   Repaint that default to the app's themed danger red so every cancel/close
   action is consistent. Popups that DO set cancelButtonColor keep their inline
   value (inline styles win over this class rule). */
div:where(.swal2-container) button.swal2-cancel:where(.swal2-styled):not([style*="background"]) {
  background-color: #d33 !important;
  color: #fff !important;
}
div:where(.swal2-container) div:where(.swal2-actions) {
  margin-top: 1em !important;
}

/* =====================================================================
   GLOBAL GREEN SCROLLBARS
   Applies app-wide (custom.css is loaded on every page via the navbar).
   Replaces the browser/OS default grey scrollbars with the brand green
   (--vyo-primary #0f736b) everywhere: page body, scrollable containers,
   Select2 dropdowns, modals, tables, textareas, etc.
   ===================================================================== */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--vyo-primary, #0f736b) transparent;
}

/* WebKit / Chromium / Edge / Safari */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background-color: var(--vyo-primary, #0f736b);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--vyo-primary-dark, #0b5a54);
  background-clip: content-box;
  border: 2px solid transparent;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Select2 dropdown results list (the dropdown in Department filter, etc.) */
.select2-results__options::-webkit-scrollbar-thumb,
.select2-container .select2-results__options::-webkit-scrollbar-thumb {
  background-color: var(--vyo-primary, #0f736b);
  background-clip: content-box;
  border: 2px solid transparent;
  border-radius: 6px;
}
.select2-results__options {
  scrollbar-width: thin;
  scrollbar-color: var(--vyo-primary, #0f736b) transparent;
}
/* ===========================================================================
   AUTO CAROUSEL — universal horizontal-scroll arrows for data tables.
   Paired with core/js/auto_carousel.js (loaded globally in navbar.html).
   Arrows are injected on any .vyo-table-wrap and shown ONLY when the table
   overflows horizontally; auto_carousel.js adds .carousel-hidden otherwise.
   =========================================================================== */
.vyo-scroll-container { position: relative; }

.vyo-scroll-container .vyo-scroll-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: var(--vyo-primary, #17736b); color: #fff; font-size: 14px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 120, 110, 0.4);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, background 0.15s ease,
              left 0.25s ease, right 0.25s ease, transform 0.15s ease;
}
.vyo-scroll-container .vyo-scroll-left  { left: 10px; }
.vyo-scroll-container .vyo-scroll-right { right: 10px; }

/* Show arrows when the table is scrollable (arrows NOT .carousel-hidden) and
   the user hovers the table area. */
.vyo-scroll-container:hover .vyo-scroll-arrow:not(.carousel-hidden) {
  opacity: 1; pointer-events: auto;
}
/* Also reveal on touch / keyboard focus so it is usable without hover. */
.vyo-scroll-container .vyo-scroll-arrow:not(.carousel-hidden):focus-visible {
  opacity: 1; pointer-events: auto;
}
.vyo-scroll-container .vyo-scroll-left:hover  { left: 18px;  background: var(--vyo-primary-light, #138279); transform: translateY(-50%) scale(1.08); }
.vyo-scroll-container .vyo-scroll-right:hover { right: 18px; background: var(--vyo-primary-light, #138279); transform: translateY(-50%) scale(1.08); }

/* When scrolled to an edge, fade the now-useless arrow. */
.vyo-scroll-container.at-start .vyo-scroll-left  { opacity: 0 !important; pointer-events: none !important; }
.vyo-scroll-container.at-end   .vyo-scroll-right { opacity: 0 !important; pointer-events: none !important; }

/* Hard hide when the table does NOT overflow — the core rule of this feature. */
.vyo-scroll-arrow.carousel-hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* The scroller itself must actually scroll horizontally for detection. */
.vyo-scroll-container .vyo-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .vyo-scroll-container .vyo-scroll-arrow { width: 30px; height: 30px; font-size: 12px; }
  .vyo-scroll-container .vyo-scroll-left  { left: 6px; }
  .vyo-scroll-container .vyo-scroll-right { right: 6px; }
}

/* ── Global Dropdown & Select2 Positioning Fixes ── */
.select2-container {
  z-index: 1055;
}

.select2-container--open {
  z-index: 99999 !important;
}

.select2-container--open .select2-dropdown {
  z-index: 99999 !important;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18) !important;
  border: 1.5px solid #17736b !important;
}

.select2-container--open .select2-dropdown--below {
  border-top: none !important;
  margin-top: 1px;
}

.select2-container--open .select2-dropdown--above {
  border-bottom: none !important;
  margin-bottom: 1px;
}

.select2-results__options {
  max-height: 220px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Ensure dropdowns inside tables or cards are not hidden behind overflow containers */
.table-responsive:not(.tcx-wrap-mobile) {
  overflow: visible;
}

.card:not(.overflow-hidden) {
  overflow: visible;
}


/* =====================================================================
   GLOBAL DROPDOWN ARROW + NUMBER-INPUT SPINNER NORMALISATION
   (shared, app-wide — added once here so individual pages don't need
   their own copies. See requirements sections 3 and 6.)
   ===================================================================== */

/* ---- Section 3: consistent dropdown arrow on every <select> --------- */
/* Applies to Bootstrap .form-select and plain native selects. Uses the
   same small teal-grey chevron already used by select.vyo-report-input so
   the whole app matches. Selects that opt out (data-no-arrow) or are
   enhanced by Select2 keep their own rendering. */
select.form-select,
select.form-control,
select.vyo-input {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238fa4b2'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  padding-right: 28px !important;   /* keep the arrow clear of the text */
}

/* Never show the custom arrow on things that aren't selects, and let
   Select2 render its own arrow. */
input.form-control,
textarea.form-control,
select[data-no-arrow],
.select2-hidden-accessible {
  background-image: none !important;
}
select[data-no-arrow] {
  padding-right: 6px !important;
}

/* ---- Section 6: remove up/down spinner arrows on number inputs ------ */
/* Cross-browser: Chrome/Safari/Edge (webkit) + Firefox (moz). The field
   stays type=number so existing numeric validation is untouched. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
input[type="number"] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}