/* ============================================================
   Sikletbazan — shared component styles
   Depends on colors_and_type.css. Drop these classes anywhere.
   ============================================================ */

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--fg-1);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  user-select: none;
  white-space: nowrap;
}
.btn:active { transform: translateY(0.5px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn svg { width: 14px; height: 14px; flex: 0 0 auto; }

.btn-primary {
  background: var(--steel-900);
  color: #FFFFFF;
  border-color: var(--steel-900);
}
.btn-primary:hover:not(:disabled) { background: var(--steel-800); border-color: var(--steel-800); }
.btn-primary:active:not(:disabled) { background: var(--steel-700); }

.btn-accent {
  background: var(--accent);
  color: #FFFFFF;
  border-color: var(--accent);
}
.btn-accent:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-accent:active:not(:disabled) { background: var(--accent-active); }

.btn-secondary {
  background: var(--bg-surface);
  color: var(--fg-1);
  border-color: var(--border-3);
}
.btn-secondary:hover:not(:disabled) { background: var(--bg-inset); }
.btn-secondary:active:not(:disabled) { background: var(--bg-active); }

.btn-ghost {
  background: transparent;
  color: var(--fg-2);
}
.btn-ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--fg-1); }
.btn-ghost:active:not(:disabled) { background: var(--bg-active); }

.btn-danger {
  background: var(--danger);
  color: #FFFFFF;
  border-color: var(--danger);
}
.btn-danger:hover:not(:disabled) { background: var(--red-700); border-color: var(--red-700); }

/* Sizes */
.btn-sm { height: 28px; padding: 0 10px; font-size: var(--text-xs); }
.btn-sm svg { width: 12px; height: 12px; }
.btn-lg { height: 38px; padding: 0 16px; font-size: var(--text-md); }
.btn-lg svg { width: 16px; height: 16px; }
.btn-icon { width: 32px; padding: 0; }
.btn-icon.btn-sm { width: 28px; }
.btn-icon.btn-lg { width: 38px; }

/* ---------------- Inputs ---------------- */
.input,
.select,
.textarea {
  display: block;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border-3);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--fg-1);
  font-family: inherit;
  font-size: var(--text-sm);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.input::placeholder { color: var(--fg-4); }
.input:hover:not(:disabled),
.select:hover:not(:disabled),
.textarea:hover:not(:disabled) { border-color: var(--steel-400); }
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}
.textarea { height: auto; padding: 8px 10px; min-height: 72px; resize: vertical; line-height: var(--lh-snug); }
.input[aria-invalid='true'],
.input.error { border-color: var(--danger); }
.input[aria-invalid='true']:focus { box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.18); }

.input-group {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-3);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  height: 32px;
  padding: 0 8px;
  gap: 6px;
}
.input-group:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}
.input-group svg { width: 14px; height: 14px; color: var(--fg-4); flex: 0 0 auto; }
.input-group input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; outline: 0; background: transparent;
  font: inherit; font-size: var(--text-sm); color: var(--fg-1);
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
}
.field-hint  { font-size: var(--text-xs); color: var(--fg-3); }
.field-error { font-size: var(--text-xs); color: var(--danger); }

/* ---------------- Badges / tags ---------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  line-height: 1;
  background: var(--bg-inset);
  color: var(--fg-2);
  border: 1px solid var(--border-1);
  white-space: nowrap;
}
.badge svg { width: 10px; height: 10px; }
.badge-dot::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 999px;
  background: currentColor;
  display: inline-block;
}
.badge-success { background: var(--success-bg); color: var(--success-fg); border-color: var(--green-100); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger-fg);  border-color: var(--red-100); }
.badge-warning { background: var(--warning-bg); color: var(--warning-fg); border-color: var(--yellow-100); }
.badge-info    { background: var(--info-bg);    color: var(--info-fg);    border-color: var(--blue-100); }
.badge-accent  { background: var(--accent-bg);  color: var(--amber-700);  border-color: var(--amber-100); }
.badge-solid   { background: var(--steel-900);  color: #FFFFFF; border-color: var(--steel-900); }

/* Squared "shop tag" style — for SKUs, chassis, VINs */
.tag-square {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  background: var(--bg-inset);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-2);
  letter-spacing: 0.02em;
}

/* ---------------- Cards / panels ---------------- */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.card-flat   { background: var(--bg-surface); border: 1px solid var(--border-1); border-radius: var(--radius-md); }
.card-inset  { background: var(--bg-inset);   border: 1px solid var(--border-1); border-radius: var(--radius-md); }
.card-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-1);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.card-body   { padding: 16px; }
.card-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--border-1);
  background: var(--bg-raised);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* Workshop-style stripe header — uses the hi-vis amber band sparingly */
.shop-stripe {
  height: 4px;
  background: repeating-linear-gradient(
    -45deg,
    var(--amber-500) 0 12px,
    var(--steel-900) 12px 24px
  );
}

/* ---------------- Tables ---------------- */
.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}
.tbl thead th {
  position: sticky; top: 0;
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border-2);
  padding: 8px 12px;
  text-align: left;
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
}
[dir='rtl'] .tbl thead th { text-align: right; }
.tbl tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-1);
  color: var(--fg-1);
  vertical-align: middle;
}
.tbl tbody tr:hover td { background: var(--bg-hover); }
.tbl tbody tr.selected td { background: var(--bg-selected); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .num-cell { font-variant-numeric: tabular-nums; }
.tbl .mono-cell { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-2); }

/* ---------------- Avatars ---------------- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--steel-700);
  color: #FFFFFF;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  flex: 0 0 auto;
}
.avatar-md { width: 32px; height: 32px; font-size: var(--text-sm); }
.avatar-lg { width: 40px; height: 40px; font-size: var(--text-md); }

/* ---------------- Menus ---------------- */
.menu {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  min-width: 180px;
}
.menu-item {
  display: flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 8px;
  border-radius: var(--radius-xs);
  font-size: var(--text-sm);
  color: var(--fg-1);
  cursor: pointer;
}
.menu-item:hover { background: var(--bg-hover); }
.menu-item.danger { color: var(--danger-fg); }
.menu-item svg { width: 14px; height: 14px; color: var(--fg-3); }
.menu-divider { height: 1px; background: var(--border-1); margin: 4px 0; }
.menu-label {
  font-size: var(--text-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--fg-3); padding: 6px 8px 2px;
}

/* ---------------- Toolbar / Sidebar / Topbar shells ---------------- */
.sidebar {
  width: var(--sidebar-w);
  background: var(--steel-900);
  color: var(--steel-200);
  display: flex; flex-direction: column;
  flex: 0 0 var(--sidebar-w);
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sidebar-section {
  padding: 14px 8px 4px;
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--steel-400);
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  height: 32px; padding: 0 10px;
  margin: 1px 4px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--steel-200);
  cursor: pointer;
  position: relative;
}
.nav-item:hover { background: rgba(255,255,255,0.05); color: #FFFFFF; }
.nav-item.active {
  background: rgba(217, 119, 6, 0.14);
  color: #FFFFFF;
}
.nav-item.active::before {
  content: '';
  position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 3px; background: var(--accent); border-radius: 0 2px 2px 0;
}
[dir='rtl'] .nav-item.active::before { left: auto; right: 0; border-radius: 2px 0 0 2px; }
.nav-item svg { width: 16px; height: 16px; opacity: 0.85; flex: 0 0 auto; }
.nav-item .count {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--steel-400);
}

.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-1);
}

/* ---------------- Status pills (semantic shortcuts) ---------------- */
.status-active   { color: var(--success-fg); }
.status-pending  { color: var(--warning-fg); }
.status-blocked  { color: var(--danger-fg); }
.status-archived { color: var(--fg-3); }

/* ---------------- Utility ---------------- */
.row { display: flex; align-items: center; gap: 12px; }
.col { display: flex; flex-direction: column; gap: 12px; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.mt-auto { margin-top: auto; }
.flex-1 { flex: 1 1 auto; min-width: 0; }
.divider { height: 1px; background: var(--border-1); width: 100%; }
.divider-v { width: 1px; background: var(--border-1); align-self: stretch; }
.muted { color: var(--fg-3); }
.center { display: flex; align-items: center; justify-content: center; }