/* 
 * zscore-mobile.css
 * CSS untuk penyesuaian tampilan dashboard Z-Score di perangkat mobile
 */

/* Penyesuaian umum */
.border-left-primary { border-left: 4px solid #4e73df; }
.border-left-success { border-left: 4px solid #1cc88a; }
.border-left-info { border-left: 4px solid #36b9cc; }
.border-left-warning { border-left: 4px solid #f6c23e; }
.border-left-danger { border-left: 4px solid #e74a3b; }

.bg-gradient-primary { background: linear-gradient(180deg, #4e73df 10%, #224abe 100%); }

.text-xs { font-size: 0.7rem; }
.text-gray-300 { color: #dddfeb; }
.text-gray-800 { color: #5a5c69; }

.shadow { box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15); }

.table-cell-warning { background-color: #fff3cd; }
.table-cell-danger { background-color: #f8d7da; }
.table-cell-success { background-color: #d1e7dd; }

/* Card styling */
.card {
    transition: all 0.3s;
    border-radius: 8px;
    margin-bottom: 20px;
}

.card-header {
    border-radius: 8px 8px 0 0 !important;
}

.border-start.border-4 {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Loading indicator */
.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}

.loading-spinner {
    width: 3rem;
    height: 3rem;
}

/* Nav tabs styling */
.nav-tabs .nav-link {
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

.nav-tabs .nav-link.active {
    color: #495057;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
}

/* Chart container */
.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
    margin-bottom: 20px;
}

/* Penyesuaian untuk tampilan mobile */
@media (max-width: 767.98px) {
    /* Typography */
    .display-5 {
        font-size: 1.8rem; /* Ukuran judul lebih kecil di mobile */
    }
    
    .lead {
        font-size: 1rem; /* Ukuran subheading lebih kecil di mobile */
    }
    
    .small-on-mobile {
        font-size: 0.875rem;
    }
    
    /* Spacing & Layout */
    .card-body {
        padding: 1rem; /* Padding lebih kecil di mobile */
    }
    
    .alert {
        padding: 0.75rem; /* Alert lebih compact di mobile */
    }

    /* Ikon di alert */
    .alert .me-3 {
        display: none; /* Sembunyikan ikon di mobile untuk menghemat ruang */
    }
    
    /* Tab nav responsif */
    .nav-tabs .nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
    
    /* Modal responsif */
    .modal-body {
        padding: 1rem;
        font-size: 0.9rem;
    }
    
    /* Penyesuaian footer di mobile */
    .card.shadow-sm.mt-5.mb-4 .card-body {
        padding: 1rem;
    }
    
    /* Tabel lebih compact di mobile */
    .table th, .table td {
        padding: 0.5rem;
        font-size: 0.85rem;
    }
    
    /* List item spacing */
    .links-list li {
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
    }
    
    /* Chart container height adjustment */
    .chart-container {
        height: 250px;
    }
    
    /* Disclaimer text in footer */
    .disclaimer-text {
        font-size: 0.8rem;
    }
}

/* Penyesuaian untuk perangkat sangat kecil */
@media (max-width: 575.98px) {
    /* Buttons */
    .btn {
        padding: 0.375rem 0.5rem;
        font-size: 0.875rem;
    }
    
    /* Chart height adjustment */
    .chart-container {
        height: 200px;
    }
    
    /* Hide less important columns on very small devices */
    .table-responsive .d-none-xs {
        display: none;
    }
}

/* Fix scrolling pada tabel di mobile */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* Perbaikan untuk modal di iOS */
.modal {
    -webkit-overflow-scrolling: touch;
}

/* Handling untuk charts di iOS */
canvas {
    -webkit-tap-highlight-color: transparent;
}