/* Avito Phone Queue — рабочее место оператора.
   Только локальный CSS: внешних шрифтов и CDN нет (закрытый контур). */

:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --border: #d8dce3;
  --border-soft: #e8ebef;
  --text: #1c2430;
  --muted: #6b7684;

  --accent: #1f5fd6;
  --accent-dark: #17489f;

  --green: #157f3d;
  --green-bg: #e2f6e8;
  --yellow: #8a6100;
  --yellow-bg: #fff3d4;
  --red: #b3261e;
  --red-bg: #fde8e6;
  --grey: #5b636d;
  --grey-bg: #e7e9ec;

  --radius: 6px;
  --font: -apple-system, "Segoe UI", "Liberation Sans", Arial, sans-serif;
  --mono: "Consolas", "DejaVu Sans Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.4;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0 0 8px; font-weight: 600; }
h1 { font-size: 20px; }
h2 { font-size: 15px; }
h3 { font-size: 13px; }

.muted { color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: 18px !important; }

/* ---------------------------------------------------------------- Шапка */

.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 16px;
  height: 46px;
  background: #1c2430;
  color: #f2f4f7;
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar__brand {
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  letter-spacing: .2px;
  white-space: nowrap;
}
.topbar__brand:hover { text-decoration: none; opacity: .85; }

.topbar__nav { display: flex; gap: 4px; flex: 1; }

.topbar__nav a {
  color: #c7cdd6;
  padding: 5px 10px;
  border-radius: var(--radius);
  white-space: nowrap;
}
.topbar__nav a:hover { background: #2a3442; color: #fff; text-decoration: none; }
.topbar__nav a.is-active { background: #35415290; color: #fff; box-shadow: inset 0 -2px 0 var(--accent); }

.topbar__user { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.topbar__name { color: #f2f4f7; font-weight: 600; white-space: nowrap; }
.topbar__logout { color: #c7cdd6; padding: 5px 8px; border-radius: var(--radius); }
.topbar__logout:hover { background: #2a3442; color: #fff; text-decoration: none; }

.badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  white-space: nowrap;
}
.badge--role { background: #35415a; color: #dfe6f3; }
.badge--muted { background: #3a3a3a; color: #d6c48a; }
.badge--on { background: #23503a; color: #b9f0cf; }

/* ----------------------------------------------------------- Страница */

.page { padding: 14px 16px 40px; }
.page__title { margin-bottom: 4px; }
.page__subtitle { margin: 0 0 14px; color: var(--muted); }

.flash {
  padding: 9px 12px;
  border-radius: var(--radius);
  margin-bottom: 12px;
  border: 1px solid transparent;
}
.flash--ok { background: var(--green-bg); border-color: #b6e0c4; color: #10552b; }
.flash--error { background: var(--red-bg); border-color: #f0bdb8; color: #8d1d17; }
.flash--warn { background: var(--yellow-bg); border-color: #ecd398; color: #6d4c00; }
.flash--info { background: #e4eefc; border-color: #b9d2f5; color: #163f80; }

.footnote { color: var(--muted); margin: 10px 0 0; }

/* ------------------------------------------------------------- Кнопки */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: #f0f2f5; text-decoration: none; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); }
.btn--warn { background: #c97a00; border-color: #c97a00; color: #fff; }
.btn--warn:hover { background: #a86600; }
.btn--ghost { background: transparent; color: var(--muted); }
.btn--ghost:hover { background: #eceef1; color: var(--text); }
.btn--wide { width: 100%; }
.btn--mini { padding: 3px 8px; font-size: 12px; font-weight: 500; }

.btn--start {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 12px 46px;
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  border-radius: 8px;
}
.btn--start:hover { background: #11662f; }

/* --------------------------------------------------------- Start-блок */

.startbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
}
.startbar__form { display: flex; align-items: center; gap: 14px; }
.startbar__hint { margin: 0; color: var(--muted); max-width: 640px; }
.check--start { font-size: 13px; }

/* ------------------------------------------------------------ Метрики */

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.metrics--strip { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }

.metric {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.metric__value { font-size: 22px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.metric__label { color: var(--muted); font-size: 12px; }
.metric--wide { grid-column: span 2; }
.metric--accent { border-color: #b9d2f5; background: #f4f8ff; }
.metric--green { border-left: 3px solid var(--green); }
.metric--green .metric__value { color: var(--green); }
.metric--red { border-left: 3px solid var(--red); }
.metric--red .metric__value { color: var(--red); }

/* ---------------------------------------------------- Фильтры и поиск */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  white-space: nowrap;
}
.chip:hover { background: #eceef1; text-decoration: none; }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

.searchbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.searchbar__input { min-width: 260px; }
.searchbar__select { min-width: 200px; max-width: 320px; }

/* ------------------------------------------------------------ Таблица */

.table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Главная таблица прокручивается внутри себя, поэтому шапка столбцов
   остаётся видимой при длинной очереди. */
.table-wrap--sticky {
  overflow: auto;
  max-height: calc(100vh - 262px);
  min-height: 240px;
}

.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.grid th {
  position: sticky;
  top: 0;
  background: #eef0f3;
  text-align: left;
  font-weight: 600;
  color: #454f5c;
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  z-index: 5;
}

.grid td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}

.grid tbody tr:hover { background: #f7f9fb; }
.grid--compact th { position: static; }
.grid--compact td, .grid--compact th { padding: 4px 8px; }

.row--duplicate { background: #fffaf0; }
.row--muted { opacity: .6; }
.row--error { background: #fdf1f0; }

.col-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.col-num a { font-variant-numeric: tabular-nums; }
.col-time { white-space: nowrap; font-variant-numeric: tabular-nums; color: #40495a; }
.col-title { min-width: 220px; max-width: 320px; }
.col-address { min-width: 160px; max-width: 240px; }
.col-params { min-width: 150px; }
.col-phone { white-space: nowrap; }
.col-actions { white-space: nowrap; }
.col-actions form { display: inline; }

.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; white-space: normal; }
.inline-phone { display: inline-flex; align-items: center; gap: 4px; }
.inline-phone__input {
  width: 128px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 12px;
}
.inline-phone__input:focus { outline: 2px solid #aecbf5; outline-offset: -1px; border-color: var(--accent); }

.col-auto-fetch { white-space: normal; min-width: 180px; }
.inline-auto-fetch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.inline-auto-fetch__interval {
  width: 64px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 12px;
}
.auto-fetch-status { margin-top: 4px; font-size: 11px; }

.link-strong { font-weight: 600; }
.link-ext::after { content: " ↗"; font-size: 10px; color: var(--muted); }

.priority {
  display: inline-block;
  min-width: 34px;
  padding: 1px 5px;
  border-radius: 3px;
  background: #eef0f3;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.phone { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .2px; }
.phone--mask { font-weight: 500; color: #40495a; }

/* ---------------------------------------- Таймер (п. 5.5 PRD) */

.timer {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  border-left: 3px solid transparent;
}
.timer__value { display: block; line-height: 1.15; }
.timer__note { display: block; font-family: var(--font); font-size: 10px; font-weight: 500; line-height: 1.2; }

.timer--green { background: var(--green-bg); color: var(--green); border-left-color: var(--green); }
.timer--yellow { background: var(--yellow-bg); color: var(--yellow); border-left-color: #d79f00; }
.timer--red { background: var(--red-bg); color: var(--red); border-left-color: var(--red); }
.timer--expired { background: var(--grey-bg); color: var(--red); border-left-color: var(--grey); }
.timer--expired .timer__note { color: var(--grey); }
.timer--none { color: var(--muted); font-weight: 500; }

.bigtimer {
  display: block;
  text-align: center;
  padding: 14px 10px;
  border: 1px solid var(--border);
  border-left-width: 5px;
  border-radius: var(--radius);
}
.bigtimer .timer__value { font-size: 52px; line-height: 1; letter-spacing: 1px; }
.bigtimer .timer__note { font-size: 12px; margin-top: 6px; }

/* -------------------------------------------------- Статусы и метки */

.pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  white-space: nowrap;
  background: var(--grey-bg);
  color: #3d454f;
}
.pill--active { background: var(--green-bg); color: var(--green); }
.pill--expired { background: var(--red-bg); color: var(--red); }
.pill--unavailable { background: var(--yellow-bg); color: var(--yellow); }
.pill--invalid { background: var(--yellow-bg); color: var(--yellow); }
.pill--do_not_call { background: #3d454f; color: #fff; }
.pill--none { background: transparent; color: var(--muted); }
.pill--queue { background: #e6edf9; color: #274b87; }

.tag {
  display: inline-block;
  padding: 0 5px;
  border-radius: 3px;
  font-size: 10px;
  background: #eef0f3;
  color: #4a535f;
  white-space: nowrap;
}
.tag--warn { background: var(--yellow-bg); color: var(--yellow); }
.tag--danger { background: var(--red-bg); color: var(--red); }
.tag--seller-private { background: var(--green-bg); color: var(--green); }
.tag--seller-likely_private { background: #eaf5ed; color: #2e6b45; }
.tag--seller-needs_review { background: var(--yellow-bg); color: var(--yellow); }
.tag--seller-likely_agent { background: #f3ece4; color: #7a5321; }
.tag--seller-agency { background: var(--grey-bg); color: #4a535f; }
.tag--seller-excluded { background: #e2e4e7; color: var(--muted); }

/* ------------------------------------------- Карточка оператора */

.card-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.card-head__title { flex: 1 1 340px; margin: 0; }
.card-head__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.back { color: var(--muted); white-space: nowrap; }

.work { display: grid; grid-template-columns: 340px 1fr; gap: 12px; align-items: start; }
.work__side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 58px; }
.work__main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.panel__title { margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-soft); }
.panel__subtitle { margin: 14px 0 6px; color: #3d454f; }
.panel__hint { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.panel__hint--warn { color: #8a6100; }
.panel--timer { padding-top: 12px; }

.bigphone {
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1px;
  margin: 4px 0 2px;
  word-break: break-all;
}

.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }

.description { margin: 0; white-space: pre-line; color: #333c48; max-height: 260px; overflow: auto; }

.facts { display: grid; grid-template-columns: 140px 1fr; gap: 3px 10px; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.facts dd .muted { display: block; font-size: 11px; }
.facts__accent { font-size: 16px; font-weight: 700; }
.facts--tight { grid-template-columns: 90px 1fr; margin: 6px 0 10px; font-size: 12px; }

/* ---------------------------------------------------------- Формы */

.form { margin: 0; }
.form--stack { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.form--grid { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 10px; }

.field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.field--wide { grid-column: span 2; }
.field--full { grid-column: 1 / -1; }
.field--checks { flex-direction: row; gap: 18px; align-items: center; }
.field__label { color: var(--muted); font-size: 12px; }

.field__input {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  font: inherit;
  width: 100%;
  min-width: 0;
}
.field__input:focus { outline: 2px solid #aecbf5; outline-offset: -1px; border-color: var(--accent); }
textarea.field__input { resize: vertical; }

.check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.check input { width: 15px; height: 15px; margin: 0; }

.panel--result { border-color: #b9d2f5; }

/* --------------------------------------------------------- Вкладки */

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.tab {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}
.tab:hover { background: #eceef1; text-decoration: none; }
.tab--link { border-style: dashed; color: var(--accent); }

.panel + .panel { margin-top: 12px; }

/* ------------------------------------------------------------ Вход */

.login {
  max-width: 340px;
  margin: 8vh auto 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
}
.login__title { margin-bottom: 2px; }
.login__hint { margin: 0 0 16px; color: var(--muted); }
.login__form { display: flex; flex-direction: column; gap: 12px; }
.login__note { margin: 16px 0 0; color: var(--muted); font-size: 11px; }

/* ------------------------------------------------------- Адаптив */

@media (max-width: 1400px) {
  .work { grid-template-columns: 300px 1fr; }
  .form--grid { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
}

@media (max-width: 1280px) {
  body { font-size: 12.5px; }
  .grid { font-size: 11.5px; }
  .grid td, .grid th { padding: 4px 6px; }
  .metric__value { font-size: 19px; }
  .searchbar__input { min-width: 180px; }
  .searchbar__select { min-width: 150px; }
  .bigtimer .timer__value { font-size: 44px; }
  .bigphone { font-size: 25px; }
}

@media (max-width: 1024px) {
  .work { grid-template-columns: 1fr; }
  .work__side { position: static; }
  .columns { grid-template-columns: 1fr; }
  .form--grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .topbar { gap: 10px; }
  .startbar { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 720px) {
  .form--grid { grid-template-columns: 1fr; }
  .field--wide, .field--full { grid-column: 1 / -1; }
  .facts { grid-template-columns: 1fr; }
  .facts dt { margin-top: 6px; }
  .topbar { flex-wrap: wrap; height: auto; padding: 6px 10px; }
  .grid th { position: static; }
}

@media print {
  .topbar, .startbar, .toolbar, .tabs, .btn { display: none !important; }
}