*{
    box-sizing: border-box;
}

body{
    margin: 0;
    padding: 0;
    background-color: #f0f2f5;
}

/* KLUCZOWA REGUŁA: Wszystko z klasą .no-print znika na wydruku oraz w oknie zapisu do PDF */
@media print {
    .no-print {
        display: none !important;
    }
    body {
        background-color: #fff !important;
    }
    #menu-content {
        background-color: transparent !important; /* Usuwamy tło podglądu podczas drukowania */
    }
    #container {
        width: 100% !important;
        height: auto !important;
    }
}

@font-face {
    font-family: 'Nexa-book'; /* Tutaj wpisujesz dowolną nazwę, jakiej będziesz używać w kodzie */
    src: url('../res/Nexa-Book.woff') format('woff');
    font-weight: normal; /* Grubość czcionki (np. normal, bold, 400, 700) */
    font-style: normal;  /* Styl (normal lub italic) */
    font-display: swap;  /* Zapobiega niewidzialnemu tekstowi podczas ładowania strony */
}

@font-face {
    font-family: 'Intro-regular'; /* Tutaj wpisujesz dowolną nazwę, jakiej będziesz używać w kodzie */
    src: url('../res/Intro-Regular-Caps.woff') format('woff');
    font-weight: normal; /* Grubość czcionki (np. normal, bold, 400, 700) */
    font-style: normal;  /* Styl (normal lub italic) */
    font-display: swap;  /* Zapobiega niewidzialnemu tekstowi podczas ładowania strony */
}

#container{
    width: 100vw;
    height: 100vh;
    text-align: center;
    padding-top: 10px;
}

.dish-pl{
    font-family: 'Intro-regular', sans-serif;
    font-weight: 700;
    font-size: 13pt;
    color: #5b5e3f;
    margin: 5px;
    text-transform: uppercase;
}

.dish-eng{
    font-family: 'Nexa-book', sans-serif;
    font-weight: 500;
    font-size: 11pt;
    color: #5b5e3f;
    margin: 5px;
    text-transform: uppercase;
}
   /*  */
/* Nagłówek kategorii – wycentrowany, dwujęzyczny w jednej linii */
    .menu-print-header {
        font-family: 'Intro-regular', sans-serif;
        text-transform: uppercase;
        margin: 0 0 15px 0;
        padding-bottom: 5px;
        /* Centrowanie elementów w jednej linii */
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px; /* Odstęp między tekstem a separatorem */
    }

    /* KLASY DLA POSZCZEGÓLNYCH JĘZYKÓW W NAGŁÓWKU (Tutaj możesz przypisać różne fonty) */
    .menu-print-header .header-pl {
        font-size: 22px;
        font-weight: 700;
        color: #5b5e3f;
    }

    .menu-print-header .header-eng {
        font-size: 16px;
        font-weight: 400;
        color: #5b5e3f;                      /* Przykładowy inny kolor dla ENG */
    }

    /* Styl dla pionowej kreski separatora */
    .header-separator {
        font-weight: normal;
        color: #5b5e3f;
    }
/*  */
#menu{
    width: 210mm;
    height: 297mm;
    background-image: url(../res/under-the-counter_bg.jpg);
    background-size: cover;
    background-position: center;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.15); /* Cień podglądu A4 na ekranie */
}

#menu-content{
    position: relative;
    top: 110mm;
    left: 25mm;
    width: 160mm;
    height: 140mm;
    background-color: rgba(127, 255, 212, 0.2); /* Lekki podgląd obszaru aquamarine na ekranie */
    padding: 10px;
    overflow: hidden;
}




/* --- DODATKOWE STYLE DLA PANELU KONTROLNEGO (NIE DRUKUJE SIĘ) --- */
    #admin-panel {
        background: #2c3e50;
        color: #fff;
        padding: 15px;
        text-align: left;
        font-family: Arial, sans-serif;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        margin-bottom: 20px;
    }
    #admin-panel h2 { margin: 0 0 10px 0; font-size: 18px; color: #ecf0f1; }
    #admin-panel select, #admin-panel button { padding: 8px 12px; margin-right: 10px; border-radius: 4px; border: none; }
    #admin-panel button { background: #27ae60; color: white; font-weight: bold; cursor: pointer; }
    #admin-panel button:hover { background: #219653; }
    .panel-section { display: inline-block; margin-right: 30px; vertical-align: top; }

    /* --- STYLISTYKA ELEMENTÓW KARTY MENU (POD WYDRUK) --- */
    /* Główny kontener sekcji wewnątrz arkusza A4 */
    .menu-cat-block {
        text-align: center;
        margin-bottom: 25px;
        position: relative;
    }
    
    /* Nagłówek kategorii na karcie */
    .menu-print-header {
        font-size: 22px;
        font-weight: bold;
        text-transform: uppercase;
        margin: 0 0 0 0;
        padding-bottom: 5px;
        display: block;
        text-align: center;
    }

    /* Wygląd pojedynczej pozycji dania na wydruku */
    .menu-print-dish {
        font-size: 16px;
        margin-top: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
    }
    .dish-price { 
        font-family: 'Nexa-book', sans-serif;
        font-weight: 800;
        font-size: 10pt;
        color: #5b5e3f;
        margin: 5px;
        text-transform: uppercase;
     }

    /* Małe przyciski usuwania (widoczne tylko na ekranie) */
    .del-btn {
        background: #e74c3c;
        color: white;
        border: none;
        padding: 2px 6px;
        font-size: 11px;
        border-radius: 3px;
        cursor: pointer;
        margin-left: 10px;
    }
    .del-btn:hover { background: #c0392b; }

    header-del-btn {
        position: absolute;
        right: 0;
        top: -5px;
        z-index: 10;
        background: #e74c3c;
        color: white;
        border: none;
        padding: 4px 8px;
        font-size: 11px;
        border-radius: 4px;
        cursor: pointer;
    }
    .header-del-btn:hover { background: #c0392b; }

    /* Ukrywanie przycisków usuwania w trakcie drukowania */
    @media print {
        .del-btn { display: none !important; }
        #admin-panel { display: none !important; }
        /* Wymuszenie drukowania kolorów i grafik tła dla silników Chromium (Chrome, Edge, Opera) i Safari */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    }

    /* Style ułatwiające edycję na ekranie monitora */
[contenteditable="true"] {
    cursor: text;
    outline: none; /* Usuwa domyślną grubą ramkę przeglądarki */
    transition: background-color 0.2s ease;
}

/* Delikatne podświetlenie tła po najechaniu myszką (tylko na ekranie) */
[contenteditable="true"]:hover {
    background-color: rgba(241, 196, 15, 0.1); /* Lekko żółte tło */
    border-radius: 3px;
}

/* Wygląd elementu w momencie, gdy w niego klikniemy i piszemy */
[contenteditable="true"]:focus {
    background-color: rgba(241, 196, 15, 0.2);
    box-shadow: 0 0 4px rgba(241, 196, 15, 0.5);
}

/* Upewniamy się, że na wydruku podświetlenia edycji całkowicie znikną */
@media print {
    [contenteditable="true"]:hover,
    [contenteditable="true"]:focus {
        background-color: transparent !important;
        box-shadow: none !important;
    }
}

@media print {
    /* 1. Zerujemy domyślne marginesy strony narzucane przez przeglądarkę */
    @page {
        size: A4 portrait; /* Lub portrait, zależnie od Twojego szablonu */
        margin: 0 !important;
    }

    /* 2. Całkowicie wycinamy panel z drzewa renderowania, żeby nie zajmował ani 1 piksela przestrzeni */
    #admin-panel, .no-print {
        display: none !important;
        position: absolute !important;
        top: -9999px !important;
        opacity: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. Zerujemy marginesy body i kontenera, aby menu dosunęło się idealnie do samej góry kartki */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        height: 100% !important;
        background-color: #fff !important;
    }

    #container {
        margin: 0 !important;
        padding: 0 !important;
        padding-top: 0 !important;
        top: 0 !important;
    }

    #menu {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        box-shadow: none !important;
        page-break-after: avoid !important;
        break-after: avoid !important;
    }
}