/* Fire Prevent v0.10.45 - mobile-only responsive patch.
   Scope: application shell, forms, toolbars and data tables.
   LOCKED certificate/pass document artwork is intentionally untouched. */
@media (max-width: 640px) {
  html, body { max-width:100%; overflow-x:hidden; }
  #shell { width:100%; min-width:0; }
  #shell header {
    position:sticky; top:0; z-index:90; min-height:72px; width:100%;
    display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center;
    gap:10px; padding:10px 14px; box-sizing:border-box; background:#fff;
  }
  .mobile-menu-btn {
    display:flex !important; align-items:center; justify-content:center; width:44px; height:44px;
    border:0; border-radius:14px; background:#eef2f4; color:#102334; font-size:24px; line-height:1;
  }
  .fp-header-brand { min-width:0; display:flex; align-items:center; justify-content:center; }
  .fp-header-brand img { display:block; width:min(205px,100%); max-height:48px; object-fit:contain; }
  .fp-header-brand > div { display:none !important; }
  .fp-header-user { min-width:0; }
  .fp-header-user #who { display:none !important; }
  .fp-header-user .linkbtn, #logout { white-space:nowrap; font-size:16px; padding:8px 0; }

  .layout { display:block !important; width:100%; min-width:0; }
  #nav {
    position:fixed !important; z-index:120; top:0; left:0; bottom:0; width:min(84vw,320px) !important;
    min-width:0 !important; max-width:320px; height:100dvh; overflow-y:auto; box-sizing:border-box;
    padding:88px 16px 28px !important; transform:translateX(-105%); transition:transform .22s ease;
    box-shadow:12px 0 34px rgba(0,0,0,.18);
  }
  body.mobile-nav-open #nav { transform:translateX(0); }
  #nav button { display:block; width:100% !important; margin:0 0 6px !important; text-align:left; white-space:normal; }
  .mobile-nav-backdrop { display:none; position:fixed; inset:0; z-index:110; background:rgba(10,27,43,.42); }
  body.mobile-nav-open .mobile-nav-backdrop { display:block; }

  #app {
    width:100% !important; min-width:0 !important; max-width:100% !important; box-sizing:border-box;
    padding:24px 16px 88px !important; margin:0 !important; overflow-x:hidden;
  }
  #app h1 { font-size:clamp(32px,10vw,44px); line-height:1.05; margin:0 0 22px; overflow-wrap:anywhere; }
  #app h2 { line-height:1.12; }
  #app .panel { max-width:100%; box-sizing:border-box; }

  /* Toolbars/forms become a single readable column. */
  #app .toolbar { display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:14px !important; }
  #app .toolbar > * { width:100%; min-width:0; box-sizing:border-box; }
  #app .toolbar > div { display:flex !important; flex-wrap:wrap !important; gap:10px !important; align-items:stretch !important; }
  #app .toolbar label { flex:1 1 100%; min-width:0; }
  #app input:not([type="checkbox"]):not([type="radio"]),
  #app select, #app textarea { width:100% !important; max-width:100%; min-width:0; box-sizing:border-box; font-size:16px; }
  #app .btn { max-width:100%; white-space:normal; }

  /* Dashboard: keep the useful 2x2 KPI layout, stack the larger panels/actions. */
  #app .fp-stats, #app .fp-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
  #app .fp-dash-grid { grid-template-columns:1fr !important; gap:16px !important; }
  #app .fp-quick { grid-template-columns:1fr !important; }
  #app .fp-dash-panel, #app .fp-main-panel { min-width:0; }

  /* Ordinary application tables become cards. The document artwork itself is not targeted. */
  #app table.mobile-card-table { display:block !important; width:100% !important; min-width:0 !important; border:0 !important; }
  #app table.mobile-card-table thead { display:none !important; }
  #app table.mobile-card-table tbody { display:block !important; width:100%; }
  #app table.mobile-card-table tr {
    display:block !important; width:100%; box-sizing:border-box; margin:0 0 14px; padding:14px 14px 10px;
    border:1px solid #d7e1e7; border-radius:14px; background:#fff; overflow:hidden;
  }
  #app table.mobile-card-table td {
    display:grid !important; grid-template-columns:minmax(105px,34%) minmax(0,1fr); gap:10px;
    width:100% !important; min-width:0 !important; box-sizing:border-box; padding:8px 0 !important;
    border:0 !important; border-bottom:1px solid #edf1f3 !important; white-space:normal !important;
    overflow-wrap:anywhere; word-break:normal; vertical-align:top;
  }
  #app table.mobile-card-table td:last-child { border-bottom:0 !important; }
  #app table.mobile-card-table td::before {
    content:attr(data-label); min-width:0; color:#60798a; font-weight:700; font-size:13px; line-height:1.35;
  }
  #app table.mobile-card-table td[data-label=""]::before { content:none; }
  #app table.mobile-card-table td[data-label=""] { grid-template-columns:1fr; }
  #app table.mobile-card-table td.actions { grid-template-columns:1fr !important; }
  #app table.mobile-card-table td.actions::before { display:none; }
  #app table.mobile-card-table td input[type="checkbox"] { width:28px; height:28px; }

  /* Register/search panel and detail pages must never force desktop width. */
  #app .fp-register-table, #app .fp-table-wrap { overflow:visible !important; min-width:0 !important; }
  #app .fp-register-table > div, #app .fp-table-wrap { overflow:visible !important; }

  /* Auth/login. */
  #login .auth-shell { grid-template-columns:1fr !important; min-height:100dvh; }
  #login .auth-brand { display:none !important; }
  #login .auth-login { padding:24px 16px !important; }
  #login .auth-card { width:100% !important; max-width:440px !important; box-sizing:border-box; }
  #login .auth-mobile-logo { display:block !important; }
}

@media (max-width: 390px) {
  #shell header { grid-template-columns:44px minmax(0,1fr) auto; padding-left:10px; padding-right:10px; gap:7px; }
  .fp-header-brand img { width:min(175px,100%); }
  #app { padding-left:12px !important; padding-right:12px !important; }
  #app .fp-stats, #app .fp-stat-grid { gap:9px !important; }
  #app table.mobile-card-table td { grid-template-columns:minmax(92px,32%) minmax(0,1fr); gap:8px; }
}

/* v0.10.46 — mobile drawer correction only. */
@media (max-width: 640px) {
  #nav {
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:6px !important;
    padding:82px 14px 24px !important;
    background:#082f54 !important;
    color:#fff !important;
  }
  #nav .nav-section,
  #nav .nav-label,
  #nav h2,
  #nav h3 {
    position:static !important;
    display:block !important;
    width:auto !important;
    height:auto !important;
    margin:4px 10px 10px !important;
    padding:0 !important;
    transform:none !important;
    color:#8faabe !important;
    font-size:12px !important;
    line-height:1.2 !important;
    letter-spacing:.16em !important;
    text-transform:uppercase;
  }
  #nav button,
  #nav .navbtn,
  #nav a {
    position:static !important;
    inset:auto !important;
    float:none !important;
    transform:none !important;
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    min-height:46px !important;
    margin:0 !important;
    padding:11px 14px !important;
    box-sizing:border-box !important;
    border-radius:10px !important;
    text-align:left !important;
    white-space:normal !important;
    line-height:1.25 !important;
  }
  #nav button.active,
  #nav .navbtn.active,
  #nav a.active {
    background:#1486e8 !important;
    color:#fff !important;
  }
  body.mobile-nav-open { overflow:hidden !important; }
}
