/* assets/style.css */

/* ---------------------------------------------------- */
/* 1. Fix container styles for the DatePicker          */
/* (These specific rules are still necessary)          */
/* ---------------------------------------------------- */

/* Remove the white background from inner containers */
.SingleDatePicker, .SingleDatePickerInput, .DateInput {
    background-color: transparent !important;
}

/* Remove the default border from the date picker's wrapper */
.SingleDatePickerInput__withBorder {
    border: none;
    border-radius: 0;
}

/* ---------------------------------------------------- */
/* 2. Combined Styling for ALL Input Fields            */
/* (This single rule replaces 3 of your old rules)     */
/* ---------------------------------------------------- */

/* Targets standard Bootstrap inputs AND the date picker's input */
.form-control,
.DateInput_input {
    height: 38px;
    background-color: #333333; /* Dark background */
    color: #f1f1f1;            /* Light text color */
    border: 1px solid #555555; /* Subtle border */
    border-radius: 4px;        /* Slightly rounded corners */
    padding: 8px 10px;         /* Internal spacing */
    font-family: sans-serif;   /* Ensures consistent font */
    box-sizing: border-box;    /* Ensures padding doesn't break layout */
}

/* ---------------------------------------------------- */
/* 3. Combined Styling for the :focus state            */
/* ---------------------------------------------------- */

.form-control:focus,
.DateInput_input:focus {
    outline: none; /* Removes the default browser outline */
    border-color: #0d6efd; /* Blue border on focus */
    box-shadow: 0 0 5px rgba(13, 110, 253, 0.5); /* Faint glow effect */
}

/* General container for the tabs */
.custom-tabs {
  /* Aligns tabs to the left as shown in the image, with a bottom border */
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid #444; /* Darker border for the container */
  padding-top: 10px;
}

/* The main container for the dcc.Tabs component */
.custom-tabs {
    /* Sets the line that the tabs sit on top of */
    border-bottom: 1px solid #444 !important;
    height: 42px; /* Helps with vertical alignment */
}

/* Base style for ALL tabs, targeting the default Dash class */
.custom-tabs .Tab {
    /* A dark background that matches your app's theme */
    background-color: #2c2c2c;
    color: grey; /* Standard color for unselected text */

    /* Basic border and layout settings */
    border: 1px solid #444;
    border-bottom: none; /* Remove bottom border to sit on the line */
    border-radius: 5px 5px 0 0;
    margin: 0 3px;
    padding: 8px 18px;

    /* Align text inside the tab */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Nudge the tabs down to sit perfectly on the container's border */
    position: relative;
    top: 1px;
}

/* Style for the hovered-over tab */
.custom-tabs .Tab:hover {
    background-color: #383838;
    cursor: pointer;
}

/* Style ONLY for the SELECTED tab */
.custom-tabs .custom-tab--selected {
    /* Make the selected tab a lighter grey, not white */
    background-color: #444;
    /* Use a brighter text color to show it's selected */
    color: #f1f1f1;
    font-weight: bold;
}