/* Web-host overrides for the interactive app pages (loaded AFTER all other
   CSS). Same ruleset NAM.Web ships inline in index.html — kept as a file here
   so the Site's marketing pages never pay for it. No CDN, all local. */

/* System font stack — all assets local, no CDN fonts */
html, body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #0a0a0f !important;
}

/* Hide scrollbar globally */
*, *::before, *::after {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
*::-webkit-scrollbar {
    display: none !important;
}

/* Override Telerik salmon/orange accent with app purple */
:root {
    --kendo-color-primary: #7c3aed !important;
    --kendo-color-primary-hover: #6d28d9 !important;
    --kendo-color-primary-active: #5b21b6 !important;
}

/* Telerik form labels — use app theme colors, not salmon */
.k-label,
.k-floating-label,
.k-form-label,
.k-checkbox-label,
.k-radio-label,
label {
    color: var(--text-secondary, #a0a0b8) !important;
}

/* Telerik focused/filled labels */
.k-floating-label-container.k-focus .k-label,
.k-floating-label-container.k-empty .k-label,
.k-textbox:focus ~ .k-label,
.k-input:focus ~ .k-label {
    color: #7c3aed !important;
}

/* Telerik button primary — use purple, not salmon */
.k-button-solid-primary,
.k-button-solid-base.k-selected {
    background-color: #7c3aed !important;
    border-color: #7c3aed !important;
}
.k-button-solid-primary:hover {
    background-color: #6d28d9 !important;
    border-color: #6d28d9 !important;
}

/* Telerik checkbox accent */
.k-checkbox:checked,
.k-checkbox:indeterminate {
    background-color: #7c3aed !important;
    border-color: #7c3aed !important;
}

/* Telerik inputs — follow app theme (matches mobile app). Loaded AFTER
   kendo-theme-default so these win over Telerik's own .k-input-solid surface
   colors. var(--bg-input) etc. are theme-conditional (set in app.css :root
   for light, [data-theme="dark"] for dark) so a single ruleset works for
   both themes. */
.k-input-solid,
.k-dropdownlist.k-input-solid,
.k-combobox.k-input-solid,
.k-picker-solid,
.k-textbox.k-input-solid,
.k-textarea.k-input-solid,
.k-numerictextbox.k-input-solid,
.k-datepicker.k-input-solid,
.k-timepicker.k-input-solid,
.k-datetimepicker.k-input-solid,
.k-multiselect.k-input-solid,
.k-autocomplete.k-input-solid,
.k-maskedtextbox.k-input-solid {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
.k-input-solid .k-input-inner,
.k-input-solid .k-input-value-text,
.k-picker-solid .k-input-inner,
.k-picker-solid .k-input-value-text {
    color: var(--text-primary) !important;
    background-color: transparent !important;
}
.k-input-solid .k-input-inner::placeholder {
    color: var(--text-muted) !important;
}
.k-input-solid .k-input-button,
.k-input-solid .k-select,
.k-picker-solid .k-input-button,
.k-picker-solid .k-select {
    background: transparent !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}
.k-input-solid .k-input-button:hover,
.k-input-solid .k-select:hover {
    background: rgba(124, 58, 237, 0.15) !important;
    color: var(--text-primary) !important;
}

/* Dropdown popup list */
.k-popup,
.k-animation-container .k-popup {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
.k-list,
.k-list-content {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}
.k-list-item,
.k-list-optionlabel {
    color: var(--text-primary) !important;
    background-color: transparent !important;
}
.k-list-item:hover,
.k-list-item.k-hover {
    background-color: rgba(124, 58, 237, 0.15) !important;
    color: var(--text-primary) !important;
}
.k-list-item.k-selected {
    background-color: #7c3aed !important;
    color: #ffffff !important;
}
.k-list-item.k-selected:hover {
    background-color: #6d28d9 !important;
    color: #ffffff !important;
}

/* Blazor reconnect / error UI (Blazor Server circuit) */
#blazor-error-ui {
    background: #ff5252;
    bottom: 0;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 1rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: white;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}
#blazor-error-ui .reload {
    color: white;
    margin-left: 1rem;
}