/* Presence / mobile / theme release 4. Keep the black-yellow theme as default. */
html[data-theme="light"] {
  color-scheme: light;
  --canvas: #f4f3ec;
  --surface: #fffef9;
  --line: #d9d4bb;
  --text: #171710;
  --muted: #665b35;
  --yellow-soft: #fff3bb;
  --green-soft: #f6efca;
  --orange-soft: #fff1bd;
  --red-soft: #f5e9c8;
  --blue-soft: #f0eddc;
  --green: #584700;
  --orange: #665000;
  --red: #56400b;
  --blue: #5b4800;
  --shadow: 0 12px 34px rgba(40,35,10,.10);
  scrollbar-color: #a08d36 #f4f3ec;
}
html[data-theme="light"] button,
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select { color-scheme: light; }
html[data-theme="light"] .topbar { background: rgba(255,254,249,.97); }
html[data-theme="light"] .sidebar {
  --text: #ffe889;
  --muted: #c0b46f;
  --line: #3b341a;
  --canvas: #0b0b09;
  --surface: #151510;
  color: #ffe889;
}
html[data-theme="light"] .sidebar-context,
html[data-theme="light"] .nav-item { color: #ead373; }
html[data-theme="light"] .nav-item.active { color: #090909; }
html[data-theme="light"] .sidebar .avatar { color: #090909; }
html[data-theme="light"] .kpi-value,
html[data-theme="light"] .table-wrap th,
html[data-theme="light"] .form-field > label,
html[data-theme="light"] .login-form > label,
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .panel-link,
html[data-theme="light"] .account-copy b { color: var(--text); }
html[data-theme="light"] .sidebar .nav-group-title { color: #c0b46f; }
html[data-theme="light"] .global-search,
html[data-theme="light"] .items-editor,
html[data-theme="light"] .global-search kbd,
html[data-theme="light"] .report-summary-item { background: var(--canvas); }
html[data-theme="light"] .field-control,
html[data-theme="light"] .filter-control,
html[data-theme="light"] .form-field input,
html[data-theme="light"] .form-field select,
html[data-theme="light"] .form-field textarea,
html[data-theme="light"] .login-form input,
html[data-theme="light"] .items-editor-row input {
  color: var(--text);
  background: var(--surface);
  border-color: var(--line);
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #776d4c; }
html[data-theme="light"] .form-field input[readonly],
html[data-theme="light"] .form-field select:disabled,
html[data-theme="light"] .form-field textarea[readonly] { background: #ebe8d9; color: #6f684e; }
html[data-theme="light"] .button-secondary,
html[data-theme="light"] .page-button { background: #f2efdf; color: var(--text); border-color: var(--line); }
html[data-theme="light"] .button-secondary:hover { background: #e9e2c1; border-color: #998317; }
html[data-theme="light"] .button-danger { background: #f5e9c8; color: #56400b; }
html[data-theme="light"] .button-primary { color: #090909; }
html[data-theme="light"] .demo-badge { background: var(--yellow-soft); color: #635000; border-color: #d4bd50; }
html[data-theme="light"] .table-wrap th { background: #f3edd2; }
html[data-theme="light"] .table-wrap td,
html[data-theme="light"] .table-wrap,
html[data-theme="light"] .activity-row,
html[data-theme="light"] .activity-list,
html[data-theme="light"] .pipeline,
html[data-theme="light"] .detail-card-head,
html[data-theme="light"] .attachment-row,
html[data-theme="light"] .notification-item,
html[data-theme="light"] .dashboard-list-row,
html[data-theme="light"] .attendance-list,
html[data-theme="light"] .attendance-row { border-color: var(--line); }
html[data-theme="light"] .table-wrap tbody tr:hover { background: #f6f2dc; }
html[data-theme="light"] .status-chip { border-color: #cec49b; }
html[data-theme="light"] .status-chip[data-tone="success"] { color: #574600; background: #f6efca; }
html[data-theme="light"] .status-chip[data-tone="warning"] { color: #665000; background: #fff1bd; }
html[data-theme="light"] .status-chip[data-tone="danger"] { color: #56400b; background: #f5e9c8; }
html[data-theme="light"] .status-chip[data-tone="info"] { color: #5b4800; background: #f0eddc; }
html[data-theme="light"] .attendance-summary { background: #f3edd2; }
html[data-theme="light"] .attendance-summary span,
html[data-theme="light"] .attendance-summary b { color: var(--text); }
html[data-theme="light"] .activity-mark { color: #574600; }
html[data-theme="light"] .stage-bar:not(.active) { background: #dad3b7; }
html[data-theme="light"] .notification-item.unread { background: #fff3c1; }
html[data-theme="light"] .topbar-actions .icon-button,
html[data-theme="light"] .global-search,
html[data-theme="light"] .global-search input::placeholder { color: var(--text); }
html[data-theme="light"] .drawer-head,
html[data-theme="light"] .drawer-foot { background: #f5f1df; }
html[data-theme="light"] .toast,
html[data-theme="light"] .server-error,
html[data-theme="light"] .server-success,
html[data-theme="light"] .inline-error,
html[data-theme="light"] .global-error { background: #fff1bd; color: #171710; border-color: #b79c37; }
html[data-theme="light"] .loading-block span,
html[data-theme="light"] .loading-block:after { background: linear-gradient(100deg,#ebe7d8 30%,#f7f4e8 50%,#ebe7d8 70%); background-size: 200% 100%; }
html[data-theme="light"] .login-body { background: #eeecdf; }
html[data-theme="light"] .login-shell,
html[data-theme="light"] .login-panel { background: var(--surface); }
html[data-theme="light"] .login-brand .brand-copy strong { color: var(--text); }
html[data-theme="light"] .login-aside {
  --text: #ffe889;
  --muted: #c0b46f;
  color: #ffe889;
  background: #090909;
}
html[data-theme="light"] .login-aside .eyebrow { color: #c0b46f; }
html[data-theme="light"] .login-aside .demo-badge { background: #27230f; color: #f4ce14; border-color: #67551b; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--text); }
.theme-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle [data-theme-icon] { display: flex; }
.theme-toggle [data-theme-label] { font-size: 14px; }
.login-theme-switch { position: fixed; left: 18px; top: 16px; z-index: 10; }
.icon-button { min-width: 44px; min-height: 44px; }
.menu-toggle { color: var(--text); }
.panel-link:hover { color: var(--text); text-decoration: underline; }
.notification-item { width: 100%; border-left: 0; border-right: 0; border-top: 0; color: var(--text); text-align: right; }
.mobile-nav { display: none; }
#presenceDashboard:empty { display: none; }
#presenceDashboard { margin-bottom: 22px; }
#trackingIndicator { max-width: 1600px; margin: 0 auto; }
.sidebar { max-height: 100dvh; }
.main-nav { min-height: 0; flex: 1; overscroll-behavior: contain; }
.sidebar-footer { flex-shrink: 0; }
@media (max-width: 900px) {
  .topbar { gap: 10px; padding-inline: 14px; }
  .global-search { width: 190px; }
  .account-copy { display: none; }
}
@media (max-width: 800px) {
  html { scroll-padding-bottom: 92px; }
  body { font-size: 16px; }
  .workspace { margin-right: 0; width: 100%; min-width: 0; }
  .content { padding: 20px 14px calc(100px + env(safe-area-inset-bottom)); width: 100%; }
  .sidebar { width: min(310px,88vw); padding-bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 100; transform: translateX(105%); visibility: hidden; transition: transform .18s ease, visibility .18s; }
  .sidebar.open { visibility: visible; transform: translateX(0); }
  .sidebar-close { display: grid; color: #ffe889; }
  .sidebar-scrim { z-index: 90; background: rgba(0,0,0,.65); }
  .sidebar-scrim.open { display: block; }
  .menu-toggle { display: grid; color: var(--text); flex: 0 0 44px; }
  .topbar { min-height: 68px; padding: 8px 12px; gap: 8px; }
  .topbar-start { min-width: 0; gap: 5px; flex: 1; }
  .breadcrumbs { min-width: 0; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
  .breadcrumbs > :not(strong) { display: none; }
  .topbar-actions { gap: 2px; flex-shrink: 0; }
  .global-search { display: none; }
  .theme-toggle [data-theme-label] { display: none; }
  .account-button { min-width: 44px; min-height: 44px; padding: 0; }
  .account-button .avatar { width: 36px; height: 36px; font-size: 15px; }
  .chevron { display: none; }
  .notification-popover { position: fixed; top: 70px; left: 10px; right: 10px; min-width: 0; max-width: calc(100vw - 20px); }
  .mobile-nav { display: flex; align-items: stretch; position: fixed; inset: auto 0 0; z-index: 50; padding: 7px 5px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); box-shadow: 0 -5px 22px rgba(0,0,0,.12); }
  .mobile-nav a, .mobile-nav button { flex: 1; min-width: 0; min-height: 56px; border: 0; border-radius: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; padding: 5px 3px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.45; }
  .mobile-nav a.active { color: #090909; background: var(--yellow); }
  .mobile-nav svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-nav button:hover, .mobile-nav a:not(.active):hover { color: var(--text); background: var(--yellow-soft); }
  .kpi-strip { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .kpi-card { padding: 14px 12px; }
  .kpi-top { font-size: 14px; align-items: flex-start; }
  .kpi-icon { display: none; }
  .kpi-value { font-size: clamp(23px,6vw,30px); overflow-wrap: anywhere; }
  .page-heading h1, .detail-title-line h1 { font-size: 26px; overflow-wrap: anywhere; }
  .dashboard-grid, .detail-layout, .settings-layout { grid-template-columns: minmax(0,1fr); }
  .dashboard-grid > * { min-width: 0; grid-column: 1; grid-row: auto; }
  .detail-title-line { flex-direction: column; }
  .detail-actions { width: 100%; }
  .panel-head { flex-wrap: wrap; padding-inline: 14px; }
  .panel-head h2 { font-size: 19px; }
  .table-wrap { max-width: 100%; overscroll-behavior-x: contain; }
  .module-toolbar, .toolbar-start, .toolbar-end { min-width: 0; flex-wrap: wrap; }
  .module-toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-start { width: 100%; }
  .module-search { width: 100%; flex: 1; min-width: 140px; }
  .filter-control { max-width: 100%; }
  .report-controls { align-items: stretch; padding: 14px; gap: 10px; }
  .report-controls > * { width: 100%; max-width: 100%; }
  .report-controls label input { flex: 1; width: 0; min-width: 0; }
  .form-drawer { width: 100%; max-height: 100dvh; }
  .drawer-body { padding: 18px 16px; }
  .drawer-head, .drawer-foot { padding: 15px 16px; }
  .drawer-foot { padding-bottom: calc(15px + env(safe-area-inset-bottom)); }
  .form-grid, .detail-fields { grid-template-columns: minmax(0,1fr); }
  .form-field.full, .detail-field.full { grid-column: 1; }
  .toast-region { bottom: calc(86px + env(safe-area-inset-bottom)); left: 12px; right: 12px; }
  .toast { min-width: 0; font-size: 15px; }
  .upload-form input[type=file] { max-width: 100%; width: 100%; }
  .dashboard-list-row { flex-wrap: wrap; }
}
@media (max-width: 360px) {
  .topbar .theme-toggle { min-width: 40px; width: 40px; }
  .topbar .icon-button { width: 40px; min-width: 40px; }
  .breadcrumbs { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}
[hidden] { display: none !important; }

/* Visible but non-obstructing sharing status, below the application header. */
#trackingIndicator.rp-tracking-indicator {
  position: sticky; inset: auto; top: 88px; z-index: 18;
  width: calc(100% - 56px); max-width: 1544px; margin: 12px auto 0;
}
.rp-button { min-height: 46px; font-size: 16px; }
.rp-card-heading h2, .rp-trail-head h3 { font-size: 20px; }
.rp-time-pair b, .rp-staff-metrics b { font-size: 16px; }
.rp-tracking-copy strong { font-size: 15px; }
.rp-photo-button, .rp-map-link { min-height: 44px; display: inline-flex; align-items: center; }
.rp-proof-actions { align-items: center; margin-block: 6px; }
.rp-staff-metrics span:last-child small { font-size: 14px; }
.rp-summary-card small { white-space: normal; overflow: visible; }
@media (max-width: 800px) {
  #trackingIndicator.rp-tracking-indicator { top: 68px; width: calc(100% - 28px); }
  .rp-tracking-indicator { flex-wrap: wrap; gap: 8px; }
  .rp-tracking-copy { flex: 1; min-width: min(210px,100%); }
  .rp-tracking-indicator .rp-button { min-width: 0; flex-shrink: 0; }
}

@media (max-width:800px) { .sidebar { transition: transform .18s ease; } .mobile-nav a, .mobile-nav button { font-size:14px; } }

html[data-theme="light"] :focus-visible { outline-color: #725900; }