/* ───────── Ribambelle КП-генератор · design system ───────── */
:root{
  --green-900:#26402f; --green-700:#2f5a3f; --green-600:#3a6b4a;
  --green-500:#4a7a59; --sage:#b9ccb0; --sage-2:#d6e3cd; --sage-3:#eef3e9;
  --cream:#f6f5ef; --paper:#ffffff; --ink:#252a26; --muted:#6f7a70;
  --line:#e2e6dd; --gold:#f1c84b; --danger:#b3261e; --ok:#2f7d4f;
  --radius:14px; --shadow:0 1px 2px rgba(20,40,25,.06),0 8px 24px rgba(20,40,25,.07);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--cream); line-height:1.5; font-size:15px;
}
a{color:var(--green-600); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .4em; line-height:1.2}
h1{font-size:1.7rem}
.muted{color:var(--muted)}
.small{font-size:.82rem}

/* layout */
.wrap{max-width:1180px; margin:0 auto; padding:0 22px}
.page{padding:26px 0 60px}

/* top bar */
.topbar{background:var(--green-900); color:#eef3e9; position:sticky; top:0; z-index:30;
  box-shadow:0 2px 14px rgba(20,40,25,.18)}
.topbar .wrap{display:flex; align-items:center; gap:18px; height:60px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:#fff}
.brand .logo{font-family:Georgia,"Times New Roman",serif; letter-spacing:.22em;
  text-transform:uppercase; font-size:1.05rem; font-weight:600}
.brand .swirl{color:var(--sage); font-size:1.1rem}
.brand .star{color:var(--gold)}
.nav{display:flex; align-items:center; gap:6px; margin-left:auto; flex-wrap:wrap}
.nav a,.nav .navuser{color:#dbe7d4; padding:7px 12px; border-radius:9px; font-size:.92rem}
.nav a:hover{background:rgba(255,255,255,.1); text-decoration:none; color:#fff}
.nav a.active{background:rgba(255,255,255,.16); color:#fff}
.navuser{opacity:.85; border-left:1px solid rgba(255,255,255,.2); margin-left:6px}
.or-balance{color:#eef3e9; background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.16);
  border-radius:999px; padding:6px 10px; font-size:.82rem; white-space:nowrap}
.or-balance.muted{color:#cfd8ce}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:7px; border:none; cursor:pointer;
  font:inherit; font-weight:600; font-size:.92rem; padding:10px 16px; border-radius:10px;
  background:var(--green-700); color:#fff; transition:.15s; text-decoration:none; white-space:nowrap}
.btn:hover{background:var(--green-600); text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:#fff; color:var(--green-700); border:1px solid var(--line)}
.btn.ghost:hover{background:var(--sage-3)}
.btn.gold{background:var(--gold); color:#3a2f00}
.btn.gold:hover{background:#e7bb33}
.btn.danger{background:#fff;color:var(--danger);border:1px solid #e6c9c7}
.btn.danger:hover{background:#fbeeed}
.btn.sm{padding:6px 11px; font-size:.84rem; border-radius:8px}
.btn.lg{padding:13px 22px; font-size:1rem}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.btn.is-loading{position:relative; pointer-events:none}
.btn.is-loading::before{
  content:""; width:14px; height:14px; border-radius:50%;
  border:2px solid currentColor; border-right-color:transparent;
  animation:spin .75s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* cards & panels */
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow)}
.card.pad{padding:22px}
.panel{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px 22px; margin-bottom:18px}
.panel > h2{font-size:1.02rem; color:var(--green-700); display:flex; align-items:center; gap:8px}
.panel-head{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.panel-head h2{margin:0}
.spacer{flex:1}

/* forms */
.grid{display:grid; gap:14px 18px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}
.field-row{display:flex; flex-direction:column; gap:5px}
.field-row label{font-size:.8rem; font-weight:600; color:var(--muted)}
.field,select.field,textarea.field{width:100%; padding:9px 11px; border:1px solid var(--line);
  border-radius:9px; font:inherit; background:#fff; color:var(--ink)}
.field:focus{outline:2px solid var(--sage); border-color:var(--green-500)}
textarea.field{resize:vertical; min-height:70px}
.slider{width:100%; accent-color:var(--green-600)}
.slider-val{font-weight:700; color:var(--green-700)}
.help{font-size:.78rem; color:var(--muted)}
.errorlist{color:var(--danger); font-size:.82rem; margin:4px 0 0; padding-left:16px}

/* messages */
.messages{margin:0 0 16px; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px}
.messages li{padding:11px 15px; border-radius:10px; font-size:.92rem; border:1px solid}
.messages .success{background:#eaf4ec; border-color:#bfe0c8; color:#1f5a36}
.messages .danger,.messages .error{background:#fbeeed; border-color:#eccbc8; color:#8a241d}
.messages .info{background:var(--sage-3); border-color:var(--sage); color:var(--green-700)}

/* badges */
.badge{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  font-size:.74rem; font-weight:600}
.badge.draft{background:#fdf3d6; color:#8a6d12}
.badge.sent{background:#e2f0e6; color:#236b41}
.badge.prio{background:#fbe9d6; color:#9a531a}
.badge.margin{background:#e6eefb; color:#27457f}

/* tables */
.table-scroll{overflow-x:auto}
table.list{width:100%; border-collapse:collapse; background:#fff}
table.list th,table.list td{padding:11px 13px; border-bottom:1px solid var(--line); text-align:left}
table.list th{font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
table.list tr:hover td{background:var(--sage-3)}
.right{text-align:right!important}
.center{text-align:center!important}
.nowrap{white-space:nowrap}

/* dashboard hero */
.hero{display:flex; align-items:flex-end; gap:18px; margin-bottom:20px; flex-wrap:wrap}
.hero .sub{color:var(--muted)}
.hero .sub.one-line{white-space:nowrap}
@media(max-width:900px){.hero .sub.one-line{white-space:normal}}
.empty{padding:50px 20px; text-align:center; color:var(--muted)}
.proposal-list{min-width:1040px}
.proposal-list th:first-child,.proposal-list td:first-child{width:54px}
.proposal-list .row-num{font-weight:700; color:var(--muted)}
.proposal-list .person-cell strong{font-size:.98rem}
.proposal-list .total-cell{font-weight:700; color:var(--green-700)}
.proposal-list .row-actions{display:flex; gap:6px; justify-content:flex-end}

/* login */
.login-wrap{min-height:100vh; display:grid; place-items:center; background:
  radial-gradient(1200px 500px at 50% -10%, #34543f 0%, var(--green-900) 60%)}
.login-card{width:380px; max-width:92vw; background:#fff; border-radius:18px; padding:30px;
  box-shadow:0 20px 60px rgba(0,0,0,.3)}
.login-card .brand{justify-content:center; margin-bottom:6px}
.login-card .brand .logo{color:var(--green-900)}
.login-card .brand .swirl{color:var(--green-600)}

/* ───────── editor ───────── */
.editor-page .page > .wrap{max-width:1500px}
.editor-layout{display:flex; gap:18px; align-items:flex-start}
.editor-main{flex:1; min-width:0}
.editor-aside{width:300px; flex-shrink:0; position:sticky; top:78px}
@media(max-width:1280px){.editor-layout{flex-direction:column; align-items:stretch}.editor-main{width:100%}.editor-aside{width:100%;position:static}}

#editorTable{overflow-x:auto; padding-bottom:2px}
.cat-group{border:1px solid var(--line); border-radius:11px; overflow:visible; margin-bottom:12px; min-width:860px}
.cat-head{display:flex; align-items:center; gap:10px; padding:8px 12px;
  background:var(--sage); color:var(--green-900); font-weight:700; font-size:.92rem}
.cat-head .cat-sum{margin-left:auto; font-variant-numeric:tabular-nums}
.cat-head .badge.svc{background:#e7e0f3;color:#5a4790}
.cat-head .badge.ent{background:#fde2cf;color:#9a531a}
.cat-head .badge.menu{background:#dceee0;color:#236b41}
.cat-rows{background:#fff}
.line-row{display:grid; grid-template-columns:minmax(280px,2fr) 76px 70px 68px 100px minmax(170px,1fr) 34px;
  gap:7px; align-items:center; padding:6px 10px; border-top:1px solid var(--sage-3)}
.line-row > *{min-width:0}
.line-row.name-expanded{align-items:start; position:relative; z-index:25}
.line-row:first-child{border-top:none}
.line-row input,.line-row textarea{width:100%; padding:6px 8px; border:1px solid var(--line); border-radius:7px;
  font:inherit; font-size:.86rem; background:#fff}
.line-row textarea.name{display:block; min-height:34px; max-height:92px; resize:none; line-height:1.25;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.line-row.name-expanded textarea.name{white-space:normal; overflow:auto; min-height:52px}
.line-row input.price,.line-row input.qty,.line-row input.weight{text-align:right; font-variant-numeric:tabular-nums}
.line-row .line-sum{text-align:right; font-weight:600; font-variant-numeric:tabular-nums; font-size:.88rem}
.line-row .del{border:none;background:none;color:var(--danger);cursor:pointer;font-size:1.05rem;padding:4px 0;
  border-radius:6px; width:30px; justify-self:center}
.line-row .del:hover{background:#fbeeed}
.line-row .pflag{color:var(--gold); font-size:.8rem; width:18px; flex:0 0 18px; text-align:center}
.line-row .pflag.muted-star{visibility:hidden}
.line-row .hidden{display:none!important}
.name-cell{position:relative; display:flex; align-items:stretch; gap:5px; min-width:0}
.suggest-list{position:absolute; left:0; right:auto; top:calc(100% + 4px); z-index:120;
  width:min(720px, calc(100vw - 64px)); max-height:420px; overflow-y:auto; background:#fff; border:1px solid var(--line);
  border-radius:10px; box-shadow:0 12px 30px rgba(20,40,25,.16); padding:5px}
.suggest-list button{width:100%; border:0; background:#fff; display:grid;
  grid-template-columns:18px minmax(0,1fr) auto; gap:9px; align-items:flex-start;
  padding:9px 10px; border-radius:7px; cursor:pointer; text-align:left; font:inherit}
.suggest-list button:hover,.suggest-list button:focus{background:var(--sage-3); outline:none}
.suggest-star{grid-column:1; color:var(--gold); font-size:.85rem}
.suggest-list .suggest-star.hidden{display:block!important; visibility:hidden}
.suggest-main{overflow:visible; text-overflow:clip; white-space:normal; line-height:1.25; overflow-wrap:anywhere}
.suggest-list .suggest-main{grid-column:2}
.suggest-price{color:var(--muted); font-size:.8rem; font-variant-numeric:tabular-nums; white-space:nowrap}
.suggest-list .suggest-price{grid-column:3}
.cat-foot{padding:6px 10px; background:var(--sage-3)}
.cat-foot button{background:none;border:1px dashed var(--green-500);color:var(--green-600);
  border-radius:7px;padding:4px 10px;font:inherit;font-size:.8rem;cursor:pointer}
.cat-foot button:hover{background:#fff}
.row-head{display:grid; grid-template-columns:minmax(280px,2fr) 76px 70px 68px 100px minmax(170px,1fr) 34px;
  gap:7px; padding:2px 10px 6px; font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted)}
.row-head span{text-align:right}.row-head span:first-child{text-align:left}.row-head span:nth-child(6){text-align:left}

/* summary */
.summary h2{font-size:1rem;color:var(--green-700);margin-bottom:12px}
.sum-row{display:flex; justify-content:space-between; gap:10px; padding:7px 0; font-size:.9rem;
  border-bottom:1px dashed var(--line)}
.sum-row span{color:var(--muted)} .sum-row b{font-variant-numeric:tabular-nums}
.sum-row i{font-style:normal;font-size:.78rem}
.sum-row.total{border-bottom:2px solid var(--green-700); border-top:1px solid var(--line);
  margin-top:4px; padding-top:10px}
.sum-row.total span{color:var(--ink);font-weight:700} .sum-row.total b{font-size:1.15rem;color:var(--green-700)}
.budget-meter{margin-top:12px;height:8px;border-radius:6px;background:var(--sage-3);overflow:hidden;position:relative}
.budget-meter::after{content:'';position:absolute;left:0;top:0;bottom:0;width:var(--pct,0%);
  background:var(--green-500);transition:.3s}
.budget-meter.over::after{background:var(--danger)}
.budget-label{font-size:.78rem;color:var(--muted);margin-top:6px;text-align:center}
.actions{display:flex;flex-direction:column;gap:10px}
.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* form action buttons row */
.form-actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap}

@media(max-width:980px){
  .editor-page #newCatSelect{max-width:none!important; width:100%; flex:1 1 100%}
  .editor-page #editorTable{overflow-x:visible}
  .editor-page .cat-group{min-width:0}
  .editor-page .row-head{display:none}
  .editor-page .line-row{grid-template-columns:1fr 1fr 1fr; gap:8px; padding:11px 10px;
    grid-template-areas:
      "name name name"
      "price weight qty"
      "sum sum del"
      "comment comment comment"}
  .editor-page .line-row .name-cell{grid-area:name}
  .editor-page .line-row .price{grid-area:price}
  .editor-page .line-row .weight{grid-area:weight}
  .editor-page .line-row .qty{grid-area:qty}
  .editor-page .line-row textarea.name{white-space:normal; overflow:hidden; text-overflow:clip; max-height:none}
  .editor-page .line-row .line-sum{grid-area:sum; text-align:left; align-self:center; font-size:1rem}
  .editor-page .line-row .line-sum::before{content:"Сумма: "; color:var(--muted); font-weight:400; font-size:.8rem}
  .editor-page .line-row .comment{grid-area:comment}
  .editor-page .line-row .del{grid-area:del; justify-self:end; align-self:center; font-size:1.25rem; padding:6px 12px}
  .editor-page .suggest-list{left:0}
}

/* ───────── мобильная адаптивность ───────── */
.nav-toggle{display:none}
.nav-burger{display:none}

/* шапка: бургер-меню */
@media(max-width:860px){
  .topbar .wrap{position:relative; gap:10px}
  .nav-burger{display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; margin-left:auto; border-radius:10px; cursor:pointer;
    color:#eef3e9; font-size:1.5rem; line-height:1;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15)}
  .nav-burger:active{background:rgba(255,255,255,.18)}
  nav.nav{display:none; position:absolute; left:0; right:0; top:100%; margin:0;
    flex-direction:column; align-items:stretch; gap:2px; flex-wrap:nowrap;
    background:var(--green-900); padding:8px;
    border-top:1px solid rgba(255,255,255,.12);
    box-shadow:0 18px 34px rgba(20,40,25,.34); z-index:40}
  .nav-toggle:checked ~ nav.nav{display:flex}
  .nav a,.nav .navuser{padding:12px 13px; border-radius:9px; font-size:1rem}
  .nav .or-balance{align-self:flex-start; margin:2px 1px 6px}
  .nav .navuser{border-left:none; opacity:.85; order:9}
  .nav form{display:block!important; order:10; width:100%}
  .nav form button.nav{width:100%; text-align:left; padding:12px 13px!important; border-radius:9px}
}

@media(max-width:640px){
  .wrap{padding:0 14px}
  .page{padding:18px 0 46px}
  h1{font-size:1.4rem}
  .panel{padding:16px}
  .card.pad{padding:16px}
  .panel-head{flex-wrap:wrap}

  /* 16px у полей — чтобы iOS не зумил при фокусе */
  .field,select.field,textarea.field,.line-row input,.line-row textarea{font-size:16px}

  /* hero / кнопки */
  .hero{gap:10px; margin-bottom:16px}
  .hero .btn.lg{width:100%; justify-content:center}
  .form-actions .btn{flex:1 1 100%; justify-content:center}

  /* dashboard: таблица → карточки */
  .proposal-list{min-width:0}
  .table-scroll{overflow:visible}
  .proposal-list thead{display:none}
  .proposal-list tbody{display:block}
  .proposal-list tr{display:block; background:#fff; border:1px solid var(--line);
    border-radius:13px; box-shadow:var(--shadow); margin:0 0 12px; overflow:hidden}
  .proposal-list tr:hover td{background:#fff}
  .proposal-list td{display:block; text-align:left!important; padding:7px 14px; border:none}
  .proposal-list td[data-label]::before{content:attr(data-label); display:block;
    color:var(--muted); font-size:.66rem; font-weight:700; letter-spacing:.05em;
    text-transform:uppercase; margin-bottom:1px}
  .proposal-list td.row-num{display:none}
  .proposal-list td.person-cell{background:var(--sage-3); padding:11px 14px}
  .proposal-list td.person-cell strong{font-size:1.06rem}
  .proposal-list td.total-cell{font-size:1.05rem}
  .proposal-list td.actions-cell{padding:8px 12px 12px}
  .proposal-list .row-actions{justify-content:stretch; gap:8px}
  .proposal-list .row-actions .btn{flex:1; justify-content:center; padding:10px 8px}
  .nowrap{white-space:normal}

  /* editor: селект категории на всю ширину */
  #newCatSelect{max-width:none!important; width:100%; flex:1 1 100%}

  /* editor: строки позиций → 2D-раскладка */
  #editorTable{overflow-x:visible}
  .cat-group{min-width:0}
  .row-head{display:none}
  .line-row{grid-template-columns:1fr 1fr 1fr; gap:8px; padding:11px 10px;
    grid-template-areas:
      "name name name"
      "price weight qty"
      "sum sum del"
      "comment comment comment"}
  .line-row .name-cell{grid-area:name}
  .line-row .price{grid-area:price}
  .line-row .weight{grid-area:weight}
  .line-row .qty{grid-area:qty}
  .line-row .line-sum{grid-area:sum; text-align:left; align-self:center; font-size:1rem}
  .line-row .line-sum::before{content:"Сумма: "; color:var(--muted); font-weight:400; font-size:.8rem}
  .line-row .comment{grid-area:comment}
  .line-row .del{grid-area:del; justify-self:end; align-self:center; font-size:1.25rem; padding:6px 12px}
  .suggest-list{left:0}
}

@media(max-width:480px){
  .brand .logo{font-size:.92rem; letter-spacing:.14em}
  .brand .swirl{font-size:.95rem}
  .login-card{padding:24px 20px}
}