/* PyLadiesCon portal brand styling.
   Palette + fonts taken from conference.pyladies.com (pyladies/global-conference
   theme.json + base.css): raspberry #ee264d, navy #152035, Blinker + Orbitron. */

:root {
    --pyl-primary: #ee264d;
    --pyl-primary-dark: #c01f3f;
    --pyl-navy: #152035;

    --bs-primary: #ee264d;
    --bs-primary-rgb: 238, 38, 77;
    --bs-primary-text-emphasis: #c01f3f;
    --bs-dark: #152035;
    --bs-dark-rgb: 21, 32, 53;
    --bs-link-color: #ee264d;
    --bs-link-color-rgb: 238, 38, 77;
    --bs-link-hover-color: #c01f3f;
    --bs-link-hover-color-rgb: 192, 31, 63;
}

body {
    font-family: "Blinker", system-ui, sans-serif;
}

/* Display headings, the brand wordmark, and the active-conference badge use the
   conference's geometric display face. */
.navbar-brand,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    font-family: "Orbitron", system-ui, sans-serif;
    letter-spacing: 0.01em;
}

.btn-primary {
    --bs-btn-bg: #ee264d;
    --bs-btn-border-color: #ee264d;
    --bs-btn-hover-bg: #d11f42;
    --bs-btn-hover-border-color: #d11f42;
    --bs-btn-active-bg: #c01f3f;
    --bs-btn-active-border-color: #c01f3f;
    --bs-btn-disabled-bg: #ee264d;
    --bs-btn-disabled-border-color: #ee264d;
}

.btn-outline-primary {
    --bs-btn-color: #ee264d;
    --bs-btn-border-color: #ee264d;
    --bs-btn-hover-bg: #ee264d;
    --bs-btn-hover-border-color: #ee264d;
    --bs-btn-active-bg: #ee264d;
    --bs-btn-active-border-color: #ee264d;
}

.text-primary {
    color: #ee264d !important;
}

.bg-primary {
    background-color: #ee264d !important;
}

/* The colorful logo needs a light chip to read on the navy navbar. */
.navbar-logo {
    background: #fff;
    padding: 3px;
}

/* django-bootstrap5 tags required fields with the configured
   `required_css_class` ("required") on the field wrapper. Surface that as a
   visible asterisk on the label so it is clear which fields are mandatory. */
.required > .form-label::after {
    content: " *";
    color: var(--bs-danger);
}

/* Contextual left rail (portal/base_sidebar.html): pinned alongside content on
   desktop, an off-canvas drawer on mobile (handled by Bootstrap offcanvas-md). */
@media (min-width: 768px) {
    .app-sidebar {
        position: sticky;
        top: 1rem;
    }
}

/* Bootstrap compiles the active pill colour to a literal blue, so overriding
   --bs-primary alone never reaches it. Point the rail's active item at the
   brand colour instead. */
.app-sidebar .nav-pills {
    --bs-nav-pills-link-active-bg: var(--bs-primary);
}

/* Flex items default to min-width:auto, so a wide table would stretch the
   content column past its grid share and make pages with wide vs narrow
   content render at different widths. Let the column shrink to its share; wide
   tables scroll inside it (wrap them in .table-responsive). */
.app-content {
    min-width: 0;
}

/* Footer resource group headings (portal/_footer_resources.html). */
.footer-heading {
    letter-spacing: 0.04em;
}

/* Speaker checklists (templates/speakers/_checklist_item.html): items the
   portal ticks by itself are dashed so a speaker knows not to tick them. */
.checklist-item-auto {
    border-left: 3px dashed var(--bs-secondary);
}
.checklist-item-manual {
    border-left: 3px solid var(--bs-primary);
}
.checklist-item-done {
    opacity: 0.75;
}
/* Ticking an item redirects back to #item-<pk>; keep it clear of the top. */
.checklist-row {
    scroll-margin-top: 1rem;
}
/* One box size for every row, whether it is a button, a static status, or
   an automatic item: empty while open, ticked once done. */
.checklist-box {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.1rem;
    padding: 0;
    border: 2px solid var(--bs-secondary);
    border-radius: 0.3rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-bg);
    font-size: 0.85rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
button.checklist-box:hover,
button.checklist-box:focus-visible {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}
.checklist-box-static {
    border-style: dashed;
    color: var(--bs-secondary);
}
.checklist-box-done,
button.checklist-box-done:hover {
    border-color: var(--bs-success);
    border-style: solid;
    background: var(--bs-success);
    color: #fff;
}
.checklist-box-blocked {
    border-color: var(--bs-danger);
    border-style: solid;
    color: var(--bs-danger);
}
.checklist-box-skipped {
    border-color: var(--bs-secondary);
    color: var(--bs-secondary);
}
/* Waiting: nothing to click yet, and the row says why. */
.checklist-box-waiting {
    border-style: dotted;
    border-color: var(--bs-secondary);
    color: var(--bs-secondary);
    opacity: 0.75;
}
.checklist-row-waiting .checklist-title-waiting {
    color: var(--bs-secondary) !important;
}
.checklist-title-done {
    text-decoration: line-through !important;
    color: var(--bs-secondary) !important;
}
/* Due dates, right-aligned, louder the closer they are. */
.checklist-due {
    /* Bootstrap badges are 0.75em; a deadline deserves body size. */
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.4em 0.65em;
    white-space: nowrap;
}
.checklist-due-overdue {
    background: var(--bs-danger);
    color: #fff;
}
.checklist-due-soon {
    background: var(--bs-warning);
    color: var(--bs-dark);
}
.checklist-due-later {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}
.checklist-due-quiet {
    background: transparent;
    border: 1px solid var(--bs-border-color);
    color: var(--bs-secondary);
    font-weight: 400;
}

/* Flash messages as toasts (templates/portal/_toast_messages.html): shown for
   a few seconds, then fade out without JavaScript. */
.portal-toast {
    animation: portal-toast-fade 7s ease-in forwards;
}
@keyframes portal-toast-fade {
    0%, 80% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}

/* Checklist board cells (templates/speakers/checklist_board.html). */
.checklist-board td.cell-done { background: var(--bs-success-bg-subtle); }
.checklist-board td.cell-todo { background: var(--bs-light); }
.checklist-board td.cell-overdue { background: var(--bs-warning-bg-subtle); }
.checklist-board td.cell-blocked { background: var(--bs-danger-bg-subtle); }
.checklist-board td.cell-skipped { background: var(--bs-secondary-bg-subtle); }
.checklist-board td.cell-none { color: var(--bs-secondary); }
.checklist-board th.board-col {
    min-width: 6rem;
    max-width: 8rem;
    white-space: normal;
    vertical-align: bottom;
    line-height: 1.15;
}

/* Template editor (templates/speakers/template_detail.html): the reorder column. */
.col-order {
    width: 5rem;
}

/* Invitation email preview: the sender's own words, set apart from the template. */
.invitation-preview-note {
    background: #fff3cd;
    border-left: 3px solid #ffc107;
    padding: 0.25rem 0.75rem;
}
.invitation-preview-note > :last-child {
    margin-bottom: 0;
}
/* Task stats legend (templates/speakers/_task_stats_cards.html): the "open"
   swatch matches the empty part of the stacked bar. */
.task-legend-open {
    color: var(--bs-secondary-bg);
}

/* Login page (templates/account/login.html): the "or" between the password
   form and the sign-in code. A rule with the word in the middle on narrow
   screens; a vertical rule between the two columns from md up. */
.login-or {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    color: var(--bs-secondary);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.login-or::before,
.login-or::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--bs-border-color);
}
@media (min-width: 768px) {
    /* The column stretches to the row (align-items-stretch on the parent),
       so the rule is as tall as the taller of the two forms rather than a
       fixed height that could overhang a short one. */
    .login-or {
        flex-direction: column;
        width: auto;
        height: 100%;
        padding: 0 0.5rem;
    }
    .login-or::before,
    .login-or::after {
        border-top: 0;
        border-left: 1px solid var(--bs-border-color);
        width: 0;
    }
}

/* Accordion headers (the propose form's two sections). Bootstrap tints an
   open header and leaves a collapsed one plain white, which stops it
   reading as a header at all: the closed section looked like a stray line
   of text. A collapsed header keeps a tinted background, a border and its
   chevron, so it still looks like something to open. */
.accordion-button {
    font-weight: 600;
}
.accordion-button.collapsed {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}
.accordion-button.collapsed:hover {
    background-color: var(--bs-secondary-bg);
}
.accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}