@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* --- Design Tokens --- */
:root {
    --brand: #501369;
    --brand-2: #B0317F;
    --brand-light: #f3e8ff;
    --sidebar-bg: #251338;

    --bg: #f4f2f7;
    --bg-subtle: #eae6f0;
    --surface: #ffffff;
    --surface-soft: #faf9fd;
    --surface-hover: #f5f2fa;
    --line: #e4dceb;
    --line-soft: #eee8f6;

    --text: #1e1832;
    --text-secondary: #4a4260;
    --muted: #6d6681;
    --placeholder: #a49db5;

    --success: #0d9668;
    --success-bg: #ecfdf5;
    --success-border: #a7f3d0;
    --warning: #d97706;
    --warning-bg: #fffbeb;
    --warning-border: #fde68a;
    --danger: #dc2626;
    --danger-bg: #fef2f2;
    --danger-border: #fecaca;
    --info: #2563eb;
    --info-bg: #eff6ff;
    --info-border: #bfdbfe;

    --radius: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-full: 999px;

    --shadow-sm: 0 1px 3px rgba(30, 24, 50, .06);
    --shadow: 0 4px 16px rgba(30, 24, 50, .08);
    --shadow-lg: 0 12px 40px rgba(30, 24, 50, .12);
    --shadow-xl: 0 24px 60px rgba(30, 24, 50, .16);

    --transition: .2s cubic-bezier(.4, 0, .2, 1);
    --transition-slow: .35s cubic-bezier(.4, 0, .2, 1);

    --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sidebar-width: 268px;
    --sidebar-collapsed-width: 84px;
}

/* --- Mobile navigation and lead directory refinement --- */
.leads-filter-form {
    margin-bottom: 16px;
    gap: 8px;
    flex-wrap: wrap;
}

.lead-scope-switcher {
    display: grid;
    grid-template-columns: minmax(150px, .65fr) minmax(560px, 2fr);
    align-items: center;
    gap: 14px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-soft) 86%, var(--brand-light));
    box-shadow: var(--shadow-sm);
}

.lead-scope-switcher--directory {
    margin-bottom: 14px;
}

.lead-scope-switcher--dashboard {
    margin: 0 0 14px;
}

#dashboard-dynamic-content {
    transition: opacity 0.18s ease-in-out;
}

#dashboard-dynamic-content.is-loading {
    opacity: 0.45;
    pointer-events: none;
}

.lead-scope-heading {
    display: grid;
    min-width: 0;
    gap: 1px;
    padding: 0 6px;
}

.lead-scope-heading strong {
    color: var(--text);
    font-size: 12px;
    line-height: 1.35;
}

.lead-scope-heading small {
    overflow: hidden;
    color: var(--muted);
    font-size: 10.5px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lead-scope-options {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    min-width: 0;
}

.lead-scope-option {
    display: flex;
    min-width: 0;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--text-secondary);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.2;
    transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}

.lead-scope-option:hover {
    border-color: color-mix(in srgb, var(--brand) 18%, var(--line));
    background: var(--surface);
    color: var(--brand);
}

.lead-scope-option.is-active {
    border-color: color-mix(in srgb, var(--brand) 26%, var(--line));
    background: var(--surface);
    color: var(--brand);
    box-shadow: 0 3px 12px color-mix(in srgb, var(--brand) 10%, transparent);
}

.lead-scope-option>span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lead-scope-option>strong {
    display: inline-grid;
    min-width: 24px;
    min-height: 22px;
    flex: 0 0 auto;
    place-items: center;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    background: var(--bg-subtle);
    color: var(--muted);
    font-size: 9.5px;
    font-variant-numeric: tabular-nums;
}

.lead-scope-option.is-active>strong {
    background: var(--brand-light);
    color: var(--brand);
}

.leads-date-field {
    display: grid;
    gap: 3px;
    min-width: 140px;
}

.leads-date-field>span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.leads-date-field input {
    width: 100%;
    max-width: 150px;
}

@media (max-width: 900px) {
    .lead-scope-switcher {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .lead-scope-options {
        display: flex;
        margin-inline: -2px;
        padding: 2px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .lead-scope-options::-webkit-scrollbar {
        display: none;
    }

    .lead-scope-option {
        min-width: max-content;
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .mobile-nav {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        border-top-color: color-mix(in srgb, var(--brand) 14%, var(--line));
        box-shadow: 0 -10px 30px rgba(28, 15, 43, .1);
    }

    .mobile-nav a,
    .mobile-nav-action {
        position: relative;
        min-width: 0;
        gap: 4px;
        padding: 8px 2px 6px;
        font-size: 9.5px;
        line-height: 1;
    }

    .mobile-nav a::before {
        position: absolute;
        top: 0;
        left: 50%;
        width: 24px;
        height: 3px;
        border-radius: 0 0 4px 4px;
        background: var(--brand);
        content: '';
        opacity: 0;
        transform: translateX(-50%) scaleX(.5);
        transition: opacity var(--transition), transform var(--transition);
    }

    .mobile-nav a.is-active::before {
        opacity: 1;
        transform: translateX(-50%) scaleX(1);
    }

    .mobile-nav a svg,
    .mobile-nav-action svg {
        width: 21px;
        height: 21px;
    }

    .mobile-nav-action:hover,
    .mobile-nav-action:focus-visible {
        color: var(--danger);
    }

    .mobile-profile-avatar {
        display: grid;
        width: 24px;
        height: 24px;
        place-items: center;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
        border-radius: 50%;
        background: var(--brand-light);
        color: var(--brand);
        font-size: 8px;
        font-weight: 800;
        letter-spacing: .02em;
    }

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

    .mobile-nav-profile.is-active .mobile-profile-avatar {
        border-color: var(--brand);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 14%, transparent);
    }
}

@media (max-width: 600px) {
    .lead-scope-switcher {
        margin-inline: 0;
        padding: 9px;
        border-radius: var(--radius);
    }

    .lead-scope-heading {
        padding-inline: 4px;
    }

    .lead-scope-option {
        min-height: 39px;
        padding: 7px 9px;
    }

    .leads-index-panel {
        padding: 14px 12px;
    }

    .leads-index-toolbar {
        margin-bottom: 14px;
    }

    .leads-index-toolbar h2 {
        display: flex;
        align-items: center;
        margin: 0;
    }

    form.leads-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 12px;
        border: 1px solid var(--line-soft);
        border-radius: var(--radius);
        background: var(--surface-soft);
    }

    form.leads-filter-form>input[name="q"] {
        grid-column: 1 / -1;
    }

    form.leads-filter-form input,
    form.leads-filter-form select,
    form.leads-filter-form .leads-date-field {
        min-width: 0;
    }


    .leads-date-field input {
        max-width: none;
    }

    .leads-filter-submit,
    .leads-filter-export {
        width: 100%;
        justify-content: center;
    }

    .leads-table-wrap {
        max-width: none;
        margin-inline: -1px;
        border: none;
        box-shadow: none;
        background: transparent;
    }

    .leads-table {
        min-width: 0 !important;
        display: block;
    }

    .leads-table thead {
        display: none;
    }

    .leads-table tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .leads-table tr {
        display: block;
        position: relative;
        padding: 14px 14px 12px 14px;
        border-radius: 12px;
        background: var(--surface);
        border: 1px solid var(--line);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    }

    .leads-table td {
        display: grid;
        grid-template-columns: minmax(78px, 28%) minmax(0, 1fr);
        min-width: 0;
        gap: 8px;
        padding: 6px 0;
        border-bottom: 1px dashed var(--line-soft);
        white-space: normal;
        align-items: center;
    }

    .leads-table td:last-child,
    .leads-table td[data-label="Action"] {
        border-bottom: none;
    }

    .leads-table td::before {
        content: attr(data-label);
        font-size: 0.66rem;
        font-weight: 750;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
    }

    .leads-table .lead-select-cell {
        position: absolute;
        top: 12px;
        right: 12px;
        display: block;
        width: auto;
        padding: 0;
        border: 0;
        z-index: 2;
    }

    .leads-table .lead-select-cell::before {
        display: none;
    }

    .leads-table .lead-select-cell+td {
        padding-right: 38px;
    }

    .leads-table .row-checkbox {
        width: 20px;
        height: 20px;
        accent-color: var(--brand);
    }

    /* Mobile Student Info & Contact Pills */
    .cell-student-info {
        align-items: flex-start !important;
    }

    .student-info-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        text-align: right !important;
        width: 100% !important;
    }

    .student-name {
        font-weight: 700 !important;
        font-size: 0.88rem !important;
        color: var(--text) !important;
        text-align: right !important;
        width: 100% !important;
    }

    .student-contact-links {

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
        margin-top: 4px !important;
        width: 100% !important;
    }

    .student-contact-links .phone-link {
        white-space: nowrap !important;
        font-size: 0.76rem !important;
        padding: 2px 8px !important;
        border-radius: 10px !important;
        background: var(--surface-soft, rgba(0, 0, 0, 0.04)) !important;
        border: 1px solid var(--line-soft) !important;
        color: var(--text-secondary) !important;
        font-weight: 500 !important;
        display: inline-block !important;
        text-decoration: none !important;
    }

    .student-contact-links .whatsapp-link {
        white-space: nowrap !important;
        font-size: 0.72rem !important;
        padding: 2px 8px !important;
        border-radius: 10px !important;
        background: rgba(37, 211, 102, 0.14) !important;
        color: #16a34a !important;
        font-weight: 700 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 3px !important;
        text-decoration: none !important;
    }

    .lead-code-pill {
        white-space: nowrap !important;
        margin-left: auto !important;
    }

    .leads-table td[data-label="Action"] {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding-top: 10px !important;
        margin-top: 4px !important;
        border-top: 1px solid var(--line-soft) !important;
        border-bottom: none !important;
        width: 100% !important;
    }


    .leads-table td[data-label="Action"]::before {
        content: "ACTION" !important;
        font-size: 0.66rem !important;
        letter-spacing: 0.05em !important;
        color: var(--muted) !important;
        font-weight: 750 !important;
    }

    .lead-row-arrow {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 5px 12px !important;
        width: auto !important;
        height: 28px !important;
        border-radius: 6px !important;
        background: color-mix(in srgb, var(--brand) 10%, var(--surface-soft)) !important;
        color: var(--brand) !important;
        font-weight: 600 !important;
        font-size: 0.76rem !important;
        border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent) !important;
    }

    .lead-row-arrow::after {
        content: "View Details →";
    }

    .lead-row-arrow svg {
        display: none;
    }


    .leads-index-panel .pagination {
        gap: 10px;
        margin-top: 16px;
    }
}

[data-theme="dark"] .login-page {
    background: #080b10;
}

[data-theme="dark"] .login-video-bg {
    opacity: .58;
}

[data-theme="dark"] .login-video-overlay {
    background: linear-gradient(135deg, rgba(13, 17, 24, .82), rgba(70, 25, 82, .6));
}

[data-theme="dark"] .no-js .login-card,
[data-theme="dark"] .login-page.video-unavailable .login-card {
    border-color: rgba(213, 155, 232, .22);
    background: rgba(22, 27, 36, .96);
    color: var(--text);
}

[data-theme="dark"] .login-page--simple {
    background: linear-gradient(145deg, #0d1118, #17111f);
}

[data-theme="dark"] .auth-panel {
    border-color: rgba(213, 155, 232, .2);
    background: #161b24;
    box-shadow: var(--shadow-xl);
}

.dashboard-weather-attribution {
    position: absolute;
    z-index: 3;
    right: 18px;
    bottom: 7px;
    color: rgba(255, 255, 255, .52);
    font-size: 9px;
    font-weight: 600;
    line-height: 1.2;
}

.dashboard-weather-attribution:hover,
.dashboard-weather-attribution:focus-visible {
    color: rgba(255, 255, 255, .88);
    text-decoration: underline;
}

@media (max-width: 380px) {
    form.leads-filter-form {
        grid-template-columns: 1fr;
    }

    form.leads-filter-form>input[name="q"] {
        grid-column: auto;
    }

    .mobile-nav a,
    .mobile-nav-action {
        font-size: 8.5px;
    }
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--brand);
}

::selection {
    background: var(--brand-light);
    color: var(--brand);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--muted);
}

/* --- Animations --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes countPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes bellRing {
    0% {
        transform: rotate(0);
    }

    15% {
        transform: rotate(14deg);
    }

    30% {
        transform: rotate(-14deg);
    }

    45% {
        transform: rotate(8deg);
    }

    60% {
        transform: rotate(-8deg);
    }

    75% {
        transform: rotate(3deg);
    }

    100% {
        transform: rotate(0);
    }
}

@keyframes toastSlideIn {
    from {
        transform: translateX(40px);
        opacity: 0;
    }

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

@keyframes toastSlideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(40px);
        opacity: 0;
    }
}

@keyframes progressFill {
    from {
        width: 0;
    }
}

/* --- App Shell --- */
.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    transition: grid-template-columns var(--transition-slow);
}

/* --- Sidebar --- */
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 22px 16px;
    background: var(--sidebar-bg);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 30;
    transition: padding var(--transition-slow);
}

.sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(80, 19, 105, .15) 0%, transparent 40%);
    pointer-events: none;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 4px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    margin-bottom: 6px;
    position: relative;
}

.brand-mark {
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--brand-2), #f08b57);
    font-weight: 900;
    font-size: 14px;
    flex-shrink: 0;
}

.brand-logo,
.login-logo {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius);
    object-fit: contain;
    background: #fff;
    padding: 4px;
}

.brand img.brand-logo {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    max-height: 44px;
    flex: 0 0 44px;
}

.brand-text {
    min-width: 0;
}

.brand-text strong,
.brand-text small {
    overflow-wrap: anywhere;
}

.brand-text strong {
    font-size: 15px;
    font-weight: 700;
}

.brand small {
    display: block;
    color: rgba(255, 255, 255, .55);
    margin-top: 2px;
    font-size: 12px;
}

.nav-section-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .35);
    padding: 14px 12px 6px;
}

.sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.sidebar nav a,
.logout-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: var(--radius);
    color: rgba(255, 255, 255, .75);
    font-weight: 500;
    font-size: 13.5px;
    transition: all var(--transition);
    position: relative;
}

.sidebar nav a .nav-icon,
.logout-link .nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: .7;
    transition: opacity var(--transition);
}

.sidebar nav a:hover,
.logout-link:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.sidebar nav a:hover .nav-icon,
.logout-link:hover .nav-icon {
    opacity: 1;
}

.sidebar nav a.is-active {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-weight: 600;
}

.sidebar nav a.is-active::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--brand-2);
}

.sidebar nav a.is-active .nav-icon {
    opacity: 1;
}

.logout-link {
    margin-top: auto;
    color: rgba(255, 200, 220, .7);
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: 14px;
    margin-top: 12px;
}

.logout-link:hover {
    color: #ffd8e5;
    background: rgba(220, 38, 38, .15);
}

/* --- Main Content --- */
.main {
    padding: 28px 32px;
    min-width: 0;
    animation: fadeIn .3s ease;
}

/* --- Top Bar --- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.topbar h1 {
    margin: 0;
    font-size: clamp(1.4rem, 2vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--text);
}

.eyebrow {
    margin: 0 0 3px;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.muted {
    color: var(--muted);
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--muted);
    margin-bottom: 4px;
}

.breadcrumb a {
    color: var(--brand);
    font-weight: 500;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb .sep {
    opacity: .4;
}

/* User Chip */
.user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 8px 14px;
    transition: box-shadow var(--transition);
    flex-shrink: 0;
}

.user-chip:hover {
    box-shadow: var(--shadow-sm);
}

.user-chip .avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}

.user-chip .avatar-circle img,
.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

.user-chip-info {
    text-align: right;
}

.user-chip-info strong {
    font-size: 13px;
    font-weight: 600;
    display: block;
}

.user-chip-info span {
    display: block;
    color: var(--muted);
    font-size: 11.5px;
    margin-top: 1px;
}

.profile-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}

.profile-hero-content,
.profile-hero>div:nth-child(2) {
    flex: 1;
    min-width: 0;
}

.profile-hero-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.profile-hero-top-row .eyebrow {
    margin-bottom: 0;
}

.profile-hero-subactions {
    margin-top: 10px;
}

.profile-hero h2 {
    margin: 2px 0 4px;
}

.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

.profile-grid .panel {
    margin: 0;
}

.profile-grid .field+.field {
    margin-top: 14px;
}

.profile-actions {
    grid-column: 1 / -1;
}

.preference-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
}

.preference-row span {
    display: grid;
    gap: 3px;
}

.preference-row small {
    color: var(--muted);
    font-weight: 400;
}

.preference-row input {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.is-compact .main {
    padding-top: 18px;
}

.is-compact .panel,
.is-compact .card {
    padding: 16px;
}

.is-compact td,
.is-compact th {
    padding-top: 9px;
    padding-bottom: 9px;
}

.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
}

.nav-toggle {
    display: none;
}

.sidebar-collapse-toggle {
    position: fixed;
    top: 29px;
    left: calc(var(--sidebar-width) - 1px);
    z-index: 40;
    width: 27px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-left: 0;
    border-radius: 0 10px 10px 0;
    background: color-mix(in srgb, var(--sidebar-bg) 88%, #fff);
    color: rgba(255, 255, 255, .82);
    display: none;
    place-items: center;
    cursor: pointer;
    box-shadow: 7px 0 18px rgba(30, 24, 50, .14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-9px);
    transition: background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), visibility var(--transition), transform var(--transition), left var(--transition-slow);
}

.js .sidebar-collapse-toggle {
    display: inline-grid;
}

.sidebar:hover .sidebar-collapse-toggle,
.sidebar:focus-within .sidebar-collapse-toggle {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

.sidebar-collapse-toggle:hover {
    border-color: rgba(255, 255, 255, .28);
    border-left: 0;
    background: color-mix(in srgb, var(--sidebar-bg) 76%, #fff);
    color: #fff;
}

.sidebar-collapse-toggle:active {
    transform: translateX(0) scale(.96);
}

.sidebar-collapse-toggle:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--brand-2) 68%, #fff);
    outline-offset: 3px;
}

.sidebar-collapse-icon {
    width: 7px;
    height: 7px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: translateX(2px) rotate(135deg);
    transition: transform var(--transition);
}

@media (min-width: 901px) {
    .sidebar-collapsed .app-shell {
        grid-template-columns: var(--sidebar-collapsed-width) 1fr;
    }

    .sidebar-collapsed .sidebar {
        padding-inline: 12px;
    }

    .sidebar-collapsed .sidebar-collapse-toggle {
        left: calc(var(--sidebar-collapsed-width) - 1px);
    }

    .sidebar-collapsed .sidebar-collapse-icon {
        transform: translateX(-2px) rotate(-45deg);
    }

    .sidebar-collapsed .brand {
        justify-content: center;
        gap: 0;
        padding-inline: 0;
    }

    .sidebar-collapsed .brand-text,
    .sidebar-collapsed .nav-item-label {
        display: none;
    }

    .sidebar-collapsed .nav-section-label {
        height: 20px;
        padding: 10px 8px 9px;
        font-size: 0;
    }

    .sidebar-collapsed .nav-section-label::after {
        content: '';
        display: block;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .sidebar-collapsed .sidebar nav a,
    .sidebar-collapsed .logout-link {
        justify-content: center;
        gap: 0;
        padding-inline: 10px;
    }

    .sidebar-collapsed .sidebar nav a .nav-icon,
    .sidebar-collapsed .logout-link .nav-icon {
        width: 22px;
        height: 22px;
    }

    .sidebar-collapsed .sidebar nav a.is-active::before {
        left: -12px;
    }
}

/* Notification Bell */
.notif-bell {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--surface);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all var(--transition);
    flex-shrink: 0;
}

.notif-bell:hover {
    background: var(--surface-hover);
    box-shadow: var(--shadow-sm);
}

.notif-bell:hover svg {
    animation: bellRing .5s ease;
}

.notif-bell svg {
    width: 20px;
    height: 20px;
    color: var(--muted);
}

.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    border-radius: 99px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: grid;
    place-items: center;
    padding: 0 5px;
    border: 2px solid var(--bg);
}

/* --- Grids --- */
.grid {
    display: grid;
    gap: 16px;
}

.grid--cards {
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
}

.grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* --- Cards & Panels --- */
.card,
.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 20px;
    transition: box-shadow var(--transition), transform var(--transition);
    animation: fadeInUp .4s ease both;
}

.card:hover {
    box-shadow: var(--shadow);
}

.panel {
    animation-delay: .05s;
}

/* Stat Cards */
.stat {
    position: relative;
    overflow: hidden;
}

.stat::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    opacity: .06;
    transform: translate(20px, -20px);
    background: var(--brand);
}

.stat span {
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.stat strong {
    display: block;
    font-size: 1.9rem;
    font-weight: 900;
    margin-top: 8px;
    letter-spacing: -.02em;
    line-height: 1;
}

.stat.stat--success {
    border-left: 3px solid var(--success);
}

.stat.stat--success strong {
    color: var(--success);
}

.stat.stat--warning {
    border-left: 3px solid var(--warning);
}

.stat.stat--warning strong {
    color: var(--warning);
}

.stat.stat--danger {
    border-left: 3px solid var(--danger);
}

.stat.stat--danger strong {
    color: var(--danger);
}

.stat.stat--info {
    border-left: 3px solid var(--info);
}

.stat.stat--info strong {
    color: var(--info);
}

.stat.stat--brand {
    border-left: 3px solid var(--brand);
}

.stat.stat--brand strong {
    color: var(--brand);
}

/* --- Welcome Banner --- */
.welcome-banner {
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff;
    border-radius: var(--radius-xl);
    padding: 28px 30px;
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
    animation: fadeInUp .35s ease both;
}

.welcome-banner::after {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

.welcome-banner h2 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.welcome-banner p {
    opacity: .85;
    font-size: 14px;
    max-width: 500px;
}

/* --- Toolbar --- */
.toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.toolbar h2 {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* --- Pagination --- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
    color: var(--muted);
    font-size: 13px;
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    text-decoration: none;
}

.btn:hover {
    background: var(--surface-hover);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
    color: var(--text);
}

.btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn--primary {
    background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 80%, var(--brand-2)));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(80, 19, 105, .25);
}

.btn--primary:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 92%, #fff), var(--brand));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 16px rgba(80, 19, 105, .35);
    filter: brightness(1.08);
}

.btn--danger {
    background: var(--danger);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(220, 38, 38, .2);
}

.btn--danger:hover {
    background: color-mix(in srgb, var(--danger) 92%, #fff);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 16px rgba(220, 38, 38, .35);
    filter: brightness(1.08);
}

.btn--soft {
    background: var(--brand-light);
    border-color: transparent;
    color: var(--brand);
}

.btn--soft:hover {
    background: #ead5ff;
    color: var(--brand);
}

.btn--success {
    background: var(--success);
    border-color: transparent;
    color: #fff;
}

.btn--success:hover {
    background: color-mix(in srgb, var(--success) 92%, #fff);
    border-color: transparent;
    color: #fff;
    filter: brightness(1.08);
}

.btn--icon {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: var(--radius);
}

.btn--whatsapp {
    background: #25D366;
    border-color: transparent;
    color: #fff;
}

.btn--whatsapp:hover {
    background: color-mix(in srgb, #25D366 92%, #fff);
    border-color: transparent;
    filter: brightness(1.08);
    color: #fff;
}

.btn--sm {
    min-height: 32px;
    padding: 5px 12px;
    font-size: 12.5px;
}

/* --- Tables --- */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

th,
td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    vertical-align: middle;
}

th {
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    position: sticky;
    top: 0;
    z-index: 1;
}

tr:last-child td {
    border-bottom: 0;
}

tbody tr {
    transition: background var(--transition);
}

tbody tr:hover {
    background: var(--surface-hover);
}

tbody tr.is-clickable {
    cursor: pointer;
}

td small {
    color: var(--muted);
    font-size: 12px;
}

td strong {
    font-weight: 600;
}

/* Empty state in tables */
td[colspan] {
    text-align: center;
    padding: 40px 16px;
    color: var(--muted);
    font-size: 14px;
}

/* --- Forms --- */
[hidden] {
    display: none !important;
}

.form-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field {
    display: grid;
    gap: 6px;
}

.field--full {
    grid-column: 1 / -1;
}

label {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 13px;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 13px;
    font: inherit;
    font-size: 14px;
    background: #fff;
    color: var(--text);
    transition: border-color var(--transition), box-shadow var(--transition);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(80, 19, 105, .1);
}

input::placeholder,
textarea::placeholder {
    color: var(--placeholder);
}

textarea {
    min-height: 110px;
    resize: vertical;
}

input[type="color"] {
    min-height: 44px;
    padding: 4px;
    cursor: pointer;
}

input[type="checkbox"] {
    width: auto;
}

.field small {
    color: var(--muted);
    font-size: 12px;
}

.field-section {
    grid-column: 1 / -1;
    padding: 10px 0 2px;
    border-top: 1px solid var(--line-soft);
    margin-top: 4px;
}

.field-section:first-child {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

.field-section h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.field-section h3 svg {
    width: 18px;
    height: 18px;
    color: var(--brand);
}

/* --- Badges --- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: var(--radius-full);
    padding: 4px 11px;
    font-size: 11.5px;
    font-weight: 700;
    background: var(--brand-light);
    color: var(--brand);
    white-space: nowrap;
    letter-spacing: .01em;
}

.badge--new {
    background: #f0e4ff;
    color: #7c3aed;
}

.badge--registered {
    background: var(--success-bg);
    color: var(--success);
}

.badge--closed,
.badge--fake,
.badge--invalid,
.badge--duplicate,
.badge--not_interested,
.badge--no_response {
    background: var(--danger-bg);
    color: var(--danger);
}

.badge--follow_up,
.badge--application_pending,
.badge--future_intake {
    background: var(--warning-bg);
    color: var(--warning);
}

.badge--contacted,
.badge--interested,
.badge--assigned {
    background: var(--info-bg);
    color: var(--info);
}

/* --- Alerts / Flash Messages --- */
.alert {
    border-radius: var(--radius);
    padding: 13px 16px;
    margin-bottom: 16px;
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: toastSlideIn .35s ease;
    position: relative;
}

.alert.is-dismissing {
    animation: toastSlideOut .3s ease forwards;
}

.alert--success {
    border-color: var(--success-border);
    background: var(--success-bg);
    color: var(--success);
}

.alert--danger {
    border-color: var(--danger-border);
    background: var(--danger-bg);
    color: var(--danger);
}

.alert--info {
    border-color: var(--info-border);
    background: var(--info-bg);
    color: var(--info);
}

.alert--warning {
    border-color: var(--warning-border);
    background: var(--warning-bg);
    color: var(--warning);
}

.permission-nudge {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1200;
    width: min(380px, calc(100vw - 32px));
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 18px 50px rgba(24, 14, 35, .2);
    animation: toastSlideIn .3s ease;
}

.permission-nudge-heading,
.permission-nudge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.permission-nudge-heading {
    margin-bottom: 10px;
}

.permission-nudge-heading span,
.permission-nudge-row>span {
    display: grid;
    gap: 3px;
}

.permission-nudge small {
    color: var(--muted);
    font-size: 12px;
}

.permission-nudge-close {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: var(--surface-soft);
    color: var(--muted);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

.permission-nudge-row {
    padding: 11px 0;
    border-top: 1px solid var(--line);
}

.permission-nudge-enable {
    flex: 0 0 auto;
    padding: 7px 12px;
}

.permission-nudge-row.is-enabled strong {
    color: var(--success);
}

@media (max-width: 700px) {
    .permission-nudge {
        right: 16px;
        bottom: 84px;
    }
}

/* --- Meta List (Lead Detail View) --- */
.meta-list {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.meta-list div {
    padding: 14px 16px;
    background: var(--surface-soft);
    border-radius: var(--radius);
    border: 1px solid var(--line-soft);
    transition: background var(--transition);
}

.meta-list div:hover {
    background: var(--surface-hover);
}

.meta-list span {
    display: block;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}

/* --- Timeline / History --- */
.history {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    padding-left: 20px;
    margin-left: 2px;
}

.history-item {
    position: relative;
    padding: 12px 16px;
    background: var(--surface-soft);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    transition: background var(--transition), border-color var(--transition);
}

.history-item:hover {
    background: var(--surface-hover);
    border-color: var(--line);
}

.history-item::before {
    content: '';
    position: absolute;
    left: -21px;
    top: 17px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand-2);
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-2) 40%, transparent);
    z-index: 2;
}

.history-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: -17px;
    top: 22px;
    bottom: -22px;
    width: 2px;
    background: color-mix(in srgb, var(--brand-2) 75%, var(--line));
    z-index: 1;
}

.history-item strong {
    font-size: 13.5px;
    font-weight: 600;
}

.history-item p {
    margin: 4px 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.history-item small {
    color: var(--muted);
    font-size: 12px;
}

/* ── Secure Attachments Styling ── */
.attachment-section {
    position: relative;
    overflow: hidden;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.attachment-section.is-dragover {
    border-color: var(--brand) !important;
    background: color-mix(in srgb, var(--brand) 4%, var(--surface)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent), var(--shadow);
}

.attachment-section.is-dragover .attachment-empty-state {
    border-color: var(--brand) !important;
    background: color-mix(in srgb, var(--brand) 10%, var(--surface-soft)) !important;
    transform: scale(1.01);
}

.attachment-section.is-dragover .attachment-empty-icon {
    transform: scale(1.12);
    background: color-mix(in srgb, var(--brand) 22%, transparent) !important;
}

.attachment-section.is-dragover .attachment-file-label {
    border-color: var(--brand) !important;
    color: var(--brand) !important;
    background: color-mix(in srgb, var(--brand) 15%, var(--surface-soft)) !important;
}

.attachment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
}

.attachment-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.attachment-header-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    color: var(--brand);
    border: 1px solid color-mix(in srgb, var(--brand) 24%, transparent);
    flex-shrink: 0;
}

.attachment-header-title h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.attachment-header-title p {
    margin: 2px 0 0;
    font-size: 11.5px;
    color: var(--muted);
}

.attachment-upload-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.attachment-file-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.attachment-file-picker input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.attachment-file-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--radius);
    border: 1px dashed var(--line);
    background: var(--surface-soft);
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 500;
    transition: all var(--transition);
}

.attachment-file-picker:hover .attachment-file-label {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--surface-hover);
}

.attachment-clear-btn,
.attachment-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    animation: fadeIn .2s ease;
}

.attachment-clear-btn[style*="display: none"],
.attachment-upload-btn[style*="display: none"] {
    display: none !important;
}

/* Attachment Empty State (Clickable Dropzone) */
.attachment-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 20px;
    border: 2px dashed var(--line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--surface-soft) 60%, transparent);
    text-align: center;
    margin-top: 4px;
    cursor: pointer;
    transition: all var(--transition);
    user-select: none;
}

.attachment-empty-state:hover,
.attachment-empty-state:focus-visible {
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 6%, var(--surface-soft));
    transform: translateY(-1px);
    outline: none;
}

.attachment-empty-state:hover .attachment-empty-icon {
    transform: scale(1.08);
    background: color-mix(in srgb, var(--brand) 18%, transparent);
}

.attachment-empty-icon {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand) 10%, transparent);
    color: var(--brand);
    margin-bottom: 10px;
}

.attachment-empty-state strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.attachment-empty-state p {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--muted);
    max-width: 380px;
}

/* Attachment File Cards Grid */
.attachment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 6px;
}

.attachment-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--line-soft);
    background: var(--surface-soft);
    transition: all var(--transition);
}

.attachment-card:hover {
    border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
    background: var(--surface-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.attachment-card-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    flex-shrink: 0;
}

.badge-pdf {
    background: rgba(220, 38, 38, .12);
    color: #ef4444;
}

.badge-image {
    background: rgba(16, 185, 129, .12);
    color: #10b981;
}

.badge-doc {
    background: rgba(59, 130, 246, .12);
    color: #3b82f6;
}

.badge-file {
    background: rgba(168, 85, 247, .12);
    color: #a855f7;
}

.attachment-card-info {
    flex: 1;
    min-width: 0;
}

.attachment-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
}

.attachment-size {
    font-size: 11px;
    color: var(--muted);
}

.attachment-tag {
    font-size: 9.5px;
    font-weight: 750;
    padding: 1px 5px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    color: var(--brand);
    letter-spacing: 0.03em;
}

.attachment-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* --- Lead Context Card --- */
.lead-context {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 18px;
}

.lead-context .lead-context-info {
    flex: 1;
    min-width: 0;
}

.lead-context .lead-context-info h3 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 2px;
}

.lead-context .lead-context-info p {
    font-size: 13px;
    color: var(--muted);
}

/* --- Progress Bar --- */
.progress-bar {
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--line-soft);
    overflow: hidden;
    margin-top: 6px;
}

.progress-bar-fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    animation: progressFill .8s ease both;
    transition: width .5s ease;
}

.progress-bar-fill--success {
    background: var(--success);
}

.progress-bar-fill--warning {
    background: var(--warning);
}

.progress-bar-fill--danger {
    background: var(--danger);
}

.progress-bar-fill--info {
    background: var(--info);
}

/* --- Quick Action Links --- */
.quick-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.phone-link,
.whatsapp-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    transition: all var(--transition);
}

.phone-link {
    background: var(--info-bg);
    color: var(--info);
}

.phone-link:hover {
    background: #dbe7ff;
    color: var(--info);
}

.whatsapp-link {
    background: #dcfce7;
    color: #16a34a;
}

.whatsapp-link:hover {
    background: #bbf7d0;
    color: #16a34a;
}

/* --- Course Catalogue --- */
.course-catalog-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    min-height: 210px;
    padding: 30px 32px;
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--brand) 62%, var(--line));
    border-radius: var(--radius-xl);
    background:
        linear-gradient(118deg, color-mix(in srgb, var(--sidebar-bg) 94%, var(--brand)), color-mix(in srgb, var(--brand) 82%, var(--brand-2)));
    color: #fff;
    box-shadow: 0 16px 42px color-mix(in srgb, var(--brand) 22%, transparent);
}

.course-catalog-hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 330px;
    height: 330px;
    right: -120px;
    bottom: -210px;
    border: 54px solid rgba(255, 255, 255, .06);
    border-radius: 50%;
}

.course-catalog-copy {
    max-width: 720px;
}

.course-catalog-kicker {
    margin-bottom: 7px;
    color: rgba(255, 255, 255, .67);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.course-catalog-hero h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: clamp(1.65rem, 3vw, 2.25rem);
    line-height: 1.12;
    letter-spacing: -.035em;
}

.course-catalog-copy>p:not(.course-catalog-kicker) {
    max-width: 650px;
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    line-height: 1.65;
}

.course-catalog-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
    color: rgba(255, 255, 255, .58);
    font-size: 11px;
}

.course-sync-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.course-sync-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5ee6ad;
    box-shadow: 0 0 0 4px rgba(94, 230, 173, .12);
}

.course-source-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    width: 248px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    backdrop-filter: blur(10px);
}

.course-source-card>span {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 12px;
    background: #fff;
    color: var(--brand);
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .04em;
}

.course-source-card div {
    display: grid;
    gap: 2px;
}

.course-source-card small {
    color: rgba(255, 255, 255, .58);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.course-source-card strong {
    color: #fff;
    font-size: 13px;
    line-height: 1.35;
}

.course-summary-grid {
    display: grid;
    grid-template-columns: minmax(150px, .55fr) minmax(150px, .55fr) minmax(280px, 1.4fr);
    gap: 10px;
    margin-bottom: 14px;
}

.course-summary-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 17px 18px 16px;
    border-top: 3px solid color-mix(in srgb, var(--brand) 72%, var(--brand-2));
    box-shadow: var(--shadow-sm);
}

.course-summary-card span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.course-summary-card strong {
    display: block;
    margin-top: 6px;
    color: var(--text);
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.2;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
}

.course-filter-panel {
    margin-bottom: 14px;
    padding: 18px;
    box-shadow: var(--shadow-sm);
}

.course-filter-panel .toolbar {
    margin-bottom: 14px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--line-soft);
}

.course-filter-panel .toolbar h2 {
    font-size: 1rem;
}

.course-filter-panel .toolbar p {
    margin-top: 2px;
    font-size: 11.5px;
}

.course-result-count {
    padding: 5px 11px;
    border: 1px solid color-mix(in srgb, var(--brand) 14%, transparent);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--brand-light) 72%, var(--surface));
    color: var(--brand);
    font-size: 11px;
    font-weight: 700;
}

.course-filter-form {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(150px, 1fr)) auto;
    align-items: end;
    gap: 12px;
}

.course-filter-form--compact {
    grid-template-columns: minmax(220px, 2fr) minmax(160px, 1fr) auto;
}

.course-filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
}

.course-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 13px;
}

.course-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    padding: 19px 19px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.course-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
}

.course-card:hover {
    border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.course-card--inactive {
    opacity: .72;
}

.course-card--inactive::before {
    background: var(--muted);
}

.course-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 11px;
}

.course-category {
    min-width: 0;
    color: var(--brand);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .065em;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.course-card h3 {
    min-height: 2.65em;
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.32;
    letter-spacing: -.012em;
}

.course-fee-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr);
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--line-soft);
}

.course-fee-primary,
.course-fee-secondary {
    min-width: 0;
    padding: 13px;
    background: var(--surface-soft);
}

.course-fee-primary span,
.course-fee-secondary span {
    display: block;
    color: var(--muted);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.course-fee-primary strong,
.course-fee-secondary strong {
    display: block;
    margin-top: 4px;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.course-fee-primary strong {
    color: var(--brand);
    font-size: 1.18rem;
    letter-spacing: -.025em;
}

.course-fee-secondary strong {
    color: var(--text-secondary);
    font-size: 12px;
}

.course-schedule-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 14px 0 0;
    border-block: 1px solid var(--line-soft);
}

.course-schedule-grid div {
    min-width: 0;
    padding: 11px 4px;
}

.course-schedule-grid div+div {
    padding-left: 13px;
    border-left: 1px solid var(--line-soft);
}

.course-schedule-grid dt {
    color: var(--muted);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.course-schedule-grid dd {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.course-card-footer {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-top: 13px;
}

.course-coordinator-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--brand-light);
    color: var(--brand);
    font-size: 11px;
    font-weight: 900;
}

.course-coordinator-mark--empty {
    color: var(--muted);
    font-size: 8px;
}

.course-card-footer div {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.course-card-footer small {
    color: var(--muted);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.course-card-footer strong {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.course-card-note {
    margin-top: 13px;
    padding: 9px 10px;
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 9.5px;
    line-height: 1.45;
}

.course-empty-state {
    display: grid;
    justify-items: center;
    padding: 42px 20px;
    text-align: center;
}

.course-empty-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 10px;
    border-radius: 12px;
    background: var(--brand-light);
    color: var(--brand);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
}

.course-empty-state h2 {
    font-size: 1rem;
}

.course-empty-state p {
    margin: 3px 0 14px;
}

/* --- Login Page --- */
.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: #000;
    position: relative;
    overflow: hidden;
}

.login-video-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.login-video-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.75;
}

.login-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(37, 19, 56, 0.8), rgba(80, 19, 105, 0.7));
    mix-blend-mode: overlay;
}

.login-skip-hint {
    position: fixed;
    z-index: 8;
    right: 18px;
    bottom: max(18px, env(safe-area-inset-bottom));
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: var(--radius-full);
    padding: 8px 13px;
    background: rgba(20, 8, 32, .45);
    color: rgba(255, 255, 255, .88);
    font: 600 11px var(--font);
    backdrop-filter: blur(10px);
    pointer-events: none;
}

.login-card {
    position: relative;
    z-index: 10;
    width: min(520px, 100%);
    background-size: 100% 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    padding: 82px 90px 158px 90px;
    /* Pushes the form perfectly into the center white area */
    min-height: 560px;
    /* Maintains aspect ratio for the 3D bubble */
    display: flex;
    flex-direction: column;
    justify-content: center;
    filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.3));
    /* Shadow that follows the PNG shape */
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    visibility: hidden;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.login-card.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
}

.no-js .login-card,
.login-page.video-unavailable .login-card {
    opacity: 1;
    visibility: visible;
    transform: none;
    min-height: auto;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--shadow-xl);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.login-brand img.login-logo {
    width: 46px;
    min-width: 46px;
    max-width: 46px;
    height: 46px;
    max-height: 46px;
    border: 1px solid var(--line);
    flex: 0 0 46px;
    border-radius: var(--radius);
}

.login-card h1 {
    margin: 2px 0 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.login-card .grid {
    gap: 9px;
}

.login-card .eyebrow {
    font-size: 9px;
}

.login-card .field {
    gap: 4px;
}

.login-card .field label {
    font-size: 11px;
}

.login-card .field input {
    min-height: 36px;
    padding: 7px 10px;
    font-size: 12px;
}

.login-card .btn--primary {
    width: 100%;
    min-height: 36px;
    font-size: 12px;
    margin-top: 2px;
}

.login-alt-auth {
    position: fixed;
    z-index: 30;
    bottom: max(5px, env(safe-area-inset-bottom));
    left: 50%;
    display: grid;
    gap: 8px;
    width: max-content;
    max-width: calc(100vw - 16px);
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 12px);
    transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
}

.login-page.login-ready .login-alt-auth,
.no-js .login-alt-auth {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.login-mis-button {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: 100%;
    min-height: 36px;
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: var(--radius-full);
    padding: 5px 15px;
    background-color: rgba(255, 255, 255, .6);
    color: #202124;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .94),
        inset 0 -1px 0 rgba(80, 19, 105, .08),
        0 8px 24px rgba(24, 8, 36, .24);
    text-decoration: none;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;
}

.login-mis-button:hover {
    border-color: rgba(255, 255, 255, .94);
    background-color: rgba(255, 255, 255, .72);
    color: #202124;
    box-shadow:
        inset 0 1px 0 #fff,
        inset 0 -1px 0 rgba(80, 19, 105, .1),
        0 10px 30px rgba(24, 8, 36, .3);
}

.login-mis-button:active {
    transform: scale(.985);
}

.login-mis-button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand) 32%, transparent);
    outline-offset: 3px;
}

.login-mis-icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    border-radius: 6px;
    object-fit: cover;
}

.login-mis-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    line-height: 1.15;
    text-align: center;
}

.login-mis-copy strong {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.login-google-button {
    order: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .7);
    color: var(--text);
    font-size: 10.5px;
    font-weight: 700;
    text-decoration: none;
}

[data-theme="dark"] .login-mis-button {
    border-color: rgba(255, 255, 255, .42);
    background-color: rgba(255, 255, 255, .6);
    color: #202124;
}

[data-theme="dark"] .login-google-button {
    border-color: rgba(213, 155, 232, .22);
    background: rgba(23, 24, 31, .78);
    color: var(--text);
}

@media (prefers-reduced-motion: reduce) {

    .login-alt-auth,
    .login-mis-button {
        transition: none;
    }
}

@media (prefers-reduced-transparency: reduce) {

    .login-mis-button,
    [data-theme="dark"] .login-mis-button {
        background: #fff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* --- Settings --- */
.settings-heading {
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.settings-heading:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.settings-heading h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--brand);
}

.logo-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.logo-preview img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    border-radius: var(--radius);
    background: #fff;
    padding: 4px;
}

.logo-preview span {
    color: var(--muted);
    font-size: 13px;
}

.check-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
}

.check-row input {
    width: auto;
}

/* --- Bulk Actions --- */
.bulk-bar {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--brand-light);
    border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent);
    border-radius: var(--radius);
    margin-bottom: 14px;
    animation: fadeInUp .2s ease;
    flex-wrap: wrap;
}

.bulk-bar.is-visible {
    display: flex;
}

.bulk-bar .bulk-count {
    font-weight: 700;
    color: var(--brand);
    font-size: 13px;
}

/* --- Conversion Funnel --- */
.funnel {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.funnel-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    position: relative;
}

.funnel-step::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand);
    flex-shrink: 0;
}

.funnel-step::after {
    content: '';
    position: absolute;
    left: 20px;
    top: 30px;
    bottom: -12px;
    width: 2px;
    background: var(--line);
}

.funnel-step:last-child::after {
    display: none;
}

.funnel-step .funnel-label {
    flex: 1;
    font-size: 13.5px;
    font-weight: 600;
}

.funnel-step .funnel-value {
    font-weight: 800;
    font-size: 15px;
}

.funnel-step .funnel-pct {
    font-size: 12px;
    color: var(--muted);
    margin-left: 6px;
}

/* --- Report Table Enhancement --- */
.report-row-total td {
    font-weight: 700;
    background: var(--surface-soft);
}

/* --- Mobile Nav --- */
.mobile-nav {
    display: none;
}

.logout-link,
.mobile-nav-action {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

/* --- Responsive --- */
@media (max-width: 1200px) {
    .grid--cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1050px) {
    .grid--cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .grid--two {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .app-shell {
        display: block;
    }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: 280px;
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 100;
    }

    .sidebar.is-open {
        transform: translateX(0);
    }

    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 90;
        opacity: 0;
        visibility: hidden;
        transition: all .25s ease;
    }

    .sidebar-overlay.is-visible {
        opacity: 1;
        visibility: visible;
    }

    .main {
        padding: 16px 16px calc(115px + env(safe-area-inset-bottom, 0px));
    }

    .topbar {
        align-items: flex-start;
    }

    .nav-toggle {
        display: inline-grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: var(--radius);
        border: 1px solid var(--line);
        background: var(--surface);
        cursor: pointer;
        font-size: 20px;
        flex-shrink: 0;
        transition: all var(--transition);
    }

    .nav-toggle:hover {
        background: var(--surface-hover);
    }

    .js .sidebar-collapse-toggle {
        display: none;
    }

    .user-chip {
        display: none;
    }

    .notif-bell {
        display: none;
    }

    .grid--cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid--two,
    .form-grid,
    .meta-list {
        grid-template-columns: 1fr;
    }

    .welcome-banner {
        padding: 20px;
    }

    .welcome-banner h2 {
        font-size: 1.2rem;
    }

    .mobile-nav {
        position: fixed;
        z-index: 95;
        left: 0;
        right: 0;
        bottom: 0;
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        background: var(--surface);
        border-top: 1px solid var(--line);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, .06);
        padding: 0 0 env(safe-area-inset-bottom, 0);
    }

    .mobile-nav a,
    .mobile-nav-action {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 10px 6px 8px;
        font-size: 10.5px;
        font-weight: 600;
        color: var(--muted);
        transition: color var(--transition);
    }

    .mobile-nav a svg,
    .mobile-nav-action svg {
        width: 22px;
        height: 22px;
    }

    .mobile-nav form {
        min-width: 0;
    }

    .mobile-nav a.is-active {
        color: var(--brand);
    }

    .mobile-nav a:hover {
        color: var(--brand);
    }

    .course-catalog-hero {
        grid-template-columns: 1fr;
        align-items: flex-start;
        padding: 20px;
    }

    .course-source-card {
        width: min(100%, 280px);
    }

    .course-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .course-summary-card--wide {
        grid-column: 1 / -1;
    }

    .course-filter-form,
    .course-filter-form--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .course-filter-search,
    .course-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .grid--cards {
        grid-template-columns: 1fr 1fr;
    }

    .stat strong {
        font-size: 1.5rem;
    }

    .course-catalog-hero {
        display: block;
        padding: 18px;
    }

    .course-source-card {
        margin-top: 14px;
    }

    .course-summary-grid,
    .course-filter-form,
    .course-filter-form--compact,
    .course-fee-grid,
    .course-schedule-grid {
        grid-template-columns: 1fr;
    }

    .course-summary-card--wide,
    .course-filter-search,
    .course-filter-actions {
        grid-column: auto;
    }

    .course-schedule-grid div+div {
        padding-left: 4px;
        border-top: 1px solid var(--line-soft);
        border-left: 0;
    }

    .course-card-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .login-page {
        padding: 0;
    }

    .login-card {
        width: min(100vw, 520px);
    }

    .toolbar,
    .actions {
        align-items: stretch;
    }

    .toolbar>*,
    .actions>.btn {
        max-width: 100%;
    }

    .table-wrap {
        border: 0;
        overflow: visible;
        background: transparent;
    }

    .table-wrap table {
        min-width: 0;
        display: block;
    }

    .table-wrap thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .table-wrap tbody,
    .table-wrap tr,
    .table-wrap td {
        display: block;
        width: 100%;
    }

    .table-wrap tbody {
        display: grid;
        gap: 12px;
    }

    .table-wrap tr {
        padding: 12px 14px;
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: var(--surface);
        box-shadow: var(--shadow-sm);
    }

    .table-wrap td {
        display: grid;
        grid-template-columns: minmax(92px, 38%) 1fr;
        gap: 10px;
        padding: 7px 0;
        border-bottom: 1px solid var(--line-soft);
        text-align: right;
        overflow-wrap: anywhere;
    }

    .table-wrap td:last-child {
        border-bottom: 0;
    }

    .table-wrap td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .05em;
        text-align: left;
        text-transform: uppercase;
    }

    .table-wrap td[colspan] {
        display: block;
        text-align: center;
    }

    .table-wrap td[colspan]::before {
        display: none;
    }

    .table-wrap td .actions {
        justify-content: flex-end;
    }
}

/* --- Print --- */
@media print {

    .sidebar,
    .mobile-nav,
    .nav-toggle,
    .topbar button,
    .logout-link,
    .notif-bell,
    .bulk-bar,
    .sidebar-overlay,
    .theme-toggle {
        display: none !important;
    }

    .app-shell {
        display: block;
    }

    .main {
        padding: 0;
    }

    .card,
    .panel {
        box-shadow: none;
        border: 1px solid #ddd;
        break-inside: avoid;
    }

    .table-wrap {
        overflow: visible;
        border: 1px solid #ccc;
    }

    table {
        min-width: auto;
    }

    .btn {
        display: none;
    }

    body {
        font-size: 12px;
        background: #fff;
    }
}

/* Time and weather aware dashboard welcome. */
.dashboard-weather-hero {
    --hero-sky-start: #71d7ff;
    --hero-sky-mid: #7dd3fc;
    --hero-sky-late: #f9c97c;
    --hero-sky-end: #f59e8b;
    --hero-glow: rgba(255, 247, 190, .42);
    --hero-glow-x: 79%;
    --hero-glow-y: 21%;
    --hero-land-far: rgba(86, 181, 120, .55);
    --hero-land-near: rgba(35, 126, 82, .72);
    --celestial-x: 50%;
    --celestial-y: 16%;
    --celestial-scale: 1;
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(300px, .82fr) minmax(480px, 1.18fr);
    grid-template-areas:
        "intro intro"
        "earnings form"
        "actions form"
        "tools tools";
    align-items: stretch;
    gap: 14px 22px;
    min-height: 0;
    overflow: hidden;
    padding: 24px 26px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 22px;
    background:
        radial-gradient(circle at var(--hero-glow-x) var(--hero-glow-y), var(--hero-glow), transparent 19%),
        linear-gradient(145deg, var(--hero-sky-start) 0%, var(--hero-sky-mid) 38%, var(--hero-sky-late) 75%, var(--hero-sky-end) 100%);
    box-shadow: 0 18px 42px rgba(64, 19, 84, .18), inset 0 1px rgba(255, 255, 255, .14);
    transition: background .7s ease, border-color .3s ease;
}

.dashboard-weather-hero.period-afternoon {
    --hero-sky-start: #70d8ff;
    --hero-sky-mid: #3eb8f5;
    --hero-sky-late: #3189ec;
    --hero-sky-end: #65bdf4;
    --hero-glow: rgba(255, 250, 203, .52);
    --hero-glow-x: 82%;
    --hero-glow-y: 20%;
    --hero-land-far: rgba(68, 190, 132, .58);
    --hero-land-near: rgba(21, 117, 91, .76);
}

.dashboard-weather-hero.period-evening {
    --hero-sky-start: #6d5ee7;
    --hero-sky-mid: #d04b97;
    --hero-sky-late: #f58a44;
    --hero-sky-end: #f9c070;
    --hero-glow: rgba(255, 225, 155, .42);
    --hero-glow-x: 79%;
    --hero-glow-y: 71%;
    --hero-land-far: rgba(91, 62, 151, .45);
    --hero-land-near: rgba(54, 38, 109, .72);
}

.dashboard-weather-hero.period-night {
    --hero-sky-start: #041020;
    --hero-sky-mid: #102d58;
    --hero-sky-late: #292f74;
    --hero-sky-end: #18234f;
    --hero-glow: rgba(186, 230, 253, .12);
    --hero-glow-x: 80%;
    --hero-glow-y: 18%;
    --hero-land-far: rgba(35, 63, 87, .62);
    --hero-land-near: rgba(6, 21, 36, .86);
}

.dashboard-weather-hero:not(.period-night).weather-cloudy {
    --hero-sky-start: #aec7d5;
    --hero-sky-mid: #96b5c5;
    --hero-sky-late: #7fa6bc;
    --hero-sky-end: #5f8da8;
    --hero-glow: rgba(236, 246, 250, .16);
}

.dashboard-weather-hero:not(.period-night).weather-fog {
    --hero-sky-start: #c3d1d8;
    --hero-sky-mid: #afc0c8;
    --hero-sky-late: #9bafb9;
    --hero-sky-end: #728b99;
    --hero-glow: rgba(255, 255, 255, .12);
}

.dashboard-weather-hero:not(.period-night).weather-rain {
    --hero-sky-start: #8aaaba;
    --hero-sky-mid: #7495a7;
    --hero-sky-late: #64869b;
    --hero-sky-end: #3f667b;
    --hero-glow: rgba(220, 238, 246, .1);
    --hero-land-far: rgba(42, 86, 83, .7);
    --hero-land-near: rgba(24, 56, 61, .9);
}

.dashboard-weather-hero:not(.period-night).weather-storm {
    --hero-sky-start: #566978;
    --hero-sky-mid: #42586a;
    --hero-sky-late: #344b60;
    --hero-sky-end: #24374d;
    --hero-glow: rgba(217, 232, 241, .07);
    --hero-land-far: rgba(32, 63, 66, .8);
    --hero-land-near: rgba(17, 36, 43, .95);
}

.dashboard-weather-hero.period-night.weather-cloudy,
.dashboard-weather-hero.period-night.weather-fog,
.dashboard-weather-hero.period-night.weather-rain,
.dashboard-weather-hero.period-night.weather-storm {
    --hero-sky-start: #040b14;
    --hero-sky-mid: #162433;
    --hero-sky-late: #24354a;
    --hero-sky-end: #101b2b;
    --hero-glow: rgba(186, 230, 253, .06);
}

.dashboard-weather-scene,
.dashboard-weather-scene>span {
    position: absolute;
    pointer-events: none;
}

.dashboard-weather-scene {
    z-index: -2;
    inset: 0;
    overflow: hidden;
}

.dashboard-weather-hero::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 26, 45, .42) 0%, rgba(13, 29, 50, .24) 43%, rgba(17, 25, 47, .08) 70%, rgba(20, 18, 39, .2) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(7, 16, 30, .08));
    content: "";
    pointer-events: none;
}

.dashboard-weather-hero::after {
    display: none;
}

.weather-sun,
.weather-moon {
    top: var(--celestial-y);
    left: var(--celestial-x);
    width: 88px;
    height: 88px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(var(--celestial-scale));
    transition: top .95s linear, left .95s linear, opacity .6s ease, transform .95s linear;
    will-change: top, left, transform;
}

.weather-sun {
    background: #fff5b6;
    box-shadow: 0 0 35px rgba(255, 245, 182, .9), 0 0 95px rgba(255, 215, 120, .54);
    animation: dashboardSunBreath 5s ease-in-out infinite;
}

.weather-moon {
    opacity: 0;
    background: linear-gradient(145deg, #ffffff, #dbeafe);
    box-shadow: 0 0 32px rgba(219, 234, 254, .62), 0 0 82px rgba(147, 197, 253, .24);
}

.weather-moon::before,
.weather-moon::after {
    position: absolute;
    border-radius: 50%;
    background: rgba(148, 163, 184, .2);
    content: "";
}

.weather-moon::before {
    top: 19px;
    left: 20px;
    width: 18px;
    height: 18px;
}

.weather-moon::after {
    right: 18px;
    bottom: 20px;
    width: 12px;
    height: 12px;
}

.celestial-night .weather-sun,
.period-night:not(.celestial-day) .weather-sun,
.weather-cloudy .weather-sun,
.weather-rain .weather-sun,
.weather-storm .weather-sun,
.weather-fog .weather-sun {
    opacity: 0;
}

.celestial-night.weather-clear .weather-moon,
.celestial-night.weather-pending .weather-moon,
.period-night:not(.celestial-day).weather-clear .weather-moon,
.period-night:not(.celestial-day).weather-pending .weather-moon {
    opacity: .94;
}

.weather-stars {
    inset: 0;
    opacity: 0;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, .82) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255, 255, 255, .58) 1px, transparent 1.6px);
    background-position: 0 0, 58px 43px;
    background-size: 116px 116px, 163px 163px;
}

.period-night .weather-stars {
    opacity: .68;
}

.weather-cloud {
    --cloud-scale: 1;
    right: 22%;
    left: auto;
    width: 132px;
    height: 31px;
    border-radius: 999px;
    opacity: .22;
    background: rgba(255, 255, 255, .76);
}

.weather-cloud::before,
.weather-cloud::after {
    position: absolute;
    bottom: 0;
    border-radius: 50%;
    background: inherit;
    content: "";
}

.weather-cloud::before {
    left: 22px;
    width: 50px;
    height: 50px;
}

.weather-cloud::after {
    right: 18px;
    width: 64px;
    height: 64px;
}

.weather-cloud--one {
    top: 92px;
    right: 22%;
    animation: dashboardCloudFloat 14s ease-in-out infinite;
}

.weather-cloud--two {
    --cloud-scale: .68;
    top: 194px;
    right: 7%;
    transform: scale(var(--cloud-scale));
    animation: dashboardCloudFloat 17s ease-in-out -6s infinite;
}

.weather-cloudy .weather-cloud,
.weather-rain .weather-cloud,
.weather-storm .weather-cloud,
.weather-fog .weather-cloud {
    opacity: .52;
}

.dashboard-weather-scene>.weather-rain {
    inset: -20% 0 0;
    opacity: 0;
    background-image: repeating-linear-gradient(105deg, transparent 0 17px, rgba(225, 241, 255, .52) 18px 19px, transparent 20px 34px);
    background-size: 120px 120px;
    transition: opacity .35s ease;
    animation: dashboardRain .8s linear infinite;
}

.dashboard-weather-hero.weather-rain .dashboard-weather-scene>.weather-rain,
.dashboard-weather-hero.weather-storm .dashboard-weather-scene>.weather-rain {
    opacity: .62;
}

.weather-mist {
    inset: 0;
    opacity: 0;
    background: repeating-linear-gradient(0deg, transparent 0 48px, rgba(245, 249, 250, .14) 49px 72px, transparent 73px 118px);
    filter: blur(7px);
}

.weather-fog .weather-mist {
    opacity: .9;
    animation: dashboardMist 8s ease-in-out infinite alternate;
}

.weather-land {
    right: -10%;
    bottom: -46%;
    width: 66%;
    height: 69%;
    border-radius: 50% 50% 0 0;
    background: var(--hero-land-near);
    transform: rotate(2deg);
    transition: background .7s ease;
}

.weather-land--far {
    right: 22%;
    bottom: -52%;
    background: var(--hero-land-far);
    transform: rotate(-5deg);
}

.dashboard-weather-hero .dashboard-welcome-intro {
    grid-area: intro;
    z-index: 2;
}

.dashboard-day-context {
    display: block;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, .7);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dashboard-weather-hero .dashboard-welcome-copy h2 {
    font-size: clamp(1.55rem, 2.4vw, 2.15rem);
    letter-spacing: -.025em;
}

.dashboard-weather-hero .dashboard-welcome-copy p {
    max-width: 660px;
    margin: 6px 0 0;
}

.dashboard-weather-hero .quick-actions {
    grid-area: actions;
    align-self: end;
}

.dashboard-weather-hero .dashboard-earnings {
    grid-area: earnings;
    align-self: stretch;
    width: 100%;
    min-height: 104px;
    background: rgba(23, 11, 39, .22);
}

.dashboard-weather-hero .dashboard-earnings b {
    margin-left: 5px;
    color: #fff;
}

.dashboard-weather-tools {
    grid-area: tools;
    z-index: 2;
    align-self: end;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.dashboard-weather-credit {
    width: fit-content;
    color: rgba(255, 255, 255, .55);
    font-size: 9px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dashboard-weather-credit:hover {
    color: #fff;
}

.dashboard-weather-hero .dashboard-period-form {
    grid-area: form;
    max-width: none;
    padding: 12px;
    background: rgba(24, 10, 39, .16);
}

.dashboard-weather-hero .dashboard-period-form .field {
    max-width: none;
}

.dashboard-weather-hero .dashboard-period-form input,
.dashboard-weather-hero .dashboard-period-form .btn {
    min-height: 38px;
}

@keyframes dashboardSunBreath {

    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.09);
    }
}

@keyframes dashboardCloudFloat {

    0%,
    100% {
        transform: translate3d(-14px, 0, 0) scale(var(--cloud-scale));
    }

    50% {
        transform: translate3d(14px, -5px, 0) scale(var(--cloud-scale));
    }
}

@keyframes dashboardRain {
    from {
        transform: translate3d(0, -40px, 0);
    }

    to {
        transform: translate3d(-22px, 80px, 0);
    }
}

@keyframes dashboardMist {
    from {
        transform: translateX(-2%);
    }

    to {
        transform: translateX(2%);
    }
}

@media (max-width: 760px) {
    .dashboard-weather-hero {
        grid-template-columns: 1fr;
        grid-template-areas:
            "intro"
            "earnings"
            "actions"
            "form"
            "tools";
        gap: 10px;
        min-height: 0;
        padding: 17px;
        border-radius: 17px;
    }

    .dashboard-weather-hero .dashboard-welcome-intro {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
    }

    .dashboard-weather-hero .dashboard-welcome-copy h2 {
        font-size: clamp(1.3rem, 6vw, 1.7rem);
    }

    .dashboard-weather-hero .dashboard-earnings,
    .dashboard-weather-hero .dashboard-period-form {
        max-width: none;
        width: 100%;
    }

    .weather-sun,
    .weather-moon {
        top: clamp(52px, var(--celestial-y), 118px);
        width: 58px;
        height: 58px;
    }

    .weather-cloud--one {
        top: 156px;
        right: -26px;
    }

    .weather-cloud--two {
        display: none;
    }

    .dashboard-weather-hero .dashboard-period-form .field {
        max-width: none;
    }
}

@media (max-width: 440px) {
    .dashboard-weather-hero .dashboard-welcome-intro {
        grid-template-columns: 1fr;
    }

    .dashboard-weather-hero .dashboard-clock {
        display: flex;
        width: 100%;
        padding-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, .14);
        justify-content: space-between;
    }

    .dashboard-weather-tools {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-weather-scene>span {
        animation: none !important;
        transition: none !important;
    }
}

/* --- Users and agents directory --- */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.agent-directory-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 14px;
    padding: 24px 26px;
    border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line));
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 92% 0, color-mix(in srgb, var(--brand-2) 14%, transparent), transparent 34%),
        linear-gradient(145deg, var(--surface), var(--surface-soft));
    box-shadow: var(--shadow-sm);
}

.agent-directory-hero h2 {
    margin: 2px 0 5px;
    font-size: clamp(1.3rem, 2.4vw, 1.75rem);
    letter-spacing: -.025em;
}

.agent-directory-hero p:last-child {
    max-width: 680px;
    color: var(--muted);
    font-size: 13px;
}

.agent-directory-hero>.btn {
    flex: 0 0 auto;
}

.agent-directory-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 14px;
}

.agent-directory-stats .stat {
    min-height: 102px;
    padding: 16px 18px;
}

.agent-directory-stats .stat strong {
    font-size: 1.7rem;
}

.agent-directory-panel {
    overflow: visible;
    animation: none;
    transform: none;
    border-color: color-mix(in srgb, var(--brand) 14%, var(--line));
    box-shadow: 0 8px 26px color-mix(in srgb, var(--brand) 5%, transparent);
}

.agent-directory-toolbar {
    align-items: flex-end;
}

.agent-directory-toolbar h2 {
    margin-bottom: 2px;
}

.agent-directory-filters {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 1;
}

.agent-directory-filters .field {
    width: 160px;
}

.agent-directory-filters .agent-directory-search {
    width: min(280px, 32vw);
}

.agent-directory-filters input,
.agent-directory-filters select {
    min-height: 39px;
    padding-block: 8px;
}

.agent-directory-table-wrap {
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.agent-directory-table {
    min-width: 840px;
    border-collapse: separate;
    border-spacing: 0;
}

.agent-directory-table thead th:first-child {
    border-top-left-radius: 13px;
}

.agent-directory-table thead th:last-child {
    border-top-right-radius: 13px;
}

.agent-directory-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 13px;
}

.agent-directory-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 13px;
}

.agent-directory-table td {
    padding-block: 14px;
}

.agent-directory-table td>small,
.agent-directory-table td>span>small,
.agent-directory-table td>strong+small {
    display: block;
    margin-top: 3px;
}

.agent-identity-cell {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 190px;
}

.agent-identity-cell>span:last-child {
    min-width: 0;
}

.agent-identity-cell strong,
.agent-identity-cell small,
.agent-email-link {
    display: block;
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-directory-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.agent-email-link {
    color: var(--brand);
    font-size: 12.5px;
    font-weight: 650;
}

.agent-manage-cell {
    width: 1%;
    text-align: right;
}

.agent-manage-menu {
    display: inline-block;
    text-align: left;
}

.agent-manage-menu>summary {
    list-style: none;
}

.agent-manage-menu>summary::-webkit-details-marker {
    display: none;
}

.agent-manage-menu[open]::before {
    content: '';
    position: fixed;
    z-index: 80;
    inset: 0;
    background: rgba(22, 12, 35, .52);
    backdrop-filter: blur(3px);
    animation: fadeIn .18s ease;
}

body.has-agent-modal {
    overflow: hidden;
}

@keyframes agentManageEnter {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 18px)) scale(.985);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.agent-manage-popover {
    position: fixed;
    z-index: 81;
    top: 50%;
    left: 50%;
    width: min(520px, calc(100vw - 28px));
    max-height: min(760px, calc(100dvh - 28px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-xl);
    transform: translate(-50%, -50%);
    animation: agentManageEnter .22s cubic-bezier(.2, .8, .2, 1) both;
}

.agent-manage-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.agent-manage-heading span,
.agent-manage-heading small {
    display: block;
}

.agent-manage-heading strong {
    font-size: 15px;
}

.agent-manage-heading small {
    margin-top: 2px;
    color: var(--muted);
}

.agent-manage-heading .btn {
    font-size: 21px;
    line-height: 1;
}

.agent-manage-form {
    display: grid;
    gap: 7px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
}

.agent-manage-form label {
    font-size: 12px;
}

.agent-manage-form .actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}

.agent-manage-form .actions select {
    min-width: 0;
}

.agent-password-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 7px;
}

.agent-password-row input {
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
}

.agent-danger-zone {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--danger-border);
    border-radius: var(--radius);
    background: var(--danger-bg);
}

.agent-danger-zone>strong {
    color: var(--danger);
    font-size: 12px;
}

.agent-danger-zone p {
    margin: 4px 0 10px;
    color: var(--text-secondary);
    font-size: 11.5px;
}

.agent-danger-zone .actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}

.agent-reset-link-alert>div {
    width: 100%;
}

.agent-reset-link-alert p {
    margin: 2px 0 8px;
}

.agent-copy-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.staff-directory-panel {
    margin-top: 14px;
    padding: 0;
    overflow: hidden;
}

.staff-directory-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.staff-directory-header::-webkit-details-marker {
    display: none;
}

.staff-directory-summary-action {
    display: flex;
    align-items: center;
    gap: 10px;
}

.staff-directory-toggle {
    width: 34px;
    height: 34px;
    position: relative;
    flex: 0 0 34px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
}

.staff-directory-toggle::before,
.staff-directory-toggle::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand);
    content: '';
    transform: translate(-50%, -50%);
    transition: transform .18s ease;
}

.staff-directory-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.staff-directory-panel[open] .staff-directory-toggle::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.staff-directory-header:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand) 28%, transparent);
    outline-offset: -3px;
}

.staff-directory-header .eyebrow {
    margin-bottom: 3px;
}

.staff-directory-header h2 {
    margin: 0 0 4px;
    font-size: 1.2rem;
    letter-spacing: -.015em;
}

.staff-directory-header p:last-child {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.staff-directory-total {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: max-content;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--line));
    border-radius: 12px;
    background: var(--surface);
}

.staff-directory-total strong {
    color: var(--brand);
    font-size: 1.15rem;
    line-height: 1;
}

.staff-directory-total span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.staff-directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 14px;
    padding: 18px;
}

.staff-profile-card {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 5%, transparent);
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.staff-profile-card:hover {
    border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
    box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 10%, transparent);
    transform: translateY(-2px);
}

.staff-profile-main {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 16px;
    color: inherit;
    text-decoration: none;
}

.staff-profile-main:focus-visible,
.staff-profile-footer a:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand) 30%, transparent);
    outline-offset: -3px;
}

.staff-profile-avatar {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
    border-radius: 15px;
    background: color-mix(in srgb, var(--brand) 10%, var(--surface));
    color: var(--brand);
    font-size: 13px;
    font-weight: 800;
}

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

.staff-profile-copy,
.staff-profile-name,
.staff-profile-title {
    display: block;
    min-width: 0;
}

.staff-profile-name,
.staff-profile-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-profile-name {
    margin-bottom: 3px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.staff-profile-title {
    color: var(--muted);
    font-size: 12.5px;
}

.staff-active-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #148458;
    font-size: 11.5px;
    font-weight: 750;
}

.staff-active-state i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #20a86f;
    box-shadow: 0 0 0 3px rgba(32, 168, 111, .12);
}

.staff-profile-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 13px 16px;
    border-top: 1px solid var(--line);
    background: var(--surface-soft);
}

.staff-profile-meta span,
.staff-profile-meta small,
.staff-profile-meta strong {
    display: block;
    min-width: 0;
}

.staff-profile-meta small {
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.staff-profile-meta strong {
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-profile-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 16px 13px;
    border-top: 1px solid var(--line);
}

.staff-profile-footer>span {
    color: var(--muted);
    font-size: 11px;
}

.staff-profile-footer a {
    min-width: max-content;
    color: var(--brand);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.staff-profile-footer a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.staff-directory-empty {
    padding: 42px 24px;
    text-align: center;
}

.staff-directory-empty strong {
    display: block;
    margin-bottom: 5px;
}

.staff-directory-empty p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

@media (max-width: 1180px) {
    .agent-directory-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .agent-directory-filters {
        justify-content: flex-start;
    }

    .agent-directory-filters .agent-directory-search {
        width: min(320px, 38vw);
    }

    .agent-directory-table-wrap {
        overflow-x: auto;
    }
}

@media (max-width: 760px) {
    .agent-directory-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 20px;
    }

    .agent-directory-hero>.btn {
        width: 100%;
    }

    .agent-directory-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .agent-directory-filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .agent-directory-filters .field,
    .agent-directory-filters .agent-directory-search {
        width: auto;
    }

    .agent-directory-filters .agent-directory-search {
        grid-column: 1 / -1;
    }

    .agent-manage-popover {
        padding: 16px;
    }
}

@media (max-width: 520px) {
    .agent-directory-stats {
        gap: 8px;
    }

    .agent-directory-stats .stat {
        min-height: 92px;
        padding: 13px;
    }

    .agent-directory-stats .stat strong {
        font-size: 1.45rem;
    }

    .agent-directory-filters {
        grid-template-columns: 1fr;
    }

    .agent-directory-filters .agent-directory-search {
        grid-column: 1;
    }

    .agent-directory-filters .btn {
        width: 100%;
    }

    .agent-password-row,
    .agent-danger-zone .actions,
    .agent-copy-row {
        grid-template-columns: 1fr;
    }

    .agent-password-row .btn,
    .agent-danger-zone .btn,
    .agent-copy-row .btn {
        width: 100%;
    }
}

/* ===================================================================
   Dark Mode
   =================================================================== */
[data-theme="dark"] {
    --bg: #0d1118;
    --bg-subtle: #111722;
    --surface: #161b24;
    --surface-soft: #1b222d;
    --surface-hover: #263042;
    --line: #3d4b60;
    --line-soft: #323f52;

    --text: #f4f1f7;
    --text-secondary: #e2e5ec;
    --muted: #aaa3b4;
    --placeholder: #91899d;

    --brand-light: rgba(80, 19, 105, .25);

    --success-bg: rgba(13, 150, 104, .12);
    --success-border: rgba(13, 150, 104, .3);
    --warning-bg: rgba(217, 119, 6, .12);
    --warning-border: rgba(217, 119, 6, .3);
    --danger-bg: rgba(220, 38, 38, .12);
    --danger-border: rgba(220, 38, 38, .3);
    --info-bg: rgba(37, 99, 235, .12);
    --info-border: rgba(37, 99, 235, .3);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .2);
    --shadow: 0 4px 16px rgba(0, 0, 0, .25);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, .35);
    --shadow-xl: 0 24px 60px rgba(0, 0, 0, .4);

    color-scheme: dark;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: var(--surface-soft);
    border-color: var(--line);
    color: var(--text);
}

[data-theme="dark"] .brand-logo,
[data-theme="dark"] .login-logo {
    background: rgba(255, 255, 255, .1);
}

[data-theme="dark"] .badge--new {
    background: rgba(124, 58, 237, .2);
}

[data-theme="dark"] .phone-link {
    background: rgba(37, 99, 235, .15);
}

[data-theme="dark"] .whatsapp-link {
    background: rgba(22, 163, 74, .15);
}

[data-theme="dark"] .notif-badge {
    border-color: var(--bg);
}

[data-theme="dark"] ::selection {
    background: rgba(80, 19, 105, .4);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--line);
}

[data-theme="dark"] .welcome-banner::after {
    background: rgba(255, 255, 255, .04);
}

/* Dark Mode Toggle */
.theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--surface);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all var(--transition);
    flex-shrink: 0;
    color: var(--muted);
}

.theme-toggle:hover {
    background: var(--surface-hover);
    box-shadow: var(--shadow-sm);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
}

/* ===================================================================
   Notification Dropdown
   =================================================================== */
.notif-wrapper {
    position: relative;
}

.notif-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-height: 440px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 200;
    display: none;
    animation: fadeInUp .2s ease;
    overflow: hidden;
}

.notif-dropdown.is-open {
    display: block;
}

.notif-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.notif-dropdown-header h3 {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}

.notif-dropdown-header button {
    background: none;
    border: none;
    color: var(--brand);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font);
}

.notif-dropdown-header button:hover {
    text-decoration: underline;
}

.notif-list {
    max-height: 360px;
    overflow-y: auto;
}

.notif-item {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
    transition: background var(--transition);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.notif-item:hover {
    background: var(--surface-hover);
    color: inherit;
}

.notif-item.is-unread {
    background: var(--brand-light);
}

.notif-item.is-unread:hover {
    background: color-mix(in srgb, var(--brand-light) 80%, var(--surface-hover));
}

.notif-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 14px;
}

.notif-icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.2px;
    display: block;
}

.notif-icon--info {
    background: var(--info-bg);
    color: var(--info);
}

.notif-icon--warning {
    background: var(--warning-bg);
    color: var(--warning);
}

.notif-icon--success {
    background: var(--success-bg);
    color: var(--success);
}

.notif-icon--danger {
    background: var(--danger-bg);
    color: var(--danger);
}

.notif-icon--assignment {
    background: var(--brand-light);
    color: var(--brand);
}

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

.notif-content strong {
    font-size: 13px;
    font-weight: 600;
    display: block;
}

.notif-content p {
    font-size: 12px;
    color: var(--muted);
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notif-content small {
    font-size: 11px;
    color: var(--placeholder);
}

.notif-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

.notif-summary {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

.notif-summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 11.5px;
    font-weight: 700;
}

.notif-summary-chip--action {
    background: var(--warning-bg);
    color: var(--warning);
}

.notif-filters {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
}

.notif-filters button {
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
    background: var(--surface);
    color: var(--muted);
    padding: 4px 9px;
    font: 600 11px/1.2 var(--font);
    cursor: pointer;
    white-space: nowrap;
}

.notif-filters button.is-active {
    border-color: var(--brand);
    background: var(--brand-light);
    color: var(--brand);
}

.notif-item {
    align-items: flex-start;
}

.notif-main {
    display: flex;
    gap: 10px;
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.notif-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
}

.notif-category,
.notif-resolution {
    border-radius: var(--radius-full);
    background: var(--surface-hover);
    color: var(--muted);
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
}

.notif-resolution {
    background: var(--warning-bg);
    color: var(--warning);
}

.notif-item.is-resolved {
    opacity: .68;
}

.notif-resolve {
    align-self: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
    background: var(--surface);
    color: var(--brand);
    padding: 4px 7px;
    font: 700 10px/1 var(--font);
    cursor: pointer;
}

.followup-popup-stack {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 1000;
    width: min(390px, calc(100vw - 32px));
    display: grid;
    gap: 10px;
}

.followup-popup {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 16px;
    border: 1px solid var(--warning-border);
    border-left: 4px solid var(--warning);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    animation: toastSlideIn .3s ease;
}

.followup-popup a {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 3px;
}

.followup-popup strong {
    color: var(--text);
    font-size: 13.5px;
}

.followup-popup span {
    color: var(--muted);
    font-size: 12px;
}

.followup-popup button {
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

@media (max-width: 760px) {
    .followup-popup-stack {
        top: 12px;
        right: 16px;
        left: 16px;
        width: auto;
    }
}

/* ===================================================================
   Duplicate Warning Panel
   =================================================================== */
.duplicate-warning {
    border: 1px solid var(--warning-border);
    background: var(--warning-bg);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 16px;
    animation: fadeInUp .3s ease;
    display: none;
}

.duplicate-warning.is-visible {
    display: block;
}

.duplicate-warning h4 {
    color: var(--warning);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.duplicate-warning ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.duplicate-warning li {
    padding: 6px 0;
    border-bottom: 1px solid rgba(217, 119, 6, .15);
    font-size: 13px;
}

.duplicate-warning li:last-child {
    border-bottom: 0;
}

/* ===================================================================
   WhatsApp Template Picker
   =================================================================== */
.wa-template-picker {
    position: relative;
    display: inline-block;
}

.wa-template-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    min-width: 320px;
    max-height: 300px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    display: none;
    animation: fadeInUp .2s ease;
}

.wa-template-menu.is-open {
    display: block;
}

.wa-template-menu-item {
    display: block;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line-soft);
    cursor: pointer;
    transition: background var(--transition);
    text-decoration: none;
    color: inherit;
}

.wa-template-menu-item:hover {
    background: var(--surface-hover);
    color: inherit;
}

.wa-template-menu-item:last-child {
    border-bottom: 0;
}

.wa-template-menu-item strong {
    font-size: 13px;
    display: block;
    margin-bottom: 2px;
}

.wa-template-menu-item small {
    font-size: 11.5px;
    color: var(--muted);
}

/* ===================================================================
   Archive Badge
   =================================================================== */
.badge--archived {
    background: var(--bg-subtle);
    color: var(--muted);
    text-decoration: line-through;
}

/* Reduce Motion */
.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
}

/* Compact Mode */
.is-compact .main {
    padding: 18px 22px;
}

.is-compact .card,
.is-compact .panel {
    padding: 14px;
}

.is-compact th,
.is-compact td {
    padding: 8px 12px;
}

.is-compact .stat strong {
    font-size: 1.5rem;
}

@media (max-width: 900px) {
    .notif-dropdown {
        width: calc(100vw - 32px);
        right: -60px;
    }
}

/* --- Responsive application shell --- */
.pipeline-overview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 14px;
    padding: 18px 20px;
    border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--line));
    border-radius: var(--radius-lg);
    background: linear-gradient(115deg, var(--surface) 0%, color-mix(in srgb, var(--brand-light) 42%, var(--surface)) 100%);
    box-shadow: var(--shadow-sm);
}

.pipeline-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--brand);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.pipeline-overview h2 {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    line-height: 1.25;
    letter-spacing: -.025em;
}

.pipeline-overview p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.pipeline-overview-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.pipeline-sync {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-right: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.pipeline-sync>span:first-child {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 12%, transparent);
}

.pipeline-board-shell {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.pipeline-board-guide {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--muted);
    font-size: 11px;
}

.pipeline-board-guide strong {
    color: var(--text);
    font-size: 13px;
}

.pipeline-board {
    display: grid;
    height: clamp(560px, calc(100dvh - 255px), 760px);
    grid-auto-flow: column;
    grid-auto-columns: minmax(270px, 300px);
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px;
    scroll-padding-inline: 10px;
    scroll-snap-type: x proximity;
    scrollbar-color: color-mix(in srgb, var(--brand) 24%, var(--line)) transparent;
    scrollbar-width: thin;
}

.pipeline-board::-webkit-scrollbar,
.pipeline-column-body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.pipeline-board::-webkit-scrollbar-thumb,
.pipeline-column-body::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--brand) 24%, var(--line));
    background-clip: padding-box;
}

.pipeline-column {
    --stage-accent: var(--brand);
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: color-mix(in srgb, var(--stage-accent) 3%, var(--surface-soft));
    scroll-snap-align: start;
}

.pipeline-column--assigned {
    --stage-accent: #6d55b7;
}

.pipeline-column--contacted {
    --stage-accent: #3979b8;
}

.pipeline-column--interested {
    --stage-accent: #168d79;
}

.pipeline-column--follow-up {
    --stage-accent: #c07818;
}

.pipeline-column--application {
    --stage-accent: #b45472;
}

.pipeline-column--future-intake {
    --stage-accent: #6d6681;
}

.pipeline-column-head {
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 58px;
    padding: 10px 11px;
    border-bottom: 1px solid var(--line-soft);
    background: color-mix(in srgb, var(--stage-accent) 5%, var(--surface));
}

.pipeline-stage-marker {
    width: 4px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--stage-accent);
}

.pipeline-column-title {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.pipeline-column-title strong {
    overflow: hidden;
    color: var(--text);
    font-size: 12px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-column-title small {
    overflow: hidden;
    color: var(--muted);
    font-size: 9.5px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-count {
    display: inline-flex;
    min-width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    border: 1px solid color-mix(in srgb, var(--stage-accent) 18%, transparent);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--stage-accent) 10%, var(--surface));
    color: var(--stage-accent);
    font-size: 10px;
    font-weight: 800;
}

.pipeline-column-body {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
    scrollbar-color: color-mix(in srgb, var(--stage-accent) 20%, var(--line)) transparent;
    scrollbar-width: thin;
}

.pipeline-card {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(30, 24, 50, .035);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.pipeline-card+.pipeline-card {
    margin-top: 7px;
}

.pipeline-card:hover {
    border-color: color-mix(in srgb, var(--stage-accent) 32%, var(--line));
    box-shadow: 0 7px 18px rgba(30, 24, 50, .08);
    transform: translateY(-1px);
}

.pipeline-card a {
    display: grid;
    min-width: 0;
    gap: 5px;
    padding: 10px;
    color: inherit;
}

.pipeline-card-topline {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.pipeline-card-topline strong {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text);
    font-size: 11.5px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.pipeline-card-topline>span {
    color: var(--placeholder);
    font-size: 18px;
    line-height: 1;
}

.pipeline-card-code {
    color: var(--brand);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .02em;
}

.pipeline-card-course {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-card-meta {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--muted);
    font-size: 9px;
}

.pipeline-card-meta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-card-meta span:first-child {
    font-weight: 600;
}

.pipeline-card small {
    padding-top: 5px;
    border-top: 1px solid var(--line-soft);
    color: var(--placeholder);
    font-size: 8.5px;
}

.pipeline-empty {
    display: grid;
    min-height: 180px;
    place-content: center;
    justify-items: center;
    padding: 24px 12px;
    text-align: center;
}

.pipeline-empty-mark {
    width: 34px;
    height: 34px;
    margin-bottom: 10px;
    border: 1px dashed color-mix(in srgb, var(--stage-accent) 32%, var(--line));
    border-radius: 50%;
    background: color-mix(in srgb, var(--stage-accent) 7%, var(--surface));
}

.pipeline-empty strong {
    color: var(--text-secondary);
    font-size: 11px;
}

.pipeline-empty p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 10px;
}

@media (max-width: 900px) {

    .pipeline-overview {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        padding: 16px;
    }

    .pipeline-overview-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .pipeline-sync {
        margin-right: auto;
    }

    .pipeline-board-guide span:last-child {
        display: none;
    }

    .pipeline-board {
        height: min(650px, calc(100dvh - 210px));
        min-height: 500px;
        grid-auto-columns: minmax(270px, 82vw);
        scroll-snap-type: x mandatory;
    }

    html,
    body {
        min-height: 100%;
        overflow-x: hidden;
    }

    .app-shell {
        display: block;
        min-height: 100dvh;
    }

    .main {
        width: 100%;
        padding: max(16px, env(safe-area-inset-top)) 16px calc(115px + env(safe-area-inset-bottom, 0px));
    }

    .topbar {
        gap: 10px;
        margin-bottom: 18px;
    }

    .topbar-left {
        flex: 1;
    }

    .topbar h1 {
        font-size: clamp(1.2rem, 5vw, 1.55rem);
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .topbar .actions {
        flex-shrink: 0;
    }

    .toolbar {
        align-items: stretch;
        gap: 12px;
    }

    .toolbar>* {
        min-width: 0;
    }

    .toolbar>.actions {
        width: 100%;
    }

    .actions {
        row-gap: 10px;
    }

    .panel,
    .card {
        max-width: 100%;
        padding: 16px;
    }

    .grid--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-grid,
    .grid--two,
    .meta-list {
        grid-template-columns: 1fr;
    }

    .field--full,
    .profile-actions {
        grid-column: 1 / -1;
    }

    .profile-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        margin-top: 16px;
        margin-bottom: 36px;
    }

    .profile-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .profile-hero,
    .lead-context {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .profile-hero .badge {
        margin-left: 90px;
    }

    .lead-context .actions {
        width: 100%;
    }

    .welcome-banner {
        padding: 20px;
    }

    .welcome-banner::after {
        width: 110px;
        height: 110px;
    }

    .pagination {
        align-items: flex-start;
    }

    .pagination .actions {
        width: 100%;
        justify-content: space-between;
    }

    .table-wrap {
        max-width: calc(100vw - 32px);
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 680px;
    }

    th,
    td {
        padding: 10px 12px;
        white-space: nowrap;
    }

    td {
        white-space: normal;
        min-width: 110px;
    }

    th:first-child,
    td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--surface);
        box-shadow: 1px 0 0 var(--line);
    }

    th:first-child {
        background: var(--surface-soft);
        z-index: 3;
    }

    .mobile-nav {
        padding-bottom: env(safe-area-inset-bottom);
        min-height: calc(62px + env(safe-area-inset-bottom));
    }

    .mobile-nav a,
    .mobile-nav-action {
        min-height: 58px;
        justify-content: center;
    }

    .sidebar {
        padding-top: max(22px, env(safe-area-inset-top));
        padding-bottom: max(22px, env(safe-area-inset-bottom));
    }

    .notif-dropdown {
        position: fixed;
        top: 70px;
        left: 16px;
        right: 16px;
        width: auto;
        max-height: calc(100dvh - 100px);
    }

    .wa-template-menu {
        position: fixed;
        left: 16px;
        right: 16px;
        bottom: calc(76px + env(safe-area-inset-bottom));
        min-width: 0;
        max-height: 50dvh;
    }
}

@media (max-width: 600px) {
    body {
        font-size: 14px;
    }

    .main {
        padding: max(12px, env(safe-area-inset-top)) 12px calc(160px + env(safe-area-inset-bottom, 0px));
    }

    .panel,
    .card {
        padding: 14px;
        border-radius: var(--radius);
    }

    .grid {
        gap: 12px;
    }

    .grid--cards,
    .grid--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stat {
        min-height: 104px;
    }

    .stat strong {
        font-size: 1.55rem;
    }

    .stat span {
        font-size: 10.5px;
    }

    .toolbar {
        display: grid;
        grid-template-columns: 1fr;
    }

    .toolbar>.btn,
    .toolbar>a.btn {
        width: 100%;
    }

    .toolbar form.actions,
    form.actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .toolbar form.actions input,
    .toolbar form.actions select,
    form.actions input,
    form.actions select {
        max-width: none !important;
        min-width: 0;
    }

    .bulk-bar {
        align-items: stretch;
    }

    .bulk-bar select {
        max-width: none !important;
        flex: 1 1 100%;
    }

    .bulk-bar .btn {
        flex: 1 1 auto;
    }

    .btn {
        min-height: 44px;
        padding: 9px 14px;
    }

    .btn--sm {
        min-height: 40px;
    }

    input,
    select,
    textarea {
        min-height: 44px;
        font-size: 16px;
    }

    textarea {
        min-height: 120px;
    }

    .profile-hero {
        display: grid;
        grid-template-columns: 72px 1fr;
        gap: 10px 14px;
        align-items: flex-start;
    }

    .profile-hero .profile-avatar {
        width: 72px !important;
        height: 72px !important;
        border-radius: 18px;
        grid-column: 1;
        grid-row: 1;
    }

    .profile-hero-content,
    .profile-hero > div:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        padding-top: 1px;
    }

    .profile-hero-top-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
    }

    .profile-hero-top-row .eyebrow {
        margin-bottom: 0;
        line-height: 1.2;
    }

    .profile-hero-content h2,
    .profile-hero > div:nth-child(2) h2 {
        font-size: 1.15rem;
        line-height: 1.25;
        margin: 4px 0 3px;
        word-break: break-word;
    }

    .profile-hero-content .muted,
    .profile-hero > div:nth-child(2) .muted {
        font-size: 12.5px;
        line-height: 1.2;
    }

    .profile-hero-subactions {
        margin-top: 8px;
    }

    .profile-hero .badge {
        margin-left: 0;
    }

    .lead-context {
        display: grid;
        grid-template-columns: 1fr;
    }

    .lead-context .actions .btn {
        flex: 1 1 auto;
    }

    .meta-list div {
        padding: 12px;
    }

    .history {
        padding-left: 18px;
        margin-left: 0;
        gap: 8px;
    }

    .history-item {
        padding: 10px 12px;
    }

    .history-item::before {
        left: -19px;
        top: 15px;
        width: 9px;
        height: 9px;
    }

    .history-item:not(:last-child)::after {
        left: -15px;
        top: 19px;
        bottom: -19px;
    }

    .pagination>span {
        width: 100%;
    }

    .table-wrap {
        max-width: calc(100vw - 24px);
        border-radius: 8px;
    }

    .login-page {
        width: 100vw;
        min-height: 100dvh;
        padding: 0;
    }

    .login-video-wrapper {
        position: fixed;
        width: 100vw;
        height: 100dvh;
    }

    .login-video-bg {
        width: 100vw;
        height: 100dvh;
        object-position: center center;
    }

    .login-card {
        width: 100vw;
        min-height: 100dvh;
        padding: clamp(54px, 10dvh, 82px) clamp(30px, 9vw, 42px) clamp(120px, 25dvh, 158px);
    }

    .login-alt-auth {
        width: max-content;
        max-width: calc(100vw - 16px);
    }

    .login-card .grid {
        width: 100%;
    }

    .login-page.video-unavailable .login-card,
    .no-js .login-card {
        width: min(92vw, 420px);
        padding: 24px;
    }
}

@media (max-width: 380px) {

    .grid--cards,
    .grid--three {
        grid-template-columns: 1fr;
    }

    .topbar .eyebrow {
        display: none;
    }

    .nav-toggle {
        width: 40px;
        height: 40px;
    }

    .toolbar form.actions,
    form.actions {
        grid-template-columns: 1fr;
    }

    .actions>.btn {
        flex: 1 1 auto;
    }

    .login-card h1 {
        font-size: .95rem;
    }

    .login-brand img.login-logo {
        width: 40px;
        min-width: 40px;
        height: 40px;
    }
}

@media (max-height: 620px) and (orientation: landscape) {
    .login-page {
        overflow-y: auto;
        place-items: start center;
    }

    .login-card {
        margin-block: 8px;
        min-height: 540px;
        transform: scale(.88);
        transform-origin: top center;
    }

    .login-card.is-visible {
        transform: scale(.88);
    }
}

/* --- Operational dashboard and lookup enhancements --- */
.stat-link {
    color: inherit;
    text-decoration: none;
}

.stat-link:hover {
    color: inherit;
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--brand) 25%, var(--line));
}

.dashboard-clock {
    position: absolute;
    top: 26px;
    right: 28px;
    display: grid;
    justify-items: end;
    z-index: 1;
}

.dashboard-clock strong {
    font-size: 1.25rem;
    line-height: 1.2;
}

.dashboard-clock span {
    font-size: 11.5px;
    opacity: .75;
}

.dashboard-period-panel {
    margin-bottom: 18px;
}

.dashboard-period-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 15px;
}

.dashboard-period-heading h2 {
    margin: 1px 0 3px;
    font-size: 1.15rem;
}

.dashboard-period-heading .muted {
    font-size: 12.5px;
}

.dashboard-period-days {
    flex: 0 0 auto;
    padding: 5px 10px;
    border-radius: var(--radius-full);
    background: var(--brand-light);
    color: var(--brand);
    font-size: 11.5px;
    font-weight: 700;
}

.dashboard-period-form {
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
}

.dashboard-period-form .field {
    min-width: 170px;
}

.dashboard-period-form .btn {
    min-height: 42px;
}

.dashboard-period-form .btn--primary:hover {
    color: #fff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 90%, #fff), var(--brand));
}

.dashboard-period-presets {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid var(--line-soft);
}

.dashboard-insights {
    margin-top: 18px;
}

.chart-panel {
    min-height: 300px;
}

.bar-chart {
    display: grid;
    gap: 11px;
}

.bar-row {
    display: grid;
    grid-template-columns: minmax(90px, 130px) 1fr 34px;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--text-secondary);
}

.bar-row:hover {
    color: var(--brand);
}

.bar-row>span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bar-track {
    height: 9px;
    background: var(--line-soft);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.bar-track i {
    display: block;
    height: 100%;
    min-width: 3px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
}

.bar-row strong {
    text-align: right;
    color: var(--text);
}

.column-chart {
    height: 215px;
    display: grid;
    grid-template-columns: repeat(var(--chart-columns, 7), minmax(42px, 1fr));
    align-items: end;
    gap: 10px;
    padding: 8px 2px 4px;
    overflow-x: auto;
    overflow-y: hidden;
}

.column-item {
    height: 100%;
    display: grid;
    grid-template-rows: 22px 1fr 22px;
    gap: 4px;
    text-align: center;
    color: var(--muted);
}

.column-item>strong {
    font-size: 11px;
    color: var(--text-secondary);
}

.column-item>span {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: linear-gradient(180deg, transparent, var(--surface-soft));
    border-bottom: 1px solid var(--line);
}

.column-item i {
    display: block;
    width: min(28px, 70%);
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, var(--brand-2), var(--brand));
    transition: height var(--transition);
}

.column-item:hover i {
    filter: brightness(1.12);
}

.column-item small {
    font-size: 11px;
}

/* Dashboard refinement */
.dashboard-welcome {
    min-height: 148px;
    margin-bottom: 14px;
    padding: 24px 28px;
}

.dashboard-welcome h2 {
    font-size: 1.35rem;
}

.dashboard-welcome p {
    max-width: 680px;
}

.dashboard-welcome .quick-actions {
    margin-top: 14px;
}

.dashboard-welcome-action {
    border-color: rgba(255, 255, 255, .32);
    background: rgba(255, 255, 255, .16);
    color: #fff;
    box-shadow: none;
}

.dashboard-welcome-action:hover {
    border-color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .24);
    color: #fff;
}

.dashboard-clock {
    top: 24px;
}

.dashboard-period-panel {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    grid-template-areas: "heading form" "presets form";
    align-items: center;
    gap: 10px 22px;
    margin-bottom: 14px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.dashboard-period-heading {
    grid-area: heading;
    min-width: 0;
    margin-bottom: 0;
    gap: 16px;
}

.dashboard-period-label {
    margin-bottom: 2px;
    color: var(--brand);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dashboard-period-heading h2 {
    margin: 0 0 2px;
    font-size: 1.05rem;
    line-height: 1.35;
}

.dashboard-period-heading .muted {
    font-size: 11.5px;
}

.dashboard-period-form {
    grid-area: form;
    justify-content: flex-end;
    gap: 8px;
}

.dashboard-period-form .field {
    width: 145px;
    min-width: 0;
}

.dashboard-period-form .field label {
    font-size: 11.5px;
}

.dashboard-period-form input {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 12.5px;
}

.dashboard-period-form .btn {
    min-height: 38px;
    padding-inline: 13px;
}

.dashboard-period-presets {
    grid-area: presets;
    gap: 6px;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.dashboard-period-presets .btn {
    min-height: 29px;
    padding: 4px 10px;
}

.dashboard-reporting-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 9px;
    padding: 9px 12px;
    border: 1px solid var(--line-soft);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius);
    background: var(--surface-soft);
    color: var(--text-secondary);
}

.dashboard-reporting-context span {
    flex: 0 0 auto;
    font-size: 11.5px;
}

.dashboard-reporting-context strong {
    margin-right: 5px;
    color: var(--text);
    font-size: 11.5px;
}

.dashboard-reporting-context small {
    color: var(--muted);
    font-size: 10.5px;
    line-height: 1.4;
    text-align: right;
}

.dashboard-kpis {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.dashboard-kpis--agent {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-kpis--internal {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-kpis--admin {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dashboard-kpis .stat {
    min-height: 106px;
    padding: 16px;
    border-left: 1px solid var(--line);
    border-top: 3px solid var(--brand);
    box-shadow: var(--shadow-sm);
}

.dashboard-kpis .stat::before {
    display: none;
}

.dashboard-kpis .stat--info {
    border-top-color: var(--info);
}

.dashboard-kpis .stat--neutral {
    border-top-color: var(--text-secondary);
}

.dashboard-kpis .stat--warning {
    border-top-color: var(--warning);
}

.dashboard-kpis .stat--success {
    border-top-color: var(--success);
}

.dashboard-kpis .stat--danger {
    border-top-color: var(--danger);
}

.dashboard-kpis .stat span {
    font-size: 10.5px;
    line-height: 1.3;
}

.dashboard-kpis .stat strong {
    margin-top: 10px;
    font-size: 1.7rem;
}

.dashboard-workload {
    display: grid;
    grid-template-columns: minmax(240px, .9fr) minmax(420px, 1.1fr);
    align-items: center;
    gap: 20px;
    margin-top: 0;
    padding: 16px 18px;
}

.dashboard-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.dashboard-section-heading h2 {
    margin-bottom: 2px;
    font-size: 1rem;
}

.dashboard-section-heading .muted {
    max-width: 430px;
    font-size: 11.5px;
}

.dashboard-workload-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.dashboard-workload-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 1px 12px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--surface-soft);
    color: var(--text);
}

.dashboard-workload-item:hover {
    border-color: color-mix(in srgb, var(--brand) 24%, var(--line));
    background: var(--surface-hover);
    color: var(--text);
}

.dashboard-workload-item span {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
}

.dashboard-workload-item strong {
    grid-column: 2;
    grid-row: 1 / 3;
    font-size: 1.75rem;
    line-height: 1;
}

.dashboard-workload-item small {
    color: var(--muted);
    font-size: 10.5px;
}

.dashboard-workload-item--today strong {
    color: var(--warning);
}

.dashboard-workload-item--overdue strong {
    color: var(--danger);
}

@keyframes dashboardChartEnter {
    from {
        opacity: 0;
        transform: scale(.88) rotate(-8deg) translateY(16px);
    }

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

@keyframes donutSegmentDraw {
    from {
        stroke-dasharray: 0 100;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    to {
        stroke-dasharray: var(--segment-dash) 100;
        opacity: 1;
    }
}

@keyframes donutCenterPop {
    0% {
        opacity: 0;
        transform: scale(0.72);
    }

    60% {
        opacity: 1;
        transform: scale(1.06);
    }

    80% {
        transform: scale(0.97);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.dashboard-distribution-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.dashboard-pie-panel {
    --chart-accent: var(--brand);
    position: relative;
    isolation: isolate;
    min-width: 0;
    overflow: hidden;
    padding: 20px;
    border-top: 3px solid var(--chart-accent);
    background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--chart-accent) 4%, var(--surface)));
}

.dashboard-pie-panel--course {
    --chart-accent: var(--brand-2);
}

.dashboard-pie-panel::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -74px;
    right: -54px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--chart-accent) 15%, transparent), transparent 68%);
    pointer-events: none;
}

.dashboard-chart-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.dashboard-chart-heading-copy {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.dashboard-chart-heading h2 {
    margin: 0 0 2px;
    font-size: 1rem;
}

.dashboard-chart-heading p {
    font-size: 11.5px;
}

.dashboard-chart-mark {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid color-mix(in srgb, var(--chart-accent) 24%, var(--line));
    border-radius: 10px;
    background: conic-gradient(from 28deg, var(--chart-accent) 0 38%, color-mix(in srgb, var(--chart-accent) 38%, transparent) 38% 66%, color-mix(in srgb, var(--chart-accent) 12%, var(--surface)) 66%);
    box-shadow: inset 0 0 0 7px var(--surface);
}

.dashboard-chart-scope {
    flex: 0 0 auto;
    padding: 5px 12px;
    border: 1px solid color-mix(in srgb, var(--chart-accent) 36%, var(--line));
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--chart-accent) 16%, var(--surface-soft));
    color: color-mix(in srgb, var(--chart-accent) 85%, #ffffff);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.dashboard-pie-body {
    min-height: 258px;
    display: grid;
    place-items: center;
}

.dashboard-donut-figure {
    width: 100%;
    display: grid;
    justify-items: center;
    gap: 12px;
    min-width: 0;
    margin: 0;
}

.dashboard-donut-figure figcaption {
    min-height: 34px;
    max-width: 360px;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

.dashboard-donut {
    position: relative;
    width: clamp(210px, 24vw, 260px);
    max-width: 100%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    opacity: 0;
    /* revealed by scroll IntersectionObserver */
}

.dashboard-pie-panel.is-visible .dashboard-donut {
    animation: dashboardChartEnter .65s cubic-bezier(.2, .8, .2, 1) both;
}

.dashboard-donut-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 12px 20px rgba(80, 19, 105, .13));
}

.dashboard-donut-track,
.dashboard-donut-segment {
    fill: none;
    transform: rotate(-90deg);
    transform-origin: 60px 60px;
}

.dashboard-donut-track {
    stroke: var(--line-soft);
    stroke-width: 16;
}

.dashboard-donut-segment {
    stroke: var(--segment-color, var(--brand));
    stroke-width: 16;
    stroke-linecap: butt;
    cursor: pointer;
    pointer-events: stroke;
    transition: stroke-width .18s ease, opacity .18s ease, filter .18s ease;
}

/* Segment draw-on fires only when panel scrolls into view */
.dashboard-pie-panel.is-visible .dashboard-donut-segment {
    animation: donutSegmentDraw var(--segment-duration, 0.7s) cubic-bezier(0.4, 0, 0.2, 1) var(--segment-delay, 0s) both;
}

.dashboard-donut-segment.is-muted {
    opacity: .26;
}

.dashboard-donut-segment:hover,
.dashboard-donut-segment:focus,
.dashboard-donut-segment.is-active {
    opacity: 1;
    stroke-width: 20;
    filter: drop-shadow(0 3px 4px color-mix(in srgb, var(--segment-color) 45%, transparent));
    outline: none;
}

.dashboard-donut-segment:focus-visible {
    stroke-width: 21;
    filter: drop-shadow(0 0 3px var(--surface)) drop-shadow(0 0 5px var(--segment-color));
}

.dashboard-donut-center {
    position: absolute;
    inset: 28%;
    display: grid;
    align-content: center;
    justify-items: center;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--line-soft);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--surface) 82%, #fff), var(--surface) 64%);
    box-shadow: 0 8px 24px rgba(30, 24, 50, .1);
    line-height: 1.12;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    /* revealed when panel is visible */
}

.dashboard-pie-panel.is-visible .dashboard-donut-center {
    animation: donutCenterPop 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) 0.45s both;
}

.dashboard-donut-center strong {
    font-size: 1.8rem;
    font-variant-numeric: tabular-nums;
}

.dashboard-donut-center small {
    width: 100%;
    max-width: 105px;
    margin-top: 3px;
    overflow: hidden;
    color: var(--muted);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.25;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.dashboard-donut-center em {
    min-height: 13px;
    margin-top: 3px;
    color: var(--chart-accent);
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
}

.reduce-motion .dashboard-donut {
    animation: none;
    opacity: 1;
}

@media (prefers-reduced-motion:reduce) {
    .dashboard-donut {
        animation: none;
        opacity: 1;
    }

    .dashboard-pie-panel.is-visible .dashboard-donut {
        animation: none;
        opacity: 1;
    }

    .dashboard-donut-segment {
        transition: none;
        animation: none;
    }

    .dashboard-pie-panel.is-visible .dashboard-donut-segment {
        animation: none;
    }

    .dashboard-donut-center {
        animation: none;
        opacity: 1;
    }

    .dashboard-pie-panel.is-visible .dashboard-donut-center {
        animation: none;
        opacity: 1;
    }
}

.dashboard-insights {
    margin-top: 14px;
}

.chart-panel {
    min-height: 278px;
    padding: 18px;
}

.chart-panel .toolbar {
    margin-bottom: 14px;
}

.chart-panel .toolbar h2 {
    font-size: 1rem;
}

.chart-panel .toolbar p {
    margin-top: 2px;
    font-size: 11.5px;
}

.dashboard-chart-empty {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 26px 20px;
    text-align: center;
}

.dashboard-chart-empty-visual {
    position: relative;
    width: 64px;
    height: 64px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%), var(--surface-soft);
    border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.dashboard-chart-empty-visual svg {
    width: 32px;
    height: 32px;
    color: var(--brand);
}

.dashboard-chart-empty-visual--course {
    background: radial-gradient(circle, color-mix(in srgb, #7c3aed 14%, transparent), transparent 70%), var(--surface-soft);
    border-color: color-mix(in srgb, #7c3aed 20%, var(--line));
}

.dashboard-chart-empty-visual--course svg {
    color: #7c3aed;
}

.dashboard-chart-empty-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--line);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.dashboard-chart-empty strong {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
}

.dashboard-chart-empty p {
    max-width: 280px;
    margin-top: 5px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.dashboard-chart-empty .dashboard-empty-btn {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-full);
}

.dashboard-lead-panel {
    margin-top: 14px;
}

.mis-student-lookup {
    position: relative;
}

.lookup-results {
    position: absolute;
    z-index: 20;
    top: calc(100% - 18px);
    left: 0;
    right: 0;
    max-height: 300px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.lookup-result {
    width: 100%;
    display: grid;
    gap: 2px;
    padding: 11px 13px;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    background: transparent;
    color: var(--text);
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.lookup-result:hover,
.lookup-result:focus {
    background: var(--surface-hover);
    outline: none;
}

.lookup-result span,
.lookup-empty {
    color: var(--muted);
    font-size: 12px;
}

.lookup-empty {
    padding: 14px;
}

input.is-mis-filled,
select.is-mis-filled {
    background: var(--success-bg);
    border-color: var(--success-border);
}

[data-qualification-other][hidden] {
    display: none !important;
}

.course-picker {
    position: relative;
}

.course-picker-control {
    position: relative;
}

.course-picker-control input {
    padding-left: 39px;
}

.course-picker-search-mark {
    position: absolute;
    top: 50%;
    left: 15px;
    width: 14px;
    height: 14px;
    border: 2px solid var(--muted);
    border-radius: 50%;
    transform: translateY(-58%);
    pointer-events: none;
    opacity: .72;
}

.course-picker-search-mark::after {
    content: '';
    position: absolute;
    right: -5px;
    bottom: -3px;
    width: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--muted);
    transform: rotate(45deg);
}

.course-picker:not(.is-enhanced) .course-picker-control,
.course-picker:not(.is-enhanced) .course-picker-menu,
.course-picker:not(.is-enhanced) .course-picker-selected {
    display: none;
}

.course-picker.is-enhanced .course-picker-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0 !important;
}

.course-picker-menu {
    position: absolute;
    z-index: 35;
    top: 76px;
    left: 0;
    right: 0;
    max-height: 310px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.course-picker-menu[hidden] {
    display: none;
}

.course-picker-status {
    position: sticky;
    top: -6px;
    z-index: 1;
    margin: -6px -6px 4px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--surface);
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
}

.course-picker-option {
    display: grid;
    width: 100%;
    gap: 2px;
    padding: 11px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.course-picker-option[hidden] {
    display: none !important;
}

.course-picker-option:hover,
.course-picker-option:focus-visible,
.course-picker-option.is-active {
    outline: none;
    background: var(--surface-hover);
    color: var(--brand);
}

.course-picker-option strong {
    font-size: 12.5px;
    font-weight: 700;
}

.course-picker-option span {
    color: var(--muted);
    font-size: 11px;
}

.course-picker-empty {
    padding: 18px 12px;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.course-picker-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 64px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-light) 46%, var(--surface));
}

.course-picker-selected[hidden] {
    display: none;
}

.course-picker-selected>div {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.course-picker-selected small {
    color: var(--brand);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.course-picker-selected strong {
    overflow: hidden;
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.course-picker-selected span {
    color: var(--muted);
    font-size: 11px;
}

.course-picker-selected button {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--brand);
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
}

.course-picker-selected button:hover {
    text-decoration: underline;
}

.settings-shortcuts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.settings-shortcut {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-soft);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, border-color 0.2s ease;
    border-left: 3px solid var(--brand);
}

.settings-shortcut:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.08);
    border-color: var(--brand);
}

.settings-shortcut-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--brand-light);
    color: var(--brand);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.settings-shortcut strong {
    display: block;
    font-size: 0.95rem;
    line-height: 1.3;
}

.settings-shortcut span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
    display: block;
    margin-top: 2px;
}

.settings-collapsible-panel {
    margin-bottom: 18px;
}

.settings-collapsible-panel summary.panel-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
    user-select: none;
    gap: 12px;
}

.settings-collapsible-panel summary::-webkit-details-marker {
    display: none;
}

.settings-collapsible-panel summary .settings-collapse-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

.settings-collapsible-panel summary .chevron-icon {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-collapsible-panel[open] summary .chevron-icon {
    transform: rotate(180deg);
}

.settings-collapsible-panel .panel-content {
    border-top: 1px solid var(--line);
    padding-top: 16px;
    margin-top: 16px;
}

.auth-panel {
    position: relative;
    z-index: 2;
    width: min(430px, 100%);
}

.auth-panel h1 {
    margin: 4px 0 6px;
    font-size: 1.5rem;
}

.login-page--simple {
    background: linear-gradient(145deg, var(--sidebar-bg), var(--brand));
    padding: 20px;
}

.login-help-link {
    justify-self: center;
    color: var(--brand);
    font-size: 11px;
    font-weight: 600;
}

.login-help-link:hover {
    text-decoration: underline;
}

@media (max-width: 1180px) {
    .dashboard-period-panel {
        grid-template-columns: 1fr;
        grid-template-areas: "heading" "form" "presets";
    }

    .dashboard-period-form {
        justify-content: flex-start;
    }

    .dashboard-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-workload {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .dashboard-clock {
        position: static;
        justify-items: start;
        margin-bottom: 14px;
    }

    .dashboard-insights {
        grid-template-columns: 1fr;
    }

    .dashboard-period-panel {
        grid-template-columns: 1fr;
        grid-template-areas: "heading" "form" "presets";
    }

    .dashboard-period-form {
        justify-content: flex-start;
    }

    .dashboard-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-workload {
        grid-template-columns: 1fr;
    }

    .dashboard-distribution-grid {
        grid-template-columns: 1fr;
    }
}

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

    .dashboard-period-heading {
        display: block;
    }

    .dashboard-period-days {
        display: inline-flex;
        margin-top: 10px;
    }

    .dashboard-period-form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-period-form .field {
        width: auto;
        min-width: 0;
    }

    .dashboard-period-form .btn {
        width: 100%;
    }

    .dashboard-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-reporting-context {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .dashboard-reporting-context small {
        text-align: left;
    }

    .dashboard-workload-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-section-heading {
        align-items: flex-start;
    }

    .dashboard-donut {
        width: min(230px, 72vw);
    }

    .dashboard-chart-heading {
        display: block;
    }

    .dashboard-chart-scope {
        display: inline-flex;
        margin-top: 8px;
    }

    .bar-row {
        grid-template-columns: 90px 1fr 28px;
    }

    .column-chart {
        gap: 5px;
    }

    .column-item i {
        width: min(20px, 75%);
    }

    .auth-panel {
        width: min(92vw, 430px);
    }
}

@media (max-width: 420px) {
    .dashboard-period-form {
        grid-template-columns: 1fr;
    }

    .dashboard-pie-panel {
        padding: 16px;
    }

    .dashboard-donut {
        width: min(210px, 70vw);
    }
}

/* --- Agent registration form --- */
.agent-create-panel {
    overflow: hidden;
    padding: 0;
}

.agent-create-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
}

.agent-create-header .breadcrumb {
    margin-bottom: 8px;
}

.agent-create-header h2 {
    margin: 0 0 5px;
    font-size: 1.25rem;
    letter-spacing: -.02em;
}

.agent-create-header p {
    max-width: 680px;
    color: var(--muted);
    font-size: 13px;
}

.agent-create-header>.btn {
    flex: 0 0 auto;
}

.agent-create-alerts {
    padding: 20px 24px 0;
}

.agent-create-alerts:empty {
    display: none;
}

.agent-create-alerts .alert:last-child {
    margin-bottom: 0;
}

.agent-create-form {
    display: block;
    padding: 24px;
}

.agent-create-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    align-items: start;
    gap: 20px;
}

.agent-form-main {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.03);
}

.agent-form-section {
    display: grid;
    grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
    gap: 32px;
    padding: 28px 26px;
    border-bottom: 1px solid var(--line-soft);
}

.agent-form-section:last-child {
    border-bottom: 0;
}

.agent-section-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.agent-section-heading .section-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--brand-light) 55%, var(--surface-soft));
    color: var(--brand);
    margin-bottom: 6px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 15%, transparent);
}

.agent-section-heading h3 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 750;
    color: var(--text);
    letter-spacing: -0.01em;
}

.agent-section-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.agent-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
    align-items: start;
    min-width: 0;
}

.agent-section-grid .field--full {
    grid-column: 1 / -1;
}

.field-required {
    color: #e11d48;
    font-weight: 700;
    margin-left: 2px;
}

.field-optional {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 2px 7px;
    border: 1px solid var(--line-soft);
    border-radius: 4px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mis-student-lookup {
    position: relative;
    padding: 18px 20px;
    border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line-soft));
    border-radius: 10px;
    background: color-mix(in srgb, var(--brand-light) 30%, var(--surface));
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

.mis-student-lookup label {
    font-weight: 700;
    color: var(--brand);
    margin-bottom: 8px;
}

.mis-student-lookup input[type="search"] {
    background: var(--surface);
    border-color: color-mix(in srgb, var(--brand) 25%, var(--line));
    height: 42px;
    border-radius: 8px;
}

.check-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid var(--line-soft);
    border-radius: 9px;
    background: color-mix(in srgb, var(--brand-light) 18%, var(--surface));
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.check-row:hover {
    background: color-mix(in srgb, var(--brand-light) 35%, var(--surface));
    border-color: color-mix(in srgb, var(--brand) 30%, var(--line-soft));
}

.check-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--brand);
    cursor: pointer;
    flex-shrink: 0;
}

.agent-duplicate-status {
    min-height: 17px;
    font-size: 11px;
    font-weight: 650;
}

.agent-duplicate-status--checking {
    color: var(--muted);
}

.agent-duplicate-status--available {
    color: var(--success);
}

.agent-duplicate-status--duplicate {
    color: var(--danger);
}

.agent-duplicate-status--unavailable {
    color: var(--warning);
}

.agent-create-form input.is-available {
    border-color: var(--success-border);
    background: var(--success-bg);
}

.agent-create-form input.is-duplicate {
    border-color: var(--danger-border);
    background: var(--danger-bg);
}

.agent-code-field input[readonly] {
    border-style: dashed;
    background: var(--surface-soft);
    color: var(--brand);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 800;
    letter-spacing: .04em;
    cursor: default;
}

.agent-form-aside {
    position: sticky;
    top: 20px;
    display: grid;
    gap: 12px;
}

.agent-form-guide,
.agent-form-privacy {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-soft);
}

.agent-form-guide {
    padding: 18px;
}

.agent-form-guide h3 {
    margin: 0 0 13px;
    font-size: 13.5px;
}

.agent-form-guide dl {
    display: grid;
    gap: 0;
    margin: 0;
}

.agent-form-guide dl>div {
    padding: 12px 0;
    border-top: 1px solid var(--line-soft);
}

.agent-form-guide dt {
    margin-bottom: 2px;
    color: var(--text-secondary);
    font-size: 11.5px;
    font-weight: 750;
}

.agent-form-guide dd {
    margin: 0;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.55;
}

.agent-form-privacy {
    padding: 15px 16px;
    border-color: var(--warning-border);
    background: var(--warning-bg);
}

.agent-form-privacy strong {
    display: block;
    margin-bottom: 3px;
    color: var(--warning);
    font-size: 12px;
}

.agent-form-privacy p {
    color: var(--text-secondary);
    font-size: 11.5px;
    line-height: 1.55;
}

.agent-create-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.agent-create-actions p {
    color: var(--muted);
    font-size: 11.5px;
}

.agent-create-actions .actions {
    justify-content: flex-end;
}

.btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: none;
}

@media (max-width: 1180px) {
    .agent-create-layout {
        grid-template-columns: 1fr;
    }

    .agent-form-aside {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .agent-create-header {
        flex-wrap: wrap;
        padding: 18px;
    }

    .agent-create-header>.btn {
        width: 100%;
    }

    .agent-create-alerts {
        padding: 16px 16px 0;
    }

    .agent-create-form {
        padding: 16px;
    }

    .agent-form-section {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 18px;
    }

    .agent-section-heading p {
        max-width: 560px;
    }

    .agent-form-aside {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .agent-section-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .agent-section-grid .field--full {
        grid-column: 1;
    }

    .agent-create-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .agent-create-actions .actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .agent-create-actions .btn {
        width: 100%;
    }

    .course-picker-menu {
        position: static;
        max-height: 240px;
        margin-top: 6px;
    }
}

/* --- Dashboard phone layout only --- */
@media (max-width: 700px) {
    .dashboard-welcome {
        display: grid;
        gap: 8px;
        min-height: 0;
        margin-bottom: 12px;
        padding: 17px;
        overflow: hidden;
        border-radius: var(--radius-lg);
        box-shadow: 0 10px 26px rgba(46, 16, 62, .14);
    }

    .dashboard-welcome::after {
        right: -48px;
        bottom: -62px;
        width: 150px;
        height: 150px;
        opacity: .42;
    }

    .dashboard-welcome .dashboard-clock {
        position: static;
        z-index: 1;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        margin: 0 0 3px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, .16);
    }

    .dashboard-welcome .dashboard-clock strong {
        font-size: 1rem;
        font-variant-numeric: tabular-nums;
    }

    .dashboard-welcome .dashboard-clock span {
        color: rgba(255, 255, 255, .7);
        font-size: 10px;
        line-height: 1.35;
        text-align: right;
    }

    .dashboard-welcome h2 {
        position: relative;
        z-index: 1;
        margin: 2px 0 0;
        font-size: 1.28rem;
        line-height: 1.25;
        letter-spacing: -.02em;
    }

    .dashboard-welcome>p {
        position: relative;
        z-index: 1;
        margin: 0;
        color: rgba(255, 255, 255, .78);
        font-size: 11.5px;
        line-height: 1.5;
    }

    .dashboard-welcome>p strong {
        color: #fff;
    }

    .dashboard-welcome .quick-actions {
        position: relative;
        z-index: 1;
        margin-top: 2px;
    }

    .dashboard-welcome .quick-actions:empty {
        display: none;
    }

    .dashboard-welcome-action {
        width: 100%;
        min-height: 40px;
        justify-content: center;
    }

    .dashboard-welcome .dashboard-period-form {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 4px;
        padding-top: 13px;
        border-top: 1px solid rgba(255, 255, 255, .16);
    }

    .dashboard-welcome .dashboard-period-form .field {
        width: auto;
        min-width: 0;
    }

    .dashboard-welcome .dashboard-period-form label {
        color: rgba(255, 255, 255, .78);
        font-size: 10px;
    }

    .dashboard-welcome .dashboard-period-form input {
        width: 100%;
        min-width: 0;
        min-height: 43px;
        padding: 8px;
        border-color: rgba(255, 255, 255, .28);
        background: rgba(255, 255, 255, .97);
        color: var(--text);
        font-size: 16px;
    }

    .dashboard-welcome .dashboard-period-form .btn {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 43px;
        justify-content: center;
    }

    .dashboard-welcome .dashboard-period-form .btn--primary {
        border-color: #fff;
        background: #fff;
        color: var(--brand);
    }

    .dashboard-welcome .dashboard-period-form .btn--primary:hover {
        border-color: #fff;
        background: color-mix(in srgb, var(--brand-light) 60%, #fff);
        color: var(--brand);
        box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    }

    .dashboard-welcome>div:last-child {
        display: none;
    }

    .dashboard-kpis,
    .dashboard-kpis--agent,
    .dashboard-kpis--internal,
    .dashboard-kpis--admin {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        margin-bottom: 12px;
    }

    .dashboard-kpis--admin>.stat:first-child,
    .dashboard-kpis--agent>.stat:first-child {
        grid-column: 1 / -1;
    }

    .dashboard-kpis .stat {
        min-height: 94px;
        padding: 13px 14px;
        border-top-width: 3px;
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
    }

    .dashboard-kpis .stat span {
        max-width: 100%;
        font-size: 9.5px;
        letter-spacing: .03em;
        line-height: 1.3;
    }

    .dashboard-kpis .stat strong {
        margin-top: 9px;
        font-size: 1.68rem;
        font-variant-numeric: tabular-nums;
        line-height: 1;
    }

    .dashboard-kpis .stat-link:active {
        transform: scale(.985);
    }

    .dashboard-workload {
        gap: 13px;
        padding: 15px;
        border-radius: var(--radius);
    }

    .dashboard-section-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 10px;
    }

    .dashboard-section-heading h2 {
        font-size: .98rem;
    }

    .dashboard-section-heading .muted {
        font-size: 10.5px;
        line-height: 1.45;
    }

    .dashboard-section-heading .btn {
        min-height: 36px;
        padding: 7px 10px;
        white-space: nowrap;
    }

    .dashboard-workload-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .dashboard-workload-item {
        min-height: 88px;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 2px;
        padding: 12px;
    }

    .dashboard-workload-item strong {
        grid-column: 1;
        grid-row: 2;
        margin: 3px 0;
        font-size: 1.58rem;
        font-variant-numeric: tabular-nums;
    }

    .dashboard-distribution-grid {
        display: flex;
        gap: 10px;
        margin: 12px -12px 0;
        padding: 0 12px 8px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-padding-inline: 12px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .dashboard-distribution-grid::-webkit-scrollbar {
        display: none;
    }

    .dashboard-pie-panel {
        flex: 0 0 min(86vw, 360px);
        padding: 15px;
        border-radius: var(--radius);
        scroll-snap-align: start;
    }

    .dashboard-chart-heading {
        display: grid;
        gap: 8px;
        margin-bottom: 10px;
    }

    .dashboard-chart-heading-copy {
        gap: 9px;
    }

    .dashboard-chart-heading h2 {
        font-size: .96rem;
    }

    .dashboard-chart-heading p {
        font-size: 10.5px;
        line-height: 1.4;
    }

    .dashboard-chart-mark {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    .dashboard-chart-scope {
        width: max-content;
        margin-top: 0;
        padding: 4px 8px;
        font-size: 9.5px;
    }

    .dashboard-pie-body {
        min-height: 210px;
    }

    .dashboard-donut {
        width: min(178px, 52vw);
    }

    .dashboard-donut-center strong {
        font-size: 1.48rem;
    }

    .dashboard-donut-figure {
        gap: 6px;
    }

    .dashboard-donut-figure figcaption {
        min-height: 26px;
        font-size: 10px;
    }

    .dashboard-chart-empty {
        min-height: 180px;
        padding: 15px;
    }

    .dashboard-lead-panel {
        margin-top: 12px;
        padding: 14px;
        border-radius: var(--radius);
    }

    .dashboard-lead-toolbar {
        display: grid;
        gap: 11px;
    }

    .dashboard-lead-toolbar>.actions {
        width: 100%;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 3px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .dashboard-lead-toolbar>.actions::-webkit-scrollbar {
        display: none;
    }

    .dashboard-lead-toolbar>.actions .btn {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 7px 11px;
        white-space: nowrap;
    }

    .dashboard-lead-table-wrap {
        max-width: none;
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .dashboard-lead-table {
        min-width: 0;
        display: block;
    }

    .dashboard-lead-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .dashboard-lead-table tbody,
    .dashboard-lead-table tr,
    .dashboard-lead-table td {
        display: block;
        width: 100%;
    }

    .dashboard-lead-table tbody {
        display: grid;
        gap: 9px;
    }

    .dashboard-lead-table tr {
        padding: 11px 13px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: none;
    }

    .dashboard-lead-table th:first-child,
    .dashboard-lead-table td:first-child {
        position: static;
        background: transparent;
        box-shadow: none;
    }

    .dashboard-lead-table td {
        display: grid;
        grid-template-columns: minmax(78px, 31%) minmax(0, 1fr);
        gap: 8px;
        min-width: 0;
        padding: 7px 0;
        border-bottom: 1px solid var(--line-soft);
        text-align: right;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .dashboard-lead-table td:last-child {
        border-bottom: 0;
    }

    .dashboard-lead-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 9.5px;
        font-weight: 750;
        letter-spacing: .045em;
        text-align: left;
        text-transform: uppercase;
    }

    .dashboard-lead-table td[colspan] {
        display: block;
        text-align: center;
    }

    .dashboard-lead-table td[colspan]::before {
        display: none;
    }

    .dashboard-lead-table td:last-child .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 430px) {
    .dashboard-welcome .dashboard-period-form {
        grid-template-columns: 1fr;
    }

    .dashboard-kpis,
    .dashboard-kpis--agent,
    .dashboard-kpis--internal,
    .dashboard-kpis--admin {
        gap: 8px;
    }

    .dashboard-pie-panel {
        flex-basis: 88vw;
    }

    .dashboard-donut {
        width: min(168px, 50vw);
    }
}

/* Keep the mobile navigation and lead cards last in the cascade. */
@media (max-width: 900px) {
    .main,
    .is-compact .main {
        padding-bottom: calc(115px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .mobile-nav {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .mobile-nav a,
    .mobile-nav-action {
        min-width: 0;
        min-height: 60px;
        padding: 8px 2px 6px;
        font-size: 9.5px;
    }
}

@media (max-width: 600px) {
    form.leads-filter-form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    form.leads-filter-form>input[name="q"] {
        grid-column: 1 / -1;
    }

    .leads-table-wrap {
        max-width: none;
        overflow: visible;
    }

    .leads-table {
        display: block;
        min-width: 0;
    }

    .leads-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .leads-table tbody,
    .leads-table tr,
    .leads-table td {
        display: block;
        width: 100%;
    }

    .leads-table tbody {
        display: grid;
        gap: 10px;
    }

    .leads-table tr {
        position: relative;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--surface);
        box-shadow: 0 5px 16px rgba(28, 15, 43, .045);
    }

    .leads-table th:first-child,
    .leads-table td:first-child {
        position: static;
        background: transparent;
        box-shadow: none;
    }

    .leads-table td {
        display: grid;
        grid-template-columns: minmax(74px, 27%) minmax(0, 1fr);
        gap: 9px;
        min-width: 0;
        padding: 8px 0;
        border-bottom: 1px solid var(--line-soft);
        text-align: right;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .leads-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 9px;
        font-weight: 750;
        letter-spacing: .055em;
        text-align: left;
        text-transform: uppercase;
    }

    .leads-table .lead-select-cell {
        position: absolute;
        top: 11px;
        right: 12px;
        display: block;
        width: auto;
        padding: 0;
        border: 0;
        z-index: 2;
    }

    .leads-table .lead-select-cell::before,
    .leads-table td[data-label="Action"]::before {
        display: none;
    }

    .leads-table .lead-select-cell+td {
        padding-right: 38px;
    }

    .leads-table td[data-label="Action"] {
        display: block;
        padding-top: 11px;
        border-bottom: 0;
    }

    .leads-table td[data-label="Action"] .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 380px) {
    form.leads-filter-form {
        grid-template-columns: 1fr;
    }

    form.leads-filter-form>input[name="q"] {
        grid-column: auto;
    }
}

/* Professional dashboard hero composition. */
.dashboard-welcome {
    display: grid;
    gap: 14px;
}

.dashboard-welcome-intro {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.dashboard-welcome-copy {
    min-width: 0;
}

.dashboard-welcome-copy h2 {
    margin: 0 0 5px;
}

.dashboard-welcome-copy p {
    max-width: 680px;
    color: rgba(255, 255, 255, .8);
    line-height: 1.5;
}

.dashboard-welcome-copy p strong {
    color: #fff;
}

.dashboard-welcome .dashboard-clock {
    position: static;
    display: grid;
    flex: 0 0 auto;
    justify-items: end;
    gap: 3px;
    margin: 0;
    padding: 0;
    border: 0;
    white-space: nowrap;
}

.dashboard-welcome .dashboard-clock strong {
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.dashboard-welcome .dashboard-clock span {
    color: rgba(255, 255, 255, .7);
    font-size: 10.5px;
}

.dashboard-welcome .quick-actions {
    position: relative;
    z-index: 1;
    margin: 0;
}

.dashboard-welcome .quick-actions:empty {
    display: none;
}

.dashboard-welcome .dashboard-period-form {
    position: relative;
    z-index: 1;
    grid-area: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr)) auto;
    align-items: end;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 10px;
    background: rgba(24, 10, 39, .1);
}

.dashboard-welcome .dashboard-period-form .field {
    width: auto;
    min-width: 0;
}

.dashboard-welcome .dashboard-period-form label {
    color: rgba(255, 255, 255, .78);
}

.dashboard-welcome .dashboard-period-form input {
    width: 100%;
    min-width: 0;
    border-color: rgba(255, 255, 255, .26);
    background: rgba(255, 255, 255, .98);
}

.dashboard-welcome .dashboard-period-form .btn {
    min-height: 42px;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .dashboard-welcome {
        gap: 10px;
        padding: 16px;
        border-radius: 16px;
    }

    .dashboard-welcome::after {
        top: -54px;
        right: -52px;
        bottom: auto;
        width: 132px;
        height: 132px;
        opacity: .3;
    }

    .dashboard-welcome-intro {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 14px;
    }

    .dashboard-welcome-copy h2 {
        margin-bottom: 4px;
        font-size: clamp(1.2rem, 5vw, 1.45rem);
        line-height: 1.18;
    }

    .dashboard-welcome-copy p {
        margin: 0;
        font-size: 11.5px;
        line-height: 1.42;
    }

    .dashboard-welcome .dashboard-clock {
        display: grid;
        width: auto;
        padding: 1px 0 0;
        border: 0;
        justify-items: end;
    }

    .dashboard-welcome .dashboard-clock strong {
        font-size: .9rem;
    }

    .dashboard-welcome .dashboard-clock span {
        max-width: 120px;
        font-size: 9px;
        line-height: 1.3;
        text-align: right;
        white-space: normal;
    }

    .dashboard-welcome .dashboard-period-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        padding: 9px;
        border-color: rgba(255, 255, 255, .14);
        background: rgba(24, 10, 39, .09);
    }

    .dashboard-welcome .dashboard-period-form label {
        margin-bottom: 3px;
        font-size: 9.5px;
    }

    .dashboard-welcome .dashboard-period-form input {
        min-height: 40px;
        padding: 7px 9px;
        border-radius: 9px;
        font-size: 13px;
    }

    .dashboard-welcome .dashboard-period-form .btn {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 40px;
        padding-block: 7px;
        font-size: 12.5px;
        justify-content: center;
    }

    .dashboard-welcome .dashboard-period-form .btn--primary {
        border-color: #fff;
        background: #fff;
        color: var(--brand);
    }

    .dashboard-welcome .dashboard-period-form .btn--primary:hover {
        border-color: #fff;
        background: color-mix(in srgb, var(--brand-light) 60%, #fff);
        color: var(--brand);
        box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    }

    .dashboard-welcome-action {
        width: auto;
        min-height: 36px;
        padding: 7px 11px;
        font-size: 11.5px;
    }
}

@media (max-width: 440px) {
    .dashboard-welcome-intro {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .dashboard-welcome .dashboard-clock {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        width: 100%;
        padding-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, .14);
    }

    .dashboard-welcome .dashboard-clock span {
        max-width: none;
    }
}

@media (min-width: 560px) and (max-width: 700px) {
    .dashboard-welcome .dashboard-period-form {
        grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
        align-items: end;
    }

    .dashboard-welcome .dashboard-period-form .btn {
        grid-column: auto;
        width: auto;
        padding-inline: 14px;
    }
}

@media (max-width: 360px) {
    .dashboard-welcome .dashboard-period-form {
        grid-template-columns: 1fr;
    }
}

/* Commission ledger and earnings surfaces. */
.dashboard-earnings {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2px 12px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 10px;
    color: #fff;
    background: rgba(24, 10, 39, .12);
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}

.dashboard-earnings:hover {
    border-color: rgba(255, 255, 255, .42);
    background: rgba(255, 255, 255, .1);
}

.dashboard-earnings>span {
    grid-row: 1 / span 2;
    color: rgba(255, 255, 255, .72);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.dashboard-earnings strong {
    font-size: 1.05rem;
    line-height: 1.15;
}

.dashboard-earnings small {
    color: rgba(255, 255, 255, .72);
    font-size: 10.5px;
}

.dashboard-earnings small b {
    margin-left: 6px;
    color: #fff;
}

.earnings-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 18px;
    padding: 26px 28px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.earnings-hero h2,
.commission-admin-head h2,
.commission-rules-panel h2 {
    margin: 2px 0 7px;
}

.earnings-hero p {
    max-width: 680px;
    color: var(--muted);
}

.earnings-hero-total {
    flex: 0 0 auto;
    min-width: 230px;
    padding-left: 24px;
    border-left: 1px solid var(--line);
}

.earnings-hero-total span,
.earnings-hero-total small {
    display: block;
    color: var(--muted);
}

.earnings-hero-total span {
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.earnings-hero-total strong {
    display: block;
    margin-bottom: 3px;
    color: var(--brand);
    font-size: clamp(1.45rem, 3vw, 2.1rem);
}

.commission-admin-head {
    margin-bottom: 18px;
    padding: 20px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.commission-admin-head .toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.commission-admin-head h2 {
    margin: 2px 0 4px;
    font-size: 1.3rem;
    font-weight: 800;
}

.commission-nav-pills {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
    background: var(--surface-soft);
}

.commission-nav-pills .btn {
    min-height: 34px;
    padding: 6px 14px;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    transition: all var(--transition);
}

.commission-nav-pills .btn svg {
    width: 15px;
    height: 15px;
}

.commission-nav-pills .btn:hover {
    background: var(--surface-hover);
    color: var(--text);
    transform: none;
    box-shadow: none;
}

.commission-nav-pills .btn.is-active,
.commission-nav-pills .btn--primary {
    background: #fff;
    color: var(--brand) !important;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(80, 19, 105, 0.12);
}

.earnings-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 18px;
}

.earnings-stats .stat {
    position: relative;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
    overflow: hidden;
}

.earnings-stats .stat::before {
    content: '';
    position: absolute;
    top: -24px;
    right: -24px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    opacity: 0.12;
    background: currentColor;
    pointer-events: none;
}

.earnings-stats .stat::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: 4px 0 0 4px;
    background: currentColor;
}

.earnings-stats .stat--warning {
    color: #d97706;
    border-left-color: transparent;
}

.earnings-stats .stat--success {
    color: #059669;
    border-left-color: transparent;
}

.earnings-stats .stat--info {
    color: #2563eb;
    border-left-color: transparent;
}

.earnings-stats .stat--danger {
    color: #dc2626;
    border-left-color: transparent;
}

.earnings-stats .stat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.earnings-stats .stat-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.earnings-stats .stat-badge {
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 12%, transparent);
    color: currentColor;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.earnings-stats .stat-value {
    display: block;
    margin-top: 10px;
    color: var(--text);
    font-size: clamp(1.25rem, 2.2vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.earnings-stats .stat.stat--warning .stat-value {
    color: #d97706;
}

.earnings-stats .stat.stat--success .stat-value {
    color: #059669;
}

.earnings-stats .stat.stat--info .stat-value {
    color: #2563eb;
}

.earnings-stats .stat.stat--danger .stat-value {
    color: #dc2626;
}

.earnings-stats .stat-link:hover {
    border-color: color-mix(in srgb, currentColor 30%, var(--line));
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.earnings-ledger td small,
.commission-admin-table td small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
}

.commission-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.commission-status--pending {
    background: var(--warning-bg);
    color: var(--warning);
}

.commission-status--approved {
    background: var(--success-bg);
    color: var(--success);
}

.commission-status--paid {
    background: var(--info-bg);
    color: var(--info);
}

.commission-status--needs_review,
.commission-status--void {
    background: var(--danger-bg);
    color: var(--danger);
}

.commission-filters {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) 180px 220px auto auto;
    gap: 9px;
    margin-bottom: 18px;
}

.commission-pay-form,
.commission-void-form {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
}

.commission-pay-form input,
.commission-void-form input {
    min-width: 150px;
    min-height: 34px;
    padding: 5px 8px;
    font-size: 12px;
}

.commission-bulk-bar input,
.commission-bulk-bar select {
    min-height: 36px;
    padding: 6px 9px;
    font-size: 12px;
}

.commission-bulk-bar input {
    min-width: 190px;
}

.commission-scheme-form {
    display: grid;
    gap: 28px;
}

.commission-rule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 18px;
}

@media (min-width: 1360px) {
    .commission-rule-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.commission-rule-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--line);
    border-top: 4px solid var(--brand);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.commission-rule-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.commission-rule-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line-soft);
}

.commission-rule-header h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}

.commission-rule-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--radius-full);
    background: var(--brand-light);
    color: var(--brand);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.commission-rate-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.commission-rate-section-title {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--brand);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.commission-rate-section-title svg {
    color: var(--brand);
    flex-shrink: 0;
}

.commission-rate-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.commission-rate-field label {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
}

.commission-rate-input {
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.commission-rate-input:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent);
}

.commission-rate-input span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 11px;
    border-right: 1px solid var(--line);
    background: var(--bg-subtle);
    color: var(--muted);
    font-size: 11px;
    font-weight: 750;
    user-select: none;
}

.commission-rate-input input {
    flex: 1;
    min-height: 38px;
    padding: 6px 12px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    width: 100%;
}

.commission-rule-footer {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px dashed var(--line-soft);
}

.commission-rule-active {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.commission-rule-active input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--brand);
    cursor: pointer;
    border-radius: 4px;
}

.commission-category-section {
    margin-top: 8px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.commission-category-table {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.commission-category-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.commission-category-table th {
    padding: 13px 18px;
    background: var(--surface-soft);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.commission-category-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
}

.commission-category-table tr:last-child td {
    border-bottom: 0;
}

.category-name-cell strong {
    display: block;
    color: var(--text);
    font-size: 13.5px;
    font-weight: 600;
}

.category-key-badge {
    display: inline-block;
    margin-top: 3px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-subtle);
    color: var(--muted);
    font-family: monospace;
    font-size: 10.5px;
    font-weight: 500;
}

.commission-category-select {
    display: block;
    width: 100%;
    min-width: 200px;
    max-width: 280px;
    min-height: 38px;
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236d6681' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.commission-category-select:focus {
    outline: 0;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent);
}

.rate-breakdown-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: var(--surface-soft);
    max-width: 380px;
}

.breakdown-method-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.breakdown-method-row.sub {
    padding-top: 4px;
    border-top: 1px dashed var(--line-soft);
}

.breakdown-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    line-height: 1.25;
}

.breakdown-pill .pill-label {
    color: var(--muted);
    font-weight: 500;
}

.breakdown-pill .pill-val {
    color: var(--brand);
    font-weight: 700;
}

.breakdown-pill--direct .pill-label {
    color: var(--muted);
}

.breakdown-pill--direct .pill-val {
    color: var(--text-secondary);
    font-weight: 600;
}

.pill-sep {
    color: var(--line);
    font-size: 10px;
}

.rate-chip--direct .rate-chip-val {
    color: var(--text-secondary);
    font-weight: 600;
}

.commission-scheme-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    padding: 16px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
}

.commission-actions-note {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    max-width: 600px;
}

.commission-actions-note svg {
    color: var(--brand);
    flex-shrink: 0;
}

.commission-sync-health {
    margin-top: 18px;
}

.commission-health-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 16px;
}

.commission-health-grid .stat {
    min-height: 132px;
}

.commission-health-grid .stat small,
.commission-batch-table td small,
.mis-review-table td small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
}

.commission-health-detail {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
}

.commission-batch-statement {
    max-width: 1180px;
    margin-inline: auto;
}

.commission-batch-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 20px 0 24px;
}

.commission-batch-meta>div {
    display: grid;
    gap: 5px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface-soft);
}

.commission-batch-meta span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.commission-batch-meta strong {
    overflow-wrap: anywhere;
}

.commission-beneficiary-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0 24px;
}

.commission-beneficiary-summary>div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3px 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.commission-beneficiary-summary strong,
.commission-beneficiary-summary span {
    grid-column: 1;
}

.commission-beneficiary-summary span {
    color: var(--muted);
    font-size: 11px;
}

.commission-beneficiary-summary b {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    color: var(--success);
}

.commission-empty-state {
    display: grid;
    place-items: center;
    min-height: 130px;
    text-align: center;
}

.commission-empty-state strong {
    font-size: 1rem;
}

.commission-empty-state p {
    margin: 5px 0 0;
    color: var(--muted);
}

.mis-review-hero {
    border-top: 3px solid var(--warning);
}

.mis-review-table table {
    min-width: 940px;
}

@media (max-width: 1050px) {

    .earnings-stats,
    .commission-rule-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .commission-health-grid,
    .commission-batch-meta,
    .commission-beneficiary-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .commission-filters {
        grid-template-columns: minmax(220px, 1fr) 160px 200px;
    }
}

@media (max-width: 700px) {
    .dashboard-earnings {
        grid-template-columns: 1fr auto;
        padding: 9px 10px;
    }

    .dashboard-earnings>span {
        grid-row: auto;
        font-size: 9px;
    }

    .dashboard-earnings strong {
        grid-column: 2;
        grid-row: 1 / span 2;
        font-size: .95rem;
    }

    .dashboard-earnings small {
        grid-column: 1;
        font-size: 9.5px;
    }

    .dashboard-earnings small b {
        display: none;
    }

    .earnings-hero {
        display: grid;
        gap: 16px;
        padding: 20px;
    }

    .earnings-hero-total {
        min-width: 0;
        padding: 14px 0 0;
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .earnings-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .earnings-stats .stat {
        min-height: 112px;
        padding: 16px;
    }

    .commission-filters,
    .commission-rule-grid {
        grid-template-columns: 1fr;
    }

    .commission-pay-form,
    .commission-void-form {
        align-items: stretch;
        flex-direction: column;
    }

    .commission-pay-form input,
    .commission-void-form input {
        width: 100%;
    }

    .commission-bulk-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .commission-bulk-bar input,
    .commission-bulk-bar select {
        width: 100%;
    }

    .commission-category-section {
        padding-top: 18px;
    }

    .commission-category-table table {
        min-width: 0;
    }

    .commission-category-table select,
    .commission-scheme-actions .btn {
        width: 100%;
    }

    .commission-health-grid,
    .commission-batch-meta,
    .commission-beneficiary-summary {
        grid-template-columns: 1fr;
    }

    .commission-health-grid .stat {
        min-height: 108px;
    }

    .commission-print-actions .actions,
    .mis-review-hero .actions {
        width: 100%;
    }

    .mis-review-table table {
        min-width: 0;
    }
}

@media print {

    .commission-print-actions .actions,
    .commission-batch-statement~*,
    .commission-batch-statement a.btn {
        display: none !important;
    }

    .commission-batch-statement {
        max-width: none;
        padding: 18px;
        border: 0;
    }

    .commission-batch-statement .table-wrap {
        border: 0;
    }

    .commission-batch-statement table {
        font-size: 10px;
    }
}

/* Authoritative dashboard hero and reporting toolbar composition. */
.dashboard-welcome.dashboard-weather-hero {
    grid-template-columns: minmax(430px, 1fr) minmax(270px, 340px);
    grid-template-areas:
        "intro clock"
        "intro earnings";
    align-items: start;
    gap: 10px 28px;
    min-height: 285px;
    padding: 30px 34px 32px;
}

.dashboard-welcome.dashboard-weather-hero .dashboard-welcome-intro {
    grid-area: intro;
    display: block;
    min-width: 0;
}

.dashboard-welcome.dashboard-weather-hero .dashboard-welcome-copy {
    max-width: none;
}

.dashboard-welcome.dashboard-weather-hero>.dashboard-clock {
    position: static;
    grid-area: clock;
    align-self: start;
    justify-self: end;
    display: grid;
    justify-items: end;
    min-width: 0;
    margin: 0;
    padding: 3px 0 0;
    text-align: right;
}

.dashboard-welcome.dashboard-weather-hero>.dashboard-clock strong {
    font-size: 1.28rem;
    line-height: 1.15;
}

.dashboard-welcome.dashboard-weather-hero>.dashboard-clock span {
    margin-top: 4px;
    font-size: 10.5px;
    line-height: 1.35;
}

.dashboard-welcome.dashboard-weather-hero>.dashboard-clock .dashboard-climate {
    margin-top: 1px;
    color: rgba(255, 255, 255, .72);
}

.dashboard-welcome.dashboard-weather-hero .dashboard-hero-period-form {
    display: grid;
    grid-template-columns: 145px 145px auto;
    align-items: end;
    justify-content: start;
    gap: 8px;
    width: 100%;
    max-width: 440px;
    margin: 14px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.dashboard-welcome.dashboard-weather-hero .dashboard-hero-period-form .field {
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
}

.dashboard-welcome.dashboard-weather-hero .dashboard-hero-period-form label {
    margin-bottom: 3px;
    color: rgba(255, 255, 255, .72);
    font-size: 9.5px;
}

.dashboard-welcome.dashboard-weather-hero .dashboard-hero-period-form input,
.dashboard-welcome.dashboard-weather-hero .dashboard-hero-period-form .btn {
    min-height: 36px;
    height: 36px;
    padding: 6px 9px;
    font-size: 10.5px;
}

.dashboard-welcome.dashboard-weather-hero .dashboard-hero-period-form input {
    border-color: rgba(255, 255, 255, .36);
    background: rgba(255, 255, 255, .94);
}

.dashboard-welcome.dashboard-weather-hero .dashboard-hero-period-form .btn {
    white-space: nowrap;
}

.dashboard-welcome.dashboard-weather-hero .dashboard-hero-period-form .btn:hover {
    border-color: #fff;
    background: color-mix(in srgb, var(--brand-light) 60%, #fff);
    color: var(--brand);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

.dashboard-welcome.dashboard-weather-hero .dashboard-earnings {
    grid-area: earnings;
    align-self: start;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    width: 100%;
    min-height: 126px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 16px;
    background: rgba(19, 27, 50, .22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    backdrop-filter: blur(10px);
}

.dashboard-welcome.dashboard-weather-hero .dashboard-earnings-label {
    grid-column: 1 / -1;
    grid-row: auto;
    color: rgba(255, 255, 255, .72);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dashboard-welcome.dashboard-weather-hero .dashboard-earning-metric {
    display: flex;
    flex-direction: column;
    grid-row: auto;
    gap: 3px;
    min-width: 0;
    padding: 9px 10px;
    border-radius: 11px;
    color: inherit;
    background: rgba(255, 255, 255, .08);
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    text-transform: none;
}

.dashboard-welcome.dashboard-weather-hero .dashboard-earning-metric small {
    color: rgba(255, 255, 255, .64);
    font-size: 10px;
    font-weight: 700;
}

.dashboard-welcome.dashboard-weather-hero .dashboard-earning-metric strong {
    grid-column: auto;
    grid-row: auto;
    overflow: hidden;
    color: #fff;
    font-size: clamp(14px, 1.2vw, 18px);
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-welcome.dashboard-weather-hero .dashboard-earnings>b {
    grid-column: 1 / -1;
    justify-self: end;
    color: #fff;
    font-size: 11px;
}

.dashboard-weather-credit {
    position: absolute;
    right: 18px;
    bottom: 8px;
    z-index: 3;
    color: rgba(255, 255, 255, .42);
    font-size: 8.5px;
    text-decoration: none;
}

.dashboard-weather-credit:hover {
    color: rgba(255, 255, 255, .72);
}

.weather-cloud {
    opacity: .13;
}

.weather-cloudy .weather-cloud,
.weather-rain .weather-cloud,
.weather-storm .weather-cloud,
.weather-fog .weather-cloud {
    opacity: .3;
}

/* Detailed WMO weather scenes. */
.dashboard-weather-hero:not(.period-night).weather-partly-cloudy {
    --hero-sky-start: #77cff1;
    --hero-sky-mid: #69bfe2;
    --hero-sky-late: #a9c8cf;
    --hero-sky-end: #e2b684;
}

.dashboard-weather-hero:not(.period-night).weather-overcast {
    --hero-sky-start: #9fb8c5;
    --hero-sky-mid: #819eae;
    --hero-sky-late: #6f899a;
    --hero-sky-end: #566f80;
    --hero-glow: rgba(239, 247, 250, .08);
}

.dashboard-weather-hero:not(.period-night).weather-rime-fog,
.dashboard-weather-hero:not(.period-night).weather-freezing-drizzle,
.dashboard-weather-hero:not(.period-night).weather-freezing-rain {
    --hero-sky-start: #b8d0da;
    --hero-sky-mid: #91b3c3;
    --hero-sky-late: #7396aa;
    --hero-sky-end: #55758b;
    --hero-glow: rgba(225, 247, 255, .13);
    --hero-land-far: rgba(77, 119, 123, .66);
    --hero-land-near: rgba(42, 76, 87, .86);
}

.dashboard-weather-hero:not(.period-night).weather-drizzle {
    --hero-sky-start: #9bb9c7;
    --hero-sky-mid: #809eaf;
    --hero-sky-late: #6b8b9f;
    --hero-sky-end: #4f7185;
    --hero-glow: rgba(224, 241, 247, .09);
}

.dashboard-weather-hero:not(.period-night).weather-showers {
    --hero-sky-start: #779daf;
    --hero-sky-mid: #5f8498;
    --hero-sky-late: #486d83;
    --hero-sky-end: #31566d;
    --hero-glow: rgba(213, 237, 248, .08);
    --hero-land-far: rgba(42, 86, 83, .72);
    --hero-land-near: rgba(24, 56, 61, .92);
}

.dashboard-weather-hero:not(.period-night).weather-snow,
.dashboard-weather-hero:not(.period-night).weather-snow-grains,
.dashboard-weather-hero:not(.period-night).weather-snow-showers {
    --hero-sky-start: #b9d3df;
    --hero-sky-mid: #95b8ca;
    --hero-sky-late: #789caf;
    --hero-sky-end: #5b7d92;
    --hero-glow: rgba(245, 252, 255, .16);
    --hero-land-far: rgba(116, 146, 151, .72);
    --hero-land-near: rgba(66, 97, 108, .88);
}

.dashboard-weather-hero:not(.period-night).weather-hail {
    --hero-sky-start: #4a6070;
    --hero-sky-mid: #354d61;
    --hero-sky-late: #283f54;
    --hero-sky-end: #1d3042;
    --hero-glow: rgba(225, 242, 252, .05);
    --hero-land-far: rgba(28, 57, 61, .84);
    --hero-land-near: rgba(12, 31, 39, .97);
}

.dashboard-weather-hero.period-night.weather-partly-cloudy,
.dashboard-weather-hero.period-night.weather-overcast,
.dashboard-weather-hero.period-night.weather-fog,
.dashboard-weather-hero.period-night.weather-rime-fog,
.dashboard-weather-hero.period-night.weather-drizzle,
.dashboard-weather-hero.period-night.weather-freezing-drizzle,
.dashboard-weather-hero.period-night.weather-rain,
.dashboard-weather-hero.period-night.weather-freezing-rain,
.dashboard-weather-hero.period-night.weather-snow,
.dashboard-weather-hero.period-night.weather-snow-grains,
.dashboard-weather-hero.period-night.weather-showers,
.dashboard-weather-hero.period-night.weather-snow-showers,
.dashboard-weather-hero.period-night.weather-storm,
.dashboard-weather-hero.period-night.weather-hail {
    --hero-sky-start: #040b14;
    --hero-sky-mid: #142536;
    --hero-sky-late: #23394e;
    --hero-sky-end: #0c1b2b;
    --hero-glow: rgba(186, 230, 253, .05);
}

.weather-code-0 .weather-cloud {
    opacity: .05;
}

.weather-code-1 .weather-cloud {
    opacity: .15;
}

.weather-partly-cloudy .weather-cloud {
    opacity: .34;
}

.weather-overcast .weather-cloud {
    opacity: .7;
}

.weather-fog .weather-cloud,
.weather-rime-fog .weather-cloud {
    opacity: .58;
}

.weather-drizzle .weather-cloud,
.weather-freezing-drizzle .weather-cloud {
    opacity: .54;
}

.weather-rain .weather-cloud,
.weather-freezing-rain .weather-cloud,
.weather-showers .weather-cloud {
    opacity: .62;
}

.weather-snow .weather-cloud,
.weather-snow-grains .weather-cloud,
.weather-snow-showers .weather-cloud {
    opacity: .59;
}

.weather-storm .weather-cloud,
.weather-hail .weather-cloud {
    opacity: .76;
}

.celestial-night.weather-partly-cloudy .weather-moon {
    opacity: .68;
}

.weather-partly-cloudy .weather-sun {
    opacity: .78;
}

.celestial-night.weather-partly-cloudy .weather-sun {
    opacity: 0;
}

.weather-overcast .weather-sun,
.weather-rime-fog .weather-sun,
.weather-drizzle .weather-sun,
.weather-freezing-drizzle .weather-sun,
.weather-freezing-rain .weather-sun,
.weather-snow .weather-sun,
.weather-snow-grains .weather-sun,
.weather-showers .weather-sun,
.weather-snow-showers .weather-sun,
.weather-hail .weather-sun {
    opacity: 0;
}

.weather-fog .weather-mist,
.weather-rime-fog .weather-mist {
    opacity: .9;
    animation: dashboardMist 8s ease-in-out infinite alternate;
}

.weather-rime-fog .weather-mist {
    opacity: .98;
    background: repeating-linear-gradient(0deg, transparent 0 40px, rgba(236, 250, 255, .26) 41px 69px, transparent 70px 106px);
}

.weather-code-51 {
    --weather-precip-opacity: .22;
    --weather-precip-speed: 1.45s;
}

.weather-code-53 {
    --weather-precip-opacity: .36;
    --weather-precip-speed: 1.2s;
}

.weather-code-55 {
    --weather-precip-opacity: .52;
    --weather-precip-speed: 1s;
}

.weather-code-56 {
    --weather-precip-opacity: .3;
    --weather-precip-speed: 1.35s;
}

.weather-code-57 {
    --weather-precip-opacity: .5;
    --weather-precip-speed: 1.05s;
}

.weather-code-61 {
    --weather-precip-opacity: .4;
    --weather-precip-speed: 1.05s;
}

.weather-code-63 {
    --weather-precip-opacity: .6;
    --weather-precip-speed: .82s;
}

.weather-code-65 {
    --weather-precip-opacity: .82;
    --weather-precip-speed: .62s;
}

.weather-code-66 {
    --weather-precip-opacity: .48;
    --weather-precip-speed: .95s;
}

.weather-code-67 {
    --weather-precip-opacity: .76;
    --weather-precip-speed: .66s;
}

.weather-code-71 {
    --weather-precip-opacity: .32;
    --weather-precip-speed: 6s;
}

.weather-code-73 {
    --weather-precip-opacity: .52;
    --weather-precip-speed: 4.8s;
}

.weather-code-75 {
    --weather-precip-opacity: .78;
    --weather-precip-speed: 3.4s;
}

.weather-code-77 {
    --weather-precip-opacity: .5;
    --weather-precip-speed: 4.2s;
}

.weather-code-80 {
    --weather-precip-opacity: .45;
    --weather-precip-speed: .9s;
}

.weather-code-81 {
    --weather-precip-opacity: .66;
    --weather-precip-speed: .7s;
}

.weather-code-82 {
    --weather-precip-opacity: .9;
    --weather-precip-speed: .48s;
}

.weather-code-85 {
    --weather-precip-opacity: .48;
    --weather-precip-speed: 4.2s;
}

.weather-code-86 {
    --weather-precip-opacity: .82;
    --weather-precip-speed: 2.9s;
}

.weather-code-95 {
    --weather-precip-opacity: .7;
    --weather-precip-speed: .58s;
}

.weather-code-96 {
    --weather-precip-opacity: .76;
    --weather-precip-speed: .52s;
}

.weather-code-99 {
    --weather-precip-opacity: .94;
    --weather-precip-speed: .42s;
}

.dashboard-weather-hero.weather-drizzle .dashboard-weather-scene>.weather-rain,
.dashboard-weather-hero.weather-freezing-drizzle .dashboard-weather-scene>.weather-rain,
.dashboard-weather-hero.weather-rain .dashboard-weather-scene>.weather-rain,
.dashboard-weather-hero.weather-freezing-rain .dashboard-weather-scene>.weather-rain,
.dashboard-weather-hero.weather-showers .dashboard-weather-scene>.weather-rain,
.dashboard-weather-hero.weather-storm .dashboard-weather-scene>.weather-rain,
.dashboard-weather-hero.weather-hail .dashboard-weather-scene>.weather-rain,
.dashboard-weather-hero.weather-snow .dashboard-weather-scene>.weather-rain,
.dashboard-weather-hero.weather-snow-grains .dashboard-weather-scene>.weather-rain,
.dashboard-weather-hero.weather-snow-showers .dashboard-weather-scene>.weather-rain {
    opacity: var(--weather-precip-opacity, .5);
    animation-duration: var(--weather-precip-speed, .8s);
}

.weather-drizzle .dashboard-weather-scene>.weather-rain {
    background-image: repeating-linear-gradient(105deg, transparent 0 25px, rgba(223, 242, 250, .42) 26px 27px, transparent 28px 48px);
    background-size: 145px 145px;
}

.weather-freezing-drizzle .dashboard-weather-scene>.weather-rain,
.weather-freezing-rain .dashboard-weather-scene>.weather-rain {
    background-image:
        radial-gradient(circle, rgba(238, 252, 255, .72) 0 1.5px, transparent 2px),
        repeating-linear-gradient(105deg, transparent 0 21px, rgba(207, 240, 252, .54) 22px 23px, transparent 24px 42px);
    background-position: 0 0, 0 0;
    background-size: 42px 42px, 125px 125px;
}

.weather-snow .dashboard-weather-scene>.weather-rain,
.weather-snow-showers .dashboard-weather-scene>.weather-rain {
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, .9) 0 2px, transparent 2.7px),
        radial-gradient(circle, rgba(232, 247, 255, .75) 0 1.4px, transparent 2.1px);
    background-position: 0 0, 19px 26px;
    background-size: 48px 48px, 63px 63px;
    animation-name: dashboardSnow;
}

.weather-snow-grains .dashboard-weather-scene>.weather-rain {
    background-image: radial-gradient(circle, rgba(247, 252, 255, .86) 0 1.2px, transparent 1.8px);
    background-size: 29px 29px;
    animation-name: dashboardSnow;
}

.weather-hail .dashboard-weather-scene>.weather-rain {
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, .92) 0 2.4px, transparent 3px),
        repeating-linear-gradient(105deg, transparent 0 22px, rgba(213, 238, 250, .56) 23px 24px, transparent 25px 43px);
    background-position: 0 0, 0 0;
    background-size: 44px 44px, 125px 125px;
}

.weather-storm .dashboard-weather-scene::after,
.weather-hail .dashboard-weather-scene::after {
    position: absolute;
    top: 16%;
    right: 29%;
    width: 45px;
    height: 118px;
    opacity: 0;
    background: linear-gradient(180deg, #fffbd0, #dff4ff);
    clip-path: polygon(58% 0, 100% 0, 70% 38%, 95% 38%, 24% 100%, 42% 55%, 10% 55%);
    filter: drop-shadow(0 0 13px rgba(255, 250, 190, .75));
    content: "";
    animation: dashboardLightning 6.5s steps(1, end) infinite;
}

@keyframes dashboardSnow {
    from {
        transform: translate3d(0, -28px, 0);
    }

    to {
        transform: translate3d(24px, 72px, 0);
    }
}

@keyframes dashboardLightning {

    0%,
    86%,
    90%,
    100% {
        opacity: 0;
    }

    87%,
    89% {
        opacity: .88;
    }
}

.reduce-motion .dashboard-weather-scene>span {
    animation: none !important;
    transition: none !important;
}

.reduce-motion .dashboard-weather-scene::after {
    animation: none !important;
}

@media (max-width: 1200px) {
    .dashboard-welcome.dashboard-weather-hero {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
        grid-template-areas:
            "intro clock"
            "intro earnings";
        gap: 10px 18px;
        min-height: 290px;
        padding: 24px 25px 27px;
    }

    .dashboard-welcome.dashboard-weather-hero>.dashboard-clock {
        justify-self: end;
        justify-items: end;
        text-align: right;
    }

    .dashboard-welcome.dashboard-weather-hero .dashboard-hero-period-form {
        grid-template-columns: repeat(2, minmax(110px, 145px)) auto;
    }
}

@media (max-width: 900px) {
    .dashboard-welcome.dashboard-weather-hero {
        grid-template-columns: 1fr;
        grid-template-areas:
            "intro"
            "clock"
            "earnings";
        gap: 12px;
        min-height: 0;
        padding: 19px 17px 22px;
    }

    .dashboard-welcome.dashboard-weather-hero>.dashboard-clock {
        justify-self: end;
        justify-items: end;
        text-align: right;
    }

    .dashboard-welcome.dashboard-weather-hero .dashboard-earnings {
        min-height: 0;
        padding: 12px;
    }

    .weather-cloud--two,
    .weather-land--far {
        display: none;
    }

    .weather-cloud--one {
        --cloud-scale: .72;
        top: 76px;
        right: 9%;
        opacity: .11;
        transform: scale(.72);
    }

    .weather-land--near {
        right: -28%;
        bottom: -44%;
        width: 118%;
        height: 58%;
        opacity: .62;
    }

    .dashboard-welcome.dashboard-weather-hero .dashboard-hero-period-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }

    .dashboard-welcome.dashboard-weather-hero .dashboard-hero-period-form .btn {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 440px) {
    .dashboard-welcome.dashboard-weather-hero .dashboard-earning-metric {
        padding-inline: 8px;
    }

    .dashboard-welcome.dashboard-weather-hero .dashboard-earning-metric strong {
        font-size: 13px;
    }

}

@media (max-width: 360px) {
    .dashboard-welcome.dashboard-weather-hero .dashboard-hero-period-form {
        grid-template-columns: 1fr;
    }

    .dashboard-welcome.dashboard-weather-hero .dashboard-hero-period-form .btn {
        grid-column: auto;
    }
}

/* Cohesive dark theme. These late overrides intentionally govern every app surface. */
[data-theme="dark"] {
    --brand: #e094f7;
    --brand-2: #d88ec3;
    --brand-light: rgba(224, 148, 247, .15);
    --sidebar-bg: #17111f;

    --bg: #0d1117;
    --bg-subtle: #111722;
    --surface: #161c26;
    --surface-soft: #1d2432;
    --surface-hover: #263042;
    --line: #3d4b60;
    --line-soft: #323f52;

    --text: #f9fafb;
    --text-secondary: #e2e5ec;
    --muted: #b0b8c6;
    --placeholder: #9aa5b8;

    --success: #55d6a6;
    --success-bg: rgba(85, 214, 166, .12);
    --success-border: rgba(85, 214, 166, .34);
    --warning: #f5bd5a;
    --warning-bg: rgba(245, 189, 90, .12);
    --warning-border: rgba(245, 189, 90, .34);
    --danger: #ff8585;
    --danger-bg: rgba(255, 133, 133, .12);
    --danger-border: rgba(255, 133, 133, .34);
    --info: #86b1ff;
    --info-bg: rgba(134, 177, 255, .12);
    --info-border: rgba(134, 177, 255, .34);

    --shadow-sm: 0 1px 3px rgba(4, 7, 13, .3);
    --shadow: 0 8px 24px rgba(4, 7, 13, .34);
    --shadow-lg: 0 18px 48px rgba(4, 7, 13, .42);
    --shadow-xl: 0 28px 70px rgba(4, 7, 13, .5);
}

[data-theme="dark"] body {
    background: linear-gradient(180deg, #0d1118 0%, #10151d 100%);
}

[data-theme="dark"] .sidebar {
    border-right: 1px solid rgba(213, 155, 232, .12);
    background: #17111f;
    box-shadow: 12px 0 40px rgba(5, 4, 10, .18);
}

[data-theme="dark"] .sidebar::before {
    background: linear-gradient(180deg, rgba(213, 155, 232, .09), transparent 36%);
}

[data-theme="dark"] .brand {
    border-bottom-color: rgba(244, 241, 247, .1);
}

[data-theme="dark"] .brand small,
[data-theme="dark"] .nav-section-label {
    color: rgba(244, 241, 247, .82);
}

[data-theme="dark"] .sidebar nav a,
[data-theme="dark"] .logout-link {
    color: rgba(244, 241, 247, .92);
}

[data-theme="dark"] .sidebar nav a:hover {
    background: rgba(244, 241, 247, .12);
    color: #ffffff;
}

[data-theme="dark"] .sidebar nav a.is-active {
    border: 1px solid rgba(213, 155, 232, .32);
    background: rgba(213, 155, 232, .18);
    color: #ffffff;
    font-weight: 500;
}

[data-theme="dark"] .sidebar nav a.is-active::before {
    background: #e5b4f3;
    box-shadow: 0 0 8px rgba(229, 180, 243, .6);
}

[data-theme="dark"] .logout-link:hover {
    background: rgba(255, 133, 133, .11);
    color: #ffc1c1;
}

[data-theme="dark"] .brand-logo,
[data-theme="dark"] .login-logo,
[data-theme="dark"] .logo-preview img {
    background: #f4f1f7;
}

[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .user-chip,
[data-theme="dark"] .table-wrap,
[data-theme="dark"] .notif-dropdown,
[data-theme="dark"] .agent-manage-popover,
[data-theme="dark"] .lookup-results,
[data-theme="dark"] .course-picker-menu,
[data-theme="dark"] .wa-template-menu,
[data-theme="dark"] .followup-popup {
    border-color: var(--line);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .card:hover,
[data-theme="dark"] .course-card:hover,
[data-theme="dark"] .user-chip:hover {
    border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
    box-shadow: var(--shadow);
}

[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .notif-bell,
[data-theme="dark"] .nav-toggle {
    border-color: var(--line);
    background: var(--surface-soft);
    color: var(--text-secondary);
    box-shadow: inset 0 1px 0 rgba(244, 241, 247, .035);
}

[data-theme="dark"] .theme-toggle:hover,
[data-theme="dark"] .notif-bell:hover,
[data-theme="dark"] .nav-toggle:hover {
    border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
    background: var(--surface-hover);
    color: var(--text);
}

[data-theme="dark"] .theme-toggle[aria-pressed="true"] {
    border-color: rgba(213, 155, 232, .36);
    background: rgba(213, 155, 232, .1);
    color: #efc8fb;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    border-color: #3d4d65;
    background: #171f2b;
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(244, 241, 247, .04);
}

[data-theme="dark"] input:hover,
[data-theme="dark"] select:hover,
[data-theme="dark"] textarea:hover {
    border-color: #5a6e8c;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(224, 148, 247, .25);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--placeholder);
    opacity: 1;
}

[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
    box-shadow: 0 0 0 1000px #171f2b inset;
}

[data-theme="dark"] .btn {
    border-color: var(--line);
    background: var(--surface-soft);
    color: var(--text);
}

[data-theme="dark"] .btn:hover {
    border-color: #465269;
    background: var(--surface-hover);
    color: var(--text);
}

[data-theme="dark"] .btn--primary {
    border-color: #8c469f;
    background: linear-gradient(135deg, #6f267f, #8b337f);
    color: #fff8ff;
    box-shadow: 0 4px 14px rgba(74, 20, 87, .34);
}

[data-theme="dark"] .btn--primary:hover {
    border-color: #b96bc9;
    background: linear-gradient(135deg, #7b2d8c, #983b8b);
    color: #fff8ff;
    box-shadow: 0 8px 22px rgba(74, 20, 87, .42);
    filter: none;
}

[data-theme="dark"] .btn--soft {
    border-color: rgba(213, 155, 232, .2);
    background: rgba(213, 155, 232, .1);
    color: #e7b9f5;
}

[data-theme="dark"] .btn--soft:hover {
    border-color: rgba(213, 155, 232, .36);
    background: rgba(213, 155, 232, .16);
    color: #f1d1fa;
}

[data-theme="dark"] .btn--danger {
    background: #a9363f;
    border-color: transparent;
    color: #fff7f7;
}

[data-theme="dark"] .btn--danger:hover {
    background: #bd3c47;
    border-color: transparent;
    color: #ffffff;
    filter: brightness(1.08);
}

[data-theme="dark"] .btn--success {
    background: #167553;
    border-color: transparent;
    color: #f4fffb;
}

[data-theme="dark"] .btn--success:hover {
    background: #198760;
    border-color: transparent;
    color: #ffffff;
    filter: brightness(1.08);
}

[data-theme="dark"] .btn--whatsapp {
    background: #167a40;
    border-color: transparent;
    color: #f4fff7;
}

[data-theme="dark"] .btn--whatsapp:hover {
    background: #1a8f4b;
    border-color: transparent;
    color: #ffffff;
    filter: brightness(1.08);
}

[data-theme="dark"] th {
    border-bottom-color: var(--line);
    background: #1d2533;
    color: #e2e7f0;
    font-weight: 600;
}

[data-theme="dark"] td {
    border-bottom-color: var(--line-soft);
    color: var(--text);
}

[data-theme="dark"] tbody tr:hover,
[data-theme="dark"] tbody tr:focus-within {
    background: #253041;
}

[data-theme="dark"] th:first-child,
[data-theme="dark"] td:first-child {
    box-shadow: 1px 0 0 var(--line);
}

[data-theme="dark"] th:first-child {
    background: #1d2533;
}

[data-theme="dark"] td:first-child {
    background: var(--surface);
}

[data-theme="dark"] tbody tr:hover td:first-child,
[data-theme="dark"] tbody tr:focus-within td:first-child {
    background: #253041;
}

[data-theme="dark"] .stat::before {
    background: var(--brand);
    opacity: .075;
}

[data-theme="dark"] .badge--new {
    background: rgba(224, 148, 247, .2);
    color: #f0c3fb;
    border: 1px solid rgba(224, 148, 247, .35);
}

[data-theme="dark"] .badge--registered,
[data-theme="dark"] .badge--closed,
[data-theme="dark"] .badge--fake,
[data-theme="dark"] .badge--invalid,
[data-theme="dark"] .badge--duplicate,
[data-theme="dark"] .badge--not_interested,
[data-theme="dark"] .badge--no_response,
[data-theme="dark"] .badge--follow_up,
[data-theme="dark"] .badge--application_pending,
[data-theme="dark"] .badge--future_intake,
[data-theme="dark"] .badge--contacted,
[data-theme="dark"] .badge--interested,
[data-theme="dark"] .badge--assigned {
    border: 1px solid currentColor;
    border-color: color-mix(in srgb, currentColor 45%, transparent);
    font-weight: 500;
}

[data-theme="dark"] .alert {
    box-shadow: inset 3px 0 0 currentColor;
}

[data-theme="dark"] .notif-item.is-unread {
    background: rgba(213, 155, 232, .085);
}

[data-theme="dark"] .notif-item.is-unread:hover {
    background: rgba(213, 155, 232, .13);
}

[data-theme="dark"] .notif-badge {
    border-color: var(--surface-soft);
    background: #d84f5c;
    color: #fff7f7;
}

[data-theme="dark"] .dashboard-period-panel,
[data-theme="dark"] .dashboard-workload-item,
[data-theme="dark"] .settings-shortcut,
[data-theme="dark"] .meta-list div,
[data-theme="dark"] .course-card-note,
[data-theme="dark"] .pipeline-column {
    border-color: var(--line-soft);
    background: var(--surface-soft);
}

[data-theme="dark"] .dashboard-pie-panel {
    background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--chart-accent) 6%, var(--surface)));
}

[data-theme="dark"] .dashboard-donut-track {
    stroke: #293341;
}

[data-theme="dark"] .dashboard-donut-center {
    border-color: var(--line);
    background: radial-gradient(circle at 35% 28%, #252d3a, #161b24 67%);
    box-shadow: 0 10px 26px rgba(4, 7, 13, .3);
}

[data-theme="dark"] .dashboard-chart-mark {
    box-shadow: inset 0 0 0 7px var(--surface);
}

[data-theme="dark"] .dashboard-chart-scope {
    border-color: rgba(224, 148, 247, .42);
    background: rgba(224, 148, 247, .2);
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
}

[data-theme="dark"] .lead-scope-option.is-active {
    border-color: rgba(224, 148, 247, .45);
    background: rgba(224, 148, 247, .18);
    color: #ffffff;
    font-weight: 600;
}

[data-theme="dark"] .lead-scope-option.is-active>strong {
    background: rgba(224, 148, 247, .28);
    color: #ffffff;
}

/* ── Directory Tabs Contrast ── */
[data-theme="dark"] .lead-scope-switcher--directory .lead-scope-option {
    border-color: #3d4b60 !important;
    background: #171f2b !important;
    color: #e2e5ec !important;
}

[data-theme="dark"] .lead-scope-switcher--directory .lead-scope-option:hover {
    border-color: #5a6e8c !important;
    background: #232d3d !important;
    color: #ffffff !important;
}

[data-theme="dark"] .lead-scope-switcher--directory .lead-scope-option>strong {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #f9fafb !important;
}

[data-theme="dark"] .lead-scope-switcher--directory .lead-scope-option.is-active {
    background: linear-gradient(135deg, #7c2d8d, #99388c) !important;
    border-color: #a854bd !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(124, 45, 141, .45) !important;
}

[data-theme="dark"] .lead-scope-switcher--directory .lead-scope-option.is-active>strong {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .lead-scope-admin-select {
    color: #e2e5ec;
}

[data-theme="dark"] .lead-scope-admin-select select {
    border-color: #3d4d65;
    background: #171f2b;
    color: #ffffff;
}

/* ── Course Cards & Pricing Legibility ── */
[data-theme="dark"] .course-category {
    color: #e5b4f3;
    font-weight: 700;
    letter-spacing: .075em;
}

[data-theme="dark"] .course-fee-primary strong {
    color: #ffffff;
    font-weight: 750;
    text-shadow: 0 0 14px rgba(224, 148, 247, .28);
}

/* ── Kanban / Pipeline Contrast ── */
[data-theme="dark"] .pipeline-card-code {
    color: #e5b4f3;
    font-weight: 700;
    letter-spacing: .03em;
}

[data-theme="dark"] .pipeline-count {
    border-color: color-mix(in srgb, var(--stage-accent, #e094f7) 45%, transparent);
    background: color-mix(in srgb, var(--stage-accent, #e094f7) 22%, var(--surface-soft));
    color: #ffffff;
    font-weight: 800;
}

/* ── Form Section Icons & Optional Badges ── */
[data-theme="dark"] .agent-section-heading .section-icon-badge {
    background: rgba(224, 148, 247, .2);
    color: #fce8ff;
    border: 1px solid rgba(224, 148, 247, .4);
    box-shadow: 0 2px 8px rgba(224, 148, 247, .15);
}

[data-theme="dark"] .field-section h3 svg {
    color: #e5b4f3;
}

[data-theme="dark"] .dashboard-weather-hero {
    border-color: rgba(213, 155, 232, .24);
    box-shadow: 0 18px 50px rgba(4, 7, 13, .28);
}

[data-theme="dark"] .dashboard-weather-hero .dashboard-hero-period-form input {
    border-color: rgba(244, 241, 247, .28);
    background: rgba(244, 241, 247, .94);
    color: #21182a;
    box-shadow: none;
}

[data-theme="dark"] .dashboard-weather-hero .dashboard-hero-period-form input:focus {
    border-color: #f4f1f7;
    box-shadow: 0 0 0 3px rgba(244, 241, 247, .18);
}

[data-theme="dark"] .mobile-nav {
    border-top-color: var(--line);
    background: rgba(22, 27, 36, .97);
    box-shadow: 0 -12px 32px rgba(4, 7, 13, .38);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

[data-theme="dark"] .mobile-nav a,
[data-theme="dark"] .mobile-nav-action {
    color: #aaa3b4;
}

[data-theme="dark"] .mobile-nav a.is-active,
[data-theme="dark"] .mobile-nav a:hover {
    color: #e7b9f5;
}

[data-theme="dark"] .mobile-profile-avatar {
    border-color: rgba(213, 155, 232, .4);
    background: rgba(213, 155, 232, .13);
    color: #efc8fb;
}

[data-theme="dark"] .history-item {
    background: rgba(27, 34, 45, 0.7);
    border-color: rgba(61, 75, 96, 0.6);
}

[data-theme="dark"] .history-item:hover {
    background: rgba(38, 48, 66, 0.85);
    border-color: rgba(176, 49, 127, 0.5);
}

[data-theme="dark"] .history-item::before {
    background: #d459a9;
    border-color: #161b24;
    box-shadow: 0 0 0 2px rgba(212, 89, 169, 0.35);
}

[data-theme="dark"] .history-item:not(:last-child)::after {
    background: linear-gradient(180deg, #d459a9 0%, rgba(212, 89, 169, 0.35) 100%);
}

[data-theme="dark"] .attachment-header-icon {
    background: rgba(224, 148, 247, .15);
    color: #e5b4f3;
    border-color: rgba(224, 148, 247, .3);
}

[data-theme="dark"] .attachment-file-label {
    background: #1d2432;
    border-color: #3d4b60;
    color: #e2e5ec;
}

[data-theme="dark"] .attachment-file-picker:hover .attachment-file-label {
    border-color: #e5b4f3;
    color: #fce8ff;
    background: #263042;
}

[data-theme="dark"] .attachment-empty-state {
    background: rgba(22, 28, 38, .6);
    border-color: rgba(61, 75, 96, .6);
}

[data-theme="dark"] .attachment-empty-state:hover,
[data-theme="dark"] .attachment-empty-state:focus-visible {
    border-color: #e5b4f3;
    background: rgba(224, 148, 247, .08);
}

[data-theme="dark"] .attachment-empty-icon {
    background: rgba(224, 148, 247, .15);
    color: #e5b4f3;
}

[data-theme="dark"] .attachment-card {
    background: rgba(27, 34, 45, .7);
    border-color: rgba(61, 75, 96, .6);
}

[data-theme="dark"] .attachment-card:hover {
    background: rgba(38, 48, 66, .85);
    border-color: rgba(224, 148, 247, .4);
}

[data-theme="dark"] .attachment-tag {
    background: rgba(224, 148, 247, .18);
    color: #fce8ff;
}

[data-theme="dark"] .attachment-section.is-dragover {
    border-color: #e5b4f3 !important;
    background: rgba(224, 148, 247, 0.06) !important;
    box-shadow: 0 0 0 3px rgba(224, 148, 247, 0.25), 0 12px 40px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .attachment-section.is-dragover .attachment-empty-state {
    border-color: #e5b4f3 !important;
    background: rgba(224, 148, 247, 0.12) !important;
}

[data-theme="dark"] .sidebar-overlay.is-visible,
[data-theme="dark"] .agent-manage-menu[open]::before {
    background: rgba(5, 7, 12, .72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

[data-theme="dark"] ::selection {
    background: rgba(213, 155, 232, .3);
    color: #fff8ff;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #10151d;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    border: 2px solid #10151d;
    background: #465269;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #5a667d;
}

@media (max-width: 600px) {
    [data-theme="dark"] .table-wrap tr {
        border-color: var(--line);
        background: var(--surface);
        box-shadow: 0 8px 22px rgba(4, 7, 13, .24);
    }

    [data-theme="dark"] .table-wrap tr:hover,
    [data-theme="dark"] .table-wrap tr:focus-within {
        background: var(--surface-hover);
    }

    [data-theme="dark"] .table-wrap td:first-child,
    [data-theme="dark"] .table-wrap tr:hover td:first-child {
        background: transparent;
        box-shadow: none;
    }
}

/* Compact mobile dashboard hero. Kept last so every weather scene shares one layout. */
@media (max-width: 900px) {
    .dashboard-welcome.dashboard-weather-hero {
        grid-template-columns: minmax(0, 1fr) minmax(145px, auto);
        grid-template-areas:
            "context clock"
            "greeting greeting"
            "summary summary"
            "earnings earnings"
            "form form";
        gap: 0 14px;
        min-height: 0;
        margin-bottom: 12px;
        padding: 18px;
        border-radius: 18px;
        box-shadow: 0 12px 30px rgba(33, 26, 52, .16), inset 0 1px rgba(255, 255, 255, .14);
    }

    .dashboard-welcome.dashboard-weather-hero::before {
        background:
            linear-gradient(180deg, rgba(7, 19, 34, .43) 0%, rgba(9, 22, 39, .3) 58%, rgba(6, 17, 30, .48) 100%),
            linear-gradient(90deg, rgba(8, 26, 45, .22), rgba(20, 18, 39, .08));
    }

    .dashboard-welcome.dashboard-weather-hero .dashboard-weather-scene {
        opacity: .58;
    }

    .dashboard-welcome.dashboard-weather-hero .weather-cloud--one {
        top: 74px;
        right: 5%;
        transform: scale(.56);
    }

    .dashboard-welcome.dashboard-weather-hero .weather-land--near {
        right: -24%;
        bottom: -48%;
        width: 112%;
        height: 55%;
        opacity: .55;
    }

    .dashboard-welcome.dashboard-weather-hero .dashboard-welcome-intro,
    .dashboard-welcome.dashboard-weather-hero .dashboard-welcome-copy {
        display: contents;
    }

    .dashboard-welcome.dashboard-weather-hero .dashboard-day-context {
        grid-area: context;
        align-self: start;
        margin: 3px 0 0;
        font-size: 10.5px;
        letter-spacing: .075em;
    }

    .dashboard-welcome.dashboard-weather-hero .dashboard-welcome-copy h2 {
        grid-area: greeting;
        max-width: 100%;
        margin: 14px 0 0;
        font-size: clamp(1.65rem, 5.8vw, 2.15rem);
        line-height: 1.08;
        letter-spacing: -.035em;
    }

    .dashboard-welcome.dashboard-weather-hero .dashboard-welcome-copy>p {
        grid-area: summary;
        max-width: 100%;
        margin-top: 7px;
        color: rgba(255, 255, 255, .8);
        font-size: 12.5px;
        line-height: 1.45;
    }

    .dashboard-welcome.dashboard-weather-hero .dashboard-hero-period-form {
        grid-area: form;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        max-width: none;
        margin: 14px 0 0;
        padding: 11px;
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: 13px;
        background: rgba(13, 25, 43, .18);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    .dashboard-welcome.dashboard-weather-hero .dashboard-hero-period-form .field {
        width: auto;
        min-width: 0;
    }

    .dashboard-welcome.dashboard-weather-hero .dashboard-hero-period-form label {
        margin-bottom: 3px;
        color: rgba(255, 255, 255, .75);
        font-size: 10px;
    }

    .dashboard-welcome.dashboard-weather-hero .dashboard-hero-period-form input,
    .dashboard-welcome.dashboard-weather-hero .dashboard-hero-period-form .btn {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        height: 40px;
        padding: 7px 9px;
        border-radius: 9px;
        font-size: 12px;
    }

    .dashboard-welcome.dashboard-weather-hero .dashboard-hero-period-form .btn {
        grid-column: 1 / -1;
        border-color: rgba(255, 255, 255, .9);
        background: rgba(255, 255, 255, .94);
        color: #501369;
        box-shadow: none;
    }

    .dashboard-welcome.dashboard-weather-hero>.dashboard-clock {
        grid-area: clock;
        grid-template-columns: minmax(0, 1fr);
        align-items: center;
        justify-self: end;
        justify-items: end;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        text-align: right;
    }

    .dashboard-welcome.dashboard-weather-hero>.dashboard-clock strong {
        grid-column: 1;
        grid-row: auto;
        align-self: center;
        color: #fff;
        font-size: 1.15rem;
        font-variant-numeric: tabular-nums;
        line-height: 1;
        white-space: nowrap;
    }

    .dashboard-welcome.dashboard-weather-hero>.dashboard-clock span {
        grid-column: 1;
        margin: 0;
        overflow: hidden;
        color: rgba(255, 255, 255, .72);
        font-size: 10.5px;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dashboard-welcome.dashboard-weather-hero>.dashboard-clock .dashboard-climate {
        max-width: 100%;
        margin: 1px 0 0;
        color: rgba(255, 255, 255, .82);
        font-size: 10.5px;
    }

    .dashboard-welcome.dashboard-weather-hero .dashboard-earnings {
        grid-area: earnings;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px 8px;
        width: 100%;
        min-height: 0;
        margin-top: 14px;
        padding: 11px;
        border-radius: 13px;
        background: rgba(12, 24, 42, .3);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .dashboard-welcome.dashboard-weather-hero .dashboard-earnings-label {
        grid-column: 1;
        align-self: center;
        font-size: 9.5px;
    }

    .dashboard-welcome.dashboard-weather-hero .dashboard-earnings>b {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        justify-self: end;
        font-size: 10px;
    }

    .dashboard-welcome.dashboard-weather-hero .dashboard-earning-metric {
        grid-row: 2;
        gap: 2px;
        padding: 8px 9px;
        border: 1px solid rgba(255, 255, 255, .04);
        border-radius: 9px;
        background: rgba(255, 255, 255, .075);
    }

    .dashboard-welcome.dashboard-weather-hero .dashboard-earning-metric small {
        font-size: 9.5px;
    }

    .dashboard-welcome.dashboard-weather-hero .dashboard-earning-metric strong {
        font-size: 14px;
    }
}

@media (max-width: 430px) {
    .dashboard-welcome.dashboard-weather-hero {
        padding: 15px 14px;
        border-radius: 15px;
    }

    .dashboard-welcome.dashboard-weather-hero .dashboard-welcome-copy h2 {
        font-size: clamp(1.45rem, 7.3vw, 1.8rem);
    }

    .dashboard-welcome.dashboard-weather-hero .dashboard-hero-period-form {
        padding: 9px;
    }

    .dashboard-welcome.dashboard-weather-hero .dashboard-hero-period-form input {
        font-size: 10.5px;
    }

    .dashboard-welcome.dashboard-weather-hero>.dashboard-clock strong {
        font-size: 1.02rem;
    }

    .dashboard-welcome.dashboard-weather-hero>.dashboard-clock span,
    .dashboard-welcome.dashboard-weather-hero>.dashboard-clock .dashboard-climate {
        font-size: 9.5px;
    }
}

@media (max-width: 350px) {
    .dashboard-welcome.dashboard-weather-hero {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "context"
            "clock"
            "greeting"
            "summary"
            "earnings"
            "form";
    }

    .dashboard-welcome.dashboard-weather-hero .dashboard-hero-period-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-welcome.dashboard-weather-hero .dashboard-hero-period-form .btn {
        grid-column: 1;
    }

    .dashboard-welcome.dashboard-weather-hero>.dashboard-clock {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
        gap: 3px;
        margin-top: 8px;
        text-align: left;
    }

    .dashboard-welcome.dashboard-weather-hero>.dashboard-clock strong,
    .dashboard-welcome.dashboard-weather-hero>.dashboard-clock span {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
    }
}

@media (max-width: 520px) {
    .pipeline-overview-actions .btn {
        flex: 1 1 auto;
    }

    .pipeline-sync {
        width: 100%;
        margin-bottom: 2px;
    }

    .pipeline-board {
        grid-auto-columns: calc(100vw - 60px);
    }
}

@media (max-width: 560px) {
    .staff-directory-header {
        align-items: flex-start;
        padding: 18px;
    }

    .staff-directory-total {
        padding: 7px 9px;
    }

    .staff-directory-total span {
        display: none;
    }

    .staff-directory-summary-action {
        gap: 7px;
    }

    .staff-directory-toggle {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .staff-directory-grid {
        grid-template-columns: minmax(0, 1fr);
        padding: 12px;
    }

    .staff-profile-main {
        grid-template-columns: 48px minmax(0, 1fr);
        padding: 14px;
    }

    .staff-profile-avatar {
        width: 48px;
        height: 48px;
        border-radius: 13px;
    }

    .staff-active-state {
        grid-column: 2;
        justify-self: start;
        margin-top: -6px;
    }

    .staff-profile-footer>span {
        display: none;
    }

    .staff-profile-footer {
        justify-content: flex-end;
    }
}

.agent-directory-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Clean staff and agent performance profiles */
.performance-profile-page {
    display: grid;
    gap: 14px;
}

.performance-profile-hero {
    padding: 0;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--brand) 18%, var(--line));
    box-shadow: 0 8px 26px color-mix(in srgb, var(--brand) 6%, transparent);
}

.profile-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 11px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 11.5px;
}

.profile-breadcrumb a {
    color: var(--brand);
    font-weight: 700;
    text-decoration: none;
}

.profile-breadcrumb strong {
    color: var(--text);
}

.performance-profile-heading {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 22px;
}

.performance-profile-avatar {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
    border-radius: 19px;
    background: color-mix(in srgb, var(--brand) 9%, var(--surface));
    color: var(--brand);
    font-size: 18px;
    font-weight: 850;
}

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

.performance-profile-copy {
    min-width: 0;
}

.performance-profile-copy h1 {
    margin: 2px 0 6px;
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    letter-spacing: -.025em;
}

.performance-profile-copy>p:last-child {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
}

.performance-profile-actions,
.profile-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
}

.account-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
}

.account-state::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    content: '';
}

.account-state--active {
    background: rgba(26, 169, 112, .1);
    color: #128056;
}

.account-state--active::before {
    background: #1aa970;
}

.account-state--inactive {
    background: rgba(218, 52, 59, .1);
    color: #b42632;
}

.account-state--inactive::before {
    background: #da343b;
}

.performance-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.performance-stat {
    position: relative;
    min-width: 0;
    padding: 16px 17px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

.performance-stat::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--brand);
    content: '';
}

.performance-stat--success::before {
    background: #1aa970;
}

.performance-stat--info::before {
    background: #3578e5;
}

.performance-stat--warning::before {
    background: #d69222;
}

.performance-stat span,
.performance-stat strong,
.performance-stat small {
    display: block;
}

.performance-stat span {
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.performance-stat strong {
    margin-bottom: 5px;
    overflow: hidden;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    letter-spacing: -.035em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.performance-stat small {
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.45;
}

.performance-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
}

.performance-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: max-content;
    padding: 9px 13px;
    border-radius: 9px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}

.performance-tabs a span {
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--surface-soft);
    font-size: 10px;
}

.performance-tabs a:hover,
.performance-tabs a.is-active {
    background: color-mix(in srgb, var(--brand) 9%, var(--surface));
    color: var(--brand);
}

.profile-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.profile-section-panel {
    padding: 0;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--brand) 12%, var(--line));
}

.profile-section-panel>header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
}

.profile-section-panel>header h2 {
    margin: 2px 0 0;
    font-size: 1rem;
}

.profile-section-panel>header>span {
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 750;
}

.profile-detail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-detail-list>div {
    min-width: 0;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
}

.profile-detail-list>div:nth-child(odd) {
    border-right: 1px solid var(--line);
}

.profile-detail-list>div:last-child,
.profile-detail-list>div:nth-last-child(2):nth-child(odd) {
    border-bottom: 0;
}

.profile-detail-list .profile-detail-wide {
    grid-column: 1 / -1;
    border-right: 0;
}

.profile-detail-list small,
.profile-detail-list strong {
    display: block;
    min-width: 0;
}

.profile-detail-list small {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.profile-detail-list strong {
    overflow-wrap: anywhere;
    font-size: 12.5px;
    line-height: 1.45;
}

.profile-account-number {
    color: var(--brand);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 15px !important;
    letter-spacing: .05em;
}

.profile-performance-table {
    margin: 0;
}

.profile-performance-table table {
    min-width: 780px;
}

.profile-performance-table th,
.profile-performance-table td {
    padding: 11px 14px;
}

.profile-empty-state {
    padding: 28px 18px;
    text-align: center;
}

.profile-empty-state strong {
    display: block;
    margin-bottom: 4px;
}

.profile-empty-state p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.managed-agent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
    padding: 14px;
}

.managed-agent-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    transition: border-color .18s ease, background-color .18s ease;
}

.managed-agent-card:hover {
    border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
    background: color-mix(in srgb, var(--brand) 4%, var(--surface));
}

.managed-agent-card>span,
.managed-agent-card strong,
.managed-agent-card small {
    display: block;
    min-width: 0;
}

.managed-agent-card>span:last-child {
    text-align: right;
}

.managed-agent-card strong {
    font-size: 12.5px;
}

.managed-agent-card small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10.5px;
}

@media (max-width: 900px) {
    .performance-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .performance-profile-heading {
        grid-template-columns: 58px minmax(0, 1fr);
        align-items: start;
        padding: 17px;
    }

    .performance-profile-avatar {
        width: 58px;
        height: 58px;
        border-radius: 16px;
    }

    .performance-profile-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .performance-stat-grid {
        gap: 8px;
    }

    .performance-stat {
        padding: 14px;
    }

    .performance-stat strong {
        font-size: 1.3rem;
    }

    .profile-detail-list {
        grid-template-columns: 1fr;
    }

    .profile-detail-list>div,
    .profile-detail-list>div:nth-child(odd) {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .profile-detail-list>div:last-child {
        border-bottom: 0;
    }

    .profile-detail-list .profile-detail-wide {
        grid-column: 1;
    }

    .profile-section-panel>header {
        align-items: flex-start;
    }

    .managed-agent-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .managed-agent-card>span:last-child {
        text-align: left;
    }

    .profile-hero-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Dynamic Targeted Field Update Smooth Transitions */
#dashboard-dynamic-content {
    transition: opacity 0.15s ease-in-out;
}

#dashboard-dynamic-content.is-loading {
    opacity: 0.85;
    pointer-events: none;
}

/* Followup filter table-only AJAX */
#dashboard-lead-panel {
    will-change: opacity, transform;
}

#dashboard-lead-panel.followup-table-loading {
    pointer-events: none;
    position: relative;
}

#dashboard-lead-panel.followup-table-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.06) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: followupShimmer 0.9s ease-in-out infinite;
    pointer-events: none;
}

@keyframes followupShimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Attractive empty state for dashboard lead table */
.dashboard-table-empty-row td {
    text-align: center;
    padding: 2.5rem 1rem;
    background: none;
}

.dashboard-table-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    color: var(--muted, #8892a4);
}

.dashboard-table-empty svg {
    opacity: 0.35;
    color: var(--muted, #8892a4);
    margin-bottom: 0.25rem;
}

.dashboard-table-empty strong {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text, #e2e8f0);
    opacity: 0.7;
}

.dashboard-table-empty p {
    font-size: 0.83rem;
    margin: 0;
    color: var(--muted, #8892a4);
    max-width: 22rem;
}

.dashboard-table-empty .btn {
    margin-top: 0.5rem;
}

/* ── Per-cell cascade: data attaches left-to-right, row by row ── */
@keyframes cellSlideIn {
    from {
        opacity: 0;
        transform: translateX(-14px);
    }

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

/* Row is revealed immediately; cells animate in left-to-right */
.dashboard-lead-table tbody tr.cells-animate,
.leads-table tbody tr.cells-animate {
    opacity: 1;
}

/* All cells in an animating row start invisible */
.dashboard-lead-table tbody tr.cells-animate td,
.leads-table tbody tr.cells-animate td {
    opacity: 0;
}

/* Each cell animates in via JS-assigned animationDelay */
.dashboard-lead-table tbody td.cell-slide-in,
.leads-table tbody td.cell-slide-in {
    animation: cellSlideIn 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Rows start hidden until JS fires the animation */
.dashboard-lead-table tbody tr,
.leads-table tbody tr {
    opacity: 0;
}


/* ── Scroll-triggered entrance for KPI stat cards ── */
@keyframes scrollSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.stat.scroll-slide-up {
    animation: scrollSlideUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Scroll-triggered entrance for workload items ── */
.dashboard-workload-item.scroll-slide-up {
    animation: scrollSlideUp 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Stat cards and workload items start hidden */
.dashboard-kpis .stat {
    opacity: 0;
}

.dashboard-workload-item {
    opacity: 0;
}

/* Reduced motion: show everything immediately */
@media (prefers-reduced-motion: reduce) {

    .dashboard-lead-table tbody tr,
    .dashboard-lead-table tbody tr.cells-animate,
    .dashboard-lead-table tbody tr.cells-animate td,
    .leads-table tbody tr,
    .leads-table tbody tr.cells-animate,
    .leads-table tbody tr.cells-animate td,
    .dashboard-kpis .stat,
    .dashboard-workload-item {
        opacity: 1;
    }

    .dashboard-lead-table tbody td.cell-slide-in,
    .leads-table tbody td.cell-slide-in,
    .stat.scroll-slide-up,
    .dashboard-workload-item.scroll-slide-up {
        animation: none;
    }
}

/* ── Lead Directory Clean & Professional Styling ── */
.leads-index-panel {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.leads-index-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
}

.leads-index-toolbar h2 {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.leads-index-toolbar h2 .muted {
    font-weight: 500;
    font-size: 0.8rem;
    background: color-mix(in srgb, var(--brand) 10%, var(--surface-soft, #f1f5f9));
    color: var(--brand);
    padding: 2px 10px;
    border-radius: 20px;
}

/* ── Clean Lead Directory Header Nav Bar ── */
.leads-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line-soft);
}

.lead-scope-admin-select {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
}

.lead-scope-admin-select select {
    height: 28px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
}

/* ── Scope Switcher ── */
.lead-scope-switcher--directory {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

.lead-scope-switcher--directory .lead-scope-heading {
    display: none !important;
}

.lead-scope-switcher--directory .lead-scope-options {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

.lead-scope-switcher--directory .lead-scope-option {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
    height: 28px !important;
    gap: 6px !important;
    padding: 0 10px !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    border: 1px solid transparent !important;
    background: var(--surface-soft, rgba(0, 0, 0, 0.03)) !important;
    color: var(--muted) !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.lead-scope-switcher--directory .lead-scope-option:hover {
    color: var(--text) !important;
    background: color-mix(in srgb, var(--brand) 10%, var(--surface-soft)) !important;
}

.lead-scope-switcher--directory .lead-scope-option.is-active {
    background: var(--brand, #4f46e5) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--brand) 30%, transparent) !important;
}

.lead-scope-switcher--directory .lead-scope-option>span {
    overflow: visible !important;
    text-overflow: clip !important;
}

.lead-scope-switcher--directory .lead-scope-option>strong {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 16px !important;
    padding: 0 5px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    background: rgba(0, 0, 0, 0.08) !important;
    color: var(--muted) !important;
}

.lead-scope-switcher--directory .lead-scope-option.is-active>strong {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

/* ── Clean Collapsible Filter Panel ── */
.leads-filter-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    background: var(--surface-soft, rgba(0, 0, 0, 0.015)) !important;
    border: 1px solid var(--line-soft) !important;
    border-radius: 10px !important;
    margin-bottom: 16px !important;
}

.leads-filter-main-bar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
}

.leads-filter-search-wrap {
    position: relative;
    flex: 1 1 auto !important;
    min-width: 180px !important;
}

.leads-filter-search-wrap svg {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
    width: 13px;
    height: 13px;
}

.leads-filter-search {
    width: 100% !important;
    height: 32px !important;
    padding: 2px 8px 2px 28px !important;
    font-size: 0.78rem !important;
    border: 1px solid var(--line) !important;
    border-radius: 6px !important;
    background: var(--surface) !important;
    color: var(--text) !important;
}

.leads-filter-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    color: var(--text) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.leads-filter-toggle-btn:hover,
.leads-filter-toggle-btn.is-active {
    background: color-mix(in srgb, var(--brand) 10%, var(--surface)) !important;
    border-color: color-mix(in srgb, var(--brand) 40%, var(--line)) !important;
    color: var(--brand) !important;
}

.leads-filter-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    background: var(--brand) !important;
    color: #ffffff !important;
}

.leads-filter-arrow {
    transition: transform 0.2s ease !important;
}

.leads-filter-toggle-btn.is-active .leads-filter-arrow {
    transform: rotate(180deg) !important;
}

.leads-filter-collapse-panel {
    display: none;
    padding-top: 10px !important;
    margin-top: 6px !important;
    border-top: 1px dashed var(--line-soft) !important;
}

.leads-filter-collapse-panel.is-expanded,
.leads-filter-collapse-panel:not([hidden]) {
    display: block !important;
}

.leads-filter-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px 14px !important;
    align-items: flex-end !important;
}

.leads-filter-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
}

.leads-filter-col--dates {
    grid-column: span 2 !important;
}

.leads-filter-col--actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.leads-filter-label {
    font-size: 0.68rem !important;
    font-weight: 750 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--muted) !important;
}

.leads-filter-select {
    width: 100% !important;
    height: 32px !important;
    padding: 2px 8px !important;
    font-size: 0.76rem !important;
    border: 1px solid var(--line) !important;
    border-radius: 6px !important;
    background: var(--surface) !important;
    color: var(--text) !important;
}

.leads-date-group {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
}

.leads-date-field {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: var(--muted) !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.leads-date-field input {
    width: 100% !important;
    height: 32px !important;
    padding: 2px 6px !important;
    font-size: 0.75rem !important;
    border: 1px solid var(--line) !important;
    border-radius: 6px !important;
    background: var(--surface) !important;
    color: var(--text) !important;
}

.leads-filter-submit {
    height: 32px !important;
    padding: 0 14px !important;
    font-size: 0.76rem !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    width: 100% !important;
    justify-content: center !important;
}

@media (max-width: 1024px) {
    .leads-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    .leads-filter-grid {
        grid-template-columns: 1fr !important;
    }

    .leads-filter-col--dates {
        grid-column: span 1 !important;
    }
}


.leads-filter-reset {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--muted) !important;
    text-decoration: none !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
}

.leads-filter-reset:hover {
    color: var(--danger, #ef4444) !important;
    background: color-mix(in srgb, var(--danger, #ef4444) 10%, transparent) !important;
}

.leads-index-toolbar .btn {
    height: 32px;
    padding: 0 12px;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 6px;
}






/* ── Premium High-End Lead Table Styling ── */
.leads-table-wrap {
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 18px;
    background: var(--surface);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.leads-table {
    width: 100%;
    border-collapse: collapse;
}

.leads-table th {
    background: color-mix(in srgb, var(--brand) 3%, var(--surface-soft, rgba(0, 0, 0, 0.02)));
    padding: 10px 10px;
    font-size: 0.72rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.055em;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    text-align: left;
    white-space: nowrap;
}

.leads-table th.th-action {
    text-align: right;
    padding-right: 14px;
}

.leads-table td {
    padding: 10px 10px;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
}

.leads-table td.cell-action {
    padding-right: 14px;
}

.leads-table tbody tr {
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.leads-table tbody tr:hover {
    background-color: color-mix(in srgb, var(--brand) 4%, var(--surface));
    cursor: pointer;
}

.leads-table tbody tr:last-child td {
    border-bottom: none;
}

/* Cell-specific styling */
.cell-lead-code {
    white-space: nowrap !important;
}

.lead-code-pill {
    display: inline-block;
    font-family: var(--font-mono, "SF Mono", Consolas, monospace);
    font-weight: 700;
    font-size: 0.74rem;
    padding: 3px 6px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--brand) 6%, var(--surface-soft, rgba(0, 0, 0, 0.03)));
    border: 1px solid color-mix(in srgb, var(--brand) 12%, var(--line-soft));
    color: var(--text);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.cell-student-info {
    vertical-align: middle !important;
}

.student-name {
    display: block;
    font-weight: 650;
    font-size: 0.84rem;
    color: var(--text);
    line-height: 1.25;
    margin-bottom: 2px;
}

.student-contact-links {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.73rem;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.student-contact-links .phone-link {
    color: var(--muted);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

.student-contact-links .phone-link:hover {
    color: var(--brand);
}

.student-contact-links .whatsapp-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 5px;
    border-radius: 10px;
    font-size: 0.66rem;
    font-weight: 700;
    background: rgba(37, 211, 102, 0.12);
    color: #16a34a;
    text-decoration: none;
    transition: all 0.15s ease;
}

.student-contact-links .whatsapp-link:hover {
    background: rgba(37, 211, 102, 0.22);
    color: #15803d;
}

.cell-course {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.81rem;
    line-height: 1.3;
}

.cell-agent,
.cell-assigned {
    font-size: 0.81rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.cell-updated {
    white-space: nowrap;
    font-size: 0.78rem;
}

.th-action {
    width: 40px !important;
    text-align: right !important;
    padding-right: 12px !important;
}

.cell-action {
    text-align: right !important;
    white-space: nowrap !important;
    width: 40px !important;
    padding-right: 12px !important;
}

.lead-row-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: var(--muted);
    transition: all 0.18s ease;
    text-decoration: none;
}

.leads-table tbody tr:hover .lead-row-arrow {
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 10%, transparent);
    transform: translateX(3px);
}





/* ── Mobile UI Enhancements for Lead Directory ── */
@media (max-width: 768px) {
    .leads-index-panel {
        padding: 14px 12px !important;
        border-radius: 12px !important;
    }

    .leads-index-toolbar {
        margin-bottom: 12px;
        padding-bottom: 10px;
    }

    .leads-index-toolbar h2 {
        font-size: 1.1rem;
    }

    .leads-index-toolbar .btn {
        height: 30px;
        padding: 0 10px;
        font-size: 0.75rem;
    }

    /* Mobile Nav Bar & Tabs */
    .leads-nav-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding-bottom: 8px;
        margin-bottom: 10px;
    }

    .lead-scope-switcher--directory {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .lead-scope-switcher--directory::-webkit-scrollbar {
        display: none;
    }

    .lead-scope-switcher--directory .lead-scope-options {
        flex-wrap: nowrap !important;
    }

    .lead-scope-switcher--directory .lead-scope-option {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    .lead-scope-admin-select {
        width: 100%;
        justify-content: space-between;
        padding-top: 4px;
        border-top: 1px dashed var(--line-soft);
    }

    .lead-scope-admin-select select {
        flex: 1;
        max-width: none !important;
    }

    /* Mobile Collapsible Filter Layout */
    .leads-filter-form {
        padding: 10px !important;
        gap: 8px !important;
    }

    .leads-filter-main-bar {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .leads-filter-search-wrap {
        width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    .leads-filter-toggle-btn {
        flex: 1 !important;
        justify-content: center !important;
    }

    .leads-filter-export {
        flex: 1 !important;
        justify-content: center !important;
    }

    .leads-filter-reset {
        width: 100% !important;
        text-align: center !important;
    }

    .leads-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px 8px !important;
    }

    .leads-filter-col--dates {
        grid-column: 1 / -1 !important;
    }

    .leads-filter-col--actions {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    .leads-filter-submit {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Fast, smooth native-app card slide-up loading for mobile */
    .leads-table tbody tr.mobile-card-animate {
        animation: mobileCardSlideUp 0.26s cubic-bezier(0.16, 1, 0.3, 1) both;
        will-change: transform, opacity;
    }

    @keyframes mobileCardSlideUp {
        0% {
            opacity: 0;
            transform: translateY(10px) scale(0.98);
        }

        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* Disable heavy per-cell slide animations on mobile cards for 60fps smoothness */
    .leads-table td.cell-slide-in {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    /* Mobile Table Action Button */
    .leads-table td[data-label="Action"] .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── Avatar Upload & Square Cropper Suite ── */
.profile-avatar {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 20px;
    overflow: hidden;
    background: color-mix(in srgb, var(--brand) 15%, var(--surface));
    border: 2px solid color-mix(in srgb, var(--brand) 30%, var(--line));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--brand);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}

.profile-avatar-editable {
    cursor: pointer;
}

.profile-avatar-editable:hover {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 25%, transparent);
}

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

.avatar-hover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 15, 26, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.avatar-hover-overlay span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.profile-avatar-editable:hover .avatar-hover-overlay,
.avatar-preview-badge:hover .avatar-hover-overlay {
    opacity: 1;
}

.avatar-preview-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-preview-badge .avatar-initials {
    font-size: 26px;
    font-weight: 700;
    color: var(--brand);
}

.avatar-upload-info {
    flex: 1;
    min-width: 0;
}

.avatar-upload-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.avatar-file-picker {
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.avatar-file-picker input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.btn--danger-soft {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.btn--danger-soft:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #dc2626;
}

/* Square Cropper Modal */
.cropper-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.cropper-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.cropper-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 15, 26, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.cropper-modal-card {
    position: relative;
    width: 100%;
    max-width: 580px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 4px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.96) translateY(10px);
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.cropper-modal.is-open .cropper-modal-card {
    transform: scale(1) translateY(0);
}

.cropper-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line-soft);
}

.cropper-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--brand);
}

.cropper-modal-title h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

.cropper-modal-close {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: none;
    background: transparent;
    color: var(--muted);
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition);
}

.cropper-modal-close:hover {
    background: var(--surface-soft);
    color: var(--text);
}

.cropper-modal-body {
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 160px;
    gap: 20px;
}

@media (max-width: 560px) {
    .cropper-modal-body {
        grid-template-columns: 1fr;
    }
}

.cropper-viewport-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #090d16;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cropper-main-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cropper-hint-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: var(--radius);
    background: var(--surface-soft);
    border: 1px solid var(--line-soft);
    color: var(--text-secondary);
    font-size: 11.5px;
    font-weight: 500;
    text-align: center;
}

.cropper-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.cropper-viewport.is-panning {
    cursor: grabbing;
}

.cropper-viewport img {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: none;
    max-height: none;
    user-select: none;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.cropper-crop-box {
    position: absolute;
    inset: 22px;
    border: 2px solid var(--brand);
    border-radius: 14px;
    box-shadow: 0 0 0 9999px rgba(8, 12, 22, 0.72);
    pointer-events: none;
}

.cropper-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.cropper-grid span {
    border: 1px dashed rgba(255, 255, 255, 0.22);
}

.cropper-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 3px solid #ffffff;
    background: var(--brand);
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.cropper-corner.handle-tl { top: -6px; left: -6px; border-right: none; border-bottom: none; }
.cropper-corner.handle-tr { top: -6px; right: -6px; border-left: none; border-bottom: none; }
.cropper-corner.handle-bl { bottom: -6px; left: -6px; border-right: none; border-top: none; }
.cropper-corner.handle-br { bottom: -6px; right: -6px; border-left: none; border-top: none; }

.cropper-side-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cropper-live-preview-box {
    text-align: center;
}

.cropper-live-preview-box label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cropper-preview-avatar {
    width: 84px;
    height: 84px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid var(--brand);
    box-shadow: var(--shadow-sm);
    background: #090d16;
}

.cropper-preview-avatar canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cropper-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cropper-zoom-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.cropper-zoom-header label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 0;
}

.cropper-zoom-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--brand) 15%, transparent);
    color: var(--brand);
    border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
    letter-spacing: 0.2px;
    transition: all 0.2s ease;
}

.cropper-zoom-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cropper-zoom-row input[type="range"] {
    flex: 1;
    height: 6px;
    border-radius: 4px;
    accent-color: var(--brand);
    cursor: pointer;
    transition: background 0.15s ease;
}

.cropper-zoom-row input[type="range"]::-webkit-slider-thumb {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cropper-zoom-row input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.cropper-zoom-row button {
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.cropper-zoom-row button:active {
    transform: scale(0.92);
}

.cropper-control-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.cropper-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--line-soft);
    background: var(--surface-soft);
}

#cropperApplyBtn {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
    border: none;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--brand) 35%, transparent);
}

#cropperApplyBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--brand) 45%, transparent);
}

[data-theme="dark"] .avatar-upload-box {
    background: rgba(22, 28, 38, .6);
    border-color: rgba(61, 75, 96, .6);
}

[data-theme="dark"] .cropper-modal-card {
    background: #141b27;
    border-color: #313f56;
}

[data-theme="dark"] .cropper-modal-footer {
    background: #101622;
}

[data-theme="dark"] .btn--danger-soft {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.35);
}

/* ── Avatar Action Choice Modal & Confirmation Dialog ── */
.avatar-action-card {
    max-width: 420px;
}

.avatar-action-body {
    padding: 16px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.avatar-action-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--surface-soft);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: all var(--transition);
}

.avatar-action-btn:hover {
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 8%, var(--surface));
    transform: translateY(-1px);
}

.avatar-action-btn svg {
    color: var(--brand);
    flex-shrink: 0;
}

.avatar-action-btn strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
}

.avatar-action-btn small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
}

.avatar-action-btn.avatar-action-remove svg {
    color: #ef4444;
}

.avatar-action-btn.avatar-action-remove:hover {
    border-color: #ef4444;
    background: color-mix(in srgb, #ef4444 8%, var(--surface));
}

.confirm-remove-card {
    max-width: 400px;
    text-align: center;
}

.confirm-remove-content {
    padding: 28px 24px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.confirm-remove-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.confirm-remove-content h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
}

.confirm-remove-content p {
    margin: 0 0 20px;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.5;
}

.confirm-remove-actions {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: center;
}

.confirm-remove-actions .btn {
    flex: 1;
}

[data-theme="dark"] .avatar-action-btn {
    background: rgba(22, 28, 38, 0.6);
    border-color: rgba(61, 75, 96, 0.5);
}

[data-theme="dark"] .avatar-action-btn:hover {
    border-color: var(--brand);
    background: rgba(99, 102, 241, 0.15);
}

[data-theme="dark"] .confirm-remove-icon {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}