/* Responsive/WebApp safety fixes - RTL panels only
   This file only affects presentation. No workflow/controller behavior. */

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* Keep panel content wide enough on desktop, but fluid on smaller screens */
main {
    width: 100%;
    max-width: 1280px;
}

@media (min-width: 768px) {
    body > .flex-1,
    body > div.flex-1 {
        min-width: 0;
    }

    main {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Tables should not break mobile layout */
table {
    width: 100%;
}

.overflow-x-auto,
.table-responsive {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Make common tables scroll inside their card on mobile */
@media (max-width: 767px) {
    table {
        min-width: 720px;
    }

    .bg-white:has(table),
    .rounded:has(table),
    .shadow:has(table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Mobile drawer: RTL panels must open from RIGHT, never from left */
@media (max-width: 767px) {
    body {
        display: block !important;
    }

    aside {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        bottom: 0 !important;
        width: min(82vw, 19rem) !important;
        max-width: 19rem !important;
        height: 100vh !important;
        z-index: 60 !important;
        background: #fff !important;
        border-left: 1px solid #e5e7eb !important;
        border-right: 0 !important;
        box-shadow: -12px 0 30px rgba(15, 23, 42, 0.18) !important;
        overflow-y: auto !important;
        transform: translateX(0) !important;
    }

    aside.hidden {
        display: none !important;
    }

    aside:not(.hidden) {
        display: flex !important;
        flex-direction: column !important;
    }

    header {
        position: sticky;
        top: 0;
        z-index: 30;
        gap: .75rem;
    }

    header h1 {
        font-size: 1rem !important;
        line-height: 1.5rem !important;
        max-width: 55vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    header > div:last-child {
        max-width: 32vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .8rem;
    }

    main {
        padding: .75rem !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .grid {
        grid-template-columns: 1fr !important;
    }

    input, select, textarea, button, .btn, a[class*="bg-"] {
        max-width: 100%;
    }

    form .flex,
    .actions,
    .filter-actions {
        flex-wrap: wrap;
    }

    button, a {
        touch-action: manipulation;
    }

    .p-6 { padding: 1rem !important; }
    .p-5 { padding: .9rem !important; }
    .p-4 { padding: .75rem !important; }

    .text-2xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
    .text-xl { font-size: 1.125rem !important; line-height: 1.75rem !important; }
}

@media print {
    aside,
    header,
    #mobileMenuBtn {
        display: none !important;
    }

    main {
        max-width: 100% !important;
        padding: 0 !important;
    }
}