/* ================================================================
   MAILTERRA — Design System
   Charte graphique NOSTERRA / INTERRA
   Brique #C8754C · Crème #F9F4EE · Vert #3C3633
   Polices : Playfair Display (titres) · Montserrat (corps)
   ----------------------------------------------------------------
   Réutilise à l'identique les tokens de couleur d'INTERRA.
   Composants adaptés à MAILTERRA : navbar, file de validation,
   cartes mail, panneau détail, compose, réglages, login.
================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,800;1,400&family=Montserrat:wght@400;500;600;700&display=swap');

:root {
  --brique:       #C8754C;
  --brique-deep:  #A85C37;
  --brique-soft:  #E6A785;
  --brique-tint:  #F3D9C7;
  --creme:        #F9F4EE;
  --creme-warm:   #F1E9DC;
  --creme-deep:   #E8DCC9;
  --vert:         #3C3633;
  --vert-soft:    #5B524D;
  --vert-mute:    #8A807A;

  --ok:      #2ecc71;
  --warn:    #f39c12;
  --danger:  #e74c3c;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  --shadow-sm:  0 2px 8px rgba(60,54,51,.08);
  --shadow-md:  0 6px 20px rgba(60,54,51,.12);
  --shadow-lg:  0 16px 40px rgba(60,54,51,.16);

  --panel-width: 440px;
  --radius:      12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--creme);
  color: var(--vert);
  min-height: 100vh;
}

a { color: var(--brique); text-decoration: none; }
a:hover { color: var(--brique-deep); }

/* ── NAVBAR ──────────────────────────────────────────────── */
.navbar {
  background: var(--vert) !important;
  border-bottom: 3px solid var(--brique);
  font-family: var(--font-body);
  box-shadow: var(--shadow-sm);
}
.navbar-brand {
  font-family: var(--font-display) !important;
  font-style: italic;
  font-weight: 800;
  font-size: 1.3rem !important;
  color: var(--creme) !important;
  letter-spacing: .5px;
}
.navbar-brand i { color: var(--brique) !important; font-style: normal; margin-right: 6px; }
.navbar .nav-link {
  color: rgba(249,244,238,.72) !important;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .3px;
  border-radius: 6px;
  padding: 6px 12px !important;
  transition: all .15s;
}
.navbar .nav-link:hover { color: var(--creme) !important; background: rgba(249,244,238,.08); }
.navbar .nav-link.active { color: var(--creme) !important; background: var(--brique); }

/* ── BOUTONS ─────────────────────────────────────────────── */
.btn { font-family: var(--font-body); font-weight: 600; font-size: 13px; border-radius: 8px; letter-spacing: .2px; }
.btn-brique {
  background: var(--brique); border: 1.5px solid var(--brique);
  color: #fff; font-weight: 700;
}
.btn-brique:hover { background: var(--brique-deep); border-color: var(--brique-deep); color: #fff; }
.btn-vert {
  background: var(--vert); border: 1.5px solid var(--vert); color: var(--creme);
}
.btn-vert:hover { background: #2a2522; color: var(--creme); }
.btn-ghost {
  background: #fff; border: 1.5px solid var(--creme-deep); color: var(--vert-soft); font-weight: 600;
}
.btn-ghost:hover { border-color: var(--brique-soft); color: var(--brique); }
.btn-danger-soft {
  background: #fff; border: 1.5px solid #f1c9c4; color: var(--danger); font-weight: 600;
}
.btn-danger-soft:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

/* ── LAYOUT GÉNÉRAL ──────────────────────────────────────── */
.app-main { max-width: 1100px; margin: 0 auto; padding: 22px 18px 80px; }
.page-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--vert);
  margin: 4px 0 2px;
}
.page-sub { color: var(--vert-mute); font-size: 13px; margin-bottom: 18px; }

/* ── BARRE DE FILTRES ────────────────────────────────────── */
.filter-bar {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.filter-btn {
  white-space: nowrap;
  font-size: 12px; font-weight: 600; letter-spacing: .2px;
  border: 1.5px solid var(--creme-deep);
  color: var(--vert-soft);
  background: #fff;
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all .15s;
}
.filter-btn .count { opacity: .6; margin-left: 4px; font-weight: 700; }
.filter-btn.active { background: var(--vert); color: var(--creme); border-color: var(--vert); }
.filter-btn:hover:not(.active) { background: var(--creme-warm); border-color: var(--brique-soft); }

/* ── CARTES MAIL (file de validation) ────────────────────── */
.mail-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff;
  border: 1px solid var(--creme-deep);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s, transform .05s;
}
.mail-card:hover { box-shadow: var(--shadow-md); border-color: var(--brique-soft); }
.mail-card:active { transform: scale(.998); }
.mail-card.selected { border-color: var(--brique); box-shadow: 0 0 0 3px rgba(200,117,76,.15); }

.mail-avatar {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--creme-warm);
  color: var(--brique-deep);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px;
  border: 1.5px solid var(--brique-tint);
}
.mail-body { flex: 1; min-width: 0; }
.mail-row1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mail-name { font-weight: 700; color: var(--vert); font-size: 14px; }
.mail-time { font-size: 11px; color: var(--vert-mute); white-space: nowrap; }
.mail-subject { font-weight: 600; color: var(--vert-soft); font-size: 13px; margin: 2px 0; }
.mail-snippet {
  font-size: 12px; color: var(--vert-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-badges { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }

/* ── BADGES ──────────────────────────────────────────────── */
.badge-mt {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; border-radius: 5px;
  padding: 3px 8px; font-family: var(--font-body);
}
.badge-source-app    { background: var(--creme-deep); color: var(--vert-soft); }
.badge-source-intake { background: var(--brique-tint); color: var(--brique-deep); }
.badge-source-followup { background: #fde9d6; color: #b5631f; }
.badge-urgency-high  { background: #fadbd8; color: #922b21; }
.badge-type         { background: var(--creme-warm); color: var(--vert-mute); }
.badge-status-scheduled { background: #fef9e7; color: #9a7d0a; }
.badge-status-tofix { background: #eae3f5; color: #6b4ca8; }

/* ── PANNEAU DÉTAIL ──────────────────────────────────────── */
.detail-panel {
  position: fixed;
  top: 0; right: calc(-1 * var(--panel-width) - 20px);
  width: var(--panel-width);
  max-width: 100vw;
  height: 100vh;
  background: #fff;
  box-shadow: -4px 0 28px rgba(60,54,51,.16);
  z-index: 1050;
  transition: right .3s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  border-left: 1px solid var(--creme-deep);
}
.detail-panel.open { right: 0; }
.detail-backdrop {
  position: fixed; inset: 0; background: rgba(60,54,51,.32);
  opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 1040;
}
.detail-backdrop.open { opacity: 1; pointer-events: auto; }

.detail-header {
  position: sticky; top: 0; z-index: 5;
  background: var(--vert);
  border-bottom: 3px solid var(--brique);
  padding: 14px 18px;
  display: flex; justify-content: space-between; align-items: center;
}
.detail-header .dh-to { color: var(--creme); font-weight: 700; font-size: 14px; }
.detail-header .dh-subject { color: rgba(249,244,238,.6); font-size: 12px; margin-top: 2px; }
.detail-close { background: transparent; border: none; color: var(--creme); font-size: 20px; cursor: pointer; }

.detail-section { padding: 14px 18px; border-bottom: 1px solid var(--creme-deep); }
.detail-section h6 {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
  color: var(--vert-mute); margin: 0 0 8px;
}
.detail-summary li { font-size: 12.5px; color: var(--vert-soft); margin-bottom: 4px; }
.detail-context { font-size: 12.5px; color: var(--vert-soft); line-height: 1.5; }
.detail-instruction {
  font-size: 12.5px; color: var(--vert-soft); font-style: italic;
  background: var(--creme); border-left: 3px solid var(--brique-soft);
  padding: 8px 12px; border-radius: 0 8px 8px 0;
}

.draft-textarea {
  width: 100%; min-height: 220px;
  border: 1.5px solid var(--creme-deep); border-radius: 10px;
  padding: 12px 14px; font-family: var(--font-body); font-size: 13.5px;
  color: var(--vert); line-height: 1.55; resize: vertical; background: #fff;
}
.draft-textarea:focus { outline: none; border-color: var(--brique); box-shadow: 0 0 0 3px rgba(200,117,76,.15); }

.detail-actions {
  position: sticky; bottom: 0;
  background: var(--creme); border-top: 1px solid var(--creme-deep);
  padding: 12px 18px; display: flex; gap: 8px; flex-wrap: wrap;
}
.detail-actions .btn { flex: 1 1 auto; }

/* ── FORMULAIRES (compose, settings, login) ──────────────── */
.card-panel {
  background: #fff; border: 1px solid var(--creme-deep);
  border-radius: var(--radius); padding: 20px 22px; margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.card-panel h5 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  color: var(--vert); margin: 0 0 4px;
}
.card-panel .hint { font-size: 12px; color: var(--vert-mute); margin-bottom: 14px; }

.form-label-mt {
  font-size: 11px; font-weight: 700; color: var(--vert-soft);
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; display: block;
}
.form-control, .form-select {
  border: 1.5px solid var(--creme-deep) !important; border-radius: 8px !important;
  font-size: 13.5px !important; color: var(--vert) !important; background: #fff !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brique) !important; box-shadow: 0 0 0 3px rgba(200,117,76,.15) !important;
}
textarea.form-control { line-height: 1.55; }

/* Sélecteur de mode (compose) */
.mode-toggle { display: flex; gap: 8px; margin-bottom: 16px; }
.mode-option {
  flex: 1; text-align: center; cursor: pointer;
  border: 1.5px solid var(--creme-deep); border-radius: 10px; padding: 14px;
  font-weight: 600; font-size: 13px; color: var(--vert-soft); transition: all .15s;
}
.mode-option i { display: block; font-size: 22px; margin-bottom: 6px; color: var(--vert-mute); }
.mode-option.active { border-color: var(--brique); background: var(--creme-warm); color: var(--vert); }
.mode-option.active i { color: var(--brique); }

.dictation-hint {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--vert-mute);
  background: var(--creme-warm); border-radius: 8px; padding: 8px 12px; margin-top: 8px;
}
.dictation-hint i { color: var(--brique); }

/* ── LOGIN ───────────────────────────────────────────────── */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card {
  background: #fff; border-radius: 16px; box-shadow: var(--shadow-lg);
  padding: 36px 32px; width: 100%; max-width: 380px; text-align: center;
  border-top: 4px solid var(--brique);
}
.login-brand {
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: 1.8rem; color: var(--vert); margin-bottom: 4px;
}
.login-brand i { color: var(--brique); font-style: normal; }

/* ── TOASTS ──────────────────────────────────────────────── */
.toast-host { position: fixed; bottom: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; }
.toast-mt {
  background: var(--vert); color: var(--creme);
  padding: 12px 18px; border-radius: 10px; box-shadow: var(--shadow-md);
  font-size: 13px; font-weight: 600; min-width: 220px;
  border-left: 4px solid var(--brique);
  animation: toastIn .2s ease;
}
.toast-mt.ok { border-left-color: var(--ok); }
.toast-mt.err { border-left-color: var(--danger); }
@keyframes toastIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── RECHERCHE CONTACT (compose) ─────────────────────────── */
.contact-results { margin-top: 4px; }
.contact-hit {
  font-size: 13px; color: var(--vert-soft);
  padding: 8px 12px; border: 1px solid var(--creme-deep);
  border-radius: 8px; margin-bottom: 4px; cursor: pointer; background: #fff;
}
.contact-hit:hover { border-color: var(--brique-soft); background: var(--creme-warm); }

/* ── ÉTAT VIDE ───────────────────────────────────────────── */
.empty-state { text-align: center; padding: 60px 20px; color: var(--vert-mute); }
.empty-state i { font-size: 40px; color: var(--creme-deep); display: block; margin-bottom: 12px; }
.empty-state .title { font-weight: 700; color: var(--vert-soft); margin-bottom: 4px; }

/* ── LOADING ─────────────────────────────────────────────── */
#loadingOverlay {
  position: fixed; inset: 0; background: rgba(249,244,238,.85);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
  font-weight: 600; color: var(--vert); transition: opacity .3s;
}
#loadingOverlay.hidden { opacity: 0; pointer-events: none; }
.spinner-mt {
  width: 28px; height: 28px; border: 3px solid var(--creme-deep);
  border-top-color: var(--brique); border-radius: 50%; animation: spin .7s linear infinite; margin-right: 10px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .detail-panel { width: 100vw; right: -100vw; }
  .app-main { padding: 16px 12px 80px; }
  .mode-toggle { flex-direction: column; }
  .detail-actions .btn { flex: 1 1 100%; }
}