/* Drafter Components — primitives
 * Requires colors_and_type.css
 */

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.btn:focus-visible { outline: 2px solid var(--orange-500); outline-offset: 2px; }

/* Primary — orange accent */
.btn-primary { background: var(--orange-500); color: var(--white); }
.btn-primary:hover { background: var(--orange-600); }
.btn-primary:active { background: var(--orange-700); }

/* Secondary — solid ink */
.btn-secondary { background: var(--gray-900); color: var(--white); }
.btn-secondary:hover { background: var(--gray-800); }

/* Default — bordered */
.btn-default { background: var(--white); color: var(--gray-800); border-color: var(--gray-300); }
.btn-default:hover { background: var(--gray-50); border-color: var(--gray-400); }

/* Ghost */
.btn-ghost { background: transparent; color: var(--gray-700); }
.btn-ghost:hover { background: var(--gray-100); }

/* Danger */
.btn-danger { background: var(--danger); color: var(--white); }
.btn-danger:hover { background: #B5381F; }

/* Sizes */
.btn-sm { height: 28px; padding: 0 10px; font-size: 13px; }
.btn-lg { height: 44px; padding: 0 18px; font-size: 15px; }

/* Icon button */
.btn-icon { width: 32px; padding: 0; }
.btn-icon.btn-sm { width: 28px; }
.btn-icon.btn-lg { width: 44px; }

/* ============ INPUTS ============ */
.input, .select, .textarea {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--gray-800);
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--r-md);
  box-sizing: border-box;
  transition: border-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
}
.select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='rgba(117,117,117,0.9)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--gray-500); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--orange-500);
  box-shadow: 0 0 0 3px rgba(253,126,20,0.12);
}
.input::placeholder { color: var(--gray-500); }
.textarea { height: auto; min-height: 72px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.input-label { font-size: 12px; font-weight: 500; color: var(--gray-700); display: block; margin-bottom: 6px; letter-spacing: 0.01em; }
.input-help { font-size: 12px; color: var(--gray-600); margin-top: 6px; }
.input-error { border-color: var(--danger); }
.input-error-msg { font-size: 12px; color: var(--danger); margin-top: 6px; }

/* Input with prefix/suffix (mono units) */
.input-group { display: flex; align-items: stretch; border: 1px solid var(--gray-300); border-radius: var(--r-md); background: var(--white); }
.input-group:focus-within { border-color: var(--orange-500); box-shadow: 0 0 0 3px rgba(253,126,20,0.12); }
.input-group .input { border: none; box-shadow: none; flex: 1; }
.input-group .input:focus { box-shadow: none; }
.input-affix { display: flex; align-items: center; padding: 0 10px; font-family: var(--font-mono); font-size: 12px; color: var(--gray-600); background: var(--gray-50); border-left: 1px solid var(--gray-200); }
.input-affix:first-child { border-left: none; border-right: 1px solid var(--gray-200); }

/* ============ CARDS ============ */
.card-surface {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--r-md);
  padding: 20px;
}
.card-hover:hover { border-color: var(--gray-400); }

/* ============ BADGES ============ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px;
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--r-xs);
  border: 1px solid transparent;
}
.badge-default  { background: var(--gray-100); color: var(--gray-700); border-color: var(--gray-200); }
.badge-orange   { background: var(--orange-50); color: var(--orange-700); border-color: var(--orange-200); }
.badge-success  { background: var(--success-bg); color: var(--success); border-color: #C7E4D4; }
.badge-warning  { background: var(--warning-bg); color: var(--warning); border-color: #F2DDB0; }
.badge-danger   { background: var(--danger-bg); color: var(--danger); border-color: #F2C8BE; }
.badge-outline  { background: transparent; color: var(--gray-700); border-color: var(--gray-300); }

/* ============ CHECKBOX / RADIO / TOGGLE ============ */
.chk, .rad {
  appearance: none;
  width: 16px; height: 16px;
  border: 1px solid var(--gray-400);
  background: var(--white);
  display: inline-grid; place-content: center;
  cursor: pointer;
  transition: background var(--dur-micro), border-color var(--dur-micro);
}
.chk { border-radius: 3px; }
.rad { border-radius: 50%; }
.chk:checked, .rad:checked { background: var(--orange-500); border-color: var(--orange-500); }
.chk:checked::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: rotate(-45deg) translate(1px, -1px); }
.rad:checked::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--white); }
.chk:focus-visible, .rad:focus-visible { outline: 2px solid var(--orange-500); outline-offset: 2px; }

.toggle { position: relative; display: inline-block; width: 34px; height: 20px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-track { position: absolute; inset: 0; background: var(--gray-300); border-radius: 999px; transition: background var(--dur-base) var(--ease); }
.toggle-track::before { content: ""; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; background: var(--white); border-radius: 50%; transition: transform var(--dur-base) var(--ease); box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.toggle input:checked + .toggle-track { background: var(--orange-500); }
.toggle input:checked + .toggle-track::before { transform: translateX(14px); }

/* ============ TABS — pill style ============ */
.tabs {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  background: var(--gray-100);
  border-radius: 999px;
}
.tab {
  height: 32px; padding: 0 14px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 500;
  color: var(--gray-600);
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur-micro), color var(--dur-micro);
}
.tab:hover { color: var(--gray-900); }
.tab[aria-selected="true"], .tab-active {
  color: var(--gray-900);
  background: var(--white);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.04);
}

/* Underline tabs — kept for app shell chrome */
.tabs-underline { display: flex; gap: 0; border-bottom: 1px solid var(--gray-200); background: none; padding: 0; border-radius: 0; }
.tabs-underline .tab { border-radius: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; height: 36px; background: transparent; }
.tabs-underline .tab[aria-selected="true"], .tabs-underline .tab.tab-active { background: transparent; box-shadow: none; border-bottom-color: var(--gray-900); }

/* ============ TABLE ============ */
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.table th, .table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--gray-200); border-right: 1px solid var(--gray-200); }
.table th:last-child, .table td:last-child { border-right: none; }
.table th { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-600); background: var(--gray-50); border-top: 1px solid var(--gray-200); }
.table tbody tr:hover td { background: var(--gray-50); }
.table td.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums slashed-zero; }

/* ============ KBD ============ */
kbd, .kbd { font-family: var(--font-mono); font-size: 11px; padding: 2px 6px; background: var(--white); border: 1px solid var(--gray-300); border-bottom-width: 2px; border-radius: 3px; color: var(--gray-700); }

/* ============ CALLOUT ============ */
.callout { display: flex; gap: 10px; padding: 12px 14px; border: 1px solid var(--gray-300); border-radius: var(--r-md); background: var(--gray-50); font-size: 13px; }
.callout-orange { background: var(--orange-50); border-color: var(--orange-200); color: var(--orange-700); }
.callout-success { background: var(--success-bg); border-color: #C7E4D4; color: var(--success); }

/* ============ DRAFTING STAMP ============ */
.stamp-box {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px;
  border: 1px solid var(--gray-300);
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: var(--r-xs);
  color: var(--gray-700);
  background: var(--white);
}
.stamp-box-orange { color: var(--orange-600); border-color: var(--orange-200); background: var(--orange-50); }
.stamp-box-success { color: var(--success); border-color: #C7E4D4; background: var(--success-bg); }

/* ============ ICON ============ */
.icon { display: inline-block; width: 16px; height: 16px; flex: none; vertical-align: middle; }
.icon-sm { width: 14px; height: 14px; }
.icon-lg { width: 20px; height: 20px; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }