/* SuperNova Radzen Component Overrides */
/* Uses CSS variables from theme-light.css and theme-dark.css for unified styling */

/* ========================================
   Cards
   ======================================== */
.rz-card {
    background-color: var(--sn-white);
    border: 1px solid var(--sn-border);
    box-shadow: var(--sn-shadow-sm);
}

/* ========================================
   Text Elements
   ======================================== */
.rz-text {
    color: var(--sn-text);
}

.rz-text-h4,
.rz-text-h5,
.rz-text-h6 {
    color: var(--sn-text-dark);
}

.rz-text-secondary-color {
    color: var(--sn-text-muted) !important;
}

/* ========================================
   Form Fields
   ======================================== */
.rz-form-field {
    background-color: transparent;
}

.rz-form-field .rz-form-field-content {
    background-color: var(--rz-form-field-background-color, var(--sn-white)) !important;
    border-color: var(--sn-border);
    transition: var(--sn-transition-colors);
}

.rz-form-field .rz-form-field-content:hover {
    background-color: var(--rz-form-field-background-color, var(--sn-white)) !important;
}

.rz-form-field .rz-form-field-label {
    color: var(--sn-text-muted);
    background-color: var(--sn-white);
}

.rz-form-field.rz-variant-outlined .rz-form-field-content {
    border-color: var(--sn-border);
}

.rz-form-field.rz-variant-outlined:focus-within .rz-form-field-content {
    border-color: var(--sn-primary);
}

/* ========================================
   Input Elements
   ======================================== */
.rz-textbox,
.rz-textarea,
.rz-password input {
    background-color: var(--rz-input-background-color, var(--sn-white)) !important;
    color: var(--sn-text);
    border-color: var(--sn-border);
    transition: var(--sn-transition-colors);
}

.rz-textbox:hover,
.rz-textarea:hover,
.rz-password input:hover {
    background-color: var(--rz-input-background-color, var(--sn-white)) !important;
}

.rz-textbox:focus,
.rz-textarea:focus,
.rz-password input:focus {
    background-color: var(--rz-input-background-color, var(--sn-white)) !important;
    border-color: var(--sn-primary);
}

.rz-textbox::placeholder,
.rz-textarea::placeholder {
    color: var(--sn-text-light);
}

/* ========================================
   Icons
   ======================================== */
.rz-icon {
    color: var(--sn-text-muted);
}

/* ========================================
   Badges
   ======================================== */
.rz-badge {
    background-color: var(--rz-badge-background-color, var(--sn-primary));
    color: #ffffff;
}

.rz-badge.rz-badge-pill {
    color: #ffffff;
}

/* ========================================
   Buttons
   ======================================== */
.rz-button.rz-primary {
    background-color: var(--sn-primary);
    border-color: var(--sn-primary);
}

.rz-button.rz-primary:hover {
    background-color: var(--sn-primary-dark);
    border-color: var(--sn-primary-dark);
}

.rz-button.rz-warning {
    background-color: var(--sn-warning);
    border-color: var(--sn-warning);
}

.rz-button.rz-light,
.rz-button.rz-variant-flat.rz-light {
    background-color: var(--sn-bg) !important;
    color: var(--sn-text) !important;
    border-color: var(--sn-border) !important;
}

.rz-button.rz-light:hover,
.rz-button.rz-variant-flat.rz-light:hover {
    background-color: var(--sn-border) !important;
}

.rz-button.rz-secondary {
    background-color: var(--sn-text-muted);
    color: #ffffff;
}

.rz-button[disabled] {
    opacity: 0.65;
}

.rz-button .rz-icon {
    color: inherit !important;
}

/* ========================================
   Links
   ======================================== */
.rz-link {
    color: var(--sn-primary);
}

.rz-link:hover {
    color: var(--sn-primary-dark);
}

/* ========================================
   Progress Bars
   ======================================== */
.rz-progressbar-circular .rz-progressbar-circular-track {
    stroke: var(--sn-border);
}

.rz-progressbar-circular .rz-progressbar-circular-value {
    stroke: var(--rz-progressbar-value-color, var(--sn-primary));
}

.rz-progressbar-circular-value {
    stroke: var(--rz-progressbar-value-color, var(--sn-primary)) !important;
}

.rz-progressbar-circular-track {
    stroke: var(--sn-border) !important;
}

/* ========================================
   HTML Editor
   ======================================== */
.rz-html-editor {
    background-color: var(--sn-white) !important;
    border-color: var(--sn-border);
}

.rz-html-editor .rz-html-editor-toolbar {
    background-color: var(--sn-bg) !important;
    border-color: var(--sn-border);
}

.rz-html-editor .rz-html-editor-toolbar button {
    color: var(--sn-text) !important;
    background-color: transparent !important;
}

.rz-html-editor .rz-html-editor-toolbar button:hover {
    background-color: var(--sn-border) !important;
    color: var(--sn-text-dark) !important;
}

.rz-html-editor .rz-html-editor-toolbar button.rz-state-active {
    background-color: var(--sn-primary) !important;
    color: #ffffff !important;
}

.rz-html-editor .rz-html-editor-toolbar .rz-button {
    color: var(--sn-text) !important;
    background-color: transparent !important;
}

.rz-html-editor .rz-html-editor-toolbar .rz-button:hover {
    background-color: var(--sn-border) !important;
}

.rz-html-editor .rz-html-editor-toolbar .rz-icon {
    color: var(--sn-text) !important;
}

.rz-html-editor .rz-html-editor-toolbar .rz-separator {
    background-color: var(--sn-border) !important;
}

.rz-html-editor .rz-html-editor-content {
    background-color: var(--sn-white) !important;
    color: var(--sn-text);
}

/* ========================================
   DataGrid / Tables
   ======================================== */
.rz-datatable,
.rz-data-grid,
.rz-grid {
    background-color: var(--sn-white) !important;
    border-color: var(--sn-border) !important;
}

.rz-datatable thead,
.rz-data-grid thead,
.rz-grid thead {
    background-color: var(--sn-bg) !important;
}

.rz-datatable th,
.rz-data-grid th,
.rz-grid th,
th.rz-unselectable-text,
.rz-cell-header {
    background-color: var(--sn-bg) !important;
    background: var(--sn-bg) !important;
    color: var(--sn-text-dark) !important;
    border-color: var(--sn-border) !important;
}

.rz-datatable th:hover,
.rz-data-grid th:hover,
.rz-grid th:hover {
    background-color: var(--sn-border) !important;
}

.rz-datatable td,
.rz-data-grid td,
.rz-grid td,
.rz-cell-data {
    background-color: var(--sn-white) !important;
    background: var(--sn-white) !important;
    color: var(--sn-text) !important;
    border-color: var(--sn-border) !important;
}

.rz-datatable tbody tr:hover td,
.rz-data-grid tbody tr:hover td,
.rz-grid tbody tr:hover td {
    background-color: var(--sn-bg) !important;
    background: var(--sn-bg) !important;
}

.rz-sortable-column .rz-icon,
.rz-cell-header .rz-icon {
    color: var(--sn-text-muted) !important;
}

.rz-grid-table,
table.rz-grid-table {
    background-color: var(--sn-white) !important;
}

th[scope],
th[role="columnheader"] {
    background-color: var(--sn-bg) !important;
    background: var(--sn-bg) !important;
    color: var(--sn-text-dark) !important;
}

/* ========================================
   Dropdowns
   ======================================== */
.rz-dropdown {
    background-color: var(--rz-dropdown-background-color, var(--sn-white)) !important;
    border-color: var(--sn-border);
    color: var(--sn-text);
}

.rz-dropdown:hover {
    background-color: var(--rz-dropdown-background-color, var(--sn-white)) !important;
}

.rz-dropdown .rz-dropdown-trigger {
    color: var(--sn-text-muted);
    background-color: transparent !important;
}

.rz-dropdown-panel {
    background-color: var(--sn-white) !important;
    border-color: var(--sn-border);
}

.rz-dropdown-panel .rz-dropdown-item {
    color: var(--sn-text);
    background-color: var(--sn-white) !important;
}

.rz-dropdown-panel .rz-dropdown-item:hover {
    background-color: var(--rz-dropdown-item-hover-background-color, var(--sn-bg)) !important;
}

.rz-dropdown-panel .rz-dropdown-item.rz-state-highlight {
    background-color: var(--sn-primary) !important;
    color: #ffffff;
}

/* ========================================
   Stack and Layout
   ======================================== */
.rz-stack {
    background-color: transparent;
    color: var(--sn-text);
}

.rz-row,
.rz-column {
    background-color: transparent;
}

/* ========================================
   Images
   ======================================== */
.rz-image {
    border: 3px solid var(--sn-border);
}

/* Large icon for avatar placeholder */
.rz-icon[style*="font-size: 150px"] {
    color: var(--sn-text-light) !important;
}

/* ========================================
   Layout overrides
   ======================================== */
.rz-layout {
    --rz-layout-header-height: auto;
}

/* ========================================
   Dashboard Card Backgrounds
   ======================================== */
.rz-background-color-primary-lighter {
    background-color: var(--sn-dashboard-primary-bg) !important;
}

.rz-background-color-success-lighter {
    background-color: var(--sn-dashboard-success-bg) !important;
}

.rz-background-color-info-lighter {
    background-color: var(--sn-dashboard-info-bg) !important;
}

.rz-background-color-warning-lighter {
    background-color: var(--sn-dashboard-warning-bg) !important;
}

/* ========================================
   Validation Messages
   ======================================== */
.rz-text-danger-color {
    color: var(--sn-danger) !important;
}

/* ========================================
   Card Inner Spacing
   ======================================== */
.rz-card > .rz-stack {
    padding: 1.5rem;
}

/* Section margins */
.rz-mt-4 {
    margin-top: 1.5rem !important;
}

/* ========================================
   Main Content Area
   ======================================== */
main {
    background-color: var(--sn-parchment);
}

main > .rz-stack {
    padding: 2rem 3rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* ========================================
   Text Utilities
   ======================================== */
.text-muted {
    color: var(--sn-text-muted) !important;
}