/* ERK conference-room booking — High Country skin for LibreBooking.
 *
 * Loaded via the app's supported `css.extension.file` hook, so it layers on top
 * of librebooking.css rather than replacing it. Nothing here patches core CSS;
 * an upgrade should carry straight through.
 *
 * Palette is High Country's own, sampled from the brand lockup for the
 * .construction rebuild: icy blue #39b9e6 on near-black. Same direction as the
 * public site, so a vendor who books a room and then visits highcountry.
 * construction sees one company rather than two.
 *
 * The app is Bootstrap 5.3.3, which exposes almost everything as --bs-*
 * variables. Overriding those does most of the work and avoids a specificity
 * war with the stock stylesheet.
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap');

:root {
  --hc-blue: #39b9e6;
  --hc-blue-dim: #2a93b8;

  --hc-paper: #0b0d0f;      /* page ground */
  --hc-deep: #14181b;       /* header / footer / alternate band */
  --hc-lift: #1a2026;       /* cards, inputs, anything sitting above ground */

  --hc-text: #eaf2f6;
  --hc-muted: #93a5af;
  --hc-rule: rgba(234, 242, 246, 0.16);

  /* Bootstrap's own tokens, repointed. */
  --bs-body-bg: var(--hc-paper);
  --bs-body-color: var(--hc-text);
  --bs-emphasis-color: #ffffff;
  --bs-secondary-bg: var(--hc-deep);
  --bs-tertiary-bg: var(--hc-lift);
  --bs-secondary-color: var(--hc-muted);
  --bs-border-color: var(--hc-rule);
  --bs-border-color-translucent: var(--hc-rule);

  --bs-primary: var(--hc-blue);
  --bs-primary-rgb: 57, 185, 230;
  --bs-link-color: var(--hc-blue);
  --bs-link-color-rgb: 57, 185, 230;
  --bs-link-hover-color: var(--hc-blue-dim);

  --bs-font-sans-serif: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-weight: 400;   /* not 300: Montserrat Light smears on near-black */
}

body {
  background: var(--hc-paper);
  color: var(--hc-text);
  font-family: var(--bs-font-sans-serif);
  -webkit-font-smoothing: antialiased;
}

/* ---- Headings: display weight light, tracked out slightly ---------------- */

h1, h2, h3, .h1, .h2, .h3 {
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--hc-text);
}

h1, .h1 { letter-spacing: -0.01em; }

/* ---- Masthead ------------------------------------------------------------ */

.navbar {
  background: var(--hc-deep) !important;
  border-bottom: 1px solid var(--hc-rule);
  /* The nav sits on an always-dark bar. Rebind the muted token rather than
     overriding each child - the same fix the .construction build needed when
     nav links inherited a page-ground colour onto a near-black bar. */
  --bs-secondary-color: var(--hc-muted);
}

.navbar .nav-link,
.navbar .navbar-brand {
  color: var(--hc-text) !important;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus { color: var(--hc-blue) !important; }

.navbar .dropdown-menu {
  background: var(--hc-lift);
  border: 1px solid var(--hc-rule);
}

.navbar .dropdown-item { color: var(--hc-text); }
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background: rgba(57, 185, 230, 0.14);
  color: var(--hc-blue);
}

/* ---- Buttons ------------------------------------------------------------- */

.btn-primary {
  --bs-btn-bg: var(--hc-blue);
  --bs-btn-border-color: var(--hc-blue);
  --bs-btn-color: #06212b;               /* dark ink on a bright accent */
  --bs-btn-hover-bg: var(--hc-blue-dim);
  --bs-btn-hover-border-color: var(--hc-blue-dim);
  --bs-btn-hover-color: #06212b;
  --bs-btn-active-bg: var(--hc-blue-dim);
  --bs-btn-active-color: #06212b;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.btn-outline-secondary {
  --bs-btn-color: var(--hc-text);
  --bs-btn-border-color: var(--hc-rule);
  --bs-btn-hover-bg: var(--hc-lift);
  --bs-btn-hover-color: var(--hc-text);
  --bs-btn-hover-border-color: var(--hc-blue);
}

/* ---- Surfaces ------------------------------------------------------------ */

.card, .modal-content, .list-group-item, .accordion-item {
  background: var(--hc-lift);
  border-color: var(--hc-rule);
  color: var(--hc-text);
}

.modal-header, .modal-footer, .card-header { border-color: var(--hc-rule); }

/* ---- Forms --------------------------------------------------------------- */

.form-control, .form-select {
  background: var(--hc-lift);
  border-color: var(--hc-rule);
  color: var(--hc-text);
}

.form-control:focus, .form-select:focus {
  background: var(--hc-lift);
  color: var(--hc-text);
  border-color: var(--hc-blue);
  /* 3:1 against the lifted surface - a focus ring nobody can see is not a
     focus ring. This was a real finding on the .construction build. */
  box-shadow: 0 0 0 0.2rem rgba(57, 185, 230, 0.35);
}

.form-control::placeholder { color: var(--hc-muted); }
.form-label, legend { color: var(--hc-muted); font-weight: 500; letter-spacing: 0.02em; }

/* ---- Tables -------------------------------------------------------------- */

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--hc-text);
  --bs-table-border-color: var(--hc-rule);
  --bs-table-striped-bg: rgba(234, 242, 246, 0.04);
  --bs-table-striped-color: var(--hc-text);
  --bs-table-hover-bg: rgba(57, 185, 230, 0.08);
  --bs-table-hover-color: var(--hc-text);
}

.table > thead {
  color: var(--hc-muted);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
}

/* ---- The schedule grid --------------------------------------------------- */
/* The main event: this is what a vendor actually looks at. Stock renders as a
   pale spreadsheet; on a dark ground it needs the free/taken distinction to
   carry by luminance, not just hue. */

/* Stock paints both the row labels and the time-header cells #ededed from a
   more specific rule, which puts a bright stripe across every dark page. These
   need !important to land; everything else here wins on cascade order alone.
   Note .reslabel is the TIME HEADER cell, not a reservation label - named
   confusingly enough that it cost a round trip to find out. */
td.resourcename, .resourcename,
td.reslabel, .reslabel,
.resourceNameSelector {
  background: var(--hc-deep) !important;
  color: var(--hc-text) !important;
  border-color: var(--hc-rule) !important;
}

td.reslabel, .reslabel {
  color: var(--hc-muted) !important;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.resourcename, td.resourcename {
  font-weight: 500;
  letter-spacing: 0.02em;
}

.slots, .slot { border-color: var(--hc-rule) !important; }

.slot.reservable {
  background: var(--hc-lift);
  transition: background 120ms ease, box-shadow 120ms ease;
}

.slot.reservable:hover {
  background: rgba(57, 185, 230, 0.18);
  box-shadow: inset 0 0 0 1px var(--hc-blue);
  cursor: pointer;
}

.slot.reserved {
  background: var(--hc-blue);
  color: #06212b;
  font-weight: 500;
}

.slot.unreservable {
  background: repeating-linear-gradient(
    135deg,
    rgba(234, 242, 246, 0.05) 0 6px,
    transparent 6px 12px
  );
  color: var(--hc-muted);
}

.slot.pasttime {
  background: var(--hc-paper);
  color: var(--hc-muted);
  opacity: 0.55;
}

.clickres { color: inherit; text-decoration: none; }

.resdate, .change-date {
  color: var(--hc-text);
  font-weight: 300;
  letter-spacing: 0.01em;
}

.legend { color: var(--hc-muted); font-size: 0.8rem; }

/* ---- Odds and ends ------------------------------------------------------- */

a { text-underline-offset: 0.15em; }

.alert-info {
  background: rgba(57, 185, 230, 0.12);
  border-color: rgba(57, 185, 230, 0.35);
  color: var(--hc-text);
}

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

::selection { background: var(--hc-blue); color: #06212b; }

/* Skip link: was black-on-near-black in the .construction build and invisible
   to the only people who use it. Don't repeat that here. */
a.visually-hidden-focusable:focus {
  background: var(--hc-blue);
  color: #06212b;
  padding: 0.5rem 0.9rem;
}