/* wwwroot/css/beauty-theme.css */

:root {
    /* Brand */
    --rz-primary: #97CAE0;
    --rz-primary-light: #CBEAF6;
    --rz-primary-lighter: #EAF7FC;
    --rz-primary-dark: #6EB3D0;
    --rz-primary-darker: #3D8CAF;
    /* Beauty neutrals */
    --rz-base-50: #FAFCFD;
    --rz-base-100: #F4F8FA;
    --rz-base-200: #E8F1F5;
    --rz-base-300: #D7E5EB;
    --rz-base-400: #AFC6D0;
    --rz-base-500: #7E99A5;
    --rz-base-600: #5F7782;
    --rz-base-700: #3F5661;
    --rz-base-800: #2A3A44;
    --rz-base-900: #17242B;
    /* Accent */
    --beauty-gold: #D6BFA5;
    --beauty-rose: #E8B8B2;
    --beauty-mint: #BFDCD2;
    --beauty-lavender: #D8D2EE;
    /* Text */
    --rz-text-color: #2A3A44;
    --rz-text-secondary-color: #6B8A99;
    --rz-link-color: #3D8CAF;
    /* Background */
    --rz-body-background-color: #FAFCFD;
    --rz-panel-background-color: #FFFFFF;
    --rz-card-background-color: #FFFFFF;
    /* Shape */
    --rz-border-radius: 16px;
    --rz-button-border-radius: 999px;
    --rz-input-border-radius: 14px;
    --rz-card-border-radius: 22px;
    /* Border & shadow */
    --rz-border-color: #D7E5EB;
    --beauty-shadow-soft: 0 12px 30px rgba(42, 58, 68, 0.08);
    --beauty-shadow-button: 0 8px 18px rgba(111, 179, 208, 0.28);
    /* Typography */
    --rz-font-family: "Inter", "SF Pro Display", "Segoe UI", sans-serif;
}

/* App background */
body {
    background: radial-gradient(circle at top left, rgba(151, 202, 224, 0.28), transparent 36%), linear-gradient(180deg, #FAFCFD 0%, #F4F8FA 100%);
    color: var(--rz-text-color);
}

/* Optional headline style */
.beauty-heading,
h1, h2 {
    font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
    color: #2A3A44;
    letter-spacing: -0.02em;
}

/* Radzen Button Styling */
.rz-button {
    border-radius: var(--rz-button-border-radius);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    box-shadow: none;
    transition: all 0.18s ease;
    text-transform: none;
}
.rz-button-sm {
    border-radius: var(--rz-button-border-radius);
    font-weight: 300;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    box-shadow: none;
    transition: all 0.18s ease;
    text-transform: none;
    padding: 0.25rem;
}
.rz-button-xs {
    border-radius: var(--rz-button-border-radius);
    font-weight: 300;
    font-size: 0.65rem;
    letter-spacing: 0.02em;
    box-shadow: none;
    transition: all 0.18s ease;
    text-transform: none;
    padding: 0.20rem;
}

.rz-button.rz-primary {
    background: #97CAE0;
    color: #FFFFFF;
    border: 1px solid #97CAE0;
}

    .rz-button.rz-secondary {
        background: #EAF7FC;
        color: #3D8CAF;
        border: 1px solid #CBEAF6;
    }

    .rz-button.rz-light {
        background: #FFFFFF;
        color: #3F5661;
        border: 1px solid #D7E5EB;
    }

/* Inputs */
.rz-textbox,
.rz-dropdown,
.rz-datepicker,
.rz-numeric,
.rz-inputtext {
    border-radius: var(--rz-input-border-radius);
    border: 1px solid #D7E5EB;
    background: #FFFFFF;
    color: #2A3A44;
}

    .rz-textbox:focus,
    .rz-inputtext:focus {
        border-color: #97CAE0;
        box-shadow: 0 0 0 4px rgba(151, 202, 224, 0.22);
    }

/* Cards / Panels */
.rz-card,
.rz-panel {
    border-radius: var(--rz-card-border-radius);
    border: 1px solid #E8F1F5;
    box-shadow: var(--beauty-shadow-soft);
    background: rgba(255, 255, 255, 0.92);
}

/* Tabs */
.rz-tabview-nav li.rz-tabview-selected {
    color: #3D8CAF;
    border-bottom-color: #97CAE0;
}

/* DataGrid */
.rz-datatable,
.rz-grid-table {
    border-radius: 18px;
    overflow: hidden;
}

.rz-datatable-thead th {
    background: #EAF7FC;
    color: #2A3A44;
    font-weight: 700;
}

/* Badges / Chips */
.rz-badge,
.rz-chip {
    border-radius: 999px;
    background: #EAF7FC;
    color: #3D8CAF;
}

/* Dialog */
.rz-dialog {
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(42, 58, 68, 0.16);
}

/* Beauty utility classes */
.beauty-card {
    background: #FFFFFF;
    border: 1px solid #E8F1F5;
    border-radius: 24px;
    box-shadow: var(--beauty-shadow-soft);
    padding: 24px;
}

.beauty-gradient {
    background: linear-gradient(135deg, #EAF7FC 0%, #FFFFFF 55%, #F7FBFD 100%);
}

.beauty-gold-text {
    color: var(--beauty-gold);
}