/* Theme tokens and color-only rules for the default (light) theme.
   This file was extracted from app.css. Keep color, background, border-color,
   box-shadow color definitions and CSS custom properties here. Structural
   rules (layout/spacing/typography) remain in app.css.
*/

/* ─── 1. Design Tokens ──────────────────────────────────────────────────── */

:root {
    /* Brand colors */
    --rz-color-black: #000000;
    --rz-text-color: #000000;
    --sld-color-white: #FFFFFF;
    --sld-color-yellow: #FFDD00;
    --rz-primary: var(--sld-color-yellow);
    --rz-secondary: var(--rz-color-black);
    --rz-on-secondary: var(--sld-color-white);
    --rz-on-primary: var(--rz-color-black);
    --rz-on-primary-lighter: #FCE44B;
    --rz-danger: #e50000;

    /* Radzen base overrides */
    --rz-base-100: #FFFFFF;
    --rz-base-900: #1d1d1f;
    --rz-text-subtitle2-margin-bottom: 0;

    /* Navigation / panel menu */
    --rz-panel-menu-item-active-background-color: #FFF;
    --rz-panel-menu-item-active-color: var(--rz-color-black);
    --rz-panel-menu-item-border: 2px solid var(--rz-color-black);
    --rz-profile-menu-top-item-background-color: var(--sld-color-white);
    --rz-profile-menu-toggle-button-color: var(--rz-text-color);

    /* Tree */
    --rz-tree-node-selected-color: var(--rz-text-color);
    --rz-tree-node-selected-background-color: #EFEFEF;

    /* Grid */
    --rz-grid-selected-background-color: #CCCCCC;
    --rz-grid-selected-color: var(--rz-primary);
    --rz-grid-stripe-background-color: #F2F2F2;
    --rz-selectbar-selected-background-color: #000000;

    /* Bootstrap button overrides */
    --bs-btn-hover-bg: var(--rz-primary);
    --bs-btn-hover-border-color: var(--rz-primary);

    /* Dialog */
    --rz-dialog-shadow: 0 2px 8px rgba(0,0,0,0.12);
    --rz-dialog-border-radius: 6px;
}


/* ─── 2. Global / Base ──────────────────────────────────────────────────── */

body {
    background-color: #F4F5F9;
    color: var(--rz-text-color);
}

a, .btn-link {
    color: var(--rz-primary);
}

/* Error boundary uses a dark red background and white text */
.blazor-error-boundary {
    color: white;
}


/* ─── 3. Header ─────────────────────────────────────────────────────────── */

.sld-header-row {
    border-bottom: 1px solid #F6F6F6;
}

.sld-hamburger,
.mobile-nav-close-btn {
    color: #000000 !important;
}

/* ─── 4. Navigation (desktop) ───────────────────────────────────────────── */

#main-navigation .rz-navigation-item.rz-state-active {
    border-block-end: var(--rz-panel-menu-item-border);
    border-color: black;
}

#main-navigation .rz-navigation-item-active {
    color: var(--rz-color-black);
    border-color: var(--rz-color-black);
}


/* ─── 5. Navigation (mobile) ────────────────────────────────────────────── */

.mobile-nav-overlay {
    background: rgba(0, 0, 0, 0);
}

.mobile-nav-overlay.open {
    background: rgba(0, 0, 0, 0.4);
}

.mobile-nav-panel {
    background: #FFFFFF;
}

/* Ensure Radzen Material background doesn't leak through the panel in light mode */
.mobile-nav-body,
.mobile-nav-body #main-navigation,
.mobile-nav-body #main-navigation .rz-panel-menu,
.mobile-nav-body #main-navigation .rz-navigation-item,
.mobile-nav-body #main-navigation .rz-navigation-item-link {
    background: transparent;
}

.mobile-nav-body {
    .rz-panel-menu .rz-navigation-item-wrapper-active {
        background-color: transparent;
    }    
}

.mobile-nav-header {
    border-bottom: 1px solid #E8E8E8;
}

.mobile-nav-footer {
    border-top: 1px solid #E8E8E8;
    color: #7F7F7F;
}

.mobile-nav-body #main-navigation .rz-navigation-item.rz-state-active {
    border-inline-start: 3px solid var(--rz-color-black);
}


/* ─── 6. Buttons ────────────────────────────────────────────────────────── */

.rz-button.rz-primary {
    border-color: #FEEA61;
    box-shadow: 0 1px 2px rgba(0,0,0,.4);
}

.rz-button.secondary {
    border-color: #FEEA61;
    color: var(--rz-on-secondary);
    box-shadow: 0 1px 2px rgba(0,0,0,.4);
}

.btn-action {
    color: #000;
    background-color: #333;
}

.btn-white {
    color: var(--rz-color-black);
    border: 1px solid var(--rz-color-black);
    background-color: var(--sld-color-white);
}

.theme-toggle-btn {
    border-color: var(--rz-text-color) !important;
    color: var(--rz-text-color) !important;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}


/* ─── 7. Forms & Inputs ─────────────────────────────────────────────────── */

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

input:focus,
input:focus-visible {
    border-color: var(--rz-primary) !important;
}

/* Focus box-shadows */
.rz-input:focus,
.rz-textarea:focus,
.rz-dropdown .rz-state-focus {
    box-shadow: 0 0 0 2px var(--rz-primary) inset !important;
}


/* ─── 8. Validation ─────────────────────────────────────────────────────── */

.validation-message {
    color: #e50000;
}

.sld-val-error {
    color: var(--rz-danger);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}


/* ─── 9. Dialogs ────────────────────────────────────────────────────────── */

.rz-dialog-mask::before {
    background: url("dialogbg1.png") no-repeat #FFFFFF;
    background-position-x: right;
    background-position-y: bottom;
}

.rz-dialog-mask::after {
    background: url("dialogbg2.png") no-repeat;
    background-position-x: right;
    background-position-y: bottom;
}


/* ─── 10. Login Page ────────────────────────────────────────────────────── */

#login-page-mask::before {
    background: url("dialogbg1.png") no-repeat #FFFFFF;
    background-position-x: right;
    background-position-y: bottom;
}

#login-page-mask::after {
    background: url("dialogbg2.png") no-repeat;
    background-position-x: right;
    background-position-y: center;
}

#login-page-content {
    box-shadow: var(--rz-dialog-shadow);
}

.forgot-password-link {
    color: #202020;
}

#home-page .contact-link,
.sld-login-contacts .contact-link {
    color: var(--rz-color-black) !important;
}


/* ─── 11. Account Settings Page ─────────────────────────────────────────── */

#account-settings-page-mask::before {
    background: url("dialogbg1.png") no-repeat #FFFFFF;
    background-position-x: right;
    background-position-y: bottom;
}

#account-settings-page-mask::after {
    background: url("dialogbg2.png") no-repeat;
    background-position-x: right;
    background-position-y: center;
}

#account-settings-page-content {
    box-shadow: var(--rz-dialog-shadow);
}


/* ─── 12. Home Page ─────────────────────────────────────────────────────── */

.home-contact-card .language-description {
    border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}

/* ─── 13. Metrics & Tree ────────────────────────────────────────────────── */

.metric-header-card {
    background-color: rgba(254, 221, 3, 0.05);
    border: 1px solid var(--sld-color-yellow);
    color: var(--rz-color-black);
}

.metric-header-card.disabled {
    background-color: #ffffff;
}

.metric-tree {
    border: 1px solid #DFE2E6;
}

.rz-tree .sld-state-selected,
.metric-tree .sld-state-selected {
    color: var(--rz-tree-node-selected-color);
    background-color: var(--rz-tree-node-selected-background-color);
}

.metrics-tree-close-btn {
    color: #000000 !important;
}

.metric-tree-display-name {
    color: #424242;
}

.metric-tree-sentiment-good {
    color: #FEDD03;
}

.metric-tree-sentiment-neutral {
    color: #FF9800;
}

.metric-tree-sentiment-bad {
    color: #e50000;
}

.metrics-icon {
    color: var(--rz-primary);
}

/* Metrics tree overlay & panel */
.metrics-tree-overlay {
    background: rgba(0, 0, 0, 0);
}

.metrics-tree-overlay.open {
    background: rgba(0, 0, 0, 0.4);
}

.metrics-tree-panel {
    background: #FFFFFF;
}

.metrics-tree-panel-header {
    border-bottom: 1px solid #E8E8E8;
}


/* ─── 14. Date Picker ───────────────────────────────────────────────────── */

.date-picker-arrow-btn {
    background-color: #EEEEEE;
}

.rz-button.month-btn {
    color: var(--sld-color-yellow);
}

.rz-button.rz-variant-outlined.rz-light.rz-shade-default.month-btn {
    color: #CCCCCC;
    border: 1px solid #CCCCCC;
}

.month-btn.selected {
    background-color: var(--rz-selectbar-selected-background-color);
    color: var(--rz-primary);
    border-color: transparent;
    box-shadow: none;
}


/* ─── 15. Translations & Language ───────────────────────────────────────── */

.language-menu {
    border: 1px solid var(--rz-text-color) !important;
}

.language-menu-option {
    color: var(--rz-color-black) !important;
}

#translations-overview .table-striped > tbody > tr:nth-of-type(2n+1) > * {
    background-color: rgba(255, 253, 242, 1) !important;
}

#translations-overview .language-translation:focus {
    border-color: var(--rz-color-black);
    outline: none;
    box-shadow: none;
}

/* Language dialog */
.flag-hint-row {
    color: #888;
}

.flag-link {
    color: var(--rz-primary);
    text-decoration: underline;
}

.flag-preview-label {
    color: #888;
}


/* ─── 16. Icons & Status ────────────────────────────────────────────────── */

.status-icon-active {
    color: green;
}

.status-icon-inactive {
    color: red;
}

.document-icon-pdf {
    color: red;
}

.document-icon-doc {
    color: #2B579A;
}

.document-icon-xls {
    color: #217346;
}

.document-icon-txt {
    color: #6c757d;
}

.document-icon-code {
    color: #f57c00;
}

.document-icon-default {
    color: var(--rz-text-color);
}


/* ─── 17. Cache / Background Task Status ────────────────────────────────── */

.cache-progress-description {
    color: #888;
}

.lock-list {
    color: #555;
}

.batch-status-label {
    color: #777;
}

.fill-status-label {
    color: #555;
}


/* ─── 18. Release Notes ─────────────────────────────────────────────────── */

.release-summary {
    color: #666;
}

.release-date {
    color: #888;
}

.release-build-id {
    color: #888;
}

.devops-note-muted {
    color: #999;
}

.devops-note-error {
    color: #c44;
}

.devops-ticket-link {
    color: #0078d4;
}

.devops-ticket-id {
    color: #999;
}


/* ─── 19. Utility / Misc ────────────────────────────────────────────────── */

.muted-text {
    color: #999;
}

.empty-leaf-notice {
    color: #999;
}

.empty-items-notice {
    color: #999;
}

#app-version {
    color: #7F7F7F;
}

#version-number {
    color: #666666;
}

app-version #version-number {
    color: inherit;
}