/* ═══════════════════════════════════════════════════════════════════════════
   v5.333: ƏSAS EKRAN QUTULARI (hdc-*) + ADMİN QURUCUSU (hdb-*)
   Qutular: js/home-cards.js; admin qurucusu: js/home-admin.js
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Qutu ── */
.ctd-hero .ctd-hero-inner{ z-index:4; }   /* hover paneli aşağıdakı kontent zolağının üstündə görünsün */
.hdc-cw{ position:relative; min-width:0; }
.ctd-stat-card.hdc{ display:block; padding:0; overflow:hidden; }
.ctd-stat-card.hdc.hdc-nav{ cursor:pointer; }
.ctd-stat-card.hdc .ctd-stat-cal,
.ctd-stat-card.hdc .ctd-stat-icon{ display:none; }
.hdc-cw:hover .ctd-stat-card.hdc,
.hdc-cw:focus-within .ctd-stat-card.hdc{ transform:translateY(-3px); border-color:#5B9BF5; }

.hdc-band{ height:28px; background:#2563EB; display:flex; align-items:center; justify-content:space-between; padding:0 12px; color:#fff; }
.hdc-tagwrap{ display:flex; align-items:center; gap:7px; font-size:10.5px; font-weight:700; letter-spacing:.09em; }
.hdc-live{ width:6px; height:6px; border-radius:50%; background:#4ADE80; animation:hdcPulse 2.4s ease-in-out infinite; }
@keyframes hdcPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.hdc-segs{ display:flex; gap:4px; }
.hdc-seg{ all:unset; cursor:pointer; position:relative; width:22px; height:14px; display:flex; align-items:center; }
.hdc-bar{ width:100%; height:3px; background:rgba(255,255,255,.34); position:relative; overflow:hidden; border-radius:2px; }
.hdc-bar i{ position:absolute; inset:0; width:0; background:#fff; }
.hdc-seg.done .hdc-bar i{ width:100%; }
.hdc-seg.on .hdc-bar i{ animation:hdcFill 5s linear forwards; }
@keyframes hdcFill{ from{ width:0; } to{ width:100%; } }
.hdc-cw:hover .hdc-seg.on .hdc-bar i,
.hdc-cw:focus-within .hdc-seg.on .hdc-bar i{ animation-play-state:paused; }
.hdc-seg:focus-visible{ outline:2px solid #fff; outline-offset:1px; }

.hdc-viewport{ height:92px; overflow:hidden; }
.hdc-track{ transition:transform .55s cubic-bezier(.4,0,.2,1); }
.hdc-slide{ height:92px; padding:12px 14px 10px; display:flex; flex-direction:column; justify-content:space-between; box-sizing:border-box; }
.hdc-r1{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:20px; }
.hdc-lbl{ font-size:12px; font-weight:600; color:#334155; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.hdc-chip{ flex:none; display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:600; padding:1px 6px; border-radius:4px; font-variant-numeric:tabular-nums; }
.hdc-chip svg{ width:9px; height:9px; }
.hdc-chip.good{ color:#15803D; background:#E5F4EA; }
.hdc-chip.bad{ color:#B42318; background:#FBE7E4; }
.hdc-chip.neutral{ color:#475569; background:#EAEEF4; }
.hdc-r2{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.hdc-val{ position:relative; font-family:'Space Grotesk','Inter',sans-serif; font-size:30px; font-weight:700; line-height:1; letter-spacing:-.01em; color:#0F172A; font-variant-numeric:tabular-nums; transition:color .3s; white-space:nowrap; min-width:0; }
.hdc-val.flash{ color:#2563EB; }
.hdc-plus{ position:absolute; left:100%; top:-4px; margin-left:6px; font-family:'Inter',sans-serif; font-size:11px; font-weight:700; color:#15803D; opacity:0; pointer-events:none; }
.hdc-plus.go{ animation:hdcPlus 1.6s ease-out; }
@keyframes hdcPlus{ 0%{ opacity:0; transform:translateY(6px); } 20%{ opacity:1; } 100%{ opacity:0; transform:translateY(-8px); } }
.hdc-spark{ width:88px; height:30px; flex:none; display:block; }
.hdc-spark-area{ fill:#2563EB; fill-opacity:.12; }
.hdc-spark-line{ fill:none; stroke:#2563EB; stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; }
.hdc-spark-dot{ fill:#2563EB; }
.hdc-ago{ font-size:11px; color:#64748B; white-space:nowrap; padding-bottom:2px; }
.hdc-sub{ font-size:10.5px; color:#64748B; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Hover paneli ── */
/* Panel yalnız hover-də DOM-da görünür (display:none → gizli panel səhifənin scroll sahəsini böyütmür; əvvəl visibility:hidden ilə
   gizlədildikdə #dashboardView-un içində 2-ci scroll yaranırdı) */
.hdc-pop{
  display:none; position:absolute; top:100%; left:0; width:340px; padding-top:12px; z-index:60;
}
@keyframes hdcPopIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.hdc-cw:nth-child(n+3) .hdc-pop{ left:auto; right:0; }
@media (max-width:1240px){
  .hdc-cw:nth-child(even) .hdc-pop{ left:auto; right:0; }
  .hdc-cw:nth-child(odd) .hdc-pop{ left:0; right:auto; }
}
.hdc-cw:hover .hdc-pop, .hdc-cw:focus-within .hdc-pop{ display:block; animation:hdcPopIn .16s ease both; }
@media (max-width:900px){ .hdc-cw:hover .hdc-pop, .hdc-cw:focus-within .hdc-pop{ display:none; } }
.hdc-pop-in{ background:#fff; color:#0F172A; border:1px solid #C5D0DF; border-radius:10px; box-shadow:0 22px 44px -14px rgba(2,12,27,.55); overflow:hidden; font-family:'Inter',sans-serif; text-align:left; }
.hdc-ph{ display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid #E3E9F1; background:#F5F8FC; }
.hdc-ptag{ font-size:10px; font-weight:700; letter-spacing:.08em; color:#fff; background:#2563EB; padding:2px 6px; border-radius:3px; }
.hdc-ptitle{ font-size:12.5px; font-weight:700; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hdc-pper{ font-size:11px; color:#64748B; white-space:nowrap; }
.hdc-pb{ padding:12px 14px; border-bottom:1px solid #E3E9F1; }
.hdc-pb:last-child{ border-bottom:0; }
.hdc-big{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.hdc-big b{ font-family:'Space Grotesk','Inter',sans-serif; font-size:26px; line-height:1; font-variant-numeric:tabular-nums; }
.hdc-big span{ font-size:11.5px; color:#475569; }
.hdc-big .hdc-chip{ font-size:11px; }
.hdc-meta{ font-size:11.5px; color:#475569; margin-top:5px; }
.hdc-pt{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:#64748B; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.hdc-lg{ display:flex; gap:10px; text-transform:none; letter-spacing:0; font-weight:500; flex:none; white-space:nowrap; }
.hdc-pt > span:first-child{ min-width:0; }
.hdc-lg em{ font-style:normal; display:inline-flex; align-items:center; gap:4px; }
.hdc-lg em::before{ content:""; width:8px; height:8px; background:#2563EB; border-radius:2px; }
.hdc-lg em.y::before{ background:none; border-top:2px dashed #64748B; height:0; border-radius:0; }
.hdc-chart{ width:100%; height:auto; display:block; }
.hdc-chart text{ font-family:'Inter',sans-serif; font-size:9.5px; fill:#64748B; }
.hdc-ch-axis{ stroke:#D5DCE6; }
.hdc-ch-bar{ fill:#BFD3F7; }
.hdc-ch-cur{ fill:#2563EB; }
.hdc-ch-prev{ fill:none; stroke:#64748B; stroke-width:1.2; stroke-dasharray:3 2; }
.hdc-br{ display:grid; grid-template-columns:minmax(0,1fr) 40px; gap:2px 10px; align-items:center; margin-bottom:7px; font-size:12px; }
.hdc-br:last-child{ margin-bottom:0; }
.hdc-bn{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hdc-bc{ text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
.hdc-bt{ grid-column:1/-1; height:4px; background:#E7ECF3; border-radius:2px; }
.hdc-bt i{ display:block; height:100%; background:#7FA8F0; border-radius:2px; }
.hdc-lrow{ display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:8px; font-size:12px; padding:5px 0; border-bottom:1px solid #EDF1F6; align-items:center; }
.hdc-lrow:last-child{ border-bottom:0; }
.hdc-tm{ font-variant-numeric:tabular-nums; font-weight:700; }
.hdc-lp{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hdc-st{ font-size:10.5px; color:#475569; background:#EAEEF4; padding:1px 6px; border-radius:3px; white-space:nowrap; }
.hdc-all button{ all:unset; cursor:pointer; box-sizing:border-box; width:100%; display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:8px; align-items:center; font-size:12px; padding:5px 6px; border-radius:4px; }
.hdc-all button:hover{ background:#EEF3FB; }
.hdc-all button:focus-visible{ outline:2px solid #2563EB; }
.hdc-all button.act{ background:#E6EEFC; font-weight:600; }
.hdc-m{ font-size:9.5px; font-weight:700; letter-spacing:.06em; color:#64748B; }
.hdc-al{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hdc-av{ font-weight:700; font-variant-numeric:tabular-nums; }
.hdc-pf{ display:flex; justify-content:space-between; align-items:center; padding:9px 14px; background:#F5F8FC; font-size:11px; color:#64748B; border-top:1px solid #E3E9F1; }
.hdc-goto{ color:#2563EB; font-weight:600; cursor:pointer; }
.hdc-dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:#22C55E; margin-right:6px; }

/* ── Guest hero (tünd, şəffaf qutular) ── */
.ctd-hero.guest-hero .ctd-stat-card.hdc{ background:rgba(13,27,45,.42); }
.ctd-hero.guest-hero .hdc-band{ background:rgba(37,99,235,.7); }
.ctd-hero.guest-hero .hdc-lbl,
.ctd-hero.guest-hero .hdc-val{ color:#fff; }
.ctd-hero.guest-hero .hdc-val.flash{ color:#9FC2FF; }
.ctd-hero.guest-hero .hdc-sub,
.ctd-hero.guest-hero .hdc-ago{ color:#AEBED3; }
.ctd-hero.guest-hero .hdc-chip.good{ color:#86EFAC; background:rgba(34,197,94,.18); }
.ctd-hero.guest-hero .hdc-chip.bad{ color:#FCA5A5; background:rgba(239,68,68,.2); }
.ctd-hero.guest-hero .hdc-chip.neutral{ color:#CBD5E1; background:rgba(255,255,255,.12); }
.ctd-hero.guest-hero .hdc-spark-area{ fill:#9FC2FF; }
.ctd-hero.guest-hero .hdc-spark-line, .ctd-hero.guest-hero .hdc-spark-dot{ stroke:#9FC2FF; }
.ctd-hero.guest-hero .hdc-spark-dot{ fill:#9FC2FF; }
@media (prefers-reduced-motion: reduce){
  .hdc-track, .ctd-stat-card.hdc{ transition:none; }
  .hdc-live, .hdc-plus.go{ animation:none; }
}

/* ═══════════════ ADMİN QURUCUSU ═══════════════ */
.hdb-board{ display:grid; gap:14px; align-items:start; margin-bottom:12px; }
.hdb-cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.hdb-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:920px; }
@media (max-width:1280px){ .hdb-cols-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:720px){ .hdb-cols-4, .hdb-cols-2{ grid-template-columns:1fr; } }
.hdb-col{ background:#fff; border:1px solid #D6E1F2; border-radius:12px; overflow:hidden; }
.hdb-colhead{ display:flex; align-items:center; gap:8px; padding:10px 12px; background:#F5F8FD; border-bottom:1px solid #E3EBF7; }
.hdb-coltitle{ font-size:13.5px; font-weight:800; color:#12233B; }
.hdb-colsub{ font-size:10.5px; font-weight:700; color:#9AACC4; text-transform:uppercase; letter-spacing:.4px; }
.hdb-colmv{ margin-left:auto; display:flex; gap:4px; }
.hdb-ib{ width:24px; height:24px; border-radius:7px; border:1px solid #DCE6F5; background:#fff; color:#5C7089; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.hdb-ib:hover:not(:disabled){ background:#2F6FED; border-color:#2F6FED; color:#fff; }
.hdb-ib.danger:hover:not(:disabled){ background:#DC2626; border-color:#DC2626; }
.hdb-ib:disabled{ opacity:.35; cursor:not-allowed; }
.hdb-slot{ position:relative; display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-bottom:1px solid #EEF2F8; cursor:pointer; }
.hdb-slot:hover{ background:#F6F9FE; }
.hdb-num{ flex:none; width:20px; height:20px; border-radius:6px; background:#E8EEFA; color:#2F6FED; font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; margin-top:1px; }
.hdb-sbody{ flex:1; min-width:0; }
.hdb-stitle{ font-size:13px; font-weight:700; color:#12233B; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hdb-smeta{ font-size:11.5px; color:#6B7D96; margin-top:1px; }
.hdb-old{ display:inline-block; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:#8A6D1D; background:#FBF1D3; padding:0 5px; border-radius:3px; margin-left:4px; }
.hdb-sflt{ display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.hdb-fchip{ font-size:10.5px; color:#3A4C66; background:#EEF2F9; border:1px solid #DFE7F3; padding:1px 6px; border-radius:4px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hdb-fchip b{ font-weight:700; color:#5C7089; }
.hdb-sval{ flex:none; font-family:'Space Grotesk','Inter',sans-serif; font-size:15px; font-weight:700; color:#12233B; min-width:24px; text-align:right; margin-top:1px; }
.hdb-sact{ position:absolute; right:8px; top:8px; display:flex; gap:3px; padding:3px; background:#fff; border:1px solid #DCE6F5; border-radius:8px; box-shadow:0 4px 12px -6px rgba(18,35,59,.35); opacity:0; pointer-events:none; transition:opacity .12s; }
.hdb-slot:hover .hdb-sact, .hdb-slot:focus-within .hdb-sact{ opacity:1; pointer-events:auto; }
.hdb-empty{ all:unset; box-sizing:border-box; width:100%; display:flex; align-items:center; gap:10px; padding:11px 12px; border-bottom:1px solid #EEF2F8; cursor:pointer; color:#8CA0BC; font-size:12.5px; font-weight:600; }
.hdb-empty:hover{ background:#F6F9FE; color:#2F6FED; }
.hdb-empty .hdb-num{ background:#F0F3F8; color:#9AACC4; }
.hdb-empty:focus-visible, .hdb-slot:focus-visible{ outline:2px solid #2F6FED; outline-offset:-2px; }
.hdb-foot{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; font-size:12px; color:#8CA0BC; }
.hdb-dirty{ color:#B45309; font-weight:700; background:#FEF3C7; padding:3px 9px; border-radius:6px; }
.hdb-dirty[hidden]{ display:none; }

/* modal */
.hdb-overlay{ display:none; position:fixed; inset:0; z-index:100000; background:rgba(18,35,59,.55); align-items:center; justify-content:center; padding:20px; }
.hdb-overlay.open{ display:flex; }
.hdb-modal{ background:#fff; border-radius:14px; width:100%; max-width:1120px; max-height:92vh; display:flex; flex-direction:column; box-shadow:0 30px 70px rgba(0,0,0,.28); }
.hdb-mhead{ display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid #E3EBF7; }
.hdb-mtitle{ font-size:16px; font-weight:800; color:#12233B; }
.hdb-x{ width:30px; height:30px; border-radius:8px; border:none; background:#F0F4FB; color:#5C7089; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.hdb-x:hover{ background:#E1EAF6; }
.hdb-mbody{ padding:18px 22px; overflow-y:auto; }
.hdb-mfoot{ display:flex; align-items:center; gap:10px; padding:14px 22px; border-top:1px solid #E3EBF7; }
.hdb-sp{ flex:1; }
.hdb-btn{ padding:10px 18px; border-radius:10px; border:1px solid #DCE6F5; background:#fff; color:#33445E; font-family:'Inter',sans-serif; font-weight:700; font-size:13px; cursor:pointer; }
.hdb-btn:hover{ background:#F3F7FD; }
.hdb-btn.primary{ background:#2F6FED; border-color:#2F6FED; color:#fff; }
.hdb-btn.primary:hover{ background:#2660D6; }
.hdb-btn.ghost{ border-color:transparent; color:#B42318; }
.hdb-btn.ghost:hover{ background:#FEF2F2; }
.hdb-btn.sm{ padding:6px 12px; font-size:12px; border-radius:8px; }
.hdb-grid{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr); gap:24px; align-items:start; }
@media (max-width:900px){ .hdb-grid{ grid-template-columns:1fr; } }
.hdb-fs{ margin-bottom:18px; }
.hdb-fl{ font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#5C7089; margin-bottom:8px; }
.hdb-hint{ text-transform:none; letter-spacing:0; font-weight:500; color:#9AACC4; }
.hdb-warn{ background:#FEF3C7; color:#7C5A0B; border-radius:8px; padding:9px 12px; font-size:12.5px; margin-bottom:14px; }
.hdb-presets{ display:flex; flex-wrap:wrap; gap:6px; }
.hdb-pchip{ font-family:'Inter',sans-serif; font-size:12px; color:#33445E; background:#F4F7FC; border:1px solid #DCE6F5; border-radius:7px; padding:5px 9px; cursor:pointer; }
.hdb-pchip b{ font-size:10px; letter-spacing:.06em; color:#2F6FED; margin-right:3px; }
.hdb-pchip:hover{ background:#E8F0FE; border-color:#2F6FED; }
.hdb-seg{ display:flex; flex-wrap:wrap; gap:0; border:1px solid #D6E1F2; border-radius:9px; overflow:hidden; width:fit-content; max-width:100%; }
.hdb-seg button{ font-family:'Inter',sans-serif; font-size:12.5px; font-weight:700; color:#33445E; background:#fff; border:none; border-right:1px solid #D6E1F2; padding:8px 16px; cursor:pointer; text-align:left; }
.hdb-seg button:last-child{ border-right:none; }
.hdb-seg button small{ display:block; font-weight:500; font-size:10.5px; color:#8CA0BC; }
.hdb-seg button.on{ background:#12233B; color:#fff; }
.hdb-seg button.on small{ color:#B8C6DB; }
.hdb-seg button:hover:not(.on):not(:disabled){ background:#F3F7FD; }
.hdb-seg-sm button{ padding:7px 13px; }
.hdb-seg.off{ opacity:.5; }
.hdb-seg button:disabled{ cursor:not-allowed; }
.hdb-measures{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
@media (max-width:1100px){ .hdb-measures{ grid-template-columns:1fr; } }
.hdb-meas{ display:flex; gap:9px; align-items:flex-start; text-align:left; background:#fff; border:1px solid #DCE6F5; border-radius:9px; padding:8px 10px; cursor:pointer; font-family:'Inter',sans-serif; }
.hdb-meas b{ display:block; font-size:12.5px; color:#12233B; }
.hdb-meas small{ display:block; font-size:11px; color:#8CA0BC; margin-top:1px; line-height:1.35; }
.hdb-mr{ flex:none; width:14px; height:14px; border-radius:50%; border:2px solid #C5D3E8; margin-top:2px; box-sizing:border-box; }
.hdb-meas.on{ border-color:#2F6FED; background:#F3F8FF; }
.hdb-meas.on .hdb-mr{ border-color:#2F6FED; background:radial-gradient(circle,#2F6FED 45%,transparent 50%); }
.hdb-meas:hover:not(.on){ background:#F8FAFE; }
.hdb-filters{ border:1px solid #DCE6F5; border-radius:10px; overflow:hidden; }
.hdb-frow{ display:grid; grid-template-columns:150px minmax(0,1fr) auto; gap:10px; align-items:center; padding:8px 10px; border-bottom:1px solid #EEF2F8; }
.hdb-frow:last-child{ border-bottom:none; }
@media (max-width:560px){ .hdb-frow{ grid-template-columns:1fr auto; } .hdb-fname{ grid-column:1/-1; } }
.hdb-fname{ font-size:12.5px; font-weight:600; color:#33445E; }
.hdb-fval{ display:flex; flex-wrap:wrap; gap:5px; min-width:0; }
.hdb-all{ font-size:12px; color:#9AACC4; }
.hdb-chip{ display:inline-flex; align-items:center; gap:4px; max-width:100%; font-size:12px; color:#12233B; background:#E8F0FE; border:1px solid #C9DAF8; border-radius:6px; padding:2px 3px 2px 8px; }
.hdb-chip > span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }
.hdb-chip button{ all:unset; cursor:pointer; width:16px; height:16px; border-radius:4px; display:inline-flex; align-items:center; justify-content:center; color:#5C7089; }
.hdb-chip button:hover{ background:#2F6FED; color:#fff; }
.hdb-chip button svg{ width:10px; height:10px; }
.hdb-add{ font-family:'Inter',sans-serif; font-size:12px; font-weight:700; color:#2F6FED; background:#fff; border:1px solid #C9DAF8; border-radius:7px; padding:5px 10px; cursor:pointer; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.hdb-add small{ color:#9AACC4; font-weight:600; }
.hdb-add:hover:not(:disabled){ background:#F3F8FF; border-color:#2F6FED; }
.hdb-add:disabled{ color:#B5C2D6; border-color:#E3EAF4; cursor:not-allowed; }
.hdb-add svg{ width:11px; height:11px; }
.hdb-titlerow{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.hdb-titlerow input[type=text]{ flex:1; min-width:200px; padding:10px 12px; border:1.5px solid #DCE6F5; border-radius:9px; font-size:14px; font-family:'Inter',sans-serif; color:#12233B; outline:none; box-sizing:border-box; }
.hdb-titlerow input[type=text]:focus{ border-color:#2F6FED; }
.hdb-titlerow input[readonly]{ background:#F6F8FC; color:#5C7089; }
.hdb-auto{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:#33445E; cursor:pointer; white-space:nowrap; }
.hdb-prev{ position:sticky; top:0; }
.hdb-prevcard{ max-width:320px; transition:opacity .15s; }
.hdb-prevcard.busy{ opacity:.55; }
.hdb-prevload{ font-size:12.5px; color:#8CA0BC; padding:26px 0; }
.hdb-pvcw .ctd-stat-card{ pointer-events:none; }
.hdb-prevpop .hdc-pop-in{ max-width:340px; box-shadow:0 8px 24px -12px rgba(2,12,27,.35); }
.hdb-picker{ position:fixed; z-index:100001; background:#fff; border:1px solid #C5D0DF; border-radius:10px; box-shadow:0 22px 44px -14px rgba(2,12,27,.5); display:flex; flex-direction:column; max-height:380px; font-family:'Inter',sans-serif; }
.hdb-ph{ padding:10px 12px 0; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#5C7089; }
.hdb-psearch{ margin:8px 12px; padding:8px 10px; border:1.5px solid #DCE6F5; border-radius:8px; font-size:13px; outline:none; font-family:'Inter',sans-serif; box-sizing:border-box; width:calc(100% - 24px); }
.hdb-psearch:focus{ border-color:#2F6FED; }
.hdb-plist{ overflow-y:auto; flex:1; min-height:80px; border-top:1px solid #EEF2F8; }
.hdb-popt{ display:flex; align-items:center; gap:9px; padding:7px 12px; font-size:12.5px; color:#12233B; cursor:pointer; }
.hdb-popt:hover{ background:#F3F8FF; }
.hdb-popt input{ margin:0; accent-color:#2F6FED; }
.hdb-popt span{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.hdb-pempty{ padding:18px 12px; font-size:12.5px; color:#9AACC4; text-align:center; }
.hdb-pf{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-top:1px solid #E3EBF7; font-size:11.5px; color:#6B7D96; }
.hdb-pf #hdbPCount{ flex:1; }
.hdb-plink{ all:unset; cursor:pointer; color:#2F6FED; font-size:11.5px; font-weight:700; }
.hdb-plink:hover{ text-decoration:underline; }

.hdb-pres > summary{ cursor:pointer; list-style:none; margin-bottom:0; }
.hdb-pres > summary::-webkit-details-marker{ display:none; }
.hdb-pres > summary::before{ content:'▸'; display:inline-block; width:14px; color:#2F6FED; }
.hdb-pres[open] > summary::before{ content:'▾'; }
.hdb-pres[open] > summary{ margin-bottom:8px; }
.hdb-sval{ margin-right:2px; }

/* ═══════════════ v5.334: ƏSAS EKRAN — 4 MODUL DÜYMƏSİ (hdm-*) ═══════════════
   Xoş gəlmisiniz kartının içində, mətnin sağında 4 canlı modul kartı (js/home-modules.js). */
.ctd-hero:not(.guest-hero) .ctd-welcome-card-actions{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;
  flex:1 1 640px; max-width:880px; width:auto; align-items:stretch; justify-content:stretch;
}
@media (max-width:1180px){
  .ctd-hero:not(.guest-hero) .ctd-welcome-card-actions{ flex-basis:100%; max-width:none; grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .ctd-hero:not(.guest-hero) .ctd-welcome-card-actions{ grid-template-columns:1fr; }
}
.ctd-welcome-card-actions .ctd-device-inv.hdm{
  --hdm-c:#2563EB;
  position:relative; display:flex; flex-direction:column; align-items:stretch; gap:7px;
  flex:none; width:auto; min-width:0; max-width:none; padding:11px 13px 12px;
  background:#FFFFFF; border:1.5px solid #CBD5E1; border-top:4px solid var(--hdm-c); border-radius:14px;
  box-shadow:none; color:#0F172A; text-decoration:none; cursor:pointer; overflow:visible;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ctd-welcome-card-actions .ctd-device-inv.hdm-inv{ --hdm-c:#0F766E; }
.ctd-welcome-card-actions .ctd-device-inv.hdm-att{ --hdm-c:#15803D; }
.ctd-welcome-card-actions .ctd-device-inv.hdm-sch{ --hdm-c:#5B4FCF; }
.ctd-welcome-card-actions .ctd-device-inv.hdm:hover,
.ctd-welcome-card-actions .ctd-device-inv.hdm:focus-visible{ transform:translateY(-3px); border-color:var(--hdm-c); box-shadow:0 12px 24px -16px var(--hdm-c); z-index:5; }
.ctd-welcome-card-actions .ctd-device-inv.hdm:focus-visible{ outline:2px solid var(--hdm-c); outline-offset:2px; }
.hdm-head{ display:flex; align-items:center; gap:9px; min-width:0; }
.hdm-ic{ flex:none; width:30px; height:30px; border-radius:8px; background:var(--hdm-c); color:#fff; display:inline-flex; align-items:center; justify-content:center; }
.hdm-ic svg{ width:17px; height:17px; }
.hdm-title{ flex:1; min-width:0; font-size:12.5px; font-weight:700; line-height:1.2; color:#0F172A; }
.hdm-live{ flex:none; display:inline-flex; align-items:center; gap:4px; font-size:9.5px; font-weight:700; letter-spacing:.06em; color:#15803D; }
.hdm-live[hidden]{ display:none; }
.hdm-live i{ width:6px; height:6px; border-radius:50%; background:#22C55E; animation:hdcPulse 2.4s ease-in-out infinite; }
.hdm-num{ display:flex; align-items:baseline; gap:6px; min-width:0; white-space:nowrap; }
.hdm-num b{ font-family:'Space Grotesk','Inter',sans-serif; font-size:27px; font-weight:700; line-height:1; letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:#0F172A; }
.hdm-num small{ font-size:11.5px; font-weight:600; color:#64748B; overflow:hidden; text-overflow:ellipsis; }
.hdm-cap{ font-size:11px; color:#475569; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hdm-viz{ display:block; min-height:8px; margin-top:auto; }
.hdm-track{ display:flex; height:6px; background:#E7ECF3; border-radius:3px; overflow:hidden; gap:1px; }
.hdm-track i{ display:block; height:100%; }
.hdm-week{ display:flex; gap:3px; }
.hdm-week i{ flex:1; font-style:normal; height:18px; border-radius:4px; background:#EEF1F7; color:#64748B; font-size:9.5px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.hdm-week i.we{ opacity:.55; }
.hdm-week i.td{ background:var(--hdm-c); color:#fff; opacity:1; }

/* hover paneli (qutulardakı ilə eyni dil) */
.hdm-pop{
  display:none; position:absolute; top:100%; left:0; width:300px; padding-top:10px; z-index:60; cursor:default; text-align:left;
}
.hdm:nth-last-child(-n+2) .hdm-pop{ left:auto; right:0; }
.hdm:hover .hdm-pop:not(:empty), .hdm:focus-visible .hdm-pop:not(:empty){ display:block; animation:hdcPopIn .16s ease both; }
@media (max-width:900px){ .hdm:hover .hdm-pop, .hdm:focus-visible .hdm-pop{ display:none; } }
.hdm-pop-in{ display:block; background:#fff; border:1px solid #C5D0DF; border-radius:10px; box-shadow:0 22px 44px -14px rgba(2,12,27,.5); overflow:hidden; font-family:'Inter',sans-serif; color:#0F172A; }
.hdm-fh{ display:flex; justify-content:space-between; gap:8px; padding:9px 13px; background:#F5F8FC; border-bottom:1px solid #E3E9F1; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#64748B; }
.hdm-fr{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 8px; padding:7px 13px; font-size:12px; border-bottom:1px solid #EDF1F6; align-items:center; }
.hdm-fr > span:first-child{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hdm-fr b{ font-variant-numeric:tabular-nums; }
.hdm-fr em{ font-style:normal; font-size:10.5px; color:#64748B; white-space:nowrap; }
.hdm-fbar{ grid-column:1/-1; display:block; height:4px; background:#E7ECF3; border-radius:2px; }
.hdm-fbar i{ display:block; height:100%; border-radius:2px; }
.hdm-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; }
.hdm-ff{ display:block; padding:9px 13px; background:#F5F8FC; font-size:11.5px; font-weight:600; color:#2563EB; }
body.dark-mode .ctd-welcome-card-actions .ctd-device-inv.hdm{ background:#16212E; border-color:#2A3D55; border-top-color:var(--hdm-c); }
body.dark-mode .hdm-title, body.dark-mode .hdm-num b{ color:#E8EEF5; }
body.dark-mode .hdm-num small, body.dark-mode .hdm-cap{ color:#9FB0C8; }
body.dark-mode .hdm-track{ background:#243247; }
@media (prefers-reduced-motion: reduce){ .hdm-live i{ animation:none; } .ctd-welcome-card-actions .ctd-device-inv.hdm{ transition:none; } .hdc-cw:hover .hdc-pop, .hdm:hover .hdm-pop{ animation:none; } }

/* ═══════════════ v5.335: SERVİS PANELİ (svp-*) — BUS / Metro-Turniket / TVM / POS ═══════════════
   Tab-lar qovluq ləçəyi kimi aşağıdakı panelə əyri künclə birləşir; panelin içində: başlıq (rəqəmlər),
   iş axını (Giriş → İcra → İzləmə) və analitika/alət siyahısı. Rəng = servisin öz rəngi (--c / --tc). */
.ctd-tabs .ctd-tabbar.svp-bar{ display:flex; align-items:flex-end; gap:2px; border-bottom:0; padding:0; overflow:visible; flex-wrap:wrap; position:relative; z-index:2; }
.ctd-tabs .ctd-tabbar.svp-bar .ctd-tab.svp-tab{
  all:unset; box-sizing:border-box; cursor:pointer; position:relative; display:flex; align-items:center; gap:11px;
  padding:11px 20px 11px 13px; border-radius:15px 15px 0 0; background:rgba(255,255,255,.5); border:1px solid rgba(15,23,42,.07); border-bottom:0;
  font-family:'Inter',sans-serif; min-width:0;
  transition:background-color .2s cubic-bezier(.22,.8,.3,1), transform .2s cubic-bezier(.22,.8,.3,1);
}
.ctd-tabs .ctd-tabbar.svp-bar .ctd-tab.svp-tab:hover{ background:rgba(255,255,255,.82); transform:translateY(-2px); }
.ctd-tabs .ctd-tabbar.svp-bar .ctd-tab.svp-tab:active{ transform:translateY(0) scale(.985); }
.ctd-tabs .ctd-tabbar.svp-bar .ctd-tab.svp-tab:focus-visible{ outline:2px solid var(--tc); outline-offset:2px; }
.svp-ti{ width:32px; height:32px; border-radius:10px; background:var(--tc); color:#fff; display:grid; place-items:center; flex:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 4px 10px -5px var(--tc); transition:transform .25s cubic-bezier(.22,.8,.3,1); }
.svp-ti svg{ width:17px; height:17px; stroke:#fff; }
.svp-tab:hover .svp-ti{ transform:scale(1.07) rotate(-4deg); }
.svp-tx{ display:flex; flex-direction:column; }
.svp-tn{ font-size:13.5px; font-weight:700; line-height:1.15; white-space:nowrap; color:#0F172A; }
.svp-tc{ font-size:11.5px; color:#64748B; white-space:nowrap; }
.svp-tc b{ font-family:'Space Grotesk','Inter',sans-serif; font-weight:700; color:var(--tc); font-size:12.5px; }
.ctd-tabs .ctd-tabbar.svp-bar .ctd-tab.svp-tab.active{ background:#fff; border-color:#CFD8E4; padding-top:14px; padding-bottom:13px; margin-bottom:-1px; z-index:3; transform:none; box-shadow:none; color:#0F172A; }
.svp-tab.active::before, .svp-tab.active::after{ content:""; position:absolute; bottom:0; width:15px; height:15px; pointer-events:none; }
.svp-tab.active::before{ left:-15px; background:radial-gradient(circle at 0 0, transparent 14px, #CFD8E4 14px, #CFD8E4 15px, #fff 15px); }
.svp-tab.active::after{ right:-15px; background:radial-gradient(circle at 100% 0, transparent 14px, #CFD8E4 14px, #CFD8E4 15px, #fff 15px); }
.svp-tab.active.first::before{ display:none; }

.ctd-tab-stage{ margin-top:0; }
.ctd-tab-panel.entering{ animation:none; }
.ctd-module-card.svp{ padding:0; overflow:hidden; background:#fff; border:1px solid #CFD8E4; border-radius:18px; box-shadow:0 1px 2px rgba(15,23,42,.05), 0 18px 34px -22px rgba(15,23,42,.28); position:relative; }
.ctd-module-card.svp.svp-first{ border-top-left-radius:0; }
.svp-head{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px 28px; flex-wrap:wrap; padding:20px 24px 18px; background:color-mix(in srgb, var(--c) 5%, #fff); border-bottom:1px solid #E6ECF4; }
.svp-head::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(color-mix(in srgb, var(--c) 22%, transparent) 1px, transparent 1.3px); background-size:14px 14px; -webkit-mask-image:linear-gradient(90deg, transparent 30%, #000 100%); mask-image:linear-gradient(90deg, transparent 30%, #000 100%); pointer-events:none; opacity:.6; }
.svp-head > *{ position:relative; }
.svp-h3{ font-size:19px; font-weight:700; letter-spacing:-.01em; color:#0F172A; }
.svp-hp{ margin:2px 0 0; font-size:12.5px; color:#64748B; }
.svp-stats{ display:flex; gap:26px; flex-wrap:wrap; }
.svp-stat{ display:flex; flex-direction:column; gap:1px; }
.svp-stat b{ font-family:'Space Grotesk','Inter',sans-serif; font-size:24px; font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:6px; color:#0F172A; }
.svp-stat small{ font-size:11.5px; color:#64748B; font-weight:500; }
.svp-chip{ font-family:'Inter',sans-serif; font-size:10.5px; font-weight:700; padding:1px 6px; border-radius:6px; background:#E3F3E9; color:#166534; }
.svp-chip[hidden]{ display:none; }
.svp-chip.dn{ background:#F9E4E1; color:#A32517; }
.svp-body{ display:grid; grid-template-columns:minmax(0,2.1fr) minmax(250px,1fr); }
@media (max-width:1000px){ .svp-body{ grid-template-columns:1fr; } }
.ctd-tab-panel.entering .svp-head, .ctd-tab-panel.entering .svp-body{ animation:svpSwap .34s cubic-bezier(.22,.8,.3,1); }
@keyframes svpSwap{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.svp-flow{ display:flex; gap:22px; padding:22px 24px 24px; align-items:stretch; }
.svp-card{ position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:5px; padding:17px 18px 16px; border-radius:16px; background:#fff; border:1px solid #CFD8E4; box-shadow:0 1px 2px rgba(15,23,42,.04); text-decoration:none; color:#0F172A; cursor:pointer; transition:transform .22s cubic-bezier(.22,.8,.3,1), box-shadow .22s cubic-bezier(.22,.8,.3,1), border-color .22s; }
.svp-card:not(:last-child)::after{ content:""; position:absolute; top:50%; right:-22px; width:22px; border-top:2px dotted color-mix(in srgb, var(--c) 50%, #fff); pointer-events:none; }
.svp-fx{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(180px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb, var(--c) 13%, transparent), transparent 70%); opacity:0; transition:opacity .25s; }
.svp-card:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--c) 55%, #fff); box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 11%, transparent), 0 16px 28px -16px color-mix(in srgb, var(--c) 55%, transparent); }
.svp-card:hover .svp-fx{ opacity:1; }
.svp-card:active{ transform:translateY(-1px) scale(.988); }
.svp-card:focus-visible, .svp-row:focus-visible{ outline:2px solid var(--c); outline-offset:2px; }
.svp-card > *:not(.svp-fx){ position:relative; }
.svp-ct{ display:flex; align-items:center; justify-content:space-between; }
.svp-ci{ width:38px; height:38px; border-radius:12px; background:var(--c); color:#fff; display:grid; place-items:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 6px 12px -6px var(--c); transition:transform .3s cubic-bezier(.22,.8,.3,1); }
.svp-ci svg{ width:19px; height:19px; stroke:#fff; }
.svp-card:hover .svp-ci{ transform:scale(1.08) rotate(-5deg); }
.svp-st{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#64748B; }
.svp-tt{ font-size:15.5px; font-weight:700; line-height:1.25; margin-top:8px; letter-spacing:-.005em; }
.svp-ds{ font-size:12px; color:#64748B; }
.svp-bt{ margin-top:auto; padding-top:12px; display:flex; align-items:flex-end; justify-content:space-between; gap:8px; }
.svp-n{ font-family:'Space Grotesk','Inter',sans-serif; font-size:31px; font-weight:600; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; display:block; }
.svp-nl{ font-size:11px; color:#64748B; display:block; margin-top:4px; }
.svp-go{ width:32px; height:32px; border-radius:50%; border:1px solid #CFD8E4; display:grid; place-items:center; color:#64748B; background:#fff; transition:background-color .2s, color .2s, border-color .2s, transform .25s cubic-bezier(.22,.8,.3,1); }
.svp-go svg{ width:15px; height:15px; }
.svp-card:hover .svp-go{ background:var(--c); border-color:var(--c); color:#fff; transform:translateX(3px); }
.svp-card.hot{ background:linear-gradient(180deg, color-mix(in srgb, var(--c) 7%, #fff), #fff 70%); border-color:color-mix(in srgb, var(--c) 30%, #CFD8E4); }
.svp-card.hot .svp-n{ color:var(--c); }
.svp-card.hot .svp-n.zero{ color:#94A3B8; }
.svp-ringwrap{ display:flex; align-items:center; gap:9px; color:var(--c); }
.svp-ring{ width:44px; height:44px; }
.svp-side{ padding:22px 24px 24px 2px; display:flex; flex-direction:column; gap:8px; }
@media (max-width:1000px){ .svp-side{ padding:0 24px 24px; } }
.svp-sh{ font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#64748B; margin:2px 0 2px 2px; }
.svp-row{ position:relative; display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:13px; border:1px solid #CFD8E4; background:#fff; text-decoration:none; color:#0F172A; cursor:pointer; transition:transform .2s cubic-bezier(.22,.8,.3,1), background-color .2s, border-color .2s, box-shadow .2s; }
.svp-ri{ width:32px; height:32px; border-radius:10px; background:color-mix(in srgb, var(--c) 11%, #fff); color:var(--c); display:grid; place-items:center; flex:none; transition:background-color .2s, color .2s; }
.svp-ri svg{ width:16px; height:16px; }
.svp-rt{ display:flex; flex-direction:column; min-width:0; }
.svp-rl{ font-size:13.5px; font-weight:600; line-height:1.2; }
.svp-rs{ font-size:11px; color:#64748B; }
.svp-rc{ margin-left:auto; color:#64748B; transition:transform .2s cubic-bezier(.22,.8,.3,1), color .2s; }
.svp-rc svg{ width:15px; height:15px; }
.svp-row:hover{ transform:translateX(3px); border-color:color-mix(in srgb, var(--c) 50%, #fff); background:color-mix(in srgb, var(--c) 4%, #fff); box-shadow:0 10px 20px -14px color-mix(in srgb, var(--c) 60%, transparent); }
.svp-row:hover .svp-ri{ background:var(--c); color:#fff; }
.svp-row:hover .svp-rc{ transform:translateX(3px); color:var(--c); }
.svp-row:active{ transform:translateX(3px) scale(.985); }
.svp-row.soon{ background:#F6F8FB; }
.svp-row.soon .svp-ri{ background:#EAEFF5; color:#8A97AB; }
.svp-row.soon .svp-rl{ color:#5B6B82; }
.svp-tool{ margin-top:auto; }
.svp-tool .svp-row{ border-style:dashed; background:transparent; padding:9px 13px; }
.svp-tool .svp-rl{ font-weight:500; font-size:13px; color:#3B4A63; }
@media (max-width:1000px){ .svp-flow{ flex-wrap:wrap; } .svp-card{ flex:1 1 220px; } .svp-card:not(:last-child)::after{ display:none; } }
body.dark-mode .ctd-module-card.svp{ background:#16212E; border-color:#2A3D55; }
body.dark-mode .svp-head{ background:#1B2A3D; border-color:#2A3D55; }
body.dark-mode .svp-h3, body.dark-mode .svp-stat b, body.dark-mode .svp-tt, body.dark-mode .svp-rl, body.dark-mode .svp-n{ color:#E8EEF5; }
body.dark-mode .svp-card, body.dark-mode .svp-row{ background:#1B2A3D; border-color:#2A3D55; color:#E8EEF5; }
body.dark-mode .svp-card.hot{ background:#1F3049; }
body.dark-mode .ctd-tabs .ctd-tabbar.svp-bar .ctd-tab.svp-tab.active{ background:#16212E; border-color:#2A3D55; }
body.dark-mode .svp-tn{ color:#E8EEF5; }
@media (prefers-reduced-motion: reduce){ .svp-card, .svp-row, .svp-tab, .svp-go, .svp-ci{ transition:none; } .ctd-tab-panel.entering .svp-head, .ctd-tab-panel.entering .svp-body{ animation:none; } }

/* v5.336: əsas ekranda 2-ci scroll — #dashboardView özü scroll konteyneri idi (overflow-y:auto) və içindəki mütləq mövqeli
   elementlər (hover panelləri) onun scroll sahəsini böyüdürdü. overflow:clip scroll konteyneri yaratmır: üfüqi kəsilmə qalır,
   yalnız brauzerin öz (tək) scroll-u işləyir. */
@supports (overflow:clip){
  html body #dashboardView[style*="display: block"]{ overflow-x:clip; overflow-y:visible; }
}