/* ФОРТО инвест · «Контроль экономики» · палитра Stone Light */
:root{
  --bg:#F5F3EF; --panel:#FFFFFF; --ink:#211D18; --muted:#7A736A;
  --line:#E4DFD7; --accent:#D45A1E; --accent-dark:#B34813;
  --ok:#2E7D46; --warn:#9A6B00; --err:#B3341C;
  --sidebar:#26221D; --sidebar-ink:#EDE8E0;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.5 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
a{color:var(--accent-dark)} a:hover{color:var(--accent)}
h1{font-size:26px;font-weight:700;letter-spacing:-.01em;margin:.2em 0 .6em}
h2{font-size:19px;margin:1.4em 0 .5em}
h3{font-size:16px;margin:.2em 0 .6em}
.mono{font-family:ui-monospace,Consolas,monospace}
.muted{color:var(--muted)} .small-text{font-size:12.5px}
.accent{color:var(--accent)} .pos{color:var(--ok)} .neg{color:var(--err);font-weight:600}

/* ------- каркас ------- */
.layout{display:flex;min-height:100vh}
.sidebar{
  width:248px;flex:0 0 248px;background:var(--sidebar);color:var(--sidebar-ink);
  display:flex;flex-direction:column;padding:18px 14px;gap:14px;
}
.brand{display:flex;flex-direction:column;gap:7px;padding:4px 6px 0}
.brand-logo{width:100%;max-width:200px;height:auto;display:block}
.brand-mark{
  width:38px;height:38px;border-radius:9px;background:var(--accent);
  color:#fff;font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center;
}
.brand-name{font-weight:700;letter-spacing:.02em}
.brand-sub{font-size:11.5px;opacity:.65}
.login-brand{flex-direction:column;align-items:flex-start}
.login-brand .brand-logo{max-width:230px}
.sidebar nav{display:flex;flex-direction:column;gap:2px;margin-top:6px;flex:1}
.sidebar nav a{
  color:var(--sidebar-ink);text-decoration:none;padding:8px 10px;border-radius:8px;
  font-size:14px;opacity:.85;
}
.sidebar nav a:hover{background:rgba(255,255,255,.07);opacity:1}
.sidebar nav a.active{background:var(--accent);color:#fff;opacity:1}
.nav-sep{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;opacity:.45;margin:14px 10px 4px}
.sidebar-user{border-top:1px solid rgba(255,255,255,.12);padding-top:12px;display:flex;align-items:center;gap:8px}
/* Кнопка «Выйти» в тёмном сайдбаре: надпись видима всегда (светло-серая),
   а не только при наведении */
.sidebar-user .btn-ghost{color:#B8B1A6;border-color:rgba(255,255,255,.25)}
.sidebar-user .btn-ghost:hover{color:#fff;border-color:var(--accent)}
.user-line{display:flex;flex-direction:column;text-decoration:none;color:var(--sidebar-ink);flex:1;min-width:0}
.user-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{font-size:11px;opacity:.6}
.content{flex:1;padding:26px 32px;max-width:1200px}
.page-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* ------- элементы ------- */
.flash{padding:10px 14px;border-radius:9px;margin:0 0 14px;border:1px solid}
.flash-ok{background:#EDF6EF;border-color:#BFDCC7;color:var(--ok)}
.flash-warn{background:#FBF3E2;border-color:#EAD9AE;color:var(--warn)}
.flash-err{background:#FBEBE7;border-color:#F0C6BB;color:var(--err)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:14px 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.card-link{text-decoration:none;color:inherit}
.card-link:hover{border-color:var(--accent)}
.card-k{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.card-v{font-size:21px;font-weight:700;margin-top:4px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:14px 0}
.actions-panel{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:10px 0}
.table.narrow{width:auto;min-width:420px}
.table th,.table td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.table thead th{background:#FAF8F4;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.table tbody tr:last-child td{border-bottom:none}
.table tfoot td{background:#FAF8F4;border-top:2px solid var(--line)}
.table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.table.kv td:first-child{color:var(--muted);width:190px}
.row-gap td{background:#FBEBE7}
.row-future td{font-style:normal}
.details-cell{max-width:420px;word-break:break-word}
.error-list{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 14px 14px 34px;max-height:420px;overflow:auto}
.error-list li{margin:4px 0}

.status{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap}
.st-DRAFT{background:#EEEAE3;color:#6B6459}
.st-ON_APPROVAL{background:#FBF3E2;color:var(--warn)}
.st-ZGDS_APPROVAL{background:#FBF3E2;color:var(--warn)}
.st-GD_APPROVAL{background:#F2EAFB;color:#6B3FA8}
.st-APPROVED{background:#E8F1FB;color:#1D5FA8}
.st-IN_PAYMENT{background:#F2EAFB;color:#6B3FA8}
.st-PAID{background:#EDF6EF;color:var(--ok)}
.st-REJECTED{background:#FBEBE7;color:var(--err)}
.st-CANCELED{background:#EEEAE3;color:#8B8478;text-decoration:line-through}

/* ------- формы ------- */
label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
label.row{flex-direction:row;align-items:center;gap:8px;color:var(--ink)}
input,select,textarea{
  font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;min-width:0;
}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(212,90,30,.35);border-color:var(--accent)}
.num-input{max-width:150px;text-align:right}
.stack{display:flex;flex-direction:column;gap:12px}
.row-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:10px 0}
.row-form .grow,label.grow{flex:1}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;align-items:start}
.form-wide{max-width:880px}
@media (max-width:900px){.grid2{grid-template-columns:1fr}.layout{flex-direction:column}.sidebar{width:auto;flex-direction:row;flex-wrap:wrap}}

.btn,.btn-ghost,.btn-danger{
  font:inherit;font-weight:600;border-radius:9px;padding:9px 16px;cursor:pointer;
  text-decoration:none;display:inline-block;border:1px solid transparent;
}
.btn{background:var(--ink);color:#fff}
.btn:hover{background:#000}
.btn-accent{background:var(--accent)}
.btn-accent:hover{background:var(--accent-dark)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-dark)}
.btn-danger{background:var(--err);color:#fff}
.btn-danger:hover{background:#8F2914}
.btn.small,.btn-ghost.small{padding:5px 10px;font-size:12.5px}
button{cursor:pointer}

details{position:relative}
details summary{list-style:none;cursor:pointer}
details summary::-webkit-details-marker{display:none}
.popover{
  position:absolute;right:0;z-index:20;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 8px 28px rgba(33,29,24,.16);padding:14px;min-width:300px;margin-top:6px;
}

/* ------- модальные окна -------
   Открываются ПОВЕРХ основного интерфейса (не внутри таблиц), содержимое
   не обрезается, длинные формы прокручиваются, работает на малых экранах. */
.modal-overlay{
  position:fixed;inset:0;z-index:1000;display:none;
  background:rgba(33,29,24,.52);
  align-items:flex-start;justify-content:center;
  padding:36px 16px;overflow-y:auto;
}
.modal-overlay.open{display:flex}
body.modal-open{overflow:hidden}
.modal{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  width:100%;max-width:580px;box-shadow:0 18px 60px rgba(33,29,24,.28);
  max-height:calc(100vh - 72px);display:flex;flex-direction:column;
}
.modal.wide{max-width:760px}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px 12px;border-bottom:1px solid var(--line);flex:0 0 auto;
}
.modal-head h3{margin:0;font-size:17px}
.modal-body{padding:16px 20px 20px;overflow-y:auto;flex:1 1 auto}
.modal-close{
  background:none;border:none;font-size:22px;line-height:1;color:var(--muted);
  cursor:pointer;padding:2px 8px;border-radius:8px;
}
.modal-close:hover{background:#F1EDE6;color:var(--ink)}
@media (max-width:600px){
  .modal-overlay{padding:12px 8px}
  .modal{max-height:calc(100vh - 24px)}
}

/* ------- финансовые показатели ------- */
/* Забронированная сумма выделяется визуально (жёлтая плашка) */
.reserved-mark{
  background:#FBF3E2;border:1px solid #EAD9AE;color:var(--warn);
  padding:1px 7px;border-radius:7px;font-weight:700;white-space:nowrap;
}
/* Выравнивание колонок карточки по общей верхней линии */
.grid2-top{align-items:start}
.grid2-top > .table,.grid2-top > div > .table:first-child{margin-top:0}

/* ------- значки предупреждений ------- */
.badge-stale{
  display:inline-block;padding:2px 8px;border-radius:99px;font-size:11.5px;
  font-weight:700;background:#FBF3E2;color:var(--warn);border:1px solid #EAD9AE;
  white-space:nowrap;
}
.row-stale td{background:#FDF8EC}

/* ------- вход ------- */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg)}
.login-card{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:30px 30px 26px;width:380px;box-shadow:0 14px 40px rgba(33,29,24,.10);
}
.login-brand{margin-bottom:18px}
.login-card .brand-name,.login-card .brand-sub{color:var(--ink)}
.login-card .brand-sub{opacity:.6}
.login-card h1{font-size:20px}