/* base-styles.css - Complete version with CSS Variables for Theming */

/* CSS Variables (Custom Properties) - Defined at the top as defaults */
:root {
    --primary-color: #69a2b0;                  /* Primary color from palette */
    --secondary-color: #c4dede;                /* Secondary color from palette */
    --background-color: #f8f9fa;                /* Background color from palette */
    --text-primary-color: #343a40;               /* Primary text color from palette */
    --text-muted-color: #6c757d;                 /* Muted text color from palette */

    /* Semantic variables for UI elements - overridable in themes */
    --body-background: #f8f9fa;                 /* Default body background (light theme) */
    --body-text-color: #343a40;                 /* Default body text color (primary text) */
    
    --message-user-background: #dcf8c6;          /* Default user message bubble (light green) */
    --message-bot-background: #ece5dd;           /* Default bot message bubble (light gray) */
    --message-text-color: #333;                 /* Default message text color (dark gray) */
    --message-timestamp-color: #777;            /* Default timestamp color (muted gray) */
    
    --loading-indicator-color: #007bff;         /* Default loading indicator color (blue) */
    --loading-indicator-background: #f8f9fa;    /* Default loading indicator background */
    
    --group-card-background: #f9f9f9;             /* Default group card background */
    --group-card-border-color: #ddd;              /* Default group card border */
    --group-card-hover-background: #f0f0f0;        /* Default group card hover background */
    --group-card-selected-border-color: #007bff;    /* Highlight border for selected card (blue) */
    --group-card-selected-background: #e8f0fe;      /* Light blue background for selected card */
    --group-card-name-color: #333;                /* Default group card name color */
    --group-card-description-color: #666;           /* Default group card description color */
    --input-border-color: #ccc;                   /* Default input border color */
    
    --button-light-gray-background: #eee;         /* Default light gray button background */
    --button-text-color: #333;                    /* Default button text color */
    --button-hover-background: #ddd;              /* Default button hover background */
    
    --button-primary-background: #69a2b0;         /* Default primary button background (blue) */
    --button-primary-text-color: #fff;           /* Default primary button text color (white) */
    --button-delete-background: #dc3545;          /* Default delete button background (red)*/
    --button-delete-text-color: #fff;             /* Default delete button text color (white) */
    --button-rename-archive-background: #ffc107;   /* Default rename/archive button (yellow) */

    --signin-card-background: #fff;              /* Default sign-in card background */
    --signin-card-shadow-color: rgba(0, 0, 0, 0.1); /* Default sign-in card shadow */
    --signin-card-heading-color: #333;           /* Default sign-in card heading color */
    --signin-card-label-color: #555;             /* Default sign-in card label color */
    --signin-card-input-border-color: #ccc;      /* Default sign-in card input border */

    --pure-menu-disabled-link-color: #999;      /* Color for disabled menu links */


    --user-settings-border-top-color: #ccc;      /* Color for user settings top border */
    --user-settings-heading-color: #333;         /* Color for user settings headings */
    --user-settings-info-text-color: #555;        /* Color for user info text */
    --user-settings-label-color: #444;           /* Color for user settings labels */

    --file-list-border-color: #ccc;             /* Color for the file list border */
    --file-list-item-border-color: #ddd;         /* Color for file list item border */
    --file-list-item-background-color: #fff;      /* File list item background */
    --file-details-text-color: #777;           /* Color for file details text (size, date) */

    --session-list-item-background-color: #fff;   /* Session list item background color */
    --session-list-item-border-color: #c4dede;    /* Session list item border color */
    --session-list-item-text-color: #343a40;      /* Session list item text color */
    --session-list-item-hover-background-color: #f8f9fa; /* Session list item hover background */
    --session-list-item-button-background-color: #f8f9fa; /* Session list item button background */
    --session-list-item-button-text-color: #343a40; /* Session list item button text color */
    --session-list-item-button-border-color: #69a2b0; /* Session list item button border color */
    --session-list-item-delete-button-color: #dc3545; /* Session list item delete button color */


}

/* --- General Styles (from your original style.css) - Using CSS Variables --- */
body {
    font-family: 'Roboto', sans-serif;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.6;
    font-size: 1em;
    margin: 0;
    background-color: var(--body-background);
    color: var(--body-text-color);
}

code {
    font-size:0.85em;
}


/*  --- PureCSS overrides --- */
.pure-menu-item.pure-menu-disabled > .pure-menu-link {
    color: var(--pure-menu-disabled-link-color); /* Using variable */
    cursor: default;
    pointer-events: none;
}

/* Override PureCSS primary button color */
.pure-button-primary {
      background-color: var(--primary-color); /* Use the primary color from our theme */
      color: var(--button-primary-text-color); /* Use a suitable text color (usually white) */
      border-color: var(--primary-color);
    }

    /* Add a hover state for better feedback */
    .pure-button-primary:hover {
       filter: brightness(1.2);
       background-color: var(--primary-color);
       border-color: var(--primary-color);
    }

/* --- General Button Styles (Shared) --- */
.btn { /* Create a general .btn class for shared styles */
    display: inline-flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
    padding: 8px 16px; /* Consistent padding */
    border-radius: 4px; /* Consistent border-radius */
    font-size: 1em; /* Consistent font-size */
    cursor: pointer;
    border: none;  /* Remove default borders */
    text-decoration: none; /* Remove underlines from links that are buttons */
    transition: background-color 0.2s, color 0.2s, border-color 0.2s; /* Smooth transitions */
}

/* --- Icon Styles --- */
.btn .material-symbols-outlined {
    margin-right: 6px; /* Spacing between icon and text */
    font-size: 1.2em; /* Slightly larger icon size (adjust as needed) */
    line-height: 1; /* Ensure icon aligns vertically */
}

/* --- Primary Button Variant --- */
.btn-primary {
    background-color: var(--button-primary-background);
    color: var(--button-primary-text-color);
    border: 1px solid var(--button-primary-background); /* Add border */
}

.btn-primary:hover {
    filter: brightness(1.2); /
    background-color: var(--button-primary-background); /* or a slightly darker shade */
    border-color: var (--button-primary-background);
}

/* --- Secondary Button Variant (Example) --- */
.btn-secondary {
  background-color: var(--button-light-gray-background);
  color: var(--button-text-color);
  border: 1px solid #ccc; /* Example border */
}

.btn-secondary:hover {
    background-color: var(--button-hover-background); /* Use existing hover color */
    border-color: var (--button-hover-background);
}

/* --- Danger/Delete Button Variant --- */
.btn-danger, .delete-button { /* Apply same styling as delete-button*/
    background-color: var(--button-delete-background);
    color: var(--button-delete-text-color);
    border: 1px solid var(--button-delete-background);
}

.btn-danger:hover, .delete-button:hover {
     filter: brightness(1.2); /* Lighter, alternatively dedicated color */
}


/* --- Status Message Area Styling --- */
.status-message-area {
    padding: 10px 15px;
    margin-bottom: 15px;
    border: 1px solid var(--secondary-color); /* Use theme variable */
    border-radius: 4px;
    background-color: var(--secondary-color); /* Light background, adjust per theme */
    color: var(--text-primary-color); /* Use theme variable */
    /* font-style: italic; */ /* Optional styling */
    display: none; /* Hidden by default */
}


/* --- Breadcrumbs Styles --- */
.breadcrumbs-container {
  padding: 8px 1em; /* Consistent padding */
  background-color: var(--secondary-color); /* Use a theme variable */
  color: var(--text-muted-color); /* Use a theme variable */
  font-size: 0.9em; /* Slightly smaller text */
  border-bottom: 1px solid var(--group-card-border-color); /* Use theme variable */
  box-sizing: border-box; /* Include padding in width */
  width: 100%; /* Span full width */
  white-space: nowrap; /* Prevent wrapping */
  overflow: hidden; /* Hide overflow */
  text-overflow: ellipsis; /* Add ellipsis if text is too long */
}

#breadcrumb-group, #breadcrumb-session {
  font-weight: 500; /* Slightly bolder */
  color: var(--text-primary-color); /* Use a theme variable */
}

/* Style the separator using ::before on the session span */
#breadcrumb-session::before {
  content: " > "; /* Add the separator */
  margin: 0 0.5em; /* Add spacing around the separator */
  font-weight: normal; /* Keep separator normal weight */
  color: var(--text-muted-color); /* Use muted color for separator */
}


/*  --- Continue --- */

.message {
    margin: 0.5em 1em;
    padding: 12px 15px;
    border-radius: 15px;
    clear: both;
    font-size: 1.0em;
    display: inline-block;
    max-width: 70%;
    word-wrap: break-word;
    color: var(--message-text-color); /* Using variable */ /* Text color now using variable */
}

.user {
    background-color: var(--message-user-background); /* Using variable - User bubble color */
    float: right;
    text-align: right;
    border-top-right-radius: 0; /* Square off right top corner for user bubble */
}

.bot {
    background-color: var(--message-bot-background); /* Using variable - Bot bubble color */
    float: left;
    text-align: left;
    border-top-left-radius: 0; /* Square off left top corner for bot bubble */
}

.message-timestamp {
    font-size: 0.8em;
    color: var(--message-timestamp-color); /* Using variable - Timestamp color */
    margin-top: 4px;
    text-align: right;
}

.input-error {
    border-color: red !important; /* Or a visually distinct error color */
}

#chat-output {
    overflow-y: auto;
    scroll-behavior: smooth;
}


/* --- Main Content Area Styles - Full Width Now --- */
#main-content-wrapper {
    margin-left: 0;
    transition: none;
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 1em;
    box-sizing: border-box;
    width: 100%;
}

#chat-container {
    margin: 0;
    padding: 0;
}

#chat-output {
    padding: 0.5em;
    overflow-y: auto;
    scroll-behavior: smooth;
}

#user-input {
    border-radius: 10px;
    padding: 10px;
    resize: vertical;
    min-height: 3em;
    max-height: 100em;
    width: calc(100% - 22px);
    box-sizing: border-box;
    border: 1px solid var(--input-border-color); /* Using variable */
    resize: vertical; /* Allow vertical resizing */
}


#file-list {
    padding: 1em;
    margin-bottom: 1em;
    border: 1px solid var(--file-list-border-color); /* Using variable */
}

#file-list-ul {
    padding: 0;
    list-style-type: none;
}

#file-list-ul li {
    margin-bottom: 0.5em;
}


/* --- Attached Files Chip Styles --- */
.attached-files-area {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  display: flex;
  flex-wrap: wrap; /* Allow chips to wrap to the next line */
  gap: 0.4em; /* Spacing between chips */
}

.attached-file-chip {
  display: inline-flex; /* Make chips inline-flex for proper alignment */
  align-items: center; /* Vertically align icon and text in chip */
  background-color: var(--secondary-color); /* Example: Secondary color theme - using CSS variable */
  color: var(--text-primary-color); /* Example: Text color - using CSS variable */
  padding: 0.3em 0.6em;
  border-radius: 15px; /* Rounded corners for chip look */
  font-size: 0.9em;
  white-space: nowrap; /* Prevent text from wrapping within the chip */
  border: 1px solid var(--secondary-color); /* Optional: border, matching background for now */
}

/* NEW: Style for the text portion within the chip */
.chip-text {
    margin-right: 0.4em; /* Space between text and the 'X' button */
}

/* NEW: Style for the 'X' remove button within the chip */
.remove-chip {
    margin-left: 0.4em; /* Spacing from the text content */
    cursor: pointer;
    font-size: 0.9em; /* Slightly smaller than chip text for visual balance */
    font-weight: bold; /* Make the 'X' stand out */
    color: var(--text-muted-color); /* Subtle color for the 'X' by default */
    transition: color 0.2s ease-in-out; /* Smooth color transition on hover */
}

.remove-chip:hover {
    color: var(--button-delete-background); /* Change to a red color on hover, using a theme variable */
}


/* --- User Settings Area Styles --- */

#usersettings-content {
    max-width: max-content;
}

#user-settings-area {
    margin-top: 30px;
    border-top: 1px solid var(--user-settings-border-top-color); /* Using variable */
    padding-top: 20px;
}

#user-settings-area h4, #user-settings-area h5 {
    margin-bottom: 10px;
    color: var(--user-settings-heading-color); /* Using variable */
}

#user-info-settings p {
    margin-bottom: 8px;
    font-size: 0.95em;
    color: var(--user-settings-info-text-color); /* Using variable */
}

#user-preference-settings .setting-item {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#user-preference-settings label {
    margin-right: 15px;
    font-weight: bold;
    color: var(--user-settings-label-color); /* Using variable */
}

#user-preference-settings input[type="checkbox"],
#user-preference-settings select {
    padding: 8px;
    border: 1px solid var(--input-border-color); /* Using variable */
    border-radius: 4px;
    font-size: 1em;
}

#user-preference-settings select {
    width: auto;
    min-width: 150px;
}


/* --- Sign-in Page Specific Styles --- */

.signin-container {
    display: flex;
    justify-content: center;
    padding: 2em;
}

.signin-card {
    background: var(--signin-card-background); /* Using variable */
    padding: 2em;
    border-radius: 8px;
    box-shadow: 0 2px 4px var(--signin-card-shadow-color); /* Using variable */
    width: 90%;
    max-width: 500px;
}

.signin-card h4 {
    text-align: center;
    margin-bottom: 1em;
    color: var(--signin-card-heading-color); /* Using variable */
}

.signin-card label {
    display: block;
    margin-top: 1em;
    margin-bottom: 0.5em;
    color: var(--signin-card-label-color); /* Using variable */
    font-weight: bold;
}

.signin-card input[type="email"],
.signin-card input[type="password"] {
    width: 100%;
    padding: 0.7em;
    margin-bottom: 0.8em;
    border: 1px solid var(--signin-card-input-border-color); /* Using variable */
    border-radius: 4px;
    box-sizing: border-box;
}

.signin-card .button-group {
    margin-top: 1em;
    display: flex;
    justify-content: space-between;
    gap: 0.5em;
}

.signin-card .button-group button {
    flex-grow: 1;
}


/* General Message Container */
.message-container {
    display: flex;
    margin-bottom: 10px;
}

.message-container.user-container {
    justify-content: flex-end;
}

.message-container.bot-container {
    justify-content: flex-start;
}


/* --- Group Card Styles - Using CSS Variables --- */
#group-card-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 15px;
    padding: 15px;
}

.group-card {
    background-color: var(--group-card-background); /* Using variable */
    border: 1px solid var(--group-card-border-color); /* Using variable */
    border-radius: 8px;
    padding: 15px;
    width: 250px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.group-card:hover {
    transform: translateY(-3px);
    box-shadow: 3px 3px 7px rgba(0,0,0,0.1);
    background-color: var(--group-card-hover-background); /* Using variable */
}

.group-card.selected {
    border: 2px solid var(--group-card-selected-border-color); /* Using variable */
    box-shadow: 3px 3px 7px rgba(0,0,0,0.15);
    background-color: var(--group-card-selected-background); /* Using variable */
}

.group-card-name {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.2em;
    color: var(--group-card-name-color); /* Using variable */
}

.group-card-description {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 0.95em;
    color: var(--group-card-description-color); /* Using variable */
    line-height: 1.4;
}


/* - Create Group Form Input Width - No changes needed, not theme-specific */
#create-group-form input[type="text"],
#create-group-form textarea {
    max-width: 600px;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    font-family: inherit;
    display: block;
    margin-bottom: 0.5em;
}

#create-group-form textarea {
    min-height: 3em;
}

#create-group-form label {
    display: block;
    margin-bottom: 0.3em;
    font-weight: bold;
}

#create-group-form {
    margin-right: auto;
    max-width: 600px;
    padding: 1em;
}


/* - Enhanced Group Settings Area - No changes needed, mostly layout */
#group-settings-area {
    max-width: max-content;
    margin-top: 30px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    background-color: #f9f9f9;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.03);
}

#group-settings-area h4 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.4em;
    color: #333;
    border-bottom: 2px solid #eee;
    padding-bottom: 8px;
}

#current-group-info {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 5px;
}

#current-group-info p {
    margin-bottom: 10px;
    font-size: 1em;
    color: #555;
}

#group-settings-placeholders {
    margin-top: 15px;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 5px;
    font-style: italic;
    color: #999;
}

#group-settings-placeholders div {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#group-settings-placeholders label {
    font-weight: normal;
    color: #777;
}

#group-settings-placeholders span {}


/* --- File List Styles - Using CSS Variables for themeable elements --- */
#file-list-ul li {
    margin-bottom: 1em;
    padding: 10px;
    border: 1px solid var(--file-list-item-border-color); /* Using variable */
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--file-list-item-background-color); /* Using variable */
}

.file-info {
    flex-grow: 1;
    margin-right: 15px;
}

.file-name-display {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

.file-details {
    font-size: 0.9em;
    color: var(--file-details-text-color); /* Using variable */
}

/* --- ADDED: File Scope Display Style --- */
.file-scope-display {
    font-size: 0.85em;
    color: var(--text-muted-color);
    font-style: italic;
    margin-left: 5px;
}

.file-actions button {
    margin-left: 5px;
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    background-color: var(--button-light-gray-background); /* Using variable */
    color: var(--button-text-color); /* Using variable */
}

.file-actions button:hover {
    background-color: var(--button-hover-background); /* Using variable */
}

.file-month-header {
    font-size: 1.2em;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--file-list-item-border-color); /* Use a subtle border */
    color: var(--text-primary-color); /* Use primary text color */
    font-weight: bold;
}

.file-type-icon {
    margin-right: 8px; /* Space between icon and file name */
    font-size: 1.2em; /* Adjust size as needed */
    vertical-align: middle; /* Align with text */
    color: var(--text-muted-color); /* Subtle color for icons */
}


/* --- Sessions UI Styles - Using CSS Variables for themeable elements --- */

.session-month-header {
    font-size: 1.2em;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--session-list-item-border-color); /* Use a subtle border */
    color: var(--text-primary-color); /* Use primary text color */
    font-weight: bold;
}

#session-list {
    padding: 0;
    list-style-type: none;
}

/* Styles for Session List Items (Matching File List) */
.session-list-item {
    margin-bottom: 1em;  /* was 0.8em */
    padding: 10px;
    background-color: var(--session-list-item-background-color); /* Using variable */
    border: 1px solid var(--session-list-item-border-color);
    border-radius: 5px;
    display: flex;
    justify-content: space-between; /* Space out info and actions */
    align-items: center; /* Vertically center content */
    transition: background-color 0.2s ease-in-out;
}

.session-list-item:hover {
    background-color: var(--session-list-item-hover-background-color);
}


.session-info {
    flex-grow: 1; /* Allow info to take up available space */
    margin-right: 15px;
}
.session-details {
    font-size: 0.9em; /* Smaller font for details */
    color: var(--session-list-item-text-color); 
    padding-left: 1em;
}

.session-actions button { /* Style buttons within actions */
   margin-left: 5px; 
   padding: 8px 12px;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   font-size: 0.9em;
   background-color: var(--session-list-item-button-background-color); /* Using variables */
   color: var(--session-list-item-button-text-color); 
}

.session-actions button:hover {
   background-color: var(--primary-color); /* Using variable - primary color, from palette */
   color: var(--body-background);
}

.session-list-item a {
    /* Add some space if the icon touches text */
    margin-left: 0px; /* Was: 3 px*/
    display: inline-block;
    color: var(--primary-color); /* Use a themeable color */
    text-decoration: underline;
}

/* Style for delete button within session items (you might already have this)*/
.session-list-item button.delete-button {
  background-color: var(--session-list-item-button-background-color); /* Keep light background */
  color: var(--session-list-item-delete-button-color); /* Using variable - delete button color */
  border-color: var(--session-list-item-delete-button-color); /* Using variable - delete button border */
}

.session-list-item button.delete-button:hover {
    background-color: var(--session-list-item-delete-button-color);
    color: #fff;
}

/* Style for "Reactivate" Icon */
.session-list-item a span.material-symbols-outlined{
    margin-right: 5px; /* Make sure there is space between icon and text, was: 0px */
}

/* Styles for Session Label Editing */
.session-edit-container {
    display: flex;
    align-items: center;
    width: 100%; /* Take full width */
    padding: 5px 0; /* Add some vertical padding */
}

.edit-label-input {
    flex-grow: 1; /* Allow input to take available space */
    padding: 6px 10px;
    border: 1px solid var(--input-border-color); /* Use theme variable */
    border-radius: 4px;
    margin-right: 5px;
    font-size: 0.95em; /* Match session label font size */
}

/* Style for save/cancel buttons in edit mode */
.session-edit-container button {
    padding: 5px 8px; /* Smaller padding */
    margin-left: 3px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: transparent; /* Make buttons less intrusive */
}

.session-edit-container button .material-symbols-outlined {
    font-size: 1.1em; /* Adjust icon size slightly */
    vertical-align: middle; /* Align icon nicely */
}

/* Specific colors on hover */
.save-label-button:hover {
    color: #28a745; /* Green for save */
}

.cancel-label-button:hover {
    color: #dc3545; /* Red for cancel */
}

/* base-styles.css */
.session-color-dot {
    display: inline-block;
    width: 12px; /* Adjust size as needed */
    height: 12px;
    border-radius: 50%;
    margin-right: 8px; /* Space between dot and label */
    vertical-align: middle; /* Align with text */
    border: 1px solid rgba(0, 0, 0, 0.1); /* Subtle border */
}

/* Define classes for each color in your palette */
.color-dot-grey { background-color: #adb5bd; } /* Default/null */
.color-dot-red { background-color: #e74c3c; }
.color-dot-blue { background-color: #3498db; }
.color-dot-green { background-color: #2ecc71; }
.color-dot-yellow { background-color: #f1c40f; }
.color-dot-purple { background-color: #9b59b6; }
.color-dot-orange { background-color: #e67e22; }
.color-dot-pink { background-color: #ff7eb9; } /* Example Pink */
.color-dot-teal { background-color: #4db6ac; } /* Example Teal */
.color-dot-lime { background-color: #cddc39; } /* Example Lime */

/* base-styles.css */
.color-selector {
    display: inline-flex; /* Align dots horizontally */
    gap: 5px; /* Space between color dots */
    margin: 0 10px; /* Space around the selector */
    vertical-align: middle;
}

.color-selector .session-color-dot {
    width: 18px; /* Slightly larger for clicking */
    height: 18px;
    cursor: pointer;
    transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
    border: 2px solid transparent; /* Add space for selected border */
}

.color-selector .session-color-dot:hover {
    transform: scale(1.1);
}

.color-selector .session-color-dot.selected {
    border-color: var(--body-text-color); /* Use text color for selected border */
    box-shadow: 0 0 3px 1px var(--body-text-color); /* Add a glow */
}

/* Adjust input width if needed */
.session-edit-container .edit-label-input {
    /* flex-grow: 0.8; Maybe reduce input growth slightly */
}

/* --- Basic Modal Styles --- */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    
    justify-content: center; /* Center content horizontally */
    align-items: center;     /* Center content vertically */
    
    
    display: none; /* Hidden by default - flex to enable centering when visible */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size and content */
    max-width: 600px; /* Example max width */
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    position: relative; /* To position close button */
}

.close-button {
    color: #aaa;
    position: absolute;
    right: 12px;
    top: 8px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#file-selector-list {
    list-style-type: none;
    padding: 0;
    margin-bottom: 15px;
    max-height: 300px; /* Example max height for scrollable list */
    overflow-y: auto; /* Enable vertical scrolling */
}

#file-selector-list li {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    display: flex; /* Make list items flex containers */
    align-items: center; /* Vertically align checkbox and text */
}

#file-selector-list li:last-child {
    border-bottom: none; /* Remove border from last item */
}

#file-selector-list li:hover {
    background-color: #f0f0f0;
}

#file-selector-list li input[type="checkbox"] {
    margin-right: 8px;
}


/* Ensure loading indicator is centered in modal if needed - you might need to adjust loading indicator styles */

/* base-styles.css - Add styles for the loading overlay and spinner */

#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* Stack spinner and text vertically */
  z-index: 1000; /* Ensure it's on top of everything */
}

.loading-spinner {
  border: 4px solid #f3f3f3; /* Light grey */
  border-top: 4px solid var(--primary-color); /* Blue - or your primary color */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-bottom: 10px; /* Space between spinner and text */
}

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

#loading-overlay p {
    color: var(--primary-color);
    font-weight: bold;
    margin-top: 0.5em;
}


/* Footer */
.footer {
    text-align: center;
    margin-top: 10em;
}


/* --- Media Queries for Responsive Layout - Simplified --- */
@media screen and (max-width: 48em) {
    
    body {
        line-height: 1;
        font-size: 0.9em;
    }
}