/* assets/css/styles.css */

:root {
    /* LIGHT THEME */
    --background: 248 249 255;
    --on-background: 26 27 35;
    --surface-container-low: 242 243 252;
    --surface-container: 235 235 244;
    --surface-container-highest: 226 226 234;
    --surface-container-lowest: 255 255 255;
    --surface-bright: 253 253 253;
    --surface-variant: 226 226 234;
    --on-surface: 26 27 35;
    --on-surface-variant: 69 70 79;
    --outline: 119 118 128;
    --outline-variant: 198 198 208;
    --primary: 103 80 164;
    --on-primary: 255 255 255;
    --primary-container: 229 222 255;
    --primary-dim: 106 81 181;
    --error: 186 26 26;
    --error-container: 255 218 214;
    --error-dim: 186 26 26;
    --tertiary: 0 109 54;
    --tertiary-dim: 0 109 54;
    --on-tertiary-container: 0 33 12;
}

body {
    background-image: radial-gradient(ellipse 35% 50% at 50% 50%, rgba(var(--primary) / 0.12), transparent);
}

@media (prefers-color-scheme: dark) {
    :root {
        /* DARK THEME (From your prototype) */
        --background: 13 14 21;
        --on-background: 228 228 246;
        --surface-container-low: 18 19 27;
        --surface-container: 23 25 35;
        --surface-container-highest: 35 37 50;
        --surface-container-lowest: 0 0 0;
        --surface-bright: 41 43 58;
        --surface-variant: 35 37 50;
        --on-surface: 228 228 246;
        --on-surface-variant: 169 170 187;
        --outline: 115 116 132;
        --outline-variant: 69 71 85;
        --primary: 180 134 255;
        --on-primary: 45 0 98;
        --primary-container: 154 89 251;
        --primary-dim: 143 78 240;
        --error: 253 111 133;
        --error-container: 138 22 50;
        --error-dim: 200 71 93;
        --tertiary: 181 255 194;
        --tertiary-dim: 36 240 126;
        --on-tertiary-container: 0 93 44;
    }

    body {
        background-image: radial-gradient(ellipse 35% 50% at 50% 50%, rgba(var(--primary) / 0.15), transparent);
    }
}

.material-symbols-outlined {
    font-size: var(--ms-size, 24px);
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.text-\[10px\] { --ms-size: 10px; }
.text-\[11px\] { --ms-size: 11px; }
.text-\[16px\] { --ms-size: 16px; }
.text-\[18px\] { --ms-size: 18px; }
.text-base { --ms-size: 1rem; }
.text-lg { --ms-size: 1.125rem; }
.text-xl { --ms-size: 1.25rem; }
.text-3xl { --ms-size: 1.875rem; }

@media (min-width: 40rem) {
    .sm\:text-xl { --ms-size: 1.25rem; }
}

.focus-ring:focus-within {
    box-shadow: 0 0 0 2px rgba(var(--primary) / 0.4);
    outline: none;
}

@media (min-height: 800px) {
    .main-container {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}

/* Theme-aware scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgb(var(--background)); }
::-webkit-scrollbar-thumb { background: rgb(var(--surface-container-highest)); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--outline-variant)); }

.text-left { text-align: left; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.custom-dropdown-menu {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 50;
    margin-top: 4px;
    min-width: 100%;
    background: rgb(var(--surface-container-highest));
    border: 1px solid rgba(var(--outline-variant) / 0.1);
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    padding: 4px 0;
    max-height: 208px;
    overflow-y: auto;

    visibility: hidden;
    opacity: 0;
    transform: scaleY(0.8);
    transform-origin: top center;
    pointer-events: none;
    transition:
        opacity 100ms cubic-bezier(0.2, 0, 0, 1),
        transform 100ms cubic-bezier(0.2, 0, 0, 1),
        visibility 0ms linear 100ms;
}
.custom-dropdown-menu.open {
    visibility: visible;
    opacity: 1;
    transform: scaleY(1);
    pointer-events: auto;
    transition:
        opacity 150ms cubic-bezier(0.2, 0, 0, 1),
        transform 150ms cubic-bezier(0.2, 0, 0, 1),
        visibility 0ms linear 0ms;
}
.custom-dropdown-option {
    padding: 10px 16px;
    margin: 2px 6px;
    font-size: 14px;
    cursor: pointer;
    color: rgb(var(--on-surface));
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    border-radius: 8px;
    transition: background 0.1s;
}
.custom-dropdown-option:hover,
.custom-dropdown-option.highlighted {
    background: rgba(var(--primary) / 0.08);
}
.custom-dropdown-option.selected {
    color: rgb(var(--primary));
    background: rgba(var(--primary) / 0.12);
}

strong.match { font-weight: 600; color: rgb(var(--primary)); }

.custom-dropdown-menu::-webkit-scrollbar { width: 4px; }
.custom-dropdown-menu::-webkit-scrollbar-track { background: transparent; }
.custom-dropdown-menu::-webkit-scrollbar-thumb { background: rgba(var(--on-surface) / 0.38); border-radius: 2px; }
.custom-dropdown-menu::-webkit-scrollbar-thumb:hover { background: rgba(var(--on-surface) / 0.5); }

datalist { display: none; }

textarea::-webkit-scrollbar { width: 4px; height: 4px; }
textarea::-webkit-scrollbar-track { background: transparent; }
textarea::-webkit-scrollbar-thumb { background: rgba(var(--on-surface) / 0.38); border-radius: 2px; }
textarea::-webkit-scrollbar-thumb:hover { background: rgba(var(--on-surface) / 0.5); }

/* Script Editor - CodeMirror 6 */
#scriptEditorContainer {
    height: 100%;
}
#scriptEditorOverlay .cm-editor,
#scriptEditorOverlay .cm-editor.cm-focused {
    height: 100%;
    outline: none;
}
#scriptEditorOverlay .cm-editor .cm-scroller {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 13px;
}

#scriptEditorOverlay .cm-editor .cm-lineNumbers .cm-gutterElement {
    padding: 0 8px 0 12px;
    font-size: 12px;
}
#scriptEditorOverlay .cm-editor .cm-lineNumbers {
    min-width: unset !important;
}

/* Scrollbar */
#scriptEditorOverlay .cm-scroller::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
#scriptEditorOverlay .cm-scroller::-webkit-scrollbar-track {
    background: transparent;
    border: none;
}
#scriptEditorOverlay .cm-scroller::-webkit-scrollbar-thumb {
    background: rgba(var(--on-surface) / 0.38);
    border: none;
    border-radius: 2px;
}
#scriptEditorOverlay .cm-scroller::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--on-surface) / 0.5);
}

#scriptEditorOverlay .cm-selectionMatch {
    background-color: rgba(var(--on-surface) / 0.12) !important;
}
#scriptEditorOverlay .cm-content ::selection {
    background-color: rgba(var(--primary) / 0.25) !important;
}
#scriptEditorOverlay .cm-editor.cm-focused .cm-selectionBackground,
#scriptEditorOverlay .cm-selectionBackground {
    background-color: rgba(var(--primary) / 0.2) !important;
}