/*
 * MTCPatient — Frontend (espace patient privé)
 *
 * Stylesheet du dashboard patient. Utilise les variables CSS du thème
 * mtccabinet si présent, avec fallbacks (`var(--mtc-red, #9B1C1C)`)
 * pour fonctionner avec n'importe quel thème.
 */

:root {
  /* Fallbacks si thème ≠ mtccabinet */
  --mtc-fe-red:        #9B1C1C;
  --mtc-fe-red-dark:   #6E1414;
  --mtc-fe-gold:       #B7882A;
  --mtc-fe-ivory:      #FAFAF7;
  --mtc-fe-paper:      #F5F1EA;
  --mtc-fe-cream:      #FBF7EF;
  --mtc-fe-ink:        #2A2520;
  --mtc-fe-ink-soft:   #4D4842;
  --mtc-fe-ink-mute:   #6B6862;
  --mtc-fe-line:       #E8E4DD;
  --mtc-fe-zh:         #5B2222;
}

/* ═══════════════════════════════════════════════════════════════
   1. PAGE LOGIN
   ═══════════════════════════════════════════════════════════════ */

.mtc-login-wrap {
  max-width: 480px;
  margin: 4rem auto;
  padding: 0 1rem;
}

.mtc-login-card {
  background: #fff;
  border: 1px solid var(--mtc-line, var(--mtc-fe-line));
  border-radius: 12px;
  padding: 3rem 2.5rem;
  box-shadow: 0 4px 16px rgba(42, 37, 32, 0.04);
}

.mtc-login-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  margin: 0 0 0.5rem;
  color: var(--mtc-ink, var(--mtc-fe-ink));
  text-align: center;
}

.mtc-login-zh {
  display: block;
  font-family: 'Noto Serif SC', serif;
  font-size: 1rem;
  color: var(--mtc-zh, var(--mtc-fe-zh));
  font-weight: 400;
  margin-top: 4px;
}

.mtc-login-intro {
  text-align: center;
  color: var(--mtc-ink-soft, var(--mtc-fe-ink-soft));
  margin-bottom: 2rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.mtc-login-card form#loginform {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mtc-login-card form#loginform p {
  margin: 0;
}

.mtc-login-card form#loginform label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--mtc-ink-soft, var(--mtc-fe-ink-soft));
  margin-bottom: 0.4rem;
}

.mtc-login-card form#loginform input[type="text"],
.mtc-login-card form#loginform input[type="password"] {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  border: 1px solid var(--mtc-line, var(--mtc-fe-line));
  border-radius: 4px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.mtc-login-card form#loginform input:focus {
  outline: none;
  border-color: var(--mtc-red, var(--mtc-fe-red));
  box-shadow: 0 0 0 3px rgba(155, 28, 28, 0.1);
}

.mtc-login-card form#loginform .login-submit {
  margin-top: 0.5rem;
}

.mtc-login-card form#loginform input[type="submit"] {
  width: 100%;
  padding: 0.85rem 1.5rem;
  background: var(--mtc-red, var(--mtc-fe-red));
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.mtc-login-card form#loginform input[type="submit"]:hover {
  background: var(--mtc-red-dark, var(--mtc-fe-red-dark));
}

.mtc-login-card form#loginform .login-remember {
  font-size: 0.85rem;
  color: var(--mtc-ink-mute, var(--mtc-fe-ink-mute));
}

.mtc-login-lost {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.85rem;
}

.mtc-login-lost a {
  color: var(--mtc-red, var(--mtc-fe-red));
  text-decoration: none;
}

.mtc-login-lost a:hover {
  text-decoration: underline;
}

.mtc-login-help {
  text-align: center;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--mtc-line, var(--mtc-fe-line));
  color: var(--mtc-ink-mute, var(--mtc-fe-ink-mute));
}

/* ═══════════════════════════════════════════════════════════════
   2. DASHBOARD HEADER
   ═══════════════════════════════════════════════════════════════ */

.mtc-dashboard {
  max-width: 960px;
  margin: 2rem auto;
  padding: 0 1rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--mtc-ink, var(--mtc-fe-ink));
}

.mtc-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem 0 1.5rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--mtc-line, var(--mtc-fe-line));
  margin-bottom: 0;
}

.mtc-dashboard-greeting {
  flex: 1;
  min-width: 0;
}

.mtc-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--mtc-gold, var(--mtc-fe-gold));
  margin-bottom: 0.5rem;
}

.mtc-dashboard-greeting h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  margin: 0;
  color: var(--mtc-ink, var(--mtc-fe-ink));
  line-height: 1.1;
}

.mtc-dashboard-actions {
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   3. NAVIGATION
   ═══════════════════════════════════════════════════════════════ */

.mtc-dashboard-nav {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem 0;
  margin: 0 0 1.5rem;
  border-bottom: 1px solid var(--mtc-line, var(--mtc-fe-line));
  overflow-x: auto;
  scrollbar-width: thin;
}

.mtc-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  color: var(--mtc-ink-soft, var(--mtc-fe-ink-soft));
  text-decoration: none !important;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.15s;
  position: relative;
}

.mtc-nav-link:hover {
  background: var(--mtc-paper, var(--mtc-fe-paper));
  color: var(--mtc-red, var(--mtc-fe-red));
}

.mtc-nav-link.is-active {
  color: var(--mtc-red, var(--mtc-fe-red));
  background: var(--mtc-paper, var(--mtc-fe-paper));
}

.mtc-nav-link.is-active::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: var(--mtc-red, var(--mtc-fe-red));
}

.mtc-nav-icon {
  font-size: 1rem;
}

.mtc-nav-icon[aria-hidden]:lang(zh),
.mtc-nav-icon {
  font-family: 'Noto Serif SC', 'Songti SC', serif;
}

/* ═══════════════════════════════════════════════════════════════
   4. SECTIONS
   ═══════════════════════════════════════════════════════════════ */

.mtc-dashboard-body {
  padding: 1rem 0 3rem;
}

.mtc-section {
  background: #fff;
  border: 1px solid var(--mtc-line, var(--mtc-fe-line));
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 1.5rem;
}

.mtc-section-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--mtc-ink, var(--mtc-fe-ink));
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.mtc-section-zh {
  font-family: 'Noto Serif SC', serif;
  font-size: 1rem;
  color: var(--mtc-zh, var(--mtc-fe-zh));
  font-weight: 400;
}

.mtc-section-intro {
  color: var(--mtc-ink-soft, var(--mtc-fe-ink-soft));
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--mtc-line, var(--mtc-fe-line));
}

/* ═══════════════════════════════════════════════════════════════
   5. STATS (HOME)
   ═══════════════════════════════════════════════════════════════ */

.mtc-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.mtc-stat-card {
  background: var(--mtc-paper, var(--mtc-fe-paper));
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
}

.mtc-stat-card--highlight {
  background: linear-gradient(135deg, #FCE9E9 0%, var(--mtc-paper, var(--mtc-fe-paper)) 100%);
  border: 1px solid rgba(155, 28, 28, 0.2);
  text-align: left;
}

.mtc-stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  color: var(--mtc-red, var(--mtc-fe-red));
  margin-bottom: 0.25rem;
}

.mtc-stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mtc-ink-mute, var(--mtc-fe-ink-mute));
}

.mtc-stat-card--highlight .mtc-stat-label {
  color: var(--mtc-red, var(--mtc-fe-red));
  margin-bottom: 0.5rem;
}

.mtc-stat-date {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--mtc-ink, var(--mtc-fe-ink));
}

.mtc-stat-note {
  font-size: 0.85rem;
  color: var(--mtc-ink-soft, var(--mtc-fe-ink-soft));
  margin-top: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   6. INFO BOX & READ-ONLY FIELDS
   ═══════════════════════════════════════════════════════════════ */

.mtc-info-box {
  background: var(--mtc-paper, var(--mtc-fe-paper));
  border-left: 3px solid var(--mtc-gold, var(--mtc-fe-gold));
  padding: 1.25rem 1.5rem;
  border-radius: 0 6px 6px 0;
  margin-bottom: 1.5rem;
}

.mtc-info-box--readonly {
  border-left-color: var(--mtc-ink-mute, var(--mtc-fe-ink-mute));
}

.mtc-info-box h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  margin: 0 0 1rem;
  color: var(--mtc-ink, var(--mtc-fe-ink));
}

.mtc-info-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1.5rem;
  margin: 0;
}

.mtc-info-list dt {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mtc-ink-mute, var(--mtc-fe-ink-mute));
  padding: 0.25rem 0;
}

.mtc-info-list dd {
  margin: 0;
  padding: 0.25rem 0;
  color: var(--mtc-ink, var(--mtc-fe-ink));
}

.mtc-info-list dd code {
  background: rgba(155, 28, 28, 0.05);
  color: var(--mtc-red, var(--mtc-fe-red));
  padding: 0.1em 0.5em;
  border-radius: 3px;
  font-size: 0.9em;
}

/* ═══════════════════════════════════════════════════════════════
   7. FORMULAIRES
   ═══════════════════════════════════════════════════════════════ */

.mtc-form h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  margin: 1.5rem 0 1rem;
  color: var(--mtc-ink, var(--mtc-fe-ink));
}

.mtc-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem 1.5rem;
}

.mtc-form-row {
  display: flex;
  flex-direction: column;
}

.mtc-form-row label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--mtc-ink-soft, var(--mtc-fe-ink-soft));
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mtc-input {
  padding: 0.65rem 0.85rem;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--mtc-ink, var(--mtc-fe-ink));
  background: #fff;
  border: 1px solid var(--mtc-line, var(--mtc-fe-line));
  border-radius: 4px;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}

.mtc-input:focus {
  outline: none;
  border-color: var(--mtc-red, var(--mtc-fe-red));
  box-shadow: 0 0 0 3px rgba(155, 28, 28, 0.1);
}

.mtc-form-actions {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--mtc-line, var(--mtc-fe-line));
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.mtc-form-feedback {
  font-size: 0.9rem;
  color: var(--mtc-ink-mute, var(--mtc-fe-ink-mute));
}

.mtc-form-feedback.is-success { color: #4A7C1F; }
.mtc-form-feedback.is-error   { color: #B91C1C; }
.mtc-form-feedback.is-working { color: var(--mtc-ink-mute, var(--mtc-fe-ink-mute)); }

/* ═══════════════════════════════════════════════════════════════
   8. BOUTONS
   ═══════════════════════════════════════════════════════════════ */

.mtc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.2s;
  line-height: 1.2;
}

.mtc-btn--primary {
  background: var(--mtc-red, var(--mtc-fe-red));
  color: #fff;
  border-color: var(--mtc-red, var(--mtc-fe-red));
}

.mtc-btn--primary:hover {
  background: var(--mtc-red-dark, var(--mtc-fe-red-dark));
  border-color: var(--mtc-red-dark, var(--mtc-fe-red-dark));
  color: #fff;
}

.mtc-btn--ghost {
  background: transparent;
  color: var(--mtc-ink, var(--mtc-fe-ink));
  border-color: var(--mtc-line, var(--mtc-fe-line));
}

.mtc-btn--ghost:hover {
  border-color: var(--mtc-ink, var(--mtc-fe-ink));
  background: var(--mtc-paper, var(--mtc-fe-paper));
  color: var(--mtc-ink, var(--mtc-fe-ink));
}

.mtc-btn--small {
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
}

/* ═══════════════════════════════════════════════════════════════
   9. LISTES (séances, ordonnances)
   ═══════════════════════════════════════════════════════════════ */

.mtc-seance-list,
.mtc-ordonnance-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mtc-seance-item {
  background: var(--mtc-paper, var(--mtc-fe-paper));
  padding: 1rem 1.25rem;
  border-radius: 6px;
  border-left: 3px solid var(--mtc-gold, var(--mtc-fe-gold));
}

.mtc-seance-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.mtc-seance-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--mtc-red, var(--mtc-fe-red));
}

.mtc-seance-meta time {
  font-size: 0.85rem;
  color: var(--mtc-ink-mute, var(--mtc-fe-ink-mute));
}

.mtc-seance-motif {
  color: var(--mtc-ink-soft, var(--mtc-fe-ink-soft));
  font-size: 0.9rem;
}

.mtc-ordonnance-item {
  display: flex;
  gap: 1rem;
  align-items: center;
  background: var(--mtc-cream, var(--mtc-fe-cream));
  padding: 1rem 1.25rem;
  border-radius: 6px;
  border-left: 3px solid var(--mtc-red, var(--mtc-fe-red));
}

.mtc-ordonnance-icon {
  font-family: 'Noto Serif SC', serif;
  font-size: 2rem;
  color: var(--mtc-red, var(--mtc-fe-red));
  line-height: 1;
  flex-shrink: 0;
}

.mtc-ordonnance-body {
  flex: 1;
  min-width: 0;
}

.mtc-ordonnance-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.mtc-ordonnance-meta {
  font-size: 0.85rem;
  color: var(--mtc-ink-mute, var(--mtc-fe-ink-mute));
}

/* ═══════════════════════════════════════════════════════════════
   10. UTILITAIRES
   ═══════════════════════════════════════════════════════════════ */

.mtc-empty {
  text-align: center;
  color: var(--mtc-ink-mute, var(--mtc-fe-ink-mute));
  padding: 2rem;
  font-style: italic;
}

.mtc-error-box {
  max-width: 540px;
  margin: 4rem auto;
  padding: 2.5rem 2rem;
  background: #FCE9E9;
  border-left: 4px solid var(--mtc-red, var(--mtc-fe-red));
  border-radius: 0 8px 8px 0;
  text-align: center;
}

.mtc-error-box h2 {
  font-family: 'Cormorant Garamond', serif;
  margin: 0 0 1rem;
  color: var(--mtc-red, var(--mtc-fe-red));
}

.mtc-already-logged {
  text-align: center;
  padding: 3rem 2rem;
}

.mtc-already-logged p { margin: 0 0 1rem; }

/* ═══════════════════════════════════════════════════════════════
   11. RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  .mtc-dashboard {
    margin: 1rem auto;
  }
  .mtc-section {
    padding: 1.5rem 1.25rem;
  }
  .mtc-info-list {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
  .mtc-info-list dt {
    margin-top: 0.5rem;
  }
  .mtc-form-grid {
    grid-template-columns: 1fr;
  }
  .mtc-stat-num {
    font-size: 2.5rem;
  }
}

@media (max-width: 480px) {
  .mtc-dashboard-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .mtc-form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .mtc-btn {
    width: 100%;
  }
}