/* ==========================================================================
   MTF Viewer – gemeinsame Styles für die Konfigurations-Viewer
   (Switch-Viewer /sw/, Firewall-Viewer /fw/). Nutzt nur Tokens aus
   mtf-theme.css – nach diesem einbinden:
     <link rel="stylesheet" href="/assets/mtf-viewer.css">
   ========================================================================== */
body{min-height:100vh;font-size:15px;}

/* ---------- UPLOAD ---------- */
#upload-screen{min-height:100vh;display:flex;flex-direction:column;padding-bottom:60px;}
#upload-screen .mtf-mast{padding-bottom:38px;}
.upload-body{flex:1;width:100%;display:flex;flex-direction:column;gap:22px;padding-top:34px;}
.upload-logo{font-size:2rem;line-height:1;}
.vendor-chips{display:flex;gap:8px;flex-wrap:wrap;}
.vchip{font-family:var(--mono);font-size:.74rem;padding:5px 13px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);color:var(--ink-2);}
.upload-zone{max-width:720px;}
.upload-zone-icon{font-size:2.2rem;margin-bottom:12px;}
.upload-zone-text{font-size:1.05rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--strong);margin-bottom:6px;}
.upload-zone-hint{font-size:.82rem;color:var(--ink-3);}
#file-input{display:none;}
.parse-error{display:none;max-width:720px;border-left:4px solid var(--crit);background:var(--crit-soft);border-radius:var(--r-sm);padding:14px 18px;color:var(--ink);font-size:.88rem;line-height:1.6;}
#error-retry-btn{display:none;align-self:flex-start;}

/* ---------- STICKY-KOPF (Header + Switch-Tabs + Toolbar + Nav) ---------- */
.sw-sticky{position:sticky;top:0;z-index:200;box-shadow:var(--shadow);}
header{background:var(--surface);border-bottom:1px solid var(--line-soft);padding:10px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.header-logo{height:30px;width:auto;flex-shrink:0;background:var(--logo-plate);border-radius:var(--r-xs);padding:2px 4px;}
.header-icon{width:34px;height:34px;background:var(--accent);color:var(--on-accent);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
header h1{margin:0;font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--strong);line-height:1.2;}
header p{margin:1px 0 0;font-size:.7rem;color:var(--ink-3);font-family:var(--mono);}
.badge{font-family:var(--mono);font-size:.68rem;font-weight:600;padding:2px 10px;border-radius:var(--r-pill);border:1px solid var(--accent);color:var(--accent);background:var(--accent-soft);white-space:nowrap;}
.hdr-nav{margin-left:18px;}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.hbtn{background:var(--surface);border:1px solid var(--line);color:var(--ink-2);font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 13px;border-radius:var(--r-pill);cursor:pointer;transition:all .15s;white-space:nowrap;}
.hbtn:hover{border-color:var(--accent);color:var(--accent);}
.hbtn.danger:hover{border-color:var(--crit);color:var(--crit);}

/* Switch-Tabs (geladene Dateien) */
#sw-tabs{background:var(--surface-2);border-bottom:1px solid var(--line);padding:0 24px;display:flex;align-items:stretch;overflow-x:auto;}
.sw-tab{background:none;border:none;border-bottom:3px solid transparent;color:var(--ink-2);font-size:.8rem;font-weight:600;padding:8px 14px;cursor:pointer;white-space:nowrap;transition:all .15s;display:flex;align-items:center;gap:6px;}
.sw-tab:hover{color:var(--strong);}
.sw-tab.active{color:var(--accent);border-bottom-color:var(--accent);background:var(--surface);}
.sw-close{font-size:.68rem;opacity:.5;padding:1px 4px;border-radius:4px;}
.sw-close:hover{opacity:1;color:var(--crit);background:var(--crit-soft);}
#sw-add{background:none;border:none;color:var(--ink-3);font-size:1.2rem;padding:6px 12px;cursor:pointer;}
#sw-add:hover{color:var(--accent);}

/* Toolbar */
#toolbar{background:var(--surface);border-bottom:1px solid var(--line-soft);padding:8px 24px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.srch{position:relative;flex:1;min-width:180px;max-width:320px;}
.srch input{width:100%;background:var(--ground);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 12px 6px 32px;color:var(--ink);font-size:.82rem;outline:none;transition:border-color .15s;}
.srch input:focus{border-color:var(--accent);}
.srch .si{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-3);font-size:.75rem;pointer-events:none;}
#search-count{font-size:.72rem;color:var(--ink-3);font-family:var(--mono);}
.tsep{width:1px;height:20px;background:var(--line);flex-shrink:0;}
.tbtn{background:var(--surface);border:1px solid var(--line);color:var(--ink-2);font-size:.76rem;font-weight:600;padding:5px 13px;border-radius:var(--r-pill);cursor:pointer;transition:all .12s;display:flex;align-items:center;gap:5px;white-space:nowrap;}
.tbtn:hover{border-color:var(--accent);color:var(--accent);}
.tbtn.twarn:hover,.tbtn.audit-has-issues{border-color:var(--warn);color:var(--warn);}
.tbtn.audit-has-issues{background:var(--warn-soft);}

/* Feature-Navigation */
nav#main-nav{background:var(--surface);border-bottom:1px solid var(--line);padding:0 24px;display:flex;overflow-x:auto;}
nav#main-nav button{background:none;border:none;border-bottom:3px solid transparent;color:var(--ink-2);font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:10px 13px 8px;cursor:pointer;white-space:nowrap;transition:all .15s;}
nav#main-nav button:hover{color:var(--strong);}
nav#main-nav button.active{color:var(--accent);border-bottom-color:var(--accent);}

/* ---------- MAIN ---------- */
main{padding:26px 24px 90px;max-width:1600px;margin:0 auto;}
.tab-pane{display:none;}.tab-pane.active{display:block;}

/* Abschnittstitel im MTF-Stil (Versalien + blauer Balken) */
.section{margin-bottom:30px;}
.sec-title,.grp-label{font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--strong);margin-bottom:14px;}
.sec-title::after,.grp-label::after{content:'';display:block;width:32px;height:3px;background:var(--accent);margin-top:6px;}
.grp-label{font-size:.72rem;margin:20px 0 10px;color:var(--ink-2);}
.grp-label::after{height:2px;width:24px;}

/* Karten */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;}
.card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:15px 17px;box-shadow:var(--shadow);transition:border-color .15s;}
.card:hover{border-color:var(--accent);}
.card-icon{font-size:1.1rem;margin-bottom:6px;}
.card-label{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px;}
.card-value{font-size:1rem;font-weight:700;color:var(--strong);}
.card-sub{font-size:.74rem;color:var(--ink-3);margin-top:2px;}

/* Status-Grid */
.status-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;}
.status-card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:11px 14px;box-shadow:var(--shadow);}
.sdot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;}
.dg{background:var(--ok);}.db{background:var(--accent);}.do{background:var(--warn);}.dr{background:var(--crit);}.dgr{background:var(--ink-3);}
.s-label{font-size:.72rem;color:var(--ink-3);margin-bottom:3px;display:flex;align-items:center;}
.s-val{font-size:.9rem;font-weight:600;font-family:var(--mono);}

/* Tabellen */
.tbl-wrap{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-md);overflow:auto;margin-bottom:14px;box-shadow:var(--shadow);}
table{width:100%;border-collapse:collapse;font-size:.84rem;}
th{background:var(--surface-2);color:var(--ink-2);font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:left;padding:9px 12px;white-space:nowrap;}
td{padding:7px 12px;border-top:1px solid var(--line-soft);vertical-align:middle;}
tr.search-hit td{background:var(--warn-soft)!important;}
tr.search-miss{display:none;}
tr.port-unused td,.unused-row td{opacity:.45;}
tr:not(.search-miss):hover td{background:var(--hover);}

/* Pills & Badges */
.pill,.vchip-dyn{display:inline-flex;align-items:center;font-family:var(--mono);font-weight:600;font-size:.68rem;padding:1px 8px;border-radius:var(--r-pill);border:1px solid;margin:1px 2px;}
.pg{color:var(--ok);background:var(--ok-soft);}
.pb{color:var(--accent);background:var(--accent-soft);}
.po{color:var(--warn);background:var(--warn-soft);}
.pr{color:var(--crit);background:var(--crit-soft);}
.pgr{color:var(--ink-3);border-color:var(--line);background:var(--hover);}
.mode{display:inline-block;font-size:.64rem;font-weight:600;padding:1px 8px;border-radius:var(--r-pill);font-family:var(--mono);border:1px solid;}
.mode.access{color:var(--ink-2);border-color:var(--line);background:var(--hover);}
.mode.trunk{color:var(--ok);background:var(--ok-soft);}
.mode.hybrid{color:var(--accent);background:var(--accent-soft);}
.lag-badge{display:inline-block;font-size:.62rem;font-weight:600;padding:1px 7px;border-radius:var(--r-pill);border:1px solid var(--warn);color:var(--warn);background:var(--warn-soft);font-family:var(--mono);margin-left:3px;}

/* Filterleiste */
.fbar{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}
.fbar span{font-size:.74rem;color:var(--ink-3);}
.fbtn{background:var(--surface);border:1px solid var(--line);color:var(--ink-2);font-size:.74rem;font-weight:600;padding:4px 13px;border-radius:var(--r-pill);cursor:pointer;transition:all .12s;}
.fbtn:hover{color:var(--strong);border-color:var(--ink-3);}
.fbtn.active{color:var(--on-accent);border-color:var(--accent);background:var(--accent);}

/* VLAN-Legende */
.vlan-legend{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:10px 14px;margin-bottom:14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.vl-item{display:flex;align-items:center;gap:5px;font-size:.76rem;color:var(--ink-2);cursor:pointer;}
.vl-item:hover{color:var(--strong);}
.vl-swatch{width:12px;height:12px;border-radius:3px;border:1.5px solid;flex-shrink:0;}
.vlan-legend-title{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin-right:4px;}

/* VLAN-Liste */
.vlan-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:10px 16px;margin-bottom:8px;box-shadow:var(--shadow);transition:border-color .15s;}
.vlan-row:hover{border-color:var(--accent);}
.vlan-id-badge{font-family:var(--mono);font-weight:600;font-size:.9rem;min-width:52px;padding:3px 8px;border-radius:var(--r-xs);text-align:center;border:1.5px solid;}

/* Port-Map */
.portmap-wrap{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:18px 20px;margin-bottom:18px;box-shadow:var(--shadow-lg);}
.pm-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin-bottom:12px;}
.pm-grid{display:flex;flex-wrap:wrap;gap:5px;}
.pm-port{width:44px;height:44px;border-radius:var(--r-xs);border:2px solid;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:transform .1s,box-shadow .1s;position:relative;color:var(--ink);}
.pm-port:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);z-index:5;}
.pm-pnum{font-family:var(--mono);font-size:.62rem;font-weight:600;}
.pm-pmode{font-size:.48rem;margin-top:1px;opacity:.75;text-transform:uppercase;}
.pm-access{border-color:var(--line);background:var(--surface-2);}
.pm-trunk{border-color:var(--ok);background:var(--ok-soft);}
.pm-hybrid{border-color:var(--accent);background:var(--accent-soft);}
.pm-lag{border-color:var(--warn);background:var(--warn-soft);}
.pm-unused{border-color:var(--line-soft);background:transparent;opacity:.4;}
.pm-vlan{border-width:2px;}

/* Tooltip */
#pm-tip{position:fixed;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;font-size:.78rem;z-index:9999;pointer-events:none;display:none;min-width:190px;max-width:280px;box-shadow:0 10px 30px rgba(0,0,0,.18);}
#pm-tip .tt-head{font-family:var(--mono);font-weight:600;font-size:.84rem;margin-bottom:6px;color:var(--accent);}
#pm-tip .tt-row{display:flex;justify-content:space-between;gap:10px;margin-top:2px;}
#pm-tip .tt-k{color:var(--ink-3);font-size:.72rem;}
#pm-tip .tt-v{font-family:var(--mono);font-size:.72rem;}

/* Diff */
.diff-top{display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
.diff-drop{background:var(--surface);border:2px dashed var(--line);border-radius:var(--r-md);padding:16px 20px;text-align:center;cursor:pointer;flex:1;min-width:200px;transition:all .18s;font-size:.84rem;color:var(--ink-3);}
.diff-drop:hover{border-color:var(--accent);background:var(--accent-soft);}
.diff-drop.loaded{border-color:var(--ok);border-style:solid;background:var(--ok-soft);color:var(--ink);}
.diff-vs{font-size:.9rem;color:var(--ink-3);font-weight:700;align-self:center;text-transform:uppercase;}
.diff-stats{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.dstat{padding:3px 12px;border-radius:var(--r-pill);font-family:var(--mono);font-size:.74rem;border:1px solid;}
.dstat-add{color:var(--ok);background:var(--ok-soft);}
.dstat-rem{color:var(--crit);background:var(--crit-soft);}
.dstat-eq{color:var(--ink-3);border-color:var(--line);background:var(--hover);}
.diff-line{font-family:var(--mono);font-size:.74rem;padding:1px 10px;white-space:pre-wrap;word-break:break-all;line-height:1.6;}
.dl-add{background:var(--ok-soft);color:color-mix(in srgb,var(--ok) 65%,var(--ink));border-left:3px solid var(--ok);}
.dl-rem{background:var(--crit-soft);color:color-mix(in srgb,var(--crit) 65%,var(--ink));border-left:3px solid var(--crit);}
.dl-ctx{color:var(--ink-3);border-left:3px solid transparent;}
.dl-hdr{color:var(--accent);background:var(--accent-soft);font-weight:600;border-left:3px solid var(--accent);}

/* Audit */
.audit-score-wrap{display:flex;gap:20px;align-items:center;margin-bottom:20px;flex-wrap:wrap;}
.audit-score-circle{width:80px;height:80px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px solid;flex-shrink:0;}
.asc-num{font-family:var(--mono);font-size:1.6rem;font-weight:700;}
.asc-lbl{font-size:.58rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);}
.audit-legend{font-size:.8rem;color:var(--ink-3);line-height:1.8;}
.audit-item{background:var(--surface);border:1px solid var(--line-soft);border-left-width:4px;border-radius:var(--r-sm);padding:13px 16px;margin-bottom:9px;display:flex;gap:12px;align-items:flex-start;box-shadow:var(--shadow);}
.ai-high{border-left-color:var(--crit);background:color-mix(in srgb,var(--crit) 5%,var(--surface));}
.ai-medium{border-left-color:var(--warn);background:color-mix(in srgb,var(--warn) 5%,var(--surface));}
.ai-low{border-left-color:var(--accent);}
.ai-ok{border-left-color:var(--ok);}
.audit-icon{font-size:1.1rem;flex-shrink:0;margin-top:1px;}
.audit-title{font-weight:700;font-size:.88rem;margin-bottom:2px;color:var(--strong);}
.audit-desc{font-size:.8rem;color:var(--ink-2);line-height:1.5;}
.abadge{font-size:.62rem;font-weight:600;padding:1px 8px;border-radius:var(--r-pill);font-family:var(--mono);border:1px solid;margin-left:7px;vertical-align:middle;}
.abh{color:var(--crit);background:var(--crit-soft);}
.abm{color:var(--warn);background:var(--warn-soft);}
.abl{color:var(--accent);background:var(--accent-soft);}
.abo{color:var(--ok);background:var(--ok-soft);}

/* Topologie */
#topo-svg{width:100%;height:450px;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);display:block;box-shadow:var(--shadow-lg);}
.topo-node rect{cursor:pointer;fill:var(--surface-2);stroke:var(--accent);stroke-width:1.5;}
.topo-node:hover rect{fill:var(--accent-soft);}
.topo-edge{stroke:var(--accent);stroke-width:1.5;fill:none;opacity:.55;}
.topo-label{font-family:var(--mono);font-size:11px;font-weight:600;fill:var(--ink);text-anchor:middle;}
.topo-sub{font-family:var(--font);font-size:9px;fill:var(--ink-3);text-anchor:middle;}
.topo-edge-label{font-family:var(--mono);font-size:9px;fill:var(--ink-3);text-anchor:middle;}

/* Vergleich */
.cmp-cell-diff{background:var(--warn-soft)!important;color:var(--warn);}
.cmp-cell-miss{background:var(--crit-soft)!important;color:var(--ink-3);font-style:italic;}

/* Diverses */
.desc-cell{color:var(--ink-3);font-size:.8rem;}
.port-nm{font-family:var(--mono);font-weight:600;white-space:nowrap;}
.raw-box{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:16px;font-family:var(--mono);font-size:.74rem;line-height:1.7;white-space:pre-wrap;overflow:auto;color:var(--ink-2);max-height:580px;}
.info-note,.warn-note{border-left:4px solid var(--accent);background:var(--accent-soft);border-radius:var(--r-sm);padding:10px 14px;font-size:.84rem;color:var(--ink);margin-bottom:14px;}
.warn-note{border-left-color:var(--warn);background:var(--warn-soft);}

/* Footer */
footer.mtf-footer{position:fixed;bottom:0;left:0;right:0;z-index:300;}

/* Druck */
@media print{
  .sw-sticky,footer,.hbtn,.tbtn,.fbtn,#error-retry-btn,#pm-tip{display:none!important;}
  .tab-pane{display:block!important;}
  .tbl-wrap,.card,.status-card,.vlan-row,.audit-item,.portmap-wrap{break-inside:avoid;box-shadow:none!important;}
  .raw-box{max-height:none!important;}
  @page{margin:1.5cm;size:A4;}
}
@media(max-width:768px){
  header,main,#toolbar,#sw-tabs,nav#main-nav{padding-left:16px;padding-right:16px;}
  .cards{grid-template-columns:1fr 1fr;}
  .sw-sticky{position:static;} /* auf dem Handy nicht ⅓ des Bildschirms belegen */
}