/* ============================================================
   BASE — design system rules dùng chung cho mọi trang.
   Load sau tokens.css, trước per-page CSS.
   ============================================================ */

/* Reset cơ bản. Trang nào cần thêm (vd player tắt tap-highlight) override trong per-page CSS. */
* { box-sizing: border-box; }

/* ============================================================
   PAGE TRANSITION
   - View Transitions API: Chrome 111+, Safari 18+, Firefox 129+ (auto fade)
   - Fallback: CSS animation fade-in cho browser cũ — apply qua body
   ============================================================ */
@view-transition { navigation: auto; }
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   BUTTON SYSTEM
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: inherit;
  font-weight: var(--fw-regular);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
  -webkit-user-select: none;
  user-select: none;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:not(:disabled):active { transform: scale(0.97); }
.btn svg { flex-shrink: 0; }

/* Sizes */
.btn-sm { height: var(--btn-sm-h); padding: 0 var(--btn-sm-px); font-size: var(--btn-sm-fs); }
.btn-sm svg { width: 12px; height: 12px; }
.btn-md { height: var(--btn-md-h); padding: 0 var(--btn-md-px); font-size: var(--btn-md-fs); }
.btn-md svg { width: 14px; height: 14px; }
.btn-lg { height: var(--btn-lg-h); padding: 0 var(--btn-lg-px); font-size: var(--btn-lg-fs); }
.btn-lg svg { width: 16px; height: 16px; }
.btn-icon { width: var(--btn-md-h); height: var(--btn-md-h); padding: 0; }
.btn-icon svg { width: 16px; height: 16px; }

/* Variants */
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:not(:disabled):hover { background: var(--accent-hover); }
.btn-primary:not(:disabled):active { background: var(--accent-pressed); }

.btn-secondary {
  background: var(--bg-overlay);
  color: var(--text-primary);
  border-color: var(--border-default);
}
.btn-secondary:not(:disabled):hover {
  background: var(--bg-raised);
  border-color: var(--border-strong);
}

.btn-tertiary {
  background: transparent;
  color: var(--text-secondary);
}
.btn-tertiary:not(:disabled):hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:not(:disabled):hover { background: var(--danger-hover); }

/* ============================================================
   INPUT SYSTEM
   ============================================================ */
.input {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  border-radius: var(--r-md);
  font-family: inherit;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}
.input:focus {
  outline: none;
  border-color: var(--border-strong);
  background: var(--accent-bg);
}
.input::placeholder { color: var(--text-tertiary); }

.input-sm { height: var(--btn-sm-h); padding: 0 10px; font-size: var(--fs-small); }
.input-md { height: var(--input-h); padding: 0 var(--input-px); font-size: var(--input-fs); }
.input-lg { height: var(--btn-lg-h); padding: 0 16px; font-size: var(--fs-body-lg); }

.input::-webkit-outer-spin-button,
.input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Select (custom arrow) */
.select {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  border-radius: var(--r-md);
  font-family: inherit;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23b3b8c0' stroke-width='1.5'%3e%3cpath d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  padding-right: 32px !important;
}
.select:focus { outline: none; border-color: var(--border-strong); }

/* ============================================================
   SEGMENTED CONTROL (source toggle, filter pills)
   ============================================================ */
.segmented {
  display: inline-flex;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  overflow: hidden;
  flex-shrink: 0;
}
.segmented button {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: inherit;
  cursor: pointer;
  height: var(--btn-md-h);
  padding: 0 var(--sp-4);
  font-size: var(--btn-md-fs);
}
.segmented button.active { background: var(--accent); color: #fff; }
.segmented button:not(.active):hover { background: var(--bg-raised); color: var(--text-primary); }

.segmented-sm button { height: var(--btn-sm-h); padding: 0 var(--sp-3); font-size: var(--btn-sm-fs); }
.segmented-lg button { height: var(--btn-lg-h); padding: 0 var(--sp-5); font-size: var(--btn-lg-fs); }

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.h1 { font-size: var(--fs-h1); font-weight: var(--fw-semibold); margin: 0; }
.h2 { font-size: var(--fs-h2); font-weight: var(--fw-medium); margin: 0; }
.h3 { font-size: var(--fs-h3); font-weight: var(--fw-medium); margin: 0; }
.h4 { font-size: var(--fs-h4); font-weight: var(--fw-medium); margin: 0; }

.section-header {
  font-size: var(--fs-tiny);
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  margin: var(--sp-1) 0 var(--sp-2);
}

.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }

/* ============================================================
   DIALOG (modal overlay) — chung cho catalog + player
   ============================================================ */
.dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: var(--sp-5);
}
.dialog-overlay.visible { display: flex; }
.dialog {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  max-width: var(--dialog-max-w);
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  box-shadow: var(--shadow-dialog);
}
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) 18px;
  border-bottom: 1px solid var(--border-default);
}
.dialog-title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  margin: 0;
  color: var(--text-primary);
}
.dialog-close {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  padding: var(--sp-1);
  cursor: pointer;
  border-radius: var(--r-sm);
  display: flex;
}
.dialog-close:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }
.dialog-close svg { width: 14px; height: 14px; }
.dialog-body { padding: var(--sp-4) 18px; }
.dialog-actions {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
  padding: var(--sp-3) 18px var(--sp-4);
  flex-wrap: wrap;
}

/* ============================================================
   SETTINGS row + toggle — chung cho catalog + player
   ============================================================ */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) 0;
}
.setting-row.memory-row { align-items: flex-start; }
.setting-divider {
  border-top: 1px solid var(--border-subtle);
  margin: var(--sp-2) 0;
}
.setting-label {
  flex: 1;
  min-width: 0;
}
.setting-label > span {
  display: block;
  font-size: var(--fs-body-lg);
  color: var(--text-primary);
}
.setting-sub {
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  margin: 2px 0 0;
  line-height: 1.4;
}
.setting-right {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-shrink: 0;
}
.setting-unit {
  font-size: var(--fs-body);
  color: var(--text-tertiary);
}

/* Toggle */
.toggle {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
}
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--text-tertiary);
  border-radius: 11px;
  transition: background 0.2s;
}
.toggle input:checked ~ .toggle-track { background: var(--accent); }
.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.toggle input:checked ~ .toggle-thumb { transform: translateX(16px); }