:root {
  color-scheme: light;
  --bg: #f4f8ff;
  --surface: #ffffff;
  --surface-muted: #e8f1ff;
  --border: #cddcf3;
  --text: #101827;
  --muted: #5c6d83;
  --accent: #2ea7ff;
  --accent-strong: #145ecf;
  --accent-soft: #dff3ff;
  --blue: #536dff;
  --amber: #a76b1e;
  --danger: #b43d4b;
  --sidebar-bg: #07152a;
  --sidebar-text: #f7fbff;
  --sidebar-muted: #9eb8d6;
  --nav-text: #d8e8ff;
  --nav-active-bg: rgba(75, 176, 255, 0.18);
  --message-bg: #f8fbff;
  --shadow: 0 18px 45px rgba(7, 21, 42, 0.1);
}

body[data-theme="labb"] {
  color-scheme: light;
  --bg: #f4f8ff;
  --surface: #ffffff;
  --surface-muted: #e8f1ff;
  --border: #cddcf3;
  --text: #101827;
  --muted: #5c6d83;
  --accent: #2ea7ff;
  --accent-strong: #145ecf;
  --accent-soft: #dff3ff;
  --blue: #536dff;
  --amber: #a76b1e;
  --danger: #b43d4b;
  --sidebar-bg: #07152a;
  --sidebar-text: #f7fbff;
  --sidebar-muted: #9eb8d6;
  --nav-text: #d8e8ff;
  --nav-active-bg: rgba(75, 176, 255, 0.18);
  --message-bg: #f8fbff;
  --shadow: 0 18px 45px rgba(7, 21, 42, 0.1);
}

body[data-theme="forest"] {
  --bg: #f6f7f4;
  --surface: #ffffff;
  --surface-muted: #eef2eb;
  --border: #d8ded2;
  --text: #1c241f;
  --muted: #667268;
  --accent: #1f7a68;
  --accent-strong: #155a4c;
  --accent-soft: #d9eee7;
  --blue: #355f8d;
  --amber: #a8681d;
  --danger: #a33c35;
  --sidebar-bg: #17201b;
  --sidebar-text: #f8faf7;
  --sidebar-muted: #b8c2ba;
  --nav-text: #dce3dd;
  --nav-active-bg: rgba(255, 255, 255, 0.1);
  --message-bg: #f9faf7;
  --shadow: 0 18px 45px rgba(30, 42, 35, 0.08);
}

body[data-theme="ocean"] {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-muted: #e8eef7;
  --border: #cfd9e8;
  --text: #182333;
  --muted: #607087;
  --accent: #256d9f;
  --accent-strong: #164e78;
  --accent-soft: #dcecf8;
  --blue: #1f5f8d;
  --amber: #a66f1f;
  --danger: #a33c53;
  --sidebar-bg: #142233;
  --sidebar-text: #f8fbff;
  --sidebar-muted: #b9c7d8;
  --nav-text: #dbe6f3;
  --message-bg: #f7fafd;
  --shadow: 0 18px 45px rgba(24, 35, 51, 0.09);
}

body[data-theme="berry"] {
  --bg: #faf6f8;
  --surface: #ffffff;
  --surface-muted: #f2e8ee;
  --border: #e2d0da;
  --text: #2b1c25;
  --muted: #765f6c;
  --accent: #9b3f66;
  --accent-strong: #6f2847;
  --accent-soft: #f4dce8;
  --blue: #435f92;
  --amber: #a06b22;
  --danger: #a33c35;
  --sidebar-bg: #2a1722;
  --sidebar-text: #fff8fb;
  --sidebar-muted: #d1b9c5;
  --nav-text: #ecdce4;
  --message-bg: #fcf8fa;
  --shadow: 0 18px 45px rgba(43, 28, 37, 0.08);
}

body[data-theme="graphite"] {
  --bg: #f5f5f3;
  --surface: #ffffff;
  --surface-muted: #ececea;
  --border: #d7d7d2;
  --text: #20211f;
  --muted: #6f716b;
  --accent: #4f625c;
  --accent-strong: #364640;
  --accent-soft: #e1e8e5;
  --blue: #3f5876;
  --amber: #8b6c2c;
  --danger: #9b4038;
  --sidebar-bg: #20211f;
  --sidebar-text: #f8f8f5;
  --sidebar-muted: #c6c7c2;
  --nav-text: #e0e0dc;
  --message-bg: #f8f8f6;
  --shadow: 0 18px 45px rgba(32, 33, 31, 0.08);
}

body[data-theme="sunrise"] {
  --bg: #fbf7f1;
  --surface: #ffffff;
  --surface-muted: #f2eadc;
  --border: #e4d6c0;
  --text: #2b2319;
  --muted: #746858;
  --accent: #b65f2a;
  --accent-strong: #85431b;
  --accent-soft: #f6e1d2;
  --blue: #37617e;
  --amber: #a8681d;
  --danger: #a33c35;
  --sidebar-bg: #2b2118;
  --sidebar-text: #fffaf4;
  --sidebar-muted: #d7c6b1;
  --nav-text: #efe2d4;
  --message-bg: #fdf9f3;
  --shadow: 0 18px 45px rgba(43, 35, 25, 0.08);
}

body[data-theme="lavender"] {
  --bg: #f8f6fb;
  --surface: #ffffff;
  --surface-muted: #ede8f5;
  --border: #d9d0e8;
  --text: #241f2f;
  --muted: #6b607b;
  --accent: #6d5a9f;
  --accent-strong: #4c3d75;
  --accent-soft: #e7e0f5;
  --blue: #35658d;
  --amber: #9c7324;
  --danger: #a33c55;
  --sidebar-bg: #221c31;
  --sidebar-text: #fbf9ff;
  --sidebar-muted: #c8bdd9;
  --nav-text: #e7def4;
  --message-bg: #fbf9ff;
  --shadow: 0 18px 45px rgba(36, 31, 47, 0.08);
}

body[data-theme="mint"] {
  --bg: #f4f9f6;
  --surface: #ffffff;
  --surface-muted: #e6f2ec;
  --border: #cfe2d7;
  --text: #1b2a24;
  --muted: #63786e;
  --accent: #2d8f73;
  --accent-strong: #1e6551;
  --accent-soft: #d9f0e7;
  --blue: #2f668d;
  --amber: #9a7224;
  --danger: #a33c45;
  --sidebar-bg: #16261f;
  --sidebar-text: #f7fff9;
  --sidebar-muted: #b7d0c4;
  --nav-text: #dcece4;
  --message-bg: #f8fcfa;
  --shadow: 0 18px 45px rgba(27, 42, 36, 0.08);
}

body[data-theme="coral"] {
  --bg: #fbf6f4;
  --surface: #ffffff;
  --surface-muted: #f3e7e2;
  --border: #e5d0c8;
  --text: #2d211d;
  --muted: #786760;
  --accent: #c65f4a;
  --accent-strong: #8f3f2e;
  --accent-soft: #f6ded8;
  --blue: #38617f;
  --amber: #a76e1f;
  --danger: #a33c35;
  --sidebar-bg: #2d1d19;
  --sidebar-text: #fff9f7;
  --sidebar-muted: #dcc2ba;
  --nav-text: #f0ded9;
  --message-bg: #fdf9f7;
  --shadow: 0 18px 45px rgba(45, 33, 29, 0.08);
}

body[data-theme="indigo"] {
  --bg: #f6f7fc;
  --surface: #ffffff;
  --surface-muted: #e9ecf7;
  --border: #d2d7eb;
  --text: #1e2237;
  --muted: #666d86;
  --accent: #5667c9;
  --accent-strong: #39469b;
  --accent-soft: #e0e4f8;
  --blue: #2f638f;
  --amber: #9a7424;
  --danger: #a33c50;
  --sidebar-bg: #1b203d;
  --sidebar-text: #f8f9ff;
  --sidebar-muted: #bbc1df;
  --nav-text: #e1e5f7;
  --message-bg: #fafbff;
  --shadow: 0 18px 45px rgba(30, 34, 55, 0.08);
}

body[data-theme="olive"] {
  --bg: #f7f8f2;
  --surface: #ffffff;
  --surface-muted: #ecefdf;
  --border: #d9dfc4;
  --text: #222718;
  --muted: #6d725a;
  --accent: #6f7f32;
  --accent-strong: #4d5b20;
  --accent-soft: #e4ebc9;
  --blue: #356583;
  --amber: #9b6e22;
  --danger: #9d4238;
  --sidebar-bg: #202718;
  --sidebar-text: #fbfff4;
  --sidebar-muted: #c4cdaa;
  --nav-text: #e4ead2;
  --message-bg: #fbfcf6;
  --shadow: 0 18px 45px rgba(34, 39, 24, 0.08);
}

body[data-theme="rose"] {
  --bg: #fbf6f7;
  --surface: #ffffff;
  --surface-muted: #f2e7ea;
  --border: #e4d0d6;
  --text: #2c1f23;
  --muted: #79636a;
  --accent: #b84d72;
  --accent-strong: #843450;
  --accent-soft: #f4dce5;
  --blue: #3e628b;
  --amber: #a36d21;
  --danger: #a33c35;
  --sidebar-bg: #2c1b22;
  --sidebar-text: #fff8fa;
  --sidebar-muted: #d7bdc6;
  --nav-text: #efdee5;
  --message-bg: #fdf9fa;
  --shadow: 0 18px 45px rgba(44, 31, 35, 0.08);
}

body[data-theme="citrus"] {
  --bg: #faf9f1;
  --surface: #ffffff;
  --surface-muted: #f0efd8;
  --border: #dfdfbd;
  --text: #262713;
  --muted: #71725b;
  --accent: #7c8f1e;
  --accent-strong: #576614;
  --accent-soft: #e8efbf;
  --blue: #36657d;
  --amber: #9f751d;
  --danger: #a34235;
  --sidebar-bg: #252814;
  --sidebar-text: #fffff4;
  --sidebar-muted: #cdd1a9;
  --nav-text: #ecefcf;
  --message-bg: #fdfcf6;
  --shadow: 0 18px 45px rgba(38, 39, 19, 0.08);
}

body[data-theme="dark"] {
  color-scheme: dark;
  --bg: #252825;
  --surface: #30332f;
  --surface-muted: #3a3f3a;
  --border: #535a53;
  --text: #f2f4f1;
  --muted: #b9c1b8;
  --accent: #82c9b0;
  --accent-strong: #a8deca;
  --accent-soft: rgba(130, 201, 176, 0.16);
  --blue: #9cbfff;
  --amber: #efbe78;
  --danger: #ff978f;
  --sidebar-bg: #20241f;
  --sidebar-text: #f6f8f5;
  --sidebar-muted: #b0b9af;
  --nav-text: #e2e7e1;
  --nav-active-bg: rgba(130, 201, 176, 0.17);
  --message-bg: #343832;
  --shadow: 0 18px 45px rgba(17, 20, 17, 0.24);
}

body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea,
body[data-theme="dark"] .chat-rich-input,
body[data-theme="dark"] .calculator-display {
  background: #292d29;
  color: var(--text);
}

body[data-theme="dark"] .empty-state,
body[data-theme="dark"] .chat-thread-card,
body[data-theme="dark"] .calendar-day,
body[data-theme="dark"] .quick-action-menu-item:hover,
body[data-theme="dark"] .quick-action-menu-item:focus-visible {
  background: rgba(255, 255, 255, 0.07);
}

body[data-theme="dark"] .metric-card,
body[data-theme="dark"] .news-item,
body[data-theme="dark"] .resource-card,
body[data-theme="dark"] .colleague-card,
body[data-theme="dark"] .feedback-item {
  background: var(--surface);
}

body[data-theme="cycle"] {
  --shadow: 0 18px 45px rgba(30, 42, 35, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}

.auth-locked .app-shell {
  grid-template-columns: 1fr;
}

.auth-locked .sidebar,
.auth-locked .topbar,
.approval-locked .sidebar,
.approval-locked .topbar {
  display: none;
}

.auth-locked .workspace,
.approval-locked .workspace {
  min-height: 100vh;
  justify-content: center;
}

.auth-locked .view:not(#view-profil),
.approval-locked .view:not(#view-profil) {
  display: none !important;
}

.auth-locked #view-profil,
.approval-locked #view-profil {
  width: min(720px, 100%);
  margin: 0 auto;
}

.auth-locked #view-profil .section-heading,
.approval-locked #view-profil .section-heading {
  justify-content: center;
  text-align: center;
}

.auth-locked .profile-grid,
.approval-locked .profile-grid {
  grid-template-columns: 1fr;
}

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  height: 100vh;
  max-height: 100vh;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  padding: 22px 14px;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  scrollbar-gutter: stable;
}

.brand {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(109, 216, 255, 0.28);
  border-radius: 10px;
  background: #07152a;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 8px 22px rgba(0, 0, 0, 0.28);
}

.labb-brand-icon {
  width: 100%;
  height: 100%;
  display: block;
}

.brand strong {
  display: block;
  font-size: 0.92rem;
}

.nav-list {
  display: grid;
  gap: 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  padding: 0 10px;
  background: transparent;
  color: var(--nav-text);
  font-size: 0.92rem;
  text-align: left;
}

.nav-item[data-nav-sortable="true"] {
  cursor: grab;
}

.nav-item.dragging,
.nav-order-row.dragging {
  opacity: 0.54;
}

.is-reordering-nav .nav-list,
.is-reordering-nav .nav-visibility-options {
  cursor: grabbing;
}

.nav-item:hover,
.nav-item.active {
  background: var(--nav-active-bg);
  color: var(--sidebar-text);
}

.nav-badge,
.notification-badge {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 999px;
  padding: 0 5px;
  background: var(--danger);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

.nav-badge {
  margin-left: auto;
}

.workspace {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 22px clamp(16px, 3vw, 36px) 32px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}

.topbar-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  margin-top: 4px;
  font-size: clamp(1.55rem, 3vw, 2.65rem);
  line-height: 1;
  letter-spacing: 0;
}

h2 {
  font-size: clamp(1.25rem, 2.3vw, 1.65rem);
  letter-spacing: 0;
}

h3 {
  font-size: 0.92rem;
  letter-spacing: 0;
}

.eyebrow {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.86rem;
  white-space: nowrap;
}

.status-pill[data-status="error"] {
  border-color: rgba(163, 60, 53, 0.35);
  color: var(--danger);
}

.notification-center {
  position: relative;
}

.notification-button {
  position: relative;
}

.notification-button.active,
.notification-button:hover {
  border-color: rgba(31, 122, 104, 0.24);
  color: var(--accent-strong);
}

.topbar-notification-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  border: 2px solid var(--surface);
  font-size: 0.62rem;
}

.notification-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  width: min(390px, calc(100vw - 28px));
  max-height: min(520px, calc(100vh - 120px));
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.notification-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.notification-summary {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.notification-list {
  display: grid;
  gap: 6px;
}

.notification-permission-button {
  width: 100%;
  justify-content: center;
  margin-bottom: 8px;
}

.notification-permission-message {
  margin: 0 0 8px;
  text-align: center;
}

.notification-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 58px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  background: var(--surface-muted);
  color: var(--text);
  text-align: left;
}

.notification-item:hover {
  border-color: rgba(31, 122, 104, 0.28);
  background: var(--accent-soft);
}

.notification-item-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 8px;
  background: var(--surface);
  color: var(--accent-strong);
}

.notification-danger .notification-item-icon {
  color: var(--danger);
}

.notification-warning .notification-item-icon {
  color: var(--amber);
}

.notification-item-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.notification-item-body strong,
.notification-item-body small {
  overflow-wrap: anywhere;
}

.notification-item-body small {
  color: var(--muted);
  line-height: 1.35;
}

.notification-item-count {
  margin-left: 0;
}

.notification-empty {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 12px;
  color: var(--muted);
  text-align: center;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}

.metric-card,
.panel,
.colleague-card,
.resource-card,
.news-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.metric-card {
  display: grid;
  gap: 6px;
  padding: 14px;
}

.metric-label {
  color: var(--muted);
  font-size: 0.78rem;
}

.metric-card strong {
  font-size: 1.55rem;
  line-height: 1;
}

.overview-layout,
.overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.overview-block-wide,
.wide-panel {
  grid-column: 1 / -1;
}

.panel {
  padding: 14px;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.panel-title-with-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.ghost-button,
.primary-button,
.secondary-button,
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  border-radius: 8px;
  border: 1px solid transparent;
}

.ghost-button {
  padding: 0 8px;
  background: var(--surface-muted);
  color: var(--text);
}

.primary-button {
  padding: 0 12px;
  background: var(--accent);
  color: #ffffff;
}

.secondary-button {
  padding: 0 12px;
  border-color: var(--border);
  background: var(--surface);
  color: var(--text);
}

.primary-button:hover {
  background: var(--accent-strong);
}

.danger-button {
  border-color: rgba(163, 60, 53, 0.28);
  background: #fff7f6;
  color: var(--danger);
}

.danger-button:hover {
  border-color: rgba(163, 60, 53, 0.42);
  background: #ffecea;
}

.secondary-button:hover,
.ghost-button:hover {
  border-color: rgba(31, 122, 104, 0.24);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.icon-button {
  min-width: 34px;
  padding: 0 8px;
  border-color: var(--border);
  background: var(--surface);
  color: var(--muted);
}

.icons-ready .icon-button {
  width: 34px;
  padding: 0;
}

.icon-button:hover {
  color: var(--danger);
}

.text-button {
  justify-self: start;
  min-height: 28px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--accent-strong);
  font-size: 0.82rem;
  font-weight: 800;
}

.text-button:hover {
  color: var(--accent);
  text-decoration: underline;
}

.icon-fallback {
  font-size: 0.72rem;
  font-weight: 700;
}

.icons-ready .icon-fallback {
  display: none;
}

.resource-form,
.task-form,
.auth-form,
.chat-start-form,
.chat-member-form,
.chat-composer {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.task-form {
  align-items: stretch;
  margin: 0;
}

.task-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.task-toolbar label,
.task-type-field {
  display: grid;
  min-width: 160px;
  gap: 5px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.task-form-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.task-create-panel,
.task-completed-panel,
.task-recurring-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.64);
}

.task-create-panel {
  margin-bottom: 12px;
}

.task-create-panel-compact {
  margin-top: -2px;
}

.task-completed-panel,
.task-recurring-panel {
  margin-top: 12px;
}

.task-options {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0;
  background: rgba(255, 255, 255, 0.64);
}

.task-create-panel > summary,
.task-completed-panel > summary,
.task-recurring-panel > summary,
.task-options summary {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  list-style: none;
}

.task-create-panel > summary,
.task-completed-panel > summary,
.task-recurring-panel > summary {
  min-height: 40px;
  color: var(--text);
}

.task-create-panel > summary {
  font-size: 0.86rem;
}

.task-completed-panel > summary,
.task-recurring-panel > summary {
  font-size: 0.82rem;
}

.task-create-panel > summary::-webkit-details-marker,
.task-completed-panel > summary::-webkit-details-marker,
.task-recurring-panel > summary::-webkit-details-marker,
.task-options summary::-webkit-details-marker {
  display: none;
}

.task-create-panel > .task-create-summary-hidden {
  display: none;
}

.task-create-panel > summary [data-lucide],
.task-completed-panel > summary [data-lucide],
.task-recurring-panel > summary [data-lucide],
.task-options summary [data-lucide] {
  transition: transform 160ms ease;
}

.task-create-panel[open] > summary [data-lucide],
.task-completed-panel[open] > summary [data-lucide],
.task-recurring-panel[open] > summary [data-lucide],
.task-options[open] summary [data-lucide] {
  transform: rotate(180deg);
}

.task-create-panel .task-form {
  padding: 0 10px 10px;
}

.task-create-panel-compact .task-form {
  padding: 10px;
}

.task-create-toggle {
  border-color: rgba(31, 122, 104, 0.24);
  background: var(--surface-muted);
  color: var(--accent-strong);
}

.task-create-toggle:hover,
.task-create-toggle.active {
  border-color: rgba(31, 122, 104, 0.38);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.task-create-toggle [data-lucide] {
  transition: transform 160ms ease;
}

.task-create-toggle.active [data-lucide] {
  transform: rotate(45deg);
}

.task-completed-count {
  display: inline-grid;
  min-width: 21px;
  height: 21px;
  margin-left: auto;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 7px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.task-section-label {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.task-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 10px 10px;
}

.task-rules-title {
  margin: 2px 0 -4px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.task-rule-row {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}

.task-rule-row-wide {
  grid-column: 1 / -1;
}

.task-rule-heading {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.task-rule-heading label {
  display: inline;
  gap: 0;
  min-width: 0;
}

.rule-info {
  position: relative;
  display: inline-grid;
  width: 18px;
  height: 18px;
  min-height: 18px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  padding: 0;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
}

.rule-info:hover,
.rule-info:focus-visible {
  border-color: rgba(31, 122, 104, 0.36);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.rule-info::after {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 5;
  width: min(240px, 72vw);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 9px;
  background: var(--text);
  color: var(--surface);
  box-shadow: var(--shadow);
  content: attr(data-tooltip);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition:
    opacity 120ms ease,
    transform 120ms ease;
}

.rule-info:hover::after,
.rule-info:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.task-time-control {
  display: grid;
  gap: 6px;
}

.task-draft-subtasks {
  display: grid;
  gap: 6px;
}

.task-draft-subtask-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.task-time-picker-row {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 0.7fr) auto;
  gap: 6px;
}

.task-time-add-button {
  min-width: 0;
  white-space: nowrap;
}

.task-time-list {
  display: flex;
  min-height: 26px;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.task-draft-subtask-list {
  display: flex;
  min-height: 28px;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.task-time-empty {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.task-time-chip {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 4px 2px 8px;
  background: var(--surface-muted);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 800;
}

.task-draft-subtask-chip {
  display: inline-flex;
  min-height: 26px;
  max-width: 100%;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 4px 2px 8px;
  background: var(--surface-muted);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 800;
}

.task-draft-subtask-chip > span {
  overflow-wrap: anywhere;
}

.task-time-remove {
  display: inline-grid;
  width: 20px;
  height: 20px;
  min-height: 20px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  color: var(--muted);
}

.task-time-remove:hover {
  background: rgba(181, 62, 62, 0.1);
  color: var(--danger);
}

.task-time-remove svg {
  width: 13px;
  height: 13px;
}

.completed-task-list,
.recurring-task-list {
  padding: 0 10px 10px;
}

.chat-composer,
.chat-member-form {
  grid-template-columns: minmax(0, 1fr) auto;
}

.chat-composer {
  grid-template-columns: 1fr;
}

.task-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.task-area {
  align-self: start;
}

.auth-form {
  margin-bottom: 0;
}

.resource-form label,
.resource-edit-card label,
.auth-form label,
.task-options label,
.task-edit-card label,
.chat-start-form label,
.chat-member-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.task-rule-heading label {
  display: inline;
  gap: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  outline: none;
}

input,
select {
  min-height: 38px;
  padding: 0 10px;
}

textarea {
  min-height: 82px;
  padding: 9px 10px;
  resize: vertical;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 122, 104, 0.18);
  outline: none;
}

.profile-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(320px, 1.15fr);
  gap: 14px;
  align-items: start;
}

.profile-details {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
}

.profile-details div {
  display: grid;
  gap: 4px;
}

.profile-details dt {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.profile-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.field-label {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.profile-preferences {
  display: grid;
  gap: 10px;
}

.profile-customization-panel {
  align-self: start;
}

.profile-status-editor {
  display: grid;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-muted);
}

.profile-status-editor .helper-text {
  margin: 3px 0 0;
}

.status-preset-list {
  display: grid;
  gap: 7px;
}

.status-preset-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.status-preset-button {
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 750;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.status-preset-button:hover,
.status-preset-button:focus-visible {
  border-color: rgba(31, 122, 104, 0.32);
  background: var(--accent-soft);
}

.customization-form {
  display: grid;
  gap: 12px;
}

.preference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.nav-visibility-fieldset,
.overview-layout-fieldset {
  display: grid;
  gap: 8px;
  margin: 0;
  border: 0;
  padding: 0;
}

.nav-visibility-fieldset legend,
.overview-layout-fieldset legend {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.nav-visibility-options {
  display: grid;
  gap: 6px;
}

.nav-order-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 6px 5px 8px;
  background: var(--surface);
  cursor: grab;
}

.nav-order-row .checkbox-row {
  min-height: 28px;
}

.nav-order-handle {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 8px;
  color: var(--muted);
}

.nav-order-row:hover .nav-order-handle {
  background: var(--surface-muted);
  color: var(--text);
}

.overview-widget-controls {
  display: grid;
  gap: 6px;
}

.overview-widget-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 6px 5px 8px;
  background: var(--surface);
}

.overview-widget-label {
  min-height: 28px;
}

.overview-widget-actions {
  display: flex;
  gap: 4px;
}

.overview-widget-actions .icon-button {
  min-width: 30px;
  min-height: 30px;
}

.role-badge {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 800;
}

.auth-required {
  display: grid;
  max-width: 620px;
  gap: 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--muted);
}

.auth-required .primary-button {
  justify-self: start;
}

.helper-text {
  margin-top: 9px;
  color: var(--muted);
  line-height: 1.5;
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.helper-text.compact {
  margin-top: 3px;
  font-size: 0.78rem;
}

.helper-text[data-status="error"] {
  color: var(--danger);
}

.helper-text[data-status="success"] {
  color: var(--accent-strong);
}

.task-list,
.colleague-list,
.quick-links,
.resource-list,
.news-list,
.feedback-list,
.chat-thread-list {
  display: grid;
  gap: 8px;
}

.colleague-list {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.colleague-list.compact {
  grid-template-columns: 1fr;
}

.quick-links,
.resource-list {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.quick-links.compact {
  grid-template-columns: 1fr;
}

.resource-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.resource-area {
  align-self: start;
}

.resource-form {
  align-content: start;
}

.resource-form[hidden] {
  display: none;
}

.resource-form-toggle {
  min-width: 0;
  white-space: nowrap;
}

.resource-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.resource-admin-note {
  margin-bottom: 14px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--muted);
}

.resource-message {
  min-height: 18px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.news-create-panel {
  margin-bottom: 14px;
}

.news-form {
  display: grid;
  gap: 10px;
  padding-top: 12px;
}

.news-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.news-form input,
.news-form textarea {
  width: 100%;
}

.news-list {
  gap: 10px;
}

.feedback-dashboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.resource-message[data-status="error"] {
  color: var(--danger);
}

.resource-message[data-status="success"] {
  color: var(--green);
}

.task-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 8px;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.task-item.overdue {
  border-color: rgba(163, 60, 53, 0.36);
}

.task-item.priority-high {
  box-shadow:
    inset 3px 0 0 var(--amber),
    var(--shadow);
}

.task-list.compact .task-item {
  grid-template-columns: 22px minmax(0, 1fr);
}

.task-item input {
  width: 16px;
  min-height: 16px;
  margin-top: 2px;
  accent-color: var(--accent);
}

.task-title {
  display: block;
  overflow-wrap: anywhere;
}

.task-body {
  min-width: 0;
}

.task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.task-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 7px;
  background: var(--surface-muted);
}

.task-chip-danger {
  border-color: rgba(163, 60, 53, 0.28);
  background: rgba(163, 60, 53, 0.08);
  color: var(--danger);
}

.task-chip-today,
.task-chip-repeat {
  border-color: rgba(31, 122, 104, 0.24);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.task-chip-priority {
  border-color: rgba(168, 104, 29, 0.28);
  background: rgba(168, 104, 29, 0.1);
  color: var(--amber);
}

.task-chip-project {
  border-color: rgba(53, 95, 141, 0.26);
  background: rgba(53, 95, 141, 0.1);
  color: var(--blue);
}

.task-chip-department {
  border-color: rgba(79, 98, 92, 0.28);
  background: rgba(79, 98, 92, 0.1);
  color: var(--accent-strong);
}

.task-actions {
  display: flex;
  gap: 5px;
}

.task-group-label {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.task-item.done .task-title {
  color: var(--muted);
  text-decoration: line-through;
}

.project-subtasks {
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.project-subtasks > summary {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 9px;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  list-style: none;
}

.project-subtasks > summary::-webkit-details-marker {
  display: none;
}

.project-subtasks > summary [data-lucide] {
  width: 15px;
  height: 15px;
  transition: transform 160ms ease;
}

.project-subtasks[open] > summary [data-lucide] {
  transform: rotate(180deg);
}

.project-subtask-list {
  display: grid;
  gap: 5px;
  padding: 0 8px 8px;
}

.project-subtask {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 7px;
  background: var(--surface);
  font-size: 0.84rem;
}

.project-subtask input[type="checkbox"] {
  width: 14px;
  min-height: 14px;
}

.project-subtask-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.project-subtask-title {
  overflow-wrap: anywhere;
}

.project-subtask-completed-by {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.project-subtask-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  border-top: 1px solid var(--border);
  padding: 8px;
  background: rgba(255, 255, 255, 0.42);
}

.project-subtask-form input[type="text"] {
  width: 100%;
  min-width: 0;
}

.project-subtask-form .secondary-button {
  white-space: nowrap;
}

.colleague-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  min-height: 108px;
  overflow: hidden;
  padding: 13px;
}

.approval-panel {
  margin-bottom: 14px;
}

.approval-list {
  display: grid;
  gap: 8px;
}

.approval-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface-muted);
}

.colleague-card-header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.colleague-identity {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.colleague-name {
  display: block;
  overflow-wrap: anywhere;
}

.colleague-text {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

.colleague-role {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.profile-status-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  margin-top: 7px;
  min-width: 0;
  max-width: 100%;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
}

.profile-status-summary.compact {
  margin-top: 5px;
}

.profile-status-summary.compact .profile-status-text {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.profile-status-text {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.presence-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--surface);
}

.presence-dot.online {
  background: #1fb66f;
}

.presence-dot.offline {
  background: #d94841;
}

.presence-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.colleague-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  justify-content: flex-start;
}

.department-picker {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 100%;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.department-checkbox {
  display: inline-flex;
  flex: 0 0 auto;
  height: 32px;
  min-height: 32px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 9px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 800;
}

.department-checkbox input {
  width: 14px;
  min-height: 14px;
  accent-color: var(--accent);
}

.chat-layout {
  display: grid;
  grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.chat-sidebar {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-height: 560px;
}

.chat-sidebar-header {
  align-items: flex-start;
}

.chat-sidebar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.new-chat-button {
  min-height: 34px;
  padding-inline: 9px;
  white-space: nowrap;
}

.new-chat-button.active {
  border-color: rgba(31, 122, 104, 0.32);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.chat-sidebar .chat-thread-list {
  min-height: 0;
  align-content: start;
  overflow-y: auto;
  padding-right: 2px;
}

.chat-create-dialog,
.chat-task-dialog,
.chat-resource-dialog,
.chat-calendar-dialog,
.task-edit-dialog,
.resource-edit-dialog,
.feedback-dialog {
  width: min(540px, calc(100vw - 32px));
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: transparent;
}

.chat-create-dialog::backdrop,
.chat-task-dialog::backdrop,
.chat-resource-dialog::backdrop,
.chat-calendar-dialog::backdrop,
.task-edit-dialog::backdrop,
.resource-edit-dialog::backdrop,
.feedback-dialog::backdrop {
  background: rgba(23, 32, 27, 0.42);
}

.chat-create-card,
.chat-task-card,
.chat-resource-card,
.chat-calendar-card,
.task-edit-card,
.resource-edit-card,
.feedback-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.chat-create-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chat-task-dialog,
.chat-resource-dialog,
.chat-calendar-dialog {
  width: min(760px, calc(100vw - 32px));
}

.chat-task-card,
.chat-resource-card,
.chat-calendar-card {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.chat-task-top-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.chat-task-card .task-option-grid {
  padding-inline: 0;
}

.chat-calendar-card.calendar-form {
  border-top: 0;
  padding: 16px;
}

.task-edit-card,
.chat-task-card,
.chat-resource-card,
.chat-calendar-card,
.resource-edit-card,
.feedback-card {
  margin: 0;
}

.feedback-card label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.feedback-card textarea,
.feedback-card select,
.feedback-card input {
  width: 100%;
}

.task-edit-card .task-option-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dialog-actions {
  justify-content: flex-end;
}

.chat-start-form,
.chat-member-form,
.chat-composer {
  margin-bottom: 0;
}

.field-label {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.channel-member-list {
  display: grid;
  max-height: 160px;
  gap: 6px;
  overflow: auto;
}

.checkbox-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  color: var(--text);
  font-size: 0.86rem;
}

.checkbox-row input {
  width: 16px;
  min-height: 16px;
  accent-color: var(--accent);
}

.chat-thread-list.compact {
  grid-template-columns: 1fr;
}

.chat-thread-button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 42px;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 9px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
}

.chat-thread-button:hover,
.chat-thread-button.active {
  border-color: rgba(31, 122, 104, 0.32);
  background: var(--accent-soft);
}

.chat-thread-body {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.chat-thread-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.chat-thread-body strong {
  line-height: 1.1;
}

.chat-thread-body small {
  font-size: 0.76rem;
  line-height: 1.15;
}

.chat-thread-body strong,
.chat-thread-body small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-thread-title-row strong {
  min-width: 0;
}

.chat-thread-body small {
  color: var(--muted);
}

.chat-main {
  display: grid;
  min-height: 560px;
  grid-template-rows: auto minmax(220px, 1fr) auto auto;
  gap: 12px;
}

.chat-active-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.chat-active-header .helper-text {
  margin-top: 6px;
}

.chat-active-status {
  display: grid;
  gap: 4px;
}

.chat-active-status .profile-status-summary {
  margin-top: 0;
}

.chat-channel-statuses {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.chat-composer-box {
  display: grid;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  background: var(--surface);
}

.chat-format-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 7px;
}

.chat-format-toolbar .icon-button {
  width: 30px;
  min-height: 30px;
  border-radius: 6px;
}

.chat-rich-input {
  min-height: 58px;
  max-height: 180px;
  border: 0;
  padding: 4px 2px;
  overflow-y: auto;
  background: transparent;
  font: inherit;
  line-height: 1.45;
  outline: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-rich-input:focus {
  outline: none;
}

.chat-rich-input:empty::before {
  color: var(--muted);
  content: attr(data-placeholder);
  pointer-events: none;
}

.chat-rich-input.disabled {
  color: var(--muted);
  cursor: not-allowed;
}

.chat-rich-input blockquote {
  margin: 0;
  border-left: 3px solid var(--accent);
  padding-left: 8px;
  color: var(--muted);
}

.chat-rich-input code {
  border-radius: 5px;
  padding: 1px 5px;
  background: rgba(24, 29, 26, 0.08);
}

.chat-rich-input a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.chat-composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.chat-composer-hint {
  color: var(--muted);
  font-size: 0.72rem;
}

.chat-attachment-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chat-attachment-draft {
  position: relative;
  overflow: hidden;
  width: 82px;
  height: 64px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.chat-attachment-draft img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-attachment-draft .icon-button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  min-height: 26px;
  border-color: rgba(0, 0, 0, 0.18);
  background: rgba(255, 255, 255, 0.88);
}

.chat-message-list {
  display: flex;
  min-height: 0;
  max-height: 52vh;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: var(--message-bg);
}

.chat-message {
  display: grid;
  max-width: min(76%, 620px);
  gap: 3px;
  justify-self: start;
}

.chat-message.own {
  align-self: flex-end;
}

.chat-message-meta {
  color: var(--muted);
  font-size: 0.7rem;
}

.chat-message-body {
  display: grid;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--surface);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.chat-message-body p,
.chat-message-body blockquote,
.chat-message-body ul,
.chat-message-body ol,
.chat-message-body pre {
  margin: 0;
}

.chat-message-body ul,
.chat-message-body ol {
  padding-left: 18px;
}

.chat-message-body blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 9px;
  color: var(--muted);
}

.chat-message-body code {
  border-radius: 5px;
  padding: 1px 5px;
  background: rgba(24, 29, 26, 0.08);
  font-size: 0.9em;
}

.chat-message-body pre {
  overflow-x: auto;
  border-radius: 7px;
  padding: 8px;
  background: rgba(24, 29, 26, 0.08);
}

.chat-message-body pre code {
  padding: 0;
  background: transparent;
}

.chat-message-body a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.chat-attachment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.chat-attachment {
  display: block;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.chat-attachment img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
}

.chat-message.own .chat-message-body {
  border-color: rgba(31, 122, 104, 0.2);
  background: var(--accent-soft);
}

.resource-card {
  display: grid;
  gap: 10px;
  min-height: 58px;
  padding: 12px;
}

.resource-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.resource-title {
  display: block;
  overflow-wrap: anywhere;
}

.resource-type {
  display: inline-flex;
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 7px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.resource-details {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.82rem;
}

.resource-detail-line {
  overflow-wrap: anywhere;
}

.resource-card a {
  min-width: 0;
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.resource-note {
  border-top: 1px solid var(--border);
  padding-top: 7px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.resource-actions {
  display: flex;
  gap: 5px;
}

.news-card {
  overflow: hidden;
}

.news-card.unread {
  border-color: rgba(31, 122, 104, 0.38);
  box-shadow: 0 14px 28px rgba(31, 122, 104, 0.1);
}

.news-details {
  display: block;
}

.news-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  cursor: pointer;
  list-style: none;
}

.news-summary::-webkit-details-marker {
  display: none;
}

.news-summary-text {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.news-summary-text strong {
  overflow-wrap: anywhere;
}

.news-summary-text small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.news-summary-controls {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.news-details[open] .news-summary-controls [data-lucide] {
  transform: rotate(180deg);
}

.news-unread-badge {
  padding-inline: 7px;
}

.news-actions {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.news-body {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--border);
  padding: 0 14px 14px;
  color: var(--text);
  line-height: 1.6;
}

.news-body p {
  margin-top: 12px;
  overflow-wrap: anywhere;
}

.quick-action-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 20;
  display: grid;
  align-items: center;
  justify-items: end;
  gap: 8px;
}

.quick-action-toggle {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(31, 122, 104, 0.28);
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 14px 28px rgba(31, 122, 104, 0.18);
  cursor: pointer;
}

.quick-action-toggle:hover,
.quick-action-toggle.active {
  background: var(--accent-strong);
}

.quick-action-toggle svg {
  transition: transform 160ms ease;
}

.quick-action-toggle.active svg {
  transform: rotate(45deg);
}

.quick-action-menu {
  display: grid;
  min-width: 250px;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.quick-action-menu-item {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  border: 0;
  border-radius: 8px;
  padding: 0 11px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
}

.quick-action-menu-item:hover,
.quick-action-menu-item:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.quick-action-menu-item:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.calculator-dialog {
  width: min(340px, calc(100vw - 32px));
  border: 0;
  padding: 0;
  background: transparent;
}

.calculator-dialog::backdrop {
  background: rgba(16, 24, 20, 0.28);
}

.calculator-card {
  display: grid;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.calculator-display {
  height: 54px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 14px;
  background: var(--surface-muted);
  color: var(--text);
  font-size: 1.45rem;
  font-weight: 800;
  text-align: right;
}

.calculator-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.calculator-key {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}

.calculator-key:hover,
.calculator-key:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.calculator-key.operator,
.calculator-key.muted {
  background: var(--surface-muted);
}

.calculator-key.equals {
  grid-row: span 2;
  background: var(--accent);
  color: #ffffff;
}

.calculator-key.wide {
  grid-column: span 2;
}

.feedback-screenshot-preview {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.feedback-screenshot-preview img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
}

.feedback-item {
  display: grid;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.feedback-item.feedback-status-new {
  border-color: rgba(31, 122, 104, 0.32);
}

.feedback-item-header,
.feedback-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.feedback-meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.feedback-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.feedback-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.feedback-priority-high,
.feedback-priority-urgent {
  border-color: rgba(168, 104, 29, 0.3);
  background: rgba(168, 104, 29, 0.1);
  color: var(--amber);
}

.feedback-priority-urgent {
  border-color: rgba(163, 60, 53, 0.3);
  background: rgba(163, 60, 53, 0.1);
  color: var(--danger);
}

.feedback-state-new {
  border-color: rgba(31, 122, 104, 0.26);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.feedback-state-resolved {
  color: var(--accent-strong);
}

.feedback-description {
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.feedback-screenshot {
  width: 100%;
  max-height: 440px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  object-fit: contain;
}

.feedback-actions {
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.feedback-actions select {
  width: min(220px, 100%);
}

.calendar-workspace {
  display: grid;
  gap: 14px;
}

.calendar-form {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--border);
  padding: 14px;
}

.calendar-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.calendar-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 14px;
  align-items: start;
}

.calendar-month-panel,
.calendar-upcoming-panel {
  display: grid;
  gap: 12px;
}

.calendar-month-panel .panel-header {
  grid-template-columns: auto minmax(0, 1fr) auto;
  justify-items: center;
}

.calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.calendar-weekday {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.calendar-day {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 88px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px;
  background: var(--surface);
}

.calendar-day.empty {
  border-style: dashed;
  background: transparent;
}

.calendar-day.today {
  border-color: rgba(31, 122, 104, 0.4);
  box-shadow: inset 0 0 0 1px rgba(31, 122, 104, 0.18);
}

.calendar-day strong {
  font-size: 0.82rem;
}

.calendar-event-pill {
  overflow: hidden;
  border-radius: 999px;
  padding: 2px 6px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-event-pill.private,
.calendar-card.private {
  border-color: rgba(31, 122, 104, 0.32);
}

.calendar-event-pill.private {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.calendar-list {
  display: grid;
  gap: 8px;
}

.calendar-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: start;
  gap: 9px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface);
}

.calendar-card-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.calendar-card-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.calendar-card-body strong,
.calendar-card-body small,
.calendar-card-body p {
  overflow-wrap: anywhere;
}

.calendar-card-body small {
  color: var(--muted);
}

.calendar-card-body p {
  color: var(--muted);
  line-height: 1.45;
}

.calendar-actions {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.calendar-type-deadline {
  border-left-color: var(--amber);
}

.calendar-type-holiday {
  border-left-color: var(--blue);
}

.calendar-type-absence {
  border-left-color: var(--danger);
}

.calendar-type-deadline .calendar-card-icon,
.calendar-type-deadline.calendar-event-pill {
  background: rgba(168, 104, 29, 0.12);
  color: var(--amber);
}

.calendar-type-holiday .calendar-card-icon,
.calendar-type-holiday.calendar-event-pill {
  background: rgba(53, 95, 141, 0.12);
  color: var(--blue);
}

.calendar-type-absence .calendar-card-icon,
.calendar-type-absence.calendar-event-pill {
  background: rgba(163, 60, 53, 0.1);
  color: var(--danger);
}

.handbook-workspace {
  display: grid;
  gap: 14px;
}

.handbook-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 440px);
  align-items: end;
  gap: 14px;
}

.handbook-toolbar h3 {
  margin: 0;
}

.handbook-search {
  display: grid;
  gap: 7px;
}

.handbook-search-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 7px 0 11px;
  background: var(--surface);
}

.handbook-search-field input {
  min-height: 34px;
  border: 0;
  padding: 0;
  background: transparent;
}

.handbook-search-field input:focus {
  outline: none;
  box-shadow: none;
}

.handbook-search small {
  color: var(--muted);
}

.handbook-attachment-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.82rem;
}

.handbook-admin-panel {
  padding: 0;
}

.handbook-admin-panel > summary {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 14px;
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}

.handbook-admin-panel > summary::-webkit-details-marker {
  display: none;
}

.handbook-admin-panel > summary [data-lucide] {
  transition: transform 160ms ease;
}

.handbook-admin-panel[open] > summary [data-lucide] {
  transform: rotate(180deg);
}

.handbook-upload-form {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--border);
  padding: 14px;
}

.handbook-upload-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.handbook-upload-divider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.handbook-upload-divider::before,
.handbook-upload-divider::after {
  height: 1px;
  background: var(--border);
  content: "";
}

.handbook-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  min-height: 0;
}

.handbook-toc-panel {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 10px;
  max-height: min(72vh, calc(100vh - 170px));
  overflow: hidden;
}

.handbook-toc-panel h3 {
  margin: 0;
}

.handbook-toc {
  display: grid;
  gap: 3px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.handbook-toc-link {
  display: block;
  width: 100%;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  padding: 7px 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.handbook-toc-link:hover,
.handbook-toc-link:focus-visible {
  border-left-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.handbook-toc-link.level-2 {
  padding-left: 18px;
}

.handbook-toc-link.level-3 {
  padding-left: 28px;
  font-size: 0.82rem;
}

.handbook-document {
  display: block;
  min-height: 420px;
  max-height: min(72vh, calc(100vh - 170px));
  overflow-y: auto;
  overflow-wrap: anywhere;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  line-height: 1.58;
}

.handbook-heading {
  scroll-margin-top: 22px;
}

.handbook-heading.level-1 {
  margin: 24px 0 10px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.handbook-heading.level-1:first-child {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

.handbook-heading.level-2 {
  margin: 18px 0 8px;
  font-size: 1.12rem;
}

.handbook-heading.level-3 {
  margin: 14px 0 7px;
  font-size: 1rem;
}

.handbook-paragraph,
.handbook-list {
  margin: 0 0 10px;
}

.handbook-list {
  padding-left: 22px;
}

.handbook-list li + li {
  margin-top: 5px;
}

.handbook-link,
.handbook-email-copy {
  color: var(--blue);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.handbook-email-copy {
  display: inline;
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  line-height: inherit;
  vertical-align: baseline;
  cursor: pointer;
}

.handbook-link:hover,
.handbook-link:focus-visible,
.handbook-email-copy:hover,
.handbook-email-copy:focus-visible {
  color: var(--accent-strong);
}

.handbook-email-copy.copied {
  color: var(--accent-strong);
}

.handbook-table-wrap {
  margin: 12px 0;
  overflow-x: auto;
}

.handbook-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
  font-size: 0.9rem;
}

.handbook-table-wrap th,
.handbook-table-wrap td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  vertical-align: top;
  text-align: left;
}

.handbook-table-wrap th {
  background: var(--surface-muted);
  color: var(--text);
}

.handbook-match {
  border-radius: 4px;
  padding: 0 2px;
  background: rgba(168, 104, 29, 0.24);
  color: var(--text);
}

.handbook-match.active {
  outline: 2px solid rgba(53, 95, 141, 0.34);
  background: rgba(53, 95, 141, 0.22);
}

.has-search-match {
  border-radius: 6px;
  background: rgba(168, 104, 29, 0.055);
}

.empty-state {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--muted);
}

[data-lucide] {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

[hidden] {
  display: none !important;
}

body[data-layout-density="compact"] {
  font-size: 13px;
}

body[data-layout-density="compact"] .app-shell {
  grid-template-columns: 224px minmax(0, 1fr);
}

body[data-layout-density="compact"] .sidebar {
  gap: 14px;
  padding: 18px 12px;
}

body[data-layout-density="compact"] .workspace {
  padding: 18px clamp(14px, 2.4vw, 28px) 26px;
}

body[data-layout-density="compact"] .topbar {
  margin-bottom: 16px;
}

body[data-layout-density="compact"] .panel,
body[data-layout-density="compact"] .metric-card,
body[data-layout-density="compact"] .colleague-card,
body[data-layout-density="compact"] .resource-card {
  padding: 11px;
}

body[data-layout-density="compact"] .nav-item,
body[data-layout-density="compact"] .ghost-button,
body[data-layout-density="compact"] .primary-button,
body[data-layout-density="compact"] .secondary-button,
body[data-layout-density="compact"] .icon-button {
  min-height: 31px;
}

body[data-layout-density="compact"] input,
body[data-layout-density="compact"] select {
  min-height: 34px;
}

body[data-layout-density="compact"] .overview-layout,
body[data-layout-density="compact"] .overview-grid,
body[data-layout-density="compact"] .metrics-grid,
body[data-layout-density="compact"] .task-sections,
body[data-layout-density="compact"] .resource-sections,
body[data-layout-density="compact"] .chat-layout,
body[data-layout-density="compact"] .handbook-workspace,
body[data-layout-density="compact"] .handbook-layout {
  gap: 10px;
}

body[data-layout-density="spacious"] {
  font-size: 15px;
}

body[data-layout-density="spacious"] .app-shell {
  grid-template-columns: 270px minmax(0, 1fr);
}

body[data-layout-density="spacious"] .sidebar {
  gap: 22px;
  padding: 26px 18px;
}

body[data-layout-density="spacious"] .workspace {
  padding: 28px clamp(20px, 3.6vw, 46px) 42px;
}

body[data-layout-density="spacious"] .topbar {
  margin-bottom: 28px;
}

body[data-layout-density="spacious"] .panel,
body[data-layout-density="spacious"] .metric-card,
body[data-layout-density="spacious"] .colleague-card,
body[data-layout-density="spacious"] .resource-card {
  padding: 18px;
}

body[data-layout-density="spacious"] .nav-item,
body[data-layout-density="spacious"] .ghost-button,
body[data-layout-density="spacious"] .primary-button,
body[data-layout-density="spacious"] .secondary-button,
body[data-layout-density="spacious"] .icon-button {
  min-height: 39px;
}

body[data-layout-density="spacious"] input,
body[data-layout-density="spacious"] select {
  min-height: 42px;
}

body[data-layout-density="spacious"] .overview-layout,
body[data-layout-density="spacious"] .overview-grid,
body[data-layout-density="spacious"] .metrics-grid,
body[data-layout-density="spacious"] .task-sections,
body[data-layout-density="spacious"] .resource-sections,
body[data-layout-density="spacious"] .chat-layout,
body[data-layout-density="spacious"] .handbook-workspace,
body[data-layout-density="spacious"] .handbook-layout {
  gap: 18px;
}

body.auth-locked[data-layout-density] .app-shell,
body.approval-locked[data-layout-density] .app-shell {
  grid-template-columns: 1fr;
}

.confirm-dialog {
  width: min(460px, calc(100vw - 32px));
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: transparent;
}

.confirm-dialog::backdrop {
  background: rgba(23, 32, 27, 0.42);
}

.confirm-card {
  display: grid;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.confirm-card .button-row {
  justify-content: flex-end;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 860px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    top: 0;
    align-self: stretch;
    height: auto;
    max-height: none;
    overflow: visible;
    z-index: 2;
    padding: 10px;
  }

  .brand {
    grid-template-columns: 36px 1fr;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
  }

  .nav-list {
    grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
  }

  .nav-item {
    justify-content: center;
    padding: 0 7px;
  }

  .icons-ready .nav-item span {
    display: none;
  }

  .workspace {
    padding-top: 18px;
  }

  .topbar,
  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .notification-center {
    margin-left: auto;
  }

  .metrics-grid,
  .overview-layout,
  .overview-grid,
  .profile-grid,
  .preference-grid,
  .nav-visibility-options,
  .colleague-list,
  .resource-sections,
  .resource-field-grid,
  .feedback-dashboard,
  .task-sections,
  .task-form,
  .task-form-main,
  .task-option-grid,
  .task-edit-card .task-option-grid,
  .chat-task-top-grid,
  .chat-task-card .task-option-grid,
  .task-time-picker-row,
  .chat-layout,
  .chat-composer,
  .chat-member-form,
  .chat-resource-card .resource-field-grid,
  .chat-calendar-card .calendar-form-grid,
  .calendar-layout,
  .calendar-form-grid,
  .handbook-toolbar,
  .handbook-layout {
    grid-template-columns: 1fr;
  }

  .primary-button,
  .secondary-button {
    width: 100%;
  }

  .auth-required .primary-button {
    justify-self: stretch;
  }

  .chat-main {
    min-height: auto;
  }

  .chat-sidebar {
    min-height: auto;
  }

  .chat-sidebar .chat-thread-list {
    max-height: 42vh;
  }

  .handbook-toc-panel {
    position: static;
    max-height: 34vh;
  }

  .handbook-document {
    min-height: auto;
    max-height: none;
    overflow-y: visible;
    scrollbar-gutter: auto;
  }

  .quick-action-fab {
    right: 14px;
    bottom: 14px;
  }

  .quick-action-menu {
    min-width: min(250px, calc(100vw - 28px));
  }

  .feedback-item-header,
  .feedback-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .chat-message-list {
    max-height: 60vh;
  }

  .calendar-month-grid {
    gap: 4px;
  }

  .calendar-day {
    min-height: 72px;
    padding: 5px;
  }

  .chat-message {
    max-width: 92%;
  }
}

@media (max-width: 520px) {
  .workspace {
    padding-inline: 14px;
  }

  .metrics-grid {
    gap: 8px;
  }

  .metric-card,
  .panel {
    padding: 12px;
  }
}