/* ============================================================
   HORIZON PROJECT MANAGER — CSS v2.0
   Sprints 1-4
   ============================================================ */

#hpm-frontend-app {
    --hpm-accent:    var(--hpm-t-1a56db,#1a56db);
    --hpm-accent-lt: rgba(26,86,219,.1);
    --hpm-success:   #27ae60;
    --hpm-danger:    #e74c3c;
    --hpm-warning:   #f39c12;
    --hpm-info:      #3498db;
    --hpm-bg:        var(--hpm-t-f0f4ff,#f0f4ff);
    --hpm-bg-card:   #ffffff;
    --hpm-border:    var(--hpm-t-d4e0f7,#d4e0f7);
    --hpm-text:      #1a2a4a;
    --hpm-muted:     #6080b0;
    --hpm-shadow:    0 2px 12px rgba(26,86,219,.1);
    --hpm-radius:    8px;
    --hpm-sidebar-w: 230px;
    --hpm-topbar-h:  52px;
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; }
#hpm-frontend-app {
    font-family:'Segoe UI',system-ui,Arial,sans-serif;
    font-size:14px;
    color:var(--hpm-text);
    background:var(--hpm-bg,var(--hpm-t-f0f4ff,#f0f4ff));
    min-height:auto;
}

/* ── ADMIN LAYOUT ── */

.hpm-sb-top {
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 12px;border-bottom:1px solid rgba(255,255,255,.15);
    flex-shrink:0;
}
.hpm-logo { display:flex;align-items:center;gap:8px;color:#fff;font-weight:700;font-size:15px; }
.hpm-logo-icon { font-size:18px;flex-shrink:0; }

.hpm-nav { flex:1;padding:8px 0;overflow-y:auto; }
.hpm-nav-item {
    display:flex;align-items:center;gap:10px;padding:10px 14px;
    color:rgba(255,255,255,.8);cursor:pointer;border-radius:6px;
    margin:2px 8px;text-decoration:none;transition:background .15s;white-space:nowrap;
}
.hpm-nav-item:hover,.hpm-nav-item.active { background:rgba(255,255,255,.2);color:#fff; }
.hpm-nav-ico { font-size:16px;flex-shrink:0;width:20px;text-align:center; }

.hpm-sb-foot {
    padding:12px;border-top:1px solid rgba(255,255,255,.15);
    display:flex;gap:8px;flex-shrink:0;
}
.hpm-sb-btn {
    background:rgba(255,255,255,.15);border:none;color:#fff;
    cursor:pointer;border-radius:4px;padding:5px 8px;font-size:15px;
}
.hpm-sb-btn:hover { background:rgba(255,255,255,.3); }

/* ── FRONTEND LAYOUT ── */
#hpm-frontend-app { width:100%;min-height:100vh; }

/* Toolbar frontend — s'intègre dans le flux du thème */

.hpm-tabs {
    display:flex;align-items:center;flex:1;
    overflow-x:auto;scrollbar-width:none;gap:0;
}
.hpm-tabs::-webkit-scrollbar { display:none; }

/* ── TOPBAR (admin) ── */
.hpm-topbar {
    height:var(--hpm-topbar-h);background:var(--hpm-bg-card);
    border-bottom:1px solid var(--hpm-border);
    display:flex;align-items:center;padding:0 24px;gap:16px;
    position:sticky;top:0;z-index:100;box-shadow:var(--hpm-shadow);
    flex-shrink:0;
}

/* ── VIEW ── */
.hpm-view { flex:1;padding:24px;overflow-x:hidden;background:transparent; }

/* ── TYPOGRAPHY ── */
.hpm-text-sm { font-size:12px; }
.hpm-muted { color:var(--hpm-muted); }

/* ── BUTTONS ── */
.hpm-btn {
    display:inline-flex;align-items:center;gap:6px;padding:8px 16px;
    border-radius:6px;border:none;cursor:pointer;font-size:13px;
    font-weight:500;transition:all .15s;white-space:nowrap;text-decoration:none;
}
.hpm-btn-primary { background:var(--hpm-accent);color:#fff; }
.hpm-btn-primary:hover { background:var(--hpm-t-1347b0,#1347b0); }
.hpm-btn-ghost { background:transparent;color:var(--hpm-text);border:1px solid var(--hpm-border); }
.hpm-btn-ghost:hover { background:var(--hpm-accent-lt); }
.hpm-btn-danger { background:var(--hpm-danger);color:#fff; }
.hpm-btn-danger:hover { background:#c0392b; }
.hpm-btn-sm { padding:5px 10px;font-size:12px; }
.hpm-btn-xs { padding:3px 8px;font-size:11px; }
.hpm-icon-btn { background:none;border:none;cursor:pointer;font-size:16px;padding:4px;border-radius:4px; }
.hpm-icon-btn:hover { background:var(--hpm-accent-lt); }

/* ── INPUTS ── */
.hpm-input {
    width:100%;padding:8px 12px;border:1px solid var(--hpm-border);
    border-radius:6px;font-size:13px;background:var(--hpm-bg-card);
    color:var(--hpm-text);transition:border-color .15s;outline:none;
}
.hpm-input:focus { border-color:var(--hpm-accent);box-shadow:0 0 0 3px var(--hpm-accent-lt); }
.hpm-input-sm { padding:5px 8px;font-size:12px;width:auto; }

/* ── BADGES ── */
.hpm-badge { display:inline-block;padding:3px 8px;border-radius:20px;font-size:11px;font-weight:600;color:#fff;white-space:nowrap; }

/* ── KPI ── */

.hpm-kpi { flex:1;min-width:110px;background:var(--hpm-bg-card);border:1px solid var(--hpm-border);border-radius:var(--hpm-radius);padding:20px 16px;text-align:center;box-shadow:var(--hpm-shadow); }

/* Boutons d'action */
.hpm-card-acts {
    position:absolute;top:10px;right:8px;display:flex;gap:2px;
    opacity:0;transition:opacity .15s;z-index:2;
    background:rgba(255,255,255,.9);border-radius:6px;padding:2px 4px;
}

/* ── KANBAN ── */
.hpm-kanban { display:flex;gap:14px;overflow-x:auto;padding-bottom:16px;align-items:flex-start;max-height:calc(100vh - 180px); }

/* ── GANTT ── */
.hpm-gantt { display:flex;border:1px solid var(--hpm-border);border-radius:var(--hpm-radius);background:var(--hpm-bg-card);overflow:hidden;max-height:calc(100vh - 200px); }

/* ── TABLE ── */
.hpm-table-wrap { overflow-x:auto; }
.hpm-table { width:100%;border-collapse:collapse;background:var(--hpm-bg-card);border-radius:var(--hpm-radius);overflow:hidden;box-shadow:var(--hpm-shadow); }
.hpm-table th { background:var(--hpm-accent);color:#fff;padding:12px 16px;text-align:left;font-size:13px;font-weight:600; }
.hpm-table td { padding:10px 16px;border-bottom:1px solid var(--hpm-border);font-size:13px;vertical-align:middle; }
.hpm-table tr:last-child td { border-bottom:none; }
.hpm-table tr:hover td { background:var(--hpm-accent-lt); }

/* ── MODALS ── */
.hpm-modal-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;align-items:center;justify-content:center;padding:20px; }
.hpm-modal-overlay.open { display:flex; }
.hpm-modal { background:var(--hpm-bg-card);border-radius:var(--hpm-radius);width:100%;max-width:540px;max-height:90vh;overflow-y:auto;box-shadow:0 16px 48px rgba(0,0,0,.2);display:flex;flex-direction:column; }
.hpm-modal-lg { max-width:720px; }

.hpm-modal-hd { padding:16px 20px;border-bottom:1px solid var(--hpm-border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0; }
.hpm-modal-hd h3 { margin:0;font-size:16px; }
.hpm-modal-bd { padding:20px;flex:1;overflow-y:auto; }
.hpm-modal-ft { padding:14px 20px;border-top:1px solid var(--hpm-border);display:flex;justify-content:flex-end;gap:8px;flex-shrink:0; }

/* ── COMMENTS ── */

.hpm-comment { padding:10px;background:var(--hpm-bg);border-radius:6px;margin-bottom:8px; }

/* ── CALENDAR ── */

.hpm-cal-hd { background:var(--hpm-accent);color:#fff;text-align:center;padding:8px 4px;font-size:12px;font-weight:700; }
.hpm-cal-cell { background:var(--hpm-bg-card);min-height:80px;padding:5px;font-size:12px; }
.hpm-cal-cell.hpm-cal-empty { background:var(--hpm-bg); }
.hpm-cal-cell.hpm-cal-today { background:rgba(26,86,219,.05); }
.hpm-cal-dn { font-weight:700;color:var(--hpm-text);margin-bottom:3px;display:inline-block;width:22px;height:22px;text-align:center;line-height:22px;border-radius:50%;font-size:12px; }
.hpm-cal-dn.today { background:var(--hpm-accent);color:#fff; }
.hpm-cal-ev { font-size:10px;color:#fff;padding:2px 4px;border-radius:3px;margin-bottom:2px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.hpm-cal-ev:hover { opacity:.8; }
.hpm-cal-more { font-size:10px;color:var(--hpm-muted); }

/* ── TOASTS ── */
.hpm-toasts { position:fixed;bottom:24px;right:24px;z-index:99999;display:flex;flex-direction:column;gap:8px; }
.hpm-toast { display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:8px;font-size:13px;font-weight:500;box-shadow:0 4px 16px rgba(0,0,0,.15);animation:hpm-slide-in .3s ease;min-width:240px; }
.hpm-toast-success { background:var(--hpm-success);color:#fff; }
.hpm-toast-error   { background:var(--hpm-danger);color:#fff; }
.hpm-toast button { background:none;border:none;color:#fff;cursor:pointer;font-size:16px;margin-left:auto; }
@keyframes hpm-slide-in { from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1} }

/* ── SPINNERS ── */
.hpm-spinner-sm { width:20px;height:20px;border:3px solid var(--hpm-accent-lt);border-top-color:var(--hpm-accent);border-radius:50%;animation:hpm-spin .8s linear infinite;display:inline-block; }
@keyframes hpm-spin { to{transform:rotate(360deg)} }

/* ── RESPONSIVE ── */
@media(max-width:900px){
    
    .hpm-nav-lbl,.hpm-logo-txt { display:none; }
    
}

/* Vue mois — plus grande */
.hpm-cal-grid-month {
    display:grid; grid-template-columns:repeat(7,1fr);
    gap:2px; background:var(--hpm-border);
    border:1px solid var(--hpm-border); border-radius:var(--hpm-radius);
    overflow:hidden;
}
.hpm-cal-grid-month .hpm-cal-hd {
    background:var(--hpm-accent); color:#fff;
    text-align:center; padding:10px 4px;
    font-size:12px; font-weight:700;
}
.hpm-cal-grid-month .hpm-cal-cell {
    background:var(--hpm-bg-card); min-height:160px;
    padding:6px; font-size:12px; cursor:pointer;
    transition:background .1s;
}
.hpm-cal-grid-month .hpm-cal-cell:hover { background:var(--hpm-accent-lt); }
.hpm-cal-grid-month .hpm-cal-cell.hpm-cal-empty { background:var(--hpm-bg); cursor:default; }
.hpm-cal-grid-month .hpm-cal-cell.hpm-cal-today { background:rgba(26,86,219,.06); }

/* Vue semaine */
.hpm-cal-grid-week {
    display:grid; grid-template-columns:repeat(7,1fr);
    gap:2px; background:var(--hpm-border);
    border:1px solid var(--hpm-border); border-radius:var(--hpm-radius);
    overflow:hidden; min-height:600px;
}
.hpm-cal-week-col {
    background:var(--hpm-bg-card); cursor:pointer;
    transition:background .1s;
}
.hpm-cal-week-col:hover { background:var(--hpm-accent-lt); }
.hpm-cal-week-col.hpm-cal-today { background:rgba(26,86,219,.06); }
.hpm-cal-week-hd {
    padding:10px 8px; text-align:center;
    border-bottom:2px solid var(--hpm-border);
    font-size:12px; font-weight:600; color:var(--hpm-muted);
}
.hpm-cal-week-hd.today { color:var(--hpm-accent); }
.hpm-cal-week-body { padding:6px; min-height:500px; }

/* Vue jour */
.hpm-cal-day-view {
    background:var(--hpm-bg-card); border:1px solid var(--hpm-border);
    border-radius:var(--hpm-radius); min-height:600px; cursor:pointer;
}
.hpm-cal-day-header {
    padding:16px 20px; border-bottom:1px solid var(--hpm-border);
    font-size:14px; background:var(--hpm-bg);
}
.hpm-cal-day-header.today { background:rgba(26,86,219,.06); }
.hpm-cal-day-tasks { padding:16px; display:flex; flex-direction:column; gap:10px; }
.hpm-cal-day-task {
    background:var(--hpm-bg); padding:12px 16px;
    border-radius:6px; cursor:pointer;
    display:flex; flex-direction:column; gap:4px;
    transition:box-shadow .15s;
}
.hpm-cal-day-task:hover { box-shadow:var(--hpm-shadow); }

/* Vue année */
.hpm-cal-year-grid {
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:12px;
}
.hpm-cal-year-month {
    background:var(--hpm-bg-card); border:1px solid var(--hpm-border);
    border-radius:var(--hpm-radius); padding:20px;
    text-align:center; cursor:pointer;
    transition:box-shadow .15s, transform .15s;
}
.hpm-cal-year-month:hover {
    box-shadow:var(--hpm-shadow); transform:translateY(-2px);
    border-color:var(--hpm-accent);
}
.hpm-cal-year-mname { font-size:15px; font-weight:700; margin-bottom:8px; }
.hpm-cal-year-count { min-height:24px; }

@media(max-width:768px){
    .hpm-cal-year-grid { grid-template-columns:repeat(3,1fr); }
    .hpm-cal-grid-week { grid-template-columns:repeat(7,1fr); }
}

/* ═══ IMAGE COUVERTURE — CHAMP DANS MODALE ═══ */

#proj-cover-preview img {
    max-height: 90px;
    border-radius: 6px;
    display: block;
    margin-top: 6px;
    border: 1px solid var(--hpm-border);
}

/* Modal large */
.hpm-modal-lg { width: min(780px, 96vw) !important; max-height: 88vh; overflow-y: auto; }

/* KPIs cliquables */
.hpm-kpi[style*="cursor:pointer"]:hover {
    background: var(--hpm-accent-lt);
    transform: translateY(-2px);
    box-shadow: var(--hpm-shadow);
}

/* Chat Sidebar */
#btn-chat-sb{transition:background .15s;}

/* ═══ Notifications améliorées ═══ */

/* ═══ Pagination ═══ */
.hpm-pagination { display:flex;align-items:center;justify-content:center;gap:4px;padding:16px 0;flex-wrap:wrap; }

.hpm-card-tasks-section { border-top:1px solid var(--hpm-border);margin-top:10px; }
.hpm-card-tasks-hd { display:flex;align-items:center;justify-content:space-between;padding:8px 12px;cursor:pointer;font-size:12px;font-weight:600;color:var(--hpm-muted);user-select:none; }
.hpm-card-tasks-hd:hover { background:var(--hpm-accent-lt);color:var(--hpm-accent); }
.hpm-card-tasks-body { max-height:200px;overflow-y:auto;border-top:1px solid var(--hpm-border); }
.hpm-card-task-item { display:flex;align-items:flex-start;gap:6px;padding:6px 12px;font-size:12px;cursor:pointer;border-bottom:1px solid var(--hpm-border); }
.hpm-card-task-item:hover { background:var(--hpm-accent-lt); }
.hpm-card-task-title { flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0; }
.hpm-btn-xs { padding:2px 7px;font-size:10px;border-radius:4px; }

/* Fallback si pas de classe cols */
div.hpm-public-projects { display:grid !important; grid-template-columns: repeat(3, 1fr) !important; gap:20px !important; }

@media (max-width: 480px) {
    div.hpm-public-projects { grid-template-columns: 1fr !important; }
}

/* Éléments qui doivent passer AU-DESSUS de la sidebar chat */
.elementor-section, .wp-block-cover, [class*="hero"], [class*="slider"], 
.swiper-container, .slick-slider, .owl-carousel { position: relative; z-index: 999; }

/* ── Le portail des fenêtres (hpm-portail.js, @since 1.4.9) ──────────────
   Les fenêtres sorties de l'application gardent ses couleurs et sa police. */
.hpm-portail {
    --hpm-accent:    var(--hpm-t-1a56db,#1a56db);
    --hpm-accent-lt: rgba(26,86,219,.1);
    --hpm-success:   #27ae60;
    --hpm-danger:    #e74c3c;
    --hpm-warning:   #f39c12;
    --hpm-info:      #3498db;
    --hpm-bg:        var(--hpm-t-f0f4ff,#f0f4ff);
    --hpm-bg-card:   #ffffff;
    --hpm-border:    var(--hpm-t-d4e0f7,#d4e0f7);
    --hpm-text:      #1a2a4a;
    --hpm-muted:     #6080b0;
    --hpm-shadow:    0 2px 12px rgba(26,86,219,.1);
    --hpm-radius:    8px;
    font-family:'Segoe UI',system-ui,Arial,sans-serif;
    font-size:14px;
    color:var(--hpm-text);
}
.hpm-portail .hpm-modal-overlay { z-index:2147483000; }
.hpm-portail .hpm-toasts { z-index:2147483001; }

/* Le panneau des commentaires : bandeau et bouton au dégradé signature
   (`[Kad]` 25/09). Posé aussi en style direct par hpm-portail.js. @since 1.4.11 */

select#task-project-id:disabled { opacity:1; background:#f3f4f6; color:var(--hpm-t-374151,#374151); cursor:not-allowed; }

/* Le bandeau des fenêtres au dégradé signature, texte blanc (`[Kad]` 25/09). @since 1.4.14 */
.hpm-modal-overlay .hpm-modal-hd { background:linear-gradient(135deg,var(--hpm-t-0068e8,#0068E8) 0%,var(--hpm-t-8224e3,#8224E3) 100%) !important; border-bottom:none !important; }
.hpm-modal-overlay .hpm-modal-hd h3,
.hpm-modal-overlay .hpm-modal-hd .hpm-icon-btn { color:#fff !important; }
.hpm-modal-overlay .hpm-modal-hd .hpm-icon-btn:hover { background:rgba(255,255,255,.18) !important; }
/* 2.0.0-alpha.44 (Kad, 1/10) : la médiathèque choisie depuis « Modifier le projet » passe au-dessus du formulaire. */
body.hpm-media-dessus .media-modal{z-index:2147483300 !important}
body.hpm-media-dessus .media-modal-backdrop{z-index:2147483290 !important}