/* === IMPORTS & ROOT VARIABLES === */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');

:root {
  --primary-font: "Open Sans", sans-serif;
  --primary-color: #0082ff;
  --primary-hover-color: #005bb5;
  --text-color-dark: #333;
  --text-color-medium: #666;
  --text-color-light: #fff;
  --background-light: #f9f9f9;
  --background-white: #ffffff;
  --background-grey-light: #EBEBEB;
  --background-grey-medium: #e0e0e0;
  --border-color: #d3d3d3;
  --error-color: #721c24;
  --error-background: #f8d7da;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
}

/* === GENERAL BODY & HTML STYLING === */
body {
  font-family: var(--primary-font);
  font-size: 12px; /* Base font size */
  font-weight: 400;
  margin: 0;
  padding: 0;
  display: flex; /* For navbar and main content layout */
  background-color: var(--background-grey-light);
  color: var(--text-color-dark);
  line-height: 1.5; /* Improved readability */
}

/* === UTILITY CLASSES === */
.hidden {
  display: none !important; /* Utility to hide elements, JS will toggle */
}

.text-center {
  text-align: center;
}

.loading-spinner {
  display: none; /* Hidden by default */
  margin: 10px 0;
  font-size: 13px; /* from account.html */
  color: var(--text-color-dark);
  font-style: italic;
}

.loading-spinner.active {
  display: block;
}

/* === NAVIGATION BAR === */
.navbar {
  width: 200px;
  height: 100vh;
  background-color: var(--background-white);
  padding: 20px; /* Consistent padding */
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right: 1px solid var(--border-color);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  box-sizing: border-box;
}

.navbar img.logo {
  width: 100%;
  max-width: 140px;
  height: auto;
  margin-bottom: 20px;
  margin-top: 15px;
  display: block;
  object-fit: contain;
}

/* Toolbar within Navbar */
.toolbar {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

.toolbar a {
  text-decoration: none;
  padding: 5px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.toolbar img { /* Icons in toolbar */
  height: 20px;
  width: auto;
  display: block;
}

.toolbar a:hover img {
  opacity: 0.8;
}

/* Login Container within Navbar */
.login-container {
  margin-top: 15px; /* Can be auto if we want it at the bottom: margin-top: auto; */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.login-container a img { /* Login/Logout icons */
  height: 20px;
  width: auto;
  display: block;
}

.login-container a:hover img {
  opacity: 0.8;
}

#user-email {
  color: var(--text-color-dark);
  font-size: 13px; /* from account.html */
  text-align: center;
  display: none; /* JS will control visibility */
  word-break: break-all; /* Ensure long emails don't break layout */
}

/* Legacy login styling - check if still needed */
.toolbar a.login img {
  height: 30px;
}


/* === PAGE CONTAINERS === */
.page-container { /* Generic container for dashboard, files, search results etc. */
  width: 100%;
  max-width: 1000px; /* Default max-width */
  margin: 20px auto 0;
  padding: 20px 30px;
  background-color: var(--background-white);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-color);
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.page-container h2 {
  font-size: 22px;
  margin: 0 0 20px 0; /* Adjusted margin */
  color: var(--text-color-dark);
  font-weight: 300;
}

/* Specific container adjustments if needed */
.dashboard-container {
  /* Inherits from .page-container, specific overrides can go here */
  /* max-width: 100%; from dashboard.html inline style - if truly needed */
  overflow-x: auto; /* Retained from dashboard.html inline style */
}

.files-container {
  min-width: 600px; /* from styles.css */
  min-height: 80px; /* from styles.css */
}

.account-container {
  padding: 15px 15px 15px 30px; /* from account.html inline style */
}

.upload-container {
  text-align: center;
  margin-top: 30px; /* Adjusted from 50px */
  /* No border/bg needed if it's just a wrapper for drop-zone */
}

.upload-container h2 {
  margin-bottom: 20px;
}

/* Search Results Container (index.html) */
.search-results-container {
  /* Inherits from .page-container */
}
.search-results-container:not(.active) { /* When no results */
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0 auto;
}

/* === SEARCH SECTION (index.html) === */
.search-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 480px;
  height: 80px;
  margin: 20px auto;
  max-width: 100%;
}

.search-background { /* The image for the search bar */
  width: 480px;
  height: 80px;
  max-width: 100%;
  object-fit: contain;
}

#searchQuery {
  position: absolute;
  width: 80%;
  height: 48px;
  top: 50%;
  left: 50%; /* Centered with transform */
  transform: translate(-50%, -50%); /* Adjusted for true centering */
  border: none;
  background: transparent;
  font-size: 15px;
  padding: 0 20px;
  outline: none;
  color: var(--text-color-dark);
  z-index: 2;
}

#searchQuery:focus,
#searchQuery:hover {
  outline: none;
  box-shadow: none;
  background: transparent !important; /* Important to override browser defaults */
}

#searchQuery:-webkit-autofill,
#searchQuery:-webkit-autofill:hover,
#searchQuery:-webkit-autofill:focus,
#searchQuery:-webkit-autofill:active {
  background-color: transparent !important;
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  color: var(--text-color-dark) !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

#searchQuery::placeholder {
  color: var(--text-color-medium);
  font-family: var(--primary-font);
}

/* Message within search results area (e.g., "Please log in") */
#searchResults p.search-message {
  text-align: center;
  margin: 20px 0;
  font-size: 15px;
  color: var(--text-color-dark);
}

/* === TABLES (Generic and Specific) === */
/* Base Table Styling */
.app-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  table-layout: fixed;
  font-size: 12px; /* Default table font size */
}

.app-table th,
.app-table td {
  padding: 8px 12px; /* Consistent padding, can be overridden */
  text-align: left;
  vertical-align: middle;
  border-bottom: none; /* Simple bottom border for rows, specific tables might add more */
}

.app-table th {
  background-color: var(--background-grey-medium);
  font-weight: 600;
  color: var(--text-color-dark);
  line-height: 1.5; /* from search results */
}

.app-table tbody tr:nth-child(even) {
  background-color: var(--background-grey-light);
}

.app-table tbody tr:nth-child(odd) {
  background-color: var(--background-white);
}

.app-table tbody tr:hover {
  background-color: #e9f5ff; /* A slightly different hover color */
}

.app-table .contract-id-cell .contract-id, /* Generic link style in tables */
.app-table a {
  color: var(--primary-color);
  text-decoration: none;
}

.app-table .contract-id-cell .contract-id:hover,
.app-table a:hover {
  color: var(--primary-hover-color);
  text-decoration: underline;
}

.app-table .pdf-icon { /* Generic PDF icon style */
  height: 16px;
  width: auto;
  vertical-align: middle;
  display: block; /* For centering if in a flex container */
  margin: 0 auto; /* For centering if in a block container */
}

.app-table .pdf-link-cell, /* For cells containing just a PDF link */
.app-table .calendar-link-cell,
.app-table .expand-link-cell {
  width: 60px; /* Default width for icon cells */
  min-width: 60px;
  text-align: center;
  padding: 0; /* Remove padding if cell only contains centered icon */
}

.app-table .pdf-link-cell a,
.app-table .calendar-link-cell a,
.app-table .expand-link-cell a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%; /* Ensure link fills cell for easier clicking */
  padding: 10px 0; /* Add back some padding for touch targets */
}


/* Search Results Table (derived from #searchResults structure) */
#searchResults { /* This is the container, not the table itself */
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

.search-result-table { /* Assuming you'll wrap results in a table with this class */
  /* Inherits .app-table styles */
}
.search-result-item { /* Represents a row or a group of rows for one result */
  /* Styles for .search-result.odd/even are handled by .app-table tr striping */
}
.result-header-row th { /* Specific to search results header */
  /* .app-table th styles apply */
}
/* Column widths for search results table */
.search-result-table .col-contract-id { width: 20%; min-width: 100px; }
.search-result-table .col-expand-link { width: 50px; min-width: 50px; text-align: center; }
.search-result-table .col-upload-date { width: 10%; min-width: 80px; text-align: center; }
.search-result-table .col-matched-text { width: calc(70% - 50px); min-width: 150px; }

.search-result-table .result-item-top td { /* Top part of a search result item */
  /* .app-table td styles apply */
  /* Hover handled by .app-table tbody tr:hover */
}
.search-result-table .contract-id-container .contract-id { /* Link for contract ID */
  font-weight: 600;
  /* Link color/hover from .app-table a */
}
.search-result-summary-row td { /* Summary part of a search result item */
  padding: 8px 12px; /* Specific padding from original */
  color: var(--text-color-dark);
  line-height: 1.5;
  word-wrap: break-word; /* Keep */
  word-break: break-all; /* Keep */
  white-space: normal; /* Keep */
  font-size: 12px; /* Keep */
  border-bottom: none; /* If it's the last part of an item */
}
.search-result-table .col-contract-id,
.search-result-table .col-upload-date,
.search-result-table .col-matched-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all; /* For very long unbreakable strings */
}
table.app-table.search-result-table > tbody > tr.result-group-even {
    background-color: var(--background-white); /* For items at index 0, 2, 4... */
}
table.app-table.search-result-table > tbody > tr.result-group-odd {
    background-color: var(--background-grey-light); /* For items at index 1, 3, 5... */
}

/* Ensure TDs within these group-striped TRs have transparent backgrounds
    so the TR's background color is visible. Also, retain cell bottom borders. */
table.app-table.search-result-table > tbody > tr.result-group-even > td,
table.app-table.search-result-table > tbody > tr.result-group-odd > td {
    background-color: transparent; /* Important: lets the TR background show */
    /* border-bottom is already handled by the general .app-table td rule,
        but if it was being overridden, you might need to re-specify:
        border-bottom: none;
    */
}
/* In styles.css, ideally after the .app-table td rule or within .search-result-table specifics */

table.app-table.search-result-table > tbody > tr > td {
    border-bottom: none; /* Remove bottom border for all cells in this specific table */
}

/* Events Table (dashboard.html) */
.events-table {
  /* Inherits .app-table styles */
}
/* Column widths from dashboard.html inline styles & styles.css */
.events-table th:nth-child(1), .events-table td:nth-child(1) { width: 20%; } /* File Name */
.events-table th:nth-child(2), .events-table td:nth-child(2) { width: 50px; text-align: center; } /* Expand */
.events-table th:nth-child(3), .events-table td:nth-child(3) { width: 50px; text-align: center; } /* Calendar */
.events-table th:nth-child(4), .events-table td:nth-child(4) { width: 10%; text-align: center; } /* Event Date */
.events-table th:nth-child(5), .events-table td:nth-child(5) { width: 70%-100px; } /* Description */

.events-table .contract-id-cell { /* File Name column */
  max-width: 200px; /* from dashboard.html */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.events-table .description { /* Description column */
  max-width: 300px; /* from dashboard.html */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.events-table .description:hover { /* from dashboard.html */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.events-table .pdf-link, /* Expand cell */
.events-table .calendar-link-cell { /* Calendar cell */
  /* Uses .app-table .pdf-link-cell styles for centering content */
  /* Padding was 0 in styles.css, but .app-table .pdf-link-cell a adds it back */
}
.events-table .calendar-icon { /* Icon specific to calendar */
  height: 16px;
  width: auto;
  display: block; /* from styles.css */
  margin: 0 auto;
}


/* Files Table (files.html) */
.files-table {
  /* Inherits .app-table styles */
  min-height: 100px; /* from styles.css */
}
.files-table th {
  cursor: pointer; /* For sortable headers */
  padding: 8px 16px !important; /* Specific padding from styles.css, using !important as it was there */
}
.files-table th:hover {
  background-color: #d5d5d5; /* from styles.css */
}
.files-table td {
  padding: 10px 16px !important; /* Specific padding from styles.css, using !important as it was there */
  min-height: 48px; /* from styles.css */
}
/* Column widths for files.html */
.files-table th:nth-child(1), .files-table td:nth-child(1) { width: 20%; } /* File Name */
.files-table th:nth-child(2), .files-table td:nth-child(2) { width: 50px; text-align: center; } /* Expand */
.files-table th:nth-child(3), .files-table td:nth-child(3) { width: 10%; text-align: center; } /* Upload Date */
.files-table th:nth-child(4), .files-table td:nth-child(4) { width: calc(70% - 50px); } /* Summary */

/* --- NEW RULE FOR FILE NAME CELL --- */
.files-table .file-name-cell {
    max-width: 300px; /* Adjust this width to fit your layout */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* --- END NEW RULE --- */

.files-table .summary { /* Summary column */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 3em; /* 2 lines * 1.5 line-height */
  line-height: 1.5;
}
/* Sort icons for files.html */
.files-table th.sortable .sort-icon-display::after { /* Placeholder for sort icon */
  content: ' \2195'; /* Unicode up-down arrow */
  margin-left: 5px;
  font-size: 12px;
}
.files-table th.sortable.sort-asc .sort-icon-display::after {
  content: ' \2191'; /* Unicode up arrow */
}
.files-table th.sortable.sort-desc .sort-icon-display::after {
  content: ' \2193'; /* Unicode down arrow */
}


/* Invoices Table & Users Table (account.html) */
.invoices-table, .users-table {
  /* Inherits .app-table styles */
  font-size: 13px; /* from account.html */
  border: 1px solid #ddd; /* from account.html, adds border to table itself */
}
.invoices-table th, .invoices-table td,
.users-table th, .users-table td {
  border: 1px solid #ddd; /* from account.html, adds internal cell borders */
  padding: 8px 12px; /* from account.html */
}
.invoices-table th, .users-table th {
  background-color: #f4f4f4; /* from account.html, overrides .app-table th */
  font-weight: 600; /* from account.html */
}
.users-table button.delete-user-btn { /* Specific button style in users table */
  background: var(--error-color); /* More like #dc3545 from account.html */
  padding: 6px 12px; /* Adjust padding for smaller buttons in tables */
  font-size: 12px;
}
.users-table button.delete-user-btn:hover {
  background: #c82333; /* Darker red */
}

/* Associated Files Table (Modal) */
/* Attempting to remove !important by increasing specificity via tab context */
.modal-content #documents-tab .associated-files-table {
  margin: 15px 0 10px 0;
}
/* Define column widths for the 4-column layout */
.modal-content #documents-tab .associated-files-table th:nth-child(1),
.modal-content #documents-tab .associated-files-table td:nth-child(1) { /* File Name */
  width: 50%;
  min-width: 180px;
}
.modal-content #documents-tab .associated-files-table th:nth-child(2),
.modal-content #documents-tab .associated-files-table td:nth-child(2) { /* Upload Date */
  width: 20%;
  text-align: center;
}
.modal-content #documents-tab .associated-files-table th:nth-child(3),
.modal-content #documents-tab .associated-files-table td:nth-child(3) { /* File Type */
  width: 20%;
  text-align: center;
}
.modal-content #documents-tab .associated-files-table th:nth-child(4),
.modal-content #documents-tab .associated-files-table td:nth-child(4) { /* Delete */
  width: 10%;
  text-align: center;
}

/* Constrain the width of the contract details modal */
div[id^="contract-details-modal-"] > .modal-content {
    max-width: 950px; /* You mentioned 900px, adjust as needed. 950px is a common large modal size. */
    width: 100%;     /* Ensures it's responsive within the max-width and doesn't overflow small screens */
    /* If you want it to be exactly 900px and not shrink on smaller screens (less responsive): */
    /* width: 900px; */
    /* max-width: 900px; */

    /* You can also adjust margins if needed, for example, to ensure it's centered if using fixed width */
    margin-left: auto;
    margin-right: auto;
}

/*
 ==================================================================
 START OF CORRECTED CSS BLOCK
 ==================================================================
*/

/* Specific column widths and styles for Associated Documents tab */
.modal-content #documents-tab .associated-files-table th:nth-child(1),
.modal-content #documents-tab .associated-files-table td:nth-child(1) { /* File Name */
  width: 50%;
  min-width: 180px;
}
.modal-content #documents-tab .associated-files-table th:nth-child(2),
.modal-content #documents-tab .associated-files-table td:nth-child(2) { /* Upload Date */
  width: 20%;
  text-align: center;
}
.modal-content #documents-tab .associated-files-table th:nth-child(3),
.modal-content #documents-tab .associated-files-table td:nth-child(3) { /* File Type */
  width: 20%;
  text-align: center;
}
.modal-content #documents-tab .associated-files-table th:nth-child(4),
.modal-content #documents-tab .associated-files-table td:nth-child(4) { /* Delete */
  width: 10%;
  text-align: center;
}

/*
  THE FOLLOWING RULE WAS HIDING THE DELETE COLUMN AND HAS BEEN REMOVED.

  .modal-content #documents-tab .associated-files-table th:nth-child(n+4),
  .modal-content #documents-tab .associated-files-table td:nth-child(n+4) {
    display: none;
  }
*/

/*
 ==================================================================
 END OF CORRECTED CSS BLOCK
 ==================================================================
*/


/* Specific column widths and styles for Same Party Transactions tab */
.modal-content #same-party-tab .app-table th:nth-child(1),
.modal-content #same-party-tab .app-table td:nth-child(1) { /* File Name */
  width: 25%;
  min-width: 180px;
}
.modal-content #same-party-tab .app-table th:nth-child(2),
.modal-content #same-party-tab .app-table td:nth-child(2) { /* Expand Icon */
  width: 10%;
  text-align: center;
}
.modal-content #same-party-tab .app-table th:nth-child(3),
.modal-content #same-party-tab .app-table td:nth-child(3) { /* Date */
  width: 15%;
  text-align: center;
}
.modal-content #same-party-tab .app-table th:nth-child(4),
.modal-content #same-party-tab .app-table td:nth-child(4) { /* Summary */
  width: 50%;
}

/* Allow summary text to wrap instead of being hidden by ellipsis */
.modal-content #same-party-tab .app-table td[data-label="Summary"],
.modal-content #same-party-tab .app-table td[data-label="Summary"].summary-cell {
    white-space: normal;
    word-wrap: break-word;
    display: table-cell; /* Override -webkit-box from other rules */
    max-height: none;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
}

/* =================================================================== */
/* STYLES FOR ADD/EDIT SIGNIFICANT EVENTS FORM IN CONTRACT MODAL       */
/* =================================================================== */

/* Container for the form elements (date, description, button) */
.add-event-form {
    display: flex;
    gap: 10px; /* Space between form elements */
    align-items: stretch; /* Make all items the same height */
    margin-top: 15px;
    margin-bottom: 20px;
}

/* Styling for the new date and description input fields */
.add-event-form input[type="text"],
.add-event-form input[type="date"] {
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 12px;
    font-family: var(--primary-font);
    box-sizing: border-box;
    background-color: var(--background-white);
    color: var(--text-color-dark);
    height: auto; /* Allow stretching */
}

.add-event-form input[type="text"]:focus,
.add-event-form input[type="date"]:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* More specific selector to ensure it overrides other styles */
div[id^="contract-details-modal-"] .add-event-form .event-description-input {
    flex-grow: 1;      /* This makes the description field fill available space */
    min-width: 100px;  /* Prevent it from becoming too small */
    max-width: none;   /* This is key to override any fixed max-width from other rules */
}

/* Ensure the Add Event button aligns perfectly with the inputs */
.add-event-form #add-event-btn {
    margin: 0; /* Override default button margins */
    flex-shrink: 0; /* Prevent the button from shrinking */
    line-height: 1.4; /* Helps vertically align text in button */
}


/* =================================================================== */
/* STYLES FOR SIGNIFICANT EVENTS TABLE IN CONTRACT MODAL (REVISED)     */
/* =================================================================== */

.modal-events-table {
    table-layout: fixed;
    width: 100%;
}

/* Adjust column widths for the 4-column layout */
.modal-events-table th:nth-child(1), .modal-events-table td:nth-child(1) { width: 50px; } /* Event Date */
.modal-events-table th:nth-child(2), .modal-events-table td:nth-child(2) { width: 100%-110px; } /* Description */
.modal-events-table th:nth-child(3), .modal-events-table td:nth-child(3) { width: 10px; text-align: center; } /* Add to Cal */
.modal-events-table th:nth-child(4), .modal-events-table td:nth-child(4) { width: 50px; text-align: center; } /* Delete */

/* Ensure text in description cell can wrap */
.modal-events-table td[data-label="Description"] {
    white-space: normal;
    word-wrap: break-word;
}

/* Cell style for the new delete icon column */
.delete-link-cell {
    text-align: center;
    padding: 0;
}

.delete-link-cell a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 10px 0; /* Makes the link easier to click */
}

/* A general class for icons in modal tables for consistent sizing */
.action-icon {
    height: 16px;
    width: 16px;
    display: block;
    margin: 0 auto;
}
/* --- Specific Styles for the Session Expired Modal's content --- */

#session-expired-modal {
    z-index: 10100;
}
.session-expired-modal-content {
    max-width: 360px; /* Narrower width, adjust as needed (e.g., "half as wide") */
    padding: 30px 25px 35px 25px; /* Top L/R Bottom */
    text-align: center;
 z-index: 10050;
}

.session-expired-modal-content .modal-logo {
    display: block;
    max-width: 125px; /* Adjust as needed */
    height: auto;
    margin: 0 auto 20px auto; /* Centered, with space below */
}

/* If you add "FilePortal.ai" as separate text */
.session-expired-modal-content .modal-title-text {
    font-size: 1.4em;
    font-weight: 600;
    color: var(--text-color-dark, #333);
    margin-bottom: 10px; /* Space after title if logo and title are separate */
}

.session-expired-modal-content .modal-message-text {
    font-size: 1em; /* Or 1.1em for slightly larger text */
    color: var(--text-color-medium, #555);
    margin-bottom: 30px; /* Space before the button */
    line-height: 1.6;
}

.session-expired-modal-content .modal-message-text a { /* Styling for the inline login link */
    color: var(--primary-color, #007bff);
    font-weight: 600;
    text-decoration: none;
}
.session-expired-modal-content .modal-message-text a:hover {
    text-decoration: underline;
}

.session-expired-modal-content .modal-actions {
    /* Container for button if needed for layout */
}

.session-expired-modal-content #session-expired-modal-login-btn {
    padding: 12px 30px; /* Make button a bit larger */
    font-size: 1em;
    font-weight: 600;
    /* It should inherit styles from your .account-button or general button styles */
}

/* Make the app notification modal's background transparent */
#app-notification-modal.modal { /* Targets the div with id="app-notification-modal" and class="modal" */
    background: transparent;
}

/* Specific styles for the notification modal's content box */
.notification-modal-content {
    background-color: var(--background-white, #fff);
    padding: 25px 30px; /* Generous padding */
    border-radius: var(--border-radius-md, 8px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    width: auto;
    min-width: 300px; /* Minimum width */
    max-width: 450px; /* Max width, adjust as needed */
    text-align: center; /* Center content */
    position: relative; /* For any absolutely positioned children if added later */
    z-index: 10001; /* Above overlay */
}

.notification-modal-content .notification-message {
    font-size: 1.1em; /* Clear message font size */
    color: var(--text-color-dark, #333);
    margin-top: 0; /* Remove default top margin from p if any */
    margin-bottom: 25px; /* Space before the button */
    line-height: 1.6;
    white-space: pre-wrap; /* Allows line breaks in the message if you use \n */
}

.notification-modal-content .notification-actions {
    /* Styles for the button container if needed */
}

/* Ensure the OK button uses your app's button styling */
.notification-modal-content #app-notification-ok-btn {
    /* It uses 'account-button' which you should have styled from account.html. */
    /* If not, apply your general button styles here or use a common button class. */
    padding: 10px 30px;
    font-size: 1em;
}

/* Generic contract-id-cell styles for files-table and events-table */
.contract-id-cell { /* This class was defined but not clearly applied to a specific element type (td/th) */
  /* Applied to td by default */
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0; /* This is unusual, usually a min-width or width is set */
}
.contract-id-cell .contract-id { /* The link itself */
  /* .app-table a styles apply for color/hover */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block; /* Or block if it should take full cell width */
  width: 100%;
  box-sizing: border-box;
}


/* === MODALS === */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none; /* Hidden by default, JS uses 'flex' or 'block' to show */
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Ensure modal is on top */
  overflow: auto; /* For modals that might be taller than viewport */
}
.modal.active { /* Class to show modal */
    display: flex;
}

.modal-content {
    background: var(--background-white);
    padding: 20px;
    margin-top: 20px;
    border-radius: var(--border-radius-md);
    max-width: 90%;
    width: auto;
    max-height: 80vh;
    overflow-y: auto;
    position: relative; /* This is important for the .close-modal positioning */
    border: 1px solid var(--border-color);
    font-size: 12px;
    box-sizing: border-box;
    z-index: 10001;
}

.modal-header {
    display: flex;
    flex-direction: row; /* Items in a row: filename, then icon */
    align-items: center; /* Vertically align items if their heights differ */
    gap: 10px;           /* This creates the "reasonable amount of padding" between filename and icon */
    width: 100%;
    margin-bottom: 15px; /* Space below the header */
    /* justify-content: flex-start; is the default and what we want */
}

.modal-header h2 { /* This is the File Name */
    margin: 0; /* Remove default margins */
    font-size: 16px;
    color: var(--text-color-dark);
    font-weight: 600;
    /* REMOVE flex-grow: 1; (or set to 0 if it was inherited somehow) */
    flex-grow: 0; /* Ensure it only takes space needed for its content */
    flex-shrink: 1; /* Allow filename to shrink if needed, though nowrap/ellipsis handles overflow */
    
    /* For very long filenames, ensure truncation */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0; /* Important for flex items that need to truncate */
}

.modal-header a { /* This is the link wrapping the PDF icon */
    flex-shrink: 0; /* Prevent the icon link from shrinking */
    line-height: 1; /* Improves alignment for inline-flex content like an image */
    display: inline-flex; /* Helps in vertically aligning the icon if needed */
    align-items: center;
}

.modal-header .pdf-icon { /* The actual PDF SVG icon */
    height: 18px; /* You can adjust this size */
    width: auto;  /* Maintain aspect ratio */
    /* vertical-align: middle; */ /* Might not be needed if parent 'a' is inline-flex with align-items */
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 24px;
    font-weight: bold;
    color: var(--text-color-medium);
    cursor: pointer;
    line-height: 1;
}
.close-modal:hover {
    color: var(--text-color-dark);
}

/* === CUSTOM CONFIRMATION MODAL STYLES (NEW) === */

#custom-confirm-modal.modal {
    background: transparent;
}
.confirm-modal-content {
    background-color: var(--background-white, #fff);
    padding: 30px 35px; /* More padding for confirm */
    border-radius: var(--border-radius-md, 8px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    width: auto;
    min-width: 320px; 
    max-width: 480px; 
    text-align: center; 
    position: relative; 
    z-index: 10002; /* Higher than general modal overlay, if needed */
}

.confirm-modal-content .confirm-message {
    font-size: 1.15em; /* Slightly larger message font */
    color: var(--text-color-dark, #333);
    margin-top: 0; 
    margin-bottom: 30px; /* More space before buttons */
    line-height: 1.6;
    white-space: pre-wrap; 
}

.confirm-modal-content .confirm-actions {
    display: flex;
    justify-content: center; 
    gap: 15px; 
}

/* Assuming .account-button is your primary button style */
/* Define .account-button-secondary if not already defined, or adjust as needed */
.account-button-secondary {
    /* Reusing general button styles for base, then overriding */
    padding: 8px 16px;
    background-color: #6c757d; /* Bootstrap secondary grey, or your theme's grey */
    color: var(--text-color-light);
    border: 1px solid #6c757d;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: 13px;
    font-family: var(--primary-font);
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: background-color 0.2s, border-color 0.2s;
    margin: 0; /* Reset margin if general buttons have it */
}
.account-button-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}
/* Make sure it does not conflict with general button margin */
.confirm-actions .account-button,
.confirm-actions .account-button-secondary {
    margin-top: 0;
    margin-right: 0; /* Use gap for spacing */
}


/* === CALENDAR ADD MODAL (New Styles) === */
.calendar-add-modal .modal-content {
    max-width: 550px; /* Adjust as needed */
    padding: 25px 30px; /* Slightly more padding */
    text-align: left; /* Align text to left by default */
}

.calendar-add-modal .modal-header h2 {
    font-size: 20px; /* Match other modal headers */
    font-weight: 600; /* Slightly bolder title */
    margin-bottom: 20px; /* Space below header */
    width: 100%;
    text-align: left;
}

.event-info-modal {
    margin-bottom: 25px;
    border-bottom: none;
    padding-bottom: 15px;
}

.event-info-modal .event-date-modal {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color-dark);
    margin-bottom: 8px;
}

.event-info-modal .event-description-modal {
    font-size: 14px;
    color: var(--text-color-medium);
    line-height: 1.6;
    max-height: 60px; /* Limit description height if it can be very long */
    overflow-y: auto; /* Add scroll if description overflows */
}

.calendar-options-container {
    display: flex;
    justify-content: space-around; /* Distribute items evenly */
    align-items: flex-start; /* Align items to the top */
    gap: 20px; /* Space between calendar options */
}

.calendar-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1; /* Allow options to take equal space */
    min-width: 120px; /* Minimum width for each option */
}

.calendar-option img {
    width: 60px; /* Adjust icon size as needed */
    height: 60px; /* Adjust icon size as needed */
    margin-bottom: 10px;
    object-fit: contain;
}

.calendar-option span {
    font-size: 14px;
    color: var(--text-color-dark);
    margin-bottom: 15px;
    font-weight: 500;
}

.calendar-option button.add-calendar-btn {
    background-color: var(--primary-color);
    color: var(--text-color-light);
    border: none;
    border-radius: var(--border-radius-sm);
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    width: 100%; /* Make button take full width of its container */
    max-width: 120px; /* Max width for the button */
    transition: background-color 0.2s ease;
}

.calendar-option button.add-calendar-btn:hover {
    background-color: var(--primary-hover-color);
}

/* Ensure modal is scrollable if content overflows, especially on smaller screens */
.calendar-add-modal .modal-content {
    overflow-y: auto; /* Already in general modal style but good to keep in mind */
}

/* === TABS === */
.tabs {
  display: flex;
  gap: 10px; /* Spacing between tab buttons */
  margin: 20px 0 10px 0; /* Consistent margin */
  border-bottom: 1px solid #ddd; /* Separator line from account.html */
}

.tab-button {
  padding: 10px 20px; /* Default padding */
  margin-right: 0; /* Gap handles spacing */
  border: none;
  border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0; /* Rounded top corners */
  background: #f4f4f4;
  cursor: pointer;
  font-family: var(--primary-font);
  font-size: 13px; /* from account.html */
  color: var(--text-color-dark);
  transition: background-color 0.2s, color 0.2s;
}

.tab-button.active {
  background: var(--primary-color);
  color: var(--text-color-light);
}
.tab-button:hover:not(.active) {
  background: #e0e0e0; /* Slightly darker hover for non-active tabs */
}

.tab-content {
  display: none; /* Hidden by default */
  margin-top: 10px; /* Space above content */
  overflow-x: auto; /* For content that might be wider than modal */
  max-width: 100%;
}
.tab-content.active {
  display: block; /* Show active tab content */
}
/* === CHAT INTERFACE (within Modal) === */
.chat-container {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  max-height: 55vh;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  background: var(--background-light);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  margin-bottom: 0;
}

.chat-message {
  margin: 5px 0;
  padding: 8px 12px;
  border-radius: var(--border-radius-sm);
  font-size: 12px;
  line-height: 1.4;
  max-width: 80%;
  word-wrap: break-word;
}

.chat-message.user {
  background: var(--primary-color);
  color: var(--text-color-light);
  margin-left: auto;
  text-align: left;
}

.chat-message.bot {
  background: #d5edfeff; /* Light blue */
  color: var(--text-color-dark);
  margin-right: auto;
}

.chat-message.error {
  background: var(--error-background);
  color: var(--error-color);
}

.chat-message.loading {
  background: var(--background-grey-light);
  color: var(--text-color-medium);
  font-style: italic;
}

.chat-input-area { /* Container for input field and send button */
  display: flex;
  gap: 10px;
  padding: 10px;
  background: var(--background-white);
  border-top: 1px solid var(--border-color);
}

#chat-input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: 12px;
  line-height: 1.4; /* Set explicit line-height for consistency */
  outline: none;
  font-family: var(--primary-font);
  box-sizing: border-box; /* ADD THIS */
}

#chat-input:focus {
  border-color: var(--primary-color);
}

#send-chat-button { /* The send button */
  padding: 8px 16px; /* Vertical padding: 8+8=16px */
  background: var(--primary-color);
  color: var(--text-color-light);
  border:1px solid var(--primary-color);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-size: 12px;
  font-family: var(--primary-font);
box-sizing: border-box;
  /* box-sizing: content-box; by default for button unless globally changed */
}

#send-chat-button:hover {
  background: var(--primary-hover-color);
  border-color: var(--primary-hover-color); 
}

/* === UPLOAD PAGE (upload.html) === */
.drop-zone {
  width: 400px;
  height: 200px;
  border: 2px dashed #ccc; /* Lighter dash color */
  margin: 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--text-color-medium);
  background: var(--background-light);
  transition: border-color 0.2s, background-color 0.2s;
  position: relative;
  cursor: pointer;
  border-radius: var(--border-radius-md); /* Added border radius */
}

.drop-zone.dragover {
  border-color: var(--primary-color);
  background: #e6f0ff; /* Light blue background on dragover */
}

.drop-zone input[type="file"] { /* The actual file input is hidden but clickable */
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
/* Drop zone in modal (e.g., for uploading associated documents) */
.modal-content .tab-content .upload-section .drop-area {
  width: 100%;
  max-width: none;
  height: 80px;
  font-size: 14px;
  margin: 15px 0 25px 0; 
  box-sizing: border-box;
}
.modal-content #documents-tab #modal-upload-status {
    margin-top: 5px; /* Keep this reduced top margin */
    margin-bottom: 5px; /* Add a little bottom margin before the table if status is shown */
}

.modal-content #documents-tab #modal-upload-status:not(.hidden):empty {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    min-height: 0;
}

/* ================================================= */
/* START: REPLACEMENT CSS BLOCK             */
/* ================================================= */

/* Styles for the overall progress item container */
.file-progress-item {
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  
  /* --- Fixes are below --- */
  /* 1. Make this container a positioning reference for the close button */
  position: relative; 
  /* 2. Add padding on the right to prevent text from overlapping the 'x' */
  padding-right: 40px;
  Padding-left: 40px; 
}

/* Style the close button itself */
.file-progress-close-btn {
  /* Positioning */
  position: absolute;
  top: 10px;
  right: 15px;
  
  /* Appearance */
  font-size: 24px;
  font-weight: normal;
  color: #888;
  line-height: 1;

  /* Interaction */
  cursor: pointer; 
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.file-progress-close-btn:hover {
  color: #000;
}

/* This is the grey container that the progress bar sits inside */
.progress-bar-container {
  width: 100%;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 0px;
  margin-top: 8px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

/* This is the actual blue bar that grows */
.progress-bar {
  width: 0%;
  height: 20px;
  background-color: #0082ffff;
  border-radius: 1px;
  
  /* 3. The transition property was moved here from its incorrect location */
  transition: width 0.4s ease-in-out; 
}


/* ================================================= */
/* END: REPLACEMENT CSS BLOCK              */
/* ================================================= */


/* Styles below this were already correct */
.file-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  margin-bottom: 5px;
}

.file-status-icon {
  font-size: 1.2em;
}

/* Add styles for success and error states */
.file-progress-item.success .progress-bar {
  background-color: #0ec136ff; /* Green for success */
}

.file-progress-item.error .progress-bar {
  background-color: #e62b2bff; /* Red for error */
}

.file-status-text {
    font-size: 0.9em;
    color: #555;
    margin-top: 5px;
}
/* === STATUS & ERROR MESSAGES === */
.status-message { /* Generic status message styling */
  margin-top: 20px;
  font-size: 12px;
  color: var(--text-color-medium);
  text-align: center;
  min-height: 20px; /* Ensure space is reserved */
  padding: 10px;
  border-radius: var(--border-radius-sm);
}
/* Specific error message styling */
.status-message.error-message,
.general-error-message { /* For #page-error-message and other general errors */
  color: var(--error-color);
  background-color: var(--error-background); /* Add background for better visibility */
  border: 1px solid var(--error-color); /* Optional: add border */
  display: none; /* Controlled by JS */
}
/* Status message from dashboard.html (inline style was font-size 14px) */
.dashboard-container .status-message {
    font-size: 14px;
}

/* === BUTTONS === */
/* General button styling (merged from account.html and others) */
button, .button-like, .account-button { /* .button-like for <a> styled as buttons, include .account-button */
  padding: 8px 16px;
  background-color: var(--primary-color);
  color: var(--text-color-light);
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-size: 13px; /* from account.html */
  font-family: var(--primary-font);
  text-decoration: none; /* For .button-like */
  display: inline-block; /* For .button-like */
  text-align: center;
  transition: background-color 0.2s;
  margin-right: 10px; /* Default margin */
  margin-top: 5px; /* Default margin */
}
button:last-of-type, .button-like:last-of-type, .account-button:last-of-type {
  margin-right: 0; /* Remove margin from last button in a group */
}

button:hover, .button-like:hover, .account-button:hover {
  background-color: var(--primary-hover-color);
}

button:disabled, button.loading, .account-button:disabled, .account-button.loading {
  background-color: #ccc;
  cursor: not-allowed;
  position: relative; /* For loading spinner positioning */
}
/* Loading spinner animation for buttons */
button.loading::after, .account-button.loading::after {
  content: '';
  border: 2px solid var(--text-color-light); /* Spinner color */
  border-top: 2px solid var(--primary-color); /* Contrasting part of spinner */
  border-radius: 50%;
  width: 12px;
  height: 12px;
  animation: spin 1s linear infinite;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
@keyframes spin {
  0% { transform: translateY(-50%) rotate(0deg); }
  100% { transform: translateY(-50%) rotate(360deg); }
}

/* Load More Button */
#load-more {
  margin-top: 20px;
  /* Inherits general button styles */
  display: none; /* JS controls visibility */
}

/* Terminate/Delete buttons (often red) */
button.delete, button.terminate {
  background-color: #dc3545; /* Standard red for delete/terminate */
}
button.delete:hover, button.terminate:hover {
  background-color: #c82333; /* Darker red on hover */
}


/* === ACCOUNT PAGE SPECIFIC STYLES (account.html) === */
.account-container .section { /* Sections within account tabs */
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}
.account-container .section:last-of-type {
  border-bottom: none;
}
.account-container .section h3 {
  font-size: 16px;
  margin-bottom: 10px;
  color: #555; /* Specific color from account.html */
  font-weight: 600;
}
/* Form elements in account page */
.account-container select,
.account-container textarea,
.account-container input[type="text"], /* Assuming text inputs might be added */
.account-container input[type="email"] {
  width: 100%; /* Make form elements responsive within their container */
  max-width: 350px; /* Max width for readability */
  margin: 5px 0 10px 0; /* Adjusted margin */
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: 13px;
  outline: none;
  font-family: var(--primary-font);
  box-sizing: border-box;
}
.account-container select:focus,
.account-container textarea:focus,
.account-container input[type="text"]:focus,
.account-container input[type="email"]:focus {
  border-color: var(--primary-color);
}
.account-container textarea {
  min-height: 80px; /* Adjusted height */
}
.account-container .form-group { /* Wrapper for label and input */
    margin-bottom: 15px;
}
.account-container .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 13px;
}

/* Stripe Card Element Wrapper */
.card-wrapper {
  width: 100%;
  max-width: 350px; /* Match other inputs */
  margin: 10px 0;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  background: var(--background-white);
}
.card-wrapper.focused { /* JS should add this class on focus */
  border-color: var(--primary-color);
}
#card-element { /* Stripe's card element div */
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
}

/* Invite Users button specific width */
#users-tab button#invite-users-btn {
  /* display: block; /* Default for button */
  width: auto; /* Let it size by content or be full-width if needed */
  max-width: 350px; /* Match other inputs */
  /* margin: 10px 0; /* General button margin applies */
}

/* Tooltips (account.html users tab) */
#users-tab .tooltip {
  position: relative;
  cursor: help;
}
#users-tab .tooltip:hover::after {
  content: attr(title); /* Using title attribute which you have in HTML */
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-5px); /* Nudge it up a bit */
  background: var(--text-color-dark);
  color: var(--text-color-light);
  padding: 5px 10px;
  border-radius: var(--border-radius-sm);
  font-size: 12px;
  white-space: nowrap;
  z-index: 10; /* Ensure tooltip is on top */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Optional: add shadow */
}


/* === MEDIA QUERIES === */
@media (max-width: 768px) {
  .main-content {
    margin-left: 0; /* Remove margin for navbar on small screens if navbar becomes top/hidden */
    padding: 10px;
  }
  .navbar {
    /* Consider how navbar behaves on small screens:
        - Fixed width might be too much.
        - Could transform into a top bar or a hamburger menu.
        - For now, keeping it as is, but this is a key responsive area.
    */
    width: 100%;
    height: auto;
    position: static; /* Or fixed top */
    flex-direction: row; /* If it becomes a top bar */
    justify-content: space-around;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    padding: 10px;
  }
  .navbar img.logo {
    max-width: 100px; margin: 0;
  }
  .toolbar {
    flex-direction: row; gap: 10px;
  }
  .login-container {
    flex-direction: row; margin-top: 0;
  }
  #user-email { display: none; /* Might be too small to show */ }

  .page-container,
  .search-results-container,
  .dashboard-container,
  .files-container,
  .upload-container,
  .account-container {
    margin: 10px auto 0;
    padding: 15px;
  }
  .page-container h2 { font-size: 20px; }

  .search-container { width: 95%; height: auto; flex-direction: column; }
  .search-background { display: none; /* Input field is enough on mobile */ }
  #searchQuery { position: static; transform: none; width: 100%; height: 40px; font-size: 14px; }

  .app-table, .events-table, .files-table, .invoices-table, .users-table,
  .modal-content .tab-content .associated-files-table {
    font-size: 11px; /* Smaller font for tables on mobile */
  }
  .app-table th, .app-table td { padding: 6px 8px; }
  .modal-content {
    width: 95%;
    max-height: 90vh;
    padding: 15px;
  }
  .modal-header h2 { font-size: 18px; }

  .tabs { flex-wrap: wrap; } /* Allow tabs to wrap */
  .tab-button { padding: 8px 12px; font-size: 12px; }

  .drop-zone { width: 90%; height: 150px; font-size: 14px; }
}

/* ===================================================== */
/* Styles for Significant Events Table in Contract Modal */
/* ===================================================== */


.add-event-form {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-top: 15px;
    margin-bottom: 20px;
}

/* Base styles for the inputs in this form */
.add-event-form input[type="text"],
.add-event-form input[type="date"] {
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 12px;
    font-family: var(--primary-font);
    box-sizing: border-box;
    height: auto; /* Ensure height matches buttons */
}

/* The magic for the description field */
.add-event-form .event-description-input {
    flex-grow: 1;      /* Allows the element to grow */
    min-width: 100px;  /* Prevents it from becoming too small */
    max-width: none;   /* CRITICAL: Overrides any inherited max-width like 350px */
}

.add-event-form #add-event-btn {
    margin: 0;
    flex-shrink: 0;
}

.modal-content .modal-events-table {
    table-layout: fixed; /* Crucial for controlling column widths */
    width: 100%;       /* Ensure table uses full available width */
    margin-top: 15px;    /* Space above the table */
    margin-bottom: 20px; /* Space below the table */
}

/* General cell styling for this specific table */
.modal-content .modal-events-table th,
.modal-content .modal-events-table td {
    padding: 8px 10px;     /* Adjust padding: top/bottom 10px, left/right 8px */
    vertical-align: middle;   /* Changed from top to middle for better icon alignment */
    line-height: 1.6;     /* Slightly more line height for readability */
    border-bottom: none; /* Ensure row separators are consistent */
}
.modal-content .modal-events-table tbody tr:last-child td {
    border-bottom: none;
}


/* Header specific styling for this table */
.modal-content .modal-events-table th {
    background-color: var(--background-grey-medium); /* Consistent header background */
    font-weight: 600;
    color: var(--text-color-dark);
    border-bottom: none; /* Stronger border for header */
}


/* Making rows feel about two lines high and allowing wrap */
.modal-content .modal-events-table td {
    min-height: 3.2em;     /* (line-height * 2 lines) - Adjust if needed */
    word-wrap: break-word; /* Allow long words to break and wrap */
}

/* Column Header Specifics */
.modal-content .modal-events-table th:nth-child(1) { /* Event Date */
    width: 20%; /* Was 25% - adjusted slightly */
    text-align: left;
}

.modal-content .modal-events-table th:nth-child(2) { /* Description */
    width: 60%;
    text-align: left;
}

.modal-content .modal-events-table th:nth-child(3) { /* Add to Calendar */
    width: 20%; /* Was 25% - adjusted slightly */
    text-align: center; /* Center the header text */
}

/* Description Cell Specifics */
.modal-content .modal-events-table td[data-label="Description"] {
    white-space: normal; /* Ensure text wraps */
    /* If you want to strictly limit to ~2 lines and show ellipsis for more (optional):
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3.2em; /* (line-height * number of lines)
    */
}

/* Calendar Icon Cell Specifics */
.modal-content .modal-events-table td[data-label="Add to Calendar"].calendar-link-cell {
    /* .app-table .calendar-link-cell already provides:
        text-align: center;
        padding: 0; (its 'a' tag gets padding back)
        Its 'a' tag child uses flex to center the icon.
    */
    /* The width will be governed by the th's 20% due to table-layout:fixed */
    /* No specific width override needed here unless the 20% is too wide */
}

/* Calendar Icon Styling (ensure it's centered and sized appropriately) */
.modal-content .modal-events-table .calendar-icon,
.modal-content .modal-events-table .delete-icon {
    display: block;      /* Helps with margin: auto centering */
    margin: 0 auto;      /* Center the icon within its container (the <a> tag) */
    height: 20px;        /* Set a consistent height */
    width: 20px;         /* Set a consistent width */
}

/* Ensure the anchor tag in the calendar cell behaves well with the centered icon */
.modal-content .modal-events-table td[data-label="Add to Calendar"].calendar-link-cell a {
    display: flex;         /* These are from .app-table .calendar-link-cell a but reiterated for clarity/override if needed */
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 10px 0;       /* Padding on the link itself for easier clicking */
}

/* ============================================================ */
/* Styles for Same Party Transactions Table in Contract Modal */
/* (Refined to match style of files.html table - Iteration 2) */
/* ============================================================ */

.modal-content #same-party-tab .app-table { /* This was duplicated, ensure this is the one being used or merge */
    table-layout: fixed; /* Important for controlling column widths and text overflow */
    width: 100%;
    margin-top: 15px;
    margin-bottom: 20px;
    border-collapse: collapse; /* Ensure borders are clean */
}

.modal-content #same-party-tab .app-table th,
.modal-content #same-party-tab .app-table td {
    padding: 8px 10px;
    vertical-align: middle;
    text-align: left;
    border-bottom: none;
    white-space: nowrap; /* Prevent default wrapping in cells */
    overflow: hidden;     /* Hide overflowing content */
    text-overflow: ellipsis; /* Show ellipsis for overflow */
    box-sizing: border-box;
}
.modal-content #same-party-tab .app-table tbody tr:last-child td {
    border-bottom: none; /* Remove border for last row cells */
}


.modal-content #same-party-tab .app-table th {
    background-color: var(--background-grey-medium);
    font-weight: 600;
    color: var(--text-color-dark);
    line-height: 1.5;
}

.modal-content #same-party-tab .app-table tbody tr:nth-child(even) {
    background-color: var(--background-grey-light);
}

.modal-content #same-party-tab .app-table tbody tr:nth-child(odd) {
    background-color: var(--background-white);
}

.modal-content #same-party-tab .app-table tbody tr:hover {
    background-color: #e9f5ff;
}

.modal-content #same-party-tab .app-table td {
    min-height: 48px; /* Minimum height to match files.html style */
    line-height: 1.5;
    /* word-wrap: break-word; /* Keep if some cells need it, but nowrap is primary */
}

/* Adjusted Column Widths - Less for File Name, More for Summary */
.modal-content #same-party-tab .app-table th:nth-child(1), /* File Name TH */
.modal-content #same-party-tab .app-table td[data-label="File Name"] {
    width: 25%; /* Reduced width for File Name */
}

.modal-content #same-party-tab .app-table th:nth-child(2) { /* Expand TH */
    width: 7%; /* Slightly reduced for the icon */
    text-align: center;
}
.modal-content #same-party-tab .app-table td[data-label="Expand"].expand-link-cell {
    text-align: center;
    white-space: nowrap; /* Keep icon centered on one line */
    overflow: visible; /* Ensure icon isn't clipped if centering needs a bit of space */
}

.modal-content #same-party-tab .app-table th:nth-child(3) { /* Upload Date TH */
    width: 14%; /* Adjusted width */
    text-align: center;
}
.modal-content #same-party-tab .app-table td[data-label="Upload Date"] {
    text-align: center;
    white-space: nowrap; /* Keep date on one line */
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-content #same-party-tab .app-table th:nth-child(4) { /* Summary TH */
    width: 54%; /* Increased width for Summary */
}
.modal-content #same-party-tab .app-table td[data-label="Summary"].summary-cell {
width: 100%;
    box-sizing: border-box;  
white-space: normal; /* Allow summary to wrap */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3em; /* Approx 2 lines height */
}

/* Styling for the "Expand" icon */
.modal-content #same-party-tab .app-table .action-icon {
    display: block;
    margin: 0 auto;
    height: 16px; /* Standard icon height */
    width: auto;
}

/* Ensure the anchor tag in the "Expand" column fills cell for easier clicking and centering */
.modal-content #same-party-tab .app-table td[data-label="Expand"].expand-link-cell a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 10px 0;
}

/* Force single-line for File Name in table data cells */
.modal-content #same-party-tab .app-table td[data-label="File Name"] a,
.modal-content #same-party-tab .app-table td[data-label="File Name"] span {
    display: block;         /* Ensure link/span takes full width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* === LOADING SPINNER MODAL (New) === */
#loading-modal-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65); /* Slightly darker overlay for loading */
  display: flex;
  flex-direction: column; /* Stack spinner and message vertically */
  align-items: center;
  justify-content: center;
  z-index: 10004; /* Ensure it's on top of other modals */
}

#loading-modal-overlay .spinner {
  border: 5px solid rgba(255, 255, 255, 0.3); /* Light grey border */
  border-left-color: #ffffff; /* White for the active part of the spinner */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: modal-spinner-animation 1s linear infinite;
  margin-bottom: 20px; /* Space between spinner and message */
}

#loading-modal-overlay .loading-message {
  color: #ffffff;
  font-size: 1.2em;
  font-weight: 600;
  text-align: center;
}

/* Define the animation for the spinner */
@keyframes modal-spinner-animation {
  to {
    transform: rotate(360deg);
  }
}
/* --- Add or Modify these CSS Rules --- */

.pricing-panel-container {
  display: flex;
  justify-content: space-around; /* Distributes panels evenly */
  align-items: stretch; /* Makes panels of equal height if content varies */
  flex-wrap: wrap; /* Allows panels to wrap on smaller screens */
  gap: 15px; /* Space between panels */
  padding: 10px 0; /* Padding around the container */
}

.pricing-panel {
  border: 1px solid #ccc;
  border-radius: 12px; /* Rounded corners like the main container or image */
  padding: 20px;
  flex: 1 1 200px; /* Allows panels to grow/shrink, base width ~200px */
  max-width: 230px; /* Adjust as needed */
  min-width: 190px; /* Adjust as needed */
  display: flex;
  flex-direction: column;
  text-align: left;
  background-color: #ffffff; /* White background for panels */
  box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Subtle shadow */
  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for selection */
  /* cursor: pointer; Remove if only button is clickable for selection */
}

.pricing-panel h3 {
  font-size: 22px; /* Prominent title */
  font-weight: 700; /* Bold title */
  margin-top: 0;
  margin-bottom: 12px;
  color: #111; /* Darker color for title */
}

.pricing-panel .panel-description {
  font-size: 13px;
  color: #555;
  margin-bottom: 12px;
  flex-grow: 1; /* Ensures description takes available space, pushing button down */
  line-height: 1.5;
}

.pricing-panel .panel-details-link {
  font-size: 12px;
  color: #007bff; /* Standard link blue, or your theme's link color */
  text-decoration: none;
  margin-bottom: 15px;
  display: block;
}
.pricing-panel .panel-details-link:hover {
  text-decoration: underline;
}

.pricing-panel .panel-price {
  font-size: 14px; /* For "Per Month" */
  color: #333;
  margin-bottom: 20px;
  line-height: 1.2;
}

.pricing-panel .panel-price strong {
  font-size: 32px; /* Large price numbers */
  font-weight: 700; /* Bold price */
  color: #111;
  margin-right: 5px;
  display: block; /* Makes price appear above "Per Month" if desired */
}
.pricing-panel .panel-price strong span { /* If you want $ and number different */
    font-size: 28px;
}
/* If price and "Per Month" are on the same line: */
/*
.pricing-panel .panel-price strong {
  display: inline;
  font-size: 32px;
}
*/


.pricing-panel .panel-select-button {
  background-color: #007bff; /* Blue button, matches Bootstrap primary */
  color: white;
  border: none;
  padding: 12px 15px;
  font-size: 16px;
  font-family: 'Amazon Ember', 'Open Sans', sans-serif; /* Ensure font consistency */
  font-weight: 700; /* Bolder button text */
  border-radius: 8px; /* Rounded button corners */
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  margin-top: auto; /* Pushes button to the bottom */
  transition: background-color 0.2s ease;
}

.pricing-panel .panel-select-button:hover {
  background-color: #0056b3; /* Darker blue on hover */
}

.pricing-panel.selected {
  border-color: #007bff; /* Blue border when selected */
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.4); /* Optional: glow effect for selected panel */
}
.pricing-panel.selected .panel-select-button {
    background-color: #28a745; /* Green for selected, or keep blue */
    /* Or adjust text content via JS */
}
.pricing-panel.selected .panel-select-button:hover {
    background-color: #1e7e34; /* Darker green */
}


.pricing-panel input[type="radio"] { /* Hide the actual radio button */
  display: none;
}

/* --- Remove or Comment Out Old CSS for .pricing-panel img --- */
/*
.pricing-panel {
  cursor: pointer;
  width: 170px;
  height: auto;
}
.pricing-panel img {
  width: 100%;
  height: auto;
  display: block;
}
.pricing-panel.selected img {
  border: 2px solid #0082ffff;
  border-radius: 8px;
}
*/

/* ADD THIS ENTIRE BLOCK TO THE END of styles.css */

/* === STICKY FOOTER & MAIN CONTENT LAYOUT === */

/* In your styles.css file */

/* 1. Find your existing .main-content rule and ADD padding-bottom */
.main-content {
  flex: 1;
  padding: 20px;
  margin-left: 200px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - 40px);
  box-sizing: border-box;

  padding-bottom: 60px; /* ADD THIS LINE to prevent content from hiding behind the footer */
}

/* ADD THIS NEW, SIMPLER FOOTER RULE */
footer {
  position: fixed;
  bottom: 0;
  left: 0; /* CORRECTED: lowercase 'l' */
  right: 0;
  z-index: 101; /* This will now be applied correctly */

  /* Styling */
  background-color: rgba(51, 51, 51, 0.9);
  color: #fff;
  padding: 10px 20px; /* CORRECTED: no space before 'px' */
  text-align: center;
  font-size: 14px; /* I've changed this back to 14px as 9px is very small, but feel free to change it back */
}

footer a {
  color: rgb(0, 130, 255);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* ================================================================== */
/* === STYLES FOR ACCOUNT PAGE IMPROVEMENTS ========================= */
/* ================================================================== */

/* *** FIX: Styles for the new divisions table *** */
.divisions-table {
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: 13px;
    border: 1px solid #ddd;
    max-width: 50%; /* Make table half-width */
}
.divisions-table th, .divisions-table td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    height: 40px; /* Uniform row height */
    vertical-align: middle;
}
.divisions-table th {
    background-color: #f4f4f4;
    font-weight: 600;
}
.divisions-table th.action-column, .divisions-table td.action-column {
    width: 100px;
    text-align: center;
}
/* *** FIX: Style for icon-only delete button *** */
.divisions-table .delete-division-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.divisions-table .delete-division-btn img {
    width: 20px; /* Set icon size */
    height: 20px; /* Set icon size */
}
.divisions-table .delete-division-btn:hover img {
    opacity: 0.7;
}

/* *** FIX: More robust column widths for the users table *** */
.users-table th:nth-child(1), .users-table td:nth-child(1) { width: auto; } /* Email - Let it be flexible */
.users-table th:nth-child(2), .users-table td:nth-child(2) { width: 100px; } /* Role - Fixed width */
.users-table th:nth-child(3), .users-table td:nth-child(3) { width: 25%; } /* Default Filing Division - Percentage is fine here */
.users-table th:nth-child(4), .users-table td:nth-child(4) { width: 320px; } /* Action - Generous fixed width for buttons */

/* This container ensures the buttons themselves don't wrap */
.users-table .action-buttons-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
}
.users-table td[data-label="Action"] button {
    margin: 0;
    flex-shrink: 0; /* Important: Prevents buttons from shrinking and wrapping their text */
}