/* ==========================================================================
   PlayServer.nl — klantenpaneel skin
   Overschrijft het onderliggende WHMCS/Bootstrap-thema volledig.
   Deze file wordt automatisch als laatste ingeladen (assetExists custom.css),
   dus alles hier wint van theme.min.css zonder de kernbestanden te patchen.

    1. Tokens                 8. Sidebar
    2. Basis & typografie     9. Tabellen & lijsten
    3. Layout                10. Overige componenten
    4. Header & navigatie    11. Paginaspecifiek
    5. Knoppen               12. Footer
    6. Formulieren           13. Responsive
    7. Cards & panelen       14. Print & schoonmaak
   ========================================================================== */

/* 1. Tokens --------------------------------------------------------------- */
:root {
  --ps-bg:            #070911;
  --ps-bg-alt:        #0b0f1b;
  --ps-card:          #111728;
  --ps-card-2:        #161d33;
  --ps-card-3:        #1b2440;
  --ps-line:          rgba(255, 255, 255, .09);
  --ps-line-strong:   rgba(255, 255, 255, .16);

  --ps-text:          #e9edf7;
  --ps-muted:         #97a3bd;
  --ps-dim:           #6d7994;

  --ps-primary:       #2f7bff;
  --ps-primary-600:   #1f63e0;
  --ps-primary-soft:  rgba(47, 123, 255, .14);
  --ps-cyan:          #22d3ee;
  --ps-accent:        #f7b500;
  --ps-danger:        #ff4d6d;
  --ps-ok:            #34d399;
  --ps-warn:          #fbbf24;

  --ps-grad-brand:    linear-gradient(135deg, #2f7bff 0%, #22d3ee 100%);
  --ps-grad-button:   linear-gradient(135deg, #2a6ff0 0%, #1544c9 100%);
  --ps-grad-accent:   linear-gradient(135deg, #f7b500 0%, #ff8a3d 100%);
  --ps-grad-card:     linear-gradient(180deg, var(--ps-card-2), var(--ps-card));

  --ps-radius-sm: 10px;
  --ps-radius:    16px;
  --ps-radius-lg: 24px;

  --ps-shadow:      0 18px 48px rgba(0, 0, 0, .45);
  --ps-shadow-sm:   0 8px 24px rgba(0, 0, 0, .35);

  --ps-font: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ps-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --ps-ease: cubic-bezier(.22, 1, .36, 1);

  --ps-header-h: 76px;
}

/* 2. Basis & typografie --------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body,
body.primary-bg-color {
  margin: 0;
  min-height: 100vh;
  background-color: var(--ps-bg);
  background-image:
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px),
    radial-gradient(circle, rgba(47, 123, 255, .22) 0%, transparent 66%),
    radial-gradient(circle, rgba(34, 211, 238, .13) 0%, transparent 66%);
  background-size: 64px 64px, 64px 64px, 1700px 1100px, 1400px 900px;
  background-position: 0 0, 0 0, 8% -420px, 96% -260px;
  background-repeat: repeat, repeat, no-repeat, no-repeat;
  background-attachment: scroll;
  color: var(--ps-text);
  font-family: var(--ps-font);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ps-font);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--ps-text);
}
h1, .h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; }
h2, .h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3, .h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
h4, .h4 { font-size: 1.15rem; }
h5, .h5 { font-size: 1.02rem; }
h6, .h6 { font-size: .95rem; }

a { color: var(--ps-cyan); text-decoration: none; transition: color .2s var(--ps-ease); }
a:hover, a:focus { color: #7ee7f7; text-decoration: none; }

p { color: var(--ps-muted); }

hr { border-top: 1px solid var(--ps-line); }

code, kbd, pre, samp { font-family: var(--ps-mono); }
code { color: var(--ps-cyan); background: rgba(34, 211, 238, .08); padding: .12em .4em; border-radius: 6px; }
pre {
  background: var(--ps-bg-alt);
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius-sm);
  padding: 1rem;
  color: var(--ps-text);
  overflow-x: auto;
}

::selection { background: rgba(47, 123, 255, .35); color: #fff; }

:focus-visible { outline: 2px solid var(--ps-cyan); outline-offset: 2px; }

/* Tekst- en achtergrond-utilities die uitgaan van een lichte pagina */
.text-muted { color: var(--ps-muted) !important; }
.text-dark, .text-body, .text-black { color: var(--ps-text) !important; }
.text-white { color: #fff !important; }
.text-primary { color: var(--ps-primary) !important; }
.text-success { color: var(--ps-ok) !important; }
.text-danger  { color: var(--ps-danger) !important; }
.text-warning { color: var(--ps-warn) !important; }
.text-info    { color: var(--ps-cyan) !important; }
.text-secondary { color: var(--ps-dim) !important; }

.bg-white, .bg-light { background-color: var(--ps-card) !important; color: var(--ps-text); }
.bg-dark { background-color: var(--ps-bg-alt) !important; }
.bg-primary { background: var(--ps-grad-button) !important; }
.bg-success { background-color: var(--ps-ok) !important; color: #04231a !important; }
.bg-danger  { background-color: var(--ps-danger) !important; }
.bg-warning { background-color: var(--ps-accent) !important; color: #1a1204 !important; }
.bg-info    { background-color: var(--ps-cyan) !important; color: #04222a !important; }

/* Scrollbars */
* { scrollbar-color: #2a3350 var(--ps-bg); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ps-bg); }
::-webkit-scrollbar-thumb { background: #2a3350; border-radius: 999px; border: 2px solid var(--ps-bg); }
::-webkit-scrollbar-thumb:hover { background: #3b4874; }

/* 3. Layout --------------------------------------------------------------- */
@media (min-width: 1400px) {
  .container { max-width: 1240px; }
}

#main-body {
  flex: 1 0 auto;
  padding: 2.25rem 0 3.5rem;
}
#main-body > .container { position: relative; z-index: 1; }

.primary-content { min-width: 0; }
@media (min-width: 992px) {
  .primary-content { padding-left: 1rem; }
}

.master-breadcrumb {
  background: transparent;
  border: 0;
  padding: 1.1rem 0 0;
}
.master-breadcrumb .breadcrumb {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font-size: .86rem;
}
.breadcrumb-item, .breadcrumb-item a { color: var(--ps-dim); }
.breadcrumb-item a:hover { color: var(--ps-cyan); }
.breadcrumb-item.active { color: var(--ps-muted); }
.breadcrumb-item + .breadcrumb-item::before { color: #3a4361; content: "/"; }

/* 4. Header & navigatie --------------------------------------------------- */
#header, .header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(7, 9, 17, .82);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--ps-line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* Topbar (ingelogd) */
.header .topbar {
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid var(--ps-line);
  font-size: .84rem;
  padding: .3rem 0;
}
.header .topbar .btn {
  color: var(--ps-muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: .3rem .75rem;
  font-size: .84rem;
  font-weight: 500;
  box-shadow: none;
}
.header .topbar .btn:hover { color: var(--ps-text); background: rgba(255, 255, 255, .06); }
.header .topbar .input-group-text {
  background: transparent;
  border: 0;
  color: var(--ps-dim);
  font-size: .84rem;
  padding-right: .4rem;
}
.header .topbar .btn-active-client {
  color: var(--ps-text);
  font-weight: 600;
  background: rgba(47, 123, 255, .12);
  border: 1px solid rgba(47, 123, 255, .28);
}
.header .topbar .btn-active-client:hover { background: rgba(47, 123, 255, .2); }
.header .topbar .btn-group > .btn { margin-left: .35rem; }
.btn-return-to-admin {
  background: var(--ps-grad-accent) !important;
  color: #1a1204 !important;
  border: 0 !important;
  font-weight: 600;
}

/* Merkbalk */
.header .navbar { padding: .65rem 0; background: transparent; }
.header .navbar-brand {
  padding: 0;
  margin-right: 1.5rem;
  display: flex;
  align-items: center;
  color: var(--ps-text);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -.02em;
}
.header .navbar-brand .logo-img,
.header .navbar-brand img { max-height: 40px; width: auto; display: block; }

/* Zoekveld in de header */
.header .input-group.search .form-control {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--ps-line);
  border-left: 0;
  color: var(--ps-text);
  border-radius: 0 999px 999px 0;
  height: 42px;
  min-width: 240px;
}
.header .input-group.search .form-control::placeholder { color: var(--ps-dim); }
.header .input-group.search .form-control:focus {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(47, 123, 255, .5);
  box-shadow: none;
}
.header .input-group.search .btn {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--ps-line);
  border-right: 0;
  color: var(--ps-dim);
  border-radius: 999px 0 0 999px;
  height: 42px;
  padding: 0 .95rem;
}
.header .input-group.search .btn:hover { color: var(--ps-cyan); transform: none; }

/* Toolbar rechts */
.header .toolbar .nav-link,
.header .toolbar .btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--ps-line);
  background: rgba(255, 255, 255, .04);
  color: var(--ps-muted);
  transition: all .2s var(--ps-ease);
}
.header .toolbar .nav-link:hover,
.header .toolbar .btn:hover {
  color: var(--ps-text);
  border-color: rgba(47, 123, 255, .45);
  background: var(--ps-primary-soft);
  transform: none;
}
.header .toolbar .cart-btn .badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--ps-grad-button);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  padding: .2rem .4rem;
  border-radius: 999px;
  border: 2px solid var(--ps-bg);
}

/* Hoofdnavigatie */
.main-navbar-wrapper { padding: 0 0 .55rem; background: transparent; }
.main-navbar-wrapper .navbar-nav > li > a,
#nav > li > a {
  color: var(--ps-muted);
  font-weight: 500;
  font-size: .95rem;
  padding: .5rem .9rem !important;
  border-radius: 999px;
  transition: color .2s, background .2s;
}
.main-navbar-wrapper .navbar-nav > li > a:hover,
.main-navbar-wrapper .navbar-nav > li.show > a {
  color: #fff;
  background: rgba(255, 255, 255, .06);
}
.main-navbar-wrapper .navbar-nav > li.active > a { background: var(--ps-primary-soft); color: #fff; }
.main-navbar-wrapper .navbar-nav .badge {
  background: var(--ps-primary-soft);
  color: var(--ps-cyan);
  border: 1px solid rgba(47, 123, 255, .3);
  border-radius: 999px;
  font-weight: 600;
}

/* Dropdowns */
.dropdown-menu {
  background: var(--ps-card-2);
  border: 1px solid var(--ps-line-strong);
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow);
  padding: .5rem;
  margin-top: .5rem;
  color: var(--ps-text);
  min-width: 13rem;
}
.dropdown-menu > li,
.dropdown-menu .dropdown-item {
  background: transparent;
  border-radius: var(--ps-radius-sm);
  color: var(--ps-muted);
  padding: 0;
}
.dropdown-menu a.dropdown-item {
  display: block;
  padding: .5rem .75rem !important;
  color: var(--ps-muted);
  font-size: .92rem;
  border-radius: var(--ps-radius-sm);
  white-space: normal;
}
.dropdown-menu a.dropdown-item:hover,
.dropdown-menu a.dropdown-item:focus { background: var(--ps-primary-soft); color: #fff; }
.dropdown-divider { border-top: 1px solid var(--ps-line); margin: .4rem .25rem; }

/* Popover met meldingen */
.popover {
  background: var(--ps-card-2);
  border: 1px solid var(--ps-line-strong);
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow);
  color: var(--ps-text);
  max-width: 340px;
}
.popover .popover-header {
  background: transparent;
  border-bottom: 1px solid var(--ps-line);
  color: var(--ps-text);
  font-weight: 600;
}
.popover .popover-body { color: var(--ps-muted); }
.client-alerts { list-style: none; margin: 0; padding: 0; }
.client-alerts li + li { border-top: 1px solid var(--ps-line); }
.client-alerts a { display: flex; gap: .6rem; padding: .65rem .25rem; color: var(--ps-muted); }
.client-alerts a:hover { color: var(--ps-text); }
.client-alerts .none { padding: .65rem .25rem; color: var(--ps-dim); }

.tooltip-inner {
  background: var(--ps-card-3);
  border: 1px solid var(--ps-line-strong);
  color: var(--ps-text);
  border-radius: var(--ps-radius-sm);
  font-size: .82rem;
}
.tooltip .arrow::before { border-top-color: var(--ps-card-3); border-bottom-color: var(--ps-card-3); }

/* Mobiel menu */
@media (max-width: 1199.98px) {
  .main-navbar-wrapper .navbar-collapse {
    background: var(--ps-card);
    border: 1px solid var(--ps-line);
    border-radius: var(--ps-radius);
    padding: .85rem;
    margin-bottom: .5rem;
    box-shadow: var(--ps-shadow);
    max-height: calc(100vh - var(--ps-header-h) - 2rem);
    overflow-y: auto;
  }
  .main-navbar-wrapper .navbar-nav { width: 100%; }
  .main-navbar-wrapper .navbar-nav > li > a { padding: .65rem .8rem !important; }
  .main-navbar-wrapper .dropdown-menu {
    position: static !important;
    float: none;
    width: 100%;
    transform: none !important;
    background: rgba(255, 255, 255, .03);
    border: 0;
    box-shadow: none;
    margin: .15rem 0 .4rem;
  }
}

/* 5. Knoppen -------------------------------------------------------------- */
.btn {
  font-family: var(--ps-font);
  font-weight: 600;
  font-size: .93rem;
  line-height: 1.3;
  border-radius: 999px;
  padding: .62rem 1.35rem;
  border: 1px solid transparent;
  transition: transform .18s var(--ps-ease), background .2s, border-color .2s, box-shadow .25s, color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px rgba(47, 123, 255, .3); }

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
  background: var(--ps-grad-button);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 30px rgba(47, 123, 255, .3);
}
.btn-primary:hover { background: var(--ps-grad-button); box-shadow: 0 16px 40px rgba(47, 123, 255, .45); color: #fff; }

.btn-secondary, .btn-default,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-default:not(:disabled):not(.disabled):active {
  background: rgba(255, 255, 255, .05);
  border-color: var(--ps-line-strong);
  color: var(--ps-text);
}
.btn-secondary:hover, .btn-default:hover {
  background: rgba(255, 255, 255, .1);
  border-color: var(--ps-line-strong);
  color: #fff;
}

.btn-success, .btn-success:not(:disabled):not(.disabled):active {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  border-color: transparent;
  color: #04231a;
  box-shadow: 0 10px 30px rgba(52, 211, 153, .25);
}
.btn-success:hover { color: #04231a; box-shadow: 0 16px 40px rgba(52, 211, 153, .35); }

.btn-danger, .btn-danger:not(:disabled):not(.disabled):active {
  background: linear-gradient(135deg, #ff6b85 0%, #e11d48 100%);
  border-color: transparent;
  color: #fff;
}
.btn-warning, .btn-warning:not(:disabled):not(.disabled):active {
  background: var(--ps-grad-accent);
  border-color: transparent;
  color: #1a1204;
}
.btn-info, .btn-info:not(:disabled):not(.disabled):active {
  background: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%);
  border-color: transparent;
  color: #04222a;
}

.btn-outline-primary { background: transparent; border-color: rgba(47, 123, 255, .45); color: var(--ps-cyan); }
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
  background: var(--ps-primary-soft);
  border-color: var(--ps-primary);
  color: #fff;
}
.btn-outline-secondary, .btn-outline-dark, .btn-outline-light {
  background: transparent;
  border-color: var(--ps-line-strong);
  color: var(--ps-muted);
}
.btn-outline-secondary:hover, .btn-outline-dark:hover, .btn-outline-light:hover {
  background: rgba(255, 255, 255, .07);
  border-color: var(--ps-line-strong);
  color: var(--ps-text);
}
.btn-outline-danger { background: transparent; border-color: rgba(255, 77, 109, .5); color: var(--ps-danger); }
.btn-outline-danger:hover { background: rgba(255, 77, 109, .14); color: #fff; border-color: var(--ps-danger); }
.btn-outline-success { background: transparent; border-color: rgba(52, 211, 153, .5); color: var(--ps-ok); }
.btn-outline-success:hover { background: rgba(52, 211, 153, .14); color: #fff; border-color: var(--ps-ok); }

.btn-link { color: var(--ps-cyan); box-shadow: none; }
.btn-link:hover { color: #7ee7f7; text-decoration: none; }

.btn-sm, .btn-group-sm > .btn { padding: .42rem 1rem; font-size: .84rem; }
.btn-xs { padding: .25rem .75rem; font-size: .76rem; border-radius: 999px; }
.btn-lg, .btn-group-lg > .btn { padding: .85rem 1.9rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn.disabled, .btn:disabled { opacity: .45; transform: none; box-shadow: none; }

.btn-group > .btn { border-radius: 999px; }
.btn-group > .btn:not(:first-child) { margin-left: .3rem; }
.btn-group .btn:hover { transform: none; }

.btn-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--ps-line);
  background: rgba(255, 255, 255, .04);
  color: var(--ps-muted);
}
.btn-icon:hover { color: var(--ps-cyan); border-color: rgba(47, 123, 255, .45); background: var(--ps-primary-soft); }

/* 6. Formulieren ---------------------------------------------------------- */
label, .form-control-label, .control-label {
  color: var(--ps-text);
  font-weight: 500;
  font-size: .9rem;
  margin-bottom: .35rem;
}

.form-control,
.custom-select,
select.form-control,
textarea.form-control {
  background-color: rgba(255, 255, 255, .04);
  border: 1px solid var(--ps-line-strong);
  border-radius: var(--ps-radius-sm);
  color: var(--ps-text);
  font-family: var(--ps-font);
  font-size: .95rem;
  min-height: 44px;
  padding: .55rem .9rem;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
textarea.form-control { min-height: 110px; }
.form-control::placeholder { color: var(--ps-dim); }
.form-control:focus, .custom-select:focus {
  background-color: rgba(255, 255, 255, .07);
  border-color: var(--ps-primary);
  box-shadow: 0 0 0 3px rgba(47, 123, 255, .18);
  color: var(--ps-text);
}
.form-control:disabled, .form-control[readonly] {
  background-color: rgba(255, 255, 255, .02);
  color: var(--ps-dim);
}
.form-control-plaintext { color: var(--ps-text); }

/* Native dropdown-opties leesbaar houden op donker */
select.form-control option,
.custom-select option { background: var(--ps-card-2); color: var(--ps-text); }

.custom-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2397a3bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: 18px;
  padding-right: 2.2rem;
  -webkit-appearance: none;
  appearance: none;
}

.input-group-text {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--ps-line-strong);
  color: var(--ps-dim);
  border-radius: var(--ps-radius-sm);
}
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-prepend > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-append > .btn { border-radius: 0 var(--ps-radius-sm) var(--ps-radius-sm) 0; }
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group .btn:hover { transform: none; }

.form-check-input, input[type="checkbox"], input[type="radio"] { accent-color: var(--ps-primary); }
.custom-control-label { color: var(--ps-muted); }
.custom-control-label::before { background-color: rgba(255, 255, 255, .06); border-color: var(--ps-line-strong); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--ps-primary); border-color: var(--ps-primary); }

.form-text, .help-block, small.text-muted { color: var(--ps-dim) !important; }
.invalid-feedback, .field-error { color: var(--ps-danger); }
.is-invalid, .has-error .form-control { border-color: var(--ps-danger) !important; }

/* Plug-ins: intl-tel-input, select2 */
.iti__country-list, .select2-dropdown,
.select2-container--default .select2-results__options {
  background: var(--ps-card-2) !important;
  color: var(--ps-text) !important;
  border-color: var(--ps-line-strong) !important;
}
.iti__country:hover,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--ps-primary-soft) !important;
  color: #fff !important;
}
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid var(--ps-line-strong) !important;
  border-radius: var(--ps-radius-sm) !important;
  min-height: 44px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ps-text) !important; line-height: 42px; }

/* 7. Cards & panelen ------------------------------------------------------ */
/* Let op: bewust GEEN overflow:hidden op .card — WHMCS opent dropdowns
   binnenin kaarten (o.a. bij services en domeinen) en die zouden dan
   afgeknipt worden. De ronde hoeken komen van de losse radius-regels. */
.card, .panel {
  position: relative;
  background: var(--ps-grad-card);
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow-sm);
  color: var(--ps-text);
}
.card > .card-header:first-child,
.panel > .panel-heading:first-child { border-radius: var(--ps-radius) var(--ps-radius) 0 0; }
.card > .card-footer:last-child,
.panel > .panel-footer:last-child { border-radius: 0 0 var(--ps-radius) var(--ps-radius); }
.card > .card-body:first-child { border-radius: var(--ps-radius) var(--ps-radius) 0 0; }
.card > .card-body:last-child { border-radius: 0 0 var(--ps-radius) var(--ps-radius); }
.card > .table-responsive:last-child,
.card > .table:last-child { border-radius: 0 0 var(--ps-radius) var(--ps-radius); overflow: hidden; }

.card-header, .panel-heading {
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid var(--ps-line);
  padding: 1rem 1.25rem;
  color: var(--ps-text);
}
.card-header .card-title, .card-title {
  color: var(--ps-text);
  font-size: 1.02rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -.01em;
}
.card-body, .panel-body { padding: 1.35rem; color: var(--ps-muted); }
.card-body h1, .card-body h2, .card-body h3, .card-body h4, .card-body h5 { color: var(--ps-text); }
.card-footer, .panel-footer {
  background: rgba(255, 255, 255, .02);
  border-top: 1px solid var(--ps-line);
  padding: 1rem 1.25rem;
  color: var(--ps-muted);
}
.card-text { color: var(--ps-muted); }

/* Accentstreep bovenaan gekleurde cards, in plaats van bonte headers */
.card[class*="card-accent-"]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: var(--ps-radius) var(--ps-radius) 0 0;
  background: var(--ps-grad-brand);
  z-index: 2;
}
.card-accent-green::before, .card-accent-emerald::before, .card-accent-lime::before { background: linear-gradient(135deg, #34d399, #10b981); }
.card-accent-red::before, .card-accent-pomegranate::before { background: linear-gradient(135deg, #ff6b85, #e11d48); }
.card-accent-gold::before, .card-accent-orange::before, .card-accent-sun-flower::before { background: var(--ps-grad-accent); }
.card-accent-teal::before, .card-accent-turquoise::before { background: linear-gradient(135deg, #22d3ee, #0891b2); }
.card-accent-purple::before, .card-accent-amethyst::before, .card-accent-magenta::before, .card-accent-pink::before { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.card-accent-silver::before, .card-accent-asbestos::before { background: linear-gradient(135deg, #97a3bd, #5b667f); }

[class*="card-accent-"] > .card-header {
  background: rgba(255, 255, 255, .03) !important;
  border-bottom: 1px solid var(--ps-line) !important;
  color: var(--ps-text) !important;
}
[class*="card-accent-"] > .card-header .card-title,
[class*="card-accent-"] > .card-header h3 { color: var(--ps-text) !important; }

[class*="bg-color-"] { background-image: var(--ps-grad-brand) !important; }
.bg-color-green { background-image: linear-gradient(135deg, #34d399, #10b981) !important; }
.bg-color-red { background-image: linear-gradient(135deg, #ff6b85, #e11d48) !important; }
.bg-color-gold, .bg-color-orange { background-image: var(--ps-grad-accent) !important; }

.card-columns .card { break-inside: avoid; }
.card-columns .card,
.client-home-cards .card { transition: transform .3s var(--ps-ease), border-color .3s, box-shadow .3s; }
.card-columns .card:hover {
  transform: translateY(-4px);
  border-color: var(--ps-line-strong);
  box-shadow: var(--ps-shadow);
}

/* 8. Sidebar -------------------------------------------------------------- */
.sidebar .card, .card-sidebar {
  background: var(--ps-grad-card);
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius);
  overflow: hidden;
}
.sidebar .card-header { background: rgba(255, 255, 255, .03); padding: .85rem 1.1rem; }
.sidebar .card-title, .sidebar .card-header h3 {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ps-dim);
}
.sidebar .card-minimise { color: var(--ps-dim); font-size: .8rem; cursor: pointer; transition: transform .25s var(--ps-ease); }
.sidebar .card-minimise.minimised { transform: rotate(180deg); }

.sidebar .list-group { background: transparent; }
.sidebar .list-group-item,
.list-group-flush .list-group-item {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ps-line);
  color: var(--ps-muted);
  padding: .7rem 1.1rem;
  font-size: .92rem;
  transition: background .2s, color .2s, padding-left .2s;
}
.sidebar .list-group-item:first-child { border-top: 0; }
.sidebar .list-group-item:hover { background: rgba(255, 255, 255, .04); color: var(--ps-text); padding-left: 1.35rem; }
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus {
  background: var(--ps-primary-soft);
  color: #fff;
  border-color: var(--ps-line);
  box-shadow: inset 3px 0 0 var(--ps-primary);
}
.sidebar .list-group-item.disabled { color: #4a5470; background: transparent; }
.sidebar .list-group-item .badge { background: rgba(255, 255, 255, .08); color: var(--ps-muted); border-radius: 999px; }
.sidebar .sidebar-menu-item-wrapper { display: flex; align-items: center; gap: .6rem; }
.sidebar .sidebar-menu-item-icon-wrapper { width: 1.4rem; text-align: center; color: var(--ps-dim); }
.sidebar .list-group-item:hover .sidebar-menu-item-icon-wrapper,
.sidebar .list-group-item.active .sidebar-menu-item-icon-wrapper { color: var(--ps-cyan); }
.sidebar .sidebar-menu-item-label { flex: 1; min-width: 0; }
.sidebar .sidebar-menu-item-badge { margin-left: auto; }

/* 9. Tabellen & lijsten --------------------------------------------------- */
.table, .table-responsive > .table {
  color: var(--ps-muted);
  border-color: var(--ps-line);
  margin-bottom: 0;
}
.table thead th {
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid var(--ps-line-strong);
  border-top: 0;
  color: var(--ps-dim);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .85rem 1rem;
  white-space: nowrap;
}
.table td, .table th { border-top: 1px solid var(--ps-line); padding: .85rem 1rem; vertical-align: middle; }
.table tbody tr { transition: background .2s; }
.table-hover tbody tr:hover, .table tbody tr:hover { background: rgba(255, 255, 255, .035); color: var(--ps-text); }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(255, 255, 255, .018); }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--ps-line); }
.table .thead-light th, .table .thead-dark th {
  background: rgba(255, 255, 255, .04);
  color: var(--ps-dim);
  border-color: var(--ps-line-strong);
}
.table a { color: var(--ps-cyan); font-weight: 500; }
.table-responsive { -webkit-overflow-scrolling: touch; }
.card > .table-responsive { margin-bottom: 0; }

/* DataTables */
.dataTables_wrapper { color: var(--ps-muted); }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--ps-line-strong);
  border-radius: var(--ps-radius-sm);
  color: var(--ps-text);
  padding: .4rem .7rem;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label { color: var(--ps-dim); }

.list-group-item { background: transparent; border-color: var(--ps-line); color: var(--ps-muted); }
.list-group-item-action:hover { background: rgba(255, 255, 255, .04); color: var(--ps-text); }

/* Paginering */
.pagination { gap: .3rem; }
.page-link {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius-sm) !important;
  color: var(--ps-muted);
  min-width: 40px;
  text-align: center;
}
.page-link:hover { background: var(--ps-primary-soft); border-color: rgba(47, 123, 255, .4); color: #fff; }
.page-item.active .page-link { background: var(--ps-grad-button); border-color: transparent; color: #fff; }
.page-item.disabled .page-link { background: transparent; color: #48516c; border-color: var(--ps-line); }

/* 10. Overige componenten ------------------------------------------------- */
.alert {
  border: 1px solid var(--ps-line-strong);
  border-radius: var(--ps-radius);
  background: var(--ps-card-2);
  color: var(--ps-text);
  padding: 1rem 1.15rem;
  box-shadow: var(--ps-shadow-sm);
}
.alert a { font-weight: 600; }
.alert-success { border-color: rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .1); color: #b7f3dd; }
.alert-danger  { border-color: rgba(255, 77, 109, .35); background: rgba(255, 77, 109, .1); color: #ffc6d1; }
.alert-warning { border-color: rgba(247, 181, 0, .35); background: rgba(247, 181, 0, .1); color: #ffe6a8; }
.alert-info    { border-color: rgba(34, 211, 238, .35); background: rgba(34, 211, 238, .1); color: #b6f0fb; }
.alert-primary { border-color: rgba(47, 123, 255, .35); background: var(--ps-primary-soft); color: #cfe0ff; }
.alert-secondary, .alert-light, .alert-dark { border-color: var(--ps-line-strong); background: rgba(255, 255, 255, .04); color: var(--ps-muted); }
.alert .close { color: inherit; opacity: .55; text-shadow: none; }
.alert .close:hover { opacity: 1; }

.badge {
  font-family: var(--ps-font);
  font-weight: 600;
  border-radius: 999px;
  padding: .32em .7em;
  font-size: .74rem;
}
.badge-primary { background: var(--ps-primary); color: #fff; }
.badge-success { background: rgba(52, 211, 153, .18); color: var(--ps-ok); border: 1px solid rgba(52, 211, 153, .35); }
.badge-danger  { background: rgba(255, 77, 109, .18); color: var(--ps-danger); border: 1px solid rgba(255, 77, 109, .35); }
.badge-warning { background: rgba(247, 181, 0, .18); color: var(--ps-accent); border: 1px solid rgba(247, 181, 0, .35); }
.badge-info    { background: rgba(34, 211, 238, .18); color: var(--ps-cyan); border: 1px solid rgba(34, 211, 238, .35); }
.badge-secondary, .badge-default { background: rgba(255, 255, 255, .08); color: var(--ps-muted); }
.label { border-radius: 999px; padding: .32em .7em; font-weight: 600; }

/* Modals */
.modal-content {
  background: var(--ps-card);
  border: 1px solid var(--ps-line-strong);
  border-radius: var(--ps-radius-lg);
  box-shadow: var(--ps-shadow);
  color: var(--ps-text);
}
.modal-header, .modal-footer { border-color: var(--ps-line); }
.modal-header { padding: 1.15rem 1.5rem; }
.modal-body { padding: 1.5rem; color: var(--ps-muted); }
.modal-footer { padding: 1rem 1.5rem; gap: .5rem; }
.modal-title { color: var(--ps-text); font-weight: 600; }
.modal .close { color: var(--ps-muted); text-shadow: none; opacity: .7; font-weight: 400; }
.modal .close:hover { color: var(--ps-text); opacity: 1; }
.modal-backdrop, .modal-backdrop.show { background: #04060c; opacity: .78 !important; }

.modal-localisation .item-selector .item {
  display: block;
  padding: .6rem .9rem;
  margin-bottom: .5rem;
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius-sm);
  color: var(--ps-muted);
  text-align: center;
  font-size: .9rem;
}
.modal-localisation .item-selector .item:hover { border-color: rgba(47, 123, 255, .45); color: var(--ps-text); background: var(--ps-primary-soft); }
.modal-localisation .item-selector .item.active { background: var(--ps-grad-button); border-color: transparent; color: #fff; }

/* Tabs & pills */
.nav-tabs { border-bottom: 1px solid var(--ps-line); gap: .25rem; }
.nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--ps-dim);
  font-weight: 500;
  padding: .7rem 1rem;
}
.nav-tabs .nav-link:hover { color: var(--ps-text); border-bottom-color: var(--ps-line-strong); }
.nav-tabs .nav-link.active { background: transparent; color: #fff; border-bottom-color: var(--ps-primary); }
.nav-pills .nav-link { border-radius: 999px; color: var(--ps-muted); }
.nav-pills .nav-link.active { background: var(--ps-grad-button); color: #fff; }

/* Progress */
.progress { background: rgba(255, 255, 255, .06); border-radius: 999px; height: .6rem; }
.progress-bar { background: var(--ps-grad-brand); border-radius: 999px; }

.accordion .card { margin-bottom: .6rem; border-radius: var(--ps-radius) !important; }

#fullpage-overlay { background: rgba(7, 9, 17, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#fullpage-overlay .msg { color: var(--ps-text); font-weight: 500; }

.well, .jumbotron {
  background: var(--ps-grad-card);
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius);
  color: var(--ps-muted);
}

blockquote, .blockquote {
  border-left: 3px solid var(--ps-primary);
  background: rgba(255, 255, 255, .03);
  padding: .8rem 1.1rem;
  border-radius: 0 var(--ps-radius-sm) var(--ps-radius-sm) 0;
  color: var(--ps-muted);
}

/* 11. Paginaspecifiek ----------------------------------------------------- */

/* Statistiektegels op het klantoverzicht */
.tiles { margin-bottom: 1.5rem; }
.tiles .tile {
  position: relative;
  display: block;
  height: 100%;
  padding: 1.4rem 1.25rem;
  margin: .4rem;
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius);
  background: var(--ps-grad-card);
  color: var(--ps-muted);
  overflow: hidden;
  transition: transform .3s var(--ps-ease), border-color .3s, box-shadow .3s;
}
.tiles .tile:hover {
  transform: translateY(-4px);
  border-color: rgba(47, 123, 255, .4);
  box-shadow: var(--ps-shadow);
  color: var(--ps-text);
}
.tiles .tile > i {
  position: absolute;
  top: 1.1rem;
  right: 1.2rem;
  font-size: 1.6rem;
  color: rgba(47, 123, 255, .3);
  transition: color .3s;
}
.tiles .tile:hover > i { color: var(--ps-cyan); }
.tiles .tile .stat {
  font-family: var(--ps-mono);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ps-text);
}
.tiles .tile .title {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ps-dim);
}
.tiles .tile .highlight { position: absolute; inset: auto 0 0 0; height: 3px; border: 0; border-radius: 0; }

/* Domeinzoeker */
.home-domain-search {
  background: transparent !important;
  border-top: 1px solid var(--ps-line);
  border-bottom: 1px solid var(--ps-line);
  margin-top: 1rem;
}
.home-domain-search h2 { color: var(--ps-text); margin-bottom: 1.25rem; }
.home-domain-search .input-group-wrapper {
  max-width: 760px;
  margin: 0 auto;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--ps-line-strong);
  border-radius: 999px;
  padding: .3rem;
  box-shadow: var(--ps-shadow-sm);
}
.home-domain-search .input-group-wrapper .form-control {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--ps-text);
  font-size: 1rem;
  padding-left: 1.25rem;
  min-height: 46px;
}
.home-domain-search .input-group-wrapper .form-control:focus { box-shadow: none; background: transparent; }
.home-domain-search .input-group-wrapper .btn { border-radius: 999px; margin-left: .3rem; }
.home-domain-search .tld-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  list-style: none;
  padding: 1.5rem 0 0;
  margin: 0;
}
.home-domain-search .tld-logos li {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .9rem;
  border: 1px solid var(--ps-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  color: var(--ps-muted);
  font-size: .88rem;
  float: none;
  width: auto;
}
.home-domain-search .tld-logos img { max-height: 22px; width: auto; }

/* Login / registratie */
.login-form .card, .mw-540 {
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--ps-radius-lg);
  box-shadow: var(--ps-shadow);
}
.login-form .card-footer { text-align: center; color: var(--ps-dim); }
.login-form .input-group-merge .input-group-text { border-right: 0; }
.login-form .input-group-merge .form-control { border-left: 0; }

/* Bestelproces / winkelwagen */
#order-standard_cart .product,
#order-standard_cart .cart-product-group,
.cart-body, .order-summary, .cart-sidebar {
  background: var(--ps-grad-card);
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius);
  color: var(--ps-muted);
}
#order-standard_cart h1, #order-standard_cart h2,
.view-cart-items-header, .cart-items-header { color: var(--ps-text); }
#order-standard_cart .product .product-desc { color: var(--ps-muted); }
#order-standard_cart .price, .product-pricing .price { color: var(--ps-text); font-family: var(--ps-mono); }
.summary-container, .order-summary .summary-container { background: transparent; }

/* Facturen & offertes.
   viewinvoice.tpl / viewquote.tpl zijn losse pagina's die hun eigen Bootstrap
   (invoice.min.css) meebrengen; custom.css wordt daar ná geladen. Vandaar dat
   deze regels de kleuren expliciet terugzetten. Print blijft licht — zie §14. */
.invoice-container, .quote-container, #invoice {
  padding-top: 2rem;
  padding-bottom: 3rem;
  color: var(--ps-muted);
}
.invoice-container .table, #invoice .table { color: var(--ps-muted); }
.invoice-header { margin-bottom: 2rem; }
.invoice-header img { max-height: 56px; width: auto; }
.invoice-status {
  display: inline-block;
  padding: .4rem 1.1rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .82rem;
}
.invoice-status.paid { background: rgba(52, 211, 153, .18); color: var(--ps-ok); border: 1px solid rgba(52, 211, 153, .35); }
.invoice-status.unpaid { background: rgba(255, 77, 109, .18); color: var(--ps-danger); border: 1px solid rgba(255, 77, 109, .35); }
.invoice-status.refunded, .invoice-status.cancelled, .invoice-status.collections {
  background: rgba(255, 255, 255, .08);
  color: var(--ps-muted);
  border: 1px solid var(--ps-line-strong);
}
.invoice-container .total-row, #invoice .total-row { color: var(--ps-text); font-weight: 600; }
.invoice-container .card-subtitle { color: var(--ps-dim); }
.transactions-container { color: var(--ps-muted); }

/* Supporttickets */
.ticket-reply, .ticket-message {
  background: var(--ps-grad-card);
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius);
  color: var(--ps-muted);
  margin-bottom: 1rem;
  overflow: hidden;
}
.ticket-reply .ticket-header, .ticket-message .ticket-header {
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid var(--ps-line);
  color: var(--ps-text);
}
.ticket-reply.staff, .ticket-message.staff { border-color: rgba(47, 123, 255, .35); }

/* Markdown-editor (EasyMDE) */
.EasyMDEContainer .CodeMirror,
.editor-toolbar, .editor-preview, .editor-statusbar {
  background: rgba(255, 255, 255, .04) !important;
  border-color: var(--ps-line-strong) !important;
  color: var(--ps-text) !important;
}
.editor-toolbar button { color: var(--ps-muted) !important; }
.editor-toolbar button:hover { background: rgba(255, 255, 255, .08) !important; }
.CodeMirror-cursor { border-left-color: var(--ps-cyan) !important; }

/* Kennisbank / aankondigingen */
.kb-article, .announcement { color: var(--ps-muted); }
.kb-article h1, .announcement h1 { color: var(--ps-text); }

.network-issues-notifications .alert { border-radius: 0; margin: 0; }

/* 12. Footer -------------------------------------------------------------- */
#footer, .footer {
  flex-shrink: 0;
  margin-top: auto;
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 1.75rem;
  background: linear-gradient(180deg, rgba(11, 15, 27, 0), rgba(11, 15, 27, .9));
  border-top: 1px solid var(--ps-line);
  color: var(--ps-muted);
  font-size: .93rem;
}
.ps-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-bottom: 2.25rem;
}
.ps-footer-brand img { width: 180px; max-width: 60%; margin-bottom: 1rem; }
.ps-footer-brand .ps-footer-wordmark { font-size: 1.5rem; font-weight: 800; color: var(--ps-text); margin-bottom: .75rem; display: block; }
.ps-footer-brand p { font-size: .93rem; max-width: 44ch; color: var(--ps-muted); }
.ps-footer-col h3 {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ps-dim);
  margin-bottom: 1rem;
}
.ps-footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.ps-footer-col ul a { color: var(--ps-muted); font-size: .93rem; transition: color .2s, padding-left .2s; }
.ps-footer-col ul a:hover { color: var(--ps-cyan); padding-left: 4px; }
.ps-footer-actions { display: grid; gap: .55rem; margin-top: .25rem; }
.ps-footer-social { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1rem 0 0; }
.ps-footer-social .list-inline-item { margin: 0; }
.ps-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--ps-line);
  color: var(--ps-dim);
  font-size: .86rem;
}
.ps-footer-bottom p { margin: 0; color: inherit; }
.ps-footer-tagline { font-family: var(--ps-mono); color: var(--ps-dim); }
.ps-footer-bottom .btn {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--ps-line);
  color: var(--ps-muted);
  font-size: .84rem;
  padding: .35rem .9rem;
}
.ps-footer-bottom .btn:hover { color: var(--ps-text); border-color: var(--ps-line-strong); }

/* 13. Responsive ---------------------------------------------------------- */
@media (max-width: 991.98px) {
  .ps-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .primary-content { padding-left: 0; }
  .sidebar { margin-bottom: 1.25rem; }

  /* Laat brede tabellen scrollen in plaats van kolommen plat te drukken
     (anders breekt "Beheer" in de actiekolom over twee regels). */
  .table-responsive > .table { min-width: 620px; }
}

/* Actieknoppen in tabellen niet laten afbreken */
.table .btn { white-space: nowrap; }

@media (max-width: 767.98px) {
  #main-body { padding: 1.5rem 0 2.5rem; }
  .ps-footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .ps-footer-bottom { justify-content: center; text-align: center; }
  .header .navbar { padding: .55rem 0; }
  .header .navbar-brand .logo-img,
  .header .navbar-brand img { max-height: 32px; }
  .tiles .tile { padding: 1.1rem 1rem; }
  .tiles .tile .stat { font-size: 1.6rem; }
  .tiles .tile > i { font-size: 1.2rem; top: .9rem; right: .9rem; }
  .card-body, .panel-body { padding: 1.1rem; }
  .card-header, .card-footer { padding: .85rem 1.1rem; }
  .home-domain-search .input-group-wrapper { border-radius: var(--ps-radius); padding: .5rem; }
  .home-domain-search .input-group-wrapper .form-control { border-radius: var(--ps-radius-sm); }
  .modal-body, .modal-header, .modal-footer { padding-left: 1.15rem; padding-right: 1.15rem; }

  /* Brede tabellen scrollen horizontaal in plaats van de pagina te breken.
     De min-width geldt bewust alleen binnen .table-responsive: losse tabellen
     (o.a. in facturen en gateway-output) moeten gewoon kunnen krimpen. */
  .table-responsive, .card > .table-responsive { display: block; width: 100%; overflow-x: auto; }
  .table-responsive > .table { min-width: 520px; }
  .table td, .table th { padding: .7rem .75rem; font-size: .9rem; }
}

@media (max-width: 575.98px) {
  h1, .h1 { font-size: 1.7rem; }
  h2, .h2 { font-size: 1.35rem; }
  .btn { padding: .58rem 1.1rem; }
  .btn-lg { padding: .7rem 1.4rem; font-size: .95rem; }
  .header .topbar { font-size: .78rem; }
  .modal-dialog { margin: .5rem; }
}

/* Voorkom horizontale overflow door lange strings (domeinen, tokens) */
.card-body, .table td, .breadcrumb-item, .list-group-item { overflow-wrap: anywhere; }
img, svg, iframe, video { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .card:hover, .tiles .tile:hover { transform: none !important; }
}

/* 14. Print & schoonmaak -------------------------------------------------- */
@media print {
  body, body.primary-bg-color { background: #fff !important; color: #111 !important; }
  #header, #footer, .sidebar, .master-breadcrumb, .home-domain-search { display: none !important; }
  .card { background: #fff !important; border-color: #ddd !important; box-shadow: none !important; color: #111 !important; }
  .table, .table td, .table th { color: #111 !important; border-color: #ddd !important; }
}

/* ==========================================================================
   PlayServer.nl — lichte contentzone
   --------------------------------------------------------------------------
   Alles binnen #main-body (plus de modals en de losse factuurpagina) staat op
   een lichte achtergrond. Reden: WHMCS en de e-mail-/ticket-pijplijn leveren
   HTML aan die uitgaat van donkere tekst op wit — denk aan ticketberichten,
   kennisbankartikelen en gateway-output. Op een donkere ondergrond viel die
   tekst weg. De donkere huisstijl blijft staan op de header, de breadcrumb
   en de footer, zodat het merk herkenbaar blijft.

   Deze regels winnen op specificiteit (#main-body = id) van de basisstyling
   in custom.css; dit bestand wordt daar bovendien ná geladen.
   ========================================================================== */

#main-body,
.invoice-container,
.quote-container,
.modal-content {
  --l-surface:      #eef1f7;
  --l-card:         #ffffff;
  --l-card-alt:     #f6f8fc;
  --l-line:         #e2e7f1;
  --l-line-strong:  #cbd3e1;
  --l-text:         #131a2a;
  --l-muted:        #56607a;
  --l-dim:          #7a8496;
  --l-link:         #1f63e0;
  --l-link-hover:   #1544c9;
}

/* --- De zone zelf ------------------------------------------------------- */
#main-body {
  background: var(--l-surface);
  color: var(--l-text);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .25);
}

#main-body h1, #main-body h2, #main-body h3,
#main-body h4, #main-body h5, #main-body h6,
#main-body .h1, #main-body .h2, #main-body .h3,
#main-body .h4, #main-body .h5, #main-body .h6 { color: var(--l-text); }

#main-body p,
#main-body li,
#main-body dd,
#main-body td { color: var(--l-muted); }

#main-body a:not(.btn) { color: var(--l-link); }
#main-body a:not(.btn):hover { color: var(--l-link-hover); }

#main-body hr { border-top-color: var(--l-line); }

#main-body code {
  color: #b02a5b;
  background: #fdf0f4;
  border: 1px solid #f6dde5;
}
#main-body pre {
  background: var(--l-card-alt);
  border-color: var(--l-line);
  color: var(--l-text);
}
#main-body blockquote, #main-body .blockquote {
  background: var(--l-card-alt);
  border-left-color: var(--ps-primary);
  color: var(--l-muted);
}

/* Utilities die in de donkere basis omgezet waren, hier weer terug */
#main-body .text-muted { color: var(--l-dim) !important; }
#main-body .text-dark, #main-body .text-body, #main-body .text-black { color: var(--l-text) !important; }
#main-body .text-secondary { color: var(--l-dim) !important; }
#main-body .text-info { color: #0b7f98 !important; }
#main-body .text-success { color: #0f8a5f !important; }
#main-body .text-warning { color: #a06e00 !important; }
#main-body .text-danger { color: #d12142 !important; }
#main-body .bg-white, #main-body .bg-light { background-color: var(--l-card) !important; color: var(--l-text); }
#main-body .form-text, #main-body .help-block, #main-body small.text-muted { color: var(--l-dim) !important; }

/* --- Cards & panelen ---------------------------------------------------- */
#main-body .card,
#main-body .panel,
#main-body .well,
#main-body .jumbotron,
.modal-content {
  background: var(--l-card);
  border-color: var(--l-line);
  color: var(--l-text);
  box-shadow: 0 1px 2px rgba(19, 26, 42, .06), 0 8px 24px rgba(19, 26, 42, .06);
}
#main-body .card-header,
#main-body .panel-heading,
.modal-header {
  background: var(--l-card-alt);
  border-bottom-color: var(--l-line);
  color: var(--l-text);
}
#main-body .card-title,
#main-body .card-header .card-title,
.modal-title { color: var(--l-text); }
#main-body .card-body,
#main-body .panel-body,
.modal-body { color: var(--l-muted); }
#main-body .card-body h1, #main-body .card-body h2,
#main-body .card-body h3, #main-body .card-body h4,
#main-body .card-body h5 { color: var(--l-text); }
#main-body .card-footer,
#main-body .panel-footer,
.modal-footer {
  background: var(--l-card-alt);
  border-top-color: var(--l-line);
  color: var(--l-muted);
}
#main-body .card-text { color: var(--l-muted); }
#main-body .card-subtitle { color: var(--l-dim); }

/* De gekleurde accentbalk bovenaan blijft; alleen de header eronder wordt licht */
#main-body [class*="card-accent-"] > .card-header {
  background: var(--l-card-alt) !important;
  border-bottom-color: var(--l-line) !important;
  color: var(--l-text) !important;
}
#main-body [class*="card-accent-"] > .card-header .card-title,
#main-body [class*="card-accent-"] > .card-header h3 { color: var(--l-text) !important; }

#main-body .card-columns .card:hover,
#main-body .accordion .card { border-color: var(--l-line-strong); }

/* --- Sidebar ------------------------------------------------------------ */
#main-body .sidebar .card,
#main-body .card-sidebar { background: var(--l-card); border-color: var(--l-line); }
#main-body .sidebar .card-header { background: var(--l-card-alt); }
#main-body .sidebar .card-title,
#main-body .sidebar .card-header h3 { color: var(--l-dim); }
#main-body .sidebar .card-minimise { color: var(--l-dim); }

#main-body .sidebar .list-group-item,
#main-body .list-group-flush .list-group-item {
  border-top-color: var(--l-line);
  color: var(--l-muted);
}
#main-body .sidebar .list-group-item:hover {
  background: var(--l-card-alt);
  color: var(--l-text);
}
#main-body .sidebar .list-group-item.active,
#main-body .sidebar .list-group-item.active:hover,
#main-body .sidebar .list-group-item.active:focus {
  background: rgba(47, 123, 255, .09);
  color: var(--l-link-hover);
  font-weight: 600;
  border-color: var(--l-line);
  box-shadow: inset 3px 0 0 var(--ps-primary);
}
#main-body .sidebar .list-group-item.disabled { color: #a6aebd; }
#main-body .sidebar .list-group-item .badge { background: #eaeef6; color: var(--l-muted); }
#main-body .sidebar .sidebar-menu-item-icon-wrapper { color: var(--l-dim); }
#main-body .sidebar .list-group-item:hover .sidebar-menu-item-icon-wrapper,
#main-body .sidebar .list-group-item.active .sidebar-menu-item-icon-wrapper { color: var(--ps-primary); }

#main-body .list-group-item { border-color: var(--l-line); color: var(--l-muted); }
#main-body .list-group-item-action:hover { background: var(--l-card-alt); color: var(--l-text); }

/* --- Tabellen ----------------------------------------------------------- */
#main-body .table,
#main-body .table-responsive > .table,
.modal-content .table {
  color: var(--l-muted);
  border-color: var(--l-line);
}
#main-body .table thead th,
#main-body .table .thead-light th,
#main-body .table .thead-dark th,
.modal-content .table thead th {
  background: var(--l-card-alt);
  border-bottom-color: var(--l-line-strong);
  color: var(--l-dim);
}
#main-body .table td,
#main-body .table th,
.modal-content .table td,
.modal-content .table th { border-top-color: var(--l-line); }
#main-body .table-hover tbody tr:hover,
#main-body .table tbody tr:hover { background: #f4f7fc; color: var(--l-text); }
#main-body .table-striped tbody tr:nth-of-type(odd) { background: #fafbfe; }
#main-body .table-bordered,
#main-body .table-bordered td,
#main-body .table-bordered th { border-color: var(--l-line); }
#main-body .table a { color: var(--l-link); }

#main-body .dataTables_wrapper { color: var(--l-muted); }
#main-body .dataTables_wrapper .dataTables_filter input,
#main-body .dataTables_wrapper .dataTables_length select {
  background: var(--l-card);
  border-color: var(--l-line-strong);
  color: var(--l-text);
}
#main-body .dataTables_wrapper .dataTables_info,
#main-body .dataTables_wrapper .dataTables_length label,
#main-body .dataTables_wrapper .dataTables_filter label { color: var(--l-dim); }

/* --- Formulieren -------------------------------------------------------- */
#main-body label,
#main-body .form-control-label,
#main-body .control-label,
.modal-content label { color: var(--l-text); }

#main-body .form-control,
#main-body .custom-select,
#main-body select.form-control,
#main-body textarea.form-control,
.modal-content .form-control,
.modal-content .custom-select {
  background-color: var(--l-card);
  border-color: var(--l-line-strong);
  color: var(--l-text);
}
#main-body .form-control::placeholder,
.modal-content .form-control::placeholder { color: #9aa3b4; }
#main-body .form-control:focus,
#main-body .custom-select:focus,
.modal-content .form-control:focus {
  background-color: var(--l-card);
  border-color: var(--ps-primary);
  box-shadow: 0 0 0 3px rgba(47, 123, 255, .15);
  color: var(--l-text);
}
#main-body .form-control:disabled,
#main-body .form-control[readonly] { background-color: #f1f4f9; color: var(--l-dim); }
#main-body .form-control-plaintext { color: var(--l-text); }
#main-body select.form-control option,
#main-body .custom-select option { background: var(--l-card); color: var(--l-text); }
#main-body .custom-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8496' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
}
#main-body .input-group-text,
.modal-content .input-group-text {
  background: var(--l-card-alt);
  border-color: var(--l-line-strong);
  color: var(--l-dim);
}
#main-body .custom-control-label { color: var(--l-muted); }
#main-body .custom-control-label::before { background-color: var(--l-card); border-color: var(--l-line-strong); }
#main-body .custom-file-label {
  background: var(--l-card);
  border-color: var(--l-line-strong);
  color: var(--l-muted);
}

#main-body .select2-container--default .select2-selection--single,
#main-body .select2-container--default .select2-selection--multiple {
  background: var(--l-card) !important;
  border-color: var(--l-line-strong) !important;
}
#main-body .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--l-text) !important; }

/* --- Knoppen in de contentzone ------------------------------------------ */
/* De gevulde varianten (primary/success/danger/…) houden hun merkkleur; alleen
   de neutrale en outline-knoppen moeten meebewegen naar licht. */
#main-body .btn-default,
#main-body .btn-secondary,
.modal-content .btn-default,
.modal-content .btn-secondary {
  background: var(--l-card);
  border-color: var(--l-line-strong);
  color: var(--l-text);
}
#main-body .btn-default:hover,
#main-body .btn-secondary:hover,
.modal-content .btn-default:hover {
  background: var(--l-card-alt);
  border-color: #b6c0d2;
  color: var(--l-text);
}
#main-body .btn-outline-primary { border-color: var(--ps-primary); color: var(--l-link); }
#main-body .btn-outline-primary:hover { background: var(--ps-primary); border-color: var(--ps-primary); color: #fff; }
#main-body .btn-outline-secondary,
#main-body .btn-outline-dark,
#main-body .btn-outline-light {
  border-color: var(--l-line-strong);
  color: var(--l-muted);
}
#main-body .btn-outline-secondary:hover,
#main-body .btn-outline-dark:hover,
#main-body .btn-outline-light:hover { background: var(--l-card-alt); color: var(--l-text); }
#main-body .btn-link { color: var(--l-link); }
#main-body .btn-link:hover { color: var(--l-link-hover); }
#main-body .btn-icon {
  background: var(--l-card);
  border-color: var(--l-line-strong);
  color: var(--l-muted);
}
#main-body .btn-icon:hover { background: rgba(47, 123, 255, .08); border-color: var(--ps-primary); color: var(--l-link); }

/* --- Meldingen & labels ------------------------------------------------- */
#main-body .alert,
.modal-content .alert {
  background: var(--l-card-alt);
  border-color: var(--l-line-strong);
  color: var(--l-text);
  box-shadow: none;
}
#main-body .alert-success { background: #e8f8f1; border-color: #b6e6d1; color: #0d6b4a; }
#main-body .alert-danger  { background: #fdecef; border-color: #f8c6d0; color: #9d1731; }
#main-body .alert-warning { background: #fff6e2; border-color: #f6dfae; color: #7d5600; }
#main-body .alert-info    { background: #e7f5fb; border-color: #b9e2f1; color: #0a6480; }
#main-body .alert-primary { background: #eaf1ff; border-color: #c3d8fd; color: #17408f; }
#main-body .alert-secondary,
#main-body .alert-light,
#main-body .alert-dark { background: var(--l-card-alt); border-color: var(--l-line-strong); color: var(--l-muted); }

#main-body .badge-success { background: #e2f7ee; color: #0d6b4a; border-color: #b6e6d1; }
#main-body .badge-danger  { background: #fdeaee; color: #9d1731; border-color: #f8c6d0; }
#main-body .badge-warning { background: #fff4dd; color: #7d5600; border-color: #f6dfae; }
#main-body .badge-info    { background: #e4f4fa; color: #0a6480; border-color: #b9e2f1; }
#main-body .badge-secondary,
#main-body .badge-default { background: #eaeef6; color: var(--l-muted); }

/* --- Navigatie binnen de content ---------------------------------------- */
#main-body .nav-tabs { border-bottom-color: var(--l-line); }
#main-body .nav-tabs .nav-link { color: var(--l-dim); }
#main-body .nav-tabs .nav-link:hover { color: var(--l-text); border-bottom-color: var(--l-line-strong); }
#main-body .nav-tabs .nav-link.active { color: var(--l-link-hover); border-bottom-color: var(--ps-primary); }
#main-body .nav-pills .nav-link { color: var(--l-muted); }

#main-body .page-link {
  background: var(--l-card);
  border-color: var(--l-line);
  color: var(--l-muted);
}
#main-body .page-link:hover { background: #eaf1ff; border-color: #c3d8fd; color: var(--l-link-hover); }
#main-body .page-item.disabled .page-link { background: var(--l-card-alt); color: #b3bbc9; }

#main-body .dropdown-menu {
  background: var(--l-card);
  border-color: var(--l-line-strong);
  box-shadow: 0 12px 32px rgba(19, 26, 42, .14);
  color: var(--l-text);
}
#main-body .dropdown-menu > li,
#main-body .dropdown-menu .dropdown-item,
#main-body .dropdown-menu a.dropdown-item { color: var(--l-muted); }
#main-body .dropdown-menu a.dropdown-item:hover,
#main-body .dropdown-menu a.dropdown-item:focus { background: #eaf1ff; color: var(--l-link-hover); }
#main-body .dropdown-divider { border-top-color: var(--l-line); }

#main-body .progress { background: #e6eaf2; }

/* --- Statistiektegels --------------------------------------------------- */
#main-body .tiles .tile {
  background: var(--l-card);
  border-color: var(--l-line);
  color: var(--l-muted);
  box-shadow: 0 1px 2px rgba(19, 26, 42, .06);
}
#main-body .tiles .tile:hover {
  border-color: #b9cdf6;
  box-shadow: 0 12px 28px rgba(19, 26, 42, .1);
  color: var(--l-text);
}
#main-body .tiles .tile > i { color: #c4d3ee; }
#main-body .tiles .tile:hover > i { color: var(--ps-primary); }
#main-body .tiles .tile .stat { color: var(--l-text); }
#main-body .tiles .tile .title { color: var(--l-dim); }

/* --- Supporttickets ------------------------------------------------------
   Dit is de reden dat de contentzone licht is: de berichten komen als
   opgemaakte HTML uit WHMCS en gaan uit van donkere tekst op wit. */
#main-body .ticket-reply,
#main-body .ticket-message {
  background: var(--l-card);
  border-color: var(--l-line);
  color: var(--l-text);
}
#main-body .ticket-reply .posted-by,
#main-body .ticket-message .posted-by,
#main-body .ticket-reply .ticket-header,
#main-body .ticket-message .ticket-header {
  background: var(--l-card-alt);
  border-bottom: 1px solid var(--l-line);
  color: var(--l-muted);
}
#main-body .ticket-reply .posted-by strong,
#main-body .ticket-message .posted-by strong { color: var(--l-text); }
#main-body .ticket-reply .message,
#main-body .ticket-message .message,
#main-body .markdown-content { color: var(--l-text); }
#main-body .markdown-content a { color: var(--l-link); }
#main-body .markdown-content table td,
#main-body .markdown-content table th { border: 1px solid var(--l-line); padding: .5rem .7rem; }
#main-body .ticket-reply.staff,
#main-body .ticket-message.staff { border-color: #c3d8fd; }
#main-body .ticket-reply .attachments,
#main-body .ticket-message .attachments {
  background: var(--l-card-alt);
  border-top: 1px solid var(--l-line);
  color: var(--l-muted);
}

/* --- Markdown-editor ---------------------------------------------------- */
#main-body .EasyMDEContainer .CodeMirror,
#main-body .editor-toolbar,
#main-body .editor-preview,
#main-body .editor-statusbar {
  background: var(--l-card) !important;
  border-color: var(--l-line-strong) !important;
  color: var(--l-text) !important;
}
#main-body .editor-toolbar button { color: var(--l-muted) !important; }
#main-body .editor-toolbar button:hover { background: var(--l-card-alt) !important; }
#main-body .CodeMirror-cursor { border-left-color: var(--l-text) !important; }

/* --- Bestelproces & facturen -------------------------------------------- */
#main-body #order-standard_cart .product,
#main-body #order-standard_cart .cart-product-group,
#main-body .cart-body,
#main-body .order-summary,
#main-body .cart-sidebar {
  background: var(--l-card);
  border-color: var(--l-line);
  color: var(--l-muted);
}
#main-body #order-standard_cart h1,
#main-body #order-standard_cart h2,
#main-body .view-cart-items-header,
#main-body .cart-items-header,
#main-body #order-standard_cart .price,
#main-body .product-pricing .price { color: var(--l-text); }

.invoice-container,
.quote-container {
  background: var(--l-card);
  color: var(--l-text);
  max-width: 1100px;
  margin: 2.5rem auto;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--l-line);
  border-radius: var(--ps-radius-lg);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
}
.invoice-container h1, .invoice-container h2, .invoice-container h3,
.quote-container h1, .quote-container h2, .quote-container h3 { color: var(--l-text); }
.invoice-container p, .invoice-container td,
.quote-container p, .quote-container td { color: var(--l-muted); }
.invoice-container a, .quote-container a { color: var(--l-link); }
.invoice-container .card, .quote-container .card {
  background: var(--l-card);
  border-color: var(--l-line);
  color: var(--l-text);
  box-shadow: none;
}
.invoice-container .card-header, .quote-container .card-header {
  background: var(--l-card-alt);
  border-bottom-color: var(--l-line);
  color: var(--l-text);
}
.invoice-container .table, .quote-container .table { color: var(--l-muted); }
.invoice-container .table thead th, .quote-container .table thead th {
  background: var(--l-card-alt);
  color: var(--l-dim);
  border-bottom-color: var(--l-line-strong);
}
.invoice-container .table td, .invoice-container .table th,
.quote-container .table td, .quote-container .table th { border-top-color: var(--l-line); }
.invoice-container .total-row { color: var(--l-text); }

/* --- Doorverwijspagina (index.php) -------------------------------------- */
.ps-redirect {
  padding: clamp(3rem, 12vh, 7rem) 1rem;
  text-align: center;
  color: var(--l-muted);
}
.ps-redirect > i { font-size: 2rem; color: var(--ps-primary); margin-bottom: 1rem; display: block; }
.ps-redirect p { color: var(--l-muted); }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 767.98px) {
  .invoice-container, .quote-container {
    margin: 1rem;
    padding: 1.25rem;
    border-radius: var(--ps-radius);
  }
}

/* --- Print -------------------------------------------------------------- */
@media print {
  #main-body { background: #fff !important; box-shadow: none !important; }
  .invoice-container, .quote-container {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}

/* --- E-mailweergave (popup) ---------------------------------------------
   viewemail.tpl toont de mail in een iframe; die inhoud is altijd wit.
   Daarom staat dit venster ook op licht, zodat de kaart eromheen aansluit. */
#popup-backdrop {
  --l-card: #ffffff;
  --l-card-alt: #f6f8fc;
  --l-line: #e2e7f1;
  --l-text: #131a2a;
  --l-muted: #56607a;
  background: #eef1f7;
  padding: 1.25rem;
}
#popup-backdrop .card {
  background: var(--l-card);
  border-color: var(--l-line);
  color: var(--l-text);
}
#popup-backdrop .card-header,
#popup-backdrop .card-footer {
  background: var(--l-card-alt);
  border-color: var(--l-line);
  color: var(--l-text);
}
#popup-backdrop .card-header h2 { color: var(--l-text); }
#popup-backdrop .card-body { background: var(--l-card); }
#popup-backdrop iframe { background: #fff; border-radius: 8px; }