/* macOS-inspired appearance is opt-in. Shared layouts, permissions and dimensions remain intact. */
html:root[data-theme="macos"] { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
html:root[data-theme="macos"] body { background-size: cover; }
/* Keep section titles readable against the photographic desktop wallpaper. */
html:root[data-theme="macos"] .workspace-content > section > :is(.page-heading,.tasks-heading,.calendar-heading,.invoice-page-heading) { padding: 18px 22px; border: 1px solid #ffffff99; border-radius: var(--radius-card); background: var(--theme-glass); }
html:root[data-theme="macos"] :is(.workspace-empty,.calendar-empty) { background: var(--theme-glass); }
html:root[data-theme="macos"] :is(.news-pagination,.task-pagination,.task-mobile-sort,.calendar-schedule-head,#calendar-zone,#calendar-status:not(:empty),.invoice-board-caption,.analytics-status:not(:empty),.news-status:not(:empty),.tasks-status:not(:empty),#invoices-state:not(:empty)) { padding: 12px 16px; border: 1px solid #ffffff99; border-radius: var(--radius-md); background: var(--theme-glass); }
html:root[data-theme="macos"] :is(.topbar,.sidebar) { background: #f5f6fce0; backdrop-filter: blur(28px) saturate(150%); border-color: #ffffff99; }
html:root[data-theme="macos"] .topbar { box-shadow: 0 1px 12px #22264b0d; }
html:root[data-theme="macos"] :is(.brand-name,.brand-family) { color: var(--text-primary); }
html:root[data-theme="macos"] .brand-name { font-family: inherit; font-weight: 700; letter-spacing: .03em; }
html:root[data-theme="macos"] .brand-icon { filter: brightness(.35); }
html:root[data-theme="macos"] .sidebar { border-radius: 16px; box-shadow: var(--shadow-card); }
html:root[data-theme="macos"] .nav-item { border-radius: 8px; font-size: .88rem; font-weight: 500; }
html:root[data-theme="macos"] .nav-item.current { box-shadow: none; background: #dce7fa; }
html:root[data-theme="macos"] .nav-icon { background: transparent; box-shadow: none; }
html:root[data-theme="macos"] .nav-item[data-view="tasks"] .nav-icon { color: #ac6420; }
html:root[data-theme="macos"] .nav-item[data-view="calendar"] .nav-icon { color: #bd3c45; }
html:root[data-theme="macos"] .nav-item[data-view="messenger"] .nav-icon { color: #278347; }
html:root[data-theme="macos"] .nav-item[data-view="employees"] .nav-icon { color: #7950aa; }
html:root[data-theme="macos"] :is(#profile-toggle,#logout,#company-search-toggle,#notifications-toggle) { background: #ffffff80; border-color: #cdd0dc; color: var(--text-primary); }
html:root[data-theme="macos"] :is(h1,h2,h3) { font-family: var(--theme-heading-font); letter-spacing: -.025em; }
html:root[data-theme="macos"] h1 { font-weight: 700; }
html:root[data-theme="macos"] .eyebrow { color: var(--text-secondary); font-size: .67rem; letter-spacing: .1em; }
html:root[data-theme="macos"] :is(.card,.project-card,.department-card,.structure-node,.structure-root) { background: #fffffff2; border-color: #ffffffc9; box-shadow: var(--shadow-card); }
html:root[data-theme="macos"] :is(.employee-dialog,.profile-dialog,.task-drawer,.messenger-dialog) { border: 1px solid #a8acbc80; }
html:root[data-theme="macos"] :is(.employee-dialog-head,.profile-dialog-head,.task-drawer-head,.notification-heading) { background: #f1f2f8ed; border-bottom: 1px solid #d4d6df; backdrop-filter: blur(24px); }
html:root[data-theme="macos"] :is(.employee-dialog-head h2,.profile-dialog-head h2,.task-drawer-head h2) { font-size: 1.12rem; font-weight: 650; }
html:root[data-theme="macos"] :is(.task-form-side,.task-detail-main,.calendar-form-side,.chat-sidebar) { background: #f2f3f8; }
html:root[data-theme="macos"] :is(.task-table th,.employee-columns) { background: #f3f4f8; font-weight: 550; border-color: var(--border); }
html:root[data-theme="macos"] .task-table tr:not([data-status]):nth-child(even) { background: #fafbfe; }
html:root[data-theme="macos"] :is(.task-info-card,.profile-info-card,.role-disclosure) { background: #ffffff; border: 1px solid var(--border); box-shadow: 0 1px 2px #22264b05; }
html:root[data-theme="macos"] :is(.staff-tabs,.tasks-tabs,.settings-tabs,.calendar-mode-tabs) { background: #e7e9f0d9; padding: 4px; border-radius: 9px; border-color: #d8dbe3; }
html:root[data-theme="macos"] :is(.staff-tabs,.tasks-tabs,.settings-tabs) button { font-size: .86rem; border-radius: 6px; }
html:root[data-theme="macos"] :is(.staff-tabs,.tasks-tabs,.settings-tabs) button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 4px #22264b22; color: var(--text-primary); }
html:root[data-theme="macos"] :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) { box-shadow: inset 0 1px 2px #22264b08; }
html:root[data-theme="macos"] :is(input,select,textarea):focus { box-shadow: none; }
html:root[data-theme="macos"] button[type="submit"], html:root[data-theme="macos"] :is(#task-create,#calendar-create,#add-employee,#department-add,#project-add) { background: linear-gradient(#1680ee,#0864ce); border-color: #0963c9; color: #fff; box-shadow: inset 0 1px #ffffff38,0 1px 2px #22264b15; font-weight: 550; }
html:root[data-theme="macos"] button.secondary { color: var(--text-primary); background: linear-gradient(#ffffff,#f7f8fb); border-color: #c6c9d3; box-shadow: 0 1px 2px #22264b0a; font-weight: 500; }
html:root[data-theme="macos"] :is(.notification-panel,.user-action-menu,.person-popover,.mention-menu,.universal-mention-menu,.news-emoji-panel,.toast) { background: #fafbfff2; backdrop-filter: blur(24px) saturate(150%); border: 1px solid #ffffffbb; }
html:root[data-theme="macos"] :is(.chat-compose,.task-comment-form) { background: #f8f9fddd; }
html:root[data-theme="macos"] :is(.chat-bubble,.task-activity-event) { border-radius: 16px; box-shadow: 0 1px 2px #22264b0a; }
html:root[data-theme="macos"] .window-tray { background: #f5f6fbd9; backdrop-filter: blur(28px) saturate(160%); border: 1px solid #ffffffcc; border-radius: 18px; padding: 8px; box-shadow: var(--shadow-floating); }
html:root[data-theme="macos"] .window-tray-item { background: #ffffffee; color: var(--text-primary); border-color: #cbd0dd; }
/* Only this theme places the traffic-light controls on the left. Targets stay large. */
html:root[data-theme="macos"] .window-controls { order: -1; margin-left: 0; margin-right: 6px; border: 0; padding: 0; gap: 1px; }
html:root[data-theme="macos"] :is(#employee-dialog,#department-dialog,#profile-dialog,#task-drawer,#calendar-event-dialog,#calendar-room-dialog,#invoice-route-dialog,#invoice-dialog,#hr-create-dialog,#project-dialog,#chat-dialog,#messenger-view,#structure-view) .window-control { width: 30px; min-width: 30px; height: 36px; min-height: 36px; background: transparent; color: #333; border: 0; border-radius: 8px; box-shadow: none; }
html:root[data-theme="macos"] .window-control::before { content: ''; width: 14px; height: 14px; position: absolute; border: 1px solid #00000018; border-radius: 50%; background: var(--mac-control); }
html:root[data-theme="macos"] .window-control-close { order: -3; --mac-control: #ff6058; }
html:root[data-theme="macos"] .window-control-minimize { order: -2; --mac-control: #ffbd2f; }
html:root[data-theme="macos"] .window-control-maximize { order: -1; --mac-control: #28c840; }
html:root[data-theme="macos"] .window-control svg { position: relative; width: 10px; height: 10px; opacity: 0; stroke-width: 2.3; }
html:root[data-theme="macos"] .window-controls:hover .window-control svg,
html:root[data-theme="macos"] .window-control:focus-visible svg { opacity: 1; }
@media (pointer: coarse), (max-width: 700px) {
  html:root[data-theme="macos"] :is(#employee-dialog,#department-dialog,#profile-dialog,#task-drawer,#calendar-event-dialog,#calendar-room-dialog,#invoice-route-dialog,#invoice-dialog,#hr-create-dialog,#project-dialog,#chat-dialog,#messenger-view,#structure-view) .window-control { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  html:root[data-theme="macos"] .window-control::before { width: 20px; height: 20px; }
  html:root[data-theme="macos"] .window-control svg { opacity: 1; width: 13px; height: 13px; }
}
@media (max-width: 700px) { html:root[data-theme="macos"] .sidebar { border-radius: 0; } }
@media (prefers-reduced-transparency: reduce) {
  html:root[data-theme="macos"] :is(.topbar,.sidebar,.window-tray,.notification-panel,.toast) { backdrop-filter: none; background: #f5f6fc; }
}