/* app/static/css/components.css
 * Custom Material Web component overrides and Chepeh-specific component styles.
 *
 * Sections:
 *   1. Material Web component overrides
 *   2. HTMX indicators
 *   3. Chepeh component classes (card, btn, form-*)
 *   4. Bootstrap-compatible shims (used by inner-app templates)
 *   5. Grade score cells (Phase 3)
 *   6. Trial banner
 *
 * FUTURE CHANGES:
 *   - Phase 4: @media print styles for report card
 *   - Phase 5: .chepeh-stat-card; .chepeh-chart-container
 */

/* ══════════════════════════════════════════════════════════════════
   6. TRIAL BANNER
   ══════════════════════════════════════════════════════════════════ */

.chepeh-trial-banner {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1.25rem;
  font-size: .875rem;
  line-height: 1.4;
  flex-wrap: wrap;
}

.chepeh-trial-banner--expired {
  background: color-mix(in srgb, var(--ctb-bu-red) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ctb-bu-red) 30%, transparent);
  color: var(--ctb-color-error);
}

.chepeh-trial-banner--warning {
  background: color-mix(in srgb, var(--ctb-selective-yellow) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ctb-selective-yellow) 35%, transparent);
  color: var(--ctb-color-text-primary);
}

.chepeh-trial-banner__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.chepeh-trial-banner--expired .chepeh-trial-banner__icon { color: var(--ctb-bu-red); }
.chepeh-trial-banner--warning .chepeh-trial-banner__icon { color: var(--ctb-selective-yellow); }

.chepeh-trial-banner__text { flex: 1; min-width: 0; }

.chepeh-trial-banner__cta {
  flex-shrink: 0;
  padding: .3rem .9rem;
  border-radius: .4rem;
  font-weight: 600;
  font-size: .8rem;
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid currentColor;
  transition: background .15s, color .15s;
}

.chepeh-trial-banner--expired .chepeh-trial-banner__cta {
  color: var(--ctb-bu-red);
}
.chepeh-trial-banner--expired .chepeh-trial-banner__cta:hover {
  background: var(--ctb-bu-red);
  color: #fff;
}

.chepeh-trial-banner--warning .chepeh-trial-banner__cta {
  color: var(--ctb-color-primary);
  border-color: var(--ctb-color-primary);
}
.chepeh-trial-banner--warning .chepeh-trial-banner__cta:hover {
  background: var(--ctb-color-primary);
  color: var(--ctb-color-on-primary);
}

/* ══════════════════════════════════════════════════════════════════
   1. MATERIAL WEB COMPONENT OVERRIDES
   ══════════════════════════════════════════════════════════════════ */

md-filled-button {
  --md-filled-button-container-color: var(--md-sys-color-primary);
  --md-filled-button-label-text-color: var(--md-sys-color-on-primary);
}

md-outlined-text-field {
  --md-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);
  width: 100%;
}

md-elevated-card {
  border-radius: var(--md-sys-shape-corner-large);
}

/* ══════════════════════════════════════════════════════════════════
   2. HTMX INDICATORS
   ══════════════════════════════════════════════════════════════════ */

.chepeh-htmx-indicator {
  display: none;
}

.htmx-request .chepeh-htmx-indicator {
  display: inline-block;
}

/* ══════════════════════════════════════════════════════════════════
   3. CHEPEH COMPONENT CLASSES
   ══════════════════════════════════════════════════════════════════ */

/* Class cards */
.chepeh-class-card {
  background: var(--md-sys-color-surface);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--chepeh-elevation-1);
  padding: var(--chepeh-space-lg);
  transition: box-shadow 0.2s ease;
}

.chepeh-class-card:hover {
  box-shadow: var(--chepeh-elevation-2);
}

/* ══════════════════════════════════════════════════════════════════
   4. BOOTSTRAP-COMPATIBLE SHIMS
   Maps legacy Bootstrap class names to Chepeh M3 styles so that
   existing inner-app templates render correctly without full rewrites.
   ══════════════════════════════════════════════════════════════════ */

/* CSS variable aliases for shims — values set by chepeh-theme.css M3 compat layer */
:root {
  --primary:    var(--md-sys-color-primary);
  --secondary:  var(--md-sys-color-secondary);
  --danger:     var(--md-sys-color-error);
  --success:    var(--ctb-color-success);
  --warning:    var(--ctb-color-warning);
  --info:       var(--md-sys-color-primary-container);
}

/* Card */
.card {
  background: var(--md-sys-color-surface);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--chepeh-elevation-2);
  padding: var(--chepeh-space-2xl);
}

.card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
  margin-bottom: var(--chepeh-space-md);
}

/* Form group */
.form-group {
  margin-bottom: var(--chepeh-space-md);
}

/* Form label */
.form-label {
  display: block;
  font-size: .875rem;
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: var(--chepeh-space-xs);
}

/* Form control (input / select / textarea) */
.form-control {
  display: block;
  width: 100%;
  padding: .625rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small);
  box-sizing: border-box;
  transition: border-color 0.15s ease;
  font-family: inherit;
}

.form-control:focus {
  outline: none;
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 2px var(--ctb-focus-ring);
}

select.form-control {
  appearance: auto;
}

/* Form error */
.form-error {
  display: block;
  color: var(--md-sys-color-error);
  font-size: .8rem;
  margin-top: var(--chepeh-space-xs);
}

/* Form text (helper text) */
.form-text {
  display: block;
  font-size: .8rem;
  color: var(--md-sys-color-on-surface-variant);
  margin-top: var(--chepeh-space-xs);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .625rem 1.25rem;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.5;
  border: none;
  border-radius: var(--md-sys-shape-corner-medium);
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow 0.15s ease, opacity 0.15s ease;
  font-family: inherit;
}

.btn:hover {
  opacity: 0.92;
}

.btn-primary {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.btn-primary:hover {
  box-shadow: var(--chepeh-elevation-2);
}

.btn-secondary {
  background: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
}

.btn-success {
  background: var(--success);
  color: var(--md-sys-color-on-primary);
}

.btn-danger {
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
}

.btn-block {
  display: flex;
  width: 100%;
}

/* Text utilities */
.text-muted {
  color: var(--md-sys-color-on-surface-variant);
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/* Link */
.link {
  color: var(--md-sys-color-primary);
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════
   5. PHASE 3 — SCORE CELLS & GRADE COLOUR VARIANTS
   ══════════════════════════════════════════════════════════════════ */

.chepeh-score-cell {
  font-weight: 600;
  font-size: .85rem;
  padding: .25rem .5rem;
  border-radius: var(--md-sys-shape-corner-extra-small);
  display: inline-block;
  min-width: 36px;
  text-align: center;
}

.chepeh-score-cell--A  { color: var(--ctb-color-grade-a); background: var(--ctb-color-grade-a-bg); }
.chepeh-score-cell--A- { color: var(--ctb-color-grade-a); background: var(--ctb-color-grade-a-bg); }
.chepeh-score-cell--B  { color: var(--ctb-color-grade-b); background: var(--ctb-color-grade-b-bg); }
.chepeh-score-cell--B+ { color: var(--ctb-color-grade-b); background: var(--ctb-color-grade-b-bg); }
.chepeh-score-cell--B- { color: var(--ctb-color-grade-b); background: var(--ctb-color-grade-b-bg); }
.chepeh-score-cell--C  { color: var(--ctb-color-grade-c); background: var(--ctb-color-grade-c-bg); }
.chepeh-score-cell--C+ { color: var(--ctb-color-grade-c); background: var(--ctb-color-grade-c-bg); }
.chepeh-score-cell--C- { color: var(--ctb-color-grade-c); background: var(--ctb-color-grade-c-bg); }
.chepeh-score-cell--D  { color: var(--ctb-color-grade-d); background: var(--ctb-color-grade-d-bg); }
.chepeh-score-cell--D+ { color: var(--ctb-color-grade-d); background: var(--ctb-color-grade-d-bg); }
.chepeh-score-cell--D- { color: var(--ctb-color-grade-d); background: var(--ctb-color-grade-d-bg); }
.chepeh-score-cell--E  { color: var(--ctb-color-grade-e); background: var(--ctb-color-grade-e-bg); }

/* ══════════════════════════════════════════════════════════════════
   6. RESPONSIVE UTILITIES
   ══════════════════════════════════════════════════════════════════ */

/* Horizontal-scroll wrapper for wide tables */
.chepeh-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--md-sys-shape-corner-large);
}

@media (max-width: 767px) {
  /* Bare tables scroll horizontally without a wrapper class */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  /* Tighter card padding on mobile */
  .card {
    padding: var(--chepeh-space-lg);
  }

  /* Button groups stack vertically */
  .chepeh-btn-group {
    flex-direction: column;
    align-items: stretch;
  }

  .chepeh-btn-group .btn,
  .chepeh-btn-group a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Inline flex rows wrap tightly */
  .chepeh-flex-wrap {
    flex-wrap: wrap;
    gap: var(--chepeh-space-sm) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   7. LOGO THEMING
   Two <img> tags are rendered per logo slot; CSS shows the one that
   matches the active data-theme and hides the other.
   Default (fallback) = dark mode, matching the app default.
   ══════════════════════════════════════════════════════════════════ */

/* Default / dark mode: show dark logo, hide light */
.chepeh-logo--light { display: none; }
.chepeh-logo--dark  { display: block; }

/* Light mode: swap */
[data-theme="light"] .chepeh-logo--dark  { display: none; }
[data-theme="light"] .chepeh-logo--light { display: block; }

/* Auth-page logo (64 × 64 square, same border-radius as the old logo-mark) */
.chepeh-auth-logo {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--md-sys-shape-corner-large);
  flex-shrink: 0;
}