/* ==========================================================================
   dawa.ai - green + white design system
   Loaded last in partials/headercode.ejs, so it applies to every page.
   Visual layer only: no markup, content or behaviour depends on this file.
   ========================================================================== */

:root {
  /* Brand */
  --g-primary: #15803D;
  --g-primary-hover: #166534;
  --g-dark: #14532D;
  --g-secondary: #16A34A;
  --g-accent: #22C55E;
  --g-light: #DCFCE7;
  --g-vlight: #F0FDF4;

  /* Neutrals */
  --g-white: #FFFFFF;
  --g-soft: #F8FAFC;
  --g-text: #0F172A;
  --g-text-2: #475569;
  --g-border: #E2E8F0;

  /* Semantics kept distinct from brand green so state is never colour-only */
  --g-danger: #DC2626;
  --g-danger-bg: #FEF2F2;
  --g-warning: #D97706;

  /* Elevation - deliberately soft */
  --g-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --g-shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --g-shadow-md: 0 4px 12px rgba(15, 23, 42, .07), 0 2px 4px rgba(15, 23, 42, .04);
  --g-shadow-lg: 0 12px 32px rgba(15, 23, 42, .10), 0 4px 8px rgba(15, 23, 42, .04);
  --g-ring: 0 0 0 4px rgba(21, 128, 61, .13);

  --g-radius: 16px;
  --g-radius-sm: 12px;
  --g-ease: cubic-bezier(.4, 0, .2, 1);

  /* Bootstrap hand-off */
  --bs-primary: #15803D;
  --bs-primary-rgb: 21, 128, 61;
  --bs-link-color: #15803D;
  --bs-link-hover-color: #166534;
  --bs-body-color: #0F172A;
  --bs-border-color: #E2E8F0;
}

/* ============================================================ typography */

body {
  background-color: var(--g-soft);
  color: var(--g-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--g-text);
  font-weight: 700;
  letter-spacing: -.015em;
}

h1, .h1 { font-size: clamp(1.75rem, 2.4vw, 2.25rem); line-height: 1.2; }
h2, .h2 { font-size: clamp(1.5rem, 2vw, 1.875rem);  line-height: 1.25; }
h3, .h3 { font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.3; }

.text-muted,
.text-secondary { color: var(--g-text-2) !important; }

a { text-decoration: none; }

/* ================================================================ brand */

.text-primary            { color: var(--g-primary) !important; }
.bg-primary              { background-color: var(--g-primary) !important; }
.border-primary          { border-color: var(--g-primary) !important; }

/* Sneat's soft "label" variants */
.bg-label-primary {
  background-color: var(--g-light) !important;
  color: var(--g-primary-hover) !important;
}

.badge.bg-primary,
.badge.bg-label-primary { font-weight: 600; letter-spacing: .01em; }

::selection { background: var(--g-light); color: var(--g-dark); }

/* =============================================================== layout */

.layout-page,
.content-wrapper { background-color: var(--g-soft); }

.container-p-y { padding-block: 1.75rem; }

/* ------------------------------------------------------------ sidebar */

.bg-menu-theme {
  background-color: var(--g-white) !important;
  border-right: 1px solid var(--g-border);
  box-shadow: none;
}

.bg-menu-theme .menu-link {
  color: var(--g-text-2);
  border-radius: 10px;
  font-weight: 500;
  transition: background-color .2s var(--g-ease), color .2s var(--g-ease);
}

.bg-menu-theme .menu-item:not(.active) > .menu-link:hover {
  background-color: var(--g-vlight);
  color: var(--g-primary-hover);
}

.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) {
  background: linear-gradient(90deg, var(--g-primary) 0%, var(--g-secondary) 100%);
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(21, 128, 61, .28);
}

.bg-menu-theme .menu-item.active > .menu-link i { color: inherit !important; }

.bg-menu-theme .menu-header-text {
  color: #94A3B8;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------- navbar */

.layout-navbar {
  background-color: rgba(255, 255, 255, .82) !important;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border: 1px solid var(--g-border);
  box-shadow: var(--g-shadow-xs);
  transition: box-shadow .25s var(--g-ease), background-color .25s var(--g-ease);
}

/* .is-stuck is toggled by the small scroll listener in headercode */
.layout-navbar.is-stuck {
  background-color: rgba(255, 255, 255, .93) !important;
  box-shadow: var(--g-shadow-md);
}

/* ================================================================ cards */

.card {
  background-color: var(--g-white);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  box-shadow: var(--g-shadow-sm);
  transition: transform .28s var(--g-ease),
              box-shadow .28s var(--g-ease),
              border-color .28s var(--g-ease);
}

/* Lift only cards that are genuinely interactive - not every panel */
.card.card-hover:hover,
a > .card:hover,
.card-link-hover:hover {
  transform: translateY(-4px);
  border-color: var(--g-primary);
  background-color: var(--g-vlight);
  box-shadow: var(--g-shadow-lg);
}

.card.card-hover:hover .card-cta-arrow { transform: translateX(4px); }
.card.card-hover:hover .avatar-initial,
.card.card-hover:hover .card-icon { transform: scale(1.06); }

.card-cta-arrow,
.card .avatar-initial,
.card .card-icon { transition: transform .28s var(--g-ease); }

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--g-border);
  font-weight: 700;
  color: var(--g-text);
}

.card-title { color: var(--g-text); font-weight: 700; }

/* Icon chips */
.avatar-initial,
.card-icon {
  background-color: var(--g-light) !important;
  color: var(--g-primary) !important;
  border-radius: 12px;
}

.bg-label-primary .avatar-initial { background-color: transparent !important; }

/* =============================================================== buttons */

.btn {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background-color .2s var(--g-ease),
              border-color .2s var(--g-ease),
              color .2s var(--g-ease),
              box-shadow .2s var(--g-ease),
              transform .12s var(--g-ease);
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background-color: var(--g-primary);
  border-color: var(--g-primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(21, 128, 61, .22);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:first-child:active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--g-primary-hover) !important;
  border-color: var(--g-primary-hover) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(21, 128, 61, .3);
}

.btn-outline-primary,
.btn-secondary-green {
  background-color: var(--g-white);
  border-color: var(--g-primary);
  color: var(--g-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-secondary-green:hover {
  background-color: var(--g-vlight) !important;
  border-color: var(--g-primary) !important;
  color: var(--g-primary-hover) !important;
}

.btn-label-primary {
  background-color: var(--g-light);
  border-color: transparent;
  color: var(--g-primary-hover);
}

.btn-label-primary:hover {
  background-color: var(--g-primary) !important;
  color: #fff !important;
}

.btn:focus-visible {
  outline: 3px solid rgba(21, 128, 61, .4);
  outline-offset: 2px;
  box-shadow: none;
}

/* Comfortable touch targets */
.btn { min-height: 40px; }
.btn-sm { min-height: 34px; }
.btn-lg { min-height: 48px; }

/* ================================================================= forms */

.form-label,
.col-form-label {
  color: var(--g-text);
  font-weight: 600;
  font-size: .875rem;
  margin-bottom: .4rem;
}

.form-control,
.form-select,
.input-group-text {
  border-color: var(--g-border);
  border-radius: 10px;
  color: var(--g-text);
  background-color: var(--g-white);
  transition: border-color .18s var(--g-ease), box-shadow .18s var(--g-ease);
}

.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) { border-color: #CBD5E1; }

.form-control:focus,
.form-select:focus {
  border-color: var(--g-primary);
  box-shadow: var(--g-ring);
}

.form-control::placeholder { color: #94A3B8; }

.form-control:disabled,
.form-control[readonly] { background-color: var(--g-soft); color: var(--g-text-2); }

/* Validation - shape + text carry the meaning too, never colour alone */
.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--g-danger);
  background-color: var(--g-danger-bg);
}

.form-control.is-invalid:focus { box-shadow: 0 0 0 4px rgba(220, 38, 38, .13); }

.invalid-feedback { color: var(--g-danger); font-weight: 600; }

.form-control.is-valid,
.was-validated .form-control:valid { border-color: var(--g-secondary); }

.form-control.is-valid:focus { box-shadow: var(--g-ring); }

.valid-feedback { color: var(--g-primary-hover); font-weight: 600; }

.form-check-input:checked {
  background-color: var(--g-primary);
  border-color: var(--g-primary);
}

.form-check-input:focus { border-color: var(--g-primary); box-shadow: var(--g-ring); }

.form-switch .form-check-input:checked { background-color: var(--g-primary); }

/* select2 / typeahead pick up the same language */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-color: var(--g-border) !important;
  border-radius: 10px !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus {
  border-color: var(--g-primary) !important;
  box-shadow: var(--g-ring);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--g-primary) !important;
}

/* ================================================================ tables */

.table {
  --bs-table-hover-bg: var(--g-vlight);
  color: var(--g-text);
}

.table > :not(caption) > * > * { border-bottom-color: var(--g-border); }

.table thead th,
.table > thead > tr > th {
  background-color: var(--g-soft);
  color: var(--g-text-2);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--g-border);
  white-space: nowrap;
}

.table-hover > tbody > tr { transition: background-color .16s var(--g-ease); }

/* Tables must scroll inside their own box, never the page */
.table-responsive { -webkit-overflow-scrolling: touch; }

.pagination .page-item.active .page-link {
  background-color: var(--g-primary);
  border-color: var(--g-primary);
}

.pagination .page-link { color: var(--g-primary-hover); border-radius: 8px; }

/* =============================================== misc components */

.dropdown-menu {
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-sm);
  box-shadow: var(--g-shadow-lg);
  padding: .4rem;
}

.dropdown-item { border-radius: 8px; font-weight: 500; }

.dropdown-item:hover,
.dropdown-item:focus { background-color: var(--g-vlight); color: var(--g-primary-hover); }

.dropdown-item.active,
.dropdown-item:active { background-color: var(--g-primary); color: #fff; }

.modal-content { border: none; border-radius: var(--g-radius); box-shadow: var(--g-shadow-lg); }
.modal-header  { border-bottom: 1px solid var(--g-border); }
.modal-footer  { border-top: 1px solid var(--g-border); }

.nav-tabs .nav-link.active {
  color: var(--g-primary);
  border-bottom-color: var(--g-primary);
}

.progress { background-color: var(--g-light); border-radius: 999px; }
.progress-bar { background-color: var(--g-primary); }

.alert-primary {
  background-color: var(--g-vlight);
  border-color: var(--g-light);
  color: var(--g-dark);
}

.list-group-item.active { background-color: var(--g-primary); border-color: var(--g-primary); }

.swal2-confirm.btn-primary { background-color: var(--g-primary) !important; }

/* Section rhythm helpers (opt-in, for alternating backgrounds) */
.section-white  { background-color: var(--g-white); }
.section-soft   { background-color: var(--g-soft); }
.section-accent { background-color: var(--g-vlight); }

/* ============================================================ animation */

@keyframes g-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes g-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes g-scale-in {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: none; }
}

.g-fade-up  { animation: g-fade-up .5s var(--g-ease) both; }
.g-fade-in  { animation: g-fade-in .5s var(--g-ease) both; }
.g-scale-in { animation: g-scale-in .45s var(--g-ease) both; }

/* Reveal-on-scroll.
   Fail-safe by design: the hidden state lives on .g-armed, which is added by
   JS only at the moment it starts observing an element, and is removed on
   intersect plus by a timeout backstop. If the script never runs, is blocked,
   or errors, no element ever carries .g-armed - so content is simply visible
   rather than stranded at opacity 0. */
.g-reveal {
  transition: opacity .55s var(--g-ease), transform .55s var(--g-ease);
}

.g-reveal.g-armed {
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}

/* Stagger for grids of cards */
.g-reveal:nth-child(2) { transition-delay: .06s; }
.g-reveal:nth-child(3) { transition-delay: .12s; }
.g-reveal:nth-child(4) { transition-delay: .18s; }
.g-reveal:nth-child(5) { transition-delay: .24s; }
.g-reveal:nth-child(6) { transition-delay: .3s; }

/* ============================================================ responsive */

@media (max-width: 1199.98px) {
  .container-p-y { padding-block: 1.35rem; }
}

@media (max-width: 991.98px) {
  .card { border-radius: 14px; }
  h1, .h1 { font-size: 1.6rem; }
}

@media (max-width: 767.98px) {
  .container-p-y { padding-block: 1rem; }

  .card { border-radius: 14px; }

  .card-body { padding: 1rem; }

  /* Stop dashboards from forcing a sideways page scroll */
  .table-responsive { overflow-x: auto; }

  /* Full-width actions read better on a phone */
  .card-footer .btn,
  .modal-footer .btn { width: 100%; }

  .modal-footer { flex-direction: column-reverse; gap: .5rem; }
  .modal-footer > * { margin: 0; }
}

@media (max-width: 575.98px) {
  /* >=16px prevents iOS Safari zooming when a field is focused */
  .form-control,
  .form-select { font-size: 16px; }

  .container-p-y { padding-block: .85rem; }

  .card-body { padding: .875rem; }

  h1, .h1 { font-size: 1.4rem; }
  h2, .h2 { font-size: 1.2rem; }

  .btn { min-height: 44px; }   /* comfortable touch target */
}

/* Nothing should ever scroll the page sideways */
html, body { max-width: 100%; overflow-x: hidden; }

/* ======================================================== accessibility */

a:focus-visible,
.menu-link:focus-visible,
.dropdown-item:focus-visible {
  outline: 3px solid rgba(21, 128, 61, .45);
  outline-offset: 2px;
  border-radius: 6px;
}

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

  .g-reveal.g-armed { opacity: 1; transform: none; }
}

@media print {
  .layout-menu, .layout-navbar { display: none !important; }
  .card { box-shadow: none; border: 1px solid var(--g-border); }
}

/* ==========================================================================
   PREMIUM LAYER
   Depth, hierarchy and wayfinding for the internal pages. Applies to every
   view through partials/headercode.ejs. Visual only - no markup, content or
   behaviour depends on anything below.
   ========================================================================== */

/* ============================================================== SIDEBAR */

.bg-menu-theme {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFEFC 100%) !important;
  border-right: 1px solid #E6EFE9;
  box-shadow: 1px 0 2px rgba(15, 23, 42, .02);
}

/* Brand block reads as a header, not a floating logo */
.bg-menu-theme .app-brand {
  padding-block: 18px !important;
  margin-bottom: 4px;
  border-bottom: 1px solid #EEF4F0;
}

.bg-menu-theme .menu-inner {
  padding-inline: 12px;
}

.bg-menu-theme .menu-item {
  margin-block: 2px;
}

.bg-menu-theme .menu-link {
  position: relative;
  min-height: 44px;
  padding: 10px 12px !important;
  border-radius: 10px;
  font-size: .925rem;
  font-weight: 600;
  color: #475569;
  transition: background-color .2s var(--g-ease),
              color .2s var(--g-ease),
              box-shadow .2s var(--g-ease);
}

.bg-menu-theme .menu-link i,
.bg-menu-theme .menu-icon {
  font-size: 20px;
  color: #9AAFA1;
  transition: color .2s var(--g-ease), transform .2s var(--g-ease);
}

.bg-menu-theme .menu-item:not(.active) > .menu-link:hover {
  background-color: var(--g-vlight);
  color: var(--g-primary-hover);
}

.bg-menu-theme .menu-item:not(.active) > .menu-link:hover i,
.bg-menu-theme .menu-item:not(.active) > .menu-link:hover .menu-icon {
  color: var(--g-primary);
  transform: translateX(1px);
}

/* Current page - the template never set this, so .active is applied by the
   small wayfinding script in partials/footercode.ejs */
.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) {
  background: linear-gradient(90deg, var(--g-primary) 0%, var(--g-secondary) 100%);
  color: #FFFFFF !important;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(21, 128, 61, .26);
}

/* The label sits in an unclassed <div>, so it must be covered explicitly -
   otherwise it keeps the muted grey and fails contrast on the green fill. */
.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) i,
.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) .menu-icon,
.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) * {
  color: #FFFFFF !important;
}

/* Rail indicator so the active row is legible even at a glance */
.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle)::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 22px;
  border-radius: 0 4px 4px 0;
  background: var(--g-dark);
}

/* Section captions */
.bg-menu-theme .menu-header {
  margin-top: 20px;
  padding-inline: 12px;
}

.bg-menu-theme .menu-header-text {
  color: #94A3B8;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

/* Quiet scrollbar */
.bg-menu-theme .ps__thumb-y,
.bg-menu-theme .ps__rail-y .ps__thumb-y {
  background-color: #CFE3D6 !important;
  width: 5px !important;
}

/* =============================================================== NAVBAR */

.layout-navbar {
  min-height: 62px;
  border-radius: 14px;
}

.layout-navbar .fw-semibold,
.layout-navbar .nav-item span {
  color: var(--g-text);
}

.layout-navbar .avatar img {
  border: 2px solid var(--g-light);
}

/* ====================================================== PAGE HIERARCHY */

/* Sneat page titles are plain <h4 class="fw-bold py-3 mb-4"> */
.content-wrapper h4.fw-bold,
.content-wrapper h4.py-3 {
  font-size: clamp(1.35rem, 1.7vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--g-text);
}

.content-wrapper h4.fw-bold .text-muted {
  font-weight: 600;
  color: #94A3B8 !important;
}

/* ================================================== DASHBOARD TILES */

/* The four shortcut tiles carry .card-border-shadow-* in the markup */
[class*="card-border-shadow-"] {
  position: relative;
  overflow: hidden;
}

[class*="card-border-shadow-"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--g-primary) 0%, var(--g-accent) 100%);
}

[class*="card-border-shadow-"]:hover {
  transform: translateY(-4px);
  border-color: var(--g-primary);
  box-shadow: var(--g-shadow-lg);
}

[class*="card-border-shadow-"]:hover .avatar-initial {
  transform: scale(1.08);
}

[class*="card-border-shadow-"] .card-body {
  padding-block: 1.15rem;
}

/* Bring the shortcut icon chips into the green family. Scoped to these
   tiles so genuine status colours elsewhere keep their meaning. */
.card-border-shadow-primary .avatar-initial,
.card-border-shadow-warning .avatar-initial,
.card-border-shadow-danger .avatar-initial,
.card-border-shadow-info .avatar-initial,
.card-border-shadow-success .avatar-initial {
  background-color: var(--g-light) !important;
  color: var(--g-primary) !important;
  border-radius: 12px;
}

.card-border-shadow-warning .avatar-initial { background-color: #E9FBF0 !important; color: var(--g-secondary) !important; }
.card-border-shadow-danger  .avatar-initial { background-color: var(--g-vlight) !important; color: var(--g-primary-hover) !important; }
.card-border-shadow-info    .avatar-initial { background-color: #E4FBEC !important; color: #15803D !important; }

/* Tile titles */
[class*="card-border-shadow-"] .card-title,
[class*="card-border-shadow-"] h5 {
  font-size: 1.02rem;
  font-weight: 700;
  margin-bottom: 0;
}

/* ------------------------------------------------------- stat tiles */

/* Big number tiles: make the figure the hero */
.content-wrapper .card-body h3,
.content-wrapper .card-body .h3 {
  font-size: clamp(1.5rem, 2vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--g-text);
  margin-bottom: .15rem;
}

.content-wrapper .card-body .fw-semibold.d-block,
.content-wrapper .card-body span.d-block {
  color: var(--g-text-2);
  font-weight: 600;
  font-size: .875rem;
}

/* PNG unicons sit on a green chip so they read as part of the system */
.content-wrapper .card .avatar.flex-shrink-0 > img.rounded {
  border-radius: 12px !important;
  padding: 6px;
  background: var(--g-vlight);
  box-shadow: inset 0 0 0 1px rgba(21, 128, 61, .08);
}

/* ------------------------------------------------- welcome / greeting */

/* The greeting panel gets a soft wash so it anchors the page.
   :has() is progressive - unsupported browsers simply keep the plain card. */
.content-wrapper .card:has(.card-title.text-primary) {
  background: linear-gradient(115deg, var(--g-vlight) 0%, #FFFFFF 58%);
  border-color: var(--g-light);
}

.content-wrapper .card .card-title.text-primary {
  color: var(--g-primary-hover) !important;
  font-weight: 800;
  letter-spacing: -.02em;
}

/* ------------------------------------------------------------ charts */

.content-wrapper .card-header h5,
.content-wrapper .card-header .card-title {
  font-size: 1.02rem;
  font-weight: 700;
}

.apexcharts-legend-text {
  color: var(--g-text-2) !important;
  font-weight: 600 !important;
}

.apexcharts-gridline { stroke: #EEF2F6; }

/* ============================================================== TABLES */

.card > .table-responsive > .table,
.card > .table {
  margin-bottom: 0;
}

.table thead th {
  padding-block: .85rem;
}

.table tbody td {
  padding-block: .8rem;
  vertical-align: middle;
  color: var(--g-text);
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

/* DataTables controls */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--g-border) !important;
  border-radius: 9px !important;
  padding: .38rem .65rem !important;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--g-primary) !important;
  box-shadow: var(--g-ring) !important;
  outline: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--g-primary) !important;
  border-color: var(--g-primary) !important;
  color: #fff !important;
  border-radius: 8px;
}

/* ======================================================== SMALL PARTS */

.badge {
  border-radius: 7px;
  padding: .36em .62em;
}

.avatar-initial {
  font-weight: 700;
}

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

.card-header {
  padding-block: 1.05rem;
}

/* Empty-state and muted helper text */
.content-wrapper .text-muted small,
.content-wrapper small.text-muted {
  color: #94A3B8 !important;
}

/* ============================================================ RESPONSIVE */

@media (max-width: 991.98px) {
  .bg-menu-theme .menu-link { min-height: 46px; }   /* easier touch target */
}

@media (max-width: 767.98px) {
  .content-wrapper h4.fw-bold { font-size: 1.2rem; }

  [class*="card-border-shadow-"] .card-body { padding-block: .95rem; }

  .content-wrapper .card-body h3 { font-size: 1.4rem; }

  /* Hover lift is meaningless on touch and can look like a stuck state */
  [class*="card-border-shadow-"]:hover { transform: none; }
}

/* ==========================================================================
   PHARMACY LOADER
   Restyles the existing Bootstrap spinner into a filling medicine capsule
   with an ECG trace. Applied purely in CSS so the eight views that already
   render <div id="loader"><div class="spinner-border">…</div></div> pick it
   up unchanged - no markup or JS edits, and the show/hide logic still works.
   ========================================================================== */

/* Overlay: light and calm rather than a black scrim */
#loader {
  background-color: rgba(248, 255, 250, .78) !important;
  backdrop-filter: blur(3px) saturate(120%);
  -webkit-backdrop-filter: blur(3px) saturate(120%);
  display: none;
}

/* The capsule itself - Bootstrap's spinning border is fully overridden */
#loader .spinner-border,
.rx-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--g-primary, #15803D);
  border-radius: 999px;
  background: #FFFFFF;
  overflow: hidden;
  animation: rx-tilt 2.6s ease-in-out infinite;
  transform: translate(-50%, -50%) rotate(-12deg);
  box-shadow: 0 12px 28px rgba(20, 83, 45, .18);
}

/* Medicine filling the capsule */
#loader .spinner-border::before,
.rx-loader::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  background: linear-gradient(90deg, var(--g-dark, #14532D), var(--g-secondary, #16A34A));
  animation: rx-fill 1.6s cubic-bezier(.45, 0, .25, 1) infinite;
}

/* The capsule's seam */
#loader .spinner-border::after,
.rx-loader::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: rgba(20, 83, 45, .35);
}

/* ECG trace beneath the capsule, drawn as a masked gradient sweep */
#loader::after {
  content: "";
  position: absolute;
  top: calc(50% + 44px);
  left: 50%;
  width: 210px;
  height: 34px;
  margin-left: -105px;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 6px,
      rgba(21, 128, 61, .22) 6px 7px,
      transparent 7px 13px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  animation: rx-trace 1.6s linear infinite;
  pointer-events: none;
}

@keyframes rx-fill {
  0%   { width: 8%;  opacity: .85; }
  55%  { width: 92%; opacity: 1; }
  100% { width: 8%;  opacity: .85; }
}

@keyframes rx-tilt {
  0%, 100% { transform: translate(-50%, -50%) rotate(-12deg); }
  50%      { transform: translate(-50%, -50%) rotate(-6deg); }
}

@keyframes rx-trace {
  from { background-position: 0 0; }
  to   { background-position: 26px 0; }
}

/* Bootstrap spinners outside the overlay simply take the brand colour */
.spinner-border:not(#loader .spinner-border) { color: var(--g-primary, #15803D); }

@media (prefers-reduced-motion: reduce) {
  #loader .spinner-border,
  .rx-loader,
  #loader .spinner-border::before,
  .rx-loader::before,
  #loader::after {
    animation: none !important;
  }

  #loader .spinner-border::before,
  .rx-loader::before { width: 62%; }
}