/**
 * System Mode v1.0 — Future 2026
 * Стили для режима SYSTEM
 */

/* ========================================
   Mode: Normal (default)
   ======================================== */

body.mode-normal {
    /* Стандартные стили, без изменений */
}

body.mode-normal .mode-switch__link:not(.mode-switch__link--active) {
    opacity: 0.5;
}

/* ========================================
   Mode: System
   ======================================== */

body.mode-system {
    /* Системный режим — показываем служебную информацию */
}

/* Show AI slots outline in system mode */
body.mode-system .ai-slot {
    position: relative;
    min-height: 40px;
    border: 2px dashed var(--color-primary-300);
    background-color: var(--color-primary-50);
}

body.mode-system .ai-slot::before {
    content: attr(data-ai-slot);
    position: absolute;
    top: var(--spacing-2);
    left: var(--spacing-2);
    padding: var(--spacing-1) var(--spacing-2);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary-700);
    background-color: var(--color-white);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-sm);
}

body.mode-system .ai-slot:empty {
    display: block;
}

body.mode-system .ai-slot:empty::after {
    content: "Empty AI Slot";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-xs);
    color: var(--color-primary-400);
    white-space: nowrap;
}

/* Component debug outline */
body.mode-system .product-card {
    outline: 1px solid var(--color-info);
    outline-offset: 2px;
}

body.mode-system .product-detail {
    outline: 1px solid var(--color-info);
    outline-offset: 4px;
}

/* Show mode indicator */
body.mode-system::after {
    content: "SYSTEM MODE";
    position: fixed;
    bottom: var(--spacing-4);
    right: var(--spacing-4);
    padding: var(--spacing-2) var(--spacing-4);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    background-color: var(--color-warning);
    border-radius: var(--border-radius-md);
    z-index: var(--z-fixed);
}

/* System mode header */
body.mode-system .site-header {
    border-bottom-color: var(--color-warning);
    border-bottom-width: 3px;
}

/* Debug info panel */
body.mode-system .debug-panel {
    display: block;
    padding: var(--spacing-4);
    margin: var(--spacing-4) 0;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    background-color: var(--color-gray-100);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--border-radius-md);
}

body.mode-normal .debug-panel {
    display: none;
}

/* ========================================
   Print Mode Adjustments
   ======================================== */

@media print {
    body.mode-system::after {
        display: none;
    }

    body.mode-system .ai-slot {
        border: none;
        background: none;
    }

    body.mode-system .ai-slot::before,
    body.mode-system .ai-slot::after {
        display: none;
    }
}

/* ========================================
   Responsive: System Mode
   ======================================== */

@media (max-width: 768px) {
    body.mode-system::after {
        bottom: var(--spacing-2);
        right: var(--spacing-2);
        padding: var(--spacing-1) var(--spacing-2);
        font-size: 10px;
    }

    body.mode-system .ai-slot::before {
        font-size: 10px;
    }
}