/* VIBBOZA NAVIGATEUR V4
   Correction ciblée sur la vraie structure Nitro: tabs .nav-item, sections, rows. */

.nitro-navigator {
    width: 530px !important;
    height: 565px !important;
    max-width: calc(100vw - 22px) !important;
    max-height: calc(100vh - 58px) !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    color: #f6f0df !important;
    background-color: #0d1421 !important;
    background-image: linear-gradient(145deg, #172237 0%, #0d1421 62%, #12151d 100%) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

.nitro-navigator .nitro-card-header,
.nitro-navigator .card-header {
    min-height: 40px !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .11) !important;
    color: #fff3cf !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    background-color: rgba(6, 10, 18, .78) !important;
    background-image: linear-gradient(90deg, rgba(255, 207, 82, .18), rgba(74, 184, 255, .07), transparent 72%) !important;
}

.nitro-navigator .nitro-card-tabs {
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 9px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    background: rgba(5, 10, 18, .34) !important;
}

.nitro-navigator .nitro-card-tabs .nav-item {
    min-height: 28px !important;
    padding: 5px 9px !important;
    border-radius: 9px !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    color: #dce6f3 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    background-color: rgba(255, 255, 255, .055) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07) !important;
    transition: transform .10s ease, background-color .10s ease, border-color .10s ease !important;
}

.nitro-navigator .nitro-card-tabs .nav-item:hover {
    transform: translateY(-1px) !important;
    color: #fff3cf !important;
    border-color: rgba(255, 207, 82, .34) !important;
    background-color: rgba(255, 207, 82, .09) !important;
}

.nitro-navigator .nitro-card-tabs .nav-item.active {
    color: #221607 !important;
    border-color: rgba(255, 230, 132, .65) !important;
    background-color: #ffd15a !important;
    background-image: linear-gradient(180deg, #ffe58d 0%, #ffc13c 100%) !important;
    box-shadow: 0 5px 12px rgba(255, 194, 55, .18), inset 0 1px 0 rgba(255, 255, 255, .52) !important;
}

.nitro-navigator .nitro-card-tabs .nav-item:last-child {
    margin-left: auto !important;
    min-width: 30px !important;
    justify-content: center !important;
}

.nitro-navigator .content-area {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 9px !important;
    background: transparent !important;
}

.nitro-navigator .content-area > .d-flex:first-child {
    flex: 0 0 auto !important;
    padding: 7px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, .11) !important;
    background-color: rgba(7, 13, 23, .64) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 5px 12px rgba(0, 0, 0, .15) !important;
}

.nitro-navigator .content-area > .d-flex:first-child > .d-flex:first-child {
    min-width: 126px !important;
}

.nitro-navigator .content-area > .d-flex:first-child > .d-flex:last-child {
    min-width: 0 !important;
}

.nitro-navigator select.form-select,
.nitro-navigator input.form-control,
.nitro-navigator textarea.form-control {
    min-height: 30px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    color: #fff7df !important;
    font-size: 12px !important;
    background-color: rgba(5, 10, 18, .78) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}

.nitro-navigator select.form-select {
    color: #fff0c2 !important;
    font-weight: 800 !important;
}

.nitro-navigator input.form-control::placeholder,
.nitro-navigator textarea.form-control::placeholder {
    color: rgba(246, 240, 223, .50) !important;
}

.nitro-navigator .content-area > .d-flex:first-child .btn,
.nitro-navigator .content-area > .d-flex:first-child button {
    min-width: 34px !important;
    min-height: 30px !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 229, 126, .45) !important;
    color: #211606 !important;
    background-color: #ffd15a !important;
    background-image: linear-gradient(180deg, #ffe58d 0%, #ffc13c 100%) !important;
    box-shadow: 0 5px 11px rgba(255, 194, 55, .16), inset 0 1px 0 rgba(255, 255, 255, .50) !important;
}

.nitro-navigator .content-area > .d-flex:nth-child(2),
.nitro-navigator .content-area > .overflow-auto,
.nitro-navigator .content-area > .d-flex.flex-column {
    min-height: 0 !important;
    padding-right: 2px !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 207, 82, .42) rgba(255, 255, 255, .06) !important;
}

.nitro-navigator .bg-white.rounded.border.border-muted {
    overflow: hidden !important;
    margin: 0 0 8px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, .11) !important;
    color: #f6f0df !important;
    background-color: rgba(18, 28, 44, .96) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .055), transparent 35%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 6px 14px rgba(0, 0, 0, .15) !important;
}

.nitro-navigator .bg-white.rounded.border.border-muted > .d-flex:first-child {
    min-height: 33px !important;
    padding: 7px 9px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .075) !important;
    color: #fff3cf !important;
    background-color: rgba(7, 12, 20, .44) !important;
}

.nitro-navigator .bg-white.rounded.border.border-muted > .d-flex:first-child .text,
.nitro-navigator .bg-white.rounded.border.border-muted > .d-flex:first-child span {
    color: #fff3cf !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.nitro-navigator .text-secondary,
.nitro-navigator .fa-icon.text-secondary {
    color: rgba(255, 243, 207, .72) !important;
}

.nitro-navigator .fa-icon.text-secondary:hover,
.nitro-navigator .text-secondary:hover {
    color: #ffd15a !important;
    transform: scale(1.04) !important;
}

.nitro-navigator .navigator-grid {
    overflow: hidden !important;
    border-radius: 0 0 11px 11px !important;
}

.nitro-navigator .navigator-item:not(.bg-light) {
    position: relative !important;
    min-height: 35px !important;
    margin: 0 !important;
    border: 0 !important;
    color: #e8f0fb !important;
    background-color: rgba(255, 255, 255, .032) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .055) !important;
}

.nitro-navigator .navigator-item:not(.bg-light):nth-child(odd) {
    background-color: rgba(255, 255, 255, .048) !important;
}

.nitro-navigator .navigator-item:not(.bg-light):hover {
    transform: translateX(2px) !important;
    color: #fff8df !important;
    background-color: rgba(255, 207, 82, .09) !important;
}

.nitro-navigator .navigator-item .text,
.nitro-navigator .navigator-item span {
    color: inherit !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.nitro-navigator .navigator-item .badge {
    min-width: 42px !important;
    height: 21px !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 3px 7px rgba(0, 0, 0, .16) !important;
}

.nitro-navigator .navigator-item .badge.bg-success { background: linear-gradient(180deg, #55dc92, #23985f) !important; }
.nitro-navigator .navigator-item .badge.bg-warning { background: linear-gradient(180deg, #ffd56c, #d68820) !important; }
.nitro-navigator .navigator-item .badge.bg-danger { background: linear-gradient(180deg, #ff7a7a, #c83242) !important; }
.nitro-navigator .navigator-item .badge.bg-primary { background: linear-gradient(180deg, #64c8ff, #297fc3) !important; }

.nitro-navigator .navigator-item.bg-light {
    min-height: 118px !important;
    padding: 7px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    color: #e8f0fb !important;
    background-color: rgba(8, 15, 26, .70) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 44%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 6px 13px rgba(0, 0, 0, .15) !important;
}

.nitro-navigator .navigator-item.bg-light:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(255, 207, 82, .32) !important;
    background-color: rgba(20, 32, 50, .84) !important;
}

.nitro-navigator .navigator-item.bg-light .w-100 {
    min-height: 24px !important;
    padding: 2px 5px !important;
    border-radius: 8px !important;
    background: rgba(0, 0, 0, .15) !important;
}

.nitro-navigator .layout-room-thumbnail,
.nitro-navigator [class*="room-thumbnail"] {
    border-radius: 9px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    background-color: rgba(0, 0, 0, .22) !important;
}

.nitro-navigator .mx-2 {
    margin: 8px !important;
    gap: 8px !important;
}

.nitro-navigator-doorbell,
.nitro-navigator-password,
.nitro-room-info,
.nitro-room-link,
.nitro-room-settings {
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    color: #f8f1df !important;
    background-color: rgba(12, 18, 30, .97) !important;
    background-image: linear-gradient(145deg, rgba(28, 42, 64, .98), rgba(8, 13, 22, .98)) !important;
    box-shadow: 0 22px 52px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

@media (max-width: 720px) {
    .nitro-navigator {
        width: calc(100vw - 18px) !important;
        height: calc(100vh - 74px) !important;
    }

    .nitro-navigator .nitro-card-tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
    }

    .nitro-navigator .nitro-card-tabs .nav-item {
        white-space: nowrap !important;
    }

    .nitro-navigator .content-area > .d-flex:first-child {
        flex-direction: column !important;
    }

    .nitro-navigator .content-area > .d-flex:first-child > .d-flex:first-child,
    .nitro-navigator .content-area > .d-flex:first-child > .d-flex:first-child select {
        width: 100% !important;
    }
}

/* VIBBOZA NAVIGATEUR BACKGROUND POLISH */
.nitro-navigator {
    background-color: #111a2a !important;
    background-image:
        radial-gradient(circle at 18% 12%, rgba(255, 206, 82, .16), transparent 24%),
        radial-gradient(circle at 84% 10%, rgba(80, 190, 255, .14), transparent 26%),
        linear-gradient(135deg, rgba(255, 255, 255, .030) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .030) 50%, rgba(255, 255, 255, .030) 75%, transparent 75%, transparent),
        linear-gradient(160deg, #1b2a43 0%, #101827 48%, #121820 100%) !important;
    background-size: auto, auto, 18px 18px, auto !important;
}

.nitro-navigator::after {
    content: "";
    position: absolute;
    inset: 42px 9px 9px;
    z-index: 0;
    pointer-events: none;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 42%),
        radial-gradient(circle at 50% 0%, rgba(255, 209, 90, .08), transparent 55%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055);
    opacity: .80;
}

.nitro-navigator > * {
    position: relative !important;
    z-index: 1 !important;
}

.nitro-navigator .content-area {
    border-radius: 0 0 16px 16px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 30%),
        rgba(7, 12, 20, .20) !important;
}

.nitro-navigator .bg-white.rounded.border.border-muted {
    background-color: rgba(16, 26, 42, .94) !important;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, .065), transparent 38%),
        radial-gradient(circle at 96% 0%, rgba(74, 184, 255, .055), transparent 42%) !important;
}

/* VIBBOZA NAVIGATEUR BACKGROUND V2 - panneau hôtel premium */
.nitro-navigator {
    background-color: #121a28 !important;
    background-image:
        radial-gradient(ellipse at 22% 8%, rgba(255, 207, 84, .13), transparent 30%),
        radial-gradient(ellipse at 78% 0%, rgba(72, 178, 245, .10), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 18%),
        linear-gradient(135deg, #1d2c43 0%, #111a29 46%, #0c121d 100%) !important;
    background-size: auto !important;
}

.nitro-navigator::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .42;
    background-image:
        linear-gradient(90deg, transparent 0, transparent 23px, rgba(255, 255, 255, .035) 24px, transparent 25px),
        linear-gradient(180deg, transparent 0, transparent 23px, rgba(255, 255, 255, .028) 24px, transparent 25px);
    background-size: 48px 48px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.18));
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.18));
}

.nitro-navigator::after {
    content: "";
    position: absolute;
    inset: 46px 10px 10px;
    z-index: 0;
    pointer-events: none;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .055);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 218, 104, .065), transparent 50%),
        linear-gradient(180deg, rgba(255, 255, 255, .030), rgba(255, 255, 255, .010) 42%, transparent) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .060),
        inset 0 -1px 0 rgba(0, 0, 0, .16) !important;
    opacity: .92;
}

.nitro-navigator > * {
    position: relative !important;
    z-index: 1 !important;
}

.nitro-navigator .content-area {
    background: rgba(5, 10, 18, .14) !important;
}

.nitro-navigator .content-area > .d-flex:first-child {
    background-color: rgba(8, 15, 26, .68) !important;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, .065), transparent 60%),
        radial-gradient(ellipse at 0% 0%, rgba(255, 207, 84, .055), transparent 46%) !important;
}

.nitro-navigator .bg-white.rounded.border.border-muted {
    background-color: rgba(17, 27, 43, .955) !important;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, .060), transparent 36%),
        radial-gradient(ellipse at 100% 0%, rgba(74, 184, 255, .045), transparent 44%) !important;
}