/* Reusable components — Harry's Control Room.
   Built entirely on the tokens in tokens.css (which must load first). Nothing here is
   specific to Batches/Leads/Settings/Actions — screen-specific styling lands in
   styles.css during later phases. Every list in the app (emails, leads, backlog,
   payments, learning queue) is meant to use .list/.list-row rather than a bespoke
   per-screen layout. */

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-weight:var(--weight-semibold); font-size:var(--text-sm); line-height:1;
  padding:10px 16px; border-radius:var(--radius-md); border:1px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), background var(--dur-med) var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5; cursor:not-allowed; pointer-events:none}
.btn svg{flex:0 0 auto}

/* Primary — the ONE action per screen that matters most. Not for every button. */
.btn-primary{background:linear-gradient(180deg,var(--color-accent-soft),var(--color-accent)); color:var(--color-accent-ink)}
.btn-primary:hover{filter:brightness(1.06)}

/* Secondary — routine actions (save, add, open). */
.btn-secondary{background:transparent; color:var(--color-text); border-color:var(--color-border-strong)}
.btn-secondary:hover{background:var(--color-surface-2)}

/* Danger — destructive/irreversible actions only. */
.btn-danger{background:transparent; color:var(--color-danger); border-color:rgba(226,114,111,.4)}
.btn-danger:hover{background:var(--color-danger-soft)}

/* Ghost — lowest-emphasis, e.g. utility triggers in Actions. */
.btn-ghost{background:transparent; color:var(--color-accent-soft); border-color:var(--color-border)}
.btn-ghost:hover{background:var(--color-surface-2)}

.btn-sm{padding:6px 12px; font-size:var(--text-xs)}
.btn-icon{padding:8px; width:34px; height:34px}

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  border-radius:var(--radius-sm); background:transparent; border:1px solid var(--color-border);
  color:var(--color-text-muted); cursor:pointer; transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.icon-btn:hover{background:var(--color-surface-2); color:var(--color-text)}
.icon-btn.danger:hover{background:var(--color-danger-soft); color:var(--color-danger)}

/* ---------------- form controls ---------------- */
.field{display:block; margin:var(--space-3) 0}
.field-label{display:block; font-size:var(--text-sm); color:var(--color-text-muted); margin-bottom:6px; font-weight:var(--weight-medium)}
.field-hint{font-size:var(--text-xs); color:var(--color-text-faint); margin-top:4px}

.input,.textarea,select.input{
  width:100%; padding:10px 12px; background:var(--color-bg);
  border:1px solid var(--color-border); border-radius:var(--radius-md);
  color:var(--color-text); font-size:var(--text-base); font-family:inherit;
  transition:border-color var(--dur-fast) var(--ease);
}
.input:focus,.textarea:focus{outline:none; border-color:var(--color-accent)}
.textarea{min-height:70px; resize:vertical}

/* ---------------- card ---------------- */
.card{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5); margin-bottom:var(--space-4)}
.card-header{display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); margin-bottom:var(--space-4)}
.card-title{font-weight:var(--weight-bold); font-size:var(--text-lg)}
.card-subtitle{color:var(--color-text-muted); font-size:var(--text-sm); margin-top:2px}

/* ---------------- list / row (the shared email/lead/backlog/payment pattern) ---------------- */
.list{display:flex; flex-direction:column; gap:var(--space-2)}
.list-row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  background:var(--color-surface-2); border:1px solid var(--color-border);
  border-radius:var(--radius-md); padding:10px 14px;
}
.list-row.stacked{flex-direction:column; align-items:stretch}
.row-main{display:flex; align-items:center; gap:10px; min-width:0}
.row-icon{
  flex:0 0 auto; width:30px; height:30px; border-radius:8px;
  background:var(--color-surface); display:flex; align-items:center; justify-content:center;
  color:var(--color-text-muted);
}
.row-text{min-width:0}
.row-primary{font-size:var(--text-base); color:var(--color-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row-secondary{font-size:var(--text-xs); color:var(--color-text-muted); margin-top:2px}
.row-actions{display:flex; gap:6px; flex:0 0 auto}

.list-row-add{
  display:flex; align-items:center; justify-content:center; gap:6px;
  border:1px dashed var(--color-border-strong); border-radius:var(--radius-md);
  padding:10px 14px; background:transparent; color:var(--color-text-muted);
  cursor:pointer; font-size:var(--text-sm); font-weight:var(--weight-medium);
  transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.list-row-add:hover{border-color:var(--color-accent); color:var(--color-accent-soft)}

.empty-state{color:var(--color-text-faint); font-size:var(--text-sm); padding:var(--space-4) 0; text-align:center}

/* ---------------- badges / pills ---------------- */
.badge{
  display:inline-flex; align-items:center; gap:4px; font-size:var(--text-xs);
  font-weight:var(--weight-semibold); padding:3px 10px; border-radius:var(--radius-full);
  border:1px solid var(--color-border); color:var(--color-text-muted); line-height:1.4;
}
.badge-success{color:var(--color-success); border-color:rgba(111,203,159,.4); background:var(--color-success-soft)}
.badge-warning{color:var(--color-warning); border-color:rgba(226,140,74,.4); background:var(--color-warning-soft)}
.badge-danger{color:var(--color-danger); border-color:rgba(226,114,111,.4); background:var(--color-danger-soft)}
.badge-info{color:var(--color-info); border-color:rgba(139,122,214,.4); background:var(--color-info-soft)}

.badge-count{
  min-width:18px; height:18px; padding:0 5px; border-radius:var(--radius-full);
  background:var(--color-accent); color:var(--color-accent-ink); font-size:.7rem; font-weight:var(--weight-bold);
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
}

.status-pill{display:inline-flex; align-items:center; gap:6px; font-size:var(--text-xs); padding:5px 12px; border-radius:var(--radius-full); border:1px solid var(--color-border); color:var(--color-text-muted)}
.status-pill .dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto}
.status-pill-success{color:var(--color-success); border-color:rgba(111,203,159,.4)}
.status-pill-danger{color:var(--color-danger); border-color:rgba(226,114,111,.4)}
.status-pill-warning{color:var(--color-warning); border-color:rgba(226,140,74,.4)}

/* ---------------- switch ---------------- */
.switch-row{display:flex; justify-content:space-between; align-items:center; gap:var(--space-4)}
.switch-label{color:var(--color-text); font-size:var(--text-base)}
.switch-hint{display:block; color:var(--color-text-muted); font-size:var(--text-xs); margin-top:2px}
input[type=checkbox].switch{
  width:44px; height:24px; appearance:none; background:var(--color-border); border-radius:var(--radius-full);
  position:relative; cursor:pointer; transition:background var(--dur-med) var(--ease); flex:0 0 auto;
}
input[type=checkbox].switch:checked{background:var(--color-accent)}
input[type=checkbox].switch::after{
  content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; transition:left var(--dur-med) var(--ease);
}
input[type=checkbox].switch:checked::after{left:23px}

/* ---------------- segmented control ---------------- */
.segmented{display:inline-flex; border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden}
.segmented button{background:transparent; color:var(--color-text-muted); border:0; border-radius:0; padding:7px 16px; font-weight:var(--weight-medium); font-size:var(--text-sm); cursor:pointer}
.segmented button.selected{background:var(--color-accent); color:var(--color-accent-ink)}

/* ---------------- tabs / sub-tabs ---------------- */
.tabs{display:flex; gap:var(--space-1); border-bottom:1px solid var(--color-border); margin-bottom:var(--space-5); flex-wrap:wrap}
.tab{
  display:inline-flex; align-items:center; gap:6px; background:none; color:var(--color-text-muted);
  border:0; border-radius:var(--radius-sm) var(--radius-sm) 0 0; padding:10px 16px;
  font-weight:var(--weight-medium); font-size:var(--text-base); cursor:pointer;
}
.tab.active{color:var(--color-accent-soft); box-shadow:inset 0 -2px 0 var(--color-accent)}

.subtabs{display:flex; gap:var(--space-2); margin-bottom:var(--space-4); flex-wrap:wrap}
.subtab{
  display:inline-flex; align-items:center; gap:6px; background:var(--color-surface);
  border:1px solid var(--color-border); color:var(--color-text-muted);
  border-radius:var(--radius-full); padding:7px 14px; font-size:var(--text-sm); font-weight:var(--weight-medium); cursor:pointer;
}
.subtab.active{background:var(--color-surface-2); border-color:var(--color-border-strong); color:var(--color-text)}

/* ---------------- error banner (replaces silent catch{}) ---------------- */
.error-banner{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--color-danger-soft); border:1px solid rgba(226,114,111,.4); color:var(--color-danger);
  border-radius:var(--radius-md); padding:10px 14px; font-size:var(--text-sm); margin-bottom:var(--space-3);
}
.error-banner .msg{display:flex; align-items:center; gap:8px}
.error-banner button{background:transparent; border:1px solid rgba(226,114,111,.5); color:var(--color-danger); padding:4px 10px; border-radius:var(--radius-sm); font-size:var(--text-xs); font-weight:var(--weight-semibold); cursor:pointer}

/* ---------------- toast ---------------- */
.toast-stack{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:8px; z-index:1100;
  align-items:center; pointer-events:none;
}
.toast{
  background:var(--color-surface); border:1px solid var(--color-border-strong); color:var(--color-text);
  padding:10px 18px; border-radius:var(--radius-md); font-size:var(--text-sm);
  box-shadow:var(--shadow-sm); opacity:0; transform:translateY(6px);
  transition:opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.toast.show{opacity:1; transform:translateY(0)}
.toast-success{border-color:rgba(111,203,159,.5); color:var(--color-success)}
.toast-danger{border-color:rgba(226,114,111,.5); color:var(--color-danger)}

/* ---------------- modal (replaces confirm()/prompt()) ---------------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(6,5,12,.6);
  display:flex; align-items:center; justify-content:center; padding:24px; z-index:1000;
  opacity:0; pointer-events:none; transition:opacity var(--dur-med) var(--ease);
}
.modal-overlay.show{opacity:1; pointer-events:auto}
.modal{
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); width:100%; max-width:420px; padding:var(--space-6);
  transform:translateY(8px) scale(.98); transition:transform var(--dur-med) var(--ease);
}
.modal-overlay.show .modal{transform:translateY(0) scale(1)}
.modal-title{font-size:var(--text-lg); font-weight:var(--weight-bold); margin-bottom:8px}
.modal-body{color:var(--color-text-muted); font-size:var(--text-base); margin-bottom:var(--space-5); line-height:1.55}
.modal-body p{margin:0 0 10px}
.modal-body .input{margin-top:var(--space-2)}
.modal-actions{display:flex; justify-content:flex-end; gap:8px}