/* 2026-07-10 v11
   Final scroll ownership and persistent side-card background overrides.
   Loaded after all legacy styles so later page renders cannot remove them.
*/

:root {
  --dnxt-panel-art: url('/img/side-card-bg.png?v=20260710-v11');
}

/* ---------- One reliable height chain for every application page ---------- */
html,
body,
.shell {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.shell,
.workspace,
.content-layout,
.canvas-area,
.view-panel,
.view-panel.active {
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

.workspace {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

.global-topbar,
.project-header,
.toolbar-row {
  flex: 0 0 auto;
}

.content-layout {
  flex: 1 1 auto !important;
  height: auto !important;
  overflow: hidden !important;
}

/* The canvas holds exactly one active page. The active page owns normal page scrolling. */
.canvas-area {
  flex: 1 1 auto !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: contain;
}

.view-panel {
  width: 100%;
  height: 100%;
  max-height: 100%;
}

.view-panel.active,
#dashboardView.active,
#listView.active,
#calendarView.active,
#boardView.active,
#completedView.active {
  display: block;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Dashboard, favorites, trash, teams and general pages should grow naturally inside the active scroller. */
.home-dashboard,
.starred-view,
.trash-page,
.archived-projects-page,
.team-page,
.custom-simple-page,
.organization-detail-page,
.superadmin-page {
  min-height: min-content;
  height: auto !important;
}

/* ---------- List / grid pages ---------- */
.grid-shell,
.grid-header,
.task-grid,
.section-group,
.section-tasks {
  box-sizing: border-box;
}

.grid-shell {
  min-width: 100% !important;
  width: max-content !important;
}

/* My Workspace keeps controls fixed while only its table area scrolls. */
body.app-nav-mytasks #dashboardView.active {
  overflow: hidden !important;
}

body.app-nav-mytasks .mytasks-page-layout {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.app-nav-mytasks .mytasks-title-action-row,
body.app-nav-mytasks .mytasks-tabs-toolbar-row,
body.app-nav-mytasks .mytasks-page-head,
body.app-nav-mytasks .mytasks-stats-bar {
  flex: 0 0 auto !important;
}

body.app-nav-mytasks .mytasks-list-view {
  flex: 1 1 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable both-edges;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
}

body.app-nav-mytasks .mytasks-list-view .grid-shell,
body.app-nav-mytasks .mytasks-list-view .mytasks-sections,
body.app-nav-mytasks .mytasks-list-view .task-grid,
body.app-nav-mytasks .mytasks-list-view .section-group,
body.app-nav-mytasks .mytasks-list-view .section-tasks {
  min-width: 100% !important;
  width: max-content !important;
  max-width: none !important;
}

/* Main project List page can scroll vertically and horizontally regardless of column count. */
#listView.active .grid-shell,
.view-panel.active > .grid-shell {
  width: max-content !important;
  min-width: 100% !important;
}

/* ---------- Calendar pages ---------- */
.asana-calendar-page,
.main-asana-calendar,
.fixed-calendar,
.calendar-page {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.asana-calendar-toolbar,
.asana-calendar-search,
.calendar-toolbar {
  flex: 0 0 auto !important;
}

.asana-calendar-grid,
#calendarGrid,
.calendar-grid,
.cal-month-grid,
.cal-week-grid {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable both-edges;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
}

/* ---------- Settings/profile/notifications/organization pages ---------- */
.settings-page,
.settings-shell,
.profile-page,
.notification-page,
.notifications-page,
.organization-page,
.browse-teams-page,
.team-management-page {
  min-height: 0 !important;
}

.settings-content,
.settings-main,
.settings-panel-content,
.profile-content,
.notification-page-list,
.notifications-list,
.organization-content,
.browse-teams-content {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Persistent image inside side cards ---------- */
/* Direct background-image is used instead of a transient initial-paint layer. */
.customize-item,
.customize-tile,
.settings-question-card,
.widget-picker-item,
.manage-widget-row,
.customize-deleted-item,
.customize-field-btn,
.side-card,
.right-side-card,
.right-panel-card,
.details-card,
.detail-card,
.task-detail-card,
.chat-info-card,
.settings-card,
.settings-panel-card {
  background-color: var(--bg-surface, #ffffff) !important;
  background-image:
    linear-gradient(135deg,
      rgba(255,255,255,.92) 0%,
      rgba(250,252,253,.88) 42%,
      rgba(245,250,250,.84) 100%),
    var(--dnxt-panel-art) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  background-attachment: local !important;
  isolation: isolate;
}

html[data-theme="dark"] .customize-item,
html[data-theme="dark"] .customize-tile,
html[data-theme="dark"] .settings-question-card,
html[data-theme="dark"] .widget-picker-item,
html[data-theme="dark"] .manage-widget-row,
html[data-theme="dark"] .customize-deleted-item,
html[data-theme="dark"] .customize-field-btn,
html[data-theme="dark"] .side-card,
html[data-theme="dark"] .right-side-card,
html[data-theme="dark"] .right-panel-card,
html[data-theme="dark"] .details-card,
html[data-theme="dark"] .detail-card,
html[data-theme="dark"] .task-detail-card,
html[data-theme="dark"] .chat-info-card,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .settings-panel-card {
  background-color: var(--bg-surface, #1f2933) !important;
  background-image:
    linear-gradient(135deg,
      rgba(23,31,37,.91) 0%,
      rgba(21,29,35,.87) 42%,
      rgba(18,27,32,.83) 100%),
    var(--dnxt-panel-art) !important;
}

/* Remove the old pseudo-image layer so it cannot flash and then conflict. */
.customize-item::before,
.customize-tile::before,
.settings-question-card::before,
.widget-picker-item::before,
.manage-widget-row::before,
.customize-deleted-item::before,
.customize-field-btn::before {
  content: none !important;
  display: none !important;
}

/* ---------- Clearly filled checked boxes everywhere ---------- */
input[type="checkbox"] {
  accent-color: var(--accent, #005b66);
}

.customize-panel input[type="checkbox"],
.widget-picker input[type="checkbox"],
.manage-widget-row input[type="checkbox"],
.mytasks-dropdown input[type="checkbox"],
.col-filter-popup-list input[type="checkbox"] {
  accent-color: var(--accent, #005b66) !important;
}

.task-select-cb input[type="checkbox"]:checked,
.task-select-all-cb input[type="checkbox"]:checked,
.task-select-all-cb input[type="checkbox"]:indeterminate,
.col-filter-popup-list input[type="checkbox"]:checked {
  background-color: var(--accent, #005b66) !important;
  border-color: var(--accent, #005b66) !important;
}

/* Visible scrollbars on all primary scroll containers. */
.view-panel.active,
.mytasks-list-view,
.asana-calendar-grid,
#calendarGrid,
.settings-content,
.settings-main {
  scrollbar-width: auto;
  scrollbar-color: color-mix(in srgb, var(--text-muted, #64748b) 75%, transparent)
                   color-mix(in srgb, var(--border, #d7dce2) 55%, transparent);
}

.view-panel.active::-webkit-scrollbar,
.mytasks-list-view::-webkit-scrollbar,
.asana-calendar-grid::-webkit-scrollbar,
#calendarGrid::-webkit-scrollbar,
.settings-content::-webkit-scrollbar,
.settings-main::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

.view-panel.active::-webkit-scrollbar-thumb,
.mytasks-list-view::-webkit-scrollbar-thumb,
.asana-calendar-grid::-webkit-scrollbar-thumb,
#calendarGrid::-webkit-scrollbar-thumb,
.settings-content::-webkit-scrollbar-thumb,
.settings-main::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-muted, #64748b) 72%, transparent);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}

.view-panel.active::-webkit-scrollbar-track,
.mytasks-list-view::-webkit-scrollbar-track,
.asana-calendar-grid::-webkit-scrollbar-track,
#calendarGrid::-webkit-scrollbar-track,
.settings-content::-webkit-scrollbar-track,
.settings-main::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--border, #d7dce2) 42%, transparent);
}