@layer base, layout, components, utilities;

:root {
    --font-sans: 'Roboto', system-ui, sans-serif;

    --hue: 250;
    --color-bg: oklch(99% 0.005 var(--hue));
    --color-surface: #fff;
    --color-text: oklch(25% 0.05 var(--hue));
    --color-muted: oklch(55% 0.05 var(--hue));
    --color-border: oklch(90% 0.02 var(--hue));
    --color-form: oklch(95% 0.01 var(--hue));
    --color-primary: oklch(55% 0.22 var(--hue));
    --color-primary-bg: oklch(96% 0.03 var(--hue));

    --sidebar-bg: oklch(99% 0.005 var(--hue));
    --sidebar-text: oklch(25% 0.05 var(--hue));

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;

    --radius: 8px;
    --header-height: 60px;
    --sidebar-width: 260px;
    --form-width: 72ch
}

@layer base {
    *, *::before, *::after { box-sizing: border-box; }

    html, body {
        min-height: 100vh;
        margin: 0;
        overflow: auto;
    }

    body {
        font: 400 0.9375rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        color: var(--color-text);
        background: var(--color-bg);
        -webkit-font-smoothing: antialiased;
    }

    img, svg, video { display: block; max-width: 100%; height: auto; }
    svg { fill: currentColor; }
    a { color: inherit; text-decoration: none; }
    button { background: none; border: none; cursor: pointer; color: inherit; }
    h1, h2, h3, p { margin: 0; }

    :focus-visible {
        outline: 2px solid color-mix(in oklab, var(--accent) 60%, transparent);
        outline-offset: 2px;
    }
}

@layer layout {
    .auto-grid {
        display: grid;
        gap: var(--space-4);
        /* Fits as many 280px cards as possible, then stretches them */
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    }

    .cluster {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        flex-wrap: wrap;
    }
    .cluster.between { justify-content: space-between; }
    .cluster.nowrap { flex-wrap: nowrap; }

    .stack { display: flex; flex-direction: column; gap: var(--space-4); }

    .app-shell {
        display: grid;
        grid-template-columns: var(--sidebar-width) 1fr;
        grid-template-rows: var(--header-height) 1fr auto;
        grid-template-areas:
                    "header header"
                    "sidebar main"
                    "sidebar footer";
        min-height: 100vh;
    }

    .app-header { grid-area: header; position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
    .app-sidebar { grid-area: sidebar; background: var(--sidebar-bg); color: var(--sidebar-text); border-right: 1px solid var(--color-border); overflow-y: auto; }
    .app-main    { grid-area: main; padding: var(--space-4); display: flex; flex-direction: column;}
    .app-footer  { grid-area: footer; padding: var(--space-2) var(--space-4); border-top: 1px solid var(--color-border); }

}

@layer components {
    .input-group {
        background: var(--color-bg);
        padding: 0.4rem 0.8rem;
        border-radius: 8px;
        width: 100%;
        max-width: 600px;
        transition: 0.2s;
    }
    .input-group:focus-within { background: var(--color-surface); box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
    .input-group input { border: none; background: transparent; outline: none; width: 100%; color: inherit; margin-left: 8px;}

    .logo {
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--color-text);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .nav-link {
        display: flex; align-items: center; gap: 12px;
        padding: 10px 24px;
        color: color-mix(in srgb, var(--sidebar-text), transparent 30%);
        border-left: 3px solid transparent;
    }
    .nav-link:hover { background: rgba(255,255,255,0.05); color: var(--sidebar-text); }
    .nav-link.active { background: rgba(255,255,255,0.1); color: var(--sidebar-text); border-color: var(--color-primary-bg); }
    .nav-title {
        padding: 16px 24px 8px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: color-mix(in srgb, var(--sidebar-text), transparent 30%);
    }

    .card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: 8px;
        padding: var(--space-4);
        display: flex; flex-direction: column;
    }

    .btn {
        padding: 6px 16px;
        border-radius: 4px;
        font-weight: 500;
        background: var(--color-primary-bg);
        color: var(--color-primary);
        transition: filter 0.2s;
    }
    .btn:hover { filter: brightness(0.95); }
    .btn.primary { background: var(--color-primary); color: white; }
    .icon-btn { padding: 8px; border-radius: 50%; color: var(--color-muted); }
    .icon-btn:hover { background: var(--color-bg); color: var(--color-text); }

    .metric-box { text-align: center; flex: 1; }
    .metric-val { font-size: 1.5rem; }
    .metric-lbl { font-size: 0.75rem; color: var(--color-muted); }

    .template-section { display: none; background: var(--color-form); max-width: var(--form-width)}
    .template-section.active { display: block; }

    .field { display: grid; gap: .35rem; }
    input[type="text"], input[type="email"], select, textarea, input[type="number"] {
        padding: .6rem .7rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--color-bg); color: var(--color-text);
        width: 100%;
    }
    label { font-weight: 600; font-size: 0.9em; margin-top: var(--space-4)}
}

@layer utilities {
    .text-lg { font-size: 1.4rem; font-weight: 400; }
    .text-muted { color: var(--color-muted); font-size: 0.85rem; }
    .text-accent { color: var(--color-primary); }

    .span-full { grid-column: 1 / -1; } /* Take up all available columns */
    .hidden { display: none; }
    .hidden-lg { display: none; }  /* Hidden on large screen */

    .mb-5 { margin-bottom: var(--space-5); }
    .mt-5 { margin-top: var(--space-5); }
}

/* Mobile Responsiveness override */
@media (max-width: 768px) {
    :root { --sidebar-width: 0px; }
    .app-sidebar {
        position: fixed; top: 64px; bottom: 0; width: 260px;
        transform: translateX(-100%); transition: transform 0.3s; z-index: 20;
    }
    .app-sidebar.open { transform: translateX(0); }
    .hidden-lg { display: block; }
}