@charset "UTF-8";

/* ==========================================================================
   Menukaart Builder Studio Pro - Master Stylesheet
   Design Tokens (OKLCH Color Palette), Dark Mode & Modern UI Components
   ========================================================================== */

:root {
    --radius: 0.5rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;

    --background: oklch(0.972 0.008 85);
    --foreground: oklch(0.22 0.015 55);
    --border-strong: oklch(0.79 0.02 75);
    --card: oklch(0.995 0.004 85);
    --card-foreground: oklch(0.22 0.015 55);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.129 0.042 264.695);
    --primary: oklch(0.42 0.11 42);
    --primary-foreground: oklch(0.98 0.01 85);
    --secondary: oklch(0.93 0.014 82);
    --secondary-foreground: oklch(0.28 0.02 55);
    --muted: oklch(0.94 0.012 82);
    --muted-foreground: oklch(0.5 0.02 60);
    --accent: oklch(0.9 0.03 80);
    --accent-foreground: oklch(0.26 0.03 50);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.984 0.003 247.858);
    --border: oklch(0.885 0.014 80);
    --input: oklch(0.885 0.014 80);
    --ring: oklch(0.52 0.13 42);

    --sidebar: oklch(0.984 0.003 247.858);
    --sidebar-foreground: oklch(0.129 0.042 264.695);

    --font-sans: "Work Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: "Instrument Serif", Georgia, serif;
    --shadow-stage: 0 4px 6px -1px oklch(0.2 0.02 60 / 0.08), 0 24px 60px -20px oklch(0.2 0.02 60 / 0.35);
}

.dark {
    --background: oklch(0.14 0.03 260);
    --foreground: oklch(0.98 0.003 247);
    --card: oklch(0.19 0.03 260);
    --card-foreground: oklch(0.98 0.003 247);
    --popover: oklch(0.19 0.03 260);
    --popover-foreground: oklch(0.98 0.003 247);
    --primary: oklch(0.68 0.16 45);
    --primary-foreground: oklch(0.12 0.03 260);
    --secondary: oklch(0.25 0.03 260);
    --secondary-foreground: oklch(0.98 0.003 247);
    --muted: oklch(0.23 0.03 260);
    --muted-foreground: oklch(0.70 0.04 256);
    --accent: oklch(0.25 0.03 260);
    --accent-foreground: oklch(0.98 0.003 247);
    --destructive: oklch(0.65 0.20 22);
    --destructive-foreground: oklch(0.98 0.003 247);
    --border: oklch(1 0 0 / 12%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.68 0.16 45);
    --sidebar: oklch(0.17 0.03 260);
    --sidebar-foreground: oklch(0.98 0.003 247);
}

/* Base Body Styles */
body {
    font-family: var(--font-sans);
    background-color: var(--background);
    color: var(--foreground);
    transition: background-color 0.25s ease, color 0.25s ease;
    margin: 0;
    padding: 0;
}

.font-display {
    font-family: var(--font-display);
}

/* UI Card & Component Styles */
.theme-card {
    background-color: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.theme-sidebar {
    background-color: var(--sidebar);
    color: var(--sidebar-foreground);
    border-color: var(--border);
}

.theme-input {
    background-color: var(--card);
    color: var(--foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.theme-input:focus {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 2px oklch(0.52 0.13 42 / 0.2);
}

/* Buttons */
.theme-btn-primary {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all 0.15s ease;
}

.theme-btn-primary:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.theme-btn-primary:active {
    transform: translateY(0);
}

.theme-btn-secondary {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: all 0.15s ease;
}

.theme-btn-secondary:hover {
    background-color: var(--muted);
    border-color: var(--border-strong);
}

/* Canvas Container */
.canvas-container {
    position: relative;
    user-select: none;
    box-shadow: var(--shadow-stage);
    border-radius: var(--radius-md);
    background-color: #ffffff;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--background);
}

::-webkit-scrollbar-thumb {
    background: var(--muted-foreground);
    border-radius: var(--radius);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* Toast Banner Animation */
#toast-banner {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

/* Badge pulse effect */
.pulse-amber {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    animation: pulse-amber-anim 2s infinite;
}

@keyframes pulse-amber-anim {
    0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

/* Sidebar Resizers & Dragging State */
body.is-resizing {
    user-select: none !important;
    cursor: col-resize !important;
}

body.is-resizing * {
    user-select: none !important;
    cursor: col-resize !important;
}

#resizer-left, #resizer-right {
    position: relative;
    touch-action: none;
}

#resizer-left:hover div, #resizer-right:hover div,
#resizer-left.dragging div, #resizer-right.dragging div {
    background-color: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

/* Canvas Scroll Area Centering */
#canvas-scroll-area {
    scroll-behavior: smooth;
}