@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,800;1,600&display=swap');

:root {
    /* Shared application design tokens; light palette is used only by light rules. */
    --app-control-radius: .5rem;
    --app-light-surface: #fff;
    --app-light-border: #dce1e8;
    --app-light-text: #465166;
    --app-light-text-strong: #30394a;
    --app-light-surface-muted: #f0f2f5;
    --app-light-surface-hover: #e5e8ee;
    --app-light-input-border: #cbd2dc;
    --app-light-accent: #4f46e5;
    --app-light-accent-text: #4338ca;
    --app-light-accent-soft: #eeedff;
    --app-light-accent-border: #d8d5fa;
    --app-light-accent-hover: #e5e2ff;
    --app-light-accent-hover-border: #c4bff5;
    --app-light-nav-text: #4b5563;
    --app-light-input-focus: #8078df;
    --app-light-placeholder: #68768a;
    --app-light-warning-text: #92500b;
    --app-light-warning-soft: #fff3df;
    --app-light-success-text: #18734d;
    --app-light-success-soft: #e7f5ef;
    --app-light-warning-strong: #a35508;
    --app-light-editor-surface: #f6f7f9;
    --app-light-muted-text: #596579;
    --app-light-progress-track: #eceef3;
    --app-light-focus-ring: rgba(79, 70, 229, .12);

    --body-bg-rgb: 237, 238, 241;
    --primary-rgb:	142, 84, 233;
    --secondary-rgb:	245, 111, 75;
    --warning-rgb:	245, 184, 73;
    --info-rgb:	73, 182, 245;
    --success-rgb:	38, 191, 148;
    --danger-rgb:	230, 83, 60;
    --light-rgb:	248, 249 ,250;
    --dark-rgb:	35, 35, 35;
    --orange-rgb:	255, 165, 5;
    --pink-rgb:	231, 145, 188;
    --teal-rgb:	18, 194, 194;
    --purple-rgb:	177, 75, 213;
    --menu-primary-color-rgb: 118, 131, 148;
    --default-body-bg-color:	rgb(var(--body-bg-rgb));
    --primary-color:	rgb(var(--primary-rgb));
    --primary-border:	rgb(var(--primary-rgb));
    --primary01:	rgba(var(--primary-rgb), 0.1);
    --primary02:	rgba(var(--primary-rgb), 0.2);
    --primary03:	rgba(var(--primary-rgb), 0.3);
    --primary04:	rgba(var(--primary-rgb), 0.4);
    --primary05:	rgba(var(--primary-rgb), 0.5);
    --primary06:	rgba(var(--primary-rgb), 0.6);
    --primary07:	rgba(var(--primary-rgb), 0.7);
    --primary08:	rgba(var(--primary-rgb), 0.8);
    --primary09:	rgba(var(--primary-rgb), 0.9);
    --primary005:	rgba(var(--primary-rgb), 0.05);
    --default-font-family:	"Inter", sans-serif;
    --default-font-weight:	400;
    --default-text-color:	#1b2c3f;
    --default-border:	#f0f0f0;
    --default-background:	#f2f4f7;
    --menu-bg:	#fff;
    --menu-prime-color:	#768394;
    --menu-border-color:	#f3f3f3;
    --header-bg: #fff;
    --header-prime-color:	#768394;
    --header-border-color:	#f3f3f3;
    --custom-white:	#fff;
    --custom-black:	#000;
    --bootstrap-card-border: #844444;	 /*#f3f3f3*/;
    --bs-border-color-translucent: #dbdfe1;
    --list-hover-focus-bg:	#f5f6f7;
    --text-muted:	#818995;
    --input-border:	#e4e9f4;
    --form-control-bg:	#ffffff;
    /* Gray set */
    --gray-1:	#f9fafb;
    --gray-2:	#f2f4f5;
    --gray-3:	#e6eaeb;
    --gray-4:	#dbdfe1;
    --gray-5:	#949eb7;
    --gray-6:	#7987a1;
    --gray-7:	#4d5875;
    --gray-8:	#383853;
    --gray-9:	#323251;
    /* White set */
    --white-1:	rgba(255,255,255, 0.1);
    --white-2:	rgba(255,255,255, 0.2);
    --white-3:	rgba(255,255,255, 0.3);
    --white-4:	rgba(255,255,255, 0.4);
    --white-5:	rgba(255,255,255, 0.5);
    --white-6:	rgba(255,255,255, 0.6);
    --white-7:	rgba(255,255,255, 0.7);
    --white-8:	rgba(255,255,255, 0.8);
    --white-9:	rgba(255,255,255, 0.9);
    /* Black set */
    --black-1:	rgba(0,0,0, 0.1);
    --black-2:	rgba(0,0,0, 0.2);
    --black-3:	rgba(0,0,0, 0.3);
    --black-4:	rgba(0,0,0, 0.4);
    --black-5:	rgba(0,0,0, 0.5);
    --black-6:	rgba(0,0,0, 0.6);
    --black-7:	rgba(0,0,0, 0.7);
    --black-8:	rgba(0,0,0, 0.8);
    --black-9:	rgba(0,0,0, 0.9);
    /* Gradient sections sets */
    --section-bg-1: #e0e7ff;
    --section-bg-2: #ede9fe;
    --section-bg-3: #fbcfe8;
    --menu-vert-bg: #ffffff;
    --section-bg-dark: #f2f4f7;
    --bs-body-bg: #ffffff;
    --div-bg-color1: #eef1f7;
    --div-bg-color2: #f3f5fa;
    --div-bg-color3: #f7f8fc;
    --btn-soft-bg: #ffffff;
    --btn-soft-hover: #f1f3f5;
    --btn-soft-text: #1f2937;
    --border-badge-color: #c7cdf8;
    --company-bg-color1: #eef0f6 0%;
    --company-bg-color2: #f3f4fa 50%;
    --company-bg-color3: #f2eefc 100%;
    --company-border-color: #c2cdf6;
    --school-bg-color1: #f4f2f7 0%;
    --school-bg-color2: #f6eff7 45%;
    --school-bg-color3: #f8eefe 100%;
    --school-border-color: #d9c6f5;
    --bs-border-radius: 24px;
    --card-border-color-hover: #9AA7FF;
    --theme-dropdown-bg: #ffffff;
    --theme-dropdown-text: #1f2937;
    --theme-dropdown-hover-bg: #f1f3f5;
    --active-menu-bg: #4F46E5;
    --hover-menu-bg: #3A4454;
    --card-set-tab-bg: #ffffff;
    --content-bg: #F9FAFB;
    --form-control-border-color: #D2D2D2;
}

html[data-bs-theme="dark"] {
    --menu-vert-bg: #0a1a33;
    --menu-prime-color: #ffffff;
    --section-bg-1: #141832;  /* dark navy (left) */
    --section-bg-2: #361b5c;  /* deep violet (middle) */
    --section-bg-3: #581d87;  /* purple (right) */
    --menu-bg: #0a1a33;
    --content-bg: #0a1a33;
    --bs-border-color-translucent: #31405a;
    --bs-body-bg: #253247;
    --div-bg-color1: #353164;
    --div-bg-color2: #373265;
    --div-bg-color3: #3c2d5b;
    --btn-soft-bg: #3b465a;
    --btn-soft-hover: #4a5568;
    --btn-soft-text: #ffffff;
    --border-badge-color: #6366f1;
    --company-bg-color1: #1c2446 0%;
    --company-bg-color2: #2b2757 50%;
    --company-bg-color3: #3a2663 100%;
    --company-border-color: rgba(99,102,241,0.6);
    --school-bg-color1: #3b1f57 0%;
    --school-bg-color2: #4a1f4f 45%;
    --school-bg-color3: #5a1e3e 100%;
    --school-border-color: #7c3aed;
    --card-border-color-hover: #5B5BF6;
    --form-control-bg: #3F4D60;
    --form-control-border-color: #556274;
    --card-link-color: #5B5BF6;
    --card-link-color-hover: #6A6AF7;
    --theme-dropdown-bg: #313b59;
    --theme-dropdown-text: #ffffff;
    --theme-dropdown-hover-bg: #3d496b;
    --card-set-tab-bg: #202B3A;
}

.card-set-tabs-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    background: var(--content-bg);
}

.card-set-tabs-footer .card-set-tabs {
    max-width: 560px;
    margin: 0 auto;
}

.card-set-app-footer-space {
    padding-bottom: 7.5rem !important;
}

.input-group .input-group-text,
.input-group .form-control {
    border-color: var(--bs-border-color-translucent);
}

/* The toast host lives outside the app shell so route changes preserve messages. */
body:has(.app-shell) .mc-toast-container {
    padding-top: calc(1rem + env(safe-area-inset-top, 0px)) !important;
    padding-right: calc(1rem + env(safe-area-inset-right, 0px)) !important;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: calc(1rem + env(safe-area-inset-left, 0px)) !important;
    max-width: 100%;
}

.top-navbar-modal,
.exam-settings-modal,
.learning-menu-modal,
body:has(.app-shell) .modal {
    --navbar-modal-top: calc(var(--bs-modal-margin) + env(safe-area-inset-top, 0px));
    --navbar-modal-bottom: calc(var(--bs-modal-margin) + env(safe-area-inset-bottom, 0px));
}

.top-navbar-modal .modal-dialog-scrollable,
.exam-settings-modal .modal-dialog-scrollable,
.learning-menu-modal .modal-dialog-scrollable,
body:has(.app-shell) .modal > .modal-dialog-scrollable {
    margin-top: var(--navbar-modal-top);
    margin-bottom: var(--navbar-modal-bottom);
    height: calc(100vh - var(--navbar-modal-top) - var(--navbar-modal-bottom));
    height: calc(100dvh - var(--navbar-modal-top) - var(--navbar-modal-bottom));
    min-height: 0;
}

.top-navbar-modal .modal-body,
.exam-settings-modal .modal-body,
.learning-menu-modal .modal-body,
body:has(.app-shell) .modal-body {
    min-height: 0;
    overscroll-behavior: contain;
}

/* Full-screen pickers also keep their close button clear of the iPhone notch. */
body:has(.app-shell) .picker-header {
    padding-top: max(1rem, env(safe-area-inset-top, 0px));
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
}

.learning-menu-modal .dropdown-item {
    min-height: 2.75rem;
    padding: .75rem;
    white-space: normal;
    overflow-wrap: anywhere;
    border-radius: var(--bs-border-radius);
}

.top-navbar-modal .modal-content {
    background: var(--theme-dropdown-bg);
    color: var(--theme-dropdown-text);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}

.top-navbar-modal .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.top-navbar-modal .btn-close {
    filter: invert(1);
    box-shadow: none;
}

.top-navbar-modal .dropdown-item {
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding: .75rem 1rem;
    border-radius: 14px;
    color: var(--theme-dropdown-text);
    background: transparent;
}

.top-navbar-modal .dropdown-item:hover,
.top-navbar-modal .dropdown-item:focus {
    background: #3A4454;
    color: #D7DCEA;
}

.top-navbar-modal .dropdown-item.active {
    background: #4F46E5;
    color: #ffffff;
}

html:not([data-bs-theme="dark"]) .top-navbar-modal .btn-close {
    filter: none;
}

html:not([data-bs-theme="dark"]) .top-navbar-modal .dropdown-item:not(.active):hover,
html:not([data-bs-theme="dark"]) .top-navbar-modal .dropdown-item:not(.active):focus,
html:not([data-bs-theme="dark"]) .top-navbar-dropdown .dropdown-item:not(.active):hover,
html:not([data-bs-theme="dark"]) .top-navbar-dropdown .dropdown-item:not(.active):focus {
    background: var(--theme-dropdown-hover-bg);
    color: var(--theme-dropdown-text);
}

.navbar-icon-btn {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 999px !important;
    position: relative;
    display: inline-block;
    line-height: 1;
    box-shadow: none;
}

.navbar-icon-btn .header-link-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    line-height: 1;
    transform: translate(-50%, -50%);
}

.navbar-notification-indicator {
    position: absolute;
    top: .55rem;
    right: .55rem;
    width: .5rem;
    height: .5rem;
    border: 2px solid var(--theme-header-bg, #4f46e5);
    border-radius: 50%;
    background: #ef4444;
    box-sizing: content-box;
}

.navbar-icon-btn:hover,
.navbar-icon-btn:focus,
.navbar-icon-btn:focus-visible,
.navbar-icon-btn:active,
.navbar-icon-btn.show {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: none;
    outline: none;
}

.top-navbar-dropdown {
    min-width: 12rem;
    padding: .35rem;
    margin-top: .35rem;
    background: var(--theme-dropdown-bg);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

.top-navbar-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: .55rem .85rem;
    border-radius: 10px;
    color: var(--theme-dropdown-text);
    font-size: 1rem;
    line-height: 1.2;
    background: transparent;
}

.top-navbar-dropdown .dropdown-item:hover,
.top-navbar-dropdown .dropdown-item:focus {
    background: #3A4454;
    color: #D7DCEA;
}

.top-navbar-dropdown .dropdown-item.active {
    background: #4F46E5;
    color: #ffffff;
}

.top-navbar-dropdown:has(.notification-menu-item) {
    width: min(25rem, calc(100vw - 1rem));
    max-height: min(34rem, calc(100vh - 5rem));
    overflow-y: auto;
    padding: .45rem;
}

.notification-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .45rem .55rem .65rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

/* The modal already has a title; keep this heading only in the dropdown. */
.top-navbar-modal .notification-menu-title,
.top-navbar-modal .notification-menu-header:not(:has(.notification-mark-all)) {
    display: none;
}

.top-navbar-modal .notification-menu-header {
    justify-content: flex-end;
}

.notification-menu-title {
    color: var(--theme-dropdown-text);
    font-size: .95rem;
    font-weight: 600;
}

.notification-mark-all {
    padding: .15rem;
    color: #a5b4fc;
    font-size: .78rem;
    text-decoration: none;
}

.notification-mark-all:hover,
.notification-mark-all:focus {
    color: #c7d2fe;
}

.notification-menu-state {
    padding: 1.25rem .75rem;
    color: var(--theme-dropdown-text);
    text-align: center;
    opacity: .75;
}

.notification-menu-row {
    position: relative;
}

.notification-menu-item {
    position: relative;
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) .5rem;
    width: 100%;
    gap: .65rem;
    align-items: start;
    padding: .7rem 2.65rem .7rem .55rem;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    border-radius: .6rem;
    background: transparent;
    color: var(--theme-dropdown-text);
    text-align: left;
}

.notification-menu-item:hover,
.notification-menu-item:focus {
    background: rgba(255, 255, 255, .08);
}

.notification-menu-item.unread {
    background: rgba(79, 70, 229, .14);
}

.notification-type-icon {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: .65rem;
    background: rgba(148, 163, 184, .15);
    color: #cbd5e1;
}

.notification-type-icon.leitner {
    background: rgba(79, 70, 229, .2);
    color: #a5b4fc;
}

.notification-type-icon.personal {
    background: rgba(14, 165, 233, .18);
    color: #7dd3fc;
}

.notification-type-icon.system {
    background: rgba(245, 158, 11, .18);
    color: #fcd34d;
}

.notification-menu-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .18rem;
}

.notification-item-heading {
    font-size: .9rem;
    font-weight: 600;
}

.notification-item-message {
    display: -webkit-box;
    overflow: hidden;
    color: var(--theme-dropdown-text);
    font-size: .82rem;
    line-height: 1.35;
    opacity: .78;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.notification-item-time {
    margin-top: .12rem;
    color: var(--theme-dropdown-text);
    font-size: .72rem;
    opacity: .55;
}

.notification-unread-dot {
    width: .46rem;
    height: .46rem;
    margin-top: .35rem;
    border-radius: 50%;
    background: #ef4444;
}

.notification-delete {
    position: absolute;
    z-index: 1;
    top: .62rem;
    right: .55rem;
    display: inline-flex;
    width: 1.85rem;
    height: 1.85rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: .48rem;
    background: transparent;
    color: var(--theme-dropdown-text);
    opacity: .58;
}

.notification-delete:hover,
.notification-delete:focus-visible {
    background: rgba(239, 68, 68, .16);
    color: #f87171;
    opacity: 1;
}

.notification-delete:disabled {
    pointer-events: none;
    opacity: .3;
}

.top-navbar-modal .notification-menu-item {
    color: var(--bs-body-color);
}

.top-navbar-modal .notification-menu-title,
.top-navbar-modal .notification-menu-state,
.top-navbar-modal .notification-item-message,
.top-navbar-modal .notification-item-time {
    color: var(--bs-body-color);
}

.top-navbar-modal .notification-delete {
    color: var(--bs-secondary-color);
}

.btn.app-primary-action {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #4F46E5;
    --bs-btn-border-color: #4F46E5;

    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #4A3FD1;
    --bs-btn-hover-border-color: #4A3FD1;

    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #4A3FD1;
    --bs-btn-active-border-color: #4A3FD1;

    --bs-btn-focus-shadow-rgb: 0, 0, 0;

    color: #ffffff;
    background-color: #4F46E5;
    border-color: #4F46E5;
    border-radius: var(--app-control-radius) !important;
    box-shadow: none !important;
    outline: none !important;
}

.btn.app-primary-action:hover,
.btn.app-primary-action:focus,
.btn.app-primary-action:focus-visible,
.btn.app-primary-action:active,
.btn.app-primary-action.active,
.btn.app-primary-action.show {
    color: #ffffff;
    background-color: #4A3FD1;
    border-color: #4A3FD1;
    box-shadow: none !important;
    outline: none !important;
}

.btn-group > .btn.app-primary-action.app-split-main {
    border-radius: .5rem 0 0 .5rem !important;
}

.btn-group > .btn.app-primary-action.app-split-toggle {
    margin-left: 0 !important;
    border-left: 2px solid #3730A3 !important;
    border-radius: 0 .5rem .5rem 0 !important;
}

.btn.app-secondary-action {
    --bs-btn-color: #D7DCEA;
    --bs-btn-bg: #3A4454;
    --bs-btn-border-color: #3A4454;

    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #333C4B;
    --bs-btn-hover-border-color: #333C4B;

    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #333C4B;
    --bs-btn-active-border-color: #333C4B;

    --bs-btn-focus-shadow-rgb: 0, 0, 0;

    color: #D7DCEA;
    background-color: #3A4454;
    border-color: #3A4454;
    border-radius: var(--app-control-radius) !important;
    box-shadow: none !important;
    outline: none !important;
}

.btn.app-secondary-action:hover,
.btn.app-secondary-action:focus,
.btn.app-secondary-action:focus-visible,
.btn.app-secondary-action:active,
.btn.app-secondary-action.active,
.btn.app-secondary-action.show {
    color: #ffffff;
    background-color: #333C4B;
    border-color: #333C4B;
    box-shadow: none !important;
    outline: none !important;
}

.btn.app-secondary-action i {
    color: inherit;
}

.badge.app-support-badge {
    --bs-badge-border-radius: var(--app-control-radius);
    border-radius: var(--app-control-radius) !important;
    font-weight: 400;
}

.card-set-badge {
    border-radius: var(--app-control-radius) !important;
    font-weight: 400 !important;
}

.badge.category-pill {
    background-color: #302E6E !important;
    color: #AEB8FF !important;
    border-radius: var(--app-control-radius) !important;
    font-weight: 400;
}

.trent-success {
    color: #19C08B;
}

.trent-progress-bar-success {
    background-color: #19C08B;
}

.trent-warning {
    color: #FFC229;
}

.trent-progress-bar-warning {
    background-color: #FFC229;
}

.trent-danger {
    color: #E6533C;
}

.trent-progress-bar-danger {
    background-color: #E6533C;
}

.card-set-tabs {
    background-color: var(--card-set-tab-bg);
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 1rem;
    padding: .25rem;
}

.card-set-tabs .nav-pills {
    --bs-nav-pills-link-active-bg: #4F46E5;
    --bs-nav-pills-link-active-color: #ffffff;
}

.card-set-tab-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.organization-learning-group-tab-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-set-tab-list .nav-item {
    min-width: 0;
}

.card-set-tabs .nav-link.card-set-tab {
    color: #A9B1C1;
    font-weight: 400;
    font-size: 1.05rem;
    background-color: transparent;
    border: 0;
    box-shadow: none;
    border-radius: .85rem !important;
    width: 100%;
    min-height: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem .75rem;
    line-height: 1.2;
    text-align: center;
}

.card-set-tabs .nav-link.card-set-tab i {
    color: inherit;
    font-size: 1.25rem;
}

.card-set-tabs .nav-link.card-set-tab:hover,
.card-set-tabs .nav-link.card-set-tab:focus,
.card-set-tabs .nav-link.card-set-tab:focus-visible {
    color: #D7DCEA;
    background-color: transparent;
    box-shadow: none;
    outline: none;
}

.card-set-tabs .nav-link.card-set-tab.active {
    color: #ffffff;
    background-color: var(--active-menu-bg);
    box-shadow: none;
    border-radius: .85rem !important;
}

.card-set-tabs .nav-link.card-set-tab.active:hover,
.card-set-tabs .nav-link.card-set-tab.active:focus,
.card-set-tabs .nav-link.card-set-tab.active:focus-visible {
    color: #ffffff;
    background-color: var(--active-menu-bg);
    box-shadow: none;
    outline: none;
}

.card-set-tabs .nav-link.card-set-tab:not(.active):hover,
.card-set-tabs .nav-link.card-set-tab:not(.active):focus {
    color: #D7DCEA;
    background-color: #3A4454;
    border-radius: .85rem !important;
    box-shadow: none;
    outline: none;

}

@media (max-width: 575.98px) {
    .card-set-tabs .nav-link.card-set-tab {
        flex-direction: column;
        gap: .2rem;
        padding: .55rem .25rem;
        font-size: .75rem;
        white-space: normal;
    }

    .card-set-tabs .nav-link.card-set-tab i {
        font-size: 1.25rem;
    }
}

/* Card set folders */
.folder-btn,
.folder-edit-toggle,
.folder-action-btn,
.folder-edit-input,
.folder-edit-row {
    border-radius: var(--app-control-radius) !important;
}

.folder-btn {
    border-color: transparent;
}

.folder-btn.btn-soft {
    background-color: transparent;
    border-color: transparent;
}

.folder-btn.btn-soft i {
    color: #F5A623;
}

.folder-btn.btn-soft:hover {
    color: #D7DCEA;
    background-color: #3A4454;
    border-color: transparent;
}

.folder-btn.btn-soft:hover i {
    color: #F5A623;
}

.folder-count {
    color: #7C8494;
}

.folder-btn.btn-soft:hover .folder-count {
    color: #8D95A4;
}

.folder-btn.btn-primary {
    --bs-btn-bg: #302E6E;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: #302E6E;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: #302E6E;
    --bs-btn-active-border-color: transparent;
    --bs-btn-color: #AEB8FF;
    --bs-btn-hover-color: #AEB8FF;
    --bs-btn-active-color: #AEB8FF;
}

.folder-btn.btn-primary i,
.folder-btn.btn-primary .folder-count {
    color: #AEB8FF;
}

.folder-edit-toggle {
    background-color: transparent;
    border-color: transparent;
    color: var(--bs-secondary-color) !important;
}

.folder-edit-toggle i,
.folder-edit-toggle span {
    color: var(--bs-secondary-color) !important;
}

.folder-edit-toggle:hover,
.folder-edit-toggle:focus {
    background-color: transparent;
    border-color: transparent;
}

.folder-edit-toggle.is-editing {
    --bs-btn-bg: #4F46E5;
    --bs-btn-border-color: #4F46E5;
    --bs-btn-hover-bg: #4F46E5;
    --bs-btn-hover-border-color: #4F46E5;
    --bs-btn-active-bg: #4F46E5;
    --bs-btn-active-border-color: #4F46E5;
    color: #ffffff !important;
}

.folder-edit-toggle.is-editing i,
.folder-edit-toggle.is-editing span {
    color: #ffffff !important;
}

.folder-edit-row {
    color: #D7DCEA;
}

.folder-edit-row i.bi-folder {
    color: #F5A623;
}

.folder-icon-btn {
    color: #9AA3B5;
    padding: 0 .25rem;
    font-size: 1.2rem;
}

.folder-icon-btn:hover {
    color: #D7DCEA;
}

.folder-delete-btn {
    color: #FF6B6B;
}

.folder-delete-btn:hover {
    color: #FF8585;
}

.folder-action-btn {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.folder-action-btn i {
    line-height: 1;
    margin: 0;
}

.folder-confirm-btn {
    --bs-btn-bg: #4F46E5;
    --bs-btn-border-color: #4F46E5;
    --bs-btn-hover-bg: #4F46E5;
    --bs-btn-hover-border-color: #4F46E5;
    --bs-btn-active-bg: #4F46E5;
    --bs-btn-active-border-color: #4F46E5;
    --bs-btn-color: #ffffff;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-color: #ffffff;
}

.folder-create-row {
    min-width: 0;
}

.folder-create-row > .folder-edit-input {
    border-radius: .5rem 0 0 .5rem !important;
}

.folder-create-row > .folder-confirm-btn {
    border-radius: 0 .5rem .5rem 0 !important;
}

.folder-edit-input {
    min-width: 0;
    flex: 1 1 0;
    height: 48px;
    background-color: #3A4454;
    color: #ffffff;
    border-color: #566174;
}

.folder-edit-input:focus {
    background-color: #3A4454;
    color: #ffffff;
    border-color: #9AA7FF;
    box-shadow: 0 0 0 .2rem rgba(154, 167, 255, .2);
}

.form-check-input:checked {
    background-color: var(--card-link-color, #4f46e5);
    border-color: var(--card-link-color-hover, #4f46e5);
}

.form-check-input {
    transform: scale(1.7);
    
}

.exam-true-false-option {
    display: inline-flex;
    align-items: center;
    gap: .875rem;
    min-height: 2.75rem;
    cursor: pointer;
}

.exam-true-false-option > .form-check-input {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    margin: 0;
    float: none;
    transform: none;
    border-radius: var(--app-control-radius);
}

.card-link{
    color: var(--card-link-color);
}

.card-link:hover{
    color: var(--card-link-color-hover);
}

.hover-border:hover {
    border-color: var(--card-border-color-hover);
}

.form-control:focus{
    border-color: var(--card-border-color-hover);
    background-color: var(--form-control-bg);
}

.form-control {
    background-color: var(--form-control-bg);
    border-color: var(--form-control-border-color);
}

.form-control.invalid,
.form-select.invalid,
.input-group .form-control.invalid {
    border-color: var(--bs-form-invalid-border-color) !important;
}

.form-control.invalid:focus,
.form-select.invalid:focus,
.input-group .form-control.invalid:focus {
    border-color: var(--bs-form-invalid-border-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}

.validation-message {
    width: 100%;
    margin-top: 0.25rem;
    color: var(--bs-form-invalid-color);
    font-size: 0.875em;
}

.school-bg-gradient {
    background: linear-gradient(135deg,
    var(--school-bg-color1),
    var(--school-bg-color2),
    var(--school-bg-color3)
    );

    border: 1px solid var(--school-border-color);
}

.company-bg-gradient {
    background: linear-gradient(135deg,
    var(--company-bg-color1),
    var(--company-bg-color2),
    var(--company-bg-color3)
    );

    border: 1px solid var(--company-border-color);
}

.border-badge {
    border-color: var(--border-badge-color) !important;
}

.btn-soft {
    background: var(--btn-soft-bg);
    color: var(--btn-soft-text);
    border-radius: 12px;
    padding: 12px 18px;
    border: 1px solid rgba(0,0,0,0.1);
}

.btn-soft:hover {
    background: var(--btn-soft-hover);
    color: var(--btn-soft-text);
}

.section-background {
    background: linear-gradient(
            to bottom right,
            var(--section-bg-1),
            var(--section-bg-2),
            var(--section-bg-3));
}

.section-background-light {
    background-color: var(--menu-bg);
}

.content-background {
    background-color: var(--content-bg);
}

.leitner-dashboard {
    width: min(100%, 92rem);
}

.leitner-dashboard-hero {
    display: flex;
    min-height: 10.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(1.35rem, 3vw, 2.5rem);
    color: var(--bs-body-color);
    background:
        radial-gradient(circle at 82% 40%, rgba(79, 70, 229, .18), transparent 32%),
        color-mix(in srgb, var(--bs-secondary-bg) 88%, var(--bs-body-bg));
    border: 1px solid var(--bs-border-color);
    border-radius: 1.4rem;
    box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .06);
}

.leitner-dashboard-heading h1 {
    margin: .8rem 0 .4rem;
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 700;
}

.leitner-dashboard-heading p {
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: clamp(1rem, 2vw, 1.25rem);
}

.leitner-dashboard-heading p strong {
    color: #6366f1;
    font-weight: 700;
}

.leitner-dashboard-back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--bs-secondary-color);
    font-size: .85rem;
    text-decoration: none;
}

.leitner-dashboard-back:hover {
    color: #6366f1;
}

.leitner-dashboard-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 1rem;
}

.leitner-dashboard-new-badge {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    gap: .55rem;
    padding: .65rem 1rem;
    color: #60a5fa;
    background: rgba(37, 99, 235, .14);
    border-radius: .85rem;
    font-weight: 600;
}

.leitner-dashboard-start {
    min-height: 3rem;
    padding-inline: 1.35rem;
    white-space: nowrap;
}

.leitner-dashboard-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.35rem 0;
}

.leitner-dashboard-stat {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    background: color-mix(in srgb, var(--bs-secondary-bg) 88%, var(--bs-body-bg));
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
}

.leitner-dashboard-stat-icon {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: #818cf8;
    background: rgba(79, 70, 229, .15);
    border-radius: .8rem;
    font-size: 1.35rem;
}

.leitner-dashboard-stat.new .leitner-dashboard-stat-icon {
    color: #60a5fa;
    background: rgba(37, 99, 235, .14);
}

.leitner-dashboard-stat.total .leitner-dashboard-stat-icon {
    color: #a78bfa;
    background: rgba(124, 58, 237, .14);
}

.leitner-dashboard-stat small,
.leitner-dashboard-stat strong {
    display: block;
}

.leitner-dashboard-stat small {
    overflow: hidden;
    color: var(--bs-secondary-color);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.leitner-dashboard-stat strong {
    margin-top: .12rem;
    font-size: 1.7rem;
    line-height: 1;
}

.leitner-dashboard-boxes {
    padding: 1.2rem;
    background: color-mix(in srgb, var(--bs-secondary-bg) 52%, transparent);
    border: 1px solid var(--bs-border-color);
    border-radius: 1.25rem;
}

@media (max-width: 767.98px) {
    .leitner-dashboard-hero {
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
        padding: 1.25rem;
        border-radius: 1rem;
    }

    .leitner-dashboard-heading h1 {
        margin-top: .55rem;
    }

    .leitner-dashboard-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
        gap: .65rem;
    }

    .leitner-dashboard-new-badge,
    .leitner-dashboard-start {
        min-height: 2.75rem;
        justify-content: center;
        padding: .55rem .7rem;
    }

    .leitner-dashboard-summary {
        gap: .45rem;
        margin: .8rem 0;
    }

    .leitner-dashboard-stat {
        flex-direction: column;
        gap: .4rem;
        padding: .7rem .35rem;
        text-align: center;
        border-radius: .75rem;
    }

    .leitner-dashboard-stat-icon {
        width: 2rem;
        height: 2rem;
        border-radius: .55rem;
        font-size: .9rem;
    }

    .leitner-dashboard-stat small {
        font-size: .52rem;
    }

    .leitner-dashboard-stat strong {
        font-size: 1.15rem;
    }

    .leitner-dashboard-boxes {
        padding: .45rem;
        border-radius: .85rem;
    }
}

.toast {
    border-radius: 0.5rem !important;
}

.toast-countdown {
    min-width: 32px;
    text-align: right;
    font-weight: 500;
}

*,
::after,
::before {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}

.menu-header-vertical{
    background-color: var(--menu-bg);
}

h4 {
    font-size: 1.2375rem;
    color: var(--bs-heading-color, inherit);
}

a {
    cursor: pointer;
    text-decoration: none;
}

li {
    list-style: none;
}

.wrapper {
    display: flex;
}

.app-shell {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
}

#sidebar {
    --sidebar-background: #090e18;
    position: relative;
    max-width: 282px;
    min-width: 282px;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    transition: all 0.35s ease-in-out;
    border-right: 1px solid rgba(148, 163, 184, .08);
    box-shadow: .8rem 0 2.5rem rgba(2, 6, 23, .22);
    background: var(--sidebar-background);
}

.sidebar-shell {
    display: flex;
    min-height: 0;
    flex-direction: column;
    background: var(--sidebar-background);
}

.h-100 {
    height: 100% !important;
}

.sidebar-logo {
    flex: 0 0 auto;
    padding: 1.75rem 1.6rem 1.15rem;
}

.sidebar-logo a {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.035em;
}

.sidebar-logo .sidebar-memocard-title {
    font-size: 1.6rem;
}

.sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0 1rem 1.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--sidebar-background);
    scrollbar-color: rgba(148, 163, 184, .22) transparent;
    scrollbar-width: thin;
}

.web-shell #sidebar {
    position: sticky;
    top: 0;
    align-self: flex-start;
}

.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(148, 163, 184, .22);
}

.main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    transition: all 0.35s ease-in-out;
    padding: .0rem 0;
}

.app-shell .main {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

/* Top Navbar */
.dashboard-navbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding: .3rem .5rem .3rem;
    min-height: 3.35rem;
    border-bottom: 1px solid rgb(0, 0, 0, 0.14);

    flex: 0 0 auto;
    position: relative;
    z-index: 1030;
}

.ios-shell .dashboard-navbar {
    padding-top: calc(.3rem + env(safe-area-inset-top));
    min-height: calc(3.35rem + env(safe-area-inset-top));
}

.android-shell .dashboard-navbar {
    padding-top: .3rem;
    min-height: 3.35rem;
}

.header-link-icon {
    color: #fff;
    font-size: 1.0rem;
}

.landing-page-header-link-icon {
    color: var(--menu-prime-color);
    font-size: 1.0rem;
}

/* Style for sidebar nav */
.sidebar-header {
    padding: 1.4rem .55rem .5rem;
    color: #6d7cff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.sidebar-header-user {
    color: #34d399;
}

.sidebar-header-administration {
    color: #f2ad47;
}

.sidebar-item + .sidebar-item {
    margin-top: .22rem;
}

a.sidebar-link {
    position: relative;
    display: flex;
    min-height: 3.25rem;
    align-items: center;
    gap: .8rem;
    padding: .4rem .55rem;
    border: 1px solid transparent;
    border-radius: .75rem;
    color: #aeb6c5;
    font-size: .91rem;
    font-weight: 400;
    cursor: pointer;
    transition:
        background-color .16s ease,
        border-color .16s ease,
        color .16s ease,
        transform .16s ease;
}

a.sidebar-link:hover,
a.sidebar-link:focus-visible {
    border-color: rgba(148, 163, 184, .09);
    background: rgba(255, 255, 255, .045);
    color: #f8fafc;
    transform: translateX(2px);
}

a.sidebar-link.active {
    border-color: rgba(99, 102, 241, .22);
    background: linear-gradient(90deg, rgba(79, 70, 229, .18), rgba(79, 70, 229, .055));
    color: #fff;
}

.sidebar-link-icon {
    display: inline-flex;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 2.35rem;
    align-items: center;
    justify-content: center;
    border-radius: .68rem;
    background: rgba(79, 70, 229, .2);
    color: #7384ff;
    font-size: 1.05rem;
    transition: background-color .16s ease, color .16s ease;
}

.sidebar-item-user .sidebar-link-icon {
    background: rgba(16, 185, 129, .16);
    color: #43d7ac;
}

.sidebar-item-admin .sidebar-link-icon {
    background: rgba(245, 158, 11, .16);
    color: #f2ad47;
}

a.sidebar-link.active .sidebar-link-icon,
a.sidebar-link:hover .sidebar-link-icon {
    background: rgba(99, 102, 241, .3);
    color: #aab4ff;
}

.sidebar-item-user a.sidebar-link.active .sidebar-link-icon,
.sidebar-item-user a.sidebar-link:hover .sidebar-link-icon {
    background: rgba(16, 185, 129, .25);
    color: #6ee7c2;
}

.sidebar-item-admin a.sidebar-link.active .sidebar-link-icon,
.sidebar-item-admin a.sidebar-link:hover .sidebar-link-icon {
    background: rgba(245, 158, 11, .25);
    color: #ffc66d;
}

.sidebar-section-parent {
    display: flex;
    min-height: 3.25rem;
    align-items: center;
    gap: .8rem;
    padding: .4rem .55rem;
    color: #d4d8e0;
    font-size: .91rem;
    font-weight: 400;
}

.sidebar-user-card {
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
    align-items: center;
    gap: .8rem;
    margin: .75rem 1rem .4rem;
    padding: .75rem .85rem;
    border: 1px solid rgba(148, 163, 184, .08);
    border-radius: .9rem;
    background: #181e29;
    box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .15);
}

.sidebar-version {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: .5rem;
    flex: 0 0 auto;
    margin: 0 1rem 1rem;
    color: #8993a4;
    font-size: .75rem;
    font-weight: 400;
    text-align: right;
}

.sidebar-powered-by {
    margin-right: auto;
    text-align: left;
}

.sidebar-user-avatar {
    display: inline-flex;
    width: 2.65rem;
    height: 2.65rem;
    flex: 0 0 2.65rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #14b8a6, #087f75);
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
}

.sidebar-user-details {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

.sidebar-user-details .sidebar-user-name,
.sidebar-user-details small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user-details .sidebar-user-name {
    color: #f8fafc;
    font-size: .83rem;
    font-weight: 400;
}

.sidebar-user-details small {
    margin-top: .12rem;
    color: #8993a4;
    font-size: .69rem;
}

.sidebar-user-name:empty {
    display: none;
}

.sidebar-user-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid transparent;
    border-radius: var(--app-control-radius, .5rem);
    color: #a6b2c2;
    text-decoration: none;
}
.sidebar-user-logout:hover,
.sidebar-user-logout:focus-visible {
    color: #c0daf4;
    background: rgba(96, 145, 194, .16);
}
.sidebar-user-logout:focus-visible {
    outline: 2px solid #8aaed4;
    outline-offset: 2px;
}
html:not([data-bs-theme="dark"]) #sidebar .sidebar-user-logout {
    color: #64748b;
}
html:not([data-bs-theme="dark"]) #sidebar .sidebar-user-logout:is(:hover, :focus-visible) {
    color: #30577f;
    background: #eaf1f8;
}

/* Light sidebar: neutral surfaces and contrasting coloured icons. */
html:not([data-bs-theme="dark"]) #sidebar {
    --sidebar-background: #f8f9fb;
    border-right-color: var(--app-light-border);
    box-shadow: none;
}

html:not([data-bs-theme="dark"]) #sidebar .sidebar-logo a {
    color: var(--app-light-text-strong);
}

html:not([data-bs-theme="dark"]) #sidebar .sidebar-header {
    color: #687386;
    font-weight: 400;
}

/* These also override the dark-theme hover/active icon colours. */
html:not([data-bs-theme="dark"]) #sidebar .sidebar-link-icon {
    color: var(--app-light-accent);
    background: var(--app-light-accent-soft);
}

html:not([data-bs-theme="dark"]) #sidebar .sidebar-item-user .sidebar-link-icon {
    color: #087f5b;
    background: var(--app-light-success-soft);
}

html:not([data-bs-theme="dark"]) #sidebar .sidebar-item-admin .sidebar-link-icon {
    color: #a35b08;
    background: var(--app-light-warning-soft);
}

html:not([data-bs-theme="dark"]) #sidebar .sidebar-section-parent,
html:not([data-bs-theme="dark"]) #sidebar a.sidebar-link {
    color: var(--app-light-text);
}

html:not([data-bs-theme="dark"]) #sidebar a.sidebar-link:hover,
html:not([data-bs-theme="dark"]) #sidebar a.sidebar-link:focus-visible {
    color: var(--app-light-text-strong);
    background: #eef0f4;
    border-color: #e2e6ed;
    transform: none;
}

html:not([data-bs-theme="dark"]) #sidebar a.sidebar-link.active {
    color: var(--app-light-accent-text);
    background: var(--app-light-accent-soft);
    border-color: var(--app-light-accent-border);
}

html:not([data-bs-theme="dark"]) #sidebar a.sidebar-link:focus-visible {
    outline: 2px solid var(--app-light-accent);
    outline-offset: 2px;
}

/* Organization navigation: neutral items, muted blue for the active destination. */
.sidebar-header-organization {
    color: #8aaed4;
}

.sidebar-item-organization .sidebar-link-icon {
    color: #a6b2c2;
    background: rgba(148, 163, 184, .12);
}

#sidebar .sidebar-item-organization a.sidebar-link:is(:hover, :focus-visible, .active) .sidebar-link-icon {
    color: #a4c8ee;
    background: rgba(96, 145, 194, .22);
}

#sidebar .sidebar-item-organization a.sidebar-link.active {
    color: #c0daf4;
    background: rgba(74, 119, 164, .2);
    border-color: rgba(138, 174, 212, .3);
}

html:not([data-bs-theme="dark"]) #sidebar .sidebar-header-organization {
    color: #426b96;
}

html:not([data-bs-theme="dark"]) #sidebar .sidebar-item-organization .sidebar-link-icon {
    color: #64748b;
    background: #eef1f5;
}

html:not([data-bs-theme="dark"]) #sidebar .sidebar-item-organization a.sidebar-link:is(:hover, :focus-visible, .active) .sidebar-link-icon {
    color: #365f88;
    background: #dce8f4;
}

html:not([data-bs-theme="dark"]) #sidebar .sidebar-item-organization a.sidebar-link.active {
    color: #30577f;
    background: #eaf1f8;
    border-color: #c4d6e8;
}

html:not([data-bs-theme="dark"]) #sidebar .sidebar-user-card {
    background: var(--app-light-surface);
    border-color: var(--app-light-border);
    box-shadow: none;
}

html:not([data-bs-theme="dark"]) #sidebar .sidebar-user-details .sidebar-user-name {
    color: var(--app-light-text-strong);
}

html:not([data-bs-theme="dark"]) #sidebar .sidebar-user-details small,
html:not([data-bs-theme="dark"]) #sidebar .sidebar-version {
    color: #687386;
}

.ios-shell #sidebar .sidebar-logo {
    padding-top: calc(1.75rem + env(safe-area-inset-top));
}

.ios-shell #sidebar .sidebar-version {
    margin-bottom: calc(1rem + env(safe-area-inset-bottom));
}

/* Sidebar collapsed */
#sidebar.collapsed {
    margin-left: -282px;
}

/* Dashboard content */
.content {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    width: 100%;
}

.app-shell .content {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.sidebar-close {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 3;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--bs-body-color);
    font-size: 2rem;
}

.ios-shell .sidebar-close {
    top: calc(.5rem + env(safe-area-inset-top));
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    border: 0;
    background: rgba(0, 0, 0, .45);
}

@media (max-width: 767.98px) {
    .sidebar-logo {
        padding-right: 3.5rem;
    }

    .wrapper #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 282px;
        height: 100vh;
        height: 100dvh;
        margin-left: -282px;
        transition: margin-left 0.35s ease-in-out;
        z-index: 1045;
        visibility: hidden;
    }

    
    #sidebar {
        box-shadow: 0 0 1px 0 rgba(48, 57, 66, 0.6);
    }
    
    .wrapper #sidebar.collapsed {
        margin-left: -282px;
    }

    .wrapper #sidebar.mobile-open {
        margin-left: 0;
        visibility: visible;
    }

    .main {
        margin-left: 0;
        width: 100%;
    }

    .toggle-btn {
        display: inline-block; 
    }
}

/* Short app viewports (phones in landscape) retain the mobile drawer. */
@media (min-width: 768px) and (max-height: 575.98px) {
    .app-shell #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 282px;
        height: 100vh;
        height: 100dvh;
        margin-left: -282px;
        transition: margin-left 0.35s ease-in-out;
        z-index: 1045;
        visibility: hidden;
    }

    .app-shell #sidebar.mobile-open {
        margin-left: 0;
        visibility: visible;
    }

    .app-shell .main {
        margin-left: 0;
        width: 100%;
    }

    .app-shell .sidebar-logo {
        padding-right: 3.5rem;
    }

    .app-shell .sidebar-desktop-toggle {
        display: none !important;
    }

    .app-shell .sidebar-mobile-toggle,
    .app-shell .sidebar-close,
    .app-shell .sidebar-backdrop {
        display: inline-block !important;
    }
}

/* landing Page */

h1:focus,
h1:focus-visible {
    outline: none;
}

.batch-icon-background {
    background: linear-gradient(to right, #4f46e5, #9333ea);
    width:50px; 
    height:50px;
    border-radius: 1rem;
}

.batch-icon-background-blue {
    background: linear-gradient(to right, #3b82f6, #06b6d4);
    width:50px;
    height:50px;
    border-radius: 1rem;
}

.batch-icon-background-purple {
    background: linear-gradient(to right, #8b5cf6, #f472b6);
    width:50px;
    height:50px;
    border-radius: 1rem;
}

.batch-icon-background-orange {
    background: linear-gradient(to right, #f97316, #ef4444);
    width:50px;
    height:50px;
    border-radius: 1rem;
}

.batch-icon-background-green {
    background: linear-gradient(to right, #10b981, #14b8a6);
    width:50px;
    height:50px;
    border-radius: 1rem;
}

.batch-icon-background-glow {
    background: linear-gradient(to right, #6366f1, #8b5cf6);
    width:50px;
    height:50px;
    border-radius: 1rem;
}

.batch-icon-background-rose {
    background: linear-gradient(to right, #ec4899, #f43f5e);
    width:50px;
    height:50px;
    border-radius: 1rem;
}

.mc-icon-bubble{
    width: 96px;
    height: 96px;
    background: linear-gradient(90deg,#4f46e5,#7c3aed);
    box-shadow: 0 25px 60px rgba(79,70,229,.28);
}

.mc-icon-bubble i {
    font-size: 35px; color: white}

@media (min-width:576px){
    .mc-icon-bubble{ width: 128px; height: 128px; }
    .mc-icon-bubble i { font-size: 48px;}
}

.batch-icon-background i,
.batch-icon-background-rose i,
.batch-icon-background-glow i,
.batch-icon-background-green i,
.batch-icon-background-orange i,
.batch-icon-background-purple i,
.batch-icon-background-blue i {
    font-size: 24px; color: white
}

.step-badge {
    top: -0.75rem;
    left: -0.75rem;
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(to right, #4f46e5, #7c3aed); /* indigo → purple */
    border-radius: 50%;
}

.section-title {
    background: linear-gradient(to right, #4f46e5, #9333ea, #ec4899);
    -webkit-background-clip: text;
    color: transparent;
}

.section-gradient-button{
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
    height: 3rem;
    background: linear-gradient(to right, #4f46e5, #9333ea);
    color: #fff;
    border: none;
    box-shadow: 0 10px 25px rgba(79, 70, 229, 0.3);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.section-gradient-button:hover:not(:disabled):not(.disabled) {
    filter: brightness(1.08);
}

.section-gradient-button:focus-visible {
    outline: 3px solid var(--bs-body-color);
    outline-offset: 4px;
}

.section-gradient-button:active:not(:disabled):not(.disabled) {
    filter: brightness(.95);
}

.ready-to-transform-section {
    background: linear-gradient(to right, #4f46e5, #9333ea, #ec4899);
    z-index: 0;
}

/* Tailwind-like text opacity helpers */
.text-white-60 { color: rgba(255,255,255,0.60); }

[data-default-header-styles="gradient"] {
    /* semi-transparent gradient using rgba; end color uses the existing --primary-color RGB */
    --header-bg: linear-gradient(
            to right,
            rgba(71, 118, 230, 0.9) 0%,
            rgba(142, 84, 233, 0.85) 100%
    );
    --header-border-color: rgba(255, 255, 255, 0.1);
    --header-prime-color: rgba(255, 255, 255, 0.85);
    --header-bg-subtle: linear-gradient(
            to right,
            rgba(71, 118, 230, 0.12) 0%,
            rgba(142, 84, 233, 0.12) 100%
    ); /* lighter for inline elements like links */
}

/* Apply gradient to navbar and any DIV with the attribute */
[data-default-header-styles="gradient"].navbar,
div[data-default-header-styles="gradient"] {
    background: var(--header-bg) !important;
    border-bottom: 1px solid var(--header-border-color);
    color: var(--header-prime-color);
    /* slight overall transparency (keeps children opaque) */
    background-clip: padding-box;
}

/* Slightly transparent background for anchor elements (keeps text readable) */
a[data-default-header-styles="gradient"]:not(.dropdown-item),
[data-default-header-styles="gradient"] a:not(.dropdown-item) {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background: var(--header-bg-subtle);
    color: var(--header-prime-color) !important;
    text-decoration: none;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.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: "An error has occurred."
}

/* Not Found Page */
.mc-404-text{
    font-size: clamp(4.5rem, 9vw, 7.5rem);
    background: linear-gradient(90deg,#4f46e5,#7c3aed,#ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.03em;
}

.app-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--form-control-border-color) transparent;
}

.app-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.app-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.app-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--form-control-border-color);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.app-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--card-border-color-hover);
}
.leitner-box-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(.45rem, 1vw, .9rem);
    padding: .25rem 0;
}

.leitner-box-card {
    --leitner-accent: #ff5c75;
    display: flex;
    min-width: 0;
    min-height: 12rem;
    flex-direction: column;
    align-items: stretch;
    gap: .42rem;
    padding: .85rem;
    color: var(--bs-body-color);
    text-align: left;
    background: color-mix(in srgb, var(--bs-secondary-bg) 78%, var(--bs-body-bg));
    border: 1px solid var(--bs-border-color);
    border-top: 3px solid var(--leitner-accent);
    border-radius: .85rem;
    box-shadow: 0 .35rem .9rem rgba(0, 0, 0, .06);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.leitner-box-card:nth-child(2) { --leitner-accent: #ffb511; }
.leitner-box-card:nth-child(3) { --leitner-accent: #24c9a9; }
.leitner-box-card:nth-child(4) { --leitner-accent: #22b7df; }
.leitner-box-card:nth-child(5) { --leitner-accent: #8066ee; }

.leitner-box-card:not(:disabled):hover {
    color: var(--bs-body-color);
    border-color: color-mix(in srgb, var(--leitner-accent) 65%, var(--bs-border-color));
    box-shadow: 0 .65rem 1.25rem color-mix(in srgb, var(--leitner-accent) 13%, transparent);
    transform: translateY(-3px);
}

.leitner-box-card.is-selected {
    border-right-color: color-mix(in srgb, var(--leitner-accent) 55%, var(--bs-border-color));
    border-bottom-color: color-mix(in srgb, var(--leitner-accent) 55%, var(--bs-border-color));
    border-left-color: color-mix(in srgb, var(--leitner-accent) 55%, var(--bs-border-color));
    box-shadow: 0 0 0 .16rem color-mix(in srgb, var(--leitner-accent) 14%, transparent);
}

.leitner-box-card:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--leitner-accent) 40%, transparent);
    outline-offset: 2px;
}

.leitner-box-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: .25rem;
}

.leitner-box-number {
    flex: 1 1 auto;
    overflow: hidden;
    color: var(--bs-secondary-color);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leitner-box-stage {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    color: #fff;
    background: var(--leitner-accent);
    font-size: .9rem;
    font-weight: 700;
    border-radius: .65rem;
    box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .08);
}

.leitner-box-total {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .25rem;
    color: var(--bs-secondary-color);
    font-size: .75rem;
}

.leitner-box-count {
    color: var(--bs-body-color);
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1;
}

.leitner-box-occupancy {
    display: block;
    height: .38rem;
    overflow: hidden;
    background: color-mix(in srgb, var(--bs-secondary-color) 22%, transparent);
    border-radius: 999px;
}

.leitner-box-fill {
    display: block;
    width: var(--leitner-fill);
    height: 100%;
    background: var(--leitner-accent);
    border-radius: inherit;
    transition: width .25s ease;
}

.leitner-box-occupancy-summary {
    display: flex;
    justify-content: space-between;
    gap: .35rem;
    color: var(--bs-secondary-color);
    font-size: .68rem;
    font-weight: 400;
}

.leitner-box-details {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .15rem;
}

.leitner-box-detail {
    display: inline-flex;
    min-width: 2.65rem;
    align-items: center;
    justify-content: center;
    gap: .28rem;
    padding: .3rem .45rem;
    font-size: .7rem;
    font-weight: 400;
    border-radius: .55rem;
}

.leitner-box-detail.is-due {
    color: color-mix(in srgb, #ff707c 88%, var(--bs-body-color));
    background: color-mix(in srgb, #dc3545 24%, transparent);
}

.leitner-box-detail.is-new {
    color: color-mix(in srgb, #74a6ff 88%, var(--bs-body-color));
    background: color-mix(in srgb, #2463d4 24%, transparent);
}

.leitner-box-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    margin-top: auto;
    padding-top: .55rem;
    color: var(--bs-secondary-color);
    font-size: .68rem;
    font-weight: 400;
    border-top: 1px solid var(--bs-border-color);
}

.leitner-box-footer > span {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: .25rem;
    white-space: nowrap;
}

.leitner-box-interval {
    color: var(--leitner-accent);
}

.learning-session-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

.learning-session-toolbar > .btn {
    justify-self: start;
}

.learning-session-card-set-name {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 400;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.learning-session-progress {
    justify-self: end;
    white-space: nowrap;
}

.learning-session-leitner {
    padding: .2rem 0;
}

.learning-session-progress-summary {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
}

.learning-session-track-progress {
    height: .32rem;
    overflow: hidden;
    background-color: var(--bs-secondary-bg);
}

.learning-session-track-progress.is-integrated {
    position: absolute;
    inset: 0 0 auto;
}

.learning-session-track-progress-value {
    height: 100%;
    background-color: var(--bs-primary);
    border-radius: inherit;
    transition: width .25s ease-in-out;
}

.learning-session-summary-statistics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: .72rem 0 .58rem 1rem;
}

.learning-session-progress-summary > .learning-session-summary-statistics {
    padding-right: 1rem;
}

.leitner-pool-header {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding-right: .55rem;
}

.leitner-pool-toggle {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    color: var(--bs-secondary-color);
    background: transparent;
    border: 1px solid transparent;
    border-radius: .55rem;
}

.leitner-pool-toggle:hover {
    color: var(--bs-body-color);
    background: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}

.leitner-pool-toggle:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--bs-primary) 35%, transparent);
    outline-offset: 1px;
}

.leitner-pool-boxes {
    padding: .72rem .75rem .75rem;
    border-top: 1px solid var(--bs-border-color);
}

.learning-session-summary-stat {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: center;
    gap: .25rem;
    font-size: .875rem;
    white-space: nowrap;
}

.learning-session-summary-stat:first-child {
    justify-content: flex-start;
}

.learning-session-summary-stat:last-child {
    justify-content: flex-end;
}

.leitner-overview.is-compact .leitner-box-strip {
    gap: clamp(.3rem, .8vw, .65rem);
    padding: 0;
}

.leitner-overview.is-compact .leitner-box-card {
    min-height: 7.25rem;
    gap: .42rem;
    padding: .58rem .62rem .52rem;
    border-top-width: 1px;
    border-radius: .75rem;
    box-shadow: 0 .25rem .7rem rgba(0, 0, 0, .05);
}

.leitner-overview.is-compact .leitner-box-number {
    font-size: .64rem;
}

.leitner-overview.is-compact .leitner-box-stage {
    width: 1.7rem;
    height: 1.7rem;
    font-size: .72rem;
    border-radius: var(--app-control-radius);
}

.leitner-overview.is-compact .leitner-box-count {
    font-size: .72rem;
    font-weight: 400;
}

.leitner-overview.is-compact .leitner-box-total,
.leitner-overview.is-compact .leitner-box-occupancy-summary,
.leitner-overview.is-compact .leitner-box-footer {
    font-size: .62rem;
}

.leitner-overview.is-compact .leitner-box-occupancy {
    height: .32rem;
}

.leitner-overview.is-compact .leitner-box-details {
    flex-wrap: nowrap;
    gap: .28rem;
    margin-top: 0;
}

.leitner-overview.is-compact .leitner-box-detail {
    min-width: 2.4rem;
    gap: .22rem;
    padding: .2rem .34rem;
    font-size: .6rem;
    font-weight: 400;
}

.leitner-overview.is-compact .leitner-box-footer {
    padding-top: .35rem;
}

@media (max-width: 767.98px) {
    .leitner-box-strip {
        gap: .3rem;
        padding-inline: 0;
    }

    .leitner-box-card {
        min-height: 10rem;
        gap: .3rem;
        padding: .5rem;
    }

    .leitner-box-number {
        font-size: .68rem;
    }

    .leitner-box-stage {
        width: 1.45rem;
        height: 1.45rem;
        font-size: .68rem;
    }

    .leitner-box-count {
        font-size: .9rem;
    }

    .leitner-box-total,
    .leitner-box-occupancy-summary,
    .leitner-box-footer {
        font-size: .55rem;
    }

    .leitner-box-details {
        gap: .15rem;
    }

    .leitner-box-detail {
        min-width: 0;
        padding: .18rem .25rem;
        font-size: .56rem;
    }

    .learning-session-leitner {
        padding: .15rem 0;
    }

    .leitner-overview.is-compact .leitner-box-card {
        min-height: 6.25rem;
        gap: .28rem;
        padding: .38rem .32rem;
    }

    .leitner-overview.is-compact .leitner-box-count {
        font-size: .76rem;
    }

    .leitner-overview.is-compact .leitner-box-total,
    .leitner-overview.is-compact .leitner-box-occupancy-summary,
    .leitner-overview.is-compact .leitner-box-footer,
    .leitner-overview.is-compact .leitner-box-detail {
        font-size: .52rem;
    }
}

@media (max-width: 575.98px) {
    .learning-session-summary-statistics {
        gap: .35rem;
        padding-left: .55rem;
    }

    .learning-session-progress-summary > .learning-session-summary-statistics {
        padding-right: .55rem;
    }

    .leitner-pool-header {
        gap: .1rem;
        padding-right: .3rem;
    }

    .leitner-pool-toggle {
        width: 1.75rem;
        height: 1.75rem;
    }

    .leitner-pool-boxes {
        padding: .45rem .35rem .5rem;
    }

    .learning-session-summary-stat {
        flex-direction: column;
        align-items: center;
        gap: 0;
        font-size: .7rem;
        line-height: 1.25;
        white-space: normal;
        text-align: center;
    }

    .learning-session-summary-stat:first-child,
    .learning-session-summary-stat:last-child {
        align-items: center;
        justify-content: center;
    }

    .learning-session-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .6rem;
    }

    .learning-session-card-set-name {
        grid-column: 1 / -1;
        grid-row: 2;
        font-size: 1rem;
    }

    .learning-session-progress {
        grid-column: 2;
        grid-row: 1;
        font-size: .8rem;
    }
}

.app-shell .learning-session-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .6rem;
}

.app-shell .learning-session-card-set-name {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
}

.app-shell .learning-session-progress {
    grid-column: 2;
    grid-row: 1;
}

/* Prevent background scrolling while the Blazor card set picker is open. */
body:has(.organization-card-set-picker),
body:has(.organization-member-picker) { overflow: hidden; }

/* Exam setup: reserve real space for controls instead of scaling them. */
.exam-start-dialog {
    border-radius: var(--app-control-radius);
}

.exam-start-dialog .modal-header,
.exam-start-dialog .modal-footer {
    padding: .75rem 1rem;
}

.exam-start-dialog .form-control,
.exam-start-dialog .form-select {
    border-radius: var(--app-control-radius);
}

.exam-start-dialog .form-label {
    margin-bottom: .375rem;
}

.exam-start-dialog .form-check-input {
    transform: none;
}

.exam-mode-options {
    display: grid;
    gap: .5rem;
}

.exam-mode-option {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    column-gap: .5rem;
    cursor: pointer;
}

.exam-mode-option > .form-check-input {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    float: none;
    margin: 0 !important;
    width: 1.125rem;
    height: 1.125rem;
}

.exam-mode-option > span {
    grid-column: 2;
    margin-left: 0 !important;
}

.exam-switch {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    column-gap: .75rem;
    row-gap: .125rem;
    padding-left: 0;
    min-height: 2.75rem;
}

.exam-switch > .form-check-input {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    float: none;
    margin: 0;
    width: 2.75rem;
    height: 1.5rem;
    cursor: pointer;
}

.exam-switch > .form-check-label {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    cursor: pointer;
}

.exam-switch > .form-text {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
    line-height: 1.4;
}

@media (min-width: 576px) {
    .exam-mode-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

body:has(.audience-example-modal) { overflow: hidden; }

body:has(.learning-modes-modal) { overflow: hidden; }

/* Shared light palette for application pages, including organization management.
   Marketing sections do not use content-background. */
html:not([data-bs-theme="dark"]) .content-background {
    --bs-border-color: var(--app-light-border);
    --bs-border-color-translucent: var(--app-light-border);
    --bs-box-shadow-sm: 0 .15rem .5rem rgba(30, 41, 59, .04);
}

html:not([data-bs-theme="dark"]) :is(.content-background, .modal) .btn.app-secondary-action {
    color: var(--app-light-text);
    background-color: var(--app-light-surface-muted);
    border-color: var(--app-light-border);
}

html:not([data-bs-theme="dark"]) :is(.content-background, .modal) .btn.app-secondary-action:hover,
html:not([data-bs-theme="dark"]) :is(.content-background, .modal) .btn.app-secondary-action:focus,
html:not([data-bs-theme="dark"]) :is(.content-background, .modal) .btn.app-secondary-action:active,
html:not([data-bs-theme="dark"]) :is(.content-background, .modal) .btn.app-secondary-action.show {
    color: var(--app-light-text-strong);
    background-color: var(--app-light-surface-hover);
    border-color: var(--app-light-input-border);
}

html:not([data-bs-theme="dark"]) :is(.content-background, .modal) .btn:focus-visible {
    outline: 2px solid var(--app-light-accent) !important;
    outline-offset: 2px;
}

html:not([data-bs-theme="dark"]) .content-background .card {
    --bs-card-bg: var(--app-light-surface);
    --bs-card-border-color: var(--app-light-border);
}

html:not([data-bs-theme="dark"]) .content-background .list-group {
    --bs-list-group-bg: var(--app-light-surface);
    --bs-list-group-border-color: var(--app-light-border);
}

html:not([data-bs-theme="dark"]) .content-background .table {
    --bs-table-bg: var(--app-light-surface);
    --bs-table-border-color: var(--app-light-border);
}

html:not([data-bs-theme="dark"]) .content-background .table thead {
    --bs-table-bg: var(--app-light-surface-muted);
    --bs-table-color: var(--app-light-text);
}

html:not([data-bs-theme="dark"]) .content-background .badge.category-pill,
html:not([data-bs-theme="dark"]) .content-background .badge.card-set-visibility,
html:not([data-bs-theme="dark"]) .content-background .badge.text-bg-secondary {
    color: var(--app-light-text) !important;
    background-color: var(--app-light-surface-muted) !important;
}

html:not([data-bs-theme="dark"]) .content-background .badge.text-bg-primary {
    color: var(--app-light-accent-text) !important;
    background-color: var(--app-light-accent-soft) !important;
}

html:not([data-bs-theme="dark"]) .content-background .badge.text-bg-warning {
    color: var(--app-light-warning-text) !important;
    background-color: var(--app-light-warning-soft) !important;
}

html:not([data-bs-theme="dark"]) .content-background .badge.text-bg-success {
    color: var(--app-light-success-text) !important;
    background-color: var(--app-light-success-soft) !important;
}

html:not([data-bs-theme="dark"]) .content-background .card-set-tabs .nav-link.card-set-tab:not(.active) {
    color: var(--app-light-nav-text);
}

html:not([data-bs-theme="dark"]) .content-background .card-set-tabs .nav-link.card-set-tab:not(.active):hover,
html:not([data-bs-theme="dark"]) .content-background .card-set-tabs .nav-link.card-set-tab:not(.active):focus {
    color: var(--app-light-text-strong);
    background-color: var(--app-light-surface-muted);
}

html:not([data-bs-theme="dark"]) .content-background .form-control:not(.invalid):not(.is-invalid),
html:not([data-bs-theme="dark"]) .content-background .form-select:not(.invalid):not(.is-invalid) {
    border-color: var(--app-light-input-border);
}

html:not([data-bs-theme="dark"]) .content-background .form-control:not(.invalid):not(.is-invalid):focus,
html:not([data-bs-theme="dark"]) .content-background .form-select:not(.invalid):not(.is-invalid):focus {
    border-color: var(--app-light-input-focus);
    box-shadow: 0 0 0 .2rem var(--app-light-focus-ring);
}

html:not([data-bs-theme="dark"]) .content-background .card-set-paused-count,
html:not([data-bs-theme="dark"]) .content-background .trent-warning {
    color: var(--app-light-warning-strong);
}

html:not([data-bs-theme="dark"]) .content-background .trent-success {
    color: var(--app-light-success-text);
}

/* Personal learning-group-specific refinements. */

html:not([data-bs-theme="dark"]) .learning-groups-page .badge.text-bg-warning {
    border-radius: var(--app-control-radius);
    font-weight: 400;
}

html:not([data-bs-theme="dark"]) .learning-groups-page .badge.text-bg-primary,
html:not([data-bs-theme="dark"]) .learning-groups-page .badge.text-bg-secondary,
html:not([data-bs-theme="dark"]) .learning-groups-page .badge.card-set-visibility,
html:not([data-bs-theme="dark"]) .learning-groups-page .badge.category-pill {
    color: var(--app-light-text) !important;
    background-color: var(--app-light-surface-muted) !important;
    border-radius: var(--app-control-radius);
    font-weight: 400;
}

html:not([data-bs-theme="dark"]) .learning-groups-page .card-set-tabs .nav-link.card-set-tab:focus-visible {
    outline: 2px solid var(--app-light-accent);
    outline-offset: 2px;
}

html:not([data-bs-theme="dark"]) .learning-groups-page .learning-group-role-filter .app-primary-action {
    color: var(--app-light-accent-text);
    background-color: var(--app-light-accent-soft);
    border-color: var(--app-light-accent-border);
    --bs-btn-bg: var(--app-light-accent-soft);
    --bs-btn-border-color: var(--app-light-accent-border);
    --bs-btn-color: var(--app-light-accent-text);
    --bs-btn-hover-bg: var(--app-light-accent-hover);
    --bs-btn-hover-border-color: var(--app-light-accent-hover-border);
    --bs-btn-hover-color: var(--app-light-accent-text);
    --bs-btn-active-bg: var(--app-light-accent-hover);
    --bs-btn-active-border-color: var(--app-light-accent-hover-border);
    --bs-btn-active-color: var(--app-light-accent-text);
}

html:not([data-bs-theme="dark"]) .learning-groups-page .learning-group-role-filter .app-primary-action:hover,
html:not([data-bs-theme="dark"]) .learning-groups-page .learning-group-role-filter .app-primary-action:focus,
html:not([data-bs-theme="dark"]) .learning-groups-page .learning-group-role-filter .app-primary-action:active {
    color: var(--app-light-accent-text);
    background-color: var(--app-light-accent-hover);
    border-color: var(--app-light-accent-hover-border);
}

html:not([data-bs-theme="dark"]) .learning-groups-page .learning-group-role-filter .btn:focus-visible {
    outline: 2px solid var(--app-light-accent) !important;
    outline-offset: 2px;
}

html:not([data-bs-theme="dark"]) .learning-groups-page .form-control::placeholder {
    color: var(--app-light-placeholder);
    opacity: 1;
}

/* Organization branding is data-driven and scoped; personal accounts have no data-branding attribute. */
.organization-brand-scope { display: contents; }
.organization-brand-logo { max-width: 8rem; max-height: 2.75rem; object-fit: contain; }
.organization-brand-name { overflow-wrap: anywhere; }
.brand-logo-dark { display: none; }
html[data-bs-theme="dark"] .brand-logo-light { display: none; }
html[data-bs-theme="dark"] .brand-logo-dark { display: inline-block; }
.organization-brand-scope[data-branding] #sidebar .sidebar-logo {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
}
.organization-brand-scope[data-branding] #sidebar .sidebar-logo a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    text-align: center;
}
.organization-brand-scope[data-branding] #sidebar .organization-brand-logo {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 6rem;
    object-fit: contain;
}
.organization-brand-scope[data-branding] .btn.app-primary-action,
.organization-brand-scope[data-branding] .btn-primary {
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-color: var(--brand-on-primary);
    --bs-btn-hover-bg: var(--brand-hover);
    --bs-btn-hover-border-color: var(--brand-hover);
    --bs-btn-hover-color: var(--brand-on-hover);
    --bs-btn-active-bg: var(--brand-hover);
    --bs-btn-active-border-color: var(--brand-hover);
    --bs-btn-active-color: var(--brand-on-hover);
    --bs-btn-disabled-bg: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
    --bs-btn-disabled-color: var(--brand-on-primary);
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-on-primary);
}
.organization-brand-scope[data-branding] .btn.app-primary-action:is(:hover,:focus,:active,.show),
.organization-brand-scope[data-branding] .btn-primary:is(:hover,:focus,:active,.show) {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
    color: var(--brand-on-hover);
}
.organization-brand-scope[data-branding] .card-set-tabs .nav-link.card-set-tab.active,
.organization-brand-scope[data-branding] .top-navbar-dropdown .dropdown-item.active,
.organization-brand-scope[data-branding] .top-navbar-modal .dropdown-item.active {
    background: var(--brand-primary);
    color: var(--brand-on-primary);
}
.organization-brand-scope[data-branding] #sidebar a.sidebar-link.active {
    color: var(--brand-text);
    background: var(--brand-soft);
    border-color: var(--brand-soft);
}
.organization-brand-scope[data-branding] #sidebar .sidebar-item-main .sidebar-link-icon {
    color: var(--brand-text);
    background: var(--brand-soft);
}
html[data-bs-theme="dark"] .organization-brand-scope[data-branding] #sidebar a.sidebar-link.active,
html[data-bs-theme="dark"] .organization-brand-scope[data-branding] #sidebar .sidebar-item-main .sidebar-link-icon {
    color: var(--brand-dark-text);
    background: var(--brand-dark-soft);
}
.organization-brand-scope[data-branding] .dashboard-navbar[data-default-header-styles="gradient"] {
    background: var(--brand-primary) !important;
    --header-prime-color: var(--brand-on-primary);
}
.organization-brand-scope[data-branding] .dashboard-navbar .header-link-icon {
    color: var(--brand-on-primary);
}
.organization-brand-scope[data-branding] .auth-wrapper {
    background: linear-gradient(135deg, var(--brand-soft), var(--bs-body-bg));
}
html[data-bs-theme="dark"] .organization-brand-scope[data-branding] .auth-wrapper {
    background: linear-gradient(135deg, var(--brand-dark-soft), var(--bs-body-bg));
}
.organization-brand-scope[data-branding] .form-check-input:checked {
    background-color: var(--brand-control);
    border-color: var(--brand-control);
}
/* Keep keyboard focus visible for organisation form controls. */
.organization-brand-scope[data-branding] .form-check-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--brand-primary-rgb), .2);
}

/* Optional organization-wide icon palette, including hover and active states. */
.organization-brand-scope[data-branding][data-sidebar-icons="custom"] #sidebar .sidebar-link-icon {
    color: var(--brand-sidebar-icon);
    background: var(--brand-sidebar-icon-bg);
}
html[data-bs-theme="dark"] .organization-brand-scope[data-branding][data-sidebar-icons="custom"] #sidebar .sidebar-link-icon {
    color: var(--brand-sidebar-icon-dark);
    background: var(--brand-sidebar-icon-dark-bg);
}