/* ===================================================================
   Pending MediaAds — Global Styles
   File: /css/style.css
   =================================================================== */

/* -------------------- CSS variables & themes -------------------- */
:root{
  /* light */
  --bg: #f5f7fb;
  --text: #1a1f2b;
  --muted: #64748b;

  --surface: #ffffff;
  --surface-2: #f1f4f9;

  --border: #e3e8ef;

  --primary: #2f6ff4;
  --primary-600:#1f5ee6;
  --secondary: #aeb7c5;
  --secondary-600:#9099a8;

  --danger: #dc3545;

  --radius: 12px;
  --radius-sm: 10px;

  --shadow-1: 0 8px 20px rgba(0,0,0,.08);
  --shadow-2: 0 22px 52px rgba(0,0,0,.18);
}

/* ТЁМНАЯ ТЕМА */
html[data-theme="dark"],
body[data-theme="dark"]{
  --bg: #2F323B;
  --text: #e3e6ee;
  --muted: #c3c8d1;

  --surface: #3A3D46;
  --surface-2: #343944;

  --border: #424858;

  /* зелёный акцент */
  --primary: #26771a;
  --primary-600:#1e5f15;

  --secondary: #484e5b;
  --secondary-600:#3f4551;

  --danger:#ef476f;

  --shadow-1: 0 8px 28px rgba(0,0,0,.45);
  --shadow-2: 0 24px 60px rgba(0,0,0,.55);
}

/* Доп. классы (если где-то нужна завязка на тему) */
.is-dark{ }
.is-light{ }

/* -------------------- Base -------------------- */
*,
*::before,
*::after{ box-sizing: border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{ color:#e3e6ee; text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{ max-width:1200px; margin:0 auto; padding:0 16px; }

/* Utilities */
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.text-muted{ color:var(--muted); }
.noselect{ user-select:none !important; }

/* -------------------- Buttons (robust via CSS custom properties) -------------------- */
.btn{
  /* размеры и форма */
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 14px; border-radius:10px; border:1px solid transparent;
  font-weight:600; cursor:pointer; user-select:none; transition:.15s ease;

  /* цвета через переменные: варианты ниже меняют только их */
  background: var(--btn-bg, #206555);  /* базово — тёмно-зелёный */
  color:      var(--btn-fg, #fff);
}
.btn:hover{ filter:brightness(1.05); }
.btn:active{ transform: translateY(1px); }
.btn.small{ height:28px; padding:0 10px; font-size:13px; }

/* Варианты */
.btn-primary{      --btn-bg: var(--primary);     --btn-fg:#fff; }
.btn-primary:hover{--btn-bg: var(--primary-600); }

.btn-secondary{    --btn-bg: var(--secondary);   --btn-fg:#fff; }
.btn-secondary:hover{ --btn-bg: var(--secondary-600); }

.btn-danger{       --btn-bg: #d43f3a;            --btn-fg:#fff; }
.btn-danger:hover{ --btn-bg: #c9302c; }

.btn-success{      --btn-bg: #5cb85c;            --btn-fg:#fff; }
.btn-success:hover{--btn-bg: #4cae4c; }

.btn-back{         --btn-bg: darkcyan;           --btn-fg:#fff; }
.btn-back:hover{   --btn-bg: #008b8b; }

.btn-success-dark{ --btn-bg: #206555;            --btn-fg:#fff; } /* Edit */
.btn-success-dark:hover{ --btn-bg:#1b4f45; }

/* -------------------- Inputs -------------------- */
.form-control,
textarea.form-control,
select.form-control{
  width:100%;
  height:40px;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  outline:0;
  transition: border .15s ease, background .15s ease, box-shadow .15s ease;
}

textarea.form-control{ min-height:80px; resize:vertical; }

.form-control:focus,
textarea.form-control:focus,
select.form-control:focus{
  border-color: var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

/* === Fix для compact-select: текст не уезжает под стрелку === */
select.form-control{ padding-right:8px; }
select.form-control.pr-lg{ padding-right:8px; }
.modal select.form-control{ padding-right:8px; }

/* -------------------- Cards -------------------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
}

/* -------------------- Table (sheet-like) -------------------- */
.table-box{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  overflow:auto;
  box-shadow:var(--shadow-1);
}

table.sheet{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
  font-size:13px;
}

.sheet thead th{
  position:sticky; top:0; z-index:1;
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
  padding:8px 10px;
  text-align:left; font-weight:700;
}

.sheet tbody td{
  padding:6px 10px;
  border-bottom:1px solid var(--border);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* чуть более явный hover строки */
.sheet tbody tr:hover td{
  background: color-mix(in oklab, var(--surface-2), #ffffff 7%);
  outline: 1px solid color-mix(in oklab, var(--text), transparent 75%);
}
@supports not (background: color-mix(in oklab, #000, #fff)){
  .sheet tbody tr:hover td{ background: rgba(255,255,255,.04); outline:1px solid rgba(255,255,255,.08); }
}

/* === Priority highlight (универсально для всех таблиц .sheet) === */
.sheet tbody tr.row-priority td{
  background: color-mix(in oklab, #009292, transparent 85%);
}
.sheet tbody tr.row-priority:hover td{
  background: color-mix(in oklab, #009292, transparent 78%);
}
@supports not (color-mix: red, blue){
  .sheet tbody tr.row-priority td{ background: rgba(0,146,146,.15); }
  .sheet tbody tr.row-priority:hover td{ background: rgba(0,146,146,.22); }
}

/* Заголовок с кнопкой фильтра */
th .flt-btn{
  float:right; padding:0 4px; margin-left:6px;
  opacity:.75; cursor:pointer; user-select:none;
}
th .flt-btn:hover{ opacity:1; }

/* -------------------- Filter popover -------------------- */
.flt{
  position:fixed; z-index:2000; display:none;
  width:280px; max-height:70vh; overflow:auto;
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:10px; box-shadow:var(--shadow-2);
  transform: translateY(-4px); opacity:0; transition:.12s ease;
  overscroll-behavior: contain; /* не пробиваемся прокруткой наружу */
}
.flt.open{ opacity:1; transform: translateY(0); }

.flt h4{ margin:0 0 6px 0; font-size:13px; }
.flt .s{
  width:100%; height:30px; margin:6px 0 8px;
  padding:4px 8px; font-size:12px;
  border-radius:8px; border:1px solid var(--border);
  background:var(--surface-2);
}

.flt .list{
  max-height:240px; overflow:auto;
  border:1px solid var(--border); border-radius:8px;
  padding:6px; background:var(--surface-2);
  overscroll-behavior: contain; /* защищаемся от «прокрутки-сквозь» */
}
.flt .item{
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; border-radius:6px; cursor:pointer;
}
.flt .item:hover{ background:var(--surface); }
.flt .item input{ margin:0; }
.flt .act{ display:flex; justify-content:space-between; margin-top:10px; }

/* -------------------- Modal -------------------- */
.back{
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  display:none; align-items:center; justify-content:center;
  z-index:3000;
}
.modal{
  width:min(940px, calc(100vw - 32px));
  max-height:90vh; overflow:auto;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  box-shadow:var(--shadow-2);
}

/* -------------------- Grid helpers -------------------- */
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:8px; }
.span1{ grid-column:span 1; } .span2{ grid-column:span 2; }
.span3{ grid-column:span 3; } .span4{ grid-column:span 4; }
.span6{ grid-column:span 6; } .span12{ grid-column:span 12; }

/* -------------------- Status dot -------------------- */
.status-dot{
  width:10px; height:10px; border-radius:50%;
  border:1px solid #0004; display:inline-block; margin-right:6px;
}

/* -------------------- Misc -------------------- */
.header-actions{ display:flex; gap:.5rem; }
.table-responsive{ width:100%; overflow:auto; }

/* -------------------- Page header (optional) -------------------- */
.page-title{ margin:0; font-size:22px; font-weight:800; }

/* -------------------- Forms layout niceties -------------------- */
label{ display:block; margin:2px 0 6px; font-weight:600; font-size:12px; color:var(--muted); }

/* -------------------- Pagination buttons -------------------- */
.pager{ display:flex; gap:.4rem; justify-content:flex-end; margin-top:.6rem; }
.pager .btn{ min-width:36px; text-align:center; }

/* -------------------- Deals BM: Aff IDs clamp fix -------------------- */
/* Ячейка остаётся table-cell, а обрезка в 2 строки в дочернем элементе */
table.sheet#deals-bm td.col-affids{
  white-space: normal;
  word-break: break-word;
  display: table-cell !important;
  vertical-align: middle;
}
table.sheet#deals-bm td.col-affids .clamp-2{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}