/* Define CSS Variables */
:root {
    --primary-color: #258cfb;
    --success-color: #4caf50;
    --error-color: #f44336;
    --progress-color: #ffc107;
    --btn-primary-bg: rgba(0, 123, 255, 0.6);
    --btn-primary-hover-bg: rgba(0, 123, 255, 0.8);
    --btn-login-bg: rgba(0, 123, 255, 0.8);
    --btn-login-hover-bg: rgba(0, 123, 255, 1);
    --form-control-bg: rgba(255, 255, 255, 0.2);
    --form-control-border: #ffffff;
    --form-control-shadow: rgba(0, 0, 0, 0.5);
    --placeholder-color: rgba(255, 255, 255, 0.7);
    --text-color: rgba(0, 0, 0, 1);
    --header-color: white;
    --link-color: white;
    --link-hover-color: lime;
}

/* Release Control — authorization source and exception audit */
.release-source-icon {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .85rem;
    color: #1f62e6;
    background: linear-gradient(145deg, #edf4ff, #dce9ff);
    border: 1px solid #c8dcff;
    flex: 0 0 auto;
}

.release-source-guidance {
    min-height: 2.6rem;
    display: flex;
    align-items: center;
    padding: .7rem .9rem;
    color: #34445f;
    background: #f5f8fd;
    border: 1px solid #dbe5f3;
    border-radius: .7rem;
}

.release-assurance-card {
    border-left: 4px solid #2767e8 !important;
}

.release-exception-reason {
    padding: .85rem 1rem;
    border-radius: .7rem;
    color: #6f4d00;
    background: #fff9e6;
    border: 1px solid #f1d88a;
}

.regularization-card {
    border-top: 3px solid #24a45a !important;
}

.release-empty-state {
    min-height: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    color: #748197;
    background: #f8fafc;
    border: 1px dashed #ced8e5;
    border-radius: .75rem;
}

.release-empty-state i {
    font-size: 1.4rem;
}

.release-audit-timeline {
    padding: .4rem 1.25rem 1rem 2.35rem;
}

.release-audit-event {
    position: relative;
    padding: 1rem 0 1rem 1.25rem;
    border-left: 2px solid #dce5f2;
}

.release-audit-event:last-child {
    border-left-color: transparent;
}

.release-audit-dot {
    position: absolute;
    left: -.43rem;
    top: 1.2rem;
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    background: #2767e8;
    box-shadow: 0 0 0 4px #e9f1ff;
}

.release-audit-content {
    padding: .8rem 1rem;
    background: #fff;
    border: 1px solid #e1e7ef;
    border-radius: .75rem;
    box-shadow: 0 3px 12px rgba(30, 55, 90, .05);
}

/* Base Styles */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 60px;
    background-color: white; /* Fallback color while the image loads */
}

/* Button Focus Styles */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--primary-color);
}


/* Background Video */
#background-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    object-fit: cover;
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
    opacity: 1;
    transform: translateX(0%);
}

    #background-image.hidden {
        opacity: 0;
        transform: translateX(100%);
    }

#background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.19); /* Dark overlay */
    z-index: -1;
}

.logo-navbar-img {
    height: 40px; /* You can try 30px, 35px if 40px is too large */
    width: auto;
    display: inline-block;
    vertical-align: middle;
    /*padding: 5px 0;*/ /* Optional: add padding top/bottom if it's too tight */
    max-height: 50px; /* Just in case */
}


.footer-logo {
    position: fixed; /* stays fixed at the top-left */
    top: 20px; /* adjust to your liking */
    left: 20px; /* adjust spacing from left */
    z-index: 1050; /* on top of most UI elements */
}

    .footer-logo img.logo-img {
        height: 45px; /* adjust logo size */
        width: auto;
        transition: transform 0.3s ease;
    }

        .footer-logo img.logo-img:hover {
            transform: scale(1.05);
        }


.xdepot-logo-img {
    position: fixed; /* Fixed position in viewport */
    bottom: 80px; /* Distance from the bottom (adjust to move higher/lower) */
    right: 50px; /* Distance from the right (you can adjust as needed) */

    height: 100px; /* Adjust logo size as per your design */
    width: auto;
    opacity: 0.9;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 1050; /* Ensures it stays above other elements */
}

    .xdepot-logo-img:hover {
        transform: scale(1.05);
        opacity: 1;
    }

/* Sidebar Icon Container */
.tab-sidebar-icons {
    position: fixed;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 1000;
}

/* Icon Buttons */
.tab-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    color: white;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    position: relative;
    opacity: 0;
    animation: fadeInUp 0.5s forwards;
}

    /* Color Styles based on logo sequence */
    .tab-icon:nth-child(1) {
        background-color: #00008B; /* Dark Blue */
        animation-delay: 0.1s;
    }

    .tab-icon:nth-child(2) {
        background-color: #008B8B; /* Dark Cyan */
        animation-delay: 0.3s;
    }

    .tab-icon:nth-child(3) {
        background-color: #006400; /* Dark Green */
        animation-delay: 0.5s;
    }

    .tab-icon:nth-child(4) {
        background-color: #8B8000; /* Dark Yellow/Goldenrod */
        animation-delay: 0.7s;
    }

    .tab-icon:nth-child(5) {
        background-color: #8B0000; /* Dark Red */
        animation-delay: 0.9s;
    }

    .tab-icon:nth-child(6) {
        background-color: #5B2D8E; /* Dark Purple - Commercial Control */
        animation-delay: 1.1s;
    }

    /* Hover Animation */
    .tab-icon:hover {
        transform: scale(1.1);
        filter: brightness(1.2);
    }

    /* Active icon highlight */
    .tab-icon.active {
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
    }

/* Popout Panel */
.tab-popout-panel {
    position: absolute;
    left: 80px;
    top: 50%;
    transform: translateY(-50%);
    width: 260px;
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 10px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 999;
}

    .tab-popout-panel::before {
        content: '';
        position: absolute;
        left: -10px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-right: 10px solid rgba(255, 255, 255, 0.95);
    }

/* Show the panel on hover or when active.
   Hover is the sole info affordance now that the redundant Bootstrap tooltip
   was removed, so the small black title bubble no longer overlaps this card. */
.tab-icon:hover .tab-popout-panel,
.tab-icon.active .tab-popout-panel {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    pointer-events: auto;
}

/* Panel Content */
.tab-popout-panel h5 {
    margin-bottom: 8px;
    color: #0077b6;
    font-size: 16px;
}

.tab-popout-panel p {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
}

.tab-icon.highlight-feature {
    border-left: 3px solid #0d6efd; /* Bootstrap primary */
}

.tab-icon.highlight-feature i {
    color: #0d6efd;
}

/* Fade Animation */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.footer {
    background: rgba(0, 0, 0, 0.8); /* Dark transparent background */
    color: #ffffff; /* White text */
    position: absolute;
    bottom: 0;
    width: 100vw; /* Ensure it spans full width */
    text-align: center;
    padding: 10px 20px; /* Add padding */
    left: 0;
}

    .footer a {
        color: #ffffff !important;
        text-decoration: none !important;
        margin-right: 10px;
    }

        .footer a:hover {
            text-decoration: underline !important;
            color: #f8d7da; /* Light red hover effect */
        }

    /* Flexbox alignment */
    .footer .container-fluid {
        display: flex;
        justify-content: space-between; /* Align left & right */
        align-items: center;
    }

/* Styling for the scrolling text */
.footer-scrolling-text {
    width: 40%; /* Adjust width of scrolling section */
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    position: relative;
}

    .footer-scrolling-text p {
        display: inline-block;
        font-size: 14px;
        font-weight: normal;
        color: #ffffff;
        animation: scrolling 15s linear infinite;
    }

.footer-logo {
    position: fixed; /* stays fixed at the top-left */
    top: 20px;       /* adjust to your liking */
    left: 20px;      /* adjust spacing from left */
    z-index: 1050;   /* on top of most UI elements */
}

.footer-logo img.logo-img {
    height: 45px;    /* adjust logo size */
    width: auto;
    transition: transform 0.3s ease;
}

.footer-logo img.logo-img:hover {
    transform: scale(1.05);
}



/* Keyframes for scrolling effect */
@keyframes scrolling {
    0% {
        transform: translateX(100%);
    }
    /* Start off screen */
    100% {
        transform: translateX(-100%);
    }
    /* Scroll to the left */
}

/* Toastr Notifications */
.toast-success {
    background-color: var(--success-color) !important;
    color: #fff !important;
    font-size: 16px;
    border-radius: 8px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    padding: 14px 22px !important;
    opacity: 0.95;
}

.toast-error {
    background-color: var(--error-color) !important;
    color: #fff !important;
    font-size: 16px;
    border-radius: 8px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    padding: 14px 22px !important;
    opacity: 0.95;
}

.toast-message {
    margin-left: 10px;
    padding-left: 30px !important;
}

.toast-progress {
    background-color: var(--progress-color) !important;
    height: 4px !important;
}

.toast-top-right {
    top: 70px;
    right: 20px;
}

.toast {
    padding: 14px 22px !important;
    font-family: 'Arial', sans-serif;
    transition: all 0.3s ease-in-out;
}

/* Card Styles */
.card {
    background: var(--card-bg);
    border: none;
    backdrop-filter: blur(10px);
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px var(--card-shadow);
}

    .card:hover {
        /*transform: translateY(-5px);*/
        box-shadow: 0 8px 16px var(--card-shadow);
    }

.card-header {
    font-size: 1.1rem;
    font-weight: normal;
    cursor: pointer;
    background: var(--header-bg);
    color: var(--header-color);
    padding: 15px 20px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s ease;
}

    .card-header:hover {
        background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
    }

.card-body {
    color: var(--text-color);
    padding: 20px;
}

/* Form Control Styles */
.input-group-text {
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.form-control {
    background: var(--form-control-bg);
    border: 1px solid var(--form-control-border);
    box-shadow: 0 0 1px var(--form-control-shadow);
    color: var(--text-color);
    border-radius: 0.375rem;
}

    .form-control::placeholder {
        color: rgba(0, 0, 0, 0.6); /* grey */
    }

/* Button Styles */
.btn-primary {
    background: var(--btn-primary-bg);
    border: none;
}

    .btn-primary:hover {
        background: var(--btn-primary-hover-bg);
    }

.btn-login {
    width: auto;
    padding: 8px 20px;
    background: var(--btn-login-bg);
    border: none;
    color: white;
    font-weight: bold;
    transition: background 0.3s ease-in-out;
}
.btn-login, .btn-primary {
    font-size: 15px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 40px; /* Rounded pill buttons */
}
    .btn-login:hover {
        background: var(--btn-login-hover-bg);
        color: var(--link-hover-color);
    }

/* Link Styles */
.text-white a {
    color: var(--link-color) !important;
    text-decoration: none !important;
}

    .text-white a:hover {
        text-decoration: underline !important;
    }

.text-black a {
    color: #000 !important;
    text-decoration: none !important;
}

    .text-black a:hover {
        text-decoration: underline !important;
    }

/* Header Styles */
h3 {
    color: var(--header-color);
}

/* Gate In table layout */
/* Table Styling */
.table-container {
    overflow-x: auto;
    border-radius: 10px;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
    margin-top: 20px; /* Add some margin to the top */
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    background-color: white; /* Ensure table background is white */
}

    .custom-table thead th {
        background: #343a40;
        color: lightcyan;
        font-size: 16px;
        text-transform: capitalize; /* Ensure headers are in proper case */
    }

    .custom-table th, .custom-table td {
        white-space: nowrap;
        padding: 10px;
        text-align: center;
        vertical-align: middle;
        border: 1px solid #ddd; /* Add border to table cells */
    }

    .custom-table tbody tr:hover {
        background-color: #f1f1f1;
        transition: background 0.2s ease-in-out;
    }

/* Action Column Optimization */
.action-column {
    width: 100px; /* Adjust width for better spacing */
}

/* Action Icons Styling */
.action-icons {
    display: flex;
    justify-content: center;
    gap: 8px;
}

    .action-icons a {
        font-size: 16px;
        padding: 5px;
        border-radius: 5px;
        transition: background 0.2s ease-in-out;
    }

        .action-icons a:hover {
            background: rgba(0, 0, 0, 0.1);
        }

.icon-edit {
    color: #f39c12; /* Yellow */
}

.icon-view {
    color: #3498db; /* Blue */
}

.icon-delete {
    color: #e74c3c; /* Red */
}

/* Create Button (Simple & Professional) */
.create-btn {
    background: #28a745;
    color: white;
    padding: 8px 16px;
    font-size: 16px;
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
}

    .create-btn:hover {
        background: #218838;
        transform: scale(1.05);
    }

#masterControlPanel {
    position: fixed;
    top: 100px; /* ✅ Below the menu bar */
    right: 20px; /* ✅ Move to the right */
    z-index: 1050; /* ✅ Stay on top */
    background: #fff; /* ✅ White background */
    padding: 10px;
    border-radius: 50px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column; /* ✅ Stack buttons vertically */
    align-items: center; /* ✅ Center buttons */
    gap: 8px; /* ✅ Add space between buttons */
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateY(-20px);
}

    #masterControlPanel.show {
        opacity: 1;
        transform: translateY(0);
    }


    #masterControlPanel button {
        width: 35px; /* Width and height the same for a circle */
        height: 35px;
        padding: 0;
        border-radius: 50%; /* Makes it a circle */
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 15px; /* Icon size */
    }

.sectionBtnWrapper {
    position: fixed;
    top: 100px; /* ✅ Below the menu bar */
    right: 20px; /* ✅ Move to the right */
    z-index: 1050;
    background: #fff; /* ✅ White background */
    padding: 10px;
    border-radius: 50px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column; /* ✅ Stack buttons vertically */
    align-items: center; /* ✅ Center buttons */
    gap: 8px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

    .sectionBtnWrapper button {
        width: 35px; /* Width and height the same for a circle */
        height: 35px;
        padding: 0;
        border-radius: 50%; /* Makes it a circle */
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 15px; /* Icon size */
    }

/* Layout floating menus.
   These live in the shared layout and must not depend on Razor scoped CSS tokens. */
.circular-menu {
    position: fixed;
    bottom: 1em;
    right: 1em;
    z-index: 1000;
}

.circular-menu .floating-btn {
    display: block;
    width: 3.5em;
    height: 3.5em;
    border-radius: 50%;
    background-color: hsl(4, 98%, 60%);
    box-shadow: 0 2px 5px 0 hsla(0, 0%, 0%, .26);
    color: hsl(0, 0%, 100%);
    text-align: center;
    line-height: 3.9;
    cursor: pointer;
    outline: 0;
    text-decoration: none;
}

.circular-menu.active .floating-btn {
    box-shadow: inset 0 0 3px hsla(0, 0%, 0%, .3);
}

.circular-menu .floating-btn:active {
    box-shadow: 0 4px 8px 0 hsla(0, 0%, 0%, .4);
}

.circular-menu .floating-btn i {
    font-size: 1.3em;
    transition: transform .2s;
}

.circular-menu.active .floating-btn i {
    transform: rotate(-45deg);
}

.circular-menu::after {
    display: block;
    content: ' ';
    width: 3.5em;
    height: 3.5em;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -2;
    background-color: hsl(4, 98%, 60%);
    transition: all .3s ease;
}

.circular-menu.active::after {
    transform: scale3d(5.5, 5.5, 1);
    transition-timing-function: cubic-bezier(.68, 1.55, .265, 1);
}

.circular-menu .items-wrapper {
    padding: 0;
    margin: 0;
}

.circular-menu .menu-item {
    position: absolute;
    top: .2em;
    right: .2em;
    z-index: -1;
    display: block;
    text-decoration: none;
    color: hsl(0, 0%, 100%);
    font-size: 1em;
    width: 3em;
    height: 3em;
    border-radius: 50%;
    text-align: center;
    line-height: 3;
    background-color: hsla(0,0%,0%,.1);
    transition: transform .3s ease, background .2s ease;
}

.circular-menu .menu-item:hover {
    background-color: hsla(0,0%,0%,.3);
}

.circular-menu.active .menu-item {
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.circular-menu.active .menu-item:nth-child(1) {
    transform: translate3d(1em,-7em,0);
}

.circular-menu.active .menu-item:nth-child(2) {
    transform: translate3d(-3.5em,-6.3em,0);
}

.circular-menu.active .menu-item:nth-child(3) {
    transform: translate3d(-6.5em,-3.2em,0);
}

.circular-menu.active .menu-item:nth-child(4) {
    transform: translate3d(-7em,1em,0);
}

.circular-menu.active .menu-item:nth-child(5) {
    transform: translate3d(-5em,4.5em,0);
}

.circular-menu.circular-menu-left {
    right: auto;
    left: 1em;
}

.circular-menu.circular-menu-left .floating-btn,
.circular-menu.circular-menu-left::after {
    background-color: hsl(217, 89%, 61%);
}

.circular-menu.circular-menu-left.active .floating-btn i {
    transform: rotate(90deg);
}

.circular-menu.circular-menu-left.active .menu-item:nth-child(1) {
    transform: translate3d(-1em,-7em,0);
}

.circular-menu.circular-menu-left.active .menu-item:nth-child(2) {
    transform: translate3d(3.5em,-6.3em,0);
}

.circular-menu.circular-menu-left.active .menu-item:nth-child(3) {
    transform: translate3d(6.5em,-3.2em,0);
}

.circular-menu.circular-menu-left.active .menu-item:nth-child(4) {
    transform: translate3d(7em,1em,0);
}

.circular-menu.circular-menu-left.active .menu-item:nth-child(5) {
    transform: translate3d(5em,4.5em,0);
}

/* Collapsible commercial-control roadmap rail. */
.feature-side-bar {
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    transform: translateY(-50%);
    font-family: var(--bs-body-font-family, "Segoe UI", sans-serif);
}

.feature-side-bar__panel {
    width: 252px;
    max-height: min(680px, calc(100vh - 104px));
    overflow-x: hidden;
    overflow-y: auto;
    background: linear-gradient(180deg, #111c31 0%, #0b1324 100%);
    border: 1px solid rgba(148, 163, 184, .16);
    border-left: 0;
    border-radius: 0 16px 16px 0;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .24), 0 2px 8px rgba(15, 23, 42, .14);
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .35) transparent;
    transition: width .22s cubic-bezier(.4, 0, .2, 1), opacity .18s ease, border-color .18s ease;
}

.feature-side-bar__header {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 250px;
    padding: 16px 16px 14px;
    border-bottom: 1px solid rgba(148, 163, 184, .13);
}

.feature-side-bar__brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    color: #dbeafe;
    background: #111d31;
    border: 1px solid rgba(147, 197, 253, .35);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

.feature-side-bar__brand-icon img {
    display: block;
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.feature-side-bar__brand-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.15;
}

.feature-side-bar__brand-copy small {
    margin-bottom: 3px;
    color: #60a5fa;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: none;
}

.feature-side-bar__brand-copy strong {
    color: #f8fafc;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.feature-side-bar__section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 250px;
    padding: 12px 16px 6px;
    color: #64748b;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.feature-side-bar__section-label--roadmap {
    margin-top: 5px;
    padding-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, .1);
}

.feature-side-bar__preview-badge {
    padding: 2px 6px;
    color: #93c5fd;
    font-size: 8px;
    letter-spacing: .08em;
    background: rgba(37, 99, 235, .14);
    border: 1px solid rgba(96, 165, 250, .2);
    border-radius: 999px;
}

.feature-side-bar__item {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 236px;
    min-height: 52px;
    margin: 2px 7px;
    padding: 7px 9px;
    color: #cbd5e1;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}

.feature-side-bar__item:hover,
.feature-side-bar__item:focus-visible {
    color: #fff;
    background: rgba(51, 65, 85, .72);
}

.feature-side-bar__item:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: -2px;
}

.feature-side-bar__item.is-active {
    color: #fff;
    background: linear-gradient(100deg, rgba(37, 99, 235, .28), rgba(37, 99, 235, .1));
    border-color: rgba(96, 165, 250, .28);
    box-shadow: inset 3px 0 0 #3b82f6;
}

.feature-side-bar__item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    font-size: 14px;
    border: 1px solid currentColor;
    border-radius: 9px;
}

.feature-side-bar__item-icon--release { color: #93c5fd; background: rgba(37, 99, 235, .18); }
.feature-side-bar__item-icon--sales { color: #6ee7b7; background: rgba(16, 185, 129, .1); }
.feature-side-bar__item-icon--purchases { color: #fcd34d; background: rgba(245, 158, 11, .1); }
.feature-side-bar__item-icon--materials { color: #c4b5fd; background: rgba(139, 92, 246, .1); }
.feature-side-bar__item-icon--contractors { color: #fdba74; background: rgba(249, 115, 22, .1); }
.feature-side-bar__item-icon--trading { color: #a7f3d0; background: rgba(5, 150, 105, .1); }
.feature-side-bar__item-icon--tariffs { color: #67e8f9; background: rgba(6, 182, 212, .1); }
.feature-side-bar__item-icon--scrap { color: #86efac; background: rgba(34, 197, 94, .1); }
.feature-side-bar__item-icon--revenue { color: #f9a8d4; background: rgba(236, 72, 153, .1); }
.feature-side-bar__item-icon--exceptions { color: #fca5a5; background: rgba(239, 68, 68, .1); }
.feature-side-bar__item-icon--kpis { color: #7dd3fc; background: rgba(14, 165, 233, .1); }

.feature-side-bar__item-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    line-height: 1.2;
}

.feature-side-bar__item-copy strong {
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feature-side-bar__item-copy small {
    overflow: hidden;
    margin-top: 3px;
    color: #718096;
    font-size: 9.5px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feature-side-bar__item.is-active .feature-side-bar__item-copy small {
    color: #93c5fd;
}

.feature-side-bar__item-arrow {
    color: #60a5fa;
    font-size: 10px;
}

.feature-side-bar__item.is-planned {
    cursor: default;
    opacity: .78;
}

.feature-side-bar__item.is-planned:hover {
    color: #cbd5e1;
    background: rgba(30, 41, 59, .46);
    border-color: rgba(148, 163, 184, .1);
}

.feature-side-bar__status-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    background: #475569;
    border-radius: 50%;
}

.feature-side-bar__footer {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 250px;
    margin-top: 8px;
    padding: 11px 16px 13px;
    color: #64748b;
    font-size: 9px;
    font-weight: 650;
    border-top: 1px solid rgba(148, 163, 184, .1);
}

.feature-side-bar__toggle {
    width: 28px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, .24);
    border-left: 0;
    border-radius: 0 10px 10px 0;
    background: #111c31;
    color: #93c5fd;
    cursor: pointer;
    box-shadow: 5px 5px 16px rgba(15, 23, 42, .18);
    transition: color .16s ease, background .16s ease;
}

.feature-side-bar__toggle:hover {
    color: #fff;
    background: #2563eb;
}

.feature-side-bar__toggle:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .35);
    outline-offset: 2px;
}

.feature-side-bar.is-collapsed .feature-side-bar__panel,
html.feature-sidebar-is-collapsed .feature-side-bar__panel {
    width: 0;
    opacity: 0;
    border-color: transparent;
}

.feature-side-bar__toggle i {
    transition: transform .2s ease;
}

.feature-side-bar.is-collapsed .feature-side-bar__toggle i,
html.feature-sidebar-is-collapsed .feature-side-bar__toggle i {
    transform: rotate(180deg);
}

@media (max-width: 575.98px) {
    .feature-side-bar__panel {
        width: 64px;
        max-height: calc(100vh - 120px);
    }

    .feature-side-bar__header {
        min-width: 62px;
    }

    .feature-side-bar__item {
        min-width: 52px;
    }

    .feature-side-bar__header {
        justify-content: center;
        padding: 12px 0;
    }

    .feature-side-bar__brand-copy,
    .feature-side-bar__section-label,
    .feature-side-bar__item-copy,
    .feature-side-bar__item-arrow,
    .feature-side-bar__status-dot,
    .feature-side-bar__footer {
        display: none;
    }

    .feature-side-bar__item {
        justify-content: center;
        min-height: 48px;
        margin: 2px 5px;
        padding: 6px;
    }

    .feature-side-bar__item.is-active {
        box-shadow: inset 2px 0 0 #3b82f6;
    }

    .feature-side-bar.is-collapsed .feature-side-bar__panel {
        width: 0;
    }
}

.center-menu {
    position: fixed;
    bottom: 1.5em;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 1.5em;
    z-index: 1000;
    background-color: #000000c1;
    padding: 0.6em 1.2em;
    height: auto;
    width: auto;
    border-radius: 0.5em;
    max-width: calc(100vw - 24px);
    overflow-x: auto;
    scrollbar-width: none;
}

.center-menu::-webkit-scrollbar {
    display: none;
}

.center-menu .center-icon {
    font-size: 2em;
    transition: transform 0.3s ease, color 0.3s ease;
    cursor: pointer;
}

.center-menu .center-icon:not(.flip-left):hover {
    transform: scale(1.2);
}

.center-menu a:nth-of-type(1) .center-icon,
.center-menu .center-icon:nth-of-type(1) {
    color: #ff5722;
}

.center-menu .center-icon:nth-of-type(2) {
    color: white;
}

.center-menu .center-icon:nth-of-type(3) {
    color: #2196f3;
}

.center-menu a:nth-of-type(2) .center-icon {
    color: white;
}

.center-menu a:nth-of-type(3) .center-icon {
    color: #607d8b;
}

.center-menu a,
.center-menu a:hover {
    text-decoration: none;
}

.flip-left {
    transform: scaleX(-1);
}

.flip-left:hover {
    transform: scaleX(-1) scale(1.2);
}

/* Container holding options */
/*.custom-dropdown .select2-results {
    display: flex;
    flex-wrap: wrap;
}*/

/* Each option becomes half width */
/*.custom-dropdown .select2-results__option {
    width: 50%;
    box-sizing: border-box;
    white-space: normal !important;
    padding: 6px 12px;
}*/

.error-message {
    /*margin-left: 10px*/ /* Adjust the value as needed */
    text-align: right;
    display: block; /* Ensure it takes up the full width */
    font-size: 14px;
}

/*input[type="text"], textarea {
    text-transform: uppercase;
}
*/


/* =========================================================
   SWEAF NAVBAR MARQUEE (PRO LIGHT) 
   - Professional gradient background
   - Visible shine sweep
   - Left/Right fade opacity for in/out text
   ========================================================= */

/* Centering helper slots (keep if you use these classes) */
.navbar .container-fluid {
    display: grid;
    grid-template-columns: auto minmax(12rem, 1fr) auto;
    align-items: center;
    gap: 16px;
}

.navbar .navbar-brand {
    display: flex;
    align-items: center;
    margin-right: 0;
}

.navbar .navbar-marquee-slot {
    min-width: 0;
    display: flex;
    justify-content: flex-start;
}

.navbar .navbar-user-slot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
}

.navbar .navbar-user-slot .navbar-collapse,
.navbar .navbar-user-slot .navbar-nav {
    min-width: 0;
}

.navbar .navbar-user-slot .navbar-nav {
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
}

.navbar .navbar-clock-item {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.navbar #digitalClock {
    min-width: 9.25rem;
    color: #333;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: right;
    white-space: nowrap;
}

.navbar #clockDate {
    color: #666;
    font-size: 0.8rem;
}

.navbar #userDropdown {
    max-width: 13rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Marquee Box ===== */
.sweaf-marquee {
    width: 100%;
    max-width: 920px;
    height: 38px;
    position: relative;
    overflow: hidden;
    border-radius: 999px;
    /* ✅ Professional "glass" light look */
    background: linear-gradient(90deg, #f7f9fc, #eef3f9, #f7f9fc);
    border: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    padding: 0 14px;
}

    /* ✅ Fade on left/right edges so text fades in/out */
    .sweaf-marquee::before,
    .sweaf-marquee::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 72px;
        z-index: 5;
        pointer-events: none;
    }

    .sweaf-marquee::before {
        left: 0;
        background: linear-gradient(to right, rgba(247, 249, 252, 1) 0%, rgba(247, 249, 252, 0) 100%);
    }

    .sweaf-marquee::after {
        right: 0;
        background: linear-gradient(to left, rgba(247, 249, 252, 1) 0%, rgba(247, 249, 252, 0) 100%);
    }


    /* ===== Shine Sweep Layer ===== */
    .sweaf-marquee .mq-shine {
        position: absolute;
        inset: -70% -30%;
        z-index: 2; /* shine below text, above background */
        pointer-events: none;
        opacity: 0.75;
        background: linear-gradient( 120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.20) 42%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0.20) 58%, rgba(255,255,255,0) 100% );
        transform: translateX(-140%) rotate(2deg);
        animation: mqShine 5.2s ease-in-out infinite;
    }

@keyframes mqShine {
    0% {
        transform: translateX(-140%) rotate(2deg);
    }

    30% {
        transform: translateX(140%) rotate(2deg);
    }

    100% {
        transform: translateX(140%) rotate(2deg);
    }
}

/* ===== Track / Animation ===== */
.sweaf-marquee .marquee-track {
    position: relative;
    z-index: 4; /* ✅ text is always above fades + shine */
    display: inline-flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
    will-change: transform;
    animation: sweafMarquee 52s linear infinite;
    padding-left: 100%;
}

.sweaf-marquee:hover .marquee-track {
    animation-play-state: paused;
    opacity: 0.95;
}

@keyframes sweafMarquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.marquee-gap {
    width: 36px;
}

/* ===== Text Style (polished + readable) ===== */
.marquee-item {
    font-size: 0.92rem;
    line-height: 1;
    color: rgba(15, 23, 42, 0.78);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

    .marquee-item i {
        font-size: 0.95rem;
        color: rgba(15, 23, 42, 0.70);
        opacity: 0.95;
    }

.marquee-sep {
    color: rgba(15, 23, 42, 0.42);
    opacity: 0.9;
}

/* Accent (your brand highlight) */
.marquee-item strong,
.marquee-item .highlight {
    color: #0aa06e;
    font-weight: 800;
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
    .sweaf-marquee .marquee-track {
        animation: none;
        padding-left: 0;
    }

    .sweaf-marquee .mq-shine {
        animation: none;
        opacity: 0;
    }
}

/* ===== Severity Variants (border + accent only, still light/pro) ===== */
.sweaf-marquee.marquee-info {
    border-color: rgba(13,110,253,.22);
}

.sweaf-marquee.marquee-success {
    border-color: rgba(25,135,84,.22);
}

.sweaf-marquee.marquee-warning {
    border-color: rgba(255,193,7,.28);
}

.sweaf-marquee.marquee-urgent {
    border-color: rgba(220,53,69,.30);
}

/* prevent 0% flash before JS seeks */
.marquee-track--boot {
    animation-play-state: paused !important;
    opacity: 0; /* hide until positioned */
    transform: translateX(0); /* stable initial paint */
}

@media (max-width: 1199.98px) and (min-width: 768px) {
    .navbar .container-fluid {
        grid-template-columns: auto minmax(10rem, 1fr) auto;
        gap: 8px;
    }

    .navbar #digitalClock {
        min-width: 7.75rem;
        font-size: 0.85rem;
    }

    .navbar #clockDate {
        font-size: 0.72rem;
    }

    .navbar #userDropdown {
        max-width: 9rem;
    }

    .sweaf-marquee {
        height: 34px;
        padding-inline: 10px;
    }
}

@media (max-width: 767.98px) {
    .navbar .container-fluid {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px;
    }

    .navbar .navbar-user-slot {
        grid-column: 2;
    }
}

/* Custom style for the View/Edit Toggle Switch */
.mode-switch-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-check-input.mode-switch {
    width: 3em;
    height: 1.5em;
    cursor: pointer;
}

.card-header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.card-header .btn.eir-generate-btn,
.card-header .btn.eir-generate-btn:link,
.card-header .btn.eir-generate-btn:visited {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #083344;
    --bs-btn-border-color: #cff4fc;
    --bs-btn-hover-color: #083344;
    --bs-btn-hover-bg: #ffffff;
    --bs-btn-hover-border-color: #083344;
    --bs-btn-focus-shadow-rgb: 8, 51, 68;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #0f5f7a;
    --bs-btn-active-border-color: #ffffff;
    --bs-btn-disabled-color: #334155;
    --bs-btn-disabled-bg: #e2e8f0;
    --bs-btn-disabled-border-color: #94a3b8;
    color: #ffffff !important;
    background-color: #083344 !important;
    border: 1px solid #cff4fc !important;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
}

.card-header .btn.eir-generate-btn:hover,
.card-header .btn.eir-generate-btn:focus {
    color: #083344 !important;
    background-color: #ffffff !important;
    border-color: #083344 !important;
    text-decoration: none !important;
}

.card-header .btn.eir-generate-btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(8, 51, 68, 0.28);
}

.card-header .btn.eir-generate-btn:active,
.card-header .btn.eir-generate-btn.active,
.show > .card-header .btn.eir-generate-btn.dropdown-toggle {
    color: #ffffff !important;
    background-color: #0f5f7a !important;
    border-color: #ffffff !important;
    text-decoration: none !important;
}

.card-header .btn.eir-generate-btn.disabled,
.card-header .btn.eir-generate-btn:disabled,
fieldset:disabled .card-header .btn.eir-generate-btn {
    color: #334155 !important;
    background-color: #e2e8f0 !important;
    border-color: #94a3b8 !important;
    box-shadow: none;
    opacity: 0.85;
    pointer-events: none;
    text-decoration: none !important;
}

.readonly-field {
    background-color: #e9ecef !important; /* Visual cue for disabled */
    cursor: not-allowed;
}

.edit-mode-active .form-control:not([readonly]),
.edit-mode-active .form-select:not([disabled]) {
    background-color: #fff !important;
    border-color: #86b7fe; /* Highlight editable fields */
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.recaptcha-disclaimer {
    font-size: 11px;
    color: #e9ecef; /* Light gray text */
    text-align: center;
    margin-top: 10px;
    padding-left: 12px;
    padding-right: 12px;
}

.recaptcha-disclaimer .footer-link {
    color: #ffffff !important; /* Pure white links */
    text-decoration: underline;
    font-weight: 600;
}

.recaptcha-disclaimer .footer-link:hover {
    color: #ced4da !important; /* Slight hover effect */
}

.grecaptcha-badge {
    visibility: hidden;
}

/* Removes the divider line between the input and the eye button */
.custom-password-group .form-control {
    border-right: none !important;
}

.custom-password-group .btn {
    border-left: none !important;
    /* This matches the default white border look you described */
    border: 1px solid #ffffff;
    border-left: none; /* Keep the middle open */
    color: #6c757d;
}

    /* Ensures the focus ring covers the whole group if needed */
    .custom-password-group .form-control:focus,
    .custom-password-group .btn:focus {
        box-shadow: none;
        border-color: #ffffff; /* Keep it white even when typing */
    }

/* Optional: Subtle hover for the eye icon */
#togglePassword:hover {
    background-color: transparent !important;
    color: #000;
}

/* Fix Toastr icon and text alignment */
/*#toast-container > .toast-info {
    background-image: none !important;*/ /* Remove the old buggy icon */
    /*padding-left: 15px !important;
    background-color: #0d6efd !important;*/ /* XdEPOT Primary Blue */
    /*opacity: 1 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    border-radius: 8px !important;
}

#toast-container > div {
    opacity: 1 !important;
}*/

/* ========================================
   MOBILE RESPONSIVE DESIGN
   ======================================== */

/* Extra Small Devices (max-width 576px) */
@media (max-width: 576px) {
    html {
        font-size: 12px;
    }

    body {
        margin-bottom: 40px;
    }

    /* Hide circular menus on mobile */
    #circularMenu, #circularMenu1, .center-menu {
        display: none !important;
    }

    /* Navbar optimization */
    .navbar {
        padding: 0.5rem 0;
    }

    .navbar-brand {
        font-size: 1rem;
    }

    .navbar-collapse {
        margin-top: 10px;
    }

    .navbar-nav .nav-link {
        padding: 0.3rem 0.8rem;
        font-size: 0.85rem;
    }

    /* Card styles for mobile */
    .card {
        margin: 0.5rem;
        border-radius: 0.375rem;
    }

    .card-body {
        padding: 1rem;
    }

    .card-header {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }

    /* Login/Register form optimization */
    .col-lg-5 {
        padding: 0.5rem;
    }

    .container {
        padding: 0.5rem;
    }

    .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* Form controls */
    .form-control,
    .form-select,
    .input-group-text {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
        border-radius: 0.25rem;
    }

    .input-group {
        margin-bottom: 0.75rem;
    }

    /* Button styles for mobile - Touch friendly */
    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        border-radius: 20px;
        min-height: 40px;
    }

    .btn-primary,
    .btn-login {
        width: 100% !important;
        margin-bottom: 0.5rem;
    }

    .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    /* Title and heading optimization */
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.1rem; }
    h4 { font-size: 1rem; }
    h5 { font-size: 0.95rem; }

    /* Table optimization */
    .table {
        font-size: 0.8rem;
    }

    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Action buttons in tables */
    .action-icons {
        flex-wrap: wrap;
        gap: 4px;
    }

    .action-icons a,
    .action-icons button {
        min-width: 30px;
        min-height: 30px;
        padding: 0.25rem;
        font-size: 0.7rem;
    }

    /* Footer optimization */
    .footer {
        padding: 1rem 0.5rem;
        font-size: 0.75rem;
    }

    .footer-logo {
        top: 10px;
        left: 10px;
    }

    .xdepot-logo-img {
        bottom: 50px;
        right: 20px;
        height: 60px;
    }

    /* Hide logo sidebar on mobile */
    .tab-sidebar-icons {
        display: none !important;
    }

    /* Digital clock - adjust for mobile */
    #clockTime {
        font-size: 0.9rem;
    }

    #clockDate {
        font-size: 0.8rem;
    }

    /* Marquee adjustments */
    .sweaf-marquee {
        padding: 0 8px;
        font-size: 0.75rem;
    }

    .marquee-item {
        font-size: 0.75rem;
    }

    /* Modal optimization */
    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-content {
        border-radius: 0.25rem;
    }

    /* Checkbox and radio optimization */
    .form-check {
        margin-bottom: 0.75rem;
    }

    .form-check-input {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

    .form-check-label {
        margin-left: 0.5rem;
        cursor: pointer;
        font-size: 0.9rem;
    }

    /* Master control panel - hide on mobile */
    #masterControlPanel {
        display: none !important;
    }

    /* Dropdown optimization */
    .select2-container {
        width: 100% !important;
    }

    .select2-container--bootstrap-5 .select2-selection {
        min-height: 40px;
    }
}

/* Small Devices (577px - 768px) */
@media (min-width: 577px) and (max-width: 768px) {
    html {
        font-size: 13px;
    }

    /* Hide circular menus on tablets in portrait */
    #circularMenu, #circularMenu1 {
        display: none;
    }

    .center-menu {
        display: flex;
        bottom: 20px;
    }

    .col-lg-5 {
        padding: 1rem;
    }

    .btn-primary {
        width: auto;
    }

    .form-control,
    .form-select {
        font-size: 0.95rem;
    }
}

/* Medium & Large Devices (769px+) - Keep Original Desktop Design */
@media (min-width: 769px) {
    /* Restore all circular menus for desktop */
    #circularMenu,
    #circularMenu1,
    .center-menu {
        display: flex;
    }

    .tab-sidebar-icons {
        display: flex;
    }

    #masterControlPanel {
        display: flex !important;
    }

    /* Desktop button widths */
    .btn-primary,
    .btn-login {
        width: auto;
    }

    .col-lg-5 {
        padding: 1rem;
    }
}

/* ============================================================================
   XdEPOT UI Kit — design tokens (Phase 1 starter kit)
   ----------------------------------------------------------------------------
   These --xd-* custom properties are additive and namespaced; they do not
   change any existing styles. The kit's COMPONENT classes live in the
   self-contained /css/xd-kit.css so they can also be used in the AdminLTE
   layout. Keeping the tokens here too means
   every page served by the main _Layout has them available for adoption.
   To roll the kit out app-wide, add to _Layout <head>:
       <link rel="stylesheet" href="~/css/xd-kit.css" asp-append-version="true" />
   ========================================================================== */
:root {
    /* Brand / chrome */
    --xd-primary:        #0f172a;
    --xd-primary-700:    #1e293b;
    --xd-primary-600:    #334155;
    /* Action / accent */
    --xd-accent:         #2563eb;
    --xd-accent-600:     #1d4ed8;
    --xd-accent-soft:    #eff6ff;
    /* Status */
    --xd-success:        #16a34a;
    --xd-success-soft:   #dcfce7;
    --xd-warning:        #d97706;
    --xd-warning-soft:   #fef3c7;
    --xd-danger:         #dc2626;
    --xd-danger-soft:    #fee2e2;
    --xd-info:           #0891b2;
    --xd-info-soft:      #cffafe;
    --xd-neutral:        #64748b;
    --xd-neutral-soft:   #f1f5f9;
    /* Surfaces & text */
    --xd-bg:             #f8fafc;
    --xd-surface:        #ffffff;
    --xd-surface-2:      #f8fafc;
    --xd-border:         #e2e8f0;
    --xd-border-strong:  #cbd5e1;
    --xd-text:           #1e293b;
    --xd-text-muted:     #64748b;
    --xd-text-invert:    #f8fafc;
    /* Radius */
    --xd-radius-sm:      6px;
    --xd-radius:         10px;
    --xd-radius-lg:      14px;
    --xd-radius-pill:    999px;
    /* Spacing scale (4 / 8 / 12 / 16 / 24 / 32) */
    --xd-sp-1:           4px;
    --xd-sp-2:           8px;
    --xd-sp-3:           12px;
    --xd-sp-4:           16px;
    --xd-sp-5:           24px;
    --xd-sp-6:           32px;
    /* Typography */
    --xd-font:           'Segoe UI', system-ui, -apple-system, sans-serif;
    --xd-fs-h1:          22px;
    --xd-fs-h2:          17px;
    --xd-fs-body:        14px;
    --xd-fs-cell:        13px;
    --xd-fs-cap:         12px;
    --xd-fw-label:       600;
    /* Elevation */
    --xd-shadow-sm:      0 1px 2px rgba(15,23,42,.06);
    --xd-shadow:         0 2px 8px rgba(15,23,42,.08);
    --xd-shadow-lg:      0 8px 24px rgba(15,23,42,.12);
    /* Motion */
    --xd-ease:           160ms cubic-bezier(.4,0,.2,1);
    /* Sidebar metrics */
    --xd-sidebar-w:      244px;
    --xd-sidebar-w-collapsed: 64px;
}

/* Gate Out: server-backed approved-booking search */
#gateOutCreate .release-booking-search .form-control {
    min-height: 46px;
}

#gateOutCreate .release-booking-results {
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid var(--xd-border);
    border-radius: var(--xd-radius);
    box-shadow: var(--xd-shadow);
}

#gateOutCreate .release-booking-result {
    border: 0;
    border-bottom: 1px solid var(--xd-border);
    padding: 12px 14px;
    text-align: left;
    background: var(--xd-surface);
    color: var(--xd-text);
    transition: background-color var(--xd-ease), border-color var(--xd-ease);
}

#gateOutCreate .release-booking-result:last-child {
    border-bottom: 0;
}

#gateOutCreate .release-booking-result:not(:disabled):hover,
#gateOutCreate .release-booking-result:not(:disabled):focus-visible {
    background: var(--xd-accent-soft);
    outline: 2px solid color-mix(in srgb, var(--xd-accent) 35%, transparent);
    outline-offset: -2px;
}

#gateOutCreate .release-booking-result.is-selected {
    background: var(--xd-success-soft);
    box-shadow: inset 4px 0 0 var(--xd-success);
}

#gateOutCreate .release-booking-result:disabled {
    background: var(--xd-neutral-soft);
    color: var(--xd-neutral);
    cursor: not-allowed;
    opacity: 1;
}

#gateOutCreate .release-booking-result__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

#gateOutCreate .release-booking-result__meta,
#gateOutCreate .release-booking-result__reason {
    display: block;
    margin-top: 4px;
    font-size: 0.88rem;
}

#gateOutCreate .release-booking-result__reason {
    color: var(--xd-danger);
    font-weight: 600;
}