/* Removed sentiment button overrides - using Tailwind classes instead */

table {
  width: 100%;
  border-collapse: collapse;
    text-align: left;
}

/* Custom max-width for main content */
.max-w-custom {
    max-width: 1600px;
}

/* Two-Column Layout for Sidebar System */
.sidebar-layout-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 1.5rem;
    align-items: flex-start;
}

.main-content-column {
    flex: 1;
    min-width: 0;
    max-width: 1600px;
}

.sidebar-column {
    width: 370px;
    flex-shrink: 0;
}

/* Remove old fixed positioning classes */
.fixed-sidebar-container,
.data-collection-sidebar-container {
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    z-index: auto;
    margin: 0;
    padding: 0;
}

/* Maintain sticky behavior for cards within column */
.sidebar-column .bg-gray-800 {
    position: sticky;
    top: 1rem; /* 16px from top when sticky */
}

/* Stack sidebar cards with proper spacing */
.sidebar-column > div:not(:last-child) {
    margin-bottom: 1.5rem; /* 24px spacing between cards */
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .sidebar-layout-container {
        flex-direction: column !important;
    }
    
    .sidebar-column {
        width: 100% !important;
        order: -1; /* Move sidebar above content on mobile */
    }
    
    .sidebar-column .bg-gray-800 {
        position: static; /* Disable sticky on mobile */
    }
    
    /* Hide floating sidebars on mobile (legacy rule) */
    .fixed-sidebar-container,
    .data-collection-sidebar-container {
        display: block !important; /* Override previous hide rule since they're now in column */
    }
}

/* Responsive Main Content Area (Legacy - may be overridden by flex layout) */
.responsive-main-content {
    width: 100%;
    min-width: 800px;
    max-width: 1680px;
}

/* Ensure responsiveness on smaller screens */
@media (max-width: 1200px) {
  .responsive-main-content {
    min-width: 600px;
    max-width: 100%;
  }
}

/* Very small screens */
@media (max-width: 768px) {
  .responsive-main-content {
    min-width: 320px;
    max-width: 100%;
  }
}

/* CSS Variables for Filter Form Sizing */
:root {
    --filter-element-min-width: 100px; /* Change this value to affect all filter elements */
}

/* Filter Form Column-Based Responsive Sizing */
/* CRITICAL: Force flexbox shrinking behavior */

/* Filter form responsive behavior - clean approach */
.flex.gap-4.mb-6 {
    overflow: visible;
    min-width: 0;
    flex-wrap: nowrap;
}

.flex.gap-4.mb-6 > .flex-1 {
    flex: 1 1 0; /* Grow equally, shrink equally */
    min-width: var(--filter-element-min-width); /* Restore proper minimum */
    overflow: visible; /* Allow interactive elements to show */
    margin: 1px; /* Add small margin to prevent blue line cutoff */
}

/* WORKING! Form elements now properly responsive */
#date-range-picker-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

select[name="content_type"],
select[name="brand"], 
select[name="products"],
select[name="product_type"],
select[name="tags"],
div.max-h-32.filter-element {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

/* Base class for form containers that need focus outline space */
.form-container {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: visible; /* Allow focus outlines to show */
    box-sizing: border-box;
}

/* Base class for form wrappers (like .filter-element divs) */
.form-wrapper {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: visible; /* Allow focus outlines to show */
    box-sizing: border-box;
}

/* =========================== */
/* APPLY BASE CLASSES TO ALL FORM ELEMENTS */
/* =========================== */

/* All select dropdowns */
select[name="content_type"],
select[name="brand"], 
select[name="products"],
select[name="product_type"],
select[name="tags"] {
    @extend .responsive-form-element;
}

/* Django form elements inside wrappers */
div.filter-element select[name="review_status"],
div.filter-element input[name="title"] {
    @extend .responsive-form-element;
}

/* Form wrapper divs */
div.filter-element:has(select[name="review_status"]),
div.filter-element:has(input[name="title"]),
div.max-h-32.filter-element {
    @extend .form-wrapper;
}

/* Manual application since CSS @extend doesn't work in regular CSS */
/* All select dropdowns - responsive behavior */
select[name="content_type"],
select[name="brand"], 
select[name="products"],
select[name="product_type"],
select[name="tags"],
div.filter-element select[name="review_status"],
div.filter-element input[name="title"] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

/* All form wrapper divs - focus outline space */
div.filter-element:has(select[name="review_status"]),
div.filter-element:has(input[name="title"]),
div.max-h-32.filter-element,
div.filter-element {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: visible; /* Allow focus outlines to show */
    box-sizing: border-box;
}

/* Button elements */
#date-range-picker-btn {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

/* When columns get too narrow, stack them */
@media (max-width: 900px) {
    .flex.gap-4.mb-6 {
        flex-direction: column;
        gap: 1rem;
    }
    
    .flex.gap-4.mb-6 > .flex-1 {
        min-width: var(--filter-element-min-width); /* Restore minimum width */
        padding-right: 0;
        margin: 3px; /* Keep margins in mobile view */
        padding: 1px; /* Keep padding in mobile view */
        overflow: visible; /* Allow focus outlines to show on mobile */
    }
    
    /* Hide column dividers when stacked */
    .flex.gap-4.mb-6 > .flex.items-stretch {
        display: none;
    }
}

/* Focus state overrides - Allow blue borders to show properly */
#date-range-picker-btn:focus,
input[name="title"]:focus,
input[id*="title"]:focus,
input[id="id_title"]:focus,
select[name="review_status"]:focus,
select[name="content_type"]:focus,
select[name="subreddit"]:focus,
.filter-element select:focus,
.filter-element input:focus {
    overflow: visible !important;
    position: relative;
    z-index: 10;
}

/* Ensure focus rings don't get clipped by parent containers */
.filter-element:has(:focus),
div:has(#date-range-picker-btn:focus),
div:has(input:focus),
div:has(select:focus) {
    overflow: visible !important;
}

/* =============================================== */
/* DASHBOARD CARD SYSTEM - Base Components */
/* =============================================== */

/* Dashboard Grid System Variables */
:root {
    --card-gap: 1.5rem;
    --card-border-radius: 0.5rem;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --card-bg: rgb(31, 41, 55); /* gray-800 */
    --card-border: rgb(55, 65, 81); /* gray-700 */
    --row-height-standard: 400px;
    --row-height-tall: 600px;
    --row-height-compact: 300px;
}

/* Dashboard Grid Container */
.dashboard-grid {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
    width: 100%;
}

/* Dashboard Row Base */
.dashboard-row {
    display: flex;
    gap: var(--card-gap);
    width: 100%;
}

/* Single column rows - variable height */
.dashboard-row.cols-1 {
    min-height: auto;
}

.dashboard-row.cols-1 .dashboard-card {
    flex: 1;
    min-height: auto;
}

/* Multi-column rows - fixed height with scrolling */
.dashboard-row.cols-2,
.dashboard-row.cols-3 {
    height: 450px;
    min-height: 450px;
}

.dashboard-row.cols-2 .dashboard-card,
.dashboard-row.cols-3 .dashboard-card {
    flex: 1;
    height: 450px;
    min-height: 450px;
}

/* Ensure card bodies scroll when content overflows */
.dashboard-row.cols-2 .dashboard-card .dashboard-card-body,
.dashboard-row.cols-3 .dashboard-card .dashboard-card-body {
    overflow-y: auto;
    flex: 1;
    min-height: 0; /* Allow flex child to shrink */
}

/* Row height variations */
.dashboard-row.row-tall {
    min-height: var(--row-height-tall);
}

.dashboard-row.row-compact {
    min-height: var(--row-height-compact);
}

/* Base Dashboard Card */
.dashboard-card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.dashboard-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-1px);
}

/* Card Header */
.dashboard-card-header {
    padding: 1rem 1.5rem 0.5rem 1.5rem;
    border-bottom: 1px solid var(--card-border);
    flex-shrink: 0;
}

.dashboard-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: rgb(243, 244, 246); /* gray-100 */
    margin: 0;
    line-height: 1.75rem;
}

.dashboard-card-subtitle {
    font-size: 0.875rem;
    color: rgb(156, 163, 175); /* gray-400 */
    margin: 0.25rem 0 0 0;
    line-height: 1.25rem;
}

/* Card Body */
.dashboard-card-body {
    padding: 1.5rem;
    flex: 1;
    overflow: auto;
    color: rgb(229, 231, 235); /* gray-200 */
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Card Footer */
.dashboard-card-footer {
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--card-border);
    background-color: rgba(55, 65, 81, 0.5); /* gray-700 with opacity */
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Card Content without header/footer */
.dashboard-card.no-header .dashboard-card-header {
    display: none;
}

.dashboard-card.no-footer .dashboard-card-footer {
    display: none;
}

.dashboard-card.no-header.no-footer .dashboard-card-body {
    padding: 1.5rem;
}

/* Responsive Design for Dashboard Cards */
@media (max-width: 1024px) {
    .dashboard-row.cols-3 {
        flex-direction: column;
        min-height: auto;
    }
    
    .dashboard-row.cols-3 .dashboard-card {
        min-height: var(--row-height-compact);
    }
}

@media (max-width: 768px) {
    :root {
        --card-gap: 1rem;
    }
    
    .dashboard-row,
    .dashboard-row.cols-2,
    .dashboard-row.cols-3 {
        flex-direction: column;
        min-height: auto;
    }
    
    .dashboard-card {
        min-height: var(--row-height-compact);
    }
    
    .dashboard-card-header {
        padding: 0.75rem 1rem 0.5rem 1rem;
    }
    
    .dashboard-card-body {
        padding: 1rem;
    }
    
    .dashboard-card-footer {
        padding: 0.5rem 1rem;
    }
}

/* Full-width single column card */
.dashboard-row.full-width {
    min-height: auto;
}

.dashboard-row.full-width .dashboard-card {
    width: 100%;
}

/* Card Loading State */
.dashboard-card.loading {
    opacity: 0.6;
    pointer-events: none;
}

.dashboard-card.loading .dashboard-card-body::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border: 2px solid transparent;
    border-top-color: rgb(59, 130, 246); /* blue-500 */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Card Action Buttons */
.dashboard-card-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.dashboard-card-action {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    color: rgb(156, 163, 175); /* gray-400 */
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
}

.dashboard-card-action:hover {
    color: rgb(243, 244, 246); /* gray-100 */
    border-color: rgb(75, 85, 99); /* gray-600 */
    background-color: rgba(75, 85, 99, 0.3);
    text-decoration: none;
}

/* =============================================== */
/* AI RECAP CARD - Specific Styles */
/* =============================================== */

/* AI Recap card specific styling */
.ai-recap-summary {
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 1rem;
}

.ai-recap-details {
    border-top: 1px solid var(--card-border);
    padding-top: 1rem;
}

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

.bg-gray-750 {
    background-color: rgb(45, 55, 72);
}

/* =============================================== */
/* CUSTOM SCROLLBAR STYLING - Theme Integration */
/* =============================================== */

/* Custom scrollbar for dashboard cards */
.dashboard-card-body::-webkit-scrollbar {
    width: 8px;
}

.dashboard-card-body::-webkit-scrollbar-track {
    background: rgba(55, 65, 81, 0.5); /* gray-700 with opacity */
    border-radius: 4px;
}

.dashboard-card-body::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.7); /* gray-400 with opacity */
    border-radius: 4px;
    transition: background 0.2s ease;
}

.dashboard-card-body::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.9); /* gray-400 more opaque on hover */
}

/* Custom scrollbar for any other scrollable areas in dashboard */
.dashboard-grid ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dashboard-grid ::-webkit-scrollbar-track {
    background: rgba(55, 65, 81, 0.3);
    border-radius: 4px;
}

.dashboard-grid ::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.6);
    border-radius: 4px;
}

.dashboard-grid ::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.8);
}

/* For Firefox */
.dashboard-card-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.7) rgba(55, 65, 81, 0.5);
}