/* Shared responsive rules for admin, employee and subcontractor portals. */
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; }
body { overflow-x: hidden; }
img, video, canvas, iframe, svg { max-width: 100%; }
input, select, textarea, button { max-width: 100%; }
.main, .content, main, section, article, .section, .card, .panel,
.chart-card, .chart-container, .table-wrapper, .table-responsive,
.table-wrap, .table-container, .modal-content { min-width: 0; }
.table-wrapper, .table-responsive, .table-wrap, .table-container {
  width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.table-wrapper table, .table-responsive table, .table-wrap table, .table-container table {
  width: 100%; max-width: 100%;
}
.table-pagination-hidden { display: none !important; }
.table-pagination-controls {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; margin: 10px 0 18px; padding: 10px 12px;
  border: 1px solid #e2e8f0; border-radius: 9px; background: #fff;
  color: #64748b; font-size: 12px;
}
.table-pagination-size { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.table-pagination-size select {
  min-height: 32px; padding: 4px 8px; border: 1px solid #cbd5e1; border-radius: 6px;
  background: #fff; color: #334155; font: inherit;
}
.table-pagination-buttons { display: inline-flex; align-items: center; gap: 8px; }
.table-pagination-buttons button {
  min-height: 32px; padding: 5px 10px; border: 1px solid #cbd5e1; border-radius: 6px;
  background: #fff; color: #334155; font: inherit; cursor: pointer;
}
.table-pagination-buttons button:hover:not(:disabled) { border-color: #dc2626; color: #b91c1c; }
.table-pagination-buttons button:disabled { opacity: .45; cursor: not-allowed; }
.table-pagination-page { min-width: 72px; text-align: center; color: #334155; font-weight: 600; }
.record-avatar {
  display: grid !important; place-items: center; flex: 0 0 42px; width: 42px; height: 42px;
  overflow: hidden; border: 1px solid #e2e8f0; border-radius: 50%; background: #fff; color: #dc2626;
}
.record-avatar img { display: block; width: 100%; height: 100%; padding: 2px; border-radius: inherit; background: #fff; object-fit: contain; object-position: center; }
.record-avatar-fallback { font-size: 14px; font-weight: 700; }
.content img, .section img, .card img { height: auto; }
.content-header, .section-header, .filters, .filter-row, .filter-bar,
.actions, .toolbar, .form-actions { min-width: 0; flex-wrap: wrap; }
.form-row, .form-grid, .form-fields, .filter-grid, .filters-grid,
.modal-grid, .settings-fields, .settings-account-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.portal-form input, .portal-form select, .portal-form textarea,
.form-row input, .form-row select, .form-row textarea,
.form-grid input, .form-grid select, .form-grid textarea { min-width: 0; }
.swal2-container { padding: 10px !important; }
.swal2-popup { box-sizing: border-box !important; max-width: calc(100vw - 20px) !important; }
.swal2-html-container { max-width: 100%; overflow-wrap: anywhere; }
.swal2-popup .swal2-html-container { max-height: min(72vh, 760px); overflow: auto; -webkit-overflow-scrolling: touch; }
.swal2-popup img, .swal2-popup video, .swal2-popup iframe { max-width: 100%; }

@media (max-width: 1024px) {
  .employee-dashboard-grid, .portal-two-column, .charts-grid,
  .expense-analytics-grid, .subcontractor-chart-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .dashboard-chart-wide, .subcontractor-chart-wide { grid-column: auto !important; }
  .content { width: 100%; }
}
@media (max-width: 768px) {
  .content { padding-left: clamp(12px, 3vw, 20px); padding-right: clamp(12px, 3vw, 20px); }
  .kpi-grid, .attendance-stats, .vehicle-mileage-kpis,
  .subcontractor-material-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-header, .section-header { align-items: flex-start; }
  .filters, .filter-row, .filter-bar { width: 100%; }
  .filters > *, .filter-row > *, .filter-bar > * { min-width: 0; }
  .report-selector-form, .project-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-selector-form > *, .project-filter-form > * { min-width: 0; }
  .swal2-popup { width: min(680px, calc(100vw - 24px)) !important; }
}
@media (max-width: 560px) {
  .content { padding: 14px 10px 22px; }
  .content-header h1 { overflow-wrap: anywhere; }
  .kpi-grid, .attendance-stats, .vehicle-mileage-kpis,
  .subcontractor-material-stats, .quick-action-grid { grid-template-columns: minmax(0, 1fr); }
  .filters, .filter-row, .filter-bar, .content-header > .actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .filters > *, .filter-row > *, .filter-bar > *, .content-header > .actions > * { width: 100%; }
  .report-selector-form, .project-filter-form, .form-row, .form-grid,
  .form-fields, .filter-grid, .filters-grid, .modal-grid,
  .incident-detail-grid, .incident-existing-files, .subcontractor-task-view-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .report-selector-form > *, .project-filter-form > * { grid-column: auto !important; }
  .section, .chart-card, .expense-chart-card, .subcontractor-chart-card { padding: 14px; }
  .table-wrapper table, .table-responsive table, .table-wrap table, .table-container table { min-width: 620px; }
  .table-wrapper, .table-responsive, .table-wrap, .table-container { border-radius: 8px; }
  .swal2-container { padding: 8px !important; }
  .swal2-popup { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; padding: 18px !important; }
  .swal2-title { font-size: clamp(18px, 5vw, 23px) !important; overflow-wrap: anywhere; }
  .swal2-popup .swal2-html-container { max-height: calc(100dvh - 180px); margin-left: 0 !important; margin-right: 0 !important; }
  .swal2-actions { flex-wrap: wrap; gap: 8px !important; }
  .swal2-actions button { flex: 1 1 120px; margin: 0 !important; }
  .table-pagination-controls { flex-wrap: wrap; justify-content: center; }
  .table-pagination-summary { flex: 1 1 100%; text-align: center; }
  .incident-preview-pdf iframe { height: min(55vh, 400px); }
  .task-proof-view img, .incident-preview-image img, .invoice-view-image img { max-height: 42vh; }
}
@media (max-width: 360px) {
  .kpi-card, .attendance-stat-card { padding: 12px; }
  .header { gap: 5px; }
  .header .menu-toggle { flex: 0 0 auto; }
  .swal2-popup { padding: 14px !important; }
}