:root {
    --accent: #009fe3;
    --accent-dark: #0086c0;
    --accent-darker: #006b99;
    --accent-light: rgba(0, 159, 227, 0.12);
}

/* Buttons */
.btn-primary {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}
.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: var(--accent-dark) !important;
    border-color: var(--accent-dark) !important;
}
.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 0.2rem var(--accent-light) !important;
}
.btn-outline-primary {
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}
.btn-outline-primary:hover {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

/* Backgrounds, badges, text, borders */
.bg-primary,
.badge-primary {
    background-color: var(--accent) !important;
}
.text-primary {
    color: var(--accent) !important;
}
.border-primary {
    border-color: var(--accent) !important;
}

/* Links */
a {
    color: var(--accent);
}
a:hover {
    color: var(--accent-darker);
}

/* Cards */
.card-primary.card-outline {
    border-top-color: var(--accent) !important;
}
.card-primary:not(.card-outline) > .card-header {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}
.card {
    border-radius: 0.4rem;
    box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.06);
}
.card-header {
    border-radius: 0.4rem 0.4rem 0 0 !important;
}

/* Sidebar */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--accent) !important;
}
.brand-link .brand-text i {
    color: var(--accent);
    margin-right: 0.35rem;
}

/* Form controls */
.form-control:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 0.2rem var(--accent-light) !important;
}
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--accent);
}
.custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--accent) !important;
    background-color: var(--accent) !important;
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem var(--accent-light) !important;
}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--accent) !important;
}
.input-group-text {
    background-color: #f8f9fa;
    color: #6c757d;
}
.input-group .form-control:focus + .input-group-append .input-group-text,
.input-group:focus-within .input-group-text {
    border-color: var(--accent);
}
.custom-file-input:focus ~ .custom-file-label {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 0.2rem var(--accent-light) !important;
}

/* Kanban board */
.kanban-board {
    display: flex;
    gap: 1rem;
}
.kanban-board-column {
    flex: 1 1 0;
    min-width: 260px;
}
.kanban-column {
    border-radius: 0.3rem;
    background-color: rgba(0, 0, 0, 0.015);
    min-height: 400px;
}

/* Mobile: stack columns instead of horizontal scroll */
@media (max-width: 767.98px) {
    .kanban-board {
        flex-direction: column;
    }
    .kanban-board-column {
        min-width: 100%;
    }
    .kanban-column {
        min-height: 80px;
    }
}

/* Desktop/tablet: columns side by side with horizontal scroll if needed */
@media (min-width: 768px) {
    .kanban-board {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }
}
.kanban-card {
    border-radius: 0.35rem;
    border-left: 3px solid var(--accent);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.kanban-card:hover {
    box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}
.kanban-card.sortable-ghost {
    opacity: 0.4;
}
.kanban-card.sortable-chosen {
    box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.18);
}