/* Деталі диспетчерської поверх дизайн-системи OkLand (okland.css): верхня смуга, плашка «дані не оновлюються»,
   картка ліфта, журнал, вхід. Кольори й відступи — лише зі змінних okland.css. */

/* Верхня смуга з розділами */
.dp-bar{display:flex;align-items:center;gap:8px 22px;flex-wrap:wrap;padding:10px var(--pad);background:var(--surface);border-bottom:1px solid var(--hair)}
.dp-brand{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--fg)}
.dp-brand .ok-ico{font-size:22px;color:var(--blue)}
.dp-nav{display:flex;gap:4px;flex-wrap:wrap}
.dp-nav a{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:var(--r-sm);color:var(--fg);font-size:14px}
.dp-nav a:hover{background:var(--surface-3);color:var(--fg)}
.dp-nav a[aria-current="page"]{background:var(--surface-3);font-weight:500}
.dp-nav .ok-ico{font-size:18px}
.dp-user{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted)}
.dp-user form{margin:0}

/* Плашка: живе оновлення не вдалося */
.dp-stale{display:flex;align-items:center;gap:10px;padding:11px var(--pad);background:#fff4d6;border-bottom:1px solid #f0d58a;color:var(--amber);font-size:14px;font-weight:500}
.dp-stale .ok-ico{font-size:20px}
/* Та сама плашка всередині сторінки: дані від пристроїв застаріли (сервер відповідає, а опитування стоїть) */
.dp-stale--inline{margin:0;border:1px solid #f0d58a;border-radius:var(--r-sm)}

/* Заголовок сторінки з діями праворуч */
.dp-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.dp-head__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dp-live{display:flex;flex-direction:column;gap:22px}
.dp-updated{margin:0;font-size:12.5px;color:var(--muted)}

/* Підписи плиток за тоном */
.dp-tone-red{color:var(--red)} .dp-tone-amber{color:var(--amber)} .dp-tone-green{color:var(--green)} .dp-tone-muted{color:var(--muted)}

/* Картка ліфта: блоки поруч, усередині — .ok-facts */
.dp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:20px;align-items:start}
.dp-card{padding:6px 20px 8px}
.dp-card__title{display:flex;align-items:center;gap:8px;margin:14px 0 4px;font-size:16px;font-weight:500;letter-spacing:-.02em}
.dp-card__title .ok-ico{font-size:20px;color:var(--fg-2)}
.dp-card__sub{margin:14px 0 0;font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.dp-card .ok-facts dt{flex-basis:130px}
.dp-card .ok-status{font-size:15px}
/* Плашка «Режим правильний» у картці ліфта: зелений фон, значок і слова — колір не єдиний носій сенсу */
.dp-ok{display:flex;align-items:center;gap:8px;margin:8px 0 4px;padding:10px 12px;border:1px solid #b7dcc6;border-radius:var(--r-sm);background:#e8f5ee;color:var(--green);font-size:14px;font-weight:500}
.dp-ok .ok-ico{font-size:20px}
.dp-small{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
.dp-chip{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 9px 0 7px;border-radius:var(--r-pill);background:var(--blue-soft);color:var(--blue-text);font-size:12.5px;font-weight:500;vertical-align:middle}
.dp-chip .ok-ico{font-size:15px}

/* Журнал і таблиці подій */
.dp-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.dp-filters .ok-field{min-width:150px}
.dp-filters select.ok-input{padding-right:8px}
.dp-events{--cols:150px 120px 110px minmax(280px,1fr);min-width:680px}
.dp-events .ok-td__main{white-space:normal}

/* Вхід */
.dp-login{display:flex;justify-content:center;padding:max(48px,10vh) 16px 48px}
.dp-login .ok-card{width:100%;max-width:400px;padding:28px 26px}
.dp-login h1{margin:0 0 4px;font-size:24px;font-weight:600;letter-spacing:-.02em}

/* Тост успіху зникає сам за ~4,5 с без JS; помилка лишається */
.ok-toast:not(.ok-toast--err){animation:okToast .2s ease-out,dpToastOut .3s ease-in 4.5s forwards}
@keyframes dpToastOut{to{opacity:0;transform:translateY(8px);visibility:hidden}}

@media (max-width:700px){
  .ok-h1{font-size:28px}
  .ok-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ok-tile{padding:14px}
  .ok-tile__num{font-size:24px}
  .dp-user{margin-left:0;width:100%;justify-content:space-between}
  .dp-card{padding:4px 16px 6px}
  .dp-card .ok-facts>div{flex-direction:column;gap:2px}
  .dp-card .ok-facts dt{flex-basis:auto}
}