/* Controller styles */
[controller="href"],
[controller="approval-item"] {
  cursor: pointer;
}

/*
 * FLORAY design tokens.
 * Fonts (Jost + Mulish) are loaded from Google Fonts in head.tsx.
 * Typography: Jost for headings / buttons / nav / labels, Mulish for body.
 * Palette, radii, and shadows follow the Floray_Design_Tokens reference.
 */
:root {
  /* Typography */
  --floray-font-heading: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --floray-font-body: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Brand — Blue */
  --floray-primary: #004080;        /* logo blue */
  --floray-primary-light: #0A5AA8;  /* hovers, secondary accents */
  --floray-deep: #06264A;           /* hero / footer / dark sections */

  /* Accent — Brass / Oak */
  --floray-brass: #B47B3C;
  --floray-brass-bright: #D69A4E;
  --floray-brass-soft: #F1E4D0;

  /* Secondary Blue — Aqua */
  --floray-aqua: #2C6FB0;
  --floray-aqua-light: #5B93D6;
  --floray-aqua-soft: #E1ECF7;

  /* Neutrals & surfaces */
  --floray-bg: #F8FAFC;
  --floray-surface: #FFFFFF;
  --floray-alt-surface: #F1F5F9;
  --floray-border: #E2E8F0;

  /* Text */
  --floray-ink: #16233B;
  --floray-muted: #5B6579;
  --floray-on-dark: #EAF5FB;

  /* Semantic */
  --floray-success: #1A9E77;
  --floray-warning: #C6891C;

  /* Shape */
  --floray-radius-card: 16px;
  --floray-radius-input: 10px;

  /* Shadows (cool navy) */
  --floray-shadow-lg: 0 26px 60px -30px rgba(20, 34, 79, 0.5);
  --floray-shadow-sm: 0 12px 30px -18px rgba(20, 34, 79, 0.4);
}

/* Map brand tokens onto Bootstrap's theme variables */
:root {
  --bs-primary: var(--floray-primary);
  --bs-primary-rgb: 0, 64, 128;

  --bs-secondary: #5B6579;
  --bs-secondary-rgb: 91, 101, 121;

  --bs-success: #1A9E77;
  --bs-success-rgb: 26, 158, 119;

  --bs-warning: #C6891C;
  --bs-warning-rgb: 198, 137, 28;

  --bs-danger: #dc2626;
  --bs-danger-rgb: 220, 38, 38;

  --bs-info: #2C6FB0;
  --bs-info-rgb: 44, 111, 176;

  --bs-light: #F8FAFC;
  --bs-light-rgb: 248, 250, 252;
  --bs-dark: #06264A;
  --bs-dark-rgb: 6, 38, 74;

  --bs-body-bg: #F8FAFC;
  --bs-body-color: #16233B;
  --bs-body-font-family: var(--floray-font-body);

  --bs-border-color: #E2E8F0;
  --bs-border-color-translucent: rgba(226, 232, 240, 0.6);

  --bs-link-color: #004080;
  --bs-link-color-rgb: 0, 64, 128;
  --bs-link-hover-color: #0A5AA8;
  --bs-link-hover-color-rgb: 10, 90, 168;
}

/* Typography ------------------------------------------------------------- */
body {
  font-family: var(--floray-font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--floray-ink);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title,
.navbar-brand,
.btn,
.nav-link,
.form-label,
label {
  font-family: var(--floray-font-heading);
}

h1, h2, h3,
.h1, .h2, .h3 {
  font-weight: 700;
  letter-spacing: -0.015em;
}

.btn,
.nav-link {
  font-weight: 600;
}

/* Scrollbars ------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--floray-alt-surface);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--floray-primary);
  border-radius: 50px;
  border: 3px solid var(--floray-alt-surface);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--floray-primary-light);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--floray-primary) var(--floray-alt-surface);
}

.htmx-swapping {
  opacity: 0;
  transition: opacity 200ms ease-out;
}

.htmx-settling {
  opacity: 1;
}

/* Buttons ---------------------------------------------------------------- */
/* Fully-rounded "pill" buttons per the brand spec */
.btn {
  border-radius: 50rem;
}

.btn-primary {
  --bs-btn-bg: #004080;
  --bs-btn-border-color: #004080;
  --bs-btn-hover-bg: #0A5AA8;
  --bs-btn-hover-border-color: #0A5AA8;
  --bs-btn-active-bg: #06264A;
  --bs-btn-active-border-color: #06264A;
  --bs-btn-disabled-bg: #004080;
  --bs-btn-disabled-border-color: #004080;
  background-image: linear-gradient(135deg, #0A5AA8 0%, #004080 100%);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-image: linear-gradient(135deg, #0A5AA8 0%, #06264A 100%);
}

/* Ghost / outline primary: 1.5px border in brand blue */
.btn-outline-primary {
  --bs-btn-color: #004080;
  --bs-btn-border-color: #004080;
  --bs-btn-hover-bg: #004080;
  --bs-btn-hover-border-color: #004080;
  --bs-btn-active-bg: #06264A;
  --bs-btn-active-border-color: #06264A;
  border-width: 1.5px;
}

.btn-secondary {
  --bs-btn-bg: #5B6579;
  --bs-btn-border-color: #5B6579;
  --bs-btn-hover-bg: #4a5468;
  --bs-btn-hover-border-color: #4a5468;
  --bs-btn-active-bg: #3d4657;
  --bs-btn-active-border-color: #3d4657;
}

.btn-success {
  --bs-btn-bg: #1A9E77;
  --bs-btn-border-color: #1A9E77;
  --bs-btn-hover-bg: #158163;
  --bs-btn-hover-border-color: #158163;
  --bs-btn-active-bg: #116b52;
  --bs-btn-active-border-color: #116b52;
}

.btn-warning {
  --bs-btn-bg: #C6891C;
  --bs-btn-border-color: #C6891C;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #a97418;
  --bs-btn-hover-border-color: #a97418;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #8c6114;
  --bs-btn-active-border-color: #8c6114;
  --bs-btn-active-color: #fff;
}

.btn-danger {
  --bs-btn-bg: #dc2626;
  --bs-btn-border-color: #dc2626;
  --bs-btn-hover-bg: #b91c1c;
  --bs-btn-hover-border-color: #b91c1c;
  --bs-btn-active-bg: #991b1b;
  --bs-btn-active-border-color: #991b1b;
}

.btn-info {
  --bs-btn-bg: #2C6FB0;
  --bs-btn-border-color: #2C6FB0;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #255f97;
  --bs-btn-hover-border-color: #255f97;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #1f507f;
  --bs-btn-active-border-color: #1f507f;
  --bs-btn-active-color: #fff;
}

/* Links use brand blue */
a {
  color: var(--floray-primary);
}
a:hover {
  color: var(--floray-primary-light);
}

/* Badges ----------------------------------------------------------------- */
.badge.bg-primary { background-color: #004080 !important; }
.badge.bg-secondary { background-color: #5B6579 !important; }
.badge.bg-success { background-color: #1A9E77 !important; }
.badge.bg-warning { background-color: #C6891C !important; color: #fff !important; }
.badge.bg-danger { background-color: #dc2626 !important; }
.badge.bg-info { background-color: #2C6FB0 !important; color: #fff !important; }

/* Cards ------------------------------------------------------------------ */
.card {
  border: 1px solid var(--floray-border);
  border-radius: var(--floray-radius-card);
  box-shadow: var(--floray-shadow-sm);
}

.card-header {
  background-color: var(--floray-alt-surface);
  border-bottom: 1px solid var(--floray-border);
  font-weight: 600;
  color: var(--floray-ink);
}

/* First/last card headers should follow the card's rounded corners */
.card > .card-header:first-child {
  border-top-left-radius: calc(var(--floray-radius-card) - 1px);
  border-top-right-radius: calc(var(--floray-radius-card) - 1px);
}

.modal-content {
  border-radius: var(--floray-radius-card);
  box-shadow: var(--floray-shadow-lg);
}

/* Tables ----------------------------------------------------------------- */
.table-light > :not(caption) > * > * {
  background-color: var(--floray-alt-surface);
  color: var(--floray-ink);
}

.table-hover > tbody > tr:hover > * {
  background-color: var(--floray-alt-surface);
}

/* Navigation ------------------------------------------------------------- */
.navbar-dark,
.bg-dark {
  background-color: var(--floray-deep) !important;
}

.navbar-light {
  background-color: var(--floray-surface);
  border-bottom: 1px solid var(--floray-border);
}

/* Forms ------------------------------------------------------------------ */
.form-control,
.form-select {
  border-color: #d1d5db;
  border-radius: var(--floray-radius-input);
}

.form-control:focus,
.form-select:focus {
  border-color: #004080;
  box-shadow: 0 0 0 0.2rem rgba(0, 64, 128, 0.25);
}

.form-check-input:checked {
  background-color: #004080;
  border-color: #004080;
}

/* Text helpers align to brand ink/muted */
.text-primary { color: #004080 !important; }
.text-muted { color: var(--floray-muted) !important; }

/* Alerts ----------------------------------------------------------------- */
.alert {
  border-radius: var(--floray-radius-input);
}

.alert-primary {
  background-color: #E1ECF7;
  border-color: #cfe0f2;
  color: #06264A;
}

.alert-secondary {
  background-color: #f1f5f9;
  border-color: #E2E8F0;
  color: #5B6579;
}

.alert-success {
  background-color: #d9f2e9;
  border-color: #b7e6d5;
  color: #116b52;
}

.alert-warning {
  background-color: #F1E4D0;
  border-color: #e6d2b3;
  color: #8c6114;
}

.alert-danger {
  background-color: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
}

.alert-info {
  background-color: #E1ECF7;
  border-color: #cfe0f2;
  color: #1f507f;
}