/* ResPOS Patron : web app mobile des proprietaires (marque ResPOS). */
:root {
  --bg: #f3f4f6; --surface: #fff; --ink: #16181d; --muted: #6b7280; --line: #e5e7eb;
  --brand: #f26b1d; --brand-2: #ee5400; --good: #16a34a; --warn: #d97706; --bad: #dc2626;
  --radius: 18px; --shadow: 0 1px 2px rgb(0 0 0 / 5%), 0 6px 20px rgb(0 0 0 / 5%);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
button, input, select { font: inherit; }

.pt-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: var(--ink); color: #fff; }
.pt-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 19px; }
.pt-brand img { border-radius: 9px; }
.pt-site { margin-left: auto; max-width: 60%; }
.pt-site select { width: 100%; background: #2a2d35; color: #fff; border: 0; border-radius: 10px; padding: 8px 10px; }
.pt-site-name { margin-left: auto; font-weight: 600; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }

.pt-fresh { padding: 7px 16px; font-size: 13px; font-weight: 600; text-align: center; }
.pt-fresh-ok { background: #e7f6ec; color: #166534; }
.pt-fresh-warn { background: #fff4e0; color: #9a5b00; }
.pt-fresh-bad { background: #fde8e8; color: #9b1c1c; }

.pt-main { max-width: 760px; margin: 0 auto; padding: 14px 14px 8px; display: grid; gap: 14px; }

.pt-hero { background: linear-gradient(135deg, #ff8a3d, var(--brand-2)); color: #fff; border-radius: var(--radius); padding: 18px 20px; box-shadow: 0 8px 24px rgb(238 84 0 / 25%); }
.pt-hero span { font-size: 14px; opacity: .9; }
.pt-hero strong { display: block; font-size: clamp(30px, 9vw, 42px); line-height: 1.15; margin: 4px 0; letter-spacing: -.5px; }
.pt-hero small { font-size: 14px; opacity: .95; }
.pt-hero .pt-up, .pt-hero .pt-down { color: #fff; background: rgb(0 0 0 / 18%); border-radius: 8px; padding: 1px 7px; }

.pt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 620px) { .pt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pt-card { background: var(--surface); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow); min-width: 0; }
.pt-card span { display: block; font-size: 13px; color: var(--muted); }
.pt-card strong { display: block; font-size: 21px; margin-top: 2px; overflow-wrap: anywhere; }
.pt-card small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.pt-good strong { color: var(--good); }
.pt-muted strong { color: var(--muted); }
.pt-warn strong { color: var(--warn); }

.pt-panel { background: var(--surface); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.pt-panel h2 { margin: 0 0 12px; font-size: 16px; }
.pt-note { color: var(--muted); margin: 4px 0; }
.pt-more { display: inline-block; margin-top: 8px; color: var(--brand-2); font-weight: 600; text-decoration: none; }

.pt-bars { display: flex; align-items: flex-end; gap: 4px; height: 150px; }
.pt-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
.pt-bar i { display: block; width: 100%; max-width: 30px; min-height: 2px; background: linear-gradient(#ff8a3d, var(--brand-2)); border-radius: 6px 6px 2px 2px; }
.pt-bar span { font-size: 10.5px; color: var(--muted); margin-top: 4px; height: 14px; white-space: nowrap; }
.pt-bars-dense { gap: 2px; }

.pt-list { list-style: none; margin: 0; padding: 0; }
.pt-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.pt-list li:first-child { border-top: 0; }
.pt-list span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pt-list em { font-style: normal; color: var(--muted); font-size: 14px; }
.pt-list b { white-space: nowrap; }
.pt-list small { display: block; color: var(--muted); font-size: 13px; }
.pt-stock .pt-out b, .pt-stock .pt-out em { color: var(--bad); font-weight: 700; }
.pt-z li { flex-wrap: wrap; }
.pt-z em { flex-basis: 100%; }
.pt-up { color: var(--good); }
.pt-down { color: var(--bad); }

.pt-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pt-rank div:first-child { display: flex; gap: 10px; }
.pt-rank div:first-child span { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.pt-rank small { color: var(--muted); font-size: 13px; }
.pt-meter { height: 8px; background: #f1f2f4; border-radius: 6px; margin: 5px 0 3px; overflow: hidden; }
.pt-meter i { display: block; height: 100%; background: linear-gradient(90deg, #ff8a3d, var(--brand-2)); border-radius: 6px; }

.pt-seg { display: flex; gap: 4px; background: #e6e7ea; border-radius: 12px; padding: 4px; }
.pt-seg a { flex: 1; text-align: center; padding: 9px 4px; border-radius: 9px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; }
.pt-seg a.on { background: var(--ink); color: #fff; }

.pt-empty { background: var(--surface); border-radius: var(--radius); padding: 28px 20px; text-align: center; box-shadow: var(--shadow); display: grid; gap: 10px; justify-items: center; }
.pt-empty strong { font-size: 19px; }
.pt-empty span { color: var(--muted); }

.pt-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.pt-tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 9px; color: var(--muted); text-decoration: none; font-size: 11.5px; font-weight: 600; }
.pt-tabs svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pt-tabs a.on { color: var(--brand-2); }

.pt-foot { max-width: 760px; margin: 6px auto 0; padding: 0 16px 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--muted); font-size: 12.5px; }
.pt-foot button { background: none; border: 0; color: var(--muted); text-decoration: underline; padding: 6px 0; cursor: pointer; font-size: 12.5px; }

.pt-btn { display: inline-flex; justify-content: center; align-items: center; min-height: 52px; padding: 0 22px; border: 0; border-radius: 14px; background: var(--brand-2); color: #fff; font-weight: 700; font-size: 17px; text-decoration: none; cursor: pointer; }

/* Connexion / invitation */
body.pt-auth { padding: 0; min-height: 100vh; background: radial-gradient(circle at 50% -10%, #3a2414 0, var(--ink) 55%); color: #fff; }
.pt-auth-box { max-width: 380px; margin: 0 auto; padding: calc(48px + env(safe-area-inset-top)) 22px 28px; display: grid; gap: 14px; text-align: center; justify-items: center; }
.pt-auth-box img { border-radius: 20px; box-shadow: 0 10px 30px rgb(238 84 0 / 35%); }
.pt-auth-box h1 { margin: 6px 0 0; font-size: 30px; }
.pt-auth-box h1 span { color: #ff8a3d; }
.pt-auth-box p { margin: 0; color: #c9ccd3; }
.pt-auth-box form { width: 100%; display: grid; gap: 12px; text-align: left; margin-top: 6px; }
.pt-auth-box label { display: grid; gap: 6px; font-size: 14px; color: #c9ccd3; }
.pt-auth-box input { height: 52px; border-radius: 12px; border: 1px solid #3a3e48; background: #20232a; color: #fff; padding: 0 14px; font-size: 18px; }
.pt-auth-box input:focus { outline: 2px solid #ff8a3d; border-color: transparent; }
.pt-auth-box .pt-btn { width: 100%; margin-top: 4px; }
.pt-error { width: 100%; background: #4a1c1c; color: #ffd2d2; border-radius: 12px; padding: 10px 12px; }
.pt-hint { font-size: 13.5px; }
.pt-by { margin-top: 18px; font-size: 12.5px; color: #8b909b; }