/* Responsive Styles for Report System */

/* Sidebar Responsive Enhancements */
@media (max-width: 1024px) {
    .sidebar-header h4 {
        font-size: 17px;
    }

    .main-content {
        padding: 15px !important;
    }
}

@media (max-width: 768px) {
    .sidebar {
        left: -250px !important;
    }

    .sidebar.active {
        left: 0 !important;
    }

    .menu-toggle {
        display: block !important;
    }

    .main-content {
        margin-left: 0 !important;
        padding: 15px !important;
        padding-top: 70px !important;
        /* เพิ่ม padding-top เพื่อไม่ให้ปุ่มเมนูบังข้อความ */
    }

    /* ปรับ header ให้ไม่ถูกบังด้วยปุ่มเมนู */
    .main-content>div:first-child {
        margin-top: 0 !important;
    }
}

@media (max-width: 480px) {
    .sidebar {
        width: 100% !important;
        left: -100% !important;
    }

    .sidebar.active {
        left: 0 !important;
    }

    .sidebar-header h4 {
        font-size: 16px !important;
    }

    .sidebar-header p {
        font-size: 11px !important;
    }

    .sidebar-menu a {
        font-size: 13px !important;
        padding: 12px 15px !important;
    }

    .sidebar-menu i {
        font-size: 16px !important;
    }

    .menu-badge {
        font-size: 10px !important;
        min-width: 20px !important;
        height: 20px !important;
    }

    .main-content {
        padding: 10px !important;
        padding-top: 65px !important;
        /* เพิ่ม padding-top เพื่อไม่ให้ปุ่มเมนูบังข้อความ */
    }
}

/* Dashboard Responsive */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column !important;
        gap: 15px !important;
        text-align: center !important;
        padding: 15px 20px !important;
    }

    .navbar h1 {
        font-size: 20px !important;
    }

    .navbar .user-info {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .info-grid {
        grid-template-columns: 1fr !important;
    }

    .info-row {
        flex-direction: column !important;
        gap: 5px !important;
    }

    .info-label {
        min-width: auto !important;
    }

    .logs-table {
        font-size: 14px !important;
    }

    .logs-table th,
    .logs-table td {
        padding: 8px !important;
    }

    .welcome-card {
        padding: 20px !important;
    }

    .welcome-card h2 {
        font-size: 24px !important;
    }

    .info-card {
        padding: 20px !important;
    }

    .info-card h3 {
        font-size: 16px !important;
    }
}

@media (max-width: 480px) {
    .navbar h1 {
        font-size: 18px !important;
    }

    .welcome-card h2 {
        font-size: 20px !important;
    }

    .welcome-card p {
        font-size: 14px !important;
    }

    .info-card h3 {
        font-size: 15px !important;
    }

    .btn-logout {
        padding: 6px 15px !important;
        font-size: 14px !important;
    }

    .logs-table {
        font-size: 12px !important;
    }

    .logs-table th,
    .logs-table td {
        padding: 6px !important;
    }
}

/* Login Page Responsive Enhancements */
@media (max-width: 480px) {
    .login-header {
        padding: 40px 25px 30px !important;
    }

    .login-header h1 {
        font-size: 20px !important;
    }

    .login-header .subtitle {
        font-size: 14px !important;
    }

    .login-header .location {
        font-size: 13px !important;
    }

    .login-body {
        padding: 30px 20px !important;
    }

    .logo {
        width: 85px !important;
        height: 85px !important;
    }

    .form-group label {
        font-size: 14px !important;
    }

    .form-group input {
        font-size: 15px !important;
        padding: 12px 15px 12px 40px !important;
    }

    .btn-login {
        font-size: 16px !important;
        padding: 14px !important;
    }
}

/* Utilities Pages Responsive (Tailwind-based) */
@media (max-width: 1024px) {
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media (max-width: 768px) {

    /* Utilities Pages - แก้ปัญหาปุ่มเมนูบังข้อความ */
    .main-content.min-h-screen {
        padding-top: 70px !important;
    }

    .main-content .mb-8:first-child,
    .main-content .mb-6:first-child {
        margin-top: 0 !important;
    }

    /* Filters */
    .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-5,
    .grid.grid-cols-1.md\\:grid-cols-5 {
        grid-template-columns: 1fr !important;
    }

    /* Tables */
    .overflow-x-auto {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    table {
        min-width: 800px !important;
    }

    /* Headers */
    h1 {
        font-size: 24px !important;
    }

    h2 {
        font-size: 20px !important;
    }

    h3 {
        font-size: 18px !important;
    }

    /* Buttons */
    .flex.gap-2,
    .flex.gap-4 {
        flex-wrap: wrap !important;
    }

    /* Cards */
    .bg-white.rounded-lg {
        border-radius: 8px !important;
    }

    .p-6 {
        padding: 16px !important;
    }

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

    .py-6 {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
}

@media (max-width: 640px) {

    /* Small mobile adjustments */
    .text-3xl {
        font-size: 22px !important;
    }

    .text-2xl {
        font-size: 18px !important;
    }

    .text-xl {
        font-size: 16px !important;
    }

    .p-6 {
        padding: 12px !important;
    }

    .px-6 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .py-6 {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    .px-4 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .py-4 {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* Button adjustments */
    button,
    .btn {
        font-size: 14px !important;
        padding: 10px 16px !important;
    }

    /* Form inputs */
    input,
    select,
    textarea {
        font-size: 14px !important;
    }

    /* Table cells */
    th,
    td {
        font-size: 13px !important;
        padding: 8px !important;
    }
}

@media (max-width: 480px) {

    /* Extra small mobile */
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Utilities Pages - แก้ปัญหาปุ่มเมนูบังข้อความ */
    .main-content.min-h-screen {
        padding-top: 65px !important;
    }

    h1 {
        font-size: 20px !important;
    }

    h2 {
        font-size: 18px !important;
    }

    h3 {
        font-size: 16px !important;
    }

    .p-6 {
        padding: 10px !important;
    }

    button,
    .btn {
        font-size: 13px !important;
        padding: 8px 12px !important;
    }

    th,
    td {
        font-size: 12px !important;
        padding: 6px !important;
    }
}

/* SweetAlert2 Modal Responsive */
@media (max-width: 768px) {
    .swal2-popup {
        width: 95% !important;
        max-width: 500px !important;
    }

    .swal2-title {
        font-size: 20px !important;
    }

    .swal2-html-container {
        font-size: 14px !important;
    }

    .swal2-input,
    .swal2-select {
        font-size: 14px !important;
        padding: 8px !important;
    }
}

@media (max-width: 480px) {
    .swal2-popup {
        width: 98% !important;
        padding: 15px !important;
    }

    .swal2-title {
        font-size: 18px !important;
    }

    .swal2-html-container {
        font-size: 13px !important;
    }

    .swal2-confirm,
    .swal2-cancel {
        font-size: 14px !important;
        padding: 8px 16px !important;
    }
}

/* DataTables Responsive */
@media (max-width: 768px) {
    .dataTables_wrapper {
        font-size: 14px !important;
    }

    .dataTables_filter input {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 8px !important;
    }

    .dataTables_length select {
        margin: 0 8px !important;
    }

    .dataTables_info {
        font-size: 13px !important;
    }

    .dataTables_paginate {
        margin-top: 15px !important;
    }
}

/* Utility Classes */
.mobile-hidden {
    display: block;
}

.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .mobile-hidden {
        display: none !important;
    }

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

/* Scrollbar Styling for Mobile */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    ::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
}