/* Style for the preloader */
.r-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(0 0 0 / 31%);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    z-index: 999999;
}

.r-preloader .r-spinner {
    border: 8px solid #ffffff;
    border-top: 8px solid #006616;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: rSpin 1.5s linear infinite;
}

/* Animation for spinning */
@keyframes rSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.ip-validation-msg {
    display: block;
    width: 100%;
    /* height: auto !important;
    overflow: initial !important; */
}
#datatable_length {
    width: 50%;
    display: inline-block;
}
#datatable_filter {
    width: 50%;
    display: inline-block;
}
.dataTables_filter label {
    width: 100%;
}
.dataTables_filter label input {
    width: calc( 100% - 50px )!important;
    border: 2px solid #b9b6b6 !important;
    height: 40px;
    margin-left: 4px!important;
}
#datatable_wrapper .dataTables_processing {
    height: 100%!important;
    width: 100%!important;
    background: #0000004a !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 5% !important;
}
.radio-item .inputs {
    position: relative;
}
.radio-item .inputs input:not([type="radio"]) {
    padding-right: 100px;
}
.radio-item .inputs .radio {
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
}
.form-check-custom {
    flex-wrap: wrap;
}
.form-check-custom .form-check-label {
    margin-left: 0;
}
.form-check-input[type="radio"]:after,
.form-check-input[type="checkbox"]:after {
    display: none;
}
.copy-text-btn {
    cursor: pointer;
}
.copy-text-btn i {
    font-size: 20px;
}
.toggle-password::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f070"; /* fa-eye-slash by default */
    font-size: 1rem;
    color: #555;
}

.toggle-password[data-visible="true"]::before {
    content: "\f06e"; /* fa-eye when password is visible */
}
.text-toggle-password::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f070"; /* fa-eye-slash by default */
    font-size: 1rem;
    color: #555;
}

.text-toggle-password[data-visible="true"]::before {
    content: "\f06e"; /* fa-eye when password is visible */
}
.user-select-none {
    user-select: none;
}
.toggle-password {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    cursor: pointer;
}
.usn {
    user-select: none;
}
.vertical-align-baseline {
    vertical-align: baseline;
}

textarea.ck-editor {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -111;
}
textarea.ck-editor.ckeditor-initialized {
    opacity: 0;
}
.text-white-all,
.text-white-all * {
    color: #ffffff !important;
}

.text-dark-all,
.text-dark-all * {
    color: var(--kt-text-dark) !important;
}
.ck.ck-powered-by {
    display: none !important;
}
.custom-pagination p {
    margin-bottom: 0;
}
.notification-toggle{
    position: relative;
}

.notification-toggle .notification-count {
    position: absolute;
    top: 0;
    right: 0px;
    /* A CIRCLE, always — never a pill. "99+" is the longest string any badge can
       hold (badgeCount() / nttBadgeCount() cap it there), so the circle is
       sized to fit those three characters and the font tuned to them. A fixed
       width and height is what keeps it round: let the box grow with its text
       and a two-digit count is already an ellipse. */
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    box-sizing: border-box;
    font-size: 10px;
    font-weight: 600;
    background: #009ef7;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sticky-note-toggle {
    position: relative;
}

.sticky-note-toggle .sticky-note-count {
    position: absolute;
    top: 0;
    right: 0px;
    /* A CIRCLE, always — never a pill. "99+" is the longest string any badge can
       hold (badgeCount() / nttBadgeCount() cap it there), so the circle is
       sized to fit those three characters and the font tuned to them. A fixed
       width and height is what keeps it round: let the box grow with its text
       and a two-digit count is already an ellipse. */
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    box-sizing: border-box;
    font-size: 10px;
    font-weight: 600;
    background: #009ef7;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

#kt_support_ticket_toggle {
    position: relative;
}

#kt_support_ticket_toggle .support-ticket-count {
    position: absolute;
    top: 0;
    right: 0px;
    /* A CIRCLE, always — never a pill. "99+" is the longest string any badge can
       hold (badgeCount() / nttBadgeCount() cap it there), so the circle is
       sized to fit those three characters and the font tuned to them. A fixed
       width and height is what keeps it round: let the box grow with its text
       and a two-digit count is already an ellipse. */
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    box-sizing: border-box;
    font-size: 10px;
    font-weight: 600;
    background: #009ef7;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

#kt_chatbot_inbox_toggle {
    position: relative;
}

#kt_chatbot_inbox_toggle .chatbot-inbox-count {
    position: absolute;
    top: 0;
    right: 0px;
    /* A CIRCLE, always — never a pill. "99+" is the longest string any badge can
       hold (badgeCount() / nttBadgeCount() cap it there), so the circle is
       sized to fit those three characters and the font tuned to them. A fixed
       width and height is what keeps it round: let the box grow with its text
       and a two-digit count is already an ellipse. */
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    box-sizing: border-box;
    font-size: 10px;
    font-weight: 600;
    background: #009ef7;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

#kt_live_chat_toggle {
    position: relative;
}

#kt_live_chat_toggle .live-chat-count {
    position: absolute;
    top: 0;
    right: 0px;
    /* A CIRCLE, always — never a pill. "99+" is the longest string any badge can
       hold (badgeCount() / nttBadgeCount() cap it there), so the circle is
       sized to fit those three characters and the font tuned to them. A fixed
       width and height is what keeps it round: let the box grow with its text
       and a two-digit count is already an ellipse. */
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    box-sizing: border-box;
    font-size: 10px;
    font-weight: 600;
    background: #009ef7;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sidebar count badges — a circle, at every count. Overrides the theme's
   badge-circle sizing. See the header badges: same shape, same reason. */
.app-sidebar .badge.badge-circle {
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex; /* NOT !important — so JS can hide the badge via inline style.display='none' */
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    box-sizing: border-box;
}

/* =========================================================================
   Passenger Portal — Live Chat Support: admin chat detail page
   Conventions: primary #009ef7, success #50cd89, warning #f1bc00,
   danger #f1416c, gray ramp #b5b5c3/#7e8299/#3f4254/#181c32.
   ========================================================================= */

.plc-chat-card {
    /* Fixed height so the message thread scrolls internally and the page itself doesn't scroll. */
    display: flex;
    flex-direction: column;
    height: calc(100vh - 220px);
    min-height: 0;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(24, 28, 50, 0.04);
}

/* Header + banners + composer don't shrink; only the thread fills remaining space. */
.plc-chat-header,
.plc-chat-closed-banner,
.plc-chat-join-prompt,
.plc-chat-composer {
    flex-shrink: 0;
}

.plc-chat-body {
    /* card-body wrapper around the thread — needs to flex so the inner thread can scroll. */
    flex: 1 1 0 !important;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.plc-chat-header {
    background: linear-gradient(135deg, #ffffff 0%, #f5f8fd 100%);
    border-top-left-radius: .625rem;
    border-top-right-radius: .625rem;
    padding: 1.25rem 1.5rem !important;
}
.plc-chat-header .plc-chat-header-meta a:hover { color: #009ef7; }

/* ---- Header passenger avatar ---- */
.plc-chat-avatar {
    position: relative;
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, #5e84ef 0%, #009ef7 100%);
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(0, 158, 247, 0.25);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 20px; letter-spacing: 0.5px;
    flex-shrink: 0;
}
.plc-chat-avatar-pending { background: linear-gradient(135deg, #ffb800 0%, #ff8f3c 100%); box-shadow: 0 6px 14px rgba(255, 152, 0, 0.25); }
.plc-chat-avatar-active  { background: linear-gradient(135deg, #2ecc71 0%, #50cd89 100%); box-shadow: 0 6px 14px rgba(80, 205, 137, 0.25); }
.plc-chat-avatar-closed  { background: linear-gradient(135deg, #b5b5c3 0%, #7e8299 100%); box-shadow: 0 6px 14px rgba(126, 130, 153, 0.20); }
.plc-chat-avatar-initials { line-height: 1; }
.plc-chat-avatar-dot {
    position: absolute; bottom: 0; right: 0;
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid #ffffff;
}
.plc-chat-avatar-dot.dot-success { background: #50cd89; }
.plc-chat-avatar-dot.dot-warning { background: #ffb800; }
.plc-chat-avatar-dot.dot-muted   { background: #b5b5c3; }

/* ---- Message thread (background canvas) ---- */
.plc-chat-thread {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 1.5rem 1.75rem;
    background:
        radial-gradient(circle at 12% 18%, rgba(0,158,247,0.04) 0, transparent 35%),
        radial-gradient(circle at 88% 88%, rgba(80,205,137,0.04) 0, transparent 35%),
        #f5f7fb;
    display: flex; flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}

/* Loading older messages indicator pinned at the top of the thread during pagination. */
.plc-chat-older-spinner {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #7e8299;
    padding: 6px 14px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e4e6ef;
    box-shadow: 0 1px 2px rgba(24, 28, 50, 0.04);
}
.plc-chat-thread::-webkit-scrollbar { width: 8px; }
.plc-chat-thread::-webkit-scrollbar-thumb { background: rgba(54, 65, 82, 0.18); border-radius: 4px; }
.plc-chat-thread::-webkit-scrollbar-thumb:hover { background: rgba(54, 65, 82, 0.3); }
.plc-chat-thread::-webkit-scrollbar-track { background: transparent; }

/* ---- Passenger / staff / bot bubbles ---- */
.plc-chat-message {
    display: flex;
    max-width: 78%;
    gap: 10px;
    align-items: flex-end;
    margin: 0;
}
.plc-chat-message.from-passenger { align-self: flex-start; }
.plc-chat-message.from-bot       { align-self: flex-start; }
.plc-chat-message.from-staff     { align-self: flex-end; flex-direction: row-reverse; }

.plc-chat-bubble {
    background: #ffffff;
    color: #181c32;
    padding: 10px 14px;
    border-radius: 16px;
    border: 1px solid #e4e6ef;
    box-shadow: 0 1px 2px rgba(24, 28, 50, 0.04);
    line-height: 1.5;
    position: relative;
    min-width: 80px;
}
.plc-chat-message.from-passenger .plc-chat-bubble { border-top-left-radius: 4px; }
.plc-chat-message.from-staff     .plc-chat-bubble {
    background: linear-gradient(135deg, #009ef7 0%, #0d8aef 100%);
    color: #ffffff;
    border-color: transparent;
    border-top-right-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 158, 247, 0.22);
}
.plc-chat-bubble .plc-chat-body { white-space: pre-wrap; word-break: break-word; font-size: 14px; }
.plc-chat-bubble .plc-chat-sender {
    display: block;
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 3px;
    color: #7e8299;
}
.plc-chat-message.from-staff .plc-chat-bubble .plc-chat-sender { color: rgba(255, 255, 255, 0.95); }
.plc-chat-bubble .plc-chat-time {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: rgba(54, 65, 82, 0.6);
}
.plc-chat-message.from-staff .plc-chat-bubble .plc-chat-time { color: rgba(255, 255, 255, 0.8); }

.plc-chat-side-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #e4e6ef;
    color: #3f4254;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(24, 28, 50, 0.05);
}
.plc-chat-message.from-staff .plc-chat-side-avatar {
    background: linear-gradient(135deg, #009ef7 0%, #0d8aef 100%);
    color: #ffffff;
}

/* Auto-reply (bot) bubble — left side, distinct tinted style. */
.plc-chat-side-avatar.plc-chat-bot-avatar {
    background: linear-gradient(135deg, #94a3ff 0%, #7e94ff 100%);
    color: #ffffff;
}
.plc-chat-bubble.plc-chat-bot-bubble {
    background: #f3f6ff;
    border-color: #d8e0ff;
    border-style: dashed;
    border-top-left-radius: 4px;
    color: #2b3674;
}
.plc-chat-bubble.plc-chat-bot-bubble .plc-chat-sender {
    color: #7e94ff;
    display: inline-flex; align-items: center; gap: 4px;
}
.plc-chat-bubble.plc-chat-bot-bubble .plc-chat-sender::before {
    content: "\f544"; /* fa-robot */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
}

/* ---- Centered system event rows (mirrors the existing chat's event row) ---- */
.plc-chat-event-row {
    display: flex;
    justify-content: center;
    margin: 8px 0;
}
.plc-chat-event-row .plc-chat-event-badge {
    background: #ffffff;
    color: #7e8299;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid #e4e6ef;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 90%;
    box-shadow: 0 1px 2px rgba(24, 28, 50, 0.04);
}
.plc-chat-event-row .plc-chat-event-badge i { font-size: 11px; }
.plc-chat-event-row .plc-chat-event-badge .text-muted { color: #b5b5c3 !important; font-weight: 400; }
.plc-chat-event-row.event-staff_joined .plc-chat-event-badge {
    background: #e8fff3; color: #1bc5bd; border-color: #cfeae0;
}
.plc-chat-event-row.event-first_passenger_message_ack .plc-chat-event-badge {
    background: #eef6ff; color: #009ef7; border-color: #d9ecff;
}
.plc-chat-event-row.event-chat_closed .plc-chat-event-badge {
    background: #fff5f8; color: #f1416c; border-color: #f8d7df;
}

/* ---- Composer ---- */
.plc-chat-composer {
    background: #ffffff;
    border-top: 1px solid #e4e6ef;
    padding: 1rem 1.25rem !important;
}
.plc-chat-composer textarea.plc-chat-input {
    resize: none;
    border-radius: 12px;
    border-color: #e4e6ef;
    background: #f9fafb;
    padding: 10px 14px;
    font-size: 14px;
    box-shadow: none !important;
    transition: border-color .15s ease, background .15s ease;
}
.plc-chat-composer textarea.plc-chat-input:focus {
    border-color: #009ef7;
    background: #ffffff;
    outline: none;
}
.plc-chat-composer .plc-chat-send {
    /* height: 44px; */
    padding-left: 18px; padding-right: 18px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 158, 247, 0.22);
}

/* ---- Banners ---- */
.plc-chat-closed-banner {
    background: #fff5f8;
    color: #f1416c;
    padding: 14px 24px;
    font-weight: 600;
    text-align: center;
    border-top: 1px solid rgba(241, 65, 108, 0.2);
}
.plc-chat-join-prompt {
    background: #fff8e1;
    color: #a67500;
    padding: 12px 24px;
    font-weight: 500;
    text-align: center;
    border-top: 1px solid rgba(246, 195, 66, 0.25);
}
.plc-chat-join-prompt i { color: #ffb800; }

/* Live-chat-disabled notice on the admin chat page (feature globally off). */
.plc-chat-disabled-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    background: #f4f6fb;
    color: #5e6278;
    padding: 14px 24px;
    font-weight: 600;
    text-align: center;
    border-top: 1px solid #e4e6ef;
}
.plc-chat-disabled-notice i { color: #9aa0b3; }

/* ---- Narrow viewports ---- */
@media (max-width: 768px) {
    .plc-chat-message { max-width: 90%; }
    .plc-chat-thread { padding: 1rem; max-height: calc(100vh - 320px); }
    .plc-chat-avatar { width: 48px; height: 48px; font-size: 18px; }
}

.dashboard-card .card-header {
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.dashboard-card .card-header:after {
    content: "";
    padding: 20px;
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 0%;
    height: 0%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.dashboard-card[href]:hover .card-header::after {
    width: 105%;
    height: 105%;
    background: #a65500;
}
.dashboard-card {
    overflow: hidden;
}

.dashboard-card:hover .card-header * {
    /* color: var(--bs-body-color) !important; */
    color: #ffffff !important;
}

.ticket-layout-card-outer {
    text-align: center;
}

.ticket-layout-card {
    position: relative;
    z-index: 9;
    display: block;
    cursor: pointer;
    border-radius: 8px;
    /* padding: 4px; */
    overflow: hidden;
    transition: all 0.3s ease;
}

.ticket-layout-card img {
    border: 2px solid #cccccc;
    border-radius: 8px;
}
.ticket-layout-card:hover img {
    border-color: #007bff;
}
.ticket-layout-card input:checked + .ticket-img {
    border: 3px solid #007bff; /* highlight color */
}

.ticket-layout-card input {
    position: absolute;
    z-index: -111;
    opacity: 0;
}

/*Img Popup css*/
.mf-prev {
    position: relative;
    z-index: 1;
    display: inline-flex;
    cursor: pointer;
    margin: 0 auto;
    text-align: center;
}
.mf-prev:hover {
    color: #1c9c00;
}
.mf-prev:hover:before {
    opacity: 0;
}
.mf-prev.hover-effect:hover:before {
    opacity: 1;
}
.mf-prev.no-hover-effect:hover:before {
    opacity: 0;
}
.mf-prev:before {
    content: "+";
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    color: #fff;
    background: #0000008c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    opacity: 0;
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
.mf-img-popup {
    position: fixed;
    z-index: 99999;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #000000a8;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
td .mf-prev {
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
td .mf-prev .image {
    display: flex;
    align-items: center;
    justify-content: center;
}
td .mf-prev:before {
    display: none;
}
.mf-img-popup-img-wrap {
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.mf-img-popup img {
    max-width: none;
    max-height: none;
    width: auto;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(-100px);
    -webkit-transform: translateY(-100px);
    -moz-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    -o-transform: translateY(-100px);
}

.mf-img-popup-rotate-btn {
    margin-right: 12px;
    width: 35px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 20px;
    right: 60px;
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    transition: color 0.2s ease;
}
.mf-img-popup-rotate-btn i{
    font-size: 32px;
    color: #fff;
    transition: color 0.2s ease;
}
.mf-img-popup-rotate-btn:hover i{
    color: #009ef7;
}


.mf-img-popup-close-btn {
    width: 35px;
    height: 30px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}

.mf-img-popup-close-btn .bar {
    height: 4px;
    background: #fff;
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

.mf-img-popup-close-btn .bar:nth-child(1) {
    transform: rotate(45deg);
}

.mf-img-popup-close-btn .bar:nth-child(2) {
    transform: translateY(-4px) rotate(-45deg);
}
.mf-img-popup-close-btn:hover .bar {
    background: red;
}
.mf-img-popup.opened {
    display: flex;
}

.mf-img-popup.opened img {
    animation: animatemfimgpopup 1s ease-in-out 0.8s;
    -webkit-animation: animatemfimgpopup 0.3s ease-in-out forwards;
}
.mf-popup-visible .mf-img-popup {
    /* padding-top: 70px; */
}
.mf-popup-visible .fixed-sidebar .mf-img-popup {
    width: calc(100% - 280px);
}
.mf-popup-visible .closed-sidebar .mf-img-popup {
    width: calc(100% - 80px);
}
.mf-popup-visible .mf-img-popup-close-btn,
.mf-popup-visible .mf-img-popup-rotate-btn {
    top: 20px;
}
@keyframes animatemfimgpopup {
    to {
        opacity: 1;
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }
}
.mf-uploaded-item .card-body p {
    display: none;
}
.photo-gallery-page .app-main__inner {
    padding: 15px !important;
}
@media screen and (max-width: 880px) {
    .mf-img-item-outer:nth-child(3n + 1) {
        margin-left: 16px;
    }
}

/* Responsive Max Screen*/
@media (max-width: 1400px) {
    .inv-content-wrapper {
        width: 100% !important;
    }
}

.card-body.step-form .ip-validation-msg {
    position: absolute;
    bottom: -17px;
}

.card-body.step-form .form-item {
    position: relative;
}

.input-item-with-create-btn {
    display: flex;
    width: 100%;
    align-items: end;
}

.input-item-with-create-btn .input-item {
    width: calc(100% - 46px);
}

.input-item-with-create-btn button {
    height: 44px;
}

/* ---- airline sequence chips (payment add/edit) -------------------------
   The airline field is a picker plus an ordered list, because a <select
   multiple> cannot hold the same airline twice and an itinerary can: out on A,
   on to B, home on A again.

   The chips sit OUTSIDE .input-item-with-create-btn. That row is
   `align-items: end`, so anything inside the field grew it and dragged the
   green + button down away from the select it belongs to. */
/* ---- select2-duplicate --------------------------------------------------
   The chrome for data-control="select2-duplicate" — a select2 that can hold the
   same option more than once, in order. Any field can opt in with that one
   attribute; the payment form's Airline is the first. The markup is built by
   custom.js.

   COLOURS AND SIZES COME FROM THE THEME, not from here. The markup uses
   select2's own class names — .select2-selection--multiple, __rendered,
   __choice, __choice__remove — so plugins.bundle.css dresses it exactly as it
   dresses the Issued Supplier field next to it, masked × and all, and dark mode
   arrives with the kt- variables. Copying hex values here would have looked
   right today and drifted the next time the theme moved.

   What is left below is layout only: putting the chooser INSIDE the box, and
   the position number a real select2 chip has no place for. All of it is scoped
   to .s2dup, so no other select2 on the page is touched. */
.s2dup {
    width: 100%;
}

/* The box itself is .select2-selection--multiple, which the theme already
   gives a border, a radius, a min-height and vertical padding. It only needs
   to wrap. */
.s2dup > .select2-selection--multiple {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}

/* The chip list flows in the same line box as the chooser. */
.s2dup .select2-selection__rendered {
    display: contents;
}

/* The chooser, flush inside the box: it keeps its arrow and its dropdown, and
   gives up only the chrome that would draw a second field. It takes the space
   left on the last chip row, the way a real multi-select's text input does. */
.s2dup .select2-container {
    flex: 1 1 90px;
    min-width: 90px;
    width: auto !important;
}

.s2dup .select2-container .select2-selection {
    border: 0 !important;
    background: transparent !important;
    min-height: 0 !important;
    height: 1.5rem !important;
    padding: 0 !important;
}

.s2dup .select2-container .select2-selection__rendered {
    display: block;
    line-height: 1.5rem !important;
}

.s2dup .select2-container .select2-selection__arrow {
    height: 1.5rem !important;
}

/* The bare <select> for the moment BEFORE select2 boots, so the field does not
   jump as it initialises.

   :not(.select2-hidden-accessible) is load-bearing. select2 keeps the original
   <select> and hides it by clipping rather than by display:none — without the
   exclusion these rules gave that hidden element a height and a flex slot
   again, and it reappeared as a second empty row inside the box. */
.s2dup > .select2-selection--multiple > select.form-select:not(.select2-hidden-accessible) {
    flex: 1 1 120px;
    width: auto;
    border: 0;
    height: 1.5rem;
    padding: 0;
    background-color: transparent;
    box-shadow: none;
}

/* NOTHING for the remove ×. The theme's own rule for it is specific enough to
   beat `.input-item-with-create-btn button { height: 44px }` — the rule for the
   green + beside this field, which reaches every button inside it. An earlier
   version of this control used a class of its own, lost that contest, and every
   chip came out 54px tall. Using select2's class names settles it.

   It also means not restating the size here: a `padding: 0` added "to be safe"
   made the × 9.6px wide where the real ones are 12px. */

.file-prev-thumb {
    height: 100px;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px solid #dddddd;
    transition: all 0.3s ease;
}
.file-prev-thumb i {
    font-size: 50px;
}
.file-prev-thumb:hover {
    background: #dddddd;
}
.accordion-button:focus {
    box-shadow: inset 0 calc(var(--bs-accordion-border-width) * -1) 0
        var(--bs-accordion-border-color);
}

.daterange-picker-wrap {
    user-select: none;
    position: relative;
}
.clear-date-range {
    cursor: pointer;
}
.daterangepicker.show-calendar .drp-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.daterangepicker.show-calendar .drp-buttons .drp-selected {
    text-align: left;
    white-space: nowrap;
}

.img-thumbnail {
    height: 20px;
    width: 20px;
    object-fit: cover;
    object-position: left top;
    padding: 0;
}
.img-thumbnail.flag {
    width: auto;
    height: 17px;
    object-fit: contain;
    object-position: center center;
    border-radius: 0% !important;
}

.p-sticky-wrapper {
    position: relative;
    overflow: initial;
}

.p-sticky-part {
    position: sticky;
    top: 70px;
    z-index: 11;
}

@media (max-width: 991.98px) {
    .p-sticky-part {
        top: 0;
    }
}


/* ============================
   Refunded Seal Styles
   ============================ */

/* Size control and absolute centering */
.seal-refunded {
  --seal-size: 100px;
  position: absolute;
  /* top: 50%; */
  /* left: 50%; */
  /* transform: translate(-50%, -50%) rotate(-30deg); */
  top: 0;
  right: 0;
  transform: rotate(30deg);
}

/* Main seal appearance */
.seal-refunded {
  width: var(--seal-size);
  height: var(--seal-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.08), transparent 20%),
    linear-gradient(#fff, #f6f6f6);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.18),
    inset 0 3px 6px rgba(255, 255, 255, 0.12);
  border: 4px solid rgba(180, 0, 0, 0.95);
  color: #a80000;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  user-select: none;
  height: 150px;
  width: 150px;
}

/* Outer dashed ring */
.seal-refunded::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 2px dashed rgba(168, 0, 0, 0.9);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.02);
  pointer-events: none;
}

/* Center content layout */
.seal-refunded .seal-text {
  font-weight: 700;
  font-size: calc(var(--seal-size) * 0.18);
  z-index: 2;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25),
    0 -1px 0 rgba(0, 0, 0, 0.15);
}

/* Checkmark badge inside the seal */
.seal-refunded .seal-check {
  /* position: absolute; */
  /* right: 8%; */
  /* bottom: 10%; */
  /* background: #a80000; */
  /* color: #fff; */
  width: calc(var(--seal-size) * 0.28);
  height: calc(var(--seal-size) * 0.28);
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: calc(var(--seal-size) * 0.18);
  z-index: 3;
  transform: rotate(6deg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Subtle worn / stamped texture overlay */
.seal-refunded::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.02), transparent 8%),
    radial-gradient(circle at 80% 80%, rgba(0, 0, 0, 0.02), transparent 8%),
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.01) 0 2px,
      transparent 2px 6px
    );
  opacity: 0.25;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Outline variation */
.seal-refunded.seal-outline {
  background: transparent;
  border-color: rgba(168, 0, 0, 0.9);
  color: rgba(168, 0, 0, 0.95);
  box-shadow: none;
  transform: none;
}
@media (max-width: 767px) {
    .seal-refunded{
        --seal-size: 55px;
        height: 100px;
        width: 100px;
    }

}

.app-sidebar-logo a {
    display: block;
    height: 100%;
    padding: 8px 0px;
}

.app-sidebar-logo {
    background: #ffffff;
    justify-content: center;
}

.app-sidebar-logo a img {
    height: 100%!important;
}

a.brand-logo-min img {
    height: 50px!important;
}

/* Make sidebar scrollbar always visible - matching sidebar background */
#kt_app_sidebar_menu_wrapper,
.app-sidebar-wrapper.hover-scroll-overlay-y,
#kt_app_sidebar_menu_wrapper.hover-scroll-overlay-y {
    overflow-y: scroll !important;
    overflow-x: hidden !important;
}

/* Force scrollbar to always be visible - Webkit browsers (Chrome, Safari, Edge) */
#kt_app_sidebar_menu_wrapper::-webkit-scrollbar,
.app-sidebar-wrapper.hover-scroll-overlay-y::-webkit-scrollbar,
#kt_app_sidebar_menu_wrapper.hover-scroll-overlay-y::-webkit-scrollbar {
    width: 8px !important;
    -webkit-appearance: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#kt_app_sidebar_menu_wrapper::-webkit-scrollbar-track,
.app-sidebar-wrapper.hover-scroll-overlay-y::-webkit-scrollbar-track,
#kt_app_sidebar_menu_wrapper.hover-scroll-overlay-y::-webkit-scrollbar-track {
    background: transparent !important;
    -webkit-box-shadow: none !important;
}

/* Base rule - thumb always visible */
#kt_app_sidebar_menu_wrapper::-webkit-scrollbar-thumb,
.app-sidebar-wrapper.hover-scroll-overlay-y::-webkit-scrollbar-thumb,
#kt_app_sidebar_menu_wrapper.hover-scroll-overlay-y::-webkit-scrollbar-thumb,
.hover-scroll-overlay-y::-webkit-scrollbar-thumb,
.app-sidebar-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 4px !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    -webkit-box-shadow: none !important;
    min-height: 20px !important;
}

/* Override framework's default opacity: 0 rule - force visible when NOT hovered */
#kt_app_sidebar_menu_wrapper:not(:hover)::-webkit-scrollbar-thumb,
.app-sidebar-wrapper.hover-scroll-overlay-y:not(:hover)::-webkit-scrollbar-thumb,
#kt_app_sidebar_menu_wrapper.hover-scroll-overlay-y:not(:hover)::-webkit-scrollbar-thumb,
.hover-scroll-overlay-y:not(:hover)::-webkit-scrollbar-thumb,
.app-sidebar-wrapper:not(:hover)::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

#kt_app_sidebar_menu_wrapper:hover::-webkit-scrollbar-thumb,
#kt_app_sidebar_menu_wrapper::-webkit-scrollbar-thumb:hover,
.app-sidebar-wrapper.hover-scroll-overlay-y:hover::-webkit-scrollbar-thumb,
.app-sidebar-wrapper.hover-scroll-overlay-y::-webkit-scrollbar-thumb:hover,
#kt_app_sidebar_menu_wrapper.hover-scroll-overlay-y:hover::-webkit-scrollbar-thumb,
#kt_app_sidebar_menu_wrapper.hover-scroll-overlay-y::-webkit-scrollbar-thumb:hover,
.hover-scroll-overlay-y:hover::-webkit-scrollbar-thumb,
.hover-scroll-overlay-y::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3) !important;
    opacity: 1 !important;
}

/* Override framework hover-only behavior - make thumb always visible */
.hover-scroll-overlay-y::-webkit-scrollbar-thumb,
#kt_app_sidebar_menu_wrapper.hover-scroll-overlay-y::-webkit-scrollbar-thumb {
    opacity: 1 !important;
    visibility: visible !important;
    background: rgba(0, 0, 0, 0.2) !important;
    display: block !important;
}

/* Force thumb visibility even without hover */
#kt_app_sidebar_menu_wrapper:not(:hover)::-webkit-scrollbar-thumb,
.hover-scroll-overlay-y:not(:hover)::-webkit-scrollbar-thumb {
    opacity: 1 !important;
    visibility: visible !important;
    background: rgba(0, 0, 0, 0.2) !important;
    display: block !important;
}

/* Firefox */
#kt_app_sidebar_menu_wrapper,
.app-sidebar-wrapper.hover-scroll-overlay-y,
#kt_app_sidebar_menu_wrapper.hover-scroll-overlay-y {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent !important;
}
#chat-widget-badge {
    left: 80%!important;
    /* The same circle as every other count badge — a fixed box so "99+", the
       longest string nttBadgeCount can produce, does not stretch it into a
       pill. Its red is the theme's badge-danger and is left alone. */
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
/* d-none is how the widget hides it, and it must keep winning over the
   display:flex a circle needs. */
#chat-widget-badge:not(.d-none) {
    display: flex;
}
#chat-thread-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Chat: double green circle for read (seen) message */
.chat-msg-seen-double-circle {
    display: inline-flex;
    align-items: center;
}
.chat-msg-seen-double-circle *{
    color: #25D366;
}
.chat-msg-seen-double-circle .fa-circle {
    font-size: 6px;
}
.chat-msg-seen-double-circle .fa-circle:last-child {
    margin-left: -4px;
}

/* Chat: green "active" dot beside name (conversation list) */
.chat-active-dot{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #50cd89; /* KT success */
    vertical-align: middle;
    box-shadow: 0 0 0 2px rgba(80, 205, 137, 0.18);
}
.chat-msg-status-icon {
    display: inline-flex;
    align-items: center;
}
.chat-msg-status-icon .fa-check,
.chat-msg-status-icon .fa-check-double {
    opacity: 0.9;
}

/* Sender bubble: ensure all text and links are white for visibility on primary background */
.chat-msg-row[data-is-sent="1"] .chat-msg-bubble,
.chat-msg-row[data-is-sent="1"] .chat-msg-bubble .chat-msg-body,
.chat-msg-row[data-is-sent="1"] .chat-msg-bubble .chat-msg-body small,
.chat-msg-row[data-is-sent="1"] .chat-msg-bubble .chat-msg-sender-name,
.chat-msg-row[data-is-sent="1"] .chat-msg-bubble .chat-msg-forwarded,
.chat-msg-row[data-is-sent="1"] .chat-msg-bubble .chat-reply-quote,
.chat-msg-row[data-is-sent="1"] .chat-msg-bubble .d-flex span.opacity-75,
.chat-msg-row[data-is-sent="1"] .chat-msg-bubble .chat-msg-status-icon {
    color: #fff !important;
}
/* Sender bubble links: distinct color so they’re visible and different from bg */
.chat-msg-row[data-is-sent="1"] .chat-msg-bubble .chat-msg-body a {
    color: #fff9c4 !important;
    text-decoration: underline;
}
.chat-msg-row[data-is-sent="1"] .chat-msg-bubble .chat-msg-body a:hover {
    color: #fffde7 !important;
    text-decoration: underline;
}

/* Chat: reactions under message – left for recipient, right for sender */
.chat-msg-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
    margin-top: 0.25rem;
}
.chat-msg-row[data-is-sent="0"] .chat-msg-reactions {
    justify-content: flex-start;
}
.chat-msg-row[data-is-sent="1"] .chat-msg-reactions {
    justify-content: flex-end;
}

/* Reaction badge (already reacted emoji) */
.chat-reaction-badge { font-size: 20px; }

/* Recipient bubble is bg-light: give reaction badges a clearer background */
.chat-msg-row[data-is-sent="0"] .chat-reaction-badge {
    background-color: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: inherit;
}
.chat-msg-row[data-is-sent="0"] .chat-reaction-badge:hover {
    background-color: #f5f5f5 !important;
}

/* Quick reaction menu: highlight the current user's selected reaction */
.chat-quick-react-menu .chat-quick-react-selected {
    background-color: rgba(var(--kt-primary-rgb, 63, 128, 234), 0.15);
    font-weight: 600;
}
.chat-quick-react-menu .chat-quick-react-selected:hover {
    background-color: rgba(var(--kt-primary-rgb, 63, 128, 234), 0.22);
}

/* Bounce highlight when scrolling to a replied-to message (WhatsApp-style) */
.chat-msg-row-reply-target .chat-msg-bubble {
    position: relative;
    animation: chat-reply-bounce 1.2s ease-out;
    overflow: hidden;
    isolation: isolate;
}
.chat-msg-row-reply-target .chat-msg-bubble::before {
    content: '';
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0.375rem;
    background: linear-gradient(135deg, rgba(0, 158, 247, 0.7), rgba(114, 57, 234, 0.6), rgba(80, 205, 137, 0.5));
    opacity: 0;
    animation: chat-reply-bg-blink 1.2s ease-out forwards;
    pointer-events: none;
    z-index: 0;
}
.chat-msg-row-reply-target .chat-msg-bubble .chat-msg-body,
.chat-msg-row-reply-target .chat-msg-bubble .d-flex {
    position: relative;
    z-index: 1;
}
@keyframes chat-reply-bounce {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 158, 247, 0.35);
    }
    15% {
        transform: scale(1.04);
        box-shadow: 0 0 0 6px rgba(0, 158, 247, 0.25);
    }
    30% {
        transform: scale(0.98);
        box-shadow: 0 0 0 4px rgba(0, 158, 247, 0.15);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 0 0 2px rgba(0, 158, 247, 0.08);
    }
    70%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 transparent;
    }
}
@keyframes chat-reply-bg-blink {
    0% { opacity: 0; }
    12% { opacity: 0.85; }
    30% { opacity: 0.6; }
    50% { opacity: 0.35; }
    70% { opacity: 0.15; }
    85%, 100% { opacity: 0; }
}
.nav-line-tabs .nav-item .nav-link:focus-visible {
    outline: 0;
}

/* Select2: show validation error under dropdown and invalid state on container */
.select2-container.is-invalid .select2-selection {
    border-color: #dc3545 !important;
}
.select2-container + .error-message.text-danger {
    display: block;
    margin-top: 0.25rem;
}

.chat-quick-react-menu.show {
    display: flex!important;
}

/* Set Nickname Swal: ensure above chat widget and clickable/inputable */
.chat-swal-nickname-modal.swal2-container {
    z-index: 9999 !important;
}
.chat-swal-nickname-modal .swal2-popup,
.chat-swal-nickname-modal .swal2-title,
.chat-swal-nickname-modal .swal2-input {
    pointer-events: auto !important;
}
.chat-swal-nickname-modal .swal2-input:focus {
    outline: none;
    border-color: var(--bs-primary, #009ef7);
}

/* Group info modal footer: 50% buttons, 2 per row, Close on right */
#chat-group-info-modal .chat-group-info-modal-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: #fafafa;
}
#chat-group-info-modal .chat-group-info-modal-footer .row {
    margin-left: 0;
    margin-right: 0;
}
#chat-group-info-modal .chat-group-info-modal-footer .btn {
    min-width: 2.5rem;
    font-weight: 500;
}
#chat-group-info-modal .chat-group-info-modal-footer .col-6 {
    flex: 0 0 50%;
    max-width: 50%;
}
#chat-message-input-wrap .chat-input-field,
#chat-widget-message-input{
    font-size: 18px;
}
.chat-msg-body,
#chat-message-input,
#chat-widget-message-input {
    font-family: "Twemoji Country Flags", var(--bs-body-font-family, "Segoe UI", Arial, sans-serif);
}
.chat-msg-body {
    font-size: 16px;
    white-space: pre-wrap;   /* preserve \n line breaks from the message text */
    overflow-wrap: break-word; /* wrap long URLs / reference numbers instead of overflowing */
}
.dropdown-item.chat-quick-react {
    font-size: 20px;
}

/* ── Chat: image messages ──────────────────────────────────────────────────
   A photo carries its own frame, so it gets no bubble. Previously the bubble
   was stretched to 280px by the wrapped file name while a portrait image only
   filled part of it, leaving a slab of empty blue beside every picture.
   Now the image defines the width (fitChatImageBubbles() pins it once the
   real dimensions are known) and the name sits underneath, truncated.
   Applies to both /chat and the widget — they share chat-scripts.blade.php. */
.chat-msg-bubble.chat-msg-bubble-media {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none;
}
/* The blanket "everything inside my own bubble is white" rule above assumes a
   primary-coloured background. With no background, white text on the white
   thread is invisible — so the file name, timestamp and ticks revert to the
   normal body colour for media bubbles. */
.chat-msg-row[data-is-sent="1"] .chat-msg-bubble-media,
.chat-msg-row[data-is-sent="1"] .chat-msg-bubble-media .chat-msg-body,
.chat-msg-row[data-is-sent="1"] .chat-msg-bubble-media .chat-msg-body small,
.chat-msg-row[data-is-sent="1"] .chat-msg-bubble-media .chat-msg-sender-name,
.chat-msg-row[data-is-sent="1"] .chat-msg-bubble-media .chat-msg-forwarded,
.chat-msg-row[data-is-sent="1"] .chat-msg-bubble-media .chat-msg-meta span.opacity-75,
.chat-msg-row[data-is-sent="1"] .chat-msg-bubble-media .chat-msg-status-icon {
    color: var(--kt-gray-700, #5e6278) !important;
}
.chat-img-wrap {
    display: block;
    line-height: 0;      /* kills the inline-baseline gap under the image */
}
.chat-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 420px;
    border-radius: 10px;
    pointer-events: none;   /* the click belongs to the .mf-prev wrapper */
}
/* `width: 0` keeps the name OUT of the bubble's intrinsic width — a long name
   on a single nowrap line would otherwise stretch the bubble straight back to
   its 280px maximum, which is the bug being fixed — while `min-width: 100%`
   still lets it fill whatever width the image settled on. */
.chat-media-name {
    display: block;
    width: 0;
    min-width: 100%;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    line-height: 1.35;
}
.chat-msg-bubble-media .chat-msg-meta {
    width: 0;
    min-width: 100%;
}
/* History popup: the whole file name, wrapped rather than truncated — this is
   the one place it is shown in full. */
.chat-history-file-name {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 13px;
    color: var(--kt-gray-700, #5e6278);
}
/* A reply quote above an image has no bubble to sit on any more, so it brings
   its own surface. */
.chat-msg-bubble-media .chat-reply-quote-wrap {
    background: var(--kt-gray-100, #f5f8fa);
    border-radius: 6px;
    padding: 4px 6px;
    margin-bottom: 4px;
}

#chat-widget-conversation-list .chat-conv-item .symbol img{
    width: 45px!important;
}
.passenger-count-item {
    /* align-items: flex-start!important; */
    font-size: 15px;
}

.passenger-count-item svg {
    flex: 0 0 auto;
    fill: #000000;
}
.passenger-count-item, .passenger-count-item * {
    color: #000000;
}
#kt_flight_list_search {
    background-color: #7c6abb;
    color: #ffffff;
}
#kt_flight_list_search::placeholder {
    color: #ffffff;
}
.timeline-content .file-prev-thumb {
    height: 100%;border-radius: 5px;
}

/* Chat (/chat + widget): the LEFT BORDER is the conversation-row accent — it
   appears on hover and stays on for the row whose thread is open. Declared
   FIRST so the unread/active rules below (same specificity) win on order;
   every row reserves the 3px up front so nothing shifts sideways when the
   accent turns on. */
#chat-conversation-list .chat-conv-item,
#chat-widget-conversation-list .chat-conv-item {
    border-left: 3px solid transparent;
    transition: background-color .15s ease, border-left-color .15s ease;
}
#chat-conversation-list .chat-conv-item:hover,
#chat-widget-conversation-list .chat-conv-item:hover {
    background-color: rgba(0, 158, 247, 0.06);
    border-left-color: rgba(0, 158, 247, 0.45);
}

/* Chat (/chat + widget): highlight conversation rows with unread messages */
#chat-conversation-list .chat-conv-item-unread,
#chat-widget-conversation-list .chat-conv-item-unread {
    background-color: rgba(80, 205, 137, 0.12);
    border-left: 3px solid var(--kt-success, #50cd89);
}
#chat-conversation-list .chat-conv-item-unread:hover,
#chat-widget-conversation-list .chat-conv-item-unread:hover {
    background-color: rgba(80, 205, 137, 0.2);
}
#chat-conversation-list .chat-conv-item-unread .fw-bold.text-gray-800,
#chat-widget-conversation-list .chat-conv-item-unread .fw-bold.text-gray-800 {
    color: var(--kt-gray-900, #1e2129) !important;
}

/* The OPEN conversation wears that same left border, filled in — declared
   AFTER the unread + hover rules on purpose: a row can be unread or hovered
   at the same time, and "you are reading this one" must win. The background
   stays faint deliberately, so the border carries the signal. */
#chat-conversation-list .chat-conv-item-active,
#chat-widget-conversation-list .chat-conv-item-active,
#chat-conversation-list .chat-conv-item-active:hover,
#chat-widget-conversation-list .chat-conv-item-active:hover {
    background-color: rgba(0, 158, 247, 0.08);
    border-left-color: var(--kt-primary, #009ef7);
}
#chat-conversation-list .chat-conv-item-active .fw-bold.text-gray-800,
#chat-widget-conversation-list .chat-conv-item-active .fw-bold.text-gray-800 {
    color: var(--kt-primary-active, #0095e8) !important;
}

#chat-conversation-list .symbol.symbol-45px>img{
    object-fit: cover;
}

/* =========================================================================
   CKEditor rendered content — used on the cancellation request show page
   (and reusable anywhere admin-curated rich text needs to be displayed).
   Mirrors the typography rules the passenger portal applies via
   .trip-policy-html so the admin sees roughly what the passenger sees.
   ========================================================================= */

.cxr-policy-html {
    color: #181c32;
    font-size: 14px;
    line-height: 1.6;
    word-break: break-word;
}
.cxr-policy-html p {
    margin: 0 0 0.85em 0;
}
.cxr-policy-html p:last-child {
    margin-bottom: 0;
}
.cxr-policy-html h1,
.cxr-policy-html h2,
.cxr-policy-html h3,
.cxr-policy-html h4,
.cxr-policy-html h5,
.cxr-policy-html h6 {
    color: #181c32;
    font-weight: 700;
    line-height: 1.3;
    margin: 1.1em 0 0.5em 0;
}
.cxr-policy-html h1:first-child,
.cxr-policy-html h2:first-child,
.cxr-policy-html h3:first-child,
.cxr-policy-html h4:first-child,
.cxr-policy-html h5:first-child,
.cxr-policy-html h6:first-child {
    margin-top: 0;
}
.cxr-policy-html h1 { font-size: 1.5em; }
.cxr-policy-html h2 { font-size: 1.35em; }
.cxr-policy-html h3 { font-size: 1.2em; }
.cxr-policy-html h4 { font-size: 1.1em; }
.cxr-policy-html h5 { font-size: 1em; }
.cxr-policy-html h6 { font-size: 0.95em; }

.cxr-policy-html strong,
.cxr-policy-html b {
    font-weight: 700;
}
.cxr-policy-html em,
.cxr-policy-html i {
    font-style: italic;
}
.cxr-policy-html u {
    text-decoration: underline;
}
.cxr-policy-html s,
.cxr-policy-html del {
    text-decoration: line-through;
    color: #7e8299;
}
.cxr-policy-html sub { vertical-align: sub; font-size: 0.85em; }
.cxr-policy-html sup { vertical-align: super; font-size: 0.85em; }

.cxr-policy-html a {
    color: #009ef7;
    text-decoration: underline;
    word-break: break-all;
}
.cxr-policy-html a:hover {
    color: #0084d6;
    text-decoration: none;
}

.cxr-policy-html ul,
.cxr-policy-html ol {
    margin: 0 0 0.85em 0;
    padding-left: 1.6em;
}
.cxr-policy-html ul { list-style: disc outside; }
.cxr-policy-html ol { list-style: decimal outside; }
.cxr-policy-html ul ul { list-style: circle outside; }
.cxr-policy-html ul ul ul { list-style: square outside; }
.cxr-policy-html li {
    margin: 0.25em 0;
}
.cxr-policy-html li > p:only-child {
    margin: 0;
}

.cxr-policy-html blockquote {
    margin: 0.75em 0;
    padding: 0.6em 1em;
    border-left: 4px solid #009ef7;
    background: #f5f8fd;
    color: #3f4254;
    border-radius: 0 6px 6px 0;
}
.cxr-policy-html blockquote p:last-child {
    margin-bottom: 0;
}

.cxr-policy-html hr {
    border: 0;
    border-top: 1px solid #e4e6ef;
    margin: 1em 0;
}

.cxr-policy-html code {
    background: #f1f3f7;
    color: #d63384;
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
}
.cxr-policy-html pre {
    background: #1e1e2d;
    color: #f1f3f7;
    padding: 12px 16px;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 13px;
    margin: 0.75em 0;
}
.cxr-policy-html pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
}

.cxr-policy-html table {
    width: 100%;
    margin: 0.75em 0;
    border-collapse: collapse;
}
.cxr-policy-html th,
.cxr-policy-html td {
    border: 1px solid #e4e6ef;
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}
.cxr-policy-html thead th {
    background: #f5f8fd;
    font-weight: 700;
}

.cxr-policy-html img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 0.5em 0;
}
.cxr-policy-html figure {
    margin: 0.75em 0;
    text-align: center;
}
.cxr-policy-html figcaption {
    font-size: 12px;
    color: #7e8299;
    margin-top: 0.25em;
}

/* Accordion header tweaks specific to the policy panel — keep the chevron and
   the colored heading background harmonized with the rest of the Metronic theme. */
.cxr-policies .accordion-button {
    box-shadow: none;
}
.cxr-policies .accordion-button:not(.collapsed) {
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}
.cxr-policies .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}
.cxr-policies .accordion-item {
    overflow: hidden;
}
.cxr-policies .accordion-body {
    background: #ffffff;
}

/* =========================================================================
   Passenger Requests drawer — tabbed (Live Chat / Cancellations / Contact).
   The tab nav lives inside #kt_live_chat_drawer; keep tabs balanced + clearly
   active, and let the unread badge bubble float top-right of each tab label.
   ========================================================================= */
.prq-tabs {
    border-bottom: 1px solid #e4e6ef;
    flex-wrap: nowrap;
}
.prq-tabs .nav-item {
    min-width: 0;
}
.prq-tabs .nav-link {
    color: #7e8299;
    font-weight: 600;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .15s ease, border-color .15s ease;
}
.prq-tabs .nav-link:hover {
    color: #009ef7;
}
.prq-tabs .nav-link.active {
    color: #009ef7 !important;
    border-bottom-color: #009ef7 !important;
    background: transparent;
}
.prq-tabs .nav-link i {
    font-size: 14px;
}
.prq-tabs .prq-tab-badge {
    min-width: 18px;
    width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
    line-height: 18px;
}
.select2-container .img-thumbnail {
    object-fit: contain!important;
    object-position: center center;
}

.search-form-submit-btn .me-2.fa-spinner.fa-spin {
    margin: 0!important;
}
.search-form-submit-btn.search-ajax-submit.searching {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 575.98px) {
    .prq-tabs .nav-link {
        padding-left: .35rem !important;
        padding-right: .35rem !important;
    }
}

/* The Passenger Requests drawer fills every pixel to the right of the sidebar.
   - On lg+ (where the sidebar is the static 225px column), drawer = 100vw − 225px.
   - On mobile/tablet (sidebar is itself a drawer), drawer = 100vw.
   The `!important` keeps Metronic's inline width attribute from collapsing us. */
#kt_live_chat_drawer {
    width: 100% !important;
    max-width: 100% !important;
}
@media (min-width: 992px) {
    #kt_live_chat_drawer {
        /* The sidebar is 225px wide on desktop (see sidebar.blade.php data-kt-drawer-width). */
        /* width: calc(100vw - 225px) !important; */
        /* max-width: calc(100vw - 225px) !important; */

        width: 70vw !important;
        max-width: 70vw !important;
    }
}

span#marketing-selected-count {
    margin-right: 3px;
}
/* Header user-menu popup (#kt_header_user_menu_toggle): the dropdown is a fixed
   275px, and the name/email column is a flex item whose default min-width:auto
   lets long text push past the box edge. Let the column shrink and wrap long
   names/emails onto multiple lines instead of overflowing. */
#kt_header_user_menu_toggle .menu-sub .menu-content > .d-flex.flex-column {
    min-width: 0;
    flex: 1 1 auto;
}
#kt_header_user_menu_toggle .menu-sub .menu-content .d-flex.flex-column > div,
#kt_header_user_menu_toggle .menu-sub .menu-content .d-flex.flex-column > a {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

/* Click-to-copy affordance for the name/email inside the user-menu popup. */
#kt_header_user_menu_toggle .user-menu-copy {
    cursor: pointer;
}
#kt_header_user_menu_toggle .user-menu-copy:hover {
    color: var(--bs-primary, #1b84ff) !important;
}

/* Facebook chat header drawer toggle badge (same style as the other header counters). */
#kt_fb_chat_toggle {
    position: relative;
}
#kt_fb_chat_toggle .fb-chat-drawer-count {
    position: absolute;
    top: 0;
    right: 0px;
    /* A CIRCLE, always — never a pill. "99+" is the longest string any badge can
       hold (badgeCount() / nttBadgeCount() cap it there), so the circle is
       sized to fit those three characters and the font tuned to them. A fixed
       width and height is what keeps it round: let the box grow with its text
       and a two-digit count is already an ellipse. */
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    box-sizing: border-box;
    font-size: 10px;
    font-weight: 600;
    background: #009ef7;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Structured Automation Chatbot message card (group chat + inbox page) ----
   Renders "New Customer Request : Name : X, Phone : Y, …" as readable rows.
   Colors use currentColor so it looks right on both the light bubble and the
   primary (white-text) bubble without any per-surface overrides. */
.chatbot-msg-card { display: flex; flex-direction: column; }
.chatbot-msg-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    line-height: 1.3;
    padding-bottom: 5px;
    margin-bottom: 6px;
    border-bottom: 1px solid currentColor;
    border-color: color-mix(in srgb, currentColor 22%, transparent);
    opacity: .95;
}
.chatbot-msg-title i { opacity: .8; }
.chatbot-msg-fields { display: flex; flex-direction: column; gap: 4px; }
.chatbot-msg-row { display: flex; gap: 8px; align-items: baseline; }
.chatbot-msg-label {
    flex: 0 0 auto;
    min-width: 92px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: .02em;
    opacity: .6;
}
.chatbot-msg-value { flex: 1 1 auto; font-weight: 600; overflow-wrap: anywhere; }
.chatbot-msg-value.is-empty { font-weight: 500; font-style: italic; opacity: .45; }
.chatbot-msg-note { overflow-wrap: anywhere; }
/* Narrow chat bubbles: stack label above value so long values keep their width,
   and tighten everything so the card doesn't dominate the thread. */
.chat-msg-bubble .chatbot-msg-row { flex-direction: column; gap: 0; }
.chat-msg-bubble .chatbot-msg-label { min-width: 0; font-size: 9.5px; }
.chat-msg-bubble .chatbot-msg-title { font-size: .92em; padding-bottom: 4px; margin-bottom: 4px; }
.chat-msg-bubble .chatbot-msg-fields { gap: 2px; }
.chat-msg-bubble .chatbot-msg-value { font-size: .92em; line-height: 1.35; }

/* Internal chat: show typed line breaks (Shift+Enter) as written. Without this
   the browser collapses newlines into spaces, so a multi-line message looked
   like one paragraph on screen while the copied text still had its breaks —
   display and clipboard now match. The structured chatbot card is built from
   block elements, so pre-wrap doesn't affect it. */
.chat-msg-bubble .chat-msg-body,
.chat-msg-bubble .chat-msg-reply-text { white-space: pre-wrap; overflow-wrap: anywhere; }
/* The quoted-reply preview stays a single ellipsised line. */
.chat-msg-bubble .chat-reply-quote-wrap,
.chat-msg-bubble .chat-reply-quote-body { white-space: nowrap; }

/* ---- Chat: pending attachment preview (paste or pick -> preview -> Send) ---- */
.chat-attach-preview { padding: 6px 2px 8px; }
.chat-attach-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--kt-gray-300, #e4e6ef);
    border-radius: 8px;
    background: var(--kt-gray-100, #f9f9f9);
}
.chat-attach-thumb {
    width: 46px; height: 46px; flex: 0 0 46px;
    border-radius: 6px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--kt-gray-200, #f1f1f2);
}
.chat-attach-thumb img { width: 100%; height: 100%; object-fit: cover; }
.chat-attach-thumb i { font-size: 20px; }
.chat-attach-meta { min-width: 0; flex: 1 1 auto; }
.chat-attach-name {
    font-size: .85rem; font-weight: 600; color: var(--kt-gray-800, #3f4254);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-attach-size { font-size: .72rem; color: var(--kt-gray-500, #a1a5b7); }
.chat-attach-remove {
    flex: 0 0 auto;
    border: 0; background: transparent; cursor: pointer;
    color: var(--kt-gray-500, #a1a5b7); padding: 4px 6px; border-radius: 6px;
    transition: background .15s, color .15s;
}
.chat-attach-remove:hover { background: var(--kt-danger-light, #fff5f8); color: var(--kt-danger, #f1416c); }

/* ---- Chat: sent non-previewable file card (WhatsApp / Messenger style) ---- */
.chat-file-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    min-width: 190px;
    max-width: 260px;
    border-radius: 10px;
    text-decoration: none !important;
    color: inherit !important;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(0, 0, 0, .07);
    transition: background .15s;
}
.chat-file-card:hover { background: rgba(255, 255, 255, .85); }
/* On the blue (sent) bubble the card sits on a translucent white layer. */
.chat-msg-row[data-is-sent="1"] .chat-file-card {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .28);
}
.chat-msg-row[data-is-sent="1"] .chat-file-card:hover { background: rgba(255, 255, 255, .28); }
.chat-file-card-icon {
    flex: 0 0 38px; width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, .9);
    font-size: 18px;
}
.chat-file-card-info { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.chat-file-card-name {
    font-size: .82rem; font-weight: 600; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-file-card-meta { font-size: .68rem; opacity: .75; line-height: 1.3; }
/* Download affordance: it inherited the bubble text colour at low opacity and
   washed out on the blue (sent) bubble. Give it an explicit colour per surface
   — light on the blue bubble, muted-dark on light backgrounds. */
.chat-file-card-action {
    flex: 0 0 auto;
    font-size: .85rem;
    opacity: 1;
}
/* The <i> itself must be coloured: a theme rule paints icons inside the bubble
   muted grey (#a1a5b7), which washed out on the blue bubble even when the
   wrapper was white. */
.chat-file-card .chat-file-card-action,
.chat-file-card .chat-file-card-action i { color: #7e8299; }   /* light surfaces */
.chat-file-card:hover .chat-file-card-action,
.chat-file-card:hover .chat-file-card-action i { color: #009ef7; }
.chat-msg-row[data-is-sent="1"] .chat-file-card .chat-file-card-action,
.chat-msg-row[data-is-sent="1"] .chat-file-card .chat-file-card-action i,
.chat-msg-row[data-is-sent="1"] .chat-file-card:hover .chat-file-card-action i {
    color: #ffffff !important;   /* sent (blue) bubble */
}

/* Composer layout for pages that reuse the chat input outside /chat (e.g. the
   Automation Chatbot reply page) — mirrors #chat-message-input-wrap so the
   input box + emoji/attach/send buttons sit exactly as they do in the chat. */
.chat-composer-wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    align-items: end;
    width: 100%;
    min-width: 0;
}
.chat-composer-wrap .chat-input-field { min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; }
@media (max-width: 767.98px) { .chat-composer-wrap { gap: 0.35rem; } }

/* ---------------------------------------------------------------------------
   Drag & drop file attach (chat page, chat widget, chatbot reply page)
   The overlay is pointer-events:none on purpose: if it swallowed pointer events
   it would fire dragleave the moment it appeared under the cursor, making the
   whole thing flicker.
   --------------------------------------------------------------------------- */
.chat-dropzone-overlay {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: rgba(0, 158, 247, 0.08);
    border: 2px dashed #009ef7;
    border-radius: 0.475rem;
}
.chat-dropzone-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.4rem;
    border-radius: 0.475rem;
    background: #ffffff;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.12);
    color: #009ef7;
    font-weight: 600;
    font-size: 0.95rem;
    text-align: center;
}
.chat-dropzone-inner i { font-size: 1.6rem; }

/* ---------------------------------------------------------------------------
   Rich link previews (composer bar + inside sent bubbles)
   --------------------------------------------------------------------------- */
.chat-link-preview-bar { position: relative; margin-bottom: 0.5rem; }
.chat-link-preview {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    text-decoration: none;
    background: #f8fafc;
    border: 1px solid #e4e6ef;
    border-left: 3px solid #009ef7;
    border-radius: 0.475rem;
    overflow: hidden;
    padding: 0.5rem 0.65rem;
    max-width: 100%;
}
.chat-link-preview:hover { background: #f1f5f9; }
.chat-link-preview-loading { color: #7e8299; font-size: 0.85rem; align-items: center; }
.chat-link-preview-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 84px;
    height: 64px;
    border-radius: 0.35rem;
    overflow: hidden;
    background: #eef0f4;
}
.chat-link-preview-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-link-preview-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    font-size: 1.1rem;
}
.chat-link-preview-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;          /* lets the ellipsis actually kick in */
    gap: 2px;
}
.chat-link-preview-site { font-size: 0.7rem; text-transform: uppercase; letter-spacing: .03em; color: #a1a5b7; }
.chat-link-preview-title {
    font-size: 0.87rem;
    font-weight: 600;
    color: #181c32;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.chat-link-preview-desc {
    font-size: 0.78rem;
    color: #7e8299;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.chat-link-preview-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    border: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    padding: 0;
}
.chat-link-preview-remove:hover { background: rgba(0, 0, 0, 0.65); }

/* Inside a bubble: narrower, and sits under the message text. */
.chat-msg-body .chat-link-preview-compact { margin-top: 6px; width: 100%; }
.chat-link-preview-compact .chat-link-preview-thumb { width: 64px; height: 50px; }
.chat-link-preview-compact .chat-link-preview-title { font-size: 0.8rem; }
.chat-link-preview-compact .chat-link-preview-desc { font-size: 0.72rem; }
/* On the blue sent bubble the light card would glare, so tint it instead. The
   generic "white text in a sent bubble" rule would otherwise make the card's
   own text invisible against its light background. */
.chat-msg-row[data-is-sent="1"] .chat-link-preview {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.32);
    border-left-color: #ffffff;
}
.chat-msg-row[data-is-sent="1"] .chat-link-preview:hover { background: rgba(255, 255, 255, 0.24); }
.chat-msg-row[data-is-sent="1"] .chat-link-preview-title { color: #ffffff; }
.chat-msg-row[data-is-sent="1"] .chat-link-preview-desc,
.chat-msg-row[data-is-sent="1"] .chat-link-preview-site { color: rgba(255, 255, 255, 0.85); }
/* The bubble's generic link rule (.chat-msg-body a) is more specific than the
   card's own `text-decoration: none`, so it underlined every line of the card.
   Kill it on the card and its children — a preview card should read as a card,
   not as a link. */
/* !important is needed, not laziness: the bubble rule is a more specific
   selector, and text-decoration set on an ancestor is DRAWN THROUGH its
   descendants — a child cannot opt out. It has to be removed on the <a>. */
.chat-msg-body a.chat-link-preview,
.chat-msg-body a.chat-link-preview:hover,
.chat-msg-body a.chat-link-preview span {
    text-decoration: none !important;
}

/* ---------------------------------------------------------------------------
   Thread switch preloader (chat page + widget)
   Fills the message area so the spinner is centred rather than clinging to the
   top, and so the outgoing conversation is visibly gone the instant you switch.
   --------------------------------------------------------------------------- */
.chat-thread-loading {
    min-height: 180px;
    height: 100%;
    gap: 0;
    text-align: center;
    padding: 1.5rem 1rem;
}

/* ---------------------------------------------------------------------------
   .min-w-0 — MISSING UTILITY, defined here.

   The markup uses this class in 14 places (chat lists, the FB/sticky-note
   drawers, flight status) to let a flex child shrink so `text-truncate` can
   engage. But neither Bootstrap 5 nor the Metronic bundle ships it, so it was
   doing nothing: a flex item defaults to `min-width: auto`, refuses to shrink
   below its content, and the row overflows instead of truncating — which is
   what pushed the timestamp off the edge of the chat widget's group rows.
   --------------------------------------------------------------------------- */
.min-w-0 {
    min-width: 0 !important;
}

/* ---------------------------------------------------------------------------
   Impersonation banner — shown while the superadmin is acting as another user.
   Deliberately loud and full-width: it must be impossible to forget whose
   account you are in, and the way back must always be one click away.
   --------------------------------------------------------------------------- */
/* Deliberately NOT sticky/fixed. It is rendered inside #kt_app_main, i.e.
   BELOW the app header — but `position: sticky; top: 0` made it detach on
   scroll and ride up over the header (which is itself fixed), which looked
   broken. It now scrolls away with the page like any other in-flow banner.
   Because of that the banner is no longer a PERMANENT exit, so the
   "Return to my account" link was added to the user dropdown in BOTH headers
   at the same time — keep that entry if you touch this. */
.impersonation-banner {
    background: linear-gradient(90deg, #ffc700, #ffa800);
    color: #1e1e2d;
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.impersonation-banner i { color: #1e1e2d; }
.impersonation-banner .btn { white-space: nowrap; }
@media (max-width: 575.98px) {
    .impersonation-banner { font-size: 0.8rem; text-align: center; }
}

/* ---------------------------------------------------------------------------
   Client-contact modal opened from inside a Metronic drawer.

   Measured stacking: drawer = 99999, drawer overlay = 99998, Bootstrap modal =
   1055, modal backdrop = 1050. So a modal launched from the "Upcoming Flights"
   drawer rendered *behind* it. Both the dialog and its backdrop are lifted
   above the drawer, and the backdrop rule is scoped to the body class this
   modal sets so no other modal's stacking changes.
   --------------------------------------------------------------------------- */
#ticket_client_contact_modal {
    z-index: 100060;
}
body.ticket-client-contact-open .modal-backdrop {
    z-index: 100050;
}

/* ---------------------------------------------------------------------------
   SweetAlert above Metronic drawers — GLOBAL floor.

   Same stacking trap as the client-contact modal above: .drawer is 99999
   while Swal's own container defaults to 1060, so any confirm/alert fired
   from inside a drawer (the notifications panel's "Marks all as read",
   sticky notes, upcoming flights…) rendered half-hidden BEHIND the drawer.
   Swal is this app's one user-facing messenger (toastr renders nothing), so
   the floor is global rather than another per-case patch.

   100070 = above the drawer (99999) AND above the lifted client-contact
   modal (100060, a confirm fired from that modal must still top it), below
   the .r-preloader (999999). !important so it also beats the chat scripts'
   inline 2100 over-modal bump — 100070 still satisfies that rule's purpose
   (above Bootstrap modals at 1055). The chat nickname Swal keeps its own
   more-specific rule and is unaffected. */
.swal2-container {
    z-index: 100070 !important;
}

/* ---------------------------------------------------------------------------
   Permission checklist (staff + business-owner/user add/edit) — card-based UI
   grouped into Invoice Software / Passenger Portal / Website domain tabs.
   See resources/views/common/_partials/permissionChecklist.blade.php and
   js/custom/permission-checklist.js.
   --------------------------------------------------------------------------- */
.ntt-perm-module-card {
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ntt-perm-module-card--full {
    border-color: #7239ea;
    background-color: #f8f5ff;
}
.ntt-perm-module .card-header .form-check-label {
    cursor: pointer;
}
/* Ctrl+F-style match highlight in the search box (permission-checklist.js) —
   explicit styling rather than the browser's default <mark> so it looks the
   same everywhere instead of varying by browser/theme. */
/* Placeholder text app-wide — Metronic/Bootstrap sets `::placeholder{opacity:1}`
   explicitly, so empty fields read almost as dark as filled ones (looked like
   the field already had a value). Softened everywhere: plain inputs/textareas
   (native ::placeholder), select2's "Select an option" text (its own span,
   not a real placeholder), and flatpickr/daterangepicker inputs (plain
   <input> underneath, already covered by ::placeholder but listed for
   clarity). `!important` because several vendored rules re-declare
   `::placeholder{color:...}` at matching specificity throughout the bundles —
   this only touches opacity, never fights their colour. */
::placeholder,
.select2-container .select2-selection__placeholder {
    opacity: 0.55 !important;
}

.ntt-perm-highlight {
    background-color: #fff3a3;
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

/* ==========================================================================
   FORM CONTROL TYPE SIZE  (admin panel + ntt-web admin)

   14px everywhere by default, 16px at 1024px and below.

   The 16px tier is not cosmetic: iOS Safari zooms the whole page when a
   focused field computes under 16px and leaves the layout shifted afterwards.
   The field's own size is the only way to prevent it.

   Plugin widgets are listed explicitly because several of them do NOT use a
   real <input> for the visible text — select2 paints a <span>, and the
   daterangepicker paints its own label — so an input/textarea/select selector
   alone silently misses them and they stay small next to everything else.

   !important is required: .form-control and the theme's own rules are more
   specific than a bare element selector.

   Excluded: checkbox/radio/range/color (no typed text, no zoom), and rich
   text editors, which are contenteditable and are not matched here at all.
   ========================================================================== */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
textarea,
select,
.form-control,
.form-select,
.select2-container .select2-selection__rendered,
.select2-container .select2-search__field,
.select2-container .select2-selection__placeholder,
.select2-results__option,
.daterangepicker,
.daterangepicker .drp-selected,
.daterangepicker input,
.flatpickr-input,
.flatpickr-calendar {
    font-size: 14px !important;
}

@media (max-width: 1024px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    textarea,
    select,
    .form-control,
    .form-select,
    .select2-container .select2-selection__rendered,
    .select2-container .select2-search__field,
    .select2-container .select2-selection__placeholder,
    .select2-results__option,
    .daterangepicker,
    .daterangepicker .drp-selected,
    .daterangepicker input,
    .flatpickr-input,
    .flatpickr-calendar {
        font-size: 16px !important;
    }
}

/* ==========================================================================
   Collapsible card header (permissions accordion on staff + user add/edit).
   Bootstrap Collapse animates the body height; this only styles the toggler.
   Chevron points down when closed, rotates up while open — driven purely by
   the aria-expanded attribute Bootstrap maintains on the toggler, no JS here.
   ========================================================================== */
.r-acc-toggle { cursor: pointer; user-select: none; }
.r-acc-toggle .r-acc-chevron { transition: transform 0.35s ease; color: #7e8299; }
.r-acc-toggle[aria-expanded="true"] .r-acc-chevron { transform: rotate(180deg); }

/* ==========================================================================
   Duplicate-ticket modal (#ticketDuplicateModal) — the custom popup the silent
   duplicate probe opens on the ticket-create + search-import pages when the
   first passenger's name + flight dates + airlines match existing tickets.
   Markup is injected by assets/js/custom/ticket-duplicate-check.js; the
   Details button inside each card is the ticket list's own .show-ticket-btn,
   which opens the global 3-layout chooser (#ticketLayoutModal).
   ========================================================================== */
.tdc-modal .modal-dialog { max-width: 880px; }
.tdc-modal .modal-content { border: 0; border-radius: 1rem; overflow: hidden; }

/* Header: soft warning band, tinted icon disc, title + subtitle stacked. */
.tdc-head { align-items: flex-start; gap: 1rem; padding: 1.35rem 1.75rem; background: #fffbeb; border-bottom: 1px solid #fde68a; }
.tdc-head-icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fef3c7; color: #d97706; font-size: 1.25rem; }
.tdc-head-text { min-width: 0; }
.tdc-head .modal-title { font-size: 1.15rem; font-weight: 700; color: #1e2129; }
.tdc-head-sub { margin-top: 0.2rem; font-size: 0.9rem; color: #78716c; }
.tdc-head .btn-close { margin-left: auto; }

.tdc-body { padding: 1.25rem 1.75rem; background: #f8fafc; }
.tdc-list { display: flex; flex-direction: column; gap: 0.9rem; max-height: 56vh; overflow-y: auto; padding-right: 0.25rem; }
/* modal-dialog-scrollable already bounds the body; the inner cap keeps long
   lists comfortable on desktop while fullscreen-sm-down owns small screens. */
.modal-fullscreen-sm-down .tdc-list { max-height: none; }

/* One matched ticket. */
.tdc-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.75rem; padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: 0.55rem; transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.tdc-card:hover { border-color: #cbd5e0; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07); }
.tdc-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; }
.tdc-uid { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.95rem; color: #1e2129; letter-spacing: 0.2px; }
.tdc-uid i { color: #d97706; }
.tdc-date { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: #64748b; background: #f1f5f9; border-radius: 2rem; padding: 0.15rem 0.6rem; }
.tdc-actions { margin-left: auto; display: inline-flex; gap: 0.5rem; }

.tdc-pax { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tdc-pax-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 600; color: #334155; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 2rem; padding: 0.2rem 0.65rem; }
.tdc-pax-chip i { font-size: 0.7rem; color: #94a3b8; }

.tdc-flight { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem 0.6rem; font-size: 0.85rem; color: #475569; padding-left: 0.15rem; }
.tdc-flight-icon { color: #0ea5e9; font-size: 0.8rem; transform: translateY(1px); }
.tdc-flight-airline { font-weight: 600; color: #334155; white-space: nowrap; }
.tdc-flight-route { min-width: 0; flex: 1 1 auto; overflow-wrap: break-word; }
.tdc-flight-date { color: #64748b; white-space: nowrap; }

.tdc-footer { padding: 1rem 1.75rem; border-top: 1px solid #eef2f7; }

/* Small screens: fullscreen-sm-down makes the dialog edge-to-edge; stack the
   action buttons under the ticket id instead of squeezing beside it. */
@media (max-width: 575.98px) {
	.tdc-head { padding: 1.1rem 1.25rem; }
	.tdc-body { padding: 1rem 1.25rem; }
	.tdc-actions { margin-left: 0; width: 100%; }
	.tdc-actions .btn { flex: 1 1 auto; }
	.tdc-flight-date { white-space: normal; }
	.tdc-footer { padding: 0.85rem 1.25rem; }
	.tdc-footer .btn { width: 100%; }
}

/* Stacked state: the 3-layout chooser (#ticketLayoutModal) opens ON TOP of the
   duplicate modal — same depth treatment as the quotation -> mail modal pair.
   The duplicate modal is appended to <body> END, so at Bootstrap's shared
   z-index it would paint ABOVE the chooser; body.tdc-layout-open lifts the
   chooser and its backdrop (the last one added) over it explicitly. */
#ticketDuplicateModal .modal-dialog { transition: filter 0.22s ease, transform 0.22s ease, opacity 0.22s ease; }
#ticketDuplicateModal.tdc-behind .modal-dialog {
	filter: blur(4px) saturate(0.85);
	transform: scale(0.985);
	opacity: 0.85;
	pointer-events: none;
}
body.tdc-layout-open #ticketLayoutModal { z-index: 1075; }
body.tdc-layout-open .modal-backdrop.show:last-of-type { z-index: 1070; opacity: 0.6; }

/* Compact audit strip at the bottom of each duplicate-modal card: send
   counters + created/updated pairs as icon chips on one wrapping muted line
   (full labels live in the title tooltips). Status renders in the card head
   as the SAME Bootstrap badge tones the ticket list uses. */
.tdc-status { font-size: 0.68rem; padding: 0.3rem 0.55rem; }
.tdc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem; border-top: 1px dashed #e2e8f0; padding-top: 0.55rem; margin-top: 0.15rem; font-size: 0.80rem; color: #64748b; }
.tdc-meta-item { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.tdc-meta-item i { font-size: 0.72rem; color: #94a3b8; }
.tdc-meta-item .tdc-i-mail { color: #0ea5e9; }
.tdc-meta-item .tdc-i-wa { color: #22c55e; font-size: 0.82rem; }
@media (max-width: 575.98px) {
	.tdc-meta { gap: 0.3rem 0.75rem; }
	.tdc-meta-item { white-space: normal; }
}

/* =====================================================================
   Attendance — break type chooser + clock status
   The Pause button opens a SweetAlert asking WHICH break, so these style
   the two option cards, the optional reason field, and the status chip
   that sits beside the header timer.
   ===================================================================== */
/* The popup must grow with its content. SweetAlert lays the dialog out when it
   opens, and .swal2-html-container is `overflow: auto` — so revealing the
   reason field afterwards scrolled/clipped it inside a container that had
   already been sized, instead of making the dialog taller. The textarea came
   out cut in half.
   max-height:none lets the container size to its content; the popup itself
   takes over as the scroller, capped at 90vh so a long reason on a short
   screen scrolls the dialog rather than running off the viewport. */
.attendance-pause-popup { max-width: 34rem; max-height: 90vh; overflow-y: auto; }
.attendance-pause-popup .swal2-html-container {
	max-height: none;
	overflow: visible;
	/* Without this the flex parent is free to shrink it back down again. */
	flex-shrink: 0;
}
.attendance-pause-options { text-align: left; }
.attendance-pause-options .apo-hint { margin: 0 0 0.9rem; font-size: 0.92rem; color: #64748b; }

.attendance-pause-options .apo-option {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	width: 100%;
	margin-bottom: 0.6rem;
	padding: 0.85rem 1rem;
	border: 1.5px solid #e2e8f0;
	border-radius: 0.65rem;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.attendance-pause-options .apo-option:hover { border-color: #93c5fd; background: #f8fafc; }
.attendance-pause-options .apo-option.is-selected {
	border-color: #3085d6;
	background: #eff6ff;
	box-shadow: 0 0 0 3px rgba(48, 133, 214, 0.12);
}
/* The radio itself carries the checked state for the form; the card is the
   visible control, so the input only needs to stay reachable, not styled. */
.attendance-pause-options .apo-option input[type="radio"] { flex: 0 0 auto; margin: 0; width: 1.05rem; height: 1.05rem; cursor: pointer; }

.attendance-pause-options .apo-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: #f1f5f9;
	color: #3085d6;
}
.attendance-pause-options .apo-option.is-selected .apo-icon { background: #dbeafe; }
/* Metronic paints every <i> a flat muted grey — the icon needs its colour
   set explicitly here or it washes out inside the card. */
.attendance-pause-options .apo-icon i { color: #3085d6 !important; font-size: 1rem; }

.attendance-pause-options .apo-body { display: flex; flex-direction: column; min-width: 0; }
.attendance-pause-options .apo-title { font-weight: 600; color: #1e293b; line-height: 1.3; }
.attendance-pause-options .apo-desc { font-size: 0.8rem; color: #64748b; line-height: 1.35; }

.attendance-pause-options .apo-reason-wrap { margin-top: 0.35rem; padding: 0 0.15rem 0.15rem; }
.attendance-pause-options .apo-reason-label { display: block; margin-bottom: 0.35rem; font-size: 0.83rem; font-weight: 600; color: #475569; }
.attendance-pause-options .apo-reason-input {
	font-size: 0.9rem;
	line-height: 1.4;
	/* Vertical only: a horizontal drag inside a SweetAlert can push the popup
	   wider than the viewport, and there is nothing to gain from a wider box. */
	resize: vertical;
	min-height: 3.9rem;
}

/* Clock Status chip beside the header timer. */
.clock-status-chip {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0.1rem 0.45rem;
	border-radius: 0.75rem;
	font-size: 0.66rem;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	vertical-align: middle;
}
.clock-status-chip.is-running { background: #dcfce7; color: #15803d; }
.clock-status-chip.is-paused { background: #fef3c7; color: #b45309; }

/* Break history inside the check-out modal. */
.attendance-break-history { margin-top: 0.5rem; }
.attendance-break-history .abh-row {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.28rem 0;
	border-bottom: 1px dashed #e2e8f0;
	font-size: 0.82rem;
}
.attendance-break-history .abh-row:last-child { border-bottom: 0; }
.attendance-break-history .abh-type { font-weight: 600; color: #334155; }
.attendance-break-history .abh-time { color: #64748b; }
.attendance-break-history .abh-reason { color: #94a3b8; font-style: italic; }
/* Pushed right so every duration lines up in one column regardless of the
   label lengths to its left. */
.attendance-break-history .abh-duration { margin-left: auto; font-weight: 600; color: #b45309; white-space: nowrap; }
.attendance-break-history .abh-total {
	display: flex;
	justify-content: space-between;
	margin-top: 0.4rem;
	padding-top: 0.4rem;
	border-top: 1px solid #e2e8f0;
	font-weight: 700;
	color: #1e293b;
}

/* =====================================================================
   Company seal — per-surface visibility switches (My Profile)
   One row per destination, each with a note saying where it takes
   effect, because "show seal" alone does not tell you which document.
   ===================================================================== */
.seal-visibility {
	padding: 0.85rem 1rem;
	border: 1px solid #e2e8f0;
	border-radius: 0.5rem;
	background: #f8fafc;
}
.seal-visibility__head {
	margin-bottom: 0.6rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #475569;
}
.seal-visibility__row { padding: 0.4rem 0; border-bottom: 1px dashed #e2e8f0; }
.seal-visibility__row:last-child { border-bottom: 0; }
.seal-visibility__row .form-check-label { font-weight: 600; color: #1e293b; cursor: pointer; }
/* Indented to the switch's label so the note reads as belonging to it. */
.seal-visibility__note {
	display: block;
	margin-left: 2.55rem;
	font-size: 0.78rem;
	line-height: 1.35;
	color: #64748b;
}
@media (max-width: 575.98px) {
	.seal-visibility__note { margin-left: 0; }
}

/* ── Policy placeholder amount ──────────────────────────────────────────────
   The "Prefill" buttons on Cancellation / Reschedule Policy insert
   `your_desired_amount_here` wherever a fare-specific figure belongs. It has to
   be impossible to miss, so it is painted red and bold.

   The marker class only survives because `PolicyAmountMarker` in
   public/assets/js/custom.js teaches the editor to keep it: those fields are
   CKEditor 5 instances from Metronic's prebuilt ckeditor-classic.bundle.js,
   which ships only Bold, Italic and Link as inline formats — no FontColor, no
   GeneralHtmlSupport — so an inline style="color:red" is stripped the instant
   the content loads, and an unregistered class goes with it.
   (`ck-content` covers both the live editor and any rendered output;
   `ck-editor__editable` is belt-and-braces for the editing view.)

   TicketController@saveTicketData unwraps these spans on save, so this only
   ever paints while the form is open — see stripTicketPolicyPlaceholderMarkup().
   Details in docs/ticket-policy-prefill-plan.txt. */
.ck-content span.policy-amount,
.ck-editor__editable span.policy-amount {
	color: #d32f2f;
	font-weight: 700;
	text-decoration: none;
}

/* ── To Do drawer: unread items ─────────────────────────────────────────────
   Items in the header drawer's To Do tab start unread (payments.todo_read_status
   defaults to 0) and are tinted until someone marks them read or opens them.
   The flag is shared by every user, so this is the office's state, not a
   personal one.

   A tinted background plus a left edge rather than a solid primary fill: the
   card carries red "outstanding" badges and two buttons, and a saturated
   background behind them fails contrast and buries the very thing the panel
   exists to show. */
/* Read items get their own soft fill rather than sitting on the drawer's white
   background. Two reasons: it keeps every row reading as a card instead of some
   rows dissolving into the panel, and it makes "read" a deliberate state rather
   than the absence of one — which is what the blue unread tint is contrasted
   against. --kt-gray-100 is the theme's lightest neutral, so it stays quiet
   next to the unread blue and never competes with the red outstanding chips. */
.todo-drawer-item {
	background-color: var(--kt-gray-100, #f5f8fa);
}

.todo-drawer-item--unread {
	background-color: var(--bs-primary-bg-subtle, #f1faff);
	border-color: var(--bs-primary-border-subtle, #b9e2ff) !important;
	border-left: 4px solid var(--bs-primary, #009ef7) !important;
}

.todo-drawer-item .todo-read-toggle {
	flex-shrink: 0;
}


/* ── Passenger-requests drawer: keep its tab panes scrollable ───────────────
   Bootstrap activates a tab with `.tab-content > .active { display: block }`.
   THIS drawer is built as a flex column — a heading, then a list meant to take
   the remaining height and scroll — and that `display: block` silently kills
   the chain: `flex-column` and `flex-grow-1` stop applying, the inner
   `overflow-auto` never gets a bounded height, and the list runs past the
   bottom of the drawer with no way to reach it.

   Measured: without these two rules all four tabs have ZERO scrollable
   elements and their last row cannot be reached. With them, all four scroll.

   `min-height: 0` is the other half — a flex item defaults to `min-height:auto`
   and refuses to shrink below its content, so the scroll container would grow
   instead of scrolling.

   SCOPED TO THIS DRAWER ONLY, deliberately. The notification drawer's tabs were
   measured and already scroll fine on their own; applying the same rules there
   turned its panes into flex rows and wrecked the alignment. Do not widen this
   selector without re-measuring the drawer you are adding. */
#kt_live_chat_drawer .tab-content > .tab-pane.active {
	display: flex;
}

#kt_live_chat_drawer .tab-pane {
	min-height: 0;
}

/* ONLY the scrolling list may shrink. An earlier version of this rule put
   `min-height: 0` on every child, which removed the natural `min-height: auto`
   floor that stops a flex item collapsing — so with a long list the pane's
   heading and its "View all …" footer could be squeezed to nothing. Measured:
   both had flex-shrink:1 and min-height:0, i.e. fully collapsible.
   The list carries `flex-grow-1`; everything else holds its height. */
#kt_live_chat_drawer .tab-pane > .flex-grow-1 {
	min-height: 0;
}

#kt_live_chat_drawer .tab-pane > *:not(.flex-grow-1) {
	flex-shrink: 0;
}

/* ── Header drawers: reclaim the empty timeline gutter ──────────────────────
   Four drawers wrap their rows in Metronic's `.timeline`, which reserves a left
   column for an icon and a dashed vertical rail: notifications, upcoming
   flights and support tickets in admin/_partials/header.blade.php, plus sticky
   notes in common/_partials/sticky-notes-drawer.blade.php. That last one is in
   a DIFFERENT FILE, which is how it was missed the first time — grep the
   partials as well as the header when touching this.

   That icon is a `ki-duotone` glyph, and THIS BUILD SHIPS NO KEENICONS FONT —
   there is no font file under public/assets, no @font-face for it, and nothing
   loads one remotely. So all 8 of those icons render as nothing while
   `.timeline-icon` still contributes its box plus `margin-right: 1rem`, and
   `.timeline-line` draws a dashed rail next to an icon that is not there.
   The result is a chunk of blank space down the left of every row.

   Hiding the two empty elements gives the row its full width back. Scoped to
   these drawers so any other timeline in the app is untouched; if the icon font
   is ever added, delete this block rather than working around it. */
#kt_notification .timeline-icon,
#kt_flight_list .timeline-icon,
#kt_support_ticket_drawer .timeline-icon,
#kt_sticky_note .timeline-icon {
	display: none;
}

#kt_notification .timeline-line,
#kt_flight_list .timeline-line,
#kt_support_ticket_drawer .timeline-line,
#kt_sticky_note .timeline-line {
	display: none;
}

/* ── Header drawers: fixed height, pinned header/footer, only the list scrolls ─
   Metronic already pins `.drawer` to the full viewport (position:fixed; top:0;
   bottom:0), but it leaves the INSIDE to each drawer, and they disagreed:
   six sized their list with KTScroll (an inline pixel height computed from the
   header and footer named in data-kt-scroll-dependencies) while the passenger
   requests drawer used flex.

   KTScroll's arithmetic only knows about the elements it was told about, so
   adding the tab nav to the notification drawer silently broke it — measured at
   a 720px viewport, that drawer's own content came to more than the viewport,
   the whole drawer scrolled, and the footer fell BELOW THE FOLD. That is also
   the dead space that showed under the last payment row.

   One mechanism instead: the card is a flex column, header and footer hold
   their natural height, the body takes the rest and scrolls. Nothing has to be
   told which siblings exist, so a future tab nav or banner cannot break it.

   Scoped through [data-drawer-key], which is on exactly the seven header
   drawers — Metronic's other drawers (the mobile nav, the sidebar) are not
   touched. */
[data-drawer-key] {
	overflow: hidden;
}

[data-drawer-key] > .card {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
}

[data-drawer-key] > .card > .card-header,
[data-drawer-key] > .card > .card-footer {
	flex: 0 0 auto;
}

[data-drawer-key] > .card > .card-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

/* Release KTScroll's inline height so it cannot fight the flex chain. The
   drawers keep their data-kt-scroll attributes — harmless, and removing them
   would mean touching four Blade files — but the height now comes from the
   layout, not from arithmetic over a hard-coded list of siblings.
   NOTE the passenger-requests drawer's body carries Bootstrap's
   `.overflow-hidden` (an !important rule), so it keeps its own inner scroller
   and does not gain a second one from the card-body rule above. */
[data-drawer-key] [data-kt-scroll="true"] {
	height: auto !important;
	max-height: none !important;
}

/* ── Upcoming Flights drawer: pin the heading and search, scroll only the list ─
   This drawer nests everything inside a `.timeline > .timeline-item >
   .timeline-content`, so the heading and the search box lived INSIDE the
   scrolling region and slid away as soon as you scrolled — measured at 5178px
   above the viewport with the list scrolled to the bottom. The search box is
   the one control you want while hunting through 21 flights.

   Turning that nest into a flex column lets the items wrapper become the only
   scroller, which pins the heading and search above it without moving a single
   element in the Blade.

   It also removes 85px of dead space that sat between the last flight and the
   footer: `.timeline-content` carries `mb-10` (32.5px) and the wrapper `pb-5`
   (16.25px), both meant for a timeline that ends mid-page, not for a list that
   ends at a pinned footer. */
#kt_flight_list > .card > .card-body {
	/* display:flex is load-bearing, not decoration — without it this stays a
	   block box, its child is not a flex item, and the list grows to its full
	   content height (measured 5863px) instead of being bounded. */
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

#kt_flight_list #kt_flight_list_scroll,
#kt_flight_list .timeline,
#kt_flight_list .timeline-item,
#kt_flight_list .timeline-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

/* `.timeline-content` carries `mb-10` — 32.5px of trailing margin meant for a
   timeline that ends mid-page. These lists end at a PINNED FOOTER, so that
   margin is just dead space under the last row: measured 59px on the payments
   tab (32.5px margin + the card-body's own 26px padding). Dropping the margin
   leaves the padding as breathing room.
   Applied to every drawer that uses the timeline, so they stay consistent. */
#kt_notification .timeline-content,
#kt_flight_list .timeline-content,
#kt_support_ticket_drawer .timeline-content,
#kt_sticky_note .timeline-content {
	margin-bottom: 0 !important;
}

#kt_flight_list #kt_flight_list_items_wrapper {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding-bottom: 0.25rem !important;
}

/* ── Drawers: keep the list heading in view ─────────────────────────────────
   Headings scrolled away with their lists — the Payments count and its
   "mark all as read" button, and the To Do window ("…next 7 days (range)").
   The range in particular is the context for every row under it, so losing it
   on scroll is exactly backwards.

   Sticky rather than restructuring: these two headings sit at different depths
   (Payments is nested inside the timeline, To Do is a direct child of its pane),
   so one shared class is far less invasive than pinning each outside its
   scroller.

   THE CLASS GOES ON THE HEADING'S WRAPPER, NOT THE HEADING. A sticky element
   only travels within its own PARENT's box — put it on the heading itself and
   its parent is a wrapper barely taller than the heading, so it detaches
   immediately (measured: it slid 2697px out of view). On the wrapper, the
   parent is the tall timeline-content and it stays put. */
[data-drawer-key] .drawer-sticky-title {
	position: sticky;
	top: 0;
	z-index: 2;
	background-color: var(--kt-card-bg, #ffffff);
	/* Absorbs the card-body's top padding, zeroed just below. `top: 0` on a
	   sticky element resolves against the scroll container's PADDING box, not
	   its border box — so with the padding left on the body, rows scrolled up
	   through that 26px strip and were visible ABOVE the heading (measured: two
	   rows showing through). Holding the padding here instead puts the heading
	   flush against the top of the scrollport, with nothing able to pass over
	   it, and keeps the spacing looking the same. */
	padding-top: 1.625rem;
	padding-bottom: 0.5rem;
	/* A top MARGIN sits outside the sticky element's background, so rows show
	   through it as a thin strip (the chatbot heading's `mt-1` left a 3px gap).
	   The padding above provides the spacing instead. */
	margin-top: 0 !important;
}

#kt_notification > .card > .card-body,
#kt_chatbot_inbox_drawer > .card > .card-body,
#kt_fb_chat_drawer > .card > .card-body {
	padding-top: 0;
}

/* Sticky resolves against the nearest SCROLLING ancestor. The Payments heading
   sits inside #kt_notification_scroll, whose `scroll-y` class sets
   overflow-y:auto — that would capture the sticky and, since the element no
   longer scrolls (its height is released above), the heading would simply never
   stick. Handing scrolling back to the card-body makes the card-body the
   sticky context for both headings. */
[data-drawer-key] [data-kt-scroll="true"],
#kt_notification .timeline,
#kt_notification .timeline-item,
#kt_notification .timeline-content {
	overflow: visible !important;
}

/* ============================================================================
   SIDEBAR SEARCH  (invoice admin panel + staff/user panel)
   Behaviour: public/assets/js/custom.js, opted in with data-sidebar-search.

   NO TEXT COLOURS HERE, deliberately. Results are rendered with Metronic's own
   .menu-item/.menu-link/.menu-title markup, so they inherit the active sidebar
   theme — light or dark — exactly like the menu they replace. An earlier
   version styled them independently with light-theme greys and was unreadable
   on the dark sidebar: every row except the highlighted word disappeared.
   ============================================================================ */
.sidebar-search__box {
    position: relative;
    display: flex;
    align-items: center;
}

.sidebar-search__icon {
    position: absolute;
    left: 10px;
    font-size: 12px;
    opacity: 0.6;
    pointer-events: none;
}

/* The input keeps form-control's own theming; only the room for the icon and
   the clear button is added here. */
.sidebar-search__input {
    padding-left: 30px !important;
    padding-right: 26px !important;
}

.sidebar-search__clear {
    position: absolute;
    right: 6px;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: 0.55;
    font-size: 18px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}

.sidebar-search__clear:hover {
    opacity: 1;
}

/* Sits in the menu's place inside the same scroll wrapper, so a long result
   list scrolls exactly like the menu does. */
.sidebar-search__results {
    padding: 0 0.75rem;
}

/* TIGHTER THAN THE MENU ITSELF, on purpose: the sidebar menu is spaced for a
   short list of icon-led entries, while a result list is longer, denser and
   carries no icons — at the menu's own rhythm it looked gappy and was hard to
   scan. Colours are still Metronic's; only the spacing is ours. */
.sidebar-search__results .menu-item {
    margin: 0;
}

.sidebar-search__results .menu-link {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    min-height: 0;
}

.sidebar-search__results .menu-content {
    padding-top: 0.75rem !important;
    padding-bottom: 0.25rem !important;
}

/* The module glyph sits inside the chip's own text run, so it needs the gap a
   .menu-icon would normally provide from the flex row it lives in. It must also
   take the chip's colour: Metronic paints bare <i> elements grey globally, and
   grey on the light chip is barely there. */
.sidebar-search__module-icon,
.sidebar-search__module-icon i {
    margin-right: 0.4rem;
    color: inherit !important;
}

/* THE SAME LIGHT PILL THE REAL SECTION HEADINGS USE.

   The sidebar's own chips get these colours from inline styles in the Blade
   (`background-color:#f1f1f2; color:#5e6278`), which a rendered chip has no way
   to inherit. The first attempt used a translucent grey with `color: inherit`
   and was unreadable — dark text on a dark sidebar, exactly the thing it was
   supposed to avoid. Restating the Blade's two colours here makes the search
   chips identical to the menu's, which is also what makes them obviously
   headings rather than rows. */
.sidebar-search__module .menu-section {
    display: block;
    width: 100%;
    background-color: #f1f1f2;
    color: #5e6278;
}

/* THE INPUT BELONGS TO A DARK SIDEBAR.

   `form-control` is white, which on this navy rail is a glaring slab — it drew
   more attention than the menu it searches. Both invoice layouts hardcode
   `data-kt-app-layout="dark-sidebar"`, so the sidebar is always dark; scoping
   to that attribute keeps this correct if a light-sidebar layout is ever added.
   Translucent white over the rail rather than a fixed grey, so it sits on
   whatever the sidebar's own background happens to be. */
[data-kt-app-layout="dark-sidebar"] .sidebar-search__input.form-control {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #f5f8fa;
}

[data-kt-app-layout="dark-sidebar"] .sidebar-search__input.form-control:focus {
    background-color: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
}

[data-kt-app-layout="dark-sidebar"] .sidebar-search__input.form-control::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

[data-kt-app-layout="dark-sidebar"] .sidebar-search__icon,
[data-kt-app-layout="dark-sidebar"] .sidebar-search__clear {
    color: #ffffff;
}

/* The matched run. Bold + underline rather than a colour: a colour that reads
   well on the light sidebar vanishes on the dark one, and <mark>'s default
   yellow block fights both. currentColor always contrasts with its own row. */
.sidebar-search__hit {
    background: transparent;
    padding: 0;
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sidebar-search__empty {
    padding: 1rem 0.75rem;
    opacity: 0.65;
    font-size: 0.875rem;
}

/* Collapsed (minimized) sidebar is an icon rail — a text field cannot work at
   that width, which is why Metronic hides the labels beside it too. */
[data-kt-app-sidebar-minimize="on"] .sidebar-search {
    display: none;
}

/* ============================================================
   HEADER ACTION BUTTONS — icon only, with a count pinned to them.

   Passenger Portal, Manage Website, Update Payments, Missing Payments and the
   attendance set. Five labelled buttons pushed the attendance timer off the
   row on a laptop; the label moved to a tooltip and the icon stayed. The
   label is still reachable — on hover and on tap — so nothing is lost to a
   reader who does not recognise an icon.
   ============================================================ */
.hdr-action-btn {
    position: relative;
    /* Square, and equal to the small button's natural height, so the row is
       predictable no matter which icon is inside. btn-icon alone sizes itself
       from its content. */
    width: 34px;
    height: 34px;
    padding: 0;
    flex-shrink: 0;
}

/* The count is the SAME badge the drawer icons to the right of it carry —
   same blue, same 20px circle, same font, same growth into a pill at "99+".
   Two kinds of badge in one header would read as two kinds of number; there is
   only one kind here, so there is only one badge. */
.hdr-action-btn .hdr-action-count {
    position: absolute;
    top: -6px;
    right: -6px;
    /* A CIRCLE, always — never a pill. "99+" is the longest string any badge can
       hold (badgeCount() / nttBadgeCount() cap it there), so the circle is
       sized to fit those three characters and the font tuned to them. A fixed
       width and height is what keeps it round: let the box grow with its text
       and a two-digit count is already an ellipse. */
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    box-sizing: border-box;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    background: #009ef7;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   TOOLTIPS — dark, everywhere.

   The theme ships them white-on-grey, which reads as a panel rather than a
   note: on a white page the bubble had no edge of its own, and it is now
   carrying the NAME of an icon-only button, so it has to be unmistakably an
   annotation and not part of the page.

   Set through the theme's own --kt-* variables as well as Bootstrap's --bs-*
   ones: style.bundle.css resolves --bs-tooltip-bg FROM --kt-tooltip-bg, so
   setting only the Bootstrap pair would be overwritten by the theme's own
   indirection. The arrow reads --bs-tooltip-bg too, so it follows along.

   Scoped to .tooltip, not :root, so nothing else that borrows these variables
   is affected.
   ============================================================ */
.tooltip {
    --kt-tooltip-bg: #181c32;
    --kt-tooltip-color: #ffffff;
    --kt-tooltip-opacity: 1;
    --bs-tooltip-bg: #181c32;
    --bs-tooltip-color: #ffffff;
    --bs-tooltip-opacity: 1;
}

/* The theme also paints .tooltip-inner directly in places, so the same two
   colours are stated outright — a variable nothing reads is not a colour. */
.tooltip .tooltip-inner {
    background-color: #181c32;
    color: #ffffff;
}