/* RESPONSIVE DESIGN */
@media (max-width: 1024px) {
    .top-banner { 
        width: 100%; 
        max-width: 1200px; 
        margin: 0 auto 5px auto;
        background: #e0e0e0; 
        aspect-ratio: 1200 / 200; 
        height: auto; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        border: 2px dashed #bbb; 
        color: #666;
        overflow: hidden;
        box-sizing: border-box;
        position: relative;
    }

    .top-banner img,
    .top-banner video,
    .top-banner iframe {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border: none;
    }
	
    .book-grid {
        grid-template-columns: repeat(3, 1fr); 
    }
}

@media (max-width: 768px) {
    /* Header-ийг босоо байрлалд шилжүүлэх */
    header, .header-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 15px !important;
        gap: 12px !important;
    }

    /* Навигацийн хэсэг */
    .nav-links {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        gap: 10px !important;
    }

    /* Мэндчилгээ */
    .user-greeting {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        font-size: 14px !important;
        margin-bottom: 5px !important;
    }

    /* Товчлууруудын нийтлэг хэмжээ */
    .nav-links a, 
    .btn-dashboard, 
    .btn-add, 
    .btn-logout {
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: auto !important;
        min-width: 120px !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
        margin: 4px !important;
        border-radius: 4px !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }

    /* Гарах товчны хүрээ */
    .nav-links a.btn-logout, 
    a.btn-logout {
        border: 1px solid #ffffff !important;
    }
	
    /* Үндсэн контейнер болон контент халихаас сэргийлэх */
    .container { 
        display: flex !important;
        flex-direction: column !important; 
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    div[style*="background: #fff"], 
    .note-content-body {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        word-break: break-word !important;
    }
	
    .search-section {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .search-section form {
        width: 90% !important;
        max-width: 90% !important;
        margin: 0 auto !important;
        flex-direction: row !important;
    }

    .btn-request-book,
    .btn-requested-list {
        display: block !important;
        width: 60% !important;
        margin: 0 auto !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
	
    .sidebar { 
        position: relative; 
        top: 0; 
        width: 100%; 
        margin-bottom: 15px;
    }

    .book-grid {
        grid-template-columns: repeat(2, 1fr); 
        gap: 10px;
    }

    .featured-news {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .featured-news > a {
        width: 100% !important;
        display: block !important;
    }

    .featured-news .news-img {
        width: 100% !important;
        max-width: 100% !important;
        height: 180px !important;
        background-size: cover !important;
    }

    .news-info {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px 0 !important;
    }
    
    .aphorism-bar {
        margin: 10px;
        width: calc(100% - 20px);
        padding: 12px 15px;
        border-left-width: 3px;
    }
    
    .aphorism-content {
        font-size: 13px;
        line-height: 1.5;
    }
    
    .aphorism-author {
        display: block;
        margin-top: 6px;
        margin-left: 0;
        font-size: 12px;
        font-style: normal;
    }
}

@media (max-width: 480px) {
    header, .header-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 8px !important;
        padding: 12px 10px !important;
    }

    header .logo,
    header img {
        display: block !important;
        margin: 0 auto !important;
    }

    .nav-links {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        gap: 6px !important;
    }

    .user-greeting {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        font-size: 13px !important;
        margin-bottom: 4px !important;
    }

    .nav-links a, 
	.btn-dashboard, 
	.btn-add, 
	.btn-logout {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		width: 90% !important;
		max-width: 280px !important;
		text-align: center !important;
		font-size: 13px !important;
		padding: 8px 10px !important;
		margin: 4px auto !important;
		box-sizing: border-box !important;
		border-radius: 4px !important;
		text-decoration: none !important;
		white-space: nowrap !important;
		gap: 6px !important;
	}

    .nav-links a.btn-logout, 
    a.btn-logout {
        border: 1px solid #ffffff !important;
        border-radius: 4px !important;
        box-sizing: border-box !important;
    }

    body, html {
        overflow-x: hidden !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .container, div[style*="background: #fff"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        padding: 10px !important;
    }

    .featured-news {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .featured-news > a {
        width: 100% !important;
        display: block !important;
    }

    .featured-news .news-img {
        width: 100% !important;
        max-width: 100% !important;
        height: 160px !important;
        background-size: cover !important;
    }

    .news-info {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 8px 0 !important;
    }
}