/* ── Network Info Widget v2 — Front-end Styles ──────────────────────────────── */

:root {
    --niw-accent: #7c6af7;
}

/* ── Base wrapper ── */
.niw-wrapper {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    max-width: 900px;
    margin: 24px auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.35);
}

/* ── DARK THEME ── */
.niw-dark {
    background: #0f0f1a;
    color: #e0def4;
    --niw-bg:        #0f0f1a;
    --niw-panel:     #1a1a2e;
    --niw-panel2:    #2a2a3e;
    --niw-border:    #2a2a3e;
    --niw-text:      #e0def4;
    --niw-muted:     #6e6a86;
    --niw-input-bg:  #1e1e2e;
    --niw-card-bg:   #1a1a2e;
    --niw-card-bg2:  #1e1e38;
    --niw-mono:      #c4b5fd;
    --niw-tab-bg:    #1a1a2e;
    --niw-tab-act:   #0f0f1a;
    --niw-hint:      #6e6a86;
    --niw-err-bg:    #2d1a1a;
    --niw-err-brd:   #a03030;
    --niw-err-txt:   #f08080;
}

/* ── LIGHT THEME ── */
.niw-light {
    background: #f9f9fb;
    color: #1e1e2e;
    --niw-bg:        #f9f9fb;
    --niw-panel:     #ffffff;
    --niw-panel2:    #f0eeff;
    --niw-border:    #ddd8fa;
    --niw-text:      #1e1e2e;
    --niw-muted:     #888;
    --niw-input-bg:  #fff;
    --niw-card-bg:   #fff;
    --niw-card-bg2:  #f3f0ff;
    --niw-mono:      #5a3fcf;
    --niw-tab-bg:    #ede8ff;
    --niw-tab-act:   #f9f9fb;
    --niw-hint:      #888;
    --niw-err-bg:    #fff0f0;
    --niw-err-brd:   #e08080;
    --niw-err-txt:   #c03030;
}

/* ── Header ── */
.niw-header {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--niw-panel);
    padding: 22px 28px 18px;
    border-bottom: 3px solid var(--niw-accent);
}

.niw-icon { font-size: 28px; line-height: 1; }

.niw-title {
    margin: 0 !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: var(--niw-text) !important;
}

/* ── Tabs ── */
.niw-tabs {
    display: flex;
    background: var(--niw-tab-bg);
    border-bottom: 1px solid var(--niw-border);
    overflow-x: auto;
    scrollbar-width: none;
}

.niw-tabs::-webkit-scrollbar { display: none; }

.niw-tab {
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    color: var(--niw-muted) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 13px 20px !important;
    cursor: pointer !important;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.niw-tab:hover {
    color: var(--niw-text) !important;
}

.niw-tab.active {
    color: var(--niw-accent) !important;
    border-bottom-color: var(--niw-accent) !important;
    background: var(--niw-tab-act) !important;
}

/* ── Tab panels ── */
.niw-tab-content { display: none; padding: 22px 28px; }
.niw-tab-content.active { display: block; }

/* ── Input row ── */
.niw-input-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.niw-input-row-col {
    flex-direction: column;
}

.niw-input-row-col .niw-input { width: 100%; }

.niw-input {
    flex: 1;
    min-width: 180px;
    background: var(--niw-input-bg) !important;
    border: 2px solid var(--niw-border) !important;
    border-radius: 10px !important;
    color: var(--niw-text) !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    outline: none !important;
    transition: border-color 0.2s !important;
    box-shadow: none !important;
}

.niw-input:focus { border-color: var(--niw-accent) !important; }
.niw-input::placeholder { color: var(--niw-muted) !important; }

.niw-select {
    background: var(--niw-input-bg) !important;
    border: 2px solid var(--niw-border) !important;
    border-radius: 10px !important;
    color: var(--niw-text) !important;
    font-size: 14px !important;
    padding: 10px 12px !important;
    cursor: pointer;
}

.niw-btn {
    background: var(--niw-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
    cursor: pointer !important;
    transition: opacity 0.2s, transform 0.1s !important;
    white-space: nowrap;
    box-shadow: none !important;
}

.niw-btn:hover  { opacity: 0.88 !important; transform: translateY(-1px); }
.niw-btn:active { transform: translateY(0); }

/* ── Hint ── */
.niw-hint {
    color: var(--niw-hint);
    font-size: 12px;
    margin: 8px 0 0 !important;
}

.niw-hint code {
    background: var(--niw-panel2);
    color: var(--niw-accent);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12px;
}

/* ── Error / Loading ── */
.niw-error {
    margin-top: 14px;
    padding: 11px 15px;
    background: var(--niw-err-bg);
    border: 1px solid var(--niw-err-brd);
    border-radius: 8px;
    color: var(--niw-err-txt);
    font-size: 13.5px;
}

.niw-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0 0;
    color: var(--niw-accent);
    font-size: 13px;
}

.niw-spinner {
    display: inline-block;
    width: 16px; height: 16px;
    border: 2px solid var(--niw-border);
    border-top-color: var(--niw-accent);
    border-radius: 50%;
    animation: niw-spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes niw-spin { to { transform: rotate(360deg); } }

/* ── Results ── */
.niw-results { margin-top: 6px; }

.niw-section-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--niw-accent);
    margin: 20px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--niw-border);
}

/* ── Cards grid ── */
.niw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 10px;
}

.niw-grid-wide {
    grid-template-columns: 1fr 1fr;
}

.niw-card {
    background: var(--niw-card-bg);
    border: 1px solid var(--niw-border);
    border-radius: 10px;
    padding: 11px 13px;
    position: relative;
    transition: border-color 0.2s, background 0.2s;
}

.niw-card:hover {
    border-color: var(--niw-accent);
    background: var(--niw-card-bg2);
}

.niw-card-label {
    font-size: 10px;
    color: var(--niw-muted);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.niw-card-value {
    font-size: 14.5px;
    color: var(--niw-text);
    font-weight: 600;
    word-break: break-all;
    padding-right: 22px;
}

.niw-card-value.mono {
    font-family: 'Cascadia Code', Consolas, 'Courier New', monospace;
    font-size: 11.5px;
    color: var(--niw-mono);
    letter-spacing: 0.4px;
}

.niw-copy-btn {
    position: absolute;
    top: 8px; right: 8px;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: var(--niw-muted) !important;
    font-size: 13px !important;
    padding: 2px 4px !important;
    border-radius: 4px !important;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s !important;
    box-shadow: none !important;
    line-height: 1;
}

.niw-card:hover .niw-copy-btn { opacity: 1; }
.niw-copy-btn:hover { color: var(--niw-accent) !important; }
.niw-copy-btn.copied { color: #4caf50 !important; opacity: 1; }

/* ── Export ── */
.niw-export-row {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    justify-content: flex-end;
}

.niw-export-btn {
    background: var(--niw-panel2) !important;
    border: 1px solid var(--niw-border) !important;
    border-radius: 7px !important;
    color: var(--niw-text) !important;
    font-size: 12px !important;
    padding: 6px 13px !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
    box-shadow: none !important;
}

.niw-export-btn:hover {
    background: var(--niw-border) !important;
}

/* ── Subnet Splitter table ── */
.niw-split-summary {
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--niw-muted);
}

.niw-split-summary strong { color: var(--niw-text); }

.niw-table-wrap { overflow-x: auto; }

.niw-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 10px;
}

.niw-table th {
    background: var(--niw-panel2);
    color: var(--niw-accent);
    font-size: 10px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 9px 12px;
    text-align: left;
    border-bottom: 2px solid var(--niw-border);
}

.niw-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--niw-border);
    color: var(--niw-text);
    font-family: Consolas, monospace;
    font-size: 12.5px;
}

.niw-table tr:hover td { background: var(--niw-card-bg2); }
.niw-table .niw-td-idx { color: var(--niw-muted); font-family: inherit; }

/* ── Range → CIDR ── */
.niw-cidr-list {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.niw-cidr-card {
    background: var(--niw-card-bg);
    border: 1px solid var(--niw-border);
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.niw-cidr-badge {
    background: var(--niw-accent);
    color: #fff;
    font-family: Consolas, monospace;
    font-size: 14px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 6px;
    white-space: nowrap;
}

.niw-cidr-meta {
    font-size: 12px;
    color: var(--niw-muted);
    font-family: Consolas, monospace;
}

.niw-cidr-meta span { display: inline-block; margin-right: 16px; }
.niw-cidr-meta strong { color: var(--niw-text); }

/* ── History ── */
.niw-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--niw-muted);
}

.niw-history-list { display: flex; flex-direction: column; gap: 8px; }

.niw-history-item {
    background: var(--niw-card-bg);
    border: 1px solid var(--niw-border);
    border-radius: 9px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: border-color 0.15s;
}

.niw-history-item:hover { border-color: var(--niw-accent); }

.niw-history-ip {
    font-family: Consolas, monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--niw-text);
}

.niw-history-meta {
    font-size: 11.5px;
    color: var(--niw-muted);
    margin-top: 2px;
}

.niw-history-arrow {
    color: var(--niw-accent);
    font-size: 16px;
}

.niw-history-empty {
    color: var(--niw-muted);
    font-size: 13px;
    text-align: center;
    padding: 24px 0;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .niw-tab-content { padding: 16px; }
    .niw-grid { grid-template-columns: 1fr 1fr; }
    .niw-grid-wide { grid-template-columns: 1fr; }
    .niw-title { font-size: 1.1rem !important; }
    .niw-header { padding: 16px; }
}

/* ── Ping bars ── */
.niw-ping-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.niw-ping-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.niw-ping-label {
    font-size: 11px;
    color: var(--niw-muted);
    width: 28px;
    flex-shrink: 0;
    font-family: Consolas, monospace;
}

.niw-ping-bar-track {
    flex: 1;
    height: 10px;
    background: var(--niw-panel2);
    border-radius: 99px;
    overflow: hidden;
}

.niw-ping-bar-fill {
    height: 100%;
    background: var(--niw-accent);
    border-radius: 99px;
    transition: width 0.4s ease;
    min-width: 4px;
}

.niw-ping-ms {
    font-size: 11px;
    color: var(--niw-text);
    font-family: Consolas, monospace;
    width: 58px;
    text-align: right;
    flex-shrink: 0;
}

/* ── Port scanner ── */
.niw-status-open {
    color: #4caf50;
    font-weight: 700;
    font-size: 12px;
}

.niw-status-closed {
    color: var(--niw-muted);
    font-size: 12px;
}

.niw-port-open td { background: rgba(76, 175, 80, 0.04); }

/* ── DNS record type badges ── */
.niw-dns-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    background: var(--niw-panel2);
    color: var(--niw-accent);
}

.niw-dns-badge-a     { background: #1a3a1a; color: #81c784; }
.niw-dns-badge-aaaa  { background: #1a2a3a; color: #64b5f6; }
.niw-dns-badge-mx    { background: #3a1a3a; color: #ce93d8; }
.niw-dns-badge-ns    { background: #3a2a1a; color: #ffb74d; }
.niw-dns-badge-txt   { background: #2a2a1a; color: #fff176; }
.niw-dns-badge-cname { background: #1a3a3a; color: #4dd0e1; }
.niw-dns-badge-soa   { background: #3a1a1a; color: #ef9a9a; }
.niw-dns-badge-ptr   { background: #2a1a3a; color: #b39ddb; }

/* Light theme overrides for badges */
.niw-light .niw-dns-badge-a     { background: #e8f5e9; color: #2e7d32; }
.niw-light .niw-dns-badge-aaaa  { background: #e3f2fd; color: #1565c0; }
.niw-light .niw-dns-badge-mx    { background: #f3e5f5; color: #6a1b9a; }
.niw-light .niw-dns-badge-ns    { background: #fff3e0; color: #e65100; }
.niw-light .niw-dns-badge-txt   { background: #fffde7; color: #f57f17; }
.niw-light .niw-dns-badge-cname { background: #e0f7fa; color: #00695c; }
.niw-light .niw-dns-badge-soa   { background: #ffebee; color: #b71c1c; }
.niw-light .niw-dns-badge-ptr   { background: #ede7f6; color: #4527a0; }

/* ── Geo map link ── */
.niw-export-row a.niw-export-btn {
    text-decoration: none !important;
    display: inline-block;
}