/* EVIDEX — кабинет. Гамма и типографика взяты с лендинга: светлый фон,
   засечные заголовки, прямые углы, тонкие линии. */

:root{
  --paper:#FFFFFF;
  --paper-2:#F7F8FA;
  --ink:#14171C;
  --ink-2:#39404B;
  --grey:#6B7280;
  --grey-2:#9AA1AC;
  --line:#E2E6EA;
  --line-2:#EFF1F4;
  --navy:#123A63;
  --navy-2:#0B2540;
  --accent:#8C2F39;
  --maxw:1220px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  font-weight:600; color:var(--navy-2); letter-spacing:-.008em;
}
a{color:var(--navy)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 34px}
.narrow{max-width:620px}

.secnum{
  display:block; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--grey-2); font-weight:700; margin-bottom:16px;
}
.secnum b{color:var(--accent)}
.note{font-size:14.5px; color:var(--grey)}
.small{font-size:14px}
.mono{font-variant-numeric:tabular-nums}

/* ---------- шапка ---------- */
header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96);
       backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:80px; gap:24px}
.brand{text-decoration:none}
.brand .n{font-family:"Iowan Old Style",Palatino,Georgia,serif; font-size:23px;
          color:var(--navy-2); letter-spacing:.05em}
.brand .n i{font-style:normal; color:var(--accent)}
.brand small{display:block; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
             color:var(--grey-2); margin-top:3px}
.navright{display:flex; align-items:center; gap:26px; font-size:14.5px; color:var(--grey)}
.navright a{color:var(--ink-2); text-decoration:none; padding-bottom:3px;
            border-bottom:1px solid transparent}
.navright a:hover{border-bottom-color:var(--accent)}

/* ---------- кнопки ---------- */
.btn{display:inline-block; padding:13px 28px; background:var(--navy); color:#fff;
     text-decoration:none; font-size:15px; font-weight:600; border:1px solid var(--navy);
     border-radius:0; cursor:pointer; font-family:inherit; transition:.18s}
.btn:hover{background:var(--navy-2); border-color:var(--navy-2)}
.btn-l{background:transparent; color:var(--navy)}
.btn-l:hover{background:var(--navy); color:#fff}
.btn-s{padding:9px 17px; font-size:13.5px; font-weight:600}
.btn[disabled],.btn.off{background:var(--paper-2); color:var(--grey-2);
                        border-color:var(--line); pointer-events:none}
.linkbtn{background:none; border:0; padding:0; font:inherit; font-size:13.5px;
         color:var(--grey); cursor:pointer; text-decoration:underline}
.linkbtn:hover{color:var(--accent)}

/* ---------- блоки ---------- */
main.wrap{padding:56px 34px 90px}
.head{display:flex; justify-content:space-between; align-items:flex-end; gap:30px;
      flex-wrap:wrap; margin-bottom:40px}
h1{font-size:clamp(28px,3.6vw,40px); line-height:1.15; margin:0}
h2{font-size:23px; margin:0 0 18px}
h3{font-size:19px; margin:0 0 10px}
.block{border-top:1px solid var(--line); padding-top:34px; margin-top:52px}
.block:first-of-type{margin-top:0}

.panel{border:1px solid var(--line); background:#fff}
.panel .ph{padding:16px 24px; border-bottom:1px solid var(--line); background:var(--paper-2);
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey);
  font-weight:700; display:flex; justify-content:space-between; gap:16px; align-items:center}
.panel .pb{padding:22px 24px}
.prow{display:flex; justify-content:space-between; gap:18px; padding:12px 0;
      border-bottom:1px solid var(--line-2); font-size:15.5px}
.prow:last-child{border-bottom:0}
.prow span{color:var(--grey)}
.prow b{font-variant-numeric:tabular-nums; text-align:right}
.prow b.a{color:var(--accent)}

.msg{border-left:2px solid var(--navy); background:var(--paper-2); padding:14px 20px;
     margin:0 0 28px; font-size:15.5px; color:var(--ink-2)}
.msg.bad{border-left-color:var(--accent)}

.empty{border:1px solid var(--line); background:var(--paper-2); padding:52px 40px;
       text-align:center; color:var(--ink-2)}
.empty h3{margin:0 0 10px}
.empty p{margin:0 auto; max-width:62ch; color:var(--grey)}

/* ---------- таблицы ---------- */
table.t{width:100%; border-collapse:collapse; font-size:16px}
table.t th{text-align:left; font-size:11.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--grey); font-weight:700; padding:0 16px 14px 0; border-bottom:1px solid var(--line);
  white-space:nowrap}
table.t td{padding:17px 16px 17px 0; border-bottom:1px solid var(--line-2); vertical-align:top}
table.t th:last-child,table.t td:last-child{padding-right:0}
table.t tr:hover td{background:var(--paper-2)}
table.t td a{color:var(--navy-2); text-decoration:none; font-weight:600}
table.t td a:hover{color:var(--accent)}
table.t td.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.dim{color:var(--grey)}

.tag{display:inline-block; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
     font-weight:700; color:var(--grey); border:1px solid var(--line); padding:3px 9px;
     white-space:nowrap}
.tag.new{color:var(--navy); border-color:#C6D2DF}
.tag.analyzed{color:var(--navy-2); border-color:#C6D2DF; background:var(--paper-2)}
.tag.in_work{color:var(--navy-2); border-color:#C6D2DF; background:var(--paper-2)}
.tag.document{color:var(--accent); border-color:#E0C4C8}
.tag.waiting{color:#8A5A20; border-color:#E2D2B4}
.tag.closed{color:var(--grey-2)}
.due{color:var(--accent); font-weight:600}

/* ---------- находки ---------- */
.finding{display:grid; grid-template-columns:36px 1fr; gap:16px; padding:26px 0;
         border-bottom:1px solid var(--line-2)}
.finding:last-child{border-bottom:0}
.finding .mk{font-size:17px; line-height:1.5}
.finding h3{font-size:19px; margin:0 0 9px}
.finding p{margin:0; color:var(--ink-2); font-size:16px}
.finding .norm{margin-top:10px; font-size:14.5px; color:var(--grey)}
.legend{font-size:14px; color:var(--grey); margin:0 0 8px}

/* ---------- формы ---------- */
form{margin:0}
.fg{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.full{grid-column:1/-1}
label{display:block; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
      color:var(--grey); margin-bottom:8px; font-weight:600}
input,select,textarea{width:100%; padding:13px 15px; border:1px solid var(--line);
  background:#fff; font-family:inherit; font-size:16px; color:var(--ink); border-radius:0}
input[type=file]{padding:11px 12px; font-size:14.5px}
input:focus,select:focus,textarea:focus{outline:0; border-color:var(--navy)}
.code{font-size:30px; letter-spacing:.34em; text-align:center;
      font-family:"Iowan Old Style",Palatino,Georgia,serif}
.inline{display:flex; gap:12px; align-items:center; flex-wrap:wrap}

/* ---------- вход ---------- */
.login{min-height:calc(100vh - 80px); display:flex; align-items:center; padding:60px 0}
.login .box{max-width:560px}
.login ol{margin:26px 0 0; padding-left:20px; color:var(--ink-2); font-size:16px}
.login ol li{margin-bottom:8px}

footer{padding:38px 0; border-top:1px solid var(--line); color:var(--grey); font-size:14px}
.fg2{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap}

@media (max-width:900px){
  main.wrap{padding:40px 20px 70px}
  .fg{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr !important}
  .wrap{padding:0 20px}
  .nav{height:64px}
  .navright{gap:16px; font-size:13.5px}
  .brand small{display:none}
  table.t:not(.wide) thead{display:none}
  table.t:not(.wide),table.t:not(.wide) tbody,
  table.t:not(.wide) tr,table.t:not(.wide) td{display:block; width:100%}
  table.t:not(.wide) tr{border-bottom:1px solid var(--line); padding:16px 0}
  table.t:not(.wide) td{border-bottom:0; padding:2px 0}
  table.t:not(.wide) td.num{text-align:left}
}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:start}
/* Таблица товаров узкой не бывает: на малых экранах она выезжает по горизонтали
   внутри своей панели, а не ломается построчно — иначе теряется сопоставимость колонок. */
table.t.wide{min-width:820px}

/* ================= стадия дела ================= */
/* Первое, что видит клиент: на какой стадии дело и сколько осталось времени. */
.state{border:1px solid var(--line); border-left:3px solid var(--navy); background:var(--paper-2);
       display:grid; grid-template-columns:1fr auto; gap:26px; align-items:center;
       padding:24px 28px; margin:0 0 8px}
.state.warn{border-left-color:var(--accent)}
.state .lbl{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
            color:var(--grey); font-weight:700}
.state .now{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
            font-size:26px; color:var(--navy-2); line-height:1.25; margin:6px 0 0}
.state p{margin:8px 0 0; font-size:15px; color:var(--ink-2); max-width:70ch}
.state .rt{text-align:right}
.state .rt .d{font-size:22px; font-variant-numeric:tabular-nums; color:var(--navy-2);
              font-family:"Iowan Old Style",Palatino,Georgia,serif}
.state .rt .p{font-size:14px; color:var(--grey); margin-top:4px}

/* Степень срочности срока. Пороги те же, что у напоминаний: 7, 3, 1 день. */
.lvl-expired,.lvl-today,.lvl-urgent{color:var(--accent) !important; font-weight:600}
.lvl-soon{color:#8A5A20 !important; font-weight:600}
.lvl-ok{color:var(--ink-2) !important}
.lvl-none{color:var(--grey-2) !important}

/* ================= сводка ================= */
.sum{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line);
     border-bottom:0; margin-top:0}
.sum > div{border-bottom:1px solid var(--line); border-right:1px solid var(--line);
           padding:18px 22px 20px}
.sum > div:nth-child(4n){border-right:0}
.sum .k{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey);
        font-weight:700}
.sum .v{font-family:"Iowan Old Style",Palatino,Georgia,serif; font-size:23px; margin-top:7px;
        color:var(--navy-2); font-variant-numeric:tabular-nums; line-height:1.25;
        overflow-wrap:anywhere}
.sum .s{font-size:13.5px; color:var(--grey); margin-top:4px}

/* ================= лента событий ================= */
.tl{margin:6px 0 0; border-left:1px solid var(--line); padding-left:0}
.tl .ev{position:relative; padding:0 0 26px 30px}
.tl .ev:last-child{padding-bottom:0}
.tl .ev::before{content:""; position:absolute; left:-4.5px; top:8px; width:8px; height:8px;
                background:#fff; border:1px solid var(--grey-2)}
.tl .ev.mark::before{background:var(--accent); border-color:var(--accent)}
.tl .ev .when{font-size:12.5px; letter-spacing:.06em; color:var(--grey-2);
              font-variant-numeric:tabular-nums}
.tl .ev .what{font-weight:600; color:var(--navy-2); margin-top:2px; font-size:16px}
.tl .ev .txt{font-size:15px; color:var(--ink-2); margin-top:3px; max-width:78ch}
.tl .ev .by{font-size:12.5px; color:var(--grey-2); margin-top:3px}
.tl-more{font-size:14px; color:var(--grey); margin-top:22px}

/* ================= карточки дел ================= */
.cards{border-top:1px solid var(--line)}
.card{display:grid; grid-template-columns:1fr 250px; gap:26px; align-items:start;
      padding:24px 0; border-bottom:1px solid var(--line-2); text-decoration:none;
      color:inherit; transition:.15s}
.card:hover{background:var(--paper-2)}
.card .ttl{font-family:"Iowan Old Style",Palatino,Georgia,serif; font-size:21px;
           color:var(--navy-2); line-height:1.3}
.card:hover .ttl{color:var(--accent)}
.card .meta{font-size:14px; color:var(--grey); margin-top:7px; display:flex; gap:8px;
            flex-wrap:wrap; align-items:baseline}
.card .meta i{font-style:normal; color:var(--line)}
.card .last{font-size:14px; color:var(--grey); margin-top:8px}
.card .rt{text-align:right}
.card .rt .tag{margin-bottom:9px}
.card .rt .dl{font-size:14.5px; font-variant-numeric:tabular-nums; white-space:nowrap}
.card .rt .dlp{font-size:13.5px; margin-top:2px}

/* ================= ход выполнения ================= */
.busy{display:none; margin-top:18px}
.busy.on{display:block}
.busy .bar{height:2px; background:var(--line); overflow:hidden; position:relative}
.busy .bar::after{content:""; position:absolute; inset:0 auto 0 0; width:38%;
                  background:var(--navy); animation:run 1.15s linear infinite}
@keyframes run{0%{left:-40%}100%{left:100%}}
.busy .t{font-size:14px; color:var(--grey); margin-top:9px}
@media (prefers-reduced-motion:reduce){.busy .bar::after{animation:none; width:100%; opacity:.4}}



@media (max-width:900px){
  .state{grid-template-columns:1fr; gap:16px; padding:20px 22px}
  .state .rt{text-align:left}
  .sum{grid-template-columns:repeat(2,1fr)}
  .sum > div:nth-child(4n){border-right:1px solid var(--line)}
  .sum > div:nth-child(2n){border-right:0}
  .card{grid-template-columns:1fr; gap:12px; padding:20px 0}
  .card .rt{text-align:left}
  .card .rt .tag{margin-bottom:0; margin-right:10px}
}
@media (max-width:430px){
  body{font-size:16px}
  main.wrap{padding:28px 16px 60px}
  .wrap{padding:0 16px}
  h1{font-size:26px}
  .head{gap:18px; margin-bottom:28px}
  .state .now{font-size:21px}
  .sum{grid-template-columns:1fr}
  .sum > div{border-right:0 !important}
  .sum .v{font-size:20px}
  .btn{padding:12px 20px}
  .inline{gap:9px}
  .code{font-size:24px; letter-spacing:.24em}
  .tl .ev{padding-left:22px}
}

/* ================= печать ================= */
/* Карточку дела распечатывают и подшивают. Блок стоит последним намеренно:
   правила печати должны перекрывать оба «мобильных» блока — на бумаге ширина
   области печати меньше 900px, и без этого таблицы разъезжались бы построчно. */
.print-note{display:none}
@media print{
  @page{margin:14mm}
  html,body{background:#fff; font-size:11pt; line-height:1.5}
  header,footer,.noprint,form,.busy{display:none !important}
  main.wrap{padding:0 1mm; max-width:none}
  a{color:#000; text-decoration:none}
  h1{font-size:19pt}
  h2{font-size:13pt}
  h3{font-size:12pt}
  .block{margin-top:24px; padding-top:14px; border-top:1px solid #999}
  .state{grid-template-columns:1fr auto; gap:20px; background:#fff; border:1px solid #555;
         border-left-width:2px; padding:14px 16px}
  .state .rt{text-align:right}
  .state .now{font-size:15pt}
  .sum{grid-template-columns:repeat(2,1fr)}
  .sum > div{padding:12px 16px 14px; border-color:#999}
  .sum > div:nth-child(4n){border-right:1px solid #999}
  .sum > div:nth-child(2n){border-right:0}
  .sum .v{font-size:14pt}
  .panel{border-color:#999}
  .panel .ph{background:#fff; border-color:#999}
  .pb{overflow:visible !important}
  /* таблицы на бумаге остаются таблицами */
  table.t:not(.wide) thead{display:table-header-group}
  table.t:not(.wide){display:table}
  table.t:not(.wide) tbody{display:table-row-group}
  table.t:not(.wide) tr{display:table-row; border-bottom:0; padding:0}
  table.t:not(.wide) td{display:table-cell; padding:9px 12px 9px 0;
                        border-bottom:1px solid #ccc}
  table.t:not(.wide) td.num{text-align:right}
  table.t th,table.t td{border-color:#999}
  /* Восьмиколоночная таблица товаров должна уместиться в ширину листа целиком:
     сопоставимость колонок важнее кегля. */
  .panel .pb{padding:12px 14px}
  table.t.wide{min-width:0; width:100%; font-size:7.5pt; table-layout:auto}
  table.t.wide th,table.t.wide td{padding:6px 5px 6px 0}
  .panel,.finding,.tl .ev,.card{page-break-inside:avoid}
  .tl{border-left:1px solid #999}
  .print-note{display:block !important; margin-top:24px; font-size:8.5pt; color:#444;
              border-top:1px solid #999; padding-top:8px}
}