/* ============================================
   DNSLOG — Kuper Light Theme
   palette lifted from web.kuper.ru
   ============================================ */

:root {
    --bg-primary: #f2f2f2;      /* page background */
    --bg-secondary: #ffffff;    /* nav / table head surfaces */
    --bg-card: #ffffff;         /* cards / tables */
    --bg-card-hover: #f4faf5;   /* subtle green-tinted hover */
    --bg-input: #f7f8fa;        /* inputs */
    --border-color: #e7ebef;
    --border-accent: #d1dde5;
    --text-primary: #1d1d1d;
    --text-secondary: #8c959c;
    --text-muted: #b5b9c2;
    --accent: #19b335;          /* vivid Kuper green — badges / active / links */
    --accent-hover: #148f2b;
    --accent-dim: rgba(25,179,53,0.10);
    --accent-glow: rgba(25,179,53,0.16);
    --btn: #aaeeb7;             /* pastel green — primary buttons */
    --btn-hover: #9be7ab;
    --btn-ink: #0f6b20;
    --danger: #e85554;          /* Kuper red */
    --danger-hover: #d63c3b;
    --warning: #feca00;
    --success: #19b335;
    --info: #4341d7;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 2px 10px rgba(16,24,32,0.05);
    --shadow-lg: 0 16px 48px rgba(16,24,32,0.14);
}

* { box-sizing: border-box; }

body {
    font-family: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d5dbe0; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #b9c2c9; }

/* ---- LOGIN ---- */
.login-wrapper {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--bg-primary); position: relative; overflow: hidden;
}
.login-wrapper::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(ellipse at 30% 40%, rgba(25,179,53,0.08) 0%, transparent 45%),
                radial-gradient(ellipse at 70% 60%, rgba(170,238,183,0.18) 0%, transparent 50%);
    animation: bgShift 20s ease-in-out infinite alternate;
}
@keyframes bgShift { 0% { transform: translate(0,0);} 100% { transform: translate(-5%,3%);} }
.login-card {
    position: relative; width: 100%; max-width: 400px; background: var(--bg-card);
    border: 1px solid var(--border-color); border-radius: 22px; padding: 40px 36px;
    box-shadow: var(--shadow-lg);
}
.login-logo { text-align: center; margin-bottom: 32px; }
.login-logo h1 { font-size: 26px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.5px; }
.login-logo h1 span { color: var(--accent); }
.login-logo p { color: var(--text-muted); font-size: 13px; margin-top: 6px; }
.login-card .form-label {
    color: var(--text-secondary); font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px;
}
.login-card .form-control {
    background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-primary);
    border-radius: 12px; padding: 11px 14px; font-size: 14px; transition: border-color .2s, box-shadow .2s;
}
.login-card .form-control:focus {
    background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); color: var(--text-primary);
}
.login-card .btn-login {
    width: 100%; background: var(--btn); color: var(--btn-ink); border: none; border-radius: 999px;
    padding: 13px; font-weight: 700; font-size: 14px; transition: background .2s, transform .1s; margin-top: 8px;
}
.login-card .btn-login:hover { background: var(--btn-hover); transform: translateY(-1px); }
.login-card .btn-login:active { transform: translateY(0); }
.login-error {
    background: rgba(232,85,84,0.1); border: 1px solid rgba(232,85,84,0.3); color: var(--danger);
    border-radius: 12px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px;
}
.login-footer {
    text-align: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-color);
    color: var(--text-muted); font-size: 12px; font-family: 'JetBrains Mono', monospace;
}

/* ---- NAV ---- */
.main-nav {
    background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 18px;
    padding: 6px; margin-top: 20px; display: flex; align-items: center; box-shadow: var(--shadow);
}
.main-nav .nav-tabs { border: none; flex-grow: 1; list-style: none; padding-left: 0; margin-bottom: 0; }
.main-nav .nav-link {
    color: var(--text-secondary); border: none; border-radius: 999px; padding: 9px 18px;
    font-weight: 600; font-size: 13px; transition: all .2s; margin-right: 2px;
}
.main-nav .nav-link:hover { color: var(--text-primary); background: #f0f2f4; }
.main-nav .nav-link.active { background: var(--accent); color: #fff; font-weight: 700; }
.main-nav .nav-right { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.main-nav .nav-right .nav-link { font-size: 12px; padding: 8px 12px; }
.main-nav .nav-right .nav-link:hover { color: var(--accent-hover); background: var(--accent-dim); }

/* ---- TOOLBAR ---- */
.toolbar { display: flex; align-items: center; gap: 8px; margin-top: 16px; margin-bottom: 16px; }

/* ---- BUTTONS ---- */
.btn-accent {
    background: var(--btn); color: var(--btn-ink); border: none; font-weight: 700; font-size: 12px;
    padding: 7px 16px; border-radius: 999px; transition: background .2s;
}
.btn-accent:hover { background: var(--btn-hover); color: var(--btn-ink); }
.btn-ghost {
    background: #fff; color: var(--text-secondary); border: 1px solid var(--border-color);
    font-size: 12px; padding: 7px 14px; border-radius: 999px; transition: all .2s;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-hover); background: var(--accent-dim); }
.btn-danger-ghost {
    background: #fff; color: var(--text-secondary); border: 1px solid var(--border-color);
    font-size: 12px; padding: 7px 14px; border-radius: 999px; transition: all .2s;
}
.btn-danger-ghost:hover { border-color: var(--danger); color: var(--danger); background: rgba(232,85,84,0.08); }

/* ---- TABLES ---- */
.data-table {
    width: 100%; border-collapse: separate; border-spacing: 0; background: var(--bg-card);
    border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.data-table thead th {
    background: #fafbfc; color: var(--text-secondary); font-weight: 700; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.4px; padding: 13px 16px;
    border-bottom: 1px solid var(--border-color); white-space: nowrap;
}
.data-table thead th.sortable { cursor: pointer; user-select: none; transition: color .2s; }
.data-table thead th.sortable:hover { color: var(--accent-hover); }
.data-table tbody td, .data-table tbody th {
    padding: 11px 16px; border-bottom: 1px solid var(--border-color); font-size: 13px;
    color: var(--text-primary); vertical-align: middle; background: transparent;
}
.data-table tbody tr:last-child td, .data-table tbody tr:last-child th { border-bottom: none; }
.data-table tbody tr { transition: background .15s; }
.data-table tbody tr:hover { background: var(--bg-card-hover); }
.data-table tbody th {
    font-weight: 500; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-size: 12px;
}

/* DNS type badges */
.dns-type { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.dns-type-a { background: rgba(25,179,53,0.12); color: #148f2b; }
.dns-type-aaaa { background: rgba(67,65,215,0.12); color: #4341d7; }
.dns-type-cname { background: rgba(254,202,0,0.20); color: #997a00; }
.dns-type-mx { background: rgba(232,85,84,0.12); color: #d63c3b; }
.dns-type-txt { background: rgba(0,122,255,0.12); color: #007aff; }
.dns-type-default { background: #eef0f2; color: #6b7480; }

/* HTTP method badges */
.http-method { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; font-family: 'JetBrains Mono', monospace; }
.method-get { background: rgba(25,179,53,0.12); color: #148f2b; }
.method-post { background: rgba(0,122,255,0.12); color: #007aff; }
.method-put { background: rgba(254,202,0,0.20); color: #997a00; }
.method-delete { background: rgba(232,85,84,0.12); color: #d63c3b; }
.method-patch { background: rgba(67,65,215,0.12); color: #4341d7; }
.method-head, .method-options { background: #eef0f2; color: #6b7480; }

/* ---- BLINK ---- */
.blink { animation: newRowPulse 0.6s ease-out 3; }
.blink td, .blink th { background: var(--accent-dim) !important; --bs-table-bg-type: none !important; }
@keyframes newRowPulse { 0% { background-color: var(--accent-glow); } 100% { background-color: transparent; } }
.weblog-card.blink, .col-12.blink .weblog-card {
    border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-dim) !important;
}

/* ---- WEBLOG CARDS ---- */
.weblog-card {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius);
    overflow: hidden; transition: border-color .2s, box-shadow .2s; margin-bottom: 12px; box-shadow: var(--shadow);
}
.weblog-card:hover { border-color: var(--border-accent); }
.weblog-card .card-header { background: #fafbfc; border-bottom: 1px solid var(--border-color); padding: 13px 16px; font-size: 13px; }
.weblog-card .card-header b { color: var(--text-secondary); font-weight: 600; }
.weblog-card .card-body { padding: 16px; }
.weblog-card textarea {
    background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-primary);
    border-radius: 12px; font-family: 'JetBrains Mono', monospace; font-size: 12px; resize: none;
    width: 100%; height: 100px; padding: 10px;
}
.weblog-card textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); outline: none; }

/* ---- PAYLOADS PANEL ---- */
.payloads-panel {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius);
    padding: 20px; margin-top: 16px; box-shadow: var(--shadow);
}
.payloads-panel .payload-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.payloads-panel .payload-label {
    background: #f0f2f4; color: var(--accent-hover); border: 1px solid var(--border-color); border-radius: 999px;
    padding: 6px 12px; font-size: 11px; font-weight: 700; font-family: 'JetBrains Mono', monospace;
    white-space: nowrap; min-width: 100px; text-align: center;
}
.payloads-panel .payload-input {
    flex: 1; background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-primary);
    border-radius: 12px; padding: 8px 12px; font-family: 'JetBrains Mono', monospace; font-size: 12px; transition: border-color .2s;
}
.payloads-panel .payload-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); outline: none; }
.payloads-panel .payload-copy {
    background: #f0f2f4; border: 1px solid var(--border-color); color: var(--text-secondary); border-radius: 10px;
    padding: 7px 10px; cursor: pointer; transition: all .2s; display: flex; align-items: center;
}
.payloads-panel .payload-copy:hover { border-color: var(--accent); color: var(--accent-hover); background: var(--accent-dim); }
.payloads-panel .payload-section { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--border-color); }
.payloads-panel .payload-section:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.payloads-panel .section-title { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 10px; }

/* ---- PAGINATION ---- */
.pagination-dark { display: flex; align-items: center; gap: 4px; margin-top: 16px; flex-wrap: wrap; list-style: none; padding-left: 0; }
.pagination-dark .page-link {
    background: #fff; border: 1px solid var(--border-color); color: var(--text-secondary);
    border-radius: 10px; padding: 7px 12px; font-size: 12px; transition: all .2s;
}
.pagination-dark .page-link:hover { border-color: var(--accent); color: var(--accent-hover); background: var(--accent-dim); }
.pagination-dark .page-item.active .page-link { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.pagination-dark .page-item.disabled .page-link { background: #f7f8fa; border-color: var(--border-color); color: var(--text-muted); }

/* ---- MODALS ---- */
.modal-content { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 20px; box-shadow: var(--shadow-lg); }
.modal-header { border-bottom: 1px solid var(--border-color); padding: 20px 24px; }
.modal-title { color: var(--text-primary); font-weight: 700; font-size: 16px; }
.modal-body { padding: 24px; }
.modal-footer { border-top: 1px solid var(--border-color); padding: 16px 24px; }
.modal .btn-close { filter: none; opacity: 0.5; }
.modal .btn-close:hover { opacity: 1; }
.modal .form-label { color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.modal .form-control, .modal .form-select {
    background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-primary);
    border-radius: 12px; padding: 9px 12px; font-size: 13px;
}
.modal .form-control:focus, .modal .form-select:focus {
    background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); color: var(--text-primary);
}
.modal textarea.form-control { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.modal .form-check-input { background-color: var(--bg-input); border-color: var(--border-accent); }
.modal .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.modal .form-check-label { color: var(--text-secondary); }
#settingsModal .form-select { background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-primary); }

/* ---- ADMIN / MOCK TABLE ---- */
.admin-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; margin-top: 16px; }
.admin-table thead th { background: #fafbfc; color: var(--text-secondary); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; padding: 12px 16px; border-bottom: 1px solid var(--border-color); }
.admin-table thead th.sortable:hover { color: var(--accent-hover); cursor: pointer; }
.admin-table tbody td, .admin-table tbody th { padding: 12px 16px; border-bottom: 1px solid var(--border-color); color: var(--text-primary); font-size: 13px; vertical-align: middle; }
.admin-table tbody tr:last-child td, .admin-table tbody tr:last-child th { border-bottom: none; }
.admin-table tbody tr { transition: background .15s; }
.admin-table tbody tr:hover { background: var(--bg-card-hover); }

.aaaa-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.aaaa-badge { background: rgba(67,65,215,0.12); color: #4341d7; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }

#mockRulesTableEl {
    border-collapse: separate; border-spacing: 0; width: 100%; background: var(--bg-secondary);
    border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; margin-bottom: 16px;
    --bs-table-bg: transparent; --bs-table-color: var(--text-primary); --bs-table-border-color: var(--border-color);
    --bs-table-striped-bg: transparent; --bs-table-hover-bg: var(--bg-card-hover); --bs-table-hover-color: var(--text-primary);
}
#mockRulesTableEl thead th { background: #fafbfc; color: var(--text-secondary); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; padding: 10px 14px; border-bottom: 1px solid var(--border-color); border-top: none; }
#mockRulesTableEl tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border-color); color: var(--text-primary); font-size: 13px; vertical-align: middle; background: transparent; }
#mockRulesTableEl tbody tr { transition: background .15s; }
#mockRulesTableEl tbody tr:hover { background: var(--bg-card-hover); }
#mockRulesTableEl tbody tr:last-child td { border-bottom: none; }
#addMockRuleForm, #editMockRuleForm { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; }
#addMockRuleForm .form-label, #editMockRuleForm .form-label { color: var(--text-secondary); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
#addMockRuleForm .form-check-label, #editMockRuleForm .form-check-label { color: var(--text-secondary); font-size: 13px; }
#currentFileInfo { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; }
#mockRulesTableEl tbody td[colspan] { background: var(--bg-input); font-style: italic; }
.modal input[type="file"].form-control { background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-secondary); font-size: 12px; padding: 8px 12px; }
.modal input[type="file"].form-control::file-selector-button { background: #fff; border: 1px solid var(--border-accent); color: var(--text-secondary); border-radius: 8px; padding: 5px 12px; margin-right: 12px; font-size: 12px; cursor: pointer; transition: all .2s; }
.modal input[type="file"].form-control::file-selector-button:hover { border-color: var(--accent); color: var(--accent-hover); }

/* ---- STATUS BADGE ---- */
.status-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.status-2xx { background: rgba(25,179,53,0.12); color: #148f2b; }
.status-3xx { background: rgba(0,122,255,0.12); color: #007aff; }
.status-4xx { background: rgba(254,202,0,0.20); color: #997a00; }
.status-5xx { background: rgba(232,85,84,0.12); color: #d63c3b; }

/* ---- IP / HOST ---- */
.ip-copy-btn { cursor: pointer; padding: 2px 6px; border-radius: 6px; transition: background .15s; }
.ip-copy-btn:hover { background: var(--bg-card-hover); }
.ip-copy-btn:hover i { color: var(--accent) !important; }
.ip-addr { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-secondary); }
.host-name { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--accent-hover); font-weight: 600; }

/* ---- WEB FILTER ---- */
.web-filter-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; padding: 8px 10px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; box-shadow: var(--shadow); }
.web-filter-field { display: flex; align-items: center; gap: 6px; flex: 1; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 12px; padding: 0 12px; transition: border-color .2s; }
.web-filter-field:focus-within { border-color: var(--accent); }
.web-filter-field i { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }
.web-filter-field:focus-within i { color: var(--accent); }
.web-filter-field input { flex: 1; background: none; border: none; outline: none; color: var(--text-primary); font-size: 12px; padding: 7px 0; font-family: 'JetBrains Mono', monospace; }
.web-filter-field input::placeholder { color: var(--text-muted); font-family: 'Golos Text', sans-serif; }

/* ---- CONTAINER + UTIL ---- */
.container { max-width: 1200px; }
.gap-2 { gap: 8px; }
.text-accent { color: var(--accent); }
.text-muted-custom { color: var(--text-muted); }
.monospace { font-family: 'JetBrains Mono', monospace; }
.date-cell { color: var(--text-muted); font-size: 12px; white-space: nowrap; }

/* ---- BOOTSTRAP OVERRIDES ---- */
.btn-primary { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); font-weight: 700; }
.btn-primary:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-ink); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }
.btn-warning { background: var(--warning); border-color: var(--warning); color: #1d1d1d; }
.btn-success { background: var(--success); border-color: var(--success); color: #fff; }
.btn-info { background: var(--info); border-color: var(--info); color: #fff; }
.btn-info:hover { background: #3634c0; border-color: #3634c0; color: #fff; }
.btn-secondary { background: #fff; border-color: var(--border-color); color: var(--text-secondary); }
.btn-secondary:hover { background: var(--bg-card-hover); border-color: var(--border-accent); color: var(--text-primary); }
.btn-outline-secondary { border-color: var(--border-color); color: var(--text-secondary); }
.btn-outline-secondary:hover { background: var(--accent-dim); border-color: var(--accent); color: var(--accent-hover); }
.btn-outline-danger { border-color: var(--border-color); color: var(--text-secondary); }
.btn-outline-danger:hover { border-color: var(--danger); color: var(--danger); background: rgba(232,85,84,0.08); }
.btn-sm { padding: 6px 14px; font-size: 12px; border-radius: 999px; }
.alert-info { background: var(--accent-dim); border-color: rgba(25,179,53,0.2); color: var(--accent-hover); }
.badge.bg-secondary { background: rgba(67,65,215,0.14) !important; color: #4341d7; }
.text-muted { color: var(--text-muted) !important; }
.text-danger { color: var(--danger) !important; }