/* Демо 2: служба помощи на дорогах. Каркас: панель управления, счётчики, чат слева, доска справа.
   Базовые токены, плашка, кнопки и подвал из ../shared.css. */

.num{font-variant-numeric:tabular-nums}

/* Управление сменой */
.dtp-controls{background:var(--c-bg);border-bottom:1px solid var(--c-border);padding:var(--sp-3) 0}
.dtp-controls .wrap{display:grid;gap:var(--sp-2)}
.dtp-buttons{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:flex-end}
.dtp-buttons .btn{min-width:150px}
.dtp-buttons .btn-main{width:280px}
/* Подсказка занимает постоянную ширину: смена текста не двигает соседние кнопки */
.dtp-buttons .demo-hint{align-self:center;flex:0 0 290px;min-height:44px}
.dtp-buttons .btn[disabled]{opacity:.5;cursor:default}
.dtp-speed select{min-width:170px}
.dtp-clock{font-size:var(--fs-small);color:var(--c-muted)}
.dtp-clock .num{color:var(--c-heading);font-weight:600}

/* Счётчики */
.dtp-main{padding-top:var(--sp-4)}
.dtp-counters{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
.dtp-counter{background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius);padding:var(--sp-3);display:grid;gap:2px;min-height:96px;align-content:start}
.dtp-counter-num{font-size:var(--fs-kpi);font-weight:700;line-height:1.1;color:var(--c-heading);transition:color .3s}
.dtp-counter-num.is-gain{color:var(--c-gain)}
.dtp-counter-num.is-warn{color:var(--c-amber)}
.dtp-counter-label{font-size:var(--fs-small);color:var(--c-muted)}
.dtp-counter.is-bump{border-color:var(--c-accent)}

/* Раскладка: чат и доска */
.dtp-layout{display:grid;gap:var(--sp-3);padding:var(--sp-3) 0 var(--sp-4)}
.dtp-chat,.dtp-board-wrap{background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius);min-width:0}

/* Чат */
.dtp-chat{display:grid;grid-template-rows:auto 1fr}
.dtp-chat-head{display:flex;gap:var(--sp-2);align-items:center;padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--c-border)}
.dtp-chat-head h2{font-size:var(--fs-base)}
.dtp-chat-avatar{flex:none;width:40px;height:40px;border-radius:50%;background:var(--c-accent);color:#fff;display:grid;place-items:center;font-weight:700}
.dtp-chat-list{list-style:none;margin:0;padding:var(--sp-3);height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:var(--sp-2);background:var(--c-surface-2);border-radius:0 0 var(--radius) var(--radius)}
.dtp-chat-empty{color:var(--c-muted);font-size:var(--fs-small);margin:auto;text-align:center;max-width:30ch}
.dtp-msg{max-width:88%;background:var(--c-bg);border:1px solid var(--c-border);box-shadow:0 1px 2px rgba(15,23,42,.06);border-radius:14px 14px 14px 4px;padding:8px 12px 6px;align-self:flex-start;animation:dtp-in .35s ease-out}
.dtp-msg.is-duty{background:#E0EAFF;border-color:#C7D7FE}
.dtp-msg-from{display:block;font-size:var(--fs-small);font-weight:600;color:var(--c-accent)}
.dtp-msg.is-c1 .dtp-msg-from{color:var(--c-gain)}
.dtp-msg.is-c2 .dtp-msg-from{color:var(--c-amber)}
.dtp-msg-text{white-space:pre-line;font-size:var(--fs-base);line-height:1.4;color:var(--c-text)}
.dtp-msg-photo{display:inline-flex;gap:6px;align-items:center;font-size:var(--fs-small);color:var(--c-muted);background:var(--c-surface-2);border-radius:6px;padding:2px 8px;margin-bottom:4px}
.dtp-msg-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;margin-top:4px;font-size:var(--fs-small);color:var(--c-muted)}
.dtp-msg-link{color:var(--c-accent);font-weight:600}

/* Доска */
.dtp-board-head{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--c-border);display:grid;gap:2px}
.dtp-board-head h2{font-size:var(--fs-base)}
.dtp-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:var(--sp-2);padding:var(--sp-3);overflow-x:auto;scroll-snap-type:x mandatory;align-items:start;scroll-behavior:smooth;min-height:334px}
.dtp-col{scroll-snap-align:start;background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--radius);padding:var(--sp-1);display:grid;gap:var(--sp-1);align-content:start;min-height:300px;transition:border-color .3s}
.dtp-col.is-active{border-color:var(--c-accent);box-shadow:0 0 0 1px var(--c-accent)}
.dtp-col-head{display:flex;justify-content:space-between;gap:6px;align-items:center;padding:4px 6px;font-size:var(--fs-small);font-weight:600;color:var(--c-heading)}
.dtp-col-head .dot{width:8px;height:8px;border-radius:50%;background:#94A3B8;flex:none;margin-right:6px}
.dtp-col-title{display:flex;align-items:center;min-width:0}
.dtp-col-count{color:var(--c-muted);font-weight:500}
.dtp-col[data-tone="new"] .dot{background:#D97706}
.dtp-col[data-tone="go"] .dot{background:#2563EB}
.dtp-col[data-tone="wait"] .dot{background:#D97706}
.dtp-col[data-tone="ok"] .dot{background:var(--c-gain)}
.dtp-col[data-tone="no"] .dot{background:var(--c-loss)}
.dtp-col-empty{font-size:var(--fs-small);color:var(--c-muted);padding:6px}

.dtp-card{display:grid;gap:4px;width:100%;text-align:left;font:inherit;color:var(--c-text);background:var(--c-bg);border:1px solid var(--c-border);border-radius:8px;padding:10px;box-shadow:0 1px 2px rgba(15,23,42,.06);cursor:pointer;animation:dtp-in .35s ease-out}
.dtp-card:hover{border-color:var(--c-border-strong)}
.dtp-card:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}
.dtp-card.is-fresh{border-color:var(--c-accent);box-shadow:0 0 0 1px var(--c-accent)}
.dtp-card-id{font-size:var(--fs-small);color:var(--c-muted);font-variant-numeric:tabular-nums}
.dtp-card-title{font-size:var(--fs-small);font-weight:600;color:var(--c-heading);line-height:1.3}
.dtp-card-phone{white-space:nowrap;font-size:var(--fs-small);color:var(--c-accent);font-variant-numeric:tabular-nums}
.dtp-card-note{font-size:var(--fs-small);color:var(--c-muted);line-height:1.35}
.dtp-card-foot{display:flex;justify-content:space-between;font-size:var(--fs-small);color:var(--c-muted);font-variant-numeric:tabular-nums}
.dtp-card-sum{color:var(--c-gain)}

/* Итог */
.dtp-summary.is-pending{background:var(--c-bg);border-color:var(--c-border);border-left-color:var(--c-border-strong)}
.dtp-summary.is-pending .eyebrow{color:var(--c-muted)}
.dtp-summary{background:#F0FDF4;border:1px solid var(--c-gain);border-left-width:4px;border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);display:grid;gap:4px;margin-bottom:var(--sp-5)}
.dtp-summary .eyebrow{color:var(--c-gain)}
.dtp-summary p{max-width:75ch}

/* Окно истории карточки */
.dtp-dialog{border:1px solid var(--c-border-strong);border-radius:var(--radius);background:var(--c-bg);color:var(--c-text);padding:0;width:min(460px,calc(100vw - 32px));max-height:calc(100vh - 48px)}
.dtp-dialog::backdrop{background:rgba(15,23,42,.45)}
.dtp-dialog-body{padding:var(--sp-4);display:grid;gap:var(--sp-2)}
.dtp-dialog h2{font-size:var(--fs-h2)}
.dtp-dialog h3{font-size:var(--fs-small);color:var(--c-muted);font-weight:500;margin-top:var(--sp-1)}
.dtp-stage-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.dtp-stage-chips li{font-size:var(--fs-small);padding:4px 10px;border-radius:999px;border:1px solid var(--c-border-strong);color:var(--c-muted)}
.dtp-stage-chips li.is-current{border-color:var(--c-accent);color:var(--c-accent);background:var(--c-tint);font-weight:600}
.dtp-history{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.dtp-history li{display:grid;gap:2px;padding-left:16px;position:relative}
.dtp-history li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:var(--c-accent)}
.dtp-history .h-meta{font-size:var(--fs-small);color:var(--c-muted);font-variant-numeric:tabular-nums}
.dtp-history .h-meta b{color:var(--c-accent);font-weight:600}
.dtp-dialog-close{justify-self:start;margin-top:var(--sp-1)}

@keyframes dtp-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (min-width:640px){
  .dtp-counters{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1000px){
  .dtp-layout{grid-template-columns:minmax(300px,360px) minmax(0,1fr);align-items:stretch}
  .dtp-chat-list{height:auto;min-height:460px;max-height:560px}
  .dtp-board{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;scroll-snap-type:none;min-height:644px}
}
@media (min-width:1280px){
  .dtp-board{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .dtp-msg,.dtp-card{animation:none}
  .dtp-board{scroll-behavior:auto}
}

/* Связь «сообщение, затем карточка»: свежее сообщение и карточка подсвечиваются по очереди */
.dtp-msg.is-new{box-shadow:0 0 0 2px var(--c-accent);animation:dtp-in .35s ease-out,dtp-glow 1.6s ease-out}
.dtp-msg.is-new .dtp-msg-link{color:#fff;background:var(--c-accent);border-radius:6px;padding:0 6px}
.dtp-card.is-fresh{animation:dtp-in .35s ease-out .25s backwards,dtp-glow 1.6s ease-out .25s}
.dtp-card-from{font-size:var(--fs-small);color:var(--c-accent);font-weight:600}
@keyframes dtp-glow{0%{background:#BFDBFE}100%{}}
/* Итог смены подсвечивается, когда смена закончилась */
.dtp-summary.is-highlight{box-shadow:0 0 0 2px var(--c-gain),0 12px 32px rgba(21,128,61,.15);animation:dtp-glow-ok 2s ease-out}
@keyframes dtp-glow-ok{0%{background:#BBF7D0}100%{}}
@media (max-width:639.98px){
  .dtp-buttons .btn-main{flex:1 1 100%}
  .dtp-buttons .demo-hint{flex:1 1 100%;margin:0}
}
/* Тёмная тема */
.dtp-chat-avatar,.dtp-msg.is-new .dtp-msg-link{color:var(--c-on-accent)}
html[data-theme="dark"] .dtp-msg.is-duty{background:rgba(147,197,253,.16);border-color:#3B5B8F}
html[data-theme="dark"] .dtp-summary{background:rgba(74,222,128,.10)}
html[data-theme="dark"] .dtp-msg{box-shadow:none}