/* DASE · Hallintakeskus — valvonta-, kävijä- ja palvelinnäkymien tyylit (täydentää app-theme.css:ää) */

/* ---------- Välilehdet ---------- */
.tabs { display: flex; gap: 0.35rem; margin: -0.75rem 0 2rem; padding: 0.3rem; width: fit-content; max-width: 100%; overflow-x: auto; border-radius: 0.85rem; background: rgba(6, 12, 24, 0.7); border: 1px solid var(--dx-edge); backdrop-filter: blur(14px); }
.tabs button {
  font-family: var(--dx-display); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.58rem; font-weight: 700; white-space: nowrap;
  padding: 0.7rem 1.15rem; border-radius: 0.6rem; border: 1px solid transparent; background: transparent; color: #7fa3c0; cursor: pointer; transition: color .2s, background .2s, box-shadow .2s;
}
.tabs button:hover { color: #d6efff; }
.tabs button.on { color: #e9f7ff; background: linear-gradient(160deg, rgba(30, 80, 130, 0.55), rgba(10, 24, 46, 0.8)); border-color: rgba(125, 211, 252, 0.4); box-shadow: 0 0 20px rgba(56, 189, 248, 0.2), inset 0 1px 0 rgba(186, 230, 253, 0.14); }
.tabs button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tab-panel[hidden] { display: none !important; }
.tab-panel { animation: dx-rise 0.45s cubic-bezier(.16, .84, .3, 1) both; }

/* ---------- Yleiset ---------- */
.mon-card { border-radius: 1.1rem; background: var(--dx-glass); border: 1px solid var(--dx-edge); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(186, 230, 253, 0.08); overflow: hidden; margin-bottom: 1rem; }
.mon-card.pad { padding: 1.25rem 1.35rem; overflow: visible; }
.muted { color: #6f8aa5; font-size: 0.8rem; }
.good { color: #34d399; } .ok { color: #fbbf24; } .bad { color: #f87171 !important; }
.sec { font-family: var(--dx-display); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.56rem; font-weight: 700; color: #7fb4d6; margin: 0 0 0.9rem; }
.section-title { font-family: var(--dx-display); text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.7rem; font-weight: 700; color: var(--dx-ice); margin: 2.4rem 0 1rem; text-shadow: 0 0 14px rgba(56, 189, 248, 0.45); display: flex; align-items: center; gap: 0.75rem; }
.section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(125, 211, 252, 0.55), transparent); }
.kpi-sub { position: relative; margin-top: 0.35rem; font-size: 0.7rem; color: #6f8aa5; }
.tag { display: inline-block; font-size: 0.62rem; padding: 0.1rem 0.45rem; border-radius: 0.35rem; border: 1px solid rgba(56, 189, 248, 0.3); color: #7fc7ee; background: rgba(56, 189, 248, 0.08); vertical-align: 0.05rem; }
.tag.bad { border-color: rgba(239, 68, 68, 0.45); background: rgba(239, 68, 68, 0.1); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.spark { display: block; }

/* ---------- Huomiopaneeli ---------- */
.att-ok { display: flex; align-items: center; gap: 0.8rem; padding: 1rem 1.25rem; border-radius: 1.1rem; margin-bottom: 1.25rem; background: linear-gradient(160deg, rgba(10, 60, 48, 0.45), rgba(4, 16, 18, 0.8)); border: 1px solid rgba(52, 211, 153, 0.35); box-shadow: 0 0 40px rgba(16, 185, 129, 0.1); font-size: 0.85rem; }
.att-ok b { font-family: var(--dx-display); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.68rem; color: #6ee7b7; }
.att-ok span { color: #6f9a8a; }
.att-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #10b981; box-shadow: 0 0 14px #10b981; flex: 0 0 auto; }
.att-head { font-family: var(--dx-display); text-transform: uppercase; letter-spacing: 0.26em; font-size: 0.62rem; color: #fbbf24; margin: 0 0 0.6rem; display: flex; gap: 0.6rem; align-items: center; }
.att-count { padding: 0.1rem 0.5rem; border-radius: 99px; background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.45); letter-spacing: 0; }
#mon-attention { margin-bottom: 1.25rem; }
.att-row { display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.85rem 1.1rem; margin-bottom: 0.5rem; border-radius: 0.9rem; font-size: 0.85rem; border: 1px solid rgba(245, 158, 11, 0.35); background: linear-gradient(160deg, rgba(60, 40, 8, 0.45), rgba(14, 10, 4, 0.8)); }
.att-row.crit { border-color: rgba(239, 68, 68, 0.5); background: linear-gradient(160deg, rgba(80, 14, 20, 0.5), rgba(18, 5, 8, 0.85)); box-shadow: 0 0 36px rgba(239, 68, 68, 0.14); }
.att-row[data-svc] { cursor: pointer; transition: transform .15s, border-color .2s; }
.att-row[data-svc]:hover { transform: translateX(3px); border-color: rgba(255, 255, 255, 0.35); }
.att-row:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.att-lvl { width: 0.65rem; height: 0.65rem; border-radius: 50%; margin-top: 0.3rem; flex: 0 0 auto; background: #f59e0b; box-shadow: 0 0 12px #f59e0b; }
.att-row.crit .att-lvl { background: #ef4444; box-shadow: 0 0 12px #ef4444; animation: dx-blink 1.2s ease-in-out infinite; }
.att-row b { display: block; color: #fff; font-weight: 600; }
.att-row span { color: #b49a6e; font-size: 0.78rem; }
.att-row.crit span { color: #c98a90; }

/* ---------- Taulukot ---------- */
.mon-tbl { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.mon-tbl th { font-family: var(--dx-display); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.52rem; font-weight: 700; text-align: left; color: #6a93b3; padding: 0.9rem 0.8rem; border-bottom: 1px solid rgba(125, 211, 252, 0.12); white-space: nowrap; }
.mon-tbl td { padding: 0.75rem 0.8rem; border-bottom: 1px solid rgba(30, 50, 76, 0.45); vertical-align: middle; }
.mon-tbl tbody tr { cursor: pointer; transition: background .15s; }
.mon-tbl tbody tr:hover, .mon-tbl tbody tr:focus-visible { background: rgba(56, 189, 248, 0.07); outline: none; }
.mon-tbl tbody tr:last-child td { border-bottom: 0; }
.mon-tbl tr.dis { opacity: 0.45; }
.mon-tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mon-tbl th.num { text-align: right; }
.mon-tbl td.nm b { display: block; color: var(--dx-ice); font-weight: 600; }
.mon-tbl td.nm span { display: block; font-size: 0.7rem; color: #5f7d98; font-family: ui-monospace, monospace; }
.mon-tbl td.st { font-size: 0.78rem; white-space: nowrap; }
.mon-tbl .dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; }
.mon-tbl .bar { height: 3px; margin-top: 0.3rem; border-radius: 2px; background: rgba(56, 189, 248, 0.1); }
.mon-tbl .bar i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #38bdf8, #7dd3fc); box-shadow: 0 0 8px rgba(56, 189, 248, 0.6); }
@media (max-width: 720px) { .hide-sm { display: none; } .mon-tbl th, .mon-tbl td { padding: 0.65rem 0.55rem; } }

/* ---------- Aikajana ---------- */
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { position: relative; padding: 0 0 1.1rem 1.5rem; font-size: 0.85rem; }
.tl li:last-child { padding-bottom: 0; }
.tl li::before { content: ''; position: absolute; left: 0.32rem; top: 0.9rem; bottom: -0.1rem; width: 1px; background: rgba(125, 211, 252, 0.2); }
.tl li:last-child::before { display: none; }
.tl-dot { position: absolute; left: 0; top: 0.35rem; width: 0.66rem; height: 0.66rem; border-radius: 50%; background: #10b981; box-shadow: 0 0 10px rgba(16, 185, 129, 0.8); }
.tl li.open .tl-dot { background: #ef4444; box-shadow: 0 0 10px rgba(239, 68, 68, 0.9); animation: dx-blink 1.2s ease-in-out infinite; }
.tl b { color: var(--dx-ice); font-weight: 600; }

/* ---------- Kävijät ---------- */
.vis-ctl { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.seg { display: inline-flex; padding: 0.25rem; gap: 0.2rem; border-radius: 0.8rem; background: rgba(6, 12, 24, 0.7); border: 1px solid var(--dx-edge); }
.seg button { font-family: var(--dx-display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.56rem; font-weight: 700; padding: 0.6rem 0.95rem; border-radius: 0.55rem; border: 0; background: transparent; color: #7fa3c0; cursor: pointer; }
.seg button.on { color: #031321; background: linear-gradient(180deg, #8bdcff, #38bdf8); box-shadow: 0 0 18px rgba(56, 189, 248, 0.35); }
.seg button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sel select { font-family: inherit; font-size: 0.82rem; padding: 0.65rem 0.9rem; border-radius: 0.7rem; background: rgba(6, 12, 24, 0.85); border: 1px solid var(--dx-edge); color: var(--dx-ice); min-width: 12rem; max-width: 100%; }
.sel select:focus { outline: none; border-color: var(--dx-edge-hot); box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15); }
.vis-kpi { margin-bottom: 1rem !important; }
.vis-chart { position: relative; height: 15rem; }
.vis-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 900px) { .vis-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.rank li { position: relative; display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.35rem 0.55rem; border-radius: 0.5rem; font-size: 0.8rem; overflow: hidden; }
.rank li i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(56, 189, 248, 0.12); z-index: 0; border-radius: 0.5rem; }
.rank li i.red { background: rgba(239, 68, 68, 0.14); }
.rank .lbl { position: relative; z-index: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #cfe6f7; font-family: ui-monospace, monospace; font-size: 0.74rem; }
.rank .lbl em { font-style: normal; color: #5f8fb2; }
.rank .n { position: relative; z-index: 1; font-variant-numeric: tabular-nums; color: var(--dx-ice); font-weight: 600; }
.vis-note { margin: 1rem 0 0; font-size: 0.72rem; line-height: 1.6; color: #5b7690; max-width: 60rem; }

/* ---------- Palvelin ---------- */
.gauges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 900px) { .gauges { grid-template-columns: repeat(4, 1fr); } }
.gauges .mon-card { margin: 0; }
.gauge { text-align: center; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 11rem; }
.gauge svg { position: absolute; top: 0.9rem; }
.g-val { font-family: var(--dx-display); font-weight: 700; font-size: 1.5rem; position: relative; margin-top: 1.55rem; text-shadow: 0 0 18px currentColor; }
.g-val small { font-size: 0.7rem; margin-left: 0.15rem; }
.g-val.big { margin-top: 0.4rem; font-size: 1.9rem; color: var(--dx-ice); text-shadow: 0 0 18px rgba(56, 189, 248, 0.35); }
.g-val.big.bad { color: #f87171; text-shadow: 0 0 18px rgba(239, 68, 68, 0.4); }
.g-lab { font-family: var(--dx-display); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.52rem; color: #7fb4d6; margin-top: 3.1rem; }
.g-val.big + .g-lab { margin-top: 0.7rem; }
.g-sub { font-size: 0.72rem; color: #5f7d98; margin-top: 0.3rem; }
.srv-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 720px) { .srv-info { grid-template-columns: repeat(4, 1fr); } }
.srv-info div { display: flex; flex-direction: column; gap: 0.25rem; }
.srv-info b { color: var(--dx-ice); font-weight: 600; font-size: 0.95rem; }
.srv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(125, 211, 252, 0.1); }
.warn-note { margin: 0 0 1rem; padding: 0.7rem 0.9rem; border-radius: 0.7rem; font-size: 0.8rem; color: #fcd34d; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.3); }

/* ---------- Palvelukortit ja yläpalkki ---------- */
#categories { margin-top: 0.5rem; }
@media (max-width: 640px) { .tabs { margin-top: 0; } .vis-ctl { flex-direction: column; align-items: stretch; } .sel select { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .tab-panel, .att-row.crit .att-lvl, .tl li.open .tl-dot { animation: none; } }

/* ---------- Ylläpito: lisäasetukset ---------- */
.form-adv { margin-bottom: 0.9rem; padding: 0.7rem 0.9rem; border-radius: 0.7rem; border: 1px solid rgba(56, 189, 248, 0.16); background: rgba(6, 12, 24, 0.5); }
.form-adv summary { cursor: pointer; font-size: 0.8rem; color: #8fc4e6; font-weight: 600; }
.form-adv summary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }