/* Full-width board. Visual references: official PLANKA and Taskcafe screenshots. */
:root { --side: 0px; --green: #126b7d; --green-soft: #e5f2f5; }
.app-layout { display: block; min-height: 100vh; background: #f4f7f9; }
.main-shell { width: 100%; margin-left: 0; }
.global-header {
  height: 72px; padding: 0 30px; display: flex; align-items: center; gap: 34px;
  background: #fff; color: #172c3b; border-bottom: 1px solid #e0e8ed;
  position: relative; z-index: 40;
}
.global-brand { display: flex; align-items: center; gap: 10px; padding: 0; flex-shrink: 0; text-align: left; }
.global-brand .brand-mark { width: 36px; height: 36px; border-radius: 10px; background: #14758a; box-shadow: none; color: #fff; }
.global-brand > span:last-child { color: #183644; font-size: 23px; font-weight: 750; line-height: 1.1; letter-spacing: 1px; }
.global-brand small { display: block; font-size: 8px; font-weight: 550; letter-spacing: 2.6px; margin-top: 5px; color: #496774; }
.global-nav { display: flex; gap: 5px; align-items: center; }
.global-nav .nav-button { width: auto; margin: 0; padding: 10px 12px; gap: 7px; color: #3d5463; font-size: 13px; font-weight: 500; white-space: nowrap; border-radius: 7px; }
.global-nav .nav-button svg { width: 16px; height: 16px; color: #4b6677; }
.global-nav .nav-button:hover { color: #126b7d; background: #edf5f7; }
.global-nav .nav-button.active { color: #0d6173; background: #e4f1f4; font-weight: 650; }
.global-nav .nav-button.active::before { display: none; }
.global-nav .nav-button.active svg { color: #0d6173; }
.global-nav .nav-button .count { color: #1c5f70; background: #dcebef; border-radius: 5px; padding: 2px 5px; font-size: 10px; margin-left: 0; }
.header-menu { position: relative; }
.header-menu summary { cursor: pointer; display: flex; align-items: center; gap: 6px; list-style: none; color: #3d5463; font-size: 13px; padding: 11px 10px; border-radius: 7px; }
.header-menu summary::-webkit-details-marker { display: none; }
.header-menu summary svg { width: 12px; height: 12px; }
.header-menu[open] summary, .header-menu summary:hover { background: #edf5f7; color: #126b7d; }
.header-dropdown { position: absolute; z-index: 60; top: 48px; right: 0; min-width: 190px; padding: 6px; background: #fff; border: 1px solid #dce6ed; border-radius: 9px; box-shadow: 0 10px 32px #17374824; }
.header-dropdown .nav-button { width: 100%; justify-content: flex-start; margin: 2px 0; }
.header-tools { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.header-tools .top-search { background: #f3f6f8; border-color: #e3e9ef; border-radius: 7px; padding: 8px 10px; }
.header-tools .top-search input { width: 160px; font-size: 12px; color: #243c4a; }
.header-tools .top-search svg { color: #54717f; }
.key-hint { color: #496675; border-color: #d3e0e6; }
.header-icon { padding: 5px; color: #3d5968; border-radius: 6px; }
.header-icon:hover { background: #e8f3f6; }
.profile-button { display: flex; align-items: center; gap: 7px; padding: 0; color: #324f5f; font-size: 12px; white-space: nowrap; }
.profile-button > svg { width: 12px; height: 12px; }
.header-tools .profile-button { gap: 6px; padding: 7px 9px; border: 1px solid #dce7ed; border-radius: 6px; color: #365767; }
.header-tools .profile-button > svg { display: block; width: 16px; height: 16px; }
.header-tools .profile-button > span { display: inline; }
.project-strip { background: #fff; border-bottom: 1px solid #dce7ec; padding: 0 30px; display: flex; gap: 24px; align-items: center; min-height: 51px; }
.project-strip-label { display: flex; align-items: center; gap: 7px; color: #536b7a; font-size: 11px; white-space: nowrap; }
.project-strip-label svg { width: 15px; height: 15px; }
.project-tabs { display: flex; align-items: stretch; gap: 7px; min-width: 0; overflow-x: auto; scrollbar-width: none; flex: 1; }
.project-tab { position: relative; display: flex; align-items: center; gap: 8px; padding: 17px 13px; color: #425f6e; font-size: 12px; white-space: nowrap; font-weight: 500; }
.project-tab:hover { background: #f0f7f9; color: #0d6173; }
.project-tab.active { color: #0d6173; font-weight: 700; }
.project-tab.active::after { content: ""; position: absolute; height: 3px; left: 13px; right: 13px; bottom: 0; background: #167b8f; border-radius: 3px 3px 0 0; }
.project-tab .project-dot { width: 7px; height: 7px; border-radius: 2px; }
.new-project-button { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #3e6171; padding: 6px 0 6px 8px; white-space: nowrap; }
.new-project-button svg { width: 14px; height: 14px; }
.new-project-button:hover { color: #08768b; }

/* A single continuous board canvas, across the whole page. */
.board-route { background: #1b7487; }
.board-route .main-shell { min-height: calc(100vh - 123px); background: #1b7487; }
.board-route .page-content { max-width: 1880px; padding: 24px 32px 24px; margin: 0 auto; }
.board-eyebrow { display: none; }
.board-route .heading-copy h1 { color: #fff; font-size: 30px; font-weight: 700; letter-spacing: -.5px; }
.board-route .project-hero .heading-copy p { margin-left: 0; color: #e5f3f6; font-size: 13px; margin-top: 9px; }
.board-route .heading-actions .btn { color: #fff; border-color: #8cc0ca; background: #1b7487; min-height: 37px; font-size: 12px; box-shadow: none; }
.board-route .heading-actions .btn:hover { background: #135f70; border-color: #d1eaf0; }
.board-route .heading-actions .btn.primary { background: #fff; border-color: #fff; color: #115e70; font-weight: 700; }
.board-route .heading-actions .btn.primary:hover { background: #edf8fb; }
.board-route .project-meta { color: #e7f5f7; font-size: 11px; margin-top: 17px; gap: 12px; }
.board-route .avatar-stack .avatar { border-color: #1b7487; }
.board-route .meta-divider { background: #7eb5c1; }
.board-route .local-pill { background: #125f70; color: #fff; border: 1px solid #5e9fab; font-size: 10px; }
.board-route .local-pill i { background: #99e5c5; }
.board-route .stats { background: #135f72; border: 1px solid #4a94a4; border-radius: 9px; gap: 0; margin: 19px 0 20px; }
.board-route .metric { border: none; background: none; box-shadow: none; border-radius: 0; min-height: 59px; padding: 11px 20px; gap: 10px; }
.board-route .metric + .metric { border-left: 1px solid #4a8798; }
.board-route .metric .stat-icon { background: #24788c; color: #ebf9fc; width: 30px; height: 30px; border-radius: 7px; }
.board-route .metric-copy { display: flex; align-items: baseline; gap: 10px; }
.board-route .metric .stat-label { color: #d7edf2; font-size: 11px; }
.board-route .metric .stat-value { color: #fff; font-size: 24px; font-weight: 650; margin-top: 0; }
.board-route .metric .stat-value small { color: #e4f2f6; font-size: 10px; }
.board-route .metric-chip { color: #e4f3f6; background: none; font-size: 10px; padding: 0; }
.board-route .metric.green .metric-chip { color: #c2f5df; background: transparent; }
.board-route .metric.rose .metric-chip { color: #ffe0c2; background: transparent; }
.board-route .task-workspace { padding: 0; border: none; border-radius: 0; background: none; box-shadow: none; }
.board-route .views-bar { margin-bottom: 14px; }
.board-route .view-tabs { background: #135f72; border: 1px solid #60a3b1; border-radius: 7px; padding: 3px; gap: 3px; }
.board-route .view-tab { color: #e6f4f7; font-size: 12px; border-radius: 4px; padding: 8px 13px; }
.board-route .view-tab.active { background: #fff; color: #125f70; box-shadow: none; }
.board-route .view-tab:hover:not(.active) { background: #297f91; color: #fff; }
.board-route .view-right { color: #e9f7fa; font-size: 10px; }
.board-route .view-right svg { color: #a5ebd0; }
.board-route .board-toolbar { border: none; padding: 0; margin-bottom: 2px; min-height: 34px; }
.board-route .filter-symbol, .board-route .board-hint { color: #edf8fa; }
.board-route .filter-select { background: #fff; border: 1px solid #fff; color: #244b5d; border-radius: 5px; font-size: 11px; min-height: 32px; }
.board-route .clear-filter { color: #fff; text-decoration: underline; }
.board-route .kanban { padding-top: 17px; gap: 18px; grid-template-columns: repeat(4, minmax(230px, 1fr)); }
.board-route .column { background: #e8f0f3; border: 1px solid #c8dce3; border-radius: 8px; padding: 13px 11px 11px; }
.board-route .column-header { padding: 2px 4px 14px; }
.board-route .column-title { color: #183f51; font-size: 13px; font-weight: 700; }
.board-route .column-count { color: #31596b; background: #d3e3e9; font-size: 11px; padding: 2px 6px; }
.board-route .column-header .small-icon { color: #3e6677; }
.board-route .column-header .small-icon:hover { background: #cfdee7; color: #13465a; }
.board-route .column[data-status="progress"] .column-count { background: #d3e4ff; color: #214f9d; }
.board-route .column[data-status="review"] .column-count { background: #e7dafa; color: #623799; }
.board-route .column[data-status="done"] .column-count { background: #ccebdc; color: #176143; }
.board-route .task-card { padding: 15px; border: 1px solid #cfdee5; border-radius: 7px; background: #fff; box-shadow: 0 2px 2px #163e4c09; margin-bottom: 11px; }
.board-route .task-card:hover { border-color: #2f8699; box-shadow: 0 4px 12px #154c6020; transform: translateY(-1px); }
.board-route .task-card h3 { color: #172f3e; font-size: 14px; line-height: 1.7; font-weight: 650; }
.board-route .task-card p { color: #405e6e; font-size: 12px; line-height: 1.8; }
.board-route .card-code { color: #496879; font-size: 10px; }
.board-route .card-bottom { border-color: #e4edf2; }
.board-route .card-date, .board-route .card-comments, .board-route .card-checks, .board-route .card-project { color: #466577; }
.board-route .card-date.overdue { background: #ffe7e7; color: #a92e38; }
.board-route .card-date.today { background: #fff0d3; color: #8b5505; }
.board-route .mini-progress { background: #e3edf2; }
.board-route .mini-progress i { background: #3193a4; }
.board-route .tag { font-weight: 600; }
.board-route .tag.design { color: #66369d; background: #eee4fa; }
.board-route .tag.dev { color: #245ba5; background: #dfebff; }
.board-route .tag.content { color: #8b5400; background: #fff0ca; }
.board-route .tag.ops { color: #a12f50; background: #ffe1e9; }
.board-route .tag.research { color: #166440; background: #d9f3e5; }
.board-route .task-card .cover { background: #e4f2f5; border-color: #cee5e9; }
.board-route .mini-browser { border-color: #b8d7df; }
.board-route .mini-browser span { background: #9fcbd8; }
.board-route .mini-browser i { background: #d0e8ef; }
.board-route .add-card { color: #365e70; border-color: #aac9d5; border-radius: 5px; background: #dfebf0; font-size: 11px; }
.board-route .add-card:hover { color: #125f70; background: #fff; border-color: #5a99ac; }
.board-route .column.drag-over { border: 1px dashed #fff; background: #d2eaf1; }
.board-route .page-foot, .board-route .page-foot button { color: #e5f4f8; }
.board-route .page-foot { padding-top: 10px; }
.board-route .filter-result { color: #fff; }
.board-route .task-workspace > .list-wrap, .board-route .task-workspace > .calendar, .board-route .task-workspace > .schedule-wrap { margin-top: 18px; background: #fff; border-radius: 8px; border-color: #d1e1e8; }
.board-route .empty-state { color: #e3f4f8; }
.board-route .empty-state h3, .board-route .empty-state p { color: #e3f4f8; }
.board-route .list-wrap .empty-state, .board-route .list-wrap .empty-state h3, .board-route .list-wrap .empty-state p { color: #405e6e; }
.utility-route .page-content { max-width: 1600px; padding: 33px 35px; }
.utility-route .btn.primary, .modal .btn.primary { background: #126b7d; border-color: #126b7d; color: #fff; box-shadow: none; }
.utility-route .btn.primary:hover, .modal .btn.primary:hover { background: #0d5666; border-color: #0d5666; }
.toast { left: 50%; background: #123f50; border-color: #347182; }
.toast button { color: #b4e7f0; }
.modal-backdrop { background: #0d303d75; }
.modal-header h2 { color: #1b3e4f; }
.modal .field input, .modal .field textarea, .modal .field select { outline-color: #4b9eae; }
.modal .form-side { background: #f0f6f8; }

@media (max-width: 1350px) {
  .global-header { gap: 22px; padding: 0 24px; }
  .global-nav { gap: 1px; }
  .global-nav .nav-button { padding: 10px 9px; font-size: 12px; gap: 6px; }
  .header-tools { gap: 11px; }
  .header-tools .top-search input { width: 125px; }
  .profile-button > span:not(.avatar) { display: none; }
  .project-strip { padding: 0 24px; gap: 18px; }
  .board-route .page-content { padding: 26px 25px 22px; }
  .board-route .metric { padding: 14px 16px; }
  .board-route .kanban { gap: 14px; }
}
@media (max-width: 1050px) {
  .global-header { flex-wrap: wrap; height: auto; min-height: 67px; gap: 0 20px; padding-top: 14px; }
  .global-brand { order: 0; }
  .header-tools { order: 1; margin-left: auto; }
  .global-nav { order: 2; width: 100%; margin-top: 12px; min-height: 46px; }
  .global-nav .nav-button { font-size: 12px; padding: 9px 12px; }
  .header-dropdown { left: 0; right: auto; }
  .header-menu summary { font-size: 12px; }
  .project-strip-label { display: none; }
  .board-route .metric-chip { display: none; }
  .board-route .view-right { display: none; }
}
@media (max-width: 760px) {
  .global-header { padding: 13px 16px 0; gap: 0 14px; }
  .global-brand { gap: 8px; }
  .global-brand .brand-mark { width: 30px; height: 30px; border-radius: 8px; }
  .global-brand > span:last-child { font-size: 20px; }
  .global-brand small { font-size: 7px; letter-spacing: 2px; margin-top: 3px; }
  .header-tools { gap: 10px; }
  .header-tools .top-search { padding: 7px 8px; border-radius: 5px; }
  .header-tools .top-search input { width: 83px; font-size: 11px; }
  .header-tools .top-search svg, .header-tools .key-hint { display: none; }
  .header-icon { display: none; }
  .profile-button { gap: 0; }
  .profile-button > svg { display: none; }
  .global-nav { gap: 0; margin-top: 12px; min-height: 43px; justify-content: space-between; }
  .global-nav .nav-button { padding: 8px 5px; font-size: 10px; gap: 4px; }
  .global-nav > .nav-button svg { display: none; }
  .global-nav .nav-button .count { padding: 1px 4px; font-size: 9px; }
  .header-menu summary { padding: 8px 5px; font-size: 10px; gap: 3px; }
  .header-dropdown { left: auto; right: 0; min-width: 170px; top: 37px; }
  .header-dropdown .nav-button { font-size: 12px; padding: 10px; }
  .project-strip { padding: 0 15px; gap: 8px; min-height: 45px; }
  .project-tab { font-size: 11px; padding: 15px 10px; gap: 6px; }
  .project-tab.active::after { left: 10px; right: 10px; }
  .new-project-button { padding-left: 5px; }
  .new-project-button span { display: none; }
  .board-route .page-content { padding: 23px 16px 19px; }
  .board-eyebrow { font-size: 8px; letter-spacing: 1.7px; margin-bottom: 8px; }
  .board-route .heading-copy h1 { font-size: 23px; }
  .board-route .project-hero .heading-copy p { font-size: 11px; margin-top: 8px; }
  .board-route .heading-row { gap: 10px; }
  .board-route .heading-actions { padding-top: 20px; }
  .board-route .heading-actions .btn { font-size: 10px; padding: 8px 10px; min-height: 33px; }
  .board-route .project-meta { font-size: 10px; gap: 8px; margin-top: 15px; }
  .board-route .project-meta .meta-end { display: none; }
  .board-route .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 19px 0 21px; }
  .board-route .metric { min-height: 69px; padding: 12px; gap: 10px; }
  .board-route .metric-copy { display: block; }
  .board-route .metric .stat-value { margin-top: 5px; }
  .board-route .metric + .metric { border-left: none; }
  .board-route .metric:nth-child(even) { border-left: 1px solid #4a8798; }
  .board-route .metric:nth-child(n+3) { border-top: 1px solid #4a8798; }
  .board-route .metric .stat-icon { width: 30px; height: 30px; }
  .board-route .metric .stat-icon svg { width: 16px; height: 16px; }
  .board-route .metric .stat-label { font-size: 10px; }
  .board-route .metric .stat-value { font-size: 23px; }
  .board-route .view-tabs { overflow-x: auto; gap: 1px; }
  .board-route .view-tab { padding: 8px 11px; font-size: 11px; }
  .board-route .views-bar { margin-bottom: 12px; }
  .board-route .board-toolbar { padding: 0; min-height: 32px; margin-bottom: 0; }
  .board-route .filters { gap: 6px; }
  .board-route .filter-select { font-size: 10px; padding: 7px 17px 7px 8px; }
  .board-route .board-hint, .board-route .filter-symbol { display: none; }
  .board-route .kanban { grid-template-columns: repeat(4, 270px); gap: 13px; padding-top: 16px; }
  .board-route .column { padding: 12px 10px; }
  .board-route .task-card { padding: 14px; }
  .board-route .task-card h3 { font-size: 13px; }
  .board-route .task-card p { font-size: 12px; }
  .utility-route .page-content { padding: 25px 17px; }
  .toast { left: 50%; }
}