/* responsive.css - Mobile Responsive Fixes for HR System */
/* Created: April 2026 */

/* Viewport meta is handled in HTML - this is just CSS */

/* Base mobile fixes */
* {
    box-sizing: border-box;
}

/* Mobile styles (phones 768px and below) */
@media (max-width: 768px) {
    
    /* Make everything full width */
    body {
        font-size: 14px;
        overflow-x: hidden;
    }
    
    /* Fix all tables - make them scroll horizontally */
    table, 
    .table, 
    .data-table,
    .leave-table,
    .employee-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        width: 100%;
    }
    
    /* Make all cards stack vertically */
    .card,
    .dashboard-card,
    .employee-card,
    .leave-card,
    .claim-card {
        width: 100% !important;
        margin: 10px 0 !important;
        display: block;
    }
    
    /* Fix dashboard grids */
    .dashboard-grid,
    .row,
    .grid-container {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    /* Make columns full width */
    .col,
    .column,
    [class*="col-"] {
        width: 100% !important;
        padding: 10px 0 !important;
    }
    
    /* Fix navigation */
    nav,
    .navbar,
    .sidebar,
    .menu {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    
    nav a,
    .navbar a,
    .menu a {
        display: block;
        padding: 12px;
        margin: 5px 0;
    }
    
    /* Fix buttons - full width on mobile */
    button,
    .btn,
    .button,
    input[type="submit"] {
        width: 100%;
        margin: 8px 0;
        padding: 12px;
    }
    
    /* Fix forms */
    input,
    select,
    textarea {
        width: 100% !important;
        margin: 8px 0;
        padding: 10px;
    }
    
    /* Fix form groups */
    .form-group,
    .form-row {
        display: flex;
        flex-direction: column;
    }
    
    /* Fix modals */
    .modal-content {
        width: 95% !important;
        margin: 10px auto !important;
    }
    
    /* Fix headers */
    h1 { font-size: 24px; }
    h2 { font-size: 20px; }
    h3 { font-size: 18px; }
    
    /* Fix spacing */
    .container,
    .main-content {
        padding: 10px;
    }
    
    /* Fix profile sections */
    .profile-section,
    .details-section {
        padding: 15px;
    }
    
    /* Make images responsive */
    img,
    .logo {
        max-width: 100%;
        height: auto;
    }
}

/* Tablet styles (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .dashboard-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .card {
        width: calc(50% - 20px) !important;
    }
}

/* Print styles (optional - keeps things clean when printing) */
@media print {
    nav, .sidebar, .navbar {
        display: none;
    }
}