/* Deals archive (B-076), pages/deals-archive.js. Class prefix .darc-; colours only via tokens.css.
   Layout comes from deals.css / list.css (toolbar, view switch, list grid); this file adds the tabs, the count,
   the row button and the empty state. */

.darc-page { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.darc-grid { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Toolbar left: view switch, tabs and count share one 32px baseline (UX-132). */
.darc-left { display: flex; align-items: center; }

/* Tabs: two joined pills next to the view switch, the active one light blue like the view switch. */
.darc-tabs {
  box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--sp-1); height: var(--control-h);
  padding: 2px; margin-left: var(--sp-3); border-radius: var(--r-md); background: var(--chip-bg);
}
.darc-tab {
  display: inline-flex; align-items: center; gap: var(--sp-2); height: calc(var(--control-h) - 4px);
  padding: 0 var(--sp-5); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2);
  font: inherit; font-size: var(--fs-md); font-weight: var(--fw-semibold); cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.darc-tab .ic, .darc-tab svg { width: 16px; height: 16px; display: block; }
.darc-tab:hover { background: var(--bg-hover); color: var(--text); }
.darc-tab.is-active {
  background: var(--view-active-bg); color: var(--blue); box-shadow: inset 0 0 0 1px var(--view-active-border);
}
.darc-tab:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }

.darc-count {
  display: inline-flex; align-items: center; gap: var(--sp-2); margin-left: var(--sp-5);
  font-size: var(--fs-md); font-weight: var(--fw-regular); color: var(--text); white-space: nowrap;
}
.darc-count:empty, .darc-count-text:empty + .darc-count-tip { display: none; }
.darc-count-tip {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: var(--r-pill); color: var(--text-muted); cursor: help;
}
.darc-count-tip .ic, .darc-count-tip svg { width: 16px; height: 16px; display: block; }
.darc-count-tip:hover { color: var(--text); }
.darc-count-tip:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }

/* Deleted tab: the retention line under the toolbar. */
.darc-retention { margin: calc(-1 * var(--sp-3)) 0 var(--sp-4); font-size: var(--fs-sm); color: var(--text-2); }
.darc-retention[hidden] { display: none; }

/* Bulk bar: one of Unarchive / Restore per tab. */
.darc-bulk .btn[hidden] { display: none; }

/* No column picker on this list: the trailing gear column is dropped (deals-archive.js sets --list-cols). */
.darc-page .list-end-cell { display: none; }
.darc-page .list-td:last-child, .darc-page .list-th:nth-last-child(2) { border-right: 0; }

/* Titles read like the deals list: 14px/400, link colour and underline on hover. */
.darc-title {
  font-size: var(--fs-md); font-weight: var(--fw-regular); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none;
}

/* Row button: small (28px / 13px), fits the 32px row. */
.btn.darc-act {
  height: 28px; gap: var(--sp-2); padding: 0 var(--sp-4); font-size: 13px; font-weight: var(--fw-semibold);
}
.darc-act .ic, .darc-act svg { width: 14px; height: 14px; display: block; }
.btn.darc-act:disabled { opacity: .6; cursor: default; }

/* A restored / unarchived row folds away before it leaves the grid. */
.darc-page .list-row.is-leaving {
  height: 0; min-height: 0; opacity: 0; overflow: hidden; border-bottom-width: 0;
  transition: height 180ms var(--ease), min-height 180ms var(--ease), opacity 180ms var(--ease);
}

/* Empty state */
.darc-empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.darc-empty-ic, .darc-empty-ic svg { width: 32px; height: 32px; color: var(--text-muted); display: block; }
.darc-empty-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text); }
.darc-empty-sub { color: var(--text-2); }

/* Deal page: the 'Archived' pill in the header (deal-header-menus.js). */
.darc-pill {
  display: inline-flex; align-items: center; gap: var(--sp-2); height: 24px; padding: 0 var(--sp-4);
  border-radius: var(--r-pill); background: var(--chip-bg); color: var(--text-2);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap;
}
.darc-pill .ic, .darc-pill svg { width: 14px; height: 14px; display: block; }
.darc-pill[hidden] { display: none; }

@media (max-width: 720px) {
  .darc-tabs { margin-left: 0; }
  .darc-tab span { display: none; }
}