/* Bleta Ime — stile globale (të ndara nga index.html për cache dhe lexueshmëri) */

[x-cloak] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background-color: #f9fafb;
    min-height: 100%;
    min-height: 100dvh;
}

body {
    background-color: #f9fafb;
    min-height: 100%;
    min-height: 100dvh;
}

/* Desktop / tablet i gjerë: një kolonë scroll (main) brenda lartësisë së ekranit */
.app-shell {
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
}

@supports not (height: 100dvh) {
    .app-shell {
        height: 100vh;
        max-height: 100vh;
    }
}

.min-app-screen {
    min-height: 100dvh;
}

@supports not (height: 100dvh) {
    .min-app-screen {
        min-height: 100vh;
    }
}

/*
 * Telefon: mos përdor lartësi fikse në .app-shell — me pinch-zoom visual viewport
 * dhe vlera në px nuk përputhen, dhe shfaqet bandë e bardhë që rritet me zoom.
 * Scroll bëhet në dritare (dokument), jo vetëm brenda <main>.
 */
@media (max-width: 1023px) {
    html, body {
        height: auto;
        min-height: 100%;
        min-height: 100svh;
        min-height: 100dvh;
    }

    .app-shell {
        height: auto;
        min-height: 100svh;
        min-height: 100dvh;
        max-height: none;
        overflow-x: hidden;
        overflow-y: visible;
    }

    .app-shell > main {
        overflow-x: hidden;
        overflow-y: visible !important;
        min-height: 0;
    }
}

.active-link { border-left: 4px solid #EAB308; background: #fefce8; color: #854d0e; }

aside nav button i.fas { color: #171717; }

aside nav button.active-link i.fas { color: #854d0e; }

/* Sidebar: scroll me wheel/touch, pa shfaqur scrollbar */
.sidebar-nav-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.sidebar-nav-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.modal-bg { background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px); }

/* Modal ndryshimi: mos lejo scroll të faqes prapa; scroll bëhet vetëm në .edit-modal-scroll */
html.edit-modal-open,
body.edit-modal-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

.edit-modal-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.glass-card { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); }

@media (max-width: 1023px) {

    body.mobile-drawer-open { overflow: hidden; touch-action: none; }

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

    body {
        touch-action: manipulation;
        overscroll-behavior-y: none;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
    }

}