/**
 * Garde-Manger - Design System
 * ============================
 * Centralized styles using CSS Layers and BEM naming convention.
 */

@layer tokens, base, components, utilities;

/* ==========================================================================
   LAYER: TOKENS - Design tokens (CSS custom properties)
   ========================================================================== */

@layer tokens {
    :root {
        /* Colors - Brand */
        --color-bg: #EEE6D8;
        --color-surface: #e5e7e6;
        --color-white: #ffffff;
        --color-primary: #93441A;
        --color-secondary: #B67332;
        --color-accent: #DAAB3A;

        /* Colors - Text */
        --color-text: #3d3d3d;
        --color-text-muted: #5a5a5a;

        /* Colors - Semantic */
        --color-success: #28a745;
        --color-success-bg: #d4edda;
        --color-success-text: #155724;
        --color-warning: #ffc107;
        --color-warning-bg: #fff3cd;
        --color-warning-text: #856404;
        --color-danger: #dc3545;
        --color-danger-bg: #f8d7da;
        --color-danger-text: #721c24;
        --color-info: #17a2b8;
        --color-info-bg: #d1ecf1;
        --color-info-text: #0c5460;

        /* Border radius */
        --radius-sm: 8px;
        --radius-md: 12px;
        --radius-lg: 16px;
        --radius-full: 9999px;

        /* Shadows */
        --shadow-sm: 0 2px 8px rgba(147, 68, 26, 0.08);
        --shadow-md: 0 4px 16px rgba(147, 68, 26, 0.12);
        --shadow-lg: 0 8px 32px rgba(147, 68, 26, 0.16);

        /* Spacing */
        --space-xs: 4px;
        --space-sm: 8px;
        --space-md: 16px;
        --space-lg: 24px;
        --space-xl: 32px;
        --space-2xl: 48px;

        /* Typography */
        --font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        --font-size-xs: 11px;
        --font-size-sm: 13px;
        --font-size-base: 15px;
        --font-size-lg: 18px;
        --font-size-xl: 24px;
        --font-size-2xl: 32px;

        /* Transitions */
        --transition-fast: 0.15s ease;
        --transition-base: 0.2s ease;
    }
}

/* ==========================================================================
   LAYER: BASE - Foundational styles
   ========================================================================== */

@layer base {
    @font-face {
        font-family: 'Geist';
        src: url('/fonts/Geist-Regular.woff2') format('woff2');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Geist';
        src: url('/fonts/Geist-Medium.woff2') format('woff2');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Geist';
        src: url('/fonts/Geist-SemiBold.woff2') format('woff2');
        font-weight: 600;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Geist';
        src: url('/fonts/Geist-Bold.woff2') format('woff2');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: var(--font-family);
        background: var(--color-bg);
        min-height: 100vh;
        color: var(--color-text);
        line-height: 1.5;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-family);
        font-weight: 600;
        color: var(--color-primary);
    }

    a {
        color: var(--color-primary);
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }
}

/* ==========================================================================
   LAYER: COMPONENTS
   ========================================================================== */

@layer components {

    /* ======================================================================
       ICON - SVG icon base styles
       ====================================================================== */

    .icon {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
        vertical-align: -3px;
        flex-shrink: 0;
    }

    .icon--sm {
        width: 14px;
        height: 14px;
    }

    .icon--md {
        width: 18px;
        height: 18px;
    }

    .icon--lg {
        width: 24px;
        height: 24px;
        vertical-align: -5px;
    }

    .icon--xl {
        width: 28px;
        height: 28px;
    }

    /* ======================================================================
       BUTTON - Interactive action element
       ====================================================================== */

    .btn {
        padding: 12px 20px;
        border: none;
        border-radius: var(--radius-sm);
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-sm);
        transition: all var(--transition-base);
        line-height: 1.4;
    }

    .btn:hover {
        text-decoration: none;
    }

    .btn:focus {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }

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

    /* Button variants */
    .btn--primary {
        background-color: var(--color-accent);
        color: #3d2a1a;
    }

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

    .btn--secondary {
        background-color: var(--color-surface);
        color: var(--color-text);
    }

    .btn--secondary:hover:not(:disabled) {
        background-color: #d5d7d6;
    }

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

    .btn--danger:hover:not(:disabled) {
        background-color: #7a3816;
    }

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

    .btn--success:hover:not(:disabled) {
        background-color: #218838;
    }

    .btn--ghost {
        background: none;
        border: none;
        color: var(--color-text-muted);
        padding: var(--space-sm);
    }

    .btn--ghost:hover:not(:disabled) {
        background: var(--color-danger-bg);
        color: var(--color-danger);
    }

    .btn--filter {
        background-color: var(--color-surface);
        color: var(--color-text);
        padding: 10px 18px;
    }

    .btn--filter:hover:not(:disabled) {
        background-color: var(--color-secondary);
        color: white;
    }

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

    /* Button sizes */
    .btn--sm {
        padding: 8px 14px;
        font-size: var(--font-size-sm);
        gap: 6px;
    }

    .btn--lg {
        padding: 16px 28px;
        font-size: 16px;
    }

    /* Legacy class aliases (for backward compatibility) */
    .btn-primary { background-color: var(--color-accent); color: #3d2a1a; }
    .btn-primary:hover:not(:disabled) { background-color: #c49a33; }
    .btn-secondary { background-color: var(--color-surface); color: var(--color-text); }
    .btn-secondary:hover:not(:disabled) { background-color: #d5d7d6; }
    .btn-danger { background-color: var(--color-primary); color: white; }
    .btn-danger:hover:not(:disabled) { background-color: #7a3816; }
    .btn-success { background-color: var(--color-success); color: white; }
    .btn-success:hover:not(:disabled) { background-color: #218838; }
    .btn-small { padding: 8px 14px; font-size: var(--font-size-sm); gap: 6px; }
    .btn-large { padding: 16px 28px; font-size: 16px; }
    .btn-filter { background-color: var(--color-surface); color: var(--color-text); padding: 10px 18px; }
    .btn-filter:hover:not(:disabled) { background-color: var(--color-secondary); color: white; }
    .btn-filter.active { background-color: var(--color-primary); color: white; }

    /* ======================================================================
       BADGE - Status indicator
       ====================================================================== */

    .badge {
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
        padding: 4px 10px;
        border-radius: var(--radius-full);
        font-size: var(--font-size-xs);
        font-weight: 600;
    }

    .badge--warning {
        background-color: var(--color-warning-bg);
        color: var(--color-warning-text);
    }

    .badge--danger {
        background-color: var(--color-danger-bg);
        color: var(--color-danger-text);
    }

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

    .badge--info {
        background-color: var(--color-info-bg);
        color: var(--color-info-text);
    }

    .badge--muted {
        background-color: #e2e3e5;
        color: var(--color-text-muted);
    }

    /* Legacy aliases */
    .badge-warning { background-color: var(--color-warning-bg); color: var(--color-warning-text); }
    .badge-danger { background-color: var(--color-danger-bg); color: var(--color-danger-text); }
    .badge-success { background-color: var(--color-success-bg); color: var(--color-success-text); }
    .badge-info { background-color: var(--color-info-bg); color: var(--color-info-text); }

    /* ======================================================================
       ALERT - Feedback message
       ====================================================================== */

    .alert {
        padding: 14px 18px;
        margin-bottom: 20px;
        border-radius: var(--radius-sm);
        font-size: 14px;
        border-left: 4px solid;
    }

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

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

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

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

    /* Legacy aliases */
    .alert-success { background-color: var(--color-success-bg); color: var(--color-success-text); border-left-color: var(--color-success); }
    .alert-error { background-color: var(--color-danger-bg); color: var(--color-danger-text); border-left-color: var(--color-danger); }
    .alert-warning { background-color: var(--color-warning-bg); color: var(--color-warning-text); border-left-color: var(--color-warning); }
    .alert-info { background-color: var(--color-info-bg); color: var(--color-info-text); border-left-color: var(--color-info); }

    /* ======================================================================
       CARD - Content container
       ====================================================================== */

    .card {
        background: var(--color-white);
        border-radius: var(--radius-md);
        padding: var(--space-lg);
        box-shadow: var(--shadow-sm);
        transition: box-shadow var(--transition-base);
    }

    .card:hover {
        box-shadow: var(--shadow-md);
    }

    /* Card variants */
    .card--product {
        padding: 20px 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-left: 4px solid var(--color-secondary);
    }

    .card--recipe {
        padding: 20px 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-left: 4px solid var(--color-accent);
    }

    .card--item {
        border-radius: var(--radius-sm);
        padding: 16px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .card--menu {
        padding: 28px;
        text-decoration: none;
        display: flex;
        align-items: flex-start;
        gap: 20px;
        border-left: 4px solid transparent;
    }

    .card--menu:hover {
        transform: translateY(-2px);
        text-decoration: none;
    }

    .card--stat {
        background: var(--color-bg);
        border-radius: var(--radius-sm);
        padding: 20px;
        text-align: center;
        box-shadow: none;
    }

    .card--stat:hover {
        box-shadow: none;
    }

    .card--form {
        padding: var(--space-lg);
        margin-bottom: var(--space-xl);
    }

    .card--filters {
        padding: 20px;
        margin-bottom: var(--space-lg);
        display: flex;
        gap: var(--space-md);
        flex-wrap: wrap;
        align-items: center;
    }

    /* Card states */
    .card--expired {
        border-left-color: var(--color-danger);
        background: linear-gradient(to right, #fff5f5, var(--color-white));
    }

    .card--warning {
        border-left-color: var(--color-warning);
        background: linear-gradient(to right, #fffdf5, var(--color-white));
    }

    .card--muted {
        border-left-color: #6c757d;
    }

    .card--done {
        opacity: 0.5;
        background-color: var(--color-surface);
    }

    /* Card color accents (for menu cards) */
    .card--stock { border-left-color: var(--color-secondary); }
    .card--add { border-left-color: var(--color-accent); }
    .card--scan { border-left-color: #6b5b95; }
    .card--alerts { border-left-color: var(--color-primary); }
    .card--shopping { border-left-color: #7c9a5e; }
    .card--recipes { border-left-color: #8b6914; }

    /* ======================================================================
       FORM CONTROLS
       ====================================================================== */

    .form-control {
        padding: 12px 14px;
        border: 2px solid var(--color-surface);
        border-radius: var(--radius-sm);
        font-family: inherit;
        font-size: var(--font-size-base);
        color: var(--color-text);
        background-color: var(--color-white);
        transition: border-color var(--transition-base);
        width: 100%;
    }

    .form-control:focus {
        outline: none;
        border-color: var(--color-accent);
    }

    .form-control::placeholder {
        color: var(--color-text-muted);
    }

    .form-group {
        display: flex;
        flex-direction: column;
    }

    .form-group label {
        margin-bottom: 6px;
        color: var(--color-text);
        font-weight: 500;
        font-size: 14px;
    }

    .form-group.full-width {
        grid-column: 1 / -1;
    }

    .form-errors {
        color: var(--color-danger);
        font-size: var(--font-size-sm);
        margin-top: var(--space-xs);
    }

    .form-row {
        display: grid;
        gap: var(--space-md);
    }

    .form-row--2cols {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-row--3cols {
        grid-template-columns: repeat(3, 1fr);
    }

    .form-row--4cols {
        grid-template-columns: 2fr 1fr 1fr auto;
    }

    .form-actions {
        display: flex;
        gap: var(--space-md);
        justify-content: flex-end;
        margin-top: var(--space-lg);
    }

    /* ======================================================================
       LAYOUT - Page structure
       ====================================================================== */

    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--space-lg);
        flex-wrap: wrap;
        gap: var(--space-md);
    }

    .page-header h1 {
        font-size: 2em;
        margin: 0;
    }

    .section {
        margin-bottom: var(--space-xl);
    }

    .section__header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: var(--space-md);
    }

    .section__header h2 {
        font-size: 1.2em;
        margin: 0;
    }

    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--color-text-muted);
        font-size: var(--font-size-sm);
        text-decoration: none;
        margin-bottom: var(--space-md);
    }

    .back-link:hover {
        color: var(--color-primary);
        text-decoration: none;
    }

    /* ======================================================================
       EMPTY STATE
       ====================================================================== */

    .empty-state {
        background: var(--color-white);
        border-radius: var(--radius-md);
        text-align: center;
        padding: 60px 20px;
        color: var(--color-text-muted);
        box-shadow: var(--shadow-sm);
    }

    .empty-state a {
        color: var(--color-primary);
        text-decoration: none;
        font-weight: 500;
    }

    .empty-state a:hover {
        text-decoration: underline;
    }

    /* ======================================================================
       NAVIGATION
       ====================================================================== */

    .nav {
        background: var(--color-white);
        padding: 0 var(--space-lg);
        box-shadow: var(--shadow-sm);
        position: sticky;
        top: 0;
        z-index: 100;
        border-bottom: 3px solid var(--color-primary);
    }

    .nav__inner {
        max-width: 1400px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 64px;
    }

    .nav__title {
        font-family: var(--font-family);
        font-size: 1.4em;
        font-weight: bold;
        color: var(--color-primary);
        display: flex;
        align-items: center;
        gap: var(--space-sm);
    }

    .nav__title .icon {
        width: 28px;
        height: 28px;
        stroke: var(--color-primary);
    }

    .nav__links {
        display: flex;
        gap: var(--space-sm);
        list-style: none;
    }

    .nav__links a {
        color: var(--color-text);
        text-decoration: none;
        font-weight: 500;
        font-size: 14px;
        padding: var(--space-sm) var(--space-md);
        border-radius: var(--radius-sm);
        transition: all var(--transition-base);
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
    }

    .nav__links a:hover {
        background-color: var(--color-bg);
        color: var(--color-primary);
        text-decoration: none;
    }

    .nav__links a.active {
        background-color: var(--color-primary);
        color: white;
    }

    .nav__links a.active .icon {
        stroke: white;
    }

    /* Legacy nav classes */
    .nav-inner { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; height: 64px; }
    .nav-title { font-family: var(--font-family); font-size: 1.4em; font-weight: bold; color: var(--color-primary); display: flex; align-items: center; gap: var(--space-sm); }
    .nav-title .icon { width: 28px; height: 28px; stroke: var(--color-primary); }
    .nav-links { display: flex; gap: var(--space-sm); list-style: none; align-items: center; }
    .nav-links > li { display: flex; align-items: center; }
    .nav-links a { color: var(--color-text); text-decoration: none; font-weight: 500; font-size: 14px; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); transition: all var(--transition-base); display: inline-flex; align-items: center; gap: var(--space-xs); }
    .nav-links a:hover { background-color: var(--color-bg); color: var(--color-primary); text-decoration: none; }
    .nav-links a.active { background-color: var(--color-primary); color: white; }
    .nav-links a.active .icon { stroke: white; }
    
    /* User dropdown menu */
    .nav-dropdown {
        position: relative;
        display: flex;
        align-items: center;
    }
    
    .nav-dropdown__trigger {
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
        color: var(--color-text);
        text-decoration: none;
        font-weight: 500;
        font-size: 14px;
        padding: var(--space-sm) var(--space-md);
        border-radius: var(--radius-sm);
        border: none;
        background: transparent;
        cursor: pointer;
        transition: all var(--transition-base);
        font-family: inherit;
        white-space: nowrap;
        line-height: 1.5;
        margin: 0;
        vertical-align: middle;
    }
    
    .nav-dropdown__trigger:hover,
    .nav-dropdown__trigger:focus {
        background-color: var(--color-bg);
        color: var(--color-primary);
        text-decoration: none;
        outline: none;
    }
    
    .nav-dropdown__trigger:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }
    
    .nav-dropdown__trigger .icon {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        flex-shrink: 0;
    }
    
    .nav-dropdown__trigger .icon:last-child {
        width: 14px;
        height: 14px;
        transition: transform var(--transition-base);
        margin-left: var(--space-xs);
    }
    
    .nav-dropdown:hover .nav-dropdown__trigger .icon:last-child,
    .nav-dropdown:focus-within .nav-dropdown__trigger .icon:last-child {
        transform: rotate(180deg);
    }
    
    .nav-dropdown__trigger span {
        white-space: nowrap;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    @media (max-width: 768px) {
        .nav-dropdown__trigger span {
            max-width: 120px;
        }
    }
    
    .nav-dropdown__menu {
        position: absolute;
        top: calc(100% + var(--space-xs));
        right: 0;
        background: var(--color-white);
        border: 1px solid rgba(147, 68, 26, 0.1);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
        list-style: none;
        padding: var(--space-xs);
        min-width: 200px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: all var(--transition-base);
        z-index: 1000;
    }
    
    .nav-dropdown:hover .nav-dropdown__menu,
    .nav-dropdown:focus-within .nav-dropdown__menu,
    .nav-dropdown.is-open .nav-dropdown__menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    .nav-dropdown.is-open .nav-dropdown__trigger .icon:last-child {
        transform: rotate(180deg);
    }
    
    .nav-dropdown__menu li {
        margin: 0;
    }
    
    .nav-dropdown__menu a {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        color: var(--color-text);
        text-decoration: none;
        font-weight: 500;
        font-size: 14px;
        padding: var(--space-sm) var(--space-md);
        border-radius: var(--radius-sm);
        transition: all var(--transition-base);
    }
    
    .nav-dropdown__menu a:hover {
        background-color: var(--color-bg);
        color: var(--color-primary);
    }
    
    .nav-dropdown__menu a .icon {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        flex-shrink: 0;
    }

    .nav-dropdown__email {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
        border-bottom: 1px solid var(--color-surface);
        margin-bottom: var(--space-xs);
    }

    /* ======================================================================
       MAIN CONTENT WRAPPER
       ====================================================================== */

    .main-content {
        max-width: 1400px;
        margin: 0 auto;
        padding: var(--space-xl) var(--space-lg);
    }

    /* ======================================================================
       FOOTER
       ====================================================================== */

    .footer {
        text-align: center;
        padding: var(--space-lg);
        margin-top: var(--space-2xl);
        color: var(--color-text-muted);
        font-size: var(--font-size-sm);
    }

    .footer a {
        color: var(--color-secondary);
        text-decoration: none;
    }

    .footer a:hover {
        text-decoration: underline;
    }

    /* ======================================================================
       LISTS
       ====================================================================== */

    .list {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
    }

    .list--tight {
        gap: var(--space-sm);
    }

    /* ======================================================================
       GRID
       ====================================================================== */

    .grid {
        display: grid;
        gap: 20px;
    }

    .grid--menu {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        margin-bottom: var(--space-2xl);
    }

    .grid--stats {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: var(--space-md);
    }

    /* ======================================================================
       STAT CARD CONTENT
       ====================================================================== */

    .stat__value {
        font-size: 2em;
        font-weight: bold;
        color: var(--color-accent);
        margin-bottom: var(--space-xs);
    }

    .stat__label {
        color: var(--color-text-muted);
        font-size: 0.85em;
    }

    /* ======================================================================
       MENU CARD CONTENT
       ====================================================================== */

    .menu-card__icon {
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--color-bg);
        border-radius: var(--radius-sm);
    }

    .menu-card__icon .icon {
        width: 28px;
        height: 28px;
        stroke-width: 1.75;
    }

    .menu-card__content h2 {
        font-size: 1.3em;
        margin-bottom: 6px;
        color: var(--color-primary);
    }

    .menu-card__content p {
        font-size: 0.9em;
        color: var(--color-text-muted);
        margin: 0;
        line-height: 1.5;
    }

    /* Menu card icon colors */
    .card--stock .menu-card__icon .icon { stroke: var(--color-secondary); }
    .card--add .menu-card__icon .icon { stroke: var(--color-accent); }
    .card--scan .menu-card__icon .icon { stroke: #6b5b95; }
    .card--alerts .menu-card__icon .icon { stroke: var(--color-primary); }
    .card--shopping .menu-card__icon .icon { stroke: #7c9a5e; }
    .card--recipes .menu-card__icon .icon { stroke: #8b6914; }

    /* ======================================================================
       PRODUCT/ITEM CARD CONTENT
       ====================================================================== */

    .product-info h3 {
        font-size: 1.1em;
        margin-bottom: var(--space-xs);
    }

    .product-info a {
        color: var(--color-primary);
        text-decoration: none;
    }

    .product-info a:hover {
        text-decoration: underline;
    }

    .product-meta {
        color: var(--color-text-muted);
        font-size: var(--font-size-sm);
    }

    .stock-info {
        text-align: right;
    }

    .stock-quantity {
        font-size: 1.4em;
        font-weight: bold;
        color: var(--color-primary);
    }

    .stock-threshold {
        font-size: 12px;
        color: var(--color-text-muted);
    }

    .stock-actions {
        display: flex;
        align-items: center;
    }

    /* ======================================================================
       EXPIRATION INFO
       ====================================================================== */

    .expiration-info {
        font-size: 12px;
        margin-top: var(--space-xs);
        display: flex;
        align-items: center;
        gap: var(--space-xs);
    }

    .expiration-info--expired {
        color: var(--color-danger);
    }

    .expiration-info--warning {
        color: var(--color-warning-text);
    }

    .expiration-info--muted {
        color: var(--color-text-muted);
        font-style: italic;
    }

    /* Legacy classes */
    .expiration-info.expired { color: var(--color-danger); }
    .expiration-info.expiring-soon { color: var(--color-warning-text); }
    .expiration-info.no-date { color: var(--color-text-muted); font-style: italic; }

    /* ======================================================================
       SEARCH INPUT
       ====================================================================== */

    .search-input {
        flex: 1;
        min-width: 200px;
        padding: 12px 16px;
        border: 2px solid var(--color-surface);
        border-radius: var(--radius-sm);
        font-size: var(--font-size-base);
        transition: border-color var(--transition-base);
    }

    .search-input:focus {
        outline: none;
        border-color: var(--color-accent);
    }

    /* ======================================================================
       SELECT (Category, filters)
       ====================================================================== */

    .category-select {
        padding: 10px 14px;
        border: 2px solid var(--color-surface);
        border-radius: var(--radius-sm);
        font-size: 14px;
        background: var(--color-white);
        cursor: pointer;
        min-width: 160px;
    }

    .category-select:focus {
        outline: none;
        border-color: var(--color-accent);
    }

    /* ======================================================================
       FILTER BUTTONS
       ====================================================================== */

    .filter-buttons {
        display: flex;
        gap: var(--space-sm);
        flex-wrap: wrap;
    }

    /* ======================================================================
       DELETE BUTTON (Ghost style)
       ====================================================================== */

    .btn-delete {
        background: none;
        border: none;
        color: var(--color-text-muted);
        cursor: pointer;
        padding: var(--space-sm);
        border-radius: var(--radius-sm);
        transition: all var(--transition-base);
        margin-left: var(--space-md);
    }

    .btn-delete:hover {
        background: var(--color-danger-bg);
        color: var(--color-danger);
    }
}

/* ==========================================================================
   LAYER: UTILITIES
   ========================================================================== */

@layer utilities {
    .text-center { text-align: center; }
    .text-right { text-align: right; }
    .text-muted { color: var(--color-text-muted); }

    .mb-0 { margin-bottom: 0; }
    .mb-sm { margin-bottom: var(--space-sm); }
    .mb-md { margin-bottom: var(--space-md); }
    .mb-lg { margin-bottom: var(--space-lg); }
    .mb-xl { margin-bottom: var(--space-xl); }

    .mt-md { margin-top: var(--space-md); }
    .mt-lg { margin-top: var(--space-lg); }

    .gap-sm { gap: var(--space-sm); }
    .gap-md { gap: var(--space-md); }

    .flex { display: flex; }
    .flex-col { flex-direction: column; }
    .items-center { align-items: center; }
    .justify-between { justify-content: space-between; }
    .justify-center { justify-content: center; }
    .flex-wrap { flex-wrap: wrap; }
}

/* ==========================================================================
   RESPONSIVE - Media queries
   ========================================================================== */

@media (max-width: 900px) {
    .nav {
        padding: 12px var(--space-md);
    }

    .nav__inner,
    .nav-inner {
        flex-direction: column;
        height: auto;
        gap: var(--space-md);
        padding: var(--space-sm) 0;
    }

    .nav__links,
    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }

    .nav__links a,
    .nav-links a {
        padding: 6px 12px;
        font-size: var(--font-size-sm);
        flex-direction: column;
        gap: 2px;
    }

    .nav-dropdown__trigger {
        padding: 6px 12px;
        font-size: var(--font-size-sm);
        flex-direction: column;
        gap: 2px;
    }

    .nav-dropdown__trigger .icon:last-child {
        display: none;
    }

    .main-content {
        padding: 20px var(--space-md);
    }
}

@media (max-width: 700px) {
    .form-row,
    .form-row--4cols {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .page-header h1 {
        font-size: 1.8em;
    }

    .card--product,
    .card--recipe,
    .card--item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
    }

    .stock-info {
        text-align: left;
    }

    .card--menu {
        padding: 20px;
    }

    .menu-card__icon {
        width: 40px;
        height: 40px;
    }

    .menu-card__icon .icon {
        width: 24px;
        height: 24px;
    }
}