:root {
    --canvas: #f4efe6;
    --panel: #fffdf8;
    --ink: #17313b;
    --accent: #1e7a78;
    --accent-soft: #dff1ed;
    --warn: #d97706;
}

body.dark-mode {
    --canvas: #16191d;
    --panel: #343a40;
    --ink: #f3f4f6;
    --accent: #4da3ff;
    --accent-soft: rgba(77, 163, 255, 0.12);
    --warn: #fbbf24;
    background: var(--canvas);
}

body {
    font-family: "Segoe UI", "PingFang SC", sans-serif;
    background: var(--canvas);
    color: var(--ink);
}

.content-wrapper > .content {
    padding-bottom: 1.5rem;
}

.small-box, .card {
    border-radius: 1rem;
    border: 1px solid rgba(23, 49, 59, 0.08);
    box-shadow: 0 16px 30px rgba(23, 49, 59, 0.08);
}

.card {
    background: var(--panel);
    overflow: hidden;
}

.card-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.card-header > .card-title,
.card-header > h1,
.card-header > h2,
.card-header > h3,
.card-header > h4,
.card-header > h5,
.card-header > h6 {
    margin-bottom: 0;
}

.card-header > .card-tools,
.card-header > .btn,
.card-header > a.btn,
.card-header > .btn-group,
.card-header > .dropdown,
.card-header > form {
    margin-left: auto;
}

.card-header > .card-tools {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.card-header > .row {
    flex: 1 1 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.brand-link,
.main-sidebar {
    background: linear-gradient(180deg, #14343c, #0d2228);
}

aside.main-sidebar.sidebar-dark-primary > .brand-link {
    overflow: hidden;
    color: #e8edf3 !important;
    text-decoration: none;
}

aside.main-sidebar.sidebar-dark-primary > .brand-link:hover,
aside.main-sidebar.sidebar-dark-primary > .brand-link:focus {
    color: #e8edf3 !important;
    text-decoration: none;
}

aside.main-sidebar.sidebar-dark-primary > .brand-link .brand-text {
    color: #e8edf3 !important;
}

aside.main-sidebar.sidebar-dark-primary > .brand-link:hover .brand-text,
aside.main-sidebar.sidebar-dark-primary > .brand-link:focus .brand-text {
    color: #e8edf3 !important;
}

.brand-logo-image {
    display: block;
    height: 32px;
    width: auto;
    max-width: none;
    flex-shrink: 0;
}

body.sidebar-collapse .brand-link {
    justify-content: flex-start;
}

body.sidebar-collapse .brand-logo-image {
    width: 46px;
    height: 32px;
    object-fit: cover;
    object-position: left center;
}

.nav-sidebar .nav-link.active {
    background: rgba(223, 241, 237, 0.18);
}

.table td,
.table th {
    vertical-align: middle;
}

.form-control,
.custom-select {
    border-radius: .75rem;
}

.btn {
    border-radius: .75rem;
}

.badge-light {
    background: #e9ecef;
}

.metric-note {
    color: #6c757d;
    font-size: .875rem;
}

/* Dark mode form controls (must beat AdminLTE's long selector) */
body.dark-mode .form-control,
body.dark-mode .form-control:not(.form-control-navbar):not(.form-control-sidebar),
body.dark-mode .custom-select {
    background-color: #2a3038 !important;
    border-color: rgba(255,255,255,.1) !important;
    color: #f3f4f6 !important;
}
body.dark-mode .form-control:-webkit-autofill,
body.dark-mode .form-control:-webkit-autofill:hover,
body.dark-mode .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #2a3038 inset !important;
    -webkit-text-fill-color: #f3f4f6 !important;
    transition: background-color 5000s ease-in-out 0s;
}
body.dark-mode .form-control::placeholder {
    color: rgba(243,244,246,.4);
}
body.dark-mode .form-control:focus,
body.dark-mode .custom-select:focus {
    background-color: #2a3038 !important;
    border-color: #4da3ff !important;
    color: #f3f4f6 !important;
}

/* Dark mode overrides */
body.dark-mode .content-wrapper {
    background: var(--canvas);
}
body.dark-mode .main-footer,
body.dark-mode .main-header.navbar {
    border-color: rgba(255,255,255,.08);
}
body.dark-mode .card,
body.dark-mode .small-box,
body.dark-mode .info-box {
    box-shadow: none;
}
body.dark-mode .table thead th,
body.dark-mode .table td,
body.dark-mode .table th {
    border-color: rgba(255,255,255,.08);
}
body.dark-mode pre,
body.dark-mode code {
    color: #d7dde5;
}
body.dark-mode .bg-light {
    background: #22272e !important;
    color: #d7dde5 !important;
}
body.dark-mode .text-dark {
    color: var(--ink) !important;
}
body.dark-mode .btn-default {
    background-color: #2b3035;
    border-color: #3a4148;
    color: #e5e7eb;
}
body.dark-mode .nav-sidebar .nav-link.active {
    background-color: #3f6791;
    color: #fff;
}
body.dark-mode .nav-sidebar .nav-link.active .nav-icon {
    color: #fff;
}
body.dark-mode .grid-view {
    color: var(--ink);
}
body.dark-mode .grid-view .summary {
    color: #d7dde5;
}
body.dark-mode a:not(.btn):not(.nav-link):not(.brand-link) {
    color: #ffffff !important;
}
body.dark-mode a:not(.btn):not(.nav-link):not(.brand-link):hover {
    color: #d1d5db !important;
}
body.dark-mode .filters input,
body.dark-mode .filters select,
body.dark-mode .filters .form-control {
    background: #3a4047;
    border-color: #5a626d;
    color: var(--ink);
}
body.dark-mode .filters input::placeholder {
    color: rgba(243, 244, 246, .6);
}

/* Compact sidebar */
.nav-sidebar .nav-link {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 15px;
}
.nav-sidebar .nav-link .nav-icon {
    font-size: 15px;
    margin-right: 6px;
    width: 16px;
    text-align: center;
}
.nav-sidebar > .nav-item {
    margin-bottom: 0;
}
.nav-header {
    padding: 6px 12px 3px;
    font-size: 10px;
}

/* IPv6 node name highlight (shared: node/index, geo-dns-node/index) */
.node-name-ipv6 {
    color: #22c55e;
    font-weight: 600;
}

/* Rule condition form (shared: _rule/form) */
.condition-group {
    margin-bottom: 10px;
}
.condition-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    margin-bottom: 8px;
}
body.dark-mode .condition-row {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}
.condition-row select,
.condition-row input[type=text] { height: 34px; font-size: 13px; }
.condition-row .field-select { width: 210px; flex-shrink: 0; }
.condition-row .op-select    { width: 130px; flex-shrink: 0; }
.condition-row .value-input  { flex: 1; min-width: 120px; }
.condition-row .btn-remove   { flex-shrink: 0; }
.group-or-sep {
    margin: 2px 0 10px;
}
.group-or-sep .badge {
    font-size: 12px;
    padding: 5px 10px;
}
#no-conditions-hint {
    color: #888;
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    text-align: center;
    padding: 18px 12px;
    display: none;
}
body.dark-mode #no-conditions-hint {
    border-color: rgba(255, 255, 255, 0.15);
}
#expression-preview {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    padding: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    white-space: pre-wrap;
    min-height: 48px;
}
body.dark-mode #expression-preview {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}
#expression-editor {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    min-height: 180px;
}
.fields-help dt { font-weight: 600; color: #495057; margin-top: 6px; }
.fields-help dd { color: #6c757d; font-size: 13px; margin-bottom: 2px; }
body.dark-mode .fields-help dt { color: #d1d5db; }
body.dark-mode .fields-help dd { color: #9ca3af; }

/* Node Specification Tags */
.spec-group {
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    overflow: hidden;
    line-height: normal;
}
.spec-item {
    padding: 2px 7px;
    font-size: 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    color: #007bff;
    text-decoration: none !important;
    background: rgba(0, 123, 255, 0.05);
}
.spec-item:last-child {
    border-right: none;
}
.spec-item:hover {
    background: rgba(0, 123, 255, 0.2);
    color: #007bff;
}

/* Compact action button groups (node lists, zone lists) */
.node-action-buttons {
    display: inline-flex;
    gap: 0.35rem;
    white-space: nowrap;
}
.node-action-buttons .btn {
    padding: 0.2rem 0.45rem;
}