/* Shared app shell from the approved board concept: sidebar, project header, view tabs and task toolbar on every page. */
/* Typography and spacing are measured against the approved 1658px composition. */
.app .app-nav button { padding-left: 44px !important; }
.app .app-nav button::before { left: 14px !important; }
.app .project-row.active { background: transparent !important; box-shadow: none !important; border-radius: 7px !important; }
.app .project > span { min-width: 0 !important; }
.app .project strong { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.workspace .project-heading > .project-icon { box-shadow: none !important; }
.workspace .project-heading > .project-icon::before { background: #7954d6 !important; }
.app { --accent: #7954d6; --primary: #7954d6; grid-template-columns: 224px minmax(0,1fr) !important; background: #fff !important; }
.app .sidebar { width: 224px !important; padding: 24px 12px 12px !important; background: #fbfaff !important; border-right: 1px solid #eae7f0 !important; }
.app .brand { padding: 0 10px 34px !important; gap: 14px !important; }
.app .brand h1 { font-size: 25px !important; font-weight: 650 !important; letter-spacing: -.7px; color: #191823 !important; }
.app .brand-logo { width: 34px !important; height: 34px !important; }
.app .app-nav { gap: 6px !important; }
.app .app-nav button { min-height: 46px !important; padding: 12px 14px 12px 44px !important; font-size: 15px !important; font-weight: 450 !important; border-radius: 7px !important; color: #494558 !important; }
.app .projects-section { margin-top: 26px !important; }
.app .side-section-head { padding: 0 12px 12px !important; }
.app .side-section-title { font-size: 12px !important; text-transform: uppercase; color: #858197 !important; font-weight: 500 !important; }
.app .project-list { gap: 7px !important; }
.app .project { min-height: 46px !important; padding: 10px 13px !important; border-radius: 7px !important; gap: 12px !important; }
.app .project strong { font-size: 14px !important; font-weight: 500 !important; }
.app .project-row.active .project { background: #eee8ff !important; color: #7047db !important; box-shadow: none !important; }
.board-profile-copy { display: none; }
.app .sidebar-profile { margin-top: auto !important; padding: 16px 0 0 !important; border-top: 1px solid #eae7f0; }
.app .sidebar-profile-button { display: flex !important; width: 100% !important; gap: 10px; text-align: left; padding: 8px 4px !important; }
.app .board-profile-copy { display: grid; min-width: 0; gap: 4px; }
.board-profile-copy strong,.board-profile-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-profile-copy strong { color: #484353; font-size: 13px; font-weight: 500; }
.board-profile-copy small { color: #827b90; font-size: 11px; }
.workspace { padding: 0 !important; gap: 0 !important; background: #fff !important; min-width: 0; }
.workspace .utility-bar { display: none !important; }
.workspace .topbar { padding: 24px 24px 14px !important; min-height: 98px !important; gap: 16px !important; align-items: center !important; border: 0 !important; }
.workspace .project-heading { flex: 1; display: flex !important; align-items: center !important; gap: 16px !important; min-width: 0; }
.workspace #projectIcon { width: 52px !important; height: 52px !important; flex: 0 0 52px !important; background: #eee8ff !important; color: #8054e2 !important; border: 0 !important; border-radius: 10px !important; }
.workspace #projectTitle { font-size: 27px !important; line-height: 1.3 !important; font-weight: 650 !important; letter-spacing: -.65px !important; }
.workspace #projectMeta { display: block !important; color: #898397 !important; font-size: 14px !important; margin-top: 6px !important; }
.workspace #projectMembers { margin-left: auto !important; display: flex !important; }
.workspace #projectMembers .avatar { width: 34px !important; height: 34px !important; border: 2px solid #fff !important; }
.workspace #shareProject:not([hidden]) { display: block !important; }
.workspace #newTask { display: inline-flex !important; align-items: center; gap: 10px; min-height: 43px !important; padding: 10px 20px !important; background: #7954d6 !important; border: 0 !important; border-radius: 7px !important; color: #fff !important; font-size: 15px !important; }
.workspace #newTask::before { content: '+'; font-size: 24px; line-height: 16px; }
.workspace .top-actions { gap: 8px !important; }
.workspace .view-tabs { padding: 0 24px !important; margin: 0 !important; gap: 26px !important; min-height: 48px !important; border-bottom: 1px solid #ece8f2 !important; }
.workspace .view-tabs button { padding: 13px 0 !important; min-width: 0 !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; font-size: 14px !important; font-weight: 450 !important; color: #746c84 !important; background: transparent !important; }
.workspace .view-tabs button.active { color: #7954d6 !important; border-bottom-color: #7954d6 !important; font-weight: 600 !important; }
.workspace #filters { padding: 17px 24px !important; border: 0 !important; margin: 0 !important; background: #fff !important; }
.workspace .filter-row { display: flex !important; flex-wrap: nowrap !important; gap: 12px !important; width: 100%; }
.workspace #searchInput { width: min(290px,32%) !important; flex: 0 1 290px !important; margin-right: auto !important; padding: 10px 12px 10px 36px !important; background: #fff url('/icons/lucide/search.svg') no-repeat 12px center !important; background-size: 16px !important; }
.workspace .filter-row :is(button,input,select) { min-height: 40px !important; height: 40px !important; border: 1px solid #ddd7e7 !important; border-radius: 7px !important; box-shadow: 0 1px 2px #32264a04 !important; font-size: 13px !important; color: #514a60 !important; background-color: #fff !important; }
.workspace #toggleFilters { padding: 8px 14px !important; min-width: 96px !important; }
.workspace #toggleFilters::before { content: ''; display: inline-block; width: 15px; height: 15px; vertical-align: -3px; margin-right: 8px; background: currentColor; mask: url('/icons/lucide/list-filter.svg') center/contain no-repeat; }
.workspace #sortFilter { width: 165px !important; padding: 8px 30px 8px 12px !important; }
.app.sidebar-collapsed { grid-template-columns: 72px minmax(0,1fr) !important; }
.app.sidebar-collapsed .sidebar { width: 72px !important; }
.app.sidebar-collapsed .board-profile-copy { display: none; }
@media (max-width: 1100px) {
  .workspace #projectMembers { display: none !important; }
}
@media (max-width: 760px) {
  .app,.app.sidebar-collapsed { grid-template-columns: minmax(0,1fr) !important; }
  .app .sidebar { width: 224px !important; }
  .workspace .topbar { padding: 18px 14px 12px 48px !important; min-height: 82px !important; }
  .workspace #projectIcon { display: grid !important; width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; flex-basis: 32px !important; }
  .workspace #projectIcon::before { width: 20px !important; height: 20px !important; }
  .workspace .project-heading { gap: 10px !important; }
  .workspace #projectTitle { font-size: 20px !important; }
  .workspace #projectMeta { font-size: 12px !important; }
  .workspace #newTask { min-height: 36px !important; padding: 8px 12px !important; font-size: 13px !important; }
  .workspace .view-tabs { padding: 0 14px !important; gap: 22px !important; }
  .workspace #filters { padding: 12px 14px !important; }
  .workspace .filter-row { display: grid !important; grid-template-columns: auto minmax(0,1fr) auto !important; gap: 8px !important; }
  .workspace #searchInput { grid-row: 1; grid-column: 1/-1; width: 100% !important; }
  .workspace #toggleFilters { grid-row: 2; grid-column: 1; min-width: 0 !important; padding: 8px !important; }
  .workspace #sortFilter { grid-row: 2; grid-column: 3; width: 107px !important; font-size: 12px !important; }
}

/* Keep legacy fixed-width sidebar and badge rules from leaking into this surface. */
.app { grid-template-columns: 260px minmax(0,1fr) !important; }
.app .sidebar { width: 260px !important; }
.workspace .topbar { margin: 0 !important; }
.app .app-nav button.active { background: transparent !important; color: #494558 !important; }
.app .app-nav { border: 0 !important; }
.app .project-row { width: 100% !important; padding: 0 !important; margin: 0 !important; }
.app .project { width: 100% !important; }
.app .project > span { flex: 1; }
.app .project-row .project-mini-icon { flex: 0 0 24px; }
.app.sidebar-collapsed { grid-template-columns: 72px minmax(0,1fr) !important; }
.app.sidebar-collapsed .sidebar { width: 72px !important; padding-inline: 10px !important; }
.app.sidebar-collapsed .app-nav button { font-size: 0 !important; padding: 0 !important; }
.app.sidebar-collapsed .app-nav button span { display: none !important; }
.app.sidebar-collapsed .brand { padding: 0 0 34px !important; }
.app.sidebar-collapsed .brand h1,.app.sidebar-collapsed .project strong { display: none !important; }
.app.sidebar-collapsed .project { padding: 6px !important; }
.app.sidebar-collapsed .sidebar-profile-button { justify-content: center !important; }
@media (max-width: 760px) {
  .app { grid-template-columns: 72px minmax(0,1fr) !important; }
  .workspace .topbar { padding: 16px 14px 12px !important; }
  .workspace .filter-row { grid-template-columns: auto minmax(0,1fr) !important; }
  .workspace #sortFilter { grid-column: 1/-1; grid-row: 3; width: 100% !important; }
  .workspace .top-actions { flex-wrap: wrap; }
}

/* One typeface for the whole app (matches the task card). */
:root { --app-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; }
body,.login-screen,dialog,.toast,.app .sidebar,.workspace { font-family: var(--app-font) !important; }
.app .sidebar :is(button,strong,small),.workspace :is(button,input,select,textarea,strong,p),dialog :is(button,input,select,textarea),.login-screen :is(button,input,select) { font-family: var(--app-font) !important; }
.app .sidebar { padding-top: 28px !important; }
.app .brand { margin: 0 !important; padding: 0 12px 28px !important; min-height: 80px !important; transform: none !important; }
.app .brand h1 { font-size: 28px !important; font-weight: 600 !important; letter-spacing: -.8px !important; }
.app .brand-logo { filter: none !important; }
.app .brand-logo i { box-shadow: none !important; }
.app .app-nav { gap: 8px !important; }
.app .app-nav button { height: 48px !important; font-size: 17px !important; padding-left: 60px !important; }
.app .app-nav button::before { left: 18px !important; width: 24px !important; height: 24px !important; color: #666076 !important; }
.app .projects-section { margin-top: 30px !important; padding-top: 0 !important; border: 0 !important; }
.app .side-section-head { min-height: 40px !important; padding-bottom: 12px !important; }
.app .side-section-title { font-size: 14px !important; }
.app .project-list { gap: 8px !important; }
.app .project { min-height: 48px !important; padding: 12px 16px !important; gap: 20px !important; }
.app .project strong { font-size: 16px !important; }
.app .sidebar .project-mini-icon { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
.app .sidebar .project-mini-icon::before { width: 24px !important; height: 24px !important; background: #696178 !important; mask: url('/icons/lucide/folder.svg') center/contain no-repeat !important; }
.app .project-row.active .project-mini-icon::before { background: #8155df !important; }
.app .sidebar-profile { margin-bottom: 12px !important; padding-top: 20px !important; }
.app .sidebar-profile-button { justify-content: flex-start !important; gap: 12px !important; padding: 4px 2px !important; }
.app .sidebar-profile-avatar { width: 44px !important; height: 44px !important; flex: 0 0 44px !important; }
.app .sidebar-profile-avatar .avatar { width: 44px !important; height: 44px !important; font-size: 17px !important; }
.app .board-profile-copy strong { font-size: 15px !important; font-weight: 400 !important; }
.app .board-profile-copy small { font-size: 12px !important; }
.app .sidebar-collapse-dock { position: absolute !important; top: 38px !important; bottom: auto !important; right: 4px !important; left: auto !important; width: 26px !important; padding: 0 !important; border: 0 !important; opacity: 0; }
.app .sidebar:is(:hover,:focus-within) .sidebar-collapse-dock { opacity: 1; }
.workspace .topbar { min-height: 105px !important; padding-top: 23px !important; padding-bottom: 15px !important; }
.workspace .project-heading { gap: 24px !important; }
.workspace #projectIcon { width: 62px !important; min-width: 62px !important; height: 62px !important; flex-basis: 62px !important; }
.workspace #projectTitle { font-size: 30px !important; font-weight: 600 !important; }
.workspace #projectMeta { font-size: 16px !important; }
.workspace .view-tabs { min-height: 49px !important; gap: 42px !important; padding-left: 32px !important; }
.workspace .view-tabs button { font-size: 16px !important; padding: 13px 0 !important; }
.workspace #filters { padding-block: 20px !important; }
.workspace .filter-row { gap: 18px !important; }
.workspace .filter-row :is(button,input,select) { font-size: 15px !important; min-height: 46px !important; height: 46px !important; }
.workspace #searchInput { flex-basis: 320px !important; width: 320px !important; }
.workspace #toggleFilters { min-width: 129px !important; }
.workspace #sortFilter { width: 240px !important; }
.workspace #newTask { min-height: 48px !important; font-size: 17px !important; padding-inline: 21px !important; background: #7041e8 !important; }
.workspace #projectMembers .avatar { width: 42px !important; height: 42px !important; font-size: 15px !important; }
.app.sidebar-collapsed .sidebar-collapse-dock { top: auto !important; bottom: 14px !important; left: 22px !important; opacity: 1; }
.app.sidebar-collapsed .sidebar-profile { margin-bottom: 44px !important; }
.app.sidebar-collapsed .app-nav button { font-size: 0 !important; padding: 0 !important; }
.app.sidebar-collapsed .app-nav button::before { left: 14px !important; }
.app.sidebar-collapsed .project { padding: 6px !important; }
.app:not(.sidebar-collapsed) .projects-section { margin-top: 3px !important; }
.app:not(.sidebar-collapsed) .project-row { grid-template-columns: minmax(0,1fr) !important; position: relative; height: 48px !important; }
.app:not(.sidebar-collapsed) .project { grid-template-columns: 24px minmax(0,1fr) !important; height: 48px !important; }
.app:not(.sidebar-collapsed) .project-actions { position: absolute !important; right: 2px !important; top: 9px !important; }
.workspace #filters { padding-top: 17px !important; }
@media (max-width: 1100px) {
 .workspace #sortFilter { width: 160px !important; }
 .workspace #searchInput { min-width: 110px !important; }
}
@media (max-width: 760px) {
 .workspace .topbar { min-height: 82px !important; padding: 16px 14px 12px !important; }
 .workspace .project-heading { gap: 10px !important; }
 .workspace #projectIcon { width: 32px !important; min-width: 32px !important; height: 32px !important; flex-basis: 32px !important; }
 .workspace #projectTitle { font-size: 20px !important; }
 .workspace #projectMeta { font-size: 12px !important; }
 .workspace #newTask { font-size: 14px !important; min-height: 38px !important; }
 .workspace .view-tabs { gap: 22px !important; padding-inline: 14px !important; }
 .workspace .view-tabs button { font-size: 14px !important; }
 .workspace #filters { padding-block: 12px !important; }
 .workspace .filter-row { gap: 8px !important; }
 .workspace #searchInput,.workspace #sortFilter { width: 100% !important; }
}


/* Project pages already have "+ Задача" in the header; the toolbar button stays for "Мои задачи". */
.workspace:has(#viewTabs:not([hidden])) #taskToolbarAdd { display: none !important; }
.workspace #taskToolbarAdd { flex: 0 0 auto !important; padding: 8px 16px !important; background: #7954d6 !important; border-color: #7954d6 !important; color: #fff !important; font-weight: 500 !important; }
.workspace .topbar { background: #fff !important; backdrop-filter: none !important; }
@media (max-width: 760px) {
 .workspace .view-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; }
 .workspace .view-tabs button { flex: 0 0 auto !important; }
}
.workspace #projectIcon[hidden] { display: none !important; }
@media (max-width: 760px) {
 .workspace #toggleFilters { min-width: 0 !important; }
 .workspace #taskToolbarAdd { grid-row: 2; grid-column: 2; width: 100% !important; min-width: 0 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px !important; }
}
/* Project views show their own counters; the old summary strip is redundant there. */
.workspace:has(#viewTabs:not([hidden])) #summary { display: none !important; }
/* Page counters (Журнал and other non-project pages) as board-style stat tiles. */
.workspace > #summary:not(:empty) { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)) !important; gap: 12px !important; margin: 16px 24px 0 !important; padding: 0 !important; background: transparent !important; }
.workspace > #summary .metric { display: grid !important; gap: 6px !important; padding: 12px 14px !important; border: 0 !important; border-radius: 8px !important; background: #f8f6fc !important; box-shadow: none !important; }
.workspace > #summary .metric span { color: #898397 !important; font-size: 13px !important; }
.workspace > #summary .metric strong { color: #24202c !important; font-size: 22px !important; font-weight: 600 !important; }
@media (max-width: 760px) {
 .workspace > #summary:not(:empty) { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; margin: 12px 14px 0 !important; }
 .workspace > #summary .metric strong { font-size: 18px !important; }
}
/* Project tabs stay on one line at every width (scroll sideways if needed); the toolbar wraps on narrow desktop windows. */
.workspace .view-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; }
.workspace .view-tabs button { flex: 0 0 auto !important; }
@media (max-width: 1100px) { .workspace .view-tabs { gap: 24px !important; } }
@media (min-width: 761px) and (max-width: 1100px) {
 .workspace .filter-row { flex-wrap: wrap !important; }
 .workspace #searchInput { flex: 1 1 220px !important; width: auto !important; min-width: 180px !important; }
}