html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    scroll-behavior: smooth;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Une erreur s'est produite."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.auth-input {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary, #212121);
    background-color: var(--mud-palette-surface, #fafafa);
    border: 1px solid var(--mud-palette-lines-default, #cfd8dc);
    border-radius: 4px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.auth-input:focus {
    outline: 0;
    border-color: var(--mud-palette-primary, #1861ac);
    box-shadow: 0 0 0 0.15rem rgba(var(--mud-palette-primary-rgb, 24, 97, 172), 0.25);
}

.auth-input::placeholder {
    color: var(--mud-palette-text-secondary, #757575);
}

.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-wrapper .auth-input {
    padding-right: 40px;
    flex: 1;
}

.password-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* ── Sidebar Toggle ── */
.sidebar-toggle {
    color: var(--mud-palette-text-primary) !important;
    opacity: 1 !important;
    width: 40px;
    height: 40px;
    margin-right: 4px;
}

.sidebar-toggle:hover {
    background-color: rgba(0, 0, 0, 0.06) !important;
    border-radius: 8px;
}

/* ── Sidebar Drawer ── */
.sidebar-drawer {
    background-color: #FDFCFB !important;
    box-shadow: 1px 0 8px rgba(0, 0, 0, 0.04) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.sidebar-drawer .mud-navmenu {
    padding-top: 12px !important;
}

.sidebar-drawer .mud-nav-link.active {
    background-color: rgba(74, 139, 87, 0.08) !important;
    border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive MudTabs shell — used by « Suivi & Progression » (Parent) and
   « Mes élèves » (Mentor).

   On phones the default single-line tab strip clips long French labels and
   relies on tiny ‹ › arrows. Below 768px we turn the strip into a wrapping
   2-column grid of tappable pills: every tab is visible at once, labels wrap
   on two lines and neither the scroll arrows nor the active underline are
   needed. Targets the MudBlazor 9.x tabbar internals (the Mentor cockpit
   already styles these same classes).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .responsive-tabs .mud-tabs-tabbar {
        overflow: visible;
        border-radius: 14px;
    }

    .responsive-tabs .mud-tabs-tabbar-inner {
        display: block;
        min-height: 0;
    }

    .responsive-tabs .mud-tabs-scroll-button {
        display: none !important;
    }

    .responsive-tabs .mud-tabs-tabbar-content {
        display: block;
        overflow: visible;
        white-space: normal;
        padding: 6px;
    }

    .responsive-tabs .mud-tabs-tabbar-wrapper {
        position: static !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100% !important;
        gap: 8px;
        transform: none !important;
        transition: none !important;
    }

    /* MudTabs wraps each text tab in a tooltip container: make it a grid cell. */
    .responsive-tabs .mud-tabs-tabbar-wrapper > .mud-tooltip-root {
        display: block !important;
        width: 100%;
        min-width: 0;
    }

    .responsive-tabs .mud-tabs-tabbar-wrapper > .mud-tooltip-root > .mud-tab {
        width: 100%;
        /* MudTabs writes min-width: 160px inline; without !important it would
           force each half-width grid cell to overflow the phone screen. */
        min-width: 0 !important;
        height: auto;
        min-height: 46px;
        padding: 10px 8px;
        border: 1px solid var(--mud-palette-lines-default, #e2e8f0);
        border-radius: 12px;
        background: var(--mud-palette-surface, #ffffff);
        color: var(--mud-palette-text-primary, #334155);
        font-size: .78rem;
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: 0;
        text-transform: none;
        white-space: normal;
        text-align: center;
        justify-content: center;
    }

    .responsive-tabs .mud-tab-icon-text {
        margin: 0 !important;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        line-height: 1.3;
    }

    .responsive-tabs .mud-tabs-tabbar-wrapper > .mud-tooltip-root > .mud-tab.mud-tab-active {
        background: var(--mud-palette-primary, #4A8B57);
        border-color: var(--mud-palette-primary, #4A8B57);
        color: var(--mud-palette-primary-text, #ffffff);
    }

    .responsive-tabs .mud-tabs-tabbar-wrapper > .mud-tooltip-root > .mud-tab.mud-tab-active:hover {
        background: var(--mud-palette-primary, #4A8B57);
        color: var(--mud-palette-primary-text, #ffffff);
    }

    .responsive-tabs .mud-tab-slider {
        display: none !important;
    }
}

@media (max-width: 380px) {
    .responsive-tabs .mud-tabs-tabbar-content {
        padding: 4px;
    }

    .responsive-tabs .mud-tabs-tabbar-wrapper {
        gap: 6px;
    }

    .responsive-tabs .mud-tabs-tabbar-wrapper > .mud-tooltip-root > .mud-tab {
        padding: 9px 6px;
        font-size: .72rem;
    }
}