/*
 * ════════════════════════════════════════════════════════════════════
 *  AKQUIX CRM — Component Library
 *  Wiederverwendbare UI-Bausteine für alle Templates.
 *  Setzt tokens.css voraus.
 * ════════════════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────────────────────────
   1. GRID SYSTEM
   ───────────────────────────────────────────────────────────────── */

.ax-grid-kpi    { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); align-items: stretch; }
.ax-grid-cards  { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); align-items: stretch; }
.ax-grid-stats  { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); align-items: stretch; }
.ax-grid-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: var(--sp-5); }
.ax-grid-2      { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.ax-grid-3      { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.ax-grid-4      { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.ax-form-2      { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.ax-form-3      { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.ax-col-2       { grid-column: span 2; }
.ax-col-3       { grid-column: span 3; }
.ax-col-full    { grid-column: 1 / -1; }

/* ─────────────────────────────────────────────────────────────────
   2. FLEXBOX UTILITIES
   ───────────────────────────────────────────────────────────────── */

.ax-flex            { display: flex; }
.ax-flex-col        { display: flex; flex-direction: column; }
.ax-flex-wrap       { flex-wrap: wrap; }
.ax-flex-1          { flex: 1; min-width: 0; }
.ax-flex-shrink0    { flex-shrink: 0; }
.ax-items-center    { align-items: center; }
.ax-items-start     { align-items: flex-start; }
.ax-items-end       { align-items: flex-end; }
.ax-justify-center  { justify-content: center; }
.ax-justify-between { justify-content: space-between; }
.ax-justify-end     { justify-content: flex-end; }

.ax-toolbar         { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ax-toolbar--space  { justify-content: space-between; }
.ax-toolbar-end     { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }

/* ─────────────────────────────────────────────────────────────────
   3. CARD SYSTEM
   ───────────────────────────────────────────────────────────────── */

.ax-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
}

.ax-card--flat     { box-shadow: none; }
.ax-card--elevated { box-shadow: var(--sh-md); }
.ax-card--hover    { transition: box-shadow 0.18s ease, border-color 0.18s ease; }
.ax-card--hover:hover { box-shadow: var(--sh-md); border-color: var(--border2); }

.ax-card-header {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.ax-card-header h2,
.ax-card-header h3 { font-size: var(--fs-md); font-weight: 600; color: var(--text); letter-spacing: -0.2px; }

.ax-card-body   { padding: var(--sp-4) var(--sp-5); }
.ax-card-footer { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border2); background: var(--surface2); border-radius: 0 0 var(--r-md) var(--r-md); }

/* ─────────────────────────────────────────────────────────────────
   4. KPI CARDS
   ───────────────────────────────────────────────────────────────── */

.ax-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  box-shadow: var(--sh-sm);
  min-height: 88px;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.ax-kpi:hover       { box-shadow: var(--sh); border-color: var(--border2); }
.ax-kpi--clickable  { cursor: pointer; }
.ax-kpi--danger     { border-left: 3px solid var(--c-red-tx); }
.ax-kpi--warning    { border-left: 3px solid var(--c-amber-tx); }
.ax-kpi--success    { border-left: 3px solid var(--c-green-tx); }
.ax-kpi--brand      { border-left: 3px solid var(--brand); }

.ax-kpi-label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--t3); }
.ax-kpi-value { font-size: var(--fs-2xl); font-weight: 800; color: var(--text); letter-spacing: -0.5px; line-height: 1; margin-top: 4px; }
.ax-kpi-sub   { font-size: var(--fs-xs); color: var(--t4); margin-top: 2px; }

/* ─────────────────────────────────────────────────────────────────
   5. BUTTON SYSTEM
   ───────────────────────────────────────────────────────────────── */

.ax-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
  height: 36px;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--t);
  font-family: inherit;
  text-decoration: none;
  line-height: 1;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.ax-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.ax-btn--primary   { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 1px 3px rgba(79,99,231,.25); }
.ax-btn--primary:hover:not(:disabled) { background: var(--brand-hover); border-color: var(--brand-hover); box-shadow: 0 3px 10px rgba(79,99,231,.35); transform: translateY(-1px); }

.ax-btn--secondary { background: var(--surface); border-color: var(--border); color: var(--t2); }
.ax-btn--secondary:hover:not(:disabled) { background: var(--surface3); border-color: var(--border2); }

.ax-btn--ghost     { background: transparent; border-color: transparent; color: var(--t3); }
.ax-btn--ghost:hover:not(:disabled) { background: var(--surface3); color: var(--t2); }

.ax-btn--danger    { background: var(--c-red-bg); border-color: var(--c-red-bd); color: var(--c-red-tx); }
.ax-btn--danger:hover:not(:disabled) { background: var(--c-red-bd); border-color: var(--c-red-tx); }

.ax-btn--sm  { height: 28px; padding: 0 10px; font-size: var(--fs-xs); border-radius: var(--r-xs); }
.ax-btn--lg  { height: 44px; padding: 0 24px; font-size: var(--fs-md); }

/* ─────────────────────────────────────────────────────────────────
   6. BADGE / PILL SYSTEM
   ───────────────────────────────────────────────────────────────── */

.ax-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}

.ax-badge--blue   { background: var(--c-blue-bg);   border-color: var(--c-blue-bd);   color: var(--c-blue-tx); }
.ax-badge--violet { background: var(--c-violet-bg); border-color: var(--c-violet-bd); color: var(--c-violet-tx); }
.ax-badge--green  { background: var(--c-green-bg);  border-color: var(--c-green-bd);  color: var(--c-green-tx); }
.ax-badge--amber  { background: var(--c-amber-bg);  border-color: var(--c-amber-bd);  color: var(--c-amber-tx); }
.ax-badge--red    { background: var(--c-red-bg);    border-color: var(--c-red-bd);    color: var(--c-red-tx); }
.ax-badge--orange { background: var(--c-orange-bg); border-color: var(--c-orange-bd); color: var(--c-orange-tx); }
.ax-badge--slate  { background: var(--c-slate-bg);  border-color: var(--c-slate-bd);  color: var(--c-slate-tx); }
.ax-badge--brand  { background: var(--brand-dim);   border-color: var(--brand-ring);  color: var(--brand); }

/* ─────────────────────────────────────────────────────────────────
   7. FORM COMPONENTS
   ───────────────────────────────────────────────────────────────── */

.ax-input,
.ax-select,
.ax-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--surface);
  font-family: inherit;
  outline: none;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
  line-height: 1.5;
}

.ax-input:focus,
.ax-select:focus,
.ax-textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }

.ax-input::placeholder,
.ax-textarea::placeholder { color: var(--t4); }

.ax-textarea { resize: vertical; min-height: 80px; }

.ax-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 5px;
}

.ax-field       { display: flex; flex-direction: column; gap: 5px; }
.ax-field-hint  { font-size: var(--fs-xs); color: var(--t4); }
.ax-field-error { font-size: var(--fs-xs); color: var(--c-red-tx); }

/* ─────────────────────────────────────────────────────────────────
   8. TABLE SYSTEM
   ───────────────────────────────────────────────────────────────── */

.ax-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--sh-sm);
}

.ax-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 480px; }
.ax-table thead { position: sticky; top: 0; z-index: var(--z-sticky); }
.ax-table thead th {
  background: var(--surface2);
  border-bottom: 1.5px solid var(--border);
  padding: 10px 14px;
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
}
.ax-table tbody tr { border-bottom: 1px solid var(--border2); transition: background 0.1s ease; }
.ax-table tbody tr:last-child { border-bottom: none; }
.ax-table tbody tr:hover { background: var(--surface3); }
.ax-table tbody td { padding: 10px 14px; color: var(--t2); vertical-align: middle; }
.ax-table tbody td:first-child { font-weight: 600; color: var(--text); }

.ax-table--compact thead th,
.ax-table--compact tbody td { padding: 7px 12px; }

/* ─────────────────────────────────────────────────────────────────
   9. AUTH PAGE LAYOUT
   ───────────────────────────────────────────────────────────────── */

.ax-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-gradient);
  padding: var(--sp-5);
}

.ax-auth-card {
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  width: 100%;
  max-width: 420px;
  padding: clamp(28px, 3vw, 44px);
}

/* ─────────────────────────────────────────────────────────────────
   10. PROSE / DOCUMENT LAYOUT
   ───────────────────────────────────────────────────────────────── */

.ax-prose { max-width: var(--c-doc); margin-inline: auto; padding: var(--sp-10) var(--c-pad); }
.ax-prose h1 { font-size: var(--fs-3xl); font-weight: 800; color: var(--text); letter-spacing: -0.5px; line-height: 1.2; margin-bottom: var(--sp-4); }
.ax-prose h2 { font-size: var(--fs-xl); font-weight: 700; color: var(--text); margin-top: var(--sp-8); margin-bottom: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--border2); }
.ax-prose h3 { font-size: var(--fs-md); font-weight: 600; color: var(--t2); margin-top: var(--sp-5); margin-bottom: var(--sp-2); }
.ax-prose p  { font-size: var(--fs-base); color: var(--t2); line-height: 1.8; margin-bottom: var(--sp-4); }
.ax-prose ul,
.ax-prose ol { padding-left: 1.5em; margin-bottom: var(--sp-4); }
.ax-prose li { font-size: var(--fs-base); color: var(--t2); line-height: 1.8; margin-bottom: var(--sp-1); }
.ax-prose-paper { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-md); padding: clamp(28px, 4vw, 60px); }

/* ─────────────────────────────────────────────────────────────────
   11. SPACING / TYPOGRAPHY UTILITIES
   ───────────────────────────────────────────────────────────────── */

.ax-gap-1 { gap: var(--sp-1); }  .ax-gap-2 { gap: var(--sp-2); }
.ax-gap-3 { gap: var(--sp-3); }  .ax-gap-4 { gap: var(--sp-4); }
.ax-gap-5 { gap: var(--sp-5); }

.ax-p-4  { padding: var(--sp-4); }         .ax-p-5   { padding: var(--sp-5); }
.ax-px-4 { padding-inline: var(--sp-4); }  .ax-py-4  { padding-block: var(--sp-4); }
.ax-px-5 { padding-inline: var(--sp-5); }  .ax-py-5  { padding-block: var(--sp-5); }
.ax-mt-auto { margin-top: auto; }           .ax-mx-auto { margin-inline: auto; }

.ax-text-brand   { color: var(--brand); }     .ax-text-muted   { color: var(--t3); }
.ax-text-danger  { color: var(--c-red-tx); }  .ax-text-success { color: var(--c-green-tx); }
.ax-text-warning { color: var(--c-amber-tx); }

.ax-fs-xs { font-size: var(--fs-xs); }  .ax-fs-sm  { font-size: var(--fs-sm); }
.ax-fs-base{ font-size: var(--fs-base);}  .ax-fs-md  { font-size: var(--fs-md); }
.ax-fs-lg { font-size: var(--fs-lg); }  .ax-fs-xl  { font-size: var(--fs-xl); }

.ax-fw-medium   { font-weight: 500; }   .ax-fw-semibold { font-weight: 600; }
.ax-fw-bold     { font-weight: 700; }   .ax-fw-black    { font-weight: 800; }

.ax-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-sr-only  { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ─────────────────────────────────────────────────────────────────
   12. VISUAL UTILITIES
   ───────────────────────────────────────────────────────────────── */

.ax-rounded      { border-radius: var(--r); }
.ax-rounded-md   { border-radius: var(--r-md); }
.ax-rounded-lg   { border-radius: var(--r-lg); }
.ax-rounded-full { border-radius: var(--r-full); }
.ax-surface      { background: var(--surface); }
.ax-surface2     { background: var(--surface2); }
.ax-border       { border: 1px solid var(--border); }
.ax-shadow-sm    { box-shadow: var(--sh-sm); }
.ax-shadow       { box-shadow: var(--sh); }
.ax-shadow-md    { box-shadow: var(--sh-md); }
.ax-overflow-hidden { overflow: hidden; }