/* ============================================================================
 * ARCHIVE PAGE STYLES
 * ============================================================================
 * Custom styles for the Archive page layout, filters, and UI components
 * Extracted from inline styles for better maintainability
 * Version: 1.0
 * ============================================================================ */

/* ==========================================================================
   LAYOUT - Full Screen Utilization
   ========================================================================== */

.container,
.main-container,
.content-wrapper {
    width: 98% !important;
    max-width: 2400px !important;
    margin: 0 auto;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* Reduce content section padding for more usable space */
.content-section,
.filter-section,
.archive-section {
    padding: 32px !important;
}

/* ==========================================================================
   TABLE COLUMN SIZING
   ========================================================================== */

/* Expand description column in tables */
.data-table td:nth-child(2),
.archive-table td:nth-child(2) {
    max-width: 500px !important;
}

/* Constrain DATE column width (column 2) */
.data-table th:nth-child(2),
.data-table td:nth-child(2),
.archive-table th:nth-child(2),
.archive-table td:nth-child(2) {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 100px !important;
    white-space: nowrap;
}

/* Expand DESCRIPTION column (column 3) */
.data-table th:nth-child(3),
.data-table td:nth-child(3),
.archive-table th:nth-child(3),
.archive-table td:nth-child(3) {
    min-width: 280px !important;
    max-width: 500px !important;
}

/* ==========================================================================
   VIRTUAL TABLE STYLING
   ========================================================================== */

/* Virtual table full width */
.virtual-table-container {
    width: 100% !important;
    overflow-x: auto;
}

/* Expand description column in virtual table (3rd column) */
.virtual-table-row > div:nth-child(3),
.virtual-table-header-cell:nth-child(3) {
    min-width: 400px !important;
    max-width: 600px !important;
}

/* Constrain DATE column in virtual table (2nd column) */
.virtual-table-row > div:nth-child(2),
.virtual-table-header-cell:nth-child(2) {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 100px !important;
    white-space: nowrap;
}

/* ==========================================================================
   PAGE HEADER & LOGO
   ========================================================================== */

.page-header h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* Make the 🗄️ icon colorful and vivid */
.logo-icon {
    display: inline-block;
    font-size: 1.3em;
    filter: drop-shadow(0 0 12px rgba(102, 126, 234, 0.7))
            drop-shadow(0 0 24px rgba(118, 75, 162, 0.5))
            brightness(1.4)
            contrast(1.3)
            saturate(1.8);
    animation: logoGlow 3s ease-in-out infinite;
}

@keyframes logoGlow {
    0%, 100% {
        filter: drop-shadow(0 0 12px rgba(102, 126, 234, 0.7))
                drop-shadow(0 0 24px rgba(118, 75, 162, 0.5))
                brightness(1.4)
                contrast(1.3)
                saturate(1.8);
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 18px rgba(102, 126, 234, 0.9))
                drop-shadow(0 0 36px rgba(118, 75, 162, 0.7))
                brightness(1.6)
                contrast(1.4)
                saturate(2.0);
        transform: scale(1.05);
    }
}

/* ==========================================================================
   WORKFLOW ICONS
   ========================================================================== */

/* Light blue background boxes for icons (matches card background) */
.workflow-icon {
    background: #bfdbfe;
    padding: 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Natural colors for each icon - EXTRA SMALL */
.workflow-icon i {
    font-size: 0.8em;
}

/* Search icon - Teal */
.fa-search {
    color: #14b8a6;
}

/* Database icon - Dark Blue */
.fa-database {
    color: #1e3a8a;
}

/* Trash icon - Gray */
.fa-trash-alt {
    color: #6b7280;
}

/* Eye icon - Brown/Orange */
.fa-eye {
    color: #92400e;
}

/* Download icon - Blue */
.fa-download {
    color: #3b82f6;
}

/* Hover effect - subtle scale */
.workflow-card:hover .workflow-icon {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

/* ==========================================================================
   SECTION BORDERS
   ========================================================================== */

/* Purple border for filter section */
.enhanced-filter-section {
    border: 3px solid #8b5cf6;
    border-radius: 12px;
    padding: 20px;
}

/* Green border for Archive Actions section */
.batch-actions {
    border: 3px solid #10b981;
    border-radius: 12px;
    padding: 20px;
}

/* ==========================================================================
   FILTER LAYOUT OPTIMIZATION
   ========================================================================== */

/* Ensure filter rows spread across full width */
.filter-dropdowns-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    margin-bottom: 12px;
    justify-content: flex-start;
    width: 100%;
}

/* Base filter group styling */
.filter-group {
    flex: 1 1 auto;
}

/* Row 1: Year, Month - small */
.filter-group.filter-compact {
    flex: 0 0 110px !important;
    min-width: 100px !important;
    max-width: 120px !important;
}

.filter-group.filter-compact select {
    width: 100%;
}

/* Row 1: Account, Type - medium */
.filter-group.filter-medium {
    flex: 0 0 130px !important;
    min-width: 120px !important;
    max-width: 145px !important;
}

/* Row 1: Category - slightly wider */
.filter-group.filter-category {
    flex: 0 0 145px !important;
    min-width: 135px !important;
    max-width: 160px !important;
}

/* Row 1: Classification - wide */
.filter-group.filter-wide {
    flex: 1 1 200px !important;
    min-width: 180px !important;
    max-width: 280px !important;
}

/* Row 1: Company - wide */
.filter-group.filter-company {
    flex: 1 1 180px !important;
    min-width: 160px !important;
    max-width: 240px !important;
}

/* Row 1: Cycle - medium */
.filter-group.filter-cycle {
    flex: 0 0 130px !important;
    min-width: 115px !important;
    max-width: 145px !important;
}

/* Row 2: Amount - matches Year+Month width */
.filter-group.filter-amount-range {
    flex: 0 0 232px !important;
    min-width: 220px !important;
    max-width: 250px !important;
}

.filter-group.filter-amount-range .amount-range-container {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-group.filter-amount-range input {
    flex: 1;
    width: 90px !important;
    min-width: 85px !important;
    padding: 8px 10px !important;
    font-size: 0.95rem !important;
}

/* Row 2: Group Name - matches Account+Type width */
.filter-group.filter-group-name {
    flex: 0 0 272px !important;
    min-width: 255px !important;
    max-width: 290px !important;
}

/* Row 2: SubClass1 - matches Category */
.filter-group.filter-subclass1 {
    flex: 0 0 145px !important;
    min-width: 135px !important;
    max-width: 160px !important;
}

/* Row 2: SubClass2 - matches Classification */
.filter-group.filter-subclass2 {
    flex: 1 1 200px !important;
    min-width: 180px !important;
    max-width: 280px !important;
}

/* Row 2: Custom1 - matches Company */
.filter-group.filter-custom1 {
    flex: 1 1 180px !important;
    min-width: 160px !important;
    max-width: 240px !important;
}

/* Row 2: Custom2 - matches Cycle */
.filter-group.filter-custom2 {
    flex: 0 0 130px !important;
    min-width: 115px !important;
    max-width: 145px !important;
}

/* Make all selects fill their container */
.filter-group select {
    width: 100%;
}