/* ============================================================================
 * responsive-fix.css
 * Generic mobile/responsive hardening layer. Loaded LAST so it overrides
 * earlier rules. Does NOT change colors, fonts, or visual design — only
 * fixes overflow, stacking, and mobile usability issues.
 * ============================================================================ */

/* 1. Prevent any stray horizontal overflow on the whole page ------------- */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* 2. Images and media never exceed their container ---------------------- */
img, video, iframe, svg, canvas, embed, object {
    max-width: 100%;
    height: auto;
}

/* 3. Tables — wrap automatically so they scroll horizontally on mobile --- */
/* Any <table> that isn't already inside a .table-responsive wrapper */
table {
    max-width: 100%;
}

@media (max-width: 768px) {
    /* Make all tables horizontally scrollable on mobile */
    table:not(.no-responsive) {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* Keep thead/tbody visible inside the scrollable block */
    table:not(.no-responsive) > thead,
    table:not(.no-responsive) > tbody,
    table:not(.no-responsive) > tfoot {
        display: table;
        width: 100%;
    }
}

/* 4. Hard-coded large widths get capped at viewport width --------------- */
.container, .wrapper, .main, main, .content, .page, .page-content {
    max-width: 100%;
}

/* 5. Common grid/flex layouts stack on mobile --------------------------- */
@media (max-width: 768px) {
    .grid, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6,
    .row, .flex-row, .two-col, .three-col, .four-col {
        grid-template-columns: 1fr !important;
        flex-direction: column;
    }

    .col, .col-2, .col-3, .col-4, .col-5, .col-6,
    [class*="col-md-"], [class*="col-lg-"], [class*="col-xl-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* 6. Sidebars collapse on mobile ---------------------------------------- */
@media (max-width: 992px) {
    .layout-sidebar,
    .sidebar-layout,
    .with-sidebar {
        display: block !important;
    }

    .sidebar, aside.sidebar, .side-nav {
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        margin-bottom: 1rem;
    }
}

/* 7. Buttons and inputs — comfortable mobile tap targets ---------------- */
@media (max-width: 768px) {
    button, .btn, input[type="submit"], input[type="button"], a.btn {
        min-height: 44px;
    }

    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="search"], input[type="tel"],
    input[type="url"], input[type="date"], select, textarea {
        max-width: 100%;
        min-height: 44px;
        font-size: 16px; /* prevents iOS auto-zoom on focus */
    }
}

/* 8. Typography scales down on small screens --------------------------- */
@media (max-width: 576px) {
    h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
    h2 { font-size: clamp(1.25rem, 5vw, 1.75rem); }
    h3 { font-size: clamp(1.1rem, 4vw, 1.5rem); }

    body {
        font-size: 15px;
    }
}

/* 9. Padding adjustments on narrow viewports --------------------------- */
@media (max-width: 576px) {
    .container, .wrapper, main, .main-content, .page {
        padding-left: 12px;
        padding-right: 12px;
    }

    .card, .panel, .box {
        padding: 12px;
    }
}

/* 10. Pre/code blocks scroll instead of overflow ------------------------ */
pre, code {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    word-wrap: break-word;
}

/* 11. Long unbreakable strings wrap -------------------------------------- */
p, li, td, th, dt, dd, blockquote, figcaption {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* 12. Modal/dialog width caps ------------------------------------------- */
.modal, .modal-content, .dialog, dialog {
    max-width: 100%;
}

@media (max-width: 768px) {
    .modal, .modal-content, .dialog {
        width: 95%;
        margin: 12px auto;
    }
}

/* 13. Navigation — hide desktop-only items on mobile where marked ------- */
@media (max-width: 768px) {
    .hide-mobile, .desktop-only {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .mobile-only, .show-mobile {
        display: none !important;
    }
}

/* ============================================================================
 * 14. Breakpoint-system shtesë (Wave Responsive 2026-04-25)
 *    Mobile:  <= 640px
 *    Tablet:  641px – 1024px
 *    Desktop: >= 1025px
 * ============================================================================ */

/* --- Mobile (<=640px) ---------------------------------------------------- */
@media (max-width: 640px) {
    /* Padding më i komod për container kryesor */
    .container, .container-fluid { padding-left: 14px; padding-right: 14px; }

    /* Headerat e mëdhenj — më proporcionalë */
    h1, .h1 { font-size: clamp(1.4rem, 5.5vw, 1.9rem); line-height: 1.2; }
    h2, .h2 { font-size: clamp(1.2rem, 5vw, 1.6rem); line-height: 1.25; }

    /* Card padding më modest */
    .glass-card, .card { padding: 14px !important; }

    /* Stat cards 2 kolonash në vend të 6 */
    .row.g-3 .col-md-2, .row.g-3 .col-md-3 { flex: 0 0 50%; max-width: 50%; }

    /* Dropdown menu nuk del jashtë ekranit */
    .dropdown-menu {
        max-width: calc(100vw - 24px);
        min-width: 0 !important;
    }

    /* Navbar-search në mobile (kur shfaqet) plot gjerësi */
    .nav-search-input { width: 100% !important; }

    /* Form fields: 16px parandalon zoom-in iOS */
    input, select, textarea, .form-control, .form-select {
        font-size: 16px !important;
    }

    /* Touch targets të mëdhenj për linket në navbar/dropdown */
    .nav-link, .dropdown-item {
        padding-top: 0.6rem !important;
        padding-bottom: 0.6rem !important;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Butonat me ikonat e bootstrap-it të jenë lehtësisht të prekshëm */
    .btn-sm, .btn { min-height: 40px; }

    /* Tabelat me indicator scroll horizontal */
    .table-responsive {
        position: relative;
    }
    .table-responsive::after {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 22px;
        background: linear-gradient(to right, transparent, rgba(0,0,0,0.06));
        pointer-events: none;
        opacity: 0.6;
    }
}

/* --- Tablet (641px – 1024px) -------------------------------------------- */
@media (min-width: 641px) and (max-width: 1024px) {
    /* Stat cards 3 për rresht */
    .row.g-3 .col-md-2 { flex: 0 0 33.333%; max-width: 33.333%; }

    /* Padding container i moderuar */
    .container { padding-left: 18px; padding-right: 18px; }

    /* Sidebar-collapse për admin layouts (nëse ekziston) */
    aside.sidebar, .side-nav {
        width: 220px !important;
    }
}

/* --- Desktop (>=1025px) — vetëm përmirësime -------------------------------- */
@media (min-width: 1025px) {
    /* Sigurohu që dropdown-menu-end nuk ngjitet me skajin */
    .dropdown-menu-end { right: 0; left: auto; }
}

/* ============================================================================
 * 15. Sidebar admin → hamburger në mobile
 * ============================================================================ */
@media (max-width: 768px) {
    /* Off-canvas pattern: nëse ka sidebar admin, fshihet dhe duket
       vetëm kur trupi merr klasën .sidebar-open. Aktivizimi bëhet me
       butonin .admin-sidebar-toggle. */
    .admin-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 80%;
        max-width: 320px;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        overflow-y: auto;
        background: var(--bg-card, #fff);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    }
    body.sidebar-open .admin-sidebar { transform: translateX(0); }
    body.sidebar-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1040;
    }
    .admin-sidebar-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 1px solid var(--border-color, #cbd5e1);
        background: var(--bg-card, #fff);
        border-radius: 8px;
        font-size: 1.25rem;
        color: var(--text-primary, #0c1e3d);
    }
}
@media (min-width: 769px) {
    .admin-sidebar-toggle { display: none !important; }
}

/* ============================================================================
 * 16. Lazy-load helper: imazhe që ngarkojnë me delay duket gradual
 * ============================================================================ */
img[loading="lazy"] {
    transition: opacity 0.25s ease-in;
}

/* ============================================================================
 * 17. Pagination — komod për mobile (touch + readability)
 * ============================================================================ */
@media (max-width: 640px) {
    .pagination .page-link {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.4rem 0.6rem;
        font-size: 0.95rem;
    }
    .pagination { flex-wrap: wrap; gap: 4px; }
    .pagination .page-item { margin: 2px; }
}

/* ============================================================================
 * 18. Kontrasti & accessibility — WCAG AA
 *     Përdoruesit me preferencë "reduce motion" nuk shohin animacione
 * ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Tekst muted — sigurohu që ka kontrast >= 4.5:1 në sfond të bardhë:
   #64748b mbi #ffffff = 4.54:1 (PASS WCAG AA). Konfirmuar. */
.text-muted, small.text-muted { color: #64748b !important; }