/* Employee desktop presentation: the shared employee rules intentionally
   provide the compact mobile shell.  Browser desktop uses the existing
   sidebar/main shell and the same canonical routes/data; Android and
   mobile-web keep their existing bottom-nav presentation below this profile.
*/
html[data-ui-profile="desktop"] body.employee-shell .app-shell {
  grid-template-columns:240px minmax(0,1fr);
  min-height:100dvh;
}
html[data-ui-profile="desktop"] body.employee-shell .sidebar {
  display:flex !important;
  width:240px;
  min-height:100dvh;
  position:sticky;
  top:0;
}
html[data-ui-profile="desktop"] body.employee-shell #sidebarBackdrop,
html[data-ui-profile="desktop"] body.employee-shell #sidebarToggle,
html[data-ui-profile="desktop"] body.employee-shell #domainTabs {
  display:none !important;
}
html[data-ui-profile="desktop"] body.employee-shell .main {
  min-width:0;
  min-height:100dvh;
}
html[data-ui-profile="desktop"] body.employee-shell .topbar {
  height:80px;
  padding:0 32px;
}
html[data-ui-profile="desktop"] body.employee-shell .topbar h2 { font-size:24px; }
html[data-ui-profile="desktop"] body.employee-shell .topbar p { display:block; }
html[data-ui-profile="desktop"] body.employee-shell .content {
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:32px;
  box-sizing:border-box;
}
html[data-ui-profile="desktop"] body.employee-shell .android-bottom-nav {
  display:none !important;
}
html[data-ui-profile="desktop"] body.employee-shell #nav > button { display:none !important; }
html[data-ui-profile="desktop"] body.employee-shell #nav > button[data-view="dashboard"],
html[data-ui-profile="desktop"] body.employee-shell #nav > button[data-view="attendance"],
html[data-ui-profile="desktop"] body.employee-shell #nav > button[data-view="mySchedule"],
html[data-ui-profile="desktop"] body.employee-shell #nav > button[data-view="profile"] {
  display:flex !important;
}
html[data-ui-profile="desktop"] body.employee-shell .emp-task-card,
html[data-ui-profile="desktop"] body.employee-shell .attendance-summary-card,
html[data-ui-profile="desktop"] body.employee-shell .profile-layout {
  width:100%;
  max-width:none;
}
html[data-ui-profile="desktop"] body.employee-shell .attendance-summary-card {
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
}
html[data-ui-profile="desktop"] body.employee-shell .profile-layout {
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}

/* Desktop Web action hierarchy. Android and mobile Web are separate profiles. */
html[data-ui-profile="desktop"] .btn { transition:background .15s ease, box-shadow .15s ease, transform .1s ease; }
html[data-ui-profile="desktop"] .btn.primary { background:var(--web-action-primary-bg); color:var(--web-action-primary-fg); box-shadow:0 3px 9px rgba(23,105,224,.18); }
html[data-ui-profile="desktop"] .btn.primary:hover { background:var(--action-hover); box-shadow:0 5px 14px rgba(23,105,224,.25); }
html[data-ui-profile="desktop"] .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="desktop"] .btn.secondary:hover, html[data-ui-profile="desktop"] .icon-btn:hover { background:var(--action-hover-surface); color:var(--text); }
html[data-ui-profile="desktop"] .btn.danger { background:var(--web-action-danger-bg); color:var(--web-action-danger-fg); }
html[data-ui-profile="desktop"] .icon-btn { border:1px solid var(--web-action-icon-border); background:var(--web-action-icon-bg); color:var(--web-action-icon-fg); min-width:36px; min-height:36px; transition:background .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease; }
html[data-ui-profile="desktop"] .icon-btn:active, html[data-ui-profile="desktop"] .btn:active { transform:translateY(1px); box-shadow:none; }
html[data-ui-profile="desktop"] .icon-btn:focus-visible, html[data-ui-profile="desktop"] .btn:focus-visible { outline:2px solid var(--web-focus-ring); outline-offset:2px; }


html[data-ui-profile="desktop"] .btn:disabled, html[data-ui-profile="desktop"] .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; }

html[data-ui-profile="desktop"] body.employee-shell .sidebar nav button { min-height:46px; padding:10px 14px; gap:12px; color:var(--muted); font-size:15px; }
html[data-ui-profile="desktop"] body.employee-shell .sidebar nav button .nav-icon { width:21px; height:21px; flex:0 0 21px; }
html[data-ui-profile="desktop"] body.employee-shell .sidebar nav button:hover { background:var(--web-action-icon-hover); color:var(--text); }
html[data-ui-profile="desktop"] body.employee-shell .sidebar nav button.active { background:var(--web-action-icon-hover); color:var(--accent-strong); box-shadow:inset 3px 0 0 var(--accent-strong); }
html[data-ui-profile="desktop"] body.employee-shell .sidebar nav button:focus-visible { outline:2px solid var(--web-focus-ring); outline-offset:-2px; }
html[data-ui-profile="desktop"] body.employee-shell .topbar-icon-btn { background:var(--web-action-icon-bg); color:var(--web-action-icon-fg); border:1px solid var(--web-action-icon-border); }

/* Final Web action normalization: one visual authority for desktop tools. */
html[data-ui-profile="desktop"] .btn,
html[data-ui-profile="desktop"] .icon-btn,
html[data-ui-profile="desktop"] .toolbar-button,
html[data-ui-profile="desktop"] .search-button { appearance:none; -webkit-appearance:none; border-radius:10px; box-shadow:none; }
html[data-ui-profile="desktop"] .btn.ghost { background:transparent; color:var(--web-action-icon-fg); border:1px solid transparent; }
html[data-ui-profile="desktop"] .btn.ghost:hover { background:var(--web-action-icon-hover); }
html[data-ui-profile="desktop"] .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="desktop"] .toolbar-button,
html[data-ui-profile="desktop"] .search-button { min-width:36px; min-height:36px; background:var(--web-action-icon-bg); color:var(--web-action-icon-fg); border:1px solid var(--web-action-icon-border); }
html[data-ui-profile="desktop"] .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="desktop"] .toolbar-button:hover,
html[data-ui-profile="desktop"] .search-button:hover { background:var(--web-action-icon-hover); }
html[data-ui-profile="desktop"] button.btn:disabled,
html[data-ui-profile="desktop"] button.icon-btn:disabled,
html[data-ui-profile="desktop"] button[disabled].btn,
html[data-ui-profile="desktop"] button[disabled].icon-btn { background:var(--web-action-disabled-bg); color:var(--web-action-disabled-fg); border-color:var(--web-action-disabled-border); }

/* Admin ClientVisit monitoring: desktop owns the operational presentation. */
html[data-ui-profile="desktop"] body.admin-shell .admin-visit-page { width:100%; max-width:none; box-sizing:border-box; }
html[data-ui-profile="desktop"] body.admin-shell .admin-visit-page > .section-title { margin-bottom:20px; }
html[data-ui-profile="desktop"] body.admin-shell .admin-visit-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:18px 0 22px; }
html[data-ui-profile="desktop"] body.admin-shell .admin-visit-summary-metric { display:grid; grid-template-columns:28px minmax(0,1fr); grid-template-rows:auto auto; align-items:center; column-gap:10px; min-width:0; min-height:82px; padding:14px 16px; border:1px solid var(--border); border-radius:12px; background:var(--surface-muted); }
html[data-ui-profile="desktop"] body.admin-shell .admin-visit-metric-icon { grid-row:1 / span 2; color:var(--primary); }
html[data-ui-profile="desktop"] body.admin-shell .admin-visit-metric-label { color:var(--muted); font-size:12px; line-height:1.2; }
html[data-ui-profile="desktop"] body.admin-shell .admin-visit-metric-value { font-size:25px; line-height:1.1; }
html[data-ui-profile="desktop"] body.admin-shell .admin-visit-filters { display:grid; grid-template-columns:repeat(4,minmax(145px,1fr)); gap:12px; align-items:end; padding:14px; border:1px solid var(--border); border-radius:12px; background:var(--surface-muted); }
html[data-ui-profile="desktop"] body.admin-shell .admin-visit-filters label { display:grid; gap:6px; min-width:0; color:var(--muted); font-size:12px; font-weight:700; }
html[data-ui-profile="desktop"] body.admin-shell .admin-visit-filters .admin-visit-search { grid-column:1 / span 3; }
html[data-ui-profile="desktop"] body.admin-shell .admin-visit-filters input,html[data-ui-profile="desktop"] body.admin-shell .admin-visit-filters select { width:100%; min-width:0; box-sizing:border-box; }
html[data-ui-profile="desktop"] body.admin-shell .admin-visit-filters > .btn { min-height:42px; }
html[data-ui-profile="desktop"] body.admin-shell .admin-visit-desktop-table { display:block; min-width:0; }
html[data-ui-profile="desktop"] body.admin-shell .admin-visit-desktop-table .table-wrap { width:100%; overflow-x:auto; }
html[data-ui-profile="desktop"] body.admin-shell .admin-visit-cards,html[data-ui-profile="desktop"] body.admin-shell .admin-mobile-visit-toolbar { display:none !important; }
html[data-ui-profile="desktop"] body.admin-shell .admin-visit-empty-state { display:grid; place-items:center; gap:8px; min-height:180px; padding:28px; color:var(--muted); text-align:center; border:1px dashed var(--border); border-radius:12px; background:var(--surface-muted); }
html[data-ui-profile="desktop"] body.admin-shell .admin-visit-empty-state strong { color:var(--text); font-size:16px; }
html[data-ui-profile="desktop"] body.admin-shell .admin-visit-empty-state span { font-size:13px; }
@media (max-width:1100px) { html[data-ui-profile="desktop"] body.admin-shell .admin-visit-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } html[data-ui-profile="desktop"] body.admin-shell .admin-visit-filters .admin-visit-search { grid-column:auto; } }

/* Admin Web Desktop approval Bell: use the shared canonical header/panel. */
html[data-ui-profile="desktop"] body.admin-shell #notifDropdown { display:block !important; }
html[data-ui-profile="desktop"] body.admin-shell #notifBtn { width:40px; min-width:40px; height:40px; min-height:40px; }
html[data-ui-profile="desktop"] body.admin-shell #notifDropdown .notif-dropdown { right:0; }

/* Admin Desktop nav states: hover must not impersonate the persistent route. */
html[data-ui-profile="desktop"] body.admin-shell .sidebar nav button:hover:not(.active) {
  background:var(--surface-muted);
  color:var(--text);
}
html[data-ui-profile="desktop"] body.admin-shell .sidebar nav button.active {
  background:var(--web-action-icon-hover);
  color:var(--accent-strong);
  box-shadow:inset 3px 0 0 var(--accent-strong);
}