/* ============================================================  
   PLANNER — Ma Journée  
   ============================================================ */

/* Layout top row */  
.planner-top-row {  
  display: grid;  
  grid-template-columns: 280px 1fr 280px;  
  gap: 18px;  
  margin-bottom: 18px;  
}

/* Card générique planner */  
.planner-card {  
  background: var(--card);  
  border-radius: var(--radius);  
  box-shadow: var(--shadow);  
  padding: 20px;  
  display: flex;  
  flex-direction: column;  
  gap: 12px;  
  margin-bottom: 18px;  
}

.planner-card-title {  
  font-size: .92rem;  
  font-weight: 700;  
  color: var(--text);  
  display: flex;  
  align-items: center;  
  gap: 8px;  
  padding-bottom: 10px;  
  border-bottom: 1px solid var(--border);  
}

/* ============================================================  
   KNOB — Potard énergie  
   ============================================================ */  
.energy-card {  
  align-items: center;  
}

.knob-wrap {  
  position: relative;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  margin: 4px 0;  
}

.knob-value-label {  
  position: absolute;  
  font-size: 1.6rem;  
  font-weight: 800;  
  color: var(--primary);  
  pointer-events: none;  
  user-select: none;  
}

#energyKnob {  
  cursor: pointer;  
  touch-action: none;  
}

.energy-labels {  
  display: flex;  
  justify-content: space-between;  
  width: 100%;  
  font-size: .72rem;  
  color: var(--muted);  
  margin-top: -4px;  
}

.energy-mood-row {  
  display: flex;  
  align-items: center;  
  gap: 10px;  
  width: 100%;  
}

.mood-label {  
  font-size: .82rem;  
  font-weight: 600;  
  color: var(--muted);  
  white-space: nowrap;  
}

.energy-mood-row select {  
  flex: 1;  
  border: 1px solid var(--border);  
  border-radius: 8px;  
  padding: 7px 10px;  
  font-size: .85rem;  
  background: var(--bg);  
  color: var(--text);  
  outline: none;  
}

/* ============================================================  
   KPI CARD  
   ============================================================ */  
.kpi-list {  
  display: flex;  
  flex-direction: column;  
  gap: 12px;  
  flex: 1;  
}

.kpi-item {  
  background: var(--bg);  
  border-radius: 8px;  
  padding: 12px 14px;  
  display: flex;  
  flex-direction: column;  
  gap: 6px;  
  position: relative;  
}

.kpi-item-header {  
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
  gap: 8px;  
}

.kpi-item-name {  
  font-size: .88rem;  
  font-weight: 600;  
  color: var(--text);  
  flex: 1;  
}

.kpi-item-count {  
  display: flex;  
  align-items: center;  
  gap: 6px;  
  font-size: .85rem;  
  color: var(--muted);  
}

.kpi-count-input {  
  width: 52px;  
  border: 1px solid var(--border);  
  border-radius: 6px;  
  padding: 3px 6px;  
  font-size: .88rem;  
  text-align: center;  
  background: #fff;  
  font-weight: 700;  
  color: var(--text);  
}

.kpi-bar-bg {  
  height: 8px;  
  background: var(--border);  
  border-radius: 99px;  
  overflow: hidden;  
}

.kpi-bar-fill {  
  height: 100%;  
  border-radius: 99px;  
  transition: width .4s ease;  
}

.kpi-status-badge {  
  font-size: .72rem;  
  font-weight: 700;  
  padding: 2px 8px;  
  border-radius: 99px;  
  white-space: nowrap;  
}

.kpi-ahead   { background: #dcfce7; color: #166534; }  
.kpi-ontrack { background: #dbeafe; color: #1e40af; }  
.kpi-behind  { background: #fef3c7; color: #92400e; }  
.kpi-danger  { background: #fee2e2; color: #991b1b; }

.kpi-global-bar-wrap {  
  margin-top: 4px;  
  padding-top: 12px;  
  border-top: 1px solid var(--border);  
}

.kpi-global-label {  
  font-size: .78rem;  
  color: var(--muted);  
  font-weight: 600;  
  margin-bottom: 6px;  
  text-transform: uppercase;  
  letter-spacing: .04em;  
}

.kpi-global-bar-bg {  
  height: 12px;  
  background: var(--border);  
  border-radius: 99px;  
  overflow: hidden;  
}

.kpi-global-bar-fill {  
  height: 100%;  
  background: linear-gradient(90deg, var(--primary), var(--accent));  
  border-radius: 99px;  
  transition: width .5s ease;  
}

.kpi-global-pct {  
  font-size: 1.1rem;  
  font-weight: 800;  
  color: var(--primary);  
  margin-top: 4px;  
  text-align: right;  
}

/* ============================================================  
   OUTLOOK CARD  
   ============================================================ */  
.outlook-card {  
  min-height: 200px;  
}

.outlook-status {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  gap: 6px;  
  padding: 14px;  
  border-radius: 8px;  
  font-size: .85rem;  
  font-weight: 600;  
  text-align: center;  
}

.outlook-disconnected {  
  background: #f1f5f9;  
  color: var(--muted);  
}

.outlook-connected {  
  background: #dcfce7;  
  color: #166534;  
}

.outlook-input {  
  border: 1px solid var(--border);  
  border-radius: 8px;  
  padding: 8px 12px;  
  font-size: .85rem;  
  width: 100%;  
  outline: none;  
  transition: border-color .2s;  
  background: var(--bg);  
}

.outlook-input:focus { border-color: var(--primary); }

.outlook-events-list {  
  display: flex;  
  flex-direction: column;  
  gap: 6px;  
  margin-top: 4px;  
  max-height: 200px;  
  overflow-y: auto;  
}

.outlook-event-item {  
  background: #eef2ff;  
  border-left: 3px solid var(--primary);  
  border-radius: 6px;  
  padding: 7px 10px;  
  font-size: .8rem;  
}

.outlook-event-time {  
  font-weight: 700;  
  color: var(--primary);  
  margin-bottom: 2px;  
}

.outlook-event-title {  
  color: var(--text);  
}

/* ============================================================  
   AI BANNER  
   ============================================================ */  
.planner-ai-banner {  
  display: flex;  
  align-items: flex-start;  
  gap: 14px;  
  background: linear-gradient(135deg, #eef2ff, #f0fdf4);  
  border: 1px solid #c7d2fe;  
  border-radius: var(--radius);  
  padding: 16px 20px;  
  margin-bottom: 18px;  
}

.ai-icon {  
  font-size: 1.8rem;  
  flex-shrink: 0;  
  line-height: 1;  
}

.ai-text {  
  font-size: .9rem;  
  color: var(--text);  
  line-height: 1.55;  
}

/* ============================================================  
   KPI NOTIFICATION BAR  
   ============================================================ */  
.kpi-notif-bar {  
  border-radius: var(--radius);  
  padding: 12px 18px;  
  margin-bottom: 18px;  
  font-size: .88rem;  
  font-weight: 600;  
  display: flex;  
  align-items: center;  
  gap: 10px;  
}

.kpi-notif-ahead  { background: #dcfce7; color: #166534; border-left: 4px solid var(--success); }  
.kpi-notif-behind { background: #fef3c7; color: #92400e; border-left: 4px solid var(--warn); }  
.kpi-notif-danger { background: #fee2e2; color: #991b1b; border-left: 4px solid var(--danger); }

/* ============================================================  
   DAILY SCHEDULE  
   ============================================================ */  
.daily-schedule {  
  display: flex;  
  flex-direction: column;  
  gap: 0;  
}

.schedule-empty {  
  text-align: center;  
  color: var(--muted);  
  padding: 40px 20px;  
  font-size: .95rem;  
}

.schedule-slot {  
  display: flex;  
  align-items: stretch;  
  border-bottom: 1px solid var(--border);  
  min-height: 56px;  
  transition: background .15s;  
}

.schedule-slot:last-child { border-bottom: none; }  
.schedule-slot:hover { background: #f8faff; }

.slot-time {  
  width: 80px;  
  min-width: 80px;  
  font-size: .78rem;  
  font-weight: 700;  
  color: var(--muted);  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  border-right: 2px solid var(--border);  
  padding: 8px 4px;  
  text-align: center;  
}

.slot-body {  
  flex: 1;  
  padding: 10px 16px;  
  display: flex;  
  flex-direction: column;  
  justify-content: center;  
  gap: 3px;  
}

.slot-label {  
  font-size: .88rem;  
  font-weight: 700;  
  display: flex;  
  align-items: center;  
  gap: 8px;  
}

.slot-desc {  
  font-size: .78rem;  
  color: var(--muted);  
}

.slot-actions {  
  display: flex;  
  align-items: center;  
  gap: 6px;  
  padding: 8px 12px;  
}

/* Couleurs par type de créneau */  
.slot-type-prospection  { border-left: 4px solid var(--primary); }  
.slot-type-telephonique { border-left: 4px solid var(--accent); }  
.slot-type-lead         { border-left: 4px solid #7c3aed; }  
.slot-type-pause        { border-left: 4px solid var(--success); background: #f0fdf4; }  
.slot-type-admin        { border-left: 4px solid var(--muted); background: #f8fafc; }  
.slot-type-rdv          { border-left: 4px solid var(--warn); background: #fffbeb; }  
.slot-type-focus        { border-left: 4px solid #ec4899; background: #fdf2f8; }  
.slot-type-outlook      { border-left: 4px solid #0ea5e9; background: #f0f9ff; }

.slot-done {  
  opacity: .55;  
  text-decoration: line-through;  
}

.slot-check {  
  width: 22px;  
  height: 22px;  
  border-radius: 50%;  
  border: 2px solid var(--border);  
  background: #fff;  
  cursor: pointer;  
  flex-shrink: 0;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  font-size: .8rem;  
  transition: all .2s;  
}

.slot-check.checked {  
  background: var(--success);  
  border-color: var(--success);  
  color: #fff;  
}

/* ============================================================  
   WEEK VIEW  
   ============================================================ */  
.week-schedule {  
  display: grid;  
  grid-template-columns: repeat(5, 1fr);  
  gap: 10px;  
}

.week-day-col {  
  background: var(--bg);  
  border-radius: 8px;  
  padding: 10px;  
  display: flex;  
  flex-direction: column;  
  gap: 6px;  
}

.week-day-header {  
  font-size: .82rem;  
  font-weight: 700;  
  color: var(--primary);  
  text-align: center;  
  padding-bottom: 6px;  
  border-bottom: 1px solid var(--border);  
}

.week-day-header.today { color: var(--accent); }

.week-slot-mini {  
  background: var(--card);  
  border-radius: 6px;  
  padding: 6px 8px;  
  font-size: .72rem;  
  border-left: 3px solid var(--primary);  
  line-height: 1.3;  
}

.week-slot-mini.type-pause        { border-left-color: var(--success); }  
.week-slot-mini.type-telephonique { border-left-color: var(--accent); }  
.week-slot-mini.type-lead         { border-left-color: #7c3aed; }  
.week-slot-mini.type-rdv          { border-left-color: var(--warn); }  
.week-slot-mini.type-admin        { border-left-color: var(--muted); }  
.week-slot-mini.type-focus        { border-left-color: #ec4899; }

/* ============================================================  
   KPI SETTINGS MODAL  
   ============================================================ */  
.kpi-settings-list {  
  display: flex;  
  flex-direction: column;  
  gap: 12px;  
  max-height: 400px;  
  overflow-y: auto;  
}

.kpi-setting-row {  
  display: grid;  
  grid-template-columns: 1fr auto auto auto;  
  gap: 8px;  
  align-items: center;  
  background: var(--bg);  
  border-radius: 8px;  
  padding: 10px 12px;  
}

.kpi-setting-row input[type="text"] {  
  border: 1px solid var(--border);  
  border-radius: 6px;  
  padding: 7px 10px;  
  font-size: .88rem;  
  background: #fff;  
  outline: none;  
}

.kpi-setting-row input[type="text"]:focus { border-color: var(--primary); }

.kpi-setting-row select {  
  border: 1px solid var(--border);  
  border-radius: 6px;  
  padding: 7px 8px;  
  font-size: .82rem;  
  background: #fff;  
  outline: none;  
}

.kpi-target-input {  
  width: 64px;  
  border: 1px solid var(--border);  
  border-radius: 6px;  
  padding: 7px 8px;  
  font-size: .88rem;  
  text-align: center;  
  background: #fff;  
  font-weight: 700;  
  outline: none;  
}

.kpi-target-input:focus { border-color: var(--primary); }

/* ============================================================  
   RESPONSIVE  
   ============================================================ */  
@media (max-width: 1100px) {  
  .planner-top-row {  
    grid-template-columns: 1fr 1fr;  
  }  
  .outlook-card { grid-column: 1 / -1; }  
}

@media (max-width: 768px) {  
  .planner-top-row { grid-template-columns: 1fr; }  
  .week-schedule   { grid-template-columns: 1fr; }  
}