:root{
  --bg:#0f1720;--sidebar-bg:#121a23;--topbar-bg:#0d141c;
  --card-bg:#fff;--card-text:#0f172a;--text:#e2e8f0;
  --accent:#0ea5e9;--border:#d1d5db;--shadow:0 6px 24px rgba(0,0,0,.18);
  --sidebar-w:260px
}

/* Base */
*{box-sizing:border-box}
html,body{min-height:100%;width:100%;max-width:100%;overflow-x:hidden}
body{margin:0;min-height:100vh;min-height:100dvh;font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:var(--bg);color:var(--text)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Shell */
.app-shell{width:100%;max-width:100%;min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);grid-template-rows:56px minmax(0,1fr);transition:grid-template-columns .25s ease;overflow-x:hidden}
.sidebar{grid-row:1/span 2;background:var(--sidebar-bg);border-right:1px solid rgba(255,255,255,.06);padding:4px 12px 12px;position:sticky;top:0;height:100vh;height:100dvh;overflow:auto;transform:translateX(0);transition:transform .25s ease;z-index:50}
.topbar{background:var(--topbar-bg);display:flex;align-items:center;gap:10px;justify-content:space-between;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.06)}
.topbar-actions{display:flex;gap:.5rem;align-items:center}
.content{padding:16px;min-width:0;max-width:100%;overflow-x:hidden}

/* Branding + nav */
.brand{display:flex;align-items:center;gap:10px;color:#fff;margin-bottom:12px}
.brand img{height:28px;border-radius:12px}
.brand .title{font-weight:700;letter-spacing:.2px}
.nav a{display:flex;align-items:center;gap:8px;padding:8px 10px;color:var(--text);border-radius:8px;text-decoration:none;opacity:.9}
.nav a:hover{background:rgba(255,255,255,.06);opacity:1}
.nav a.active{background:rgba(255,255,255,.12)}
.sidebar .nav-wrap{display:flex;flex-direction:column;height:100%}
.sidebar .nav-spacer{flex:1 1 auto;margin-top:.5rem;border-top:1px solid var(--border,#e5e7eb)}
.nav-settings{padding:.25rem 0 .5rem}
.nav-settings .section-title{font-size:.75rem;opacity:.7;padding:.5rem .8rem}
.sidebar .menu-item{display:flex;align-items:center;gap:8px;padding:8px 10px;margin:2px 8px;color:var(--text,#e5e7eb);border:1px solid transparent;border-radius:8px;background:none;text-decoration:none;width:calc(100% - 16px);cursor:pointer;font:inherit}
.sidebar .menu-item:hover{background:rgba(255,255,255,.06)}

/* Cards & buttons */
.card{background:var(--card-bg);color:var(--card-text);border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:var(--shadow);position:relative}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:10px;border:1px solid transparent;cursor:pointer;background:var(--accent);color:#fff;font-weight:600;box-shadow:0 2px 8px rgba(14,165,233,.35)}
.btn.secondary{background:#e5e7eb;color:#111827;border-color:#cbd5e1}
.btn.secondary:hover{background:#e2e8f0}
.btn.secondary.cancel{background:#e5e7eb;color:#111827;border-color:#d1d5db}
.btn.secondary.cancel:hover{background:#d1d5db}
.btn.ghost{background:transparent;color:#0b1220;border-color:var(--border)}
.btn.small{padding:.35rem .6rem;font-size:.9rem;border-radius:.5rem}

/* Fieldsets */
fieldset{border:1px solid var(--border);padding:12px;border-radius:12px;margin:0 0 12px;background:#fff}
legend{padding:0 6px;font-weight:700;color:#0b1220}

/* Hamburger */
.hamburger{width:40px;height:40px;border:0;background:transparent;display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;cursor:pointer}
.hamburger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px}

/* Overlay for mobile nav */
.nav-overlay{position:fixed;inset:0;background:#0008;display:none;z-index:40}
body[data-nav-open="0"]{--sidebar-w:0}
body[data-nav-open="0"] .sidebar{transform:translateX(-100%)}
@media (max-width:1024px){
  body:not([data-nav-open]){--sidebar-w:0}
  body:not([data-nav-open]) .sidebar{transform:translateX(-100%)}
  body[data-nav-open="1"] .nav-overlay{display:block}
}

/* Modal overlay */
.overlay{position:fixed;inset:0;background:#0008;color:#fff;display:flex;align-items:center;justify-content:center;font-family:system-ui;z-index:9999}
.overlay-card{background:#111c;padding:1.5rem;border-radius:1rem;max-width:320px;width:90%}
.overlay-card input{width:100%;padding:.6rem;margin:.5rem 0;border-radius:8px;border:1px solid #334155;background:#0b1220;color:#fff}
.overlay-card .msg{color:#f88;min-height:1.2em}

/* Sidebar brand vertical variant */
.sidebar .brand{flex-direction:column;align-items:flex-start;gap:6px}
.sidebar .brand img{height:48px}
.sidebar .brand .title{display:block;line-height:1.2;margin-top:2px}

/* Dropdown menu component */
details.menu{position:relative}
details.menu summary{cursor:pointer;padding:.4rem .6rem;border:1px solid var(--border);border-radius:8px;user-select:none}
details.menu[open]>ul{display:block}
details.menu ul{display:none;position:absolute;right:0;top:calc(100% + 6px);min-width:220px;background:var(--card-bg);color:var(--card-text);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:.5rem 0;z-index:100}
details.menu .menu-item{display:block;width:100%;text-align:left;padding:.5rem .75rem;background:none;border:0;font:inherit;color:inherit;cursor:pointer}
details.menu .menu-item:hover{background:rgba(255,255,255,.06)}

/* Dashboard background */
.page-dashboard .content{position:relative;overflow:hidden}
.page-dashboard .content::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:url("/app/assets/bg-dashboard-1080.webp");
  background-position:center;background-size:cover;background-color:rgba(0,0,0,.25);background-blend-mode:multiply
}
@supports (background-image: image-set(url("/app/assets/bg-dashboard-1080.webp") 1x, url("/app/assets/bg-dashboard-4k.webp") 2x)){
  .page-dashboard .content::before{background-image:image-set(url("/app/assets/bg-dashboard-1080.webp") 1x, url("/app/assets/bg-dashboard-4k.webp") 2x)}
}
@media (max-width:900px){
  .page-dashboard .content::before{background-image:url("/app/assets/bg-dashboard-mobile.webp");background-position:center top}
}
.page-dashboard .content>*{position:relative;z-index:1}

/* About hero */
.about-hero{margin:0 0 16px}
.about-hero img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:var(--shadow);object-fit:cover}

/* Generic form rows */
.form-row{display:grid;grid-template-columns:180px 1fr;gap:10px;align-items:center;margin:8px 0}
.form-row.stacked{grid-template-columns:1fr}
.form-row.stacked label{margin-bottom:4px}
@media (max-width:900px){
  .form-row{grid-template-columns:1fr}
  .form-row label{margin-bottom:4px}
}

/* Causes list */
.checks{display:flex;flex-wrap:wrap;gap:8px;padding:6px;border:1px solid var(--border,#e5e7eb);border-radius:6px;min-height:44px}
.checks .check{display:inline-flex;align-items:center;gap:6px;padding:4px 6px;background:rgba(0,0,0,.03);border-radius:6px}
.cat3{min-height:8em}

/* Lightbox for history photos */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:1000}
.lightbox.open{display:flex}
.lightbox img{max-width:95vw;max-height:95vh;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.lightbox .close{position:absolute;top:14px;right:16px;font-size:22px;color:#fff;cursor:pointer}

/* Inputs with scan button */
.input-with-btn{display:flex;gap:.5rem;align-items:center}
.input-with-btn input{flex:1}

/* Button stack on dashboard */
.button-stack{display:flex;flex-direction:column;gap:.6rem;max-width:28rem;margin:0}
.button-stack .btn{display:flex;align-items:center;justify-content:flex-start;width:100%}
.button-stack .btn svg{flex:0 0 auto;margin-right:.5rem}
@media (max-width:480px){.button-stack{max-width:100%}}
a.btn,a.btn:link,a.btn:visited,a.btn:hover,a.btn:active,.button-stack .btn{text-decoration:none!important}

/* ---------- Page-specific: controle & controle_intern ---------- */
/* Use same rules for both pages */
.page-controle, .page-controle_intern {}

/* Subtitles inside a fieldset */
.page-controle .sublegend,
.page-controle_intern .sublegend{font-weight:700;margin:.75rem 0 .5rem;color:#0f172a}

/* Stack helpers (labels + controls full width) */
.page-controle .stack-vert>label,
.page-controle_intern .stack-vert>label{display:block;margin:.45rem 0}
.page-controle .stack-vert input,
.page-controle .stack-vert select,
.page-controle .stack-vert textarea,
.page-controle_intern .stack-vert input,
.page-controle_intern .stack-vert select,
.page-controle_intern .stack-vert textarea{width:100%}

/* Force stacked rows to be vertical on these pages */
.page-controle .form-row.stacked,
.page-controle_intern .form-row.stacked{display:block}
.page-controle .form-row.stacked>input,
.page-controle .form-row.stacked>select,
.page-controle .form-row.stacked>textarea,
.page-controle_intern .form-row.stacked>input,
.page-controle_intern .form-row.stacked>select,
.page-controle_intern .form-row.stacked>textarea{width:100%}

/* Degassing radios: left & vertical */
.page-controle .radio-vertical,
.page-controle_intern .radio-vertical{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;margin:.5rem 0;text-align:left}
.page-controle .radio-vertical label,
.page-controle_intern .radio-vertical label{display:flex;align-items:center;gap:.5rem;margin:.2rem 0;font-weight:400}
.page-controle .radio-vertical input[type="radio"],
.page-controle_intern .radio-vertical input[type="radio"]{margin:0}

/* Vertical list for level-3 causes if .checks.vertical is used */
.page-controle .checks.vertical label,
.page-controle .checks.vertical .check,
.page-controle_intern .checks.vertical label,
.page-controle_intern .checks.vertical .check{display:block;margin:.25rem 0}

/* Re-usable group (set) styling */
.group.card{margin-top:.75rem}
.group-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}

/* Defect card header with remove button on the right (not bold) */
.defect .defect-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:-2px 0 8px}
.defect .defect-head .btn{font-weight:400}

/* Corner “badge” watermark (check/truck icons) */
.card .corner-badge{
  position:absolute;top:12px;right:12px;width:64px;height:auto;
  opacity:.16;pointer-events:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.15))
}

/* Prevent mobile focus zoom on both pages */
.page-controle input, .page-controle select, .page-controle textarea,
.page-controle_intern input, .page-controle_intern select, .page-controle_intern textarea{
  font-size:16px;line-height:1.25;min-height:44px;
}
.page-controle input[type=number], .page-controle input[type=date],
.page-controle input[type=time],   .page-controle input[type=month], .page-controle input[type=week],
.page-controle_intern input[type=number], .page-controle_intern input[type=date],
.page-controle_intern input[type=time],   .page-controle_intern input[type=month], .page-controle_intern input[type=week]{
  font-size:16px;
}


/* Full-width knoppen onder elkaar */
.form-actions{
  display: flex;
  flex-direction: column;
  gap: .75rem;           /* ruimte tussen Submit en Cancel */
  margin-top: .5rem;
}
.form-actions .btn{
  width: 100%;
  justify-content: center;  /* tekst centreren */
}


/* --- Compacte layout voor Oorzaken (Niveau 3) --- */
/* --- Compacte layout voor Oorzaken (Niveau 3) --- */
.cat3.checks{
  display:block;
  padding:8px 10px;
  border:1px solid var(--border,#e5e7eb);
  border-radius:10px;
  background:#fff;
}

.cat3.checks .check,
.cat3.checks .check-item,
.cat3.checks label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0;
  padding:.5rem 0;
  background:transparent;
  border-radius:0;
  border-bottom:1px solid #eef2f7;
}

.cat3.checks .check:last-child,
.cat3.checks .check-item:last-child,
.cat3.checks label:last-child{
  border-bottom:0;
}

.cat3.checks input[type="checkbox"]{
  width:18px;
  height:18px;
  flex:0 0 18px;
  margin:2px 0 0 0;
  transform:none !important;
  accent-color:#2563eb;
}

.cat3.checks .check span,
.cat3.checks .check-item span,
.cat3.checks label span{
  display:block;
  line-height:1.35;
  word-break:break-word;
}




/* GPS block */
.gps-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin:12px 0;
}

.qc-table td:nth-child(2) input { width:100%; }
.qc-set-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }
.qc-remove-set { margin-left:auto; }
}


/* Grotere klikzones voor radios op mobiel */
@media (max-width: 640px){
  .qc-table input[type="radio"]{
    transform: scale(1.25);
    width: 20px;
    height: 20px;
  }
  .qc-table td:nth-last-child(2),
  .qc-table td:last-child{
    padding-left: 6px;
    padding-right: 6px;
  }
}

/* zorg dat value-inputs niet te smal worden door table layout */
.qc-table td:nth-child(2){
  min-width: 180px;
}

/* Grotere OK/NOK radiobuttons + grotere klikzone */
.oknok label{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;      /* grotere touch target */
  border-radius: 10px;
}

.oknok input[type="radio"]{
  width:22px;
  height:22px;
}

/* Grotere cat3 checkboxes + grotere klikzone */
.cat3-list label{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;      /* grotere touch target */
  border-radius: 10px;
}

.cat3-list input[type="checkbox"]{
  transform: scale(1.6);
  transform-origin: left center;
}

/* Optioneel: iets meer ruimte tussen regels op mobiel */
@media (max-width: 768px){
  .cat2-row{ padding: 12px 0; }
  .cat3-list{ gap: 10px; }
}

.oknok label:active,
.cat3-list label:active{
  background: rgba(2,6,23,.06);
}

/* Mobile layout: titel boven, OK/NOK onder elkaar of netjes op nieuwe regel */
@media (max-width: 768px){
  .cat2-row{
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

.cat2-title{
  flex: 1 1 100%;
}

/* optie A: OK en NOK naast elkaar, maar op een nieuwe regel */
.oknok{
  flex: 1 1 100%;
  justify-content: flex-start;
}

/* optie B: OK en NOK onder elkaar (zet deze aan als je dat wil) */
/*
.oknok{
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.oknok label{ width: 100%; }
*/

@media (max-width: 768px){
  .cat2-row{ flex-wrap: wrap !important; align-items: flex-start !important; }
  .cat2-title{ flex: 1 1 100% !important; }
  .oknok{ flex: 1 1 100% !important; justify-content: flex-start !important; }
}

/* ===== MOBILE CHECKLIST LAYOUT FIX ===== */
@media (max-width: 768px){

  .cat2-row{
    display: block !important;
    padding-bottom: 14px !important;
  }

  .cat2-title{
    display:block;
    width:100%;
    margin-bottom:8px;
    font-size:16px;
    line-height:1.25;
  }

  .oknok{
    display:flex !important;
    justify-content:flex-start !important;
    gap:28px !important;
    padding-left:4px;
  }

  .oknok label{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:16px;
  }

  /* grotere touch targets */
  .page-controle_intern .qc-table input[type="radio"]{
    width:22px;
    height:22px;
  }
}

.page-controle_intern .qc-table input[type="radio"]{
  width: 18px;
  height: 18px;
  transform: none;
}

@media (max-width:640px){
  .page-controle_intern .qc-table input[type="radio"]{
    width: 22px;
    height: 22px;
    transform: none;
  }
}

.qc-select{
  width:100%;
  padding:12px;
  font-size:16px; /* voorkomt iPhone zoom */
  border-radius:10px;
  border:1px solid #cbd5e1;
  background:white;
}

.card.success{
  background:#ecfdf5;
  border:1px solid #10b981;
  color:#065f46;
  padding:14px;
  margin-bottom:14px;
  border-radius:10px;
}

.submit-banner{
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #10b981;
  padding: 14px 18px;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
  z-index: 9999;
  font-size: 15px;
}

/* History knop blauwgrijs (override ghost) */
a.btn.ghost.history{
  background: #6b7a8c !important;
  color: #fff !important;
  border-color: #556372 !important;
  box-shadow: none;
}

a.btn.ghost.history:hover{
  background: #556372 !important;
}

/* History buttons (histories.php) — blauwgrijs */
a.btn.history{
  background: #6b7a8c !important;
  color: #fff !important;
  border-color: #556372 !important;
  box-shadow: none; /* optioneel: zelfde look als dashboard */
}

a.btn.history:hover{
  background: #556372 !important;
}

.toast-success{
  position:fixed;
  top:12px;
  left:12px;
  right:auto;
  z-index:9999;

  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:12px 50px;     /* hoger + breder */
  min-width:200px;       /* iets breder */

  border-radius:12px;

  background:rgba(22,163,74,0.90);  /* iets doorzichtiger */
  border:1px solid rgba(21,128,61,0.85);
  color:#fff;

  font-weight:600;
  font-size:15px;

  box-shadow:0 12px 28px rgba(0,0,0,.22);

  opacity:1;
  transition:opacity .35s ease, transform .35s ease;
}

.toast-icon{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.18);
  font-size: 14px;
  line-height: 1;
  flex: 0 0 22px;
}

.toast-text{
  line-height: 1.2;
}

@keyframes toastInOut{
  0%{
    opacity: 0;
    transform: translateY(-8px);
  }
  12%{
    opacity: 1;
    transform: translateY(0);
  }
  82%{
    opacity: 1;
    transform: translateY(0);
  }
  100%{
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* === Consistent radio & checkbox size for mobile forms === */

/* Radios */
input[type="radio"]{
  width:22px;
  height:22px;
  accent-color:#2563eb;
  cursor:pointer;
  transform:none;
}

/* Checkboxes */
input[type="checkbox"]{
  width:18px;
  height:18px;
  accent-color:#2563eb;
  cursor:pointer;
  transform:none;
  margin:0;
  flex:0 0 18px;
}

/* alignment */
.check,
.radio-vertical label{
  display:flex;
  align-items:center;
  gap:8px;
}

.check-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.check-item input[type="checkbox"]{
  margin-top:2px;
}

.check-item span{
  display:block;
  line-height:1.35;
}

/* ===== Freight package check: checkbox alignment + size ===== */
.page-controle .cat1-check-wrap .check-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:6px 0;
}

.page-controle .cat1-check-wrap .check-item input[type="checkbox"]{
  width:20px !important;
  height:20px !important;
  min-width:20px;
  min-height:20px;
  flex:0 0 20px;
  margin:2px 0 0 0 !important;
  transform:none !important;
  accent-color:#2563eb;
}

.page-controle .cat1-check-wrap .check-item span{
  display:block;
  line-height:1.35;
  margin:0;
}

/* iets meer ruimte tussen groepen */
.page-controle .cat1-check-wrap .check-group{
  padding:10px 12px;
}

.page-controle .cat1-check-wrap .check-group-title{
  margin-bottom:8px;
}

.history-main{
  background:#02355A;      /* donkerder blauw */
  border-color:#02355A;
  color:white;
  font-size:1.25rem;
  padding:18px 20px;
  border-radius:12px;
}

.history-main:hover{
  background:#1e40af;
  border-color:#1e40af;
}

.history-plus{
  background:#16a34a;
  border-color:#16a34a;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.8rem;
  font-weight:700;
}

.history-plus:hover{
  background:#15803d;
  border-color:#15803d;
}

.history-main svg{
  width:32px;
  height:32px;
  min-width:32px;
  margin-right:16px;
}

/*BW: na wijziging: sw.js CACHE versie ophogen */

/* Security / login / MFA */

.security-body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #102036;

  background:
          linear-gradient(
                  rgba(6, 25, 42, .62),
                  rgba(5, 27, 43, .72)
          ),
          url("/app/assets/security-background.png")
          center center / cover no-repeat fixed;
}

.security-shell {
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 18px;
}

.security-brand {
  width: min(100%, 520px);
  text-align: center;
  color: #fff;
  margin-bottom: 24px;
}

.security-logo {
  display: block;
  width: min(250px, 65vw);
  height: auto;
  margin: 0 auto 18px;
}

.security-product {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.02em;
}

.security-subtitle {
  margin-top: 8px;
  color: #c6d1dd;
  font-size: clamp(15px, 2vw, 20px);
}

.security-card {
  width: min(100%, 480px);
  box-sizing: border-box;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 18px;
  padding: 30px;
  box-shadow:
          0 24px 70px rgba(0,0,0,.32),
          0 3px 12px rgba(0,0,0,.12);
}

.security-languages {
  text-align: center;
  margin-bottom: 22px;
  color: #8995a5;
  font-size: 14px;
}

.security-languages a {
  color: #255985;
  text-decoration: none;
  font-weight: 600;
  padding: 4px 7px;
}

.security-languages a:hover {
  text-decoration: underline;
}

.security-title {
  margin: 0 0 24px;
  font-size: 30px;
  line-height: 1.15;
  color: #102036;
}

.security-card form {
  display: grid;
  gap: 16px;
}

.security-card label {
  display: grid;
  gap: 7px;
  font-weight: 600;
  font-size: 14px;
}

.security-card input[type="email"],
.security-card input[type="password"],
.security-card input[type="text"],
.security-card input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cbd5df;
  border-radius: 9px;
  background: #fff;
  padding: 12px 13px;
  min-height: 44px;
  font: inherit;
  color: #102036;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.security-card input:focus {
  border-color: #2697df;
  box-shadow: 0 0 0 3px rgba(38,151,223,.15);
}

.security-card .btn,
.security-card button[type="submit"] {
  appearance: none;
  border: 0;
  border-radius: 9px;
  min-height: 46px;
  padding: 11px 20px;
  cursor: pointer;
  background: linear-gradient(135deg, #2c9de6, #078fe8);
  color: #fff;
  font: inherit;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(0,139,223,.22);
}

.security-card .btn:hover,
.security-card button[type="submit"]:hover {
  filter: brightness(1.04);
}

.security-card a {
  color: #17679f;
}

.security-card [role="alert"] {
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff1f1;
  color: #8d2727;
}

.security-card svg {
  display: block;
  max-width: 280px;
  width: 100%;
  height: auto;
  margin: 18px auto;
  background: #fff;
  padding: 8px;
  box-sizing: border-box;
}

.security-footer {
  margin-top: 20px;
  color: #8ea0b2;
  font-size: 13px;
  text-align: center;
}

@media (max-width: 600px) {
  .security-shell {
    justify-content: flex-start;
    padding-top: 24px;
  }

  .security-brand {
    margin-bottom: 18px;
  }

  .security-card {
    padding: 22px 18px;
    border-radius: 14px;
  }

  .security-title {
    font-size: 26px;
  }
}

@media (max-width: 600px) {
  .security-body {
    background-attachment: scroll;
    background-position: center center;
  }
}
/* Zebra hardware scanner + camera buttons (internal parcel control) */
.scan-input-group input{min-width:0}
.scan-input-group .scan-icon-btn{
  flex:0 0 auto;
  width:44px;
  min-width:44px;
  height:40px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.scan-input-group .scan-icon-btn svg{display:block}
.scan-input-group.scan-ready input{
  outline:2px solid #2563eb;
  outline-offset:1px;
}
@media (max-width:480px){
  .scan-input-group{gap:.35rem}
  .scan-input-group .scan-icon-btn{width:42px;min-width:42px}
}

/* Shared scanner / All OK controls */
.section-heading-row,
.section-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  flex-wrap:wrap;
}
.section-heading-row h3,
.section-toolbar .sublegend{margin:0;}
.section-toolbar{margin:0 0 .65rem;}

/* Put All OK / Clear all on a separate row below the title, right aligned. */
.section-toolbar:has(.all-ok-btn):has(.clear-all-btn),
.section-heading-row:has(.all-ok-btn):has(.clear-all-btn){
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  grid-template-rows:auto auto;
  column-gap:.5rem;
  row-gap:.45rem;
  align-items:center;
}
.section-toolbar:has(.all-ok-btn):has(.clear-all-btn) > :not(.all-ok-btn):not(.clear-all-btn),
.section-heading-row:has(.all-ok-btn):has(.clear-all-btn) > :not(.all-ok-btn):not(.clear-all-btn){
  grid-column:1 / -1;
  grid-row:1;
}
.section-toolbar:has(.all-ok-btn):has(.clear-all-btn) .all-ok-btn,
.section-heading-row:has(.all-ok-btn):has(.clear-all-btn) .all-ok-btn{
  grid-column:2;
  grid-row:2;
  margin-left:0;
  white-space:nowrap;
}
.section-toolbar:has(.all-ok-btn):has(.clear-all-btn) .clear-all-btn,
.section-heading-row:has(.all-ok-btn):has(.clear-all-btn) .clear-all-btn{
  grid-column:3;
  grid-row:2;
  margin-left:0;
  white-space:nowrap;
}

.qc-row.qc-not-applicable,
.qc-details-row.qc-not-applicable{opacity:.55;}
.qc-row.qc-not-applicable select,
.qc-row.qc-not-applicable input{cursor:not-allowed;}


.sidebar .nav-wrap{
  padding-top:0;
}

.sidebar .brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  margin:0 0 14px 0;
  padding:0;
}

.sidebar .brand a{
  display:block;
  margin:0;
  padding:0;
  line-height:0;
}

.sidebar .brand img{
  display:block;
  margin:0;
}

.sidebar .brand > a > img{
  height:36px;   /* actware logistic */
  width:auto;
}

.sidebar .rex-panels-logo{
  width:150px;
  max-width:100%;
  height:auto;
  margin-top:2px;
}

/* ===== iPhone/mobile fix: internal parcel QC table ===== */
@media (max-width: 640px){
  .page-controle .content{
    padding:8px;
  }

  .page-controle .card{
    padding:10px;
    min-width:0;
  }

  .page-controle fieldset{
    min-width:0;
    padding:10px;
  }

  .page-controle .section-toolbar{
    gap:8px;
  }

  .page-controle .section-toolbar .btn{
    padding:10px 12px;
    font-size:14px;
  }

  .page-controle .qc-table{
    width:100%;
    table-layout:fixed;
    border-collapse:collapse;
  }

  .page-controle .qc-table th,
  .page-controle .qc-table td{
    min-width:0 !important;
    padding:7px 4px;
    vertical-align:middle;
    overflow-wrap:anywhere;
  }

  .page-controle .qc-table th:nth-child(1),
  .page-controle .qc-table td:nth-child(1){
    width:30%;
  }

  .page-controle .qc-table th:nth-child(2),
  .page-controle .qc-table td:nth-child(2){
    width:46%;
    min-width:0 !important;
  }

  .page-controle .qc-table th:nth-child(3),
  .page-controle .qc-table td:nth-child(3),
  .page-controle .qc-table th:nth-child(4),
  .page-controle .qc-table td:nth-child(4){
    width:12%;
    text-align:center;
    padding-left:2px;
    padding-right:2px;
  }

  .page-controle .qc-table td:nth-child(2) input,
  .page-controle .qc-table td:nth-child(2) select{
    width:100%;
    min-width:0;
    max-width:100%;
    padding:10px 8px;
  }

  .page-controle .qc-table input[type="radio"]{
    width:22px;
    height:22px;
    margin:0 auto;
    display:block;
    transform:none !important;
  }

  .page-controle .qc-set-head td{
    padding-top:14px;
  }

  .page-controle .qc-details-row td{
    width:auto !important;
  }

  .page-controle .scan-input-group{
    min-width:0;
  }

  .page-controle .scan-input-group input{
    min-width:0;
  }
}


/* Submit/save progress overlay */
.rex-save-overlay{
  position:fixed;
  inset:0;
  z-index:30000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(2,6,23,.68);
  backdrop-filter:blur(2px);
}
.rex-save-card{
  min-width:220px;
  max-width:90vw;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:18px 22px;
  border-radius:14px;
  background:#fff;
  color:#0f172a;
  box-shadow:0 18px 55px rgba(0,0,0,.35);
  font-size:1rem;
  font-weight:700;
}
.rex-save-spinner{
  width:28px;
  height:28px;
  flex:0 0 28px;
  border:3px solid #cbd5e1;
  border-top-color:#0ea5e9;
  border-radius:50%;
  animation:rex-save-spin .8s linear infinite;
}
@keyframes rex-save-spin{
  to{transform:rotate(360deg)}
}
@media (prefers-reduced-motion:reduce){
  .rex-save-spinner{animation-duration:1.6s}
}