/*
 * EduLogio semantic theme layer — Module 3.1.
 *
 * Only semantic CSS variables are customized at runtime. No customer-supplied
 * raw CSS is evaluated or injected.
 */

:root {
    --edulogio-primary: #8F1D2C;
    --edulogio-on-primary: #FFFFFF;
    --edulogio-secondary: #17233C;
    --edulogio-on-secondary: #FFFFFF;
    --edulogio-sidebar: #17233C;
    --edulogio-sidebar-text: #F7F2EA;
    --edulogio-page: #F3EEE7;
    --edulogio-surface: #FFFCF8;
    --edulogio-surface-soft: #F7F2EA;
    --edulogio-text: #2F3037;
    --edulogio-muted: #667085;
    --edulogio-border: #DED6CC;
    --edulogio-success: #547A63;
    --edulogio-warning: #B87932;
    --edulogio-danger: #A93645;
    --edulogio-focus: #395C88;

    --bs-primary: var(--edulogio-primary);
    --bs-secondary: var(--edulogio-secondary);
    --bs-dark: var(--edulogio-secondary);
    --bs-soft: var(--edulogio-page);
    --bs-success: var(--edulogio-success);
    --bs-warning: var(--edulogio-warning);
    --bs-danger: var(--edulogio-danger);
    --bs-body-color: var(--edulogio-text);
    --bs-secondary-color: var(--edulogio-muted);
    --bs-font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

body,
body.bg-soft {
    color: var(--edulogio-text);
    background-color: var(--edulogio-page) !important;
    background-image: var(--edulogio-page-background-image, none) !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    font-family: var(--bs-font-sans-serif);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--edulogio-text);
}

a {
    color: var(--edulogio-primary);
}

a:hover,
a:focus {
    color: color-mix(in srgb, var(--edulogio-primary) 82%, #000);
}

.card,
.settings-card,
.dropdown-menu,
.modal-content,
.account-user-dropdown,
.identity-settings-section,
.settings-page .localization-preview-item,
.settings-page .settings-toggle-row {
    border-color: var(--edulogio-border) !important;
    background-color: var(--edulogio-surface) !important;
}

.bg-white,
.bg-gray-100,
.bg-gray-200,
.bg-gray-300 {
    background-color: var(--edulogio-surface) !important;
}

.text-gray,
.text-gray-500,
.text-gray-600,
.text-muted {
    color: var(--edulogio-muted) !important;
}

.btn-primary,
.bg-primary {
    border-color: var(--edulogio-primary) !important;
    background-color: var(--edulogio-primary) !important;
    color: var(--edulogio-on-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    border-color: color-mix(in srgb, var(--edulogio-primary) 82%, #000) !important;
    background-color: color-mix(in srgb, var(--edulogio-primary) 82%, #000) !important;
    color: var(--edulogio-on-primary) !important;
}

.btn-secondary,
.bg-secondary {
    border-color: var(--edulogio-secondary) !important;
    background-color: var(--edulogio-secondary) !important;
    color: var(--edulogio-on-secondary) !important;
}

.btn-success,
.bg-success {
    border-color: var(--edulogio-success) !important;
    background-color: var(--edulogio-success) !important;
}

.btn-warning,
.bg-warning {
    border-color: var(--edulogio-warning) !important;
    background-color: var(--edulogio-warning) !important;
}

.btn-danger,
.bg-danger {
    border-color: var(--edulogio-danger) !important;
    background-color: var(--edulogio-danger) !important;
}

.sidebar,
.sidebar.bg-primary {
    background-color: var(--edulogio-sidebar) !important;
    background-image: var(--edulogio-navigation-background-image, none) !important;
    background-size: cover !important;
    background-position: center !important;
    color: var(--edulogio-sidebar-text) !important;
}

.sidebar .nav-link,
.sidebar .sidebar-dropdown-toggle,
.sidebar .text-white,
.sidebar strong {
    color: var(--edulogio-sidebar-text) !important;
}

.sidebar-search-input {
    border-color: color-mix(in srgb, var(--edulogio-sidebar-text) 23%, transparent) !important;
    background: color-mix(in srgb, var(--edulogio-sidebar-text) 10%, transparent) !important;
    color: var(--edulogio-sidebar-text) !important;
}

.sidebar-search-input::placeholder,
.sidebar-search-icon,
.sidebar-search-clear {
    color: color-mix(in srgb, var(--edulogio-sidebar-text) 68%, transparent) !important;
}

.sidebar .nav-link.active {
    background: color-mix(in srgb, var(--edulogio-sidebar-text) 18%, transparent) !important;
    box-shadow: inset 3px 0 0 var(--edulogio-accent) !important;
}

.account-user-toggle,
.account-mobile-menu-toggle {
    border-color: var(--edulogio-border);
    background: color-mix(in srgb, var(--edulogio-surface) 92%, transparent);
    color: var(--edulogio-text);
}

.account-user-avatar {
    background: color-mix(in srgb, var(--edulogio-primary) 12%, var(--edulogio-surface));
    color: var(--edulogio-primary);
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
    border-color: var(--edulogio-focus) !important;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--edulogio-focus) 22%, transparent) !important;
    outline-color: var(--edulogio-focus);
}

.table {
    color: var(--edulogio-text);
}

.table > :not(caption) > * > * {
    border-color: var(--edulogio-border);
}

.alert-success {
    border-color: color-mix(in srgb, var(--edulogio-success) 34%, var(--edulogio-surface));
}

.alert-warning {
    border-color: color-mix(in srgb, var(--edulogio-warning) 40%, var(--edulogio-surface));
}

.alert-danger {
    border-color: color-mix(in srgb, var(--edulogio-danger) 34%, var(--edulogio-surface));
}

.settings-page .settings-tabs .nav-link.active {
    background: var(--edulogio-secondary);
    color: var(--edulogio-on-secondary);
}

.theme-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.theme-color-field {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: .65rem;
    align-items: end;
}

.theme-color-field input[type="color"] {
    width: 52px !important;
    min-width: 52px !important;
    height: 46px;
    padding: .18rem;
    border: 1px solid var(--edulogio-border);
    border-radius: .75rem;
    background: var(--edulogio-surface);
    cursor: pointer;
}

.theme-preview {
    overflow: hidden;
    border: 1px solid var(--edulogio-border);
    border-radius: 1rem;
    background: var(--edulogio-page);
}

.theme-preview__topbar {
    height: 34px;
    background: var(--preview-surface, var(--edulogio-surface));
    border-bottom: 1px solid var(--preview-border, var(--edulogio-border));
}

.theme-preview__body {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    min-height: 260px;
}

.theme-preview__sidebar {
    padding: .9rem .75rem;
    background: var(--preview-sidebar, var(--edulogio-sidebar));
    color: var(--preview-sidebar-text, var(--edulogio-sidebar-text));
}

.theme-preview__brand {
    margin-bottom: 1rem;
    font-weight: 800;
}

.theme-preview__nav {
    display: grid;
    gap: .4rem;
}

.theme-preview__nav span {
    display: block;
    padding: .45rem .55rem;
    border-radius: .5rem;
    background: color-mix(in srgb, currentColor 10%, transparent);
    font-size: .74rem;
}

.theme-preview__nav span:first-child {
    box-shadow: inset 3px 0 0 var(--preview-primary, var(--edulogio-primary));
}

.theme-preview__content {
    padding: 1rem;
    background: var(--preview-page, var(--edulogio-page));
    color: var(--preview-text, var(--edulogio-text));
}

.theme-preview__card {
    padding: .9rem;
    border: 1px solid var(--preview-border, var(--edulogio-border));
    border-radius: .8rem;
    background: var(--preview-surface, var(--edulogio-surface));
}

.theme-preview__muted {
    color: var(--preview-muted, var(--edulogio-muted));
    font-size: .76rem;
}

.theme-preview__button {
    display: inline-flex;
    margin-top: .65rem;
    padding: .45rem .75rem;
    border-radius: .55rem;
    background: var(--preview-primary, var(--edulogio-primary));
    color: var(--preview-on-primary, var(--edulogio-on-primary));
    font-size: .76rem;
    font-weight: 700;
}

.theme-contrast-list {
    display: grid;
    gap: .55rem;
}

.theme-contrast-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem .75rem;
    border: 1px solid var(--edulogio-border);
    border-radius: .7rem;
    background: var(--edulogio-surface);
}

.theme-contrast-row strong {
    font-size: .82rem;
}

.theme-contrast-ratio {
    min-width: 74px;
    text-align: right;
    font-weight: 800;
}

@media (max-width: 760px) {
    .theme-settings-grid {
        grid-template-columns: 1fr;
    }

    .theme-preview__body {
        grid-template-columns: 96px minmax(0, 1fr);
    }
}


/* Module 3.1 visual corrective — auth surface */
html,
body.edulogio-auth-page {
    min-height: 100%;
    background: var(--edulogio-page) !important;
}

body.edulogio-auth-page {
    background-image: none !important;
}

.edulogio-auth-shell {
    min-height: 100vh;
    margin-top: 0 !important;
    padding: 2rem 1rem;
    background-color: var(--edulogio-page) !important;
    background-image: var(--edulogio-page-background-image, none) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
}

.edulogio-auth-stage {
    background: none !important;
    background-image: none !important;
}

.edulogio-auth-card {
    max-width: 500px;
    border: 1px solid var(--edulogio-border) !important;
    border-radius: 1.1rem !important;
    background: var(--edulogio-surface) !important;
    box-shadow: 0 22px 60px rgba(23, 35, 60, .10) !important;
}

.edulogio-auth-brand {
    margin-bottom: 1.25rem;
}

.edulogio-auth-logo {
    display: block;
    width: min(100%, 310px);
    height: auto;
    margin: 0 auto;
}

.edulogio-auth-heading h1 {
    margin-top: .15rem;
    color: var(--edulogio-text);
    font-weight: 600;
    letter-spacing: -.015em;
}

.language-switcher {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
}

.language-switcher a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 30px;
    border: 1px solid var(--edulogio-border);
    border-radius: .55rem;
    background: var(--edulogio-surface);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.language-switcher a:hover,
.language-switcher a:focus-visible {
    transform: translateY(-1px);
    border-color: var(--edulogio-focus);
    box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--edulogio-focus) 13%, transparent);
}

.language-switcher img {
    display: block;
    width: 27px;
    height: 18px;
    object-fit: cover;
    border-radius: .18rem;
    box-shadow: 0 0 0 1px rgba(23, 35, 60, .08);
}

.edulogio-auth-card label {
    min-width: 0;
    color: var(--edulogio-text);
    font-weight: 600;
}

.edulogio-auth-card .form-control,
.edulogio-auth-card .input-group-text {
    border-color: var(--edulogio-border);
    background: var(--edulogio-surface);
    color: var(--edulogio-text);
}

.edulogio-auth-card .input-group-text {
    color: var(--edulogio-muted);
}

.edulogio-auth-card .green-tag,
.edulogio-auth-card a {
    color: var(--edulogio-primary);
}

.edulogio-auth-submit {
    min-height: 44px;
    border-radius: .65rem;
    font-weight: 700;
}

.edulogio-auth-page .remember-me-slider {
    border-color: var(--edulogio-border);
    background: var(--edulogio-surface-soft);
}

.edulogio-auth-page .remember-me-input:checked + .remember-me-slider {
    border-color: var(--edulogio-primary);
    background: var(--edulogio-primary);
}

.edulogio-auth-page .remember-me-input:focus-visible + .remember-me-slider {
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--edulogio-focus) 20%, transparent);
}

.edulogio-auth-page .remember-me-title {
    color: var(--edulogio-text);
}

.edulogio-auth-page .remember-me-help {
    color: var(--edulogio-muted);
}

@media (max-width: 575px) {
    .edulogio-auth-shell {
        padding: 1rem .75rem;
    }

    .edulogio-auth-card {
        padding: 1.5rem !important;
        border-radius: .9rem !important;
    }

    .edulogio-auth-logo {
        width: min(100%, 260px);
    }
}


/* Module 3.1 completion: topbar, accent, layered backgrounds and picker UX. */
.account-topbar {
    background: var(--edulogio-topbar) !important;
    color: var(--edulogio-topbar-text) !important;
    border-bottom-color: var(--edulogio-border) !important;
}

.account-topbar .account-notification-toggle,
.account-topbar .account-user-toggle,
.account-topbar .account-mobile-menu-toggle {
    color: var(--edulogio-topbar-text) !important;
}

.account-notification-count {
    background: var(--edulogio-accent) !important;
}

.theme-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
}

.theme-picker-card {
    --theme-card-color: transparent;
    padding: .8rem;
    border: 1px solid var(--edulogio-border);
    border-radius: .85rem;
    background: var(--edulogio-surface);
}

.theme-picker-label {
    display: block;
    margin-bottom: .55rem;
    color: var(--edulogio-text);
    font-size: .82rem;
    font-weight: 700;
}

.theme-picker-main {
    position: relative;
    display: grid;
    grid-template-columns: 52px 1fr;
    align-items: center;
    gap: .65rem;
    min-height: 52px;
    padding: .4rem;
    border: 1px solid var(--edulogio-border);
    border-radius: .72rem;
    background: var(--edulogio-surface-soft);
    overflow: hidden;
}

.theme-picker-native {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
}

.theme-picker-swatch {
    width: 42px;
    height: 42px;
    border: 1px solid color-mix(in srgb, var(--edulogio-text) 20%, transparent);
    border-radius: .6rem;
    background: var(--theme-swatch);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, #fff 35%, transparent);
}

.theme-picker-action {
    color: var(--edulogio-text);
    font-size: .8rem;
    font-weight: 700;
}

.theme-picker-action .fas {
    margin-right: .35rem;
    color: var(--edulogio-muted);
}

.theme-picker-advanced {
    margin-top: .45rem;
}

.theme-picker-advanced summary {
    cursor: pointer;
    color: var(--edulogio-muted);
    font-size: .72rem;
    user-select: none;
}

.theme-picker-hex {
    margin-top: .4rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
}

.settings-card-subsection {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--edulogio-border);
}

.theme-background-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem 1rem;
}

.theme-range-control {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .35rem .75rem;
    align-items: center;
    padding: .65rem .75rem;
    border: 1px solid var(--edulogio-border);
    border-radius: .75rem;
    background: var(--edulogio-surface-soft);
}

.theme-range-control label {
    grid-column: 1 / -1;
    margin: 0;
    font-size: .78rem;
    font-weight: 700;
}

.theme-range-control input[type="range"] {
    width: 100%;
    accent-color: var(--edulogio-primary);
}

.theme-range-control output {
    min-width: 48px;
    color: var(--edulogio-primary);
    font-size: .8rem;
    font-weight: 800;
    text-align: right;
}

.theme-preview__topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 .7rem;
    color: var(--preview-topbar-text, var(--edulogio-topbar-text));
    background: var(--preview-topbar, var(--edulogio-topbar));
    font-size: .68rem;
    font-weight: 700;
}

.theme-preview__sidebar {
    background-color: var(--preview-sidebar, var(--edulogio-sidebar));
    background-image: var(--preview-navigation-background-image, none);
    background-size: cover;
    background-position: center;
}

.theme-preview__content {
    background-color: var(--preview-page, var(--edulogio-page));
    background-image: var(--preview-page-background-image, none);
    background-size: cover;
    background-position: center;
}

.theme-preview__actions {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
}

.theme-preview__accent {
    display: inline-flex;
    margin-top: .65rem;
    padding: .45rem .75rem;
    border: 1px solid var(--preview-accent, var(--edulogio-accent));
    border-radius: .55rem;
    color: var(--preview-accent, var(--edulogio-accent));
    background: color-mix(in srgb, var(--preview-accent, var(--edulogio-accent)) 9%, transparent);
    font-size: .76rem;
    font-weight: 700;
}

.theme-contrast-row [data-pass="1"] {
    color: var(--edulogio-success);
}

.theme-contrast-row [data-pass="0"] {
    color: var(--edulogio-danger);
}

.theme-defaults-card {
    border-style: dashed !important;
}

.theme-default-preset-version {
    display: inline-flex;
    margin-left: .4rem;
    padding: .15rem .4rem;
    border-radius: 999px;
    background: var(--edulogio-surface-soft);
    color: var(--edulogio-muted);
    font-size: .68rem;
    font-weight: 700;
}

.theme-defaults-summary {
    display: flex;
    gap: .55rem;
    flex-wrap: wrap;
    margin: .75rem 0 1rem;
}

.theme-defaults-summary span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .55rem;
    border: 1px solid var(--edulogio-border);
    border-radius: 999px;
    background: var(--edulogio-surface);
    font-size: .72rem;
    font-weight: 600;
}

.theme-defaults-summary i {
    width: .85rem;
    height: .85rem;
    border: 1px solid color-mix(in srgb, var(--edulogio-text) 15%, transparent);
    border-radius: 50%;
    background: var(--default-color);
}

@media (max-width: 1100px) {
    .theme-picker-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .theme-picker-grid,
    .theme-background-controls {
        grid-template-columns: 1fr;
    }
}


/* Module 3.2 identity asset UI — compact tabbed workspace */
.branding-workspace{display:grid;grid-template-columns:190px minmax(0,1fr);gap:1rem;margin-top:.5rem}
.branding-asset-tabs{display:flex;flex-direction:column;gap:.4rem}
.branding-asset-tab{display:flex;align-items:center;gap:.6rem;width:100%;padding:.72rem .8rem;border:1px solid var(--edulogio-border);border-radius:.72rem;color:var(--edulogio-text);background:var(--edulogio-surface);font-size:.78rem;font-weight:700;text-align:left}
.branding-asset-tab .fas{width:1rem;color:var(--edulogio-muted);text-align:center}
.branding-asset-tab:hover,.branding-asset-tab.is-active{border-color:var(--edulogio-primary);background:color-mix(in srgb,var(--edulogio-primary) 7%,var(--edulogio-surface));color:var(--edulogio-primary)}
.branding-asset-tab.is-active .fas{color:var(--edulogio-primary)}
.branding-asset-panel{display:none;gap:.85rem;padding:1rem;border:1px solid var(--edulogio-border);border-radius:.9rem;background:var(--edulogio-surface)}
.branding-asset-panel.is-active{display:grid}
.branding-asset-preview{min-height:170px;display:flex;align-items:center;justify-content:center;padding:1rem;border:1px dashed var(--edulogio-border);border-radius:.8rem;background:var(--edulogio-surface-soft);overflow:hidden}
.branding-asset-preview img{display:block;max-width:min(100%,520px);max-height:145px;object-fit:contain}
.branding-empty-state{display:grid;justify-items:center;gap:.3rem;color:var(--edulogio-muted);text-align:center}
.branding-empty-state .fas{font-size:1.8rem}
.branding-empty-state strong{color:var(--edulogio-text);font-size:.8rem}
.branding-empty-state small{max-width:360px;font-size:.7rem}
.branding-asset-copy h4{margin:0 0 .2rem;font-size:.95rem}
.branding-asset-copy p{margin:0;color:var(--edulogio-muted);font-size:.78rem}
.branding-asset-panel .unified-file-uploader{margin:0}
.branding-asset-actions{display:flex;justify-content:flex-end}
@media(max-width:900px){.branding-workspace{grid-template-columns:1fr}.branding-asset-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.branding-asset-tab{justify-content:center;text-align:center}}
@media(max-width:600px){.branding-asset-tabs{grid-template-columns:1fr}}


/* Module 3.2 sidebar identity corrective */
.account-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    padding: .15rem .5rem .25rem;
}

.account-brand__mark {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 150px !important;
    max-height: 78px !important;
    object-fit: contain;
    flex: 0 1 auto;
    background: transparent !important;
}

.account-brand__name {
    display: block;
    max-width: 100%;
    color: var(--edulogio-sidebar-text);
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
}


/* Module 3.2 staged branding workflow */
.branding-stage-uploader {
    margin-top: .15rem;
}

.branding-stage-uploader .unified-file-uploader__dropzone {
    min-height: 205px;
    border-color: color-mix(in srgb, var(--edulogio-secondary) 22%, var(--edulogio-border));
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--edulogio-surface) 96%, var(--edulogio-secondary)) 0%,
            var(--edulogio-surface-soft) 100%
        );
}

.branding-stage-uploader .unified-file-uploader__dropzone:hover,
.branding-stage-uploader .unified-file-uploader.is-dragging .unified-file-uploader__dropzone,
.branding-stage-uploader .unified-file-uploader__dropzone:focus {
    border-color: var(--edulogio-primary);
    background: color-mix(in srgb, var(--edulogio-primary) 4%, var(--edulogio-surface-soft));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--edulogio-primary) 10%, transparent);
}

.branding-stage-uploader .unified-file-uploader__icon {
    background: var(--edulogio-primary);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--edulogio-primary) 22%, transparent);
}

.branding-stage-uploader .unified-upload-item__bar {
    background: var(--edulogio-primary);
}

.branding-stage-uploader .unified-upload-item.is-success .unified-upload-item__bar {
    background: var(--edulogio-success);
}

.branding-stage-status {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem .85rem;
    border: 1px solid color-mix(in srgb, var(--edulogio-warning) 35%, var(--edulogio-border));
    border-radius: .75rem;
    background: color-mix(in srgb, var(--edulogio-warning) 7%, var(--edulogio-surface));
    color: var(--edulogio-text);
}

.branding-stage-status[hidden] {
    display: none !important;
}

.branding-stage-status > .fas {
    color: var(--edulogio-warning);
    font-size: 1.1rem;
}

.branding-stage-status strong,
.branding-stage-status small {
    display: block;
}

.branding-stage-status strong {
    margin-bottom: .15rem;
    font-size: .78rem;
}

.branding-stage-status small {
    color: var(--edulogio-muted);
    font-size: .7rem;
}

.branding-stage-form {
    display: grid;
    gap: .75rem;
}

.branding-asset-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: wrap;
}

.theme-preview__brand {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.theme-preview__brand-logo {
    display: block;
    max-width: 58px;
    max-height: 28px;
    object-fit: contain;
}

.account-brand__mark {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 150px !important;
    max-height: 78px !important;
    object-fit: contain;
    flex: 0 1 auto;
    background: transparent !important;
}


/* Module 3.2 UAT corrective: approved canonical logo presentation */
.account-brand {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .15rem .4rem .3rem;
}

.account-brand__mark {
    display: block !important;
    width: 158px !important;
    height: auto !important;
    max-width: calc(100% - 8px) !important;
    max-height: 72px !important;
    padding: 7px 9px !important;
    object-fit: contain !important;
    flex: 0 0 auto !important;
    border: 1px solid color-mix(in srgb, var(--edulogio-sidebar-text) 14%, transparent);
    border-radius: 10px;
    background: #FFFCF8 !important;
    box-shadow: 0 5px 16px rgba(8, 18, 35, .16);
}

.account-brand__name {
    display: block;
    max-width: 100%;
    color: var(--edulogio-sidebar-text);
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
}

/* Branding workspace: reuse the application's polished uploader without
   exposing the native file input or compressing its layout. */
.branding-assets-card {
    overflow: visible;
}

.branding-asset-panel {
    gap: 1rem;
}

.branding-asset-preview {
    min-height: 145px;
    padding: 1.25rem;
    border-style: solid;
    background:
        linear-gradient(145deg,
            var(--edulogio-surface) 0%,
            var(--edulogio-surface-soft) 100%);
}

.branding-asset-preview img {
    max-width: min(100%, 460px);
    max-height: 118px;
}

.branding-stage-uploader {
    margin: .25rem 0 0;
}

.branding-stage-uploader .unified-file-uploader {
    width: 100%;
}

.branding-stage-uploader .unified-file-uploader__dropzone {
    min-height: 210px;
    padding: 28px 22px;
    border: 2px dashed color-mix(in srgb, var(--edulogio-secondary) 22%, var(--edulogio-border));
    border-radius: 15px;
    background: linear-gradient(180deg, #FBFCFF 0%, #F7F8FC 100%);
}

.branding-stage-uploader .unified-file-uploader__title {
    color: var(--edulogio-text);
}

.branding-stage-uploader .unified-file-uploader__hint {
    color: var(--edulogio-muted);
}

.branding-stage-uploader .unified-file-uploader__icon {
    background: var(--edulogio-primary);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--edulogio-primary) 25%, transparent);
}

.branding-stage-uploader .unified-file-uploader__button {
    border-color: var(--edulogio-border);
    color: var(--edulogio-text);
    background: var(--edulogio-surface);
}

.branding-stage-uploader .unified-upload-item {
    border-color: var(--edulogio-border);
    background: var(--edulogio-surface);
}

.branding-stage-uploader .unified-upload-item__bar {
    background: var(--edulogio-primary);
}

.branding-stage-uploader .unified-upload-item.is-success .unified-upload-item__bar {
    background: var(--edulogio-success);
}

.branding-stage-status {
    margin-top: .15rem;
}

.theme-preview__brand-logo {
    max-width: 72px !important;
    max-height: 32px !important;
    padding: 2px 3px;
    border-radius: 4px;
    background: #FFFCF8;
}

@media (max-width: 767px) {
    .account-brand__mark {
        width: 145px !important;
    }

    .branding-stage-uploader .unified-file-uploader__dropzone {
        min-height: 185px;
        padding: 22px 14px;
    }
}