:root {
    /* WSI public-site inspired palette */
    --wsi-navy-950: #071f3a;
    --wsi-navy-900: #0b2f57;
    --wsi-navy-800: #123f72;
    --wsi-blue-700: #1f5f9f;
    --wsi-blue-600: #2f78bd;
    --wsi-blue-100: #e8f2fb;
    --wsi-orange-600: #f58220;
    --wsi-orange-500: #ff9d35;
    --wsi-orange-100: #fff0df;
    --wsi-charcoal: #1f2933;
    --wsi-slate-700: #405263;
    --wsi-slate-500: #6b7b8c;
    --wsi-slate-200: #d9e2ec;
    --wsi-slate-100: #f3f6f9;
    --wsi-white: #ffffff;
    --wsi-danger: #b42318;
    --wsi-danger-bg: #fff3f1;
    --wsi-shadow: 0 24px 70px rgba(7, 31, 58, 0.2);
    --wsi-radius-lg: 28px;
    --wsi-radius-md: 16px;
    --wsi-font: Arial, Helvetica, sans-serif;
}

* {
    box-sizing: border-box;
}

html, body {
    min-height: 100%;
    margin: 0;
}

body {
    font-family: var(--wsi-font);
    color: var(--wsi-charcoal);
    background: radial-gradient(circle at top left, rgba(245, 130, 32, 0.18), transparent 32rem), radial-gradient(circle at bottom right, rgba(31, 95, 159, 0.22), transparent 34rem), linear-gradient(135deg, #f9fbfd 0%, #eef4f9 48%, #e5edf5 100%);
}

    body.winsol-login-page {
        min-height: 100vh;
    }

a {
    color: var(--wsi-blue-700);
    font-weight: 700;
    text-decoration: none;
}

    a:hover, a:focus {
        text-decoration: underline;
    }

.page-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.modern-header {
    width: 100%;
    padding: 18px 32px;
    background: rgba(255, 255, 255, 0.84);
    border-bottom: 4px solid var(--wsi-orange-600);
    box-shadow: 0 10px 28px rgba(7, 31, 58, 0.08);
    backdrop-filter: blur(12px);
}

.brand {
    width: min(1120px, 100%);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--wsi-navy-900);
}

    .brand:hover, .brand:focus {
        text-decoration: none;
    }

.brand-mark {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--wsi-navy-900), var(--wsi-blue-600));
    color: var(--wsi-white);
    font-weight: 900;
    letter-spacing: 0.04em;
    box-shadow: 0 12px 28px rgba(11, 47, 87, 0.24);
    position: relative;
}

    .brand-mark::after {
        content: "";
        position: absolute;
        right: -4px;
        bottom: -4px;
        width: 16px;
        height: 16px;
        border-radius: 999px;
        background: var(--wsi-orange-600);
        border: 3px solid var(--wsi-white);
    }

.brand-text strong,
.brand-text small {
    display: block;
}

.brand-text strong {
    font-size: 1.05rem;
    line-height: 1.2;
}

.brand-text small {
    margin-top: 2px;
    color: var(--wsi-slate-500);
    font-size: 0.86rem;
    font-weight: 700;
}

.login-layout {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
    padding: 56px 0;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    gap: 34px;
    align-items: center;
}

.login-hero {
    padding: 18px 8px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(245, 130, 32, 0.32);
    border-radius: 999px;
    background: rgba(255, 240, 223, 0.82);
    color: #9a4b00;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.login-hero h1 {
    margin: 22px 0 16px;
    color: var(--wsi-navy-900);
    font-size: clamp(2.4rem, 5vw, 4.7rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.hero-copy {
    max-width: 640px;
    margin: 0;
    color: var(--wsi-slate-700);
    font-size: 1.16rem;
    line-height: 1.7;
}

.hero-card, .login-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: var(--wsi-shadow);
    backdrop-filter: blur(14px);
}

.hero-card {
    max-width: 680px;
    margin-top: 28px;
    padding: 24px;
    border-radius: var(--wsi-radius-md);
    border-left: 5px solid var(--wsi-orange-600);
}

    .hero-card h2 {
        margin: 0 0 8px;
        color: var(--wsi-navy-900);
        font-size: 1.25rem;
    }

    .hero-card p {
        margin: 0;
        color: var(--wsi-slate-700);
        line-height: 1.6;
    }

.login-card {
    width: 100%;
    padding: 32px;
    border-radius: var(--wsi-radius-lg);
    border-top: 5px solid var(--wsi-orange-600);
}

.login-card-header {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 26px;
}

.login-icon {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--wsi-navy-900), var(--wsi-blue-600));
    color: var(--wsi-white);
    font-weight: 900;
    letter-spacing: 0.04em;
    box-shadow: 0 14px 32px rgba(11, 47, 87, 0.28);
}

.login-card h2 {
    margin: 0;
    color: var(--wsi-navy-900);
    font-size: 1.75rem;
    line-height: 1.1;
}

.login-card-header p {
    margin: 5px 0 0;
    color: var(--wsi-slate-500);
    line-height: 1.5;
}

.form-field {
    margin-top: 18px;
}

    .form-field label {
        display: block;
        margin-bottom: 8px;
        color: var(--wsi-slate-700);
        font-size: 0.94rem;
        font-weight: 800;
    }

.input-control {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--wsi-slate-200);
    border-radius: 14px;
    background: var(--wsi-white);
    color: var(--wsi-charcoal);
    font: 1rem var(--wsi-font);
    outline: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

    .input-control:focus {
        border-color: var(--wsi-orange-600);
        box-shadow: 0 0 0 4px rgba(245, 130, 32, 0.16);
    }

.field-error {
    display: block;
    margin-top: 7px;
    color: var(--wsi-danger);
    font-size: 0.9rem;
    font-weight: 700;
}

.validation-summary {
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid rgba(180, 35, 24, 0.25);
    border-radius: 14px;
    background: var(--wsi-danger-bg);
    color: var(--wsi-danger);
    font-size: 0.94rem;
}

    .validation-summary ul {
        margin: 8px 0 0;
        padding-left: 20px;
    }

.button-row {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.btn {
    min-height: 48px;
    padding: 12px 20px;
    border: 0;
    border-radius: 14px;
    font: 800 1rem var(--wsi-font);
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

    .btn:hover, .btn:focus {
        transform: translateY(-1px);
    }

.btn-primary {
    flex: 1;
    background: linear-gradient(135deg, var(--wsi-orange-600), var(--wsi-orange-500));
    color: var(--wsi-white);
    box-shadow: 0 14px 28px rgba(245, 130, 32, 0.3);
}

    .btn-primary:hover, .btn-primary:focus {
        background: linear-gradient(135deg, #dc6d12, var(--wsi-orange-600));
    }

.btn-secondary {
    background: var(--wsi-blue-100);
    color: var(--wsi-navy-900);
}

.modern-footer {
    margin-top: auto;
    padding: 22px 16px;
    text-align: center;
    color: var(--wsi-slate-500);
    font-size: 0.82rem;
    line-height: 1.5;
}

    .modern-footer p {
        margin: 4px 0;
    }

@media (max-width: 860px) {
    .modern-header {
        padding: 14px 18px;
    }

    .login-layout {
        grid-template-columns: 1fr;
        padding: 32px 0;
    }

    .login-hero {
        padding: 0;
    }

    .login-card {
        padding: 24px;
    }
}

@media (max-width: 520px) {
    .login-layout {
        width: min(100% - 20px, 1120px);
    }

    .button-row {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }
}

/* Shared master-page application shell */
body.winsol-app-page {
    min-height: 100vh;
}

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-header {
    width: 100%;
    padding: 14px 28px;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 4px solid var(--wsi-orange-600);
    box-shadow: 0 10px 28px rgba(7, 31, 58, 0.08);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 20;
}

.app-header-inner {
    width: min(1440px, 100%);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.app-brand {
    margin: 0;
}

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

    .app-nav a {
        display: inline-flex;
        align-items: center;
        min-height: 38px;
        padding: 8px 13px;
        border-radius: 999px;
        color: var(--wsi-navy-900);
        font-size: 0.92rem;
        font-weight: 800;
        text-decoration: none;
    }

        .app-nav a:hover,
        .app-nav a:focus {
            background: var(--wsi-blue-100);
            text-decoration: none;
        }

.app-main {
    width: min(1440px, calc(100% - 32px));
    margin: 0 auto;
    padding: 30px 0 42px;
    flex: 1 0 auto;
}

.app-footer {
    flex: 0 0 auto;
}

.content-card {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-top: 5px solid var(--wsi-orange-600);
    border-radius: var(--wsi-radius-lg);
    box-shadow: var(--wsi-shadow);
    padding: 26px;
}

.page-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

    .page-title-row h1 {
        margin: 13px 0 8px;
        color: var(--wsi-navy-900);
        font-size: clamp(1.8rem, 3vw, 2.7rem);
        line-height: 1.05;
        letter-spacing: -0.04em;
    }

    .page-title-row p {
        max-width: 760px;
        margin: 0;
        color: var(--wsi-slate-700);
        font-size: 1rem;
        line-height: 1.55;
    }

.page-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 8px;
}

    .page-actions .btn {
        min-height: 42px;
        padding: 10px 15px;
        font-size: 0.92rem;
        text-decoration: none;
        white-space: nowrap;
    }

.grid-card {
    overflow: hidden;
    border: 1px solid var(--wsi-slate-200);
    border-radius: var(--wsi-radius-md);
    background: var(--wsi-white);
}

/* Telerik RadGrid modernization without changing server-side behavior */
.modern-radgrid,
.dataGridProps {
    font-family: var(--wsi-font) !important;
    color: var(--wsi-charcoal);
}

    .modern-radgrid .rgHeader,
    .modern-radgrid .rgHeader a,
    .dataGridProps .rgHeader,
    .dataGridProps .rgHeader a {
        color: var(--wsi-white) !important;
        font-weight: 800 !important;
    }

    .modern-radgrid .rgHeader,
    .dataGridProps .rgHeader {
        background: var(--wsi-navy-900) !important;
        border-color: var(--wsi-navy-800) !important;
    }

    .modern-radgrid .rgRow td,
    .modern-radgrid .rgAltRow td,
    .dataGridProps .rgRow td,
    .dataGridProps .rgAltRow td {
        border-color: var(--wsi-slate-200) !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .modern-radgrid .rgAltRow,
    .dataGridProps .rgAltRow,
    .dataGridAltItem {
        background: var(--wsi-slate-100) !important;
    }

        .modern-radgrid .rgRow:hover,
        .modern-radgrid .rgAltRow:hover,
        .dataGridProps .rgRow:hover,
        .dataGridProps .rgAltRow:hover {
            background: var(--wsi-orange-100) !important;
        }

    .modern-radgrid .rgCommandRow,
    .modern-radgrid .rgPager,
    .dataGridProps .rgCommandRow,
    .dataGridProps .rgPager {
        background: #f8fbfe !important;
        border-color: var(--wsi-slate-200) !important;
    }

    .modern-radgrid input[type="image"],
    .dataGridProps input[type="image"] {
        vertical-align: middle;
        margin: 2px 3px;
    }

.inout-board-page .grid-card {
    min-height: 520px;
}

@media (max-width: 760px) {
    .app-header {
        padding: 12px 16px;
    }

    .app-header-inner,
    .page-title-row {
        flex-direction: column;
        align-items: stretch;
    }

    .app-nav,
    .page-actions {
        justify-content: flex-start;
    }

    .content-card {
        padding: 18px;
    }
}

/* Inlined master-page top navigation */
.top-nav-panel {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    margin-left: auto;
}

.top-nav-select-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px 7px 13px;
    border: 1px solid rgba(217, 226, 236, 0.9);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 8px 22px rgba(7, 31, 58, 0.08);
}

.top-nav-label {
    color: var(--wsi-slate-700);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.top-nav-select {
    min-width: 230px;
    min-height: 38px;
    padding: 7px 38px 7px 12px;
    border: 1px solid var(--wsi-slate-200);
    border-radius: 999px;
    background: var(--wsi-white);
    color: var(--wsi-navy-900);
    font: 800 0.92rem var(--wsi-font);
    outline: none;
}

    .top-nav-select:focus {
        border-color: var(--wsi-orange-600);
        box-shadow: 0 0 0 4px rgba(245, 130, 32, 0.16);
    }

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

.top-nav-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid rgba(31, 95, 159, 0.16);
    border-radius: 999px;
    background: var(--wsi-blue-100);
    color: var(--wsi-navy-900) !important;
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1;
    text-decoration: none !important;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

    .top-nav-action:hover,
    .top-nav-action:focus {
        background: #dcedfa;
        box-shadow: 0 8px 18px rgba(7, 31, 58, 0.12);
        transform: translateY(-1px);
    }

.top-nav-action-logout {
    border-color: rgba(245, 130, 32, 0.28);
    background: linear-gradient(135deg, var(--wsi-orange-600), var(--wsi-orange-500));
    color: var(--wsi-white) !important;
    box-shadow: 0 10px 22px rgba(245, 130, 32, 0.22);
}

    .top-nav-action-logout:hover,
    .top-nav-action-logout:focus {
        background: linear-gradient(135deg, #dc6d12, var(--wsi-orange-600));
    }

@media (max-width: 980px) {
    .top-nav-panel,
    .top-nav-select-wrap,
    .top-nav-actions {
        width: 100%;
    }

    .top-nav-select {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
    }

    .top-nav-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 520px) {
    .top-nav-select-wrap {
        align-items: stretch;
        border-radius: 18px;
        flex-direction: column;
    }

    .top-nav-action {
        flex: 1 1 100%;
    }
}

/* Modern expandable / accordion sections
   Applies to jQuery UI accordions such as ClientContactManager sections without changing server controls. */
.ui-accordion {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 18px 0;
    font-family: var(--wsi-font) !important;
}

    .ui-accordion .ui-accordion-header {
        position: relative;
        display: flex !important;
        align-items: center;
        min-height: 58px;
        margin: 0 !important;
        padding: 16px 54px 16px 20px !important;
        border: 1px solid rgba(217, 226, 236, 0.95) !important;
        border-left: 5px solid var(--wsi-orange-600) !important;
        border-radius: 18px !important;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(232, 242, 251, 0.86)) !important;
        color: var(--wsi-navy-900) !important;
        box-shadow: 0 12px 30px rgba(7, 31, 58, 0.09);
        font: 900 1rem var(--wsi-font) !important;
        letter-spacing: -0.01em;
        cursor: pointer;
        transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
    }

        .ui-accordion .ui-accordion-header:hover,
        .ui-accordion .ui-accordion-header:focus {
            border-color: rgba(245, 130, 32, 0.45) !important;
            background: linear-gradient(135deg, var(--wsi-white), var(--wsi-orange-100)) !important;
            box-shadow: 0 16px 36px rgba(7, 31, 58, 0.13);
            transform: translateY(-1px);
            outline: none;
        }

        .ui-accordion .ui-accordion-header.ui-state-active {
            border-color: rgba(245, 130, 32, 0.55) !important;
            border-bottom-left-radius: 18px !important;
            border-bottom-right-radius: 18px !important;
            background: linear-gradient(135deg, var(--wsi-navy-900), var(--wsi-blue-700)) !important;
            color: var(--wsi-white) !important;
            box-shadow: 0 18px 42px rgba(7, 31, 58, 0.18);
        }

        .ui-accordion .ui-accordion-header .ui-accordion-header-icon {
            position: absolute !important;
            left: auto !important;
            right: 18px !important;
            top: 50% !important;
            width: 26px !important;
            height: 26px !important;
            margin: -13px 0 0 0 !important;
            border-radius: 999px;
            background: rgba(245, 130, 32, 0.16) !important;
            text-indent: 0 !important;
            overflow: hidden;
        }

            .ui-accordion .ui-accordion-header .ui-accordion-header-icon::before,
            .ui-accordion .ui-accordion-header .ui-accordion-header-icon::after {
                content: "";
                position: absolute;
                left: 50%;
                top: 50%;
                background: var(--wsi-orange-600);
                transform: translate(-50%, -50%);
                transition: transform 0.16s ease, opacity 0.16s ease, background-color 0.16s ease;
            }

            .ui-accordion .ui-accordion-header .ui-accordion-header-icon::before {
                width: 12px;
                height: 2px;
            }

            .ui-accordion .ui-accordion-header .ui-accordion-header-icon::after {
                width: 2px;
                height: 12px;
            }

        .ui-accordion .ui-accordion-header.ui-state-active .ui-accordion-header-icon {
            background: rgba(255, 255, 255, 0.18) !important;
        }

            .ui-accordion .ui-accordion-header.ui-state-active .ui-accordion-header-icon::before,
            .ui-accordion .ui-accordion-header.ui-state-active .ui-accordion-header-icon::after {
                background: var(--wsi-white);
            }

            .ui-accordion .ui-accordion-header.ui-state-active .ui-accordion-header-icon::after {
                opacity: 0;
                transform: translate(-50%, -50%) rotate(90deg);
            }

    .ui-accordion .ui-accordion-content {
        margin: -4px 0 4px 0 !important;
        padding: 22px !important;
        border: 1px solid rgba(217, 226, 236, 0.95) !important;
        border-top: 0 !important;
        border-radius: 0 0 20px 20px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 16px 36px rgba(7, 31, 58, 0.08);
        color: var(--wsi-charcoal) !important;
        overflow: visible !important;
    }

        .ui-accordion .ui-accordion-content table {
            max-width: 100%;
        }

        .ui-accordion .ui-accordion-content input[type="text"],
        .ui-accordion .ui-accordion-content input[type="password"],
        .ui-accordion .ui-accordion-content textarea,
        .ui-accordion .ui-accordion-content select {
            border: 1px solid var(--wsi-slate-200);
            border-radius: 10px;
            padding: 7px 9px;
            color: var(--wsi-charcoal);
            font-family: var(--wsi-font);
        }

            .ui-accordion .ui-accordion-content input[type="text"]:focus,
            .ui-accordion .ui-accordion-content input[type="password"]:focus,
            .ui-accordion .ui-accordion-content textarea:focus,
            .ui-accordion .ui-accordion-content select:focus {
                border-color: var(--wsi-orange-600);
                box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.14);
                outline: none;
            }

@media (max-width: 760px) {
    .ui-accordion .ui-accordion-header {
        min-height: 52px;
        padding: 14px 48px 14px 16px !important;
        border-radius: 16px !important;
    }

    .ui-accordion .ui-accordion-content {
        padding: 16px !important;
    }
}

/* =========================================================
   ClientContactManager modal/popup modernization v3
   Purpose: keep existing JS/control IDs intact while making
   legacy div popups behave like modern centered modals.
   ========================================================= */

body.winsol-app-page {
    overflow-x: hidden;
}

/* Full-screen modal backdrops used by the existing JavaScript. */
.overlayOverrides,
.overlayResponse,
.overlayProcessing,
.overlaySmallNBG {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
}

.overlayOverrides,
.overlayResponse {
    z-index: 9000 !important;
    background: rgba(7, 31, 58, 0.54) !important;
    backdrop-filter: blur(5px);
}

.overlayProcessing,
.overlaySmallNBG {
    z-index: 8990 !important;
    background: rgba(255, 255, 255, 0.65) !important;
}

/* Normalize old popup classes before applying the modern shell. */
.popupOverrides,
.popupResponse {
    display: none;
    box-sizing: border-box !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

    /* Modern modal shell.  This intentionally overrides old popup sizing/borders. */
    .popupOverrides.modern-popup,
    .popupResponse.modern-popup,
    .modern-popup {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        z-index: 9010 !important;
        display: none;
        box-sizing: border-box !important;
        width: min(1120px, calc(100vw - 56px)) !important;
        max-width: calc(100vw - 56px) !important;
        max-height: calc(100vh - 72px) !important;
        overflow: auto !important;
        padding: 26px 28px 24px !important;
        border: 1px solid rgba(204, 217, 232, 0.95) !important;
        outline: 0 !important;
        border-radius: 24px !important;
        background: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 30px 90px rgba(7, 31, 58, 0.36) !important;
        color: var(--wsi-charcoal) !important;
        text-align: left !important;
    }

.modern-popup-wide {
    width: min(1120px, calc(100vw - 56px)) !important;
}

/* Use a softer title area and prevent old black frame artifacts. */
.modern-popup::before {
    content: "";
    position: sticky;
    top: -26px;
    display: block;
    height: 0;
}

.modern-popup-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: -2px 0 20px !important;
    padding: 0 0 16px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(217, 226, 236, 0.95) !important;
    background: transparent !important;
}

    .modern-popup-header h2 {
        margin: 0 !important;
        color: var(--wsi-navy-900) !important;
        font-size: clamp(1.24rem, 2vw, 1.55rem) !important;
        line-height: 1.18 !important;
        letter-spacing: -0.025em;
    }

.modern-popup-kicker {
    margin: 0 0 5px !important;
    color: var(--wsi-orange-600) !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.11em !important;
    text-transform: uppercase !important;
}

.modern-form-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px 18px !important;
    align-items: start !important;
    width: 100% !important;
}

.modern-form-grid-one {
    grid-template-columns: minmax(0, 1fr) !important;
}

.modern-span-full {
    grid-column: 1 / -1 !important;
}

.modern-span-2 {
    grid-column: span 2 !important;
}

.modern-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0 !important;
}

    .modern-field label,
    .modern-check-row label {
        color: #263f5f !important;
        font-size: 0.82rem !important;
        font-weight: 800 !important;
    }

.modern-popup input[type="text"],
.modern-popup input[type="password"],
.modern-popup textarea,
.modern-popup select,
.modern-input {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 38px !important;
    margin: 0 !important;
    border: 1px solid #c9d5e4 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #102033 !important;
    padding: 8px 10px !important;
    font: 0.96rem var(--wsi-font) !important;
    outline: none !important;
    box-shadow: inset 0 1px 2px rgba(7, 31, 58, 0.04), 0 8px 18px rgba(7, 31, 58, 0.06) !important;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}

    .modern-popup textarea,
    .modern-input[rows] {
        min-height: 96px !important;
        resize: vertical;
    }

        .modern-popup input[type="text"]:focus,
        .modern-popup input[type="password"]:focus,
        .modern-popup textarea:focus,
        .modern-popup select:focus,
        .modern-input:focus {
            border-color: var(--wsi-blue-600) !important;
            box-shadow: 0 0 0 4px rgba(47, 120, 189, 0.16), 0 8px 18px rgba(7, 31, 58, 0.08) !important;
        }

.modern-check-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px 22px !important;
    min-width: 0 !important;
    padding: 11px 13px !important;
    background: linear-gradient(135deg, #f7fafe, #eef5fb) !important;
    border: 1px solid rgba(19, 48, 86, 0.1) !important;
    border-radius: 14px !important;
}

.modern-popup-subhead,
.modern-section-title {
    grid-column: 1 / -1 !important;
    margin: 18px 0 0 !important;
    padding: 12px 14px !important;
    border-left: 4px solid var(--wsi-orange-600) !important;
    border-radius: 12px !important;
    background: var(--wsi-orange-100) !important;
    color: var(--wsi-navy-900) !important;
    font-size: 0.95rem !important;
    font-weight: 900 !important;
}

.modern-popup-section {
    margin-top: 20px !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(217, 226, 236, 0.95) !important;
}

.modern-upload-zone,
.modern-info-panel {
    padding: 14px !important;
    border: 1px dashed #b8c8da !important;
    border-radius: 16px !important;
    background: #f7f9fc !important;
}

.modern-popup-actions {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 22px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(217, 226, 236, 0.85) !important;
}

.modern-popup-actions-left {
    justify-content: flex-start !important;
}

.modern-btn,
.modern-popup input[type="submit"].modern-btn,
.modern-popup input[type="button"].modern-btn {
    min-height: 38px !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 10px 18px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.modern-btn-primary {
    background: linear-gradient(135deg, var(--wsi-orange-600), var(--wsi-orange-500)) !important;
    color: #fff !important;
}

.modern-btn-secondary {
    background: var(--wsi-blue-100) !important;
    color: var(--wsi-navy-900) !important;
}

.modern-image-button {
    max-width: 100% !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 18px rgba(16, 47, 87, 0.18) !important;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
}

    .modern-image-button:hover {
        transform: translateY(-1px);
        filter: brightness(1.03);
        box-shadow: 0 12px 24px rgba(16, 47, 87, 0.22) !important;
    }

.modern-required-note {
    margin-top: 14px !important;
    color: var(--wsi-slate-500) !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
}

/* Telerik grids inside modals should fit the modal, not force it wider. */
.modern-popup .RadGrid,
.modern-popup .dataGridProps,
.modern-popup .rgMasterTable,
.modern-popup table {
    max-width: 100% !important;
}

.modern-popup .RadGrid,
.modern-popup .dataGridProps {
    width: 100% !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}

/* jQuery UI datepicker must appear above modal content. */
.ui-datepicker {
    z-index: 9025 !important;
}

@media (max-width: 900px) {
    .popupOverrides.modern-popup,
    .popupResponse.modern-popup,
    .modern-popup {
        width: calc(100vw - 28px) !important;
        max-width: calc(100vw - 28px) !important;
        max-height: calc(100vh - 36px) !important;
        padding: 20px !important;
        border-radius: 20px !important;
    }

    .modern-form-grid {
        grid-template-columns: 1fr !important;
    }

    .modern-span-2,
    .modern-span-full {
        grid-column: 1 / -1 !important;
    }

    .modern-popup-actions {
        justify-content: stretch !important;
    }

        .modern-popup-actions > * {
            flex: 1 1 auto;
        }
}

/* Modern server action buttons replacing legacy image buttons */
.wsi-btn,
a.wsi-btn,
input.wsi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 38px;
    padding: 0.62rem 1rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

    .wsi-btn:hover,
    a.wsi-btn:hover,
    input.wsi-btn:hover {
        transform: translateY(-1px);
        text-decoration: none !important;
    }

.wsi-btn-sm {
    min-height: 34px;
    padding: 0.52rem 0.85rem;
    font-size: 0.86rem;
}

.wsi-btn-primary {
    background: linear-gradient(135deg, #123f70, #0b5ea8);
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(18, 63, 112, 0.2);
}

    .wsi-btn-primary:hover {
        box-shadow: 0 14px 26px rgba(18, 63, 112, 0.28);
    }

.wsi-btn-secondary {
    background: #eef6ff;
    color: #0c2f57 !important;
    border-color: #bfd8f0;
    box-shadow: 0 8px 18px rgba(12, 47, 87, 0.08);
}

.wsi-btn-danger {
    background: #fff1f1;
    color: #a12222 !important;
    border-color: #f2bcbc;
    box-shadow: 0 8px 18px rgba(161, 34, 34, 0.08);
}

    .wsi-btn-danger:hover {
        background: #ffe3e3;
    }

.modern-popup-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(12, 47, 87, 0.1);
}

.modern-popup-actions-left {
    justify-content: flex-start;
}

.wsi-grid-action,
a.wsi-grid-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    margin: 0.12rem 0.15rem;
    padding: 0.38rem 0.62rem;
    border-radius: 999px;
    background: #eef6ff;
    border: 1px solid #bfd8f0;
    color: #0c2f57 !important;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: 0 5px 12px rgba(12, 47, 87, 0.06);
}

    .wsi-grid-action:hover,
    a.wsi-grid-action:hover {
        background: #dfefff;
        text-decoration: none !important;
    }

.wsi-grid-action-danger,
a.wsi-grid-action-danger {
    background: #fff1f1;
    border-color: #f2bcbc;
    color: #a12222 !important;
}

.wsi-chip-button,
a.wsi-chip-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0.38rem 0.75rem;
    border-radius: 999px;
    border: 1px solid #bfd8f0;
    background: #ffffff;
    color: #0c2f57 !important;
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none !important;
    box-shadow: 0 5px 12px rgba(12, 47, 87, 0.05);
}

    .wsi-chip-button:hover,
    a.wsi-chip-button:hover {
        background: #eef6ff;
        text-decoration: none !important;
    }

/* Button polish: keep page action buttons consistent and grid command buttons readable */
.wsi-page-actions,
.modern-page-actions,
td[align="right"] {
    gap: 0.45rem;
}

.wsi-btn-primary,
a.wsi-btn-primary,
input.wsi-btn-primary {
    background: linear-gradient(135deg, #123f70, #0b5ea8) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.12) !important;
}

    .wsi-btn-primary:visited,
    a.wsi-btn-primary:visited {
        color: #ffffff !important;
    }

.wsi-grid-action-primary,
a.wsi-grid-action-primary,
.modern-radgrid .rgCommandRow a.wsi-grid-action-primary,
.dataGridProps .rgCommandRow a.wsi-grid-action-primary {
    background: linear-gradient(135deg, #123f70, #0b5ea8) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.22) !important;
    box-shadow: 0 8px 16px rgba(18, 63, 112, 0.18) !important;
}

    .wsi-grid-action-primary:hover,
    a.wsi-grid-action-primary:hover,
    .modern-radgrid .rgCommandRow a.wsi-grid-action-primary:hover,
    .dataGridProps .rgCommandRow a.wsi-grid-action-primary:hover {
        background: linear-gradient(135deg, #0c2f57, #094f8f) !important;
        color: #ffffff !important;
    }

.wsi-grid-command-action,
a.wsi-grid-command-action {
    min-height: 30px !important;
    padding: 0.42rem 0.72rem !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
}

/* Telerik command/header areas sometimes inherit light Telerik link colors; force legibility. */
.modern-radgrid .rgCommandRow a,
.modern-radgrid .rgCommandRow input,
.modern-radgrid .rgCommandRow button,
.dataGridProps .rgCommandRow a,
.dataGridProps .rgCommandRow input,
.dataGridProps .rgCommandRow button,
.modern-radgrid .rgCommandItem a,
.dataGridProps .rgCommandItem a {
    text-shadow: none !important;
}

.modern-radgrid .rgCommandRow .wsi-grid-action:not(.wsi-grid-action-danger),
.dataGridProps .rgCommandRow .wsi-grid-action:not(.wsi-grid-action-danger) {
    background: linear-gradient(135deg, #123f70, #0b5ea8) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.22) !important;
}

    .modern-radgrid .rgCommandRow .wsi-grid-action:not(.wsi-grid-action-danger):visited,
    .dataGridProps .rgCommandRow .wsi-grid-action:not(.wsi-grid-action-danger):visited {
        color: #ffffff !important;
    }

/* =========================================================
   Hours Report Menu modern layout
   Merged from hours-report-modern.css into shared winsol-modern.css.
   Scoped to .wsi-report-page to avoid impacting other pages.
   ========================================================= */

.wsi-report-page {
    padding: 28px 34px;
    color: var(--wsi-navy-900);
}

.wsi-report-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
    padding: 26px 30px;
    border: 1px solid var(--wsi-slate-200);
    border-left: 6px solid var(--wsi-orange-600);
    border-radius: 18px;
    background: linear-gradient(135deg, var(--wsi-white) 0%, #f3f8fc 100%);
    box-shadow: 0 14px 35px rgba(8, 42, 77, .10);
}

.wsi-kicker {
    margin-bottom: 6px;
    color: var(--wsi-orange-600);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.wsi-report-hero h1,
.wsi-card h2 {
    margin: 0;
    color: var(--wsi-navy-900);
    font-weight: 800;
}

.wsi-report-hero h1 {
    font-size: 28px;
    line-height: 1.1;
}

.wsi-report-hero p,
.wsi-card-header p {
    margin: 6px 0 0;
    color: var(--wsi-slate-500);
    font-size: 14px;
}

.wsi-report-grid {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(420px, 1fr);
    gap: 22px;
    align-items: start;
}

.wsi-card {
    padding: 22px;
    border: 1px solid var(--wsi-slate-200);
    border-radius: 18px;
    background: var(--wsi-white);
    box-shadow: 0 12px 30px rgba(8, 42, 77, .10);
}

.wsi-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e2ebf3;
}

.wsi-card h2 {
    font-size: 20px;
}

.wsi-button-group,
.wsi-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.wsi-actions {
    margin-top: 16px;
    justify-content: flex-end;
}

.wsi-btn-small,
.wsi-btn-sm {
    min-height: 30px;
    padding: 7px 13px;
    font-size: 12px;
}

.wsi-btn-large {
    min-height: 40px;
    padding: 10px 20px;
    font-size: 15px;
}

.wsi-listbox,
.wsi-select,
.wsi-input {
    border: 1px solid #c6d7e8 !important;
    border-radius: 12px !important;
    background: var(--wsi-white) !important;
    color: #10263f !important;
    font-family: var(--wsi-font) !important;
    font-size: 14px !important;
    box-shadow: inset 0 1px 2px rgba(8, 42, 77, .05), 0 4px 14px rgba(8, 42, 77, .06);
}

    .wsi-listbox:focus,
    .wsi-select:focus,
    .wsi-input:focus {
        outline: none;
        border-color: var(--wsi-blue-600) !important;
        box-shadow: 0 0 0 3px rgba(15, 87, 151, .16), inset 0 1px 2px rgba(8, 42, 77, .05);
    }

.wsi-listbox {
    width: 100% !important;
    padding: 8px !important;
}

.wsi-employee-list {
    min-height: 520px;
}

.wsi-report-list {
    min-height: 285px;
}

.wsi-select {
    min-width: 74px;
    height: 38px;
    padding: 6px 10px;
}

.wsi-year-select {
    min-width: 96px;
}

.wsi-input {
    width: 100%;
    height: 38px;
    padding: 6px 12px;
    box-sizing: border-box;
}

.wsi-form-section {
    margin-bottom: 16px;
}

.wsi-field-label {
    display: block;
    margin-bottom: 7px;
    color: #1f3d5d;
    font-size: 13px;
    font-weight: 800;
}

.wsi-date-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .wsi-date-row span {
        color: #7a8a9a;
        font-weight: 800;
    }

.wsi-inline-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 900px) {
    .wsi-report-page {
        padding: 18px;
    }

    .wsi-report-hero,
    .wsi-card-header {
        flex-direction: column;
    }

    .wsi-report-grid {
        grid-template-columns: 1fr;
    }

    .wsi-inline-fields {
        grid-template-columns: 1fr;
    }
}

/* Hours Report date range: keep Start Date and End Date on the same row */
.wsi-report-page .wsi-date-range-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 18px;
    align-items: start;
    margin-bottom: 16px;
}

    .wsi-report-page .wsi-date-range-row .wsi-form-section {
        margin-bottom: 0;
    }

.wsi-report-page .wsi-date-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

    .wsi-report-page .wsi-date-row .wsi-select {
        flex: 0 0 auto;
    }

@media (max-width: 760px) {
    .wsi-report-page .wsi-date-range-row {
        grid-template-columns: 1fr;
    }
}