/* ENIQ interactive dashboard demo — theme-independent dark "app screenshot".
   Used on /dashboard, homepage and /nase-reseni. Powered by js/dashboard-demo.js. */

.dbp{
  --d-bg:#0c0c12; --d-panel:rgba(255,255,255,.02); --d-bd:rgba(255,255,255,.10);
  --d-tp:#f4f4f8; --d-ts:#9a9aa8; --d-pl:#b794f6; --d-pu:#814ac8;
  --d-gr:#46d39a; --d-am:#f5b40a;
  max-width:1000px;margin:0 auto;border:1px solid var(--d-bd);border-radius:16px;
  overflow:hidden;background:var(--d-bg);box-shadow:0 30px 80px -30px rgba(0,0,0,.65);
  color:var(--d-tp);
}
.dbp *{box-sizing:border-box}

/* top bar */
.dbp-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--d-bd);background:rgba(255,255,255,.02)}
.dbp-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
.dbp-bar-title{margin-left:8px;font-size:12px;font-weight:600;color:var(--d-ts)}
.dbp-bar-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.dbp-bar-pill{font-size:11px;color:var(--d-gr);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.dbp-livedot{width:7px;height:7px;border-radius:50%;background:var(--d-gr);box-shadow:0 0 0 0 rgba(70,211,154,.6);animation:dbpPulse 2.4s infinite}
@keyframes dbpPulse{0%{box-shadow:0 0 0 0 rgba(70,211,154,.55)}70%{box-shadow:0 0 0 7px rgba(70,211,154,0)}100%{box-shadow:0 0 0 0 rgba(70,211,154,0)}}
.dbp-bar-bell{color:var(--d-ts);display:flex}

/* layout */
.dbp-body{display:grid;grid-template-columns:188px 1fr;min-height:478px}
.dbp-side{border-right:1px solid var(--d-bd);padding:16px 12px;display:flex;flex-direction:column;gap:3px;background:rgba(255,255,255,.015)}
.dbp-side-logo{font-weight:700;font-size:14px;color:var(--d-tp);padding:4px 10px 12px;letter-spacing:.02em}
.dbp-nav{font-size:13px;color:var(--d-ts);padding:8px 10px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:9px;transition:background .18s,color .18s;user-select:none}
.dbp-nav svg{width:15px;height:15px;flex-shrink:0;opacity:.85}
.dbp-nav:hover{background:rgba(255,255,255,.04);color:var(--d-tp)}
.dbp-nav.active{background:rgba(129,74,200,.18);color:var(--d-pl);font-weight:500}
.dbp-nav-badge{margin-left:auto;font-size:10px;font-weight:600;background:rgba(245,180,10,.18);color:var(--d-am);border-radius:100px;padding:1px 7px}
.dbp-side-label{font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.26);padding:16px 10px 5px}
.dbp-nav-static{font-size:13px;color:var(--d-ts);padding:8px 10px;border-radius:8px;display:flex;align-items:center;gap:9px;opacity:.5;cursor:default;user-select:none}
.dbp-nav-static svg{width:15px;height:15px;flex-shrink:0;opacity:.85}
.dbp-user{margin-top:auto;display:flex;align-items:center;gap:9px;padding:14px 8px 2px;border-top:1px solid var(--d-bd)}
.dbp-user-av{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#814ac8,#5a8bd6);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
.dbp-user-n{font-size:12px;font-weight:600;color:var(--d-tp);line-height:1.2}
.dbp-user-s{font-size:10px;color:var(--d-ts)}

.dbp-main{padding:18px;position:relative;display:flex;flex-direction:column}
.dbp-view{display:none;flex-direction:column;gap:16px;flex:1;min-height:0}
.dbp-view.show{display:flex;animation:dbpFade .34s ease}
@keyframes dbpFade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
/* fill helpers — keep every view full height, no empty gaps */
.dbp-fill{flex:1;min-height:0}
.dbp-col{display:flex;flex-direction:column}
.dbp-list{display:flex;flex-direction:column}
.dbp-list.dbp-fill{justify-content:space-between}
.dbp-chats{display:flex;flex-direction:column;gap:12px}
.dbp-chats .dbp-chat{flex:1}
.dbp-chats .dbp-chat-f{margin-top:auto}
.dbp-chart.dbp-fill{height:auto}
.dbp-panel-foot{margin-top:auto;padding-top:11px;font-size:11px;color:var(--d-ts);border-top:1px solid rgba(255,255,255,.05)}
.dbp-panel-foot a,.dbp-panel-foot span{color:var(--d-pl)}
.dbp-vhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.dbp-vtitle{font-size:15px;font-weight:600;color:var(--d-tp)}
.dbp-vsub{font-size:11px;color:var(--d-ts)}

/* stat cards */
.dbp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.dbp-stat{border:1px solid var(--d-bd);border-radius:10px;padding:12px 14px;background:var(--d-panel)}
.dbp-stat-n{display:block;font-size:21px;font-weight:700;color:var(--d-tp);font-variant-numeric:tabular-nums;transition:color .3s}
.dbp-stat-n.flash{color:var(--d-pl)}
.dbp-stat-l{display:block;font-size:11px;color:var(--d-ts);margin-top:2px}

/* generic panels */
.dbp-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:14px}
.dbp-panel{border:1px solid var(--d-bd);border-radius:10px;background:var(--d-panel);padding:14px}
.dbp-panel-h{font-size:11px;font-weight:600;color:var(--d-ts);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}

/* conversation rows */
.dbp-conv{display:flex;align-items:center;gap:10px;padding:9px 6px;margin:0 -6px;border-bottom:1px solid rgba(255,255,255,.05);border-radius:8px;transition:background .5s}
.dbp-conv:last-child{border-bottom:0}
.dbp-conv.ping{background:rgba(129,74,200,.10)}
.dbp-av{width:28px;height:28px;border-radius:50%;background:rgba(129,74,200,.2);color:var(--d-pl);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0}
.dbp-conv>div{flex:1;min-width:0}
.dbp-conv-n{font-size:13px;color:var(--d-tp);font-weight:500}
.dbp-conv-t{font-size:11px;color:var(--d-ts);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dbp-tag{font-size:10px;font-weight:600;padding:3px 8px;border-radius:100px;flex-shrink:0;white-space:nowrap}
.dbp-tag.live{background:rgba(70,211,154,.15);color:var(--d-gr)}
.dbp-tag.esc{background:rgba(245,180,10,.15);color:var(--d-am)}
.dbp-tag.done{background:rgba(70,211,154,.13);color:var(--d-gr)}
.dbp-tag.wait{background:rgba(255,255,255,.08);color:var(--d-ts)}
.dbp-tag.chan{background:rgba(255,255,255,.05);color:var(--d-ts)}
.dbp-take{font-size:10px;font-weight:600;padding:5px 10px;border-radius:7px;background:var(--d-pu);color:#fff;flex-shrink:0;cursor:pointer;border:0;transition:opacity .18s}
.dbp-take:hover{opacity:.88}
.dbp-meta{display:flex;align-items:center;gap:8px;flex-shrink:0}
.dbp-time{font-size:10px;color:var(--d-ts);white-space:nowrap}

/* typing dots */
.dbp-typing{display:inline-flex;gap:3px;align-items:center}
.dbp-typing i{width:5px;height:5px;border-radius:50%;background:var(--d-pl);display:inline-block;animation:dbpType 1.3s infinite}
.dbp-typing i:nth-child(2){animation-delay:.18s}
.dbp-typing i:nth-child(3){animation-delay:.36s}
@keyframes dbpType{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}

/* chart */
.dbp-chart{display:flex;align-items:flex-end;gap:8px;height:150px;padding-top:6px}
.dbp-chart span{flex:1;background:linear-gradient(180deg,var(--d-pu),rgba(129,74,200,.28));border-radius:5px 5px 0 0;transition:height .85s cubic-bezier(.4,0,.2,1);min-height:6px}
.dbp-chart-x{display:flex;gap:8px;margin-top:7px}
.dbp-chart-x span{flex:1;text-align:center;font-size:9px;color:var(--d-ts)}

/* live chat cards */
.dbp-chat{border:1px solid var(--d-bd);border-radius:10px;background:var(--d-panel);padding:13px;display:flex;flex-direction:column;gap:9px}
.dbp-chat-h{display:flex;align-items:center;gap:9px}
.dbp-chat-h .dbp-conv-n{flex:1}
.dbp-bub{max-width:78%;font-size:12px;line-height:1.4;padding:7px 11px;border-radius:11px}
.dbp-bub.in{align-self:flex-start;background:rgba(255,255,255,.05);color:var(--d-tp);border-bottom-left-radius:3px}
.dbp-bub.out{align-self:flex-end;background:rgba(129,74,200,.22);color:#efe7fb;border-bottom-right-radius:3px}
.dbp-chat-f{display:flex;align-items:center;gap:9px;justify-content:space-between;margin-top:2px}

/* KPI tiles */
.dbp-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.dbp-kpi{border:1px solid var(--d-bd);border-radius:10px;padding:13px 14px;background:var(--d-panel)}
.dbp-kpi-n{font-size:20px;font-weight:700;color:var(--d-tp);font-variant-numeric:tabular-nums}
.dbp-kpi-l{font-size:11px;color:var(--d-ts);margin-top:3px}

/* breakdown bars */
.dbp-bd-row{display:flex;align-items:center;gap:12px;margin:11px 0}
.dbp-bd-l{font-size:12px;color:var(--d-tp);width:88px;flex-shrink:0}
.dbp-bd-track{flex:1;height:8px;border-radius:100px;background:rgba(255,255,255,.06);overflow:hidden}
.dbp-bd-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--d-pu),var(--d-pl));transition:width .9s cubic-bezier(.4,0,.2,1)}
.dbp-bd-v{font-size:11px;color:var(--d-ts);width:34px;text-align:right;font-variant-numeric:tabular-nums}

/* table (escalations) */
.dbp-tbl{width:100%;border-collapse:collapse;font-size:12px}
.dbp-tbl th{text-align:left;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--d-ts);padding:0 10px 9px;border-bottom:1px solid var(--d-bd)}
.dbp-tbl td{padding:11px 10px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--d-tp);vertical-align:middle}
.dbp-tbl tr:last-child td{border-bottom:0}
.dbp-tbl .dbp-time{color:var(--d-ts)}

/* team rows */
.dbp-team{display:flex;align-items:center;gap:11px;padding:11px 6px;margin:0 -6px;border-bottom:1px solid rgba(255,255,255,.05)}
.dbp-team:last-child{border-bottom:0}
.dbp-team .dbp-av{width:32px;height:32px}
.dbp-team>div{flex:1;min-width:0}
.dbp-team-n{font-size:13px;color:var(--d-tp);font-weight:500}
.dbp-team-r{font-size:11px;color:var(--d-ts)}
.dbp-status{font-size:10px;font-weight:600;display:inline-flex;align-items:center;gap:5px;color:var(--d-ts)}
.dbp-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--d-ts)}
.dbp-status.on{color:var(--d-gr)}.dbp-status.on::before{background:var(--d-gr)}
.dbp-status.away{color:var(--d-am)}.dbp-status.away::before{background:var(--d-am)}
.dbp-team-c{font-size:11px;color:var(--d-ts);white-space:nowrap}

@media(max-width:820px){
  .dbp-body{grid-template-columns:1fr}
  .dbp-side{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--d-bd);gap:2px}
  .dbp-side-logo{width:100%;padding-bottom:8px}
  .dbp-nav{font-size:12px;padding:7px 9px}
  .dbp-nav-badge,.dbp-user,.dbp-side-label,.dbp-nav-static{display:none}
  .dbp-stats{grid-template-columns:repeat(2,1fr)}
  .dbp-grid{grid-template-columns:1fr}
  .dbp-kpis{grid-template-columns:1fr}
  .dbp-chart{height:120px}
}
@media(prefers-reduced-motion:reduce){
  .dbp-chart span,.dbp-bd-fill{transition:none}
  .dbp-livedot,.dbp-typing i{animation:none}
  .dbp-view.show{animation:none}
}

@media(max-width:560px){
  .dbp-tbl{font-size:11px}
  .dbp-tbl th,.dbp-tbl td{padding:8px 6px}
  .dbp-tbl th:nth-child(3),.dbp-tbl td:nth-child(3),.dbp-tbl th:nth-child(4),.dbp-tbl td:nth-child(4){display:none}
}