/* Match admin page styling for consistent page-header spacing */
.page-header {
    border-bottom: none;
    padding: 16px 0 10px 0;
    margin-bottom: 0;
}

/* ====================================================
   SKELETON PLACEHOLDER STYLES
   Shimmer animation for initial page load
   ==================================================== */
@keyframes skeleton-shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.skeleton-line {
    background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
    height: 16px;
    margin-bottom: 8px;
}

/* Skeleton filter items in the sidebar */
.skeleton-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.skeleton-filter-item .skeleton-checkbox {
    width: 16px;
    height: 16px;
    min-width: 16px;
    border-radius: 3px;
    background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-filter-item .skeleton-line {
    margin-bottom: 0;
    height: 14px;
    flex: 1;
}

/* Skeleton certificate card */
.skeleton-card {
    background-color: var(--white, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,0.1));
    width: 100%;
    display: flex;
    flex-direction: column;
}

.skeleton-card-header {
    background-color: #c8d6e5;
    padding: 10px 12px;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    background: linear-gradient(90deg, #c8d6e5 25%, #d5e0eb 50%, #c8d6e5 75%);
    background-size: 800px 100%;
}

.skeleton-card-header .skeleton-line {
    background: linear-gradient(90deg, rgba(255,255,255,0.2) 25%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.2) 75%);
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    height: 14px;
    margin-bottom: 6px;
}

.skeleton-card-header .skeleton-line:last-child {
    margin-bottom: 0;
    width: 60%;
}

.skeleton-card-body {
    padding: 10px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skeleton-card-body .skeleton-line:nth-child(1) { width: 80%; }
.skeleton-card-body .skeleton-line:nth-child(2) { width: 55%; height: 12px; }
.skeleton-card-body .skeleton-line:nth-child(3) { width: 70%; margin-top: 6px; }
.skeleton-card-body .skeleton-line:nth-child(4) { width: 45%; height: 12px; }

.skeleton-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 10px 12px 8px;
}

.skeleton-card-actions .skeleton-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

/* Infinite scroll loading and end states */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    grid-column: 1 / -1; /* Span all grid columns */
}

.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    font-size: 16px;
    color: var(--text-color);
}

.loading-spinner i {
    font-size: 32px;
    color: var(--primary-color);
    animation: spin 1s linear infinite;
}

.end-of-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    grid-column: 1 / -1; /* Span all grid columns */
}

.end-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    font-size: 16px;
    color: var(--text-muted);
    text-align: center;
}

.end-message i {
    font-size: 32px;
    color: var(--success);
}

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

/* Certificates grid loading state */
.certificates-grid.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Search bar in sidebar */
.sidebar .search-bar {
    position: relative;
    margin-bottom: 20px;
    margin-top: 10px; /* Changed from padding-top to margin-top so search icon centers correctly */
    width: 100%;
}

/* Search input styles now handled by main.css unified styles */

/* Search input focus styles now handled by main.css unified styles */

/* Search icon styles now handled by main.css unified styles */

/* Sort controls in main content */
.sort-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

.sort-label {
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--text-color);
}

.sort-dropdown {
    position: relative;
}

.sort-dropdown-button {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-family: inherit;
    transition: var(--transition);
    min-width: 200px;
    justify-content: space-between;
}

    .sort-dropdown-button:hover {
        border-color: var(--blue-primary);
    }

    /* Focus indicator for accessibility (WCAG 2.1 AA compliance) */
    .sort-dropdown-button:focus,
    .sort-dropdown-button:focus-visible {
        outline: 2px solid #007bff;
        outline-offset: 2px;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
    }

.sort-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: var(--white);
    min-width: 250px;
    box-shadow: var(--shadow);
    z-index: 100;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    margin-top: 4px;
}

.sort-dropdown.open .sort-dropdown-content {
    display: block;
}

.sort-option {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    text-decoration: none;
    color: var(--text-color);
    border-bottom: 1px solid var(--light-gray);
    transition: var(--transition);
    cursor: pointer;
    font-size: 16px;
}

    .sort-option:hover {
        background-color: rgba(0, 174, 239, 0.08);
        color: var(--blue-primary);
    }

    .sort-option:last-child {
        border-bottom: none;
        border-radius: 0 0 6px 6px;
    }

    .sort-option i {
        margin-right: 10px;
        width: 16px;
        text-align: center;
        color: var(--blue-primary);
    }

/* Main Layout */
.main-container {
    display: flex;
    max-width: 1800px;
    margin: 0 auto;
    background-color: var(--white);
    min-height: calc(100vh - 200px);
}

/* Responsive layout for ultra-wide screens */
@media (min-width: 2560px) {
    .main-container {
        max-width: 2400px;
    }
}

/* ====================================================
   FULL WIDTH FOR TABLE VIEW ONLY
   These styles apply when body has 'table-view-active' class
   ==================================================== */
body.table-view-active .page-container,
html body.table-view-active .page-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 15px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

body.table-view-active .main-container,
html body.table-view-active .main-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

body.table-view-active .tile-view-content,
html body.table-view-active .tile-view-content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 15px !important;
    box-sizing: border-box !important;
}

body.table-view-active .table-scroll-wrapper,
html body.table-view-active .table-scroll-wrapper {
    max-width: 100% !important;
    width: 100% !important;
}

body.table-view-active #tableView,
html body.table-view-active #tableView {
    max-width: 100% !important;
    width: 100% !important;
}

/* Sidebar */
.sidebar {
    width: 350px;
    background-color: var(--white);
    border-right: 1px solid var(--border-color);
    padding: 20px;
    flex-shrink: 0;
}
.filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.filters-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--blue-dark);
}

/* Active filter tags (chips) above results */
.active-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
}
.active-filter-tags:empty {
    display: none;
}
.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
    max-width: 100%;
}
.filter-tag-label {
    font-weight: 600;
    color: #0d47a1;
}
.filter-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: #1565c0;
    font-size: 14px;
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
    line-height: 1;
}
.filter-tag-remove:hover {
    background: #1565c0;
    color: #fff;
}

.filter-panel {
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.filter-header {
    padding: 12px 15px;
    background-color: var(--light-gray);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    transition: var(--transition);
}

    .filter-header:hover {
        background-color: rgba(0, 174, 239, 0.08);
    }

.filter-content {
    padding: 12px;
    border-top: 1px solid var(--border-color);
    max-height: 250px;
    overflow-y: auto;
    /* Ensure scrollbar doesn't interfere with content alignment */
    scrollbar-width: thin;
    scrollbar-color: #999 #f0f0f0;
}

/* Class-based collapse for filter panels (avoids inline style vs media query conflicts) */
.filter-content.filter-collapsed {
    display: none !important;
}

/* Webkit scrollbar styling for filter content */
.filter-content::-webkit-scrollbar {
    width: 8px;
}

.filter-content::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 4px;
}

.filter-content::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 4px;
}

.filter-content::-webkit-scrollbar-thumb:hover {
    background: #666;
}

.filter-tree {
    list-style: none;
    padding: 0;
    margin: 0;
}

.filter-item {
    margin-bottom: 8px !important; /* Improved spacing between items */
    font-size: 16px;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-right: 8px !important; /* Add right padding to prevent checkbox/text from touching scrollbar */
    /* padding-left is controlled by filter-level classes */
    line-height: 1.4 !important;
}

    .filter-item label {
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: var(--transition);
        padding: 4px 0 !important; /* Better padding for improved clickability */
        margin: 0 !important; /* Override any external label margins */
        line-height: 1.4 !important;
        width: 100%; /* Ensure label takes full width */
    }

        .filter-item label:hover {
            color: var(--blue-primary);
        }

    .filter-item input[type="checkbox"] {
        margin: 0 10px 0 0 !important; /* Increased spacing between checkbox and label for better clarity */
        padding: 0 !important;
        accent-color: var(--blue-primary);
        vertical-align: middle !important;
        line-height: 1 !important;
        width: 16px;
        height: 16px;
        flex-shrink: 0; /* Prevent checkbox from shrinking */
        position: relative; /* Ensure checkbox stays in place */
    }

    /* Focus indicator for filter checkboxes — keyboard only (WCAG 2.1 AA compliance) */
    .filter-item input[type="checkbox"]:focus {
        outline: none;
    }
    .filter-item input[type="checkbox"]:focus-visible {
        outline: 2px solid #007bff;
        outline-offset: 2px;
    }

    /* Focus indicator for table checkboxes — keyboard only (WCAG 2.1 AA compliance) */
    .row-checkbox:focus,
    #selectAll:focus {
        outline: none;
    }
    .row-checkbox:focus-visible,
    #selectAll:focus-visible {
        outline: 2px solid #007bff;
        outline-offset: 2px;
    }

    .filter-item label span {
        flex: 1; /* Allow label text to take remaining space */
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

.filter-level-1 {
    padding-left: 0 !important;
}

.filter-level-2 {
    padding-left: 30px !important;
}

.filter-level-3 {
    padding-left: 60px !important;
}


/* ===== LAYOUT CONSISTENCY FIX ===== */
/* Remove .page-container padding when .main-container is present to match admin page layout */
body:has(.main-container) .page-container {
    padding: 0;
    max-width: 100%;
}

/* Hide the layout's page-header for certificate tile views (like admin pages do) */
body:has(.main-container) .page-header {
    display: none !important;
}

/* Main Content Area (renamed from .main-content to avoid conflict with _Layout.cshtml) */
.tile-view-content {
    flex: 1;
    padding: 24px; /* Match admin-container padding */
}
.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-top: 20px;
}


.results-count {
    font-size: 18px;
    font-weight: 500;
    color: var(--blue-dark);
}

.results-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.results-actions .btn {
    font-size: 16px;
    white-space: nowrap;
}

/* Certificate Grid - FIXED */
.certificates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    width: 100%;
    /* QC #199 (DEF-292): each card takes its NATURAL height instead of stretching to
       the tallest card in its grid row. Without this, a single long-content card pinned
       the whole row's height and short cards just gained empty space at the bottom — so
       the shrink-to-content changes (product-name/company-name max-height) had no visible
       effect. Tops stay aligned per row; short tiles now condense fully. */
    align-items: start;
}

.certificate-card {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    height: auto;
}

    .certificate-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }

/* Card Body - Ensure consistent spacing */
.card-body {
    padding: 10px 10px 0 10px; /* No bottom padding - child margin handles gap to card-actions */
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Ensure last element in card-body has bottom margin for spacing above card-actions */
.certificate-card .card-body > *:last-child {
    margin-bottom: 4px; /* QC #199 (DEF-292): condensed from 6px — the gap after Location/tags */
}

/* Tags spacing within card */
.certificate-card .certificate-tags {
    margin-bottom: 4px; /* QC #199 (DEF-281): condensed from 8px (desktop; mobile override below) */
    padding-bottom: 0;
}

/* Mobile: extra tag spacing (QC R143: Carly wanted more room below tag row) */
@media (max-width: 768px) {
    .certificate-card .certificate-tags {
        margin-bottom: 18px;
        padding-bottom: 8px;
    }
}

/* Card Actions - Download and View Details Icons */
.card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 4px 10px 4px 10px; /* QC #199 (DEF-292): condensed from 6px */
    border-top: none;
    background-color: transparent;
    margin-top: auto;
    flex-shrink: 0;
}

/* Override theme-option4 absolute positioning so actions stay in document flow */
body.theme-option4 .certificate-card .card-actions {
    position: static !important;
    bottom: auto !important;
    right: auto !important;
}

.action-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-color);
}

.action-icon:hover {
    background-color: var(--blue-primary);
    border-color: var(--blue-primary);
    color: var(--white);
    transform: scale(1.05);
}

.action-icon.download:hover {
    background-color: var(--green-primary);
    border-color: var(--green-primary);
}

/* Edit action icon specific styles */
.action-icon.edit {
    color: var(--blue-primary);
    border-color: var(--blue-primary);
}

.action-icon.edit:hover {
    background-color: var(--blue-primary);
    border-color: var(--blue-primary);
    color: var(--white);
}

.action-icon i {
    font-size: 16px;
}

.card-header {
    background-color: var(--blue-dark);
    color: var(--white);
    padding: 8px 12px; /* QC #199 (DEF-281): condensed from 10px; Status/Partner rows unchanged */
    font-size: 16px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}

/* Header row: cert type (left) + cert number (right) */
/* DEF: top-align so cert-number pill stays at the top when the
   certification category wraps to 2-3 lines (QC #174). */
.certificate-card .header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
}

.certificate-card .certificate-category {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.85;
}

.certificate-card .certificate-id {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.certificate-card .card-header .company-name {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4; /* QC #199 (DEF-281): condensed from 1.5; still 3-line clamp, no truncation change */
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 3 lines + 6px buffer so descenders ('g', 'p', 'y') aren't clipped on line 3.
       6px is too small to fit a 4th line so no bleed.
       QC #199 (DEF-292): dropped the 3-line MIN reservation so a short company name
       (e.g. "3M") no longer pads the dark-blue header to 3 lines tall; max-height keeps
       the 3-line clamp for long names (no truncation change). Status/Partner rows that
       follow in the header are untouched. */
    min-height: 0;
    max-height: calc(18px * 1.4 * 3 + 6px);
}

/* Compact header for public/external views (no status/partner rows) */
.certificate-card:not(.internal-card) .card-header {
    padding: 6px 12px; /* QC #199 (DEF-281): condensed from 8px */
}

/* ---------------------------------------------------------------------------
   Tile vertical-spacing tightening (tile context only).
   VERTICAL margins/padding/gap ONLY — left/right padding, fonts, borders,
   heights/min-heights, and grid alignment are intentionally left alone.
   Scoped with `.certificate-card` so the single-card detail view
   (`.certificate-single-card`) is untouched. Overrides the matching
   `body.theme-option4 .<el>` rules in main.css (higher specificity + later load).
   --------------------------------------------------------------------------- */
body.theme-option4 .certificate-card .card-body {
    padding-top: 12px;    /* was 20px */
    padding-bottom: 8px;  /* was 20px */
    /* was space-between, which dropped the card's slack into a gap between the
       product name and the certification period. flex-start stacks the content
       at the top so the period sits directly under the product name; any residual
       (uniform-height stretch) collects naturally above the action icons. */
    justify-content: flex-start;
}
body.theme-option4 .certificate-card .certificate-details {
    margin-top: 6px;      /* was 12px */
    margin-bottom: 2px;   /* was 4px (tile) / 12px (theme) */
    gap: 6px;             /* was 8px (vertical gap between detail rows) */
    /* main.css forces a 100px min-height on this block ONLY at <=768px, padding
       empty space below short content on mobile. Override to 0 at every width so
       mobile vertical spacing matches desktop/tablet. */
    min-height: 0;
}
body.theme-option4 .certificate-card .certificate-period {
    padding-top: 6px;     /* was 8px */
    padding-bottom: 6px;  /* was 8px */
    margin-bottom: 4px;   /* was 6px */
}
body.theme-option4 .certificate-card .certificate-location {
    margin-top: 2px;      /* was 4px */
    margin-bottom: 6px;   /* was 16px */
    padding-bottom: 4px;  /* was 14px */
}
body.theme-option4 .certificate-card .card-actions {
    padding-top: 2px;      /* was 6px */
    padding-bottom: 10px;  /* breathing room so the icons aren't flush to the card's bottom edge */
    /* main.css sets margin-top:5px ONLY at <=768px, breaking the desktop
       margin-top:auto that bottom-aligns the action icons. Restore auto at every
       width so the icons bottom-align consistently across breakpoints. */
    margin-top: auto;
}

/* ---------------------------------------------------------------------------
   Tile HEIGHT tightening (tile context only).
   main.css forces oversized fixed reservations on every tile regardless of
   content. These are FLOORS/auto — never go below content, so nothing clips
   and long company/product names still expand. Grid `align-items` is left as
   stretch on purpose so cards stay UNIFORM within a row (the previous attempt
   that switched to `align-items:start` made cards ragged — that was the layout
   regression). Scoped with `.certificate-card` so `.certificate-single-card`
   is untouched. Specificity (0,3,1) beats main.css's `body.theme-option4 .<el>`
   rules, so this single non-media rule also overrides the 240px mobile bump.
   NOTE: scoped to :not(.internal-card) — internal tiles add Status + Partner
   rows to the header, so a fixed 165px would clip them. Internal headers keep
   their natural (expanding) height. */
body.theme-option4 .certificate-card:not(.internal-card) .card-header {
    /* CONSISTENT header height across all tiles (client requirement). The company
       name is clamped to 3 lines, so the worst-case header content is bounded
       (~161px measured). A FIXED height makes every blue header identical instead
       of a min-height floor that let short-company tiles shrink and long-company
       tiles grow. Header already has overflow:hidden; flex-shrink:0 stops the
       card's column flex from squeezing it. ~60px tighter than the old 220/240px.
       Lowered 175→165 after trimming the company-name / header-row vertical
       margins below, which shrank the 3-line worst case. 165 keeps ~14px
       clearance between a 3-line company name and the green wave. */
    height: 165px;       /* was 220px desktop / 240px mobile */
    min-height: 165px;
    flex-shrink: 0;
}

/* Internal tiles: same 4-row header as external (Status + optional Partner), so
   they get the same consistent, tightened treatment. .internal-card only exists
   on the internal view, so this is safe in the shared stylesheet. Compact 6px
   header padding (internal otherwise inherits main.css 12px) + a fixed 200px that
   fits the 3-line-company + Status + Partner worst case (~196px) with no clip —
   down from internal's old 220px floor. MUST stay ABOVE the <=1024px media block
   below so that block's auto-height override wins on tablet/mobile (equal
   specificity → later source wins). */
body.theme-option4 .certificate-card.internal-card .card-header {
    padding: 6px 12px;
    height: 200px;
    min-height: 200px;
    flex-shrink: 0;
}
/* Tablet/mobile (<=1024px) header fixes:
   1. main.css stacks the header-row into a column at <=768px, dropping the cert#
      pill onto its own line below the category — looks broken and adds ~30px of
      header height. Keep it a row (category left, pill top-right) like desktop.
      (Harmless above 768px where it is already a row.)
   2. Across the whole tablet range, narrow 2-column cards can wrap the (unclamped)
      category a few lines, so a fixed height risks overlapping the green wave. Let
      the header GROW with its content (auto height) keeping the same floor as
      desktop, with bottom padding so the last row always clears the wave. True
      desktop (>1024px) keeps the fixed consistent heights.
   Applies to all three views (external/internal override the floor via their own
   rules to match their taller desktop height). */
@media (max-width: 1024px) {
    body.theme-option4 .certificate-card .header-row {
        flex-direction: row;
        align-items: flex-start;
    }
    body.theme-option4 .certificate-card:not(.internal-card) .card-header {
        height: auto;
        min-height: 165px;
        padding-bottom: 22px;
    }
    body.theme-option4 .certificate-card.internal-card .card-header {
        height: auto;
        min-height: 200px;
        padding-bottom: 22px;
    }
}
/* Vertical-only trim of the header's inner spacing so the 3-line worst case fits a
   shorter consistent header. Left padding (10px, with the white border-left bar),
   right padding, fonts, and borders are intentionally left untouched. */
body.theme-option4 .certificate-card .company-name {
    margin-top: 4px;     /* was 10px */
    padding-top: 4px;    /* was 8px */
    padding-bottom: 4px; /* was 8px */
}
body.theme-option4 .certificate-card .header-row {
    margin-bottom: 2px;  /* was 4px */
}
body.theme-option4 .certificate-card .card-body {
    min-height: 120px;   /* was 200px; floor only, not 0 */
}
body.theme-option4 .certificate-card .product-name {
    height: auto;        /* was fixed 170px; 3-line max-height clamp above still caps long names */
}
/*
.certificate-info {
    padding: 15px;
}


.certificate-number {
    font-size: 16px;
    color: #666;
    margin-bottom: 10px;
    font-weight: 500;
}

.company-name {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--blue-dark);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Certificate selection checkbox removed */

/* Product name styling for tile view only - NOT SingleCertificateView */
.certificate-card .product-name {
    font-size: 22px !important;
    font-weight: 600 !important;
    margin: 3px 0 3px 0 !important;
    color: var(--text-color) !important;
    /* QC #199 (DEF-292): was a fixed `height` that ALWAYS reserved 3 lines, so a
       1-line product name (e.g. "3M Test Product") left ~74px of empty space below it
       — the single biggest source of tile whitespace in Image #90. Now max-height so
       short names shrink to content while long names still clamp at 3 lines (the
       -webkit-line-clamp:3 below enforces the cap — no truncation change). */
    min-height: 0 !important;
    max-height: calc(22px * 1.45 * 3 + 10px) !important;
    max-width: 100% !important;
    width: 100% !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    line-height: 1.45 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    padding: 2px 8px !important; /* QC #199 (DEF-292): trim vertical padding 8→2px */
    box-sizing: border-box !important;
    white-space: normal !important;
}

/* Product type removed from tile cards per QC #131 */
.certificate-card .product-type {
    display: none;
}

.product-category {
    font-size: 16px;
    color: #666;
    margin-bottom: 15px;
}

.certification-period {
    margin: 6px 0 0 0; /* Reduced from 10px */
    padding-bottom: 0;
    font-size: 16px;
}

    .certification-period strong {
        color: var(--text-color);
        display: block;
        margin-bottom: 2px; /* Reduced from 4px */
    }

.certificate-location {
    font-size: 16px;
    color: #666;
    margin-top: 4px; /* QC #199 (DEF-292): condensed from 6px */
    margin-bottom: 4px; /* QC #199 (DEF-292): condensed from 8px — the "after location" gap Carly flagged */
    padding-top: 2px; /* QC #199 (DEF-292): condensed from 4px */
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.certificate-location i {
    color: var(--green-primary, #92C83E);
    flex-shrink: 0;
    margin-top: 2px;
}

.certificate-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 10px 8px 10px; /* Reduced padding */
    border-top: none;
    background-color: transparent;
}

.action-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    color: var(--text-color);
    transition: var(--transition);
}

    .action-button:hover {
        background-color: rgba(0, 174, 239, 0.1);
        color: var(--blue-primary);
    }

/* View Controls - Toggle Buttons */
.view-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.view-type-toggle,
.access-type-toggle {
    display: flex;
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.view-toggle-btn,
.access-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    color: var(--text-color);
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-family: inherit;
}

.view-toggle-btn {
    min-width: 40px;
    justify-content: center;
}

.access-toggle-btn {
    padding: 8px 15px;
}

.view-toggle-btn:hover,
.access-toggle-btn:hover {
    background-color: rgba(0, 174, 239, 0.1);
    color: var(--blue-primary);
}

.view-toggle-btn.active,
.access-toggle-btn.active {
    background-color: var(--blue-primary);
    color: var(--white);
}

.view-toggle-btn.active:hover,
.access-toggle-btn.active:hover {
    background-color: var(--blue-hover);
}

.view-toggle-btn i {
    font-size: 16px;
}

.access-toggle-btn i {
    font-size: 14px;
}

/* Results header layout adjustment */
.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 20px;
    flex-wrap: wrap;
}

/* Responsive adjustments for view controls */
@media (max-width: 768px) {
    .view-controls {
        order: -1;
        width: 100%;
        justify-content: center;
        margin-bottom: 10px;
    }
    
    .results-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .sort-controls {
        justify-content: center;
    }
}

/* Table View Styles */
.certificates-grid.table-view {
    padding: 0;
}

.table-container {
    background: var(--white);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.certificates-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

.certificates-table thead {
    background-color: var(--light-gray);
    border-bottom: 2px solid var(--border-color);
}

.certificates-table th {
    padding: 16px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--dark-gray);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-right: 1px solid var(--border-color);
}

.certificates-table th:last-child {
    border-right: none;
}

.certificates-table tbody {
    background: var(--white);
}

.certificate-row {
    border-bottom: 1px solid var(--light-border);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.certificate-row:hover {
    background-color: var(--hover-color);
}

.certificate-row:last-child {
    border-bottom: none;
}

.certificates-table td {
    padding: 14px 12px;
    vertical-align: top;
    border-right: 1px solid var(--light-border);
    word-wrap: break-word;
}

.certificates-table td:last-child {
    border-right: none;
}

.cert-number {
    font-weight: 600;
    color: var(--blue-primary);
    font-size: 16px;
}

.company-name {
    font-weight: 500;
    color: var(--text-color);
    max-width: 100%;
    width: 100%;
    word-wrap: break-word;
}

.product-name {
    color: var(--text-muted);
}

.cert-type {
    font-size: 16px;
    color: var(--text-color);
    max-width: 140px;
}

.effective-date,
.expiration-date {
    font-size: 16px;
    color: var(--text-muted);
    white-space: nowrap;
}

.location {
    color: var(--text-muted);
    font-size: 16px;
    max-width: 150px;
    padding: 8px 10px;
}

/* Table view location column - improved whitespace */
.grid-cell[data-column="location"] {
    padding: 10px 12px !important;
}

.partner .partner-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.partner .partner-badge.external {
    background-color: #e3f2fd;
    color: #1976d2;
}

.partner .partner-badge.internal {
    background-color: #f3e5f5;
    color: #7b1fa2;
}

.actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.btn-icon {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    border-radius: 4px;
    color: var(--text-muted);
    transition: all 0.2s ease;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.btn-icon:hover {
    background-color: var(--hover-color);
    color: var(--blue-primary);
    transform: scale(1.1);
}

.btn-icon:active {
    transform: scale(0.95);
}

/* Hide tile view styles when in table mode */
.certificates-grid.table-view .certificate-card {
    display: none;
}

/* Responsive table design */
@media (max-width: 1024px) {
    .certificates-table th,
    .certificates-table td {
        padding: 10px 8px;
        font-size: 12px;
    }
    
    .certificates-table .company-name,
    .certificates-table .location {
        max-width: 120px;
    }

    /* Product name should take full width on all screen sizes */
    .certificates-table .product-name {
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .certificates-table {
        min-width: 800px;
    }
    
    .certificates-table th,
    .certificates-table td {
        padding: 8px 6px;
        font-size: 11px;
    }
    
    .actions {
        gap: 4px;
    }
    
    .btn-icon {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}

/* ====================================================
   AUTOCOMPLETE DROPDOWN STYLES
   ====================================================*/

.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    margin-top: -1px;
}

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

.autocomplete-item {
    padding: 0;
    border-bottom: 1px solid var(--light-border);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

/* DEF-320 (found while fixing DEF-319): '.selected' is the class the autocomplete JS actually
   writes (see certificate-tile-view{,-internal,-external}.js) — '.highlighted' is never applied by
   anything. So keyboard ArrowUp/ArrowDown navigation had no visual at all in any of the three tile
   views, which all load this stylesheet; only the mouse ':hover' state was ever visible. DEF-319
   makes the arrow keys the primary way to pick a suggestion, so this had to be styled. Keeping
   '.highlighted' in the list for any markup that still expects it. */
.autocomplete-item:hover,
.autocomplete-item.selected,
.autocomplete-item.highlighted {
    background-color: var(--blue-primary);
    color: var(--off-white);
}

.suggestion-content {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 16px;
}

.suggestion-text {
    font-size: 16px;
    color: var(--text-color);
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suggestion-type {
    font-size: 16px;
    color: var(--text-muted);
    font-weight: 400;
    background-color: var(--light-gray);
    padding: 2px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    margin-left: 12px;
}

/* Type-specific styling - Using data attributes instead of :contains() which is invalid CSS */
.suggestion-type[data-type="company"] {
    background-color: #e3f2fd;
    color: #1976d2;
}

.suggestion-type[data-type="product"] {
    background-color: #f3e5f5;
    color: #7b1fa2;
}

.suggestion-type[data-type="certificate"] {
    background-color: #e8f5e8;
    color: #388e3c;
}

.suggestion-type[data-type="certification-type"] {
    background-color: #fff3e0;
    color: #f57c00;
}

/* Search bar positioning updates - z-index for autocomplete dropdown */
.sidebar .search-bar {
    position: relative;
    z-index: 1001;
}

.search-input:focus + .autocomplete-dropdown {
    border-color: var(--blue-primary);
}

/* Mobile responsiveness for autocomplete */
@media (max-width: 768px) {
    .autocomplete-dropdown {
        max-height: 200px;
        font-size: 15px;
    }

    .suggestion-content {
        padding: 10px 12px;
    }

    .suggestion-text {
        font-size: 15px;
    }

    .suggestion-type {
        font-size: 12px;
        padding: 1px 6px;
        margin-left: 8px;
    }
}

/* Accessibility improvements */
.autocomplete-item:focus-visible {
    outline: 2px solid var(--blue-primary);
    outline-offset: -2px;
}

/* Loading state for autocomplete */
.autocomplete-loading {
    padding: 12px 16px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

.autocomplete-no-results {
    padding: 12px 16px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

/* ====================================================
   TABLE VIEW SCROLLBAR AND RESPONSIVE ENHANCEMENTS
   ====================================================*/

/* Ensure table scroll wrapper is visible and properly styled */
.table-scroll-wrapper {
    width: 100%;
    overflow-x: scroll !important; /* Force scrollbar to always show */
    overflow-y: visible;
    margin-top: 10px;
    margin-bottom: 20px; /* Add space below for scrollbar */
    margin-left: 0; /* Align with buttons above */
    border: 1px solid #ddd;
    border-radius: 8px;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding-bottom: 4px; /* Space for scrollbar */
    scrollbar-width: auto; /* Use default scrollbar width for Firefox */
    scrollbar-color: #555 #e0e0e0; /* Darker colors for better visibility */
}

/* Webkit scrollbar styling for better visibility */
.table-scroll-wrapper::-webkit-scrollbar {
    height: 16px; /* Larger scrollbar for better visibility */
    -webkit-appearance: none;
}

.table-scroll-wrapper::-webkit-scrollbar-track {
    background: #e0e0e0; /* Lighter track */
    border-radius: 4px;
    margin: 0 8px; /* Add margin to track */
}

.table-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #555; /* Darker thumb for contrast */
    border-radius: 4px;
    border: 2px solid #e0e0e0; /* Border for definition */
    min-width: 40px; /* Minimum thumb width */
}

.table-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: #333; /* Even darker on hover */
}

.table-scroll-wrapper::-webkit-scrollbar-thumb:active {
    background: #000; /* Black when dragging */
}

/* ====================================================
   COMMON CERTIFICATE TILE VIEW STYLES
   (Shared between External and Internal views)
   ====================================================*/

/* Fix for the Actions column */
.certificates-table th.actions-column {
    min-width: 160px !important;
    width: 160px !important;
    background: #f8f9fa !important;
    text-align: center;
    padding: 12px 8px;
}

/* Ensure consistent header styling */
.certificates-table thead th {
    background: #f8f9fa !important;
    border-right: 1px solid #eee;
    white-space: nowrap;
}

/* Remove any potential white blocks */
.certificates-table th {
    background: #f8f9fa !important;
}

/* Results controls alignment - explicit left alignment with table */
.results-controls {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    padding: 10px 0;
    padding-left: 0;
    margin-left: 0;
    min-width: 0;
    gap: 20px;
}

.left-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
    flex: 1;
    margin-left: 10px; /* Align with first tile/table column */
    padding-left: 0;
}

.export-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    margin-left: 0;
    padding-left: 0;
}

/* First button aligns with table left edge */
.export-options > *:first-child {
    margin-left: 0;
}

.export-options .btn {
    white-space: nowrap;
    flex-shrink: 0;
    min-width: auto;
    padding: 8px 12px;
    font-size: 16px;
}

.right-controls {
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
    align-self: flex-start;
}

.view-toggle-container {
    margin-left: auto;
}

.view-toggle {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.toggle-btn {
    padding: 8px 12px;
    border: none;
    background: #f8f9fa;
    cursor: pointer;
    font-size: 16px; /* Minimum font size for accessibility */
    transition: background-color 0.2s;
}

.toggle-btn:hover {
    background: #e9ecef;
}

.toggle-btn.active {
    background: #007bff;
    color: white;
}

.toggle-btn i {
    margin-right: 5px;
}

/* Mobile + tablet: stack so view-toggle falls BELOW the action buttons, right-aligned */
@media (max-width: 1024px) {
    .results-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .left-controls {
        margin-left: 0;
        width: 100%;
    }
    /* Shrink right-controls to its content and pin it to the right edge */
    .right-controls {
        align-self: flex-end;
        width: auto;
    }
    .view-toggle-container {
        margin-left: 0;
    }
}

/* Action button styling - shared for Download and View */
.action-icon.download {
    color: #28a745;
}

.action-icon.download:hover {
    color: #1e7e34;
    background-color: #d4edda;
}

.action-icon.view {
    color: #17a2b8;
}

.action-icon.view:hover {
    color: #117a8b;
    background-color: #d1ecf1;
}

/* Action buttons in table view */
.action-btn {
    border: none;
    background: transparent;
    padding: 4px 5px;
    margin: 0 1px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
}

.action-btn.download,
.action-btn.download-btn {
    color: #28a745;
}

.action-btn.download:hover,
.action-btn.download-btn:hover {
    color: #1e7e34;
    background-color: #d4edda;
}

.action-btn.view,
.action-btn.view-btn {
    color: #17a2b8;
}

.action-btn.view:hover,
.action-btn.view-btn:hover {
    color: #117a8b;
    background-color: #d1ecf1;
}

/* Action buttons container in grid */
.action-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

/* Hierarchical filter indentation */
.filter-item.filter-level-1 {
    padding-left: 0;
}

.filter-item.filter-level-2 {
    padding-left: 20px;
}

.filter-item.filter-level-3 {
    padding-left: 40px;
}


/* Loading indicator styles for lazy loading */
.loading-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
    font-size: 16px; /* Minimum font size for accessibility */
    color: #666;
    background-color: #f8f9fa;
    margin: 20px 0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    min-height: 100px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.loading-indicator.active {
    opacity: 1;
    pointer-events: auto;
}

.loading-text {
    font-weight: 500;
    font-size: 16px; /* Minimum font size for accessibility */
}

/* Bulk Actions Bar Styling - Compact */
.bulk-actions-bar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 12px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 12px;
}

.bulk-actions-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.selected-count {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

/* Clear Selection Button - Cohesive Design */
.clear-selection-btn {
    background-color: #fff;
    color: #666;
    border: 1px solid #ddd;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    transition: all 0.2s ease;
}

.clear-selection-btn:hover {
    background-color: #f8f9fa;
    border-color: #999;
    color: #333;
}

.clear-selection-btn:active {
    background-color: #e9ecef;
}

/* Bulk Action Buttons - Match Main Button Style */
.bulk-action-btn {
    background-color: #00AEEF;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bulk-action-btn:hover {
    background-color: #0095d8;
}

.bulk-action-btn:active {
    transform: translateY(1px);
}

.bulk-action-btn i {
    font-size: 14px;
}

/* Disabled button state for Download Selected in tile view */
.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Table grid container */
.table-grid-container {
    min-width: 100%;
    width: max-content;
}

/* Header cell styling */
.grid-header-cell {
    background: #f8f9fa !important;
    padding: 14px 10px;
    font-weight: 600;
    font-size: 16px;
    color: #333;
    border-bottom: 2px solid #dee2e6;
    border-right: 1px solid #ddd;
    white-space: normal;  /* Allow header text to wrap */
    word-wrap: break-word;
    display: flex;
    align-items: center;
    justify-content: flex-start;  /* Left align by default */
    gap: 6px;  /* Space between text and sort icon */
    min-height: 48px;
    box-sizing: border-box;
    line-height: 1.3;
}

.grid-header-cell:last-child {
    border-right: none;
}

/* Sort icon styling - stays inline with header text (matches admin pages) */
.grid-header-cell .sort-icon {
    margin-left: 6px;
    font-size: 12px;
    opacity: 0.4;
    flex-shrink: 0;  /* Prevent icon from shrinking */
    white-space: nowrap;  /* Never wrap the icon */
    display: inline-block;
    vertical-align: middle;
    transition: opacity 0.15s ease;
}

.grid-header-cell[data-sort-active="true"] .sort-icon,
.grid-header-cell.active-sort .sort-icon {
    opacity: 1;
}

/* Body row styling */
.grid-body {
    display: contents;
}

.grid-row {
    display: contents;
}

.grid-cell {
    padding: 12px 10px;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #ddd;
    background: white;
    font-size: 16px;
    display: flex;
    align-items: center;
    min-height: 52px;
    cursor: default;
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: break-word;
}

.grid-cell:last-child {
    border-right: none;
}

.grid-row:hover .grid-cell {
    background: #f8f9fa;
    transition: background-color 0.2s ease;
}

/* Zebra striping for better readability */
.grid-row:nth-child(even) .grid-cell {
    background: #fafafa;
}

.grid-row:nth-child(even):hover .grid-cell {
    background: #f0f0f0;
}

/* Ensure row cells are not clickable - only action buttons should be clickable */
.grid-row {
    cursor: default;
}

.grid-row .grid-cell {
    pointer-events: auto;
}

/* Action buttons should be clickable */
.grid-cell.actions-column,
.grid-cell.actions-column * {
    cursor: pointer;
    pointer-events: auto;
}

.grid-cell.select-cell {
    cursor: pointer;
}

/* NOTE: Select cell and actions column styles consolidated below
   in the "SELECT & ACTIONS COLUMNS - CENTERED LAYOUT" section
   using more specific .table-grid selectors (lines ~1821-1895) */

/* Main content width */
.tile-view-content {
    flex: 1;
    padding: 24px; /* Match admin-container padding */
    min-width: 0;
    width: 100%;
    max-width: 100vw; /* Allow full viewport width */
}

/* Table scroll wrapper width calculation - full width for table view */
body.table-view-active .table-scroll-wrapper {
    max-width: 100% !important;
    width: 100%;
}

/* Improved table grid header styling */
.table-grid .grid-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f8f9fa;
    display: contents;
}

/* Ensure action column buttons are properly spaced */
.actions-column .action-btn {
    margin: 0;
}

/* Improve cell text alignment for specific columns */
.grid-cell[data-column="status"],
.grid-cell[data-column="effectiveDate"],
.grid-cell[data-column="expirationDate"] {
    font-family: 'Courier New', monospace;
    font-size: 15px;
}

.grid-cell[data-column="certificateNumber"] {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #007bff;
}

/* Improve visual hierarchy for company and product names */
.grid-cell[data-column="company"],
.grid-cell[data-column="productName"] {
    font-weight: 500;
}

/* Status badges in table cells */
.grid-cell .status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.grid-cell .status-badge.active {
    background-color: #d4edda;
    color: #155724;
}

.grid-cell .status-badge.draft {
    background-color: #fff3cd;
    color: #856404;
}

.grid-cell .status-badge.expired {
    background-color: #f8d7da;
    color: #721c24;
}

/* ====================================================
   CONSOLIDATED STYLES - External/Internal Table Views
   Moved from inline styles for consistency (2026-01-11)
   ==================================================== */

/* Loading Spinner Animation */
.loading-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 12px;
}

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

/* ====================================================
   COLLAPSIBLE SIDEBAR - External/Internal Views
   ==================================================== */

/* Show Filters button - visible when sidebar collapsed */
.sidebar-toggle-tab {
    display: none;
    width: 44px;
    min-width: 44px;
    height: 100%;
    padding: 0;
    margin: 0;
    background: var(--blue-primary, #00AEEF);
    color: var(--white, #fff);
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition-fast, 0.15s ease);
}

.sidebar-toggle-tab:hover {
    background: var(--blue-dark, #002876);
}

.sidebar-toggle-tab:focus,
.sidebar-toggle-tab:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.5);
}

.sidebar-toggle-tab i {
    color: var(--white, #fff);
    font-size: 16px;
}

.sidebar-toggle-tab span {
    display: none;
}

.sidebar-toggle-tab.visible {
    display: flex;
}

/* Hide Filters button - inside sidebar */
.sidebar-collapse-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 16px;
    margin-bottom: 15px;
    background: var(--blue-primary, #00AEEF);
    color: var(--white, #fff);
    border: none;
    border-radius: var(--border-radius-sm, 4px);
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transition: var(--transition-fast, 0.15s ease);
}

.sidebar-collapse-btn:hover {
    background: var(--blue-dark, #002876);
}

.sidebar-collapse-btn:focus,
.sidebar-collapse-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.5);
}

.sidebar-collapse-btn i {
    margin-left: 10px;
    transition: transform 0.3s ease;
    font-size: 14px;
}

/* Sidebar collapsed state */
.sidebar.collapsed {
    display: none;
}

/* Main container adjustments when sidebar collapsed */
.main-container.sidebar-collapsed {
    max-width: 100%;
}

.main-container.sidebar-collapsed .tile-view-content {
    max-width: 100%;
}

.main-container.sidebar-collapsed .table-scroll-wrapper {
    max-width: 100%;
    width: 100%;
}

/* ====================================================
   TABLE SCROLL - Full Width for All Columns
   ==================================================== */

.table-scroll-wrapper {
    max-width: none;
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}

/* ====================================================
   WIDER LAYOUT FOR TABLE VIEW ONLY
   ==================================================== */

body.table-view-active .page-container {
    max-width: 100%;
    width: 100%;
    padding: 0 15px;
    margin: 0;
}

body.table-view-active .main-container {
    max-width: 100%;
    width: 100%;
    margin: 0;
}

body.table-view-active .tile-view-content {
    max-width: 100%;
    width: 100%;
}

/* ====================================================
   BULK ACTIONS BAR
   ==================================================== */

#tableView .bulk-actions-bar {
    padding: 4px 10px;
    margin-bottom: 8px;
    gap: 8px;
}

#tableView .bulk-actions-left {
    gap: 8px;
}

#tableView .selected-count {
    font-size: 16px;
}

#tableView .clear-selection-btn {
    padding: 6px 12px;
    font-size: 16px;
}

/* ====================================================
   SELECT & ACTIONS COLUMNS - CENTERED LAYOUT
   ==================================================== */

/* Select cell - header & body - CENTERED checkbox */
.table-grid .grid-header-cell.select-cell,
.table-grid .grid-cell.select-cell {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
    text-align: center !important;
}

/* Actions column - header & body - CENTERED content */
.table-grid .grid-header-cell.actions-column,
.table-grid .grid-cell.actions-column {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 8px 6px !important;
    overflow: visible !important;
}

/* Actions header text centering - full width span */
.table-grid .grid-header-cell.actions-column span {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    font-weight: 600 !important;
}

/* Action buttons container - centered within the cell */
.table-grid .grid-cell.actions-column .action-buttons {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 auto !important;
    width: 100% !important;
}

/* Individual action buttons - consistent sizing */
.table-grid .grid-cell.actions-column .action-btn {
    padding: 4px !important;
    min-width: 26px !important;
    height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    background: transparent !important;
    border-radius: 4px !important;
    color: #666 !important;
    cursor: pointer;
    flex-shrink: 0;
}

.table-grid .grid-cell.actions-column .action-btn:hover {
    /* Transparent with subtle color hint instead of solid background */
    background: rgba(0, 174, 239, 0.1);
    color: #00AEEF;
}

.table-grid .grid-cell.actions-column .action-btn:focus,
.table-grid .grid-cell.actions-column .action-btn:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.table-grid .grid-cell.actions-column .action-btn i {
    font-size: 14px;
}

/* Checkbox styling */
.table-grid .grid-cell.select-cell input[type="checkbox"],
.table-grid .grid-header-cell.select-cell input[type="checkbox"] {
    margin: 0;
    padding: 0;
    cursor: pointer;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    flex-shrink: 0;
}

.table-grid .row-checkbox {
    margin: 0;
    width: 16px;
    height: 16px;
}

/* ====================================================
   REDUCE SPACING BETWEEN BUTTONS AND TABLE
   ==================================================== */

.tile-view-content .results-header {
    margin-bottom: 8px;
    padding-top: 5px;
    padding-bottom: 0;
    margin-left: 0;
    padding-left: 0;
}

.tile-view-content .results-controls {
    margin-bottom: 8px;
    margin-top: 0;
    padding: 0;
    margin-left: 0;
}

/* Explicit left alignment for buttons and table */
.tile-view-content .left-controls {
    margin-left: 10px; /* Align with first tile/table column */
    padding-left: 0;
}

.tile-view-content .export-options {
    margin-left: 0;
    padding-left: 0;
}

.tile-view-content .table-scroll-wrapper,
.tile-view-content #tableView {
    margin-left: 5px; /* Align table with buttons */
    padding-left: 0;
}

#tableView {
    margin-top: 0;
    padding-top: 0;
    margin-left: 5px; /* Align with buttons */
}

.certificates-grid {
    margin-top: 0;
    margin-left: 0;
}

/* Loading indicator visibility */
.loading-indicator {
    display: none;
    padding: 10px;
}

.loading-indicator.active {
    display: flex;
}

/* ====================================================
   READABLE COMPACT TABLE LAYOUT
   ==================================================== */

/* Header cells - 16px min per Master Design Guide */
.table-grid .grid-header-cell {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 16px;
    font-weight: 600;
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Sort icon - inline, no wrap (matches admin pages) */
.table-grid .grid-header-cell .sort-icon {
    flex-shrink: 0;
    white-space: nowrap;
    margin-left: 6px;
}

/* Body cells - 16px min per Master Design Guide */
.table-grid .grid-cell {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 16px;
    line-height: 1.4;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    color: #333;
}

/* Short data columns stay single line - Status nowrap with wider column */
.table-grid .grid-cell[data-column="status"],
.table-grid .grid-cell[data-column="effectiveDate"],
.table-grid .grid-cell[data-column="expirationDate"],
.table-grid .grid-cell[data-column="asin"],
.table-grid .grid-cell[data-column="upc"],
.table-grid .grid-cell[data-column="gtin"],
.table-grid .grid-cell[data-column="ean"] {
    white-space: nowrap;
}

/* Country column - allow text wrapping for longer country names */
.table-grid .grid-cell[data-column="country"] {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Grid rows and header inherit template */
.table-grid .grid-header,
.table-grid .grid-body,
.table-grid .grid-row {
    display: contents;
}

/* Grid cells respect column widths */
.table-grid .grid-cell,
.table-grid .grid-header-cell {
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Zebra striping */
.table-grid .grid-row:nth-child(even) .grid-cell {
    background: #fafafa;
}

.table-grid .grid-row:hover .grid-cell {
    background: #e8f4fc;
}

.table-grid .grid-row:nth-child(even):hover .grid-cell {
    background: #e8f4fc;
}

/* Status badge */
.table-grid .grid-cell .status-badge {
    padding: 3px 8px;
    font-size: 12px;
}

/* Date columns */
.table-grid .grid-cell[data-column="effectiveDate"],
.table-grid .grid-cell[data-column="expirationDate"] {
    font-size: 16px;
}

/* Certificate number styling */
.table-grid .grid-cell[data-column="certificateNumber"] {
    font-family: inherit;
    font-weight: 500;
    color: inherit;
    font-size: 16px;
}

/* Certificate # column alignment */
.grid-cell[data-column="certificateNumber"],
.grid-header-cell[data-sort-column="certificate"] {
    font-weight: 600;
    justify-content: flex-start;
    text-align: left;
    padding-left: 8px;
}

/* Product name width fix */
.certificate-card .product-name {
    max-width: 100%;
    width: 100%;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

/* ====================================================
   CERTIFICATE TILE VIEW - Status Badge Override
   Remove tag-like styling for status in tile/card view
   ==================================================== */

/* QC #66: Status/partner rows in card-header inherit 16px + uppercase from .card-header.
   Override at the .status-row level so ALL children (labels, badges, text nodes) get 13px. */
.certificate-card .status-row {
    font-size: 13px;
    text-transform: none;
    line-height: 1.4;
}

/* Status badges in tile/card view - plain text, same color for all.
   Must use !important to override global .status-badge (16px) in main.css */
.certificate-card .status-badge,
.certificate-card .status-badge.status-active,
.certificate-card .status-badge.active,
.certificate-card .status-badge.status-valid,
.certificate-card .status-badge.status-expired,
.certificate-card .status-badge.status-pending,
.certificate-card .status-badge.status-revoked,
.certificate-card .status-badge.status-draft,
.certificate-card .status-badge.status-default {
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    text-transform: capitalize !important;
    color: #fff !important;
}

/* Status and Partner labels in tile/card view */
.certificate-card .status-label,
.certificate-card .partner-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.certificate-card .partner-badge {
    font-size: 13px;
    font-weight: 500;
    color: #fff;
}

/* ====================================================
   INTERNAL VIEW SPECIFIC - Edit Button
   ==================================================== */

.action-icon.edit {
    color: #007bff;
}

.action-icon.edit:hover {
    color: #0056b3;
    background-color: #e3f2fd;
}

.action-btn.edit,
.action-btn.edit-btn {
    color: #007bff;
}

.action-btn.edit:hover,
.action-btn.edit-btn:hover {
    color: #0056b3;
    background-color: #e3f2fd;
}

/* ====================================================
   CRITICAL FIX: Ensure certificate cards are ALWAYS visible
   This overrides any animation/opacity issues from other CSS files
   ==================================================== */
.certificates-grid .certificate-card,
.certificates-grid .certificate-card.internal-card,
.certificates-grid .certificate-card.animated,
.certificates-grid .certificate-card.fadeInUp,
#certificatesGrid .certificate-card,
#certificatesGrid > div {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    transform: none !important;
}

/* Ensure the grid container is visible by default */
.certificates-grid,
#certificatesGrid {
    opacity: 1 !important;
    visibility: visible !important;
    display: grid !important;
    min-height: 200px;
}

/* Hide the grid when table/list view is active */
.certificates-grid.hidden-for-table,
#certificatesGrid.hidden-for-table {
    display: none !important;
}

/* Only hide cards when specifically in table-view mode */
.certificates-grid.table-view .certificate-card {
    display: none !important;
}

/* =============================================================================
   STICKY TABLE BLOCK - Toolbar + Scrollbar + Header pinned together
   Used by both Internal and External certificate tile views
   ============================================================================= */

.sticky-table-block {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    border: 1px solid #ddd;
    border-bottom: none;
    box-shadow: none;
    transition: box-shadow 0.2s;
}
.sticky-table-block.stuck {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* --- Table Toolbar Row --- */
.table-toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    gap: 12px;
    flex-wrap: wrap;
    border-bottom: 1px solid #ddd;
    background: #fff;
    min-height: 44px;
}
.table-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #666;
}
.table-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;          /* keep Columns button right-aligned even when row wraps to a new line on narrow viewports */
}

/* --- Sticky Scrollbar Row --- */
.sticky-scrollbar-row {
    overflow-x: auto;
    overflow-y: hidden;
    background: #f0f0f0;
    border-bottom: 1px solid #ddd;
}
.sticky-scrollbar-row::-webkit-scrollbar { height: 12px; }
.sticky-scrollbar-row::-webkit-scrollbar-track { background: #e8e8e8; }
.sticky-scrollbar-row::-webkit-scrollbar-thumb { background: #bbb; border-radius: 6px; border: 2px solid #e8e8e8; }
.sticky-scrollbar-row::-webkit-scrollbar-thumb:hover { background: #888; }
.sticky-scrollbar-row { scrollbar-width: thin; scrollbar-color: #bbb #e8e8e8; }
.scrollbar-sizer { height: 1px; }

/* --- Sticky Header Row --- */
.sticky-header-row {
    overflow: hidden;
    background: #f8f9fa;
    border-bottom: 2px solid #1a5276;
}
.sticky-header-inner {
    display: flex;
    width: max-content;
    min-width: 100%;
}
.sticky-header-cell {
    padding: 6px 8px;
    font-weight: 600;
    font-size: 13px;
    color: #333;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
    border-right: 1px solid #ddd;
    min-height: 36px;
    line-height: 1.3;
}
.sticky-header-cell:last-child { border-right: none; }
.sticky-header-cell:hover { background: #e8e8e8; }
.sticky-header-cell .sort-icon {
    font-size: 10px;
    opacity: 0.4;
    transition: opacity 0.2s;
    flex-shrink: 0;
    margin-left: 2px;
    margin-right: 2px;
}
.sticky-header-cell:hover .sort-icon { opacity: 0.8; }
.sticky-header-cell.sort-active .sort-icon { opacity: 1; }

/* --- Table Body Scroll Wrapper (hides native bottom scrollbar) --- */
.table-body-wrap {
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: #fff;
    overflow-x: auto;
}
.table-body-wrap::-webkit-scrollbar { height: 0; }
.table-body-wrap { scrollbar-width: none; }

/* --- Body Rows (flex-based, matching header) --- */
.table-body-inner {
    width: max-content;
    min-width: 100%;
}
.table-body-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    /* stretch makes every cell fill the row's tallest height, so the bottom borders
       line up across the row even when one column wraps to multiple lines.
       Cells keep their own `align-items: center` to vertically center their inner content. */
    align-items: stretch;
    width: max-content;
    min-width: 100%;
    cursor: pointer;
    transition: background-color 0.15s;
}
.table-body-row:hover .table-body-cell { background: #f0f7ff; }
.table-body-row:nth-child(even) .table-body-cell { background: #fafafa; }
.table-body-row:nth-child(even):hover .table-body-cell { background: #f0f7ff; }

.table-body-cell {
    padding: 6px 8px;
    font-size: 13px;
    color: #333;
    /* Wrap long content instead of truncating with ellipsis so analysts can read full values
       (Product Name, Cert Type, Status etc.) without hovering or clicking through. */
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    word-break: break-word;
    flex-shrink: 0;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    min-height: 36px;
    height: auto;
    line-height: 1.4;
}

.table-body-cell:last-child { border-right: none; }

/* Cell-specific styles (shared between header and body) */
.tc-select { width: 36px; min-width: 36px; justify-content: center; }
/* tc-actions widened from 90px → 110px so 3 buttons (78px content + gaps) have breathing room.
   align-self: stretch keeps the icons vertically centered when neighboring cells wrap and grow taller. */
.tc-actions { width: 110px; min-width: 110px; justify-content: center; align-self: stretch; }

/* Centered content for select/actions */
.sticky-header-cell.tc-select,
.sticky-header-cell.tc-actions { justify-content: center; }

/* Action buttons in body rows.
   `display: flex` (not inline-flex) so the wrapper is a true block flex item — inline-flex
   inherits baseline behavior from line-height, which biases it downward in tall rows.
   `margin: 0` resets the global `.action-buttons { margin-top: 24px }` from main.css
   (intended for page-level button bars) which was leaking in and pushing icons 11–12px
   below the row's vertical center. */
.table-body-cell.tc-actions .action-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    margin: 0;
    align-self: center;
}
.table-body-cell.tc-actions .action-btn {
    padding: 4px;
    min-width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 4px;
    color: #666;
    cursor: pointer;
    flex-shrink: 0;
}
.table-body-cell.tc-actions .action-btn:hover {
    background: #e3f2fd;
    color: #007bff;
}
.table-body-cell.tc-actions .action-btn i { font-size: 14px; }

/* Certificate number styling */
.table-body-cell.tc-cert {
    font-weight: 400;
    color: #007bff;
}

/* Company/product emphasis */
.table-body-cell.tc-company,
.table-body-cell.tc-product { font-weight: 500; }

/* Product ID count badges */
.table-body-cell.tc-asin,
.table-body-cell.tc-upc,
.table-body-cell.tc-gtin,
.table-body-cell.tc-ean { justify-content: center; }

/* Status badges in new table.
   `!important` on font-size/font-weight to beat the global `.status-badge` rule in main.css
   (which sets 16px/600 for page-level badges) — same trick as the tile-card overrides above. */
.table-body-cell .status-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px !important;
    font-weight: 500 !important;
    /* Allow long statuses like "Client Approved - Paid" to wrap inside the 110px Status column
       instead of truncating to "CLIENT APPR" */
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

.table-body-cell .status-badge.status-active {
    background: #e8f5e9;
    color: #2e7d32;
}
.table-body-cell .status-badge.status-draft {
    background: #fff3e0;
    color: #ef6c00;
}
.table-body-cell .status-badge.status-expired {
    background: #ffebee;
    color: #c62828;
}
.table-body-cell .status-badge.status-default {
    background: #f5f5f5;
    color: #616161;
}

/* Column hidden */
.col-hidden { display: none !important; }

/* =============================================================================
   COLUMN TOGGLE DROPDOWN (Internal view only)
   ============================================================================= */

.col-toggle-wrap { position: relative; }
.col-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #495057;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.col-toggle-btn:hover { background: #f8f9fa; border-color: #ccc; }
.col-toggle-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    background: #2980b9;
    color: #fff;
}

.col-toggle-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    width: 300px;
    max-height: 450px;
    overflow-y: auto;
    z-index: 200;
}
.col-toggle-dropdown.open { display: block; }

.col-toggle-dropdown .ct-header {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    color: #495057;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}
.col-toggle-dropdown .ct-header a {
    font-size: 12px;
    color: #2980b9;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
}

.col-toggle-dropdown .ct-divider {
    padding: 6px 14px 4px;
    font-size: 11px;
    font-weight: 700;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
}

.col-toggle-dropdown .ct-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 14px;
    border-bottom: 1px solid #f0f0f0;
}
.col-toggle-dropdown .ct-row:hover { background: #f8f9fa; }
.col-toggle-dropdown .ct-row.ct-locked { opacity: 0.5; pointer-events: none; }

.col-toggle-dropdown .ct-label {
    font-size: 13px;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 8px;
}
.col-toggle-dropdown .ct-label .ct-icon {
    width: 20px;
    text-align: center;
    color: #6c757d;
    font-size: 12px;
}

/* Toggle switch */
.ct-switch { position: relative; width: 36px; height: 20px; flex-shrink: 0; }
.ct-switch input { opacity: 0; width: 0; height: 0; }
.ct-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #e0e0e0;
    border-radius: 10px;
    transition: 0.2s;
}
.ct-slider:before {
    content: "";
    position: absolute;
    height: 16px; width: 16px;
    left: 2px; bottom: 2px;
    background: #fff;
    border-radius: 50%;
    transition: 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.ct-switch input:checked + .ct-slider { background: #2980b9; }
.ct-switch input:checked + .ct-slider:before { transform: translateX(16px); }

/* Mobile: anchor column dropdown to the viewport's right edge (top is set by JS on open) */
@media (max-width: 768px) {
    .col-toggle-dropdown.open {
        position: fixed;
        right: 8px;
        left: auto;
        width: min(300px, calc(100vw - 16px));
        max-height: calc(100vh - 120px);
    }
}

/* ====================================================
   MOBILE / TABLET RESPONSIVE - SIDEBAR & FILTERS
   ==================================================== */

/* Mobile filter toggle button - hidden on desktop */
.mobile-filter-toggle {
    display: none;
    width: 100%;
    padding: 12px 16px;
    background: var(--blue-primary, #00AEEF);
    color: var(--white, #fff);
    border: none;
    border-radius: var(--border-radius-sm, 4px);
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    transition: background 0.2s ease;
}

.mobile-filter-toggle:hover {
    background: var(--blue-dark, #002876);
}

.mobile-filter-toggle i {
    transition: transform 0.3s ease;
}

.mobile-filter-toggle.open i {
    transform: rotate(180deg);
}

/* Tablet breakpoint (1024px and below) */
@media (max-width: 1024px) {
    .main-container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 15px;
    }

    .mobile-filter-toggle {
        display: flex;
    }

    /* Desktop collapse button is redundant with mobile toggle on tablet/mobile */
    .sidebar-collapse-btn,
    .sidebar-toggle-tab {
        display: none !important;
    }

    /* Hide filter content by default on tablet/mobile */
    .sidebar .search-bar,
    .sidebar .filters-header,
    .sidebar .filter-panel {
        display: none;
    }

    /* Show filter content when sidebar has 'mobile-open' class */
    .sidebar.mobile-open .search-bar,
    .sidebar.mobile-open .filters-header,
    .sidebar.mobile-open .filter-panel {
        display: block;
    }

    .sidebar.mobile-open .filters-header {
        display: flex;
    }
}

/* Mobile breakpoint (768px and below) */
@media (max-width: 768px) {
    .sidebar {
        padding: 10px;
    }

    .mobile-filter-toggle {
        padding: 10px 14px;
        font-size: 15px;
    }

    .sort-dropdown-content {
        min-width: 200px;
    }
}

/* DEF-430: failed-load panel for the internal and external tile views (both load this file).
   Takes the place of the results when a load fails, so the page can never sit on "Loading…"
   over the previous filter's tiles. `grid-column: 1 / -1` makes it span the tile grid; it is
   inert in the list view, where it is appended to #gridBody. */
.tile-load-error {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-color, #333);
}

.tile-load-error i {
    font-size: 40px;
    color: var(--admin-danger, #FF5252);
    margin-bottom: var(--space-md, 16px);
}

.tile-load-error p {
    font-size: 16px;
    margin-bottom: var(--space-lg, 24px);
}

.tile-load-error-retry {
    padding: 10px 24px;
    font-size: 16px;
    color: #fff;
    background: var(--gcc-green-secondary, #447638);
    border: none;
    border-radius: var(--border-radius-md, 8px);
    cursor: pointer;
    transition: background-color var(--transition-fast, 0.15s ease);
}

.tile-load-error-retry:hover {
    background: var(--gcc-green-primary, #92C83E);
}