/* ============================================================
   FUCKWELL CRM — дизайн-система в духе Apple (HIG): системный
   шрифт, приглушённая палитра, крупные скругления, мягкие тени,
   стеклянный сайдбар, пилюльные кнопки, спокойная типографика.
   Имена всех классов/ID сохранены — JS ничего не трогали.
   ============================================================ */

:root, [data-theme="dark"] {
  --bg:#000000; --panel:#1c1c1e; --panel-hover:#2c2c2e; --panel-2:#242426;
  --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.16);
  --text:#f5f5f7; --muted:#98989d; --muted-2:#6e6e73;
  --green:#30d158; --yellow:#ff9f0a; --red:#ff453a; --blue:#0a84ff;
  --btn:#0a84ff; --btn-text:#ffffff; --bar:#48484a;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.35);
  --shadow-sm:0 1px 3px rgba(0,0,0,.4);
  --sidebar-bg:rgba(28,28,30,.72);
  --ease:cubic-bezier(.4,0,.2,1);
}
[data-theme="light"] {
  --bg:#f5f5f7; --panel:#ffffff; --panel-hover:#f5f5f7; --panel-2:#fafafa;
  --border:rgba(0,0,0,.08); --border-strong:rgba(0,0,0,.14);
  --text:#1d1d1f; --muted:#6e6e73; --muted-2:#86868b;
  --green:#248a3d; --yellow:#b25900; --red:#d70015; --blue:#0071e3;
  --btn:#0071e3; --btn-text:#ffffff; --bar:#d2d2d7;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 12px 28px rgba(0,0,0,.08);
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --sidebar-bg:rgba(255,255,255,.72);
  --ease:cubic-bezier(.4,0,.2,1);
}

* { box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body { margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",
    "Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  transition:background .25s var(--ease), color .25s var(--ease); }
button,input,select { font:inherit; color:inherit; }
button { cursor:pointer; -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--blue); color:#fff; }
.app { display:flex; min-height:100vh; }

/* ---------- Сайдбар: стеклянный, с лёгким блюром ---------- */
.sidebar { width:248px; padding:28px 16px; position:fixed; top:0; bottom:0; left:0;
  background:var(--sidebar-bg); backdrop-filter:saturate(180%) blur(24px);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  border-right:1px solid var(--border); z-index:10; }
.logo { font-size:19px; font-weight:700; letter-spacing:-.02em; margin:4px 12px 32px; }
.logo span { color:var(--muted); font-weight:500; }
.nav { display:flex; flex-direction:column; gap:2px; }
.nav a { display:flex; align-items:center; gap:11px; color:var(--muted); padding:10px 14px;
  border-radius:11px; font-size:14.5px; font-weight:500; transition:background .18s var(--ease), color .18s var(--ease); }
.nav a:hover { background:var(--panel-hover); color:var(--text); }
.nav a.active { background:var(--blue); color:#fff; }
.nav-icon { width:20px; display:inline-block; text-align:center; opacity:.9; font-size:15px; }
.sidebar-bottom { position:absolute; bottom:26px; left:24px; right:24px; color:var(--muted-2); font-size:11.5px; line-height:1.5; }

/* ---------- Контент ---------- */
.main { margin-left:248px; width:calc(100% - 248px); padding:36px 44px 60px; max-width:1320px; }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; gap:16px; flex-wrap:wrap; }
.page-title { margin:0; font-size:32px; font-weight:700; letter-spacing:-.03em; }
.page-subtitle { color:var(--muted); margin-top:6px; font-size:14px; line-height:1.5; max-width:640px; }
.date-control { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

select,input {
  background:var(--panel-2); border:1px solid var(--border); color:var(--text);
  border-radius:10px; padding:9px 13px; outline:none; font-size:14px;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease); }
select:focus,input:focus { border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent); }

.primary { border:0; background:var(--btn); color:var(--btn-text); padding:10px 18px;
  border-radius:980px; font-weight:600; font-size:14px; letter-spacing:-.01em;
  transition:opacity .15s var(--ease), transform .1s var(--ease); }
.primary:hover { opacity:.88; }
.primary:active { transform:scale(.97); }
.primary:disabled { opacity:.5; cursor:default; }
.ghost { background:var(--panel-2); border:1px solid var(--border); color:var(--text);
  padding:9px 16px; border-radius:980px; font-size:14px; font-weight:500;
  transition:background .15s var(--ease), border-color .15s var(--ease); }
.ghost:hover { background:var(--panel-hover); border-color:var(--border-strong); }

/* ---------- Статы ---------- */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:28px; }
.stat { background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:22px;
  box-shadow:var(--shadow-sm); transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.stat:hover { transform:translateY(-1px); box-shadow:var(--shadow); }
.stat-label { color:var(--muted); font-size:12.5px; font-weight:500; margin-bottom:12px; letter-spacing:-.01em; }
.stat-value { font-size:32px; font-weight:700; letter-spacing:-.03em; }
.stat-detail { color:var(--muted-2); font-size:12px; margin-top:9px; }

/* ---------- Карточки ---------- */
.grid { display:grid; grid-template-columns:1.35fr 1fr; gap:16px; margin-bottom:20px; }
.card { background:var(--panel); border:1px solid var(--border); border-radius:18px;
  overflow:hidden; box-shadow:var(--shadow-sm); }
.card-header { display:flex; align-items:center; justify-content:space-between; padding:18px 22px;
  border-bottom:1px solid var(--border); }
.card-title { font-size:15.5px; font-weight:650; letter-spacing:-.01em; }
.card-action { color:var(--blue); font-size:12.5px; font-weight:500; }
.muted-sm { color:var(--muted); font-size:12.5px; }
.empty { padding:26px 22px; color:var(--muted); font-size:14px; }

.number-row { display:grid; grid-template-columns:1fr 100px 100px; align-items:center;
  padding:16px 22px; border-bottom:1px solid var(--border); transition:background .15s var(--ease); }
.number-row:last-child { border-bottom:0; }
.number-row:hover { background:var(--panel-hover); }
.person { display:flex; align-items:center; gap:12px; }
.avatar { width:36px; height:36px; border-radius:50%; background:var(--panel-2);
  display:flex; align-items:center; justify-content:center; font-weight:650; font-size:13px; color:var(--muted); }
.person-name { font-weight:600; font-size:14px; letter-spacing:-.01em; }
.person-phone { color:var(--muted); font-size:12px; margin-top:3px; }
.number-value { font-size:18px; font-weight:700; text-align:right; letter-spacing:-.02em; }
.number-caption { color:var(--muted-2); font-size:11px; text-align:right; margin-top:3px; }

.call-row { padding:14px 22px; display:grid; grid-template-columns:95px 1fr 90px 100px; gap:12px;
  align-items:center; border-bottom:1px solid var(--border); transition:background .15s var(--ease); }
.call-row:last-child { border-bottom:0; }
.call-row:hover { background:var(--panel-hover); }
.call-time { color:var(--muted); font-size:13px; }
.call-time small { display:block; font-size:11px; color:var(--muted-2); font-weight:400; margin-top:2px; }
.caller { font-weight:600; font-size:14px; }
.caller small { display:block; color:var(--muted); font-weight:400; margin-top:4px; }
.call-duration { color:var(--muted); text-align:right; font-size:13px; font-variant-numeric:tabular-nums; }
.status { text-align:right; font-size:12px; font-weight:650; }
.status.ok { color:var(--green); }
.status.missed { color:var(--red); }

.ai { padding:20px 22px; }
.ai-score { display:flex; align-items:center; gap:18px; margin-bottom:16px; }
.score { font-size:40px; font-weight:750; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.score.high { color:var(--green); } .score.medium { color:var(--yellow); } .score.low { color:var(--red); }
.score-label { color:var(--muted); font-size:12px; }
.ai-comment { color:var(--text); line-height:1.6; font-size:14px; }
.ai-reason { margin-top:12px; color:var(--muted-2); font-size:12px; }

.chart { height:210px; padding:22px; display:flex; align-items:end; gap:10px; }
.bar-wrap { flex:1; height:100%; display:flex; flex-direction:column; justify-content:end; align-items:center; gap:8px; }
.bar { width:100%; max-width:32px; background:var(--blue); opacity:.85; border-radius:7px 7px 3px 3px;
  min-height:4px; transition:opacity .15s var(--ease); }
.bar-wrap:hover .bar { opacity:1; }
.bar-label { color:var(--muted-2); font-size:10.5px; }

/* ---------- Таблица (страницы /numbers, /analysis) ---------- */
.table { width:100%; border-collapse:collapse; table-layout:fixed; }
.table th, .table td { text-align:left; padding:14px 22px; border-bottom:1px solid var(--border); font-size:13.5px; }
.table th { color:var(--muted); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; }
.table tbody tr { transition:background .15s var(--ease); }
.table tbody tr:hover { background:var(--panel-hover); }
.table th:nth-child(1), .table td:nth-child(1) { width:22%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.table th:nth-child(2), .table td:nth-child(2) { width:13%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.table th:nth-child(3), .table td:nth-child(3) { width:29%; }
.table th:nth-child(4), .table td:nth-child(4) { width:10%; }
.table th:nth-child(5), .table td:nth-child(5) { width:26%; }
.table td.comment-cell { max-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.table td.comment-cell a { color:var(--blue); }
.table td.row-actions { white-space:normal; }
.table td.row-actions button { margin:2px 0 2px 6px; }
.table tr.editing td { white-space:normal; overflow:visible; }
.table tr.editing input { width:100%; }
@media (max-width:900px){
  .table th:nth-child(3), .table td:nth-child(3) { display:none; }
}

.badge { font-size:11px; font-weight:600; padding:4px 10px; border-radius:980px; letter-spacing:-.01em; }
.badge.on { background:color-mix(in srgb, var(--green) 16%, transparent); color:var(--green); }
.badge.off { background:color-mix(in srgb, var(--red) 16%, transparent); color:var(--red); }
.row-actions button { margin-left:6px; }
.form-inline { display:flex; gap:8px; flex-wrap:wrap; padding:16px 22px; border-bottom:1px solid var(--border); }
.form-inline input { flex:1; min-width:120px; }

/* ---------- Дропзона (страница /analysis) ---------- */
.drop-zone { padding:52px 20px; text-align:center; border:1.5px dashed var(--border-strong);
  border-radius:18px; margin:18px; transition:border-color .18s var(--ease), background .18s var(--ease); }
.drop-zone.drag-over { border-color:var(--blue); background:var(--panel-hover); }

@media (max-width:1000px){ .stats{grid-template-columns:repeat(2,1fr);} .grid{grid-template-columns:1fr;} }
@media (max-width:760px){
  .sidebar{width:64px;padding:20px 8px;}
  .logo{font-size:0;text-align:center;} .logo:first-letter{font-size:18px;}
  .nav a{justify-content:center;font-size:0;padding:12px 5px;} .nav-icon{font-size:17px;width:auto;}
  .sidebar-bottom{display:none;}
  .main{margin-left:64px;width:calc(100% - 64px);padding:22px 16px;}
  .stats{grid-template-columns:1fr 1fr;}
  .number-row{grid-template-columns:1fr 70px;} .number-row>:last-child{display:none;}
  .call-row{grid-template-columns:60px 1fr 70px;} .call-row .status{display:none;}
}

/* ---------- Доступность: меньше движения / меньше прозрачности ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration:.001ms !important; animation-duration:.001ms !important; }
  .stat:hover { transform:none; }
}
@media (prefers-reduced-transparency: reduce) {
  .sidebar { backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--panel); }
}