/* ============================================================
   FishDog Design System — Utilities
   ============================================================
   Layout helpers, typography utilities, spacing shortcuts.
   Load this AFTER tokens.css and components.css.

   Created: 13 April 2026
   Reference: Design_System_Guide.md
   ============================================================ */


/* ============================================================
   TYPOGRAPHY UTILITIES
   Map directly to the type scale in tokens.css.
   ============================================================ */
.fd-display {
  font-size: var(--fd-text-display);
  font-weight: var(--fd-weight-bold);
  line-height: var(--fd-leading-tight);
  letter-spacing: var(--fd-tracking-tight);
}

.fd-h1 {
  font-size: var(--fd-text-h1);
  font-weight: var(--fd-weight-bold);
  line-height: var(--fd-leading-snug);
  letter-spacing: var(--fd-tracking-snug);
}

.fd-h2 {
  font-size: var(--fd-text-h2);
  font-weight: var(--fd-weight-semibold);
  line-height: var(--fd-leading-normal);
}

.fd-h3 {
  font-size: var(--fd-text-h3);
  font-weight: var(--fd-weight-semibold);
  line-height: var(--fd-leading-normal);
}

.fd-body {
  font-size: var(--fd-text-body);
  font-weight: var(--fd-weight-regular);
  line-height: var(--fd-leading-relaxed);
}

.fd-body-medium {
  font-size: var(--fd-text-body);
  font-weight: var(--fd-weight-medium);
  line-height: var(--fd-leading-relaxed);
}

.fd-small {
  font-size: var(--fd-text-small);
  font-weight: var(--fd-weight-regular);
  line-height: var(--fd-leading-relaxed);
}

.fd-caption {
  font-size: var(--fd-text-caption);
  font-weight: var(--fd-weight-medium);
  line-height: var(--fd-leading-normal);
}

.fd-overline {
  font-size: var(--fd-text-overline);
  font-weight: var(--fd-weight-semibold);
  line-height: var(--fd-leading-normal);
  text-transform: uppercase;
  letter-spacing: var(--fd-tracking-wider);
}


/* ============================================================
   TEXT COLOUR UTILITIES
   ============================================================ */
.fd-text-primary   { color: var(--fd-text-primary); }
.fd-text-secondary { color: var(--fd-text-secondary); }
.fd-text-tertiary  { color: var(--fd-text-tertiary); }
.fd-text-accent    { color: var(--fd-accent-primary); }
.fd-text-nav       { color: var(--fd-accent-nav); }
.fd-text-danger    { color: var(--fd-danger); }
.fd-text-success   { color: var(--fd-status-complete-text); }
.fd-text-warning   { color: var(--fd-status-progress-text); }


/* ============================================================
   FONT UTILITIES
   ============================================================ */
.fd-font-sans      { font-family: var(--fd-font-sans); }
.fd-font-mono      { font-family: var(--fd-font-mono); }
.fd-tabular-nums   { font-variant-numeric: tabular-nums; }

.fd-weight-regular  { font-weight: var(--fd-weight-regular); }
.fd-weight-medium   { font-weight: var(--fd-weight-medium); }
.fd-weight-semibold { font-weight: var(--fd-weight-semibold); }
.fd-weight-bold     { font-weight: var(--fd-weight-bold); }


/* ============================================================
   SPACING UTILITIES
   Margin and padding using the spacing scale.
   Pattern: .fd-{m|p}{t|r|b|l|x|y}-{size}
   ============================================================ */

/* --- Margin --- */
.fd-mt-xs   { margin-top: var(--fd-space-xs); }
.fd-mt-sm   { margin-top: var(--fd-space-sm); }
.fd-mt-md   { margin-top: var(--fd-space-md); }
.fd-mt-base { margin-top: var(--fd-space-base); }
.fd-mt-lg   { margin-top: var(--fd-space-lg); }
.fd-mt-xl   { margin-top: var(--fd-space-xl); }
.fd-mt-2xl  { margin-top: var(--fd-space-2xl); }

.fd-mb-xs   { margin-bottom: var(--fd-space-xs); }
.fd-mb-sm   { margin-bottom: var(--fd-space-sm); }
.fd-mb-md   { margin-bottom: var(--fd-space-md); }
.fd-mb-base { margin-bottom: var(--fd-space-base); }
.fd-mb-lg   { margin-bottom: var(--fd-space-lg); }
.fd-mb-xl   { margin-bottom: var(--fd-space-xl); }
.fd-mb-2xl  { margin-bottom: var(--fd-space-2xl); }

.fd-ml-xs   { margin-left: var(--fd-space-xs); }
.fd-ml-sm   { margin-left: var(--fd-space-sm); }
.fd-ml-md   { margin-left: var(--fd-space-md); }
.fd-ml-base { margin-left: var(--fd-space-base); }

.fd-mr-xs   { margin-right: var(--fd-space-xs); }
.fd-mr-sm   { margin-right: var(--fd-space-sm); }
.fd-mr-md   { margin-right: var(--fd-space-md); }
.fd-mr-base { margin-right: var(--fd-space-base); }

/* --- Padding --- */
.fd-p-xs    { padding: var(--fd-space-xs); }
.fd-p-sm    { padding: var(--fd-space-sm); }
.fd-p-md    { padding: var(--fd-space-md); }
.fd-p-base  { padding: var(--fd-space-base); }
.fd-p-lg    { padding: var(--fd-space-lg); }
.fd-p-xl    { padding: var(--fd-space-xl); }

.fd-px-base { padding-left: var(--fd-space-base); padding-right: var(--fd-space-base); }
.fd-px-lg   { padding-left: var(--fd-space-lg); padding-right: var(--fd-space-lg); }
.fd-px-xl   { padding-left: var(--fd-space-xl); padding-right: var(--fd-space-xl); }

.fd-py-sm   { padding-top: var(--fd-space-sm); padding-bottom: var(--fd-space-sm); }
.fd-py-md   { padding-top: var(--fd-space-md); padding-bottom: var(--fd-space-md); }
.fd-py-base { padding-top: var(--fd-space-base); padding-bottom: var(--fd-space-base); }
.fd-py-lg   { padding-top: var(--fd-space-lg); padding-bottom: var(--fd-space-lg); }


/* ============================================================
   GAP UTILITIES (for flex/grid containers)
   ============================================================ */
.fd-gap-xs   { gap: var(--fd-space-xs); }
.fd-gap-sm   { gap: var(--fd-space-sm); }
.fd-gap-md   { gap: var(--fd-space-md); }
.fd-gap-base { gap: var(--fd-space-base); }
.fd-gap-lg   { gap: var(--fd-space-lg); }
.fd-gap-xl   { gap: var(--fd-space-xl); }


/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.fd-flex          { display: flex; }
.fd-flex-col      { display: flex; flex-direction: column; }
.fd-flex-wrap     { flex-wrap: wrap; }
.fd-flex-1        { flex: 1; }
.fd-items-center  { align-items: center; }
.fd-items-start   { align-items: flex-start; }
.fd-justify-between { justify-content: space-between; }
.fd-justify-center  { justify-content: center; }
.fd-justify-end     { justify-content: flex-end; }

.fd-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.fd-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.fd-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }

.fd-inline-flex { display: inline-flex; }
.fd-block       { display: block; }
.fd-inline      { display: inline; }
.fd-hidden      { display: none; }


/* ============================================================
   TEXT UTILITIES
   ============================================================ */
.fd-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fd-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fd-text-left   { text-align: left; }
.fd-text-center { text-align: center; }
.fd-text-right  { text-align: right; }
.fd-uppercase   { text-transform: uppercase; }
.fd-nowrap      { white-space: nowrap; }


/* ============================================================
   BORDER UTILITIES
   ============================================================ */
.fd-border      { border: 1px solid var(--fd-border); }
.fd-border-t    { border-top: 1px solid var(--fd-border); }
.fd-border-b    { border-bottom: 1px solid var(--fd-border); }
.fd-rounded-sm  { border-radius: var(--fd-radius-sm); }
.fd-rounded-md  { border-radius: var(--fd-radius-md); }
.fd-rounded-lg  { border-radius: var(--fd-radius-lg); }
.fd-rounded-full { border-radius: var(--fd-radius-full); }


/* ============================================================
   SURFACE / BACKGROUND UTILITIES
   ============================================================ */
.fd-bg-surface-0 { background: var(--fd-surface-0); }
.fd-bg-surface-1 { background: var(--fd-surface-1); }
.fd-bg-surface-2 { background: var(--fd-surface-2); }


/* ============================================================
   ACCESSIBILITY
   Keyboard focus ring using teal accent.
   ============================================================ */
.fd-focusable:focus-visible {
  outline: 2px solid var(--fd-accent-nav-border);
  outline-offset: 2px;
}

/* Screen-reader only */
.fd-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


/* ============================================================
   RESPONSIVE: MOBILE TABLE STRATEGY
   On narrow screens, tables scroll horizontally with Name pinned.
   Minimum touch targets: 44x44px for interactive elements.
   ============================================================ */
@media (max-width: 768px) {
  .fd-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .fd-table {
    min-width: 640px;
  }

  /* Increase touch targets on mobile */
  .fd-actions-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .fd-checkbox {
    width: 20px;
    height: 20px;
  }

  .fd-dropdown-item {
    padding: var(--fd-space-md) var(--fd-space-base);
    min-height: 44px;
  }

  .fd-nav-item {
    padding: var(--fd-space-md) var(--fd-space-md);
    min-height: 44px;
  }

  .fd-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .fd-kpi-row {
    grid-template-columns: 1fr;
  }
}