/* ─── Page Impressions ──────────────────────────────────────────────── */

.imp-body {
  display: flex;
  flex-direction: row;
  height: calc(100vh - var(--header-h) - 42px); /* 42px = log bar */
  overflow: hidden;
}

/* ── Sidebar filtres ── */
.imp-sidebar {
  width: 270px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--surface);
}

.imp-section {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.imp-section:last-child { border-bottom: none; }
.imp-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-2);
  margin-bottom: 8px;
}

/* Format buttons */
.imp-format-btns {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.imp-fmt-btn {
  padding: 8px 12px;
  border-radius: 8px;
  border: 2px solid var(--border);
  background: var(--bg);
  color: var(--text-1);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s;
}
.imp-fmt-btn:hover { border-color: #9fa8da; background: #f3f4fd; }
.imp-fmt-btn.active { border-color: #1a237e; background: #e8eaf6; color: #1a237e; }

/* Select */
.imp-select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text-1);
  font-size: 13px;
}

/* Period shortcuts */
.imp-period-shortcuts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}
.imp-shortcut {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-1);
  font-size: 12px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.imp-shortcut:hover { background: #f3f4fd; border-color: #9fa8da; }
.imp-shortcut.active { background: #e8eaf6; border-color: #1a237e; color: #1a237e; font-weight: 700; }

/* Date fields */
.imp-date-row { display: flex; gap: 8px; }
.imp-field { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.imp-field label { font-size: 11px; color: var(--text-2); font-weight: 600; }
.imp-input {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text-1);
  font-size: 13px;
  width: 100%;
}

/* Employee list */
.imp-emp-section { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.imp-emp-list {
  overflow-y: auto;
  max-height: 240px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.imp-emp-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .1s;
}
.imp-emp-item:hover { background: var(--bg); }
.imp-emp-item input[type=checkbox] { accent-color: #1a237e; cursor: pointer; }
.imp-emp-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.imp-emp-name { font-size: 13px; color: var(--text-1); }

.imp-link {
  background: none; border: none;
  color: #1a237e; font-size: 12px;
  cursor: pointer; padding: 0;
  text-decoration: underline;
}
.imp-link:hover { opacity: .7; }

/* ── Main preview ── */
.imp-main {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: var(--bg);
}

.imp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-2);
  gap: 12px;
}
.imp-empty-icon { font-size: 48px; opacity: .4; }
.imp-empty-title { font-size: 14px; }
.hidden { display: none !important; }

.imp-preview {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
  min-height: 200px;
}

/* ─── Format "Par employé" ─── */
.pe-page {
  padding: 24px 28px;
}
.pe-header {
  border: 1.5px solid #1a3a5c;
  border-radius: 3px;
  padding: 10px 14px;
  margin-bottom: 16px;
  background: #fff;
}
.pe-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.pe-title    { font-size: 14px; font-weight: 700; color: #1a3a5c; }
.pe-org      { font-size: 11px; color: #444; text-align: right; font-weight: 700; }
.pe-subtitle { font-size: 10px; color: #777; font-style: italic; margin-top: 3px; }
.pe-period   { font-size: 11px; color: #1a3a5c; margin-top: 5px; font-weight: 600; }
.pe-date-print { font-size: 10px; color: #666; font-style: italic; margin-top: 3px; text-align: right; }

.pe-employee {
  margin-bottom: 20px;
  break-inside: avoid;
  page-break-inside: avoid;
}
.pe-emp-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #1a237e;
  padding: 6px 0 6px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 0;
}
.pe-emp-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pe-emp-svc {
  font-size: 11px;
  font-weight: 400;
  color: #777;
  margin-left: 4px;
}

.pe-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.pe-table th {
  background: #f0f2ff;
  color: #1a237e;
  font-weight: 700;
  padding: 6px 10px;
  text-align: left;
  border: 1px solid #dce0f0;
}
.pe-table td {
  padding: 5px 10px;
  border: 1px solid #e8eaf0;
  vertical-align: top;
}
.pe-table tr:nth-child(even) td { background: #fafbff; }
.pe-table .pe-repos-cell { color: #999; font-style: italic; }
.pe-table .pe-empty-cell { color: #bbb; }

/* ─── Format "Planning classique" ─── */
.pc-page {
  padding: 20px 24px;
}
.pc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}
.pc-title { font-size: 16px; font-weight: 700; color: #1a237e; }
.pc-date-print { font-size: 12px; color: #555; white-space: nowrap; }
.pc-org { font-size: 11px; color: #555; text-align: right; margin-bottom: 2px; }
.pc-subtitle { font-size: 10px; font-style: italic; color: #777; margin-bottom: 10px; }

.pc-week { margin-bottom: 24px; break-inside: avoid; page-break-inside: avoid; }
.pc-week-title {
  font-size: 11px;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

.pc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  table-layout: fixed;
}
.pc-table th {
  background: #1a237e;
  color: #fff;
  font-weight: 700;
  padding: 7px 6px;
  text-align: center;
  border: 1px solid #253380;
  line-height: 1.3;
  font-size: 11px;
}
.pc-table th:first-child {
  width: 120px;
  text-align: left;
  padding-left: 10px;
}
.pc-table td {
  padding: 5px 6px;
  border: 1px solid #d0d4e8;
  vertical-align: top;
  text-align: center;
  min-height: 36px;
}
.pc-table td:first-child {
  font-weight: 700;
  font-size: 11px;
  color: #1a237e;
  text-align: left;
  padding-left: 10px;
  background: #f7f8ff !important;
}
.pc-table tr:nth-child(even) td:first-child { background: #f0f2ff !important; }

.pc-cell-work {
  color: #fff;
  font-weight: 700;
  border-radius: 4px;
  line-height: 1.5;
  font-size: 11px;
}
.pc-cell-repos {
  color: #999;
  font-style: italic;
  font-size: 11px;
}
.pc-cell-repos-badge {
  display: block;
  font-weight: 700;
  font-size: 12px;
  color: #888;
  border: 1.5px solid #ccc;
  border-radius: 4px;
  padding: 2px 6px;
  text-align: center;
  letter-spacing: .04em;
}
.pc-cell-empty { color: #ccc; font-size: 13px; }
.pc-slot { display: block; white-space: nowrap; }

/* ─── Log envois ─── */
.imp-log-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 90;
}
.imp-log-toggle {
  width: 100%;
  padding: 10px 20px;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
}
.imp-log-toggle:hover { background: var(--bg); }
.imp-log-arrow { margin-left: auto; font-size: 11px; }
.imp-log-badge {
  background: #1a237e;
  color: white;
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 11px;
}
.imp-log-body {
  max-height: 240px;
  overflow-y: auto;
  border-top: 1px solid var(--border);
  padding: 8px 20px 12px;
}
.imp-log-actions { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.imp-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.imp-log-table th {
  background: #f0f2ff;
  color: #1a237e;
  font-weight: 700;
  padding: 6px 10px;
  text-align: left;
  border: 1px solid #dce0f0;
}
.imp-log-table td {
  padding: 5px 10px;
  border: 1px solid #e8eaf0;
  vertical-align: top;
}
.imp-log-table tr:nth-child(even) td { background: #fafbff; }
.imp-log-empty { font-size: 12px; color: var(--text-2); padding: 8px 0; }

/* ─── Planning Graphique (vue agenda) ─── */
.pgg-page { padding: 20px 24px; }

.pgg-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.pgg-week {
  margin-bottom: 28px;
  break-inside: avoid;
  page-break-inside: avoid;
}

/* Ligne commune : gutter + colonnes jours */
.pgg-day-row {
  display: flex;
  align-items: stretch;
  border-left: 1px solid #d0d4e8;
}
.pgg-gutter {
  width: 48px;
  flex-shrink: 0;
  border-right: 1px solid #d0d4e8;
}
.pgg-gutter-repos {
  font-size: 9px;
  color: #aaa;
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: .04em;
  background: #fafbff;
}

/* En-têtes jours */
.pgg-day-hdr {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 4px;
  border-right: 1px solid #d0d4e8;
  background: #1a237e;
}
.pgg-dname { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.75); }
.pgg-dnum  { font-size: 13px; font-weight: 700; color: #fff; }

/* Bandeau repos */
.pgg-repos-row { border-top: 1px solid #d0d4e8; }
.pgg-repos-cell {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px 4px;
  min-height: 22px;
  border-right: 1px solid #d0d4e8;
  align-content: flex-start;
}
.pgg-rchip {
  display: inline-block;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 3px;
  padding: 1px 5px;
}

/* Corps timeline — table */
.pgg-body-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border-top: 1px solid #d0d4e8;
  border-left: 1px solid #d0d4e8;
}
.pgg-time-td {
  vertical-align: top;
  border-right: 2px solid #d0d4e8;
  background: #fafbff;
  padding: 0;
}
.pgg-time-inner {
  position: relative;
  width: 48px;
}
.pgg-hlbl {
  position: absolute;
  right: 4px;
  font-size: 8px;
  color: #999;
  transform: translateY(-50%);
  white-space: nowrap;
  line-height: 1;
}
.pgg-day-td {
  vertical-align: top;
  border-right: 1px solid #d0d4e8;
  padding: 0;
}
.pgg-day-inner {
  position: relative;
  overflow: hidden;
}

/* Lignes grille */
.pgg-hline {
  position: absolute;
  left: 0; right: 0;
  border-top: 1px solid #e0e3f0;
}
.pgg-qline {
  position: absolute;
  left: 0; right: 0;
  border-top: 1px dashed #f0f0f8;
}

/* Week-end */
.pgg-we { background: rgba(26,35,126,.04); }
.pgg-day-hdr.pgg-we { background: #0d1870; }
.pgg-repos-cell.pgg-we { background: rgba(26,35,126,.04); }
.pgg-day-col.pgg-we    { background: rgba(26,35,126,.04); }

/* Blocs événements */
.pgg-evt {
  position: absolute;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 2px 4px;
  box-sizing: border-box;
  border-left: 2px solid rgba(0,0,0,.15);
}
.pgg-ename {
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.pgg-etime {
  font-size: 8px;
  color: rgba(255,255,255,.85);
  line-height: 1.3;
}
.pgg-j1 {
  font-size: 7px;
  background: rgba(255,255,255,.3);
  border-radius: 2px;
  padding: 0 2px;
  align-self: flex-start;
  margin-bottom: 1px;
}

/* ─── Indicateur J-1 ─── */
.pe-j1-badge {
  display: inline-block;
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ffcc80;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  margin-right: 4px;
  vertical-align: middle;
  white-space: nowrap;
}
.pc-j1 {
  display: inline-block;
  background: rgba(255,255,255,0.3);
  color: #fff;
  border-radius: 3px;
  font-size: 8px;
  font-weight: 700;
  padding: 0 3px;
  margin-right: 2px;
  vertical-align: middle;
}

/* ─── Print styles ─── */
/* ── Format "Par Jour" ── */
.pj-page { font-family: Arial, sans-serif; font-size: 12px; color: #222; }

.pj-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border: 1.5px solid #1a3a5c;
  border-radius: 3px;
  padding: 10px 14px;
  margin-bottom: 16px;
  background: #fff;
}
.pj-header-right { text-align: right; }
.pj-title    { font-size: 14px; font-weight: 700; color: #1a3a5c; }
.pj-subtitle { font-size: 10px; color: #777; font-style: italic; margin-top: 3px; }
.pj-period   { font-size: 11px; color: #1a3a5c; font-weight: 600; margin-top: 5px; }
.pj-org      { font-size: 11px; color: #444; font-weight: 700; }
.pj-addr     { font-size: 10px; color: #666; }
.pj-printed  { font-size: 10px; color: #666; font-style: italic; margin-top: 3px; }

/* Polices agrandies uniquement lors de la capture PDF */
.pdf-mode .pj-title    { font-size: 20px; }
.pdf-mode .pj-subtitle { font-size: 13px; }
.pdf-mode .pj-period   { font-size: 15px; }
.pdf-mode .pj-org      { font-size: 14px; }
.pdf-mode .pj-addr     { font-size: 13px; }
.pdf-mode .pj-printed  { font-size: 12px; }
.pdf-mode .pj-week-title { font-size: 15px; }
.pdf-mode .pj-dname    { font-size: 14px; }
.pdf-mode .pj-ddate    { font-size: 12px; }
.pdf-mode .pj-evt      { font-size: 12px; }
.pdf-mode .pj-time     { font-size: 12px; }
.pdf-mode .pj-name     { font-size: 12px; }
.pdf-mode .pj-svc      { font-size: 11px; }

.pj-week { margin-bottom: 20px; }
.pj-week-title {
  font-size: 12px;
  font-weight: 700;
  color: #1a3a5c;
  border-bottom: 2px solid #1a3a5c;
  padding-bottom: 4px;
  margin-bottom: 8px;
}
.pj-days {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.pj-day {
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  min-height: 80px;
}
.pj-day.pj-we { background: #f5f5fb; }

.pj-day-hdr {
  background: #1a3a5c;
  color: #fff;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.pj-day.pj-we .pj-day-hdr { background: #0d2a45; }
.pj-dname  { font-size: 11px; font-weight: 700; }
.pj-ddate  { font-size: 9px; opacity: .85; }

.pj-day-body { padding: 4px 5px; display: flex; flex-direction: column; gap: 3px; }

.pj-empty { color: #bbb; font-size: 11px; padding: 4px 0; text-align: center; }

.pj-evt {
  display: flex;
  flex-direction: column;
  padding: 3px 4px;
  border-left: 3px solid #1a3a5c;
  background: #f0f4fa;
  border-radius: 2px;
  font-size: 10px;
  line-height: 1.4;
}
.pj-evt-repos {
  border-left-color: #e65100;
  background: #fff8f5;
}
.pj-time { font-weight: 700; color: #1a3a5c; font-size: 10px; }
.pj-evt-repos .pj-time { color: #e65100; }
.pj-name { font-size: 10px; font-weight: 600; color: #222; }
.pj-svc  { font-size: 9px; color: #c0392b; font-style: italic; }
.pj-j1   { font-size: 8px; background: #e65100; color: #fff; border-radius: 2px; padding: 0 2px; }

@media print {
  .pj-week { page-break-inside: avoid; }
  .pj-days { grid-template-columns: repeat(3, 1fr); }
}

/* ── Pied de page employé ── */
.pe-emp-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: #888;
  border-top: 1px solid #ddd;
  padding: 5px 2px 2px;
  margin-top: 10px;
}

@media print {
  @page { size: A4 portrait; margin: 10mm; }
  .page-header, .imp-sidebar, .imp-log-bar, #email-modal-overlay { display: none !important; }
  .imp-body { height: auto; margin: 0; }
  .imp-main { padding: 0; overflow: visible; }
  .imp-preview { box-shadow: none; border-radius: 0; }
  body, #app { background: white; }
  .pc-week { page-break-inside: avoid; }
  .pe-employee { page-break-after: always; break-after: page; }
  .pe-employee:last-child { page-break-after: avoid; break-after: avoid; }
  .pe-emp-footer { position: running(footer); }
}