/* login.css */

/* =========================================
   ✅ Login: NOOIT scrollen (page)
========================================= */
.topbar, .footer { display:none !important; }

html, body{
  height: 100% !important;
  overflow: hidden !important;
}

body{
  margin: 0 !important;
  background: #fff !important;
}

/* Base wrapper neutraliseren (vaak oorzaak van scroll/height issues) */
.container{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;

  display: block !important;        /* base kan grid/flex zijn */
}

/* Boot overlay uit */
.boot-overlay, #boot-overlay, [data-role="boot-overlay"]{
  display:none !important;
  opacity:0 !important;
  pointer-events:none !important;
}
html[data-boot="loading"] .boot-overlay,
html[data-boot="loading"] #boot-overlay,
html[data-boot="loading"] [data-role="boot-overlay"]{
  display:none !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* =========================================
   ✅ Layout: compact, geen “lange kaart”
========================================= */
.login-wrap{
  height: 100vh;
  min-height: 0;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 24px;
  box-sizing: border-box;
  gap: 18px;
}

.login-logo{
  max-width: 200px;
  height: auto;
  display: block;
}

/* ❗ Dit is de fix: base .card kan height/min-height/flex hebben */
.card.login-card{
  width: min(360px, 100%) !important;
  max-width: 360px !important;
  margin-inline: auto !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  display: block !important;
  flex: 0 0 auto !important;

  box-shadow: none !important;
  border: 1px solid #ddd;
}

.login-card label{
  display:block;
  margin-top: 10px;
  color:#475569;
  font-weight:600;
  font-size: 14px;
}

.login-card .input{
  width:100%;
  box-sizing:border-box;
}

.btn.login-btn{
  background-color:#2459a6;
  color:#fff;
  border:none;
  padding:10px 16px;
  border-radius:6px;
  cursor:pointer;
  font-size:15px;
  font-weight:500;
  transition: background-color .2s ease;
  width: 50%;
  margin: 16px auto 0;
  display:block;
  min-width:140px;
  text-align:center;
}
.btn.login-btn:hover{ background-color:#1d4885; }

.password-field{ position:relative; margin-top:4px; }
.password-field .input{ width:100%; padding-right:42px; }

.password-toggle{
  position:absolute;
  top:50%;
  right:10px;
  transform:translateY(-50%);
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  color:#64748b;
}
.password-toggle:hover{ color:#1f2937; }
.password-toggle:focus-visible{ outline:2px solid #2459a6; outline-offset:2px; border-radius:999px; }
.password-toggle svg{ width:20px; height:20px; display:block; }
.password-toggle .icon-eye-closed{ display:none; }
.password-toggle.is-visible .icon-eye-open{ display:none; }
.password-toggle.is-visible .icon-eye-closed{ display:inline; }

:root{
  --m-brand:#2459a6;
  --m-ink:#0f172a;
  --m-muted:#475569;
  --m-line: rgba(15,23,42,.14);
  --m-shadow: 0 10px 30px rgba(2,6,23,.12);
  --m-radius: 10px;
}

.login-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 2147483000;
}
.login-modal.is-open{ display:flex !important; }

.login-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(2,6,23,.40);
}

.login-modal__panel{
  position: relative;
  width: 100%;
  max-width: 460px;
  background: #fff;
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
  overflow: hidden;
}

.login-modal__body{ padding:16px 16px 14px 16px; }
.login-modal__title{
  margin:0;
  font-size:14px;
  font-weight:700;
  color: var(--m-ink);
  letter-spacing:.2px;
}
.login-modal__message{
  margin:8px 0 0 0;
  font-size:13px;
  color: var(--m-muted);
  line-height:1.45;
}
.login-modal__footer{
  display:flex;
  justify-content:flex-end;
  padding:0 16px 16px 16px;
}
.login-modal__btn{
  border:1px solid var(--m-brand);
  background: var(--m-brand);
  color:#fff;
  padding:9px 14px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
  font-size:13px;
  min-width:90px;
}
.login-modal__btn:hover{ filter:brightness(.95); }
.login-modal__btn:focus-visible{
  outline:2px solid rgba(36,89,166,.35);
  outline-offset:2px;
}

.login-modal__message p{ margin:0; }
.login-modal__message p + p{ margin-top:6px; }

/* ===== Focus/outline effect uitzetten (alle inputs/buttons/selects) ===== */
.manage-root :is(input, select, textarea, button, a):focus,
.manage-root :is(input, select, textarea, button, a):focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* voorkom dat browsers zelf nog een ring tekenen */
.manage-root :is(input, select, textarea, button, a){
  outline: none;
}

/* focus border niet laten veranderen */
.manage-root .q-input:focus,
.manage-root .type-input:focus,
.manage-root .type-select:focus{
  border-color: #e5e7eb !important; /* terug naar normaal */
}