/* Google Fonts for Multi-language Supermarket Typography */
@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Cairo:wght@400;600;700;800;900&family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@400;600;700;800;900&family=Tajawal:wght@400;500;700;900&display=swap');

:root {
    --primary: #dc2626;
    --secondary: #facc15;
    --dark: #0f172a;
    --gray-bg: #f8fafc;
}

/* Clearer, calmer workspace chrome while keeping the existing editor controls intact. */
header.bg-white {
    min-height: 68px;
    background: linear-gradient(110deg, #fff 0%, #fbfcff 68%, #f5f7ff 100%);
}
header nav.bg-gray-100 {
    padding: 4px;
    border: 1px solid #e7eaf0;
    background: #f4f6fa;
}
.nav-tab {
    min-height: 38px;
    white-space: nowrap;
}
.module-view {
    min-width: 0;
}
#view-translator textarea {
    resize: vertical;
    line-height: 1.7;
}
#view-translator button {
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
#view-translator button:active {
    transform: translateY(1px);
}
@media (max-width: 1100px) {
    header.bg-white { flex-wrap: wrap; gap: 10px; }
    header nav.bg-gray-100 { order: 3; width: 100%; overflow-x: auto; }
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f1f5f9;
    color: #1e293b;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.font-cairo {
    font-family: 'Cairo', 'Tajawal', sans-serif;
}

.font-amiri {
    font-family: 'Amiri', serif;
}

.font-montserrat {
    font-family: 'Montserrat', sans-serif;
}

/* A4 Sheet Dimensions on Screen (roughly 1:1.414 ratio) */
.a4-sheet {
    width: 210mm;
    min-height: 297mm;
    max-height: 297mm;
    box-sizing: border-box;
    page-break-after: always;
    background: #ffffff;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Canva Workspace Canvas styling */
.canvas-wrapper {
    background-color: #e2e8f0;
    background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
    background-size: 16px 16px;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 16px 16px 40px 16px;
    overflow-y: auto !important;
    overflow-x: auto !important;
    height: 100% !important;
    max-height: 100% !important;
    scroll-behavior: smooth;
}

.canvas-container {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

/* Subtle dashed cut lines for shelf tags */
.cut-line-h {
    border-bottom: 1px dashed #94a3b8;
    position: relative;
}
.cut-line-h::after {
    content: '✂';
    position: absolute;
    right: -12px;
    top: -8px;
    font-size: 10px;
    color: #94a3b8;
}

/* High-contrast promotional badges */
.badge-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .85; }
}

/* Print Specific Rules - 100% Pixel Perfect to Paper */
@media print {
    @page {
        size: A4 portrait;
        margin: 0mm;
    }

    html, body {
        background: #ffffff !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    /* Hide non-printable application chrome, modals, and hidden views */
    header, nav, aside, .no-print, #navbar, #sidebar, #flyerToolbar, #priceToolbar, .layout-bar, #toastContainer, #elementPropertiesPanel,
    .modal, [id*="Modal"], [id*="modal"],
    body > *:not(main),
    .module-view.hidden {
        display: none !important;
    }

    .main-container {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        display: block !important;
    }

    /* Price tags module printing support */
    #view-promotion_price:not(.hidden) {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        width: 100% !important;
    }

    #view-promotion_price:not(.hidden) > div:not(#priceToolbar) {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        overflow: visible !important;
        width: 100% !important;
    }

    #priceTagsContainer {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .canvas-wrapper {
        background: none !important;
        padding: 0 !important;
        overflow: visible !important;
        min-height: 0 !important;
        display: block !important;
    }

    .a4-sheet {
        margin: 0 auto !important;
        box-shadow: none !important;
        border: none !important;
        width: 100% !important;
        min-height: 100vh !important;
        height: 100vh !important;
        page-break-after: always !important;
        page-break-inside: avoid !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .print-sheet {
        width: 210mm !important;
        height: 297mm !important;
        max-height: 297mm !important;
        margin: 0 auto !important;
        padding: 8mm !important;
        box-sizing: border-box !important;
        box-shadow: none !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .print-sheet:not(:last-child) {
        page-break-after: always !important;
        break-after: page !important;
    }

    .print-sheet:last-child {
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

    .print-sheet[data-layout="erp"] {
        padding: 6mm !important;
        gap: 2.5mm !important;
        justify-content: center !important;
        align-content: center !important;
    }

    .print-sheet [data-uid], .print-sheet [data-uid] * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* Five distinct retail looks; text colors remain controlled by the four swatches. */
.print-sheet [data-tag-design="fresh"] { border-left: 2mm solid #15803d !important; }
.print-sheet [data-tag-design="fresh"] > div:nth-of-type(1) { background: #f0fdf4 !important; }
.print-sheet [data-tag-design="bold"] { border-width: 2px !important; }
.print-sheet [data-tag-design="bold"] > div:nth-of-type(3) { border-width: 3px !important; }
.print-sheet [data-tag-design="premium"] { outline: 1px solid #d6a93a; outline-offset: -4px; }
.print-sheet [data-tag-design="premium"] > div:nth-of-type(1) { border-bottom-style: double !important; }
.print-sheet [data-tag-design="minimal"] { border-color: #111827 !important; border-radius: 0 !important; box-shadow: none !important; }
.print-sheet [data-tag-design="minimal"] > div:nth-of-type(3) { background: #fff !important; border-width: 1px !important; }

/* Compact controls: keep the canvas dominant and reveal infrequent tools only on demand. */
#sidebar { width: 17rem; padding: 12px; gap: 10px; background: #f8fafc; }
.sidebar-tool-disclosure, .price-appearance-disclosure { border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; overflow: hidden; }
.sidebar-tool-disclosure > summary, .price-appearance-disclosure > summary { display:flex; align-items:center; min-height:42px; padding:0 12px; color:#334155; font-size:12px; font-weight:800; cursor:pointer; list-style:none; }
.sidebar-tool-disclosure > summary::-webkit-details-marker, .price-appearance-disclosure > summary::-webkit-details-marker { display:none; }
.sidebar-tool-disclosure > summary::after, .price-appearance-disclosure > summary::after { content:'+'; margin-left:auto; color:#64748b; font-size:17px; }
.sidebar-tool-disclosure[open] > summary::after, .price-appearance-disclosure[open] > summary::after { content:'−'; }
.sidebar-tool-disclosure > [data-compact="true"] { margin:0 8px 8px; box-shadow:none; }
.price-appearance-disclosure { flex:0 0 100%; min-width:220px; }
.price-appearance-controls { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:4px 10px 12px; }
#priceToolbar > div:last-child { row-gap:8px; }
@media (max-width:700px) { #sidebar { width:14rem; } #priceToolbar { align-items:flex-start; } }
/* Prevent sidebar disclosures from collapsing to a thin strip in the flex column. */
#sidebar > .sidebar-tool-disclosure { flex: 0 0 auto; min-height: 44px; }
#sidebar > .sidebar-tool-disclosure > summary { box-sizing: border-box; height: 42px; min-height: 42px; flex: 0 0 42px; }
.price-appearance-disclosure { flex-shrink: 0; }