/* HRSQC workspace: shared desktop and mobile design system. */
:root { --accent:#087f73; --accent-strong:#06665e; --ink:#172d30; --muted:#536b70; --muted-2:#60777a; --line:#dbe5e5; --line-soft:#e5eded; --surface:#fff; --bg:#f3f6f6; }
html,body { background:var(--bg); font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important; color:var(--ink); }
body * { font-family:inherit; }
button,input,select,textarea { font:inherit; }
button { border-radius:8px!important; box-shadow:none!important; min-height:40px; font-weight:600; }
button.primary { background:var(--accent)!important; color:white!important; border-color:var(--accent)!important; }
button:disabled { opacity:.48; cursor:not-allowed; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #166bce!important; outline-offset:3px; }
input,select,textarea { background:#fff!important; border:1px solid #b8caca!important; border-radius:7px!important; min-height:42px; color:var(--ink)!important; padding:9px 11px!important; }
label { color:#435b60!important; font-size:13px!important; letter-spacing:0!important; }
#appView.app-view { grid-template-columns:210px minmax(0,1fr); }
#appView .app-sidebar { width:210px; background:#fff; border-right:1px solid var(--line); padding:28px 16px 18px; }
#appView .brand-mark { border-radius:10px; background:var(--accent); color:white; box-shadow:none; }
#appView .sidebar-brand { margin-bottom:30px; }
#appView .tabs { gap:5px; }
#appView .tabs button { padding:12px; color:#486166; font-size:14px; justify-content:flex-start; border:0; background:transparent; }
#appView .tabs button.active { background:#e3f2ef; color:#07695f; font-weight:700; }
#appView .sidebar-footer { gap:12px; }
#appView .user-chip { padding:10px 0 10px 42px; background:transparent; min-height:52px; }
#appView .user-chip::before { content:attr(data-initials); background:#dff1ed; color:#09665c; width:32px; height:32px; font-size:12px; left:0; top:9px; }
#appView .main-workspace { width:100%; padding:28px 32px 40px; min-width:0; }
#appView .topbar { margin:0 0 14px; padding:0; align-items:center; min-height:64px; }
#appView h1 { font-size:29px; font-weight:700; letter-spacing:-1px; line-height:1.2; }
#appView h2 { font-size:18px; font-weight:650; letter-spacing:-.3px; }
#appView .eyebrow { color:#39736e; font-size:10px; letter-spacing:1.5px; font-weight:700; }
#appView .page-subtitle { color:var(--muted); font-size:13px; margin-top:5px; }
#appView .topbar-actions { gap:8px; flex-wrap:wrap; }
#appView .panel,#appView .task-summary-panel { border:1px solid var(--line); box-shadow:none; border-radius:12px; background:white; }
#appView .section-title { padding:18px 20px; border-bottom:1px solid #e8eeee; }
#appView .muted,#appView .empty-state { color:var(--muted); }
#appView .announcement-banner { margin:0 0 20px; padding:12px 16px; border-radius:9px; box-shadow:none; display:flex; gap:12px; align-items:center; background:#fffaf0; border:1px solid #ecdbb1; }
#appView .announcement-banner-icon { height:28px; width:28px; min-width:28px; border-radius:7px; font-size:16px; }
#appView .announcement-banner-copy { flex:1; min-width:0; }
#appView .announcement-banner-copy>span { font-size:10px; letter-spacing:.6px; }
#appView .announcement-banner-copy>strong { font-size:13px; }
#appView .announcement-banner-copy summary { cursor:pointer; color:#6d571e; font-size:12px; margin-top:4px; }
#appView .announcement-banner-copy p { font-size:13px; line-height:1.6; white-space:normal; max-height:none; display:block; overflow:visible; }
#appView .announcement-banner-actions button { min-height:34px; font-size:12px; padding:7px 12px; }
.sync-strip { display:flex; justify-content:space-between; align-items:center; margin:0 0 12px; color:#426763; font-size:11px; gap:12px; }
.sync-strip button { min-height:28px; padding:2px 9px; font-size:11px; background:transparent; }
#appView .today-dashboard { gap:16px; }
#appView .today-kpi-grid { gap:0; padding:0; border-top:1px solid var(--line); }
#appView .today-kpi-grid article { border:0; border-right:1px solid var(--line); border-radius:0; background:#fff; padding:18px 20px; min-height:96px; }
#appView .today-kpi-grid article:last-child { border-right:0; }
#appView .today-kpi-grid article strong { font-size:30px; color:#172d30; }
#appView .today-kpi-grid article span { color:#4c6468; }
#appView .today-dashboard-heading { padding:18px 20px; }
#appView .today-team-toolbar { padding:16px 20px; }
#appView .today-team-table { min-width:940px; }
#appView .today-team-table-wrap { overflow:auto; }
#appView .today-team-table th,#appView .today-team-table td { padding:13px 12px; font-size:12px; }
#appView .roster-board { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
#appView .roster-toolbar { grid-column:1/-1; }
#appView .worker-palette { display:none; }
#appView .roster-calendar-panel { grid-column:1/-1; width:100%; }
#appView .calendar-grid { gap:1px; background:var(--line); }
#appView .calendar-day { border-radius:0; background:#fff; min-height:140px; }
#appView .workbench { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
#appView[data-screen="users"] .workbench,#appView .tasks-workbench { display:grid; grid-template-columns:minmax(0,1fr); }
#appView .tasks-workbench>*,#appView[data-screen="users"] .workbench>* { grid-column:1!important; }
#appView .task-summary-panel { padding:22px; background:#fafffe; }
#appView .task-summary-grid { gap:12px; }
#appView .task-stat { border:1px solid var(--line); border-radius:8px; box-shadow:none; padding:12px 16px; }
#appView .task-list { padding:16px 20px; }
#appView .task-card { border:1px solid var(--line); border-radius:8px; box-shadow:none; }
#appView .padded { padding:20px; }
#appView[data-screen="settings"] .workbench { grid-template-columns:repeat(2,minmax(0,1fr)); }
#appView[data-screen="settings"] .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
#appView .form-grid label { min-width:0; }
#appView .form-grid label input,#appView .form-grid label select { width:100%; }
#appView .weekday-picker { gap:6px; flex-wrap:wrap; }
#appView .weekday-picker label { min-width:45px; padding:5px; }
#appView .report-loading { padding:30px; }
.delayed-note { padding:12px; border:1px solid #d5b977; background:#fff9e9; color:#635018; border-radius:8px; font-size:13px; }
.workspace-dialog { padding:24px; width:min(620px,calc(100vw - 32px)); max-height:90vh; overflow:auto; border:1px solid var(--line); border-radius:14px; color:var(--ink); box-shadow:0 24px 80px #12373533; }
.workspace-dialog::backdrop { background:#122f3759; backdrop-filter:blur(3px); }
.workspace-dialog .panel { border:0!important; }
.workspace-dialog .dialog-dismiss { display:block; margin-left:auto; background:#f1f5f5; padding:8px 14px; }
.workspace-dialog .form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.workspace-dialog .span-all { grid-column:1/-1; }
.workspace-dialog h2 { margin:12px 0; }
.more-dialog>button:not(.dialog-dismiss) { display:block; width:100%; text-align:left; padding:12px; margin-top:10px; }
#appView .mobile-more { display:none; }
#appView[data-role="worker"] .metrics { display:none!important; }
#appView[data-role="worker"] .dashboard-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(260px,1fr); gap:20px; }
#appView .worker-hero { background:#e8f5f0; grid-column:1/-1; padding:28px; display:flex; justify-content:space-between; align-items:center; }
#appView .worker-hero .hero-time { font-size:26px; }
#appView .worker-today-tasks { grid-column:1; }
#appView .activity-card { grid-column:2; }
@media(min-width:761px) {
  #appView.app-view #screenRoot .table-wrap>table { display:table!important; width:100%; border-collapse:collapse; }
  #appView.app-view #screenRoot .table-wrap>table thead { display:table-header-group!important; }
  #appView.app-view #screenRoot .table-wrap>table tbody { display:table-row-group!important; }
  #appView.app-view #screenRoot .table-wrap>table tr { display:table-row!important; }
  #appView.app-view #screenRoot .table-wrap>table th,#appView.app-view #screenRoot .table-wrap>table td { display:table-cell!important; padding:12px 14px; border-bottom:1px solid #e6eeee; font-size:12px; }
  #appView.app-view #screenRoot .table-wrap>table td::before { display:none!important; }
  #appView .table-wrap { overflow-x:auto; }
  #appView[data-screen="users"] table .status { width:auto; }
}
@media(min-width:1450px) {
  #appView .roster-board { grid-template-columns:240px minmax(0,1fr); }
  #appView .worker-palette { display:block; grid-column:1; grid-row:2; align-self:start; }
  #appView .roster-calendar-panel { grid-column:2; grid-row:2; }
  #appView .worker-list { display:grid; grid-template-columns:1fr; padding:12px; }
  #appView .palette-controls { padding:12px; }
}
@media(max-width:1000px) and (min-width:761px) {
  #appView .main-workspace { padding:24px 20px; }
  #appView .workbench,#appView[data-screen="settings"] .workbench { grid-template-columns:1fr; }
}
@media(max-width:760px) {
  #appView.app-view { display:block; }
  #appView .main-workspace { padding:16px 16px 95px; }
  #appView .app-sidebar { width:auto; padding:0; border:0; }
  #appView .tabs { display:flex; padding:8px 10px max(10px,env(safe-area-inset-bottom)); justify-content:space-around; gap:4px; border-top:1px solid var(--line); background:white; }
  #appView .tabs button { flex:1; justify-content:center; padding:12px 8px; font-size:12px; min-height:44px; }
  #appView .tabs .secondary-nav { display:none!important; }
  #appView .tabs .mobile-more { display:flex; }
  #appView .mobile-topbar { padding:0 0 20px; margin:0; }
  #appView .topbar { display:block; }
  #appView h1 { font-size:27px; }
  #appView .topbar-actions { margin-top:14px; display:flex; }
  #appView .topbar-actions>input { min-width:0; flex:1; }
  #appView .announcement-banner { align-items:flex-start; flex-wrap:wrap; gap:8px; padding:12px; }
  #appView .announcement-banner-copy { flex-basis:calc(100% - 42px); }
  #appView .announcement-banner-actions { margin-left:36px; display:flex; gap:8px; }
  #appView .today-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #appView .today-kpi-grid article { padding:14px; border-bottom:1px solid var(--line); }
  #appView .today-team-toolbar { padding:14px; }
  #appView .workbench,#appView[data-screen="settings"] .workbench,#appView[data-role="worker"] .dashboard-grid { display:grid; grid-template-columns:1fr; }
  #appView .dashboard-grid>* { grid-column:1!important; }
  #appView .worker-hero { display:block; padding:20px; }
  #appView .worker-hero .check-actions { margin-top:20px; }
  #appView .worker-hero .check-actions button { flex:1; }
  #appView .task-summary-panel { padding:18px; }
  #appView .task-summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  #appView .task-filters { display:flex; overflow:auto; flex-wrap:nowrap; padding-bottom:10px; }
  #appView .task-filter { flex-shrink:0; }
  #appView .worker-palette { display:none; }
  #appView .roster-toolbar { flex-wrap:wrap; }
  #appView .roster-toolbar>span { width:100%; }
  #appView .sync-strip { margin-top:10px; }
  #appView .form-grid,.workspace-dialog .form-grid { grid-template-columns:1fr!important; }
  #appView .table-wrap { max-width:100%; }
  .workspace-dialog { padding:16px; }
}
.workspace-dialog .user-edit-panel { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:12px 0; gap:14px; background:white; }
.workspace-dialog .user-edit-panel label { min-width:0; }
.workspace-dialog .user-edit-panel input,.workspace-dialog .user-edit-panel select { width:100%; }
@media(max-width:760px) { .workspace-dialog .user-edit-panel { grid-template-columns:1fr; } }
#appView .form-grid label.check-row { display:flex; grid-column:1/-1; align-items:center; justify-content:flex-start; gap:9px; }
#appView .form-grid label input[type="checkbox"] { width:16px!important; min-height:16px; height:16px; padding:0!important; flex:none; }