/*
 * Carbon Design System Inspired Theme Override for Radzen Blazor
 *
 * This file uses Carbon's color palette, sharp edges (0-2px border radius),
 * and flat aesthetic (minimal shadows) to override Radzen's defaults.
 *
 * Link this file AFTER your chosen Radzen base theme (e.g., material-base.css).
 */

/* ---------------------------------------------------- */
/* A. GLOBAL CSS VARIABLE OVERRIDES (Carbon Palette & Geometry) */
/* ---------------------------------------------------- */
:root {
    /* ------------------- Typography ------------------- */
    /* Carbon uses IBM Plex Sans. Using a modern system font stack as fallback. */
    --rz-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --rz-font-size: 0.875rem; /* Equivalent to Carbon's body-short-01 */
    /* ------------------- Colors (Based on Carbon) ------------------- */
    /* Primary Color (Interactive 01: IBM Blue) */
    --rz-primary: #0f62fe;
    --rz-primary-lighter: #edf5ff;
    --rz-primary-darker: #0353e9;
    /* Backgrounds & Base Tints (UI 01, UI 02, UI 03) */
    --rz-base-100: #f4f4f4; /* UI Background */
    --rz-base-200: #e0e0e0; /* Subtly darker elements/borders */
    --rz-base-300: #c6c6c6; /* Border color */
    --rz-base-400: #a8a8a8;
    --rz-base-500: #8d8d8d;
    --rz-base-600: #6f6f6f;
    --rz-base-900: #161616; /* Darkest Text (Text 01) */

    --rz-text-color: var(--rz-base-900); /* Dark text on light background */
    --rz-border-color: var(--rz-base-300);
    /* System Backgrounds */
    --rz-background-color: var(--rz-base-100);
    --rz-content-background-color: var(--rz-base-100);
    --rz-sidebar-background-color: #ffffff;
    --rz-header-background-color: #ffffff;
    /* ------------------- Geometry (Sharpness & Flatness) ------------------- */
    --rz-border-radius: 0px; /* Carbon uses 0px radius for many components */
    --rz-box-shadow: none; /* Remove box shadows for a flat look */
    --rz-shadow-input: none;
    --rz-shadow-popover: 0 2px 6px rgba(0, 0, 0, 0.15); /* Slight shadow only for floating elements */
    /* Focus (Mandatory 2px blue outline for accessibility) */
    --rz-input-focus-border-color: #0f62fe;
    --rz-input-focus-box-shadow: 0 0 0 2px #0f62fe;
}

/* ---------------------------------------------------- */
/* B. COMPONENT OVERRIDES (Targeting specific Radzen classes) */
/* ---------------------------------------------------- */

/* --- HEADER FIX: Ensures dark text/icons on the white background --- */
.rz-header {
    /* Enforce background color and set high-contrast text color */
    background-color: var(--rz-header-background-color) !important;
    color: var(--rz-base-900) !important;
    /* Add a subtle separator line below the header */
    border-bottom: 1px solid var(--rz-base-200);
    box-shadow: none !important;
}

/* Fix: Ensure the sidebar toggle icon is visible (dark) */
.rz-sidebar-toggle {
    color: var(--rz-base-900) !important;
    background-color: transparent !important;
}

/* Fix: Ensure any links inside the header are also dark */
.rz-header a {
    color: var(--rz-base-900) !important;
}

/* --- Calendar Specific Fixes --- */

/* 1. Fix the DatePicker Icon cut-off issue (Applies to RadzenDatePicker/Calendar) */
/* Adjust padding on the text input part to make space for the icon */
.rz-calendar-container .rz-inputtext {
    padding-right: 2.5rem !important; /* Push text left to clear the icon area */
}

/* Ensure the calendar icon trigger button is flat and properly spaced */
.rz-calendar-trigger {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    /* Add padding to ensure the icon itself is not clipped to the right edge */
    padding: 0 0.5rem !important;
}

/* 2. Add internal padding to the calendar header for spacing the icons/dropdowns */
.rz-calendar .rz-calendar-header {
    padding: 0.5rem 1rem !important; /* Ensure breathing room on the left/right */
}

/* 3. Style the navigation arrows (Previous/Next) */
.rz-calendar-prev, .rz-calendar-next {
    color: var(--rz-base-900) !important; /* Dark icon color */
    background-color: transparent !important;
    border: none !important;
    padding: 0.25rem;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* 4. Calendar Dropdowns Fix: Remove border for flat Carbon look */
/* Target dropdowns and their labels when inside a calendar (.rz-calendar) */
.rz-calendar .rz-dropdown,
.rz-calendar .rz-dropdown-label {
    border: none !important;
    box-shadow: none !important;
}


/* --- Buttons (Clean, Primary, and Ghost styles) --- */
.rz-button {
    box-shadow: none !important;
    border-radius: 0px !important;
    font-weight: 400;
    text-transform: none;
    padding: 0.5rem 1rem;
    height: 2.5rem;
}

/* Exception: Remove padding from datepicker field buttons */
.rz-button.rz-datepicker-field-button {
    padding: 0 !important;
}

/* Button size variants */
.rz-button-sm {
    padding: 0.25rem 0.75rem !important;
    height: 2rem !important;
    font-size: 0.75rem !important;
}

.rz-button-lg {
    padding: 0.75rem 1.5rem !important;
    height: 3rem !important;
    font-size: 1rem !important;
}

/* Button color variants */
.rz-button-primary {
    background-color: var(--rz-primary);
    border-color: var(--rz-primary);
    color: white;
}

    .rz-button-primary:hover,
    .rz-button-primary:focus {
        background-color: var(--rz-primary-darker);
        border-color: var(--rz-primary-darker);
    }

.rz-button-secondary,
.rz-button-info,
.rz-button-light {
    background-color: transparent;
    color: var(--rz-text-color);
    border: 1px solid var(--rz-base-300);
}

    .rz-button-secondary:hover,
    .rz-button-info:hover,
    .rz-button-light:hover {
        background-color: var(--rz-base-200);
        color: var(--rz-base-900);
    }

.rz-button-success {
    background-color: #198754;
    border-color: #198754;
    color: white;
}

    .rz-button-success:hover,
    .rz-button-success:focus {
        background-color: #157347;
        border-color: #146c43;
    }

.rz-button-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

    .rz-button-danger:hover,
    .rz-button-danger:focus {
        background-color: #bb2d3b;
        border-color: #b02a37;
    }

.rz-button-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: var(--rz-base-900);
}

    .rz-button-warning:hover,
    .rz-button-warning:focus {
        background-color: #ffca2c;
        border-color: #ffc720;
    }

/* --- Bootstrap Buttons (for pages using Bootstrap classes) --- */
.btn {
    border-radius: 0px !important;
    box-shadow: none !important;
    font-weight: 400;
    text-transform: none;
    padding: 0.5rem 1rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-sm {
    padding: 0.25rem 0.75rem !important;
    height: 2rem !important;
    font-size: 0.75rem !important;
}

.btn-lg {
    padding: 0.75rem 1.5rem !important;
    height: 3rem !important;
    font-size: 1rem !important;
}

.btn-primary {
    background-color: var(--rz-primary) !important;
    border-color: var(--rz-primary) !important;
    color: white !important;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        background-color: var(--rz-primary-darker) !important;
        border-color: var(--rz-primary-darker) !important;
        color: white !important;
    }

.btn-secondary {
    background-color: transparent !important;
    color: var(--rz-text-color) !important;
    border: 1px solid var(--rz-base-300) !important;
}

    .btn-secondary:hover,
    .btn-secondary:focus,
    .btn-secondary:active {
        background-color: var(--rz-base-200) !important;
        color: var(--rz-base-900) !important;
        border-color: var(--rz-base-400) !important;
    }

.btn-success {
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: white !important;
}

    .btn-success:hover,
    .btn-success:focus,
    .btn-success:active {
        background-color: #157347 !important;
        border-color: #146c43 !important;
        color: white !important;
    }

.btn-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: white !important;
}

    .btn-danger:hover,
    .btn-danger:focus,
    .btn-danger:active {
        background-color: #bb2d3b !important;
        border-color: #b02a37 !important;
        color: white !important;
    }

.btn-warning {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: var(--rz-base-900) !important;
}

    .btn-warning:hover,
    .btn-warning:focus,
    .btn-warning:active {
        background-color: #ffca2c !important;
        border-color: #ffc720 !important;
        color: var(--rz-base-900) !important;
    }

.btn-info {
    background-color: #0dcaf0 !important;
    border-color: #0dcaf0 !important;
    color: var(--rz-base-900) !important;
}

    .btn-info:hover,
    .btn-info:focus,
    .btn-info:active {
        background-color: #31d2f2 !important;
        border-color: #25cff2 !important;
        color: var(--rz-base-900) !important;
    }

.btn-light {
    background-color: var(--rz-base-200) !important;
    border-color: var(--rz-base-300) !important;
    color: var(--rz-base-900) !important;
}

    .btn-light:hover,
    .btn-light:focus,
    .btn-light:active {
        background-color: var(--rz-base-300) !important;
        border-color: var(--rz-base-400) !important;
        color: var(--rz-base-900) !important;
    }

.btn-dark {
    background-color: var(--rz-base-900) !important;
    border-color: var(--rz-base-900) !important;
    color: white !important;
}

    .btn-dark:hover,
    .btn-dark:focus,
    .btn-dark:active {
        background-color: var(--rz-base-600) !important;
        border-color: var(--rz-base-600) !important;
        color: white !important;
    }

/* Bootstrap outline buttons */
.btn-outline-primary {
    background-color: transparent !important;
    color: var(--rz-primary) !important;
    border: 1px solid var(--rz-primary) !important;
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus,
    .btn-outline-primary:active {
        background-color: var(--rz-primary) !important;
        border-color: var(--rz-primary) !important;
        color: white !important;
    }

.btn-outline-secondary {
    background-color: transparent !important;
    color: var(--rz-base-600) !important;
    border: 1px solid var(--rz-base-300) !important;
}

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus,
    .btn-outline-secondary:active {
        background-color: var(--rz-base-600) !important;
        border-color: var(--rz-base-600) !important;
        color: white !important;
    }

/* Bootstrap close buttons */
.btn-close {
    border-radius: 0px !important;
    box-shadow: none !important;
}

/* Bootstrap nav-link buttons (for tabs) */
.nav-link {
    border-radius: 0px !important;
    color: var(--rz-text-color) !important;
}

    .nav-link:hover {
        color: var(--rz-primary) !important;
    }

    .nav-link.active {
        color: var(--rz-primary) !important;
        border-color: var(--rz-primary) !important;
        background-color: transparent !important;
    }


/* --- Forms (Inputs, Dropdowns, Checkboxes) --- */
.rz-textbox,
.rz-inputtext,
.rz-inputnumber,
.rz-dropdown-label,
.rz-dropdown {
    border-radius: 0px !important;
    border: 1px solid var(--rz-base-300);
    background-color: #ffffff;
}
    /* Re-applying border rule for general dropdown, ensuring the calendar fix above takes precedence */

    .rz-textbox:focus,
    .rz-inputtext:focus,
    .rz-inputnumber:focus,
    .rz-dropdown-label:focus,
    .rz-dropdown:focus {
        outline: none;
        border-color: var(--rz-primary);
        box-shadow: var(--rz-input-focus-box-shadow) !important;
    }

/* Fix for Radzen dropdowns inside Bootstrap form containers */
.rz-dropdown,
.rz-dropdown-label {
    box-shadow: none !important;
}

/* Remove any internal borders that Bootstrap might add to dropdowns */
.rz-dropdown .rz-dropdown-items,
.rz-dropdown .rz-dropdown-item {
    border: none !important;
}

/* Ensure dropdown panels have consistent styling */
.rz-dropdown-panel {
    border: 1px solid var(--rz-base-300) !important;
    border-radius: 0px !important;
    box-shadow: var(--rz-shadow-popover) !important;
}

/* Bootstrap form controls - ensure they don't interfere with Radzen components */
.form-control.rz-dropdown,
.form-control .rz-dropdown {
    border: 1px solid var(--rz-base-300) !important;
    border-radius: 0px !important;
    box-shadow: none !important;
}

/* Override Bootstrap's form-control styling when applied to Radzen components */
.rz-dropdown.form-control {
    height: auto !important;
    padding: 0 !important;
}

/* Bootstrap form labels should use Carbon colors */
.form-label {
    color: var(--rz-text-color) !important;
    font-weight: 400 !important;
}

/* --- Data Grid & Table (Crisp, defined lines) --- */
.rz-datagrid {
    border: 1px solid var(--rz-base-300);
    border-radius: 0px;
}

.rz-grid-table thead th {
    background-color: var(--rz-base-100);
    color: var(--rz-text-color);
    font-weight: 400;
    border-bottom: 1px solid var(--rz-base-300);
    padding: 0.75rem 1rem;
}

.rz-grid-table tbody tr:hover {
    background-color: var(--rz-base-200);
}

/* --- Card/Panel (Flat and Minimal) --- */
.rz-card,
.rz-panel {
    box-shadow: none !important;
    border: 1px solid var(--rz-base-300) !important;
    background-color: #ffffff;
    border-radius: 0px;
}

/* --- Badges (Sharp, flat design) --- */
.rz-badge,
.badge {
    border-radius: 0px !important;
    font-weight: 400;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Badge color variants */
.rz-badge-primary,
.badge-primary {
    background-color: var(--rz-primary) !important;
    color: white !important;
}

.rz-badge-secondary,
.badge-secondary {
    background-color: var(--rz-base-300) !important;
    color: var(--rz-base-900) !important;
}

.rz-badge-success,
.badge-success {
    background-color: #198754 !important;
    color: white !important;
}

.rz-badge-danger,
.badge-danger {
    background-color: #dc3545 !important;
    color: white !important;
}

.rz-badge-warning,
.badge-warning {
    background-color: #ffc107 !important;
    color: var(--rz-base-900) !important;
}

.rz-badge-info,
.badge-info {
    background-color: #0dcaf0 !important;
    color: var(--rz-base-900) !important;
}

.rz-badge-light,
.badge-light {
    background-color: var(--rz-base-200) !important;
    color: var(--rz-base-900) !important;
}

.rz-badge-dark,
.badge-dark {
    background-color: var(--rz-base-900) !important;
    color: white !important;
}

/* --- Tabs (Underline style) --- */
.rz-tabview .rz-tabview-nav li a {
    border-radius: 0;
    color: var(--rz-text-color);
}

.rz-tabview .rz-tabview-nav li.rz-state-active a {
    color: var(--rz-primary);
    border-color: var(--rz-primary);
    border-bottom: 2px solid var(--rz-primary);
    background-color: transparent;
}