/* --- Light & Dark Theme Defaults --- */
:root {
  --fc-border-color: #dee2e6;
  --fc-daygrid-day-number-color: #6c757d;
  --flare-red: #c92a2a;
  --flare-border: #a61e1e;
  --header-shadow-light: 1px 1px 1px #999, 2px 2px 1px #999;
  --header-shadow-dark: 1px 1px 1px #000, 2px 2px 1px #000;
}
[data-bs-theme="dark"] {
  --fc-border-color: #495057;
  --fc-daygrid-day-number-color: #adb5bd;
  .fc .fc-daygrid-day-number { color: white !important; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7) !important; }
  .badge.bg-info, .badge.bg-warning { color: #000 !important; }
  .bg-light-subtle { 
    background-color: var(--bs-dark-bg-subtle) !important; 
    border-color: var(--bs-border-color-translucent) !important; 
  }
}
[data-bs-theme="light"] .bg-light-subtle { 
  background-color: var(--bs-light-bg-subtle) !important; 
  border-color: var(--bs-border-color-translucent) !important; 
}

/* --- General Styles --- */
html {
    overflow-y: scroll; /* Force scrollbar to always be visible */
    scrollbar-gutter: stable; /* Reserve space for scrollbar */
    width: 100%;
}
body { 
    height: 100%; 
    margin: 0; 
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    display: flex; 
    flex-direction: column;
    width: 100%;
    overflow-x: hidden;
    min-height: 100vh;
}
main { flex-grow: 1; }

/* --- 3D HEADING & SHADOW STYLES --- */
.card,
.bg-light-subtle.border.rounded {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .bg-light-subtle.border.rounded {
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05); /* Faint white glow */
}
main h2,
main h3,
main h4,
main h5 {
    font-weight: 700;
    color: var(--flare-red);
    margin-bottom: 1.25rem;
    text-shadow: var(--header-shadow-light); /* Light mode shadow */
}
[data-bs-theme="dark"] main h2,
[data-bs-theme="dark"] main h3,
[data-bs-theme="dark"] main h4,
[data-bs-theme="dark"] main h5 {
    text-shadow: var(--header-shadow-dark); /* Dark mode shadow */
}
.card-header {
    font-weight: 700;
    color: var(--flare-border);
    font-size: 1.1rem;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
[data-bs-theme="dark"] .card-header {
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
.card.border-danger .card-header,
.card.border-success .card-header {
    color: white;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
/* --- End 3D Styles --- */

/* --- PREVENT HOVER LAYOUT SHIFTS --- */
.accordion-button,
.list-group-item,
.list-group-item-action,
.card,
.btn,
* {
    box-sizing: border-box !important;
}
/* Prevent accordion colors from changing on hover - keep the warning/danger colors */
.accordion-button.bg-warning,
.accordion-button.bg-danger,
.accordion-button.bg-info {
    background-color: var(--bs-warning) !important;
}
.accordion-button.bg-danger {
    background-color: var(--bs-danger) !important;
}
.accordion-button.bg-info {
    background-color: var(--bs-info) !important;
}
.accordion-button.text-dark {
    color: var(--bs-dark) !important;
}

/* --- SPLASH SCREEN STYLES --- */
#splash-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #000000; display: flex; flex-direction: column;  /* charcoal background color #212529    */
    justify-content: center; align-items: center; color: white;
    z-index: 1000; opacity: 1; transition: opacity 1s ease-out;
}
#splash-screen.fade-out { opacity: 0; }
.splash-logo {
    width: 70vw;
    max-width: 350px;
    height: auto;
    margin-bottom: 20px;
    animation: fadeIn 1.5s;
}
.splash-title { font-size: 2.5rem; animation: fadeIn 1.5s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* --- LOGIN PAGE STYLES --- */
.login-form-container { width: 100%; max-width: 400px; }

/* --- CALENDAR STYLES --- */
#calendar-wrapper { }
#calendar { min-height: 600px; flex-grow: 1; }
@media (min-width: 992px) { #calendar-wrapper { max-width: 75%; margin-left: auto; margin-right: auto; } }
.fc th, .fc td { border: 2px solid var(--fc-border-color) !important; }
.fc-bg-event { opacity: 1 !important; }
.fc .fc-daygrid-day-number { color: white !important; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7) !important; font-weight: 600 !important; font-size: 1em !important; }
.fc .fc-daygrid-day { cursor: pointer; } 
.fc-day.day-selected .fc-daygrid-day-frame { background-color: rgba(255, 193, 7, 0.7) !important; }

/* --- DAY OF WEEK HEADER COMPACT --- */
.fc .fc-col-header-cell {
    padding: 0.25rem 0.5rem !important;
    height: auto !important;
}
.fc .fc-col-header-cell-cushion {
    padding: 0.25rem !important;
}

/* --- FORCE DAY NUMBERS TO SHOW ON ALL CELLS --- */
.fc .fc-daygrid-day-top {
    display: block !important;
    visibility: visible !important;
}

/* --- CROSSHATCH PATTERN FOR DAYS OUTSIDE CURRENT MONTH --- */
.fc .fc-day-other {
    position: relative !important;
    background-color: transparent !important;
}
.fc .fc-day-other::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 8px,
        rgba(0, 0, 0, 0.08) 8px,
        rgba(0, 0, 0, 0.08) 10px
    ),
    repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 8px,
        rgba(0, 0, 0, 0.08) 8px,
        rgba(0, 0, 0, 0.08) 10px
    ) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}
[data-bs-theme="dark"] .fc .fc-day-other::before {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 8px,
        rgba(0, 0, 0, 0.2) 8px,
        rgba(0, 0, 0, 0.2) 10px
    ),
    repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 8px,
        rgba(0, 0, 0, 0.2) 8px,
        rgba(0, 0, 0, 0.2) 10px
    ) !important;
}
.fc .fc-day-other .fc-daygrid-day-number {
    color: rgba(255, 255, 255, 0.5) !important;
    opacity: 0.7 !important;
    position: relative !important;
    z-index: 2 !important;
}

/* --- HIGHLIGHT TODAY'S DATE --- */
.fc .fc-day-today {
    background-color: rgba(255, 193, 7, 0.15) !important;
}
.fc .fc-day-today .fc-daygrid-day-frame {
    border: 3px solid #ffc107 !important;
    box-shadow: inset 0 0 8px rgba(255, 193, 7, 0.4);
}
.fc .fc-day-today .fc-daygrid-day-number {
    font-weight: bold !important;
    color: #ffc107 !important;
    font-size: 1.1em !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8) !important;
}

/* --- NSS DOT STYLES --- */
.nss-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    border: 1px solid rgba(0,0,0,0.2);
    vertical-align: middle;
}
.nss-red { background-color: #dc3545; }
.nss-green { background-color: #198754; }

/* --- BADGE TEXT COLOR FIX --- */
.fc-daygrid-event-harness .badge.bg-warning,
.fc-daygrid-event-harness .badge.bg-info {
    color: #000 !important;
}
.fc-daygrid-event-harness .badge.bg-warning .fc-event-main,
.fc-daygrid-event-harness .badge.bg-info .fc-event-main {
    color: #000 !important;
}
.fc-daygrid-event-harness .badge.bg-secondary,
.fc-daygrid-event-harness .badge.bg-secondary .fc-event-main {
    color: #FFF !important;
}

/* --- NAVBAR COLLAPSE MENU STYLES --- */
.navbar {
    position: relative;
    min-height: 56px;
}

.navbar > .container-fluid {
    position: static;
    min-height: 56px;
}

/* Desktop navbar collapse flex container */
@media (min-width: 992px) {
    .navbar-collapse {
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 100%;
    }
    
    .navbar-collapse .navbar-nav {
        flex-wrap: nowrap;
        white-space: nowrap;
        flex: 1;
        justify-content: center;
        margin: 0 auto;
    }
    
    .navbar-collapse .nav-link {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        white-space: nowrap;
    }
    
    /* Right side container for user info */
    .navbar-right-info {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-shrink: 0;
    }
    
    .navbar-collapse .navbar-text {
        white-space: nowrap;
        flex-shrink: 1;
    }
    
    /* User info - can shrink slightly */
    .navbar-collapse .navbar-text:has(span[style*="0.9rem"]) {
        flex-shrink: 2;
    }
    
    /* Department name - allow to scale down font size on smaller screens */
    .navbar-collapse .navbar-text:has(span[style*="1.8rem"]) {
        flex-shrink: 0;
        min-width: max-content;
    }
    
    .navbar-collapse .navbar-text:has(span[style*="1.8rem"]) span {
        white-space: nowrap;
    }
}

/* Adjust department font size for medium desktop screens */
@media (min-width: 992px) and (max-width: 1400px) {
    .navbar-collapse .navbar-text:has(span[style*="1.8rem"]) span {
        font-size: 1.4rem !important;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .navbar-collapse .navbar-text:has(span[style*="1.8rem"]) span {
        font-size: 1.2rem !important;
    }
    
    .navbar-collapse .nav-link {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 991.98px) {
    .navbar > .container-fluid {
        flex-wrap: wrap;
    }
    
    .navbar-brand {
        width: 100%;
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .navbar-brand img {
        width: 60px !important;
        height: 60px !important;
    }
    
    .mobile-second-row {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 1rem;
    }
    
    .mobile-second-row .navbar-text {
        flex: 0 1 auto;
    }
    
    .mobile-second-row .form-check {
        flex: 0 0 auto;
        margin: 0;
    }
    
    .mobile-second-row .navbar-toggler {
        flex: 0 0 auto;
        margin-left: auto;
        padding: 0.25rem 0.5rem;
    }
    
    .navbar-toggler {
        margin: 0;
    }
    
    .navbar-collapse {
        position: absolute;
        top: calc(100% + 0.25rem);
        right: 0.5rem;
        left: auto;
        width: 280px;
        max-width: calc(100vw - 1rem);
        background-color: rgba(0, 0, 0, 0.98);
        border-radius: 0.5rem;
        padding: 0.75rem 0;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 1050;
    }
    
    .navbar-collapse.collapsing {
        transition: none;
        display: none;
    }
    
    .navbar-collapse.show {
        display: block;
    }
    
    .navbar-collapse .navbar-nav {
        gap: 0.125rem;
        flex-direction: column;
    }
    
    .navbar-collapse .nav-link {
        padding: 0.625rem 1rem;
        border-radius: 0.25rem;
        transition: background-color 0.2s ease;
        color: #ffffff;
        white-space: nowrap;
    }
    
    .navbar-collapse .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.15);
    }
    
    .navbar-collapse .nav-link.active {
        background-color: rgba(220, 53, 69, 0.2);
        font-weight: 600;
        border-left: 3px solid #dc3545;
        color: #ffffff;
    }
}

/* --- NEW TRADE REQUEST CALENDAR STYLES --- */
.tradable-shift {
    cursor: pointer;
}
.day-disabled {
    background-color: var(--bs-secondary-bg);
    opacity: 0.6;
    cursor: not-allowed;
}
.checkmark-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5em;
    color: #198754;
    -webkit-text-stroke: 1px var(--bs-body-bg);
    pointer-events: none;
    z-index: 10;
    display: none; /* Hidden by default */
}
.day-selected .checkmark-overlay {
    display: block; /* Show when selected */
}
[data-bs-theme="dark"] .day-disabled {
    background-color: var(--bs-tertiary-bg);
    opacity: 0.4;
}
[data-bs-theme="dark"] .checkmark-overlay {
    -webkit-text-stroke: 1px var(--bs-dark-bg-subtle);
}

/* --- MOBILE-SPECIFIC STYLES --- */
@media (max-width: 768px) {
    body.d-flex.flex-column { height: auto; }
    
    /* Shrink buttons and title on main calendar */
    #calendar-wrapper .fc .fc-button { 
        padding: 0.4rem 0.6rem !important; 
        font-size: 0.8rem !important; 
    }
    #calendar-wrapper .fc .fc-toolbar-title { 
        font-size: 1.1rem; 
    }

    /* Shrink event badges */
     .fc-daygrid-event-harness .badge {
        font-size: 0.65em !important; padding: 0.1em 0.3em !important; display: block;
        margin-bottom: 2px; white-space: nowrap; overflow: hidden;
        text-overflow: ellipsis; max-width: 95%; text-align: center; line-height: 1.3;
    }
    
    /* Navbar optimization */
    .navbar-brand {
        font-size: 0.9rem !important;
    }
    .navbar-brand img {
        width: 35px !important;
        height: 35px !important;
    }
    .navbar-text {
        font-size: 0.75rem !important;
    }
    .navbar-text span {
        font-size: 0.8rem !important;
    }
    
    /* Card spacing */
    .card {
        margin-bottom: 0.75rem !important;
    }
    .card-header {
        font-size: 0.95rem !important;
        padding: 0.5rem 0.75rem !important;
    }
    .card-body {
        padding: 0.75rem !important;
    }
    
    /* Headings */
    main h2 { font-size: 1.5rem !important; }
    main h3 { font-size: 1.3rem !important; }
    main h4 { font-size: 1.15rem !important; }
    main h5 { font-size: 1rem !important; }
    
    /* Button sizing */
    .btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }
    .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    
    /* Form controls */
    .form-control, .form-select {
        font-size: 0.9rem;
    }
    
    /* Modal optimization */
    .modal-dialog {
        margin: 0.5rem;
    }
    .modal-body {
        padding: 0.75rem;
    }
    .modal-header {
        padding: 0.75rem;
    }
    .modal-footer {
        padding: 0.5rem;
    }
    
    /* List groups */
    .list-group-item {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
    
    /* Container padding */
    .container, .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* Table responsive optimization */
    .table-responsive {
        font-size: 0.85rem;
    }
    .table {
        font-size: 0.85rem;
    }
    .table td, .table th {
        padding: 0.5rem;
    }
    
    /* Badge sizing */
    .badge {
        font-size: 0.75rem;
        padding: 0.25em 0.5em;
    }
    
    /* Flex adjustments for mobile */
    .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    /* Alert sizing */
    .alert {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }
}

/* --- TABLET-SPECIFIC STYLES (768px - 1024px) --- */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Calendar wrapper optimization */
    #calendar-wrapper {
        max-width: 95% !important;
    }
    
    /* Slightly smaller fonts for better fit */
    main h2 { font-size: 1.75rem; }
    main h3 { font-size: 1.5rem; }
    
    /* Card optimization */
    .card-body {
        padding: 1rem;
    }
    
    /* Modal sizing */
    .modal-lg {
        max-width: 90%;
    }
    .modal-xl {
        max-width: 95%;
    }
}

/* --- SMALL MOBILE (< 576px) --- */
@media (max-width: 576px) {
    /* Extra small mobile phones */
    .navbar-brand {
        font-size: 0.8rem !important;
    }
    
    /* Hide department name on very small screens */
    .navbar-text.d-none.d-lg-block {
        display: none !important;
    }
    
    /* Stack button groups vertically */
    .btn-group {
        flex-direction: column;
        width: 100%;
    }
    .btn-group .btn {
        width: 100%;
        margin-bottom: 0.25rem;
    }
    
    /* Full width modals */
    .modal-dialog {
        margin: 0;
        max-width: 100%;
    }
    .modal-content {
        border-radius: 0;
        min-height: 100vh;
    }
    
    /* Reduce calendar height */
    #calendar {
        min-height: 400px;
    }
    
    /* Smaller form inputs */
    .form-control, .form-select, .btn {
        font-size: 0.85rem;
    }
    
    /* Accordion buttons */
    .accordion-button {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }
    
    /* List group items more compact */
    .list-group-item {
        padding: 0.5rem;
    }
    
    /* Card titles */
    .card-title {
        font-size: 1rem;
    }
}

/* --- TOUCH-FRIENDLY ENHANCEMENTS --- */
@media (max-width: 768px) {
    /* Larger tap targets for mobile */
    .btn, .form-control, .form-select, .nav-link, .list-group-item-action {
        min-height: 44px; /* iOS recommended tap target size */
    }
    
    /* Better spacing for clickable elements */
    .list-group-item button,
    .list-group-item a {
        margin: 0.25rem 0;
    }
    
    /* Prevent text selection on buttons for better UX */
    .btn, .badge, .accordion-button {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    /* Smooth scrolling on mobile */
    html {
        scroll-behavior: smooth;
    }
    
    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
    }
    
    /* Better input focus on mobile */
    .form-control:focus,
    .form-select:focus {
        border-width: 2px;
    }
}

/* --- LANDSCAPE MOBILE --- */
@media (max-width: 896px) and (orientation: landscape) {
    /* Optimize for mobile landscape mode */
    .navbar-brand img {
        width: 30px !important;
        height: 30px !important;
    }
    
    .modal-dialog {
        max-height: 90vh;
    }
    
    .modal-body {
        max-height: calc(90vh - 120px);
        overflow-y: auto;
    }
}