/**
 * Global Responsive CSS
 * Learning Resource Management System
 *
 * Applied system-wide via header.php and public pages
 * Breakpoints: xs<576 | sm<768 | md<992 | lg<1200 | xl>=1200
 */

/* ===== BASE: prevent horizontal scroll ===== */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

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

img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* ===== Leaflet map exceptions =====
 * Leaflet ใช้ inline style กำหนด width/height ของ tile + marker
 * เราต้องไม่ override อะไร — แค่ปลดล็อก max-width: 100% ที่ inherit มา */
.leaflet-container img,
.leaflet-container svg,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-tile-pane img,
.leaflet-popup img,
.leaflet-pane img,
.leaflet-pane svg {
    max-width: none !important;
    max-height: none !important;
    /* ไม่กำหนด height/width — ให้ Leaflet จัดการเอง */
}
/* box-sizing: content-box สำหรับ Leaflet (กัน global box-sizing: border-box ทำให้ tile/marker เพี้ยน) */
.leaflet-container,
.leaflet-container * {
    box-sizing: content-box !important;
}
.leaflet-container {
    width: 100%;
    height: 100%;
}

/* ===== iOS auto-zoom fix: inputs must be >=16px ===== */
@media (max-width: 767.98px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    select,
    textarea,
    .form-control,
    .form-select {
        font-size: 16px !important;
    }
}

/* ===== Tables: horizontal scroll on small screens ===== */
@media (max-width: 991.98px) {
    .table-responsive-mobile,
    .table:not(.table-no-responsive) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

/* ===== Modal: full-screen on phones ===== */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        min-height: 100vh;
    }
    .modal-content {
        min-height: 100vh;
        border-radius: 0;
        border: none;
    }
    .modal-dialog-scrollable .modal-content {
        max-height: 100vh;
    }
}

/* ===== Dropdown menu: don't overflow viewport ===== */
@media (max-width: 575.98px) {
    .dropdown-menu {
        max-width: calc(100vw - 2rem);
    }
}

/* ===== Touch targets: min 44px ===== */
@media (hover: none) and (pointer: coarse) {
    .btn, .nav-link, .page-link, a.list-group-item,
    .dropdown-item, button[type="submit"], button[type="button"] {
        min-height: 44px;
    }
    .btn-sm, .page-link-sm {
        min-height: 36px;
    }
    /* Checkbox/radio เหมาะกับนิ้วมือ */
    input[type="checkbox"], input[type="radio"] {
        min-width: 20px;
        min-height: 20px;
    }
}

/* ===== Container padding on mobile ===== */
@media (max-width: 575.98px) {
    .container,
    .container-fluid {
        padding-left: 0.875rem;
        padding-right: 0.875rem;
    }
}

/* ===== Typography on mobile ===== */
@media (max-width: 767.98px) {
    h1 { font-size: 1.625rem; }
    h2 { font-size: 1.375rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.125rem; }
    h5 { font-size: 1rem; }
    h6 { font-size: 0.9375rem; }

    .display-1, .display-2, .display-3 { font-size: 2rem; }
    .display-4, .display-5, .display-6 { font-size: 1.75rem; }

    .lead { font-size: 1rem; }
}

/* ===== Card spacing on mobile ===== */
@media (max-width: 767.98px) {
    .card-body {
        padding: 1rem;
    }
    .card-header, .card-footer {
        padding: 0.75rem 1rem;
    }
}

/* ===== Form: labels + spacing ===== */
@media (max-width: 575.98px) {
    .form-label {
        font-size: 0.875rem;
        margin-bottom: 0.375rem;
    }
    .row.g-3 { --bs-gutter-y: 0.75rem; }
    .row.g-4 { --bs-gutter-y: 1rem; }
}

/* ===== Buttons: stack on mobile ===== */
@media (max-width: 575.98px) {
    /* ให้กลุ่มปุ่มใน header page (ขวาสุด) กระจายเต็มแถว */
    .page-header-actions,
    .btn-toolbar:not(.btn-toolbar-keep) {
        flex-wrap: wrap;
        gap: 0.375rem;
    }
    .btn-group-mobile-stack .btn {
        width: 100%;
        margin-bottom: 0.375rem;
    }
}

/* ===== Pagination: compact on mobile ===== */
@media (max-width: 575.98px) {
    .pagination .page-link {
        padding: 0.4rem 0.65rem;
        font-size: 0.8125rem;
    }
}

/* ===== Nav tabs: scroll horizontally ===== */
@media (max-width: 767.98px) {
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .nav-tabs::-webkit-scrollbar {
        height: 3px;
    }
    .nav-tabs::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.2);
        border-radius: 3px;
    }
    .nav-tabs .nav-link {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ===== Breadcrumb: compact ===== */
@media (max-width: 575.98px) {
    .breadcrumb {
        font-size: 0.8125rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        padding: 0.5rem 0.75rem;
    }
}

/* ===== Alerts: fit nicely ===== */
@media (max-width: 575.98px) {
    .alert {
        padding: 0.75rem 0.875rem;
        font-size: 0.9rem;
    }
}

/* ===== Navbar brand: shorten on mobile ===== */
@media (max-width: 767.98px) {
    .navbar-brand {
        font-size: 0.9375rem;
        max-width: 60%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .navbar-brand i {
        font-size: 1.125rem;
    }
}

/* ===== Dashboard sidebar: overlay mode on tablets/phones ===== */
@media (max-width: 991.98px) {
    /* Bootstrap already handles most of this; reinforce sidebar below */
    .main-content {
        margin-left: 0 !important;
    }
    /* ป้องกันเนื้อหาเลื่อนเมื่อ sidebar เปิด */
    body.sidebar-open {
        overflow: hidden;
    }
}

/* ===== Page header: stack on mobile ===== */
@media (max-width: 575.98px) {
    .page-header,
    .d-flex.justify-content-between {
        flex-wrap: wrap;
    }
}

/* ===== Image in cards: consistent aspect ratio ===== */
@media (max-width: 575.98px) {
    .card-img-top,
    .resource-image {
        aspect-ratio: 4/3;
        object-fit: cover;
    }
}

/* ===== Grid gutters on mobile ===== */
@media (max-width: 575.98px) {
    .row.g-3 { --bs-gutter-x: 0.75rem; }
    .row.g-4 { --bs-gutter-x: 1rem; }
    .row.g-5 { --bs-gutter-x: 1.25rem; }
}

/* ===== Sticky top elements: adjust for mobile nav ===== */
@media (max-width: 767.98px) {
    .position-sticky[style*="top"] {
        top: 60px !important;
    }
}

/* ===== Footer: center on mobile ===== */
@media (max-width: 767.98px) {
    footer, .footer {
        text-align: center;
    }
    .footer .footer-links {
        align-items: center;
    }
}

/* ===== Print: clean output ===== */
@media print {
    .no-print, .sidebar, .navbar, nav, footer, .footer, .modal {
        display: none !important;
    }
    .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }
    body {
        background: white !important;
    }
    .card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
}

/* ===== Utility: hide/show per breakpoint (extra to Bootstrap) ===== */
@media (max-width: 575.98px) {
    .hide-xs { display: none !important; }
}
@media (max-width: 767.98px) {
    .hide-sm { display: none !important; }
}

/* ===== Focus ring: accessible ===== */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible,
a:focus-visible {
    outline: 2px solid rgba(99, 102, 241, 0.5);
    outline-offset: 2px;
}

/* ===== Smooth scroll ===== */
html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== Scrollbar: thin, subtle ===== */
@media (min-width: 768px) {
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    ::-webkit-scrollbar-track {
        background: #f1f5f9;
    }
    ::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }
}

/* ===== Long text: break words ===== */
.text-break-all {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Default for titles/paragraphs */
p, h1, h2, h3, h4, h5, h6, li, td, th {
    overflow-wrap: break-word;
}

/* ===== Table cell on mobile: wrap long content ===== */
@media (max-width: 767.98px) {
    .table td, .table th {
        white-space: normal;
    }
    .table.table-nowrap td, .table.table-nowrap th {
        white-space: nowrap;
    }
}