/* =========================================
    DARK MODE OVERRIDES
    ========================================= */

[data-theme="dark"] {
    --main-color: #00b894; /* Màu chủ đạo xanh mint */
    --main-color-hover: #00997d;
    --bg-color: #1a1a1a; /* Nền tối */
    --card-bg: #282828; /* Nền thẻ tối hơn */
    --text-color: #f1f1f1; /* Chữ sáng */
    --secondary-text: #b0b0b0; 
}

/* 1. BODY & TEXT */
[data-theme="dark"] body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* 2. HEADER & LOGO */
[data-theme="dark"] .main-header p {
    color: var(--secondary-text);
}

[data-theme="dark"] .brand-logo .main-text {
    /* Đổi gradient để sáng hơn trên nền tối */
    background: linear-gradient(135deg, #00b894 30%, #f1f1f1 100%); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="dark"] .brand-logo .logo-icon {
    color: var(--main-color);
    text-shadow: 0 4px 15px rgba(0, 184, 148, 0.4);
}

[data-theme="dark"] .brand-logo .sub-text {
    color: #888;
}

/* 3. TOOL CARD & HEADER */
[data-theme="dark"] .tool-card {
    background: var(--card-bg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .tool-card-header {
    background-color: var(--main-color);
    color: #fff;
}

/* 4. IP DISPLAY & TABLE */
[data-theme="dark"] .big-ip-display {
    color: var(--text-color);
    border: 2px solid #3a3a3a;
    background-color: #1f1f1f;
}

[data-theme="dark"] .ip-label {
    color: #999;
}

/* SỬA LỖI: HIỂN THỊ IP/N/A */
[data-theme="dark"] .ip-value {
    color: var(--main-color); /* Màu xanh mint */
    font-family: monospace;
    font-size: 1.4em; /* TĂNG SIZE CHỮ IP */
}

/* Giữ chữ N/A và UNKNOWN không bị đổi màu quá rực rỡ */
[data-theme="dark"] .ip-value:is([id*="N/A"], [id*="UNKNOWN"]) {
    color: #777; /* Màu xám mờ */
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 600;
    font-style: italic;
    font-size: 1.2em; /* Giảm nhẹ size N/A/UNKNOWN so với IP */
}

[data-theme="dark"] .ip-detail-table th {
    background-color: var(--main-color);
    color: white;
}

[data-theme="dark"] .ip-detail-table td {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-bottom: 1px solid #3a3a3a;
}

/* 5. COPY BUTTON */
[data-theme="dark"] .btn-copy-ip {
    background-color: var(--main-color);
    color: white;
}

[data-theme="dark"] .btn-success {
    background-color: #2ecc71 !important;
    border-color: #2ecc71 !important;
}

/* 5b. SCREENSHOT FEATURE */
[data-theme="dark"] .btn-screenshot {
    background-color: #3a3a3a;
    color: #f1f1f1;
}

[data-theme="dark"] .btn-screenshot:hover:not(:disabled) {
    background-color: #4a4a4a;
}

[data-theme="dark"] .screenshot-result {
    background-color: #1f1f1f;
    border-color: #3a3a3a;
}

[data-theme="dark"] .screenshot-thumb {
    background-color: #282828;
    border-color: #3a3a3a;
}

[data-theme="dark"] .screenshot-link-input {
    background-color: #282828;
    border-color: #3a3a3a;
    color: var(--text-color);
}

[data-theme="dark"] .btn-copy-link {
    background-color: var(--main-color);
    color: #fff;
}

[data-theme="dark"] .screenshot-autocopy-badge {
    background-color: rgba(92, 184, 92, 0.18);
    color: #7ed67e;
}

/* 6. COMMUNITY CARD */
[data-theme="dark"] .join-community-card {
    background: #1f1f1f;
    border: 2px solid var(--main-color);
    box-shadow: 0 8px 30px -10px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .join-community-card h4 {
    color: var(--text-color);
}

[data-theme="dark"] .card-desc {
    color: var(--secondary-text);
}


/* 7. FOOTER */
[data-theme="dark"] .site-footer {
    background: #1f1f1f;
    border-top: 1px solid #3a3a3a;
    color: var(--secondary-text);
}

[data-theme="dark"] .footer-stats {
    background: #282828;
    border: 1px solid #3a3a3a;
}