/* ========================================================================
   PDA-ECS — Feuille de style (charte graphique ÉNERGIE CÔTÉ SUD)
   ======================================================================== */
:root {
  /* Charte alignée avec dashboard_effectifs.html */
  --ecs-green: #00A65D;
  --ecs-green-dark: #007A44;
  --ecs-green-d: #007A44;
  --ecs-green-light: #E6F7EE;
  --ecs-green-pale: #E6F7EE;
  --ecs-black: #000000;
  --ecs-white: #FFFFFF;
  --ecs-grey-d: #1A1A1A;
  --ecs-grey: #595959;
  --ecs-grey-l: #9AA0A6;
  --ecs-blue: #4472C4;
  --ecs-yellow: #FFC000;
  --ecs-orange: #ED7D31;
  --ecs-red: #C00000;
  --ecs-purple: #7030A0;

  --bg: #F5F5F5;
  --card: #FFFFFF;
  --border: #E1E5EA;
  --line: #E1E5EA;
  --text: #1A1A1A;
  --muted: #6B7280;
  --primary: var(--ecs-green);
  --primary-dark: var(--ecs-green-dark);
  --primary-light: var(--ecs-green-light);
  --accent: var(--ecs-black);
  --warn: #ED7D31;
  --danger: #C00000;
  --success: var(--ecs-green);
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.05);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  /* Stack identique à dashboard_effectifs.html. Les emojis utilisent les fonts système
     du navigateur automatiquement (pas besoin de les inclure dans la stack principale). */
  font-family: "Segoe UI", "Poppins", -apple-system, BlinkMacSystemFont,
               "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--ecs-green-dark); }

/* ---------- Header ECS (sobre, style document type) ---------- */
header.app-header {
  background: #ffffff;
  color: var(--ecs-black);
  border-bottom: 1px solid var(--border);
  padding: 18px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 18px;
}
.ecs-logo {
  height: 44px;
  width: auto;
  flex-shrink: 0;
}
.brand-sep {
  color: #d1d5db;
  font-weight: 300;
  font-size: 28px;
  margin: 0 4px;
  user-select: none;
}
.lundi-logo {
  height: 40px;
  width: auto;
  flex-shrink: 0;
  color: #0f172a;            /* noir-bleu très sombre pour max contraste sur fond clair */
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
}
body.theme-dark .lundi-logo {
  color: #f8fafc;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
body.theme-dark .brand-sep { color: #4b5563; }
/* Sur licorne : sombre violet bien saturé, PAS de mix-blend (ça l'efface) */
body.theme-unicorn .lundi-logo {
  color: #4c1d95;
  filter: drop-shadow(0 1px 2px rgba(75,0,130,0.18));
}
body.theme-unicorn .brand-sep { color: #c084fc; }
.header-text { line-height: 1.2; }
header.app-header h1 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
header.app-header h1 em {
  font-style: normal;
  color: var(--ecs-black);
  font-weight: 700;
}
header.app-header .sub {
  display: none; /* on retire le sous-titre pour épurer */
}
.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.user-chip {
  display: flex; align-items: center; gap: 8px;
  background: #fafafa;
  color: var(--text);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
}
.user-chip .badge-admin {
  background: var(--ecs-green);
  color: white;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}

/* ---------- Bell notifications ---------- */
.bell-wrap, .user-menu-wrap { position: relative; }
.btn-icon {
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  padding: 8px 10px;
  font-size: 14px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}
.btn-icon:hover { border-color: var(--ecs-green); background: var(--ecs-green-light); }
.bell-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--danger);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  line-height: 1.3;
  box-shadow: 0 0 0 2px white;
}
.bell-panel, .user-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.18), 0 4px 10px rgba(0,0,0,0.08);
  width: 340px;
  max-height: 480px;
  overflow: hidden;
  display: none;
  z-index: 100;
  flex-direction: column;
}
.bell-panel.open, .user-menu.open { display: flex; }
.bell-panel .bell-list, .user-menu .um-body { overflow-y: auto; flex: 1; }
.bell-panel .bell-head, .user-menu .um-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.bell-panel .bell-head .bell-clear {
  font-size: 11px;
  color: var(--ecs-green-dark);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}
.bell-panel .bell-item {
  padding: 8px 12px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 12px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  align-items: baseline;
}
.bell-panel .bell-item:hover { background: #fafbfc; }
.bell-panel .bell-item.unread { background: var(--ecs-green-light); border-left: 3px solid var(--ecs-green); padding-left: 9px; }
.bell-panel .bell-item .bi-project {
  font-size: 9px; font-weight: 700;
  background: #e2e8f0; color: var(--text);
  padding: 1px 6px; border-radius: 8px;
  text-transform: uppercase; letter-spacing: 0.3px;
  grid-column: 1; justify-self: start;
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bell-panel .bell-item .bi-time {
  grid-column: 2;
  font-size: 10px; color: var(--muted);
  white-space: nowrap;
}
.bell-panel .bell-item .bi-action {
  grid-column: 1 / span 2;
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bell-panel .bell-item .bi-status {
  grid-column: 1 / span 2;
  font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.3px;
  font-weight: 600;
}
.bell-panel .bell-item.bell-pending {
  border-left: 4px solid var(--warn);
  background: linear-gradient(90deg, rgba(245,158,11,0.10), white);
}
.bell-panel .bell-item .bi-quick-actions {
  grid-column: 1 / span 2;
  margin-top: 6px;
}
.bell-panel .bell-item .bell-quick {
  background: var(--ecs-green);
  color: white;
  border: none;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.bell-panel .bell-item .bell-quick:hover { background: var(--ecs-green-dark); }

/* Boutons watch / delegate dans row-actions */
.watch-btn.watching { color: var(--ecs-green-dark); background: var(--ecs-green-light); }
.deleg-btn:hover { color: var(--ecs-green-dark); background: var(--ecs-green-light); }
.bell-panel .bell-empty {
  padding: 24px 14px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

/* ---------- User menu ---------- */
.user-chip-btn { cursor: pointer; border: 1px solid var(--border); }
.user-chip-btn:hover { background: var(--ecs-green-light); border-color: var(--ecs-green); }
.user-menu { min-width: 280px; }
.user-menu .um-section {
  padding: 8px 14px;
  border-bottom: 1px solid #f1f5f9;
}
.user-menu .um-section:last-child { border-bottom: none; }
.user-menu .um-section-title {
  font-size: 10px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.user-menu .um-item {
  display: block; width: 100%;
  background: transparent; border: none;
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
}
.user-menu .um-item:hover { background: #f1f5f9; }
.theme-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.theme-opt {
  border: 2px solid var(--border);
  border-radius: 6px;
  padding: 8px 6px;
  cursor: pointer;
  text-align: center;
  background: white;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  transition: 0.15s;
}
.theme-opt:hover { border-color: var(--ecs-green); }
.theme-opt.active { border-color: var(--ecs-green); background: var(--ecs-green-light); color: var(--ecs-green-dark); }
.theme-preview {
  height: 24px; width: 100%;
  border-radius: 4px;
  margin-bottom: 4px;
}
.theme-preview.preview-standard { background: linear-gradient(135deg, #00A65D 50%, white 50%); }
.theme-preview.preview-dark     { background: linear-gradient(135deg, #111827 50%, #1f2937 50%); }
.theme-preview.preview-compact  { background: linear-gradient(135deg, #007A44 50%, #E1E5EA 50%); }
.theme-preview.preview-pastel   { background: linear-gradient(135deg, #D4F1E3 50%, #FCEAE6 50%); }
.theme-preview.preview-unicorn  { background: linear-gradient(90deg, #ff80c8 0%, #ffa07a 20%, #ffd47e 40%, #87e0a7 60%, #80c8ff 80%, #c78aff 100%); }

/* ---------- Thèmes ---------- */
body.theme-dark {
  --bg: #000000;
  --card: #141414;
  --border: #2a2a2a;
  --line: #2a2a2a;
  --text: #f1f5f9;
  --muted: #9ca3af;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.6);
}
body.theme-dark header.app-header { background: #000000; border-bottom-color: #00A65D; }
body.theme-dark header.app-header h1 { color: #f1f5f9; }
body.theme-dark header.app-header h1 em { color: #f1f5f9; }
body.theme-dark .login-card { background: #141414; color: #f1f5f9; }
body.theme-dark .btn.secondary {
  background: #1f1f1f; color: #f1f5f9; border-color: #2a2a2a;
}
body.theme-dark .btn.secondary:hover { background: #2a2a2a; border-color: var(--ecs-green); color: var(--ecs-green); }
body.theme-dark .btn-icon { background: #1f1f1f; border-color: #2a2a2a; color: #f1f5f9; }
body.theme-dark .btn-icon:hover { background: #2a2a2a; }
body.theme-dark .user-chip {
  background: #1f1f1f !important;
  color: #f1f5f9 !important;
  border-color: #2a2a2a !important;
}
body.theme-dark .user-chip-btn:hover { background: #2a2a2a !important; border-color: var(--ecs-green) !important; }
body.theme-dark input, body.theme-dark select, body.theme-dark textarea {
  background: #1f1f1f; color: #f1f5f9; border-color: #2a2a2a;
}
body.theme-dark .filter-bar, body.theme-dark .toolbar, body.theme-dark .view-tabs,
body.theme-dark .stats-bar { background: #0a0a0a; border-color: #2a2a2a; }
body.theme-dark .project-tabs-wrap, body.theme-dark .sidebar { background: #0a0a0a; border-color: #2a2a2a; }
body.theme-dark .sidebar-section { color: var(--muted); border-color: #2a2a2a; }
body.theme-dark .project-item { color: #f1f5f9; }
body.theme-dark .project-item:hover { background: #1f1f1f; }
body.theme-dark .project-item.checked { background: rgba(0,166,93,0.18); }
body.theme-dark .table-wrapper, body.theme-dark .card, body.theme-dark .gantt-container,
body.theme-dark .kanban-column, body.theme-dark .action-card, body.theme-dark .swot-quad,
body.theme-dark .panel, body.theme-dark .modal, body.theme-dark .calendar-wrap,
body.theme-dark .kpi-card, body.theme-dark .okr-card, body.theme-dark .cadrage-form,
body.theme-dark .weekly-report, body.theme-dark .log-list,
body.theme-dark .swot-cross-cell, body.theme-dark .swot-cross-intro,
body.theme-dark .bell-panel, body.theme-dark .user-menu { background: #141414; color: #f1f5f9; border-color: #2a2a2a; }
body.theme-dark table.data-table { background: #141414; color: #f1f5f9; }
body.theme-dark table.data-table th { background: #0a0a0a; color: #9ca3af; }
body.theme-dark table.data-table tr:hover td { background: #1a1a1a; }
body.theme-dark table.data-table td { border-color: #2a2a2a; }
body.theme-dark .kanban-card, body.theme-dark .perso-task { background: #1f1f1f; color: #f1f5f9; }
body.theme-dark .breadcrumb { background: #0a0a0a; color: #9ca3af; }
body.theme-dark .gantt-header-timeline, body.theme-dark .gantt-month-cell { background: #0a0a0a; color: #9ca3af; }
body.theme-dark .gantt-month-cell.odd { background: #141414; }
body.theme-dark .gantt-band.odd { background: #141414; }
body.theme-dark .gantt-band.even { background: #1a1a1a; }
body.theme-dark .gantt-row-label { background: #141414; color: #f1f5f9; border-color: #2a2a2a; }
body.theme-dark .calendar-grid { background: #2a2a2a; }
body.theme-dark .calendar-grid .cal-day { background: #141414; color: #f1f5f9; }
body.theme-dark .calendar-grid .cal-day.other-month { background: #0a0a0a; color: #4b5563; }
body.theme-dark .calendar-grid .cal-day.today { background: rgba(0,166,93,0.18); }
body.theme-dark .calendar-grid .cal-dow { background: #1f1f1f; color: #9ca3af; }
body.theme-dark .bell-panel .bell-item:hover { background: #1f1f1f; }
body.theme-dark .bell-panel .bell-item.unread { background: rgba(0,166,93,0.15); }
body.theme-dark .bell-panel .bell-item .bi-project { background: #2a2a2a; color: #f1f5f9; }
body.theme-dark .user-menu .um-item:hover { background: #1f1f1f; }
body.theme-dark .theme-opt { background: #1f1f1f; color: #f1f5f9; border-color: #2a2a2a; }
body.theme-dark .theme-opt.active { background: rgba(0,166,93,0.2); border-color: var(--ecs-green); color: #f1f5f9; }
body.theme-dark .ph-status-pill, body.theme-dark .horizon-pill { filter: brightness(1.1); }

body.theme-compact {
  font-size: 12.5px;
}
body.theme-compact .toolbar { padding: 8px 28px; }
body.theme-compact .filter-bar { padding: 7px 28px; }
body.theme-compact .stats-bar { padding: 8px 28px; }
body.theme-compact main { padding: 12px 28px; }
body.theme-compact table.data-table th { padding: 6px 6px; font-size: 10px; }
body.theme-compact table.data-table input,
body.theme-compact table.data-table select,
body.theme-compact table.data-table textarea { padding: 5px 4px; font-size: 12px; }
body.theme-compact header.app-header { padding: 12px 28px; }
body.theme-compact .ecs-logo { height: 36px; }

body.theme-pastel {
  --bg: #FFFBF3;
  --primary: #5EAD8A;
  --ecs-green: #5EAD8A;
  --ecs-green-dark: #3F8268;
  --ecs-green-light: #E3F2EA;
}
body.theme-pastel header.app-header { background: #FFFBF3; border-bottom-color: #5EAD8A; }
body.theme-pastel td.cell-status-todo     { background: #E5E7EB !important; }
body.theme-pastel td.cell-status-progress { background: #FCE7A2 !important; color: #6B5400 !important; }
body.theme-pastel td.cell-status-progress .colored-select { color: #6B5400 !important; }
body.theme-pastel td.cell-status-late     { background: #F5C9C7 !important; color: #7A1F18 !important; }
body.theme-pastel td.cell-status-late     .colored-select { color: #7A1F18 !important; }
body.theme-pastel td.cell-status-wait     { background: #D4D8F4 !important; color: #2A2D7A !important; }
body.theme-pastel td.cell-status-wait     .colored-select { color: #2A2D7A !important; }
body.theme-pastel td.cell-status-done     { background: #C5E8D4 !important; color: #154A2E !important; }
body.theme-pastel td.cell-status-done     .colored-select { color: #154A2E !important; }

/* ========================================================================
   🦄 Thème Licorne — arc-en-ciel pastel, joyeux, magique
   ======================================================================== */
body.theme-unicorn {
  --bg: #fff5fb;
  --card: #ffffff;
  --border: #f9d6ea;
  --line: #f9d6ea;
  --text: #4a1c5f;
  --muted: #9e7aae;
  --primary: #ff6ec4;
  --primary-dark: #db3aa0;
  --primary-light: #ffe0f3;
  --ecs-green: #ff6ec4;
  --ecs-green-dark: #db3aa0;
  --ecs-green-light: #ffe0f3;
  --shadow: 0 2px 6px rgba(219, 58, 160, 0.08), 0 1px 3px rgba(168, 85, 247, 0.06);
}
body.theme-unicorn {
  background:
    radial-gradient(ellipse at top left, rgba(255, 165, 220, 0.25), transparent 60%),
    radial-gradient(ellipse at top right, rgba(180, 170, 255, 0.22), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(135, 230, 196, 0.18), transparent 60%),
    #fff5fb;
  background-attachment: fixed;
}
body.theme-unicorn header.app-header {
  background:
    linear-gradient(90deg,
      #ffe0f3 0%,
      #ffe8d4 20%,
      #fff4cc 40%,
      #d8f5e4 60%,
      #d4ecff 80%,
      #ecdfff 100%);
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, #ff6ec4, #ffa07a, #fbbf24, #4ade80, #60a5fa, #a78bfa) 1;
}
body.theme-unicorn header.app-header h1 { color: #6b46c1; }
body.theme-unicorn header.app-header h1 em {
  background: linear-gradient(90deg, #ff6ec4, #a78bfa, #60a5fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body.theme-unicorn .btn {
  background: linear-gradient(135deg, #ff6ec4, #c084fc);
  box-shadow: 0 2px 8px rgba(192, 132, 252, 0.35);
}
body.theme-unicorn .btn:hover {
  background: linear-gradient(135deg, #db3aa0, #a855f7);
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.45);
}
body.theme-unicorn .btn.secondary {
  background: white;
  color: #6b46c1;
  border: 1px solid #f9d6ea;
}
body.theme-unicorn .btn.secondary:hover {
  background: #ffe0f3;
  border-color: #ff6ec4;
  color: #db3aa0;
}
body.theme-unicorn .user-chip { background: #fff5fb; border-color: #f9d6ea; color: #6b46c1; }
body.theme-unicorn .user-chip .badge-admin {
  background: linear-gradient(135deg, #ff6ec4, #c084fc);
}
body.theme-unicorn .toolbar, body.theme-unicorn .stats-bar { background: rgba(255, 255, 255, 0.7); border-color: #f9d6ea; }
body.theme-unicorn .filter-bar { background: rgba(255, 240, 250, 0.7); border-color: #f9d6ea; }
body.theme-unicorn .sidebar { background: rgba(255, 255, 255, 0.7); border-right-color: #f9d6ea; }

/* Pills couleur projet : reprend un dégradé arc-en-ciel selon l'index */
body.theme-unicorn .cp-0 .group-icon, body.theme-unicorn td.cp-0.cell-project { background: linear-gradient(135deg, #fce7f3, #fbcfe8) !important; color: #be185d !important; }
body.theme-unicorn .cp-1 .group-icon, body.theme-unicorn td.cp-1.cell-project { background: linear-gradient(135deg, #fed7aa, #fdba74) !important; color: #c2410c !important; }
body.theme-unicorn .cp-2 .group-icon, body.theme-unicorn td.cp-2.cell-project { background: linear-gradient(135deg, #fef3c7, #fde68a) !important; color: #a16207 !important; }
body.theme-unicorn .cp-3 .group-icon, body.theme-unicorn td.cp-3.cell-project { background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important; color: #047857 !important; }
body.theme-unicorn .cp-4 .group-icon, body.theme-unicorn td.cp-4.cell-project { background: linear-gradient(135deg, #cffafe, #a5f3fc) !important; color: #0e7490 !important; }
body.theme-unicorn .cp-5 .group-icon, body.theme-unicorn td.cp-5.cell-project { background: linear-gradient(135deg, #ddd6fe, #c4b5fd) !important; color: #6d28d9 !important; }
body.theme-unicorn .cp-6 .group-icon, body.theme-unicorn td.cp-6.cell-project { background: linear-gradient(135deg, #fbcfe8, #f9a8d4) !important; color: #be185d !important; }
body.theme-unicorn .cp-7 .group-icon, body.theme-unicorn td.cp-7.cell-project { background: linear-gradient(135deg, #bae6fd, #7dd3fc) !important; color: #075985 !important; }

body.theme-unicorn td.cell-status-todo     { background: #f3e8ff !important; }
body.theme-unicorn td.cell-status-todo     .colored-select { color: #6b21a8 !important; }
body.theme-unicorn td.cell-status-progress { background: #fed7aa !important; }
body.theme-unicorn td.cell-status-progress .colored-select { color: #9a3412 !important; }
body.theme-unicorn td.cell-status-late     { background: #fecaca !important; }
body.theme-unicorn td.cell-status-late     .colored-select { color: #991b1b !important; }
body.theme-unicorn td.cell-status-wait     { background: #c7d2fe !important; }
body.theme-unicorn td.cell-status-wait     .colored-select { color: #3730a3 !important; }
body.theme-unicorn td.cell-status-done     { background: #bbf7d0 !important; }
body.theme-unicorn td.cell-status-done     .colored-select { color: #15803d !important; }
body.theme-unicorn td.cell-prio-high       { background: #fbcfe8 !important; }
body.theme-unicorn td.cell-prio-high       .colored-select { color: #be185d !important; }
body.theme-unicorn td.cell-prio-normal     { background: #ddd6fe !important; }
body.theme-unicorn td.cell-prio-normal     .colored-select { color: #6d28d9 !important; }
body.theme-unicorn td.cell-prio-low        { background: #f3f4f6 !important; }
body.theme-unicorn td.cell-prio-low        .colored-select { color: #6b7280 !important; }

/* Petites étoiles décoratives (pseudo-elements) */
body.theme-unicorn h1::after,
body.theme-unicorn h2::after {
  content: " ✨";
  font-size: 0.7em;
  opacity: 0.6;
}
body.theme-unicorn .stat-item .val {
  background: linear-gradient(135deg, #ff6ec4, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* Logo : le PNG a un fond blanc, on le rend "transparent" via mix-blend-mode
   pour qu'il se fonde sur le fond pastel licorne. */
body.theme-unicorn .ecs-logo {
  mix-blend-mode: multiply;
}

/* ---------- Buttons ---------- */
.btn {
  background: var(--primary);
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  transition: background 0.15s;
}
.btn:hover { background: var(--ecs-green-dark); }
.btn.secondary { background: var(--card); color: var(--text); border: 1px solid var(--border); }
.btn.secondary:hover { background: #f1f5f9; border-color: var(--ecs-green); color: var(--ecs-green-dark); }
.btn.danger { background: var(--danger); }
.btn.danger:hover { background: #b91c1c; }
.btn.success { background: var(--ecs-green); }
.btn.success:hover { background: var(--ecs-green-dark); }
.btn.dark { background: var(--ecs-black); color: white; }
.btn.dark:hover { background: #1f2937; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

select, input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"], textarea {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  background: white;
  font-family: inherit;
  color: var(--text);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--ecs-green);
  outline-offset: -1px;
  border-color: var(--ecs-green);
}

/* ---------- Login page (sobre, sans diagonales) ---------- */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F5F5F5;
}
.login-card {
  background: white;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.05);
  padding: 40px 44px;
  width: 100%;
  max-width: 420px;
}
.login-card .logo-wrap { text-align: center; margin-bottom: 28px; }
.login-card .logo-wrap img { max-width: 200px; height: auto; }
.login-card h1 {
  font-size: 12px;
  text-align: center;
  margin: 0 0 4px 0;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.login-card h1 em { font-style: normal; color: var(--ecs-black); font-weight: 700; }
.login-card .subtitle {
  text-align: center;
  color: var(--muted);
  margin-bottom: 26px;
  font-size: 13px;
}
.login-card label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.login-card input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.login-card .btn {
  width: 100%;
  padding: 11px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.login-card .error {
  background: #FCEAE6; color: #A02418;
  padding: 9px 12px; border-radius: 6px;
  font-size: 12px; margin-bottom: 14px; display: none;
}
.login-card .footer-note {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  margin-top: 22px;
  letter-spacing: 0.5px;
  font-weight: 500;
}
.login-card .footer-note strong { color: var(--ecs-black); font-weight: 700; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 20px; right: 20px;
  background: var(--text);
  color: white;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transform: translateY(120%);
  transition: transform 0.3s;
  z-index: 200;
}
.toast.show { transform: translateY(0); }
.toast.error { background: var(--danger); }
.toast.success { background: var(--ecs-green-dark); }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-backdrop.show { display: flex; }
.modal {
  background: var(--card);
  border-radius: 8px;
  padding: 24px;
  max-width: 460px;
  width: 90%;
  border-top: 3px solid var(--ecs-green);
}
.modal h2 { margin-top: 0; font-size: 18px; }
.modal .field { margin-bottom: 14px; }
.modal label {
  display: block; font-size: 12px; font-weight: 600; color: var(--muted);
  margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.4px;
}
.modal input, .modal select { width: 100%; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }

/* ---------- Print footer (PDF export) ---------- */
.print-footer { display: none; }
@media print {
  @page { size: A4 landscape; margin: 12mm; }
  .toolbar, .project-tabs, .view-tabs, .row-actions, .stats-bar,
  .filter-bar, .modal-backdrop, .toast, .header-right { display: none !important; }
  body { background: white; font-size: 11px; }
  header.app-header { padding: 12px 0; border-bottom: 2px solid var(--ecs-green); }
  .ecs-logo { height: 44px; }
  .print-footer {
    display: block;
    margin-top: 18px;
    padding-top: 10px;
    border-top: 2px solid var(--ecs-green);
    font-size: 9px;
    color: var(--ecs-black);
  }
  .print-footer .pf-slogan { text-align: center; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 10px; margin-bottom: 4px; }
  .print-footer .pf-tagline { text-align: center; font-weight: 600; margin-bottom: 6px; }
  .print-footer .pf-info { display: flex; justify-content: space-between; gap: 20px; font-size: 9px; color: #333; }
  .print-footer .pf-info > div { flex: 1; }
}
body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }