.action-button-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    color: #b8b8b8;
    background-color: #f8f8f8;
}

.custom-shadow {
    box-shadow: 0 .25rem .25rem rgb(136 136 136 / 0.025) !important;
}

.custom-shadow-active {
    box-shadow: 0 1rem 1.5rem rgb(136 136 136 / 0.3) !important;
}

.custom-gap-1 {
    gap: 4px !important;
}

.custom-gap-2 {
    gap: 8px !important;
}

.custom-gap-3 {
    gap: 12px !important;
}

.custom-gap-row-3 {
    row-gap: 12px !important;
}

.bg-amber {
    background-color: rgb(254 243 199) !important;
}

.bg-amber-dark {
    background-color: rgb(253 230 138) !important;
}

.bg-amber-light {
    background-color: rgb(252, 244, 213) !important;
}

.bg-blue {
    background-color: rgb(219 234 254) !important;
}

.bg-blue-dark {
    background-color: rgb(187 219 255) !important;
}

.bg-blue-light {
    background-color: rgb(219 234 254) !important;
}

.bg-green {
    background-color: rgb(220 252 231) !important;
}

.bg-green-dark {
    background-color: rgb(34, 197, 94) !important;
}

.bg-green-light {
    background-color: rgb(209, 231, 221) !important;
}

.border-green {
    border: 1px solid rgb(164, 190, 179);
}

.border-green-dark {
    border: 2px solid rgb(46, 245, 162) !important;
}

.border-blue {
    border: 1px solid rgb(187, 219, 255) !important;
}

.border-blue-dark {
    border: 2px solid #027abb !important;
}

.border-blue-light {
    border: 1px solid rgb(219, 234, 254) !important;
}

.bg-gray {
    background-color: rgb(197, 198, 199) !important;
}

.bg-gray-dark {
    background-color: rgb(156, 163, 175) !important;
}

.bg-gray-light {
    background-color: rgb(229, 231, 235) !important;
}

.border-gray {
    border: 1px solid rgb(193, 193, 194);
}

.custom-bg-amber {
    background-color: rgb(254 243 199) !important;
}

.custom-bg-amber:hover {
    background-color: rgb(253 230 138) !important;
}

.custom-bg-blue {
    background-color: rgb(219 234 254) !important;
}

.custom-bg-blue:hover {
    background-color: rgb(187 219 255) !important;
}

.custom-bg-green {
    background-color: rgb(220 252 231) !important;
}

.custom-bg-green:hover {
    background-color: rgb(163, 250, 211) !important;
}

.custom-bg-gray {
    background-color: rgb(243 244 246) !important;
}

.custom-bg-gray:hover {
    background-color: rgb(210, 211, 212) !important;
}

.custom-text-amber {
    color: #92400E !important;
}

.custom-text-blue {
    color: #1E40AF !important;
}

.custom-text-green {
    color: #166534 !important;
}

.custom-text-gray {
    color: #6B7280 !important;
}

.custom-text-red {
    color: #f42030c4 !important;
}

@keyframes scroll {
    0% {
        left: 10%;
    }
    50% {
        left: 90%;
    }
    100% {
        left: 10%;
    }
}
.spinner-inline {
    position: relative;
    overflow: hidden;
}
.spinner-inline svg {
    position: absolute;
    animation: scroll 1.5s linear infinite;
    margin-left: -2rem;
}
button:disabled {
    opacity: 0.6;
    cursor: not-allowed !important;
}

[v-cloak] {
    display: none !important;
}

/* Fix calendar icon position for mobile date inputs */
.desktop-block-none input[type="date"] {
    padding-right: 2.5rem !important;
    position: relative;
    min-width: 0;
}

/* Webkit browsers (Chrome, Safari, Edge) */
.desktop-block-none input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    opacity: 1;
}

/* Firefox */
.desktop-block-none input[type="date"]::-moz-calendar-picker-indicator {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

/* Auto Renew button loading state */
.renew-button-container.opacity-50 {
    opacity: 0.5;
    pointer-events: none;
}

.renew-button-container.opacity-50 * {
    pointer-events: none;
}