/* ============================================================
   Ponytail — Design System v1 · primitives
   Components built only from tokens in design-tokens.css.
   Covers: page structure, buttons, forms, cards, KPI stats, tables,
   status badges, alerts, modals, dropdowns, nav labels.
   Load after design-tokens.css and before style.css.
   ============================================================ */

/* ---------- 5. Base ---------- */
body {
  font-family: var(--ds-font);
  font-size: var(--ds-fs-md);
  font-weight: var(--ds-fw-regular);
  line-height: var(--ds-lh-body);
  letter-spacing: 0;               /* tracking breaks Arabic letter joins */
  color: var(--ds-text);
  background: var(--ds-canvas);
  -webkit-font-smoothing: antialiased;

  /* Bootstrap bridge: its components inherit tokens, so dark mode follows automatically */
  --bs-body-bg: var(--ds-canvas);
  --bs-body-color: var(--ds-text);
  --bs-emphasis-color: var(--ds-text);
  --bs-heading-color: var(--ds-text);
  --bs-secondary-color: var(--ds-text-2);
  --bs-tertiary-bg: var(--ds-surface-2);
  --bs-border-color: var(--ds-line);
  --bs-link-color: var(--ds-brand-text);
  --bs-link-hover-color: var(--ds-brand);
  --bs-backdrop-bg: var(--ds-navy-950);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ds-font);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-tight);
  letter-spacing: 0;
  color: var(--ds-text);
}

/* Numbers: tabular figures, kept on their own bidi run so 1,250.00 and minus signs don't flip */
.num,
td.num, th.num,
.ds-stat__value {
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}

:focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ---------- 6. Page structure ---------- */
.ds-page {
  max-width: var(--ds-content-max);
  margin-inline: auto;
  padding: var(--ds-gutter);
}

.ds-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3) var(--ds-space-4);
  margin-bottom: var(--ds-space-6);
}
.ds-page-title {
  margin: 0;
  font-size: var(--ds-fs-xl);
}
.ds-page-desc {
  margin: var(--ds-space-1) 0 0;
  font-size: var(--ds-fs-sm);
  color: var(--ds-text-2);
}


/* ---------- 7. Buttons ---------- */
.btn {
  min-height: var(--ds-control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  padding: 0 var(--ds-space-4);
  font-size: var(--ds-fs-base);
  font-weight: var(--ds-fw-semibold);
  line-height: 1;
  border-radius: var(--ds-r-sm);
  transition:
    background-color var(--ds-dur-fast) var(--ds-ease),
    border-color var(--ds-dur-fast) var(--ds-ease),
    color var(--ds-dur-fast) var(--ds-ease);
}
.btn-sm { min-height: var(--ds-control-h-sm); padding: 0 var(--ds-space-3); font-size: var(--ds-fs-sm); }
.btn-lg { min-height: var(--ds-control-h-lg); padding: 0 var(--ds-space-6); font-size: var(--ds-fs-md); }
.btn:disabled, .btn.disabled { opacity: .5; }

/* primary — navy ink */
.btn-primary {
  --bs-btn-color: var(--ds-on-brand);
  --bs-btn-bg: var(--ds-brand);
  --bs-btn-border-color: var(--ds-brand);
  --bs-btn-hover-color: var(--ds-on-brand);
  --bs-btn-hover-bg: var(--ds-brand-hover);
  --bs-btn-hover-border-color: var(--ds-brand-hover);
  --bs-btn-active-color: var(--ds-on-brand);
  --bs-btn-active-bg: var(--ds-brand-active);
  --bs-btn-active-border-color: var(--ds-brand-active);
  --bs-btn-disabled-color: var(--ds-on-brand);
  --bs-btn-disabled-bg: var(--ds-brand);
  --bs-btn-disabled-border-color: var(--ds-brand);
}

/* accent — gold, for money actions only (commission, payout, approve payment) */
.btn-accent {
  --bs-btn-color: var(--ds-on-accent);
  --bs-btn-bg: var(--ds-accent);
  --bs-btn-border-color: var(--ds-accent);
  --bs-btn-hover-color: var(--ds-on-accent);
  --bs-btn-hover-bg: var(--ds-gold-300);
  --bs-btn-hover-border-color: var(--ds-gold-300);
  --bs-btn-active-color: var(--ds-on-accent);
  --bs-btn-active-bg: var(--ds-gold-700);
  --bs-btn-active-border-color: var(--ds-gold-700);
}

/* secondary — outline on surface */
.btn-outline-secondary {
  --bs-btn-color: var(--ds-text);
  --bs-btn-border-color: var(--ds-line-strong);
  --bs-btn-hover-color: var(--ds-text);
  --bs-btn-hover-bg: var(--ds-surface-2);
  --bs-btn-hover-border-color: var(--ds-line-strong);
  --bs-btn-active-color: var(--ds-text);
  --bs-btn-active-bg: var(--ds-surface-2);
  --bs-btn-active-border-color: var(--ds-line-strong);
}

/* danger — destructive confirm only */
.btn-danger {
  --bs-btn-color: #FFFFFF;
  --bs-btn-bg: var(--ds-danger-solid);
  --bs-btn-border-color: var(--ds-danger-solid);
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-bg: var(--ds-danger-text);
  --bs-btn-hover-border-color: var(--ds-danger-text);
}

/* ghost — toolbar / row actions */
.btn-ghost {
  --bs-btn-color: var(--ds-text-2);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--ds-text);
  --bs-btn-hover-bg: var(--ds-surface-2);
  --bs-btn-hover-border-color: transparent;
}


/* ---------- 8. Form controls ---------- */
.form-label {
  margin-bottom: var(--ds-space-1);
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-fw-semibold);
  color: var(--ds-text-2);
}
.form-control,
.form-select {
  min-height: var(--ds-control-h);
  font-size: var(--ds-fs-base);
  color: var(--ds-text);
  background-color: var(--ds-surface);
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-r-sm);
  padding: 0 var(--ds-space-3);
  transition: border-color var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur-fast) var(--ds-ease);
}
textarea.form-control { min-height: 96px; padding: var(--ds-space-2) var(--ds-space-3); }
.form-control::placeholder { color: var(--ds-text-3); opacity: 1; }
.form-control:focus,
.form-select:focus {
  color: var(--ds-text);
  background-color: var(--ds-surface);
  border-color: var(--ds-focus);
  box-shadow: 0 0 0 3px var(--ds-focus-halo);
  outline: none;
}
.form-control:disabled,
.form-select:disabled {
  color: var(--ds-text-3);
  background-color: var(--ds-surface-2);
  border-color: var(--ds-line);
}
.form-control-lg,
.form-select-lg { min-height: var(--ds-control-h-lg); font-size: var(--ds-fs-md); }
.input-group-text {
  font-size: var(--ds-fs-sm);
  color: var(--ds-text-2);
  background: var(--ds-surface-2);
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-r-sm);
}
.form-text { font-size: var(--ds-fs-xs); color: var(--ds-text-3); }
.invalid-feedback, .form-text.text-danger { font-size: var(--ds-fs-xs); color: var(--ds-danger-text); }
.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--ds-danger-solid); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(200, 50, 63, .18); }


/* ---------- 9. Cards & surfaces ---------- */
.card {
  --bs-card-bg: var(--ds-surface);
  --bs-card-border-color: var(--ds-line);
  --bs-card-border-radius: var(--ds-r-md);
  --bs-card-cap-bg: transparent;
  --bs-card-cap-padding-y: var(--ds-space-4);
  --bs-card-cap-padding-x: var(--ds-space-5);
  --bs-card-spacer-y: var(--ds-space-5);
  --bs-card-spacer-x: var(--ds-space-5);
  color: var(--ds-text);
  box-shadow: none;             /* flat by default; elevation is for overlays */
}
.card-header {
  font-size: var(--ds-fs-md);
  font-weight: var(--ds-fw-semibold);
  border-bottom: 1px solid var(--ds-line);
}
.card-footer {
  background: transparent;
  border-top: 1px solid var(--ds-line);
  font-size: var(--ds-fs-sm);
  color: var(--ds-text-2);
}

/* stat / KPI — a number, a label, nothing else */
.ds-stat { display: flex; flex-direction: column; gap: var(--ds-space-1); min-width: 0; }
.ds-stat__label { font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-medium); color: var(--ds-text-2); }
.ds-stat__value {
  font-size: var(--ds-fs-kpi);
  font-weight: var(--ds-fw-bold);
  line-height: 1.1;
  color: var(--ds-text);
}
.ds-stat__value--money { color: var(--ds-accent-text); }
.ds-stat__delta { font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semibold); }

/* empty state — says what to do next */
.ds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-12) var(--ds-space-6);
  text-align: center;
  color: var(--ds-text-2);
}
.ds-empty__title { margin: 0; font-size: var(--ds-fs-lg); color: var(--ds-text); }
.ds-empty .btn { margin-top: var(--ds-space-3); }


/* ---------- 10. Tables ---------- */
.ds-table-wrap {
  overflow-x: auto;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
}
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ds-text);
  --bs-table-border-color: var(--ds-line);
  --bs-table-striped-bg: transparent;      /* no zebra: rows are read by line, not by stripe */
  --bs-table-hover-bg: var(--ds-surface-2);
  --bs-table-hover-color: var(--ds-text);
  font-size: var(--ds-fs-base);
  line-height: var(--ds-lh-table);
  margin-bottom: 0;
}
.table > :not(caption) > * > * {
  padding: var(--ds-space-3) var(--ds-space-4);
  vertical-align: middle;
}
.table > thead th {
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-fw-semibold);
  color: var(--ds-text-2);
  background: var(--ds-surface-2);
  border-bottom: 1px solid var(--ds-line-strong);
  white-space: nowrap;
}
.table > :not(:first-child) { border-top: 1px solid var(--ds-line); }
.table td.num, .table th.num { text-align: end; }
.table td.actions { width: 1%; white-space: nowrap; text-align: end; }


/* ---------- 11. Status & feedback ---------- */
/* status is always text (or icon) + tint. Colour alone never carries meaning. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  padding: var(--ds-space-1) var(--ds-space-2);
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-fw-semibold);
  line-height: 1;
  border-radius: var(--ds-r-pill);
  background: var(--ds-neutral-bg);
  color: var(--ds-neutral-text);
}
.badge.bg-success { background: var(--ds-success-bg) !important; color: var(--ds-success-text) !important; }
.badge.bg-danger  { background: var(--ds-danger-bg)  !important; color: var(--ds-danger-text)  !important; }
.badge.bg-warning { background: var(--ds-warning-bg) !important; color: var(--ds-warning-text) !important; }
.badge.bg-info    { background: var(--ds-info-bg)    !important; color: var(--ds-info-text)    !important; }
.badge.bg-accent  { background: var(--ds-accent-bg)  !important; color: var(--ds-accent-text)  !important; }
.badge.bg-secondary,
.badge.bg-light   { background: var(--ds-neutral-bg) !important; color: var(--ds-neutral-text) !important; }

/* a status dot pairs with a badge's text, never replaces it */
.ds-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

/* alerts: full tint + icon. No coloured left-border (a generic tell). */
.alert {
  --bs-alert-border-color: transparent;
  border-radius: var(--ds-r-md);
  font-size: var(--ds-fs-sm);
}
.alert-success { --bs-alert-bg: var(--ds-success-bg); --bs-alert-color: var(--ds-success-text); }
.alert-danger  { --bs-alert-bg: var(--ds-danger-bg);  --bs-alert-color: var(--ds-danger-text); }
.alert-warning { --bs-alert-bg: var(--ds-warning-bg); --bs-alert-color: var(--ds-warning-text); }
.alert-info    { --bs-alert-bg: var(--ds-info-bg);    --bs-alert-color: var(--ds-info-text); }


/* ---------- 12. Overlays ---------- */
.modal-content {
  --bs-modal-bg: var(--ds-surface);
  --bs-modal-border-color: var(--ds-line);
  --bs-modal-border-radius: var(--ds-r-lg);
  --bs-modal-box-shadow: var(--ds-elev-3);
  color: var(--ds-text);
}
.modal-header,
.modal-footer { border-color: var(--ds-line); padding: var(--ds-space-4) var(--ds-space-6); }
.modal-body { padding: var(--ds-space-6); }
.modal-title { font-size: var(--ds-fs-lg); font-weight: var(--ds-fw-bold); }

.dropdown-menu {
  --bs-dropdown-bg: var(--ds-surface);
  --bs-dropdown-border-color: var(--ds-line);
  --bs-dropdown-border-radius: var(--ds-r-md);
  --bs-dropdown-box-shadow: var(--ds-elev-2);
  --bs-dropdown-link-color: var(--ds-text);
  --bs-dropdown-link-hover-color: var(--ds-text);
  --bs-dropdown-link-hover-bg: var(--ds-surface-2);
  --bs-dropdown-link-active-color: var(--ds-text);
  --bs-dropdown-link-active-bg: var(--ds-surface-2);
  font-size: var(--ds-fs-base);
  padding: var(--ds-space-1);
  z-index: var(--ds-z-dropdown);
}
.dropdown-item { border-radius: var(--ds-r-xs); padding: var(--ds-space-2) var(--ds-space-3); }


/* ---------- 13. Navigation primitives ---------- */
.ds-nav-label {
  padding: var(--ds-space-4) var(--ds-space-3) var(--ds-space-1);
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-fw-semibold);
  color: var(--ds-text-3);
}
.ds-focusable:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }