/*
 * Brand colours and chrome for the participant panel.
 *
 * The panel is Bootstrap 5 loaded from a CDN, so rather than fork the framework
 * this file redefines the handful of variables Bootstrap builds its components
 * from. Bootstrap 5.3 resolves button and link colours through per-component
 * --bs-btn-* / --bs-link-* variables, which is why the button rules below set
 * those rather than plain background/colour properties.
 *
 * The brand magenta is the same #f409ad the reception panel uses; keeping the
 * two surfaces on one colour is the point of this file.
 */

:root {
    --bd-brand: #f409ad;
    --bd-brand-dark: #c40789;
    --bd-brand-darker: #9c056d;
    --bd-ink: #24132a;

    /* The three colours beczkodance.pl paints its home-page cards with. Their
       class names on that site are historical leftovers - .cyan is the purple,
       .orange is the teal - so they are named here by what they actually are.

       Each has a darker step for the same reason --bd-brand does: white small
       text on the teal is 3.4:1, under WCAG AA, while the darker step reaches
       5.2:1. Use the plain colour for tints and large type, the -dark step
       wherever white body text sits on top. */
    --bd-purple: #89087b;
    --bd-teal: #019d90;
    --bd-teal-dark: #017a70;
    --bd-aubergine: #2c043f;

    /* Lato, loaded in base.html. It has no 600, so the few `font-weight: 600`
       rules below resolve to 700 - which is what CSS font matching does for an
       unavailable 600 anyway, and reads correctly here. */
    --bd-font: "Lato", "Segoe UI", Arial, sans-serif;
    --bs-body-font-family: var(--bd-font);

    --bs-primary: var(--bd-brand);
    --bs-primary-rgb: 244, 9, 173;
    --bs-link-color: var(--bd-brand-dark);
    --bs-link-color-rgb: 196, 7, 137;
    --bs-link-hover-color: var(--bd-brand-darker);
}

body {
    background-color: #faf7f9;
}

/* ── Navigation ──────────────────────────────────────────────────────────── */

.navbar {
    background: var(--bd-ink) !important;
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
}

.navbar-brand:hover {
    color: #fff;
}

/* The logo, when the artwork exists. Height-bounded so the fixed navbar keeps
   its height whatever proportions the file has; width follows. */
.navbar-brand__logo {
    display: block;
    height: 30px;
    width: auto;
}

.navbar-brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--bd-brand);
    color: #fff;
    font-size: 17px;
    line-height: 1;
}

/* ── Buttons and links ───────────────────────────────────────────────────── */

.btn-primary {
    --bs-btn-bg: var(--bd-brand);
    --bs-btn-border-color: var(--bd-brand);
    --bs-btn-hover-bg: var(--bd-brand-dark);
    --bs-btn-hover-border-color: var(--bd-brand-dark);
    --bs-btn-active-bg: var(--bd-brand-darker);
    --bs-btn-active-border-color: var(--bd-brand-darker);
    --bs-btn-disabled-bg: var(--bd-brand);
    --bs-btn-disabled-border-color: var(--bd-brand);
}

.btn-outline-primary {
    --bs-btn-color: var(--bd-brand-dark);
    --bs-btn-border-color: var(--bd-brand);
    --bs-btn-hover-bg: var(--bd-brand);
    --bs-btn-hover-border-color: var(--bd-brand);
    --bs-btn-active-bg: var(--bd-brand-dark);
    --bs-btn-active-border-color: var(--bd-brand-dark);
}

.text-primary {
    color: var(--bd-brand-dark) !important;
}

.bg-primary {
    background-color: var(--bd-brand) !important;
}

.badge.bg-primary,
.badge.text-bg-primary {
    background-color: var(--bd-brand) !important;
    color: #fff !important;
}

/* Bootstrap's own focus ring is blue; the brand ring keeps forms on-palette. */
.form-control:focus,
.form-select:focus,
.btn:focus-visible {
    border-color: var(--bd-brand);
    box-shadow: 0 0 0 0.2rem rgb(244 9 173 / 20%);
}

/* ── Cards and headings ──────────────────────────────────────────────────── */

.card {
    border-color: #ece5ea;
}

/* One header treatment for every card: the contextual bg-success / bg-warning /
   bg-secondary they used to carry made each page read as a different product.
   Colour is left to the badges, where it carries a status. */
.card-header {
    background-color: #fbf4f8;
    border-bottom-color: #ece5ea;
    color: var(--bd-ink);
    font-weight: 600;
}

.card-header h4,
.card-header h5,
.card-header h6 {
    margin-bottom: 0;
    color: inherit;
}

h1, h2, h3, h4, h5 {
    color: var(--bd-ink);
}

a {
    text-decoration-color: rgb(244 9 173 / 40%);
}

.footer {
    background-color: #fbf4f8 !important;
    border-top-color: #ece5ea !important;
}

/* ── Attendance history ──────────────────────────────────────────────────── */

/*
 * The four counters at the top of the attendance page. They are not statuses -
 * they are one figure each - so they take the school's card palette straight,
 * the way beczkodance.pl uses it. Every pairing here clears AA for small text,
 * which the Bootstrap defaults they replace did not: white on .bg-warning was
 * 1.8:1.
 */
.bd-stat {
    border: 0;
    color: #fff;
}

/* The figure inside each tile. Needed explicitly because the `h1, h2, h3...`
   rule above is an element selector painting --bd-ink, and an element selector
   beats a colour merely inherited from the card - which left the numbers dark
   on dark. The markup used to carry Bootstrap's .text-white, whose !important
   hid the conflict. */
.bd-stat h3 {
    color: inherit;
}

.bd-stat--total { background-color: var(--bd-aubergine); }
.bd-stat--present { background-color: var(--bd-teal-dark); }
.bd-stat--excused { background-color: var(--bd-purple); }
.bd-stat--rate { background-color: var(--bd-brand-dark); }

/*
 * Attendance statuses. These do carry meaning, so they stay distinguishable
 * rather than becoming four shades of one hue - but only "unexcused" keeps a
 * warning colour, because it is the only state on the page that is actually
 * bad news. Red is Bootstrap's, the rest are the school's.
 */
.bd-status {
    color: #fff;
}

.bd-status--present { background-color: var(--bd-teal-dark); }
.bd-status--excused { background-color: var(--bd-purple); }
.bd-status--unexcused { background-color: var(--bs-danger); }
.bd-status--remote { background-color: var(--bd-aubergine); }
.bd-status--compensated { background-color: var(--bd-brand-dark); }
.bd-status--unknown { background-color: var(--bs-secondary); }

/*
 * The matching row tints. One class serves both layouts: on a table row
 * Bootstrap paints the cells from --bs-table-bg, so the background-color is
 * inert there and does the work on the mobile cards instead.
 */
.bd-att--present {
    --bs-table-bg: rgb(1 157 144 / 12%);
    --bs-table-hover-bg: rgb(1 157 144 / 20%);
    background-color: rgb(1 157 144 / 12%);
}

.bd-att--excused {
    --bs-table-bg: rgb(137 8 123 / 10%);
    --bs-table-hover-bg: rgb(137 8 123 / 18%);
    background-color: rgb(137 8 123 / 10%);
}

.bd-att--unexcused {
    --bs-table-bg: rgb(220 53 69 / 12%);
    --bs-table-hover-bg: rgb(220 53 69 / 20%);
    background-color: rgb(220 53 69 / 12%);
}

.bd-att--remote {
    --bs-table-bg: rgb(44 4 63 / 9%);
    --bs-table-hover-bg: rgb(44 4 63 / 16%);
    background-color: rgb(44 4 63 / 9%);
}

.bd-att--compensated {
    --bs-table-bg: rgb(244 9 173 / 10%);
    --bs-table-hover-bg: rgb(244 9 173 / 18%);
    background-color: rgb(244 9 173 / 10%);
}