/* ──────────────────────────────────────────────────────────────────────────
   Legacy class names, drawn in the new language.

   Nineteen screens were written against the application's stylesheet. Moving
   their markup one page at a time would have meant nineteen pages looking like
   two different products for as long as it took — and the first thing anybody
   saw was a panel that did not match itself.

   So the old names are mapped onto the new design here instead. Nothing in
   this file invents a value: every rule reaches for the same tokens the rest
   of the panel uses, so a screen on the old markup and a screen on the new one
   are the same colours, the same spacing and the same type.

   This file is deleted as the last screen moves to the BEM names. It is a
   bridge, not a second design — if a rule here ever needs a value that is NOT
   in tokens.css, that is the signal the bridge has become a fork.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Type ────────────────────────────────────────────────────────────────── */

.text-xs   { font-size: 12px; font-weight: 400; }
.text-sm   { font-size: 13px; font-weight: 400; }
.fw-600    { font-weight: 600; }
.text-right  { text-align: right; }
.text-center { text-align: center; }
/* `font-mono` meant "line these numbers up". Tabular figures do that without a
   second typeface, which is why there is no monospace font in this panel. */
.font-mono { font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* ── Page header ─────────────────────────────────────────────────────────── */

.page-header-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
}
.page-header-row h1,
.page h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.page-header-row p { margin-top: var(--s-1); font-size: 13px; font-weight: 400;
                     color: var(--text-secondary); max-width: 70ch; }

/* ── Card ────────────────────────────────────────────────────────────────── */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.card-header {
  min-height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
}
.card-title { display: flex; align-items: center; gap: var(--s-2);
              font-size: 14px; font-weight: 600; }
.card-title .material-symbols-rounded { font-size: 20px; color: var(--text-secondary); }
.card-body { padding: var(--s-4); }
/* The page is a flex column with a gap, so a bottom margin would double it. */
.mb-2 { margin-bottom: 0; }
/* `card-tall` was an escape hatch from a 600px cap that no longer exists. */
.card-tall { }

/* ── Table ───────────────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  padding: var(--s-3) var(--s-4);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
}
.data-table td { padding: var(--s-4); border-bottom: 1px solid var(--border);
                 font-size: 14px; vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }

/* Row hover. Not decoration: these tables run to a dozen columns, and without
   it there is nothing tying the Archive button on the right to the package
   name on the left — you track across with a finger on the screen. Background
   only; nothing moves, nothing resizes. */
.data-table tbody tr { transition: background var(--t-fast); }
.data-table tbody tr:hover { background: var(--bg-subtle); }

/* A cell holding a short count — "4 package(s)", "12 price(s)" — reads as two
   broken lines when the column is a few pixels too narrow. */
.data-table td.text-xs { white-space: nowrap; }
.data-table a { font-weight: 600; }
.data-table a:hover { text-decoration: underline; }

/* ── Badge → chip ────────────────────────────────────────────────────────── */

/* The old badges had a coloured left edge and a monospace face. Drawn as the
   new chips instead, so the same state looks the same wherever it appears. */
.badge {
  display: inline-flex; align-items: center; gap: var(--s-1);
  height: 22px; padding: 0 var(--s-2);
  border-radius: var(--radius-sm); border: 1px solid transparent;
  background: var(--chip-gray-bg); color: var(--chip-gray-text);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.02em;
  white-space: nowrap;
}
.badge-success  { background: var(--chip-green-bg);  color: var(--chip-green-text); }
.badge-danger   { background: var(--chip-pink-bg);   color: var(--chip-pink-text); }
.badge-warning  { background: var(--warning-bg);     color: var(--warning-text); }
.badge-info     { background: var(--chip-purple-bg); color: var(--chip-purple-text); }
.badge-muted,
.badge-secondary { background: transparent; border-color: var(--border);
                   color: var(--chip-gray-text); }

/* ── Alert ───────────────────────────────────────────────────────────────── */

.alert {
  display: flex; align-items: flex-start; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-surface);
  font-size: 13px; font-weight: 400; line-height: 1.55;
}
.alert .material-symbols-rounded { font-size: 20px; flex: none; }
.alert-warning { background: var(--warning-bg); border-color: var(--warning-border);
                 color: var(--warning-text); }
.alert-success { background: var(--chip-green-bg); border-color: var(--chip-green-bg);
                 color: var(--chip-green-text); }
.alert-error,
.alert-danger  { background: var(--chip-pink-bg); border-color: var(--chip-pink-bg);
                 color: var(--chip-pink-text); }
.alert-info    { background: var(--bg-subtle); }
.alert ul { margin: var(--s-1) 0 0 var(--s-4); list-style: disc; }

/* ── Button ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  height: 36px; padding: 0 var(--s-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-surface); color: var(--text-primary);
  font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn:hover { background: var(--bg-subtle); text-decoration: none; }
.btn .material-symbols-rounded { font-size: 18px; }
.btn-primary, .btn-accent {
  background: var(--border-strong); border-color: var(--border-strong);
  color: #FFFFFF; font-weight: 600;
}
.btn-primary:hover, .btn-accent:hover { background: #222; border-color: #222; }
.btn-ghost { border-color: var(--border); }
.btn-ghost-white { border-color: var(--border); }
.btn-sm { height: 32px; padding: 0 var(--s-2); font-size: 12px; }
/* The outline variant: a deliberate second choice beside a primary action. */
.btn-secondary { background: var(--bg-surface); border-color: var(--border-strong);
                 font-weight: 600; }
.btn-secondary:hover { background: var(--bg-subtle); }

/* ── Forms ───────────────────────────────────────────────────────────────── */

.form-group { display: flex; flex-direction: column; gap: var(--s-1);
              min-width: 0; margin-bottom: var(--s-4); }
.form-group > label { font-size: 12px; font-weight: 600; }
.form-hint  { font-size: 11px; font-weight: 400; color: var(--text-muted);
              line-height: 1.5; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 768px) { .form-grid-2 { grid-template-columns: 1fr; gap: 0; } }

.form-group input[type="text"], .form-group input[type="email"],
.form-group input[type="password"], .form-group input[type="date"],
.form-group input[type="file"], .form-group select, .form-group textarea,
.data-table input[type="text"], .data-table input[type="email"],
.data-table select, .data-table textarea,
input[type="text"], input[type="email"], input[type="password"],
input[type="date"], select, textarea {
  height: 40px; padding: 0 var(--s-3);
  background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500; color: var(--text-primary);
  transition: border-color var(--t-fast);
  max-width: 100%;
}
textarea { height: auto; padding: var(--s-3); line-height: 1.6; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--text-muted); font-weight: 400; }
input:hover, select:hover, textarea:hover { border-color: var(--text-muted); }
input[type="checkbox"] { height: auto; accent-color: var(--border-strong); }

select {
  appearance: none; padding-right: var(--s-6);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--s-3) center;
  background-size: 16px;
}

label.check-inline, .check-inline {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 13px; font-weight: 500; margin: 0; cursor: pointer;
}
.check-inline input[type="checkbox"] { width: 16px; height: 16px; margin: 0; }
.check-inline input[type="checkbox"]:disabled { opacity: .55; cursor: not-allowed; }

.ui-form-actions { display: flex; align-items: center; gap: var(--s-2);
                   flex-wrap: wrap; padding-top: var(--s-3); }

/* ── Two-column page ─────────────────────────────────────────────────────── */

.grid-main-aside { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
                   gap: var(--s-4); align-items: start; }
@media (max-width: 1024px) { .grid-main-aside { grid-template-columns: 1fr; } }

/* ── Odds and ends the old markup reaches for ────────────────────────────── */

.icon-sm { font-size: 18px; }
.rep-chip { display: inline-flex; align-items: center; height: 22px;
            padding: 0 var(--s-2); border-radius: var(--radius-sm);
            background: var(--chip-gray-bg); color: var(--chip-gray-text);
            font-size: 11px; font-weight: 600; }
/* The selected one in a row of filter chips. */
.rep-chip-on { background: var(--border-strong); color: #FFFFFF; }