/* ── Font & Base ─────────────────────────────────────────── */
@font-face {
    font-family: 'NewRodin';
    src: url('/static/font/fot-newrodin-pro-ub.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ── Dark palette (matching website) ─────────────────────── */
[data-bs-theme="dark"] {
    --bs-body-bg:                 #0d1117;
    --bs-body-bg-rgb:             13, 17, 23;
    --bs-body-color:              #c9d1d9;
    --bs-body-color-rgb:          201, 209, 217;
    --bs-emphasis-color:          #e6edf3;
    --bs-emphasis-color-rgb:      230, 237, 243;
    --bs-secondary-bg:            #161b22;
    --bs-secondary-bg-rgb:        22, 27, 34;
    --bs-secondary-color:         #8b949e;
    --bs-secondary-color-rgb:     139, 148, 158;
    --bs-tertiary-bg:             #0d1117;
    --bs-tertiary-bg-rgb:         13, 17, 23;
    --bs-tertiary-color:          #8b949e;
    --bs-tertiary-color-rgb:      139, 148, 158;
    --bs-border-color:            #30363d;
    --bs-border-color-translucent: rgba(240, 246, 252, 0.1);
    --bs-primary:                 #e6edf3;
    --bs-primary-rgb:             230, 237, 243;
    --bs-link-color:              #79c0ff;
    --bs-link-color-rgb:          121, 192, 255;
    --bs-link-hover-color:        #a5d6ff;
    --bs-link-hover-color-rgb:    165, 214, 255;
    --bs-focus-ring-color:        rgba(255, 255, 255, 0.15);
    --bs-code-color:              #79c0ff;
    color-scheme: dark;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
    min-height: 100vh;
    background-color: #0d1117;
}

html {
    height: 100%;
}

main {
    flex: 1;
    position: relative;
}

/* ── Background ─────────────────────────────────────────── */
.page-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: #161b22;
}

.navbar-admin {
    border-bottom-color: rgba(251, 146, 60, 0.4) !important;
    background-color: rgba(154, 52, 18, 0.12) !important;
}

/* ── Navbar ──────────────────────────────────────────────── */
.navbar {
    position: relative;
    z-index: 1030;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background-color: rgba(13, 17, 23, 0.92) !important;
    backdrop-filter: blur(12px);
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    margin-top: -0.5rem;
    margin-bottom: -0.5rem;
}

.navbar-brand-icon {
    height: 2.5rem;
    width: auto;
}

.navbar-brand-icon-dark {
    display: none;
}

.navbar-brand-icon-light {
    display: inline;
}

.navbar-brand-text {
    font-family: 'NewRodin', sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    color: #e6edf3;
}

.navbar-nav-main {
    gap: 0.15rem;
}

.nav-link {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    border-radius: 0;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
    transition: color 0.2s;
}

.nav-link:hover {
    color: rgba(255, 255, 255, 0.92) !important;
}

.nav-link.active {
    color: rgba(255, 255, 255, 0.92) !important;
}

.navbar .dropdown-toggle.show,
.navbar .show > .nav-link {
    color: rgba(255, 255, 255, 0.92) !important;
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.15);
}

.navbar-toggler-icon {
    filter: invert(1) brightness(0.7);
}

.navbar-collapse {
    background-color: transparent;
}

.navbar-userbar {
    flex-wrap: wrap;
}

.navbar-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: calc(var(--bs-btn-font-size) * var(--bs-btn-line-height) + (var(--bs-btn-padding-y) * 2) + (var(--bs-btn-border-width) * 2));
}

.navbar-user-label {
    color: #8b949e;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.navbar-user-pill strong {
    color: #e6edf3;
    font-size: 0.875rem;
}

/* ── Glitch Effect (navbar brand) ────────────────────────── */
.navbar-brand-text.glitch {
    position: relative;
    display: inline-block;
    color: #e6edf3;
    z-index: 2;
    filter: drop-shadow(0 1px 6px rgba(255, 255, 255, 0.25));
}

.navbar-brand-text.layers::before,
.navbar-brand-text.layers::after {
    content: attr(data-text);
    position: absolute;
    width: 110%;
    z-index: -1;
    font-family: 'NewRodin', sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}

.navbar-brand-text.layers::before {
    top: 2px;
    left: 3px;
    color: #e0287d;
}

.navbar-brand-text.layers::after {
    top: 1px;
    left: -2px;
    color: #1bc7fb;
}

.navbar-brand-text.glitch > span {
    animation: glitch-paths 15s step-end infinite;
}

.navbar-brand-text.glitch::before {
    animation: glitch-paths 15s step-end infinite, glitch-opacity 15s step-end infinite,
        glitch-font 24s step-end infinite, glitch-movement 30s step-end infinite;
}

.navbar-brand-text.glitch::after {
    animation: glitch-paths 15s step-end infinite, glitch-opacity 15s step-end infinite,
        glitch-font 21s step-end infinite, glitch-movement 24s step-end infinite;
}

@keyframes glitch-paths {
    0% {
        clip-path: polygon(
            0% 43%, 83% 43%, 83% 22%, 23% 22%, 23% 24%, 91% 24%, 91% 26%,
            18% 26%, 18% 83%, 29% 83%, 29% 17%, 41% 17%, 41% 39%, 18% 39%,
            18% 82%, 54% 82%, 54% 88%, 19% 88%, 19% 4%, 39% 4%, 39% 14%,
            76% 14%, 76% 52%, 23% 52%, 23% 35%, 19% 35%, 19% 8%, 36% 8%,
            36% 31%, 73% 31%, 73% 16%, 1% 16%, 1% 56%, 50% 56%, 50% 8%
        );
    }
    1.7% {
        clip-path: polygon(
            0% 29%, 44% 29%, 44% 83%, 94% 83%, 94% 56%, 11% 56%, 11% 64%,
            94% 64%, 94% 70%, 88% 70%, 88% 32%, 18% 32%, 18% 96%, 10% 96%,
            10% 62%, 9% 62%, 9% 84%, 68% 84%, 68% 50%, 52% 50%, 52% 55%,
            35% 55%, 35% 87%, 25% 87%, 25% 39%, 15% 39%, 15% 88%, 52% 88%
        );
    }
    10% {
        clip-path: polygon(
            0% 53%, 93% 53%, 93% 62%, 68% 62%, 68% 37%, 97% 37%, 97% 89%,
            13% 89%, 13% 45%, 51% 45%, 51% 88%, 17% 88%, 17% 54%, 81% 54%,
            81% 75%, 79% 75%, 79% 76%, 38% 76%, 38% 28%, 61% 28%, 61% 12%,
            55% 12%, 55% 62%, 68% 62%, 68% 51%, 0% 51%, 0% 92%, 63% 92%,
            63% 4%, 65% 4%
        );
    }
    15% {
        clip-path: polygon(
            0% 33%, 2% 33%, 2% 69%, 58% 69%, 58% 94%, 55% 94%, 55% 25%,
            33% 25%, 33% 85%, 16% 85%, 16% 19%, 5% 19%, 5% 20%, 79% 20%,
            79% 96%, 93% 96%, 93% 50%, 5% 50%, 5% 74%, 55% 74%, 55% 57%,
            96% 57%, 96% 59%, 87% 59%, 87% 65%, 82% 65%, 82% 39%, 63% 39%,
            63% 92%, 4% 92%, 4% 36%, 24% 36%, 24% 70%, 1% 70%, 1% 43%,
            15% 43%, 15% 28%, 23% 28%, 23% 71%, 90% 71%, 90% 86%, 97% 86%,
            97% 1%, 60% 1%, 60% 67%, 71% 67%, 71% 91%, 17% 91%, 17% 14%,
            39% 14%, 39% 30%, 58% 30%, 58% 11%, 52% 11%, 52% 83%, 68% 83%
        );
    }
    25.3% {
        clip-path: polygon(
            0% 26%, 15% 26%, 15% 73%, 72% 73%, 72% 70%, 77% 70%, 77% 75%,
            8% 75%, 8% 42%, 4% 42%, 4% 61%, 17% 61%, 17% 12%, 26% 12%,
            26% 63%, 73% 63%, 73% 43%, 90% 43%, 90% 67%, 50% 67%, 50% 41%,
            42% 41%, 42% 46%, 50% 46%, 50% 84%, 96% 84%, 96% 78%, 49% 78%,
            49% 25%, 63% 25%, 63% 14%
        );
    }
    30% {
        clip-path: polygon(
            0% 41%, 13% 41%, 13% 6%, 87% 6%, 87% 93%, 10% 93%, 10% 13%,
            89% 13%, 89% 6%, 3% 6%, 3% 8%, 16% 8%, 16% 79%, 0% 79%,
            0% 99%, 92% 99%, 92% 90%, 5% 90%, 5% 60%, 0% 60%, 0% 48%,
            89% 48%, 89% 13%, 80% 13%, 80% 43%, 95% 43%, 95% 19%, 80% 19%,
            80% 85%, 38% 85%, 38% 62%
        );
    }
    0.3%, 2.3%, 11%, 15.7%, 26%, 31% {
        clip-path: none;
    }
}

@keyframes glitch-movement {
    0% {
        top: 0px;
        left: -3px;
    }
    5% {
        top: 2px;
        left: 2px;
    }
    20% {
        top: 1px;
        left: -2px;
    }
    25% {
        top: -1px;
        left: 3px;
    }
    33.3% {
        top: 0px;
        left: 0px;
    }
}

@keyframes glitch-opacity {
    0% {
        opacity: 0.1;
    }
    1.7% {
        opacity: 0.7;
    }
    10% {
        opacity: 0.4;
    }
    15% {
        opacity: 0.6;
    }
    25.3% {
        opacity: 0.4;
    }
    30% {
        opacity: 0.8;
    }
    0.3%, 2.3%, 11%, 15.7%, 26%, 31% {
        opacity: 0;
    }
}

@keyframes glitch-font {
    0% {
        font-weight: 100;
        color: #e0287d;
        filter: blur(3px);
    }
    6.7% {
        font-weight: 500;
        color: #e6edf3;
        filter: blur(0);
    }
    16.7% {
        font-weight: 300;
        color: #1bc7fb;
        filter: blur(2px);
    }
    20% {
        font-weight: 700;
        color: #e6edf3;
        filter: blur(0);
    }
    30% {
        font-weight: 500;
        color: #e0287d;
        filter: blur(6px);
    }
    33% {
        font-weight: 800;
        color: #e6edf3;
        filter: blur(0);
    }
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    box-shadow: none;
    background-color: rgba(13, 17, 23, 0.92);
}

.card-body {
    padding: 1.25rem;
}

.card .card {
    border-radius: 0;
    background-color: rgba(255, 255, 255, 0.02);
}

.card-header {
    background-color: rgba(255, 255, 255, 0.02);
    border-bottom-color: rgba(240, 246, 252, 0.1);
}

/* ── Tables ──────────────────────────────────────────────── */
.table {
    --bs-table-striped-bg: transparent;
    font-size: 0.875rem;
    margin-bottom: 0;
    color: #c9d1d9;
}

.table > thead > tr:first-child > th:first-child {
    border-top-left-radius: 0;
}

.table > thead > tr:first-child > th:last-child {
    border-top-right-radius: 0;
}

.table > tbody > tr:last-child > td:first-child {
    border-bottom-left-radius: 0;
}

.table > tbody > tr:last-child > td:last-child {
    border-bottom-right-radius: 0;
}

.table > thead > tr > th {
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8b949e;
    border-bottom: 1px solid rgba(240, 246, 252, 0.1);
    padding: 0.75rem 1rem;
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding: 0.7rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid rgba(240, 246, 252, 0.06);
}

.table > tbody > tr:last-child > td,
.table > tfoot > tr:last-child > td {
    border-bottom: 0;
}

.table > tfoot > tr > td {
    padding: 0.7rem 1rem;
}

.table > tfoot > tr > td[colspan] {
    padding-right: 0;
}

.table > tbody > tr {
    transition: background-color 0.15s;
}

.table > tbody > tr:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

/* ── Tabs ────────────────────────────────────────────────── */
.nav-tabs {
    border-bottom-color: rgba(240, 246, 252, 0.1);
}

.nav-tabs .nav-link {
    border-radius: 0;
    color: #8b949e !important;
    border-color: transparent;
    padding: 0.65rem 1.15rem;
    font-size: 0.8125rem;
}

.nav-tabs .nav-link:hover {
    color: #c9d1d9 !important;
    border-color: transparent transparent rgba(240, 246, 252, 0.1);
}

.nav-tabs .nav-link.active {
    color: #e6edf3 !important;
    background-color: rgba(13, 17, 23, 0.92);
    border-color: rgba(240, 246, 252, 0.1) rgba(240, 246, 252, 0.1) transparent;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0;
    padding: 0.44rem 1rem;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-sm {
    padding: 0.3rem 0.75rem;
    font-size: 0.8125rem;
    border-radius: 0;
}

.btn-primary {
    --bs-btn-bg: rgba(255, 255, 255, 0.06);
    --bs-btn-border-color: rgba(255, 255, 255, 0.2);
    --bs-btn-color: #e6edf3;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.1);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.3);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: rgba(255, 255, 255, 0.12);
    --bs-btn-active-border-color: rgba(255, 255, 255, 0.35);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: rgba(255, 255, 255, 0.03);
    --bs-btn-disabled-border-color: rgba(255, 255, 255, 0.1);
    --bs-btn-disabled-color: #8b949e;
}

.btn-secondary {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #30363d;
    --bs-btn-color: #c9d1d9;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.04);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.2);
    --bs-btn-hover-color: #e6edf3;
    --bs-btn-active-bg: rgba(255, 255, 255, 0.06);
    --bs-btn-active-border-color: rgba(255, 255, 255, 0.25);
    --bs-btn-active-color: #e6edf3;
}

.btn-danger {
    --bs-btn-bg: rgba(248, 81, 73, 0.1);
    --bs-btn-border-color: rgba(248, 81, 73, 0.3);
    --bs-btn-color: #f85149;
    --bs-btn-hover-bg: rgba(248, 81, 73, 0.15);
    --bs-btn-hover-border-color: rgba(248, 81, 73, 0.4);
    --bs-btn-hover-color: #ff7b74;
    --bs-btn-active-bg: rgba(248, 81, 73, 0.2);
    --bs-btn-active-border-color: rgba(248, 81, 73, 0.5);
    --bs-btn-active-color: #ff7b74;
}

.btn-warning {
    --bs-btn-bg: rgba(210, 153, 34, 0.1);
    --bs-btn-border-color: rgba(210, 153, 34, 0.3);
    --bs-btn-color: #d29922;
    --bs-btn-hover-bg: rgba(210, 153, 34, 0.15);
    --bs-btn-hover-border-color: rgba(210, 153, 34, 0.4);
    --bs-btn-hover-color: #e3b341;
    --bs-btn-active-bg: rgba(210, 153, 34, 0.2);
    --bs-btn-active-border-color: rgba(210, 153, 34, 0.5);
    --bs-btn-active-color: #e3b341;
}

.btn-info {
    --bs-btn-bg: rgba(88, 166, 255, 0.1);
    --bs-btn-border-color: rgba(88, 166, 255, 0.3);
    --bs-btn-color: #58a6ff;
    --bs-btn-hover-bg: rgba(88, 166, 255, 0.15);
    --bs-btn-hover-border-color: rgba(88, 166, 255, 0.4);
    --bs-btn-hover-color: #79c0ff;
    --bs-btn-active-bg: rgba(88, 166, 255, 0.2);
    --bs-btn-active-border-color: rgba(88, 166, 255, 0.5);
    --bs-btn-active-color: #79c0ff;
}

.btn-outline-primary {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(255, 255, 255, 0.15);
    --bs-btn-color: #c9d1d9;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.04);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.25);
    --bs-btn-hover-color: #e6edf3;
    --bs-btn-active-bg: rgba(255, 255, 255, 0.06);
    --bs-btn-active-border-color: rgba(255, 255, 255, 0.3);
    --bs-btn-active-color: #e6edf3;
}

.btn-outline-secondary {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #30363d;
    --bs-btn-color: #8b949e;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.04);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.2);
    --bs-btn-hover-color: #c9d1d9;
    --bs-btn-active-bg: rgba(255, 255, 255, 0.06);
    --bs-btn-active-border-color: rgba(255, 255, 255, 0.25);
    --bs-btn-active-color: #c9d1d9;
}

/* ── Btn Group (period selectors etc.) ───────────────────── */
.btn-group .btn {
    border-radius: 0;
}

.btn-group > .btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group > .btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-close {
    filter: invert(1) brightness(0.7);
}

/* ── Form Controls ───────────────────────────────────────── */
.form-control {
    font-size: 0.875rem;
    border-radius: 0;
    padding: 0.5rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e6edf3;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.form-control:focus {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
    color: #e6edf3;
}

.form-control::placeholder {
    color: rgba(139, 148, 158, 0.72);
}

.form-select {
    font-size: 0.875rem;
    border-radius: 0;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    background-color: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e6edf3;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.form-select:focus {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
    color: #e6edf3;
}

.form-label {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.58);
    margin-bottom: 0.35rem;
}

.form-text {
    font-size: 0.75rem;
    color: #8b949e;
}

.form-check-input {
    border-radius: 0;
    background-color: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.2);
}

.form-check-input:checked {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.3);
}

.form-switch .form-check-input {
    border-radius: 2em;
}

.input-group .form-control,
.input-group .btn,
.input-group .input-group-text {
    border-radius: 0;
}

.input-group > :not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > :not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group-text {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(240, 246, 252, 0.1);
    color: #8b949e;
}

/* ── Modals ──────────────────────────────────────────────── */
.modal-content {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
    background-color: rgba(13, 17, 23, 0.92);
    backdrop-filter: blur(12px);
}

.modal-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(240, 246, 252, 0.1);
}

.modal-title {
    font-weight: 600;
    font-size: 1rem;
    color: #e6edf3;
}

.modal-body {
    padding: 1.25rem;
}

.modal-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid rgba(240, 246, 252, 0.1);
}

.modal-backdrop {
    background-color: rgba(1, 4, 9, 0.8);
}

/* ── Badges ──────────────────────────────────────────────── */
.badge {
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    padding: 0.35em 0.6em;
    border-radius: 0;
}

.text-bg-primary {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #c9d1d9 !important;
}

.text-bg-success {
    background-color: rgba(63, 185, 80, 0.15) !important;
    color: #3fb950 !important;
}

.text-bg-danger {
    background-color: rgba(248, 81, 73, 0.15) !important;
    color: #f85149 !important;
}

.text-bg-warning {
    background-color: rgba(210, 153, 34, 0.15) !important;
    color: #d29922 !important;
}

.text-bg-info {
    background-color: rgba(88, 166, 255, 0.15) !important;
    color: #58a6ff !important;
}

.text-bg-secondary {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #8b949e !important;
}

.text-bg-light {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #8b949e !important;
    border: 1px solid rgba(240, 246, 252, 0.1);
}

/* ── Alerts ──────────────────────────────────────────────── */
.alert {
    font-size: 0.875rem;
    border-radius: 0;
}

.alert-danger {
    background-color: rgba(248, 81, 73, 0.08);
    border-color: rgba(248, 81, 73, 0.2);
    color: rgba(255, 197, 193, 0.96);
}

.alert-warning {
    background-color: rgba(210, 153, 34, 0.08);
    border-color: rgba(210, 153, 34, 0.2);
    color: rgba(227, 179, 65, 0.96);
}

.alert-info {
    background-color: rgba(88, 166, 255, 0.08);
    border-color: rgba(88, 166, 255, 0.2);
    color: rgba(121, 192, 255, 0.96);
}

.alert-success {
    background-color: rgba(63, 185, 80, 0.08);
    border-color: rgba(63, 185, 80, 0.2);
    color: rgba(188, 255, 199, 0.96);
}

.alert-link {
    color: inherit;
    text-decoration: underline;
}

/* ── Breadcrumbs ─────────────────────────────────────────── */
.breadcrumb {
    font-size: 0.8125rem;
}

.breadcrumb-item a {
    color: #8b949e;
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: #c9d1d9;
}

.breadcrumb-item.active {
    color: #e6edf3;
}

/* ── Dropdown ────────────────────────────────────────────── */
.dropdown-menu {
    border-radius: 0;
    border: 1px solid rgba(240, 246, 252, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    padding: 0.35rem;
    font-size: 0.875rem;
    min-width: 14rem;
    background-color: rgba(13, 17, 23, 0.92);
    backdrop-filter: blur(12px);
}

.dropdown-item {
    border-radius: 0;
    padding: 0.4rem 0.75rem;
    color: #c9d1d9;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.04);
    color: #e6edf3;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: rgba(255, 255, 255, 0.08);
    color: #e6edf3;
}

.dropdown-header {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8b949e;
    padding: 0.35rem 0.75rem 0.2rem;
}

.dropdown-divider {
    border-color: rgba(240, 246, 252, 0.1);
}

/* ── Stat Cards (display-6 counters) ─────────────────────── */
.display-6 {
    font-weight: 600;
    font-size: 1.75rem;
    letter-spacing: -0.02em;
    color: #e6edf3;
}

/* ── Headings ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #e6edf3;
}

/* ── Method / Amount Selection Buttons ────────────────────── */
.method-btn.active,
.method-btn:hover {
    background-color: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #e6edf3 !important;
}

.amount-btn.active,
.amount-btn:hover {
    background-color: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #e6edf3 !important;
}

/* ── List Groups ─────────────────────────────────────────── */
.list-group-item {
    background-color: rgba(13, 17, 23, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
    color: #c9d1d9;
    border-radius: 0 !important;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: rgba(255, 255, 255, 0.03);
    color: #e6edf3;
}

.list-group-flush > .list-group-item {
    border-left: 0;
    border-right: 0;
}

/* ── Progress Bars ───────────────────────────────────────── */
.progress {
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 0;
}

.progress-bar {
    border-radius: 0;
}

/* ── Spinners ────────────────────────────────────────────── */
.spinner-border {
    color: #8b949e;
}

/* ── DataTables Overrides ────────────────────────────────── */
.dt-layout-row {
    background-color: rgba(13, 17, 23, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
}

.dt-search input {
    background-color: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #c9d1d9 !important;
    border-radius: 0 !important;
}

.dt-search input:focus {
    border-color: rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04) !important;
}

.dt-paging .dt-paging-button {
    color: #8b949e !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
}

.dt-paging .dt-paging-button:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: #c9d1d9 !important;
    border-color: rgba(240, 246, 252, 0.1) !important;
}

.dt-paging .dt-paging-button.current {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #e6edf3 !important;
    border-color: rgba(240, 246, 252, 0.1) !important;
}

.dt-info {
    color: #8b949e !important;
}

/* ── Misc ────────────────────────────────────────────────── */
.shadow-sm {
    box-shadow: none !important;
}

.font-monospace {
    font-size: 0.8125rem !important;
}

.text-body-secondary {
    color: #8b949e !important;
}

.text-muted {
    color: #8b949e !important;
}

.border-bottom {
    border-bottom-color: rgba(240, 246, 252, 0.1) !important;
}

.border-top {
    border-top-color: rgba(240, 246, 252, 0.1) !important;
}

.border {
    border-color: rgba(240, 246, 252, 0.1) !important;
}

a {
    color: #79c0ff;
}

a:hover {
    color: #a5d6ff;
}

a.card {
    color: inherit;
}

a.card:hover {
    color: inherit;
    border-color: rgba(240, 246, 252, 0.2);
}

.link-secondary {
    color: #8b949e !important;
}

.link-secondary:hover {
    color: #c9d1d9 !important;
}

::selection {
    background-color: rgba(27, 199, 251, 0.3);
    color: #fff;
}

.text-muted,
.text-body-secondary {
    font-size: 0.8125rem;
}

code {
    font-size: 0.8125rem;
}

/* Smoother scrollbar for tables */
.table-responsive {
    scrollbar-width: thin;
}

.table-responsive::-webkit-scrollbar {
    height: 6px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #21262d;
    border-radius: 3px;
}

/* ── Login card ──────────────────────────────────────────── */
main > .row > div > .card:only-child {
    border-radius: 0;
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: #0d1117;
    }
}

@media (max-width: 767.98px) {
    .navbar-nav-main {
        gap: 0;
        padding-top: 0.75rem;
    }

    .navbar-userbar {
        align-items: stretch;
    }

    .navbar-user-pill {
        justify-content: space-between;
        width: 100%;
        line-height: 1.2;
    }

    .table > thead > tr > th,
    .table > tbody > tr > td {
        padding: 0.5rem 0.6rem;
    }

    .d-flex.flex-wrap.gap-3 {
        gap: 0.5rem !important;
    }

    .display-6 {
        font-size: 1.25rem;
    }

    .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    .form-control[id$="Search"] {
        max-width: none !important;
    }

    .card-body {
        padding: 0.75rem;
    }

    .container-xl {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* ── DataTables ──────────────────────────────────────────── */
.dt-container {
    padding: 0;
}

.dt-container .dt-layout-row {
    padding: 0.5rem 0.75rem;
}

.dt-container .dt-layout-row:first-child {
    padding-top: 0;
}

.dt-container .dt-paging .pagination {
    gap: 0;
    margin-bottom: 0;
}

.dt-container .dt-paging .page-link {
    font-size: 0.8125rem;
    padding: 0.3rem 0.65rem;
    border-radius: 0;
}

[data-bs-theme="dark"] .dt-container .dt-paging .page-link {
    color: #c9d1d9;
    background-color: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .dt-container .dt-paging .page-item.active .page-link {
    color: #e6edf3;
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .dt-container .dt-paging .page-item.disabled .page-link {
    color: #484f58;
    background-color: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .dt-container .dt-paging .page-link:hover {
    color: #e6edf3;
    background-color: rgba(255, 255, 255, 0.04);
}

.dt-info {
    font-size: 0.8125rem;
    color: #8b949e;
}

.dt-length select {
    border-radius: 0;
    font-size: 0.8125rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.25rem 2rem 0.25rem 0.5rem;
    background-color: rgba(255, 255, 255, 0.02);
    color: #c9d1d9;
}

.dt-length label {
    font-size: 0.8125rem;
    color: #8b949e;
}

/* ── Footer ──────────────────────────────────────────────── */
footer {
    border-top-width: 1px !important;
    font-size: 0.875rem;
}

footer p {
    line-height: 1.5;
}

@media (max-width: 767.98px) {
    footer .text-md-end {
        text-align: start !important;
    }
}

/* ── Domain suggestion chips ────────────────────────────── */
.suggest-chip {
    background-color: rgba(63, 185, 80, 0.15);
    color: #3fb950;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.4em 0.85em;
    transition: background-color 0.15s;
}
.suggest-chip:hover {
    background-color: rgba(63, 185, 80, 0.25);
    color: #56d364;
}

/* Searchable select */
.ss-wrap { position: relative; }
.ss-btn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-dropdown {
    display: none;
    position: absolute;
    z-index: 1055;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,.25);
    padding: 0.35rem;
}
.ss-dropdown.show { display: block; }
.ss-search { margin-bottom: 0.35rem; }
.ss-list {
    max-height: 220px;
    overflow-y: auto;
}
.ss-item {
    padding: 0.3rem 0.55rem;
    cursor: pointer;
    border-radius: var(--bs-border-radius-sm);
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ss-item:hover, .ss-item.active { background: var(--bs-primary-bg-subtle); }
.ss-empty {
    padding: 0.5rem;
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
}