/* ================================================================
   MEDATRON — ENTERPRISE UI  |  v3.0 COMPLETE REDESIGN
   Color Theme: Deep Teal × Warm White × Slate
   Designer: Antigravity
   ================================================================ */

/* ── 1. FONTS ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── 2. DESIGN TOKENS ──────────────────────────────────────────── */
:root {
  /* Brand */
  --brand-900: #0c2340;
  --brand-800: #0f3460;
  --brand-700: #16437e;
  --brand-600: #1a56a0;
  --brand-500: #2171c7;
  --brand-400: #4a8fd8;
  --brand-300: #7dbae8;
  --brand-200: #bddcf5;
  --brand-100: #e3f1fc;
  --brand-50: #f0f7fe;

  /* Teal Accent */
  --teal-600: #0d7490;
  --teal-500: #0891b2;
  --teal-400: #22b8d4;
  --teal-100: #cff4fc;

  /* Neutral */
  --n-950: #0a0f1e;
  --n-900: #111827;
  --n-800: #1f2937;
  --n-700: #374151;
  --n-600: #4b5563;
  --n-500: #6b7280;
  --n-400: #9ca3af;
  --n-300: #d1d5db;
  --n-200: #e5e7eb;
  --n-150: #eef0f4;
  --n-100: #f3f4f6;
  --n-50: #f9fafb;
  --white: #ffffff;

  /* Semantics */
  --success: #059669;
  --success-bg: #ecfdf5;
  --success-border: #6ee7b7;
  --warning: #d97706;
  --warning-bg: #fffbeb;
  --warning-border: #fcd34d;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --danger-border: #fca5a5;
  --info: #7c3aed;
  --info-bg: #f5f3ff;
  --info-border: #c4b5fd;

  /* Surfaces */
  --page-bg: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --border: #e5e7eb;
  --border-2: #d1d5db;

  /* Radius */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 9999px;

  /* Shadows — SUBTLE only */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .04);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .07), 0 1px 2px -1px rgba(0, 0, 0, .06);
  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, .09), 0 2px 4px -2px rgba(0, 0, 0, .05);
  --shadow-nav: 0 1px 0 0 rgba(255, 255, 255, .05);

  /* Transitions */
  --ease: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Font */
  --font: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ── 3. RESET ───────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 14px;
}

html,
body,
#app {
  background: var(--page-bg) !important;
  background-image: none !important;
  background-color: var(--page-bg) !important;
}

body {
  font-family: var(--font) !important;
  background: var(--page-bg) !important;
  color: var(--n-800) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  min-height: 100vh;
}

/* Kill any gradient/color leaking from Bootstrap compiled scss */
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  text-decoration: none !important;
  transition: var(--ease);
}


/* ── 4. NAVBAR ─────────────────────────────────────────────────── */
.navbar.navbar-light.bg-white.shadow-sm {
  background: var(--brand-900) !important;
  box-shadow: var(--shadow-nav) !important;
  padding: 0 !important;
  position: sticky;
  top: 0;
  z-index: 1050;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

/* Brand logo area */
.navbar-brand {
  padding: 14px 24px !important;
  border-right: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
}

.navbar-brand:hover {
  background: rgba(255, 255, 255, .04) !important;
}

.navbar-brand img {
  width: 120px !important;
  filter: brightness(0) invert(1);
}

.navbar-toggler {
  border: 1px solid rgba(255, 255, 255, .2) !important;
  padding: 5px 10px;
  border-radius: var(--r-sm) !important;
  margin-right: 12px;
}

.navbar-toggler-icon {
  filter: invert(1);
}

/* Menu items */
.navbar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: stretch;
}

.menu-item {
  position: relative;
  display: flex;
  align-items: stretch;
}

.menu-link,
.navbar-menu .nav-link {
  display: flex !important;
  align-items: center;
  gap: 7px;
  padding: 0 20px !important;
  height: 56px;
  color: rgba(255, 255, 255, .72) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: var(--ease) !important;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.menu-link:hover,
.navbar-menu .nav-link:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .06) !important;
  border-bottom-color: var(--teal-400);
}

/* Kill old nav-link pseudo */
.nav-link::before {
  display: none !important;
}

.nav-link::after {
  display: none !important;
}

.menu-link::after {
  display: none !important;
}

.menu-icon {
  flex-shrink: 0;
  opacity: .65;
}

/* ── Dropdown ── */
.menu-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  background: var(--white);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .16), 0 4px 8px rgba(0, 0, 0, .08);
  padding: 6px;
  min-width: 190px;
  border: 1px solid var(--border);
  border-top: none;
}

.menu-dropdown.active {
  display: block;
  animation: ddFade .16s ease;
}

@keyframes ddFade {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

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

.menu-dropdown a.menu-item,
.menu-dropdown>a {
  display: flex !important;
  align-items: center;
  width: 100%;
  padding: 9px 14px !important;
  border-radius: var(--r-sm) !important;
  color: var(--n-700) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: var(--ease);
  height: auto !important;
  border-bottom: none !important;
}

.menu-dropdown a.menu-item:hover,
.menu-dropdown>a:hover {
  background: var(--brand-50) !important;
  color: var(--brand-600) !important;
}

.menu-dropdown hr {
  margin: 5px 0;
  border-color: var(--border);
}

/* Align right-side dropdown to the right */
.navbar-menu.ms-auto .menu-dropdown {
  left: auto;
  right: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}


/* ── 5. MAIN LAYOUT & PAGE WRAPPER ─────────────────────────────── */
main.py-4 {
  padding: 24px 0 40px !important;
}

/* Horizontal padding on the main container — all pages */
main .container-fluid {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

/* Completely remove the outer heavy card bootstrap adds */
main .container-fluid>.row>.col-md-12>.card {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

main .container-fluid>.row>.col-md-12>.card>.card-body {
  padding: 0 !important;
  background: transparent !important;
}

/* ── 6. LOGIN / AUTH PAGES ──────────────────────────────────────── */

/* Override the body background when on auth page */
body .container>.row.justify-content-center {
  min-height: calc(100vh - 57px);
  align-items: center;
  padding: 40px 0;
}

/* Auth card outer col — remove Bootstrap's wrapping card */
body .container>.row.justify-content-center>.col-md-8 {
  max-width: 440px !important;
  flex: 0 0 auto;
  width: 100%;
  padding: 0 16px;
}

body .container>.row.justify-content-center>.col-md-8>.card {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
  background: var(--white) !important;
}

/* Auth card header */
body .container>.row.justify-content-center>.col-md-8>.card .card-header {
  background: var(--white) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 28px 36px 20px !important;
  text-align: left;
  position: relative;
}

body .container>.row.justify-content-center>.col-md-8>.card .card-header::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-500), var(--teal-400));
  border-radius: var(--r-pill);
  margin-bottom: 12px;
}

body .container>.row.justify-content-center>.col-md-8>.card .card-header {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--n-900) !important;
  letter-spacing: -.02em;
  line-height: 1;
}

/* Auth card body */
body .container>.row.justify-content-center>.col-md-8>.card .card-body {
  padding: 28px 36px 36px !important;
  background: var(--white) !important;
}

/* Auth labels */
body .container>.row.justify-content-center .col-form-label {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--n-600) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding-bottom: 6px !important;
  text-align: left !important;
}

/* Override the col-md-4 label layout to stack vertically */
body .container>.row.justify-content-center .row.mb-3 {
  flex-direction: column !important;
  margin-bottom: 18px !important;
}

body .container>.row.justify-content-center .col-md-4.col-form-label {
  max-width: 100% !important;
  flex: none !important;
  width: 100% !important;
}

body .container>.row.justify-content-center .col-md-6 {
  max-width: 100% !important;
  flex: none !important;
  width: 100% !important;
}

body .container>.row.justify-content-center .col-md-8.offset-md-4 {
  max-width: 100% !important;
  flex: none !important;
  width: 100% !important;
  margin-left: 0 !important;
}

body .container>.row.justify-content-center .col-md-6.offset-md-4 {
  max-width: 100% !important;
  flex: none !important;
  width: 100% !important;
  margin-left: 0 !important;
}

/* Auth inputs */
body .container>.row.justify-content-center .form-control {
  border: 1.5px solid var(--n-200) !important;
  border-radius: var(--r-md) !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  font-family: var(--font) !important;
  color: var(--n-900) !important;
  background: var(--n-50) !important;
  transition: var(--ease) !important;
  box-shadow: none !important;
}

body .container>.row.justify-content-center .form-control:focus {
  border-color: var(--brand-500) !important;
  background: var(--white) !important;
  box-shadow: 0 0 0 3px rgba(33, 113, 199, .13) !important;
  outline: none !important;
}

/* Auth login button */
body .container>.row.justify-content-center .btn-primary {
  width: 100% !important;
  padding: 13px !important;
  background: var(--brand-800) !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: .03em;
  box-shadow: none !important;
  transition: var(--ease) !important;
}

body .container>.row.justify-content-center .btn-primary:hover {
  background: var(--brand-700) !important;
  transform: none;
}

/* Auth forgot link */
body .container>.row.justify-content-center .btn-link {
  color: var(--brand-500) !important;
  font-size: 13px;
  font-weight: 600;
  padding: 0;
  display: block;
  text-align: center;
  margin-top: 12px;
}

body .container>.row.justify-content-center .btn-link:hover {
  color: var(--brand-600) !important;
  text-decoration: underline !important;
}

/* Remember me */
body .container>.row.justify-content-center .form-check-label {
  font-size: 13px;
  color: var(--n-500);
  font-weight: 500;
}

body .container>.row.justify-content-center .form-check-input:checked {
  background-color: var(--brand-500) !important;
  border-color: var(--brand-500) !important;
}

/* row.mb-0 — button row */
body .container>.row.justify-content-center .row.mb-0 {
  flex-direction: column !important;
}

/* ── 7. PAGE SECTION CARD (inner content wrapper) ─────────────── */
/* The real content card that wraps each page section */
.card {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--white) !important;
  transition: var(--ease);
}

.card-header {
  background: var(--white) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 14px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--n-800) !important;
  border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
}

.card-body {
  padding: 20px !important;
}

/* ── 8. PAGE HEADER ROW (Manage Tickets + buttons) ───────────── */
.col-lg-12.margin-tb {
  padding-right: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.pull-left h5,
.col-lg-12 h5,
h5 {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--n-900) !important;
  letter-spacing: -.02em;
  margin: 0 !important;
}

.pull-right {
  float: none !important;
  margin-top: 0 !important;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── 9. BUTTONS ──────────────────────────────────────────────── */
.btn {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border-radius: var(--r-md) !important;
  padding: 8px 18px !important;
  border: 1.5px solid transparent !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: var(--ease) !important;
  white-space: nowrap;
  box-shadow: none !important;
  line-height: 1.5;
}

.btn:hover {
  transform: none;
}

.btn:active {
  transform: none;
}

.btn-sm {
  padding: 6px 12px !important;
  font-size: 12.5px !important;
  border-radius: var(--r-sm) !important;
}

/* Primary */
.btn-primary {
  background: var(--brand-800) !important;
  border-color: var(--brand-800) !important;
  color: #fff !important;
}

.btn-primary:hover {
  background: var(--brand-700) !important;
  border-color: var(--brand-700) !important;
  color: #fff !important;
}

/* Success */
.btn-success {
  background: var(--success) !important;
  border-color: var(--success) !important;
  color: #fff !important;
}

.btn-success:hover {
  background: #047857 !important;
  border-color: #047857 !important;
  color: #fff !important;
}

/* Danger */
.btn-danger {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #fff !important;
}

.btn-danger:hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #fff !important;
}

/* Dark */
.btn-dark {
  background: var(--n-800) !important;
  border-color: var(--n-800) !important;
  color: #fff !important;
}

.btn-dark:hover {
  background: var(--n-900) !important;
  border-color: var(--n-900) !important;
  color: #fff !important;
}

/* Warning */
.btn-warning {
  background: var(--warning) !important;
  border-color: var(--warning) !important;
  color: #fff !important;
}

/* Outline secondary (for filter/clear) */
.btn-outline-secondary {
  background: transparent !important;
  border-color: var(--border-2) !important;
  color: var(--n-600) !important;
}

.btn-outline-secondary:hover {
  background: var(--n-100) !important;
  color: var(--n-800) !important;
}

/* ── 10. FORM CONTROLS ────────────────────────────────────────── */
.form-control,
.form-select {
  font-family: var(--font) !important;
  border: 1.5px solid var(--n-200) !important;
  border-radius: var(--r-md) !important;
  padding: 9px 13px !important;
  font-size: 13.5px !important;
  color: var(--n-900) !important;
  background: var(--n-50) !important;
  transition: var(--ease) !important;
  box-shadow: none !important;
  line-height: 1.5;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-500) !important;
  background: var(--white) !important;
  box-shadow: 0 0 0 3px rgba(33, 113, 199, .12) !important;
  outline: none !important;
}

.form-control::placeholder {
  color: var(--n-400) !important;
  font-weight: 400;
}

.form-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--n-500) !important;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 5px !important;
}

textarea.form-control {
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
}

/* ── 11. TABLE ───────────────────────────────────────────────── */
.table-scroll {
  overflow-x: auto;
  border-radius: var(--r-md);
  border: 1px solid #e9ecef;
  overflow: hidden;
}

.table {
  width: 100%;
  border-collapse: collapse !important;
  font-family: var(--font) !important;
  margin-bottom: 0 !important;
  background: var(--white) !important;
}

/* Header row — dark, professional */
.table tr.trData:first-child,
.table thead tr {
  background: #1e293b !important;
}

.table th,
.table thead th {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(255, 255, 255, .72) !important;
  background: transparent !important;
  padding: 13px 14px !important;
  border: none !important;
  border-right: 1px solid rgba(255, 255, 255, .06) !important;
  white-space: nowrap;
  vertical-align: middle !important;
}

.table th:last-child {
  border-right: none !important;
}

/* Body cells — white background, light dividers */
.table td {
  font-size: 12px !important;
  color: var(--n-700) !important;
  padding: 11px 14px !important;
  border-bottom: 1px solid #edf0f4 !important;
  border-right: 1px solid #edf0f4 !important;
  border-top: none !important;
  vertical-align: middle !important;
  background: var(--white);
}

.table td:last-child {
  border-right: none !important;
}

/* ── ZEBRA STRIPING — Subtle, professional ── */
/* Even rows — pure white */
.table tbody tr:nth-child(even) td,
.table tr.trData:not(:first-child):nth-child(even) td {
  background: #ffffff !important;
}

/* Odd rows — very light cool gray */
.table tbody tr:nth-child(odd) td,
.table tr.trData:not(:first-child):nth-child(odd) td {
  background: #f7f9fc !important;
}

/* Hover overrides striping — soft blue tint */
.table-hover tbody tr:hover td,
.table tr.trData:not(:first-child):hover td {
  background: #edf4ff !important;
  cursor: pointer;
}

/* ── 12. SEARCH BAR ───────────────────────────────────────────── */
#simpleSearch {
  padding: 10px 14px 10px 40px !important;
  border-radius: var(--r-md) !important;
  border: 1.5px solid var(--n-200) !important;
  font-size: 13.5px !important;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='%239ca3af' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") no-repeat 13px center !important;
  transition: var(--ease) !important;
  box-shadow: var(--shadow-xs) !important;
  color: var(--n-900) !important;
}

#simpleSearch:focus {
  border-color: var(--brand-500) !important;
  box-shadow: 0 0 0 3px rgba(33, 113, 199, .12) !important;
  background-color: var(--white) !important;
}

/* ── 13. ACTION ICONS ─────────────────────────────────────────── */
.action-icons {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm) !important;
  color: var(--n-500) !important;
  font-size: 14px !important;
  transition: var(--ease) !important;
  padding: 0 !important;
  margin: 0 1px;
}

.action-icons:hover {
  color: var(--brand-600) !important;
  background: var(--brand-50) !important;
}

/* ── 14. BADGES ──────────────────────────────────────────────── */
.badge {
  font-family: var(--font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: var(--r-pill) !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.badge.bg-success {
  background: var(--success) !important;
}

.badge.bg-danger {
  background: var(--danger) !important;
}

.badge.bg-primary {
  background: var(--brand-600) !important;
}

.badge.bg-warning {
  background: var(--warning) !important;
  color: #fff !important;
}

/* Inline status label in table */
div.label {
  display: inline-block;
  /*padding: 2px 10px !important;*/
  /*border-radius: var(--r-pill) !important;*/
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 8px !important;
padding : 10px !important; 
}

/* ── 15. ADVANCED FILTER PANEL ───────────────────────────────── */
#advancedFilters {
  display: none;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  margin: 14px 0;
}

/* ── 16. BULK ACTION ROW ─────────────────────────────────────── */
#bulk-opt {
  background: var(--n-50);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 14px;
  align-items: center;
  margin-bottom: 10px;
}

/* ── 17. TABS ────────────────────────────────────────────────── */
/* ── 17. TABS ──────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 2px solid var(--border) !important;
  gap: 0;
  padding: 0 4px;
}

.nav-tabs .nav-item .nav-link {
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--n-500) !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  padding: 12px 20px !important;
  margin-bottom: -2px;
  transition: var(--ease) !important;
  background: transparent !important;
  letter-spacing: .01em;
}

.nav-tabs .nav-item .nav-link:hover {
  color: var(--n-800) !important;
  background: var(--n-50) !important;
}

.nav-tabs .nav-item .nav-link.active {
  color: var(--brand-700) !important;
  border-bottom-color: var(--brand-600) !important;
  background: transparent !important;
  font-weight: 700 !important;
}

/* Tab content area */
.tab-content {
  padding-top: 0 !important;
}

.tab-content>.active {
  margin-top: 0 !important;
  padding-top: 20px;
}

/* ── 18. FORM GROUP — GLOBAL ─────────────────────────────────── */

/*
  Base: Label stacks ABOVE input on create/edit forms.
  <div class="form-group"><strong>Label</strong><input/select></div>
*/
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 0 !important;
  background: transparent !important;
}

.form-group:hover {
  background: transparent !important;
}

/* Label on create/edit pages */
.form-group>strong:first-child {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--n-500) !important;
  margin-bottom: 6px !important;
  min-width: unset !important;
  flex-shrink: unset !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  line-height: 1.4;
}

/* ── TICKET SHOW — INFO GRID (#ticket-details tab) ────────────── */

/*
  Use flex-wrap (NOT display:grid) because Bootstrap tabs force
  display:block on .tab-pane.active which conflicts with CSS grid,
  causing blank space. Flex-wrap with 50% width children is safe.
*/
.tab-pane.fade {
  display: none !important;
}

.tab-pane.fade.active.show {
  display: flex !important;
}

#ticket-details {
  /* display: flex !important; */
  flex-wrap: wrap !important;
  background: var(--white);
  border: 1px solid #e8ecf2;
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: 0 !important;
  margin-top: 0 !important;
}

/* Each field row: 50% width = 2 columns */
#ticket-details>.col-xs-12 {
  flex: 0 0 50% !important;
  max-width: 50% !important;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #f0f3f8;
  border-right: 1px solid #f0f3f8;
  min-height: 52px;
  padding: 0 !important;
}

/* Even items: right column, no right border */
#ticket-details>.col-xs-12:nth-child(2n) {
  border-right: none;
}

/* Last 2 items: no bottom border */
#ticket-details>.col-xs-12:nth-last-child(-n+2) {
  border-bottom: none;
}

/* form-group inside info grid: horizontal row */
#ticket-details>.col-xs-12>.form-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
  width: 100%;
  min-height: 52px;
}

#ticket-details>.col-xs-12>.form-group:hover {
  background: transparent !important;
}

/* Shaded label cell in info grid */
#ticket-details>.col-xs-12>.form-group>strong:first-child {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  min-width: 132px !important;
  /* max-width: 246px !important; */
  background: #f8fafc !important;
  border-right: 1px solid #edf0f5 !important;
  border-bottom: none !important;
  padding: 24px 12px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: #7c8fa6 !important;
  margin-bottom: 0 !important;
  line-height: 1.3 !important;
  margin-right: 12px !important;
}

/* The whole form-group flex-row also sets the value text style */
#ticket-details>.col-xs-12>.form-group {
  font-size: 13px;
  color: var(--n-800);
  font-weight: 500;
  align-items: center !important;
  line-height: 1.5;
  padding-left: 0 !important;
}

/* ── 19. QUERY RESPONSE THREAD (inside #notes tab) ────────────── */

/* Notes tab layout */
#notes>.container-fluid>.row {
  gap: 0;
  align-items: flex-start;
}

/* Left panel: query + responses */
#notes .col-8 {
  background: var(--n-50);
  border-radius: var(--r-lg);
  border: 1px solid #e8ecf2;
  padding: 20px 20px 16px !important;
}

/* Initial query header */
#notes .col-8>strong {
  display: block;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--brand-800) !important;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #dde3ed;
  text-transform: none;
  letter-spacing: normal;
}

/* Query body text */
#notes .col-8>br+* {
  display: block;
}

/* Response thread container */
#notes .col-8 .response {
  margin-top: 14px !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Right panel: response form */
#notes .col-4 {
  padding-left: 16px !important;
}

#notes .col-4>form,
#notes .col-4>.container-fluid {
  background: var(--white);
  border: 1px solid #e8ecf2;
  border-radius: var(--r-lg);
  padding: 20px !important;
  position: sticky;
  top: 80px;
}

#notes .col-4 .form-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 !important;
  border-bottom: none !important;
  background: transparent !important;
}

#notes .col-4 .form-group strong {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--n-800) !important;
  text-transform: none;
  letter-spacing: normal;
  min-width: unset;
  background: transparent;
  border: none;
  padding: 0 0 8px 0 !important;
  display: block !important;
  margin-bottom: 0 !important;
}

#notes .col-4 textarea.form-control {
  border-radius: var(--r-md) !important;
  border: 1.5px solid var(--n-200) !important;
  font-size: 13px !important;
  resize: vertical;
  margin-top: 0;
}

#notes .col-4 .btn-primary {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

#notes .col-4 .row.mb-3 {
  margin-bottom: 10px !important;
  flex-direction: column !important;
}

/* Response bubbles — styled conversation cards */
.responder-person,
.responder-person-q {
  background: var(--white);
  border: 1px solid #e8ecf2;
  border-radius: var(--r-md) !important;
  padding: 12px 14px;
  margin-bottom: 0 !important;
  position: relative;
}

.responder-person {
  border-left: 3px solid var(--brand-400);
}

.responder-person-q {
  border-left: 3px solid var(--teal-400);
}

.responder-person>strong,
.responder-person-q>strong {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #212529 !important;
  text-transform: none;
  letter-spacing: normal;
  display: block;
  margin-bottom: 2px;
}

.responder-person p,
.responder-person-q p {
  font-size: 11.5px !important;
  color: var(--n-400) !important;
  margin: 0 0 6px !important;
}

p.mb20 {
  font-size: 13px !important;
  color: #212529 !important;
  line-height: 1.7;
  margin: 0 !important;
}

/* ── ATTACHMENTS TAB (#attachments) ──────────────────────────── */

/* Left panel */
#attachments .col-8.attachements-control {
  padding-right: 16px !important;
}

#attachments .col-8 .form-group {
  padding: 0 !important;
  border-bottom: none !important;
  background: transparent !important;
}

/* Attachment list header bubble */
#attachments .responder-person {
  margin-bottom: 12px !important;
  background: var(--white);
  border-left: 3px solid var(--brand-300);
}

/* File list */
.attachments-listing-control {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
}

.attachments-listing-control li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid #eaedf2;
  border-radius: var(--r-md);
  margin-bottom: 6px;
  transition: var(--ease);
  background: var(--white);
  margin-left: 0 !important;
  font-size: 13px;
  color: var(--n-700);
}

.attachments-listing-control li:hover {
  background: var(--brand-50);
  border-color: var(--brand-200);
}

.attachments-listing-control li i {
  color: var(--brand-500);
  font-size: 15px;
  flex-shrink: 0;
}

.attachments-listing-control li a {
  color: var(--brand-600) !important;
  font-size: 13px;
  font-weight: 500;
}

/* Right panel: upload form */
#attachments .col-4 {
  padding-left: 16px !important;
}

#attachments .col-4 form {
  background: var(--white);
  border: 1px solid #e8ecf2;
  border-radius: var(--r-lg);
  padding: 20px !important;
  position: sticky;
  top: 80px;
}

#attachments .col-4 .form-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--n-500) !important;
  margin-bottom: 6px !important;
}

#attachments .col-4 input[type="file"].form-control {
  background: var(--n-50) !important;
  border: 2px dashed var(--n-200) !important;
  border-radius: var(--r-md) !important;
  padding: 14px !important;
  font-size: 12.5px;
  cursor: pointer;
  color: var(--n-600) !important;
}

#attachments .col-4 input[type="file"].form-control:hover {
  border-color: var(--brand-400) !important;
  background: var(--brand-50) !important;
}

#attachments .col-4 .btn-primary {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

/* ── TICKET HISTORY TAB (#log) ───────────────────────────────── */

#log {
  padding: 4px 0;
}

#log ol {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative;
}

/* Vertical timeline line */
#log ol::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(to bottom, var(--brand-300), #e2e8f0);
  border-radius: 2px;
}

#log li {
  position: relative;
  padding: 10px 14px 10px 36px !important;
  border-bottom: 1px solid #f0f3f8 !important;
  font-size: 12.5px !important;
  color: var(--n-700) !important;
  line-height: 1.6;
  background: var(--white);
  transition: var(--ease);
}

#log li:hover {
  background: #f8fafc;
}

#log li:last-child {
  border-bottom: none !important;
}

/* Timeline dot */
#log li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-500);
  border: 2px solid var(--white);
  box-shadow: 0 0 0 2px var(--brand-300);
}

/* Wrap the log ol in a styled container */
#log>ol {
  background: var(--white);
  border: 1px solid #e8ecf2;
  border-radius: var(--r-lg);
  overflow: hidden;
}

#log.active {
  background: var(--white);
  border: 1px solid #e8ecf2;
  border-radius: var(--r-lg);
  overflow: hidden;
  width: 100%;
  padding: 0px !important;
}

#log.active ol {
  width: 100% !important;
  padding-left: 12px !important;
}

/* ── 20. ALERTS ──────────────────────────────────────────────── */
.alert {
  border: 1px solid transparent !important;
  border-radius: var(--r-md) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 13px 16px !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

.alert-success {
  background: var(--success-bg) !important;
  border-color: var(--success-border) !important;
  color: #065f46 !important;
}

.alert-danger {
  background: var(--danger-bg) !important;
  border-color: var(--danger-border) !important;
  color: #991b1b !important;
}

.alert-warning {
  background: var(--warning-bg) !important;
  border-color: var(--warning-border) !important;
  color: #92400e !important;
}

.alert-info {
  background: var(--info-bg) !important;
  border-color: var(--info-border) !important;
  color: #4c1d95 !important;
}

/* ── 21. MODAL ───────────────────────────────────────────────── */
.modal-content {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .16) !important;
  overflow: hidden;
}

.modal-header {
  background: var(--n-900) !important;
  border-bottom: none !important;
  padding: 20px 24px !important;
}

.modal-header .modal-title {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: -.01em;
}

.modal-header .btn-close,
.modal-header .close {
  filter: invert(1) !important;
  opacity: .7;
}

.modal-body {
  padding: 24px !important;
}

.modal-footer {
  border-top: 1px solid var(--border) !important;
  padding: 14px 24px !important;
}

/* ── 22. PAGINATION ──────────────────────────────────────────── */
#pagination {
  margin-top: 16px;
}

.pagination {
  gap: 3px;
  justify-content: flex-end !important;
  flex-wrap: wrap;
}

.page-item .page-link {
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--n-600) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: 6px 12px !important;
  background: var(--white) !important;
  transition: var(--ease) !important;
  box-shadow: none !important;
}

.page-item .page-link:hover {
  background: var(--brand-50) !important;
  color: var(--brand-600) !important;
  border-color: var(--brand-300) !important;
}

.page-item.active .page-link {
  background: var(--brand-800) !important;
  border-color: var(--brand-800) !important;
  color: #fff !important;
}

.page-item.disabled .page-link {
  background: var(--n-50) !important;
  color: var(--n-300) !important;
  border-color: var(--border) !important;
}

/* ── 23. SELECT2 ─────────────────────────────────────────────── */
.select2.select2-container {
  width: 100% !important;
}

.select2-selection.select2-selection--single,
.select2-selection.select2-selection--multiple {
  border: 1.5px solid var(--n-200) !important;
  border-radius: var(--r-md) !important;
  background: var(--n-50) !important;
  font-family: var(--font) !important;
  font-size: 13.5px !important;
  transition: var(--ease);
}

.select2-selection.select2-selection--single {
  height: 38px !important;
  padding: 5px 10px !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--brand-500) !important;
  box-shadow: 0 0 0 3px rgba(33, 113, 199, .12) !important;
}

.select2-dropdown {
  border: 1.5px solid var(--n-200) !important;
  border-radius: var(--r-md) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .10) !important;
  font-family: var(--font) !important;
  font-size: 13.5px !important;
  overflow: hidden;
}

.select2-results__option--highlighted {
  background: var(--brand-800) !important;
  color: #fff !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--brand-100) !important;
  border: 1px solid var(--brand-300) !important;
  color: var(--brand-800) !important;
  border-radius: var(--r-pill) !important;
  padding: 1px 8px !important;
  font-size: 12px !important;
}

.select2-selection__arrow {
  top: 5px !important;
}

.select2-search__field {
  border: none !important;
  font-family: var(--font) !important;
}

/* ── 24. ATTACHMENT LIST ─────────────────────────────────────── */
.attachments-listing-control {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.attachments-listing-control li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: 5px;
  transition: var(--ease);
  margin-left: 0 !important;
}

.attachments-listing-control li:hover {
  background: var(--brand-50);
  border-color: var(--brand-200);
}

.attachments-listing-control li a {
  color: var(--brand-600) !important;
  font-size: 13px;
  font-weight: 500;
}

.ticket-attachements {
  border-left: 2px solid var(--border) !important;
  padding-left: 20px !important;
  margin-left: 0 !important;
}

/* ── 25. TICKET HISTORY LOG ──────────────────────────────────── */
#log ol {
  padding-left: 18px;
}

#log li {
  padding: 9px 0;
  border-bottom: 1px solid var(--n-100);
  font-size: 13px;
  color: var(--n-700);
  line-height: 1.5;
}

/* ── 26. TOASTR ──────────────────────────────────────────────── */
#toast-container>div {
  border-radius: var(--r-md) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .14) !important;
  font-family: var(--font) !important;
  font-size: 13.5px !important;
  padding: 13px 16px !important;
  opacity: 1 !important;
}

.toast-success {
  background: var(--success) !important;
}

.toast-error {
  background: var(--danger) !important;
}

.toast-warning {
  background: var(--warning) !important;
}

/* ── 27. SWEETALERT2 ─────────────────────────────────────────── */
.swal2-popup {
  border-radius: var(--r-xl) !important;
  font-family: var(--font) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .18) !important;
  padding: 32px !important;
}

.swal2-title {
  font-weight: 800 !important;
  color: var(--n-900) !important;
  font-size: 18px !important;
}

.swal2-confirm {
  background: var(--brand-800) !important;
  border-radius: var(--r-md) !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  padding: 10px 24px !important;
  box-shadow: none !important;
}

.swal2-cancel {
  border-radius: var(--r-md) !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  padding: 10px 24px !important;
}

/* ── 28. INVALID FEEDBACK ────────────────────────────────────── */
.invalid-feedback {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--danger) !important;
  margin-top: 5px;
}

.form-control.is-invalid {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .1) !important;
}

/* ── 29. CHECKBOX ────────────────────────────────────────────── */
input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--brand-600);
  cursor: pointer;
}

/* ── 30. SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--n-100);
}

::-webkit-scrollbar-thumb {
  background: var(--n-300);
  border-radius: var(--r-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--n-400);
}

/* ── 31. MISC ────────────────────────────────────────────────── */
hr {
  border-color: var(--border) !important;
  opacity: 1 !important;
  margin: 12px 0 !important;
}

button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
  opacity: .5 !important;
  cursor: not-allowed !important;
}

.text-right {
  text-align: right !important;
}

.text-sm {
  font-size: 12px !important;
}

.list-control {
  padding: 0 !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
}

.add-response {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 12px;
}

/* ── 32. RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 768px) {

  .menu-link,
  .navbar-menu .nav-link {
    height: auto;
    padding: 12px 16px !important;
    border-bottom: none !important;
    border-radius: 0;
  }

  .menu-link:hover,
  .navbar-menu .nav-link:hover {
    border-bottom: none !important;
  }

  .menu-dropdown {
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .04) !important;
    padding: 0 0 4px 16px !important;
  }

  .menu-dropdown a.menu-item {
    color: rgba(255, 255, 255, .7) !important;
  }

  .menu-dropdown a.menu-item:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
  }

  .col-lg-12.margin-tb {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .pull-right {
    flex-wrap: wrap;
  }

  body .container>.row.justify-content-center>.col-md-8 {
    max-width: 100% !important;
  }

  body .container>.row.justify-content-center>.col-md-8>.card .card-body {
    padding: 20px 20px 28px !important;
  }

  body .container>.row.justify-content-center>.col-md-8>.card .card-header {
    padding: 20px 20px 14px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   COMPREHENSIVE CREATE / EDIT FORM STYLING
   Applies to: tickets, users, roles, wips, insurances, query_types
   ══════════════════════════════════════════════════════════════ */

/* Any form-group inside a .row > [col-*] context:
   label stacks above input */
.row>[class*="col"]>.form-group,
.row>[class*="col-sm"]>.form-group,
.row>[class*="col-xs"]>.form-group,
.row>[class*="col-md"]>.form-group,
.row>[class*="col-lg"]>.form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding-bottom: 8px !important;
  border-bottom: none !important;
  align-items: flex-start !important;
}

.row>[class*="col"]>.form-group>strong:first-child,
.row>[class*="col-sm"]>.form-group>strong:first-child,
.row>[class*="col-xs"]>.form-group>strong:first-child,
.row>[class*="col-md"]>.form-group>strong:first-child,
.row>[class*="col-lg"]>.form-group>strong:first-child {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--n-500) !important;
  margin-bottom: 6px !important;
  min-width: unset !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  line-height: 1.4;
}

/* Nested .row inside a .row (ticket create/edit has these) */
.row .row>[class*="col"]>.form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding-bottom: 8px !important;
  border-bottom: none !important;
}

.row .row>[class*="col"]>.form-group>strong:first-child {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--n-500) !important;
  margin-bottom: 6px !important;
  min-width: unset !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* ── Form section spacing (mb-3, mt-3 rows on create/edit) ──── */
.row.mb-3,
.row.mt-3 {
  margin-bottom: 8px !important;
}

/* ── Row spacing between field groups on create pages ─────── */
form>.row,
form .row.mb-3,
form .row.mt-3 {
  margin-bottom: 8px;
}

/* ── Submit button row ─────────────────────────────────────── */
form .row>[class*="col"]>button.btn,
form .row>[class*="col"] .btn-primary.btn-sm {
  margin-top: 8px;
}

/* ── Ticket Edit: left panel (form) ───────────────────────── */
.container-fluid>.row>.col-sm-8>form {
  background: var(--white);
  border: 1px solid #e8ecf2;
  border-radius: var(--r-lg);
  padding: 20px 24px !important;
}

/* ── Ticket Edit: right panel (attachments) ───────────────── */
.container-fluid>.row>.col-sm-4 .ticket-attachements {
  background: var(--white);
  border: 1px solid #e8ecf2 !important;
  border-radius: var(--r-lg);
  padding: 16px !important;
  border-left: none !important;
}

/* ─── Edit page response section at bottom ──────────────── */
.add-response {
  background: var(--white);
  border: 1px solid #e8ecf2;
  border-radius: var(--r-lg);
  padding: 20px 24px !important;
  margin-top: 16px;
}

.add-response .form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 0;
  padding-bottom: 12px;
  border-bottom: none !important;
}

.add-response .form-group>strong:first-child {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--n-500) !important;
  letter-spacing: .06em !important;
  margin-bottom: 8px !important;
  min-width: unset !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* ─── Users/Roles/WIPs/Insurances/QueryTypes create/edit ─── */

/* The .row.mt-3 on these pages wraps .col-xs-12 > .form-group */
.row.mt-3>.col-xs-12>.form-group,
.row.mt-3>[class*="col"]>.form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding-bottom: 16px !important;
  border-bottom: none !important;
}

.row.mt-3>.col-xs-12>.form-group>strong:first-child,
.row.mt-3>[class*="col"]>.form-group>strong:first-child {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--n-500) !important;
  margin-bottom: 6px !important;
  min-width: unset !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* ─── Page header row spacing ─────────────────────────────── */
.row.margin-tb {
  margin-bottom: 20px;
}

/* ─── Alert inside forms ───────────────────────────────────── */
form+.alert,
.alert+form,
.row+.alert {
  margin-top: 16px !important;
}

/* ─── Table wrapper — all model index pages ────────────────── */
.table-responsive,
.table-scroll {
  border-radius: var(--r-lg);
  border: 1px solid #eaedf2;
  overflow: hidden;
  margin-top: 16px;
  background: var(--white);
}

/* ─── Advanced filter row (tickets index) ──────────────────── */
#advancedFilters {
  background: var(--white);
  border: 1px solid #e8ecf2;
  border-radius: var(--r-lg);
  padding: 16px 20px;
  margin-top: 12px;
}

#advancedFilters .form-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--n-500) !important;
  margin-bottom: 4px !important;
}

/* ══════════════════════════════════════════════════════════════
   PAGE HEADER ROW — consistent title + action button layout
   used on: roles, users, wips, insurances, query_types, etc.
   ══════════════════════════════════════════════════════════════ */

.page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 4px;
  padding-bottom: 0;
}

.page-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--n-900) !important;
  margin: 0 !important;
  letter-spacing: -.01em;
}

.page-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── DATA TABLE WRAP ─────────────────────────────────────── */

.data-table-wrap {
  background: var(--white);
  border: 1px solid #e8ecf2;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.data-table-wrap .table {
  margin-bottom: 0 !important;
}

.data-table-wrap .table thead tr {
  background: #f8fafc !important;
}

.data-table-wrap .table thead th {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: #7c8fa6 !important;
  border-bottom: 1px solid #e8ecf2 !important;
  padding: 12px 16px !important;
  white-space: nowrap;
  background: #f8fafc !important;
}

.data-table-wrap .table tbody td {
  padding: 12px 16px !important;
  vertical-align: middle;
  border-bottom: 1px solid #f0f3f8 !important;
  font-size: 13px;
  color: var(--n-800);
}

.data-table-wrap .table tbody tr:last-child td {
  border-bottom: none !important;
}

.data-table-wrap .table tbody tr:nth-child(even) {
  background: #fafbfc;
}

.data-table-wrap .table tbody tr:hover {
  background: #f0f6ff !important;
}

/* ── ACTION BUTTONS (eye/pencil/trash in table rows) ─────── */

.action-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: #f0f3f8;
  color: var(--n-600) !important;
  font-size: 13px;
  text-decoration: none !important;
  transition: var(--ease);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}

.action-btn:hover {
  background: var(--brand-100);
  color: var(--brand-700) !important;
  border-color: var(--brand-200);
}

.action-btn--danger {
  color: #dc2626 !important;
}

.action-btn--danger:hover {
  background: #fee2e2;
  color: #b91c1c !important;
  border-color: #fecaca;
}

.action-btn--restore {
  width: auto !important;
  padding: 0 10px !important;
  color: var(--teal-600) !important;
  font-size: 12px !important;
  font-weight: 600;
}

.action-btn--restore:hover {
  background: var(--teal-50) !important;
  color: var(--teal-800) !important;
  border-color: var(--teal-200) !important;
}

/* ── STATUS PILLS ─────────────────────────────────────────── */

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: capitalize;
}

.status-pill--active {
  background: #d1fae5;
  color: #065f46;
}

.status-pill--inactive {
  background: #f3f4f6;
  color: #6b7280;
}

.status-pill--pending {
  background: #fef3c7;
  color: #92400e;
}

/* ── PERMISSION BADGES (roles index/show) ─────────────────── */

.permission-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.perm-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  text-transform: capitalize;
  white-space: nowrap;
}

.perm-badge--muted {
  background: #f3f4f6;
  color: #6b7280;
  border-color: #e5e7eb;
}

/* ── RECYCLE BIN INDICATOR ───────────────────────────────── */

.badge-trash-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
}

/* ── FORM CARD (roles/users create & edit) ────────────────── */

.form-card {
  background: var(--white);
  border: 1px solid #e8ecf2;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.form-card__section {
  padding: 20px 24px;
  border-bottom: 1px solid #f0f3f8;
}

.form-card__section:last-of-type {
  border-bottom: none;
}

.form-card__footer {
  padding: 16px 24px;
  background: #f8fafc;
  border-top: 1px solid #f0f3f8;
  display: flex;
  align-items: center;
  gap: 10px;
}

.field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--n-500);
  margin-bottom: 8px;
}

/* ── PERMISSION GRID (roles create/edit checkboxes) ─────────── */

.permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px 16px;
  margin-top: 4px;
}

.permission-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  transition: var(--ease);
  border: 1px solid transparent;
  user-select: none;
}

.permission-item:hover {
  background: var(--brand-50);
  border-color: var(--brand-100);
}

.perm-checkbox {
  width: 15px !important;
  height: 15px !important;
  border-radius: 3px !important;
  accent-color: var(--brand-600);
  cursor: pointer;
  flex-shrink: 0;
}

.perm-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--n-700);
  text-transform: capitalize;
}

/* ── BADGE STATUS (page title inline badge) ──────────────── */

.badge-status {
  display: inline-block;
  padding: 2px 10px;
  background: #d1fae5;
  color: #065f46;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

/* ── TABLE LINK STYLES ───────────────────────────────────── */

.table-id-link,
.table-name-link {
  color: var(--brand-700) !important;
  text-decoration: none !important;
  font-weight: 600;
}

.table-id-link:hover,
.table-name-link:hover {
  color: var(--brand-800) !important;
  text-decoration: underline !important;
}

/* ── PAGINATION WRAP ─────────────────────────────────────── */

.pagination-wrap {
  display: flex;
  justify-content: flex-start;
}

.pagination-wrap .pagination {
  gap: 2px;
}

.pagination-wrap .page-link {
  border-radius: 6px !important;
  border: 1px solid #e8ecf2 !important;
  color: var(--n-600) !important;
  font-size: 13px !important;
  padding: 6px 12px !important;
  transition: var(--ease);
}

.pagination-wrap .page-link:hover {
  background: var(--brand-50) !important;
  border-color: var(--brand-200) !important;
  color: var(--brand-700) !important;
}

.pagination-wrap .page-item.active .page-link {
  background: var(--brand-600) !important;
  border-color: var(--brand-600) !important;
  color: #fff !important;
}

/* ── FIX OLD PULL-LEFT / PULL-RIGHT → replaced by page-header-row */
/* But keep it working in pages we haven't redesigned yet */
.pull-left {
  float: left;
  width: 100%;
}

.pull-right {
  float: right;
}

/* ── ACTION-ICONS (old class used in some remaining blades) ── */
a.action-icons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: #f0f3f8;
  color: var(--n-600) !important;
  font-size: 13px;
  text-decoration: none !important;
  transition: var(--ease);
  border: 1px solid transparent;
  margin-right: 2px;
}

a.action-icons:hover {
  background: var(--brand-100);
  color: var(--brand-700) !important;
  border-color: var(--brand-200);
}

/* ── USERS TABLE SEARCH BAR ──────────────────────────────── */
#simpleSearchusers,
#simpleSearch {
  max-width: 100%;
}

/* ── GENERAL TABLE (non-wrapped, on pages not yet redesigned) */
.table:not(.data-table-wrap .table) {
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid #e8ecf2;
}

.table:not(.data-table-wrap .table) thead tr,
.table:not(.data-table-wrap .table)>tr:first-child {
  background: #f8fafc !important;
}

.table:not(.data-table-wrap .table) th {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: #7c8fa6 !important;
  border-bottom: 1px solid #e8ecf2 !important;
  padding: 12px 16px !important;
  background: #f8fafc !important;
}

.table:not(.data-table-wrap .table) td {
  padding: 12px 16px !important;
  border-bottom: 1px solid #f0f3f8 !important;
  font-size: 13px;
  color: var(--n-800);
  vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL PAGE LOADER
   White overlay with animated triple-ring spinner + brand name
   ══════════════════════════════════════════════════════════════ */

#page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(255, 255, 255, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  opacity: 1;
  visibility: visible;
}

#page-loader.loader--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Centered content: rings + brand text */
.loader-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

/* Triple concentric spinning rings */
.loader-ring {
  position: absolute;
  border-radius: 50%;
  border: 3px solid transparent;
  animation: loader-spin linear infinite;
}

.loader-ring:nth-child(1) {
  width: 60px;
  height: 60px;
  border-top-color: #0f3460;
  animation-duration: 1s;
  top: -30px;
}

.loader-ring:nth-child(2) {
  width: 44px;
  height: 44px;
  border-top-color: #1a6eb5;
  animation-duration: 0.75s;
  animation-direction: reverse;
  top: -22px;
}

.loader-ring:nth-child(3) {
  width: 28px;
  height: 28px;
  border-top-color: #38bdf8;
  animation-duration: 0.5s;
  top: -14px;
}

/* Brand label below the rings */
.loader-brand {
  margin-top: 52px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #0f3460;
  opacity: 0.7;
}

@keyframes loader-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ══════════════════════════════════════════════════════════════
   DASHBOARD — home.blade.php
   ══════════════════════════════════════════════════════════════ */

/* ── Welcome Banner ──────────────────────────────────────────── */
.dash-welcome {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: linear-gradient(135deg, #0f3460 0%, #1a5276 60%, #1a6eb5 100%);
  border-radius: var(--r-xl);
  padding: 28px 32px;
  color: #fff;
  margin-bottom: 4px;
}

.dash-welcome__greeting {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .75;
}

.dash-welcome__name {
  font-size: 22px;
  font-weight: 800;
  margin: 4px 0 6px;
  letter-spacing: -.02em;
}

.dash-welcome__sub {
  font-size: 13px;
  opacity: .8;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dash-role-pill {
  display: inline-block;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
}

.dash-welcome__date {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  opacity: .85;
  white-space: nowrap;
  margin-top: 4px;
}

/* ── Section Labels ──────────────────────────────────────────── */
.dash-section-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--n-500);
  margin-bottom: 10px;
}

/* ── Stat Card Grid ──────────────────────────────────────────── */
.dash-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
  gap: 14px;
}

.dash-stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1px solid #e8ecf2;
  border-radius: var(--r-lg);
  padding: 18px 16px 18px 20px;
  text-decoration: none !important;
  transition: var(--ease);
  position: relative;
  overflow: hidden;
  border-left: 4px solid transparent;
}

.dash-stat-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  border-radius: 50%;
  opacity: .06;
  background: currentColor;
  transform: translate(20px, -20px);
}

.dash-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.dash-stat-card--blue   { border-left-color: #3b82f6; color: #3b82f6; }
.dash-stat-card--amber  { border-left-color: #f59e0b; color: #f59e0b; }
.dash-stat-card--teal   { border-left-color: #14b8a6; color: #14b8a6; }
.dash-stat-card--green  { border-left-color: #22c55e; color: #22c55e; }
.dash-stat-card--navy   { border-left-color: #0f3460; color: #0f3460; }

.dash-stat-card__icon {
  font-size: 24px;
  flex-shrink: 0;
}

.dash-stat-card__body {
  flex: 1;
  min-width: 0;
}

.dash-stat-card__num {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: var(--n-900);
  letter-spacing: -.03em;
}

.dash-stat-card__label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--n-500);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.dash-stat-card__arrow {
  font-size: 14px;
  opacity: .35;
  transition: var(--ease);
}

.dash-stat-card:hover .dash-stat-card__arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* ── Mini Stats (4-col personal) ─────────────────────────────── */
.dash-stats-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.dash-mini-card {
  background: var(--white);
  border: 1px solid #e8ecf2;
  border-radius: var(--r-lg);
  padding: 18px 20px;
  text-align: center;
}

.dash-mini-card__num {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}

.dash-mini-card__num--blue  { color: #3b82f6; }
.dash-mini-card__num--amber { color: #f59e0b; }
.dash-mini-card__num--teal  { color: #14b8a6; }
.dash-mini-card__num--green { color: #22c55e; }

.dash-mini-card__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--n-500);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 6px;
}

/* ── Two-column layout ────────────────────────────────────────── */
.dash-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ── Panel (table card) ───────────────────────────────────────── */
.dash-panel {
  background: var(--white);
  border: 1px solid #e8ecf2;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.dash-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #f0f3f8;
  font-size: 13px;
  font-weight: 700;
  color: var(--n-800);
}

.dash-panel__action {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-600) !important;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  gap: 4px;
}

.dash-panel__action:hover {
  color: var(--brand-800) !important;
}

.dash-panel__count {
  font-size: 11px;
  font-weight: 600;
  color: var(--n-500);
  background: #f0f3f8;
  padding: 2px 10px;
  border-radius: 20px;
}

.dash-panel__body {
  padding: 0;
}

/* ── Mini Table inside panels ─────────────────────────────────── */
.dash-mini-table {
  width: 100%;
  border-collapse: collapse;
}

.dash-mini-table thead th {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: #9aacbf !important;
  padding: 10px 16px !important;
  background: #fafbfc !important;
  border-bottom: 1px solid #f0f3f8 !important;
  white-space: nowrap;
}

.dash-mini-table tbody td {
  padding: 10px 16px !important;
  font-size: 12.5px !important;
  color: var(--n-700);
  border-bottom: 1px solid #f8f9fb !important;
  vertical-align: middle;
}

.dash-mini-table tbody tr:last-child td {
  border-bottom: none !important;
}

.dash-mini-table tbody tr:hover {
  background: #f8fafc;
}

/* ── ID Link in tables ────────────────────────────────────────── */
.dash-id-link {
  font-weight: 700;
  color: var(--brand-600) !important;
  text-decoration: none !important;
}

.dash-id-link:hover {
  color: var(--brand-800) !important;
  text-decoration: underline !important;
}

/* ── Status Badges ────────────────────────────────────────────── */
.dash-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
}

.dash-badge--amber {
  background: #fef3c7;
  color: #92400e;
}

.dash-badge--teal {
  background: #ccfbf1;
  color: #0f766e;
}

.dash-badge--green {
  background: #d1fae5;
  color: #065f46;
}

/* ── Empty State ──────────────────────────────────────────────── */
.dash-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 20px;
  color: var(--n-400);
  font-size: 13px;
  text-align: center;
}

.dash-empty p { margin: 0; }

/* ── Quick Actions ────────────────────────────────────────────── */
.dash-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.dash-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--r-lg);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  transition: var(--ease);
  border: 1px solid transparent;
}

.dash-quick-btn i { font-size: 15px; }

.dash-quick-btn--blue   { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.dash-quick-btn--slate  { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.dash-quick-btn--indigo { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
.dash-quick-btn--violet { background: #f5f3ff; color: #7c3aed; border-color: #ddd6fe; }
.dash-quick-btn--teal   { background: #f0fdfa; color: #0f766e; border-color: #99f6e4; }
.dash-quick-btn--emerald{ background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.dash-quick-btn--amber  { background: #fffbeb; color: #92400e; border-color: #fde68a; }

.dash-quick-btn:hover {
  filter: brightness(.93);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

/* ── Responsive: collapse 4-col to 2-col on small screens ─────── */
@media (max-width: 1100px) {
  .dash-stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .dash-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dash-stats-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .dash-two-col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .dash-stats-grid {
    grid-template-columns: 1fr 1fr;
  }
  .dash-stats-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .dash-welcome {
    padding: 20px;
  }
  .dash-welcome__name {
    font-size: 18px;
  }
}

@media (max-width: 400px) {
  .dash-stats-grid,
  .dash-stats-grid--4 {
    grid-template-columns: 1fr;
  }
}