/* FreshPort — портал закупки овощей и фруктов. Десктоп и телефон, одна разметка. */
:root {
  --green:#1f7a45; --green-d:#176036; --green-l:#e8f5ed; --green-b:#2fa15f;
  --ink:#16202a; --ink-2:#41505e; --ink-3:#7a8794;
  --bg:#f4f7f9; --card:#ffffff; --line:#e2e8ed; --line-2:#eef2f5;
  --amber:#b8730d; --amber-bg:#fdf4e3; --red:#c0392b; --red-bg:#fdedeb;
  --blue:#1f6f9e; --blue-bg:#e9f3fa;
  --r:12px; --r-s:8px; --shadow:0 1px 3px rgba(20,40,60,.07), 0 6px 18px rgba(20,40,60,.05);
  --nav-h:60px; --header-h:56px;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; padding:0; }
body { font-family:var(--font); background:var(--bg); color:var(--ink); font-size:15px; line-height:1.45;
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none; }
h1,h2,h3,h4 { margin:0; font-weight:700; line-height:1.25; }
h1 { font-size:22px; } h2 { font-size:18px; } h3 { font-size:16px; }
a { color:var(--green); text-decoration:none; }
button,input,select,textarea { font-family:inherit; font-size:15px; }
[hidden] { display:none !important; }

/* ─────────── каркас ─────────── */
.app { min-height:100dvh; display:flex; flex-direction:column; }
.header { position:sticky; top:0; z-index:60; height:var(--header-h); background:var(--card);
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; padding:0 14px; }
.logo { display:flex; align-items:center; gap:9px; font-weight:800; font-size:17px; color:var(--ink);
  letter-spacing:-.2px; text-decoration:none; cursor:pointer; }
.logo:hover .logo-mark { transform:scale(1.06); }
.logo-mark { transition:transform .12s; }
.logo-mark { width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--green-b),var(--green-d));
  display:grid; place-items:center; color:#fff; font-size:16px; flex:none; }
.header-spacer { flex:1; }
.lang-switch { display:flex; background:var(--bg); border-radius:8px; padding:2px; gap:2px; }
.lang-switch button { border:0; background:transparent; padding:5px 10px; border-radius:6px; font-size:13px;
  font-weight:600; color:var(--ink-3); cursor:pointer; }
.lang-switch button.on { background:var(--card); color:var(--green); box-shadow:0 1px 2px rgba(0,0,0,.08); }
.user-chip { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); }
.user-chip .av { width:30px; height:30px; border-radius:50%; background:var(--green-l); color:var(--green-d);
  display:grid; place-items:center; font-weight:700; font-size:13px; }

.body { flex:1; display:flex; min-height:0; }
.sidebar { width:216px; flex:none; background:var(--card); border-right:1px solid var(--line); padding:12px 10px;
  position:sticky; top:var(--header-h); height:calc(100dvh - var(--header-h)); overflow-y:auto; }
.sidebar a { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--r-s);
  color:var(--ink-2); font-size:14.5px; font-weight:500; margin-bottom:2px; }
.sidebar a:hover { background:var(--bg); }
.sidebar a.on { background:var(--green-l); color:var(--green-d); font-weight:600; }
.sidebar .ico { width:20px; text-align:center; font-size:16px; flex:none; }
.main { flex:1; min-width:0; padding:18px 20px 30px; }
.page-head { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.page-head h1 { flex:1; min-width:180px; }

/* нижняя навигация — телефон */
.tabbar { display:none; position:fixed; bottom:0; left:0; right:0; z-index:70; background:var(--card);
  border-top:1px solid var(--line); height:var(--nav-h); padding-bottom:env(safe-area-inset-bottom); }
.tabbar-inner { display:flex; height:var(--nav-h); }
.tabbar a { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:var(--ink-3); font-size:10.5px; font-weight:600; }
.tabbar a.on { color:var(--green); }
.tabbar .ico { font-size:19px; line-height:1; }
.more-sheet { position:fixed; inset:0; z-index:80; background:rgba(16,28,38,.42); display:none; }
.more-sheet.open { display:block; }
.more-panel { position:absolute; left:0; right:0; bottom:0; background:var(--card); border-radius:16px 16px 0 0;
  padding:10px 10px calc(14px + env(safe-area-inset-bottom)); }
.more-panel a { display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:10px; color:var(--ink); font-size:15.5px; }
.more-panel a.on { background:var(--green-l); color:var(--green-d); font-weight:600; }

/* ─────────── карточки, сетки ─────────── */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); }
.card-pad { padding:16px 18px; }
.card + .card { margin-top:14px; }
.card-head { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line-2); }
.card-head h2,.card-head h3 { flex:1; min-width:0; }
.grid { display:grid; gap:14px; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
.grid-auto { grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.row-tight { display:flex; gap:6px; align-items:center; }
.spacer { flex:1; }

.stat { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:15px 16px; box-shadow:var(--shadow); }
.stat .v { font-size:27px; font-weight:800; letter-spacing:-.6px; color:var(--ink); line-height:1.1; }
.stat .l { font-size:12.5px; color:var(--ink-3); margin-top:3px; }
.stat.accent .v { color:var(--green); }

/* ─────────── формы ─────────── */
.field { margin-bottom:12px; }
.field > label { display:block; font-size:12.5px; font-weight:600; color:var(--ink-3); margin-bottom:5px; }
input[type=text],input[type=number],input[type=password],input[type=email],input[type=date],input[type=tel],select,textarea {
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:var(--r-s); background:var(--card);
  color:var(--ink); outline:none; transition:border-color .12s, box-shadow .12s; }
input:focus,select:focus,textarea:focus { border-color:var(--green-b); box-shadow:0 0 0 3px rgba(47,161,95,.14); }
textarea { resize:vertical; min-height:90px; line-height:1.5; }
textarea.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; }
select { appearance:none; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237a8794' d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:28px; }
.check { display:flex; align-items:center; gap:9px; cursor:pointer; font-size:14.5px; user-select:none; }
.check input { width:18px; height:18px; accent-color:var(--green); flex:none; }
.hint { font-size:12.5px; color:var(--ink-3); margin-top:4px; line-height:1.4; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 15px; border-radius:var(--r-s);
  border:1px solid var(--line); background:var(--card); color:var(--ink); font-weight:600; font-size:14.5px;
  cursor:pointer; transition:background .12s, border-color .12s, transform .06s; white-space:nowrap; }
.btn:hover { background:var(--bg); }
.btn:active { transform:scale(.985); }
.btn-primary { background:var(--green); border-color:var(--green); color:#fff; }
.btn-primary:hover { background:var(--green-d); border-color:var(--green-d); }
.btn-ghost { border-color:transparent; background:transparent; color:var(--ink-2); }
.btn-ghost:hover { background:var(--bg); }
.btn-danger { color:var(--red); border-color:#f0cfca; background:var(--red-bg); }
.btn-sm { padding:6px 11px; font-size:13px; }
.btn-lg { padding:12px 20px; font-size:16px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-block { width:100%; }

/* ─────────── таблицы ─────────── */
.tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.tbl { width:100%; border-collapse:collapse; font-size:14px; }
table.tbl th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-3);
  font-weight:700; padding:9px 10px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--card); }
table.tbl td { padding:9px 10px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
table.tbl tr:last-child td { border-bottom:0; }
table.tbl tbody tr:hover { background:#fafcfd; }
/* числовые колонки: заголовок и значение прижаты к одному краю */
table.tbl th.num, table.tbl td.num, .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* первая колонка — основная, ей отдаём свободное место; остальные по содержимому */
table.tbl th:first-child, table.tbl td:first-child { width:38%; }
table.tbl.tbl-narrow th:first-child, table.tbl.tbl-narrow td:first-child { width:auto; }
.tbl input,.tbl select { padding:5px 7px; font-size:13.5px; border-radius:6px; }

/* Мобильный вид таблиц: строка превращается в карточку, подписи берутся из data-label */
@media (max-width:760px) {
  table.tbl.cards thead { display:none; }
  table.tbl.cards, table.tbl.cards tbody, table.tbl.cards tr, table.tbl.cards td { display:block; width:auto; }
  table.tbl.cards tr { border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:9px; background:var(--card); }
  table.tbl.cards tr:hover { background:var(--card); }
  table.tbl.cards td { border:0; padding:3px 0; display:flex; align-items:baseline; gap:12px; text-align:left !important; }
  table.tbl.cards td:first-child { width:auto; padding-bottom:7px; display:block; }
  table.tbl.cards td[data-label]:not(:first-child)::before {
    content:attr(data-label); flex:0 0 42%; color:var(--ink-3); font-size:11.5px;
    text-transform:uppercase; letter-spacing:.4px; font-weight:600; }
  table.tbl.cards td:not(:first-child) > * { margin-left:auto; text-align:right; }
  table.tbl.cards td.empty-cell { display:none; }
  .tbl-wrap { overflow-x:visible; }
}

/* ─────────── бейджи, чипы ─────────── */
.badge { display:inline-flex; align-items:center; gap:5px; padding:2.5px 8px; border-radius:999px; font-size:12px;
  font-weight:600; background:var(--bg); color:var(--ink-2); white-space:nowrap; }
.badge-green { background:var(--green-l); color:var(--green-d); }
.badge-amber { background:var(--amber-bg); color:var(--amber); }
.badge-red { background:var(--red-bg); color:var(--red); }
.badge-blue { background:var(--blue-bg); color:var(--blue); }
.flag { font-size:15px; line-height:1; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; border:1px solid var(--line);
  background:var(--card); font-size:13px; cursor:pointer; }
.chip.on { background:var(--green-l); border-color:var(--green-b); color:var(--green-d); font-weight:600; }

.note { padding:11px 13px; border-radius:var(--r-s); font-size:13.5px; line-height:1.45; }
.note-warn { background:var(--amber-bg); color:#7a4d05; border:1px solid #f3e0bc; }
.note-err { background:var(--red-bg); color:#8f2a1e; border:1px solid #f2ccc6; }
.note-info { background:var(--blue-bg); color:#155078; border:1px solid #cfe4f2; }
.note-ok { background:var(--green-l); color:var(--green-d); border:1px solid #c3e6d2; }

.empty { text-align:center; padding:38px 20px; color:var(--ink-3); }
.empty .ico { font-size:34px; margin-bottom:8px; opacity:.55; }

/* ─────────── карта ─────────── */
#map { width:100%; height:calc(100dvh - var(--header-h) - 130px); min-height:380px; border-radius:var(--r); z-index:1; }
.leaflet-container { font-family:var(--font); border-radius:var(--r); }
.map-pin { display:grid; place-items:center; width:30px; height:30px; border-radius:50% 50% 50% 4px;
  transform:rotate(-45deg); border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.3); font-size:13px; font-weight:700; }
.map-pin span { transform:rotate(45deg); color:#fff; }
.pop h4 { margin-bottom:5px; font-size:15px; }
.pop .r { display:flex; justify-content:space-between; gap:14px; font-size:13px; padding:2px 0; }
.pop .r b { font-variant-numeric:tabular-nums; }
.pop .acts { margin-top:9px; display:flex; gap:6px; }
.legend { display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-2); }
.legend i { width:11px; height:11px; border-radius:50%; display:inline-block; margin-right:5px; vertical-align:-1px; }

/* ─────────── модальные окна ─────────── */
.modal-bg { position:fixed; inset:0; background:rgba(16,28,38,.5); z-index:100; display:grid; place-items:center;
  padding:16px; overflow-y:auto; }
.modal { background:var(--card); border-radius:14px; width:100%; max-width:680px; max-height:92dvh; display:flex;
  flex-direction:column; box-shadow:0 18px 50px rgba(10,25,40,.28); }
.modal-head { display:flex; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid var(--line); }
.modal-head h3 { flex:1; }
.modal-body { padding:16px 18px; overflow-y:auto; flex:1; }
.modal-foot { display:flex; gap:9px; padding:13px 18px; border-top:1px solid var(--line); justify-content:flex-end; }
.modal-wide { max-width:940px; }
.x-btn { border:0; background:transparent; font-size:21px; line-height:1; color:var(--ink-3); cursor:pointer; padding:3px 6px; }

/* ─────────── плитки товаров ─────────── */
.prod-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:12px; }
.prod-tile { background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  cursor:pointer; transition:transform .12s, box-shadow .12s, border-color .12s; }
.prod-tile:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(20,40,60,.12); border-color:var(--green-b); }
.prod-photo { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--line-2); }
.prod-photo-fallback { width:100%; aspect-ratio:4/3; display:grid; place-items:center; font-size:44px;
  background:linear-gradient(140deg,#eef5f0,#e3eee8); }
.prod-tile-body { padding:10px 12px 12px; }
.prod-tile .nm { font-weight:700; font-size:14.5px; line-height:1.25; }
.prod-tile .sub { font-size:12px; margin-top:2px; }
.prod-tile .price { font-size:15px; font-weight:800; color:var(--green); margin-top:6px; }
.prod-tile .meta { display:flex; gap:6px; flex-wrap:wrap; margin-top:7px; }
.prod-hero { display:flex; gap:18px; align-items:flex-start; }
.prod-hero img { width:220px; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); flex:none; }
@media (max-width:600px) {
  .prod-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
  .prod-hero { flex-direction:column; }
  .prod-hero img { width:100%; }
}

/* ─────────── подбор ─────────── */
.opt-card { border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--card); }
.opt-card.best { border-color:var(--green-b); box-shadow:0 0 0 3px rgba(47,161,95,.13); }
.opt-head { display:flex; align-items:center; gap:12px; padding:13px 16px; background:var(--card); flex-wrap:wrap; }
.opt-head .name { font-weight:700; font-size:16px; }
.opt-price { text-align:right; margin-left:auto; }
.opt-price .big { font-size:22px; font-weight:800; color:var(--green); letter-spacing:-.5px; line-height:1.05; }
.opt-price .sub { font-size:12px; color:var(--ink-3); }
.opt-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(108px,1fr)); gap:1px; background:var(--line-2);
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.opt-metrics div { background:var(--card); padding:9px 12px; }
.opt-metrics .k { font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.4px; }
.opt-metrics .v { font-size:15px; font-weight:700; margin-top:1px; font-variant-numeric:tabular-nums; }
.bar { height:5px; background:var(--line-2); border-radius:3px; overflow:hidden; margin-top:5px; }
.bar i { display:block; height:100%; background:var(--green-b); }

/* ─────────── прочее ─────────── */
.toast-wrap { position:fixed; left:50%; bottom:78px; transform:translateX(-50%); z-index:200; display:flex;
  flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast { background:#1c2b38; color:#fff; padding:10px 17px; border-radius:999px; font-size:14px; font-weight:500;
  box-shadow:0 6px 22px rgba(10,25,40,.3); animation:pop .2s ease; }
.toast.err { background:var(--red); }
.toast.ok { background:var(--green); }
@keyframes pop { from { opacity:0; transform:translateY(8px);} to { opacity:1; transform:none; } }
.spinner { width:17px; height:17px; border:2.5px solid var(--line); border-top-color:var(--green); border-radius:50%;
  animation:spin .7s linear infinite; display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }
.skeleton { background:linear-gradient(90deg,var(--line-2) 25%,#f7fafb 50%,var(--line-2) 75%); background-size:200% 100%;
  animation:sk 1.2s infinite; border-radius:6px; height:15px; }
@keyframes sk { to { background-position:-200% 0; } }

.login-wrap { min-height:100dvh; display:grid; place-items:center; padding:20px;
  background:linear-gradient(150deg,#eaf4ee,#f4f7f9 55%,#e9f1f6); }
.login-card { width:100%; max-width:370px; background:var(--card); border-radius:16px; padding:28px 26px;
  box-shadow:0 12px 40px rgba(20,50,40,.13); }
.login-logo { display:flex; align-items:center; gap:11px; margin-bottom:20px; }

.letter-frame { width:100%; height:min(62dvh,620px); border:1px solid var(--line); border-radius:var(--r); background:#eef2f5; }
/* Пара «мой язык | язык поставщика» */
.letter-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.letter-pair .letter-frame { height:min(56dvh,560px); }
.letter-col-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.4px; color:var(--ink-3); }
.letter-col-head .badge { text-transform:none; letter-spacing:0; }
.letter-col.outgoing .letter-col-head { color:var(--green-d); }
.letter-col.outgoing .letter-frame { border-color:var(--green-b); box-shadow:0 0 0 2px rgba(47,161,95,.12); }
@media (max-width:760px) {
  .letter-pair { grid-template-columns:1fr; }
  .letter-pair .letter-frame { height:44dvh; }
}
.sub { color:var(--ink-3); font-size:13px; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.nowrap { white-space:nowrap; }
.trunc { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.clickable { cursor:pointer; }

/* ─────────── адаптив ─────────── */
@media (max-width:900px) {
  .sidebar { display:none; }
  .tabbar { display:block; }
  .main { padding:14px 12px calc(var(--nav-h) + 20px); }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .grid-3 { grid-template-columns:1fr; }
  .grid-2 { grid-template-columns:1fr; }
  h1 { font-size:19px; }
  #map { height:calc(100dvh - var(--header-h) - var(--nav-h) - 118px); }
  .modal { max-height:94dvh; border-radius:14px; }
  .toast-wrap { bottom:calc(var(--nav-h) + 16px); }
  .header { padding:0 12px; }
  .user-chip .nm { display:none; }
  table.tbl { font-size:13.5px; }
  table.tbl th,table.tbl td { padding:8px 8px; }
}
@media (max-width:520px) {
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .stat .v { font-size:23px; }
  .opt-price .big { font-size:19px; }
  .modal-foot { flex-wrap:wrap; }
  .modal-foot .btn { flex:1; }
}
@media print {
  .header,.sidebar,.tabbar,.modal-foot,.btn { display:none !important; }
  .main { padding:0; } body { background:#fff; }
}

/* ── Ночной режим ───────────────────────────────────────────────
   Переопределяем только палитру: вся разметка построена на переменных,
   поэтому темы различаются одним блоком. Включается тумблером в шапке,
   при выборе «как в системе» следует настройке устройства. */
:root[data-theme="dark"] {
  --green:#3fa96a; --green-d:#2f8b53; --green-l:#16302299; --green-b:#4fc47d;
  --ink:#e8eef0; --ink-2:#aebbc4; --ink-3:#8496a1;
  --bg:#0f1519; --card:#161f26; --line:#26333c; --line-2:#1d272f;
  --amber:#e0a445; --amber-bg:#33260f; --red:#e26b5d; --red-bg:#341a17;
  --blue:#5aa8d8; --blue-bg:#122634;
  --shadow:0 1px 3px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.35);
  color-scheme:dark;
}
:root[data-theme="dark"] img.prod-photo,
:root[data-theme="dark"] .prod-photo img { background:#fff; border-radius:6px; }
:root[data-theme="dark"] .letter-frame { background:#fff; }
:root[data-theme="dark"] .tbl tbody tr:hover { background:#1d272f; }
.theme-switch { display:flex; background:var(--bg); border-radius:8px; padding:2px; gap:2px; }
.theme-switch button { border:0; background:none; cursor:pointer; padding:5px 10px; border-radius:6px;
  font-size:15px; color:var(--ink-3); line-height:1.1; transition:background .15s, color .15s; }
.theme-switch button:hover { color:var(--ink); background:var(--line-2); }
.theme-switch button.on { background:var(--card); color:var(--ink); box-shadow:var(--shadow); }
:root[data-theme="dark"] .login-wrap { background:linear-gradient(160deg,#0f1519,#16241d 60%,#0f1519); }
/* непрочитанные письма — подсветка, читаемая в обеих темах */
.tbl tbody tr.unread { background:var(--green-l); }
.tbl tbody tr.unread td:nth-child(2) strong,
.tbl tbody tr.unread td:nth-child(3) strong { font-weight:700; }
:root[data-theme="dark"] .tbl tbody tr.unread { background:#172a22; }
input[type="checkbox"] { accent-color:var(--green-b); width:16px; height:16px; cursor:pointer; }