/**
 * Responsive CSS for Uzbek HR Platform
 * Makes all templates responsive across devices
 */

/* Base responsive adjustments */
@media (max-width: 768px) {
    /* General responsive typography */
    h1 {
        font-size: 1.5rem !important;
    }
    h2 {
        font-size: 1.25rem !important;
    }
    h3 {
        font-size: 1.125rem !important;
    }
    p, li, td, th {
        font-size: 0.875rem !important;
    }
    
    /* Container padding for small screens */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Card and content blocks */
    .card, .content-block {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Button size adjustments */
    button, .btn, [type="button"], [type="submit"] {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Form controls */
    input, select, textarea {
        font-size: 0.875rem !important;
        padding: 0.5rem !important;
    }
    
    /* Table adjustments for mobile */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Recruitment Timeline specific adjustments */
@media (max-width: 768px) {
    /* Timeline adjustments */
    #recruitment-timeline-container .timeline-item {
        padding-left: 2.5rem !important;
    }
    
    #recruitment-timeline-container .timeline-status-indicator {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
    
    #recruitment-timeline-container .timeline-title {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }
    
    /* Action buttons in timeline */
    #recruitment-timeline-container .timeline-item .flex.space-x-3 {
        flex-wrap: wrap;
    }
    
    #recruitment-timeline-container .timeline-item .flex.space-x-3 > a {
        margin-bottom: 0.5rem;
        margin-right: 0.5rem;
    }
}

/* Employer Dashboard responsive adjustments */
@media (max-width: 768px) {
    /* Dashboard cards */
    .dashboard-card {
        padding: 0.75rem !important;
    }
    
    /* Dashboard stats */
    .stat-value {
        font-size: 1.25rem !important;
    }
    
    /* Chart containers */
    .chart-container {
        height: 200px !important;
    }
    
    /* Dashboard action buttons */
    .dashboard-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .dashboard-actions > * {
        margin-bottom: 0.5rem !important;
        width: 100% !important;
    }
}

/* Job listings responsive adjustments */
@media (max-width: 768px) {
    /* Job list items */
    .job-list-item {
        padding: 0.75rem !important;
    }
    
    /* Job details page */
    .job-details-container {
        padding: 1rem !important;
    }
    
    /* Applicant cards */
    .applicant-card {
        padding: 0.75rem !important;
    }
}

/* Application form responsive adjustments */
@media (max-width: 768px) {
    /* Form sections */
    .form-section {
        padding: 0.75rem !important;
    }
    
    /* Form fields */
    .form-field {
        margin-bottom: 0.75rem !important;
    }
    
    /* Multi-step form navigation */
    .form-navigation {
        flex-direction: column !important;
    }
    
    .form-navigation > * {
        margin-bottom: 0.5rem !important;
        width: 100% !important;
    }
}