/* ==========================================================================
   GAD PHARMA: GLOBAL THEME LAYER
   Loaded AFTER Metronic's style.bundle.css and the existing style.css.
   It re-skins the whole admin by overriding Metronic/Bootstrap CSS variables,
   so every existing Blade view inherits the new brand with ZERO markup changes.

   Safe to remove: delete the <link> in partials/head.blade.php to fully revert.
   Brand: #12b3a6 (teal).  Supports Metronic light + [data-bs-theme="dark"].
   ========================================================================== */

:root {
  /* Brand scale */
  --gp-brand:        #12b3a6;
  --gp-brand-active: #0d9488;
  --gp-brand-light:  #d7f5f1;
  --gp-brand-ink:    #0b7d73;
  --gp-brand-text:   #0b7d73;
  --gp-brand-grad:   linear-gradient(135deg, #2dd4bf, #12b3a6);

  /* Semantic (kept distinct from brand accent) */
  --gp-ok:#1f9d63; --gp-ok-light:#e3f5ec;
  --gp-warn:#b9820b; --gp-warn-light:#f9efd6;
  --gp-bad:#dc2650; --gp-bad-light:#fce2e8;
  --gp-info:#3f6fd6; --gp-info-light:#e7edfb;

  /* Shape & depth: a touch rounder + softer than stock Metronic */
  --gp-radius: .85rem;
  --gp-radius-sm: .6rem;
  --gp-shadow-sm: 0 1px 2px rgba(16,42,39,.06), 0 8px 22px rgba(16,42,39,.07);
  --gp-shadow:    0 8px 26px rgba(30,18,32,.09);

  /* Card surface: Metronic leaves --bs-card-bg unset, so define it here
     (white in light) and override it for dark below. */
  --bs-card-bg: #ffffff;
}

/* ==========================================================================
   1. Re-point Metronic / Bootstrap PRIMARY to the brand (light theme)
   These vars drive .btn-primary, .text-primary, .bg-primary, links, active
   nav, checkboxes, spinners, progress bars, etc. across the entire app.
   ========================================================================== */
:root,
[data-bs-theme="light"] {
  --bs-primary:            var(--gp-brand);
  --bs-primary-rgb:        18, 179, 166;
  --bs-primary-active:     var(--gp-brand-active);
  --bs-primary-light:      var(--gp-brand-light);
  --bs-primary-inverse:    #ffffff;
  --bs-primary-clarity:    rgba(18,179,166,.20);

  --bs-link-color: var(--gp-brand-text);
  --bs-link-color-rgb:     18, 179, 166;
  --bs-link-hover-color:   var(--gp-brand-active);

  --bs-border-radius:      var(--gp-radius);
  --bs-border-radius-sm:   var(--gp-radius-sm);
  --bs-card-border-radius: var(--gp-radius);

  --bs-body-bg:            #f1f5f4;   /* soft teal-biased neutral, not flat grey */
  --bs-app-bg-color:       #e8eeec;

  --bs-success: var(--gp-ok);  --bs-success-rgb: 31,157,99;
  --bs-warning: var(--gp-warn); --bs-warning-rgb: 185,130,11;
  --bs-danger:  var(--gp-bad);  --bs-danger-rgb: 220,38,80;
  --bs-info:    var(--gp-info); --bs-info-rgb: 63,111,214;
}

/* Dark theme: lift the teal so it stays legible on dark ground */
[data-bs-theme="dark"] {
  --gp-brand:        #2dd4bf;
  --gp-brand-active: #99f6e4;
  --gp-brand-light:  #0c3b37;
  --gp-brand-text:   #5eead4;

  --bs-primary:          #2dd4bf;
  --bs-primary-rgb:      45, 212, 191;
  --bs-primary-active:   #99f6e4;
  --bs-primary-light:    #0c3b37;
  --bs-primary-clarity:  rgba(45,212,191,.24);
  --bs-link-color: var(--gp-brand-text);
  --bs-link-hover-color: #99f6e4;

  /* Lift semantic colours for legibility on dark, and give their soft
     backgrounds dark-tinted equivalents so chips/icons don't glare. */
  --gp-ok:#34d399;   --gp-ok-light:#0f2e22;
  --gp-warn:#fbbf24; --gp-warn-light:#33280c;
  --gp-bad:#fb7185;  --gp-bad-light:#3a1620;
  --gp-info:#8ab4ff; --gp-info-light:#16233f;

  /* Dark surfaces: canvas near-black, cards raised above it. Metronic derives
     --bs-card-bg from --bs-body-bg, so this must be set for dark too. */
  --bs-body-bg: #0a1211;
  --bs-card-bg: #15211f;
  --bs-border-color: #243230;

  /* Metronic's base leaves the gray scale light-only, so text utilities go
     invisible on dark. Re-map the whole ramp (100 darkest -> 900 lightest). */
  --bs-gray-100: #141f1d;
  --bs-gray-200: #1b2725;
  --bs-gray-300: #26332f;
  --bs-gray-400: #54635f;
  --bs-gray-500: #8a9895;
  --bs-gray-600: #a8b4b1;
  --bs-gray-700: #c7d1ce;
  --bs-gray-800: #e0e8e6;
  --bs-gray-900: #f2f7f6;
}

/* Bootstrap 5.3 component tokens: reference --gp-brand so they follow the
   active theme automatically. Recolours pagination, nav-pills, dropdown/
   list-group active states, and any component that reads these tokens. */
:root {
  --bs-text-primary: var(--gp-brand-text);
  --bs-component-active-bg:            var(--gp-brand);
  --bs-component-active-border-color:  var(--gp-brand);
  --bs-pagination-active-bg:           var(--gp-brand);
  --bs-pagination-active-border-color: var(--gp-brand);
  --bs-pagination-color:               var(--gp-brand);
  --bs-pagination-hover-color:         var(--gp-brand-active);
  --bs-nav-pills-link-active-bg:       var(--gp-brand);
  --bs-dropdown-link-active-bg:        var(--gp-brand);
  --bs-list-group-active-bg:           var(--gp-brand);
  --bs-list-group-active-border-color: var(--gp-brand);
}

/* ==========================================================================
   2. Buttons: slicker primary with lift on hover
   ========================================================================== */
.btn.btn-primary {
  background-color: var(--gp-brand);
  border-color: var(--gp-brand);
  box-shadow: 0 6px 16px rgba(18,179,166,.28);
  transition: transform .08s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
  background-color: var(--gp-brand-active) !important;
  border-color: var(--gp-brand-active) !important;
}
.btn.btn-primary:active { transform: translateY(1px); }
.btn.btn-light-primary { color: var(--gp-brand); background-color: var(--gp-brand-light); }
.btn { border-radius: var(--gp-radius-sm); font-weight: 600; }

/* ==========================================================================
   3. Cards: rounder corners, softer shadow, cleaner header
   ========================================================================== */
.card {
  border-radius: var(--gp-radius);
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--gp-shadow-sm);
}
.card.card-flush { box-shadow: var(--gp-shadow-sm); }
.card .card-header { border-bottom: 1px solid var(--bs-border-color); }

/* ==========================================================================
   4. Forms: brand focus ring, rounded solid inputs
   ========================================================================== */
.form-control, .form-select {
  border-radius: var(--gp-radius-sm);
}
.form-control:focus, .form-select:focus,
.form-control.form-control-solid:focus {
  border-color: var(--gp-brand);
  box-shadow: 0 0 0 .2rem var(--bs-primary-clarity);
}
.form-check-input:checked {
  background-color: var(--gp-brand);
  border-color: var(--gp-brand);
}

/* ==========================================================================
   5. Tables: quieter headers, roomier rows (DataTables friendly)
   ========================================================================== */
.table > thead th,
.table th {
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .72rem;
  color: var(--bs-gray-500);
  font-weight: 700;
}
.table > tbody > tr { transition: background-color .12s ease; }

/* ==========================================================================
   6. Badges / status pills: pill-shaped, tabular
   ========================================================================== */
.badge { border-radius: 999px; font-weight: 700; letter-spacing: .01em; }

/* ==========================================================================
   7. Modals / popups: rounder, softer, branded header accent
   ========================================================================== */
.modal-content {
  border-radius: var(--gp-radius);
  border: none;
  box-shadow: var(--gp-shadow);
  overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--bs-border-color); }
.modal-header .modal-title { font-weight: 800; letter-spacing: -.01em; }

/* ==========================================================================
   8. Sidebar active accent (Metronic dark sidebar): brand rail
   ========================================================================== */
.app-sidebar .menu-item .menu-link.active,
.app-sidebar .menu-item.here > .menu-link {
  background-color: rgba(18,179,166,.14);
  border-radius: var(--gp-radius-sm);
}
.app-sidebar .menu-link.active .menu-title { color: #fff; }

/* ==========================================================================
   9. NET-NEW COMPONENTS (used by the Blade component library)
   These are fully self-styled: they don't depend on Metronic base rules.
   ========================================================================== */

/* 9a. Stat widget */
.gp-widget {
  background: var(--bs-card-bg, #fff);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--gp-radius);
  padding: 1.1rem 1.15rem;
  box-shadow: var(--gp-shadow-sm);
  display: flex; flex-direction: column; gap: .55rem;
}
.gp-widget__top { display: flex; align-items: center; gap: .7rem; }
.gp-widget__icon {
  width: 40px; height: 40px; border-radius: .7rem; flex: none;
  display: grid; place-items: center;
  background: var(--gp-brand-light); color: var(--gp-brand);
}
.gp-widget__icon svg { width: 20px; height: 20px; }
.gp-widget__label { font-size: .82rem; color: var(--bs-gray-600); font-weight: 500; }
.gp-widget__value { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--bs-gray-900); }
.gp-widget__delta { display: inline-flex; align-items: center; gap: .2rem; font-size: .78rem;
  font-weight: 700; padding: .12rem .5rem; border-radius: 999px; }
.gp-widget__delta.up   { color: var(--gp-ok);  background: var(--gp-ok-light); }
.gp-widget__delta.down { color: var(--gp-bad); background: var(--gp-bad-light); }
.gp-widget--ok   .gp-widget__icon { background: var(--gp-ok-light);   color: var(--gp-ok); }
.gp-widget--warn .gp-widget__icon { background: var(--gp-warn-light); color: var(--gp-warn); }
.gp-widget--info .gp-widget__icon { background: var(--gp-info-light); color: var(--gp-info); }

/* 9a-bis. Primary call-to-action banner (customer "place order") */
.gp-order-cta {
  display: flex; align-items: center; gap: 1.1rem; cursor: pointer;
  background: linear-gradient(135deg, #2dd4bf 0%, var(--gp-brand) 100%);
  color: #fff; border-radius: var(--gp-radius); padding: 1.25rem 1.5rem;
  box-shadow: 0 12px 28px rgba(18, 179, 166, .32);
  position: relative; overflow: hidden;
  transition: transform .14s ease, box-shadow .24s ease;
  -webkit-tap-highlight-color: transparent;
}
.gp-order-cta::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, .22), transparent 55%);
  pointer-events: none;
}
.gp-order-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(18, 179, 166, .42); }
.gp-order-cta:active { transform: translateY(0); box-shadow: 0 8px 20px rgba(18, 179, 166, .3); }
.gp-order-cta:focus-visible { outline: 3px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
.gp-order-cta__icon {
  width: 54px; height: 54px; border-radius: 15px; flex: none;
  background: rgba(255, 255, 255, .22); display: grid; place-items: center;
  position: relative; z-index: 1;
}
.gp-order-cta__icon svg { width: 27px; height: 27px; }
.gp-order-cta__text { position: relative; z-index: 1; min-width: 0; }
.gp-order-cta__title { font-weight: 800; font-size: 1.18rem; letter-spacing: -.01em; line-height: 1.2; }
.gp-order-cta__sub { font-size: .86rem; opacity: .92; margin-top: .12rem; }
.gp-order-cta__arrow { margin-left: auto; flex: none; opacity: .95; position: relative; z-index: 1;
  transition: transform .18s ease; }
.gp-order-cta:hover .gp-order-cta__arrow { transform: translateX(4px); }
.gp-order-cta__arrow svg { width: 24px; height: 24px; display: block; }
@media (max-width: 480px) {
  .gp-order-cta { padding: 1.05rem 1.15rem; gap: .85rem; }
  .gp-order-cta__icon { width: 46px; height: 46px; border-radius: 13px; }
  .gp-order-cta__icon svg { width: 23px; height: 23px; }
  .gp-order-cta__title { font-size: 1.05rem; }
  .gp-order-cta__sub { font-size: .8rem; }
}

/* 9b. Toasts */
#gp-toasts {
  position: fixed; top: 1rem; right: 1rem; z-index: 1090;
  display: flex; flex-direction: column; gap: .6rem; width: min(360px, calc(100vw - 2rem));
  pointer-events: none;
}
.gp-toast {
  background: var(--bs-card-bg, #fff);
  border: 1px solid var(--bs-border-color);
  border-left: 4px solid var(--gp-brand);
  border-radius: var(--gp-radius-sm);
  box-shadow: var(--gp-shadow);
  padding: .8rem .9rem; display: flex; gap: .7rem; align-items: flex-start;
  pointer-events: auto;
  animation: gp-toast-in .35s cubic-bezier(.2,.8,.2,1);
}
.gp-toast.gp-hide { animation: gp-toast-out .3s ease forwards; }
.gp-toast--ok   { border-left-color: var(--gp-ok); }
.gp-toast--warn { border-left-color: var(--gp-warn); }
.gp-toast--error{ border-left-color: var(--gp-bad); }
.gp-toast__icon { width: 34px; height: 34px; border-radius: .6rem; flex: none; display: grid; place-items: center;
  background: var(--gp-brand-light); color: var(--gp-brand); }
.gp-toast--ok   .gp-toast__icon { background: var(--gp-ok-light);   color: var(--gp-ok); }
.gp-toast--warn .gp-toast__icon { background: var(--gp-warn-light); color: var(--gp-warn); }
.gp-toast--error .gp-toast__icon{ background: var(--gp-bad-light);  color: var(--gp-bad); }
.gp-toast__icon svg { width: 18px; height: 18px; }
.gp-toast__title { font-weight: 700; font-size: .88rem; color: var(--bs-gray-900); }
.gp-toast__msg { font-size: .8rem; color: var(--bs-gray-600); margin-top: .1rem; }
.gp-toast__close { margin-left: auto; background: none; border: none; color: var(--bs-gray-500);
  cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 .1rem; }
@keyframes gp-toast-in  { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gp-toast-out { to { transform: translateX(20px); opacity: 0; height: 0; margin: 0; padding-top: 0; padding-bottom: 0; } }

/* 9c. Confirm dialog */
.gp-confirm-backdrop {
  position: fixed; inset: 0; z-index: 1095; background: rgba(15,8,20,.5);
  display: grid; place-items: center; padding: 1rem;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.gp-confirm-backdrop.show { opacity: 1; pointer-events: auto; }
.gp-confirm {
  background: var(--bs-card-bg, #fff); border-radius: var(--gp-radius);
  box-shadow: var(--gp-shadow); width: min(420px, 100%); padding: 1.5rem;
  transform: scale(.94); transition: transform .2s ease; text-align: center;
}
.gp-confirm-backdrop.show .gp-confirm { transform: scale(1); }
.gp-confirm__icon { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto .9rem;
  display: grid; place-items: center; background: var(--gp-bad-light); color: var(--gp-bad); }
.gp-confirm__icon svg { width: 26px; height: 26px; }
.gp-confirm__title { font-weight: 800; font-size: 1.1rem; margin-bottom: .35rem; color: var(--bs-gray-900); }
.gp-confirm__msg { font-size: .88rem; color: var(--bs-gray-600); margin-bottom: 1.25rem; }
.gp-confirm__actions { display: flex; gap: .6rem; }
.gp-confirm__actions .btn { flex: 1; }

/* 9d. Signature pad */
.gp-sigpad { display: inline-block; width: 100%; }
.gp-sigpad__canvas {
  width: 100%; height: 190px; display: block; touch-action: none;
  background: var(--bs-card-bg, #fff);
  border: 2px dashed var(--bs-border-color); border-radius: var(--gp-radius-sm); cursor: crosshair;
}
.gp-sigpad__canvas.gp-signed { border-style: solid; border-color: var(--gp-brand); }
.gp-sigpad__bar { display: flex; align-items: center; gap: .6rem; margin-top: .55rem; }
.gp-sigpad__hint { font-size: .78rem; color: var(--bs-gray-500); }
.gp-sigpad__clear { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--gp-bad);
  background: none; border: none; cursor: pointer; }

/* ==========================================================================
   10. Buttons: full Metronic variant coverage
   ========================================================================== */
.btn.btn-outline-primary { color: var(--gp-brand); border-color: var(--gp-brand); }
.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:active,
.btn.btn-outline-primary.active { color: #fff; background-color: var(--gp-brand); border-color: var(--gp-brand); }
.btn.btn-active-primary:hover,
.btn.btn-active-primary:active,
.btn.btn-active-primary.active { background-color: var(--gp-brand) !important; border-color: var(--gp-brand) !important; color: #fff !important; }
.btn.btn-active-light-primary:hover,
.btn.btn-active-light-primary:active,
.btn.btn-active-light-primary.active { color: var(--gp-brand) !important; background-color: var(--gp-brand-light) !important; }
.btn.btn-color-primary,
.btn.btn-active-color-primary:hover,
.btn.btn-active-color-primary.active { color: var(--gp-brand) !important; }

/* ==========================================================================
   11. Text & background utilities
   ========================================================================== */
.text-primary { color: var(--gp-brand-text) !important; }
.text-hover-primary:hover, .text-hover-primary:hover * { color: var(--gp-brand) !important; }
.text-active-primary.active { color: var(--gp-brand) !important; }
.bg-primary { background-color: var(--gp-brand) !important; }
.bg-light-primary { background-color: var(--gp-brand-light) !important; }
.border-primary { border-color: var(--gp-brand) !important; }
.link-primary { color: var(--gp-brand-text); }
.link-primary:hover { color: var(--gp-brand-active); }
.symbol-label.bg-light-primary { color: var(--gp-brand); }
::selection { background: var(--gp-brand-light); color: var(--gp-brand-ink); }

/* ==========================================================================
   12. Menus & dropdowns
   ========================================================================== */
.menu-item .menu-link.active { color: var(--gp-brand); }
.menu-state-primary .menu-item .menu-link.active,
.menu-state-bg .menu-item .menu-link.active { background-color: var(--gp-brand-light); color: var(--gp-brand); }
.menu-sub .menu-item .menu-link.active { color: var(--gp-brand); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--gp-brand); }
/* keep the dark sidebar active label white (more specific, wins over the above) */
.app-sidebar .menu-item .menu-link.active,
.app-sidebar .menu-item.here > .menu-link { color: #fff; }

/* ==========================================================================
   13. Tabs & pills
   ========================================================================== */
.nav-line-tabs .nav-item .nav-link.active,
.nav-line-tabs .nav-item.show .nav-link,
.nav-line-tabs .nav-item .nav-link:hover:not(.disabled) { border-bottom-color: var(--gp-brand); color: var(--gp-brand); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--gp-brand); color: #fff; }

/* ==========================================================================
   14. Form controls: switches, focus, select2, datepicker, range
   ========================================================================== */
.form-check-input:focus { border-color: var(--gp-brand); box-shadow: 0 0 0 .2rem var(--bs-primary-clarity); }
.form-switch .form-check-input:checked { background-color: var(--gp-brand); border-color: var(--gp-brand); }
.form-range::-webkit-slider-thumb { background: var(--gp-brand); }
.form-range::-moz-range-thumb { background: var(--gp-brand); }
textarea.form-control { border-radius: var(--gp-radius-sm); }

/* Select2 (Metronic bootstrap5 theme) */
.select2-container--bootstrap5.select2-container--focus .select2-selection,
.select2-container--bootstrap5 .select2-selection:focus { border-color: var(--gp-brand) !important; box-shadow: 0 0 0 .2rem var(--bs-primary-clarity); }
.select2-container--bootstrap5 .select2-results__option--highlighted,
.select2-container--bootstrap5 .select2-results__option--selected { background-color: var(--gp-brand) !important; color: #fff !important; }
.select2-container--bootstrap5 .select2-selection--multiple .select2-selection__choice { background-color: var(--gp-brand-light); color: var(--gp-brand); border-color: transparent; }

/* Flatpickr datepicker */
.flatpickr-day.selected, .flatpickr-day.selected:hover,
.flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--gp-brand); border-color: var(--gp-brand); }
.flatpickr-day:hover { background: var(--gp-brand-light); }

/* ==========================================================================
   15. Pagination & DataTables
   ========================================================================== */
.page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.current > .page-link { background-color: var(--gp-brand); border-color: var(--gp-brand); color: #fff; }
.page-link { color: var(--gp-brand); }
.page-link:hover { color: var(--gp-brand-active); }

/* ==========================================================================
   16. Alerts
   ========================================================================== */
.alert-primary { background-color: var(--gp-brand-light); border-color: transparent; color: var(--gp-brand-ink); }

/* ==========================================================================
   17. Progress & spinners
   ========================================================================== */
.progress-bar { background-color: var(--gp-brand); }
.spinner-border.text-primary, .spinner-grow.text-primary { color: var(--gp-brand) !important; }

/* ==========================================================================
   18. Steppers & timeline (order flow)
   ========================================================================== */
.stepper .stepper-item.current .stepper-icon,
.stepper .stepper-item.current .stepper-number { background-color: var(--gp-brand); color: #fff; border-color: var(--gp-brand); }
.stepper .stepper-item.completed .stepper-icon { background-color: var(--gp-brand-light); color: var(--gp-brand); }

/* ==========================================================================
   19. Scrollbars (subtle, brand-neutral)
   ========================================================================== */
* { scrollbar-color: rgba(150,130,150,.4) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(150,130,150,.35); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(150,130,150,.55); }

/* ==========================================================================
   20. Shimmer & glimmer (premium finish)
   ========================================================================== */

/* Primary button: a light sheen sweeps across on hover */
.btn.btn-primary { position: relative; overflow: hidden; }
.btn.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-20deg); transition: left .6s cubic-bezier(.2,.7,.3,1); pointer-events: none;
}
.btn.btn-primary:hover::after { left: 150%; }

/* Widgets: lift + soft teal glow + a top sheen line that catches the light */
.gp-widget { position: relative; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.gp-widget::before {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  opacity: .7; pointer-events: none;
}
.gp-widget:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--gp-brand) 35%, var(--bs-border-color));
  box-shadow: 0 12px 30px rgba(18,179,166,.16), var(--gp-shadow-sm);
}
.gp-widget__icon { position: relative; overflow: hidden; }
.gp-widget__icon::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 120% at 28% 18%, rgba(255,255,255,.5), transparent 60%);
  opacity: .6;
}

/* Staggered rise-in for widgets */
.gp-widget { animation: gp-rise .45s cubic-bezier(.2,.7,.3,1) both; }
.row > [class*="col-"]:nth-child(2) .gp-widget { animation-delay: .06s; }
.row > [class*="col-"]:nth-child(3) .gp-widget { animation-delay: .12s; }
.row > [class*="col-"]:nth-child(4) .gp-widget { animation-delay: .18s; }
.row > [class*="col-"]:nth-child(5) .gp-widget { animation-delay: .24s; }
@keyframes gp-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Glimmer glow utility for key chips / CTAs: class="gp-glow" */
.gp-glow { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gp-brand) 40%, transparent),
                       0 8px 26px color-mix(in srgb, var(--gp-brand) 22%, transparent); }

/* Shimmer loading skeleton: <span class="gp-shimmer" style="width:120px;height:1rem"></span> */
.gp-shimmer { position: relative; overflow: hidden; display: inline-block;
  background: color-mix(in srgb, var(--bs-border-color) 65%, transparent); border-radius: var(--gp-radius-sm); }
.gp-shimmer::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: gp-shimmer 1.5s infinite;
}
:root[data-bs-theme="dark"] .gp-shimmer::after,
:root:not([data-bs-theme="light"]) .gp-shimmer::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}
@keyframes gp-shimmer { 100% { transform: translateX(100%); } }

/* ==========================================================================
   21. Typography (Plus Jakarta Sans) - overrides the old Circular Std / 900 headings
   ========================================================================== */
:root {
  --bs-font-sans-serif: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
}
/* Text elements only. NEVER select span/i/.menu/.ki-*/.fa-* here: icon fonts
   (keenicons, FontAwesome) render glyphs via those elements' pseudo-elements,
   so forcing the text font onto them breaks the icons. General text still gets
   the new font by inheriting from body. */
body, p, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.btn, .form-control, .form-select, .form-label, input, textarea, select, button,
.menu-title, .card-title, .fw-bolder {
  font-family: var(--bs-font-sans-serif);
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -.006em;
}
/* refined headings: bold, tight tracking, sensible line-height (was 900) */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 700 !important;
  letter-spacing: -.021em;
  line-height: 1.25;
}
.fw-bolder { font-weight: 800 !important; }
/* uppercase eyebrows/labels breathe a little */
.text-uppercase, .fs-8, .fs-9 { letter-spacing: .05em; }
/* line up digits in stats and tables */
.gp-widget__value, .fs-2hx, .fs-2x, .tnum, .table td { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   22. App feel: tactile taps, touch targets, momentum, mobile ergonomics
   ========================================================================== */
* { -webkit-tap-highlight-color: transparent; }
.btn { transition: transform .1s ease, background-color .15s ease, box-shadow .15s ease, color .15s ease; }
.btn:active { transform: translateY(1px) scale(.99); }
.menu-link, .page-link, .dropdown-item, a.card, .gp-widget, .symbol { transition: background-color .14s ease, color .14s ease, transform .12s ease, box-shadow .18s ease; }
.menu-link:active, .page-link:active, a.card:active { transform: scale(.985); }
.hover-scroll-overlay-y, .table-responsive, .dataTables_scrollBody, .modal-body { -webkit-overflow-scrolling: touch; }

@media (max-width: 991.98px) {
  /* comfortable touch targets */
  .btn { min-height: 42px; }
  .menu-link { min-height: 46px; }
  .form-control, .form-select { min-height: 44px; font-size: 16px; }   /* 16px stops iOS zoom-on-focus */
  .app-content { padding-top: .5rem; }
}

/* ==========================================================================
   23. Mobile bottom navigation (app-style) - hidden on lg+ via .d-lg-none
   ========================================================================== */
.gp-bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  display: flex; align-items: stretch;
  background: color-mix(in srgb, var(--bs-card-bg, #fff) 86%, transparent);
  backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border-top: 1px solid var(--bs-border-color);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -6px 24px rgba(20,10,26,.08);
}
.gp-bottomnav__item {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 9px 4px; min-height: 58px;
  color: var(--bs-gray-500); font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  background: none; border: none; text-decoration: none; cursor: pointer;
  transition: color .15s ease, transform .1s ease;
}
.gp-bottomnav__item svg { width: 22px; height: 22px; }
.gp-bottomnav__item:active { transform: scale(.9); }
.gp-bottomnav__item.on { color: var(--gp-brand); }
.gp-bottomnav__item.on svg { filter: drop-shadow(0 3px 7px color-mix(in srgb, var(--gp-brand) 45%, transparent)); }

/* keep page content clear of the bar on mobile */
@media (max-width: 991.98px) {
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   24. Listings & DataTables polish (applies to every listing at once)
   ========================================================================== */
.card-header .card-title .form-control.form-control-solid { min-width: 220px; }

.dataTables_wrapper { overflow-x: auto; }
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_info { color: var(--bs-gray-500); font-weight: 500; }
.dataTables_wrapper .dataTables_length select { border-radius: var(--gp-radius-sm) !important; }
.dataTables_wrapper .dataTables_paginate { padding-top: .5rem; }
.dataTables_wrapper .dataTables_paginate .page-item .page-link {
  border-radius: var(--gp-radius-sm); margin: 0 2px; min-width: 34px; text-align: center;
}

table.dataTable > tbody > tr { transition: background-color .12s ease; }
table.dataTable > tbody > tr:hover { background: color-mix(in srgb, var(--gp-brand) 5%, transparent); }
table.dataTable > tbody > tr > td, table.dataTable > thead > tr > th { vertical-align: middle; }
table.dataTable td.dataTables_empty { padding: 2.5rem 1rem; color: var(--bs-gray-500); font-weight: 500; }
.card .table .btn-icon { border-radius: var(--gp-radius-sm); }

/* toolbars stack cleanly on phones */
@media (max-width: 767.98px) {
  .card-header { flex-wrap: wrap; row-gap: .75rem; }
  .card-header .card-title, .card-header .card-toolbar { width: 100%; }
  .card-header .card-toolbar { justify-content: flex-start; flex-wrap: wrap; gap: .5rem; }
  .card-header .card-title .form-control.form-control-solid { min-width: 0; width: 100%; }
}

/* ==========================================================================
   25. Premium tables: density, alignment, typography, hover
   ========================================================================== */
.table { color: var(--bs-gray-700); font-size: .82rem; }

/* header: crisp micro-labels on a subtle ground with a clear rule */
.table > thead > tr > th, .table > thead th {
  background: color-mix(in srgb, var(--bs-gray-100) 70%, var(--bs-card-bg, #fff));
  color: var(--bs-gray-600);
  text-transform: uppercase; letter-spacing: .045em; font-size: .68rem; font-weight: 700;
  padding: .82rem 1rem !important; vertical-align: middle; white-space: nowrap;
  border-bottom: 1px solid var(--bs-border-color);
}
.table > thead > tr > th:first-child { border-top-left-radius: var(--gp-radius-sm); }
.table > thead > tr > th:last-child  { border-top-right-radius: var(--gp-radius-sm); }

/* body: consistent density, vertically centred, readable weight */
.table > tbody > tr > td {
  padding: .72rem 1rem !important; vertical-align: middle;
  color: var(--bs-gray-700); border-color: var(--bs-border-color);
}
/* clean solid separators instead of the cheap dashed look */
.table.table-row-dashed > tbody > tr { border-bottom: 1px solid var(--bs-border-color) !important; }
.table.table-row-dashed > tbody > tr > td { border-bottom-width: 0 !important; }

/* first column + links read as the row's key */
.table > tbody > tr > td:first-child { font-weight: 700; color: var(--bs-gray-800); }
.table a:not(.btn) { font-weight: 600; }

/* numerals align; mark number/money columns with .text-end to right-align */
.table td, .table th { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.table .text-end, .table td.text-end, .table th.text-end { text-align: right !important; }

/* row hover */
.table > tbody > tr { transition: background-color .12s ease; }
.table > tbody > tr:hover { background: color-mix(in srgb, var(--gp-brand) 6%, transparent); }

/* long code / UUID cells */
.gp-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .72rem; color: var(--bs-gray-500); letter-spacing: -.01em; }

/* small status tick (e.g. "sent to Mintsoft"), aligned inline with the ID */
.gp-tick { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none;
  border-radius: 50%; background: var(--gp-ok); color: #fff;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--gp-ok) 45%, transparent); }
.gp-tick i { font-size: 9px; line-height: 1; }

/* DataTables loading state: branded, rounded, soft shadow */
.dataTables_wrapper .dataTables_processing {
  border-radius: var(--gp-radius-sm) !important; border: 1px solid var(--bs-border-color) !important;
  background: var(--bs-card-bg, #fff) !important; color: var(--gp-brand) !important;
  font-weight: 600 !important; box-shadow: var(--gp-shadow) !important;
}

/* ==========================================================================
   26. Responsive tables: on phones, overflow columns collapse to a tap-expand row
   ========================================================================== */
table.dataTable > tbody > tr > td.dtr-control { position: relative; cursor: pointer; }
table.dataTable > tbody > tr > td.dtr-control:before {
  content: "+"; display: inline-grid; place-items: center; vertical-align: middle;
  width: 22px; height: 22px; border-radius: 7px; line-height: 1;
  background: var(--gp-brand) !important; color: #fff !important; font-weight: 700; border: none !important;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--gp-brand) 40%, transparent);
}
table.dataTable > tbody > tr.dtr-expanded > td.dtr-control:before {
  content: "\2212"; background: var(--bs-gray-500) !important; box-shadow: none;
}
table.dataTable > tbody > tr.child ul.dtr-details { width: 100%; display: block; }
ul.dtr-details > li {
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  padding: .55rem 0 !important; border-bottom: 1px solid var(--bs-border-color) !important;
}
ul.dtr-details > li:last-child { border-bottom: 0 !important; }
ul.dtr-details .dtr-title { font-weight: 700; color: var(--bs-gray-600); text-transform: uppercase; font-size: .66rem; letter-spacing: .05em; }
ul.dtr-details .dtr-data { text-align: right; font-weight: 600; color: var(--bs-gray-800); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn.btn-primary::after, .gp-toast, .gp-confirm, .table > tbody > tr,
  .gp-widget, .gp-shimmer::after, .gp-bottomnav__item, .menu-link, .page-link, a.card,
  table.dataTable > tbody > tr {
    transition: none !important; animation: none !important;
  }
}

/* ==========================================================================
   27. Keyboard focus visibility (accessibility)
   ========================================================================== */
a:focus-visible, .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible,
.menu-link:focus-visible, .page-link:focus-visible, .gp-bottomnav__item:focus-visible,
.dropdown-item:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gp-brand);
  outline-offset: 2px;
  border-radius: var(--gp-radius-sm);
}

/* ==========================================================================
   28. Order flow: numbered progress stepper (brand teal)
   Drives off .active (completed) and .is-current (current) set by applyStep().
   ========================================================================== */
.gp-stepper { position: relative; display: flex; flex-direction: column; gap: 0; padding: .25rem 0; }
.gp-stepper .timeline-item {
  position: relative; display: flex; align-items: center; gap: .75rem;
  padding: .5rem 0; min-height: 46px; margin: 0;
}
/* connector: from this badge's centre down to the next badge (uniform item height) */
.gp-stepper .timeline-item::before {
  content: ""; position: absolute; left: 16px; top: 50%; width: 2px; height: 100%;
  background: var(--bs-border-color); z-index: 0; transform: translateX(-50%);
}
.gp-stepper .timeline-item:last-child::before { display: none; }
.gp-stepper .timeline-item.active:not(.is-current)::before { background: var(--gp-brand); }

/* marker */
.gp-stepper .timeline-badge {
  position: relative; z-index: 1; width: 33px; height: 33px; flex: none; margin: 0;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--bs-gray-200); color: var(--bs-gray-600);
  border: 2px solid var(--bs-gray-200);
  font-weight: 800; font-size: .85rem; line-height: 1;
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.gp-stepper .timeline-badge .gp-stepper__check { display: none; font-size: 1rem; }
.gp-stepper .timeline-badge .gp-stepper__num { display: block; }

/* completed */
.gp-stepper .timeline-item.active .timeline-badge {
  background: var(--gp-brand); border-color: var(--gp-brand); color: #fff;
}
.gp-stepper .timeline-item.active:not(.is-current) .timeline-badge .gp-stepper__num { display: none; }
.gp-stepper .timeline-item.active:not(.is-current) .timeline-badge .gp-stepper__check { display: block; }

/* current */
.gp-stepper .timeline-item.is-current .timeline-badge {
  background: var(--gp-brand); border-color: var(--gp-brand); color: #fff;
  box-shadow: 0 0 0 4px var(--gp-brand-light);
}

/* labels */
.gp-stepper .timeline-content { color: var(--bs-gray-500); font-weight: 600; font-size: .9rem; padding: 0 !important; }
.gp-stepper .timeline-item.active .timeline-content { color: var(--gp-brand); font-weight: 700; }
.gp-stepper .timeline-item.is-current .timeline-content { color: var(--bs-gray-900); font-weight: 800; }

/* ==========================================================================
   29. Right-align the Products price column (position-based; columns are fixed)
   ========================================================================== */
#product_listing thead th:nth-child(2),
#product_listing tbody td:nth-child(2) { text-align: right; }

/* ==========================================================================
   30. Customer dashboard (flagship): composed, app-like, fully responsive.
   Single focused column on mobile; two-column composition on desktop.
   ========================================================================== */
.gp-dash {
  --gp-violet: #7c5cff; --gp-violet-light: #ece7ff;
  max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px;
  padding-bottom: 12px;
}
[data-bs-theme="dark"] .gp-dash{ --gp-violet:#a996ff; --gp-violet-light:#241d40; }

/* greeting */
.gp-dash-hello { display: flex; align-items: center; gap: 14px; }
.gp-dash-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bs-gray-500); }
.gp-dash-name { font-size: 26px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; margin: 2px 0 0; color: var(--bs-gray-900); }
.gp-dash-avatar { width: 46px; height: 46px; border-radius: 14px; margin-left: auto; flex: none;
  display: grid; place-items: center; font-weight: 800; font-size: 16px; color: #063f3a;
  background: var(--gp-brand-grad); box-shadow: var(--gp-shadow-sm); }

/* CTA sizing on desktop */
.gp-dash-cta { padding: 20px 22px; }
@media (min-width: 992px){ .gp-dash-cta .gp-order-cta__title{ font-size: 1.25rem; } }

/* two-column composition */
.gp-dash-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 992px){
  .gp-dash-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px; align-items: start; }
}
.gp-dash-main, .gp-dash-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.gp-dash-sec { display: block; }
.gp-dash-sechead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 11px; }
.gp-dash-sectitle { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--bs-gray-900); }
.gp-dash-seclink { font-size: 13px; font-weight: 700; color: var(--gp-brand-text); }
.gp-dash-seclink:hover { color: var(--gp-brand-active); }

.gp-dash-card {
  background: var(--bs-card-bg, #fff); border: 1px solid var(--bs-border-color);
  border-radius: var(--gp-radius); padding: 18px; box-shadow: var(--gp-shadow-sm);
}

/* chips */
.gp-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
  padding: 5px 10px; border-radius: 999px; line-height: 1; white-space: nowrap; }
.gp-chip.brand { background: var(--gp-brand-light); color: var(--gp-brand-text); }
.gp-chip.info  { background: var(--gp-info-light);  color: var(--gp-info); }
.gp-chip.warn  { background: var(--gp-warn-light);  color: var(--gp-warn); }
.gp-chip.ok    { background: var(--gp-ok-light);    color: var(--gp-ok); }
.gp-chip.bad   { background: var(--gp-bad-light);   color: var(--gp-bad); }

/* active order: header row */
.gp-dash-otop { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.gp-dash-oico { width: 44px; height: 44px; border-radius: 13px; flex: none; display: grid; place-items: center; }
.gp-dash-oico svg { width: 22px; height: 22px; }
.gp-dash-oico.brand { background: var(--gp-brand-light); color: var(--gp-brand); }
.gp-dash-oico.warn  { background: var(--gp-warn-light);  color: var(--gp-warn); }
.gp-dash-oinfo { flex: 1; min-width: 0; }
.gp-dash-olabel { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-gray-500); }
.gp-dash-oid { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--bs-gray-900); margin-top: 1px; }
.gp-dash-osub { font-size: 13px; color: var(--bs-gray-600); font-weight: 500; margin-top: 4px; }

/* resume (draft) card */
.gp-dash-resume { display: flex; align-items: center; gap: 14px; }
.gp-dash-resume .gp-dash-oinfo { flex: 1; }
.gp-dash-resumebtn { flex: none; align-self: center; }

/* tracker */
.gp-dash-track { position: relative; display: flex; justify-content: space-between; margin: 4px 6px 2px; }
.gp-dash-rail { position: absolute; left: 15px; right: 15px; top: 13px; height: 3px; border-radius: 3px; background: var(--bs-border-color); }
.gp-dash-railfill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px;
  background: var(--gp-brand-grad); transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.gp-dash-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 62px; }
.gp-dash-node { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bs-card-bg, #fff); border: 3px solid var(--bs-border-color); color: #fff; transition: all .3s ease; }
.gp-dash-node svg { width: 13px; height: 13px; }
.gp-dash-step.done .gp-dash-node { background: var(--gp-brand); border-color: var(--gp-brand); }
.gp-dash-step.current .gp-dash-node { background: var(--gp-brand); border-color: var(--gp-brand);
  box-shadow: 0 0 0 5px var(--gp-brand-light); animation: gpPulse 2s ease-in-out infinite; }
.gp-dash-step:not(.done):not(.current) .gp-dash-node { position: relative; }
.gp-dash-step:not(.done):not(.current) .gp-dash-node::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bs-gray-400); }
@keyframes gpPulse { 0%,100%{ box-shadow: 0 0 0 5px var(--gp-brand-light); } 50%{ box-shadow: 0 0 0 9px transparent; } }
.gp-dash-slabel { font-size: 11px; font-weight: 700; color: var(--bs-gray-500); text-align: center; line-height: 1.2; }
.gp-dash-step.done .gp-dash-slabel, .gp-dash-step.current .gp-dash-slabel { color: var(--bs-gray-900); }

/* recent orders list */
.gp-dash-list { background: var(--bs-card-bg, #fff); border: 1px solid var(--bs-border-color);
  border-radius: var(--gp-radius); box-shadow: var(--gp-shadow-sm); overflow: hidden; }
.gp-dash-row { display: flex; align-items: center; gap: 13px; padding: 13px 15px; transition: background .15s ease; }
.gp-dash-row + .gp-dash-row { border-top: 1px solid var(--bs-border-color); }
.gp-dash-row:hover { background: color-mix(in srgb, var(--gp-brand-light) 45%, transparent); }
.gp-dash-rico { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; }
.gp-dash-rico svg { width: 20px; height: 20px; }
.gp-dash-rico.brand { background: var(--gp-brand-light); color: var(--gp-brand); }
.gp-dash-rico.ok { background: var(--gp-ok-light); color: var(--gp-ok); }
.gp-dash-rico.violet { background: var(--gp-violet-light); color: var(--gp-violet); }
.gp-dash-rmid { flex: 1; min-width: 0; }
.gp-dash-rtitle { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; color: var(--bs-gray-900); display: flex; align-items: center; gap: 7px; }
.gp-dash-rsub { font-size: 12.5px; color: var(--bs-gray-500); font-weight: 500; margin-top: 2px; }
.gp-dash-rright { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.gp-dash-rdate { font-size: 12px; color: var(--bs-gray-500); font-weight: 600; }
.gp-dash-rxtag { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--gp-violet);
  background: var(--gp-violet-light); padding: 2px 6px; border-radius: 6px; }

/* empty state */
.gp-dash-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 34px 20px; }
.gp-dash-emptyico { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center;
  background: var(--gp-brand-light); color: var(--gp-brand); margin-bottom: 6px; }
.gp-dash-emptyico svg { width: 28px; height: 28px; }
.gp-dash-emptytitle { font-size: 15px; font-weight: 800; color: var(--bs-gray-900); }
.gp-dash-emptysub { font-size: 13px; color: var(--bs-gray-500); font-weight: 500; max-width: 260px; }

/* overview stats: scroller on mobile, grid on desktop */
.gp-dash-stats { display: flex; gap: 12px; overflow-x: auto; margin: 0 -4px; padding: 2px 4px 4px;
  scroll-snap-type: x mandatory; -ms-overflow-style: none; scrollbar-width: none; }
.gp-dash-stats::-webkit-scrollbar { display: none; }
.gp-dash-stat { scroll-snap-align: start; flex: none; width: 116px; background: var(--bs-card-bg, #fff);
  border: 1px solid var(--bs-border-color); border-radius: var(--gp-radius); padding: 14px; box-shadow: var(--gp-shadow-sm); }
.gp-dash-schip { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 10px; }
.gp-dash-schip svg { width: 18px; height: 18px; }
.gp-dash-schip.brand { background: var(--gp-brand-light); color: var(--gp-brand); }
.gp-dash-schip.info { background: var(--gp-info-light); color: var(--gp-info); }
.gp-dash-schip.violet { background: var(--gp-violet-light); color: var(--gp-violet); }
.gp-dash-schip.amber { background: var(--gp-warn-light); color: var(--gp-warn); }
.gp-dash-schip.ok { background: var(--gp-ok-light); color: var(--gp-ok); }
.gp-dash-snum { font-size: 25px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--bs-gray-900); }
.gp-dash-slab { font-size: 12.5px; font-weight: 600; color: var(--bs-gray-500); margin-top: 3px; }
@media (min-width: 992px){
  .gp-dash-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; overflow: visible; margin: 0; padding: 0; }
  .gp-dash-stat { width: auto; }
}

/* quick actions */
.gp-dash-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gp-dash-qa { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 13px 6px;
  background: var(--bs-card-bg, #fff); border: 1px solid var(--bs-border-color); border-radius: var(--gp-radius-sm);
  box-shadow: var(--gp-shadow-sm); transition: transform .12s ease; }
.gp-dash-qa:active { transform: translateY(1px) scale(.98); }
.gp-dash-qico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--gp-brand-light) 60%, transparent); color: var(--gp-brand); }
.gp-dash-qico svg { width: 19px; height: 19px; }
.gp-dash-qlab { font-size: 11.5px; font-weight: 700; color: var(--bs-gray-700); text-align: center; line-height: 1.15; }

/* support banner */
.gp-dash-help { display: flex; align-items: center; gap: 13px; background: var(--bs-card-bg, #fff);
  border: 1px solid var(--bs-border-color); border-radius: var(--gp-radius); padding: 15px; box-shadow: var(--gp-shadow-sm); }
.gp-dash-help:hover { border-color: var(--gp-brand); }
.gp-dash-hico { width: 44px; height: 44px; border-radius: 13px; flex: none; display: grid; place-items: center;
  background: var(--gp-brand-light); color: var(--gp-brand); }
.gp-dash-hico svg { width: 22px; height: 22px; }
.gp-dash-htxt { flex: 1; }
.gp-dash-htitle { font-size: 14.5px; font-weight: 800; color: var(--bs-gray-900); }
.gp-dash-hsub { font-size: 12.5px; color: var(--bs-gray-500); font-weight: 500; margin-top: 2px; }
.gp-dash-hchev { color: var(--bs-gray-400); flex: none; }

/* ==========================================================================
   31. Canvas & chrome depth: a tinted app background with a soft brand glow
   so white cards lift off it, plus a frosted-glass header. Applies app-wide.
   ========================================================================== */
body {
  background-color: var(--bs-app-bg-color);
  background-image: radial-gradient(1100px 520px at 100% -8%, rgba(18,179,166,.07), transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
[data-bs-theme="dark"] body {
  --bs-app-bg-color: #0a1211;
  background-image: radial-gradient(1100px 520px at 100% -8%, rgba(45,212,191,.10), transparent 60%);
}

/* Frosted-glass header: content scrolls softly under a translucent bar */
.app-header, #kt_app_header {
  background: rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid var(--bs-border-color);
  box-shadow: none !important;
}
[data-bs-theme="dark"] .app-header, [data-bs-theme="dark"] #kt_app_header {
  background: rgba(17,29,27,.72) !important;
}

/* ==========================================================================
   32. Dark-mode surface completion.
   This Metronic build only half-supports dark (text flips, surfaces don't),
   so standard cards/tables/forms render light on a dark page. These rules
   give the shared components proper dark surfaces app-wide.
   ========================================================================== */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .card-flush {
  --bs-card-bg: #15211f;            /* beat Metronic's .card{--bs-card-bg:var(--bs-body-bg)} */
  background-color: #15211f !important;
  border-color: var(--bs-border-color) !important;
}
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer { --bs-card-cap-bg: transparent; background-color: transparent !important; }
[data-bs-theme="dark"] .modal-content { --bs-card-bg: #15211f; background-color: #15211f; }
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .menu-sub-dropdown { background-color: #1b2725 !important; border: 1px solid var(--bs-border-color); }

/* tables */
[data-bs-theme="dark"] .table { color: var(--bs-gray-700); }
[data-bs-theme="dark"] .table thead th { color: var(--bs-gray-500) !important; }
[data-bs-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; }
[data-bs-theme="dark"] .table-row-dashed tbody tr { border-bottom-color: var(--bs-border-color); }

/* form controls */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .form-control-solid,
[data-bs-theme="dark"] .form-select-solid {
  background-color: #1b2725 !important; color: var(--bs-gray-800) !important; border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .form-control::placeholder { color: var(--bs-gray-500); }

/* background + text utilities that assume a light canvas */
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-body { background-color: var(--bs-card-bg) !important; }
[data-bs-theme="dark"] .text-dark { color: var(--bs-gray-900) !important; }
[data-bs-theme="dark"] .text-muted { color: var(--bs-gray-600) !important; }
[data-bs-theme="dark"] .separator { border-color: var(--bs-border-color); }

/* neutral buttons */
[data-bs-theme="dark"] .btn-light,
[data-bs-theme="dark"] .btn-secondary { background-color: #1f2b29; color: var(--bs-gray-800); border-color: var(--bs-border-color); }
[data-bs-theme="dark"] .btn-light:hover,
[data-bs-theme="dark"] .btn-secondary:hover { background-color: #26332f; color: var(--bs-gray-900); }

/* CKEditor 5: dark chrome/toolbar, but keep the editable canvas white so it
   still previews the (light) email accurately. */
[data-bs-theme="dark"] .ck.ck-reset,
[data-bs-theme="dark"] .ck.ck-editor {
  --ck-color-base-background: #1b2725;
  --ck-color-toolbar-background: #1b2725;
  --ck-color-toolbar-border: #243230;
  --ck-color-base-border: #243230;
  --ck-color-text: #e0e8e6;
  --ck-color-button-default-hover-background: #26332f;
  --ck-color-button-on-background: #26332f;
  --ck-color-button-on-hover-background: #2e3d39;
  --ck-color-panel-background: #1b2725;
  --ck-color-panel-border: #243230;
  --ck-color-list-background: #1b2725;
  --ck-color-list-button-hover-background: #26332f;
  --ck-color-dropdown-panel-background: #1b2725;
}
[data-bs-theme="dark"] .ck.ck-toolbar { background: #1b2725 !important; border-color: #243230 !important; }
[data-bs-theme="dark"] .ck-editor__editable,
[data-bs-theme="dark"] .ck.ck-content { background: #ffffff !important; color: #1a1a1a !important; }