html[data-ui-profile="mobile-web"] { --mobile-web-bottom-nav-height:70px; --mobile-web-content-gap:24px; }
/* Normal browser mobile Web presentation. Android geometry belongs only to android.css. */
html[data-ui-profile="mobile-web"] body.employee-shell .android-bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; width:100%; padding:6px 4px; }
html[data-ui-profile="mobile-web"] body.employee-shell .content { padding-bottom:calc(28px + 64px); }
html[data-ui-profile="mobile-web"] .btn { min-height:42px; transition:background .12s ease, transform .1s ease; }
html[data-ui-profile="mobile-web"] .btn.primary { background:var(--web-action-primary-bg); color:var(--web-action-primary-fg); }
html[data-ui-profile="mobile-web"] .btn.secondary { background:var(--web-action-secondary-bg); color:var(--web-action-secondary-fg); border:1px solid var(--web-action-secondary-border); }
html[data-ui-profile="mobile-web"] .btn.danger { background:var(--web-action-danger-bg); color:var(--web-action-danger-fg); }
html[data-ui-profile="mobile-web"] .icon-btn { min-width:42px; min-height:42px; border:1px solid var(--web-action-icon-border); background:var(--web-action-icon-bg); color:var(--web-action-icon-fg); }
html[data-ui-profile="mobile-web"] .icon-btn:active, html[data-ui-profile="mobile-web"] .btn:active { background:var(--action-hover-surface); transform:translateY(1px); }
html[data-ui-profile="mobile-web"] .icon-btn:focus-visible, html[data-ui-profile="mobile-web"] .btn:focus-visible { outline:2px solid var(--web-focus-ring); outline-offset:2px; }
html[data-ui-profile="mobile-web"] body.employee-shell .attendance-request-btn, html[data-ui-profile="mobile-web"] body.employee-shell .attendance-history-search, html[data-ui-profile="mobile-web"] body.employee-shell .task-create-btn { background:var(--action-secondary); color:var(--accent-strong); border-color:var(--border-strong); box-shadow:0 2px 7px rgba(23,105,224,.12); }
html[data-ui-profile="mobile-web"] body.employee-shell .profile-photo-form .row-actions .btn.secondary { background:var(--action-secondary); color:var(--text); border-color:var(--border-strong); }
/* Final Web Mobile viewport ownership and compact Employee task history filter. */
html[data-ui-profile="mobile-web"] #androidBottomNav {
position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
width:100% !important; height:var(--mobile-web-bottom-nav-height); min-height:var(--mobile-web-bottom-nav-height); max-height:var(--mobile-web-bottom-nav-height); z-index:80;
padding:7px 4px calc(7px + env(safe-area-inset-bottom, 0px));
transform:translateZ(0); box-sizing:border-box;
}
html[data-ui-profile="mobile-web"] body.employee-shell .content {
padding-bottom:calc(var(--mobile-web-bottom-nav-height) + var(--mobile-web-content-gap) + env(safe-area-inset-bottom, 0px));
}
html[data-ui-profile="mobile-web"] body.employee-shell .android-bottom-nav .android-nav-item { flex:1 1 0; min-width:0; min-height:44px; gap:5px; color:var(--muted); }
html[data-ui-profile="mobile-web"] body.employee-shell .android-bottom-nav .android-nav-item svg { width:22px; height:22px; }
html[data-ui-profile="mobile-web"] body.employee-shell .android-bottom-nav .android-nav-item span { font-size:13px; line-height:1.1; white-space:nowrap; }
html[data-ui-profile="mobile-web"] body.employee-shell .android-bottom-nav .android-nav-item.active { color:var(--accent-strong); }
html[data-ui-profile="mobile-web"] body.employee-shell .android-bottom-nav .android-nav-item:hover, html[data-ui-profile="mobile-web"] body.employee-shell .android-bottom-nav .android-nav-item:focus-visible { background:var(--web-action-icon-hover); color:var(--text); }
html[data-ui-profile="mobile-web"] body.employee-shell .android-bottom-nav .android-nav-item:focus-visible { outline:2px solid var(--web-focus-ring); outline-offset:-2px; box-shadow:none; }
html[data-ui-profile="mobile-web"] body.employee-shell .task-history-filter {
display:grid; grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr) 42px;
align-items:center; gap:5px; width:100%; max-width:100%; margin-top:0; white-space:normal;
}
html[data-ui-profile="mobile-web"] body.employee-shell .task-history-filter .attendance-history-date-control {
width:auto; min-width:0; flex:none;
}
html[data-ui-profile="mobile-web"] body.employee-shell .task-history-filter input[type="date"] {
width:100%; min-width:0; padding-left:4px; padding-right:4px;
}
html[data-ui-profile="mobile-web"] body.employee-shell .task-history-filter .task-history-query {
grid-column:1/-1; grid-row:2; width:100%; min-width:0; min-height:42px;
}
html[data-ui-profile="mobile-web"] body.employee-shell .task-history-filter .attendance-history-search {
grid-column:4; grid-row:1; width:42px; min-width:42px; min-height:42px;
}
html[data-ui-profile="mobile-web"] .btn:disabled, html[data-ui-profile="mobile-web"] .icon-btn:disabled {
opacity:.72; background:var(--web-action-disabled-bg); color:var(--web-action-disabled-fg); border-color:var(--web-action-disabled-border); cursor:not-allowed; box-shadow:none;
}
@media(max-width:360px){ html[data-ui-profile="mobile-web"] body.employee-shell .task-history-filter { grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr) 40px; gap:3px; } html[data-ui-profile="mobile-web"] body.employee-shell .task-history-filter .attendance-history-search { width:40px; min-width:40px; } }
/* Final Web action normalization: this wins over legacy shared light defaults. */
html[data-ui-profile="mobile-web"] .btn,
html[data-ui-profile="mobile-web"] .icon-btn,
html[data-ui-profile="mobile-web"] .toolbar-button,
html[data-ui-profile="mobile-web"] .search-button { appearance:none; -webkit-appearance:none; border-radius:10px; box-shadow:none; }
html[data-ui-profile="mobile-web"] .btn.ghost { background:transparent; color:var(--web-action-icon-fg); border:1px solid transparent; }
html[data-ui-profile="mobile-web"] .btn.ghost:active { background:var(--web-action-icon-hover); }
html[data-ui-profile="mobile-web"] .icon-btn.danger { background:var(--web-action-danger-bg); color:var(--web-action-danger-fg); border-color:var(--web-action-danger-fg); }
html[data-ui-profile="mobile-web"] .toolbar-button,
html[data-ui-profile="mobile-web"] .search-button { min-width:42px; min-height:42px; background:var(--web-action-icon-bg); color:var(--web-action-icon-fg); border:1px solid var(--web-action-icon-border); }
html[data-ui-profile="mobile-web"] .btn.attendance-history-search { background:var(--web-action-icon-bg); color:var(--web-action-icon-fg); border-color:var(--web-action-icon-border); }
html[data-ui-profile="mobile-web"] .toolbar-button:active,
html[data-ui-profile="mobile-web"] .search-button:active { background:var(--web-action-icon-hover); }
html[data-ui-profile="mobile-web"] button.btn:disabled,
html[data-ui-profile="mobile-web"] button.icon-btn:disabled,
html[data-ui-profile="mobile-web"] button[disabled].btn,
html[data-ui-profile="mobile-web"] button[disabled].icon-btn { background:var(--web-action-disabled-bg); color:var(--web-action-disabled-fg); border-color:var(--web-action-disabled-border); }
html[data-ui-profile="mobile-web"] body.employee-shell .task-create-btn { background:var(--web-action-icon-bg); color:var(--web-action-icon-fg); border-color:var(--web-action-icon-border); }
html[data-ui-profile="mobile-web"] body.employee-shell #profilePhotoSave { background:#2563eb; color:#fff; border:1px solid #60a5fa; opacity:1; cursor:pointer; pointer-events:auto; box-shadow:0 2px 7px rgba(37,99,235,.22); }
html[data-ui-profile="mobile-web"] body.employee-shell #profilePhotoSave:disabled { background:#111827; color:#94a3b8; border:1px solid #334155; opacity:1; cursor:not-allowed; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(148,163,184,.08); }
/* Employee Mobile Web Profile Photo action hierarchy: Android/Desktop remain untouched. */
html[data-ui-profile="mobile-web"] body.employee-shell #profilePhotoChoose { background:#182235; color:#e5e7eb; border:1px solid #334155; opacity:1; cursor:pointer; pointer-events:auto; }
html[data-ui-profile="mobile-web"] body.employee-shell .attendance-request-btn,
html[data-ui-profile="mobile-web"] body.employee-shell .attendance-history-search,
html[data-ui-profile="mobile-web"] body.employee-shell .task-create-btn { background:var(--web-action-icon-bg); color:var(--web-action-icon-fg); border-color:var(--web-action-icon-border); }
/* Admin mobile platform shell: exactly seven icon-only domains. Desktop is untouched. */
html[data-ui-profile="mobile-web"] body.admin-shell .sidebar,
html[data-ui-profile="mobile-web"] body.admin-shell #sidebarToggle,
html[data-ui-profile="mobile-web"] body.admin-shell #sidebarBackdrop { display:none !important; }
html[data-ui-profile="mobile-web"] body.admin-shell .app-shell { grid-template-columns:1fr; }
html[data-ui-profile="mobile-web"] body.admin-shell #androidBottomNav { position:fixed; left:0; right:0; bottom:0; z-index:80; display:flex; width:100%; height:66px; min-height:66px; max-height:66px; padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px)); overflow:hidden; }
html[data-ui-profile="mobile-web"] body.admin-shell .content { padding-bottom:calc(66px + 24px + env(safe-area-inset-bottom,0px)); }
html[data-ui-profile="mobile-web"] body.admin-shell #androidBottomNav .android-nav-item { flex:1 1 0; width:14.2857%; min-width:0; min-height:44px; gap:0; color:var(--muted); }
html[data-ui-profile="mobile-web"] body.admin-shell #androidBottomNav .android-nav-item span { display:none; }
html[data-ui-profile="mobile-web"] body.admin-shell #androidBottomNav .android-nav-item svg { width:23px; height:23px; }
html[data-ui-profile="mobile-web"] body.admin-shell #androidBottomNav .android-nav-item.active { color:var(--accent-strong); background:var(--action-hover-surface); }
/* Admin Mobile Dashboard: presentation-only 8-icon 4x2 summary. */
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-dashboard-kpi { padding:12px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-dashboard-kpi .section-title { margin-bottom:8px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-dashboard-kpi .dashboard-kpi-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-dashboard-kpi .stat-card { min-width:0; min-height:72px; padding:8px 3px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border-radius:10px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-dashboard-kpi .metric-icon { display:grid; place-items:center; color:var(--accent-strong); height:22px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-dashboard-kpi .stat-card .n { font-size:20px; line-height:1; }
/* Final Admin Mobile dashboard lock: never collapse this grid at narrow widths. */
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-dashboard-kpi .dashboard-kpi-grid { grid-template-columns:repeat(4,minmax(0,1fr)) !important; grid-template-rows:repeat(2,62px) !important; grid-auto-rows:62px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-dashboard-kpi .stat-card { min-height:62px !important; height:62px; padding:5px 2px; gap:2px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-dashboard-kpi .metric-icon { height:19px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-dashboard-kpi .metric-icon svg { width:19px; height:19px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-dashboard-kpi .stat-card .n { font-size:18px; }
/* Runtime-verified Admin mobile presentation contract. */
html[data-ui-profile="mobile-web"] body.admin-shell .admin-attendance-summary-grid {
display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important;
grid-template-rows:repeat(2,56px) !important; grid-auto-rows:56px !important; gap:7px !important;
}
html[data-ui-profile="mobile-web"] body.admin-shell .admin-attendance-summary-metric {
display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important;
min-width:0 !important; min-height:56px !important; height:56px !important; padding:4px 2px !important; gap:2px !important;
}
html[data-ui-profile="mobile-web"] body.admin-shell .admin-attendance-summary-icon { height:19px !important; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-attendance-summary-icon svg { width:19px !important; height:19px !important; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-attendance-summary-value { font-size:18px !important; line-height:1 !important; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-bottom-nav .android-nav-item > span { display:none !important; }
/* Admin mobile trend chart: compact container only; SVG labels remain visible. */
html[data-ui-profile="mobile-web"] body.admin-shell .admin-attendance-trend-card { padding:12px !important; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-attendance-trend-body { min-height:0 !important; margin-bottom:0 !important; padding-bottom:10px !important; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-attendance-trend-body .trend-chart-wrap { height:230px !important; min-height:0 !important; margin:0 !important; overflow:visible !important; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-attendance-trend-body .trend-chart-wrap > svg { display:block; width:100%; height:230px !important; min-height:0 !important; max-height:230px !important; }
/* Admin Attendance mobile-only compact presentation. Desktop/Employee/Finance unchanged. */
html[data-ui-profile="mobile-web"] body.admin-shell #khSummary { padding:10px !important; }
html[data-ui-profile="mobile-web"] body.admin-shell #khSummary .section-title { margin-bottom:8px; }
html[data-ui-profile="mobile-web"] body.admin-shell #khSummary .admin-attendance-summary-grid { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; grid-template-rows:repeat(2,56px) !important; gap:7px !important; }
html[data-ui-profile="mobile-web"] body.admin-shell #khSummary .admin-attendance-summary-metric { display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; min-width:0 !important; min-height:56px !important; height:56px !important; padding:4px 2px !important; gap:2px !important; }
html[data-ui-profile="mobile-web"] body.admin-shell #khSummary .admin-attendance-summary-icon { height:18px !important; }
html[data-ui-profile="mobile-web"] body.admin-shell #khSummary .admin-attendance-summary-icon svg { width:18px !important; height:18px !important; }
html[data-ui-profile="mobile-web"] body.admin-shell #khSummary .admin-attendance-summary-value { font-size:17px !important; line-height:1 !important; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-desktop-toolbar { display:none !important; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-attendance-toolbar { display:grid !important; grid-template-columns:104px minmax(0,1fr) 58px; align-items:center; gap:6px; margin:-2px 0 8px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-attendance-toolbar input { width:100%; min-width:0; min-height:40px; height:40px; padding:7px 8px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-attendance-search { min-width:0; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-filter-btn { width:58px; min-width:58px; height:40px; min-height:40px; padding:0 4px !important; display:inline-flex; align-items:center; justify-content:center; gap:3px; position:relative; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-filter-btn.active { color:var(--accent-strong); border-color:var(--accent-strong); }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-filter-text { font-size:11px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-filter-count { position:absolute; top:-5px; right:-4px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--accent-strong); color:#fff; font-size:10px; line-height:16px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-issues { grid-column:1/-1; display:inline-flex; align-items:center; gap:6px; min-height:32px; font-size:12px; color:var(--muted); }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-issues input { width:18px; min-height:18px; height:18px; margin:0; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-cards { gap:7px !important; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-card { gap:7px !important; padding:10px !important; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-head { gap:7px; padding-bottom:7px; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-times { gap:7px; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-bottom { gap:7px; padding-top:7px; }
@media(max-width:360px){ html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-attendance-toolbar { grid-template-columns:96px minmax(0,1fr) 52px; gap:5px; } html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-filter-btn { width:52px; min-width:52px; } html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-filter-text { display:none; } }
/* Ultra-compact Admin Attendance mobile summary cards. Empty fields are omitted. */
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-summary-card { position:relative; display:block !important; min-height:0 !important; padding:10px 58px 10px 10px !important; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-summary-head { display:flex !important; align-items:flex-start; justify-content:space-between; gap:8px; padding:0 0 4px !important; border:0 !important; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-employee { display:flex; flex-direction:column; min-width:0; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-employee strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-status { display:inline-flex; align-items:center; gap:3px; flex:0 0 auto; max-width:45%; color:var(--primary); font-size:11px; font-weight:750; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-status > svg { flex:0 0 15px; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-status .attendance-icon { width:16px; height:16px; flex-basis:16px; color:var(--danger); }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-summary-meta { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:11px; line-height:1.35; padding-bottom:4px; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-summary-details { display:grid; gap:2px; min-width:0; font-size:11px; line-height:1.3; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-summary-line { display:flex; align-items:center; gap:4px; min-width:0; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-summary-line > span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-summary-line .attendance-icon { width:16px; height:16px; flex-basis:16px; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-no-activity { color:var(--muted); }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-detail { position:absolute; right:10px; bottom:10px; width:44px; height:44px; min-width:44px; min-height:44px; }
/* Final Admin Attendance card alignment: summary only, no empty detail blocks. */
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-summary-card { position:relative; display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,auto); grid-template-rows:auto auto auto auto; min-height:0 !important; padding:10px 58px 10px 10px !important; gap:4px 8px !important; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-summary-head { grid-column:1/-1; display:flex !important; align-items:flex-start; justify-content:space-between; gap:8px; padding:0 !important; border:0 !important; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-employee { min-width:0; display:block; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-employee strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-status { display:inline-flex; align-items:center; justify-content:flex-end; gap:3px; min-width:0; max-width:48%; color:var(--primary); font-size:11px; font-weight:750; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-status > svg { flex:0 0 15px; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-status .attendance-icon { width:16px; height:16px; flex:0 0 16px; color:var(--danger); }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-status .attendance-mobile-ot-indicator { display:inline-flex; flex:0 0 14px; color:var(--primary); }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-summary-meta { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; padding:0 !important; color:var(--muted); font-size:11px; line-height:1.3; white-space:nowrap; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-summary-meta > span { overflow:hidden; text-overflow:ellipsis; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-org { text-align:right; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-time-labels, html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-time-values { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; min-width:0; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-time-labels { color:var(--muted); font-size:10px; line-height:1.2; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-time-labels span, html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-time-values span { display:flex; align-items:center; gap:4px; min-width:0; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-time-labels span:nth-child(2), html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-time-values span:nth-child(2) { justify-content:flex-end; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-time-labels svg { width:15px; height:15px; flex:0 0 15px; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-time-values { font-size:13px; font-weight:750; line-height:1.2; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-time-values span:nth-child(2) { text-align:right; }
html[data-ui-profile="mobile-web"] body.admin-shell .attendance-mobile-detail { position:absolute; right:10px; bottom:10px; width:44px; height:44px; min-width:44px; min-height:44px; }
/* Ada Masalah is intentionally owned by the mobile Filter modal, never the page toolbar. */
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-filter-issues { display:flex; align-items:center; gap:7px; min-height:40px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-filter-issues input { width:18px; min-width:18px; height:18px; min-height:18px; margin:0; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-issues { display:none !important; }
/* Admin Personnel Mobile presentation ownership. */
html[data-ui-profile="mobile-web"] body.admin-shell .admin-desktop-personalia-toolbar { display:none !important; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-toolbar { display:grid !important; grid-template-columns:minmax(0,1fr) 68px; align-items:center; gap:6px; margin:-2px 0 10px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-toolbar label { min-width:0; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-toolbar input { width:100%; min-width:0; height:40px; min-height:40px; padding:7px 9px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-filter { position:relative; width:68px; min-width:68px; height:40px; min-height:40px; padding:0 5px !important; display:inline-flex; align-items:center; justify-content:center; gap:3px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-filter.active { color:var(--accent-strong); border-color:var(--accent-strong); }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-filter > span { font-size:11px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-filter-count { position:absolute; top:-5px; right:-4px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--accent-strong); color:#fff; font-size:10px; line-height:16px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-cards { gap:7px !important; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-card { position:relative; display:grid; gap:4px; min-height:0; padding:10px 10px 10px 10px !important; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; min-width:0; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-head strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-head .badge { flex:0 0 auto; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-identity { display:flex; justify-content:space-between; gap:8px; min-width:0; color:var(--muted); font-size:11px; line-height:1.3; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-identity span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-identity span:last-child { text-align:right; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-org, html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-useful { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; line-height:1.3; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-useful { color:var(--muted); }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-actions { justify-content:flex-end; gap:4px; margin:2px 0 0; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-actions .icon-btn { width:44px; min-width:44px; height:44px; min-height:44px; }
@media(max-width:360px){ html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-toolbar { grid-template-columns:minmax(0,1fr) 58px; } html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-filter { width:58px; min-width:58px; } html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-filter > span { display:none; } }
/* Admin Personnel Mobile presentation ownership. */
html[data-ui-profile="mobile-web"] body.admin-shell .admin-desktop-personalia-toolbar { display:none !important; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-toolbar { display:grid !important; grid-template-columns:minmax(0,1fr) 68px; align-items:center; gap:6px; margin:-2px 0 10px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-toolbar label { min-width:0; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-toolbar input { width:100%; min-width:0; height:40px; min-height:40px; padding:7px 9px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-filter { position:relative; width:68px; min-width:68px; height:40px; min-height:40px; padding:0 5px !important; display:inline-flex; align-items:center; justify-content:center; gap:3px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-filter.active { color:var(--accent-strong); border-color:var(--accent-strong); }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-filter > span { font-size:11px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-filter-count { position:absolute; top:-5px; right:-4px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--accent-strong); color:#fff; font-size:10px; line-height:16px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-cards { gap:7px !important; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-card { display:grid; gap:4px; min-height:0; padding:10px !important; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; min-width:0; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-head strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-head .badge { flex:0 0 auto; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-identity { display:flex; justify-content:space-between; gap:8px; min-width:0; color:var(--muted); font-size:11px; line-height:1.3; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-identity span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-identity span:last-child { text-align:right; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-org, html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-useful { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; line-height:1.3; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-useful { color:var(--muted); }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-actions { justify-content:flex-end; gap:4px; margin:2px 0 0; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-actions .icon-btn { width:44px; min-width:44px; height:44px; min-height:44px; }
@media(max-width:360px){ html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-toolbar { grid-template-columns:minmax(0,1fr) 58px; } html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-filter { width:58px; min-width:58px; } html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-personalia-filter > span { display:none; } }
/* Admin Task/Ticket mobile compact presentation; desktop/employee/finance unchanged. */
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-task-toolbar .section-title { margin-bottom:8px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-task-export,
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-task-filter { width:44px; min-width:44px; height:44px; min-height:44px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-task-controls { display:grid; grid-template-columns:minmax(0,1fr) 68px; gap:6px; align-items:center; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-task-controls input { width:100%; min-width:0; height:40px; min-height:40px; padding:7px 9px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-task-filter { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:3px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-task-filter.active { color:var(--accent-strong); border-color:var(--accent-strong); }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-task-filter-count { position:absolute; top:-5px; right:-4px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--accent-strong); color:#fff; font-size:10px; line-height:16px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-task-cards { gap:7px !important; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-task-card { gap:5px; min-height:90px; padding:9px 10px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-task-card-top { align-items:center; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-task-card-top strong,
html[data-ui-profile="mobile-web"] body.admin-shell .admin-task-card-type { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-task-card-status { flex:0 0 auto; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-task-card-detail-row { display:flex; justify-content:flex-end; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-task-card-detail { width:44px; min-width:44px; height:44px; min-height:44px; }
@media(max-width:360px){ html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-task-controls { grid-template-columns:minmax(0,1fr) 56px; } html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-task-filter span { display:none; } }
/* Admin ClientVisit monitoring: compact only on mobile/Android. */
html[data-ui-profile="mobile-web"] body.admin-shell .admin-system-mobile-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-system-mobile-card { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:7px; min-width:0; min-height:84px; padding:10px 11px; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text); text-align:left; cursor:pointer; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-system-mobile-card:hover,html[data-ui-profile="mobile-web"] body.admin-shell .admin-system-mobile-card:focus-visible { border-color:var(--accent-strong); }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-system-mobile-card strong { min-width:0; max-width:100%; font-size:13px; line-height:1.2; overflow:hidden; text-overflow:ellipsis; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-system-mobile-card .badge { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-finance-mobile-page .section-title { margin-bottom:8px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-reimbursement-summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding:10px 12px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-reimbursement-summary-metric { display:grid; grid-template-columns:20px minmax(0,1fr); grid-template-rows:18px 18px; align-items:center; column-gap:5px; min-width:0; min-height:62px; padding:7px 8px; border:1px solid var(--border); border-radius:10px; background:var(--surface-muted); }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-reimbursement-summary-icon { grid-row:1 / span 2; color:var(--accent-strong); }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-reimbursement-summary-metric .l { color:var(--muted); font-size:10px; line-height:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-reimbursement-summary-metric .n { font-size:18px; line-height:1; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-reimbursement-toolbar { display:grid; grid-template-columns:minmax(0,1fr) 68px; gap:6px; align-items:center; margin:0 0 10px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-reimbursement-toolbar input { width:100%; min-width:0; height:40px; min-height:40px; padding:7px 9px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-reimbursement-filter { position:relative; width:68px; min-width:68px; height:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:3px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-reimbursement-filter-count { position:absolute; top:-5px; right:-4px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--accent-strong); color:#fff; font-size:10px; line-height:16px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-reimbursement-card { display:grid; gap:4px; min-height:95px; padding:10px; border:1px solid var(--border); border-radius:12px; background:var(--surface-muted); }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-reimbursement-card-head,html[data-ui-profile="mobile-web"] body.admin-shell .admin-reimbursement-card-main { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-reimbursement-card-head strong,html[data-ui-profile="mobile-web"] body.admin-shell .admin-reimbursement-card-employee,html[data-ui-profile="mobile-web"] body.admin-shell .admin-reimbursement-card-reference,html[data-ui-profile="mobile-web"] body.admin-shell .admin-reimbursement-card-date { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-reimbursement-card-employee,html[data-ui-profile="mobile-web"] body.admin-shell .admin-reimbursement-card-reference,html[data-ui-profile="mobile-web"] body.admin-shell .admin-reimbursement-card-date { color:var(--muted); font-size:12px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-reimbursement-card-actions { display:flex; justify-content:flex-end; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-reimbursement-card-actions .icon-btn { width:44px; min-width:44px; height:44px; min-height:44px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-finance-mobile-page + .admin-finance-mobile-list #pjTableWrap { display:grid; gap:7px; }
@media(max-width:360px){ html[data-ui-profile="mobile-web"] body.admin-shell .admin-reimbursement-toolbar { grid-template-columns:minmax(0,1fr) 56px; } html[data-ui-profile="mobile-web"] body.admin-shell .admin-reimbursement-filter { width:56px; min-width:56px; } html[data-ui-profile="mobile-web"] body.admin-shell .admin-reimbursement-filter > span { display:none; } }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-schedule-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-schedule-head .icon-btn,html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-schedule-actions .icon-btn { width:44px; min-width:44px; height:44px; min-height:44px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-schedule-toolbar { display:grid; grid-template-columns:minmax(0,1fr) 68px; gap:6px; align-items:center; margin:0 0 10px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-schedule-toolbar input { width:100%; min-width:0; height:40px; min-height:40px; padding:7px 9px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-schedule-filter { position:relative; width:68px; min-width:68px; height:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:3px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-schedule-filter-count { position:absolute; top:-5px; right:-4px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--accent-strong); color:#fff; font-size:10px; line-height:16px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-schedule-card { display:grid; gap:4px; min-height:90px; padding:9px 10px; border:1px solid var(--border); border-radius:12px; background:var(--surface-muted); }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-schedule-card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-schedule-card-head strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-schedule-identity,html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-schedule-period { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; color:var(--muted); font-size:12px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-schedule-period > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-schedule-actions { display:inline-flex; flex:0 0 auto; gap:3px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-schedule-shifts { display:none; }
@media(max-width:360px){ html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-schedule-toolbar { grid-template-columns:minmax(0,1fr) 56px; } html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-schedule-filter { width:56px; min-width:56px; } html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-schedule-filter > span { display:none; } }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-visit-summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:8px 0; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-visit-summary-metric { display:grid; grid-template-columns:20px minmax(0,1fr); grid-template-rows:18px 18px; align-items:center; column-gap:5px; min-width:0; min-height:54px; padding:6px 8px; border:1px solid var(--border); border-radius:10px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-visit-metric-icon { grid-row:1 / span 2; color:var(--primary); }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-visit-metric-label { color:var(--muted); font-size:10px; line-height:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-visit-metric-value { font-size:18px; line-height:1; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-visit-toolbar { display:grid; grid-template-columns:minmax(0,1fr) 68px; gap:6px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-visit-toolbar input { min-width:0; width:100%; height:40px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-visit-toolbar button { min-width:44px; min-height:44px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-mobile-visit-toolbar button.has-filter { color:var(--primary); }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-filter-badge { display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--primary); color:#fff; font-size:10px; line-height:1; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-visit-desktop-table { display:none; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-visit-cards { display:grid; gap:7px; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-visit-card { display:grid; gap:5px; min-height:95px; padding:10px; border:1px solid var(--border); border-radius:12px; background:var(--surface-muted); }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-visit-card-top { display:flex; justify-content:space-between; gap:8px; min-width:0; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-visit-card-top strong,html[data-ui-profile="mobile-web"] body.admin-shell .admin-visit-card-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-visit-card-meta,html[data-ui-profile="mobile-web"] body.admin-shell .admin-visit-card-location { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-visit-card-detail { display:flex; justify-content:flex-end; }
html[data-ui-profile="mobile-web"] body.admin-shell .admin-visit-card-detail .icon-btn { width:44px; min-width:44px; height:44px; min-height:44px; }
/* Admin Web Mobile polish: keep touch targets at the established 44px
minimum without changing Android or Employee presentation. */
html[data-ui-profile="mobile-web"] body.admin-shell .btn { min-height:44px; }
html[data-ui-profile="mobile-web"] body.admin-shell .icon-btn { min-width:44px; min-height:44px; }
/* Admin Web Mobile approval Bell: reuse the canonical Android Bell
markup/data path, with Web-Mobile-only visibility and compact spacing. */
html[data-ui-profile="mobile-web"] body.admin-shell #notifDropdown { display:block !important; }
html[data-ui-profile="mobile-web"] body.admin-shell .topbar-right { min-width:0; }
html[data-ui-profile="mobile-web"] body.admin-shell .utility-cluster { gap:4px; }
html[data-ui-profile="mobile-web"] body.admin-shell #notifBtn { width:44px; min-width:44px; height:44px; min-height:44px; }
html[data-ui-profile="mobile-web"] body.admin-shell #notifDropdown .notif-dropdown { right:0; }
(max-width:390px){ html[data-ui-profile="mobile-web"] body.admin-shell .topbar-left { gap:8px; } html[data-ui-profile="mobile-web"] body.admin-shell .topbar-left h2 { max-width:34vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } }
/* Finance Web Mobile shell: role/profile scoped; desktop, Admin, and Employee remain unchanged. */
html[data-ui-profile="mobile-web"] body.finance-shell .app-shell { grid-template-columns:1fr; }
html[data-ui-profile="mobile-web"] body.finance-shell .sidebar,
html[data-ui-profile="mobile-web"] body.finance-shell #sidebarBackdrop,
html[data-ui-profile="mobile-web"] body.finance-shell #sidebarToggle,
html[data-ui-profile="mobile-web"] body.finance-shell #notifDropdown { display:none !important; }
html[data-ui-profile="mobile-web"] body.finance-shell .topbar { height:64px; padding:0 12px; }
html[data-ui-profile="mobile-web"] body.finance-shell .topbar h2 { font-size:18px; }
html[data-ui-profile="mobile-web"] body.finance-shell .topbar p { display:none; }
html[data-ui-profile="mobile-web"] body.finance-shell .topbar-left { min-width:0; }
html[data-ui-profile="mobile-web"] body.finance-shell .topbar-left > div { min-width:0; }
html[data-ui-profile="mobile-web"] body.finance-shell .topbar h2 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-ui-profile="mobile-web"] body.finance-shell .topbar-right { margin-left:auto; }
html[data-ui-profile="mobile-web"] body.finance-shell .utility-cluster { gap:4px; }
html[data-ui-profile="mobile-web"] body.finance-shell .content { padding:12px 12px calc(82px + env(safe-area-inset-bottom,0px)); width:100%; min-width:0; }
html[data-ui-profile="mobile-web"] body.finance-shell .app-footer { display:none; }
html[data-ui-profile="mobile-web"] body.finance-shell #androidBottomNav { display:flex !important; position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important; z-index:80; width:100% !important; height:74px; min-height:74px; max-height:74px; padding:7px 3px calc(7px + env(safe-area-inset-bottom,0px)); overflow:hidden; background:var(--card); border-top:1px solid var(--border); }
html[data-ui-profile="mobile-web"] body.finance-shell #androidBottomNav .android-nav-item { flex:1 1 0; width:20%; min-width:0; min-height:44px; height:58px; padding:5px 1px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:0; border-radius:9px; background:transparent; color:var(--muted); font:inherit; cursor:pointer; }
html[data-ui-profile="mobile-web"] body.finance-shell #androidBottomNav .android-nav-item svg { width:21px; height:21px; flex:0 0 21px; }
html[data-ui-profile="mobile-web"] body.finance-shell #androidBottomNav .android-nav-item span { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; line-height:1.1; }
html[data-ui-profile="mobile-web"] body.finance-shell #androidBottomNav .android-nav-item.active { color:var(--accent-strong); background:var(--action-hover-surface); font-weight:750; }
html[data-ui-profile="mobile-web"] body.finance-shell #androidBottomNav .android-nav-item:focus-visible { outline:2px solid var(--web-focus-ring); outline-offset:-2px; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-page { max-width:none; width:100%; margin:0; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-section-head { margin-bottom:10px; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-section-head h3 { font-size:20px; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-metrics > .finance-metric { min-width:0; min-height:78px; padding:10px; border-radius:12px; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-metrics > .finance-metric:last-child { grid-column:1/-1; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-metrics .finance-metric-value { font-size:18px; overflow-wrap:anywhere; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-metrics .finance-metric-label { font-size:11px; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:6px; align-items:center; margin:0 0 10px; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-toolbar input { min-width:0; width:100%; min-height:44px; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-toolbar .btn { min-width:44px; min-height:44px; padding:8px 10px; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-report-toolbar { grid-template-columns:1fr 1fr; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-results { display:grid; gap:8px; min-width:0; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-card { min-width:0; padding:12px; border-radius:12px; box-shadow:var(--shadow); }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; min-width:0; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-card-head strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-card-head .badge { flex:0 0 auto; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-amount { margin-top:9px; font-size:21px; font-weight:850; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-card-meta,
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-card-line { color:var(--muted); font-size:12px; line-height:1.4; overflow-wrap:anywhere; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-card-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; margin-top:10px; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-card-actions .btn { min-width:44px; min-height:44px; padding:9px 11px; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-empty { padding:18px 10px; text-align:center; color:var(--muted); border:1px dashed var(--border); border-radius:12px; background:var(--surface-muted); }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-report-grid { display:grid; grid-template-columns:1fr; gap:8px; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-report-grid .card { padding:14px; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-report-grid h3 { margin:0 0 8px; font-size:15px; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-filter-form { display:grid; gap:10px; max-height:calc(100dvh - 150px); overflow:auto; padding:1px; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-filter-form label { display:grid; gap:5px; color:var(--muted); font-size:12px; font-weight:700; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-filter-form input,
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-filter-form select { width:100%; min-width:0; min-height:44px; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-filter-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-top:4px; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-filter-actions .btn { min-height:44px; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-filter-modal { max-height:calc(100dvh - 24px); }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-filter-modal .modal-body { overflow:hidden; }
@media(max-width:360px){
html[data-ui-profile="mobile-web"] body.finance-shell .content { padding-left:12px; padding-right:12px; }
html[data-ui-profile="mobile-web"] body.finance-shell #androidBottomNav .android-nav-item span { font-size:9px; }
html[data-ui-profile="mobile-web"] body.finance-shell #androidBottomNav .android-nav-item { padding-left:0; padding-right:0; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-toolbar { grid-template-columns:minmax(0,1fr) 44px 52px; }
html[data-ui-profile="mobile-web"] body.finance-shell .finance-mobile-toolbar .btn { padding-left:4px; padding-right:4px; font-size:11px; }
}