body { background: #f6f7f9; color: #1f2933; }
.navbar-brand-logo { align-items: center; display: inline-flex; padding-bottom: 0; padding-top: 0; }
.navbar-brand-logo img { display: block; height: 28px; max-width: min(240px, 48vw); object-fit: contain; width: auto; }
.app-container { padding: 24px; }
.page-title { align-items: center; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 18px; }
.page-title h1, h1 { font-size: 1.65rem; margin: 0; }
h2 { font-size: 1.15rem; margin-bottom: 14px; }
h3 { font-size: 1rem; margin-top: 12px; }
.section { background: #fff; border: 1px solid #d9dee7; border-radius: 6px; margin-bottom: 18px; padding: 16px; }
.section-title { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 12px; }
.section-title h2 { margin-bottom: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.import-intro { background: #f8fafc; border: 1px solid #d9dee7; border-radius: 6px; margin-bottom: 16px; padding: 12px; }
.import-intro strong, .import-intro span { display: block; }
.import-intro span { color: #52606d; }
.import-summary { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 12px; }
.import-summary div { background: #f8fafc; border: 1px solid #e1e7ef; border-radius: 6px; min-width: 0; padding: 10px; }
.import-summary span { color: #52606d; display: block; font-size: 0.82rem; }
.import-summary strong { display: block; overflow-wrap: anywhere; }
.import-summary .import-summary-warning { background: #fff7df; border-color: #f2cc69; }
.import-check-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.import-check-block h3 { margin-top: 0; }
.import-confirm-bar { align-items: center; background: #f8fafc; border: 1px solid #d9dee7; border-radius: 6px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-bottom: 16px; padding: 12px; }
.import-confirm-bar span { display: block; }
.filters { align-items: end; display: flex; gap: 8px; margin-bottom: 16px; max-width: 520px; }
.wide-filters { flex-wrap: wrap; max-width: 960px; }
.wide-filters .form-control, .wide-filters .form-select { max-width: 260px; }
.filter-actions { display: flex; gap: 8px; }
.auth-panel { background: #fff; border: 1px solid #d9dee7; border-radius: 6px; margin: 48px auto; max-width: 420px; padding: 24px; }
.form-grid input, .form-grid select, .form-grid textarea, .auth-panel input { max-width: 520px; }
.form-grid ul { list-style: none; padding-left: 0; }
.form-grid li { margin-bottom: 4px; }
.passage-row { border-bottom: 1px solid #e6e9ef; display: grid; gap: 12px; grid-template-columns: minmax(220px, 1fr) minmax(220px, 2fr) auto; padding: 10px 0; }
.passage-row label { display: block; font-weight: 600; margin-bottom: 4px; }
.passage-row select, .passage-row input[type="text"] { width: 100%; }
.delete-field { align-items: end; color: #52606d; display: flex; gap: 6px; padding-bottom: 4px; }
.calendar-grid { display: grid; grid-template-columns: 72px repeat(5, minmax(120px, 1fr)); overflow-x: auto; }
.calendar-head, .calendar-hour, .calendar-slot { border: 1px solid #d9dee7; min-height: 42px; padding: 6px; }
.calendar-head { background: #314e76; color: #fff; font-weight: 600; text-align: center; }
.calendar-hour { background: #eef2f7; font-weight: 600; }
.calendar-slot { background: #fff; color: inherit; display: block; text-decoration: none; }
.calendar-slot:hover { background: #e8f1ff; }
.calendar-slot-planned { position: relative; }
.slot-main-link { inset: 0; position: absolute; z-index: 1; }
.slot-colle { background: #d7e8ff; border-left: 4px solid #2268b8; color: inherit; display: block; margin-bottom: 4px; padding: 4px; text-decoration: none; }
.slot-colle-done { background: #d7e8ff; border-left-color: #2268b8; }
.slot-colle-reported-original { background: #fff0bf; border-left-color: #b7791f; }
.slot-colle-reported-actual { background: #dff5df; border-left-color: #2f855a; }
.slot-colloscope { background: repeating-linear-gradient(135deg, #f7f8fa 0, #f7f8fa 7px, #e4e8ee 7px, #e4e8ee 14px); border-left: 4px solid #7b8794; color: #27323f; display: block; margin-bottom: 4px; padding: 4px; pointer-events: none; position: relative; text-decoration: none; z-index: 2; }
.slot-colloscope:hover { background: repeating-linear-gradient(135deg, #edf1f5 0, #edf1f5 7px, #d9e0e8 7px, #d9e0e8 14px); color: #18212b; }
.colloscope-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 4px; position: relative; z-index: 3; }
.colloscope-actions form { display: flex; flex: 0 0 auto; margin: 0; }
.colloscope-actions .btn { flex: 0 0 auto; padding: 2px 6px; white-space: nowrap; }
.calendar-legend { align-items: stretch; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.legend-item { border-left: 4px solid transparent; border-radius: 4px; display: inline-flex; font-size: 0.92rem; font-weight: 600; line-height: 1.2; padding: 7px 10px; }
.legend-colloscope { background: repeating-linear-gradient(135deg, #f7f8fa 0, #f7f8fa 7px, #e4e8ee 7px, #e4e8ee 14px); border-left-color: #7b8794; }
.legend-done { background: #d7e8ff; border-left-color: #2268b8; }
.legend-reported-original { background: #fff0bf; border-left-color: #b7791f; }
.legend-reported-actual { background: #dff5df; border-left-color: #2f855a; }
.suivi-tabs { margin-bottom: 0; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; }
.suivi-tabs .nav-link { white-space: nowrap; }
.suivi-tab-content { background: #fff; border: 1px solid #dee2e6; border-top: 0; padding: 16px; }
.suivi-summary { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 16px; }
.suivi-summary div { background: #f8fafc; border: 1px solid #e1e7ef; border-radius: 6px; padding: 10px; }
.suivi-summary span { color: #52606d; display: inline-block; font-size: 0.82rem; margin-right: 3px; }
.suivi-summary strong { display: block; font-size: 1.02rem; margin-top: 2px; }
.suivi-table th { background: #eef2f7; white-space: nowrap; }
.suivi-table td { vertical-align: top; }
.suivi-prof-table { margin: 0; min-width: 180px; }
.suivi-prof-table td { padding: 2px 0; }
.suivi-prof-label { color: #52606d; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; }
.time-split-input { display: inline-flex; vertical-align: middle; width: auto; }
.time-split-input .time-hour-input, .time-split-input .time-minute-input { text-align: center; width: 3.25rem; }
.colloscope-color-swatch { border: 1px solid #6c757d; border-radius: .25rem; display: inline-block; flex: 0 0 auto; height: 1.5rem; width: 1.5rem; }
.colloscope-color-swatch-empty { background: repeating-linear-gradient(45deg, #ffffff, #ffffff 4px, #dee2e6 4px, #dee2e6 8px); }
.colloscope-variant-picker { align-items: center; display: grid; gap: .5rem; grid-template-columns: minmax(12rem, 1fr) auto minmax(12rem, 1fr); }
.colloscope-variant-actions { display: flex; flex-direction: column; gap: .5rem; }
@media (max-width: 760px) {
  .app-container { padding: 12px; }
  .page-title { align-items: flex-start; flex-direction: column; }
  .filters { align-items: stretch; }
  .filter-actions { flex-wrap: wrap; }
  .passage-row { grid-template-columns: 1fr; }
  .colloscope-actions { display: none; }
  .suivi-tab-content { padding: 10px; }
}
@media (max-width: 768px) {
  .colloscope-variant-picker { grid-template-columns: 1fr; }
  .colloscope-variant-actions { flex-direction: row; justify-content: center; }
}