/*
 * MTT-3290: app-wide refresh of buttons, form fields and dropdowns.
 *
 * One size scale for controls that sit next to each other (toolbars, filter rows,
 * DataTables headers): small = 34px / radius 8, default = 40px / radius 10, with
 * shared hover / focus states and short transitions. Loaded after the theme and
 * custom.css; removing the <link> in layouts/app.blade.php reverts it.
 */

:root {
    --ui-border: #E3EBF6;
    --ui-border-hover: #C6D3E6;
    --ui-text: #283E59;
    --ui-muted: #6E84A3;
    --ui-surface-hover: #F5F8FC;
    --ui-accent: #2de0b5;
    --ui-accent-hover: #26CFA6;
    --ui-accent-soft: rgba(45, 224, 181, .14);
    --ui-focus-ring: 0 0 0 3px rgba(45, 224, 181, .22);
    --ui-radius: 10px;
    --ui-radius-sm: 8px;
    --ui-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

.btn {
    border-radius: var(--ui-radius);
    font-weight: 500;
    transition: background-color .15s var(--ui-ease), border-color .15s var(--ui-ease),
        color .15s var(--ui-ease), box-shadow .15s var(--ui-ease), transform .1s var(--ui-ease);
}

.btn:not(:disabled):not(.disabled):active {
    transform: translateY(1px);
}

.btn:focus-visible,
.btn.focus {
    box-shadow: var(--ui-focus-ring);
}

/* No ring after a mouse click, only for keyboard focus. */
.btn:focus:not(:focus-visible) {
    box-shadow: none;
}

.btn-sm,
.btn-group-sm > .btn {
    padding: 6px 12px;
    font-size: 13px;
    line-height: 20px;
    border-radius: var(--ui-radius-sm);
}

/* A .btn-group that holds a single button (usually button + .dropdown-menu) is not a
   real group: Bootstrap squares the button's right corners because the menu comes
   after it. Keep all corners rounded; real multi-button groups are unaffected. */
.btn-group:not(:has(> .btn ~ .btn)) > .btn {
    border-radius: var(--ui-radius);
}

.btn-group:not(:has(> .btn ~ .btn)) > .btn-sm,
.btn-group-sm:not(:has(> .btn ~ .btn)) > .btn {
    border-radius: var(--ui-radius-sm);
}

/* Icon glyphs inside buttons: don't let the icon font's line box make the button taller
   than its text-only neighbours. */
.btn .fe {
    line-height: 1;
    vertical-align: -0.1em;
}

.btn-link {
    font-weight: 500;
}

.btn-link:active {
    transform: none;
}

/* Primary (mint): slightly deeper on hover, soft lift. */
.btn-primary:not(:disabled):not(.disabled):hover,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: var(--ui-accent-hover);
    border-color: var(--ui-accent-hover);
}

.btn-primary:not(:disabled):not(.disabled):hover {
    box-shadow: 0 4px 12px rgba(45, 224, 181, .28);
}

.btn-primary:focus-visible,
.btn-primary.focus {
    box-shadow: var(--ui-focus-ring);
}

.btn-primary:focus:not(:focus-visible):not(:hover) {
    box-shadow: none;
}

/* Other mint CTAs share the btn-primary hover (slightly deeper mint + soft lift):
   .green-button (myTeam membership pages) used an opacity fade, .next-button
   (registration) had no hover, SweetAlert confirms use an inline colour. */
.btn.green-button,
.btn.next-button {
    background-color: var(--ui-accent);
    border-color: var(--ui-accent);
    color: var(--mt-on-accent, #283E59);
}

.btn.green-button:not(:disabled):not(.disabled):hover,
.btn.next-button:not(:disabled):not(.disabled):hover {
    background-color: var(--ui-accent-hover);
    border-color: var(--ui-accent-hover);
    color: var(--mt-on-accent, #283E59);
    box-shadow: 0 4px 12px rgba(45, 224, 181, .28);
    opacity: 1;
}

.swal2-popup .swal2-styled.swal2-confirm[style*="rgb(4, 224, 181)"]:hover {
    background-color: var(--ui-accent-hover) !important;
    background-image: none;
    box-shadow: 0 4px 12px rgba(45, 224, 181, .28);
}

/* Neutral buttons: white / light / outline-secondary share one look. */
.btn-white,
.btn-outline-secondary {
    background-color: #fff;
    border-color: var(--ui-border);
    color: var(--ui-text);
}

.btn-white:hover,
.btn-outline-secondary:hover,
.btn-white:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.show > .btn-white.dropdown-toggle,
.show > .btn-outline-secondary.dropdown-toggle {
    background-color: var(--ui-surface-hover);
    border-color: var(--ui-border-hover);
    color: #12263F;
}

.btn-light {
    background-color: #EDF2F9;
    border-color: #EDF2F9;
    color: var(--ui-text);
}

.btn-light:hover,
.btn-light:not(:disabled):not(.disabled):active {
    background-color: #E3EBF6;
    border-color: #E3EBF6;
    color: #12263F;
}

.btn-outline-primary {
    border-color: rgba(45, 224, 181, .7);
}

.btn-outline-primary:hover {
    border-color: var(--ui-accent);
}

/* ------------------------------------------------------------------ */
/* Form fields                                                         */
/* ------------------------------------------------------------------ */

.form-control,
.custom-select {
    border-color: var(--ui-border);
    border-radius: var(--ui-radius);
    color: var(--ui-text);
    transition: border-color .15s var(--ui-ease), box-shadow .15s var(--ui-ease),
        background-color .15s var(--ui-ease);
}

.form-control:hover:not(:disabled):not([readonly]):not(:focus),
.custom-select:hover:not(:disabled):not(:focus) {
    border-color: var(--ui-border-hover);
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--ui-accent);
    box-shadow: var(--ui-focus-ring);
}

.form-control::placeholder {
    color: #A6B5CC;
}

.form-control-sm,
.custom-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .custom-select {
    border-radius: var(--ui-radius-sm);
    font-size: 13px;
}

.form-control-sm:not(textarea):not([multiple]):not([size]),
.input-group-sm > .form-control:not(textarea) {
    height: 34px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.custom-select-sm:not([multiple]):not([size]),
.input-group-sm > .custom-select:not([multiple]):not([size]) {
    height: 34px;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Input groups keep their joined edges. */
.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group-text {
    border-color: var(--ui-border);
    border-radius: var(--ui-radius);
}

/* Merged input groups (password eye toggle, search icon, ...): the theme paints the
   prepended/appended segment #2C7BE5 when the input is focused. Keep every segment in the
   same state colour as the input. Validation colours (.is-valid / .is-invalid from the
   theme, .border-danger !important) still win. */
.input-group.input-group-merge > .form-control ~ [class*=input-group] > .input-group-text {
    transition: border-color .15s var(--ui-ease);
}

.input-group.input-group-merge:hover > .form-control:not(:disabled):not([readonly]):not(:focus):not(.is-valid):not(.is-invalid),
.input-group.input-group-merge:hover > .form-control:not(:disabled):not([readonly]):not(:focus):not(.is-valid):not(.is-invalid) ~ [class*=input-group] > .input-group-text {
    border-color: var(--ui-border-hover);
}

.input-group.input-group-merge > .form-control:focus:not(.is-valid):not(.is-invalid) ~ [class*=input-group] > .input-group-text {
    border-color: var(--ui-accent);
}

/* Checkboxes / radios / switches in brand mint. */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--ui-accent);
    border-color: var(--ui-accent);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: var(--ui-focus-ring);
}

.custom-control-label::before {
    transition: background-color .15s var(--ui-ease), border-color .15s var(--ui-ease),
        box-shadow .15s var(--ui-ease);
}

/* ------------------------------------------------------------------ */
/* select2                                                             */
/* ------------------------------------------------------------------ */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 34px;
    border-color: var(--ui-border);
    border-radius: var(--ui-radius-sm);
    transition: border-color .15s var(--ui-ease), box-shadow .15s var(--ui-ease);
}

.select2-container--default .select2-selection--single {
    height: 34px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px;
    color: var(--ui-text);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px;
}

.select2-container--default:hover .select2-selection--single,
.select2-container--default:hover .select2-selection--multiple {
    border-color: var(--ui-border-hover);
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--ui-accent);
    box-shadow: var(--ui-focus-ring);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    border: 0;
    border-radius: 999px;
    background-color: var(--ui-accent-soft);
    color: var(--ui-text);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--ui-muted);
}

.select2-dropdown {
    overflow: hidden;
    border-color: rgba(18, 38, 63, .08);
    border-radius: var(--ui-radius-sm);
    box-shadow: 0 12px 32px rgba(18, 38, 63, .14);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--ui-accent-soft);
    color: #12263F;
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
    background-color: #F3F6FA;
    font-weight: 500;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: var(--ui-border);
    border-radius: var(--ui-radius-sm);
}

/* ------------------------------------------------------------------ */
/* Dropdown menus                                                      */
/* ------------------------------------------------------------------ */

.dropdown-menu {
    padding: 6px;
    border-color: rgba(18, 38, 63, .08);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(18, 38, 63, .14);
}

.dropdown-menu.show {
    animation: ui-dropdown-in .16s var(--ui-ease);
}

/* Open menus in page content sit above the fixed header (z-index 2000): a long menu that Popper
   opens upwards on a short screen (e.g. the athletes "⋮" actions) stays fully visible instead of
   sliding under the header. No max-height here: only a menu taller than the window gets one
   (inline, set by the placement handler in layouts/header) plus .dropdown-menu--scroll below. */
.main-content .dropdown-menu.show {
    z-index: 2010;
}

/* Menus taller than the window (see the placement handler in layouts/header): scroll inside,
   without scrolling the page once the end of the list is reached. */
.dropdown-menu.dropdown-menu--scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* `translate` (not `transform`) so Popper's inline transform keeps working. */
@keyframes ui-dropdown-in {
    from {
        opacity: 0;
        translate: 0 -4px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

.dropdown-item {
    border-radius: var(--ui-radius-sm);
    color: var(--ui-text);
    transition: background-color .12s var(--ui-ease), color .12s var(--ui-ease);
}

.dropdown-item:not(p):hover,
.dropdown-item:not(p):focus {
    background-color: #F3F6FA;
    color: #12263F;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--ui-accent-soft);
    color: #12263F;
}

.dropdown-divider {
    margin: 6px 0;
    border-top-color: #EDF2F9;
}

/* ------------------------------------------------------------------ */
/* Pagination (DataTables etc.)                                        */
/* ------------------------------------------------------------------ */

.page-link {
    border-color: var(--ui-border);
    color: var(--ui-text);
    transition: background-color .15s var(--ui-ease), color .15s var(--ui-ease);
}

.page-link:hover {
    background-color: var(--ui-surface-hover);
    border-color: var(--ui-border);
    color: #12263F;
}

.page-link:focus {
    box-shadow: var(--ui-focus-ring);
}

.page-item:first-child .page-link {
    border-top-left-radius: var(--ui-radius-sm);
    border-bottom-left-radius: var(--ui-radius-sm);
}

.page-item:last-child .page-link {
    border-top-right-radius: var(--ui-radius-sm);
    border-bottom-right-radius: var(--ui-radius-sm);
}

/* ------------------------------------------------------------------ */
/* Period / season picker (resources/js/components/PeriodCalendar.vue) */
/* ------------------------------------------------------------------ */

/* Inline mode (:dropdown-view="false", e.g. inside the filters drawer): flat, full width. */
.dropdown.period_calendar_wrapper > .dropdown-menu.d-block {
    position: static;
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    animation: none;
}

/* Dropdown mode: a little more breathing room in the popup. */
.dropdown.period_calendar_wrapper > .dropdown-menu:not(.d-block) {
    padding: 12px !important;
}

/* Section labels: title, "Σεζόν", period text. */
.dropdown.period_calendar_wrapper .dropdown-menu > h4,
.dropdown.period_calendar_wrapper .dropdown-menu > p,
.dropdown.period_calendar_wrapper .dropdown-menu label[for="season_select"] {
    margin: 0 0 8px;
    padding: 0 !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ui-muted);
}

/* Quick ranges: even two-column grid of tiles. */
.dropdown.period_calendar_wrapper .dropdown-menu > .row:has(> .dropdown-item) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100% !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
}

.dropdown.period_calendar_wrapper .dropdown-menu > .row > .dropdown-item {
    display: flex;
    align-items: center;
    flex: none;
    width: auto;
    max-width: none;
    min-height: 38px;
    margin: 0;
    padding: 8px 12px !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius);
    background-color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ui-text);
    white-space: normal;
    transition: background-color .15s var(--ui-ease), border-color .15s var(--ui-ease),
        color .15s var(--ui-ease);
}

.dropdown.period_calendar_wrapper .dropdown-menu > .row > .dropdown-item:hover,
.dropdown.period_calendar_wrapper .dropdown-menu > .row > .dropdown-item:focus {
    background-color: var(--ui-accent-soft);
    border-color: rgba(45, 224, 181, .55) !important;
    color: #12263F;
}

.dropdown.period_calendar_wrapper .dropdown-menu > .row > .dropdown-item:active {
    transform: translateY(1px);
}

.dropdown.period_calendar_wrapper .dropdown-menu > .dropdown-divider {
    margin: 14px 0;
}

/* Season select (SeasonSelect.vue): drop its side paddings so everything lines up. */
.dropdown.period_calendar_wrapper .dropdown-menu > div:has(> #season_select) {
    margin: 0 !important;
    padding: 0 !important;
}

.dropdown.period_calendar_wrapper .dropdown-menu > div:has(> #season_select) > hr {
    margin: 14px 0;
    border-top-color: #EDF2F9;
}

.dropdown.period_calendar_wrapper #season_select {
    height: 40px;
}

/* From / to dates side by side, same gap as the tiles. */
.dropdown.period_calendar_wrapper .dropdown-menu > .row:has(.dp__main) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
}

.dropdown.period_calendar_wrapper .dropdown-menu > .row:has(.dp__main) > [class*="col-"] {
    flex: none;
    max-width: none;
    width: auto;
    margin: 0 !important;
    padding: 0 !important;
}

.dropdown.period_calendar_wrapper .dp__input {
    height: 40px;
    border-color: var(--ui-border);
    border-radius: var(--ui-radius);
    color: var(--ui-text);
    transition: border-color .15s var(--ui-ease), box-shadow .15s var(--ui-ease);
}

.dropdown.period_calendar_wrapper .dp__input:hover {
    border-color: var(--ui-border-hover);
}

.dropdown.period_calendar_wrapper .dp__input_focus {
    border-color: var(--ui-accent);
    box-shadow: var(--ui-focus-ring);
}

/* OK / Clear: equal-width pair under the dates. */
.dropdown.period_calendar_wrapper .dropdown-menu > div:has(> .btn) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0 0 !important;
    padding: 0 !important;
}

.dropdown.period_calendar_wrapper .dropdown-menu > div:has(> .btn) > .btn {
    margin: 0 !important;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius-sm) !important;
}

/* ------------------------------------------------------------------ */
/* Subscription summary lists                                          */
/* ------------------------------------------------------------------ */

/* Compact numbered subscription list ("subscriptions created" and "mass payment" modals). */
.created-subs__label {
    display: flex;
    align-items: center;
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6E84A3;
}

.created-subs__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-left: 8px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(45, 224, 181, .16);
    color: #0E9E86;
    font-size: 11px;
    letter-spacing: 0;
}

.created-subs {
    max-height: 50vh;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    border: 1px solid #E3EBF6;
    border-radius: 10px;
}

.created-subs__item {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 14px;
}

.created-subs__item + .created-subs__item {
    border-top: 1px solid #EDF2F9;
}

.created-subs__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin-right: 12px;
    border-radius: 999px;
    background: #F3F6FA;
    color: #6E84A3;
    font-size: 11px;
    font-weight: 700;
}

.created-subs__main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.created-subs__title {
    font-size: 14px;
    font-weight: 600;
    color: #12263F;
}

.created-subs__period {
    font-size: 13px;
    color: #6E84A3;
    white-space: nowrap;
}

.created-subs__amount {
    flex: 0 0 auto;
    margin-left: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #283E59;
    white-space: nowrap;
}
    

.created-subs__count--danger {
    background: rgba(230, 55, 87, .12);
    color: #C42D49;
}

/* ------------------------------------------------------------------ */
/* PDF download tile (resources/views/components/icons/pdf-download)   */
/* ------------------------------------------------------------------ */

.pdf-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(45, 224, 181, .6);
    border-radius: 50%;
    background-color: var(--ui-accent-soft);
    color: #0E9E86;
    transition: background-color .15s var(--ui-ease), color .15s var(--ui-ease),
        border-color .15s var(--ui-ease), box-shadow .15s var(--ui-ease);
}

a:hover > .pdf-download,
a:focus-visible > .pdf-download {
    border-color: var(--ui-accent);
    background-color: var(--ui-accent);
    color: #283E59;
    box-shadow: 0 4px 12px rgba(45, 224, 181, .28);
}

/* ------------------------------------------------------------------ */
/* "Make sure before you proceed" confirmation box (.pre-confirm-box)  */
/* add_subscription, mass_update_subscriptions, notify_modal,          */
/* PreConfirmBoxPartial.vue, CustomSubscriptionModal.vue, copy teams,  */
/* mass copy permissions. Overrides custom.css:889-935.                */
/* ------------------------------------------------------------------ */

.pre-confirm-box,
.alert.pre-confirm-box {
    position: relative;
    padding: 16px 18px 16px 58px;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    background-color: #F7F9FC; /* same soft grey as the invitation notice */
    color: #3B506C;
    font-size: 14px;
    line-height: 1.6;
    transition: border-color .2s var(--ui-ease), background-color .2s var(--ui-ease);
}

.pre-confirm-box::before {
    content: "\e902"; /* Feather alert-circle */
    position: absolute;
    top: 14px;
    left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background-color: #FFF8E6;
    color: #D9A406;
    font-family: 'Feather';
    font-size: 16px;
    line-height: 1;
    transition: background-color .2s var(--ui-ease), color .2s var(--ui-ease);
}

.pre-confirm-box .title,
.pre-confirm-box > h3 {
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: #12263F;
}

/* Summary lines: wrap with even gaps instead of ml-md-2 margins. */
.pre-confirm-box .d-md-flex,
.pre-confirm-box .d-sm-flex {
    flex-wrap: wrap;
    gap: 6px;
}

.pre-confirm-box .d-md-flex > [class*="ml-md-"],
.pre-confirm-box .d-sm-flex > [class*="ml-sm-"] {
    margin-left: 0 !important;
}

.pre-confirm-info-box {
    display: inline-flex;
    align-items: center;
    /* Flex drops the whitespace between "<span>0</span> Συνδρομές"; restore it. */
    column-gap: .3em;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: #EAF2FD;
    color: #1D4F91;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.pre-confirm-info-box .small {
    font-size: inherit;
}

.pre-confirm-divider {
    height: 1px;
    background: #EDF2F9;
}

/* Acceptance checkbox */
[type='checkbox'].pre-confirm-accept-checkbox {
    flex: 0 0 auto;
    width: 18px !important;
    height: 18px !important;
    margin: 0;
    padding: 0;
    border: 1.5px solid #C6D3E6;
    border-radius: 5px;
    outline: 0;
    background: #fff center / 12px 12px no-repeat;
    cursor: pointer;
    transition: background-color .15s var(--ui-ease), border-color .15s var(--ui-ease),
        box-shadow .15s var(--ui-ease);
}

[type='checkbox'].pre-confirm-accept-checkbox:hover {
    border-color: var(--ui-accent);
}

[type='checkbox'].pre-confirm-accept-checkbox:focus-visible {
    box-shadow: var(--ui-focus-ring);
}

input[type='checkbox'].pre-confirm-accept-checkbox:checked {
    border-color: var(--ui-accent);
    background-color: var(--ui-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5' fill='none' stroke='%2312263F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

input[type='checkbox'].pre-confirm-accept-checkbox:checked::after {
    content: none;
}

.pre-confirm-box label.title,
.pre-confirm-box [for="pre-confirm-accept-checkbox"] {
    margin: 0 0 0 10px !important;
    padding-top: 0 !important;
    font-size: 14px;
    font-weight: 600;
    color: #283E59;
    cursor: pointer;
}

.pre-confirm-box .custom-control-label {
    font-weight: 600;
    color: #283E59;
}

/* Accepted: the box turns mint and the icon becomes a check. */
.pre-confirm-box:has(input[type="checkbox"]:checked) {
    border-color: rgba(45, 224, 181, .6);
    background-color: #F5FDFA;
}

.pre-confirm-box:has(input[type="checkbox"]:checked)::before {
    content: "\e92c"; /* Feather check-circle */
    background-color: var(--ui-accent-soft);
    color: #0E9E86;
}

.pre-confirm-box:has(input[type="checkbox"]:checked) .pre-confirm-divider {
    background: rgba(45, 224, 181, .25);
}

@media (max-width: 575.98px) {
    .pre-confirm-box,
    .alert.pre-confirm-box {
        padding-left: 18px;
        padding-top: 54px;
    }
}

/* Inactive own profile card header (ProfileCard.vue): slate blue so the white club
   name and menu dots stay readable (was the near-white bg-dark-soft). */
.bg-profile-inactive {
    background-color: #95AAC9 !important;
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .form-control,
    .custom-select,
    .dropdown-item,
    .page-link {
        transition: none;
    }

    .dropdown-menu.show {
        animation: none;
    }
}

/* Long "⋮" menus opened beside their toggle (see the placement handler in layouts/header):
   a small gap so the menu never touches or hides the toggle. */
.main-content .dropleft > .dropdown-menu {
    margin-right: 8px;
}

/* "⋮" / "⋯" action toggles are icon-only: always a square, whatever the cell's line-height. */
.btn:has(> .fe-more-vertical:only-child),
.btn:has(> .fe-more-horizontal:only-child) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    line-height: 1;
}

.btn-sm:has(> .fe-more-vertical:only-child),
.btn-sm:has(> .fe-more-horizontal:only-child) {
    width: 34px;
    height: 34px;
}

/* Row expand control (DataTables child rows): soft circle with a chevron that turns when open.
   Replaces details_open/close.png, which layouts/app and several pages still set inline. */
td.details-control,
td.app-details-control,
td.app-send-details-control {
    background-image: none !important;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
}

td.details-control::before,
td.app-details-control::before,
td.app-send-details-control::before {
    content: "\e930"; /* Feather chevron-right */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #F1F4F8;
    color: #6E84A3;
    font-family: Feather;
    font-size: 15px;
    line-height: 1;
    transition: transform .2s var(--ui-ease), background-color .15s var(--ui-ease), color .15s var(--ui-ease);
}

td.details-control:hover::before,
td.app-details-control:hover::before,
td.app-send-details-control:hover::before,
tr.shown td.details-control::before,
tr.shown td.app-details-control::before,
tr.shown td.app-send-details-control::before {
    background-color: #E3FAF4;
    color: #0E9E86;
}

tr.shown td.details-control::before,
tr.shown td.app-details-control::before,
tr.shown td.app-send-details-control::before {
    transform: rotate(90deg);
}

/* Household create/edit header (clubs/households): back link, left-aligned title, short intro. */
.household-form-header {
    padding-top: 24px;
    padding-bottom: 8px;
}

.household-form-header__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #6E84A3;
}

.household-form-header__back:hover {
    color: #12263F;
    text-decoration: none;
}

.household-form-header__title {
    margin-bottom: 4px;
    font-size: 22px;
    font-weight: 600;
    color: #12263F;
}

.household-form-header__text {
    margin-bottom: 0;
    font-size: 14px;
    color: #6E84A3;
}

/* Household section on athlete/parent profile and edit (components/user/household_members). */
.household-section {
    overflow: hidden;
    border: 1px solid #E3EBF6;
    border-radius: 12px;
    box-shadow: none;
}

.household-section__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #EDF2F9;
}

.household-section__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background-color: #E8E4FB;
    color: #4026B2;
}

.household-section__heading {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.household-section__title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #12263F;
}

.household-section__count {
    font-size: 12px;
    color: #6E84A3;
}

.household-section__edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    margin-left: auto;
    border: 1px solid #E3EBF6;
    border-radius: 8px;
    color: #6E84A3;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.household-section__edit:hover {
    border-color: #2DE0B5;
    background-color: #EEFBF7;
    color: #0E9E86;
    text-decoration: none;
}

.household-section__table {
    margin-bottom: 0;
}

.household-section__table td {
    vertical-align: middle;
}

.household-section__member {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #12263F;
}

.household-section__member:hover {
    text-decoration: none;
}

.household-section__member:hover .household-section__name {
    color: #0E9E86;
}

.household-section__name {
    font-weight: 500;
    transition: color .15s ease;
}

/* Role colours: athletes mint, parents purple, others neutral. */
.household-section__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #EDF2F9;
    color: #6E84A3;
    font-size: 12px;
    font-weight: 600;
}

.household-section__avatar.is-athlete {
    background-color: #D5F5EC;
    color: #0B7A65;
}

.household-section__avatar.is-parent {
    background-color: #E8E4FB;
    color: #4026B2;
}

.household-section__role {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: #F1F4F8;
    color: #6E84A3;
    font-size: 12px;
    font-weight: 500;
}

.household-section__role::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}

.household-section__role.is-athlete {
    background-color: #EEFBF7;
    color: #0B7A65;
}

.household-section__role.is-parent {
    background-color: #F0EDFD;
    color: #4026B2;
}

.household-section__owner {
    padding: 1px 8px;
    border-radius: 999px;
    background-color: #FFF4D6;
    color: #8A6100;
    font-size: 11px;
    font-weight: 500;
}

/* Profile pretitle as a "← role list" link (components/profile-pretitle). */
.profile-pretitle-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    transition: color .15s ease;
}

.profile-pretitle-link .fe {
    transition: transform .15s ease;
}

.profile-pretitle-link:hover {
    color: #12263F;
    text-decoration: none;
}

.profile-pretitle-link:hover .fe {
    transform: translateX(-2px);
}

/* Period button (PeriodCalendar): same look as the "Φίλτρα" button, mint when a period is set. */
.periodButton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px 0 14px;
    border: 1px solid #E3EBF6;
    border-radius: 8px;
    background-color: #FFFFFF;
    color: #283E59;
    font-weight: 500;
    white-space: nowrap;
}

.periodButton .fe-calendar {
    color: #6E84A3;
}

.periodButton.is-active {
    background-color: rgba(45, 224, 181, .12);
    border-color: rgba(45, 224, 181, .55);
    color: #283E59;
}

.periodButton.is-active:hover,
.show > .periodButton.is-active {
    background-color: rgba(45, 224, 181, .2);
    border-color: rgba(45, 224, 181, .7);
}

/* Date filter bar (payments pages): period + "Προβολή" joined, reset as a quiet icon. */
.date-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 0;
}

.date-filter-bar > .period_calendar_wrapper > .periodButton {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.date-filter-bar__apply {
    display: inline-flex;
    align-items: center;
    height: 34px;
    margin-left: -1px;
    padding: 0 16px;
    border: 1px solid #2DE0B5;
    border-radius: 0 8px 8px 0;
    background-color: #2DE0B5;
    color: #12263F;
    font-weight: 600;
}

.date-filter-bar__apply:hover,
.date-filter-bar__apply:focus {
    border-color: #1FCBA2;
    background-color: #1FCBA2;
    color: #12263F;
    box-shadow: none;
}

.date-filter-bar__reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-left: 6px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #6E84A3;
}

.date-filter-bar__reset:hover,
.date-filter-bar__reset:focus {
    border-color: #E3EBF6;
    background-color: #F5F8FC;
    color: #12263F;
    box-shadow: none;
}

/* Checkboxes: one look everywhere. Mint box with a dark tick when checked.
   Native checkboxes (table row selects, Vue lists, .input-checkbox, .pre-confirm-accept-checkbox)
   are redrawn; Bootstrap custom-control checkboxes get the same colours and the dark tick. */
input[type="checkbox"]:not(.custom-control-input):not(.d-none):not(.sr-only) {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    flex: 0 0 18px;
    width: 18px !important;
    height: 18px !important;
    margin: 0;
    padding: 0;
    border: 1.5px solid #B1C2D9;
    border-radius: 5px;
    outline: none;
    background: #FFFFFF center / 12px 12px no-repeat;
    box-shadow: none;
    vertical-align: middle;
    cursor: pointer;
    transform: none;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

input[type="checkbox"]:not(.custom-control-input):not(.d-none):not(.sr-only)::before,
input[type="checkbox"]:not(.custom-control-input):not(.d-none):not(.sr-only)::after {
    content: none;
}

input[type="checkbox"]:not(.custom-control-input):not(.d-none):not(.sr-only):hover {
    border-color: #2DE0B5;
}

input[type="checkbox"]:not(.custom-control-input):not(.d-none):not(.sr-only):focus-visible {
    box-shadow: 0 0 0 3px rgba(45, 224, 181, .3);
}

input[type="checkbox"]:not(.custom-control-input):not(.d-none):not(.sr-only):checked {
    border-color: #2DE0B5;
    background-color: #2DE0B5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%2312263F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

input[type="checkbox"]:not(.custom-control-input):not(.d-none):not(.sr-only):indeterminate {
    border-color: #2DE0B5;
    background-color: #2DE0B5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' fill='none' stroke='%2312263F' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

input[type="checkbox"]:not(.custom-control-input):not(.d-none):not(.sr-only):disabled {
    opacity: .5;
    cursor: not-allowed;
}

.custom-checkbox .custom-control-label::before {
    border: 1.5px solid #B1C2D9;
    border-radius: 5px;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%2312263F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
    border-color: var(--ui-accent);
    background-color: var(--ui-accent);
}

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' fill='none' stroke='%2312263F' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Actions menus (list bulk actions and row "⋮" menus): soft tile behind each icon, optional section headers. */
.bulk-actions-menu {
    min-width: 220px;
    padding: 6px;
}

.bulk-actions-menu .dropdown-header {
    padding: 8px 10px 4px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #95AAC9;
}

.bulk-actions-menu .dropdown-divider {
    margin: 4px 6px;
}

.bulk-actions-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    border-radius: 8px;
}

.bulk-actions-menu .dropdown-item > .fe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background-color: #F1F4F8;
    color: #6E84A3;
    font-size: 14px;
    transition: background-color .15s ease, color .15s ease;
}

.bulk-actions-menu .dropdown-item:hover > .fe,
.bulk-actions-menu .dropdown-item:focus > .fe {
    background-color: #E3FAF4;
    color: #0E9E86;
}

/* Event popover on the facilities calendar (components/renders/event_simple, tippy v4 light-border theme). */
/* light-border.css (only loaded by that page) also puts a heavy square shadow on .tippy-content,
   which showed outside the rounded corners; applied to the whole theme so the loading state matches. */
.tippy-popper > .tippy-tooltip.light-border-theme {
    border: 1px solid #E3EBF6;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(18, 38, 63, .08);
}

.tippy-tooltip.light-border-theme > .tippy-content {
    border-radius: 12px;
    box-shadow: none;
}

.tippy-tooltip.light-border-theme > .tippy-content:has(.event-popover) {
    padding: 0;
}

.event-popover {
    width: 300px;
    max-width: calc(100vw - 32px);
    padding: 12px 14px 14px;
    color: #12263F;
    font-size: 13px;
}

.event-popover__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
}

.event-popover__action,
.event-popover__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background-color: #F5F8FC;
    color: #6E84A3;
    font-size: 15px;
    transition: background-color .15s ease, color .15s ease;
}

.event-popover__action:hover {
    background-color: #E3FAF4;
    color: #0E9E86;
    text-decoration: none;
}

.event-popover__action--danger:hover {
    background-color: #FDF2F4;
    color: #D9536B;
}

.event-popover__close {
    margin-left: 4px;
    background-color: transparent;
}

.event-popover__close:hover {
    background-color: #F5F8FC;
    color: #12263F;
}

.event-popover__head {
    margin-top: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid #EDF2F9;
}

.event-popover__title {
    margin-bottom: 4px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: #12263F;
}

.event-popover__when {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: #6E84A3;
    font-size: 12.5px;
}

.event-popover__when .fe {
    margin-top: 2px;
}

.event-popover__details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.event-popover__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.45;
}

.event-popover__row > div {
    padding-top: 3px;
    min-width: 0;
}

.event-popover__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background-color: #F1F4F8;
    color: #6E84A3;
    font-size: 13px;
}

.event-popover__more {
    color: #6E84A3;
}

/* No size/padding animation inside the popover; the tooltip itself just fades in. */
.tippy-tooltip.light-border-theme > .tippy-content {
    transition: none;
}

.event-details.is-loading-popover {
    cursor: progress;
}

/* Menu items rendered as <a> without href (e.g. Vue triggers like "Νέα αγορά") get the same colour as the rest. */
.bulk-actions-menu a.dropdown-item:not([href]):not(:hover):not(:focus) {
    color: #283E59;
}

/* KPI cards (components/stat-card): label + number left, icon in a tinted tile right. */
/* Same height, corners and shadow as the dashboard shortcut cards (dashboard_refresh.css .action-card). */
.stat-card {
    height: calc(100% - 1.5rem);
    border: 1px solid #E3EBF6;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(18, 38, 63, .04), 0 4px 16px rgba(18, 38, 63, .04) !important;
}

.stat-card__body {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
}

.stat-card__text {
    flex: 1;
    min-width: 0;
    /* Lets .stat-card__value size itself to the card (cqi). */
    container-type: inline-size;
}

.stat-card__label {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 14px;
    margin-bottom: 3px;
    line-height: 1.2;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6E84A3;
}

/* The tooltip trigger inside the label must not make the row taller. */
.stat-card__label > * {
    line-height: 1;
}

.stat-card__value {
    display: block;
    font-size: 22px;
    /* Shrinks in narrow cards (three-up .charges-totals at 768–1200px) so "1.234.567,89 €"
       still fits; it may wrap before the currency sign but never inside the number. */
    font-size: clamp(16px, 14cqi, 22px);
    font-weight: 600;
    line-height: 1.15;
    color: #12263F;
}

.stat-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: #F1F4F8;
    color: #6E84A3;
    font-size: 20px;
}

.stat-card__icon--mint   { background-color: #E3FAF4; color: #0E9E86; }
.stat-card__icon--blue   { background-color: #EAF2FF; color: #2C7BE5; }
.stat-card__icon--purple { background-color: #F0EDFD; color: #4026B2; }
.stat-card__icon--red    { background-color: #FDF2F4; color: #D9536B; }
.stat-card__icon--amber  { background-color: #FFF4D6; color: #B7791F; }

.stat-card__hint {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #95AAC9;
}

/* Text instead of a number (e.g. survey type): smaller and allowed to wrap. */
.stat-card__value--text {
    font-size: 15px;
    white-space: normal;
}

/* Charges totals (income subscriptions → charges): three KPI cards in a row. */
.charges-totals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

@media (max-width: 767.98px) {
    .charges-totals {
        grid-template-columns: minmax(0, 1fr);
    }
}

.charges-totals .stat-card {
    height: 100%;
}

/* Single total (income / expenses tables) shown as one KPI card. */
.income-total-card {
    max-width: 340px;
}

/* Totals sit above the table card (under the tabs), on the page background: white KPI cards. */
.income-stats--top:empty {
    display: none;
}

.income-stats--top .charges-totals,
.income-stats--top .income-total-card {
    margin-bottom: 24px;
}

/* Club balance charts (clubs/billing/partials/balance_charts). */
.balance-chart {
    position: relative;
}

.balance-chart--monthly {
    height: 260px;
}

/* Discreet toggle above the chart (same look as the "Φίλτρα" button); opens / closes the chart card. */
.balance-chart-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    margin-bottom: 12px;
    padding: 0 12px;
    border: 1px solid #E3EBF6;
    border-radius: 8px;
    background-color: #FFFFFF;
    color: #283E59;
    font-size: 13px;
    font-weight: 500;
    transition: background-color .15s ease, border-color .15s ease;
}

.balance-chart-toggle:hover,
.balance-chart-toggle:focus {
    border-color: #D2DDEC;
    background-color: #F5F8FC;
    outline: none;
}

.balance-chart-toggle:focus-visible {
    box-shadow: var(--ui-focus-ring);
}

.balance-chart-toggle .fe-bar-chart-2 {
    color: #0E9E86;
}

.balance-chart-toggle__chevron {
    color: #95AAC9;
    transition: transform .2s ease;
}

.balance-chart-toggle.is-collapsed .balance-chart-toggle__chevron {
    transform: rotate(180deg);
}

.balance-chart-legend {
    justify-content: flex-end;
    margin-bottom: 8px;
}