/**
 * Responsive CSS สำหรับระบบคำร้อง
 * รองรับหน้าจอ Mobile, Tablet, Desktop
 */

/* ===== Mobile First Approach ===== */

/* Extra Small devices (phones, less than 576px) */
@media (max-width: 575.98px) {
    /* ซ่อน Sidebar บนมือถือ */
    .user-sidebar,
    .admin-sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        height: 100vh;
        z-index: 1000;
        transition: left 0.3s ease;
    }

    .user-sidebar.active,
    .admin-sidebar.active {
        left: 0;
    }

    /* ปุ่มเปิด/ปิด Menu */
    .mobile-menu-toggle {
        display: block !important;
        position: fixed;
        top: 15px;
        left: 15px;
        z-index: 1001;
        background: #1ec9a2;
        color: white;
        border: none;
        padding: 10px 15px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 20px;
    }

    /* Overlay */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }

    .sidebar-overlay.active {
        display: block;
    }

    /* Main Content */
    .main-content {
        margin-left: 0 !important;
        padding: 10px 15px 20px 15px !important;
        width: 100% !important;
    }

    /* Content Header */
    .content-header {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .content-header h1 {
        font-size: 1.3rem !important;
    }

    .content-header .btn-back,
    .content-header button {
        width: 100%;
        justify-content: center;
    }

    /* Cards & Tables */
    .stats-container {
        grid-template-columns: 1fr !important;
    }

    .stat-card {
        margin-bottom: 15px;
    }

    .petition-card {
        padding: 20px 15px !important;
        border-radius: 8px !important;
        max-width: 100% !important;
    }

    /* Tables - Scroll Horizontal */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 700px;
        font-size: 0.85rem !important;
    }

    table th,
    table td {
        padding: 8px !important;
        white-space: nowrap;
    }

    /* Forms */
    .form-group {
        margin-bottom: 15px;
    }

    .form-control,
    .form-input,
    .form-select,
    .form-textarea {
        font-size: 16px !important; /* ป้องกัน zoom บน iOS */
    }

    /* Buttons */
    .btn,
    .button {
        padding: 10px 20px !important;
        font-size: 0.9rem !important;
        width: 100%;
        margin-bottom: 10px;
    }

    .button-group {
        flex-direction: column !important;
    }

    /* Dashboard Stats */
    .dashboard-header {
        padding: 15px !important;
    }

    /* Petition Form */
    .form-section {
        padding: 15px !important;
    }

    .form-row {
        flex-direction: column !important;
    }

    .form-col {
        width: 100% !important;
        margin-bottom: 15px;
    }

    /* Login Page */
    .login-container {
        padding: 20px 15px !important;
    }

    .login-card {
        padding: 30px 20px !important;
        max-width: 100% !important;
    }

    /* Profile Page */
    .profile-container {
        grid-template-columns: 1fr !important;
    }

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

    /* Approval Page */
    .petition-tabs {
        flex-direction: column !important;
    }

    .tab-button {
        width: 100% !important;
        border-radius: 6px !important;
        margin-bottom: 5px;
    }

    /* Info Rows */
    .info-row {
        grid-template-columns: 1fr !important;
        gap: 5px !important;
    }

    .info-label {
        font-weight: 600;
        margin-bottom: 5px;
    }

    /* Checkbox Group */
    .checkbox-group {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    /* Signature Canvas */
    #signature-canvas {
        width: 100% !important;
        height: 250px !important;
    }

    /* Modal */
    .modal-content {
        width: 95% !important;
        margin: 20px auto !important;
        padding: 20px !important;
    }

    /* Hide on Mobile */
    .hide-mobile {
        display: none !important;
    }
}

/* Small devices (landscape phones, tablets, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .main-content {
        padding: 20px 25px !important;
    }

    .stats-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    table {
        font-size: 0.9rem !important;
    }

    .petition-card {
        padding: 30px 25px !important;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .user-sidebar,
    .admin-sidebar {
        width: 220px !important;
    }

    .main-content {
        margin-left: 220px !important;
        padding: 25px 30px !important;
    }

    .stats-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .mobile-menu-toggle {
        display: none !important;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .mobile-menu-toggle {
        display: none !important;
    }

    .sidebar-overlay {
        display: none !important;
    }

    .stats-container {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ===== Touch-friendly ===== */
@media (hover: none) and (pointer: coarse) {
    /* เพิ่มพื้นที่กดสำหรับ touch */
    button,
    a,
    .btn,
    .clickable {
        min-height: 44px;
        min-width: 44px;
    }

    /* ลด hover effects */
    *:hover {
        transform: none !important;
    }
}

/* ===== Landscape Mode ===== */
@media (max-width: 767.98px) and (orientation: landscape) {
    .main-content {
        padding: 60px 20px 20px 20px !important;
    }

    .petition-card {
        line-height: 1.8 !important;
    }
}

/* ===== Print Media ===== */
@media print {
    .mobile-menu-toggle,
    .sidebar-overlay,
    .user-sidebar,
    .admin-sidebar {
        display: none !important;
    }

    .main-content {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ===== Utility Classes ===== */
.show-mobile {
    display: none !important;
}

@media (max-width: 767.98px) {
    .show-mobile {
        display: block !important;
    }
    
    .hide-mobile {
        display: none !important;
    }
}

/* Container Max Width */
@media (min-width: 1200px) {
    .container-limited {
        max-width: 1140px;
        margin: 0 auto;
    }
}

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

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

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