/* AGG-UAE ERP — Component primitives
   Buttons, cards, tables, forms, tags, alerts. */

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 22px; border-radius: var(--r);
  font-family: var(--fnt-h); font-size: 0.92rem; font-weight: 600;
  letter-spacing: 0.06em; line-height: 1; cursor: pointer; border: none;
  transition: var(--t-base) var(--ease);
  white-space: nowrap; user-select: none; text-decoration: none;
}
.btn:disabled, .btn.disabled { opacity: 0.55; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }

.btn-primary {
  background: var(--grad-steel); color: #fff;
  box-shadow: 0 2px 8px var(--steel-gl);
}
.btn-primary:hover:not(:disabled) {
  filter: brightness(1.08); transform: translateY(-1px);
  box-shadow: 0 4px 14px var(--steel-gl); color: #fff;
}

.btn-outline {
  background: var(--bg-2); color: var(--steel);
  border: 1px solid var(--border-strong);
}
.btn-outline:hover:not(:disabled) {
  border-color: var(--steel); background: var(--steel-xlt); color: var(--steel);
}

.btn-gold {
  background: var(--grad-gold); color: #fff;
  box-shadow: 0 2px 8px var(--gold-gl);
}
.btn-gold:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }

.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-3); color: var(--text); }

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

.btn-sm { padding: 6px 14px; font-size: 0.82rem; }
.btn-sm svg { width: 14px; height: 14px; }
.btn-lg { padding: 14px 28px; font-size: 1rem; }
.btn-block { width: 100%; }

/* ── Card / Panel ──────────────────────────────────────── */
.card {
  background: var(--bg-2); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); padding: 22px 24px;
  box-shadow: var(--shadow);
}
.card-compact { padding: 16px; }

/* Card title: steel-accent stripe on the left + heavier type. The
   stripe is a single CSS pseudo-element (no SVG, no extra markup) so
   it inherits color + spacing automatically and can be removed by
   resetting the CSS variable in a single place. */
.card h3 {
  margin-bottom: 14px;
  position: relative;
  padding-left: 12px;
  color: var(--text);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.card h3::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: var(--grad-steel);
}

/* Card with title bar */
.card-titled { padding: 0; }
.card-titled .card-head {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: space-between;
}
.card-titled .card-head h3 { margin-bottom: 0; }
.card-titled .card-body { padding: 22px 24px; }

/* ── Data Table ────────────────────────────────────────── */
.table-wrap {
  background: var(--bg-2); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow);
}
/* Variant: allow horizontal scroll for tables wider than the wrapper.
   Used by the LPO/PO items grid where the row contains 10 editable
   columns and squashing them ruins usability. The default `.table-wrap`
   keeps `overflow:hidden` so list views still get the rounded corner
   clip — opt in with `.scroll-x` only where needed. */
.table-wrap.scroll-x { overflow-x: auto; overflow-y: visible; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  font-family: var(--fnt-h); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text);
  padding: 14px 16px; border-bottom: 2px solid var(--border-strong);
  text-align: left; background: var(--bg-3);
  white-space: nowrap;
}
.data-table td {
  padding: 13px 16px; border-bottom: 1px solid var(--border);
  font-size: 0.95rem; color: var(--text-2); vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:nth-child(even) td { background: #fafbfd; }
.data-table tr:hover td { background: var(--steel-xlt); }
.data-table td:first-child { color: var(--text); font-weight: 500; }
.data-table th.numeric,
.data-table td.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.data-table th.actions,
.data-table td.actions { white-space: nowrap; text-align: right; }
.data-table td.actions .btn { margin-left: 4px; }

/* Compact form-grid variant: tighter padding so 10-column editable
   line tables (LPO items, future invoice lines) fit without horizontal
   scroll on common viewport widths. The wider `min-width` set inline
   on the table still triggers `.scroll-x` on narrow screens. */
.data-table.compact th { padding: 8px 10px; }
.data-table.compact td { padding: 6px 8px; vertical-align: middle; }
.data-table.compact td input,
.data-table.compact td select { width: 100%; }

.empty-state {
  padding: 60px 20px; text-align: center;
  color: var(--text-3); font-size: 0.95rem;
}

/* ── Form ──────────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block; font-family: var(--fnt-h); font-size: 0.82rem;
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text); margin-bottom: 6px;
}
.form-group .required { color: var(--danger); }
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group input[type="datetime-local"],
.form-group input[type="tel"],
.form-group input[type="url"],
.form-group select,
.form-group textarea {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  padding: 10px 14px;
  font-family: var(--fnt-b); font-size: 0.95rem; color: var(--text);
  outline: none; transition: var(--t-fast);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--steel); box-shadow: 0 0 0 3px var(--steel-gl);
}
.form-group .help { font-size: 0.78rem; color: var(--text-3); margin-top: 4px; }
.form-group.error input,
.form-group.error select,
.form-group.error textarea { border-color: var(--danger); }
.form-group.error .help { color: var(--danger); }
.form-group textarea { resize: vertical; min-height: 100px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.form-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* Checkboxes (multi-select roles, etc.) */
.checkbox-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.checkbox-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border: 1px solid var(--border-strong);
  border-radius: var(--r); background: var(--bg-2);
  cursor: pointer; transition: var(--t-fast);
}
.checkbox-item:hover { border-color: var(--steel); background: var(--steel-xlt); }
.checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.checkbox-item input:checked + span { color: var(--steel); font-weight: 500; }
.checkbox-item.checked { border-color: var(--steel); background: var(--steel-xlt); }

/* ── Tag / Status pill ─────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--fnt-h); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; line-height: 1;
  padding: 5px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--steel-gl); background: var(--steel-xlt); color: var(--steel);
}
.tag-sm { font-size: 0.68rem; padding: 3px 8px; letter-spacing: 0.1em; }
.tag-gold    { color: var(--gold); border-color: var(--gold-gl); background: var(--gold-xlt); }
.tag-success { color: var(--success); border-color: rgba(31,143,79,.2);  background: var(--success-bg); }
.tag-warning { color: var(--warning); border-color: rgba(196,122,0,.2); background: var(--warning-bg); }
.tag-danger  { color: var(--danger);  border-color: rgba(197,48,48,.2); background: var(--danger-bg); }
.tag-neutral { color: var(--text-3);  border-color: var(--border);       background: var(--bg-3); }

/* ── Alert / Flash message ─────────────────────────────── */
.alert {
  padding: 12px 16px; border-radius: var(--r);
  border-left: 3px solid var(--info);
  background: var(--info-bg); color: var(--text);
  margin-bottom: 16px; font-size: 0.92rem;
}
.alert-success { border-color: var(--success); background: var(--success-bg); }
.alert-warning { border-color: var(--warning); background: var(--warning-bg); }
.alert-danger  { border-color: var(--danger);  background: var(--danger-bg); }

/* ── Breadcrumb ────────────────────────────────────────── */
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.82rem; color: var(--text-3);
}
.breadcrumb a { color: var(--text-3); }
.breadcrumb a:hover { color: var(--steel); }
.breadcrumb .sep { opacity: 0.4; }
.breadcrumb .current { color: var(--text); font-weight: 500; }

/* ── Page header ───────────────────────────────────────── */
.page-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  margin-bottom: 24px; padding-bottom: 18px;
  border-bottom: 2px solid var(--border-strong);
}
.page-header h1 { margin-bottom: 6px; }
.page-header .subtitle { color: var(--text-2); font-size: 0.95rem; }
.page-header .actions { display: flex; gap: 10px; }