/* Global Mobile Layout Improvements */
@media (max-width: 768px) {
    /* Reduce overall page spacing for mobile */
    body {
        padding-top: 0;
    }
    
    /* Reduce navigation padding */
    .navbar {
        padding: 0.5rem 1rem;
    }
    
    .nav-container {
        padding: 0.5rem;
    }
    
    /* Reduce container padding significantly for mobile */
    .container {
        padding: 0.5rem;
        margin-top: 0.5rem;
    }
    
    /* Reduce page header spacing */
    .page-header {
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
    }
    
    /* Reduce card spacing */
    .card {
        margin-bottom: 0.75rem;
    }
    
    /* Reduce section spacing */
    .dashboard-section {
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {
    /* Even more compact spacing for very small screens */
    .container {
        padding: 0.25rem;
        margin-top: 0.25rem;
    }
    
    .navbar {
        padding: 0.25rem 0.5rem;
    }
    
    .nav-container {
        padding: 0.25rem;
    }
    
    .page-header {
        margin-bottom: 0.5rem;
        padding-bottom: 0.25rem;
    }
    
    .card {
        margin-bottom: 0.5rem;
    }
}

/* Attendance Page Mobile Styles */
@media (max-width: 768px) {
    /* Check-in/out actions */
    .check-action-card {
        border-radius: 5px;
        margin-bottom: 1rem;
        padding: 1rem;
    }
    
    /* Filter form */
    .filter-form {
        border-radius: 5px;
        padding: 1rem;
    }
    
    .filter-form .form-row {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .filter-form .form-group {
        margin-bottom: 0.75rem;
    }
    
    .filter-form .form-control {
        border-radius: 5px;
        padding: 0.75rem;
        font-size: 16px;
    }
    
    .multiselect-dropdown {
        border-radius: 5px;
    }
    
    /* Attendance table */
    .attendance-table {
        border-radius: 5px;
        overflow: hidden;
    }
    
    .attendance-table th,
    .attendance-table td {
        padding: 0.5rem;
        font-size: 0.875rem;
    }
    
    .status-badge {
        border-radius: 5px;
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    
    /* Modal styles */
    .modal-content {
        border-radius: 5px;
        margin: 1rem;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .camera-preview {
        border-radius: 5px;
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 480px) {
    .check-action-card,
    .filter-form,
    .attendance-table,
    .modal-content {
        border-radius: 0;
    }
}

/* Branches Page Mobile Styles */
@media (max-width: 768px) {
    /* Page header */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem;
    }
    
    .page-header h1 {
        font-size: 1.5rem;
        margin: 0;
    }
    
    .page-actions {
        width: 100%;
    }
    
    .page-actions .btn {
        width: 100%;
        border-radius: 5px;
        padding: 0.75rem;
        font-size: 16px;
    }
    
    /* Branch modal */
    .modal-overlay {
        padding: 1rem;
    }
    
    .modal {
        border-radius: 5px;
        max-width: 100%;
        margin: 0;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .modal-header {
        padding: 1rem;
        border-bottom: 1px solid var(--border-color);
    }
    
    .modal-title {
        font-size: 1.25rem;
        margin: 0;
    }
    
    .modal-body {
        padding: 1rem;
    }
    
    .modal-footer {
        padding: 1rem;
        border-top: 1px solid var(--border-color);
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .modal-footer .btn {
        width: 100%;
        border-radius: 5px;
        padding: 0.75rem;
        font-size: 16px;
    }
    
    /* Form styles */
    .form-group {
        margin-bottom: 1rem;
    }
    
    .form-row {
        flex-direction: column;
        gap: 0;
    }
    
    .form-control {
        border-radius: 5px;
        padding: 0.75rem;
        font-size: 16px;
        width: 100%;
    }
    
    .btn-outline {
        border-radius: 5px;
        padding: 0.75rem;
        font-size: 16px;
        width: 100%;
        margin-bottom: 1rem;
    }
    
    /* Card styles */
    .card {
        border-radius: 5px;
        margin: 1rem;
    }
    
    .card-header {
        padding: 1rem;
        border-bottom: 1px solid var(--border-color);
    }
    
    .card-header h2 {
        font-size: 1.25rem;
        margin: 0;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    /* Table styles */
    .table-container {
        overflow-x: auto;
        border-radius: 5px;
    }
    
    .data-table {
        border-radius: 5px;
        overflow: hidden;
        min-width: 600px;
    }
    
    .data-table th,
    .data-table td {
        padding: 0.5rem;
        font-size: 0.875rem;
        white-space: nowrap;
    }
    
    .action-buttons {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .action-buttons .btn {
        border-radius: 5px;
        padding: 0.5rem;
        font-size: 0.75rem;
        width: 100%;
    }
    
    /* Empty state */
    .text-center .btn {
        border-radius: 5px;
        padding: 0.75rem 1.5rem;
        font-size: 16px;
    }
    
    /* Alert styles */
    .alert {
        border-radius: 5px;
        margin: 1rem;
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .card,
    .modal,
    .alert,
    .data-table,
    .table-container {
        border-radius: 0;
        margin: 0;
    }
    
    .card-body,
    .modal-body {
        padding: 0.75rem;
    }
    
    .data-table th,
    .data-table td {
        padding: 0.375rem;
        font-size: 0.8125rem;
    }
    
    .action-buttons .btn {
        padding: 0.375rem;
        font-size: 0.6875rem;
    }
}

/* Payroll Page Mobile Styles */
@media (max-width: 768px) {
    /* Page header */
    .page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
        padding: 1rem;
    }
    
    .page-header h1 {
        font-size: 1.5rem;
        margin: 0;
    }
    
    .page-header p {
        font-size: 0.875rem;
        margin: 0;
    }
    
    .page-header form {
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100%;
    }
    
    .page-header .form-control {
        border-radius: 5px;
        padding: 0.75rem;
        font-size: 16px;
        width: 100%;
    }
    
    .page-header .btn {
        border-radius: 5px;
        padding: 0.75rem;
        font-size: 16px;
        width: 100%;
        justify-content: center;
    }
    
    /* Payroll settings card */
    .card {
        border-radius: 5px;
        margin: 1rem;
    }
    
    .card-header {
        padding: 1rem;
        border-bottom: 1px solid var(--border-color);
    }
    
    .card-header h2 {
        font-size: 1.25rem;
        margin: 0;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .preferences-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .pref-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem;
        background: var(--accent);
        border-radius: 5px;
        border: 1px solid var(--border);
    }
    
    .pref-label {
        font-size: 0.875rem;
        color: var(--muted-foreground);
    }
    
    .pref-value {
        font-weight: 600;
        font-size: 0.875rem;
    }
    
    /* Table responsive */
    .table-responsive {
        overflow-x: auto;
        border-radius: 5px;
        margin: -0.5rem;
        padding: 0.5rem;
    }
    
    .consolidated-table {
        border-radius: 5px;
        overflow: hidden;
        min-width: 1200px;
        font-size: 0.75rem;
    }
    
    .consolidated-table th,
    .consolidated-table td {
        padding: 0.375rem 0.25rem;
        white-space: nowrap;
    }
    
    .employee-info {
        min-width: 150px;
    }
    
    .employee-info strong {
        font-size: 0.8125rem;
    }
    
    .employee-info small {
        font-size: 0.6875rem;
    }
    
    .summary-row {
        background: var(--accent);
        font-weight: bold;
    }
    
    .btn-sm {
        border-radius: 5px;
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
    }
    
    /* Summary cards */
    .summary-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: 1.5rem !important;
    }
    
    .summary-card {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 5px;
    }
    
    .summary-icon {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary);
        color: var(--primary-foreground);
        border-radius: 5px;
        font-size: 1.25rem;
    }
    
    .summary-content {
        flex: 1;
    }
    
    .summary-value {
        font-size: 1.5rem;
        font-weight: bold;
        color: var(--foreground);
    }
    
    .summary-label {
        font-size: 0.875rem;
        color: var(--muted-foreground);
        margin-top: 0.25rem;
    }
    
    /* Card subtitle */
    .card-subtitle {
        margin-top: 0.5rem;
    }
    
    .card-subtitle small {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .card {
        border-radius: 0;
        margin: 0;
    }
    
    .card-body {
        padding: 0.75rem;
    }
    
    .preferences-grid {
        gap: 0.5rem;
    }
    
    .pref-item {
        padding: 0.5rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .consolidated-table {
        border-radius: 0;
        min-width: 800px;
        font-size: 0.6875rem;
    }
    
    .consolidated-table th,
    .consolidated-table td {
        padding: 0.25rem 0.125rem;
    }
    
    .employee-info {
        min-width: 120px;
    }
    
    .employee-info strong {
        font-size: 0.75rem;
    }
    
    .employee-info small {
        font-size: 0.625rem;
    }
    
    .summary-cards {
        gap: 0.75rem;
    }
    
    .summary-card {
        padding: 0.75rem;
        gap: 0.75rem;
    }
    
    .summary-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .summary-value {
        font-size: 1.25rem;
    }
}

/* Settings Page Mobile Styles */
@media (max-width: 768px) {
    .settings-page .page-header {
        padding: 1rem;
        border-radius: 5px;
    }
    
    .settings-page .page-header h1 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .settings-page .tab-navigation {
        flex-wrap: wrap;
        border-bottom: 1px solid var(--border);
        margin-bottom: 1rem;
    }
    
    .settings-page .tab-button {
        flex: 1;
        min-width: 120px;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        border-radius: 5px 5px 0 0;
    }
    
    .settings-page .tab-content {
        padding: 0;
    }
    
    .settings-page .card {
        margin-bottom: 1rem;
        border-radius: 5px;
    }
    
    .settings-page .card-header {
        padding: 1rem;
        border-radius: 5px 5px 0 0;
    }
    
    .settings-page .card-header h2 {
        font-size: 1.25rem;
    }
    
    .settings-page .card-body {
        padding: 1rem;
    }
    
    .settings-page .form-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .settings-page .form-group {
        margin-bottom: 1rem;
    }
    
    .settings-page .form-control,
    .settings-page input,
    .settings-page select,
    .settings-page textarea {
        border-radius: 5px;
        width: 100%;
        padding: 0.75rem;
    }
    
    .settings-page .btn {
        border-radius: 5px;
        padding: 0.75rem 1rem;
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .settings-page .btn-sm {
        padding: 0.5rem 0.75rem;
        width: auto;
        margin: 0 0.25rem 0.25rem 0;
    }
    
    .settings-page .table-container {
        overflow-x: auto;
        border-radius: 5px;
        margin-bottom: 1rem;
    }
    
    .settings-page .data-table {
        min-width: 600px;
        border-radius: 5px;
    }
    
    .settings-page .data-table th,
    .settings-page .data-table td {
        padding: 0.5rem;
        font-size: 0.875rem;
    }
    
    .settings-page .status-badge {
        border-radius: 5px;
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .settings-page .modal {
        padding: 1rem;
    }
    
    .settings-page .modal-content {
        border-radius: 5px;
        max-width: 100%;
        margin: 0;
    }
    
    .settings-page .modal-header {
        padding: 1rem;
        border-radius: 5px 5px 0 0;
    }
    
    .settings-page .modal-body {
        padding: 1rem;
    }
    
    .settings-page .modal-footer {
        padding: 1rem;
        border-radius: 0 0 5px 5px;
    }
    
    .settings-page .endpoint {
        margin-bottom: 1.5rem;
        padding: 1rem;
        border-radius: 5px;
        background: var(--card);
    }
    
    .settings-page .code-block {
        border-radius: 5px;
        padding: 1rem;
        overflow-x: auto;
        font-size: 0.875rem;
    }
    
    .settings-page .attendance-fetch-form {
        margin-bottom: 1.5rem;
    }
    
    .settings-page .results-section {
        margin-top: 1.5rem;
    }
    
    .settings-page .alert {
        border-radius: 5px;
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .settings-page .copy-feedback {
        max-width: 250px;
        right: 10px;
        top: 10px;
    }
}

@media (max-width: 480px) {
    .settings-page .card,
    .settings-page .alert,
    .settings-page .modal-content {
        border-radius: 0;
    }
    
    .settings-page .tab-button {
        min-width: 100px;
        padding: 0.5rem;
        font-size: 0.75rem;
    }
    
    .settings-page .data-table th,
    .settings-page .data-table td {
        padding: 0.25rem;
        font-size: 0.75rem;
    }
    
    .settings-page .btn {
        padding: 0.5rem;
        font-size: 0.875rem;
    }
    
    .settings-page .code-block {
        font-size: 0.75rem;
        padding: 0.75rem;
    }
}

/* Device visibility helpers */
.mobile-only { display: none !important; }
.desktop-only { display: block !important; }

@media (max-width: 768px) {
  .mobile-only { display: block !important; }
  .desktop-only { display: none !important; }

  /* Requests page: compact mobile-first layout */
  .page-header { margin-bottom: 0.75rem; padding-bottom: 0.5rem; }
  .page-actions { gap: 0.5rem; margin-bottom: 0.75rem; width: 100%; }
  .page-actions .btn { min-height: 46px; padding: 0.625rem 0.875rem; border-radius: 5px; }

  .card { margin: 0.5rem 0; }
  .card-header { padding: 0.75rem; }
  .card-body { padding: 0.75rem; }

  .request-filters { 
    display: grid; 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    gap: 0.5rem; 
    align-items: stretch; 
    margin-top: 0.5rem; 
  }
  .request-filters span { 
    grid-column: 1 / -1; 
    margin: 0 0 0.25rem 0; 
    font-size: 0.8125rem; 
  }
  .request-filters .btn { 
    width: 100%; 
    min-height: 44px; 
    padding: 0.5rem 0.75rem; 
    text-align: center; 
  }
}

@media (max-width: 480px) {
  .request-filters span { display: none; }
  .request-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .request-filters .btn { min-height: 40px; padding: 0.5rem; font-size: 0.8125rem; }
  .page-actions .btn { min-height: 44px; }
  .card { margin: 0.375rem 0; }
}