/* General Styling */
html {
    height: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    overflow-x: auto;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    background-color: #f9f9f9;
    color: #333;
}

/* Prevent horizontal scrolling */
* {
    box-sizing: border-box;
}

/* Main content wrapper */
.main-content {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

/* Table container for horizontal scrolling */
#tableContainer {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on mobile */
}

/* Dashboard table container - no horizontal scroll */
.dashboard-table-container {
    width: 100%;
    overflow-x: visible; /* No horizontal scrolling for dashboard */
    overflow-y: visible;
}

/* Emerging data and other tables that need scrolling */
.scrollable-table-container {
    width: 100%;
    overflow-x: visible;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

/* Table styling */
table {
    width: 100%;
    min-width: max-content;
    table-layout: auto;
}

/* Ensure table cells don't wrap unnecessarily */
table td, table th {
    white-space: nowrap;
    padding: 8px 12px;
}

/* Dashboard table specific overrides */
.dashboard-table td, .dashboard-table th {
    white-space: normal; /* Allow wrapping for dashboard tables */
}

/* Navigation Styles */
header {
    width: 100%;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    position: relative;
    box-sizing: border-box;
}

.nav-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #2c3e50;
    padding: 0.5rem;
    margin: 0;
    width: 100%;
    left: 0;
    box-sizing: border-box;
}

.nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
}

.nav-left {
    display: flex;
    align-items: center;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nav-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1rem;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
    display: block;
    box-sizing: border-box;
}

.nav-link:hover {
    background-color: #34495e;
    color: #3498db;
}

.nav-brand {
    font-size: 1.5rem;
    font-weight: bold;
}

/* Dropdown Styles */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dropdown-arrow {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.dropdown.active .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #34495e;
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    border-radius: 0.375rem;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.dropdown.active .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    color: #ffffff;
    padding: 0.75rem 1rem;
    text-decoration: none;
    display: block;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.dropdown-item:hover {
    background-color: #2c3e50;
    color: #3498db;
}

.dropdown-item:first-child {
    border-radius: 0.375rem 0.375rem 0 0;
}

.dropdown-item:last-child {
    border-radius: 0 0 0.375rem 0.375rem;
}

/* Flash Messages */
.flash-message {
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
}

.flash-message.success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}

.flash-message.danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

.flash-message.info {
    color: #055160;
    background-color: #cff4fc;
    border-color: #b6effb;
}

/* New Indication Page Specific Styles with consistent typography */
.button-container button,
#clearHighlights,
#compareForm button {
    padding: 8px 12px;
    font-size: 0.75rem; /* 12px - smaller for compact buttons */
    font-weight: 500;
    margin: 3px;
    border-radius: 4px;
    border: 1px solid #ddd;
    background-color: #348ce3;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s;
    letter-spacing: 0.025em;
}

.button-container button:hover,
#clearHighlights:hover,
#compareForm button:hover {
    background-color: #e9ecef;
}

/* NCCN Button Active States with Background Colors */
.nccn-buttons button.preferred.active {
    background-color: #28a745;
    color: white;
    border-color: #1e7e34;
}

.nccn-buttons button.other-rec.active {
    background-color: #ffc107;
    color: #212529;
    border-color: #d39e00;
}

.nccn-buttons button.useful.active {
    background-color: #17a2b8;
    color: white;
    border-color: #117a8b;
}

.nccn-buttons button.all-nccn.active {
    background-color: #6c757d;
    color: white;
    border-color: #545b62;
}

/* Data buttons active state */
.data-buttons button.data-active {
    background-color: #007bff;
    color: white;
    border-color: #0056b3;
}

.data-buttons {
    margin-bottom: 10px;
}

.nccn-buttons {
    margin-bottom: 10px;
}

.button-container {
    margin-bottom: 15px;
}

#compareForm {
    margin: 15px 0;
}

#clearHighlights {
    margin: 10px 0;
}

/* Custom search bar styling with consistent typography */
.custom-search {
    margin: 20px 0;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-search input[type="text"] {
    font-size: 1rem; /* 16px - standard input size */
    height: 2.5rem; /* Better height specification */
    width: 600px;
    padding: 12px 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: inherit;
    line-height: 1.5;
}

/* Layout styling for search and compare */
.table-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
}

.compare-section {
    flex: 0 0 auto;
}

.search-section {
    flex: 1;
    display: flex;
    justify-content: center;
}

.search-section input[type="text"] {
    font-size: 1rem; /* 16px - consistent with other inputs */
    height: 2.5rem;
    width: 600px;
    padding: 12px 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: inherit;
    line-height: 1.5;
}

.empty-section {
    flex: 0 0 auto;
    width: 200px; /* Balance the layout */
}

/* Hide the default DataTables search box */
div.dataTables_filter {
    display: none;
}

/* Ruby KOL Styles with consistent typography */
.ruby-kol-container {
    margin: 30px 0;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.ruby-kol-title {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 1.5rem; /* 24px - consistent with h3 */
    font-weight: 600;
}

.ruby-kol-note {
    margin: 0 0 15px 0;
    color: #666;
    font-size: 0.875rem; /* 14px */
}

.ruby-kol-btn {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 15px;
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    letter-spacing: 0.025em;
}

.ruby-kol-btn:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.ruby-kol-btn:disabled {
    background-color: #6c757d;
    border-color: #6c757d;
    cursor: not-allowed;
}

.ruby-kol-btn.quick-query {
    background-color: #28a745;
    border-color: #28a745;
    padding: 8px 15px;
    font-size: 0.9em;
    margin-bottom: 15px;
}

.ruby-kol-btn.quick-query:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

.ruby-kol-loading {
    animation: pulse 1.5s ease-in-out infinite alternate;
    color: #666;
    font-style: italic;
    margin-top: 10px;
    display: none;
}

@keyframes pulse {
    from { opacity: 0.6; }
    to { opacity: 1; }
}

.ruby-kol-response {
    line-height: 1.6;
    margin-top: 20px;
    padding: 15px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    display: none;
}

.ruby-kol-response h1, .ruby-kol-response h2, .ruby-kol-response h3 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.ruby-kol-response ul, .ruby-kol-response ol {
    padding-left: 2em;
}

.ruby-kol-response code {
    background-color: #f4f4f4;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace;
}

.ruby-kol-response pre {
    background-color: #f4f4f4;
    padding: 10px;
    border-radius: 5px;
    overflow-x: auto;
}

.template-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.template-buttons button {
    padding: 8px 15px;
    border-radius: 4px;
    background-color: #007BFF;
    border: 1px solid #ddd;
    cursor: pointer;
}

.template-buttons button:hover {
    background-color: #e0e0e0;
}

/* Table hyperlinks styling */
table td a {
    color: #007BFF;
    text-decoration: underline;
}

table td a:hover {
    color: #0056b3;
}

table td a:visited {
    color: #6f42c1;
}

/* ===== TYPOGRAPHY SYSTEM ===== */
/* Standardized font sizes across all pages */

/* Base font size and family */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px; /* Base font size */
    line-height: 1.6;
    color: #333;
}
.header1 {
    font-size: 2.5rem; /* 40px - Main page titles */
    font-weight: 700;
    margin-bottom: 1.5rem;
    margin-top: 1rem;
    color: #2c3e50;
    text-align: center;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

/* Heading hierarchy */
h1 {
    font-size: 2.5rem; /* 40px - Main page titles */
    font-weight: 700;
    margin-bottom: 1.5rem;
    margin-top: 1rem;
    color: #2c3e50;
    text-align: center;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

h2 {
    font-size: 2rem; /* 32px - Section titles */
    font-weight: 600;
    margin-bottom: 1.25rem;
    margin-top: 1.5rem;
    color: #34495e;
    letter-spacing: -0.025em;
    line-height: 1.3;
}

h3 {
    font-size: 1.5rem; /* 24px - Subsection titles */
    font-weight: 600;
    margin-bottom: 1rem;
    margin-top: 1.25rem;
    color: #34495e;
    letter-spacing: -0.025em;
    line-height: 1.4;
}

h4 {
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    margin-bottom: 0.75rem;
    margin-top: 1rem;
    color: #34495e;
    line-height: 1.4;
}

h5 {
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
    margin-bottom: 0.5rem;
    margin-top: 0.75rem;
    color: #34495e;
    line-height: 1.4;
}

h6 {
    font-size: 1rem; /* 16px */
    font-weight: 600;
    margin-bottom: 0.5rem;
    margin-top: 0.75rem;
    color: #34495e;
    line-height: 1.4;
}

/* Text sizes */
.text-xs { font-size: 0.75rem; } /* 12px */
.text-sm { font-size: 0.875rem; } /* 14px */
.text-base { font-size: 1rem; } /* 16px */
.text-lg { font-size: 1.125rem; } /* 18px */
.text-xl { font-size: 1.25rem; } /* 20px */
.text-2xl { font-size: 1.5rem; } /* 24px */

/* Paragraph text */
p {
    font-size: 1rem; /* 16px */
    line-height: 1.6;
    margin-bottom: 1rem;
    color: #333;
}

/* Small text */
small, .small {
    font-size: 0.875rem; /* 14px */
    color: #666;
}

/* Table typography */
table {
    font-size: 0.875rem; /* 14px - Slightly smaller for tables */
}

table th {
    font-size: 0.8rem; /* 12.8px - Even smaller for headers */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

table td {
    font-size: 0.875rem; /* 14px */
    line-height: 1.4;
}

/* Button typography */
button, .btn {
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    letter-spacing: 0.025em;
}

.btn-sm {
    font-size: 0.75rem; /* 12px */
    padding: 6px 12px;
}

.btn-lg {
    font-size: 1rem; /* 16px */
    padding: 12px 24px;
}

/* Form typography */
input, textarea, select {
    font-size: 1rem; /* 16px */
    line-height: 1.5;
}

label {
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    color: #555;
}

/* Navigation typography */
.nav-link {
    font-size:1.2rem; /* 14.4px */
    font-weight: 500;
}

.nav-brand {
    font-size: 1.25rem; /* 20px */
    font-weight: 700;
}

/* AI section typography */
.ai-insights-title {
    font-size: 1.75rem; /* 28px */
    font-weight: 700;
    color: #2c3e50;
}

.ai-powered-by {
    font-size: 0.5rem; /* 8px */
    color: #7f8c8d;
}

.ask-anything-title {
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    color: #34495e;
}

/* Loading and status text */
.loading, .ruby-kol-loading {
    font-size: 0.875rem; /* 14px */
    font-style: italic;
    color: #666;
}

/* Responsive typography */
@media (max-width: 768px) {
    h1 {
        font-size: 2rem; /* 32px on mobile */
    }
    
    h2 {
        font-size: 1.5rem; /* 24px on mobile */
    }
    
    h3 {
        font-size: 1.25rem; /* 20px on mobile */
    }
    
    .ai-insights-title {
        font-size: 1.5rem; /* 24px on mobile */
    }
    
    table {
        font-size: 0.75rem; /* 12px on mobile */
    }
    
    table th {
        font-size: 0.7rem; /* 11.2px on mobile */
    }
}

/* Legacy heading styles for backwards compatibility */

/* General Table Styling with standardized typography */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    font-size: 0.875rem; /* 14px - consistent with typography system */
    background-color: #fff;
}

table th, table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    line-height: 1.4;
}

table th {
    background-color: #f2f2f2;
    font-weight: 600;
    font-size: 0.8rem; /* 12.8px - slightly smaller for headers */
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: #555;
}

table tr:nth-child(even) {
    background-color: #f9f9f9;
}

table tr:hover {
    background-color: #f1f1f1;
}

/* DataTables Wrapper Styling */
.dataTables_wrapper {
    margin: 20px 0;
}

.dataTables_length, .dataTables_filter {
    margin-bottom: 10px;
}

.dataTables_paginate {
    margin-top: 10px;
    text-align: right;
}

.dataTables_info {
    margin-top: 10px;
    text-align: left;
}

/* Scrollable Table */
.dataTables_scroll {
    overflow-x: auto;
}

/* Form styling with consistent typography */
form {
    margin: 20px auto;
    max-width: 400px;
    text-align: center;
}

form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 0.875rem; /* 14px */
    color: #555;
}

form input[type="text"], form input[type="email"], form input[type="password"], textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem; /* 16px */
    line-height: 1.5;
    font-family: inherit;
}

form button {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    border-radius: 5px;
    cursor: pointer;
    letter-spacing: 0.025em;
}

form button:hover {
    background-color: #0056b3;
}

/* Error Message Styling */
.error {
    color: red;
    text-align: center;
    margin-top: 10px;
}

/* DataTables Styling */
.dataTables_wrapper {
    margin: 20px 0;
}

#tableContainer {
    position: relative;
    margin: 20px 0;
}

#graphContainer {
    position: relative;
    margin: 20px 0;
}

canvas {
    max-width: 100%;
    height: auto;
}

/* Button Styling with consistent typography */
button, .btn {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 8px 16px;
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    border-radius: 5px;
    cursor: pointer;
    letter-spacing: 0.025em;
    transition: all 0.2s ease;
}

button:hover, .btn:hover {
    background-color: #0056b3;
}

button.reset {
    background-color: #f0f0f0;
    color: #333;
}

button.reset:hover {
    background-color: #e0e0e0;
}

/* Loading Message */
.loading {
    display: none;
    text-align: center;
    font-size: 1.5em;
    margin-top: 20px;
}
/* General Body Styling */


.loading {
    display:none;
    text-align: center;
    font-size: 1.5em;
    margin-top: 20px;
}



.nccn-buttons{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.data-buttons {
    display: flex;
    float: left;
    align-items: flex-start;
}

.nccn-buttons, .data-buttons button {
    margin-bottom: 5px;
}

button.preferred {
    background-color: #95e795; 
    color: black;
}

button.other-rec {
    background-color: #FFD580; 
    color: black;
}

button.useful {
    background-color: #ADD8E6; 
    color: black;
}

button.reset {
    background-color: #f0f0f0;
    color: black;
}

button.active {
    font-weight: bold;
}
button.data-active{
    font-weight: bold;
}

.highlight-preferred {
    box-shadow: inset 0 0 0 9999px #95e795;
}

.highlight-other-rec {
    box-shadow: inset 0 0 0 9999px #74a2b1;
}

.highlight-useful {
    box-shadow: inset 0 0 0 9999px #74a2b1;
}

.highlight {
    box-shadow: inset 0 0 0 9999px #ffff99;
}

/* Custom styling for expandable rows */
.details-row {
    display: none;
    background-color: #f9f9f9;
}

th { font-size: 12px; }
/* Shrink chart size */
#stackedBarChart {
    width: 100%;
    max-height: 400px;
}

:root {
    
    --dt-row-stripe: 0, 0, 0;
    --dt-row-hover: 0, 0, 0;
    --dt-column-ordering: 0, 0, 0;
    --dt-html-background: white;
  }
  :root.dark {
    --dt-html-background: rgb(33, 37, 41);
  }

/* Custom styling for expandable rows */

  table.dataTable td.dt-control:before {
    display: inline-block;
    box-sizing: border-box;
    content: "";
    border-top: 5px solid transparent;
    border-left: 10px solid rgba(0, 0, 0, 0.5);
    border-bottom: 5px solid transparent;
    border-right: 0px solid transparent;
    border-radius: 1px;
    background: none;
    box-shadow: none;
    
}
  table.dataTable tr.dt-hasChild td.dt-control:before {
    border-top: 10px solid rgba(0, 0, 0, 0.5);
    border-left: 5px solid transparent;
    border-bottom: 0px solid transparent;
    border-right: 5px solid transparent;
    background-color: transparent;
    content: "";
  }
  
  html.dark table.dataTable td.dt-control:before,
  :root[data-bs-theme=dark] table.dataTable td.dt-control:before,
  :root[data-theme=dark] table.dataTable td.dt-control:before {
    border-left-color: rgba(255, 255, 255, 0.5);
    background-color: transparent
  }
  html.dark table.dataTable tr.dt-hasChild td.dt-control:before,
  :root[data-bs-theme=dark] table.dataTable tr.dt-hasChild td.dt-control:before,
  :root[data-theme=dark] table.dataTable tr.dt-hasChild td.dt-control:before {
    border-top-color: rgba(255, 255, 255, 0.5);
    border-left-color: transparent;
    background-color: transparent;
  }
  
  /* This CSS positions the overlay in the center of the container */
#brandingOverlayGraph, 


/* Optional: Make the overlay responsive, for instance, control image size */
#brandingOverlayGraph img,
#brandingOverlayTable img {
  max-width: 200px;  /* Adjust as needed */
  width: 100%;
}

#summaryContainer{
    border: 1px solid #ccc;
    padding: 12px; /* Reduced from 15px */
    margin: 15px 0; /* Reduced from 20px 0 */
    background-color: #f9f9f9;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px; /* Reduced from 20px */
}

.page-title {
    font-size: 2rem;
    margin-bottom: 20px;
    text-align: center;
    color: #007BFF;
}

.section-title {
    font-size: 1.5rem;
    margin-top: 40px;
    margin-bottom: 20px;
    color: #333;
}

/* Buttons */
.btn-primary {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.btn-primary:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

.custom-reset-btn {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 20px; /* Reduced from 12px 24px */
    font-size: 16px;
    font-weight: 500;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-decoration: none;
    display: inline-block;
}

.custom-reset-btn:hover {
    background-color: #218838;
    color: white;
    text-decoration: none;
}

.custom-reset-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.25);
}

.custom-reset-btn:active {
    background-color: #1e7e34;
    transform: translateY(1px);
}

/* Text Areas */
textarea {
    width: 100%;
    height: 150px;
    padding: 8px; /* Reduced from 10px */
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: none;
}

/* Loading Message */
.loading-message {
    font-size: 14px;
    color: #555;
}

/* Response Box */
.response-box {
    margin-top: 15px; /* Reduced from 20px */
    padding: 8px; /* Reduced from 10px */
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    font-size: 16px;
}

/* Comparison Table */
.comparison-container {
    margin: 20px 0;
    overflow-x: auto;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
}

.comparison-table th,
.comparison-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.comparison-table th {
    background-color: #f2f2f2;
    position: sticky;
    top: 0;
    z-index: 1;
}

.expandable-row {
    cursor: pointer;
}

.expandable-row:hover {
    background-color: #f2f2f2;
}

.details-row {
    background-color: #f9f9f9;
    font-size: 14px;
}
/* Expand Note */
.table-note {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
    font-style: italic;
}
/* Gemini Chatbot Styles */
#geminiChatbotForm {
    width: 100%;
    max-width: 800px;
    margin-bottom: 20px;
}

#geminiChatbotQuery {
    width: 100%;
    height: 150px;
    padding: 8px; /* Reduced from 10px */
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: vertical;
}

#geminiChatbotSubmit {
    margin-top: 10px;
    display: block;
}

#geminiChatbotResponse {
    margin-top: 15px; /* Reduced from 20px */
    padding: 8px; /* Reduced from 10px */
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    font-size: 16px;
}

/* Scatter Plot Specific Styles */
#chart {
    width: 100%;
    max-width: 1100px;
    height: 650px;
    margin: auto;
}

.footnote {
    font-size: 0.8rem;
    color: #555;
    max-width: 1100px;
    margin: 10px auto 0;
}

.controls {
    margin: 15px auto; /* Reduced from 20px auto */
    max-width: 1100px;
    display: flex;
    gap: 20px;
    align-items: center;
}

.controls label {
    font-weight: bold;
}

.controls input {
    padding: 5px 10px;
    font-size: 1rem;
    width: 200px;
}

/* Order Emerging Data Styles */
.card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 1.5rem; /* Reduced from 2rem */
    overflow: hidden;
}

.card-header {
    background: #f8f9fa;
    padding: 1rem; /* Reduced from 1.5rem */
    border-bottom: 1px solid #dee2e6;
}

.card-title {
    margin: 0;
    color: #495057;
    font-size: 1.25rem;
}

.card-body {
    padding: 1rem; /* Reduced from 1.5rem */
}

.form-group {
    margin-bottom: 0.75rem; /* Reduced from 1rem */
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #495057;
}

.form-control {
    width: 100%;
    padding: 0.4rem 0.6rem; /* Reduced from 0.5rem 0.75rem */
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    font-size: 1rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.alert {
    padding: 0.6rem 1rem; /* Reduced from 0.75rem 1.25rem */
    margin-bottom: 0.75rem; /* Reduced from 1rem */
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.text-muted {
    color: #6c757d;
}

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

.mb-4 {
    margin-bottom: 1.5rem;
}

.mt-3 {
    margin-top: 1rem;
}

/* Dashboard Specific Styles - Overhauled for Better Visibility */
.dashboard-table {
    width: 100%;
    table-layout: fixed;
    font-size: 0.85rem; /* Slightly larger font for better readability */
    border-collapse: collapse;
    background-color: white;
}

.dashboard-table th,
.dashboard-table td {
    word-wrap: break-word;
    overflow-wrap: break-word;
    vertical-align: top;
    padding: 8px 6px; /* Increased padding for better readability */
    font-size: 0.85rem;
    line-height: 1.4;
    border: 1px solid #ddd;
    text-align: left;
}

.dashboard-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #495057;
}

/* Default column widths - ALL columns visible by default */
.dashboard-table th:nth-child(1), /* Date */
.dashboard-table td:nth-child(1) {
    width: 10%;
    white-space: nowrap;
}

.dashboard-table th:nth-child(2), /* Type */
.dashboard-table td:nth-child(2) {
    width: 8%;
}

.dashboard-table th:nth-child(3), /* Description */
.dashboard-table td:nth-child(3) {
    width: 32%;
    white-space: normal;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 4.2em; /* Approximately 3 lines */
}

.dashboard-table th:nth-child(4), /* NCCN Type */
.dashboard-table td:nth-child(4) {
    width: 10%;
}

.dashboard-table th:nth-child(5), /* NCCN Version */
.dashboard-table td:nth-child(5) {
    width: 10%;
}

.dashboard-table th:nth-child(6), /* Ordered By */
.dashboard-table td:nth-child(6) {
    width: 12%;
    font-size: 0.8rem;
}

.dashboard-table th:nth-child(7), /* Actions */
.dashboard-table td:nth-child(7) {
    width: 18%;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
}

/* Actions column link styling */
.dashboard-table td:nth-child(7) a {
    display: inline-block;
    font-size: 0.8rem;
    line-height: 1.3;
    color: #007bff;
    text-decoration: none;
    margin: 2px 0;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

.dashboard-table td:nth-child(7) a:hover {
    background-color: #e3f2fd;
    text-decoration: none;
}

/* Responsive behavior - hide less important columns on smaller screens */
@media (max-width: 1200px) {
    .dashboard-table th:nth-child(5), /* NCCN Version - hide first */
    .dashboard-table td:nth-child(5) {
        display: none;
    }
    
    .dashboard-table th:nth-child(3),
    .dashboard-table td:nth-child(3) {
        width: 38%; /* Increase description width */
    }
}

@media (max-width: 1000px) {
    .dashboard-table th:nth-child(4), /* NCCN Type - hide second */
    .dashboard-table td:nth-child(4) {
        display: none;
    }
    
    .dashboard-table th:nth-child(3),
    .dashboard-table td:nth-child(3) {
        width: 44%; /* Increase description width */
    }
    
    .dashboard-table th:nth-child(7),
    .dashboard-table td:nth-child(7) {
        width: 22%; /* Increase actions width */
    }
}

@media (max-width: 768px) {
    .dashboard-table th:nth-child(6), /* Ordered By - hide on mobile/tablet */
    .dashboard-table td:nth-child(6) {
        display: none;
    }
    
    .dashboard-table th:nth-child(3),
    .dashboard-table td:nth-child(3) {
        width: 50%; /* Increase description width */
    }
    
    .dashboard-table th:nth-child(7),
    .dashboard-table td:nth-child(7) {
        width: 28%; /* Increase actions width */
    }
}

/* Always keep these columns visible */
.dashboard-table th:nth-child(1), /* Date - always visible */
.dashboard-table td:nth-child(1),
.dashboard-table th:nth-child(2), /* Type - always visible */
.dashboard-table td:nth-child(2),
.dashboard-table th:nth-child(3), /* Description - always visible */
.dashboard-table td:nth-child(3),
.dashboard-table th:nth-child(7), /* Actions - ALWAYS visible */
.dashboard-table td:nth-child(7) {
    display: table-cell !important;
}

/* Organization table (6 columns) - Overhauled for Better Visibility */
.org-dashboard-table {
    width: 100%;
    table-layout: fixed;
    font-size: 0.85rem;
    border-collapse: collapse;
    background-color: white;
}

.org-dashboard-table th,
.org-dashboard-table td {
    word-wrap: break-word;
    overflow-wrap: break-word;
    vertical-align: top;
    padding: 8px 6px;
    font-size: 0.85rem;
    line-height: 1.4;
    border: 1px solid #ddd;
    text-align: left;
}

.org-dashboard-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #495057;
}

/* Default column widths for organization table - ALL columns visible by default */
.org-dashboard-table th:nth-child(1), /* User */
.org-dashboard-table td:nth-child(1) {
    width: 18%;
}

.org-dashboard-table th:nth-child(2), /* Date */
.org-dashboard-table td:nth-child(2) {
    width: 10%;
    white-space: nowrap;
}

.org-dashboard-table th:nth-child(3), /* Type */
.org-dashboard-table td:nth-child(3) {
    width: 8%;
}

.org-dashboard-table th:nth-child(4), /* Description */
.org-dashboard-table td:nth-child(4) {
    width: 38%;
    white-space: normal;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 4.2em;
}

.org-dashboard-table th:nth-child(5), /* NCCN Type */
.org-dashboard-table td:nth-child(5) {
    width: 10%;
}

.org-dashboard-table th:nth-child(6), /* Actions */
.org-dashboard-table td:nth-child(6) {
    width: 16%;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
}

/* Organization table responsive behavior */
@media (max-width: 1200px) {
    .org-dashboard-table th:nth-child(5), /* NCCN Type - hide first */
    .org-dashboard-table td:nth-child(5) {
        display: none;
    }
    
    .org-dashboard-table th:nth-child(4),
    .org-dashboard-table td:nth-child(4) {
        width: 44%; /* Increase description width */
    }
    
    .org-dashboard-table th:nth-child(6),
    .org-dashboard-table td:nth-child(6) {
        width: 20%; /* Increase actions width */
    }
}

@media (max-width: 1000px) {
    .org-dashboard-table th:nth-child(1),
    .org-dashboard-table td:nth-child(1) {
        width: 20%; /* Increase user width */
    }
    
    .org-dashboard-table th:nth-child(4),
    .org-dashboard-table td:nth-child(4) {
        width: 48%; /* Increase description width */
    }
}

/* Always keep these columns visible for organization table */
.org-dashboard-table th:nth-child(1), /* User - always visible */
.org-dashboard-table td:nth-child(1),
.org-dashboard-table th:nth-child(2), /* Date - always visible */
.org-dashboard-table td:nth-child(2),
.org-dashboard-table th:nth-child(3), /* Type - always visible */
.org-dashboard-table td:nth-child(3),
.org-dashboard-table th:nth-child(4), /* Description - always visible */
.org-dashboard-table td:nth-child(4),
.org-dashboard-table th:nth-child(6), /* Actions - ALWAYS visible */
.org-dashboard-table td:nth-child(6) {
    display: table-cell !important;
}

/* Shared actions column styling */
.dashboard-table td:nth-child(7) a,
.org-dashboard-table td:nth-child(6) a {
    display: inline-block;
    font-size: 0.8rem;
    line-height: 1.3;
    color: #007bff;
    text-decoration: none;
    margin: 2px 0;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background-color 0.2s ease;
    word-break: break-word;
}

.dashboard-table td:nth-child(7) a:hover,
.org-dashboard-table td:nth-child(6) a:hover {
    background-color: #e3f2fd;
    text-decoration: none;
}

/* Tooltip styling for truncated text */
.dashboard-table td[title],
.org-dashboard-table td[title] {
    cursor: help;
    position: relative;
}

.dashboard-table td[title]:hover::after,
.org-dashboard-table td[title]:hover::after {
    content: attr(title);
    position: absolute;
    background: #333;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: normal;
    max-width: 200px;
    word-wrap: break-word;
    z-index: 1000;
    top: 100%;
    left: 0;
    margin-top: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Table container styling */
.dashboard-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Remove old conflicting styles and simplify */
.dashboard-table .text-truncate,
.org-dashboard-table .text-truncate {
    overflow: visible;
    text-overflow: initial;
    white-space: normal;
}

/* Mobile responsive behavior (768px and below) */
@media (max-width: 768px) {
    /* Container adjustments */
    .container {
        padding: 8px;
    }
    
    /* Table font size adjustments */
    .dashboard-table,
    .org-dashboard-table {
        font-size: 0.75rem;
    }
    
    .dashboard-table th,
    .dashboard-table td,
    .org-dashboard-table th,
    .org-dashboard-table td {
        padding: 6px 4px;
        font-size: 0.75rem;
        line-height: 1.3;
    }
    
    /* Show mobile details toggle */
    .mobile-details-toggle {
        display: inline-block;
    }
    
    /* Dashboard table mobile layout - hide non-essential columns */
    .dashboard-table th:nth-child(4), /* NCCN Type */
    .dashboard-table td:nth-child(4),
    .dashboard-table th:nth-child(5), /* NCCN Version */
    .dashboard-table td:nth-child(5),
    .dashboard-table th:nth-child(6), /* Ordered By */
    .dashboard-table td:nth-child(6) {
        display: none !important;
    }
    
    /* Adjust remaining columns for mobile dashboard */
    .dashboard-table th:nth-child(1),
    .dashboard-table td:nth-child(1) {
        width: 15%; /* Date */
    }
    
    .dashboard-table th:nth-child(2),
    .dashboard-table td:nth-child(2) {
        width: 12%; /* Type */
    }
    
    .dashboard-table th:nth-child(3),
    .dashboard-table td:nth-child(3) {
        width: 48%; /* Description */
    }
    
    .dashboard-table th:nth-child(7),
    .dashboard-table td:nth-child(7) {
        width: 25%; /* Actions */
    }
    
    /* Organization table mobile layout */
    .org-dashboard-table th:nth-child(5), /* NCCN Type */
    .org-dashboard-table td:nth-child(5) {
        display: none !important;
    }
    
    /* Adjust remaining columns for mobile organization table */
    .org-dashboard-table th:nth-child(1),
    .org-dashboard-table td:nth-child(1) {
        width: 22%; /* User */
    }
    
    .org-dashboard-table th:nth-child(2),
    .org-dashboard-table td:nth-child(2) {
        width: 15%; /* Date */
    }
    
    .org-dashboard-table th:nth-child(3),
    .org-dashboard-table td:nth-child(3) {
        width: 12%; /* Type */
    }
    
    .org-dashboard-table th:nth-child(4),
    .org-dashboard-table td:nth-child(4) {
        width: 46%; /* Description */
    }
    
    .org-dashboard-table th:nth-child(6),
    .org-dashboard-table td:nth-child(6) {
        width: 25%; /* Actions */
    }
    
    /* Mobile action links */
    .dashboard-table td:nth-child(7) a,
    .org-dashboard-table td:nth-child(6) a {
        font-size: 0.7rem;
        padding: 3px 5px;
        margin: 2px 0;
    }
}

/* Responsive Table Styles - General */
.responsive-table-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Mobile dropdown for hidden table data */
.mobile-details-toggle {
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.7rem;
    cursor: pointer;
    color: #007bff;
    text-decoration: none;
    display: none;
    margin-top: 4px;
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
}

.mobile-details-toggle:hover {
    background: #e9ecef;
    color: #0056b3;
    text-decoration: none;
}

.mobile-details-toggle:focus {
    outline: 2px solid #007bff;
    outline-offset: 1px;
}

.mobile-details-content {
    display: none;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
    padding: 8px;
    font-size: 0.7rem;
    margin-top: 1px;
    animation: slideDown 0.2s ease-out;
    position: relative;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.mobile-details-content.show {
    display: block;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-5px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 200px;
    }
}

.mobile-details-item {
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 2px 0;
    border-bottom: 1px solid #e9ecef;
}

.mobile-details-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.mobile-details-label {
    font-weight: bold;
    color: #495057;
    margin-right: 8px;
    min-width: 60px;
    flex-shrink: 0;
    font-size: 0.65rem;
}

.mobile-details-value {
    color: #333;
    text-align: right;
    flex: 1;
    word-break: break-word;
    font-size: 0.65rem;
    line-height: 1.2;
}

/* Very small screens (480px and below) */
@media (max-width: 480px) {
    .nav-header {
        padding: 0.25rem;
    }
    
    .nav-brand {
        font-size: 1.2rem;
    }
    
    .dashboard-table,
    .org-dashboard-table {
        font-size: 0.65rem;
    }
    
    .dashboard-table th,
    .dashboard-table td,
    .org-dashboard-table th,
    .org-dashboard-table td {
        padding: 4px 2px;
        font-size: 0.65rem;
        line-height: 1.2;
    }
    
    h1 {
        font-size: 2rem; /* Increased from 1.5rem to 2rem for mobile */
    }
    
    h2 {
        font-size: 1.2rem;
    }
    
    /* Stack action buttons vertically on very small screens */
    .dashboard-table td:nth-child(7) a,
    .org-dashboard-table td:nth-child(6) a {
        display: block;
        font-size: 0.6rem;
        padding: 3px 4px;
        margin: 2px 0;
        text-align: center;
    }
}

/* Horizontal scroll fallback for very small screens */
@media (max-width: 640px) {
    .dashboard-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -10px;
    }
    
    .dashboard-table,
    .org-dashboard-table {
        min-width: 500px; /* Minimum table width */
    }
}

/* Generic responsive table classes for all tables */
.responsive-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.responsive-table {
    min-width: 100%;
    table-layout: auto;
}

/* Admin dashboard table responsive styles */
@media (max-width: 768px) {
    /* Admin tables mobile adjustments */
    .min-w-full {
        font-size: 0.75rem;
    }
    
    .min-w-full th,
    .min-w-full td {
        padding: 6px 4px;
        font-size: 0.75rem;
        line-height: 1.2;
    }
    
    /* Hide less important columns in admin tables on mobile */
    .min-w-full th:nth-child(4), /* Org Tokens column in user table */
    .min-w-full td:nth-child(4),
    .min-w-full th:nth-child(5), /* Transactions column */
    .min-w-full td:nth-child(5) {
        display: none;
    }
    
    /* Adjust remaining columns for mobile in admin tables */
    .min-w-full th:nth-child(1),
    .min-w-full td:nth-child(1) {
        width: 30%; /* User/Organization */
    }
    
    .min-w-full th:nth-child(2),
    .min-w-full td:nth-child(2) {
        width: 20%; /* Organization/Tokens */
    }
    
    .min-w-full th:nth-child(3),
    .min-w-full td:nth-child(3) {
        width: 15%; /* Role/Users */
    }
    
    .min-w-full th:nth-child(6),
    .min-w-full td:nth-child(6) {
        width: 15%; /* Status */
    }
    
    .min-w-full th:nth-child(7),
    .min-w-full td:nth-child(7) {
        width: 20%; /* Actions */
    }
}

/* DataTable responsive overrides */
@media (max-width: 768px) {
    .dataTables_wrapper {
        font-size: 0.75rem;
    }
    
    .dataTables_wrapper table {
        font-size: 0.75rem !important;
    }
    
    .dataTables_wrapper th,
    .dataTables_wrapper td {
        padding: 4px 2px !important;
        font-size: 0.7rem !important;
        line-height: 1.2 !important;
    }
    
    .dataTables_info,
    .dataTables_paginate {
        font-size: 0.75rem;
    }
    
    .dataTables_length select,
    .dataTables_filter input {
        font-size: 0.75rem;
        padding: 2px 4px;
    }
}

/* Comparison table responsive styles */
@media (max-width: 768px) {
    .comparison-table {
        font-size: 0.7rem;
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .comparison-table th,
    .comparison-table td {
        padding: 4px 2px;
        font-size: 0.7rem;
        line-height: 1.2;
    }
}

/* External resources table responsive styles */
@media (max-width: 768px) {
    table[style*="width:100%"] {
        font-size: 0.75rem !important;
    }
    
    table[style*="width:100%"] th,
    table[style*="width:100%"] td {
        padding: 6px 4px !important;
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
    }
}

/* Mobile hamburger menu styles */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.hamburger-line {
    width: 25px;
    height: 3px;
    background-color: #ffffff;
    transition: all 0.3s ease;
    transform-origin: center;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile navigation adjustments */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .nav-header {
        position: relative;
        padding: 0.75rem 2.5rem; /* Reduced from 1rem 3rem */
    }
    
    .nav-menu {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background-color: #2c3e50;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 3rem 0 1.5rem 0; /* Reduced from 4rem 0 2rem 0 */
        transition: left 0.3s ease;
        z-index: 1000;
        overflow-y: auto;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    }
    
    .nav-menu.mobile-open {
        left: 0;
    }
    
    .nav-left,
    .nav-right {
        flex-direction: column;
        width: 100%;
        gap: 0;
    }
    
    .nav-left {
        order: 1;
        border-bottom: 1px solid #34495e;
        padding-bottom: 0.75rem; /* Reduced from 1rem */
        margin-bottom: 0.75rem; /* Reduced from 1rem */
    }
    
    .nav-right {
        order: 2;
    }
    
    .nav-link {
        display: block;
        padding: 0.75rem 1.25rem; /* Reduced from 1rem 1.5rem */
        font-size: 1rem;
        border-bottom: 1px solid #34495e;
        margin: 0;
        border-radius: 0;
        width: 100%;
        box-sizing: border-box;
    }
    
    .nav-brand {
        font-size: 1.25rem;
        font-weight: bold;
        text-align: center;
    }
    
    /* Mobile dropdown adjustments */
    .dropdown {
        width: 100%;
    }
    
    .dropdown-toggle {
        justify-content: space-between;
        width: 100%;
    }
    
    .dropdown-menu {
        position: static;
        width: 100%;
        background-color: #34495e;
        box-shadow: none;
        border-radius: 0;
        transform: none;
        opacity: 1;
        visibility: visible;
        display: none;
        margin: 0;
    }
    
    .dropdown.active .dropdown-menu {
        display: block;
    }
    
    .dropdown-item {
        padding: 0.6rem 1.75rem; /* Reduced from 0.75rem 2rem */
        border-bottom: 1px solid #2c3e50;
        font-size: 1.2rem;
    }
    
    .dropdown-item:last-child {
        border-bottom: none;
    }
    
    /* Overlay for mobile menu */
    .nav-menu.mobile-open::after {
        content: '';
        position: fixed;
        top: 0;
        left: 80%;
        width: 20%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: -1;
        pointer-events: auto;
    }
    
    /* Prevent body scroll when mobile menu is open */
    body.mobile-menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
}

/* Prime reports table styling to match dashboard */
.prime-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Purchased reports table */
.prime-purchased-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
}

.prime-purchased-table th,
.prime-purchased-table td {
    border: 1px solid #d1fae5; /* green border to match theme */
}

/* Available reports table */
.prime-available-table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
}

.prime-available-table th,
.prime-available-table td {
    border: 1px solid #e5e7eb; /* gray border */
}

/* Column widths for purchased reports */
.prime-purchased-table th:nth-child(1), .prime-purchased-table td:nth-child(1) { width: 40%; } /* Title */
.prime-purchased-table th:nth-child(2), .prime-purchased-table td:nth-child(2) { width: 20%; } /* Date */
.prime-purchased-table th:nth-child(3), .prime-purchased-table td:nth-child(3) { width: 25%; } /* Ordered By */
.prime-purchased-table th:nth-child(4), .prime-purchased-table td:nth-child(4) { width: 15%; } /* Action */

/* Column widths for available reports */
.prime-available-table th:nth-child(1), .prime-available-table td:nth-child(1) { width: 30%; } /* Title */
.prime-available-table th:nth-child(2), .prime-available-table td:nth-child(2) { width: 45%; } /* Description */
.prime-available-table th:nth-child(3), .prime-available-table td:nth-child(3) { width: 12%; } /* Cost */
.prime-available-table th:nth-child(4), .prime-available-table td:nth-child(4) { width: 13%; } /* Action */

/* Mobile responsive */
@media (max-width: 768px) {
    .prime-purchased-table th:nth-child(2),
    .prime-purchased-table td:nth-child(2),
    .prime-available-table th:nth-child(2),
    .prime-available-table td:nth-child(2) {
        display: none;
    }
    
    .prime-purchased-table,
    .prime-available-table {
        min-width: 400px;
    }
}

/* FDA approvals html */
.custom-search {
            margin: 20px 0;
            padding: 10px;
            display: flex;
            align-items: center;
        }
        .custom-search input[type="text"] {
            /* Use standardized font size from global CSS */
            font-size: 1rem; /* 16px - consistent with typography system */
            height: 2.5rem;
            width: 600px;
            padding: 12px 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-family: inherit;
            line-height: 1.5;
        }
        
        /* Hide the default DataTables search box */
        div.dataTables_filter {
            display: none;
        }
        
        /* Table styling */
        #fdaDataTable {
            width: 100% !important;
            table-layout: fixed;
        }

        /* Ensure table cells wrap text properly and align */
        #fdaDataTable td, #fdaDataTable th {
            word-wrap: break-word;
            word-break: break-word;
            white-space: normal !important;
            vertical-align: top;
            padding: 8px 12px;
        }
        
        /* Specific column widths for proper alignment */
        #fdaDataTable th:nth-child(1), 
        #fdaDataTable td:nth-child(1) {
            width: 100px;
            max-width: 100px;
        }
        
        #fdaDataTable th:nth-child(2), 
        #fdaDataTable td:nth-child(2) {
            width: 200px;
            max-width: 200px;
        }
        
        #fdaDataTable th:nth-child(3), 
        #fdaDataTable td:nth-child(3) {
            width: 150px;
            max-width: 150px;
        }
        
        #fdaDataTable th:nth-child(4), 
        #fdaDataTable td:nth-child(4) {
            width: 140px;
            max-width: 140px;
        }
        
        #fdaDataTable th:nth-child(5), 
        #fdaDataTable td:nth-child(5) {
            width: 120px;
            max-width: 120px;
        }
        
        #fdaDataTable th:nth-child(6), 
        #fdaDataTable td:nth-child(6) {
            width: 100px;
            max-width: 100px;
        }
        
        /* Table container */
        #tableContainer {
            width: 100%;
        }
        
        /* DataTables wrapper */
        .dataTables_wrapper {
            width: 100%;
        }
        
        /* Ruby KOL AI Styling */
        .ai-insights-container {
            margin-bottom: 2em;
            max-width: 100%;
            margin-left: 0;
            margin-right: 0;
            text-align: left;
            padding: 2em;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            min-height: 400px; /* Increased height */
        }

        .ai-insights-title {
            /* Use standardized font size from global CSS instead of custom size */
            /* font-size: 2.2em; - removed to use global h2 styling */
            margin-bottom: 1.5em;
            font-weight: 700;
            color: #2c3e50;
            text-align: left;
        }

        .ai-powered-by {
            display: inline-block;
            font-size: 0.4em;
            color: #7f8c8d;
            vertical-align: super;
            margin-left: 0.5em;
        }

        .ai-top-buttons {
            display: flex;
            gap: 1em;
            margin-bottom: 2em;
            justify-content: flex-start;
        }

        .ai-main-layout {
            display: grid;
            /*grid-template-columns: 1fr 2fr; /* Equal columns for better balance */
            /*gap: 1.5em; /* Reduced gap for more compact layout */
            align-items: start;
        }

        .column-left {
            display: flex;
            align-items: flex-start;
            justify-self: start;
            flex-direction: column;
            text-align: left;
        }

        #rubyKolForm {
            display: flex;
            flex-direction: column;
            gap: 1em; /* Reduced for more compact layout */
            height: 100%;
            text-align: left;
            max-width: max-content;
        }

        #rubyKolQuery {
            width: 100%;
            min-height: 150px; /* Reduced for more compact layout */
            padding: 15px; /* Reduced padding for more space */
            border: 1px solid #c0c0c0;
            border-radius: 8px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 1em;
            resize: vertical;
            flex-grow: 1;
        }

        .column-right {
            display: flex;
            flex-direction: column;
        }

        #rubyKolResponse {
            height: 600px; /* Reduced for more compact layout */
            overflow-y: auto;
            padding: 16px;
            border: 1px solid #c0c0c0;
            border-radius: 8px;
            background: #fdfefe;
            font-size: 1em;
            word-break: break-word;
            line-height: 1.6;
            white-space: pre-wrap;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
        }

        .ruby-kol-loading {
            display: none;
            margin-top: 0.8em;
            font-size: 0.9em;
            color: #555;
            text-align: center;
            font-style: italic;
        }

        .ai-btn {
            padding: 12px 20px;
            border: 2px solid #4a90e2;
            border-radius: 6px;
            background-color: white;
            color: #4a90e2;
            cursor: pointer;
            /* Use standardized font size from global CSS */
            font-size: 0.875rem; /* 14px - consistent with global button styling */
            font-weight: 500; /* Consistent with global styling */
            transition: all 0.2s ease;
            min-width: 120px;
            letter-spacing: 0.025em;
        }

        .ai-btn:hover {
            background-color: #f0f7ff;
            transform: translateY(-1px);
        }

        .ai-btn:active,
        .ai-btn.active {
            background-color: #4a90e2;
            color: white;
        }

        .ai-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .submit-btn {
            background-color: #4a90e2;
            color: white;
        }

        .submit-btn:hover {
            background-color: #357abd;
        }

/* Waitlist Form Styling */
.waitlist-success {
    animation: slideInFromTop 0.5s ease-out;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
}

.waitlist-error {
    animation: slideInFromTop 0.5s ease-out;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

@keyframes slideInFromTop {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Waitlist form enhancements */
#waitlistForm input:focus,
#waitlistForm select:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

#waitlistForm button[type="submit"]:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
}