/* ---- BODY AND GLOBAL STYLING ---- */
/* Fix the colors to match the bottom dark blue */
body, html {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #1a2430 !important; /* Dark blue background */
    overflow-x: hidden !important;
}

/* Target any lighter blue sections at the top and make them match */
body > div:first-child,
nav,
header,
.navbar,
.header,
._dash-loading {
    background-color: #1a2430 !important; /* Match the dark blue */
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Force font consistency */
* {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* ---- LOGIN PAGE STYLING ---- */
/* Ensure proper container styling */
.card,
.login-container,
.dash-login-container,
div[class*="login-container"] {
    background-color: rgba(39, 55, 70, 0.9) !important;
    padding: 30px !important;
    border-radius: 4px !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Fix the heading style */
h1, h2, h3,
.login-title,
div[class*="login"] h1,
div[class*="login"] h2 {
    text-align: center !important;
    margin-bottom: 30px !important;
    color: white !important;
}

/* Target the form more specifically */
form,
.login-form,
div[class*="login"] form {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
}

/* Fix form groups */
.form-group {
    margin-bottom: 15px !important;
    width: 100% !important;
}

/* Target input fields - remove the icon but keep the field visible */
input[type="text"],
input[type="password"],
input[type="email"],
.form-control {
    font-size: 16px !important;
    padding: 10px !important;
    width: 100% !important;
    margin-bottom: 10px !important;
    box-sizing: border-box !important;
    border-radius: 4px !important;
    height: 45px !important;
    background-image: none !important; /* Remove any background images */
}

/* Target buttons - fix the shadow/border issue */
button[type="submit"],
.btn-primary,
.login-button {
    font-size: 16px !important;
    padding: 12px 20px !important;
    margin-top: 10px !important;
    width: 100% !important;
    background-color: #375a7f !important;
    border: none !important;
    border-radius: 4px !important;
    height: 45px !important;
    text-align: center !important;
    color: white !important;
    font-weight: normal !important;
    box-shadow: none !important;
    outline: none !important;
    text-shadow: none !important;
}

/* Button hover state - keep it clean */
button[type="submit"]:hover,
.btn-primary:hover,
.login-button:hover {
    background-color: #2a4561 !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ---- DROPDOWN STYLING ---- */
.custom-dropdown .Select-control {
    background-color: #3a4e61 !important;  /* Medium gray background for the filter */
    color: #f0f0f0 !important;  /* Light text color for readability */
    border: none !important;  /* Remove the default border */
    border-radius: 8px;  /* Rounded corners for modern look */
}

.custom-dropdown .Select-placeholder {
    color: #f0f0f0 !important;  /* Same light text color for placeholder */
}

.custom-dropdown .Select-menu-outer {
    background-color: #3a4e61 !important;  /* Same medium gray for dropdown menu */
    color: #f0f0f0 !important;  /* Light text color inside the dropdown */
}

.custom-dropdown .Select-option {
    color: #f0f0f0 !important;  /* Keep text color light inside options */
}

.custom-dropdown .Select-option.is-selected {
    background-color: #f0f0f0 !important;  /* Highlight selected option with light color */
    color: #1B2A38 !important;  /* Text color for selected option */
}

/* ---- TIMELINE VISUALIZATION ENHANCEMENTS ---- */
/* Ensure the graph container doesn't get squeezed */
#employee-timeline {
    min-height: 500px !important;
    height: 100% !important;
}

/* Fix for plot layout being compressed */
.js-plotly-plot .plot-container {
    min-height: 500px !important;
}

/* Improve y-axis text spacing */
.ytick text {
    font-size: 12px !important;
    line-height: 1.5 !important;
}

/* Add more height to each employee row in the visualization */
.yaxislayer-above .ytick {
    margin-bottom: 15px !important;
}

/* Ensure tick marks are properly spaced */
.ytick path {
    stroke-width: 1px !important;
}

/* Improve the container responsiveness */
.dash-graph {
    height: auto !important;
    min-height: 500px !important;
}

/* Make sure the SVG expands properly */
.main-svg {
    height: 100% !important;
}

/* Ensure plotly legends don't compress the main content */
.legend {
    font-size: 12px !important;
    padding: 8px !important;
}

/* Add more space between y-axis labels and the plot area */
.y2tick text, .ytick text {
    margin-right: 10px !important;
}

/* Ensure the y-axis has enough space for labels */
.yaxislayer-above {
    transform: translate(0, 0) !important;
}

/* Make sure the y-axis labels are properly aligned */
.y-axis-title {
    margin-right: 20px !important;
}