/**
 * AWP Admin Responsive CSS - v5.0
 * RTL-aware mobile-first responsive fixes
 * The site uses dir="rtl" so sidebar is on the RIGHT side.
 * To hide: translateX(+100%) slides it off the right edge.
 * To show: translateX(0)
 */

/* ================================================
   ROOT VARIABLES
   ================================================ */
:root {
    --sidebar-width: 256px;
    --transition-speed: 0.3s;
}

/* ================================================
   DESKTOP (>= 1024px) — No changes, keep defaults
   ================================================ */
@media (min-width: 1024px) {

    /* Hide hamburger on desktop */
    .hamburger-btn {
        display: none !important;
    }

    /* Sidebar — normal flow, always visible */
    body>div.flex>aside {
        position: relative !important;
        transform: none !important;
        visibility: visible !important;
        height: auto !important;
    }

    /* Hide overlay on desktop */
    #sidebar-overlay {
        display: none !important;
    }
}

/* ================================================
   MOBILE & TABLET (< 1024px) — Main responsive fixes
   ================================================ */
@media (max-width: 1023px) {

    /* ── BODY ── */
    body {
        overflow-x: hidden !important;
    }

    /* ── WRAPPER: Full height, column layout ── */
    body>div.flex {
        flex-direction: column !important;
        min-height: 100vh !important;
    }

    /* ══════════════════════════════════════════
       SIDEBAR - RTL: positioned on the RIGHT
       Hidden by default → slides in from right
       ========================================== */
    body>div.flex>aside {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        /* RTL: sidebar on the right */
        left: auto !important;
        width: var(--sidebar-width) !important;
        max-width: 85vw !important;
        height: 100vh !important;
        z-index: 9999 !important;
        transform: translateX(100%) !important;
        /* RTL: hide = slide to right */
        transition: transform var(--transition-speed) ease-in-out,
            visibility var(--transition-speed) !important;
        visibility: hidden !important;
        overflow-y: auto !important;
    }

    /* Sidebar OPEN state */
    body>div.flex>aside.sidebar-open {
        transform: translateX(0) !important;
        visibility: visible !important;
    }

    /* ── MAIN CONTENT: take full width ── */
    body>div.flex>main {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 !important;
    }

    /* ── HEADER: sticky top ── */
    header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        background: white !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }

    header>div {
        gap: 8px !important;
    }

    /* Hide search on small screens */
    header .w-96 {
        display: none !important;
    }

    /* ── HAMBURGER BUTTON ── */
    .hamburger-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        color: #4b5563 !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
    }

    .hamburger-btn:hover {
        background: #f3f4f6 !important;
        color: #1e40af !important;
    }

    /* ── OVERLAY ── */
    #sidebar-overlay {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 9998 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity var(--transition-speed), visibility var(--transition-speed) !important;
    }

    #sidebar-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* ── GRID LAYOUTS ── */
    .grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* ── TABLES: scrollable container ── */
    .overflow-x-auto {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
    }

    table {
        min-width: 580px !important;
        width: 100% !important;
    }

    table th,
    table td {
        padding: 8px 10px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    /* ── FIXED-WIDTH ELEMENTS ── */
    .w-64,
    .w-72,
    .w-80,
    .w-96 {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ── CONTENT PADDING ── */
    .p-6,
    .p-8 {
        padding: 16px !important;
    }

    .px-6,
    .px-8 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* ── FONTS ── */
    h1,
    .text-2xl {
        font-size: 1.25rem !important;
    }

    h2,
    .text-xl {
        font-size: 1.1rem !important;
    }
}

/* ================================================
   TABLET (768px - 1023px)
   ================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    .grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    header .w-96 {
        display: block !important;
        width: 180px !important;
    }
}

/* ================================================
   TOAST
   ================================================ */
#admin-toast {
    position: fixed;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    background: #1e40af;
    color: white;
    padding: 12px 24px;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
    font-weight: bold;
    z-index: 99999;
    opacity: 0;
    transition: top 0.4s ease, opacity 0.4s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

#admin-toast.show {
    top: 16px;
    opacity: 1;
}

/* ================================================
   UTILITY CLASSES
   ================================================ */
.mobile-only {
    display: none !important;
}

@media (max-width: 1023px) {
    .mobile-only {
        display: block !important;
    }
}

.desktop-only {
    display: block !important;
}

@media (max-width: 1023px) {
    .desktop-only {
        display: none !important;
    }
}

/* Touch targets */
@media (pointer: coarse) {

    button,
    a {
        min-height: 44px;
    }
}

/* Safe area for notched devices */
@supports (padding: env(safe-area-inset-bottom)) {
    .fixed.bottom-0 {
        padding-bottom: env(safe-area-inset-bottom);
    }
}