/* ===== Responsive Styles - التجاوب مع الشاشات ===== */

/* Tablets and Small Screens */
@media screen and (max-width: 900px) {
    body {
        padding: 10px;
    }

    .controls {
        flex-wrap: wrap;
        padding: 10px;
        gap: 8px;
    }

    .btn {
        padding: 6px 14px;
        font-size: 12px;
        gap: 5px;
    }

    .btn i {
        font-size: 14px;
    }

    #content {
        width: 100% !important;
        margin-top: 100px !important;
    }

    .page {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 210 / 297;
    }

    input {
        font-size: 2vw !important;
        height: 2.5vw !important;
        padding: 0 !important;
    }
}

/* Mobile Phones */
@media screen and (max-width: 500px) {
    .controls {
        padding: 8px;
        gap: 5px;
    }

    .btn {
        padding: 5px 10px;
        font-size: 10px;
        border-radius: 15px;
    }

    #content {
        margin-top: 90px !important;
    }

    input {
        font-size: 1.8vw !important;
        height: 2.2vw !important;
    }
}

/* PDF Export Mode */
body.exporting #content {
    width: 210mm !important;
    margin: 0 auto !important;
    line-height: 0;
    font-size: 0;
}

body.exporting .page {
    width: 210mm !important;
    height: 296.5mm !important;
    aspect-ratio: auto !important;
    page-break-after: always !important;
    page-break-inside: avoid !important;
    page-break-before: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
    position: relative !important;
}

body.exporting .page:last-child {
    page-break-after: auto !important;
}

body.exporting input {
    font-size: 19px !important;
    height: 30px !important;
}

body.exporting input.masked-date {
    height: 40px !important;
    font-size: 18px !important;
    padding-bottom: 5px !important;
}

body.exporting .editable-date {
    font-size: 20px !important;
    height: auto !important;
    background: white !important;
    border: none !important;
}