/* Homebase -- Family Inbox.

   Bootstrap 5.3 is the UI layer. This file is a THEME over it, not a parallel
   component system: Bootstrap's own custom properties are remapped onto the
   palette, so .card, .btn, .nav, .list-group and the grid all inherit the look
   without being re-implemented or fought per component.

   Palette and type follow _private/ui/homebase-mockup.jsx (a guide, not a pixel
   spec): schedule-board navy on paper white, field green for actions, Barlow
   Condensed for anything that reads like a scoreboard, Inter for prose.

   Only four things here are genuinely custom, because Bootstrap has no
   equivalent: the date rail, the kid chip, the ARRIVE badge and the uniform
   swatch. Everything else is a variable override. */

:root {
    --hb-ink:        #141F38;
    --hb-ink-soft:   #3D4A66;
    --hb-paper:      #F6F7F4;
    --hb-card:       #FFFFFF;
    --hb-line:       #E3E6DE;
    --hb-field:      #1E6B45;
    --hb-field-dark: #17583A;
    --hb-field-soft: #E7F1EB;
    --hb-alert:      #B4452C;
    --hb-alert-soft: #F7EAE5;
    --hb-mint:       #8FCBA8;
    --hb-on-navy:    #9FB0CC;
    --hb-tab-idle:   #7C8BAA;
    --hb-muted:      #9AA0AE;

    --hb-display: "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif;
    --hb-body:    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Bootstrap remap ──────────────────────────────────────────────────────── */

[data-bs-theme="light"] {
    --bs-body-bg:            var(--hb-paper);
    --bs-body-color:         var(--hb-ink);
    --bs-body-font-family:   var(--hb-body);
    --bs-secondary-color:    var(--hb-ink-soft);
    --bs-tertiary-color:     var(--hb-muted);
    --bs-border-color:       var(--hb-line);
    --bs-emphasis-color:     var(--hb-ink);
    --bs-heading-color:      var(--hb-ink);

    --bs-primary:            var(--hb-field);
    --bs-primary-rgb:        30, 107, 69;
    --bs-danger:             var(--hb-alert);
    --bs-danger-rgb:         180, 69, 44;

    --bs-link-color:         var(--hb-field);
    --bs-link-hover-color:   var(--hb-field-dark);
    --bs-link-color-rgb:     30, 107, 69;

    --bs-card-bg:            var(--hb-card);
    --bs-card-border-color:  var(--hb-line);
    --bs-card-border-radius: 10px;

    --bs-border-radius:    8px;
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: 12px;
}

.btn-primary {
    --bs-btn-bg: var(--hb-field);
    --bs-btn-border-color: var(--hb-field);
    --bs-btn-hover-bg: var(--hb-field-dark);
    --bs-btn-hover-border-color: var(--hb-field-dark);
    --bs-btn-active-bg: var(--hb-field-dark);
    --bs-btn-active-border-color: var(--hb-field-dark);
    --bs-btn-disabled-bg: #7FA592;
    --bs-btn-disabled-border-color: #7FA592;
}
.btn-outline-secondary {
    --bs-btn-color: var(--hb-ink-soft);
    --bs-btn-border-color: var(--hb-line);
    --bs-btn-hover-bg: #EDEFE9;
    --bs-btn-hover-border-color: var(--hb-line);
    --bs-btn-hover-color: var(--hb-ink);
    --bs-btn-active-bg: #E3E6DE;
    --bs-btn-active-border-color: var(--hb-line);
    --bs-btn-active-color: var(--hb-ink);
}
.btn-outline-danger {
    --bs-btn-color: var(--hb-alert);
    --bs-btn-border-color: #E6C8BF;
    --bs-btn-hover-bg: var(--hb-alert-soft);
    --bs-btn-hover-border-color: #E6C8BF;
    --bs-btn-hover-color: var(--hb-alert);
    --bs-btn-active-bg: var(--hb-alert-soft);
    --bs-btn-active-border-color: #E6C8BF;
    --bs-btn-active-color: var(--hb-alert);
}
/* Cold hands, one thumb, a kid pulling the other arm. */
.btn { min-height: 40px; }
.btn-sm { min-height: 34px; }

.form-control:focus, .form-select:focus {
    border-color: var(--hb-field);
    box-shadow: 0 0 0 .2rem rgba(30, 107, 69, .18);
}

.alert-success { --bs-alert-bg: var(--hb-field-soft); --bs-alert-color: #155033; --bs-alert-border-color: #C9E0D4; }
.alert-danger  { --bs-alert-bg: var(--hb-alert-soft); --bs-alert-color: #8C3320; --bs-alert-border-color: #E6C8BF; }
.alert-warning { --bs-alert-bg: #FBF1DC;              --bs-alert-color: #7A5A12; --bs-alert-border-color: #EEDCB0; }
.alert-info    { --bs-alert-bg: #E9EEF6;              --bs-alert-color: #2B3A57; --bs-alert-border-color: #CFDAEA; }

/* ── Shell ────────────────────────────────────────────────────────────────── */

/* The navy bar spans the full viewport; only its CONTENTS are constrained. On a
   wide screen a header that stops at the content width reads as a floating
   ribbon rather than as chrome, which is what the phone-only column looked like. */
.hb-navbar {
    background: var(--hb-ink);
    position: sticky;
    top: 0;
    z-index: 1020;
}

/* Reading measure for the schedule. Bootstrap's .container goes to 1320px at
   xxl, which is far too wide for a list of one-line events -- the eye loses the
   row between the title on the left and the chip on the right. */
.hb-container { max-width: 900px; }

.hb-wordmark {
    font-family: var(--hb-display);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 1.5px;
    color: #fff;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}
.hb-wordmark:hover  { color: #fff; }
.hb-wordmark span   { color: var(--hb-mint); }
.hb-header-meta     { font-size: 12px; color: var(--hb-on-navy); }

/* Tabs: Bootstrap .nav-underline, retinted for the navy ground. Four short
   labels fit across a 360px phone, so there is no hamburger to open one-handed. */
.hb-nav {
    /* Six tabs will not fit across a 360px phone. Scroll horizontally rather
       than wrap into a second row that pushes the content down, and hide the
       scrollbar so it reads as a tab strip and not a widget. */
    overflow-x: auto;
    scrollbar-width: none;
    --bs-nav-underline-gap: .25rem;
    --bs-nav-link-color: var(--hb-tab-idle);
    --bs-nav-link-hover-color: #C7D3E6;
    --bs-nav-underline-link-active-color: #fff;
    --bs-nav-underline-border-width: 3px;
    flex-wrap: nowrap;
}
.hb-nav .nav-link {
    font-family: var(--hb-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: .5rem .6rem .65rem;
    white-space: nowrap;
}
@media (min-width: 576px) { .hb-nav .nav-link { padding-inline: 1rem; } }
.hb-nav .nav-link.active { border-bottom-color: var(--hb-mint); }

/* ── Date rail ────────────────────────────────────────────────────────────── */

.hb-rail {
    width: 52px;
    flex-shrink: 0;
    text-align: center;
    font-family: var(--hb-display);
    color: var(--hb-ink);
    padding-top: 4px;
}
.hb-rail-dow, .hb-rail-mon {
    font-size: 12px; font-weight: 600; letter-spacing: 2px; color: var(--hb-ink-soft);
}
.hb-rail-mon { font-size: 11px; }
.hb-rail-num { font-size: 30px; font-weight: 700; line-height: 1; }
/* Today is the one row worth finding without reading. */
.hb-rail.is-today .hb-rail-num,
.hb-rail.is-today .hb-rail-dow,
.hb-rail.is-today .hb-rail-mon { color: var(--hb-field); }

/* The rail sits alongside a stack of cards; keep it beside the FIRST card rather
   than centred against the whole day, so it lines up with the day's first row. */
.hb-day { display: flex; gap: 12px; }
@media (min-width: 768px) { .hb-day { gap: 18px; } .hb-rail { width: 64px; } .hb-rail-num { font-size: 36px; } }

/* ── Kid chip ─────────────────────────────────────────────────────────────── */
/* Colour arrives as an inline custom property from config (familyChildren[].color),
   so adding a child is a config change and not a stylesheet edit. */

.hb-kid, .hb-kid-all {
    font-size: 11px;
    border-radius: 4px;
    padding: 2px 7px;
    letter-spacing: .3px;
    white-space: nowrap;
    flex-shrink: 0;
}
.hb-kid { font-weight: 700; color: #fff; background: var(--hb-kid-color, var(--hb-ink-soft)); }
/* "Everyone" is the absence of a child, so it reads as a label, not an identity. */
.hb-kid-all { font-weight: 600; color: var(--hb-ink-soft); background: var(--hb-line); }

/* ── Arrive badge ─────────────────────────────────────────────────────────── */
/* The one number that decides when the family actually leaves the house. */

.hb-arrive {
    display: inline-block;
    font-family: var(--hb-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.2px;
    color: var(--hb-field);
    background: var(--hb-field-soft);
    border-radius: 4px;
    padding: 2px 8px;
}

/* ── Uniform swatch ───────────────────────────────────────────────────────── */

.hb-swatch {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--hb-swatch-color, transparent);
    border: 1.5px solid transparent;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}
/* A white or silver kit is an invisible dot on a white card without an outline. */
.hb-swatch.is-light { border-color: var(--hb-line); }

/* ── Small shared bits ────────────────────────────────────────────────────── */

.hb-display { font-family: var(--hb-display); }
.hb-num     { font-family: var(--hb-display); font-variant-numeric: tabular-nums; }

.hb-section {
    font-family: var(--hb-display);
    font-weight: 700; font-size: 13px; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--hb-ink-soft);
}

.hb-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--hb-dot-color, var(--hb-muted));
    flex-shrink: 0; display: inline-block;
}

/* Long subjects and addresses must not blow out a flex row on a narrow screen. */
.min-w-0 { min-width: 0; }
.hb-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Source email bodies: keep the sender's own line breaks, which are load-bearing
   in a schedule pasted into an email, while still wrapping on a phone. */
.hb-email-body {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 12.5px;
    line-height: 1.55;
    margin: 0;
    max-height: 65vh;
    overflow-y: auto;
    color: var(--hb-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── Sign in ──────────────────────────────────────────────────────────────── */
/* Navy ground so the first screen sets the same tone as the app header. The
   wordmark is TEXT: the scaffold's login pointed at
   assets/brand/logo-horizontal-white.svg, which does not exist in this repo, so
   it had been rendering a broken image. */

.hb-auth {
    min-height: 100vh;
    background: var(--hb-ink);
    display: flex; align-items: center; justify-content: center;
    padding: 24px 16px;
}
.hb-auth .hb-wordmark { font-size: 34px; display: block; text-align: center; }

.hb-nav::-webkit-scrollbar { display: none; }

/* The team or organisation an event belongs to. Deliberately close to the title
   rather than down with the provenance line: with two sessions for one child on
   one evening, both called "Practice", this is the field that tells them apart
   and it has to be readable in the same glance as the name. */
.hb-team {
    font-family: var(--hb-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--hb-ink-soft);
    line-height: 1.2;
    margin-top: 1px;
}