/*
 * 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.
 */

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

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

/* Header <details> menus (admin, user): <summary> styled like Bootstrap dropdown toggle (no triangle marker). */
.app-nav-details > summary {
  list-style: none;
}

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

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

/* Bootstrap hides .dropdown-menu until .show; we drive visibility from <details open>. */
.app-nav-details[open] > .dropdown-menu {
  display: block;
}

.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 var(--bs-border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  background: var(--surface);
  max-width: 26rem;
  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 .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;
}

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

/* Readable width for stacked forms; exclude wide generators via .app-form-layout-wide */
#main form:not(.app-form-layout-wide) {
  max-width: 40rem;
}