:root{
  --radius:12px;
  --radius-sm:10px;
  --radius-xs:8px;
  --control-h:44px;
  --shadow: 0 12px 28px rgba(15,23,42,.14);
}

html[data-theme="dark"]{
  --bg:#0b0f17;
  --card:#121826;
  --card2:#0f1521;
  --text:#e8eefb;
  --muted:#9aa7c1;
  --border: rgba(255,255,255,.10);
  --chip-bg: rgba(255,255,255,.03);
  --input-bg: rgba(255,255,255,.04);
  --accent:#4f8cff;
  --accent-ink:#06101f;
  --danger:#e24b5f;
}

html[data-theme="light"]{
  --bg:#f6f7fb;
  --card:#ffffff;
  --card2:#f1f4f9;
  --text:#0b1220;
  --muted:#5d6679;
  --border: rgba(10,18,32,.12);
  --chip-bg: rgba(15,23,42,.04);
  --input-bg: rgba(15,23,42,.06);
  --accent:#2563eb;
  --accent-ink:#ffffff;
  --danger:#dc2626;
}

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

a{color:inherit}

.wrap{max-width:1420px;margin:0 auto;padding:26px 18px 64px}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 14px;border:1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  gap:12px;
}
.brand{display:flex;gap:12px;align-items:center;text-decoration:none}
.logo{
  width:36px;height:36px;border-radius: var(--radius-xs);
  background: var(--accent);
  box-shadow: none;
}
.brand b{letter-spacing:.5px}
.brand small{display:block;color:var(--muted);margin-top:2px}

.nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  height: var(--control-h);
  padding:0 12px;
  border-radius: var(--radius-sm);
  border:1px solid var(--border);
  background:var(--chip-bg);
  text-decoration:none;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.chip.sm{height:36px; padding:0 10px; font-size:12px}
.chip:hover{border-color:rgba(127,155,255,.45)}
.chip.active{border-color:rgba(127,155,255,.55); box-shadow: 0 0 0 4px rgba(37,99,235,.12) inset}
.chip.disabled{opacity:.45; pointer-events:none}
.btn{
  cursor:pointer;
  height: var(--control-h);
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: var(--radius-xs);
  border:1px solid rgba(37,99,235,.35);
  background: var(--accent);
  color:var(--accent-ink);font-weight:700;
  transition: filter .18s ease, box-shadow .18s ease;
  box-shadow: none;
}
.btn:hover{filter: brightness(1.05)}
.btn.ghost{
  background:transparent;color:var(--text);
  border:1px solid var(--border);
  font-weight:600;
  box-shadow: none;
}
.btn.sm{height:36px; padding:0 12px; font-weight:650; white-space:nowrap}
.btn.danger{
  background: var(--danger);
  border-color: rgba(220,38,38,.35);
  color: #fff;
}
.btn.danger:hover{filter: brightness(1.03)}

.dangerBox{
  border:1px solid rgba(220,38,38,.25);
  background: rgba(220,38,38,.06);
  border-radius: var(--radius);
  padding:12px;
}
.dangerBox summary{
  cursor:pointer;
  list-style:none;
  font-weight:750;
}
.dangerBox summary::-webkit-details-marker{display:none}

.inline{display:flex; gap:10px; align-items:center}
.inline > *{flex:1}
.inline > .btn{flex:0 0 auto}

@media (max-width: 760px){
  .topbar{flex-wrap:wrap; align-items:flex-start}
  .brand small{display:none}
}

.grid{
  margin-top:18px;
  display:grid;
  grid-template-columns: 1.3fr .7fr;
  gap:16px;
}
@media (max-width: 900px){
  .grid{grid-template-columns:1fr}
}

.card{
  border:1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card .hd{
  padding:16px 18px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:10px;
  border-bottom:1px solid var(--border);
}
.card .hd h1,.card .hd h2{margin:0;font-size:18px;letter-spacing:.2px}
.card .hd p{margin:6px 0 0;color:var(--muted);font-size:13px}
.card .bd{padding:16px 18px}

.kpis{display:grid;grid-template-columns:repeat(3, 1fr);gap:12px}
@media (max-width: 900px){.kpis{grid-template-columns:1fr}}
.kpi{
  padding:14px;border-radius:var(--radius);
  border:1px solid var(--border);
  background: var(--card2);
}
.kpi .label{color:var(--muted);font-size:12px}
.kpi .val{font-size:26px;font-weight:800;margin-top:6px}

.form{display:grid;gap:10px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:8px}
.field input,.field select{
  width:100%;
  height: var(--control-h);
  padding:0 12px;
  border-radius: var(--radius-xs);
  border:1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  outline:none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease, background .18s ease;
}
.field input:hover,.field select:hover{border-color:rgba(127,155,255,.35)}
.field input::placeholder{color:rgba(168,179,207,.75)}
.field input:focus,.field select:focus{
  border-color: rgba(37,99,235,.50);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}
.field input.invalid{
  border-color: rgba(220,38,38,.55);
  box-shadow: 0 0 0 4px rgba(220,38,38,.12);
}

/* кастомный select */
.field select{
  /* нативный select без градиентов */
  appearance:auto;
}

/* Custom select (single) with removable tag */
.cselect{
  position:relative;
  width:100%;
}
.cselectNative{
  display:none;
}
.cselectBtn{
  width:100%;
  height: var(--control-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 12px;
  border-radius: var(--radius-xs);
  border:1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  cursor:pointer;
}
.cselectBtn:hover{border-color:rgba(37,99,235,.35)}
.cselectBtn:focus{outline:none; border-color: rgba(37,99,235,.50); box-shadow: 0 0 0 4px rgba(37,99,235,.12)}
.cselectLeft{display:flex; align-items:center; gap:10px; min-width:0}
.cselectPlaceholder{
  color: var(--muted);
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cselectValue{
  font-size:13px;
  font-weight:650;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 100%;
}
.cselectClear{
  border:none;
  background:transparent;
  color: var(--muted);
  cursor:pointer;
  font-size:16px;
  line-height:1;
  padding:0 2px;
}
.cselectClear:hover{color: var(--text)}
.cselectChevron{
  width:10px;height:10px;
  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);
  transform: rotate(45deg);
  margin-right:2px;
}
.cselect.open .cselectChevron{transform: rotate(-135deg); margin-top:4px}

.cselectMenu{
  position:absolute;
  left:0; right:0;
  top: calc(100% + 6px);
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  z-index: 50;
  max-height: 280px;
  overflow:auto;
  display:none;
}
.cselect.open .cselectMenu{display:block}
.cselectOpt{
  padding:10px 12px;
  cursor:pointer;
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.cselectOpt:hover{background: var(--card2)}
.cselectOpt.selected{
  background: rgba(37,99,235,.10);
}
.cselectOpt .mark{
  color: var(--muted);
  font-weight:800;
}

/* file input */
.field input[type="file"]{
  padding:10px 12px;
}
.field input[type="file"]::file-selector-button{
  margin-right:12px;
  border:1px solid rgba(37,99,235,.35);
  background: var(--accent);
  color:var(--accent-ink);
  font-weight:800;
  border-radius: var(--radius-xs);
  padding:9px 12px;
  cursor:pointer;
}
.field input[type="file"]::file-selector-button:hover{
  filter: brightness(1.05);
}

.hint{color:var(--muted);font-size:12px;line-height:1.4}

.checks{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:2px;
}
.check{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background: var(--card2);
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.check:hover{border-color:rgba(37,99,235,.35); transform: translateY(-1px)}
.check:active{transform: translateY(0px)}
.check input{position:absolute; opacity:0; pointer-events:none}
.check .box{
  width:18px;height:18px;border-radius:6px;
  border:1px solid var(--border);
  background: var(--input-bg);
  display:grid;place-items:center;
  box-shadow: 0 0 0 0 rgba(124,92,255,.0);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.check .box::after{
  content:"";
  width:10px;height:10px;border-radius:4px;
  background: var(--accent);
  transform: scale(0);
  transition: transform .14s ease;
}
.check input:checked + .box{
  border-color: rgba(37,99,235,.50);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}
.check input:checked + .box::after{transform: scale(1)}
.check .txt{font-size:13px;color:var(--text); font-weight:650}
.err{
  border:1px solid rgba(220,38,38,.25);
  background: rgba(220,38,38,.08);
  color: var(--text);
  padding:10px 12px;border-radius:14px;
}
.ok{
  border:1px solid rgba(22,163,74,.25);
  background: rgba(22,163,74,.08);
  color: var(--text);
  padding:10px 12px;border-radius:14px;
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background: var(--card);
}
.table th,.table td{
  padding:10px 10px;
  border-bottom:1px solid var(--border);
  vertical-align:top;
}
/* старые правила ширин — только для обычных таблиц (не списка размещений) */
.table:not(.placementsTable) td:nth-child(1),
.table:not(.placementsTable) th:nth-child(1){white-space:nowrap; width:120px}
.table:not(.placementsTable) td:nth-child(4),
.table:not(.placementsTable) th:nth-child(4){white-space:nowrap}

.thlink{
  display:inline-flex; gap:8px; align-items:center;
  text-decoration:none;
}
.thlink .mark{opacity:.7}
.thlink:hover{opacity:.92; text-decoration:underline}

.hot{
  color:#ffd6dd;
  text-shadow: 0 0 24px rgba(255,77,109,.25);
}
.table tr:last-child td{border-bottom:none}
.table tbody tr:hover td{background: var(--card2)}
.placementsTable tr.selected td{background: rgba(37,99,235,.10)}

.placementsTable td.col-date, .placementsTable th.col-date{white-space:nowrap; width:120px}
.placementsTable td.col-money, .placementsTable th.col-money{white-space:nowrap}
.placementsTable td.col-check, .placementsTable th.col-check{width:44px; text-align:center}
.placementsTable td.col-open, .placementsTable th.col-open{white-space:nowrap; width:96px}
.placementsTable td.col-act, .placementsTable th.col-act{white-space:nowrap; width:140px}
.placementsTable td.col-actd, .placementsTable th.col-actd{white-space:nowrap; width:120px}
.placementsTable td.col-actm, .placementsTable th.col-actm{min-width:200px}

.clientText{
  white-space:nowrap;
}
.creativeCell{
  display:flex;
  gap:8px;
  flex-direction:column;
}
.creativeName{
  font-weight:700;
  line-height:1.25;
}
.creativeBadges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.miniCheck{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px; height:22px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  cursor:pointer;
}
.miniCheck input{position:absolute; opacity:0; pointer-events:none}
.miniCheck span{
  width:10px; height:10px; border-radius:4px;
  background: var(--accent);
  transform: scale(0);
  transition: transform .12s ease;
}
.miniCheck input:checked + span{transform: scale(1)}

.bulkBar{
  display:flex;
  gap:12px;
  align-items:flex-end;
  justify-content:space-between;
  padding:12px 12px;
  border:1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius);
  margin-bottom:12px;
  position: sticky;
  top: 12px;
  z-index: 20;
  box-shadow: var(--shadow);
}
.bulkLeft{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.bulkRight{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.bulkRight .field label{font-size:11px; letter-spacing:.05em}
.table th{
  text-align:left;
  font-size:12px;
  color:var(--muted);
  letter-spacing:.35px;
  font-weight:700;
}
.table td{font-size:13px}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:4px 10px;border-radius:999px;
  border:1px solid var(--border);
  background: var(--chip-bg);
  font-size:12px;color:var(--text);
}
.badge.y{border-color:rgba(37,99,235,.35); color:var(--text)}
.badge.g{border-color:rgba(22,163,74,.35); color:var(--text)}
.badge.r{border-color:rgba(220,38,38,.35); color:var(--text)}

.filters{
  display:grid;
  grid-template-columns: 1fr 140px 170px auto;
  gap:10px;
  align-items:end;
}
@media (max-width: 900px){
  .filters{grid-template-columns:1fr}
}

.footerNote{margin-top:18px;color:var(--muted);font-size:12px}

.pager{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.pagerNav{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.dots{color:rgba(168,179,207,.7); padding:0 2px}

.combo{position:relative}
.comboInput{
  width:100%;
}

/* чтобы иконка select не мешала datalist-инпуту */
input[list]{background-image:none !important; padding-right:12px !important}

.clientMeta{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.clientMeta .muted{opacity:.7; font-weight:650}

.clientTitle{
  margin-top:6px;
  display:flex;
  gap:10px;
  align-items:center;
}

/* Новый “стройный” фильтр-бар */
.filterBar{
  display:grid;
  grid-template-columns: 2.2fr 170px 190px auto;
  gap:12px;
  align-items:end;
}
@media (max-width: 1020px){
  .filterBar{grid-template-columns:1fr; align-items:stretch}
}
.filterActions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
}

.filterBarWide{
  display:grid;
  /* Авто-адаптивная сетка: не уезжает вправо, а переносит поля */
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap:12px;
  align-items:end;
}
.filterBarWide .filterActions{
  grid-column: 1 / -1;
  justify-content:flex-end;
}
.filterBarWide .field.wide{
  grid-column: span 2;
}
@media (max-width: 720px){
  .filterBarWide .field.wide{grid-column: span 1}
}

/* Разделители/структура в карточке */
.section{
  border-top:1px solid var(--border);
  padding-top:18px;
  margin-top:18px;
}
.section:first-child{border-top:none;padding-top:0;margin-top:0}
.sectionTitle{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin:2px 0 10px;
}

.tableWrap{
  overflow:auto;
  border-radius:var(--radius);
}
.row{
  display:grid;
  gap:12px;
}
.row.cols-4{grid-template-columns: 1.2fr 240px 200px 200px}
.row.cols-3{grid-template-columns: 240px 240px 1fr}
.row.cols-2{grid-template-columns: 1fr 1fr}
@media (max-width: 1020px){
  .row.cols-4,.row.cols-3,.row.cols-2{grid-template-columns:1fr}
}