/* Liquid Glass Theme for Radzen Components */
:root {
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  --glass-highlight: rgba(255, 255, 255, 0.8);
  --button-bg: rgba(13, 110, 253, 0.85);
  --button-border: rgba(13, 110, 253, 0.5);
  --button-shadow: 0 4px 15px rgba(13, 110, 253, 0.25);
}

/* RadzenCard - Liquid Glass Effect */
.rz-card {
  background: var(--glass-bg);
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.rz-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg, 
    transparent, 
    var(--glass-highlight), 
    transparent
  );
  transform: skewX(-15deg);
  pointer-events: none;
  opacity: 0.5;
}

/* RadzenButton - Blue Liquid Glass */
.rz-button {
  background: var(--button-bg);
  border-radius: 12px;
  border: 1px solid var(--button-border);
  box-shadow: var(--button-shadow);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.rz-button:hover {
  box-shadow: 0 8px 20px rgba(13, 110, 253, 0.4);
  transform: translateY(-2px);
}

.rz-button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 10px rgba(13, 110, 253, 0.3);
}

/* RadzenTextBox - White Glass */
.rz-textbox {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
}

.rz-textbox:focus {
  box-shadow: 0 4px 20px rgba(13, 110, 253, 0.15);
  border-color: rgba(13, 110, 253, 0.4);
}

/* RadzenTextArea - White Glass */
.rz-textarea {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.rz-textarea:focus {
  box-shadow: 0 4px 20px rgba(13, 110, 253, 0.15);
  border-color: rgba(13, 110, 253, 0.4);
}

/* RadzenNumeric - White Glass */
.rz-spinner {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Fix for RadzenNumeric spinner alignment */
.rz-spinner {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.rz-spinner input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.5rem;
}

.rz-spinner .rz-spinner-button-icon {
    color: rgba(13, 110, 253, 0.85);
}

.rz-spinner .rz-spinner-buttons {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-left: 1px solid rgba(255, 255, 255, 0.8);
}

.rz-spinner .rz-spinner-button {
    background: rgba(240, 240, 240, 0.5);
    border: none;
    height: 50%;
    padding: 0 0.5rem;
    transition: all 0.2s ease;
}

.rz-spinner .rz-spinner-button:hover {
    background: rgba(220, 220, 220, 0.8);
}

/* Custom reflection effect for inputs */
.reflection-effect {
  position: relative;
  overflow: hidden;
}

.reflection-effect::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transform: rotate(30deg);
  pointer-events: none;
}
/* RadzenNumeric - White Glass */
.rz-spinner {
    display: flex !important; /* Force flex display */
    align-items: stretch !important;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    width: 100%;
    height: 38px; /* Match height with other inputs */
}

    .rz-spinner input {
        flex: 1;
        border: none !important;
        background: transparent;
        padding: 0.5rem;
        height: 100%;
        outline: none;
        box-shadow: none;
    }

    .rz-spinner .rz-spinner-buttons {
        display: flex;
        flex-direction: column;
        border-left: 1px solid rgba(255, 255, 255, 0.8);
        height: 100%;
        width: 2.5rem;
    }

    .rz-spinner .rz-spinner-button {
        flex: 1;
        background: rgba(240, 240, 240, 0.5);
        border: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
    }

        .rz-spinner .rz-spinner-button:first-child {
            border-bottom: 1px solid rgba(255, 255, 255, 0.8);
        }

        .rz-spinner .rz-spinner-button:hover {
            background: rgba(220, 220, 220, 0.8);
        }

    .rz-spinner .rz-spinner-button-icon {
        color: rgba(13, 110, 253, 0.85);
        font-size: 0.8rem;
        margin: 0 auto;
    }

    /* Fix spinner focus states */
    .rz-spinner:focus-within {
        box-shadow: 0 4px 20px rgba(13, 110, 253, 0.15);
        border-color: rgba(13, 110, 253, 0.4);
    }

input[type="number"] {
    height: auto; /* Avoid forcing tall boxes */
    line-height: normal; /* Aligns text and controls vertically */
}

    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        margin: 0;
        position: static; /* Let the browser use default placement */
    }

.rz-numeric {
    display: inline-flex; /* or flex */
    align-items: center; /* vertically align input & buttons */
    width: auto; /* let content define width */
}

.rz-numeric-input {
    flex: 1 1 auto; /* input grows, but leaves room for buttons */
}

.rz-numeric-button {
    /* display: inline-flex;  keep icons centered inside */
    flex-direction: column; /* up/down stacked vertically in same column */
    padding: 0;
    position: absolute; /* let browser place them */
    /* height: 100%;*/
}

.rz-numeric {
    display: grid;
    grid-template-columns: 1fr auto; /* Input takes remaining space, buttons column is sized automatically */
    grid-template-rows: repeat(2, 1fr); /* Two rows for the buttons, each taking equal space */
    grid-template-areas:
        "input up-button"
        "input down-button"; /* Define named areas for easier placement */
    align-items: center; /* Vertically center the items within their grid areas */
}

/* Target the input element within the numeric container */
.rz-numeric-input {
    grid-area: input; /* Place the input in the 'input' grid area */
}

/* Target the up button within the numeric container */
.rz-numeric-button.rz-numeric-up {
    grid-area: up-button; /* Place the up button in the 'up-button' grid area */
}

/* Target the down button within the numeric container */
.rz-numeric-button.rz-numeric-down {
    grid-area: down-button; /* Place the down button in the 'down-button' grid area */
}