.mobile-menu-toggle { display: none; }
.app-sidebar .sidebar-brand .brand-logo { position: relative; display: block; width: 148px; height: 46px; overflow: hidden; flex: 0 0 auto; }
.app-sidebar .sidebar-brand .brand-logo img { position: absolute; left: 0; display: block; object-fit: contain; transform-origin: left center; }
.app-sidebar .sidebar-brand .brand-logo img.sidebar-logo-full { top: 0; width: 148px; height: 46px; opacity: 1; transform: translateX(0) scale(1); }
.app-sidebar .sidebar-brand .brand-logo img.sidebar-logo-compact { top: 3px; width: 40px; height: 40px; opacity: 0; transform: translateX(-8px) scale(.8); }
@media (min-width: 721px) {
  .app:not(.sidebar-motion-ready) { transition: none; }
  .app.sidebar-motion-ready { transition: grid-template-columns 300ms cubic-bezier(.2, .8, .2, 1); }
  .app.sidebar-motion-ready .sidebar-brand .brand-logo { transition: width 300ms cubic-bezier(.2, .8, .2, 1); }
  .app.sidebar-motion-ready .sidebar-brand .brand-logo img { transition: opacity 220ms ease, transform 300ms cubic-bezier(.2, .8, .2, 1); }
}
.app-sidebar .sidebar-toggle { position: absolute; top: 80px; right: -15px; z-index: 30; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid #dde4ee; border-radius: 50%; background: #fff; box-shadow: none; }
.app-sidebar .sidebar-toggle svg { width: 16px; height: 16px; }
.app-sidebar .sidebar-toggle:focus-visible { outline: 3px solid #0866ff; outline-offset: 2px; }
.app.sidebar-collapsed .app-sidebar { height: auto; min-height: 100vh; overflow: visible; padding-inline: 14px; z-index: 20; }
.app.sidebar-collapsed .sidebar-brand { flex-direction: row; justify-content: flex-start; flex-wrap: nowrap; gap: 8px; }
.app.sidebar-collapsed .sidebar-brand .brand-logo { display: block; width: 40px; height: 46px; }
.app.sidebar-collapsed .sidebar-brand .brand-logo img.sidebar-logo-full { display: block; opacity: 0; transform: translateX(-14px) scale(.88); }
.app.sidebar-collapsed .sidebar-brand .brand-logo img.sidebar-logo-compact { display: block; opacity: 1; transform: translateX(0) scale(1); }
.app.sidebar-collapsed .app-sidebar .nav { align-items: flex-start; padding-left: 1px; }
.app.sidebar-collapsed .app-sidebar .nav button { position: relative; width: 48px; min-width: 0; height: 46px; padding: 0; justify-content: center; }
@media (min-width: 721px) {
  .app.sidebar-collapsed .app-sidebar .nav .sidebar-section-label { display: block; visibility: hidden; }
}
.app.sidebar-collapsed .app-sidebar :is(.nav button,.account-menu-toggle)::after,
.app.sidebar-collapsed .app-sidebar :is(.nav button,.account-menu-toggle)::before { position: absolute; top: 50%; opacity: 0; visibility: hidden; pointer-events: none; z-index: 60; transition: opacity 120ms ease, transform 120ms ease; }
.app.sidebar-collapsed .app-sidebar :is(.nav button,.account-menu-toggle)::after { content: attr(aria-label); left: calc(100% + 15px); transform: translate(-4px,-50%); padding: 10px 14px; border-radius: 9px; background: #1d2b3d; color: #fff; box-shadow: 0 8px 20px rgba(7,24,43,.2); font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.app.sidebar-collapsed .app-sidebar :is(.nav button,.account-menu-toggle)::before { content: ""; display: block; left: calc(100% + 7px); transform: translate(-4px,-50%); border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid #1d2b3d; }
.app.sidebar-collapsed .app-sidebar :is(.nav button,.account-menu-toggle):is(:hover,:focus-visible):not([aria-expanded="true"])::after,
.app.sidebar-collapsed .app-sidebar :is(.nav button,.account-menu-toggle):is(:hover,:focus-visible):not([aria-expanded="true"])::before { opacity: 1; visibility: visible; transform: translate(0,-50%); }
.app.sidebar-collapsed .app-sidebar .nav button[aria-expanded="true"]:is(:hover,:focus-visible)::after,
.app.sidebar-collapsed .app-sidebar .nav button[aria-expanded="true"]:is(:hover,:focus-visible)::before { opacity: 1; visibility: visible; transform: translate(0,-50%); }
.app.sidebar-collapsed .app-sidebar:has(:is(.nav button,.account-menu-toggle):hover) :is(.nav button,.account-menu-toggle):focus-visible:not(:hover)::after,
.app.sidebar-collapsed .app-sidebar:has(:is(.nav button,.account-menu-toggle):hover) :is(.nav button,.account-menu-toggle):focus-visible:not(:hover)::before { opacity: 0; visibility: hidden; }
.app.sidebar-collapsed .account-menu-toggle { justify-content: center; padding: 8px 0; }
.app.sidebar-collapsed .account-menu-toggle .user-avatar { display: grid; }
.app.sidebar-collapsed .account-menu-toggle .account-chevron { display: none; }
.app.sidebar-collapsed .account-menu-popover { position: fixed; left: 84px; right: auto; bottom: 18px; width: 220px; border: 1px solid #dbe3ee; border-radius: 9px; box-shadow: 0 14px 32px rgba(14,49,91,.16); }
html[data-interface-theme="dark"]:not([data-display-mode="tv"]) .app-sidebar .sidebar-toggle { color: #dce7f4; background: #20344e; border-color: #39516d; }
html[data-interface-theme="dark"]:not([data-display-mode="tv"]) .sidebar-brand .brand-logo img.sidebar-logo-compact { content: url('/favicon.png'); }
.app-sidebar {
  background: #fff;
  border-right: 1px solid #dde4ee;
  height: auto;
  min-height: 100vh;
  overflow: visible;
}
.app-sidebar .nav button,
.app-sidebar .nav .tv-nav {
  border: 1px solid transparent;
  box-shadow: none;
  color: #536174;
  background: transparent;
  min-height: 46px;
  flex-shrink: 0;
}
.app-sidebar .nav button.active,
.app-sidebar .nav .tv-nav.active {
  background: #eaf2ff;
  color: #0866ff;
  box-shadow: none;
}
.app-sidebar .nav button.active::before { display: none; }
.app > .workspace-page {
  grid-column: 2;
  grid-row: 1;
  margin: 24px 28px;
  min-width: 0;
}
.demo-mode .app-sidebar { grid-row: 1 / 3; }
.demo-mode .app > .demo-notice {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  flex-wrap: wrap;
}
html.demo-mode #manageView > section:not(.demo-notice) { grid-row: 2; }
.workspace-page-header,
.workspace-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.workspace-page-header { justify-content: space-between; margin-bottom: 24px; min-height: 60px; }
.workspace-page-header h1 { font-size: 1.65rem; margin: 0; }
.workspace-controls label { display: grid; gap: 6px; font-size: 14px; }
.workspace-controls input { width: auto; max-width: 100%; }
.workspace-list { display: grid; gap: 12px; }
.workspace-row { padding: 20px; background: #fff; border: 1px solid #dde4ee; border-radius: 8px; display: flex; align-items: start; gap: 16px; }
.workspace-row > div { flex: 1; min-width: 0; }
.workspace-row h2 { font-size: 18px; margin: 0 0 8px; overflow-wrap: anywhere; }
.workspace-row p { margin: 6px 0; color: #536174; overflow-wrap: anywhere; }
.workspace-empty { padding: 48px 20px; text-align: center; color: #536174; border-block: 1px solid #dde4ee; }
.team-form { border-block: 1px solid #dde4ee; padding: 24px 0; margin-bottom: 24px; display: grid; gap: 18px; }
.team-form fieldset { border: 0; padding: 0; min-width: 0; }
.team-form legend { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.team-members { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 12px; }
.team-members label { display: flex; gap: 10px; align-items: center; overflow-wrap: anywhere; }
.team-members input { width: 18px; height: 18px; flex-shrink: 0; }
#teamsMessage, #myTasksMessage, #teamFormError { color: #a33030; }
#calendarView .weekly-panel { margin: 0; }
@media (max-width: 720px) {
  .app-sidebar .sidebar-toggle { display: none; }
  .app-sidebar .sidebar-brand .brand-logo,
  .app-sidebar .sidebar-brand .brand-logo img.sidebar-logo-full { width: 120px; height: 40px; }
  .demo-mode .app-sidebar { grid-row: 1; }
  .demo-mode .app > .demo-notice { grid-column: 1; grid-row: 2; }
  html.demo-mode #manageView > section:not(.demo-notice) { grid-row: 3; }
  .app > .workspace-page { grid-column: 1; grid-row: 2; margin: 16px; }
  .app-sidebar { height: auto; min-height: 0; overflow: visible; border-right: 0; border-bottom: 1px solid #dde4ee; }
  .workspace-page-header { gap: 16px; }
  .workspace-row { padding: 16px; }
  .app-sidebar { grid-template-columns: 1fr auto; gap: 12px; }
  .mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 10px; grid-column: 2; grid-row: 1; min-height: 44px; padding: 0 14px; border: 1px solid #dde4ee; border-radius: 10px; background: #fff; color: #07182b; font: inherit; font-size: 15px; cursor: pointer; }
  .mobile-menu-toggle:focus-visible { outline: 3px solid #0866ff; outline-offset: 2px; }
  .app-sidebar .nav { display: none; grid-row: 2; grid-column: 1 / -1; overflow: visible; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
  .app-sidebar.mobile-menu-open .nav { display: flex; }
  .app-sidebar .nav button { width: 100%; min-height: 48px; padding: 10px 12px; gap: 12px; justify-content: flex-start; }
  .app-sidebar .nav button svg { width: 22px; height: 22px; flex: 0 0 22px; }
  .app-sidebar .nav > button span { display: inline; white-space: normal; text-align: left; font-size: 16px; }
  .app-sidebar .sidebar-footer { display: none; grid-column: 1 / -1; grid-row: 3; border-top: 1px solid #dde4ee; padding-top: 8px; }
  .app-sidebar.mobile-menu-open .sidebar-footer { display: block; }
  .app-sidebar .sidebar-footer .user-chip { display: block; }
  .app-sidebar .account-menu-toggle { width: 100%; min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .app.sidebar-motion-ready,
  .app.sidebar-motion-ready .sidebar-brand .brand-logo,
  .app.sidebar-motion-ready .sidebar-brand .brand-logo img { transition: none; }
}

/* A quiet account row; full identity is available in the menu. */
.app-sidebar .sidebar-footer { border-top: 1px solid #edf0f4; padding-top: 12px; }
.app-sidebar .account-menu-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  font-family: inherit;
  box-shadow: none;
}
.app-sidebar .account-menu-toggle:is(:hover, [aria-expanded="true"]) {
  border: 1px solid transparent;
  border-radius: 10px;
  background: #f1f4f8;
}
.app-sidebar .account-menu-toggle:focus-visible { outline: 2px solid #0866ff; outline-offset: 2px; }
.app-sidebar .account-menu-toggle .user-avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: #253e60;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}
.app-sidebar .account-menu-toggle .user-chip { display: grid; gap: 3px; min-width: 0; text-align: left; }
.app-sidebar .account-menu-toggle .user-chip strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.app-sidebar .account-menu-toggle .user-organization {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #718096;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}
.app-sidebar .account-menu-toggle .account-more { width: 16px; height: 16px; color: #7a889b; }
.app-sidebar .account-menu-popover {
  bottom: calc(100% + 8px);
  padding: 6px;
  gap: 2px;
  border: 1px solid #e1e6ed;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(7, 24, 43, .1), 0 2px 6px rgba(7, 24, 43, .04);
}
.account-menu-identity { display: grid; justify-items: start; gap: 5px; margin: 0 2px 4px; padding: 12px 10px 14px; border-bottom: 1px solid #edf0f4; }
.account-menu-identity strong { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.account-menu-identity > span { color: #718096; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.account-menu-identity .account-role { margin-top: 3px; padding: 2px 7px; border-radius: 5px; background: #f1f4f8; color: #536174; font-size: 12px; }
.app-sidebar .account-menu-popover button { min-height: 42px; padding: 10px 12px; border-radius: 7px; font-size: 14px; font-weight: 400; }
.app-sidebar .account-menu-popover button svg { width: 17px; height: 17px; color: #718096; }
.app-sidebar .account-menu-popover button:focus-visible { outline: 2px solid #0866ff; outline-offset: -2px; background: #f1f4f8; }
.app.sidebar-collapsed .app-sidebar .account-menu-toggle { grid-template-columns: 1fr; justify-items: center; min-height: 48px; padding: 5px 0; }
.app.sidebar-collapsed .account-menu-toggle :is(.user-chip, .account-more) { display: none; }
.app.sidebar-collapsed .app-sidebar .account-menu-popover { bottom: 18px; width: 240px; max-width: calc(100vw - 96px); }
html[data-interface-theme="dark"] .app-sidebar .sidebar-footer,
html[data-interface-theme="dark"] .account-menu-identity { border-color: #28394d; }
html[data-interface-theme="dark"] .app-sidebar .account-menu-toggle { background: transparent; border-color: transparent; }
html[data-interface-theme="dark"] .app-sidebar .account-menu-toggle:is(:hover, [aria-expanded="true"]) { background: #233348; border-color: transparent; }
html[data-interface-theme="dark"] .app-sidebar .account-menu-toggle .user-avatar { background: #334f73; color: #eaf2ff; }
html[data-interface-theme="dark"] .app-sidebar .account-menu-toggle :is(.user-organization, .account-more),
html[data-interface-theme="dark"] .account-menu-identity > span { color: #a3b3c8; }
html[data-interface-theme="dark"] .app-sidebar .account-menu-popover { background: #152334; border-color: #34455d; }
html[data-interface-theme="dark"] .account-menu-identity .account-role,
html[data-interface-theme="dark"] .app-sidebar .account-menu-popover button:is(:hover, :focus-visible) { background: #233348; }
html[data-interface-theme="dark"] .app-sidebar .account-menu-popover button { color: #e0e8f3; }
html[data-interface-theme="dark"] .app-sidebar .account-menu-popover button svg { color: #a3b3c8; }
html[data-interface-theme="dark"] .app-sidebar .account-menu-popover #logout,
html[data-interface-theme="dark"] .app-sidebar .account-menu-popover #logout svg { color: #f3a6a0; }