/**
 * FogliOre - Carbon Design System v11 Custom Theme
 * DoD-themed customization with light/dark mode support
 *
 * NOTE: Carbon v11 main styles are loaded in base.html via <link> tag for better performance.
 * This file contains only custom overrides and theme-specific styles.
 */

/* IBM Plex Fonts - loaded locally via Carbon styles.min.css (no CDN needed) */

/* Set IBM Plex as default font */
html, body {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow-x: hidden;
    max-width: 100vw;
}

code, pre, .cds--code {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
}

/* DoD Brand Color Customizations */
:root {
    --dod-blue-primary: #003366;
    --dod-blue-secondary: #004080;
    --dod-gold: #FFB81C;
    --fast-logo-height: 32px;
}

/* Custom DoD-themed header for FAST SRL */
.fast-header {
    background: linear-gradient(135deg, var(--dod-blue-primary) 0%, var(--dod-blue-secondary) 100%);
    border-bottom: 3px solid var(--dod-gold);
}

.fast-header .cds--header__name {
    color: #ffffff;
}

.fast-header .cds--header__menu-item {
    color: #ffffff;
}

.fast-header .cds--header__menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.fast-header .cds--header__action {
    color: #ffffff;
}

/* Login page centering */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cds-background);
}

.login-card {
    max-width: 400px;
    width: 100%;
}

/* Override Carbon header styling */
.cds--header {
    background: var(--cds-background) !important;
    border-bottom: 1px solid var(--cds-border-subtle) !important;
    height: 48px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 8000;
    overflow: visible !important;
}

.cds--header__name,
.cds--header__menu-item,
.cds--header__action {
    color: var(--cds-text-primary) !important;
}

.cds--header__action-icon,
.cds--header__menu-trigger-icon {
    fill: var(--cds-icon-primary) !important;
}

.cds--header__action-icon {
    pointer-events: none; /* Allow clicks to pass through to button */
}

.cds--header__menu-arrow {
    fill: var(--cds-icon-primary) !important;
}

.cds--header__menu-item:hover,
.cds--header__action:hover,
.cds--header__menu-trigger:hover {
    background-color: var(--cds-layer-hover) !important;
}

/* Dark theme header adjustments */
body[data-carbon-theme="g100"] .cds--header,
body.dark-theme .cds--header {
    background: var(--cds-background) !important;
    border-bottom-color: var(--cds-border-subtle) !important;
}

/* Language switcher button with text */
.cds--header__action--lang {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px !important;
    width: auto !important;
}

.cds--header__action-text {
    color: var(--cds-text-primary) !important;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    margin-left: 4px;
    pointer-events: none; /* Allow clicks to pass through to button */
}

/* Ensure header actions are properly sized */
.cds--header__action {
    height: 48px;
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
}

/* Header global actions container */
.cds--header__global {
    display: flex;
    align-items: center;
    height: 48px;
    margin-left: auto;
    position: relative;
    overflow: visible !important;
}

/* Header submenu styling */
.cds--header__menu {
    background: var(--cds-layer) !important;
    border: 1px solid var(--cds-border-subtle) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
}

.cds--header__menu .cds--header__menu-item {
    color: var(--cds-text-primary) !important;
}

.cds--header__menu .cds--header__menu-item:hover {
    background-color: var(--cds-layer-hover) !important;
}

/* Sidebar toggle button */
.cds--header__menu-trigger {
    display: none;
}

@media (max-width: 1056px) {
    .cds--header__menu-trigger {
        display: flex;
    }

    /* Employee navigation mobile menu */
    .cds--header__nav {
        display: none;
        position: fixed;
        top: 48px;
        left: 0;
        right: 0;
        background: var(--cds-layer);
        flex-direction: column;
        border-bottom: 1px solid var(--cds-border-subtle);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        z-index: 7999;
        max-height: calc(100vh - 48px);
        overflow-y: auto;
    }

    .cds--header__nav--mobile-open {
        display: flex !important;
    }

    .cds--header__menu-bar {
        flex-direction: column;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .cds--header__menu-bar > li {
        width: 100%;
        border-bottom: 1px solid var(--cds-border-subtle);
    }

    .cds--header__menu-item {
        width: 100%;
        padding: 1rem 1.5rem !important;
        color: var(--cds-text-primary) !important;
        display: block;
        text-align: left;
    }

    .cds--header__menu-item:hover {
        background-color: var(--cds-layer-hover) !important;
    }

    /* Hide employee nav toggle button on desktop */
    .cds--header__menu-trigger--employee {
        display: flex;
    }
}

/* Show employee nav on desktop */
@media (min-width: 1057px) {
    .cds--header__menu-trigger--employee {
        display: none !important;
    }

    .cds--header__nav {
        display: flex !important;
    }
}

/* Make primary buttons use DoD blue */
.cds--btn--primary {
    background-color: var(--dod-blue-primary);
}

.cds--btn--primary:hover {
    background-color: var(--dod-blue-secondary);
}

/* Action list buttons - proper theming for icon-only ghost buttons */
.cds--action-list {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

/* Icon-only ghost buttons in data tables */
.cds--btn--icon-only.cds--btn--ghost {
    color: var(--cds-text-secondary);
    background-color: transparent;
}

.cds--btn--icon-only.cds--btn--ghost:hover {
    background-color: var(--cds-layer-hover);
    color: var(--cds-text-primary);
}

.cds--btn--icon-only.cds--btn--ghost:active {
    background-color: var(--cds-layer-active);
}

/* Danger variant for delete buttons */
.cds--btn--icon-only.cds--btn--ghost.cds--btn--danger {
    color: var(--cds-text-secondary);
}

.cds--btn--icon-only.cds--btn--ghost.cds--btn--danger:hover {
    background-color: var(--cds-button-danger-secondary);
    color: var(--cds-text-on-color);
}

.cds--btn--icon-only.cds--btn--ghost.cds--btn--danger:active {
    background-color: var(--cds-button-danger-active);
}

/* Icon sizing for small icon-only buttons */
.cds--btn--sm.cds--btn--icon-only {
    width: 2rem;
    height: 2rem;
    min-height: 2rem;
    padding: 0.375rem;
}

.cds--btn--sm.cds--btn--icon-only .cds--btn__icon {
    width: 1rem;
    height: 1rem;
}

/* Responsive adjustments */
@media (max-width: 672px) {
    .theme-toggle-btn {
        bottom: 80px; /* Above bottom nav/inputs */
        right: 1rem;
        width: 44px;
        height: 44px;
        min-height: 44px;
        opacity: 0.95;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }

    .theme-toggle-btn .cds--btn__icon {
        width: 20px;
        height: 20px;
    }
}

/* ========================================
   Carbon UI Shell - Side Navigation
   ======================================== */

/* Side navigation positioning and sizing */
.cds--side-nav {
    position: fixed;
    top: 48px; /* Below header */
    left: 0;
    bottom: 0;
    width: 256px;
    background-color: var(--cds-background);
    border-right: 1px solid var(--cds-border-subtle);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 8000;
    transition: width 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
}

/* Side navigation items container */
.cds--side-nav__items {
    padding: 1rem 0;
    list-style: none;
    margin: 0;
}

/* Side navigation links */
.cds--side-nav__link {
    display: flex;
    align-items: center;
    height: 2rem;
    padding: 0 1rem;
    color: var(--cds-text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    position: relative;
}

.cds--side-nav__link:hover {
    background-color: var(--cds-layer-hover);
    color: var(--cds-text-primary);
}

.cds--side-nav__link:hover .cds--side-nav__icon {
    fill: var(--cds-icon-primary);
}

/* Current/active link */
.cds--side-nav__link--current {
    background-color: var(--cds-layer-selected);
    color: var(--cds-text-primary);
    font-weight: 600;
}

.cds--side-nav__link--current::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--dod-blue-primary);
}

.cds--side-nav__link--current .cds--side-nav__icon {
    fill: var(--cds-icon-primary);
}

/* Side navigation icons */
.cds--side-nav__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;
    fill: var(--cds-icon-secondary);
    transition: fill 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
}

/* Side navigation link text */
.cds--side-nav__link-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* Side navigation divider */
.cds--side-nav__divider {
    height: 1px;
    background-color: var(--cds-border-subtle);
    margin: 0.5rem 1rem;
    list-style: none;
}

/* Side navigation submenu */
.cds--side-nav__item {
    list-style: none;
}

.cds--side-nav__submenu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 2rem;
    padding: 0 1rem;
    color: var(--cds-text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    position: relative;
}

.cds--side-nav__submenu:hover {
    background-color: var(--cds-layer-hover);
    color: var(--cds-text-primary);
}

.cds--side-nav__submenu:hover .cds--side-nav__icon {
    fill: var(--cds-icon-primary);
}

.cds--side-nav__submenu-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cds--side-nav__submenu-chevron {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-left: auto;
    fill: var(--cds-icon-secondary);
    transition: transform 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
}

.cds--side-nav__submenu[aria-expanded="true"] .cds--side-nav__submenu-chevron {
    transform: rotate(180deg);
}

/* Submenu container */
.cds--side-nav__menu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: var(--cds-layer-01);
}

.cds--side-nav__menu-item {
    list-style: none;
}

.cds--side-nav__menu .cds--side-nav__link {
    padding-left: 3.5rem; /* Indent submenu items */
    height: 2rem;
}

.cds--side-nav__menu .cds--side-nav__link:hover {
    background-color: var(--cds-layer-hover);
}

.cds--side-nav__menu .cds--side-nav__link--current {
    background-color: var(--cds-layer-selected-hover);
}

/* Content area adjustment when sidebar is present */
.cds--content {
    padding-top: 48px; /* Account for fixed header */
    min-height: calc(100vh - 48px);
    transition: margin-left 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
    overflow-x: hidden;
}

.cds--content--with-sidenav {
    margin-left: 256px; /* Width of sidebar */
    width: calc(100vw - 256px); /* Prevent horizontal overflow */
    max-width: calc(100vw - 256px);
}

/* Ensure content is full width on mobile */
@media (max-width: 1056px) {
    .cds--content {
        width: 100vw;
        max-width: 100vw;
    }

    .cds--content--with-sidenav {
        width: 100vw;
        max-width: 100vw;
    }
}

/* Responsive sidebar - collapse on mobile */
@media (max-width: 1056px) {
    .cds--side-nav {
        transform: translateX(-100%);
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
        z-index: 8500; /* Above content, below header */
    }

    .cds--content--with-sidenav {
        margin-left: 0 !important; /* Force no margin on mobile */
    }

    /* Mobile sidebar open state */
    .cds--side-nav.cds--side-nav--mobile-open {
        transform: translateX(0);
    }
}

/* Dark theme adjustments for sidebar */
body[data-carbon-theme="g100"] .cds--side-nav__link--current::before,
body.dark-theme .cds--side-nav__link--current::before {
    background-color: #0f62fe;
}

/* Ensure proper scrolling for sidebar */
.cds--side-nav::-webkit-scrollbar {
    width: 6px;
}

.cds--side-nav::-webkit-scrollbar-track {
    background: transparent;
}

.cds--side-nav::-webkit-scrollbar-thumb {
    background: var(--cds-border-subtle);
    border-radius: 3px;
}

.cds--side-nav::-webkit-scrollbar-thumb:hover {
    background: var(--cds-border-strong);
}

/* Header dropdown menus */
.cds--overflow-menu-options {
    background: var(--cds-layer) !important;
    border: 1px solid var(--cds-border-subtle) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    z-index: 9999 !important;
    position: absolute !important;
    border-radius: 0 !important;
}

#lang-menu {
    position: fixed !important;
    top: 48px !important;
    right: 64px !important;
    left: auto !important;
    z-index: 9999 !important;
    background: var(--cds-layer) !important;
    border: 1px solid var(--cds-border-subtle) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#user-menu {
    position: fixed !important;
    top: 48px !important;
    right: 16px !important;
    left: auto !important;
    z-index: 9999 !important;
    background: var(--cds-layer) !important;
    border: 1px solid var(--cds-border-subtle) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#lang-menu[style*="display: none"],
#user-menu[style*="display: none"] {
    visibility: hidden !important;
    opacity: 0 !important;
}

#lang-menu[style*="display: block"],
#user-menu[style*="display: block"] {
    visibility: visible !important;
    opacity: 1 !important;
}

.cds--overflow-menu-options__btn {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
}

.cds--overflow-menu-options__btn:hover {
    background-color: var(--cds-layer-hover) !important;
}

/* Compact table styling */
.cds--data-table--compact td {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.cds--data-table--compact th {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* ========================================
   Carbon JavaScript Component Enhancements
   ======================================== */

/* Modal Improvements */
.cds--modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.cds--modal[style*="display: flex"] {
    display: flex !important;
}

.cds--modal-container {
    max-width: 600px;
    width: 100%;
    background: var(--cds-layer);
    border-radius: 0;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.cds--modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--cds-border-subtle);
    position: relative;
}

.cds--modal-header__heading {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 400;
    padding-right: 2rem;
}

.cds--modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.11s;
}

.cds--modal-close:hover {
    background: var(--cds-layer-hover);
}

.cds--modal-close__icon {
    fill: var(--cds-icon-primary);
}

.cds--modal-content {
    padding: 1.5rem;
}

.cds--modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--cds-border-subtle);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.cds--loading {
    width: 88px;
    height: 88px;
    margin: 0 auto;
}

.cds--loading__svg {
    animation: rotate 2s linear infinite;
    height: 100%;
    width: 100%;
}

.cds--loading__stroke {
    fill: none;
    stroke: var(--cds-interactive);
    stroke-width: 4;
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
    stroke-linecap: round;
    animation: loading-stroke 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes loading-stroke {
    0% {
        stroke-dashoffset: 240;
    }
    50% {
        stroke-dashoffset: 60;
    }
    100% {
        stroke-dashoffset: 240;
    }
}

/* Notification Enhancements */
.cds--inline-notification {
    margin-bottom: 1rem;
    position: relative;
    opacity: 1;
}

.cds--inline-notification__details {
    display: flex;
    align-items: flex-start;
    padding: 0.875rem 1rem;
    padding-right: 3rem;
}

.cds--inline-notification__icon {
    flex-shrink: 0;
    margin-right: 0.875rem;
}

.cds--inline-notification__text-wrapper {
    flex: 1;
}

.cds--inline-notification__title {
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    font-size: 0.875rem;
}

.cds--inline-notification__subtitle {
    margin: 0;
    font-size: 0.875rem;
}

.cds--inline-notification__close-button {
    position: absolute;
    top: 0.875rem;
    right: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cds--inline-notification__close-button:hover {
    background: rgba(0, 0, 0, 0.1);
}

.cds--inline-notification__close-icon {
    fill: currentColor;
}

/* Dropdown Enhancements */
.cds--dropdown {
    position: relative;
    width: 100%;
}

.cds--dropdown__wrapper {
    position: relative;
}

.cds--dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cds-layer);
    border: 1px solid var(--cds-border-subtle);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    max-height: 250px;
    overflow-y: auto;
}

/* Overflow Menu Enhancements */
.cds--overflow-menu {
    position: static; /* Changed from relative to allow fixed positioning */
}

.cds--overflow-menu-options {
    display: none; /* Hidden by default, shown via JS */
    position: fixed; /* Changed from absolute to escape overflow clipping */
    background: var(--cds-layer);
    border: 1px solid var(--cds-border-subtle);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    min-width: 160px;
    /* Position will be set by JS based on trigger position */
}

.cds--overflow-menu--open .cds--overflow-menu-options {
    display: block;
}

.cds--overflow-menu-options__option {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: background 0.11s;
    color: var(--cds-text-primary);
    text-decoration: none;
}

.cds--overflow-menu-options__option:hover {
    background: var(--cds-layer-hover);
    color: var(--cds-text-primary);
    text-decoration: none;
}

.cds--overflow-menu__trigger {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cds-icon-primary);
    transition: background 0.11s;
}

.cds--overflow-menu__trigger:hover {
    background: var(--cds-layer-hover);
}

/* Form Validation States */
.cds--text-input[data-invalid],
.cds--text-input--invalid {
    outline: 2px solid var(--cds-support-error);
    outline-offset: -2px;
}

.cds--select-input[data-invalid] {
    outline: 2px solid var(--cds-support-error);
    outline-offset: -2px;
}

/* Accordion Enhancements */
.cds--accordion {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cds--accordion__item {
    border-top: 1px solid var(--cds-border-subtle);
}

.cds--accordion__heading {
    display: flex;
    align-items: center;
    padding: 1rem;
    cursor: pointer;
    background: var(--cds-layer);
    border: none;
    width: 100%;
    text-align: left;
    transition: background 0.11s;
}

.cds--accordion__heading:hover {
    background: var(--cds-layer-hover);
}

.cds--accordion__content {
    padding: 1rem;
    display: none;
}

.cds--accordion__item--active .cds--accordion__content {
    display: block;
}

/* Tabs Enhancements */
.cds--tabs {
    border-bottom: 1px solid var(--cds-border-subtle);
}

.cds--tabs__nav {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cds--tabs__nav-item {
    margin: 0;
}

.cds--tabs__nav-link {
    display: block;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    color: var(--cds-text-secondary);
    transition: all 0.11s;
}

.cds--tabs__nav-link:hover {
    color: var(--cds-text-primary);
}

.cds--tabs__nav-item--selected .cds--tabs__nav-link {
    border-bottom-color: var(--cds-interactive);
    color: var(--cds-text-primary);
}

/* Data Table Enhancements */
.cds--data-table {
    width: 100%;
    border-collapse: collapse;
}

.cds--data-table .cds--table-header-label {
    text-align: inherit;
}

.cds--data-table tbody tr {
    transition: background 0.11s;
}

.cds--data-table tbody tr:hover {
    background: var(--cds-layer-hover);
}

.cds--data-table--selected {
    background: var(--cds-layer-selected) !important;
}

/* Toast Notification Container */
.cds--toast-notification-container {
    position: fixed;
    top: 64px;
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 400px;
}

/* Responsive Modal */
@media (max-width: 672px) {
    .cds--modal {
        padding: 0;
        align-items: flex-start;
    }

    .cds--modal-container {
        max-width: 100%;
        width: 100%;
        max-height: 100vh;
        height: 100vh;
        margin: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .cds--modal-header {
        padding: 1rem;
        flex-shrink: 0;
    }

    .cds--modal-header__heading {
        font-size: 1.125rem;
        padding-right: 2.5rem;
    }

    .cds--modal-close {
        top: 0.75rem;
        right: 0.75rem;
        min-width: 44px;
        min-height: 44px;
    }

    .cds--modal-content {
        padding: 1rem;
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cds--modal-footer {
        padding: 1rem;
        flex-shrink: 0;
        flex-direction: column;
        gap: 0.75rem;
    }

    .cds--modal-footer .cds--btn {
        width: 100%;
        justify-content: center;
    }

    /* Reverse button order on mobile (primary first) */
    .cds--modal-footer {
        flex-direction: column-reverse;
    }
}

/* Dark Theme Adjustments for JS Components */
body[data-carbon-theme="g100"] .cds--modal-container,
body.dark-theme .cds--modal-container {
    background: var(--cds-layer);
    border: 1px solid var(--cds-border-subtle);
}

body[data-carbon-theme="g100"] .cds--dropdown-list,
body.dark-theme .cds--dropdown-list {
    background: var(--cds-layer);
    border-color: var(--cds-border-subtle);
}

body[data-carbon-theme="g100"] .cds--overflow-menu-options,
body.dark-theme .cds--overflow-menu-options {
    background: var(--cds-layer);
    border-color: var(--cds-border-subtle);
}

/* ============================================
   Financial Utilities
   Specialized classes for financial data display
   ============================================ */

/* Financial Values with Monospace Font */
.financial-value {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
}

.financial-value-sm {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    font-size: 0.875rem;
}

/* Allocation Status Colors */
.allocation-over {
    color: var(--cds-support-error);
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
}

.allocation-full {
    color: var(--cds-support-success);
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
}

.allocation-partial {
    color: var(--cds-support-info);
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
}

.allocation-warning {
    color: var(--cds-support-warning);
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
}

/* Rate Indicators */
.rate-indicator {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    color: var(--cds-support-warning);
}

.rate-high {
    color: var(--cds-support-success);
}

.rate-medium {
    color: var(--cds-support-warning);
}

.rate-low {
    color: var(--cds-support-error);
}

/* Compact Table Input Styling */
.table-input-compact {
    width: 90px;
    text-align: right;
    font-weight: 600;
    font-family: 'IBM Plex Mono', monospace;
}

.table-input-compact-sm {
    width: 70px;
    text-align: right;
    font-family: 'IBM Plex Mono', monospace;
}

/* Financial Table Cell Utilities */
.financial-cell {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    text-align: right;
}

.financial-cell-success {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    color: var(--cds-support-success);
}

.financial-cell-info {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    color: var(--cds-support-info);
}

.financial-cell-warning {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    color: var(--cds-support-warning);
}

.financial-cell-error {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    color: var(--cds-support-error);
}

/* ============================================
   Weekly Calendar Component
   Reusable calendar grid for timesheets and contracts
   ============================================ */

/* Main Calendar Container */
.weekly-calendar {
    width: 100%;
    margin-bottom: 2rem;
}

/* Calendar Grid Layout - 3x2 grid (Mon-Wed, Thu-Sat) */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Individual Day Card */
.calendar-day-card {
    background: var(--cds-layer-01);
    border: 1px solid var(--cds-border-subtle);
    border-radius: 4px;
    padding: 1rem;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    overflow: visible;  /* Allow dropdowns to escape the card boundaries */
}

/* Day Header Section */
.day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--cds-border-subtle);
    margin-bottom: 0.75rem;
}

.day-title-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.day-name {
    margin: 0;
    font-weight: 600;
    font-size: 1rem;
    color: var(--cds-text-primary);
}

.day-number {
    font-size: 0.875rem;
    color: var(--cds-text-secondary);
    background: var(--cds-layer-02);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
}

.day-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.day-total {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--cds-support-info);
    font-family: 'IBM Plex Mono', monospace;
}

/* Copy/Paste Button Group */
.copy-paste-btns {
    display: flex;
    gap: 0.25rem;
}

/* Entry Headers (Column Labels) */
.entry-headers {
    display: grid;
    grid-template-columns: 15% 15% 50% 12% 8%;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--cds-border-subtle);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cds-text-secondary);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

/* Entries Container */
.entries-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;  /* Removed gap for vertically adjacent rows */
    overflow: visible;  /* Remove overflow clipping to allow dropdown to escape */
    margin-bottom: 0.75rem;
}

/* Individual Timesheet Entry Row */
.timesheet-entry-row {
    display: grid;
    grid-template-columns: 15% 15% 50% 12% 8%;
    gap: 0.5rem;
    align-items: center;
    padding: 0;  /* Removed all padding for adjacent rows with no gap */
    margin: 0;  /* Ensure no margin between rows */
}

/* Time Inputs */
.timesheet-entry-row input[type="time"],
.timesheet-entry-row .start-time,
.timesheet-entry-row .finish-time {
    height: 32px;
    padding: 0 0.5rem;
    font-size: 0.875rem;
    background: var(--cds-field);
    border: 1px solid var(--cds-border-strong);
    color: var(--cds-text-primary);
    border-radius: 0;
}

.timesheet-entry-row input[type="time"]:focus {
    outline: 2px solid var(--cds-focus);
    outline-offset: -2px;
}

/* Customer/Shift Selection */
.timesheet-entry-row .shift-customer-select,
.timesheet-entry-row .customer-search {
    height: 32px;
    padding: 0 0.5rem;
    font-size: 0.875rem;
    background: var(--cds-field);
    border: 1px solid var(--cds-border-strong);
    color: var(--cds-text-primary);
    border-radius: 0;
    width: 100%;
}

.timesheet-entry-row .shift-customer-select:focus,
.timesheet-entry-row .customer-search:focus {
    outline: 2px solid var(--cds-focus);
    outline-offset: -2px;
}

/* Customer Autocomplete Container */
.customer-autocomplete-container {
    position: relative;
    width: 100%;
}

.customer-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cds-layer);
    border: 1px solid var(--cds-border-subtle);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    max-height: 200px;
    overflow-y: auto;
    z-index: 9999;  /* Increased to appear above all other elements including buttons */
    display: none;
}

.customer-dropdown-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--cds-text-primary);
    border-bottom: 1px solid var(--cds-border-subtle);
}

.customer-dropdown-item:hover {
    background: var(--cds-layer-hover);
}

.customer-dropdown-item:last-child {
    border-bottom: none;
}

/* Duration Badge */
.duration-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    background: var(--cds-support-info);
    color: white;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'IBM Plex Mono', monospace;
    min-width: 3rem;
}

/* Delete Entry Button */
.delete-entry-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    background: transparent;
    border: none;
    color: var(--cds-icon-primary);
    cursor: pointer;
    transition: background 0.11s;
}

.delete-entry-btn:hover {
    background: var(--cds-layer-hover);
    color: var(--cds-support-error);
}

.delete-entry-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Add Entry Button */
.add-entry-btn {
    width: 100%;
    margin-top: auto;
    justify-content: center;
}

/* Responsive Calendar - Stack on mobile */
@media (max-width: 1056px) {
    .calendar-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

@media (max-width: 672px) {
    .calendar-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .entry-headers {
        font-size: 0.625rem;
        padding: 0.25rem 0;
    }

    .timesheet-entry-row {
        grid-template-columns: 18% 18% 42% 14% 8%;
        gap: 0.25rem;
    }

    .timesheet-entry-row input[type="time"],
    .timesheet-entry-row .shift-customer-select,
    .timesheet-entry-row .customer-search {
        font-size: 0.75rem;
        height: 28px;
        padding: 0 0.25rem;
    }

    .duration-badge {
        font-size: 0.625rem;
        padding: 0.125rem 0.25rem;
        min-width: 2.5rem;
    }

    .day-name {
        font-size: 0.875rem;
    }

    .day-total {
        font-size: 0.75rem;
    }

    .calendar-day-card {
        padding: 0.75rem;
        min-height: 250px;
    }
}

/* Dark Mode Calendar Adjustments */
body[data-carbon-theme="g100"] .calendar-day-card,
body.dark-theme .calendar-day-card {
    background: var(--cds-layer-01);
    border-color: var(--cds-border-subtle);
}

body[data-carbon-theme="g100"] .timesheet-entry-row input,
body[data-carbon-theme="g100"] .timesheet-entry-row select,
body.dark-theme .timesheet-entry-row input,
body.dark-theme .timesheet-entry-row select {
    background: var(--cds-field);
    border-color: var(--cds-border-strong);
    color: var(--cds-text-primary);
}

body[data-carbon-theme="g100"] .customer-dropdown,
body.dark-theme .customer-dropdown {
    background: var(--cds-layer);
    border-color: var(--cds-border-subtle);
}

/* ========================================
   Report Calendar Monthly View
   ======================================== */

.report-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.report-calendar-day {
    background: var(--cds-layer);
    border: 1px solid var(--cds-border-subtle);
    border-radius: 4px;
    padding: 0.75rem;
    min-height: 90px;
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.report-calendar-day:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: var(--cds-border-strong);
}

.report-calendar-day.report-day-outside {
    opacity: 0.4;
}

.report-calendar-day.report-day-empty {
    opacity: 0.5;
    cursor: default;
}

.report-calendar-day.report-day-empty:hover {
    box-shadow: none;
    border-color: var(--cds-border-subtle);
}

.report-day-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.375rem;
}

.report-day-name {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--cds-text-secondary);
    text-transform: uppercase;
}

.report-day-number {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--cds-text-primary);
    line-height: 1;
}

.report-day-total {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--cds-support-info-subtle, rgba(0, 67, 206, 0.1));
    color: var(--cds-support-info);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    margin-bottom: 0.25rem;
}

.report-day-emp-count {
    font-size: 0.6875rem;
    color: var(--cds-text-secondary);
}

/* Employee list - always visible */
.report-day-employees {
    border-top: 1px solid var(--cds-border-subtle);
    margin-top: 0.25rem;
    padding-top: 0.375rem;
}

.report-emp-row {
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--cds-border-subtle);
}

.report-emp-row:last-child {
    border-bottom: none;
}

.report-emp-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cds-text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.report-emp-hours {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--cds-support-info);
}

/* Shift details - hidden until toggled */
.report-emp-shifts {
    display: none;
    padding-top: 0.125rem;
}

.report-calendar-day.show-shifts .report-emp-shifts {
    display: block;
}

.report-emp-shift {
    font-size: 0.6875rem;
    color: var(--cds-text-secondary);
    padding-left: 0.5rem;
}

/* Chevron hint for shift toggle */
.report-day-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    color: var(--cds-icon-secondary);
    font-size: 0.625rem;
    transition: transform 0.2s ease;
}

.report-day-chevron .report-shifts-label {
    font-size: 0.625rem;
    color: var(--cds-text-secondary);
    text-transform: uppercase;
}

.report-calendar-day.show-shifts .report-day-chevron svg {
    transform: rotate(180deg);
}

/* Day column headers */
.report-calendar-col-headers {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.75rem;
    margin-bottom: 0.375rem;
}

.report-calendar-col-header {
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--cds-text-secondary);
    text-transform: uppercase;
    padding: 0.375rem 0;
}

/* Responsive */
@media (max-width: 1056px) {
    .report-calendar-grid,
    .report-calendar-col-headers {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 672px) {
    .report-calendar-grid,
    .report-calendar-col-headers {
        grid-template-columns: repeat(2, 1fr);
    }
}