aantal mappen en layout aangepast

app/static/styles.css

@@ -41,6 +41,9 @@ body {
   border: 1px solid #d7dee9;
   border-radius: 8px;
   padding: 10px;
+  min-height: 420px;
+  display: flex;
+  flex-direction: column;
 }
 
 .panel h2 {
@@ -98,6 +101,101 @@ button.secondary {
   border-radius: 6px;
 }
 
+.linked-list-wrap {
+  flex: 1;
+  min-height: 240px;
+  max-height: 440px;
+}
+
+.linked-list {
+  height: 100%;
+}
+
+.badge {
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 700;
+  color: #0f172a;
+  background: #dbeafe;
+  border: 1px solid #bfdbfe;
+  border-radius: 999px;
+  padding: 1px 6px;
+  margin-right: 6px;
+}
+
+.list li.selected {
+  background: #e0f2fe;
+}
+
+.panel-footer {
+  position: sticky;
+  bottom: 0;
+  background: #ffffff;
+  border-top: 1px solid #e4eaf2;
+  padding-top: 8px;
+  margin-top: 8px;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.advanced-row {
+  margin-top: 8px;
+  justify-content: flex-end;
+}
+
+.mismatch {
+  color: #b91c1c;
+  font-weight: 700;
+}
+
+.modal {
+  position: fixed;
+  inset: 0;
+  background: rgba(2, 6, 23, 0.55);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal.hidden {
+  display: none;
+}
+
+.modal-card {
+  width: min(1100px, 96vw);
+  background: #ffffff;
+  border: 1px solid #d7dee9;
+  border-radius: 10px;
+  padding: 12px;
+}
+
+.modal-head {
+  justify-content: space-between;
+}
+
+.modal-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  margin-top: 8px;
+}
+
+.modal-grid .list {
+  max-height: 280px;
+}
+
+#panelSelectedEpisodes .panel-footer button:first-child,
+#panelSelectedFiles .panel-footer button:last-child,
+#panelSelectedFiles .advanced-row button:last-child {
+  border-color: #0b3a6e;
+  background: #0b3a6e;
+  color: #ffffff;
+}
+
 .list li {
   display: flex;
   justify-content: space-between;
@@ -117,10 +215,6 @@ button.secondary {
   margin-bottom: 8px;
 }
 
-.output {
-  margin: 0 12px 12px;
-}
-
 #outputBox {
   margin: 0;
   background: #0b1220;
@@ -132,6 +226,21 @@ button.secondary {
   font-size: 12px;
 }
 
+.debug-box {
+  margin: 0 12px 12px;
+  background: #ffffff;
+  border: 1px solid #d7dee9;
+  border-radius: 8px;
+  padding: 8px;
+}
+
+.debug-box > summary {
+  cursor: pointer;
+  user-select: none;
+  color: #334155;
+  font-size: 13px;
+}
+
 @media (max-width: 1600px) {
   .grid {
     grid-template-columns: repeat(2, minmax(280px, 1fr));
@@ -142,4 +251,8 @@ button.secondary {
   .grid {
     grid-template-columns: 1fr;
   }
+
+  .modal-grid {
+    grid-template-columns: 1fr;
+  }
 }