/* Base */
:root{
  --bg:#f7f7fb;
  --text:#1f2937;
  --muted:#6b7280;
  --card:#ffffff;
  --border:#e5e7eb;
  --accent:#0ea5e9;
  --accent-contrast:#ffffff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Navbar */
.navbar{
  position:sticky; top:0; z-index:100;
  background:#111827;
  border-bottom:1px solid #0b1220;
}
.navbar .nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1100px; margin:0 auto; padding:12px 20px;
}
.navbar a{ color:#e5e7eb; text-decoration:none; margin-right:18px; font-weight:500; }
.navbar a:hover{ color:#fff; }
.navbar .brand{ font-weight:700; margin-right:24px; }
.navbar .links{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.navbar .logout{
  margin-left:8px;
  padding:8px 12px; border:1px solid #374151; border-radius:10px;
}
.navbar .logout:hover{ background:#0f172a; border-color:#4b5563; }

/* Layout */
.container{ max-width:1100px; margin:24px auto; padding:0 20px; }
.card{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px; box-shadow:0 1px 2px rgba(0,0,0,.04); }

/* Headings */
h1,h2,h3{ line-height:1.2; margin:0 0 12px }
h1{ font-size:2rem }
h2{ font-size:1.5rem }
h3{ font-size:1.25rem }
p{ margin:0 0 12px; color:var(--text) }

/* Tables */
table{ width:100%; border-collapse:separate; border-spacing:0; background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
thead th{ background:#f3f4f6; text-align:left; font-weight:700; padding:12px; border-bottom:1px solid var(--border); }
tbody td{ padding:12px; border-bottom:1px solid var(--border); vertical-align:top; }
tbody tr:last-child td{ border-bottom:0; }
tbody tr:hover td{ background:#fafafa; }

/* Code */
pre, code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
pre{ margin:0; padding:12px; background:#0b1220; color:#e5e7eb; border-radius:10px; overflow:auto; }
code{ background:#f1f5f9; padding:2px 6px; border-radius:6px; }

/* Login */
.login-container{ width:min(360px, 92vw); margin:10vh auto; padding:22px; background:var(--card); border:1px solid var(--border); border-radius:14px; }
.login-container h2{ margin-top:0 }
.login-container label{ display:block; margin:10px 0 6px; color:var(--muted); font-size:.95rem; }
.login-container input{ width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; outline:none; }
.login-container input:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(14,165,233,.15); }
.login-container button{ width:100%; margin-top:12px; padding:10px 14px; border-radius:10px; border:1px solid var(--accent); background:var(--accent); color:var(--accent-contrast); font-weight:600; cursor:pointer; }
.login-container button:hover{ filter:brightness(0.95); }
.error{ color:#dc2626; margin-top:10px; }

/* Utilities */
.grid{ display:grid; gap:16px; }
.muted{ color:var(--muted) }
.section{ margin:18px 0 }

/* === Overflow safety & responsive tweaks === */
html, body { max-width: 100%; overflow-x: hidden; }
.container { width: 100%; max-width: 1100px; padding-left: 16px; padding-right: 16px; }
.navbar .nav-inner { flex-wrap: wrap; }
.navbar .links { flex-wrap: wrap; }

/* Images/media never exceed viewport */
img, video, canvas, iframe { max-width: 100%; height: auto; display: block; }

/* Tables can scroll inside themselves on small screens instead of the page */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 640px; } /* can shrink if needed; tweak as desired */

/* If you don't have .table-wrap in markup, make table itself safe */
table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Prevent extremely long strings from blowing layout */
td, th, p, li { overflow-wrap: anywhere; word-break: break-word; }

/* Code blocks scroll inside, not the page */
pre { white-space: pre; overflow: auto; max-width: 100%; }
code { white-space: pre-wrap; word-break: break-word; }

/* === Patch: fix table layout so columns don't collapse vertically === */
table{
  display: table !important;
  width: 100%;
  overflow: visible !important;
  table-layout: auto;
}
thead, tbody, tr, th, td{ display: table-row-group; display: revert; }
td, th{ white-space: normal; word-break: normal; overflow-wrap: anywhere; }

/* Sensible minimum widths for 3-column command tables */
thead th:nth-child(1), tbody td:nth-child(1){ min-width: 220px; } /* Opdracht */
thead th:nth-child(2), tbody td:nth-child(2){ min-width: 380px; } /* CLI */
thead th:nth-child(3), tbody td:nth-child(3){ min-width: 220px; } /* GUI */

/* If viewport gets too small, allow the table itself to scroll horizontally */
@media (max-width: 800px){
  table{ overflow-x: auto; display: block !important; }
  thead, tbody, tr, th, td{ display: revert; }
}

/* Keep code blocks tidy inside cells */
td pre{ max-width: 100%; overflow: auto; }

/* === Patch2: unify table look across pages === */
table{
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}
th, td{
  padding: 12px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: break-word;
}
/* Columns: Opdracht 30%, CLI 40%, GUI 30% */
thead th:nth-child(1), tbody td:nth-child(1){ width: 30%; }
thead th:nth-child(2), tbody td:nth-child(2){ width: 40%; }
thead th:nth-child(3), tbody td:nth-child(3){ width: 30%; }

/* Ensure pre/code don't blow out cells */
td pre{
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 100%;
}

/* === Layout tuning for 3-column task tables === */
table{ table-layout: fixed; } /* fixed to respect set widths */
thead th, tbody td{ vertical-align: top; }

/* Percent widths so it matches across pages and fits in container */
table th:nth-child(1), table td:nth-child(1){ width: 28%; }
table th:nth-child(2), table td:nth-child(2){ width: 48%; }
table th:nth-child(3), table td:nth-child(3){ width: 24%; }

/* Code blocks wrap long commands neatly */
pre{ white-space: pre-wrap; word-break: break-word; overflow: auto; }

/* Spacing between rows for readability */
tbody tr td{ padding-top: 14px; padding-bottom: 14px; }
tbody tr + tr td{ border-top: 1px solid var(--border); }

/* Slightly round code boxes inside table cells */
td pre{ border-radius: 12px; padding: 14px; }
.meme-container {
  margin: 30px auto;
  width: 417px;
  height: 417px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #f9f9f9; /* lichte achtergrond, kan je ook weghalen als je wilt */
}
.meme-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.navbar .nav-inner {
  display: flex;
  align-items: center;
  justify-content: center;   /* menu centreren */
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 20px;
  position: relative;
}

.center-menu {
  display: flex;
  gap: 20px;
}

.logout-container {
  position: absolute;
  right: 20px;   /* helemaal rechts */
}

.logout-container .logout {
  padding: 8px 12px;
  border: 1px solid #374151;
  border-radius: 10px;
}

.logout-container .logout:hover {
  background: #0f172a;
  border-color: #4b5563;
}