/* =========================================================
   VoiceCRM — Global Styles (light/dark + polish + motion)
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
  /* Цвета */
  --bg: #f8fafc;
  --panel: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --line: #e2e8f0;

  --brand-1: #6366f1; /* indigo */
  --brand-2: #22d3ee; /* cyan */

  --ok-bg: #ecfdf5;  --ok: #065f46;  --ok-dot: #10b981;
  --warn-bg:#fffbeb; --warn:#92400e; --warn-dot:#f59e0b;
  --bad-bg:#fef2f2;  --bad:#991b1b;  --bad-dot:#ef4444;

  /* Радиусы/тени/зазоры */
  --r-s: 10px; --r-m: 14px; --r-l: 18px; --r-xl: 22px;
  --shadow-1: 0 6px 18px rgba(15,23,42,.06);
  --shadow-2: 0 12px 32px rgba(2,6,23,.05);
  --gap: 24px; --gap-s: 12px;

  --container: 1280px;
}

/* Dark theme */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220;
    --panel:#0f172a;
    --text:#e5e7eb;
    --muted:#94a3b8;
    --line:#1f2937;

    --shadow-1: 0 10px 24px rgba(0,0,0,.35);
    --shadow-2: 0 16px 40px rgba(0,0,0,.45);
  }
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-size:16px; line-height:1.5;
  color:var(--text); background:var(--bg);
}
a{color:inherit; text-decoration:none}
a:focus-visible, button:focus-visible{outline:2px solid var(--brand-2); outline-offset:2px}
img{max-width:100%; display:block}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,"Liberation Mono","Courier New", monospace}

/* ---------- Layout ---------- */
.container{max-width:var(--container); margin:0 auto; padding:0 16px}

/* Header / Navbar (совместимо с текущим HTML) */
header{
  position:sticky; top:0; z-index:20;
  backdrop-filter: saturate(180%) blur(8px);
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  border-bottom:1px solid var(--line);
}
header .nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px}
.brand-badge{width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg,var(--brand-1),var(--brand-2)); box-shadow:var(--shadow-1)}
.menu{display:flex; gap:14px; flex-wrap:wrap}
.menu a{padding:8px 12px; border-radius:var(--r-s); transition:background .2s ease}
.menu a:hover{background: color-mix(in oklab, var(--panel) 70%, var(--line))}

/* Hero */
.hero{padding:56px 0 8px}
.hero h1{margin:0 0 10px; font-size:clamp(24px, 3vw, 40px); letter-spacing:-.02em}
.hero p{margin:0; color:var(--muted)}
.cta-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:var(--r-m);
  border:1px solid var(--line); background:var(--panel);
  cursor:pointer; transition: box-shadow .2s ease, transform .04s ease, background .2s ease;
}
.btn:hover{box-shadow:var(--shadow-1)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:#111827; color:#fff; border-color:#111827}
@media (prefers-color-scheme: dark){
  .btn.primary{background:#0b1324; border-color:#0b1324}
}

/* Grid */
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap)}
.col-12{grid-column:span 12}
.col-4{grid-column:span 4}
@media (max-width:1024px){ .col-4{grid-column:span 6} }
@media (max-width:720px){ .col-4{grid-column:span 12} }

/* Cards */
.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-l); padding:20px; box-shadow:var(--shadow-1);
  display:flex; flex-direction:column; gap:12px; height:100%;
  animation: cardIn .5s ease both;
}
.card h3{margin:0; font-size:19px; letter-spacing:-.01em}
.muted{color:var(--muted); font-size:14px}
.kvs{display:flex; gap:12px; flex-wrap:wrap; font-size:13px; color:#334155}
.kvs .kv{
  background: color-mix(in oklab, var(--brand-1) 6%, var(--bg));
  border:1px solid color-mix(in oklab, var(--brand-1) 18%, var(--line));
  padding:6px 10px; border-radius:var(--r-s);
}
.actions{margin-top:auto; display:flex; flex-wrap:wrap; gap:8px}

/* Status pill */
.status{
  align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:13px; padding:4px 10px; border-radius:999px;
  background:#f1f5f9; color:#334155; border:1px solid var(--line);
}
.dot{width:8px; height:8px; border-radius:50%}
.up{background:var(--ok-bg); color:var(--ok); border-color: color-mix(in oklab, var(--ok-bg) 60%, var(--line))}
.up .dot{background:var(--ok-dot)}
.warn{background:var(--warn-bg); color:var(--warn); border-color: color-mix(in oklab, var(--warn-bg) 60%, var(--line))}
.warn .dot{background:var(--warn-dot)}
.down{background:var(--bad-bg); color:var(--bad); border-color: color-mix(in oklab, var(--bad-bg) 60%, var(--line))}
.down .dot{background:var(--bad-dot)}

/* Footer */
footer{margin:32px 0 24px; color:var(--muted); font-size:13px}

/* ---------- Reports/Telephony legacy blocks (совместимость) ---------- */
.site-header{ text-align:center; padding:20px 0; background:var(--panel); box-shadow:var(--shadow-1)}
.site-header h1{ margin:0; font-weight:700; font-size:2rem}
.site-header .subtitle{ margin:0; color:var(--muted); font-size:1rem}

nav.main-menu{
  background:var(--panel);
  padding:15px; border-bottom:1px solid var(--line); box-shadow:var(--shadow-1);
  text-align:center; position:sticky; top:0; z-index:19;
}
nav.main-menu ul{display:inline-flex; list-style:none; margin:0; padding:0; gap:22px}
nav.main-menu a{font-weight:600; font-size:1.05rem; transition:opacity .2s ease}
nav.main-menu a:hover{opacity:.85}

.module-list{display:inline-flex; gap:1rem; list-style:none; padding:0; margin-top:1rem}
.module-button{
  display:flex; align-items:center; gap:.5rem; padding:1rem 1.4rem;
  background:#2a3f54; color:#fff; border-radius:var(--r-s);
  transition:transform .06s ease, box-shadow .2s ease;
}
.module-button:hover{transform:translateY(-1px); box-shadow:var(--shadow-1)}

.block, .filters.block, .metrics.block, .table-section.block{
  background:var(--panel); padding:1rem; margin-bottom:1rem;
  border-radius:var(--r-m); box-shadow:var(--shadow-1); border:1px solid var(--line);
}
.filters.block label{display:inline-block; margin-right:1rem}
.filter-actions button{margin-right:.5rem}

.metrics .card{display:inline-block; width:calc(20% - 1rem); margin-right:1rem; padding:1rem; background: color-mix(in oklab, var(--bg) 75%, var(--panel)); border-radius:var(--r-s); text-align:center}
.metrics .card:last-child{margin-right:0}

.table-section table{width:100%; border-collapse:collapse}
.table-section th,.table-section td{padding:.6rem; border:1px solid var(--line); text-align:left}

.hint-card{padding:.5rem; margin-bottom:.5rem; background:#e0f2fe; border-radius:var(--r-s)}

/* ---------- Responsive tweaks ---------- */
@media (max-width:600px){
  nav.main-menu ul{flex-direction:column; gap:10px}
  .module-list, .metrics .card{display:block; width:100%; margin:0 0 1rem 0}
}
@media (prefers-color-scheme: dark){
  .module-button{background:#334455}
  .module-button:hover{background:#223344}
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* ---------- Keyframes ---------- */
@keyframes cardIn{
  from{opacity:0; translate:0 6px} to{opacity:1; translate:0 0}
}

/* Улучшаем UX на очень узких экранах */
@media (max-width: 480px){
  .hero{ padding: 28px 0 4px; }
  .hero h1{ font-size: 22px; }
  .hero p{ font-size: 14px; }
  .btn{ width: 100%; justify-content: center; }          /* CTA в одну колонку */
  .kvs .kv{ width: 100%; }                                /* бейджи на всю ширину */
  .card{ padding: 16px; border-radius: 16px; }            /* компактнее карточка */
  header .nav{ padding: 10px 0; }
}

/* Чуть увеличим кликабельность на тач-устройствах */
@media (pointer: coarse){
  .btn{ padding: 12px 14px; }                             /* ≥44px по гайдам Apple/Google */
  .menu a{ padding: 10px 14px; }
}

/* --- Glass‑хедер + мягкий градиент фона --- */
header{
  background:
    radial-gradient(1200px 400px at 10% -20%, color-mix(in oklab, var(--brand-2) 8%, transparent), transparent),
    radial-gradient(1200px 400px at 90% -30%, color-mix(in oklab, var(--brand-1) 10%, transparent), transparent)
    ,color-mix(in oklab, var(--bg) 90%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}

/* --- Hover‑микровзаимодействия --- */
.card{ transition: transform .16s ease, box-shadow .2s ease; }
.card:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px rgba(2,6,23,.10); }
.btn{ transition: box-shadow .2s ease, transform .06s ease, background .2s ease; }
.btn:hover{ transform: translateY(-1px); }

/* --- Пилюля со временем ответа поакцентнее --- */
.status.up{ box-shadow: inset 0 0 0 1px rgba(16,185,129,.25); }
.status .label{letter-spacing:.01em}

/* --- Мобильный заголовок чуть компактнее --- */
@media (max-width: 480px){
  .hero h1{ font-size: 24px; }
  .hero p{ font-size: 15px; }
}

/* --- Тёмная тема: чуть больше контраста карточек --- */
@media (prefers-color-scheme: dark){
  .card{ box-shadow: 0 14px 40px rgba(0,0,0,.35); border-color:#1f2937; }
  header{ border-bottom-color:#1f2937; }
}

/* Last-updated badge near section title */
.last-muted{font-size:12px; color:var(--muted); font-weight:500; margin-left:8px}
.pulse{display:inline-block; width:6px; height:6px; border-radius:50%; background:#22c55e; margin-right:6px; vertical-align:middle; animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%{opacity:.4}50%{opacity:1}100%{opacity:.4}}