/* ====================================================================
   AkoPacket - Browser-native packet analyzer (Wireshark-style)
   Three-pane layout: filter bar / packet list / detail+hex / stats
   Loaded from index.html; consumed by js/akopacket/packet_ui.js.

   Reference incident (June 2026): packet_ui.js builds each packet
   row as a `.akopkt-list-row` with seven child `.akopkt-list-col`
   divs (no/time/src/dst/proto/len/info). No stylesheet styled those
   classes, so the columns rendered as default block-level divs and
   stacked vertically inside the row's 22px-tall absolute slot. Rows
   overflowed downward into the next absolute slot and the visual
   result was unreadable overlapping garbage (mission Arc 13 AkoBank
   SMB packet view). This file ships the missing layout rules.

   Theme tokens: every color goes through the platform's CSS custom
   properties (--ui-bg-*, --ui-text-*, --ui-border, --color-*) so
   dark + light themes both render correctly (Gate 78 parity).
   ==================================================================== */

/* ---------- Root + theme ---------- */
.akopkt-root {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 400px;
    color: var(--ui-text-primary, #f5f0e6);
    background: var(--ui-bg-primary, #1a1a1a);
    font: 12px/1.4 var(--font-mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
    overflow: hidden;
}

/* ---------- Filter bar (top) ---------- */
.akopkt-filterbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--ui-bg-secondary, #222);
    border-bottom: 1px solid var(--ui-border, #333);
    flex: 0 0 auto;
}
.akopkt-filter-input-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}
.akopkt-filter-input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 10px;
    background: var(--ui-bg-elevated, var(--ui-bg-secondary, #2a2a2a));
    color: var(--ui-text-primary, #f5f0e6);
    border: 1px solid var(--ui-border, #333);
    border-radius: 4px;
    font: 12px/1.4 var(--font-mono, monospace);
    outline: none;
}
.akopkt-filter-input:focus {
    border-color: var(--color-ochre, #d4a03c);
}
.akopkt-filter-input.valid {
    border-color: var(--color-forest, #5ab865);
    background: rgba(90, 184, 101, 0.08);
}
.akopkt-filter-input.invalid {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}
.akopkt-filter-tooltip {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    padding: 6px 10px;
    background: #1a1a1a;
    color: #fca5a5;
    border: 1px solid #ef4444;
    border-radius: 4px;
    font-size: 11px;
    max-width: 480px;
}
.akopkt-suggest-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 25;
    max-height: 240px;
    overflow-y: auto;
    background: var(--ui-bg-elevated, #2a2a2a);
    border: 1px solid var(--ui-border, #333);
    border-radius: 4px;
}
.akopkt-suggest-item {
    padding: 6px 10px;
    cursor: pointer;
    color: var(--ui-text-primary, #f5f0e6);
    border-bottom: 1px solid var(--ui-border, #333);
}
.akopkt-suggest-item:last-child { border-bottom: none; }
.akopkt-suggest-item:hover { background: rgba(212, 160, 60, 0.12); }

.akopkt-btn {
    padding: 6px 12px;
    background: var(--ui-bg-elevated, #2a2a2a);
    color: var(--ui-text-primary, #f5f0e6);
    border: 1px solid var(--ui-border, #444);
    border-radius: 4px;
    cursor: pointer;
    font: 12px/1.2 var(--font-sans, 'IBM Plex Sans', sans-serif);
    min-height: 28px;
}
.akopkt-btn:hover { border-color: var(--color-ochre, #d4a03c); }
.akopkt-btn-apply { background: var(--color-forest, #5ab865); color: #fff; border-color: var(--color-forest, #5ab865); }
.akopkt-btn-apply:hover { background: #4ea659; }
.akopkt-btn-clear { background: var(--ui-bg-elevated, #2a2a2a); }
.akopkt-count {
    color: var(--ui-text-muted, #888);
    font-size: 11px;
    margin-left: 4px;
    white-space: nowrap;
}

/* ---------- Panes container (list + lower stack) ---------- */
.akopkt-panes {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.akopkt-divider {
    flex: 0 0 6px;
    background: var(--ui-border, #333);
    cursor: row-resize;
}
.akopkt-divider-h { height: 6px; }
.akopkt-divider:hover { background: var(--color-ochre, #d4a03c); }

/* ---------- Packet list pane ---------- */
.akopkt-listpane {
    display: flex;
    flex-direction: column;
    flex: 1 1 40%;
    min-height: 120px;
    overflow: hidden;
}
.akopkt-list-header {
    display: flex;
    align-items: center;
    background: var(--ui-bg-secondary, #222);
    border-bottom: 1px solid var(--ui-border, #444);
    color: var(--color-ochre, #d4a03c);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex: 0 0 26px;
    height: 26px;
    line-height: 26px;
}
.akopkt-list-viewport {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    background: var(--ui-bg-primary, #1a1a1a);
}
.akopkt-list-spacer { width: 100%; }
.akopkt-list-rows { width: 100%; }

/* THE CRITICAL FIX: every packet row is a flex row of 7 columns. */
.akopkt-row {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    cursor: pointer;
    color: var(--ui-text-primary, #f5f0e6);
    background: transparent;
}
.akopkt-row:hover { background: rgba(255, 255, 255, 0.04); }
.akopkt-row-selected,
.akopkt-row-selected:hover {
    background: rgba(212, 160, 60, 0.22);
    color: var(--ui-text-primary, #fff);
}

/* Protocol tints (Wireshark-flavoured, but using platform palette). */
.akopkt-row-tcp     { background-color: rgba(167, 198, 210, 0.10); }
.akopkt-row-tcp:hover { background-color: rgba(167, 198, 210, 0.18); }
.akopkt-row-dns     { background-color: rgba(126, 178, 109, 0.10); }
.akopkt-row-dns:hover { background-color: rgba(126, 178, 109, 0.18); }
.akopkt-row-http    { background-color: rgba(120, 198, 121, 0.10); }
.akopkt-row-http:hover { background-color: rgba(120, 198, 121, 0.18); }
.akopkt-row-arp     { background-color: rgba(212, 160, 60, 0.10); }
.akopkt-row-arp:hover { background-color: rgba(212, 160, 60, 0.18); }
.akopkt-row-icmp    { background-color: rgba(199, 91, 57, 0.10); }
.akopkt-row-icmp:hover { background-color: rgba(199, 91, 57, 0.18); }
.akopkt-row-smb     { background-color: rgba(255, 199, 156, 0.10); }
.akopkt-row-smb:hover { background-color: rgba(255, 199, 156, 0.18); }
.akopkt-row-suspicious {
    background-color: rgba(239, 68, 68, 0.18);
    color: #fecaca;
}
.akopkt-row-suspicious:hover { background-color: rgba(239, 68, 68, 0.28); }
.akopkt-row-retx { font-style: italic; opacity: 0.85; }

/* Column cells: fixed widths so each child slot lines up under its header. */
.akopkt-list-col {
    padding: 0 8px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
    flex: 0 0 auto;
}
.akopkt-list-col-no    { width: 60px;  text-align: right; color: var(--ui-text-muted, #888); }
.akopkt-list-col-time  { width: 110px; color: var(--ui-text-muted, #aaa); }
.akopkt-list-col-src   { width: 150px; }
.akopkt-list-col-dst   { width: 150px; }
.akopkt-list-col-proto { width: 70px;  font-weight: 600; color: var(--color-ochre, #d4a03c); }
.akopkt-list-col-len   { width: 60px;  text-align: right; color: var(--ui-text-muted, #aaa); }
.akopkt-list-col-info  { flex: 1 1 auto; min-width: 0; }

/* Follow-stream bar (under packet list when a streamable packet is selected) */
.akopkt-followbar {
    padding: 4px 8px;
    background: var(--ui-bg-secondary, #222);
    border-top: 1px solid var(--ui-border, #333);
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.akopkt-btn-follow { background: var(--color-ochre, #d4a03c); color: #1a1a1a; border-color: var(--color-ochre, #d4a03c); font-weight: 600; }
.akopkt-btn-follow:hover { background: #c89432; }

/* ---------- Lower region (tab bar + detail/hex + stats) ---------- */
.akopkt-lower {
    display: flex;
    flex-direction: column;
    flex: 1 1 60%;
    min-height: 120px;
    overflow: hidden;
}
.akopkt-lower-tabbar {
    display: flex;
    background: var(--ui-bg-secondary, #222);
    border-bottom: 1px solid var(--ui-border, #333);
    flex: 0 0 32px;
}
.akopkt-tab {
    padding: 6px 14px;
    background: transparent;
    color: var(--ui-text-muted, #aaa);
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font: 12px/1.2 var(--font-sans, 'IBM Plex Sans', sans-serif);
}
.akopkt-tab:hover { color: var(--ui-text-primary, #f5f0e6); }
.akopkt-tab-active {
    color: var(--color-ochre, #d4a03c);
    border-bottom-color: var(--color-ochre, #d4a03c);
}

/* Packet view = detail (top) + sub-divider + hex (bottom) */
.akopkt-packet-view {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.akopkt-detail-pane {
    flex: 1 1 60%;
    min-height: 60px;
    overflow-y: auto;
    padding: 6px 8px;
    background: var(--ui-bg-primary, #1a1a1a);
    font-size: 12px;
}
.akopkt-subdivider {} /* inherits .akopkt-divider rules */
.akopkt-hex-pane,
.akopkt-terminal-dark {
    flex: 1 1 40%;
    min-height: 60px;
    overflow: auto;
    padding: 6px 8px;
    background: #0d1117;
    color: #d8dee9;
    font: 11px/1.4 var(--font-mono, ui-monospace, Menlo, monospace);
    white-space: pre;
}

/* Detail tree (collapsible per-layer block) */
.akopkt-detail-layer {
    margin: 0 0 4px 0;
}
.akopkt-detail-layer-header {
    cursor: pointer;
    padding: 3px 6px;
    background: var(--ui-bg-secondary, #222);
    border-radius: 3px;
    user-select: none;
    color: var(--ui-text-primary, #f5f0e6);
    display: flex;
    align-items: center;
    gap: 6px;
}
.akopkt-detail-layer-header:hover { background: rgba(212, 160, 60, 0.12); }
.akopkt-detail-arrow {
    font-size: 9px;
    color: var(--color-ochre, #d4a03c);
    width: 10px;
    display: inline-block;
}
.akopkt-detail-layer-title {
    font-weight: 600;
    color: var(--color-ochre, #d4a03c);
}
.akopkt-detail-layer-body {
    padding: 4px 8px 6px 18px;
}
.akopkt-detail-field {
    padding: 1px 0;
    color: var(--ui-text-primary, #f5f0e6);
    cursor: default;
}
.akopkt-detail-field:hover { background: rgba(212, 160, 60, 0.08); }
.akopkt-detail-subfield {
    margin-left: 14px;
    color: var(--ui-text-muted, #aaa);
    font-size: 11px;
    white-space: pre;
}
.akopkt-detail-empty {
    padding: 12px;
    color: var(--ui-text-muted, #888);
    font-style: italic;
}

/* Hex dump rows */
.akopkt-hex-line {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.akopkt-hex-offset { color: #7d8590; min-width: 4em; }
.akopkt-hex-bytes  { color: #d8dee9; }
.akopkt-hex-ascii  { color: #a5d6ff; }
.akopkt-hex-byte,
.akopkt-hex-char,
.akopkt-hex-pad { cursor: default; }

/* Cross-pane highlight: when hovering a detail field, the bytes + ascii
   tied to that field in the hex pane light up, and vice versa. */
.akopkt-hl,
.akopkt-detail-field.akopkt-hl,
.akopkt-hex-byte.akopkt-hl,
.akopkt-hex-char.akopkt-hl {
    background: rgba(212, 160, 60, 0.32);
    color: #fff;
    border-radius: 2px;
}

/* ---------- Statistics view ---------- */
.akopkt-stats-view {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px;
}
.akopkt-stats-subtabs {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--ui-border, #333);
}
.akopkt-stats-body { display: flex; flex-direction: column; gap: 4px; }
.akopkt-stats-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.akopkt-stats-head {
    font-weight: 600;
    color: var(--color-ochre, #d4a03c);
    border-bottom: 1px solid var(--ui-border, #444);
}
.akopkt-stats-cell { flex: 1 1 auto; min-width: 0; }
.akopkt-stats-cell-proto { flex: 0 0 100px; font-weight: 600; color: var(--color-ochre, #d4a03c); }
.akopkt-stats-bar {
    flex: 0 0 120px;
    height: 8px;
    background: var(--ui-bg-secondary, #222);
    border-radius: 4px;
    overflow: hidden;
}
.akopkt-stats-bar-fill {
    display: block;
    height: 100%;
    background: var(--color-ochre, #d4a03c);
}
.akopkt-stats-timeline {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 120px;
    padding: 6px;
    background: var(--ui-bg-secondary, #222);
    border-radius: 4px;
}
.akopkt-stats-tbar {
    flex: 1 1 0;
    min-width: 6px;
    background: var(--color-ochre, #d4a03c);
    border-radius: 2px 2px 0 0;
}

/* ---------- Stream follower modal ---------- */
.akopkt-stream-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9000;
}
.akopkt-stream-modal {
    width: min(880px, 92vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: var(--ui-bg-primary, #1a1a1a);
    border: 1px solid var(--color-ochre, #d4a03c);
    border-radius: 6px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}
.akopkt-stream-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: var(--ui-bg-secondary, #222);
    border-bottom: 1px solid var(--ui-border, #333);
}
.akopkt-stream-title { font-weight: 600; color: var(--color-ochre, #d4a03c); }
.akopkt-stream-close { background: transparent; border: none; color: var(--ui-text-primary, #f5f0e6); font-size: 18px; cursor: pointer; }
.akopkt-stream-meta { padding: 6px 14px; color: var(--ui-text-muted, #aaa); border-bottom: 1px solid var(--ui-border, #333); font-size: 11px; }
.akopkt-stream-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 14px;
    background: #0d1117;
    color: #d8dee9;
    white-space: pre-wrap;
    font: 12px/1.5 var(--font-mono, monospace);
}
.akopkt-stream-line { padding: 2px 0; word-break: break-word; }
.akopkt-stream-client { color: #a5d6ff; }
.akopkt-stream-server { color: #f9c270; }
.akopkt-stream-encrypted { color: #7d8590; font-style: italic; }
.akopkt-stream-footer {
    display: flex;
    gap: 8px;
    padding: 8px 14px;
    background: var(--ui-bg-secondary, #222);
    border-top: 1px solid var(--ui-border, #333);
}

/* ---------- Light-theme overrides (Gate 78 parity) ---------- */
:root[data-theme="light"] .akopkt-root {
    background: #f7f3eb;
    color: #1a1a1a;
}
:root[data-theme="light"] .akopkt-filterbar,
:root[data-theme="light"] .akopkt-list-header,
:root[data-theme="light"] .akopkt-followbar,
:root[data-theme="light"] .akopkt-lower-tabbar,
:root[data-theme="light"] .akopkt-detail-layer-header,
:root[data-theme="light"] .akopkt-stream-head,
:root[data-theme="light"] .akopkt-stream-footer {
    background: #ecdfc8;
}
:root[data-theme="light"] .akopkt-list-viewport,
:root[data-theme="light"] .akopkt-detail-pane {
    background: #f7f3eb;
}
:root[data-theme="light"] .akopkt-list-col-no,
:root[data-theme="light"] .akopkt-list-col-time,
:root[data-theme="light"] .akopkt-list-col-len,
:root[data-theme="light"] .akopkt-detail-subfield,
:root[data-theme="light"] .akopkt-stream-meta { color: #5a4a35; }
:root[data-theme="light"] .akopkt-row { color: #1a1a1a; }
:root[data-theme="light"] .akopkt-row-suspicious { color: #7f1d1d; background-color: rgba(239, 68, 68, 0.22); }