/* ================================================================
   Thrive Task Form — standard de design v1.1
   Formulaires « Créer une tâche » / « Modifier la tâche »
   Namespace : tf-  ·  Thème : .tf-theme--{violet|blue|green|orange}

   Feuille commune à tout l'écosystème Thrive.
   NE PAS MODIFIER dans un plugin : c'est une copie conforme. Les copies
   doivent rester rigoureusement identiques d'un plugin à l'autre — un
   `diff` entre deux d'entre elles doit être vide. Rien ici ne mentionne
   le plugin hôte : le thème est choisi par la classe posée sur l'overlay
   (.tf-theme--violet|blue|green|orange), pas par cette feuille.

   Toute évolution se fait dans le document de référence, puis est
   re-copiée à l'identique dans chaque plugin :
   C:\Users\nadal\Documents\antigravity\thrive-task-standard.md

   v1.1 : tous les sélecteurs de composant sont préfixés par .tf-overlay.
   Indispensable en wp-admin, où forms.css style input[type="text"],
   select, textarea… en (0,1,1) — plus spécifique qu'une simple classe.
   ================================================================ */

/* ── Thèmes ─────────────────────────────────────────────────── */
.tf-theme--violet{
    --tf-accent:#7C3AED; --tf-accent-rgb:124,58,237;
    --tf-accent-dark:#6D28D9; --tf-accent-deep:#5B21B6;
    --tf-tint-50:#F5F3FF;  --tf-tint-100:#EDE9FE;
    --tf-picker-filter:invert(27%) sepia(98%) saturate(700%) hue-rotate(255deg) brightness(80%) contrast(110%);
}
.tf-theme--blue{
    --tf-accent:#2563EB; --tf-accent-rgb:37,99,235;
    --tf-accent-dark:#1D4ED8; --tf-accent-deep:#1E40AF;
    --tf-tint-50:#EFF6FF;  --tf-tint-100:#DBEAFE;
    --tf-picker-filter:invert(30%) sepia(94%) saturate(1800%) hue-rotate(213deg) brightness(94%) contrast(96%);
}
.tf-theme--green{
    --tf-accent:#16A34A; --tf-accent-rgb:22,163,74;
    --tf-accent-dark:#15803D; --tf-accent-deep:#166534;
    --tf-tint-50:#F0FDF4;  --tf-tint-100:#DCFCE7;
    --tf-picker-filter:invert(46%) sepia(82%) saturate(480%) hue-rotate(93deg) brightness(93%) contrast(92%);
}
.tf-theme--orange{
    --tf-accent:#D97706; --tf-accent-rgb:217,119,6;
    --tf-accent-dark:#B45309; --tf-accent-deep:#92400E;
    --tf-tint-50:#FFFBEB;  --tf-tint-100:#FEF3C7;
    --tf-picker-filter:invert(52%) sepia(88%) saturate(1200%) hue-rotate(2deg) brightness(94%) contrast(95%);
}

/* ── Jetons neutres (identiques pour tous les thèmes) ───────── */
.tf-overlay{
    --tf-white:#ffffff;
    --tf-text:#1e293b;
    --tf-text-soft:#64748b;
    --tf-border:#e2e8f0;
    --tf-danger:#DC2626;
    --tf-danger-dark:#B91C1C;
    --tf-radius:14px;
    --tf-radius-sm:8px;
    --tf-font:-apple-system,'Inter',BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* ── Isolation vis-à-vis du thème WordPress / de wp-admin ───── */
.tf-overlay *, .tf-overlay *::before, .tf-overlay *::after{
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family:var(--tf-font);
}

/* ── Overlay ────────────────────────────────────────────────── */
.tf-overlay{
    position:fixed;
    inset:0;
    z-index:999999; /* > #wpadminbar (99999) */
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(15,23,42,.45);
    backdrop-filter:blur(2px);
}

/* Variante « révélé par la classe .open » — pour les plugins dont le JS
   ouvre les modals via classList.add('open') au lieu de style.display.
   Doit être posée en plus de .tf-overlay sur le même élément. */
.tf-overlay.tf-overlay--toggle{ display:none; }
.tf-overlay.tf-overlay--toggle.open{ display:flex; }

/* ── Boîte ──────────────────────────────────────────────────── */
.tf-overlay .tf-modal{
    width:100%;
    max-width:600px;
    max-height:90vh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:var(--tf-white);
    border-radius:var(--tf-radius);
    box-shadow:0 28px 70px rgba(0,0,0,.18), 0 0 0 1px rgba(var(--tf-accent-rgb),.13);
    animation:tfModalIn .18s ease;
}
.tf-overlay .tf-modal--sm{ max-width:420px; }

/* Formulaire natif : les plugins qui postent en rechargement de page ou en
   AJAX depuis un <form> enveloppent le corps + le pied. Il doit rester
   transparent pour la mise en page flex de .tf-modal. */
.tf-overlay .tf-modal > form{
    display:flex;
    flex-direction:column;
    min-height:0;
}

@keyframes tfModalIn{
    from{ transform:translateY(12px) scale(.98); opacity:0; }
    to  { transform:translateY(0) scale(1);      opacity:1; }
}

/* ── En-tête ────────────────────────────────────────────────── */
.tf-overlay .tf-modal-head{
    position:relative;
    overflow:hidden;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 22px 18px;
    background:linear-gradient(135deg, var(--tf-tint-100) 0%, var(--tf-tint-50) 38%, #fff 72%);
    border-bottom:1px solid rgba(var(--tf-accent-rgb),.10);
}
.tf-overlay .tf-modal-head::before{
    content:'';
    position:absolute;
    left:-30px; top:-30px;
    width:150px; height:100px;
    border-radius:50%;
    background:radial-gradient(ellipse at top left, var(--tf-accent) 0%, transparent 65%);
    opacity:.13;
    pointer-events:none;
}
.tf-overlay .tf-modal-title{
    position:relative;
    display:flex;
    align-items:center;
    gap:8px;
    margin:0;
    padding:0;
    font-size:16px;
    font-weight:700;
    line-height:1.3;
    color:var(--tf-accent);
}
.tf-overlay .tf-modal-close{
    position:relative;
    display:flex;
    align-items:center;
    width:auto;
    height:auto;
    padding:6px;
    border:none;
    border-radius:8px;
    background:none;
    cursor:pointer;
    color:var(--tf-accent);
    opacity:.6;
    transition:background .15s, opacity .15s;
}
.tf-overlay .tf-modal-close:hover{ background:rgba(var(--tf-accent-rgb),.09); opacity:1; }

/* ── Corps ──────────────────────────────────────────────────── */
.tf-overlay .tf-modal-body{
    display:flex;
    flex-direction:column;
    gap:18px;
    padding:22px 26px;
    overflow-y:auto;
    max-height:calc(85vh - 130px);
    background:linear-gradient(180deg, rgba(var(--tf-accent-rgb),.045) 0%, #fff 72px);
}
.tf-overlay .tf-modal-body--text{ padding:20px 24px 16px; }
.tf-overlay .tf-confirm-text{ margin:0; font-size:14px; line-height:1.5; color:var(--tf-text); }

/* ── Pied ───────────────────────────────────────────────────── */
.tf-overlay .tf-modal-foot{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    padding:16px 22px;
    background:rgba(var(--tf-accent-rgb),.03);
    border-top:1px solid rgba(var(--tf-accent-rgb),.08);
}
.tf-overlay .tf-modal-foot--split{ justify-content:space-between; }
.tf-overlay .tf-btn-group{ display:flex; gap:8px; }

/* ── Lignes de formulaire ───────────────────────────────────── */
.tf-overlay .tf-row{ display:flex; flex-direction:column; gap:6px; }
.tf-overlay .tf-row-2col{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tf-overlay .tf-datetime-row{ display:flex; gap:8px; }
.tf-overlay .tf-datetime-row .tf-input--date{ flex:2; }
.tf-overlay .tf-datetime-row .tf-input--time{ flex:1; }

@media (max-width:480px){
    .tf-overlay .tf-row-2col{ grid-template-columns:1fr; }
}

/* ── Libellés ───────────────────────────────────────────────── */
.tf-overlay .tf-label{
    display:flex;
    align-items:center;
    gap:6px;
    margin:0;
    padding:0;
    font-size:12.5px;
    font-weight:700;
    line-height:1.4;
    color:var(--tf-accent-deep);
}
.tf-overlay .tf-required{ color:var(--tf-danger); margin-left:3px; }
.tf-overlay .tf-help{ font-size:11.5px; line-height:1.5; color:var(--tf-text-soft); }

/* ── Champs ─────────────────────────────────────────────────── */
.tf-overlay .tf-input,
.tf-overlay .tf-select,
.tf-overlay .tf-textarea{
    display:block;
    width:100%;
    min-height:0;
    max-width:none;
    margin:0;
    padding:8px 12px;
    font-size:13px;
    line-height:1.4;
    color:var(--tf-text);
    background:#fff;
    border:1.5px solid var(--tf-border);
    border-radius:var(--tf-radius-sm);
    box-shadow:none;
    outline:none;
    transition:border .2s, box-shadow .2s;
}
/* wp-admin force appearance:none sur select et radio : on rétablit le rendu
   natif, sinon la flèche du select et la pastille du radio disparaissent. */
.tf-overlay .tf-select{
    -webkit-appearance:auto;
    appearance:auto;
    padding-right:8px;
    background-image:none;
}
.tf-overlay .tf-input:focus,
.tf-overlay .tf-select:focus,
.tf-overlay .tf-textarea:focus{
    border-color:var(--tf-accent);
    box-shadow:0 0 0 3px rgba(var(--tf-accent-rgb),.12);
}
.tf-overlay .tf-input::placeholder,
.tf-overlay .tf-textarea::placeholder{ color:#9ca3af; }
.tf-overlay .tf-input:disabled,
.tf-overlay .tf-select:disabled,
.tf-overlay .tf-textarea:disabled{
    opacity:.6;
    cursor:not-allowed;
    background:#f8fafc;
}

/* Champ titre mis en avant */
.tf-overlay .tf-input--hero{ height:48px; padding:12px 14px; font-size:15px; }

/* Description */
.tf-overlay .tf-textarea{ min-height:80px; resize:vertical; line-height:1.5; }

/* Date & heure */
.tf-overlay .tf-input--date,
.tf-overlay .tf-input--time{ height:44px; padding:10px 14px; }
.tf-overlay .tf-input--date::-webkit-calendar-picker-indicator,
.tf-overlay .tf-input--time::-webkit-calendar-picker-indicator,
.tf-overlay .tf-input--inline-date::-webkit-calendar-picker-indicator{
    width:18px; height:18px;
    cursor:pointer;
    filter:var(--tf-picker-filter);
}
.tf-overlay .tf-input--inline-date{ display:inline-block; width:auto; height:36px; padding:6px 10px; font-size:13px; }

/* ── Toggle Tâche simple / récurrente ───────────────────────── */
.tf-overlay .tf-type-toggle{
    display:flex;
    gap:0;
    overflow:hidden;
    border:1.5px solid rgba(var(--tf-accent-rgb),.22);
    border-radius:10px;
    background:var(--tf-tint-50);
}
.tf-overlay .tf-type-btn{
    flex:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    height:auto;
    padding:9px 14px;
    border:none;
    border-radius:0;
    background:transparent;
    color:var(--tf-text-soft);
    font-size:13.5px;
    font-weight:600;
    line-height:1.2;
    box-shadow:none;
    cursor:pointer;
    transition:background .15s, color .15s;
}
.tf-overlay .tf-type-btn.is-active{ background:var(--tf-accent); color:#fff; }
.tf-overlay .tf-type-btn:not(.is-active):hover{
    background:rgba(var(--tf-accent-rgb),.08);
    color:var(--tf-accent-deep);
}

/* ── Section récurrence ─────────────────────────────────────── */
.tf-overlay .tf-recurrence{
    display:flex;
    flex-direction:column;
    gap:13px;
    padding:14px 16px;
    background:rgba(var(--tf-accent-rgb),.045);
    border:1.5px solid rgba(var(--tf-accent-rgb),.14);
    border-radius:12px;
}
.tf-overlay .tf-recur-custom{ display:flex; flex-direction:column; gap:12px; }
.tf-overlay .tf-recur-interval{ display:flex; align-items:center; gap:8px; }
.tf-overlay .tf-recur-interval .tf-input{ width:72px; flex-shrink:0; text-align:center; }
.tf-overlay .tf-recur-interval .tf-select{ flex:1; }

/* Chips jours */
.tf-overlay .tf-recur-days{ display:flex; gap:7px; flex-wrap:wrap; }
.tf-overlay .tf-day-chip{
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px; height:36px;
    padding:0;
    border-radius:50%;
    border:1.5px solid rgba(var(--tf-accent-rgb),.22);
    background:var(--tf-tint-50);
    font-size:12px;
    font-weight:700;
    line-height:1;
    color:var(--tf-accent-deep);
    box-shadow:none;
    cursor:pointer;
    user-select:none;
    transition:background .13s, color .13s, border-color .13s;
}
.tf-overlay .tf-day-chip:hover{ background:rgba(var(--tf-accent-rgb),.12); }
.tf-overlay .tf-day-chip.is-selected{
    background:var(--tf-accent);
    border-color:var(--tf-accent);
    color:#fff;
}

/* Fin de récurrence */
.tf-overlay .tf-recur-end{ display:flex; flex-direction:column; gap:9px; }
.tf-overlay .tf-radio{
    display:flex;
    align-items:center;
    gap:9px;
    flex-wrap:wrap;
    font-size:13.5px;
    color:var(--tf-text);
    cursor:pointer;
}
.tf-overlay .tf-radio input[type=radio]{
    -webkit-appearance:auto;
    appearance:auto;
    width:16px; height:16px;
    margin:0;
    flex-shrink:0;
    cursor:pointer;
    accent-color:var(--tf-accent);
}
.tf-overlay .tf-radio input[type=radio]::before{ content:none; }

/* ── Rappels ────────────────────────────────────────────────── */
.tf-overlay .tf-reminders{
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid #f3f4f6;
}
.tf-overlay .tf-reminders-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:8px;
}
.tf-overlay .tf-add-reminder{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:4px 10px;
    font-size:12px;
    font-weight:600;
    line-height:1.4;
    color:var(--tf-accent);
    background:none;
    border:1px dashed var(--tf-accent);
    border-radius:6px;
    cursor:pointer;
    transition:background .15s;
}
.tf-overlay .tf-add-reminder:hover{ background:rgba(var(--tf-accent-rgb),.06); }
.tf-overlay .tf-reminders-list{ display:flex; flex-direction:column; gap:6px; }
.tf-overlay .tf-reminder-row{ display:flex; align-items:center; gap:6px; }
.tf-overlay .tf-reminder-type{ flex:1; min-width:0; }
.tf-overlay .tf-reminder-offset{ flex:0 0 64px; min-width:0; text-align:center; }
.tf-overlay .tf-reminder-unit{ flex-shrink:0; font-size:13px; color:var(--tf-text-soft); white-space:nowrap; }
.tf-overlay .tf-reminder-remove{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:28px; height:28px;
    padding:0;
    border:none;
    border-radius:4px;
    background:none;
    color:#9ca3af;
    font-size:20px;
    line-height:1;
    cursor:pointer;
    transition:color .15s, background .15s;
}
.tf-overlay .tf-reminder-remove:hover{ color:var(--tf-danger); background:rgba(220,38,38,.08); }

/* ── Boutons ────────────────────────────────────────────────────
   !important : neutralise les styles de bouton des thèmes WordPress
   et de wp-admin (.wp-core-ui .button…)
   ------------------------------------------------------------- */
.tf-overlay .tf-btn{
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:8px 16px !important;
    border:none !important;
    border-radius:var(--tf-radius-sm) !important;
    font-family:var(--tf-font) !important;
    font-size:13px !important;
    font-weight:600 !important;
    line-height:1.4 !important;
    white-space:nowrap !important;
    text-decoration:none !important;
    text-shadow:none !important;
    box-shadow:none !important;
    cursor:pointer !important;
    transition:all .2s !important;
}
.tf-overlay .tf-btn--primary{ background:var(--tf-accent) !important; color:#fff !important; }
.tf-overlay .tf-btn--primary:hover{
    background:var(--tf-accent-dark) !important;
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(var(--tf-accent-rgb),.28) !important;
}
.tf-overlay .tf-btn--secondary{
    background:#fff !important;
    color:var(--tf-text) !important;
    border:1.5px solid var(--tf-border) !important;
}
.tf-overlay .tf-btn--secondary:hover{
    border-color:var(--tf-accent) !important;
    color:var(--tf-accent) !important;
}
.tf-overlay .tf-btn--danger{ background:var(--tf-danger) !important; color:#fff !important; }
.tf-overlay .tf-btn--danger:hover{ background:var(--tf-danger-dark) !important; }
.tf-overlay .tf-btn--outline-accent{
    background:transparent !important;
    color:var(--tf-accent) !important;
    border:1px solid var(--tf-accent) !important;
}
.tf-overlay .tf-btn--outline-accent:hover{ background:rgba(var(--tf-accent-rgb),.07) !important; }
.tf-overlay .tf-btn--outline-danger{
    background:transparent !important;
    color:var(--tf-danger) !important;
    border:1px solid var(--tf-danger) !important;
}
.tf-overlay .tf-btn--outline-danger:hover{ background:rgba(220,38,38,.07) !important; }
.tf-overlay .tf-btn[disabled]{ opacity:.55 !important; cursor:not-allowed !important; transform:none !important; }

/* ── Notices ────────────────────────────────────────────────── */
.tf-overlay .tf-notice{
    display:flex;
    align-items:flex-start;
    gap:8px;
    padding:11px 16px;
    border-radius:var(--tf-radius-sm);
    font-size:13px;
    line-height:1.5;
}
.tf-overlay .tf-notice--success{ background:#F0FDF4; color:#166534; border-left:3px solid #16A34A; }
.tf-overlay .tf-notice--danger { background:#FEF2F2; color:#991B1B; border-left:3px solid #DC2626; }
.tf-overlay .tf-notice--info   { background:var(--tf-tint-50); color:var(--tf-accent-deep); border-left:3px solid var(--tf-accent); }
.tf-overlay .tf-notice--warning{ background:#FFFBEB; color:#92400E; border-left:3px solid #D97706; }