/* ============================================================================
   Velo Design System — Kendo Fluent 2 Compliant Stylesheet
   Framework: Blazor WebAssembly + Telerik UI v14.0.0 + Kendo Fluent Theme

   Token system:
   - Colors: --kendo-color-* (primary, success, warning, error, info, border, surface)
   - Spacing: --kendo-spacing-* (1=4px, 2=8px, 3=12px, 4=16px, 6=24px, 8=32px)
   - Radii: --kendo-border-radius-* (xs, sm, md, lg)
   - Elevation: --kendo-elevation-* (1, 2, 3, 4)
   - Typography: Lato via --kendo-font-family, Fluent 2 type ramp
   - App-level: --text-color, --text-light-color (no Kendo equivalent)
   ============================================================================ */

/* ============================================================================
   1. GAP BRAND COLOR TOKENS
   ============================================================================ */

:root {
    --gap-blue: #006489;
    --dark-charcoal: #453F3E;
    --cool-gray: #777373;
    --brand-yellow: #FEBD12;
    --medium-blue: #5497ae;
    --soft-blue-gray: #a5cad6;
    --light-ice-blue: #b6dae3;
    --teal-cyan: #18C1E5;
    --emerald-green: #43B686;
    --leaf-green: #64BC50;
    --coral-red: #E54360;
    --purple: #80468C;

    --coral-accent: #F37467;
    --dark-teal: #0D7FA9;
    --off-white: #F7F5F5;
    --navy: #132347;
    --pale-blue: #EBF2FA;

    --primary-color: #006489;
    --secondary-color: #5497ae;
    --success-color: #43B686;
    --warning-color: #FEBD12;
    --danger-color: #E54360;
    --info-color: #18C1E5;
    --bg-color: #ffffff;
    --surface-color: #F5F3F7;
    --text-color: #453F3E;
    --text-light-color: #777373;
    --border-color: #a5cad6;

    --kendo-color-primary: #006489;
    --kendo-color-primary-hover: #0D7FA9;
    --kendo-color-primary-active: #5497AE;
    --kendo-color-primary-subtle: #EBF2FA;
    --kendo-color-primary-subtle-hover: #B6DAE3;
    --kendo-color-primary-subtle-active: #A5CAD6;
    --kendo-color-primary-emphasis: #A5CAD6;
    --kendo-color-tertiary: #80468C;
    --kendo-color-tertiary-hover: #6B3A76;
    --kendo-color-tertiary-subtle: #F3EDF4;
    --kendo-color-info: #18C1E5;
    --kendo-color-info-hover: #14A8C8;
    --kendo-color-info-subtle: #E6F8FC;
    --kendo-color-success: #43B686;
    --kendo-color-success-hover: #64BC50;
    --kendo-color-success-subtle: #E8F7EF;
    --kendo-color-warning: #FEBD12;
    --kendo-color-warning-hover: #E5A90F;
    --kendo-color-warning-subtle: #FEF6E2;
    --kendo-color-error: #E54360;
    --kendo-color-error-hover: #F37467;
    --kendo-color-error-subtle: #FDECEF;
    --kendo-font-family: 'Lato', 'Segoe UI', Verdana, sans-serif;
    --kendo-font-size: 14px;
}

/* ============================================================================
   2. ACCESSIBILITY UTILITIES
   ============================================================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================================
   3. CSS RESET & BASE STYLES
   ============================================================================ */

html {
    scroll-behavior: smooth;
}

*:not([class*="k-"]) {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size);
    line-height: 1.5;
    color: var(--text-color);
    background-color: var(--bg-color);
    margin: 0;
    padding: 0;
}

#app {
    height: 100%;
    width: 100%;
}

/* ============================================================================
   3. TYPOGRAPHY — Fluent 2 Type Ramp
   h1 = Title1 (28px/600), h2 = Title2 (24px/600)
   h3 = Title3 (20px/600), h4 = Subtitle2 (14px/600)
   p/body = Body1 (14px/400), label = Caption1 (12px/600)
   ============================================================================ */

h1:not([class*="k-"]) {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--text-color, #453F3E);
    margin: 0 0 16px 0;
    padding: 0;
}

h2:not([class*="k-"]) {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-color, #453F3E);
    margin: 0 0 16px 0;
    padding: 0;
}

h3:not([class*="k-"]) {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-color, #453F3E);
    margin: 0 0 12px 0;
    padding: 0;
}

h4:not([class*="k-"]) {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-color, #453F3E);
    margin: 0 0 8px 0;
    padding: 0;
    border-bottom: 1px solid var(--kendo-color-border, #a5cad6);
    padding-bottom: 12px;
}

p:not([class*="k-"]) {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    margin: 0 0 16px 0;
    padding: 0;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

/* ============================================================================
   4. FORMS & INPUTS
   ============================================================================ */

input:not([class*="k-"]),
textarea:not([class*="k-"]),
select:not([class*="k-"]) {
    background-color: var(--kendo-color-base-background, #ffffff);
    color: var(--text-color, #453F3E);
    border: 1px solid var(--kendo-color-border, #a5cad6);
    border-radius: var(--kendo-border-radius-sm, 4px);
    padding: var(--kendo-spacing-2, 8px) var(--kendo-spacing-3, 12px);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

input:not([class*="k-"]):focus,
textarea:not([class*="k-"]):focus,
select:not([class*="k-"]):focus {
    outline: none;
    border-color: var(--kendo-color-primary);
    box-shadow: 0 0 0 2px var(--kendo-color-primary-subtle);
}

input:not([class*="k-"]):disabled,
textarea:not([class*="k-"]):disabled,
select:not([class*="k-"]):disabled {
    background-color: var(--surface-color);
    cursor: not-allowed;
}

input:not([class*="k-"])::placeholder,
textarea:not([class*="k-"])::placeholder {
    color: var(--text-light-color, #777373);
}

label:not([class*="k-"]) {
    display: block;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-color, #453F3E);
    margin-bottom: 8px;
}

.k-input,
.k-textbox,
.k-picker {
    background-color: #ffffff;
}

/* ============================================================================
   5. BUTTONS — Non-Telerik only
   ============================================================================ */

button:not(.k-button) {
    font-family: inherit;
    font-size: var(--kendo-font-size);
    padding: var(--kendo-spacing-2, 8px) var(--kendo-spacing-4, 16px);
    border: 1px solid var(--border-color);
    border-radius: var(--kendo-border-radius-sm, 4px);
    background-color: var(--bg-color);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

button:not(.k-button):hover {
    background-color: var(--surface-color);
    border-color: var(--kendo-color-primary);
}

button:not(.k-button):active {
    background-color: var(--kendo-color-primary-subtle, #e6f0f5);
}

button:not(.k-button):focus {
    outline: 2px solid var(--kendo-color-primary);
    outline-offset: 2px;
}

button:not(.k-button):disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

button.btn-primary {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

button.btn-primary:hover {
    background-color: var(--secondary-color);
}

/* Focus styles for all interactive elements */
a:focus,
[tabindex]:focus,
[role="button"]:focus {
    outline: 2px solid var(--kendo-color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

@media (prefers-contrast: more) {
    button:not(.k-button):focus,
    a:focus,
    input:not([class*="k-"]):focus,
    [role="button"]:focus,
    [tabindex]:focus {
        outline-width: 3px;
    }
}


/* ============================================================================
   6. SPACING UTILITIES — Kendo Fluent spacing scale
   ============================================================================ */

.gap-xs { gap: var(--kendo-spacing-1, 4px); }
.gap-sm { gap: var(--kendo-spacing-2, 8px); }
.gap-md { gap: var(--kendo-spacing-4, 16px); }
.gap-lg { gap: var(--kendo-spacing-6, 24px); }
.gap-xl { gap: var(--kendo-spacing-8, 32px); }

.p-xs { padding: var(--kendo-spacing-1, 4px); }
.p-sm { padding: var(--kendo-spacing-2, 8px); }
.p-md { padding: var(--kendo-spacing-4, 16px); }
.p-lg { padding: var(--kendo-spacing-6, 24px); }
.p-xl { padding: var(--kendo-spacing-8, 32px); }

.m-xs { margin: var(--kendo-spacing-1, 4px); }
.m-sm { margin: var(--kendo-spacing-2, 8px); }
.m-md { margin: var(--kendo-spacing-4, 16px); }
.m-lg { margin: var(--kendo-spacing-6, 24px); }
.m-xl { margin: var(--kendo-spacing-8, 32px); }

.mt-md { margin-top: var(--kendo-spacing-4, 16px); }
.mb-md { margin-bottom: var(--kendo-spacing-4, 16px); }

/* ============================================================================
   7. GRID UTILITIES
   ============================================================================ */

.grid {
    display: grid;
    gap: var(--kendo-spacing-4, 16px);
}

.grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--kendo-spacing-4, 16px);
}

.grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--kendo-spacing-4, 16px);
}

.grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--kendo-spacing-4, 16px);
}

/* ============================================================================
   8. APP SHELL LAYOUT
   ============================================================================ */

.app-container {
    display: flex;
    width: 100%;
    height: 100vh;
    background-color: var(--kendo-color-surface, #F5F3F7);
    overflow: hidden;
}

.app-sidebar {
    width: 240px;
    background-color: var(--kendo-color-primary, #006489);
    color: white;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 100;
    transition: width 0.25s ease;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--kendo-spacing-2, 8px);
    height: 48px;
    padding: 0 var(--kendo-spacing-4, 16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

.sidebar-logo {
    height: 32px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}

.sidebar-mark {
    height: 28px;
    width: 28px;
    flex-shrink: 0;
}

.sidebar-title {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.nav-menu {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--kendo-spacing-3, 12px) var(--kendo-spacing-4, 16px);
    gap: var(--kendo-spacing-1, 4px);
    list-style: none;
    margin: 0;
}

button.sidebar-collapse-btn {
    height: 42px;
    padding: var(--kendo-spacing-3, 12px) var(--kendo-spacing-4, 16px);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    text-align: center;
    color: #ffffff;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--kendo-color-primary-hover, #0D7FA9);
    border: none;
}

button.sidebar-collapse-btn:hover {
    color: #ffffff;
    background-color: var(--kendo-color-primary-active, #5497AE);
}

button.sidebar-collapse-btn:focus {
    outline: none;
}

.sidebar-collapsed .app-sidebar {
    width: 56px;
    overflow: hidden;
}

.sidebar-collapsed .sidebar-header {
    justify-content: center;
    padding: 0;
}

.sidebar-collapsed .nav-menu {
    padding: var(--kendo-spacing-3, 12px) 6px;
}

.sidebar-collapsed .nav-link {
    justify-content: center;
    padding: var(--kendo-spacing-2, 8px);
}

.sidebar-collapsed .nav-text {
    display: none;
}

.sidebar-overlay {
    display: none;
}

.app-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.app-header {
    height: 48px;
    min-height: 48px;
    background-color: var(--kendo-color-base-background, #ffffff);
    border-bottom: 1px solid var(--kendo-color-border, #a5cad6);
    padding: 0 var(--kendo-spacing-6, 24px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--kendo-spacing-4, 16px);
    z-index: 50;
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--kendo-spacing-2, 8px);
    min-width: 0;
}

.header-breadcrumb {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color, #453F3E);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--kendo-spacing-2, 8px);
}

.header-session-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-light-color, #777373);
    padding: 4px 10px;
    background-color: var(--kendo-color-surface, #F5F3F7);
    border-radius: var(--kendo-border-radius-sm, 4px);
    border: 1px solid var(--kendo-color-border, #a5cad6);
}

.header-divider {
    width: 1px;
    height: 20px;
    background-color: var(--kendo-color-border, #a5cad6);
    margin: 0 4px;
}

.header-username {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color, #453F3E);
}

.mobile-menu-btn {
    display: none;
}

.app-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--kendo-spacing-6, 24px);
    background-color: var(--kendo-color-base-background, #ffffff);
}

.app-footer {
    padding: var(--kendo-spacing-3, 12px) var(--kendo-spacing-6, 24px);
    border-top: 1px solid var(--kendo-color-border, #a5cad6);
    background-color: var(--kendo-color-base-background, #ffffff);
    font-size: 12px;
    color: var(--text-light-color, #777373);
    text-align: center;
    flex-shrink: 0;
}

.app-footer p {
    margin: 0;
}

.page-title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--text-color, #453F3E);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================================
   9. NAVIGATION
   ============================================================================ */

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--kendo-spacing-2, 8px);
    padding: var(--kendo-spacing-2, 8px) var(--kendo-spacing-3, 12px);
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    border-radius: var(--kendo-border-radius-sm, 4px);
    transition: background-color 0.15s ease, color 0.15s ease;
    font-size: 13px;
    position: relative;
}

.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    text-decoration: none;
}

.nav-link.active {
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
    font-weight: 600;
}

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

.nav-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 2px;
    background-color: white;
}

/* ============================================================================
   10. CARD STYLES — Fluent 2 elevation tokens
   ============================================================================ */

.card {
    background-color: var(--kendo-color-base-background, #ffffff);
    border: 1px solid var(--kendo-color-border, #a5cad6);
    border-radius: var(--kendo-border-radius-md, 4px);
    padding: var(--kendo-spacing-4, 16px);
    box-shadow: var(--kendo-elevation-1, 0 0.3px 0.9px rgba(0, 0, 0, 0.1), 0 1.6px 3.6px rgba(0, 0, 0, 0.13));
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.card:hover {
    box-shadow: var(--kendo-elevation-2, 0 0.6px 1.8px rgba(0, 0, 0, 0.1), 0 3.2px 7.2px rgba(0, 0, 0, 0.13));
    border-color: var(--kendo-color-primary, #006489);
}

.card-header {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: var(--kendo-spacing-3, 12px);
    color: var(--text-color, #453F3E);
}


/* ============================================================================
   11. BADGES & STATUS INDICATORS
   ============================================================================ */

.badge {
    display: inline-block;
    padding: var(--kendo-spacing-1, 4px) var(--kendo-spacing-2, 8px);
    border-radius: var(--kendo-border-radius-xs, 2px);
    font-size: 12px;
    font-weight: 600;
    background-color: var(--kendo-color-primary-subtle);
    color: var(--kendo-color-primary);
}

.badge-primary {
    background-color: var(--kendo-color-primary-subtle);
    color: var(--kendo-color-primary);
}

.badge-success {
    background-color: var(--kendo-color-success-subtle);
    color: var(--kendo-color-success);
}

.badge-warning {
    background-color: var(--kendo-color-warning-subtle);
    color: var(--kendo-color-warning);
}

.badge-error {
    background-color: var(--kendo-color-error-subtle);
    color: var(--kendo-color-error);
}

.badge-info {
    background-color: var(--kendo-color-info-subtle);
    color: var(--kendo-color-info);
}

.status-pending {
    background-color: var(--kendo-color-warning-subtle);
    color: var(--kendo-color-warning);
}

.status-active,
.status-synced,
.status-complete {
    background-color: var(--kendo-color-success-subtle);
    color: var(--kendo-color-success);
}

.status-syncing,
.status-analyzing,
.status-processing {
    background-color: var(--kendo-color-info-subtle);
    color: var(--kendo-color-info);
}

.status-failed,
.status-error,
.status-inactive {
    background-color: var(--kendo-color-error-subtle);
    color: var(--kendo-color-error);
}

.badge-neutral {
    background-color: #F0EDED;
    color: var(--cool-gray, #777373);
}

.status-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.card-accent-primary { border-left: 4px solid var(--kendo-color-primary); }
.card-accent-success { border-left: 4px solid var(--kendo-color-success); }
.card-accent-info { border-left: 4px solid var(--kendo-color-info); }
.card-accent-warning { border-left: 4px solid var(--kendo-color-warning); }
.card-accent-error { border-left: 4px solid var(--kendo-color-error); }

/* ============================================================================
   12. AUTH LAYOUT
   ============================================================================ */

.auth-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: var(--kendo-color-surface);
    padding: var(--kendo-spacing-4);
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background-color: var(--kendo-color-base-background);
    border-radius: var(--kendo-border-radius-md, 8px);
    box-shadow: var(--kendo-elevation-3, 0 4px 16px rgba(0, 0, 0, 0.12));
    overflow: hidden;
    border: 1px solid var(--kendo-color-border, #a5cad6);
}

.auth-header {
    background: linear-gradient(135deg, var(--kendo-color-primary), var(--kendo-color-primary-active));
    padding: var(--kendo-spacing-8, 32px) var(--kendo-spacing-6, 24px);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 140px;
}

.auth-logo {
    height: 70px;
    width: auto;
    max-width: 300px;
}

.auth-body {
    padding: var(--kendo-spacing-8, 32px) var(--kendo-spacing-6, 24px);
}

.auth-error {
    background-color: var(--kendo-color-error-subtle);
    color: var(--kendo-color-error);
    padding: var(--kendo-spacing-3, 12px);
    border-radius: var(--kendo-border-radius-sm, 4px);
    margin-bottom: var(--kendo-spacing-4, 16px);
    border-left: 4px solid var(--kendo-color-error);
}

button.sso-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--kendo-spacing-3, 12px);
    width: 100%;
    padding: var(--kendo-spacing-3, 12px) var(--kendo-spacing-4, 16px);
    background-color: #ffffff;
    border: 1px solid var(--kendo-color-border, #a5cad6);
    border-radius: var(--kendo-border-radius-sm, 4px);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color, #453F3E);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
}

button.sso-button:hover {
    background-color: var(--kendo-color-surface, #F5F3F7);
    border-color: var(--kendo-color-primary, #006489);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

button.sso-button:active {
    background-color: var(--kendo-color-primary-subtle, #e6f0f5);
}

button.sso-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--kendo-spacing-3, 12px);
    margin-bottom: 24px;
    color: var(--text-light-color, #777373);
    font-size: 12px;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--kendo-color-border, #a5cad6);
}

/* ============================================================================
   13. DIALOG / WINDOW
   ============================================================================ */

.dialog-window .k-window {
    border-radius: 8px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2), 0 32px 64px rgba(0, 0, 0, 0.24);
}

.dialog-window .k-window-content,
.dialog-window .k-window-titlebar {
    background-color: #ffffff;
}

.dialog-window .k-window-titlebar .k-window-title {
    font-size: 20px;
    font-weight: 600;
}

.dialog-window .k-window-content {
    max-height: 70vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.dialog-footer {
    display: flex;
    justify-content: flex-start;
    gap: var(--kendo-spacing-3, 12px);
    padding-top: var(--kendo-spacing-4, 16px);
    margin-top: var(--kendo-spacing-4, 16px);
    border-top: 1px solid var(--kendo-color-border, #a5cad6);
    flex-shrink: 0;
}

/* ============================================================================
   14. METRIC CARDS — Dashboard KPIs
   ============================================================================ */

.metric-card {
    background: var(--kendo-color-base-background, #ffffff);
    padding: var(--kendo-spacing-4, 16px);
    border-radius: var(--kendo-border-radius-md, 8px);
    box-shadow: var(--kendo-elevation-1, 0 1px 2px rgba(0, 0, 0, 0.06));
    border: 1px solid var(--kendo-color-border, #a5cad6);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.metric-card:hover {
    box-shadow: var(--kendo-elevation-2, 0 2px 8px rgba(0, 0, 0, 0.1));
    border-color: var(--kendo-color-primary, #006489);
}

.metric-label {
    font-size: 13px;
    color: var(--text-light-color, #777373);
    font-weight: 500;
    margin-bottom: 8px;
}

.metric-value {
    font-size: 28px;
    font-weight: 600;
    color: var(--text-color, #453F3E);
    margin-bottom: 8px;
}

.metric-change {
    font-size: 12px;
    font-weight: 500;
}

.metric-change.positive {
    color: var(--kendo-color-success, #43B686);
}

.metric-change.negative {
    color: var(--kendo-color-error, #E54360);
}

/* ============================================================================
   15. LANDING PAGE
   ============================================================================ */

.landing-appbar {
    background-color: var(--kendo-color-primary);
    color: white;
}

.landing-appbar ::deep .k-appbar-section {
    gap: var(--kendo-spacing-4);
}

.landing-nav {
    display: flex;
    gap: var(--kendo-spacing-6);
    align-items: center;
}

.landing-nav a {
    color: white;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: opacity 0.2s;
}

.landing-nav a:hover {
    opacity: 0.8;
    text-decoration: none;
}

.landing-actions {
    display: flex;
    gap: var(--kendo-spacing-2);
}

.landing-section {
    padding: 64px 40px;
}

.landing-section-alt {
    padding: 64px 40px;
    background-color: var(--kendo-color-surface);
}

.landing-section-title {
    text-align: center;
    margin-bottom: 48px;
    color: var(--text-color);
}

.section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--kendo-color-primary);
    margin-bottom: var(--kendo-spacing-3, 12px);
}

.section-icon-lg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--kendo-color-primary);
    margin-bottom: var(--kendo-spacing-3, 12px);
}

.hero-section {
    border-radius: var(--kendo-border-radius-md, 8px);
    padding: 40px 32px;
    position: relative;
    overflow: hidden;
}

.hero-section h1 {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 12px;
    color: inherit;
}

.hero-section p {
    font-size: 16px;
    line-height: 1.5;
    opacity: 0.9;
    color: inherit;
}

.landing-hero {
    background: linear-gradient(138deg, #089DD4 0%, #035982 51%, #002D4D 100%);
    color: white;
    padding: 80px 40px;
    text-align: center;
    border-radius: 0;
}

.hero-content {
    max-width: 700px;
    margin: 0 auto;
}

.feature-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--kendo-spacing-4);
    max-width: 1200px;
    margin: 0 auto;
}

.feature-card {
    padding: var(--kendo-spacing-6);
    text-align: center;
}

.feature-icon {
    font-size: 24px;
    margin-bottom: var(--kendo-spacing-3);
    color: var(--kendo-color-primary);
}

.compliance-badges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--kendo-spacing-4);
    max-width: 600px;
    margin: 0 auto;
}

.compliance-badge {
    text-align: center;
}

.footer-section {
    background-color: var(--kendo-color-inverse, #1a1a1a);
    color: white;
    padding: var(--kendo-spacing-8) var(--kendo-spacing-6);
    text-align: center;
}

.footer-section .footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--kendo-spacing-6);
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    margin-bottom: var(--kendo-spacing-6);
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: var(--kendo-spacing-2);
}

.footer-column h4 {
    color: white;
    border: none;
    padding: 0;
    margin: 0 0 var(--kendo-spacing-3) 0;
    font-size: 14px;
}

.footer-column a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 12px;
    transition: color 0.2s;
}

.footer-column a:hover {
    color: white;
    text-decoration: none;
}

.footer-copyright {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--kendo-spacing-4);
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

/* ============================================================================
   16. GAP BRAND PATTERNS — Derived from growthaccelerationpartners.com
   ============================================================================ */

button.btn-cta {
    background-color: var(--warning-color, #FEBD12);
    color: var(--text-color, #453F3E);
    border: none;
    border-radius: 6px;
    padding: 10px 24px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(10, 116, 185, 0.15), 0 6px 20px rgba(253, 183, 26, 0.45);
}

button.btn-cta:hover {
    background-color: var(--soft-blue-gray, #a5cad6);
    color: var(--text-color, #453F3E);
    box-shadow: 0 12px 30px rgba(10, 116, 185, 0.4), 0 8px 24px rgba(253, 183, 26, 0.35);
    transform: translateY(-1px);
}

button.btn-outline-gold {
    border: 2px solid var(--warning-color, #FEBD12);
    color: var(--warning-color, #FEBD12);
    background: transparent;
    border-radius: 30px;
    padding: 12px 28px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

button.btn-outline-gold:hover {
    color: var(--coral-accent, #F37467);
    background: #ffffff;
    border-color: var(--coral-accent, #F37467);
}

.gradient-hero {
    background: linear-gradient(138deg, #089DD4 0%, #035982 51%, #002D4D 100%);
    color: #ffffff;
}

.gradient-dark {
    background: linear-gradient(135deg, #453F3E 0%, #2a2626 100%);
    color: #ffffff;
}

.gradient-banner {
    background: linear-gradient(120deg, #006489 0%, #5497AE 60%, #18C1E5 100%);
    color: #ffffff;
}

.gradient-blue {
    background: linear-gradient(135deg, #006489 0%, #0a7fa3 100%);
    color: #ffffff;
}

.gradient-subtle {
    background: linear-gradient(135deg, #f5f7fa 0%, #e8f0f7 100%);
}

.app-footer-branded {
    padding: var(--kendo-spacing-3, 12px) var(--kendo-spacing-6, 24px);
}

.app-footer .footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--kendo-spacing-3, 12px);
}

.footer-logo {
    height: 24px;
    width: auto;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.footer-logo:hover {
    opacity: 1;
}

.text-coral { color: var(--coral-accent, #F37467); }
.bg-off-white { background-color: var(--off-white, #F7F5F5); }
.bg-pale-blue { background-color: var(--pale-blue, #EBF2FA); }

/* ============================================================================
   17. LOADING ANIMATION & SKELETON
   ============================================================================ */

.loading-progress {
    height: 30px;
    width: 30px;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1000;
}

.loading-progress circle {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 6;
    stroke-dasharray: 40;
    animation: progress-animation 2s infinite;
}

@keyframes progress-animation {
    0% { stroke-dashoffset: 0; }
    50% { stroke-dashoffset: 150; }
    100% { stroke-dashoffset: 300; }
}

.loading-progress-text {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    color: var(--text-light-color);
    z-index: 999;
}

@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--kendo-color-border, #a5cad6) 0%,
        var(--kendo-color-surface) 50%,
        var(--kendo-color-border, #a5cad6) 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
    border-radius: var(--kendo-border-radius-sm);
}

/* ============================================================================
   18. UTILITIES
   ============================================================================ */

.container {
    margin: 0 auto;
    padding: 0 20px;
}

.w-full { width: 100%; }
.h-full { height: 100%; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-between { justify-content: space-between; }
.flex-center { justify-content: center; align-items: center; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--text-light-color); }
.text-danger { color: var(--danger-color); }
.text-success { color: var(--success-color); }
.text-warning { color: var(--warning-color); }

.cursor-pointer { cursor: pointer; }
.transition-all { transition: all 0.15s ease; }

.rounded { border-radius: var(--kendo-border-radius-sm, 4px); }
.rounded-md { border-radius: var(--kendo-border-radius-md, 8px); }
.rounded-lg { border-radius: 12px; }

.shadow-sm { box-shadow: var(--kendo-elevation-1, 0 1px 2px rgba(0, 0, 0, 0.06)); }
.shadow-md { box-shadow: var(--kendo-elevation-2, 0 2px 8px rgba(0, 0, 0, 0.1)); }
.shadow-lg { box-shadow: var(--kendo-elevation-3, 0 4px 16px rgba(0, 0, 0, 0.12)); }

.bg-light { background-color: var(--surface-color); }
.bg-white { background-color: var(--bg-color); }

.border { border: 1px solid var(--border-color); }
.border-top { border-top: 1px solid var(--border-color); }
.border-bottom { border-bottom: 1px solid var(--border-color); }

/* ============================================================================
   19. RESPONSIVE BREAKPOINTS — Mobile-first
   ============================================================================ */

@media (max-width: 767px) {
    h1:not([class*="k-"]) {
        font-size: 24px;
    }

    h2:not([class*="k-"]) {
        font-size: 20px;
    }

    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr;
    }

    .app-content {
        padding: var(--kendo-spacing-3, 12px);
    }

    .app-header {
        padding: 0 var(--kendo-spacing-3, 12px);
    }

    .card {
        padding: var(--kendo-spacing-3, 12px);
    }

    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 200;
    }

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

    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 199;
    }

    .mobile-menu-btn {
        display: inline-flex;
    }

    .sidebar-collapse-btn {
        display: none;
    }

    .sidebar-collapsed .app-sidebar {
        width: 280px;
    }

    .sidebar-collapsed .nav-text {
        display: inline;
    }

    .landing-hero {
        padding: 48px 20px;
    }

    .landing-section,
    .landing-section-alt {
        padding: 40px 20px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================================
   20. ACCESSIBILITY
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ============================================================================
   21. FOCUS & KEYBOARD ACCESSIBILITY
   ============================================================================ */

:focus-visible {
    outline: 2px solid var(--kendo-color-primary);
    outline-offset: 2px;
}

button:focus-visible {
    outline-offset: 4px;
}

/* Remove focus outlines from Telerik components */
.k-switch:focus,
.k-switch:focus::after,
.k-switch:focus-visible,
.k-switch:focus-visible::after,
.k-switch-track:focus,
.k-switch-track:focus-visible,
.k-button:focus,
.k-button:focus::after,
.k-button:focus-visible,
.k-button:focus-visible::after {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================================================
   22. PRINT STYLES
   ============================================================================ */

@media print {
    body {
        background: white;
    }

    .app-sidebar, .app-header, .app-footer {
        display: none;
    }

    .app-content {
        padding: 0;
    }
}

/* ============================================================================
   23. DARK MODE SUPPORT
   ============================================================================ */

/* Dark mode disabled — forcing light theme for now
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1e1e1e;
        --surface-color: #2d2d2d;
        --text-color: #e0e0e0;
        --text-light-color: #a0a0a0;
        --border-color: #3d3d3d;
    }

    .card,
    .metric-card {
        background-color: var(--kendo-color-base-background);
        border-color: var(--kendo-color-border);
    }

    .app-content {
        background-color: var(--kendo-color-surface);
    }

    .app-header {
        background-color: var(--kendo-color-base-background);
        border-color: var(--kendo-color-border);
    }

    .app-footer {
        background-color: var(--kendo-color-base-background);
        border-color: var(--kendo-color-border);
    }

    .auth-card {
        background-color: var(--kendo-color-base-background);
        border-color: var(--kendo-color-border);
    }

    .auth-container {
        background-color: var(--kendo-color-surface);
    }
}
*/

/* ============================================================================
   24. AUTH FORM STYLES — SSO & DIVIDER
   ============================================================================ */

.sso-button {
    width: 100%;
    padding: var(--kendo-spacing-4, 16px);
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-md, 6px);
    background-color: var(--kendo-color-base-background);
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    font-family: var(--kendo-font-family);
}

.sso-button:hover:not(:disabled) {
    background-color: var(--kendo-color-surface);
    border-color: var(--kendo-color-primary);
}

.sso-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.sso-button svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.auth-divider {
    display: flex;
    align-items: center;
    margin: var(--kendo-spacing-6, 24px) 0;
    gap: 12px;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--kendo-color-border);
}

.auth-divider span {
    font-size: 13px;
    color: var(--text-light-color);
    font-weight: 500;
    white-space: nowrap;
}

.footer-logos {
    display: flex;
    align-items: center;
    gap: var(--kendo-spacing-2, 8px);
}

.footer-logos a {
    display: inline-flex;
    line-height: 0;
    text-decoration: none;
}

.footer-logo {
    width: auto;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.footer-logo:hover {
    opacity: 1;
}

.footer-logo-gap {
    height: 20px;
}

.footer-logo-velocity {
    height: 20px;
}

.footer-logo-velocity {
    max-height: 28px;
}

/* ============================================================================
   25. CUSTOM SCROLLBAR
   ============================================================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--surface-color);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-light-color);
}

/* ============================================================================
   26. LOGIN PAGE LAYOUT
   ============================================================================ */

.login-page-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: var(--surface-color);
    padding: 20px;
}

/* ============================================================================
   27. LOGIN FORM STYLING
   ============================================================================ */

.login-form {
    width: 100%;
}

.signup-form {
    width: 100%;
}

/* ============================================================================
   28. GRID CONTAINERS — TelerikGrid with explicit height
   ============================================================================ */

.card-with-grid {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    background-color: var(--kendo-color-base-background, #ffffff);
    overflow: hidden;
}

.card-with-grid .k-grid {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background-color: var(--kendo-color-base-background, #ffffff);
}

.card-with-grid .k-grid-toolbar {
    flex-shrink: 0;
    background-color: var(--kendo-color-base-background, #ffffff);
}

.card-with-grid .k-grid-header,
.card-with-grid .k-grid-header-wrap {
    flex-shrink: 0;
    background-color: var(--kendo-color-base-background, #ffffff);
}

.card-with-grid .k-grid-content {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: block;
    width: 100%;
    background-color: var(--kendo-color-base-background, #ffffff);
}

.card-with-grid .k-grid-footer,
.card-with-grid .k-grid-footer-wrap,
.card-with-grid .k-pager-wrap {
    flex-shrink: 0;
    background-color: var(--kendo-color-base-background, #ffffff);
}

.card-with-grid .k-table {
    width: 100%;
    table-layout: auto;
    background-color: var(--kendo-color-base-background, #ffffff);
}

.card-with-grid .k-table-row {
    background-color: var(--kendo-color-base-background, #ffffff);
    height: auto;
}

.card-with-grid .k-table thead {
    background-color: var(--kendo-color-base-background, #ffffff);
}

.card-with-grid .k-table tbody {
    background-color: var(--kendo-color-base-background, #ffffff);
}

.card-with-grid .k-table th {
    background-color: var(--kendo-color-base-background, #ffffff);
}

.card-with-grid .k-pager {
    background-color: var(--kendo-color-base-background, #ffffff);
}

.card-with-grid .k-grid-pager {
    background-color: var(--kendo-color-base-background, #ffffff);
}

/* ============================================================================
   29. TELERIK PAGER FOCUS FIX — Remove focus outline/border
   ============================================================================ */

.k-pager:focus,
.k-pager:focus-visible {
    outline: none;
    border: none;
    box-shadow: none;
}

.k-pager-wrap:focus,
.k-pager-wrap:focus-visible {
    outline: none;
    border: none;
    box-shadow: none;
}

.k-pager *:focus-visible {
    outline: none;
}

.k-pager .k-pager-nav:focus-visible {
    outline: none;
    border: none;
}

.card-with-grid .k-pager:focus,
.card-with-grid .k-pager:focus-visible {
    outline: none;
    border: none;
    box-shadow: none;
}

.card-with-grid .k-pager-wrap:focus,
.card-with-grid .k-pager-wrap:focus-visible {
    outline: none;
    border: none;
    box-shadow: none;
}

/* ============================================================================
   30. STATUS BADGES — Project Status Display
   ============================================================================ */

.status-badge {
    display: inline-block;
    padding: 4px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    text-align: center;
}

.status-uploaded {
    background-color: var(--kendo-color-info-subtle, #E6F8FC);
    color: var(--kendo-color-info, #18C1E5);
}

.status-extracted {
    background-color: var(--kendo-color-info-subtle, #E6F8FC);
    color: var(--kendo-color-info, #18C1E5);
}

.status-processing {
    background-color: var(--kendo-color-warning-subtle, #FEF6E2);
    color: var(--kendo-color-warning, #FEBD12);
}

.status-assessment {
    background-color: var(--kendo-color-warning-subtle, #FEF6E2);
    color: var(--kendo-color-warning, #FEBD12);
}

.status-error {
    background-color: var(--kendo-color-error-subtle, #FDECEF);
    color: var(--kendo-color-error, #E54360);
}

.status-completed {
    background-color: var(--kendo-color-success-subtle, #E8F7EF);
    color: var(--kendo-color-success, #43B686);
}

.status-unknown {
    background-color: var(--surface-color, #F5F3F7);
    color: var(--text-light-color, #777373);
}

/* ============================================================================
   16. TOAST NOTIFICATIONS — Top Center Positioning
   ============================================================================ */

.toast-notification.k-notification-group {
    position: fixed !important;
    top: 80px !important;
    bottom: auto !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 2000 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: auto;
    max-width: 500px;
}

.toast-notification .k-notification {
    margin-bottom: 12px;
    box-shadow: var(--kendo-elevation-2, 0 2px 8px rgba(0, 0, 0, 0.1));
}

.toast-notification .k-notification-content {
    font-size: 14px;
}