/*
 * catppuccin-dark.css
 * Versie: 1.1
 * Wijzigingen: PRMS sectie 13 toegevoegd, strong=yellow, kolom accenten
 * ===================
 * A clean, dark documentation stylesheet based on the Catppuccin Mocha colour palette.
 * https://github.com/catppuccin/catppuccin
 *
 * Usage in your HTML file:
 *   <link rel="stylesheet" href="catppuccin-dark.css">
 *
 * The palette is defined as CSS custom properties (variables) at the top,
 * so you can easily swap colours or create a light variant by overriding
 * the variables in a separate file or a <style> block.
 *
 * Sections in this file:
 *   1.  Colour palette (CSS variables)
 *   2.  Reset and base
 *   3.  Typography
 *   4.  Links
 *   5.  Code and preformatted text
 *   6.  Callout / alert boxes  (.note, .warn, .err, .good)
 *   7.  Tables
 *   8.  Status badges  (.on, .off)
 *   9.  Tab labels      (.tab-label)
 *  10.  Table of contents  (.toc)
 *  11.  Utility classes
 *  12.  GUI mockup components  (.mockup, .mgroup, etc.)
 */


/* ═══════════════════════════════════════════════════════════
   1. COLOUR PALETTE — Catppuccin Mocha
   ═══════════════════════════════════════════════════════════
   These are the official Catppuccin Mocha colours as CSS variables.
   Override any of these in a <style> block or a second CSS file
   to retheme everything at once.

   For the light variant (Catppuccin Latte), replace these values:
     --bg      → #eff1f5
     --surface → #e6e9ef
     --border  → #bcc0cc
     --text    → #4c4f69
     --muted   → #9ca0b0
     --accent  → #1e66f5
     --green   → #40a02b
     (etc.)
*/
:root {
  /* Backgrounds */
  --bg:       #1e1e2e;   /* Base — main page background            */
  --surface:  #313244;   /* Surface0 — cards, code blocks, tables  */
  --overlay:  #45475a;   /* Overlay0 — borders, dividers           */

  /* Text */
  --text:     #cdd6f4;   /* Main text colour                       */
  --muted:    #6c7086;   /* Subdued text, labels, captions         */
  --border:   #45475a;   /* Border colour (same as overlay)        */

  /* Accent colours — used for headings, highlights, links */
  --accent:   #89b4fa;   /* Blue — headings, links, selected tabs  */
  --teal:     #89dceb;   /* Sky — secondary links, tab label 2     */
  --green:    #a6e3a1;   /* Green — code text, .good callout       */
  --yellow:   #f9e2af;   /* Yellow — h3 headings, .warn border     */
  --orange:   #fab387;   /* Peach — warnings                       */
  --red:      #f38ba8;   /* Red — errors, dashed reference line    */
  --purple:   #cba6f7;   /* Mauve — tab label 3, crosshair dot     */
}


/* ═══════════════════════════════════════════════════════════
   2. RESET AND BASE
   ═══════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.75;

  /* Centre the content and limit its width for readability */
  max-width: 960px;
  margin: 0 auto;
  padding: 32px;
}


/* ═══════════════════════════════════════════════════════════
   3. TYPOGRAPHY
   ═══════════════════════════════════════════════════════════ */

/* Page title */
h1 {
  color: var(--accent);
  font-size: 27px;
  margin-bottom: 4px;
}

/* Section headings */
h2 {
  color: var(--accent);
  font-size: 20px;
  margin: 40px 0 12px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}

/* Subsection headings */
h3 {
  color: var(--yellow);
  font-size: 16px;
  margin: 24px 0 7px;
}

/* Sub-subsection headings */
h4 {
  color: var(--teal);
  font-size: 15px;
  margin: 16px 0 5px;
}

p {
  margin-bottom: 10px;
}

ul,
ol {
  padding-left: 22px;
  margin-bottom: 10px;
}

li {
  margin-bottom: 4px;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 30px 0;
}

/* Small muted text — use for version numbers, captions */
.version {
  color: var(--muted);
  font-size: 14px;
}


/* ═══════════════════════════════════════════════════════════
   4. LINKS
   ═══════════════════════════════════════════════════════════ */
a {
  color: var(--teal);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}


/* ═══════════════════════════════════════════════════════════
   5. CODE AND PREFORMATTED TEXT
   ═══════════════════════════════════════════════════════════ */

/* Inline code and keyboard shortcuts */
code,
kbd {
  background: var(--surface);
  color: var(--green);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: "Noto Mono", "Fira Code", "Consolas", monospace;
  font-size: 14px;
}

/* Multi-line code blocks */
pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 18px;
  overflow-x: auto;           /* horizontal scroll instead of wrapping */
  margin: 10px 0 16px;
  font-size: 14px;
}

/* Reset code inside pre — inherits pre's colour */
pre code {
  background: none;
  padding: 0;
  color: var(--green);
}


/* ═══════════════════════════════════════════════════════════
   6. CALLOUT / ALERT BOXES
   ═══════════════════════════════════════════════════════════
   Usage:
     <div class="note">Informational note</div>
     <div class="warn">Warning — something to be careful about</div>
     <div class="err">Error — something is wrong / will break</div>
     <div class="good">Success / positive outcome</div>
*/
.note,
.warn,
.err,
.good {
  background: var(--surface);
  border-radius: 0 6px 6px 0;
  padding: 10px 16px;
  margin: 12px 0;
}

/* Blue left border — informational */
.note { border-left: 4px solid var(--accent); }

/* Orange left border — caution */
.warn { border-left: 4px solid var(--orange); }

/* Red left border — error / danger */
.err  { border-left: 4px solid var(--red); }

/* Green left border — success / tip */
.good { border-left: 4px solid var(--green); }


/* ═══════════════════════════════════════════════════════════
   7. TABLES
   ═══════════════════════════════════════════════════════════ */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 12px 0 18px;
}

th {
  background: var(--surface);
  color: var(--accent);
  padding: 8px 12px;
  text-align: left;
  border: 1px solid var(--border);
}

td {
  padding: 7px 12px;
  border: 1px solid var(--border);
  vertical-align: top;
}

/* Zebra striping on table rows */
tr:nth-child(even) td {
  background: #252535;   /* slightly lighter than --bg */
}

/* Two-column reference tables (command / description style).
   Add class="ref" to <table> to activate.
   First column fixed width; long strings (URLs, commands) wrap
   within the cell instead of overflowing.                       */
table.ref {
  table-layout: fixed;
}

table.ref th:first-child,
table.ref td:first-child {
  width: 28%;
  word-break: break-all;
}


/* ═══════════════════════════════════════════════════════════
   8. STATUS BADGES   (.on / .off)
   ═══════════════════════════════════════════════════════════
   Use for binary state indicators, e.g. DIP switch positions.

   Usage:
     <span class="on">ON</span>
     <span class="off">OFF</span>
*/
.on {
  display: inline-block;
  background: var(--green);
  color: #1e1e2e;
  font-weight: bold;
  padding: 1px 8px;
  border-radius: 3px;
  font-family: monospace;
}

.off {
  display: inline-block;
  background: var(--border);
  color: var(--text);
  font-weight: bold;
  padding: 1px 8px;
  border-radius: 3px;
  font-family: monospace;
}


/* ═══════════════════════════════════════════════════════════
   9. TAB LABELS   (.tab-label)
   ═══════════════════════════════════════════════════════════
   Coloured pill labels, e.g. to indicate which UI tab a section
   describes. Override the background-color inline for each variant.

   Usage:
     <span class="tab-label">Frequency Response</span>
     <span class="tab-label" style="background:#89dceb;">THD+N</span>
     <span class="tab-label" style="background:#cba6f7;">Voltage</span>
     <span class="tab-label" style="background:#a6e3a1;">Power</span>
*/
.tab-label {
  display: inline-block;
  background: var(--accent);   /* default: blue */
  color: #1e1e2e;              /* dark text on coloured background */
  padding: 2px 10px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
  margin-right: 6px;
}


/* ═══════════════════════════════════════════════════════════
   10. TABLE OF CONTENTS   (.toc)
   ═══════════════════════════════════════════════════════════
   A styled box for a page table of contents.

   Usage:
     <div class="toc">
       <strong>Contents</strong>
       <ol>
         <li><a href="#section1">Section 1</a></li>
         ...
       </ol>
     </div>
*/
.toc {
  background: var(--surface);
  border-radius: 8px;
  padding: 16px 24px;
  margin-bottom: 32px;
}

.toc ol {
  padding-left: 20px;
}

.toc li {
  margin: 4px 0;
}

.toc a {
  color: var(--teal);
  text-decoration: none;
}

.toc a:hover {
  text-decoration: underline;
}


/* ═══════════════════════════════════════════════════════════
   11. UTILITY CLASSES
   ═══════════════════════════════════════════════════════════ */

/* Centre text */
.text-center { text-align: center; }

/* Muted / subdued text */
.text-muted  { color: var(--muted); font-size: 14px; }

/* Accent colour text */
.text-accent { color: var(--accent); }

/* Highlighted / coloured text — gebruik op <strong> of <span>
   Voorbeeld: <strong class="hl-yellow">Let op!</strong>  */
.hl-blue   { color: var(--accent); }
.hl-teal   { color: var(--teal);   }
.hl-green  { color: var(--green);  }
.hl-yellow { color: var(--yellow); }
.hl-orange { color: var(--orange); }
.hl-red    { color: var(--red);    }
.hl-purple { color: var(--purple); }

/* Small caption below a figure or mockup */
.caption {
  color: var(--muted);
  font-size: 12px;
  margin-top: -4px;
  margin-bottom: 16px;
}


/* ═══════════════════════════════════════════════════════════
   12. GUI MOCKUP COMPONENTS
   ═══════════════════════════════════════════════════════════
   These classes recreate the look of the HP8903A application
   using only HTML/CSS — no images needed. Useful for embedding
   interface illustrations directly in documentation.

   Structure:
     <div class="mockup">
       <div class="mockup-bar">Window title bar</div>
       <div class="mockup-body">
         <div class="mockup-left"> ... </div>
         <div class="mockup-right"> ... </div>
       </div>
     </div>
*/

/* Outer container */
.mockup {
  background: #181825;            /* slightly darker than --bg */
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin: 16px 0;
}

/* Title bar at the top of the mockup window */
.mockup-bar {
  background: var(--surface);
  padding: 5px 12px;
  color: var(--accent);
  font-size: 12px;
  font-family: monospace;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Main content area — side by side columns */
.mockup-body {
  padding: 12px;
  display: flex;
  gap: 10px;
  font-size: 12px;
}

.mockup-left  { min-width: 200px; }
.mockup-right { flex: 1; }

/* A grouped parameter section within the mockup */
.mgroup {
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 8px;
  margin: 5px 0;
  position: relative;
}

/* Group title (floats above the border like a fieldset legend) */
.mgroup-title {
  position: absolute;
  top: -8px;
  left: 8px;
  background: #181825;
  padding: 0 4px;
  color: var(--accent);
  font-size: 11px;
  font-weight: bold;
}

/* A parameter row: label + value field + unit */
.mrow {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 3px 0;
}

.mlbl {
  color: var(--muted);
  min-width: 65px;
}

.mval {
  background: var(--surface);
  color: var(--text);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--border);
  min-width: 72px;
}

.munit {
  color: var(--muted);
  font-size: 11px;
  min-width: 26px;
}

/* A button inside the mockup */
.mbtn {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: bold;
  cursor: default;
  font-size: 12px;
}


/* ═══════════════════════════════════════════════════════════
   13. PRMS — REPAIR MANAGEMENT SYSTEM COMPONENTEN
   ═══════════════════════════════════════════════════════════
   Catppuccin Mocha vertalingen van alle klassen uit stijl.css
   die door de PRMS PHP scripts worden gebruikt.
   De klassenamen zijn identiek aan stijl.css zodat de PHP
   scripts ongewijzigd blijven — alleen de stylesheet wisselt.
*/

/* ── Body override voor full-width pagina's ── */
body.repair-management {
  max-width: 100%;
  padding: 20px;
}

/* ── Basis knoppen ── */
/* Gedeelde basis voor alle .button varianten */
.button {
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 5px;
  width: 240px;
  box-sizing: border-box;
  transition: background-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
  border: 1px solid transparent;
}

/* button1 — groen: invoeren, opslaan, bevestigen */
.button1 {
  background: var(--surface);
  color: var(--green);
  border-color: var(--green);
}
.button1:hover {
  background: var(--green);
  color: #1e1e2e;
  text-decoration: none;
}

/* button2 — blauw: edit, beheren */
.button2 {
  background: var(--surface);
  color: var(--accent);
  border-color: var(--accent);
}
.button2:hover {
  background: var(--accent);
  color: #1e1e2e;
  text-decoration: none;
}

/* button3 — rood: verwijderen */
.button3 {
  background: var(--surface);
  color: var(--red);
  border-color: var(--red);
}
.button3:hover {
  background: var(--red);
  color: #1e1e2e;
  text-decoration: none;
}

/* button4 — neutraal: navigatie, terug, zoeken */
.button4 {
  background: var(--surface);
  color: var(--text);
  border-color: var(--overlay);
}
.button4:hover {
  background: var(--overlay);
  color: var(--text);
  text-decoration: none;
}

/* button5 — gedempd: secundaire acties */
.button5 {
  background: var(--surface);
  color: var(--muted);
  border-color: var(--muted);
}
.button5:hover {
  background: var(--overlay);
  color: var(--text);
  text-decoration: none;
}

/* delete-btn — grote rode verwijderknop in toonscherm.php */
.delete-btn {
  background: var(--red) !important;
  color: #1e1e2e !important;
  border-color: var(--red) !important;
  font-weight: bold;
}
.delete-btn:hover {
  background: #eb6f8e !important;
}

/* nav-button-small — kleine navigatieknoppen */
.nav-button-small {
  font-size: 13px !important;
  padding: 3px 10px !important;
  width: auto !important;
  margin-right: 5px;
  opacity: 0.9;
}

/* ── Hoofdmenu layout ── */
.menu-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.menu-row {
  display: flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

.button-cell {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.description-cell {
  font-size: 15px;
  color: var(--muted);
  padding-left: 32px;
  letter-spacing: 0.3px;
}

/* ── Content blokken ── */
.content-box {
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  padding: 12px 16px;
  margin: 20px 0;
  background: var(--surface);
  border-radius: 0 6px 6px 0;
  font-size: 15px;
  line-height: 1.7;
}

.content-box ul,
.content-box ol,
.content-box p {
  font-size: 15px;
  line-height: 1.8em;
  margin-left: 0;
  font-weight: 500;
}

/* ── Formulier box (contact-form-box) ── */
.contact-form-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--red);
  padding: 20px 25px;
  margin: 30px 0;
  border-radius: 0 6px 6px 0;
}

.contact-form-box h2 {
  margin: 0 0 15px 0;
  border-bottom: none;
}

/* ── Waarschuwings box ── */
.warning-box {
  border: 1px solid var(--red);
  border-left: 4px solid var(--red);
  background: var(--surface);
  padding: 20px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 20px;
}

.warning-text {
  color: var(--red);
  font-weight: 900;
  font-size: 22px;
  margin-bottom: 16px;
}

/* ── Zoekscherm container ── */
.search-container {
  margin-top: 20px;
  padding: 20px;
  background: var(--surface);
  border-radius: 6px;
  border: 1px solid var(--border);
  display: inline-block;
}

.search-info {
  margin-bottom: 16px;
  font-style: italic;
  color: var(--muted);
}

/* ── Invoervelden ── */
.flux-input {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 15px;
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
}

.flux-input:focus {
  outline: none;
  border-color: var(--accent);
}

.brede-input {
  width: 600px !important;
}

/* ── Formulier labels ── */
.label-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.label-cell {
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  width: 150px;
  font-weight: 600;
  font-size: 16px;
  color: var(--muted);
  vertical-align: top;
  padding: 8px 0;
}

.value-cell {
  padding: 8px 0;
  font-size: 16px;
  color: var(--text);
}

/* ── ID display (groot rood getal) ── */
.id-display {
  font-size: 22px;
  font-weight: 900;
  color: var(--red);
}

/* ── Memo box ── */
.memo-box {
  background: var(--surface);
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  white-space: pre-wrap;
  font-family: "Noto Mono", "Fira Code", Consolas, monospace;
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
}

/* ── Apparatenlijst ── */
.device-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding: 6px 0;
  color: var(--text);
}

.delete-link {
  color: var(--red);
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  margin-left: 15px;
}
.delete-link:hover {
  text-decoration: underline;
  color: #eb6f8e;
}

/* ── Nav container (bladeren knoppen) ── */
.nav-container {
  margin: 16px 0;
  display: flex;
  gap: 8px;
}

/* ── Back-link ── */
.back-link {
  text-align: left;
  margin: 30px 0 50px 0;
}

.back-link a {
  color: var(--teal);
  text-decoration: none;
  font-weight: 600;
}
.back-link a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ── Tabel overrides voor PRMS (compacter dan de basis) ── */
table th {
  font-size: 12px;
  padding: 4px 8px;
}

table td {
  padding: 2px 8px;
  line-height: 1.3em;
}

td a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
td a:hover {
  color: var(--red);
  text-decoration: underline;
}

/* ── Formulier input/select/textarea globals ── */
select,
input[type="text"],
input[type="number"],
input[type="date"],
textarea {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 15px;
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
}

select:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── Divider ── */
.divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 20px 0;
}

/* ── strong override: geen rood in dark theme, gebruik yellow ── */
strong {
  font-weight: 700;
  color: var(--yellow);
}

/* ── Thema-toggle knop (geïnjecteerd door theme.js) ── */
#theme-toggle {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 9999;
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
#theme-toggle:hover {
  background: var(--accent);
  color: #1e1e2e;
}

/* textarea altijd monospace */
textarea {
  font-family: "Noto Mono", "Fira Code", Consolas, monospace;
  font-size: 15px;
}

/* ── PRMS tabel kolom accenten ── */
td.col-apparaat {
  color: var(--yellow);
  font-family: "Noto Mono", "Fira Code", Consolas, monospace;
  }
td.col-apparaat a { color: var(--yellow); }
td.col-apparaat a:hover { color: var(--red); text-decoration: underline; }
td.col-datum { color: var(--muted); font-style: italic; }
td.col-actie { color: var(--teal); }
td.col-memo {
  font-family: "Noto Mono", "Fira Code", Consolas, monospace;

}