/* ============================================================================
   CRD Scheduler — "Civic & Authoritative" theme
   ----------------------------------------------------------------------------
   A Bootstrap 5.3 override layer. It (a) defines the brand palette + type as
   CSS custom properties, (b) remaps Bootstrap's --bs-* theme vars to them so
   stock components inherit the identity, and (c) adds a thin set of civic
   component classes (.navbar-crds, .crds-section, status cells, etc.).

   Because it's pure variable + class overrides, this same file can later drop
   into src/CrdsScheduler.Web/wwwroot/css/ to theme the real app, and the
   existing [data-bs-theme="dark"] toggle keeps working unchanged.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700&display=swap');

/* ----------------------------------------------------------------------------
   1. Brand tokens
   ---------------------------------------------------------------------------- */
:root {
  /* Core palette — navy + civic gold */
  --crds-navy:       #1B2A4A;   /* primary: navbar, buttons, headings        */
  --crds-navy-ink:   #0F1B30;   /* darker: hover / pressed / strong heads     */
  --crds-navy-tint:  #34507F;   /* lighter navy for dark-mode primary surfaces*/
  --crds-navy-rgb:   27, 42, 74;

  --crds-gold:       #C9A227;   /* accent: active states, focus, key marks    */
  --crds-gold-soft:  #E3C868;   /* lighter gold for dark backgrounds          */
  --crds-gold-rgb:   201, 162, 39;

  /* Neutrals (light mode) */
  --crds-paper:      #F4F6F9;   /* page background                            */
  --crds-surface:    #FFFFFF;   /* cards / panels                             */
  --crds-surface-2:  #EEF1F6;   /* subtle fills, table stripes, headers       */
  --crds-slate:      #2B3648;   /* body text                                  */
  --crds-muted:      #5A6678;   /* secondary text / labels                    */
  --crds-border:     #D7DDE6;   /* hairline borders                           */
  --crds-heading:    var(--crds-navy);

  /* Status — restrained, civic tones */
  --crds-success:    #2E7D32;
  --crds-warning:    #B8860B;
  --crds-warning-strong: #8A6508; /* darker amber for warning *text/icons* — AA on light surfaces */
  --crds-danger:     #B23A48;
  --crds-info:       #2F4B7C;

  /* Shape + type */
  --crds-radius:     4px;
  --crds-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --crds-sans:  "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
}

/* ----------------------------------------------------------------------------
   2. Map palette onto Bootstrap theme variables (light)
   ---------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  --bs-primary:            var(--crds-navy);
  --bs-primary-rgb:        var(--crds-navy-rgb);
  --bs-link-color:         var(--crds-navy);
  --bs-link-color-rgb:     var(--crds-navy-rgb);
  --bs-link-hover-color:   var(--crds-navy-ink);
  --bs-link-hover-color-rgb: 15, 27, 48;

  --bs-body-bg:            var(--crds-paper);
  --bs-body-color:         var(--crds-slate);
  --bs-body-color-rgb:     43, 54, 72;
  --bs-secondary-color:    var(--crds-muted);
  --bs-emphasis-color:     var(--crds-navy-ink);

  --bs-body-font-family:   var(--crds-sans);
  --bs-border-color:       var(--crds-border);
  --bs-border-radius:      var(--crds-radius);
  --bs-border-radius-sm:   3px;
  --bs-border-radius-lg:   6px;

  --bs-success:            var(--crds-success);
  --bs-warning:            var(--crds-warning);
  --bs-danger:             var(--crds-danger);
  --bs-info:               var(--crds-info);

  --bs-tertiary-bg:        var(--crds-surface-2);
}

/* ----------------------------------------------------------------------------
   3. Dark mode — gold stays the signature accent
   ---------------------------------------------------------------------------- */
[data-bs-theme="dark"] {
  --crds-paper:     #0F1623;
  --crds-surface:   #172033;
  --crds-surface-2: #1E293F;
  --crds-slate:     #DCE2EC;
  --crds-muted:     #8A97AD;
  --crds-border:    #2A3650;
  --crds-heading:   #E8ECF3;
  --crds-warning-strong: var(--crds-gold-soft); /* light amber reads on dark surfaces */

  --bs-primary:         var(--crds-navy-tint);
  --bs-primary-rgb:     52, 80, 127;
  --bs-link-color:      #F0D98A;   /* brighter than gold-soft so default links read clearly in dark mode */
  --bs-link-color-rgb:  240, 217, 138;       /* Bootstrap's a{} colors from the -rgb var, not the named one */
  --bs-link-hover-color:#F8E8AE;
  --bs-link-hover-color-rgb: 248, 232, 174;

  --bs-body-bg:         var(--crds-paper);
  --bs-body-color:      var(--crds-slate);
  --bs-body-color-rgb:  220, 226, 236;
  --bs-secondary-color: var(--crds-muted);
  --bs-emphasis-color:  #FFFFFF;

  --bs-border-color:    var(--crds-border);
  --bs-tertiary-bg:     var(--crds-surface-2);
}

/* ----------------------------------------------------------------------------
   4. Base typography
   ---------------------------------------------------------------------------- */
body { font-family: var(--crds-sans); background-color: var(--bs-body-bg); }

/* Hyperlinks: no underline by default (colour conveys the link), underline on hover. */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
/* Buttons with chrome (primary/outline/gold/…) never underline. */
.btn,
.btn:hover,
.btn:focus { text-decoration: none; }
/* …but the link-styled .btn-link reads as a plain link, so it underlines on hover
   (e.g. "Back to sessions" / "Back to list"). */
.btn-link:hover { text-decoration: underline; }
/* The top navbar — its links and the Logout .btn-link button — never underlines on hover. */
.navbar-crds a:hover,
.navbar-crds .btn-link:hover { text-decoration: none; }

h1, h2, h3, h4, .h1, .h2, .h3, .h4,
.crds-display {
  font-family: var(--crds-serif);
  font-weight: 600;
  color: var(--crds-heading);
  letter-spacing: -0.01em;
}
h1, .h1 { letter-spacing: -0.02em; }

.text-gold      { color: var(--crds-gold) !important; }
[data-bs-theme="dark"] .text-gold { color: var(--crds-gold-soft) !important; }
.text-navy      { color: var(--crds-navy) !important; }
[data-bs-theme="dark"] .text-navy { color: #9DB2DA !important; }

/* Uppercase eyebrow / section label */
.crds-eyebrow {
  font-family: var(--crds-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--crds-muted);
}

/* ----------------------------------------------------------------------------
   5. Buttons
   ---------------------------------------------------------------------------- */
.btn { border-radius: var(--crds-radius); font-weight: 600; }

.btn-primary {
  --bs-btn-bg: var(--crds-navy);
  --bs-btn-border-color: var(--crds-navy);
  --bs-btn-hover-bg: var(--crds-navy-ink);
  --bs-btn-hover-border-color: var(--crds-navy-ink);
  --bs-btn-active-bg: var(--crds-navy-ink);
  --bs-btn-active-border-color: var(--crds-navy-ink);
  --bs-btn-disabled-bg: var(--crds-navy);
  --bs-btn-disabled-border-color: var(--crds-navy);
}
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg: var(--crds-navy-tint);
  --bs-btn-border-color: var(--crds-navy-tint);
  --bs-btn-hover-bg: #41608F;
  --bs-btn-hover-border-color: #41608F;
}

.btn-outline-primary {
  --bs-btn-color: var(--crds-navy);
  --bs-btn-border-color: var(--crds-navy);
  --bs-btn-hover-bg: var(--crds-navy);
  --bs-btn-hover-border-color: var(--crds-navy);
  --bs-btn-active-bg: var(--crds-navy);
}
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #9DB2DA;
  --bs-btn-border-color: #46618F;
  --bs-btn-hover-bg: #34507F;
  --bs-btn-hover-border-color: #34507F;
  --bs-btn-hover-color: #fff;
}

/* Gold "key action" accent button — for the one primary CTA on a screen */
.btn-gold {
  --bs-btn-color: var(--crds-navy-ink);
  --bs-btn-bg: var(--crds-gold);
  --bs-btn-border-color: var(--crds-gold);
  --bs-btn-hover-color: var(--crds-navy-ink);
  --bs-btn-hover-bg: #D8B23E;
  --bs-btn-hover-border-color: #D8B23E;
  --bs-btn-active-bg: #B8941F;
  --bs-btn-focus-shadow-rgb: var(--crds-gold-rgb);
  font-weight: 700;
}

/* Gold focus ring across interactive controls */
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.page-link:focus {
  border-color: var(--crds-gold);
  box-shadow: 0 0 0 0.2rem rgba(var(--crds-gold-rgb), 0.35);
}

/* ----------------------------------------------------------------------------
   6. Navbar — civic navy bar with a gold underline
   ---------------------------------------------------------------------------- */
.navbar-crds {
  background-color: var(--crds-navy) !important;
  border-bottom: 3px solid var(--crds-gold);
}
.navbar-crds .navbar-brand { color: #FFFFFF; font-family: var(--crds-serif); font-weight: 700; }
.navbar-crds .nav-link { color: #C9D2E4; font-weight: 600; }
.navbar-crds .nav-link:hover,
.navbar-crds .nav-link:focus { color: #FFFFFF; }
.navbar-crds .nav-link.active {
  color: #FFFFFF;
  box-shadow: inset 0 -3px 0 var(--crds-gold);
}
.navbar-crds .navbar-toggler { border-color: rgba(255,255,255,0.35); }
.navbar-brand-lockup { display: inline-flex; align-items: center; gap: 0.55rem; }
.navbar-brand-lockup .brand-mark { height: 34px; width: 34px; }
.navbar-brand-lockup .brand-text { line-height: 1; }
.navbar-brand-lockup .brand-text .brand-name { font-family: var(--crds-serif); font-weight: 700; font-size: 1.05rem; }
.navbar-brand-lockup .brand-text .brand-sub  { font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--crds-gold-soft); }

/* ----------------------------------------------------------------------------
   7. Cards / section panels — accent-bar header + uppercase label
   ---------------------------------------------------------------------------- */
.card { border-color: var(--crds-border); border-radius: var(--crds-radius); background-color: var(--crds-surface); }

/* Bootstrap card headers adopt the civic accent-bar treatment app-wide */
.card > .card-header {
  border-bottom: 1px solid var(--crds-border);
  border-left: 4px solid var(--crds-gold);
  background-color: var(--crds-surface-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;   /* keep equal to .crds-section-header for uniform card titles */
  font-weight: 700;
  color: var(--crds-heading);
}
.card > .card-header i { color: var(--crds-gold); }

.crds-section {
  background-color: var(--crds-surface);
  border: 1px solid var(--crds-border);
  border-radius: var(--crds-radius);
  overflow: hidden;
}
.crds-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--crds-border);
  border-left: 4px solid var(--crds-gold);
  background-color: var(--crds-surface-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;   /* keep equal to .card > .card-header for uniform card titles */
  font-weight: 700;
  color: var(--crds-heading);
}
.crds-section-header .fa-fw { color: var(--crds-gold); }
.crds-section-body { padding: 0.9rem; }
.crds-section-footer {
  padding: 0.55rem 0.9rem;
  border-top: 1px solid var(--crds-border);
  background-color: var(--crds-surface-2);
  font-size: 0.9rem;
  color: var(--crds-muted);
}

/* Contacts card (Session Details): name/email/phone text at 1rem (up from Bootstrap's
   .small 0.875em) — scoped here, not the global .small. */
.contact-entry .small { font-size: 1rem; }

/* Session Details: make each column a flex column and let its last card grow to fill the
   (already equal-height) row, so the two columns stay flush at the bottom no matter how the
   per-role card mix or content height differs. Applied to every viewer via the row class. */
.crds-details-flush > [class*="col-"] { display: flex; flex-direction: column; }
.crds-details-flush > [class*="col-"] > .crds-section:last-child { flex: 1 1 auto; margin-bottom: 0; }

/* When a card marked .crds-section-fill (the Zoom info form) is the one stretched to fill its
   column, grow its body/form/textarea-wrapper so the textarea absorbs the extra height — a larger
   paste area instead of blank surface. Only kicks in when it's the last (stretched) card. */
.crds-details-flush > [class*="col-"] > .crds-section-fill:last-child,
.crds-details-flush > [class*="col-"] > .crds-section-fill:last-child > .crds-section-body,
.crds-details-flush > [class*="col-"] > .crds-section-fill:last-child form,
.crds-details-flush > [class*="col-"] > .crds-section-fill:last-child form > .mb-2 {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.crds-details-flush > [class*="col-"] > .crds-section-fill:last-child textarea { flex: 1 1 auto; }

/* Page header band */
.crds-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.75rem;
  margin-bottom: 1.1rem;
  border-bottom: 2px solid var(--crds-border);
}
.crds-page-head h1 { margin: 0; font-size: 1.6rem; }

/* ----------------------------------------------------------------------------
   8. Tables — dense, structured, uppercase heads
   ---------------------------------------------------------------------------- */
.table { --bs-table-bg: transparent; color: var(--crds-slate); }
.table > thead th {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--crds-muted);
  border-bottom: 2px solid var(--crds-border);
  white-space: nowrap;
}
.table > tbody td { vertical-align: middle; border-color: var(--crds-border); }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: rgba(var(--crds-gold-rgb), 0.06); }
/* DataTables draws its row hover as a black box-shadow inset (--dt-row-hover: 0,0,0),
   which darkens rows in dark mode and out-specifies the civic hover above.
   Override it to the civic gold tint so DataTables grids match the plain-table look. */
table.table.dataTable.table-hover > tbody > tr:hover > * {
  box-shadow: inset 0 0 0 9999px rgba(var(--crds-gold-rgb), 0.10) !important;
}
.table thead th a { color: var(--crds-muted); text-decoration: none; }
.table thead th a:hover { color: var(--crds-navy); text-decoration: underline; }
[data-bs-theme="dark"] .table thead th a:hover { color: var(--crds-gold-soft); }
.sort-icon { opacity: 0.45; margin-left: 0.25rem; }
.sort-icon.active { opacity: 1; color: var(--crds-gold); }

/* Secondary text inside a dense status cell */
.cell-sub { font-size: 0.9rem; color: var(--crds-muted); display: block; }

/* List/detail data grids read a touch denser than the 16px base; comfortable column gutters */
.table:not(.table-sm) { font-size: 1rem; }
.table:not(.table-sm) > thead > tr > th,
.table:not(.table-sm) > tbody > tr > td { padding: 0.55rem 0.75rem; vertical-align: middle; }

/* ----------------------------------------------------------------------------
   9. Badges / status pills
   ---------------------------------------------------------------------------- */
.badge { font-weight: 600; letter-spacing: 0.02em; border-radius: var(--crds-radius); }
.badge.rounded-pill { border-radius: 50rem; }
/* Status badges read a touch larger in the grids/cards */
.badge-scheduled, .badge-completed, .badge-notcompleted,
.badge-active, .badge-inactive, .badge-developer { font-size: 0.85em; }

.badge-scheduled    { background-color: var(--crds-navy); color: #fff; }
.badge-developer    { background-color: var(--crds-navy); color: #fff; }
.badge-completed    { background-color: var(--crds-success); color: #fff; }
.badge-notcompleted { background-color: rgb(var(--bs-warning-rgb)); color: #212529; }
.badge-active       { background-color: rgba(var(--crds-gold-rgb), 0.15); color: #806607; border: 1px solid rgba(var(--crds-gold-rgb), 0.5); }
.badge-inactive     { background-color: var(--crds-surface-2); color: var(--crds-muted); border: 1px solid var(--crds-border); }
[data-bs-theme="dark"] .badge-active { color: var(--crds-gold-soft); }

/* ----------------------------------------------------------------------------
   10. Alerts — left accent rule
   ---------------------------------------------------------------------------- */
.alert { border-radius: var(--crds-radius); border-left-width: 4px; }
/* Pin the dismiss "×" to the top-right corner (window-style) rather than Bootstrap's
   vertically-centered default, which drifts to the middle on short/py-2 alerts. */
.alert-dismissible .btn-close { padding: 0.6rem 0.75rem; font-size: 0.6rem; }

/* Leading Font Awesome icon per alert type, in a left gutter. Absolute-positioned (hanging
   indent) so multi-line and multi-child alert bodies flow normally; coloured by type. */
.alert { position: relative; padding-left: 2.75rem; }
.alert::before {
  position: absolute;
  left: 1rem;
  /* Anchor the icon at the alert's top padding and give it the body line-height, so its
     line-box coincides with the first line of text — the glyph centres on that line just
     like an inline icon would, at any font-size (.small) or padding. */
  top: var(--bs-alert-padding-y);
  line-height: inherit;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  /* Match the alert's own (AA-contrast) text colour so the icon stays legible in BOTH
     light and dark mode. Bootstrap remaps --bs-alert-color per variant per theme; the old
     fixed --crds-{variant} accents went dark-on-dark on the dark-mode subtle backgrounds. */
  color: var(--bs-alert-color);
}
/* .py-2 overrides the actual top padding (not the --bs-alert-padding-y var), so match it. */
.alert.py-2::before { top: 0.5rem; }
.alert-success::before { content: "\f058"; }
.alert-warning::before { content: "\f071"; }
.alert-danger::before  { content: "\f06a"; }
.alert-info::before     { content: "\f05a"; }

/* ----------------------------------------------------------------------------
   11. Forms
   ---------------------------------------------------------------------------- */
.form-label { font-weight: 600; color: var(--crds-slate); margin-bottom: 0.25rem; }
.form-label .req { color: var(--crds-danger); margin-left: 0.15rem; }
.form-control, .form-select { border-color: var(--crds-border); border-radius: var(--crds-radius); }
.form-text { color: var(--crds-muted); }
.field-validation-error, .invalid-feedback { color: var(--crds-danger); }

/* ----------------------------------------------------------------------------
   12. Email-notification row (Session Details signature component)
   ---------------------------------------------------------------------------- */
.notif-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--crds-border);
}
.notif-row:last-child { border-bottom: 0; }
.notif-status { width: 1.4rem; text-align: center; flex: 0 0 auto; align-self: flex-start; line-height: 1.5; }
.notif-status .ok   { color: var(--crds-success); }
.notif-status .warn { color: var(--crds-warning-strong); }
.notif-meta { flex: 1 1 auto; min-width: 0; }
.notif-meta .who { font-weight: 600; }
.notif-meta .when { font-size: 0.9rem; color: var(--crds-muted); }
/* "Session has changed — updated email may need to be sent" notice under a sent row (AzDO #60). */
.notif-stale { font-size: 0.85rem; color: var(--crds-warning-strong); margin-top: 0.15rem; }
.notif-stale .btn-link { font-size: 0.85rem; vertical-align: baseline; }
/* Keep the Resend/Send button on one line even when the stale-notice widens the row.
   :not(.btn-link) leaves the inline "Mark up-to-date" link inside .notif-stale alone. */
.notif-row .btn:not(.btn-link) { flex-shrink: 0; white-space: nowrap; }

/* ----------------------------------------------------------------------------
   13. Misc
   ---------------------------------------------------------------------------- */
.footer-crds { border-top: 1px solid var(--crds-border); color: var(--crds-muted); }
hr { border-color: var(--crds-border); opacity: 1; }
.swatch { height: 56px; border-radius: var(--crds-radius); border: 1px solid rgba(0,0,0,0.08); }
.accent-rule { width: 44px; height: 4px; background: var(--crds-gold); border-radius: 2px; }

/* ----------------------------------------------------------------------------
   Environment banner (non-production) — AzDO #15
   ---------------------------------------------------------------------------- */
.env-bar {
  text-align: center;
  font-size: 1rem;
  padding: 0.5rem 1rem;
}
/* Match the navbar menu items (.navbar-crds .nav-link): same sans family, weight 600, normal case. */
.env-bar .env-bar-name { font-weight: 700; }
.env-bar .env-bar-note { font-weight: 600; margin-left: 0.5rem; }
.env-bar .env-bar-note strong { font-weight: 700; }
.env-bar .env-bar-icon { margin: 0 0.4rem; }
/* Test: red so it's unmistakable that mail is being redirected. */
.env-bar-test { background-color: #dc3545; color: #fff; }
/* Development: subtle, just a quiet reminder. */
.env-bar-dev  { background-color: var(--crds-surface-2); color: var(--crds-muted); border-bottom: 1px solid var(--crds-border); }