/* ============================================================================
   DDOffice UI — единый компонент-слой (дизайн-система из утверждённого превью).

   ВАЖНО: файл АДДИТИВНЫЙ и БЕЗОПАСНЫЙ.
   - Все классы с префиксом .dd-* и токены --dd-* — НЕ переопределяют
     существующие --accent/--bg/--text и т.п. Поэтому подключение этого файла
     НЕ меняет уже свёрстанные страницы; стиль применяется только там, где мы
     явно проставим .dd-* классы (постранично).
   - Фирменная палитра — из логотипа DDOffice (оранж/синий/навy), Manrope.
   - Тёмная тема — на навигационном тёмно-синем бренда (не серая инверсия).

   Пока НЕ подключён в base.html — включим при старте раскатки фронта.
   ============================================================================ */

:root{
  --dd-orange:#ec6a2e;      --dd-orange-ink:#c9531d;
  --dd-blue:#4d86e0;        --dd-blue-ink:#356fc9;
  --dd-navy:#262b3b;
  --dd-good:#2ca24a; --dd-warn:#e08a1e; --dd-bad:#e0483a;

  /* нейтрали (светлая) */
  --dd-bg:#ffffff; --dd-bg-2:#f3f5f9; --dd-surface:#f6f8fb;
  --dd-card:#ffffff;
  --dd-text:#262b3b; --dd-text-2:#5c6478; --dd-text-3:#98a0b2;
  --dd-border:#e6e9f1; --dd-border-2:#eef1f6;

  --dd-accent:var(--dd-orange); --dd-accent-2:var(--dd-blue);

  --dd-r-sm:9px; --dd-r:13px; --dd-r-lg:16px; --dd-r-pill:999px;
  --dd-sh:0 1px 2px rgba(38,43,59,.06),0 1px 3px rgba(38,43,59,.05);
  --dd-sh-lg:0 12px 34px rgba(38,43,59,.16);
  --dd-font:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --dd-gap:14px;
}
/* ── Бренд: акцент дизайн-системы идёт за data-brand ──────────────────────────
   Раньше --dd-accent был жёстко привязан к оранжевому Додо, поэтому у Дринкита
   первичные кнопки (.dd-btn--primary), полосы и иконки оставались оранжевыми.
   Селектор html[data-brand=...] специфичнее :root, поэтому переопределяет корректно. */
html[data-brand="drinkit"]{
  --dd-orange:#00AEEF;  --dd-orange-ink:#0090c6;
  --dd-accent:#00AEEF;  --dd-accent-2:#0090c6;
}
html[data-theme="dark"][data-brand="drinkit"]{
  --dd-accent:#3cc6f5;  --dd-accent-2:#66d3f7;
}

html[data-theme="dark"]{
  --dd-bg:#141824; --dd-bg-2:#1b2030; --dd-surface:#191d29;
  --dd-card:#1e2331;
  --dd-text:#eceef4; --dd-text-2:#9aa2b6; --dd-text-3:#6a7387;
  --dd-border:#2b3346; --dd-border-2:#232a3a;
  --dd-accent:#f37c43; --dd-accent-2:#5b93e8;   /* Додо; Дринкит переопределён ниже */
  --dd-good:#33c25b; --dd-warn:#f0a33a; --dd-bad:#f0584a;
  --dd-sh:0 1px 2px rgba(0,0,0,.3); --dd-sh-lg:0 14px 40px rgba(0,0,0,.5);
}

/* ── Скоуп: включаем компоненты только внутри .dd-scope (чтобы страница
   опт-инила осознанно). Точечно можно вешать .dd-* и без обёртки. ── */
.dd-scope{ font-family:var(--dd-font); color:var(--dd-text); }

/* ── Шапка страницы ── */
.dd-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:20px;flex-wrap:wrap;}
.dd-pagehead h1,.dd-pagehead h2{margin:0;font-size:22px;font-weight:800;letter-spacing:-.4px;color:var(--dd-text);}
.dd-pagehead p{margin:4px 0 0;font-size:13px;color:var(--dd-text-2);}
.dd-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}

/* ── Кнопки ── */
.dd-btn{height:37px;border-radius:var(--dd-r-sm);border:1px solid var(--dd-border);
  background:var(--dd-card);color:var(--dd-text);font:700 13px var(--dd-font);
  padding:0 16px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap;
  transition:filter .12s,background .12s,box-shadow .12s,transform .04s;}
.dd-btn:hover{filter:brightness(.98);box-shadow:var(--dd-sh);}
.dd-btn:active{transform:translateY(1px);}
.dd-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;}
.dd-btn--primary{background:var(--dd-accent);border-color:var(--dd-accent);color:#fff;}
.dd-btn--blue{background:var(--dd-accent-2);border-color:var(--dd-accent-2);color:#fff;}
.dd-btn--ghost{background:transparent;}
.dd-btn--sm{height:32px;padding:0 12px;font-size:12px;border-radius:8px;}
.dd-btn .fa,.dd-btn svg{font-size:14px;}

/* ── Чипы-фильтры ── */
.dd-chip{height:35px;border-radius:var(--dd-r-sm);border:1px solid var(--dd-border);
  background:var(--dd-card);display:inline-flex;align-items:center;gap:8px;padding:0 13px;
  font:700 12.5px var(--dd-font);color:var(--dd-text-2);cursor:pointer;}
.dd-chip:hover{color:var(--dd-text);}
.dd-chip .fa{opacity:.7;font-size:13px;}

/* ── Карточка ── */
.dd-card{background:var(--dd-card);border:1px solid var(--dd-border);border-radius:var(--dd-r);
  box-shadow:var(--dd-sh);overflow:hidden;}
.dd-card__h{padding:15px 16px;border-bottom:1px solid var(--dd-border-2);
  font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:space-between;color:var(--dd-text);}
.dd-card__h a{font-size:12px;font-weight:700;color:var(--dd-accent-2);text-decoration:none;display:inline-flex;gap:5px;align-items:center;}
.dd-card__b{padding:16px;}

/* ── Сетки ── */
.dd-grid{display:grid;gap:var(--dd-gap);}
.dd-grid--kpi{grid-template-columns:repeat(4,1fr);}
.dd-grid--2{grid-template-columns:1.65fr 1fr;}
.dd-grid--3{grid-template-columns:repeat(3,1fr);}

/* ── KPI-плитка ── */
.dd-kpi{background:var(--dd-card);border:1px solid var(--dd-border);border-radius:var(--dd-r);
  padding:16px;box-shadow:var(--dd-sh);}
.dd-kpi__ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:15px;margin-bottom:11px;}
.dd-kpi__k{font-size:12px;color:var(--dd-text-2);font-weight:700;}
.dd-kpi__v{font-size:27px;font-weight:800;letter-spacing:-.6px;color:var(--dd-text);
  font-variant-numeric:tabular-nums;margin-top:2px;}
.dd-kpi__t{font-size:12px;font-weight:700;margin-top:6px;display:inline-flex;align-items:center;gap:4px;}
.dd-kpi__t.up{color:var(--dd-good);} .dd-kpi__t.down{color:var(--dd-bad);}
/* цветные варианты значка */
.dd-ic--orange{background:color-mix(in srgb,var(--dd-orange) 14%,transparent);color:var(--dd-orange);}
.dd-ic--blue{background:color-mix(in srgb,var(--dd-blue) 14%,transparent);color:var(--dd-blue);}
.dd-ic--good{background:color-mix(in srgb,var(--dd-good) 15%,transparent);color:var(--dd-good);}
.dd-ic--warn{background:color-mix(in srgb,var(--dd-warn) 16%,transparent);color:var(--dd-warn);}

/* ── Таблица ── */
.dd-table{width:100%;border-collapse:collapse;font-size:13px;}
.dd-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--dd-text-3);font-weight:800;padding:11px 16px;border-bottom:1px solid var(--dd-border-2);}
.dd-table td{padding:12px 16px;border-bottom:1px solid var(--dd-border-2);color:var(--dd-text);
  font-weight:500;font-variant-numeric:tabular-nums;}
.dd-table tr:last-child td{border-bottom:0;}
.dd-table--hover tbody tr:hover td{background:var(--dd-surface);}

/* ── Бейдж-статус (без эмодзи, аккуратная точка) ── */
.dd-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;
  padding:4px 10px;border-radius:var(--dd-r-pill);}
.dd-badge__d{width:7px;height:7px;border-radius:50%;}
.dd-badge--good{background:color-mix(in srgb,var(--dd-good) 14%,transparent);color:var(--dd-good);}
.dd-badge--good .dd-badge__d{background:var(--dd-good);}
.dd-badge--warn{background:color-mix(in srgb,var(--dd-warn) 16%,transparent);color:var(--dd-warn);}
.dd-badge--warn .dd-badge__d{background:var(--dd-warn);}
.dd-badge--bad{background:color-mix(in srgb,var(--dd-bad) 15%,transparent);color:var(--dd-bad);}
.dd-badge--bad .dd-badge__d{background:var(--dd-bad);}

/* ── Прогресс-полоса / спарклайн ── */
.dd-bar{height:7px;border-radius:5px;background:var(--dd-surface);overflow:hidden;}
.dd-bar>span{display:block;height:100%;border-radius:5px;background:var(--dd-accent);}
.dd-bar>span.blue{background:var(--dd-accent-2);}
.dd-spark{display:flex;align-items:flex-end;gap:5px;height:96px;padding:8px 2px 0;}
.dd-spark span{flex:1;border-radius:5px 5px 0 0;background:color-mix(in srgb,var(--dd-accent-2) 60%,transparent);}
.dd-spark span.hi{background:var(--dd-accent-2);}

/* ── Строка-список (компактно, в т.ч. для мобилы вместо таблицы) ── */
.dd-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px;border-bottom:1px solid var(--dd-border-2);font-size:13px;}
.dd-row:last-child{border-bottom:0;}
.dd-unit{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--dd-text);}
.dd-unit__b{width:28px;height:28px;border-radius:8px;background:var(--dd-surface);
  display:grid;place-items:center;color:var(--dd-accent);font-size:13px;}

/* ── Адаптив: единые брейкпоинты для всех .dd-* страниц ── */
@media (max-width:1024px){
  .dd-grid--kpi{grid-template-columns:repeat(2,1fr);}
  .dd-grid--2,.dd-grid--3{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .dd-grid--kpi{grid-template-columns:1fr 1fr;}
  .dd-pagehead{align-items:flex-start;}
  .dd-toolbar{width:100%;}
  .dd-kpi__v{font-size:22px;}
  /* широкие таблицы .dd-table--responsive → горизонтальный скролл в своём контейнере */
  .dd-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
}