/* search.css */
:root {
    --bg-body: #050505;
    --bg-nav: rgba(13, 17, 23, 0.9);

    /* Gunmetal Blue-Grey Palette */
    --card-bg: #0d1117;
    --card-hover: #161b22;
    --border: #303d4d;

    --primary: #4da6ff; /* Electric Blue */
    --accent: #238636;  /* Success Green */
    --text-main: #edf2f7;
    --text-muted: #94a3b8;

    /* Tag Colors */
    --tag-port-bg: rgba(77, 166, 255, 0.15);
    --tag-port-text: #4da6ff;
    --tag-os-bg: rgba(210, 153, 34, 0.15);
    --tag-os-text: #d29922;
    --tag-svc-bg: rgba(163, 113, 247, 0.15);
    --tag-svc-text: #a371f7;
    --tag-key-bg: rgba(63, 185, 80, 0.15);
    --tag-key-text: #3fb950;
}

body {
    background: var(--bg-body);
    color: var(--text-main);
    font-family: 'Rajdhani', 'Segoe UI', sans-serif;
    margin: 0;
    padding-top: 80px;
}

/* NAVBAR */
.navbar {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 75px;
    background: var(--bg-nav);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; padding: 0 20px;
    z-index: 1000; box-sizing: border-box;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.nav-brand { margin-right: 25px; flex-shrink: 0; }
.nav-logo-img {
    height: 38px; width: auto;
    filter: drop-shadow(0 0 10px rgba(77, 166, 255, 0.3));
    display: block;
}

.nav-search {
    flex-grow: 1; max-width: 600px; position: relative; margin-right: 20px;
}

.nav-input {
    width: 100%; background: #050505; border: 1px solid var(--border);
    padding: 12px 45px 12px 20px; border-radius: 8px;
    color: var(--text-main); outline: none; box-sizing: border-box;
    font-size: 1rem; font-family: inherit; transition: all 0.3s ease;
}
.nav-input:focus {
    border-color: var(--primary); box-shadow: 0 0 15px rgba(77, 166, 255, 0.15);
}
.nav-search i {
    position: absolute; right: 15px; top: 14px;
    color: var(--text-muted); cursor: pointer;
}
.nav-search i:hover { color: var(--primary); }

/* CONTROLS */
.nav-controls {
    display: flex; gap: 12px; align-items: center; margin-left: auto; flex-shrink: 0;
}
.nav-select {
    appearance: none; -webkit-appearance: none;
    background-color: #0d1117; border: 1px solid var(--border); color: var(--text-muted);
    padding: 8px 30px 8px 12px; border-radius: 6px; font-size: 0.85rem;
    font-family: inherit; cursor: pointer; height: 38px;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%234da6ff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 10px;
}
.nav-select:hover { border-color: var(--primary); background-color: var(--card-hover); }

.btn-export {
    background: #1f6feb; color: white; border: none;
    padding: 0 20px; border-radius: 6px; cursor: pointer;
    font-size: 0.9rem; font-weight: 600; display: flex; align-items: center;
    gap: 8px; height: 38px; font-family: inherit;
    box-shadow: 0 4px 10px rgba(31, 111, 235, 0.2);
}
.btn-export:hover { background: #388bfd; }

/* LAYOUT */
.container { width: 95%; max-width: 1600px; margin: 0 auto; padding-bottom: 50px; }
.results-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; margin-top: 20px;}
.meta-info { color: var(--text-muted); font-size: 0.9rem; font-family: monospace; }
.row-label { color: var(--text-muted); margin-right: 10px; font-size: 0.9rem; }

/* TABLE (DESKTOP) */
.table-wrapper {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 8px; overflow-x: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
table.search-table { width: 100%; border-collapse: collapse; min-width: 900px; }

th {
    text-align: left; padding: 16px;
    background: #161b22; color: var(--text-muted);
    font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px;
    border-bottom: 1px solid var(--border);
}
td { padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: top; font-size: 0.95rem; }

tr.main-row:hover { background: #1c2128; cursor: pointer; }
.icon-cell { text-align: center; color: var(--primary); font-size: 0.9rem; }

/* UPDATED: Classic Monospace Font for IPs */
.col-ip {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    color: var(--primary); font-size: 1rem; font-weight: 600;
}

.col-date { text-align: right; color: var(--text-muted); font-size: 0.85rem; font-family: monospace; }

/* TAGS */
.tag { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 0.8rem; margin: 0 4px 4px 0; font-weight: 600; }
.tag.port { background: var(--tag-port-bg); color: var(--tag-port-text); font-family: monospace; }
.tag.os { background: var(--tag-os-bg); color: var(--tag-os-text); }
.tag.svc { background: var(--tag-svc-bg); color: var(--tag-svc-text); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; }
.tag.key { background: var(--tag-key-bg); color: var(--tag-key-text); }
.empty { color: #333; font-style: italic; font-size: 0.8rem; }

/* JSON VIEWER */
.detail-row { display: none; background: #0a0c10; }
.detail-row.active-detail { display: table-row; }
.detail-content { padding: 20px; border-top: 1px dashed var(--border); }
.json-box {
    background: #050505; padding: 15px; border-radius: 6px; border: 1px solid #303d4d;
    font-family: 'Consolas', monospace; font-size: 0.85rem; color: #a5d6ff;
    white-space: pre-wrap; line-height: 1.4;
    max-height: 400px; overflow-y: auto;
}
.j-key { color: #79c0ff; } .j-str { color: #a5d6ff; } .j-num { color: #d2a8ff; } .j-bool { color: #ff7b72; }

.action-bar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.btn-copy {
    background: #21262d; border: 1px solid var(--border); color: var(--text-muted);
    padding: 6px 12px; border-radius: 4px; cursor: pointer; display: flex; gap: 6px; align-items: center;
}
.btn-copy:hover { border-color: var(--primary); color: var(--primary); }
.toggle-icon { transition: transform 0.2s; } .rotated { transform: rotate(90deg); }

/* PAGINATION */
.pagination-area { display: flex; justify-content: center; padding: 30px 0; }
.btn-show-more {
    background: #161b22; border: 1px solid var(--border); color: var(--primary);
    padding: 12px 50px; border-radius: 8px; cursor: pointer; font-size: 1rem;
    font-weight: 600; width: 100%; max-width: 300px; font-family: inherit;
    transition: 0.2s;
}
.btn-show-more:hover { background: #21262d; border-color: var(--primary); box-shadow: 0 0 15px rgba(77, 166, 255, 0.2); }

/* =========================================
   MOBILE RESPONSIVENESS
   ========================================= */
@media (max-width: 768px) {
    .desktop-only, .desktop-col, thead { display: none; }

    .navbar { padding: 0 10px; height: 65px; }
    .nav-brand { margin-right: 15px; }
    .nav-logo-img { height: 32px; }
    .nav-controls { display: none; }
    .nav-search { margin-right: 0; width: 100%; }

    .container { padding: 10px; width: 100%; }
    .results-toolbar { flex-direction: column; align-items: flex-start; gap: 10px; }
    .table-wrapper { background: transparent; border: none; box-shadow: none; overflow: visible; }
    table.search-table { min-width: 100%; display: block; }
    tbody { display: block; width: 100%; }

    /* CARD VIEW */
    tr.main-row {
        display: flex; flex-direction: column;
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: 10px;
        margin-bottom: 15px; padding: 15px;
        position: relative;
    }

    td { padding: 5px 0; border: none; display: block; width: 100%; text-align: left; }

    .icon-cell { position: absolute; right: 15px; top: 15px; text-align: right; width: auto; }
    .col-ip { font-size: 1.2rem; margin-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 8px; }
    td[data-label="Ports"], td[data-label="Services"] { display: flex; flex-wrap: wrap; gap: 5px; }
    .col-date { text-align: left; font-size: 0.8rem; margin-top: 10px; color: #555; }

    /* MOBILE JSON FIX */
    .detail-row.active-detail { display: block; margin-bottom: 15px; }
    .detail-cell { display: block; padding: 0; border: none; }
    .detail-content { padding: 10px; border: 1px solid var(--border); background: #000; border-radius: 8px; }
    .json-box { font-size: 0.75rem; word-break: break-all; padding: 10px; max-height: 300px; }
}