#content_form {
    margin-bottom: 5px;
}

.open>.dropdown-menu {
    background-color: var(--portalThemeColor4, #ffffff);
}

.open>.dropdown-menu>li>a {
    color: var(--portalThemeOnColor9, #1276CE);
}


.open .dropdown-menu>li>a:hover,
.dropdown-menu>.active>a:hover {
    color: var(--portalThemeColor4, #ffffff);
    background-color: var(--portalThemeOnColor9, #1276CE);
    text-decoration: Underline;

}

.dropdown-menu>.active>a {
    color: var(--portalThemeColor4, #ffffff);
    background-color: var(--portalThemeOnColor9, #1276CE);
    text-decoration: Underline;

}

.open .dropdown-menu>.active>a:focus {
    color: var(--portalThemeColor4, #ffffff);
    background-color: var(--portalThemeOnColor9, #1276CE);
    text-decoration: Underline;

}

.caseDoughnutChart {
    display: block;
    box-sizing: border-box;
    height: 300px;
    width: 300px;
}

.divDashboardCharts {
    display: flex;
    justify-content: center;
    width: 100%;
}

.breadcrumb {
    display: none;
}


/* ══════════════════════════════════════
    TRUST BRAND DESIGN SYSTEM
    Font: BW Gradual (headings) · Inter (body)
    Navy #0B1F33 · Deep Blue #0E3A5C
    Teal #1B5E78 · Steel #CBD6E0
    ══════════════════════════════════════ */

/* BW Gradual – loaded as local custom font fallback to Georgia
@font-face {
    font-family: 'BW Gradual';
    src: local('BW Gradual Bold'), local('BWGradual-Bold');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BW Gradual';
    src: local('BW Gradual Medium'), local('BWGradual-Medium');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BW Gradual';
    src: local('BW Gradual Regular'), local('BWGradual-Regular');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
*/

/* ══════════════════════════════════════
   BW GRADUAL – LOADED FROM PORTAL WEB FILES
   ══════════════════════════════════════ */

@font-face {
    font-family: 'BW Gradual';
    src: url('/fonts-bwgradualdemo-thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BW Gradual';
    src: url('/fonts-bwgradualdemo-thinitalic.otf') format('opentype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'BW Gradual';
    src: url('/fonts-bwgradualdemo-light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BW Gradual';
    src: url('/fonts-bwgradualdemo-lightitalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'BW Gradual';
    src: url('/fonts-bwgradualdemo-regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BW Gradual';
    src: url('/fonts-bwgradualdemo-regularitalic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'BW Gradual';
    src: url('/fonts-bwgradualdemo-medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BW Gradual';
    src: url('/fonts-bwgradualdemo-mediumitalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'BW Gradual';
    src: url('/fonts-bwgradualdemo-bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BW Gradual';
    src: url('/fonts-bwgradualdemo-bolditalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'BW Gradual';
    src: url('/fonts-bwgradualdemo-extrabold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BW Gradual';
    src: url('/fonts-bwgradualdemo-extrabolditalic.otf') format('opentype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'BW Gradual';
    src: url('/fonts-bwgradualdemo-black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BW Gradual';
    src: url('/fonts-bwgradualdemo-blackitalic.otf') format('opentype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}



:root {
    --navy: #0B1F33;
    --deep-blue: #0E3A5C;
    --midnight: #05080D;
    --teal: #1B5E78;
    --teal-light: #2A7A9A;
    --steel: #CBD6E0;
    --steel-light: #E6EDF3;
    --white: #FFFFFF;
    --bg: #EFF3F8;
    --bg-subtle: #F6F8FB;
    --border: #DAE2EC;
    --border-light: #EDF1F7;
    --text-primary: #0B1F33;
    --text-secondary: #3D5068;
    --text-muted: #7E90A5;
    --success: #0F7B3F;
    --success-light: #E7F6ED;
    --warning: #B8610B;
    --warning-light: #FEF4E6;
    --danger: #C23030;
    --danger-light: #FDE8E8;
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;
    --shadow-xs: 0 1px 2px rgba(11, 31, 51, 0.04);
    --shadow-sm: 0 1px 4px rgba(11, 31, 51, 0.06), 0 2px 8px rgba(11, 31, 51, 0.04);
    --shadow-md: 0 4px 12px rgba(11, 31, 51, 0.07), 0 1px 4px rgba(11, 31, 51, 0.04);
    --shadow-lg: 0 8px 32px rgba(11, 31, 51, 0.1), 0 2px 8px rgba(11, 31, 51, 0.04);
    --shadow-card-hover: 0 12px 40px rgba(11, 31, 51, 0.14), 0 4px 16px rgba(14, 58, 92, 0.08);
    --shadow-inset: inset 0 1px 3px rgba(11, 31, 51, 0.06);
    --font-heading: 'BW Gradual', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    line-height: 1.5;
}

::selection {
    background: var(--teal);
    color: white;
}

::-webkit-scrollbar {
    width: 5px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--steel);
    border-radius: 10px;
}

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

/* ─── Animations ─── */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px)
    }

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

@keyframes fadeScale {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px)
    }

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

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

    to {
        background-position: 200% 0
    }
}

.anim-in {
    animation: fadeUp .5s var(--transition-slow) both
}

.anim-d1 {
    animation: fadeUp .5s var(--transition-slow) .07s both
}

.anim-d2 {
    animation: fadeUp .5s var(--transition-slow) .14s both
}

.anim-d3 {
    animation: fadeUp .5s var(--transition-slow) .21s both
}

.anim-d4 {
    animation: fadeUp .5s var(--transition-slow) .28s both
}

.anim-scale {
    animation: fadeScale .4s var(--transition-slow) both
}

/* Skeleton loader for charts */
.skeleton {
    background: linear-gradient(90deg, var(--steel-light) 25%, #F0F4F8 50%, var(--steel-light) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.8s infinite;
    border-radius: 8px
}

/* ─── Header ─── */
/* .header {
    background: linear-gradient(135deg, var(--midnight) 0%, var(--navy) 35%, var(--deep-blue) 70%, var(--teal) 100%);
    padding: 0 36px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 24px rgba(5, 8, 13, .4), 0 1px 3px rgba(5, 8, 13, .2);
    border-bottom: 1px solid rgba(27, 94, 120, .2)
} */

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    text-decoration: none
}

.logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .05));
    border: 1px solid rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 17px;
    font-family: var(--font-heading);
    transition: var(--transition)
}

.logo:hover .logo-icon {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .3)
}

.logo-text {
    color: white;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .1em;
    font-family: var(--font-heading)
}

.logo-text span {
    font-weight: 400;
    opacity: .7
}

.nav {
    display: flex;
    align-items: center;
    gap: 4px
}

.nav-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    background: 0;
    border: none;
    color: rgba(255, 255, 255, .7);
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-body);
    transition: var(--transition)
}

.nav-btn:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff
}

.nav-btn.active {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1)
}

.nav-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, .12);
    margin: 0 10px
}

/* ─── Footer ─── */
.footer {
    background: var(--midnight);
    padding: 40px 36px 28px;
    text-align: center;
    border-top: 1px solid rgba(27, 94, 120, .15);
    margin-top: auto;
    position: relative
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--teal), transparent)
}

.footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px
}

.footer-logo .logo-icon {
    width: 30px;
    height: 30px;
    font-size: 14px;
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .1)
}

.footer-logo .logo-text {
    font-size: 17px
}

.footer-tagline {
    color: var(--teal-light);
    font-size: 11px;
    letter-spacing: .15em;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-family: var(--font-body)
}

.footer-copy {
    color: rgba(255, 255, 255, .3);
    font-size: 12px
}

/* ─── Page ─── */
.page {
    display: none;
    flex: 1
}

.page.active {
    display: block
}

.page-wrap {
    padding: 32px 36px;
    max-width: 1440px;
    margin: 0 auto
}

.page-title {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 32px;
    letter-spacing: -.01em
}

/* ─── Cards ─── */
.card {
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition);
    position: relative;
    overflow: hidden
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 10%, rgba(255, 255, 255, .8) 50%, transparent 90%);
    z-index: 1
}

.card-hover:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px)
}

.card-elevated {
    box-shadow: var(--shadow-md);
    border-color: rgba(203, 214, 224, .5)
}

/* ─── Stat Cards ─── */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px
}

.stat-card {
    padding: 20px 22px;
    position: relative;
    overflow: hidden;
    text-align: center;
    align-items: center;
}

.stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    opacity: .04
}

.stat-card .stat-value {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
    letter-spacing: -.02em;
    font-family: var(--font-body)
}

.stat-card .stat-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-family: var(--font-body)
}

.stat-card .stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px
}

.stat-card-navy .stat-value {
    color: var(--navy)
}

.stat-card-navy .stat-icon {
    background: linear-gradient(135deg, rgba(11, 31, 51, .1), rgba(11, 31, 51, .05));
    color: var(--navy)
}

.stat-card-navy::after {
    background: var(--navy)
}

.stat-card-teal .stat-value {
    color: var(--teal)
}

.stat-card-teal .stat-icon {
    background: linear-gradient(135deg, rgba(27, 94, 120, .12), rgba(27, 94, 120, .04));
    color: var(--teal)
}

.stat-card-teal::after {
    background: var(--teal)
}

.stat-card-success .stat-value {
    color: var(--success)
}

.stat-card-success .stat-icon {
    background: var(--success-light);
    color: var(--success)
}

.stat-card-success::after {
    background: var(--success)
}

.stat-card-warning .stat-value {
    color: var(--warning)
}

.stat-card-warning .stat-icon {
    background: var(--warning-light);
    color: var(--warning)
}

.stat-card-warning::after {
    background: var(--warning)
}

/* ─── Badge ─── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    border: 1px solid transparent
}

.badge-open {
    background: #E8F0FE;
    color: #1A4B8C;
    border-color: #C7DBFA
}

.badge-progress {
    background: #E3F0F3;
    color: var(--deep-blue);
    border-color: #C1DEE6
}

.badge-hold {
    background: #FEF4E6;
    color: #8B5A0B;
    border-color: #F8DFB8
}

.badge-resolved {
    background: #E7F6ED;
    color: #0F5A2E;
    border-color: #BDE5CA
}

.badge-cancelled {
    background: #FDE8E8;
    color: #992525;
    border-color: #F5C5C5
}

.badge-enhancement {
    background: #EFF2F6;
    color: #3D5068;
    border-color: #D8DFE8
}

.badge-critical {
    background: #FDE8E8;
    color: #992525;
    border-color: #F5C5C5
}

.badge-high {
    background: #FEF0E3;
    color: #8A4500;
    border-color: #F8D6B0
}

.badge-normal {
    background: #E8F0FE;
    color: #1A4B8C;
    border-color: #C7DBFA
}

.badge-low {
    background: #E7F6ED;
    color: #0F5A2E;
    border-color: #BDE5CA
}

.badge-type {
    background: #E3EDF6;
    color: var(--deep-blue);
    border-color: #C1D5E6
}

.badge-support {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--teal), var(--deep-blue));
    color: #fff;
    font-weight: 700;
    letter-spacing: .04em;
    border: none
}

/* ─── Buttons ─── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-family: var(--font-body);
    font-size: 13px;
    padding: 10px 22px;
    transition: all var(--transition);
    position: relative;
    overflow: hidden
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, transparent 60%);
    pointer-events: none
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md)
}

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

.btn:disabled {
    opacity: .4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none
}

.btn-primary {
    background: linear-gradient(135deg, var(--deep-blue), var(--navy));
    color: #fff
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--teal), var(--deep-blue))
}

.btn-success {
    background: linear-gradient(135deg, #12874A, #0F6B3B);
    color: #fff
}

.btn-danger {
    background: linear-gradient(135deg, #D63939, #B82828);
    color: #fff
}

.btn-outline {
    background: 0;
    color: var(--deep-blue);
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow-xs)
}

.btn-outline::after {
    display: none
}

.btn-outline:hover {
    border-color: var(--teal);
    color: var(--teal);
    background: rgba(27, 94, 120, .04)
}

.btn-ghost {
    background: 0;
    color: var(--text-secondary)
}

.btn-ghost::after {
    display: none
}

.btn-ghost:hover {
    background: var(--bg-subtle);
    color: var(--text-primary)
}

.btn-sm {
    font-size: 12px;
    padding: 7px 16px;
    border-radius: 8px
}

/* ─── Forms ─── */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 7px
}

.form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: .01em
}

.form-label .req {
    color: var(--danger);
    margin-left: 2px
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    font-size: 14px;
    font-family: var(--font-body);
    color: var(--text-primary);
    outline: none;
    background: var(--white);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-inset)
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(27, 94, 120, .1), var(--shadow-inset)
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-muted)
}

.form-input-icon {
    position: relative
}

.form-input-icon .form-input {
    padding-left: 40px
}

.form-input-icon .icon-inside {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    transition: color var(--transition-fast)
}

.form-input-icon:focus-within .icon-inside {
    color: var(--teal)
}

.form-select {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%237E90A5' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center
}

.form-textarea {
    resize: vertical
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

/* ─── Sign In ─── */
.signin-wrap {
    min-height: calc(100vh - 180px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: radial-gradient(ellipse at top, rgba(14, 58, 92, .06) 0%, transparent 60%)
}

.signin-card {
    width: 100%;
    max-width: 520px;
    overflow: hidden;
    box-shadow: var(--shadow-lg)
}

.signin-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    background: var(--bg-subtle)
}

.signin-tab {
    flex: 1;
    padding: 15px 16px;
    border: none;
    background: 0;
    border-bottom: 2.5px solid transparent;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    font-family: var(--font-body);
    transition: var(--transition)
}

.signin-tab:hover {
    color: var(--text-secondary);
    background: rgba(27, 94, 120, .03)
}

.signin-tab.active {
    background: var(--white);
    border-bottom-color: var(--teal);
    color: var(--text-primary);
    font-weight: 600
}

.signin-body {
    padding: 40px 44px
}

.signin-subtitle {
    font-size: 16px;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 28px
}

/* ─── Charts ─── */
.charts-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1.3fr;
    gap: 20px;
    margin-bottom: 28px
}

.chart-card {
    padding: 24px 24px 20px
}

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

.chart-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-family: var(--font-body)
}

.chart-container {
    position: relative;
    width: 100%
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    justify-content: center;
    margin-top: 14px
}

.chart-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500
}

.chart-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0
}

.chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    padding: 20px 0
}

.chart-loading .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal);
    animation: shimmer 1s infinite alternate
}

.chart-loading .dot:nth-child(2) {
    animation-delay: .2s
}

.chart-loading .dot:nth-child(3) {
    animation-delay: .4s
}

/* ─── Cases Table ─── */
.cases-header {
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    border-radius: var(--radius) var(--radius) 0 0
}

.cases-filter-select {
    padding: 9px 38px 9px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    font-size: 13px;
    font-weight: 600;
    color: var(--teal);
    background: #fff;
    cursor: pointer;
    font-family: var(--font-body);
    appearance: none;
    box-shadow: var(--shadow-xs);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%231B5E78' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: var(--transition-fast)
}

.cases-search-wrap {
    position: relative
}

.cases-search {
    padding: 9px 14px 9px 38px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    font-size: 13px;
    width: 220px;
    outline: none;
    font-family: var(--font-body);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-inset)
}

.cases-search:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(27, 94, 120, .1);
    width: 260px
}

.cases-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted)
}

.cases-actions {
    display: flex;
    align-items: center;
    gap: 12px
}

.cases-table {
    width: 100%;
    border-collapse: collapse
}

.cases-table thead {
    background: linear-gradient(180deg, var(--bg-subtle), var(--bg))
}

.cases-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: var(--teal);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
    letter-spacing: .06em;
    text-transform: uppercase
}

.cases-table th.sortable {
    cursor: pointer;
    user-select: none
}

.cases-table th.sortable:hover {
    color: var(--navy)
}

.cases-table td {
    padding: 13px 16px;
    font-size: 13px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-light)
}

.cases-table tr {
    transition: all var(--transition-fast);
    cursor: pointer
}

.cases-table tbody tr:hover {
    background: rgba(27, 94, 120, .04) !important;
    box-shadow: inset 3px 0 0 var(--teal)
}

.cases-table .case-id {
    color: var(--teal);
    font-weight: 600
}

.cases-table .case-title {
    color: var(--text-primary);
    font-weight: 500;
    max-width: 240px
}

/* ─── Pagination ─── */
.pager {
    padding: 14px 24px;
    border-top: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-subtle);
    border-radius: 0 0 var(--radius) var(--radius);
    flex-wrap: wrap;
    gap: 12px
}

.pager-info {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px
}

.pager-size {
    padding: 5px 24px 5px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    font-size: 12px;
    font-family: var(--font-body);
    color: var(--text-secondary);
    appearance: none;
    cursor: pointer;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%237E90A5' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 6px center
}

.pager-nav {
    display: flex;
    align-items: center;
    gap: 4px
}

.pager-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-body);
    transition: all var(--transition-fast)
}

.pager-btn:hover:not(:disabled):not(.active) {
    background: var(--bg);
    border-color: var(--teal);
    color: var(--teal)
}

.pager-btn.active {
    background: var(--deep-blue);
    border-color: var(--deep-blue);
    color: #fff
}

.pager-btn:disabled {
    opacity: .35;
    cursor: not-allowed
}

.pager-btn svg {
    width: 14px;
    height: 14px
}

.pager-dots {
    padding: 0 4px;
    color: var(--text-muted);
    font-size: 12px;
    letter-spacing: 2px
}

/* ─── Breadcrumb ─── */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px
}

.breadcrumb a {
    color: var(--teal);
    text-decoration: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    transition: color var(--transition-fast)
}

.breadcrumb a:hover {
    color: var(--deep-blue)
}

.breadcrumb .sep {
    color: var(--steel)
}

.breadcrumb .current {
    color: var(--text-primary);
    font-weight: 600
}

/* ─── Case Detail ─── */
.case-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 28px
}

.case-detail-title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
    letter-spacing: -.01em
}

.case-detail-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.case-detail-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0
}

.case-detail-grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 24px
}

.case-info-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .05em
}

.case-info-value {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500
}

.case-info-item {
    margin-bottom: 16px
}

.case-section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
    text-transform: uppercase;
    letter-spacing: .05em
}

.case-description {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7
}

/* ─── Attachments & Upload ─── */
.attachment-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    margin-bottom: 8px;
    transition: var(--transition-fast)
}

.attachment-row:hover {
    background: var(--bg);
    border-color: var(--border)
}

.attachment-name {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500
}

.attachment-eye {
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition-fast)
}

.attachment-eye:hover {
    color: var(--teal)
}

.upload-dropzone {
    border: 2px dashed var(--teal);
    border-radius: 12px;
    padding: 28px;
    text-align: center;
    background: linear-gradient(135deg, rgba(27, 94, 120, .04), rgba(14, 58, 92, .02));
    margin-top: 14px;
    cursor: pointer;
    transition: all var(--transition)
}

.upload-dropzone:hover {
    background: rgba(27, 94, 120, .06);
    border-color: var(--teal-light)
}

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

.upload-dropzone .upload-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 5px
}

.upload-dropzone-new {
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    background: var(--bg-subtle);
    cursor: pointer;
    transition: all var(--transition)
}

.upload-dropzone-new:hover {
    border-color: var(--teal);
    background: rgba(27, 94, 120, .03)
}

/* ─── Timeline ─── */
.timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-light)
}

.timeline-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px
}

.timeline-count {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg);
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 600
}

.comment-item {
    display: flex;
    gap: 14px;
    padding: 18px 0
}

.comment-item+.comment-item {
    border-top: 1px solid var(--border-light)
}

.comment-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    box-shadow: var(--shadow-xs)
}

.comment-avatar.support {
    background: linear-gradient(135deg, var(--teal), var(--deep-blue))
}

.comment-avatar.user {
    background: linear-gradient(135deg, var(--deep-blue), var(--navy))
}

.comment-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px
}

.comment-author {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary)
}

.comment-time {
    font-size: 11px;
    color: var(--text-muted)
}

.comment-bubble {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.65;
    padding: 12px 16px;
    border-radius: 10px
}

.comment-bubble.support {
    background: linear-gradient(135deg, rgba(27, 94, 120, .06), rgba(14, 58, 92, .03));
    border-left: 3px solid var(--teal)
}

.comment-bubble.user {
    background: var(--bg-subtle);
    border-left: 3px solid var(--steel)
}

.comment-empty {
    text-align: center;
    padding: 48px 0;
    color: var(--text-muted);
    font-size: 14px
}

.comment-form {
    border-top: 1px solid var(--border-light);
    padding-top: 18px;
    margin-top: 20px
}

.comment-form-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: .04em
}

.comment-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px
}

/* ─── Profile ─── */
.profile-description {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 28px
}

.profile-description strong {
    color: var(--text-primary)
}

.profile-section-title {
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light)
}

.save-msg {
    margin-left: 16px;
    font-size: 13px;
    color: var(--success);
    font-weight: 600;
    display: none
}

.save-msg.show {
    display: inline
}

/* ─── Success ─── */
.success-wrap {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px
}

.success-card {
    padding: 56px;
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
    box-shadow: var(--shadow-lg)
}

.success-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E7F6ED, #D4F0DD);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    box-shadow: 0 4px 16px rgba(15, 123, 63, .15)
}

.success-title {
    font-family: var(--font-heading);
    font-size: 22px;
    color: var(--text-primary);
    margin-bottom: 10px
}

.success-text {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 28px;
    line-height: 1.6
}

/* ─── Responsive ─── */
@media(max-width:1024px) {
    .charts-grid {
        grid-template-columns: 1fr
    }

    .case-detail-grid {
        grid-template-columns: 1fr
    }

    .case-detail-header {
        flex-direction: column;
        gap: 16px
    }

    .form-row {
        grid-template-columns: 1fr
    }

    .stats-row {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:768px) {
    /* .header {
        padding: 0 16px
    } */

    .page-wrap {
        padding: 20px 16px
    }

    .nav-btn span {
        display: none
    }

    .cases-actions {
        flex-wrap: wrap
    }

    .cases-search {
        width: 160px
    }

    .stats-row {
        grid-template-columns: 1fr
    }

    .signin-body {
        padding: 28px 24px
    }

    .pager {
        flex-direction: column;
        align-items: stretch;
        text-align: center
    }
}

/* New Case page background */
#page-newcase {
  background: var(--bg);
}

/* Remove container padding constraint */
#page-newcase .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Control actual content width */
#page-newcase .page-wrap {
  max-width: 920px;   /* matches reference */
  margin: 0 auto;
  padding: 32px 36px;
}






/* =====================================================
   POWER PAGES LIST – PAGINATION (REFERENCE STYLE)
   ===================================================== */

/* Container */
.entitylist-paging {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: #F8FAFC;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(11, 31, 51, 0.06);
  margin-top: 16px;
}

/* "Showing 1–5 of X cases" */
.entitylist-summary {
  font-size: 13px;
  color: #64748B;
  font-weight: 500;
}

/* Page size dropdown */
.entitylist-pagesize select {
  border-radius: 10px;
  padding: 6px 10px;
  border: 1px solid #E2E8F0;
  font-size: 13px;
  background-color: #FFFFFF;
}

/* Pagination wrapper */
.entitylist-paging .pagination {
  display: flex;
  gap: 8px;
  margin: 0;
}

/* Page buttons */
.entitylist-paging .pagination > li > a,
.entitylist-paging .pagination > li > span {
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 13px;
  color: #0B1F33;
  background: #FFFFFF;
  transition: all 0.2s ease;
}

/* Hover */
.entitylist-paging .pagination > li > a:hover {
  background: #EEF2F7;
}

/* Active page (blue pill) */
.entitylist-paging .pagination > .active > a,
.entitylist-paging .pagination > .active > span {
  background: #0B1F33 !important;
  color: #FFFFFF !important;
  border-color: #0B1F33;
  font-weight: 600;
}

/* Disabled arrows */
.entitylist-paging .pagination > .disabled > span,
.entitylist-paging .pagination > .disabled > a {
  color: #CBD5E1;
  background: #F1F5F9;
  cursor: not-allowed;
}

/* Arrow buttons */
.entitylist-paging .pagination > li:first-child > a,
.entitylist-paging .pagination > li:last-child > a {
  font-weight: 600;
}







/* =====================================================
   POWER PAGES SIGN-IN PAGE – FINAL FIX
   Based on ACTUAL DOM (Confirmed)
===================================================== */

/* Detect SignIn page by form action */
body:has(form[action^="/Account/Login/ExternalLogin"]) {
    background: radial-gradient(circle at top, #eef3f7, #dfe7ee);
    min-height: 100vh;
}

/* Center column */
body:has(form[action^="/Account/Login/ExternalLogin"]) #mainContent {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 120px);
}

/* Override Bootstrap column */
body:has(form[action^="/Account/Login/ExternalLogin"]) .col-md-6 {
    max-width: 420px;
    width: 100%;
    float: none;
}

/* Card UI (signin-card) */
body:has(form[action^="/Account/Login/ExternalLogin"]) form {
    background: #ffffff;
    border-radius: 16px;
    padding: 40px 48px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
    animation: scaleIn 0.35s ease;
}

/* Card animation */
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

/* Heading (subtitle) */
body:has(form[action^="/Account/Login/ExternalLogin"]) .login-heading-section {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: #4a5a6a;
    margin-bottom: 24px;
}

/* Hide validation block when empty */
body:has(form[action^="/Account/Login/ExternalLogin"]) 
#loginValidationSummary:empty {
    display: none;
}

/* Login button – MATCH REFERENCE */
body:has(form[action^="/Account/Login/ExternalLogin"]) 
button.btn-primary {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 12px;
    background: linear-gradient(135deg, #0a2a43, #0e4c6d);
    border: none;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(14, 76, 109, 0.3);
    transition: all 0.25s ease;
}

/* Shield icon (SVG, reference match) */
body:has(form[action^="/Account/Login/ExternalLogin"]) 
button.btn-primary::before {
    content: "";
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

/* Hover */
body:has(form[action^="/Account/Login/ExternalLogin"]) 
button.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(14, 76, 109, 0.4);
}

/* Remove extra spacing */
body:has(form[action^="/Account/Login/ExternalLogin"]) hr {
    display: none;
}






/* =====================================================
   SIGN-IN PAGE – FINAL POLISH
   Font + Width adjustments (BW Gradual only)
===================================================== */

/* Increase card width */
body:has(form[action^="/Account/Login/ExternalLogin"]) form {
    max-width: 520px;          /* was ~420px */
}

/* Use BW Gradual everywhere on SignIn page */
body:has(form[action^="/Account/Login/ExternalLogin"]),
body:has(form[action^="/Account/Login/ExternalLogin"]) * {
    font-family: 'BW Gradual', sans-serif !important;
}

/* Make subtitle text bolder */
body:has(form[action^="/Account/Login/ExternalLogin"]) 
.login-heading-section {
    font-weight: 500;          /* Medium */
    font-size: 15px;
    letter-spacing: 0.2px;
}

/* Make button text bolder */
body:has(form[action^="/Account/Login/ExternalLogin"]) 
button.btn-primary {
    font-weight: 600;          /* Between medium & bold */
    font-size: 15px;
}

/* Optional: stronger emphasis on hover */
body:has(form[action^="/Account/Login/ExternalLogin"]) 
button.btn-primary:hover {
    font-weight: 700;
}

body:has(form[action^="/Account/Login/ExternalLogin"])
hr {
    border: none;
    height: 2px;              /* thickness */
    background-color: #000;  /* black */
    opacity: 0.9;
    margin: 20px 0 28px;
}
/* =====================================================
   Sign-in divider – FORCE thickness, width & color
===================================================== */

body:has(form[action^="/Account/Login/ExternalLogin"])
.login-heading-section {
    position: relative;
    padding-bottom: 18px;
    margin-bottom: 26px;
}

/* Custom divider line */
body:has(form[action^="/Account/Login/ExternalLogin"])
.login-heading-section::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 130%;               /* LENGTH */
    height: 2px;              /* THICKNESS */
    background-color: #000;   /* PURE BLACK */
}





/* =====================================================
   Sign-in heading – PURE BLACK text
===================================================== */

body:has(form[action^="/Account/Login/ExternalLogin"])
.login-heading-section {
    color: #000 !important;
    opacity: 1 !important;
    font-weight: 600;
}

/* Hide default tabs */
body:has(form[action^="/Account/Login/ExternalLogin"])
.nav.nav-tabs.nav-account {
    display: none !important;
}

/* Remove the top spacing after hiding the tabs */
body:has(form[action^="/Account/Login/ExternalLogin"])
.page-content {
    padding-top: 0 !important;
}

body:has(form[action^="/Account/Login/ExternalLogin"])
.wrapper-body {
    padding-top: 0 !important;
}