/* =============================================================
   radzen-theme.css
   Maps Radzen CSS variables to the FastMatch design system.

   Load order in App.razor:
     1. _content/Radzen.Blazor/css/default.css  (Radzen base)
     2. css/site.css                             (app design system)
     3. css/radzen-theme.css                     (these overrides)
   ============================================================= */

:root {
    --rz-primary:                               #F97316;
    --rz-primary-darker:                        #EA580C;
    --rz-primary-dark:                          #EA580C;
    --rz-primary-light:                         rgba(249,115,22,0.15);
    --rz-primary-lighter:                       rgba(249,115,22,0.08);
    --rz-secondary:                             #1E293B;
    --rz-base-background-color:                 #1E293B;
    --rz-body-background-color:                 #0F172A;
    --rz-text-color:                            #F8FAFC;
    --rz-text-secondary-color:                  #94A3B8;
    --rz-text-disabled-color:                   #475569;
    --rz-border-color:                          rgba(255,255,255,0.1);
    --rz-card-background-color:                 #1E293B;
    --rz-card-border-color:                     rgba(255,255,255,0.1);
    --rz-panel-background-color:                #1E293B;
    --rz-grid-header-background-color:          #0F172A;
    --rz-grid-header-color:                     #94A3B8;
    --rz-grid-row-hover-background-color:       rgba(249,115,22,0.05);
    --rz-grid-row-selected-background-color:    rgba(249,115,22,0.1);
    --rz-grid-row-alternating-background-color: rgba(255,255,255,0.02);
    --rz-input-background-color:                #0F172A;
    --rz-input-border-color:                    rgba(255,255,255,0.15);
    --rz-input-color:                           #F8FAFC;
    --rz-input-placeholder-color:               #475569;
    --rz-input-focus-shadow:                    0 0 0 3px rgba(249,115,22,0.25);
    --rz-danger:                                #ef4444;
    --rz-danger-dark:                           #dc2626;
    --rz-danger-light:                          rgba(239,68,68,0.15);
    --rz-danger-lighter:                        rgba(239,68,68,0.08);
    --rz-success:                               #22c55e;
    --rz-success-dark:                          #16a34a;
    --rz-success-light:                         rgba(34,197,94,0.15);
    --rz-success-lighter:                       rgba(34,197,94,0.08);
    --rz-warning:                               #facc15;
    --rz-warning-dark:                          #ca8a04;
    --rz-warning-light:                         rgba(250,204,21,0.15);
    --rz-info:                                  #6366f1;
    --rz-info-light:                            rgba(99,102,241,0.15);
    --rz-font-family:                           'Inter', system-ui, -apple-system, sans-serif;
    --rz-font-size:                             0.9rem;
    --rz-border-radius:                         8px;
    --rz-button-border-radius:                  6px;
    --rz-input-border-radius:                   6px;
    --rz-card-border-radius:                    12px;
    --rz-shadow:                                0 4px 24px rgba(0,0,0,0.3);
}

/* ── Upload drop zone ──────────────────────────────────────── */
.rz-fileupload-content {
    background: var(--rz-body-background-color) !important;
    border: 2px dashed rgba(249,115,22,0.4) !important;
    border-radius: 8px !important;
    color: var(--rz-text-secondary-color) !important;
}

.rz-fileupload-content:hover {
    border-color: var(--rz-primary) !important;
    background: var(--rz-primary-lighter) !important;
}

/* ── Buttons ───────────────────────────────────────────────── */
.rz-button.rz-primary {
    background: var(--rz-primary) !important;
    border-color: var(--rz-primary) !important;
    color: #fff !important;
}

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

.rz-button.rz-secondary {
    background: transparent !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: var(--rz-text-color) !important;
}

.rz-button.rz-secondary:hover {
    background: rgba(255,255,255,0.06) !important;
}

.rz-button.rz-light {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: var(--rz-text-color) !important;
}

.rz-button.rz-light:hover {
    background: rgba(255,255,255,0.12) !important;
}

.rz-button.rz-danger {
    background: transparent !important;
    border-color: var(--rz-danger) !important;
    color: var(--rz-danger) !important;
}

.rz-button.rz-danger:hover {
    background: var(--rz-danger-light) !important;
}

/* ── Cards ─────────────────────────────────────────────────── */
.rz-card {
    background: var(--rz-card-background-color) !important;
    border-color: var(--rz-card-border-color) !important;
    border-radius: var(--rz-card-border-radius) !important;
    color: var(--rz-text-color) !important;
}

/* ── Form inputs ───────────────────────────────────────────── */
.rz-textbox,
.rz-textarea,
.rz-numeric,
.rz-dropdown {
    background: var(--rz-input-background-color) !important;
    border-color: var(--rz-input-border-color) !important;
    color: var(--rz-input-color) !important;
    border-radius: var(--rz-input-border-radius) !important;
}

.rz-textbox:focus,
.rz-textarea:focus,
.rz-numeric:focus {
    border-color: var(--rz-primary) !important;
    box-shadow: var(--rz-input-focus-shadow) !important;
}

/* ── Data grid ─────────────────────────────────────────────── */
.rz-grid-table thead th {
    background: var(--rz-grid-header-background-color) !important;
    color: var(--rz-grid-header-color) !important;
    border-color: rgba(255,255,255,0.06) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.rz-grid-table tbody td {
    background: var(--rz-base-background-color) !important;
    color: var(--rz-text-color) !important;
    border-color: rgba(255,255,255,0.04) !important;
}

.rz-grid-table tbody tr:hover td {
    background: var(--rz-grid-row-hover-background-color) !important;
}

.rz-grid-table tbody tr.rz-state-highlight td {
    background: var(--rz-grid-row-selected-background-color) !important;
}

/* ── Progress bar ──────────────────────────────────────────── */
.rz-progressbar {
    background: rgba(255,255,255,0.08) !important;
    border-radius: 999px !important;
}

.rz-progressbar-value {
    background: var(--rz-primary) !important;
}

/* ── Checkbox ──────────────────────────────────────────────── */
.rz-checkbox-box.rz-state-active {
    background: var(--rz-primary) !important;
    border-color: var(--rz-primary) !important;
}

/* ── Notifications ─────────────────────────────────────────── */
.rz-notification.rz-notification-error {
    background: var(--rz-danger-light) !important;
    border-left: 3px solid var(--rz-danger) !important;
    color: var(--rz-text-color) !important;
}

.rz-notification.rz-notification-success {
    background: var(--rz-success-light) !important;
    border-left: 3px solid var(--rz-success) !important;
    color: var(--rz-text-color) !important;
}

.rz-notification.rz-notification-warning {
    background: var(--rz-warning-light) !important;
    border-left: 3px solid var(--rz-warning) !important;
    color: var(--rz-text-color) !important;
}

.rz-notification.rz-notification-info {
    background: var(--rz-info-light) !important;
    border-left: 3px solid var(--rz-info) !important;
    color: var(--rz-text-color) !important;
}

/* ── Dialog ────────────────────────────────────────────────── */
.rz-dialog {
    background: var(--rz-card-background-color) !important;
    border: 1px solid var(--rz-border-color) !important;
    border-radius: var(--rz-card-border-radius) !important;
    color: var(--rz-text-color) !important;
}

.rz-dialog-titlebar {
    background: var(--rz-body-background-color) !important;
    border-bottom: 1px solid var(--rz-border-color) !important;
    color: var(--rz-text-color) !important;
}

.rz-overlay {
    background: rgba(0,0,0,0.6) !important;
}