:root {
  color-scheme: dark;
  --bg: #10141a;
  --bg-panel: #0d111a;
  --bg-card: #161c26;
  --bg-raised: #1c2333;
  --bg-soft: #131720;
  --border: #2a3347;
  --border-soft: #1e2738;
  --text-1: #e2e8f0;
  --text-2: #94a3b8;
  --text-3: #5a6a82;
  --amber: #f59e0b;
  --blue: #60a5fa;
  --green: #4ade80;
  --purple: #a78bfa;
  --orange: #fb923c;
  --red: #f87171;
  --gold: #d4a017;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family:
    "SF Pro Text",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 28%),
    linear-gradient(180deg, #0d1117 0%, #10141a 100%);
  color: var(--text-1);
}

button,
input,
select,
textarea,
a {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 18px;
  background: rgba(13, 17, 26, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(42, 51, 71, 0.9);
}

.topbar-logo {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.topbar-logo span {
  color: var(--amber);
}

.topbar-search {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(28, 35, 51, 0.9);
  color: var(--text-1);
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.topbar-search:focus {
  border-color: rgba(96, 165, 250, 0.6);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

.topbar-search::placeholder {
  color: var(--text-3);
}

.topbar-refresh {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--text-2);
  cursor: pointer;
  transition: transform 400ms ease;
}
.topbar-refresh--spinning {
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.topbar-time {
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* Indicateur "en direct" — point vert pulsant */
.topbar-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4);
  animation: live-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
.topbar-live-dot--demo {
  background: #f59e0b;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
  animation: live-pulse-amber 2s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); }
  50%       { box-shadow: 0 0 0 5px rgba(74, 222, 128, 0); }
}
@keyframes live-pulse-amber {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); }
  50%       { box-shadow: 0 0 0 5px rgba(245, 158, 11, 0); }
}

.topbar-mock {
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(245, 158, 11, 0.16);
  color: var(--amber);
}

.layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 0;
  background: rgba(13, 17, 26, 0.78);
  border-right: 1px solid rgba(42, 51, 71, 0.85);
}

.sidebar-label {
  padding: 10px 16px 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}

.sidebar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 10px 16px;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.sidebar-item:hover {
  background: rgba(28, 35, 51, 0.8);
  color: var(--text-1);
}

.sidebar-item.active {
  color: var(--text-1);
  border-left-color: var(--amber);
  background: rgba(245, 158, 11, 0.08);
}

.sidebar-item.active-devis {
  color: var(--green);
  border-left-color: var(--green);
  background: rgba(74, 222, 128, 0.08);
}

.sidebar-item.active-pay {
  color: var(--orange);
  border-left-color: var(--orange);
  background: rgba(251, 146, 60, 0.08);
}

.sidebar-badge {
  min-width: 24px;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 11px;
  text-align: center;
  font-weight: 700;
}

.sidebar-badge-grey {
  background: var(--bg-raised);
  color: var(--text-2);
}

.sidebar-badge-orange {
  background: rgba(251, 146, 60, 0.16);
  color: var(--orange);
}

.sidebar-sep {
  width: calc(100% - 24px);
  margin: 8px auto;
  border: 0;
  border-top: 1px solid var(--border);
}

.sidebar-reminders {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 12px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(28, 35, 51, 0.5);
}

.reminder-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text-2);
}

.reminder-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex-shrink: 0;
  margin-top: 5px;
  background: var(--amber);
}

.reminder-dot-grey {
  background: var(--text-3);
}

.reminder-add {
  margin-top: 4px;
  border: 0;
  background: transparent;
  color: var(--text-3);
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.main-panel {
  min-width: 0;
  overflow: auto;
}

.digest-header {
  position: sticky;
  top: 52px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(13, 17, 26, 0.86);
  backdrop-filter: blur(8px);
}

.digest-title,
.digest-count {
  font-size: 12px;
}

.digest-title {
  color: var(--text-3);
}

.digest-count {
  color: var(--text-2);
}

.digest-dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
}

.digest-urgent {
  color: var(--amber);
}

.digest-muted {
  color: var(--text-3);
}

.section {
  border-bottom: 1px solid var(--border-soft);
}

.section-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.section-header:hover {
  background: rgba(255, 255, 255, 0.02);
}

.section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.section-count {
  margin-left: auto;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
}

.section-chevron {
  color: var(--text-3);
  font-size: 10px;
}

.section-urgent .section-header {
  background: rgba(180, 83, 9, 0.14);
}

.section-urgent .section-title,
.section-urgent .section-count {
  color: var(--amber);
}

.section-clients .section-count,
.section-finance .section-count,
.section-promo .section-count,
.section-other .section-count {
  background: rgba(28, 35, 51, 0.85);
  color: var(--text-2);
}

.section-promo-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 14px;
  color: var(--text-3);
  font-size: 12px;
}

.cards-list,
.pipeline-list,
.pay-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 18px;
}

.card,
.pay-card,
.quote-card {
  background: rgba(22, 28, 38, 0.88);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.card {
  padding: 14px;
  border-left: 3px solid transparent;
}

.card-urgent {
  background: rgba(30, 22, 8, 0.94);
  border-color: rgba(180, 83, 9, 0.7);
  border-left-color: var(--amber);
}

.card-habitue {
  border-left-color: var(--gold);
}

.card-galerie {
  border-left-color: var(--purple);
}

.card-nouveau {
  border-left-color: var(--blue);
}

.card-prive {
  border-left-color: #22c55e;
}

.card-finance,
.card-promo,
.card-other {
  border-left-color: rgba(148, 163, 184, 0.4);
}

.card-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

/* Checkbox de sélection */
.email-checkbox {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(96, 165, 250, 0.85);
  background: rgba(96, 165, 250, 0.14);
  color: transparent;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  padding: 0;
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.2) inset;
}

.email-checkbox:hover {
  border-color: #60a5fa;
  background: rgba(96, 165, 250, 0.25);
  box-shadow: 0 0 6px rgba(96, 165, 250, 0.4);
}

.email-checkbox-checked {
  background: var(--green);
  border-color: var(--green);
  color: #0d1117;
  font-weight: 700;
  font-size: 13px;
  box-shadow: none;
}

/* Barre d'action groupée — fixe en bas */
.bulk-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(28, 35, 51, 0.97);
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 14px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 100;
  animation: bulk-bar-in 0.2s ease;
}

@keyframes bulk-bar-in {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.bulk-bar-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  white-space: nowrap;
  margin-right: 4px;
}

.bulk-bar-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.bulk-bar-cancel {
  background: transparent;
  border: none;
  color: var(--text-3);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  margin-left: 4px;
  transition: color 0.15s;
}

.bulk-bar-cancel:hover {
  color: var(--text-1);
}

.card-sender {
  font-size: 13px;
  font-weight: 700;
}

.card-date {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-3);
}

.mailbox-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(167, 139, 250, 0.12);
  color: #a78bfa;
  border: 1px solid rgba(167, 139, 250, 0.25);
  white-space: nowrap;
}

.card-subject-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.card-subject {
  font-size: 12px;
  color: var(--text-2);
  flex: 1;
  min-width: 0;
}

.btn-view-original {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--blue);
  opacity: 0.7;
  padding: 1px 6px;
  border-radius: 5px;
  border: 1px solid rgba(96, 165, 250, 0.2);
  background: rgba(96, 165, 250, 0.06);
  transition: opacity 0.15s, background 0.15s;
  white-space: nowrap;
}

.btn-view-original:hover {
  opacity: 1;
  background: rgba(96, 165, 250, 0.14);
}

.card-summary,
.quote-summary {
  line-height: 1.55;
  color: var(--text-2);
}

.summary-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.summary-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.summary-tag-format {
  color: #7dd3fc;
  border-color: rgba(125, 211, 252, 0.22);
  background: rgba(125, 211, 252, 0.07);
}

.summary-tag-delay {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.22);
  background: rgba(251, 191, 36, 0.07);
}

.btn-toggle-body {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--text-3);
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  transition: color 0.15s, background 0.15s;
}

.btn-toggle-body:hover {
  color: var(--text-2);
  background: rgba(255,255,255,0.05);
}

.email-body-panel {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: rgba(0,0,0,0.2);
  max-height: 320px;
  overflow-y: auto;
}

.email-body-text {
  margin: 0;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-word;
}

.card-meta {
  margin-top: 8px;
  font-size: 12px;
  color: var(--orange);
}

.card-reminder {
  margin-top: 8px;
  font-size: 12px;
  color: var(--amber);
}

.draft-panel {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(59, 130, 246, 0.22);
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.08);
}

/* Quand le brouillon est dans Mail — bordure verte */
.draft-panel--imap {
  border-color: rgba(74, 222, 128, 0.35);
  background: rgba(74, 222, 128, 0.05);
}

.draft-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #93c5fd;
  text-transform: uppercase;
}

/* Badge "✅ Dans Mail" */
.draft-imap-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(74, 222, 128, 0.18);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.35);
  text-transform: none;
  letter-spacing: 0;
}

.draft-label-warn {
  color: var(--amber) !important;
}

/* Bouton "Répondre" vert quand IMAP draft créé */
.btn-draft-done {
  background: rgba(74, 222, 128, 0.15) !important;
  border-color: rgba(74, 222, 128, 0.4) !important;
  color: #4ade80 !important;
}

.draft-text {
  width: 100%;
  white-space: pre-wrap;
  line-height: 1.65;
  color: var(--text-1);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 6px;
  resize: vertical;
  outline: none;
  font-size: 13px;
  transition: border-color 0.15s;
}

.draft-text:focus {
  border-color: rgba(96, 165, 250, 0.3);
  background: rgba(0,0,0,0.15);
}

.draft-label-hint {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-3);
  text-transform: none;
  letter-spacing: 0;
}

.draft-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.bexio-contact-form {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid rgba(74, 222, 128, 0.2);
  border-radius: 12px;
  background: rgba(74, 222, 128, 0.04);
}

.bexio-form-title {
  font-size: 12px;
  font-weight: 700;
  color: #4ade80;
  margin-bottom: 4px;
}

.bexio-form-email {
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 12px;
}

.bexio-form-grid {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 6px 10px;
  align-items: center;
  margin-bottom: 12px;
}

.bexio-form-label {
  font-size: 11px;
  color: var(--text-3);
  text-align: right;
}

.bexio-form-input {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(13, 17, 26, 0.6);
  color: var(--text-1);
  padding: 5px 8px;
  font-size: 12px;
  outline: none;
  transition: border-color 0.15s;
}

.bexio-form-input:focus {
  border-color: rgba(74, 222, 128, 0.4);
}

.bexio-form-input::placeholder {
  color: var(--text-3);
}
select.bexio-form-input { cursor: pointer; appearance: auto; }

.bexio-form-actions {
  display: flex;
  gap: 8px;
}

.reply-context-panel {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 12px;
  background: rgba(96, 165, 250, 0.05);
}

.reply-context-label {
  font-size: 12px;
  font-weight: 600;
  color: #93c5fd;
  margin-bottom: 8px;
}

.reply-context-hint {
  font-weight: 400;
  color: var(--text-3);
  font-size: 11px;
}

.reply-context-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(13, 17, 26, 0.6);
  color: var(--text-1);
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
}

.reply-context-input:focus {
  border-color: rgba(96, 165, 250, 0.5);
}

.reply-context-input::placeholder {
  color: var(--text-3);
  font-size: 12px;
}

.reply-context-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.card-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.contact-toolbar {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.category-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
  font-size: 12px;
}

.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
  font-size: 12px;
}

.contact-chip-value {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-raised);
  color: var(--text-1);
  padding: 6px 8px;
}

.contact-chip-meta {
  color: var(--text-3);
  font-size: 11px;
}

.category-picker select,
.quote-status,
.quote-notes,
.topbar-search {
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.category-picker select,
.quote-status {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-raised);
  color: var(--text-1);
  padding: 6px 8px;
}

.category-picker select:focus,
.quote-status:focus,
.quote-notes:focus,
.topbar-search:focus {
  border-color: rgba(96, 165, 250, 0.6);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.14);
}

.card-actions,
.quote-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(28, 35, 51, 0.9);
  color: var(--text-2);
  cursor: pointer;
}

.btn:hover {
  background: #253045;
  color: var(--text-1);
}

.btn:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

.btn-sm {
  padding: 6px 10px;
  font-size: 12px;
}

.btn-primary {
  border-color: rgba(96, 165, 250, 0.34);
  background: rgba(59, 130, 246, 0.16);
  color: #c7dfff;
}

.btn-devis {
  border-color: rgba(74, 222, 128, 0.34);
  background: rgba(34, 197, 94, 0.12);
  color: var(--green);
}

.btn-variant {
  border-color: rgba(139, 92, 246, 0.35);
  background: rgba(139, 92, 246, 0.10);
  color: #a78bfa;
  font-size: 12px;
}

/* ── Variantes de devis ──────────────────────────────────── */
.variant-cards { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.variant-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; }
.variant-card-done { border-color: rgba(74, 222, 128, 0.4); }
.variant-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.variant-label-input { flex: 1; background: transparent; border: none; border-bottom: 1px solid transparent; color: var(--text-1); font-size: 12px; font-weight: 600; padding: 1px 4px; outline: none; min-width: 0; }
.variant-label-input:hover { border-bottom-color: var(--border); }
.variant-label-input:focus { border-bottom-color: var(--blue); }
.btn-remove-variant { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 15px; padding: 0 3px; line-height: 1; flex-shrink: 0; }
.btn-remove-variant:hover { color: #f87171; }
.variant-card-summary { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.variant-price { font-size: 12px; font-weight: 700; color: var(--text-1); }
.variant-pos { font-size: 11px; color: var(--text-3); }
.variant-pos::before { content: "·"; margin-right: 4px; }
.variant-card-offer { margin-top: 5px; font-size: 11px; color: var(--text-2); }
.variant-card-offer a { color: var(--blue); text-decoration: none; margin-left: 6px; }

/* Done step — liste des offres créées */
.variant-done-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.variant-done-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.variant-done-label { color: var(--text-2); font-weight: 600; min-width: 80px; }
.variant-done-nr { color: var(--text-1); }

.btn-pay {
  border-color: rgba(251, 146, 60, 0.32);
  background: rgba(249, 115, 22, 0.12);
  color: var(--orange);
}

.btn-mail {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(148, 163, 184, 0.08);
  color: var(--text-2);
}

.btn-bexio {
  border-color: rgba(14, 165, 233, 0.34);
  background: rgba(14, 116, 144, 0.14);
  color: #93d5ff;
}

.btn-reminder {
  border-color: rgba(245, 158, 11, 0.34);
  background: rgba(245, 158, 11, 0.08);
  color: #f6c65b;
}

.btn-reminder-active {
  border-color: rgba(245, 158, 11, 0.34);
  background: rgba(245, 158, 11, 0.14);
  color: var(--amber);
}

/* Étoiles de priorité : doré / argent / bronze */
.btn-star {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(148, 163, 184, 0.06);
  color: var(--text-3);
}
.btn-star:hover { background: rgba(148, 163, 184, 0.14); }
.btn-star-or {
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(251, 191, 36, 0.14);
  color: #fbbf24;
}
.btn-star-argent {
  border-color: rgba(203, 213, 225, 0.5);
  background: rgba(203, 213, 225, 0.12);
  color: #cbd5e1;
}
.btn-star-bronze {
  border-color: rgba(205, 127, 50, 0.5);
  background: rgba(205, 127, 50, 0.12);
  color: #d99a5b;
}

.star-label-or     { color: #fbbf24; }
.star-label-argent { color: #cbd5e1; }
.star-label-bronze { color: #d99a5b; }

.btn-ghost {
  background: transparent;
  color: var(--text-3);
  border-color: transparent;
}

.badge,
.quote-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
}

.badge-habitue {
  background: rgba(212, 160, 23, 0.14);
  color: var(--gold);
}

.badge-nouveau {
  background: rgba(59, 130, 246, 0.14);
  color: var(--blue);
}

.badge-prive {
  background: rgba(34, 197, 94, 0.14);
  color: #86efac;
}

.badge-galerie {
  background: rgba(167, 139, 250, 0.14);
  color: var(--purple);
}

.badge-reminder {
  background: rgba(245, 158, 11, 0.14);
  color: var(--amber);
}

.badge-segment {
  background: rgba(96, 165, 250, 0.14);
  color: #c7dfff;
}

.badge-devis {
  background: rgba(34, 197, 94, 0.14);
  color: var(--green);
}

.badge-renseignements,
.badge-info,
.badge-banque {
  background: rgba(148, 163, 184, 0.1);
  color: var(--text-3);
}

.badge-facture {
  background: rgba(251, 146, 60, 0.14);
  color: var(--orange);
}

.urgent-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--amber);
  font-size: 11px;
  font-weight: 700;
}

.urgent-dot,
.new-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.urgent-dot {
  background: var(--amber);
  animation: pulse 1.6s infinite;
}

.new-dot-habitue {
  background: var(--gold);
}

.new-dot-nouveau {
  background: var(--blue);
}

.new-dot-galerie {
  background: var(--purple);
}

.new-dot-client,
.new-dot-prive {
  background: var(--green);
}

.new-dot-autre_enregistre {
  background: var(--text-2);
}

.new-dot-autre,
.new-dot-banque,
.new-dot-fournisseur {
  background: var(--text-3);
}

.pay-view,
.devis-view,
.other-view,
.mails-view {
  min-height: 100%;
}

.pay-header {
  position: sticky;
  top: 52px;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(13, 17, 26, 0.86);
  backdrop-filter: blur(8px);
}

.pay-header-title {
  font-size: 16px;
  font-weight: 700;
}

.pay-header-sub,
.pay-total-label {
  font-size: 12px;
  color: var(--text-3);
}

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

.pay-total-amount {
  margin-top: 4px;
  font-size: 22px;
  font-weight: 800;
  color: var(--orange);
}

.pay-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 18px;
  align-items: center;
  padding: 16px;
  border-left: 3px solid transparent;
}

.pay-card-overdue {
  background: rgba(32, 13, 13, 0.95);
  border-left-color: var(--red);
}

.pay-card-soon {
  background: rgba(28, 21, 10, 0.95);
  border-left-color: var(--orange);
}

.pay-card-paid {
  opacity: 0.56;
  border-left-color: var(--green);
}

.pay-card-supplier,
.quote-client {
  font-size: 14px;
  font-weight: 700;
}

.pay-card-desc,
.pay-card-ref,
.quote-subject {
  margin-top: 3px;
  color: var(--text-2);
}

/* Titre du devis éditable dans l'en-tête de carte */
input.quote-title-input {
  width: 100%;
  font: inherit;
  color: var(--text-1);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 4px 6px;
  margin-top: 2px;
  transition: border-color 0.15s, background 0.15s;
}
input.quote-title-input::placeholder {
  color: var(--text-3);
}
input.quote-title-input:hover {
  border-color: var(--border-soft);
}
input.quote-title-input:focus {
  outline: none;
  background: rgba(12, 15, 22, 0.9);
  border-color: var(--border);
}

.pay-card-ref,
.quote-link {
  font-size: 12px;
  color: var(--text-3);
}

.pay-card-amount-col {
  text-align: right;
}

.pay-card-amount {
  font-size: 18px;
  font-weight: 800;
}

.amount-paid {
  color: var(--text-3);
}

.pay-card-due {
  margin-top: 4px;
  font-size: 12px;
}

.due-overdue {
  color: var(--red);
}

.due-soon {
  color: var(--orange);
}

.due-paid {
  color: var(--green);
}

.pay-card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pipeline-section {
  padding: 16px 16px 0;
}

.pipeline-section-label {
  padding: 0 4px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
}

.quote-card {
  padding: 16px;
}

.quote-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.quote-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.quote-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.quote-step {
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(148, 163, 184, 0.08);
  color: var(--text-3);
}

.quote-step-current {
  background: rgba(96, 165, 250, 0.14);
  color: #c7dfff;
}

.quote-step-done {
  background: rgba(34, 197, 94, 0.14);
  color: var(--green);
}

.quote-pill {
  background: rgba(96, 165, 250, 0.12);
  color: #c7dfff;
}

.quote-offer-title,
.quote-notes {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(12, 15, 22, 0.9);
  color: var(--text-1);
  padding: 12px;
}

.quote-offer-title {
  margin-top: 12px;
}

.quote-notes {
  margin-top: 12px;
  resize: vertical;
}

.quote-contact-panel {
  margin-top: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(12, 15, 22, 0.56);
  padding: 14px;
}
.quote-contact-new-btn {
  margin-top: 8px;
}

.quote-contact-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.quote-contact-title {
  font-size: 13px;
  font-weight: 700;
}

.quote-contact-subtitle,
.quote-contact-meta {
  font-size: 12px;
  color: var(--text-3);
}

.quote-contact-search {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.quote-contact-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(28, 35, 51, 0.9);
  color: var(--text-1);
  padding: 10px 12px;
}

.quote-contact-input:focus,
.quote-offer-title:focus {
  border-color: rgba(96, 165, 250, 0.6);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.14);
  outline: none;
}

.quote-contact-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

.quote-contact-selected-badge {
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(34, 197, 94, 0.14);
  color: var(--green);
}

.quote-contact-source {
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(96, 165, 250, 0.14);
  color: #c7dfff;
}

.quote-contact-error {
  margin-top: 12px;
  color: var(--orange);
  font-size: 12px;
}

.quote-contact-hint {
  margin-top: 10px;
  color: var(--text-3);
  font-size: 12px;
}

.quote-contact-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.quote-contact-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(28, 35, 51, 0.62);
  padding: 10px 12px;
  color: var(--text-1);
  cursor: pointer;
  text-align: left;
}

.quote-contact-result:hover,
.quote-contact-result.is-selected {
  border-color: rgba(96, 165, 250, 0.45);
  background: rgba(59, 130, 246, 0.12);
}

.quote-contact-name {
  font-size: 13px;
  font-weight: 700;
}

.quote-link {
  align-self: center;
}

.loading-state,
.empty-state,
.pay-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--text-3);
}

.spacious {
  padding-top: 72px;
}

.empty-subtitle {
  margin-top: 8px;
  font-size: 12px;
}

.overdue-warning {
  color: var(--red);
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  transform: translateY(12px);
  opacity: 0;
  pointer-events: none;
  transition: transform 180ms ease, opacity 180ms ease;
  border: 1px solid rgba(74, 222, 128, 0.28);
  border-radius: 12px;
  background: rgba(17, 41, 24, 0.96);
  color: var(--green);
  padding: 12px 14px;
  box-shadow: var(--shadow);
}

.toast-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto; /* le bouton Annuler doit être cliquable */
}

.toast-undo-btn {
  margin-left: 12px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.12);
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.toast-undo-btn:hover { background: rgba(74, 222, 128, 0.22); }

/* ─── Bandeau « Ma journée » ─────────────────────────────────────────────── */
.myday-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 12px;
  background: rgba(148, 163, 184, 0.05);
}
.myday-label { font-size: 12px; font-weight: 700; color: var(--text-2); margin-right: 4px; }
.myday-chip {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.08);
  color: var(--text-2);
  font-size: 12px;
  padding: 4px 12px;
  cursor: pointer;
}
.myday-chip:hover { background: rgba(148, 163, 184, 0.16); }
.myday-star   { border-color: rgba(251, 191, 36, 0.4);  color: #fbbf24; }
.myday-urgent { border-color: rgba(239, 68, 68, 0.4);   color: #fca5a5; }
.myday-prod   { border-color: rgba(245, 158, 11, 0.4);  color: #f6c65b; }
.myday-late   { border-color: rgba(239, 68, 68, 0.55);  color: #fca5a5; background: rgba(239, 68, 68, 0.12); }
.myday-quote  { border-color: rgba(74, 222, 128, 0.4);  color: var(--green); }
.myday-pay    { border-color: rgba(249, 115, 22, 0.4);  color: var(--orange); }

/* ─── Vue compacte des mails ─────────────────────────────────────────────── */
.compact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border: 1px solid rgba(148, 163, 184, 0.10);
  border-radius: 8px;
  margin-bottom: 4px;
  cursor: pointer;
  background: rgba(148, 163, 184, 0.03);
}
.compact-row:hover { background: rgba(148, 163, 184, 0.09); }
.compact-star {
  background: transparent;
  border: none;
  color: var(--text-3);
  font-size: 14px;
  cursor: pointer;
  padding: 0 2px;
}
.compact-sender { font-weight: 600; font-size: 13px; color: var(--text-1); white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.compact-subject { flex: 1; font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compact-tier { font-size: 11px; font-weight: 700; }
.compact-time { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.compact-expanded { margin-bottom: 8px; }
.compact-collapse-btn {
  background: transparent;
  border: none;
  color: var(--text-3);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 6px;
}
.compact-collapse-btn:hover { color: var(--text-1); }

/* ─── « Demande à Iris » ─────────────────────────────────────────────────── */
.topbar-ask-btn {
  border: 1px solid rgba(96, 165, 250, 0.45);
  border-radius: 8px;
  background: rgba(96, 165, 250, 0.12);
  color: #93c5fd;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.topbar-ask-btn:hover { background: rgba(96, 165, 250, 0.22); }

.ask-panel {
  position: relative;
  margin: 10px 18px 0;
  padding: 12px 40px 12px 14px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 12px;
  background: rgba(96, 165, 250, 0.07);
}

/* Panneau de relance (modal) */
.relance-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; padding: 20px; }
.relance-panel { width: min(560px, 100%); background: var(--bg-card, #1b1d22); border: 1px solid rgba(245,158,11,.4); border-radius: 14px; padding: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.relance-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.relance-title { font-size: 14px; font-weight: 700; color: #fbbf24; }
.relance-close { background: none; border: none; color: var(--text-3); font-size: 18px; cursor: pointer; line-height: 1; padding: 2px 6px; }
.relance-close:hover { color: var(--text-1, #fff); }
.relance-text { width: 100%; resize: vertical; font-family: inherit; font-size: 13px; line-height: 1.5; color: var(--text-1, #e5e7eb); background: rgba(0,0,0,.25); border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 8px; padding: 10px 12px; }
.relance-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.relance-hint { font-size: 11px; color: var(--text-3); font-style: italic; }
.btn-relance { color: #fbbf24 !important; }
.btn-notify { color: #34d399 !important; border-color: rgba(52,211,153,.4) !important; }

/* Fil de discussion par expéditeur */
.thread-panel { width: min(600px, 100%); }
.thread-count { font-size: 11px; font-weight: 500; color: var(--text-3); margin-left: 6px; }
.thread-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; margin: 4px 0; }
.thread-item { text-align: left; background: rgba(255,255,255,.03); border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 8px; padding: 8px 10px; cursor: pointer; color: var(--text-1, #e5e7eb); }
.thread-item:hover { background: rgba(255,255,255,.06); border-color: rgba(96,165,250,.35); }
.thread-item-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.thread-item-subject { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-item-date { font-size: 11px; color: var(--text-3); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.thread-item-snippet { font-size: 12px; color: var(--text-3); margin-top: 3px; line-height: 1.4; }
.thread-empty { color: var(--text-3); font-style: italic; font-size: 13px; padding: 12px; text-align: center; }

/* Fiche client */
.cs-panel { width: min(680px, 100%); }
.cs-head-actions { display: flex; align-items: center; gap: 8px; }
.cs-coords { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 10px; font-size: 12px; color: var(--text-2, #9ca3af); }
.cs-coord { display: inline-flex; }
.cs-coord:not(:last-child)::after { content: "·"; margin-left: 14px; color: var(--text-3); }
.cs-body { max-height: 58vh; overflow-y: auto; }
.cs-section { margin-bottom: 14px; }
.cs-section-title { font-size: 12px; font-weight: 700; color: var(--text-1, #e5e7eb); margin-bottom: 5px; }
.cs-count { font-size: 11px; color: var(--text-3); font-weight: 500; margin-left: 4px; }
.cs-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cs-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); border-bottom: 1px solid var(--border, rgba(255,255,255,.1)); padding: 3px 6px; }
.cs-table td { padding: 5px 6px; border-bottom: 1px solid var(--border, rgba(255,255,255,.05)); color: var(--text-1, #e5e7eb); }
.invoice-overdue-badge { font-size: 11px; font-weight: 700; color: #fca5a5; background: rgba(239,68,68,.14); border: 1px solid rgba(239,68,68,.3); border-radius: 5px; padding: 1px 6px; font-variant-numeric: tabular-nums; }
.factures-check-btn { margin-left: 10px; color: #93c5fd !important; }
.attach-badge { font-size: 13px; flex-shrink: 0; margin-right: 2px; }

/* Indicateur de synchro cloud (migration) */
.topbar-sync { font-size: 12px; font-weight: 600; border: 1px solid transparent; border-radius: 6px; padding: 3px 9px; cursor: pointer; background: rgba(255,255,255,.05); white-space: nowrap; }
.topbar-sync.sync-init   { color: var(--text-3); }
.topbar-sync.sync-noauth { color: #93c5fd; border-color: rgba(96,165,250,.4); background: rgba(96,165,250,.1); }
.topbar-sync.sync-syncing{ color: #93c5fd; }
.topbar-sync.sync-ok     { color: #34d399; border-color: rgba(52,211,153,.3); }
.topbar-sync.sync-pending{ color: #fbbf24; border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.1); }
.topbar-sync:hover { filter: brightness(1.15); }

/* Page de connexion plein écran */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg, #0f1115); }
.login-box { width: min(380px, 100%); background: var(--bg-card, #1b1d22); border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 16px; padding: 32px 28px; box-shadow: 0 24px 70px rgba(0,0,0,.45); text-align: left; }
.login-logo { font-size: 34px; font-weight: 800; letter-spacing: .5px; color: var(--text-1, #f3f4f6); text-align: center; }
.login-logo span { color: var(--accent, #f59e0b); }
.login-tagline { text-align: center; font-size: 13px; color: var(--text-3); margin: 4px 0 22px; }
.login-submit { width: 100%; margin-top: 18px; padding: 11px; font-size: 15px; }
.login-foot { text-align: center; font-size: 12px; color: var(--text-3); margin-top: 18px; }

/* Panneau de connexion cloud */
.login-panel { width: min(420px, 100%); }
.login-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); margin: 10px 0 4px; }
.login-input { width: 100%; box-sizing: border-box; font-size: 14px; color: var(--text-1, #e5e7eb); background: rgba(0,0,0,.25); border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 8px; padding: 9px 11px; }
.login-input:focus { outline: none; border-color: rgba(96,165,250,.5); }
.login-connected { font-size: 14px; margin-bottom: 4px; }
.login-status { font-size: 13px; color: var(--text-3); margin-bottom: 8px; }
.login-err { color: #fca5a5; font-size: 13px; margin: 8px 0; }
.login-panel .btn { margin-top: 12px; }
.mig-verify { margin-top: 12px; border-radius: 8px; padding: 10px; font-size: 13px; }
.mig-verify.mig-ok  { background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.3); }
.mig-verify.mig-bad { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.4); }
.mig-head { font-weight: 600; margin-bottom: 6px; }
.mig-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.mig-table th { text-align: left; color: var(--text-3); font-weight: 500; padding: 2px 6px; }
.mig-table td { padding: 2px 6px; font-variant-numeric: tabular-nums; }
.mig-table tr.mig-mismatch td { color: #fca5a5; font-weight: 600; }
.invoice-paid-auto { font-size: 10px; opacity: .8; }
.ask-question { font-size: 12px; font-weight: 700; color: #93c5fd; margin-bottom: 6px; }
.ask-loading { font-size: 13px; color: var(--text-3); font-style: italic; }
.ask-answer { font-size: 13px; color: var(--text-1); white-space: pre-wrap; line-height: 1.5; }
.ask-close {
  position: absolute;
  top: 8px; right: 10px;
  background: transparent;
  border: none;
  color: var(--text-3);
  font-size: 14px;
  cursor: pointer;
}
.ask-close:hover { color: var(--text-1); }

/* Résumé d'Aurélien affiché avec le brouillon généré */
.draft-summary-box {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  border: 1px dashed rgba(96, 165, 250, 0.35);
  border-radius: 8px;
  background: rgba(96, 165, 250, 0.06);
}
.draft-summary-label { font-size: 11px; font-weight: 700; color: #93c5fd; white-space: nowrap; }
.draft-summary-text { font-size: 12px; color: var(--text-2); white-space: pre-wrap; }

/* Sélecteur de date 💤 */
.snooze-date-input {
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.4);
  border-radius: 8px;
  color: var(--text-1);
  font-size: 12px;
  padding: 6px 8px;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.28;
  }
}

@media (max-width: 980px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    border-right: 0;
    border-bottom: 1px solid rgba(42, 51, 71, 0.85);
  }

  .pay-card {
    grid-template-columns: 1fr;
  }

  .pay-card-amount-col {
    text-align: left;
  }

  .pay-card-actions,
  .quote-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .quote-contact-header,
  .quote-contact-search {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .topbar {
    flex-wrap: wrap;
    height: auto;
    padding: 12px;
  }

  .topbar-search {
    width: 100%;
    order: 3;
  }

  .digest-header,
  .pay-header {
    top: 76px;
  }
}

/* ─── Devis simplifié ─── */
.quote-done-badge { font-size: 11px; background: var(--green-dim); color: var(--green); border-radius: 4px; padding: 2px 8px; white-space: nowrap; }
.quote-cmd-section { margin-top: 10px; }
.quote-cmd-input { width: 100%; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 13px; color: var(--text-1); resize: none; line-height: 1.5; }
.quote-cmd-input:focus { outline: none; border-color: var(--blue); }
.quote-cmd-input::placeholder { color: var(--text-3); }
.quote-cmd-hint { font-size: 11px; color: var(--text-3); margin-top: 5px; line-height: 1.5; }
.quote-cmd-hint code { background: var(--bg-raised); border-radius: 3px; padding: 1px 5px; font-size: 11px; color: var(--text-2); font-family: monospace; }
.quote-formats { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.quote-format-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fmt-in { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; width: 64px; font-size: 13px; text-align: center; color: var(--text-1); }
.fmt-in:focus { outline: none; border-color: var(--blue); }
.qty-in { width: 52px; }
.fmt-sep { color: var(--text-3); font-size: 13px; }
.fmt-unit { font-size: 12px; color: var(--text-3); }
.fmt-ref { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font-size: 12px; color: var(--text-2); flex: 1; min-width: 80px; }
.fmt-ref:focus { outline: none; }
.fmt-ref::placeholder { color: var(--text-3); }
.btn-remove-fmt { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 14px; padding: 0 4px; }
.btn-remove-fmt:hover { color: var(--red); }
.btn-add-fmt { background: none; border: 1px dashed var(--border); border-radius: 6px; padding: 4px 10px; font-size: 11px; color: var(--text-3); cursor: pointer; margin-top: 2px; }
.btn-add-fmt:hover { border-color: var(--blue); color: var(--blue); }

/* Multi-positions devis */
.quote-prestations { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.quote-presta-block { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--bg-raised); }
.quote-presta-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.quote-presta-label { font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.btn-remove-presta { background: none; border: none; color: var(--text-3); font-size: 14px; cursor: pointer; padding: 0 4px; line-height: 1; }
.btn-remove-presta:hover { color: var(--red, #e53e3e); }
.btn-add-presta { background: none; border: 1px dashed var(--border); border-radius: 6px; padding: 6px 14px; font-size: 12px; color: var(--blue); cursor: pointer; width: 100%; margin-top: 2px; }
.btn-add-presta:hover { background: var(--bg-raised); }
/* Contact create button */
.quote-contact-create-btn { margin-top: 8px; width: 100%; justify-content: center; }

/* Contact create inline form */
.quote-contact-create-form { margin-top: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 14px; background: var(--bg-raised); }
.quote-contact-create-form-title { font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; }
.quote-contact-create-form-actions { display: flex; gap: 8px; margin-top: 12px; }
/* Grille du formulaire */
.quote-contact-create-form-grid { display: flex; flex-direction: column; gap: 8px; }
.qccf-row { display: flex; gap: 8px; }
.qccf-row-2 .qccf-field { flex: 1; }
.qccf-row:not(.qccf-row-2):not(.qccf-row-npa) .qccf-field { flex: 1; }
.qccf-row-npa .qccf-field { flex: 1; }
.qccf-row-npa .qccf-field-npa { flex: 0 0 80px; }
.qccf-field { display: flex; flex-direction: column; gap: 3px; }
.qccf-label { font-size: 11px; color: var(--text-3); font-weight: 500; }
.qccf-input { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; color: var(--text-1); font-size: 13px; padding: 6px 10px; outline: none; box-sizing: border-box; width: 100%; }
.qccf-input:focus { border-color: var(--blue); }
.qccf-select { cursor: pointer; appearance: auto; }
.qccf-field-sal { max-width: 160px; }
/* legacy (garde compat) */
.quote-contact-create-input { width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; color: var(--text-1); font-size: 13px; padding: 6px 10px; outline: none; box-sizing: border-box; }
.quote-contact-create-input:focus { border-color: var(--blue); }

.btn-lg-action { padding: 9px 18px !important; font-size: 13px !important; font-weight: 700 !important; }
.quote-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.quote-link { font-size: 12px; color: var(--blue); }

/* ─── Quote 3-step flow ─── */
.quote-match-header { display:flex; align-items:center; justify-content:space-between; margin-top:10px; margin-bottom:8px; }
.quote-match-title { font-size:12px; font-weight:600; color:var(--text-2); }
.quote-match-list { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.quote-match-row { display:flex; align-items:flex-start; gap:8px; padding:7px 10px; border-radius:6px; background:var(--bg-raised); }
.match-found { border-left:2px solid var(--green); }
.match-missing { border-left:2px solid var(--amber); }
.match-excluded { border-left:2px solid var(--border); opacity:.5; }
.match-status { font-size:14px; min-width:18px; }
.match-info { flex:1; min-width:0; }
.match-query { font-size:12px; color:var(--text-2); }
.match-label { display:block; font-size:11px; color:var(--text-3); margin-top:2px; }
.match-suggestions { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.btn-suggestion { background:var(--blue-dim); border:1px solid var(--blue); border-radius:4px; padding:2px 8px; font-size:11px; color:var(--blue); cursor:pointer; }
.btn-suggestion:hover { background:var(--blue); color:#0d1117; }
.btn-toggle-match { background:none; border:none; color:var(--text-3); cursor:pointer; font-size:14px; padding:0 4px; line-height:1; }
.btn-toggle-match:hover { color:var(--red); }
.quote-price-header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; margin-bottom:8px; }
.quote-price-title { font-size:12px; font-weight:600; color:var(--text-2); }
input.quote-variant-name {
  flex:1; min-width:0;
  font-size:13px; font-weight:600;
  color:var(--text-1); background:transparent;
  border:1px solid transparent; border-radius:8px;
  padding:4px 6px;
  transition:border-color .15s, background .15s;
}
input.quote-variant-name::placeholder { color:var(--text-3); font-weight:400; }
input.quote-variant-name:hover { border-color:var(--border-soft); }
input.quote-variant-name:focus { outline:none; background:rgba(12,15,22,.9); border-color:var(--border); }
.quote-price-list { background:var(--bg-raised); border-radius:8px; padding:10px 12px; margin-bottom:10px; }
.price-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid var(--border-soft); font-size:12px; gap:8px; }
.price-row:last-child { border-bottom:none; }
.price-label { color:var(--text-2); flex:1; min-width:0; }
.price-meta { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.price-qty { background:var(--surface-2); color:var(--text-2); font-size:11px; font-weight:600; padding:1px 5px; border-radius:4px; }
.price-unit { color:var(--text-3); font-size:11px; white-space:nowrap; }
.price-amount { color:var(--text-1); font-variant-numeric:tabular-nums; white-space:nowrap; flex-shrink:0; }
.price-row-zero { background:rgba(239,68,68,.05); border-radius:4px; padding-left:4px; }
.price-zero-warn { color:#f87171; font-size:11px; }
.price-amount-zero { color:#f87171; }
.price-total { margin-top:4px; padding-top:8px; border-top:1px solid var(--border) !important; }
.price-total-amount { color:var(--green); font-weight:700; font-size:13px; }
.quote-loading { padding:20px; text-align:center; font-size:13px; color:var(--text-3); }
.quote-done-panel { padding:12px; background:var(--green-dim); border:1px solid rgba(74,222,128,.2); border-radius:8px; margin-top:10px; }
.quote-done-offer { font-size:14px; font-weight:600; color:var(--green); margin-bottom:4px; }
.quote-done-meta { font-size:11px; color:var(--text-3); margin-top:4px; }
.quote-done-accepted { font-size:11px; color:var(--green); font-weight:600; margin-top:4px; }
.quote-done-warn { font-size:11px; color:#fbbf24; font-weight:600; margin-top:4px; line-height:1.35; }
.quote-done-summary { font-size:11px; color:var(--text-3); margin-top:3px; }
.quote-done-framing { font-size:11px; color:var(--text-2); margin-top:6px; display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.quote-framing-item { background:var(--bg-raised); border:1px solid var(--border); border-radius:4px; padding:1px 6px; font-size:11px; color:var(--text-2); }
.btn-accept { background:var(--green); border-color:var(--green); color:#0d1117; font-weight:700; border-radius:8px; padding:7px 14px; cursor:pointer; font-size:13px; border:1px solid transparent; }
.btn-accept:hover:not(:disabled) { opacity:.85; }
.btn-accept:disabled { opacity:.5; cursor:default; }
.btn-reply-draft { background:none; border:1px solid var(--blue); color:var(--blue); border-radius:8px; padding:7px 14px; cursor:pointer; font-size:13px; font-weight:500; }
.btn-reply-draft:hover:not(:disabled) { background:rgba(59,130,246,.12); }
.btn-reply-draft:disabled { opacity:.5; cursor:default; }
.btn-reply-draft-sent { border-color:var(--green); color:var(--green); }
.btn-framing { background:none; border:1px solid var(--amber); color:var(--amber); border-radius:8px; padding:7px 14px; cursor:pointer; font-size:13px; font-weight:500; }
.btn-framing:hover { background:rgba(245,158,11,.1); }
.btn-invoice { background:none; border:1px solid #a78bfa; color:#a78bfa; border-radius:8px; padding:7px 14px; cursor:pointer; font-size:13px; font-weight:600; }
.btn-invoice:hover:not(:disabled) { background:rgba(167,139,250,.12); }
.btn-invoice:disabled { opacity:.5; cursor:default; }
.btn-production { background:none; border:1px solid #34d399; color:#34d399; border-radius:8px; padding:7px 14px; cursor:pointer; font-size:13px; font-weight:500; }
.btn-production:hover { background:rgba(52,211,153,.12); }
.framing-order-panel { background:var(--bg-raised); border:1px solid var(--border); border-radius:10px; padding:14px; margin-top:10px; }
.framing-order-title { font-size:13px; font-weight:600; color:var(--amber); margin-bottom:4px; }
.framing-order-hint { font-size:11px; color:var(--text-3); margin-bottom:10px; }
.framing-order-textarea { width:100%; background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:10px 12px; font-size:13px; color:var(--text-1); font-family:monospace; resize:vertical; min-height:100px; line-height:1.6; }
.framing-order-textarea:focus { outline:none; border-color:var(--amber); }
.framing-order-actions { display:flex; gap:8px; margin-top:10px; }

/* Sections devis */
.quote-section-title { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); padding:6px 0 4px; margin-top:14px; margin-bottom:6px; }
.quote-section-title:first-child { margin-top:0; }
.quote-sent-group { margin-top:14px; }
.quote-sent-group summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px; }
.quote-sent-group summary::-webkit-details-marker { display:none; }
.quote-section-summary { user-select:none; }
.quote-section-chevron { font-size:14px; margin-left:auto; transition:transform .2s; }
.quote-sent-group[open] .quote-section-chevron { transform:rotate(180deg); }

/* Barre statuts production */
.prod-status-bar {
  display:flex;
  align-items:center;
  gap:0;
  flex-wrap:wrap;
  background:var(--bg-raised);
  border-radius:10px;
  border:1px solid var(--border);
  padding:8px 10px;
  margin:10px 0 4px;
  overflow-x:auto;
}
.prod-status-step {
  background:none;
  border:none;
  font-size:11.5px;
  color:var(--text-3);
  cursor:pointer;
  padding:4px 7px;
  border-radius:6px;
  white-space:nowrap;
  transition:background .15s, color .15s;
}
.prod-status-step:hover { background:rgba(255,255,255,.06); color:var(--text-1); }
.prod-step-done { color:var(--green); opacity:.7; }
.prod-step-done:hover { opacity:1; }
.prod-step-active {
  background:rgba(96,165,250,.15);
  color:#60a5fa;
  font-weight:700;
}
.prod-step-active:hover { background:rgba(96,165,250,.22); }
.prod-step-arrow { color:var(--text-3); font-size:11px; padding:0 1px; opacity:.4; }

/* Facture créée */
.invoice-created-row { display:flex; align-items:center; gap:10px; margin:8px 0 4px; }
.invoice-created-badge { background:rgba(167,139,250,.15); color:#a78bfa; border:1px solid rgba(167,139,250,.3); border-radius:6px; padding:3px 10px; font-size:12px; font-weight:600; }

/* ═══════════════════════════════════════════
   RECHERCHE UNIFIÉE
   ═══════════════════════════════════════════ */

.search-results-view {
  padding: 0 0 40px;
}

.search-results-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.search-results-query {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
}

.search-results-count {
  font-size: 13px;
  color: var(--text-3);
  background: rgba(255,255,255,.05);
  border-radius: 20px;
  padding: 2px 10px;
}

.search-clear-btn {
  margin-left: auto;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-3);
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.search-clear-btn:hover { color: var(--text-1); border-color: rgba(255,255,255,.2); }

.search-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}

/* Surlignage des termes trouvés */
mark.search-hl {
  background: rgba(251, 191, 36, 0.25);
  color: #fbbf24;
  border-radius: 2px;
  padding: 0 1px;
  font-style: normal;
}

/* Carte email dans les résultats (version compacte) */
.search-hit-card {
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.search-hit-card:hover {
  border-color: rgba(96,165,250,.3);
  background: rgba(96,165,250,.04);
}

/* Ligne devis dans les résultats */
.search-quote-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color .15s;
}
.search-quote-row:hover { border-color: rgba(96,165,250,.3); }
.search-quote-client { font-weight: 600; font-size: 13.5px; color: var(--text-1); min-width: 120px; }
.search-quote-subject { font-size: 13px; color: var(--text-2); flex: 1; }
.search-quote-nr { font-size: 12px; color: var(--text-3); font-family: monospace; }
.search-quote-status { font-size: 11.5px; color: var(--green); background: rgba(34,197,94,.1); border-radius: 6px; padding: 2px 8px; white-space: nowrap; }

/* ─── NOTES / AIDE-MÉMOIRE TAB ──────────────────────────────────────────── */

.notes-view {
  padding: 0 0 40px;
}

.notes-header {
  padding: 20px 20px 0;
  margin-bottom: 16px;
}
.notes-header-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -.02em;
}
.notes-header-sub {
  font-size: 13px;
  color: var(--text-3);
  margin-top: 3px;
}

/* Quick-add form */
.notes-add-form {
  padding: 0 16px 16px;
}
.notes-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
  transition: border-color .15s;
}
.notes-add-row:focus-within {
  border-color: rgba(96,165,250,.6);
  box-shadow: 0 0 0 3px rgba(96,165,250,.08);
}
.notes-type-select {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-1);
  font-size: 12.5px;
  padding: 5px 8px;
  cursor: pointer;
  flex-shrink: 0;
  max-width: 140px;
}
.notes-text-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-1);
  font-size: 14px;
  padding: 4px 4px;
  min-width: 0;
}
.notes-text-input::placeholder { color: var(--text-3); }
.notes-date-input {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-2);
  font-size: 12px;
  padding: 5px 7px;
  flex-shrink: 0;
  width: 130px;
  cursor: pointer;
}
.notes-date-input::-webkit-calendar-picker-indicator {
  filter: invert(0.6);
  cursor: pointer;
}
.notes-add-btn {
  flex-shrink: 0;
}

/* Groups */
.notes-group {
  margin: 0 16px 20px;
}
.notes-group-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.notes-group-count {
  background: rgba(255,255,255,.08);
  color: var(--text-3);
  border-radius: 10px;
  font-size: 11px;
  padding: 1px 7px;
  font-weight: 600;
}

/* Note list */
.notes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.notes-empty {
  text-align: center;
  color: var(--text-3);
  padding: 32px 20px;
  font-size: 14px;
}

/* Individual note */
.note-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  transition: border-color .15s, opacity .15s;
}
.note-item:hover .note-delete { opacity: 1; }
.note-item.note-done {
  opacity: .55;
}
.note-item.note-overdue {
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.04);
}

/* Checkbox */
.note-checkbox {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--note-color, #60a5fa);
  background: rgba(0,0,0,0);
  color: var(--note-color, #60a5fa);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .12s, transform .1s;
  padding: 0;
}
.note-checkbox:hover {
  background: rgba(96,165,250,.14);
  transform: scale(1.1);
}
.note-checkbox-done {
  background: var(--note-color, #60a5fa) !important;
  color: #fff !important;
  border-color: var(--note-color, #60a5fa) !important;
}

/* Text */
.note-text {
  flex: 1;
  font-size: 13.5px;
  color: var(--text-1);
  line-height: 1.4;
  word-break: break-word;
}
.note-done .note-text {
  text-decoration: line-through;
  color: var(--text-3);
}

/* Due date badge */
.note-due-badge {
  font-size: 11.5px;
  color: var(--text-3);
  background: rgba(255,255,255,.06);
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.note-due-overdue {
  background: rgba(239,68,68,.15);
  color: #f87171;
}
.note-done-at {
  font-size: 11.5px;
  color: var(--text-3);
  flex-shrink: 0;
}

/* Delete button */
.note-delete {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--text-3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, color .15s;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.note-delete:hover { color: #f87171; opacity: 1; }

/* Done section */
.notes-done-details {
  margin: 8px 16px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.notes-done-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  list-style: none;
  background: var(--bg-card);
  user-select: none;
}
.notes-done-summary::-webkit-details-marker { display: none; }
.notes-done-summary::after {
  content: "›";
  margin-left: auto;
  font-size: 16px;
  transition: transform .2s;
}
.notes-done-details[open] .notes-done-summary::after {
  transform: rotate(90deg);
}
.notes-done-count {
  background: rgba(255,255,255,.08);
  color: var(--text-3);
  border-radius: 10px;
  font-size: 11px;
  padding: 1px 7px;
}
.notes-done-details .notes-list-done {
  padding: 8px 14px 6px;
}
.notes-done-actions {
  padding: 4px 14px 10px;
  display: flex;
  justify-content: flex-end;
}

/* Sidebar note reminders */
.reminder-row-note {
  cursor: pointer;
}
.reminder-note-icon {
  font-size: 14px;
  flex-shrink: 0;
}
.reminder-note-text {
  flex: 1;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reminder-note-due {
  font-size: 12px;
  color: #f87171;
  flex-shrink: 0;
}

/* ─── PRODUCTION PANEL ───────────────────────────────────────────────────── */

/* Section header */
.section-production .section-header { background: linear-gradient(90deg, rgba(251,191,36,.12) 0%, transparent 100%); }
.section-production .section-icon { color: #fbbf24; }
.section-production .section-title { color: #fbbf24; }

/* Card variant */
.card-production { border-left: 3px solid rgba(251,191,36,.6); }

/* Badge */
.badge-prod {
  background: rgba(251,191,36,.15);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,.3);
  border-radius: 6px;
  font-size: 11px;
  padding: 2px 7px;
  font-weight: 600;
}

/* Button states */
.btn-prod {
  background: rgba(251,191,36,.12);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,.3);
  border-radius: 8px;
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background .15s;
}
.btn-prod:hover { background: rgba(251,191,36,.22); }
.btn-prod-active {
  background: rgba(251,191,36,.25);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,.5);
  border-radius: 8px;
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
}

/* Panel */
.prod-panel {
  margin: 8px 0 4px;
  background: rgba(251,191,36,.05);
  border: 1px solid rgba(251,191,36,.25);
  border-radius: 12px;
  padding: 14px 16px;
}

.prod-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.prod-panel-title {
  font-size: 13px;
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: -.01em;
}
.prod-panel-close {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 18px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.prod-panel-close:hover { color: var(--text-1); }

/* Offer ref */
.prod-offer-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.prod-offer-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-3);
}

/* Search wrap (input + button) */
.prod-offer-search-wrap {
  display: flex;
  gap: 6px;
  align-items: center;
}
.prod-offer-input {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-1);
  font-size: 13px;
  padding: 5px 10px;
}
.prod-offer-input:focus {
  outline: none;
  border-color: rgba(251,191,36,.5);
}
.prod-offer-search-btn {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-2);
  font-size: 14px;
  padding: 5px 10px;
  cursor: pointer;
  transition: background .12s;
  flex-shrink: 0;
}
.prod-offer-search-btn:hover:not(:disabled) { background: rgba(251,191,36,.15); border-color: rgba(251,191,36,.3); }
.prod-offer-search-btn:disabled { opacity: .5; cursor: wait; }

/* Results dropdown */
.prod-offer-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  max-height: 200px;
  overflow-y: auto;
}
.prod-offer-result {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text-1);
  transition: background .1s;
  width: 100%;
}
.prod-offer-result:hover { background: var(--bg-hover); }
.prod-result-nr { font-size: 13px; font-weight: 600; color: var(--gold); flex-shrink: 0; }
.prod-result-title { font-size: 12px; color: var(--text-2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-result-status { font-size: 11px; padding: 2px 7px; border-radius: 4px; flex-shrink: 0; }
.prod-result-total { font-size: 11px; color: var(--text-3); flex-shrink: 0; }

/* Linked offer display */
.prod-offer-linked {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.prod-offer-linked-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.prod-offer-nr-badge {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
}
.prod-offer-client-badge {
  font-size: 12px;
  color: var(--text-2);
}
.prod-offer-status-pill,
.prod-result-status {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.pill-accepted { background: rgba(52,211,153,.15); color: #34d399; }
.pill-pending  { background: rgba(251,191,36,.12); color: var(--gold); }
.prod-offer-change-btn {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 5px;
  transition: color .12s;
}
.prod-offer-change-btn:hover { color: var(--text-1); }

.prod-accept-btn {
  width: 100%;
  justify-content: center;
}
.prod-offer-accepted-msg {
  font-size: 12px;
  color: #34d399;
  padding: 4px 0;
}
.prod-offer-msg {
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 6px;
}
.prod-offer-msg-warn { color: var(--text-3); }

/* Steps */
.prod-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.prod-step {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background .12s;
}
.prod-step:hover { background: rgba(255,255,255,.04); }
.prod-step-done .prod-step-label { color: var(--text-3); }

/* Checkbox */
.prod-checkbox {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 5px;
  border: 2px solid rgba(251,191,36,.5);
  background: transparent;
  color: #fbbf24;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .12s;
  padding: 0;
}
.prod-checkbox:hover { background: rgba(251,191,36,.12); }
.prod-checkbox-checked {
  background: #fbbf24 !important;
  border-color: #fbbf24 !important;
  color: #1a1a2e !important;
}

.prod-step-label {
  font-size: 13px;
  color: var(--text-1);
  flex: 1;
}

/* Date input */
.prod-date-input {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-2);
  font-size: 12px;
  padding: 4px 8px;
  width: 130px;
  flex-shrink: 0;
}
.prod-date-input::-webkit-calendar-picker-indicator { filter: invert(.5); cursor: pointer; }

/* Footer */
.prod-panel-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.btn-success {
  background: rgba(34,197,94,.2);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,.4);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  transition: background .15s;
}
.btn-success:hover { background: rgba(34,197,94,.3); }

.prod-hint {
  font-size: 11.5px;
  color: var(--text-3);
  font-style: italic;
}
.prod-delete-btn {
  margin-left: auto;
  opacity: .6;
}
.prod-delete-btn:hover { opacity: 1; }

/* ─── PRODUCTION TAB ─────────────────────────────────────────────────────── */

.prod-tab {
  padding: 0 0 40px;
}

.prod-tab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  flex-wrap: wrap;
  gap: 10px;
}
.prod-tab-title-row { display: flex; align-items: baseline; gap: 10px; }
.prod-tab-title { font-size: 18px; font-weight: 700; color: var(--text-1); }
.prod-tab-sub { font-size: 13px; color: var(--text-3); }

.prod-tab-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.btn-new-prod {
  font-size: 12px;
  border-color: rgba(74, 222, 128, 0.35);
  background: rgba(34, 197, 94, 0.10);
  color: var(--green);
  padding: 5px 12px;
}
.btn-new-prod.active {
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(239, 68, 68, 0.10);
  color: #f87171;
}

/* Formulaire "Nouveau production" */
.new-prod-form {
  margin: 0 20px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
}
.new-prod-form-title { font-size: 13px; font-weight: 700; color: var(--text-1); margin-bottom: 14px; }
.new-prod-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.new-prod-field { display: flex; flex-direction: column; gap: 4px; }
.new-prod-field-full { grid-column: 1 / -1; }
.new-prod-label { font-size: 11px; color: var(--text-3); font-weight: 500; }
.new-prod-required { color: #f87171; }
.new-prod-input { font-size: 13px; }
.new-prod-form-actions { display: flex; gap: 10px; align-items: center; }

/* Éditeur de prestations dans le formulaire production */
.new-prod-lines-section { margin-top: 14px; border-top: 1px solid var(--border-soft); padding-top: 12px; }
.new-prod-lines-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.new-prod-lines-title { font-size: 12px; font-weight: 600; color: var(--text-2); }
.new-prod-lines-hint { font-size: 11px; color: var(--text-3); font-style: italic; }
.new-prod-prestations { margin-top: 0; }

.prod-view-toggle {
  display: flex;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
}
.prod-toggle-btn {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 12.5px;
  padding: 5px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.prod-toggle-btn.active {
  background: rgba(251,191,36,.2);
  color: #fbbf24;
  font-weight: 600;
}

/* List */
.prod-jobs-list {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prod-empty {
  text-align: center;
  color: var(--text-3);
  padding: 40px 20px;
  font-size: 14px;
}

/* Charge de la semaine */
.prod-week-load { display: flex; flex-direction: column; gap: 14px; padding: 4px 0; }
.wk-section { border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 10px; overflow: hidden; }
.wk-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; font-size: 13px; font-weight: 600; background: rgba(255,255,255,.04); }
.wk-head-count { font-size: 12px; font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
.wk-section.wk-late .wk-head { background: rgba(239,68,68,.14); color: #fca5a5; }
.wk-section.wk-now  .wk-head { background: rgba(245,158,11,.14); color: #fbbf24; }
.wk-section.wk-next .wk-head { background: rgba(59,130,246,.12); color: #93c5fd; }
.wk-jobs { display: flex; flex-direction: column; }
.wk-job { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; border-top: 1px solid var(--border, rgba(255,255,255,.05)); padding: 8px 12px; cursor: pointer; color: var(--text-1, #e5e7eb); font-size: 13px; }
.wk-job:first-child { border-top: none; }
.wk-job:hover { background: rgba(255,255,255,.05); }
.wk-jobnr { font-family: monospace; font-size: 11px; font-weight: 700; color: var(--accent, #f59e0b); flex-shrink: 0; }
.wk-client { font-weight: 600; flex-shrink: 0; }
.wk-desc { color: var(--text-3); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-pieces { flex-shrink: 0; font-size: 11px; color: var(--text-3); background: rgba(255,255,255,.06); border-radius: 4px; padding: 1px 6px; font-variant-numeric: tabular-nums; }
.wk-date { flex-shrink: 0; font-size: 12px; color: var(--text-2, #9ca3af); font-variant-numeric: tabular-nums; }
.wk-dleft { color: var(--text-3); }
.wk-section.wk-late .wk-dleft { color: #fca5a5; }

/* Job card */
.prod-job-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  transition: border-color .15s;
}
.prod-job-card:hover { border-color: rgba(251,191,36,.3); }
.prod-job-overdue { border-left: 3px solid #f87171 !important; }
.prod-job-done { opacity: .55; }
.prod-job-highlight { border: 2px solid #60a5fa; box-shadow: 0 0 0 3px rgba(96,165,250,.18); animation: prod-highlight-fade 3s ease forwards; }
@keyframes prod-highlight-fade { 0%,60% { border-color:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,.18); } 100% { border-color:transparent; box-shadow:none; } }

.prod-job-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.prod-job-nr {
  font-size: 11px;
  font-family: monospace;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--accent, #f59e0b);
  background: rgba(245, 158, 11, .12);
  border: 1px solid rgba(245, 158, 11, .3);
  border-radius: 5px;
  padding: 2px 6px;
  flex-shrink: 0;
  white-space: nowrap;
}
.prod-job-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}
/* Inline-editable name — looks like text, becomes input on focus */
.prod-job-name-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--text-1);
  font-size: 15px;
  font-weight: 700;
  padding: 0 2px;
  flex: 1;
  min-width: 100px;
  transition: border-color .15s;
}
.prod-job-name-input:focus {
  outline: none;
  border-bottom-color: var(--gold);
}
.prod-job-name-input::placeholder { color: var(--text-3); font-weight: 400; font-style: italic; }
/* Inline-editable description */
.prod-job-desc-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--text-2);
  font-size: 12.5px;
  padding: 0 2px;
  width: 100%;
  margin-bottom: 12px;
  transition: border-color .15s;
}
.prod-job-desc-input:focus {
  outline: none;
  border-bottom-color: rgba(251,191,36,.4);
}
.prod-job-desc-input::placeholder { color: var(--text-3); font-style: italic; }
.prod-job-ref { font-size: 12px; color: var(--text-3); font-family: monospace; background: rgba(255,255,255,.06); border-radius: 5px; padding: 1px 6px; }

/* Offer badge button — click to edit */
.prod-job-offer-badge {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  opacity: .85;
  transition: opacity .15s;
}
.prod-job-offer-badge:hover { opacity: 1; }
.prod-job-edit-icon { font-size: 10px; opacity: .5; }
.prod-job-add-ref {
  font-size: 11px;
  color: var(--text-3);
  font-style: italic;
  border: 1px dashed rgba(255,255,255,.15);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}
/* Inline offer_nr edit mode */
.prod-job-offer-edit-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
.prod-job-offer-input {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--gold);
  border-radius: 5px;
  color: var(--text-1);
  font-family: monospace;
  font-size: 12px;
  padding: 2px 6px;
  width: 90px;
  outline: none;
}
.prod-job-offer-confirm-btn {
  background: rgba(251,191,36,.15);
  border: 1px solid rgba(251,191,36,.3);
  border-radius: 5px;
  color: var(--gold);
  font-size: 12px;
  padding: 2px 6px;
  cursor: pointer;
  transition: background .15s;
}
.prod-job-offer-confirm-btn:hover { background: rgba(251,191,36,.3); }

.prod-job-due { font-size: 12px; border-radius: 6px; padding: 2px 8px; font-weight: 600; flex-shrink: 0; }
.prod-job-due.overdue { background: rgba(239,68,68,.15); color: #f87171; }
.prod-job-due.soon    { background: rgba(251,191,36,.15); color: #fbbf24; }
.prod-job-due.ok      { background: rgba(34,197,94,.12);  color: #4ade80; }
.prod-job-date-badge {
  font-size: 12px; border-radius: 6px; padding: 2px 6px; font-weight: 600; flex-shrink: 0;
  border: none; outline: none; cursor: pointer; background: transparent; color: inherit;
  font-family: inherit; width: 130px;
}
.prod-job-date-badge.empty  { background: var(--surface-2); color: var(--text-3); }
.prod-job-date-badge.overdue { background: rgba(239,68,68,.15); color: #f87171; }
.prod-job-date-badge.soon    { background: rgba(251,191,36,.15); color: #fbbf24; }
.prod-job-date-badge.ok      { background: rgba(34,197,94,.12);  color: #4ade80; }
.prod-job-date-badge::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; }
.prod-job-date-badge:hover { filter: brightness(1.1); }

/* Step pills */
.prod-job-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.prod-job-step {
  display: flex;
  align-items: center;
  gap: 4px;
  border: none;
  border-radius: 20px;
  font-size: 11.5px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background .12s, transform .08s;
  white-space: nowrap;
}
.prod-job-step:hover { transform: scale(1.04); }
.prod-job-step-todo {
  background: rgba(255,255,255,.07);
  color: var(--text-3);
  border: 1px solid var(--border);
}
.prod-job-step-done {
  background: rgba(251,191,36,.18);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,.35);
  font-weight: 600;
}
.prod-job-step-lbl { font-size: 11px; }

/* Progress bar */
.prod-job-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.prod-job-bar {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,.08);
  border-radius: 3px;
  overflow: hidden;
}
.prod-job-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 3px;
  transition: width .3s ease;
}
.prod-job-pct { font-size: 11px; color: var(--text-3); min-width: 28px; text-align: right; }

/* « depuis X j » sur l'étape en cours */
.prod-step-age {
  font-size: 11px;
  color: var(--text-3);
  background: rgba(148, 163, 184, 0.10);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.prod-step-age-old { color: #fbbf24; background: rgba(245, 158, 11, 0.12); }

/* Job sans date de livraison → hors radar des délais */
.prod-date-missing {
  font-size: 11px;
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* Dossier fichiers du job */
.prod-job-folder-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.prod-folder-icon { font-size: 13px; }
.prod-job-folder-input {
  flex: 1;
  background: rgba(148, 163, 184, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 6px;
  color: var(--text-2);
  font-size: 12px;
  padding: 4px 8px;
}
.prod-job-folder-input:focus { outline: none; border-color: rgba(96, 165, 250, 0.4); }

/* Icône de catégorie cliquable (reclasser une ligne) */
.prod-cat-cycle {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  padding: 1px 4px;
  font-size: inherit;
}
.prod-cat-cycle:hover { border-color: rgba(96, 165, 250, 0.4); background: rgba(96, 165, 250, 0.08); }

/* Job card footer */
.prod-job-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Détail job (notes + positions) ─────────────────────── */
.prod-job-detail { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.prod-job-detail-summary { font-size: 11px; color: var(--text-3); cursor: pointer; user-select: none; list-style: none; padding: 2px 0; }
.prod-job-detail-summary::-webkit-details-marker { display: none; }
.prod-job-detail-summary::before { content: "▸ "; }
details[open].prod-job-detail .prod-job-detail-summary::before { content: "▾ "; }
.prod-detail-lines { display: flex; flex-direction: column; gap: 3px; margin: 8px 0 6px; }
.prod-detail-line { display: flex; align-items: baseline; gap: 6px; font-size: 12px; }
.prod-detail-cat-icon { flex-shrink: 0; width: 16px; text-align: center; }
.prod-detail-text { color: var(--text-2); flex: 1; min-width: 0; }
.prod-detail-qty { color: var(--text-1); font-weight: 700; font-size: 11px; flex-shrink: 0; }
.prod-detail-notes {
  width: 100%; box-sizing: border-box; margin-top: 6px;
  background: rgba(13,17,26,0.5); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-2); font-size: 12px; padding: 7px 10px; outline: none; resize: vertical;
  font-family: inherit; line-height: 1.5;
}
.prod-detail-notes:focus { border-color: rgba(74,222,128,0.3); }
.prod-detail-notes::placeholder { color: var(--text-3); }

/* ── Vue Atelier ─────────────────────────────────────────── */
.atelier-view { padding: 16px 16px 32px; display: flex; flex-direction: column; gap: 16px; }
.atelier-empty, .atelier-hint { text-align: center; color: var(--text-3); font-size: 13px; padding: 40px 20px; }
.atelier-hint { font-size: 12px; margin-top: 6px; }
.atelier-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.atelier-order { border-color: rgba(251,191,36,0.3); }
.atelier-section-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--border); }
.atelier-section-icon { font-size: 15px; }
.atelier-section-title { font-size: 13px; font-weight: 700; color: var(--text-1); flex: 1; }
.atelier-section-count { font-size: 11px; color: var(--text-3); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px; }
.atelier-lines { display: flex; flex-direction: column; }
.atelier-line { display: flex; align-items: baseline; gap: 8px; padding: 8px 14px; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 12px; flex-wrap: wrap; }
.atelier-line:last-child { border-bottom: none; }
.atelier-line-client { color: var(--text-3); font-size: 11px; font-weight: 600; flex-shrink: 0; }
.atelier-line-offernr { font-weight: 400; opacity: 0.65; }
.atelier-line-sep { color: var(--text-3); }
.atelier-line-text { color: var(--text-1); flex: 1; min-width: 140px; }
.atelier-line-due { font-size: 11px; font-weight: 600; flex-shrink: 0; border-radius: 4px; padding: 1px 5px; }
.atelier-due-none  { color: var(--text-3); }
.atelier-due-ok      { background: rgba(34,197,94,.12);  color: #4ade80; }
.atelier-due-warning { background: rgba(251,191,36,.15); color: #fbbf24; }
.atelier-due-urgent  { background: rgba(239,68,68,.18);  color: #f87171; animation: atelier-blink 1s ease-in-out infinite; }
.atelier-line-urgent { background: rgba(239,68,68,.04); border-radius: 5px; }
@keyframes atelier-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}
.atelier-order-line { background: rgba(251,191,36,0.04); }
.atelier-line-for { color: var(--text-3); font-size: 11px; }
.atelier-line-done { opacity: 0.5; }
.atelier-line-ordered { font-size: 10px; color: #4ade80; font-weight: 600; flex-shrink: 0; }
.atelier-no-detail { margin: 16px 0 4px; padding: 8px 12px; border-radius: 6px; background: rgba(251,191,36,0.08); font-size: 12px; color: var(--text-3); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.atelier-no-detail-label { font-weight: 600; color: var(--text-2); }
.atelier-no-detail-job { background: var(--surface-2); padding: 1px 6px; border-radius: 4px; color: var(--text-2); }
.atelier-no-detail-hint { font-style: italic; }

/* Finished section */
.prod-finished-details {
  margin: 12px 16px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.prod-finished-summary {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
  list-style: none;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  gap: 8px;
}
.prod-finished-summary::-webkit-details-marker { display: none; }
.prod-finished-count {
  background: rgba(255,255,255,.08);
  border-radius: 10px;
  font-size: 11px;
  padding: 1px 7px;
}
.prod-finished-details .prod-jobs-list { padding: 10px 14px; }

/* ─── CALENDAR ──────────────────────────────────────────────── */

.prod-calendar { padding: 0 16px 16px; }

.cal-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-bottom: 16px;
}
.cal-month-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-1);
  min-width: 160px;
  text-align: center;
  text-transform: capitalize;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-header-cell {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  padding: 4px 0 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cal-cell {
  min-height: 72px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: border-color .12s;
}
.cal-cell-empty { background: transparent; border-color: transparent; }
.cal-today { border-color: rgba(96,165,250,.5); background: rgba(96,165,250,.06); }
.cal-has-jobs { border-color: rgba(251,191,36,.35); }

.cal-day-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  line-height: 1;
  margin-bottom: 2px;
}
.cal-today .cal-day-num { color: #60a5fa; }

.cal-job-chip {
  font-size: 10.5px;
  font-weight: 600;
  background: rgba(251,191,36,.2);
  color: #fbbf24;
  border-radius: 4px;
  padding: 2px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}
.chip-overdue { background: rgba(239,68,68,.2); color: #f87171; }
.chip-done    { background: rgba(34,197,94,.12); color: #4ade80; }

/* No date */
.cal-no-date {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.cal-no-date-label { font-size: 12px; color: var(--text-3); margin-bottom: 8px; font-weight: 600; }
.cal-no-date-jobs { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-no-date-chip {
  font-size: 12px;
  color: var(--text-2);
  background: rgba(255,255,255,.06);
  border-radius: 6px;
  padding: 3px 9px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FACTURES TAB
───────────────────────────────────────────────────────────────────────────── */
.factures-view {
  padding: 20px 24px;
  max-width: 860px;
}
.factures-header { margin-bottom: 20px; }
.factures-title { font-size: 22px; font-weight: 700; color: var(--text-1); margin: 0; }

.factures-section { margin-bottom: 28px; }
.factures-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 12px;
}
.factures-count {
  background: rgba(251,191,36,.2);
  color: #fbbf24;
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 11px;
}
.factures-count-grey {
  background: rgba(255,255,255,.08);
  color: var(--text-3);
}
.factures-empty {
  color: var(--text-3);
  font-size: 13px;
  padding: 12px 0;
  font-style: italic;
}

/* Cards grid */
.factures-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.invoice-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.invoice-card-pending {
  border-left: 3px solid #a78bfa;
}
.invoice-card-done {
  border-left: 3px solid rgba(34,197,94,.5);
  opacity: .85;
}
.invoice-card-await {
  border-left: 3px solid #fbbf24;
}
.invoice-card-paid {
  border-left: 3px solid rgba(34,197,94,.5);
  opacity: .75;
}
.invoice-paid-badge {
  font-size: 11px;
  font-weight: 700;
  color: #22c55e;
  background: rgba(34,197,94,.12);
  padding: 2px 8px;
  border-radius: 999px;
}
.factures-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 100%;
}
.invoice-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.invoice-card-client {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-1);
}
.invoice-card-ref {
  font-size: 12px;
  color: var(--text-3);
  font-family: monospace;
  background: rgba(255,255,255,.06);
  border-radius: 5px;
  padding: 1px 6px;
}
.invoice-card-nr {
  font-size: 12px;
  color: #a78bfa;
  font-family: monospace;
  background: rgba(167,139,250,.1);
  border-radius: 5px;
  padding: 1px 6px;
}
.invoice-card-desc {
  font-size: 12.5px;
  color: var(--text-2);
  margin-bottom: 10px;
}
.invoice-card-actions { display: flex; gap: 8px; align-items: center; }
.invoice-card-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-3);
}
.invoice-card-date { flex: 1; }
.invoice-card-src {
  background: rgba(255,255,255,.05);
  border-radius: 5px;
  padding: 1px 6px;
}

/* Production card: facturé badge */
.prod-invoice-done {
  font-size: 12px;
  color: #4ade80;
  background: rgba(34,197,94,.1);
  border-radius: 7px;
  padding: 3px 9px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.prod-invoice-reset {
  background: none;
  border: none;
  color: #4ade80;
  opacity: 0.5;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  line-height: 1;
}
.prod-invoice-reset:hover { opacity: 1; }

/* Facturation directe */
.invoice-direct-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
}
.invoice-direct-hint {
  font-size: 13px;
  color: var(--text-3);
  margin: 0 0 14px;
}
.invoice-search-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.invoice-search-input {
  flex: 1;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-1);
  font-size: 14px;
  padding: 7px 12px;
  outline: none;
  transition: border-color .15s;
}
.invoice-search-input:focus { border-color: var(--gold); }
.invoice-search-error { font-size: 13px; color: #f87171; margin-bottom: 8px; }

.invoice-search-results {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 4px;
}
.invoice-search-result {
  display: grid;
  grid-template-columns: 90px 140px 1fr 80px;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text-1);
  font-size: 13px;
  padding: 9px 12px;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}
.invoice-search-result:last-child { border-bottom: none; }
.invoice-search-result:hover { background: rgba(255,255,255,.05); }
.inv-res-nr { font-family: monospace; font-weight: 700; color: var(--gold); }
.inv-res-client { color: var(--text-1); font-weight: 600; }
.inv-res-title { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-res-status { text-align: right; }

/* Selected offer */
.invoice-selected-offer {
  background: rgba(167,139,250,.07);
  border: 1px solid rgba(167,139,250,.25);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.invoice-selected-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
}
.invoice-selected-client { font-weight: 700; font-size: 14px; color: var(--text-1); }
.invoice-selected-title { font-size: 13px; color: var(--text-2); }
.invoice-selected-actions { display: flex; gap: 8px; align-items: center; }