/**
 * Semble Quick Capture - Styles
 * Matches Semble's design system using Mantine-inspired styling
 *
 * @format
 */

/* ========== CSS Variables ========== */
:root {
    /* Semble Colors - Light Mode */
    --tangerine-6: #ff6400;
    --tangerine-7: #e45800;
    --tangerine-8: #cb4d00;

    --stone-0: #fafaf9;
    --stone-1: #f5f5f4;
    --stone-2: #e7e5e4;
    --stone-3: #d6d3d1;
    --stone-4: #a8a29e;
    --stone-5: #78716c;
    --stone-6: #57534e;
    --stone-7: #44403c;
    --stone-8: #292524;
    --stone-9: #0c0a09;

    /* Semantic Colors - Light Mode */
    --bg-default: #ffffff;
    --bg-subtle: var(--stone-0);
    --bg-filled: var(--stone-1);
    --text-primary: var(--stone-9);
    --text-secondary: var(--stone-6);
    --text-dimmed: var(--stone-5);
    --border-default: var(--stone-2);
    --border-subtle: var(--stone-1);

    --primary-color: var(--tangerine-6);
    --primary-hover: var(--tangerine-7);
    --primary-active: var(--tangerine-8);

    /* Filled button (dark) */
    --filled-bg: var(--stone-8);
    --filled-hover: var(--stone-7);
    --filled-active: var(--stone-9);

    /* Error colors */
    --error-bg: #fef2f2;
    --error-border: #fca5a5;
    --error-text: #991b1b;

    /* Success colors */
    --success-bg: #f0fdf4;
    --success-border: #86efac;
    --success-text: #166534;

    /* Spacing */
    --spacing-xs: 0.625rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.25rem;
    --spacing-xl: 1.5rem;

    /* Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;

    /* Font sizes */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        /* Background colors */
        --bg-default: var(--stone-9);
        --bg-subtle: var(--stone-8);
        --bg-filled: var(--stone-7);

        /* Text colors */
        --text-primary: var(--stone-0);
        --text-secondary: var(--stone-3);
        --text-dimmed: var(--stone-4);

        /* Border colors */
        --border-default: var(--stone-7);
        --border-subtle: var(--stone-8);

        /* Filled button stays dark in dark mode */
        --filled-bg: var(--stone-1);
        --filled-hover: var(--stone-2);
        --filled-active: var(--stone-0);

        /* Error colors - dark mode */
        --error-bg: #450a0a;
        --error-border: #7f1d1d;
        --error-text: #fca5a5;

        /* Success colors - dark mode */
        --success-bg: #052e16;
        --success-border: #166534;
        --success-text: #86efac;
    }
}

/* ========== Base Styles ========== */
* {
    box-sizing: border-box;
}

body {
    width: 360px;
    min-height: 300px;
    max-height: 600px;
    margin: 0;
    padding: 0;
    font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--font-size-md);
    color: var(--text-primary);
    background-color: var(--bg-default);
    overflow-y: auto;
}

:focus {
    outline: 2px solid var(--primary-color);
}

/* ========== Layout Components ========== */
.screen {
    min-height: 300px;
}

.container {
    padding: var(--spacing-xl);
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--bg-default);
    border-bottom: 1px solid var(--border-default);
}

.header-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}

/* ========== Typography ========== */
.title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-primary);
}

.subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-lg) 0;
}

.loading-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: var(--spacing-md);
}

/* ========== Form Components ========== */
.form-stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.form-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.form-hint {
    font-size: var(--font-size-sm);
    color: var(--text-dimmed);
    margin: 0;
    line-height: 1.4;
}

.form-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 150ms ease;
}

.form-link:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* Filled Input Variant (Mantine style) */
.input-filled {
    width: 100%;
    padding: calc(var(--spacing-md) - 2px) var(--spacing-md);
    font-size: var(--font-size-md);
    font-family: inherit;
    color: var(--text-primary);
    background-color: var(--bg-filled);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    transition: all 150ms ease;
}

.input-filled::placeholder {
    color: var(--text-dimmed);
}

.input-filled:hover {
    background-color: var(--bg-subtle);
}

/* .input-filled:focus {
    outline: 1px solid;
    out-
    background-color: var(--bg-default);
    border-color: var(--primary-color);
} */

.input-filled:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Textarea specific */
textarea.input-filled {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

/* Select specific */
select.input-filled {
    cursor: pointer;
    appearance: none;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 6l4 4 4-4" stroke="%2378716c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right var(--spacing-md) center;
    padding-right: calc(var(--spacing-md) * 2.5);
}

@media (prefers-color-scheme: dark) {
    select.input-filled {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 6l4 4 4-4" stroke="%23d6d3d1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    }
}

/* ========== Buttons ========== */
.btn {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-md);
    font-weight: 600;
    font-family: inherit;
    border: none;
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all 150ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--primary-hover);
}

.btn-primary:active:not(:disabled) {
    background-color: var(--primary-active);
    transform: translateY(1px);
}

.btn-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-link {
    background: none;
    border: none;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    font-family: inherit;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all 150ms ease;
}

.btn-link:hover {
    color: var(--text-primary);
    background-color: var(--bg-subtle);
}

/* ========== URL Display ========== */
.url-display {
    padding: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    background-color: var(--bg-filled);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    word-break: break-all;
    max-height: 100px;
    overflow-y: auto;
}

/* ========== Alerts ========== */
.alert {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    border: 1px solid;
}

.alert-error {
    background-color: var(--error-bg);
    border-color: var(--error-border);
    color: var(--error-text);
}

.alert-success {
    background-color: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success-text);
}

.alert-loading {
    background-color: var(--bg-filled);
    border-color: var(--border-default);
    color: var(--text-secondary);
}

/* ========== Loading Spinner ========== */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-default);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ========== Utility Classes ========== */
.hidden {
    display: none !important;
}