/* ==========================================================================
   Application tabs — the strip of open pages, and the panel one is drawn in

   The strip sits inside the main content area rather than across the window, so
   it starts where the side rail ends and moves with it. Its own height is fixed
   and the panel below takes the rest, which is what keeps an index table's
   scroller sized to the window (see components/table).
   ========================================================================== */
.app-tabs {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.app-tabs__strip {
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
  flex: 0 0 auto;
  min-width: 0;
  height: var(--app-tabs-height);
  padding: 0 var(--space-4);
  background-color: var(--color-canvas);
  border-bottom: 1px solid var(--color-border);
}

/* The tabs themselves scroll sideways once there are more than the strip can
   hold, rather than shrinking to nothing: a tab too narrow to read its record's
   name is no use for getting back to it. The scrollbar is hidden — the row is
   dragged or the tabs are closed. */
.app-tabs__list {
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.app-tabs__list::-webkit-scrollbar {
  display: none;
}

/* ==========================================================================
   One tab
   ========================================================================== */
.app-tabs__tab {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 220px;
  height: calc(var(--app-tabs-height) - 6px);
  padding: 0 var(--space-1) 0 var(--space-3);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--color-text-muted);
  transition: background-color var(--transition-base), color var(--transition-base);
}

.app-tabs__tab:hover {
  background-color: var(--tint-white-60, rgba(255, 255, 255, 0.6));
  color: var(--color-text);
}

/* The tab in front reads as the top of the page below it: same surface, and it
   sits over the strip's bottom border rather than under it. */
.app-tabs__tab--active,
.app-tabs__tab--active:hover {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
  margin-bottom: -1px;
  padding-bottom: 1px;
}

/* A pinned tab is held at the front of the row and takes less of it: it is
   somewhere you are working out of rather than something you are reading, so its
   name only has to be recognisable, not complete. */
.app-tabs__tab--pinned {
  max-width: 150px;
}

/* Where a dragged tab will land. A line in the gap rather than the tabs shuffling
   under the pointer — the strip is redrawn from the controller's own list, and
   redrawing it mid-drag would replace the tab being dragged. */
.app-tabs__tab--drop-before,
.app-tabs__tab--drop-after {
  position: relative;
}

.app-tabs__tab--drop-before::before,
.app-tabs__tab--drop-after::after {
  content: "";
  position: absolute;
  top: 20%;
  bottom: 20%;
  width: 2px;
  background-color: var(--color-primary-green);
  border-radius: 1px;
}

.app-tabs__tab--drop-before::before {
  left: -3px;
}

.app-tabs__tab--drop-after::after {
  right: -3px;
}

.app-tabs__select {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: none;
  background: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-family-base);
  font-size: var(--font-size-small);
  line-height: 1.2;
}

.app-tabs__tab--active .app-tabs__select {
  font-family: var(--font-family-bold);
  font-weight: 600;
}

/* Kept at full size for the pointer but only inked on the tab you are on or under
   the pointer, so a row of tabs is a row of names rather than a row of controls. */
.app-tabs__close,
.app-tabs__pin {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-left: 2px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  padding: 0;
  color: var(--color-text-faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-base), background-color var(--transition-base),
    color var(--transition-base);
}

.app-tabs__tab:hover .app-tabs__close,
.app-tabs__tab:hover .app-tabs__pin,
.app-tabs__tab--active .app-tabs__close,
.app-tabs__tab--active .app-tabs__pin,
.app-tabs__close:focus-visible,
.app-tabs__pin:focus-visible {
  opacity: 1;
}

/* A pinned tab wears its pin whether or not you are on it — that is the whole
   signal that the tab is pinned. */
.app-tabs__pin--on {
  opacity: 1;
  color: var(--color-primary-green);
}

.app-tabs__close:hover,
.app-tabs__pin:hover {
  background-color: var(--color-border);
  color: var(--color-text);
}

.app-tabs__pin--on:hover {
  color: var(--color-primary-dark);
}

/* ==========================================================================
   New tab
   ========================================================================== */
.app-tabs__new {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-bottom: var(--space-1);
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  padding: 0;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.app-tabs__new:hover:not(:disabled) {
  background-color: var(--color-surface);
  color: var(--color-text);
}

.app-tabs__new:disabled {
  color: var(--color-text-faint);
  cursor: not-allowed;
}

/* ==========================================================================
   The panel

   This is the box every page in the application is laid out in, and it is the
   one that scrolls. The padding and the scrolling used to belong to
   .dashboard__main-content (see layouts/dashboard); they moved here when the
   strip took the top of that area, so that the strip stays put while the page
   under it scrolls.
   ========================================================================== */
.app-tabs__panels {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.app-tabs__panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--space-6) var(--space-8);
  overflow-y: auto;
  overflow-x: hidden;
}

/* A tab being fetched for the first time — restored into a fresh window, or just
   opened. Turbo marks the frame busy while it is in flight. */
.app-tabs__panel turbo-frame[aria-busy="true"]:empty {
  flex: 1 1 auto;
  min-height: 120px;
  background-image: linear-gradient(
    90deg,
    var(--color-surface-sunken) 0%,
    var(--color-surface) 50%,
    var(--color-surface-sunken) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-md);
  animation: app-tabs-loading 1.2s ease-in-out infinite;
}

@keyframes app-tabs-loading {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-tabs__panel turbo-frame[aria-busy="true"]:empty {
    animation: none;
  }
}

@media (max-width: 768px) {
  .app-tabs__strip {
    padding: 0 var(--space-2);
  }

  .app-tabs__panel {
    padding: var(--space-4);
  }
}