/* Shared layout rules load after the individual web and mobile stylesheets. */
:root {
    --color-page: #f3f6f8;
    --color-surface: #fff;
    --color-line: #cfdee5;
    --color-text: #102a43;
    --color-text-muted: #526579;
    --color-primary: #1769d2;
    --color-primary-dark: #0f4fa3;
}

html { scroll-padding-top: 100px; }
body { line-height: 1.5; letter-spacing: 0; }
:is(main, section, article, form, fieldset, .field, .form-group, .form-grid > *, .detail-grid > *) { min-width: 0; }
:is(h1, h2, h3, label, dt, dd, .badge, .status-badge) { overflow-wrap: anywhere; }
:is(button, input, select, textarea) { letter-spacing: 0; }
:is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { min-width: 0; max-width: 100%; }
:is(button, .button-link, .icon-button) { gap: 8px; cursor: pointer; }
:is(button, input, select, textarea):disabled { cursor: not-allowed; }
input[type="file"] { overflow: hidden; }
input[type="file"]::file-selector-button { margin-right: 10px; border: 1px solid var(--color-line); border-radius: 4px; padding: 7px 10px; color: var(--color-primary-dark); background: #f4f8fc; cursor: pointer; }
:is(input[type="checkbox"], input[type="radio"]) { width: 22px; height: 22px; min-height: 22px; flex: 0 0 22px; padding: 0; }
:is(.pagination, .pager, .header-actions, .section-heading, .panel-heading) { flex-wrap: wrap; }
:is(.pagination a, .pagination button)[aria-current="page"] { color: #fff; background: var(--color-primary); }
:is(.table-wrap, .table-scroll, .mobile-table, .dashboard-table-scroll) { max-width: 100%; min-width: 0; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
:is(.table-wrap, .table-scroll, .mobile-table):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
table { font-variant-numeric: tabular-nums; }
.has-app-sidebar .table-wrap > table.is-column-resizable { min-width: 100%; }
table th { line-height: 1.4; }
table td { line-height: 1.5; }
body table :is(th, td) { font-size: 14px; }
body table thead th { font-size: 12px; }
.app-shell table.mobile-table :is(th, td) { font-size: 14px; }
.app-shell table.mobile-table thead th { font-size: 12px; }
table :is(button, .icon-button, .button-link) { vertical-align: middle; }
td[colspan] { white-space: normal; }
:is(.app-dialog, .record-detail-sheet) { overscroll-behavior: contain; }
:is(.app-dialog-actions, .dialog-actions) { flex-wrap: wrap; }
.has-app-sidebar .app-header h1 { font-size: 24px; line-height: 1.3; }
.has-app-sidebar .container { min-width: 0; }
.has-app-sidebar .app-header .header-actions { min-width: 0; max-width: 100%; }
.has-app-sidebar .app-breadcrumb { max-width: calc(100% - 32px); }
.enterprise-profile > div { max-width: calc(100vw - 32px); }

/* Keep fixed navigation and long data inside each mobile shell. */
body:has(.mobile-shell, .app-shell) { background: var(--color-page); }
:is(.mobile-shell, .app-shell) { min-height: 100dvh; max-width: 100%; }
.app-shell { max-width: 780px; }
.app-shell .view-section { grid-template-columns: minmax(0, 1fr); }
.app-shell .view-section > * { min-width: 0; }
.app-shell .detail-heading h2 { white-space: normal; overflow-wrap: anywhere; }
.app-shell :is(.profile-hero > div, .dashboard-welcome > div, .dashboard-welcome-tools) { min-width: 0; }
.app-shell .profile-hero h2 { white-space: normal; overflow-wrap: anywhere; }
.app-shell :is(.dashboard-welcome, .dashboard-welcome-tools) { flex-wrap: wrap; }
.app-shell .dashboard-welcome-tools { flex-shrink: 1; }
.dashboard-metric:not(:has(.dashboard-metric-icon)) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; gap: 8px; }
.dashboard-metric:not(:has(.dashboard-metric-icon)) .dashboard-metric-label { font-size: 13px !important; }
.dashboard-metric:not(:has(.dashboard-metric-icon)) strong { margin-top: 0; }
:is(.mobile-shell, .app-shell) main { padding-bottom: calc(116px + env(safe-area-inset-bottom)); }
:is(.mobile-shell, .app-shell) :is(.mobile-view, .view-section, .panel, .filter-panel, .form-grid, .field-grid) { min-width: 0; max-width: 100%; }
:is(.mobile-shell, .app-shell) :is(.panel, .filter-panel) { box-shadow: none; }
:is(.mobile-shell, .app-shell) :is(h2, h3) { line-height: 1.35; }
:is(.mobile-shell, .app-shell) :is(.topbar, .app-topbar) { padding-top: max(12px, env(safe-area-inset-top)); }
:is(.mobile-shell, .app-shell) .topbar > div { min-width: 0; }
:is(.mobile-shell, .app-shell) .topbar h1 { font-size: 20px; line-height: 1.3; }
:is(.mobile-shell, .app-shell) .eyebrow { letter-spacing: 0; }
:is(.mobile-shell, .app-shell) .bottom-nav {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    min-height: 78px;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: #fff;
}
:is(.mobile-shell, .app-shell) .bottom-nav a {
    min-width: 0;
    min-height: 64px;
    align-content: center;
    gap: 5px;
    padding: 4px 0;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.25;
    text-align: center;
    border-radius: 6px;
}
:is(.mobile-shell, .app-shell) .bottom-nav a:is(.active, .is-active) { color: #0b745f; background: #dff7ef; }
.app-shell .bottom-nav a span { font-size: 12px; overflow: visible; white-space: normal; text-overflow: clip; }
:is(.mobile-shell, .app-shell) .bottom-nav a > i { width: 24px; height: 24px; font-size: 21px; line-height: 24px; }
:is(.mobile-shell, .app-shell) .bottom-nav a .icon { width: 24px; height: 24px; }
:is(.mobile-shell, .app-shell) :is(.button-row button, .full-button, .logout-button, .web-app-button) { min-height: 44px; }
:is(.mobile-shell, .app-shell) :is(.pagination button, .pagination a, .pager a, .icon-button) { min-width: 44px; min-height: 44px; }
:is(.mobile-shell, .app-shell) .pagination { flex-wrap: wrap; }
.mobile-shell .today-status { flex-wrap: wrap; }
.mobile-shell .profile-list :is(div, strong), .mobile-shell .profile-card { min-width: 0; overflow-wrap: anywhere; }
.mobile-shell .history-detail { flex-wrap: wrap; }
.mobile-shell .history-detail > span { white-space: nowrap; }
.mobile-shell .calendar-toolbar { grid-template-columns: 44px minmax(0, 1fr) 44px; }
.mobile-shell .calendar-toolbar button { min-height: 44px; }
.mobile-shell .calendar-day { min-width: 0; padding: 3px; }
.mobile-shell .report-panel .mobile-table :is(th, td) { padding: 10px 12px; }
.mobile-shell .report-panel .mobile-table table { font-size: 14px; }
.mobile-shell .report-panel .mobile-table th { font-size: 12px; }
.mobile-shell .report-panel .mobile-table td { white-space: normal; }
.mobile-shell .report-panel .mobile-table td:last-child { white-space: nowrap; }
.mobile-shell .report-panel .mobile-table td:has(.salary-slip-access-actions) { white-space: normal; }
.mobile-shell .report-panel .mobile-table tbody tr:nth-child(even) { background: #f8fafc; }
.mobile-shell .report-panel .mobile-table tr[hidden] { display: none !important; }
.mobile-shell .report-panel .mobile-table:has(.detail-button) :is(th, td):last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    background: #fff;
    box-shadow: -1px 0 0 var(--color-line);
}
.mobile-shell .report-panel .mobile-table:has(.detail-button) th:last-child { background: #f3f7f9; }
.mobile-shell .report-panel .mobile-table:has(.detail-button) tr:nth-child(even) td:last-child { background: #f8fafc; }
.mobile-shell .record-detail-overlay { z-index: 140; }
.mobile-shell .record-detail-sheet { max-height: calc(100dvh - 32px - env(safe-area-inset-bottom)); }
.mobile-shell .record-detail-body { max-height: calc(100dvh - 108px - env(safe-area-inset-bottom)); }
.app-version-label.is-mobile { bottom: calc(92px + env(safe-area-inset-bottom)); }

@media (max-width: 1180px) {
    .has-app-sidebar .app-header { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .has-app-sidebar .global-header-navigation { justify-content: flex-start; }
    .has-app-sidebar :is(.permission-request-layout, .overtime-request-layout) { grid-template-columns: minmax(0, 1fr); }
    .has-app-sidebar :is(.permission-request-calendar, .overtime-request-calendar, .permission-request-details, .overtime-request-details) { width: 100%; min-width: 0; max-width: 100%; }
    .has-app-sidebar .daily-attendance-filter-panel .daily-attendance-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .has-app-sidebar .daily-attendance-filter-panel .daily-attendance-filter-form > * { grid-column: auto !important; grid-row: auto !important; }
}

@media (max-width: 640px) {
    html { scroll-padding-top: 84px; }
    .has-app-sidebar .app-header h1 { font-size: 20px; }
    .has-app-sidebar .app-header { position: relative; gap: 12px; padding: 16px; }
    .has-app-sidebar .daily-attendance-filter-panel .daily-attendance-filter-form { grid-template-columns: minmax(0, 1fr) !important; }
    :is(.has-app-sidebar .container, .has-app-sidebar .employee-layout) { max-width: 100%; }
    .has-app-sidebar main :is(.section-heading, .panel-heading) { align-items: flex-start; gap: 12px; }
    :is(.mobile-shell, .app-shell) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) { font-size: 16px; min-height: 44px; }
    .mobile-shell :is(.schedule-list article, .history-list article) > * { min-width: 0; }
    .mobile-shell .doctor-card { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
    .mobile-shell .doctor-avatar { width: 56px; height: 56px; }
    .mobile-shell .profile-list div { flex-wrap: wrap; }
    .mobile-shell .profile-list strong { text-align: left; }
}

@media (max-width: 360px) {
    .mobile-shell .topbar-date { font-size: 12px; white-space: nowrap; }
    .mobile-shell .profile-summary dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .mobile-shell .record-detail-list div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .app-shell .brand-lockup { font-size: 14px; }
    .app-shell .app-topbar { gap: 8px; padding-inline: 12px; }
}

@media print {
    :is(.bottom-nav, .app-version-label, .enterprise-header-tools) { display: none !important; }
}