:root {
  color-scheme: dark;
  --bg: #07110d;
  --surface: #10251d;
  --surface-2: #173429;
  --surface-3: #1f4536;
  --line: #2c5847;
  --text: #f5f7f3;
  --muted: #a8bdb3;
  --green: #35d07f;
  --yellow: #f6c453;
  --red: #ff6b6b;
  --blue: #67b7ff;
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { background: #030806; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 10%, rgba(53, 208, 127, .09), transparent 34%),
    linear-gradient(135deg, #06100c, #0e1d17);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}

button, input, select { font: inherit; }
button { touch-action: manipulation; }

.app-shell {
  width: min(100%, 430px);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--bg);
  position: relative;
  box-shadow: 0 0 80px rgba(0, 0, 0, .55);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 78px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(12, 29, 22, .95);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(14px);
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-logo { display: block; width: 114px; height: auto; flex: 0 0 auto; border-radius: 3px; background: #000; }
.brand small { display: block; max-width: 150px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand .brand-user { font-size: 11px; opacity: .82; }
.topbar-actions { display: flex; flex-direction: column; align-items: stretch; gap: 5px; min-width: 0; }
.account-settings-trigger { min-height: 28px; padding: 4px 8px; justify-content: center; color: var(--yellow); }

.connection {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
}
.status-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--yellow); box-shadow: 0 0 0 4px rgba(246,196,83,.15); }
.connection.offline .status-dot { background: var(--red); box-shadow: 0 0 0 4px rgba(255,107,107,.15); }
.connection.online .status-dot { background: var(--yellow); }

main { padding: 18px 16px 104px; }
.screen { animation: rise .22s ease-out; }
@keyframes rise { from { opacity: .2; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.eyebrow { margin: 0 0 5px; color: var(--yellow); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
h1 { margin: 0 0 8px; font-size: 28px; line-height: 1.08; }
h2 { margin: 0; font-size: 19px; }
p { line-height: 1.45; }
.subtitle { margin: 0 0 18px; color: var(--muted); }

.card {
  background: linear-gradient(145deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tester-banner { border-color:rgba(222,169,0,.6); background:linear-gradient(135deg,#fff7d6,#fff); }
.tester-banner h2 { margin:2px 0 8px; }
.card-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

.hero-card { position: relative; overflow: hidden; padding: 18px; }
.hero-card::after { content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%; right: -55px; top: -70px; background: rgba(246, 196, 83, .09); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(246,196,83,.12);
  color: var(--yellow);
  border: 1px solid rgba(246,196,83,.3);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
.badge.green { color: var(--green); border-color: rgba(53,208,127,.35); background: rgba(53,208,127,.1); }
.badge.red { color: var(--red); border-color: rgba(255,107,107,.35); background: rgba(255,107,107,.1); }

.details { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.detail { padding: 12px; border-radius: 14px; background: rgba(0,0,0,.18); min-width: 0; }
.detail span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 4px; }
.detail strong { display: block; font-size: 15px; overflow-wrap: anywhere; }

.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.metric { padding: 12px 8px; text-align: center; border-radius: 14px; background: rgba(0,0,0,.19); }
.metric span { display: block; color: var(--muted); font-size: 10px; margin-bottom: 4px; }
.metric strong { font-size: 17px; }
.yield-indicator { display: inline-flex; align-items: center; justify-content: center; font-weight: 900; white-space: nowrap; }
.yield-indicator.red, .yield-indicator.green, .yield-indicator.bright { padding: 4px 7px; border-radius: 999px; }
.yield-indicator.red { background: #efcaca; color: #8e2323; }
.yield-indicator.green { background: #caead5; color: #175e37; }
.yield-indicator.bright { background: #1ab45f; color: #fff; box-shadow: 0 4px 12px #1ab45f44; }

.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 18px; }
.segmented button, .choice {
  min-height: 58px;
  border: 2px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  color: var(--text);
  font-weight: 900;
}
.segmented button.active, .choice.active { border-color: var(--yellow); background: rgba(246,196,83,.12); color: var(--yellow); }

.primary, .secondary, .danger, .ghost {
  width: 100%;
  min-height: 56px;
  border-radius: 15px;
  border: 0;
  padding: 12px 16px;
  font-weight: 900;
  cursor: pointer;
}
.primary { background: var(--yellow); color: #112019; box-shadow: 0 8px 20px rgba(246,196,83,.18); }
.primary:disabled { background: #4a554f; color: #9ca9a2; box-shadow: none; }
.secondary { background: var(--surface-3); color: var(--text); border: 1px solid var(--line); }
.danger { background: rgba(255,107,107,.12); color: var(--red); border: 1px solid rgba(255,107,107,.35); }
.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.compact { width: auto; min-height: 42px; padding: 8px 12px; }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.opening-assignment-grid { grid-template-columns: minmax(0, 2fr) minmax(92px, 1fr); margin-top: 14px; }
.opening-assignment-grid .field select { font-size: 16px; padding-left: 10px; padding-right: 8px; }
.field { display: block; margin-bottom: 13px; }
.field.full { grid-column: 1 / -1; }
.field span { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 7px; color: var(--muted); font-size: 12px; font-weight: 800; }
.field input, .field select {
  width: 100%;
  height: 55px;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: #0b1a14;
  color: var(--text);
  padding: 0 13px;
  font-size: 20px;
  font-weight: 900;
  outline: none;
}
.field input:focus, .field select:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(246,196,83,.1); }
.field input::placeholder { color: #5c7166; }
.field-error { color: var(--red); font-size: 12px; margin: -5px 0 12px; }
.sync-error { color: var(--red) !important; font-weight: 700; }

.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 12px 0 18px; }
.quick-size {
  min-height: 74px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: linear-gradient(145deg, var(--surface-3), var(--surface-2));
  color: var(--text);
  text-align: left;
  padding: 12px;
}
.quick-size strong { display: block; font-size: 16px; }
.quick-size span { display: block; margin-top: 4px; color: var(--yellow); font-size: 12px; font-weight: 800; }
.quick-size.selected { outline: 2px solid var(--yellow); }

.preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px;
  margin-bottom: 13px;
  border-radius: 14px;
  background: rgba(103,183,255,.08);
  border: 1px solid rgba(103,183,255,.25);
}
.preview span { color: var(--muted); font-size: 12px; }
.preview strong { color: var(--blue); font-size: 20px; }

.entry-list { display: grid; gap: 9px; }
.entry {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 13px;
  border-radius: 15px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.entry-main strong { display: block; font-size: 16px; }
.entry-main small { display: block; color: var(--muted); margin-top: 4px; }
.entry-actions { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; }
.icon-button { border: 0; background: transparent; color: var(--red); font-size: 20px; padding: 4px 7px; border-radius: 10px; }

.empty { padding: 24px 14px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 15px; }
.empty strong { color: var(--text); display: block; margin-bottom: 5px; }

.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-radius: 13px; background: rgba(0,0,0,.16); }
.check-list .ok { color: var(--green); }
.check-list .warn { color: var(--yellow); }
.check-list .bad { color: var(--red); }
.check-list .check-error { align-items: center; border: 1px solid rgba(255, 92, 92, .32); }
.check-list .check-error > span:nth-child(2) { flex: 1; }
.fix-button { border: 0; border-radius: 10px; padding: 8px 10px; background: var(--red); color: white; font: inherit; font-size: 12px; font-weight: 800; white-space: nowrap; }

.login { padding-top: 24px; }
.pin-hint { color: var(--yellow); font-size: 13px; text-align: center; }
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 14px 0; }
.account { min-height: 64px; border: 2px solid var(--line); border-radius: 15px; background: var(--surface); color: var(--text); font-weight: 900; }
.account.active { border-color: var(--yellow); color: var(--yellow); background: rgba(246,196,83,.1); }

.locked-note { padding: 14px; border: 1px solid rgba(53,208,127,.3); background: rgba(53,208,127,.08); color: var(--green); border-radius: 14px; margin-bottom: 14px; }
.muted { color: var(--muted); }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 10px; }
.section-title small { color: var(--muted); }

.payroll-summary { margin-bottom:18px; }
.payroll-metrics { display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px; }
.payroll-metric { min-height:94px;padding:13px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(145deg,var(--surface-2),var(--surface)); }
.payroll-metric span { display:block;color:var(--muted);font-size:11px;font-weight:800; }
.payroll-metric strong { display:block;margin-top:8px;font-size:19px;line-height:1.15; }
.payroll-metric.accrued { border-color:#8c7135; }
.payroll-metric.paid { border-color:#317c58; }
.payroll-metric.paid strong { color:#8df0bb; }
.payroll-metric.balance { grid-column:1/-1;border-color:#94732d; }
.payroll-metric.balance strong { color:var(--yellow);font-size:23px; }
.payroll-details-card { padding:13px; }
.payroll-entry-list { display:grid;gap:8px; }
.payroll-entry { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px;border:1px solid var(--line);border-radius:13px;background:#0b1a14; }
.payroll-entry > div { min-width:0; }
.payroll-entry > div > strong,.payroll-entry > div > small,.payroll-entry > div > span { display:block; }
.payroll-entry > div > small { margin-top:3px;color:var(--yellow);font-size:10px;font-weight:800; }
.payroll-entry > div > span { margin-top:4px;color:var(--muted);font-size:11px;overflow-wrap:anywhere; }
.payroll-entry > strong { color:#8df0bb;font-size:14px;white-space:nowrap; }
.payroll-entry.negative > strong { color:#ffb0b0; }

.confirm-overlay { position:fixed;inset:0;z-index:100;display:grid;align-items:end;padding:18px;background:#0000;opacity:0;transition:.18s ease; }
.confirm-overlay.visible { background:#020604c9;opacity:1; }
.confirm-card { width:min(100%,398px);margin:0 auto calc(5px + env(safe-area-inset-bottom));padding:20px;border:1px solid #46705e;border-radius:22px;background:linear-gradient(160deg,#173429,#0d2018);box-shadow:0 24px 70px #000b;transform:translateY(18px);transition:.18s ease; }
.confirm-overlay.visible .confirm-card { transform:translateY(0); }
.sync-problems-overlay .confirm-card { max-height:85dvh;overflow:auto; }
.sync-problems-list { display:grid;gap:8px;margin:12px 0; }
.sync-problems-list .detail { display:block; }
.sync-problems-list p { margin:4px 0; }
.confirm-icon { display:grid;place-items:center;width:42px;height:42px;margin-bottom:13px;border-radius:50%;background:#244b3b;color:#8df0bb;font-size:20px;font-weight:1000; }
.confirm-icon.danger { background:#4a2424;color:#ffb6b6; }
.confirm-card h2 { margin-bottom:7px;font-size:21px; }
.confirm-card > p { margin:0 0 14px;color:var(--muted);font-size:13px; }
.confirm-details { display:grid;gap:1px;margin-bottom:16px;overflow:hidden;border:1px solid var(--line);border-radius:13px;background:#ffffff0d; }
.confirm-detail { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:12px;padding:9px 11px;border-bottom:1px solid #ffffff10; }
.confirm-detail:last-child { border:0; }
.confirm-detail span { color:var(--muted);font-size:12px; }
.confirm-detail strong { font-size:13px;text-align:right;overflow-wrap:anywhere; }
.confirm-actions { display:grid;grid-template-columns:1fr 1.25fr;gap:9px; }
.confirm-actions button { min-height:46px; }

.bottom-nav {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 0;
  width: min(100%, 430px);
  transform: translateX(-50%);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: rgba(11, 26, 20, .97);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.bottom-nav button { min-height: 58px; border: 0; border-radius: 13px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 800; }
.bottom-nav button span { display: block; font-size: 20px; line-height: 1.1; margin-bottom: 4px; }
.bottom-nav button.active { color: var(--yellow); background: rgba(246,196,83,.1); }
.hidden { display: none !important; }

.toast {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: 92px;
  width: min(calc(100% - 32px), 398px);
  transform: translate(-50%, 18px);
  padding: 13px 16px;
  border-radius: 14px;
  background: #f4f6f2;
  color: #10251d;
  font-weight: 850;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: .2s ease;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 700px) {
  body { padding: 28px 0; }
  .app-shell { min-height: calc(100vh - 56px); border: 1px solid #234a3a; border-radius: 30px; overflow: hidden; }
  .bottom-nav { bottom: 28px; border-radius: 0 0 29px 29px; }
  .topbar { padding-top: 12px; }
}

@media (max-width: 360px) {
  .details, .field-grid, .quick-grid { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .connection { max-width: 115px; }
}

/* Единая визуальная система Пять48 — как в кабинете руководителя. */
:root { color-scheme:light;--bg:#edf0ec;--surface:#fff;--surface-2:#fff;--surface-3:#e7eee9;--line:#d8ded9;--text:#17211d;--muted:#66736d;--green:#245b43;--yellow:#f4bf4f;--red:#a43b3b;--blue:#245b43; }
html,body { background:#edf0ec;color:var(--text); }
.app-shell { background:#edf0ec;box-shadow:none; }
.topbar { background:linear-gradient(180deg,#10251d 0%,#0b1d16 100%);border-color:#173c2d; }
.brand small { color:#c3d2ca; }
.connection { border-color:#37614f;background:#173c2d;color:#fff; }
.account-settings-trigger { color:var(--yellow); }
.card,.payroll-metric { border-color:var(--line);background:#fff;box-shadow:none; }
.detail,.metric,.quick-size,.preview,.entry,.payroll-entry { border-color:var(--line);background:#f6f8f6;color:var(--text); }
.field input,.field select { border-color:var(--line);background:#fff;color:var(--text); }
.field input:focus,.field select:focus { border-color:#245b43;box-shadow:0 0 0 3px #245b4320; }
.primary { background:var(--yellow);color:#17211d;box-shadow:none; }
.secondary { border-color:#173c2d;background:#173c2d;color:#fff; }
.ghost { border-color:var(--line);background:#fff;color:var(--muted); }
.danger { border-color:#d9a5a5;background:#f8e6e6;color:#8d2929; }
.payroll-metric.balance strong,.payroll-entry>div>small { color:#8a640b; }
.payroll-entry>strong { color:#196039; }
.payroll-entry.negative>strong { color:#a43b3b; }
.bottom-nav { background:#10251df7;border-color:#244b3b; }
.bottom-nav button.active { background:#f4bf4f1f;color:var(--yellow); }
.confirm-overlay.visible { background:#09181299; }
.confirm-card { border-color:var(--line);background:#fff;color:var(--text);box-shadow:0 24px 70px #07140e80; }
.confirm-details { border-color:var(--line);background:#f6f8f6; }
.confirm-detail { border-color:var(--line); }
.confirm-icon { background:#e4f0e9;color:#245b43; }
.confirm-icon.danger { background:#f8e6e6;color:#a43b3b; }
body.login-mode { padding:0; }
body.login-mode .app-shell { width:100%;max-width:none;min-height:100vh;border:0;border-radius:0; }
body.login-mode .topbar,body.login-mode .bottom-nav { display:none!important; }
body.login-mode main { padding:0; }
.login-page { min-height:100vh;display:grid;place-items:center;padding:max(24px,env(safe-area-inset-top)) 18px 24px;background:radial-gradient(circle at top left,#2a6249,#10251d 55%); }
.login-card { width:min(440px,100%);padding:30px;border-radius:24px;background:#fff;color:#17211d;box-shadow:0 24px 70px #07140e80; }
.login-brand-logo { display:block;width:min(100%,310px);height:auto;margin-bottom:18px;border-radius:6px;background:#000; }
.login-card h1 { margin:22px 0 8px;font-size:30px; }
.login-description,.login-security-note { color:var(--muted);line-height:1.45; }
.login-security-note { margin:14px 0 0;font-size:12px;text-align:center; }
.login-card .field { margin-bottom:14px; }
.login-card .primary,.login-card .secondary { width:100%;min-height:44px;border-radius:10px; }
.login-card .secondary { margin-top:10px; }
@media(max-width:480px){.login-card{padding:24px}.login-card h1{font-size:27px}}

/* Мобильный рабочий цикл: смена → размер → следующая строка. */
main:has(.compact-screen) { padding:12px 12px calc(78px + env(safe-area-inset-bottom)); }
main:has(.opening-screen) { padding-bottom:8px; }
.compact-screen h1 { font-size:24px; margin:0 0 8px; }
.compact-screen h2 { font-size:16px; line-height:1.25; }
.compact-screen .card { padding:12px; margin-bottom:10px; border-radius:16px; }
.compact-screen .card-head { margin-bottom:10px; align-items:center; }
.compact-screen .card-head h1 { margin-bottom:0; }
.compact-screen .details { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.compact-screen .detail { padding:8px; border-radius:10px; }
.compact-screen .detail span { margin-bottom:3px; }
.compact-screen .detail strong { font-size:13px; line-height:1.3; }
.compact-screen .field-grid { gap:8px; }
.compact-screen .opening-assignment-grid { grid-template-columns:minmax(0,2fr) minmax(90px,1fr); margin-top:10px; }
.compact-screen .field { margin:0; min-width:0; }
.compact-screen .field span { margin-bottom:4px; line-height:1.2; font-size:12px; }
.compact-screen .field input,.compact-screen .field select { height:44px; padding:0 9px; font-size:16px; border-radius:10px; }
.compact-screen .primary,.compact-screen .ghost,.compact-screen .segmented button { min-height:44px; padding:10px; border-radius:10px; }
.compact-screen .segmented { gap:8px; margin:8px 0 10px; }
.compact-screen .segmented button.active { color:#614600; }
.compact-screen .species-card { display:grid; grid-template-columns:60px minmax(0,1fr); gap:8px; align-items:center; }
.compact-screen .species-card .segmented { margin:0; }
.compact-screen .species-card .primary { grid-column:1 / -1; }
.compact-screen .metrics { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:10px 0 0; }
.compact-screen .metric { padding:8px 4px; border-radius:10px; }
.compact-screen .metric strong { font-size:16px; }
.compact-screen .quick-entry-card .segmented { margin-bottom:0; }
.compact-screen .sync-summary { margin-top:8px; font-size:12px; color:var(--muted); }
.compact-screen .tester-note { margin:0 0 8px; color:#71520c; font-size:11px; line-height:1.3; }
#testerMaster { width:100%; min-height:30px; margin:0; padding:0; border:0; background:transparent; color:var(--text); font-size:16px; font-weight:800; }
.production-screen .subtitle { margin:0 0 10px; font-size:12px; line-height:1.4; }
.roundwood-screen .field-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.boards-screen .field-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
.boards-screen .field { grid-column:span 2; }
.boards-screen .field:nth-child(n+4) { grid-column:span 3; }
.compact-screen .quick-heading { white-space:nowrap; }
.quick-heading span { color:var(--muted); font-weight:500; }
.compact-screen .quick-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:8px 0 10px; }
.compact-screen .quick-size { min-height:44px; padding:8px 3px; border-radius:10px; text-align:center; }
.compact-screen .quick-size strong { font-size:16px; white-space:nowrap; }
.compact-screen .quick-size.selected { background:#fff4d7; outline-color:#c49a38; }
.compact-screen .preview { min-height:36px; margin:10px 0 8px; padding:7px 10px; border-radius:10px; }
.compact-screen .preview strong { font-size:17px; }
.entry-submit-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:stretch; margin-top:10px; }
.compact-screen .entry-submit-row .preview { display:block; margin:0; padding:5px 10px; }
.entry-submit-row .preview span,.entry-submit-row .preview strong { display:block; line-height:1.25; }
.entry-submit-row .preview span { font-size:10px; }
.compact-screen .field-error { margin:8px 0; }
.entry-history { border:1px solid var(--line); border-radius:12px; background:#fff; }
.entry-history summary { min-height:44px; padding:12px 10px; font-size:13px; font-weight:800; cursor:pointer; }
.entry-history summary span { float:right; color:var(--muted); font-size:12px; font-weight:500; }
.entry-history .entry-list { padding:0 8px 8px; }
.entry-history .entry { padding:10px; }
@media(max-width:699px) {
  body:not(.login-mode) .topbar { min-height:68px; padding:calc(6px + env(safe-area-inset-top)) 12px 6px; gap:8px; }
  body:not(.login-mode) .brand { flex:1; gap:8px; }
  body:not(.login-mode) .brand-logo { width:68px; }
  body:not(.login-mode) .brand > div { min-width:0; }
  body:not(.login-mode) .brand small { max-width:132px; font-size:11px; }
  body:not(.login-mode) .topbar-actions { gap:4px; max-width:112px; }
  body:not(.login-mode) .connection { min-height:28px; padding:5px 8px; font-size:11px; border-radius:8px; }
  #connectionText { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bottom-nav { padding-top:6px; padding-bottom:calc(6px + env(safe-area-inset-bottom)); }
  .bottom-nav button { min-height:50px; }
}

/* Same collaboration row as the warehouse, below the production tabs. */
.production-bottom-bars{position:fixed;bottom:0;left:50%;width:min(100%,430px);transform:translateX(-50%);z-index:30;background:#10251df7;padding-bottom:env(safe-area-inset-bottom)}
.production-bottom-bars .bottom-nav{position:static;width:100%;transform:none;border-radius:0;padding-bottom:4px}
.warehouse-team-bottom{border-top:1px solid #244b3b;padding:3px 12px}
.warehouse-team-bottom:empty{display:none}
.warehouse-team-bottom .team-tabs{display:flex;width:100%;border:0;border-radius:0;padding:0;background:transparent;gap:8px}
.warehouse-team-bottom .team-tabs button{flex:1;min-width:0;min-height:44px;padding:7px 10px}
body.login-mode .production-bottom-bars,.production-bottom-bars:not(:has(.team-tabs)):has(.bottom-nav.hidden){display:none}
body:not(.login-mode):has(.production-bottom-bars .team-tabs) main{padding-bottom:calc(132px + env(safe-area-inset-bottom))}
body:not(.login-mode):has(.production-bottom-bars .bottom-nav.hidden):has(.team-tabs) main{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
body:has(.production-bottom-bars .team-tabs) .toast{bottom:calc(138px + env(safe-area-inset-bottom))}
@media(max-height:700px){
 body:not(.login-mode):has(.production-bottom-bars .team-tabs) main{padding-top:6px;padding-bottom:calc(118px + env(safe-area-inset-bottom))}
 /* One collaboration row is 51px; reserve it plus a 1px gap on short screens. */
 body:not(.login-mode):has(.production-bottom-bars .bottom-nav.hidden):has(.team-tabs) main{padding-bottom:calc(52px + env(safe-area-inset-bottom))}
 .compact-screen .card{padding:8px;margin-bottom:6px}
 .compact-screen .card-head{margin-bottom:6px}
 .compact-screen .detail{padding:5px}
 .compact-screen .details{gap:4px}
 .compact-screen .metrics{margin-top:6px}
 .compact-screen .metric{padding:6px 4px}
 .compact-screen .quick-grid{margin:5px 0 6px;gap:4px}
 .production-screen .subtitle{margin-bottom:5px}
 .compact-screen .field-grid{gap:6px}
 .compact-screen .field span{margin-bottom:3px}
 .compact-screen .sync-summary{margin-top:5px}
}

.connection.online .status-dot{background:#4ade80;box-shadow:0 0 0 4px #4ade8026}
.connection.offline .status-dot{background:#ff6b6b;box-shadow:0 0 0 4px #ff6b6b26}