/* ==================================================== */
/* 🌎 HOLY GRAIL FLEXBOX LAYOUT (100% VH/VW) 🌎        */
/* ==================================================== */

       * {
            box-sizing: border-box; /* Ensures padding and border are included in the element's total width */
        }

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  background-color: #f8f9fa;
  color: #333;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    align-items: center;
}

body {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Safari */
  -khtml-user-select: none;    /* Konqueror HTML */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Standard syntax */
}



.app_status_oos_hidden { display: none; } 
.app_status_oos_visible,  { display: block; } 

/* General color scheme */
.text-good { color: #198754 !important; }    /* green / success */
.text-warn { color: #ffc107 !important; }    /* amber / caution */
.text-bad  { color: #dc3545 !important; }    /* red / danger */
.text-info { color: #0d6efd !important; }    /* blue / informational */

/* Optional visual boosts */
.bg-bad-light  { background-color: rgba(220, 53, 69, 0.08); }
.bg-warn-light { background-color: rgba(255, 193, 7, 0.08); }
.bg-good-light { background-color: rgba(25, 135, 84, 0.08); }

.bg-danger-app  { background-color: #F78B8B; }
.bg-primary-extra  { background-color: #91D4FA; }

.app-oos-black { background-color: #818589; color: white; }
.app-error-red { background-color: #F78B8B; }
.app-over-blue { background-color: #91D4FA; }
.app-min-yellow { background-color: yellow; }


.slow-fade {
  /* Define the starting color (white) and the animation properties */
  background-color: #ffffff;
  animation: fade-colors .5s infinite alternate;
}

@keyframes fade-colors {
  /* The animation starts with white background */
  from {
    background-color: #ffffff;
  }
  /* The animation ends with light red background */
  to {
    background-color: #ffeaea; /* A soft, light red */
  }
}

#logout-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 999;}

/* Fixed height header */
header {
  flex-shrink: 0;
  height: 50px; /* adjust to your navbar height */
width: 100vw;
}

/* --- Footer Styling --- */
.app-footer {
    flex-shrink: 0;
    height: 30px;
width: 100vw;
    background-color: #e9ecef;
    border-top: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    color: #6c757d; /* text-muted color */
}

/* Optional: Make the center text slightly smaller/subdued */
.footer-center-text {
    font-size: 0.85rem;

}

.footer-left {
font-size: .7rem;

}
.footer-right {
font-size: .7rem;
width: 100px;
text-align:left;
}

/* Main content fills remaining height */
main {
  flex-grow: 1;
  display: flex;
  width: 100vw;
  padding: 0 !important;
  margin: 0;
  /*background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);*/
  overflow: hidden;
}

/* ======================== */
/* Tabs Layout              */
/* ======================== */

/* Tabs container fills main */
#tabs {
  display: flex;
  flex: 1;
  height: 100%;
  width: 100%;
}

/* Tab list (vertical, wraps if needed) */
#tabs > ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;          /* wrap to additional columns if too many tabs */
  margin: 0;
  padding: 0;
  list-style: none;
  background: #e9ecef;
  width: auto;              /* auto-expand if multiple columns appear */
  height: 100%;
  overflow-y: hidden;
}

/* Individual tabs */
#tabs > ul li {
  flex: 1 0 auto;           /* grow/shrink to share height */
  display: flex;
  justify-content: center;
  align-items: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  font-size: 0.85rem;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc; /* optional for multi-column separation */
  box-sizing: border-box;
}

/* Tab links */
#tabs > ul li a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #000;
  padding: 0.1rem;
  text-align: center;
}

/* Active tab styling */
#tabs > ul li.ui-tabs-active {
  background: #0d6efd;
}

#tabs > ul li.ui-tabs-active a {
  color: #fff;
  font-weight: bold;
}

/* Tab panels */
#tabs > div {
  flex: 1;                  /* fill remaining width */
  padding: 2px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/*================================================================
  1. MODAL SIZING & SCROLLING (modal-xxl and modal-body)
  ================================================================*/

/* releaving form*/
  select.opacity-50 {
    background-color: #f8f9fa !important;
    cursor: not-allowed;
  }


/* Custom Modal Dialog Width (modal-xxl) */
/* Targets the HTML element with class="modal-dialog modal-xxl" */
.modal-xxl {
    /* Uses a high percentage for better responsiveness on smaller desktops/laptops */
    width: 95% !important; 
    /* Default max-width for very large screens */
    max-width: 1400px; 
}

/* Ensure centering on smaller viewports where modal-dialog might have odd margins */
@media (min-width: 576px) {
    .modal-dialog {
        margin: 1.75rem auto; 
    }
}

/* Ensure the max-width is applied correctly at the specified breakpoint */
@media (min-width: 1400px) {
  .modal-xxl {
    max-width: 1400px;
  }
}

/* Modal Body Controls (Height and Scrolling) */
/* Targets the HTML element with class="modal-body" */
#acADCModal .modal-body {
    max-height: 80vh; 
    /* Enable vertical scrolling if content is too tall */
    overflow-y: auto; 
    /* CRITICAL: Enable horizontal scrolling if internal content is too wide */
    overflow-x: auto; 
    width: 100%; 
    /* Add padding back for breathing room */
    padding: 1rem; 
}

/*================================================================
  2. JQUERY UI TABS INTEGRATION
  ================================================================*/

/* Ensure the entire tabs container uses 100% of the available width */
#acting-tabs {
    width: 100%;
}

/* Ensure the tab navigation (ul) utilizes full width */
#acting-tabs > ul {
    width: 100%;
    /* Prevents tab headers from wrapping, allowing overflow if many tabs exist */
    white-space: nowrap; 
    /*overflow-x: auto;*/ 
}

/* Ensure the content panes fill the width */
#acting-tabs > div[id^="acting-tabs-"] {
    width: 100%;
    /* Ensure no padding here conflicts with the staff list container */
    padding: 0; 
}

/*================================================================
  3. STAFF LIST LAYOUT (Vertical-Wrapping Columns)
  ================================================================*/

/* Targets Tabs 1, 2, 3, 5 */
.staff-list-container {
    /* Required for column wrapping in Flexbox */
    height: 60vh; 
    max-height: 600px; 
    
    display: flex;
    flex-direction: column; /* Stacks items vertically first */
    flex-wrap: wrap;       /* Wraps items into new vertical columns */
    align-content: flex-start; /* Aligns columns to the start */
    
    /* Gap between staff items (vertical) and between columns (horizontal) 
    gap: 10px 20px; */

    /* Ensures container respects the tab pane width but can extend to accommodate all columns */
    width: 100%; 
    min-width: fit-content; 
    padding: 10px 0;
}

.staff-name-box {
    /* Sets a minimum size for the column width, ensuring legibility */
    min-width: 200px; 
    max-width: 300px; 
    
    display: block;
    margin: 0;
    /*padding: 2px 5px;*/
    font-size: 0.7rem; /* Increased size slightly for better legibility */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    break-before: avoid; 
}

/*================================================================
  4. APC/SPC LAYOUT (Two Side-by-Side Columns - Tab 4)
  ================================================================*/

/* Container for the two side-by-side lists (APC and SPC) */
.apc-spc-two-column-layout {
    display: flex;
    justify-content: space-between; 
    gap: 30px; 
    padding: 10px 0;
    width: 100%;
}

/* Each wrapper takes up equal horizontal space */
.apc-spc-list-wrapper {
    flex: 1 1 50%; 
    min-width: 0; 
    /* Override flex-direction for this wrapper if needed, but the items inside 
       will naturally stack since they aren't using .staff-list-container */
}

.apc-spc-list-wrapper h6 {
    margin-bottom: 5px;
}

/* ----------------------------------------------- */
/* 3. Column Layout Adjustments (for Flexbox Columns) */
/* This section handles the vertical wrapping columns (Tab 1, 2, 3, 5) */


/* ----------------------------------------------- */
/* 4. APC/SPC Two-Column Layout (Tab 4) */
/* This handles the two side-by-side lists */
.apc-spc-two-column-layout {
    display: flex;
    /* Use space-between to push them to the edges */
    justify-content: space-between; 
    gap: 30px; 
    /* Ensure this container is wide enough to fill the available space */
    width: 100%; 
}

/* No change needed here, it correctly uses flex-grow */
.apc-spc-list-wrapper {
    flex: 1 1 50%;
    min-width: 0;
}


/* Note: You should remove the height and column-related properties from .staff-list-container for Tab 4, 
   but since that's used on all other tabs, we'll override it in the HTML structure.
   The main APC/SPC content will *not* use the .staff-list-container class directly here.
*/

/* ======================== */
/* Main Content             */
/* ======================== */

.main-tab-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* Top / Bottom split */
.district-top {
  display: flex;
  width: 100%;
  height: 325px; /* adjust as needed */
}

.district-bottom {
  /*flex: 1;                fills remaining space */
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
   gap: 2px;
  /*background: #d3d3d3;    example background 
  padding: 5px;*/
padding-top: 2px;
  box-sizing: border-box;
}

/* Top Divs (1-5) */
.top-div {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid black;
  border-radius: 8px;
  overflow: hidden; 
  margin: 1px;
}

/* Info Divs (div 1 & 5) */
.top-div.info {
  flex: 0 0 25%; /* width of info div */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.top-info-div {
   height: 196px;
/* background: #b0c4de;*/
}

.top-notes-ai-div {
  flex: 1;            /* take remaining space */
  display: flex;
  flex-direction: column;
}



.bottom-inner {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 125px;
  gap: 1px; 
 /* background: #f8f9fa;
   For demonstration, give it a border so you can see the container */

  padding: 0;
  font-size: .6rem;
}

.list-item {
  /* Make the list item itself a flex container */
  display: flex; 
  /* Make sure each item takes up the full width of its column */
  width: 50%; /* Adjust this width as needed */
  padding: 0;
  padding-left: 5px;
  padding-right: 5px;
  /* Optional: Spacing between rows */
  margin-bottom: 0;
   border: 1px solid #ccc;
}

/* Style for the text inside the list item */
.left-text {
  /* Takes up minimum space on the left */
  margin-right: auto; /* Pushes the right-text as far right as possible */
}

.right-text {
  /* Aligns to the right within the list-item */
  text-align: right; 
  /* Takes up minimum space on the right */
}

/* Middle Divs (div 2,3,4) */
.top-div.middle {
  flex: 1; /* stretch automatically; can be overridden individually */
}

.title {
  /*height: 30px;*/
  font-weight: bold;
  text-align: center;

display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  /*line-height: 30px;*/
  padding: 0px 2px;
}
.district-table-title {
  font-weight: bold;
  text-align: center;
  line-height: 1rem;
  font-size: 1rem;
}

.xinner.xdroppable {
  height: 100%;
  width: 100%;
  padding: 5px;
  background: #f8f9fa;
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 1px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: start;
  align-items: flex-start;

    padding-top: 0;
    padding-bottom: 0;
}

/* Background role-name */
.xinner.xdroppable[data-role-name]::before {
  content: attr(data-role-name);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.1);
  text-align: center;
  white-space: pre-wrap;
  z-index: 0;
}

.xinner.xdroppable.staff-droppable > * {
    /* CRITICAL FIX: Eliminate all vertical margins and padding on the elements themselves 
       to ensure no space is added between the wrapped rows. */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    /* Optional: Minimize the line height, which sometimes adds extra vertical space */
    line-height: 1;
}

/* Notes textarea */
.notes-textarea {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
  resize: none;
  overflow-y: auto;
  font-size: 0.8rem !important;
  border: none;
}

.notes-textarea:focus {
  outline: none;
  box-shadow: none;
}

.ai-container {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  border: 1px solid #ccc;
  max-height: 100px;              /* collapsed height */
  transition: max-height 0.3s ease-in-out;  /* smooth expansion */
}

.ai-container:hover {
  max-height: 400px;              /* expanded height on hover */
  overflow-y: auto;               /* allow scrolling if content is too big */
}

/* AI vertical title */
.ai-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  font-weight: bold;
  padding: 2px;
  background: #ffffc5;
}

/* AI body content */
.ai-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 2px;
  overflow: hidden;
  font-size: 0.7rem;
}

.ai-container:hover .ai-body {
  overflow-y: auto;               /* show scroll when expanded */
}

.table-tight {
  font-size: 0.7rem;       /* smaller text */
  line-height: 1;           /* less vertical spacing */
  border-collapse: collapse; /* remove gaps between cells */
}

.table-tight th,
.table-tight td {
  padding: 0.25rem 0.4rem; /* very tight padding */
  vertical-align: middle;
  /*border-top: 1px solid #dee2e6;  optional, like bootstrap */
}

.table-tight thead th {
  border-bottom: 1px solid #dee2e6;
}

.table-tight td:nth-child(2),
.table-tight td:nth-child(3),
.table-tight th:nth-child(2),
.table-tight th:nth-child(3) {
    text-align: center;
}

#no_session_load_screen {
height: 100%;
 display: flex;
 flex-direction:column;
justify-content: center;
 align-items: center;
 text-align:center;
width: 100%;
max-width: 65vw;
padding-top: 15px;
font-size: .9rem;
}

.a-no-format {
  color: inherit; /* Inherits the text color from its parent element */
  text-decoration: none; /* Removes the underline */
}

/* Apply the styles to all link states for consistency */
.a-no-format:visited,
.a-no-format:hover,
.a-no-format:active {
  color: inherit;
  text-decoration: none;
}

        /*
        ===================================================================
        1. APPARATUS CONTAINER (Main Column)
        ===================================================================
        */
        .apparatus {
            /* Set the user-defined width */
            width: 90px; 
            
            /* Main Flex Container */
            display: flex;
            flex-direction: column; /* Stack title, button, and roles vertically */
            justify-content: start;
            align-items: center; /* Center children horizontally (including button) */
            align-content: center;
            /* Updated gap to 2px */
            gap: 2px; 
            
            padding: 2px;
            /* Updated border to 1px solid black */
            border: 1px solid black;
            border-radius: 8px;
            /* Height is naturally fit-to-content in Flexbox when no fixed height is set */
        }

        .app-title {
            font-size: 1.5rem;
line-height: .9;
            font-weight: 700;
            text-align: center;
        }



        .app_status_oos {
            text-align: center;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: start;
            align-items: center;
            align-content: center;
        }

/*.app_status_oos > div { display: none; }*/

        .oss-button {
            width: 75%;
            padding: 2px 2px;
            background-color: #10b981; /* Success Green */
            color: white;
            border-radius: 8px;
            font-size: .6rem;
            text-align: center;

        }
        .oss-button-out {
            width: 75%;
            padding: 2px 2px;
            background-color: red; /* red */
            color: white;
            border-radius: 8px;
            font-size: .6rem;
            text-align: center;

        }

        /*
        ===================================================================
        2. ROLE CONTAINERS (OFFICER & CREW)
        ===================================================================
        */
        .roles-container {
            display: flex;
            flex-direction: column;
            width: 100%; /* Take full width of apparatus */
            gap: 5px;
        }
        
        .role-box {
            width: 100%; /* Take full width of roles-container */
            /*padding: 2px;*/
        }
        
		.inner-droppable-top {
			display: flex;
			flex-direction: row; 
			flex-wrap: wrap;
			align-items: flex-start;
			justify-content: center;
			width: 100%; 
			height: 100%;
			padding: 2px;
			position: relative;
			gap: 2px;
			align-content: flex-start; 
			overflow-y: auto; 
		}

        /* Background Role Label */
        .inner-droppable-top[data-role-name]::before {
            content: attr(data-role-name);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: .8rem;
            font-weight: 700;
            color: black;
            opacity: 0.15;
            z-index: 0;
            pointer-events: none;

        }

        /* The Droppable Area */
        .inner-droppable {
            display: flex;
            flex-direction: row; /* Stack staff elements vertically */
            flex-wrap: wrap;
            align-items: center; /* Center staff elements horizontally */
            justify-content: center;
            width: 100%; /* MANDATORY: Always 100% width of its parent (.role-box padding) */
            min-height: 50px;
            padding: 2px; 
            border: 2px dashed black;
            border-radius: 8px;
            position: relative; 
            overflow: hidden; 

        }

        /* Background Role Label */
        .inner-droppable[data-role-name]::before {
            content: attr(data-role-name);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1rem;
            font-weight: 700;
            color: black;
            opacity: 0.15;
            z-index: 0;
            pointer-events: none;

        }

        .inner-droppable:hover {
            /*border-color: blue;
            background-color: #E6E6FF;*/
        }

        /* Custom CSS for the highlight effect */
        .drop-highlight {
            border: 3px dashed blue !important;
border-radius: 8px;
            background-color: #E6E6FF !important; /* Light Lavender/Periwinkle */
            transition: all 0.2s ease-in-out;
        }


        /*
        ===================================================================
        3. STAFF ELEMENT (Nested Borders)
        ===================================================================
        */
        .staff {
            width: 75px; /* Staff element must take 100% width */
            margin-bottom: 2px;
            z-index: 1; /* Keep staff above the background role name */
    /* Critical: Eliminates default or inherited vertical margins */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    /* Eliminates default or inherited vertical padding */
    padding-top: 0 !important;
    padding-bottom: 2 !important;
    /* Optional: Ensures minimal height is introduced by text line-height */
    line-height: 1; 
        }

        /* 1. Outermost Border: Special Staff (5px dashed orange) */
        .staff-special-border {
            border: 5px dashed orange;
            border-radius: 4px;
            width: 100%; 
        }

        /* 2. Middle Border: Normal Outer (1px solid black) */
        .staff-normal-border {
            border: 1px solid black;
            border-radius: 4px;
            width: 100%; 
        }



.staff-rank-content {
    /* Content Styling & No-Collapse Fix (Moved from old .staff-rank-border) */
    background-color: white; 
    color: black; 
    padding: 2px; 
    font-size: .7rem;
    text-align: center;
    width: 100%; /* Ensure it spans the full width of the border element */
    
    /* Fix: Ensure it maintains size even when empty */
    min-height: 1.2rem;
            display: flex;
            flex-direction: column; /* Stack staff elements vertically */
            align-items: center; /* Center staff elements horizontally */


}
.staff-rank-content div {
    /* Your existing rules to handle overflow */
    max-width: 80px; /* This should actually be 100% of the parent to respect the 75px limit */
    width: 100%; /* Use 100% to ensure it takes all available horizontal space */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* 🔥 CRITICAL FIX: Use clamp() to scale font size */
    /* Clamp(min-size, preferred-size, max-size) */
    /* This makes the font responsive, scaling from a large size down to .5rem */
    font-size: clamp(0.5rem, 3vw, 0.7rem); /* Adjusted font-size from .7rem (now max) down to .5rem (min) */
    
    /* Ensure the text is still centered despite the ellipsis */
    text-align: center;
}

/* Rank-Specific Border Styles (Derived from staff-inner- classes) */

/* General 'Fallback' or Default Border Style (from your old .staff-rank-border) */
.staff-rank-border-default {
    border: 4px solid purple; 
    border-radius: 4px;
}

/* PFFT, PFF - Bright Pink Border (using #FF69B4) */
.staff-rank-border-PFFT, 
.staff-rank-border-PFF {
    /* Note: Old staff-inner- set background-color: #FF69B4; and a 5px border. */
    border: 4px solid #FF69B4; 
    border-radius: 4px;
}
.staff-rank-color-PFFT, 
.staff-rank-color-PFF {
    /* Note: Old staff-inner- set background-color: #FF69B4; and a 5px border. */
    background-color: #FF69B4;
}



/* FF3, FF2 - Yellow Border */
.staff-rank-border-FF3, 
.staff-rank-border-FF2 {
    border: 4px solid yellow;
    border-radius: 4px;
}

/* FF1 - Black Border */
.staff-rank-border-FF1 {
    border: 4px solid black;
    border-radius: 4px;
}

/* AC - Black/Red Gradient Border */
.staff-rank-border-AC {
    border: 4px solid transparent; 
    border-radius: 4px;
    /* Use 'border-box' to apply the gradient to the border */
    background: linear-gradient(white, white) padding-box,
                linear-gradient(to right, black 50%, red 50%) border-box;
}

/* CAPT - Red Border */
.staff-rank-border-CAPT {
    border: 4px solid red;
    border-radius: 4px;
}

/* ADC - Red/White Gradient Border */
.staff-rank-border-ADC {
    border: 4px solid transparent; 
    border-radius: 4px;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(to right, red 50%, white 50%) border-box;
}

/* DC - White Border */
.staff-rank-border-DC {
    border: 3px solid white;
    border-radius: 4px;
}

/* APC, SPC - White/Blue Gradient Border */
.staff-rank-border-APC, 
.staff-rank-border-SPC {
    border: 4px solid transparent; 
    border-radius: 4px;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(to right, white 50%, blue 50%) border-box;
}

/* PC - Blue Border */
.staff-rank-border-PC {
    border: 4px solid blue;
    border-radius: 4px;
}

/* Autocomplete*/
    /* Essential CSS: Ensures the jQuery UI autocomplete dropdown appears over the modal */
    .ui-autocomplete {
        z-index: 2000 !important;
    }
    /* Simple separator for the list items */
    .list-item-content {
        flex-grow: 1;
        margin-right: 1rem;
    }

/* ======================== */
/* Navbar / Header styles   */
/* ======================== */

.navbar {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
}

.navbar-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 600;
  font-size: 1.1rem;
  color: #f8f9fa;

}

.badge-sm {
    padding: 0 !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    cursor: pointer;
    font-size: .5rem;
}
.badge-sm-ac {
    padding: 0 !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    cursor: pointer;
    font-size: .8rem;
}

.btn-tiny {
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-font-size: 0.8rem;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#datepicker {background:#fff!important;color:#000!important;cursor:pointer;width:275px!important;text-align:center;font-weight:bold;border:none;border-radius:.2rem;}
.ui-datepicker td a{display:block;padding:.125rem.25rem;border-radius:6px;text-align:center;}
.ui-datepicker td.shift-a a{background:#dd2f1f!important;color:#000!important;font-weight:bold;opacity:0.9;}
.ui-datepicker td.shift-b a{background:#b7bcbb!important;color:#000!important;font-weight:bold;opacity:0.9;}
.ui-datepicker td.shift-c a{background:#054a7d!important;color:#fff!important;font-weight:bold;opacity:0.9;}
.ui-datepicker td.shift-d a{background:#f3da00!important;color:#000!important;font-weight:bold;opacity:0.9;}
.ui-datepicker td.ui-datepicker-today a{box-shadow:0 0 0 2px rgba(0,0,0,0.08) inset;}

/* ======================== */
/* Login Page Specific      */
/* ======================== */

.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
}

.login-container {
  max-width: 400px;
  width: 90%;
  background-color: white;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}