:root {
    --deployment-banner-height: 0px;
}

.uppercase {
    text-transform: uppercase;
}

.error {
    color: #dc3545 !important;
    font-weight: bold !important;
}

.hide {
    display: none;
}

.mt-10 {
    margin-top: 10px;
}

/* Select2 container with flex for text and arrow */
.select2-container .select2-selection {
    height: calc(1.5em + 0.75rem - 1px) !important;
    display: flex;
    align-items: center;
    /* vertically center text & arrow */
    position: relative;
    /* needed for absolute clear icon */
}

/* Rendered text padding to avoid overlap */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: normal !important;
    flex: 1;
    /* allow text to take available space */
    padding-right: 25px;
    /* leave space for clear icon on right */
}

/* Arrow vertically centered */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    display: flex;
    align-items: center;
}

/* Clear icon on right */
.select2-container--default .select2-selection__clear {
    position: absolute;
    right: 10px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}

/* Red border for invalid Select2 fields */
.select2-container--default.select2-container .select2-selection.is-invalid {
    border-color: #dc3545 !important;
    /* Bootstrap's red */
    border-width: 1px;
    border-style: solid;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    /* optional Bootstrap-like shadow */
}

#formTabs .nav-link.disabled {
    pointer-events: none;
    /* prevent click */
    opacity: 1;
    /* keep full visibility */
    background: #d6d6d6;
    /* grey background for disabled */
    color: #888888;
    /* grey text */
    cursor: not-allowed;
    /* change cursor */
    box-shadow: none;
    /* remove shadow for disabled */
}

/* Optional: keep hover effect off for disabled tabs */
#formTabs .nav-link.disabled:hover {
    background: #d6d6d6;
    color: #888888;
}


/* Base tab style */
#formTabs .nav-link {
    position: relative;
    border: none;
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 0.6rem 1.2rem;
    margin-right: 0.3rem;
    background: #f5f5f5;
    color: #495057;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Hover effect */
#formTabs .nav-link:hover:not(.disabled) {
    background: #e2f0ff;
    color: #0274be;
    transform: translateY(-2px);
}

/* Active tab */
#formTabs .nav-link.active {
    background: linear-gradient(135deg, #0274be, #4dabf7);
    color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    font-weight: 600;
}

/* Disabled tabs */
#formTabs .nav-link.disabled {
    pointer-events: none;
    opacity: 0.5;
    background: #e9ecef;
    color: #6c757d;
}

/* Optional: slight scale for active tab */
#formTabs .nav-link.active {
    transform: scale(1.05);
}

/* Smooth transition for all */
#formTabs .nav-link {
    transition: all 0.3s ease-in-out;
}

/* Completed tab */
/*#formTabs .nav-link.completed {
        background-color: #ee7928 !important;*/
/* your orange */
/*color: #fff !important;
        font-weight: 500;
        border-color: #ee7928 !important;*/
/* optional: match border */
/*}*/

/* Hover effect for completed tab */
/*#formTabs .nav-link.completed:hover {
            background-color: #d66b20 !important;*/
/* slightly darker on hover */
/*color: #fff !important;
        }*/
.employee-notification {
    width: auto;
    display: inline-block;
    padding: 0.25rem 0.5rem;
}

.ui-autocomplete {
    position: absolute;
    z-index: 1050 !important;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    max-height: 250px;
    overflow-y: auto;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15);
    padding: 0.25rem;
}

.ui-menu-item-wrapper {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-radius: 0.25rem;
}

.ui-menu-item-wrapper:hover {
    background-color: #f8f9fa;
}

.ui-state-active {
    background-color: #0274be !important;
    color: white !important;
}

.w-6 {
    width: 6%
}

.w-10 {
    width: 10%
}

.w-15 {
    width: 15%
}

.w-12 {
    width: 12%
}

.wrap-text {
    text-wrap: auto;
}

input[readonly],
input[readonly]:focus {
    background-color: #e5e5e5;
    cursor: not-allowed;
    /* optional */
}

/* Premium DataTable Toolbar Buttons */
.dt-buttons .btn {
    border-radius: 6px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease-in-out !important;
    border: 2px solid transparent !important;
    /* Proper border base */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    padding: 0.4rem 0.8rem !important;
}

.dt-buttons .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    filter: brightness(1.1);
}

/* Unified #0274BE Color for Export Buttons (No Border) */
.dt-buttons .btn {
    border: none !important;
    background-color: #0274be !important;
    color: #fff !important;
}

.dt-buttons .btn:hover {
    background-color: #0263a1 !important;
}

/* Specific text/icon pop */
.dt-buttons .btn i {
    margin-right: 5px;
    font-size: 0.9rem;
}

/* Premium Column Visibility Dropdown */
div.dt-button-collection {
    width: 220px !important;
    padding: 8px !important;
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    background: #ffffff !important;
    margin-top: 5px !important;
    z-index: 2005 !important;
}

div.dt-button-collection button.dt-button {
    background: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    border-radius: 6px !important;
    margin-bottom: 4px !important;
    padding: 8px 12px !important;
    text-align: left !important;
    font-size: 0.8125rem !important;
    color: #495057 !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
}

div.dt-button-collection button.dt-button:hover {
    background: #e9ecef !important;
    transform: translateX(3px) !important;
    color: #0274be !important;
}

div.dt-button-collection button.dt-button.active {
    background: #0274be !important;
    color: #ffffff !important;
    border-color: #015a94 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

div.dt-button-collection button.dt-button.active:hover {
    background: #0263a1 !important;
}

/* Background overlay for the dropdown when open (optional, for focus) */
div.dt-button-background {
    display: none !important;
    /* Keep it clean without dimming background */
}

/* DataTable smart alignment classes */
.dt-align-str {
    text-align: left !important;
}

.dt-align-num {
    text-align: right !important;
}

th.dt-align-num {
    text-align: right !important;
}

.dt-align-act {
    text-align: center !important;
}

th.dt-align-act {
    text-align: center !important;
}

/* =========================================================
   DEPLOYMENT BANNER STYLES
   ========================================================= */
/* layout shift */
body {
    transition: padding-top 0.3s ease-in-out;
}

/* banner */
.deployment-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3rem;
    background: linear-gradient(135deg, #e63946, #c1121f);
    color: white;
    z-index: 1050;
    display: flex;
    align-items: center;
    padding: 0 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

/* layout */
.deployment-banner-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* LEFT SIDE */
.deployment-left {
    display: flex;
    align-items: center;
    flex: 1;
    overflow: hidden;
    gap: 10px;
}

/* icon */
.warning-icon {
    font-size: 1.2rem;
    color: #ffd60a;
    flex-shrink: 0;
}

/* wrapper */
.deployment-message-wrapper {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
}

/* TRACK (IMPORTANT) */
.deployment-message-track {
    display: inline-flex;
    width: max-content;
    animation: marquee 35s linear infinite;
    will-change: transform;
}

/* text */
.deployment-message {
    white-space: nowrap;
    padding-right: 80px;
}

/* TIMER */
.deployment-timer-wrapper {
    background: rgba(0, 0, 0, 0.35);
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

/* countdown */
.deployment-countdown {
    font-family: monospace;
    font-weight: 700;
    color: #ffe3e3;
}

/* ⭐ KEY FIX: TRUE RIGHT EDGE START */
@keyframes marquee {
    0% {
        transform: translateX(100%);
        /* start OUTSIDE right (timer side) */
    }

    100% {
        transform: translateX(-100%);
        /* exit left (caution icon side) */
    }
}

body.has-deployment-banner .sidebar {
    top: 3rem !important;
    height: calc(100dvh - 3rem) !important;
}

body.has-deployment-banner .topbar {
    margin-top: 3rem;
}

/* Center empty table message */
table.dataTable td.dataTables_empty {
    text-align: center !important;
}
.modal-header .btn-close {
     filter: none !important; 
    opacity: 1;
}

/* FY session lock: out-of-range days (arrows stay enabled) */
.datepicker table tr td.fy-date-blocked,
.datepicker table tr td.fy-date-blocked:hover,
.datepicker table tr td.disabled.fy-date-blocked,
.datepicker table tr td.fy-date-blocked.disabled {
    color: #9aa3af !important;
    background-color: #f0f2f5 !important;
    background-image: none !important;
    cursor: not-allowed !important;
    text-decoration: line-through;
    opacity: 0.75;
    position: relative;
}
.datepicker table tr td.fy-date-blocked::after {
    content: "🚫";
    position: absolute;
    top: 1px;
    right: 1px;
    font-size: 8px;
    line-height: 1;
    opacity: 0.9;
    pointer-events: none;
}
/* Force month navigation arrows to remain usable */
.datepicker table tr th.prev,
.datepicker table tr th.next,
.datepicker table tr th.prev.disabled,
.datepicker table tr th.next.disabled {
    visibility: visible !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    opacity: 1 !important;
}
.ui-datepicker td.fy-date-blocked a,
.ui-datepicker td.fy-date-blocked span {
    color: #9aa3af !important;
    background: #f0f2f5 !important;
    cursor: not-allowed !important;
    text-decoration: line-through;
}