/* Tema Claro (Padrão) */
:root {
    --light-blue: #2596be;
}

body, html {
    font-family: "Roboto Condensed", sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body {
    background-color: #fff;
    color: #212529;
}

header {
    background-color: var(--light-blue);
    color: white;
    padding: 20px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease;
}

header h1 {
    font-weight: 700;
    margin: 0;
}

h2 {
    color: var(--light-blue);
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 10px;
    font-weight: 700;
    transition: color 0.3s ease, border-bottom-color 0.3s ease;
}

.btn-primary {
    background-color: var(--light-blue);
    border-color: var(--light-blue);
}

.btn-primary:hover {
    background-color: #1e7898;
    border-color: #1e7898;
}

#dns-form .form-control:focus {
    border-color: var(--light-blue);
    box-shadow: 0 0 0 0.25rem rgba(37, 150, 190, 0.25);
}

#theme-toggle-icon {
    cursor: pointer;
    transition: transform 0.3s ease;
}

#theme-toggle-icon:hover {
    transform: scale(1.1);
}

/* --- MODO ESCURO --- */
body.dark-mode {
    background-color: #000000;
    color: #f8f9fa;
}

body.dark-mode header {
    background-color: #f8538b;
}

body.dark-mode h2 {
    color: #f8538b;
    border-bottom-color: #495057;
}

body.dark-mode .btn-primary {
    background-color: #f8538b;
    border-color: #f8538b;
    color: #fff;
}

body.dark-mode .btn-primary:hover {
    background-color: #d94275;
    border-color: #d94275;
}

body.dark-mode .spinner-border {
    color: #f8538b;
}

body.dark-mode .form-control {
    background-color: #212529;
    color: #f8f9fa;
    border-color: #495057;
}

body.dark-mode .form-control:focus {
    border-color: #f8538b;
    box-shadow: 0 0 0 0.25rem rgba(248, 83, 139, 0.25);
}

body.dark-mode .table {
    --bs-table-bg: #212529;
    --bs-table-border-color: #495057;
    --bs-table-striped-bg: #2c3034;
    --bs-table-hover-bg: #323539;
    color: #f8f9fa;
}

body.dark-mode .table-light > th,
body.dark-mode .table-light > td {
    background-color: #2c3034;
    color: #f8538b;
    border-color: #495057;
}

body.dark-mode .table-info,
body.dark-mode .table-info > th,
body.dark-mode .table-info > td {
    background-color: #4e2a37;
    color: #f8f9fa;
    border-color: #7a4b5a;
}

body.dark-mode .badge.bg-secondary {
    background-color: #495057 !important;
}