* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,255,255,0.4) transparent;
}

:root {
    --bs-primary: hsl(187, 100%, 50%);
    --bs-primary-rgb: 0, 229, 255;
    --bs-border-radius: 0.75rem;
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: 1rem;

    /* Theme Light (Default) */
    --bs-body-bg: hsl(0, 0%, 98%);
    --bs-body-color: hsl(222, 47%, 11%);
    --card-bg: hsl(0, 0%, 100%);
    --sidebar-bg: hsl(222, 47%, 11%);
    --sidebar-text: hsl(215, 20%, 65%);
    --bs-border-color: hsl(214, 32%, 91%);
}

[data-bs-theme=dark] {
    --bs-body-bg: hsl(224, 71%, 4%);
    --bs-body-color: hsl(210, 40%, 98%);
    --card-bg: hsl(222, 47%, 11%);
    --sidebar-bg: hsl(224, 71%, 4%);
    --sidebar-text: hsl(215, 20%, 65%);
    --bs-border-color: hsl(217, 33%, 17%);
}

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: background-color 0.3s ease;
}

[data-bs-theme=dark] body {
    background-image: radial-gradient(circle at 0% 0%, hsla(187, 100%, 50%, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 100% 0%, hsla(217, 91%, 60%, 0.03) 0%, transparent 50%);
    background-attachment: fixed;
}

/* Base Components */
.card {
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    box-shadow: 0 10px 30px -10px hsla(187, 100%, 50%, 0.15);
}

[data-bs-theme=dark] .card:hover {
    box-shadow: 0 0 25px hsla(187, 100%, 50%, 0.08);
}

/* Buttons */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-color: hsl(0, 0%, 0%);
    --bs-btn-hover-bg: hsl(187, 100%, 42%);
    --bs-btn-hover-border-color: hsl(187, 100%, 42%);
    --bs-btn-hover-color: hsl(0, 0%, 0%);
    --bs-btn-active-bg: hsl(187, 100%, 38%);
    --bs-btn-active-border-color: hsl(187, 100%, 38%);
    --bs-btn-active-color: hsl(0, 0%, 0%);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-disabled-color: hsla(0, 0%, 0%, 0.6);
}

[data-bs-theme=dark] .btn-primary {
    --bs-btn-color: hsl(0, 0%, 0%) !important;
    --bs-btn-hover-color: hsl(0, 0%, 0%) !important;
    --bs-btn-active-color: hsl(0, 0%, 0%) !important;
}
.btn-outline-primary {
    background-color: transparent;
    border: 1px solid hsla(187, 100%, 50%, 0.4);
    color: var(--bs-primary);
    border-radius: var(--bs-border-radius);
    transition: all 0.18s ease;
}

/* Form Elements */

/* Checkbox */
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-check-input:focus {
    border-color: hsl(187, 100%, 50%);
    box-shadow: 0 0 0 0.25rem hsla(187, 100%, 50%, 0.2);
}

/* Switch */
.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23adb5bd'/%3e%3c/svg%3e");
    border-color: hsl(215, 20%, 40%);
    transition: background-color 0.2s ease, border-color 0.2s ease, background-position 0.15s ease;
}

.form-switch .form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem hsla(187, 100%, 50%, 0.25);
    border-color: var(--bs-primary);
}

/* Utils */
.text-primary {
    color: var(--bs-primary) !important;
}

.text-secondary {
    color: var(--sidebar-text) !important;
}

.bg-sistema {
    background-color: var(--bs-body-bg);
}

.cursor-pointer {
    cursor: pointer !important;
}

/* Form Inputs */
.form-control:focus,
.form-select:focus,
.form-control:focus-visible,
.form-select:focus-visible {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem hsla(187, 100%, 50%, 0.2);
    outline: none;
}

/* Dropdown */
.dropdown-menu {
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 8px 24px hsla(222, 47%, 11%, 0.15);
    padding: 0.35rem;
}

.dropdown-item {
    color: var(--bs-body-color);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: hsla(187, 100%, 50%, 0.1);
    color: var(--bs-primary);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--bs-primary);
    color: hsl(0, 0%, 0%);
}

.dropdown-divider {
    border-color: var(--bs-border-color);
    opacity: 1;
}

.dropdown-header {
    color: var(--sidebar-text);
    font-size: 0.7rem;
    letter-spacing: 0.06rem;
    text-transform: uppercase;
    font-weight: 600;
}

/* SCROLL GLOBAL */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* trilho (fundo) */
::-webkit-scrollbar-track {
    background: transparent; /* deixa clean */
}

/* barra */
::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 255, 0.25); /* ciano suave */
    border-radius: 10px;
    transition: all 0.3s ease;
}

/* hover */
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 255, 255, 0.6);
}

/* quando estiver ativo (clicando) */
::-webkit-scrollbar-thumb:active {
    background: rgba(0, 255, 255, 0.9);
}