/*
 * MobileHardware - modern thema voor het klantgedeelte van osTicket (reparatie/)
 * Versie: 13 (01-11-2026)
 *
 * Alleen CSS: aan osTicket zelf verandert niets. Weghalen = de laadregel uit
 * include/client/header.inc.php verwijderen.
 *
 * Kleuren en afronding aanpassen: alleen het blok :root hieronder.
 */

:root {
    --mh-accent: #33383d;          /* hoofdkleur: knoppen, actieve tab (antraciet zoals het logo) */
    --mh-accent-donker: #16191c;
    --mh-accent-licht: #e6e8eb;
    --mh-focus: rgba(51, 56, 61, .18); /* gloed rond een actief veld */
    --mh-tekst: #1d2733;
    --mh-tekst-zacht: #5b6775;
    --mh-rand: #d9dee5;
    --mh-achtergrond: #f3f5f8;
    --mh-kaart: #ffffff;
    --mh-waarschuwing: #b42318;
    --mh-waarschuwing-licht: #fef3f2;
    --mh-radius: 10px;
    --mh-schaduw: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 16px rgba(16, 24, 40, .06);
}

/* ---------- Basis ---------- */
html, body {
    background: var(--mh-achtergrond) !important;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--mh-tekst);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--mh-accent); }
a:hover { color: var(--mh-accent-donker); }
h1 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 4px;
    color: var(--mh-tekst);
}
h1 + p { color: var(--mh-tekst-zacht); margin-top: 0; }
h2, h3 { color: var(--mh-tekst); }

/* ---------- Pagina-opbouw ---------- */
#container {
    width: auto;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 16px;
    background: transparent;
    box-shadow: none;
}
#header {
    height: auto;
    padding: 18px 0 14px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
#header .pull-left, #header .pull-right { float: none; }
#header #logo img {
    max-height: 56px;
    max-width: min(380px, 100%);
    mix-blend-mode: multiply;   /* witte achtergrond van het logo laten wegvallen tegen de grijze pagina */
}
#header p {
    width: auto;
    padding: 0;
    color: var(--mh-tekst-zacht);
    font-size: 14px;
}
#header p a {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--mh-rand);
    border-radius: 999px;
    background: var(--mh-kaart);
    text-decoration: none;
    font-weight: 600;
}
#header p a:hover { border-color: var(--mh-accent); }
.clear { clear: both; }

/* Navigatie als tabbladen */
#nav {
    margin: 0 0 24px;
    padding: 6px;
    height: auto;
    background: var(--mh-kaart);
    border: 1px solid var(--mh-rand);
    border-radius: calc(var(--mh-radius) + 4px);
    box-shadow: var(--mh-schaduw);
    display: flex;
    gap: 4px;
    white-space: normal;
    overflow-x: auto;
}
#nav li { display: block; flex: 1 1 0; }
#nav li a {
    display: block;
    height: auto;
    line-height: 1.3;
    margin: 0;
    padding: 10px 14px;
    border-radius: var(--mh-radius);
    color: var(--mh-tekst-zacht);
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    background-image: none !important;
    white-space: nowrap;
}
#nav li a:hover { background: var(--mh-achtergrond); color: var(--mh-tekst); }
#nav li a.active, #nav li a.active:hover {
    background: var(--mh-accent);
    color: #fff;
}

#content {
    margin: 0;
    padding: 0 0 24px;
    min-height: 0;
}
#footer {
    padding: 24px 0 32px;
    color: var(--mh-tekst-zacht);
    font-size: 13px;
}

/* ---------- Formulieren: algemeen ---------- */
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], input[type=search]:not(.select2-search__field), select, textarea {
    box-sizing: border-box;
    font: inherit;
    color: var(--mh-tekst);
    background: #fff;
    border: 1px solid var(--mh-rand);
    border-radius: 8px;
    padding: 10px 12px;
    min-height: 44px;
    transition: border-color .15s, box-shadow .15s;
}
select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 36px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235b6775' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
}
select[multiple] { background-image: none; padding-right: 12px; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--mh-accent);
    box-shadow: 0 0 0 3px var(--mh-focus);
}
input::placeholder, textarea::placeholder { color: #98a2b3; }

/* Knoppen */
input[type=submit], input[type=button], input[type=reset], button, .button, a.button {
    font: inherit;
    font-weight: 600;
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid var(--mh-rand);
    background: var(--mh-kaart);
    color: var(--mh-tekst) !important;
    cursor: pointer;
    box-shadow: none;
    text-shadow: none;
    transition: background .15s, border-color .15s;
}
input[type=button]:hover, input[type=reset]:hover, button:hover, .button:hover {
    border-color: var(--mh-tekst-zacht);
}
input[type=submit] {
    background: var(--mh-accent);
    border-color: var(--mh-accent);
    color: #fff !important;
    padding: 12px 28px;
}
input[type=submit]:hover { background: var(--mh-accent-donker); border-color: var(--mh-accent-donker); }

/* ---------- Aanmeldformulier ---------- */
#ticketForm > table { width: 100% !important; display: block; border-collapse: separate; }
#ticketForm > table > tbody {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
    background: var(--mh-kaart);
    border: 1px solid var(--mh-rand);
    border-radius: calc(var(--mh-radius) + 4px);
    box-shadow: var(--mh-schaduw);
    padding: 24px;
    margin-bottom: 20px;
}
#ticketForm > table > tbody:empty,
#ticketForm > table > tbody:last-child:not(#dynamic-form) { display: none; } /* lege spacer onderaan */
#ticketForm > table > tbody > tr { display: block; min-width: 0; }
#ticketForm > table > tbody > tr > td { display: block; padding: 0 !important; width: auto !important; }

/* Volle breedte: kopjes, help-onderwerp, omschrijving, bijlagen, samenvatting */
#ticketForm > table > tbody > tr:has(.form-header),
#ticketForm > table > tbody > tr:has(#topicId),
#ticketForm > table > tbody > tr:has(.thread-body),
#ticketForm > table > tbody > tr:has(.-redactor-container),
#ticketForm > table > tbody > tr > td.-redactor-container,
#dynamic-form > tr:has(input[size="40"]),
#ticketForm > table > tbody > tr:has(.filedrop) { grid-column: 1 / -1; }

/* Kopjes van de kaarten */
#ticketForm hr { display: none; }
#ticketForm .form-header { margin: 0 !important; padding-bottom: 12px; border-bottom: 1px solid var(--mh-rand); }
#ticketForm .form-header h3, #ticketForm .form-header b {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}
#ticketForm .form-header > div:empty { display: none; }

/* Labels en velden */
#ticketForm label { display: block; font-weight: 600; font-size: 14px; color: var(--mh-tekst); }
#ticketForm label > br { display: none; }
#ticketForm label > span { display: block; margin-bottom: 6px; }
#ticketForm label .error, #ticketForm font.error { color: var(--mh-waarschuwing); font-weight: 700; }
#ticketForm label input, #ticketForm label select, #ticketForm #topicId,
#ticketForm td > input, #ticketForm td > select { width: 100% !important; max-width: 100%; font-weight: 400; }
#ticketForm #topicId + font.error { display: none; }
#ticketForm td > select#topicId { margin: 0; }

/* Meerkeuze (Toebehoren, select2) */
#ticketForm .select2-container { width: 100% !important; }
#ticketForm .select2-container--default .select2-selection--multiple {
    min-height: 44px;
    border: 1px solid var(--mh-rand);
    border-radius: 8px;
    padding: 4px 8px;
}
#ticketForm .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--mh-accent);
    box-shadow: 0 0 0 3px var(--mh-focus);
}
#ticketForm .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--mh-accent-licht);
    border: 1px solid var(--mh-rand);
    border-radius: 999px;
    padding: 2px 10px;
    color: var(--mh-accent-donker);
    font-weight: 600;
}
#ticketForm .select2-search__field { min-height: 32px; margin-top: 2px !important; font: inherit; }

/* Uitgebreide klachtomschrijving */
#ticketForm .thread-body { padding: 0; margin: 0; border: 0; }
#ticketForm .thread-body h3 { font-size: 14px; font-weight: 600; margin: 0; }
#ticketForm .redactor-box {
    border: 1px solid var(--mh-rand) !important;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: none !important;
}
#ticketForm .redactor-box.redactor-focus,
#ticketForm .redactor-box:focus-within { border-color: var(--mh-accent) !important; box-shadow: 0 0 0 3px var(--mh-focus) !important; }
#ticketForm .redactor-toolbar-wrapper { background: var(--mh-achtergrond); border-bottom: 1px solid var(--mh-rand); }
#ticketForm .redactor-toolbar { background: var(--mh-achtergrond); border-bottom: 1px solid var(--mh-rand); box-shadow: none; }
#ticketForm .redactor-in { padding: 14px 16px !important; min-height: 160px !important; }

/* Slepen en neerzetten van bestanden */
#ticketForm .filedrop { margin-top: 16px; }
#ticketForm .filedrop .dropzone {
    border: 2px dashed #b9c3cf;
    border-radius: var(--mh-radius);
    background: var(--mh-achtergrond);
    padding: 22px 16px;
    text-align: center;
    color: var(--mh-tekst-zacht);
    font-size: 15px;
    transition: border-color .15s, background .15s;
}
#ticketForm .filedrop .dropzone .icon-upload {
    display: block;
    font-size: 28px;
    margin-bottom: 6px;
    color: var(--mh-accent);
}
#ticketForm .filedrop .dropzone a { font-weight: 600; color: var(--mh-accent); text-decoration: underline; text-underline-offset: 3px; }
#ticketForm .filedrop .dropzone:hover,
#ticketForm .filedrop .dropzone.hover,
#ticketForm .filedrop .dropzone.dragover {
    border-color: var(--mh-accent);
    background: var(--mh-accent-licht);
}
#ticketForm .filedrop .files:not(:empty) {
    border: 1px solid var(--mh-rand);
    border-bottom: 0;
    border-radius: var(--mh-radius) var(--mh-radius) 0 0;
    padding: 8px 12px;
    background: #fff;
}
#ticketForm .filedrop .files:not(:empty) + .dropzone { border-radius: 0 0 var(--mh-radius) var(--mh-radius); }

/* Waarschuwing onder het formulier ("Gebruik dit formulier NIET voor vragen...") */
#content > strong[style*="red"], #ticketForm > strong[style*="red"] {
    display: block;
    color: var(--mh-waarschuwing) !important;
    background: var(--mh-waarschuwing-licht);
    border: 1px solid #fecdca;
    border-left: 4px solid var(--mh-waarschuwing);
    border-radius: var(--mh-radius);
    padding: 14px 18px;
    font-weight: 600;
    margin-bottom: 20px;
}
#ticketForm > hr, #content > hr { display: none; }

/* Knoppenbalk */
#ticketForm p.buttons, #content p.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 4px 0 0;
}
#ticketForm p.buttons input[type=submit] { order: -1; }

/* ---------- Overige klantpagina's (start, status, inloggen, ticket bekijken) ---------- */
#content .main-content, #content .sidebar,
#clientLogin, #content form.client-login, #ticketThread, #ticketInfo {
    box-sizing: border-box;
}
#clientLogin, #content > form:not(#ticketForm) {
    background: var(--mh-kaart);
    border: 1px solid var(--mh-rand);
    border-radius: calc(var(--mh-radius) + 4px);
    box-shadow: var(--mh-schaduw);
    padding: 24px;
}
#clientLogin input[type=text], #clientLogin input[type=password], #clientLogin input[type=email] { width: 100%; max-width: 360px; }
.front-page-button .button, .front-page-button a.button {
    display: block;
    text-align: center;
    background: var(--mh-accent);
    border-color: var(--mh-accent);
    color: #fff !important;
    margin-bottom: 10px;
}
#content table.list, #content table#ticketTable {
    border-collapse: separate;
    border-spacing: 0;
    background: var(--mh-kaart);
    border: 1px solid var(--mh-rand);
    border-radius: var(--mh-radius);
    overflow: hidden;
}
#content table.list th, #content table#ticketTable th {
    background: var(--mh-achtergrond);
    color: var(--mh-tekst-zacht);
    font-weight: 600;
    border: 0;
    border-bottom: 1px solid var(--mh-rand);
    padding: 10px 12px;
}
#content table.list td, #content table#ticketTable td { border: 0; border-bottom: 1px solid #eef1f4; padding: 10px 12px; }
/* Meldingen (bijv. "Deze reparatie is gesloten..."): osTicket geeft ze een vaste hoogte van 16px,
   waardoor langere tekst op een telefoon buiten het kader loopt. Hoogte nu automatisch. */
#msg_error, #msg_notice, #msg_warning, .warning-banner {
    height: auto !important;
    line-height: 1.45 !important;
    border-radius: var(--mh-radius);
    padding: 12px 16px !important;
    margin: 0 0 16px !important;
    background-image: none !important;
    font-size: 15px;
    box-sizing: border-box;
}
#msg_warning, .warning-banner { background-color: #fff8e6 !important; border: 1px solid #f5d38a !important; border-left: 4px solid #e8a317 !important; color: #5c4400; }
#msg_notice { background-color: #edf8ed !important; border: 1px solid #b9e0b9 !important; border-left: 4px solid #2e9e3e !important; color: #1d4d24; }
#msg_error { background-color: var(--mh-waarschuwing-licht) !important; border: 1px solid #fecdca !important; border-left: 4px solid var(--mh-waarschuwing) !important; color: var(--mh-waarschuwing); }

/* Laden-melding */
#loading {
    border-radius: var(--mh-radius);
    box-shadow: var(--mh-schaduw);
    border: 1px solid var(--mh-rand);
}

/* ---------- Mobiel ---------- */
@media (max-width: 680px) {
    #header { flex-direction: column-reverse; align-items: flex-start; }
    #nav { flex-direction: column; }
    #nav li a { padding: 10px 8px; font-size: 14px; }
    #ticketForm > table > tbody { grid-template-columns: 1fr; padding: 18px; }
    h1 { font-size: 24px; }
}

/* Verborgen originele lijst achter select2 niet laten meetellen voor de breedte */
#ticketForm select.select2-hidden-accessible { width: 1px !important; min-height: 0; padding: 0; border: 0; }

/* ---------- Status opvragen / inloggen (#clientLogin) ---------- */
#clientLogin {
    margin-top: 16px;
    background: var(--mh-kaart) !important;   /* geen slot-plaatje en ingedrukte schaduw meer */
    box-shadow: var(--mh-schaduw) !important;
    border: 1px solid var(--mh-rand);
    border-radius: calc(var(--mh-radius) + 4px);
    padding: 24px;
}
#clientLogin > div[style*="table-row"] {
    display: flex !important;
    flex-wrap: wrap;
    gap: 24px 32px;
}
#clientLogin .login-box { flex: 1 1 320px; min-width: 0; }
#clientLogin .login-box > div:first-child:has(strong:empty) { display: none; }
#clientLogin strong { font-size: 14px; color: var(--mh-waarschuwing); }
#clientLogin label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 14px; }
#clientLogin div input[type=text], #clientLogin div input[type=password], #clientLogin div input[type=email] {
    display: block;
    width: 100%;
    max-width: none;
    margin: 6px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--mh-rand);
    border-radius: 8px;
    font-weight: 400;
}
#clientLogin div input:focus { border-color: var(--mh-accent); box-shadow: 0 0 0 3px var(--mh-focus); }
#clientLogin p { margin: 4px 0 0; }
#clientLogin input[type=submit], #clientLogin div input[type=submit] {
    display: inline-block;
    width: auto;
    background: var(--mh-accent) !important;
    border: 1px solid var(--mh-accent);
    color: #fff !important;
    padding: 12px 28px;
    border-radius: 8px;
}
#clientLogin input[type=submit]:hover { background: var(--mh-accent-donker) !important; }
#clientLogin .instructions {
    display: block !important;
    flex: 1 1 240px;
    padding: 4px 0 4px 24px !important;
    border-left: 1px solid var(--mh-rand);
    color: var(--mh-tekst-zacht);
    align-self: center;
}
/* v12: alleen losse <br> op de inlogpagina verbergen (niet in teksten zoals 'reparatie aangemaakt') */
#content:has(> #clientLogin) > br { display: none; }
#content > p { color: var(--mh-tekst-zacht); }
#content > p:last-child { margin-top: 20px; }

/* Witte knoppen in andere osTicket-formulieren ook leesbaar houden */
#ticketForm div input[type=submit] { background: var(--mh-accent); color: #fff !important; }

@media (max-width: 680px) {
    #clientLogin .instructions { border-left: 0; border-top: 1px solid var(--mh-rand); padding: 16px 0 0 !important; }
}

/* Eigen kader van osTicket rond het inlogblok weghalen (de kaart eromheen is genoeg) */
#clientLogin .login-box {
    box-shadow: none !important;
    border: 0 !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
}
/* Links in de tekst onderstrepen, zodat ze in antraciet herkenbaar blijven */
#content p a, #content .instructions a, #content li a:not(.button) {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: #9aa3ad;
}
#content p a:hover, #content .instructions a:hover { text-decoration-color: currentColor; }

/* "Terug naar webshop" (MH-NAV): compacter en rustiger dan de echte tabbladen */
#nav li:has(> a.webshop) { flex: 0 0 auto; }
#nav li a.webshop {
    color: var(--mh-tekst-zacht);
    font-weight: 500;
    border: 1px dashed var(--mh-rand);
}
#nav li a.webshop:hover { color: var(--mh-tekst); border-color: var(--mh-tekst-zacht); background: var(--mh-kaart); }

/* =====================================================================
   RMA bekijken (tickets.php?id=...): overzicht, gegevens en berichten
   ===================================================================== */
#ticketInfo { width: 100% !important; display: block; border-collapse: separate; }
#ticketInfo > tbody {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
#ticketInfo > tbody > tr { display: contents; }
#ticketInfo > tbody > tr > td { display: block; padding: 0; width: auto !important; min-width: 0; }
#ticketInfo > tbody > tr > td[colspan] { grid-column: 1 / -1; }

/* Titel met RMA-nummer en knoppen */
#ticketInfo h1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 26px;
}
#ticketInfo h1 > b { font-weight: 700; }
#ticketInfo h1 small {
    font-size: 14px;
    font-weight: 600;
    color: var(--mh-tekst-zacht);
    background: var(--mh-kaart);
    border: 1px solid var(--mh-rand);
    border-radius: 999px;
    padding: 3px 12px;
}
#ticketInfo h1 > a:first-child { order: 3; color: var(--mh-tekst-zacht); font-size: 16px; text-decoration: none; }
#ticketInfo h1 > a:first-child:hover { color: var(--mh-tekst); }
#ticketInfo h1 .pull-right { float: none; margin-left: auto; order: 4; }
.action-button, #content .action-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 6px 14px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--mh-tekst) !important;
    background: var(--mh-kaart) !important;
    border: 1px solid var(--mh-rand);
    border-radius: 8px;
    text-decoration: none !important;
}
.action-button:hover { border-color: var(--mh-tekst-zacht); }

/* Kaarten: Reparatie overzicht, Gebruikergegevens, Reparatie details */
#ticketInfo table.infoTable, #ticketInfo table.custom-data {
    width: 100%;
    margin: 0;
    background: var(--mh-kaart);
    border: 1px solid var(--mh-rand);
    border-radius: calc(var(--mh-radius) + 4px);
    box-shadow: var(--mh-schaduw);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
#ticketInfo table .headline {
    background: var(--mh-kaart);
    font-size: 16px;
    font-weight: 700;
    color: var(--mh-tekst);
    padding: 16px 20px 12px !important;
    border-bottom: 1px solid var(--mh-rand);
}
#ticketInfo table.infoTable th, #ticketInfo table.custom-data th {
    background: none;
    width: 40%;
    padding: 10px 12px 10px 20px;
    font-weight: 500;
    color: var(--mh-tekst-zacht);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #eef1f4;
}
#ticketInfo table.custom-data th { width: 30%; }
#ticketInfo table.infoTable td:not(.headline), #ticketInfo table.custom-data td:not(.headline) {
    padding: 10px 20px 10px 12px;
    font-weight: 600;
    color: var(--mh-tekst);
    border-bottom: 1px solid #eef1f4;
    overflow-wrap: anywhere;
}
#ticketInfo table tr:last-child > th, #ticketInfo table tr:last-child > td { border-bottom: 0; }
#ticketInfo table.infoTable thead td.headline { border-bottom: 1px solid var(--mh-rand); }
#content:has(#ticketInfo) > br { display: none; } /* v12: alleen op de RMA-pagina */

/* Berichten en gebeurtenissen */
#ticketThread { margin-top: 28px; position: relative; }
#ticketThread::before { border-left: 2px solid var(--mh-rand); margin-left: 77px; }
.thread-entry::before, .thread-entry::after { border-color: transparent !important; }
.thread-entry > .avatar { width: 44px; border-radius: 50%; }
.thread-entry img.avatar, .avatar > img.avatar {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--mh-kaart);
    box-shadow: 0 0 0 1px var(--mh-rand);
    background: var(--mh-kaart);
}
.thread-entry .header {
    background: var(--mh-kaart) !important;
    border: 1px solid var(--mh-rand);
    border-bottom: 0;
    border-radius: var(--mh-radius) var(--mh-radius) 0 0;
    padding: 12px 16px 4px;
    color: var(--mh-tekst-zacht);
    font-size: 13px;
}
.thread-entry .header b { color: var(--mh-tekst); font-size: 14px; }
.thread-entry.avatar .header::before, .thread-entry.avatar .header::after { display: none; }
.thread-entry .thread-body {
    background: var(--mh-kaart);
    border: 1px solid var(--mh-rand);
    border-top: 0;
    border-radius: 0 0 var(--mh-radius) var(--mh-radius);
    padding: 4px 16px 14px;
    box-shadow: var(--mh-schaduw);
    font-size: 15px;
}
/* Berichten van MobileHardware (antwoorden) iets anders gekleurd dan die van de klant */
.thread-entry.response .header, .thread-entry.response .thread-body { background: #f7f8fa !important; }
.thread-entry.response { border-left: 0; }

.thread-event { color: var(--mh-tekst-zacht); font-size: 13px; }
.thread-event .type-icon, .type-icon {
    background: var(--mh-kaart);
    border: 1px solid var(--mh-rand);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    margin-left: 2px;
}
/* osTicket legt een wit vlak achter het icoon om de tijdlijn te onderbreken: zelfde kleur als de pagina */
.thread-event .type-icon::after { border-color: var(--mh-achtergrond); border-radius: 50%; }
.thread-event img.avatar {
    width: 22px;
    height: 22px;
    max-height: none;
    object-fit: cover;
    border-radius: 50%;
    margin: -2px 6px 0 2px;
}
.thread-event .description { padding-top: 5px; }
.thread-event .description b { color: var(--mh-tekst); }

@media (max-width: 680px) {
    #ticketInfo > tbody { grid-template-columns: 1fr; }
    #ticketInfo h1 { font-size: 22px; }
    #ticketInfo h1 .pull-right { margin-left: 0; }
}
#ticketInfo h1 { line-height: 1.25; }
#ticketInfo h1 .action-button { height: auto; }
#ticketThread { border: 0 !important; padding-bottom: 0; }
.action-button, #content .action-button { box-sizing: border-box; }

/* Ingelogde klant: blok met E-mail / Klant (twee cellen per regel) als kaart "Uw gegevens" */
#ticketForm > table > tbody:has(> tr > td + td)::before {
    content: "Uw gegevens";
    grid-column: 1 / -1;
    display: block;
    font-size: 18px;
    font-weight: 700;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mh-rand);
}
#ticketForm > table > tbody:has(> tr > td + td) > tr:has(hr) { display: none; }
#ticketForm > table > tbody:has(> tr > td + td) > tr > td:first-child {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
}
#ticketForm > table > tbody:has(> tr > td + td) > tr > td + td {
    min-height: 44px;
    box-sizing: border-box;
    padding: 10px 12px !important;
    background: var(--mh-achtergrond);
    border: 1px solid var(--mh-rand);
    border-radius: 8px;
    color: var(--mh-tekst);
    overflow-wrap: anywhere;
}

/* Hoofdknop "Reparatie aanmelden" in het blauw van de webshop */
:root { --mh-blauw: #0066cc; --mh-blauw-donker: #0052a3; }
#ticketForm p.buttons input[type=submit] {
    background: var(--mh-blauw) !important;
    border-color: var(--mh-blauw) !important;
    color: #fff !important;
}
#ticketForm p.buttons input[type=submit]:hover {
    background: var(--mh-blauw-donker) !important;
    border-color: var(--mh-blauw-donker) !important;
}

/* Titel RMA: nummer als blauw label, "opnieuw laden" als ronde knop, alles op één lijn */
#ticketInfo h1 { align-items: center; }
#ticketInfo h1 > b { line-height: 1.2; }
#ticketInfo h1 small {
    order: 2;
    align-self: center;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    color: var(--mh-blauw);
    background: #e8f1fb;
    border: 1px solid #c6dcf3;
    border-radius: 999px;
    padding: 7px 14px;
    vertical-align: middle;
    position: static;
    top: auto;
}
#ticketInfo h1 > a:first-child {
    order: 3;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1px solid var(--mh-rand);
    background: var(--mh-kaart);
    color: var(--mh-tekst-zacht);
    font-size: 15px;
    text-decoration: none;
    transition: color .15s, border-color .15s, background .15s;
}
#ticketInfo h1 > a:first-child:hover {
    color: var(--mh-blauw);
    border-color: var(--mh-blauw);
    background: #e8f1fb;
}
#ticketInfo h1 > a:first-child i.refresh {
    margin: 0;
    padding: 0;
    position: static;
    top: auto;
    font-size: 15px;
    line-height: 1;
    color: inherit;              /* osTicket maakt dit icoon standaard groen */
    vertical-align: baseline;
}

/* Knop "Status opvragen" in het blauw van de webshop */
#clientLogin input[type=submit], #clientLogin div input[type=submit] {
    background: var(--mh-blauw) !important;
    border-color: var(--mh-blauw) !important;
    color: #fff !important;
}
#clientLogin input[type=submit]:hover, #clientLogin div input[type=submit]:hover {
    background: var(--mh-blauw-donker) !important;
    border-color: var(--mh-blauw-donker) !important;
}

/* Tekstlinks herkenbaar maken: webshop-blauw en onderstreept */
#clientLogin a, #content p a, #content .instructions a, #content li a:not(.button),
#ticketForm .filedrop .dropzone a {
    color: var(--mh-blauw) !important;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(0, 102, 204, .4);
}
#clientLogin a:hover, #content p a:hover, #content .instructions a:hover, #content li a:not(.button):hover,
#ticketForm .filedrop .dropzone a:hover {
    color: var(--mh-blauw-donker) !important;
    text-decoration-color: currentColor;
}
/* Inlogpagina: wat lucht tussen de velden en de knop */
#clientLogin .login-box > div { margin-bottom: 12px; }
#clientLogin .login-box > div > input { margin-top: 0 !important; }

/* =====================================================================
   Account registratie / profiel (formulier met table.padded)
   ===================================================================== */
#content form > table.padded { width: 100% !important; display: block; border-collapse: separate; }
#content form > table.padded > tbody {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
    background: var(--mh-kaart);
    border: 1px solid var(--mh-rand);
    border-radius: calc(var(--mh-radius) + 4px);
    box-shadow: var(--mh-schaduw);
    padding: 24px;
    margin-bottom: 20px;
}
#content form > table.padded > tbody > tr { display: block; min-width: 0; }
#content form > table.padded > tbody > tr[style*="none"] { display: none; }
#content form > table.padded > tbody > tr > td { display: block; padding: 0 !important; width: auto !important; }
/* Kopjes (Contact informatie, Toegangscodes) over de volle breedte, met wat ruimte erboven */
#content form > table.padded > tbody > tr:has(h3) { grid-column: 1 / -1; }
#content form > table.padded > tbody > tr:has(h3):not(:first-child) { margin-top: 12px; }
#content form > table.padded hr { display: none; }
#content form > table.padded h3, #content form > table.padded .form-header h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mh-rand);
}
#content form > table.padded .form-header { margin: 0 !important; }
#content form > table.padded .form-header > div:empty { display: none; }
/* Velden en labels zoals op het aanmeldformulier */
#content form > table.padded label { display: block; font-weight: 600; font-size: 14px; }
#content form > table.padded label > br { display: none; }
#content form > table.padded label > span { display: block; margin-bottom: 6px; }
#content form > table.padded label .error { color: var(--mh-waarschuwing); }
#content form > table.padded label input, #content form > table.padded label select,
#content form > table.padded td > input[type=password], #content form > table.padded td > input[type=text] {
    width: 100% !important;
    font-weight: 400;
}
/* Regels met label-cel + veld-cel (wachtwoord) */
#content form > table.padded > tbody > tr > td[width] { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
#content form > table.padded > tbody > tr > td > span.error { color: var(--mh-waarschuwing); font-size: 13px; }
/* Knoppen onder het formulier */
#content form > hr { display: none; }
#content form > p:last-of-type:has(input[type=submit]) {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
#content form > p input[type=submit] {
    background: var(--mh-blauw) !important;
    border-color: var(--mh-blauw) !important;
    color: #fff !important;
}
#content form > p input[type=submit]:hover {
    background: var(--mh-blauw-donker) !important;
    border-color: var(--mh-blauw-donker) !important;
}
@media (max-width: 680px) {
    #content form > table.padded > tbody { grid-template-columns: 1fr; padding: 18px; }
}
#content form > table.padded > tbody > tr, #content form > table.padded > tbody > tr > td { height: auto !important; }
/* De buitenste form hier geen eigen kaart: de tabel is de kaart */
#content > form:has(> table.padded) { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }

/* v13: titel "Uitgebreide klachtomschrijving" in het aanmeldformulier kreeg focus met Tab.
   osTicket geeft .thread-body een scrollbalk (overflow); moderne browsers maken zo'n blok
   met Tab bereikbaar. In het formulier is dat blok alleen een titel, dus niet scrollbaar. */
#ticketForm .thread-body.bleed { overflow: visible !important; }