/* =========================================================================
   Canarys PAS — Design System
   Visual-only stylesheet. Overrides Bootstrap 5 CSS variables so existing
   markup (btn-primary, bg-dark, card, table, etc.) picks up the brand
   automatically. No element ids, names, or bindings are touched.
   ========================================================================= */

/* ---------- 1. Tokens ---------- */

:root {
  /* Brand (sampled from images/logo.png) */
  --canarys-navy:        #1E2A33;
  --canarys-navy-dark:   #162028;
  --canarys-navy-line:   #2A3742;
  --canarys-teal:        #1FA3C0;
  --canarys-teal-hover:  #198499;
  --canarys-teal-press:  #126879;
  --canarys-teal-tint:   #E5F4F8;

  /* Neutral slate scale */
  --gray-50:  #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1E293B;
  --gray-900: #0F172A;

  /* Semantic */
  --success:        #16A34A;
  --success-tint:   #DCFCE7;
  --warning:        #D97706;
  --warning-tint:   #FEF3C7;
  --danger:         #DC2626;
  --danger-tint:    #FEE2E2;
  --info:           #0EA5E9;
  --info-tint:      #E0F2FE;

  /* Surfaces & text */
  --surface:        #FFFFFF;
  --surface-alt:    #F8FAFC;
  --surface-stripe: #F1F5F9;
  --surface-border: #E2E8F0;
  --text:           var(--gray-800);
  --text-muted:     var(--gray-500);
  --text-strong:    var(--gray-900);
  --text-inverse:   #FFFFFF;

  /* Spacing (8px scale) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radii */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-xs:    0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm:    0 2px 4px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:    0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg:    0 10px 24px rgba(15, 23, 42, 0.08);
  --shadow-focus: 0 0 0 3px rgba(31, 163, 192, 0.30);

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 14.5px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  34px;

  /* Motion */
  --t-fast: 120ms;
  --t-base: 180ms;
  --easing: cubic-bezier(0.2, 0, 0.2, 1);

  /* ---- Bootstrap 5 variable overrides (the cascade trick) ---- */
  --bs-primary:               var(--canarys-teal);
  --bs-primary-rgb:           31, 163, 192;
  --bs-primary-bg-subtle:     var(--canarys-teal-tint);
  --bs-primary-border-subtle: #A6DDE9;
  --bs-primary-text-emphasis: var(--canarys-teal-press);

  --bs-dark:                  var(--canarys-navy);
  --bs-dark-rgb:              30, 42, 51;

  --bs-success:               var(--success);
  --bs-success-rgb:           22, 163, 74;
  --bs-warning:               var(--warning);
  --bs-warning-rgb:           217, 119, 6;
  --bs-danger:                var(--danger);
  --bs-danger-rgb:            220, 38, 38;
  --bs-info:                  var(--info);
  --bs-info-rgb:              14, 165, 233;

  --bs-body-color:            var(--text);
  --bs-body-color-rgb:        30, 41, 59;
  --bs-body-bg:               var(--surface-alt);
  --bs-body-bg-rgb:           248, 250, 252;
  --bs-secondary-color:       var(--text-muted);
  --bs-tertiary-color:        var(--gray-400);

  --bs-border-color:          var(--surface-border);
  --bs-border-color-translucent: rgba(15, 23, 42, 0.08);

  --bs-link-color:            var(--canarys-teal);
  --bs-link-color-rgb:        31, 163, 192;
  --bs-link-hover-color:      var(--canarys-teal-hover);
  --bs-link-hover-color-rgb:  25, 132, 153;

  --bs-card-border-color:     var(--surface-border);
  --bs-card-cap-bg:           var(--surface);

  --bs-table-bg:              var(--surface);
  --bs-table-striped-bg:      var(--gray-50);
  --bs-table-hover-bg:        var(--canarys-teal-tint);

  --bs-dropdown-link-hover-bg:   var(--canarys-teal-tint);
  --bs-dropdown-link-active-bg:  var(--canarys-teal);
  --bs-dropdown-border-color:    var(--surface-border);

  --bs-focus-ring-color:         rgba(31, 163, 192, 0.30);
  --bs-focus-ring-width:         3px;
}

/* ---------- 2. Base typography ---------- */

html {
  font-size: var(--fs-base);
}

body {
  font-family: var(--font-sans);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  color: var(--text);
  background-color: var(--surface-alt);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--text-strong);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl);  }
h4 { font-size: var(--fs-lg);  }
h5 { font-size: var(--fs-md);  }
h6 { font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; }

.text-muted, small.text-muted { color: var(--text-muted) !important; }

/* ---------- 3. Header / navbar ---------- */

.navbar.bg-dark {
  background-color: var(--canarys-navy) !important;
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--canarys-navy-line);
  padding-top:    var(--space-2);
  padding-bottom: var(--space-2);
}

.navbar.bg-dark .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: #FFFFFF;
}

.navbar.bg-dark .navbar-brand img {
  height: 32px;
  width: auto;
  border-radius: var(--radius-sm);
}

/* Subtle vertical separator between logo and product name */
.navbar.bg-dark .navbar-brand::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 22px;
  background: var(--canarys-navy-line);
  margin-left: var(--space-2);
  margin-right: var(--space-1);
}

/* Nav links — restrained spacing, brand-accent on active/hover */
.navbar.bg-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: color var(--t-fast) var(--easing),
              background-color var(--t-fast) var(--easing);
}

.navbar.bg-dark .navbar-nav .nav-link i.bi {
  opacity: 0.85;
  margin-right: 4px;
}

.navbar.bg-dark .navbar-nav .nav-link:hover,
.navbar.bg-dark .navbar-nav .nav-link:focus {
  color: #FFFFFF;
  background-color: var(--canarys-navy-line);
}

.navbar.bg-dark .navbar-nav .show > .nav-link,
.navbar.bg-dark .navbar-nav .nav-link.active {
  color: #FFFFFF;
  background-color: var(--canarys-navy-line);
}

.navbar.bg-dark .dropdown-toggle::after { margin-left: var(--space-2); }

/* Dropdown menus inside the dark navbar */
.navbar.bg-dark .dropdown-menu-dark {
  background-color: var(--canarys-navy-dark);
  border: 1px solid var(--canarys-navy-line);
  border-radius: var(--radius-md);
  padding: var(--space-1);
  box-shadow: var(--shadow-md);
  margin-top: var(--space-2);
}

.navbar.bg-dark .dropdown-menu-dark .dropdown-item {
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.88);
}

.navbar.bg-dark .dropdown-menu-dark .dropdown-item:hover,
.navbar.bg-dark .dropdown-menu-dark .dropdown-item:focus {
  background-color: var(--canarys-navy-line);
  color: #FFFFFF;
}

.navbar.bg-dark .dropdown-menu-dark .dropdown-divider {
  border-top-color: var(--canarys-navy-line);
  margin: var(--space-1) 0;
}

/* ---------- 4. Buttons ---------- */

.btn {
  font-weight: 500;
  border-radius: var(--radius-md);
  padding: 8px 16px;
  transition: background-color var(--t-fast) var(--easing),
              border-color    var(--t-fast) var(--easing),
              box-shadow      var(--t-fast) var(--easing),
              color           var(--t-fast) var(--easing);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.btn-primary {
  --bs-btn-bg:               var(--canarys-teal);
  --bs-btn-border-color:     var(--canarys-teal);
  --bs-btn-hover-bg:         var(--canarys-teal-hover);
  --bs-btn-hover-border-color: var(--canarys-teal-hover);
  --bs-btn-active-bg:        var(--canarys-teal-press);
  --bs-btn-active-border-color: var(--canarys-teal-press);
  --bs-btn-disabled-bg:      #9FD3DE;
  --bs-btn-disabled-border-color: #9FD3DE;
  color: #FFFFFF;
}

.btn-outline-primary {
  --bs-btn-color:                  var(--canarys-teal);
  --bs-btn-border-color:           var(--canarys-teal);
  --bs-btn-hover-bg:               var(--canarys-teal);
  --bs-btn-hover-border-color:     var(--canarys-teal);
  --bs-btn-hover-color:            #FFFFFF;
  --bs-btn-active-bg:              var(--canarys-teal-press);
  --bs-btn-active-border-color:    var(--canarys-teal-press);
  --bs-btn-active-color:           #FFFFFF;
}

.btn-secondary {
  --bs-btn-bg:               var(--gray-100);
  --bs-btn-border-color:     var(--surface-border);
  --bs-btn-color:            var(--text);
  --bs-btn-hover-bg:         var(--gray-200);
  --bs-btn-hover-border-color: var(--gray-300);
  --bs-btn-hover-color:      var(--text-strong);
  --bs-btn-active-bg:        var(--gray-300);
  --bs-btn-active-border-color: var(--gray-400);
  --bs-btn-active-color:     var(--text-strong);
}

.btn-dark {
  --bs-btn-bg:               var(--canarys-navy);
  --bs-btn-border-color:     var(--canarys-navy);
  --bs-btn-hover-bg:         var(--canarys-navy-dark);
  --bs-btn-hover-border-color: var(--canarys-navy-dark);
  --bs-btn-active-bg:        #0D1419;
  --bs-btn-active-border-color: #0D1419;
}

/* ---------- 5. Forms ---------- */

.form-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: 6px;
}

.form-control,
.form-select {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: var(--fs-base);
  color: var(--text);
  background-color: var(--surface);
  transition: border-color var(--t-fast) var(--easing),
              box-shadow   var(--t-fast) var(--easing);
}

.form-control::placeholder { color: var(--gray-400); }

.form-control:focus,
.form-select:focus {
  border-color: var(--canarys-teal);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--gray-50);
  color: var(--gray-500);
}

.input-group-text {
  background-color: var(--gray-50);
  border-color: var(--surface-border);
  color: var(--text-muted);
}

.form-check-input:focus {
  border-color: var(--canarys-teal);
  box-shadow: var(--shadow-focus);
}

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

/* Validation */
.text-danger {
  color: var(--danger) !important;
  font-size: var(--fs-sm);
}

.is-invalid, .input-validation-error {
  border-color: var(--danger) !important;
}

/* ---------- 6. Cards ---------- */

.card {
  background-color: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card.shadow,
.card.shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}

.card-header {
  background-color: var(--surface);
  border-bottom: 1px solid var(--surface-border);
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  color: var(--text-strong);
}

/* Branded card headers (bg-dark used a lot in the app) */
.card-header.bg-dark {
  background-color: var(--canarys-navy) !important;
  color: #FFFFFF;
  border-bottom: 1px solid var(--canarys-navy-line);
}

.card-header.bg-dark h1,
.card-header.bg-dark h2,
.card-header.bg-dark h3,
.card-header.bg-dark h4,
.card-header.bg-dark h5,
.card-header.bg-dark h6,
.card-header.bg-dark .h1,
.card-header.bg-dark .h2,
.card-header.bg-dark .h3,
.card-header.bg-dark .h4,
.card-header.bg-dark .h5,
.card-header.bg-dark .h6,
.card-header.bg-dark p,
.card-header.bg-dark small {
  color: #FFFFFF;
}

/* Any element placed inside a dark surface should keep readable text.
   Applies to the navbar dark dropdown, dark cards, dark modals, etc. */
.bg-dark,
.bg-dark h1, .bg-dark h2, .bg-dark h3,
.bg-dark h4, .bg-dark h5, .bg-dark h6,
.bg-dark .h1, .bg-dark .h2, .bg-dark .h3,
.bg-dark .h4, .bg-dark .h5, .bg-dark .h6 {
  color: #FFFFFF;
}

.card-body { padding: var(--space-4) var(--space-4); }

.card-footer {
  background-color: var(--surface);
  border-top: 1px solid var(--surface-border);
  padding: var(--space-3) var(--space-4);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* ---------- 7. Tables ---------- */

.table {
  --bs-table-bg:         var(--surface);
  --bs-table-striped-bg: var(--gray-50);
  --bs-table-hover-bg:   var(--canarys-teal-tint);
  color: var(--text);
  border-color: var(--surface-border);
}

.table > :not(caption) > * > * {
  padding: 12px 14px;
  border-bottom-color: var(--surface-border);
}

.table thead th {
  background-color: var(--gray-100);
  color: var(--gray-700);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--surface-border);
}

.table-bordered { border: 1px solid var(--surface-border); }
.table-bordered > :not(caption) > * > * { border-color: var(--surface-border); }

.table > tbody > tr:hover { background-color: var(--gray-50); }

.table-responsive { border-radius: var(--radius-md); }

/* ---------- 8. Badges & pills ---------- */

.badge {
  font-weight: 500;
  font-size: var(--fs-xs);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
}

.badge.bg-primary  { background-color: var(--canarys-teal) !important; color: #FFFFFF; }
.badge.bg-success  { background-color: var(--success-tint) !important; color: #14532D; }
.badge.bg-warning  { background-color: var(--warning-tint) !important; color: #78350F; }
.badge.bg-danger   { background-color: var(--danger-tint)  !important; color: #7F1D1D; }
.badge.bg-info     { background-color: var(--info-tint)    !important; color: #075985; }
.badge.bg-secondary{ background-color: var(--gray-100)     !important; color: var(--gray-700); }
.badge.bg-dark     { background-color: var(--gray-100)     !important; color: var(--gray-800); }

/* Outline / pill use for status — keeps a strong corporate feel */

/* ---------- 9. Alerts ---------- */

.alert {
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-base);
}

.alert-success {
  background-color: var(--success-tint);
  color: #14532D;
  border-color: #BBF7D0;
}

.alert-warning {
  background-color: var(--warning-tint);
  color: #78350F;
  border-color: #FDE68A;
}

.alert-danger {
  background-color: var(--danger-tint);
  color: #7F1D1D;
  border-color: #FECACA;
}

.alert-info {
  background-color: var(--info-tint);
  color: #075985;
  border-color: #BAE6FD;
}

/* ---------- 10. Dropdown menus (light, used outside dark navbar) ---------- */

.dropdown-menu:not(.dropdown-menu-dark) {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: var(--space-1);
  box-shadow: var(--shadow-md);
}

.dropdown-menu:not(.dropdown-menu-dark) .dropdown-item {
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: var(--fs-sm);
  color: var(--text);
}

.dropdown-menu:not(.dropdown-menu-dark) .dropdown-item:hover,
.dropdown-menu:not(.dropdown-menu-dark) .dropdown-item:focus {
  background-color: var(--canarys-teal-tint);
  color: var(--canarys-teal-press);
}

/* ---------- 11. Links ---------- */

a {
  color: var(--canarys-teal);
  text-decoration: none;
  transition: color var(--t-fast) var(--easing);
}

a:hover {
  color: var(--canarys-teal-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ---------- 12. Footer ---------- */

footer.footer {
  background-color: var(--surface);
  border-top: 1px solid var(--surface-border);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.4;
  white-space: normal;
  padding: var(--space-4) var(--space-4);
  position: static;
}

/* The shell uses absolutely-positioned footer + 60px body-margin from site.css.
   With our static footer we don't need that margin reservation — reset it. */
body { margin-bottom: 0; }

/* ---------- 13. Misc utility refinements ---------- */

hr { border-color: var(--surface-border); opacity: 1; }

.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow    { box-shadow: var(--shadow-md) !important; }

/* Background utility re-skins used across the app */
.bg-dark     { background-color: var(--canarys-navy) !important; color: #FFFFFF; }
.bg-primary  { background-color: var(--canarys-teal) !important; color: #FFFFFF; }
.bg-success  { background-color: var(--success)      !important; color: #FFFFFF; }
.bg-warning  { background-color: var(--warning)      !important; color: #FFFFFF; }
.bg-danger   { background-color: var(--danger)       !important; color: #FFFFFF; }
.bg-info     { background-color: var(--info)         !important; color: #FFFFFF; }
.bg-light    { background-color: var(--surface-alt)  !important; }

/* Make text utilities feel restrained on brand backgrounds */
.text-white { color: #FFFFFF !important; }
.text-primary { color: var(--canarys-teal-press) !important; }

/* Subtle reveal on hoverable rows */
.table > tbody > tr,
.dropdown-item,
.btn,
.nav-link { transition: background-color var(--t-fast) var(--easing); }

/* ---------- 14. Accessibility — focus rings everywhere ---------- */

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}