/* =========================================================================
   Desii App — appvergrendeling (Face ID), installatiehint, standalone- en
   mobiele-beheer-verfijningen.
   ========================================================================= */

/* ---- Face ID-vergrendelingsscherm ---- */
#desii-lock{
  position:fixed; inset:0; z-index:2147483647;
  background:#ffffff;
  display:flex; align-items:center; justify-content:center;
  padding:24px calc(24px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.desii-lock__card{ text-align:center; max-width:320px; width:100%; }
.desii-lock__logo{
  width:84px; height:84px; margin:0 auto 22px; border-radius:22px;
  background:#fff url(../img/app-icon-192.png) center/72% no-repeat;
  box-shadow:0 12px 30px rgba(44,51,62,.16);
}
.desii-lock__card h1{ font-size:20px; font-weight:700; color:#2c333e; margin:0 0 20px; }
.desii-lock__btn{
  -webkit-appearance:none; appearance:none; border:0; cursor:pointer;
  background:#305959; color:#fff; font-size:16px; font-weight:600;
  padding:14px 22px; border-radius:14px; width:100%;
}
.desii-lock__btn:active{ opacity:.9; }
.desii-lock__err{ color:#b3261e; font-size:14px; margin:14px 0 0; }

/* ---- iOS "zet op beginscherm"-hint (op Mijn account) ---- */
.desii-install-hint{
  position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:9998; background:#2c333e; color:#fff; border-radius:14px;
  padding:14px 16px; display:flex; gap:12px; align-items:center;
  box-shadow:0 14px 34px rgba(44,51,62,.28); font-size:14px; line-height:1.4;
}
.desii-install-hint button{
  -webkit-appearance:none; appearance:none; border:0; background:transparent;
  color:#fff; font-size:22px; line-height:1; cursor:pointer; padding:0 2px;
}

/* =========================================================================
   Standalone-app (op beginscherm geopend): ruimte voor de iOS-statusbalk +
   compactere chrome. Alleen in display-mode: standalone.
   ========================================================================= */
@media (display-mode: standalone){
  /* Veilige bovenmarge zodat inhoud niet onder de statusbalk/notch valt. */
  html{ --desii-safe-top: env(safe-area-inset-top); }

  /* Beheer: adminbalk niet nodig als je 'in de app' zit → geef inhoud lucht. */
  #wpadminbar{ padding-top: env(safe-area-inset-top); height:auto; }
}

/* =========================================================================
   Mobiele app-interface (Home) + vaste onderbalk.
   Desktopdashboard (.desii-dash--desktop) en de app-Home (.desii-m) wisselen
   elkaar af op de 782px-grens (WordPress' eigen mobiele beheergrens).
   ========================================================================= */

/* Standaard: toon desktop, verberg app-Home. */
.desii-m{ display:none; }

@media (max-width:782px){
  /* Wissel: verberg desktopdashboard, toon app-Home. */
  .desii-dash--desktop{ display:none !important; }
  .desii-m{ display:block; }

  /* Laat de app-Home het volledige contentgebied vullen (buiten .wrap-marges). */
  .desii-m{
    --a:#305959; --a2:#3d6d6d; --ink:#1c2b2b; --muted:#6b7772;
    --line:#e7ebe7; --surf:#fff; --danger:#b3261e;
    margin:-10px -12px 0; padding:0 0 calc(74px + env(safe-area-inset-bottom));
    background:#f4f6f4; min-height:100vh;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  }
  .desii-m *{ box-sizing:border-box; }

  /* App-header */
  .desii-m__bar{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px 12px; }
  .desii-m__id{ display:flex; align-items:center; gap:11px; min-width:0; }
  .desii-m__logo{ width:38px; height:38px; border-radius:11px; object-fit:contain; flex:0 0 auto; }
  .desii-m__logo--txt{ background:var(--a); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:19px; }
  .desii-m__hi{ min-width:0; }
  .desii-m__hi b{ display:block; font-size:16px; color:var(--ink); line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .desii-m__hi span{ font-size:12.5px; color:var(--muted); text-transform:capitalize; }
  .desii-m__bell{ width:40px; height:40px; border-radius:12px; background:var(--surf); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; position:relative; color:var(--ink); flex:0 0 auto; text-decoration:none; }
  .desii-m__bell svg{ width:19px; height:19px; }
  .desii-m__reddot{ position:absolute; top:9px; right:10px; width:8px; height:8px; border-radius:50%; background:var(--danger); border:2px solid var(--surf); }

  /* Hero-omzet */
  .desii-m__hero{ display:block; text-decoration:none; margin:2px 16px 16px; border-radius:20px; padding:20px; color:#fff; background:linear-gradient(140deg,var(--a),var(--a2)); box-shadow:0 14px 30px rgba(48,89,89,.26); position:relative; overflow:hidden; }
  .desii-m__hero,.desii-m__hero *{ color:#fff !important; }
  .desii-m__hero::after{ content:""; position:absolute; right:-40px; top:-40px; width:150px; height:150px; border-radius:50%; background:rgba(255,255,255,.08); }
  .desii-m__hk{ font-size:12.5px; opacity:.85; }
  .desii-m__hv{ display:block; font-size:36px; font-weight:800; letter-spacing:-1px; margin:2px 0 6px; line-height:1; }
  .desii-m__hv .woocommerce-Price-amount,.desii-m__hv bdi{ font-weight:800; }
  .desii-m__hmeta{ font-size:13px; opacity:.92; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .desii-m__chip{ background:rgba(255,255,255,.18); border-radius:999px; padding:3px 9px; font-size:12px; font-weight:700; }

  /* Stat-chips */
  .desii-m__stats{ display:flex; gap:10px; overflow-x:auto; padding:0 16px 4px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .desii-m__stats::-webkit-scrollbar{ display:none; }
  .desii-m__stat{ flex:0 0 auto; min-width:130px; background:var(--surf); border:1px solid var(--line); border-radius:15px; padding:13px 14px; display:flex; flex-direction:column; gap:2px; }
  .desii-m__sk{ font-size:11.5px; color:var(--muted); }
  .desii-m__sv{ font-size:20px; font-weight:700; color:var(--ink); letter-spacing:-.3px; }
  .desii-m__sv .woocommerce-Price-amount,.desii-m__sv bdi{ font-weight:700; }
  .desii-m__sm{ font-size:11.5px; color:var(--muted); }

  /* Sectiekoppen */
  .desii-m__sec{ display:flex; align-items:baseline; justify-content:space-between; padding:22px 18px 10px; }
  .desii-m__sec h2{ margin:0; font-size:16px; color:var(--ink); }
  .desii-m__sec a{ font-size:13px; color:var(--a); text-decoration:none; font-weight:600; }

  /* Mini-grafiek */
  .desii-m__card{ margin:0 16px; background:var(--surf); border:1px solid var(--line); border-radius:16px; padding:16px; }
  .desii-m__bars{ display:flex; align-items:flex-end; gap:5px; height:92px; }
  .desii-m__bars i{ flex:1; background:linear-gradient(180deg,var(--a2),var(--a)); border-radius:5px 5px 0 0; min-height:6px; opacity:.9; }
  .desii-m__bars i:last-child{ opacity:1; }
  .desii-m__barsAxis{ display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-top:8px; }

  /* Bestellingen */
  .desii-m__orders{ margin:0 16px; background:var(--surf); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
  .desii-m__order{ display:flex; align-items:center; gap:12px; padding:13px 15px; border-top:1px solid var(--line); text-decoration:none; }
  .desii-m__order:first-child{ border-top:0; }
  .desii-m__av{ width:38px; height:38px; border-radius:11px; background:#eef2ef; color:var(--a); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13.5px; flex:0 0 auto; }
  .desii-m__omid{ flex:1; min-width:0; display:flex; flex-direction:column; }
  .desii-m__oname{ font-size:14.5px; color:var(--ink); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .desii-m__osub{ font-size:12px; color:var(--muted); }
  .desii-m__oright{ text-align:right; flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
  .desii-m__oamt{ font-size:14.5px; font-weight:700; color:var(--ink); }
  .desii-m__badge{ display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; }
  .desii-m__badge.is-new{ background:#e7f0ff; color:#1c5fd0; }
  .desii-m__badge.is-ship{ background:#fff3e0; color:#b26a00; }
  .desii-m__badge.is-done{ background:#e7f3ee; color:#1f7a4d; }
  .desii-m__badge.is-muted{ background:#eef1ef; color:#6b7772; }
  .desii-m__empty{ padding:18px 15px; color:var(--muted); font-size:13.5px; margin:0; }

  /* Snelacties */
  .desii-m__quick{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 16px; }
  .desii-m__qa{ background:var(--surf); border:1px solid var(--line); border-radius:15px; padding:14px; display:flex; align-items:center; gap:11px; text-decoration:none; min-height:44px; }
  .desii-m__qic{ width:38px; height:38px; border-radius:11px; background:#eef2ef; color:var(--a); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
  .desii-m__qic svg{ width:19px; height:19px; }
  .desii-m__qa b{ font-size:13.5px; color:var(--ink); font-weight:600; line-height:1.2; }
  .desii-m__foot{ color:var(--muted); font-size:12px; text-align:center; margin:22px 20px 6px; }
}

/* ---- Vaste onderbalk (tab-navigatie) ---- */
.desii-tabs{ display:none; }
@media (max-width:782px){
  .desii-tabs{
    position:fixed; left:0; right:0; bottom:0; z-index:99998;
    height:calc(60px + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    display:flex; background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px);
    border-top:1px solid #e7ebe7;
  }
  .desii-tab{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-decoration:none; color:#6b7772; position:relative; }
  .desii-tab svg{ width:23px; height:23px; }
  .desii-tab span{ font-size:10.5px; font-weight:600; }
  .desii-tab--on{ color:#305959; }
  .desii-tab--on::before{ content:""; position:absolute; top:7px; width:34px; height:34px; border-radius:11px; background:rgba(48,89,89,.10); }
  .desii-tabs__badge{ position:absolute; top:7px; left:50%; margin-left:6px; background:#b3261e; color:#fff; font-size:9.5px; font-weight:700; min-width:16px; height:16px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 4px; }

  /* Ruimte onder alle beheerpagina's zodat de onderbalk niets afdekt. */
  #wpbody-content{ padding-bottom:calc(72px + env(safe-area-inset-bottom)) !important; }
}