/* ===== CSS Custom Properties ===== */
:root {
    --bg: white;
    --bg-content: #fafafa;
    --bg-surface: #f8f8f8;
    --bg-elevated: #f0f0f0;
    --bg-sidebar: #f5f5f5;
    --bg-input: white;
    --bg-tab: #e8e8e8;
    --bg-tab-active: white;

    --text: #333;
    --text-secondary: #555;
    --text-muted: #888;
    --text-dim: #999;

    --border: #ddd;
    --border-medium: #888;
    --border-input: #ccc;

    --link: #2266aa;
    --selected-border: #2266aa;
    --selected-shadow: 0 0 0 2px rgba(34,102,170,0.3);
    --focus-ring-inset: inset 0 0 0 2px rgba(34,102,170,0.2);
    --focus-ring-outer: 0 0 0 2px rgba(68,136,204,0.2);
    --proc-hover-shadow: 0 3px 8px rgba(0,0,0,0.15);
    --panel-shadow: -2px -1px 6px rgba(0,0,0,0.08);

    --accent-blue: #4488cc;
    --accent-blue-hover: #3377bb;
    --accent-green: #2d9e2d;
    --accent-red: #cc3333;
    --accent-orange: #e67e22;
    --accent-orange-hover: #d4710e;
    --accent-orange-border: #c96b15;
    --orange-text: #e67e22;

    --status-green-bg: #d4edda;
    --status-green-fg: #155724;
    --status-red-bg: #f8d7da;
    --status-red-fg: #721c24;
    --proc-alive-bg: #f0faf0;
    --proc-dead-bg: #faf0f0;
    --market-bg: #f0f4fa;
    --market-border: #6699cc;

    --brand-green: #2a6e2a;
    --divider: #888;

    --action-start-bg: #90ee90; --action-start-border: #5cb85c;
    --action-stop-bg: #ff6b6b; --action-stop-border: #cc3333;
    --action-connect-bg: #87ceeb; --action-connect-border: #5599cc;
    --action-log-bg: #ddd; --action-log-border: #999;

    --ticker-bg: #DDDDDD;
    --ticker-active-bg: #4488cc;
    --ticker-active-border: #336699;

    --runner-btn-bg: #5cb85c;
    --runner-btn-hover: #4cae4c;

    --warn-bg: #fff8e0;
    --warn-fg: #665500;
    --warn-border: #e0d080;
    --warn-code-bg: #f0e8c0;

    --db-error-bg: #fef0f0;
    --db-error-fg: #cc3333;
    --db-schema-bg: #f5f5f5;
    --db-schema-col: #337;
    --db-results-hover: #f0f5ff;
    --db-null: #bbb;

    --silence-rule-bg: #f8f0e8;
    --silence-rule-border: #e0c8a0;
    --silence-remove-bg: #faf0f0;
    --silence-remove-hover: #f0d0d0;

    --config-link-bg: #d8dce0;
    --config-link-border: #aab4bd;
    --config-link-hover-bg: #c8cdd3;
    --config-link-hover-border: #8a95a0;

    --file-hover: #e0e0e0;
    --file-active: #d0d8e8;
    --file-group-border: #e0e0e0;
    --row-hover: #f5f5f5;

    --events-bg: #f0f0f0;
    --events-toggle: #555;
    --events-toggle-hover: #222;
    --event-card-bg: white;
    --event-active-bg: #fef8f0;
    --event-card-desc: #666;
    --event-badge-ready-bg: #d4edda; --event-badge-ready-fg: #155724;
    --event-badge-active-bg: #fff3cd; --event-badge-active-fg: #856404;
    --event-badge-done-bg: #e0e0e0; --event-badge-done-fg: #555;

    --info-bg: #f0f5fa;
    --info-border: #8ab;
    --info-toggle: #336;
    --info-toggle-hover: #114;
    --info-title: #2266aa;
    --info-title-border: #cde;
    --info-text: #333;

    --py-keyword: #0000cc;
    --py-builtin: #6a0dad;
    --py-string: #aa1111;
    --py-comment: #888888;
    --py-number: #008800;
    --py-decorator: #aa6600;
}

body.dark {
    --bg: #1e1e1e;
    --bg-content: #1e1e1e;
    --bg-surface: #252525;
    --bg-elevated: #2a2a2a;
    --bg-sidebar: #252525;
    --bg-input: #1e1e1e;
    --bg-tab: #333333;
    --bg-tab-active: #1e1e1e;

    --text: #ddd;
    --text-secondary: #aaa;
    --text-muted: #777;
    --text-dim: #666;

    --border: #3a3a3a;
    --border-medium: #444;
    --border-input: #444;

    --link: #6699cc;
    --selected-border: #4488cc;
    --selected-shadow: 0 0 0 2px rgba(68,136,204,0.4);
    --focus-ring-inset: inset 0 0 0 2px rgba(68,136,204,0.3);
    --focus-ring-outer: 0 0 0 2px rgba(68,136,204,0.3);
    --proc-hover-shadow: 0 3px 8px rgba(0,0,0,0.4);
    --panel-shadow: -2px -1px 6px rgba(0,0,0,0.3);

    --accent-blue: #2a5a8a;
    --accent-blue-hover: #336699;
    --accent-orange: #b35c0a;
    --accent-orange-hover: #a05008;
    --accent-orange-border: #8a4508;
    --orange-text: #cc8830;

    --status-green-bg: #1e3a1e;
    --status-green-fg: #6dce6d;
    --status-red-bg: #3a1e1e;
    --status-red-fg: #e07070;
    --proc-alive-bg: #1e2e1e;
    --proc-dead-bg: #2e1e1e;
    --market-bg: #1e2228;
    --market-border: #4466aa;

    --brand-green: #5cb85c;
    --divider: #555;

    --action-start-bg: #2d6e2d; --action-start-border: #555;
    --action-stop-bg: #8b2222; --action-stop-border: #555;
    --action-connect-bg: #2a5a7a; --action-connect-border: #555;
    --action-log-bg: #3a3a3a; --action-log-border: #555;

    --ticker-bg: #3a3a3a;
    --ticker-active-bg: #2a5a8a;
    --ticker-active-border: #4488cc;

    --runner-btn-bg: #2d6e2d;
    --runner-btn-hover: #357a35;

    --warn-bg: #2e2a18;
    --warn-fg: #ccaa44;
    --warn-border: #4a4020;
    --warn-code-bg: #3a3420;

    --db-error-bg: #2e1e1e;
    --db-error-fg: #e07070;
    --db-schema-bg: #1e1e1e;
    --db-schema-col: #7aafdd;
    --db-results-hover: #252a30;
    --db-null: #555;

    --silence-rule-bg: #2e2820;
    --silence-rule-border: #4a3e28;
    --silence-remove-bg: #2e1e1e;
    --silence-remove-hover: #3a2020;

    --config-link-bg: #2a3040;
    --config-link-border: #445;
    --config-link-hover-bg: #354050;
    --config-link-hover-border: #668;

    --file-hover: #333;
    --file-active: #2a3a4a;
    --file-group-border: #333;
    --row-hover: #2a2a2a;

    --events-bg: #252525;
    --events-toggle: #999;
    --events-toggle-hover: #ddd;
    --event-card-bg: #2a2a2a;
    --event-active-bg: #2e2820;
    --event-card-desc: #999;
    --event-badge-ready-bg: #1e3a1e; --event-badge-ready-fg: #6dce6d;
    --event-badge-active-bg: #3a3020; --event-badge-active-fg: #ddaa44;
    --event-badge-done-bg: #333; --event-badge-done-fg: #888;

    --info-bg: #1e2228;
    --info-border: #445;
    --info-toggle: #8ab;
    --info-toggle-hover: #bde;
    --info-title: #6699cc;
    --info-title-border: #334;
    --info-text: #bcc;

    --py-keyword: #569cd6;
    --py-builtin: #dcdcaa;
    --py-string: #ce9178;
    --py-comment: #6a9955;
    --py-number: #b5cea8;
    --py-decorator: #d7ba7d;
}

/* ===== Utility classes ===== */

.section-label {
    font-family: monospace;
    font-size: 12px;
    font-weight: bold;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mono-content {
    margin: 0;
    padding: 12px 16px;
    font-family: monospace;
    font-size: 13px;
    line-height: 1.5;
    overflow: auto;
    background: var(--bg-content);
    color: var(--text);
    white-space: pre-wrap;
    word-wrap: break-word;
    tab-size: 4;
}

/* ===== Base styles ===== */

body {
    margin: 0;
    padding-bottom: 70px;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
    background: var(--bg);
    color: var(--text);
}
body.interviewer {
    padding-bottom: 70px;
}
button {
    font-weight: bold;
    text-align: center;
    border-radius: 8px;
    border: 2px solid black;
}

/* ===== Two-panel layout ===== */

.panels_container {
    display: flex;
    flex: 1;
    min-height: 0;
}
.panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}
.panel_content {
    flex: 1;
    overflow: auto;
    position: relative;
}
.panel_divider {
    width: 3px;
    background: var(--divider);
    cursor: col-resize;
    flex-shrink: 0;
}

/* ===== Tabs ===== */

.section_buttons {
    display: flex;
    border-bottom: 2px solid var(--border-medium);
    gap: 0;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.gui_select {
    padding: 5px 10px;
    border: 2px solid var(--border-medium);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background-color: var(--bg-tab);
    color: var(--text-secondary);
    cursor: pointer;
    margin-bottom: -2px;
    font-size: 12px;
    position: relative;
}
.gui_select:hover {
    background-color: var(--bg-elevated);
}
.gui_select[data-has-issues] {
    z-index: 1;
}
.gui_select[data-has-issues]::after {
    content: "!";
    position: absolute;
    top: -4px;
    right: -4px;
    background: #cc3333;
    color: white;
    font-size: 10px;
    font-weight: bold;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
}
.gui_select.active_tab {
    background-color: var(--bg-tab-active);
    color: var(--text);
    border-color: var(--border-medium);
    border-bottom: 2px solid var(--bg-tab-active);
}
.gui_select.tab_unavailable {
    opacity: 0.4;
    cursor: default;
}
.gui_section {
    display: none;
    height: 100%;
    overflow: auto;
}
.gui_section.active_section {
    display: block;
}

/* ===== Dark mode toggle ===== */

.dark_toggle {
    position: fixed;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 150;
    padding: 5px 12px;
    border: 1px solid var(--border-input);
    border-radius: 4px;
    background: var(--bg-tab);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
    font-family: monospace;
}
.dark_toggle:hover {
    background: var(--bg-elevated);
    border-color: var(--border-medium);
}

/* ===== WS alert ===== */

#ws_alert {
    display: none;
    position: fixed;
    top: 12px;
    right: 12px;
    padding: 10px 18px;
    background-color: #cc3333;
    color: white;
    font-family: monospace;
    font-weight: bold;
    font-size: 14px;
    border-radius: 6px;
    z-index: 1000;
}

/* ===== Process graph ===== */

.proc_graph {
    position: relative;
    padding: 16px 8px;
}
.proc_columns {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 70px;
}
.proc_col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.proc_col_label {
    font-family: monospace;
    font-size: 11px;
    font-weight: bold;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 3px;
}
.proc {
    padding: 10px 14px;
    border-radius: 7px;
    border: 2px solid var(--border-input);
    border-left: 4px solid var(--border-input);
    background: var(--bg-tab-active);
    font-family: monospace;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    min-width: 100px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    transition: all 0.2s;
}
.proc:hover {
    box-shadow: var(--proc-hover-shadow);
}
.proc.alive {
    border-left-color: var(--accent-green);
    background: var(--proc-alive-bg);
}
.proc.dead {
    border-left-color: var(--accent-red);
    background: var(--proc-dead-bg);
}
.proc.selected {
    border-color: var(--selected-border);
    box-shadow: var(--selected-shadow);
}
.proc.selected.alive {
    border-left-color: var(--accent-green);
}
.proc.selected.dead {
    border-left-color: var(--accent-red);
}
.proc.disconnected,
.proc.selected.disconnected {
    border-left-color: #cc8800;
}
.proc[data-issues] {
    position: relative;
}
.proc[data-issues]::after {
    content: attr(data-issues);
    position: absolute;
    top: -6px;
    right: -6px;
    background: #e67e22;
    color: white;
    font-size: 10px;
    font-weight: bold;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 8px;
    padding: 0 3px;
}
.proc_ticker {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    font-weight: normal;
    margin-top: 2px;
}
#market {
    cursor: default;
    border-left-color: var(--market-border);
    background: var(--market-bg);
}
#dropcopy {
    margin-top: 8px;
}
.proc_col_center {
    justify-content: center;
}
.proc_lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ===== Process actions ===== */

.proc_actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding: 0 10px;
}
.action_btn {
    padding: 8px 20px;
    border-radius: 6px;
    border: 2px solid var(--border-medium);
    font-weight: bold;
    cursor: pointer;
    font-size: 13px;
    font-family: monospace;
}
.action_btn:hover {
    opacity: 0.85;
}
.action_start { background: var(--action-start-bg); border-color: var(--action-start-border); }
.action_stop { background: var(--action-stop-bg); border-color: var(--action-stop-border); }
.action_connect { background: var(--action-connect-bg); border-color: var(--action-connect-border); }

/* ===== Process details ===== */

#proc_details {
    margin-top: 16px;
    padding: 10px 14px;
    font-family: monospace;
    font-size: 13px;
    color: var(--text);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-left: 10px;
    margin-right: 10px;
}
.proc_detail_header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
#proc_detail_name {
    font-weight: bold;
    font-size: 14px;
}
.proc_status_badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}
.proc_status_badge.status_alive {
    background: var(--status-green-bg);
    color: var(--status-green-fg);
}
.proc_status_badge.status_dead {
    background: var(--status-red-bg);
    color: var(--status-red-fg);
}
.proc_detail_row {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
    line-height: 1.6;
}
.proc_detail_label {
    color: var(--text-muted);
    min-width: 90px;
}
.proc_detail_conn {
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 12px;
    margin-right: 4px;
}
.proc_detail_conn.conn_up {
    background: var(--status-green-bg);
    color: var(--status-green-fg);
}
.proc_detail_conn.conn_down {
    background: var(--status-red-bg);
    color: var(--status-red-fg);
}
.proc_detail_issues_ok {
    color: var(--accent-green);
}
.proc_detail_issues_warn {
    color: var(--accent-red);
    font-weight: bold;
}

/* ===== Cross-navigation links ===== */

.issue_source_link {
    color: var(--link);
    text-decoration: none;
    cursor: pointer;
}
.issue_source_link:hover {
    text-decoration: underline;
}
.proc_quick_link {
    display: inline-block;
    padding: 6px 18px;
    margin-right: 8px;
    font-size: 14;
    font-weight: bold;
    color: var(--link);
    text-decoration: none;
    border: 1px solid var(--config-link-border);
    border-radius: 4px;
    background: var(--config-link-bg);
    cursor: pointer;
}
.proc_quick_link:hover {
    background: var(--config-link-hover-bg);
    border-color: var(--config-link-hover-border);
}
.proc_config_link {
    margin-left: 10px;
    font-size: 11px;
    font-weight: normal;
    color: var(--link);
    text-decoration: none;
    cursor: pointer;
    padding: 1px 6px;
    border: 1px solid var(--config-link-border);
    border-radius: 3px;
    background: var(--config-link-bg);
}
.proc_config_link:hover {
    background: var(--config-link-hover-bg);
    border-color: var(--config-link-hover-border);
}
.proc_issues_link {
    color: var(--status-red-fg);
    text-decoration: none;
    cursor: pointer;
}
.proc_issues_link:hover {
    text-decoration: underline;
}

/* ===== Issues ===== */

#issues_gui {
    padding: 10px;
}
.issues_table {
    width: 100%;
    border-collapse: collapse;
    font-family: monospace;
    font-size: 13px;
}
.issues_table th {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 2px solid var(--border-medium);
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.issues_table td {
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.issues_table tr:hover {
    background: var(--row-hover);
}
.issue_count {
    font-weight: bold;
    min-width: 40px;
    text-align: center;
}
#issues_empty {
    color: var(--text-muted);
    font-family: monospace;
    font-style: italic;
}
.issue_check_col {
    width: 30px;
    text-align: center;
}
.silence_selected_btn {
    margin-top: 8px;
    padding: 6px 16px;
    font-family: monospace;
    font-size: 13px;
    font-weight: bold;
    border: 2px solid var(--accent-orange-border);
    border-radius: 6px;
    background: var(--accent-orange);
    color: white;
    cursor: pointer;
}
.silence_selected_btn:hover {
    background: var(--accent-orange-hover);
}
.silence_issues_list {
    max-height: 160px;
    overflow-y: auto;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
}
.silence_issue_entry {
    display: flex;
    gap: 8px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}
.silence_issue_entry:last-child {
    border-bottom: none;
}
.silence_issue_source {
    color: var(--text-muted);
    min-width: 80px;
    flex-shrink: 0;
}

/* ===== Silence dialog ===== */

.silence_dialog {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}
.silence_dialog_content {
    background: var(--bg-elevated);
    border-radius: 8px;
    padding: 20px 24px;
    min-width: 360px;
    max-width: 480px;
    font-family: monospace;
    font-size: 13px;
    color: var(--text);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.silence_dialog_content h3 {
    margin: 0 0 14px 0;
    font-size: 15px;
}
.silence_field {
    margin-bottom: 10px;
}
.silence_field label {
    display: block;
    color: var(--text-secondary);
    font-size: 12px;
    margin-bottom: 3px;
}
.silence_readonly {
    display: block;
    padding: 4px 8px;
    background: var(--bg-elevated);
    border-radius: 4px;
    word-break: break-all;
}
.silence_field input[type="number"],
.silence_field input[type="text"] {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--border-input);
    border-radius: 4px;
    font-family: monospace;
    font-size: 13px;
    box-sizing: border-box;
    background: var(--bg-input);
    color: var(--text);
}
.silence_dialog_buttons {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    justify-content: flex-end;
}
.silence_confirm_btn {
    padding: 6px 16px;
    background: var(--accent-orange);
    color: white;
    border: 2px solid var(--accent-orange-border);
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
}
.silence_confirm_btn:hover {
    background: var(--accent-orange-hover);
}
.silence_cancel_btn {
    padding: 6px 16px;
    background: var(--bg-elevated);
    color: var(--text);
    border: 2px solid var(--border-medium);
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
}
.silence_cancel_btn:hover {
    background: var(--bg-tab);
}

/* ===== Silence button in issue rows ===== */

.silence_btn {
    padding: 3px 10px;
    font-size: 11px;
    font-family: monospace;
    font-weight: bold;
    border: 1px solid var(--border-input);
    border-radius: 4px;
    background: var(--bg-sidebar);
    cursor: pointer;
    color: var(--text-secondary);
}
.silence_btn:hover {
    background: var(--bg-tab);
    border-color: var(--border-medium);
}

/* ===== Silence rules section ===== */

.silence_rules {
    margin-top: 16px;
    padding: 10px;
    font-family: monospace;
    font-size: 13px;
}
.silence_rules h3 {
    margin: 0 0 8px 0;
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.silence_rule_item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: var(--silence-rule-bg);
    border: 1px solid var(--silence-rule-border);
    border-radius: 4px;
    margin-bottom: 4px;
}
.silence_rule_desc {
    flex: 1;
    word-break: break-all;
}
.silence_remove_btn {
    padding: 2px 10px;
    font-size: 11px;
    font-family: monospace;
    font-weight: bold;
    border: 1px solid var(--accent-red);
    border-radius: 4px;
    background: var(--silence-remove-bg);
    color: var(--accent-red);
    cursor: pointer;
}
.silence_remove_btn:hover {
    background: var(--silence-remove-hover);
}
#silenced_count {
    color: var(--orange-text);
    font-family: monospace;
    font-style: italic;
    font-size: 13px;
}

/* ===== Database ===== */

#db_gui {
    padding: 10px;
    display: none;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}
#db_gui.active_section {
    display: flex;
}
.db_input_section {
    flex-shrink: 0;
    margin-bottom: 10px;
}
.db_input_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.db_input_label,
.db_output_label,
.db_schema_label {
    font-family: monospace;
    font-size: 12px;
    font-weight: bold;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.db_run_btn {
    padding: 5px 18px;
    font-family: monospace;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid var(--accent-blue);
    border-radius: 4px;
    background: var(--accent-blue);
    color: white;
    cursor: pointer;
}
.db_run_btn:hover {
    background: var(--accent-blue-hover);
}
.db_editor {
    margin: 0;
    padding: 10px 12px;
    font-family: monospace;
    font-size: 13px;
    line-height: 1.5;
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border-input);
    border-radius: 4px;
    min-height: 60px;
    max-height: 120px;
    overflow: auto;
    outline: none;
    tab-size: 4;
}
.db_editor:focus {
    border-color: var(--accent-blue);
    box-shadow: var(--focus-ring-outer);
}
.db_output_section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.db_output_header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.db_row_count {
    font-family: monospace;
    font-size: 12px;
    color: var(--text-muted);
}
.db_output {
    flex: 1;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-content);
}
.db_placeholder {
    padding: 12px;
    color: var(--text-dim);
    font-family: monospace;
    font-size: 13px;
    font-style: italic;
    margin: 0;
}
.db_error {
    padding: 10px 12px;
    margin: 0;
    color: var(--db-error-fg);
    font-family: monospace;
    font-size: 13px;
    background: var(--db-error-bg);
    border: none;
}
.db_results_table {
    width: 100%;
    border-collapse: collapse;
    font-family: monospace;
    font-size: 12px;
}
.db_results_table th {
    text-align: left;
    padding: 6px 10px;
    background: var(--bg-elevated);
    border-bottom: 2px solid var(--border-input);
    color: var(--text-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
}
.db_results_table td {
    padding: 4px 10px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.db_results_table tbody tr:hover {
    background: var(--db-results-hover);
}
.db_null {
    color: var(--db-null);
    font-style: italic;
}
.db_schema_section {
    flex-shrink: 0;
    margin-top: 10px;
}
.db_schema {
    margin: 6px 0 0 0;
    padding: 8px 12px;
    font-family: monospace;
    font-size: 12px;
    line-height: 1.6;
    background: var(--db-schema-bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-wrap: break-word;
}
.db_schema_col {
    color: var(--db-schema-col);
    font-weight: bold;
}
.db_note {
    margin: 6px 0 0 0;
    font-family: monospace;
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

/* ===== Prices ===== */

#prices_gui {
    padding: 10px 0;
}
.ticker_buttons {
    margin-bottom: 10px;
}
.ticker_btn, .profit_ticker_btn {
    padding: 6px 16px;
    margin-right: 6px;
    font-weight: bold;
    cursor: pointer;
    border: 2px solid var(--border-medium);
    border-radius: 6px;
    background-color: var(--ticker-bg);
    color: var(--text);
}
.ticker_btn.active, .profit_ticker_btn.active {
    background-color: var(--ticker-active-bg);
    color: white;
    border-color: var(--ticker-active-border);
}
#price_chart, #profit_chart {
    border: 1px solid var(--border-input);
    background-color: var(--bg-content);
    display: block;
    max-width: 100%;
}
#current_price {
    margin-left: 12px;
    font-family: monospace;
    font-size: 16px;
    font-weight: bold;
}

/* ===== Viewer layout (logs + editor + runner) ===== */

.viewer_layout {
    display: flex;
    height: 100%;
    gap: 0;
}
.viewer_sidebar {
    width: 200px;
    min-width: 160px;
    border-right: 1px solid var(--border);
    background: var(--bg-sidebar);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sidebar_header {
    padding: 10px 12px;
    font-family: monospace;
    font-size: 12px;
    font-weight: bold;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--border);
}
.sidebar_placeholder {
    padding: 10px 12px;
    color: var(--text-dim);
    font-family: monospace;
    font-size: 12px;
    font-style: italic;
}
.viewer_sidebar .files_to_load {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}
.viewer_sidebar .file_select {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 12px;
    border: none;
    border-radius: 0;
    background: transparent;
    font-family: monospace;
    font-size: 12px;
    font-weight: normal;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.viewer_sidebar .file_select:hover {
    background: var(--file-hover);
}
.viewer_sidebar .file_select.active_file {
    background: var(--file-active);
    font-weight: bold;
}
.file_group_header {
    padding: 6px 12px 4px;
    font-family: monospace;
    font-size: 11px;
    font-weight: bold;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--file-group-border);
    margin-top: 4px;
}
.file_group_header:first-child {
    margin-top: 0;
}
.viewer_main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
.viewer_content {
    flex: 1;
    margin: 0;
    padding: 12px 16px;
    font-family: monospace;
    font-size: 13px;
    line-height: 1.5;
    overflow: auto;
    border: none;
    border-radius: 0;
    background: var(--bg-content);
    color: var(--text);
    white-space: pre-wrap;
    word-wrap: break-word;
    tab-size: 4;
}

/* ===== Editor ===== */

.editor_editable {
    outline: none;
    background: var(--bg-input);
}
.editor_editable:focus {
    box-shadow: var(--focus-ring-inset);
}
.editor_toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    min-height: 36px;
}
.editor_filename {
    font-family: monospace;
    font-size: 13px;
    font-weight: bold;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.editor_actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.editor_button {
    padding: 5px 14px;
    font-family: monospace;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid var(--border-input);
    border-radius: 4px;
    background: var(--bg-tab);
    color: var(--text);
    cursor: pointer;
}
.editor_button:hover {
    background: var(--bg-elevated);
    border-color: var(--border-medium);
}
.editor_warning {
    padding: 6px 12px;
    font-family: monospace;
    font-size: 12px;
    background: var(--warn-bg);
    color: var(--warn-fg);
    border-bottom: 1px solid var(--warn-border);
}
.editor_warning code {
    background: var(--warn-code-bg);
    padding: 1px 4px;
    border-radius: 3px;
}
.editor_run_link {
    margin-left: 10px;
    font-size: 11px;
    font-weight: bold;
    color: white;
    text-decoration: none;
    cursor: pointer;
    padding: 2px 10px;
    border: 1px solid var(--runner-btn-bg);
    border-radius: 3px;
    background: var(--runner-btn-bg);
}
.editor_run_link:hover {
    background: var(--runner-btn-hover);
}

/* ===== Runner ===== */

.runner_toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
}
.runner_filename {
    font-family: monospace;
    font-size: 13px;
    font-weight: bold;
    color: var(--text);
}
.runner_args {
    flex: 1;
    margin: 0 10px;
    padding: 4px 8px;
    font-family: monospace;
    font-size: 12px;
    border: 1px solid var(--border-input);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text);
}
.runner_run_btn {
    padding: 5px 18px;
    font-family: monospace;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid var(--runner-btn-bg);
    border-radius: 4px;
    background: var(--runner-btn-bg);
    color: white;
    cursor: pointer;
}
.runner_run_btn:hover {
    background: var(--runner-btn-hover);
}
.runner_output {
    margin: 0;
    padding: 12px 16px;
    font-family: monospace;
    font-size: 13px;
    line-height: 1.5;
    background: var(--bg-content);
    color: var(--text);
    min-height: 200px;
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ===== Python syntax highlighting ===== */

.py_keyword { color: var(--py-keyword); font-weight: bold; }
.py_builtin { color: var(--py-builtin); }
.py_string { color: var(--py-string); }
.py_comment { color: var(--py-comment); font-style: italic; }
.py_number { color: var(--py-number); }
.py_decorator { color: var(--py-decorator); }

/* ===== Events panel (interviewer only) ===== */

.events_panel {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 101;
    background: var(--events-bg);
    border-top: 1px solid var(--border-medium);
    border-left: 1px solid var(--border-medium);
    border-top-left-radius: 6px;
    padding: 4px 8px 6px;
    max-height: 40vh;
    overflow-y: auto;
    width: 480px;
    box-shadow: var(--panel-shadow);
}
.events_panel.collapsed {
    max-height: none;
    overflow: visible;
}
.events_panel.collapsed .events_body {
    display: none;
}
.events_panel.collapsed .events_reset_all {
    display: none;
}
.events_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.events_panel.collapsed .events_header {
    margin-bottom: 0;
}
.events_toggle {
    font-family: monospace;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--events-toggle);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
}
.events_toggle:hover {
    color: var(--events-toggle-hover);
}
.events_toggle::before {
    content: "\25BC ";
    font-size: 8px;
}
.events_panel.collapsed .events_toggle::before {
    content: "\25B2 ";
}
.events_reset_all {
    padding: 2px 8px;
    font-family: monospace;
    font-size: 10px;
    font-weight: bold;
    border: 1px solid var(--accent-red);
    border-radius: 3px;
    background: var(--silence-remove-bg);
    color: var(--accent-red);
    cursor: pointer;
}
.events_reset_all:hover {
    background: var(--silence-remove-hover);
}
.events_body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.events_grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.event_card {
    border: 1px solid var(--border-input);
    border-radius: 4px;
    padding: 4px 6px;
    background: var(--event-card-bg);
    font-family: monospace;
    font-size: 11px;
    color: var(--text);
}
.event_card.event_active {
    border-color: var(--accent-orange);
    background: var(--event-active-bg);
}
.event_card.event_done {
    border-color: var(--border-medium);
    opacity: 0.6;
}
.event_card_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}
.event_card_name {
    font-weight: bold;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.event_badge {
    padding: 0 4px;
    border-radius: 2px;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    flex-shrink: 0;
}
.event_badge_ready {
    background: var(--event-badge-ready-bg);
    color: var(--event-badge-ready-fg);
}
.event_badge_active {
    background: var(--event-badge-active-bg);
    color: var(--event-badge-active-fg);
}
.event_badge_done {
    background: var(--event-badge-done-bg);
    color: var(--event-badge-done-fg);
}
.event_card_desc {
    color: var(--event-card-desc);
    font-size: 10px;
    line-height: 1.3;
    margin-bottom: 3px;
}
.event_card_stage {
    font-size: 10px;
    color: var(--orange-text);
    font-weight: bold;
    margin-bottom: 2px;
}
.event_card_actions {
    display: flex;
    gap: 4px;
}
.event_trigger_btn {
    padding: 2px 8px;
    font-family: monospace;
    font-size: 10px;
    font-weight: bold;
    border: 1px solid var(--accent-orange-border);
    border-radius: 3px;
    background: var(--accent-orange);
    color: white;
    cursor: pointer;
}
.event_trigger_btn:hover {
    background: var(--accent-orange-hover);
}
.event_reset_btn {
    padding: 2px 8px;
    font-family: monospace;
    font-size: 10px;
    font-weight: bold;
    border: 1px solid var(--border-medium);
    border-radius: 3px;
    background: var(--bg-tab);
    color: var(--text-secondary);
    cursor: pointer;
}
.event_reset_btn:hover {
    background: var(--bg-elevated);
    border-color: var(--border-medium);
}

/* ===== Candidate info panel ===== */

.candidate_info {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 101;
    background: var(--info-bg);
    border-top: 1px solid var(--info-border);
    border-left: 1px solid var(--info-border);
    border-top-left-radius: 6px;
    padding: 4px 8px 6px;
    max-height: 55vh;
    overflow-y: auto;
    width: 600px;
    box-shadow: var(--panel-shadow);
}
.candidate_info.collapsed {
    max-height: none;
    overflow: visible;
}
.candidate_info.collapsed .candidate_info_body {
    display: none;
}
.candidate_info_header {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}
.candidate_info.collapsed .candidate_info_header {
    margin-bottom: 0;
}
.candidate_info_toggle {
    font-family: monospace;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--info-toggle);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
}
.candidate_info_toggle:hover {
    color: var(--info-toggle-hover);
}
.candidate_info_toggle::before {
    content: "\25BC ";
    font-size: 8px;
}
.candidate_info.collapsed .candidate_info_toggle::before {
    content: "\25B2 ";
}
.candidate_info_body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.candidate_info_section {
    font-family: monospace;
    font-size: 11px;
    line-height: 1.4;
    color: var(--info-text);
}
.candidate_info_section p {
    margin: 2px 0;
}
.candidate_info_section ul {
    margin: 2px 0;
    padding-left: 16px;
}
.candidate_info_section li {
    margin-bottom: 1px;
}
.candidate_info_title {
    font-weight: bold;
    font-size: 11px;
    color: var(--info-title);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--info-title-border);
    padding-bottom: 1px;
}

/* ===== Start interview overlay ===== */

.start_overlay {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 3000;
    justify-content: center;
    align-items: center;
}
.start_overlay_card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 32px 40px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.start_overlay_text {
    font-family: monospace;
    font-size: 14px;
    color: var(--text);
    margin: 16px 0 20px;
}
.start_overlay_btn {
    padding: 10px 32px;
    font-family: monospace;
    font-size: 15px;
    font-weight: bold;
    border: 2px solid var(--accent-green);
    border-radius: 6px;
    background: var(--accent-green);
    color: white;
    cursor: pointer;
}
.start_overlay_btn:hover {
    opacity: 0.9;
}

/* ===== Login page ===== */

.login_body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 0;
}
.login_card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 32px 40px;
    width: 340px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.login_brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}
.login_logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
}
.login_form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.login_label {
    font-family: monospace;
    font-size: 12px;
    font-weight: bold;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.login_input {
    padding: 8px 12px;
    font-family: monospace;
    font-size: 14px;
    border: 1px solid var(--border-input);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text);
}
.login_input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: var(--focus-ring-outer);
}
.login_submit {
    padding: 8px 16px;
    font-family: monospace;
    font-size: 13px;
    font-weight: bold;
    border: 1px solid var(--accent-blue);
    border-radius: 4px;
    background: var(--accent-blue);
    color: white;
    cursor: pointer;
    margin-top: 4px;
}
.login_submit:hover {
    background: var(--accent-blue-hover);
}
.login_error {
    margin-top: 10px;
    padding: 6px 10px;
    font-family: monospace;
    font-size: 12px;
    color: var(--status-red-fg);
    background: var(--status-red-bg);
    border-radius: 4px;
    text-align: center;
}

/* ===== Branding footer ===== */

.brand_footer {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    border-top: 1px solid var(--border);
    background: var(--bg-surface);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
}
.brand_logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}
.brand_text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.brand_name {
    font-family: monospace;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 3px;
    color: var(--brand-green);
}
.brand_expand {
    font-family: monospace;
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}
.brand_letter {
    font-weight: bold;
    color: var(--brand-green);
}