/* =======================================
   RESPONSIVE GLOBAL
   Portal Pelatihan Disnakerperin
======================================= */

/* =======================================
   TABEL RESPONSIVE (untuk semua halaman)
======================================= */
@media (max-width: 1200px) {
    /* Untuk layar besar (desktop kecil) */
    .container {
        max-width: 1140px;
    }
}

@media (max-width: 992px) {
    /* Untuk tablet landscape / laptop */
    
    /* Membuat tabel scroll horizontal */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table thead,
    table tbody,
    table th,
    table td,
    table tr {
        display: block;
    }
    
    /* Grid 2 kolom menjadi 1 */
    .grid-wrapper {
        grid-template-columns: 1fr !important;
    }
    
    .stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .form-row {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    /* Untuk tablet portrait dan HP besar */
    
    /* ===== CARD ===== */
    .card {
        width: 95% !important;
        padding: 20px !important;
        margin: 10px auto !important;
    }
    
    .preview-container {
        padding: 20px !important;
    }
    
    .upload-card {
        padding: 20px !important;
    }
    
    /* ===== WRAPPER ===== */
    .wrapper,
    .preview-wrapper,
    .upload-wrapper {
        padding: 20px 10px !important;
        min-height: auto !important;
    }
    
    /* ===== TITLE ===== */
    .title,
    .upload-title,
    .preview-title {
        font-size: 18px !important;
    }
    
    /* ===== BUTTON ===== */
    .button-area {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .btn {
        width: 100% !important;
        text-align: center !important;
    }
    
    .btn-edit,
    .btn-next,
    .btn-back,
    .btn-scan,
    .btn-home {
        width: 100% !important;
        text-align: center !important;
        padding: 12px !important;
    }
    
    /* ===== FORM ===== */
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    input[type="file"] {
        padding: 8px !important;
    }
    
    .preview-box {
        padding: 10px !important;
    }
    
    /* ===== DATA ROW ===== */
    .data-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 5px !important;
        padding: 10px !important;
    }
    
    .data-value {
        text-align: left !important;
        width: 100% !important;
    }
    
    /* ===== GRID DATA ===== */
    .grid-data {
        grid-template-columns: 1fr !important;
        gap: 5px !important;
    }
    
    .grid-data div {
        border-bottom: none !important;
    }
    
    /* ===== STATS ===== */
    .stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    
    .stat-box {
        padding: 15px !important;
    }
    
    .stat-box h4 {
        font-size: 13px !important;
    }
    
    .stat-box span {
        font-size: 20px !important;
    }
    
    /* ===== NOTIFIKASI ===== */
    [style*="display:grid;grid-template-columns: 1fr 1fr;"] {
        grid-template-columns: 1fr !important;
    }
    
    /* ===== TABLE ===== */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 12px !important;
    }
    
    table thead {
        display: none !important;
    }
    
    table tbody tr {
        display: block !important;
        border: 1px solid #e5e7eb !important;
        margin-bottom: 10px !important;
        border-radius: 8px !important;
        padding: 10px !important;
    }
    
    table tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 5px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        text-align: left !important;
    }
    
    table tbody td:last-child {
        border-bottom: none !important;
    }
    
    table tbody td::before {
        content: attr(data-label) !important;
        font-weight: 600 !important;
        color: #64748B !important;
        font-size: 11px !important;
        text-transform: uppercase !important;
    }
    
    /* ===== FILE ITEM ===== */
    .file-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    
    .file-left {
        width: 100% !important;
        flex-wrap: wrap !important;
    }
    
    /* ===== PREVIEW ===== */
    .preview-box {
        height: 200px !important;
    }
    
    .preview-img {
        width: 40px !important;
        height: 40px !important;
    }
}

@media (max-width: 576px) {
    /* Untuk HP kecil */
    
    /* ===== CARD ===== */
    .card {
        width: 100% !important;
        padding: 15px !important;
        border-radius: 12px !important;
    }
    
    .card-box {
        width: 100% !important;
        padding: 15px !important;
    }
    
    /* ===== TITLE ===== */
    .title,
    .upload-title,
    .preview-title {
        font-size: 16px !important;
    }
    
    .title h1 {
        font-size: 24px !important;
    }
    
    .title h2 {
        font-size: 14px !important;
    }
    
    /* ===== WRAPPER ===== */
    .wrapper,
    .preview-wrapper,
    .upload-wrapper {
        padding: 15px 5px !important;
    }
    
    /* ===== STATS ===== */
    .stats {
        grid-template-columns: 1fr !important;
    }
    
    .stat-box {
        padding: 12px !important;
    }
    
    /* ===== BUTTON ===== */
    .btn {
        padding: 10px !important;
        font-size: 12px !important;
    }
    
    .btn-edit,
    .btn-next,
    .btn-back,
    .btn-scan,
    .btn-home {
        padding: 10px !important;
        font-size: 13px !important;
    }
    
    /* ===== FORM ===== */
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    input[type="file"] {
        padding: 6px !important;
        font-size: 12px !important;
    }
    
    .preview-box img {
        max-height: 120px !important;
    }
    
    /* ===== DATA ===== */
    .data-row {
        flex-direction: column !important;
        padding: 8px !important;
        font-size: 13px !important;
    }
    
    .data-label {
        font-size: 12px !important;
    }
    
    .data-value {
        font-size: 13px !important;
    }
    
    /* ===== TABLE ===== */
    table tbody td {
        font-size: 12px !important;
        padding: 6px 4px !important;
    }
    
    table tbody td::before {
        font-size: 10px !important;
    }
    
    /* ===== FILE ITEM ===== */
    .file-item {
        padding: 12px !important;
    }
    
    .file-link,
    .file-label {
        font-size: 12px !important;
    }
    
    /* ===== KOP SURAT ===== */
    .kop img {
        height: 40px !important;
    }
    
    .kop .text {
        font-size: 10px !important;
    }
    
    /* ===== STATUS BADGE ===== */
    .badge-ok,
    .badge-warn,
    .badge-success,
    .badge-warning,
    .badge-status {
        font-size: 10px !important;
        padding: 3px 8px !important;
    }
    
    /* ===== BUTTON AREA ===== */
    .button-area {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .button-area .btn {
        width: 100% !important;
        text-align: center !important;
    }
    
    /* ===== ALERT ===== */
    .alert-valid,
    .alert-error,
    .alert-danger {
        font-size: 12px !important;
        padding: 8px !important;
    }
    
    /* ===== PREVIEW CONTAINER ===== */
    .preview-container {
        padding: 15px !important;
        border-radius: 12px !important;
    }
    
    /* ===== UPLOAD CARD ===== */
    .upload-card {
        padding: 15px !important;
        border-radius: 12px !important;
    }
    
    /* ===== GRID UTAMA ===== */
    .grid-wrapper {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .right-column {
        width: 100% !important;
    }
    
    /* ===== CHART ===== */
    canvas {
        max-height: 180px !important;
    }
    
    /* ===== FILTER ===== */
    .input-search,
    .input-filter,
    .btn-filter,
    .btn-export {
        width: 100% !important;
        margin-bottom: 5px !important;
    }
    
    form[style*="display:flex"] {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    /* ===== SERTIFIKAT ===== */
    .inner {
        padding: 20px !important;
    }
    
    .nama {
        font-size: 22px !important;
    }
    
    .pelatihan {
        font-size: 16px !important;
    }
    
    .footer {
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
    }
}