/*
 * Choice Titan — theme tokens only (no component/layout CSS).
 * Palette, radii, shadows, and fonts copied from Choice Connect public stylesheet:
 * https://www.choiceconnect.biz/assets/css/main.css
 * Bootstrap 5.3 maps to these variables below.
 */

/* Full-width layout: main uses Bootstrap container-fluid site-wide (auth pages stay narrow). */

:root {
  --primary: #4FAED0;
  --primary-dark: #3a8fb0;
  --primary-light: #D3F3FF;
  --primary-lighter: #F2FCFF;
  --accent: #FF5907;
  --accent-dark: #E85020;
  --accent-light: #F8DED1;
  --lime: #C9E337;
  --lime-light: #E8F5A3;
  --dark: #083651;
  --dark-lighter: #0d4a6f;
  --background: #FFFBF9;
  --surface: #ffffff;
  --text: #083651;
  --text-muted: #5a7385;
  --gradient-primary: linear-gradient(135deg, #4FAED0 0%, #3a8fb0 100%);
  --gradient-accent: linear-gradient(135deg, #FF5907 0%, #E85020 100%);
  --gradient-dark: linear-gradient(135deg, #083651 0%, #0d4a6f 100%);
  --gradient-mesh: radial-gradient(ellipse at 20% 30%, rgba(79, 174, 208, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(255, 89, 7, 0.1) 0%, transparent 50%);
  --font-primary: "KoHo", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "KoHo", monospace;
  --shadow-sm: 0 2px 8px rgba(8, 54, 81, 0.06);
  --shadow-md: 0 8px 24px rgba(8, 54, 81, 0.1);
  --shadow-lg: 0 16px 48px rgba(8, 54, 81, 0.12);
  --shadow-glow: 0 0 40px rgba(79, 174, 208, 0.3);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Bootstrap 5.3 — values reference Choice Connect tokens only */
  --bs-font-sans-serif: var(--font-primary);
  --bs-body-font-family: var(--font-primary);
  --bs-body-bg: var(--background);
  --bs-body-color: var(--text);
  --bs-secondary-color: var(--text-muted);
  --bs-emphasis-color: var(--dark);
  --bs-heading-color: var(--dark);
  --bs-primary: var(--accent);
  --bs-primary-rgb: 255, 89, 7;
  --bs-secondary: var(--primary);
  --bs-secondary-rgb: 79, 174, 208;
  --bs-link-color: var(--primary-dark);
  --bs-link-hover-color: var(--accent);
  --bs-link-decoration: none;
  --bs-link-hover-decoration: none;
  --bs-border-color: rgba(8, 54, 81, 0.12);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-md);
  --bs-border-radius-xl: var(--radius-lg);
  --bs-focus-ring-color: rgba(79, 174, 208, 0.45);
  --bs-box-shadow: var(--shadow-md);
  --bs-box-shadow-sm: var(--shadow-sm);
  --bs-box-shadow-lg: var(--shadow-lg);
}

/* Inputs/selects: white surface (match SlimSelect), not cream page bg. */
.form-control,
.form-select {
  background-color: var(--surface);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--surface);
}

/* Plain links: no underline (Bootstrap btn-link still underlines by default). */
a,
a:hover,
a:focus-visible,
.btn-link,
.btn-link:hover,
.btn-link:focus-visible {
  text-decoration: none;
}

/* Header wordmark: dark text only (theme maps Bootstrap "primary" to orange accent). */
.app-brand-link {
  color: var(--dark);
}

.app-brand-logo {
  max-height: 40px;
  width: auto;
  height: auto;
}

.app-brand-link:hover,
.app-brand-link:focus-visible {
  color: var(--primary-dark);
}

/* Collapsible filter panels above index/log tables. */
.app-filter-details > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
  background: var(--bs-body-bg);
  font-size: 0.875rem;
  font-weight: 500;
  user-select: none;
  color: var(--bs-body-color);
  line-height: 1.5;
}

.app-filter-details > summary::-webkit-details-marker {
  display: none;
}

.app-filter-details > summary::marker {
  content: "";
}

.app-filter-details > summary::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  margin-left: 0.15rem;
}

.app-filter-details[open] > summary {
  margin-bottom: 0.5rem;
}

.app-filter-details[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: 0.15rem;
}

.notification-nav-menu {
  max-height: 24rem;
  overflow-y: auto;
}

/* Native <dialog> — neutral shell. Theme maps Bootstrap primary to orange accent. */
.app-dialog {
  border: 1px solid rgba(8, 54, 81, 0.25);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  background: var(--surface);
  max-width: 36rem;
  width: calc(100% - 2rem);
  padding: 0;
  outline: none;
}

.app-dialog:focus,
.app-dialog:focus-visible {
  outline: none;
}

.app-dialog::backdrop {
  background: rgba(8, 54, 81, 0.45);
}

.app-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem 0.75rem;
  border-bottom: 1px solid rgba(8, 54, 81, 0.1);
}

.app-dialog-header h2 {
  margin: 0;
}

.app-dialog-body {
  padding: 1.25rem 1.5rem;
}

.app-dialog-footer {
  padding: 0.75rem 1.5rem 1.25rem;
  border-top: 1px solid rgba(8, 54, 81, 0.1);
}

.app-dialog .form-select:focus,
.app-dialog .form-control:focus {
  border-color: var(--primary-dark);
  box-shadow: 0 0 0 0.25rem rgba(79, 174, 208, 0.25);
}

.vendor-allocation-overlay {
  background: rgba(8, 54, 81, 0.45);
  overflow-y: auto;
}

.vendor-allocation-dialog {
  max-width: 40rem;
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
  margin: auto;
  border-color: var(--bs-border-color);
  box-shadow: var(--shadow-lg);
}

.vendor-allocation-dialog-body {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

/* Table row actions: links + button_to forms stay on one line (forms are block by default). */
.app-table-actions {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.25rem;
}

.app-table-actions > form {
  margin-bottom: 0;
}

/* Column headers stay on one line; body cells may wrap inside .table-responsive. */
thead th {
  white-space: nowrap;
}

/* Scrollable data tables: vertical scroll, sticky header, horizontal overflow for nowrap cells. */
.app-scrollable-table {
  max-height: min(70vh, 40rem);
  overflow: auto;
}

.app-scrollable-table table {
  margin-bottom: 0;
}

.app-scrollable-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--bs-table-bg);
  box-shadow: inset 0 -1px 0 var(--bs-table-border-color);
}

/* Toolbar / footer button groups: keep controls on one line */
.app-btn-row-nowrap {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.5rem;
}

/* Auth pages (sign in, password reset): narrow centered column */
.app-auth-main {
  width: 100%;
}

.app-auth-shell,
.app-auth-flash {
  width: 100%;
  max-width: 22rem;
}

.app-auth-shell {
  display: flex;
  flex-direction: column;
}

.app-auth-form {
  width: 100%;
}

/* Record show/edit: compact uppercase field labels */
.app-field-label {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

.app-section-title {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

/* Wide inventory forms (edit, generate range) use full container width */
.app-form-layout-wide {
  max-width: none;
}

/* Home dashboard — Smart Search + pool usage cards */
.smart-search-panel {
  background: var(--surface);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.5rem;
}

.smart-search-icon {
  margin-right: 0.35rem;
}

.pool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 1rem;
}

@media (min-width: 768px) {
  .pool-grid {
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  }
}

@media (min-width: 1200px) {
  .pool-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.pool-card {
  background: var(--surface);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 0.75rem 1rem;
  text-align: center;
}

.pool-donut-wrap {
  position: relative;
  width: 5.625rem;
  height: 5.625rem;
}

.pool-donut-ring {
  display: block;
  width: 100%;
  height: 100%;
}

.pool-donut-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dark);
}

.pool-card-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
}

.pool-status-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #28a745;
  flex-shrink: 0;
}

.pool-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.2;
}

.pool-counts {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* SlimSelect — align with Choice Titan theme tokens (loaded after slimselect.css). */
:root {
  --ss-primary-color: var(--primary);
  --ss-bg-color: var(--surface);
  --ss-font-color: var(--text);
  --ss-placeholder-color: var(--text-muted);
  --ss-disabled-color: #e9ecef;
  --ss-border-color: #ced4da;
  --ss-highlight-color: var(--primary-light);
  --ss-success-color: var(--primary);
  --ss-error-color: var(--accent);
  --ss-focus-color: rgba(79, 174, 208, 0.25);
}