/* File:    assets/css/app.css
 * Purpose: Brand styling + mobile-first layout + PWA standalone mode.
 * Version: 1.1.0 (2026-06-01)
 */

:root{
  --wh-pink:  #ec1e79;
  --wh-pink-d:#c81866;
  --wh-black: #111;
  --wh-grey:  #f4f4f6;
  --wh-border:#e1e1e6;
}

/* iOS-safe areas (notch) when installed as PWA */
html, body { -webkit-tap-highlight-color: rgba(236,30,121,.15); }
body{
  background: var(--wh-grey);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  padding-top: env(safe-area-inset-top);
  padding-bottom: calc(env(safe-area-inset-bottom) + 1rem);
}

/* Navbar (brand) */
.app-navbar{
  background: var(--wh-black);
  padding-top: calc(env(safe-area-inset-top) + .5rem);
}
.app-navbar .navbar-brand{ color:#fff; font-weight:700; letter-spacing:.02em; }
.app-navbar .navbar-brand .bi{ color: var(--wh-pink); }
.app-navbar .nav-link{ color:#e8e8e8 !important; }
.app-navbar .nav-link:hover{ color: var(--wh-pink) !important; }

/* Brand utilities */
.btn-brand{ background:var(--wh-pink); border-color:var(--wh-pink); color:#fff; }
.btn-brand:hover, .btn-brand:focus{ background:var(--wh-pink-d); border-color:var(--wh-pink-d); color:#fff; }
.text-brand{ color: var(--wh-pink) !important; }
.bg-brand{ background: var(--wh-pink) !important; color:#fff; }
.border-brand-subtle{ border-color: var(--wh-pink) !important; }

/* Vehicle picker grid */
.vehicle-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:.75rem;
}
.vehicle-card{
  background:#fff; border:2px solid var(--wh-border); border-radius:.5rem;
  padding:.75rem; cursor:pointer;
  transition: border-color .12s, transform .12s, box-shadow .12s;
  display:flex; flex-direction:column; text-align:center;
  min-height:170px; position:relative;
}
.vehicle-card:hover, .vehicle-card:focus-within{ border-color: var(--wh-pink); transform: translateY(-1px); }
.vehicle-card.selected{ border-color: var(--wh-pink); box-shadow: 0 0 0 3px rgba(236,30,121,.18); }
.vehicle-card .svg-box{ height:70px; display:flex; align-items:center; justify-content:center; color:var(--wh-black); }
.vehicle-card .svg-box svg{ width:100%; max-height:70px; }
.vehicle-card.selected .svg-box{ color: var(--wh-pink); }
.vehicle-card .art-no{ font-size:.7rem; color:#888; }
.vehicle-card .name{ font-size:.8rem; font-weight:600; line-height:1.2; min-height:2.4em; margin:.25rem 0; }
.vehicle-card .price{ font-weight:700; }
.vehicle-card input[type=radio]{ position:absolute; opacity:0; pointer-events:none; }

/* Signature canvas */
.signature-wrap{ background:#fff; border:1px dashed #aaa; border-radius:.5rem; }
#signaturePad{ width:100%; height:200px; touch-action:none; display:block; }

/* Lieferschein print */
.lieferschein-print{
  background:#fff; padding:2rem; max-width:800px; margin:0 auto;
  border:1px solid #ddd; border-radius:.5rem;
}
.lieferschein-print h1{ font-size:1.5rem; }
@media print{
  .app-navbar, .app-footer, .no-print, .alert, .sticky-action, .pwa-install { display:none !important; }
  body{ background:#fff; padding:0; }
  .lieferschein-print{ border:none; box-shadow:none; padding:1rem; }
}

.pricelist-svg{ width:90px; height:38px; color:var(--wh-black); display:inline-block; }
.pricelist-svg svg{ width:100%; height:100%; }

.group-header{ background:var(--wh-black); color:#fff; padding:.5rem .75rem; border-radius:.25rem; margin-top:1.25rem; }
.group-header .badge{ background: var(--wh-pink); }

.login-card{ max-width:420px; margin: 4rem auto; }

/* Settings page sticky save bar */
.sticky-action{
  position: sticky; bottom: 0;
  background: var(--wh-grey); padding: 1rem 0;
  border-top: 1px solid var(--wh-border);
  z-index: 5;
}

/* PWA install button */
.pwa-install{
  position: fixed; bottom: calc(env(safe-area-inset-bottom) + 1rem); right: 1rem;
  z-index: 50; display: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.pwa-install.show{ display: inline-flex; }

/* ======================== MOBILE ========================= */
@media (max-width: 575.98px){
  /* 2-column vehicle grid on phones, compact */
  .vehicle-grid{ grid-template-columns: repeat(2, 1fr); gap:.5rem; }
  .vehicle-card{ min-height:150px; padding:.5rem; }
  .vehicle-card .svg-box{ height:54px; }
  .vehicle-card .svg-box svg{ max-height:54px; }
  .vehicle-card .name{ font-size:.72rem; min-height:2.1em; }
  .vehicle-card .price{ font-size:.95rem; }

  /* Avoid iOS zoom on focus - inputs ≥16px */
  .form-control, .form-select, input, textarea, select{ font-size:16px !important; }

  /* Bigger touch targets */
  .btn{ min-height:44px; padding-left:1rem; padding-right:1rem; }
  .btn-sm{ min-height:36px; }
  .nav-link{ padding:.75rem 1rem; }
  .form-check-input{ width:1.4em; height:1.4em; }

  /* Signature pad smaller on phone */
  #signaturePad{ height:160px; }

  /* Card headers compact */
  .card-header, .card-body{ padding:.75rem; }

  /* Tables become compact + horizontally scrollable */
  .table-responsive{ -webkit-overflow-scrolling: touch; }
  .table-sm td, .table-sm th{ padding:.4rem .5rem; font-size:.85rem; }

  /* Hide redundant footer on small */
  .app-footer .row > div{ margin-bottom:.5rem; }

  /* Form submit sticky on phones (form page only) */
  .form-actions-sticky{
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #fff; border-top: 2px solid var(--wh-pink);
    padding: .75rem 1rem calc(env(safe-area-inset-bottom) + .75rem);
    z-index: 30; display: flex; gap:.5rem;
    box-shadow: 0 -2px 12px rgba(0,0,0,.08);
  }
  .form-actions-sticky .btn{ flex:1; }
  .has-sticky-actions{ padding-bottom: 110px; }

  /* Selected summary becomes sticky-bottom-above-actions */
  .selected-summary-mobile{
    position: sticky; bottom: 80px;
    z-index: 25; margin-top: 1rem;
  }
}

/* ======================== TABLET ========================= */
@media (min-width: 576px) and (max-width: 767.98px){
  .vehicle-grid{ grid-template-columns: repeat(3, 1fr); }
  .form-control, .form-select{ font-size:16px; }
}

/* ======================== PWA standalone mode ========================= */
@media (display-mode: standalone), (display-mode: fullscreen){
  body{ background: var(--wh-grey); }
  /* In-app, no need for external chrome */
  .external-only{ display: none !important; }
  /* Subtle pull-to-refresh-like overscroll color */
  html{ background: var(--wh-black); }
}

/* Accessibility: visible focus */
:focus-visible{ outline: 3px solid rgba(236,30,121,.6); outline-offset: 2px; }