/* =========================================================
   SENTINEL DESIGN SYSTEM V2
   Purple · White · Silver · Gold · Black
   ========================================================= */

:root {
    --sv2-purple-950: #180A2E;
    --sv2-purple-900: #25103F;
    --sv2-purple-850: #321451;
    --sv2-purple-800: #421A68;
    --sv2-purple-700: #582783;
    --sv2-purple-600: #6E3A96;
    --sv2-purple-500: #8150A8;
    --sv2-purple-300: #C7ACDA;
    --sv2-purple-100: #F0E8F6;

    --sv2-gold-700: #9F761A;
    --sv2-gold-600: #B98A28;
    --sv2-gold-500: #C89B3C;
    --sv2-gold-400: #D9B55F;
    --sv2-gold-300: #E6CC8A;
    --sv2-gold-100: #F7EFD8;

    --sv2-white: #FFFFFF;
    --sv2-ivory: #FCFBF8;
    --sv2-page: #F7F5F9;

    --sv2-silver-700: #667085;
    --sv2-silver-600: #7C8798;
    --sv2-silver-500: #98A2B3;
    --sv2-silver-400: #B7C0CC;
    --sv2-silver-300: #D0D5DD;
    --sv2-silver-200: #E4E7EC;
    --sv2-silver-100: #F2F4F7;

    --sv2-black: #111111;
    --sv2-text: #24182E;
    --sv2-text-soft: #51475A;

    --sv2-critical: #B42318;
    --sv2-warning: #A96908;
    --sv2-success: #247A48;

    --sv2-border: #E1DCE7;

    --sv2-shadow:
        0 10px 28px rgba(37, 16, 63, 0.09);

    --sv2-shadow-strong:
        0 16px 42px rgba(24, 10, 46, 0.18);
}

/* =========================================================
   APPLICATION FOUNDATION
   ========================================================= */

html,
body {
    min-height: 100%;
    background: var(--sv2-page) !important;
    color: var(--sv2-text) !important;
}

body {
    margin: 0;
}

main,
.content,
.main-content,
.page-content,
.dashboard,
.dashboard-content,
.workspace,
.app-content {
    background:
        linear-gradient(
            180deg,
            #FBFAFC 0%,
            var(--sv2-page) 100%
        ) !important;

    color: var(--sv2-text) !important;
}

main h1,
main h2,
main h3,
main h4,
.content h1,
.content h2,
.content h3,
.content h4,
.page-title,
.dashboard-title,
.section-title {
    color: var(--sv2-purple-900) !important;
    -webkit-text-fill-color:
        var(--sv2-purple-900) !important;
}

main p,
main li,
.content p,
.content li,
.page-content p,
.page-content li {
    color: var(--sv2-text-soft) !important;
    -webkit-text-fill-color:
        var(--sv2-text-soft) !important;
}

/* =========================================================
   UNIVERSAL ORGANIZATION HEADER
   ========================================================= */

.sv2-header {
    position: sticky;
    top: 0;
    z-index: 10000;

    display: grid;
    grid-template-columns:
        minmax(280px, 1fr)
        minmax(260px, auto);

    align-items: center;
    gap: 24px;

    min-height: 92px;
    padding: 12px 28px;

    background:
        rgba(255, 255, 255, 0.985) !important;

    border-bottom:
        1px solid var(--sv2-silver-300) !important;

    box-shadow:
        0 7px 24px rgba(37, 16, 63, 0.09) !important;
}

.sv2-header__organization {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.sv2-header__logo {
    display: block;
    width: auto;
    height: 68px;
    max-width: 580px;
    object-fit: contain;
    object-position: left center;
}

.sv2-header__greeting {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;

    text-align: right;
}

.sv2-header__greeting-copy {
    min-width: 0;
}

.sv2-header__hello {
    display: block;

    color: var(--sv2-purple-900) !important;
    -webkit-text-fill-color:
        var(--sv2-purple-900) !important;

    font-size: 1.18rem;
    font-weight: 850;
    line-height: 1.2;
}

.sv2-header__welcome {
    display: block;
    margin-top: 3px;

    color: var(--sv2-silver-700) !important;
    -webkit-text-fill-color:
        var(--sv2-silver-700) !important;

    font-size: 0.82rem;
    font-weight: 600;
}

.sv2-header__powered {
    display: block;
    margin-top: 7px;

    color: var(--sv2-silver-700) !important;
    -webkit-text-fill-color:
        var(--sv2-silver-700) !important;

    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.sv2-header__powered strong {
    color: var(--sv2-gold-600) !important;
    -webkit-text-fill-color:
        var(--sv2-gold-600) !important;
}

.sv2-header__avatar {
    display: grid;
    place-items: center;

    width: 47px;
    height: 47px;
    flex: 0 0 47px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            var(--sv2-purple-900),
            var(--sv2-purple-700)
        ) !important;

    border:
        2px solid var(--sv2-gold-500) !important;

    color: var(--sv2-white) !important;
    -webkit-text-fill-color:
        var(--sv2-white) !important;

    font-weight: 900;
}

/* Remove duplicate legacy top branding */

.demo-ready,
.demo-ready-badge,
.demo-badge,
.demo-mode-badge,
.badge-demo,
.demo-environment-badge,
[data-demo-badge],
[data-environment="demo"],
.sentinel-organization-badge,
.sentinel-mini-brand,
.sentinel-tenant-brand-lockup,
#sentinelTenantBrandLockup {
    display: none !important;
    visibility: hidden !important;
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar,
.app-sidebar,
.sidebar-nav,
aside.sidebar,
.navigation-sidebar,
.left-navigation {
    background:
        linear-gradient(
            180deg,
            var(--sv2-purple-950) 0%,
            var(--sv2-purple-850) 55%,
            var(--sv2-purple-900) 100%
        ) !important;

    color: var(--sv2-white) !important;

    border-right:
        1px solid rgba(217, 181, 95, 0.42) !important;
}

.sidebar *,
.app-sidebar *,
.sidebar-nav *,
.navigation-sidebar * {
    color: var(--sv2-white);
}

.sidebar a,
.sidebar button,
.sidebar .nav-link,
.sidebar .nav-section-toggle,
.app-sidebar a,
.app-sidebar button {
    color: var(--sv2-white) !important;
    -webkit-text-fill-color:
        var(--sv2-white) !important;
}

.sidebar .nav-section-title,
.sidebar .section-label,
.sidebar .nav-category,
.app-sidebar .nav-section-title {
    color: var(--sv2-gold-400) !important;
    -webkit-text-fill-color:
        var(--sv2-gold-400) !important;
}

.sidebar svg,
.sidebar i,
.sidebar .icon,
.app-sidebar svg,
.app-sidebar i {
    color: var(--sv2-gold-400) !important;
}

.sidebar a:hover,
.sidebar button:hover,
.sidebar .nav-link:hover,
.sidebar a.active,
.sidebar .nav-link.active {
    background:
        linear-gradient(
            90deg,
            rgba(217, 181, 95, 0.24),
            rgba(255, 255, 255, 0.08)
        ) !important;

    border-left:
        4px solid var(--sv2-gold-400) !important;
}

.sidebar a:hover *,
.sidebar a.active *,
.sidebar .nav-link:hover *,
.sidebar .nav-link.active * {
    color: var(--sv2-gold-300) !important;
    -webkit-text-fill-color:
        var(--sv2-gold-300) !important;
}

/* =========================================================
   DARK PURPLE OR BLACK SURFACES
   ========================================================= */

.sv2-dark-surface,
.sentinel-executive-hero,
.executive-hero,
.executive-banner,
.command-center-hero,
.dashboard-hero,
.module-hero,
.page-hero,
.broker-dashboard-hero,
.lease-management-hero,
.tenant-management-hero,
.intelligence-banner,
.hero-dark,
.banner-dark,
.purple-banner,
.dark-banner {
    background:
        radial-gradient(
            circle at 88% 14%,
            rgba(217, 181, 95, 0.18),
            transparent 30%
        ),
        linear-gradient(
            125deg,
            var(--sv2-purple-950) 0%,
            var(--sv2-purple-800) 62%,
            var(--sv2-purple-700) 100%
        ) !important;

    color: var(--sv2-white) !important;

    border:
        1px solid rgba(217, 181, 95, 0.65) !important;

    box-shadow: var(--sv2-shadow-strong) !important;
}

.sv2-dark-surface h1,
.sv2-dark-surface h2,
.sv2-dark-surface h3,
.sv2-dark-surface h4,
.sv2-dark-surface h5,
.sv2-dark-surface h6,
.sv2-dark-surface .title,
.sv2-dark-surface .page-title,
.sv2-dark-surface .section-title,
.sentinel-executive-hero h1,
.sentinel-executive-hero h2,
.executive-banner h1,
.executive-banner h2 {
    color: var(--sv2-white) !important;
    -webkit-text-fill-color:
        var(--sv2-white) !important;

    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

.sv2-dark-surface p,
.sv2-dark-surface li,
.sv2-dark-surface .subtitle,
.sv2-dark-surface .description,
.sv2-dark-surface .small-note,
.sv2-dark-surface .caption,
.sentinel-executive-hero p,
.executive-banner p {
    color: #EEEAF2 !important;
    -webkit-text-fill-color: #EEEAF2 !important;

    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

.sv2-dark-surface .eyebrow,
.sv2-dark-surface .kicker,
.sv2-dark-surface .brand-label,
.sv2-dark-surface .module-label,
.sv2-dark-surface .overline,
.sv2-dark-surface .section-label {
    color: var(--sv2-gold-400) !important;
    -webkit-text-fill-color:
        var(--sv2-gold-400) !important;
}

/* =========================================================
   WHITE CARDS AND KPI DATA
   ========================================================= */

.card,
.panel,
.metric-card,
.kpi-card,
.dashboard-card,
.summary-card,
.health-card,
.breakdown-card,
.forecast-card,
.trend-card,
.widget,
.module-card,
.content-card {
    background: var(--sv2-white) !important;
    color: var(--sv2-text) !important;

    border:
        1px solid var(--sv2-border) !important;

    border-radius: 17px !important;

    box-shadow: var(--sv2-shadow) !important;
}

.card h1,
.card h2,
.card h3,
.card h4,
.panel h1,
.panel h2,
.panel h3,
.panel h4,
.metric-card h1,
.metric-card h2,
.metric-card h3,
.kpi-card h1,
.kpi-card h2,
.kpi-card h3,
.widget h2,
.widget h3 {
    color: var(--sv2-purple-900) !important;
    -webkit-text-fill-color:
        var(--sv2-purple-900) !important;

    opacity: 1 !important;
}

.card p,
.card li,
.panel p,
.panel li,
.metric-card p,
.kpi-card p,
.widget p,
.card .description,
.panel .description {
    color: var(--sv2-text-soft) !important;
    -webkit-text-fill-color:
        var(--sv2-text-soft) !important;

    opacity: 1 !important;
}

.card .label,
.metric-card .label,
.kpi-card .label,
.metric-label,
.kpi-label {
    color: var(--sv2-purple-700) !important;
    -webkit-text-fill-color:
        var(--sv2-purple-700) !important;

    opacity: 1 !important;
    font-weight: 800 !important;
}

.card .value,
.metric-card .value,
.kpi-card .value,
.metric-value,
.kpi-value,
.score,
.percentage,
.stat-value,
.number,
.count {
    color: var(--sv2-purple-900) !important;
    -webkit-text-fill-color:
        var(--sv2-purple-900) !important;

    opacity: 1 !important;
    visibility: visible !important;

    font-weight: 900 !important;
}

/* =========================================================
   BUTTONS
   ========================================================= */

button,
.btn,
.button,
input[type="submit"],
input[type="button"] {
    background:
        linear-gradient(
            135deg,
            var(--sv2-purple-850),
            var(--sv2-purple-700)
        ) !important;

    color: var(--sv2-white) !important;
    -webkit-text-fill-color:
        var(--sv2-white) !important;

    border:
        1px solid var(--sv2-purple-700) !important;

    border-radius: 11px !important;
    font-weight: 850 !important;
}

button *,
.btn *,
.button * {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

button:hover,
.btn:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background:
        linear-gradient(
            135deg,
            var(--sv2-gold-500),
            var(--sv2-gold-400)
        ) !important;

    color: var(--sv2-black) !important;
    -webkit-text-fill-color:
        var(--sv2-black) !important;

    border-color: var(--sv2-gold-600) !important;
}

/* =========================================================
   LINKS
   ========================================================= */

main a,
.content a,
.card a,
.panel a,
.page-content a {
    color: var(--sv2-purple-900) !important;
    -webkit-text-fill-color:
        var(--sv2-purple-900) !important;

    font-weight: 800 !important;
}

main a:hover,
.content a:hover,
.card a:hover,
.panel a:hover {
    color: var(--sv2-gold-700) !important;
    -webkit-text-fill-color:
        var(--sv2-gold-700) !important;
}

.sv2-dark-surface a:not(.btn):not(.button) {
    color: var(--sv2-gold-300) !important;
    -webkit-text-fill-color:
        var(--sv2-gold-300) !important;
}

/* =========================================================
   SENTINELRE BRAND WORDING
   ========================================================= */

.sv2-sentinel-brand-text {
    color: var(--sv2-gold-400) !important;
    -webkit-text-fill-color:
        var(--sv2-gold-400) !important;

    font-weight: 900 !important;
}

/* =========================================================
   TABLES
   ========================================================= */

table {
    background: var(--sv2-white) !important;
    color: var(--sv2-text) !important;
}

thead,
table thead tr {
    background:
        linear-gradient(
            90deg,
            var(--sv2-purple-950),
            var(--sv2-purple-800)
        ) !important;
}

th {
    background: transparent !important;

    color: var(--sv2-white) !important;
    -webkit-text-fill-color:
        var(--sv2-white) !important;
}

td {
    color: var(--sv2-text) !important;
    -webkit-text-fill-color:
        var(--sv2-text) !important;

    border-bottom:
        1px solid var(--sv2-silver-200) !important;
}

tbody tr:nth-child(even) {
    background: #FAF8FC !important;
}

tbody tr:hover {
    background: var(--sv2-purple-100) !important;
}

/* =========================================================
   FORMS
   ========================================================= */

input,
select,
textarea {
    background: var(--sv2-white) !important;
    color: var(--sv2-black) !important;
    -webkit-text-fill-color:
        var(--sv2-black) !important;

    border:
        1px solid var(--sv2-silver-400) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--sv2-silver-600) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--sv2-purple-600) !important;

    box-shadow:
        0 0 0 3px rgba(110, 58, 150, 0.16) !important;

    outline: none !important;
}

form label {
    color: var(--sv2-purple-900) !important;
    -webkit-text-fill-color:
        var(--sv2-purple-900) !important;
}

/* =========================================================
   PROGRESS BARS
   ========================================================= */

.progress,
.progress-track,
.progress-container {
    background: var(--sv2-silver-200) !important;
    border-radius: 999px !important;
}

.progress span,
.progress-bar,
.progress-fill {
    background:
        linear-gradient(
            90deg,
            var(--sv2-purple-700),
            var(--sv2-gold-500)
        ) !important;

    border-radius: 999px !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .sv2-header {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 10px 16px;
    }

    .sv2-header__greeting {
        justify-content: flex-start;
        text-align: left;
    }

    .sv2-header__logo {
        height: 54px;
        max-width: 100%;
    }
}