/* ===== Doors Defender — Security Dashboard ===== */

/* --- Layout --- */
.def-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: var(--font-mono, "Consolas", monospace);
    background: #0d0d14;
    color: #c8c8d0;
}

/* --- Header --- */
.def-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #12121e;
    border-bottom: 1px solid #2a2a40;
}

.def-shield {
    font-size: 26px;
    display: inline-block;
    animation: def-shield-pulse 3s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(124, 160, 255, 0.3));
}

@keyframes def-shield-pulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(124, 160, 255, 0.3)); }
    50%      { transform: scale(1.08); filter: drop-shadow(0 0 8px rgba(124, 160, 255, 0.6)); }
}

.def-shield.threat-low    { filter: drop-shadow(0 0 4px rgba(58, 140, 90, 0.5)); }
.def-shield.threat-medium { filter: drop-shadow(0 0 4px rgba(140, 122, 58, 0.5)); animation-name: def-shield-pulse-yellow; }
.def-shield.threat-high   { filter: drop-shadow(0 0 4px rgba(192, 64, 64, 0.5)); animation-name: def-shield-pulse-red; }

@keyframes def-shield-pulse-yellow {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(140, 122, 58, 0.4)); }
    50%      { transform: scale(1.08); filter: drop-shadow(0 0 10px rgba(200, 170, 50, 0.7)); }
}

@keyframes def-shield-pulse-red {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(192, 64, 64, 0.4)); }
    50%      { transform: scale(1.12); filter: drop-shadow(0 0 12px rgba(220, 60, 60, 0.8)); }
}

.def-header-info { flex: 1; }
.def-title { font-size: 14px; font-weight: bold; color: #7ca0ff; }
.def-subtitle { font-size: 11px; color: #555; }

.def-threat-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: background 0.4s, color 0.4s;
}

.def-threat-badge.level-low {
    background: rgba(58, 140, 90, 0.2);
    color: #5cb87a;
    border: 1px solid rgba(58, 140, 90, 0.3);
}

.def-threat-badge.level-medium {
    background: rgba(180, 150, 40, 0.2);
    color: #c8a832;
    border: 1px solid rgba(180, 150, 40, 0.3);
}

.def-threat-badge.level-high {
    background: rgba(192, 64, 64, 0.2);
    color: #e06060;
    border: 1px solid rgba(192, 64, 64, 0.3);
    animation: def-threat-blink 1.5s ease-in-out infinite;
}

.def-threat-badge.level-critical {
    background: rgba(220, 40, 40, 0.25);
    color: #ff4444;
    border: 1px solid rgba(220, 40, 40, 0.4);
    animation: def-threat-blink 0.8s ease-in-out infinite;
}

@keyframes def-threat-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

/* --- Status Bar (heat/ISP strip) --- */
.def-status-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 14px;
    background: #0e0e1a;
    border-bottom: 1px solid #1e1e30;
    font-size: 12px;
    flex-wrap: wrap;
}

.def-heat-label { color: #aaa; }

.def-heat-bar-wrap {
    flex: 1;
    min-width: 120px;
    max-width: 200px;
    height: 8px;
    background: #1e1e30;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.def-heat-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.22, 0.68, 0.32, 1.0), background 0.6s;
    position: relative;
}

.def-heat-bar::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
    animation: def-heat-shimmer 2s ease-in-out infinite;
}

@keyframes def-heat-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.def-decay-label { font-size: 11px; color: #555; }
.def-ip-label    { font-size: 11px; color: #555; }

.def-isp { font-size: 11px; margin-left: auto; }
.def-isp-watching { color: #c04040; font-weight: bold; }
.def-isp-ok       { color: #3a8c5a; }

/* --- Tabs --- */
.def-tabs {
    display: flex;
    border-bottom: 1px solid #2a2a40;
    background: #10101a;
    flex-shrink: 0;
}

.def-tab {
    padding: 7px 14px;
    font-size: 11px;
    cursor: pointer;
    border-right: 1px solid #1e1e30;
    border-bottom: 2px solid transparent;
    color: #666;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    white-space: nowrap;
    user-select: none;
}

.def-tab:hover { color: #aaa; background: #161626; }

.def-tab.active {
    color: #7ca0ff;
    background: #12121e;
    border-bottom-color: #7ca0ff;
}

/* --- Panel (scrollable content area) --- */
.def-panel {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
}

.def-panel::-webkit-scrollbar { width: 6px; }
.def-panel::-webkit-scrollbar-track { background: transparent; }
.def-panel::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

/* --- Shared elements --- */
.def-section-title {
    font-size: 11px;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 12px;
}

.def-btn {
    padding: 3px 8px;
    font-size: 11px;
    font-family: inherit;
    border: 1px solid #3a3a5a;
    background: #1a1a2e;
    color: #9090c0;
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.def-btn:hover { background: #22223a; color: #b0b0e0; border-color: #5050a0; }
.def-btn:active { background: #28284a; }
.def-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.def-btn-danger { border-color: #5a2a2a; color: #c06060; }
.def-btn-danger:hover { background: #2a1a1a; color: #e08080; border-color: #7a3a3a; }

.def-loading { color: #444; font-style: italic; font-size: 12px; }
.def-empty   { color: #444; font-style: italic; font-size: 12px; padding: 16px 0; }

.def-refresh-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
    gap: 8px;
    align-items: center;
}

.def-refresh-hint { font-size: 11px; color: #444; }

.def-auto-refresh {
    font-size: 10px;
    color: #3a5a3a;
    display: flex;
    align-items: center;
    gap: 4px;
}

.def-auto-refresh-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3a8c5a;
    animation: def-dot-pulse 2s ease-in-out infinite;
}

@keyframes def-dot-pulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

/* --- Quick Scan tab --- */
.def-scan-area { display: flex; flex-direction: column; height: 100%; }

.def-scan-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.def-scan-count {
    font-size: 10px;
    color: #444;
    margin-left: auto;
}

.def-scan-log {
    font-size: 12px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.def-scan-line {
    padding: 3px 0;
    border-bottom: 1px solid #151520;
    opacity: 0;
    animation: def-scan-fadein 0.3s ease forwards;
}

@keyframes def-scan-fadein {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}

.def-scan-real { color: #5a8c5a; }

.def-scan-progress-wrap {
    height: 3px;
    background: #1e1e30;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 10px;
}

.def-scan-progress {
    height: 100%;
    background: #7ca0ff;
    border-radius: 2px;
    width: 0%;
    transition: width 0.5s ease;
}

.def-scan-progress.scanning {
    background: linear-gradient(90deg, #7ca0ff 0%, #5a8cff 50%, #7ca0ff 100%);
    background-size: 200% 100%;
    animation: def-progress-glow 1.5s ease-in-out infinite;
}

@keyframes def-progress-glow {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.def-scan-complete {
    font-size: 11px;
    color: #5a8c5a;
    padding: 6px 0;
    animation: def-scan-fadein 0.4s ease forwards;
}

/* --- Noise Monitor tab --- */
.def-noise-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.def-noise-table th {
    text-align: left;
    color: #555;
    font-weight: normal;
    padding: 4px 6px;
    border-bottom: 1px solid #1e1e30;
}

.def-noise-table td {
    padding: 5px 6px;
    border-bottom: 1px solid #1a1a28;
}

.def-noise-table tr {
    transition: background 0.15s;
}

.def-noise-table tbody tr:hover {
    background: rgba(124, 160, 255, 0.03);
}

.def-bar-cell { width: 120px; }

.def-mini-bar-wrap {
    height: 6px;
    background: #1e1e30;
    border-radius: 3px;
    overflow: hidden;
}

.def-mini-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.22, 0.68, 0.32, 1.0);
}

.bar-green  { background: #3a8c5a; }
.bar-yellow { background: #8c7a3a; }
.bar-red    { background: #8c3a3a; box-shadow: 0 0 4px rgba(140, 58, 58, 0.4); }

.def-ip-mono { font-family: monospace; }
.def-noise-empty { color: #444; font-style: italic; padding: 12px 6px; }

/* --- Trace Log tab --- */
.def-trace-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.def-trace-table th {
    text-align: left;
    color: #555;
    font-weight: normal;
    padding: 4px 6px;
    border-bottom: 1px solid #1e1e30;
}

.def-trace-table td {
    padding: 4px 6px;
    border-bottom: 1px solid #1a1a28;
    font-family: inherit;
}

.def-trace-table tbody tr:hover {
    background: rgba(124, 160, 255, 0.03);
}

.def-trace-time   { color: #555; }
.def-trace-ip     { font-family: monospace; }
.def-trace-heat   { color: #c04040; }
.def-trace-empty  { color: #444; font-style: italic; padding: 12px 6px; }

/* --- Tools tab --- */
.def-tool-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid #1a1a28;
    font-size: 12px;
    transition: background 0.15s;
}

.def-tool-row:hover { background: rgba(124, 160, 255, 0.03); margin: 0 -6px; padding: 7px 6px; border-radius: 3px; }

.def-tool-name   { color: #9090c0; }
.def-tool-effect { color: #5a8c5a; font-size: 11px; }
.def-tool-none   { color: #333; font-style: italic; }