/* ================================================================== */
/* DESIGN CRM — chargé en dernier dans base.html.twig                 */
/* Les couleurs de statut restent celles de Tache::setStatus()        */
/* ================================================================== */

:root {
  --crm-bg: #f6f8fb;
  --crm-surface: #ffffff;
  --crm-surface-2: #fbfcfe;
  --crm-muted-bg: #eef2f7;
  --crm-border: #e8edf5;
  --crm-border-strong: #e2e8f0;
  --crm-text: #0f172a;
  --crm-text-2: #334155;
  --crm-text-muted: #5b6b80;
  --crm-primary: #2563eb;
  --crm-primary-hover: #1d4ed8;
  --crm-primary-soft: #eff4ff;
  --crm-radius-sm: 8px;
  --crm-radius: 10px;
  --crm-radius-lg: 16px;
  --crm-radius-xl: 20px;
  --crm-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --crm-shadow: 0 8px 30px rgba(15, 23, 42, .06);
  --crm-shadow-lg: 0 24px 60px rgba(15, 23, 42, .25);

  /* Statuts (identiques à Tache::setStatus) */
  --crm-status-nf: #0f62a3;
  --crm-status-ea: #e67e30;
  --crm-status-ft: #008000;
  --crm-status-rp: #008000;
  --crm-status-exp: #e50000;
}

body {
  background-color: var(--crm-bg);
  color: var(--crm-text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------------------------------- */
/* Boutons                            */
/* ---------------------------------- */
.crm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--crm-border-strong);
  border-radius: var(--crm-radius);
  background: var(--crm-surface);
  color: var(--crm-text-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}

.crm-btn:hover {
  background: #f8fafc;
  color: var(--crm-text);
}

.crm-btn:focus-visible {
  outline: 2px solid var(--crm-primary);
  outline-offset: 2px;
}

.crm-btn--sm {
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
}

.crm-btn--icon {
  width: 40px;
  padding: 0;
}

.crm-btn--primary {
  border-color: var(--crm-primary);
  background: var(--crm-primary);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(37, 99, 235, .25);
}

.crm-btn--primary:hover {
  border-color: var(--crm-primary-hover);
  background: var(--crm-primary-hover);
  color: #fff;
}

.crm-btn--danger {
  border-color: #fecaca;
  color: #b91c1c;
}

.crm-btn--danger:hover {
  background: #fef2f2;
  color: #991b1b;
}

/* Bouton "bascule" (Facturée / À facturer / Urgent) */
.crm-btn--toggle i {
  color: var(--crm-text-muted);
}

/* Boutons de statut : pastille de la couleur du statut */
.crm-btn .crm-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

/* Contrôle segmenté (Calendrier/Tableau, Tout/Moi...) */
.crm-segmented {
  display: inline-flex;
  padding: 4px;
  background: var(--crm-muted-bg);
  border-radius: 12px;
  gap: 2px;
}

.crm-segmented .crm-segmented__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #475569;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.crm-segmented .crm-segmented__btn:hover {
  color: var(--crm-text);
}

.crm-segmented .crm-segmented__btn.active {
  background: var(--crm-surface);
  color: var(--crm-text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}

.crm-segmented--sm {
  padding: 3px;
  border-radius: 10px;
}

.crm-segmented--sm .crm-segmented__btn {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 8px;
}

/* ---------------------------------- */
/* Navbar                             */
/* ---------------------------------- */
.crm-nav {
  background: var(--crm-surface);
  border-bottom: 1px solid var(--crm-border);
  min-height: 64px;
  padding: 8px 0;
}

.crm-nav .container {
  max-width: none;
  padding-left: 16px;
  padding-right: 16px;
}

.crm-nav .navbar-brand img {
  height: 32px;
  width: auto;
}

.crm-nav .nav-link {
  padding: 8px 14px !important;
  border-radius: var(--crm-radius-sm);
  color: #475569;
  font-size: 14px;
  font-weight: 500;
}

.crm-nav .nav-link:hover {
  color: var(--crm-text);
  background: #f8fafc;
}

.crm-nav .nav-link.active {
  background: var(--crm-primary-soft);
  color: var(--crm-primary-hover);
  font-weight: 600;
}

.crm-nav .nav-link.crm-nav__admin {
  color: #b91c1c;
}

.crm-nav .nav-link.crm-nav__admin.active,
.crm-nav .nav-link.crm-nav__admin:hover {
  background: #fef2f2;
  color: #991b1b;
}

.crm-nav__user {
  height: 40px;
  padding: 0 12px 0 4px;
  border-radius: 999px;
}

/* Pastille avec le nom d'utilisateur complet (les usernames sont des trigrammes : BTA, MGU...) */
.crm-avatar {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 999px;
  background: #e0e7ff;
  color: #3730a3;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.crm-nav .dropdown-menu {
  border: 1px solid var(--crm-border) !important;
  border-radius: 12px;
  box-shadow: var(--crm-shadow) !important;
  padding: 6px;
}

.crm-nav .dropdown-item {
  border-radius: var(--crm-radius-sm);
}

/* ---------------------------------- */
/* Page d'accueil                     */
/* ---------------------------------- */
.crm-page {
  padding: 16px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.crm-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.crm-page-header[hidden] {
  display: none;
}

.crm-page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--crm-text);
}

.crm-page-subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--crm-text-muted);
}

.crm-page-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.crm-card {
  background: var(--crm-surface);
  border: 1px solid var(--crm-border);
  border-radius: var(--crm-radius-lg);
}

.crm-card-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--crm-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Calendrier : colonne gauche + grand calendrier */
.crm-calendar-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.crm-calendar-layout[hidden] {
  display: none;
}

.crm-calendar-aside {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Sélecteur Calendrier / Tableau au-dessus du mini calendrier */
.crm-calendar-aside .home-view-switch {
  display: flex;
}

.crm-calendar-aside .home-view-switch .crm-segmented__btn {
  flex: 1;
  justify-content: center;
}

.crm-calendar-main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 16px 16px;
}

.crm-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: var(--crm-text-2);
}

.crm-legend li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.crm-legend .crm-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex-shrink: 0;
}

@media (max-width: 992px) {
  .crm-calendar-layout {
    flex-direction: column;
  }

  .crm-calendar-aside {
    flex-basis: auto;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .crm-calendar-aside > * {
    flex: 1 1 260px;
  }
}

/* Couleurs de priorité (points, légende) */
.crm-dot--danger { background: #dc2626; }
.crm-dot--warning { background: #ea580c; }
.crm-dot--primary { background: #2563eb; }
.crm-dot--secondary { background: #94a3b8; }

/* Pastille de statut : point à la couleur exacte du statut */
.crm-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--crm-text-2);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.crm-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--crm-status-color, #94a3b8);
}

.crm-status--nf { --crm-status-color: var(--crm-status-nf); background: rgba(15, 98, 163, .10); }
.crm-status--ea { --crm-status-color: var(--crm-status-ea); background: rgba(230, 126, 48, .14); }
.crm-status--ft { --crm-status-color: var(--crm-status-ft); background: rgba(0, 128, 0, .10); }
.crm-status--rp { --crm-status-color: var(--crm-status-rp); background: rgba(0, 128, 0, .10); }
.crm-status--exp { --crm-status-color: var(--crm-status-exp); background: rgba(229, 0, 0, .10); }

/* Badge de priorité */
.crm-priority {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* Drapeau (icône fa-flag) à la couleur du badge */
.crm-priority::before {
  content: "\f024";
  font-family: "Font Awesome 6 Free", "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 10px;
  line-height: 1;
}

.crm-priority--danger { background: #fef2f2; color: #b91c1c; }
.crm-priority--warning { background: #fff7ed; color: #c2410c; }
.crm-priority--primary { background: #eff6ff; color: #1d4ed8; }
.crm-priority--secondary { background: #f1f5f9; color: #475569; }

/* ---------------------------------- */
/* FullCalendar (grand + mini)        */
/* ---------------------------------- */
.crm-calendar #calendar {
  height: calc(100vh - 130px);
  min-height: 560px;
  margin: 0;
  font-size: 13px;
}

.crm-calendar .fc {
  --fc-border-color: #eef2f7;
  --fc-page-bg-color: #ffffff;
  --fc-neutral-bg-color: #f8fafc;
  --fc-today-bg-color: rgba(37, 99, 235, .05);
  --fc-now-indicator-color: #dc2626;
  --fc-event-border-color: transparent;
}

.crm-calendar .fc .fc-scrollgrid {
  border-radius: 12px;
  overflow: hidden;
}

.crm-calendar .fc .fc-toolbar.fc-header-toolbar {
  margin: 0 0 12px;
  gap: 8px;
  flex-wrap: wrap;
}

.crm-calendar .fc .fc-toolbar-chunk {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.crm-calendar .fc .fc-toolbar-title {
  font-size: 16px;
  font-weight: 600;
  text-transform: none;
  color: var(--crm-text);
}

/* Boutons de la barre FullCalendar */
.crm-calendar .fc .fc-button {
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--crm-border-strong);
  background: var(--crm-surface);
  color: var(--crm-text-2);
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  box-shadow: none !important;
}

.crm-calendar .fc .fc-button:hover {
  background: #f8fafc;
  color: var(--crm-text);
}

.crm-calendar .fc .fc-button:disabled {
  opacity: .5;
}

.crm-calendar .fc .fc-button-group {
  gap: 0;
}

.crm-calendar .fc .fc-button-group > .fc-button:first-child {
  border-radius: 9px 0 0 9px;
}

.crm-calendar .fc .fc-button-group > .fc-button:last-child {
  border-radius: 0 9px 9px 0;
}

.crm-calendar .fc .fc-button-group > .fc-button:only-child,
.crm-calendar .fc .fc-toolbar-chunk > .fc-button {
  border-radius: 9px;
}

.crm-calendar .fc .fc-button-primary:not(:disabled).fc-button-active,
.crm-calendar .fc .fc-button-primary:not(:disabled).active,
.crm-calendar .fc .fc-button-primary:not(:disabled):active {
  background: var(--crm-primary-soft);
  border-color: #bfdbfe;
  color: var(--crm-primary-hover);
  font-weight: 600;
}

/* Boutons ajoutés à la barre (calendar.js) : Actualiser, Nouvelle tâche */
.crm-calendar .fc .fc-refresh-button::before,
.crm-calendar .fc .fc-newTask-button::before {
  font-family: "Font Awesome 6 Free", "Font Awesome 7 Free";
  font-weight: 900;
}

.crm-calendar .fc .fc-refresh-button {
  width: 34px;
  padding: 0;
}

.crm-calendar .fc .fc-refresh-button::before {
  content: "\f2f1";
}

.crm-calendar .fc .fc-newTask-button::before {
  content: "\2b";
  margin-right: 6px;
}

.crm-calendar .fc .fc-newTask-button,
.crm-calendar .fc .fc-newTask-button:hover,
.crm-calendar .fc .fc-newTask-button:not(:disabled):active {
  border-color: var(--crm-primary);
  background: var(--crm-primary);
  color: #fff;
  font-weight: 600;
}

.crm-calendar .fc .fc-newTask-button:hover {
  border-color: var(--crm-primary-hover);
  background: var(--crm-primary-hover);
}

/* En-têtes des jours */
.crm-calendar .fc .fc-col-header-cell {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--crm-text-muted);
  background: var(--crm-surface-2);
}

.crm-calendar .fc .fc-col-header-cell-cushion {
  padding: 10px 4px;
  color: var(--crm-text-muted);
}

.crm-calendar .fc .fc-day-today .fc-col-header-cell-cushion {
  color: var(--crm-primary);
}

.crm-calendar .fc .fc-timegrid-slot-label,
.crm-calendar .fc .fc-daygrid-day-number {
  font-size: 11px;
  color: var(--crm-text-muted);
}

.crm-calendar .fc .fc-day-today .fc-daygrid-day-number {
  background: var(--crm-primary);
  color: #fff;
  border-radius: 999px;
  min-width: 24px;
  text-align: center;
  margin: 4px;
  padding: 3px 6px;
}

/* Tâches : remplissage = couleur du statut (inchangé), forme adoucie */
/* Contour blanc + ombre : deux tâches superposées restent distinctes */
.crm-calendar #calendar .fc-event {
  border-radius: 6px;
  border: 1px solid #ffffff !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .35);
  overflow: hidden;
}

.crm-calendar #calendar .fc-event:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .35);
}

/* Même rendu que la version en production : police système, 10px, graisse normale
   (Inter en blanc sur fond coloré paraît trop gras à cette taille) */
.crm-calendar #calendar .fc-event-title {
  padding: 1px 3px;
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.25;
}

/* Ligne "all-day" (vues Semaine / 3 jours / Jour) : cases plus hautes */
.crm-calendar #calendar .fc-timegrid .fc-daygrid-event {
  min-height: 30px;
}

.crm-calendar #calendar .fc-timegrid .fc-daygrid-event .fc-event-title {
  padding: 4px 6px;
}

/* Mini calendrier */
.crm-calendar #miniCalendar {
  font-size: 12px;
}

.crm-calendar #miniCalendar .fc-toolbar.fc-header-toolbar {
  margin-bottom: 8px;
}

.crm-calendar #miniCalendar .fc-toolbar-title {
  font-size: 14px;
  text-transform: capitalize;
}

.crm-calendar #miniCalendar .fc-button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: #f1f5f9;
  border-radius: 8px !important;
}

.crm-calendar #miniCalendar .fc-scrollgrid,
.crm-calendar #miniCalendar .fc-scrollgrid td,
.crm-calendar #miniCalendar .fc-scrollgrid th {
  border: 0;
}

.crm-calendar #miniCalendar .fc-col-header-cell {
  background: transparent;
  font-size: 11px;
}

.crm-calendar #miniCalendar .fc-daygrid-day-frame {
  min-height: 0;
  display: flex;
  justify-content: center;
}

.crm-calendar #miniCalendar .fc-daygrid-day-top {
  justify-content: center;
}

.crm-calendar #miniCalendar .fc-daygrid-day-number {
  font-size: 12px;
  color: var(--crm-text);
  padding: 4px;
  border-radius: 8px;
}

.crm-calendar #miniCalendar .fc-day-other .fc-daygrid-day-number {
  color: #94a3b8;
}

.crm-calendar #miniCalendar .fc-day-selected .fc-daygrid-day-number {
  background: var(--crm-primary-soft);
  color: var(--crm-primary-hover);
  font-weight: 600;
}

.crm-calendar #miniCalendar .fc-daygrid-body,
.crm-calendar #miniCalendar .fc-scrollgrid-sync-table {
  height: auto !important;
}

/* ---------------------------------- */
/* Modales maison (.ATmodal)          */
/* ---------------------------------- */
.ATmodal.modal--show {
  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(2px);
  margin: 0;
  padding: 24px 12px;
}

.ATmodal .at-modal-card {
  width: min(760px, 96vw);
  max-height: min(92vh, 960px);
  background: var(--crm-surface);
  border: 0 !important;
  border-radius: var(--crm-radius-xl) !important;
  box-shadow: var(--crm-shadow-lg) !important;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--crm-text);
}

/* En-tête */
.ATmodal .at-modal-header,
.ATmodal .at-modal-card > .card-header {
  padding: 22px 24px 18px !important;
  background: var(--crm-surface) !important;
  border-bottom: 1px solid var(--crm-border) !important;
}

.ATmodal .at-modal-title,
.ATmodal .at-modal-card > .card-header h5 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--crm-text);
  line-height: 1.35;
}

.ATmodal .at-modal-title strong {
  color: var(--crm-text-muted);
  font-weight: 500;
}

.ATmodal .at-title-line {
  gap: 8px;
}

.ATmodal .at-icon-btn,
.ATmodal .at-modal-card > .card-header .modal__btn_close {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 0 !important;
  border-radius: var(--crm-radius) !important;
  background: #f1f5f9 !important;
  color: #475569;
}

.ATmodal .at-icon-btn:hover {
  background: #e2e8f0 !important;
}

/* Corps */
.ATmodal .at-modal-body {
  padding: 20px 24px !important;
  background: var(--crm-surface);
}

.ATmodal .at-section {
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--crm-border);
  border-radius: 12px;
  background: var(--crm-surface-2);
}

.ATmodal .at-section-title {
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--crm-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ATmodal .at-section-title i {
  opacity: 1;
  font-size: 12px;
}

.ATmodal .at-value {
  font-size: 14px;
  color: var(--crm-text);
}

.ATmodal .at-value.text-muted {
  color: var(--crm-text-muted) !important;
}

.ATmodal .at-grid-2 {
  gap: 0 12px;
}

.ATmodal .at-divider {
  margin: 4px 0 16px;
  background: var(--crm-border);
}

/* Techniciens */
.ATmodal .at-chip-list .span_attr {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--crm-surface) !important;
  color: var(--crm-text) !important;
  font-size: 13px;
  font-weight: 500;
}

/* Indicateurs */
.ATmodal .at-flags {
  gap: 8px;
}

@media (min-width: 768px) {
  .ATmodal .at-flags {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ATmodal .at-flag {
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: var(--crm-surface);
  box-shadow: inset 0 0 0 1px var(--crm-border);
}

/* Priorité Urgent : le cadran clignote (contour rouge + fond rosé), comme les cartes du tableau */
.ATmodal .at-flag--urgent {
  animation: at-flag-urgent 1s ease-in-out infinite;
}

@keyframes at-flag-urgent {
  0%, 100% {
    background: var(--crm-surface);
    box-shadow: inset 0 0 0 1px var(--crm-border);
  }
  50% {
    background: #fee2e2;
    box-shadow: inset 0 0 0 2px #dc2626, 0 0 12px rgba(220, 38, 38, .45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ATmodal .at-flag--urgent {
    animation: none;
    background: #fee2e2;
    box-shadow: inset 0 0 0 2px #dc2626;
  }
}

.ATmodal .at-flag-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--crm-text-muted);
}

/* Historique en frise */
.ATmodal .at-history p {
  position: relative;
  margin: 0;
  padding: 0 0 12px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 13px;
  line-height: 1.45;
  color: var(--crm-text-2);
}

.ATmodal .at-history p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #cbd5e1;
}

.ATmodal .at-history p:last-child {
  padding-bottom: 0;
}

/* Pièces jointes */
.ATmodal .task-image {
  border-radius: 10px;
  border: 1px solid var(--crm-border);
  box-shadow: none;
}

/* Pied */
.ATmodal .at-modal-footer {
  padding: 14px 24px !important;
  background: var(--crm-surface-2) !important;
  border-top: 1px solid var(--crm-border) !important;
}

.ATmodal .at-modal-footer .crm-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.ATmodal .at-footer-left,
.ATmodal .at-footer-middle,
.ATmodal .at-footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Formulaires dans les modales */
.ATmodal .form-label {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600 !important;
  color: var(--crm-text-2);
}

.ATmodal .form-label i {
  display: none;
}

.ATmodal .form-control,
.ATmodal .form-select,
.ATmodal .ts-wrapper .ts-control {
  min-height: 42px;
  border: 1px solid var(--crm-border-strong);
  border-radius: var(--crm-radius) !important;
  font-size: 14px;
  color: var(--crm-text);
  box-shadow: none;
}

.ATmodal .ts-wrapper .ts-control {
  padding: 8px 12px;
}

.ATmodal .form-control:focus,
.ATmodal .form-select:focus,
.ATmodal .ts-wrapper.focus .ts-control {
  border-color: var(--crm-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.ATmodal .ts-wrapper.multi .ts-control > div {
  border-radius: 8px;
  background: var(--crm-primary-soft);
  color: var(--crm-primary-hover);
  border: 0;
  font-weight: 500;
}

.ATmodal .ts-wrapper.multi .ts-control > div .remove {
  border-left: 0;
  color: var(--crm-primary-hover);
}

.ATmodal #fileDropZone {
  border: 1.5px dashed #cbd5e1;
  border-radius: 12px;
  background: var(--crm-surface-2);
}

.ATmodal #fileDropZone.border-primary {
  border-color: var(--crm-primary) !important;
  background: var(--crm-primary-soft);
}

.ATmodal .form-check-input:checked {
  background-color: var(--crm-primary);
  border-color: var(--crm-primary);
}

/* Choix de la priorité (boutons radio) */
.crm-priority-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 576px) {
  .crm-priority-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.crm-priority-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.crm-priority-picker label {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--crm-border-strong);
  border-radius: var(--crm-radius);
  background: var(--crm-surface);
  color: var(--crm-text-2);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.crm-priority-picker input:checked + label {
  border: 1.5px solid var(--crm-primary);
  background: var(--crm-primary-soft);
  color: var(--crm-text);
  font-weight: 600;
}

.crm-priority-picker input:focus-visible + label {
  outline: 2px solid var(--crm-primary);
  outline-offset: 2px;
}

/* Drapeaux de priorité (icône fa-flag colorée) */
.crm-flag {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
}

.crm-flag--danger { color: #dc2626; }
.crm-flag--warning { color: #f59e0b; }
.crm-flag--primary { color: #2563eb; }
.crm-flag--secondary { color: #94a3b8; }

/* Contour blanc fin : le drapeau reste visible sur une tâche de même couleur (rouge sur rouge) */
.task-priority-flag .crm-flag {
  font-size: 9px;
  -webkit-text-stroke: 1.2px #fff; /* dessiné sous le drapeau : ~0,6px visible autour */
  paint-order: stroke fill;
}

/* ---------------------------------- */
/* Formulaires de page (.crm-form)    */
/* ---------------------------------- */
.crm-edit-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.crm-edit-main {
  flex: 999 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.crm-edit-aside {
  flex: 1 1 300px;
  max-width: 100%;
}

.crm-form-card {
  padding: 24px;
}

.crm-form .form-label {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--crm-text-2);
}

.crm-form .form-control,
.crm-form .form-select,
.crm-form .ts-wrapper .ts-control {
  min-height: 42px;
  border: 1px solid var(--crm-border-strong);
  border-radius: var(--crm-radius) !important;
  font-size: 14px;
  color: var(--crm-text);
  box-shadow: none;
}

.crm-form .form-control-sm,
.crm-form .form-select-sm {
  min-height: 36px;
  font-size: 13px;
}

.crm-form .form-control:focus,
.crm-form .form-select:focus,
.crm-form .ts-wrapper.focus .ts-control {
  border-color: var(--crm-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.crm-form .form-check-input:checked {
  background-color: var(--crm-primary);
  border-color: var(--crm-primary);
}

.crm-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--crm-border);
}

/* Case à cocher encadrée */
.crm-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--crm-border-strong);
  border-radius: var(--crm-radius);
  font-size: 14px;
  color: var(--crm-text-2);
  cursor: pointer;
}

/* Choix des techniciens (cases à cocher en pastilles) */
.crm-user-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.crm-user-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.crm-user-picker label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 4px;
  border: 1px solid var(--crm-border-strong);
  border-radius: 999px;
  background: var(--crm-surface);
  font-size: 14px;
  font-weight: 500;
  color: var(--crm-text-2);
  cursor: pointer;
}

.crm-user-picker .crm-avatar {
  min-width: 30px;
  height: 30px;
  background: #f1f5f9;
  color: #475569;
}

.crm-user-picker input:checked + label {
  border: 1.5px solid var(--crm-primary);
  background: var(--crm-primary-soft);
  color: var(--crm-text);
}

.crm-user-picker input:checked + label .crm-avatar {
  background: var(--crm-primary);
  color: #fff;
}

.crm-user-picker input:focus-visible + label {
  outline: 2px solid var(--crm-primary);
  outline-offset: 2px;
}

/* Zone de dépôt de fichiers */
.crm-dropzone {
  padding: 16px;
  border: 1.5px dashed #cbd5e1;
  border-radius: 12px;
  background: var(--crm-surface-2);
  cursor: pointer;
}

.crm-dropzone.border-primary {
  border-color: var(--crm-primary) !important;
  background: var(--crm-primary-soft);
}

.crm-dropzone__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--crm-radius);
  background: var(--crm-primary-soft);
  color: var(--crm-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Fichiers existants */
.crm-files {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.crm-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--crm-border);
  border-radius: 12px;
}

.crm-file .task-image {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 8px;
  position: static;
}

/* Lignes de matériel */
.crm-form .material-row {
  padding: 12px;
  border: 1px solid var(--crm-border);
  border-radius: 12px;
  background: var(--crm-surface-2);
}

/* ---------------------------------- */
/* Corrections FullCalendar           */
/* ---------------------------------- */

/* "Aujourd'hui" désactivé : reste blanc (pas le gris par défaut de FullCalendar) */
.crm-calendar .fc .fc-button-primary:disabled {
  background: var(--crm-surface);
  border-color: var(--crm-border-strong);
  color: var(--crm-text-muted);
  opacity: .6;
}

/* Mini calendrier : lignes compactes, week-end discret, jour courant en pastille */
.crm-calendar #miniCalendar .fc-daygrid-day-frame {
  height: auto !important;
  min-height: 0 !important;
}

.crm-calendar #miniCalendar .fc-daygrid-day-events,
.crm-calendar #miniCalendar .fc-daygrid-day-bottom {
  display: none;
}

.crm-calendar #miniCalendar .fc-daygrid-day,
.crm-calendar #miniCalendar .fc-daygrid-day.fc-day-today,
.crm-calendar #miniCalendar .fc-daygrid-day.fc-day-selected {
  background-color: transparent !important;
}

.crm-calendar #miniCalendar .fc-daygrid-day.fc-day-sat,
.crm-calendar #miniCalendar .fc-daygrid-day.fc-day-sun {
  background-color: #f8fafc !important;
}

.crm-calendar #miniCalendar .fc-daygrid-day-number {
  width: 28px;
  height: 28px;
  margin: 2px auto;
  padding: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--crm-text);
}

.crm-calendar #miniCalendar .fc-day-selected .fc-daygrid-day-number {
  background: var(--crm-primary-soft);
  color: var(--crm-primary-hover);
  font-weight: 600;
}

/* Jour sélectionné hors du mois affiché : pastille aussi visible que les autres */
.crm-calendar #miniCalendar .fc-day-other.fc-day-selected .fc-daygrid-day-top {
  opacity: 1;
}

.crm-calendar #miniCalendar .fc-day-today .fc-daygrid-day-number {
  background: var(--crm-primary);
  color: #fff;
  font-weight: 700;
}

/* ---------------------------------- */
/* Pied de la modale de détail        */
/* ---------------------------------- */
.ATmodal .crm-footer-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--crm-border);
}

.ATmodal .crm-footer-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ATmodal .crm-footer-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--crm-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ATmodal .crm-footer-quick .crm-segmented__btn {
  font-size: 13px;
}

.ATmodal .crm-footer-quick .crm-segmented__btn .crm-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

/* Indicateurs actifs : teinte selon le sens */
.ATmodal .btnToggleBilled.active { background: #f0fdf4; color: #15803d; }
.ATmodal .btnToggleToCharge.active { background: #fffbeb; color: #a16207; }
.ATmodal .btnToggleUrgent.active { background: #fef2f2; color: #b91c1c; }

.ATmodal .at-footer-left .modal__btn_delete {
  order: 99; /* Supprimer toujours en dernier, après Reprogrammer / Imprimer */
}

/* ---------------------------------- */
/* Menu profil : couleur de l'avatar  */
/* ---------------------------------- */
.crm-profile-menu {
  min-width: 280px;
}

.crm-color-picker {
  display: grid;
  grid-template-columns: repeat(7, 26px);
  gap: 10px;
  padding: 4px 16px 10px;
}

.crm-color-swatch {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--swatch);
  cursor: pointer;
  transition: transform .12s;
}

.crm-color-swatch:hover {
  transform: scale(1.12);
}

.crm-color-swatch:focus-visible {
  outline: 2px solid var(--crm-primary);
  outline-offset: 2px;
}

/* Couleur choisie : anneau de la même couleur, séparé par un liseré blanc */
.crm-color-swatch.is-selected {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--swatch);
}

/* Petite pastille d'initiales (techniciens dans la modale de détail) */
.crm-avatar--sm {
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
}

/* -------------------------------------------------------------
   Commentaire facultatif au passage en "Terminée" (askCompletionComment, task-crud.js)
   ------------------------------------------------------------- */
.ATmodal .at-section[hidden] {
  display: none;
}

.at-comment-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--crm-border);
  border-radius: var(--crm-radius-lg);
  background: var(--crm-surface);
  color: var(--crm-text);
  box-shadow: var(--crm-shadow-lg);
}

.at-comment-dialog::backdrop {
  background: rgba(15, 23, 42, .35);
}

.at-comment-dialog__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  margin: 0;
}

.at-comment-dialog__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.at-comment-dialog__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #dcfce7;
  color: #15803d;
}

.at-comment-dialog__title {
  font-weight: 600;
  font-size: 15px;
}

.at-comment-dialog__hint {
  font-size: 13px;
  color: var(--crm-text-muted);
}

.at-comment-dialog__input {
  width: 100%;
  min-height: 80px;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid var(--crm-border-strong);
  border-radius: var(--crm-radius);
  font: inherit;
  font-size: 14px;
  color: var(--crm-text);
  background: var(--crm-surface-2);
}

.at-comment-dialog__input:focus {
  outline: none;
  border-color: var(--crm-primary);
  box-shadow: 0 0 0 3px var(--crm-primary-soft);
  background: var(--crm-surface);
}

.at-comment-dialog__footer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.at-comment-dialog__keys {
  margin-right: auto;
  font-size: 12px;
  color: var(--crm-text-muted);
}

@media (hover: none) {
  .at-comment-dialog__keys {
    display: none;
  }
}

/* Icône "toute la journée" dans la case en haut à gauche des vues horaires (calendar.js) */
.crm-calendar .fc .fc-timegrid-axis .fc-timegrid-axis-cushion {
  padding: 0;
  max-width: none;
}

.crm-calendar .fc .fc-timegrid-axis-frame {
  justify-content: center;
}

.crm-calendar .fc .fc-timegrid-axis a:has(.at-fullday-toggle) {
  text-decoration: none;
}

.at-fullday-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--crm-text-muted);
  font-size: 11px;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.at-fullday-toggle:hover {
  background: var(--crm-muted-bg);
  color: var(--crm-text);
}

.at-fullday-toggle:focus-visible {
  outline: 2px solid var(--crm-primary);
  outline-offset: 1px;
}

.at-fullday-toggle.is-active {
  background: var(--crm-primary-soft);
  color: var(--crm-primary);
}