/*
 * Kailo UI Components — Main Stylesheet
 *
 * Usage in host app index.html / App.razor:
 *   <link rel="stylesheet" href="_content/Kailo.Core.UI/styles/kailo.ui-components.css" />
 */

@import url('kailo.fonts.css');
@import url('../fonts/font-awesome/css/all.min.css');
@import url('default-main.css');
@import url('default-main-dark.css');
@import url('kailo.tokens.css');
@import url('kailo.telerik.overrides.css');
@import url('kailo.code-editor.css');
@import url('kailo.popups.css');

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--kailo-font-family);
    font-weight: var(--kailo-font-weight-normal);
    background-color: var(--kailo-color-app-surface);
    color: var(--kailo-color-on-surface);
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--kailo-color-neutral);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--kailo-color-neutral-hover);
    }

/* ===== Shared popup chrome ===== */

@keyframes kailo-popup-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kailo-popup {
    background: var(--kailo-color-surface);
    border: 1px solid var(--kailo-color-border);
    border-radius: var(--kailo-radius-md);
    box-shadow: var(--kailo-shadow-md);
    z-index: 10100;
    overflow: hidden;
    animation: kailo-popup-in 0.15s ease;
}

/* ===== Global validation ===== */

.kailo-label-icon {
    font-size: 0.875em;
    color: var(--kailo-color-on-surface-muted);
    margin-right: var(--kailo-space-1);
    flex-shrink: 0;
}