.remove-elective-subject {
    position: absolute;
    right: 20px;
    margin-top: 3px;
}

#external-events {
    z-index: 2;
    width: 150px;
    padding: 0 10px;
    border: 1px solid #ccc;
    background: #eee;
}

#external-events .fc-event {
    cursor: move;
    margin: 3px 0;
    height: 45px;
    display: flex;
    align-items: center;
    padding-left: 10px;
}

.fc-customButton-button {
    font-size: 13px !important;
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateY(-50%);
}

#delete-modal .modal-footer > .btn {
    border-radius: 3px !important;
    padding: 0 8px !important;
    font-size: 15px;
}

.fc-scroller {
    overflow-y: hidden !important;
}

.context-menu {
    position: absolute;
    z-index: 1000;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
    padding: 5px;
}

.context-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.context-menu ul > li {
    display: block;
    padding: 5px 15px;
    list-style-type: none;
    color: #333;
    cursor: pointer;
    margin: 0 auto;
    transition: 0.1s;
    font-size: 13px;
}

.context-menu ul > li:hover {
    color: #fff;
    background-color: #007bff;
    border-radius: 2px;
}

/*.fa, .fas {*/
/*    font-size: 13px;*/
/*    margin-right: 4px;*/
/*}*/

.no-header-toolbar .fc-header-toolbar.fc-toolbar {
    margin-top: 0;
    margin-bottom: 0;
}

.fc-h-event {
    border: none;
}

.remove-timetable {
    padding: 2px 3px;
}

.remove-timetable:hover {
    background: white;
    color: black;
    border-radius: 10px;
}

label.filter-menu {
    font-size: 13px;
    color: #7c7c7c;
    font-weight: 500;
    position: absolute;
    top: -18px;
    margin-left: 5px;
    padding: 0 5px;
    z-index: 10;
    border-radius: 20px;
}

.fixed-table-toolbar #toolbar .form-control {
    max-width: 250px;
}

.w-fit-content {
    width: fit-content;
}

/* Select2: see unified “Select2 — theme” block at end of this file. */

.asColorPicker-alpha {
    display: none;
}

.remove-number-increment::-webkit-inner-spin-button,
.remove-number-increment::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.total_paidable_amount {
    background-color: lightgray;
}

.image-tile img {
    height: 200px;
    object-fit: cover;
}

.text-wrap div {
    white-space: normal !important;
}

.package-type-badge {
    position: absolute;
    left: auto;
    right: -2px;
    clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 14% 52%, 0% 0%);
    width: 130px;
    height: 38px;
    top: 8px;
    color: white !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.postpaid-color {
    background: var(--primary-color);
}

.prepaid-color {
    background: var(--secondary-color);
}

.addon-border-primary {
    overflow: hidden;
}

.addon-ribbon {
    font: bold 15px sans-serif;
    color: #333;
    text-align: center;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: absolute;
    padding: 7px 0;
    top: 15px;
    left: -30px;
    width: 120px;
    background-color: #ff0000;
    color: #fff;
}

.student-id-card-demo {
    position: fixed;
    width: -webkit-fill-available;
    margin-right: 20px;
}

.action-column-dropdown-menu {
    left: -2rem !important;
}

.dropdown .dropdown-menu .dropdown-item:hover {
    background-color: #007bff !important;
    color: #fff !important;
}

.payment-card-container {
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
    background-color: var(--bg-light);
    min-height: 80vh;
}

.payment-card {
    background: white;
    width: 100%;
    max-width: 700px;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header */
.payment-header {
    background-color: var(--header-bg);
    color: var(--header-text);
    padding: 2rem;
    text-align: center;
    position: relative;
}

.payment-header h4 {
    font-weight: 700;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.payment-header p {
    margin: 0;
    opacity: 0.9;
    font-size: 0.95rem;
}

.back-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: white;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.back-btn:hover {
    opacity: 1;
    color: white;
}

/* Body */
.payment-body {
    padding: 2rem;
}

.form-section-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6c757d;
    font-weight: 600;
    margin-bottom: 1rem;
    display: block;
}

/* Interactive Fee Row */
.fee-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.fee-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    margin-bottom: 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-speed);
    opacity: 1;
}

.fee-item:hover {
    background-color: #f8f9fa;
    border-color: var(--primary-color);
}

.fee-item.selected {
    background-color: #f0f2ff;
    border-color: var(--primary-color);
}

.fee-item.fade-out {
    opacity: 0;
    transform: translateX(-20px);
    pointer-events: none;
}

.fee-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.fee-name {
    font-weight: 600;
    color: #374151;
}

.fee-price {
    font-weight: 700;
    color: #111827;
    font-size: 1.1rem;
}

/* Checkbox styling */
.custom-checkbox {
    width: 20px;
    height: 20px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

/* Remove Button Styling */
.remove-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    transition: all 0.2s;
    background: transparent;
    border: none;
}

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

.remove-btn i {
    transition: transform 0.2s;
}

.remove-btn:hover i {
    transform: scale(1.1);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 2rem;
    color: #9ca3af;
    border: 2px dashed #e5e7eb;
    border-radius: 8px;
    display: none;
    /* Hidden by default */
}

/* Payment Mode Tiles */
.mode-selection {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.mode-tile {
    flex: 1;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.mode-tile input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
}

.mode-tile.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(75, 73, 172, 0.3);
}

.mode-tile span {
    font-weight: 600;
    display: block;
}

/* Inputs */
.form-control-custom {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    transition: border-color 0.2s;
}

.form-control-custom:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(75, 73, 172, 0.1);
}

/* Pay Button */
.btn-pay {
    width: 100%;
    padding: 1rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition:
        transform 0.1s,
        box-shadow 0.1s;
}

.btn-pay:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-pay:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.btn-pay:not(:disabled):active {
    transform: translateY(0);
}

/* Total Section */
.total-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--primary-color);
}

.total-label {
    font-weight: 600;
    color: #6b7280;
}

.total-amount {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary-color);
}

/* ============================================
   SIDEBAR STYLES (moved from sidebar.blade.php)
   ============================================ */
:root {
    --primary-color-sidebar: var(--primary, #22577a);
    --sb-bg: #ffffff;
    --sb-bg-soft: #f8fafc;
    --sb-text: #1f2937;
    --sb-text-muted: #64748b;
    --sb-text-dim: #94a3b8;

    --sb-hover-bg: color-mix(in srgb, var(--primary-color-sidebar) 6%, transparent);
    --sb-hover-bg-strong: color-mix(in srgb, var(--primary-color-sidebar) 10%, transparent);
    --sb-active-bg: color-mix(in srgb, var(--primary-color-sidebar) 12%, transparent);
    --sb-active-strong: color-mix(in srgb, var(--primary-color-sidebar) 18%, transparent);
    --sb-active-gradient: linear-gradient(
        135deg,
        color-mix(in srgb, var(--primary-color-sidebar) 16%, transparent) 0%,
        color-mix(in srgb, var(--primary-color-sidebar) 8%, transparent) 100%
    );

    --sb-guide: rgba(15, 23, 42, 0.08);
    --sb-guide-strong: color-mix(in srgb, var(--primary-color-sidebar) 45%, transparent);
    --sb-border: rgba(15, 23, 42, 0.06);
    --sb-border-soft: rgba(15, 23, 42, 0.04);

    --sb-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --sb-shadow-md: 0 6px 16px -8px rgba(15, 23, 42, 0.16), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
    --sb-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--primary-color-sidebar) 22%, transparent);

    --sb-radius: 12px;
    --sb-radius-sm: 10px;
    --sb-radius-xs: 8px;

    --sb-trans: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --sb-trans-slow: 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Sidebar container & scrollbar ---------- */
.sidebar {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: calc(100vh - 70px) !important;
    -webkit-overflow-scrolling: touch;
    background:
        radial-gradient(
            at 20% 10%,
            color-mix(in srgb, #c4b5fd 14%, transparent) 0%,
            transparent 55%
        ),
        radial-gradient(
            at 80% 35%,
            color-mix(in srgb, #f9a8d4 10%, transparent) 0%,
            transparent 50%
        ),
        radial-gradient(
            at 30% 65%,
            color-mix(in srgb, #a7f3d0 12%, transparent) 0%,
            transparent 55%
        ),
        radial-gradient(
            at 75% 90%,
            color-mix(in srgb, #bae6fd 12%, transparent) 0%,
            transparent 55%
        ),
        linear-gradient(180deg, #fbfaff 0%, #f8fdff 50%, #fefefb 100%);
    background-attachment: local;
    border-right: 1px solid var(--sb-border-soft);
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.18) transparent;
}

/* ---------- Search inputs ---------- */
.sidebar .sidebar-search {
    padding: 0.75rem 0.875rem 0.25rem !important;
}

.sidebar .sidebar-search + .sidebar-search {
    padding-top: 0.25rem !important;
}

.sidebar .sidebar-search .form-control {
    height: 40px;
    border-radius: var(--sb-radius-sm);
    background-color: var(--sb-bg-soft);
    font-size: 0.8125rem;
    padding: 0.5rem 0.85rem;
    box-shadow: var(--sb-shadow-sm);
    transition:
        background-color var(--sb-trans),
        border-color var(--sb-trans),
        box-shadow var(--sb-trans),
        transform var(--sb-trans);
}

.sidebar .sidebar-search .form-control::placeholder {
    opacity: 1;
}

.sidebar .sidebar-search .form-control:hover {
    background-color: #ffffff;
    border-color: rgba(15, 23, 42, 0.12);
}

.sidebar .sidebar-search .form-control:focus {
    background-color: #ffffff;
    border-color: var(--primary-color-sidebar);
    box-shadow: var(--sb-shadow-focus);
    outline: none;
}

/* .sidebar > .nav = ONLY scroll container in the sidebar */
.sidebar > .nav:not(.sub-menu) {
    overflow: visible !important;
    max-height: none !important;
    margin-bottom: 0 !important;
    padding: 0.625rem 0.5rem 1rem !important;
}

.sidebar::-webkit-scrollbar {
    width: 5px;
}
.sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(15, 23, 42, 0.14);
    border-radius: 3px;
}

/* Nav item */
.sidebar .nav .nav-item {
    padding: 0 0.125rem !important;
    position: relative;
    margin: 2px 0;
}

/* ---------- Nav link ---------- */
.sidebar .nav .nav-item .nav-link {
    display: flex !important;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.625rem 0.75rem !important;
    color: var(--sb-text);
    text-decoration: none;
    font-size: inherit;
    font-weight: 500;
    letter-spacing: 0.005em;
    border-radius: var(--sb-radius-sm);
    position: relative;
    isolation: isolate;
    transition:
        background-color var(--sb-trans),
        color var(--sb-trans),
        box-shadow var(--sb-trans),
        transform var(--sb-trans);
}

.sidebar .nav .nav-item .nav-link:hover {
    background-color: var(--sb-hover-bg);
    color: var(--primary-color-sidebar);
    transform: translateX(1px);
}

.sidebar .nav .nav-item .nav-link:hover i.menu-icon {
    color: var(--primary-color-sidebar);
    transform: scale(1.05);
}

.sidebar .nav .nav-item .nav-link:hover i.menu-arrow {
    color: var(--primary-color-sidebar);
}

.sidebar .nav .nav-item .nav-link:active {
    transform: translateX(1px) scale(0.995);
}

/* Accessibility: clear focus ring for keyboard users */
.sidebar .nav .nav-item .nav-link:focus-visible {
    outline: none;
    box-shadow: var(--sb-shadow-focus);
}

/* Parent link (toggle) stays above hover layers */
.sidebar .nav .nav-item > .nav-link[data-toggle='collapse'] {
    z-index: 1;
}

/* ---------- Icon ---------- */
.sidebar .nav .nav-item .nav-link i.menu-icon {
    margin: 0 !important;
    width: 22px !important;
    text-align: center;
    flex-shrink: 0;
    font-size: 1rem;
    color: var(--sb-text-muted);
    transition:
        color var(--sb-trans),
        transform var(--sb-trans);
}

/* ---------- Arrow ---------- */
.sidebar .nav .nav-item .nav-link i.menu-arrow {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 1rem;
    color: var(--sb-text-dim);
    transition:
        transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
        color var(--sb-trans);
}

.sidebar .nav .nav-item .nav-link[aria-expanded='true'] i.menu-arrow {
    transform: rotate(90deg);
}

/* ---------- Menu title ---------- */
.sidebar .nav .nav-item .nav-link .menu-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: inherit;
    line-height: 1.25;
}

/* ---------- Collapse animation (heights driven by JS) ---------- */
.sidebar .nav .nav-item .collapse {
    transition:
        height var(--sb-trans-slow),
        opacity 180ms ease;
    height: 0;
    opacity: 0;
}

.sidebar .nav .nav-item .collapse.show {
    height: auto;
    opacity: 1;
}

body:not(.sidebar-icon-only) .sidebar .nav .nav-item .collapse:not(.show) {
    display: block !important;
    height: 0 !important;
    opacity: 0;
    overflow: hidden !important;
}

/* In icon-only desktop mode hidden collapses must stay removed from flow */
.sidebar-icon-only .sidebar .nav .nav-item .collapse:not(.show) {
    display: none !important;
    height: 0 !important;
    opacity: 0;
    overflow: hidden !important;
}

/* Prevent nested collapses from auto-expanding */
.sidebar .nav .nav-item .collapse.show .collapse:not(.show) {
    height: 0 !important;
    opacity: 0;
}

/* ---------- Sub-menu with guide line ---------- */
.sidebar .nav.sub-menu {
    padding: 0.2rem 0 0.4rem !important;
    margin-left: 1.15rem;
    position: relative;
}

.sidebar .nav.sub-menu::before {
    content: '';
    position: absolute;
    left: 0.35rem;
    top: 0.2rem;
    bottom: 0.4rem;
    width: 1.5px;
    background: var(--sb-guide);
    border-radius: 2px;
    transition: background-color var(--sb-trans);
}

.sidebar .nav.sub-menu .nav-item {
    padding-left: 0.65rem !important;
    padding-right: 0.2rem !important;
    position: relative;
}

/* Tiny leading dot on each sub-menu item */
.sidebar .nav.sub-menu .nav-item > .nav-link::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sb-text-dim);
    flex-shrink: 0;
    margin-right: 0.15rem;
    opacity: 0.65;
    transition:
        background-color var(--sb-trans),
        transform var(--sb-trans),
        opacity var(--sb-trans);
}

.sidebar .nav.sub-menu .nav-item > .nav-link:hover::before {
    background: var(--primary-color-sidebar);
    transform: scale(1.25);
    opacity: 1;
}

.sidebar .nav.sub-menu .nav-item .nav-link {
    padding: 0.45rem 0.65rem !important;
    font-size: inherit;
    font-weight: 400;
    color: var(--sb-text-muted);
    border-radius: var(--sb-radius-xs);
}

.sidebar .nav.sub-menu .nav-item .nav-link:hover {
    color: var(--primary-color-sidebar);
    background-color: var(--sb-hover-bg);
}

/* Second-level sub-menu */
.sidebar .nav.sub-menu .nav.sub-menu {
    margin-left: 0.75rem;
}

.sidebar .nav.sub-menu .nav.sub-menu .nav-item {
    padding-left: 0.9rem !important;
}

/* Highlight guide line when any child inside is active */
.sidebar .nav .nav-item.parent-active > .collapse > .nav.sub-menu::before {
    background: var(--sb-guide-strong);
}

/* ---------- Active states ---------- */
.sidebar .nav .nav-item.active > .nav-link,
.sidebar .nav .nav-item .nav-link.active {
    background: var(--sb-active-gradient) !important;
    color: var(--primary-color-sidebar) !important;
    font-weight: 600;
    box-shadow: var(--sb-shadow-sm);
}

.sidebar .nav .nav-item.active > .nav-link i.menu-icon,
.sidebar .nav .nav-item .nav-link.active i.menu-icon,
.sidebar .nav .nav-item.active > .nav-link i.menu-arrow,
.sidebar .nav .nav-item .nav-link.active i.menu-arrow {
    color: var(--primary-color-sidebar) !important;
}

/* Solid dot for active sub-menu items */
.sidebar .nav.sub-menu .nav-item.active > .nav-link::before,
.sidebar .nav.sub-menu .nav-item > .nav-link.active::before {
    background: var(--primary-color-sidebar);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color-sidebar) 18%, transparent);
    opacity: 1;
    transform: scale(1.2);
}

/* Accent bar for active top-level links */
.sidebar > ul.nav > .nav-item.active > .nav-link::after,
.sidebar > ul.nav > .nav-item > .nav-link.active::after {
    content: '';
    position: absolute;
    left: -2px;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--primary-color-sidebar);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color-sidebar) 18%, transparent);
}

/* Parent active state (a child is currently active) */
.sidebar .nav .nav-item.parent-active > .nav-link[data-toggle='collapse'] {
    color: var(--primary-color-sidebar) !important;
    font-weight: 600;
}

.sidebar .nav .nav-item.parent-active > .nav-link[data-toggle='collapse'] i.menu-icon,
.sidebar .nav .nav-item.parent-active > .nav-link[data-toggle='collapse'] i.menu-arrow {
    color: var(--primary-color-sidebar) !important;
}

/* Expanded parent styling */
.sidebar .nav .nav-item .nav-link[aria-expanded='true'] {
    font-weight: 600;
    color: var(--primary-color-sidebar);
    background-color: var(--sb-hover-bg);
}

.sidebar .nav .nav-item .nav-link[aria-expanded='true'] i.menu-icon {
    color: var(--primary-color-sidebar);
}

/* ---------- Sub-menu fade in for show state ---------- */
.sidebar .nav .nav-item .collapse.show > .nav.sub-menu > .nav-item {
    animation: sbFadeIn var(--sb-trans-slow) 40ms both;
}

@keyframes sbFadeIn {
    from {
        opacity: 0;
        transform: translateY(-2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar *,
    .sidebar *::before,
    .sidebar *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .sidebar .nav .nav-item .nav-link {
        padding: 0.7rem 0.85rem !important;
        font-size: inherit;
    }

    .sidebar .nav.sub-menu .nav-item .nav-link {
        padding: 0.55rem 0.75rem !important;
        font-size: inherit;
    }
}

/* Keep desktop icon-only sidebar compatible with base theme behavior */
@media (min-width: 992px) {
    .sidebar-icon-only .sidebar .nav .nav-item .nav-link {
        display: block !important;
        text-align: center;
    }

    .sidebar-icon-only .sidebar .nav .nav-item .nav-link i.menu-icon {
        margin: 0 auto !important;
    }

    .sidebar-icon-only .sidebar .nav .nav-item .nav-link .menu-title {
        flex: initial;
        min-width: initial;
    }
}

/* ---------- RTL tweaks (accent bar & spacing) ---------- */
.rtl .sidebar > ul.nav > .nav-item.active > .nav-link::after,
.rtl .sidebar > ul.nav > .nav-item > .nav-link.active::after {
    left: auto;
    right: -2px;
    border-radius: 3px 0 0 3px;
}

.rtl .sidebar .nav.sub-menu {
    margin-left: 0;
    margin-right: 1.15rem;
}

.rtl .sidebar .nav.sub-menu::before {
    left: auto;
    right: 0.35rem;
}

/* Flip sub-menu item padding so guide line + text align correctly in RTL */
.rtl .sidebar .nav.sub-menu .nav-item {
    padding-left: 0.2rem !important;
    padding-right: 0.65rem !important;
}

.rtl .sidebar .nav.sub-menu .nav.sub-menu .nav-item {
    padding-left: 0 !important;
    padding-right: 0.9rem !important;
}

.rtl .sidebar .nav.sub-menu .nav-item > .nav-link::before {
    margin-right: 0;
    margin-left: 0.15rem;
}

.rtl .sidebar .nav .nav-item .nav-link:hover {
    transform: translateX(-1px);
}

.rtl .sidebar .nav .nav-item .nav-link:active {
    transform: translateX(-1px) scale(0.995);
}

.navbar.default-layout-navbar {
    --nb-primary: var(--primary, #22577a);
    /* Right tray: profile / language / plan — same visual size */
    --nb-icon: 24px;
    --nb-ink: #0f172a;
    --nb-muted: #64748b;
    --nb-border: rgba(15, 23, 42, 0.06);
    --nb-ring: color-mix(in srgb, var(--nb-primary) 22%, transparent);
    --nb-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 8px 22px -16px rgba(15, 23, 42, 0.14);
    --nb-trans: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    background-color: rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: saturate(200%) blur(28px);
    backdrop-filter: saturate(200%) blur(28px);
    border-bottom: 1px solid var(--nb-border);
    box-shadow: var(--nb-shadow);
    flex-wrap: nowrap !important;
    align-items: stretch;
    justify-content: space-between !important;
}
.navbar.default-layout-navbar .navbar-toggler {
    color: var(--nb-ink);
    transition:
        color var(--nb-trans),
        transform var(--nb-trans);
}
.navbar.default-layout-navbar .navbar-toggler:hover {
    color: var(--nb-primary);
}
.navbar.default-layout-navbar .navbar-toggler:active {
    transform: scale(0.96);
}
.navbar.default-layout-navbar .navbar-toggler:focus,
.navbar.default-layout-navbar .navbar-toggler:focus-visible {
    outline: none;
}
.navbar.default-layout-navbar .cache-clear .btn {
    border-radius: 999px;
    transition:
        box-shadow var(--nb-trans),
        filter var(--nb-trans);
}
.navbar.default-layout-navbar .cache-clear .btn:hover {
    box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--nb-primary) 45%, transparent);
    filter: brightness(0.98);
}
.navbar.default-layout-navbar .cache-clear > span {
    color: var(--nb-ink);
    font-weight: 600;
    letter-spacing: 0.01em;
    font-size: 1rem;
    text-transform: capitalize;
}
.navbar.default-layout-navbar .navbar-nav .text-dark {
    color: var(--nb-ink) !important;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.navbar.default-layout-navbar #sessionYearNameHeader,
.navbar.default-layout-navbar #semesterNameHeader:not(:empty) {
    color: var(--nb-primary);
    font-weight: 600;
}

.navbar.default-layout-navbar .nav-item.nav-profile .nav-link .nav-profile-img {
    width: var(--nb-icon);
    height: var(--nb-icon);
    flex-shrink: 0;
}
.navbar.default-layout-navbar .nav-profile-img img {
    width: var(--nb-icon);
    height: var(--nb-icon);
    max-width: none;
    object-fit: cover;
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 3px color-mix(in srgb, var(--nb-primary) 30%, transparent);
    transition: box-shadow var(--nb-trans);
}
.navbar.default-layout-navbar .nav-item.nav-profile > .nav-link:hover .nav-profile-img img,
.navbar.default-layout-navbar
    .nav-item.nav-profile
    > .nav-link[aria-expanded='true']
    .nav-profile-img
    img {
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 3px var(--nb-primary);
}
.navbar.default-layout-navbar .nav-item.nav-profile > .nav-link {
    gap: 0.35rem;
    align-items: center !important;
    transition: color var(--nb-trans);
}
.navbar.default-layout-navbar .nav-item.nav-profile > .nav-link:focus,
.navbar.default-layout-navbar .nav-item.nav-profile > .nav-link:focus-visible {
    outline: none;
}

.navbar.default-layout-navbar .navbar-profile-name,
.navbar.default-layout-navbar .nav-profile-text p.navbar-profile-name {
    color: var(--nb-ink);
    font-weight: 800;
    text-transform: capitalize;
}
.navbar.default-layout-navbar .navbar-profile-role,
.navbar.default-layout-navbar .nav-profile-text .navbar-profile-role {
    display: block;
    margin: 0;
    padding: 0;
    margin-top: 0.1rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--nb-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--nb-trans);
}
.navbar.default-layout-navbar .nav-item.nav-profile > .nav-link:hover .navbar-profile-name,
.navbar.default-layout-navbar
    .nav-item.nav-profile
    > .nav-link[aria-expanded='true']
    .navbar-profile-name {
    color: var(--nb-primary);
}
.navbar.default-layout-navbar .nav-item.nav-profile > .nav-link:hover .navbar-profile-role,
.navbar.default-layout-navbar
    .nav-item.nav-profile
    > .nav-link[aria-expanded='true']
    .navbar-profile-role {
    color: var(--nb-ink);
}
.navbar.default-layout-navbar .dropdown-toggle::after {
    transition: transform var(--nb-trans);
}
.navbar.default-layout-navbar .dropdown-toggle[aria-expanded='true']::after {
    transform: rotate(180deg);
}
.navbar.default-layout-navbar .dropdown-menu.navbar-dropdown {
    border: 1px solid var(--nb-border);
    border-radius: 14px;
    box-shadow:
        0 10px 30px -12px rgba(15, 23, 42, 0.18),
        0 2px 6px -2px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}
/* Desktop: profile menu inset from viewport (role label widened trigger) */
@media (min-width: 992px) {
    .navbar.default-layout-navbar .nav-item.nav-profile > .dropdown-menu.navbar-profile-dropdown {
        right: 1rem;
        left: auto;
    }
    .rtl
        .navbar.default-layout-navbar
        .nav-item.nav-profile
        > .dropdown-menu.navbar-profile-dropdown {
        right: auto;
        left: 0.75rem;
    }
}
.navbar.default-layout-navbar .dropdown-menu.navbar-dropdown.show {
    animation: nbPanelIn 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.navbar.default-layout-navbar .dropdown-menu.navbar-dropdown .dropdown-item {
    position: relative;
    color: var(--nb-ink);
    transition:
        color var(--nb-trans),
        padding-left var(--nb-trans);
}
.navbar.default-layout-navbar .dropdown-menu.navbar-dropdown .dropdown-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 25%;
    bottom: 25%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background-color: var(--nb-primary);
    opacity: 0;
    transform: scaleY(0.6);
    transform-origin: center;
    transition:
        opacity var(--nb-trans),
        transform var(--nb-trans);
    pointer-events: none;
}
.navbar.default-layout-navbar .dropdown-menu.navbar-dropdown .dropdown-item:hover,
.navbar.default-layout-navbar .dropdown-menu.navbar-dropdown .dropdown-item:focus {
    color: var(--nb-primary);
}
.navbar.default-layout-navbar .dropdown-menu.navbar-dropdown .dropdown-item:hover::before,
.navbar.default-layout-navbar .dropdown-menu.navbar-dropdown .dropdown-item:focus::before {
    opacity: 1;
    transform: scaleY(1);
}
.navbar.default-layout-navbar .dropdown-menu.navbar-dropdown .dropdown-divider {
    border-top-color: var(--nb-border);
}
.navbar.default-layout-navbar .dropdown-menu.navbar-dropdown .dropdown-item[href*='logout'] {
    color: #dc2626;
}
.navbar.default-layout-navbar .dropdown-menu.navbar-dropdown .dropdown-item[href*='logout'] i {
    color: #dc2626 !important;
}
.navbar.default-layout-navbar
    .dropdown-menu.navbar-dropdown
    .dropdown-item[href*='logout']::before {
    background-color: #dc2626;
}
.navbar.default-layout-navbar .dropdown-menu.navbar-dropdown .dropdown-item[href*='logout']:hover,
.navbar.default-layout-navbar .dropdown-menu.navbar-dropdown .dropdown-item[href*='logout']:focus {
    color: #b91c1c;
}
.navbar.default-layout-navbar .alert.alert-fill-danger {
    border-radius: 10px;
}
@keyframes nbPanelIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .navbar.default-layout-navbar,
    .navbar.default-layout-navbar *,
    .navbar.default-layout-navbar .dropdown-menu.navbar-dropdown.show {
        transition-duration: 0ms !important;
        animation: none !important;
    }
}
.rtl .navbar.default-layout-navbar .dropdown-menu.navbar-dropdown .dropdown-item i.mr-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}
.rtl .navbar.default-layout-navbar .dropdown-menu.navbar-dropdown .dropdown-item::before {
    left: auto;
    right: 0;
    border-radius: 3px 0 0 3px;
}
@media (max-width: 1199.98px) {
    .navbar.default-layout-navbar .navbar-nav .text-dark,
    .navbar.default-layout-navbar .cache-clear > span {
        font-size: 0.875rem;
    }
}
@media (max-width: 991.98px) {
    .navbar.default-layout-navbar
        .navbar-menu-wrapper
        .navbar-toggler.navbar-toggler-right.d-lg-none {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        height: 70px !important;
        width: 50px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        z-index: 5;
    }
    .navbar.default-layout-navbar .navbar-brand-wrapper {
        margin-left: 50px !important;
        width: auto !important;
        min-width: 70px !important;
        padding: 0 10px !important;
    }
    .navbar.default-layout-navbar .navbar-brand-wrapper .navbar-brand.brand-logo img {
        width: auto !important;
        max-width: 150px !important;
        height: 36px !important;
        object-fit: contain !important;
    }
    .sidebar.sidebar-offcanvas {
        left: -280px !important;
        right: auto !important;
    }
    .sidebar.sidebar-offcanvas.active {
        left: 0 !important;
        right: auto !important;
    }
    .rtl
        .navbar.default-layout-navbar
        .navbar-menu-wrapper
        .navbar-toggler.navbar-toggler-right.d-lg-none {
        left: auto !important;
        right: 0 !important;
    }
    .rtl .navbar.default-layout-navbar .navbar-brand-wrapper {
        margin-left: 0 !important;
        margin-right: 50px !important;
    }
    .rtl .sidebar.sidebar-offcanvas {
        right: -280px !important;
        left: auto !important;
    }
    .rtl .sidebar.sidebar-offcanvas.active {
        right: 0 !important;
        left: auto !important;
    }
    .navbar.default-layout-navbar .navbar-nav .text-dark,
    .navbar.default-layout-navbar .cache-clear > span {
        font-size: 0.8125rem;
    }
    .navbar.default-layout-navbar .cache-clear .btn {
        font-size: 0.75rem;
        padding: 0.3rem 0.75rem;
    }
    .navbar.default-layout-navbar
        .navbar-menu-wrapper
        .navbar-nav
        .nav-item.dropdown
        .dropdown-menu.navbar-dropdown {
        position: fixed !important;
        top: 64px !important;
        left: auto !important;
        right: 15px !important;
        transform: none !important;
        width: auto !important;
        min-width: 240px !important;
        max-width: calc(100vw - 30px) !important;
        margin: 0 !important;
        font-size: 0.875rem;
    }
    .rtl
        .navbar.default-layout-navbar
        .navbar-menu-wrapper
        .navbar-nav
        .nav-item.dropdown
        .dropdown-menu.navbar-dropdown {
        left: 15px !important;
        right: auto !important;
    }
    .navbar.default-layout-navbar .dropdown-menu.navbar-dropdown .dropdown-item {
        padding: 10px 14px;
        font-size: 0.875rem;
    }
    .navbar.default-layout-navbar .dropdown-menu.navbar-dropdown .dropdown-item i {
        font-size: 15px !important;
    }
}
@media (max-width: 767.98px) {
    .navbar.default-layout-navbar .navbar-nav .text-dark,
    .navbar.default-layout-navbar .cache-clear > span {
        font-size: 0.75rem;
    }
    .navbar.default-layout-navbar .cache-clear .btn {
        font-size: 0.7rem;
        padding: 0.25rem 0.65rem;
    }
    .navbar.default-layout-navbar
        .navbar-menu-wrapper
        .navbar-nav
        .nav-item.dropdown
        .dropdown-menu.navbar-dropdown {
        right: 12px !important;
        min-width: 220px !important;
        max-width: calc(100vw - 24px) !important;
        font-size: 0.8125rem;
        border-radius: 12px;
    }
    .rtl
        .navbar.default-layout-navbar
        .navbar-menu-wrapper
        .navbar-nav
        .nav-item.dropdown
        .dropdown-menu.navbar-dropdown {
        left: 12px !important;
        right: auto !important;
    }
    .navbar.default-layout-navbar .dropdown-menu.navbar-dropdown .dropdown-item {
        padding: 9px 12px;
        font-size: 0.8125rem;
    }
    .navbar.default-layout-navbar .dropdown-menu.navbar-dropdown .dropdown-item i {
        font-size: 14px !important;
    }
    .navbar.default-layout-navbar .navbar-brand-wrapper .navbar-brand.brand-logo img {
        max-width: 120px !important;
        height: 32px !important;
    }
}
@media (max-width: 575.98px) {
    .navbar.default-layout-navbar .cache-clear .btn {
        font-size: 0.675rem;
        padding: 0.2rem 0.55rem;
    }
    .navbar.default-layout-navbar .navbar-brand-wrapper {
        padding: 0 8px !important;
        min-width: 60px !important;
    }
    .navbar.default-layout-navbar .navbar-brand-wrapper .navbar-brand.brand-logo img {
        max-width: 100px !important;
        height: 30px !important;
    }
    .navbar.default-layout-navbar
        .navbar-menu-wrapper
        .navbar-nav
        .nav-item.dropdown
        .dropdown-menu.navbar-dropdown {
        right: 10px !important;
        min-width: 200px !important;
        max-width: calc(100vw - 20px) !important;
        font-size: 0.8125rem;
    }
    .rtl
        .navbar.default-layout-navbar
        .navbar-menu-wrapper
        .navbar-nav
        .nav-item.dropdown
        .dropdown-menu.navbar-dropdown {
        left: 10px !important;
        right: auto !important;
    }
    .navbar.default-layout-navbar .dropdown-menu.navbar-dropdown .dropdown-item {
        padding: 8px 11px;
    }
    .navbar.default-layout-navbar .nav-profile-img img {
        box-shadow:
            0 0 0 2px #fff,
            0 0 0 2px color-mix(in srgb, var(--nb-primary) 30%, transparent);
    }
}

@media (max-width: 475.98px) {
    /* Tighten hamburger + logo so they sit closer together */
    .navbar.default-layout-navbar
        .navbar-menu-wrapper
        .navbar-toggler.navbar-toggler-right.d-lg-none {
        width: 40px !important;
    }
    .navbar.default-layout-navbar .navbar-brand-wrapper {
        margin-left: 35px !important;
        padding: 0 6px !important;
    }
    .navbar.default-layout-navbar .navbar-brand-wrapper .navbar-brand.brand-logo img {
        max-width: 125px !important;
        height: 34px !important;
    }
}

.navbar.default-layout-navbar > .navbar-brand-wrapper {
    flex: 0 1 auto;
    min-width: 0;
    justify-content: flex-start !important;
    text-align: start !important;
}
.navbar.default-layout-navbar > .navbar-menu-wrapper {
    flex: 1 1 0% !important;
    width: 0;
    min-width: 0;
    flex-wrap: nowrap !important;
    display: flex !important;
    align-items: stretch;
    justify-content: flex-start;
}
/* Right cluster — consistent gap between every nav item */
.navbar.default-layout-navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap !important;
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 0;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding-inline: 0.5rem;
    justify-content: flex-end;
    align-items: center;
    gap: clamp(0.5rem, 2vw, 1.1rem); /* plan / language / profile */
}
.rtl .navbar.default-layout-navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right {
    margin-left: 0 !important;
    margin-right: auto !important;
}
.navbar.default-layout-navbar
    .navbar-menu-wrapper
    .navbar-nav.navbar-nav-right
    .nav-item
    .nav-link {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.navbar.default-layout-navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right > .nav-item {
    align-self: center;
}
.navbar.default-layout-navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-sub-pill {
    min-width: 0;
    align-self: center;
}
/* Plan strip + upgrade: no shadow in navbar; full text — no fixed mini height */
.navbar.default-layout-navbar .nav-sub-pill .sub-status-wrap {
    align-items: center;
    min-height: auto;
    max-height: none;
    padding-block: 2px;
    background-color: transparent;
}
.navbar.default-layout-navbar .nav-sub-pill .btn-upgrade-pill {
    min-height: auto;
    display: inline-flex;
    align-items: center;
}

@media (max-width: 991.98px) {
    .navbar.default-layout-navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right {
        gap: clamp(0.45rem, 1.8vw, 0.95rem);
        padding-inline: 0.25rem;
    }
    .navbar.default-layout-navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
@media (max-width: 575.98px) {
    .navbar.default-layout-navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right {
        gap: 0.8rem;
        padding-inline: 0.15rem;
    }
    .navbar.default-layout-navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .navbar.default-layout-navbar
        .navbar-menu-wrapper
        .navbar-nav.navbar-nav-right
        > .nav-item.dropdown
        > .nav-link.count-indicator
        i {
        font-size: calc(var(--nb-icon) * 0.68);
    }
}
.nav-sub-pill {
    --sub-theme: var(--theme-color, #6366f1);
}

.nav-sub-pill .sub-status-wrap {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    row-gap: 4px;
    padding: 3px 6px;
    border-radius: var(--sd-radius-sm, 10px);
    background: var(--sd-surface, #fff);
    max-width: 100%;
    min-width: 0;
}

.nav-sub-pill .sub-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.35;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: normal;
    word-break: break-word;
    min-width: 0;
    flex-shrink: 1;
}

.nav-sub-pill .sub-badge-text-short {
    display: none;
}
.nav-sub-pill .sub-badge-text-full {
    display: inline;
}

.nav-sub-pill .badge-trial {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--theme-color, #22577a) 82%, #0f172a) 0%,
        color-mix(in srgb, var(--theme-color, #22577a) 66%, #0f172a) 100%
    );
    color: #fff;
    box-shadow:
        0 2px 6px -2px rgba(15, 23, 42, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.07);
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
}
.nav-sub-pill .badge-urgent {
    background: color-mix(in srgb, #dc2626 68%, var(--theme-color, #22577a));
    color: #fff;
    animation: sub-pulse 1.8s ease-in-out infinite;
}
.nav-sub-pill .badge-expired {
    background: color-mix(in srgb, #991b1b 78%, var(--theme-color, #22577a));
    color: #fff;
}
.nav-sub-pill .badge-paid {
    background: color-mix(
        in srgb,
        var(--theme-color, #22577a) 10%,
        var(--sd-surface-soft, #f8fafc)
    );
    color: var(--sd-heading, #1f2937);
    border: 1px solid var(--sd-border, rgba(15, 23, 42, 0.1));
}
.nav-sub-pill .badge-no-plan {
    background: var(--sd-surface-soft, #f3f4f6);
    color: var(--sd-muted, #6b7280);
    border: 1px solid var(--sd-border, #e5e7eb);
}
.nav-sub-pill .badge-free {
    background: color-mix(
        in srgb,
        var(--theme-color, #22577a) 12%,
        var(--sd-surface-soft, #f8fafc)
    );
    color: var(--theme-color, #22577a);
    border: 1px solid
        color-mix(in srgb, var(--theme-color, #22577a) 26%, var(--sd-border, rgba(15, 23, 42, 0.1)));
}

.nav-sub-pill .btn-upgrade-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    letter-spacing: 0.08em;
    border-radius: 999px;
    white-space: normal;
    word-break: break-word;
    flex-shrink: 0;
    text-decoration: none !important;
    border: none;
    background-color: #f3f0ff;
    color: #5b21b6 !important;
    transition:
        transform 0.15s ease,
        background-color 0.15s ease,
        color 0.15s ease;
}
.nav-sub-pill .btn-upgrade-pill:hover {
    transform: translateY(-1px);
    color: #4c1d95 !important;
    background-color: #ebe4ff;
}
.nav-sub-pill .btn-upgrade-pill:active {
    transform: translateY(0);
}
.nav-sub-pill .btn-upgrade-pill i {
    font-size: 10px;
    flex-shrink: 0;
}

.nav-sub-pill .upg-text {
    display: inline;
}

@keyframes sub-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.88;
    }
}

/* Mobile: short plan copy; tighter type */
@media (max-width: 575.98px) {
    .nav-sub-pill .sub-badge-text-full {
        display: none !important;
    }
    .nav-sub-pill .sub-badge-text-short {
        display: inline !important;
    }
    .nav-sub-pill .sub-status-wrap {
        padding: 3px 0px;
        gap: 4px;
        max-width: min(100%, calc(100vw - 7rem));
    }
    .nav-sub-pill .sub-badge {
        font-size: 0.65rem;
        padding: 2px 6px;
        gap: 0;
    }
    .nav-sub-pill .btn-upgrade-pill {
        font-size: 0.65rem;
        padding: 2px 7px;
        gap: 3px;
    }
    .nav-sub-pill .btn-upgrade-pill i {
        font-size: 9px;
    }
    .nav-sub-pill .btn-upgrade-pill .upg-icon svg {
        width: 11px;
        height: 11px;
    }
}
@media (max-width: 419.98px) {
    .nav-sub-pill .sub-trial-label {
        display: none;
    }
}

.table-hscroll-enabled tbody tr,
.table-hscroll-enabled tbody td,
.table-hscroll-enabled .card-view {
    cursor: ew-resize;
}

.table-hscroll-dragging {
    cursor: ew-resize;
    user-select: none;
}

/* ==========================================================================
   Select2 — unified theme (admin, landing / .landing-root, filters, modals)
   Do not edit vendor select2.min.css — overrides live here only.
   Aligns with Form controls: radius 10px, border #e5e7eb, theme focus ring.
   ========================================================================== */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: 10px;
    border: 1px solid #c3c3c3;
    background-color: transparent;
    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        background-color 150ms ease;
}

.select2-container--default .select2-selection--single {
    height: auto;
    min-height: 2.5rem;
    padding: 0.8rem 2.35rem 0.7rem 0.75rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
    padding-right: 0;
    color: var(--sd-heading, #1f2937);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.45;
}

.select2-container--default .select2-selection__placeholder {
    color: var(--sd-muted, #6b7280);
    font-weight: 400;
}

.select2-container--default .select2-selection--multiple {
    min-height: 2.5rem;
    padding: 0.35rem 0.55rem 0.35rem 0.45rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0 0.25rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 0.15rem;
    margin-bottom: 0.15rem;
    padding: 0.2rem 0.55rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--theme-color, #22577a) 22%, #e5e7eb);
    background-color: color-mix(in srgb, var(--theme-color, #22577a) 10%, #ffffff);
    color: var(--sd-heading, #1f2937);
    font-size: 0.8125rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    margin-right: 0.35rem;
    color: var(--sd-muted, #6b7280);
    font-weight: 600;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--theme-color, #22577a);
}

/* Caret / arrow */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2.5rem;
    right: 0.5rem;
    top: 0;
    width: 1.5rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--sd-muted, #6b7280) transparent transparent transparent;
    border-width: 5px 4px 0 4px;
    margin-left: -5px;
    margin-top: -2px;
}

/* Focus + open: match .form-control focus ring */
.select2-container--default.select2-container--focus:not(.select2-container--disabled)
    .select2-selection--single,
.select2-container--default.select2-container--focus:not(.select2-container--disabled)
    .select2-selection--multiple,
.select2-container--default.select2-container--open:not(.select2-container--disabled)
    .select2-selection--single,
.select2-container--default.select2-container--open:not(.select2-container--disabled)
    .select2-selection--multiple {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-color, #22577a) 15%, transparent);
    outline: none;
}

/* Keyboard / focus-visible: keep visible ring (do not remove outline on focus) */
.select2-container--default .select2-selection--single:focus-visible,
.select2-container--default .select2-selection--multiple:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--theme-color, #22577a) 45%, #e5e7eb);
    outline-offset: 1px;
}

/* Disabled */
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: #f3f4f6;
    border-color: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.72;
}

.select2-container--default.select2-container--disabled .select2-selection__placeholder {
    color: #9ca3af;
}

/* jQuery Validate: inline messages use <label class="error">; the plugin can reset
   classes so helper text stays default body color — force theme danger color */
.form-group label.error,
label.error {
    color: #fe7c96 !important;
    font-size: 0.8125rem;
    font-weight: 500;
    display: block;
    width: 100%;
    margin-top: 0.35rem;
}

/* Bootstrap invalid / server-side validation */
select.is-invalid + .select2-container .select2-selection--single,
select.is-invalid + .select2-container .select2-selection--multiple,
select.form-control.is-invalid + .select2-container .select2-selection--single,
select.form-control.is-invalid + .select2-container .select2-selection--multiple {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12);
}

.was-validated select:invalid + .select2-container .select2-selection--single,
.was-validated select:invalid + .select2-container .select2-selection--multiple {
    border-color: #dc3545;
}

/* Dropdown panel */
.select2-dropdown {
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.09);
    box-shadow:
        0 14px 34px -18px rgba(15, 23, 42, 0.35),
        0 6px 14px -10px rgba(15, 23, 42, 0.12);
    background-color: var(--sd-surface, #ffffff);
    overflow: hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    padding: 0.45rem 0.65rem;
    margin: 0.35rem 0.45rem 0.45rem;
    width: calc(100% - 0.9rem);
    font-size: 0.875rem;
    color: var(--sd-heading, #1f2937);
    transition:
        border-color 150ms ease,
        box-shadow 150ms ease;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: color-mix(in srgb, var(--theme-color, #22577a) 60%, #e5e7eb);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-color, #22577a) 12%, transparent);
    outline: none;
}

.select2-search__field::placeholder,
.select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
    color: var(--sd-muted, #6b7280);
    font-size: 0.8125rem;
    opacity: 0.9;
}

.select2-container--default .select2-results__option {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--sd-heading, #1f2937);
    line-height: 1.4;
}

.select2-container--default .select2-results__option[role='group'] {
    padding: 0;
}

.select2-container--default .select2-results__option--disabled,
.select2-container--default .select2-results__option[aria-disabled='true'] {
    color: #9ca3af;
    cursor: not-allowed;
    background-color: transparent;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: color-mix(in srgb, var(--theme-color, #22577a) 16%, #ffffff);
    color: var(--sd-heading, #1f2937);
}

.select2-container--default .select2-results__option[aria-selected='true'] {
    background-color: color-mix(in srgb, var(--theme-color, #22577a) 10%, #f8fafc);
    font-weight: 600;
}

.select2-container--default
    .select2-results__option[aria-selected='true']:not(.select2-results__option--highlighted) {
    color: var(--sd-heading, #1f2937);
}

/* Results list scroll */
.select2-container--default .select2-results > .select2-results__options {
    max-height: 280px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--theme-color, #22577a) 35%, #d1d5db) #f1f5f9;
}

.select2-container--default .select2-results__options::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.select2-container--default .select2-results__options::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 6px;
}

.select2-container--default .select2-results__options::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--theme-color, #22577a) 40%, #cbd5e1);
    border-radius: 6px;
}

/* Stacking: sit above bootstrap navbar, behind nothing critical; above modal (1055) */
.select2-container--open {
    z-index: 1060;
}

.select2-container--default .select2-dropdown {
    z-index: 1060;
}

/* Optional landing / offcanvas: match onboard form density */
.landing-root .select2-container--default .select2-selection--single {
    min-height: 2.65rem;
}

.landing-root
    .onboard-modal
    .select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    height: 2.65rem;
}

/* --- School settings: compact custom-domain guides (dashboard) ----- */
.content-wrapper .sd-domain-mini-wrap {
    --sdg-accent: var(--theme-color, var(--primary-color, #22577a));
}
.content-wrapper .sd-domain-mini-section {
    display: flex;
    flex-direction: column;
}
.content-wrapper .sd-domain-mini__banner-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--sd-heading);
    letter-spacing: -0.02em;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid var(--sdg-accent);
    margin-bottom: 0.35rem;
}
.content-wrapper .sd-domain-mini__banner-desc {
    max-width: 22rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4;
}
.content-wrapper .sd-domain-mini {
    border: 3px solid var(--sdg-accent);
    border-radius: var(--sd-radius-sm);
    padding: 0.65rem 0.85rem;
    background: var(--sd-surface);
    box-shadow: var(--sd-shadow-sm);
    flex: 1 1 auto;
}
.content-wrapper .sd-domain-mini__ex {
    font-size: 0.75rem;
    margin-bottom: 0.45rem;
    line-height: 1.35;
}
.content-wrapper .sd-domain-mini__ex code {
    color: var(--sdg-accent);
    font-weight: 600;
    background: color-mix(in srgb, var(--sdg-accent) 8%, var(--sd-surface));
    padding: 0.06rem 0.28rem;
    border-radius: 4px;
    font-size: 0.8125rem;
}
.content-wrapper .sd-domain-mini__steps {
    padding-left: 1.1rem;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--sd-heading);
}
.content-wrapper .sd-domain-mini__steps > li {
    margin-bottom: 0.35rem;
}
.content-wrapper .sd-domain-mini__steps > li:last-child {
    margin-bottom: 0;
}
.content-wrapper .sd-domain-mini__table {
    font-size: 0.75rem;
    border-color: var(--sd-border) !important;
    margin-bottom: 0;
}
.content-wrapper .sd-domain-mini__table td {
    padding: 0.25rem 0.4rem;
    vertical-align: middle;
    border-color: var(--sd-border) !important;
}
.content-wrapper .sd-domain-mini__table code {
    color: var(--sdg-accent);
    font-weight: 600;
    background: transparent;
    font-size: 0.8rem;
}
.content-wrapper .sd-domain-mini__copy {
    border-radius: 6px;
    font-size: 0.65rem;
    padding: 0.06rem 0.32rem;
    line-height: 1.4;
    border: 1px solid color-mix(in srgb, var(--sdg-accent) 30%, #ced4da);
    color: var(--sdg-accent);
    background: var(--sd-surface);
    vertical-align: middle;
}
.content-wrapper .sd-domain-mini__copy:hover {
    background: color-mix(in srgb, var(--sdg-accent) 10%, var(--sd-surface));
}
.content-wrapper .sd-domain-mini__warn {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--sd-muted);
    padding: 0.45rem 0.55rem;
    border-radius: var(--sd-radius-sm);
    background: color-mix(in srgb, var(--sdg-accent) 6%, var(--sd-surface-soft));
    border: 1px solid var(--sd-border);
}

/* —— Subscription plans (school admin) —— */
.sub-plans-page:not(.sub-plans-page--ready) .sub-plan-card__actions .btn,
.sub-plans-page:not(.sub-plans-page--ready) .sub-plan-card__actions a.btn {
    pointer-events: none;
    opacity: 0.55;
    cursor: not-allowed;
}

.content-wrapper .sub-plans-page .pricing-table {
    align-items: stretch;
    justify-content: center;
}

.content-wrapper .sub-plans-page .pricing-card {
    overflow: visible;
    padding-top: 0.75rem;
}

.content-wrapper .sub-plan-card-wrap {
    position: relative;
    height: 100%;
    width: 100%;
}

.content-wrapper .sub-plan-card__type-badge-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    z-index: 5;
    transform: translateY(-50%);
    pointer-events: none;
}

.content-wrapper .sub-plan-card__type-badge-wrap .sub-plan-card__type-badge {
    pointer-events: auto;
}

.content-wrapper .sub-plan-card__type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.5rem;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    border: 2px solid var(--sd-surface);
    box-shadow: var(--sd-shadow-sm);
    white-space: nowrap;
}

.content-wrapper .sub-plan-card__type-badge--prepaid {
    background: var(--theme-color, #56cc99);
}

.content-wrapper .sub-plan-card__type-badge--postpaid {
    background: color-mix(in srgb, var(--theme-color, #56cc99) 45%, var(--sd-heading, #1f2937) 55%);
}

.content-wrapper .sub-current-plan-hero {
    position: relative;
    margin-bottom: 1.5rem;
    border: 1px solid var(--sd-border);
    border-left: 3px solid var(--theme-color, #56cc99);
    border-radius: var(--sd-radius, 12px);
    background: var(--sd-surface-soft);
    box-shadow: var(--sd-shadow-sm);
}

.content-wrapper .sub-current-plan-hero__inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.content-wrapper .sub-current-plan-hero__brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex: 1 1 auto;
    min-width: 0;
}

.content-wrapper .sub-current-plan-hero__mark {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--sd-radius-sm, 8px);
    font-size: 1rem;
    color: var(--theme-color, #56cc99);
    background: color-mix(in srgb, var(--theme-color, #56cc99) 12%, var(--sd-surface));
}

.content-wrapper .sub-current-plan-hero__brand-text {
    min-width: 0;
}

.content-wrapper .sub-current-plan-hero__eyebrow {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--theme-color, #56cc99);
    margin-bottom: 0.15rem;
}

.content-wrapper .sub-current-plan-hero__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--sd-heading);
    margin: 0;
    line-height: 1.25;
}

.content-wrapper .sub-current-plan-hero__desc {
    margin: 0.2rem 0 0;
    font-size: 0.8125rem;
    color: var(--sd-muted);
    line-height: 1.4;
}

.content-wrapper .sub-current-plan-hero__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, auto));
    align-items: center;
    flex: 0 0 auto;
    gap: 0 0.5rem;
}

.content-wrapper .sub-current-plan-hero__stats--trial {
    grid-template-columns: repeat(3, minmax(0, auto));
}

.content-wrapper .sub-current-plan-hero__stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0 1rem;
    border-right: 1px solid var(--sd-border);
    min-width: 0;
}

.content-wrapper .sub-current-plan-hero__stat:last-child {
    border-right: none;
    padding-right: 0;
}

.content-wrapper .sub-current-plan-hero__stat:first-child {
    padding-left: 0;
}

.content-wrapper .sub-current-plan-hero__stat-label {
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sd-muted);
    line-height: 1.2;
}

.content-wrapper .sub-current-plan-hero__stat-value {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--sd-heading);
    white-space: nowrap;
    line-height: 1.3;
}

.content-wrapper .sub-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--sd-radius-lg, 18px) !important;
    border: 1px solid var(--sd-border) !important;
    background: var(--sd-surface);
    box-shadow: var(--sd-shadow-sm);
    padding: 0 !important;
    overflow: hidden;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.content-wrapper .sub-plan-card-wrap .sub-plan-card {
    height: 100%;
}

.content-wrapper .sub-plan-card-wrap:hover .sub-plan-card.pricing-card-body {
    transform: translateY(-4px);
    box-shadow: var(--sd-shadow);
}

.content-wrapper .sub-plan-card--featured .sub-plan-card__body {
    padding-top: 1.15rem;
}

.content-wrapper .sub-plan-card--current {
    border: 2px solid color-mix(in srgb, var(--theme-color, #56cc99) 70%, var(--sd-border) 30%) !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--theme-color, #56cc99) 12%, transparent),
        var(--sd-shadow);
}

.content-wrapper .sub-plan-card--featured:not(.sub-plan-card--current) {
    border-color: color-mix(
        in srgb,
        var(--theme-color, #56cc99) 35%,
        var(--sd-border) 65%
    ) !important;
}

.content-wrapper .sub-plan-card__ribbon {
    position: absolute;
    top: 10px;
    right: -34px;
    z-index: 2;
    width: 110px;
    padding: 0.4rem 0;
    text-align: center;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--theme-color, #56cc99);
    transform: rotate(45deg);
    box-shadow: var(--sd-shadow-sm);
    pointer-events: none;
}

.content-wrapper .sub-plan-card__active-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin: 0 auto 0.65rem;
    padding: 0.32rem 0.75rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--theme-color, #56cc99);
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--theme-color, #56cc99) 60%, transparent);
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
}

.content-wrapper .sub-plan-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.25rem 1.25rem 1.1rem;
}

.content-wrapper .sub-plan-card__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--sd-border-soft);
}

.content-wrapper .sub-plan-card--current .sub-plan-card__body {
    padding-top: 1.35rem;
}

.content-wrapper .sub-plan-card__name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--sd-heading);
    margin: 0 0 0.35rem;
}

.content-wrapper .sub-plan-card__tagline {
    font-size: 0.82rem;
    color: var(--sd-muted);
    margin: 0 0 0.85rem;
    min-height: 2.4em;
}

.content-wrapper .sub-plan-card__price-block {
    padding: 0.75rem 0.5rem;
    border-radius: var(--sd-radius-sm);
    background: var(--sd-surface-soft);
    border: 1px solid var(--sd-border-soft);
}

.content-wrapper .sub-plan-card__price {
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--sd-heading);
    margin: 0;
}

.content-wrapper .sub-plan-card__price-meta {
    font-size: 0.78rem;
    color: var(--sd-muted);
    margin: 0.35rem 0 0;
}

.content-wrapper .sub-plan-card__limits {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.65rem;
}

.content-wrapper .sub-plan-card__limit-chip {
    font-size: 0.72rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--sd-surface);
    border: 1px solid var(--sd-border);
    color: var(--sd-muted);
}

.content-wrapper .sub-plan-features {
    flex: 1;
    margin-bottom: 1rem;
}

.content-wrapper .sub-plan-features__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.content-wrapper .sub-plan-features__title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sd-muted);
    margin: 0;
}

.content-wrapper .sub-plan-features__count {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    color: var(--theme-color, #56cc99);
    background: color-mix(in srgb, var(--theme-color, #56cc99) 12%, var(--sd-surface));
    border: 1px solid color-mix(in srgb, var(--theme-color, #56cc99) 22%, var(--sd-border));
}

.content-wrapper .sub-plan-features__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
}

.content-wrapper .sub-plan-features__item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.42rem 0;
    font-size: 0.84rem;
    line-height: 1.35;
    border-bottom: 1px solid var(--sd-border-soft);
}

.content-wrapper .sub-plan-features__item:last-child {
    border-bottom: none;
}

.content-wrapper .sub-plan-features__icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    margin-top: 0.1rem;
}

.content-wrapper .sub-plan-features__item.is-included .sub-plan-features__icon {
    color: #fff;
    background: var(--theme-color, #56cc99);
}

.content-wrapper .sub-plan-features__item.is-excluded .sub-plan-features__icon {
    color: var(--sd-muted);
    background: var(--sd-surface-soft);
    border: 1px solid var(--sd-border);
}

.content-wrapper .sub-plan-features__item.is-excluded .sub-plan-features__label {
    color: var(--sd-muted);
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--sd-muted) 50%, transparent);
}

.content-wrapper .sub-plan-features__label {
    color: var(--sd-heading);
    font-weight: 500;
}

.content-wrapper .sub-plan-card__actions {
    margin-top: auto;
    padding-top: 0.25rem;
}

.content-wrapper .sub-plan-card__actions .btn {
    border-radius: var(--sd-radius-sm);
}

.content-wrapper .sub-plan-card--current .sub-plan-card__actions .btn.disabled {
    opacity: 1;
    border-width: 2px;
    font-weight: 600;
}

.content-wrapper .sub-plans-note {
    border-radius: var(--sd-radius-sm);
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    color: color-mix(in srgb, #b45309 85%, var(--sd-heading));
    background: color-mix(in srgb, #f59e0b 10%, var(--sd-surface));
    border: 1px solid color-mix(in srgb, #f59e0b 28%, var(--sd-border));
}

@media (max-width: 991.98px) {
    .content-wrapper .sub-current-plan-hero__inner {
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 1rem;
    }

    .content-wrapper .sub-current-plan-hero__brand {
        flex: 1 1 100%;
        width: 100%;
    }

    .content-wrapper .sub-current-plan-hero__stats,
    .content-wrapper .sub-current-plan-hero__stats--trial {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem 0;
        padding-top: 0.85rem;
        border-top: 1px solid var(--sd-border);
    }

    .content-wrapper .sub-current-plan-hero__stat {
        padding: 0 0.5rem;
        border-right: none;
    }

    .content-wrapper .sub-current-plan-hero__stat:nth-child(odd) {
        padding-left: 0;
        padding-right: 0.75rem;
        border-right: 1px solid var(--sd-border);
    }

    .content-wrapper .sub-current-plan-hero__stat:nth-child(even) {
        padding-right: 0;
    }

    .content-wrapper .sub-current-plan-hero__stats--trial .sub-current-plan-hero__stat:last-child {
        grid-column: 1 / -1;
        padding-top: 0.25rem;
        border-right: none;
        border-top: 1px solid var(--sd-border);
        padding-left: 0;
    }
}

@media (max-width: 575.98px) {
    .content-wrapper .sub-current-plan-hero__title {
        font-size: 1rem;
    }

    .content-wrapper .sub-current-plan-hero__stat-value {
        font-size: 0.8125rem;
        white-space: normal;
    }
}

/* ====== Payment preview modal — brand-grade redesign ====== */
#subscriptionGstModal {
    --spm-theme: var(--theme-color, #4e73df);
    --spm-ink: var(--sd-heading, #0f172a);
    --spm-ink-soft: var(--sd-muted, #475569);
    --spm-muted: #94a3b8;
    --spm-border: var(--sd-border, #e5e7eb);
    --spm-border-soft: #f1f5f9;
    --spm-surface: transparent;
    --spm-canvas: transparent;
}

#subscriptionGstModal .sub-gst-modal-dialog {
    max-width: 480px;
    width: calc(100% - 2rem);
}

#subscriptionGstModal .sub-gst-modal {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 30px 80px -28px rgba(15, 23, 42, 0.35);
    overflow: hidden;
    background: white
}

/* Header */
#subscriptionGstModal .modal-header {
    border-bottom: 0;
    padding: 1.5rem 1.75rem 0.5rem;
    background: var(--spm-surface);
    align-items: flex-start;
}

#subscriptionGstModal .sub-gst-modal__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--spm-ink);
    letter-spacing: -0.01em;
}

#subscriptionGstModal .sub-gst-modal__subtitle {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    color: var(--spm-ink-soft);
    line-height: 1.45;
}

#subscriptionGstModal .modal-header .close {
    position: relative;
    opacity: 1;
    text-shadow: none;
    color: var(--spm-muted);
    font-size: 1.45rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}

#subscriptionGstModal .modal-header .close:hover,
#subscriptionGstModal .modal-header .close:focus {
    background: var(--spm-canvas);
    color: var(--spm-ink);
    outline: none;
}

/* Body */
#subscriptionGstModal .modal-body {
    padding: 1rem 1.75rem 1.25rem;
    background: var(--spm-surface);
}

/* Plan banner */
#subscriptionGstModal .spm-plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    border: 1px solid var(--spm-border);
    background: var(--spm-canvas);
    margin-bottom: 1.25rem;
}

#subscriptionGstModal .spm-plan__meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

#subscriptionGstModal .spm-plan__eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--spm-muted);
}

#subscriptionGstModal .spm-plan__name {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--spm-ink);
    line-height: 1.25;
    word-break: break-word;
}

#subscriptionGstModal .spm-plan__amount {
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--spm-ink);
    white-space: nowrap;
    letter-spacing: -0.01em;
}

/* Tax line items */
#subscriptionGstModal .spm-tax-group {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

#subscriptionGstModal .spm-tax-group + .spm-tax-group {
    margin-top: 0.55rem;
}

#subscriptionGstModal .spm-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.9375rem;
    color: var(--spm-ink-soft);
    line-height: 1.35;
}

#subscriptionGstModal .spm-line__label {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    min-width: 0;
}

#subscriptionGstModal .spm-line__name {
    font-weight: 500;
    color: var(--spm-ink-soft);
}

#subscriptionGstModal .spm-line__rate {
    font-size: 0.8125rem;
    color: var(--spm-muted);
}

#subscriptionGstModal .spm-line__value {
    font-weight: 600;
    color: var(--spm-ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

#subscriptionGstModal .spm-divider {
    height: 1px;
    margin: 0.75rem 0;
    background: var(--spm-border);
    border: 0;
}

/* Total row */
#subscriptionGstModal .spm-total {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.25rem 0 0.5rem;
}

#subscriptionGstModal .spm-total__label {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

#subscriptionGstModal .spm-total__name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--spm-ink);
}

#subscriptionGstModal .spm-total__hint {
    font-size: 0.75rem;
    color: var(--spm-muted);
}

#subscriptionGstModal .spm-total__amount {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--spm-ink);
    letter-spacing: -0.025em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* GSTIN input */
#subscriptionGstModal .spm-gstin {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--spm-border-soft);
}

#subscriptionGstModal .spm-gstin__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

#subscriptionGstModal .spm-gstin__label label {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--spm-ink);
}

#subscriptionGstModal .spm-gstin__optional {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--spm-muted);
}

#subscriptionGstModal .spm-gstin .form-control {
    border-radius: 10px;
    border: 1px solid var(--spm-border);
    font-size: 0.9375rem;
    padding: 0.625rem 0.85rem;
    color: var(--spm-ink);
    background: var(--spm-surface);
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
    height: auto;
}

#subscriptionGstModal .spm-gstin .form-control:focus {
    border-color: color-mix(in srgb, var(--spm-theme) 55%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--spm-theme) 14%, transparent);
    outline: none;
}

#subscriptionGstModal .spm-gstin__help {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.75rem;
    color: var(--spm-muted);
    line-height: 1.4;
}

/* Footer */
#subscriptionGstModal .modal-footer {
    border-top: 1px solid var(--spm-border-soft);
    background: var(--spm-canvas);
    padding: 1rem 1.75rem;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

#subscriptionGstModal .modal-footer .btn {
    border-radius: 10px;
    font-weight: 600;
    padding: 0.55rem 1.15rem;
    font-size: 0.875rem;
}

/* Responsive */
@media (max-width: 575.98px) {
    #subscriptionGstModal .modal-header,
    #subscriptionGstModal .modal-body,
    #subscriptionGstModal .modal-footer {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    #subscriptionGstModal .spm-plan {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    #subscriptionGstModal .spm-total {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    #subscriptionGstModal .spm-total__amount {
        font-size: 1.625rem;
    }

    #subscriptionGstModal .modal-footer {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

/* Subscription history — bill details modal (#editModal) */
#editModal.modal {
    padding-right: 0;
}
#editModal .modal-dialog {
    margin: 1.75rem auto;
    max-width: 900px;
    width: calc(100% - 2rem);
}
#editModal .modal-dialog.modal-dialog-centered {
    margin-top: auto;
    margin-bottom: auto;
}
#editModal .modal-body {
    max-height: min(70vh, calc(100vh - 12rem));
    overflow-y: auto;
}
#editModal .modal-footer {
    border-top: 1px solid var(--sd-border, rgba(15, 23, 42, 0.07));
    gap: 0.5rem;
}

.profile-card {
    overflow: hidden;
}
.profile-card > .card-body {
    padding-top: 1.25rem;
}

/* Cover */
.profile-cover {
    height: 200px;
    background: transparent;
    position: relative;
    border-bottom: 2px solid #e0e0e0;
}
.profile-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.18), transparent 38%),
        radial-gradient(circle at 82% 75%, rgba(255, 255, 255, 0.1), transparent 42%);
    pointer-events: none;
}

/* ── Profile settings — cover image ──────────────────────── */
.profile-cover-img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}
.profile-card .profile-cover.has-cover {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: unset !important;
}
.profile-cover-file-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ── Cover action buttons ─────────────────────────────────── */
.profile-cover-edit-btn,
.profile-cover-remove-btn {
    position: absolute;
    top: 14px;
    z-index: 15;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    border-radius: 8px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.18s;
}
.profile-cover-edit-btn {
    right: 16px;
    background: rgba(0, 0, 0, 0.45);
}
.profile-cover-edit-btn:hover {
    background: rgba(0, 0, 0, 0.65);
}
.profile-cover-remove-btn {
    right: 152px;
    background: rgba(185, 28, 28, 0.55);
}
.profile-cover-remove-btn:hover {
    background: rgba(185, 28, 28, 0.8);
}

/* ── Empty-state banner: shared lavender bg ───────────────── */
.profile-cover.super-banner-mode,
.profile-cover.school-banner-mode {
    background: linear-gradient(135deg, #eff1fd 0%, #edf0fb 55%, #f3effe 100%);
}
.profile-cover.school-banner-mode {
    height: auto !important;
    min-height: 250px;
}

/* Shared top accent stripe */
.profile-cover.super-banner-mode::before,
.school-cover-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--theme-color, #22577a) 30%,
        var(--theme-color, #22577a) 70%,
        transparent 100%
    );
    z-index: 5;
    pointer-events: none;
}

/* ── Super Admin empty state ──────────────────────────────── */
.cover-empty-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 1rem 2rem;
    overflow: hidden;
}
.cover-empty-state .cover-app-name {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--theme-color, #22577a);
    letter-spacing: 0.4px;
    line-height: 1.2;
    margin: 0;
    position: relative;
    z-index: 1;
}
.cover-empty-state .cover-tagline {
    font-size: 0.875rem;
    color: #6b7280;
    letter-spacing: 0.2px;
    margin: 0;
    position: relative;
    z-index: 1;
}
.cover-empty-state .cover-upload-hint {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--theme-color, #22577a);
    background: rgba(255, 255, 255, 0.7);
    border: 1.5px dashed color-mix(in srgb, var(--theme-color, #22577a) 40%, transparent);
    border-radius: 20px;
    padding: 5px 14px;
    backdrop-filter: blur(4px);
    cursor: pointer;
    position: relative;
    z-index: 1;
}
.cover-empty-state .cover-upload-hint:hover {
    background: rgba(255, 255, 255, 0.9);
}

/* ── School Admin banner ──────────────────────────────────── */
.school-cover-banner {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.75rem 3.5rem 2rem;
    min-height: 200px;
    text-align: center;
    overflow: hidden;
    gap: 0;
}
.school-cover-banner::after {
    display: none;
}

/* Shared decorative bg circles */
.scb-bg {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.scb-bg-tr {
    width: 240px;
    height: 240px;
    top: -90px;
    right: -75px;
    background: color-mix(in srgb, var(--theme-color, #22577a) 9%, transparent);
}
.scb-bg-bl {
    width: 170px;
    height: 170px;
    bottom: -75px;
    left: -55px;
    background: color-mix(in srgb, var(--theme-color, #22577a) 7%, transparent);
}

.scb-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 50%;
    background: #fff;
    padding: 5px;
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.11);
    border: 2px solid rgba(255, 255, 255, 0.95);
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
.scb-name {
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    font-weight: 800;
    color: var(--theme-color, #22577a);
    margin: 0;
    line-height: 1.2;
    word-break: break-word;
    position: relative;
    z-index: 1;
}
.scb-badge-row {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 5px 0 0;
    position: relative;
    z-index: 1;
}
.scb-badge {
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 9px;
    border-radius: 4px;
    line-height: 1.5;
}
.scb-badge-inst {
    color: var(--theme-color, #22577a);
    background: color-mix(in srgb, var(--theme-color, #22577a) 11%, #fff);
    border: 1px solid color-mix(in srgb, var(--theme-color, #22577a) 24%, transparent);
}
.scb-badge-cat {
    color: #4b5563;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.11);
}
.scb-tagline {
    font-size: 0.84rem;
    color: #6b7280;
    margin: 4px 0 0;
    position: relative;
    z-index: 1;
}
.scb-sep {
    width: 55%;
    max-width: 360px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.12), transparent);
    margin: 12px 0;
    position: relative;
    z-index: 1;
}
.scb-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    position: relative;
    z-index: 1;
}
.scb-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.73rem;
    color: #374151;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    padding: 3px 10px 3px 7px;
    backdrop-filter: blur(4px);
    white-space: nowrap;
}
.scb-chip i {
    font-size: 0.7rem;
    color: var(--theme-color, #22577a);
    width: 12px;
    text-align: center;
    flex-shrink: 0;
}
.scb-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.scb-chip-code {
    font-weight: 600;
    background: color-mix(in srgb, var(--theme-color, #22577a) 8%, rgba(255, 255, 255, 0.8));
    border-color: color-mix(in srgb, var(--theme-color, #22577a) 20%, transparent);
}
.scb-upload-btn {
    margin-top: 11px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--theme-color, #22577a);
    background: rgba(255, 255, 255, 0.7);
    border: 1.5px dashed color-mix(in srgb, var(--theme-color, #22577a) 40%, transparent);
    border-radius: 20px;
    padding: 5px 14px;
    backdrop-filter: blur(4px);
    cursor: pointer;
    transition: background 0.18s;
    position: relative;
    z-index: 1;
}
.scb-upload-btn:hover {
    background: rgba(255, 255, 255, 0.92);
}

/* ── Settings page scoped overrides ──────────────────────── */
.profile-settings-page .nav-item {
    margin-right: 0 !important;
}
.profile-settings-page .tab-content {
    padding: 0;
    border: 0;
}
.whatsapp-addon {
    font-size: 16px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.whatsapp-addon i {
    color: #25d366;
}

@media (max-width: 768px) {
    .school-cover-banner {
        padding: 1.5rem 1.75rem 1.75rem;
    }
    .scb-logo {
        width: 52px;
        height: 52px;
    }
    .scb-chip {
        font-size: 0.7rem;
    }
    .scb-bg-tr {
        width: 180px;
        height: 180px;
        top: -65px;
        right: -55px;
    }
    .scb-bg-bl {
        width: 130px;
        height: 130px;
        bottom: -55px;
        left: -40px;
    }
}
@media (max-width: 480px) {
    .school-cover-banner {
        padding: 1.25rem 1rem 1.5rem;
    }
    .scb-logo {
        width: 44px;
        height: 44px;
        margin-bottom: 7px;
    }
    .scb-tagline {
        display: none;
    }
    .scb-sep {
        margin: 8px 0;
    }
    .scb-chip {
        font-size: 0.67rem;
        padding: 2px 8px 2px 6px;
    }
    .scb-chip span {
        max-width: 130px;
    }
    .scb-upload-btn {
        font-size: 0.68rem;
        padding: 4px 10px;
        margin-top: 7px;
    }
}

/* Profile strip */
.profile-strip {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 1.5rem 1rem;
    margin-top: -56px;
    position: relative;
    z-index: 1;
}

.profile-strip-avatar {
    position: relative;
    flex: 0 0 112px;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    overflow: visible;
    background: transparent;
    border: 4px solid var(--sd-surface, #fff);
    box-shadow: var(--sd-shadow, 0 8px 24px -16px rgba(15, 23, 42, 0.32));
}

.profile-strip-avatar-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: var(--sd-surface, #fff);
}

.profile-strip-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-avatar-file-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.profile-avatar-edit-btn {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sd-surface, #fff);
    color: var(--theme-color, var(--primary, #6571ff));
    box-shadow: var(--sd-shadow-sm, 0 2px 8px rgba(15, 23, 42, 0.18));
    cursor: pointer;
    z-index: 2;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.profile-avatar-edit-btn:hover {
    transform: scale(1.05);
    box-shadow: var(--sd-shadow, 0 4px 12px rgba(15, 23, 42, 0.22));
}

.profile-avatar-edit-btn:focus {
    outline: 2px solid var(--theme-color, var(--primary, #6571ff));
    outline-offset: 2px;
}

.profile-strip-info {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 48px; /* aligns with bottom half of avatar */
}

.profile-strip-name {
    font-weight: 700;
    color: var(--sd-heading, #1f2937);
    margin-top: 17px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Twitter-style blue verified badge — stacked fa-certificate + fa-check.
   FA's .fa-stack defaults (width/height/line-height: 2em) handle centering;
   we only set the overall scale via font-size + tint the icons. */
.profile-verified {
    font-size: 0.65rem;
    vertical-align: middle;
    margin-left: 2px;
    filter: drop-shadow(0 2px 6px rgba(29, 155, 240, 0.35));
}
.profile-verified .fa-certificate {
    color: #1d9bf0;
}
.profile-verified .fa-check {
    color: #fff;
    font-size: 0.85em;
}

.profile-strip-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 4px;
    color: var(--sd-muted, #6b7280);
    font-size: 0.875rem;
}
.profile-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.profile-meta-item i {
    color: var(--theme-color, var(--primary, #6571ff));
}

/* Tabs card — its own padded card, scrollable on overflow */
.profile-tabs-card {
    padding: 0.5rem 0.75rem;
}

/* Settings profile — tab bar pinned below navbar on scroll (JS: profile-settings-sticky-tabs.js) */
.profile-settings-page .profile-tabs-sticky.is-fixed {
    position: fixed;
    z-index: 1020;
    margin-bottom: 0;
    margin-top: 10px;
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border: 1px solid #a9a9a9;
    border-radius: var(--sd-radius, 12px);
    box-shadow: var(--sd-shadow-sm, 0 4px 16px -4px rgba(15, 23, 42, 0.14));
}

.profile-settings-tabs-placeholder {
    display: block;
    width: 100%;
}

/* Known languages — custom picker (no Select2) */
.known-languages-picker {
    width: 100%;
}

.known-languages-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
    min-height: 0;
}

.known-languages-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.45rem;
    font-size: 0.8125rem;
    border-radius: var(--sd-radius-sm, 8px);
    background: color-mix(
        in srgb,
        var(--theme-color, var(--primary, #6571ff)) 10%,
        var(--sd-surface, #fff)
    );
    border: 1px solid var(--sd-border, rgba(15, 23, 42, 0.1));
    color: var(--sd-heading, #334155);
}

.known-languages-chip-remove {
    border: none;
    background: transparent;
    padding: 0 0.15rem;
    line-height: 1;
    font-size: 1rem;
    color: var(--sd-muted, #64748b);
    cursor: pointer;
}

.known-languages-control {
    position: relative;
}

.known-languages-panel {
    position: absolute;
    z-index: 1050;
    left: 0;
    right: 0;
    margin-top: 0.25rem;
    max-height: 220px;
    overflow-y: auto;
    background: var(--sd-surface, #fff);
    border: 1px solid var(--sd-border, rgba(15, 23, 42, 0.12));
    border-radius: var(--sd-radius-sm, 8px);
    box-shadow: var(--sd-shadow-sm, 0 4px 12px rgba(15, 23, 42, 0.1));
}

.known-languages-option {
    padding: 0.45rem 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
    color: var(--sd-heading, #334155);
}

.known-languages-option:hover,
.known-languages-option.is-selected {
    background: color-mix(in srgb, var(--theme-color, var(--primary, #6571ff)) 8%, transparent);
}

.known-languages-add {
    font-weight: 600;
    color: var(--theme-color, var(--primary, #6571ff));
    border-top: 1px solid var(--sd-border-soft, rgba(15, 23, 42, 0.06));
}
.profile-tabs {
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0;
}
.profile-tabs::-webkit-scrollbar {
    display: none;
}
.profile-tabs .nav-item {
    flex: 0 0 auto;
}
.profile-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.9rem;
    border-radius: var(--sd-radius-sm, 10px);
    color: var(--sd-muted, #6b7280);
    font-weight: 500;
    white-space: nowrap;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}
.profile-tabs .nav-link:hover {
    color: var(--theme-color, var(--primary, #6571ff));
    background: color-mix(in srgb, var(--theme-color, var(--primary, #6571ff)) 6%, transparent);
}
.profile-tabs .nav-link.active {
    background: var(--theme-color, var(--primary, #6571ff));
    color: #fff;
    box-shadow: var(--sd-shadow-sm, 0 2px 6px -3px rgba(15, 23, 42, 0.1));
}

/* Responsive */
@media (max-width: 767.98px) {
    .profile-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 0 1rem 1rem;
        margin-top: -48px;
    }
    .profile-strip-avatar {
        flex-basis: 96px;
        width: 96px;
        height: 96px;
    }
    .profile-strip-info {
        padding-top: 0;
        width: 100%;
        margin-left: 9px;
    }
    .profile-strip-name {
        margin-top: 0;
    }
}

@media (max-width: 575.98px) {
    .profile-strip-avatar {
        flex-basis: 84px;
        width: 84px;
        height: 84px;
    }
}

/* Section wrapper */
.profile-section {
    padding: 1rem 0 0.5rem;
    margin-bottom: 1rem;
    border-top: 1px solid var(--sd-border-soft, rgba(15, 23, 42, 0.05));
}

.profile-section:first-of-type {
    border-top: none;
    padding-top: 0.25rem;
}

.profile-form .form-section-title {
    margin-bottom: 0.85rem;
}

/* Two-factor toggle row */
.profile-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: var(--sd-surface-soft, #faf8fd);
    border: 1px solid var(--sd-border, rgba(15, 23, 42, 0.07));
    border-radius: var(--sd-radius-sm, 10px);
}

.profile-toggle-meta {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    word-spacing: normal;
    letter-spacing: normal;
}

.profile-toggle-meta strong,
.profile-toggle-meta small {
    text-align: left;
    word-spacing: normal;
    letter-spacing: normal;
    line-height: 1.35;
}

.profile-toggle-meta strong {
    color: var(--sd-heading, #1f2937);
    font-size: 0.95rem;
}

.profile-toggle-meta small {
    font-size: 0.8rem;
}

/* Pill switch */
.profile-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    min-width: 44px;
    height: 24px;
    flex: none;
}

.profile-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.profile-switch-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: #cbd5e1;
    border-radius: 999px;
    transition: background-color 0.2s ease;
}

.profile-switch-slider::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease;
}

.profile-switch input:checked + .profile-switch-slider {
    background: var(--theme-color, var(--primary, #6571ff));
}

.profile-switch input:checked + .profile-switch-slider::before {
    transform: translateX(20px);
}

.profile-switch input:focus-visible + .profile-switch-slider {
    box-shadow: 0 0 0 3px
        color-mix(in srgb, var(--theme-color, var(--primary, #6571ff)) 22%, transparent);
}

/* Submit area */
.profile-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 1rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--sd-border-soft, rgba(15, 23, 42, 0.05));
}

.profile-actions .btn {
    min-width: 140px;
}

/* Responsive */
@media (max-width: 575.98px) {
    .profile-toggle-row {
        padding: 12px 14px;
        gap: 12px;
    }
    .profile-actions {
        justify-content: stretch;
    }
    .profile-actions .btn {
        width: 100%;
    }
}

/* ============================================================
   Bootstrap 5 gap / row-gap / column-gap utilities
   (omitted from the BS5 build shipped in style.min.css —
   added here for parity with the official BS5 spec)
   Scale: 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem
   Breakpoints: sm 576, md 768, lg 992, xl 1200, xxl 1400
   ============================================================ */
.gap-0 {
    gap: 0 !important;
}
.gap-1 {
    gap: 0.25rem !important;
}
.gap-2 {
    gap: 0.5rem !important;
}
.gap-3 {
    gap: 1rem !important;
}
.gap-4 {
    gap: 1.5rem !important;
}
.gap-5 {
    gap: 3rem !important;
}

.row-gap-0 {
    row-gap: 0 !important;
}
.row-gap-1 {
    row-gap: 0.25rem !important;
}
.row-gap-2 {
    row-gap: 0.5rem !important;
}
.row-gap-3 {
    row-gap: 1rem !important;
}
.row-gap-4 {
    row-gap: 1.5rem !important;
}
.row-gap-5 {
    row-gap: 3rem !important;
}

.column-gap-0 {
    column-gap: 0 !important;
}
.column-gap-1 {
    column-gap: 0.25rem !important;
}
.column-gap-2 {
    column-gap: 0.5rem !important;
}
.column-gap-3 {
    column-gap: 1rem !important;
}
.column-gap-4 {
    column-gap: 1.5rem !important;
}
.column-gap-5 {
    column-gap: 3rem !important;
}

@media (min-width: 576px) {
    .gap-sm-0 {
        gap: 0 !important;
    }
    .gap-sm-1 {
        gap: 0.25rem !important;
    }
    .gap-sm-2 {
        gap: 0.5rem !important;
    }
    .gap-sm-3 {
        gap: 1rem !important;
    }
    .gap-sm-4 {
        gap: 1.5rem !important;
    }
    .gap-sm-5 {
        gap: 3rem !important;
    }
    .row-gap-sm-0 {
        row-gap: 0 !important;
    }
    .row-gap-sm-1 {
        row-gap: 0.25rem !important;
    }
    .row-gap-sm-2 {
        row-gap: 0.5rem !important;
    }
    .row-gap-sm-3 {
        row-gap: 1rem !important;
    }
    .row-gap-sm-4 {
        row-gap: 1.5rem !important;
    }
    .row-gap-sm-5 {
        row-gap: 3rem !important;
    }
    .column-gap-sm-0 {
        column-gap: 0 !important;
    }
    .column-gap-sm-1 {
        column-gap: 0.25rem !important;
    }
    .column-gap-sm-2 {
        column-gap: 0.5rem !important;
    }
    .column-gap-sm-3 {
        column-gap: 1rem !important;
    }
    .column-gap-sm-4 {
        column-gap: 1.5rem !important;
    }
    .column-gap-sm-5 {
        column-gap: 3rem !important;
    }
}

@media (min-width: 768px) {
    .gap-md-0 {
        gap: 0 !important;
    }
    .gap-md-1 {
        gap: 0.25rem !important;
    }
    .gap-md-2 {
        gap: 0.5rem !important;
    }
    .gap-md-3 {
        gap: 1rem !important;
    }
    .gap-md-4 {
        gap: 1.5rem !important;
    }
    .gap-md-5 {
        gap: 3rem !important;
    }
    .row-gap-md-0 {
        row-gap: 0 !important;
    }
    .row-gap-md-1 {
        row-gap: 0.25rem !important;
    }
    .row-gap-md-2 {
        row-gap: 0.5rem !important;
    }
    .row-gap-md-3 {
        row-gap: 1rem !important;
    }
    .row-gap-md-4 {
        row-gap: 1.5rem !important;
    }
    .row-gap-md-5 {
        row-gap: 3rem !important;
    }
    .column-gap-md-0 {
        column-gap: 0 !important;
    }
    .column-gap-md-1 {
        column-gap: 0.25rem !important;
    }
    .column-gap-md-2 {
        column-gap: 0.5rem !important;
    }
    .column-gap-md-3 {
        column-gap: 1rem !important;
    }
    .column-gap-md-4 {
        column-gap: 1.5rem !important;
    }
    .column-gap-md-5 {
        column-gap: 3rem !important;
    }
}

@media (min-width: 992px) {
    .gap-lg-0 {
        gap: 0 !important;
    }
    .gap-lg-1 {
        gap: 0.25rem !important;
    }
    .gap-lg-2 {
        gap: 0.5rem !important;
    }
    .gap-lg-3 {
        gap: 1rem !important;
    }
    .gap-lg-4 {
        gap: 1.5rem !important;
    }
    .gap-lg-5 {
        gap: 3rem !important;
    }
    .row-gap-lg-0 {
        row-gap: 0 !important;
    }
    .row-gap-lg-1 {
        row-gap: 0.25rem !important;
    }
    .row-gap-lg-2 {
        row-gap: 0.5rem !important;
    }
    .row-gap-lg-3 {
        row-gap: 1rem !important;
    }
    .row-gap-lg-4 {
        row-gap: 1.5rem !important;
    }
    .row-gap-lg-5 {
        row-gap: 3rem !important;
    }
    .column-gap-lg-0 {
        column-gap: 0 !important;
    }
    .column-gap-lg-1 {
        column-gap: 0.25rem !important;
    }
    .column-gap-lg-2 {
        column-gap: 0.5rem !important;
    }
    .column-gap-lg-3 {
        column-gap: 1rem !important;
    }
    .column-gap-lg-4 {
        column-gap: 1.5rem !important;
    }
    .column-gap-lg-5 {
        column-gap: 3rem !important;
    }
}

@media (min-width: 1200px) {
    .gap-xl-0 {
        gap: 0 !important;
    }
    .gap-xl-1 {
        gap: 0.25rem !important;
    }
    .gap-xl-2 {
        gap: 0.5rem !important;
    }
    .gap-xl-3 {
        gap: 1rem !important;
    }
    .gap-xl-4 {
        gap: 1.5rem !important;
    }
    .gap-xl-5 {
        gap: 3rem !important;
    }
    .row-gap-xl-0 {
        row-gap: 0 !important;
    }
    .row-gap-xl-1 {
        row-gap: 0.25rem !important;
    }
    .row-gap-xl-2 {
        row-gap: 0.5rem !important;
    }
    .row-gap-xl-3 {
        row-gap: 1rem !important;
    }
    .row-gap-xl-4 {
        row-gap: 1.5rem !important;
    }
    .row-gap-xl-5 {
        row-gap: 3rem !important;
    }
    .column-gap-xl-0 {
        column-gap: 0 !important;
    }
    .column-gap-xl-1 {
        column-gap: 0.25rem !important;
    }
    .column-gap-xl-2 {
        column-gap: 0.5rem !important;
    }
    .column-gap-xl-3 {
        column-gap: 1rem !important;
    }
    .column-gap-xl-4 {
        column-gap: 1.5rem !important;
    }
    .column-gap-xl-5 {
        column-gap: 3rem !important;
    }
}

@media (min-width: 1400px) {
    .gap-xxl-0 {
        gap: 0 !important;
    }
    .gap-xxl-1 {
        gap: 0.25rem !important;
    }
    .gap-xxl-2 {
        gap: 0.5rem !important;
    }
    .gap-xxl-3 {
        gap: 1rem !important;
    }
    .gap-xxl-4 {
        gap: 1.5rem !important;
    }
    .gap-xxl-5 {
        gap: 3rem !important;
    }
    .row-gap-xxl-0 {
        row-gap: 0 !important;
    }
    .row-gap-xxl-1 {
        row-gap: 0.25rem !important;
    }
    .row-gap-xxl-2 {
        row-gap: 0.5rem !important;
    }
    .row-gap-xxl-3 {
        row-gap: 1rem !important;
    }
    .row-gap-xxl-4 {
        row-gap: 1.5rem !important;
    }
    .row-gap-xxl-5 {
        row-gap: 3rem !important;
    }
    .column-gap-xxl-0 {
        column-gap: 0 !important;
    }
    .column-gap-xxl-1 {
        column-gap: 0.25rem !important;
    }
    .column-gap-xxl-2 {
        column-gap: 0.5rem !important;
    }
    .column-gap-xxl-3 {
        column-gap: 1rem !important;
    }
    .column-gap-xxl-4 {
        column-gap: 1.5rem !important;
    }
    .column-gap-xxl-5 {
        column-gap: 3rem !important;
    }
}

/* TinyMCE 6 — transparent chrome (card / content-wrapper); oxide skin uses #fff + gradients on header */
.tox.tox-tinymce {
    border-color: var(--sd-border, rgba(15, 23, 42, 0.12)) !important;
    background-color: transparent !important;
}
.tox.tox-tinymce .tox-editor-header,
.tox.tox-tinymce .tox-toolbar-overlord,
.tox.tox-tinymce .tox-menubar,
.tox.tox-tinymce .tox-toolbar,
.tox.tox-tinymce .tox-toolbar__overflow,
.tox.tox-tinymce .tox-toolbar__primary,
.tox.tox-tinymce .tox-edit-area,
.tox.tox-tinymce .tox-edit-area__iframe,
.tox.tox-tinymce .tox-statusbar {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}
.tox.tox-tinymce .tox-editor-header {
    border-bottom-color: var(--sd-border, rgba(15, 23, 42, 0.12)) !important;
    box-shadow: none !important;
}
.tox.tox-tinymce .tox-toolbar-overlord.tox-toolbar-overlord--scrolling,
.tox.tox-tinymce .tox-toolbar-overlord--scrolling .tox-toolbar {
    background-image: none !important;
}
.tox.tox-tinymce .tox-statusbar {
    border-top-color: var(--sd-border, rgba(15, 23, 42, 0.12)) !important;
}

/* TinyMCE 4 legacy (if any field still uses mce-*) */
.mce-tinymce.mce-panel,
.mce-tinymce .mce-panel,
.mce-edit-area iframe {
    background: transparent !important;
    background-color: transparent !important;
}

/* ── Panel: form-control + password input-group ───────────── */
.content-wrapper .form-group .form-control:not([type='file']):not(.file-upload-info):not(.select2),
.content-wrapper .cp-field-group .form-control:not([type='file']):not(.file-upload-info):not(.select2),
.modal-body .form-group .form-control:not([type='file']):not(.file-upload-info):not(.select2) {
    border: 2px solid var(--sd-border, rgba(15, 23, 42, 0.14));
    border-radius: 10px;
    min-height: 44px;
    padding: 0.55rem 0.85rem;
    font-size: 0.875rem;
    background: transparent !important;
    background-color: transparent !important;
    transition:
        border-color 0.18s,
        box-shadow 0.18s;
}

.content-wrapper .form-group textarea.form-control:not(.select2),
.content-wrapper .cp-field-group textarea.form-control:not(.select2),
.modal-body .form-group textarea.form-control:not(.select2) {
    min-height: auto;
}

.content-wrapper .form-group .form-control:not([type='file']):not(.file-upload-info):not(.select2):focus,
.content-wrapper .cp-field-group .form-control:not([type='file']):not(.file-upload-info):not(.select2):focus,
.modal-body .form-group .form-control:not([type='file']):not(.file-upload-info):not(.select2):focus {
    border-width: 1px;
    border-color: var(--theme-color, #22577a);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-color, #22577a) 12%, transparent);
    background: transparent !important;
    background-color: transparent !important;
}

/* Unified input group — add class sd-input-group on wrapper (password, WhatsApp mobile, etc.) */
.content-wrapper .input-group.sd-input-group,
.modal-body .input-group.sd-input-group {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    width: 100%;
    border: 1.5px solid var(--sd-border, rgba(15, 23, 42, 0.14));
    border-radius: 10px;
    overflow: hidden;
    background: transparent;
    transition:
        border-color 0.18s,
        box-shadow 0.18s;
}

.content-wrapper .input-group.sd-input-group:focus-within,
.modal-body .input-group.sd-input-group:focus-within {
    border-width: 1px;
    border-color: var(--theme-color, #22577a);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-color, #22577a) 12%, transparent);
}

.content-wrapper .input-group.sd-input-group > .form-control,
.modal-body .input-group.sd-input-group > .form-control {
    flex: 1 1 auto;
    width: 1% !important;
    min-width: 0;
    min-height: 44px;
    height: auto;
    padding: 0.55rem 0.85rem;
    font-size: 0.875rem;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.content-wrapper .input-group.sd-input-group > .form-control:focus,
.modal-body .input-group.sd-input-group > .form-control:focus {
    border: 0 !important;
    box-shadow: none !important;
    outline: none;
    background: transparent !important;
}

.content-wrapper .input-group.sd-input-group .input-group-prepend,
.modal-body .input-group.sd-input-group .input-group-prepend {
    display: flex;
    margin-right: 0 !important;
    flex-shrink: 0;
}

.content-wrapper .input-group.sd-input-group .input-group-append,
.modal-body .input-group.sd-input-group .input-group-append {
    display: flex;
    margin-left: 0 !important;
    flex-shrink: 0;
}

.content-wrapper .input-group.sd-input-group .input-group-prepend .input-group-text,
.modal-body .input-group.sd-input-group .input-group-prepend .input-group-text {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-height: 44px;
    margin: 0;
    padding: 0 0.85rem !important;
    line-height: 1;
    border: 0 !important;
    border-right: 1px solid var(--sd-border, rgba(15, 23, 42, 0.12)) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.content-wrapper .input-group.sd-input-group .input-group-append .input-group-text,
.modal-body .input-group.sd-input-group .input-group-append .input-group-text {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 !important;
    line-height: 1;
    border: 0 !important;
    border-left: 1px solid var(--sd-border, rgba(15, 23, 42, 0.12)) !important;
    border-radius: 0 !important;
    background: transparent !important;
    cursor: pointer;
    color: var(--sd-muted, #9ca3af);
    transition:
        color 0.15s,
        background 0.15s;
}

.content-wrapper .input-group.sd-input-group .input-group-append .input-group-text:hover,
.content-wrapper .input-group.sd-input-group .input-group-append .input-group-text:focus,
.modal-body .input-group.sd-input-group .input-group-append .input-group-text:hover,
.modal-body .input-group.sd-input-group .input-group-append .input-group-text:focus {
    color: var(--theme-color, #22577a);
    background: color-mix(in srgb, var(--theme-color, #22577a) 8%, transparent) !important;
    outline: none;
    box-shadow: none !important;
}

.content-wrapper .input-group.sd-input-group .input-group-text i,
.modal-body .input-group.sd-input-group .input-group-text i {
    font-size: 0.9rem;
    pointer-events: none;
    line-height: 1;
}

/* ── Change Password form ─────────────────────────────────── */
.cp-layout {
    margin: 0;
}

.cp-notes {
    height: 100%;
    padding: 0.9rem 1.1rem;
    border-radius: var(--sd-radius, 12px);
    border: 1px solid var(--sd-border, rgba(15, 23, 42, 0.1));
    box-shadow: var(--sd-shadow, 0 1px 3px rgba(15, 23, 42, 0.06));
}

.cp-notes-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 1.1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--sd-border, rgba(15, 23, 42, 0.08));
}

.cp-notes-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.05rem;
    color: var(--theme-color, #22577a);
    background: color-mix(in srgb, var(--theme-color, #22577a) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--theme-color, #22577a) 20%, transparent);
}

.cp-notes-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--sd-heading, #1a2332);
    margin: 0 0 4px;
}

.cp-notes-lead {
    font-size: 0.8rem;
    color: var(--sd-muted, #6b7280);
    margin: 0;
    line-height: 1.45;
}

.cp-notes-block {
    margin-bottom: 1rem;
}

.cp-notes-subtitle {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sd-heading, #374151);
    margin: 0 0 0.55rem;
}

.cp-notes-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cp-notes-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--sd-heading, #374151);
    line-height: 1.45;
    margin-bottom: 0.45rem;
}

.cp-notes-list li i {
    margin-top: 2px;
    flex-shrink: 0;
    width: 14px;
    text-align: center;
    color: var(--theme-color, #22577a);
}

.cp-notes-list--tips li i {
    color: #d97706;
}

.cp-notes-foot {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 0.5rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--sd-border, rgba(15, 23, 42, 0.12));
    font-size: 0.76rem;
    color: var(--sd-muted, #6b7280);
    line-height: 1.45;
}

.cp-notes-foot i {
    color: var(--theme-color, #22577a);
    margin-top: 2px;
}

.cp-layout .cp-field-group {
    max-width: none;
}

@media (max-width: 991px) {
    .cp-notes {
        margin-bottom: 0.25rem;
    }
}

/* Form card (right column) */
.cp-form-card {
    height: 100%;
    padding: 0.8rem 1rem;
    border-radius: var(--sd-radius, 12px);
    border: 1px solid var(--sd-border, rgba(15, 23, 42, 0.1));
    box-shadow: var(--sd-shadow, 0 1px 3px rgba(15, 23, 42, 0.06));
}

.cp-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 1.1rem;
    margin-bottom: 0.8rem;
    border-bottom: 1px solid var(--sd-border, rgba(15, 23, 42, 0.08));
}
.cp-header-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--theme-color, #22577a) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--theme-color, #22577a) 18%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--theme-color, #22577a);
    flex-shrink: 0;
}
.cp-header-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sd-heading, #1a2332);
    margin: 0;
    text-transform: capitalize;
}
.cp-header-sub {
    font-size: 0.8rem;
    color: var(--sd-muted, #6b7280);
    margin: 4px 0 0;
    line-height: 1.4;
}

.cp-password-changed-meta strong {
    color: var(--sd-heading, #1f2937);
    font-weight: 600;
}

.cp-password-changed-ago {
    color: var(--sd-muted, #6b7280);
    font-weight: 500;
}

.cp-form-section {
    padding: 1rem 1.1rem;
    margin-bottom: 0.8rem;
    border-radius: 10px;
    border: 1px solid var(--sd-border, rgba(15, 23, 42, 0.08));
}

.cp-form-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.85rem;
}

.cp-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--theme-color, #22577a);
    background: color-mix(in srgb, var(--theme-color, #22577a) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--theme-color, #22577a) 22%, transparent);
    flex-shrink: 0;
}

.cp-form-section-title {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--sd-heading, #374151);
    letter-spacing: 0.01em;
}

.cp-field-group {
    margin-bottom: 1rem;
}

.cp-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--sd-heading, #374151);
    margin-bottom: 7px;
}

.cp-label i {
    font-size: 0.75rem;
    color: var(--theme-color, #22577a);
    width: 14px;
    text-align: center;
}

.cp-old-status {
    margin-top: 8px;
    min-height: 22px;
    display: flex;
    align-items: center;
}

.cp-feedback {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}

.cp-feedback--muted {
    color: var(--sd-muted, #6b7280);
    background: rgba(0, 0, 0, 0.04);
}

.cp-feedback--success {
    color: #15803d;
    background: color-mix(in srgb, #22c55e 12%, #fff);
}

.cp-feedback--error {
    color: #b91c1c;
    background: color-mix(in srgb, #ef4444 10%, #fff);
}

.cp-strength-wrap {
    margin-top: 10px;
}

.cp-strength-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.cp-strength-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--sd-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cp-strength-label {
    font-size: 0.75rem;
    font-weight: 700;
    min-height: auto;
    margin: 0;
}

.cp-strength {
    height: 6px;
    background: var(--sd-border, #e5e7eb);
    border-radius: 999px;
    overflow: hidden;
}

.cp-strength-bar {
    height: 100%;
    width: 0;
    border-radius: 999px;
    transition:
        width 0.35s ease,
        background 0.25s ease;
}

.cp-rule-checklist {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
}

@media (max-width: 575px) {
    .cp-rule-checklist {
        grid-template-columns: 1fr;
    }
}

.cp-rule-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.74rem;
    color: var(--sd-muted, #6b7280);
    line-height: 1.35;
    transition: color 0.2s;
}

.cp-rule-item i {
    margin-top: 2px;
    font-size: 0.7rem;
    color: var(--sd-muted, #9ca3af);
    flex-shrink: 0;
}

.cp-rule-item.is-met {
    color: var(--sd-heading, #374151);
    font-weight: 600;
}

.cp-rule-item.is-met i {
    color: #22c55e;
}

.cp-hint {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 8px;
    min-height: 20px;
}

.cp-match-hint.is-success {
    color: #15803d;
}

.cp-match-hint.is-error {
    color: #b91c1c;
}

.cp-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 0.5rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--sd-border, rgba(15, 23, 42, 0.08));
}

.cp-actions-note {
    flex: 1 1 200px;
    margin: 0;
    font-size: 0.76rem;
    color: var(--sd-muted, #6b7280);
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.cp-actions-note i {
    color: var(--theme-color, #22577a);
    margin-top: 2px;
}

.cp-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 168px;
    border-radius: 10px !important;
    padding: 10px 24px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
}

.cp-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── Change username (distinct from password UI) ─────────── */
.cu-form .cu-current-block,
.cu-form .cu-new-block {
    margin-bottom: 1.25rem;
}

.cu-form .cu-new-block {
    margin-bottom: 0;
}

.cu-form .cu-at-prefix {
    font-weight: 700;
    color: var(--theme-color, #22577a);
    padding: 0 0.75rem !important;
    min-width: 2.5rem;
    justify-content: center;
    background: color-mix(in srgb, var(--theme-color, #22577a) 6%, transparent) !important;
}

.cu-form .cu-input-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 10px;
}

.cu-form .cu-char-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sd-muted, #6b7280);
    font-variant-numeric: tabular-nums;
}

.cu-form .cu-char-dots {
    display: inline-flex;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
}

.cu-form .cu-char-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sd-border, #e5e7eb);
    transition: background 0.2s;
}

.cu-form .cu-char-dot.is-filled {
    background: var(--theme-color, #22577a);
}

.cu-form .cu-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: auto;
    min-height: 22px;
}

.cu-form .cu-status-pill--ok {
    color: #15803d;
}

.cu-form .cu-status-pill--warn {
    color: #b45309;
}

.cu-form .cu-status-pill--info {
    color: var(--theme-color, #22577a);
}

.cu-form .cu-status-pill--muted {
    color: var(--sd-muted, #6b7280);
}