@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

:root {
    --cc-bg: #1a1e27;
    --cc-card-bg: #222631;
    --cc-surface: #2f374c;
    --cc-text-primary: #ffffff;
    --cc-text-secondary: #b5bdcf;
    --cc-muted: #727c94;
    --cc-border-subtle: #a0a9c0;

    --cc-primary: #455ddc;
    --cc-danger: #f73463;
    --cc-accent-purple: #9646ef;
    --cc-warning: #ff862e;
    --cc-success: #43d1a7;

    --bs-primary: var(--cc-primary);
    --bs-primary-rgb: 69, 93, 220;
    --bs-danger: var(--cc-danger);
    --bs-danger-rgb: 247, 52, 99;
    --bs-warning: var(--cc-warning);
    --bs-warning-rgb: 255, 134, 46;
    --bs-success: var(--cc-success);
    --bs-success-rgb: 67, 209, 167;

    --bs-body-bg: var(--cc-bg);
    --bs-body-color: var(--cc-text-primary);
    --bs-secondary-color: var(--cc-text-secondary);
    --bs-link-color: #8aa2ff;
    --bs-link-hover-color: #b6c2ff;

    --bs-light: var(--cc-surface);
    --bs-light-rgb: 47, 55, 76;
    --bs-dark: #161a22;
    --bs-dark-rgb: 22, 26, 34;

    --bs-border-color: rgba(160, 169, 192, 0.22);
    --bs-border-color-translucent: rgba(160, 169, 192, 0.18);

    --bs-secondary-bg: #2a3143;
    --bs-tertiary-bg: #252c3c;
    --bs-card-bg: var(--cc-card-bg);
    --bs-card-border-color: transparent;
    --bs-emphasis-color: var(--cc-text-primary);

    --bs-primary-bg-subtle: rgba(69, 93, 220, 0.2);
    --bs-success-bg-subtle: rgba(67, 209, 167, 0.18);
    --bs-warning-bg-subtle: rgba(255, 134, 46, 0.2);
    --bs-danger-bg-subtle: rgba(247, 52, 99, 0.2);

    --bs-focus-ring-color: rgba(69, 93, 220, 0.35);
    --bs-border-radius: 0.75rem;
    --bs-border-radius-lg: 0.9rem;
    --bs-border-radius-sm: 0.6rem;
}

html,
body {
    background: var(--cc-bg);
    color: var(--cc-text-primary);
    font-family: 'Manrope', 'Segoe UI', sans-serif;
    font-weight: 500;
}

body {
    min-height: 100vh;
}

a,
.nav-link,
.dropdown-item {
    transition: color 0.18s ease, background-color 0.18s ease;
}

.navbar,
.navbar.bg-dark,
.navbar.navbar-dark {
    background: #161a22 !important;
    border-color: rgba(160, 169, 192, 0.12) !important;
}

.card,
.modal-content,
.list-group,
.dropdown-menu,
.offcanvas,
.toast,
.popover {
    background-color: var(--cc-card-bg);
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(8, 11, 17, 0.28);
}

.card,
.modal-content {
    border-radius: 12px;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--cc-text-primary);
    --bs-table-border-color: rgba(160, 169, 192, 0.16);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.015);
    --bs-table-hover-bg: rgba(69, 93, 220, 0.12);
    --bs-table-hover-color: var(--cc-text-primary);
}

.table thead th {
    color: var(--cc-text-secondary);
    font-weight: 600;
}

.bg-body,
.bg-light,
.bg-white {
    background-color: var(--cc-card-bg) !important;
    color: var(--cc-text-primary);
}

.text-muted,
.form-text,
small,
.text-secondary {
    color: var(--cc-text-secondary) !important;
}

.form-control,
.form-select,
.input-group-text {
    background-color: var(--cc-surface);
    color: var(--cc-text-primary);
    border-color: rgba(160, 169, 192, 0.2);
}

.form-control::placeholder,
.form-select option {
    color: var(--cc-text-secondary);
}

.form-control:focus,
.form-select:focus,
.btn:focus,
.btn:focus-visible {
    border-color: rgba(69, 93, 220, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(69, 93, 220, 0.24);
}

.btn-outline-light {
    color: var(--cc-text-primary);
    border-color: rgba(160, 169, 192, 0.3);
}

.btn-outline-light:hover,
.btn-outline-light:focus {
    color: #fff;
    background-color: rgba(160, 169, 192, 0.15);
    border-color: rgba(160, 169, 192, 0.5);
}

.badge.bg-light {
    background-color: rgba(160, 169, 192, 0.16) !important;
    color: var(--cc-text-primary) !important;
}

.badge.bg-warning {
    color: #1d2230 !important;
}

.dropdown-menu {
    border: 1px solid rgba(160, 169, 192, 0.16);
}

.dropdown-item {
    color: var(--cc-text-primary);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: #fff;
    background-color: rgba(69, 93, 220, 0.18);
}

.modal-header,
.modal-footer,
.list-group-item,
.accordion-item,
.accordion-button {
    border-color: rgba(160, 169, 192, 0.14);
}

.list-group-item,
.accordion-item,
.accordion-trigger,
.accordion-button {
    background-color: var(--cc-card-bg);
    color: var(--cc-text-primary);
}

.text-body{
    color: var(--cc-text-primary) !important;
}

.nav-tabs {
    border-bottom-color: rgba(160, 169, 192, 0.2);
}

.nav-tabs .nav-link {
    color: var(--cc-text-secondary);
    border: 0;
    border-bottom: 2px solid transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
    color: var(--cc-text-primary);
    background: transparent;
    border-bottom-color: var(--cc-primary);
}

.alert {
    border: 0;
    border-radius: 10px;
}

.pagination .page-link {
    color: var(--cc-text-primary);
    background-color: var(--cc-surface);
    border-color: rgba(160, 169, 192, 0.2);
}

.pagination .page-item.active .page-link {
    color: #fff;
    background-color: var(--cc-primary);
    border-color: var(--cc-primary);
}

hr,
.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color: rgba(160, 169, 192, 0.16) !important;
}

:disabled,
.disabled {
    opacity: 0.58 !important;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(26, 30, 39, 0.8);
}

::-webkit-scrollbar-thumb {
    background: rgba(114, 124, 148, 0.5);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(114, 124, 148, 0.75);
}