/* ================================================
   INLINE INVOICE DISCOUNTS - Custom Styles
   ================================================ */

/* Discount column styling */
.bill_col_discount {
    min-width: 150px;
}

.bill_col_discount .input-group-append {
    width: 60px;
}

.bill_col_discount .js_item_discount_type {
    font-size: 12px;
    padding: 0.25rem;
}

/* Hide discount column when needed */
.bill_col_discount.hidden {
    display: none !important;
}

/* Disabled button styling */
button.disabled,
a.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ================================================
   TICKETS TABLE FOOTER & PAGINATION
   (works on all themes and devices)
   ================================================ */

/* Client column: full text, no truncation */
#tickets-table-wrapper #tickets-list-table td.tickets_col_client {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
}

/* Footer row: left spacer | center pagination | right total */
#tickets-table-wrapper .tickets-tfoot-row > div:first-child,
#tickets-table-wrapper .tickets-tfoot-row > div:last-child {
    flex: 1;
}
#tickets-table-wrapper .tickets-tfoot-row > div:last-child {
    display: flex;
    justify-content: flex-end;
}
#tickets-table-wrapper .tickets-tfoot-row .tickets-total {
    margin-right: 200px;
}

/* Ticket pagination: hide page numbers by default (JS shows visible window) */
#tickets-table-wrapper .pagination-containter .js-tickets-pagination .page-num {
    display: none;
}

/* Bar and buttons — только светлые темы (Midnight стилизуется своей style1.css) */
html:not(.midnight) #tickets-table-wrapper .pagination-containter .js-tickets-pagination {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 6px 8px;
    background: #e9edf2;
    border: 1px solid #dee2e6;
}
html:not(.midnight) #tickets-table-wrapper .pagination-containter .js-tickets-pagination li {
    margin: 0;
}
html:not(.midnight) #tickets-table-wrapper .pagination-containter .js-tickets-pagination .page-num a,
html:not(.midnight) #tickets-table-wrapper .pagination-containter .js-tickets-pagination .scroll-prev a,
html:not(.midnight) #tickets-table-wrapper .pagination-containter .js-tickets-pagination .scroll-next a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #dee2e6;
    background: #fff;
    color: #263238;
    font-size: 13px;
    padding: 0;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
html:not(.midnight) #tickets-table-wrapper .pagination-containter .js-tickets-pagination .page-num a:hover,
html:not(.midnight) #tickets-table-wrapper .pagination-containter .js-tickets-pagination .scroll-prev a:hover,
html:not(.midnight) #tickets-table-wrapper .pagination-containter .js-tickets-pagination .scroll-next a:hover {
    transform: translateY(-1px);
    border-color: #20aee3;
    background: #e9edf2;
}
html:not(.midnight) #tickets-table-wrapper .pagination-containter .js-tickets-pagination .page-num.active a {
    background: #20aee3;
    border-color: #20aee3;
    color: #fff;
}
html:not(.midnight) #tickets-table-wrapper .pagination-containter .js-tickets-pagination .scroll-prev.disabled a,
html:not(.midnight) #tickets-table-wrapper .pagination-containter .js-tickets-pagination .scroll-next.disabled a {
    opacity: 0.35;
    cursor: default;
    transform: none;
}

/* Responsive: smaller offset and tap targets on small screens */
@media (max-width: 768px) {
    #tickets-table-wrapper .tickets-tfoot-row .tickets-total {
        margin-right: 1rem;
    }
    #tickets-table-wrapper .pagination-containter .js-tickets-pagination {
        padding: 4px 6px;
        gap: 4px;
    }
    #tickets-table-wrapper .pagination-containter .js-tickets-pagination .page-num a,
    #tickets-table-wrapper .pagination-containter .js-tickets-pagination .scroll-prev a,
    #tickets-table-wrapper .pagination-containter .js-tickets-pagination .scroll-next a {
        min-width: 24px;
        height: 24px;
        font-size: 12px;
    }
}

/* ================================================
   AVG CHECK WIDGET - стили по канону income (зелёная полоса)
   Средний чек = приход денег, как income
   ================================================ */
.avgcheck {
    position: relative;
    height: 250px;
}
.avgcheck .ct-series-a .ct-area {
    fill: #24d2b5;
    opacity: 0.5;
}
.avgcheck .ct-series-a .ct-line,
.avgcheck .ct-series-a .ct-point {
    stroke: #24d2b5;
    stroke-width: 2px;
}
.avgcheck .ct-series-a .ct-point {
    stroke-width: 6px;
}

/* Tooltip и оси — по канону income (тёмная тема) */
.avgcheck .chartist-tooltip {
    background: #363636;
    color: #ffffff;
    border-radius: 4px;
    padding: 4px 15px;
    font-size: 12px;
    position: absolute;
    display: none;
    z-index: 10;
}
.avgcheck line {
    stroke: #4f595f;
}
.avgcheck .ct-label {
    fill: #aeb4b7;
    color: #aeb4b7;
}

/* Текст виджета — светлый на тёмном фоне (Midnight) */
html.midnight #dashboard-admin-avg-check .card-body h2,
html.midnight #dashboard-admin-avg-check .card-body h2.font-light {
    color: #ffffff;
}
html.midnight #dashboard-admin-avg-check .card-body small {
    color: #aeb4b7;
}
html.midnight #dashboard-admin-avg-check .card-title {
    color: #ffffff;
}
html.midnight #dashboard-admin-avg-check select,
html.midnight #dashboard-admin-avg-check .select2-container {
    color: #263238;
}

/* ================================================
   ПОСТУПЛЕНИЕ ЗАКАЗОВ (ticket statuses) — приход заказов = зелёная полоса
   ================================================ */
.ticket-statuses-chart .ct-series-a .ct-area {
    fill: #24d2b5;
    opacity: 0.5;
}
.ticket-statuses-chart .ct-series-a .ct-line,
.ticket-statuses-chart .ct-series-a .ct-point {
    stroke: #24d2b5;
    stroke-width: 2px;
}
.ticket-statuses-chart .ct-series-a .ct-point {
    stroke-width: 6px;
}

/* Tooltip, оси — по канону income (тёмная тема) */
.ticket-statuses-chart .chartist-tooltip {
    background: #363636;
    color: #ffffff;
    border-radius: 4px;
    padding: 4px 15px;
    font-size: 12px;
    position: absolute;
    display: none;
    z-index: 10;
}
.ticket-statuses-chart line {
    stroke: #4f595f;
}
.ticket-statuses-chart .ct-label {
    fill: #aeb4b7;
    color: #aeb4b7;
}

/* Текст виджета — светлый на тёмном фоне (Midnight) */
html.midnight #dashboard-admin-tickets-statuses .card-body h2,
html.midnight #dashboard-admin-tickets-statuses .card-body h2.font-light {
    color: #ffffff;
}
html.midnight #dashboard-admin-tickets-statuses .card-body small {
    color: #aeb4b7;
}
html.midnight #dashboard-admin-tickets-statuses .card-title {
    color: #ffffff;
}

/* ================================================
   TICKET SHOW (вход 2) — отключить дёрганье блока
   Дропдаун статуса: только по клику, без transform на hover
   ================================================ */
#ticket #list-page-actions .ticket-status-md-trigger:hover {
    transform: none;
}

/* Пока курсор внутри карточки (дропдаун открыт, наведение на пункты, выбор) —
   карточка не дёргается. Реакция только при входе/выходе курсора в блок. */
#ticket #ticket-left-panel.card.select2-open:hover,
#ticket #ticket-left-panel.card.select2-closing:hover,
#ticket .order-cart-block.card.select2-open:hover,
#ticket .order-cart-block.card.select2-closing:hover,
#ticket .order-delivery-block.card.select2-open:hover,
#ticket .order-delivery-block.card.select2-closing:hover,
#ticket .order-payment-block.card.select2-open:hover,
#ticket .order-payment-block.card.select2-closing:hover {
    transform: none !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

/* Шапка «Детали заказа»: трубка 32px перед заголовком (без рамки), время в рамке с info 22px */
#ticket #ticket-left-panel .x-top-header-with-icon {
    display: flex;
    align-items: center;
    gap: 10px;
}
#ticket #ticket-left-panel .x-top-header-with-icon .x-top-header-phone-icon {
    flex-shrink: 0;
    margin-right: 2px;
}
#ticket #ticket-left-panel .x-top-header-with-icon .x-top-header-phone-icon .icon-phone .st0 {
    fill: none;
    stroke: #8a94a3;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-miterlimit: 10;
}
#ticket #ticket-left-panel .x-top-header-with-icon .x-top-header-phone-icon .icon-phone .st1 {
    fill: #8a94a3;
}
#ticket #ticket-left-panel .x-top-header-with-icon .x-top-header-phone-icon .icon-phone .first-l {
    animation: phone-wave 1.5s ease-in-out infinite;
}
#ticket #ticket-left-panel .x-top-header-with-icon .x-top-header-phone-icon .icon-phone .second-l {
    animation: phone-wave 1.5s ease-in-out 0.2s infinite;
}
#ticket #ticket-left-panel .x-top-header-with-icon .x-top-header-phone-icon .icon-phone .third-l {
    animation: phone-wave 1.5s ease-in-out 0.4s infinite;
}
@keyframes phone-wave {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

#ticket #ticket-left-panel .x-top-header-with-icon .x-list-date {
    margin-left: auto;
    margin-bottom: 0;
}
#ticket #ticket-left-panel .x-top-header-with-icon .x-list-date .x-details {
    display: flex;
    align-items: center;
    gap: 10px;
}
#ticket #ticket-left-panel .x-top-header-info-icon {
    flex-shrink: 0;
    display: inline-flex;
}
#ticket #ticket-left-panel .x-top-header-info-icon.icon-info .bg { fill: transparent; }
#ticket #ticket-left-panel .x-top-header-info-icon.icon-info .st0 { fill: none; stroke: #8a94a3; stroke-width: 6; stroke-miterlimit: 10; }
#ticket #ticket-left-panel .x-top-header-info-icon.icon-info .st1 { fill: #8a94a3; }
#ticket #ticket-left-panel .x-top-header-info-icon.icon-info .st2 { fill: none; stroke: #8a94a3; stroke-width: 4; stroke-miterlimit: 10; stroke-linecap: round; }
#ticket #ticket-left-panel .x-top-header-info-icon.icon-info .circle {
    transition: 0.5s;
    transform-origin: 50% 50%;
}
#ticket #ticket-left-panel .x-top-header-info-icon.icon-info:hover .circle {
    transform: scale(-1, 1);
}

/* Фамилия и Имя в одном ряду */
#ticket #ticket-left-panel .x-list-row {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}
#ticket #ticket-left-panel .x-list-row .x-list {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

/* Инпуты в блоке Детали заказа — форма подгружается в #ticket-left-panel-form-container */
#ticket #ticket-left-panel-form-container input.form-control,
#ticket #ticket-left-panel-form-container select.form-control,
#ticket #ticket-left-panel-form-container .form-control {
    min-height: 40px !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#ticket #ticket-left-panel-form-container input.form-control:focus,
#ticket #ticket-left-panel-form-container select.form-control:focus,
#ticket #ticket-left-panel-form-container .form-control:focus {
    box-shadow: 0 0 0 3px rgba(90, 166, 255, 0.25) !important;
}
#ticket #ticket-left-panel-form-container .select2-container--bootstrap .select2-selection--single {
    min-height: 40px !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
}
#ticket #ticket-left-panel-form-container .select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
    line-height: 22px;
    font-size: 15px;
}

/* Модель продаж: ширина по самому длинному тексту, без обрезки и прокрутки */
#ticket #ticket-left-panel-form-container .x-sales-model-wrap select,
#ticket #ticket-left-panel-form-container .x-sales-model-wrap .select2-container {
    width: fit-content !important;
    max-width: 100%;
    min-width: min-content;
}
#ticket #ticket-left-panel-form-container .x-sales-model-wrap .select2-selection__rendered {
    overflow: visible;
    text-overflow: unset;
    white-space: nowrap;
    display: flex !important;
    align-items: center;
    gap: 8px;
}

/* Иконка-квадрат в поле Модель продаж (по CodePen zqgbYG demo #2: scale на hover) */
#ticket #ticket-left-panel-form-container .x-sales-model-wrap .x-sales-model-icon-svg {
    flex-shrink: 0;
    color: #8a94a3;
}
#ticket #ticket-left-panel-form-container .x-sales-model-wrap .x-sales-model-square {
    transform-origin: 50% 50%;
    transition: transform 0.5s ease;
}
#ticket #ticket-left-panel-form-container .x-sales-model-wrap .x-sales-model-arrow {
    transition: stroke-width 0.5s ease;
}
#ticket #ticket-left-panel-form-container .x-sales-model-wrap:hover .x-sales-model-square {
    transform: scale(0.8);
}
#ticket #ticket-left-panel-form-container .x-sales-model-wrap:hover .x-sales-model-arrow {
    stroke-width: 3;
}