/* ═════════════════════════════════════════════════════════════════
   Radzen Blazor — Material 3 Overrides
   Reusable across Dynasoft applications.
   Requires CSS variables defined in app.css (loaded before this file).
   Load order in index.html:
     1. app.css          (brand variables)
     2. Radzen base CSS  (material-base.css)
     3. radzen-overrides.css  ← this file
   ═════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   0. RADZEN VARIABLE OVERRIDES
   Re-declare after material-base.css resets them to Radzen defaults.
   Since this file loads last, these values win the cascade.
   ───────────────────────────────────────────────────────────────── */
:root {
    /* Restore brand colors (Radzen material-base resets these to blue) */
    --rz-primary:          var(--palette-action);
    --rz-primary-light:    var(--palette-light);
    --rz-primary-dark:     var(--palette-dark);
    --rz-sidebar-bg:       var(--md-surface-1);
    --rz-sidebar-color:    var(--md-on-surface-variant);
    --rz-header-bg:        #000000;

    /* Secondary / accent: use palette-mid to avoid any purple leak */
    --rz-secondary:        var(--palette-mid);
    --rz-secondary-light:  var(--palette-light);
    --rz-secondary-dark:   var(--palette-primary);
}

/* ─────────────────────────────────────────────────────────────────
   1. TYPOGRAPHY — Helvetica for data areas only
      Note: icons are NOT targeted here — Radzen handles icon fonts.
   ───────────────────────────────────────────────────────────────── */
.rz-datatable,
.rz-datatable td,
.rz-datatable th,
.rz-textbox,
.rz-numeric input,
.rz-textarea,
.rz-dropdown .rz-dropdown-label,
.rz-dialog-content p {
    font-family: var(--font-secondary);
}

/* ─────────────────────────────────────────────────────────────────
   3. SPINNER — brand primary color
   ───────────────────────────────────────────────────────────────── */
.rz-progressbar-circle-stroke,
.rz-progressbar-circular .rz-progressbar-circle-value {
    stroke: var(--md-primary) !important;
}

/* ─────────────────────────────────────────────────────────────────
   4. CHECKBOX — green when checked, white checkmark
   ───────────────────────────────────────────────────────────────── */
.rz-checkbox-box.rz-state-active,
.rz-checkbox-box.rz-state-checked {
    background-color: var(--md-primary) !important;
    border-color: var(--md-primary) !important;
}

.rz-checkbox-box.rz-state-active .rz-chkbox-icon,
.rz-checkbox-box.rz-state-checked .rz-chkbox-icon {
    color: #ffffff !important;
}

/* Label text never green */
.rz-checkbox label,
.rz-checkbox + label {
    color: var(--md-on-surface) !important;
    font-family: var(--font-primary);
}

/* ─────────────────────────────────────────────────────────────────
   5. HEADER — black, white content
   ───────────────────────────────────────────────────────────────── */
.rz-header {
    background: #000000 !important;
    border-bottom: none !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.40) !important;
}

/* Sidebar toggle: white icon, green hover (not lila) */
.rz-header .rz-sidebar-toggle {
    color: #ffffff !important;
}

.rz-header .rz-sidebar-toggle:hover,
.rz-header .rz-sidebar-toggle:focus {
    background: rgba(255,255,255,.10) !important;
    color: var(--palette-action) !important;
}

/* Kill the lila/purple ripple on toggle */
.rz-header .rz-sidebar-toggle::after,
.rz-header .rz-sidebar-toggle .rz-ripple-element {
    background: var(--palette-action) !important;
    opacity: 0.15;
}

/* All buttons inside the header: white text */
.rz-header button,
.rz-header .rz-button {
    color: #ffffff !important;
}

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

/* ─────────────────────────────────────────────────────────────────
   6. SIDEBAR & NAVIGATION
   ───────────────────────────────────────────────────────────────── */
.rz-sidebar {
    background: var(--rz-sidebar-bg) !important;
    border-right: none !important;
}

.rz-sidebar .rz-panel-menu {
    padding: 0.75rem 0.5rem;
    flex: 1;
    overflow-y: auto;
}

/* ── Nav item: base state ── */
.rz-sidebar .rz-panel-menu-item-link,
.rz-sidebar .rz-navigation-item-link {
    border-radius: 9999px !important;
    margin: 2px 0 !important;
    padding: 0.65rem 1.25rem !important;
    font-family: var(--font-primary) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--md-on-surface-variant) !important;
    background: transparent !important;
    transition: background 120ms ease !important;
}

/* Force text spans to inherit link color — fixes "Dashboard always green" */
.rz-sidebar .rz-panel-menu-item-text,
.rz-sidebar .rz-navigation-item-text {
    color: inherit !important;
    font-family: inherit !important;
}

/* Icons inherit link color */
.rz-sidebar .rz-panel-menu-item-icon,
.rz-sidebar .rz-navigation-item-icon {
    color: inherit !important;
    opacity: 0.8;
}

/* ── Nav item: hover state ── */
/* Target both <a> and parent <li> — Radzen applies state to <li> in Material theme */
.rz-sidebar .rz-panel-menu-item:hover,
.rz-sidebar .rz-navigation-item:hover {
    background: transparent !important;
}

.rz-sidebar .rz-panel-menu-item-link:hover,
.rz-sidebar .rz-navigation-item-link:hover {
    background: color-mix(in srgb, var(--md-on-surface) 8%, transparent) !important;
    color: var(--md-on-surface) !important;
}

/* Radzen state-highlight / state-hover override */
.rz-sidebar .rz-state-highlight,
.rz-sidebar .rz-state-hover {
    background: transparent !important;
}

/* ── Nav item: active/selected state (M3 filled pill) ── */
.rz-sidebar .rz-panel-menu-item-link.active,
.rz-sidebar .rz-navigation-item-link.active,
.rz-sidebar .rz-state-focused > .rz-panel-menu-item-link,
.rz-sidebar .rz-state-focused > .rz-navigation-item-link {
    background: var(--md-primary-container) !important;
    color: var(--md-on-primary-container) !important;
    font-weight: 700 !important;
}

/* Container on active <li> transparent */
.rz-sidebar .rz-state-focused {
    background: transparent !important;
}

/* Active icon: on-primary-container color */
.rz-sidebar .rz-panel-menu-item-link.active .rz-panel-menu-item-icon,
.rz-sidebar .rz-navigation-item-link.active .rz-navigation-item-icon {
    opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────
   7. BODY BACKGROUND
   ───────────────────────────────────────────────────────────────── */
.rz-body {
    background: var(--md-background) !important;
    padding: 1.5rem !important;
}

/* ─────────────────────────────────────────────────────────────────
   8. CARDS — MD3 elevation 1 (tonal surface)
   ───────────────────────────────────────────────────────────────── */
.rz-card {
    border-radius: 12px !important;
    border: none !important;
    background: var(--md-surface-1) !important;
    box-shadow: 0px 1px 2px rgba(0,0,0,.08), 0px 1px 3px 1px rgba(0,0,0,.05) !important;
    transition: box-shadow 200ms ease;
}

.rz-card:hover {
    box-shadow: 0px 1px 2px rgba(0,0,0,.10), 0px 2px 6px 2px rgba(0,0,0,.07) !important;
}

/* ─────────────────────────────────────────────────────────────────
   9. DATA GRID
   ───────────────────────────────────────────────────────────────── */
.rz-datatable thead th {
    background: var(--md-surface-2) !important;
    font-family: var(--font-primary) !important;
    font-weight: 700 !important;
    color: var(--md-on-surface-variant) !important;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--md-outline-variant) !important;
}

.rz-datatable tbody td {
    border-bottom: 1px solid var(--md-outline-variant) !important;
    color: var(--md-on-surface);
    font-size: 0.9rem;
}

.rz-datatable tbody tr {
    background: var(--md-surface);
    transition: background 120ms ease;
}

.rz-datatable tbody tr:hover {
    background: color-mix(in srgb, var(--md-primary) 8%, var(--md-surface)) !important;
}

.rz-datatable-scrollable {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--md-outline-variant);
}

/* ─────────────────────────────────────────────────────────────────
   10. BUTTONS — M3 fully rounded (stadium shape)
   ───────────────────────────────────────────────────────────────── */
.rz-button {
    border-radius: 9999px !important;
    font-family: var(--font-primary) !important;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    transition: box-shadow 120ms ease, background 120ms ease;
}

.rz-button.rz-variant-filled {
    background: var(--md-primary) !important;
    color: var(--md-on-primary) !important;
    border: none !important;
    box-shadow: 0px 1px 2px rgba(0,0,0,.20);
}

.rz-button.rz-variant-filled:hover {
    background: var(--palette-primary) !important;
    box-shadow: 0px 1px 2px rgba(0,0,0,.20), 0px 2px 6px 2px rgba(0,0,0,.12);
}

.rz-button.rz-variant-outlined {
    border: 1px solid var(--md-outline) !important;
    color: var(--md-primary) !important;
    background: transparent !important;
}

.rz-button.rz-variant-outlined:hover {
    background: color-mix(in srgb, var(--md-primary) 8%, transparent) !important;
}

.rz-button.rz-variant-flat,
.rz-button.rz-variant-text {
    background: transparent !important;
    color: var(--md-primary) !important;
}

.rz-button.rz-variant-flat:hover,
.rz-button.rz-variant-text:hover {
    background: color-mix(in srgb, var(--md-primary) 8%, transparent) !important;
}

/* Danger tonal */
.rz-button.rz-danger.rz-variant-flat,
.rz-button.rz-danger.rz-variant-text {
    color: var(--md-error) !important;
}

.rz-button.rz-danger.rz-variant-flat:hover,
.rz-button.rz-danger.rz-variant-text:hover {
    background: color-mix(in srgb, var(--md-error) 8%, transparent) !important;
}

/* Kill purple ripple on all buttons */
.rz-button .rz-ripple-element {
    background: currentColor !important;
    opacity: 0.1;
}

/* ─────────────────────────────────────────────────────────────────
   11. FORM INPUTS — MD3 outlined style
   ───────────────────────────────────────────────────────────────── */
.rz-textbox,
.rz-numeric {
    border-radius: 4px !important;
    border: 1px solid var(--md-outline) !important;
    background: transparent !important;
    transition: border-color 150ms ease;
}

.rz-textbox:focus,
.rz-numeric:focus {
    border-color: var(--md-primary) !important;
    outline: none;
    box-shadow: inset 0 0 0 1px var(--md-primary);
}

/* Date picker: single border on the wrapper, no inner double-border */
.rz-datepicker {
    border-radius: 4px !important;
    border: 1px solid var(--md-outline) !important;
    background: transparent !important;
}

.rz-datepicker .rz-inputtext {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.rz-datepicker input {
    font-family: var(--font-secondary);
}

.rz-textarea {
    border-radius: 4px !important;
    border: 1px solid var(--md-outline) !important;
    background: transparent !important;
    font-family: var(--font-secondary);
}

.rz-textarea:focus {
    border-color: var(--md-primary) !important;
    outline: none;
    box-shadow: inset 0 0 0 1px var(--md-primary);
}

.rz-label {
    font-family: var(--font-primary) !important;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--md-on-surface-variant) !important;
}

.rz-dropdown-panel {
    border-radius: 4px !important;
    border: 1px solid var(--md-outline-variant) !important;
    box-shadow: 0px 2px 6px 2px rgba(0,0,0,.10) !important;
}

/* ─────────────────────────────────────────────────────────────────
   12. DIALOG — MD3 extra-rounded (28px)
   ───────────────────────────────────────────────────────────────── */
.rz-dialog {
    border-radius: 28px !important;
    background: var(--md-surface-3) !important;
    box-shadow: 0px 4px 8px 3px rgba(0,0,0,.12), 0px 1px 3px rgba(0,0,0,.25) !important;
    border: none !important;
}

.rz-dialog-titlebar {
    border-bottom: 1px solid var(--md-outline-variant) !important;
    padding: 1.25rem 1.5rem !important;
    border-radius: 28px 28px 0 0;
    background: var(--md-surface-3) !important;
}

.rz-dialog-titlebar .rz-dialog-title {
    font-family: var(--font-primary) !important;
    color: var(--md-on-surface) !important;
    font-weight: 700;
    font-size: 1.1rem;
}

.rz-dialog-content {
    padding: 1.5rem !important;
    color: var(--md-on-surface-variant);
    font-family: var(--font-secondary);
}

.rz-dialog-mask {
    background: rgba(0,0,0,.40) !important;
}

/* ─────────────────────────────────────────────────────────────────
   13. NOTIFICATIONS & TOOLTIP
   ───────────────────────────────────────────────────────────────── */
.rz-notification {
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.18) !important;
    border: none !important;
    outline: none !important;
    overflow: hidden;
    font-family: var(--font-primary);
}

/* Suppress focus-visible outline inside notifications (close button etc.) */
.rz-notification *:focus-visible,
.rz-notification:focus-visible {
    outline: none !important;
}

.rz-tooltip {
    border-radius: 4px;
    background: var(--md-on-surface) !important;
    color: var(--md-surface) !important;
    font-family: var(--font-primary);
    font-size: 0.8rem;
}

/* ─────────────────────────────────────────────────────────────────
   14. FIELDSET
   ───────────────────────────────────────────────────────────────── */
.rz-fieldset {
    border: 1px solid var(--md-outline-variant) !important;
    border-radius: 12px !important;
    padding: 1.25rem !important;
    margin: 1rem 0 !important;
    background: var(--md-surface-1);
}

.rz-fieldset legend {
    font-family: var(--font-primary) !important;
    color: var(--md-on-surface) !important;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0 0.5rem;
}

/* ─────────────────────────────────────────────────────────────────
   15. SCROLLBAR
   ───────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--md-outline-variant);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--md-outline); }

/* ─────────────────────────────────────────────────────────────────
   16. FOCUS (accessibility)
   ───────────────────────────────────────────────────────────────── */
*:focus-visible {
    outline: 3px solid var(--md-primary);
    outline-offset: 2px;
    border-radius: 4px;
}