/* Algo-Energy shared styles.
   Bootstrap 5 stays the base; this file holds only the custom bits that were
   previously duplicated inline across templates, so they're defined once. */

/* ── Global (moved from base.html) ───────────────────────────────────────── */
/* "Snappy UI": kill Bootstrap's built-in slide/fade choreography (modal,
   offcanvas, dropdown, collapse, carousel) so opening/closing those feels
   instant rather than laggy. Scoped to those components specifically —
   NOT a blanket `*` kill — so it doesn't also silently stop loading
   spinners from spinning or strip hover/focus feedback everywhere else. */
.fade, .collapsing, .offcanvas, .dropdown-menu, .modal, .modal-dialog,
.carousel-item, .toast {
    transition: none !important;
    animation: none !important;
}
/* Bootstrap sets scroll-behavior:smooth on this same selector inside its own
   prefers-reduced-motion:no-preference media query — but app.css loads after
   Bootstrap's stylesheet, so plain cascade order already wins without
   !important. */
html {
    scroll-behavior: auto;
    background-color: var(--bs-body-bg);
}
body { overflow-x: clip; }

/* ── Theme toggle ─────────────────────────────────────────────────────────── */
#theme-toggle [data-theme-icon="dark"] { display: none; }
#theme-toggle [data-theme-icon="light"] { display: inline-block; }
[data-bs-theme="dark"] #theme-toggle [data-theme-icon="dark"] { display: inline-block; }
[data-bs-theme="dark"] #theme-toggle [data-theme-icon="light"] { display: none; }

/* Dark-mode hover/active states for components whose CDN defaults don't
   fully key off data-bs-theme — without these, hovering a dropdown item,
   table row, or list item flashes Bootstrap's light-mode gray regardless
   of the active theme. */
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus,
[data-bs-theme="dark"] .list-group-item-action:hover,
[data-bs-theme="dark"] .list-group-item-action:focus {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}
@media (hover: hover) and (pointer: fine) {
    [data-bs-theme="dark"] .nav-link:hover,
    [data-bs-theme="dark"] .accordion-button:hover {
        color: var(--bs-body-color);
    }
}


/* Loading spinners communicate real progress, not decoration — keep them
   spinning even for prefers-reduced-motion users. */
.spinner-border, .spinner-grow {
    animation-duration: .75s !important;
}

/* Small, fast hover/press/focus feedback on interactive elements. Kept to a
   single short timing so it reads as responsive rather than slow, and fully
   disabled for prefers-reduced-motion users below. */
@media (prefers-reduced-motion: no-preference) {
    .btn, .charger-btn, .card, .form-control, .form-select {
        transition: background-color .12s ease, border-color .12s ease,
            box-shadow .12s ease, transform .12s ease;
    }
}
@media (prefers-reduced-motion: reduce) {
    /* No !important: this media query and the no-preference one above are
       mutually exclusive (a given device matches exactly one), so this
       declaration is never actually competing against the other block's
       transition rule — nothing to win against. Bootstrap independently
       already zeroes .btn/.form-select's own transition under reduce. */
    .btn, .charger-btn, .card, .form-control, .form-select,
    .spinner-border, .spinner-grow {
        transition: none;
    }
}

/* Hover-triggered color changes only for devices with real hover (a mouse) —
   on touch, :hover fires on tap and can stick until the next tap elsewhere,
   which reads as a glitch rather than feedback. Touch gets :active instead,
   which cleanly applies on touch-down and clears on release. */
@media (hover: hover) and (pointer: fine) {
    /* .charger-btn is built on Bootstrap's btn-outline-light, whose :hover
       state fills solid with the fixed (non-theme-aware) --bs-light — nearly
       invisible in light mode, but a jarring white card in dark mode. These
       cards should only ever get the subtle border/shadow accent below. */
    .charger-btn:hover {
        background-color: var(--bs-body-bg) !important;
        color: var(--bs-body-color) !important;
        border-color: var(--bs-primary) !important;
        box-shadow: var(--bs-box-shadow-sm);
    }
}
.charger-btn:active {
    transform: scale(0.995);
    border-color: var(--bs-primary) !important;
}
.charger-btn-selected {
    border-color: var(--bs-primary) !important;
    background-color: var(--bs-primary-bg-subtle) !important;
    box-shadow: 0 0 0 1px var(--bs-primary);
}
.form-switch-lg { width: 3em; height: 1.5em; cursor: pointer; }

@media (max-width: 991.98px) {
    .offcanvas-body .nav-link { font-size: 1.1rem; padding-top: 0.6rem; padding-bottom: 0.6rem; padding-left: 0.75rem; padding-right: 0.75rem; }
    /* Matches Bootstrap's .navbar-nav .nav-link.active in specificity
       (3 classes each) — app.css loading after Bootstrap's stylesheet
       already wins the tie, so no !important needed. */
    .offcanvas-body .nav-link.active {
        background: rgba(var(--bs-primary-rgb), 0.1);
        border-radius: 0.75rem;
        color: var(--bs-primary);
        font-weight: 600;
    }
}
@media (min-width: 992px) {
    /* Matches Bootstrap's .navbar-nav .nav-link.active in specificity
       (3 classes each) — same reasoning as the offcanvas rule above. */
    .navbar .nav-link.active {
        color: var(--bs-primary);
        font-weight: 600;
        border-bottom: 2px solid var(--bs-primary);
        padding-bottom: calc(0.5rem - 2px);
    }
}

/* ── Type scale ──────────────────────────────────────────────────────────── */
/* Replaces scattered inline font-size:.6/.7/.72/.75rem overrides. */
.text-2xs { font-size: 0.7rem; }
.text-xs  { font-size: 0.8rem; }

/* ── Primary CTA button ──────────────────────────────────────────────────── */
/* One recipe for every large primary action (Start Charging, Add Funds, Find a
   Charger, Login, Register, ...). Use as `btn btn-primary btn-cta` (or an
   outline/other variant + btn-cta). Collapses the former three ad-hoc recipes. */
.btn-cta {
    border-radius: 50rem;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    font-size: 1.125rem;
    box-shadow: var(--bs-box-shadow-sm);
}

/* ── Responsive data tables ──────────────────────────────────────────────── */
/* Below md, a `.resp-table` collapses each row into a card: the thead is hidden
   and each cell shows its `data-label` inline. Shared by admin tables and the
   customer transactions page so every data view has the same mobile treatment. */
.table-responsive { overflow-x: auto; }

@media (min-width: 768px) {
    .filter-select { width: auto !important; }
}

@media (max-width: 767.98px) {
    .resp-table thead { display: none; }
    .resp-table, .resp-table tbody, .resp-table tr, .resp-table td { display: block; width: 100% !important; }
    .resp-table tr {
        margin-bottom: 0.5rem;
        border: 0 !important;
        border-radius: 1rem;
        box-shadow: var(--bs-box-shadow-sm);
        overflow: hidden;
        padding: 0.6rem 1rem;
    }
    .resp-table td {
        display: flex;
        gap: 0.5rem;
        align-items: baseline;
        padding: 0.1rem 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background-color: transparent !important;
        text-align: left;
    }
    .resp-table td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 0.7rem;
        text-transform: uppercase;
        font-weight: 600;
        color: var(--bs-secondary-color);
        min-width: 5rem;
        text-align: left !important;
    }
    .resp-table td.text-end, .resp-table td.text-center { text-align: left !important; }
    .resp-table td.no-label {
        justify-content: flex-end;
        margin-top: 0.4rem;
    }
    .resp-table td.no-label .btn { flex: 0 0 auto; }
    .resp-table td.empty-row { display: block; text-align: center; box-shadow: none; }
    .resp-table td.action-stack {
        flex-direction: column;
        align-items: stretch;
        margin-top: 0.5rem;
        padding-top: 0.6rem !important;
        border-top: 1px solid var(--bs-border-color-translucent) !important;
    }
    .resp-table td.action-stack .btn { width: 100%; border-radius: 0.75rem; }
    .resp-table tr:not(.expanded) td.resp-optional { display: none; }
    /* Idle pricing shown inline in the always-visible Cost cell (mobile) —
       gated the same way as resp-optional columns, just not a whole <td>. */
    .resp-table tr:not(.expanded) .resp-optional-inline { display: none; }
    .resp-table td.resp-toggle {
        justify-content: center;
        margin-top: 0.25rem;
    }
    .resp-table td.resp-toggle button {
        border: 0;
        background: none;
        padding: 0.25rem 0;
        font-size: 0.75rem;
        color: var(--bs-secondary-color);
    }
}