/*
 * ServiceHop Enterprise Theme (v1)
 * NON-NEGOTIABLE DESIGN CONTRACT - See DESIGN.md
 *
 * This file is the ONLY editable styling source for ServiceHop web UI.
 * All styling MUST be driven by tokens defined here.
 *
 * Golden Rules:
 * - Grayscale-first UI
 * - One accent color only (Corporate Blue)
 * - No template noise (gradients, rainbow badges, decorative KPIs)
 * - Evidence > decoration
 * - Minimal navigation
 */

/* ==========================================================================
   1. FONTS (Local - No External Dependencies)
   ========================================================================== */

/* Inter - UI Font */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter/Inter-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter/Inter-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter/Inter-SemiBold.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter/Inter-Bold.woff2') format('woff2');
}

/* JetBrains Mono - Code Font */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono/JetBrainsMono-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono/JetBrainsMono-Medium.woff2') format('woff2');
}

/* ==========================================================================
   2. DESIGN TOKENS (STRICT - per DESIGN.md Section 1)
   ========================================================================== */

:root {
  /* Font Stacks (DESIGN.md Section 2.1) */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Color Tokens (DESIGN.md Section 1.2 - EXACT) */
  --sh-bg:        #FFFFFF;
  --sh-bg-secondary: #F8F9FB;
  --sh-card:      #FFFFFF;
  --sh-border:    #E5E7EB;

  --sh-text:      #111827;
  --sh-text-muted:#6B7280;

  /* Corporate Palette (DESIGN.md Section 1.1) */
  --sh-blue-light:#7EC5FB;
  --sh-blue:      #5790F7;
  --sh-blue-dark: #223B86;

  --sh-success:   #059669;
  --sh-warning:   #D97706;
  --sh-danger:    #CC4649;

  /* Supplementary Corporate Colors */
  --sh-red-light:    #8FD9DA;
  --sh-yellow-light: #FCF4D0;

  /* Geometry (DESIGN.md Section 4) */
  --sh-radius-sm: 8px;   /* Buttons / Inputs */
  --sh-radius-md: 12px;  /* Cards / Panels */
  --sh-radius-lg: 16px;  /* Modals */
  /* Pills: FORBIDDEN */

  /* Shadows (DESIGN.md Section 5 - subtle and rare) */
  --sh-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);

  /* Transitions */
  --sh-transition: 150ms ease;

  /* Semantic Color Variants (subtle backgrounds for alerts/badges) */
  --sh-blue-subtle: rgba(87, 144, 247, 0.1);
  --sh-success-subtle: rgba(5, 150, 105, 0.1);
  --sh-warning-subtle: rgba(217, 119, 6, 0.1);
  --sh-danger-subtle: rgba(204, 70, 73, 0.1);
}

/* ==========================================================================
   3. BOOTSTRAP VARIABLE OVERRIDES
   ========================================================================== */

:root,
[data-bs-theme="light"] {
  color-scheme: light;

  /* Bootstrap color overrides */
  --bs-body-bg: var(--sh-bg);
  --bs-body-color: var(--sh-text);
  --bs-secondary-color: var(--sh-text-muted);
  --bs-border-color: var(--sh-border);

  --bs-primary: var(--sh-blue);
  --bs-primary-rgb: 87, 144, 247;
  --bs-link-color: var(--sh-blue);
  --bs-link-hover-color: var(--sh-blue-dark);

  --bs-success: var(--sh-success);
  --bs-warning: var(--sh-warning);
  --bs-danger: var(--sh-danger);

  /* Bootstrap font overrides */
  --bs-body-font-family: var(--font-sans);
  --bs-font-monospace: var(--font-mono);

  /* Bootstrap radius overrides */
  --bs-border-radius: var(--sh-radius-sm);
  --bs-border-radius-lg: var(--sh-radius-md);
  --bs-border-radius-xl: var(--sh-radius-lg);

  /* Bootstrap card overrides */
  --bs-card-border-radius: var(--sh-radius-md);
  --bs-card-bg: var(--sh-card);
  --bs-card-border-color: var(--sh-border);

  /* Bootstrap modal overrides */
  --bs-modal-border-radius: var(--sh-radius-lg);
}

/* ==========================================================================
   4. BASE STYLES (DESIGN.md Section 2.2)
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 14px;  /* DESIGN.md: Base font size 14px */
  line-height: 1.5; /* DESIGN.md: Line height 1.5 */
  color: var(--sh-text);
  background-color: var(--sh-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

::selection {
  background-color: var(--sh-blue-subtle);
  color: var(--sh-text);
}

/* ==========================================================================
   5. TYPOGRAPHY (DESIGN.md Section 2)
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-sans);
  font-weight: 600;  /* DESIGN.md: Headings weight 600 (never 800+) */
  color: var(--sh-text);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

/* No oversized hero typography (DESIGN.md Section 2.2) */
h1, .h1 { font-size: 1.75rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.875rem; }

p {
  margin-bottom: 1rem;
}

.text-muted {
  color: var(--sh-text-muted);
}

small, .small {
  font-size: 0.875rem;
}

.fw-medium {
  font-weight: 500;
}

.fw-semibold {
  font-weight: 600;
}

/* Code - DESIGN.md Section 2.3: Payload / JSON Rendering */
code, pre, kbd, samp, .font-monospace {
  font-family: var(--font-mono);
}

code {
  font-size: 0.875rem;
  background-color: #F3F4F6;
  padding: 0.125rem 0.375rem;
  border-radius: var(--sh-radius-sm);
  color: var(--sh-text);
}

/* Pre blocks - DESIGN.md Section 2.3 (EXACT) */
pre {
  font-family: var(--font-mono);
  background: #0b1220;  /* DESIGN.md: exact color */
  color: #e5e7eb;       /* DESIGN.md: exact color */
  border: 1px solid #1f2937;  /* DESIGN.md: exact border */
  border-radius: 12px;  /* DESIGN.md: exact radius */
  padding: 14px;        /* DESIGN.md: exact padding */
  overflow-x: auto;
  margin-bottom: 1rem;
}

pre code {
  background-color: transparent;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* Links */
a {
  color: var(--sh-blue);
  text-decoration: none;
  transition: color var(--sh-transition);
}

a:hover {
  color: var(--sh-blue-dark);
}

/* ==========================================================================
   6. LAYOUT COMPONENTS (DESIGN.md Sections 4, 5)
   ========================================================================== */

/* Cards - DESIGN.md Section 5: Borders define structure */
.card {
  background-color: var(--sh-card);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-md);
  box-shadow: var(--sh-shadow);  /* DESIGN.md: 0 2px 6px rgba(0,0,0,0.04) */
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--sh-border);
  padding: 1rem 1.25rem;
}

.card-body {
  padding: 1.25rem;
}

.card-footer {
  background-color: transparent;
  border-top: 1px solid var(--sh-border);
  padding: 1rem 1.25rem;
}

.card-title {
  font-weight: 600;
  margin-bottom: 0;
}

/* Shadow variants - DESIGN.md: Shadows are subtle and rare */
.shadow-sm { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03); }
.shadow { box-shadow: var(--sh-shadow); }
.shadow-lg { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); }

/* Modals */
.modal-content {
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-lg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.modal-header {
  border-bottom: 1px solid var(--sh-border);
  padding: 1rem 1.5rem;
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  border-top: 1px solid var(--sh-border);
  padding: 1rem 1.5rem;
}

/* Dropdowns */
.dropdown-menu {
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 0.5rem;
}

.dropdown-item {
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  color: var(--sh-text);
  transition: background-color var(--sh-transition);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--sh-bg);
  color: var(--sh-text);
}

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

.dropdown-divider {
  border-color: var(--sh-border);
  margin: 0.5rem 0;
}

/* Accordion - Subtle styling (no bold highlight, neutral chevron) */
.accordion-button:focus {
  box-shadow: none;
  border-color: var(--sh-border);
}

.accordion-button:not(.collapsed) {
  background-color: var(--sh-bg-secondary);
  color: inherit;
  box-shadow: none;
}

.accordion-item {
  border-color: var(--sh-border);
}

.accordion-button {
  font-weight: 500;
}

/* Neutral chevron color for both themes */
.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Card header styled like an accordion button (same font-size, weight, background) */
.card-header-accordion {
  font-size: 1rem;
  font-weight: 500;
  background-color: var(--sh-bg-secondary) !important;
  border-radius: inherit;
}

/* Ensure card background doesn't bleed past rounded corners */
.card:has(.card-header-accordion) {
  overflow: hidden;
}

/* ==========================================================================
   7. FORM COMPONENTS (DESIGN.md Section 4)
   ========================================================================== */

/* Buttons - Radius: 8px (DESIGN.md Section 4) */
.btn {
  font-family: var(--font-sans);
  font-weight: 500;
  border-radius: var(--sh-radius-sm);
  padding: 0.5rem 1rem;
  transition: all var(--sh-transition);
}

.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
}

.btn-lg {
  padding: 0.625rem 1.25rem;
  font-size: 1rem;
}

.btn-primary {
  background-color: var(--sh-blue);
  border-color: var(--sh-blue);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--sh-blue-dark);
  border-color: var(--sh-blue-dark);
  color: #fff;
}

.btn-primary:active {
  background-color: var(--sh-blue-dark);
  border-color: var(--sh-blue-dark);
}

.btn-outline-primary {
  color: var(--sh-blue);
  border-color: var(--sh-blue);
  background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--sh-blue);
  border-color: var(--sh-blue);
  color: #fff;
}

.btn-secondary,
.btn-light {
  background-color: #F3F4F6;
  border-color: var(--sh-border);
  color: var(--sh-text);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-light:hover,
.btn-light:focus {
  background-color: #E5E7EB;
  border-color: #D1D5DB;
  color: var(--sh-text);
}

.btn-success {
  background-color: var(--sh-success);
  border-color: var(--sh-success);
}

.btn-warning {
  background-color: var(--sh-warning);
  border-color: var(--sh-warning);
  color: #fff;
}

.btn-danger {
  background-color: var(--sh-danger);
  border-color: var(--sh-danger);
}

.btn-link {
  color: var(--sh-blue);
}

.btn-link:hover {
  color: var(--sh-blue-dark);
}

/* Hide button icon when spinner is visible */
.btn .spinner-border:not(.d-none) + .btn-icon {
  display: none;
}

/* Danger hover for destructive actions (DESIGN.md Section 8.1) */
.btn-hover-danger:hover {
  background-color: var(--sh-danger) !important;
  border-color: var(--sh-danger) !important;
  color: #fff !important;
}

/* Spin animation for loading indicators */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin {
  animation: spin 1s linear infinite;
}

/* Form Controls - Radius: 8px (DESIGN.md Section 4)
   Font-size/padding/min-height match .ts-wrapper .ts-control so native inputs
   (text, date, datetime-local, number) and select-style controls line up at
   ~35px with the app's 14px base — otherwise Bootstrap's 1rem default (16px)
   makes date pickers render visibly taller than sibling Tom Select dropdowns. */
.form-control,
.form-select {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.5;
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-sm);
  color: var(--sh-text);
  padding: 0.375rem 0.75rem;
  min-height: calc(1.5em + 0.75rem + 2px);
  transition: border-color var(--sh-transition), box-shadow var(--sh-transition);
}

/* Small variant mirror of .ts-wrapper.form-select-sm — keeps the base rule
   above from forcing 35px on .form-control-sm / .form-select-sm buttons. */
.form-control-sm,
.form-select-sm {
  padding: 0.25rem 0.5rem;
  min-height: calc(1.5em + 0.5rem + 2px);
  font-size: 0.875rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--sh-blue);
  box-shadow: 0 0 0 3px var(--sh-blue-subtle);
  outline: none;
}

.form-control::placeholder {
  color: var(--sh-text-muted);
}

.form-label {
  font-weight: 500;
  margin-bottom: 0.375rem;
  color: var(--sh-text);
}

.form-text {
  color: var(--sh-text-muted);
  font-size: 0.875rem;
}

.input-group-text {
  background-color: #F3F4F6;
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-sm);
  color: var(--sh-text-muted);
}

/* Checkboxes & Radios */
.form-check-input {
  border-color: #D1D5DB;
}

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

.form-check-input:focus {
  border-color: var(--sh-blue);
  box-shadow: 0 0 0 3px var(--sh-blue-subtle);
}

/* ==========================================================================
   7.1 CONDENSED CARD VARIANT
   For compact data displays (e.g., administration calls page)
   ========================================================================== */

/* Condensed card - tighter spacing */
.card-condensed .card-header {
  padding: 0.625rem 0.875rem;
}

.card-condensed .card-body {
  padding: 0.625rem 0.875rem;
}

/* Condensed table - smaller cells and text */
.table-condensed {
  font-size: 0.75rem;
  line-height: 1.2;
}

.table-condensed > thead th {
  padding: 0.25rem 0.5rem;
  font-size: 0.625rem;
}

.table-condensed > tbody > tr > td,
.table.table-condensed tbody td {
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  vertical-align: middle;
}

/* Explorer DataTable rows */
.table-explorer tbody td {
  vertical-align: middle;
}
.table-explorer tbody tr {
  cursor: pointer;
}

/* Condensed table scrollable area */
.table-scroll-condensed {
  max-height: 280px;
  overflow-y: auto;
}

/* Condensed search input */
.card-condensed .form-control-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
}

/* Condensed badge */
.badge-condensed {
  font-size: 0.6875rem;
  padding: 0.1875rem 0.375rem;
}

/* Condensed button group */
.card-condensed .btn-group-sm > .btn,
.card-condensed .btn-sm {
  padding: 0.25rem 0.5rem;
}

/* Condensed empty state */
.card-condensed .text-center.py-4 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

/* ==========================================================================
   7.2 EXPLORER FILTER COMPONENTS
   Shared styles for filter cards, pills, and links across all explorer pages
   ========================================================================== */

/* Filter chevron rotation */
.filter-chevron {
  transition: transform 0.2s ease;
}
.filter-expanded .filter-chevron {
  transform: rotate(180deg);
}

/* Clickable filter card headers */
.filter-card-header {
  cursor: pointer;
}
.filter-card-header:hover {
  background-color: var(--bs-tertiary-bg) !important;
}

/* Collapsed filter card header - match input height */
.card-condensed > .card-header:first-child {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}
.card-condensed > .card-header:first-child > div {
  width: 100%;
}

/* Filter links in tables */
.filter-link {
  color: inherit;
  transition: color 0.15s ease;
}
.filter-link:hover {
  color: var(--bs-primary);
  text-decoration: underline !important;
}
.filter-link.active {
  color: var(--bs-primary);
  font-weight: 600;
}
.filter-link.active::before {
  content: '\2713';
  font-size: 0.75em;
  margin-right: 0.35em;
}

/* Clickable filter table rows */
.filter-table tbody tr {
  cursor: pointer;
}
.filter-table tbody tr:hover {
  background-color: var(--bs-tertiary-bg);
}

/* Filter pills */
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 0.375rem;
  background-color: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
  white-space: nowrap;
}
.filter-pill .filter-label {
  font-weight: 500;
}
.filter-pill .filter-value {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filter-pill .filter-remove {
  cursor: pointer;
  opacity: 0.6;
  margin-left: 0.125rem;
  font-size: 0.875rem;
  line-height: 1;
}
.filter-pill .filter-remove:hover {
  opacity: 1;
}

/* Clear all filters link */
#clearAllFilters {
  font-size: 0.75rem;
  text-decoration: none;
}
#clearAllFilters:hover {
  text-decoration: underline;
}


/* JSON Formatter styles (json-formatter-js library) */
.json-formatter-row {
  font-family: var(--bs-font-monospace);
  font-size: 0.75rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.json-formatter-row .json-formatter-string {
  color: var(--bs-success);
  word-break: break-all;
  white-space: pre-wrap;
}
.json-formatter-row .json-formatter-key {
  color: var(--bs-body-color);
  word-break: break-all;
}
/* JSON container - prevent horizontal scroll */
.json-container {
  overflow-x: hidden;
  overflow-y: auto;
}
.json-formatter-row .json-formatter-number {
  color: var(--bs-primary);
}
.json-formatter-row .json-formatter-boolean {
  color: var(--bs-warning);
}
.json-formatter-row .json-formatter-null {
  color: var(--bs-secondary);
}
.json-formatter-row .json-formatter-key {
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .json-formatter-row .json-formatter-string {
  color: #98c379;
}
[data-bs-theme="dark"] .json-formatter-row .json-formatter-number {
  color: #61afef;
}
[data-bs-theme="dark"] .json-formatter-row .json-formatter-boolean {
  color: #e5c07b;
}

/* ==========================================================================
   8. DATA COMPONENTS (DESIGN.md Section 8: Tables as Primary UI)
   ========================================================================== */

/* Tables - DESIGN.md Section 8 (EXACT) */
.table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--sh-border);
  font-size: 14px;  /* Match base font size */
}

.table > thead {
  background: #f9fafb;  /* DESIGN.md Section 8: exact color */
  font-weight: 600;     /* DESIGN.md Section 8 */
}

.table > thead th {
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sh-text-muted);
  border-bottom: 1px solid var(--sh-border);
  padding: 0.75rem 1rem;
  white-space: nowrap;
}

.table > tbody td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--sh-border);
}

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

/* DataTables customizations */
.dataTables_wrapper .dataTables_length select {
  min-width: 70px;
  padding-right: 2rem;
}

.dataTables_wrapper .dataTables_paginate .pagination {
  margin-bottom: 0;
  gap: 0;
}

.dataTables_wrapper .dataTables_paginate .page-link {
  padding: 0.375rem 0.75rem;
  border-radius: 0;
  border-right-width: 0;
}

.dataTables_wrapper .dataTables_paginate .page-item:first-child .page-link {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.dataTables_wrapper .dataTables_paginate .page-item:last-child .page-link {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-right-width: 1px;
}

.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
  background-color: var(--sh-blue);
  border-color: var(--sh-blue);
}

.dataTables_wrapper .dataTables_info {
  font-size: 0.875rem;
  color: var(--sh-text-muted);
  padding-top: 0.5rem;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  font-size: 0.875rem;
}

.dataTables_wrapper .dataTables_filter input {
  margin-left: 0.5rem;
}

/* DESIGN.md Section 8: subtle hover only */
.table-hover tbody tr:hover {
  background: #f3f4f6;  /* DESIGN.md Section 8: exact color */
}

.table-borderless > tbody td,
.table-borderless > thead th {
  border: none;
}

/* Badges - Not pills, subtle rectangles (DESIGN.md Section 4: Pills FORBIDDEN) */
.badge {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;  /* Not pill shaped */
}

.badge.bg-primary,
.badge.text-bg-primary {
  background-color: var(--sh-blue);
}

.badge.bg-success,
.badge.text-bg-success {
  background-color: var(--sh-success);
}

.badge.bg-warning,
.badge.text-bg-warning {
  background-color: var(--sh-warning);
  color: #fff;
}

.badge.bg-danger,
.badge.text-bg-danger {
  background-color: var(--sh-danger);
}

/* DESIGN.md Section 7: Neutralize colorful badges - bg-info becomes neutral */
.badge.bg-info,
.badge.text-bg-info {
  background: #f3f4f6 !important;
  color: var(--sh-text) !important;
}

/* DESIGN.md Section 7: Neutralize purple badges */
.badge.bg-purple,
.badge.text-bg-purple {
  background: #f3f4f6 !important;
  color: var(--sh-text) !important;
}

.badge.bg-secondary,
.badge.text-bg-secondary {
  background-color: #E5E7EB;
  color: var(--sh-text);
}

/* Subtle badge variants */
.badge.bg-primary-subtle {
  background-color: var(--sh-blue-subtle);
  color: var(--sh-blue-dark);
}

.badge.bg-secondary-subtle {
  background-color: #E5E7EB;
  color: #4B5563;
}

.badge.bg-success-subtle {
  background-color: var(--sh-success-subtle);
  color: #065F46;
}

.badge.bg-warning-subtle {
  background-color: var(--sh-warning-subtle);
  /* !important needed: Bootstrap's .text-warning utility ships with color !important,
     which would otherwise render the lighter accent orange on top of the subtle amber
     background — too low contrast for badge text. Pin the badge-scoped rule darker. */
  color: #92400E !important;
}

.badge.bg-danger-subtle {
  background-color: var(--sh-danger-subtle);
  color: #991B1B;
}

/* DESIGN.md Section 4: Pills FORBIDDEN - neutralize */
.rounded-pill {
  border-radius: 6px;
}

/* Alerts */
.alert {
  border-radius: var(--sh-radius-sm);
  border: 1px solid;
  padding: 0.875rem 1rem;
}

.alert-primary {
  background-color: var(--sh-blue-subtle);
  border-color: rgba(87, 144, 247, 0.2);
  color: var(--sh-blue-dark);
}

.alert-success {
  background-color: var(--sh-success-subtle);
  border-color: rgba(5, 150, 105, 0.2);
  color: #065F46;
}

.alert-warning {
  background-color: var(--sh-warning-subtle);
  border-color: rgba(217, 119, 6, 0.2);
  color: #92400E;
}

.alert-danger {
  background-color: var(--sh-danger-subtle);
  border-color: rgba(204, 70, 73, 0.2);
  color: #991B1B;
}

/* DESIGN.md: No info color - neutralize to grayscale */
.alert-info {
  background-color: #f3f4f6;
  border-color: #E5E7EB;
  color: var(--sh-text);
}

.alert-dismissible .btn-close {
  padding: 1rem;
}

/* Progress */
.progress {
  border-radius: var(--sh-radius-sm);
  background-color: #E5E7EB;
  height: 0.5rem;
}

.progress-bar {
  background-color: var(--sh-blue);
}

/* ==========================================================================
   9. NAVIGATION COMPONENTS (DESIGN.md Section 10: Minimal navigation)
   ========================================================================== */

/* Navbar / Header */
.navbar {
  background-color: var(--sh-card);
}

.navbar-brand {
  font-weight: 600;
  margin-right: 0;
  padding-left: 0;
}

.topbar {
  background-color: var(--sh-card);
  border-bottom: 1px solid var(--sh-border);
  padding: 0.5rem 25px;
  position: relative;
}

/* Navbar Toggler (Hamburger) */
.navbar-toggler {
  padding: 0.5rem;
  color: var(--sh-text);
}

.navbar-toggler:focus {
  box-shadow: none;
}

/* Collapsed menu styling */
@media (max-width: 991.98px) {
  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--sh-card);
    border-bottom: 1px solid var(--sh-border);
    padding: 0.5rem 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin-left: 0 !important;
    /* Must sit above sticky secondary navs (.services-nav, .admin-nav,
       z-index: 1020) or the expanded hamburger menu is hidden behind them
       on services / flows / sessions / administration pages. */
    z-index: 1030;
  }

  .navbar-collapse .navbar-nav {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .navbar-collapse .nav-menu-link {
    width: 100%;
    padding: 0.75rem 1rem !important;
  }
}

/* Nav Links */
.nav-link {
  color: var(--sh-text-muted);
  transition: color var(--sh-transition);
}

.nav-link:hover {
  color: var(--sh-blue);
}

.nav-link.active {
  color: var(--sh-blue);
}

.nav-underline .nav-link.active {
  color: var(--sh-blue);
  border-bottom-color: var(--sh-blue);
}

/* Secondary tab bar — shaded background with border lines, matching 2nd level menu */
.nav-secondary {
  background-color: var(--sh-bg-secondary);
  border-top: 1px solid var(--sh-border);
  border-bottom: 1px solid var(--sh-border);
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: -1rem;
  margin-right: -1rem;
}

.nav-secondary .nav-link {
  color: var(--sh-text-muted);
  font-weight: 500;
  font-size: 0.8125rem;
}

.nav-secondary .nav-link:hover {
  color: var(--sh-blue);
}

[data-bs-theme="dark"] .nav-secondary {
  background-color: var(--sh-card);
}

/* Drawer resize handle */
#detailDrawerResizeHandle {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  cursor: col-resize;
  z-index: 10;
  background: transparent;
  transition: background-color 0.15s;
}
#detailDrawerResizeHandle:hover,
#detailDrawerResizeHandle.active {
  background-color: var(--sh-blue);
  opacity: 0.4;
}

/* Phones: every offcanvas tagged .sh-offcanvas-fluid takes the full viewport,
   even if a desktop session previously persisted a wider width via inline
   style or sessionStorage. The drag-to-resize handle is also hidden because
   it has no touch handler and would clamp below the viewport width. */
@media (max-width: 575.98px) {
  .sh-offcanvas-fluid {
    width: 100% !important;
    max-width: 100% !important;
  }
  #detailDrawerResizeHandle {
    display: none;
  }
}

/* Nav Pills */
.nav-pills .nav-link {
  border-radius: var(--sh-radius-sm);
}

.nav-pills .nav-link.active {
  background-color: var(--sh-blue);
  color: #fff;
}

/* Nav icon hover */
.nav-icon-hover-bg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sh-radius-sm);
  transition: background-color var(--sh-transition);
}

.nav-icon-hover-bg:hover {
  background-color: var(--sh-bg);
}

/* Breadcrumb */
.breadcrumb {
  margin-bottom: 0;
  font-size: 0.875rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--sh-text-muted);
}

.breadcrumb-item a {
  color: var(--sh-text-muted);
}

.breadcrumb-item a:hover {
  color: var(--sh-blue);
}

.breadcrumb-item.active {
  color: var(--sh-text-muted);
}

/* ==========================================================================
   10. PAGE-SPECIFIC STYLES
   ========================================================================== */

/* Main wrapper */
#main-wrapper {
  min-height: 100vh;
}

.page-wrapper {
  min-height: 100vh;
}

.body-wrapper {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

/* Align body content with header lateral padding */
.body-wrapper > .container-fluid {
  padding-left: 25px;
  padding-right: 25px;
}

/* Admin secondary navigation */
.admin-nav {
  background-color: var(--sh-bg-secondary);
  padding-left: 25px;
  padding-right: 25px;
}

.admin-nav .nav-link {
  color: var(--sh-text-muted);
  font-weight: 500;
  font-size: 0.875rem;
}

.admin-nav .nav-link:hover {
  color: var(--sh-blue);
}

/* Services secondary navigation */
.services-nav {
  background-color: var(--sh-bg-secondary);
  padding-left: 25px;
  padding-right: 25px;
}

.services-nav .nav-link {
  color: var(--sh-text-muted);
  font-weight: 500;
  font-size: 0.875rem;
}

.services-nav .nav-link:hover {
  color: var(--sh-blue);
}

/* Auth pages - plain background (no decorative images per DESIGN.md) */
.auth-bg {
  background-color: var(--sh-bg);
  min-height: 100vh;
}

/* Profile dropdown */
.profile-dropdown {
  min-width: 280px;
}

/* Header dropdowns must float above in-page TomSelect popups (.ts-dropdown at 1050).
   Bootstrap's default .dropdown-menu is 1000, which loses to TomSelect and causes
   visual bleed-through. Topbar dropdowns are always top-most UI, so 1060 is safe.

   `position: absolute` is also asserted here because Bootstrap's
   `.navbar-nav .dropdown-menu { position: static }` rule (only reverted to
   absolute at/above the `navbar-expand-*` breakpoint) drops the profile menu
   inline on mobile, which inflates the navbar and pushes brand/search/burger
   onto a second row. The profile dropdown lives outside the collapsible
   navigation, so it should always overlay. */
.topbar .dropdown-menu {
  position: absolute;
  z-index: 1060;
}

/* Content dropdown (notifications) */
.content-dd {
  min-width: 320px;
}

/* Search Modal */
.search-modal-content {
  border: none;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.search-input {
  padding-left: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.3-4.3'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.875rem center;
}

.search-result-item {
  color: var(--sh-text);
  text-decoration: none;
  transition: background-color var(--sh-transition);
}

.search-result-item:hover {
  background-color: var(--sh-bg);
  color: var(--sh-blue);
}

.search-result-item.hidden {
  display: none !important;
}

/* Search results scrollable area - fixed height */
.search-results-scroll {
  height: 350px;
  overflow-y: auto;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  margin-left: -0.25rem;
}

.search-hint kbd,
.search-hint .search-kbd {
  background-color: var(--sh-bg-secondary);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-sm);
  padding: 0.125rem 0.375rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--sh-text);
}

/* Search section headers */
.search-section-header {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Navigation menu links */
.nav-menu-link {
  color: var(--sh-text-muted);
  font-weight: 500;
  border-radius: var(--sh-radius-sm);
  transition: all var(--sh-transition);
  display: inline-flex;
  align-items: center;
}

.nav-menu-link:hover {
  color: var(--sh-blue);
  background-color: var(--sh-blue-subtle);
}

.nav-menu-link.active {
  color: var(--sh-blue);
  background-color: var(--sh-blue-subtle);
}

/* Dark mode adjustments for new components */
[data-bs-theme="dark"] .search-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.3-4.3'%3E%3C/path%3E%3C/svg%3E");
}

[data-bs-theme="dark"] .search-result-item:hover {
  background-color: #3F3F46;
}

[data-bs-theme="dark"] .search-hint kbd,
[data-bs-theme="dark"] .search-hint .search-kbd {
  background-color: #3F3F46;
  border-color: var(--sh-border);
  color: var(--sh-text);
}

[data-bs-theme="dark"] .nav-menu-link:hover,
[data-bs-theme="dark"] .nav-menu-link.active {
  background-color: rgba(87, 144, 247, 0.15);
}

/* Message body with scrollbar */
.message-body {
  max-height: 300px;
  overflow-y: auto;
}

/* ==========================================================================
   11. THEME TOGGLE VISIBILITY
   ========================================================================== */

/* Light mode: show moon (to switch to dark), hide sun */
[data-bs-theme="light"] .sun {
  display: none !important;
}

/* Dark mode: show sun (to switch to light), hide moon */
[data-bs-theme="dark"] .moon {
  display: none !important;
}

/* ==========================================================================
   12. DARK MODE
   ========================================================================== */

[data-bs-theme="dark"] {
  color-scheme: dark;

  /* Override core tokens for dark mode */
  --sh-bg: #18181B;
  --sh-bg-secondary: #1F1F23;
  --sh-card: #27272A;
  --sh-border: #3F3F46;
  --sh-text: #FAFAFA;
  --sh-text-muted: #A1A1AA;

  /* Subtle colors for dark mode */
  --sh-blue-subtle: rgba(87, 144, 247, 0.15);
  --sh-success-subtle: rgba(5, 150, 105, 0.15);
  --sh-warning-subtle: rgba(217, 119, 6, 0.15);
  --sh-danger-subtle: rgba(204, 70, 73, 0.15);

  --bs-body-bg: var(--sh-bg);
  --bs-body-color: var(--sh-text);
  --bs-border-color: var(--sh-border);
}

[data-bs-theme="dark"] body {
  background-color: var(--sh-bg);
  color: var(--sh-text);
}

[data-bs-theme="dark"] .card {
  background-color: var(--sh-card);
  border-color: var(--sh-border);
}

[data-bs-theme="dark"] .navbar,
[data-bs-theme="dark"] .topbar {
  background-color: var(--sh-card);
  border-color: var(--sh-border);
}

[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--sh-card);
  border-color: var(--sh-border);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: #3F3F46;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] input[type="date"],
[data-bs-theme="dark"] input[type="datetime-local"],
[data-bs-theme="dark"] input[type="time"],
[data-bs-theme="dark"] input[type="month"],
[data-bs-theme="dark"] input[type="week"],
[data-bs-theme="dark"] input[type="number"] {
  background-color: var(--sh-bg);
  border-color: var(--sh-border);
  color: var(--sh-text);
  color-scheme: dark;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: var(--sh-bg);
  border-color: var(--sh-blue);
}

[data-bs-theme="dark"] .input-group-text {
  background-color: #3F3F46;
  border-color: var(--sh-border);
  color: var(--sh-text-muted);
}

[data-bs-theme="dark"] .btn-secondary,
[data-bs-theme="dark"] .btn-light {
  background-color: #3F3F46;
  border-color: var(--sh-border);
  color: var(--sh-text);
}

[data-bs-theme="dark"] .btn-secondary:hover,
[data-bs-theme="dark"] .btn-light:hover {
  background-color: #52525B;
  border-color: #52525B;
}

[data-bs-theme="dark"] .table > thead {
  background-color: #27272A;
}

[data-bs-theme="dark"] .table-hover tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

[data-bs-theme="dark"] code {
  background-color: #3F3F46;
}

[data-bs-theme="dark"] .badge.bg-secondary,
[data-bs-theme="dark"] .badge.text-bg-secondary {
  background-color: #52525B;
  color: var(--sh-text);
}

[data-bs-theme="dark"] .badge.bg-primary-subtle {
  background-color: rgba(87, 144, 247, 0.2);
  color: #7EC5FB;
}

[data-bs-theme="dark"] .badge.bg-secondary-subtle {
  background-color: #3F3F46;
  color: #A1A1AA;
}

[data-bs-theme="dark"] .badge.bg-success-subtle {
  background-color: rgba(5, 150, 105, 0.2);
  color: #6EE7B7;
}

[data-bs-theme="dark"] .badge.bg-warning-subtle {
  background-color: rgba(217, 119, 6, 0.2);
  /* Same !important reasoning as the light-mode rule above. */
  color: #FCD34D !important;
}

[data-bs-theme="dark"] .badge.bg-danger-subtle {
  background-color: rgba(204, 70, 73, 0.2);
  color: #FCA5A5;
}

[data-bs-theme="dark"] .preloader {
  background-color: var(--sh-card);
}

[data-bs-theme="dark"] .nav-icon-hover-bg:hover {
  background-color: #3F3F46;
}

[data-bs-theme="dark"] .progress {
  background-color: #3F3F46;
}

[data-bs-theme="dark"] .admin-nav {
  background-color: var(--sh-card);
}

[data-bs-theme="dark"] .services-nav {
  background-color: var(--sh-card);
}

/* ==========================================================================
   12. UTILITIES
   ========================================================================== */

/* Background utilities - using DESIGN.md compliant tokens */
.bg-primary-subtle {
  background-color: var(--sh-blue-subtle);
}

.bg-success-subtle {
  background-color: var(--sh-success-subtle);
}

.bg-warning-subtle {
  background-color: var(--sh-warning-subtle);
}

.bg-danger-subtle {
  background-color: var(--sh-danger-subtle);
}

/* DESIGN.md: No info color - neutralize to grayscale */
.bg-info-subtle {
  background-color: #f3f4f6;
}

/* Text color utilities */
.text-primary {
  color: var(--sh-blue);
}

.text-success {
  color: var(--sh-success);
}

.text-warning {
  color: var(--sh-warning);
}

.text-danger {
  color: var(--sh-danger);
}

/* DESIGN.md: No info color - neutralize */
.text-info {
  color: var(--sh-text-muted);
}

/* Background utilities */
.bg-body-secondary {
  background-color: var(--sh-bg-secondary);
}

/* Border utilities */
.border-bottom {
  border-bottom: 1px solid var(--sh-border);
}

.border-top {
  border-top: 1px solid var(--sh-border);
}

/* Simplebar (for custom scrollbars) */
.simplebar-scrollbar::before {
  background-color: var(--sh-text-muted);
}

/* DESIGN.md Section 7: Remove gradients */
.bg-gradient {
  background-image: none !important;
}

/* Responsive utilities */
@media (max-width: 767.98px) {
  .body-wrapper {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

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

/* ==========================================================================
   12.1 LUCIDE ICONS (DESIGN.md Section 3.2 - EXACT)
   ========================================================================== */

/* Lucide icon base styling - DESIGN.md Section 3.2 */
/* Note: Lucide replaces <i data-lucide="name"> with <svg data-lucide="name" class="lucide ..."> */
svg[data-lucide] {
  display: inline-block;
  vertical-align: middle;
  width: 16px !important;
  height: 16px !important;
  stroke-width: 1.8;  /* DESIGN.md: exact value */
  opacity: 0.85;      /* DESIGN.md: exact value */
  fill: none;
}

/*
 * Icon Size Classes
 * Usage: <i data-lucide="icon-name" class="icon-xs"></i>
 * After Lucide processes, becomes: <svg data-lucide="icon-name" class="icon-xs lucide ...">
 *
 * Sizes:
 * - icon-xs  : 12px (table action buttons, spinners in badges)
 * - icon-sm  : 14px (small inline icons)
 * - (default): 16px (navigation, standard buttons with text)
 * - icon-md  : 18px (header icons)
 * - icon-lg  : 24px (profile icons, dashboard stat icons)
 * - icon-xl  : 32px (empty state medium)
 * - icon-2xl : 40px (error page)
 * - icon-3xl : 48px (empty state large)
 */

/* Extra small - 12px (table action buttons, spinners in badges) */
svg[data-lucide].icon-xs {
  width: 12px !important;
  height: 12px !important;
}

/* Small - 14px (small inline icons) */
svg[data-lucide].icon-sm {
  width: 14px !important;
  height: 14px !important;
}

/* Default is 16px - no class needed */

/* Medium - 18px (header icons) */
svg[data-lucide].icon-md {
  width: 18px !important;
  height: 18px !important;
}

/* Large - 24px (profile icons, dashboard stat icons) */
svg[data-lucide].icon-lg {
  width: 24px !important;
  height: 24px !important;
}

/* Extra large - 32px (empty state medium) */
svg[data-lucide].icon-xl {
  width: 32px !important;
  height: 32px !important;
}

/* 2x large - 40px (error page) */
svg[data-lucide].icon-2xl {
  width: 40px !important;
  height: 40px !important;
}

/* 3x large - 48px (empty state large) */
svg[data-lucide].icon-3xl {
  width: 48px !important;
  height: 48px !important;
}

/* 4x large - 64px (empty state extra large) */
svg[data-lucide].icon-4xl {
  width: 64px !important;
  height: 64px !important;
}

/* ==========================================================================
   13. TOAST NOTIFICATIONS (DESIGN.md Section 14)
   ========================================================================== */

/* Toast container - bottom right corner, above modals */
.toast-container {
  max-width: 380px;
  z-index: 9999 !important;
}

/* Toast styling - solid background for visibility */
.toast {
  border-radius: var(--sh-radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
  font-size: 0.875rem;
  background-color: #ffffff !important;
  border: 1px solid var(--sh-border);
  border-left-width: 4px;
}

.toast-body {
  padding: 0.75rem 1rem;
}

/* Smaller close button for toasts */
.toast .btn-close {
  padding: 0.5rem;
  opacity: 0.5;
}

.toast .btn-close:hover {
  opacity: 1;
}

/* Success toast - white background with green left border */
.toast.bg-success-subtle {
  background-color: #ffffff !important;
  border-color: var(--sh-border);
  border-left-color: var(--sh-success);
}

.toast.bg-success-subtle .toast-body {
  color: var(--sh-success);
}

/* Error toast - white background with red left border */
.toast.bg-danger-subtle {
  background-color: #ffffff !important;
  border-color: var(--sh-border);
  border-left-color: var(--sh-danger);
}

.toast.bg-danger-subtle .toast-body {
  color: var(--sh-danger);
}

/* Warning toast - white background with yellow left border */
.toast.bg-warning-subtle {
  background-color: #ffffff !important;
  border-color: var(--sh-border);
  border-left-color: var(--sh-warning);
}

.toast.bg-warning-subtle .toast-body {
  color: var(--sh-warning);
}

/* Dark mode toasts */
[data-bs-theme="dark"] .toast {
  background-color: #1f2937 !important;
  border-color: #374151;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .toast.bg-success-subtle {
  background-color: #1f2937 !important;
  border-left-color: var(--sh-success);
}

[data-bs-theme="dark"] .toast.bg-success-subtle .toast-body {
  color: var(--sh-success);
}

[data-bs-theme="dark"] .toast.bg-danger-subtle {
  background-color: #1f2937 !important;
  border-left-color: var(--sh-danger);
}

[data-bs-theme="dark"] .toast.bg-danger-subtle .toast-body {
  color: var(--sh-danger);
}

[data-bs-theme="dark"] .toast.bg-warning-subtle {
  background-color: #1f2937 !important;
  border-left-color: var(--sh-warning);
}

[data-bs-theme="dark"] .toast.bg-warning-subtle .toast-body {
  color: var(--sh-warning);
}

/* ==========================================================================
   14. EXTENDED UTILITIES (Supplementary to Bootstrap)
   ========================================================================== */

/* Extended Spacing Utilities (Bootstrap only has up to 5) */
.mb-6 { margin-bottom: 2rem; }
.mb-7 { margin-bottom: 2.5rem; }
.mb-8 { margin-bottom: 3rem; }
.mt-6 { margin-top: 2rem; }
.mt-7 { margin-top: 2.5rem; }
.mt-8 { margin-top: 3rem; }
.py-6 { padding-top: 2rem; padding-bottom: 2rem; }
.py-7 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-8 { padding-top: 3rem; padding-bottom: 3rem; }
.px-6 { padding-left: 2rem; padding-right: 2rem; }
.px-7 { padding-left: 2.5rem; padding-right: 2.5rem; }
.px-8 { padding-left: 3rem; padding-right: 3rem; }

/* Additional Rounded Utilities */
.rounded-1 { border-radius: 0.25rem; }
.rounded-2 { border-radius: 0.375rem; }
.rounded-3 { border-radius: 0.5rem; }
.rounded-4 { border-radius: 0.75rem; }

/* Preloader Styles */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--sh-card);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.preloader.hide {
  opacity: 0;
  visibility: hidden;
}

.preloader img {
  max-width: 120px;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(0.95);
  }
}

/* Alternative spinner animation (lds-ripple style) */
.lds-ripple {
  animation: pulse 1.5s ease-in-out infinite;
}

/* Dropdown Animations */
.dropdown-menu-animate-up {
  animation: dropdownFadeInUp 0.2s ease-out;
  transform-origin: top center;
}

@keyframes dropdownFadeInUp {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Extended font size utility (Bootstrap goes to fs-6) */
.fs-9 {
  font-size: 2.5rem;
}

/* ==========================================================================
   14. TOM SELECT CUSTOMIZATION
   Modern searchable dropdown styling to match ServiceHop theme
   ========================================================================== */

/* Base Tom Select wrapper */
.ts-wrapper {
  font-family: var(--font-sans);
}

/* Control (main input area). Font-size tracks the app's 14px base (body) rather
   than Bootstrap's 1rem default, so the collapsed pill matches surrounding nav
   chrome and the dropdown options below it (both 0.875rem). Height follows in
   em units, giving ~35px default / ~31px small. */
.ts-wrapper .ts-control {
  background-color: var(--sh-bg);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-sm);
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  min-height: calc(1.5em + 0.75rem + 2px);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--sh-text);
  transition: border-color var(--sh-transition), box-shadow var(--sh-transition);
}

.ts-wrapper .ts-control:hover {
  border-color: var(--sh-blue);
}

.ts-wrapper.focus .ts-control {
  border-color: var(--sh-blue);
  box-shadow: 0 0 0 3px var(--sh-blue-subtle);
  outline: none;
}

/* Placeholder text */
.ts-wrapper .ts-control input::placeholder {
  color: var(--sh-text-muted);
}

/* Selected item */
.ts-wrapper .ts-control .item {
  color: var(--sh-text);
  background: transparent;
  margin: 0;
  padding: 0;
}

/* Dropdown menu */
.ts-wrapper .ts-dropdown {
  background-color: var(--sh-bg);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-sm);
  box-shadow: var(--sh-shadow), 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-top: 4px;
  z-index: 1050;
}

/* Dropdown options */
.ts-wrapper .ts-dropdown .option {
  padding: 0.5rem 0.75rem;
  color: var(--sh-text);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color var(--sh-transition);
}

.ts-wrapper .ts-dropdown .option:hover,
.ts-wrapper .ts-dropdown .option.active {
  background-color: var(--sh-blue-subtle);
  color: var(--sh-blue);
}

.ts-wrapper .ts-dropdown .option.selected {
  background-color: var(--sh-blue-subtle);
  color: var(--sh-blue);
}

/* Optgroup headers */
.ts-wrapper .ts-dropdown .optgroup-header {
  padding: 0.5rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sh-text-muted);
  background-color: var(--sh-bg-secondary);
  border-bottom: 1px solid var(--sh-border);
}

/* No results message */
.ts-wrapper .ts-dropdown .no-results {
  padding: 0.75rem;
  text-align: center;
  color: var(--sh-text-muted);
  font-size: 0.875rem;
}

/* Small variant (.form-select-sm) — matches Bootstrap .form-select-sm (31px)
   so a small tom-select lines up with neighbouring .form-control-sm / .btn-sm. */
.ts-wrapper.form-select-sm .ts-control {
  padding: 0.25rem 2.25rem 0.25rem 0.5rem;
  min-height: calc(1.5em + 0.5rem + 2px);
  font-size: 0.875rem;
}

.ts-wrapper.form-select-sm .ts-dropdown .option {
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
}

/* Dropdown arrow - use Bootstrap's SVG chevron, styled to match theme */
.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}

[data-bs-theme="dark"] .ts-wrapper .ts-control,
[data-bs-theme="dark"] .ts-wrapper.single .ts-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Input field inside control */
.ts-wrapper .ts-control input {
  color: var(--sh-text);
}

/* Loading indicator - hide chevron and show spinner */
.ts-wrapper.loading .ts-control {
  background-image: none;
}

.ts-wrapper.loading .ts-control::after {
  content: '';
  display: block;
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  border: 2px solid var(--sh-border);
  border-top-color: var(--sh-blue);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  animation: spin 0.6s linear infinite;
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .ts-wrapper .ts-control {
  background-color: var(--sh-bg-secondary);
  border-color: var(--sh-border);
}

[data-bs-theme="dark"] .ts-wrapper .ts-dropdown {
  background-color: var(--sh-card);
  border-color: var(--sh-border);
}

[data-bs-theme="dark"] .ts-wrapper .ts-dropdown .option:hover,
[data-bs-theme="dark"] .ts-wrapper .ts-dropdown .option.active {
  background-color: rgba(87, 144, 247, 0.2);
}

[data-bs-theme="dark"] .ts-wrapper .ts-dropdown .optgroup-header {
  background-color: var(--sh-bg);
}

/* Search highlight - matched text in options */
.ts-wrapper .ts-dropdown .option .highlight {
  background-color: rgba(255, 213, 79, 0.4);
  border-radius: 2px;
  padding: 0 1px;
}

[data-bs-theme="dark"] .ts-wrapper .ts-dropdown .option .highlight {
  background-color: rgba(96, 165, 250, 0.3);
  color: #93c5fd;
}

/* Dropdown search input (dropdown_input plugin) */
.ts-wrapper .ts-dropdown .dropdown-input-wrap {
  padding: 0.5rem;
  border-bottom: 1px solid var(--sh-border);
}

.ts-wrapper .ts-dropdown .dropdown-input {
  width: 100%;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-sm);
  background-color: var(--sh-bg);
  color: var(--sh-text);
  outline: none;
  transition: border-color var(--sh-transition), box-shadow var(--sh-transition);
}

.ts-wrapper .ts-dropdown .dropdown-input:focus {
  border-color: var(--sh-blue);
  box-shadow: 0 0 0 2px var(--sh-blue-subtle);
}

.ts-wrapper .ts-dropdown .dropdown-input::placeholder {
  color: var(--sh-text-muted);
}

[data-bs-theme="dark"] .ts-wrapper .ts-dropdown .dropdown-input {
  background-color: var(--sh-bg);
  border-color: var(--sh-border);
}

/* Disabled state */
.ts-wrapper.disabled .ts-control {
  opacity: 0.65;
  cursor: not-allowed;
  background-color: var(--sh-bg-secondary);
}


/* ==========================================================================
   14. DATATABLES
   Minimal styling - we use Bootstrap components for controls
   ========================================================================== */

/* TomSelect in DataTables header - match form-control height */
.dataTables_wrapper .ts-wrapper .ts-control {
  min-height: calc(1.5em + 0.75rem + calc(var(--bs-border-width)* 2));
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

/* Processing indicator overlay */
.dataTables_processing {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background-color: var(--sh-bg) !important;
  padding: 1rem !important;
  border-radius: var(--sh-radius) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  z-index: 10 !important;
}

/* ==========================================================================
   15. CHART CARDS (Hover-reveal links)
   ========================================================================== */

/* Link hidden by default, fades in on card hover */
.chart-card-link {
  opacity: 0;
  transition: opacity var(--sh-transition);
  text-decoration: none;
}

.card:hover .chart-card-link {
  opacity: 1;
}

.chart-card-link:hover {
  color: var(--sh-blue) !important;
}

/* ==========================================================================
   16. FIELD METADATA POPOVERS
   ========================================================================== */

.field-meta-popover-container {
  --bs-popover-max-width: 320px;
}

.field-meta-popover-container .popover-body {
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  max-width: 320px;
  line-height: 1.4;
}

[data-bs-theme="dark"] .field-meta-popover-container {
  --bs-popover-bg: var(--sh-card);
  --bs-popover-border-color: var(--sh-border);
  --bs-popover-body-color: var(--sh-text);
}

/* ── Accordion header inline link ─────────────────────────────────────── */
.accordion-button .accordion-header-link {
  color: var(--sh-text-muted);
  text-decoration: none;
  font-size: 0.8125rem;
  transition: color var(--sh-transition);
}

.accordion-button .accordion-header-link:hover {
  color: var(--sh-blue) !important;
  text-decoration: none;
}

/* ── Area insight link (overview page) ────────────────────────────────── */
.area-insight-link {
  color: var(--sh-text);
  text-decoration: none;
  transition: color var(--sh-transition);
}

.area-insight-link:hover {
  color: var(--sh-blue) !important;
  text-decoration: none;
}

/* ── Assessment pill (subtle status headline) ────────────────────────── */
.assessment-pill {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 500;
  color: #374151;
  background-color: #F3F4F6;
  border: 1px solid #E5E7EB;
  padding: 4px 10px;
  border-radius: 999px;
}

[data-bs-theme="dark"] .assessment-pill {
  color: #D4D4D8;
  background-color: #3F3F46;
  border-color: #52525B;
}

/* ── Flush list-group: clean separators ────────────────────────────────── */
.list-group-flush .list-group-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

[data-bs-theme="dark"] .list-group-item {
  background-color: transparent;
  border-color: var(--sh-border);
}

/* ==========================================================================
   Pattern-name inline rename (scope-agnostic — flows, sessions, sub-navs)
   ========================================================================== */

.pattern-name-cell { min-width: 0; display: flex; align-items: center; gap: 0.25rem; }
.pattern-name-display { flex: 1; min-width: 0; }
.pattern-name-actions { flex-shrink: 0; display: none !important; }
.pattern-name-cell:hover .pattern-name-actions { display: flex !important; }
.pattern-name-actions i { cursor: pointer; opacity: 0.5; }
.pattern-name-actions i:hover { opacity: 1; }
.pattern-name-input { font-size: 0.75rem !important; }

/* ==========================================================================
   Secondary nav responsive behaviour (services / flows / sessions / admin /
   explorer sub-navs). Tabs remain horizontally scrollable at every viewport
   so they never overflow their container; below the md breakpoint the row
   stacks (tabs on top, timeframe + entity selectors below).
   ========================================================================== */

.sh-subnav-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Flex item default min-width is `auto`, which would let the tab list
     push its parent .sh-subnav-row wider than the viewport instead of
     shrinking. Forcing min-width: 0 makes overflow-x: auto take over. */
  min-width: 0;
}
/* Right-edge fade is conditional: SHUtils' subnav-mask helper toggles
   --overflow-end on whenever the tab strip is genuinely scrollable AND
   not yet scrolled to the right edge. Without that gate, the mask ate
   the last tab even on desktop widths where every tab fits. */
.sh-subnav-tabs.sh-subnav-tabs--overflow-end {
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
}
.sh-subnav-tabs::-webkit-scrollbar {
  display: none;
}
.sh-subnav-tabs > .nav-item {
  flex-shrink: 0;
}
.sh-subnav-tabs > .nav-item > .nav-link {
  white-space: nowrap;
}

/* Tablet portrait + small laptop: stack tabs above controls. 7 concern
   tabs + a Timeframe pill + a 320 px Service selector need ~1100 px to fit
   on one row, so iPad Pro portrait (1024 px) and any laptop window below
   ~1200 px clips the rightmost tabs. The mask gradient still fades the
   edge in case the stacked tab strip itself ever overflows. */
@media (max-width: 1199.98px) {
  .sh-subnav-row {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.5rem;
    padding: 0.5rem 0;
  }
}

/* Phones: additionally stack the timeframe + entity selectors onto their
   own rows and let the entity selector's ts-wrapper grow to fill its row
   instead of staying at the desktop pill's fixed 320 px. */
@media (max-width: 767.98px) {
  .sh-subnav-controls {
    flex-wrap: wrap;
    width: 100%;
    gap: 0.5rem !important;
  }
  .sh-subnav-controls > * {
    flex: 1 1 100%;
    min-width: 0;
  }
  .sh-subnav-controls .ts-wrapper {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }
}

/* Insight title row (page header inside concern pages). On phones, the
   right-side scope block (Latest badge + date pill + "N-day analysis · M
   calls", or the per-page timeframe-history selector on concern-page shell)
   gets squeezed to a narrow column and wraps awkwardly when it shares a
   row with the title. Stack title above scope below md. */
@media (max-width: 767.98px) {
  .sh-insight-title-row {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.5rem;
    margin-bottom: 1rem !important;
  }
  .sh-insight-title-row > .text-end {
    text-align: left !important;
    width: 100%;
  }
  .sh-insight-title-row > .text-end .d-flex.justify-content-end {
    justify-content: flex-start !important;
  }
}

/* Touch targets. On any device whose primary pointer is coarse (phone /
   tablet / touchscreen laptop), bump the smallest interactive controls to
   a 38 px minimum tap target. Desktops with a mouse keep the existing
   density — desktop tables and admin pages were tuned for that and we
   don't want to regress information density there. */
@media (pointer: coarse) {
  .btn-sm,
  .btn-link.p-0,
  .nav-icon-hover-bg,
  .pattern-name-actions i {
    min-height: 38px;
    min-width: 38px;
  }
  /* Bootstrap's .btn-sm padding is 0.375rem 0.75rem; with min-height: 38px
     the icon can drift off-centre, so re-centre with flex when there's a
     single icon child. */
  .btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Inline-rename pencil/x icons get a hit-zone wrapper without changing
     their visible size. */
  .pattern-name-actions i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
  }
}

/* Explorer Metrics controls row. Five inline-width form-controls
   (entityType 140, entity selector 350 min, granularity 130, dateFrom 160,
   dateTo 160, plus an Explore button) live in a flex-wrap row. Below md
   each labelled wrapper goes full-width so the controls stack cleanly
   instead of fragmenting across many wrap rows at random widths. */
@media (max-width: 767.98px) {
  .sh-explorer-controls > div {
    flex: 1 1 100%;
    width: 100%;
  }
  .sh-explorer-controls .form-select,
  .sh-explorer-controls .form-control {
    width: 100% !important;
    min-width: 0 !important;
  }
  .sh-explorer-controls #exploreBtn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   END OF SERVICEHOP THEME
   Compliant with DESIGN.md v1 - Enterprise UI Contract
   ========================================================================== */