/* Admin board styling. Token-driven (no hex literals).
 *
 * Class inventory matches frontend/templates/dashboards/admin_board.html and
 * admin_login.html: .admin, .admin__header, .admin__logout, .admin__list,
 * .admin__add, .admin__error, .admin__empty, .dashboard-row.*, plus the
 * .login.* classes that the login template self-styles inline.
 */

* { box-sizing: border-box; }

/* Honor the HTML `hidden` attribute even when an id-level rule sets
 * `display: flex` (e.g. #market-picker-section, #confirm-section). Without
 * this, the picker/confirm sections flash visible on initial page load. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: "Wix Madefor Text", -apple-system, BlinkMacSystemFont,
               "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  min-height: 100vh;
}

a {
  color: var(--brand-primary);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* ---------- Layout ---------- */

.admin {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 16px 64px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.admin__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--divider);
}

.admin__header h1 {
  margin: 0;
  font-family: "PP Mori", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 28px;
  color: var(--text-primary);
}

.admin__logout button {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--divider);
  border-radius: 8px;
  padding: 6px 12px;
  font: inherit;
  cursor: pointer;
  transition:
    color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.admin__logout button:hover {
  color: var(--text-primary);
  border-color: var(--brand-primary);
  background: var(--surface-overlay-hover);
}

/* ---------- Sections ---------- */

.admin__list,
.admin__add,
.admin__palette {
  background: var(--surface-card-white);
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin__list h2,
.admin__add h2,
.admin__palette h2 {
  margin: 0;
}

/* ---------- Palette toggle ---------- */

.admin__hint {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.admin__hint--ok {
  color: var(--state-up);
}

.palette-toggle {
  align-self: flex-start;
}

.palette-toggle > button {
  padding: 8px 16px;
  font-size: 13px;
}

.palette-toggle__pill {
  /* Position math drives the sliding pill (mirrors window-range__pill). The
   * JS sets transform + width inline so the CSS transition animates. */
  top: 3px;
  left: 0;
  height: calc(100% - 6px);
}

.admin__add h3 {
  margin: 0;
}

.admin__empty {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.admin__error {
  margin: 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--surface-overlay-hover);
  color: var(--state-down);
  font-size: 13px;
}

/* ---------- Dashboard rows ---------- */

#dashboards-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dashboard-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  background: var(--surface-card-white);
  border: 1px solid var(--divider);
  border-radius: 12px;
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-row:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
  .dashboard-row:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); }
}
:root[data-theme="dark"] .dashboard-row:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.dashboard-row__name {
  font-weight: 600;
  color: var(--text-primary);
}

.dashboard-row__market {
  color: var(--text-secondary);
  font-size: 13px;
}

.dashboard-row__default {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-overlay-hover);
  color: var(--brand-primary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dashboard-row__open {
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--surface-overlay-hover);
  color: var(--brand-primary);
  font-weight: 600;
  font-size: 13px;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-row__open:hover {
  background: var(--surface-overlay-hover);
  text-decoration: none;
}

.dashboard-row__delete {
  padding: 6px 12px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--divider);
  color: var(--state-down);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition:
    border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-row__delete:hover {
  border-color: var(--state-down);
  background: var(--surface-overlay-hover);
}

/* ---------- Add-dashboard form ---------- */

#add-url-form {
  display: flex;
  width: 100%;
  gap: 12px;
  align-items: center;
}

#add-url-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 13px;
}

#add-url-form input {
  flex: 1 1 auto;
  background: var(--surface-card-white);
  color: var(--text-primary);
  border: 1px solid var(--divider);
  border-radius: 8px;
  padding: 8px 12px;
  font: inherit;
  min-width: 0;
  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

#add-url-form input:focus {
  outline: none;
  border-color: var(--brand-primary);
}

#add-url-form button,
.add-panel__actions button,
.admin__add-btn {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  border: 0;
  border-radius: 8px;
  padding: 8px 16px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition:
    filter 200ms cubic-bezier(0.4, 0, 0.2, 1),
    background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

#add-url-form button {
  flex: 0 0 auto;
}

#add-url-form button:hover {
  filter: brightness(1.08);
}

#add-cancel {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--divider);
}

#add-cancel:hover {
  color: var(--text-primary);
  border-color: var(--brand-primary);
}

/* ---------- Login page ---------- */

.login {
  background: var(--surface-card-white);
  border: 1px solid var(--divider);
  border-radius: 14px;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.login:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
  .login:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); }
}
:root[data-theme="dark"] .login:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); }

.login h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  font-family: "PP Mori", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text-primary);
}

.login__field span { color: var(--text-secondary); font-size: 13px; }

.login__input {
  background: var(--surface-card-white);
  color: var(--text-primary);
  border: 1px solid var(--divider);
  border-radius: 8px;
  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.login__input:focus {
  outline: none;
  border-color: var(--brand-primary);
}

.login__error {
  border-radius: 8px;
  background: var(--surface-overlay-hover);
  color: var(--state-down);
}

.login button[type="submit"] {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.login button[type="submit"]:hover { filter: brightness(1.08); }

/* .mt-footer, .MuiAppBar-*, .mt-brand-mark live in components.css (shared with dashboard). */

/* ---------- Admin list head ---------- */

.admin__list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin__add-btn:hover { filter: brightness(1.08); }

/* ---------- Add panel ---------- */

#add-panel:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface-overlay-hover);
  border: 1px solid var(--divider);
  border-radius: 12px;
  padding: 16px;
}

.add-panel__form {
  display: flex;
  width: 100%;
  gap: 12px;
  align-items: center;
}

.add-panel__resolved:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: var(--surface-card-white);
  border: 1px solid var(--divider);
  border-radius: 10px;
}

.resolved__name {
  font-family: "PP Mori", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--text-primary);
}

.resolved__price {
  color: var(--brand-primary);
  font-weight: 600;
  font-size: 16px;
}

.resolved__count {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.resolved__markets {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

/* Resolved-state cards have no inner <a>, so padding + flex live directly on
   the <li> rather than on .market-card__link (which the projects-list uses). */
.market-card--resolved {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
}

.add-panel__actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

/* ---------- Projects list & accordion ---------- */

#projects-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project {
  background: var(--surface-card-white);
  border: 1px solid var(--divider);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.project__name {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
  flex: 1 1 auto;
}

.project__count {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--surface-overlay-hover);
  color: var(--brand-primary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.project__delete {
  padding: 6px 12px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--divider);
  color: var(--state-down);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition:
    border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.project__delete:hover {
  border-color: var(--state-down);
  background: var(--surface-overlay-hover);
}

.market-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.market-card {
  background: var(--surface-overlay-hover);
  border: 1px solid var(--divider);
  border-radius: 10px;
  transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.market-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.market-card__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  text-decoration: none;
  color: inherit;
}

.market-card__link:hover { text-decoration: none; }

.market-card__exchange {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  text-transform: uppercase;
}

.market-card__pair {
  color: var(--text-secondary);
  font-size: 12px;
}