/* Shared visual rules. Colors come from themes.css; layouts and behavior stay in their modules. */
.nav-item .nav-module-copy { display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;text-align:left; }
.nav-item .nav-module-note { font-size:11px;line-height:1.2;font-weight:500;letter-spacing:0;white-space:nowrap;color:inherit;opacity:.85; }
#hr-view .page-heading.card { margin-bottom:16px; }
html:root {
  --workspace-top: 16px;
  --surface: var(--orero-paper); --surface-hover: var(--theme-hover); --surface-active: var(--theme-soft);
  --text-primary: var(--orero-ink); --text-secondary: var(--orero-muted);
  --border: var(--orero-line); --border-strong: var(--theme-input-border);
  --accent: var(--theme-accent); --accent-hover: var(--orero-olive-hover); --accent-soft: var(--theme-soft);
  --input-background: var(--theme-input); --input-focus: var(--theme-accent);
  --orero-olive: var(--theme-accent);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html:root body { background: var(--theme-bg); background-attachment: fixed; color: var(--text-primary); }
html:root body:has(#login-view:not([hidden])) .page { background: transparent; }
html:root :is(input,select,textarea,button) { font-family: inherit; }
html:root h1 { font-size: clamp(1.8rem,2.5vw,2.45rem); line-height: 1.16; letter-spacing: -.025em; }
html:root h2 { line-height: 1.35; }
html:root :is(.muted,.small,time) { overflow-wrap: anywhere; }
html:root .eyebrow { color: var(--accent); letter-spacing: .16em; font-weight: 700; }
html:root :is(.card,.project-card,.department-card,.calendar-event-list,.messenger-shell) { border-radius: var(--radius-card); border-color: var(--border); box-shadow: var(--shadow-card); }
html:root :is(.task-info-card,.profile-info-card,.role-disclosure,.news-extra-fields,.message-extra) { border-radius: var(--radius-lg); }
html:root :is(.employee-dialog,.profile-dialog,.task-drawer.detail-mode,.task-drawer.form-mode) { border-radius: var(--radius-modal); background: var(--surface); box-shadow: var(--shadow-modal); }
html:root :is(.notification-panel,.mention-menu,.universal-mention-menu,.news-emoji-panel) { border-radius: var(--radius-lg); background: var(--surface); color: var(--text-primary); border: 1px solid var(--border-strong); box-shadow: var(--shadow-dropdown); }
html:root :is(.toast,.window-tray-item) { box-shadow: var(--shadow-floating); border-radius: var(--radius-md); }
html:root :is(.employee-dialog-head,.profile-dialog-head,.task-drawer-head,.notification-heading) { background: var(--surface); border-color: var(--border); }
html:root :is(.employee-dialog-head,.profile-dialog-head,.task-drawer-head) { flex-shrink: 0; }
html:root :is(.employee-dialog-head h2,.profile-dialog-head h2,.task-drawer-head h2) { font-size: clamp(1.25rem,2vw,1.65rem); }

/* Thin, visible focus and consistent controls across forms and floating editors. */
html:root :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea) { color: var(--text-primary); background-color: var(--input-background); border: 1px solid var(--border-strong); border-radius: var(--radius-md); font-size: .9rem; }
html:root :is(input,select,textarea):hover:not(:disabled) { border-color: var(--accent); }
html:root :is(input,textarea)::placeholder { color: var(--text-secondary); opacity: 1; }
html:root :is(input,select,textarea):focus { border-color: var(--input-focus); outline: 1px solid var(--input-focus); outline-offset: 1px; box-shadow: none; }
html:root :focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
html:root :is(input[type="checkbox"],input[type="radio"]) { accent-color: var(--accent); }
html:root option { color: var(--text-primary); background: var(--input-background); }
html:root :is(button,input,select,textarea):disabled { cursor: not-allowed; opacity: .72; }
html:root :where(button:not(.nav-item):not(.employee)) { border-radius: var(--radius-md); transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
html:root :where(button:not(.nav-item):not(.employee)):active:not(:disabled) { filter: brightness(.94); }
html:root :is(button.secondary,button.quiet) { color: var(--accent); background: var(--surface); border-color: var(--border-strong); }
html:root :is(button.secondary,button.quiet):hover:not(:disabled) { color: var(--accent); background: var(--surface-hover); border-color: var(--accent); }
html:root :is(button.project-delete,button.news-icon-delete) { color: var(--theme-danger); }
html:root :is(button.project-delete,button.news-icon-delete):hover { color: var(--theme-danger); background: var(--theme-danger-bg); border-color: var(--theme-danger); }
html:root :is(.task-inline-feedback.error,.news-edit-feedback,.error) { color: var(--theme-danger); }
html:root :is(.news-comment-confirm,.task-overdue) { background: var(--theme-danger-bg); color: var(--theme-danger); }

/* Search is a distinct, full-width entry point, not a primary action button. */
html:root #news-search-toggle { min-height: 52px; padding: 12px 16px; background: var(--input-background); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); font-weight: 500; }
html:root #news-search-toggle:hover { background: var(--surface-hover); border-color: var(--accent); }
html:root #news-search-toggle[aria-expanded="true"] { background: var(--surface-active); border-color: var(--accent); }
html:root #news-search-toggle svg { width: 22px; height: 22px; color: var(--accent); fill: none; stroke: currentColor; stroke-width: var(--theme-icon-weight); }
html:root :is(.news-filters,.task-filters) { padding: var(--space-4); border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-lg); gap: var(--space-3); }
html:root :is(#news-search,#task-search,#chat-search,#chat-person-search,#project-member-search,#calendar-person-search) { background: var(--input-background); border: 1px solid var(--border-strong); color: var(--text-primary); min-height: var(--control-height,36px); }
html:root :is(.news-filters,.task-filter-main,.task-filter-extra) > * { min-width: 0; }
html:root :is(.news-filter-count,#news-filter-count:not(:empty)) { color: var(--accent); background: var(--accent-soft); border-radius: var(--radius-sm); padding: 2px 7px; }

/* Recognizable SVG icons, with theme-specific containers and line weight. */
.ui-icon { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: var(--theme-icon-weight); stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
html:root :is(.nav-icon,.settings-symbol,.calendar-mark,.ui-icon-tile) { border-radius: var(--theme-icon-radius); border: var(--theme-icon-border); box-shadow: var(--theme-icon-shadow); display: inline-grid; place-items: center; }
html:root .nav-icon { width: 34px; height: 34px; background: var(--theme-nav-current); color: var(--theme-nav-icon); flex-shrink: 0; border-color: transparent; }
html:root .nav-item.current .nav-icon { border: var(--theme-icon-border); }
html:root :is(.settings-symbol,.calendar-mark,.ui-icon-tile) { background: var(--accent-soft); color: var(--accent); }
html:root .ui-icon-tile { width: 36px; height: 36px; margin-right: 10px; vertical-align: middle; }
html:root .nav-item { min-height: 48px; border-radius: var(--radius-md); gap: 12px; }
html:root .nav-item.current { background: var(--theme-nav-current); color: var(--theme-nav); box-shadow: inset 3px 0 var(--theme-nav-icon); font-weight: 700; }
html:root button.nav-item:hover { background: var(--theme-nav-current); color: var(--theme-nav); }
html:root .sidebar :focus-visible { outline-color: var(--theme-nav-icon); }
html:root :is(#company-search-toggle,#notifications-toggle,#profile-toggle,#logout) { color: var(--theme-nav); background: transparent; border-color: var(--theme-chrome-border); }
html:root :is(#company-search-toggle,#notifications-toggle,#profile-toggle,#logout):hover { color: var(--theme-nav); background: var(--theme-nav-current); }
html:root :is(#company-search-toggle,#notifications-toggle) { border-radius: var(--theme-icon-radius); box-shadow: var(--theme-icon-shadow); }
html:root .topbar :focus-visible { outline-color: var(--theme-nav-icon); }
html:root .notification-count { color: var(--theme-on-accent); background: var(--accent); border: 1px solid var(--theme-chrome); }
html:root #notification-list .notification-item.unread { background: var(--surface-active); box-shadow: inset 3px 0 var(--accent); }
html:root #notification-list .notification-item:hover { background: var(--surface-hover); }
html:root .notification-panel { right: 0; }
html:root #chat-new { border-radius: var(--theme-icon-radius); box-shadow: var(--theme-icon-shadow); }
html:root #chat-new svg { stroke-width: var(--theme-icon-weight); }

/* Content hierarchy: opaque working surfaces over restrained backgrounds. */
html:root :is(.news-post,.events-card,.task-table-wrap,.project-card,.calendar-mini,.calendar-room-panel) { background: var(--surface); }
html:root .news-post { padding: clamp(18px,2vw,28px); }
html:root :is(.news-quote,.reply-draft,.message-reply-reference) { border-left-color: var(--accent); background: var(--accent-soft); color: var(--text-primary); }
html:root .news-event-detail { border-left-color: var(--theme-warning); background: var(--theme-warning-bg); color: var(--text-primary); }
html:root .news-event-detail span { color: var(--theme-warning); }
html:root :is(.news-comment-form,.news-extra-fields,.message-extra) { background: var(--surface-active); border-color: var(--border); }
html:root .news-comment-form textarea { background: var(--input-background); color: var(--text-primary); border-color: var(--border-strong); }
html:root .news-post-actions button.news-icon-action { color: var(--text-secondary); }
html:root .news-post-actions button.news-icon-action:hover { color: var(--accent); background: var(--surface-hover); border-color: var(--border); }
html:root .news-post-actions button.news-icon-delete:hover { color: var(--theme-danger); background: var(--theme-danger-bg); }
html:root .task-table button.task-sort:hover { background: var(--surface-hover); color: var(--accent); }
html:root :is(.tasks-tabs,.task-project-strip) button[aria-pressed="true"] { color: var(--theme-on-accent); background: var(--accent); border-color: var(--accent); box-shadow: inset 0 -2px currentColor; }
html:root :is(.task-row-status,.task-detail-status,.calendar-event-badge,.news-kind-badge) { border-radius: var(--radius-sm); color: var(--accent); background: var(--accent-soft); }
html:root .task-row-status.completed { color: var(--theme-success); background: var(--theme-success-bg); }
html:root .task-row-status.cancelled { color: var(--text-secondary); background: var(--surface-active); }
html:root :is(.task-deadline,.task-detail-fields dt,.task-check-progress) { color: var(--text-secondary); }
html:root .employee:hover { background: var(--surface-hover); }
html:root .employee { border-radius: var(--radius-md); }
html:root :is(.employee-department,.employee-position) { color: var(--text-secondary); }
html:root :is(.role-disclosure,.role-card) { background: var(--surface); }
html:root .role-disclosure summary:hover { background: var(--surface-hover); }
html:root .role-disclosure[open] > summary { background: var(--surface-active); }
html:root .role-permission-grid { column-gap: var(--space-6); }
html:root .calendar-empty-title { color: var(--text-primary); }
html:root .calendar-empty-caption { color: var(--text-secondary); }
html:root #calendar-view .calendar-day[aria-pressed="true"] { background: var(--accent); color: var(--theme-on-accent); font-weight: 700; box-shadow: inset 0 0 0 1px currentColor; }
html:root .calendar-room-choice:has(input:checked) { box-shadow: inset 3px 0 var(--accent); }
html:root :is(.news-empty,.chat-welcome,.events-empty) { color: var(--text-secondary); }
html:root :is(.window-tray-item,.unavailable::after) { border-color: var(--border-strong); }
html:root button.window-tray-item { background: var(--theme-sidebar); color: var(--theme-nav); }
html:root button.window-tray-item:hover { background: var(--theme-nav-current); color: var(--theme-nav); }
html:root .theme-option-copy .theme-selected-label { min-height: 24px; }
html:root .theme-option:has(input:checked) { box-shadow: inset 0 0 0 1px var(--accent); }

/* Keep controls reachable as columns narrow; scrolling is local to dense data. */
html:root :is(.workspace-content,.feed-column,.task-filter-main,.calendar-schedule,.project-card) { min-width: 0; }
@media (min-width:1101px) { html:root .workspace-content:has(> #dashboard-view:not([hidden])) { padding-inline:22px; } }
html:root :is(.section-heading,.page-heading,.tasks-heading,.calendar-heading) { flex-wrap: wrap; gap: var(--space-4); }
html:root .section-heading > :first-child { min-width: 0; }
html:root :is(.employee-dialog,.profile-dialog,.task-drawer) { overscroll-behavior: contain; }
@media (max-width: 1100px) { html:root .workspace-content { padding-inline: 22px; } }
@media (min-width: 761px) {
  html:root .workspace-content:has(> #dashboard-view:not([hidden])) { padding-top: var(--workspace-top); }
}
@media (max-width: 760px) {
  html:root body { background-attachment: scroll; }
  html:root .workspace-content { padding: 22px 14px; }
  html:root :is(.news-filters,.task-filter-main) { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  html:root :is(#task-search,#news-search) { grid-column: 1 / -1; }
  html:root .nav-list { gap: 6px; }
  html:root :is(.task-table tr,.calendar-mini,.calendar-room-panel) { border-radius: var(--radius-lg); }
  html:root .task-table td { background: transparent; }
  html:root .task-table td::before { color: var(--text-secondary); }
  html:root :is(.toast-region,.window-tray) { max-width: calc(100vw - 16px); }
  html:root .notification-panel { position: fixed; top: 74px; right: 12px; width: min(380px,calc(100vw - 24px)); }
}
@media (max-width: 480px) {
  html:root :is(.news-filters,.task-filter-main,.task-filter-extra,.role-module-grid,.role-permission-grid) { grid-template-columns: minmax(0,1fr); }
  html:root :is(.news-filters,.task-filter-main) button { width: 100%; }
  html:root .topbar-inner { padding-inline: 12px; gap: 10px; }
  html:root .brand { font-size: 1.05rem; gap: 6px; letter-spacing: .08em; }
  html:root .brand-family { font-size: .43rem; letter-spacing: .06em; }
  html:root .account { gap: 5px; }
  html:root #logout { font-size: .75rem; padding: 8px; }
  html:root :is(.nav-item,.secondary,.chat-icon-button,.news-icon-action) { min-height: 44px; }
  html:root .nav-item { font-size: .82rem; gap: 7px; }
  html:root .nav-icon { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) { html:root :is(button,.theme-option) { transition: none; } }
@media (forced-colors: active) { html:root :focus-visible { outline: 1px solid Highlight; } html:root .nav-item.current { border: 1px solid Highlight; } }