/*
 * Shared visual polish for buttons and navigation across every page.
 * Everything here uses Bootstrap 5.3 color-mode variables (--bs-*) so it
 * adapts automatically to data-bs-theme="light"/"dark" — no page-specific
 * dark-mode overrides needed.
 */

/* Site-wide font. Helvetica Neue is a local/system font (macOS/iOS ship it
   by default) — there's no Google Fonts equivalent to load, so this relies
   entirely on the visitor's OS; "Helvetica" then the generic sans-serif
   stack cover everyone else (Windows/Linux/Android) reasonably closely.
   Overriding this Bootstrap variable (rather than setting font-family on
   body directly) cascades to every component that already reads it —
   buttons, forms, navbars, etc. Not loaded on display.php /
   feuille-de-chant.php, which have their own dedicated typography (a
   user-configurable projection font, and a fixed readability font). */
:root {
    --bs-body-font-family: 'Helvetica Neue', Helvetica, Arial, var(--bs-font-sans-serif);
}

/* A .stretched-link's own ::after overlay sits at z-index: 1 — a sibling
   interactive element (e.g. per-row action buttons in a list-group card)
   needs an explicit z-index ABOVE that to reliably stay clickable, since
   `position: relative` alone (with the default z-index: auto) does not
   dependably win against it. Used wherever a card/list-group row combines a
   whole-row stretched-link with its own separate buttons (library.php,
   setlists.php mobile lists). */
.stretched-link-sibling {
    position: relative;
    z-index: 2;
}

/* Any .btn-group with a dropdown-toggle followed by more buttons (a gear
   Actions menu next to its own Supprimer, "Ajouter à une setlist" next to
   Éditer, etc. — see includes/library_song_actions.php/setlist_actions.php/
   library_community_song_actions.php): Bootstrap's own .btn-group CSS
   deliberately leaves a .dropdown-toggle's right corners rounded even when
   it's not the last button, since it assumes a dropdown-toggle is normally
   the LAST button in a group — wrong whenever it instead sits in the
   middle, which leaves a visible rounded bump against whatever button
   follows it.

   ":has(~ .btn)" (a LATER sibling matching .btn exists), NOT ":not(:last-
   child)" — every dropdown-toggle is immediately followed by its own
   <ul class="dropdown-menu"> sibling, so it is *never* actually the DOM's
   :last-child even when it IS the last visible button (nothing else
   renders after its own menu). ":not(:last-child)" matched regardless,
   wrongly squaring off the final button's right corner (and, with no
   button after it at all, wrongly squaring a LONE dropdown-toggle's corner
   too) — ":has(~ .btn)" only matches when another real .btn genuinely
   follows, ul-in-between or not. Site-wide (not page-scoped) since this
   Bootstrap default applies identically anywhere the same pattern is used. */
.btn-group > .btn.dropdown-toggle:has(~ .btn) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Smooth, subtle feedback on every button in the app. The lift (translateY +
   shadow) is skipped for buttons joined into a segmented group (pill-group,
   btn-group, input-group) since lifting one segment out of a joined row
   breaks the shared-edge alignment and looks broken. */
.btn {
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.btn:not(.input-group .btn):not(.btn-group .btn):hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 0.25rem 0.5rem rgba(var(--bs-body-color-rgb), 0.15);
}

/* Segmented "pill" button groups (focus-nav, transpose/capo steppers,
   leader/follow, options menu, instrument picker) — used on score.php and
   follow.php. Consolidated here instead of duplicated per page. */
.pill-group {
    width: auto;
}

.pill-group .btn {
    width: 2.25rem;
    padding-left: 0;
    padding-right: 0;
    color: var(--bs-primary);
    border-color: var(--bs-border-color);
}

.pill-group .btn:first-child {
    border-top-left-radius: 50rem;
    border-bottom-left-radius: 50rem;
}

.pill-group .btn:last-child,
.pill-group .btn:has(+ .dropdown-menu:last-child) {
    border-top-right-radius: 50rem;
    border-bottom-right-radius: 50rem;
}

.pill-group .btn.active,
.pill-group .btn:hover:not(:disabled),
.pill-group .btn:focus:not(:disabled) {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

#zone-simplify.dropdown-toggle::after {
    display: none;
}

/* Bootstrap defines --bs-dropdown-box-shadow but never actually applies it
   as a box-shadow on .dropdown-menu itself — left with no elevation, an
   open dropdown shares the exact same --bs-body-bg background as whatever
   list-group/card sits behind it, so it reads as "see-through" even though
   it's fully opaque. Site-wide since every dropdown in the app (Actions
   menus, etc.) shares this same default. */
.dropdown-menu {
    box-shadow: var(--bs-dropdown-box-shadow);
}

/* Top navbar links (index.php / setlists.php / setlist.php) — a filled pill
   for the current page instead of just a bolder color, so "where am I" reads
   at a glance; a soft hover background on the others so they feel clickable. */
.navbar .nav-link {
    border-radius: 50rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    transition: background-color .15s ease, color .15s ease;
}

.navbar .nav-link.active-page {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis) !important;
}

.navbar .nav-link:not(.active-page):hover {
    background-color: var(--bs-tertiary-bg);
}

/* Landing page's own scrollspy links (index.php's <body data-bs-spy="scroll">
   toggles Bootstrap's own .active class here, not the .active-page class
   above which is driven by PHP's $activePage instead). */
#landing-nav-links .nav-link.active {
    color: var(--bs-primary) !important;
}

/* Stacks a run of floating-label fields (e.g. login/register forms) with no
   gap between them, borders touching, rounded only on the outer corners —
   reads as one joined block instead of separate floating cards. */
.stacked-inputs .form-floating + .form-floating {
    margin-top: -1px;
}

/* :first-of-type / :last-of-type (not :first-child / :last-child): a hidden
   CSRF <input> commonly precedes these fields as an earlier sibling, which
   would throw off a child-index-based selector but not a same-tag one. */
.stacked-inputs .form-floating:not(:first-of-type) .form-control {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.stacked-inputs .form-floating:not(:last-of-type) .form-control {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Raise the whole field (not just the input) above its neighbor on focus —
   Bootstrap's floating label sits at z-index: 2 *inside* its own
   .form-floating; raising the input itself to z-index: 3 would paint the
   input's own background over its own label (the label would seem to
   vanish on focus). Elevating the wrapper instead leaves that internal
   label/input relationship untouched. */
.stacked-inputs .form-floating:focus-within {
    position: relative;
    z-index: 3;
}

/* Leading icon inside a floating-label field (email/password fields app-wide).
   Markup order inside .form-floating: the icon first, then the real
   .form-control, then its <label> — the label-shift rules below rely on
   that order (":not(:placeholder-shown) ~ label" needs label to be a later
   sibling of the input, which it already is per Bootstrap's own convention). */
.form-floating-icon > .form-control {
    padding-left: 2.75rem;
}

.form-floating-icon > label {
    padding-left: 2.75rem;
}

/* The floated-up (focused/filled) label sits smaller/higher, so it needs
   slightly more left padding to keep visually aligned with the icon. */
.form-floating-icon > .form-control:focus ~ label,
.form-floating-icon > .form-control:not(:placeholder-shown) ~ label {
    padding-left: 3rem;
}

/* Spans the full input height and uses flex to center the glyph, rather
   than "top: 50%; transform: translateY(-50%)" on the bare <i> — the latter
   centers the icon's own line box, which some glyphs (e.g. fa-lock, taller
   than fa-envelope) overflow at the top since the line box doesn't grow to
   fit a tall glyph, clipping it against the field's own edge. */
.form-floating-icon > .form-field-icon {
    position: absolute;
    top: 0;
    left: 0.875rem;
    z-index: 4;
    width: 1.25rem;
    height: calc(3.5rem + calc(var(--bs-border-width) * 2));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
    font-size: 1.1rem;
    pointer-events: none;
}

/* Leading calendar icon inside a PLAIN (non-floating-label) date field —
   e.g. the setlist editor's own "Date" input. Same spirit as
   .form-floating-icon above, just without a label to keep clear of, so a
   single absolutely-centered icon + left-padded input is enough. */
.date-field-icon-wrap {
    position: relative;
}

.date-field-icon-wrap .date-field-icon {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.date-field-icon-wrap input {
    padding-left: 2.25rem;
}

/* settings.php: the tab headers and the tab content below must read as one
   continuous surface, not two separate floating cards — no gap between
   them, and the content panel picks up the exact same background as the
   active tab (Bootstrap's own default) so the seam between them disappears.
   The card look (background/border/shadow/padding) lives here, on the
   shared wrapper, instead of being duplicated inside every tab-pane. */
.settings-tabs .nav-tabs {
    margin-bottom: 0;
}

.settings-tab-content {
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-top: 0;
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
    padding: 1.5rem;
}

/* Each account-tier category is a sub-block inside that single shared
   card/form (one "Enregistrer" button for all of them) — a divider between
   sub-blocks keeps them visually distinct without each needing its own
   card, and extra bottom padding keeps the NEXT block's title from reading
   as glued to THIS block's table. */
.settings-category-block {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.settings-category-block:first-child {
    padding-top: 0;
}

.settings-category-block:last-of-type {
    border-bottom: 0;
    padding-bottom: 1rem;
}

/* Bootstrap ships solid text-bg-* badges but no outline variant — used by
   activite.php's own "Action" column, where a solid color would compete
   too much with the row's other badges (Origine: Web/API). */
.badge-outline-secondary {
    color: var(--bs-secondary-color);
    border: 1px solid var(--bs-border-color);
    background-color: transparent;
    font-weight: 500;
}

/* DataTables' own Bootstrap5 styling right-aligns any "dt-type-date" column
 * (see datatables.min.css's `td.dt-type-date{text-align:right}`) — wrong for
 * our icon-decorated date/heure cells (users.php, activite.php), which read
 * better left-aligned like every other column. Same override for the header
 * cell + un-reversing its flex-direction, so the sort/dropdown icons sit in
 * their usual place instead of mirrored to match the (undesired) right align. */
table.dataTable th.dt-type-date,
table.dataTable td.dt-type-date {
    text-align: left;
}

table.dataTable th.dt-type-date div.dt-column-header {
    flex-direction: row;
}

/* includes/navbar.php's optional per-page title, shown next to the logo
 * instead of the page repeating it in its own <h1> — smaller than the
 * navbar's own font-size (which .fw-bold on .navbar-brand would otherwise
 * apply at full size) and truncated instead of wrapping/overflowing on a
 * narrow phone screen. */
.navbar-page-title {
    display: inline-block;
    font-size: 1rem;
    max-width: 45vw;
}

/* Compact action-button group for a page's title row (Importer/Nouvelle
   partition/Dossier, Renommer/Supprimer dossier, Envoyer invitation,
   Nouvelle setlist, ...) — shared across community.php/library.php/
   setlists.php/communities.php/users.php. MOBILE ONLY: the whole group
   spans the full width available (same effective margin as this page's own
   list-group below it, both sitting inside the same card padding), buttons
   getting an equal share. md+ reverts to the exact plain icon-then-text-
   inline button style used everywhere else in the app — this redesign was
   only ever meant for mobile.

   Two buttons or more: icon centered on top, small label centered below
   (.btn-group-icon-stacked alone). Exactly one button: add
   .btn-group-single-action too — not stacked, plain icon-then-text but
   left-aligned and spanning the row (a lone action button reads better as
   a full-width bar than as a small centered stack). */
.btn-group-icon-stacked {
    display: flex;
    width: 100%;
}

.btn-group-icon-stacked .btn {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    line-height: 1.1;
}

.btn-icon-stacked-label {
    font-size: 0.85rem;
}

.btn-group-icon-stacked.btn-group-single-action .btn {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.5rem;
}

.btn-group-icon-stacked.btn-group-single-action .btn-icon-stacked-label {
    font-size: inherit;
}

@media (min-width: 768px) {
    .btn-group-icon-stacked {
        display: inline-flex;
        width: auto;
    }

    .btn-group-icon-stacked .btn {
        display: inline-block;
        flex: 0 0 auto;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        line-height: inherit;
    }

    .btn-icon-stacked-label {
        font-size: inherit;
    }
}