/* Shared phone layout. Loaded last so later desktop/theme rules cannot restore wide grids. */
.mobile-cell-label { display: none; }
.workforce-donut-figure { display: grid; justify-items: center; gap: 12px; flex: 0 0 auto; }
.workforce-donut-caption { margin: 0; color: var(--text); font-size: 13px; font-weight: 750; line-height: 1.4; text-align: center; }
.workforce-donut .donut-center span { display: none; }

@media (max-width: 900px) {
  .app-shell, .main, .rtl .main, .content { min-width: 0; max-width: 100%; }
  .main, .rtl .main { width: 100%; margin-inline: 0; }
  .content { padding-inline: clamp(12px, 3vw, 20px); }
  .content > *, .card, .list-card, .settings-layout, .policy-layout, .structure-layout,
  .request-detail-grid, .employee-overview, .employee-document-grid, .payroll-profile-card { min-width: 0; max-width: 100%; }
  .settings-layout, .request-detail-grid, .employee-overview, .employee-document-grid { grid-template-columns: minmax(0, 1fr); }
  .table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .data-table.is-wide-table { min-width: 720px; }
  .data-table th, .data-table td { overflow-wrap: anywhere; }
  .sidebar { height: 100dvh; max-height: 100dvh; overscroll-behavior: contain; }
  .page-heading { flex-wrap: wrap; }
  .page-heading > * { min-width: 0; max-width: 100%; }
  .modal-layer { padding: 12px; }
  .modal, .modal.modal-wide, .modal.transfer-modal { width: min(100%, 720px); max-height: calc(100dvh - 24px); }
}

@media (max-width: 700px) {
  .table-wrap.responsive-table-wrap {
    width: 100%; max-width: 100%; max-height: none; overflow: visible; border: 0;
    padding: 0; background: transparent;
  }
  .responsive-table-wrap > .table-scroll-hint { display: none; }
  .responsive-table {
    display: block; width: 100%; min-width: 0 !important; max-width: 100%;
    table-layout: auto; border: 0;
  }
  .responsive-table thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .responsive-table:not(.is-empty) tbody { display: grid; gap: 12px; min-width: 0; }
  .responsive-table:not(.is-empty) tbody tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px;
    min-width: 0; padding: 12px 14px; border: 1px solid var(--line);
    border-radius: 12px; background: var(--card);
  }
  .responsive-table:not(.is-empty) tbody td,
  .attendance-workspace .responsive-table:not(.is-empty) tbody td,
  .shift-fixed-list .responsive-table:not(.is-empty) tbody td {
    display: block; width: auto !important; min-width: 0 !important; max-width: 100%;
    padding: 9px 0 !important; border-bottom: 1px solid var(--line);
    white-space: normal !important; overflow-wrap: anywhere; text-align: start;
  }
  .responsive-table:not(.is-empty) tbody td:first-child,
  .responsive-table:not(.is-empty) tbody td:last-child { grid-column: 1 / -1; }
  .responsive-table:not(.is-empty) tbody td:last-child { border-bottom: 0; }
  .responsive-table:not(.is-empty) tbody td .mobile-cell-label {
    display: block; margin-bottom: 4px; color: var(--muted);
    font-size: 11px; font-weight: 700; line-height: 1.35;
  }
  .responsive-table:not(.is-empty) tbody td .btn-row { display: flex; flex-wrap: wrap; width: 100%; }
  .responsive-table:not(.is-empty) tbody td .btn { max-width: 100%; white-space: normal; }
  .responsive-table.is-empty tbody { display: block; }
  .responsive-table.is-empty tbody tr { display: block; }
  .responsive-table.is-empty tbody td { display: block; width: 100%; min-width: 0; white-space: normal; }
  .topbar { gap: 6px; padding-inline: 10px; }
  .top-actions { gap: 5px; min-width: 0; }
  .topbar .hamburger, .topbar .theme-toggle, .topbar .language,
  .topbar .user-menu, .topbar .btn.secondary { min-height: 38px; }
  .topbar .icon-button { min-width: 38px; padding-inline: 8px; }
  .topbar .user-menu { padding: 4px; }
  .topbar .avatar { width: 28px; height: 28px; }
  .topbar .btn.secondary { padding-inline: 8px; }
  .content { padding-block: 16px 32px; }
  .page-heading, .card-heading-row, .request-hero,
  .attendance-workspace-heading, .shift-assignment-heading, .shift-schedule-heading {
    align-items: stretch; flex-direction: column; gap: 10px;
  }
  .page-heading h1, .employee-profile-head h1 { overflow-wrap: anywhere; }
  .page-heading .btn-row, .page-heading .payroll-download-actions,
  .attendance-workspace-heading > .btn, .shift-schedule-actions { width: 100%; }
  .page-heading .btn-row > *, .payroll-download-actions > * { flex: 1 1 150px; text-align: center; }
  .form-grid, .employee-create-page .form-grid, .employee-create-modal .form-grid,
  .settings-layout, .two-col, .analytics-grid, .request-detail-grid,
  .employee-overview, .employee-document-grid, .shift-fixed-layout,
  .workforce-insights-grid, .hr-analytics-lower { grid-template-columns: minmax(0, 1fr); }
  .card > .filters, .request-filters, .separation-filters, .transfer-filters,
  .expiry-card .filters, .analytics-filter-grid, .analytics-period-row,
  .attendance-workspace .attendance-filters, .attendance-request-filters,
  .shift-assignment-filters, .shift-list-tools, .payroll-directory-filters {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .card > .filters > :first-child, .request-search,
  .attendance-workspace .attendance-filters > input:first-child,
  .attendance-request-filters .input[type=search] { grid-column: auto !important; }
  .filters > *, .filters .input, .filters .select, .filters .custom-select,
  .shift-assignment-filters > *, .shift-list-tools > * { min-width: 0; width: 100%; max-width: none; }
  .field, .input, .select, .textarea, .custom-select, input[type=file] { min-width: 0; max-width: 100%; }
  .profile-tabs, .report-tabs, .section-tabs, .attendance-tabs,
  .payroll-profile-tabs, .separation-tabs {
    display: flex; width: 100%; max-width: 100%; min-width: 0;
    flex-wrap: wrap; row-gap: 4px; overflow: visible !important;
  }
  .profile-tabs > button, .report-tabs > button, .section-tabs > button,
  .attendance-tabs > button, .payroll-profile-tabs > button,
  .separation-tabs > button {
    flex: 0 1 auto; min-width: 0; max-width: 100%; white-space: normal;
    overflow-wrap: anywhere;
  }
  .shift-tabs {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%; max-width: 100%; min-width: 0; gap: 6px;
    overflow: hidden !important;
  }
  .shift-tabs > button {
    min-width: 0; width: 100%; white-space: normal; overflow-wrap: anywhere;
    line-height: 1.3; text-align: center;
  }
  .shift-upload-card, .shift-panel, .shift-fixed-list, .shift-assignment,
  .attendance-workspace, .attendance-record-card, .attendance-record-head,
  .payroll-directory-card, .payroll-profile-card { min-width: 0; max-width: 100%; }
  .shift-upload-card input[type=file], .shift-panel input[type=file] { width: 100%; min-width: 0; }
  .dashboard-page .analytics-card, .dashboard-page .dashboard-lower > .card,
  .workforce-insight-card { height: auto; min-height: 0; }
  .type-chart, .workforce-donut { flex-direction: column; }
  .type-legend { width: 100%; min-width: 0; }
  .employee-profile-head { flex-wrap: wrap; }
  .employee-profile-head > .badge { margin-inline-start: 0; }
  .detail-row { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .detail-row strong { text-align: start; }
  .approval-step { grid-template-columns: 32px minmax(0, 1fr); }
  .approval-step > :last-child { grid-column: 2; justify-self: start; }
  .calendar-card { overflow-x: auto; }
  .month-grid { min-width: 560px; }
  .calendar-toolbar { position: sticky; inset-inline-start: 0; width: 100%; }
  .attendance-summary-grid, .attendance-lower-grid, .employee-facts,
  .dashboard-page .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attendance-workspace-heading .btn { width: 100%; }
  .attendance-punch-grid, .attendance-metrics-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attendance-record-head { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attendance-record-employee { grid-column: 1 / -1; }
  .attendance-record-actions { justify-self: start; }
  .shift-employee-picker { grid-template-columns: minmax(0, 1fr); }
  .shift-fixed-list .table-wrap, .attendance-secondary-view .table-wrap,
  .monthly-summary-list, .payroll-review .table-wrap { overflow-x: auto; max-width: 100%; }
  .payroll-directory-card > .table-wrap { display: none; }
  .payroll-mobile-list { display: grid; }
  .payroll-upload-controls, .payroll-download-actions { align-items: stretch; flex-direction: column; }
  .payroll-upload-controls > *, .payroll-download-actions > * { width: 100%; }
  .payroll-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .payroll-profile-meta { flex-direction: column; }
  .modal-layer, .modal-layer:has(.transfer-modal) { padding: 8px; }
  .modal, .modal.modal-wide, .modal.transfer-modal,
  .modal.employee-create-modal, .modal.modal-wide.employee-create-modal {
    width: 100%; max-width: none; max-height: calc(100dvh - 16px);
    padding-inline: 16px; transform: none;
  }
  .modal .form-grid { grid-template-columns: minmax(0, 1fr); }
  .transfer-dialog-footer { grid-template-columns: minmax(0, 1fr); }
  .transfer-dialog-actions { flex-wrap: wrap; }
  .transfer-dialog-actions .btn { flex: 1 1 130px; }
  .pagination { max-width: 100%; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; }
  .pagination .btn { min-width: 0; max-width: 100%; }
  .pagination-status { min-width: 0; }
}

@media (max-width: 380px) {
  .topbar { padding-inline: 7px; }
  .top-actions { gap: 4px; }
  .topbar .hamburger, .topbar .theme-toggle { min-width: 34px; padding-inline: 5px; }
  .topbar .language, .topbar .btn.secondary { font-size: 11px; padding-inline: 6px; }
  .dashboard-page .dashboard-metrics, .attendance-summary-grid,
  .attendance-lower-grid, .employee-facts { grid-template-columns: minmax(0, 1fr); }
  .attendance-punch-grid { grid-template-columns: minmax(0, 1fr); }
  .attendance-punch-grid.no-breaks { grid-template-columns: minmax(0, 1fr); }
  .page-heading .btn-row { display: grid; grid-template-columns: minmax(0, 1fr); }
  .page-heading .btn-row > * { width: 100%; }
}