/* App Shell */
#screen-app {
  flex-direction: row;
  background: var(--color-bg);
}

/* Sidebar */
#sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sidebar-app-name {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: -0.3px;
}

#sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2) 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  transition: background var(--transition), color var(--transition);
  margin: 0 var(--space-2);
  width: calc(100% - var(--space-4));
  text-align: left;
}

.sidebar-nav-item:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.sidebar-nav-item.active {
  background: var(--color-surface-2);
  color: var(--color-accent);
  font-weight: 500;
}

.sidebar-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-2);
  min-height: 36px;
}

.sidebar-ws-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mode toggle (eye / pencil) */
.mode-toggle {
  display: flex;
  align-items: center;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 2px;
  gap: 1px;
  flex-shrink: 0;
}

.mode-toggle-option {
  width: 24px;
  height: 20px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.mode-toggle-option.active {
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.mode-toggle-option:hover:not(.active) {
  color: var(--color-text);
}

.sidebar-footer {
  padding: var(--space-2) 0 var(--space-3);
  border-top: 1px solid var(--color-border);
}

/* Support button — soft rose, sits above the emergency close button */
.sidebar-support-btn {
  opacity: 0.5;
  color: #f87171;
}
.sidebar-support-btn:hover {
  opacity: 1;
  background: rgba(248, 113, 113, 0.10) !important;
  color: #f87171 !important;
}

/* Emergency close button — danger-tinted, sits at the bottom of the sidebar footer */
.sidebar-emergency-btn {
  opacity: 0.45;
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-1);
  border-radius: 0;
  padding-top: var(--space-2);
}
.sidebar-emergency-btn:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface)) !important;
  color: var(--color-danger) !important;
}

/* Main content */
#main-content {
  flex: 1;
  overflow-y: auto;
  height: 100vh;
}

/* View layout */
.view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.view-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  letter-spacing: -0.3px;
}

.view-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6) var(--space-8);
  contain: layout style;
}

/* Mobile sidebar toggle */
.mobile-menu-btn {
  display: none;
}

/* Bottom nav bar elements: hidden by default on desktop.
   The @media (max-width: 768px) block below overrides display to show them on mobile.
   This rule must appear BEFORE that block so the media query wins the cascade. */
#mobile-nav-bar,
#mobile-nav-drawer,
#mobile-drawer-backdrop {
  display: none;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE — portrait-first layout
   Strategy: hide the left sidebar entirely; replace with a
   fixed bottom navigation bar. Main content fills the full
   viewport width and adds padding-bottom to clear the bar.
   Scroll is allowed everywhere (kanban, map, etc.).
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── App shell: stack vertically ─────────────────────────── */
  #screen-app {
    flex-direction: column;
  }

  /* ── Hide the full left sidebar ───────────────────────────── */
  #sidebar {
    display: none !important;
  }

  /* ── Main content: full width, room for bottom bar ───────── */
  #main-content {
    width: 100%;
    height: 100dvh;          /* dynamic viewport height */
    padding-bottom: 56px;    /* exactly the bottom bar height */
    overflow-y: auto;
  }

  /* ── View header / body padding trim ─────────────────────── */
  .view-header {
    padding: var(--space-3) var(--space-4);
  }

  .view-body {
    padding: var(--space-3) var(--space-4);
  }

  /* Tighten detail-view padding in two-column panels */
  .detail-view-content {
    padding: var(--space-4) var(--space-4);
  }

  /* ── Bottom navigation bar ────────────────────────────────── */
  #mobile-nav-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: stretch;
    z-index: 200;
    overflow: hidden;
  }

  .mobile-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 2px 2px;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
    min-width: 0;
    position: relative;
  }

  .mobile-nav-btn svg {
    flex-shrink: 0;
  }

  .mobile-nav-btn span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1;
  }

  .mobile-nav-btn.active {
    color: var(--color-accent);
  }

  .mobile-nav-btn:hover:not(.active) {
    background: var(--color-surface-2);
    color: var(--color-text);
  }

  /* "More" overflow drawer trigger */
  .mobile-nav-more-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 2px 2px;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 9px;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--transition);
  }

  .mobile-nav-more-btn span {
    font-size: 9px;
    white-space: nowrap;
  }

  .mobile-nav-more-btn.open {
    color: var(--color-accent);
  }

  /* Overflow drawer — slides up from the bottom bar */
  #mobile-nav-drawer {
    position: fixed;
    bottom: 56px;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    z-index: 199;
    display: none;
    flex-direction: column;
    padding: var(--space-2) 0;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.14);
  }

  #mobile-nav-drawer.open {
    display: flex;
  }

  .mobile-drawer-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition);
    width: 100%;
  }

  .mobile-drawer-item:hover,
  .mobile-drawer-item.active {
    background: var(--color-surface-2);
  }

  .mobile-drawer-item.active {
    color: var(--color-accent);
  }

  /* Backdrop to close drawer */
  #mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    bottom: 56px;
    z-index: 198;
    display: none;
  }

  #mobile-drawer-backdrop.open {
    display: block;
  }

  /* ── Two-column detail panels: mobile full-screen ────────────── */
  .detail-panel {
    flex-direction: column;
    overflow: visible;
    height: auto;
  }

  /* List col hidden by default on mobile; shown as overlay when FAB pressed.
     !important needed because views.css (.detail-list-col { display:flex }) loads after shell.css */
  .detail-list-col {
    display: none !important;
    position: fixed;
    inset: 0;
    bottom: 56px;
    z-index: 190;
    width: 100%;
    max-height: none;
    height: auto;
    background: var(--color-surface);
    border-right: none;
    border-bottom: none;
    overflow-y: auto;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
  }

  .detail-list-col.mobile-list-open {
    display: flex !important;
    flex-direction: column;
  }

  /* Backdrop for list overlay */
  .mobile-list-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    bottom: 56px;
    z-index: 189;
    background: rgba(0,0,0,0.32);
  }
  .mobile-list-backdrop.open {
    display: block;
  }

  .detail-view-col {
    flex: none;
    width: 100%;
    overflow-y: visible;
  }

  /* Hide the long description text in settings rows on mobile */
  .settings-row-desc {
    display: none;
  }

  /* Version badge / notes link at bottom of nav col — hide on mobile */
  .settings-version-wrap {
    display: none;
  }

  /* ── Stat cards in home: 2 per row ───────────────────────── */
  .home-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-5);
  }

  /* ── Initiatives board: allow horizontal scroll ──────────── */
  .initiatives-board {
    padding: var(--space-3) var(--space-3);
  }

  /* ── Map/Canvas: full height minus nav bar (toolbar hidden on mobile) ── */
  .map-canvas-wrap,
  .canvas-wrap {
    height: calc(100dvh - 56px) !important;
  }

  /* ── Map tasks sidebar: overlay canvas on mobile (don't squash it) ── */
  .map-tasks-sidebar.open {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 80vw !important;
    max-width: 300px;
    z-index: 40;
  }

  /* ── Hide emergency close on mobile (accessible via More → Settings) ── */
  .sidebar-emergency-btn {
    display: none;
  }

  /* ── Entity/project list columns: single column ──────────── */
  .entity-card-actions {
    gap: 2px;
  }

  /* ── Notes: mobile layout — sidebar full width, editor hidden ── */
  .notes-layout {
    flex-direction: column;
    min-height: 0;
    border: none;
    border-radius: 0;
  }

  /* Sidebar takes 100% width; editor is hidden until "Open" is tapped */
  .notes-sidebar {
    width: 100% !important;
    min-width: 0;
    max-height: none;
    border-right: none;
    border-bottom: none;
    overflow-y: auto;
  }

  .notes-editor-area {
    display: none !important;
  }

  /* Note fullscreen: detail-view-content hides header+tabs, editor fills it */
  .detail-view-content.note-fullscreen .entity-detail-header,
  .detail-view-content.note-fullscreen #detail-tabs {
    display: none !important;
  }

  .detail-view-content.note-fullscreen #detail-tab-content {
    flex: 1;
    overflow-y: auto;
  }

  .detail-view-content.note-fullscreen .tab-pane {
    height: 100%;
  }

  .detail-view-content.note-fullscreen .notes-layout {
    height: 100%;
    min-height: 0;
  }

  .notes-layout.note-fullscreen .notes-sidebar {
    display: none !important;
  }

  .notes-layout.note-fullscreen .notes-editor-area {
    display: flex !important;
    flex: 1;
    flex-direction: column;
    gap: 0;
    overflow: hidden; /* no outer scroll — only note-editor-wrap scrolls */
    padding: 0;
  }

  /* Sticky elements: fixed at top, never scroll */
  .notes-layout.note-fullscreen .notes-editor-area .note-back-btn {
    flex-shrink: 0;
    padding: var(--space-3) var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
  }

  .notes-layout.note-fullscreen .notes-editor-area .note-title-input,
  .notes-layout.note-fullscreen .notes-editor-area .note-title-display {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-3);
    margin: 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
  }

  /* note-editor-wrap is the sole scroll container */
  .notes-layout.note-fullscreen .notes-editor-area .note-editor-wrap {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 var(--space-3) var(--space-4);
  }

  /* note-toolbar and traven toolbar stay at the top of their wrap, not scrolled */
  .notes-layout.note-fullscreen .notes-editor-area .note-editor-wrap .note-toolbar,
  .notes-layout.note-fullscreen .notes-editor-area .note-editor-wrap .traven-toolbar-container {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--color-bg);
  }

  /* Back button injected above the editor in fullscreen mode */
  .note-back-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: none;
    border: none;
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    padding: 0 0 var(--space-2);
    flex-shrink: 0;
  }

  /* "Open" button on the active notes-list-item */
  .note-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-accent);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    white-space: nowrap;
  }
  .note-open-btn:hover { background: var(--color-surface-2); }

  /* Mode toggle in mobile drawer */
  .mobile-mode-toggle {
    display: flex;
    width: 100%;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: var(--space-2) var(--space-3) 0;
    width: calc(100% - var(--space-6));
    flex-shrink: 0;
  }

  .mobile-mode-toggle-btn {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    background: none;
    border: none;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    text-align: center;
    font-weight: 500;
  }

  .mobile-mode-toggle-btn.active {
    background: var(--color-accent);
    color: var(--color-accent-on);
    font-weight: 600;
  }

  /* "Support / donate" drawer item — rose-tinted */
  .mobile-drawer-item--support {
    color: #f87171;
    opacity: 0.75;
  }
  .mobile-drawer-item--support:hover {
    background: rgba(248, 113, 113, 0.10);
    opacity: 1;
  }

  /* "Save or close" drawer item — accent-colored */
  .mobile-drawer-item--accent {
    color: var(--color-accent);
    font-weight: 600;
  }
  .mobile-drawer-item--accent:hover {
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  }

  /* ── Modal: nearly full screen on mobile ─────────────────── */
  .modal {
    max-width: 100% !important;
    margin: 0 var(--space-3);
  }

  /* ── Mobile FAB (Floating Action Button) ────────────────────
     Shared styles for all view-specific floating action buttons.
     Each view places one FAB in the bottom-right of its area.
     ─────────────────────────────────────────────────────────── */
  .mobile-fab {
    position: fixed;
    bottom: calc(56px + 14px); /* above nav bar with gap */
    right: 14px;
    z-index: 180;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none; /* children handle their own events */
  }

  .mobile-fab-btn {
    pointer-events: all;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.22);
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    transition: background var(--transition), transform var(--transition);
  }

  .mobile-fab-btn:active {
    transform: scale(0.92);
  }

  /* Secondary FAB (list-toggle) — slightly smaller, different color */
  .mobile-fab-btn--secondary {
    width: 38px;
    height: 38px;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    font-size: 16px;
  }

  /* ── Mobile action sheet (bottom sheet) ─────────────────────
     Opened from the FAB — slides up with controls inside.
     ─────────────────────────────────────────────────────────── */
  .mobile-sheet-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    bottom: 56px;
    z-index: 185;
    background: rgba(0,0,0,0.28);
  }
  .mobile-sheet-backdrop.open { display: block; }

  .mobile-action-sheet {
    display: none;
    position: fixed;
    bottom: 56px;
    left: 0;
    right: 0;
    z-index: 186;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: var(--space-4) var(--space-4) var(--space-5);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.16);
    flex-direction: column;
    gap: var(--space-3);
    max-height: 60dvh;
    overflow-y: auto;
  }
  .mobile-action-sheet.open { display: flex; }

  .mobile-sheet-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--color-border);
    margin: 0 auto var(--space-3);
    flex-shrink: 0;
  }

  .mobile-sheet-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-1);
  }

  .mobile-sheet-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
  }
  .mobile-sheet-row:last-child { border-bottom: none; }

  .mobile-sheet-btn {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-2);
    background: none;
    border: none;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    cursor: pointer;
    width: 100%;
    text-align: left;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
  }
  .mobile-sheet-btn:hover, .mobile-sheet-btn:active {
    background: var(--color-surface-2);
  }
  .mobile-sheet-btn.danger { color: var(--color-danger); }

  /* Toggle row inside sheet (for pan/lock toggles) */
  .mobile-sheet-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    gap: var(--space-3);
  }
  .mobile-sheet-toggle-row:last-child { border-bottom: none; }

  /* ── Hide desktop-only map/canvas controls on mobile ─────── */
  .map-nav-btns,
  .map-drag-toggle,
  .map-toolbar {
    display: none !important;
  }

  /* Map tasks button: hidden on mobile — replaced by a dedicated FAB */
  .map-tasks-btn {
    display: none !important;
  }

  /* ── Initiatives: hide top-bar controls, show only heading ── */
  .initiatives-top-bar .initiatives-lock-toggle,
  .initiatives-top-bar > .btn {
    display: none;
  }

  /* ── Hide settings nav col in favour of the FAB-driven sheet */
  .settings-nav-col {
    display: none !important;
  }
  .settings-content-area {
    padding: var(--space-3) var(--space-3);
  }
  /* Settings content col takes full width when nav col hidden */
  .settings-view .detail-view-col {
    width: 100%;
    flex: 1;
  }

  /* ── Docs nav: hide horizontal tabs, show via FAB ──────────── */
  .docs-body {
    flex-direction: column;
  }
  .docs-nav {
    display: none !important;
  }
  .docs-article {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
  }

  /* ── Detail tabs: scrollable row (no horizontal overflow break) ── */
  .tabs {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;       /* Firefox */
    /* Fade-right hint: signals there are more tabs to the right.
       Gradient goes from fully opaque on the left to transparent on the far right.
       The fade occupies the last ~40px of the element's rendered width. */
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);
  }
  /* Remove the fade when fully scrolled to the end (class set by JS) */
  .tabs.tabs--scrolled-end {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .tabs::-webkit-scrollbar {
    display: none;               /* Chrome / Safari */
  }
  .tab-btn {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

@media (min-width: 769px) {
  #mobile-nav-bar { display: none !important; }
  #mobile-nav-drawer { display: none !important; }
  #mobile-drawer-backdrop { display: none !important; }
}