/* --- Top action buttons: calm down neon colours on ANY viewport.
   Subtle outline-style row with only the leading icon keeping the
   category colour (primary/success/danger/warning). --- */

.top_buttons_crudTable,
[class*="top_buttons_"] {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    align-items: center;
}

[class*="top_buttons_"] > .btn,
[class*="top_buttons_"] a.btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    margin: 0 !important;
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06) !important;
    color: var(--tblr-body-color, #1e293b) !important;
    border-width: 1px;
    border-style: solid;
    transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease;
}

[class*="top_buttons_"] > .btn:hover,
[class*="top_buttons_"] a.btn:hover,
[class*="top_buttons_"] > .btn:focus,
[class*="top_buttons_"] a.btn:focus {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.10) !important;
    color: var(--tblr-body-color, #1e293b) !important;
}

/* Category accents: tinted background + matching border + coloured icon */
[class*="top_buttons_"] .btn-primary {
    background: rgba(86, 108, 214, 0.10) !important;
    border-color: rgba(86, 108, 214, 0.35) !important;
}
[class*="top_buttons_"] .btn-primary:hover { background: rgba(86, 108, 214, 0.18) !important; }
[class*="top_buttons_"] .btn-primary i     { color: #556cd6; }

[class*="top_buttons_"] .btn-success {
    background: rgba(47, 179, 68, 0.10) !important;
    border-color: rgba(47, 179, 68, 0.35) !important;
}
[class*="top_buttons_"] .btn-success:hover { background: rgba(47, 179, 68, 0.18) !important; }
[class*="top_buttons_"] .btn-success i     { color: #2fb344; }

[class*="top_buttons_"] .btn-danger {
    background: rgba(214, 57, 57, 0.10) !important;
    border-color: rgba(214, 57, 57, 0.35) !important;
}
[class*="top_buttons_"] .btn-danger:hover { background: rgba(214, 57, 57, 0.18) !important; }
[class*="top_buttons_"] .btn-danger i     { color: #d63939; }

[class*="top_buttons_"] .btn-warning {
    background: rgba(245, 159, 0, 0.12) !important;
    border-color: rgba(245, 159, 0, 0.4) !important;
}
[class*="top_buttons_"] .btn-warning:hover { background: rgba(245, 159, 0, 0.20) !important; }
[class*="top_buttons_"] .btn-warning i     { color: #f59f00; }

[class*="top_buttons_"] .btn i { font-size: 1.05rem; }

/* --- Mobile tweaks --- */
@media (max-width: 768px) {
    /* Filters: stack vertically but left-align labels, remove centering */
    .navbar-filters .navbar-nav {
        flex-direction: column;
        align-items: stretch !important;
    }

    .navbar-filters .nav-item {
        width: 100%;
    }

    .navbar-filters .nav-item .nav-link {
        text-align: left;
        padding: 0.55rem 0.75rem;
        border-radius: 6px;
    }

    .navbar-filters .nav-item .nav-link:hover {
        background: rgba(86, 108, 214, 0.06);
    }

    /* Narrow viewport: one button per row */
    [class*="top_buttons_"] {
        flex-direction: column;
        align-items: stretch;
    }

    [class*="top_buttons_"] > .btn,
    [class*="top_buttons_"] a.btn {
        width: 100%;
    }

    /* Keep dropdowns inside the viewport on small screens */
    .select2-container .select2-dropdown {
        max-width: calc(100vw - 2rem) !important;
    }

    /* Slight tightening inside the ФИО cell so data-dense rows fit */
    .fio-cell {
        font-size: 0.85rem;
    }

    .fio-cell .stat-pill {
        font-size: 0.7rem;
        padding: 0.1rem 0.35rem;
    }
}

/* --- Filters panel: turn each filter into a chip-style button --- */

.navbar-filters {
    background-color: #fff;
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    border-radius: 10px;
    padding: 0.6rem 0.85rem !important;
    margin-bottom: 0.85rem !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.navbar-filters .navbar-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.45rem;
    column-gap: 0.5rem;
    width: 100%;
    padding-left: 0;
    margin: 0;
    list-style: none;
}

/* Leading filter funnel icon — pure indicator, no border */
.navbar-filters > a.nav-item {
    display: inline-flex;
    align-items: center;
    color: var(--tblr-primary, #556cd6) !important;
    padding: 0 0.25rem;
    font-size: 1.05rem;
}

.navbar-filters .nav-item {
    flex: 0 0 auto;
}

/* Each filter = rounded chip */
.navbar-filters .nav-item .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    border-radius: 999px;
    background: var(--tblr-bg-surface-secondary, #f5f7fb);
    color: var(--tblr-body-color, #1e293b) !important;
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.2;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.navbar-filters .nav-item .nav-link:hover,
.navbar-filters .nav-item .nav-link:focus {
    background: rgba(86, 108, 214, 0.08);
    border-color: rgba(86, 108, 214, 0.3);
    color: var(--tblr-primary, #556cd6) !important;
}

/* Active filter (has a value applied) — primary-tinted chip */
.navbar-filters .nav-item.active > .nav-link,
.navbar-filters .nav-item.active > .dropdown > .nav-link {
    background: rgba(86, 108, 214, 0.15);
    border-color: rgba(86, 108, 214, 0.45);
    color: var(--tblr-primary, #556cd6) !important;
    font-weight: 600;
}

/* Dropdown caret alignment */
.navbar-filters .dropdown-toggle::after {
    margin-left: 0.15rem;
    vertical-align: middle;
    border-top-color: currentColor;
    opacity: 0.7;
}

/* --- Grouped filters (list.filterGroups) --- */

.navbar-filters .filters-grouped {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.35rem 0.75rem;
    width: 100%;
}

.navbar-filters .filter-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.15rem 0.6rem 0.15rem 0.5rem;
    border-radius: 10px;
    background: var(--tblr-bg-surface-secondary, #f5f7fb);
    border: 1px solid var(--tblr-border-color, #e9ecef);
    gap: 0.35rem;
}

.navbar-filters .filter-group-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tblr-secondary, #656d77);
    padding: 0 0.25rem;
}

.navbar-filters .filter-group-items {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.navbar-filters .filter-group-items > .nav-item .nav-link {
    background: #fff;
}

/* "Сбросить фильтры" gets a soft danger look and sits on the right on wide screens */
.navbar-filters .remove_filters_button {
    color: #d63939 !important;
    background: transparent;
    border-color: transparent;
}

.navbar-filters .remove_filters_button:hover {
    background: rgba(214, 57, 57, 0.08);
    border-color: rgba(214, 57, 57, 0.3);
    color: #d63939 !important;
}

@media (min-width: 992px) {
    .navbar-filters .remove_filters_button {
        margin-left: auto;
    }
}

/* Mobile: keep chips in a flowing row (overrides earlier stack rule below) */
@media (max-width: 768px) {
    .navbar-filters {
        padding: 0.55rem !important;
    }

    .navbar-filters .navbar-nav {
        flex-direction: row !important;
        align-items: flex-start !important;
        row-gap: 0.4rem;
    }

    .navbar-filters .nav-item .nav-link {
        padding: 0.3rem 0.6rem;
        font-size: 0.72rem;
    }

    .navbar-filters .remove_filters_button {
        margin-left: auto !important;
    }
}

/*!* --- Alerts: apply the same glass treatment as .card so they don't bleed*/
/*   through the fuzzy-background skin --- *!*/

/*[data-bs-theme=light] .alert {*/
/*    background-color: rgba(255, 255, 255, 0.7);*/
/*    border: 1px solid rgba(255, 255, 255, 0.3);*/
/*    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);*/
/*    backdrop-filter: blur(5px);*/
/*    -webkit-backdrop-filter: blur(5px);*/
/*}*/

/*[data-bs-theme=light] .alert-danger {*/
/*    background-color: rgba(255, 236, 236, 0.85);*/
/*    border-color: rgba(220, 53, 69, 0.25);*/
/*    color: var(--tblr-danger-darker, #842029);*/
/*}*/

/*[data-bs-theme=light] .alert-warning {*/
/*    background-color: rgba(255, 248, 225, 0.85);*/
/*    border-color: rgba(255, 193, 7, 0.25);*/
/*}*/

/*[data-bs-theme=light] .alert-success {*/
/*    background-color: rgba(232, 245, 233, 0.85);*/
/*    border-color: rgba(25, 135, 84, 0.25);*/
/*}*/

/*[data-bs-theme=light] .alert-info {*/
/*    background-color: rgba(225, 240, 250, 0.85);*/
/*    border-color: rgba(13, 110, 253, 0.25);*/
/*}*/

/*[data-bs-theme=dark] .alert {*/
/*    background-color: rgba(30, 35, 45, 0.7);*/
/*    border: 1px solid rgba(255, 255, 255, 0.08);*/
/*    backdrop-filter: blur(5px);*/
/*    -webkit-backdrop-filter: blur(5px);*/
/*}*/

/* --- Taller select2 dropdown for long option lists (e.g. grouped cities) ---
   Need high specificity + !important because select2-bootstrap-theme ships
   its own .select2-results__options { max-height: 200px } rule that loads
   AFTER this file via @push stacks. */

html body .select2-container--bootstrap .select2-results > .select2-results__options,
html body .select2-container--bootstrap .select2-results__options:not(.select2-results__options--nested),
html body .select2-container--bootstrap .select2-results__options[role="listbox"] {
    max-height: 450px !important;
}
.select2-results__group {
    font-weight: 600;
    color: var(--tblr-primary, #556cd6);
    padding: 0.4rem 0.6rem;
    background: var(--tblr-bg-surface-secondary, #f5f7fb);
}

.select2-container--bootstrap .select2-results__group {
    font-size: 14px!important;
    font-weight: 800;
}

.select2-results__option .select2-results__option {
    padding-left: 1.25rem;
}

/* --- Notifications bell badge positioning --- */
/* Legacy BS4 pull-right no longer works in BS5/Tabler v2,
   so anchor the unread-count badge to the top-right of the bell icon. */

.bell-wrapper {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50%;
    color: var(--tblr-secondary, #7a859d);
    line-height: 1 !important;
    transition: background-color 0.15s ease;
    /* override nav-link bottom border/underline + any extra inherited spacing */
    border-bottom: 0 !important;
    box-shadow: none !important;
    text-decoration: none;
}

.bell-wrapper:hover,
.bell-wrapper:focus {
    background-color: var(--tblr-bg-surface-secondary, rgba(0,0,0,0.04));
    color: var(--tblr-primary, #556cd6);
}

.bell-wrapper .la-bell {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    line-height: 1 !important;
    font-size: 1.25rem !important;
}

.bell-wrapper .unreadnotificationscount {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 1rem;
    height: 1rem;
    padding: 0 4px;
    line-height: 1rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    text-align: center;
    border: 1px solid var(--tblr-body-bg, #fff);
}

/* --- Compact status pills in the ФИО list column --- */

.fio-cell .stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.1rem 0.4rem;
    margin-right: 0.2rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
}

.fio-cell .stat-pill i {
    font-size: 0.85rem;
    line-height: 1;
}

.fio-cell .stat-pill--ok {
    background: rgba(25, 135, 84, 0.12);
    color: #146c43;
}

.fio-cell .stat-pill--wait {
    background: rgba(255, 193, 7, 0.18);
    color: #8a6400;
}

.fio-cell .stat-pill--bad {
    background: rgba(220, 53, 69, 0.12);
    color: #b02a37;
}

.fio-cell .tg-icon {
    font-size: 1rem;
    line-height: 1;
    color: #229ed9;
}

.fio-cell .tg-icon--off {
    color: #dc3545;
}

/* --- Город подачи column --- */

.city-cell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    line-height: 1.1;
}

.city-cell .city-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    background: rgba(86, 108, 214, 0.08);
    color: var(--tblr-primary, #556cd6);
    border: 1px solid rgba(86, 108, 214, 0.2);
    white-space: nowrap;
}

.city-cell .city-range {
    margin-top: 0.2rem;
    padding-top: 0.35rem;
    border-top: 1px dashed var(--tblr-border-color, #e6e7e9);
    font-size: 0.75rem;
    color: var(--tblr-secondary, #656d77);
}

.city-cell .city-range i {
    margin-right: 0.25rem;
    color: var(--tblr-primary, #556cd6);
}

/* --- Booked clients: appointment + mail + ticket cells --- */

.appointment-cell {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.15;
}

.appointment-cell i {
    margin-right: 0.3rem;
    color: var(--tblr-primary, #556cd6);
}

.mail-cell {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.78rem;
    line-height: 1.25;
}

.mail-cell__url {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 500;
    color: var(--tblr-primary, #556cd6);
    text-decoration: none;
}

.mail-cell__url:hover {
    text-decoration: underline;
}

.mail-cell__row {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    white-space: nowrap;
}

.mail-cell__value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--tblr-body-color, #1e293b);
    word-break: break-all;
    font-size: 0.75rem;
}

.mail-cell__copy {
    align-self: flex-start;
    margin-top: 0.25rem;
    padding: 0.15rem 0.55rem;
    font-size: 0.72rem;
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    border-radius: 6px;
    background: #fff;
    color: var(--tblr-secondary, #656d77);
}

.mail-cell__copy:hover {
    background: var(--tblr-bg-surface-secondary, #f5f7fb);
    color: var(--tblr-primary, #556cd6);
}

/* --- Client edit page tabs (Редактирование / Видео) --- */

#clientEditTabs {
    border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
    margin-bottom: 1rem !important;
    padding-left: 0;
}

#clientEditTabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 0.6rem 1rem;
    color: var(--tblr-secondary, #656d77);
    background: transparent;
    border-radius: 0;
    font-weight: 500;
    transition: color 0.15s ease, border-color 0.15s ease;
}

#clientEditTabs .nav-link:hover:not(.active) {
    color: var(--tblr-primary, #556cd6);
    border-bottom-color: var(--tblr-border-color, #e6e7e9);
}

#clientEditTabs .nav-link.active {
    color: var(--tblr-primary, #556cd6);
    border-bottom-color: var(--tblr-primary, #556cd6);
    background: transparent;
}

#clientEditTabs .nav-link i {
    margin-right: 0.35rem;
}

#clientEditTabs .nav-link .badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    vertical-align: baseline;
    background-color: var(--tblr-border-color, #d7dbe0) !important;
    color: var(--tblr-secondary, #656d77);
    border-radius: 999px;
}

#clientEditTabs .nav-link.active .badge {
    background-color: var(--tblr-primary, #556cd6) !important;
    color: #fff;
}