/* js/style.css */
/* Core Typography and Base Styling */



body {
    font-family: 'Inter', sans-serif;
    background-color: #f1f5f9; /* slate-100 - page background */
    line-height: 1.6; /* Improved readability */
    color: #334155; /* Default text color, slate-700 equivalent */
    -webkit-font-smoothing: antialiased; /* Smoother fonts */
    -moz-osx-font-smoothing: grayscale; /* Smoother fonts */
}

/* Scroll lock for modals and fullscreen */
body.fullscreen-active-body-scroll-lock,
body.modal-active-body-scroll-lock {
    overflow: hidden;
}

/* Disable user select during column dragging */
body.is-column-dragging * {
    user-select: none !important;
}

/* Custom Shadow Definitions (Implemented via standard CSS, not custom Tailwind config) */
/* These are designed to give a more layered, modern depth */
.shadow-custom-3xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.shadow-custom-4xl {
    box-shadow: 0 35px 70px -15px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.shadow-inset-light {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}


/* Styles for Modals and Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Darker, more immersive backdrop */
    backdrop-filter: blur(8px); /* Modern frosted glass effect */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content-base {
    background-color: #fff;
    padding: 30px;
    border-radius: 1.5rem; /* rounded-3xl */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* Default shadow for modals */
    max-width: 700px; /* Changed from 500px */
    width: 90%;
    transform: translateY(-40px) scale(0.95); /* Initial state for animation */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease-in-out; /* Bounce-out transition */
    position: relative;
    box-sizing: border-box; /* Ensures padding doesn't affect width */
}
.modal-overlay.active .modal-content-base {
    transform: translateY(0) scale(1); /* End state for animation */
}
/* Specific modal content sizes */
.modal-content-confirm {
    max-width: 450px;
    box-shadow: var(--tw-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)); /* Tailwind shadow-xl */
}
.modal-content-row-summary {
    max-width: 900px; /* Wider for summaries */
    width: 95%;
    box-shadow: var(--tw-shadow-2xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25)); /* Tailwind shadow-2xl */
}

.modal-content-sentiment {
    max-width: 900px; /* Provides ample width for the three columns */
}

.modal-title {
    font-size: 2rem; /* Larger text for clarity */
    font-weight: 800; /* Extra bold */
    color: #1a202c; /* gray-900 equivalent */
    margin-bottom: 1.5rem;
    text-align: center;
    border-bottom: 1px solid #e2e8f0; /* Subtle separator */
    padding-bottom: 0.75rem;
}
#rowSummaryModalTitle.modal-title {
    font-size: 1.75rem; /* text-2xl */
    text-align: left;
    margin-bottom: 1rem;
    border-bottom: none; /* Removed border for cleaner look with close button */
    padding-bottom: 0;
}
.modal-message {
    font-size: 1.125rem; /* text-lg */
    color: #4a5568; /* gray-700 */
    margin-bottom: 1.5rem;
    text-align: center;
    line-height: 1.5;
}
.modal-buttons {
    display: flex;
    justify-content: center;
    gap: 1.25rem; /* Increased gap for better spacing */
    margin-top: 2rem; /* More space from content above */
}
.modal-cancel-btn, .modal-confirm-btn, .modal-save-btn, .modal-search-btn {
    padding: 0.85rem 1.75rem; /* Larger padding for better touch targets */
    border-radius: 9999px; /* rounded-full */
    font-weight: 700; /* Bolder text */
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease-in-out; /* Consistent bounce transition */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--tw-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)); /* shadow-md */
}
.modal-cancel-btn {
    background-color: #cbd5e1; /* slate-300 */
    color: #334155; /* slate-700 */
    border: 1px solid #94a3b8; /* slate-400 */
}
.modal-cancel-btn:hover {
    background-color: #94a3b8; /* slate-400 */
    color: #1e293b; /* slate-800 */
    transform: translateY(-2px); /* Subtle lift */
    box-shadow: var(--tw-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)); /* shadow-lg */
}
.modal-confirm-btn {
    background-color: #3b82f6; /* blue-500 */
    color: #fff;
}
.modal-confirm-btn:hover {
    background-color: #2563eb; /* blue-600 */
    transform: translateY(-2px);
    box-shadow: var(--tw-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
}
.modal-save-btn {
    background-color: #22c55e; /* green-500 */
    color: #fff;
}
.modal-save-btn:hover {
    background-color: #16a34a; /* green-600 */
    transform: translateY(-2px);
    box-shadow: var(--tw-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
}
.modal-search-btn {
    background-color: #3b82f6; /* blue-500 */
    color: #fff;
}
.modal-search-btn:hover {
    background-color: #2563eb; /* blue-600 */
    transform: translateY(-2px);
    box-shadow: var(--tw-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
}

/* Specific styles for Row Summary Modal */
#rowSummaryContent strong {
    display: block;
    margin-bottom: 4px;
    color: #1e293b; /* slate-800 */
    font-size: 1.05rem; /* Slightly larger */
}
#rowSummaryContent input, #rowSummaryContent textarea {
    border: 1px solid #cbd5e1; /* slate-300 */
    padding: 10px 14px; /* More padding */
    border-radius: 8px; /* Rounded corners */
    font-size: 1rem;
    background-color: #f8fafc; /* light background */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); /* subtle inset shadow */
    transition: all 0.2s ease-in-out;
}
#rowSummaryContent textarea {
    min-height: 100px; /* More height */
    resize: vertical;
}
#rowSummaryContent input:focus, #rowSummaryContent textarea:focus {
    outline: none;
    border-color: #3b82f6; /* blue-500 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); /* Stronger focus ring */
    background-color: #fff; /* White background on focus */
}

/* Close button for modals */
.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    cursor: pointer;
    color: #64748b; /* slate-500 */
    padding: 8px; /* Larger hit area */
    border-radius: 9999px; /* fully rounded */
    transition: background-color 0.2s ease, color 0.2s ease;
}
.modal-close-btn:hover {
    color: #1e293b; /* slate-800 */
    background-color: #f1f5f9; /* slate-100 */
}
.modal-close-btn svg {
    width: 28px; /* Larger icon */
    height: 28px;
}

/* Google Search Modal */
#googleSearchModal {
    position: absolute; /* Positioned relative to parent content for pop-up behavior */
    background-color: #fff;
    padding: 25px 30px; /* More padding */
    border-radius: 1rem; /* rounded-xl */
    box-shadow: var(--tw-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)); /* shadow-xl */
    z-index: 1001;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 280px; /* Min width */
    max-width: 400px; /* Max width */
    text-align: center;
    opacity: 0;
    transform: scale(0.9); /* Initial state for animation */
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    pointer-events: none; /* Allows clicks through when not active */
}
#googleSearchModal.active {
    opacity: 1;
    transform: scale(1); /* End state for animation */
    pointer-events: all;
}
#googleSearchModal h2 {
    font-size: 1.5rem; /* Larger title */
    font-weight: 700;
    margin-bottom: 15px;
    color: #1e293b;
}
#googleSearchModal #googleSearchText {
    font-size: 1rem;
    color: #475569;
    margin-bottom: 20px; /* More space */
    word-break: break-word;
}
#googleSearchModal .modal-buttons {
    margin-top: 0; /* Override default modal button margin */
}

/* General button styles for .action-button (used frequently) */
.action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem; /* Restored a sensible default padding */
    font-size: 0.9rem; /* Restored a sensible default font size */
    cursor: pointer;
    border: none;
    box-sizing: border-box;
    text-decoration: none;
    /* Shadows, rounded-full, hover:scale-105 are handled by Tailwind classes in HTML */
    /* Transition handled by Tailwind in HTML */
}
.action-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem; /* Increased gap */
    justify-content: center;
    margin-top: 2.5rem; /* More space */
}


/* The existing fullscreen mode rule below will continue to work correctly.
   It will override the grid layout whenever the .fullscreen-mode class is applied,
   which is the desired behavior. */
#mainAppContainer.fullscreen-mode {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    padding: 2rem;
    overflow-y: auto;
    z-index: 999;
    max-width: 100vw;
    margin: 0;
}
/* Revert general container styling when not in fullscreen (explicitly to override fixed) */
#mainAppContainer:not(.fullscreen-mode) {

}


/* Table specific styles */
.table-container { 
    overflow-x: auto;
    overflow-y: auto; 
    position: relative;
    max-height: 70vh; /* Controlled by max-height */
    width: auto;
    min-width: 100%;
    border-radius: 1rem; /* rounded-2xl from HTML */
    box-shadow: var(--tw-shadow-2xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25)); /* shadow-2xl from HTML */
}
#mainDataTable {
    width: 100%;
    border-collapse: separate; 
    border-spacing: 0; /* Remove default table spacing */
    min-width: 100%;
    table-layout: fixed; /* Ensures columns respect defined widths */
}

#mainDataTable th,
#mainDataTable td {
    border-bottom: 1px solid #e2e8f0; /* gray-200 - subtle border as requested */
    border-right: 1px solid #e2e8f0; /* gray-200 - subtle border as requested */
    white-space: pre-wrap; /* MODIFIED: Allows text to wrap and respects newlines */
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0; /* Padding will be on the inner div or contenteditable td */
    font-size: 0.85rem; /* Reduced font size for compactness */
    vertical-align: top;    /* MODIFIED: Aligns content to the top for multi-line cells */
}

#mainDataTable td:last-child,
#mainDataTable thead#tableHeader tr th:last-child { 
    border-right: none; /* No border on last column */
}

#mainDataTable thead#tableHeader {
    position: sticky;
    top: 0;
    z-index: 21; /* Above table body */
    background-color: #f8fafc; /* Ensure background on sticky header */
}

#mainDataTable th {
    background-color: #f8fafc; /* slate-50 */
    padding: 0.25rem 0.5rem; /* Further reduced vertical padding */
    text-align: left;
    color: #334155; /* slate-700 */
    font-weight: 600; /* Semibold */
}

#mainDataTable td > div {
    padding: 0.2rem 0.5rem;
    /* CRITICAL FIX: 'pre-wrap' forces the browser to render \n as a new line */
    white-space: pre-wrap; 
    word-break: break-word;
    min-height: 1em;
    line-height: 1.5; 
}

#mainDataTable td[contenteditable="true"] {
    padding: 0.2rem 0.5rem; /* Further reduced vertical padding */
    white-space: normal;
    word-break: break-word;
    min-width: 50px;
    outline: none; /* Remove default outline */
    box-shadow: none;
    transition: background-color 0.15s ease-in-out; /* Add transition for subtle feedback */
}
/* Optional: A very subtle visual feedback for editable cells on focus, not blue */
#mainDataTable td[contenteditable="true"]:focus {
    background-color: #e2f2fe; /* Very light blue background on focus, subtle */
}


#mainDataTable td.readonly-cell {
    cursor: default;
}
#mainDataTable td.cursor-cell {
    cursor: text;
}

.resize-handle {
    position: absolute;
    right: -5px;
    top: 0;
    bottom: 0;
    width: 20px; /* Wider handle for easier grabbing */
    cursor: col-resize;
    z-index: 22; /* Above sticky header content */
    background-color: transparent;
    transition: background-color 0.2s ease;
}
.resize-handle:hover, body.is-column-dragging .resize-handle.active-resize {
    background-color: rgba(59, 130, 246, 0.2); /* Subtle blue highlight */
}

th.dragging { opacity: 0.7; background-color: #e0f2fe; border: 1px dashed #3b82f6; }
th.drag-over-target { box-shadow: inset 0 0 0 3px #3b82f6; } /* Thicker highlight */
body.is-column-dragging { cursor: col-resize !important; }

th.actions-column {
    text-align: center !important;
    min-width: 100px; /* Slightly wider for actions */
    width: 100px;
}
th.actions-column .header-content-wrapper { justify-content: center; }

.header-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    width: 100%;
    position: relative;
}
.header-title-area {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align to start for text and icon, allow filter button to push to end */
    width: 100%;
    min-height: 36px; /* Taller for better click area */
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
}
.header-title-text-container { display: flex; align-items: center; gap: 6px; }
.header-title-text { 
    font-weight: 700; 
    color: #1e293b; 
    line-height: 1.25; /* Ensures text is not clipped */
} 
.sort-indicator { 
    width: 18px; 
    height: 18px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #64748b; 
    margin-left: 6px; 
    flex-shrink: 0; /* Prevent icon from shrinking */
}


.column-filter-controls {
    position: absolute; 
    background-color: white;
    border: 1px solid #cbd5e1; /* gray-300 */
    padding: 15px; /* More padding */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: var(--tw-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)); /* shadow-xl */
    z-index: 25;  
    display: none; 
    flex-direction: column;
    gap: 12px; /* More space between items */
    width: 320px; /* FIX 4: Explicit fixed width for the entire control */
    box-sizing: border-box;
}
.column-filter-controls.visible { display: flex; }
.filter-toggle-btn { background: none; border: none; cursor: pointer; padding: 6px; display: flex; align-items: center; justify-content: center; color: #64748b; transition: color 0.15s ease; }
.filter-toggle-btn:hover { color: #1e293b; background-color: #f1f5f9; border-radius: 4px; }
.filter-toggle-btn.active-filter { color: #3b82f6; font-weight: bold; }
.filter-toggle-btn.active-filter:hover { color: #2563eb; }
.filter-toggle-btn svg { width: 20px; height: 20px; } /* Larger icon */
.filter-condition-item { display: flex; gap: 8px; align-items: center; } /* More gap */
.filter-condition-select { 
    padding: 8px; 
    border: 1px solid #cbd5e1; 
    border-radius: 6px; 
    font-size: 0.9rem; 
    width: 120px; /* FIX 4: Explicit width for select */
    flex-shrink: 0; 
    min-width: 120px; /* Ensure a minimum width */
}
.column-filter-input {
    flex-grow: 1;
    padding: 8px 12px; /* More padding */
    border: 1px solid #cbd5e1; /* gray-300 */
    border-radius: 6px;
    font-size: 0.9rem;
    min-width: 80px; /* FIX 4: Adjusted min-width for input */
    width: auto; /* Allow auto width to fill space */
}
.column-filter-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); }
.remove-filter-btn { background-color: #f87171; color: white; border: none; border-radius: 6px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-weight: bold; flex-shrink: 0; transition: background-color 0.1s ease; }
.remove-filter-btn:hover { background-color: #ef4444; }
.add-filter-condition-btn { background-color: #4ade80; color: white; padding: 8px 15px; border-radius: 8px; font-size: 0.9rem; border: none; cursor: pointer; transition: background-color 0.1s ease; margin-top: 10px; } /* More padding and radius */
.add-filter-condition-btn:hover { background-color: #22c55e; }

#filterGroupsBuilder .filter-group-condition-item {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr) minmax(180px, 3fr) auto; /* Adjusted grid columns slightly for input */
    gap: 0.75rem; /* More gap */
    align-items: center;
    margin-bottom: 0.75rem;
}
#filterGroupsBuilder .filter-group-condition-item select,
#filterGroupsBuilder .filter-group-condition-item input {
    padding: 0.5rem 0.75rem; /* More padding */
    border: 1px solid #cbd5e1; /* gray-300 */
    border-radius: 0.5rem; /* rounded-lg */
    font-size: 0.9rem;
    box-sizing: border-box;
}
#filterGroupsBuilder .filter-group-condition-item input[disabled] {
    background-color: #f1f5f9; /* slate-100 */
    cursor: not-allowed;
}

#columnToggleDropdown { padding: 15px; top: 100%; margin-top: 10px; z-index: 100; transform-origin: top; }
#columnToggleDropdown label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; font-size: 0.95rem; color: #334155; border-radius: 6px; /* Rounded items */ }
#columnToggleDropdown label:hover { background-color: #f8fafc; }
#columnToggleDropdown input[type="checkbox"] { transform: scale(1.2); cursor: pointer; }
.columnToggle-actions { display: flex; justify-content: space-around; padding-bottom: 12px; border-bottom: 1px solid #e2e8f0; margin-bottom: 12px; } /* More padding, margin */
.columnToggle-actions button { background-color: #64748b; color: white; padding: 8px 15px; border-radius: 8px; font-size: 0.85rem; cursor: pointer; transition: background-color 0.1s ease; }
.columnToggle-actions button:hover { background-color: #475569; }
.columnToggle-actions button:disabled { opacity: 0.5; cursor: not-allowed; }

.pagination-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; padding: 1rem 1.25rem; background-color: #fff; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.08); } /* More padding, radius, shadow */
.pagination-controls button { background-color: #e2e8f0; color: #334155; padding: 0.65rem 1.25rem; border-radius: 9999px; border: 1px solid #cbd5e1; cursor: pointer; transition: all 0.2s ease; } /* Rounded-full, transitions */
.pagination-controls button:not(:disabled) { background-color: #3b82f6; color: white; border-color: #3b82f6; }
.pagination-controls button:not(:disabled):hover { background-color: #2563eb; border-color: #2563eb; transform: translateY(-2px); box-shadow: var(--tw-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)); }
.pagination-controls button:disabled { opacity: 0.6; cursor: not-allowed; background-color: #e2e8f0;  color: #334155; border: 1px solid #cbd5e1; }
.pagination-controls #rowsPerPageContainer label { margin-right: 0.6rem; color: #475569; font-size: 1rem; }
.pagination-controls #rowsPerPageSelect { padding: 0.5rem 0.75rem; border-radius: 8px; border: 1px solid #cbd5e1; background-color: #fff; color: #334155; font-size: 1rem; cursor: pointer; }
.pagination-controls #rowsPerPageSelect:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); }
#pageInfo { font-size: 1rem; font-weight: 600; color: #334155; }

.page-view { 
    display: none; 
    animation: fadeIn 0.4s ease-out; 
    position: relative; /* Ensures z-index is applied */
}
.page-view.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Stronger translateY */
.page-content-wrapper { padding: 5px; background-color: #fff; border-radius: 16px; box-shadow: 0 8px 20px rgba(0,0,0,0.08); } /* More padding, radius, shadow */

.charts-grid {
  display: grid;
  /* 1. Default to a single, full-width column on mobile devices */
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .charts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}



.grid-span-full {
    grid-column: 1 / -1;
}
.chart-container {
    background-color: #f8fafc;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    
    /* These new flex properties force all direct children to be centered */
    display: flex;
    flex-direction: column;
    align-items: center;
}
.chart-container h3 { font-size: 1.25rem; font-weight: 700; color: #1e293b; margin-bottom: 1.25rem; } /* Larger, bolder text */

/* UPDATED STYLES FOR CHART CONTAINERS AND SVGs */
#jurisdictionChartContainer,
#statusChartContainer,
#defendantsChartContainer,
#vendorCompanyTypeChartContainer,
#vendorServiceAvailabilityChartContainer,
#vendorLocationChartContainer {
    min-height: 400px;
    width: 100%;
    display: block;
}

.chart-container svg {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}


.admin-section { background-color: #f8fafc; padding: 12px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); margin-bottom: 2rem; } /* More padding, radius, shadow, margin */
.admin-section h3 { font-size: 1.25rem; font-weight: 700; color: #1e293b; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 12px; } /* Larger, bolder text, more gap */
.role-option { display: flex; align-items: center; margin-bottom: 1rem; } /* More margin */
.role-option input[type="radio"] { margin-right: 0.85rem; transform: scale(1.3); } /* Larger radio buttons */
.role-option label { font-size: 1.05rem; color: #334155; cursor: pointer; } /* Slightly larger label text */
.form-label { display: block; font-size: 1rem; font-weight: 600; color: #334155; margin-bottom: 0.6rem; } /* Bolder, more margin */
.form-input, .form-select { display: block; width: 100%; padding: 0.85rem 1.25rem; border: 1px solid #cbd5e1; border-radius: 0.75rem; font-size: 1rem; color: #334155; background-color: #fff; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); transition: all 0.2s ease-in-out; } /* More padding, radius, shadow, transition */
.form-input:focus, .form-select:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); background-color: #fff; } /* Stronger focus ring, white background on focus */
.form-input::placeholder { color: #94a3b8; /* slate-400 */ } /* Placeholder color */


#usersTable {
    border-radius: 0.75rem; /* rounded-xl */
    overflow: hidden; /* Ensures rounded corners */
}
#usersTable th, #usersTable td {
    padding: 14px 18px; /* More padding */
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
    font-size: 0.95rem; /* Slightly larger font */
}
#usersTable th {
    background-color: #f8fafc;
    font-size: 0.8rem;
    font-weight: 700; /* Bolder */
    color: #475569; /* slate-600 */
    text-transform: uppercase;
    letter-spacing: 0.08em; /* More tracking */
}
#usersTable tbody tr:last-child td {
    border-bottom: none;
}
#usersTable td button {
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, opacity 0.15s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    padding: 8px; /* Larger hit area */
    border-radius: 9999px; /* rounded-full */
    color: #64748b; /* slate-500 */
}
#usersTable td button:hover {
    background-color: #e2e8f0; /* slate-200 */
    color: #1e293b; /* slate-800 */
}
#usersTable td button svg {
    width: 20px; /* Larger icon */
    height: 20px;
}


#loading-indicator, #saving-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem; /* More padding */
    border-radius: 1rem; /* rounded-xl */
    margin-bottom: 2rem; /* More margin */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* More prominent shadow */
}
#loading-indicator span, #saving-indicator span {
    font-size: 1.25rem; /* Larger text */
    font-weight: 600;
}
#loading-indicator svg, #saving-indicator svg {
    animation: spin 1s linear infinite;
    width: 32px; /* Larger SVG */
    height: 32px;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Fallback for logged out state (already exists) */
#mainAppContent.logged-out #tableViewPage,
#mainAppContent.logged-out #chartsPage,
#mainAppContent.logged-out #adminPage,
#mainAppContent.logged-out #userManagementPage {
    display: none; 
}
#mainAppContent.logged-out::before { 
    content: "Please log in to view the application content.";
    display: block;
    text-align: center;
    font-size: 1.5rem; /* Larger text */
    color: #475569; /* slate-600 */
    padding: 4rem; /* More padding */
    font-weight: 500;
}

/* Bulk Import Status Messages */
#importStatusMessage {
    padding: 1.25rem; /* More padding */
    border-radius: 12px; /* Rounded corners */
    font-size: 1rem;
    border: 1px solid transparent;
    line-height: 1.5;
}
#importStatusMessage.success {
    background-color: #dcfce7; /* green-100 */
    color: #166534; /* green-800 */
    border-color: #86efac; /* green-300 */
}
#importStatusMessage.warning {
    background-color: #fefce8; /* yellow-100 */
    color: #854d0e; /* yellow-800 */
    border-color: #fde047; /* yellow-300 */
}
#importStatusMessage.error {
    background-color: #fee2e2; /* red-100 */
    color: #991b1b; /* red-800 */
    border-color: #fca5a5; /* red-300 */
}
#importStatusMessage strong {
    font-weight: 700; /* Bolder */
    display: block;
    margin-bottom: 0.6rem;
    font-size: 1.1rem; /* Slightly larger heading */
}
#importStatusMessage pre {
    white-space: pre-wrap;
    font-family: monospace;
    font-size: 0.9rem; /* Slightly larger code text */
    margin-top: 1rem; /* More margin */
    padding: 0.75rem; /* More padding */
    background-color: rgba(0,0,0,0.07); /* Darker background for code */
    border-radius: 6px;
    max-height: 180px; /* Taller pre */
    overflow-y: auto;
    border: 1px solid rgba(0,0,0,0.1);
}

/*
========================================
AI Query Page Specific Styles
========================================
*/

/* --- Main Layout --- */
.ai-query-layout-grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column on small screens */
    gap: 2rem;
}

@media (min-width: 1024px) { /* Two columns on larger screens */
    .ai-query-layout-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* --- Form Enhancements --- */
.ai-query-form-container {
    background-color: #fff;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.select-wrapper {
    position: relative;
}

.select-wrapper::after {
    content: '\25BC'; /* Downward-pointing triangle */
    font-size: 1rem;
    color: #9ca3af;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

#aiQueryService {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none;
}

.ai-query-submit-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    background-image: linear-gradient(to right, #4f46e5, #7c3aed, #c026d3);
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 4px 15px 0 rgba(124, 58, 237, 0.35);
    transition: all 0.3s ease;
    cursor: pointer;
}
.ai-query-submit-btn:hover {
    background-position: right center;
    box-shadow: 0 4px 15px 0 rgba(192, 38, 211, 0.5);
    transform: translateY(-2px);
}

/* --- Results Area & Skeleton Loader --- */
#aiQueryResults {
    border-radius: 1rem;
    padding: 1rem;
    min-height: 300px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
    border: 2px dashed #e5e7eb;
}

.ai-results-placeholder {
    text-align: center;
}

/* Add this class with JS when loading */
#aiQueryResults.is-loading .ai-results-placeholder {
    display: none;
}

#aiQueryResults.is-loading::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    min-height: 300px;
    background:
        linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 60%) #f3f4f6;
    background-size: 200% 100%;
    background-position-x: 180%;
    animation: 1s loading-skeleton ease-in-out infinite;
    border-radius: 0.75rem;
}

@keyframes loading-skeleton {
    to {
      background-position-x: -20%;
    }
}

/* Style for actual text results */
#aiQueryResults p.generated-text {
    white-space: pre-wrap;
    text-align: left;
    font-size: 1rem;
    line-height: 1.6;
    width: 100%;
    align-self: flex-start;
}

/* Style for actual image results */
#aiQueryResults img.generated-image {
    max-width: 100%;
    max-height: 500px;
    object-fit: contain;
    border-radius: 0.5rem;
}

/* --- Divider & Tips Section --- */
.gradient-divider {
    height: 2px;
    background-image: linear-gradient(to right, rgba(229, 231, 235, 0), #a855f7, rgba(229, 231, 235, 0));
    margin: 3rem 0;
}

.tips-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    margin-bottom: 2rem;
    font-size: 0.95rem;
}
.tips-table th, .tips-table td {
    border: 1px solid #e5e7eb;
    padding: 0.75rem 1rem;
    text-align: left;
    vertical-align: top;
}
.tips-table th {
    background-color: #f9fafb;
    font-weight: 600;
}
.tips-table td:first-child {
    background-color: #fee2e2; /* Light red */
}
.tips-table td:nth-child(2) {
    background-color: #dcfce7; /* Light green */
}
/* Aligns content to the top-left once results are populated */
#aiQueryResults.has-results {
    justify-content: flex-start;
    align-items: flex-start;
}
/* Adds some spacing to the dynamically added result headers */
#aiQueryResults.has-results h4 {
    font-weight: 700;
    font-size: 1.1rem;
    color: #374151; /* gray-700 */
    margin-bottom: 0.5rem;
}

.ai-query-download-btn {
    padding: 0.8rem 1.5rem;
    border-radius: 9999px; /* rounded-full */
    font-weight: 700;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    background-color: #cbd5e1; /* slate-300 */
    color: #334155; /* slate-700 */
    border: 1px solid #94a3b8; /* slate-400 */
    cursor: pointer;
}

.ai-query-download-btn:hover:not(:disabled) {
    background-color: #94a3b8; /* slate-400 */
    color: #1e293b; /* slate-800 */
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
}

.ai-query-download-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #e2e8f0; /* slate-200 */
    transform: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}


/* Styling for the text labels on the network graph nodes */
.node-label-div {
    font-size: 11px;
    font-weight: 600; /* Bolder for better readability */
    color: #1e293b; /* Dark text for high contrast on a light background */
    background-color: rgba(248, 250, 252, 0.85); /* Very light, semi-transparent background */
    padding: 3px 7px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); /* A soft, clean shadow */
    border: 1px solid rgba(0, 0, 0, 0.05); /* A subtle border to define the edge */
    max-width: 160px;
    line-height: 1.4;
    text-align: center;
    transition: all 0.2s ease;
    position: absolute;
    pointer-events: none !important;    /* mouse still reaches circles */
    word-wrap: break-word;     /* wrap long names */
    color: #333;
}


/* Base styles for the summary pop-up box */
.network-summary-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.98);
    max-width: 600px;
    width: 90vw;
    max-height: 80vh; /* Prevent going off screen */
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 9999; /* Higher z-index */
    border: 1px solid rgba(255, 255, 255, 0.5);
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(0.25, 1, 0.5, 1), transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
    display: flex;
    flex-direction: column;
}


.network-summary-popup[style*="block"] {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1); /* Adjusted for centering */
    pointer-events: auto;
}

/* This rule detects when JS makes the box visible and triggers the animation */
.network-summary-popup[style*="block"] {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto; /* Enables interaction when visible */
}

/* Content area styling for better padding and text wrapping */
#network-summary-content {
    padding: 1rem 2rem 1.5rem 1.5rem; /* Right padding for scrollbar */
    padding-top: 2.5rem; /* Space for close button */
    font-size: 0.95rem;
    line-height: 1.6;
    color: #334155;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: auto;
    max-height: calc(80vh - 4rem);
    margin-right: 0.5rem; /* Space between content and scrollbar */
}

/* Modern, circular close button */
#network-summary-close-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2rem; /* 32px */
    height: 2rem; /* 32px */
    background-color: rgba(0, 0, 0, 0.05);
    border: none;
    border-radius: 9999px; /* Fully rounded */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b; /* slate-500 */
    cursor: pointer;
    transition: all 0.2s ease-out;
}

#network-summary-close-btn:hover {
    background-color: rgba(0, 0, 0, 0.1);
    color: #1e293b; /* slate-800 */
    transform: scale(1.1) rotate(90deg); /* Adds a nice micro-interaction */
}

/* style.css  (append anywhere) */
.network-labels-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;   /* clicks go through to the circles */
    z-index: 10;
}


/* keep graph contents inside the frame */
#network-visualization-container {
  overflow: hidden;
  position: relative;
  z-index: 1; /* Add this to ensure it's below the main menu */
  touch-action: none;
  -ms-touch-action: none;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

#network-visualization-container canvas {
  touch-action: none;
}

/* pin, style, and lift the legend */
#network-legend {
  font-size: 0.75rem;
  line-height: 1rem;
  backdrop-filter: blur(2px);
  position: absolute;
  top: 0.5rem;       /* ~8 px */
  right: 0.5rem;
  z-index: 20;       /* above SVG */
  font-size: 0.75rem;
  line-height: 1rem;
  background: rgba(255,255,255,0.85);
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

header {
    position: relative; /* This is required for z-index to work */
    z-index: 1100;      /* A high value to be above modals (1000) and maps */
}

#logoLink {
  display: inline-flex;          /* the <a> becomes a flex item holding the img */
  align-items: center;
  line-height: 1;                /* avoid stray line box space */
}

#logoLink img {
  display: block;                /* kill baseline gap that makes it sit low */
  height: 2.25rem;               /* ~36px on mobile */
  width: auto;                   /* preserve aspect ratio */
  object-fit: contain;
  flex-shrink: 0;
  max-width: 50vw;               /* avoids crowding on very narrow phones */
}

#mainDataTable td.actions-cell button {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.g6-tooltip {
    position: absolute; /* Ensures z-index is respected */
    visibility: visible;
    z-index: 20; /* High z-index to be on top of labels */
    pointer-events: none; /* Tooltip should not intercept mouse clicks */
}


/* ========================================
   Case Summary Modal Enhancements
   ======================================== */

/* Styles for the new circular close button.
   Positioning is handled by utility classes in the HTML. */
.case-modal-close-btn {
    width: 2.25rem;  /* 36px */
    height: 2.25rem; /* 36px */
    
    /* Center the 'X' icon inside the button */
    display: flex;
    align-items: center;
    justify-content: center;

    background-color: #f1f5f9; /* slate-100 */
    color: #64748b; /* slate-500 */
    border: none;
    border-radius: 50%; /* This makes it a perfect circle */
    cursor: pointer;
    
    /* Smooth transition for hover effects */
    transition: all 0.2s ease-in-out;
}

/* A nicer hover effect */
.case-modal-close-btn:hover {
    background-color: #e2e8f0; /* slate-200 */
    color: #1e293b; /* slate-800 */
    transform: rotate(90deg) scale(1.05); /* Adds a nice micro-interaction */
}

/* Ensure the SVG icon inside is sized correctly */
.case-modal-close-btn svg {
    width: 1.25rem; /* 20px */
    height: 1.25rem; /* 20px */
}

/* js/style.css */

/* Add this to ensure the comparison table dropdowns are styled */
.form-multiselect {
    border: 1px solid #d1d5db; /* gray-300 */
    border-radius: 0.5rem; /* rounded-md */
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease-in-out;
    height: 15rem; /* Set a taller height (240px) */
}

.form-multiselect:focus {
    outline: none;
    border-color: #60a5fa; /* blue-400 */
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.5); /* blue-400 with 0.5 opacity */
}

/* Specific styling for the comparison table */
#comparisonTable th,
#comparisonTable td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb; /* gray-200 */
    text-align: left;
    white-space: normal; /* Allow content to wrap */
    word-break: break-word; /* Break long words */
}

#comparisonTable thead th {
    background-color: #f9fafb; /* gray-50 */
    font-weight: 600;
    color: #4b5563; /* gray-700 */
    position: sticky;
    top: 0;
    z-index: 20; /* Ensure header is above body cells */
}

/* Sticky first column in comparison table */
#comparisonTable th.sticky,
#comparisonTable td.sticky {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    left: 0;
    background-color: #ffffff; /* Ensure it covers content behind it */
    z-index: 10; /* Ensure it's above other cells but below sticky header */
    box-shadow: 2px 0 3px rgba(0,0,0,0.05); /* Subtle shadow on the right edge */
    width: 200px;       /* Set a default width */
    min-width: 200px;   /* Prevent it from being squished */
}

/* Ensure the sticky header's first cell is also sticky */
#comparisonTable thead th.sticky {
    z-index: 21; /* Above both sticky body cells and other header cells */
}

/* Map specific styles */
#worldMapContainer {
    overflow: hidden; /* Important for map container */
    position: relative;
    background-color: #000000; /* Sets a black background to match the theme */
}

#worldMapContainer canvas {
  touch-action: manipulation;   /* prevents pinch-to-zoom/scroll from stealing taps */
  pointer-events: auto;         /* ensure the canvas is the target for touch events */
}

/* The main panel container */
#mapSummaryPanel {
    position: absolute; /* The key change for in-element centering */
    z-index: 1000;
    width: 700px;
    max-width: 90vw;
    height: 75vh;
    max-height: 750px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    pointer-events: none;
}

#mapSummaryPanel:not(.hidden) {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1); /* Animates to full size in the center */
    pointer-events: auto;
}

/* The panel's header area */
#mapSummaryHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

/* The title inside the header */
#mapSummaryCountry {
    font-size: 1.25rem; /* text-xl */
    font-weight: 700;
    color: #1e293b;
}

/* The main scrollable content area */
#mapSummaryContentContainer {
    overflow-y: auto;
    flex-grow: 1; 
}

/* This is the missing base style for the close button */
.map-panel-close-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f1f5f9;
    color: #64748b;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.map-panel-close-btn:hover {
    background-color: #e2e8f0;
    color: #1e293b;
    transform: rotate(90deg) scale(1.05);
}

.map-panel-close-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

#mapSummaryPanel.hidden {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none; /* Can't interact with it when hidden */
}



/* General page-view adjustments if needed */
#regulatoryAnalysisPage {
    min-height: calc(100vh - 80px); /* Adjust based on your header/footer height */
    display: none; /* Hidden by default, managed by viewManager.js */
}
#regulatoryAnalysisPage.active {
    display: block;
}


/* Comparison Matrix Modal Styles */
#comparisonModalOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(15, 23, 42, 0.6); /* slate-900 with 60% opacity */
    backdrop-filter: blur(5px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    transition: opacity 0.3s ease-in-out;
}

/* Hide any library tooltips while the comparison modal is active */
body.comparison-open .tooltip,
body.comparison-open .tippy-box,
body.comparison-open .tippy-tooltip,
body.comparison-open .ant-tooltip,
body.comparison-open .chakra-tooltip,
body.comparison-open .MuiTooltip-popper,
body.comparison-open .mantine-Tooltip-tooltip,
body.comparison-open .rs-tooltip,
body.comparison-open .el-tooltip__popper,
body.comparison-open .g6-tooltip,
body.comparison-open #customTooltip {
  display: none !important;
}

/* --- END: UNIVERSAL TOOLTIP SUPPRESSOR STYLES --- */

.reg-count-header {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    background-color: #e2e8f0;
    color: #475569;
    margin-bottom: 0.75rem;
    cursor: pointer; /* Changed from 'help' */
}

.comparison-tooltip {
    display: none;
    position: absolute;
    background-color: #1e293b;
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.comparison-tooltip .single-column {
    max-width: 400px;
}
.comparison-tooltip .two-column {
    column-count: 2;
    column-gap: 2rem;
    max-width: 600px;
}
.comparison-tooltip .three-column {
    column-count: 3;
    column-gap: 2rem;
    max-width: 800px;
}

.comparison-tooltip ul {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0;
}

.comparison-tooltip li {
    margin-bottom: 0.5rem;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

.comparison-tooltip li:last-child {
    margin-bottom: 0;
}

/* Dark mode styles */
body.dark-mode-active .reg-count-header {
    background-color: #4b5563;
    color: #e2e8f0;
}

#comparisonModalContent {
    background-color: #ffffff;
    border-radius: 1rem;
    padding: 1.5rem 2rem;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 90vw;
    max-height: 90vh; /* ✅ FIXED: Changed height to max-height */
    display: flex;
    flex-direction: column;
    transform: scale(0.98);
    transition: transform 0.3s ease-in-out;
}

#comparisonModalOverlay:not(.hidden) #comparisonModalContent {
    transform: scale(1);
}

#modalComparisonTableContainer {
    overflow: auto; /* This makes the table content scrollable within the modal */
    flex-grow: 1;
}

/* Specific styles for the modal table */
#modalComparisonTable th,
#modalComparisonTable td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb; /* gray-200 */
    text-align: left;
    white-space: normal;
    word-break: break-word;
}

#modalComparisonTable thead th {
    background-color: #f9fafb; /* gray-50 */
    font-weight: 600;
    color: #4b5563; /* gray-700 */
    position: sticky;
    top: 0;
    z-index: 10;
    white-space: nowrap; /* This prevents header text from wrapping */
}

#modalComparisonTable th.sticky,
#modalComparisonTable td.sticky {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    background-color: #ffffff;
    z-index: 5;
    box-shadow: 2px 0 3px rgba(0,0,0,0.05);
    min-width: 250px; /* This gives the column a fixed minimum width */
}

#modalComparisonTable thead th.sticky {
    z-index: 11;
}

#userManagementPage .page-content-wrapper {
    max-width: 1480px; /* or whatever you prefer */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Custom Toggle Switch Styles */
.toggle-checkbox {
    -webkit-appearance: none;
    appearance: none;
    transition: all 0.2s ease-in-out;
    left: -0.1rem; /* Adjust for border */
    border-color: #cbd5e1; /* slate-300 */
}
.toggle-checkbox:checked {
    left: 1.1rem; /* Moves the toggle switch to the right */
    border-color: #afd353;
    right: auto; /* Use auto for left-based positioning */
}
.toggle-checkbox:checked + .toggle-label {
    background-color: #afd353;
}

#darkModeToggleContainer {
    margin-left: auto; /* This pushes the toggle to the far right */
}


/*
  On smaller screens (mobile and most tablets), hide the toggle completely
  because the hover functionality is not used. We use !important to ensure
  this rule always applies on small screens.
*/
@media (max-width: 1023px) {
    #googleSearchToggleContainer {
        display: none !important;
    }
}

/*
  On larger screens (1024px and wider), where a mouse is likely used,
  we define the position for the toggle. The JavaScript showPage() function
  will handle toggling its display between 'none' and 'flex'.
*/
@media (min-width: 1024px) {
    #googleSearchToggleContainer {
        position: absolute;
        top: 2.75rem;
        right: 1.75rem;
        z-index: 30;
    }
}

/* --- START: CSS-driven visibility for the Search on Hover Toggle --- */

/* 1. By default, the toggle is hidden. */
#googleSearchToggleContainer {
    display: none;
}

/* 2. ONLY show the toggle when the body has the 'active-page-tableViewPage' class.
      This rule will only apply on screens wider than 1023px due to the rule below. */
body.active-page-tableViewPage #googleSearchToggleContainer {
    display: flex;
}

/* 3. The existing rule to hide it on small screens MUST remain to override the rule above. */
@media (max-width: 1023px) {
    #googleSearchToggleContainer {
        display: none !important;
    }
}

/* --- END: CSS-driven visibility for the Search on Hover Toggle --- */

/* ===========================================
   DEFINITIVE NEWS FEED STYLES
   =========================================== */

/* --- Layout & Controls --- */

.news-feed-header {
  margin-bottom: 2rem;
  text-align: center;
}

.news-feed-header h2 {
    font-size: 2.25rem;
    font-weight: 800;
    color: #1e293b;
}

.news-feed-header p {
    font-size: 1.125rem;
    color: #64748b;
    margin-top: 0.5rem;
}

.news-controls-container {
  margin-bottom: 1.5rem;
}

.news-controls {
  /* Widen container to fit all controls on one line */
  max-width: 1400px; /* Changed from 1280px */
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background-color: #ffffff;
  padding: 1rem 1.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease-in-out;
}

.controls-left,
.controls-right {
  display: flex;
  align-items: center;
  /* Allow wrapping for smaller screens within this group */
  flex-wrap: wrap; 
  gap: 1.5rem;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.control-group label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #4b5563;
  white-space: nowrap; /* Prevent labels from wrapping */
}

.news-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #111827;
  transition: all 0.2s ease-in-out;
}

.news-select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
}

.news-stats {
  font-size: 0.8rem;
  color: #6b7280;
}


.refresh-button {
  display: inline-flex;
  align-items: center;
  justify-content: center; /* Add this */
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.625rem 1.25rem;
  background-color: #afd353; /* Your new color */
  color: #1e293b; /* A dark text color for contrast */
  border: 1px solid transparent;
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
  cursor: pointer;
  min-width: 140px; /* Add this */
}

.refresh-button:hover:not(:disabled) {
  background-color: #99bb44; /* Darker shade for hover */
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.refresh-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* --- News Card Grid & Items --- */

.news-grid {
  display: grid;
  gap: 1rem;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(5, 1fr);
}

.news-item {
  background: white;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.2s ease-out;
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
}

.news-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.news-item[data-category="Core AI & Tech News"] { border-left: 5px solid #0ea5e9; }
.news-item[data-category="AI Research & Models"] { border-left: 5px solid #2563eb; }
.news-item[data-category="AI Governance & Policy"] { border-left: 5px solid #10b981; }
.news-item[data-category="AI Regulation & Litigation"] { border-left: 5px solid #ef4444; }
.news-item[data-category="AI & Intellectual Property"] { border-left: 5px solid #4f46e5; }
.news-item[data-category="Legal Tech & Innovation"] { border-left: 5px solid #8b5cf6; }
.news-item[data-category="AI Business & Enterprise"] { border-left: 5px solid #f59e0b; }
.news-item[data-category="AI Security & Privacy"] { border-left: 5px solid #f43f5e; }
.news-item[data-category="Custom Scraped Feeds"] { border-left: 5px solid #84cc16; }
.news-item[data-category="General"] { border-left: 5px solid #64748b; }

/* --- News Item Content --- */

.news-item-image-wrapper {
  width: 100%;
  height: 200px;
  background-color: #f3f4f6;
  overflow: hidden;
}

.news-item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-out;
}

.news-item:hover .news-item-image {
  transform: scale(1.05);
}

.news-item-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.news-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.category-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.news-item-title a {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1f2937;
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.15s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-item-title a:hover {
  color: #2563eb;
}

.news-item-snippet {
  color: #4b5563;
  font-size: 0.875rem;
  line-height: 1.6;
  margin-top: 0.75rem;
  margin-bottom: 1.25rem;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-item-footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid #f3f4f6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* --- Responsive & Dark Mode --- */

.refresh-button svg.animate-spin {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* For Tablets: Stack controls into two clean rows */
@media (max-width: 1280px) {
  .news-controls {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  .controls-left, .controls-right {
    justify-content: center;
    width: 100%;
  }
}

/* For Mobile: Stack all controls vertically for easy access */
@media (max-width: 768px) {
  /* --- News Feed Mobile Layout --- */
  .controls-left, .controls-right {
    flex-direction: column;
    align-items: stretch; /* Makes inputs full-width */
  }
  .control-group {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .control-group label {
    margin-bottom: 0.25rem;
  }
  .news-select, .refresh-button {
    width: 100%;
  }
  .controls-right {
    align-items: center; /* Center stats and button */
  }
  .refresh-button {
    width: auto; /* Let button size to its content on mobile */
  }

  /* --- Regulatory Analysis Mobile Layout & Stacking Fix --- */
  #mapSummaryPanel {
    /* Use max-height to prevent it from being too tall, and allow it to shrink */
    height: auto;
    max-height: 85vh;
    /* These flex properties ensure the content area can scroll correctly */
    display: flex;
    flex-direction: column;
  }
  #mapSummaryContentContainer {
    /* This makes only the content area scrollable, keeping the header in place */
    overflow-y: auto;
  }
  
  /* MERGED: Globe container height constraint and stacking order fix */
  #worldMapContainer {
    /* Prevents the map from being taller than the screen on mobile */
    max-height: 100vh;
    max-height: 100dvh; /* More modern unit for mobile viewport height */
    /* Ensure the globe is at the top of the stacking order */
    position: relative;
    z-index: 50;
  }

  /* Ensure the canvas also has the correct stacking order */
  #worldMapContainer canvas {
    position: relative;
    z-index: 50;
  }

  /* Keep the form controls below the globe in the stacking order */
  #jurisdictionSelect,
  #legalAreaSelect,
  label[for="jurisdictionSelect"],
  label[for="legalAreaSelect"] {
    position: relative;
    z-index: 1;
  }
}
@media (max-width: 1700px) { .news-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1200px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .news-stats { display: block; } }
@media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; } .news-controls { flex-direction: column; } }


/* ===========================================
   DEFINITIVE DARK MODE STYLES (Consolidated)
   =========================================== */

/* --- 1. Core & Layout --- */
body.dark-mode-active {
  background-color: #111827 !important;
  color: #d1d5db !important;
}

body.dark-mode-active #mainAppContainer,
body.dark-mode-active #mainAppContent.logged-out::before,
body.dark-mode-active .bg-gradient-to-br.from-white.to-slate-50 {
  background: #1f2937 !important;
}

/* --- 2. General Containers & Panels --- */
body.dark-mode-active .page-content-wrapper, 
body.dark-mode-active .admin-section, 
body.dark-mode-active .chart-container,
body.dark-mode-active #network-visualization-container, 
body.dark-mode-active .ai-query-form-container,
body.dark-mode-active #aiQueryResults, 
body.dark-mode-active #filterGroupsBuilder, 
body.dark-mode-active #viewActionsPanel {
  background-color: #1f2937;
  border-color: #374151;
}

/* --- 3. Typography --- */
body.dark-mode-active h1, 
body.dark-mode-active h2, 
body.dark-mode-active h3, 
body.dark-mode-active h4, 
body.dark-mode-active h5, 
body.dark-mode-active h6, 
body.dark-mode-active .modal-title, 
body.dark-mode-active .form-label {
  color: #f9fafb !important;
}

body.dark-mode-active p, 
body.dark-mode-active span, 
body.dark-mode-active div, 
body.dark-mode-active label, 
body.dark-mode-active .modal-message, 
body.dark-mode-active .text-slate-600, 
body.dark-mode-active .text-gray-600, 
body.dark-mode-active .text-gray-800 {
  color: #d1d5db !important;
}

/* --- 4. Modals & Dropdowns --- */
body.dark-mode-active .modal-content-base, 
body.dark-mode-active #mainMenuPanel, 
body.dark-mode-active #userDropdownMenu, 
body.dark-mode-active #columnToggleDropdown {
  background-color: #1f2937 !important;
  border: 1px solid #4b5563 !important;
}

/* --- 5. Buttons --- */
body.dark-mode-active .action-button, 
body.dark-mode-active #mainMenuBtn, 
body.dark-mode-active #userDropdownBtn, 
body.dark-mode-active #viewActionsToggleBtn, 
body.dark-mode-active #backToRegulatoryTableBtn {
  background-color: #374151 !important;
  color: #e5e7eb !important;
  border-color: #4b5563 !important;
}

body.dark-mode-active .action-button:hover, 
body.dark-mode-active #mainMenuBtn:hover, 
body.dark-mode-active #userDropdownBtn:hover, 
body.dark-mode-active #viewActionsToggleBtn:hover {
  background-color: #4b5563 !important;
}

body.dark-mode-active .pagination-controls button:disabled {
  background-color: #2c3a4b !important;
  color: #64748b !important;
  border-color: #374151 !important;
  opacity: 0.7;
}

/* --- 6. Forms & Inputs --- */
body.dark-mode-active .form-input, 
body.dark-mode-active .form-select, 
body.dark-mode-active .form-multiselect, 
body.dark-mode-active .news-select, 
body.dark-mode-active #globalSearch, 
body.dark-mode-active #rowsPerPageSelect, 
body.dark-mode-active #aiSystemPrompt {
  background-color: #374151;
  border-color: #4b5563;
  color: #f9fafb;
}

body.dark-mode-active .form-input::placeholder {
  color: #9ca3af;
}

/* --- 7. Tables & Data Grids --- */
body.dark-mode-active #tableActionsToolbar {
  background-color: #1f2937;
  border-bottom-color: #4b5563;
}

body.dark-mode-active #mainDataTable th, 
body.dark-mode-active #usersTable th {
  background-color: #374151 !important;
  color: #f9fafb;
  border-color: #4b5563;
}

body.dark-mode-active #mainDataTable tbody.bg-white, 
body.dark-mode-active #usersTable tbody, 
body.dark-mode-active #mainDataTable tr {
  background-color: #1f2937 !important;
}

body.dark-mode-active #mainDataTable td, 
body.dark-mode-active #usersTable td {
  color: #d1d5db;
  border-color: #4b5563;
}

body.dark-mode-active #mainDataTable tr:hover td {
  background-color: #374151 !important;
}

body.dark-mode-active #mainDataTable td[contenteditable="true"]:focus {
  background-color: #4b5563 !important;
}

/* --- 8. News Feed --- */
body.dark-mode-active .news-controls, 
body.dark-mode-active .news-item {
  background-color: #1f2937;
  border-color: #374151;
}

body.dark-mode-active .news-item-title a {
  color: #f9fafb;
}

body.dark-mode-active .news-item-footer, 
body.dark-mode-active .news-item-snippet {
  color: #d1d5db !important;
}

/* --- 9. AI Query Page --- */
body.dark-mode-active #aiQueryPage .service-selector-container, 
body.dark-mode-active #aiQueryPage .service-card, 
body.dark-mode-active #aiQueryPage .result-card,
body.dark-mode-active #aiQueryPage #geminiOptionsContainer, 
body.dark-mode-active #aiQueryPage #imagenOptionsContainer, 
body.dark-mode-active #aiQueryPage #videoOptionsContainer,
body.dark-mode-active #aiQueryPage #veoOptionsContainer, 
body.dark-mode-active #aiQueryPage #klingOptionsContainer, 
body.dark-mode-active #aiQueryPage #seedanceOptionsContainer,
body.dark-mode-active #aiQueryPage #falVeo3OptionsContainer, 
body.dark-mode-active #aiQueryPage #fluxLoraOptionsContainer,
body.dark-mode-active #aiQueryPage #klingI2VProOptionsContainer, 
body.dark-mode-active #aiQueryPage #hailuoOptionsContainer,
body.dark-mode-active #aiQueryPage #wanLoraOptionsContainer, 
body.dark-mode-active #aiQueryPage .tips-table th, 
body.dark-mode-active #aiQueryPage .tips-table td {
  background-color: #374151;
  border-color: #4b5563;
}

body.dark-mode-active #aiQueryPage .service-card.selected {
  background-color: #4f46e5;
  border-color: #818cf8;
}

body.dark-mode-active #aiQueryPage .service-card p, 
body.dark-mode-active #aiQueryPage .result-card p {
  color: #e5e7eb !important;
}

body.dark-mode-active #aiQueryPage .tips-table td:first-child {
  background-color: #451a20;
}

body.dark-mode-active #aiQueryPage .tips-table td:nth-child(2) {
  background-color: #164e32;
}

/* --- 10. Regulatory Analysis Page & Modals --- */
body.dark-mode-active #regulatoryAnalysisPage .lg\:w-1\/3.bg-white {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
}

body.dark-mode-active #chartsModalOverlay .bg-slate-50 {
  background-color: #1f2937;
}

body.dark-mode-active #modalComparisonTable th.bg-slate-100 {
  background-color: #374151 !important;
}

body.dark-mode-active #modalComparisonTable td.sticky.bg-white {
  background-color: #2c3a4b !important;
}

body.dark-mode-active #rowSummaryContent input,
body.dark-mode-active #rowSummaryContent textarea {
  background-color: #374151 !important;
  border-color: #4b5563 !important;
  color: #f9fafb !important;
}

/* --- 11. Network View --- */
body.dark-mode-active #network-visualization-container {
  background-color: #1f2937 !important;
}

body.dark-mode-active #network-visualization-container .bg-white\/90 {
  background-color: rgba(55, 65, 81, 0.9) !important;
  color: #e5e7eb !important;
}

body.dark-mode-active #network-search-input {
  background-color: #374151;
  border-color: #4b5563;
  color: #f9fafb;
}

body.dark-mode-active #network-legend {
  background-color: rgba(30, 41, 59, 0.8) !important;
}

body.dark-mode-active #network-legend .text-slate-600 {
  color: #d1d5db !important;
}

body.dark-mode-active .node-label-div {
  background-color: rgba(55, 65, 81, 0.9);
  color: #f9fafb;
  border-color: rgba(100, 116, 139, 0.5);
}

body.dark-mode-active #network-summary-box {
  background-color: #1f2937;
}

body.dark-mode-active #network-loading-indicator,
body.dark-mode-active #network-progress-indicator {
  background-color: rgba(30, 41, 59, 0.7) !important;
  color: #f9fafb !important;
}

body.dark-mode-active #mainMenuPanel button {
  color: #d1d5db !important;
}

body.dark-mode-active #mainMenuPanel button:hover {
  background-color: #374151;
}

body.dark-mode-active #userDropdownMenu button {
  color: #d1d5db !important;
}

body.dark-mode-active #userDropdownMenu button:hover {
  background-color: #374151;
}

body.dark-mode-active .refresh-button,
body.dark-mode-active .refresh-button span,
body.dark-mode-active .refresh-button svg {
  color: #1e293b !important;
}

body.dark-mode-active #googleSearchModal {
  background-color: #1f2937 !important;
  border: 1px solid #4b5563;
}

body.dark-mode-active .column-filter-controls {
  background-color: #1f2937 !important;
  border-color: #4b5563 !important;
}

body.dark-mode-active #filterGroupsBuilder {
  background-color: #1f2937 !important;
}

body.dark-mode-active #filterGroupsBuilder .bg-slate-50 {
  background-color: #374151 !important;
  border-color: #4b5563 !important;
}

body.dark-mode-active #filterGroupsBuilder .bg-slate-200 {
  background-color: #4b5563 !important;
}

body.dark-mode-active #filterGroupsBuilder .text-blue-600 {
  color: #60a5fa !important;
}

body.dark-mode-active .filter-toggle-btn:hover {
  background-color: #374151 !important;
}

body.dark-mode-active .column-filter-controls .filter-condition-select,
body.dark-mode-active .column-filter-controls .column-filter-input {
  background-color: #374151;
  border-color: #4b5563;
  color: #f9fafb;
}

/* --- 12. Case Analysis Page --- */
body.dark-mode-active #caseAnalysisPage .bg-white {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
}

body.dark-mode-active #caseAnalysisPage .stat-number {
  color: #c4b5fd !important;
}

body.dark-mode-active #caseAnalysisPage .bar span {
  color: #f9fafb !important;
}

body.dark-mode-active #caseAnalysisPage .jurisdiction-list-item {
  border-color: #374151;
}

/* --- 14. Regulatory Analysis Modals & Charts --- */
body.dark-mode-active #comparisonModalContent,
body.dark-mode-active #sentimentModalOverlay .modal-content-base,
body.dark-mode-active .modal-content-charts {
  background-color: #1f2937 !important;
}

body.dark-mode-active #sentimentModalOverlay .even\:bg-slate-50,
body.dark-mode-active #modalComparisonTable .even\:bg-slate-50 {
  background-color: #2c3a4b !important;
}

body.dark-mode-active #sentimentModalOverlay thead,
body.dark-mode-active #modalComparisonTable thead th,
body.dark-mode-active #modalComparisonTableHeader .bg-slate-100 {
  background-color: #374151 !important;
  border-color: #4b5563 !important;
}

body.dark-mode-active #modalComparisonTable td.sticky.bg-white {
  background-color: #2c3a4b !important;
}

body.dark-mode-active #sentimentDetailBackBtn {
  background-color: #374151 !important;
  color: #e5e7eb !important;
}

body.dark-mode-active .theme-tag,
body.dark-mode-active .activity-trend-tag {
  background-color: #374151 !important;
  color: #d1d5db !important;
}

body.dark-mode-active #chartsModalOverlay .bg-slate-50 {
  background-color: #1f2937 !important;
}

body.dark-mode-active .js-plotly-plot .plotly text {
  fill: #d1d5db !important;
}

body.dark-mode-active .legendtext {
  fill: #d1d5db !important;
}

body.dark-mode-active .sentiment-tag {
  background-color: #374151;
  color: #d1d5db;
}

body.dark-mode-active #sentimentModalOverlay .text-slate-700 {
  color: #e5e7eb !important;
}

body.dark-mode-active .legend-item {
  color: #d1d5db !important;
}

body.dark-mode-active #modalComparisonTable td {
  color: #d1d5db !important;
}

body.dark-mode-active #logoutBtnNew {
  background-color: #7f1d1d !important;
  color: #fecaca !important;
}

body.dark-mode-active .chart-container svg g text {
  fill: #f9fafb !important;
}

/* --- 15. Globe Summary Panel --- */
body.dark-mode-active #mapSummaryPanel {
  background-color: rgba(30, 41, 59, 0.95) !important;
  border-color: #374151 !important;
}

body.dark-mode-active #mapSummaryPanel #mapSummaryCountry {
  color: #f1f5f9 !important;
}

body.dark-mode-active #mapSummaryPanel .map-panel-close-btn {
  background-color: #374151 !important;
  color: #9ca3af !important;
}

body.dark-mode-active #mapSummaryPanel .map-panel-close-btn:hover {
  background-color: #4b5563 !important;
  color: #f9fafb !important;
}

body.dark-mode-active #mapSummaryPanel .popup-main-summary,
body.dark-mode-active #mapSummaryPanel .popup-reg-summary {
  color: #cbd5e1 !important;
}

body.dark-mode-active #mapSummaryPanel .popup-section-header,
body.dark-mode-active #mapSummaryPanel .popup-reg-title,
body.dark-mode-active #mapSummaryPanel .popup-detail-label {
  color: #e2e8f0 !important;
}

body.dark-mode-active #mapSummaryPanel .theme-tag,
body.dark-mode-active #mapSummaryPanel .activity-trend-tag,
body.dark-mode-active #mapSummaryPanel .sentiment-tag {
  background-color: #374151 !important;
  color: #d1d5db !important;
}

body.dark-mode-active #mapSummaryPanel .popup-reg-item {
  border-top-color: #374151 !important;
}

body.dark-mode-active #rowSummaryContent strong {
  color: #e2e8f0 !important;
}


/* Feedback Button */
body.dark-mode-active #feedbackBtn {
  background-color: #374151 !important; /* slate-700 */
  color: #e5e7eb !important; /* gray-200 */
  border-color: #4b5563 !important; /* slate-600 */
}
body.dark-mode-active #feedbackBtn:hover {
  background-color: #4b5563 !important; /* slate-600 */
}

/* Precedent Summaries (Home & Litigation Analysis) */
body.dark-mode-active #caseGlobalSummaryContainer .bg-slate-50,
body.dark-mode-active #litigationCardContent .bg-slate-50 {
    background-color: #374151; /* slate-700 */
    border-color: #4b5563; /* slate-600 */
}
body.dark-mode-active #caseGlobalSummaryContainer .text-sky-600,
body.dark-mode-active #litigationCardContent .text-sky-600 {
    color: #7dd3fc; /* sky-300 */
}

/* Interactive Map (Litigation Analysis) */
body.dark-mode-active #cases-map {
    background-color: #111827; /* A very dark grey for the map base */
}
body.dark-mode-active .leaflet-tooltip.case-map-label {
    background-color: rgba(30, 41, 59, 0.85); /* slate-800 with opacity */
    border-color: #4b5563; /* slate-600 */
    color: #f3f4f6; /* gray-100 */
}
body.dark-mode-active .custom-map-icon .map-marker {
    border-color: #1f2937; /* slate-800, to blend with dark map */
}

body.dark-mode-active #sentimentModalContent ul li strong {
    color: #e5e7eb; /* gray-200, makes the bolded titles stand out from the body text */
}

body.dark-mode-active #mapSummaryPanel .bg-amber-50 {
    background-color: #374151 !important; /* slate-700 */
    border-color: #92400e !important;     /* A darker amber for the border */
}

body.dark-mode-active #mapSummaryPanel .text-amber-800 {
    color: #fcd34d !important; /* amber-300 */
}

body.dark-mode-active #mapSummaryPanel .text-amber-700 {
    color: #fde68a !important; /* amber-200 */
}

/* ===========================================
   DARK MODE FOR SUMMARY CARD
   =========================================== */

/* --- Main Card Background --- */
body.dark-mode-active #summaryCard {
    background-color: #1f2937; /* slate-800 */
    border: 1px solid #374151; /* slate-700 */
}

/* --- Title, List, and Link Text --- */
body.dark-mode-active .summary-card-title {
    color: #f1f5f9;
    border-bottom-color: #374151;
}

body.dark-mode-active .summary-list li {
    color: #d1d5db;
}

body.dark-mode-active .summary-list li a {
    border-bottom-color: #4b5563;
}

body.dark-mode-active .summary-list li a:hover {
    color: #a78bfa;
    border-bottom-color: #a78bfa;
}

/* --- Custom Scrollbar --- */
body.dark-mode-active #summaryCardContent::-webkit-scrollbar-track {
    background: #374151; /* slate-700 */
}
body.dark-mode-active #summaryCardContent::-webkit-scrollbar-thumb {
    background: #4b5563; /* slate-600 */
}
body.dark-mode-active #summaryCardContent::-webkit-scrollbar-thumb:hover {
    background: #64748b; /* slate-500 */
}



.news-feed-wrapper {
  /* Default (mobile) padding. Top padding is now 0. */
  padding: 0 1rem 2rem;
  transition: padding 0.2s ease-out;
}

/* For tablet sizes and larger, add more horizontal padding. */
@media (min-width: 768px) {
  .news-feed-wrapper {
    /* Kept the standard padding for medium screens. Top padding is 0. */
    padding: 0 1.5rem 2rem;
  }
  #logoLink img { height: 5rem; } 
}

@media (min-width: 1025px) {
  .news-feed-wrapper {
    padding: 0 2rem 2rem; /* Adjusted from 'em' to 'rem' for consistency. Top padding is 0. */
  }
}

/* For very wide screens (5-column layout), add the new, larger padding. */
@media (min-width: 1501px) {
  .news-feed-wrapper {
    padding: 0 3rem 2rem; /* Top padding is 0. */
  }
}

@media (min-width: 1801px) {
  .news-feed-wrapper {
    padding: 0 10rem 2rem; /* Top padding is 0. */
  }
}

/* for the regulatory analysis popup */

.popup-main-summary {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-top: 0.5rem;
    color: #475569;
}

.popup-details-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1rem;
    align-items: center;
    margin-top: 1rem;
    font-size: 0.85rem;
}

.popup-detail-label {
    font-weight: 600;
    color: #334155;
    font-size: 0.85rem; /* This makes it consistent with the other labels */
}

.popup-section-header {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.popup-reg-item {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e2e8f0;
}

.popup-reg-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: #334155;
}

.popup-reg-summary {
    font-size: 0.8rem;
    color: #64748b;
}

.sentiment-tag {
  display: inline-block;
  background-color: #e2e8f0; /* slate-200 */
  color: #475569; /* slate-600 */
  padding: 0.25rem 0.75rem;
  margin: 0.25rem;
  border-radius: 9999px; /* rounded-full for a pill shape */
  font-size: 0.75rem; /* text-xs */
  font-weight: 600; /* semibold */
  line-height: 1.2;
  justify-self: start; /* Add this line */
}

.sentiment-tag.contentious {
    background-color: #eff6ff; /* blue-50 */
    color: #1d4ed8; /* blue-700 */
}

body.dark-mode-active .sentiment-tag.contentious {
    background-color: #1e3a8a; /* A darker blue for the background */
    color: #dbeafe; /* A lighter blue for the text */
}

.activity-trend-tag {
  display: inline-block;
  background-color: #e2e8f0; /* slate-200 */
  color: #475569; /* slate-600 */
  padding: 0.25rem 0.75rem;
  margin: 0.25rem;
  border-radius: 9999px; /* rounded-full for a pill shape */
  font-size: 0.75rem; /* text-xs */
  font-weight: 600; /* semibold */
  line-height: 1.2;
  justify-self: start; /* Prevents the tag from stretching */
}

.theme-tag {
  display: inline-block;
  background-color: #e2e8f0; /* slate-200 */
  color: #475569; /* slate-600 */
  padding: 0.25rem 0.75rem;
  margin: 0.25rem;
  border-radius: 9999px; /* rounded-full for a pill shape */
  font-size: 0.75rem; /* text-xs */
  font-weight: 600; /* semibold */
  line-height: 1.2;
  font-family: 'Inter', sans-serif; /* Ensures consistent font */
}

#regulatoryAnalysisPage #mapSummaryPanel {
    width: 700px !important; /* Wider for better readability and !important to ensure it applies */
}

.popup-details-grid, .popup-reg-item, .popup-main-summary, .popup-section-header {
  font-family: 'Inter', sans-serif; /* Ensures consistent font family */
}

/* This is the missing style for the theme tags */
.theme-tag {
  font-family: 'Inter', sans-serif;
}


/* --- General Card Styling (covers all cards on the page) --- */
body.dark-mode-active #homePage .bg-white {
    background-color: #1f2937; /* slate-800 */
    border-color: #374151; /* slate-700 */
}

/* --- Skeleton Loaders --- */
body.dark-mode-active #homePage .bg-slate-200 {
    background-color: #374151; /* slate-700 */
}

/* --- Text elements --- */
body.dark-mode-active #homePage h3 {
    color: #f1f5f9; /* slate-100 */
}

body.dark-mode-active #homePage .text-slate-500 {
    color: #94a3b8; /* slate-400 */
}

body.dark-mode-active #homePage .text-slate-600 {
    color: #d1d5db; /* slate-300 */
}

body.dark-mode-active #homePage .text-slate-400 {
    color: #9ca3af; /* slate-400 */
}


/* ===========================================
   INTERACTIVE CHART STYLES
   =========================================== */

/* --- Tooltip --- */
.chart-tooltip {
    position: absolute;
    background-color: rgba(30, 41, 59, 0.9); /* slate-800 */
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.875rem;
    pointer-events: none; /* The tooltip should not interfere with mouse events */
    transition: opacity 0.2s ease-in-out;
    z-index: 1100; /* Ensure it's above modal content */
}

/* --- Sentiment Chart Legend --- */
#sentimentDonutChartLegend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
}


.modal-content-charts {
    background-color: #ffffff;
    border-radius: 1rem;
    padding: 1.5rem 2rem;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
    width: 96vw;
    max-width: 1800px;
    height: 96vh;
    display: flex;
    flex-direction: column;
}



#solar-system-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
#solar-system-modal iframe {
    width: 95%;
    height: 95%;
    border-radius: 8px;
    border: 2px solid #555;
}
#solar-system-modal .close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 30px;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
}


/* --- Custom Header Controls Layout --- */

/* Default Desktop Layout */
#header-controls-wrapper {
    display: flex;
    align-items: center;
}

#darkModeToggleContainer {
    margin-right: 0.5rem; /* Space between toggle and icons on desktop */
}

/* Mobile Layout Overrides */
@media (max-width: 767px) {

    header {
      align-items: flex-start !important;     /* overrides items-center from the HTML */
      padding-top: 0.75rem !important;        /* optional: trims the extra top padding from pt-6 */
    }

    #header-controls-wrapper {
        flex-direction: column; /* Stack items vertically */
        align-items: flex-end;  /* Align the whole group to the right */
    }

    #logoLink img {
      height: 2.25rem;      /* ~36px */
      width: auto;
      max-width: 50vw;      /* avoid crowding the header */
    }

    #header-icon-group {
        order: 1; /* Visually positions the icons FIRST */
        margin-bottom: 0.5rem; /* Adds space below the icons */
    }

    #darkModeToggleContainer {
        order: 2; /* Visually positions the toggle SECOND (below icons) */
        margin-right: 0; /* Removes desktop margin */
        justify-content: flex-end; /* This pulls the text and switch together */
    }
}

body.active-page-chartsPage .page-content-wrapper {
    max-width: 1800px;
}

/* --- Chart Legend Styling --- */
.chart-legend {
    /* 1. Center the entire legend block */
    display: block;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.25rem;

    /* 2. Create a responsive multi-column grid */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem 1.5rem;

    /* 3. Force all content within the grid to be left-aligned */
    justify-items: start;
    text-align: left;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; /* Spacing between color box and text */
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    color: #475569; /* slate-600 */
}

.legend-color-box {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex-shrink: 0; /* Prevents color box from shrinking */
}
.chart-legend:empty {
    display: none;
}

#statusByJurisdictionHeatmapWrapper {
  display: block;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 20px; /* space so scrollbar won't overlap chart */
}

/* Bulletproof reset for chart SVG sizing (avoid icon rules leaking in) */
#statusByJurisdictionHeatmapWrapper svg,
#statusByJurisdictionHeatmapLegend svg,
.chart-container svg {
  width: auto !important;
  height: auto !important;
  max-width: none; /* allow overflow for scroll */
}

/* Center + responsive gradient legend for the heatmap */
#statusByJurisdictionHeatmapLegend {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 1rem;
}

#statusByJurisdictionHeatmapLegend svg {
  max-width: 100%;
  height: auto;
}

.status-tag {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    text-align: center;
    white-space: nowrap;
}

.status-tag, .binding-tag {
  display: inline-block;
  background-color: #e2e8f0; /* slate-200 */
  color: #475569; /* slate-600 */
  padding: 0.25rem 0.75rem;
  margin: 0.25rem;
  border-radius: 9999px; /* rounded-full for a pill shape */
  font-size: 0.75rem; /* text-xs */
  font-weight: 600; /* semibold */
  line-height: 1.2;
  justify-self: start; /* Prevents the tag from stretching */
  white-space: nowrap;
}

/* Specific Status Colors */
.status-in-effect {
    background-color: #dcfce7; /* Green 100 */
    color: #166534; /* Green 800 */
}

.status-proposed-ongoing {
    background-color: #dbeafe; /* Blue 100 */
    color: #1e40af; /* Blue 800 */
}

.status-repealed {
    background-color: #fee2e2; /* Red 100 */
    color: #991b1b; /* Red 800 */
}

.status-proposed-rejected {
    background-color: #f3f4f6; /* Gray 100 */
    color: #374151; /* Gray 700 */
}
/* Binding Tag Style */
.binding-tag {
    background-color: #e0e7ff; /* indigo-100 */
    color: #3730a3; /* indigo-800 */
}

/* Dark Mode Adjustments for Status & Binding Tags */
body.dark-mode-active .status-tag { 
    background-color: #374151; /* Default fallback */
    color: #d1d5db; 
}

/* Matches "In Effect" */
body.dark-mode-active .status-in-effect { 
    background-color: #14532d; /* green-900 */
    color: #86efac; /* green-300 */
}

/* Matches "Proposed (Ongoing)" */
body.dark-mode-active .status-proposed-ongoing { 
    background-color: #1e3a8a; /* blue-900 */
    color: #93c5fd; /* blue-300 */
}

/* Matches "Repealed" */
body.dark-mode-active .status-repealed { 
    background-color: #7f1d1d; /* red-900 */
    color: #fca5a5; /* red-300 */
}

/* Matches "Proposed (Rejected)" */
body.dark-mode-active .status-proposed-rejected { 
    background-color: #374151; /* slate-700 */
    color: #9ca3af; /* slate-400 */
}

/* Matches Binding Tag */
body.dark-mode-active .binding-tag { 
    background-color: #3730a3; /* indigo-800 */
    color: #e0e7ff; /* indigo-100 */
}

/* ===========================================
   CASE ANALYSIS SNAPSHOT STYLES
   =========================================== */

.stat-card {
  background-color: #f8fafc; /* slate-50 */
  border-radius: 0.75rem; /* rounded-xl */
  padding: 1rem;
  text-align: center;
  border: 1px solid #e2e8f0; /* slate-200 */
}

.stat-number {
  display: block;
  font-size: 2.25rem; /* text-4xl */
  font-weight: 800; /* font-extrabold */
  color: #8b5cf6; /* purple-500 */
  line-height: 1;
}

.stat-label {
  display: block;
  font-size: 0.875rem; /* text-sm */
  font-weight: 500;
  color: #64748b; /* slate-500 */
  margin-top: 0.25rem;
}

.bar-chart-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bar-label {
  font-size: 0.875rem;
  color: #475569; /* slate-600 */
  width: 40%;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-wrapper {
  flex-grow: 1;
  background-color: #e2e8f0; /* slate-200 */
  border-radius: 9999px;
  height: 24px;
}

.bar {
  background-color: #a78bfa; /* violet-400 */
  height: 100%;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0.5rem;
  transition: width 0.5s ease-out;
}

.bar span {
  font-size: 0.75rem;
  font-weight: 600;
  color: #1e293b; /* slate-800 */
}

/* Dark Mode Adjustments */
body.dark-mode-active .stat-card {
  background-color: #374151; /* slate-700 */
  border-color: #4b5563;
}

body.dark-mode-active .stat-label {
  color: #9ca3af; /* slate-400 */
}

body.dark-mode-active .bar-label {
  color: #d1d5db; /* slate-300 */
}

body.dark-mode-active .bar-wrapper {
  background-color: #4b5563; /* slate-600 */
}


/* This rule applies the correct cursor */
.jurisdiction-list-item {
  cursor: pointer;
}

/* This rule adds the hover highlight effect */
.jurisdiction-list-item:hover {
  background-color: #f1f5f9; /* slate-100 */
}

/* This rule ensures the active item stays highlighted */
.jurisdiction-list-item.active {
  background-color: #e2e8f0; /* slate-200 */
  border-color: #cbd5e1; /* slate-300 */
  font-weight: 600;
}

/* Dark Mode Adjustments */
body.dark-mode-active .jurisdiction-list-item:hover {
  background-color: #374151; /* slate-700 */
}

body.dark-mode-active .jurisdiction-list-item.active {
  background-color: #4b5563; /* slate-600 */
  border-color: #64748b; /* slate-500 */
}

.form-multiselect:hover {
    border-color: #60a5fa; /* blue-400 */
}

.velocity-index-tag {
  display: inline-block;
  background-color: #ede9fe; /* purple-100 */
  color: #5b21b6; /* purple-800 */
  padding: 0.25rem 0.75rem;
  margin: 0.25rem;
  border-radius: 9999px; /* rounded-full for a pill shape */
  font-size: 0.75rem; /* text-xs */
  font-weight: 600; /* semibold */
  line-height: 1.2;
  justify-self: start; /* Prevents the tag from stretching */
  white-space: nowrap;
}

/* Dark Mode Adjustment for Velocity Index Tag */
body.dark-mode-active .velocity-index-tag {
    background-color: #5b21b6; /* purple-800 */
    color: #ede9fe; /* purple-100 */
}

.popup-list-item {
  position: relative;
  padding-left: 1.25rem; /* Space for the icon */
  font-size: 0.85rem;
  color: #475569; /* slate-600 */
}

.popup-list-item::before {
  content: '✓'; /* Checkmark icon */
  position: absolute;
  left: 0;
  top: 1px;
  color: #22c55e; /* green-500 */
  font-weight: bold;
}

body.dark-mode-active .popup-list-item {
  color: #d1d5db; /* slate-300 */
}

#mapSummaryCloseBtn {
  /* This ensures the button is on top of all other panel content */
  z-index: 1001; 
}

.case-map-label-icon {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(2px);
    border: 1px solid #cbd5e1;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    font-size: 11px;
    font-weight: 600;
    color: #1e293b;
}

/* This ensures the labels are also styled correctly in dark mode. */
body.dark-mode-active .case-map-label-icon {
    background-color: rgba(30, 41, 59, 0.85);
    border-color: #4b5563;
    color: #f3f4f6;
}

.leaflet-tile {
    /* Applying a transparent outline forces the browser's rendering engine
       to snap the tiles together more accurately, eliminating the 1px gaps. */
    outline: 1px solid transparent;
}

/* --- Tooltip --- */
#customTooltip {
    position: absolute;
    z-index: 9999;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b; /* CORRECTED: Dark text for light mode */
    background-color: #f8fafc; /* CORRECTED: Light background for light mode */
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0; /* Added a subtle border */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    max-width: 280px;
    pointer-events: none;
    line-height: 1.5;
    white-space: normal;
}

/* Dark Mode adjustment for the tooltip */
body.dark-mode-active #customTooltip {
    background-color: #1e293b; /* CORRECTED: Dark background for dark mode */
    color: #f1f5f9; /* CORRECTED: Light text for dark mode */
    border-color: #4b5563; /* Added a matching border for dark mode */
}

/* ===========================================
   HOME PAGE SUMMARY CARD STYLES
   =========================================== */


#newsHeadlinesContent::-webkit-scrollbar,
#summaryCardContent::-webkit-scrollbar,
#executiveSummaryCardContent::-webkit-scrollbar,
#thirtyDaySummaryCardContent::-webkit-scrollbar {
  width: 8px;
}

#newsHeadlinesContent::-webkit-scrollbar-thumb,
#summaryCardContent::-webkit-scrollbar-thumb,
#executiveSummaryCardContent::-webkit-scrollbar-thumb,
#thirtyDaySummaryCardContent::-webkit-scrollbar-thumb {
  background-color: rgba(120, 144, 156, 0.6); /* same blue-grey */
  border-radius: 4px;
}

#executiveSummaryCardContent {
  max-height: 40vh;
  overflow-y: auto;
  padding-right: 1rem; /* room for the scrollbar */
}

/* 2) Make sure the inner flex wrappers are allowed to shrink */
#summaryCard > div,
#executiveSummaryCard > div,
#thirtyDaySummaryCard > div {
  min-height: 0;
}


/* Style for the main title (the date) */
.summary-card-title {
    display: block;
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    color: #1e293b; /* slate-800 */
    line-height: 1.2;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e2e8f0; /* slate-200 */
}

/* --- NEW: Scrollable Content Area --- */
#summaryCardContent {
    max-height: 40vh; /* 40% of the viewport's height */
    overflow-y: auto; /* Adds a scrollbar only when needed */
    padding-right: 1rem; /* Space for the scrollbar */
}

/* Container for the summary bullet points */
.summary-list {
    list-style: none;
    padding-left: 0;
    margin-top: 1.5rem;
}

/* Apply margin between list items */
.summary-list > li + li {
    margin-top: 1rem;
}

/* Custom styling for each bullet point */
.summary-list li {
    font-size: 1rem; /* text-base */
    color: #475569; /* slate-600 */
    line-height: 1.6;
    padding-left: 2rem; /* Make space for the custom icon */
    position: relative;
}

/* Custom icon for each list item */
.summary-list li::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238b5cf6'%3E%3Cpath fill-rule='evenodd' d='M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z' clip-rule='evenodd' /%3E%3C/svg%3E");
    position: absolute;
    left: 0;
    top: 5px;
    width: 1.2em;
    height: 1.2em;
}

/* Styling for the hyperlinks */
.summary-list li a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    border-bottom: 1px solid #d1d5db; /* A subtle underline */
}

.summary-list li a:hover {
    color: #4f46e5;
    border-bottom-color: #4f46e5;
}

/* --- NEW: Custom Scrollbar --- */
#summaryCardContent::-webkit-scrollbar {
    width: 8px;
}
#summaryCardContent::-webkit-scrollbar-track {
    background: #f1f5f9; /* slate-100 */
    border-radius: 10px;
}
#summaryCardContent::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* slate-300 */
    border-radius: 10px;
}
#summaryCardContent::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; /* slate-400 */
}


#regulatoryAnalysisPage > header {
    position: relative;
    z-index: 30; 
}

.header-controls-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}


#backToRegulatoryTableBtn {
    margin-left: auto;
}

/* 4. Ensure the "Back" button stays on the right. */
#backToRegulatoryTableBtn {
    margin-left: auto; /* Pushes the button to the far right of its container */
}

#industrySelector { min-width: 220px; }

#caseAnalysisPage > header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* dropdown left, button right */
  width: 100%;
}

#caseAnalysisPage > header > div:first-child {
  margin-right: auto;            /* ensures the left group hugs the left edge */
}

#caseAnalysisPage #industrySelector {
  display: inline-block;         /* make sure it actually shows */
  min-width: 220px;              /* matches your existing rule */
}


/* Force industry dropdown visibility */
#regulatoryIndustrySelect {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 250px !important;
    height: 40px !important;
}

#regulatoryIndustrySelect option {
    padding: 8px;
    background-color: white;
    color: #334155;
}

#regulatoryIndustrySelect:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Dark mode support */
body.dark-mode-active #regulatoryIndustrySelect {
    background-color: #374151 !important;
    color: #f9fafb !important;
    border-color: #4b5563 !important;
}

body.dark-mode-active #regulatoryIndustrySelect option {
    background-color: #374151;
    color: #f9fafb;
}

#globalSummaryContainer {
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  /* Firefox: show a visible, thin scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #f1f5f9;
}

/* WebKit */
#globalSummaryContainer::-webkit-scrollbar{ width:8px; }
#globalSummaryContainer::-webkit-scrollbar-track{ background:#f1f5f9; border-radius:10px; }
#globalSummaryContainer::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:10px; }
#globalSummaryContainer::-webkit-scrollbar-thumb:hover{ background:#94a3b8; }

.global-section-header {
    font-size: 1.125rem;    /* text-lg - Makes the text larger */
    font-weight: 700;       /* font-bold - Makes the text bold */
    margin-top: 1.5rem;     /* mt-6 - Adds space above the header */
    color: #1e293b;         /* slate-800 */
    padding-bottom: 0.5rem; /* pb-2 */
    border-bottom: 1px solid #e2e8f0; /* slate-200 */
    margin-bottom: 0.75rem; /* mb-3 */
}

/* --- Analysis Tools Buttons --- */

.analysis-buttons-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1rem;
}

.analysis-buttons-container button {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.85rem;
  padding: 0.5rem 0.8rem;
  border-radius: 0.5rem;
  border: 1px solid #cbd5e1;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
}

/* --- Softer, Modern Color Palette --- */

/* View Sentiment Button */
#viewSentimentBtn {
  background-color: #f1f5f9; /* slate-100 */
  color: #334155; /* slate-700 */
  border: 1px solid #cbd5e1; /* slate-300 */
}
#viewSentimentBtn:hover {
  background-color: #e2e8f0; /* slate-200 */
  border-color: #94a3b8; /* slate-400 */
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* View Charts Button */
#regulatoryAnalysisPage #viewChartsBtn {
  background-color: #f5f3ff; /* violet-50 */
  color: #6d28d9; /* violet-700 */
  border: 1px solid #ddd6fe; /* violet-200 */
}
#regulatoryAnalysisPage #viewChartsBtn:hover {
  background-color: #ede9fe; /* violet-100 */
  border-color: #c4b5fd; /* violet-300 */
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* Build Comparison Button */
#buildComparisonBtn {
  background-color: #eff6ff; /* blue-50 */
  color: #1d4ed8; /* blue-700 */
  border: 1px solid #dbeafe; /* blue-200 */
}
#buildComparisonBtn:hover {
  background-color: #dbeafe; /* blue-200 */
  border-color: #bfdbfe; /* blue-300 */
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* --- Dark Mode Styles --- */

body.dark-mode-active #viewSentimentBtn {
    background-color: #374151;
    color: #e5e7eb;
    border-color: #4b5563;
}
body.dark-mode-active #viewSentimentBtn:hover {
    background-color: #4b5563;
}

body.dark-mode-active #regulatoryAnalysisPage #viewChartsBtn {
    background-color: #4c1d95;
    color: #ddd6fe;
    border-color: #6d28d9;
}
body.dark-mode-active #regulatoryAnalysisPage #viewChartsBtn:hover {
    background-color: #5b21b6;
}

body.dark-mode-active #buildComparisonBtn {
    background-color: #1e3a8a;
    color: #dbeafe;
    border-color: #2563eb;
}
body.dark-mode-active #buildComparisonBtn:hover {
    background-color: #1d4ed8;
}

/* Dark Mode for Global Summary Pane */
body.dark-mode-active #globalSummaryContainer .bg-white {
    background-color: #1f2937;
    border-color: #374151;
}
body.dark-mode-active #globalSummaryContainer h3,
body.dark-mode-active #globalSummaryContainer .global-section-header {
    color: #f1f5f9;
    border-bottom-color: #374151;
}
body.dark-mode-active #globalSummaryContainer p,
body.dark-mode-active #globalSummaryContainer .text-slate-500,
body.dark-mode-active #globalSummaryContainer .text-slate-600 {
    color: #d1d5db !important;
}
body.dark-mode-active #globalSummaryContainer button[data-regulation-name] {
    color: #93c5fd;
}
body.dark-mode-active #globalSummaryContainer .bg-slate-200 {
    background-color: #4b5563;
    color: #f1f5f9;
}
body.dark-mode-active #globalSummaryContainer .border-slate-300 {
    border-color: #4b5563;
}

.dark .header-controls-grid {
  background-color: #0f172a; /* slate-900 */
}

.dark .industry-controls label {
  color: #cbd5e1; /* slate-300 */
}

.dark #regulatoryIndustrySelect {
  background-color: #1e293b; /* slate-800 */
  border-color: #475569;     /* slate-600 */
  color: #f1f5f9;            /* slate-100 */
}

.dark #regulatoryIndustrySelect option {
  background-color: #1e293b;
  color: #f1f5f9;
}

.dark #backToRegulatoryTableBtn {
  background-color: #1e293b; /* slate-800 */
  border-color: #475569;     /* slate-600 */
  color: #f1f5f9;            /* slate-100 */
}

.dark #backToRegulatoryTableBtn:hover {
  background-color: #334155; /* slate-700 */
  border-color: #64748b;     /* slate-500 */
  color: #fff;
}

.dark #regulatoryAnalysisPage > header {
  background-color: #0f172a !important; /* slate-900 */
  border-color: #334155 !important;     /* slate-700 */
}

/* make sure inner wrappers don't re-introduce a background */
.dark #regulatoryAnalysisPage .header-controls-grid,
.dark #regulatoryAnalysisPage .grid-item-dropdown,
.dark #regulatoryAnalysisPage .grid-item-buttons {
  background: transparent !important;
}


.header-controls-grid {
  display: flex;
  justify-content: space-between; /* push children apart */
  align-items: center;            /* vertical alignment */
  width: 100%;
}

/* optional: prevent dropdown from stretching */
.grid-item-dropdown {
  flex-shrink: 0;
}

/* optional: keep button area auto-sized */
.grid-item-buttons {
  flex-shrink: 0;
}


/* ===========================================
   30-DAY SUMMARY CARD STYLES
   =========================================== */

/* --- Scrollable Content Area --- */
#thirtyDaySummaryCardContent {
    max-height: 40vh; /* 40% of the viewport's height, matches the daily summary */
    overflow-y: auto; /* Adds a scrollbar only when needed */
    padding-right: 1rem; /* Space for the scrollbar to prevent content overlap */
}

/* --- Custom Scrollbar (Light Mode) --- */
#thirtyDaySummaryCardContent::-webkit-scrollbar {
    width: 8px;
}
#thirtyDaySummaryCardContent::-webkit-scrollbar-track {
    background: #f1f5f9; /* slate-100 */
    border-radius: 10px;
}
#thirtyDaySummaryCardContent::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* slate-300 */
    border-radius: 10px;
}
#thirtyDaySummaryCardContent::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; /* slate-400 */
}

/* --- Custom Scrollbar (Dark Mode) --- */
body.dark-mode-active #thirtyDaySummaryCardContent::-webkit-scrollbar-track {
    background: #374151; /* slate-700 */
}
body.dark-mode-active #thirtyDaySummaryCardContent::-webkit-scrollbar-thumb {
    background: #4b5563; /* slate-600 */
}
body.dark-mode-active #thirtyDaySummaryCardContent::-webkit-scrollbar-thumb:hover {
    background: #64748b; /* slate-500 */
}

#homeLitigationIndustryContainer {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* 12px space */
}

/*
  Fix for the "Global Regulatory Outlook" card.
  This adds the requested whitespace between the industry
  selector and the card's main title below it.
*/
#homeRegulatoryIndustryContainer {
    margin-bottom: 1.5rem; /* 24px of space */
}

.chart-container-wrapper {
    position: relative; /* This is the anchor for the button */
}

.custom-chart-export-btn {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 30; /* Ensures it's above the chart canvas */
    
    /* Appearance */
    background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white */
    backdrop-filter: blur(4px); /* Frosted glass effect */
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    padding: 2px 8px; /* Makes the button shorter */
    cursor: pointer;
    
    /* Icon styling */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #334155;
    
    /* Hover effect */
    opacity: 0.6;
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.custom-chart-export-btn:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.8);
}

.custom-chart-export-btn svg {
    width: 14px;
    height: 14px;
}

.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    background-color: #ef4444; /* red-500 */
    color: white;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    border: 2px solid white;
}

#confirmationModal {
    z-index: 1010;
}

/* ===========================================
   DARK MODE FOR PROFILE ALERT SETTINGS
   =========================================== */

/* --- Pause All Alerts Toggle --- */

/* Sets the border of the toggle circle in the unchecked state */
body.dark-mode-active #alertPauseToggle.toggle-checkbox {
    border-color: #4b5563; /* slate-600 */
}

/* Sets the background of the toggle track in the unchecked state */
body.dark-mode-active #alertPauseToggle + .toggle-label {
    background-color: #4b5563; /* slate-600 */
}

/* --- Alert Criteria Builder --- */

/* Sets the background and border for the criteria builder box */
body.dark-mode-active .alert-settings-card .criteria-builder-container {
    background-color: #374151; /* slate-700 */
    border-color: #4b5563; /* slate-600 */
}

/* Styles the text inside the builder (e.g., "Match", "of the following rules:") */
body.dark-mode-active .alert-settings-card .criteria-builder-container .text-slate-600 {
    color: #d1d5db !important; /* slate-300 */
}

/* Makes the "+ Add Rule" button text a lighter blue for readability */
body.dark-mode-active .alert-settings-card .add-rule-btn {
    color: #93c5fd; /* sky-300 */
}

body.dark-mode-active .alert-settings-card .add-rule-btn:hover {
    color: #e0f2fe; /* sky-100 */
}

body.dark-mode-active #profilePage .bg-slate-50 {
    background-color: #374151; /* slate-700 */
    border-color: #4b5563; /* slate-600 */
}



/* ===========================================
   CASE ANALYSIS INTERACTIVE MAP STYLES
   =========================================== */

#caseDetailContainer {
  min-height: 60vh;        /* ensures the pane isn't 0px tall */
  display: flex;
  flex-direction: column;
}

#cases-map-container {
  height: 60vh;            /* explicit height for the map wrapper */
  min-height: 420px;       /* sensible floor for shorter viewports */
}

#cases-map {
  border-radius: 0.5rem;
  height: 100%;            /* let Leaflet fill the wrapper */
}

.custom-map-icon .map-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #3b82f6; /* blue-500 */
    color: white;
    font-size: 13px;
    font-weight: bold;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.custom-map-icon .map-marker.major-hub {
    background-color: #ef4444; /* red-500 */
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.map-popup { font-family: 'Inter', sans-serif; }
.map-popup-title { font-size: 1rem; font-weight: 600; color: #1e293b; margin-bottom: 0.5rem; border-bottom: 1px solid #e2e8f0; padding-bottom: 0.25rem; }
.map-popup-list { list-style: none; padding: 0; margin: 0; max-height: 150px; overflow-y: auto; }
.map-popup-list li { margin-bottom: 0.25rem; }

.map-popup-link {
    background: none; border: none; color: #0ea5e9;
    text-decoration: none; cursor: pointer; text-align: left;
    padding: 0; font-size: 0.875rem;
}
.map-popup-link:hover { text-decoration: underline; }
.map-popup-more { font-size: 0.75rem; color: #64748b; margin-top: 0.5rem; text-align: right; }



/* ===========================================
   SCROLLABLE SUMMARY PANE FIXES
   =========================================== */

/* --- 1. Reusable Styled Scrollbar Class --- */
.styled-scrollbar-container {
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #f1f5f9; /* thumb track */
}
/* WebKit (Chrome, Safari, Edge) */
.styled-scrollbar-container::-webkit-scrollbar {
    width: 8px;
}
.styled-scrollbar-container::-webkit-scrollbar-track {
    background: #f1f5f9; /* slate-100 */
    border-radius: 10px;
}
.styled-scrollbar-container::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* slate-300 */
    border-radius: 10px;
}
.styled-scrollbar-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; /* slate-400 */
}
/* Dark Mode Scrollbar */
body.dark-mode-active .styled-scrollbar-container {
    scrollbar-color: #4b5563 #374151;
}
body.dark-mode-active .styled-scrollbar-container::-webkit-scrollbar-track {
    background: #374151; /* slate-700 */
}
body.dark-mode-active .styled-scrollbar-container::-webkit-scrollbar-thumb {
    background: #4b5563; /* slate-600 */
}
body.dark-mode-active .styled-scrollbar-container::-webkit-scrollbar-thumb:hover {
    background: #64748b; /* slate-500 */
}


/* --- 2. Fix for Analysis Page (Global Outlook Pane) --- */
#caseGlobalSummaryContainer {
    max-height: 45vh; /* Sets max height to 45% of the viewport height */
    overflow-y: auto;
    padding-right: 0.5rem; /* Adds a little space for the scrollbar */
}


.home-summary-card {
  display: flex;
  flex-direction: column;
  height: 100%; /* Forces the card to take the full height of its grid cell */
  max-height: 48rem;
}

/* This class targets the main content area inside each card */
.home-summary-card .card-content-scrollable {
  flex-grow: 1;
  overflow-y: auto;
  min-height: 0;
  /* ADD THESE LINES to ensure the container can control its children's layout */
  display: flex;
  flex-direction: column;
}

#homeLawFirmsChartContainer {
  min-height: 320px;
}

#backToMapBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10%;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  font-weight: 600;
  background-color: #ffffff;   /* white */
  color: #334155;              /* slate-700 */
  border: 1px solid #cbd5e1;   /* slate-300 */
  border-radius: 0.5rem;       /* rounded-lg */
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* subtle shadow */
  transition: all 0.15s ease;
  cursor: pointer;
}

#backToMapBtn:hover {
  background-color: #f1f5f9;   /* slate-100 */
  color: #1e293b;              /* slate-800 */
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

#homeDefendantChartContainer,
#homePlaintiffChartContainer {
  width: 192px;       /* hard width for the mini donut */
  min-width: 192px;   /* prevent flex from shrinking it smaller */
  height: 192px;      /* match h-48 in the HTML */
  min-height: 192px;
  display: block;
}

#homeDefendantChartContainer svg,
#homePlaintiffChartContainer svg {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}


/* Keep page-level headers under the global menu */
#caseAnalysisPage > header { position: relative; z-index: 10; }

/* Put the global dropdown decisively on top */
#mainMenuPanel { position: absolute; z-index: 10000; }

@media (max-width: 480px) {
  #mainMenuPanel {
    /* Unset the conflicting desktop 'right' alignment */
    right: auto;

    /* Center the panel horizontally relative to the screen */
    left: 50%;
    transform: translateX(-50%);

    /* Set a responsive width, capped at a maximum size */
    width: 92vw;
    max-width: 18rem; /* 288px */

    /* Animate the opening from the top center on mobile */
    transform-origin: top center !important;
  }
}

#regulatoryAnalysisPage > main > div:first-child {
    position: relative;
    z-index: 0;
}


/* --- START: Responsive Fix for Regulatory Analysis Header --- */

/* On screens smaller than 1024px (tablets and mobile) */
@media (max-width: 1023px) {
  .header-controls-grid {
    flex-direction: column; /* Stack items vertically */
    align-items: stretch;   /* Make items take up the full width */
    gap: 1rem;              /* Add space between the stacked items */
  }

  .grid-item-buttons,
  .grid-item-dropdown {
    width: 100%; /* Ensure both containers are full-width */
  }

  #backToRegulatoryTableBtn {
    width: 100%; /* Make the button itself full-width */
    justify-content: center; /* Center the button text and icon */
  }

  #regulatoryIndustrySelect {
    width: 100%; /* Make the dropdown full-width */
  }
}


/* This rule applies only when the Regulatory Analysis page is active.
   It forces the main content area to behave, preventing any single
   component (like the globe or its modals) from breaking the layout. */
body.active-page-regulatoryAnalysisPage #mainAppContent {
    overflow: hidden;
    height: 100%;
}



/* --- END: Responsive Fix --- */


.velocity-highlight {
    border-bottom: 1px dotted #60a5fa; /* A light blue dotted underline */
    cursor: help;
}



/* --- START: Velocity Tooltip Style Fix (config.js version) --- */

#customTooltip .tooltip-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    border-bottom: 1px solid #e2e8f0; /* slate-200 */
    padding-bottom: 5px;
}

#customTooltip .tooltip-description,
#customTooltip .tooltip-list {
    font-size: 0.85rem;
    margin-bottom: 10px;
}

#customTooltip .tooltip-subtitle {
    font-size: 0.9rem;
    margin-bottom: 5px;
}

#customTooltip .tooltip-formula {
    display: block;
    font-family: monospace;
    font-size: 0.8rem;
    margin-bottom: 10px;
    padding: 5px 8px;
    border-radius: 4px;
    /* Light Mode */
    background-color: #eef2ff; /* indigo-50 */
    color: #3730a3; /* indigo-800 */
    border: 1px solid #e0e7ff; /* indigo-100 */
}

#customTooltip .tooltip-list {
    padding-left: 18px;
    margin-top: 5px;
    list-style-type: disc;
}

#customTooltip .tooltip-list li + li {
    margin-top: 5px;
}

/* --- Dark Mode Overrides --- */
body.dark-mode-active #customTooltip .tooltip-title {
    border-bottom-color: #4b5563; /* slate-600 */
}

body.dark-mode-active #customTooltip .tooltip-formula {
    background-color: #3730a3; /* indigo-800 */
    color: #e0e7ff; /* indigo-100 */
    border-color: #4338ca; /* indigo-700 */
}
/* --- END: Velocity Tooltip Style Fix --- */

.home-section-header {
  @apply text-sm font-semibold text-slate-500 uppercase tracking-wider mb-3 border-b pb-2;
}


.recent-items-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recent-item-link {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 66% name, 33% jurisdiction */
    gap: 1rem;
    padding: 0.5rem 0.25rem;
    border-radius: 0.375rem; /* rounded-md */
    transition: background-color 0.2s ease-in-out;
    text-decoration: none;
    color: inherit;
}

.recent-item-link:hover {
    background-color: #f1f5f9; /* slate-100 */
}

.recent-item-name {
    font-weight: 500;
    color: #334155; /* slate-700 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-item-jurisdiction {
    font-size: 0.875rem; /* text-sm */
    color: #64748b; /* slate-500 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left; /* <-- CHANGED FROM 'right' TO 'left' */
}

/* Dark Mode */
body.dark-mode-active .recent-item-link:hover {
    background-color: #374151; /* slate-700 */
}

body.dark-mode-active .recent-item-name {
    color: #f1f5f9; /* slate-100 */
}

body.dark-mode-active .recent-item-jurisdiction {
    color: #94a3b8; /* slate-400 */
}


/* ==========================================================================
   DASHBOARD CARD DARK MODE STYLES
   ========================================================================== */

/* 1. Main Card Background & Border */
/* Overrides the 'bg-white' and 'border-slate-200' on the card container */
body.dark-mode-active .dashboard-card-wrapper > div.bg-white {
    background-color: #1f2937 !important; /* slate-800 */
    border-color: #374151 !important;     /* slate-700 */
}

/* 2. Card Header Area */
/* Overrides 'bg-slate-50' and 'border-slate-100' */
body.dark-mode-active .dashboard-card-wrapper .border-b.bg-slate-50 {
    background-color: #111827 !important; /* slate-900 (Darker header for contrast) */
    border-bottom-color: #374151 !important; /* slate-700 */
}

/* 3. Card Title Text */
/* Overrides 'text-slate-700' */
body.dark-mode-active .dashboard-card-wrapper h3 {
    color: #f3f4f6 !important; /* gray-100 */
}

/* 4. Header Control Buttons (Resize/Drag) */
body.dark-mode-active .dashboard-card-wrapper .controls-area button {
    color: #9ca3af !important; /* gray-400 */
}

/* Button Hover State */
/* Overrides 'hover:bg-blue-50' and 'hover:text-blue-600' */
body.dark-mode-active .dashboard-card-wrapper .controls-area button:hover {
    background-color: #374151 !important; /* slate-700 */
    color: #60a5fa !important; /* blue-400 */
}

/* ===========================================
   DASHBOARD GRID & EDITOR SYSTEM (Complete)
   =========================================== */

/* --- 1. GRID LAYOUT SYSTEM --- */

/* MOBILE (Default: < 768px) */
/* Force a single column layout */
#dashboardGrid {
    display: grid;
    grid-template-columns: 1fr; 
    grid-auto-rows: 50px;
    gap: 1.5rem;
    grid-auto-flow: dense;
    padding-bottom: 2rem;
    min-height: 50vh;
}

/* On mobile, FORCE every card to span the full width */
#dashboardGrid > div {
    grid-column: 1 / -1 !important;
}

/* TABLET / LAPTOP (768px to 1279px) */
/* Introduce the 2-column intermediate state */
@media (min-width: 768px) {
    #dashboardGrid {
        grid-template-columns: repeat(12, 1fr); /* Establish 12-track grid */
    }

    /* Reset the mobile override so specific spans function again */
    #dashboardGrid > div {
        grid-column: auto; 
    }

    /* --- OVERRIDES FOR 2-COLUMN LOOK --- */
    /* Use ID specificity (#dashboardGrid) + !important to guarantee overrides */
    
    /* "Small" (3) and "Standard" (4) cards become 50% width (span 6) */
    #dashboardGrid .col-span-3,
    #dashboardGrid .col-span-4,
    #dashboardGrid .col-span-5,
    #dashboardGrid .col-span-6 {
        grid-column: span 6 !important; /* Forces 2 items per row */
    }

    /* "Large" (7+) cards push to full width to avoid awkward gaps */
    #dashboardGrid .col-span-7,
    #dashboardGrid .col-span-8,
    #dashboardGrid .col-span-9,
    #dashboardGrid .col-span-10,
    #dashboardGrid .col-span-11,
    #dashboardGrid .col-span-12 {
        grid-column: span 12 !important; /* Full width */
    }
    
    /* Height Utilities (Apply to all desktop sizes) */
    .row-span-4  { grid-row: span 4; }
    .row-span-5  { grid-row: span 5; } /* Added for better chart min-heights */
    .row-span-6  { grid-row: span 6; }
    .row-span-8  { grid-row: span 8; }
    .row-span-10 { grid-row: span 10; } 
    .row-span-12 { grid-row: span 12; } 
    .row-span-14 { grid-row: span 14; }
    .row-span-16 { grid-row: span 16; }
}

/* DESKTOP (1280px and up) */
/* Restore the true 3-column (12-track) layout defined in the JS config */
@media (min-width: 1280px) {
    #dashboardGrid .col-span-3  { grid-column: span 3 !important; }  /* 25% */
    #dashboardGrid .col-span-4  { grid-column: span 4 !important; }  /* 33% */
    #dashboardGrid .col-span-5  { grid-column: span 5 !important; }
    #dashboardGrid .col-span-6  { grid-column: span 6 !important; }  /* 50% */
    #dashboardGrid .col-span-7  { grid-column: span 7 !important; }
    #dashboardGrid .col-span-8  { grid-column: span 8 !important; }  /* 66% */
    #dashboardGrid .col-span-9  { grid-column: span 9 !important; }
    #dashboardGrid .col-span-10 { grid-column: span 10 !important; }
    #dashboardGrid .col-span-11 { grid-column: span 11 !important; }
    #dashboardGrid .col-span-12 { grid-column: span 12 !important; } /* 100% */
}

/* --- 2. CARD WRAPPER STRUCTURE --- */
.dashboard-card-wrapper {
    height: 100%;
    position: relative; /* Anchor for absolute children */
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden; /* Stop resizing blowouts */
}

/* The inner card container (white box) */
.dashboard-card-wrapper > div.bg-white {
    position: absolute; /* Lock to parent size */
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
}

/* The content area inside the card */
.dashboard-card-wrapper > div > .flex-grow {
    flex: 1 1 auto;
    display: block;      /* Changed from flex to block to avoid collapsing children */
    min-height: 0;
    position: relative;  /* Critical anchor for the chart */
    overflow: hidden;
}

/* --- 3. DASHBOARD EDITOR CONTROLS --- */

/* Edit Mode Visuals (The dotted line) */
#dashboardGrid.edit-mode-active .dashboard-card-wrapper {
    border: 2px dashed #94a3b8;
    border-radius: 1rem;
    transform: scale(0.98);
}
#dashboardGrid.edit-mode-active .dashboard-card-wrapper:hover {
    border-color: #3b82f6;
}

/* --- VISIBILITY LOGIC START --- */

/* 1. CONTROLS CONTAINER */
/* Always display flex so the maximize button exists.
   Visibility is handled by HTML classes (opacity-0 group-hover:opacity-100) */
.controls-area {
    display: flex !important;
    align-items: center;
    gap: 4px;
}

/* 2. MAXIMIZE BUTTON (Always Present) */
.resize-btn {
    display: inline-flex !important;
    cursor: pointer;
    z-index: 20;
    color: #94a3b8;
}
.resize-btn:hover { color: #3b82f6; }

/* 3. DRAG HANDLES & RESIZERS (Hidden by Default in View Mode) */
.drag-handle, .resize-handle-corner {
    display: none !important; 
    touch-action: none; 
}

/* 4. EDIT MODE OVERRIDES (Force Visibility) */
#dashboardGrid.edit-mode-active .drag-handle {
    display: flex !important;
    opacity: 1 !important;
}
#dashboardGrid.edit-mode-active .resize-handle-corner {
    display: block !important;
    opacity: 1 !important;
}
/* In Edit Mode, keep controls fully opaque without needing hover */
#dashboardGrid.edit-mode-active .controls-area {
    opacity: 1 !important;
}

/* --- VISIBILITY LOGIC END --- */


/* Drag Handle Styling */
.drag-handle {
    cursor: grab;
    padding: 8px; 
    background: #1e293b;
    color: white;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    -webkit-user-select: none;
    user-select: none;
}
.drag-handle:active { cursor: grabbing; }

/* Corner Resize Handle Styling */
.resize-handle-corner {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 24px;
    height: 24px;
    z-index: 50;
    cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 50%, #94a3b8 50%);
    border-bottom-right-radius: 1rem;
}
.resize-handle-corner:hover, .resize-handle-corner.resizing {
    background: linear-gradient(135deg, transparent 50%, #3b82f6 50%);
}

/* Drag Feedback */
.dashboard-ghost {
    opacity: 0.4;
    background-color: #f1f5f9;
    border: 2px dashed #cbd5e1;
    border-radius: 1rem;
}

.dashboard-drag-preview {
    opacity: 1 !important;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    z-index: 9999 !important;
    position: fixed !important; 
    margin: 0 !important;
    transition: none !important; 
    pointer-events: none;
}

/* Resize Logic */
body.is-resizing .dashboard-card-wrapper {
    transition: none !important; 
    z-index: 100;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
body.is-resizing {
    cursor: nwse-resize !important;
    user-select: none;
}

/* Mobile Modal Fix */
@media (max-width: 640px) {
    .modal-content-base {
        width: 95% !important;
        padding: 20px !important;
        max-height: 85vh;
    }
}

/* Dark Mode Support */
body.dark-mode-active .dashboard-ghost { background: #374151; border-color: #4b5563; }
body.dark-mode-active .dashboard-drag-preview { background: #1f2937; }


/* --- 4. CHART & CONTENT CONTAINERS --- */

/* Chart Container Specifics (Forces Absolute Fill) */
#dashboardGrid [id*="ChartContainer"] {
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    height: 100% !important;
    width: 100% !important;
    display: block !important; 
    overflow: hidden;
}

/* Plotly Sizing Fix (Forces Canvas Fill) */
#dashboardGrid [id*="ChartContainer"] > div,
#dashboardGrid [id*="ChartContainer"] .plot-container,
#dashboardGrid [id*="ChartContainer"] .main-svg,
#dashboardGrid [id*="ChartContainer"] svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
    position: absolute;
    top: 0; left: 0;
}

/* Text Card Scrolling (Exceptions) */
/* These cards must scroll and NOT be absolute-locked internally.
   We also remove legacy max-height limits so they fill the grid card. */
#recentCasesContent,
#recentRegulationsContent,
#litigationCardContent,
#regulatoryCardContent,
#summaryCardContent,
#executiveSummaryCardContent,
#thirtyDaySummaryCardContent {
    position: relative;
    display: block;
    height: 100% !important;       /* Force fill parent */
    max-height: none !important;   /* CRITICAL FIX: Remove 40vh limit */
    overflow-y: auto !important;   /* Scroll within the card */
    padding: 1.5rem !important;
    word-wrap: break-word; 
    overflow-x: hidden;
}

/* ==========================================================================
   2. STANDARD CHARTS PAGE FIX (Resets Layout)
   ========================================================================== */
/* These rules fix the "Charts & Statistics" page by forcing normal layout flow,
   counteracting the absolute positioning used in the Dashboard Grid. */

/* 1. Wrapper: Ensure it expands naturally and clips overflow */
#chartsPage .chart-container {
    display: flex;
    flex-direction: column;
    position: relative !important; /* Normal flow */
    min-height: 450px;
    height: auto !important;
    width: 100%;
    background-color: #ffffff;
    overflow: hidden; 
    align-items: stretch;
    padding: 1.5rem;
    border-radius: 0.75rem; 
}

/* 2. Inner Container: Reset to block (cancels the 'absolute' from dashboard) */
#chartsPage .chart-container [id*="Container"] {
    position: relative !important;
    display: block !important;
    top: auto !important; left: auto !important;
    right: auto !important; bottom: auto !important;
    width: 100% !important;
    height: 380px !important; /* Fixed height for D3 to render correctly */
    margin-bottom: 0.5rem;
}

/* 3. SVG: Ensure it respects the container width */
#chartsPage .chart-container svg {
    width: 100% !important;
    height: auto !important;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}

/* 4. Legend: Ensure it flows naturally below the chart */
#chartsPage .chart-legend {
    position: relative;
    width: 100%;
    margin-top: auto; 
}


/* --- Dashboard Popout Styles (View Mode Only) --- */

/* The dark background behind the popout */
.dashboard-maximize-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6); /* Dark dimming */
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out;
    backdrop-filter: blur(2px);
}

.dashboard-maximize-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* The Card when popped out */
.dashboard-card-wrapper.card-popout-mode {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    /* POPUP SIZING: 90% width/height (Padding effect) */
    width: 90vw !important;
    height: 85vh !important;
    max-width: 1600px;
    
    z-index: 9999 !important;
    box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.5) !important;
    border-radius: 16px !important;
    background-color: white;
    
    /* Detach from grid */
    grid-column: auto !important;
    grid-row: auto !important;
    margin: 0 !important;
}

/* Dark Mode support for the Customize Dashboard button */
body.dark-mode-active #editDashboardBtn {
    background-color: #374151 !important; /* slate-700 */
    color: #f1f5f9 !important;     /* slate-100 */
    border: 1px solid #4b5563;     /* slate-600 (optional border for depth) */
}

body.dark-mode-active #editDashboardBtn:hover {
    background-color: #4b5563 !important; /* slate-600 */
    color: #ffffff !important;
}

/* Styles for generated news links in the Daily Summary card */
.summary-headline-link {
    color: #1e293b; /* slate-800 (Light Mode) */
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.summary-headline-link:hover {
    color: #2563eb; /* blue-600 */
    text-decoration: underline;
}

/* Dark Mode Override */
body.dark-mode-active .summary-headline-link {
    color: #f1f5f9; /* slate-100 (Dark Mode) */
}

body.dark-mode-active .summary-headline-link:hover {
    color: #60a5fa; /* blue-400 */
}

/* --- Dark Mode Fix for "Show More" Links in Table --- */
body.dark-mode-active #mainDataTable button.text-blue-600 {
    color: #60a5fa !important; /* blue-400: Lighter and more readable on dark bg */
}
body.dark-mode-active #mainDataTable button.text-blue-600:hover {
    color: #93c5fd !important; /* blue-300: Even lighter on hover */
}