/* ============================================================
   QSG Gezondheidsmanagement — Power Pages Custom CSS
   Huisstijl v6 | 2026
   ============================================================ */
/* ── Google Fonts: Outfit ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');
/* ── CSS Variabelen ───────────────────────────────────────── */
:root {
  --qsg-orange:        #f6861f;
  --qsg-navy:          #121d40;
  --qsg-green:         #51b148;
  --qsg-teal:          #7fcdbf;
  --qsg-teal-light:    #bfe3d3;
  --qsg-teal-pale:     #e2f0de;
  --qsg-peach:         #eecebf;
  --qsg-peach-light:   #fee2d1;
  --qsg-cream:         #fceecf;
  --qsg-blue:          #64a9dc;
  --qsg-blue-light:    #87d0f0;
  --qsg-blue-pale:     #b6e4fa;
  --qsg-blue-ice:      #e4eff9;
  --qsg-white:         #ffffff;
  --qsg-off-white:     #f5faf6;
  --qsg-text:          #121d40;
  --qsg-text-muted:    #4a5568;
  --grad-warm:         linear-gradient(135deg, #fee2d1 0%, #fceecf 100%);
  --grad-teal:         linear-gradient(135deg, #7fcdbf 0%, #b6e4fa 100%);
  --grad-mint:         linear-gradient(135deg, #bfe3d3 0%, #e4eff9 100%);
  --grad-green:        linear-gradient(135deg, #51b148 0%, #7fcdbf 100%);
  --grad-blue:         linear-gradient(135deg, #64a9dc 0%, #87d0f0 100%);
  --grad-peach:        linear-gradient(135deg, #eecebf 0%, #fee2d1 100%);
  --grad-orange:       linear-gradient(135deg, #f6861f 0%, #eecebf 100%);
  --grad-navy:         linear-gradient(135deg, #121d40 0%, #1e3160 100%);
  --grad-pastel:       linear-gradient(135deg, #bfe3d3 0%, #fee2d1 50%, #b6e4fa 100%);
  --font-main:         'Outfit', sans-serif;
  --font-size-base:    20px;
  --radius-sm:         8px;
  --radius-md:         16px;
  --radius-lg:         24px;
  --radius-xl:         32px;
  --radius-pill:       999px;
  --shadow-sm:         0 2px 8px rgba(18, 29, 64, 0.08);
  --shadow-md:         0 4px 20px rgba(18, 29, 64, 0.12);
  --shadow-lg:         0 8px 40px rgba(18, 29, 64, 0.16);
  --transition:        0.25s ease;
}
/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 20px; }
body {
  font-family: var(--font-main) !important;
  font-size: 1rem !important;
  color: var(--qsg-text);
  background-color: var(--qsg-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body, p, span, div, li, td, th, input, textarea, select, button, a, label {
  font-family: var(--font-main) !important;
}
/* ── Typografie ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-main) !important;
  font-weight: 700;
  color: var(--qsg-navy);
  line-height: 1.2;
  margin-bottom: 0.75em;
}
h1, .h1 { font-size: clamp(2.4rem, 5vw, 3.5rem) !important; }
h2, .h2 { font-size: clamp(2rem, 4vw, 2.75rem) !important; }
h3, .h3 { font-size: clamp(1.3rem, 2.5vw, 1.6rem) !important; }
h4, .h4 { font-size: 1.5rem !important; }
h5, .h5 { font-size: 1.25rem !important; }
h6, .h6 { font-size: 1rem !important; text-transform: uppercase; letter-spacing: 0.08em; }
p { margin-bottom: 1em; color: var(--qsg-text); font-size: 1rem !important; }
a { color: var(--qsg-orange); text-decoration: none; transition: color var(--transition); }
a:hover, a:focus { color: #d4700f; text-decoration: underline; }
/* ── Navbar ───────────────────────────────────────────────── */
.navbar.navbar-inverse, .navbar.navbar-inverse.navbar-static-top {
  background-color: var(--qsg-white) !important;
  border: none;
  box-shadow: 0 2px 16px rgba(18, 29, 64, 0.08);
  min-height: 80px;
}
.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: var(--qsg-navy) !important;
  font-family: var(--font-main) !important;
  font-weight: 600;
  font-size: 1.15rem !important;
  padding: 28px 16px;
  transition: color var(--transition);
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus { color: var(--qsg-orange) !important; }
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  background: transparent !important;
  color: var(--qsg-orange) !important;
  border-bottom: 3px solid var(--qsg-orange);
}
.navbar-inverse .dropdown-menu {
  background: var(--qsg-white) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 8px !important;
  margin-top: 4px !important;
}
.navbar-inverse .dropdown-menu > li > a,
.navbar-inverse .dropdown-menu > li > a:hover,
.navbar-inverse .dropdown-menu > li > a:focus {
  color: var(--qsg-navy) !important;
  font-family: var(--font-main) !important;
  font-weight: 500 !important;
  font-size: 1.1rem !important;
  border-radius: var(--radius-sm);
  padding: 12px 18px !important;
  background-color: transparent !important;
}
.navbar-inverse .dropdown-menu > li > a:hover,
.navbar-inverse .dropdown-menu > li > a:focus {
  background: var(--qsg-peach-light) !important;
}
.navbar-inverse .divider-vertical {
  border-left: 1px solid rgba(18, 29, 64, 0.1);
  height: 24px;
  margin: 28px 4px;
}
.navbar-inverse .navbar-nav .username { color: var(--qsg-navy) !important; font-weight: 600; font-size: 1.15rem !important; }
.skip-to-content a { background: var(--qsg-orange); color: var(--qsg-white) !important; font-family: var(--font-main) !important; font-weight: 600; border-radius: var(--radius-sm); }
.navbar-inverse .navbar-toggle { border-color: var(--qsg-navy); }
.navbar-inverse .navbar-toggle .icon-bar { background-color: var(--qsg-navy); }
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { background-color: var(--qsg-peach-light); }
.navbar-brand { padding: 12px 16px; height: auto; }
.navbar-brand img { max-height: 48px; width: auto; }
/* ── Secties ──────────────────────────────────────────────── */
.page_section, section.page_section { padding: 64px 0; position: relative; overflow: hidden; }
.page_section.section-white,
.page_section:not([class*="color-"]):not([class*="section-"]):nth-child(odd) { background-color: var(--qsg-white); }
.page_section.bg-warm, .section-warm { background: var(--grad-warm) !important; }
.page_section.bg-teal, .section-teal { background: var(--grad-teal) !important; }
.page_section.bg-mint, .section-mint { background: var(--grad-mint) !important; }
.page_section.bg-blue, .section-blue { background: var(--grad-blue) !important; }
.page_section.bg-navy, .section-navy { background: var(--grad-navy) !important; color: var(--qsg-white); }
.page_section.bg-offwhite, .section-offwhite { background: var(--qsg-off-white) !important; }
.page_section.bg-pastel, .section-pastel { background: var(--grad-pastel) !important; }
.page_section.color-inverse { background: var(--grad-teal) !important; color: var(--qsg-white); }
.page_section.bg-navy h1, .page_section.bg-navy h2, .page_section.bg-navy h3, .page_section.bg-navy p,
.section-navy h1, .section-navy h2, .section-navy h3, .section-navy p,
.page_section.color-inverse h1, .page_section.color-inverse h2, .page_section.color-inverse h3, .page_section.color-inverse p { color: var(--qsg-white); }
.page_section:nth-child(even) { background: var(--grad-mint); }
.page_section:nth-child(odd)  { background: var(--qsg-white); }
.page_section::before { content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%; opacity: 0.15; pointer-events: none; background: var(--qsg-teal); top: -100px; right: -100px; }
.page_section::after  { content: ''; position: absolute; width: 300px; height: 300px; border-radius: 50%; opacity: 0.1;  pointer-events: none; background: var(--qsg-orange); bottom: -80px; left: -80px; }
.section-landing-search { background: var(--grad-teal) !important; min-height: 400px; }
.section-landing-forums { background: var(--grad-warm) !important; min-height: 400px; }
/* ── Knoppen ──────────────────────────────────────────────── */
.btn, button.btn {
  font-family: var(--font-main) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  border-radius: var(--radius-pill) !important;
  padding: 14px 32px !important;
  border: none; cursor: pointer;
  transition: all var(--transition);
  text-decoration: none; display: inline-block;
}
.btn-primary, .btn-default.btn-primary { background: var(--qsg-orange) !important; color: var(--qsg-white) !important; border-color: var(--qsg-orange) !important; box-shadow: 0 4px 16px rgba(246, 134, 31, 0.35); }
.btn-primary:hover, .btn-primary:focus { background: #d4700f !important; border-color: #d4700f !important; transform: translateY(-2px); }
.btn-secondary, .btn-default { background: transparent !important; color: var(--qsg-navy) !important; border: 2px solid var(--qsg-navy) !important; }
.btn-secondary:hover, .btn-secondary:focus { background: var(--qsg-navy) !important; color: var(--qsg-white) !important; transform: translateY(-2px); }
.btn-success { background: var(--qsg-green) !important; border-color: var(--qsg-green) !important; color: var(--qsg-white) !important; border-radius: var(--radius-pill) !important; }
/* ── button1 / button2 ────────────────────────────────────── */
button.button1, .button1 {
  font-family: var(--font-main) !important; font-weight: 700 !important; font-size: 1.1rem !important;
  background: var(--qsg-orange) !important; color: var(--qsg-white) !important;
  border: none !important; border-radius: var(--radius-pill) !important;
  padding: 16px 36px !important; cursor: pointer !important; display: inline-block !important;
  transition: all var(--transition) !important; box-shadow: 0 4px 16px rgba(246, 134, 31, 0.35) !important;
  text-decoration: none !important;
}
button.button1:hover, .button1:hover { background: #d4700f !important; transform: translateY(-2px) !important; }
button.button2, .button2 {
  font-family: var(--font-main) !important; font-weight: 700 !important; font-size: 1.1rem !important;
  background: transparent !important; color: var(--qsg-navy) !important;
  border: 2px solid var(--qsg-navy) !important; border-radius: var(--radius-pill) !important;
  padding: 15px 34px !important; cursor: pointer !important; display: inline-block !important;
  transition: all var(--transition) !important; text-decoration: none !important;
}
button.button2:hover, .button2:hover { background: var(--qsg-navy) !important; color: var(--qsg-white) !important; transform: translateY(-2px) !important; }
/* ── Formulieren ──────────────────────────────────────────── */
.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="url"],
input[type="number"], input[type="date"], textarea, select {
  font-family: var(--font-main) !important;
  font-size: 1.1rem !important;
  color: var(--qsg-navy) !important;
  border: 1.5px solid #d0d9e8 !important;
  border-radius: var(--radius-md) !important;
  padding: 12px 18px !important;
  background: var(--qsg-white) !important;
  transition: border-color var(--transition), box-shadow var(--transition);
  box-shadow: none;
}
.form-control:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--qsg-orange) !important;
  box-shadow: 0 0 0 3px rgba(246, 134, 31, 0.15) !important;
  outline: none !important;
}
.form-control::placeholder { color: #a0aec0; }
label, .control-label {
  font-family: var(--font-main) !important; font-weight: 600 !important;
  font-size: 1.1rem !important; color: var(--qsg-navy) !important;
  margin-bottom: 6px; display: block;
}
/* ── Entity form ──────────────────────────────────────────── */
.entity-form label, .entity-form .control-label { font-family: var(--font-main) !important; font-size: 1.1rem !important; font-weight: 600 !important; color: var(--qsg-navy) !important; }
.entity-form .form-group { margin-bottom: 20px !important; }
.entity-form .btn, .entity-form input[type="submit"], .entity-form button[type="submit"] {
  font-family: var(--font-main) !important; font-size: 1.1rem !important; font-weight: 700 !important;
  background: var(--qsg-orange) !important; color: var(--qsg-white) !important;
  border: none !important; border-radius: var(--radius-pill) !important;
  padding: 15px 36px !important; cursor: pointer !important; box-shadow: 0 4px 16px rgba(246, 134, 31, 0.35) !important;
}
.entity-form .field-validation-error, .entity-form .validation-summary-errors { font-family: var(--font-main) !important; font-size: 1.1rem !important; color: #c53030 !important; }
/* ── Kaarten ──────────────────────────────────────────────── */
.card, .panel, .panel-default { background: var(--qsg-white); border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); }
.card:hover, .panel:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.panel-heading, .card-header { background: var(--grad-warm); border: none; padding: 20px 24px; font-family: var(--font-main) !important; font-weight: 700; color: var(--qsg-navy); }
.panel-body, .card-body { padding: 24px; }
.panel-footer, .card-footer { background: var(--qsg-off-white); border-top: 1px solid rgba(18, 29, 64, 0.06); padding: 16px 24px; }
/* ── Tabel ────────────────────────────────────────────────── */
.table { font-family: var(--font-main) !important; font-size: 1.1rem !important; border-collapse: separate; border-spacing: 0; width: 100%; }
.table thead th { background: var(--qsg-navy); color: var(--qsg-white); font-weight: 700; font-size: 1rem !important; text-transform: uppercase; letter-spacing: 0.06em; padding: 14px 16px; border: none; }
.table thead th:first-child { border-radius: var(--radius-sm) 0 0 0; }
.table thead th:last-child  { border-radius: 0 var(--radius-sm) 0 0; }
.table tbody tr td { padding: 14px 16px; border-bottom: 1px solid rgba(18, 29, 64, 0.07); color: var(--qsg-text); vertical-align: middle; font-size: 1.1rem !important; }
.table-striped tbody tr:nth-child(odd) td { background: var(--qsg-off-white); }
.table tbody tr:hover td { background: var(--qsg-peach-light); }
/* ── Alerts ───────────────────────────────────────────────── */
.alert { font-family: var(--font-main) !important; font-size: 1.1rem !important; border: none; border-radius: var(--radius-md); padding: 16px 20px; }
.alert-info    { background: var(--qsg-blue-ice);  color: var(--qsg-navy); border-left: 4px solid var(--qsg-blue); }
.alert-success { background: var(--qsg-teal-pale); color: var(--qsg-navy); border-left: 4px solid var(--qsg-green); }
.alert-warning { background: var(--qsg-cream);     color: var(--qsg-navy); border-left: 4px solid var(--qsg-orange); }
.alert-danger  { background: #fde8e8; color: #c53030; border-left: 4px solid #e53e3e; }
/* ── Badges ───────────────────────────────────────────────── */
.badge, .label { font-family: var(--font-main) !important; font-weight: 600; font-size: 0.9rem !important; border-radius: var(--radius-pill); padding: 4px 12px; }
.badge-primary, .label-primary { background: var(--qsg-orange); }
.badge-success, .label-success { background: var(--qsg-green); }
.badge-info,    .label-info    { background: var(--qsg-blue); }
/* ── Breadcrumbs ──────────────────────────────────────────── */
.breadcrumb { background: transparent; padding: 8px 0; font-family: var(--font-main) !important; font-size: 1.1rem !important; }
.breadcrumb > li + li::before { content: '›'; color: var(--qsg-orange); font-weight: 700; }
.breadcrumb > li > a { color: var(--qsg-blue); font-weight: 500; }
.breadcrumb > .active { color: var(--qsg-text-muted); }
/* ── Paginering ───────────────────────────────────────────── */
.pagination > li > a, .pagination > li > span { font-family: var(--font-main) !important; font-weight: 600 !important; font-size: 1.1rem !important; color: var(--qsg-navy); border: 1.5px solid #d0d9e8; border-radius: var(--radius-sm) !important; margin: 0 2px; padding: 10px 16px; transition: all var(--transition); }
.pagination > li > a:hover { background: var(--qsg-peach-light); border-color: var(--qsg-orange); color: var(--qsg-navy); }
.pagination > .active > a, .pagination > .active > span { background: var(--qsg-orange) !important; border-color: var(--qsg-orange) !important; color: var(--qsg-white) !important; }
/* ── Entity list ──────────────────────────────────────────── */
.entity-list .entity-list-item, .list-group-item { border: none; border-radius: var(--radius-md) !important; margin-bottom: 8px; font-family: var(--font-main) !important; font-size: 1.1rem !important; color: var(--qsg-navy); padding: 16px 20px; background: var(--qsg-white); box-shadow: var(--shadow-sm); transition: background var(--transition), transform var(--transition); }
.entity-list .entity-list-item:hover, .list-group-item:hover { background: var(--qsg-peach-light); transform: translateX(4px); }
/* ── Tabs ─────────────────────────────────────────────────── */
.nav-tabs { border-bottom: 2px solid rgba(18, 29, 64, 0.1); }
.nav-tabs > li > a { font-family: var(--font-main) !important; font-weight: 600 !important; font-size: 1.1rem !important; color: var(--qsg-text-muted); border: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: 12px 20px; transition: color var(--transition), background var(--transition); }
.nav-tabs > li > a:hover { background: var(--qsg-off-white); color: var(--qsg-navy); border: none; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: var(--qsg-orange) !important; background: var(--qsg-white) !important; border: none !important; border-bottom: 3px solid var(--qsg-orange) !important; font-weight: 700; }
/* ── Footer ───────────────────────────────────────────────── */
footer, .footer { background: var(--qsg-navy); color: rgba(255,255,255,0.85); font-family: var(--font-main) !important; padding: 48px 0 24px; }
footer h4, footer h5, .footer h4, .footer h5 { color: var(--qsg-white); font-weight: 700; font-size: 1.15rem !important; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.06em; }
footer a, .footer a { color: var(--qsg-teal-light); font-size: 1.1rem !important; transition: color var(--transition); }
footer a:hover, .footer a:hover { color: var(--qsg-white); text-decoration: none; }
footer hr, .footer hr { border-color: rgba(255,255,255,0.12); margin: 32px 0 24px; }
.footer-bottom { color: rgba(255,255,255,0.5); font-size: 1rem !important; }
/* ── Zoekbalk ─────────────────────────────────────────────── */
.dropdown-search { background: var(--qsg-white); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 16px; min-width: 300px; }
.dropdown-search .input-group-btn .btn { background: var(--qsg-orange); color: var(--qsg-white); border-radius: 0 var(--radius-md) var(--radius-md) 0; border: none; padding: 10px 18px; }
/* ── Entityform wrapper ───────────────────────────────────── */
.entityform, .basic-form { background: var(--qsg-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 40px; }
.entityform legend { font-family: var(--font-main) !important; font-weight: 700; font-size: 1.3rem !important; color: var(--qsg-navy); border-bottom: 2px solid var(--qsg-peach-light); padding-bottom: 12px; margin-bottom: 24px; }
/* ── Weblinks ─────────────────────────────────────────────── */
.weblinks li.weblink a { font-family: var(--font-main) !important; }
/* ── smallText ────────────────────────────────────────────── */
.smallText { font-size: 0.85rem !important; line-height: 1.7; }
/* ── data-component-theme ─────────────────────────────────── */
[data-component-theme="portalThemeColor1"] { background: var(--grad-teal) !important; }
[data-component-theme="portalThemeColor5"] { background: var(--qsg-navy) !important; }
[data-component-theme="portalThemeColor5"] p, [data-component-theme="portalThemeColor5"] b, [data-component-theme="portalThemeColor5"] .smallText { color: rgba(255,255,255,0.85) !important; }
[data-component-theme="portalThemeColor7"] { background: var(--grad-warm) !important; }
[data-component-theme="portalThemeColor1"] [style*="portalThemeColor8"], [data-component-theme="portalThemeColor1"] h3 { color: var(--qsg-white) !important; }
/* ── sectionBlockLayout ───────────────────────────────────── */
.row.sectionBlockLayout { position: relative; }
.row.sectionBlockLayout:not([data-component-theme]):not([style*="background-image"]) { background: var(--qsg-white); }
/* ── Utility klassen ──────────────────────────────────────── */
.text-orange { color: var(--qsg-orange) !important; } .text-navy { color: var(--qsg-navy) !important; } .text-teal { color: var(--qsg-teal) !important; } .text-green { color: var(--qsg-green) !important; } .text-white { color: var(--qsg-white) !important; } .text-muted { color: var(--qsg-text-muted) !important; }
.bg-warm { background: var(--grad-warm) !important; } .bg-teal { background: var(--grad-teal) !important; } .bg-mint { background: var(--grad-mint) !important; } .bg-blue { background: var(--grad-blue) !important; } .bg-navy { background: var(--grad-navy) !important; } .bg-pastel { background: var(--grad-pastel) !important; } .bg-orange { background: var(--qsg-orange) !important; } .bg-offwhite { background: var(--qsg-off-white) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; } .rounded-xl { border-radius: var(--radius-xl) !important; } .rounded-pill { border-radius: var(--radius-pill) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; } .shadow-md { box-shadow: var(--shadow-md) !important; } .shadow-lg { box-shadow: var(--shadow-lg) !important; }
/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 991px) {
  .navbar.navbar-inverse .navbar-collapse { background: var(--qsg-white); border-top: 1px solid rgba(18, 29, 64, 0.08); box-shadow: var(--shadow-md); }
  .navbar-inverse .navbar-nav > li > a { padding: 16px 20px; border-bottom: 1px solid rgba(18, 29, 64, 0.05); }
  .navbar-inverse .navbar-nav > .active > a { border-bottom: none !important; background: var(--qsg-peach-light) !important; border-left: 4px solid var(--qsg-orange) !important; }
  .page_section, section.page_section { padding: 40px 0; }
  .entityform, .basic-form { padding: 24px; }
}
@media (max-width: 767px) {
  h1, .h1 { font-size: 2rem !important; }
  h2, .h2 { font-size: 1.75rem !important; }
  .page_section::before, .page_section::after { display: none; }
  .btn, button.btn { width: 100%; text-align: center; margin-bottom: 8px; }
}
/* ── Print ────────────────────────────────────────────────── */
@media print {
  .navbar, footer, .btn { display: none !important; }
  body { font-size: 12pt; color: #000; }
  h1, h2, h3 { color: var(--qsg-navy); }
}

/* ── Sign In pagina ───────────────────────────────────────── */

/* Label kolom breder zodat 'Gebruikersnaam' niet afkapt */
.login-local .form-group .col-sm-4,
.login .form-group .col-sm-4,
#localLoginForm .control-label,
.localLogin .control-label {
  width: auto !important;
  min-width: 140px !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
}

/* Knoppen consistent en in huisstijl */
#localLoginForm .btn,
.localLogin .btn,
.login-local .btn {
  width: auto !important;
  min-width: 200px !important;
  display: block !important;
  margin-bottom: 12px !important;
  text-align: center !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding: 13px 28px !important;
}

/* Aanmelden knop – oranje */
#localLoginForm .btn-primary,
.localLogin .btn-primary {
  background: var(--qsg-orange) !important;
  border-color: var(--qsg-orange) !important;
  color: #ffffff !important;
}

/* Wachtwoord vergeten – outline navy */
#localLoginForm .btn-default,
.localLogin .btn-default {
  background: transparent !important;
  border: 2px solid var(--qsg-navy) !important;
  color: var(--qsg-navy) !important;
}

/* Externe aanmelding knop (Azure AD) */
.external-login .btn,
#externalLoginForm .btn {
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding: 13px 28px !important;
  min-width: 200px !important;
}

/* ── Sign In pagina (correcte selectors) ──────────────────── */

/* Label kolom breder zodat 'Gebruikersnaam' niet afkapt */
#submit-signin-local,
form[action*="signin"] .col-sm-4,
.col-sm-4 label {
  white-space: nowrap !important;
  min-width: 160px !important;
}

/* Knoppenrij onder elkaar met consistente breedte */
.col-sm-offset-4.col-sm-8 {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

/* Aanmelden knop */
#submit-signin-local {
  background: var(--qsg-orange) !important;
  border: none !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  padding: 13px 32px !important;
  min-width: 200px !important;
  font-size: 1rem !important;
}

/* Wachtwoord vergeten link als knop */
a.btn.btn-default[href*="ForgotPassword"] {
  background: transparent !important;
  border: 2px solid var(--qsg-navy) !important;
  border-radius: 999px !important;
  color: var(--qsg-navy) !important;
  font-weight: 700 !important;
  padding: 13px 32px !important;
  min-width: 200px !important;
  text-align: center !important;
  text-decoration: none !important;
  font-size: 1rem !important;
}

/* ── Sign In label fix ────────────────────────────────────── */
label.col-sm-4.control-label {
  width: auto !important;
  min-width: 160px !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow: visible !important;
}

/* ── Sign In form layout – labels boven velden ────────────── */
#localLoginForm .form-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

#localLoginForm .form-group label.col-sm-4,
#localLoginForm .form-group .col-sm-8 {
  width: 100% !important;
  float: none !important;
  padding-left: 0 !important;
}

/* ── Sign In form layout fix ──────────────────────────────── */
form[action*="SignIn"] .form-horizontal .form-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  margin-bottom: 16px !important;
}

form[action*="SignIn"] .form-horizontal label.col-sm-4 {
  width: 100% !important;
  float: none !important;
  padding-left: 0 !important;
  text-align: left !important;
}

form[action*="SignIn"] .form-horizontal .col-sm-8,
form[action*="SignIn"] .form-horizontal .col-sm-offset-4 {
  width: 100% !important;
  float: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

form[action*="SignIn"] .form-horizontal .form-control {
  width: 100% !important;
  max-width: 400px !important;
}

/* ── Dropdown / select tekst zichtbaar ────────────────────── */
select.form-control,
select {
  color: var(--qsg-navy) !important;
  background-color: var(--qsg-white) !important;
}

select.form-control option,
select option {
  color: var(--qsg-navy) !important;
  background-color: var(--qsg-white) !important;
}

/* ── Invulvelden groter + dropdown tekst fix ──────────────── */
.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="url"],
input[type="number"], input[type="date"], textarea, select {
  height: auto !important;
  min-height: 52px !important;
  line-height: 1.5 !important;
  padding: 14px 18px !important;
  font-size: 1rem !important;
  vertical-align: middle !important;
}

select.form-control,
select {
  height: 52px !important;
  line-height: 52px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
}

/* ── Radio buttons en checkboxes groter ───────────────────── */
input[type="radio"],
input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  margin-right: 10px !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  accent-color: var(--qsg-orange) !important;
}

/* Label naast radio/checkbox ook groter en verticaal uitgelijnd */
.radio label,
.checkbox label,
.radio-inline label,
.checkbox-inline label {
  font-size: 1rem !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Meer ruimte tussen opties */
.radio,
.checkbox {
  margin-bottom: 10px !important;
}

/* ── Tabel-stijl radio buttons (zoals Verzuim) groter ─────── */
table.table td,
table.table th {
  padding: 16px 20px !important;
  vertical-align: middle !important;
}

/* ── Checkbox spacing ─────────────────────────────────────── */
input[type="checkbox"] {
  margin-right: 12px !important;
  flex-shrink: 0 !important;
}

.checkbox label,
.checkbox-inline label {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  line-height: 1.5 !important;
}