/* =========================================================
   components.css — Reusable UI components
   Same size on desktop and mobile. Layout differences live
   in desktop.css / mobile.css.
   Depends on: tokens.css, base.css
   ========================================================= */

/* =========================== BUTTON =========================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  height: var(--control-md);
  padding: 0 var(--space-16);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  font-weight: var(--font-weight-md);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }

/* Sizes */
.btn-sm { height: var(--control-sm); padding: 0 var(--space-12); }
.btn-lg { height: var(--control-lg); padding: 0 var(--space-20); font-size: var(--font-size-lg); line-height: var(--line-height-lg); }

/* Primary */
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover  { background: var(--color-primary-hover);  color: var(--color-on-primary); }
.btn-primary:active { background: var(--color-primary-active); color: var(--color-on-primary); }

/* Secondary (outlined) */
.btn-secondary { background: var(--color-bg-card); color: var(--color-text); border-color: var(--color-border); }
.btn-secondary:hover  { background: var(--color-bg-hover); color: var(--color-text); }
.btn-secondary:active { background: var(--color-bg-hover); border-color: var(--color-text-muted); }

/* Soft */
.btn-soft { background: var(--color-primary-soft); color: var(--color-primary); }
.btn-soft:hover  { background: var(--color-primary-soft); color: var(--color-primary-hover); border-color: var(--color-primary); }
.btn-soft:active { color: var(--color-primary-active); }

/* Ghost */
.btn-ghost { background: transparent; color: var(--color-text-secondary); }
.btn-ghost:hover  { background: var(--color-bg-hover); color: var(--color-text); }
.btn-ghost:active { background: var(--color-bg-hover); color: var(--color-text); }

/* Danger */
.btn-danger { background: var(--color-danger); color: var(--color-on-primary); }
.btn-danger:hover  { background: #B42318; color: var(--color-on-primary); }
.btn-danger:active { background: #912018; color: var(--color-on-primary); }

/* Disabled */
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  border-color: var(--color-border);
  cursor: not-allowed;
  pointer-events: none;
}

/* Icon-only button */
.btn-icon { width: var(--control-md); padding: 0; }
.btn-icon.btn-sm { width: var(--control-sm); }
.btn-icon.btn-lg { width: var(--control-lg); }

.btn-group { display: flex; align-items: center; gap: var(--space-8); }

/* ============================ FORM ============================ */
.field { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }

.label {
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  font-weight: var(--font-weight-md);
  color: var(--color-text);
}
.label .required { color: var(--color-danger); }

.hint, .field-error {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-weight: var(--font-weight-sm);
}
.hint { color: var(--color-text-secondary); }
.field-error { color: var(--color-danger); }

.input, .select, .textarea {
  width: 100%;
  height: var(--control-md);
  padding: 0 var(--space-12);
  background: var(--color-bg-card);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  font-weight: 400;
  appearance: none;
}
.textarea { height: auto; min-height: 96px; padding: var(--space-12); resize: vertical; }
.select {
  padding-right: var(--space-32);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-12) center;
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-muted); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--color-text-muted); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--color-primary); outline: var(--focus-ring-width) solid var(--color-primary-soft); outline-offset: 0; }
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--color-bg-subtle); color: var(--color-text-muted); cursor: not-allowed;
}
.input.is-error, .select.is-error, .textarea.is-error { border-color: var(--color-danger); }
.input.is-error:focus, .select.is-error:focus, .textarea.is-error:focus { outline-color: var(--color-danger-soft); }

/* Input with leading icon */
.input-group { position: relative; display: flex; align-items: center; }
.input-group > .icon { position: absolute; left: var(--space-12); color: var(--color-text-muted); pointer-events: none; }
.input-group > .input { padding-left: var(--space-40, 40px); }

/* Checkbox & radio */
.check { display: inline-flex; align-items: center; gap: var(--space-8); cursor: pointer; font-size: var(--font-size-md); line-height: var(--line-height-md); }
.check input { appearance: none; width: var(--icon-20); height: var(--icon-20); flex-shrink: 0; background: var(--color-bg-card); border: 1px solid var(--color-text-muted); border-radius: var(--radius-4); cursor: pointer; }
.check input[type="radio"] { border-radius: var(--radius-full); }
.check input:hover { border-color: var(--color-primary); }
.check input:checked { background-color: var(--color-primary); border-color: var(--color-primary); background-position: center; background-repeat: no-repeat; background-size: 14px 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.check input[type="radio"]:checked { background-size: 8px 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='white'/%3E%3C/svg%3E"); }
.check input:disabled { background-color: var(--color-bg-subtle); border-color: var(--color-border); cursor: not-allowed; }

/* Switch */
.switch { position: relative; display: inline-flex; width: 36px; height: 20px; flex-shrink: 0; }
.switch input { appearance: none; width: 100%; height: 100%; background: var(--color-border); border-radius: var(--radius-full); cursor: pointer; }
.switch input:checked { background: var(--color-primary); }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #FFFFFF; border-radius: var(--radius-full); pointer-events: none; }
.switch:has(input:checked)::after { left: 18px; }

/* ============================ CARD ============================ */
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  min-width: 0;
}
.card-header, .card-body, .card-footer { padding: var(--space-20); }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); border-bottom: 1px solid var(--color-border); }
.card-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-8); border-top: 1px solid var(--color-border); background: var(--color-bg-subtle); border-radius: 0 0 var(--radius-card) var(--radius-card); }
.card-subtle { background: var(--color-bg-subtle); }
.card-interactive { cursor: pointer; }
.card-interactive:hover { background: var(--color-bg-hover); }

/* Stat card */
.stat { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-20); }
.stat-value { font-size: var(--font-size-xl); line-height: var(--line-height-xl); font-weight: var(--font-weight-xl); color: var(--color-text); }
.stat-label { font-size: var(--font-size-sm); line-height: var(--line-height-sm); color: var(--color-text-secondary); }

/* ============================ BADGE ============================ */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-4);
  height: 20px; padding: 0 var(--space-8);
  border-radius: var(--radius-badge);
  font-size: var(--font-size-sm); line-height: var(--line-height-sm); font-weight: var(--font-weight-sm);
  white-space: nowrap;
  background: var(--color-bg-hover); color: var(--color-text-secondary);
}
.badge-primary { background: var(--color-primary-soft); color: var(--color-primary); }
.badge-success { background: var(--color-success-soft); color: var(--color-success); }
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge-danger  { background: var(--color-danger-soft);  color: var(--color-danger); }
.badge-info    { background: var(--color-info-soft);    color: var(--color-info); }

.dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex-shrink: 0; }

/* ============================ ALERT ============================ */
.alert {
  display: flex; align-items: flex-start; gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border: 1px solid; border-radius: var(--radius-12);
}
.alert > .icon { margin-top: -2px; }
.alert-body { display: flex; flex-direction: column; gap: var(--text-pair-gap); flex: 1; min-width: 0; }
.alert-title { font-size: var(--font-size-md); line-height: var(--line-height-md); font-weight: var(--font-weight-md); color: var(--color-text); }
.alert-text  { font-size: var(--font-size-sm); line-height: var(--line-height-sm); color: var(--color-text-secondary); }
.alert-success { background: var(--color-success-soft); border-color: var(--color-success); } .alert-success > .icon { color: var(--color-success); }
.alert-warning { background: var(--color-warning-soft); border-color: var(--color-warning); } .alert-warning > .icon { color: var(--color-warning); }
.alert-danger  { background: var(--color-danger-soft);  border-color: var(--color-danger); }  .alert-danger  > .icon { color: var(--color-danger); }
.alert-info    { background: var(--color-info-soft);    border-color: var(--color-info); }    .alert-info    > .icon { color: var(--color-info); }

/* ============================ TABLE ============================ */
.table-wrap { width: 100%; overflow-x: auto; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.table th, .table td { padding: var(--space-12) var(--space-16); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--color-border); }
.table th { background: var(--color-bg-subtle); color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-sm); font-weight: var(--font-weight-sm); white-space: nowrap; }
.table td { font-size: var(--font-size-md); line-height: var(--line-height-md); font-weight: 400; color: var(--color-text); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--color-bg-hover); }
.table .num { text-align: right; }

/* ============================= TABS ============================ */
.tabs { display: flex; gap: var(--space-24); border-bottom: 1px solid var(--color-border); overflow-x: auto; }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-8);
  height: var(--control-md); margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: var(--font-size-md); line-height: var(--line-height-md); font-weight: var(--font-weight-md);
  color: var(--color-text-secondary); white-space: nowrap;
}
.tab:hover { color: var(--color-text); }
.tab.is-active, .tab[aria-selected="true"] { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* Segmented control */
.segmented { display: inline-flex; padding: var(--space-4); gap: var(--space-4); background: var(--color-bg-hover); border-radius: var(--radius-12); }
.segmented > button { height: var(--control-sm); padding: 0 var(--space-12); border-radius: var(--radius-8); font-size: var(--font-size-md); line-height: var(--line-height-md); font-weight: var(--font-weight-md); color: var(--color-text-secondary); }
.segmented > button.is-active { background: var(--color-bg-card); color: var(--color-text); }

/* ========================= NAV ITEM / LIST ========================= */
.nav-item {
  display: flex; align-items: center; gap: var(--space-12);
  height: var(--control-md); padding: 0 var(--space-12);
  border-radius: var(--radius-8);
  font-size: var(--font-size-md); line-height: var(--line-height-md); font-weight: var(--font-weight-md);
  color: var(--color-text-secondary); text-decoration: none;
}
.nav-item:hover { background: var(--color-bg-hover); color: var(--color-text); text-decoration: none; }
.nav-item.is-active, .nav-item[aria-current="page"] { background: var(--color-primary-soft); color: var(--color-primary); }
.nav-item .badge { margin-left: auto; }

.list-item { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--color-border); }
.list-item:last-child { border-bottom: 0; }
.list-item.is-clickable:hover { background: var(--color-bg-hover); cursor: pointer; }

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: var(--space-8); font-size: var(--font-size-sm); line-height: var(--line-height-sm); color: var(--color-text-secondary); }
.breadcrumb a { color: var(--color-text-secondary); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb [aria-current="page"] { color: var(--color-text); }

/* Pagination */
.pagination { display: flex; align-items: center; gap: var(--space-4); }
.page-btn { min-width: var(--control-sm); height: var(--control-sm); padding: 0 var(--space-8); border-radius: var(--radius-8); font-size: var(--font-size-md); line-height: var(--line-height-md); font-weight: var(--font-weight-md); color: var(--color-text-secondary); }
.page-btn:hover { background: var(--color-bg-hover); color: var(--color-text); }
.page-btn.is-active { background: var(--color-primary-soft); color: var(--color-primary); }

/* ============================ AVATAR ============================ */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: var(--icon-32); height: var(--icon-32); flex-shrink: 0; border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-primary); font-size: var(--font-size-sm); line-height: var(--line-height-sm); font-weight: var(--font-weight-md); overflow: hidden; }
.avatar-lg { width: 40px; height: 40px; font-size: var(--font-size-md); line-height: var(--line-height-md); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ============================ DROPDOWN ============================ */
.menu { min-width: 200px; padding: var(--space-4); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-12); }
.menu-item { display: flex; align-items: center; gap: var(--space-8); width: 100%; height: var(--control-sm); padding: 0 var(--space-12); border-radius: var(--radius-8); font-size: var(--font-size-md); line-height: var(--line-height-md); font-weight: 400; color: var(--color-text); text-align: left; }
.menu-item:hover { background: var(--color-bg-hover); }
.menu-item.is-danger { color: var(--color-danger); }
.menu-divider { height: 1px; margin: var(--space-4) 0; background: var(--color-border); }

/* ============================ MODAL ============================ */
.overlay { position: fixed; inset: 0; z-index: var(--z-overlay); background: rgba(23, 32, 51, 0.4); }
.modal-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; background: rgba(23, 32, 51, 0.4); padding: var(--space-16); }
.modal { display: flex; flex-direction: column; width: 100%; max-width: 480px; max-height: 100%; background: var(--color-bg-card); border-radius: var(--radius-modal); overflow: hidden; }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-12); padding: var(--space-20) var(--space-20) var(--space-12); }
.modal-body   { padding: var(--space-12) var(--space-20); overflow-y: auto; font-size: var(--font-size-md); line-height: var(--line-height-md); color: var(--color-text-secondary); }
.modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-8); padding: var(--space-16) var(--space-20) var(--space-20); }

/* ======================== PROGRESS / DIVIDER ======================== */
.progress { height: 8px; background: var(--color-bg-hover); border-radius: var(--radius-full); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--color-primary); border-radius: var(--radius-full); }
.divider { height: 1px; background: var(--color-border); border: 0; }

/* ========================= EMPTY STATE ========================= */
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); padding: var(--space-32) var(--space-16); text-align: center; }
.empty-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-primary); }
.empty .text-pair { align-items: center; }

/* ========================== SKELETON (static) ========================== */
.skeleton { background: var(--color-bg-hover); border-radius: var(--radius-8); min-height: var(--space-16); }