/*
 * 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.
 */

/* BestPath design tokens — Direction A (Quiet Editorial) */
:root {
  /* Surfaces */
  --bp-paper:      #ffffff;
  --bp-surface:    #f8f7f3;
  --bp-surface-2:  #efece4;

  /* Ink */
  --bp-ink:        #1a1a1a;
  --bp-ink-2:      #3d3d3d;
  --bp-ink-muted:  #6b6b6b;
  --bp-ink-subtle: #9a9a9a;

  /* Lines */
  --bp-rule:       rgba(0,0,0,0.12);
  --bp-rule-soft:  rgba(0,0,0,0.06);

  /* Accent — logo blue, deepened to AA against white */
  --bp-accent:     #1d4f7a;
  --bp-accent-ink: #ffffff;
  --bp-accent-soft:#e6eef5;

  /* Highlight — logo orange. Brand decoration; one moment per view. */
  --bp-highlight:      #e89826;
  --bp-highlight-ink:  #1a1a1a;
  --bp-highlight-soft: #fbecd2;

  /* Roles */
  --bp-success:    #2d6a4f;
  --bp-warning:    #a8660f;
  --bp-danger:     #8c2a1c;
  --bp-info:       #2b4d7a;

  /* Status tints */
  --bp-tint-done:        #e4ede6;
  --bp-tint-active:      #f0ebdd;
  --bp-tint-warning:     #fbeed0;
  --bp-tint-danger:      #f6ddd6;
  --bp-tint-info:        #dde6f0;
  --bp-tint-ink-done:    #1f4432;
  --bp-tint-ink-active:  #6b4f15;
  --bp-tint-ink-warning: #7a4805;
  --bp-tint-ink-danger:  #5e1c11;
  --bp-tint-ink-info:    #1e3a5f;

  /* Type */
  --bp-display-family: 'Lora', Georgia, serif;
  --bp-display-weight: 500;
  --bp-serif-family:   'Newsreader', Georgia, serif;
  --bp-body-family:    'Inter', system-ui, sans-serif;
  --bp-mono-family:    'JetBrains Mono', ui-monospace, monospace;

  /* Radii */
  --bp-r-sm:   4px;
  --bp-r-md:   8px;
  --bp-r-lg:   14px;
  --bp-r-pill: 999px;

  /* Spacing */
  --bp-s-1: 4px;  --bp-s-2: 8px;  --bp-s-3: 12px;
  --bp-s-4: 16px; --bp-s-5: 24px; --bp-s-6: 32px;
  --bp-s-7: 48px; --bp-s-8: 64px;

  /* Motion */
  --bp-easing:   cubic-bezier(.2,.6,.2,1);
  --bp-dur-fast: 120ms;
  --bp-dur-med:  200ms;

  /* Legacy aliases — forward to --bp-* so feature stylesheets not yet migrated keep working */
  --bg:                  var(--bp-paper);
  --panel:               var(--bp-surface);
  --text:                var(--bp-ink);
  --muted:               var(--bp-ink-muted);
  --border:              var(--bp-rule);
  --primary:             var(--bp-accent);
  --primary-600:         var(--bp-accent);
  --success:             var(--bp-success);
  --danger:              var(--bp-danger);
  --color-border:        var(--bp-rule);
  --color-border-subtle: var(--bp-rule-soft);
  --color-text:          var(--bp-ink);
  --color-text-muted:    var(--bp-ink-muted);
  --color-text-slate:    var(--bp-ink-2);
  --color-link:          var(--bp-accent);
  --radius-sm:           var(--bp-r-md);
  --radius-md:           var(--bp-r-lg);
  --radius-lg:           var(--bp-r-lg);

  /* Font sizes — no --bp-* equivalent; kept for feature stylesheet compat */
  --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;
}

/* Enforce the HTML spec: the [hidden] attribute must suppress display even when
   author stylesheets set an explicit display value on the element (e.g. btn classes). */
[hidden] {
  display: none !important;
}

/* Global element/link defaults */
a { color: var(--bp-accent); 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: var(--bp-paper);
  border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-md);
  color: var(--bp-ink);
  outline: none;
}
.form-control:focus,
input.input:focus,
textarea.input:focus,
.date-selects select:focus {
  border-color: var(--bp-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-accent) 15%, transparent);
}

/* Unified card component applied to existing card-like classes */
.card,
.section-card,
.we-card,
.auth-card {
  background: var(--bp-paper);
  border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-lg);
  padding: 1rem;
  box-shadow: none;
}
.card--raised { box-shadow: none; }
.card--tight { padding: .75rem; }
.card--lg { padding: 1.5rem; border-radius: var(--bp-r-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(--bp-paper);
  padding-top: 0.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--bp-rule);
}

/* 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(--bp-ink-muted);
  font-size: var(--fs-sm);
}
/* Emphasis variants */
.section-warning {
  background: var(--bp-tint-warning);
  border-left: 4px solid var(--bp-warning);
}
.section-neutral {
  background: var(--bp-surface);
  border-left: 4px solid var(--bp-ink-subtle);
}