/* ---- Site colours -------------------------------------------------------
   Palette taken from the logo: blue #0c4da2 (top bar) and red #ef353e, plus a
   lighter logo-blue (#49a1e9) for "info". Success (green) and warning (yellow)
   are left to the theme's own colours. Everything below feeds Bootstrap's theme
   variables, so buttons, alerts, badges and text-* classes follow. */
:root {
    --app-blue: #0c4da2;
    --app-red: #ef353e;

    --app-topbar: #0c4da2;
    --app-topbar-dark: #0a3f85;

    --bs-danger: #ef353e;
    --bs-danger-rgb: 239, 53, 62;
    --bs-danger-bg-subtle: #fde7e8;
    --bs-danger-border-subtle: #f9b2b6;
    --bs-danger-text-emphasis: #6c181c;
    --app-danger-strong: #c4272f;   /* text-danger on a light background */

    --bs-info: #49a1e9;
    --bs-info-rgb: 73, 161, 233;
    --bs-info-bg-subtle: #e9f4fc;
    --bs-info-border-subtle: #badbf7;
    --bs-info-text-emphasis: #214869;
    --app-info-strong: #0c4da2;   /* text-info on a light background */
}

.btn-danger {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #ef353e;
    --bs-btn-border-color: #ef353e;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #d22f37;
    --bs-btn-hover-border-color: #d22f37;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #bf2a32;
    --bs-btn-active-border-color: #bf2a32;
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #ef353e;
    --bs-btn-disabled-border-color: #ef353e;
    --bs-btn-focus-shadow-rgb: 239, 53, 62;
}

.btn-outline-danger {
    --bs-btn-color: var(--app-danger-strong);
    --bs-btn-border-color: #ef353e;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #ef353e;
    --bs-btn-hover-border-color: #ef353e;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #d22f37;
    --bs-btn-active-border-color: #d22f37;
    --bs-btn-disabled-color: var(--app-danger-strong);
    --bs-btn-disabled-border-color: #ef353e;
    --bs-btn-focus-shadow-rgb: 239, 53, 62;
}

.btn-info {
    --bs-btn-color: #0a2540;
    --bs-btn-bg: #49a1e9;
    --bs-btn-border-color: #49a1e9;
    --bs-btn-hover-color: #0a2540;
    --bs-btn-hover-bg: #64afec;
    --bs-btn-hover-border-color: #64afec;
    --bs-btn-active-color: #0a2540;
    --bs-btn-active-bg: #76b8ee;
    --bs-btn-active-border-color: #76b8ee;
    --bs-btn-disabled-color: #0a2540;
    --bs-btn-disabled-bg: #49a1e9;
    --bs-btn-disabled-border-color: #49a1e9;
    --bs-btn-focus-shadow-rgb: 73, 161, 233;
}

.btn-outline-info {
    --bs-btn-color: var(--app-info-strong);
    --bs-btn-border-color: #49a1e9;
    --bs-btn-hover-color: #0a2540;
    --bs-btn-hover-bg: #49a1e9;
    --bs-btn-hover-border-color: #49a1e9;
    --bs-btn-active-color: #0a2540;
    --bs-btn-active-bg: #64afec;
    --bs-btn-active-border-color: #64afec;
    --bs-btn-disabled-color: var(--app-info-strong);
    --bs-btn-disabled-border-color: #49a1e9;
    --bs-btn-focus-shadow-rgb: 73, 161, 233;
}

/* Plain theme colours are too light for text on white: use the stronger shades */
.text-danger  { color: var(--app-danger-strong) !important; }
.text-info    { color: var(--app-info-strong) !important; }

/* readable text on the light fills */
.bg-info,
.badge.bg-info {
    color: #0a2540 !important;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-family: "Caveat", cursive;

    font-weight: 500;
    line-height: 1.2;
    color: var(--bs-heading-color);
}

.h1, h1 {
    font-size: 3rem;
}
.h2, h2 {
    font-size: 2.7rem;
}
.h3, h3 {
    font-size: 2.4rem;
}
.h4, h4 {
    font-size: 2rem;
}
.h5, h5 {
    font-size: 1.7rem;
}
.h6, h6 {
    font-size: 1.5rem;
}

.app-shell {
    display: flex;
    min-height: calc(100vh - 56px);
}

.sidebar {
    position: relative;
    width: 220px;
    flex-shrink: 0;
    background: var(--bs-tertiary-bg, #f7f3e8);
    border-right: 2px solid rgba(0, 0, 0, 0.15);
    transition: width 0.2s ease;
    padding-top: 1rem;
}

.sidebar.minimized {
    width: 64px;
}

/* Collapse / expand tab: a small triangle on the right edge of the menu */
.sidebar-toggle-tab {
    position: absolute;
    top: 0.75rem;
    right: -13px;
    z-index: 5;
    width: 26px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    line-height: 1;
    color: var(--app-topbar);
    background: var(--bs-body-bg, #fff);
    border: 2px solid rgba(0, 0, 0, 0.25);
    border-radius: 12px;
}

.sidebar-toggle-tab:hover,
.sidebar-toggle-tab:focus-visible {
    color: #fff;
    background: var(--app-topbar);
    border-color: var(--app-topbar);
}

.sidebar-toggle-tab i {
    transition: transform 0.2s ease;
}

.sidebar.minimized .sidebar-toggle-tab i {
    transform: rotate(180deg);
}

.sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar.minimized .menu-label {
    display: none;
}

.minimized-badge {
    display: none;
}

.sidebar.minimized .minimized-badge {
    display: inline-block;
    font-size: 0.6rem;
    padding: 0.2em 0.4em;
    margin-left: -0.6rem;
    vertical-align: top;
}

.sidebar.minimized .nav-link {
    justify-content: center;
    padding: 0.65rem 0;
}

.content {
    flex-grow: 1;
    min-width: 0;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: var(--app-topbar) !important;
    border-radius: 0;
    border: none;
}

/* Button on the top bar (user menu): same colour as the bar, darker on hover */
.btn-topbar {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--app-topbar);
    --bs-btn-border-color: var(--app-topbar);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--app-topbar-dark);
    --bs-btn-hover-border-color: var(--app-topbar-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--app-topbar-dark);
    --bs-btn-active-border-color: var(--app-topbar-dark);
    --bs-btn-focus-shadow-rgb: 255, 255, 255;
}

.submission-version {
    border-left: 3px solid var(--bs-primary);
    padding-left: 0.75rem;
    margin-bottom: 1rem;
}

#record-btn.recording {
    background-color: var(--bs-danger);
    color: #fff;
}

/* Mobile: sidebar moves to the top as a horizontal icon-only bar - no
   minimize/maximize toggle there, it's always icon-only. */
@media (max-width: 767.98px) {
    .app-shell {
        flex-direction: column;
    }

    .sidebar {
        width: 100% !important;
        border-right: none;
        border-bottom: 2px solid rgba(0, 0, 0, 0.15);
        padding-top: 0.25rem;
    }

    .sidebar .nav.flex-column {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .sidebar .nav-link {
        justify-content: center;
        gap: 0.15rem;
        padding: 0.4rem 0.6rem;
        font-size: 0.65rem;
        text-align: center;
    }

    .sidebar .menu-label {
        display: none !important;
    }

    .minimized-badge {
        display: inline-block !important;
        margin-left: 0 !important;
    }

    #sidebar-toggle {
        display: none !important;
    }
}

/* Image previews (click -> full-screen modal) */
.image-preview-thumb {
    max-width: 200px;
    max-height: 140px;
    object-fit: cover;
    cursor: zoom-in;
}

/* Group statistics table: colored cells, light but visible borders */
.stats-table { border-collapse: collapse; border-spacing: 0; margin-bottom: .5rem; }
.stats-table th, .stats-table td { border: 2px solid #c6c7c8; padding: .1rem .35rem; line-height: 1.25; }
/* td.* beats Bootstrap's `.table > :not(caption) > * > *` background */
.stats-table td { min-width: 2.6rem; }
.stats-table td.st-green, .st-chip.st-green { background-color: var(--bs-success); color: #fff; }
.stats-table td.st-red, .st-chip.st-red { background-color: var(--app-red, #ef353e); color: #fff; }
.stats-table td.st-yellow, .st-chip.st-yellow { background-color: var(--bs-warning); color: #212529; }
.stats-table td.st-grey, .st-chip.st-grey { background-color: #9aa0a6; color: #fff; }
.stats-table td.st-overdue, .st-chip.st-overdue { background-color: #8b3a3a; color: #fff; }
.stats-table td.st-grey-light { background-color: #d9dde1; color: #5f6770; font-weight: 600; }
.stats-table td.st-white, .st-chip.st-white { background-color: #fff; color: #212529; }
.stats-key.st-green { background-color: var(--bs-success); }
.stats-key.st-red { background-color: var(--app-red, #ef353e); }
.stats-key.st-yellow { background-color: var(--bs-warning); }
.stats-key.st-grey { background-color: #9aa0a6; }
.stats-key.st-overdue { background-color: #8b3a3a; }
.stats-key.st-grey-light { background-color: #d9dde1; }
.stats-table .st-link { color: inherit; text-decoration: none; font-weight: 600; }
.st-chip { display: inline-block; min-width: 1.8rem; padding: 0 .35rem; border-radius: .3rem; }
.stats-key { display: inline-block; width: .9rem; height: .9rem; border-radius: 3px; vertical-align: -.1em; border: 1px solid #ccd; }