/* ==========================================================================
   XSECURE — DDOS REPORT DASHBOARD (inside the laptop on services/xddos.html)
   Rebuilt from the customer report structure. All IPs, prefixes, ASNs and
   customer identity are masked in the markup (.dash-mask).
   Layout responds to the laptop screen width via a container query.
   ========================================================================== */

.device__view {
    container-type: inline-size;
}

.dash {
    --d-bg: #11141f;
    --d-card: #1a1e2c;
    --d-line: rgba(255, 255, 255, 0.07);
    --d-muted: #8b91a8;
    --d-violet: #6c5cff;
    --d-teal: #14c8a8;
    --d-cyan: #22d3ee;
    --d-red: #ff4d5e;
    --d-amber: #ffb020;
    --d-green: #2fd17a;
    --d-blue: #2f8cff;
    display: grid;
    gap: 14px;
    padding: 0 16px 18px;
    font-family: var(--font-body);
    font-size: 12px;
    color: #e6e8f2;
    background: var(--d-bg);
}

/* Header ---------------------------------------------------------------- */
.dash-top {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 -16px;
    padding: 10px 16px;
    background: rgba(17, 20, 31, 0.95);
    border-bottom: 1px solid var(--d-line);
    backdrop-filter: blur(6px);
}

.dash-brand {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 800;
    color: var(--d-cyan);
}

.dash-brand small {
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--d-muted);
}

.dash-crumb { flex: 1; color: var(--d-muted); }

.dash-user {
    padding: 4px 10px;
    font-weight: 600;
    border: 1px solid var(--d-line);
    border-radius: 6px;
}

.dash-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
}

.dash-head h3 {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
}

.dash-head p { margin-top: 4px; color: var(--d-muted); font-size: 11px; }

.dash-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 460px;
    list-style: none;
}

.dash-flags li {
    padding: 4px 8px;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--d-muted);
    border: 1px solid var(--d-line);
    border-radius: 6px;
}

.dash-flags b.on  { color: var(--d-green); }
.dash-flags b.off { color: var(--d-red); }

.dash-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--d-line);
    border-radius: 10px;
    background: var(--d-card);
}

.dash-filter span {
    padding: 4px 10px;
    font-size: 11px;
    border: 1px solid var(--d-line);
    border-radius: 7px;
}

.dash-filter .lbl {
    border: none;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--d-muted);
}

.dash-filter .act     { color: #ffffff; background: var(--d-violet); border-color: var(--d-violet); }
.dash-filter .act.red { background: var(--d-red); border-color: var(--d-red); }

/* Masked values ---------------------------------------------------------- */
.dash-mask {
    display: inline-block;
    padding: 1px 6px;
    font-family: 'DejaVu Sans Mono', ui-monospace, monospace;
    font-size: 0.92em;
    font-weight: 400;
    color: #9aa0bd;
    border-radius: 4px;
    background: #2c3046;
    box-shadow: inset 0 0 0 1px #4e5473;
}

/* Cards & layout --------------------------------------------------------- */
.dash-card {
    padding: 14px;
    border: 1px solid var(--d-line);
    border-radius: 12px;
    background: var(--d-card);
}

.dash-card h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
}

.dash-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

/* Let wide tables scroll inside their card instead of stretching the layout */
.dash { grid-template-columns: minmax(0, 1fr); }
.dash > *,
.dash-row > * { min-width: 0; }

.pill {
    padding: 2px 8px;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    border-radius: 6px;
    color: var(--d-muted);
    background: rgba(255, 255, 255, 0.06);
}

.pill.green  { color: var(--d-green); background: rgba(47, 209, 122, 0.12); }
.pill.amber  { color: var(--d-amber); background: rgba(255, 176, 32, 0.14); }
.pill.red    { color: var(--d-red);   background: rgba(255, 77, 94, 0.14); }
.pill.violet { color: #a99fff;        background: rgba(108, 92, 255, 0.18); }

.red   { color: var(--d-red); }
.amber { color: var(--d-amber); }

/* KPI cards --------------------------------------------------------------- */
.dash-kpis {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.dash-kpis--4 { grid-template-columns: repeat(4, 1fr); }

.kpi {
    --k: var(--d-cyan);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    text-align: center;
    border: 1px solid var(--d-line);
    border-radius: 12px;
    background: var(--d-card);
}

.dash-kpis--4 .kpi { background: rgba(0, 0, 0, 0.25); }

.kpi i {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--k);
    box-shadow: 0 0 14px var(--k);
    opacity: 0.9;
}

.kpi b {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 800;
    color: var(--k);
}

.kpi span {
    font-size: 8.5px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--d-muted);
}

.kpi--red    { --k: var(--d-red); }
.kpi--amber  { --k: var(--d-amber); }
.kpi--violet { --k: #8f80ff; }
.kpi--green  { --k: var(--d-green); }
.kpi--blue   { --k: var(--d-blue); }

/* Charts ------------------------------------------------------------------- */
.dash-chart {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.dash-chart text,
.dash-chart .axis-t { font-size: 10px; fill: var(--d-muted); }

.dash-chart .grid path { stroke: var(--d-line); }

.dash-bar {
    fill: var(--d-violet);
    opacity: 0.85;
    transform-box: fill-box;
    transform-origin: bottom;
    transition: opacity 0.2s ease;
}

.dash-bar:hover { opacity: 1; fill: #8f80ff; }
.dash-bar.hot   { fill: var(--d-red); }

.dash-line {
    fill: none;
    stroke: var(--d-teal);
    stroke-width: 2.5;
    stroke-dasharray: 1;
}

.dash-dots circle { fill: var(--d-teal); }

.dash-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
    margin-bottom: 6px;
    font-size: 10px;
    color: var(--d-muted);
}

.sw-line { width: 14px; height: 3px; background: var(--d-teal); }
.sw-bar  { width: 10px; height: 10px; background: var(--d-violet); }

.dash-donut {
    display: flex;
    align-items: center;
    gap: 16px;
}

.dash-donut svg { width: 46%; max-width: 180px; flex-shrink: 0; }
.dash-donut .big { font-family: var(--font-heading); font-size: 20px; font-weight: 800; fill: #ffffff; }
.dash-donut .sm  { font-size: 10px; fill: var(--d-muted); }

.dash-donut ul {
    display: grid;
    flex: 1;
    gap: 6px;
    list-style: none;
}

.dash-donut li { display: flex; align-items: center; gap: 8px; }
.dash-donut li i { width: 10px; height: 10px; border-radius: 3px; }
.dash-donut li b { margin-left: auto; }

.dash-seg { transition: stroke-width 0.2s ease; }
.dash-seg:hover { stroke-width: 30; }

.dash-note { font-size: 10.5px; color: var(--d-muted); margin-top: 6px; }

/* Meters ---------------------------------------------------------------------- */
.meter {
    --m: linear-gradient(90deg, var(--d-violet), var(--d-teal));
    display: inline-block;
    width: 100%;
    max-width: 120px;
    height: 5px;
    overflow: hidden;
    vertical-align: middle;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
}

.meter i {
    display: block;
    width: var(--w);
    height: 100%;
    border-radius: 3px;
    background: var(--m);
    transform-origin: left;
}

.meter--red   { --m: var(--d-red); }
.meter--amber { --m: var(--d-amber); }
.meter--blue  { --m: var(--d-blue); }
.meter--green { --m: var(--d-green); max-width: none; }

/* Hosts ---------------------------------------------------------------------- */
.dash-hosts { display: grid; gap: 14px; list-style: none; }

.host-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.host-head small { margin-left: auto; color: var(--d-muted); font-size: 10.5px; }
.dash-hosts .meter { max-width: none; }

.n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 10px;
    border-radius: 5px;
    color: #a99fff;
    background: rgba(108, 92, 255, 0.18);
}

.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }

.tags span {
    padding: 2px 7px;
    font-size: 9.5px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
}

/* Tables ---------------------------------------------------------------------- */
.dash-table { overflow-x: auto; }

.dash-table table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

.dash-table th {
    padding: 8px 10px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-align: left;
    text-transform: uppercase;
    color: var(--d-muted);
    background: rgba(255, 255, 255, 0.04);
}

.dash-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--d-line);
}

.dash-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.dash-table small { color: #6fa8ff; font-size: 10px; }

/* Geo -------------------------------------------------------------------------- */
.dash-geo { display: grid; gap: 7px; list-style: none; }

.dash-geo li {
    display: grid;
    grid-template-columns: 18px 120px 1fr 78px 26px;
    align-items: center;
    gap: 8px;
}

.dash-geo .meter { max-width: none; }
.dash-geo em { font-style: normal; font-weight: 600; text-align: right; }
.dash-geo small { color: var(--d-muted); }

.dash-minis { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }

.dash-minis div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    text-align: center;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
}

.dash-minis b { font-family: var(--font-heading); font-size: 17px; color: var(--d-blue); }
.dash-minis .red b   { color: var(--d-red); }
.dash-minis .amber b { color: var(--d-amber); }
.dash-minis span { font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--d-muted); }

.dash-warn {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 10px;
    font-size: 10.5px;
    border-radius: 6px;
    color: var(--d-red);
    background: rgba(255, 77, 94, 0.12);
}

.dash-warn.amber { color: var(--d-amber); background: rgba(255, 176, 32, 0.12); }

/* Map --------------------------------------------------------------------------- */
.dash-map {
    position: relative;
    height: 220px;
    overflow: hidden;
    border-radius: 10px;
    background:
        radial-gradient(ellipse 22% 30% at 20% 45%, rgba(120, 100, 60, 0.35), transparent),
        radial-gradient(ellipse 28% 26% at 62% 42%, rgba(120, 100, 60, 0.35), transparent),
        radial-gradient(ellipse 18% 22% at 84% 58%, rgba(120, 100, 60, 0.3), transparent),
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 100% 22px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 22px 100%,
        #13283a;
}

.spot {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border-radius: 50%;
    background: rgba(91, 76, 255, 0.95);
    box-shadow: 0 0 0 3px rgba(91, 76, 255, 0.35);
}

.spot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid rgba(143, 128, 255, 0.8);
    animation: spot-ping 2.4s ease-out infinite;
    animation-delay: var(--d);
}

.spot b { font-size: 10px; color: #ffffff; }

@keyframes spot-ping {
    0%   { transform: scale(1); opacity: 0.9; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* Alerts ------------------------------------------------------------------------- */
.dash-alerts { display: grid; gap: 6px; list-style: none; }

.dash-alerts li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--d-line);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
}

.dash-alerts b { font-family: monospace; color: #8f80ff; }
.dash-alerts .bw  { color: var(--d-muted); }
.dash-alerts .vec { margin-left: auto; padding: 2px 7px; font-size: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.07); }
.dash-alerts time { color: var(--d-muted); font-size: 10.5px; }

.sev {
    padding: 2px 7px;
    font-size: 10px;
    font-style: normal;
    border-radius: 5px;
}

.sev--high     { color: var(--d-amber); background: rgba(255, 176, 32, 0.14); }
.sev--medium   { color: var(--d-blue);  background: rgba(47, 140, 255, 0.14); }
.sev--low      { color: var(--d-green); background: rgba(47, 209, 122, 0.14); }
.sev--critical { color: var(--d-red);   background: rgba(255, 77, 94, 0.14); }

.dash-more { margin-top: 8px; text-align: center; color: var(--d-muted); }

/* Insights ------------------------------------------------------------------------ */
.dash-insights { border-left: 3px solid var(--d-violet); }
.dash-insights ul { display: grid; gap: 12px; list-style: none; }
.dash-insights li { display: flex; gap: 12px; }

.dash-insights li i {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 2px var(--c);
}

.dash-insights b { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c); }
.dash-insights p { margin-top: 2px; color: #c9cde0; line-height: 1.5; }
.dash-insights p b { font-size: inherit; letter-spacing: 0; text-transform: none; color: #ffffff; }

.ins--amber { --c: var(--d-amber); }
.ins--red   { --c: var(--d-red); }
.ins--green { --c: var(--d-green); }
.ins--blue  { --c: var(--d-blue); }

.dash-foot { text-align: center; font-size: 10px; color: var(--d-muted); }

/* Animations: charts draw in as each card scrolls into the screen ------------------ */
.dash-anim .dash-bar   { transform: scaleY(0); transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.dash-anim .dash-line  { stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s ease 0.4s; }
.dash-anim .meter i    { transform: scaleX(0); transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1); }
.dash-anim .dash-seg   { opacity: 0; transition: opacity 0.9s ease, stroke-width 0.2s ease; }

.dash-anim.on .dash-bar  { transform: scaleY(1); }
.dash-anim.on .dash-line { stroke-dashoffset: 0; }
.dash-anim.on .meter i   { transform: scaleX(1); }
.dash-anim.on .dash-seg  { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .dash-anim .dash-bar, .dash-anim .meter i { transform: none; transition: none; }
    .dash-anim .dash-line { stroke-dashoffset: 0; transition: none; }
    .dash-anim .dash-seg  { opacity: 1; transition: none; }
    .spot::after { animation: none; }
}

/* Narrow screens (phone): stack everything ------------------------------------------- */
@container (max-width: 640px) {
    .dash-row     { grid-template-columns: minmax(0, 1fr); }
    .dash-head h3 { font-size: 15px; }
    .dash-kpis    { grid-template-columns: repeat(2, 1fr); }
    .dash-kpis--4 { grid-template-columns: repeat(2, 1fr); }
    .dash-geo li  { grid-template-columns: 18px 1fr 70px; }
    .dash-geo .meter, .dash-geo small { display: none; }
    .dash-alerts .vec { margin-left: 0; }
    .dash-crumb   { display: none; }
    .dash-donut   { flex-direction: column; }
    .dash-donut svg { width: 60%; }
    .dash-donut ul  { width: 100%; }
}