/* 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: 100vw;
    
    /* SAFARI ROBUSTNESS: Fallback first, then modern unit */
    height: 100vh; 
    height: 100dvh; 

    background-color: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    
    /* Layout */
    display: flex; /* Always flex to maintain centering logic */
    justify-content: center;
    align-items: center;
    
    /* Layering */
    z-index: 3000 !important;
    
    /* HIDDEN STATE (Default) */
    opacity: 0;
    visibility: hidden; /* Critical for Safari to stop interactions */
    pointer-events: none; /* Double protection against ghost clicks */
    
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.modal-overlay.active {
    /* VISIBLE STATE */
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Re-enable clicks */
}

.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 */
}

/* 1. Remove the background blur specifically for the row summary modal */
#rowSummaryModal {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Optional: Lightens the dark overlay so the table is easier to read */
    background-color: rgba(15, 23, 42, 0.2) !important; 
}

/* 2. Modern, absolute, resizeable modal without transform conflicts */
.modal-content-row-summary {
    position: absolute; 
    
    /* THE FIX: Calculate dead-center coordinates directly instead of using transform.
       If max-width is 1200px, calc(50vw - 600px) keeps it perfectly centered on huge screens */
    top: 7.5vh;
    left: max(7.5vw, calc(50vw - 600px)); 
    
    /* Remove transform completely so it doesn't fight the resize handle */
    transform: none !important;
    
    width: 85vw; 
    max-width: 1200px; 
    
    height: 85vh; 
    max-height: 95vh; 
    
    min-height: 300px; 
    min-width: 320px;
    
    display: flex;
    flex-direction: column;
    padding: 0 !important; 
    overflow: hidden; 
    resize: both; 
    
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0,0,0,0.05) !important;
}

.modal-content-row-summary.is-dragged {
    transform: none !important; 
}

.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: 160px; /* Slightly wider for actions */
    width: 160px;
}
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: 600px;       /* Increased to 600px to fix "WAY too short" */
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    transition: background-color 0.3s ease;
    border: 2px dashed #e5e7eb;
}

/* Ensure the placeholder has some margin if at the top, or center it manually if empty */
.ai-results-placeholder {
    text-align: center;
    margin-top: 2rem;       /* added margin so it's not squashed against the top border */
    width: 100%;
}

/* Remove margin when loading/results exist so the loader/results are tight to top */
#aiQueryResults.is-loading .ai-results-placeholder,
#aiQueryResults:not(:has(.ai-results-placeholder)) .ai-results-placeholder {
    margin-top: 0;
    display: none;
}
#aiQueryResults.is-loading::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    min-height: 600px;       /* Matched to container min-height */
    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: 300px; /* Changed from 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: 30rem; /* Expanded to approx 480px to match dropdown */
}

.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 {
    /* Notice: No position rule! Let your JS handle fixed/absolute, top, and left. */
    z-index: 2000 !important;
    
    /* The wider width */
    width: 850px !important;
    max-width: calc(100vw - 2rem) !important; /* Keeps it safe on smaller laptops */
    
    height: 75vh;
    max-height: 750px;
    
    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;
}

/* When the panel is active (Assuming JS adds an 'active' or 'show' class) */
#mapSummaryPanel.active {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1) !important;
}

#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;
    
    /* Initial Transform State: Slightly shrunk and invisible */
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease-in-out;
}

/* FIX: Bind animation to the .active class on the parent overlay */
/* This ensures it pops open only when the JS explicitly activates it */
.modal-overlay.active #comparisonModalContent,
#comparisonModalOverlay.active #comparisonModalContent {
    transform: scale(1);
    opacity: 1;
}

#modalComparisonTableContainer {
    overflow: auto; /* This makes the table content scrollable within the modal */
    flex-grow: 1;
    /* SAFARI FIX: Enable smooth momentum scrolling on iOS */
    -webkit-overflow-scrolling: touch; 
}

/* 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);
    /* INCREASED WIDTH: Gives the headers more breathing room */
    width: 250px;       
    min-width: 250px;   
}

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

#userManagementPage .page-content-wrapper {
    max-width: 1800px; /* Widened to accommodate the 9-column permissions table */
    width: 98%;
    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 larger screens (1024px and wider), where a mouse is likely used,
  we define the position for the toggle group.
*/
@media (min-width: 1024px) {
    #tableTogglesGroup {
        position: absolute;
        top: 2.75rem;
        right: 1.75rem;
        z-index: 30;
    }
    /* Override any legacy absolute positioning on the child */
    #googleSearchToggleContainer {
        position: static !important;
    }
}

/* --- START: CSS-driven visibility for the Table Toggles Group --- */

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

/* 2. ONLY show the wrapper when the body has the 'active-page-tableViewPage' class. */
body.active-page-tableViewPage #tableTogglesGroup {
    display: flex;
}

/* Ensure the search toggle flows correctly inside the new group */
#googleSearchToggleContainer {
    display: flex !important;
}

/* --- END: CSS-driven visibility for the Table Toggles Group --- */

/* ===========================================
   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%;
  }
}




/* --- 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: 3rem; } 
}

@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
   =========================================== */

/* --- Session history hover tooltip --- */
#sessionHoverTooltip {
    position: fixed;
    z-index: 2147483647;          /* above modals (9999) */
    max-width: 340px;
    padding: 8px 11px;
    background: #1e293b;      /* slate-800 */
    color: #f1f5f9;           /* slate-100 */
    font-size: 0.75rem;
    line-height: 1.45;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    white-space: normal;      /* allow wrapping */
    overflow-wrap: anywhere;  /* break very long unbroken strings */
    pointer-events: none;     /* never intercept hover/clicks */
    opacity: 0;
    display: none;
    transition: opacity 0.12s ease;
}

/* --- 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 */
      padding-right: 0.75rem !important;      /* clearance so the controls aren't clipped */
    }

    #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 */
}
.status-enacted-pending-commencement {
    background-color: #ccfbf1; /* Teal 100 */
    color: #115e59; /* Teal 800 */
}
.status-proposed-concluded {
    background-color: #ffedd5; /* Amber 100 */
    color: #9a3412; /* Amber 800 */
}

/* 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 */
}
body.dark-mode-active .status-enacted-pending-commencement {
    background-color: #134e4a; /* teal-900 */
    color: #5eead4; /* teal-300 */
}
body.dark-mode-active .status-proposed-concluded { 
    background-color: #78350f; /* amber-900 */
    color: #fcd34d; /* amber-300 */
}

/* 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: 106000 !important;
    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: 400px; /* INCREASED: Gives multi-line text comfortable reading room */
    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 */
}

/* FORCE the paragraphs inside to be smaller */
#executiveSummaryCardContent p {
  font-size: 0.85rem !important; /* Force smaller text (approx 13-14px) */
  line-height: 1.6 !important;    /* Improve readability */
  margin-bottom: 1rem;            /* Space between paragraphs */
}

/* 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 */
    font-size: 0.85rem; /* Smaller font to match 30-day summary */
}

/* 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: 1.5rem; /* Increased spacing to mimic an extra line break */
}

/* Custom styling for each bullet point */
.summary-list li {
    font-size: 0.85rem; 
    color: #334155;            /* <--- !important removed */
    line-height: 1.6;
    padding-left: 2rem; 
    position: relative;
}

/* --- APP-WIDE FIXES: Theme & Accessibility Overrides --- */

/* 1. LIGHT MODE: Text Contrast Fix */
/* Forces darker text for readability on Apple devices/Chrome in Light Mode only */
/* Prevents OS-level Dark Mode from bleaching text when the app is in Light Mode */
body:not(.dark-mode-active) #regulatoryCardContent p.text-slate-600,
body:not(.dark-mode-active) #executiveSummaryCardContent p,
body:not(.dark-mode-active) #summaryCardContent p,
body:not(.dark-mode-active) #summaryCardContent li,
body:not(.dark-mode-active) #summaryCardContent div,
body:not(.dark-mode-active) #thirtyDaySummaryCardContent p,
body:not(.dark-mode-active) #thirtyDaySummaryCardContent div,
body:not(.dark-mode-active) #favoritesCardContent p,
body:not(.dark-mode-active) #favoritesCardContent span,
body:not(.dark-mode-active) #favoritesCardContent div,
body:not(.dark-mode-active) #favoritesCardContent a {
    color: #334155 !important; /* Slate-700 */
}

/* Ensure secondary info (like the table names in Favorites) remain slightly muted but visible */
body:not(.dark-mode-active) #favoritesCardContent .recent-item-jurisdiction,
body:not(.dark-mode-active) #favoritesCardContent .text-slate-500 {
    color: #64748b !important; /* Slate-500 */
}

/* 2. DARK MODE: UI Element Overrides */

/* FIX: Force "Top News" links to be dark in Light Mode (fixes faded text on Apple devices) */
body:not(.dark-mode-active) #summaryCardContent a {
    color: #1e293b !important; /* slate-800 */
}

/* FIX: Restore blue hover state for Top News links */
body:not(.dark-mode-active) #summaryCardContent a:hover {
    color: #2563eb !important; /* blue-600 */
    text-decoration: underline;
}

/* A. Badges & Status Tags (Invert light-grey tags to dark-grey with white text) */
body.dark-mode-active span.bg-slate-200 {
    background-color: #334155 !important; /* Slate-700 */
    color: #f1f5f9 !important;            /* Slate-100 */
    border: 1px solid #475569;
}
/* Ensure specific text shades inside badges turn white */
body.dark-mode-active span.bg-slate-200.text-slate-800 {
    color: #f1f5f9 !important;
}

/* B. Toggle Switches (Tracks) */
/* Targets both standard (w-7) and larger (w-9) toggle tracks */
body.dark-mode-active div.bg-slate-200.rounded-full.w-7.h-4,
body.dark-mode-active div.bg-slate-200.rounded-full.w-9.h-5 {
    background-color: #4b5563 !important; /* Slate-600 */
    border: 1px solid #374151;
}

/* C. Floating Glass Containers (Charts/Maps) */
/* Handles both Regulatory (bg-white/90) and Home (bg-white/80) containers */
body.dark-mode-active div.bg-white\/90.backdrop-blur-sm,
body.dark-mode-active div.bg-white\/80.backdrop-blur-sm {
    background-color: rgba(30, 41, 59, 0.9) !important; /* Dark Slate @ 90% */
    border: 1px solid #475569 !important;               /* Slate-600 Border */
}

/* D. Text Labels inside Floating Containers */
/* Fixes readability for labels that are originally slate-500 or slate-600 */
body.dark-mode-active div.bg-white\/90.backdrop-blur-sm span.text-slate-500,
body.dark-mode-active div.bg-white\/80.backdrop-blur-sm span.text-slate-600 {
    color: #cbd5e1 !important; /* Slate-300 */
}

/* 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: 1100; /* Increased to sit above the Map Canvas (z-50) */
}

.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; }

#regulatoryAnalysisPage > header,
#caseAnalysisPage > header {
    position: relative !important;
    top: auto !important;
    width: 100%;
    z-index: 50; /* Above content, but below modals */
    background-color: #f1f5f9; /* Matches the standard page background (slate-100) */
    border-bottom: 1px solid transparent; 
}

#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 > header,
body.dark-mode-active #caseAnalysisPage > header {
    background-color: #111827 !important; /* slate-900 */
    border-bottom-color: #1f2937; /* slate-800 */
}

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 adjustments for both panels */
body.dark-mode-active .global-summary-panel {
    background-color: #1f2937 !important; /* slate-800 */
    border: 1px solid #374151 !important; /* slate-700 */
}

body.dark-mode-active .global-summary-panel .bg-white {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode-active .global-summary-panel h3,
body.dark-mode-active .global-summary-panel .global-section-header {
    color: #f1f5f9 !important;
    border-bottom-color: #374151 !important;
}

body.dark-mode-active .global-summary-panel p,
body.dark-mode-active .global-summary-panel .text-slate-500,
body.dark-mode-active .global-summary-panel .text-slate-600 {
    color: #d1d5db !important;
}

body.dark-mode-active .global-summary-panel button[data-regulation-name] {
    color: #93c5fd !important;
}

.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 */
    font-size: 0.85rem; /* Made font smaller */
}

/* --- Item Spacing & Layout --- */
/* Adds space after every paragraph block (effectively adding a line break before the next heading) */
#thirtyDaySummaryCardContent p {
    margin-bottom: 1.5rem; 
    line-height: 1.6;
}

/* Remove margin from the last item to keep the bottom clean */
#thirtyDaySummaryCardContent p:last-child {
    margin-bottom: 0;
}

/* --- 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 .custom-scrollbar:hover { scrollbar-color: #4b5563 transparent; }
body.dark-mode-active .custom-scrollbar:hover::-webkit-scrollbar-thumb { background: #4b5563; }
body.dark-mode-active .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #64748b; }

#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: 9999999 !important; /* Insanely high to appear above Prompt Library and Chatbot */
}

/* ===========================================
   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;
}


/* 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;
}




/* 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: minmax(0, 2fr) minmax(0, 1fr); 
    gap: 1rem;
    padding: 1.15rem 0; /* INCREASED: Adds significant breathing room between items */
    border-bottom: 1px solid #f8fafc; /* Ultra-soft separator */
    border-radius: 0; 
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    color: inherit;
}

.recent-items-list li:last-child .recent-item-link {
    border-bottom: none;
}

.recent-item-link:hover {
    padding-left: 0.5rem; /* Sleek indent effect on hover */
    background-color: transparent;
}

.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 {
    border-bottom-color: #1f2937; /* slate-800 */
}
body.dark-mode-active .recent-item-link:hover {
    background-color: transparent;
}

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

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


/* ==========================================================================
   HUMAN-VERIFIED BY COLUMN (recent-record dashboard cards)
   ========================================================================== */

.recent-item-link.has-review-col,
.recent-items-header.has-review-col {
    display: grid;                 /* 0-2-0 beats Tailwind's .flex (0-1-0) */
    grid-template-columns: minmax(0, 1fr) 6.5rem 5.5rem;
    column-gap: 0.75rem;
    align-items: center;
}

.recent-items-header.has-review-col {
    align-items: end;
}

/* Date cell: fixed track, left edge shared with the DATE header above it.
   Messy free-text dates ellipsis rather than blow out the column
   (the raw value is already on the element's title attribute). */
.recent-item-link.has-review-col > :nth-child(2),
.recent-items-header.has-review-col > :nth-child(2) {
    justify-self: start;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-items-header {
    padding: 0 0 0.5rem 0;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.recent-items-header:hover {
    padding-left: 0; /* neutralise the row hover indent */
}

.review-col-label {
    text-align: right;
    line-height: 1.15;
    white-space: normal;
}

.review-chain {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.25rem;
    min-height: 1.25rem;
}

.review-check,
.review-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    flex-shrink: 0;
    line-height: 1;
}

.review-check {
    background-color: #B0E757;
    color: #1e293b;
    box-shadow: 0 0 0 1px rgba(122, 168, 45, 0.35);
}

.review-check svg {
    width: 0.7rem;
    height: 0.7rem;
}

/* Compact variant for the briefing metadata row (jurisdiction / status / date) */
.review-check-sm {
    width: 0.95rem;
    height: 0.95rem;
    vertical-align: middle;
}

.review-check-sm svg {
    width: 0.55rem;
    height: 0.55rem;
    stroke-width: 4;
}

.review-initials {
    background-color: rgba(176, 231, 87, 0.22);
    box-shadow: inset 0 0 0 1.5px #B0E757;
    color: #4d6b12;
    font-size: 0.55rem;
    font-weight: 700;
}

.review-initials-unknown {
    background-color: transparent;
    box-shadow: inset 0 0 0 1.5px #cbd5e1;
    color: #94a3b8;
}

.review-arrow {
    color: #B0E757;
    font-size: 0.7rem;
    line-height: 1;
    flex-shrink: 0;
}

.review-empty {
    color: #cbd5e1;
    font-size: 0.75rem;
}

/* Dark mode */
body.dark-mode-active .recent-items-header {
    border-bottom-color: #374151;
    color: #64748b;
}

/* Keep the checkmark dark on the green circle in dark mode — something in the
   dark theme is repainting the inherited currentColor to white. */
body.dark-mode-active .review-check {
    color: #0f172a !important;
}
body.dark-mode-active .review-check svg,
body.dark-mode-active .review-check svg polyline {
    stroke: #0f172a !important;
}

body.dark-mode-active .review-initials {
    background-color: rgba(176, 231, 87, 0.16);
    color: #d9f2a4;
}

body.dark-mode-active .review-initials-unknown {
    box-shadow: inset 0 0 0 1.5px #475569;
    color: #64748b;
}

body.dark-mode-active .review-empty {
    color: #475569;
}


/* In Review: newly added (< 7 days), not yet human-verified */
.inreview-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.4rem;
    border-radius: 9999px;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
    vertical-align: middle;
    color: #92400e;
    background-color: #fef3c7;
    box-shadow: inset 0 0 0 1px #fcd34d;
}

.review-inreview {
    color: #d97706;
}

body.dark-mode-active .inreview-tag {
    color: #fcd34d;
    background-color: rgba(245, 158, 11, 0.14);
    box-shadow: inset 0 0 0 1px rgba(252, 211, 77, 0.45);
}

body.dark-mode-active .review-inreview {
    color: #fbbf24;
}

/* ==========================================================================
   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 */
body.dark-mode-active .dashboard-card-wrapper .from-slate-700 {
    background-image: none !important;    /* Kills the light-mode gradient */
    background-color: #111827 !important; /* slate-900 (Darker header for contrast) */
    border-bottom-color: #374151 !important; /* slate-700 */
}

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

/* 4. Fix overall card border in Dark Mode */
body.dark-mode-active .dashboard-card-wrapper > div.bg-white {
    border-color: #374151 !important; /* slate-700 */
}

/* 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;
    /* NOT `dense`. Dense back-fills earlier holes with any later item that fits,
       ignoring DOM order — so a col-span-3 card (ICYMI) was being yanked back
       into the 4-track gap left in row 1 the instant it was dragged anywhere
       else. The layout is user-ordered, so DOM order has to win. */
    grid-auto-flow: row;
    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;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    
    /* --- THE FIX --- */
    /* 1. Standard overflow clip */
    overflow: hidden; 
    
    /* 2. Force the rounded corners to apply to the pixel mask, 
          not just the layout box. This stops the "pop-in" bleed. */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
    
    /* 3. Force GPU compositing so the browser treats this as a 
          separate layer and doesn't shortcut the painting */
    transform: translateZ(0);
}

/* 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. */
#recentCasesContent,
#recentRegulationsContent,
#recentCasesFiledContent,
#recentRegulationsInitiatedContent,
#litigationCardContent,
#regulatoryCardContent,
#summaryCardContent,
#executiveSummaryCardContent,
#thirtyDaySummaryCardContent,
#favoritesCardContent {          
    position: relative !important;
    
    /* --- CHROMEBOOK / FLEXBOX SCROLL FIX --- */
    flex: 1 1 auto !important;     /* Allow natural flex growing/shrinking */
    min-height: 0 !important;      /* CRITICAL: Allows flex child to shrink smaller than its content, triggering scroll */
    height: 100% !important;       /* Force height to parent container bounds, NOT content bounds */
    max-height: none !important;   /* Clear any conflicting max-heights */
    /* --------------------------------------- */
    
    overflow-y: auto !important;   /* Enable vertical scrolling */
    overflow-x: hidden !important; /* Prevent horizontal wobble */
    padding: 1.5rem !important;
    word-wrap: break-word; 
}

/* Extra safety enforcement for Popout Mode */
.dashboard-card-wrapper.card-popout-mode > div.bg-white {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 100% !important;
}

/* ==========================================================================
   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;
    
    /* ADDED: Scale animation on popout */
    transform: translate(-50%, -50%) scale(1) !important;
    transition: width 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                height 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !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 */
}


/* =========================================
   Dark Mode Overrides for Charts & Statistics
   ========================================= */

/* Ensure the page background is dark */
body.dark-mode-active {
    background-color: #0f172a !important; /* slate-900 */
    color: #f1f5f9 !important; /* slate-100 */
}

/* Override chart container backgrounds */
body.dark-mode-active .chart-container {
    background-color: #1e293b !important; /* slate-800 */
    border: 1px solid #334155; /* slate-700 border for definition */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3); /* Darker shadow */
    color: #f1f5f9; /* Light text color */
}

/* Ensure Chart Titles are light */
body.dark-mode-active .chart-container h3 {
    color: #f1f5f9 !important;
}

/* Fix Legend Text Color */
body.dark-mode-active .chart-legend {
    color: #cbd5e1 !important; /* slate-300 */
}

/* Fix Page Title Color */
body.dark-mode-active #chartsPageTitle {
    color: #f1f5f9 !important;
}

/* Fix Back Button Style */
body.dark-mode-active #backToTableBtn {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}
body.dark-mode-active #backToTableBtn:hover {
    background-color: #334155 !important;
}

/* Loading Indicator in Dark Mode */
body.dark-mode-active #chartsLoadingIndicator div {
    background-color: #1e293b !important;
    color: #93c5fd !important; /* blue-300 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}


/* Ensure the Map Modal is at a standard high level */
.modal-active-body-scroll-lock .modal-container {
    z-index: 1050 !important;
}

/* Ensure any secondary 'What's New' popups or change-logs are HIGHER */
/* Replace '.changes-popup' with the actual class used for those buttons' popups */
.changes-popup-container, 
#adminChangesModal, 
#userChangesModal {
    z-index: 1100 !important; 
}

/* Ensure the backdrop for the second modal also sits on top of the first modal */
.modal-backdrop.second-layer {
    z-index: 1090 !important;
}

/* When a changes modal is opened from the map, force it to Layer 2000 */
body.modal-over-map .modal-overlay,
body.modal-over-map #comparisonModalOverlay,
body.modal-over-map #sentimentModalOverlay {
    z-index: 2000 !important;
}

body.modal-over-map .modal-overlay,
body.modal-over-map .changes-modal-overlay { /* Target generic or specific */
    z-index: 4000 !important;
}

/* Optional: Make the backdrop even darker when double-modaling */
body.modal-over-map .modal-overlay {
    background-color: rgba(0, 0, 0, 0.85) !important;
}

.modal-container {
    display: flex; /* Ensure flex behavior handles visibility correctly */
    visibility: visible;
}

.modal-wrapper {
    z-index: 1101; /* MUST be higher than overlay */
    position: relative; /* Ensure z-index applies */
}


/* New Button Styles */
.btn-operational-active {
    background-color: #007bff; /* Blue */
    color: white;
}
.btn-operational-active:hover {
    background-color: #0056b3;
}

.btn-strategic-active {
    background-color: #6f42c1; /* Purple */
    color: white;
}
.btn-strategic-active:hover {
    background-color: #5a32a3;
}


/* --- Modern Multi-Select (Mobile Friendly) --- */
.custom-multiselect-container {
    position: relative;
    width: 100%;
}

.multiselect-trigger {
    width: 100%;
    min-height: 44px; /* Mobile touch target standard */
    padding: 0.5rem 0.75rem;
    background-color: white;
    border: 1px solid #cbd5e1; /* slate-300 */
    border-radius: 0.5rem;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 0.875rem;
    color: #334155; /* slate-700 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.multiselect-trigger:after {
    content: "";
    border: solid #64748b;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    margin-left: 8px;
}

.multiselect-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 60; 
    max-height: 30rem; /* CRITICAL FIX: Increased from 300px to 30rem to prevent shrinking */
    overflow-y: auto;
    margin-top: 4px;
}

.multiselect-dropdown-menu.active {
    display: block;
}

.multiselect-option {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem; /* Generous padding for fingers */
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background-color 0.15s;
}

.multiselect-option:hover {
    background-color: #f8fafc;
}

.multiselect-option input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    margin-right: 0.75rem;
    border-radius: 0.25rem;
    border-color: #cbd5e1;
    cursor: pointer;
    accent-color: #0f766e; /* teal-700 */
}

.multiselect-label {
    flex-grow: 1;
    font-size: 0.875rem;
    user-select: none;
}


/* js/style.css - APPEND TO END */

/* The interactive tooltip container */
#interactiveRecordsTooltip {
    position: fixed;
    z-index: 99999; /* Highest priority */
    background: #ffffff;
    border: 1px solid #cbd5e1;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-radius: 0.5rem;
    padding: 0;
    width: 300px;
    max-height: 300px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    pointer-events: none; /* Default to none, enabled when active */
}

#interactiveRecordsTooltip.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Allow clicking inside */
}

/* Header within the tooltip */
.records-tooltip-header {
    background-color: #f8fafc;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 600;
    font-size: 0.85rem;
    color: #475569;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

/* Scrollable list area */
.records-tooltip-list {
    overflow-y: auto;
    padding: 0.5rem 0;
    margin: 0;
    list-style: none;
}

/* Individual list items (Links) */
.records-tooltip-item {
    display: block;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    color: #334155;
    text-decoration: none;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: all 0.15s;
}

.records-tooltip-item:hover {
    background-color: #f1f5f9;
    color: #2563eb;
    border-left-color: #2563eb;
}

/* The "X Records" text in the matrix */
.records-trigger {
    cursor: pointer;
    border-bottom: 1px dashed #94a3b8;
    transition: color 0.2s;
}
.records-trigger:hover {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

/* ==========================================================================
   FINAL CONSOLIDATED DARK MODE & TOOLTIP FIXES
   ========================================================================== */

/* --- 1. Interactive Records Tooltip (The "X Records" List) --- */
/* Base styles for this are already light in your main CSS. 
   These are just the Dark Mode overrides. */
body.dark-mode-active #interactiveRecordsTooltip {
    background-color: #1e293b;
    border-color: #475569;
}
body.dark-mode-active .records-tooltip-header {
    background-color: #0f172a;
    border-bottom-color: #334155;
    color: #cbd5e1;
}
body.dark-mode-active .records-tooltip-item {
    color: #cbd5e1;
}
body.dark-mode-active .records-tooltip-item:hover {
    background-color: #334155;
    color: #60a5fa;
    border-left-color: #60a5fa;
}

/* --- 2. Sleek CSS-Only Tooltip (Badges & Metrics) --- */
[data-custom-tooltip] {
    position: relative;
    cursor: help;
}

/* The Tooltip Bubble - LIGHT MODE DEFAULT */
[data-custom-tooltip]::after {
    content: attr(data-custom-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    
    /* Light Mode Styles */
    background-color: #ffffff; 
    color: #334155;            /* Slate-700 */
    border: 1px solid #e2e8f0; /* Slate-200 */
    
    text-align: center;
    padding: 0.4rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* The Tiny Arrow - LIGHT MODE DEFAULT */
[data-custom-tooltip]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 5px solid transparent;
    border-top-color: #ffffff; /* Match bubble background */
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease;
    margin-bottom: -9px;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.05)); /* Subtle shadow for arrow */
}

/* Hover State - Animate Upwards */
[data-custom-tooltip]:hover::after,
[data-custom-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-8px);
}

/* --- Dark Mode Overrides for Tooltip --- */
body.dark-mode-active [data-custom-tooltip]::after {
    background-color: #1e293b; /* Slate-800 */
    color: #f1f5f9;            /* Slate-100 */
    border-color: #475569;     /* Slate-600 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

body.dark-mode-active [data-custom-tooltip]::before {
    border-top-color: #1e293b; /* Match dark bubble */
    filter: none;
}


/* --- 3. Regulatory Analysis Page Dark Mode Fixes --- */

/* Left Panel Container (The "Strip") */
body.dark-mode-active #regulatoryAnalysisPage main .lg\:w-1\/3 {
    background-color: #1f2937 !important; /* slate-800 */
    border-color: #374151 !important;     /* slate-700 */
}

/* Panel Text Colors */
body.dark-mode-active #regulatoryAnalysisPage main .lg\:w-1\/3 h2,
body.dark-mode-active #regulatoryAnalysisPage main .lg\:w-1\/3 h3,
body.dark-mode-active #regulatoryAnalysisPage main .lg\:w-1\/3 label,
body.dark-mode-active #regulatoryAnalysisPage main .lg\:w-1\/3 p {
    color: #e2e8f0 !important; /* slate-200 */
}
body.dark-mode-active #regulatoryAnalysisPage main .lg\:w-1\/3 .text-slate-500,
body.dark-mode-active #regulatoryAnalysisPage main .lg\:w-1\/3 .text-slate-600 {
    color: #94a3b8 !important; /* slate-400 */
}

/* Custom Multi-Select Dropdowns */
body.dark-mode-active .multiselect-trigger {
    background-color: #374151 !important; /* slate-700 */
    border-color: #4b5563 !important;     /* slate-600 */
    color: #f1f5f9 !important;            /* slate-100 */
}

body.dark-mode-active .multiselect-dropdown-menu {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
}

body.dark-mode-active .multiselect-option {
    border-bottom-color: #4b5563 !important;
    color: #e2e8f0 !important;
}

body.dark-mode-active .multiselect-option:hover {
    background-color: #4b5563 !important; /* Hover highlight */
}

/* --- 4. Comparison Matrix Modal Dark Mode --- */

/* Modal Content Wrapper */
body.dark-mode-active #comparisonModalContent {
    background-color: #1f2937 !important; /* slate-800 */
    color: #f1f5f9 !important;
}

/* Table Headers & Sticky Columns */
body.dark-mode-active #modalComparisonTable th,
body.dark-mode-active #modalComparisonTable td.sticky {
    background-color: #111827 !important; /* slate-900 */
    color: #f1f5f9 !important;
    border-color: #374151 !important;
}

/* Main Data Cells (Overriding bg-white) */
body.dark-mode-active #modalComparisonTable td {
    background-color: #1f2937 !important; /* slate-800 */
    color: #e2e8f0 !important;
    border-color: #374151 !important;
}

/* Inner "Strategic Summary" Box (Overriding bg-slate-50) */
body.dark-mode-active #modalComparisonTable .bg-slate-50\/80 {
    background-color: #374151 !important; /* slate-700 */
    border-color: #4b5563 !important;
}

/* Matrix Text Contrast Fixes */
body.dark-mode-active #modalComparisonTable .text-slate-700,
body.dark-mode-active #modalComparisonTable .text-slate-600 {
    color: #cbd5e1 !important; /* slate-300 */
}
body.dark-mode-active #modalComparisonTable .text-slate-500 {
    color: #94a3b8 !important; /* slate-400 */
}

/* Specific List Item Colors in Matrix */
body.dark-mode-active #modalComparisonTable .text-blue-900 { color: #93c5fd !important; } /* Light Blue */
body.dark-mode-active #modalComparisonTable .text-red-800 { color: #fca5a5 !important; }  /* Light Red */

/* Fix: Key Themes Tags in Dark Mode */
body.dark-mode-active #modalComparisonTable .bg-blue-50 {
    background-color: #1e3a8a !important; /* Dark Blue */
    border-color: #1e40af !important;     /* Blue-800 */
}
body.dark-mode-active #modalComparisonTable .text-blue-700 {
    color: #dbeafe !important;            /* Light Blue */
}

/* Records Count Link */
body.dark-mode-active #modalComparisonTable .records-trigger {
    color: #94a3b8 !important;
    border-bottom-color: #64748b !important;
}
body.dark-mode-active #modalComparisonTable .records-trigger:hover {
    color: #60a5fa !important; /* Bright Blue */
    border-bottom-color: #60a5fa !important;
}

/* ==========================================================================
   FINAL DARK MODE TAG & BADGE FIXES (Comparison Matrix)
   ========================================================================== */

/* --- 1. Legal Force Badge Fix --- */
body.dark-mode-active #modalComparisonTable .bg-white.text-slate-500 {
    background-color: #1e293b !important; /* slate-800 */
    color: #94a3b8 !important;            /* slate-400 */
    border-color: #475569 !important;     /* slate-600 */
}

/* --- 2. Sentiment Badge Color Overrides --- */
/* Restrictive (Red) */
body.dark-mode-active #modalComparisonTable .bg-red-50 {
    background-color: #450a0a !important; 
    color: #fca5a5 !important; 
    box-shadow: inset 0 0 0 1px #7f1d1d !important;
}
/* Permissive (Teal) */
body.dark-mode-active #modalComparisonTable .bg-teal-50 {
    background-color: #042f2e !important; 
    color: #5eead4 !important; 
    box-shadow: inset 0 0 0 1px #115e59 !important;
}
/* Balanced (Orange) */
body.dark-mode-active #modalComparisonTable .bg-orange-50 {
    background-color: #431407 !important; 
    color: #fdba74 !important; 
    box-shadow: inset 0 0 0 1px #9a3412 !important;
}
/* Emerging (Purple) */
body.dark-mode-active #modalComparisonTable .bg-purple-50 {
    background-color: #2e1065 !important; 
    color: #d8b4fe !important; 
    box-shadow: inset 0 0 0 1px #6b21a8 !important;
}
/* Innovation-focused (Indigo) */
body.dark-mode-active #modalComparisonTable .bg-indigo-50 {
    background-color: #1e1b4b !important; 
    color: #c7d2fe !important; 
    box-shadow: inset 0 0 0 1px #3730a3 !important;
}
/* Contentious (Blue) */
body.dark-mode-active #modalComparisonTable .bg-blue-50 {
    background-color: #172554 !important; 
    color: #93c5fd !important; 
    box-shadow: inset 0 0 0 1px #1e40af !important;
}
/* Unknown/Default (Slate) */
body.dark-mode-active #modalComparisonTable .bg-slate-50 {
    background-color: #0f172a !important; 
    color: #cbd5e1 !important; 
    box-shadow: inset 0 0 0 1px #334155 !important;
}

/* --- Fix: "Select All" Row in Multi-Select (Dark Mode) --- */
/* Overrides the hardcoded 'bg-slate-50' class on the Select All row */
body.dark-mode-active .multiselect-option.bg-slate-50 {
    background-color: #475569 !important; /* Slate-600 (Distinct header look) */
    color: #f1f5f9 !important;            /* White text */
    border-bottom-color: #4b5563 !important;
}

/* Ensure the hover state on "Select All" looks correct too */
body.dark-mode-active .multiselect-option.bg-slate-50:hover {
    background-color: #334155 !important; /* Slate-700 (Darker on hover) */
}



/* ==========================================================================
   MOBILE & RESPONSIVE LAYOUT FIXES (Consolidated)
   ========================================================================== */

/* Main Mobile Breakpoint (Tablet Portrait & smaller) */
@media (max-width: 768px) {
    
    /* --- 1. 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 */
    }

    /* --- 2. 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 {
        overflow: hidden;
        position: relative;
        /* FIX: Force height immediately with !important to prevent layout jump */
        height: 75vh !important; 
        min-height: 600px !important;
        max-height: 75vh !important;
        background-color: #000000; 
    }

    /* 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;
    }

    /* --- 3. Comparison Matrix Mobile Fixes --- */
    
    /* Shrink the Sticky First Column */
    #modalComparisonTable th.sticky,
    #modalComparisonTable td.sticky {
        width: 120px !important;      /* Much narrower (was 250px) */
        min-width: 120px !important;  /* Force constraint */
        font-size: 0.75rem !important;/* Smaller text to fit */
        padding: 0.5rem 0.25rem !important; /* Tighter padding */
        word-wrap: break-word;        /* Allow words to wrap */
        white-space: normal;          /* Allow multi-line text */
    }

    /* Adjust the Header Cell specifically */
    #modalComparisonTable thead th.sticky {
        vertical-align: bottom;       /* Align header text to bottom */
        line-height: 1.2;             /* Tighter line height */
    }

    /* Ensure the Data Cells (Right side) maintain size for scrolling */
    /* This ensures the horizontal scrollbar appears and is usable */
    #modalComparisonTable td {
        min-width: 280px !important; /* Slightly reduced from 350px for mobile feel */
    }
}

/* --- Other Responsive Breakpoints --- */
@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;
}


/* ==========================================================================
   LITIGATION, REGULATORY & ANALYSIS DARK MODE FIXES
   ========================================================================== */

/* 1. Fix Dark Text in "Litigation Outlook" & "Regulatory Outlook" Dashboard Cards */
/* Corrected selectors to match the IDs found in dashboardRegistry.js (litigation_outlook, regulatory_outlook) */
body.dark-mode-active #litigation_outlook .text-slate-700,
body.dark-mode-active #regulatory_outlook .text-slate-700,
body.dark-mode-active #litigation_outlook .text-slate-600,
body.dark-mode-active #regulatory_outlook .text-slate-600,
body.dark-mode-active #litigationCardContent .text-slate-700, /* Backup legacy ID */
body.dark-mode-active #regulatoryCardContent .text-slate-700 {
    color: #d1d5db !important; /* slate-300 (Light Grey) */
}

/* Ensure bold labels (like "Strategic Trends:") stand out in cards */
body.dark-mode-active #litigation_outlook strong,
body.dark-mode-active #regulatory_outlook strong,
body.dark-mode-active #litigation_outlook .font-semibold,
body.dark-mode-active #regulatory_outlook .font-semibold {
    color: #f8fafc !important; /* slate-50 (White) */
}


/* 2. Fix Bright Backgrounds in "Jurisdictional Analysis" & "Global Summary" (SPECIFIC CONTAINERS) */
/* Targets the 'bg-slate-50' boxes inside the map summary panel, regulatory cards, and global page */
body.dark-mode-active #globalSummaryContainer .bg-slate-50, /* Main Page Box */
body.dark-mode-active #mapSummaryPanel .bg-slate-50,        /* Map Popup */
body.dark-mode-active #regulatoryCardContent .bg-slate-50,  /* Dashboard */
body.dark-mode-active #sentimentModalOverlay .bg-slate-50,  /* Sentiment Modal (Stakeholder) */
body.dark-mode-active #sentimentModalContent .bg-slate-50,  /* Sentiment Modal Content */
body.dark-mode-active .popup-reg-item {                     /* Individual Regulation Items */
    background-color: #1e293b !important; /* slate-800 (Dark Blue-Grey) */
    border-color: #374151 !important;     /* slate-700 */
    color: #e2e8f0 !important;            /* slate-200 */
}

/* Fix the text color inside those specific boxes */
body.dark-mode-active #globalSummaryContainer .bg-slate-50 .text-slate-600,
body.dark-mode-active #mapSummaryPanel .bg-slate-50 .text-slate-600,
body.dark-mode-active #sentimentModalOverlay .bg-slate-50 .text-slate-600,
body.dark-mode-active #sentimentModalContent .bg-slate-50 .text-slate-600 {
    color: #cbd5e1 !important; /* slate-300 (Readable Grey) */
}

/* Fix specific headers (h4, span blocks) inside the Stakeholder/Mandates boxes */
body.dark-mode-active #globalSummaryContainer .bg-slate-50 h4,
body.dark-mode-active #mapSummaryPanel .bg-slate-50 h4,
body.dark-mode-active #sentimentModalOverlay .bg-slate-50 .text-slate-800,
body.dark-mode-active #sentimentModalContent .bg-slate-50 .text-slate-800,
body.dark-mode-active #globalSummaryContainer .bg-slate-50 .text-slate-800 {
    color: #f1f5f9 !important; /* slate-100 (White) */
}


/* 3. Fix Bright Buttons (Operational, Strategic, What's New, and Export) */
/* Targets the specific color classes used in regulatoryAnalysis.js */

/* Operational Buttons (Blue) */
body.dark-mode-active button.bg-blue-50,
body.dark-mode-active .action-button.bg-blue-50 {
    background-color: #1e3a8a !important; /* blue-900 */
    color: #bfdbfe !important; /* blue-200 */
    border-color: #1e40af !important;
}

/* Strategic Buttons (Purple) */
body.dark-mode-active button.bg-purple-50,
body.dark-mode-active .action-button.bg-purple-50 {
    background-color: #581c87 !important; /* purple-900 */
    color: #e9d5ff !important; /* purple-200 */
    border-color: #6b21a8 !important;
}

/* What's New / Neutral Buttons (Slate/White) */
body.dark-mode-active button.bg-slate-100,
body.dark-mode-active button.bg-slate-50,
body.dark-mode-active .action-button.bg-slate-50 {
    background-color: #374151 !important; /* slate-700 */
    color: #e5e7eb !important;
    border-color: #4b5563 !important;
}

/* Export Buttons (Teal) */
/* Targets #globalSummaryExportBtn and similar export buttons */
body.dark-mode-active button.bg-teal-50,
body.dark-mode-active .action-button.bg-teal-50,
body.dark-mode-active #globalSummaryExportBtn,
body.dark-mode-active #sentimentDetailExportBtn {
    background-color: #134e4a !important; /* teal-900 */
    color: #ccfbf1 !important; /* teal-100 */
    border-color: #115e59 !important; /* teal-800 */
}


/* Hover States for these buttons */
body.dark-mode-active button.bg-blue-50:hover { background-color: #1e40af !important; }
body.dark-mode-active button.bg-purple-50:hover { background-color: #6b21a8 !important; }
body.dark-mode-active button.bg-slate-50:hover { background-color: #4b5563 !important; }
body.dark-mode-active button.bg-teal-50:hover, 
body.dark-mode-active #globalSummaryExportBtn:hover { background-color: #115e59 !important; }


/* 4. Fix Invisible Bold Text in "Analysis by Jurisdictions" & "Global Analysis" */
/* The JS injects <span class="text-slate-900"> for bolded text. In dark mode, this is invisible. */
body.dark-mode-active #modalComparisonTable .text-slate-900,
body.dark-mode-active #sentimentModalOverlay .text-slate-900,
body.dark-mode-active #mapSummaryPanel .text-slate-900,
body.dark-mode-active #globalSummaryContainer .text-slate-900,
body.dark-mode-active #globalButtonsContainer .text-slate-900,
body.dark-mode-active #sentimentModalContent .text-slate-900 {
    color: #f1f5f9 !important; /* slate-100 (White) */
}


/* 5. Fix "What's New" Popup Background */
/* Ensure the popup that appears when clicking "What's New" is also dark */
body.dark-mode-active #landscapeChangesModal .modal-content-base, 
body.dark-mode-active #recentChangesModal .modal-content-base {
    background-color: #1f2937 !important; /* slate-800 */
    color: #f1f5f9 !important;
}

/* Fix the individual change items inside the "What's New" list */
body.dark-mode-active #landscapeChangesModal .bg-slate-50,
body.dark-mode-active #recentChangesModal .bg-slate-50 {
    background-color: #374151 !important; /* slate-700 */
    border-color: #4b5563 !important;
    color: #d1d5db !important;
}

body.dark-mode-active #landscapeChangesModal .bg-slate-50:hover,
body.dark-mode-active #recentChangesModal .bg-slate-50:hover {
    background-color: #4b5563 !important; /* Lighter on hover */
}

/* --- FIX: Force Dark Background on "Driven By" and other Tags in Dark Mode --- */
/* We use 'body.dark-mode-active span.bg-slate-100' for higher specificity */
body.dark-mode-active span.bg-slate-100,
body.dark-mode-active .bg-slate-100 {
    background-color: #374151 !important; /* Dark Slate (slate-700) */
    color: #e2e8f0 !important;            /* Light Text (slate-200) */
    border: 1px solid #4b5563 !important; /* Border (slate-600) */
}

/* Ensure the text inside these tags (often slate-600) turns light */
body.dark-mode-active span.bg-slate-100 .text-slate-600,
body.dark-mode-active .bg-slate-100 .text-slate-600 {
    color: #e2e8f0 !important;
}

/* --- FORCE CHART TEXT VISIBILITY --- */
/* Target the text inside Pie and Sunburst charts */
g.slicetext text,
g.slice text {
    /* 1. Force Pure White Fill */
    fill: #ffffff !important; 
    
    /* 2. Make font BOLD so it appears brighter/thicker */
    font-weight: 700 !important; 
    font-family: 'Inter', sans-serif !important;

    /* 3. Add a black shadow to create high contrast on ANY color (Yellow, Grey, etc.) */
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.9) !important;
    
    /* 4. Increase opacity to maximum */
    opacity: 1 !important;
    fill-opacity: 1 !important;
}

/* Fix for the center text of the Sunburst Chart (The hole text) */
.layer-above text {
    font-weight: 600 !important;
}


/* --- Dynamic Inline Regulation Links --- */
.inline-reg-link {
    display: inline;
    color: #7a9a2b; /* Slightly lighter shade than the #6a8522 heading green */
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px dotted #7a9a2b;
    transition: all 0.2s ease;
    background: transparent;
    padding: 0;
    border: none;
}

.inline-reg-link:hover {
    color: #6a8522;
    text-decoration: underline;
    background-color: rgba(175, 211, 83, 0.15);
    border-radius: 2px;
}

/* Ensure they are visible in dark mode */
body.dark-mode-active .inline-reg-link {
    color: #afd353;
    border-bottom-color: #afd353;
}
body.dark-mode-active .inline-reg-link:hover {
    color: #c5e86c;
    background-color: rgba(175, 211, 83, 0.25);
}

/* ==========================================================================
   DARK MODE FOR MAP CONTROLS (Globe Toggle, Search, Legend)
   ========================================================================== */

/* --- 1. Map/Globe Toggle Button Container --- */
body.dark-mode-active #mapViewToggle {
    background-color: #1f2937 !important; /* slate-800 */
    border-color: #374151 !important;     /* slate-700 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

/* Inactive Toggle Buttons text color */
body.dark-mode-active #mapViewToggle button.text-slate-500 {
    color: #9ca3af !important; /* slate-400 */
}

/* Inactive Toggle Button Hover State */
body.dark-mode-active #mapViewToggle button.hover\:bg-slate-100:hover {
    background-color: #374151 !important; /* slate-700 */
    color: #f1f5f9 !important;            /* slate-100 */
}

/* Active Toggle Button (Indigo) - ensure it pops against dark bg */
body.dark-mode-active #mapViewToggle button.bg-indigo-600 {
    background-color: #4f46e5 !important; /* indigo-600 */
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}


/* --- 2. Floating Search Box --- */
body.dark-mode-active .map-search-container {
    background-color: #1f2937 !important; /* slate-800 */
    border-color: #374151 !important;     /* slate-700 */
    color: #f1f5f9 !important;            /* slate-100 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
}

/* Search Input Text */
body.dark-mode-active .map-search-input {
    color: #f1f5f9 !important;            /* slate-100 */
}

/* Search Input Placeholder */
body.dark-mode-active .map-search-input::placeholder {
    color: #94a3b8 !important;            /* slate-400 */
}

/* Search Icon */
body.dark-mode-active .map-search-container svg {
    color: #94a3b8 !important;            /* slate-400 */
}


/* --- 3. Map & Globe Legend --- */
body.dark-mode-active .map-legend {
    background-color: rgba(30, 41, 59, 0.95) !important; /* slate-800 with high opacity */
    border-color: #374151 !important;     /* slate-700 */
    color: #cbd5e1 !important;            /* slate-300 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
}

/* Legend Title */
body.dark-mode-active .map-legend-title {
    color: #f1f5f9 !important;            /* slate-100 */
}

body.dark-mode-active .leaflet-tooltip {
    background-color: #1e293b !important; /* slate-800 */
    border-color: #374151 !important;     /* slate-700 */
    color: #f1f5f9 !important;            /* slate-100 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4) !important;
}

/* Fix the tiny triangle (arrow) of the tooltip if it exists */
body.dark-mode-active .leaflet-tooltip-top:before,
body.dark-mode-active .leaflet-tooltip-bottom:before,
body.dark-mode-active .leaflet-tooltip-left:before,
body.dark-mode-active .leaflet-tooltip-right:before {
    border-top-color: #1e293b !important;
}


/* --- FIX START: Sentiment Analysis Modal Search (Dark Mode) --- */

/* 1. Sticky Search Header Container */
/* Overrides 'bg-white' and border colors */
body.dark-mode-active #sentimentListView .sticky.top-0 {
    background-color: #1e293b !important; /* slate-800 */
    border-color: #334155 !important;     /* slate-700 */
}

/* 2. Search Input Field */
body.dark-mode-active #sentimentSearchInput {
    background-color: #0f172a !important; /* slate-900 (Darker input background) */
    border-color: #475569 !important;     /* slate-600 */
    color: #f1f5f9 !important;            /* slate-100 (White text) */
}
body.dark-mode-active #sentimentSearchInput::placeholder {
    color: #64748b !important;            /* slate-500 */
}

/* 3. Search Icon */
body.dark-mode-active #sentimentListView svg.text-slate-400 {
    color: #94a3b8 !important;            /* slate-400 (Lighter grey for visibility) */
}

/* 4. Table Header (Sticky) */
body.dark-mode-active #sentimentListTableContainer thead th {
    background-color: #1e293b !important; /* slate-800 */
    color: #cbd5e1 !important;            /* slate-300 */
    border-bottom: 1px solid #334155 !important;
}

/* 5. Table Rows & Cells */
/* Overrides default white background and text colors */
body.dark-mode-active #sentimentListTableContainer tbody tr {
    background-color: transparent !important; /* Let modal bg show through */
    border-bottom: 1px solid #334155 !important;
}
body.dark-mode-active #sentimentListTableContainer tbody td {
    color: #cbd5e1 !important;            /* slate-300 */
}

/* 6. Hover Effects & Striping */
/* Handle the 'even:bg-slate-50' and hover states */
body.dark-mode-active #sentimentListTableContainer tbody tr:hover td {
    color: #f8fafc !important;            /* White text on hover */
}
body.dark-mode-active #sentimentListTableContainer tbody tr:hover {
    background-color: #334155 !important; /* slate-700 (Highlight color) */
}

/* Optional: Fix the even-row striping to be subtle in dark mode */
body.dark-mode-active #sentimentListTableContainer tbody tr:nth-child(even) {
    background-color: rgba(30, 41, 59, 0.5) !important; /* subtle stripe */
}
/* --- FIX END --- */

/* 1. Hide the button by default on all pages */
#backToRegulatoryTableBtn {
    display: none !important;
}

/* 2. Show the button ONLY when the Regulatory Analysis page is active */
/* This matches the logic used for other page-specific elements */
body.active-page-regulatoryAnalysisPage #backToRegulatoryTableBtn {
    display: inline-flex !important;
}

/* 1. Hide the Cases Table View button by default on all pages */
#backToCasesTableBtn {
    display: none !important;
}

/* 2. Show it ONLY on the Case Analysis page */
body.active-page-caseAnalysisPage #backToCasesTableBtn {
    display: inline-flex !important;
}

/* --- Dark Mode for Table View Buttons --- */
body.dark-mode-active #backToRegulatoryTableBtn,
body.dark-mode-active #backToCasesTableBtn,
body.dark-mode-active #goToRegulatoryAnalysisBtn,
body.dark-mode-active #goToCasesAnalysisBtn {
    background-color: #1e293b; /* slate-800 */
    color: #e2e8f0;            /* slate-200 */
    border-color: #334155;     /* slate-700 */
}

body.dark-mode-active #backToRegulatoryTableBtn:hover,
body.dark-mode-active #backToCasesTableBtn:hover,
body.dark-mode-active #goToRegulatoryAnalysisBtn:hover,
body.dark-mode-active #goToCasesAnalysisBtn:hover {
    background-color: #334155; /* slate-700 */
    color: #ffffff;            /* white */
}


/* ===========================================
   DARK MODE: MY FAVORITES & SPECIFIC ALERTS
   =========================================== */

/* Target the specific section container */
body.dark-mode-active #profilePage .admin-section:has(#profileFavoritesList) {
    background-color: #1f2937 !important; /* slate-800 */
    border-color: #374151 !important; /* slate-700 */
}

/* Update the text colors */
body.dark-mode-active #profilePage .admin-section:has(#profileFavoritesList) h3 {
    color: #f3f4f6 !important; /* gray-100 */
}
body.dark-mode-active #profilePage .admin-section:has(#profileFavoritesList) p.text-slate-500 {
    color: #9ca3af !important; /* gray-400 */
}
body.dark-mode-active #profilePage .admin-section:has(#profileFavoritesList) label {
    color: #e5e7eb !important; /* gray-200 */
}

/* The Frequency Dropdown */
body.dark-mode-active #favoriteFrequencySelect {
    background-color: #374151 !important; /* slate-700 */
    border-color: #4b5563 !important; /* slate-600 */
    color: #f9fafb !important; /* gray-50 */
}

/* The Scrollable Favorites List Container */
body.dark-mode-active #profileFavoritesList {
    background-color: #111827 !important; /* slate-900 (darker inset look) */
    border-color: #374151 !important; /* slate-700 */
}

/* Individual Favorite Items (Assuming they use standard border classes) */
body.dark-mode-active #profileFavoritesList > div {
    border-bottom-color: #374151 !important; /* slate-700 */
}
body.dark-mode-active #profileFavoritesList span,
body.dark-mode-active #profileFavoritesList strong {
    color: #e5e7eb !important; /* gray-200 */
}


/* ===========================================
   DARK MODE: AI MODEL PRICING
   =========================================== */

/* Main Container */
body.dark-mode-active #aiPricingPage .admin-section.bg-white {
    background-color: #1f2937 !important; /* slate-800 */
    border-color: #374151 !important; /* slate-700 */
}

/* Table Header Row (Background) */
body.dark-mode-active #pricingManagementContainer .bg-slate-50 {
    background-color: #111827 !important; /* slate-900 */
    border-color: #374151 !important; /* slate-700 */
}

/* Table Header Text */
body.dark-mode-active #pricingManagementContainer h3.text-slate-700 {
    color: #f1f5f9 !important; /* slate-100 */
}

/* The actual table headers (thead) */
body.dark-mode-active #pricingManagementContainer thead.bg-slate-100 {
    background-color: #374151 !important; /* slate-700 */
    color: #e2e8f0 !important; /* slate-200 */
}

/* Table Body and Rows */
body.dark-mode-active #pricingTableBody {
    background-color: #1f2937 !important; /* slate-800 */
    border-color: #374151 !important; /* slate-700 */
}

/* Table Row Hover State */
body.dark-mode-active #pricingTableBody tr.hover\:bg-slate-50:hover {
    background-color: #374151 !important; /* slate-700 */
}

/* Text Colors inside Table */
body.dark-mode-active #pricingTableBody .text-slate-900,
body.dark-mode-active #pricingTableBody .text-slate-700 {
    color: #e2e8f0 !important; /* slate-200 */
}
body.dark-mode-active #pricingTableBody .text-slate-500 {
    color: #94a3b8 !important; /* slate-400 */
}

/* Money/Price Colors */
body.dark-mode-active #pricingTableBody .text-emerald-700 {
    color: #34d399 !important; /* emerald-400 */
}
body.dark-mode-active #pricingTableBody .text-blue-700 {
    color: #60a5fa !important; /* blue-400 */
}



/* ===========================================
   DARK MODE: EXISTING CLIENTS (USER MANAGEMENT)
   =========================================== */

/* Subheading text */
body.dark-mode-active #userManagementPage h4.text-gray-600 {
    color: #e2e8f0 !important; /* slate-200 */
}

/* The List Container (overriding bg-slate-50) */
body.dark-mode-active #clientList.bg-slate-50 {
    background-color: #374151 !important; /* slate-700 */
}

/* Individual Client Rows (Borders) */
body.dark-mode-active #clientList li.border-slate-200 {
    border-color: #4b5563 !important; /* slate-600 */
}

/* Client Names */
body.dark-mode-active #clientList .text-slate-700 {
    color: #f1f5f9 !important; /* slate-100 */
}

/* Credit Balance text */
body.dark-mode-active #clientList .text-slate-500 {
    color: #94a3b8 !important; /* slate-400 */
}

/* "Alerts" and "Remove" Button Hovers */
body.dark-mode-active #clientList button.hover\:bg-blue-100:hover {
    background-color: #1e3a8a !important; /* blue-900 */
}
body.dark-mode-active #clientList button.hover\:bg-red-100:hover {
    background-color: #7f1d1d !important; /* red-900 */
}


/* Fix for Top News links visibility */
#topNewsContent a, 
#topNewsContent .text-slate-500 {
    color: #334155 !important; /* darker grey */
}

#topNewsContent a:hover {
    color: #1d4ed8 !important; /* blue on hover */
    text-decoration: underline;
}


/* On screens smaller than 1024px (tablets and mobile) */
@media (max-width: 1023px) {

  /* 1. Stack Header Controls Vertically */
  .header-controls-grid {
    flex-direction: column; 
    align-items: stretch;   
    gap: 1rem;              
  }

  /* 2. Make Containers Full Width */
  .grid-item-buttons,
  .grid-item-dropdown {
    width: 100%; 
  }

  #regulatoryIndustrySelect {
    width: 100%; 
  }

  /* 3. STRICTLY HIDE Elements that Overlap/Break Layout on Mobile */
  /* UPDATED: Added specific body class selectors to override the "Show" rules */
  #backToRegulatoryTableBtn,
  body.active-page-regulatoryAnalysisPage #backToRegulatoryTableBtn,

  #backToCasesTableBtn,
  body.active-page-casesView #backToCasesTableBtn,

  /* NEW: analysis-view buttons (table -> analysis) */
  #goToRegulatoryAnalysisBtn,
  body.active-page-regulatoryLandscapePage #goToRegulatoryAnalysisBtn,
  body.active-page-tableViewPage #goToRegulatoryAnalysisBtn,

  #goToCasesAnalysisBtn,
  body.active-page-casesView #goToCasesAnalysisBtn,
  body.active-page-tableViewPage #goToCasesAnalysisBtn,

  #googleSearchToggleContainer,
  #tableTogglesGroup,
  body.active-page-tableViewPage #tableTogglesGroup {
      display: none !important;
  }
}


/* =========================================================
   SURGICAL FIX: PENDING APPROVAL ROW COLORS (Including Sticky Cells)
   ========================================================= */
#mainDataTable tr.row-pending-approval td,
#mainDataTable tr.row-pending-approval td.sticky-column-left,
#mainDataTable tr.row-pending-approval td.sticky-column-actions {
    background-color: #fef2f2 !important; /* light red/rose */
}

#mainDataTable tr.row-pending-approval:hover td,
#mainDataTable tr.row-pending-approval:hover td.sticky-column-left,
#mainDataTable tr.row-pending-approval:hover td.sticky-column-actions {
    background-color: #fee2e2 !important; /* slightly darker on hover */
}

/* Dark Mode Support for Pending Rows */
body.dark-mode-active #mainDataTable tr.row-pending-approval td,
body.dark-mode-active #mainDataTable tr.row-pending-approval td.sticky-column-left,
body.dark-mode-active #mainDataTable tr.row-pending-approval td.sticky-column-actions {
    background-color: rgba(127, 29, 29, 0.25) !important; /* dark red tint */
}

body.dark-mode-active #mainDataTable tr.row-pending-approval:hover td,
body.dark-mode-active #mainDataTable tr.row-pending-approval:hover td.sticky-column-left,
body.dark-mode-active #mainDataTable tr.row-pending-approval:hover td.sticky-column-actions {
    background-color: rgba(127, 29, 29, 0.45) !important; /* darker on hover */
}

/* Visual indicator for the status text */
.status-badge-pending {
    background-color: #ef4444;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}


/* --- Markdown Documentation Styling (Fixes Compressed Text) --- */

.markdown-content {
    color: #334155; /* slate-700 */
    font-size: 1rem;
    line-height: 1.75; /* Increase line height for readability */
}

/* Headers */
.markdown-content h1 {
    font-size: 2.25rem;
    font-weight: 800;
    color: #1e293b; /* slate-800 */
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.5rem;
    line-height: 1.2;
}

.markdown-content h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.markdown-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #334155;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

/* Paragraphs & Text */
.markdown-content p {
    margin-bottom: 1.25rem; /* Critical for fixing "compressed" look */
}

/* Lists */
.markdown-content ul, 
.markdown-content ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}

.markdown-content ul {
    list-style-type: disc;
}

.markdown-content ol {
    list-style-type: decimal;
}

.markdown-content li {
    margin-bottom: 0.5rem; /* Space between list items */
}

/* Code Blocks */
.markdown-content pre {
    background-color: #f1f5f9; /* slate-100 */
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-bottom: 1.5rem;
    border: 1px solid #e2e8f0;
}

.markdown-content code {
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
    background-color: #f1f5f9;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    color: #db2777; /* pink-600 */
}

.markdown-content pre code {
    background-color: transparent;
    color: #334155;
    padding: 0;
}

/* Links */
.markdown-content a {
    color: #2563eb; /* blue-600 */
    text-decoration: underline;
    text-underline-offset: 2px;
}
.markdown-content a:hover {
    color: #1d4ed8; /* blue-700 */
}

/* Blockquotes */
.markdown-content blockquote {
    border-left: 4px solid #cbd5e1; /* slate-300 */
    padding-left: 1rem;
    font-style: italic;
    color: #64748b; /* slate-500 */
    margin-bottom: 1.5rem;
}

/* Dark Mode Overrides for Markdown */
body.dark-mode-active .markdown-content {
    color: #cbd5e1; /* slate-300 */
}
body.dark-mode-active .markdown-content h1,
body.dark-mode-active .markdown-content h2 {
    color: #f8fafc; /* slate-50 */
    border-bottom-color: #334155;
}
body.dark-mode-active .markdown-content h3 {
    color: #f1f5f9;
}
body.dark-mode-active .markdown-content pre,
body.dark-mode-active .markdown-content code {
    background-color: #0f172a; /* slate-900 */
    border-color: #334155;
    color: #e2e8f0;
}
body.dark-mode-active .markdown-content a {
    color: #60a5fa; /* blue-400 */
}

/* =========================================================
   DARK MODE PATCH: Documentation + Risk Register
   ========================================================= */

/* -------------------------------
   Documentation page (docs)
-------------------------------- */
body.dark-mode-active #documentationPage .bg-white,
body.dark-mode-active #documentationPage #docPlaceholder,
body.dark-mode-active #documentationPage #docViewer {
    background-color: #111827 !important; /* slate-900 */
    border-color: #374151 !important;     /* slate-700 */
}

body.dark-mode-active #documentationPage .text-slate-800,
body.dark-mode-active #documentationPage h2,
body.dark-mode-active #documentationPage h3 {
    color: #f1f5f9 !important; /* slate-100 */
}

body.dark-mode-active #documentationPage .text-slate-700,
body.dark-mode-active #documentationPage .text-slate-600,
body.dark-mode-active #documentationPage .text-slate-500 {
    color: #cbd5e1 !important; /* slate-300 */
}

body.dark-mode-active #documentationPage .text-slate-400 {
    color: #94a3b8 !important; /* slate-400 */
}

body.dark-mode-active #documentationPage .border-slate-200,
body.dark-mode-active #documentationPage .border-slate-300 {
    border-color: #374151 !important; /* slate-700 */
}

/* Sidebar links */
body.dark-mode-active #documentationPage .doc-nav-link {
    color: #cbd5e1 !important;
}
body.dark-mode-active #documentationPage .doc-nav-link:hover {
    background-color: #1f2937 !important; /* slate-800 */
    color: #f1f5f9 !important;
}
body.dark-mode-active #documentationPage .doc-nav-link.bg-slate-100 {
    background-color: #1f2937 !important; /* active */
}
body.dark-mode-active #documentationPage .doc-nav-link.text-indigo-700 {
    color: #a5b4fc !important; /* indigo-300 */
}
body.dark-mode-active #documentationPage .nav-dot.bg-slate-400 {
    background-color: #64748b !important; /* slate-500 */
}
body.dark-mode-active #documentationPage .nav-dot.bg-indigo-600 {
    background-color: #818cf8 !important; /* indigo-400 */
}

/* Placeholder icon bubble */
body.dark-mode-active #documentationPage #docPlaceholder .bg-slate-50 {
    background-color: #1f2937 !important;
}

/* Editor textarea */
body.dark-mode-active #documentationPage #markdownInput {
    background-color: #0b1220 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}
body.dark-mode-active #documentationPage #markdownInput::placeholder {
    color: #94a3b8 !important;
}

/* Header buttons */
body.dark-mode-active #documentationPage #addDocPageBtn:hover,
body.dark-mode-active #documentationPage #cancelEditBtn:hover {
    background-color: #1f2937 !important;
}
body.dark-mode-active #documentationPage #cancelEditBtn {
    color: #cbd5e1 !important;
}
body.dark-mode-active #documentationPage #editDocBtn {
    background-color: rgba(99, 102, 241, 0.14) !important; /* indigo */
    color: #c7d2fe !important;
}
body.dark-mode-active #documentationPage #editDocBtn:hover {
    background-color: rgba(99, 102, 241, 0.22) !important;
}

/* -------------------------------
   Risk Register page + modals
-------------------------------- */

/* Main cards/containers */
body.dark-mode-active #riskRegisterPage .bg-white,
body.dark-mode-active #riskRegisterPage #assetsView,
body.dark-mode-active #riskRegisterPage #vendorsView,
body.dark-mode-active #riskRegisterPage #myActionsView {
    background-color: #111827 !important;
    border-color: #374151 !important;
}

/* Common light section backgrounds used as headers */
body.dark-mode-active #riskRegisterPage .bg-slate-50,
body.dark-mode-active #riskRegisterPage .bg-slate-50\/50,
body.dark-mode-active #riskRegisterPage .bg-slate-50\/80,
body.dark-mode-active #riskRegisterPage .bg-slate-100 {
    background-color: #0f172a !important; /* slate-900-ish */
    border-color: #374151 !important;
}

/* Borders/dividers */
body.dark-mode-active #riskRegisterPage .border-slate-200,
body.dark-mode-active #riskRegisterPage .border-slate-300,
body.dark-mode-active #riskRegisterPage .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: #334155 !important; /* slate-700 */
}

/* Text colors (Tailwind utility overrides inside risk register) */
body.dark-mode-active #riskRegisterPage .text-slate-800,
body.dark-mode-active #riskRegisterPage .text-slate-700 {
    color: #f1f5f9 !important;
}
body.dark-mode-active #riskRegisterPage .text-slate-600,
body.dark-mode-active #riskRegisterPage .text-slate-500 {
    color: #cbd5e1 !important;
}
body.dark-mode-active #riskRegisterPage .text-slate-400 {
    color: #94a3b8 !important;
}

/* Tabs */
body.dark-mode-active #riskRegisterPage .border-b.border-slate-200 {
    border-color: #334155 !important;
}
body.dark-mode-active #riskRegisterPage #tab-assets.border-indigo-500,
body.dark-mode-active #riskRegisterPage #tab-vendors.border-indigo-500,
body.dark-mode-active #riskRegisterPage #tab-my-actions.border-indigo-500 {
    border-color: #818cf8 !important; /* indigo-400 */
}
body.dark-mode-active #riskRegisterPage #tab-assets.text-indigo-600,
body.dark-mode-active #riskRegisterPage #tab-vendors.text-indigo-600,
body.dark-mode-active #riskRegisterPage #tab-my-actions.text-indigo-600 {
    color: #a5b4fc !important; /* indigo-300 */
}
body.dark-mode-active #riskRegisterPage #tab-vendors.text-slate-500,
body.dark-mode-active #riskRegisterPage #tab-my-actions.text-slate-500 {
    color: #94a3b8 !important;
}

/* Persona switcher block */
body.dark-mode-active #riskRegisterPage .flex.bg-slate-100.p-1.rounded-lg {
    background-color: #0f172a !important;
    border: 1px solid #334155 !important;
}
body.dark-mode-active #riskRegisterPage #btn-persona-deployer,
body.dark-mode-active #riskRegisterPage #btn-persona-procurement,
body.dark-mode-active #riskRegisterPage #btn-persona-developer {
    border-color: #334155 !important;
}
body.dark-mode-active #riskRegisterPage #btn-persona-deployer.bg-white,
body.dark-mode-active #riskRegisterPage #btn-persona-procurement.bg-white,
body.dark-mode-active #riskRegisterPage #btn-persona-developer.bg-white {
    background-color: #111827 !important;
    color: #a5b4fc !important;
}
body.dark-mode-active #riskRegisterPage #btn-persona-procurement,
body.dark-mode-active #riskRegisterPage #btn-persona-developer {
    color: #cbd5e1 !important;
}
body.dark-mode-active #riskRegisterPage #btn-persona-procurement:hover,
body.dark-mode-active #riskRegisterPage #btn-persona-developer:hover {
    color: #f1f5f9 !important;
}

/* Table headers + row hover */
body.dark-mode-active #riskRegisterPage thead.bg-slate-50 {
    background-color: #0f172a !important;
}
body.dark-mode-active #riskRegisterPage tr.hover\:bg-slate-50:hover,
body.dark-mode-active #riskRegisterPage tr:hover {
    background-color: #1f2937 !important;
}

/* Inputs/selects/textarea within risk register (including modals) */
body.dark-mode-active #riskRegisterPage input,
body.dark-mode-active #riskRegisterPage select,
body.dark-mode-active #riskRegisterPage textarea {
    background-color: #0b1220 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}
body.dark-mode-active #riskRegisterPage input::placeholder,
body.dark-mode-active #riskRegisterPage textarea::placeholder {
    color: #94a3b8 !important;
}

/* Light badges (slate) used in vendor/my-actions */
body.dark-mode-active #riskRegisterPage .bg-slate-100.text-slate-600 {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
}

/* Soften “light alert” backgrounds used in dynamic HTML */
body.dark-mode-active #riskRegisterPage .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.14) !important;
}
body.dark-mode-active #riskRegisterPage .bg-amber-100,
body.dark-mode-active #riskRegisterPage .bg-amber-50 {
    background-color: rgba(245, 158, 11, 0.14) !important;
}
body.dark-mode-active #riskRegisterPage .bg-indigo-50 {
    background-color: rgba(99, 102, 241, 0.14) !important;
}
body.dark-mode-active #riskRegisterPage .bg-purple-50 {
    background-color: rgba(168, 85, 247, 0.14) !important;
}

/* Make indigo text readable in dark */
body.dark-mode-active #riskRegisterPage .text-indigo-600,
body.dark-mode-active #riskRegisterPage .text-indigo-700,
body.dark-mode-active #riskRegisterPage .text-indigo-800 {
    color: #a5b4fc !important;
}

/* --------- Risk Register modals (outside #riskRegisterPage too) --------- */
body.dark-mode-active #vendorPreviewModal > div,
body.dark-mode-active #historyModal > div,
body.dark-mode-active #addAssetModal > div,
body.dark-mode-active #complianceModal > div,
body.dark-mode-active #rowSummaryModal > div {
    background-color: #111827 !important;
    border-color: #374151 !important;
}

/* Modal headers/footers that use slate backgrounds */
body.dark-mode-active #vendorPreviewModal .bg-slate-50,
body.dark-mode-active #historyModal .bg-slate-50,
body.dark-mode-active #complianceModal .bg-slate-50,
body.dark-mode-active #complianceModal .bg-slate-50\/80,
body.dark-mode-active #vendorPreviewModal .bg-white,
body.dark-mode-active #vendorPreviewModal .bg-slate-100,
body.dark-mode-active #historyModal .bg-white {
    background-color: #0f172a !important;
    border-color: #374151 !important;
}

/* Modal text */
body.dark-mode-active #vendorPreviewModal .text-slate-800,
body.dark-mode-active #historyModal .text-slate-800,
body.dark-mode-active #complianceModal .text-slate-800 {
    color: #f1f5f9 !important;
}
body.dark-mode-active #vendorPreviewModal .text-slate-600,
body.dark-mode-active #vendorPreviewModal .text-slate-500,
body.dark-mode-active #historyModal .text-slate-500,
body.dark-mode-active #complianceModal .text-slate-500,
body.dark-mode-active #complianceModal .text-slate-600 {
    color: #cbd5e1 !important;
}

/* Vendor preview iframe + loading overlay */
body.dark-mode-active #vendorPreviewModal iframe.bg-white {
    background-color: #0b1220 !important;
    border-color: #374151 !important;
}
body.dark-mode-active #pdfPreviewLoading {
    background-color: rgba(15, 23, 42, 0.82) !important;
}
body.dark-mode-active #previewEmailDisplay.bg-slate-100 {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
}

/* Buttons inside modals that rely on slate hovers */
body.dark-mode-active #vendorPreviewModal .hover\:bg-slate-100:hover,
body.dark-mode-active #historyModal .hover\:bg-slate-200\/50:hover,
body.dark-mode-active #vendorPreviewModal .hover\:bg-slate-200\/50:hover,
body.dark-mode-active #complianceModal .hover\:bg-slate-200\/50:hover {
    background-color: #1f2937 !important;
}

/* =========================================================
   DARK MODE PATCH (EXTRA): Shared Modals / Popups
   ========================================================= */

/* Overlay/backdrop */
body.dark-mode-active .modal-overlay,
body.dark-mode-active #addAssetModal,
body.dark-mode-active #complianceModal,
body.dark-mode-active #policyManagerModal,
body.dark-mode-active #policyPackEditModal,
body.dark-mode-active #policyRuleEditModal,
body.dark-mode-active #multiSelectModal,
body.dark-mode-active #riskSettingsModal,  /* Added */
body.dark-mode-active #incidentModal,
body.dark-mode-active #incidentHistoryModal { /* Added */
    background-color: rgba(2, 6, 23, 0.72) !important;
}

/* Base modal surfaces */
body.dark-mode-active .modal-content-base,
body.dark-mode-active .modal-content-google-search,
body.dark-mode-active #multiSelectModal > div,
body.dark-mode-active #addAssetModal > div,
body.dark-mode-active #complianceModal > div,
body.dark-mode-active #policyManagerModal > div,
body.dark-mode-active #policyPackEditModal > div,
body.dark-mode-active #policyRuleEditModal > div,
body.dark-mode-active #manageCustomColumnsModal > div,
body.dark-mode-active #recentChangesModal > div,
body.dark-mode-active #confirmationModal > div,
body.dark-mode-active #rowSummaryModal > div,
body.dark-mode-active #clientAlertsModal > div,
body.dark-mode-active #alertHistoryModal > div,
body.dark-mode-active #reportIssueModal > div,
body.dark-mode-active #generalFeedbackModal > div,
body.dark-mode-active #riskSettingsModal > div, /* Added */
body.dark-mode-active #incidentModal > div,
body.dark-mode-active #incidentHistoryModal > div { /* Added */
    background-color: #111827 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}

/* Headings + general text inside modals */
body.dark-mode-active .modal-title,
body.dark-mode-active #changesModalTitle,
body.dark-mode-active #multiSelectModalTitle,
body.dark-mode-active #manageCustomColumnsModalTitle,
body.dark-mode-active #rowSummaryModalTitle,
body.dark-mode-active #clientAlertsModalTitle,
body.dark-mode-active #reportIssueModalTitle,
body.dark-mode-active #feedbackModalTitle,
body.dark-mode-active .text-gray-800,
body.dark-mode-active .text-slate-800 {
    color: #f1f5f9 !important; /* slate-100 */
}

body.dark-mode-active .modal-message,
body.dark-mode-active .text-gray-600,
body.dark-mode-active .text-slate-700,
body.dark-mode-active .text-slate-600 {
    color: #cbd5e1 !important; /* slate-300 */
}

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

/* Section backgrounds frequently used in modals */
body.dark-mode-active .bg-slate-50,
body.dark-mode-active .bg-slate-50\/50,
body.dark-mode-active .bg-slate-50\/80,
body.dark-mode-active .bg-slate-100,
body.dark-mode-active .bg-white {
    background-color: #0f172a !important; /* slate-900 */
}

/* Borders/dividers in modals */
body.dark-mode-active .border-slate-100,
body.dark-mode-active .border-slate-200,
body.dark-mode-active .border-slate-300,
body.dark-mode-active .border-gray-300 {
    border-color: #334155 !important; /* slate-700 */
}

/* Close buttons (a lot use hover:bg-gray-100) */
body.dark-mode-active .modal-close-btn:hover,
body.dark-mode-active #closeChangesModalBtn:hover,
body.dark-mode-active #multiSelectModalCloseBtn:hover,
body.dark-mode-active #closeCustomColumnsModalBtn:hover,
body.dark-mode-active #rowSummaryCloseBtn:hover {
    background-color: #1f2937 !important; /* slate-800 */
}
body.dark-mode-active .modal-close-btn svg,
body.dark-mode-active #closeChangesModalBtn svg,
body.dark-mode-active #multiSelectModalCloseBtn svg {
    color: #cbd5e1 !important;
}

/* Inputs/selects/textarea inside any modal */
body.dark-mode-active .modal-overlay input,
body.dark-mode-active .modal-overlay select,
body.dark-mode-active .modal-overlay textarea,
body.dark-mode-active #googleSearchModal input,
body.dark-mode-active #googleSearchModal select,
body.dark-mode-active #googleSearchModal textarea,
body.dark-mode-active #riskSettingsModal input,   /* Added */
body.dark-mode-active #riskSettingsModal select,  /* Added */
body.dark-mode-active #incidentModal input,       /* Added */
body.dark-mode-active #incidentModal select,      /* Added */
body.dark-mode-active #incidentModal textarea {   /* Added */
    background-color: #0b1220 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}

body.dark-mode-active .modal-overlay input::placeholder,
body.dark-mode-active .modal-overlay textarea::placeholder,
body.dark-mode-active #multiSelectSearch::placeholder {
    color: #94a3b8 !important;
}

/* “Card” containers inside modals */
body.dark-mode-active #customColumnsListContainer,
body.dark-mode-active #policyRuleList,
body.dark-mode-active #policyPackList,
body.dark-mode-active #multiSelectOptionsList,
body.dark-mode-active #clientAlertsModalContent,
body.dark-mode-active #alertHistoryContainer {
    background-color: #0b1220 !important;
    border-color: #334155 !important;
}

/* Dropdown panel used in Add Asset modal */
body.dark-mode-active #assetSearchResults {
    background-color: #0b1220 !important;
    border-color: #334155 !important;
    color: #e5e7eb !important;
}
body.dark-mode-active #assetSearchResults .hover\:bg-slate-50:hover,
body.dark-mode-active #assetSearchResults .hover\:bg-gray-100:hover {
    background-color: #1f2937 !important;
}

/* Row Summary “privacy toggle” section */
body.dark-mode-active #privacyToggleContainer {
    border-color: #334155 !important;
}
body.dark-mode-active #privacyToggleContainer .text-slate-700 {
    color: #e5e7eb !important;
}

/* Button normalization inside modals (cancel/secondary buttons often bg-white/slate-200) */
body.dark-mode-active .modal-overlay .action-button.bg-white,
body.dark-mode-active .modal-overlay button.bg-white {
    background-color: #0b1220 !important;
    border-color: #334155 !important;
    color: #e5e7eb !important;
}
body.dark-mode-active .modal-overlay .action-button.bg-white:hover,
body.dark-mode-active .modal-overlay button.bg-white:hover {
    background-color: #111827 !important;
}

body.dark-mode-active .modal-overlay .action-button.bg-slate-200,
body.dark-mode-active .modal-overlay button.bg-slate-200 {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
}
body.dark-mode-active .modal-overlay .action-button.bg-slate-200:hover,
body.dark-mode-active .modal-overlay button.bg-slate-200:hover {
    background-color: #334155 !important;
}

/* “Clear all” / danger button in Alert History */
body.dark-mode-active #alertHistoryClearBtn.bg-red-50 {
    background-color: rgba(239, 68, 68, 0.14) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #fecaca !important; /* red-200 */
}
body.dark-mode-active #alertHistoryClearBtn:hover {
    background-color: rgba(239, 68, 68, 0.20) !important;
}

/* Policy Manager: left/right panes */
body.dark-mode-active #policyManagerModal .bg-slate-50,
body.dark-mode-active #policyManagerModal .bg-slate-50\/50 {
    background-color: #0b1220 !important;
}
body.dark-mode-active #policyManagerModal .w-2\/3.bg-white,
body.dark-mode-active #policyManagerModal .w-2\/3 .bg-white {
    background-color: #111827 !important;
}

/* Links / small action text */
body.dark-mode-active .text-blue-600,
body.dark-mode-active .text-indigo-600,
body.dark-mode-active .text-indigo-700 {
    color: #a5b4fc !important; /* indigo-300 */
}
body.dark-mode-active .hover\:text-blue-800:hover,
body.dark-mode-active .hover\:text-indigo-600:hover {
    color: #c7d2fe !important; /* indigo-200 */
}

/* Google search modal text blocks */
body.dark-mode-active #googleSearchModal h2,
body.dark-mode-active #googleSearchText {
    color: #cbd5e1 !important;
}

/* If markup keeps `hidden` on modal elements, prevent Tailwind's `display:none`
   from blocking `.active` animations */
.modal-overlay.hidden { display: flex; }
.modal-content-base.hidden { display: block; }
.modal-content-google-search.hidden { display: block; }

/* ===== Missing utility helpers referenced in templates/JS ===== */

/* Basic visibility helper */
.hidden { display: none; }

/* Animation helpers */
.animate-fade-in { animation: fadeIn 0.35s ease-out both; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fadeInUp 0.35s ease-out both; }

/* Text helpers */
.word-break-all { word-break: break-all; overflow-wrap: anywhere; }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Scrollbar helper (Mac Style - Sleek & Hidden by default) */
.custom-scrollbar { scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color 0.3s; }
.custom-scrollbar:hover { scrollbar-color: #cbd5e1 transparent; }
.custom-scrollbar::-webkit-scrollbar { width: 5px; height: 5px; } /* Thinner */
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; transition: background-color 0.3s; }
.custom-scrollbar:hover::-webkit-scrollbar-thumb { background: #cbd5e1; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ===== Aliases / missing component classes used in modals.html ===== */
.modal-text { font-size: 1rem; color: #64748b; margin-bottom: 1.5rem; line-height: 1.5; }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.modal-body { display: flex; flex-direction: column; gap: 1rem; }

.input-label { display: block; font-size: 0.95rem; font-weight: 600; color: #334155; margin-bottom: 0.4rem; }
.small-help-text { font-size: 0.85rem; color: #94a3b8; margin-top: 0.35rem; }

.input-base, .textarea-base { display: block; width: 100%; font-size: 1rem; color: #334155; }
.textarea-base { min-height: 8rem; resize: vertical; }

/* Google search modal uses a distinct class in modals.html */
.modal-content-google-search {
  position: relative;
  background-color: white;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  transform: translateY(8px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  opacity: 0;
}

.modal-content-google-search.active {
  opacity: 1;
  transform: translateY(0);
}

.modal-content-google-search.hidden { display: block; }

/* Fix Manage Policies Row Highlight in Dark Mode */
body.dark-mode-active .policy-row:hover {
    background-color: rgba(30, 41, 59, 0.5) !important; /* slate-800/50 */
}

/* Fix Policy Pack Selection Background */
body.dark-mode-active .policy-pack-chip.selected {
    background-color: rgba(79, 70, 229, 0.2) !important; /* indigo-600/20 */
    border-color: rgba(79, 70, 229, 0.4) !important;
    color: #e0e7ff !important;
}

/* Fix Risk Level Labels */
body.dark-mode-active .badge-high-risk {
    background-color: rgba(127, 29, 29, 0.3) !important; /* red-900/30 */
    color: #fca5a5 !important; /* red-300 */
    border: 1px solid rgba(127, 29, 29, 0.5) !important;
}

/* =========================================================
   SURGICAL DARK MODE OVERRIDES (Risk Register)
   These ensure specific elements (Advisory, Alerts, Badges) 
   use the correct dimmed colors, overriding generic patches.
   ========================================================= */

/* 1. Strategic Advisory Box (Modal) - Force Dark Slate */
body.dark-mode-active #complianceModal .bg-indigo-50 {
    background-color: rgba(30, 41, 59, 0.5) !important; /* slate-800/50 */
    border-color: #3730a3 !important; /* indigo-800 */
}

/* 2. Litigation Alert Box (Modal) - Force Dark Red Transparent */
body.dark-mode-active #complianceModal .bg-red-50 {
    background-color: rgba(127, 29, 29, 0.2) !important; /* red-900/20 */
    border-color: #991b1b !important; /* red-800 */
    color: #fca5a5 !important; /* red-300 */
}

/* 3. Verified Lawsuit Badge (Table & Modal) */
body.dark-mode-active #riskRegisterPage .bg-red-100,
body.dark-mode-active #complianceModal .bg-red-100 {
    background-color: rgba(127, 29, 29, 0.3) !important; /* red-900/30 */
    color: #fca5a5 !important; /* red-300 */
    border-color: rgba(127, 29, 29, 0.5) !important;
}

/* 4. Action Required (User) - Purple */
body.dark-mode-active #riskRegisterPage .bg-purple-100,
body.dark-mode-active #complianceModal .bg-purple-100 {
    background-color: rgba(88, 28, 135, 0.3) !important; /* purple-900/30 */
    color: #e9d5ff !important; /* purple-200 */
    border-color: rgba(88, 28, 135, 0.5) !important;
}

/* 5. DB Insight / Policy Badges - Indigo */
body.dark-mode-active #riskRegisterPage .bg-indigo-100,
body.dark-mode-active #complianceModal .bg-indigo-100 {
    background-color: rgba(49, 46, 129, 0.3) !important; /* indigo-900/30 */
    color: #c7d2fe !important; /* indigo-200 */
    border-color: rgba(49, 46, 129, 0.5) !important;
}

/* 6. GLOBAL HOVER FIX (Tables & Lists) */
/* Targets specific modals and views that were missed */

/* A. Policy Pack Rules (Table Rows inside Policy Manager Modal) */
body.dark-mode-active #policyManagerModal tr:hover,
body.dark-mode-active #policyManagerModal tr.hover\:bg-slate-50:hover {
    background-color: rgba(30, 41, 59, 0.4) !important; /* slate-800/40 */
}

/* B. Compliance Actions (Divs inside Compliance Modal) */
/* Targets the specific action items list */
body.dark-mode-active #complianceModal .hover\:bg-slate-50:hover {
    background-color: rgba(30, 41, 59, 0.4) !important; /* slate-800/40 */
}

/* C. "My Actions" Tab (Divs inside the main page tab) */
body.dark-mode-active #myActionsView .hover\:bg-slate-50:hover {
    background-color: rgba(30, 41, 59, 0.4) !important; /* slate-800/40 */
}

/* D. Main Risk Register Table (Table Rows) */
body.dark-mode-active #riskRegisterPage tr:hover,
body.dark-mode-active #riskRegisterPage tr.hover\:bg-slate-50:hover {
    background-color: rgba(30, 41, 59, 0.4) !important; /* slate-800/40 */
}

/* E. Vendor Governance Table (Table Rows) */
body.dark-mode-active #vendorsView tr:hover {
    background-color: rgba(30, 41, 59, 0.4) !important; /* slate-800/40 */
}


/* =========================================================
   DASHBOARD TECH STACK CARD - DARK MODE OVERRIDES
   ========================================================= */

/* 1. Main Card Container */
body.dark-mode-active #techStackCardContent {
    background-color: #111827 !important; /* slate-900 */
    border-color: #374151 !important;     /* slate-700 */
}

/* 2. Critical Risk Items (Specific Class Strategy) */
/* Targets the Left Column: Muted dark background with specific borders */
body.dark-mode-active #techStackCardContent .critical-risk-item {
    background-color: rgba(30, 41, 59, 0.6) !important; /* slate-800/60 */
    border-left-color: #ef4444 !important;              /* red-500 */
    border-top-color: #374151 !important;               /* slate-700 */
    border-bottom-color: #374151 !important;            /* slate-700 */
    border-right-color: #374151 !important;             /* slate-700 */
}

/* 3. Badges (Tiny pills inside Critical Risks) */
body.dark-mode-active #techStackCardContent .risk-badge {
    background-color: rgba(127, 29, 29, 0.2) !important; /* dark red transparent */
    border-color: rgba(153, 27, 27, 0.4) !important;     /* dark red border */
    color: #fca5a5 !important;                           /* red-300 */
}

/* 4. Pending Actions & Generic Backgrounds */
/* Targets the Right Column (Pending Actions) and general white areas */
body.dark-mode-active #techStackCardContent .bg-slate-50,
body.dark-mode-active #techStackCardContent .bg-white {
    background-color: rgba(30, 41, 59, 0.4) !important; /* slate-800/40 */
    border-color: #374151 !important;                   /* slate-700 */
}

/* 5. Text Color Overrides */
body.dark-mode-active #techStackCardContent .text-slate-700 {
    color: #e2e8f0 !important; /* slate-200 */
}
body.dark-mode-active #techStackCardContent .text-slate-500,
body.dark-mode-active #techStackCardContent .text-slate-400 {
    color: #94a3b8 !important; /* slate-400 */
}

/* Specific: Force Critical Risk Reason Text to Grey (Not Red) */
body.dark-mode-active #techStackCardContent .risk-reason-text {
    color: #94a3b8 !important; /* slate-400 */
}

/* General Red Text (Fallbacks for other red text) */
body.dark-mode-active #techStackCardContent .text-red-700 {
    color: #fca5a5 !important; /* red-300 */
}
body.dark-mode-active #techStackCardContent .text-red-600 {
    color: #f87171 !important; /* red-400 */
}

/* 6. Border Overrides */
body.dark-mode-active #techStackCardContent .border-slate-100,
body.dark-mode-active #techStackCardContent .border-slate-200 {
    border-color: #374151 !important; /* slate-700 */
}
body.dark-mode-active #techStackCardContent .border-red-100 {
    border-color: rgba(153, 27, 27, 0.3) !important;
}


/* Risk Settings & Incident Modal Section Backgrounds */
body.dark-mode-active #riskSettingsModal .bg-slate-50,
body.dark-mode-active #incidentModal .bg-slate-50 {
    background-color: #0b1220 !important;
    border-color: #374151 !important;
}

/* Incident History Modal - Red Header Dark Mode */
body.dark-mode-active #incidentHistoryModal .bg-red-50 {
    background-color: #450a0a !important; /* Dark Red Background */
    border-bottom-color: #7f1d1d !important; /* Dark Red Border */
}

body.dark-mode-active #incidentHistoryModal h3.text-red-800 {
    color: #fca5a5 !important; /* Light Red Text */
}

body.dark-mode-active #incidentHistoryModal p.text-red-600 {
    color: #fecaca !important; /* Lighter Red Subtitle */
}

body.dark-mode-active #incidentHistoryModal button.text-red-400 {
    color: #f87171 !important; /* Bright Red Icon */
}

body.dark-mode-active #incidentHistoryModal button.hover\:bg-red-200\/50:hover {
    background-color: rgba(127, 29, 29, 0.4) !important; /* Dark Red Hover */
}


/* Modern View Name Badge */
.view-name-badge {
    margin-left: 12px;
    padding: 0.35rem 1rem;
    
    /* Transparent Brand Green Style */
    background-color: rgba(175, 211, 83, 0.15); /* #afd353 at 15% opacity */
    color: #6a8522;                              /* Darker Green for readability on white */
    border: 1px solid #afd353;                   /* Brand Green Border */
    
    border-radius: 9999px;     /* Pill shape */
    font-size: 0.75rem;        /* Sleek small text */
    font-weight: 700;          /* Bold */
    text-transform: uppercase; /* Cool uppercase look */
    letter-spacing: 0.05em;    /* Spaced out letters */
    white-space: nowrap;
    
    display: inline-flex;
    align-items: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

/* Dark Mode Override for Badge */
body.dark-mode-active .view-name-badge {
    background-color: rgba(175, 211, 83, 0.15); /* Transparent green */
    color: #afd353;                             /* Brand Green Text (Pops on dark bg) */
    border-color: #afd353;     
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* =========================================================
   DASHBOARD SYSTEM METRICS CARD - APPLE/SAFARI FIXES
   ========================================================= */
/* Forces opaque backgrounds in Light Mode to prevent transparency rendering issues on Apple devices. 
   Includes hover states to maintain interactivity since ID selectors override utility classes. */

#metricNewsCard { background-color: #eff6ff; }
#metricNewsCard:hover { background-color: #dbeafe; }

#metricCasesCard { background-color: #ecfdf5; }
#metricCasesCard:hover { background-color: #d1fae5; }

#metricRegsCard { background-color: #fffbeb; }
#metricRegsCard:hover { background-color: #fef3c7; }

#metricVendorsCard { background-color: #faf5ff; }
#metricVendorsCard:hover { background-color: #f3e8ff; }

#metricModelsCard { background-color: #eef2ff; }
#metricModelsCard:hover { background-color: #e0e7ff; }

#metricServicesCard { background-color: #fdf2f8; }
#metricServicesCard:hover { background-color: #fce7f3; }


/* =========================================================
   DASHBOARD SYSTEM METRICS CARD - DARK MODE OVERRIDES
   ========================================================= */

/* 1. Main Card Container */
body.dark-mode-active #systemMetricsCardContent {
    background-color: #111827 !important; /* slate-900 */
}

/* 2. Loading State (Pulse) */
body.dark-mode-active #systemMetricsCardContent .bg-slate-50 {
    background-color: #1f2937 !important; /* slate-800 */
}

/* 3. Individual Metric Cards (Backgrounds, Borders & Text) */

/* News (Blue) */
body.dark-mode-active #metricNewsCard {
    background-color: rgba(30, 58, 138, 0.2) !important; /* blue-900/20 */
    border-color: rgba(30, 58, 138, 0.5) !important;     /* blue-900/50 */
}
body.dark-mode-active #metricNewsCard:hover {
    background-color: rgba(30, 58, 138, 0.3) !important;
}
body.dark-mode-active #metricNewsCard .bg-blue-100 {
    background-color: rgba(30, 58, 138, 0.5) !important; /* blue-900/50 (Icon Circle) */
    color: #93c5fd !important; /* blue-300 */
}
body.dark-mode-active #metricNewsCard .text-blue-700 {
    color: #eff6ff !important; /* blue-50 (Big Number) */
}
body.dark-mode-active #metricNewsCard .text-blue-600\/70 {
    color: #bfdbfe !important; /* blue-200 (Label) */
    opacity: 0.7;
}

/* Cases (Emerald) */
body.dark-mode-active #metricCasesCard {
    background-color: rgba(6, 78, 59, 0.2) !important; /* emerald-900/20 */
    border-color: rgba(6, 78, 59, 0.5) !important;
}
body.dark-mode-active #metricCasesCard:hover {
    background-color: rgba(6, 78, 59, 0.3) !important;
}
body.dark-mode-active #metricCasesCard .bg-emerald-100 {
    background-color: rgba(6, 78, 59, 0.5) !important;
    color: #6ee7b7 !important; /* emerald-300 */
}
body.dark-mode-active #metricCasesCard .text-emerald-700 {
    color: #ecfdf5 !important; /* emerald-50 */
}
body.dark-mode-active #metricCasesCard .text-emerald-600\/70 {
    color: #a7f3d0 !important; /* emerald-200 */
    opacity: 0.7;
}

/* Regulations (Amber) */
body.dark-mode-active #metricRegsCard {
    background-color: rgba(120, 53, 15, 0.2) !important; /* amber-900/20 */
    border-color: rgba(120, 53, 15, 0.5) !important;
}
body.dark-mode-active #metricRegsCard:hover {
    background-color: rgba(120, 53, 15, 0.3) !important;
}
body.dark-mode-active #metricRegsCard .bg-amber-100 {
    background-color: rgba(120, 53, 15, 0.5) !important;
    color: #fcd34d !important; /* amber-300 */
}
body.dark-mode-active #metricRegsCard .text-amber-700 {
    color: #fffbeb !important; /* amber-50 */
}
body.dark-mode-active #metricRegsCard .text-amber-600\/70 {
    color: #fde68a !important; /* amber-200 */
    opacity: 0.7;
}

/* Vendors (Purple) */
body.dark-mode-active #metricVendorsCard {
    background-color: rgba(88, 28, 135, 0.2) !important; /* purple-900/20 */
    border-color: rgba(88, 28, 135, 0.5) !important;
}
body.dark-mode-active #metricVendorsCard:hover {
    background-color: rgba(88, 28, 135, 0.3) !important;
}
body.dark-mode-active #metricVendorsCard .bg-purple-100 {
    background-color: rgba(88, 28, 135, 0.5) !important;
    color: #d8b4fe !important; /* purple-300 */
}
body.dark-mode-active #metricVendorsCard .text-purple-700 {
    color: #faf5ff !important; /* purple-50 */
}
body.dark-mode-active #metricVendorsCard .text-purple-600\/70 {
    color: #e9d5ff !important; /* purple-200 */
    opacity: 0.7;
}

/* Foundation Models (Indigo) */
body.dark-mode-active #metricModelsCard {
    background-color: rgba(49, 46, 129, 0.2) !important; /* indigo-900/20 */
    border-color: rgba(49, 46, 129, 0.5) !important;
}
body.dark-mode-active #metricModelsCard:hover {
    background-color: rgba(49, 46, 129, 0.3) !important;
}
body.dark-mode-active #metricModelsCard .bg-indigo-100 {
    background-color: rgba(49, 46, 129, 0.5) !important;
    color: #a5b4fc !important; /* indigo-300 */
}
body.dark-mode-active #metricModelsCard .text-indigo-700 {
    color: #eef2ff !important; /* indigo-50 */
}
body.dark-mode-active #metricModelsCard .text-indigo-600\/70 {
    color: #c7d2fe !important; /* indigo-200 */
    opacity: 0.7;
}

/* Multimodal Services (Pink) */
body.dark-mode-active #metricServicesCard {
    background-color: rgba(131, 24, 67, 0.2) !important; /* pink-900/20 */
    border-color: rgba(131, 24, 67, 0.5) !important;
}
body.dark-mode-active #metricServicesCard:hover {
    background-color: rgba(131, 24, 67, 0.3) !important;
}
body.dark-mode-active #metricServicesCard .bg-pink-100 {
    background-color: rgba(131, 24, 67, 0.5) !important;
    color: #f9a8d4 !important; /* pink-300 */
}
body.dark-mode-active #metricServicesCard .text-pink-700 {
    color: #fdf2f8 !important; /* pink-50 */
}
body.dark-mode-active #metricServicesCard .text-pink-600\/70 {
    color: #fbcfe8 !important; /* pink-200 */
    opacity: 0.7;
}


/* --- Modern Toggle Switch Override --- */
/* Ensures the toggles look like Flowbite toggles regardless of Tailwind config */
.peer:checked ~ .toggle-bg {
    background-color: #2563eb; /* blue-600 */
}
.peer:checked ~ .toggle-bg:after {
    transform: translateX(100%);
    border-color: white;
}
.peer:focus ~ .toggle-bg {
    outline: none;
    box-shadow: 0 0 0 4px rgba(164, 202, 254, 0.5); /* blue-200 ring */
}
/* Instant Alert Green Variant */
#cases_send_instant:checked ~ .toggle-bg,
#regulatory_landscape_send_instant:checked ~ .toggle-bg,
#vendors_send_instant:checked ~ .toggle-bg,
#foundation_models_send_instant:checked ~ .toggle-bg,
#multimodal_services_send_instant:checked ~ .toggle-bg,
#news_articles_send_instant:checked ~ .toggle-bg {
    background-color: #10b981; /* emerald-500 */
}

/* Dark Mode Toggle Fixes */
body.dark-mode-active .toggle-bg {
    background-color: #4b5563; /* slate-600 */
    border: 1px solid #374151;
}
body.dark-mode-active .peer:checked ~ .toggle-bg {
    background-color: #3b82f6; /* blue-500 */
    border-color: #3b82f6;
}
/* Ensure the white circle stays white in dark mode */
body.dark-mode-active .toggle-bg:after {
    background-color: #ffffff;
    border-color: #9ca3af;
}
body.dark-mode-active .peer:checked ~ .toggle-bg:after {
    border-color: #ffffff;
}

/* Prevent form inputs from stretching infinitely on large screens */
.admin-section .form-input, 
.admin-section .form-select {
    max-width: 800px; /* Comfortable reading width */
}


/* ==========================================================================
   ONBOARDING MODAL MODERNIZATION & DARK MODE
   ========================================================================== */

/* --- Custom Checkbox Behaviors (Light Mode) --- */
.modern-checkbox-card:hover {
    border-color: #a5b4fc; /* indigo-300 */
    background-color: #eef2ff; /* indigo-50 */
}
.modern-checkbox-card:has(input:checked) {
    border-color: #6366f1; /* indigo-500 */
    background-color: #eef2ff; /* indigo-50 */
}
.modern-checkbox-card:has(input:checked) .checkbox-label-text {
    color: #4338ca; /* indigo-700 */
}

/* Pill Checkboxes */
.modern-pill-checkbox:hover {
    border-color: #a5b4fc;
    background-color: #f8fafc;
}
.modern-pill-checkbox:has(input:checked) {
    border-color: #6366f1;
    background-color: #eef2ff;
}
.modern-pill-checkbox:has(input:checked) span {
    color: #4338ca;
    font-weight: 700;
}

/* --- Dark Mode Overrides for Onboarding Modal --- */

/* Modal Container & Wrappers */
body.dark-mode-active #onboardingModal > div {
    background-color: #1e293b !important; /* slate-800 */
    border-color: #334155 !important; /* slate-700 */
}
body.dark-mode-active #onboardingModal .bg-slate-50 {
    background-color: #0f172a !important; /* slate-900 */
}
body.dark-mode-active #onboardingModal .border-slate-100,
body.dark-mode-active #onboardingModal .border-slate-200,
body.dark-mode-active #onboardingModal .border-indigo-100 {
    border-color: #334155 !important; /* slate-700 */
}

/* Typography Overrides */
body.dark-mode-active #onboardingModal .text-slate-800,
body.dark-mode-active #onboardingModal .text-indigo-900 {
    color: #f1f5f9 !important; /* slate-100 */
}
body.dark-mode-active #onboardingModal .text-slate-700 {
    color: #e2e8f0 !important; /* slate-200 */
}
body.dark-mode-active #onboardingModal .text-slate-600 {
    color: #cbd5e1 !important; /* slate-300 */
}
body.dark-mode-active #onboardingModal .text-slate-500 {
    color: #94a3b8 !important; /* slate-400 */
}

/* Modern Inputs (Selects, Textareas, Text Inputs) */
body.dark-mode-active #onboardingModal .modern-input {
    background-color: #0b1220 !important;
    border-color: #4b5563 !important;
    color: #f1f5f9 !important;
}
body.dark-mode-active #onboardingModal .modern-input:focus {
    border-color: #818cf8 !important; /* indigo-400 */
    box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.2) !important;
}

/* Custom Checkbox Cards (Dark Mode) */
body.dark-mode-active #onboardingModal .modern-checkbox-card {
    background-color: #1e293b;
    border-color: #4b5563;
}
body.dark-mode-active #onboardingModal .modern-checkbox-card:hover {
    background-color: #334155; 
    border-color: #818cf8;
}
body.dark-mode-active #onboardingModal .modern-checkbox-card:has(input:checked) {
    background-color: rgba(99, 102, 241, 0.1); /* indigo/10 */
    border-color: #818cf8; /* indigo-400 */
}
body.dark-mode-active #onboardingModal .modern-checkbox-card:has(input:checked) .checkbox-label-text {
    color: #a5b4fc; /* indigo-300 */
}

/* Pill Checkboxes (Dark Mode) */
body.dark-mode-active #onboardingModal .modern-pill-checkbox {
    border-color: #4b5563;
}
body.dark-mode-active #onboardingModal .modern-pill-checkbox:hover {
    background-color: #334155;
    border-color: #818cf8;
}
body.dark-mode-active #onboardingModal .modern-pill-checkbox:has(input:checked) {
    background-color: rgba(99, 102, 241, 0.15);
    border-color: #818cf8;
}
body.dark-mode-active #onboardingModal .modern-pill-checkbox:has(input:checked) span {
    color: #a5b4fc;
}

/* Compact Checkboxes (Sectors/Geos) & Box Base */
body.dark-mode-active #onboardingModal .checkbox-box {
    border-color: #64748b; /* slate-500 */
}
body.dark-mode-active #onboardingModal .compact-checkbox:hover span {
    color: #f1f5f9; /* slate-100 */
}
body.dark-mode-active #onboardingModal .peer:checked ~ .checkbox-box {
    background-color: #6366f1 !important; /* indigo-500 */
    border-color: #6366f1 !important;
}


/* =========================================
   FROZEN (STICKY) COLUMNS
   ========================================= */

/* Left Pinned Columns Base */
.sticky-column-left {
    position: sticky !important;
    z-index: 10;
    box-shadow: 2px 0 5px -2px rgba(0,0,0,0.1); /* Subtle drop shadow on the right edge */
}

/* Right Actions Column Base */
.sticky-column-actions {
    position: sticky !important;
    right: 0;
    z-index: 10;
    box-shadow: -2px 0 5px -2px rgba(0,0,0,0.1); /* Subtle drop shadow on the left edge */
}

/* Header Specific (Must sit above the scrolling body cells) */
thead th.sticky-column-left,
thead th.sticky-column-actions {
    z-index: 22 !important; 
    background-color: #f8fafc !important; /* Forces solid bg over scrolling content */
}

/* Make sure table rows have a solid background, or sticky text will overlap */
#mainDataTable tbody tr { background-color: #ffffff; }
#mainDataTable tbody tr:hover { background-color: #f1f5f9; }

/* The Pin Toggle Button UI */
.pin-toggle-btn {
    background: none; 
    border: none; 
    cursor: pointer;
    padding: 4px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    color: #cbd5e1; 
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0; /* Hidden until header hover for a clean UI */
    margin-left: auto; /* Pushes it to the far right of the header flex container */
}

/* Show on header hover */
th:hover .pin-toggle-btn { opacity: 1; }

.pin-toggle-btn:hover {
    color: #1e293b;
    background-color: #e2e8f0;
    border-radius: 6px;
}

/* Active (Pinned) State Magic */
.pin-toggle-btn.active {
    color: #3b82f6; 
    opacity: 1; /* Always visible if pinned */
    transform: rotate(-45deg); /* Slick tilt to indicate it is "pressed in" */
}

/* Dark Mode Support */
body.dark-mode-active thead th.sticky-column-left,
body.dark-mode-active thead th.sticky-column-actions {
    background-color: #374151 !important; 
}
body.dark-mode-active #mainDataTable tbody tr { background-color: #1f2937; }
body.dark-mode-active #mainDataTable tbody tr:hover { background-color: #374151; }

/* =========================================
   FIX: OPAQUE BACKGROUNDS FOR STICKY CELLS
   ========================================= */

/* 1. Force solid backgrounds directly on the sticky TD elements */
#mainDataTable tbody td.sticky-column-left,
#mainDataTable tbody td.sticky-column-actions {
    background-color: #ffffff; /* Solid white blocks scrolling content */
    z-index: 10; /* Ensures it sits above standard scrolling cells */
}

/* 2. Maintain the hover effect for sticky cells so they don't look broken */
#mainDataTable tbody tr:hover td.sticky-column-left,
#mainDataTable tbody tr:hover td.sticky-column-actions {
    background-color: #f1f5f9; /* Matches your standard row hover color */
}

/* 3. Dark Mode Overrides */
body.dark-mode-active #mainDataTable tbody td.sticky-column-left,
body.dark-mode-active #mainDataTable tbody td.sticky-column-actions {
    background-color: #1f2937 !important; /* Dark slate background */
}

body.dark-mode-active #mainDataTable tbody tr:hover td.sticky-column-left,
body.dark-mode-active #mainDataTable tbody tr:hover td.sticky-column-actions {
    background-color: #374151 !important; /* Dark slate hover */
}


/* ===========================================
   MODAL CENTERING FIXES
   =========================================== */
/* Forces modals that rely on Tailwind's 'hidden' class to restore flexbox centering when shown */
#savedViewsModal:not(.hidden),
#addAssetModal:not(.hidden),
#policyManagerModal:not(.hidden),
#policyPackEditModal:not(.hidden),
#policyRuleEditModal:not(.hidden),
#riskSettingsModal:not(.hidden),
#incidentModal:not(.hidden) {
    display: flex !important;
}


/* ===========================================
   DARK MODE: SAVED VIEWS MODAL & FILTER BADGE
   =========================================== */

/* 1. Active Filter Badge (Grid) */
body.dark-mode-active #activeFilterBadge span {
    background-color: rgba(49, 46, 129, 0.4) !important; /* indigo-900/40 */
    color: #c7d2fe !important; /* indigo-200 */
    border-color: rgba(67, 56, 202, 0.4) !important; /* indigo-700/40 */
}
body.dark-mode-active #activeFilterBadge span button {
    color: #c7d2fe !important;
}
body.dark-mode-active #activeFilterBadge span button:hover {
    color: #ffffff !important;
}

/* 2. "Save Current Filters" Box & Label */
body.dark-mode-active #savedViewsModal .bg-indigo-50\/80 {
    background-color: rgba(49, 46, 129, 0.2) !important; /* indigo-900/20 */
    border-color: rgba(55, 48, 163, 0.5) !important; /* indigo-800/50 */
}
body.dark-mode-active #savedViewsModal label.text-indigo-900 {
    color: #a5b4fc !important; /* indigo-300 */
}

/* 3. Input Field inside the Save Box */
body.dark-mode-active #newSavedViewName {
    background-color: #1e293b !important; /* slate-800 */
    border-color: #4b5563 !important; /* slate-600 */
    color: #e2e8f0 !important; /* slate-200 */
}
body.dark-mode-active #newSavedViewName::placeholder {
    color: #64748b !important; /* slate-500 */
}

/* 4. List Items in the Modal */
body.dark-mode-active #savedViewsList li {
    background-color: #1e293b !important; /* slate-800 */
    border-color: #374151 !important; /* slate-700 */
}
body.dark-mode-active #savedViewsList li:hover {
    border-color: #6366f1 !important; /* indigo-500 hover ring */
}
body.dark-mode-active #savedViewsList li span {
    color: #e2e8f0 !important; /* slate-200 text */
}

/* 5. "Apply" Buttons */
body.dark-mode-active #savedViewsList button:not([title="Delete View"]) {
    background-color: rgba(49, 46, 129, 0.4) !important; /* indigo-900/40 */
    color: #a5b4fc !important; /* indigo-300 */
}
body.dark-mode-active #savedViewsList button:not([title="Delete View"]):hover {
    background-color: rgba(55, 48, 163, 0.8) !important; /* indigo-800/80 */
    color: #ffffff !important;
}

/* 6. "Delete" Buttons */
body.dark-mode-active #savedViewsList button[title="Delete View"] {
    background-color: rgba(127, 29, 29, 0.2) !important; /* red-900/20 */
    color: #f87171 !important; /* red-400 */
}
body.dark-mode-active #savedViewsList button[title="Delete View"]:hover {
    background-color: rgba(127, 29, 29, 0.4) !important;
    color: #fca5a5 !important;
}


@media (min-width: 1024px) {
    #tableActionsToolbar {
        padding-right: 175px !important;
    }
}


/* ==========================================================================
   SURGICAL FIX: PREVENT TABLE VIEW BUTTON OVERLAP ON MOBILE
   ========================================================================== */
@media (max-width: 768px) {
    #backToCasesTableBtn,
    #backToRegulatoryTableBtn {
        /* Release the absolute centering that causes overlapping */
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        
        /* Allow it to sit naturally next to the logo in the flex row */
        margin-left: 0.75rem !important;
        margin-top: 0.25rem !important;
    }
    
    /* Ensure the left header group wraps gracefully if the screen is ultra-narrow */
    header > .flex.items-center.space-x-4 {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* ==========================================================================
   GLOBAL ANALYSIS POPOUT MODAL (PURE CSS FIX)
   ========================================================================== */

/* 1. Kill the transform traps on the parent pages so fixed positioning escapes */
body.global-analysis-expanded #regulatoryAnalysisPage,
body.global-analysis-expanded .page-view {
    transform: none !important;
    animation: none !important;
}

/* 2. Elevate the entire left panel containing the popup high above the map */
body.global-analysis-expanded #regulatoryAnalysisPage > main > div:first-child {
    z-index: 105000 !important;
}

/* 3. The Popout Card - Perfectly Centered & Solid White */
.global-summary-popout {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90vw !important;
    height: 90vh !important;
    max-width: 1600px !important;
    max-height: 90vh !important;
    z-index: 105001 !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 1rem !important;
    box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.85) !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Dark mode adjustments */
body.dark-mode-active .global-summary-popout {
    background-color: #1f2937 !important; /* slate-800 */
    border: 1px solid #374151 !important; /* slate-700 */
}

body.dark-mode-active #expandGlobalAnalysisBtn {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #cbd5e1 !important;
}

body.dark-mode-active #expandGlobalAnalysisBtn:hover {
    background-color: #4b5563 !important;
    color: #f8fafc !important;
}


/* ========================================================
   Licensing Deals Page - Dark Mode Overrides 
======================================================== */

body.dark-mode #licensingDealsPage .bg-white {
    background-color: #1e293b !important; /* Tailwind slate-800 */
    border-color: #334155 !important;
}

body.dark-mode #licensingDealsPage .bg-slate-50 {
    background-color: #0f172a !important; /* Tailwind slate-900 */
}

/* Typography Overrides */
body.dark-mode #licensingDealsPage h2,
body.dark-mode #licensingDealsPage h3,
body.dark-mode #licensingDealsPage th,
body.dark-mode #licensingDealsPage .font-bold {
    color: #f8fafc !important; /* Tailwind slate-50 */
}

body.dark-mode #licensingDealsPage td,
body.dark-mode #licensingDealsPage label,
body.dark-mode #licensingDealsPage span,
body.dark-mode #licensingDealsPage p {
    color: #cbd5e1 !important; /* Tailwind slate-300 */
}

/* Table Hover and Borders */
body.dark-mode #licensingTableBody tr:hover {
    background-color: #334155 !important;
}
body.dark-mode #licensingTableBody tr {
    border-color: #334155 !important;
}
body.dark-mode #licensingDealsPage table th {
    border-color: #334155 !important;
}

/* Modal Form Inputs Dark Mode */
body.dark-mode #licensingEditModal .bg-white {
    background-color: #0f172a !important;
}
body.dark-mode #licensingEditForm input,
body.dark-mode #licensingEditForm select,
body.dark-mode #licensingEditForm textarea {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

/* Badges / Chips */
body.dark-mode #licensingDealsPage .bg-green-100 {
    background-color: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}
body.dark-mode #licensingDealsPage .bg-slate-100 {
    background-color: #334155 !important;
    color: #cbd5e1 !important;
    border-color: #475569 !important;
}

/* =========================================================
   DARK MODE: PROJECTS & WORKSPACES UI OVERRIDES
   ========================================================= */

/* 1. Tables: Active Project Filter Badge */
body.dark-mode-active #activeProjectFilterBadge {
    background-color: rgba(49, 46, 129, 0.4) !important; /* indigo-900/40 */
    color: #c7d2fe !important; /* indigo-200 */
    border-color: rgba(67, 56, 202, 0.4) !important; /* indigo-700/40 */
}
body.dark-mode-active #activeProjectFilterBadge button {
    color: #c7d2fe !important;
}
body.dark-mode-active #activeProjectFilterBadge button:hover {
    color: #ffffff !important;
    background-color: rgba(67, 56, 202, 0.8) !important;
}

/* 2. Tech Stack / Risk Register: "Select Project" Button */
/* Inactive State (Slate) */
body.dark-mode-active button[onclick="window.openRiskProjectModal()"].bg-slate-200 {
    background-color: #374151 !important; /* slate-700 */
    color: #e2e8f0 !important; /* slate-200 */
    border-color: #4b5563 !important; /* slate-600 */
}
body.dark-mode-active button[onclick="window.openRiskProjectModal()"].bg-slate-200:hover {
    background-color: #4b5563 !important; /* slate-600 */
}
/* Active State (Indigo) */
body.dark-mode-active button[onclick="window.openRiskProjectModal()"].bg-indigo-50 {
    background-color: rgba(49, 46, 129, 0.4) !important; /* indigo-900/40 */
    color: #c7d2fe !important; /* indigo-200 */
    border-color: rgba(67, 56, 202, 0.4) !important; /* indigo-700/40 */
}

/* 3. Dashboard Projects Card: Folder Icons and +New Button */
/* Folder Icons (Indigo for Private, Sky for Shared) */
body.dark-mode-active #projectsCardContent .bg-indigo-50 {
    background-color: rgba(49, 46, 129, 0.4) !important;
    color: #a5b4fc !important;
}
body.dark-mode-active #projectsCardContent .bg-sky-50 {
    background-color: rgba(12, 74, 110, 0.4) !important; /* sky-900/40 */
    color: #7dd3fc !important; /* sky-300 */
}
/* +New Button (Card Header) */
body.dark-mode-active #projectsCard button.bg-indigo-100 {
    background-color: rgba(49, 46, 129, 0.4) !important;
    color: #a5b4fc !important;
}
body.dark-mode-active #projectsCard button.bg-indigo-100:hover {
    background-color: rgba(49, 46, 129, 0.8) !important;
    color: #ffffff !important;
}

/* 4. "View Items" Modal: "View Record" Button */
body.dark-mode-active #recentChangesModal button.bg-indigo-50 {
    background-color: rgba(49, 46, 129, 0.3) !important;
    color: #a5b4fc !important;
    border-color: rgba(67, 56, 202, 0.4) !important;
}
body.dark-mode-active #recentChangesModal button.bg-indigo-50:hover {
    background-color: rgba(49, 46, 129, 0.8) !important;
    color: #ffffff !important;
}

/* 5. Modals: Clear Filter, Close, and Done Buttons (Project Filter & Risk Filter) */
/* Clear Filter Button (Red) */
body.dark-mode-active #projectFilterModal button.bg-red-50 {
    background-color: rgba(127, 29, 29, 0.3) !important; /* red-900/30 */
    color: #fca5a5 !important; /* red-300 */
    border-color: rgba(127, 29, 29, 0.5) !important;
}
body.dark-mode-active #projectFilterModal button.bg-red-50:hover {
    background-color: rgba(127, 29, 29, 0.5) !important;
}

/* Clear Selection & Close Buttons (Slate) */
body.dark-mode-active #projectFilterModal button.bg-slate-200,
body.dark-mode-active #riskProjectModal button.bg-slate-200 {
    background-color: #374151 !important; /* slate-700 */
    color: #e2e8f0 !important; /* slate-200 */
}
body.dark-mode-active #projectFilterModal button.bg-slate-200:hover,
body.dark-mode-active #riskProjectModal button.bg-slate-200:hover {
    background-color: #4b5563 !important; /* slate-600 */
    color: #ffffff !important;
}

/* Done Buttons (Indigo) */
body.dark-mode-active #projectFilterModal button.bg-indigo-600,
body.dark-mode-active #riskProjectModal button.bg-indigo-600 {
    background-color: #4f46e5 !important; /* indigo-600 */
    color: #ffffff !important;
}
body.dark-mode-active #projectFilterModal button.bg-indigo-600:hover,
body.dark-mode-active #riskProjectModal button.bg-indigo-600:hover {
    background-color: #4338ca !important; /* indigo-700 */
}

/* 2. Select Project Modals (Global & Risk Register) - ACTIVE CARDS */
body.dark-mode-active #projectFilterList button.bg-indigo-50,
body.dark-mode-active #riskProjectList button.bg-indigo-50 {
    background-color: rgba(49, 46, 129, 0.4) !important; /* indigo-900/40 */
    border-color: rgba(99, 102, 241, 0.5) !important; /* indigo-500/50 */
}

body.dark-mode-active #projectFilterList button.bg-indigo-50 h4,
body.dark-mode-active #riskProjectList button.bg-indigo-50 h4 {
    color: #a5b4fc !important; /* indigo-300 */
}

body.dark-mode-active #projectFilterList button.bg-indigo-50 p,
body.dark-mode-active #riskProjectList button.bg-indigo-50 p {
    color: #818cf8 !important; /* indigo-400 */
}

/* 3. Select Project Modals - INACTIVE CARDS */
body.dark-mode-active #projectFilterList button.bg-white,
body.dark-mode-active #riskProjectList button.bg-white {
    background-color: #1e293b !important; /* slate-800 */
    border-color: #374151 !important; /* slate-700 */
}

body.dark-mode-active #projectFilterList button.bg-white:hover,
body.dark-mode-active #riskProjectList button.bg-white:hover {
    border-color: #6366f1 !important; /* indigo-500 hover */
    background-color: #334155 !important; /* slate-700 */
}

body.dark-mode-active #projectFilterList button.bg-white h4,
body.dark-mode-active #riskProjectList button.bg-white h4 {
    color: #f1f5f9 !important; /* slate-100 */
}

/* =========================================================
   DARK MODE: BADGES, TAGS, AND LCD OVERRIDES
   Targets Top Defendants, Mandate Status/Rule Badges, 
   and Compliance Baseline components.
   ========================================================= */

/* 1. Top Defendants & Red Badges (Case Analysis & Reg Analysis) */
body.dark-mode-active .bg-red-50.text-red-700 {
    background-color: rgba(127, 29, 29, 0.3) !important; /* red-900/30 */
    color: #fca5a5 !important; /* red-300 */
    border-color: rgba(153, 27, 27, 0.4) !important; /* red-800/40 */
}

/* 2. Global Mandate Badges (Status, Rule, Regime) */
body.dark-mode-active .bg-sky-50.text-sky-700 {
    background-color: rgba(12, 74, 110, 0.4) !important; /* sky-900/40 */
    color: #7dd3fc !important; /* sky-300 */
    border-color: rgba(12, 74, 110, 0.6) !important;
}

body.dark-mode-active .bg-indigo-50.text-indigo-700 {
    background-color: rgba(49, 46, 129, 0.4) !important; /* indigo-900/40 */
    color: #a5b4fc !important; /* indigo-300 */
    border-color: rgba(49, 46, 129, 0.6) !important;
}

body.dark-mode-active .bg-fuchsia-50.text-fuchsia-700 {
    background-color: rgba(112, 26, 117, 0.4) !important; /* fuchsia-900/40 */
    color: #f0abfc !important; /* fuchsia-300 */
    border-color: rgba(112, 26, 117, 0.6) !important;
}

body.dark-mode-active .bg-stone-50.text-stone-700 {
    background-color: rgba(28, 25, 23, 0.4) !important; /* stone-900/40 */
    color: #d6d3d1 !important; /* stone-300 */
    border-color: rgba(28, 25, 23, 0.6) !important;
}

body.dark-mode-active .bg-emerald-50.text-emerald-700 {
    background-color: rgba(6, 78, 59, 0.4) !important; /* emerald-900/40 */
    color: #6ee7b7 !important; /* emerald-300 */
    border-color: rgba(6, 78, 59, 0.6) !important;
}

body.dark-mode-active .bg-amber-50.text-amber-700 {
    background-color: rgba(120, 53, 15, 0.4) !important; /* amber-900/40 */
    color: #fcd34d !important; /* amber-300 */
    border-color: rgba(120, 53, 15, 0.6) !important;
}

body.dark-mode-active .bg-blue-50.text-blue-700 {
    background-color: rgba(30, 58, 138, 0.4) !important; /* blue-900/40 */
    color: #93c5fd !important; /* blue-300 */
    border-color: rgba(30, 58, 138, 0.6) !important;
}

body.dark-mode-active .bg-purple-50.text-purple-700 {
    background-color: rgba(88, 28, 135, 0.4) !important; /* purple-900/40 */
    color: #d8b4fe !important; /* purple-300 */
    border-color: rgba(88, 28, 135, 0.6) !important;
}

/* Fallback/Unknown Status Badges */
body.dark-mode-active .bg-slate-100.text-slate-500 {
    background-color: rgba(51, 65, 85, 0.4) !important; /* slate-700/40 */
    color: #cbd5e1 !important; /* slate-300 */
    border-color: rgba(51, 65, 85, 0.6) !important;
}

/* 3. Global Compliance Baseline (LCD) - "Required Action" Blocks */
/* Targets the green call-out boxes in the Regulatory Dashboard / Modals */
body.dark-mode-active .border-l-4.border-emerald-500.bg-slate-50,
body.dark-mode-active .border-l-4.border-emerald-500.bg-white {
    background-color: rgba(6, 78, 59, 0.2) !important; /* emerald-900/20 */
    border-color: #10b981 !important; /* emerald-500 */
}

/* Fix text inside the "Required Action" block */
body.dark-mode-active .border-l-4.border-emerald-500 .text-emerald-600 {
    color: #34d399 !important; /* emerald-400 */
}
body.dark-mode-active .border-l-4.border-emerald-500 .text-slate-800 {
    color: #f1f5f9 !important; /* slate-100 */
}

/* Fix standard text opacity for LCD descriptions */
body.dark-mode-active .global-item .text-slate-600 {
    color: #cbd5e1 !important; /* slate-300 */
}

/* =========================================================
   DARK MODE: TABLE LOADING & SAVING INDICATORS
   ========================================================= */

/* 1. Main Table Loading Indicator */
body.dark-mode-active #loading-indicator {
    background-color: #1e293b !important; /* slate-800 */
    color: #93c5fd !important; /* blue-300 */
    border: 1px solid #334155 !important; /* slate-700 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

body.dark-mode-active #loading-indicator svg {
    color: #60a5fa !important; /* blue-400 */
}

/* 2. Main Table Saving Indicator */
body.dark-mode-active #saving-indicator > div {
    background-color: rgba(6, 78, 59, 0.3) !important; /* emerald-900/30 */
    color: #6ee7b7 !important; /* emerald-300 */
    border: 1px solid rgba(6, 78, 59, 0.5) !important; /* emerald-900/50 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

body.dark-mode-active #saving-indicator svg {
    color: #34d399 !important; /* emerald-400 */
}

/* 1. Loading & Saving Spinners (Targeting the injected inner div) */
body.dark-mode-active #loading-indicator > div,
body.dark-mode-active #saving-indicator > div,
body.dark-mode-active #loading-indicator,
body.dark-mode-active #saving-indicator {
    background-color: #1e293b !important; /* slate-800 */
    color: #e2e8f0 !important; /* slate-200 */
    border: 1px solid #334155 !important; /* slate-700 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode-active #loading-indicator span,
body.dark-mode-active #saving-indicator span {
    color: #e2e8f0 !important;
}

body.dark-mode-active #loading-indicator svg,
body.dark-mode-active #saving-indicator svg {
    color: #60a5fa !important; /* blue-400 */
}


/* =========================================================
   CUSTOM COLUMN HEADER HIGHLIGHT (Low-Key Orange)
   ========================================================= */

/* Light Mode: Soft Orange (Tailwind orange-50) */
#mainDataTable th.custom-column-header,
thead th.custom-column-header.sticky-column-left {
    background-color: #fff7ed !important; 
    border-bottom: 2px solid #fed7aa !important; /* Slight orange-200 accent on bottom edge */
    color: #9a3412 !important; /* Darker orange-800 text so it pops nicely */
}

/* Dark Mode: Subtle Transparent Orange */
body.dark-mode-active #mainDataTable th.custom-column-header,
body.dark-mode-active thead th.custom-column-header.sticky-column-left {
    background-color: rgba(234, 88, 12, 0.15) !important; /* Orange-600 at 15% opacity */
    border-bottom: 2px solid #9a3412 !important; /* Orange-800 bottom edge */
    color: #fed7aa !important; /* Orange-200 text */
}

/* ==========================================================================
   GLOBAL SUMMARY TAB NAVIGATION (VISIBLE SCROLL FIX)
   ========================================================================== */

/* 1. CRITICAL: Stop the parent header container from stretching off-screen */
#globalSummaryContainerTop > div:first-child,
#globalSummaryContainerBottom > div:first-child {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;     /* Stops flexbox from expanding infinitely */
    overflow: hidden !important; /* Bounds the child container */
}

/* 2. The Scrollable Track */
.global-tabs-wrapper {
    display: flex !important; 
    flex-wrap: nowrap !important;  /* Force a single horizontal line */
    overflow-x: auto !important;   /* Enable horizontal scrolling */
    overflow-y: hidden !important; 
    -webkit-overflow-scrolling: touch;
    
    width: 100% !important;
    max-width: 100% !important;
    
    border-bottom: 1px solid #e2e8f0;
    margin-top: 1.25rem;
    padding-bottom: 4px !important; /* Space for the scrollbar */
    
    /* Make the scrollbar visible but sleek */
    scrollbar-width: thin !important;
    scrollbar-color: #cbd5e1 transparent !important;
}

/* WebKit override: Force scrollbar to show even if 'no-scrollbar' class is in HTML */
.global-tabs-wrapper.no-scrollbar::-webkit-scrollbar,
.global-tabs-wrapper::-webkit-scrollbar {
    display: block !important; 
    height: 6px !important;
}
.global-tabs-wrapper::-webkit-scrollbar-track {
    background: transparent !important;
}
.global-tabs-wrapper::-webkit-scrollbar-thumb {
    background-color: #cbd5e1 !important;
    border-radius: 10px !important;
}
.global-tabs-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8 !important;
}

/* 3. Base Tab Styling */
.global-tab-btn {
    flex-shrink: 0 !important; /* CRITICAL: Prevents tabs from squishing */
    white-space: nowrap !important;
    display: inline-flex !important; 
    align-items: center;
    justify-content: center;
    
    margin-right: 0.25rem !important; 
    padding: 0.5rem 1rem;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    
    background-color: #f8fafc; 
    color: #64748b; 
    border: 1px solid #e2e8f0;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    
    margin-bottom: -1px !important; 
    border-bottom-color: #e2e8f0 !important; 
}

.global-tab-btn:hover:not(.active) {
    background-color: #f1f5f9; 
    color: #1e293b; 
}

/* 4. Active Tab Styling */
.global-tab-btn.active {
    background-color: #ffffff !important; 
    color: #1d4ed8 !important; 
    border-color: #e2e8f0 !important;
    
    border-bottom: 1px solid #ffffff !important; 
    position: relative;
    z-index: 10;
    box-shadow: inset 0 3px 0 0 #3b82f6 !important; 
}

.tab-spacer {
    display: inline-block !important;
    flex-shrink: 0 !important;
    width: 1.5rem !important;
    pointer-events: none;
}

/* --- Dark Mode Overrides --- */
body.dark-mode-active .global-tabs-wrapper {
    border-bottom-color: #374151 !important;
    scrollbar-color: #4b5563 transparent !important;
}
body.dark-mode-active .global-tabs-wrapper.no-scrollbar::-webkit-scrollbar-thumb,
body.dark-mode-active .global-tabs-wrapper::-webkit-scrollbar-thumb {
    background-color: #4b5563 !important;
}
body.dark-mode-active .global-tabs-wrapper.no-scrollbar::-webkit-scrollbar-thumb:hover,
body.dark-mode-active .global-tabs-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #64748b !important;
}

body.dark-mode-active .global-tab-btn {
    background-color: #0f172a !important; 
    color: #94a3b8 !important; 
    border-color: #374151 !important; 
    border-bottom-color: #374151 !important; 
}
body.dark-mode-active .global-tab-btn:hover:not(.active) {
    background-color: #1e293b !important; 
    color: #e2e8f0 !important; 
}
body.dark-mode-active .global-tab-btn.active {
    background-color: #1f2937 !important; 
    color: #60a5fa !important; 
    border-color: #374151 !important; 
    border-bottom: 1px solid #1f2937 !important; 
    box-shadow: inset 0 3px 0 0 #3b82f6 !important; 
}

/* =========================================================
   LICENSING DASHBOARD METRIC CARD - DARK MODE
   ========================================================= */
body.dark-mode-active #metricLicensingCard {
    background-color: rgba(22, 78, 99, 0.2) !important; /* cyan-900/20 */
    border-color: rgba(22, 78, 99, 0.5) !important;     /* cyan-900/50 */
}
body.dark-mode-active #metricLicensingCard:hover {
    background-color: rgba(22, 78, 99, 0.3) !important;
}
body.dark-mode-active #metricLicensingCard .bg-cyan-200 {
    background-color: rgba(22, 78, 99, 0.5) !important; /* Icon background */
    color: #67e8f9 !important; /* cyan-300 icon color */
}
body.dark-mode-active #metricLicensingCard span.text-2xl {
    color: #ecfeff !important; /* cyan-50 Big Number */
}
body.dark-mode-active #metricLicensingCard span.text-xs {
    color: #a5f3fc !important; /* cyan-200 Label */
    opacity: 0.7;
}
body.dark-mode-active #metricLicensingCard:hover span.text-xs {
    color: #cffafe !important; /* cyan-100 Label hover */
    opacity: 1;
}


/* =========================================================
   JURISDICTION CASE LIST ITEMS - DARK MODE
   ========================================================= */
/* Main Button Background & Border */
body.dark-mode-active button[data-case-id] {
    background-color: #1f2937 !important; /* slate-800 */
    border-color: #374151 !important;     /* slate-700 */
}
body.dark-mode-active button[data-case-id]:hover {
    border-color: #38bdf8 !important;     /* sky-400 border on hover */
    background-color: #334155 !important; /* slate-700 slightly lighter */
}
/* Case Name Title */
body.dark-mode-active button[data-case-id] h5 {
    color: #f1f5f9 !important; /* slate-100 */
}
body.dark-mode-active button[data-case-id]:hover h5 {
    color: #38bdf8 !important; /* sky-400 text on hover */
}
/* Meta text & Paragraph snippet */
body.dark-mode-active button[data-case-id] .text-slate-500,
body.dark-mode-active button[data-case-id] .text-slate-600 {
    color: #94a3b8 !important; /* slate-400 */
}

/* --- Badges inside Case List --- */
/* Status Badge (Active - Emerald) */
body.dark-mode-active button[data-case-id] .bg-emerald-50 {
    background-color: rgba(6, 78, 59, 0.3) !important; /* emerald-900/30 */
    color: #6ee7b7 !important; /* emerald-300 */
    border-color: rgba(6, 78, 59, 0.5) !important;
}
/* Legal Claims Badge (Indigo) */
body.dark-mode-active button[data-case-id] .bg-indigo-50 {
    background-color: rgba(49, 46, 129, 0.4) !important; /* indigo-900/40 */
    color: #a5b4fc !important; /* indigo-300 */
    border-color: rgba(49, 46, 129, 0.6) !important;
}
/* Default/Unknown Badges (Slate) */
body.dark-mode-active button[data-case-id] .bg-slate-50 {
    background-color: rgba(51, 65, 85, 0.4) !important; 
    color: #cbd5e1 !important; 
    border-color: rgba(51, 65, 85, 0.6) !important;
}

/* Key Decisions Badge (Teal) */
body.dark-mode-active button[data-case-id] .bg-teal-50 {
    background-color: rgba(15, 118, 110, 0.4) !important; /* teal-900/40 */
    color: #5eead4 !important; /* teal-300 */
    border-color: rgba(15, 118, 110, 0.6) !important;
}


/* =========================================================
   ADMIN ANALYTICS METRIC CARDS - DARK MODE
   ========================================================= */
/* Target the blue card backgrounds */
body.dark-mode-active #analyticsSummary > div.bg-blue-50 {
    background-color: rgba(30, 58, 138, 0.3) !important; /* blue-900/30 */
    border-color: rgba(30, 58, 138, 0.6) !important;     /* blue-900/60 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

/* Target the large metric numbers */
body.dark-mode-active #analyticsSummary > div.bg-blue-50 .text-blue-700 {
    color: #bfdbfe !important; /* blue-200 */
}

/* Target the action text labels (e.g. VIEW CASES) */
body.dark-mode-active #analyticsSummary > div.bg-blue-50 .text-blue-600 {
    color: #93c5fd !important; /* blue-300 */
}

/* Optional: Also fix the leaderboards below the metric cards if they are bright */
body.dark-mode-active #loginSummaries .bg-white {
    background-color: #1e293b !important; /* slate-800 */
    border-color: #374151 !important;     /* slate-700 */
}
body.dark-mode-active #loginSummaries .bg-slate-50 {
    background-color: #0f172a !important; /* slate-900 */
    border-bottom-color: #334155 !important;
}
body.dark-mode-active #loginSummaries .text-slate-800,
body.dark-mode-active #loginSummaries .text-slate-700 {
    color: #f1f5f9 !important; /* slate-100 */
}
body.dark-mode-active #loginSummaries .text-blue-600 {
    color: #93c5fd !important; /* blue-300 */
}
body.dark-mode-active #loginSummaries tr.hover\:bg-slate-50:hover {
    background-color: #334155 !important; /* slate-700 */
}

/* =========================================================
   ADMIN ANALYTICS FILTER CONTROLS - DARK MODE
   ========================================================= */

/* The main Analytics Section container and Title */
body.dark-mode-active #analyticsSection {
    background-color: #1e293b !important; /* slate-800 */
    border-color: #374151 !important;     /* slate-700 */
}
body.dark-mode-active #analyticsTitle {
    color: #f8fafc !important; /* slate-50 */
}

/* The grey wrapper bar holding the filters */
body.dark-mode-active #analyticsSection .bg-slate-50 {
    background-color: #0f172a !important; /* slate-900 */
    border-color: #334155 !important;     /* slate-700 */
}

/* The labels above the dropdowns (Start Date, Filter by Client, etc.) */
body.dark-mode-active #analyticsSection label.text-slate-500 {
    color: #94a3b8 !important; /* slate-400 */
}

/* The Date Inputs and Select Dropdowns */
body.dark-mode-active #analyticsStartDate,
body.dark-mode-active #analyticsEndDate,
body.dark-mode-active #analyticsClientFilter,
body.dark-mode-active #analyticsUserFilter {
    background-color: #1e293b !important; /* slate-800 */
    border-color: #475569 !important;     /* slate-600 */
    color: #f1f5f9 !important;            /* slate-100 */
    color-scheme: dark;                   /* Forces the native calendar popups to render in dark mode */
}

/* Hover/Focus states for the inputs */
body.dark-mode-active #analyticsStartDate:focus,
body.dark-mode-active #analyticsEndDate:focus,
body.dark-mode-active #analyticsClientFilter:focus,
body.dark-mode-active #analyticsUserFilter:focus {
    border-color: #3b82f6 !important;     /* Keep the blue focus ring */
    background-color: #0f172a !important; /* Darken slightly when active */
}




/* =========================================================
   REGULATORY JURISDICTION TABS STICKY BAR - DARK MODE
   ========================================================= */
body.dark-mode-active div:has(> #jurTabsScrollContainer) {
    background-color: rgba(15, 23, 42, 0.95) !important; /* slate-900 with 95% opacity for blur */
    border-bottom-color: #334155 !important;             /* slate-700 border */
}


/* =========================================================
   CUSTOM SCROLLBARS - DARK MODE
   ========================================================= */
/* Firefox Support */
body.dark-mode-active .custom-scrollbar,
body.dark-mode-active #regulatoryCardContent {
    scrollbar-color: #475569 transparent !important; /* thumb color, track color */
}

/* Chrome, Edge, Safari Support */
body.dark-mode-active .custom-scrollbar::-webkit-scrollbar-track,
body.dark-mode-active #regulatoryCardContent::-webkit-scrollbar-track {
    background-color: transparent !important;
}

body.dark-mode-active .custom-scrollbar::-webkit-scrollbar-thumb,
body.dark-mode-active #regulatoryCardContent::-webkit-scrollbar-thumb {
    background-color: #475569 !important; /* slate-600 */
    border-radius: 10px;
}

body.dark-mode-active .custom-scrollbar::-webkit-scrollbar-thumb:hover,
body.dark-mode-active #regulatoryCardContent::-webkit-scrollbar-thumb:hover {
    background-color: #64748b !important; /* slate-500 */
}

/* ==========================================================================
   DARK MODE: PROJECTS BADGES & FAVORITES HOVER FIXES
   ========================================================================== */

/* 1. "Shared (Team)" and "Private" badges in Manage Projects & Profile */
body.dark-mode-active #manageProjectsList .bg-sky-100,
body.dark-mode-active #profileProjectsList .bg-sky-100 {
    background-color: rgba(12, 74, 110, 0.5) !important; /* sky-900/50 */
    color: #7dd3fc !important; /* sky-300 */
    border: 1px solid rgba(14, 165, 233, 0.3); /* Optional: subtle sky border */
}

body.dark-mode-active #manageProjectsList .bg-slate-100,
body.dark-mode-active #profileProjectsList .bg-slate-100 {
    background-color: #374151 !important; /* slate-700 */
    color: #cbd5e1 !important; /* slate-300 */
}

/* 2. "My Favorites & Specific Alerts" item hover state (Profile Page) */
body.dark-mode-active #profileFavoritesList li:hover,
body.dark-mode-active #profileFavoritesList li.hover\:bg-slate-50:hover {
    background-color: #334155 !important; /* slate-700 */
}

/* Catch the Dashboard favorites hover state as well just in case */
body.dark-mode-active #favoritesCardContent li.hover\:bg-slate-50:hover {
    background-color: #334155 !important; /* slate-700 */
}

/* ==========================================================================
   DARK MODE: LEAFLET MAP ZOOM CONTROLS (+/-)
   ========================================================================== */

/* Main button background and text */
body.dark-mode-active .leaflet-bar a {
    background-color: #1e293b !important; /* slate-800 */
    color: #e2e8f0 !important;            /* slate-200 */
    border-bottom-color: #374151 !important; /* slate-700 */
}

/* Hover state */
body.dark-mode-active .leaflet-bar a:hover {
    background-color: #334155 !important; /* slate-700 */
    color: #ffffff !important;
}

/* Disabled state (when fully zoomed in/out) */
body.dark-mode-active .leaflet-bar a.leaflet-disabled {
    background-color: #0f172a !important; /* slate-900 */
    color: #475569 !important;            /* slate-600 */
    cursor: not-allowed;
}

/* Remove the harsh default white border on the container itself */
body.dark-mode-active .leaflet-bar {
    border: 1px solid #374151 !important; /* slate-700 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4) !important;
}


/* =========================================================
   AI GENERATED HIGHLIGHT TOGGLE
   ========================================================= */

/* AI Highlight Toggle active state */
#aiHighlightToggleBtn.active {
    color: #6a8522 !important; /* Brand dark green */
    background-color: rgba(175, 211, 83, 0.15) !important; /* Brand green 15% */
    border-color: #afd353 !important; /* Brand green */
}

body.dark-mode-active #aiHighlightToggleBtn.active {
    color: #afd353 !important; /* Brand green */
    background-color: rgba(175, 211, 83, 0.2) !important;
    border-color: rgba(175, 211, 83, 0.5) !important;
}

/* AI Generated Columns Styling */
#mainDataTable.ai-highlight-enabled th.ai-generated-column {
    background-color: rgba(175, 211, 83, 0.15) !important; 
    color: #6a8522 !important; 
    border-bottom: 2px solid #afd353 !important; 
}

#mainDataTable.ai-highlight-enabled td.ai-generated-column {
    background-color: rgba(175, 211, 83, 0.05) !important; 
}

#mainDataTable.ai-highlight-enabled tbody tr:hover td.ai-generated-column {
    background-color: rgba(175, 211, 83, 0.1) !important; 
}

/* Dark mode AI Styling */
body.dark-mode-active #mainDataTable.ai-highlight-enabled th.ai-generated-column {
    background-color: rgba(175, 211, 83, 0.15) !important;
    color: #afd353 !important;
    border-bottom: 2px solid #afd353 !important;
}

body.dark-mode-active #mainDataTable.ai-highlight-enabled td.ai-generated-column {
    background-color: rgba(175, 211, 83, 0.05) !important;
}

body.dark-mode-active #mainDataTable.ai-highlight-enabled tbody tr:hover td.ai-generated-column {
    background-color: rgba(175, 211, 83, 0.1) !important;
}


/* =========================================================
   RAG CHATBOT & FLOATING WIDGET (CONSOLIDATED)
   ========================================================= */

/* --- 1. Main Chat Messages Scrolling --- */

/* S-TIER FIX A: Force the parent column to strictly bound its children */
#chatInnerContainer > .flex-col.w-full {
    min-height: 0 !important;
}

#ragChatMessages {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    
    /* S-TIER FIX B: The definitive nested flexbox lock */
    flex: 1 1 0px !important; /* Forces the container to calculate from 0 instead of content height */
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    
    padding-right: 12px; 
    padding-top: 0 !important; /* CRITICAL FIX: Removes the scroll gap above the sticky header */
    scroll-behavior: smooth;
    overscroll-behavior: contain; /* Prevents scrolling the main page behind it */
}

/* Base Scrollbar Styling */
#ragChatMessages::-webkit-scrollbar { width: 6px; }
#ragChatMessages::-webkit-scrollbar-track { background: transparent; }
#ragChatMessages::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 10px; }
#ragChatMessages::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }

/* --- 2. Floating Chat Widget Base --- */
.floating-chat-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 400px;
    height: 600px;
    max-height: calc(100vh - 48px);
    max-width: calc(100vw - 48px);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s ease, opacity 0.2s ease;
    border: 1px solid #cbd5e1; /* slate-300 */
}

.floating-chat-widget.hidden {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    pointer-events: none;
}

.floating-chat-widget.minimized {
    height: 44px !important;
    width: 360px !important; /* Increased from 250px to accommodate the credit badge */
    border-radius: 8px;
}

.floating-chat-header:active {
    cursor: grabbing;
}

/* Inner Container Adjustments for Floating Mode */
.floating-chat-body #chatInnerContainer {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    max-width: none !important;
}

/* Hide the inner Pop-Out button when it is already popped out */
.floating-chat-body .chat-full-header {
    display: none !important;
}

/* --- 3. RAG Chatbot UI Polish (Markdown & Tables) --- */
.ai-content-wrapper {
    font-size: 0.85rem !important; 
    line-height: 1.65;
}

.ai-content-wrapper table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.8rem;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    background-color: #ffffff;
}

.ai-content-wrapper th {
    background-color: #f8fafc;
    color: #475569;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
}

.ai-content-wrapper td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: top;
}

.ai-content-wrapper tr:hover td {
    background-color: #f8fafc;
}


/* =========================================================
   CHATBOT DARK MODE OVERRIDES
   ========================================================= */

/* Scrollbar Dark Mode */
body.dark-mode-active #ragChatMessages::-webkit-scrollbar-thumb { background-color: #4b5563; }
body.dark-mode-active #ragChatMessages::-webkit-scrollbar-thumb:hover { background-color: #64748b; }

/* Main Backgrounds */
body.dark-mode-active .floating-chat-widget,
body.dark-mode-active #chatInnerContainer,
body.dark-mode-active #ragChatbotPage {
    background-color: #111827 !important; /* slate-900 */
}

/* Widget Specific Overrides */
body.dark-mode-active .floating-chat-widget {
    border-color: #334155; /* slate-700 */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

/* Header Overrides */
body.dark-mode-active .floating-chat-header {
    background-color: #1f2937 !important; /* slate-800 */
    border-bottom: 1px solid #374151 !important;
    color: #f1f5f9 !important;
}

/* Input Overrides */
body.dark-mode-active #ragChatInput {
    background-color: #1f2937 !important; /* slate-800 */
    border-color: #374151 !important; /* slate-700 */
    color: #f1f5f9 !important; /* slate-100 */
}

body.dark-mode-active #ragChatInput::placeholder {
    color: #9ca3af !important; /* slate-400 */
}

body.dark-mode-active #ragChatInput:focus {
    border-color: #6366f1 !important; 
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
}

/* AI Markdown Tables Dark Mode */
body.dark-mode-active .ai-content-wrapper table {
    background-color: #1e293b;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}
body.dark-mode-active .ai-content-wrapper th {
    background-color: #0f172a;
    color: #94a3b8;
    border-bottom-color: #334155;
}
body.dark-mode-active .ai-content-wrapper td {
    color: #cbd5e1;
    border-bottom-color: #334155;
}
body.dark-mode-active .ai-content-wrapper tr:hover td {
    background-color: #334155;
}


/* =========================================================
   MISC UI FIXES
   ========================================================= */

/* TABS FIX: Ensure the Regulatory Tabs sticky container turns dark correctly */
body.dark-mode-active #regulatoryCardContent .sticky.z-50 {
    background-color: #111827 !important; /* slate-900 */
    border-color: #374151 !important;
}


/* =========================================================
   SURGICAL FIX: OS DARK MODE BLEED 
   ========================================================= */

/* 1. ANTI-BLEED: Force Light Mode styles if the toggle is OFF, 
      even if the OS/System is set to Dark Mode. */
@media (prefers-color-scheme: dark) {
    body:not(.dark-mode-active) .floating-chat-widget,
    body:not(.dark-mode-active) #chatInnerContainer,
    body:not(.dark-mode-active) #ragChatbotPage {
        background-color: #ffffff !important;
        color: #334155 !important;
    }
    
    body:not(.dark-mode-active) .floating-chat-header {
        background-color: #f8fafc !important;
        color: #1e293b !important;
        border-bottom-color: #e2e8f0 !important;
    }

    /* Force Chat Input back to Light Mode */
    body:not(.dark-mode-active) #ragChatInput {
        background-color: #ffffff !important;
        border-color: #cbd5e1 !important;
        color: #334155 !important;
    }
    body:not(.dark-mode-active) #ragChatInput::placeholder {
        color: #94a3b8 !important;
    }

    body:not(.dark-mode-active) #regulatoryCardContent .sticky.z-50,
    body:not(.dark-mode-active) .global-tabs-wrapper {
        background-color: #ffffff !important;
        border-color: #e2e8f0 !important;
    }
    
    body:not(.dark-mode-active) .global-tab-btn {
        background-color: #f8fafc !important;
        color: #64748b !important;
        border-color: #e2e8f0 !important;
    }
    
    body:not(.dark-mode-active) .global-tab-btn.active {
        background-color: #ffffff !important;
        color: #1d4ed8 !important;
        border-bottom-color: #ffffff !important;
    }
}

/* =========================================================
   HARD FIX: Sources block width + persistent collapsed UI
   ========================================================= */

.ai-content-wrapper,
.ai-content-wrapper *,
.source-collapse-block,
.source-collapse-block * {
    box-sizing: border-box !important;
}

.ai-content-wrapper {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

.source-collapse-block {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    margin-top: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background: #f8fafc;
}

.source-collapse-toggle {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
}

.source-toggle-chevron {
    flex: 0 0 auto;
    transition: transform 0.15s ease;
}

.source-toggle-label {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.source-toggle-count {
    flex: 0 0 auto;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1;
    padding: 0.2rem 0.45rem;
    border-radius: 9999px;
    background: rgba(175, 211, 83, 0.2); /* Soft brand green background */
    color: #5b7318; /* Dark readable green text */
}

.source-collapse-block.is-expanded .source-toggle-chevron {
    transform: rotate(90deg);
}

.source-collapse-block.is-collapsed .citation-list-container {
    display: none !important;
}

.source-collapse-block .citation-list-container {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 0.75rem 0.65rem 0.75rem !important;
    margin: 0 !important;
}

.source-collapse-block .citation-list-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 0.5rem;
    overflow: hidden !important;
}

.source-collapse-block .citation-title-wrapper {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.source-collapse-block .source-record-btn {
    max-width: 7.5rem !important;
    min-width: 0 !important;
    white-space: nowrap !important;
}

body.dark-mode-active .source-collapse-block {
    background: #0f172a;
    border-color: #334155;
}

body.dark-mode-active .source-collapse-toggle {
    color: #cbd5e1;
}

body.dark-mode-active .source-toggle-count {
    background: rgba(175, 211, 83, 0.25);
    color: #afd353; /* Glowing brand green text */
}


/* =========================================================
   SURGICAL FIX: Responsive Markdown Tables (Floating Widget Fix)
   ========================================================= */

/* 1. Make tables responsive, but allow full-page tables to stretch! */
.ai-content-wrapper table {
    display: table !important; /* Swapped from block so it fills space naturally */
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-collapse: collapse;
}

/* Add a wrapper class via JS later if needed, but for now, block scrolling on the parent */
.ai-content-wrapper {
    overflow-x: auto !important; 
    -webkit-overflow-scrolling: touch;
}

/* 2. Protect headers from aggressive word-breaking */
.ai-content-wrapper th {
    white-space: nowrap !important;     
    word-break: normal !important;      
    overflow-wrap: normal !important;   
    background-color: #f8fafc;
    font-weight: 600;
    text-align: left;
}

/* 3. Global Table Cell Rules (Let full-page tables breathe) */
.ai-content-wrapper th,
.ai-content-wrapper td {
    padding: 0.5rem 0.65rem !important; 
    border: 1px solid #e2e8f0 !important;
    vertical-align: top;
    min-width: 70px; 
    /* REMOVED the global max-width so full-screen tables can stretch! */
}

/* 3.5. S-TIER FIX: Floating Widget Strict Constraints */
/* ONLY apply the aggressive squish to the floating widget so it doesn't break boundaries! */
.floating-chat-widget .ai-content-wrapper th,
.floating-chat-widget .ai-content-wrapper td {
    max-width: 220px !important; /* Hard cap so long paragraphs wrap vertically */
    white-space: normal !important;
}

/* 4. Allow long text to wrap safely downward */
.ai-content-wrapper td {
    white-space: normal !important;
    word-break: break-word !important; 
    overflow-wrap: anywhere !important;
}

/* 4. Allow long text to wrap safely downward */
.ai-content-wrapper td {
    white-space: normal !important;
    word-break: break-word !important; 
    overflow-wrap: anywhere !important;
}

/* 5. Dark mode support for tables */
body.dark-mode-active .ai-content-wrapper th {
    background-color: #1e293b;
    color: #e2e8f0;
}
body.dark-mode-active .ai-content-wrapper th,
body.dark-mode-active .ai-content-wrapper td {
    border-color: #334155 !important;
}

/* =========================================================
   SURGICAL FIX: AI Chat Bubble Spacing Enforcer
   ========================================================= */

/* Force Headers to be airy and distinct */
.ai-content-wrapper h3 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.5rem;
}

/* Force paragraphs and lists to have wide line-height and bottom margins */
.ai-content-wrapper p, 
.ai-content-wrapper ul, 
.ai-content-wrapper ol {
    margin-bottom: 1.25rem !important;
    line-height: 1.7 !important;
}

/* Force individual list items to space out */
.ai-content-wrapper li {
    margin-bottom: 0.75rem !important;
}

/* Dark Mode Overrides */
body.dark-mode-active .ai-content-wrapper h3 {
    color: #f1f5f9 !important;
    border-bottom-color: #334155;
}


/* Globally fix Tailwind modals to center correctly when un-hidden */
div.fixed.inset-0.items-center.justify-center:not(.hidden) {
    display: flex !important;
}


/* =========================================================
   NUCLEAR FIX: CHATBOT INPUT BORDER (DARK MODE)
   ========================================================= */
body.dark-mode-active #ragChatInput:focus,
#ragChatbotPage.dark #ragChatInput:focus,
.dark #ragChatInput:focus {
    border-color: #afd353 !important; 
    box-shadow: 0 0 0 2px rgba(175, 211, 83, 0.25) !important; 
    outline: none !important;
    ring-color: #afd353 !important;
}


/* =========================================================
   NUCLEAR FIX: FORCE CREDIT BADGES TO S-TIER GREY
   ========================================================= */
#chatCreditBadge {
    background-color: #f1f5f9 !important; /* slate-100 */
    color: #475569 !important;            /* slate-600 */
    border-color: #e2e8f0 !important;     /* slate-200 */
}

/* Dark Mode Overrides */
body.dark-mode-active #chatCreditBadge {
    background-color: #1e293b !important; /* slate-800 */
    color: #cbd5e1 !important;            /* slate-300 */
    border-color: #334155 !important;     /* slate-700 */
}


/* =========================================================
   NUCLEAR FIX: FULL PAGE HEIGHT LOCK (TAB SWITCHING BUG)
   ========================================================= */

/* 1. Force the main page wrapper to strictly obey its Tailwind calc() height */
#ragChatbotPage {
    min-height: 0 !important;
}

/* 2. Force the main container to 100% height */
#chatInnerContainer {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    align-items: stretch !important;
}

/* 3. Force the middle chat column to stretch independently of the sidebar */
#chatInnerContainer > .flex-grow.flex-col {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 0px !important;
}

#chatSidebar {
    min-height: 0 !important;
    height: 100% !important;
}


/* =========================================================
   FLOATING CHAT RESIZE HANDLES (ALL 4 CORNERS)
   ========================================================= */
.chat-resizer-handle {
    position: absolute;
    width: 22px;
    height: 22px;
    z-index: 100;
    color: #94a3b8; /* slate-400 */
    transition: color 0.2s;
    display: flex;
}

.chat-resizer-handle:hover {
    color: #afd353; /* Brand green on hover */
}

/* Individual Corner Placements & Cursors */
.chat-resizer-tl {
    top: 0; left: 0;
    cursor: nwse-resize;
    align-items: flex-start; justify-content: flex-start;
    padding: 6px 0 0 6px;
}
.chat-resizer-tr {
    top: 0; right: 0;
    cursor: nesw-resize;
    align-items: flex-start; justify-content: flex-end;
    padding: 6px 6px 0 0;
}
.chat-resizer-bl {
    bottom: 0; left: 0;
    cursor: nesw-resize;
    align-items: flex-end; justify-content: flex-start;
    padding: 0 0 6px 6px;
}
.chat-resizer-br {
    bottom: 0; right: 0;
    cursor: nwse-resize;
    align-items: flex-end; justify-content: flex-end;
    padding: 0 6px 6px 0;
}

/* Hide the handles completely when the widget is minimized */
.floating-chat-widget.minimized .chat-resizer-handle {
    display: none !important;
}


/* =========================================================
   AI THOUGHT BLOCK STYLING (Merged & Bulletproof)
   ========================================================= */

/* Show as one compact continuous reasoning rail */
.ai-text-content > .ai-thought-block {
    display: block;
    background-color: rgba(175, 211, 83, 0.1);
    border-left: 3px solid rgba(175, 211, 83, 0.6);
    padding: 8px 16px;
    margin: 0;
    font-size: 0.85em;
    color: #5b7318;
    white-space: pre-wrap;
    /* Optional: font-family: monospace; */
}

/* Only the first visible thought block gets top spacing */
.ai-text-content > .ai-thought-block:first-of-type {
    margin-top: 12px;
    border-radius: 0 8px 0 0;
    padding-top: 12px;
}

/* Only the last consecutive thought block gets bottom spacing */
.ai-text-content > .ai-thought-block:last-of-type {
    margin-bottom: 16px;
    border-radius: 0 0 8px 0;
    padding-bottom: 12px;
}

/* Remove browser / prose paragraph gaps inside thoughts */
.ai-thought-block p {
    margin: 0 0 0.45rem 0 !important;
}

.ai-thought-block p:last-child {
    margin-bottom: 0 !important;
}

/* Remove gap between adjacent thought blocks (Failsafe if regex misses) */
.ai-thought-block + .ai-thought-block {
    padding-top: 0 !important;
    margin-top: 0 !important;
    border-top-right-radius: 0 !important;
}

/* Dark Mode Overrides */
body.dark-mode-active .ai-thought-block {
    background-color: rgba(175, 211, 83, 0.15) !important;
    color: #afd353 !important;
}


/* =========================================================
   S-TIER AI REASONING PULSE ANIMATION
   ========================================================= */
.ai-sparkle-icon {
    color: #afd353; /* Brand green */
    display: inline-block;
    flex-shrink: 0;
}

/* The outer dashed circle */
.ai-spin-ring {
    transform-origin: center;
    animation: ai-ring-spin 2.5s linear infinite;
    opacity: 0.5;
}

/* The inner solid pulsing circle */
.ai-core-pulse {
    transform-origin: center;
    /* Using a cubic-bezier makes the pulse feel more organic and "funky" than a flat linear scale */
    animation: ai-core-beat 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

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

@keyframes ai-core-beat {
    0% { 
        transform: scale(0.5); 
        opacity: 0.6; 
        filter: drop-shadow(0 0 2px rgba(175, 211, 83, 0.4));
    }
    100% { 
        transform: scale(1.25); 
        opacity: 1; 
        /* Stronger glow at peak pulse */
        filter: drop-shadow(0 0 6px rgba(175, 211, 83, 1)); 
    }
}

/* =========================================================
   SURGICAL FIX: FAVORITES CARD SCROLL CUT-OFF
   ========================================================= */
/* Subtracts the exact pixel height of the new dropdown header (50px) 
   from the 100% height forced by the global card rules. This perfectly 
   bounds the list and restores the scrollbar without collapsing the flexbox. */
#favoritesCardContent {
    height: calc(100% - 50px) !important;
}

/* =========================================================
   DARK MODE: FAVOURITE, NEW & UPDATED BADGES
   ========================================================= */

/* 1. Favourite Badge (★ Favourite) in Daily Briefing & Favourites Card */
body.dark-mode-active [id$="BriefingContent"] .bg-amber-100,
body.dark-mode-active #favoritesCardContent .bg-amber-100 {
    background-color: rgba(120, 53, 15, 0.4) !important;
    color: #fcd34d !important;
    border-color: rgba(180, 83, 9, 0.5) !important;
}

/* 2. New Badge in Daily Briefing & Favourites Card */
body.dark-mode-active [id$="BriefingContent"] .bg-emerald-100,
body.dark-mode-active #favoritesCardContent .bg-emerald-100 {
    background-color: rgba(6, 78, 59, 0.4) !important;
    color: #6ee7b7 !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
}

/* 3. Updated Badges (Rose & Slate variants) in Favourites Card */
body.dark-mode-active #favoritesCardContent .bg-rose-100,
body.dark-mode-active #favoritesCardContent .bg-rose-50 {
    background-color: rgba(159, 18, 57, 0.4) !important;
    color: #fda4af !important;
    border-color: rgba(225, 29, 72, 0.4) !important;
}

body.dark-mode-active #favoritesCardContent .bg-slate-100 {
    background-color: #334155 !important;
    color: #cbd5e1 !important;
    border-color: #475569 !important;
}


/* =========================================================
   S-TIER INLINE DIFF HIGHLIGHTING (<ins> & <del>)
   ========================================================= */

/* Base Light Mode Styles */
ins {
    background-color: rgba(34, 197, 94, 0.15) !important; /* Green 15% */
    color: #15803d !important;                            /* Green 700 */
    text-decoration: none !important;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 600;
    display: inline;
}

del {
    background-color: rgba(239, 68, 68, 0.15) !important; /* Red 15% */
    color: #b91c1c !important;                            /* Red 700 */
    text-decoration: line-through !important;
    padding: 1px 4px;
    border-radius: 3px;
    opacity: 0.85;
    display: inline;
}

/* Dark Mode Overrides */
body.dark-mode-active ins {
    background-color: rgba(34, 197, 94, 0.25) !important; /* Green 25% */
    color: #4ade80 !important;                            /* Green 400 */
}

body.dark-mode-active del {
    background-color: rgba(239, 68, 68, 0.25) !important; /* Red 25% */
    color: #fca5a5 !important;                            /* Red 300 */
}


/* ==========================================================================
   SCHEDULED PROMPTS — modal layering
   These are portalled to <body> by __schedPortal() in ragChatbot.js, so they
   are no longer trapped inside the floating chat widget's stacking context.
   Sits above the chatbot and Prompt Library, but deliberately BELOW
   #confirmationModal (9999999) so delete confirmations still land on top.
   ========================================================================== */
#scheduleEditorModal,
#scheduleRunsModal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000000 !important;
    /* Fixed positioning is only viewport-relative when no ancestor is
       transformed. Belt and braces now that we sit on <body>. */
    transform: none !important;
    overflow: visible !important;
}

/* .hidden must beat the display:flex set inline by the open functions. */
#scheduleEditorModal.hidden,
#scheduleRunsModal.hidden {
    display: none !important;
}

/* Dark mode: this codebase uses body.dark-mode-active, not Tailwind's .dark,
   so the dark: variants in the modal markup do not fire. Set the surfaces
   explicitly. */
body.dark-mode-active #scheduleEditorModal > div,
body.dark-mode-active #scheduleRunsModal > div {
    background-color: #1e293b;
    color: #f1f5f9;
    border-color: #334155;
}
body.dark-mode-active #scheduleEditorModal input,
body.dark-mode-active #scheduleEditorModal select,
body.dark-mode-active #scheduleEditorModal textarea {
    background-color: #0f172a;
    color: #f1f5f9;
    border-color: #334155;
}

/* ==========================================================================
   SCHEDULED PROMPTS — run output rendering
   The runs modal is portalled to <body>, so it sits outside the
   .floating-chat-widget selectors that style chat markdown. These rules
   reproduce that styling for the modal.
   ========================================================================== */
#scheduleRunDetail .sched-output {
    font-size: 0.875rem;
    line-height: 1.65;
    color: #1e293b;
    overflow-x: auto;
}
#scheduleRunDetail .sched-output h1,
#scheduleRunDetail .sched-output h2,
#scheduleRunDetail .sched-output h3,
#scheduleRunDetail .sched-output h4 {
    font-weight: 700;
    line-height: 1.3;
    margin: 1.25em 0 0.5em;
    color: #0f172a;
}
#scheduleRunDetail .sched-output h1 { font-size: 1.15rem; }
#scheduleRunDetail .sched-output h2 { font-size: 1.05rem; }
#scheduleRunDetail .sched-output h3 { font-size: 0.95rem; }
#scheduleRunDetail .sched-output h4 { font-size: 0.875rem; }
#scheduleRunDetail .sched-output p  { margin: 0 0 0.9em; }
#scheduleRunDetail .sched-output ul,
#scheduleRunDetail .sched-output ol { margin: 0 0 0.9em 1.25em; padding-left: 0.5rem; }
#scheduleRunDetail .sched-output ul { list-style: disc; }
#scheduleRunDetail .sched-output ol { list-style: decimal; }
#scheduleRunDetail .sched-output li { margin-bottom: 0.35em; }
#scheduleRunDetail .sched-output a  { color: #4f46e5; text-decoration: underline; word-break: break-word; }
#scheduleRunDetail .sched-output strong { font-weight: 700; }
#scheduleRunDetail .sched-output code {
    background: #f1f5f9; padding: 0.1em 0.35em; border-radius: 3px;
    font-size: 0.85em; font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* Markdown tables — the record tables are the main casualty without this */
#scheduleRunDetail .sched-output table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: 0.8rem;
    display: block;
    overflow-x: auto;
    white-space: normal;
}
#scheduleRunDetail .sched-output th,
#scheduleRunDetail .sched-output td {
    border: 1px solid #e2e8f0;
    padding: 0.5rem 0.65rem;
    text-align: left;
    vertical-align: top;
}
#scheduleRunDetail .sched-output th {
    background: #f8fafc;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #475569;
}
#scheduleRunDetail .sched-output td:first-child { min-width: 220px; }

body.dark-mode-active #scheduleRunDetail .sched-output { color: #e2e8f0; }
body.dark-mode-active #scheduleRunDetail .sched-output h1,
body.dark-mode-active #scheduleRunDetail .sched-output h2,
body.dark-mode-active #scheduleRunDetail .sched-output h3,
body.dark-mode-active #scheduleRunDetail .sched-output h4 { color: #f1f5f9; }
body.dark-mode-active #scheduleRunDetail .sched-output a { color: #a5b4fc; }
body.dark-mode-active #scheduleRunDetail .sched-output th { background: #1e293b; color: #94a3b8; }
body.dark-mode-active #scheduleRunDetail .sched-output th,
body.dark-mode-active #scheduleRunDetail .sched-output td { border-color: #334155; }
body.dark-mode-active #scheduleRunDetail .sched-output code { background: #0f172a; }

/* The diff pane is deliberately monospace and unstyled by the above. */
#scheduleRunDetail .sched-diff { font-size: 11px; }


/* ==========================================================================
   HOME PAGE THELONIOUS LAUNCHER BAR
   ========================================================================== */

.home-chat-bar {
    background: #ffffff;
    border: 2.5px solid #475569;
    border-radius: 0.5rem;
    padding: 0.75rem 0.85rem 0.6rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -18px rgba(15, 23, 42, 0.35);
    transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease;
}

.home-chat-bar:focus-within {
    border-color: #334155;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.22), 0 8px 24px -18px rgba(15, 23, 42, 0.35);
}

/* Brief pulse when a chat collapses back into the bar */
.home-chat-bar.is-receiving {
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.35), 0 8px 24px -18px rgba(15, 23, 42, 0.35);
}

/* Plays while the bar hands off to the floating widget */
.home-chat-bar.is-diving {
    transform: translateY(10px) scale(0.985);
    opacity: 0.45;
}

.home-chat-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.home-chat-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    color: #afd353;
}
.home-chat-mark svg { width: 1.35rem; height: 1.35rem; }

.home-chat-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.9rem;
    color: #1e293b;
    padding: 0.35rem 0.15rem;
}
.home-chat-input::placeholder { color: #94a3b8; }

.home-chat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 0.6rem;
    color: #64748b;
    background: #f1f5f9;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.home-chat-icon:hover { background: #e2e8f0; color: #334155; }
.home-chat-icon svg { width: 1rem; height: 1rem; }

.home-chat-send {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    height: 2rem;
    padding: 0 0.85rem;
    border-radius: 0.6rem;
    background: rgba(175, 211, 83, 0.85);
    color: #1e293b;
    font-size: 0.8rem;
    font-weight: 700;
    transition: background-color 0.15s ease;
}
.home-chat-send:hover { background: #afd353; }
.home-chat-send svg { width: 0.8rem; height: 0.8rem; }

.home-chat-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.55rem;
    padding-top: 0.5rem;
    border-top: 1px solid #f1f5f9;
}

.home-chat-chips-wrap {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex: 1 1 240px;
    min-width: 0;
}

.home-chat-chips {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 1px;
    /* Fade the cut edge so a clipped chip reads as "more here", not "broken" */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
}
.home-chat-chips::-webkit-scrollbar { display: none; }

/* No fade on the side that has nothing more to reveal */
.home-chat-chips-wrap:not(.can-scroll-left) .home-chat-chips {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 14px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 14px), transparent 100%);
}
.home-chat-chips-wrap:not(.can-scroll-right) .home-chat-chips {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 100%);
}
.home-chat-chips-wrap:not(.can-scroll-left):not(.can-scroll-right) .home-chat-chips {
    -webkit-mask-image: none;
            mask-image: none;
}

.home-chat-chip-nav {
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
    border-radius: 9999px;
    color: #94a3b8;
    background: #f1f5f9;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.home-chat-chip-nav:hover { background: #e2e8f0; color: #475569; }
.home-chat-chip-nav svg { width: 0.65rem; height: 0.65rem; }

.home-chat-chips-wrap.can-scroll-left  #homeChipsPrev { display: inline-flex; }
.home-chat-chips-wrap.can-scroll-right #homeChipsNext { display: inline-flex; }

.home-chat-chip {
    flex-shrink: 0;
    max-width: 13rem;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.home-chat-chip:hover {
    border-color: #cbd5e1;
    background: #e2e8f0;
    color: #1e293b;
}

.home-chat-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.home-chat-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    font-size: 0.62rem;
    font-weight: 700;
    color: #64748b;
    white-space: nowrap;
}

.home-chat-switch {
    position: relative;
    display: inline-block;
    width: 1.65rem;
    height: 0.9rem;
    border-radius: 9999px;
    background: #cbd5e1;
    transition: background-color 0.15s ease;
    flex-shrink: 0;
}
.home-chat-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 9999px;
    background: #ffffff;
    transition: transform 0.15s ease;
}
.home-chat-toggle input:checked + .home-chat-switch { background: #afd353; }
.home-chat-toggle input:checked + .home-chat-switch::after { transform: translateX(0.72rem); }

.home-chat-select {
    font-size: 0.62rem;
    font-weight: 700;
    color: #64748b;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.4rem;
    padding: 0.15rem 1.2rem 0.15rem 0.4rem;
    max-width: 11rem;
    outline: none;
}
.home-chat-select:focus { border-color: #afd353; }

.home-chat-credit {
    font-size: 0.62rem;
    font-weight: 700;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 0.4rem;
    padding: 0.15rem 0.45rem;
    white-space: nowrap;
}

.home-chat-status {
    font-size: 0.6rem;
    font-weight: 700;
    color: #94a3b8;
    white-space: nowrap;
}
.home-chat-bar.chat-open .home-chat-status { color: #7aa82d; }

/* The flying placeholder that morphs from the bar into the widget */
.home-chat-ghost {
    position: fixed;
    z-index: 99999;
    pointer-events: none;
    border-radius: 0.5rem;
    border: 2.5px solid #475569;
    background: linear-gradient(135deg, rgba(226, 232, 240, 0.92), rgba(248, 250, 252, 0.7));
    box-shadow: 0 20px 45px -25px rgba(15, 23, 42, 0.6);
    opacity: 0.9;
    transition: top 0.36s cubic-bezier(0.4, 0, 0.2, 1),
                left 0.36s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.36s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.36s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.36s ease,
                border-radius 0.36s ease;
}

@media (prefers-reduced-motion: reduce) {
    .home-chat-bar, .home-chat-ghost { transition: none !important; }
}

/* Dark mode */
body.dark-mode-active .home-chat-bar {
    background: #1e293b;
    border-color: #334155;
}
body.dark-mode-active .home-chat-ghost {
    border-color: #475569;
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.9), rgba(30, 41, 59, 0.7));
}

/* The Send button keeps its green fill in dark mode, so the label has to stay
   dark against it rather than picking up the theme's light text colour. */
body.dark-mode-active .home-chat-send,
body.dark-mode-active .home-chat-send span {
    color: #000000 !important;
}
body.dark-mode-active .home-chat-send svg {
    stroke: #000000 !important;
}

body.dark-mode-active .home-chat-input { color: #e2e8f0; }
body.dark-mode-active .home-chat-input::placeholder { color: #64748b; }
body.dark-mode-active .home-chat-meta { border-top-color: #334155; }
body.dark-mode-active .home-chat-icon { background: #334155; color: #94a3b8; }
body.dark-mode-active .home-chat-icon:hover { background: #475569; color: #e2e8f0; }
body.dark-mode-active .home-chat-chip { background: #334155; border-color: transparent; color: #cbd5e1; }
body.dark-mode-active .home-chat-chip:hover { background: #475569; border-color: #64748b; color: #f1f5f9; }
body.dark-mode-active .home-chat-chip-nav { background: #334155; color: #94a3b8; }
body.dark-mode-active .home-chat-chip-nav:hover { background: #475569; color: #e2e8f0; }
body.dark-mode-active .home-chat-select,
body.dark-mode-active .home-chat-credit { background: #0f172a; border-color: #334155; color: #94a3b8; }
body.dark-mode-active .home-chat-switch { background: #475569; }


.dash-tabs {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    padding: 0.6rem 1.5rem 0;
}

.dash-tab {
    padding: 0.25rem 0.7rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dash-tab:hover {
    background: #e2e8f0;
    color: #334155;
}

.dash-tab.is-active {
    background: rgba(175, 211, 83, 0.22);
    border-color: #afd353;
    color: #4d6b12;
}

body.dark-mode-active .dash-tab {
    background: #334155;
    color: #94a3b8;
}
body.dark-mode-active .dash-tab:hover {
    background: #475569;
    color: #e2e8f0;
}
body.dark-mode-active .dash-tab.is-active {
    background: rgba(175, 211, 83, 0.16);
    border-color: #afd353;
    color: #d9f2a4;
}

/* Customize Dashboard control, relocated into the app header.
   Styled by descendant selector because dashboardManager overwrites
   editDashboardBtn.className wholesale on every edit-mode toggle. */
.dashboard-controls-header {
    margin-right: 0.75rem;
}

.dashboard-controls-header > button {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
    border-radius: 0.5rem !important;
    white-space: nowrap;
}

.dashboard-controls-header > button svg {
    width: 0.85rem !important;
    height: 0.85rem !important;
}

/* Applied by relocateDashboardControls() to the header row that receives the
   button, so it can't wrap onto a second line on narrow screens. */
/* The header controls container is Tailwind flex-col until md:. Once the
   relocated Customize Dashboard button lives there, force a single row at all
   widths. Class is applied by relocateDashboardControls(); the container has no
   id, and the #header-controls-wrapper rules elsewhere in this file are dead. */
.header-controls-row {
    min-width: 0;
}

/* Binds the relocated Customize Dashboard button to the dark mode toggle so the
   pair moves as one unit — the header controls container also holds the menu and
   profile icons, so it must keep its own stacking behaviour untouched. */
.dashboard-controls-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.4rem;
    flex-shrink: 0;
}

/* Match the "Dark Mode" label to the relocated Customize Dashboard button.
   Scoped to the toggle container only, so it can't touch the button or the
   group's own flex layout. */
.dashboard-controls-group > #darkModeToggleContainer,
.dashboard-controls-group > #darkModeToggleContainer label,
.dashboard-controls-group > #darkModeToggleContainer span {
    font-size: 0.75rem !important;
    line-height: 1.2;
    white-space: nowrap;
}
@media (max-width: 767px) {
    .dashboard-controls-group {
        gap: 0.3rem;
        min-width: 0;
    }
    .dashboard-controls-group .dashboard-controls-header {
        margin-right: 0;
        flex-shrink: 0;
    }
    /* Icon only: the full label plus the Dark Mode label cannot both fit beside
       the logo at this width. font-size:0 hides the text without a wrapper span,
       since dashboardManager rewrites the button's innerHTML wholesale. */
    .dashboard-controls-group .dashboard-controls-header > button {
        font-size: 0 !important;
        gap: 0 !important;
        padding: 0.4rem !important;
        line-height: 0 !important;
    }
    .dashboard-controls-group .dashboard-controls-header > button svg {
        width: 1rem !important;
        height: 1rem !important;
        flex-shrink: 0;
    }
}

.dashboard-controls-header {
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .dashboard-controls-header {
        margin-right: 0.4rem;
    }
    .dashboard-controls-header > button {
        padding: 0.3rem 0.55rem !important;
        font-size: 0.65rem !important;
        gap: 0.3rem !important;
    }
    .dashboard-controls-header > button svg {
        width: 0.8rem !important;
        height: 0.8rem !important;
        flex-shrink: 0;
    }
}

@media (max-width: 900px) {
    .dashboard-controls-header > button {
        font-size: 0.7rem !important;
    }
}



/* Shell-level host for the Thelonious launcher bar (moved out of #homePage at
   runtime so it survives navigation). Mirrors the page padding it left behind. */
.home-chat-bar-host {
    padding: 0.25rem 1rem 0;
}

/* The row that used to hold the bar and the Customize button is empty now that
   both have been relocated; collapse it so it stops adding dead space. */
#homePage > .flex:empty {
    display: none;
}
@media (min-width: 768px) {
    .home-chat-bar-host { padding: 0.25rem 1.5rem 0; }
}

@media (min-width: 1024px) {
    .home-chat-bar-host { padding: 0.25rem 2rem 0; }
}

.home-chat-bar-host .home-chat-bar {
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   DASHBOARD CARD HEADINGS — mobile
   ==========================================================================
   createCardTemplate gives the <h3> `truncate pr-4` inside a flex row that has
   no min-w-0, so the title clips well before it runs out of room. Styled here
   rather than in the template so every card picks it up. */

@media (max-width: 767px) {
    /* Let the title group actually shrink to the space available */
    .dashboard-card-wrapper .flex.justify-between.items-center > .flex.items-center {
        min-width: 0;
        flex: 1 1 auto;
    }

    /* Wrap instead of truncating, and reclaim the trailing padding */
    .dashboard-card-wrapper h3.truncate {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        padding-right: 0.25rem !important;
        line-height: 1.2;
        font-size: 13.5px;
    }

    /* Hover-only controls never appear on touch, so stop reserving space */
    .dashboard-card-wrapper .controls-area {
        display: none;
    }
}

/* ==========================================================================
   TABBED DASHBOARD CARDS — restore scrolling
   ==========================================================================
   The wrapper createCardTemplate puts around ${contentHtml} computes to
   display:block despite carrying `flex flex-col` in its class list. With one
   child that goes unnoticed. With a .dash-tabs row sharing the column it
   breaks: `flex:1` on the pane never applies, so the pane sizes to its content
   (~750px) inside a 443px box, scrollHeight === clientHeight, and the wrapper's
   own overflow:hidden clips the list mid-item with no scrollbar.

   Forcing the flex column back lets the pane take only the leftover space,
   which is what makes overflow-y:auto meaningful. Scoped to these two cards;
   the underlying display:block override affects every createCardTemplate card
   and is still worth tracking down at source. */

#recentCasesCombinedCard > .flex-grow,
#recentRegulationsCombinedCard > .flex-grow {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Takes the space the tab row leaves, and scrolls within it */
#recentCasesCombinedContent,
#recentRegulationsCombinedContent {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
}

/* The tab row must never absorb the free space the scroll pane needs */
.dash-tabs {
    flex: 0 0 auto !important;
}


/* ==========================================================================
   DASHBOARD SCROLLBARS — one consistent treatment
   ==========================================================================
   Cards were split across three variants: .styled-scrollbar-container,
   .custom-scrollbar, and one pane with no class at all (regulatoryCardContent).
   This unifies them on the darker thumb. Scoped inside .dashboard-card-wrapper
   so scrollbars elsewhere in the app are untouched. */

.dashboard-card-wrapper [class*="overflow-y-auto"],
.dashboard-card-wrapper .styled-scrollbar-container,
.dashboard-card-wrapper .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #f1f5f9;
}

.dashboard-card-wrapper [class*="overflow-y-auto"]::-webkit-scrollbar,
.dashboard-card-wrapper .styled-scrollbar-container::-webkit-scrollbar,
.dashboard-card-wrapper .custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.dashboard-card-wrapper [class*="overflow-y-auto"]::-webkit-scrollbar-track,
.dashboard-card-wrapper .styled-scrollbar-container::-webkit-scrollbar-track,
.dashboard-card-wrapper .custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

.dashboard-card-wrapper [class*="overflow-y-auto"]::-webkit-scrollbar-thumb,
.dashboard-card-wrapper .styled-scrollbar-container::-webkit-scrollbar-thumb,
.dashboard-card-wrapper .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 10px;
}

.dashboard-card-wrapper [class*="overflow-y-auto"]::-webkit-scrollbar-thumb:hover,
.dashboard-card-wrapper .styled-scrollbar-container::-webkit-scrollbar-thumb:hover,
.dashboard-card-wrapper .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Dark mode */
body.dark-mode-active .dashboard-card-wrapper [class*="overflow-y-auto"],
body.dark-mode-active .dashboard-card-wrapper .styled-scrollbar-container,
body.dark-mode-active .dashboard-card-wrapper .custom-scrollbar {
    scrollbar-color: #64748b #1e293b;
}

body.dark-mode-active .dashboard-card-wrapper [class*="overflow-y-auto"]::-webkit-scrollbar-track,
body.dark-mode-active .dashboard-card-wrapper .styled-scrollbar-container::-webkit-scrollbar-track,
body.dark-mode-active .dashboard-card-wrapper .custom-scrollbar::-webkit-scrollbar-track {
    background: #1e293b;
}

body.dark-mode-active .dashboard-card-wrapper [class*="overflow-y-auto"]::-webkit-scrollbar-thumb,
body.dark-mode-active .dashboard-card-wrapper .styled-scrollbar-container::-webkit-scrollbar-thumb,
body.dark-mode-active .dashboard-card-wrapper .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #64748b;
}

body.dark-mode-active .dashboard-card-wrapper [class*="overflow-y-auto"]::-webkit-scrollbar-thumb:hover,
body.dark-mode-active .dashboard-card-wrapper .styled-scrollbar-container::-webkit-scrollbar-thumb:hover,
body.dark-mode-active .dashboard-card-wrapper .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* =========================================================
   MARKDOWN: tables, rules and h4
   marked emits bare <table>, <hr> and <h4>. Tailwind preflight
   strips all three back to nothing, so a GFM table renders as
   run-together text and a "---" is invisible.
   ========================================================= */
.markdown-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
}
.markdown-content th,
.markdown-content td {
    border: 1px solid #e2e8f0;   /* slate-200 */
    padding: 0.625rem 0.875rem;
    text-align: left;
    vertical-align: top;
}
.markdown-content thead {
    background-color: #f8fafc;   /* slate-50 */
}
.markdown-content th {
    font-weight: 600;
    color: #1e293b;              /* slate-800 */
}
.markdown-content tbody tr:nth-child(even) {
    background-color: #f8fafc;
}

.markdown-content hr {
    border: 0;
    border-top: 1px solid #e2e8f0;
    margin: 2rem 0;
}

.markdown-content h4 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #334155;              /* slate-700 */
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

.markdown-content ul ul { list-style-type: circle; margin-bottom: 0.5rem; }
.markdown-content ol ol { list-style-type: lower-alpha; margin-bottom: 0.5rem; }

/* Dark mode */
body.dark-mode-active .markdown-content { color: #cbd5e1; }
body.dark-mode-active .markdown-content th,
body.dark-mode-active .markdown-content td { border-color: #334155; }
body.dark-mode-active .markdown-content thead,
body.dark-mode-active .markdown-content tbody tr:nth-child(even) { background-color: #1e293b; }
body.dark-mode-active .markdown-content th { color: #f1f5f9; }
body.dark-mode-active .markdown-content hr { border-top-color: #334155; }
body.dark-mode-active .markdown-content h4 { color: #e2e8f0; }

/* ---------------------------------------------------------------------------
   MOBILE TOOLBAR RAIL
   Under 640px the toolbar becomes one swipeable row. Order matters: the caps
   and truncation have to come off FIRST, or the children shrink to fit and the
   row never overflows — which is exactly why overflow-x alone did nothing.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {

    /* 1. The row itself: one line, scrollable. */
    div:has(> #activeFilterBadge),
    div:has(> #activeProjectFilterBadge) {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    div:has(> #activeFilterBadge)::-webkit-scrollbar,
    div:has(> #activeProjectFilterBadge)::-webkit-scrollbar { display: none; }

    /* 2. Nothing shrinks, nothing truncates — so the row actually overflows. */
    #activeFilterBadge,
    #activeProjectFilterBadge,
    #currentViewBadge {
        flex: 0 0 auto !important;
        min-width: auto !important;
        max-width: none !important;
    }
    #activeFilterBadge span,
    #activeProjectFilterBadge span {
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    /* 3. The chip rail must not scroll independently inside the bar. */
    #activeProjectFilterBadge .matter-chip-rail {
        overflow: visible !important;
    }
}

/* The toolbar badge rail scrolls rather than clipping, without a visible bar. */
.toolbar-badge-rail {
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.toolbar-badge-rail::-webkit-scrollbar { height: 6px; }
.toolbar-badge-rail::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .35);
    border-radius: 3px;
}
/* Phones scroll by touch and need no visible bar. */
@media (max-width: 640px) {
    .toolbar-badge-rail { scrollbar-width: none; }
    .toolbar-badge-rail::-webkit-scrollbar { display: none; }
}

/* ===========================================================================
   ICYMI — dashboard card + admin editor
   Append to the end of style.css.
   Palette is taken from the newsletter: lime #afd353 hero, pale #eef7d9 closer.
   =========================================================================== */

.icymi-card-body { background: #ffffff; }

.icymi-edition { display: flex; flex-direction: column; gap: 0; }

/* --- Item base --- */
.icymi-item { padding: 0; }

.icymi-kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #5b7a1a;
    margin-bottom: 4px;
}

.icymi-headline {
    font-weight: 800;
    line-height: 1.25;
    color: #1f2937;
    margin: 0;
}
.icymi-headline a { color: inherit; text-decoration: none; }
.icymi-headline a:hover { text-decoration: underline; }

.icymi-body {
    font-size: 13px;
    line-height: 1.55;
    color: #4b5563;
    margin: 6px 0 0;
}

/* --- LEAD: full-width lime hero --- */
.icymi-item--lead {
    background: #afd353;
    border-radius: 4px;
    padding: 18px 20px;
    margin-bottom: 18px;
}
.icymi-item--lead .icymi-kicker { color: #33420f; }
.icymi-item--lead .icymi-headline { font-size: 20px; }
.icymi-item--lead .icymi-body { color: #33420f; font-size: 13.5px; }

/* --- GRID: two columns, variable length, hairline separators --- */
.icymi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
}
.icymi-item--grid {
    padding: 14px 0;
    border-top: 1px solid #e5e7eb;
}
.icymi-item--grid .icymi-headline { font-size: 15px; }
/* Vertical rule between the two columns, skipped on the left-hand items. */
.icymi-grid .icymi-item--grid:nth-child(even) {
    padding-left: 24px;
    border-left: 1px solid #e5e7eb;
    margin-left: -12px;
}
/* A lone item on the final row spans the full width rather than leaving a gap. */
.icymi-grid .icymi-item--grid:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* --- FOOTER: full-width pale closer --- */
.icymi-item--footer {
    background: #eef7d9;
    border-radius: 4px;
    padding: 16px 20px;
    margin-top: 18px;
}
.icymi-item--footer .icymi-headline { font-size: 16px; }

/* --- States --- */
.icymi-empty,
.icymi-loading {
    padding: 28px 12px;
    text-align: center;
    font-size: 13px;
    color: #94a3b8;
}
.icymi-empty--error { color: #dc2626; }

/* --- Dark mode --- */
/* Matches the #1f2937 the card shell is forced to by
   `.dashboard-card-wrapper > div.bg-white`, so there is no seam at the padding. */
body.dark-mode-active .icymi-card-body { background: #1f2937; }

body.dark-mode-active .icymi-headline { color: #f1f5f9; }
body.dark-mode-active .icymi-body { color: #cbd5e1; }
body.dark-mode-active .icymi-kicker { color: #a3c957; }
body.dark-mode-active .icymi-item--grid { border-top-color: #374151; }
body.dark-mode-active .icymi-grid .icymi-item--grid:nth-child(even) { border-left-color: #374151; }

body.dark-mode-active .icymi-item--footer { background: #2a3a12; }
body.dark-mode-active .icymi-item--footer .icymi-headline { color: #ecf7d4; }
body.dark-mode-active .icymi-item--footer .icymi-body { color: #d3e8a8; }

/* The lead block keeps its lime background in dark mode — it is the brand
   signature and inverting it makes the card unrecognisable. Every text colour
   inside it therefore has to be re-asserted at a specificity that beats the
   generic dark rules above, INCLUDING the kicker (which was previously left to
   inherit #a3c957 and vanished into the lime). */
body.dark-mode-active .icymi-item--lead .icymi-headline,
body.dark-mode-active .icymi-item--lead .icymi-headline a,
body.dark-mode-active .icymi-item--lead .icymi-body { color: #1f2937 !important; }
body.dark-mode-active .icymi-item--lead .icymi-kicker { color: #33420f !important; }

/* Headline links */
body.dark-mode-active .icymi-headline a:hover { color: #afd353; }
body.dark-mode-active .icymi-item--lead .icymi-headline a:hover,
body.dark-mode-active .icymi-item--footer .icymi-headline a:hover { color: inherit; }

/* States */
body.dark-mode-active .icymi-empty,
body.dark-mode-active .icymi-loading { color: #64748b; }
body.dark-mode-active .icymi-empty--error { color: #f87171; }

/* --- Link provenance badges --- */
.icymi-link-badge {
    display: inline-block;
    width: auto;
    margin-top: 5px;
    padding: 1px 8px 2px;
    border-radius: 999px;
    border: 1px solid transparent;

    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .01em;
    text-transform: none;

    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.icymi-link-badge--internal {
    color: #46600f;
    background: rgba(175, 211, 83, .18);
    border-color: rgba(175, 211, 83, .45);
}
.icymi-link-badge--external {
    color: #64748b;
    background: #f1f5f9;
    border-color: #e2e8f0;
    text-transform: none;
    letter-spacing: .01em;
}

/* On the lime hero and the pale closer the default chips wash out */
.icymi-item--lead .icymi-link-badge--internal {
    color: #33420f;
    background: rgba(255, 255, 255, .55);
    border-color: rgba(51, 66, 15, .25);
}
.icymi-item--lead .icymi-link-badge--external {
    color: #33420f;
    background: rgba(255, 255, 255, .4);
    border-color: rgba(51, 66, 15, .2);
}
.icymi-item--footer .icymi-link-badge--external {
    background: rgba(255, 255, 255, .6);
    border-color: rgba(91, 122, 26, .2);
}

body.dark-mode-active .icymi-link-badge--internal {
    color: #c6e485;
    background: rgba(175, 211, 83, .14);
    border-color: rgba(175, 211, 83, .3);
}
body.dark-mode-active .icymi-link-badge--external {
    color: #94a3b8;
    background: #111827;
    border-color: #374151;
}
body.dark-mode-active .icymi-item--lead .icymi-link-badge--internal,
body.dark-mode-active .icymi-item--lead .icymi-link-badge--external {
    color: #33420f;
    background: rgba(255, 255, 255, .55);
    border-color: rgba(51, 66, 15, .25);
}
body.dark-mode-active .icymi-item--footer .icymi-link-badge--external {
    color: #d3e8a8;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(211, 232, 168, .25);
}

/* ==========================================================================
   ICYMI — lead hero keeps its lime background in dark mode, so every piece of
   text inside it needs dark ink re-asserted. Without this the generic dark
   rules (#a3c957 kicker, #94a3b8 external badge) land on lime and wash out.
   Highest specificity in the file for these elements, so nothing overrides it.
   ========================================================================== */
body.dark-mode-active .icymi-edition .icymi-item--lead .icymi-kicker,
body.dark-mode-active .icymi-edition .icymi-item--lead .icymi-headline,
body.dark-mode-active .icymi-edition .icymi-item--lead .icymi-headline a,
body.dark-mode-active .icymi-edition .icymi-item--lead .icymi-body {
    color: #23300a !important;
}

body.dark-mode-active .icymi-edition .icymi-item--lead .icymi-link-badge,
body.dark-mode-active .icymi-edition .icymi-item--lead .icymi-link-badge--internal,
body.dark-mode-active .icymi-edition .icymi-item--lead .icymi-link-badge--external {
    color: #23300a !important;
    background: rgba(255, 255, 255, .72) !important;
    border-color: rgba(35, 48, 10, .28) !important;
}

body.dark-mode-active .icymi-edition .icymi-item--lead .icymi-headline a:hover {
    color: #23300a !important;
    text-decoration: underline;
}
.icymi-skeleton { background: #e2e8f0; }
body.dark-mode-active .icymi-skeleton { background: #374151; }

@media (max-width: 640px) {
    .icymi-grid { grid-template-columns: 1fr; }
    .icymi-grid .icymi-item--grid:nth-child(even) {
        padding-left: 0; border-left: none; margin-left: 0;
    }
}

/* ===========================================================================
   ADMIN EDITOR
   =========================================================================== */

.icymi-source-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #afd353;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: grab;
    transition: box-shadow .15s, transform .15s;
}
.icymi-source-card:hover { box-shadow: 0 4px 10px rgba(15,23,42,.08); transform: translateY(-1px); }
.icymi-source-card:active { cursor: grabbing; }
.icymi-dragging { opacity: .4; }

.icymi-dropzone {
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    padding: 10px;
    background: #ffffff;
    transition: border-color .15s, background .15s;
}
.icymi-dropzone--over { border-color: #afd353; background: #f7fce9; }
.icymi-dropzone--lead   { border-left: 4px solid #afd353; }
.icymi-dropzone--footer { border-left: 4px solid #dcedb4; }

.icymi-zone-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    color: #64748b;
    margin-bottom: 8px;
}
.icymi-zone-empty {
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
    padding: 14px 0;
}

.icymi-grid-slots { display: flex; flex-direction: column; gap: 8px; }

.icymi-placed-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px;
    cursor: grab;
}
.icymi-placed-card:active { cursor: grabbing; }

.icymi-kicker-input,
.icymi-headline-input,
.icymi-body-input {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 8px;
    outline: none;
    transition: border-color .15s;
}
.icymi-kicker-input:focus,
.icymi-headline-input:focus,
.icymi-body-input:focus,
.icymi-list-input:focus { border-color: #6366f1; }

.icymi-kicker-input { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #5b7a1a; }
.icymi-headline-input { font-size: 13px; font-weight: 700; color: #1f2937; margin-bottom: 6px; }
.icymi-body-input { font-size: 12px; color: #475569; height: 62px; resize: vertical; line-height: 1.5; }

.icymi-list-input {
    width: 100%;
    min-height: 220px;
    resize: vertical;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 10px 12px;
    outline: none;
    transition: border-color .15s;
    font-size: 12px;
    color: #475569;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    line-height: 1.6;
    white-space: pre;
    overflow-x: auto;
}

.icymi-preview-shell {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    max-height: 340px;
    overflow-y: auto;
}

body.dark-mode-active .icymi-source-card,
body.dark-mode-active .icymi-placed-card,
body.dark-mode-active .icymi-dropzone,
body.dark-mode-active .icymi-preview-shell {
    background: #0f172a;
    border-color: #334155;
}
body.dark-mode-active .icymi-source-card .font-bold { color: #e2e8f0; }

/* ---------------------------------------------------------------------------
   LINK CONTROLS (admin editor)
   --------------------------------------------------------------------------- */

.icymi-link-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    user-select: none;
}
.icymi-link-toggle input { accent-color: #afd353; cursor: pointer; }

.icymi-link-panel {
    margin-top: 8px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.icymi-link-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.icymi-link-tab {
    flex: 1;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .03em;
    padding: 5px 6px;
    border-radius: 5px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.icymi-link-tab:hover { background: #f1f5f9; }
.icymi-link-tab.is-active {
    background: #afd353;
    border-color: #9cc043;
    color: #1a2408;
}

.icymi-link-picker { display: flex; flex-direction: column; gap: 6px; }
.icymi-link-select,
.icymi-link-search,
.icymi-link-url {
    width: 100%;
    font-size: 11.5px;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    padding: 6px 8px;
    outline: none;
}
.icymi-link-select:focus,
.icymi-link-search:focus,
.icymi-link-url:focus { border-color: #6366f1; }

.icymi-link-results { max-height: 170px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.icymi-link-result {
    display: flex;
    align-items: baseline;
    gap: 7px;
    width: 100%;
    text-align: left;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: #f8fafc;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.icymi-link-result:hover { background: #f7fce9; border-color: #afd353; }
.icymi-link-result-id { font-size: 10px; font-weight: 800; color: #94a3b8; flex-shrink: 0; }
.icymi-link-result-label { font-size: 11.5px; color: #334155; line-height: 1.35; }

.icymi-link-hint { font-size: 11px; color: #94a3b8; padding: 6px 2px; }
.icymi-link-hint--error { color: #dc2626; }

.icymi-link-current {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e2e8f0;
}
.icymi-link-badge {
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .05em;
    padding: 2px 5px;
    border-radius: 3px;
    flex-shrink: 0;
}
.icymi-link-badge.is-internal { background: #dcfce7; color: #166534; }
.icymi-link-badge.is-external { background: #e0e7ff; color: #3730a3; }
.icymi-link-url-text {
    font-size: 10px;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-grow: 1;
}
.icymi-link-test { font-size: 10px; font-weight: 700; color: #6366f1; text-decoration: none; flex-shrink: 0; }
.icymi-link-test:hover { text-decoration: underline; }

/* Linked headlines get a subtle affordance on the card, matching the print
   edition which shows no underline until hover. */
.icymi-headline a { border-bottom: 1px solid transparent; }
.icymi-headline a:hover { border-bottom-color: currentColor; text-decoration: none; }

body.dark-mode-active .icymi-link-panel { background: #0f172a; border-color: #334155; }
body.dark-mode-active .icymi-link-tab { background: #1e293b; border-color: #334155; color: #94a3b8; }
body.dark-mode-active .icymi-link-tab.is-active { background: #afd353; color: #1a2408; }
body.dark-mode-active .icymi-link-result { background: #1e293b; }
body.dark-mode-active .icymi-link-result-label { color: #cbd5e1; }
body.dark-mode-active .icymi-link-select,
body.dark-mode-active .icymi-link-search,
body.dark-mode-active .icymi-link-url,
body.dark-mode-active .icymi-list-input { background: #1e293b; border-color: #334155; color: #e2e8f0; }

/* ===========================================================================
   ICYMI — dashboard card + admin editor
   =========================================================================== */

/* Ensure the card flex container properly constrains the child */
#icymiDailyCard > .flex-grow,
#icymiWeeklyCard > .flex-grow {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Force the scrollable body to 100% height so overflow-y triggers */
.icymi-card-body,
#icymiDailyCardContent,
#icymiWeeklyCardContent {
    background: #ffffff;
    position: relative !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    word-wrap: break-word;
}

/* Dark mode overrides for the scrollable body */
body.dark-mode-active .icymi-card-body,
body.dark-mode-active #icymiDailyCardContent,
body.dark-mode-active #icymiWeeklyCardContent {
    background: #1f2937;
}

/* ==========================================================================
   ANALYSIS SURFACES — modernised chrome
   Scoped to #caseAnalysisPage, #regulatoryAnalysisPage and the two outlook
   cards. Additive only.
   ========================================================================== */

:root {
    --aiph-accent: #afd353;
    --aiph-accent-ink: #5f7d1c;
    --aiph-ring: rgba(15, 23, 42, 0.06);
    --aiph-lift: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -8px rgba(15,23,42,.10);
    --aiph-lift-hi: 0 1px 2px rgba(15,23,42,.05), 0 18px 40px -12px rgba(15,23,42,.18);
}

/* --- Panels ------------------------------------------------------------- */
#caseAnalysisPage > main > div:first-child,
#regulatoryAnalysisPage > main > div:first-child {
    border-radius: 18px;
    border-color: #e9edf3;
    box-shadow: var(--aiph-lift);
    background-image: linear-gradient(180deg, #ffffff 0%, #fcfdfe 100%);
}

#regulatoryAnalysisPage .global-summary-panel {
    border-radius: 14px;
    border-color: #eef1f6;
    box-shadow: inset 0 0 0 1px var(--aiph-ring);
    transition: box-shadow .25s ease;
}
#regulatoryAnalysisPage .global-summary-panel:hover {
    box-shadow: inset 0 0 0 1px var(--aiph-ring), var(--aiph-lift);
}

/* --- Section headers: accent rule instead of a flat grey underline ------- */
.global-section-header {
    position: relative;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #64748b;
    border-bottom: 1px solid #eef1f6;
    padding-bottom: .45rem;
    margin-bottom: .85rem;
    margin-top: 1.6rem;
}
.global-section-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 30px;
    height: 2px;
    border-radius: 2px;
    background: var(--aiph-accent);
}

/* --- Internal links ----------------------------------------------------- */
.internal-link {
    color: #0f172a;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    box-shadow: inset 0 -1px 0 0 rgba(175, 211, 83, .55);
    border-radius: 2px;
    padding: 0 1px;
    transition: box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.internal-link:hover {
    color: var(--aiph-accent-ink);
    background-color: rgba(175, 211, 83, .14);
    box-shadow: inset 0 -2px 0 0 var(--aiph-accent);
}
body.dark-mode-active .internal-link { color: #e2e8f0; }
body.dark-mode-active .internal-link:hover {
    color: var(--aiph-accent);
    background-color: rgba(175, 211, 83, .12);
}

.velocity-highlight {
    border-bottom: 1px dotted #94a3b8;
    text-underline-offset: 3px;
}

/* --- Stat tiles --------------------------------------------------------- */
.stat-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: .45rem .35rem .4rem;
    border-radius: 10px;
    border: 1px solid #edf1f6;
    background: linear-gradient(180deg, #fbfcfe 0%, #f5f7fa 100%);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.stat-tile:hover {
    transform: translateY(-2px);
    border-color: #dbe3ec;
    background: #ffffff;
    box-shadow: var(--aiph-lift);
}
.stat-tile > span:first-child {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.stat-tile > span:last-child {
    letter-spacing: .05em;
    opacity: .85;
}
body.dark-mode-active .stat-tile {
    border-color: #334155;
    background: linear-gradient(180deg, #1e293b 0%, #172033 100%);
}
body.dark-mode-active .stat-tile:hover {
    border-color: #475569;
    background: #1e293b;
}

/* --- Litigation focus bars --------------------------------------------- */
#focuses-chart-container .bar-chart-row { gap: .6rem; }
#focuses-chart-container .bar-wrapper {
    height: 20px;
    background-color: #f1f5f9;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.04);
}
#focuses-chart-container .bar {
    background-image: linear-gradient(90deg, #8fb93f 0%, var(--aiph-accent) 100%);
    box-shadow: 0 1px 3px rgba(143,185,63,.35);
}
#focuses-chart-container .bar span {
    color: #1f2937;
    font-variant-numeric: tabular-nums;
}

/* --- Analysis tool buttons --------------------------------------------- */
.analysis-buttons-container button {
    border-radius: 10px;
    padding: .55rem 1rem;
    letter-spacing: .01em;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.analysis-buttons-container button:hover {
    transform: translateY(-1px);
    box-shadow: var(--aiph-lift);
}

/* --- Jurisdiction selector buttons ------------------------------------- */
#btnOpenJurisdictionSelect,
#btnOpenLegalAreaSelect,
#openJurisdictionModalBtn {
    border-radius: 12px;
    border-color: #e4e9f0;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#btnOpenJurisdictionSelect:hover,
#btnOpenLegalAreaSelect:hover,
#openJurisdictionModalBtn:hover {
    border-color: var(--aiph-accent);
    box-shadow: 0 0 0 3px rgba(175,211,83,.16);
    transform: translateY(-1px);
}

/* --- Map surround ------------------------------------------------------- */
#regulatoryAnalysisPage > main > div:last-child {
    border-radius: 18px;
    box-shadow: var(--aiph-lift-hi);
}
#caseAnalysisPage #cases-map-container,
#caseAnalysisPage #cases-map { border-radius: 14px; }

/* ==========================================================================
   DASHBOARD CARDS — Litigation Outlook / Regulatory Outlook
   ========================================================================== */

#litigationCardLink,
#regulatoryCard {
    border-radius: 16px;
    border-color: #e9edf3;
    box-shadow: var(--aiph-lift);
}
#litigationCardLink:hover,
#regulatoryCard:hover {
    box-shadow: var(--aiph-lift-hi);
}

/* Header bar: flatter, tighter, with an accent hairline */
#litigationCardLink > div:first-child,
#regulatoryCard > div:first-child {
    position: relative;
    background-image: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-bottom: none;
}
#litigationCardLink > div:first-child::after,
#regulatoryCard > div:first-child::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--aiph-accent) 0%, rgba(175,211,83,0) 55%);
}

/* Section eyebrows inside the outlook cards */
#litigationCardContent h5,
#regulatoryCardContent h5 {
    font-size: .625rem;
    letter-spacing: .09em;
    color: #94a3b8;
    padding-bottom: .3rem;
    border-bottom: 1px solid #f1f5f9;
}

/* Defendant chips */
#litigationCardContent .bg-red-50 {
    border-radius: 999px;
    padding: .2rem .6rem;
    letter-spacing: .02em;
}

/* Footer action buttons */
#viewPrecedentsBtn,
#homeLitigationExportBtn {
    border-radius: 10px;
    padding-top: .55rem;
    padding-bottom: .55rem;
    transition: transform .16s ease, box-shadow .16s ease;
}
#viewPrecedentsBtn:hover,
#homeLitigationExportBtn:hover {
    transform: translateY(-1px);
    box-shadow: var(--aiph-lift);
}

/* Prose rhythm */
#litigationCardContent .text-sm,
#regulatoryCardContent .text-sm { line-height: 1.62; }

body.dark-mode-active #litigationCardLink,
body.dark-mode-active #regulatoryCard { border-color: #334155; }
body.dark-mode-active #litigationCardContent h5,
body.dark-mode-active #regulatoryCardContent h5 { border-bottom-color: #1e293b; }

/* ==========================================================================
   REGULATORY SURFACES — content-level pass
   Companion to the ANALYSIS SURFACES block above. Covers the regulatory
   analysis page body and brings the Regulatory Outlook card to parity with
   the Litigation Outlook card.
   ========================================================================== */

/* --- FIX: .home-section-header was dead CSS (@apply in a plain stylesheet).
   This is the compiled equivalent, matched to the litigation card's <h5>. -- */
.home-section-header {
    display: block;
    font-size: .625rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 0 0 .55rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid #f1f5f9;
    position: relative;
}
.home-section-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--aiph-accent);
}
body.dark-mode-active .home-section-header {
    color: #64748b;
    border-bottom-color: #1e293b;
}

/* --- Content rows inside the global summary panels -------------------- */
.global-item {
    border-radius: 10px;
    transition: background-color .18s ease, box-shadow .18s ease;
}

.key-reg-row {
    position: relative;
    padding: .7rem .85rem .75rem 1rem;
    border: 1px solid #eef1f6;
    border-left: 3px solid var(--aiph-accent);
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(175,211,83,.05) 0%, rgba(255,255,255,0) 42%);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.key-reg-row:hover {
    border-color: #e2e8f0;
    border-left-color: var(--aiph-accent);
    box-shadow: var(--aiph-lift);
    transform: translateX(1px);
}
.key-reg-row button[data-regulation-name] {
    color: #0f172a;
    font-weight: 650;
    text-decoration: none;
    box-shadow: inset 0 -1px 0 0 rgba(148,163,184,.45);
    transition: box-shadow .15s ease, color .15s ease;
}
.key-reg-row button[data-regulation-name]:hover {
    color: var(--aiph-accent-ink);
    box-shadow: inset 0 -2px 0 0 var(--aiph-accent);
}

.mandate-row {
    padding: .75rem .85rem;
    margin-bottom: .6rem;
    border: 1px solid #eef1f6;
    border-left: 3px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
}
.mandate-row:hover {
    border-left-color: var(--aiph-accent);
    box-shadow: var(--aiph-lift);
}

body.dark-mode-active .key-reg-row,
body.dark-mode-active .mandate-row {
    background: #1e293b;
    border-color: #334155;
}

/* --- Badges: squares -> pills ----------------------------------------- */
.reg-badge {
    display: inline-flex;
    align-items: center;
    padding: .18rem .55rem;
    border-radius: 999px;
    border-width: 1px;
    border-style: solid;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: none;
}
.reg-badge > span:first-child {
    opacity: .5;
    font-weight: 600;
    margin-right: .35rem;
}

/* --- Metrics block ----------------------------------------------------- */
#section-global_metrics .text-sm > p,
#regulatoryCardContent .home-section-header + div > p {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: baseline;
    padding: .3rem 0;
    border-bottom: 1px dashed #f1f5f9;
}
#section-global_metrics .text-sm > p:last-child,
#regulatoryCardContent .home-section-header + div > p:last-child {
    border-bottom: none;
}
.velocity-index-tag {
    display: inline-flex;
    align-items: center;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--aiph-accent-ink);
    background: rgba(175, 211, 83, .16);
    border-bottom: none !important;
}

/* --- Tabs: pill treatment (regulatory-only class) --------------------- */
.global-tab-btn {
    border-radius: 999px !important;
    border-color: transparent !important;
    background-color: transparent !important;
    color: #94a3b8 !important;
    padding: .4rem .85rem !important;
    font-size: 12.5px !important;
    letter-spacing: .01em;
    margin-bottom: 0 !important;
}
.global-tab-btn:hover:not(.active) {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
}
.global-tab-btn.active {
    background-color: rgba(175, 211, 83, .18) !important;
    color: #46600f !important;
    border-color: transparent !important;
    border-bottom: 1px solid transparent !important;
    box-shadow: none !important;
}
.global-tabs-wrapper { border-bottom: 1px solid #f1f5f9; padding-bottom: .4rem; }

body.dark-mode-active .global-tab-btn { color: #64748b !important; }
body.dark-mode-active .global-tab-btn:hover:not(.active) {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
}
body.dark-mode-active .global-tab-btn.active {
    background-color: rgba(175, 211, 83, .14) !important;
    color: var(--aiph-accent) !important;
}

/* --- Stakeholder dynamics callout -------------------------------------- */
#section-stakeholder_dynamics .bg-slate-50,
#regulatoryCardContent .bg-slate-50 {
    border-radius: 12px;
    border-color: #eef1f6;
    background: linear-gradient(180deg, #fbfcfe 0%, #f6f8fb 100%);
}

/* --- Compliance baseline cards ----------------------------------------- */
#section-least_common_denominator .global-item,
#regulatoryCardContent .border-emerald-500 {
    border-radius: 12px;
}
#section-least_common_denominator .global-item {
    border-color: #eef1f6;
    box-shadow: inset 0 0 0 1px var(--aiph-ring);
}
#section-least_common_denominator .global-item:hover {
    box-shadow: var(--aiph-lift);
}

/* --- Map summary / jurisdiction panel ---------------------------------- */
#mapSummaryPanel { border-radius: 18px; box-shadow: var(--aiph-lift-hi); }
#mapSummaryHeader { border-bottom-color: #eef1f6; }
#popupDynamicButtons .action-button {
    border-radius: 999px;
    padding: .4rem .9rem;
    font-size: .8rem;
    box-shadow: none;
    transition: transform .16s ease, box-shadow .16s ease;
}
#popupDynamicButtons .action-button:hover {
    transform: translateY(-1px);
    box-shadow: var(--aiph-lift);
}

/* --- Charts modal panels ------------------------------------------------ */
#chartsModalOverlay .bg-slate-50 {
    border-radius: 14px;
    border: 1px solid #eef1f6;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: inset 0 0 0 1px var(--aiph-ring);
}
#chartsModalOverlay h3 {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #64748b;
}

/* ==========================================================================
   REGULATORY OUTLOOK CARD — parity with Litigation Outlook
   ========================================================================== */

#regulatoryCardContent .key-reg-row { margin-bottom: .75rem; }

#regulatoryCardContent .bg-slate-200 {
    border-radius: 999px;
    background: #eef2f7;
    color: #475569;
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Sticky tab strip inside the card */
#regTabsScrollContainer { border-bottom: none; padding-bottom: .25rem; }

/* Section dividers between scroll-spy sections */
#regulatoryCardContent .reg-scroll-section { border-top-color: #f1f5f9 !important; }

/* Title row, matched to the litigation card */
#regulatoryCardTitle {
    letter-spacing: -.01em;
    border-bottom-color: #f1f5f9 !important;
}

body.dark-mode-active #regulatoryCardContent .bg-slate-200 {
    background: #334155;
    color: #cbd5e1;
}

/* ==========================================================================
   GLOBAL SNAPSHOT — hero / dispositions / ranked distributions
   Shared by the Case Analysis page and the Litigation Outlook card.
   ========================================================================== */

.snapshot-heading {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 1.35rem 0 .55rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid #f1f5f9;
    position: relative;
}
.snapshot-heading::after {
    content: "";
    position: absolute;
    left: 0; bottom: -1px;
    width: 26px; height: 2px;
    border-radius: 2px;
    background: var(--aiph-accent);
}

/* --- Tier 1: hero numbers ---------------------------------------------- */
.snapshot-hero {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    margin-bottom: .75rem;
}
.stat-hero {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
    padding: .7rem .8rem .75rem;
    border-radius: 12px;
    border: 1px solid #eef1f6;
    background: linear-gradient(160deg, #ffffff 0%, #f7f9fc 100%);
    box-shadow: inset 0 0 0 1px var(--aiph-ring);
    transition: transform .16s ease, box-shadow .16s ease;
}
.stat-hero:hover { transform: translateY(-2px); box-shadow: var(--aiph-lift); }
.stat-hero-value {
    font-size: clamp(1.35rem, 3.4vw, 1.9rem);
    font-weight: 750;
    line-height: 1;
    letter-spacing: -.035em;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}
.stat-hero-label {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .085em;
    text-transform: uppercase;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stat-hero--active {
    background: linear-gradient(160deg, rgba(175,211,83,.16) 0%, rgba(175,211,83,.05) 100%);
    border-color: rgba(175,211,83,.4);
}
.stat-hero--active .stat-hero-value { color: #46600f; }
.stat-hero--active .stat-hero-label { color: var(--aiph-accent-ink); }
.stat-hero--muted .stat-hero-value { color: #475569; }

/* --- Tier 2: disposition pills ----------------------------------------- */
.snapshot-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.stat-chip {
    display: inline-flex;
    align-items: baseline;
    gap: .38rem;
    padding: .28rem .6rem .3rem .5rem;
    border-radius: 999px;
    border: 1px solid #eef1f6;
    background: #f8fafc;
    transition: border-color .16s ease, background-color .16s ease;
}
.stat-chip:hover { background: #ffffff; border-color: #dbe3ec; }
.stat-chip-value {
    font-size: .8rem;
    font-weight: 750;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.stat-chip-label {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #94a3b8;
    white-space: nowrap;
}
.stat-chip--zero { opacity: .42; background: transparent; }
.stat-chip--zero:hover { opacity: 1; }
.stat-chip--zero .stat-chip-value { color: #94a3b8; font-weight: 600; }

/* --- Tier 3: ranked distributions --------------------------------------- */
.stat-ranks { display: flex; flex-direction: column; gap: .3rem; }

.stat-rank {
    display: grid;
    grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr) 2.1rem;
    align-items: center;
    gap: .55rem;
    padding: .16rem .25rem;
    border-radius: 7px;
    transition: background-color .14s ease;
}
.stat-rank:hover { background: #f8fafc; }

.stat-rank-label {
    font-size: .72rem;
    font-weight: 550;
    line-height: 1.25;
    color: #475569;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stat-rank-track {
    position: relative;
    height: 7px;
    border-radius: 999px;
    background: #f1f5f9;
    overflow: hidden;
    min-width: 0;
}
.stat-rank-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background-image: linear-gradient(90deg, #8fb93f 0%, var(--aiph-accent) 100%);
    transition: width .55s cubic-bezier(.22,.61,.36,1);
}
.stat-rank-value {
    font-size: .74rem;
    font-weight: 700;
    color: #334155;
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.stat-rank--zero { opacity: .38; }
.stat-rank--zero:hover { opacity: 1; }
.stat-rank--zero .stat-rank-value { color: #94a3b8; font-weight: 600; }

/* Narrow column (dashboard card): drop the label to its own line */
@media (max-width: 640px) {
    .snapshot-hero { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
    .stat-hero { padding: .55rem .6rem .6rem; }
    .stat-rank { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) 1.9rem; gap: .4rem; }
    .stat-rank-label { font-size: .68rem; }
}

/* --- Dark mode ---------------------------------------------------------- */
body.dark-mode-active .snapshot-heading { color: #64748b; border-bottom-color: #1e293b; }
body.dark-mode-active .stat-hero {
    background: linear-gradient(160deg, #1e293b 0%, #172033 100%);
    border-color: #334155;
}
body.dark-mode-active .stat-hero-value { color: #f1f5f9; }
body.dark-mode-active .stat-hero--active {
    background: linear-gradient(160deg, rgba(175,211,83,.14) 0%, rgba(175,211,83,.04) 100%);
    border-color: rgba(175,211,83,.3);
}
body.dark-mode-active .stat-hero--active .stat-hero-value,
body.dark-mode-active .stat-hero--active .stat-hero-label { color: var(--aiph-accent); }
body.dark-mode-active .stat-chip { background: #1e293b; border-color: #334155; }
body.dark-mode-active .stat-chip-value { color: #e2e8f0; }
body.dark-mode-active .stat-rank:hover { background: #1e293b; }
body.dark-mode-active .stat-rank-label { color: #cbd5e1; }
body.dark-mode-active .stat-rank-track { background: #1e293b; }
body.dark-mode-active .stat-rank-value { color: #e2e8f0; }


/* ---------------------------------------------------------
   NUCLEAR FIX: DARK MODE BACKGROUNDS FOR ANALYSIS PANELS
   --------------------------------------------------------- */
   
/* 1. Kills the hardcoded white linear-gradient on the outer panel */
body.dark-mode-active #caseAnalysisPage > main > div:first-child,
body.dark-mode-active #regulatoryAnalysisPage > main > div:first-child,
body.dark-mode-active .lg\:w-1\/3.bg-white {
    background-image: none !important;
    background-color: #1f2937 !important; /* slate-800 */
    border-color: #374151 !important;     /* slate-700 */
}

/* 2. Forces all inner wrappers and solid white backgrounds to dark slate */
body.dark-mode-active #globalSummaryContainerTop,
body.dark-mode-active #globalSummaryContainerBottom,
body.dark-mode-active #caseGlobalSummaryContainer,
body.dark-mode-active #caseDetailContainer,
body.dark-mode-active .global-summary-panel,
body.dark-mode-active #globalSummaryContainerTop .bg-white,
body.dark-mode-active #globalSummaryContainerBottom .bg-white,
body.dark-mode-active #caseGlobalSummaryContainer .bg-white,
body.dark-mode-active #caseDetailContainer .bg-white {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

/* Fix for Litigation Focus Bar Backgrounds in Dark Mode */
body.dark-mode-active #focuses-chart-container .bar-wrapper {
    background-color: #374151 !important; /* slate-700 */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3) !important;
}

/* Also ensure the labels next to the bars turn light grey instead of staying dark */
body.dark-mode-active #focuses-chart-container .bar-label {
    color: #cbd5e1 !important; /* slate-300 */
}

/* ---------------------------------------------------------
   NUCLEAR FIX: STAKEHOLDER DYNAMICS & CALLOUT BOXES
   --------------------------------------------------------- */
   
/* 1. Strip the white linear-gradient and force dark slate background */
body.dark-mode-active #section-stakeholder_dynamics .bg-slate-50,
body.dark-mode-active #regulatoryCardContent .bg-slate-50,
body.dark-mode-active #globalSummaryContainerTop .bg-slate-50,
body.dark-mode-active #globalSummaryContainerBottom .bg-slate-50 {
    background-image: none !important;
    background-color: #1e293b !important; /* slate-800 */
    border-color: #374151 !important;     /* slate-700 */
}

/* 2. Lighten the italic text inside the box so it's readable */
body.dark-mode-active #section-stakeholder_dynamics .text-slate-700,
body.dark-mode-active #globalSummaryContainerTop .bg-slate-50 .text-slate-700,
body.dark-mode-active #globalSummaryContainerBottom .bg-slate-50 .text-slate-700 {
    color: #cbd5e1 !important; /* slate-300 */
}

/* ---------------------------------------------------------
   NUCLEAR FIX: CHARTS MODAL & CHART WRAPPERS
   --------------------------------------------------------- */
   
/* 1. Force all chart container backgrounds to dark slate */
body.dark-mode-active .modal-content-charts .bg-slate-50,
body.dark-mode-active .modal-content-charts .bg-white,
body.dark-mode-active #chartsContent .bg-white,
body.dark-mode-active #chartsContent .bg-slate-50,
body.dark-mode-active .chart-container,
body.dark-mode-active .chart-container-wrapper {
    background-color: #1e293b !important; /* slate-800 */
    border-color: #334155 !important;     /* slate-700 */
    background-image: none !important;
}

/* 2. Fix the dark headings inside the charts so they turn white */
body.dark-mode-active .modal-content-charts h3.text-slate-800,
body.dark-mode-active #chartsContent h3.text-slate-800,
body.dark-mode-active .chart-container-wrapper h3,
body.dark-mode-active .chart-container h3 {
    color: #f8fafc !important; /* slate-50 */
}

/* 3. Ensure the base modal wrapper itself is dark */
body.dark-mode-active .modal-content-charts {
    background-color: #0f172a !important; /* slate-900 */
    color: #cbd5e1 !important;
}

/* 4. Fix the "Landscape Charts" main header text */
body.dark-mode-active .modal-content-charts header h2 {
    color: #f8fafc !important; 
}

/* ==========================================================================
   HEADER — mobile overflow
   Four controls (menu, profile, feedback, alerts bell) plus the toggle add up
   to more than the logo leaves room for. Flex items won't shrink below their
   content by default, so the controls group overhangs and #mainAppContainer's
   overflow:hidden clips it. Logo yields instead.
   Ordering and alignment are deliberately untouched.
   ========================================================================== */
@media (max-width: 767px) {
    header > div:first-child {
        min-width: 0 !important;
        flex-shrink: 1 !important;
    }

    #logoLink {
        min-width: 0;
        display: block;
    }

    header > div:last-child {
        flex-shrink: 0 !important;
    }

    #logoLink img {
        max-width: 30vw !important;
        width: auto !important;
        height: auto !important;
        max-height: 2.25rem !important;
        object-fit: contain;
    }

    #darkModeToggleContainer {
        margin-left: 0 !important;
    }
}

@media (max-width: 430px) {
    header {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    #logoLink img {
        max-width: 26vw !important;
        height: auto !important;
        max-height: 2rem !important;
    }

    header > div:last-child button.rounded-full {
        padding: 0.375rem !important;
    }
    header > div:last-child button.rounded-full svg {
        width: 1.375rem !important;
        height: 1.375rem !important;
    }
    header > div:last-child #notificationBellBtn svg {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }

    #darkModeToggleContainer > span {
        font-size: 0.75rem !important;
        margin-right: 0.375rem !important;
    }
}

/* --- Per-card remove button (edit mode only) --- */
.card-remove-btn {
    display: none;
    color: #fca5a5;
    background: rgba(248, 113, 113, .12);
}
#dashboardGrid.edit-mode-active .card-remove-btn {
    display: inline-flex;
}
#dashboardGrid.edit-mode-active .card-remove-btn:hover {
    color: #ffffff;
    background: rgba(220, 38, 38, .85);
}
#dashboardGrid.edit-mode-active .card-remove-btn:focus-visible {
    outline: 2px solid #f87171;
    outline-offset: 1px;
}