/**
 * TalonHRMS Responsive Utilities
 * Phase 1: Mobile-Responsive Foundation
 * 
 * Standard breakpoints:
 * - xs: < 576px  (phones portrait)
 * - sm: ≥ 576px  (phones landscape)
 * - md: ≥ 768px  (tablets)
 * - lg: ≥ 992px  (desktops)
 * - xl: ≥ 1200px (large desktops)
 */

/* ===== Responsive Container ===== */
.container-responsive {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 576px) { .container-responsive { max-width: 540px; } }
@media (min-width: 768px) { .container-responsive { max-width: 720px; } }
@media (min-width: 992px) { .container-responsive { max-width: 960px; } }
@media (min-width: 1200px) { .container-responsive { max-width: 1140px; } }

/* ===== Responsive Grid System ===== */
.row-responsive {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

.col-responsive {
    flex: 1 0 0%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Column sizing */
.col-xs-12 { width: 100%; }
.col-xs-6  { width: 50%; }
.col-xs-4  { width: 33.333%; }
.col-xs-3  { width: 25%; }

@media (min-width: 576px) {
    .col-sm-12 { width: 100%; }
    .col-sm-6  { width: 50%; }
    .col-sm-4  { width: 33.333%; }
    .col-sm-3  { width: 25%; }
}

@media (min-width: 768px) {
    .col-md-12 { width: 100%; }
    .col-md-6  { width: 50%; }
    .col-md-4  { width: 33.333%; }
    .col-md-3  { width: 25%; }
}

@media (min-width: 992px) {
    .col-lg-12 { width: 100%; }
    .col-lg-6  { width: 50%; }
    .col-lg-4  { width: 33.333%; }
    .col-lg-3  { width: 25%; }
}

/* ===== Responsive Tables ===== */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Mobile-friendly table - stacks on small screens */
@media (max-width: 767px) {
    .table-stack {
        border: 0;
    }
    
    .table-stack thead {
        display: none;
    }
    
    .table-stack tr {
        display: block;
        margin-bottom: 1.5rem;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 0.75rem;
        background: #fff;
    }
    
    .table-stack td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
        border: none;
        border-bottom: 1px solid #eee;
        text-align: right;
    }
    
    .table-stack td:last-child {
        border-bottom: none;
    }
    
    .table-stack td:before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        margin-right: 1rem;
    }
}

/* ===== Visibility Utilities ===== */
.hide-xs { display: none !important; }
.hide-sm { display: none !important; }
.hide-md { display: none !important; }
.hide-lg { display: none !important; }

@media (min-width: 576px) {
    .hide-xs { display: block !important; }
    .show-xs { display: none !important; }
}

@media (min-width: 768px) {
    .hide-sm { display: block !important; }
    .show-sm { display: none !important; }
}

@media (min-width: 992px) {
    .hide-md { display: block !important; }
    .show-md { display: none !important; }
}

@media (min-width: 1200px) {
    .hide-lg { display: block !important; }
    .show-lg { display: none !important; }
}

/* Show only on specific breakpoints */
.show-xs { display: block !important; }
.show-sm { display: none !important; }
.show-md { display: none !important; }
.show-lg { display: none !important; }

/* ===== Responsive Cards ===== */
.card-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 576px) {
    .card-grid-sm-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
    .card-grid-md-2 { grid-template-columns: repeat(2, 1fr); }
    .card-grid-md-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 992px) {
    .card-grid-lg-3 { grid-template-columns: repeat(3, 1fr); }
    .card-grid-lg-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ===== Responsive Spacing ===== */
@media (max-width: 767px) {
    .mb-sm-0 { margin-bottom: 0 !important; }
    .mb-sm-1 { margin-bottom: 0.5rem !important; }
    .mb-sm-2 { margin-bottom: 1rem !important; }
    .mb-sm-3 { margin-bottom: 1.5rem !important; }
    
    .p-sm-0 { padding: 0 !important; }
    .p-sm-1 { padding: 0.5rem !important; }
    .p-sm-2 { padding: 1rem !important; }
}

/* ===== Responsive Typography ===== */
@media (max-width: 767px) {
    .h1-responsive { font-size: 1.75rem !important; }
    .h2-responsive { font-size: 1.5rem !important; }
    .h3-responsive { font-size: 1.25rem !important; }
    .text-sm-center { text-align: center !important; }
}

/* ===== Responsive Buttons ===== */
@media (max-width: 767px) {
    .btn-block-sm {
        display: block;
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .btn-group-vertical-sm {
        display: flex;
        flex-direction: column;
    }
    
    .btn-group-vertical-sm > * {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* ===== Responsive Forms ===== */
@media (max-width: 767px) {
    .form-inline-sm {
        display: flex;
        flex-direction: column;
    }
    
    .form-inline-sm > * {
        width: 100%;
        margin-bottom: 0.75rem;
    }
}

/* ===== Mobile-Optimized Action Buttons ===== */
@media (max-width: 767px) {
    /* Make action buttons in tables full-width on mobile */
    .table-actions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .table-actions > * {
        width: 100%;
        text-align: center;
    }
}

/* ===== Responsive Navigation Helpers ===== */
@media (max-width: 820px) {
    .mobile-nav-item {
        font-size: 1rem;
        padding: 0.75rem 1rem;
    }
}

/* ===== Touch-Friendly Tap Targets ===== */
@media (max-width: 767px) {
    /* Ensure tap targets are at least 44×44px (Apple HIG recommendation) */
    .tap-target {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Increase button padding for touch */
    .btn-touch {
        padding: 0.75rem 1.5rem;
    }
}

/* ===== Responsive Dashboard Cards ===== */
@media (max-width: 767px) {
    .dashboard-card {
        margin-bottom: 1rem;
    }
    
    .dashboard-stat {
        flex-direction: column;
        text-align: center;
    }
}

/* ===== Print Optimization ===== */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-only {
        display: block !important;
    }
}