:root {
  --bg: #fbf7f2; --surface: #ffffff; --ink: #2d241f; --muted: #84766c;
  --brand: #b5532a; --brand-d: #8f3f1d; --brand-l: #f6e3d8;
  --line: #eadfd5; --ok: #2f7d4f; --ok-l: #e3f3ea; --warn: #9a5b00; --warn-l: #fff0d4;
  --bad: #b3261e; --bad-l: #fde7e5; --radius: 14px;
  --shadow: 0 1px 2px rgba(60,35,20,.06), 0 4px 14px rgba(60,35,20,.05);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; overflow-x: clip; margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
a { color: var(--brand-d); }
h1 { font-size: 1.45rem; margin: .2rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.6rem 0 .6rem; }
.muted { color: var(--muted); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

/* ---- üst panel ---- */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .5rem 1rem; background: var(--surface); border-bottom: 1px solid var(--line); }
.brand img { height: 38px; display: block; }
.nav { display: flex; gap: .25rem; overflow-x: auto; flex: 1 1 100%; order: 3; padding-bottom: .15rem; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { padding: .45rem .8rem; border-radius: 999px; text-decoration: none; color: var(--ink); white-space: nowrap; font-weight: 500; }
.nav a:hover { background: var(--brand-l); }
.nav a.on { background: var(--brand); color: #fff; }
.top-right { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: .6rem; min-width: 0; flex: 1 1 0; }
.top-right form { flex: 0 0 auto; }
.top-right .lnk { white-space: nowrap; }
/* şahamçanyň ady uzyn bolsa ýapyşykly üst paneli beýiklemesin: bir setir + «…» (doly ady üstüne baransoň görünýär) */
.top-right a.lnk { flex: 0 1 auto; min-width: 0; max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
.top-right form { margin: 0; }
.langs { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.langs button { border: 0; background: transparent; padding: .3rem .7rem; font-weight: 600; cursor: pointer; color: var(--muted); }
.langs button.on { background: var(--brand-l); color: var(--brand-d); }
.lnk { background: none; border: 0; padding: .3rem .2rem; color: var(--brand-d); cursor: pointer; font: inherit; text-decoration: underline; }
@media (min-width: 900px) { .nav { flex: 1 1 auto; order: 0; } }

.wrap { max-width: 1100px; min-width: 0; margin: 0 auto; padding: 1rem 1rem 6rem; }
.wrap.narrow { max-width: 520px; }

/* ---- düwmeler, giriş meýdanlary ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .5rem 1.1rem;
  border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--brand); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-d); }
.btn.danger { color: var(--bad); border-color: #efc4c0; }
.btn.danger:hover { background: var(--bad-l); }
.btn.sm { min-height: 36px; padding: .25rem .8rem; font-size: .92rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.inp { width: 100%; min-height: 44px; padding: .55rem .75rem; border: 1px solid #d9cbbf; border-radius: 12px; background: #fff; font: inherit; color: var(--ink); }
.inp:focus { outline: 2px solid var(--brand-l); border-color: var(--brand); }
select.inp { appearance: auto; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; margin-bottom: .3rem; }
.hint { color: var(--muted); font-size: .9rem; margin-top: .25rem; }
.err { color: var(--bad); font-size: .92rem; margin-top: .25rem; }
.check { display: flex; align-items: center; gap: .55rem; font-weight: 600; }
.check input { width: 20px; height: 20px; accent-color: var(--brand); }

/* ---- kartlar, tablisalar ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); margin-bottom: 1rem; }
.tbl-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
table.tbl { width: 100%; border-collapse: collapse; min-width: 0; }
.tbl td, .tbl th { overflow-wrap: anywhere; }
.tbl td.num, .tbl th.num { white-space: nowrap; }
.tbl th, .tbl td { padding: .65rem .8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.tbl th { font-size: .85rem; color: var(--muted); font-weight: 600; background: #fdfaf6; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tfoot td { font-weight: 700; background: #fdfaf6; }
.actions { display: flex; gap: .4rem; justify-content: flex-end; flex-wrap: wrap; }
.actions form { margin: 0; }
.toolbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.toolbar .grow { flex: 1 1 220px; }
.toolbar form { display: contents; }
.empty { text-align: center; color: var(--muted); padding: 2rem 1rem; }

.msg { overflow-wrap: anywhere; padding: .75rem 1rem; border-radius: 12px; margin-bottom: 1rem; font-weight: 500; }
.msg.success { background: var(--ok-l); color: var(--ok); }
.msg.error { background: var(--bad-l); color: var(--bad); }
.msg.warning, .msg.info { background: var(--warn-l); color: var(--warn); }

.badge { display: inline-block; padding: .15rem .65rem; border-radius: 999px; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.badge.ok { background: var(--ok-l); color: var(--ok); }
.badge.warn { background: var(--warn-l); color: var(--warn); }
.badge.off { background: #eee7e0; color: var(--muted); }
.badge.bad { background: var(--bad-l); color: var(--bad); }
.chip { display: inline-block; max-width: 100%; padding: .1rem .6rem; border-radius: 10px; font-size: .8rem; line-height: 1.25; background: var(--brand-l); color: var(--brand-d);
  white-space: normal; overflow-wrap: anywhere; }

/* ---- giriş ---- */
.login { margin-top: 8vh; text-align: center; }
.login img { height: 90px; margin-bottom: .5rem; }
.login .card { text-align: left; }

/* ---- pastane: sargyt senelerini saýlamak ---- */
.dates { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.date-card { display: flex; flex-direction: column; gap: .35rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .85rem 1rem; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); }
.date-card:hover { border-color: var(--brand); }
.date-card strong { font-size: 1.05rem; }
.date-card.has { border-color: #e7c9b6; background: #fffaf6; }

/* ---- katalog ---- */
.page-head { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; justify-content: space-between; margin-bottom: .5rem; }
.page-head h1 { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.deadline { background: var(--warn-l); color: var(--warn); padding: .3rem .8rem; border-radius: 999px; font-weight: 600; font-size: .92rem; }
.catbar { position: sticky; top: var(--top-h, 56px); z-index: 10; background: var(--bg); padding: .6rem 0 .5rem; }
@media (min-width: 900px) { .catbar { top: var(--top-h, 60px); } }
.catbar .row { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.catbar .row > .grow { flex: 1 1 220px; }
.chips { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: 0 0 auto; max-width: min(70vw, 260px); overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: .4rem .9rem; font: inherit;
  white-space: nowrap; cursor: pointer; color: var(--ink); }
.chips button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.plist { display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr); margin-top: .4rem; }
@media (min-width: 700px) { .plist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .plist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cat-head { overflow-wrap: anywhere; grid-column: 1 / -1; font-weight: 700; color: var(--brand-d); margin-top: .6rem; border-bottom: 2px solid var(--brand-l); padding-bottom: .2rem; }
.pcard { display: flex; align-items: center; justify-content: space-between; gap: .6rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .6rem .75rem; box-shadow: var(--shadow); }
.pcard[hidden] { display: none; }
.pcard.sel { border-color: var(--brand); background: #fffaf6; }
.pcard { min-width: 0; }
.pcard .nm { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.stepper { display: flex; align-items: center; gap: .25rem; flex: 0 0 auto; }
.stepper button { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--brand-d); }
.stepper button:active { background: var(--brand-l); }
.stepper input { width: 62px; height: 42px; text-align: center; border: 1px solid #d9cbbf; border-radius: 12px; font: inherit; font-weight: 700; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: 2px solid var(--brand-l); border-color: var(--brand); }
.bottombar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--surface); border-top: 1px solid var(--line);
  padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(60,35,20,.08); }
.bottombar .in { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: .8rem; justify-content: space-between; }
.bottombar .sum { font-weight: 600; min-width: 0; }
.bottombar .sum small { display: block; color: var(--muted); font-weight: 400; }
.dirty { color: var(--warn); font-weight: 600; }

/* ---- resept formasy ---- */
.rline { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .7rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; margin-bottom: .5rem; position: relative; }
.rline .ing { grid-column: 1 / -1; }
.rline .amt { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; color: var(--muted); }
.rline .amt b { color: var(--ink); }
.rline.removed { display: none; }
.costbox { display: flex; justify-content: space-between; font-size: 1.1rem; font-weight: 700; padding: .8rem 1rem; background: var(--brand-l); border-radius: 12px; margin: .8rem 0; }
@media (min-width: 700px) { .rline { grid-template-columns: 3fr 1.2fr 1.4fr auto; align-items: center; } .rline .ing { grid-column: auto; } .rline .amt { grid-column: auto; flex-direction: column; align-items: flex-end; min-width: 90px; } }

.kpis { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 1rem; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; box-shadow: var(--shadow); }
.kpi small { color: var(--muted); display: block; }
.kpi b { font-size: 1.35rem; }
.daynav { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.daynav .inp { width: auto; }
details.sec { margin-bottom: .8rem; }
details.sec > summary { cursor: pointer; font-weight: 700; padding: .6rem .2rem; font-size: 1.05rem; }
.print-only { display: none; }

/* ===== täze mağaza dizaýny: fotosyz kartlar, sene çipleri, bellik ===== */
.btn.block { width: 100%; }
.datechips { display: flex; gap: .5rem; overflow-x: auto; padding: .2rem 0 .6rem; scrollbar-width: none; }
.datechips::-webkit-scrollbar { display: none; }
.dchip { position: relative; flex: 0 0 auto; min-width: 64px; text-align: center; padding: .45rem .7rem; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--line); text-decoration: none; color: var(--ink); display: flex; flex-direction: column; line-height: 1.15; box-shadow: var(--shadow); }
.dchip small { color: var(--muted); font-size: .75rem; }
.dchip b { font-size: 1.05rem; }
.dchip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.dchip.on small { color: #ffe6d8; }
.dchip i { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.dchip.on i { background: #fff; }
.pcard { padding: .7rem .8rem; gap: .75rem; }
.pcard .pinfo { flex: 1 1 auto; min-width: 0; }
.pcard .pinfo .chip { margin-top: .2rem; }
.av { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 1.15rem;
  color: hsl(var(--h) 55% 28%); background: hsl(var(--h) 70% 90%); }
.pcard.sel .av { background: hsl(var(--h) 60% 38%); color: #fff; }
.notebox { margin-top: 1rem; }
.notebox textarea { margin-top: .4rem; resize: vertical; min-height: 84px; }
.notetxt { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: .2rem; }
.bottombar .btns { display: flex; gap: .5rem; }
@media (max-width: 520px) { .bottombar .btn { padding: .5rem .8rem; } .deadline { font-size: .85rem; } }

.clock { color: var(--muted); font-size: .85rem; margin-left: .5rem; white-space: nowrap; }

/* ===== uzyn atly önümler: at kartyň içinde setire göçýär, sagdan-çepe süýşmeýär ===== */
/* at 22 harpdan uzyn bolsa (şablon `long` goşýar) sanlaýjy aşaky setire geçýär we at kartyň doly inini alýar.
   700–999 px aralykda kart giň (2 sütün), şonuň üçin adaty tertip galýar. */
@media (max-width: 699px), (min-width: 1000px) {
  .pcard.long { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: .5rem .75rem; }
  .pcard.long .stepper { grid-column: 1 / -1; justify-self: end; }
}
@media (max-width: 380px) { .stepper button { width: 38px; } .stepper input { width: 54px; } .av { width: 38px; height: 38px; } .pcard.long { grid-template-columns: 38px minmax(0, 1fr); } }

/* sargyt tablisasy: dar ekranda kategoriýa aýratyn sütün däl-de, önüm adynyň aşagynda görkezilýär */
.cat-inline { display: none; margin-top: .25rem; }
@media (max-width: 599px) { .cat-col { display: none; } .cat-inline { display: block; } }

/* «No» sütüni: setir belgisini CSS sanagjy goýýar (şablonda boş öýjük bar) */
.tbl tbody { counter-reset: rowno; }
.tbl tbody tr { counter-increment: rowno; }
.tbl td.no::before { content: counter(rowno); }
.tbl th.no, .tbl td.no { width: 1%; padding-left: .5rem; padding-right: .3rem; text-align: center; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }

/* "Sargytlarym" tablisasy: dar ekranda sütünler gysylyp harplar alt-alta düşmesin; tablisa öz kartynyň içinde ýana süýşýär
   (sahypanyň özi süýşmeýär). Giň ekranda tablisa doly ini alýar. */
.tbl-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.tbl-scroll { min-width: 580px; }
.tbl-scroll th, .tbl-scroll td { white-space: nowrap; overflow-wrap: normal; }