html, body {
  height: 100%;
  margin: 0;
  overscroll-behavior: none;
}

.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
}

.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-1);
  padding-top: calc(var(--space-2) + env(safe-area-inset-top));
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  flex-shrink: 0;
}

.app-bar #btn-new-project button {
  padding: 0 3px;
}

.app-bar-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--text);
}

.app-bar-back {
  text-decoration: none;
}

/* The title's text baseline sits visually low next to the back arrow icon;
   nudge it up slightly so it reads as aligned with the icon. */
#project-title {
  position: relative;
  top: -1px;
}

.app-bar-logo {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: url('../icons/favicon.png') center / contain no-repeat;
}

.app-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.storage-info-btn {
  position: fixed;
  left: var(--space-4);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  z-index: 5;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--text-subtle);
}

/* On mobile the safe-area inset already lifts the button clear of the home
   indicator, so drop the extra base offset that otherwise floats it too high. */
@media (max-width: 767px) {
  .storage-info-btn {
    bottom: calc(var(--space-1) + env(safe-area-inset-bottom));
  }
}

.storage-info-btn:hover,
.storage-info-btn:focus-visible {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
}

/* ArdeaUI resets `svg{display:block}`, which otherwise beats the native
   `[hidden]{display:none}` UA rule and leaves hidden icons visible. */
.storage-info-btn svg[hidden] {
  display: none;
}

.board-area {
  flex: 1;
  min-height: 0;
  position: relative;
}

.canvas-color-control {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-h-lg);
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: text;
}

.canvas-color-swatch-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
}

.canvas-color-swatch {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #ffffff;
}

.canvas-color-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.canvas-color-hex {
  border: none;
  background: none;
  outline: none;
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--text);
  width: 68px;
}

/* ArdeaUI resets `svg{display:block}`, which otherwise beats the native
   `[hidden]{display:none}` UA rule and leaves hidden icons visible. */
#btn-theme svg[hidden] {
  display: none;
}

.overflow-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-14);
  color: var(--text);
}

/* Small screens fit only 3 toolbar buttons (add task, save, hamburger). The
   rest collapse into the overflow menu; their menu twins hide on desktop. */
@media (max-width: 767px) {
  #btn-find-canvas,
  #btn-view-mode,
  #btn-grid,
  #btn-export-png {
    display: none;
  }
}

@media (min-width: 768px) {
  .menu-item-mobile {
    display: none;
  }
}

.canvas-search {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  color: var(--text-muted);
}

.canvas-search input {
  border: none;
  background: none;
  outline: none;
  font: inherit;
  font-size: var(--fs-14);
  color: var(--text);
  width: 200px;
}

.canvas-search-count {
  font-size: var(--fs-13);
  color: var(--text-subtle);
  white-space: nowrap;
}

.canvas-search[hidden] {
  display: none;
}

/* Excalidraw's own hamburger menu trigger — superseded by the header controls. */
ardea-excalidraw .main-menu-trigger {
  display: none !important;
}

.btn-save-spinner {
  display: none;
}

#btn-save.saving .btn-save-icon {
  display: none;
}

#btn-save.saving .btn-save-spinner {
  display: inline-block;
}

.home-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-5);
}

.home-area ardea-list {
  max-width: 640px;
  margin: 0 auto;
  display: block;
}

.home-area ardea-list[hidden] {
  display: none !important;
}

/* Two-line layout: dot + name on top with "Verwijderen" pinned top-right;
   "Laatst gewijzigd" gets the whole line below (it runs under the button). */
.project-row {
  position: relative;
}

.project-row ardea-list-row {
  cursor: pointer;
  border-bottom: none !important;
  grid-template-columns: 24px 1fr;
}

.project-row ardea-list-row .primary {
  /* Keep the project name clear of the absolutely-positioned delete button. */
  padding-right: 110px;
}

/* Nudge the dot and name down so they line up with the button text. */
.project-row ardea-list-row .dot,
.project-row ardea-list-row .primary {
  transform: translateY(3.5px);
}

.project-row > ardea-button button {
  border: 1px solid var(--line);
}

.project-row ardea-list-row .secondary {
  grid-column: 1 / -1;
  /* Lines the date up with the left edge of the dot above it. */
  padding-left: 8px;
  margin-top: var(--space-1);
}

.project-row > ardea-button {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
}

.home-area .empty {
  max-width: 400px;
  margin: var(--space-8) auto 0;
  text-align: center;
}

/* Centre the "no projects yet" text within the card, both axes. The stock
   `.empty p` bottom margin skews it upward, so zero it out here. */
#empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The id selector above beats the UA `[hidden]` rule, so restore hiding. */
#empty-state[hidden] {
  display: none;
}

#empty-state p {
  margin: 0;
}

.home-area .empty h2 {
  font-size: var(--fs-18);
  margin: var(--space-3) 0 0;
  color: var(--text);
}

.setup-gate-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.home-area .setup-hint {
  font-size: var(--fs-12);
  color: var(--text-subtle);
  margin-top: var(--space-6);
}

#new-project-dialog .actions,
#delete-project-dialog .actions,
#storage-info-dialog .actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* On mobile, sit dialogs nearer the top instead of dead-centre — leaves the
   thumb-heavy lower half free and keeps the dialog clear of the keyboard. */
@media (max-width: 767px) {
  .dialog[open] {
    margin-top: calc(env(safe-area-inset-top) + 8vh);
    margin-bottom: auto;
  }
}

/* --- Todos & dashboard --- */

.todos-area {
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* On phones, trim the side padding so the status tabs (esp. "Afgerond")
   get the full width and don't feel cramped. */
@media (max-width: 767px) {
  .todos-area {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
}

.todos-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.todos-toolbar-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.todos-toolbar-top .select {
  flex: 1;
  min-width: 0;
}

/* Mobile-first: the add button lives in the bottom bar; from 768px it moves
   up next to the project selector and the bar disappears. */
.add-todo-desktop {
  display: none;
}

@media (min-width: 768px) {
  .add-todo-desktop {
    display: inline-block;
    flex-shrink: 0;
  }

  .add-todo-bar {
    display: none;
  }
}

/* Status tabs stretch to full width so they're easy touch targets on mobile. */
.status-seg {
  display: flex;
}

.status-seg button {
  flex: 1;
}

/* Sticky bar below the scrollable list with the add-task button. */
.add-todo-bar {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
  text-align: center;
  max-height: 69px;
}

.add-todo-bar ardea-button {
  display: inline-block;
}

.add-todo-bar[hidden] {
  display: none;
}

.todo-section {
  margin-bottom: var(--space-6);
}

.todo-section-title {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-2);
}

.todo-section-count {
  font-weight: 500;
  color: var(--text-subtle);
  margin-left: var(--space-1);
}

.todo-hint {
  font-size: var(--fs-12);
  color: var(--text-subtle);
  margin: 0 0 var(--space-2);
}

.todo-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.todo-empty {
  font-size: var(--fs-13);
  color: var(--text-subtle);
  margin: var(--space-2) 0 0;
}

.todo-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.todo-check {
  flex-shrink: 0;
  cursor: pointer;
}

.todo-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.todo-text {
  font-size: var(--fs-14);
  color: var(--text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.todo-row-done .todo-text {
  color: var(--text-subtle);
  text-decoration: line-through;
}

.todo-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.todo-project-badge {
  font-size: var(--fs-12);
  color: var(--text-muted);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2);
}

.todo-done-date {
  font-size: var(--fs-12);
  color: var(--text-subtle);
}

.todo-hours {
  font: inherit;
  font-size: var(--fs-12);
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline dotted;
}

/* Task link chip: opens a web link or jumps to a linked canvas node.
   Uses the same soft-green treatment as the styleguide's success badge. */
.todo-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  font: inherit;
  font-size: var(--fs-12);
  color: var(--success);
  background: var(--success-bg);
  border: 1px solid color-mix(in oklab, var(--success) 30%, var(--line));
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2);
  cursor: pointer;
  text-decoration: none;
}

.todo-link .ic-sm {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.todo-link-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

.todo-link-broken {
  color: var(--text-subtle);
  background: var(--surface-sunken);
  border-color: var(--line);
  cursor: default;
}

.todo-link-broken .todo-link-text {
  text-decoration: line-through;
}

/* Link controls sit under the type selector inside the same field. */
.add-todo-link-control {
  margin-top: var(--space-2);
}

.todo-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.todo-action-btn {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--text-subtle);
}

.todo-action-btn:hover {
  color: var(--text);
  border-color: var(--line);
}

.dialog-todo-text {
  font-size: var(--fs-14);
  color: var(--text-muted);
}

#complete-dialog dialog,
#export-dialog dialog {
  padding: var(--space-4);
}

.complete-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.complete-dialog-header .dialog-todo-text {
  flex: 1;
  min-width: 0;
  margin: -1px 0 0;
  color: var(--text);
}

.complete-dialog-header .dialog-close {
  margin-top: -14px;
  margin-right: -14px;
}

.dialog-close {
  flex-shrink: 0;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--text-subtle);
}

.dialog-close:hover {
  color: var(--text);
  border-color: var(--line);
}

.complete-dialog-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.hours-input {
  width: 90px;
  flex-shrink: 0;
}

.hours-input::placeholder {
  color: var(--text-subtle);
  opacity: 0.7;
}

.field-error {
  font-size: var(--fs-12);
  color: var(--danger, #c0392b) !important;
  margin: var(--space-13 0 0) !important;
}

.add-todo-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.add-todo-dialog-header h3 {
  margin: 0;
}

.add-todo-dialog-header .dialog-close {
  margin-top: -10px;
  margin-right: -10px;
}

#add-todo-dialog ardea-field {
  display: block;
  margin-bottom: var(--space-5);
}

#add-todo-dialog .actions,
#delete-todo-dialog .actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.export-period-text {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-13, 13px);
  color: var(--text-subtle);
}

.export-actions {
  margin-top: var(--space-3);
}

.dashboard-export-btn {
  margin-top:2px;
  margin-right:-16px;
  flex-shrink: 0;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--text-subtle);
}

.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  z-index: 100;
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid color-mix(in oklab, var(--success) 30%, var(--line));
  font-size: var(--fs-13);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  max-width: min(90vw, 480px);
}

/* On mobile the sticky add-task bar (~69px) sits at the bottom, so lift the
   toast above it instead of letting it overlap the button. */
@media (max-width: 767px) {
  .toast {
    bottom: calc(80px + var(--space-3) + env(safe-area-inset-bottom));
  }
}

.toast[hidden] {
  display: none;
}

.dashboard-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

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

.period-label {
  font-size: var(--fs-13);
  color: var(--text-muted);
  min-width: 120px;
  text-align: center;
}

.dashboard-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.dashboard-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.dashboard-total-value {
  font-size: var(--fs-20);
  font-weight: 700;
  color: var(--text);
}

.dashboard-total-label {
  font-size: var(--fs-12);
  color: var(--text-subtle);
}

.dashboard-projects {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dashboard-project {
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.dashboard-project-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.dashboard-project-name {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--text);
}

.dashboard-project-stats {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--fs-13);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.dashboard-project-hours {
  font-weight: 600;
  color: var(--text);
}

.dashboard-task-list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.dashboard-task {
  font-size: var(--fs-13);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* The dot is a flex item, so it lines up with the other rows' dots and
   stays vertically centered on the first line of text. */
.dashboard-task::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-subtle);
  flex-shrink: 0;
}

.dashboard-task-text {
  flex: 1;
  min-width: 0;
}

.dashboard-task-hours {
  flex-shrink: 0;
  color: var(--text-subtle);
}

.dashboard-task.done::before {
  background: var(--ok, #2e9e5b);
}

/* Quick-add todo popover on the canvas */
.canvas-todo {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  color: var(--text-muted);
}

.canvas-todo input {
  border: none;
  background: none;
  outline: none;
  font: inherit;
  font-size: var(--fs-14);
  color: var(--text);
  width: 220px;
}

.canvas-todo[hidden] {
  display: none;
}

/* On narrow screens the fixed input widths overflow the viewport, so anchor
   both popovers to the left and right edges and let the input flex to fill. */
@media (max-width: 767px) {
  .canvas-search,
  .canvas-todo {
    left: var(--space-3);
    right: var(--space-3);
  }

  .canvas-search input,
  .canvas-todo input {
    flex: 1;
    width: auto;
    min-width: 0;
  }
}

.pwa-splash {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  background: var(--bg);
  transition: opacity 0.25s ease;
}

@media (display-mode: standalone) {
  .pwa-splash {
    display: flex;
  }
}

.pwa-splash.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.pwa-splash-logo {
  width: 35vw;
  max-width: 180px;
  aspect-ratio: 1;
  background: url('../icons/icon-512.png') center / contain no-repeat;
}

.pwa-splash-title {
  font-size: var(--fs-28);
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}

.pwa-splash-footer {
  position: absolute;
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  font-size: var(--fs-13);
  color: var(--text-subtle);
}