/* ============================================================
   xNetwork — cisco.css
   Seite: /tools/cisco/ — Cisco Befehlsreferenz

   Reihenfolge:
   VARS → LAYOUT → LEGEND → TOOLBAR → GROUPS → TABLE →
   CMD → PARAM-CHIP → MODE-BADGE → ROW-ACTIONS →
   LEGEND-CHIP → MODAL-EXTRAS → TS → TOOLTIP → VISIBILITY → RESPONSIVE
   ============================================================ */


/* ============================================================
   VARS — Cisco-spezifische Farben (nicht im globalen Design-System)
   ============================================================ */

/* BEGIN VARS */
:root {
    /* Modus-Farben */
    --cisco-m-user:      #4caf82;   --cisco-m-user-bg:   rgba(76,  175, 130, 0.12);
    --cisco-m-priv:      #5b9bd5;   --cisco-m-priv-bg:   rgba(91,  155, 213, 0.12);
    --cisco-m-global:    #e8a23a;   --cisco-m-global-bg: rgba(232, 162,  58, 0.12);
    --cisco-m-iface:     #a78bfa;   --cisco-m-iface-bg:  rgba(167, 139, 250, 0.12);
    --cisco-m-vlan:      #f472b6;   --cisco-m-vlan-bg:   rgba(244, 114, 182, 0.12);
    --cisco-m-router:    #e85555;   --cisco-m-router-bg: rgba(232,  85,  85, 0.12);
    --cisco-m-line:      #38bdf8;   --cisco-m-line-bg:   rgba( 56, 189, 248, 0.12);

    /* Parameter-Typ-Farben */
    --cisco-pt-string:   #d1d5db;   --cisco-pt-string-bg:   rgba(209, 213, 219, 0.10);
    --cisco-pt-integer:  #9ca3af;   --cisco-pt-integer-bg:  rgba(156, 163, 175, 0.12);
    --cisco-pt-boolean:  #4ade80;   --cisco-pt-boolean-bg:  rgba( 74, 222, 128, 0.12);
    --cisco-pt-ip:       #60a5fa;   --cisco-pt-ip-bg:       rgba( 96, 165, 250, 0.12);
    --cisco-pt-subnet:   #c49060;   --cisco-pt-subnet-bg:   rgba(196, 144,  96, 0.14);
    --cisco-pt-mac:      #c084fc;   --cisco-pt-mac-bg:      rgba(192, 132, 252, 0.12);
    --cisco-pt-vlanid:   #f9a8c9;   --cisco-pt-vlanid-bg:   rgba(249, 168, 201, 0.14);
    --cisco-pt-port:     #fde047;   --cisco-pt-port-bg:     rgba(253, 224,  71, 0.12);
    --cisco-pt-password: #e85555;   --cisco-pt-password-bg: rgba(232,  85,  85, 0.12);
    --cisco-pt-time:     #e8a23a;   --cisco-pt-time-bg:     rgba(232, 162,  58, 0.12);
}
/* END VARS */


/* ============================================================
   LAYOUT
   ============================================================ */

/* BEGIN LAYOUT */
main .wrapper {
    max-width: 1380px;
}

.cisco-header-row {
    display:         flex;
    justify-content: flex-end;
    margin-bottom:   var(--space-4);
}

.cisco-header-actions {
    display:  flex;
    gap:      var(--space-2);
    flex-wrap: wrap;
    position: relative;
}
/* END LAYOUT */


/* ============================================================
   LEGEND POPOVER
   ============================================================ */

/* BEGIN LEGEND */
.cisco-legend-body {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
}

.cisco-legend-types {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--space-1);
}

.cisco-legend-title {
    font-size:      var(--text-2xs);
    font-weight:    600;
    color:          var(--text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cisco-legend-section {
    font-size:      var(--text-2xs);
    font-weight:    600;
    color:          var(--text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top:     var(--space-1);
}

.cisco-legend-item {
    display:     flex;
    align-items: center;
    gap:         var(--space-1);
    font-size:   var(--text-xs);
    color:       var(--text-muted);
}
/* END LEGEND */


/* ============================================================
   TOOLBAR
   ============================================================ */

/* BEGIN TOOLBAR */
.cisco-toolbar {
    display:       flex;
    gap:           var(--space-3);
    flex-wrap:     wrap;
    align-items:   center;
    margin-bottom: var(--space-4);
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--radius-md);
    padding:       var(--space-3) var(--space-4);
    box-shadow:    var(--shadow), 0 0 60px rgba(0, 0, 0, 0.30);
}

.cisco-search-bar {
    flex:      1;
    min-width: 180px;
    height:    36px;
}

.cisco-toolbar .tags-row {
    flex-shrink: 0;
}

.cisco-toolbar .tag {
    height:     36px;
    padding:    0 var(--space-4);
    align-self: center;
}

.cisco-cat-filter {
    height:    36px;
    min-width: 155px;
    width:     auto;
    flex-shrink: 0;
}
/* END TOOLBAR */


/* ============================================================
   GROUPS
   ============================================================ */

/* BEGIN GROUPS */
.cisco-group-section {
    margin-bottom: var(--space-3);
}

.cisco-group-header {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    padding:     var(--space-3) var(--space-4);
    background:  var(--surface);
    border:      1px solid var(--border);
    border-radius: var(--radius-md);
    cursor:      pointer;
    user-select: none;
    box-shadow:  var(--shadow), 0 0 60px rgba(0, 0, 0, 0.30);
    transition:  background var(--transition-fast);
}

.cisco-group-header:hover {
    background: linear-gradient(var(--glass), var(--glass)), var(--surface);
}

.cisco-group-dot {
    width:         8px;
    height:        8px;
    border-radius: var(--radius-full);
    flex-shrink:   0;
}

.cisco-group-title {
    font-size:   var(--text-sm);
    font-weight: 600;
    color:       var(--text-primary);
}

.cisco-group-count {
    font-size:   var(--text-xs);
    color:       var(--text-muted);
    margin-left: auto;
}

.cisco-sort-btn {
    background:  none;
    border:      none;
    cursor:      pointer;
    color:       var(--text-subtle);
    font-size:   var(--text-xs);
    font-family: var(--font-sans);
    padding:     2px var(--space-2);
    border-radius: var(--radius-sm);
    user-select: none;
    transition:  color       var(--transition-fast),
                 background  var(--transition-fast);
}

.cisco-sort-btn:hover {
    color:       var(--text-secondary);
    background:  var(--glass);
}

.cisco-sort-btn.is-active {
    color: var(--accent);
}

.cisco-group-chevron {
    color:      var(--text-muted);
    font-size:  0.7rem;
    flex-shrink: 0;
    transition: transform var(--transition);
}

.cisco-group-section.is-collapsed .cisco-group-chevron {
    transform: rotate(-90deg);
}

.cisco-group-section.is-collapsed .cisco-group-body {
    display: none;
}

.cisco-group-body {
    margin-top: var(--space-2);
}
/* END GROUPS */


/* ============================================================
   TABLE
   ============================================================ */

/* BEGIN TABLE */
.cisco-table {
    table-layout: fixed;
}

.cisco-table colgroup col:nth-child(1) { width: 22%; }
.cisco-table colgroup col:nth-child(2) { width: 10%; }
.cisco-table colgroup col:nth-child(3) { width:  7%; }
.cisco-table colgroup col:nth-child(4) { width: 15%; }
.cisco-table colgroup col:nth-child(5) { width: 40%; }
.cisco-table colgroup col:nth-child(6) { width:  6%; }
/* END TABLE */


/* ============================================================
   CMD
   ============================================================ */

/* BEGIN CMD */
.cisco-cmd {
    font-family: var(--font-mono);
    font-size:   var(--text-xs);
    color:       var(--text-primary);
    word-break:  break-word;
}

.cisco-abbr {
    font-family: var(--font-mono);
    font-size:   var(--text-xs);
    color:       var(--text-secondary);
}
/* END CMD */


/* ============================================================
   PARAM-CHIP
   ============================================================ */

/* BEGIN PARAM-CHIP */
.cisco-param {
    display:       inline-block;
    border-radius: var(--radius-sm);
    font-family:   var(--font-mono);
    font-size:     var(--text-xs);
    padding:       0 4px;
    cursor:        pointer;
    transition:    filter var(--transition-fast);
}

.cisco-param:hover {
    filter: brightness(1.35);
}

.cisco-pt-string   { color: var(--cisco-pt-string);   background: var(--cisco-pt-string-bg); }
.cisco-pt-integer  { color: var(--cisco-pt-integer);  background: var(--cisco-pt-integer-bg); }
.cisco-pt-boolean  { color: var(--cisco-pt-boolean);  background: var(--cisco-pt-boolean-bg); }
.cisco-pt-ip       { color: var(--cisco-pt-ip);       background: var(--cisco-pt-ip-bg); }
.cisco-pt-subnet   { color: var(--cisco-pt-subnet);   background: var(--cisco-pt-subnet-bg); }
.cisco-pt-mac      { color: var(--cisco-pt-mac);      background: var(--cisco-pt-mac-bg); }
.cisco-pt-vlanid   { color: var(--cisco-pt-vlanid);   background: var(--cisco-pt-vlanid-bg); }
.cisco-pt-port     { color: var(--cisco-pt-port);     background: var(--cisco-pt-port-bg); }
.cisco-pt-password { color: var(--cisco-pt-password); background: var(--cisco-pt-password-bg); }
.cisco-pt-time     { color: var(--cisco-pt-time);     background: var(--cisco-pt-time-bg); }
.cisco-pt-unknown  { color: var(--cisco-pt-string);   background: var(--cisco-pt-string-bg); }
/* END PARAM-CHIP */


/* ============================================================
   DEV-CHIP
   ============================================================ */

/* BEGIN DEV-CHIP */
.cisco-dev-chips {
    display:     flex;
    gap:         3px;
    flex-wrap:   nowrap;
}

.cisco-dev-chip {
    display:        inline-flex;
    align-items:    center;
    padding:        1px 5px;
    border-radius:  var(--radius-sm);
    font-size:      var(--text-2xs);
    font-family:    var(--font-mono);
    font-weight:    600;
    color:          var(--text-subtle);
    border:         1px solid rgba(255,255,255,0.10);
    letter-spacing: 0.04em;
}
/* END DEV-CHIP */


/* ============================================================
   CMD-TAGS
   ============================================================ */

/* BEGIN CMD-TAGS */
.cisco-cmd-tags {
    display:    flex;
    flex-wrap:  wrap;
    gap:        3px;
    margin-top: 5px;
}

.cisco-cmd-tag {
    display:     inline-flex;
    align-items: center;
    padding:     0 6px;
    border-radius: var(--radius-sm);
    font-size:   var(--text-2xs);
    font-family: var(--font-sans);
    font-weight: 500;
    color:       var(--accent);
    background:  var(--accent-subtle);
}
/* END CMD-TAGS */


/* ============================================================
   MODE-BADGE
   ============================================================ */

/* BEGIN MODE-BADGE */
.cisco-mode-badge {
    display:        inline-flex;
    flex-direction: column;
    align-items:    center;
    gap:            1px;
    font-size:      var(--text-xs);
    padding:        3px 8px;
    border-radius:  var(--radius-sm);
}

.cisco-mode-prompt {
    font-family: var(--font-mono);
    font-size:   var(--text-xs);
    font-weight: 700;
}

.cisco-mode-label {
    font-size: 0.62rem;
    opacity:   0.65;
}

.cisco-mode-user   { color: var(--cisco-m-user);   background: var(--cisco-m-user-bg); }
.cisco-mode-priv   { color: var(--cisco-m-priv);   background: var(--cisco-m-priv-bg); }
.cisco-mode-global { color: var(--cisco-m-global); background: var(--cisco-m-global-bg); }
.cisco-mode-iface  { color: var(--cisco-m-iface);  background: var(--cisco-m-iface-bg); }
.cisco-mode-vlan   { color: var(--cisco-m-vlan);   background: var(--cisco-m-vlan-bg); }
.cisco-mode-router { color: var(--cisco-m-router); background: var(--cisco-m-router-bg); }
.cisco-mode-line   { color: var(--cisco-m-line);   background: var(--cisco-m-line-bg); }
/* END MODE-BADGE */


/* ============================================================
   ROW-ACTIONS
   ============================================================ */

/* BEGIN ROW-ACTIONS */
.cisco-row-actions {
    display:         flex;
    gap:             2px;
    justify-content: flex-end;
}

.cisco-action-btn {
    background:    none;
    border:        none;
    cursor:        pointer;
    color:         var(--text-subtle);
    padding:       3px 5px;
    border-radius: var(--radius-sm);
    font-size:     0.85rem;
    line-height:   1;
    transition:    color      var(--transition-fast),
                   background var(--transition-fast);
}

.cisco-action-btn:hover {
    background: var(--glass);
}

.cisco-action-btn-del:hover  { color: var(--color-danger); }
.cisco-action-btn-edit:hover { color: var(--accent); }

.cisco-action-btn-ts        { font-weight: 700; }
.cisco-action-btn-ts.has-ts { color: var(--cisco-pt-password); }
.cisco-action-btn-ts:hover  { color: var(--cisco-pt-password); }
/* END ROW-ACTIONS */


/* ============================================================
   LEGEND-CHIP
   ============================================================ */

/* BEGIN LEGEND-CHIP */
.cisco-legend-chip {
    display:       inline-flex;
    align-items:   center;
    padding:       1px 7px;
    border-radius: var(--radius-sm);
    font-size:     var(--text-xs);
    font-family:   var(--font-mono);
}

.cisco-legend-chip-pflicht {
    border: 1px solid rgba(255, 255, 255, 0.18);
    color:  var(--text-secondary);
}

.cisco-legend-chip-optional {
    border: 1px dashed rgba(255, 255, 255, 0.13);
    color:  var(--text-muted);
}
/* END LEGEND-CHIP */


/* ============================================================
   MODAL-EXTRAS
   ============================================================ */

/* BEGIN MODAL-EXTRAS */
.cisco-field-row {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-3);
}

.cisco-optional {
    color:     var(--text-subtle);
    font-size: var(--text-xs);
}

.cisco-device-checks {
    display: flex;
    gap:     var(--space-2);
}

.cisco-device-checks .tag-filter {
    flex:             1;
    justify-content:  center;
    height:           40px;
}

.cisco-tag-list {
    display:    flex;
    flex-wrap:  wrap;
    gap:        var(--space-1);
    margin-top: var(--space-2);
    min-height: 10px;
}

.cisco-tag-entry {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    padding:       2px 8px;
    border-radius: var(--radius-sm);
    font-size:     var(--text-xs);
    color:         var(--accent);
    background:    var(--accent-subtle);
    border:        1px solid rgba(232, 99, 122, 0.25);
}

.cisco-tag-entry-del {
    background:  none;
    border:      none;
    color:       var(--accent);
    cursor:      pointer;
    font-size:   0.9rem;
    line-height: 1;
    padding:     0;
    opacity:     0.5;
    transition:  opacity var(--transition-fast);
}

.cisco-tag-entry-del:hover {
    opacity: 1;
}

.cisco-preview-cmd {
    font-family:   var(--font-mono);
    font-size:     var(--text-sm);
    min-height:    28px;
    padding:       var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background:    var(--glass);
    border:        1px solid var(--border);
    color:         var(--text-primary);
    word-break:    break-word;
}

.cisco-cmd-hint {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    flex-wrap:   wrap;
    margin-top:  var(--space-3);
}

.cisco-cmd-hint-sep {
    color: var(--text-subtle);
}

.cisco-divider {
    border:     none;
    border-top: 1px solid var(--border);
    margin:     var(--space-4) 0;
}

.cisco-param-list {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
    margin-bottom:  var(--space-2);
}

.cisco-param-entry {
    display:               grid;
    grid-template-columns: 130px 140px 1fr;
    gap:                   var(--space-2);
    align-items:           center;
}

.cisco-param-entry-label {
    font-size:     var(--text-xs);
    font-family:   var(--font-mono);
    color:         var(--text-secondary);
    background:    var(--glass);
    padding:       5px var(--space-3);
    border-radius: var(--radius-sm);
    border:        1px solid var(--border);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.cisco-param-entry .input {
    padding:   5px var(--space-3);
    font-size: var(--text-xs);
    height:    auto;
}

.cisco-param-add-btn {
    font-size:     var(--text-xs);
    color:         var(--accent);
    background:    none;
    border:        1px dashed rgba(232, 99, 122, 0.35);
    border-radius: var(--radius-sm);
    padding:       var(--space-2) var(--space-3);
    cursor:        pointer;
    font-family:   var(--font-sans);
    transition:    background var(--transition-fast);
}

.cisco-param-add-btn:hover {
    background: var(--accent-subtle);
}

.cisco-textarea {
    resize:     vertical;
    min-height: 80px;
    height:     auto;
}
/* Scrollbarer Modal-Body für das Befehl-Modal */
#cisco-modal-overlay .modal {
    max-height:     calc(100vh - 60px);
    display:        flex;
    flex-direction: column;
}

#cisco-modal-overlay .modal-body {
    overflow-y: auto;
    flex:       1;
}
/* END MODAL-EXTRAS */


/* ============================================================
   TS
   ============================================================ */

/* BEGIN TS */
.cisco-ts-cmd-label {
    font-family: var(--font-mono);
    font-size:   var(--text-xs);
    color:       var(--text-muted);
    margin-top:  2px;
}

.cisco-ts-list {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
    margin-bottom:  var(--space-3);
    min-height:     10px;
}

.cisco-ts-item {
    display:       flex;
    gap:           var(--space-3);
    align-items:   flex-start;
    padding:       var(--space-3) var(--space-4);
    background:    var(--glass);
    border-radius: var(--radius-sm);
    border:        1px solid var(--border);
}

.cisco-ts-item-text {
    flex:        1;
    font-size:   var(--text-sm);
    color:       var(--text-secondary);
    white-space: pre-wrap;
}

.cisco-ts-item-del {
    background:  none;
    border:      none;
    color:       var(--text-muted);
    cursor:      pointer;
    font-size:   1rem;
    line-height: 1;
    flex-shrink: 0;
    padding:     0 2px;
    transition:  color var(--transition-fast);
}

.cisco-ts-item-del:hover {
    color: var(--color-danger);
}

.cisco-ts-empty {
    font-size:  var(--text-sm);
    color:      var(--text-muted);
    font-style: italic;
}
/* END TS */


/* ============================================================
   TOOLTIP
   ============================================================ */

/* BEGIN TOOLTIP */
.cisco-tooltip {
    position:      fixed;
    z-index:       var(--z-tooltip);
    pointer-events: none;
    background:    var(--surface-modal);
    border:        1px solid var(--border-hover);
    border-radius: var(--radius-md);
    padding:       var(--space-3) var(--space-4);
    max-width:     260px;
    font-size:     var(--text-xs);
    line-height:   1.6;
    color:         var(--text-secondary);
    box-shadow:    var(--shadow-lg);
    opacity:       0;
    transition:    opacity var(--transition-fast);
    white-space:   normal;
}

.cisco-tooltip.is-visible {
    opacity: 1;
}

.cisco-tooltip-name {
    font-family:   var(--font-mono);
    font-size:     var(--text-sm);
    font-weight:   600;
    margin-bottom: var(--space-1);
}

.cisco-tooltip-badges {
    display:       flex;
    gap:           var(--space-1);
    margin-bottom: var(--space-2);
    flex-wrap:     wrap;
}

.cisco-tooltip-badge {
    display:       inline-block;
    border-radius: var(--radius-sm);
    font-size:     var(--text-2xs);
    padding:       1px 6px;
    background:    var(--glass);
    color:         var(--text-muted);
}

.cisco-tooltip-row {
    display:    flex;
    gap:        var(--space-2);
    margin-top: 2px;
}

.cisco-tooltip-key {
    color:       var(--text-subtle);
    min-width:   42px;
    flex-shrink: 0;
}

.cisco-tooltip-val {
    color: var(--text-primary);
}

.cisco-tooltip-noinfo {
    color:      var(--text-subtle);
    font-style: italic;
}
/* END TOOLTIP */


/* ============================================================
   VISIBILITY
   ============================================================ */

/* BEGIN VISIBILITY */
.cisco-group-section.is-hidden,
.cisco-cmd-row.is-hidden,
.cisco-empty-row.is-hidden,
.cisco-noresult-row.is-hidden {
    display: none;
}

.cisco-empty-row td,
.cisco-noresult-row td {
    color:      var(--text-muted);
    font-style: italic;
}
/* END VISIBILITY */


/* ============================================================
   RESPONSIVE
   ============================================================ */

/* BEGIN RESPONSIVE */
@media (max-width: 900px) {
    .cisco-toolbar {
        flex-direction: column;
        align-items:    stretch;
    }

    .cisco-search-bar {
        min-width: unset;
    }

    .cisco-field-row {
        grid-template-columns: 1fr;
    }

    .cisco-param-entry {
        grid-template-columns: 1fr 1fr;
    }

    .cisco-param-entry-label {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .cisco-header-row {
        justify-content: flex-start;
    }

    .cisco-header-actions {
        flex-wrap: wrap;
        width:     100%;
    }

    .cisco-param-entry {
        grid-template-columns: 1fr;
    }

    .cisco-param-entry-label {
        grid-column: auto;
    }
}
/* END RESPONSIVE */