/* -------------------------
   Design Tokens
------------------------- */
:root {
    /* Brand */
    --brand-blue: #1F3C88;
    --brand-green: #1E8E5A;
    /* Light mode */
    --bg: #F6F8FC;
    --card: #FFFFFF;
    --text: #111827;
    /* Status */
    --status-pending: #FEF3C7;
    --status-inprogress: #DBEAFE;
    --status-confirmed: #DCFCE7;
    --status-cancelled: #FEE2E2;
    /* Spacing */
    --s-4: 4px;
    --s-8: 8px;
    --s-16: 16px;
    --s-24: 24px;
    --s-32: 32px;
    /* Radius */
    --r-6: 6px;
    --r-8: 8px;
    --r-12: 12px;
    --r-16: 16px;
}

/* =========================================================
   RADZEN BUTTONS
========================================================= */
.rz-button{
    border-radius: var(--r-6) !important;
}

/* =========================================================
   RADZEN: REMOVE RIPPLE / INK EFFECTS (cleaner)
========================================================= */
.rz-ripple,
.rz-ripple-container,
.rz-ink,
.rz-ink-container {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Sometimes ripple is applied via pseudo-elements */
*[class*="ripple"]::before,
*[class*="ripple"]::after {
    display: none !important;
    opacity: 0 !important;
}

/* =========================================================
   BUTTONS (ab2) - Variant + Color follow the same accent
========================================================= */
.ab2 {
    /* Defaults (overridden by .ab2--{color}) */
    --ab2-accent: var(--brand-blue);
    --ab2-radius: var(--r-8);
    --ab2-bg: var(--card);
    --ab2-fg: var(--text);
    --ab2-border: rgba(17, 24, 39, 0.12);
    --ab2-shadow: 0 1px 2px rgba(17, 24, 39, 0.10), 0 8px 20px rgba(17, 24, 39, 0.06);
    --ab2-shadow-hover: 0 2px 4px rgba(17, 24, 39, 0.12), 0 12px 28px rgba(17, 24, 39, 0.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border-radius: var(--ab2-radius);
    border: 1px solid var(--ab2-border);
    background: var(--ab2-bg);
    color: var(--ab2-fg);
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1;
    box-shadow: var(--ab2-shadow);
    cursor: pointer;
    user-select: none;
    transition: transform .08s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, opacity .18s ease;
}

    .ab2:hover {
        box-shadow: var(--ab2-shadow-hover);
        transform: translateY(-1px);
    }

    .ab2:active {
        transform: translateY(0px);
        box-shadow: var(--ab2-shadow);
    }

    .ab2:focus-visible {
        outline: none;
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--ab2-accent) 22%, transparent), var(--ab2-shadow-hover);
        border-color: color-mix(in srgb, var(--ab2-accent) 35%, transparent);
    }

.ab2--disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.ab2--full {
    width: 100%;
}

/* Sizes (compact) */
.ab2--sm {
    font-size: 0.85rem;
    padding: 0.18rem 0.6rem;
    min-height: 28px;
}

.ab2--md {
    font-size: 0.95rem;
    padding: 0.22rem 0.7rem;
    min-height: 32px;
}

.ab2--lg {
    font-size: 1rem;
    padding: 0.28rem 0.9rem;
    min-height: 36px;
}

/* Icons */
.ab2__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .ab2__icon :is(svg, i) {
        width: 18px;
        height: 18px;
    }

.ab2__label {
    white-space: nowrap;
}

/* Icon-only button */
.ab2--icononly {
    padding: 0.22rem;
    min-width: 32px;
}

/* Loading */
.ab2--loading {
    pointer-events: none;
}

.ab2__spinner {
    width: 1.05em;
    height: 1.05em;
    border-radius: 999px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: ab2spin .75s linear infinite;
}

@keyframes ab2spin {
    to {
        transform: rotate(360deg);
    }
}

/* Variants (ALL follow --ab2-accent) */
.ab2--filled {
    --ab2-bg: var(--ab2-accent);
    --ab2-fg: #ffffff;
    --ab2-border: rgba(0,0,0,0);
}

.ab2--soft {
    --ab2-bg: color-mix(in srgb, var(--ab2-accent) 12%, white);
    --ab2-fg: var(--text);
    --ab2-border: color-mix(in srgb, var(--ab2-accent) 20%, transparent);
}

.ab2--outline {
    --ab2-bg: var(--card);
    --ab2-fg: var(--ab2-accent);
    --ab2-border: color-mix(in srgb, var(--ab2-accent) 35%, transparent);
}

.ab2--ghost {
    --ab2-bg: color-mix(in srgb, var(--ab2-accent) 10%, white);
    --ab2-fg: var(--ab2-accent);
    --ab2-border: transparent;
    box-shadow: none;
}

    .ab2--ghost:hover {
        background: color-mix(in srgb, var(--ab2-accent) 14%, white);
    }

    .ab2--ghost:active {
        background: color-mix(in srgb, var(--ab2-accent) 18%, white);
    }

/* Light = for dark backgrounds */
.ab2--light {
    --ab2-bg: rgba(255, 255, 255, 0.14);
    --ab2-fg: #ffffff;
    --ab2-border: rgba(255, 255, 255, 0.18);
    box-shadow: none;
}

/* ButtonColor mapping (distinct colors) */
.ab2--neutral {
    --ab2-accent: #334155;
}
/* slate */
.ab2--primary {
    --ab2-accent: var(--brand-green);
}
/* brand green */
.ab2--secondary {
    --ab2-accent: var(--brand-blue);
}
/* brand blue */
.ab2--success {
    --ab2-accent: #22C55E;
}
/* success green (lighter) */
.ab2--warning {
    --ab2-accent: #F59E0B;
}
/* amber */
.ab2--danger {
    --ab2-accent: #EF4444;
}
/* red */

/* Label / icon space distribution */
.ab2 {
    display: flex;
}

.ab2__label {
    flex: 1 1 75%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ab2__icon {
    flex: 0 0 25%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ab2__icon--start,
.ab2__icon--end {
    flex: 0 0 12.5%;
}

.ab2--icononly .ab2__icon {
    flex: 1;
}