/* ============================================================
   МедЛок — Design System + Диагностика (новый макет)
   Токены извлечены из Диагностика_МедЛок_v10__standalone_.html
   Вёрстка повторяет desktop.png / mobile.png
   ============================================================ */

/* Шрифт Inter подключается из Inter/inter.css */

/* ============================================================
   ТОКЕНЫ
   ============================================================ */
:root {
  /* yin & yang */
  --ml-white: #ffffff;
  --ml-black: #111111;
  /* gray */
  --ml-gray-100: #f3f6fa;
  --ml-gray-300: #c7d1df;
  --ml-gray-500: #8da2ba;
  --ml-gray-700: #607a93;
  --ml-gray-900: #424b58;
  /* blue (brand) */
  --ml-blue-base: #1a5dd0;
  --ml-blue-lighter: #3981f1;
  --ml-blue-light: #c1ddee;
  --ml-blue-lightest: #ecf1fb;
  --ml-blue-lightest-transparent: #f6f9ff;
  /* red */
  --ml-red-base: #ff4a37;
  --ml-red-lightest: #fce8e8;
  --ml-red-dark: #f52a14;
  /* green */
  --ml-green-base: #1eb37c;
  --ml-green-lightest: #e0f6ee;
  --ml-green-dark: #00815a;
  /* yellow */
  --ml-yellow-base: #ffa928;
  --ml-yellow-lightest: #fff2d9;
  --ml-yellow-darkest: #df5000;

  /* Semantic */
  --color-brand: var(--ml-blue-base);
  --color-brand-hover: var(--ml-blue-lighter);
  --color-brand-soft: var(--ml-blue-lightest);

  --text-strong: var(--ml-black);
  --text-body: var(--ml-gray-900);
  --text-muted: var(--ml-gray-700);
  --text-subtle: var(--ml-gray-500);
  --text-on-brand: var(--ml-white);
  --text-link: var(--ml-blue-base);

  --surface-page: var(--ml-gray-100);
  --surface-card: var(--ml-white);
  --surface-sunken: var(--ml-blue-lightest-transparent);

  --border-subtle: var(--ml-gray-300);
  --border-strong: var(--ml-gray-500);
  --divider: var(--ml-gray-100);

  --status-success: var(--ml-green-base);
  --status-success-strong: var(--ml-green-dark);
  --status-success-soft: var(--ml-green-lightest);
  --status-danger: var(--ml-red-base);
  --status-danger-strong: var(--ml-red-dark);
  --status-danger-soft: var(--ml-red-lightest);
  --status-warning: var(--ml-yellow-darkest);
  --status-warning-accent: var(--ml-yellow-base);
  --status-warning-soft: var(--ml-yellow-lightest);

  --focus-ring: color-mix(in srgb, var(--ml-blue-lighter) 45%, transparent);

  /* Type — только Inter (фейсы: 300 / 400 / 600 / 700) */
  --font-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800;
  --fs-h1: 40px; --fs-h2: 30px; --fs-h3: 24px; --fs-h4: 20px;
  --fs-lg: 18px; --fs-base: 16px; --fs-sm: 14px; --fs-xs: 13px; --fs-2xs: 11px;
  --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.45; --lh-relaxed: 1.6;
  --ls-tight: -0.02em; --ls-wide: 0.04em; --ls-overline: 0.08em;

  /* Space / radius */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(66, 75, 88, 0.06);
  --shadow-sm: 0 2px 8px rgba(66, 75, 88, 0.08);
  --shadow-md: 0 8px 24px rgba(66, 75, 88, 0.10);
  --shadow-lg: 0 16px 48px rgba(66, 75, 88, 0.14);
  --shadow-brand: 0 8px 20px rgba(26, 93, 208, 0.28);
  --shadow-focus: 0 0 0 4px var(--focus-ring);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms; --dur-base: 200ms;

  --container-max: 1240px;
}

/* ============================================================
   RESET / БАЗА
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  background: var(--surface-page);
  padding: var(--space-5);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--text-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--color-brand-hover); }
.mono { font-family: var(--font-mono); }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

/* ============================================================
   APP SHELL — окно-карточка с синей шапкой
   ============================================================ */
.app {
  max-width: var(--container-max);
  margin: 0 auto;
  background: var(--surface-card);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--color-brand);
  color: var(--text-on-brand);
  padding: var(--space-4) var(--space-6);
}
.topbar__brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.topbar__logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.16); color: #fff; flex: 0 0 auto;
}
.topbar__logo svg { width: 18px; height: 18px; }
.topbar__logo-badge { display: inline-flex; align-items: center; background: #fff; border-radius: var(--radius-sm); padding: 6px 10px; flex: 0 0 auto; }
.topbar__logo-img { height: 20px; display: block; }
.topbar__name { font-weight: var(--fw-extrabold); font-size: var(--fs-h4); letter-spacing: var(--ls-tight); }
.topbar__sub { color: #fff; font-size: var(--fs-base); }

.refresh-pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: rgba(255, 255, 255, 0.16); color: #fff;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); white-space: nowrap;
  border: none; cursor: pointer; font-family: inherit;
  transition: background var(--dur-fast) var(--ease-standard);
}
.refresh-pill:hover { background: rgba(255, 255, 255, 0.26); }
.refresh-pill .dot { background: #6ff0bf; }
.refresh-pill.is-busy .dot { animation: ml-pulse 1s var(--ease-standard) infinite; }
.refresh-pill time, .refresh-pill span.val { font-family: var(--font-mono); }

.app__body { padding: var(--space-6); }

/* ============================================================
   LAYOUT — основной grid
   ============================================================ */
.dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
.dashboard.with-news { grid-template-columns: minmax(0, 1fr) 332px; }
.dashboard__main { display: flex; flex-direction: column; gap: var(--space-6); }

/* ============================================================
   ОБЩИЕ ЭЛЕМЕНТЫ — dot, pill, button, chip
   ============================================================ */
.dot { width: 9px; height: 9px; border-radius: var(--radius-pill); flex: 0 0 auto; display: inline-block; }
.dot--ok { background: var(--status-success); }
.dot--error { background: var(--status-danger); }
.dot--warning { background: var(--status-warning-accent); }
.dot--loading { background: var(--text-subtle); animation: ml-pulse 1s var(--ease-standard) infinite; }

.pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); white-space: nowrap;
}
.pill--ok { background: var(--status-success-soft); color: var(--status-success-strong); }
.pill--error { background: var(--status-danger-soft); color: var(--status-danger-strong); }
.pill--warning { background: var(--status-warning-soft); color: var(--status-warning); }
.pill--loading { background: var(--ml-gray-100); color: var(--text-muted); }
.pill--muted { background: var(--surface-card); color: var(--text-muted); border: 1px solid var(--border-subtle); }
.dot--muted { background: var(--text-subtle); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
  border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast), border-color var(--dur-fast);
}
.btn--primary { background: var(--color-brand); color: #fff; box-shadow: var(--shadow-brand); }
.btn--primary:hover { background: var(--color-brand-hover); color: #fff; }
.btn--outline { background: var(--surface-card); color: var(--color-brand); border-color: var(--color-brand); }
.btn--outline:hover { background: var(--color-brand-soft); color: var(--color-brand); }
.btn--block { width: 100%; padding: var(--space-3) var(--space-4); }

.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill); background: var(--surface-card); font-size: var(--fs-xs);
}
.chip__label { color: var(--text-muted); }
.chip__val { font-family: var(--font-mono); font-weight: var(--fw-semibold); color: var(--text-strong); }

.loading-text { color: var(--text-subtle); font-size: var(--fs-sm); font-style: italic; }

/* ============================================================
   PANEL (Сервера, Касса) — карточка с цветной шапкой
   ============================================================ */
.panel {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-card);
}
.panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) var(--space-5);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--dur-base) var(--ease-standard);
}
.panel.is-ok .panel__head { background: var(--status-success-soft); border-bottom-color: color-mix(in srgb, var(--status-success) 25%, var(--border-subtle)); }
.panel.is-warning .panel__head { background: var(--status-warning-soft); border-bottom-color: color-mix(in srgb, var(--status-warning-accent) 38%, var(--border-subtle)); }
.panel.is-error .panel__head { background: var(--status-danger-soft); border-bottom-color: color-mix(in srgb, var(--status-danger) 25%, var(--border-subtle)); }
.panel__title { font-size: 15px; font-weight: var(--fw-bold); color: var(--text-strong); margin: 0; }
.panel__body { padding: var(--space-5); }

/* Сервера: плитки */
.server-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.server {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.server__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.server__id { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.server__id .dot { margin-top: 6px; }
.server__name { font-weight: var(--fw-bold); color: var(--text-strong); }
.server__host { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); }
.server__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.server__meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); min-width: 0; }
.server__bottom .btn { flex: 0 0 auto; }

/* Касса: 3 колонки */
.kassa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kassa-cell { padding: 0 var(--space-5); }
.kassa-cell + .kassa-cell { border-left: 1px solid var(--border-subtle); }
.kassa-cell:first-child { padding-left: 0; }
.kassa-cell__label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--space-2); }
.kassa-cell__val { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-strong); }

/* ============================================================
   CARD (Рабочее место, Новости)
   ============================================================ */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.card__title { font-size: 15px; font-weight: var(--fw-bold); color: var(--text-strong); margin: 0 0 var(--space-4); }

/* Рабочее место */
.workplace__chips { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.workplace__hint { color: var(--text-muted); font-size: var(--fs-sm); margin: 0 0 var(--space-3); }
.req-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-2) 0; border-top: 1px solid var(--divider);
}
.req-row__label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.req-row__label .req-min { font-weight: var(--fw-regular); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-xs); margin-left: var(--space-2); }
.req-row__action { text-align: right; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.req-row__hint { font-weight: var(--fw-regular); color: var(--text-subtle); white-space: nowrap; }

/* Новости */
.news__item { padding: var(--space-4) 0; border-top: 1px solid var(--divider); }
.news__item:first-of-type { padding-top: 0; border-top: none; }
.news__title { font-weight: var(--fw-bold); color: var(--text-strong); margin-bottom: var(--space-1); }
.news__body { font-size: var(--fs-sm); color: var(--text-muted); }

/* ============================================================
   FOOTER
   ============================================================ */
.app-footer {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-6); padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}
.app-footer__support { color: var(--text-muted); font-size: var(--fs-sm); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.app-footer__support a { font-weight: var(--fw-semibold); }
.app-footer__support .phone { font-family: var(--font-mono); }

/* ============================================================
   MOBILE SCREEN — «Откройте на компьютере»
   ============================================================ */
.mobile-screen { display: none; }
.mobile-hero { text-align: center; padding: var(--space-6) 0 var(--space-2); }
.mobile-hero__icon {
  width: 64px; height: 64px; margin: 0 auto var(--space-5);
  display: flex; align-items: center; justify-content: center;
  background: var(--color-brand-soft); color: var(--color-brand);
  border-radius: var(--radius-lg);
}
.mobile-hero__icon svg { width: 32px; height: 32px; }
.mobile-hero__title { font-size: var(--fs-h3); font-weight: var(--fw-extrabold); color: var(--text-strong); margin: 0 0 var(--space-3); }
.mobile-hero__text { color: var(--text-muted); font-size: var(--fs-sm); margin: 0 auto; max-width: 30em; }

.mobile-overline { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--text-subtle); margin: var(--space-8) 0 var(--space-3); }
.mserver {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}
.mserver__id { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.mserver__name { font-weight: var(--fw-bold); color: var(--text-strong); }
.mserver__host { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); }
.mserver__status { font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.mserver__status.is-ok { color: var(--status-success-strong); }
.mserver__status.is-warning { color: var(--status-warning); }
.mserver__status.is-error { color: var(--status-danger-strong); }
.mserver__status.is-loading { color: var(--text-subtle); }
.mobile-actions { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }

/* ============================================================
   TOP BANNER — динамический баннер состояния
   ============================================================ */
.topbanner-wrap { margin-bottom: var(--space-6); }
.topbanner-wrap:empty { display: none; margin: 0; }
.topbanner {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg); border: 1px solid transparent;
}
.topbanner__icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: var(--fw-bold); font-size: var(--fs-lg);
}
.topbanner__icon svg { width: 20px; height: 20px; }
.topbanner__text { flex: 1 1 auto; min-width: 0; }
.topbanner__title { font-weight: var(--fw-bold); color: var(--text-strong); }
.topbanner__body { font-size: var(--fs-sm); color: var(--text-muted); }
.topbanner__action { flex: 0 0 auto; }
.topbanner--warning { background: var(--status-warning-soft); border-color: color-mix(in srgb, var(--status-warning-accent) 45%, transparent); }
.topbanner--warning .topbanner__icon { background: var(--status-warning-accent); }
.topbanner--danger { background: var(--status-danger-soft); border-color: color-mix(in srgb, var(--status-danger) 35%, transparent); }
.topbanner--danger .topbanner__icon { background: var(--status-danger); }

/* ============================================================
   ACTION BLOCK — контекстный блок помощи (резервный адрес)
   ============================================================ */
#ActionBlock:empty { display: none; }
.action {
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle);
}
.action__icon {
  width: 44px; height: 44px; border-radius: var(--radius-md); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.action__icon svg { width: 22px; height: 22px; }
.action__main { flex: 1 1 auto; min-width: 0; }
.action__title { font-weight: var(--fw-bold); color: var(--text-strong); margin-bottom: var(--space-1); }
.action__text { font-size: var(--fs-sm); color: var(--text-muted); }
.action__buttons { display: flex; gap: var(--space-3); flex: 0 0 auto; flex-wrap: wrap; }

.action--backup { background: var(--surface-card); }

/* ============================================================
   АНИМАЦИИ
   ============================================================ */
@keyframes ml-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }
@media (prefers-reduced-motion: reduce) { .dot--loading { animation: none; } }

/* ============================================================
   ОПРЕДЕЛЕНИЕ УСТРОЙСТВА — мобильный экран только для мобильных
   Переключение по классу <html>.is-mobile / .is-desktop
   (задаётся JS до отрисовки), а не по ширине окна. Так узкое
   окно на десктопе НЕ показывает экран «Откройте на компьютере».
   ============================================================ */
.is-mobile .desktop-app { display: none; }
.is-mobile .mobile-screen { display: block; }
.is-mobile .refresh-pill { display: none; }
.is-mobile body { padding: 0; }
.is-mobile .app { border-radius: 0; box-shadow: none; min-height: 100vh; }

/* ============================================================
   RESPONSIVE — только реформирование вёрстки desktop-приложения
   ============================================================ */
@media (max-width: 980px) {
  .dashboard, .dashboard.with-news { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .server-grid { grid-template-columns: 1fr; }
  .topbanner, .action { flex-wrap: wrap; }
  .topbanner__action, .action__buttons { width: 100%; }
  .action__buttons .btn { flex: 1 1 auto; }
}
@media (max-width: 560px) {
  .app__body { padding: var(--space-5); }
  .kassa-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .kassa-cell { padding: 0; }
  .kassa-cell + .kassa-cell { border-left: none; border-top: 1px solid var(--border-subtle); padding-top: var(--space-4); }
}