:root { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #203047; background: #f2f5fa; line-height: 1.5; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.topbar { height: 68px; background: #fff; border-bottom: 1px solid #e2e8f1; position: relative; z-index: 5; }
.topbar-inner { height: 100%; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { color: #213b77; text-decoration: none; font-size: 1.25rem; font-weight: 850; letter-spacing: .04em; white-space: nowrap; }
.brand span { color: #23b8ad; }
.account { display: flex; gap: 16px; align-items: center; color: #52617a; font-size: .9rem; }
.notification-wrap { position: relative; }
#notifications-toggle { position: relative; display: grid; place-items: center; width: 40px; height: 40px; min-height: 40px; padding: 0; border: 1px solid #dce5f1; background: #f7f9fc; color: #355585; border-radius: 10px; }
#notifications-toggle:hover, #notifications-toggle[aria-expanded="true"] { background: #e9eff8; }
.notification-count { position: absolute; right: -5px; top: -6px; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 50px; background: #e65157; color: #fff; font-size: .67rem; font-weight: 800; line-height: 19px; }
.notification-panel { position: absolute; z-index: 20; top: calc(100% + 12px); right: -48px; width: min(370px, calc(100vw - 24px)); max-height: min(520px, calc(100vh - 82px)); display: flex; flex-direction: column; background: #fff; border: 1px solid #dce5f1; border-radius: 12px; box-shadow: 0 16px 50px #14254c30; overflow: hidden; }
.notification-heading { display: flex; justify-content: space-between; align-items: center; padding: 14px 17px 11px; border-bottom: 1px solid #e7ebf2; }
.notification-heading h2 { margin: 0; font-size: 1rem; }
.notification-heading-actions { display: flex; align-items: center; gap: 4px; }
html:root .notification-heading :is(#notification-clear-all, #notification-close) { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; border-radius: var(--radius-md); background: var(--theme-soft); color: var(--theme-accent); box-shadow: none; }
html:root .notification-heading :is(#notification-clear-all, #notification-close):hover:not(:disabled) { background: var(--theme-hover); }
html:root .notification-heading #notification-clear-all:disabled { opacity: .45; cursor: default; }
#notification-close { font-size: 1.35rem; line-height: 1; }
@media (max-width: 700px) { html:root .notification-heading :is(#notification-clear-all, #notification-close) { flex-basis: 44px; width: 44px; height: 44px; min-height: 44px; } }
.notification-status { margin: 0; padding: 17px; color: #61718a; font-size: .87rem; }
.notification-status.error { color: #842c22; }
.notification-list { min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
#notification-list .notification-item { display: block; width: 100%; min-height: 0; border: 0; border-bottom: 1px solid #edf0f5; border-radius: 0; background: #fff; color: #203047; padding: 13px 17px; text-align: left; font-weight: 400; }
#notification-list .notification-item:hover { background: #f2f6fc; }
#notification-list .notification-item.unread { background: #eff5ff; }
.notification-item strong, .notification-item span { display: block; }
.notification-item strong { font-size: .86rem; font-weight: 700; }
.notification-item span { color: #708098; font-size: .75rem; margin-top: 4px; }
#notification-more { margin: 9px 14px 14px; }
.notification-row { display:flex; align-items:stretch; border-bottom:1px solid var(--border); }
html:root #notification-list .notification-row .notification-item { flex:1; min-width:0; width:auto; border-bottom:0; overflow-wrap:anywhere; }
html:root .notification-row .notification-clear { display:grid; place-items:center; flex:0 0 40px; width:40px; align-self:flex-start; min-height:40px; padding:0; margin:5px 4px; border:0; background:transparent; color:var(--text-secondary); box-shadow:none; }
html:root .notification-row .notification-clear:hover { background:var(--theme-danger-bg); color:var(--theme-danger); }
.page { min-height: calc(100vh - 68px); }
.card { background: #fff; border: 1px solid #e2e8f1; border-radius: 14px; padding: 24px; box-shadow: 0 8px 28px #20304708; }
.narrow { max-width: 460px; margin: 8vh auto 0; }
#loading, #login-view { margin-top: 8vh; }
.toast-region { position: fixed; z-index: 80; top: max(82px, env(safe-area-inset-top)); right: max(24px, env(safe-area-inset-right)); width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 110px); overflow-y: auto; display: grid; gap: 10px; padding: 3px; pointer-events: none; }
.toast-region[popover] { margin: 0; left: auto; bottom: auto; border: 0; background: transparent; color: inherit; }
.toast { display: grid; grid-template-columns: 24px minmax(0, 1fr) 32px; gap: 10px; align-items: start; padding: 15px 12px 15px 16px; border: 1px solid #c5d3b2; border-radius: 12px; background: #f2f6e9; color: #38522e; box-shadow: 0 8px 22px #1e2b161a; pointer-events: auto; opacity: 1; transition: opacity var(--motion-popup,180ms) ease; }
.toast.error { background: #fff4ee; border-color: #e2bdae; color: #853a28; }
.toast-icon { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid currentColor; border-radius: 50%; font-size: .8rem; opacity: .8; }
.toast-message { font-size: .88rem; line-height: 1.5; padding-top: 1px; overflow-wrap: anywhere; white-space: pre-wrap; }
.toast-region button.toast-close:not(.nav-item):not(.employee) { margin: -4px -3px 0 0; padding: 0; min-width: 32px; min-height: 32px; border: 0; border-radius: 7px; background: transparent; color: inherit; font-size: 1.35rem; font-weight: 400; }
.toast-region button.toast-close:hover { background: #50643d12; }
.toast.toast-leaving { animation: none; opacity: 0; pointer-events: none; }
@starting-style { .toast { opacity: 0; } }
@media (max-width: 600px) { .toast-region { top: max(76px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); width: calc(100vw - 24px); } .toast-region button.toast-close:not(.nav-item):not(.employee) { min-height: 40px; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; transition-duration: .01ms; } }
.eyebrow { color: #496cad; font-size: .72rem; letter-spacing: .14em; font-weight: 850; margin: 0 0 8px; }
h1 { font-size: clamp(1.8rem, 3vw, 2.3rem); line-height: 1.2; margin: 0 0 8px; letter-spacing: -.025em; }
h2 { font-size: 1.13rem; line-height: 1.3; margin: 0 0 12px; }
p { margin: 0 0 16px; }
.muted { color: #61718a; }
.small { font-size: .9rem; }
label { display: block; margin: 12px 0 5px; font-weight: 600; font-size: .875rem; }
input, select { display: block; width: 100%; min-height: var(--control-height,36px); border: 1px solid #aab9cb; border-radius: 8px; padding: 6px 10px; background: #fff; color: #203047; }
:where(button:not(.nav-item):not(.employee)) { border: 1px solid #315fbc; border-radius: 8px; background: #315fbc; color: #fff; font-size: .875rem; font-weight: 600; line-height: 1.35; padding: 6px 12px; min-height: var(--control-height,36px); }
:where(button:not(.nav-item):not(.employee)):hover { background: #244c9d; }
button:disabled { opacity: .65; cursor: wait; }
:where(button:not(.nav-item):not(.employee)).secondary { color: #315fbc; background: #fff; }
:where(button:not(.nav-item):not(.employee)).secondary:hover { background: #eef3fc; }
:where(button:not(.nav-item):not(.employee)).quiet { border-color: #dce5f1; color: #355585; background: #f7f9fc; min-height: 36px; padding: 6px 12px; }
:where(button:not(.nav-item):not(.employee)).quiet:hover { background: #e9eff8; }
form > button[type="submit"] { margin-top: 20px; }
.check { display: flex; gap: 10px; align-items: center; }
.check input { width: 18px; height: 18px; min-height: 0; }
.actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.app-shell { min-height: calc(100vh - 68px); display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.sidebar { background: linear-gradient(180deg, #243e7e 0%, #192f63 100%); color: #ecf3ff; padding: 28px 14px 24px; display: flex; flex-direction: column; min-width: 0; }
.sidebar-profile { padding: 4px 13px 27px; margin-bottom: 17px; border-bottom: 1px solid #ffffff25; display: flex; align-items: center; gap: 11px; min-width: 0; }
.sidebar-profile > div:last-child { min-width: 0; }
.sidebar-profile strong, .sidebar-profile span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-profile strong { font-size: .93rem; }
.sidebar-profile span { font-size: .76rem; color: #b8c9ec; }
.profile-initial { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: #68d6c3; color: #173b65; font-weight: 850; }
.nav-list { display: flex; flex-direction: column; gap: 3px; }
.nav-item, .nav-subitem { position: relative; display: flex; align-items: center; gap: 12px; min-height: 43px; border: 0; border-radius: 9px; color: #e7eefc; background: transparent; padding: 8px 12px; text-align: left; text-decoration: none; font-size: .9rem; font-weight: 600; }
button.nav-item { width: 100%; }
button.nav-item:hover, .nav-item.current { background: #ffffff24; color: #fff; }
.nav-item.current { box-shadow: inset 3px 0 #6bd8c9; }
.nav-icon { flex: 0 0 25px; height: 25px; display: grid; place-items: center; border-radius: 6px; background: #ffffff17; font-size: 1.1rem; line-height: 1; }
.unavailable { color: #b4c2df; cursor: not-allowed; }
.unavailable:hover, .unavailable:focus-visible { background: #ffffff12; }
.unavailable::after { content: attr(data-hint); display: none; position: absolute; z-index: 10; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); white-space: nowrap; background: #fff; color: #203047; border: 1px solid #dce4f0; border-radius: 7px; padding: 7px 10px; box-shadow: 0 6px 20px #14254c25; font-size: .78rem; font-weight: 650; }
.unavailable:hover::after, .unavailable:focus-visible::after { display: block; }
.nav-divider { height: 1px; background: #ffffff24; margin: 16px 10px 12px; }
.nav-group-title { display: flex; justify-content: space-between; align-items: center; gap: 4px; color: #eff4ff; font-size: .78rem; font-weight: 800; line-height: 1.35; padding: 9px 12px 8px; }
.soon { color: #a7e9db; font-size: .59rem; letter-spacing: .08em; }
.nav-subitem { min-height: 36px; padding: 7px 12px 7px 49px; font-size: .79rem; font-weight: 500; }
.sidebar-footer { color: #9fb2da; font-size: .75rem; padding: 20px 13px 0; margin: auto 0 0; }
.workspace-content { min-width: 0; padding: 38px clamp(20px, 3vw, 48px) 60px; }
.page-heading { margin-bottom: 26px; }
.page-heading .muted { margin-bottom: 0; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); align-items: start; gap: 22px; }
.feed-column, .events-column, .side { display: grid; gap: 20px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.composer { padding: 0; overflow: visible; }
#news-expand { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 70px; padding: 14px 20px; border: 0; border-radius: 14px; background: #fff; color: #75849b; text-align: left; font-weight: 500; }
#news-expand:hover { background: #f8faff; }
.compose-avatar { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 50%; background: #eaf1ff; color: #315fbc; font-size: 1.4rem; }
.expand-mark { margin-left: auto; color: #315fbc; font-size: 1.4rem; }
.composer-tabs { display: flex; flex-wrap: wrap; gap: 0 28px; padding: 0 24px; border-bottom: 1px solid #e5eaf2; }
.composer-tab { position: relative; display: inline-flex; align-items: center; min-height: 55px; flex: 0 0 auto; font-size: .83rem; font-weight: 750; color: #717f92; white-space: nowrap; }
.composer-tab.selected { color: #315fbc; box-shadow: inset 0 -2px #315fbc; }
.composer-tab.unavailable:hover, .composer-tab.unavailable:focus-visible { background: transparent; color: #50627d; }
#news-collapse { min-height: 40px; width: 30px; padding: 0; margin-left: auto; border: 0; background: transparent; color: #6a7890; font-size: 1.5rem; }
#news-collapse:hover { background: #eef3fc; }
#news-body { display: block; width: 100%; min-height: 180px; resize: vertical; border: 0; border-radius: 0; padding: 22px 25px; margin: 0; color: #203047; background: #fff; font: inherit; line-height: 1.6; }
#news-body::placeholder { color: #8a97a8; }
.mention-menu { max-height: 240px; overflow-y: auto; margin: 0 24px 15px; border: 1px solid #cfd9e8; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px #20304718; }
.mention-menu p { margin: 0; padding: 12px 14px; color: #61718a; font-size: .84rem; }
#mention-menu .mention-option { display: block; width: 100%; min-height: 0; padding: 9px 14px; border: 0; border-radius: 0; background: #fff; color: #203047; text-align: left; font-weight: 500; }
#mention-menu .mention-option:hover, #mention-menu .mention-option:focus-visible { background: #eef4ff; }
.mention-option strong, .mention-option span { display: block; }
.mention-option strong { font-size: .86rem; }
.mention-option span { color: #718097; font-size: .75rem; }
.composer-tools { display: flex; gap: 4px 20px; flex-wrap: wrap; padding: 0 20px 13px; border-bottom: 1px solid #e5eaf2; }
.composer-tool { position: relative; display: inline-flex; align-items: center; min-height: 30px; font-size: .83rem; white-space: nowrap; color: #8592a4; }
#mention-trigger { position: relative; min-height: 30px; padding: 0; border: 0; background: transparent; color: #315fbc; font-size: .83rem; font-weight: 650; }
#mention-trigger:hover { background: transparent; color: #244c9d; text-decoration: underline; }
.composer-tool.unavailable:hover, .composer-tool.unavailable:focus-visible, .audience-add.unavailable:hover, .audience-add.unavailable:focus-visible { background: transparent; color: #536b8e; }
.composer-tab.unavailable::after, .composer-tool.unavailable::after, .audience-add.unavailable::after { left: 0; top: calc(100% + 3px); transform: none; }
.composer-audience { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 19px 24px; font-size: .9rem; }
.audience-chip { background: #dcf39a; color: #4a641a; border-radius: 7px; padding: 6px 12px; }
.audience-add { position: relative; color: #315fbc; font-weight: 650; }
.composer-actions { display: flex; gap: 8px; align-items: center; padding: 0 24px 20px; }
.news-feedback { margin: -8px 24px 20px; color: #256842; font-size: .86rem; }
.news-feedback.error { color: #842c22; }
#news-form .composer-submit { border-color: #32afe0; background: #32afe0; padding: 11px 23px; }
#news-form .composer-submit:hover { background: #2393c0; }
#news-form .composer-cancel { border-color: transparent; background: transparent; color: #647188; }
#news-form .composer-cancel:hover { background: #f0f4fa; }
.feed-heading h2 { margin: 2px 0 0; font-size: 1.12rem; }
.news-list { display: grid; gap: 15px; }
.news-status { color: #61718a; }
.news-status.error { border-color: #e5b4ae; color: #842c22; background: #fff8f7; }
.news-empty { padding: 42px 24px; text-align: center; color: #61718a; }
.news-empty h3 { color: #203047; margin: 0 0 6px; font-size: 1rem; }
.news-empty p { margin: 0; }
.news-author { display: flex; align-items: center; gap: 11px; margin-bottom: 17px; }
.news-avatar { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 50%; color: #315fbc; background: #eaf1ff; font-weight: 850; }
.news-author strong, .news-author time { display: block; }
.news-author strong { font-size: .91rem; }
.news-author time { color: #79879a; font-size: .78rem; }
.news-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.news-post-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.news-post-actions .news-icon-action svg { width: 18px; height: 18px; }
.news-post-editor { margin-top: 17px; padding-top: 17px; border-top: 1px solid var(--orero-line, #dce5f1); position: relative; }
.news-post-editor label { display: block; font-weight: 700; }
.news-post-editor textarea { display: block; width: 100%; min-height: 145px; margin: 8px 0 12px; padding: 12px; border: 1px solid var(--orero-line, #aab9cb); border-radius: 7px; resize: vertical; font: inherit; color: inherit; background: #fff; }
.news-edit-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.news-edit-feedback { margin: 10px 0 0; color: #842c22; }
.news-delete-confirm p { margin-bottom: 10px; }
.news-delete-confirm button { margin-right: 8px; }
.news-edit-mentions { position: relative; margin-top: 8px; max-height: 240px; overflow-y: auto; }
.news-edit-mentions .mention-option { display: block; width: 100%; min-height: 40px; padding: 9px 14px; border: 0; border-radius: 0; background: #fff; color: #243321; text-align: left; }
.news-edit-mentions .mention-option:hover, .news-edit-mentions .mention-option:focus-visible { background: #e9f1db; }
.events-card { min-height: 470px; }
.birthdays-card { align-self: start; }
html:root .birthdays-card .section-heading { flex-wrap: nowrap; }
.birthday-heading-icon { flex: 0 0 auto; font-size: 1.55rem; line-height: 1; }
.birthdays-list { display: grid; gap: 8px; margin-top: 14px; }
.birthday-row { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.birthday-row .person-avatar { flex: 0 0 auto; }
html:root .birthday-row > .birthday-person-link { width: 100%; min-width: 0; min-height: 44px; gap: 12px; }
html:root .birthday-person-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.birthday-row-copy { display: grid; min-width: 0; gap: 2px; }
.birthday-row-copy strong { overflow-wrap: anywhere; }
.birthday-row-copy small { color: var(--text-secondary); }
html:root .person-name-text { display: inline; }
html:root .birthday-name-badge { display: inline; margin-left: 5px; font-size: .85em; white-space: nowrap; }
html:root .administrator-name-badge { display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; margin-left: 5px; vertical-align: -.16em; border: 1px solid color-mix(in srgb, var(--theme-warning) 25%, transparent); border-radius: .35em; color: var(--theme-warning); background: var(--theme-warning-bg); }
.administrator-name-badge .ui-icon { width: .95em; height: .95em; stroke-width: 1.7; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.section-heading h2 { margin-bottom: 6px; }
.calendar-mark { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: #eaf1ff; color: #3b68b7; font-size: 1.4rem; }
.today-date { color: #596b87; font-size: .87rem; border-bottom: 1px solid #e4eaf3; padding: 13px 0 17px; margin: 0; }
.events-empty { min-height: 245px; display: flex; flex-direction: column; justify-content: center; padding-left: 19px; position: relative; }
.events-line { position: absolute; left: 1px; top: 68px; bottom: 70px; width: 2px; background: #dbe6f6; }
.events-line::before { content: ''; position: absolute; top: 0; left: -5px; width: 12px; height: 12px; border-radius: 50%; background: #76cdbd; }
.events-empty p { font-weight: 750; margin-bottom: 4px; }
.events-empty span:last-child { color: #61718a; font-size: .84rem; }
.management-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, 380px); align-items: start; gap: 20px; }
.employee-list, .structure-list { display: grid; gap: 9px; }
.employee { width: 100%; text-align: left; color: inherit; background: #f8fafd; border: 1px solid #e2e8f1; border-radius: 9px; padding: 12px 14px; }
button.employee:hover { background: #eef4ff; }
.employee strong, .employee span { display: block; }
.employee span { color: #61718a; font-size: .88rem; font-weight: 400; overflow-wrap: anywhere; }
.tag { display: inline-block !important; width: auto; font-weight: 700 !important; color: #744513; background: #fff0d5; border-radius: 4px; padding: 1px 7px; margin: 3px 0; }
.department-card { border: 1px solid #e2e8f1; background: #f8fafd; border-radius: 10px; padding: 16px 18px; }
.department-card h3 { margin: 0 0 7px; font-size: 1rem; }
.department-card p { margin: 0; color: #61718a; font-size: .87rem; }
.department-meta { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.department-meta span { color: #355585; background: #eaf1ff; border-radius: 50px; padding: 3px 9px; font-size: .76rem; font-weight: 650; }
.tasks-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 25px; }
.tasks-heading .muted { margin-bottom: 0; }
:is(#task-create,#project-add) { background: #2db673; border-color: #2db673; white-space: nowrap; }
:is(#task-create,#project-add):hover { background: #24965e; }
.tasks-status { margin-bottom: 14px; color: #61718a; }
.tasks-status.error { color: #842c22; border-color: #e5b4ae; }
.task-table-wrap { padding: 0; overflow-x: auto; }
.task-table { width: 100%; border-collapse: collapse; min-width: 780px; text-align: left; }
.task-table th { padding: 17px 19px; color: #5a6b80; font-size: .88rem; font-weight: 650; white-space: nowrap; border-bottom: 1px solid #e2e8f1; }
.task-table td { padding: 19px; border-bottom: 1px solid #e9edf3; color: #46576d; font-size: .89rem; vertical-align: top; }
.task-table tr:last-child td { border-bottom: 0; }
.task-table tbody tr:hover { background: #f8fbff; }
.task-table th:nth-child(1) { width: 29%; }
.task-table th:nth-child(2), .task-activity-cell { background: #f1f9fd; }
button.task-row-title { display: block; min-height: 0 !important; border: 0 !important; padding: 0 !important; background: transparent !important; color: #285aad; font-weight: 650 !important; text-align: left; }
button.task-row-title:hover { color: #173f88; text-decoration: underline; }
.task-row-status { display: inline-block; margin-top: 7px; padding: 2px 8px; border-radius: 99px; background: #eef3fb; color: #506d99; font-size: .72rem; font-weight: 700; }
.task-overdue { display: block; width: fit-content; margin-top: 6px; padding: 2px 7px; border-radius: 5px; color: #92352f; background: #fff0ee; font-size: .72rem; font-weight: 700; }
.task-backdrop { position: fixed; inset: 0; z-index: 25; background: #1423458c; }
.task-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 26; width: min(680px, 100vw); display: flex; flex-direction: column; background: #fff; box-shadow: -18px 0 60px #0b193e45; }
.task-drawer-open { overflow: hidden; }
.task-drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 22px 26px 18px; border-bottom: 1px solid #e2e8f1; }
.task-drawer-head h2 { margin: 0; font-size: 1.4rem; overflow-wrap: anywhere; }
.task-head-actions, .task-card-tools { display: flex; align-items: center; gap: 10px; }
#task-close { font-size: 1.5rem; line-height: 1; padding: 2px 9px; }
.task-drawer-body { overflow-y: auto; padding: 8px 26px 32px; }
.task-drawer textarea { display: block; width: 100%; border: 1px solid #aab9cb; border-radius: 8px; padding: 10px; background: #fff; color: #203047; font: inherit; resize: vertical; }
.task-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.task-participant-grid { margin-top: 18px; }
.task-participant-grid fieldset { min-width: 0; margin: 0; padding: 10px; border: 1px solid #d8e2ee; border-radius: 9px; }
.task-participant-grid legend { padding: 0 5px; font-size: .9rem; font-weight: 650; }
.task-people-list { max-height: 188px; overflow-y: auto; }
.task-person-choice { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 5px 7px; border-radius: 6px; font-size: .85rem; font-weight: 500; cursor: pointer; }
.task-person-choice:hover, .task-person-choice:focus-within { background: #eef4ff; }
.task-person-choice input { width: 19px; height: 19px; min-height: 0; flex: 0 0 19px; margin: 0; }
.task-checklist-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 23px; }
.task-checklist-heading h3, .task-detail-section h3 { margin: 0; font-size: 1rem; }
.task-check-inputs { display: grid; gap: 8px; margin: 11px 0; }
.task-check-input { display: flex; gap: 8px; }
.task-check-input button { white-space: nowrap; }
.task-drawer-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 23px; }
.task-feedback { margin: 14px 0 0; color: #256842; font-size: .87rem; }
.task-feedback.error { color: #842c22; }
.task-drawer.detail-mode { top: 50%; right: 50%; bottom: auto; width: min(1500px, calc(100vw - 28px)); height: min(940px, calc(100vh - 28px)); transform: translate(50%, -50%); border-radius: 15px; overflow: hidden; }
.task-drawer.detail-mode .task-drawer-head { flex: 0 0 auto; padding: 16px 25px; background: #fff; }
.task-drawer.detail-mode .task-drawer-head .eyebrow { margin-bottom: 3px; }
.task-drawer.detail-mode .task-drawer-body { flex: 1; min-height: 0; padding: 0; overflow: hidden; }
.task-drawer.detail-mode #task-detail { height: 100%; }
.task-detail-layout { display: grid; grid-template-columns: minmax(340px, 43%) minmax(0, 1fr); height: 100%; min-height: 0; }
.task-detail-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #f1f7fa; border-right: 1px solid #dfe8ee; }
.task-detail-scroll { min-height: 0; overflow-y: auto; padding: 19px; display: grid; align-content: start; gap: 14px; }
.task-info-card { background: #fff; border: 1px solid #e3eaf0; border-radius: 13px; padding: 20px 22px; box-shadow: 0 3px 12px #223a5208; }
.task-info-card h3, .task-stream-heading h3 { margin: 0; font-size: 1.03rem; }
.task-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#task-detail button.task-edit-link { min-height: 32px; padding: 3px 7px; border: 0; background: transparent; color: #315fbc; font-size: .78rem; font-weight: 700; }
#task-detail button.task-edit-link:hover { background: #eef4ff; text-decoration: underline; }
.task-detail-status { margin: 0; padding: 5px 11px; color: #315fbc; background: #eaf1ff; border-radius: 99px; font-size: .78rem; font-weight: 750; white-space: nowrap; }
.task-detail-description { margin: 14px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #34445a; line-height: 1.65; }
.task-detail-fields { display: grid; grid-template-columns: 135px minmax(0, 1fr); gap: 17px 13px; margin: 19px 0 0; font-size: .91rem; }
.task-detail-fields dt { color: #748296; }
.task-detail-fields dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; }
.task-check-progress { color: #6c7d93; font-size: .83rem; }
.task-check-item { display: flex; align-items: center; gap: 13px; margin: 0; padding: 15px 0; border-top: 1px solid #edf1f5; font-weight: 400; }
.task-card-heading + #task-detail-checklist { margin-top: 16px; }
.task-check-item input { width: 20px; height: 20px; min-height: 0; flex: 0 0 20px; margin: 0; }
.task-check-item input:checked + span { text-decoration: line-through; color: #8290a2; }
.task-detail-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 13px 19px; border-top: 1px solid #dfe8ee; background: #fff; }
.task-detail-actions select { width: 150px; margin-left: auto; }
.task-detail-actions button { white-space: nowrap; }
.task-detail-stream { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: linear-gradient(135deg, #d5f0ed 0%, #d9eafa 55%, #c6dafa 100%); }
.task-stream-heading { flex: 0 0 auto; padding: 20px 22px 15px; border-bottom: 1px solid #ffffffaa; background: #ffffffd9; }
.task-stream-heading p { margin: 3px 0 0; }
.task-activity-feed { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 13px; }
.task-activity-event { align-self: flex-start; max-width: min(88%, 680px); padding: 12px 15px 10px; border-radius: 14px 14px 14px 3px; background: #fff; box-shadow: 0 2px 10px #26466313; }
.task-activity-event.own { align-self: flex-end; border-radius: 14px 14px 3px 14px; background: #e4ffc5; }
.task-activity-event.system { align-self: center; max-width: 95%; border-radius: 10px; background: #ffffffa8; box-shadow: none; text-align: center; }
.task-activity-event strong, .task-activity-event time { display: block; font-size: .85rem; }
.task-activity-event strong { color: #2467ad; }
.task-activity-event.system strong { color: #44576d; }
.task-activity-event time { color: #8290a1; font-size: .73rem; margin-top: 5px; text-align: right; }
.task-activity-event p { margin: 7px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .91rem; line-height: 1.5; }
.task-comment-form { flex: 0 0 auto; display: flex; align-items: end; gap: 10px; padding: 15px 18px; background: #ffffffeb; border-top: 1px solid #dce7ef; }
.task-comment-form textarea { min-height: 54px; max-height: 160px; resize: vertical; }
.task-comment-form button { flex: 0 0 auto; }
.task-comment-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; white-space: nowrap; }
.task-comment-actions span { color: #718097; font-size: .72rem; }
.task-comment-tools { display: flex; justify-content: flex-end; gap: 7px; margin-top: 9px; }
.task-activity-event button.task-message-action { min-height: 28px; padding: 2px 7px; border: 0; background: transparent; color: #315fbc; font-size: .76rem; }
.task-activity-event button.task-message-action:hover { background: #eef4ff; text-decoration: underline; }
.task-message-edit { display: grid; gap: 7px; margin-top: 9px; }
.task-message-edit textarea { min-height: 80px; }
.task-message-edit-actions { display: flex; justify-content: flex-end; gap: 7px; }
.task-message-deleted { color: #738096; font-style: italic; }
.task-message-edited { color: #7d8ca0; font-size: .73rem; }
.task-detail-feedback { position: absolute; left: 18px; bottom: 72px; z-index: 1; max-width: min(480px, 80%); padding: 9px 13px; border-radius: 8px; background: #e5f4ee; box-shadow: 0 4px 20px #1a31562e; }
.task-detail-feedback.error { background: #fff0ee; }
[hidden] { display: none !important; }
@media (max-width: 1080px) { .management-grid { grid-template-columns: 1fr; } .side { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 920px) { .dashboard-grid { grid-template-columns: 1fr; } .events-card { min-height: 0; } .events-empty { min-height: 150px; } .events-line { top: 22px; bottom: 23px; } }
@media (max-width: 760px) { .app-shell { grid-template-columns: 1fr; } .sidebar { padding: 15px 16px; } .sidebar-profile, .sidebar-footer { display: none; } .nav-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; } .nav-divider { grid-column: 1 / -1; margin: 8px 5px 4px; } .nav-group-title { grid-column: 1 / -1; } .nav-subitem { padding-left: 12px; } .unavailable::after { left: 0; top: calc(100% + 4px); transform: none; } .workspace-content { padding: 24px 16px 40px; } }
@media (max-width: 560px) { .topbar-inner { padding: 0 16px; } .account { gap: 8px; font-size: .8rem; } #account-name { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notification-panel { position: fixed; top: 64px; right: 12px; width: calc(100vw - 24px); } .card { padding: 19px; } .composer { padding: 0; } .composer-tabs { gap: 0 18px; padding: 0 18px; } .composer-audience { padding: 17px 18px; } .composer-actions { padding: 0 18px 18px; } #news-body { min-height: 150px; padding: 18px; } .side { grid-template-columns: 1fr; } #login-view { margin-left: 12px; margin-right: 12px; } }
@media (max-width: 900px) { .task-detail-layout { grid-template-columns: minmax(280px, 44%) minmax(0, 1fr); } .task-detail-actions select { margin-left: 0; } }
@media (max-width: 700px) { .task-drawer.detail-mode { inset: 0; width: 100vw; height: 100dvh; transform: none; border-radius: 0; } .task-drawer.detail-mode .task-drawer-body { overflow-y: auto; } .task-drawer.detail-mode #task-detail { height: auto; } .task-detail-layout { display: block; height: auto; } .task-detail-main { display: block; border-right: 0; } .task-detail-scroll { overflow: visible; padding: 12px; } .task-detail-stream { min-height: 430px; } .task-activity-feed { min-height: 300px; max-height: 55vh; } .task-info-card { padding: 18px; } .task-detail-feedback { position: sticky; bottom: 0; max-width: none; margin: 0; } }
@media (max-width: 700px) { .task-table-wrap { border: 0; background: transparent; box-shadow: none; overflow: visible; } .task-table, .task-table tbody { display: block; min-width: 0; } .task-table thead { display: none; } .task-table tr { display: block; margin-bottom: 12px; padding: 10px 16px; border: 1px solid #e2e8f1; border-radius: 12px; background: #fff; } .task-table td { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border: 0; background: transparent !important; text-align: right; } .task-table td:first-child { display: block; padding-bottom: 12px; border-bottom: 1px solid #e9edf3; text-align: left; } .task-table td:not(:first-child)::before { content: attr(data-label); flex: 0 0 105px; color: #718097; text-align: left; } button.task-row-title { font-size: 1rem !important; } }
@media (max-width: 620px) { .tasks-heading { align-items: flex-start; flex-direction: column; } .task-drawer-head { padding: 17px 18px; } .task-drawer-body { padding: 5px 18px 24px; } .task-form-grid { grid-template-columns: 1fr; gap: 0; } .task-detail-fields { grid-template-columns: 1fr; gap: 3px; } .task-detail-fields dd { margin-bottom: 8px; } .task-detail-actions { padding: 12px; } .task-detail-actions select { width: 100%; order: 3; } .task-detail-actions #task-save-status { order: 4; flex: 1; } .task-comment-form { align-items: stretch; flex-direction: column; } .task-comment-form button { align-self: end; } }

/* ORERO REST.FAMILY: shared visual language for the entire CRM. */
:root {
  --orero-ink: #242a20;
  --orero-olive: #3c4930;
  --orero-olive-hover: #2e3925;
  --orero-lime: #d4deaa;
  --orero-paper: #fffef9;
  --orero-ground: #f1f0e8;
  --orero-line: #dcdfd1;
  --orero-muted: #666d60;
  color: var(--orero-ink);
  background: var(--orero-ground);
  font-family: Arial, Helvetica, sans-serif;
}
body { background: var(--orero-ground); }
.topbar { height: 78px; background: #1b2018; border-bottom-color: #38402f; }
.topbar-inner { padding-inline: clamp(18px, 2.3vw, 38px); }
.brand { display: inline-flex; align-items: baseline; gap: 11px; color: #f1eee5; font-size: 1.6rem; letter-spacing: .17em; font-weight: 700; line-height: 1; }
.brand span { color: inherit; }
.brand-family { color: var(--orero-lime); font-size: .58rem; letter-spacing: .19em; font-weight: 600; }
.account { color: #e0e4d5; }
#notifications-toggle { background: #2a3125; border-color: #48533b; color: var(--orero-lime); }
#notifications-toggle:hover, #notifications-toggle[aria-expanded="true"] { background: #3b4630; }
.notification-count { background: #ba643d; color: #fff; }
.notification-panel { background: var(--orero-paper); border-color: var(--orero-line); box-shadow: 0 18px 50px #10170c40; color: var(--orero-ink); }
.notification-heading { border-color: var(--orero-line); }
#notification-close { color: var(--orero-muted); }
#notification-close:hover { background: #edf0df; }
.notification-status, .notification-item span { color: var(--orero-muted); }
#notification-list .notification-item { background: var(--orero-paper); border-color: var(--orero-line); color: var(--orero-ink); }
#notification-list .notification-item:hover { background: #f1f3e6; }
#notification-list .notification-item.unread { background: #e9edd6; }
.page { min-height: calc(100vh - 78px); }
.app-shell { min-height: calc(100vh - 78px); grid-template-columns: 256px minmax(0, 1fr); }
.sidebar { background: linear-gradient(160deg, #252d21, #171d15); color: #ecefe3; border-right: 1px solid #3b4534; }
.sidebar-profile { border-bottom-color: #ffffff25; }
.sidebar-profile span { color: #bbc5aa; }
.profile-initial { background: var(--orero-lime); color: #293522; border-radius: 50%; }
.nav-item, .nav-subitem { color: #e6eadd; border-radius: 6px; }
button.nav-item:hover, .nav-item.current { background: #d4deaa1d; color: #fff; }
.nav-item.current { box-shadow: inset 3px 0 var(--orero-lime); }
.nav-icon { background: #d4deaa16; color: var(--orero-lime); }
.sidebar .unavailable { color: #aeb9a5; }
.sidebar .unavailable:hover, .sidebar .unavailable:focus-visible { background: #d4deaa11; }
.nav-group-title { color: #edf0e4; }
.soon { color: var(--orero-lime); }
.sidebar-footer { color: #aeb9a5; line-height: 1.7; border-top: 1px solid #ffffff20; }
.workspace-content { padding-top: 42px; }
.card { background: var(--orero-paper); border-color: var(--orero-line); border-radius: 9px; box-shadow: 0 9px 26px #30392309; }
.narrow { max-width: 470px; }
#login-view { margin-top: min(12vh, 100px); padding: 34px; border-top: 4px solid var(--orero-olive); box-shadow: 0 20px 65px #28321c1a; }
#loading { margin-top: min(12vh, 100px); }
body:has(#login-view:not([hidden])) .page { background: radial-gradient(circle at 80% 20%, #dde4c3 0, transparent 36%), var(--orero-ground); padding: 1px 12px 60px; }
h1 { color: var(--orero-ink); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2rem, 3vw, 2.65rem); font-weight: 400; letter-spacing: -.04em; }
h2, h3 { color: var(--orero-ink); }
.eyebrow { color: var(--theme-accent); letter-spacing: .18em; font-size: .67rem; }
.muted { color: var(--orero-muted); }
label { color: #394233; }
input, select, .task-drawer textarea { background: var(--theme-input); border-color: var(--theme-input-border); color: var(--orero-ink); border-radius: 5px; }
:where(button:not(.nav-item):not(.employee)) { background: var(--orero-olive); border-color: var(--orero-olive); color: var(--theme-on-accent); border-radius: var(--radius-md); }
:where(button:not(.nav-item):not(.employee)):hover { background: var(--orero-olive-hover); }
:where(button:not(.nav-item):not(.employee)).secondary { background: var(--orero-paper); border-color: #819071; color: var(--orero-olive); }
:where(button:not(.nav-item):not(.employee)).secondary:hover { background: #edf0df; }
:where(button:not(.nav-item):not(.employee)).quiet { background: #303a2a; border-color: #57674b; color: #eef1e4; }
:where(button:not(.nav-item):not(.employee)).quiet:hover { background: #43513b; }
.task-drawer button:not(.nav-item):not(.employee).quiet { background: #f1f3e8; border-color: var(--orero-line); color: var(--orero-olive); }
#notice, .task-detail-feedback { background: #e9f1db; color: #38522e; border-color: #b9d0a6; }
#notice.error, .task-detail-feedback.error { background: #fff0eb; color: #853a28; border-color: #e1b2a5; }
.page-heading, .tasks-heading { padding-bottom: 13px; border-bottom: 1px solid var(--orero-line); }
.page-heading .muted, .tasks-heading .muted { font-size: .9rem; }
#news-expand { background: var(--orero-paper); color: #727b6e; border-radius: 9px; }
#news-expand:hover { background: #f5f6ed; }
.compose-avatar, .news-avatar, .calendar-mark { background: #e9edd8; color: var(--orero-olive); }
.expand-mark { color: var(--orero-olive); }
.composer-tabs, .composer-tools { border-color: var(--orero-line); }
.composer-tab { color: #747b6f; }
.composer-tab.selected { color: var(--orero-olive); box-shadow: inset 0 -2px var(--orero-olive); }
#news-collapse { color: var(--orero-muted); }
#news-collapse:hover { background: #eef1df; }
#news-body { background: var(--orero-paper); color: var(--orero-ink); }
.mention-menu { background: var(--orero-paper); border-color: var(--orero-line); box-shadow: 0 9px 24px #202a1830; }
.mention-menu p, .mention-option span { color: var(--orero-muted); }
#mention-menu .mention-option { background: var(--orero-paper); color: var(--orero-ink); }
#mention-menu .mention-option:hover, #mention-menu .mention-option:focus-visible { background: #edf1dc; }
#mention-trigger, .audience-add { color: var(--orero-olive); }
#mention-trigger:hover { color: var(--orero-olive-hover); }
.audience-chip { background: var(--orero-lime); color: #303d24; }
#news-form .composer-submit { background: var(--orero-olive); border-color: var(--orero-olive); }
#news-form .composer-submit:hover { background: var(--orero-olive-hover); }
#news-form .composer-cancel { background: transparent; color: var(--orero-muted); }
#news-form .composer-cancel:hover { background: #edf0df; }
.news-status, .news-empty, .events-empty span:last-child { color: var(--orero-muted); }
.news-empty h3 { color: var(--orero-ink); }
.news-author time { color: var(--orero-muted); }
.today-date { color: var(--orero-muted); border-color: var(--orero-line); }
.events-line { background: #d3ddbc; }
.events-line::before { background: #8fa465; }
.employee, .department-card { background: var(--theme-soft); border-color: var(--orero-line); border-radius: 6px; }
button.employee:hover { background: #edf1dc; }
.employee span, .department-card p { color: var(--orero-muted); }
.tag { color: #675025; background: #f3e6c7; }
.department-meta span { background: #e9edd8; color: var(--orero-olive); }
:is(#task-create,#project-add), :is(#task-create,#project-add):hover { background: var(--orero-olive); border-color: var(--orero-olive); }
:is(#task-create,#project-add):hover { background: var(--orero-olive-hover); }
.tasks-status { color: var(--orero-muted); }
.task-table th { color: #596552; border-color: var(--orero-line); background: var(--theme-soft); }
.task-table td { color: #414a3e; border-color: var(--orero-line); }
.task-table tbody tr:hover { background: #f5f7ea; }
.task-table th:nth-child(2), .task-activity-cell { background: #edf1de; }
button.task-row-title { color: var(--theme-accent); }
button.task-row-title:hover { color: var(--orero-olive-hover); }
.task-row-status, .task-detail-status { background: var(--theme-hover); color: #415b30; }
.task-backdrop { background: #111a0eb8; }
.task-drawer { background: var(--orero-paper); box-shadow: -18px 0 60px #0c160b61; }
.task-drawer-head, .task-drawer.detail-mode .task-drawer-head { background: var(--orero-paper); border-color: var(--orero-line); }
.task-participant-grid fieldset { border-color: var(--orero-line); }
.task-person-choice:hover, .task-person-choice:focus-within { background: #edf1dc; }
.task-drawer.detail-mode { border-radius: 9px; }
.task-detail-main { background: #f0f2e8; border-color: var(--orero-line); }
.task-info-card { background: var(--orero-paper); border-color: var(--orero-line); border-radius: 8px; box-shadow: 0 3px 10px #27301e0a; }
#task-detail button.task-edit-link { color: #415b30; }
#task-detail button.task-edit-link:hover { background: var(--theme-hover); }
.task-activity-event button.task-message-action {
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid #b7c4a7;
  background: #f8faee;
  color: #304128;
  font-size: .82rem;
}
.task-activity-event button.task-message-action:hover,
.task-activity-event button.task-message-action:focus-visible { background: var(--theme-hover); color: #26391f; }
.task-comment-tools { flex-wrap: wrap; }
.task-detail-description { color: #41493e; }
.task-detail-fields dt, .task-check-progress { color: var(--orero-muted); }
.task-check-item { border-color: var(--orero-line); }
.task-detail-actions { background: var(--orero-paper); border-color: var(--orero-line); }
.task-detail-stream { background: linear-gradient(145deg, #e8ecda, #d8e0c8); }
.task-stream-heading { background: #fffef9e8; border-color: var(--orero-line); }
.task-activity-event { background: var(--orero-paper); box-shadow: 0 2px 10px #2b3b1d14; }
.task-activity-event.own { background: #edf4d4; }
.task-activity-event.system { background: #fffef9b8; }
.task-activity-event strong { color: #415b30; }
.task-activity-event.system strong { color: #505a49; }
.task-activity-event time, .task-message-deleted, .task-message-edited { color: var(--orero-muted); }
.task-comment-form { background: #fffef9f2; border-color: var(--orero-line); }
.task-comment-actions span { color: var(--orero-muted); }
.unavailable::after { background: var(--orero-paper); color: var(--orero-ink); border-color: var(--orero-line); box-shadow: 0 6px 20px #1f2a1730; }
.news-feedback, .task-feedback { color: #416034; }
.news-feedback.error, .task-feedback.error, .news-status.error, .tasks-status.error { color: #853a28; border-color: #e1b2a5; }
.task-overdue { color: #853a28; background: #fff0eb; }
@media (max-width: 760px) { .app-shell { grid-template-columns: 1fr; } .sidebar { border-right: 0; border-bottom: 1px solid #3b4534; } .workspace-content { padding-top: 28px; } }
@media (max-width: 700px) { .task-table tr { border-color: var(--orero-line); background: var(--orero-paper); } .task-table td:first-child { border-color: var(--orero-line); } .task-table td:not(:first-child)::before { color: var(--orero-muted); } }
@media (max-width: 560px) { .topbar { height: 68px; } .brand { gap: 6px; font-size: 1.1rem; letter-spacing: .1em; } .brand-family { font-size: .46rem; letter-spacing: .08em; } #account-name { display: none; } .notification-panel { top: 70px; } #login-view { padding: 26px 20px; } }

/* Wide task creation and section-level editing. */
.task-drawer.form-mode {
  top: 50%; right: 50%; bottom: auto;
  width: min(1500px, calc(100vw - 40px));
  height: min(1040px, calc(100dvh - 40px));
  transform: translate(50%, -50%);
  border-radius: 9px;
  overflow: hidden;
}
.task-drawer.form-mode .task-drawer-body { flex: 1; min-height: 0; padding: 0; overflow: hidden; }
#task-form { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.task-form-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr); flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 20px; }
.task-form-main, .task-form-side { min-width: 0; padding: 26px 30px; }
.task-form-main > label:first-child, .task-form-side > .task-form-grid:first-child label { margin-top: 0; }
.task-form-main #task-description { min-height: 220px; }
.task-form-side { border-left: 1px solid var(--orero-line); }
.task-form-side .task-participant-grid { margin-top: 24px; }
.task-role-hint { margin: 10px 0 20px; color: var(--orero-muted); font-size: .8rem; }
.task-form-footer { flex-shrink: 0; border-top: 1px solid var(--orero-line); padding: 16px 30px; background: var(--orero-paper); }
.task-form-footer .task-drawer-actions { justify-content: flex-end; margin-top: 0; }
.task-form-footer .task-feedback:not([hidden]) { margin: 0 0 12px; }
.task-head-title { flex: 1; min-width: 0; }
.task-head-title h2 { overflow-wrap: anywhere; }
.task-inline-form { margin-top: 15px; }
.task-inline-form label:first-child { margin-top: 0; }
.task-inline-form .task-form-grid label { margin-top: 12px; }
.task-inline-form .task-participant-grid { margin-top: 16px; }
.task-inline-form .task-people-list { max-height: 160px; }
.task-inline-form .task-check-inputs { margin: 0 0 12px; }
.task-inline-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.task-inline-feedback { margin: 10px 0 0; color: #416034; font-size: .84rem; }
.task-inline-feedback.error { color: #853a28; }
.task-description-card .task-inline-form textarea { min-height: 150px; }
@media (max-width: 1000px) {
  .task-form-layout { grid-template-columns: 1fr; align-content: start; }
  .task-form-side { border-left: 0; border-top: 1px solid var(--orero-line); }
}
@media (max-width: 700px) {
  .task-drawer.form-mode { inset: 8px; width: calc(100vw - 16px); height: calc(100dvh - 16px); transform: none; border-radius: 12px; }
  .task-form-main, .task-form-side { padding: 18px; }
  .task-form-footer { padding: 12px 18px; }
  .task-form-footer .task-drawer-actions > button { min-height: 44px; flex: 1; }
  .task-inline-form .task-form-grid { grid-template-columns: 1fr; }
}

button.person-mention:not(.nav-item):not(.employee) { display: inline; min-height: 0; min-width: 0; margin: 0; padding: 0 2px; border: 0; border-radius: 3px; background: var(--theme-soft); color: var(--theme-accent); font: inherit; font-weight: 600; line-height: inherit; text-align: inherit; white-space: normal; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
button.person-mention:hover:not(.nav-item):not(.employee) { color: var(--orero-olive-hover); background: var(--theme-hover); }
.universal-mention-menu { display: grid; gap: 3px; min-width: 0; width: 100%; max-height: 210px; overflow-y: auto; padding: 7px; border: 1px solid var(--orero-line); border-radius: 8px; background: var(--orero-paper); box-shadow: 0 5px 15px #26351b20; color: var(--orero-ink); font-size: .86rem; }
.universal-mention-menu button.mention-option:not(.nav-item):not(.employee) { display: block; width: 100%; min-height: 42px; padding: 9px 10px; border: 0; background: transparent; color: var(--theme-accent); text-align: left; white-space: normal; overflow-wrap: anywhere; }
.universal-mention-menu button.mention-option:hover:not(.nav-item):not(.employee), .universal-mention-menu button.mention-option:focus-visible { background: var(--theme-hover); }

/* Personal profile and avatars throughout activity views. */
#profile-toggle { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 3px 8px; border: 1px solid transparent; background: transparent; color: #f1eee5; font-weight: 650; }
#profile-toggle:hover, #profile-toggle:focus-visible { border-color: #667553; background: #303a2a; }
.profile-avatar-small, .profile-initial, .news-avatar, .person-avatar, .profile-photo { display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border-radius: 50%; background: var(--orero-lime); color: #283820; font-weight: 750; }
.profile-avatar-small { width: 34px; height: 34px; }
.person-avatar { width: 28px; height: 28px; font-size: .75rem; }
.profile-photo { width: 96px; height: 96px; font-size: 2rem; }
.profile-avatar-small img, .profile-initial img, .news-avatar img, .person-avatar img, .profile-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.person-label, .task-event-actor, .employee-identity { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.person-label > span:last-child { overflow-wrap: anywhere; }
.task-people-labels { display: flex; flex-wrap: wrap; gap: 8px 13px; }
.task-event-actor { display: flex; }
.task-event-actor strong { min-width: 0; overflow-wrap: anywhere; }
.employee-identity { display: flex; text-align: left; }
.employee-identity > span:last-child { min-width: 0; }
.employee .person-avatar { display: grid; width: 34px; height: 34px; }
.profile-open { overflow: hidden; }
.profile-backdrop { position: fixed; inset: 0; z-index: 29; background: #10170dbb; }
.profile-dialog { position: fixed; z-index: 30; top: 50%; left: 50%; width: min(700px, calc(100vw - 28px)); max-height: min(850px, calc(100dvh - 28px)); transform: translate(-50%, -50%); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--orero-line); border-radius: 10px; background: var(--orero-paper); box-shadow: 0 25px 80px #10170d66; }
.profile-dialog-head { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding: 20px 28px; border-bottom: 1px solid var(--orero-line); }
.profile-dialog-head h2 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 1.6rem; font-weight: 400; }
.profile-dialog button#profile-close { min-width: 40px; min-height: 40px; padding: 0; background: #edf0df; border-color: var(--orero-line); color: var(--orero-olive); font-size: 1.5rem; }
.profile-dialog-body { min-height: 0; overflow-y: auto; padding: 25px 28px 30px; }
.profile-hero { display: flex; align-items: center; gap: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--orero-line); }
.profile-hero h3 { margin: 0 0 5px; font-family: Georgia, 'Times New Roman', serif; font-size: 1.55rem; font-weight: 400; }
.profile-hero p { margin: 0; }
.profile-details { display: grid; grid-template-columns: 155px minmax(0, 1fr); gap: 0 20px; margin: 6px 0 24px; }
.profile-details dt, .profile-details dd { padding: 12px 0; border-bottom: 1px solid var(--orero-line); }
.profile-details dt { color: var(--orero-muted); }
.profile-details dd { margin: 0; font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
.profile-status { margin: 16px 0 4px; padding: 10px 13px; border-radius: 6px; background: #e9f1db; color: #38522e; }
.profile-status.error { background: #fff0eb; color: #853a28; }
.profile-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#profile-form textarea { display: block; width: 100%; min-height: 110px; padding: 10px; resize: vertical; border: 1px solid var(--theme-input-border); border-radius: 5px; background: var(--theme-input); color: var(--orero-ink); font: inherit; }
#profile-avatar-file { padding: 8px; }
.profile-hint { margin: 5px 0 0; color: var(--orero-muted); font-size: .8rem; }
.profile-form-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 23px; }
@media (max-width: 560px) {
  #profile-toggle { padding: 3px; }
  .profile-dialog { inset: 0; width: 100vw; max-height: 100dvh; height: 100dvh; transform: none; border-radius: 0; }
  .profile-dialog-head, .profile-dialog-body { padding-inline: 18px; }
  .profile-hero { gap: 15px; }
  .profile-photo { width: 74px; height: 74px; }
  .profile-details { grid-template-columns: 120px minmax(0, 1fr); gap: 0 10px; font-size: .9rem; }
  .profile-form-grid { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 420px) { .brand-family { display: none; } .topbar-inner { gap: 8px; } }

/* Employee directory and departments share the full workspace width. */
.employee-section, .department-section { width: 100%; margin-top: 18px; }
.employee-section .section-heading, .department-section .section-heading { align-items: center; gap: 16px; }
.employee-columns, .employee-list .employee { display: grid; grid-template-columns: minmax(240px, 2fr) minmax(150px, 1fr) minmax(150px, 1fr) 112px; align-items: center; gap: 18px; }
.employee-columns { padding: 12px 16px; color: var(--orero-muted); font-size: .8rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--orero-line); }
.employee-list { gap: 0; }
.employee-list .employee { width: 100%; padding: 16px; border: 0; border-bottom: 1px solid var(--orero-line); border-radius: 0; background: transparent; }
.employee-list .employee:last-child { border-bottom: 0; }
.employee-identity { min-width: 0; }
.employee-name { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.employee-name strong { display: block; color: var(--orero-ink); font-size: 1rem; line-height: 1.4; white-space: normal; overflow: visible; text-overflow: clip; }
.employee-department, .employee-position { min-width: 0; font-size: .94rem !important; line-height: 1.4; overflow-wrap: anywhere; }
.employee-action { display: flex !important; justify-content: flex-end; }
.employee-action button { min-height: 38px !important; padding: 6px 10px !important; }
.employee-name .tag { margin-top: 6px; }
.structure-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.employee-dialog-open { overflow: hidden; }
.employee-backdrop { position: fixed; inset: 0; z-index: 27; background: #10170dbb; }
.employee-dialog { position: fixed; z-index: 28; top: 50%; left: 50%; width: min(760px, calc(100vw - 28px)); max-height: min(820px, calc(100dvh - 28px)); transform: translate(-50%, -50%); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--orero-line); border-radius: 10px; background: var(--orero-paper); box-shadow: 0 25px 80px #10170d66; }
.employee-dialog-head { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding: 20px 28px; border-bottom: 1px solid var(--orero-line); }
.employee-dialog-head h2 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 1.6rem; font-weight: 400; overflow-wrap: anywhere; }
.employee-dialog #employee-close { min-width: 40px; min-height: 40px; padding: 0; font-size: 1.5rem; }
.employee-dialog-body { min-height: 0; overflow-y: auto; padding: 22px 28px 28px; }
.employee-dialog-body > p:first-child { margin: 0 0 14px; }
.employee-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.employee-feedback { padding: 10px 13px; border-radius: 6px; background: #e9f1db; color: #38522e; }
.employee-feedback.error { background: #fff0eb; color: #853a28; }
.employee-dialog-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; margin-top: 24px; }
@media (max-width: 880px) {
  .employee-columns, .employee-list .employee { grid-template-columns: minmax(200px, 1.5fr) minmax(130px, 1fr) minmax(130px, 1fr) 100px; gap: 10px; }
}
@media (max-width: 700px) {
  .employee-columns { display: none; }
  .employee-list .employee { grid-template-columns: minmax(0, 1fr) auto; gap: 9px 12px; padding: 16px 0; }
  .employee-identity { grid-column: 1 / -1; }
  .employee-department, .employee-position { grid-column: 1; display: flex !important; gap: 8px; }
  .employee-department::before, .employee-position::before { content: attr(data-label) ':'; min-width: 92px; color: var(--orero-muted); font-weight: 600; }
  .employee-action { grid-column: 2; grid-row: 2 / 4; align-self: center; }
}
@media (max-width: 560px) {
  .employee-dialog { inset: 0; width: 100vw; max-height: 100dvh; height: 100dvh; transform: none; border-radius: 0; }
  .employee-dialog-head, .employee-dialog-body { padding-inline: 18px; }
  .employee-form-grid { grid-template-columns: 1fr; }
  .employee-section .section-heading { flex-wrap: wrap; }
}

.roles-section { margin-top: 18px; }
.roles-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.role-card { min-width: 0; padding: 20px; border: 1px solid var(--orero-line); border-radius: 8px; background: var(--theme-soft); }
.role-card h3 { margin: 0 0 5px; font-size: 1.08rem; }
.role-card > p { margin: 0 0 15px; }
.role-permission { display: flex; align-items: flex-start; gap: 11px; margin: 0; padding: 10px 0; border-top: 1px solid var(--orero-line); font-size: .88rem; }
.role-permission input { width: 19px; height: 19px; min-height: 19px; margin: 1px 0 0; flex: 0 0 auto; }
.role-permission strong, .role-permission small { display: block; }
.role-permission small { margin-top: 3px; color: var(--orero-muted); line-height: 1.35; }
.role-card button[type="submit"] { margin-top: 18px; width: 100%; }
.role-card .employee-feedback { margin: 15px 0 0; }
.role-create-form { padding: 18px; margin: 16px 0; background: var(--theme-soft); border: 1px solid var(--orero-line); border-radius: 8px; }
.role-create-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: end; }
.role-create-actions input { flex: 1 1 220px; }
.role-create-form .employee-feedback { margin-top: 10px; }
.window-head-actions { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.window-minimize { min-width: 40px; min-height: 40px; padding: 0 10px; font-size: 1.45rem; line-height: 1; }
.employee-dialog, .profile-dialog, .task-drawer { transition: opacity .27s ease, scale .27s cubic-bezier(.2,.8,.2,1), translate .27s cubic-bezier(.2,.8,.2,1); }
.employee-dialog.window-minimizing, .profile-dialog.window-minimizing, .task-drawer.window-minimizing,
.employee-dialog.window-restoring, .profile-dialog.window-restoring, .task-drawer.window-restoring { opacity: 0; scale: .85; translate: 22vw 35vh; pointer-events: none; }
.employee-backdrop, .profile-backdrop, .task-backdrop { transition: opacity .27s ease; }
.window-backdrop-fading { opacity: 0; pointer-events: none; }
.window-tray { position: fixed; z-index: 45; right: 16px; bottom: 16px; display: flex; gap: 9px; flex-wrap: wrap; justify-content: flex-end; max-width: min(90vw, 620px); }
:where(.window-tray)[popover] { top:auto;left:auto;margin:0;width:auto;height:auto;border:0;padding:0;overflow:visible;background:transparent;color:inherit; }
.window-tray-item { max-width: min(70vw, 270px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 12px 18px; border: 1px solid #9fb080; border-radius: 12px; background: #263821; color: #fff; box-shadow: 0 12px 32px #0d1a0b55; animation: tray-appear .27s ease both; }
.window-tray-item:hover, .window-tray-item:focus-visible { background: #3a512d; color: #fff; }
@keyframes tray-appear { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { #notice, .employee-feedback, .task-feedback, .profile-status, .employee-dialog, .profile-dialog, .task-drawer, .employee-backdrop, .profile-backdrop, .task-backdrop { transition-duration: .01ms; } .window-tray-item { animation-duration: .01ms; } }
@media (max-width: 560px) { .window-tray { left: 12px; right: 12px; bottom: 12px; } .window-tray-item { flex: 1 1 100%; max-width: none; } .news-author { align-items: flex-start; flex-wrap: wrap; } .news-post-actions { width: 100%; padding-left: 51px; } }
.news-post-actions button:not(.nav-item):not(.employee).news-icon-action { width: 38px; height: 38px; min-height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #657360; transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease; }
.news-post-actions button:not(.nav-item):not(.employee).news-icon-action:hover,
.news-post-actions button:not(.nav-item):not(.employee).news-icon-action:focus-visible { background: #edf2e4; border-color: #cbd5bc; color: #304626; transform: translateY(-1px); }
.news-post-actions button:not(.nav-item):not(.employee).news-icon-delete:hover,
.news-post-actions button:not(.nav-item):not(.employee).news-icon-delete:focus-visible { background: #fff0eb; border-color: #e4bdb1; color: #9a422e; }
@media (prefers-reduced-motion: reduce) { .news-post-actions button:not(.nav-item):not(.employee).news-icon-action { transition-duration: .01ms; } }
.department-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.department-card-head h3 { margin: 0 0 8px; overflow-wrap: anywhere; }
.department-card button.department-edit { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 6px; background: #edf1df; border-color: var(--orero-line); color: var(--orero-olive); }
.department-card button.department-edit:hover { background: var(--theme-hover); color: #273d20; }
.module-fieldset { margin: 24px 0 0; padding: 14px 18px; border: 1px solid var(--orero-line); border-radius: 7px; }
.module-fieldset legend { padding: 0 5px; font-weight: 700; }
.module-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.module-option { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 0; font-weight: 500; }
.module-option input { width: 19px; height: 19px; min-height: 19px; flex: 0 0 auto; }
.employee-profile-section { margin-top: 25px; padding-top: 24px; border-top: 1px solid var(--orero-line); }
.employee-profile-section h3 { margin: 0 0 4px; font-size: 1.1rem; }
.employee-profile-section > p { margin: 0 0 16px; }
#employee-profile-form textarea { display: block; width: 100%; min-height: 105px; padding: 10px; resize: vertical; border: 1px solid var(--theme-input-border); border-radius: 5px; background: var(--theme-input); color: var(--orero-ink); font: inherit; }
@media (max-width: 560px) { .module-options { grid-template-columns: 1fr; } .role-card { padding: 16px; } }
.task-filters { padding: 16px; margin-bottom: 14px; }
.task-filter-main { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(140px, 170px) minmax(150px, 190px) auto auto; gap: 9px; align-items: center; }
.task-filter-main input, .task-filter-main select { margin: 0; }
.task-filter-main button { white-space: nowrap; }
.task-filter-extra { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 9px; border-top: 1px solid var(--orero-line); margin-top: 15px; padding-top: 11px; }
.task-filter-extra label { margin: 0; color: var(--orero-muted); font-size: .79rem; }
.task-filter-extra input { margin-top: 5px; }
.task-mobile-sort { display: none; }
.task-table button.task-sort:not(.nav-item):not(.employee) { display: inline-flex; align-items: center; gap: 6px; min-height: 35px; padding: 4px 7px; margin: -4px -7px; border: 0; background: transparent; color: inherit; font-size: inherit; font-weight: inherit; text-align: left; }
.task-table button.task-sort:not(.nav-item):not(.employee):hover { background: var(--theme-hover); color: var(--orero-olive-hover); }
.task-sort span { color: var(--theme-accent); font-size: 1rem; }
.task-pagination { display: flex; align-items: center; justify-content: space-between; gap: 15px; flex-wrap: wrap; padding: 16px 4px 8px; color: var(--orero-muted); font-size: .87rem; }
.task-pagination label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: inherit; }
.task-pagination select { width: auto; min-width: 68px; }
.task-page-actions { display: flex; align-items: center; gap: 8px; }
.task-page-actions button { min-width: 42px; padding: 5px 10px; font-size: 1.3rem; line-height: 1; }
.task-page-actions button:disabled { opacity: .45; cursor: default; }
@media (max-width: 1100px) { .task-filter-main { grid-template-columns: minmax(180px, 1fr) minmax(130px, 160px) minmax(150px, 180px); } .task-filter-extra { grid-template-columns: repeat(2, minmax(150px, 1fr)); } }
@media (max-width: 700px) { .task-filter-main { grid-template-columns: repeat(2, minmax(0, 1fr)); } .task-filter-main #task-search { grid-column: 1 / -1; } .task-filter-main select { min-width: 0; } .task-filter-extra { grid-template-columns: 1fr; } .task-mobile-sort { display: flex; align-items: center; gap: 9px; margin-top: 14px; } .task-mobile-sort label { flex: 0 0 auto; margin: 0; font-size: .82rem; } .task-mobile-sort select { min-width: 0; } .task-pagination { justify-content: center; } }
@media (max-width: 420px) { .task-filter-main { grid-template-columns: 1fr 1fr; } .task-filter-main select { grid-column: 1 / -1; } .task-pagination { justify-content: space-between; } }
.composer-tabs button.composer-tab:not(.nav-item):not(.employee) { min-height: 55px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--orero-muted); font-size: .8rem; }
.composer-tabs button.composer-tab.selected:not(.nav-item):not(.employee) { color: var(--theme-accent); box-shadow: inset 0 -2px #71854c; }
.composer-tabs button.composer-tab:hover:not(.nav-item):not(.employee) { color: var(--orero-olive-hover); background: transparent; }
.composer-tabs { gap: 0 22px; }
.news-extra-fields { margin: 0 22px 18px; padding: 15px; border: 1px solid var(--orero-line); border-radius: 8px; background: var(--theme-soft); }
.news-extra-fields label:first-child { margin-top: 0; }
.news-extra-fields textarea { display: block; width: 100%; min-height: 85px; padding: 10px; resize: vertical; border: 1px solid var(--theme-input-border); border-radius: 5px; background: var(--orero-paper); color: var(--orero-ink); font: inherit; }
.news-extra-fields p { margin-top: 0; }
.news-extra-fields input[type="file"] { min-width: 0; font-size: .82rem; }
#news-poll-options label { display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; align-items: center; }
#news-poll-options input { grid-column: 1; }
#news-poll-options button { grid-column: 2; grid-row: 2; }
#news-form button.composer-tool-button:not(.nav-item):not(.employee) { min-height: 38px; padding: 4px 0; border: 0; background: transparent; color: var(--theme-accent); font-size: .83rem; }
#news-form button.composer-tool-button:hover:not(.nav-item):not(.employee) { color: var(--orero-olive-hover); text-decoration: underline; }
.composer-audience label { margin: 0; }
.composer-audience select { flex: 1 1 220px; width: auto; background: var(--theme-soft); }
.news-emoji-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(36px, 1fr)); gap: 4px; width: min(460px, calc(100% - 36px)); padding: 10px; margin: 0 18px 18px; border: 1px solid var(--orero-line); border-radius: 10px; background: var(--orero-paper); box-shadow: 0 8px 20px #25311c14; }
.news-emoji-panel button:not(.nav-item):not(.employee) { display: grid; place-items: center; min-height: 40px; width: 100%; padding: 0; border: 0; background: transparent; color: var(--orero-ink); font-size: 1.45rem; }
.news-emoji-panel button:hover:not(.nav-item):not(.employee) { background: var(--theme-hover); }
.news-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0 0 16px; padding: 15px; }
.news-filters input, .news-filters select { min-width: 0; }
.news-filters > button[type="submit"] { margin-top: 0; }
.news-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 17px 0 6px; color: var(--orero-muted); font-size: .83rem; }
.news-pagination label { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: inherit; }
.news-pagination select { width: auto; min-width: 64px; }
.news-page-actions { display: flex; align-items: center; gap: 8px; }
.news-page-actions button { min-width: 42px; padding: 5px 10px; font-size: 1.3rem; }
.news-page-actions button:disabled { cursor: default; opacity: .45; }
.news-kind-badge { display: inline-flex; width: fit-content; gap: 5px; margin-top: 8px; padding: 3px 8px; border-radius: 5px; color: var(--theme-accent); background: var(--theme-soft); font-size: .66rem; letter-spacing: .07em; font-weight: 750; }
.news-kind-badge.event { color: var(--theme-warning); background: var(--theme-warning-bg); }
.news-post-audience { display: block; margin-top: 5px; color: var(--orero-muted); font-size: .76rem; }
.news-event-detail { display: grid; gap: 6px; padding: 17px 19px; margin-bottom: 18px; border-left: 4px solid #9b7d45; border-radius: 5px; background: var(--theme-warning-bg); }
.news-event-detail strong { font-size: 1.1rem; }
.news-event-detail span { font-size: .86rem; color: var(--theme-warning); }
.news-quote { margin: 0 0 18px; padding: 13px 17px; border-left: 3px solid #91a36b; background: #f1f4e7; color: #566349; white-space: pre-wrap; overflow-wrap: anywhere; }
.news-quote cite { display: block; margin-top: 7px; font-size: .83rem; }
.news-files { display: grid; gap: 7px; margin-top: 20px; }
.news-files a { display: block; padding: 12px 14px; border: 1px solid var(--orero-line); border-radius: 7px; background: var(--theme-soft); color: var(--theme-accent); text-decoration: none; overflow-wrap: anywhere; }
.news-files a:hover { background: var(--theme-hover); }
.news-poll { margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--orero-line); }
.news-poll-vote label { display: flex; align-items: center; gap: 11px; min-height: 44px; margin: 4px 0; padding: 8px 10px; border-radius: 6px; background: var(--theme-soft); font-weight: 500; }
.news-poll-vote input { min-height: 20px; width: 20px; height: 20px; flex: 0 0 20px; accent-color: #576e3c; }
.news-poll-result { display: grid; gap: 6px; margin: 12px 0; font-size: .88rem; }
.news-poll-bar { appearance: none; display: block; width: 100%; height: 9px; border: 0; border-radius: 8px; overflow: hidden; background: #e6ebdb; accent-color: #788f51; }
.news-poll-bar::-webkit-progress-bar { background: #e6ebdb; }
.news-poll-bar::-webkit-progress-value { background: #788f51; border-radius: 8px; }
.news-poll-bar::-moz-progress-bar { background: #788f51; }
.events-list { display: grid; gap: 10px; padding-top: 15px; }
.events-list .upcoming-event:not(.nav-item):not(.employee) { display: grid; gap: 6px; padding: 13px; border: 1px solid var(--orero-line); border-left: 3px solid #9b7d45; background: #f8f5ec; color: var(--orero-ink); text-align: left; }
.events-list .upcoming-event:hover:not(.nav-item):not(.employee) { background: #eeeadc; }
.upcoming-event span { color: var(--orero-muted); font-weight: 400; font-size: .8rem; }
.news-poll-vote label, .news-event-detail strong, .upcoming-event strong { overflow-wrap: anywhere; }
@media (max-width: 620px) { .news-extra-fields { margin-left: 15px; margin-right: 15px; padding: 12px; } .composer-tabs { gap: 0 15px; padding: 0 18px; } }
@media (max-width: 420px) { .news-filters { grid-template-columns: 1fr 1fr; } .news-filters input, .news-filters select { grid-column: 1 / -1; } .news-pagination { justify-content: center; } }

button.news-search-toggle:not(.nav-item):not(.employee) { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 16px; margin-bottom: 12px; border: 1px solid var(--orero-line); background: var(--orero-paper); color: var(--theme-accent); text-align: left; }
.news-search-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.news-search-toggle > span:last-child { margin-left: auto; }
.news-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
button.news-tag:not(.nav-item):not(.employee) { border: 0; background: var(--theme-soft); color: var(--theme-accent); min-height: 34px; padding: 6px 10px; border-radius: 16px; font-size: .78rem; overflow-wrap: anywhere; }
button.message-reply-action:not(.nav-item):not(.employee) { border: 0; background: transparent; color: var(--theme-accent); font-size: .75rem; padding: 6px 8px; min-height: 36px; white-space: nowrap; }
.news-post-actions { flex-wrap: wrap; }
.reply-draft { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-left: 3px solid #82945f; border-radius: 6px; background: var(--theme-soft); color: var(--theme-accent); font-size: .84rem; overflow-wrap: anywhere; }
#news-reply { margin: 0 22px 14px; }
.reply-draft button { flex: 0 0 auto; }
button.message-reply-reference:not(.nav-item):not(.employee), .message-reply-reference { display: grid; gap: 5px; width: 100%; margin: 10px 0; padding: 10px 13px; border: 0; border-left: 3px solid #81955e; background: var(--theme-soft); color: var(--theme-accent); border-radius: 5px; text-align: left; font-size: .8rem; font-weight: 400; overflow-wrap: anywhere; }
.message-reply-reference span { white-space: pre-wrap; }
.message-image { display: block; max-width: 100%; max-height: 280px; object-fit: contain; margin-bottom: 8px; border-radius: 6px; }
.message-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.message-toolbar button.composer-tool-button:not(.nav-item):not(.employee) { background: transparent; border: 0; padding: 6px 10px; color: var(--theme-accent); min-height: 38px; }
#news-form #news-emoji-trigger, button.emoji-trigger:not(.nav-item):not(.employee) { min-width: 40px; font-size: 1.55rem; line-height: 1; }
.task-comment-form { display: flex; flex-direction: column; align-items: stretch; gap: 8px; max-height: 55%; overflow-y: auto; }
.task-comment-form > * { flex-shrink: 0; }
.task-comment-actions { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
.task-comment-form .news-emoji-panel { margin: 0; width: 100%; box-sizing: border-box; }
.message-extra { padding: 12px; background: var(--theme-soft); border: 1px solid var(--orero-line); border-radius: 7px; }
.message-extra label:first-child { margin-top: 0; }
.message-extra input[type="file"] { width: 100%; min-width: 0; font-size: .8rem; }
.task-activity-event .news-files { margin-top: 8px; }
.task-activity-event .news-quote { margin: 10px 0; font-size: .85rem; }
@media (max-width: 620px) { .news-author { flex-wrap: wrap; } .news-post-actions { margin-left: auto; } .task-comment-actions { flex-wrap: wrap; } }
@media (max-width: 700px) {
  .task-drawer-head { flex-wrap: wrap; }
  .task-head-title { flex: 1 1 100%; min-width: 0; }
  .task-head-actions { margin-left: auto; }
  .task-comment-form { max-height: none; }
}

.reply-source-link:not(.nav-item):not(.employee) { padding: 0; min-height: 30px; border: 0; background: transparent; color: inherit; text-align: left; font-size: inherit; }
.task-row-title, .upcoming-event { cursor: pointer; }

/* One thin focus line across the CRM, drawn inside the existing border. */
button.profile-person-link:not(.nav-item):not(.employee) { display: inline-flex; align-items: center; gap: 9px; padding: 0; margin: 0; min-height: 0; border: 0; border-radius: 5px; background: transparent; color: inherit; font: inherit; text-align: left; white-space: normal; overflow-wrap: anywhere; }
button.profile-person-link:not(.nav-item):not(.employee):hover { background: #7d915010; color: var(--orero-olive-hover); }
.profile-person-link .person-avatar, .profile-person-link .news-avatar { flex-shrink: 0; }
.calendar-participant-tags button.profile-person-link:not(.nav-item):not(.employee) { padding: 6px 12px; border: 1px solid var(--orero-line); background: var(--theme-soft); border-radius: 18px; font-size: .85rem; }
.news-comments { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--orero-line); }
.news-comments button.news-comments-toggle:not(.nav-item):not(.employee) { padding: 7px 0; border: 0; background: transparent; color: var(--theme-accent); font-weight: 500; }
.news-comments-panel { margin-top: 14px; }
.news-comments-actions { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.news-comments-actions button { font-size: .76rem; padding: 5px 8px; }
.news-comments-list { display: grid; gap: 20px; }
.news-comment { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 10px; }
.news-comment .person-avatar { width: 32px; height: 32px; font-size: .8rem; }
.news-comment-content { min-width: 0; }
.news-comment-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: .84rem; }
.news-comment-heading > .profile-person-link { font-weight: 600 !important; }
.news-comment-heading time { font-size: .72rem; }
.news-comment-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9rem; margin: 5px 0 0; }
.news-comment-buttons { margin-left: auto; gap: 2px; }
.news-comment-form { margin-top: 16px; padding: 12px; background: var(--theme-soft); border: 1px solid var(--orero-line); border-radius: 10px; min-width: 0; }
.news-comment-form textarea { display: block; width: 100%; min-width: 0; min-height: 68px; padding: 10px; border: 1px solid var(--theme-input-border); border-radius: 7px; background: var(--theme-input); color: var(--orero-ink); font: inherit; font-size: .9rem; resize: vertical; }
.news-comment-tools { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 8px; }
.news-comment-tools > span { flex: 1; font-size: .7rem; }
.news-comment-tools > button { font-size: .79rem; }
.news-comment-form .news-emoji-panel { margin: 10px 0; width: 100%; }
.news-comment-confirm { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 10px; background: var(--theme-warning-bg); border-radius: 7px; font-size: .82rem; }
.feed-column > button.news-search-toggle { margin-bottom: 0; }
.feed-column > .news-filters { margin-bottom: 0; }
@media (max-width: 600px) { .news-comment-tools > span { flex-basis: calc(100% - 100px); } .news-comment-tools > button { min-height: 40px; } .news-comment-heading .news-comment-buttons { margin-left: 0; } }
:focus-visible,
input:focus, select:focus, textarea:focus, [contenteditable="true"]:focus {
  outline: 1px solid #798b62;
  outline-offset: -1px;
}
input:focus, select:focus, textarea:focus, [contenteditable="true"]:focus {
  border-color: #798b62;
  box-shadow: none;
}
@media (forced-colors: active) {
  :focus-visible, input:focus, select:focus, textarea:focus, [contenteditable="true"]:focus { outline-color: Highlight; }
}