/* JJDLAS layout system: shared by every page. styles.css keeps the original base styles; this file adds the grid,
   KPI cards, in-page navigation, settings forms, status pills and SVG charts. */

/* 12-column grid. Pages place panels with span classes c3..c9 instead of stacking them. Below 1200px narrow panels
   take half a row, below 860px the full row. */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:stretch}
.grid>*{grid-column:span 12;min-width:0}
.grid>.c3{grid-column:span 3}.grid>.c4{grid-column:span 4}.grid>.c5{grid-column:span 5}.grid>.c6{grid-column:span 6}
.grid>.c7{grid-column:span 7}.grid>.c8{grid-column:span 8}.grid>.c9{grid-column:span 9}
.grid.dense{gap:12px}.grid>.panel{display:flex;flex-direction:column}.grid>.panel>.panel-body{flex:1}
@media(max-width:1200px){.grid>.c3,.grid>.c4,.grid>.c5{grid-column:span 6}.grid>.c7,.grid>.c8,.grid>.c9{grid-column:span 12}}
@media(max-width:860px){.grid>*{grid-column:span 12!important}}
.panel-body{padding:0 22px 18px}.panel-body.flush{padding:0}
.panel-head .head-tools{display:flex;gap:8px;align-items:center}

/* KPI cards */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;min-height:96px;box-shadow:0 2px 8px #294b7f08;transition:border-color .15s}
a.kpi:hover{border-color:#b9cbf3}
.kpi-label{font-size:12.5px;color:#75859d;font-weight:600}
.kpi-value{font-size:26px;font-weight:760;color:#18243b;font-variant-numeric:tabular-nums;letter-spacing:-.02em;grid-column:1}
.kpi-foot{font-size:12px;color:var(--ink-3);grid-column:1/3}
.kpi-icon{grid-row:1/3;grid-column:2;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.kpi-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kpi.bad .kpi-icon{background:var(--bad-soft);color:var(--bad)}.kpi.warn .kpi-icon{background:var(--warn-soft);color:var(--warn)}
.kpi.good .kpi-icon{background:var(--good-soft);color:var(--good)}.kpi.bad .kpi-value{color:var(--bad)}

/* in-page navigation (settings, rules, parsing): a list on the left, the selected section on the right */
.split{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;align-items:start}
.subnav{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;position:sticky;top:80px;display:flex;flex-direction:column;gap:2px}
.subnav a,.subnav button{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border-radius:9px;color:#4d5d75;font-size:13px;font-weight:550;border:0;background:none;text-align:left;width:100%}
.subnav a:hover,.subnav button:hover{background:#f2f6ff}.subnav .active{background:var(--accent-soft);color:#2556d3;font-weight:700}
.subnav .group{font-size:11px;color:#9aa6b8;font-weight:700;letter-spacing:.06em;padding:10px 12px 4px}
.subnav .state{font-size:11px;font-weight:650;color:var(--ink-3)}.subnav .state.ok{color:var(--good)}
.subnav .state.warn{color:var(--warn)}.subnav .state.bad{color:var(--bad)}
@media(max-width:1000px){.split{grid-template-columns:1fr}.subnav{position:static;flex-direction:row;flex-wrap:wrap}.subnav a,.subnav button{width:auto}}

/* segmented control and filter bars */
.segmented{display:inline-flex;background:#eef2f9;border-radius:9px;padding:3px;gap:2px}
.segmented button{border:0;background:none;padding:6px 12px;border-radius:7px;font-size:12.5px;color:#5a6a82;font-weight:600}
.segmented button.active{background:#fff;color:#2556d3;box-shadow:0 1px 3px #1f3b7a1f}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:16px 22px 12px}
.filters input[type=search]{flex:1;min-width:220px}.filters select{min-width:130px}

/* settings forms: label column on the left, control on the right, save bar at the bottom */
.form-section{padding:4px 22px 20px}.form-section h3{font-size:13px;margin:18px 0 10px;color:#1d2940}
.form-rows{display:grid}
.form-row{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.form-row:last-child{border-bottom:0}
.form-row>label,.form-row>.label{font-size:13px;font-weight:600;color:#33435b;display:flex;flex-direction:column;gap:3px}
.form-row>label .muted,.form-row>.label .muted{font-weight:400}
.form-row .control{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.form-row input:not([type=checkbox]):not([type=radio]),.form-row select{min-width:240px}.form-row textarea{min-height:90px}
.form-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px;border-top:1px solid var(--line-soft);background:#fafbfe}
@media(max-width:860px){.form-row{grid-template-columns:1fr}}

/* status pills and key-value tiles */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:12px;font-size:12px;font-weight:650;background:#eef1f6;color:#5d6b80;white-space:nowrap}
.pill:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.85}
.pill.ok{background:var(--good-soft);color:var(--good)}.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}.pill.info{background:var(--accent-soft);color:var(--accent)}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;padding:0 22px 18px}
.kv>div{background:#f7f9fd;border:1px solid var(--line-soft);border-radius:10px;padding:11px 13px}
.kv span{display:block;font-size:12px;color:var(--ink-3)}.kv strong{display:block;margin-top:4px;font-size:15px;color:#1d2940;word-break:break-all}

/* SVG charts: area/line trend, donut with legend, heat map, ATT&CK matrix, stacked gauge */
.svg-chart{width:100%;display:block;overflow:visible}.svg-chart text{font-size:11px;fill:#99a5b7}
.svg-chart .grid-line{stroke:#eef2f8}.svg-chart .axis{stroke:#dfe6f1}
.svg-chart .hit{fill:transparent;cursor:pointer}.svg-chart .hit:hover{fill:#2c60e70d}
.donut-wrap{display:flex;align-items:center;gap:22px;padding:0 22px 18px;flex-wrap:wrap}.donut-wrap svg{width:150px;height:150px;flex:none}
.donut-center{font-size:24px;font-weight:760;fill:#18243b}.donut-sub{font-size:11px;fill:#8a96a8}
.legend-list{list-style:none;margin:0;padding:0;display:grid;gap:7px;flex:1;min-width:150px}
.legend-list li{display:grid;grid-template-columns:12px 1fr auto;gap:9px;align-items:center;font-size:12.5px;color:#46566e}
.legend-list i{width:10px;height:10px;border-radius:3px}.legend-list b{font-variant-numeric:tabular-nums;color:#26354c}
.heat{display:grid;gap:6px;padding:0 22px 18px}
.heat-row,.heat-axis{display:grid;grid-template-columns:96px repeat(var(--cols),minmax(0,1fr));gap:3px;align-items:center}
.heat-row span{font-size:11.5px;color:#6b7a90;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.heat-cell{height:22px;border-radius:4px;background:#eef2f8;border:0;padding:0}.heat-cell[data-v]{cursor:pointer}
.heat-axis{font-size:10.5px;color:#a1acbb}
.matrix{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;padding:0 22px 18px}
.matrix-col{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.matrix-col h4{margin:0;padding:9px 10px;font-size:12px;background:#f6f8fc;border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between}
.matrix-col ul{list-style:none;margin:0;padding:6px;display:grid;gap:4px}
.matrix-col li{font-size:11.5px;padding:5px 7px;border-radius:6px;background:#f4f6fa;color:#5a6a82;display:flex;justify-content:space-between;gap:6px}
.matrix-col li.on{background:#e9f0ff;color:#2556d3}.matrix-col li.hit{background:#fff1e8;color:#b5541f}.matrix-col li.off{opacity:.5}
.gauge{padding:0 22px 18px}.gauge-track{height:10px;border-radius:5px;background:#eef2f8;overflow:hidden;display:flex}
.gauge-track i{display:block;height:100%}.gauge-legend{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3);margin-top:8px}

/* components from core.js placed inside a card body already have the card's padding */
.panel-body>.bar-list,.panel-body>.donut-wrap,.panel-body>.heat,.panel-body>.gauge,.panel-body>.kv,.panel-body>.matrix{padding-left:0;padding-right:0}
.panel-body>.gauge{padding-bottom:12px}.panel-body>.empty{padding:24px 0}
.area-chart .legend{display:flex;gap:16px;font-size:12px;color:var(--ink-2);margin:0 0 8px}.area-chart .key{display:inline-flex;align-items:center;gap:6px}
.area-chart .key:before{display:none}.area-chart svg{height:240px}
.stack-sections{display:flex;flex-direction:column;gap:16px;min-width:0}
.donut-wrap circle.clickable{cursor:pointer}
#drawer-body .form-actions{justify-content:space-between;align-items:center;gap:10px}