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); }