/* App shell: top bar, sidebar, content pane, detail drawer, mobile bottom nav. */

#app {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr;
}

/* --------------------------------------------------------------------------- topbar */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: var(--z-sticky);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  letter-spacing: -0.02em;
  font-size: var(--text-md);
  flex: none;
  user-select: none;
}

.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--brand-500), var(--cyan-400));
  color: #fff;
  box-shadow: 0 4px 14px -4px var(--accent-ring);
  flex: none;
  overflow: hidden;
}

.brand-mark img {
  width: 66%;
  height: auto;
  display: block;
}

/* Centred over the content area, not over the window: with a 256px sidebar on the
   left, centring in the window would leave the bar visibly off to the left of the
   column it belongs to. Taken out of the flex flow so the actions on the right cannot
   drag it sideways. */
.topbar-search {
  position: absolute;
  left: calc(var(--sidebar-w) + (100% - var(--sidebar-w)) / 2);
  translate: -50% 0;
  width: min(520px, calc(100% - var(--sidebar-w) - 330px));
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

/* Search opens the command palette rather than filtering in place: one entry point for
   "find anything", keyboard and pointer alike. */
.search-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 10px 0 11px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-faint);
  font-size: var(--text-sm);
  transition: border-color var(--t-fast), background var(--t-fast);
}

.search-trigger:hover {
  border-color: var(--border-strong);
  background: var(--surface-3);
}

/* The label must give way before the bar does: on a phone it truncates rather than
   wrapping the whole top bar onto two lines. */
.search-trigger > span:not(.kbd):not(.spacer) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.search-trigger .spacer { flex: 1; }

.kbd {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-faint);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  font-family: var(--font);
}

/* ---------------------------------------------------------------------------- body */
.app-body {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 0;
}

/* --------------------------------------------------------------------------- sidebar */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 10px;
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.nav-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

.nav-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 10px 5px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.nav-label button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--r-xs);
  color: var(--text-faint);
  transition: background var(--t-fast), color var(--t-fast);
}

.nav-label button:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  color: var(--text-dim);
  font-size: var(--text-base);
  text-align: left;
  transition: background var(--t-fast), color var(--t-fast);
  position: relative;
}

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

.nav-item.active {
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 550;
}

.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 3px;
  height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

.nav-item .nav-icon {
  width: 18px;
  display: grid;
  place-items: center;
  flex: none;
  color: inherit;
  opacity: 0.85;
}

.nav-item .nav-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-count {
  font-size: var(--text-xs);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  padding: 1px 6px;
  border-radius: var(--r-full);
  background: var(--surface-2);
}

/* Nested folders keep one indent step per level and a guide line, so depth stays
   readable without the row text drifting off the left edge. */
.folder-tree .nav-item[data-depth="1"] { padding-left: 24px; }
.folder-tree .nav-item[data-depth="2"] { padding-left: 38px; }
.folder-tree .nav-item[data-depth="3"] { padding-left: 52px; }
.folder-tree .nav-item[data-depth="4"] { padding-left: 66px; }

.folder-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--accent);
  flex: none;
}

.folder-twisty {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  color: var(--text-faint);
  flex: none;
  transition: transform var(--t-fast) var(--ease);
}

.folder-twisty.open { transform: rotate(90deg); }

.sidebar-footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.storage-meter {
  padding: 10px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: var(--text-xs);
  color: var(--text-dim);
}

.meter-track {
  height: 5px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  overflow: hidden;
  margin: 7px 0 5px;
}

.meter-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--brand-500), var(--cyan-400));
  transition: width var(--t-slow) var(--ease);
}

/* --------------------------------------------------------------------------- content */
.content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.content-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 20px 12px;
  flex: none;
}

.content-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.content-title h1 {
  font-size: var(--text-xl);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-sub {
  font-size: var(--text-sm);
  color: var(--text-faint);
  margin-top: 1px;
}

.content-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 20px 10px;
  flex: none;
}

.content-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 20px 96px;
  scroll-behavior: smooth;
}

/* ---------------------------------------------------------------------- detail drawer */
.drawer {
  position: fixed;
  top: var(--topbar-h);
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t-base) var(--ease);
  visibility: hidden;
}

.drawer.open {
  transform: translateX(0);
  visibility: visible;
}

.drawer-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border);
  flex: none;
}

.drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.drawer-foot {
  flex: none;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------------ bottom nav */
.bottom-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(180%);
  border-top: 1px solid var(--border);
}

.bottom-nav button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 550;
  color: var(--text-faint);
  padding-top: 6px;
  transition: color var(--t-fast);
}

.bottom-nav button.active { color: var(--accent); }

/* Floating quick-add. Sits above the bottom nav on mobile so it never covers a tab. */
.fab {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: calc(var(--z-sticky) + 1);
  width: 54px;
  height: 54px;
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 12px 30px -8px var(--accent-ring), var(--shadow-md);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast);
}

.fab:hover { transform: translateY(-2px) scale(1.03); }
.fab:active { transform: scale(0.96); }

/* ------------------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  :root { --sidebar-h: 0; }

  .app-body {
    grid-template-columns: minmax(0, 1fr);
  }

  /* On phones the sidebar becomes a slide-over sheet instead of a column. */
  .sidebar {
    position: fixed;
    inset: var(--topbar-h) auto 0 0;
    width: min(300px, 86vw);
    z-index: var(--z-drawer);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    transition: transform var(--t-base) var(--ease);
    padding-bottom: calc(var(--bottomnav-h) + 20px);
  }

  .app-body.sidebar-open .sidebar {
    display: flex;
    transform: translateX(0);
  }

  .scrim {
    position: fixed;
    inset: var(--topbar-h) 0 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-drawer) - 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base);
  }

  .app-body.sidebar-open .scrim {
    opacity: 1;
    pointer-events: auto;
  }

  .bottom-nav { display: flex; }

  .content-scroll {
    padding: 4px 14px calc(var(--bottomnav-h) + 80px);
  }

  .content-head,
  .content-toolbar { padding-inline: 14px; }

  .drawer {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 88vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-left: none;
    border-top: 1px solid var(--border);
    transform: translateY(100%);
  }

  .drawer.open { transform: translateY(0); }

  .drawer-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

  .fab {
    bottom: calc(var(--bottomnav-h) + 16px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    width: 50px;
    height: 50px;
  }

  .topbar { padding-inline: 10px; }
  .brand-text { display: none; }
}

@media (min-width: 901px) {
  .scrim { display: none; }
  .mobile-only { display: none !important; }
}

@media (max-width: 900px) {
  .desktop-only { display: none !important; }
}