/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Global design tokens */
:root {
  /* Layout colors */
  --bg: #ffffff;
  --panel: #f8fafc;
  --text: #0f172a;
  --muted: #64748b;
  --border: rgba(15,23,42,0.10);

  /* Semantic colors */
  --primary: #2563eb;
  --primary-600: #1d4ed8;
  --success: #16a34a;
  --danger: #dc2626;

  /* Legacy color aliases (for backward compatibility) */
  --color-border: rgba(15,23,42,0.12);
  --color-border-subtle: #e5e7eb;
  --color-text: #0f172a;
  --color-text-muted: #64748b;
  --color-text-slate: #334155;
  --color-link: #2563eb;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Font sizes */
  --fs-xs: .875rem;
  --fs-sm: .95rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
}

/* Utility classes */
.hidden {
  display: none !important;
}

/* Global element/link defaults */
a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Shared utilities */
.form-field { display: grid; gap: .25rem; }
.input { font-size: 1.15rem; line-height: 1.35; }

/* Layout utilities */
.row-sm { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.row { display: flex; justify-content: space-between; align-items: center; margin-top: 0.4rem; gap: .5rem; flex-wrap: wrap; }
.stack-xs { display: grid; gap: .25rem; }
.stack-sm { display: grid; gap: .5rem; }

/* Unified form control visuals */
.form-control,
input.input,
textarea.input,
.date-selects select {
  padding: .5rem .65rem;
  font-size: 1.05rem;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color: var(--color-text);
  outline: none;
}
.form-control:focus,
input.input:focus,
textarea.input:focus,
.date-selects select:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 4px rgba(37,99,235,0.20);
}

/* Unified card component applied to existing card-like classes */
.card,
.section-card,
.we-card,
.auth-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  box-shadow: none;
}
.card--raised { box-shadow: 0 10px 25px rgba(2,6,23,0.06); }
.card--tight { padding: .75rem; }
.card--lg { padding: 1.5rem; border-radius: var(--radius-lg); }

/* Coach Feedback layout helpers */
.coach-feedback-layout {
  display: grid;
  gap: 0.75rem;
}

/* Keep the feedback form visible while data below scrolls */
.feedback-form-sticky {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg, #fff);
  padding-top: 0.25rem;
  padding-bottom: 0.5rem;
  /* optional subtle separation */
  border-bottom: 1px solid var(--border, #e5e7eb);
}

/* Make the included data area scroll independently when long */
.feedback-included-scroll {
  max-height: 60vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Section cards to differentiate tables on coach feedback index */
.section-card { margin-bottom: 1rem; }
.section-card h1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  font-size: var(--fs-lg);
}
.section-help {
  margin-top: 0;
  margin-bottom: 0.75rem;
  color: var(--color-text-muted); /* muted */
  font-size: var(--fs-sm);
}
/* Emphasis variants */
.section-warning {
  background: #fffaf0; /* light amber */
  border-left: 4px solid #f59e0b; /* amber */
}
.section-neutral {
  background: #f8fafc; /* light slate */
  border-left: 4px solid #94a3b8; /* slate */
}