@import "../vendor/tom-select/dist/css/tom-select.bootstrap5-R-kDkyu.css";

:root {
    --sidebar-width: 250px;
    --sidebar-bg: #121a2e;
    --sidebar-color: #cbd5e1;
    --sidebar-active-color: #FFFFFF;
    --sidebar-hover-bg: #1e2a47;
    --content-bg: #0B1020;
    --primary-color: #2d3ae6;
    --bs-primary: #2d3ae6;
    --bs-primary-rgb: 45, 58, 230;
    --bs-link-color: #6d4cff;
    --bs-link-hover-color: #a855f7;
}

body {
    background-color: var(--content-bg);
    color: var(--bs-body-color);
    min-height: 100vh;
}

[data-bs-theme="light"] {
    --content-bg: #cbd5e1;
    --sidebar-bg: #1e2a47;
    --sidebar-color: #FFFFFF;
    --sidebar-hover-bg: #2d3ae6;
    --bs-body-bg: #cbd5e1;
    --bs-body-color: #0B1020;
    --bs-primary: #2d3ae6;
    --bs-primary-rgb: 45, 58, 230;
    --bs-link-color: #2d3ae6;
    --bs-link-hover-color: #6d4cff;
}

[data-bs-theme="light"] .btn-primary {
    --bs-btn-bg: #2d3ae6;
    --bs-btn-border-color: #2d3ae6;
    --bs-btn-hover-bg: #1e2a47;
    --bs-btn-hover-border-color: #1e2a47;
    --bs-btn-active-bg: #121a2e;
    --bs-btn-active-border-color: #121a2e;
}

[data-bs-theme="light"] .btn-outline-primary {
    --bs-btn-color: #2d3ae6;
    --bs-btn-border-color: #2d3ae6;
    --bs-btn-hover-bg: #2d3ae6;
    --bs-btn-hover-border-color: #2d3ae6;
    --bs-btn-active-bg: #2d3ae6;
    --bs-btn-active-border-color: #2d3ae6;
}

[data-bs-theme="light"] .text-warning {
    color: #856404 !important;
}

[data-bs-theme="light"] .card {
    background-color: #FFFFFF;
    color: #0B1020;
    border-color: rgba(11, 16, 32, 0.125);
}

[data-bs-theme="light"] .card-header {
    background-color: #1e2a47;
    color: #FFFFFF;
    border-bottom: 1px solid rgba(11, 16, 32, 0.125);
}

[data-bs-theme="dark"] {
    --content-bg: #0B1020;
    --sidebar-bg: #121a2e;
    --sidebar-color: #cbd5e1;
    --sidebar-hover-bg: #1e2a47;
    --bs-primary: #6d4cff;
    --bs-primary-rgb: 109, 76, 255;
    --bs-body-bg: #0B1020;
    --bs-body-color: #cbd5e1;
    --bs-link-color: #a855f7;
    --bs-link-hover-color: #6d4cff;
}

[data-bs-theme="dark"] .btn-primary {
    --bs-btn-bg: #2d3ae6;
    --bs-btn-border-color: #2d3ae6;
    --bs-btn-hover-bg: #6d4cff;
    --bs-btn-hover-border-color: #6d4cff;
    --bs-btn-active-bg: #a855f7;
    --bs-btn-active-border-color: #a855f7;
}

#wrapper {
    display: flex;
    width: 100%;
}

#sidebar-wrapper {
    min-height: 100vh;
    width: var(--sidebar-width);
    margin-left: 0;
    background: var(--sidebar-bg);
    color: var(--sidebar-color);
    transition: margin 0.25s ease-out;
    z-index: 1050; /* Higher than navbar */
    display: flex;
    flex-direction: column;
}

/* Ensure visibility when logged in */
body.user-logged-in #sidebar-wrapper {
    display: flex !important;
}

#wrapper.toggled #sidebar-wrapper {
    margin-left: calc(-1 * var(--sidebar-width));
}

@media (max-width: 768px) {
    #sidebar-wrapper {
        margin-left: calc(-1 * var(--sidebar-width));
        position: fixed;
    }
    #wrapper.toggled #sidebar-wrapper {
        margin-left: 0;
    }
    #page-content-wrapper {
        min-width: 100vw;
    }
    #menu-toggle {
        display: block !important;
    }
    #sidebar-wrapper .list-group {
        width: 100%;
    }
}

/* Ensure menu-toggle is visible on larger screens if we want to allow collapsing there too */
#menu-toggle {
    display: block;
}

#sidebar-wrapper .sidebar-heading {
    padding: 1.5rem 1.25rem;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--sidebar-color);
    border-bottom: 1px solid var(--bs-border-color);
}

#sidebar-wrapper .list-group {
    width: var(--sidebar-width);
}

#sidebar-wrapper .list-group-item {
    background-color: transparent;
    color: var(--sidebar-color);
    border: none;
    padding: 0.75rem 1.25rem;
    transition: all 0.2s;
}

#sidebar-wrapper .list-group-item:hover {
    background-color: var(--sidebar-hover-bg);
    color: var(--sidebar-active-color);
}

#sidebar-wrapper .list-group-item.active {
    background-color: var(--primary-color);
    color: #fff;
}

#sidebar-wrapper .list-group-item i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

#page-content-wrapper {
    width: 100%;
    flex: 1;
}

/* Ensure sidebar color consistency */
#sidebar-wrapper {
    background: var(--sidebar-bg);
    color: var(--sidebar-color);
}

#sidebar-wrapper .list-group-item {
    color: var(--sidebar-color);
}

.top-navbar {
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
    padding: 0.75rem 1.5rem;
}

/* Dashboard Cards */
.card {
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

.card-header {
    background-color: var(--bs-card-cap-bg);
    border-bottom: 1px solid var(--bs-border-color);
    font-weight: 600;
}

.stats-card {
    transition: transform 0.2s;
}

.stats-card:hover {
    transform: translateY(-5px);
}

[data-bs-theme="light"] .top-navbar {
    background: #1e2a47;
    border-bottom: 1px solid #121a2e;
    color: #FFFFFF;
}


[data-bs-theme="light"] #sidebar-wrapper .text-muted {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .table-light {
    --bs-table-bg: #1e2a47;
    --bs-table-color: #cbd5e1;
    --bs-table-border-color: #2d3ae6;
}

[data-bs-theme="dark"] .top-navbar {
    background: #121a2e;
    border-bottom: 1px solid #1e2a47;
}

[data-bs-theme="dark"] .card {
    background-color: #121a2e;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .card-header {
    background-color: #1e2a47;
    border-color: rgba(255, 255, 255, 0.1);
}

.bg-primary-soft { background-color: rgba(var(--bs-primary-rgb), 0.1); }
.bg-success-soft { background-color: rgba(var(--bs-success-rgb), 0.1); }
.bg-warning-soft { background-color: rgba(var(--bs-warning-rgb), 0.1); }
.bg-danger-soft { background-color: rgba(var(--bs-danger-rgb), 0.1); }
.bg-secondary-soft { background-color: rgba(var(--bs-secondary-rgb), 0.1); }

.badge-soft-primary { background-color: rgba(var(--bs-primary-rgb), 0.1); color: var(--bs-primary); }
.badge-soft-success { background-color: rgba(var(--bs-success-rgb), 0.1); color: var(--bs-success); }
.badge-soft-warning { background-color: rgba(var(--bs-warning-rgb), 0.1); color: var(--bs-warning); }
.badge-soft-danger { background-color: rgba(var(--bs-danger-rgb), 0.1); color: var(--bs-danger); }

.badge-soft-info { background-color: rgba(var(--bs-info-rgb), 0.1); color: var(--bs-info); }

/* Timeline/Notes */
.notes-list .card {
    border-left: 4px solid var(--bs-border-color);
}

.notes-list .card.border-primary {
    border-left-color: var(--bs-primary);
}

[data-bs-theme="light"] .bg-white,
[data-bs-theme="light"] .input-group-text {
    background-color: #FFFFFF;
    color: #0B1020;
}

[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .input-group-text,
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .ts-control,
[data-bs-theme="dark"] .ts-control input {
    background-color: #1e2a47 !important;
    color: #cbd5e1 !important;
    border-color: #2d3ae6 !important;
}

[data-bs-theme="dark"] .ts-dropdown {
    background-color: #121a2e !important;
    color: #cbd5e1 !important;
    border-color: #2d3ae6 !important;
}

[data-bs-theme="dark"] .ts-dropdown .option {
    color: #cbd5e1;
}

[data-bs-theme="dark"] .ts-dropdown .active {
    background-color: #1e2a47 !important;
    color: #FFFFFF !important;
}

[data-bs-theme="dark"] .ts-dropdown .create {
    color: #cbd5e1;
}

.bg-white, .input-group-text {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #6d4cff;
    --bs-btn-border-color: #6d4cff;
    --bs-btn-hover-bg: #6d4cff;
    --bs-btn-hover-border-color: #6d4cff;
    --bs-btn-active-bg: #6d4cff;
    --bs-btn-active-border-color: #6d4cff;
}

[data-bs-theme="dark"] .btn-outline-success {
    --bs-btn-color: #75b798;
    --bs-btn-border-color: #75b798;
    --bs-btn-hover-bg: #75b798;
}

[data-bs-theme="dark"] .btn-outline-info {
    --bs-btn-color: #a855f7;
    --bs-btn-border-color: #a855f7;
    --bs-btn-hover-bg: #a855f7;
}

/* --- Onboarding wizard progress indicator ---
   Connected-dot ("subway") progress bar:
   - A muted horizontal line runs behind all step dots.
   - Each connector between two adjacent dots is filled in the primary color
     when its left dot is a completed ("done") step.
   - The current dot is outlined in primary; completed dots are solid primary
     with a check glyph; upcoming dots are outlined in muted grey.
*/
.onboarding-progress__list {
    position: relative;
    counter-reset: onboarding-progress-step;
    /* Fill percentage is updated by the Stimulus controller after Turbo swaps
       so screen-only styles that depend on it (aria progressbar) stay in sync. */
    --onboarding-progress-fill: 0%;
}

.onboarding-progress__step {
    position: relative;
    z-index: 1;
    /* `flex: 1 1 0` (as opposed to Bootstrap's `.flex-fill` which is
       `flex: 1 1 auto`) forces every step column to the same computed width
       regardless of its label length. Without this, longer labels — e.g.
       "Return-if-found message" vs. "Venues" — stretch their <li> wider than
       neighbours, and the connector line (drawn as `left: 50%; width: 100%`
       of the <li>) no longer reaches the next dot's center, producing a
       visible gap between adjacent dots. */
    flex: 1 1 0;
    min-width: 0;
}

/* The connector line lives on every step except the last. It sits at the
   vertical center of the dot and spans from the current dot's center to the
   next dot's center via `left: 50%` + `width: 100%`. Because every step
   column has the same width (see `flex: 1 1 0` above), 100% of the current
   <li>'s width lands exactly on the center of the next dot. */
.onboarding-progress__step:not(.onboarding-progress__step--last)::after {
    content: "";
    position: absolute;
    top: 1rem; /* half of the 2rem dot height — keeps the line centered on dots */
    left: 50%;
    width: 100%;
    height: 3px;
    background-color: var(--bs-border-color, #1e2a47);
    z-index: -1;
    transition: background-color 200ms ease-in-out;
}

/* A "done" step's outgoing connector is filled — this creates the classic
   subway-line "you have travelled up to this dot" effect. */
.onboarding-progress__step--done:not(.onboarding-progress__step--last)::after {
    background-color: var(--bs-primary, #2d3ae6);
}

.onboarding-progress__dot {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--bs-border-color, #1e2a47);
    background-color: var(--bs-body-bg, #FFFFFF);
    color: var(--bs-secondary-color, #cbd5e1);
    font-weight: 600;
    line-height: 1;
    transition:
        background-color 200ms ease-in-out,
        border-color 200ms ease-in-out,
        color 200ms ease-in-out,
        box-shadow 200ms ease-in-out;
}

.onboarding-progress__step--done .onboarding-progress__dot {
    background-color: var(--bs-primary, #2d3ae6);
    border-color: var(--bs-primary, #2d3ae6);
    color: #FFFFFF;
}

.onboarding-progress__step--current .onboarding-progress__dot {
    background-color: var(--bs-body-bg, #FFFFFF);
    border-color: var(--bs-primary, #2d3ae6);
    color: var(--bs-primary, #2d3ae6);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb, 45, 58, 230), 0.2);
}

.onboarding-progress__step--current .small {
    color: var(--bs-primary, #2d3ae6);
    font-weight: 600;
}

.onboarding-progress__step--upcoming .small {
    color: var(--bs-secondary-color, #cbd5e1);
}

.onboarding-progress__percent {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--bs-primary, #2d3ae6);
}

@media (prefers-reduced-motion: reduce) {
    .onboarding-progress__step::after,
    .onboarding-progress__dot {
        transition: none;
    }
}