/* ===== Seibrue v6 — phone-first inner-page layer (additive; load AFTER seibrue.css) =====
   Scope: larger touch targets + readable secondary text + clearer hierarchy. No logic, no colours of its own:
   everything uses the existing theme variables (--primary/--tint/--border…) so Settings themes still work.
   Pages opt in with <body class="v6"> (stock.html also keeps .stock-v2). Backup: _backup_2026-10-14_pre-redesign */
@media screen{/* header: roomier bar, 44px back button, 40px language buttons */
.v6 .navbar{padding:12px 14px;border-radius:0 0 20px 20px;min-height:64px}
.v6 .navbar-title{font-size:18px;font-weight:700}
.v6 .nav-a{min-width:44px;min-height:44px}
.v6 .lang-btn{min-width:40px;min-height:40px;font-size:17px;border-radius:12px}

/* cards + titles */
.v6 .card{border-radius:20px;padding:14px 14px 16px}
.v6 .card-title{font-size:16px;font-weight:700;letter-spacing:0;color:var(--text);margin-bottom:12px}

/* form fields: 48px tall, 16px text (also stops iOS zoom-on-focus) */
.v6 .fi,.v6 .field input,.v6 .field select,.v6 .field textarea{min-height:48px;font-size:16px;border-radius:14px}
.v6 .fb{min-height:48px;border-radius:14px;font-size:15px;padding:0 18px}

/* primary action buttons (รับเข้า / จ่ายออก etc.) */
.v6 .btn{min-height:54px;border-radius:16px;font-size:17px;font-weight:700}

/* document type grid: all 8 types, equal weight; icon beside the Thai name, readable EN sub-label */
.v6 .new-grid{gap:10px}
.v6 .nb{display:grid;grid-template-columns:44px 1fr;grid-template-areas:"i n" "i s";column-gap:12px;align-items:center;text-align:left;min-height:76px;padding:12px 14px;border-radius:18px;border:1px solid var(--border)}
.v6 .ni{grid-area:i;margin:0;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--tint)}
.v6 .ni span{margin:0!important;vertical-align:0!important;display:grid!important;place-items:center}
.v6 .ni svg{width:22px;height:22px}
.v6 .nn{grid-area:n;align-self:end;font-size:15px;line-height:1.25}
.v6 .ns{grid-area:s;align-self:start;font-size:13px;color:var(--text-sub)}

/* document list cards */
.v6 .dc{border-radius:18px;padding:14px}
.v6 .dn{font-size:13px}
.v6 .dt{font-size:12.5px;padding:3px 12px}
.v6 .dc-cust{font-size:16px}
.v6 .dc-det{font-size:14px;color:var(--text-sub)}
.v6 .dc-amt{font-size:17px;font-weight:700}
.v6 .dc-btns{gap:8px;margin-top:10px}
.v6 .db{min-height:44px;font-size:14px;border-radius:12px}

/* stock tabs + product rows */
.v6 .tab-row{display:flex;width:100%;padding:4px;border-radius:16px;margin-bottom:14px}
.v6 .tab{flex:1;height:44px;min-height:44px;border-radius:12px;font-size:15px}
.v6 .tab svg{width:16px;height:16px}
.v6 .user-badge{font-size:13px}
.v6 .product-name,.v6 .mat-name{font-size:16px;font-weight:600}
.v6 .product-sku,.v6 .mat-code{font-size:13.5px}
.v6 .product-qty,.v6 .mat-qty{font-size:18px;font-weight:700}

/* no mascot pattern behind content on v6 pages (decision 2026-10-14: user dislikes it). Settings toggle still exists but is ignored here. */
.v6.mascot-bg::before{display:none!important}
}
@media screen and (prefers-reduced-motion:reduce){.v6 .btn{transition:none}}

/* --- accessibility pass (2026-10-15) --- */
@media screen{
  /* stock.html has its own compact ".stock-v2 …" rules later in the page; win by specificity */
  body.stock-v2.v6 .lang-btn{min-width:40px;min-height:40px;padding:2px 8px;font-size:17px;line-height:1.4;border-radius:12px}
  body.stock-v2.v6 .tab-row{display:flex;width:100%;padding:4px;border-radius:16px;margin-bottom:14px}
  body.stock-v2.v6 .tab{flex:1;height:44px;min-height:44px;font-size:15px;border-radius:12px}
  body.stock-v2.v6 .tab svg{width:16px;height:16px}
  body.stock-v2.v6 .card{border-radius:20px;padding:14px 14px 16px}
  body.stock-v2.v6 .card-title{font-size:16px;letter-spacing:0}
  body.stock-v2.v6 .field label{font-size:13px;margin-bottom:5px}
  body.stock-v2.v6 .user-badge{font-size:13px}
  /* no text under 12.5px on app pages (inline styles from JS templates included) */
  .v6 [style*="font-size:10px"],.v6 [style*="font-size:10.5px"],.v6 [style*="font-size:11px"],.v6 [style*="font-size:11.5px"]{font-size:12.5px!important}
  /* doc list action buttons: readable contrast on their pale backgrounds */
  .v6 .db.v{color:color-mix(in srgb,var(--primary) 70%,#000)}
  .v6 .db.e{color:#9a3a00}
  .v6 .db.d{color:#a62a1c}
}

/* phone legibility floor: seibrue.css forces 12px !important on these in its mobile block; v6 pages use 13px */
@media screen{
  .v6 .ns,.v6 .dc-det,.v6 .dn,.v6 .stat-label,.v6 .badge{font-size:13px!important}
  .v6 .cust-card .cm{font-size:13px}
}