/* AlertMed custom styles */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Flash message (toast) animation */
.flash-message {
    animation: flash-slide-down 0.35s cubic-bezier(0.21, 1.02, 0.73, 1);
}

@keyframes flash-slide-down {
    from {
        opacity: 0;
        transform: translateY(-1rem) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── Tom Select — Modern DaisyUI Overrides ── */

/* Reset Tom Select defaults */
.ts-wrapper {
    position: relative;
}

/* Control (the input area) */
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
    background-color: oklch(var(--b1));
    color: oklch(var(--bc));
    border: 1px solid oklch(var(--bc) / 0.2);
    border-radius: var(--rounded-btn, 0.5rem);
    padding: 0.5rem 0.75rem;
    min-height: 3rem;
    font-size: 0.875rem;
    line-height: 1.5;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

/* Focus ring — matches DaisyUI input focus */
.ts-wrapper.single.focus .ts-control,
.ts-wrapper.multi.focus .ts-control {
    border-color: oklch(var(--p));
    box-shadow: 0 0 0 3px oklch(var(--p) / 0.15);
    outline: none;
}

/* Dropdown panel */
.ts-dropdown {
    background-color: oklch(var(--b1));
    color: oklch(var(--bc));
    border: 1px solid oklch(var(--bc) / 0.12);
    border-radius: 0.75rem;
    box-shadow:
        0 4px 6px -1px rgb(0 0 0 / 0.07),
        0 10px 15px -3px rgb(0 0 0 / 0.1);
    margin-top: 6px;
    padding: 0.375rem;
    z-index: 100;
    overflow: hidden;
    max-height: 16rem;
}

.ts-dropdown .ts-dropdown-content {
    max-height: 15rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: oklch(var(--bc) / 0.15) transparent;
}

/* Dropdown options */
.ts-dropdown .option {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: background-color 0.1s ease;
    margin-bottom: 1px;
}

.ts-dropdown .option:hover,
.ts-dropdown .active {
    background-color: oklch(var(--p) / 0.08);
    color: oklch(var(--bc));
}

.ts-dropdown .option.selected {
    background-color: oklch(var(--p) / 0.12);
    font-weight: 500;
}

.ts-dropdown .option.selected::after {
    content: "✓";
    float: right;
    color: oklch(var(--p));
    font-weight: 600;
    font-size: 0.8rem;
}

/* Multi-select chips/tags */
.ts-wrapper.multi .ts-control > .item {
    background-color: oklch(var(--p) / 0.1) !important;
    color: oklch(var(--p)) !important;
    border: 1px solid oklch(var(--p) / 0.2) !important;
    border-radius: 9999px !important;
    padding: 0.25rem 0.625rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500;
    line-height: 1.25;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ts-wrapper.multi .ts-control > .item:hover {
    background-color: oklch(var(--p) / 0.18) !important;
    border-color: oklch(var(--p) / 0.35) !important;
}

/* Remove button on chips */
.ts-wrapper.multi .ts-control > .item .remove {
    border: none !important;
    border-left: none !important;
    margin: 0 !important;
    padding: 0 0 0 0.25rem !important;
    color: oklch(var(--p) / 0.6) !important;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    transition: color 0.1s ease;
}

.ts-wrapper.multi .ts-control > .item .remove:hover {
    color: oklch(var(--er)) !important;
    background: transparent !important;
}

/* Text input inside control */
.ts-control input {
    color: oklch(var(--bc)) !important;
    font-size: 0.875rem;
    line-height: 1.25 !important;
    padding: 0.25rem 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}

.ts-control input::placeholder {
    color: oklch(var(--bc) / 0.35) !important;
}

/* No results message */
.ts-dropdown .no-results {
    padding: 1rem 0.75rem;
    font-size: 0.875rem;
    color: oklch(var(--bc) / 0.4);
    text-align: center;
}

/* Single select — caret */
.ts-wrapper.single .ts-control::after {
    border-color: oklch(var(--bc) / 0.35) transparent transparent transparent;
}

.ts-wrapper.single.focus .ts-control::after {
    border-color: oklch(var(--p)) transparent transparent transparent;
}