/* ==========================================================================
   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(30,18,32,.06), 0 2px 6px rgba(30,18,32,.05);
  --gp-shadow:    0 8px 26px rgba(30,18,32,.09);
}

/* ==========================================================================
   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:       #f1f5f4;

  --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;
}

/* 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); }

/* 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);
}