/* style.css */
:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#101828;
  --muted:#667085;
  --border:#e5e7eb;
  --shadow:0 10px 30px rgba(16,24,40,.08);

  /* Палитра (как на референсе) */
  --st-cancel: #ffb2b2;  /* Отмена */
  --st-nacc:   #f3f4f6;  /* Не принят */
  --st-accept: #fff2a6;  /* Принят */
  --st-print:  #bcd4ff;  /* В Печати */
  --st-post:   #c3bbff;  /* В Пост-Печати */
  --st-ready:  #d9f5a9;  /* Готов */
  --st-done:   #6fe29a;  /* СДАН */

  /* Лампочки */
  --st-cancel-dot:#ef4444;
  --st-nacc-dot:  #9ca3af;
  --st-accept-dot:#f59e0b;
  --st-print-dot: #3b82f6;
  --st-post-dot:  #7c3aed;
  --st-ready-dot: #65a30d;
  --st-done-dot:  #16a34a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue";
  color:var(--text);
  background:var(--bg);
}

/* ---------- Topbar layout (ЛЕВО / ЦЕНТР / ПРАВО) ---------- */
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap:16px;
  align-items:center;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  background:rgba(246,247,251,.92);
  backdrop-filter:saturate(140%) blur(8px);
}

.brand .title{font-weight:800}
.brand .sub{font-size:12px;color:var(--muted)}

.roleBox{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
}
.roleBox__label{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
  letter-spacing:.2px;
}

.controls{
  justify-self:end;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.pill{
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  font-size:12px;
  color:var(--muted);
  min-width:44px;
  text-align:center;
}

.input{
  height:36px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  min-width:260px;
  outline:none;
}
.input:focus{border-color:#c7d2fe; box-shadow:0 0 0 4px rgba(99,102,241,.12);}

.select{
  height:36px;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  outline:none;
}
.select--sm{min-width:74px}

.btn{
  height:36px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  font-weight:800;
  cursor:pointer;
}
.btn:hover{background:#f9fafb}

/* ---------- Multi-select (статусы) ---------- */
.ms{position:relative; display:inline-block}
.ms__btn{
  height:36px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  font-weight:800;
  color:var(--text);
  min-width:170px;
  text-align:left;
}
.ms__btn:focus{outline:none; border-color:#c7d2fe; box-shadow:0 0 0 4px rgba(99,102,241,.12);}
.ms__btn::after{content:"▾"; float:right; color:var(--muted)}

.ms__menu{
  position:absolute;
  right:0;
  top:42px;
  min-width:240px;
  max-height:340px;
  overflow:auto;
  padding:8px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  box-shadow:var(--shadow);
  display:none;
}
.ms.is-open .ms__menu{display:block}

.ms__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  user-select:none;
}
.ms__item:hover{background:#f3f4f6}
.ms__item input{width:16px;height:16px}

/* ---------- Table ---------- */
.wrap{padding:18px 16px}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.tableWrap{overflow:hidden}

.tbl{
  width:100%;
  border-collapse:separate;
  border-spacing:0 12px;
  table-layout:fixed;
  padding:10px 12px 14px;
}
.tbl thead th{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
  text-align:left;
  padding:8px 10px;
}
.tbl tbody td{
  padding:14px 12px;
  vertical-align:middle;
  font-size:18px; /* увеличено под цех */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Жирный номер заказа */
.tbl tbody td.col-num{
  font-weight:900;
  font-size:20px;
}

.tbl tbody tr{
  background:transparent;
  transition: transform 0.4s ease-out, opacity 0.3s ease;
}
.tbl tbody tr td:first-child{border-top-left-radius:14px; border-bottom-left-radius:14px;}
.tbl tbody tr td:last-child{border-top-right-radius:14px; border-bottom-right-radius:14px;}

.row{
  border:1px solid rgba(229,231,235,.9);
  box-shadow:0 1px 0 rgba(16,24,40,.03);
}

/* красим ЯЧЕЙКИ, а не TR */
.row--accept td{ background:var(--st-accept); }
.row--print  td{ background:var(--st-print); }
.row--post   td{ background:var(--st-post); }
.row--ready  td{ background:var(--st-ready); }
.row--done   td{ background:var(--st-done); }
.row--cancel td{ background:var(--st-cancel); }
.row--nacc   td{ background:var(--st-nacc); }

.row td{
  border-top:1px solid rgba(229,231,235,.9);
  border-bottom:1px solid rgba(229,231,235,.9);
}
.row td:first-child{border-left:1px solid rgba(229,231,235,.9);}
.row td:last-child{border-right:1px solid rgba(229,231,235,.9);}

.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.06);
  background:rgba(255,255,255,.7);
  font-weight:900;
  font-size:14px;
}
.dot{width:9px;height:9px;border-radius:99px;display:inline-block}
.dot--accept{background:var(--st-accept-dot)}
.dot--print{background:var(--st-print-dot)}
.dot--post{background:var(--st-post-dot)}
.dot--ready{background:var(--st-ready-dot)}
.dot--done{background:var(--st-done-dot)}
.dot--cancel{background:var(--st-cancel-dot)}
.dot--nacc{background:var(--st-nacc-dot)}

.muted{color:var(--muted); padding:14px 10px}

.act{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
}
.selectAct{height:38px;border-radius:10px;font-size:16px}
.okBtn{
  height:38px;
  padding:0 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:900;
  font-size:16px;
  cursor:pointer;
}

.comm{display:flex; gap:10px; align-items:center;}
.comm__text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}
.comm__hint{
  font-size:12px;
  color:var(--muted);
  border:1px solid var(--border);
  border-radius:999px;
  padding:2px 8px;
  background:#fff;
  transition: all 0.2s ease;
  cursor:pointer;
}
.comm[data-has="1"]{cursor:pointer;}
.comm[data-has="1"]:hover .comm__hint{
  background:#f3f4f6;
  border-color:#d1d5db;
  transform: scale(1.08);
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
}

/* column widths */
.col-num{width:70px}
.col-manager{width:140px}
.col-status{width:180px}
.col-deadline{width:170px}
.col-type{width:160px}
.col-mat{width:140px}
.col-comm{width:320px}
.col-act{width:220px}

.hide-lg{display:table-cell}
@media (max-width: 1100px){
  .hide-lg{display:none}
  .col-comm{width:260px}
}
@media (max-width: 900px){
  .input{min-width:200px}
  .ms__btn{min-width:150px}
  .roleBox{justify-self:start}
  .topbar{grid-template-columns:auto auto; grid-template-rows:auto auto;}
  .brand{grid-column:1/3}
  .roleBox{grid-column:1/2}
  .controls{grid-column:2/3}
}

/* ---------- Modal ---------- */
.modal{position:fixed; inset:0; display:none; z-index:50}
.modal[aria-hidden="false"]{display:block}
.modal__backdrop{position:absolute; inset:0; background:rgba(16,24,40,.45)}
.modal__panel{
  position:relative;
  max-width:720px;
  width:calc(100% - 24px);
  margin:60px auto;
  background:#fff;
  border-radius:14px;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
}
.modal__title{font-weight:900}
.iconBtn{
  border:1px solid var(--border);
  background:#fff;
  border-radius:10px;
  height:32px;
  width:32px;
  cursor:pointer;
}
.modal__meta{
  padding:10px 14px;
  color:var(--muted);
  font-size:12px;
  border-bottom:1px solid var(--border);
}
.modal__body{
  margin:0;
  padding:12px 14px;
  white-space:pre-wrap;
  word-break:break-word;
  max-height:50vh;
  overflow:auto;
}
.modal__foot{padding:12px 14px; border-top:1px solid var(--border); display:flex; justify-content:flex-end}

/* ---------- Toast ---------- */
.toastWrap{
  position:fixed;
  right:14px;
  bottom:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:60;
}
.toast{
  background:#111827;
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  max-width:360px;
  box-shadow:var(--shadow);
  font-size:13px;
}
.toast--ok{background:#065f46}
.toast--err{background:#7f1d1d}