/* ============================================================
   Desktop UI — macOS-style glassmorphic shell for Summit
   ============================================================ */

/* --- Background (6: extended dark gradient for watermark visibility) --- */
.desktop-bg {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
    background:
        linear-gradient(to bottom, #0e2f34 0%, #123a41 25%, #185560 55%, #6b8e95 80%, #d4d9dc 100%);
    position: relative;
}

.desktop-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../img/setpoint-white.svg') no-repeat center center;
    background-size: 40%;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
}

/* Telerik notifications — always on top and clickable */
.k-notification-group {
    z-index: 10001 !important;
}

/* --- Animations --- */
@keyframes desktop-fade-in {
    from { opacity: 0; transform: scale(0.98); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes desktop-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.desktop-fade-in {
    animation: desktop-fade-in 0.25s ease-out both;
}

.desktop-slide-up {
    animation: desktop-slide-up 0.25s ease-out both;
}

/* ============================================================
   App Window
   ============================================================ */
.app-window {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(203,213,225,0.2);
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    overflow: hidden;
    margin-bottom: 0.5rem;
}

/* 1: mobile window full-height, no bottom radius */
.app-window--mobile {
    border-radius: 0;
    height: 100%;
}

/* Title bar */
.app-window__titlebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255,255,255,0.85);
    border-bottom: 1px solid rgba(203,213,225,0.5);
    border: 1px solid rgba(203,213,225,0.4);
    flex-shrink: 0;
    user-select: none;
    min-height: 40px;
    position: relative;
}

.app-window__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 0.5rem;
    font-size: 14px;
    flex-shrink: 0;
    color: #fff;
}

.app-window__title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-window__deal {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: #237381;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40%;
    text-align: center;
    padding: 0.15rem 0.75rem;
    background: rgba(241, 245, 249, 0.6);
    border: 1px solid rgba(203, 213, 225, 0.4);
    border-radius: 999px;
    pointer-events: none;
}

.app-window__controls {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}

.app-window__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    cursor: pointer;
    color: #64748b;
    font-size: 16px;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}

.app-window__btn--minimize:hover {
    background: rgba(251,191,36,0.2);
    color: #d97706;
}

.app-window__btn--maximize:hover {
    background: rgba(34,197,94,0.2);
    color: #16a34a;
}

.app-window__btn--close:hover {
    background: rgba(239,68,68,0.2);
    color: #dc2626;
}

.app-window__btn--back {
    color: #64748b;
}

.app-window__btn--back:hover {
    background: rgba(100,116,139,0.15);
}

/* Body */
.app-window__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(255,255,255,0.85);
}

/* ============================================================
   Dock
   ============================================================ */
.dock-wrapper {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.dock {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}

.dock__separator {
    width: 1px;
    height: 2rem;
    background: rgba(148,163,184,0.6);
    margin: 0 0.25rem;
    flex-shrink: 0;
}

.dock__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    padding: 0;
    border: none;
    background: none;
}

.dock__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    font-size: 1.25rem;
    color: #fff;
}

.dock__item:hover .dock__icon-wrap {
    transform: scale(1.12);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.dock__icon-wrap--active {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    outline: 2px solid rgba(255,255,255,0.3);
}

.dock__icon-wrap--minimized {
    opacity: 0.6;
}

.dock__icon-wrap--allapps {
    background: rgba(148,163,184,0.7);
}

.dock__icon-wrap--allapps-active {
    background: rgba(148,163,184,0.7);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.dock__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
}

.dock__dot--hidden {
    visibility: hidden;
}

.dock__badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #dc2626;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
}

/* Search button in dock — matches All Apps button style */
.dock__icon-wrap--search {
    background: rgba(148,163,184,0.7);
}

.dock__icon-wrap--search-active {
    background: rgba(148,163,184,0.7);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Floating search overlay — centered above dock */
.desktop-search-overlay {
    position: fixed;
    bottom: 5.5rem;
    left: 0;
    right: 0;
    z-index: 1001;
    display: flex;
    justify-content: center;
    animation: desktop-slide-up 0.2s ease-out both;
    margin-bottom: 0.5rem;
}  

.desktop-search-overlay .desktop-search {
    width: 250px;
}

.desktop-search-autocomplete .k-popup, .k-list {
    background-color: rgba(18, 58, 65,0.2) !important;
    color: rgba(255, 255, 255, 1) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 0.75rem !important;
}


/* Logo button — fixed top-left */
.desktop-logo-btn {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: .625rem;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    padding: 0;
    overflow: visible;
}

.desktop-logo-btn img {
    width: 16px;
    object-fit: contain;
}

/* Logo dropdown menu */
.desktop-logo-dropdown {
    display: none;
    position: fixed;
    top: 3.25rem;
    left: 0.75rem;
    z-index: 1000;
    min-width: 200px;
    padding: 0.5rem 0;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.desktop-logo-dropdown.show {
    display: block;
}

.desktop-logo-dropdown__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    color: #fff;
    font-size: 0.85rem;
}

.desktop-logo-dropdown__label {
    font-weight: 500;
}

.desktop-logo-dropdown__divider {
    margin: 0.25rem 0.75rem;
    border-color: rgba(255, 255, 255, 0.12);
}

.desktop-logo-dropdown__link {
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
    justify-content: flex-start;
}

.desktop-logo-dropdown__link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}


/* Logout button — fixed top-right */
.desktop-logout {
    position: fixed;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 0.625rem;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: rgba(255,255,255,0.7);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    padding: 0;
    text-decoration: none;
}

.desktop-logout:hover {
    background: rgba(239,68,68,0.2);
    color: #fca5a5;
    border-color: rgba(239,68,68,0.3);
}

/* ============================================================
   All Apps Grid
   ============================================================ */
.all-apps {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 2rem 1rem;
    position: relative;
    z-index: 1;
}

.all-apps__header {
    text-align: center;
    margin-bottom: 2rem;
}

.all-apps__title {
    font-size: 2rem;
    font-weight: 300;
    color: rgba(255,255,255,0.95);
    margin: 0 0 0.25rem;
    letter-spacing: 0.02em;
}

.all-apps__subtitle {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.6);
    margin: 0;
}

.all-apps__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-width: 800px;
    width: 100%;
}

/* App card */
.app-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 1rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    text-decoration: none;
    position: relative;
}

.app-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    background: rgba(255,255,255,0.14);
}

.app-card:active {
    transform: scale(0.97);
}

.app-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    font-size: 1.5rem;
    color: #fff;
}

.app-card__name {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,0.95);
    text-align: center;
}

.app-card__desc {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.55);
    text-align: center;
    margin-top: -0.25rem;
}

.app-card__icon-wrap {
    position: relative;
    display: inline-flex;
}

.app-card__badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #dc2626;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* ============================================================
   Desktop Search Box (iOS 26 style)
   ============================================================ */
.desktop-search {
    width: 280px;
    position: relative;
}

.desktop-search .k-autocomplete,
.desktop-search .k-input {
    background: rgba(255,255,255,0.25) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    color: rgba(18, 58, 65, 1) !important;
    height: 36px;
}

.desktop-search .k-input-inner {
    color: rgba(18, 58, 65, 1) !important;
    font-size: 0.85rem;
}

    .desktop-search .k-input-inner::placeholder {
        color: rgba(255,255,255,0.2) !important;
    }

.desktop-search .k-clear-value {
    color: rgba(18, 58, 65, 0.6) !important;
}

/* 4: Mobile search bar — compact */
.mobile-search-wrapper {
    position: fixed;
    bottom: 4.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    padding-bottom: .5rem;
}

.mobile-search-wrapper .desktop-search {
    width: 100px;
}

.mobile-search-wrapper .desktop-search .k-autocomplete,
.mobile-search-wrapper .desktop-search .k-input {
    height: 23px;
    min-height: 20px;
    border-radius: 0.5rem !important;
}

.mobile-search-wrapper .desktop-search .k-input-inner {
    font-size: 0.7rem;
    padding: 0 0.4rem;
}

/* ============================================================
   Mobile Layout
   ============================================================ */

/* Mobile grid: 2 columns */
@media (max-width: 768px) {
    .all-apps__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .all-apps__title {
        font-size: 1.5rem;
    }

    .app-card {
        padding: 1rem 0.75rem;
    }

    .app-card__icon {
        width: 3rem;
        height: 3rem;
        font-size: 1.25rem;
    }

    /* 1: mobile window takes full remaining height */
    .desktop-content--mobile-window {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        padding: 0;
    }
}

/* Mobile FAB */
.desktop-fab {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255,255,255,0.9);
    font-size: 1.25rem;
    transition: transform 0.15s;
    padding: 0;
}

.desktop-fab:active {
    transform: translateX(-50%) scale(0.9);
}

/* Mobile open apps list */
.mobile-open-apps {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    flex: 1;
}

.mobile-open-app {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 1rem;
    cursor: pointer;
    transition: transform 0.15s;
}

.mobile-open-app:active {
    transform: scale(0.98);
}

.mobile-open-app__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    font-size: 1.1rem;
    color: #fff;
    flex-shrink: 0;
}

.mobile-open-app__info {
    flex: 1;
    min-width: 0;
}

.mobile-open-app__name {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}

.mobile-open-app__desc {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
}

.mobile-open-app__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
    padding: 0;
}

.mobile-open-app__close:hover {
    background: rgba(239,68,68,0.2);
    color: #dc2626;
}

/* ============================================================
   Desktop content area
   ============================================================ */
.desktop-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 4.5rem; /* space for dock */
    position: relative;
    z-index: 1;
}

.desktop-content--mobile {
    padding-bottom: 5rem; /* space for FAB + search */
}

.desktop-content__window {
    display: flex;
    flex: 1;
    min-height: 0;
    padding: 1rem;
}

.desktop-content__window--mobile {
    padding: 0;
}

/* Maximized: remove dock padding, fill entire viewport */
.desktop-content--maximized {
    padding-bottom: 0;
    height: 100vh;
}

.desktop-content__window--maximized {
    padding: 0;
    flex: 1;
    min-height: 0;
}

.desktop-content__window--maximized .app-window {
    border-radius: 0;
    border: none;
    box-shadow: none;
}

/* ============================================================
   Utility: hide on desktop/mobile
   ============================================================ */
@media (max-width: 768px) {
    .desktop-only { display: none !important; }
}

@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
}

/* ============================================================
   Login Page — glassmorphic card on desktop gradient
   ============================================================ */
.login-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Center the card */
.login-card-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
    padding: 2rem 1rem;
    z-index: 1;
}

/* Glassmorphic card */
.login-card {
    width: 100%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1.25rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

/* Logo strip at top of card */
.login-card__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 2rem 1rem;
}

/* Card body holds the LoginForm */
.login-card__body {
    padding: 0.5rem 2rem 2rem;
}

/* --- Form overrides inside login card --- */

/* Form group header */
.login-card__body .k-form-legend {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

/* Labels */
.login-card__body .k-label,
.login-card__body .k-form-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
}

/* Text inputs */
.login-card__body .k-textbox,
.login-card__body .k-input-solid {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0.5rem;
    color: #fff;
    transition: border-color 0.2s, background 0.2s;
}

.login-card__body .k-textbox:focus,
.login-card__body .k-textbox:focus-within,
.login-card__body .k-input-solid:focus,
.login-card__body .k-input-solid:focus-within {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.login-card__body .k-textbox .k-input-inner,
.login-card__body .k-input-solid .k-input-inner {
    color: #fff;
}

.login-card__body .k-textbox .k-input-inner::placeholder,
.login-card__body .k-input-solid .k-input-inner::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Validation messages */
.login-card__body .k-form-error {
    color: #fca5a5;
}

/* Submit / form buttons */
.login-card__body .k-form-buttons .k-button-solid-primary,
.login-card__body .k-button-solid-base {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    border-radius: 0.5rem;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    width: 100%;
}

.login-card__body .k-form-buttons .k-button-solid-primary:hover,
.login-card__body .k-button-solid-base:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

/* Links row (Change Password / Login / Forgot Password) */
.login-card__body .d-flex.justify-content-between a {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.8rem;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
}

.login-card__body .d-flex.justify-content-between a:hover {
    color: #fff;
}

/* Google sign-in button */
.login-card__body .service {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.92);
    color: #333;
    border-radius: 0.5rem;
    padding: 0.15rem 0.15rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.login-card__body .service:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}

.login-card__body .login-disabled-button {
    opacity: 0.5;
    pointer-events: none;
}

/* 2FA instructions */
.login-card__body .container ol {
    color: rgba(255, 255, 255, 0.85);
    padding-left: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.6;
}

.login-card__body .container ol li {
    margin-bottom: 0.5rem;
}

/* QR code container */
.login-card__body #qrcode {
    background: #fff;
    border-radius: 0.5rem;
    display: inline-block;
    padding: 0.75rem;
    margin-top: 0.5rem;
}

/* Forgot password text */
.login-card__body div:has(> br) {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    text-align: center;
    padding: 1rem 0;
}

/* --- Footer --- */
.login-footer {
    width: 100%;
    text-align: center;
    padding: 1rem;
    z-index: 1;
}

.login-footer,
.login-footer a {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
}

.login-footer a:hover {
    color: rgba(255, 255, 255, 0.7);
}

/* --- Notification override for login page --- */
.login-page .PortalNotification {
    z-index: 100;
}

/* --- Mobile adjustments for login --- */
@media (max-width: 768px) {
    .login-card {
        max-width: 100%;
        margin: 0 0.5rem;
        border-radius: 1rem;
    }

    .login-card__logo {
        padding: 1.5rem 1.5rem 0.75rem;
    }

    .login-card__logo img {
        height: 32px;
    }

    .login-card__body {
        padding: 0.5rem 1.5rem 1.5rem;
    }
}

/* --- Callback / authorizing page --- */
.callback-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 2.5rem 3rem;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1.25rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.callback-message {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.03em;
}

.callback-loader {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #2C9C88;
    border-radius: 50%;
    animation: callback-spin 0.8s linear infinite;
}

@keyframes callback-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   Shared Glassmorphic Tokens
   Consolidated rules used by multiple page/modal scopes.
   ============================================================ */

/* --- Shared Modal Chrome --- */
.work-modal,
.report-modal,
.deal-modal,
.settings-modal {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(203, 213, 225, 0.5);
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.deal-modal,
.settings-modal {
    z-index: 44444;
}

.work-modal .k-window-titlebar,
.report-modal .k-window-titlebar,
.deal-modal .k-window-titlebar,
.settings-modal .k-window-titlebar {
    background: rgba(241, 245, 249, 0.6);
    border-bottom: 1px solid rgba(203, 213, 225, 0.3);
    color: #1e293b;
}

.work-modal .k-window-content,
.report-modal .k-window-content,
.deal-modal .k-window-content,
.settings-modal .k-window-content {
    background: rgba(255, 255, 255, 0.95);
}

/* --- Shared Forms --- */
.work-modal .k-form,
.report-modal .k-form,
.deal-modal .k-form,
.deal-glass .k-form,
.settings-glass .k-form,
.account-glass .k-form {
    background: transparent;
}

.work-modal .k-form .k-form-label,
.work-modal .k-form .k-label,
.report-modal .k-form .k-form-label,
.report-modal .k-form .k-label,
.deal-modal .k-form .k-form-label,
.deal-modal .k-form .k-label,
.deal-glass .k-form .k-form-label,
.deal-glass .k-form .k-label,
.settings-glass .k-form .k-form-label,
.settings-glass .k-form .k-label,
.settings-glass .k-form label,
.account-glass .k-form .k-form-label,
.account-glass .k-form .k-label,
.account-glass .k-form label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #475569;
}

.work-modal .k-form .k-form-group-label,
.settings-glass .k-form .k-form-group-label,
.account-glass .k-form .k-form-group-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.work-modal .k-form .k-textbox,
.work-modal .k-form .k-input,
.work-modal .k-form .k-picker,
.work-modal .k-form .k-combobox,
.report-modal .k-form .k-textbox,
.report-modal .k-form .k-input,
.report-modal .k-form .k-combobox,
.deal-modal .k-form .k-textbox,
.deal-modal .k-form .k-input,
.deal-glass .k-form .k-textbox,
.deal-glass .k-form .k-input,
.deal-glass .k-form .k-picker,
.deal-glass .k-form .k-dropdownlist,
.deal-glass .k-form .k-combobox,
.settings-glass .k-form .k-textbox,
.settings-glass .k-form .k-input,
.settings-glass .k-form .k-input-solid,
.settings-glass .k-form .k-picker,
.settings-glass .k-form .k-combobox,
.settings-glass .k-form .k-maskedtextbox,
.settings-glass .k-form .k-textarea,
.account-glass .k-form .k-textbox,
.account-glass .k-form .k-input,
.account-glass .k-form .k-input-solid {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(203, 213, 225, 0.6);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.work-modal .k-form .k-textbox:focus,
.work-modal .k-form .k-input:focus,
.work-modal .k-form .k-focus,
.report-modal .k-form .k-textbox:focus,
.report-modal .k-form .k-input:focus,
.report-modal .k-form .k-focus,
.deal-modal .k-form .k-textbox:focus,
.deal-modal .k-form .k-input:focus,
.deal-modal .k-form .k-focus,
.deal-glass .k-form .k-textbox:focus,
.deal-glass .k-form .k-input:focus,
.deal-glass .k-form .k-focus,
.settings-glass .k-form .k-textbox:focus,
.settings-glass .k-form .k-input:focus,
.settings-glass .k-form .k-input-solid:focus-within,
.settings-glass .k-form .k-focus,
.account-glass .k-form .k-textbox:focus,
.account-glass .k-form .k-input:focus,
.account-glass .k-form .k-input-solid:focus-within,
.account-glass .k-form .k-focus {
    border-color: #2C9C88;
    box-shadow: 0 0 0 2px rgba(44, 156, 136, 0.15);
}

/* --- Shared TreeList --- */
.work-modal .k-treelist,
.report-modal .k-treelist,
.deal-modal .k-treelist,
.deal-glass .k-treelist,
.settings-glass .k-treelist {
    background: transparent;
    border: 1px solid rgba(203, 213, 225, 0.4);
    border-radius: 0.5rem;
    overflow: hidden;
}

.work-modal .k-treelist .k-grid-header,
.report-modal .k-treelist .k-grid-header,
.deal-modal .k-treelist .k-grid-header,
.deal-glass .k-treelist .k-grid-header,
.settings-glass .k-treelist .k-grid-header {
    background: rgba(241, 245, 249, 0.5);
    border-bottom: 1px solid rgba(203, 213, 225, 0.4);
}

.work-modal .k-treelist .k-grid-header th,
.report-modal .k-treelist .k-grid-header th,
.deal-modal .k-treelist .k-grid-header th,
.deal-glass .k-treelist .k-grid-header th,
.settings-glass .k-treelist .k-grid-header th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
    background: transparent;
    border-color: rgba(203, 213, 225, 0.3);
}

.work-modal .k-treelist td,
.report-modal .k-treelist td,
.deal-modal .k-treelist td,
.deal-glass .k-treelist td,
.settings-glass .k-treelist td {
    font-size: 0.8125rem;
    color: #334155;
    border-color: rgba(203, 213, 225, 0.2);
    background: transparent;
}

.work-modal .k-treelist .k-table-row:hover td,
.work-modal .k-treelist tr:hover > td,
.report-modal .k-treelist .k-table-row:hover td,
.report-modal .k-treelist tr:hover > td,
.deal-modal .k-treelist tr:hover > td,
.deal-glass .k-treelist tr:hover > td,
.settings-glass .k-treelist tr:hover > td {
    background: rgba(44, 156, 136, 0.06);
}

.work-modal .k-treelist .k-selected td,
.report-modal .k-treelist .k-selected td,
.report-modal .k-treelist tr.k-selected > td,
.deal-modal .k-treelist tr.k-selected > td,
.deal-glass .k-treelist tr.k-selected > td,
.settings-glass .k-treelist tr.k-selected > td {
    background: rgba(44, 156, 136, 0.1) !important;
    color: #123a41;
}

.work-modal .k-treelist .k-toolbar,
.report-modal .k-treelist .k-toolbar,
.deal-modal .k-treelist .k-toolbar,
.deal-glass .k-treelist .k-toolbar,
.settings-glass .k-treelist .k-toolbar {
    background: rgba(241, 245, 249, 0.4);
    border-color: rgba(203, 213, 225, 0.3);
}

.work-modal .k-treelist .k-pager,
.report-modal .k-treelist .k-pager,
.deal-glass .k-treelist .k-pager {
    background: rgba(241, 245, 249, 0.4);
    border-color: rgba(203, 213, 225, 0.3);
    font-size: 0.8125rem;
}

/* --- Shared Grid --- */
.report-glass .k-grid,
.deal-glass .k-grid,
.settings-glass .k-grid {
    background: transparent;
    border: 1px solid rgba(203, 213, 225, 0.4);
    border-radius: 0.5rem;
    overflow: hidden;
}

.report-glass .k-grid .k-grid-header,
.deal-glass .k-grid .k-grid-header,
.settings-glass .k-grid .k-grid-header {
    background: rgba(241, 245, 249, 0.5);
    border-bottom: 1px solid rgba(203, 213, 225, 0.4);
}

.report-glass .k-grid .k-grid-header th,
.report-glass .k-grid .k-grid-header .k-header,
.deal-glass .k-grid .k-grid-header th,
.settings-glass .k-grid .k-grid-header th,
.settings-glass .k-grid .k-grid-header .k-header {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #475569;
    background: transparent;
    border-color: rgba(203, 213, 225, 0.3);
}

.report-glass .k-grid td,
.deal-glass .k-grid td,
.settings-glass .k-grid td {
    font-size: 0.8rem;
    color: #334155;
    border-color: rgba(226, 232, 240, 0.3);
    background: transparent;
}

.settings-glass .k-grid td a {
    font-size: 0.8rem;
    color: #334155;
    border-color: rgba(226, 232, 240, 0.3);
    background: transparent;
}

.report-glass .k-grid tr:hover > td,
.deal-glass .k-grid tr:hover > td,
.settings-glass .k-grid tr:hover > td {
    background-color: rgba(241, 245, 249, 0.6);
}

.report-glass .k-grid tr.k-selected > td,
.settings-glass .k-grid tr.k-selected > td {
    background-color: rgba(18, 58, 65, 0.1);
    color: #123a41;
}

.report-glass .k-grid .k-grid-toolbar,
.settings-glass .k-grid .k-grid-toolbar {
    background: rgba(241, 245, 249, 0.3);
    border-color: rgba(203, 213, 225, 0.3);
}

.settings-glass .k-grid .k-grid-toolbar {
    padding: 0.375rem;
}

.report-glass .k-grid .k-pager,
.report-glass .k-grid .k-pager-wrap,
.settings-glass .k-grid .k-pager,
.settings-glass .k-grid .k-pager-wrap {
    background: rgba(241, 245, 249, 0.3);
    border-color: rgba(203, 213, 225, 0.3);
    font-size: 0.8125rem;
}

/* --- Shared Primary Button --- */
.report-glass .k-button.k-primary,
.report-glass .k-button-solid-primary,
.report-modal .k-button-solid-primary,
.deal-modal .k-button-solid-primary,
.deal-glass .big-button,
.settings-glass .k-button-solid-primary,
.account-glass .k-button-solid-primary {
    background: #123a41;
    border-color: #123a41;
    color: #fff;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    transition: all 0.15s ease;
}

.report-glass .k-button.k-primary:hover,
.report-glass .k-button-solid-primary:hover,
.report-modal .k-button-solid-primary:hover,
.deal-modal .k-button-solid-primary:hover,
.deal-glass .big-button:hover,
.settings-glass .k-button-solid-primary:hover,
.account-glass .k-button-solid-primary:hover {
    background: #0e2f34;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(18, 58, 65, 0.3);
}

/* --- Shared Wizard --- */
.work-modal .k-wizard,
.deal-glass .k-wizard {
    background: transparent;
    border: none;
}

.work-modal .k-wizard .k-stepper .k-step-current .k-step-indicator,
.deal-glass .k-wizard .k-stepper .k-step-current .k-step-indicator {
    background: #123a41;
    border-color: #123a41;
    color: #fff;
}

.work-modal .k-wizard .k-stepper .k-step-done .k-step-indicator,
.deal-glass .k-wizard .k-stepper .k-step-done .k-step-indicator {
    background: #2C9C88;
    border-color: #2C9C88;
    color: #fff;
}

.work-modal .k-wizard .k-stepper .k-step-label,
.deal-glass .k-wizard .k-stepper .k-step-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
}

.work-modal .k-wizard .k-wizard-content,
.deal-glass .k-wizard .k-wizard-content {
    background: transparent;
}

.work-modal .k-wizard .k-wizard-buttons,
.deal-glass .k-wizard .k-wizard-buttons {
    background: rgba(241, 245, 249, 0.4);
    border-top: 1px solid rgba(203, 213, 225, 0.3);
    padding: 0.75rem 1.25rem;
}

.work-modal .k-wizard .k-wizard-buttons .k-button,
.deal-glass .k-wizard .k-wizard-buttons .k-button {
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    transition: all 0.15s ease;
}

.work-modal .k-wizard .k-wizard-buttons .k-button-solid-primary,
.deal-glass .k-wizard .k-wizard-buttons .k-button-solid-primary {
    background: #123a41;
    border-color: #123a41;
    color: #fff;
}

.work-modal .k-wizard .k-wizard-buttons .k-button-solid-primary:hover,
.deal-glass .k-wizard .k-wizard-buttons .k-button-solid-primary:hover {
    background: #0e2f34;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(18, 58, 65, 0.3);
}

/* --- Shared Checkbox --- */
.work-glass .k-checkbox:checked,
.work-glass .form-check-input:checked,
.work-modal .k-checkbox:checked,
.work-modal .form-check-input:checked,
.work-form-area .k-checkbox:checked,
.work-form-area .form-check-input:checked,
.deal-glass .k-checkbox:checked,
.deal-modal .k-checkbox:checked,
.settings-glass .k-checkbox:checked {
    background-color: #2C9C88;
    border-color: #2C9C88;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

/* --- Shared form-control --- */
.work-modal .form-control,
.deal-glass .form-control {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(203, 213, 225, 0.6);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* --- Shared ProgressBar --- */
.work-modal .k-progressbar,
.report-modal .k-progressbar {
    background: rgba(203, 213, 225, 0.3);
    border-radius: 999px;
    overflow: hidden;
}

.work-modal .k-progressbar .k-selected,
.report-modal .k-progressbar .k-selected {
    background: linear-gradient(90deg, #2C9C88, #123a41);
    border-radius: 999px;
    transition: width 0.4s ease;
}

/* ============================================================
   Dashboard — glassmorphic tile styling
   ============================================================ */
/* TileLayout container: transparent, gapped */
.dash-glass.k-tilelayout {
    background: transparent;
    border: none;
    gap: 1rem;
}

/* Each tile card: frosted glass on light background */
.dash-glass .k-tilelayout-item {
    background: rgba(241, 245, 249, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(203, 213, 225, 0.5);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    animation: desktop-fade-in 0.25s ease-out both;
}

.dash-glass .k-tilelayout-item:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07), 0 8px 20px rgba(0, 0, 0, 0.06);
    border-color: rgba(203, 213, 225, 0.7);
}

/* Staggered entrance animation */
.dash-glass .k-tilelayout-item:nth-child(1) { animation-delay: 0.02s; }
.dash-glass .k-tilelayout-item:nth-child(2) { animation-delay: 0.04s; }
.dash-glass .k-tilelayout-item:nth-child(3) { animation-delay: 0.06s; }
.dash-glass .k-tilelayout-item:nth-child(4) { animation-delay: 0.08s; }
.dash-glass .k-tilelayout-item:nth-child(5) { animation-delay: 0.10s; }
.dash-glass .k-tilelayout-item:nth-child(6) { animation-delay: 0.12s; }
.dash-glass .k-tilelayout-item:nth-child(7) { animation-delay: 0.14s; }
.dash-glass .k-tilelayout-item:nth-child(8) { animation-delay: 0.16s; }

/* --- Card headers --- */
.dash-glass .k-card-header {
    background: rgba(241, 245, 249, 0.4);
    border-bottom: 1px solid rgba(203, 213, 225, 0.3);
    color: #1e293b;
    padding: 0.5rem 0.75rem !important;
}

.dash-glass .k-card-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    letter-spacing: 0.01em;
    margin: 0;
}

.dash-glass .card-header {
    background: none;
}

/* --- Card body --- */
.dash-glass .k-card-body {
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    color: #475569;
}

/* --- Window titlebar inside tiles --- */
.dash-glass .k-window-titlebar {
    padding: 0 !important;
    border-style: none !important;
}

/* --- PanelBar (Deals, Favorites) --- */
.dash-glass .k-panelbar {
    background: transparent;
    border: none;
}

.dash-glass .k-panelbar > .k-item > .k-link,
.dash-glass .k-panelbar > .k-panelbar-header > .k-link {
    padding: 0.375rem 0.625rem;
    background: transparent;
    color: #334155;
    font-size: 0.8125rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(203, 213, 225, 0.25);
    transition: background 0.15s ease;
}

.dash-glass .k-panelbar > .k-item > .k-link:hover,
.dash-glass .k-panelbar > .k-panelbar-header > .k-link:hover {
    background: rgba(241, 245, 249, 0.5);
}

.dash-glass .k-panelbar > .k-item > .k-link.k-selected,
.dash-glass .k-panelbar > .k-panelbar-header > .k-link.k-selected {
    background: rgba(18, 58, 65, 0.08);
    color: #123a41;
}

.dash-glass .k-panelbar .k-group > .k-item > .k-link,
.dash-glass .k-panelbar .k-panelbar-group > .k-panelbar-item > .k-link {
    padding: 0.25rem 0.625rem;
    font-size: 0.8rem;
    color: #475569;
    border-bottom: 1px solid rgba(226, 232, 240, 0.4);
    transition: background 0.15s ease;
}

.dash-glass .k-panelbar .k-group > .k-item > .k-link:hover,
.dash-glass .k-panelbar .k-panelbar-group > .k-panelbar-item > .k-link:hover {
    background: rgba(241, 245, 249, 0.6);
}

.dash-glass .k-panelbar .k-panelbar-group > .k-panelbar-item > .k-selected {
    color: rgba(241,245,249,0.9);
}

.dash-glass .k-panelbar .k-panelbar-group > .k-panelbar-item > .k-selected:hover {
    color: #475569;
}

/* --- TabStrip (DealStats) --- */
.dash-glass .k-tabstrip-items {
    border-bottom: 1px solid rgba(203, 213, 225, 0.4);
}

.dash-glass .k-tabstrip-items .k-item .k-link {
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    border: none;
    background: transparent;
    transition: color 0.15s ease;
}

.dash-glass .k-tabstrip-items .k-item.k-active .k-link {
    color: #123a41;
    border-bottom: 2px solid #123a41;
    background: transparent;
}

.dash-glass .k-tabstrip-items .k-item .k-link:hover {
    color: #334155;
    background: transparent;
}

.dash-glass .k-tabstrip > .k-content {
    border: none;
    background: transparent;
    padding: 0.5rem 0;
}

/* --- Charts --- */
.dash-glass .progress-container {
    width: 100%;
    height: 0.5rem;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    cursor: pointer;
}

.dash-glass .progress-item-wrapper {
    padding: .1em .3em 1.0em .5em;
}

.dash-glass .stat-panel {
    background: rgba(241, 245, 249, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(203, 213, 225, 0.4);
    border-radius: 0.75rem;
    overflow: hidden;
    animation: desktop-fade-in 0.25s ease-out both;
    animation-delay: 0.05s;
    margin-left: 0rem;
    margin-bottom: 1rem;
    padding: 0.25rem;
}

.dash-glass .progress-step {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    transition: width 0.4s ease;
    border: 1px solid rgba(213, 235, 231, .8);
}

.dash-glass .progress-label {
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dash-glass .chart-header {
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.dash-glass .progress-bg {
    background-color: rgb(213, 235, 231, .5); 
}

.dash-glass .k-chart {
    background: transparent;
}

.dash-glass .k-chart .k-chart-surface {
    border-radius: 0.375rem;
}

.dash-glass .review-chart {
    height: 200px;
}

/* --- TreeList (DealsByType) --- */
.dash-glass .dealsbystats {
    background: transparent;
    border: none;
}

.dash-glass .dealsbystats .k-grid-header th {
    background: rgba(241, 245, 249, 0.4);
    border-color: rgba(203, 213, 225, 0.3);
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dash-glass .dealsbystats td {
    border-color: rgba(226, 232, 240, 0.3);
    font-size: 0.8rem;
}

.dash-glass .dealsbystats tr.k-selected > td {
    background-color: rgba(18, 58, 65, 0.12);
    color: #123a41;
}

.dash-glass .dealsbystats tr[aria-level="1"].k-master-row > td {
    border-bottom: 1px solid rgba(203, 213, 225, 0.5);
    background-color: rgba(241, 245, 249, 0.5);
    font-weight: 500;
    color: #334155;
}

.dash-glass .dealsbystats tr:hover > td {
    background-color: rgba(241, 245, 249, 0.6);
}

/* --- ListViews (Activity, Alerts) --- */
.dash-glass .k-listview {
    background: transparent;
    border: none;
}

.dash-glass .k-listview-content {
    padding: 0;
}

.dash-glass .current-activity .k-listview-content span {
    display: list-item;
    padding-bottom: 0.375rem;
    font-size: 0.8rem;
    color: #475569;
}

.dash-glass .recent-activity .k-listview-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, 225px);
    gap: 0.25rem 0.5rem;
}

.dash-glass .k-listview hr,
.dash-glass .k-card-body hr {
    border-color: rgba(203, 213, 225, 0.3);
    margin: 0.5rem 0;
}

/* --- Assignments --- */
.dash-glass .k-card-body u {
    text-decoration: none;
    font-weight: 600;
    color: #334155;
    font-size: 0.8rem;
}

/* --- Favorite links --- */
.dash-glass .favorite-link {
    color: #123a41;
    text-decoration: none;
    transition: color 0.15s ease;
}

.dash-glass .favorite-link:hover {
    color: #185560;
}

/* --- Form controls in tile headers --- */
.dash-glass .k-card-header .form-select {
    background: rgba(241, 245, 249, 0.6);
    border: 1px solid rgba(203, 213, 225, 0.5);
    border-radius: 0.375rem;
    color: #334155;
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
}

.dash-glass .k-card-header .k-datepicker .k-input {
    background: rgba(241, 245, 249, 0.6);
    border: 1px solid rgba(203, 213, 225, 0.5);
    border-radius: 0.375rem;
}

.dash-glass .normal, .dash-glass .normal a {
    font-size: 0.8rem;
}

.alerts-wrapper {
    margin: 0.5rem;
    background: rgba(241, 245, 249, 0.5);
    border: 1px solid rgba(203, 213, 225, 0.4);
    border-radius: 0.75rem;
    animation: desktop-fade-in 0.25s ease-out both;
}

    .alerts-wrapper .normal, .alerts-wrapper .normal a {
        font-size: 0.8rem;
    }

.dash-glass .alerts-wrapper {
    margin: 0em;
    border: none;
    border-radius: 0rem;
    background: none;
}

/* --- Dashboard control buttons --- */
.dash-glass ~ .dashboard-controls .dashboard-button,
.dashboard-controls .dashboard-button {
    color: rgba(51, 65, 85, 0.5);
    transition: color 0.15s ease, transform 0.15s ease;
}

.dashboard-controls .dashboard-button:hover {
    color: #123a41;
    transform: scale(1.1);
}

.alert-heading {
    font-weight: 500;
    color: #334155;
}

/* --- TileSelector popup --- */
.tile-selector {
    border: 1px solid rgba(203, 213, 225, 0.5);
    border-radius: 0.5rem;
    background: rgba(241, 245, 249, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.tile-enabled {
    border-color: #123a41;
    color: #123a41;
    background: rgba(18, 58, 65, 0.06);
}

.tile-disabled {
    border-color: rgba(148, 163, 184, 0.4);
    color: #94a3b8;
}

.tile-selector div .k-icon {
    font-size: 2.5rem;
}

.tile-selector div {
    font-size: 0.85rem;
    font-weight: 500;
}

/* ============================================================
   Work Page — glassmorphic styling
   ============================================================ */
.work-glass {
    margin-top: 0.5rem;
}
/* --- WorkDetails header bar --- */
.work-glass .work-header {
    background: rgba(241, 245, 249, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(203, 213, 225, 0.4);
    border-radius: 0.75rem;
    width: 100%;
    animation: desktop-fade-in 0.25s ease-out both;    
}

.work-glass .work-header h1 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.work-glass .work-header h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
    margin: 0;
}

.work-glass .work-header b {
    color: #334155;
    font-weight: 600;
}

.work-glass .work-header hr {
    border-color: rgba(203, 213, 225, 0.3);
    margin: 0.375rem 0;
}

.work-glass .work-header .address {
    color: #475569;
    font-size: 0.8rem;
}

/* Status text — fix .text-active visibility on light bg */
.work-glass .text-active {
    color: #CBD5E1;
    font-size: 0.8rem;
}

.work-glass .text-working {
    color: #A8A29E;
    font-size: 0.8rem;
    font-weight: 600;
}

.work-glass .work-header .text-tied-out {
    color: #2C9C88;
    font-size: 0.8rem;
    font-weight: 600;
}

.work-glass .text-exception {
    color: #dc2626;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Work mode toggle buttons */
.work-glass .work-by-button {
    border-radius: 0.375rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.work-glass .work-by-button.k-button-solid-base.k-selected {
    background-color: #123a41;
    border-color: #123a41;
}

/* --- Panels: Reviews list + Property list --- */
.work-glass .work-panel {
    background: rgba(241, 245, 249, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(203, 213, 225, 0.4);
    border-radius: 0.75rem;
    overflow: hidden;
    animation: desktop-fade-in 0.25s ease-out both;
    animation-delay: 0.05s;
    margin-left: 0rem;
}

/* --- TreeList (Reviews + Properties) --- */
.work-glass .k-treelist,
.work-glass .k-grid {
    background: transparent;
    border: none;
}

.work-glass .k-grid-header th,
.work-glass .k-treelist .k-grid-header th {
    background: rgba(241, 245, 249, 0.4);
    border-color: rgba(203, 213, 225, 0.3);
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 600;
}

.work-glass .k-grid td,
.work-glass .k-treelist td {
    border-color: rgba(226, 232, 240, 0.3);
    font-size: 0.8rem;
    color: #475569;
}

.work-glass .k-grid tr:hover > td,
.work-glass .k-treelist tr:hover > td {
    background-color: rgba(241, 245, 249, 0.6);
}

.work-glass .k-grid tr.k-selected > td,
.work-glass .k-treelist tr.k-selected > td {
    background-color: rgba(18, 58, 65, 0.1);
    color: #123a41;
}

/* Grid toolbar (search bar area) */
.work-glass .k-grid-toolbar,
.work-glass .k-treelist .k-grid-toolbar {
    background: rgba(241, 245, 249, 0.3);
    border-color: rgba(203, 213, 225, 0.3);
    padding: 0.375rem;
}

/* Search input */
.work-glass .form-control {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(203, 213, 225, 0.5);
    border-radius: 0.375rem;
    color: #334155;
    font-size: 0.8rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.work-glass .form-control:focus {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(18, 58, 65, 0.4);
    box-shadow: 0 0 0 2px rgba(18, 58, 65, 0.08);
}

/* Search button */
.work-glass .search-button {
    background: rgba(241, 245, 249, 0.6);
    border: 1px solid rgba(203, 213, 225, 0.5);
    border-left: none;
    border-radius: 0 0.375rem 0.375rem 0;
    color: #64748b;
    transition: background 0.15s ease, color 0.15s ease;
}

.work-glass .search-button:hover {
    background: rgba(18, 58, 65, 0.08);
    color: #123a41;
}

/* Pager */
.work-glass .k-pager,
.work-glass .k-pager-wrap {
    background: rgba(241, 245, 249, 0.3);
    border-color: rgba(203, 213, 225, 0.3);
}

/* --- Form area (ReviewForm) --- */
.work-glass .work-form-area {
    background: rgba(241, 245, 249, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(203, 213, 225, 0.4);
    border-radius: 0.75rem;
    overflow: hidden;
    animation: desktop-fade-in 0.25s ease-out both;
    animation-delay: 0.08s;
}

/* Form labels and inputs inside the form area */
.work-glass .k-form-label,
.work-glass .k-label {
    color: #475569;
    font-size: 0.8rem;
    font-weight: 500;
}

.work-glass .k-textbox,
.work-glass .k-input-solid {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(203, 213, 225, 0.5);
    border-radius: 0.375rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.work-glass .k-textbox:focus,
.work-glass .k-textbox:focus-within,
.work-glass .k-input-solid:focus,
.work-glass .k-input-solid:focus-within {
    border-color: rgba(18, 58, 65, 0.4);
    box-shadow: 0 0 0 2px rgba(18, 58, 65, 0.08);
}

/* Drop zone for file upload */
.work-glass .drop-zone {
    border: 2px rgba(203, 213, 225, 0.4) !important;
    border-radius: 0.5rem;
    transition: border-color 0.2s ease;
}

.work-glass .drop-zone-highlight {
    border-color: #2C9C88 !important;
    background: rgba(44, 156, 136, 0.04);
}

/* --- Context menu popups --- */
.work-glass .k-popup,
.work-glass .k-animation-container {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(203, 213, 225, 0.5);
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.work-glass .k-columnmenu-item {
    color: #334155;
    font-size: 0.8rem;
    transition: background 0.15s ease;
}

.work-glass .k-columnmenu-item:hover {
    background: rgba(241, 245, 249, 0.6);
}

/* --- Buttons (TelerikButton) --- */
.work-glass .k-button {
    border-radius: 0.375rem;
    transition: background 0.15s ease, transform 0.15s ease;
}

.work-glass .k-button:hover {
    transform: translateY(-1px);
}

/* --- Lock/Assignment badges --- */
.work-glass .worklistcircle div,
.work-glass .worklistcircle span {
    background-color: #123a41;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    text-align: center;
    font-size: 11px;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.work-glass .assignedlistcircle div {
    background-color: #456d74;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    text-align: center;
    font-size: 11px;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* --- Reviews list: no-headers override --- */
.work-glass .no-headers-grid .k-grid-header {
    display: none;
}

/* --- Cloud empty state --- */
.work-glass .cloud {
    color: #cbd5e1;
    font-size: 80px;
}

/* --- Status cell color strips --- */
.work-glass .property-working,
.dash-glass .property-working {
    background-color: #CBD5E1 !important;
    color: #CBD5E1 !important;
}

/* --- Status cell color strips --- */
.work-glass .property-active {
    background-color: #fff !important;
    color: #fff !important;
}

/* --- TabStrip inside work (if used) --- */
.work-glass .k-tabstrip-items {
    border-bottom: 1px solid rgba(203, 213, 225, 0.4);
}

.work-glass .k-tabstrip-items .k-item .k-link {
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 500;
    border: none;
    background: transparent;
}

.work-glass .k-tabstrip-items .k-item.k-active .k-link,
.work-glass .k-tabstrip-items .k-item.k-state-active .k-link,
.work-glass .k-tabstrip-items .k-item.k-state-selected .k-link {
    color: #123a41;
    font-weight: 600;
    border-bottom: 2px solid #123a41;
    background: transparent;
}

.work-glass .k-tabstrip > .k-content {
    border: none;
    background: transparent;
}

/* --- Splitter --- */
.work-glass .k-splitter {
    border-style: none !important;
    background: transparent;
}

/* --- Section labels (mobile) --- */
.work-glass .bg-light {
    background: rgba(241, 245, 249, 0.5) !important;
    border-radius: 0.375rem;
    color: #334155;
}

/* --- Grid content scroll --- */
.work-glass .k-grid-content {
    overflow-y: auto !important;
}

/* ============================================================
   Work Glass — Modal child components
   (AddProperty, EditProperty, CopyReviews, PropertHistoryList)
   ============================================================ */

/* --- Wizard (AddProperty / EditProperty) — unique override --- */
.work-modal .k-wizard .k-wizard-content {
    padding: 1rem 1.25rem;
}

.work-glass .k-form input {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(203, 213, 225, 0.5);
    border-radius: 0.375rem;
    color: #334155;
    font-size: 0.8rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.work-modal .k-form .k-form-legend,
.work-modal .k-form .k-form-fieldset > legend {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
    letter-spacing: 0.02em;
    border-bottom: 1px solid rgba(203, 213, 225, 0.4);
    padding-bottom: 0.35rem;
    margin-bottom: 0.5rem;
}

/* --- Review Setup legends inside wizards --- */

.work-modal .k-wizard legend.legend {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
}

.work-modal .k-wizard legend.legend + hr {
    border-color: rgba(203, 213, 225, 0.4);
    opacity: 0.6;
}

/* --- Checkboxes (CopyReviews) --- */
.work-modal .form-check-label {
    font-size: 0.8125rem;
    color: #475569;
    font-weight: 500;
}

/* --- ProgressBar (CopyReviews) — unique height override --- */
.work-modal .k-progressbar {
    height: 10px;
}

/* --- PropertHistoryList HTML table --- */
.work-modal .table {
    background: transparent;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: 0.8125rem;
}

.work-modal .table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
    background: rgba(241, 245, 249, 0.5);
    border-bottom: 2px solid rgba(203, 213, 225, 0.4);
    padding: 0.5rem 0.75rem;
}

.work-modal .table tbody td {
    color: #334155;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(203, 213, 225, 0.2);
}

.work-modal .table tbody tr:hover td {
    background: rgba(44, 156, 136, 0.05);
}

.work-modal .table tbody tr:last-child td {
    border-bottom: none;
}

/* --- Notification inside modals --- */
.work-modal .notification-parent .k-notification {
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


/* ============================================================
   Reporting Glass — Glassmorphic overrides for Reporting page
   ============================================================ */

/* --- Menu bar --- */
.report-glass .k-menu {
    background: rgba(241, 245, 249, 0.5);
    border: 1px solid rgba(203, 213, 225, 0.4);
    border-radius: 0.5rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.report-glass .k-menu .k-menu-item {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #334155;
}

.report-glass .k-menu .k-menu-item:hover,
.report-glass .k-menu .k-menu-item.k-hover {
    background: rgba(18, 58, 65, 0.08);
    color: #123a41;
}

.k-menu-group-md .k-menu-item {
    font-size: 0.8125rem;
    font-weight: 400;
    color: #334155;
}

/* --- Accordion filter sidebar --- */
.report-glass .accordion {
    --bs-accordion-btn-padding-y: 0.5rem;
    --bs-accordion-btn-padding-x: 0.75rem;
    --bs-accordion-active-bg: rgba(241, 245, 249, 0.6);
    --bs-accordion-btn-focus-border-color: #2C9C88;
    --bs-accordion-active-color: #123a41;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 2px rgba(44, 156, 136, 0.15);
    --bs-accordion-bg: rgba(255, 255, 255, 0.5);
    --bs-accordion-border-color: rgba(203, 213, 225, 0.4);
    border-radius: 0.5rem;
    overflow: hidden;
}

.report-glass .accordion-item {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(203, 213, 225, 0.3);
}

.report-glass .accordion-button {
    font-size: 0.8125rem;
    color: #334155;
    background: rgba(241, 245, 249, 0.4);
}

.report-glass .accordion-button:not(.collapsed) {
    background: rgba(241, 245, 249, 0.6);
    color: #123a41;
    box-shadow: none;
}

.report-glass .accordion-button b {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.report-glass .accordion-body {
    background: rgba(255, 255, 255, 0.3);
}

/* Checkboxes in sidebar filters */
.report-glass .accordion .k-checkbox:checked,
.report-glass .accordion .form-check-input:checked {
    background-color: #2C9C88;
    border-color: #2C9C88;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.report-glass .accordion label {
    font-size: 0.8125rem;
    color: #475569;
    font-weight: 500;
}

/* ComboBox / MultiSelect / TextArea in sidebar */
.report-glass .accordion .k-combobox,
.report-glass .accordion .k-multiselect,
.report-glass .accordion .k-input {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(203, 213, 225, 0.5);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
}

.report-glass .accordion textarea.form-control {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(203, 213, 225, 0.5);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: #334155;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.report-glass .accordion textarea.form-control:focus {
    background: rgba(255, 255, 255, 0.9);
    border-color: #2C9C88;
    box-shadow: 0 0 0 2px rgba(44, 156, 136, 0.15);
}

/* DateRangePicker in sidebar */
.report-glass .accordion .k-daterangepicker .k-input {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(203, 213, 225, 0.5);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
}

/* Page size textbox */
.report-glass .k-textbox {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(203, 213, 225, 0.5);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: #334155;
}

/* --- Reporting grid — unique overrides --- */
.report-glass div.borders table td {
    border-width: 0 0 1px 1px;
    border-color: rgba(203, 213, 225, 0.3);
}

/* Grid filter / column menu icons */
.report-glass .k-cell-inner .k-grid-filter,
.report-glass .k-cell-inner .k-header-column-menu,
.report-glass .k-cell-inner .k-grid-header-menu {
    margin-right: 2.5rem !important;
    z-index: 0;
}

.report-glass .k-grid-table .k-selected {
    background: rgba(18, 58, 65, 0.3) !important;
}

/* Internal-only header */
.report-glass .reporting-internal {
    color: #2C9C88;
    font-weight: 600;
}

/* Loader container */
.report-glass .reporting-loader-container {
    background: transparent;
}

/* --- MoveProperties / AssignProperties modal content --- */
.report-modal h5 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    letter-spacing: 0.02em;
}

.report-modal .k-autocomplete,
.report-modal .k-combobox,
.report-modal .k-datepicker {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(203, 213, 225, 0.6);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
}

/* ProgressBar in modals — unique size override */
.report-modal .k-progressbar {
    height: 6px;
    width: 200px;
}

/* Error textarea in MoveProperties */
.report-modal textarea.form-control {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(203, 213, 225, 0.5);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: #dc2626;
}

/* Loader in Save dialog */
.report-modal .k-loader {
    color: #2C9C88;
}


/* ============================================================
   Deal Glass — Glassmorphic overrides for ManageDeal page
   ============================================================ */

/* --- Main Wizard — unique overrides --- */
.deal-glass .k-wizard .k-stepper {
    background: rgba(241, 245, 249, 0.5);
    border-bottom: 1px solid rgba(203, 213, 225, 0.3);
    padding: 0.75rem 1rem;
}

.deal-glass .k-wizard .k-wizard-content {
    align-self: center !important;
}

.deal-glass .k-dropdownlist {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(203, 213, 225, 0.6);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
}

/* Tip text */
.deal-glass p.small {
    color: #64748b;
    font-size: 0.8125rem;
}

/* Section headings (System Reviews / Deal Reviews) */
.deal-glass h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    letter-spacing: 0.02em;
}

/* --- Import Data (Step 3) --- */
.deal-glass .input-group-text {
    background: rgba(241, 245, 249, 0.6);
    border: 1px solid rgba(203, 213, 225, 0.5);
    border-radius: 0.375rem 0 0 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
}

.deal-glass .form-control {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(203, 213, 225, 0.5);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: #334155;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.deal-glass .form-control:focus {
    background: rgba(255, 255, 255, 0.9);
    border-color: #2C9C88;
    box-shadow: 0 0 0 2px rgba(44, 156, 136, 0.15);
}

.deal-glass .form-select {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(203, 213, 225, 0.5);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: #334155;
}

.deal-glass .k-label {
    font-size: 0.8125rem;
    color: #475569;
    font-weight: 500;
}

/* Validation error */
.deal-glass .validation-message {
    color: #dc2626;
    font-size: 0.8125rem;
}

/* --- Complete Deal (Step 4) Chart --- */
.deal-glass .k-chart {
    background: transparent;
}

/* --- Deal Modal Windows — unique overrides --- */
.deal-modal .k-window-title span, .settings-modal .k-window-title span {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
}

/* ColumnMapper select dropdowns */
.deal-modal .form-select {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(203, 213, 225, 0.5);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: #334155;
}

.deal-modal .form-select.invalid {
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
}

.deal-modal .k-checkbox-label {
    font-size: 0.8125rem;
    color: #475569;
    font-weight: 500;
}

/* ExceptionViewer / PromptViewer / OptionsViewer HTML tables */
.deal-modal table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8125rem;
}

.deal-modal table th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
    background: rgba(241, 245, 249, 0.5);
    border-bottom: 2px solid rgba(203, 213, 225, 0.4);
    padding: 0.5rem 0.75rem;
}

.deal-modal table td {
    color: #334155;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid rgba(203, 213, 225, 0.2);
}

.deal-modal table tr:hover td {
    background: rgba(44, 156, 136, 0.05);
}

/* Error log list in CompleteDeal */
.deal-modal ul {
    font-size: 0.8125rem;
    color: #dc2626;
}

.deal-modal ul li {
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(203, 213, 225, 0.2);
}


/* ============================================================
   Settings Glass — Glassmorphic overrides for Settings page
   ============================================================ */

/* --- TabStrip (left-position vertical tabs) --- */
.settings-glass .k-tabstrip {
    background: transparent;
    border: none;
}

.settings-glass .k-tabstrip > .k-tabstrip-items-wrapper {
    background: rgba(241, 245, 249, 0.4);
    border: 1px solid rgba(203, 213, 225, 0.4);
    border-radius: 0.5rem;
}

.settings-glass .k-tabstrip .k-item {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #475569;
}

.settings-glass .k-tabstrip .k-item:hover {
    background: rgba(18, 58, 65, 0.06);
    color: #123a41;
}

.settings-glass .k-tabstrip .k-item.k-active,
.settings-glass .k-tabstrip .k-item.k-tab-on-top {
    color: #123a41;
    font-weight: 600;
    border-bottom: 2px solid #123a41;
    background: rgba(241, 245, 249, 0.6);
}

.settings-glass .k-tabstrip > .k-content {
    border: none;
    background: transparent;
    padding: 0.5rem;
}

/* --- Settings heading --- */
.settings-glass h5 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    letter-spacing: 0.02em;
}

/* Detail grid (DealManager nested grids) */
.settings-glass .k-grid .k-detail-cell .k-grid {
    border: 1px solid rgba(203, 213, 225, 0.3);
    border-radius: 0.375rem;
}

/* Grid filter icons (moved from DealManager inline style) */
.settings-glass .k-cell-inner .k-grid-filter,
.settings-glass .k-cell-inner .k-header-column-menu {
    position: absolute;
    bottom: -4px;
}

.settings-glass .k-grid-header .k-grid-filter,
.settings-glass .k-grid-header .k-header-column-menu {
    bottom: -4px;
}

/* Form buttons (UserManager — moved from inline) */
.settings-glass .k-form-buttons {
    display: flex !important;
    justify-content: space-between !important;
    width: 66.6%;
}

.settings-glass .k-checkbox + label,
.settings-glass .k-radio-list label {
    font-size: 0.8125rem;
    color: #475569;
    font-weight: 500;
}

/* Radio group (CompanyEditor type selector) */
.settings-glass .k-radio-list {
    gap: 0.5rem;
}

.settings-glass .k-radio:checked {
    background-color: #123a41;
    border-color: #123a41;
}

/* Error/Delete buttons */
.settings-glass .k-button-solid-error {
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

/* Add / Close icon buttons */
.settings-glass .float-end .k-button {
    background: rgba(241, 245, 249, 0.6);
    border: 1px solid rgba(203, 213, 225, 0.5);
    border-radius: 0.375rem;
    color: #334155;
    transition: all 0.15s ease;
}

.settings-glass .float-end .k-button:hover {
    background: rgba(18, 58, 65, 0.08);
    color: #123a41;
}

/* Input group (API key) */
.settings-glass .input-group-text {
    background: rgba(241, 245, 249, 0.6);
    border: 1px solid rgba(203, 213, 225, 0.5);
    font-size: 0.8125rem;
    color: #334155;
    cursor: pointer;
}

.settings-glass .input-group-text:hover {
    background: rgba(18, 58, 65, 0.08);
}

/* Status badges */
.settings-glass .badge.text-bg-success {
    background-color: #2C9C88 !important;
}

.settings-glass .badge.text-bg-danger {
    background-color: #dc2626 !important;
}

/* --- JobViewer progress bars --- */
.settings-glass .progress-container {
    width: 100%;
    height: 17px;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
}

.settings-glass .progress-step {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    transition: width 0.4s ease;
}

.settings-glass .progress-label {
    padding: 0 5px;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* JobViewer Telerik ProgressBar */
.settings-glass .k-progressbar {
    background: rgba(203, 213, 225, 0.3);
    border-radius: 5px;
    height: 17px;
    overflow: hidden;
}

.settings-glass .k-progressbar .k-selected {
    border-radius: 5px;
    transition: width 0.4s ease;
}

/* JobViewer toolbar toggle buttons */
.settings-glass .k-button-solid-base.k-selected {
    border-color: rgba(203, 213, 225, 0.6);
    background-color: rgba(241, 245, 249, 0.6);
}

/* JobViewer loader */
.settings-glass .loader-container {
    text-align: center;
    display: inline-table;
}

.settings-glass .k-loader {
    color: #2C9C88;
}

/* JobViewer date picker in toolbar */
.settings-glass .k-datepicker {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(203, 213, 225, 0.5);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
}

/* DealManager menu (moved from inline) */
.settings-glass .k-menu.k-menu-horizontal:not(.k-context-menu) {
    padding: 0.25rem 0.25rem !important;
    background: rgba(241, 245, 249, 0.5);
    border: 1px solid rgba(203, 213, 225, 0.4);
    border-radius: 0.5rem;
}

.settings-glass .k-menu-link {
    padding: 0.5rem 0.5rem;
    font-size: 0.8125rem;
    color: #334155;
}

/* --- JobDetails cards inside modal --- */
.settings-modal .card {
    background: rgba(241, 245, 249, 0.5);
    border: 1px solid rgba(203, 213, 225, 0.4);
    border-radius: 0.5rem;
}

.settings-modal .card-header {
    background: rgba(241, 245, 249, 0.6);
    border-bottom: 1px solid rgba(203, 213, 225, 0.3);
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
}

.settings-modal .card-body {
    font-size: 0.8125rem;
    color: #334155;
}

.settings-modal .card-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #123a41;
}

.settings-modal dt {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
}

.settings-modal dd {
    font-size: 0.8125rem;
    color: #334155;
}

.settings-modal h6 {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1e293b;
    letter-spacing: 0.02em;
}

/* Answers table in JobDetails */
.settings-modal .table {
    background: transparent;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8125rem;
}

.settings-modal .table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
    background: rgba(241, 245, 249, 0.5);
    border-bottom: 2px solid rgba(203, 213, 225, 0.4);
    padding: 0.4rem 0.5rem;
}

.settings-modal .table td {
    color: #334155;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid rgba(203, 213, 225, 0.2);
}

.settings-modal .table tr:hover td {
    background: rgba(44, 156, 136, 0.05);
}

/* Alert box in JobDetails */
.settings-modal .alert-secondary {
    background: rgba(241, 245, 249, 0.5);
    border: 1px solid rgba(203, 213, 225, 0.4);
    color: #475569;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
}

/* Error list in JobDetails */
.settings-modal ul {
    font-size: 0.8125rem;
    color: #334155;
}

.settings-modal ul li {
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(203, 213, 225, 0.2);
}


/* ============================================================
   Account Glass — Glassmorphic overrides for Account page
   ============================================================ */

.account-glass {
    padding: 1.5rem;
}

/* --- Section headings --- */
.account-glass h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    letter-spacing: 0.02em;
    margin-bottom: 0.75rem;
}

/* --- Profile avatar --- */
.account-glass .account-avatar {
    border-radius: 0.75rem;
    border: 2px solid rgba(203, 213, 225, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    object-fit: cover;
}

/* --- Profile info --- */
.account-glass .account-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
}

.account-glass .account-name {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.account-glass .account-email {
    font-size: 0.8125rem;
    color: #475569;
}

.account-glass .account-roles {
    font-size: 0.75rem;
    font-weight: 500;
    color: #2C9C88;
    letter-spacing: 0.02em;
}

/* --- Divider --- */
.account-glass .account-divider {
    border-color: rgba(203, 213, 225, 0.4);
    margin: 1.25rem 0;
}

/* Validation messages */
.account-glass .k-form .validation-message {
    font-size: 0.75rem;
    color: #dc2626;
}