/* main.css - Unified Master Styles - Mobile & Tablet Layout Fixed */

/* 
Use the following 4 breakpoints for 95% of projects:
css Default: 1025px+ (Desktop) 
@media (max-width: 1024px) -  Tablet 
@media (max-width: 768px) - Mobile
@media (max-width: 480px) - Small Mobile
@media print - Print optimization     

Mobile-First:
    - Touch-friendly button sizes (44px minimum)
    - Optimized typography scaling
    - Collapsible sidebar with mobile filter toggle
    - Improved navigation for small screens

Desktop (1025px+): Full layout with sidebars
Tablet (769px-1024px): Mobile navigation with larger touch targets
Mobile (≤768px): Single column, hamburger menu
Small Mobile (≤480px): Ultra-compact, touch-optimized

*/

/* ===== 1. IMPORTS & FONTS ===== */
/* FontAwesome is loaded in the HTML head to prevent FOUC (Flash of Unstyled Content) */

/* ===== 2. CSS CUSTOM PROPERTIES ===== */
:root {
    /* Colors - Master Design Guide Compliance */
    --navy-blue: #002876;
    --blue-dark: #002876;
    --blue-primary: #00AEEF;
    --green-primary: #92C83E;
    --green-secondary: #447638;
    --green-light: #92C83E;
    --green-lighter: #D4F084;
    --green-pale: #E8F7B8;
    --text-color: #333;
    --text-secondary: #666;
    --border-color: #eaeaea;
    --light-gray: #f9f9f9;
    --medium-gray: #DDDDDD;
    --dark-gray: #333333;
    --white: #ffffff;
    --off-white: #f9f9f9;
    --warning: #ff5252;
    --success: #92C83E;
    --header-color: #FCFDEB;

    /* GCC Brand Colors - Admin Component Support */
    --gcc-green-primary: #92C83E;      /* Light green - PRIMARY brand color */
    --gcc-green-secondary: #447638;    /* Dark green - SECONDARY shade */
    --gcc-blue-primary: #00AEEF;       /* Primary blue */
    --gcc-blue-dark: #002B76;          /* Navy blue */
    --admin-warning: #FFC107;          /* Warning yellow */
    --admin-danger: #FF5252;           /* Error red */
    --admin-success: #92C83E;          /* Success green */
    /* Layout */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    /* Effects */
    --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-strong: 0 8px 16px rgba(0, 0, 0, 0.2);
    --transition-fast: 0.15s ease;
    --transition: 0.3s ease;
    --transition-slow: 0.5s ease;
    /* Theme Variables (Dynamic) */
    --theme-primary: var(--blue-primary);
    --theme-secondary: var(--green-primary);
}

/* ===== 3. RESET & BASE ===== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
    background-color: var(--light-gray);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    line-height: 1.6;
    font-size: 16px; /* Minimum font size for accessibility */
}

/* ===== 3A. ACCESSIBILITY COMPLIANCE ===== */
/* Ensure all text meets 16px minimum font size requirement */

/* Global font size enforcement for accessibility */
*,
*::before,
*::after {
    font-size: inherit;
}

/* Form elements accessibility */
input,
select,
textarea,
button,
.form-control,
.form-select,
.btn {
    font-size: 16px !important;
}

/* Hide validation summary when no errors present */
.validation-summary-valid {
    display: none;
}

/* Focus styles for form elements */
input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.3);
}

/* Common small text elements */
.small,
.small-text,
.caption,
.footnote,
.badge,
.tag,
.status-badge,
.tooltip,
.toast,
.alert,
td,
th,
.table td,
.table th {
    font-size: 16px !important;
}

/* Navigation and UI elements */
.nav-link,
.dropdown-item,
.breadcrumb-item,
.pagination-link,
.sort-option,
.filter-item,
.filter-option,
.autocomplete-item,
.suggestion-item {
    font-size: 16px !important;
}

/* Certificate specific elements */
.certificate-details,
.certificate-id,
.certificate-period,
.certificate-location,
.product-type,
.card-actions,
.action-icon,
.certificate-actions {
    font-size: 16px !important;
}

/* Override any remaining small fonts across the application */
.search-input,
.filter-search-input,
.sidebar label,
.filter-tree label,
.grid-cell,
.list-item,
.tab-content,
.modal-body,
.accordion-content {
    font-size: 16px !important;
}

/* Specific overrides for commonly problematic elements */
[style*="font-size: 10px"],
[style*="font-size: 11px"],
[style*="font-size: 12px"],
[style*="font-size: 13px"],
[style*="font-size: 14px"],
[style*="font-size: 15px"] {
    font-size: 16px !important;
}

/* ===== 4. LAYOUT CONTAINERS ===== */
.container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0;
}

.page-container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 40px;
}

.main-content {
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
    min-height: calc(100vh - 300px);
}

.main-container {
    display: flex;
    position: relative;
    gap: 24px;
    max-width: 100%;
}

.main-content {
    flex: 1;
    min-width: 0; /* Prevents flex item from overflowing */
}

/* ===== 4A. SKIP LINKS FOR KEYBOARD NAVIGATION ===== */
.skip-to-main,
.skip-to-footer {
    position: absolute;
    top: -100px;
    left: 0;
    background-color: var(--blue-primary);
    color: white;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    z-index: 100000;
    border-radius: 0 0 4px 0;
    transition: top 0.3s ease;
}

.skip-to-main:focus,
.skip-to-footer:focus {
    top: 0;
    outline: 3px solid #FFC107;
    outline-offset: 2px;
}

/* ===== 5. HEADER SYSTEM ===== */
.header {
    background-color: var(--white);
    box-shadow: var(--shadow);
    position: relative;
    z-index: 1000;
}

.header-top {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 4px 24px;
    background-color: var(--blue-dark);
    color: var(--white);
}

.header-middle {
    height: auto;
    min-height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    position: relative;
    padding: 20px 0;
    background-color: var(--blue-dark);
}

.header-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

a.logo-area:focus {
    outline: none;
}

a.logo-area:focus-visible {
    outline: 2px solid var(--primary-color, #002B76);
    outline-offset: 2px;
}

.logo-text-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 300px;
}

.logo-text {
    font-size: 42px;
    font-weight: bold;
    color: var(--white);
    text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.6);
    line-height: 1.2;
    word-wrap: break-word;
}

.logo-subtext {
    font-size: 28px;
    color: var(--white);
    opacity: 0.85;
    margin-top: 4px;
    max-width: 75%;
}

.logo-img {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    height: auto;
    flex-shrink: 0;
}

.main-logo {
    height: 280px;
    flex-shrink: 0;
}

/* ===== 6. USER CONTROLS ===== */
.user-controls {
    display: flex;
    align-items: center;
    gap: 20px;
}

.role-indicator {
    display: flex;
    align-items: center;
    font-size: 16px;
}

.role-badge {
    background-color: var(--green-secondary);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 16px;
    margin-left: 8px;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
    font-size: 16px;
    padding: 8px 12px;
    border-radius: 6px;
    transition: var(--transition);
}

    .user-profile:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .user-profile i {
        font-size: 16px;
        transition: transform 0.3s ease;
    }

    .user-profile.open i {
        transform: rotate(180deg);
    }

.user-name {
    font-size: 16px;
    font-weight: 500;
}

a.sign-in-link {
    text-decoration: none;
    color: inherit;
}

.user-dropdown {
    position: absolute;
    top: 45px;
    right: 0;
    width: 200px;
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    z-index: 100;
    display: none;
}

    .user-dropdown.open {
        display: block;
    }

.dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    color: var(--text-color);
    text-decoration: none;
    transition: var(--transition);
    font-size: 16px;
}

    .dropdown-item:hover {
        background-color: rgba(0, 174, 239, 0.2);
    }

    .dropdown-item i {
        width: 20px;
        margin-right: 10px;
        text-align: center;
    }

/* CSP-compliant logout form styling */
.logout-form {
    margin: 0;
}

.logout-button {
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 5px 0;
}

/* ===== 7. NAVIGATION SYSTEM ===== */
.nav-wrapper {
    background-color: var(--white);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    z-index: 1000;
}

.main-nav {
    max-width: 1800px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
}

.nav-links {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: block;
    padding: 15px 20px;
    color: var(--text-color);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: var(--transition);
    border-bottom: 3px solid transparent;
}

    .nav-link:hover {
        color: var(--blue-primary);
    }

    .nav-link.active {
        color: var(--blue-primary);
        border-bottom-color: var(--blue-primary);
    }

    .nav-link i {
        margin-right: 8px;
    }

.dropdown-icon {
    margin-left: 6px;
    font-size: 16px;
}

/* Submenu system */
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--white);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--transition);
    z-index: 100;
}

.nav-item:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.submenu a {
    display: block;
    padding: 12px 20px;
    color: var(--text-color);
    text-decoration: none;
    font-size: 16px;
    transition: var(--transition);
}

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

    .submenu a i {
        margin-right: 8px;
        width: 16px;
        text-align: center;
    }

/* Nested submenu */
.submenu .submenu-item {
    position: relative;
}

.submenu .nested-submenu {
    position: absolute;
    top: 0;
    left: 100%;
    background-color: var(--white);
    border-radius: 0 6px 6px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: var(--transition);
}

.submenu .submenu-item:hover .nested-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.submenu .submenu-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    color: var(--text-color);
    text-decoration: none;
    font-size: 16px;
    transition: var(--transition);
    cursor: pointer;
}

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

    .submenu .submenu-toggle i.toggle-icon {
        font-size: 16px;
        margin-left: 8px;
    }

    .submenu .submenu-toggle > i:first-child {
        margin-right: 8px;
        width: 16px;
        text-align: center;
    }

    .submenu .nested-submenu a i {
        margin-right: 8px;
        width: 16px;
        text-align: center;
    }

/* Mobile toggle - Hidden by default */
.mobile-toggle {
    display: none;
    font-size: 24px;
    cursor: pointer;
    padding: 8px;
    border: none;
    background: none;
    transition: var(--transition);
    border-radius: 4px;
    position: relative;
    z-index: 1001;
}

    .mobile-toggle:hover {
        background-color: rgba(0, 0, 0, 0.1);
    }

    .mobile-toggle.active i {
        transform: rotate(90deg);
        transition: transform 0.3s ease;
    }

/* Mobile nav close wrapper - ensures proper list structure */
.mobile-nav-close-item {
    position: absolute;
    top: 0;
    right: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav-close {
    display: none;
    position: absolute;
    top: 15px;
    right: 20px;
    background: var(--white);
    border: 2px solid var(--border-color);
    font-size: 24px;
    cursor: pointer;
    color: var(--text-color);
    z-index: 1003;
    padding: 12px;
    border-radius: 50%;
    transition: var(--transition);
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
}

    .mobile-nav-close:hover {
        background-color: rgba(0, 0, 0, 0.1);
    }

.nav-links.mobile-open .mobile-nav-close {
    display: flex;
}

/* ===== 7.5. FONTAWESOME ICONS FIX ===== */
.fas, .far, .fab, .fal, .fad {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

.far {
    font-weight: 400 !important;
}

.fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

/* ===== 8. SEARCH BAR ===== */
.search-bar {
    position: relative;
    width: 350px;
}

    .search-bar input,
    .search-input {
        width: 100%;
        padding: 10px 15px 10px 36px;
        border-radius: 6px;
        border: 1px solid var(--border-color);
        background-color: var(--white);
        font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
        font-size: 16px;
        transition: var(--transition);
        box-sizing: border-box;
    }

        .search-bar input:focus,
        .search-input:focus {
            outline: none;
            border-color: var(--blue-primary);
            box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.1);
        }

    .search-bar i {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #999;
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        z-index: 10;
        font-size: 14px;
        pointer-events: none;
    }

/* ===== 9. BREADCRUMBS ===== */
/* Always reserve space for breadcrumbs for consistent layout across all roles */
.breadcrumbs {
    display: block !important; /* Override role-element hiding - always show container */
    min-height: 32px; /* Consistent spacing whether content visible or not */
    background-color: var(--light-gray);
    padding: 8px 0px 8px 0px;
    font-size: 16px;
    color: #888;
    /*border-bottom: 1px solid var(--border-color);*/
}

.breadcrumb-wrapper {
    max-width: 1800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 0px 40px;
    visibility: hidden; /* Hide content by default */
}

/* Show breadcrumb content only for Admin role */
.role-admin .breadcrumb-wrapper {
    visibility: visible;
}

.breadcrumbs a {
    color: #666;
    text-decoration: none;
    transition: var(--transition);
}

    .breadcrumbs a:hover {
        color: var(--blue-primary);
    }

.breadcrumbs .separator {
    margin: 0 10px;
    font-size: 16px;
}

.breadcrumbs .current {
    color: var(--text-color);
    font-weight: 500;
}

/* ===== 10. PAGE HEADER ===== */
.page-header {
    padding: 12px 0 10px 0;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.page-title {
    color: var(--blue-dark);
    font-size: 24px;
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
}

.page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ===== FOOTER INFO (Admin Pages) ===== */
.footer-info {
    color: #6c757d;
    font-size: 14px;
    text-align: right;
    margin-top: 16px;
}

/* ===== ACTION COLUMNS (Admin Pages) ===== */
.actions-col {
    text-align: center;
    white-space: nowrap;
    width: 120px;
    min-width: 120px;
}

/* ===== 11. BUTTON SYSTEM ===== */
/* Focus ring for accessibility - Design Guide compliance */
.focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.3);
}

.btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    border: none;
    text-decoration: none;
}

.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.3);
}

.btn-outline {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: #666;
}

    .btn-outline:hover {
        background-color: #f7f7f7;
    }

.btn-outline-green {
    background-color: transparent;
    border: 2px solid var(--green-secondary);
    color: var(--green-secondary);
}

    .btn-outline-green:hover {
        background-color: var(--green-secondary);
        color: white;
    }

.btn-primary {
    background-color: var(--blue-primary);
    color: white;
}

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

.btn-add {
    background-color: var(--green-primary);
    color: white;
}

    .btn-add:hover {
        background-color: var(--green-secondary);
    }

/* Additional button styles for tables and forms */
.btn-delete, .btn-edit {
    color: #e74c3c;
    background: none;
    border: none;
    padding: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition);
}

.btn-edit {
    color: var(--blue-primary);
}

.btn-delete:hover {
    background-color: rgba(255, 82, 82, 0.1);
}

.btn-edit:hover {
    background-color: rgba(0, 174, 239, 0.1);
}

.btn-save, .btn-cancel {
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transition: var(--transition);
}

.btn-save {
    background-color: var(--green-secondary);
    color: white;
    border: none;
}

    .btn-save:hover {
        background-color: var(--green-primary);
    }

.btn-cancel {
    background-color: #f8f9fa;
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

    .btn-cancel:hover {
        background-color: #e2e6ea;
    }

/* ===== 12. TABLE SYSTEM ===== */
.table-container {
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 20px;
}

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

th, td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

th {
    background-color: #f9f9f9;
    color: var(--blue-dark);
    font-weight: 600;
    position: sticky;
    top: 0;
    cursor: pointer;
}

    th .sort-icon {
        display: inline-block;
        margin-left: 6px;
        font-size: 16px;
        opacity: 0.6;
    }

    th.active-sort .sort-icon {
        opacity: 1;
    }

tbody tr:hover {
    background-color: #f5f5f5;
}

.edit-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--blue-primary);
    border-radius: 4px;
    font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
    box-sizing: border-box;
}

/* Table styles specific to different sections */
table th, table td {
    border: 1px solid var(--border-color);
    padding: 10px;
    text-align: left;
}

table thead {
    background-color: var(--light-gray);
    color: var(--text-color);
    font-weight: 600;
}

.table-section {
    margin-bottom: 32px;
}

.table-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--blue-dark);
    margin-bottom: 8px;
}

/* ===== 13. FILTER SYSTEM ===== */
.sidebar {
    width: 350px;
    background-color: var(--white);
    border-right: 1px solid var(--medium-gray);
    padding: 5px;
    padding-top: 0;
}

.filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 25px 0 25px 0;
    /*border-top: 1px solid var(--medium-gray);*/
    width: 100%;
    position: relative;
}

.filters-label {
    font-weight: bold;
}

.filters-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--blue-dark);
    margin: 0;
    padding: 0;
    /*line-height: 1;*/
    /*float: left;*/
}

/*.clear-filters {
    color: var(--blue-dark);
    text-decoration: underline;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    margin-left: auto;
    align-self: center;
}*/
.clear-filters {
    color: var(--blue-dark);
    text-decoration: underline;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    margin-left: auto;
    align-self: center;
    white-space: nowrap; /* Add this to prevent wrapping */
}

/*.filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 25px 0 25px 0;
    width: 100%;
    position: relative;
}*/
/*.filters-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}*/

    .clear-filters:hover {
        color: var(--blue-primary);
    }

.filter-panel {
    margin-bottom: 15px;
    border: 1px solid var(--medium-gray);
}

.filter-header {
    padding: 10px 15px;
    background-color: var(--light-gray);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    /* Button reset for accessibility */
    border: none;
    width: 100%;
    text-align: left;
    color: inherit;
    font-family: inherit;
}

    .filter-header:hover {
        background-color: #e9ecef;
    }

    .filter-header:focus {
        outline: 2px solid var(--primary-color, #002B76);
        outline-offset: -2px;
    }

    .filter-header h3 {
        font-size: 16px;
        font-weight: bold;
    }

.filter-content {
    padding: 0px 15px;
    border-top: 1px solid var(--medium-gray);
    max-height: 200px;
    overflow-y: auto;
    /* Fieldset reset for accessibility */
    border-left: none;
    border-right: none;
    border-bottom: none;
    margin: 0;
    min-width: 0;
}

.filter-tree {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.filter-tree .filter-item {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 1px !important;
    margin-left: 0 !important;
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    /* padding-left is controlled by filter-level classes */
    font-size: 16px;
    line-height: 1.2 !important;
}

    .filter-tree .filter-item label {
        display: flex;
        align-items: center;
        margin: 0 !important;
        padding: 2px 0 !important; /* Minimal vertical padding for better click targets */
        font-size: 16px;       
    }

    .filter-tree .filter-item input[type="checkbox"] {
        margin: 0 4px 0 0 !important;
        padding: 0 !important;
        vertical-align: top !important; /* Prevent baseline alignment issues */
        line-height: 1 !important;
    }

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

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

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

/* Add to your CSS */
.sidebar-element-hidden {
    display: none !important;
}

.sidebar-element-visible {
    display: block !important;
}

    .sidebar-element-visible.filters-header {
        display: flex !important;
    }
/* Ensure minimum 16px font-size throughout */
input, select, button, .form-input, .form-select {
    font-size: 16px !important;
    min-height: 44px;
}

.certificate-field, .certificate-period, .certificate-location,
.product-name, .table td, .table th {
    font-size: 16px !important;
}

/* Mobile filter toggle - Hidden by default on desktop */
.mobile-filter-toggle {
    display: none;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 15px 20px;
    background-color: var(--blue-primary);
    color: white;
    border: none;
    font-size: 16px;
    cursor: pointer;
    border-radius: 0;
    text-align: left;
    position: relative;
    z-index: 10;
}

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

    .mobile-filter-toggle span {
        font-weight: 500;
    }

    .mobile-filter-toggle i {
        margin-left: 10px;
        transition: transform 0.3s ease;
        font-size: 16px;
    }

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

/* ===== 14. SEARCH & SORT COMPONENTS ===== */
.search-filter-bar {
    display: flex;
    align-items: center;
    background-color: transparent;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 15px;
    gap: 10px;
    flex-wrap: wrap;
}

.search-box {
    position: relative;
    flex-grow: 1;
    min-width: 200px;
}

    .search-box input {
        width: 100%;
        padding: 8px 10px 8px 35px;
        border-radius: 4px;
        border: 1px solid #ddd;
        background-color: white;
        font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
        box-sizing: border-box;
    }

.search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #777;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    z-index: 10;
}

/* .search-input styles now defined with .search-bar input above */

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-top: 20px;
}

.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: 2px solid var(--border-color);
    padding: 8px 15px;
    border-radius: var(--border-radius-sm);
    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(--green-primary);
    }

.sort-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: var(--white);
    min-width: 250px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    z-index: 10;
    border-radius: 4px;
    border: 1px solid var(--medium-gray);
}

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

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

    .sort-option:hover {
        background-color: var(--light-gray);
    }

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

.sort-group-header {
    padding: 8px 15px;
    background-color: var(--light-gray);
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

/* ===== 15. CERTIFICATE CARD SYSTEM ===== */
.certificates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    align-items: stretch;
    padding: 0 8px;
}

.certificate-card {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: var(--transition);
    border: 1px solid var(--border-color);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    opacity: 1; /* Ensure cards are always visible - prevents animation failures from hiding content */
    animation: slideUp 0.6s ease-out forwards;
}

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

    .certificate-card:nth-child(1) {
        animation-delay: 0.1s;
    }

    .certificate-card:nth-child(2) {
        animation-delay: 0.2s;
    }

    .certificate-card:nth-child(3) {
        animation-delay: 0.3s;
    }

    .certificate-card:nth-child(4) {
        animation-delay: 0.4s;
    }

    .certificate-card:nth-child(5) {
        animation-delay: 0.5s;
    }

    .certificate-card:nth-child(6) {
        animation-delay: 0.6s;
    }

.card-header {
    background-color: var(--theme-primary);
    color: var(--white);
    padding: 12px 15px;
    position: relative;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    text-align: left;
}

.header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.certificate-category {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2;
    max-width: 65%;
    color: var(--white);
    text-align: left;
}

.certificate-id {
    background: var(--white);
    color: var(--blue-dark);
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.company-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--white);
    line-height: 1.3;
    margin-bottom: 0;
    text-align: left;
}

.card-body {
    padding: 1px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-info {
    margin-bottom: 0px;
}

.product-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--blue-dark);
    line-height: 1.2;
    margin-bottom: 0px;
}
/* Table product name consistency */
.results-table .product-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--blue-dark);
    text-decoration: none;
}

.product-type {
    font-size: 18px;
    color: var(--text-secondary);
    font-style: italic;
    display: inline-block;
    margin-bottom: 8px;
}

.certificate-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 5px;
}

.certificate-period {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.2;
}

    .certificate-period strong {
        color: var(--text-color);
        display: block;
        margin-bottom: 4px;
    }

.certificate-location {
    font-size: 16px;
    color: var(--text-secondary);
    display: flex;
    align-items: flex-start;
    gap: 6px;
    line-height: 1.2;
}

    .certificate-location i {
        color: var(--green-primary);
        font-size: 16px;
        flex-shrink: 0;
        margin-top: 2px;
    }

.card-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 12px;
    /*border-top: 1px solid rgba(0, 0, 0, 0.05);*/
}

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

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

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

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

.results-count {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: bold;
}

/* ===== 16. CERTIFICATE SINGLE VIEW ===== */
.verification-url{
    padding-top: 10px;
}

.certificate-single-container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 24px;
    background-color: var(--white);
    box-shadow: var(--shadow);
    border-radius: var(--border-radius-lg);
    font-family: 'Century Gothic', sans-serif;
}

.certificate-detail-header {
    font-size: 24px;
    font-weight: bold;
    color: var(--blue-dark);
    border-bottom: 3px solid var(--green-primary);
    padding-bottom: 12px;
    margin-bottom: 20px;
}

.certificate-detail-number {
    display: block;
    font-size: 16px;
    color: var(--text-secondary);
    margin-top: 6px;
    font-style: italic;
}

.certificate-details {
    display: flex;
    flex: 1;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.details-column {
    flex: 1;
    min-width: 300px;
}

.detail-section {
    margin-bottom: 24px;
}

    .detail-section h3 {
        color: var(--green-secondary);
        margin-bottom: 8px;
        font-size: 16px;
        border-left: 4px solid var(--green-primary);
        padding-left: 8px;
    }

.certificate-section-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-color);
}

.certificate-field,
.certificate-period,
.certificate-location {
    font-size: 16px;
    margin-bottom: 6px;
    color: var(--text-secondary);
}

.certificate-tags {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.tag {
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 16px;
    background-color: var(--blue-primary);
    color: var(--white);
    font-weight: bold;
}
    .tag.internal {
        background-color: var(--blue-primary);
        color: var(--white);
    }
    .tag.external {
        background-color: var(--green-primary);
    }

.certificate-image-column {
    flex: 0 0 40%;
    min-width: 0;
    padding: 16px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    align-self: flex-start;
    overflow: hidden;
}

.certificate-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--medium-gray);
}

.download-button {
    margin-top: 24px;
    background-color: var(--green-primary);
    color: var(--white);
    padding: 10px 18px;
    font-size: 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s;
}

    .download-button:hover {
        background-color: var(--green-secondary);
    }

/* ===== ENHANCED CERTIFICATE SINGLE VIEW STYLES ===== */
.certificate-single-container {
    max-width: 100%;
    margin: 0;
    padding: 24px; /* Increased from 12px */
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
}

.certificate-single-card {
    max-width: 100%;
    margin: 0;
    min-height: auto;
    width: 100%;
}

    .certificate-single-card .card-header {
        min-height: 160px; /* Increased from 140px */
        padding: 24px; /* Increased from 16px */
    }

    .certificate-single-card .card-body {
        padding: 24px; /* Increased from 16px */
    }

/* Override gradient background for certificate single view */
body.theme-option4 .certificate-single-card .card-body {
    background: white;
}

.certificate-details-grid {
    display: flex;
    gap: 32px; /* Increased from 16px */
    margin-top: 20px; /* Increased from 16px */
    flex-wrap: wrap;
}

    .certificate-details-grid .details-column {
        flex: 1;
        min-width: 320px; /* Increased from 280px */
    }

    .certificate-details-grid .certificate-image-column {
        flex: 0 0 40%;
        min-width: 0;
    }

.certificate-single-card .detail-section {
    margin-bottom: 16px;
    padding: 18px 20px;
    background-color: #fff;
    border-radius: 8px;
    border-left: 4px solid var(--blue-primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    border: 1px solid #e9ecef;
    border-left: 4px solid var(--blue-primary);
}

.certificate-single-card .certificate-section-title {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    color: var(--blue-dark);
    border-bottom: 1px solid #e9ecef;
    border-left: none;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}

.certificate-single-card .certificate-field {
    font-size: 16px;
    margin-bottom: 6px;
    color: #495057;
    line-height: 1.6;
    display: flex;
    gap: 8px;
}

    .certificate-single-card .certificate-field strong {
        color: #212529;
        font-weight: 600;
        min-width: 160px;
        flex-shrink: 0;
    }

    .certificate-single-card .certificate-field span {
        color: #495057;
        /* QC #192 (DEF-283): a long Company URL ran off the page. The value is a flex item
           next to the fixed 160px label; flex items default to min-width:auto and won't shrink
           below their content, so an unbreakable URL overflowed. min-width:0 lets it shrink and
           overflow-wrap/word-break makes the URL wrap within the card instead of clipping. */
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

.no-data {
    color: #adb5bd;
    font-style: italic;
    font-weight: 400;
}

.certificate-single-card .certificate-period {
    font-size: 16px;
    color: #495057;
    padding: 0;
    line-height: 1.6;
}

.certificate-single-card .certificate-location {
    font-size: 16px;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 0;
    padding: 0;
}

    .certificate-single-card .certificate-location i {
        color: var(--green-primary);
        font-size: 20px; /* Increased from 16px */
        flex-shrink: 0;
    }

.certificate-single-card .certificate-tags {
    display: flex;
    gap: 10px; /* Increased from 8px */
    margin-top: 20px; /* Increased from 16px */
    flex-wrap: wrap;
}

.certificate-single-card .certificate-tags .tag {
    font-size: 16px; /* Increased tag font size */
    padding: 8px 16px; /* Increased padding for larger tags */
    font-weight: 600; /* Bolder text */
}

/* SingleCertificateView - Certificate Category LARGE */
.certificate-single-card .certificate-category {
    font-size: 20px !important; /* Increased from 16px */
    font-weight: 700 !important; /* Bolder */
    letter-spacing: 0.5px !important;
}

/* SingleCertificateView - Certificate ID LARGE */
.certificate-single-card .certificate-id {
    font-size: 22px !important; /* Increased from default */
    font-weight: 700 !important; /* Bolder */
    padding: 8px 16px !important; /* More padding */
}

/* SingleCertificateView - Company Name LARGE */
.certificate-single-card .company-name {
    font-size: 28px !important; /* Increased from 16px */
    font-weight: 700 !important; /* Bolder */
    line-height: 1.3 !important;
    margin-top: 8px !important;
    margin-bottom: 12px !important; /* Reduced spacing below company name */
}

/* SingleCertificateView - Product Name LARGE */
.certificate-single-card .product-name {
    font-size: 32px !important; /* Increased from 22px in inline style */
    font-weight: 700 !important;
    line-height: 1.3 !important;
    height: auto !important; /* Override tile height for SingleCertificateView */
    min-height: auto !important;
    -webkit-line-clamp: none !important; /* No line clamping */
    display: block !important; /* Normal block display */
    overflow: visible !important;
    width: 100% !important; /* Full width of container */
    max-width: 100% !important; /* Ensure full width */
    margin-bottom: 4px !important; /* Reduced spacing between product name and type */
}

/* SingleCertificateView - Product Type */
.certificate-single-card .product-type {
    font-size: 22px !important; /* Increased from 18px */
    font-weight: 500 !important;
    line-height: 1.4 !important;
    margin-bottom: 16px !important; /* Reduced spacing after product type */
}

/* SingleCertificateView - Product Info Container - Reduced spacing */
.certificate-single-card .product-info {
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
}

.certificate-single-card .certificate-image {
    width: 100%;
    max-width: 750px; /* Increased from 650px */
    height: auto;
    border-radius: 10px; /* Increased from 8px */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Enhanced shadow for depth */
    object-fit: contain;
    margin-bottom: 20px; /* Increased from 15px - Space for download button */
    cursor: zoom-in; /* Show zoom cursor on hover */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.certificate-single-card .certificate-image:hover {
    transform: scale(1.02); /* Slight scale on hover */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

/* Magnifying Glass Icon Overlay */
.zoom-icon-overlay {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0, 174, 239, 0.9);
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    z-index: 10;
}

.zoom-icon-overlay:hover {
    background: var(--blue-dark);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Image Zoom Modal */
.image-zoom-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.95);
    animation: fadeIn 0.3s ease;
}

.zoom-modal-content {
    margin: auto;
    display: block;
    /* DEF-438 — SIZED FOR READING, NOT FOR FITTING.
       History matters here, because the obvious rule is the wrong one twice over:
         * A flat `max-height: 85vh` (the original) let the 1200px on-demand renders fill the box
           while the stored 600px thumbnail on page 0 settled short — the 23% size jump on a page
           turn that the client reported (DEF-436).
         * `min(85vh, 620px)` (the DEF-436 fix) removed the jump by capping EVERY page at the
           thumbnail's natural height. Measured: both pages 445x620, jump 0.0% — and a certificate
           displayed at 0.59x of a physical page, which the client could not read.
       The real constraint was never the box, it was that page 0 was a different resolution from
       every other page. With page 0 now rendered on demand too (DEF-438, see
       certificate-preview-pager.js) all pages are identical 1200px renders, so the box is free to
       be driven by WIDTH and to let the document run taller than the viewport and scroll — which
       is how anyone actually reads a page-sized document on a landscape screen.
       900px wide puts a US-Letter portrait page at ~1.1x physical size. The controls stay
       reachable during that scroll because .zoom-controls below is sticky — without that this
       rule would simply push them off screen, which is the DEF-438 half nobody reported. */
    width: min(92vw, 900px);
    max-width: 92vw;
    height: auto;
    background: white;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: zoomIn 0.3s ease;
}

.zoom-caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 1200px;
    text-align: center;
    color: #fff;
    padding: 16px;
    font-size: 18px;
    font-weight: 500;
}

/* CR-052 (QC #267) — "View all pages" inside the preview popup. The client asked for the control
   "under the Preview popup"; the first build put it only in the action row outside, so opening the
   popup showed page 1 with no way forward. Shared by all four views that host #imageZoomModal. */
/* DEF-438: the pager and the "View all pages" button are wrapped in this bar at runtime
   (certificate-preview-pager.js → buildControls) and pinned to the bottom of the viewport.
   Before this they were loose siblings that flowed after the image, so once the image was big
   enough to read they sat below the fold — measured 110px off screen at 1366x768 and 1024x768,
   the two commonest laptop heights, on the build that shipped. A control you have to scroll to
   find is the same defect as a control that is not there. */
.zoom-controls {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: 16px;
    /* Opaque enough that certificate text scrolling underneath never competes with the controls. */
    background: rgba(0, 0, 0, 0.92);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.zoom-allpages {
    text-align: center;
    padding: 0 16px 24px;
}

.zoom-allpages-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--blue-primary, #00AEEF);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    transition: filter 0.2s ease;
}

.zoom-allpages-link:hover,
.zoom-allpages-link:focus {
    color: #fff;
    text-decoration: none;
    filter: brightness(1.1);
}

.zoom-allpages-link:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* CR-053 (QC #267) --- the pager itself. Built at runtime by certificate-preview-pager.js and
   inserted directly ABOVE .zoom-allpages, so the popup reads: page, then pager, then the way out
   to the full document. Hidden entirely for a single-page or unreadable PDF - see the JS. */
.zoom-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 16px 8px;
}

.zoom-pager[hidden] {
    display: none;
}

.zoom-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px is the touch-target minimum; these are the controls most likely to be used on a
       tablet, which is where the client reads certificates. */
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 4px;
    background-color: var(--blue-primary, #00AEEF);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.zoom-pager-btn:hover:not(:disabled) {
    filter: brightness(1.1);
}

.zoom-pager-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.zoom-pager-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.zoom-pager-label {
    color: #fff;
    font-size: 16px;  /* project minimum - do not reduce to fit a narrow viewport */
    font-weight: 600;
    min-width: 120px;
    text-align: center;
}

/* The swap between pages is a new network request; without this a slow page turn looks like
   nothing happened at all. */
#zoomedImage.zoom-page-loading {
    opacity: 0.45;
    transition: opacity 0.15s ease;
}

@media (max-width: 480px) {
    .zoom-pager {
        gap: 10px;
    }

    .zoom-pager-label {
        min-width: 96px;
    }
}

.zoom-close {
    position: absolute;
    top: 24px;
    right: 40px;
    color: #fff;
    font-size: 48px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.zoom-close:hover,
.zoom-close:focus {
    color: var(--blue-primary);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.certificate-download-action {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
    width: 100%;
}

.certificate-download-action .action-icon {
    background: var(--blue-primary);
    color: white;
    width: 60px; /* Increased from 50px */
    height: 60px; /* Increased from 50px */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 174, 239, 0.3);
    font-size: 22px; /* Added for larger icon */
}

.certificate-download-action .action-icon:hover:not(.disabled) {
    background: var(--blue-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 174, 239, 0.4);
}

.certificate-download-action .action-icon.disabled {
    background: #ced4da;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.6;
}

.certificate-single-card .card-actions {
    margin-top: 20px; /* Increased from 16px */
    padding-top: 20px; /* Increased from 16px */
    border-top: 1px solid var(--border-color);
    justify-content: flex-end;
    gap: 16px; /* Increased from 12px */
}

.certificate-single-card .action-icon {
    width: 52px; /* Increased from 44px */
    height: 52px; /* Increased from 44px */
    font-size: 18px; /* Increased from 16px */
}

/* Certificate preview box — base rules (apply at all viewports).
   No fixed aspect-ratio: GCC cert thumbnails come in both portrait
   (Letter 8.5/11) and landscape orientations. A rigid portrait box
   correctly sized portrait certs but letterboxed landscape certs
   into tiny centered images with huge whitespace top/bottom. Letting
   the box size to the natural image dimensions handles both. The
   placeholder (no-PDF case) gets min-height so it has somewhere to sit. */
.certificate-preview-box {
    width: 100%;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f9fa;
    cursor: pointer;
    position: relative;
    display: block;
    min-height: 200px;
}

.certificate-preview-box img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}

.certificate-preview-box .preview-placeholder {
    text-align: center;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.certificate-preview-box .preview-placeholder i {
    font-size: 48px;
    color: #adb5bd;
    margin-bottom: 12px;
    display: block;
}

.certificate-preview-box .preview-placeholder p {
    font-size: 14px;
    font-weight: 600;
    color: #6c757d;
    margin: 0 0 4px 0;
}

.certificate-preview-box .preview-placeholder small {
    color: #adb5bd;
    font-size: 11px;
}

/* Tablet responsive adjustments for single view */
@media (max-width: 1024px) and (min-width: 769px) {
    .certificate-details-grid .certificate-image-column {
        flex: 0 0 38%;
        min-width: 0;
    }

    .certificate-single-card .certificate-field strong {
        min-width: 140px;
    }

    .certificate-download-action {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Mobile responsive adjustments for single view */
@media (max-width: 768px) {
    .certificate-single-container {
        padding: 8px;
    }

    .certificate-details-grid {
        flex-direction: column;
        gap: 12px;
    }

        .certificate-details-grid .certificate-image-column {
            flex: none;
            width: 100%;
            max-width: 100%;
            order: 1;
            text-align: center;
            overflow: hidden;
        }

    .certificate-single-card .certificate-image {
        max-width: 100%;
        width: 100%;
    }

    .certificate-preview-box {
        width: 100%;
        max-width: 100%;
        aspect-ratio: auto;
        height: auto;
    }

    .certificate-preview-box img {
        position: static;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .certificate-single-card .card-header {
        min-height: 120px;
        padding: 12px;
    }

    .certificate-single-card .card-body {
        padding: 12px;
    }

    .certificate-single-card .detail-section {
        padding: 12px;
        margin-bottom: 12px;
    }

    .certificate-single-card .certificate-section-title {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .certificate-single-card .certificate-field {
        flex-direction: column;
        gap: 2px;
    }

    .certificate-single-card .certificate-field strong {
        min-width: unset;
    }

    .certificate-download-action {
        max-width: 100%;
        justify-content: flex-end;
    }

    .certificate-internal-actions {
        justify-content: center !important;
    }
}

@media (max-width: 480px) {
    .certificate-single-container {
        padding: 4px;
    }

    .certificate-single-card .card-header {
        padding: 10px;
        min-height: 100px;
    }

    .certificate-single-card .card-body {
        padding: 8px;
    }

    .certificate-single-card .detail-section {
        padding: 8px;
        margin-bottom: 10px;
    }

    .certificate-single-card .certificate-section-title {
        font-size: 16px;
        margin-bottom: 6px;
    }

    .certificate-single-card .certificate-field,
    .certificate-single-card .certificate-period,
    .certificate-single-card .certificate-location {
        font-size: 16px;
    }

    .certificate-single-card .certificate-period {
        padding: 0;
    }

    .certificate-single-card .certificate-location {
        padding: 0;
    }

    .certificate-single-card .certificate-tags {
        gap: 4px;
        margin-top: 8px;
    }

    .certificate-single-card .card-actions {
        margin-top: 12px;
        padding-top: 12px;
        gap: 8px;
    }

    .certificate-single-card .action-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

/* Certificate single view specific overrides */
.certificate-single-container {
    max-width: 100%;
    margin: 0;
    padding: 8px 0;
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
}

@media (max-width: 768px) {
    .certificate-single-container {
        padding: 4px 0;
    }
}

@media (max-width: 480px) {
    .certificate-single-container {
        padding: 2px 0;
    }
}


/* ===== 17. DASHBOARD STYLES ===== */
.dashboard-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 16px;
    color: var(--blue-dark);
}

.dashboard-container {
    padding: 20px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    padding: 20px;
    box-shadow: var(--shadow);
    border-radius: 8px;
    text-align: center;
}

.stat-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 6px;
}

.stat-value {
    font-size: 28px;
    color: var(--green-secondary);
    font-weight: bold;
}

.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.action-button:hover {
    background-color: var(--blue-dark);
}

/* ===== 18. TOAST NOTIFICATIONS ===== */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--green-secondary);
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s;
    transform: translateX(100%);
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 300px;
}

    .toast.show {
        transform: translateX(0);
        opacity: 1;
    }

    .toast.error {
        background-color: #ff5252;
    }

    .toast.warning {
        background-color: #FFE9A3;
        color: var(--blue-dark);
    }

    .toast.info {
        background-color: #336699;
        color: white;
    }

    .toast i {
        font-size: 16px;
    }

/* ===== 19. ROLE-BASED VISIBILITY SYSTEM ===== */
.role-element {
    display: none !important;
}

/* Explicitly hide analyst/admin elements for external users */
.role-external .role-analyst-show,
.role-external .role-admin-show {
    display: none !important;
}

.role-public .role-public-show {
    display: block !important;
}

.role-public .role-public-hide {
    display: none !important;
}

.role-external .role-external-show {
    display: block !important;
}

.role-external .role-external-hide {
    display: none !important;
}

.role-analyst .role-analyst-show {
    display: block !important;
}

.role-analyst .role-analyst-hide {
    display: none !important;
}

.role-admin .role-admin-show {
    display: block !important;
}

.role-admin .role-admin-hide {
    display: none !important;
}

/* Override for flex and list items */
.role-public .role-public-show.btn,
.role-external .role-external-show.btn,
.role-analyst .role-analyst-show.btn,
.role-admin .role-admin-show.btn {
    display: flex !important;
}

.role-public .role-public-show.nav-item,
.role-external .role-external-show.nav-item,
.role-analyst .role-analyst-show.nav-item,
.role-admin .role-admin-show.nav-item {
    display: list-item !important;
}

/* Override for table cells and headers */
.role-public .role-public-show.actions-cell,
.role-public .role-public-show.actions-col,
.role-public th.role-public-show,
.role-public td.role-public-show {
    display: table-cell !important;
}

.role-external .role-external-show.actions-cell,
.role-external .role-external-show.actions-col,
.role-external th.role-external-show,
.role-external td.role-external-show {
    display: table-cell !important;
}

.role-analyst .role-analyst-show.actions-cell,
.role-analyst .role-analyst-show.actions-col,
.role-analyst th.role-analyst-show,
.role-analyst td.role-analyst-show {
    display: table-cell !important;
}

.role-admin .role-admin-show.actions-cell,
.role-admin .role-admin-show.actions-col,
.role-admin th.role-admin-show,
.role-admin td.role-admin-show {
    display: table-cell !important;
}

/* Maintain nav bar formatting for public users with no visible items */
.role-public .nav-wrapper {
    min-height: 50px;
    background-color: var(--white);
}

.role-public .main-nav::after {
    content: '';
    display: block;
    color: var(--white);
    height: 50px;
}

/* ===== 20. THEME SYSTEM ===== */

/* Theme Option 1: Nature */
body.theme-option1 {
    --theme-primary: var(--blue-dark);
    --theme-secondary: var(--green-secondary);
}

.header-option1 {
    background-image: url('../img/header-nature1.png');
}

    .header-option1::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 8px;
        background-color: var(--blue-dark);
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
        z-index: 1;
    }

/* Theme Option 2: Green Bar */
body.theme-option2 {
    --theme-primary: var(--green-primary);
    --theme-secondary: var(--green-secondary);
}

.header-option2 {
    background-image: url('../img/header-nature1.png');
}

    .header-option2::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 8px;
        background-color: var(--green-primary);
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);
        z-index: 1;
    }

/* Theme Option 3: Leaf Theme */
body.theme-option3 {
    --theme-primary: var(--green-secondary);
    --theme-secondary: var(--green-primary);
}

.header-option3 {
    background-image: url('../img/leaf-header.png');
}

    .header-option3::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 10px;
        background-color: var(--green-secondary);
        z-index: 1;
    }

body.theme-option3 .certificate-single-container .certificate-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 12px;
}

body.theme-option3 .certificate-single-container .certificate-image-column {
    order: -1;
    width: 100%;
    text-align: center;
}

    body.theme-option3 .certificate-single-container .certificate-image-column img {
        max-width: 300px;
        margin: 0 auto;
    }

body.theme-option3 .certificate-single-container .details-column {
    width: 100%;
}

/* Theme Option 4: Blue Theme - Complete Styling */
body.theme-option4 {
    --theme-primary: var(--blue-dark);
    --theme-secondary: var(--blue-primary);
}

.header-option4 {
    background-image: url('../img/leaf-header-blue.png');
}

    .header-option4::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 10px;
        background-color: var(--blue-dark);
        z-index: 1;
    }

/* Option 4 Certificate Grid Layout */
body.theme-option4 .certificates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
    align-items: stretch;
}

/* Option 4 Certificate Card Styling */
body.theme-option4 .certificate-card {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-strong);
    transition: var(--transition);
    border: none;
    position: relative;
    animation: slideUp 0.6s ease-out;
    display: flex;
    flex-direction: column;
    height: 100%;
}

    body.theme-option4 .certificate-card:hover {
        transform: translateY(-6px) scale(1.02);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    }

/* Option 4 Card Header - Blue with Green Wave */
body.theme-option4 .card-header {
    background: linear-gradient(135deg, var(--blue-dark) 0%, #1a4b8c 100%);
    color: var(--white);
    /*padding: 20px;*/
    position: relative;
   /* min-height: 200px;*/
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
}

    body.theme-option4 .card-header::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 15px;
        background: var(--green-light);
        border-radius: 50% 50% 0 0 / 100% 100% 0 0;
        opacity: 0.9;
        z-index: 1;
    }

body.theme-option4 .header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 2;
}

body.theme-option4 .certificate-category {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0.9;
    line-height: 1.2;
    max-width: 70%;
    color: var(--white);
}

body.theme-option4 .certificate-id {
    background: var(--white);
    color: var(--blue-dark);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 0 0 2px rgba(184, 225, 98, 0.3);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Option 4 Company Name in Header */
body.theme-option4 .company-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--white);
    margin-top: 10px;
    line-height: 1.3;
    padding: 8px 0 8px 10px;
    border-left: 3px solid var(--white);
    text-align: left;
    width: 100%;
    position: relative;
    z-index: 2;
}

/* Option 4 Card Body - Gradient Background */
body.theme-option4 .card-body {
    background: linear-gradient(135deg, transparent 0%, rgba(184, 225, 98, 0.05) 20%, transparent 40%), linear-gradient(-135deg, transparent 60%, rgba(184, 225, 98, 0.05) 80%, transparent 100%);
    padding: 20px;
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Option 4 Product Information */
body.theme-option4 .product-info {
    margin-bottom: 0px;
}

/* Theme Option 4 product name styling for certificate tiles only */
body.theme-option4 .certificate-card .product-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--blue-dark);
    margin-bottom: 12px;
    margin-top: 5px;
    line-height: 1.3;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: 8px;
    height: 170px; /* Fixed height for consistency across certificate tiles only */
    display: -webkit-box;
    -webkit-line-clamp: 5; /* Fewer lines due to larger font size and 170px height */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    white-space: normal;
    word-wrap: break-word;
}

body.theme-option4 .product-type {
    font-size: 18px;
    color: var(--text-secondary);
    font-style: italic;
    padding: 4px 8px;
    display: inline-block;
    margin-bottom: 8px;
}

/* Option 4 Certificate Details */
body.theme-option4 .certificate-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

body.theme-option4 .certificate-period {
    background: rgba(255, 255, 255, 0.8);
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 6px;
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 500;
}

    body.theme-option4 .certificate-period strong {
        color: var(--text-color);
        display: block;
        /* margin-bottom: 4px;*/
    }

body.theme-option4 .certificate-location {
    background: rgba(255, 255, 255, 0.8);
    padding: 0px 0px 14px 0px;
    border-radius: 6px;
    margin-bottom: 16px;
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

    body.theme-option4 .certificate-location i {
        color: var(--green-primary);
    }

/* Option 4 Action Icons */
body.theme-option4 .card-actions {
    position: absolute;
    bottom: 5px;
    right: 15px;
    display: flex;
    gap: 8px;
    z-index: 10;
    /*background: rgba(255, 255, 255, 0.95);*/
    padding: 6px;
    /*  border-radius: 8px;*/
    /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);*/
}

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

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

/* ===== 21. DESIGN CONFIG PANEL ===== */
.design-config-wrapper {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 10005;
    font-family: Arial, sans-serif;
}

.config-toggle-button {
    background-color: var(--green-primary);
    color: white;
    border: none;
    padding: 8px 12px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: var(--shadow);
    width: 100%;
    transition: var(--transition);
}

    .config-toggle-button:hover {
        background-color: var(--green-secondary);
        transform: translateY(-1px);
    }

.config-panel-content {
    background: white;
    border: 1px solid #ccc;
    padding: 12px 16px;
    border-radius: 6px;
    margin-top: 8px;
    display: none;
    width: 240px;
    box-shadow: var(--shadow);
    max-height: 400px;
    overflow-y: auto;
    z-index: 10006;
}

    .config-panel-content h4 {
        margin-bottom: 12px;
        color: var(--blue-dark);
        font-size: 16px;
    }

    .config-panel-content select {
        width: 100%;
        padding: 6px 10px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        margin-bottom: 12px;
        font-size: 16px;
    }

    .config-panel-content label {
        display: block;
        margin-bottom: 4px;
        font-size: 16px;
        font-weight: 500;
    }

    .config-panel-content > div {
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
    }

        .config-panel-content > div:last-child {
            border-bottom: none;
        }

/* ===== 22. FOOTER ===== */
footer {
    background-color: var(--white);
    padding: 25px 40px;
    font-size: 16px;
    color: #888;
    margin-top: 40px;
    border-top: 1px solid var(--border-color);
    width: 100%;
    clear: both;
}

.footer-content {
    max-width: 1800px;
    margin: 0 auto;
    text-align: center;
}

    .footer-content:before,
    .footer-content:after {
        content: "";
        display: table;
    }

    .footer-content:after {
        clear: both;
    }

.disclaimer {
    padding: 10px;
    font-size: 16px;
    line-height: 1.5;
    border-radius: 4px;
    margin: 0 auto 15px auto;
    max-width: 85%;
    width: 100%;
    display: block;
    clear: both;
    position: relative;
}

    .disclaimer a {
        color: var(--blue-primary);
        text-decoration: underline;
    }

        .disclaimer a:hover {
            text-decoration: underline;
        }

.footer-links {
    display: block;
    clear: both;
    text-align: center;
    width: 100%;
    margin: 15px auto 0 auto;
    position: relative;
}

    .footer-links a {
        color: #666;
        text-decoration: none;
        margin: 0 15px;
        display: inline;
        transition: color 0.3s ease;
    }

        .footer-links a:hover {
            color: var(--blue-primary);
        }

/* ===== 23. ANIMATIONS ===== */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

    100% {
        transform: rotate(360deg);
    }
}

/* ===== 24. RESPONSIVE BREAKPOINTS ===== */

/* ===== MOBILE & TABLET NAVIGATION BREAKPOINT ===== */
@media (max-width: 1024px) {
    /* Hide nav bar entirely for anonymous users on mobile/tablet — no nav items to show */
    .nav-wrapper.nav-anon {
        display: none;
    }

    /* Navigation becomes mobile/tablet */
    .mobile-toggle {
        display: block;
        position: relative;
        z-index: 1001;
    }

    .main-nav {
        position: relative;
        padding: 0 24px;
        min-height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: var(--white);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        z-index: 10001;
        border-top: 1px solid var(--border-color);
        overflow-y: auto;
        padding-top: 80px;
    }

        .nav-links.mobile-open {
            display: flex;
        }

    .main-nav .search-bar {
        display: none;
    }

    .nav-item {
        width: 100%;
        border-bottom: 1px solid var(--border-color);
    }

    .nav-link {
        padding: 15px 20px;
        border-bottom: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        font-size: 16px;
        min-height: 48px;
    }

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

    /* Mobile/Tablet submenu adaptations */
    .nav-item .submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background-color: rgba(0, 174, 239, 0.05);
        border-radius: 0;
        min-width: auto;
        display: none;
        margin-left: 0;
        border-left: 3px solid var(--blue-primary);
        padding: 0;
    }

    .nav-item:hover .submenu {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .nav-item.mobile-open .submenu {
        display: block;
    }

    .submenu > a {
        padding: 12px 20px;
        font-size: 16px;
        color: var(--text-color);
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        display: block;
        background-color: transparent;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

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

    /* Mobile/Tablet nested submenu items */
    .submenu .submenu-item {
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .submenu .submenu-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 15px;
        color: var(--text-color);
        cursor: pointer;
        font-size: 16px;
        transition: var(--transition);
        background-color: rgba(0, 0, 0, 0.02);
        border: none;
        width: 100%;
        text-align: left;
        min-height: 44px;
    }

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

        .submenu .submenu-toggle .toggle-icon {
            transition: transform 0.3s ease;
            font-size: 16px;
        }

        .submenu .submenu-toggle.mobile-open .toggle-icon {
            transform: rotate(90deg);
        }

    .submenu .nested-submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background-color: rgba(0, 174, 239, 0.03);
        border-left: 3px solid var(--green-primary);
        margin-left: 20px;
        border-radius: 0;
        min-width: auto;
        display: none;
        padding: 0;
    }

        .submenu .nested-submenu.mobile-open {
            display: block;
        }

        .submenu .nested-submenu a {
            padding: 8px 25px;
            font-size: 16px;
            color: var(--text-secondary);
            display: block;
            border-bottom: 1px solid rgba(0, 0, 0, 0.03);
            min-height: 40px;
            display: flex;
            align-items: center;
        }

            .submenu .nested-submenu a:hover {
                background-color: rgba(146, 200, 62, 0.1);
                color: var(--green-secondary);
            }

    /* Mobile/Tablet dropdown icon styling */
    .nav-link .dropdown-icon {
        transition: transform 0.3s ease;
        margin-left: auto;
    }

    .nav-item.mobile-open .nav-link .dropdown-icon {
        transform: rotate(180deg);
    }

    /* Page layout adjustments */
    .page-container {
        padding: 0 24px;
    }

    .search-bar {
        width: 100%;
        margin-top: 8px;
    }

    .certificates-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 16px;
    }

    .main-container {
        flex-direction: column;
    }

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

    .sidebar.mobile-open {
        overflow-y: auto;
    }

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

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

    /* Show when mobile-open on tablet/mobile */
    .sidebar.mobile-open .search-bar {
        display: block;
    }

    .sidebar.mobile-open .filters-header,
    .sidebar.mobile-open .filter-panel {
        display: block;
        padding: 10px 15px;
    }

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

    body.theme-option4 .certificates-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    /* Tablet-specific touch targets */
    .nav-link {
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: 15px 20px;
        font-size: 16px;
    }

    .submenu > a {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 12px 20px;
        font-size: 16px;
    }

    .submenu .submenu-toggle {
        min-height: 44px;
        padding: 8px 15px;
        font-size: 16px;
    }

    .submenu .nested-submenu a {
        min-height: 30px;
        display: flex;
        align-items: center;
        padding: 8px 25px;
        font-size: 16px;
    }

    /* Better visual hierarchy for tablet */
    .submenu {
        border-left: 4px solid var(--blue-primary);
    }

        .submenu .nested-submenu {
            border-left: 4px solid var(--green-primary);
            margin-left: 20px;
        }

 
}

/* ===== TABLET ONLY STYLES ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Keep header layout more spacious for tablet */
    .header-middle {
        min-height: 200px;
        padding: 10px 0;
    }

    .main-logo {
        height: 180px;
        width: auto;
    }

    .logo-text {
        font-size: 32px;
    }

    .logo-subtext {
        font-size: 20px;
    }
}

/* DEF-201 (QC #175): mid-size desktop / small-laptop gap.
   The default .main-logo is 280px which is sized for ≥1440px displays.
   The 769–1024 tablet rule above scales to 180px. Between 1025 and 1440
   the logo stayed at 280px and the .logo-text-group's 300px min-width
   forced the layout to wrap awkwardly — the client's "narrow/distorted"
   report. This rule fills the gap with proportional intermediate sizes. */
@media (min-width: 1025px) and (max-width: 1440px) {
    .main-logo {
        height: 220px;
        width: auto;
    }

    .logo-text {
        font-size: 36px;
    }

    .logo-subtext {
        font-size: 24px;
    }

    /* Two-column certificate grid for tablet */
    .certificates-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
        padding: 0 16px;
    }

    /* Tablet-specific spacing */
    .page-container {
        padding: 0 24px;
    }

    .main-content {
        padding: 16px;
    }

    /* Tablet spacing adjustments */
    .nav-links {
        padding-top: 80px; /* More space for tablet */
    }

    .mobile-nav-close {
        top: 20px;
        right: 24px;
        width: 56px;
        height: 56px;
        font-size: 24px;
    }
}

/* ===== MOBILE ONLY STYLES ===== */
@media (max-width: 768px) {
    /* Header adjustments - MOBILE ONLY */
    .header-top {
        justify-content: flex-end;
        align-items: flex-end;
    }

    .header-middle {
        height: auto;
        min-height: 120px;
        padding: 8px 4px;
        overflow: visible;
    }

    .header-container {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 0;
        min-height: 120px;
    }

    .logo-area {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        text-align: left;
        width: 100%;
        justify-content: center;
        max-width: 100%;
    }

    .logo-img {
        order: 1;
        flex-shrink: 0;
    }

    .logo-text-group {
        order: 2;
        text-align: left;
        width: auto;
        flex: 1;
        min-width: 180px;
    }

    .main-logo {
        height: 100px;
        max-width: 100px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .logo-text {
        font-size: 22px;
        line-height: 1.1;
    }

    .logo-subtext {
        font-size: 16px;
        max-width: 100%;
        line-height: 1.2;
    }

    /* Mobile navigation adjustments */
    .main-nav {
        padding: 0 12px;
    }

    .nav-links {
        padding-top: 60px;
    }

    .nav-link {
        padding: 18px 20px;
        font-size: 18px;
        min-height: 56px;
        justify-content: space-between;
    }

    /* Page layout adjustments */
    .page-container {
        padding: 0 12px;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 15px 12px;
    }

    .page-actions {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
    }

        .page-actions .btn {
            flex: 1;
            min-width: 120px;
            justify-content: center;
        }

    /* MOBILE FILTER SYSTEM */
    .sidebar {
        padding: 0;
        border-bottom: 1px solid var(--border-color);
    }

    .sidebar.mobile-open {
        overflow-y: auto;
    }

    /* Mobile filter toggle - ALWAYS VISIBLE */
    .mobile-filter-toggle {
        display: flex !important;
    }

    /* Hide filter content by default */
    .sidebar:not(.mobile-open) .search-bar,
    .sidebar:not(.mobile-open) .filters-header,
    .sidebar:not(.mobile-open) .filter-panel,
    .sidebar:not(.mobile-open) .filter-content {
        display: none;
    }

    /* Show when mobile-open */
    .sidebar.mobile-open .search-bar {
        display: block;
    }

    .sidebar.mobile-open .filters-header,
    .sidebar.mobile-open .filter-panel {
        display: block;
        padding: 10px 15px;
    }

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

    .sidebar.mobile-open .filter-content {
        display: block;
        max-height: 200px;
        overflow-y: auto;
    }

    /* Padding on .search-bar would shift the input inward while leaving the
       absolute-positioned .search-icon at left:12px — the icon ends up sitting in
       the search-bar's padding instead of inside the input. Use a bottom border
       only; the sidebar's own padding handles horizontal inset. */
    .sidebar.mobile-open .search-bar {
        border-bottom: 1px solid var(--border-color);
    }

    .filter-header {
        padding: 12px;
        font-size: 16px;
    }

    .filter-content {
        padding: 0px 12px;
        max-height: 200px;
    }

    /* Certificate grid mobile */
    .certificates-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 0 8px;
    }

    .certificate-card {
        margin: 0;
        min-height: auto;
    }

    .main-content {
        width: 100%;
        padding: 8px;
    }

    /* Forms and buttons mobile-friendly */
    .form-group {
        margin-bottom: 16px;
    }

    .form-input, .form-select, .form-textarea {
        padding: 12px 15px;
        font-size: 16px; /* Prevent zoom on iOS */
        min-height: 44px;
    }

    .btn {
        min-height: 44px;
        padding: 12px 20px;
        font-size: 16px;
    }

    .certificate-info {
        padding: 12px;
    }

    .card-header {
        padding: 12px;
        min-height: 90px;
    }

    /* Toast notification mobile */
    .toast {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
        width: auto;
    }

    /* Stats grid mobile */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Footer mobile */
    footer {
        padding: 20px 15px;
    }

    .footer-links a {
        margin: 0 8px;
    }

    /* Search and filter mobile */
    .search-filter-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .search-box {
        width: 100%;
    }

    .search-box input {
        padding: 10px 10px 10px 40px;
    }

    .search-icon {
        left: 12px;
        font-size: 14px;
    }

    . /*results-header {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
        padding: 0 8px;
    }*/
    .results-header {
        flex-direction: column;
        gap: 12px;
        align-items: center;
        padding: 20px 8px 0 8px;
    }

    .results-count {
        align-self: flex-start;
        text-align: left;

    }


    .sort-controls {
        /*justify-content: stretch;
        width: 100%;*/
        justify-content: flex-end;
        /*width: 100%;*/
        text-align: right;
    }

    .sort-dropdown-button {
        min-width: 100%;
        padding: 12px 15px;
        font-size: 16px;
    }

    .sort-dropdown-content {
        left: 0;
        right: 0;
        width: 100%;
    }

    .sort-label {
        text-align: right;
    }

    .sort-dropdown {
        margin-left: auto;
    }

    /* Theme mobile adjustments */
    body.theme-option4 .card-header {
        min-height: 240px;
        padding: 16px;
    }

    body.theme-option4 .header-row {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    body.theme-option4 .certificate-category {
        max-width: 100%;
    }

    body.theme-option4 .company-name {
        margin-top: 5px;
        padding: 6px 0 6px 8px;
        font-size: 18px;
    }

    body.theme-option4 .card-body {
        padding: 10px;
    }

    body.theme-option4 .certificate-card .product-name {
        font-size: 18px;
        padding: 10px;
        height: 170px; /* Fixed height for certificate tiles only */
        display: -webkit-box;
        -webkit-line-clamp: 6; /* Adjusted for 170px height and mobile */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
    }

    body.theme-option4 .certificate-period,
    body.theme-option4 .certificate-location {
        padding: 0px 8px;
        font-size: 16px;
    }

    /* Critical Mobile Navigation Fix - ensure correct submenu toggling */
    .nav-item .submenu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .nav-item.mobile-open .submenu {
        max-height: 500px;
    }

    .submenu .nested-submenu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

        .submenu .nested-submenu.mobile-open {
            max-height: 400px;
        }

    body.theme-option4 .card-actions {
        position: static;
        background: none;
        box-shadow: none;
        padding: 0;
        margin-top: 5px;
        /*border-top: 1px solid rgba(0, 0, 0, 0.1);*/
        padding: 15px;
        justify-content: right;
    }

    body.theme-option4 .card-body {
        padding-bottom: 0px; /* Reset padding on mobile */
    }

    body.theme-option4 .certificate-details {
        margin-bottom: 0px; /* Reset margin on mobile */
        min-height: 100px;
    }
}

/* ===== SMALL MOBILE BREAKPOINT ===== */
@media (max-width: 480px) {
    .header-top {
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
        gap: 8px;
        padding: 5px 16px;
        min-height: 36px;
    }

    .header-middle {
        min-height: 130px;
        padding: 6px 2px;
    }

    .header-container {
        gap: 5px;
        padding: 0;
    }

    .logo-area {
        gap: 5px;
        flex-direction: column;
        text-align: center;
    }

    .main-logo {
        height: 80px;
        max-width: 80px;
        order: 1;
        object-fit: contain;
    }

    .logo-text-group {
        order: 2;
        min-width: 100%;
        align-items: center;
        text-align: center;
        width: 100%;
        margin-bottom: 8px;
    }

    .logo-text {
        font-size: 20px;
    }

    .logo-subtext {
        font-size: 16px;
    }

    .page-container {
        padding: 0 8px;
    }

    .main-content {
        padding: 4px;
    }

    .user-controls {
        width: 100%;
        justify-content: flex-end;
    }

    .page-header, .page-content {
        padding: 8px;
    }

    /* Certificate cards ultra-compact */
    .certificate-info {
        padding: 8px;
    }

    .card-header {
        padding: 8px;
        min-height: 80px;
    }

    .company-name {
        font-size: 16px;
        line-height: 1.3;
        margin-bottom: 6px;
    }

    .product-name {
        font-size: 16px;
        line-height: 1.2;
        margin-bottom: 8px;
    }

    /* Action buttons touch-friendly */
    .certificate-actions {
        padding: 5px;
        gap: 12px;
        justify-content: center;
    }

    .action-button, .action-icon {
        min-width: 44px;
        min-height: 44px;
        padding: 12px;
        font-size: 16px;
    }

    .card-actions {
        gap: 10px;
        justify-content: space-around;
        padding: 0px;
    }

    .sidebar {
        max-height: 50px;
    }

    /* When opened, allow sidebar to expand and show filters/search on small portrait phones */
    .sidebar.mobile-open {
        max-height: none;
    }

    .mobile-filter-toggle {
        padding: 12px 16px;
        font-size: 16px;
    }

    .footer-links a {
        display: block;
        margin: 5px auto;
        width: auto;
        text-align: center;
    }

    .disclaimer {
        padding: 5px 0px;
        font-size: 16px;
        margin-bottom: 5px;
    }

    /* Fix mobile navigation for small screens */
    .nav-links {
        padding-top: 80px; /* More space for close button */
    }

    .nav-link {
        padding: 20px;
        font-size: 18px;
        min-height: 60px; /* Larger touch targets */
    }

    /* Fix dropdown arrows and submenus */
    .dropdown-icon {
        font-size: 18px;
        margin-left: auto;
    }

    .mobile-nav-close {
        top: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    /* Critical Small Mobile Navigation Improvements */
    .nav-item .submenu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .nav-item.mobile-open .submenu {
        max-height: 600px;
    }

    .submenu .nested-submenu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

        .submenu .nested-submenu.mobile-open {
            max-height: 450px;
        }

    /* Ensure touch targets are adequate */
    .nav-link,
    .submenu > a,
    .submenu .submenu-toggle {
        min-height: 56px;
        padding: 12px 20px;
        font-size: 16px;
        display: flex;
        align-items: center;
    }

    .submenu .nested-submenu a {
        min-height: 30px;
        padding: 8px 25px;
        font-size: 16px;
        display: flex;
        align-items: center;
    }

    body.theme-option4 .certificate-card {
        min-height: auto; /* Allow flexible height on small screens */
    }

    body.theme-option4 .action-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

/* ===== 25. PRINT STYLES ===== */
@media print {
    .mobile-toggle,
    .search-bar,
    .card-actions,
    .action-buttons,
    .config-panel-content,
    .design-config-wrapper,
    .toast,
    .user-controls,
    .nav-wrapper,
    .breadcrumbs,
    .page-actions,
    .mobile-filter-toggle {
        display: none !important;
    }

    body {
        background: white;
        color: black;
        font-size: 16px;
    }

    .page-container {
        max-width: 100%;
        padding: 0;
    }

    .main-content {
        padding: 0;
    }

    .certificates-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        page-break-inside: avoid;
    }

    .certificate-card {
        break-inside: avoid;
        margin-bottom: 15px;
        box-shadow: none;
        border: 1px solid #333;
    }

    .card-header {
        background: #f0f0f0 !important;
        color: #000 !important;
    }

    .company-name,
    .product-name,
    .certificate-category {
        color: #000 !important;
    }

    footer {
        page-break-before: avoid;
        border-top: 1px solid #333;
        padding: 10px 0;
    }
}

/* ===== 26. ACCESSIBILITY & PERFORMANCE ===== */

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .certificate-card {
        animation: none;
    }
}

/* High DPI Display Support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .main-logo {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Remove hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
    .certificate-card:hover,
    .btn:hover,
    .nav-link:hover {
        transform: none !important;
        background-color: inherit !important;
    }

    .btn:active {
        transform: scale(0.98);
        opacity: 0.8;
    }

    .certificate-card:active {
        transform: scale(0.99);
    }

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

/* ===== 27. UTILITY CLASSES ===== */

/* Display utilities */
.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

.d-flex {
    display: flex !important;
}

.d-grid {
    display: grid !important;
}

/* Text utilities */
.text-center {
    text-align: center;
}

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

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

/* Spacing utilities */
.m-0 {
    margin: 0;
}

.mt-1 {
    margin-top: var(--space-xs);
}

.mt-2 {
    margin-top: var(--space-sm);
}

.mt-3 {
    margin-top: var(--space-md);
}

.mt-4 {
    margin-top: var(--space-lg);
}

.mb-1 {
    margin-bottom: var(--space-xs);
}

.mb-2 {
    margin-bottom: var(--space-sm);
}

.mb-3 {
    margin-bottom: var(--space-md);
}

.mb-4 {
    margin-bottom: var(--space-lg);
}

.p-0 {
    padding: 0;
}

.p-1 {
    padding: var(--space-xs);
}

.p-2 {
    padding: var(--space-sm);
}

.p-3 {
    padding: var(--space-md);
}

.p-4 {
    padding: var(--space-lg);
}

/* Width utilities */
.w-100 {
    width: 100%;
}

.w-75 {
    width: 75%;
}

.w-50 {
    width: 50%;
}

.w-25 {
    width: 25%;
}

/* Flexbox utilities */
.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

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

.flex-1 {
    flex: 1;
}

/* Color utilities */
.text-primary {
    color: var(--blue-primary);
}

.text-secondary {
    color: var(--text-secondary);
}

.text-success {
    color: var(--green-primary);
}

.text-warning {
    color: var(--warning);
}

/* Border utilities */
.border {
    border: 1px solid var(--border-color);
}

.border-0 {
    border: 0;
}

.rounded {
    border-radius: var(--border-radius-md);
}

.rounded-lg {
    border-radius: var(--border-radius-lg);
}

/* Shadow utilities */
.shadow {
    box-shadow: var(--shadow);
}

.shadow-lg {
    box-shadow: var(--shadow-strong);
}

.shadow-none {
    box-shadow: none;
}

/* Component state utilities */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.sr-only,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus utilities for accessibility */
.focus-visible:focus {
    outline: 2px solid var(--blue-primary);
    outline-offset: 2px;
}

/* ===== END OF CSS ===== */


/* Review Instructions Styles */
.review-instructions-container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.instructions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--primary-light);
}

    .instructions-header h3 {
        margin: 0;
        color: var(--primary);
        font-weight: 600;
    }

        .instructions-header h3 i {
            margin-right: 0.5rem;
            color: var(--primary);
        }

.toggle-instructions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.instructions-content {
    padding: 1.5rem;
    max-height: 600px;
    overflow-y: auto;
    transition: max-height 0.3s ease;
}

    .instructions-content.collapsed {
        max-height: 0;
        padding: 0 1.5rem;
        overflow: hidden;
    }

.review-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-light);
}

    .review-section:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }

.section-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

    .section-header span {
        font-size: 16px;
        margin-right: 0.5rem;
    }

    .section-header h4 {
        margin: 0;
        color: var(--text-primary);
        font-weight: 600;
        font-size: 16px;
    }

.steps-container h5 {
    color: var(--text-primary);
    margin: 1rem 0 0.5rem 0;
    font-weight: 600;
}

.steps-container ol {
    margin-left: 1rem;
}

.steps-container li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.steps-container ul {
    margin: 0.5rem 0;
}

.category-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
}

    .tag.design-fix {
        background: #e8f5e8;
        color: #2d6a2d;
        border: 1px solid #a8d4a8;
    }

    .tag.functional-req {
        background: #e8f2ff;
        color: #1e4d6b;
        border: 1px solid #a8c8e8;
    }

    .tag.content-correction {
        background: #fff3e0;
        color: #7d4f00;
        border: 1px solid #e0b366;
    }

    .tag.usability-concern {
        background: #fef2e8;
        color: #8b4000;
        border: 1px solid #e8a566;
    }

.screen-sections ul {
    list-style-type: none;
    padding-left: 1rem;
}

.screen-sections li {
    padding: 0.25rem 0;
    position: relative;
}

    .screen-sections li:before {
        content: "→";
        position: absolute;
        left: -1rem;
        color: var(--primary);
        font-weight: bold;
    }

.feedback-table-container {
    overflow-x: auto;
    margin-top: 1rem;
}

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

    .feedback-template-table th,
    .feedback-template-table td {
        padding: 0.75rem;
        text-align: left;
        border: 1px solid var(--border);
    }

    .feedback-template-table th {
        background: var(--surface-dark);
        font-weight: 600;
        color: var(--text-primary);
    }

    .feedback-template-table .example-row {
        background: var(--surface-light);
    }

.status {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
}

    .status.open {
        background: #fef2e8;
        color: #8b4000;
    }

    .status.in-progress {
        background: #e8f2ff;
        color: #1e4d6b;
    }

    .status.resolved {
        background: #e8f5e8;
        color: #2d6a2d;
    }

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .instructions-header {
        padding: 0.75rem 1rem;
    }

    .instructions-content {
        padding: 1rem;
    }

    .category-tags {
        flex-direction: column;
        align-items: flex-start;
    }

    .feedback-template-table {
        font-size: 16px;
    }

        .feedback-template-table th,
        .feedback-template-table td {
            padding: 0.5rem;
        }
}


/* login Styles*/
/*
.link {
    color: #5F5F5F;
    text-align: right;
    font-size: 16px;
    display: block;
    cursor: pointer;
    margin-top: 0.5rem;
}
.btn-lime {
    background-color: #92c83e;
}

    .btn-lime:hover {
        background-color: #7bb82e;
    }
*/

/* View Toggle Controls */
.view-controls {
    display: flex;
    justify-content: flex-end;
    margin: 15px 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

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

.toggle-btn {
    background: #fff;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 16px;
    color: #666;
    transition: all 0.3s ease;
    border-right: 1px solid #ddd;
}

    .toggle-btn:last-child {
        border-right: none;
    }

    .toggle-btn.active {
        background: #2c5530;
        color: white;
    }

    .toggle-btn:hover:not(.active) {
        background: #f5f5f5;
    }

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

/* View Container Management */
.view-container {
    transition: opacity 0.3s ease;
}

    .view-container:not(.active) {
        display: none !important;
    }

/* Table View Styles */
.table-wrapper {
    overflow-x: auto;
    margin: 0 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.certificates-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    min-width: 1200px;
}

    .certificates-table th,
    .certificates-table td {
        padding: 12px 8px;
        text-align: left;
        border-bottom: 1px solid #eee;
        font-size: 16px;
        vertical-align: middle;
    }

    .certificates-table th {
        background: #f8f9fa;
        font-weight: 600;
        color: #333;
        position: sticky;
        top: 0;
        z-index: 10;
    }

        .certificates-table th:first-child {
            width: 40px;
            text-align: center;
        }

.table-row {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .table-row:hover {
        background-color: #f8f9fa;
    }

.cert-number {
    font-weight: 600;
    color: #2c5530;
}

.product-name {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
}

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

.tag {
    background: #e8f5e8;
    color: #2c5530;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 16px;
}

.table-actions {
    display: flex;
    gap: 4px;
    justify-content: center;
}

    .table-actions .action-btn {
        padding: 6px 8px;
        border: none;
        background: none;
        border-radius: 4px;
        cursor: pointer;
        color: #666;
        font-size: 16px;
        transition: all 0.2s ease;
    }

        .table-actions .action-btn:hover.download {
            background: rgba(44, 85, 48, 0.1);
            color: #2c5530;
        }

        .table-actions .action-btn:hover.view {
            background: rgba(0, 123, 255, 0.1);
            color: #007bff;
        }

.multi-select-actions {
    display: none;
    align-items: center;
    gap: 15px;
    background: #f8f9fa;
    padding: 12px 20px;
    border-top: 1px solid #ddd;
    margin: 0 20px;
    border-radius: 0 0 8px 8px;
}

    .multi-select-actions.active {
        display: flex;
    }

/* Hide regular export buttons when multi-select is active */
.export-options.hidden-on-select {
    display: none;
}

.results-header-controls.multi-select-mode .export-controls {
    display: none;
}

.selected-count {
    font-weight: 600;
    color: #333;
}

.bulk-action-btn {
    background: #2c5530;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s ease;
}

    .bulk-action-btn:hover {
        background: #234428;
    }

    .bulk-action-btn i {
        margin-right: 6px;
    }

/* Mobile table responsiveness */
@media (max-width: 768px) {
    .view-controls {
        margin: 10px;
    }

    .toggle-btn {
        padding: 6px 12px;
        font-size: 16px;
    }

    .table-wrapper {
        margin: 0 10px;
    }

    .certificates-table th,
    .certificates-table td {
        padding: 8px 4px;
        font-size: 16px;
    }

    .multi-select-actions {
        flex-direction: column;
        gap: 10px;
        margin: 0 10px;
    }

    .bulk-action-btn {
        width: 100%;
    }
}

/* Certificate Tile View External */

/* Option A: Inline Summary with Expandable Dropdown */
.product-ids-inline {
    position: relative;
    min-width: 180px;
}

.ids-summary {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--white);
    transition: all 0.2s;
    font-size: 16px;
}

    .ids-summary:hover {
        background: var(--light-gray);
        border-color: var(--blue-primary);
    }

.summary-text {
    flex: 1;
    font-size: 16px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

    .summary-text i {
        color: var(--blue-primary);
        font-size: 16px;
    }

.expand-btn {
    background: var(--blue-primary);
    color: var(--white);
    border: none;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s;
}

    .expand-btn:hover {
        background: var(--blue-dark);
    }

.ids-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    display: none;
    max-height: 400px;
    overflow-y: auto;
    min-width: 300px;
}

    .ids-dropdown.show {
        display: block;
        animation: dropdownFadeIn 0.2s ease-out;
    }

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-header {
    background: var(--light-gray);
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 16px;
    color: var(--blue-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 6px 6px 0 0;
}

.close-dropdown-btn {
    background: none;
    border: none;
    font-size: 16px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    transition: all 0.2s;
}

    .close-dropdown-btn:hover {
        background: var(--border-color);
        color: var(--text-color);
    }

.dropdown-content {
    padding: 12px;
}

.id-type-section {
    margin-bottom: 12px;
}

    .id-type-section:last-of-type {
        margin-bottom: 8px;
    }

.id-type-label {
    font-weight: bold;
    font-size: 16px;
    color: var(--blue-dark);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .id-type-label::before {
        content: '';
        width: 3px;
        height: 12px;
        background: var(--green-primary);
        border-radius: 2px;
    }

.id-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.id-tag-small {
    background: var(--green-secondary);
    color: var(--white);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 16px;
    font-family: monospace;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    user-select: none;
}

    .id-tag-small:hover {
        background: var(--green-primary);
        transform: translateY(-1px);
    }

    .id-tag-small.copied {
        background: var(--blue-primary);
        transform: scale(1.05);
    }

.copy-all-actions {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.copy-all-btn {
    background: var(--blue-primary);
    color: var(--white);
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.2s;
}

    .copy-all-btn:hover {
        background: var(--blue-dark);
    }

    .copy-all-btn i {
        font-size: 16px;
    }

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .ids-dropdown {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        max-width: 350px;
        right: auto;
        max-height: 70vh;
    }

        .ids-dropdown::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.3);
            z-index: -1;
        }
}

/* ===== RESULTS HEADER AND CONTROLS LAYOUT ===== */
.results-header-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 15px;
}

.results-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

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

.view-toggle-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.export-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Tile/List toggle buttons */
.view-options {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.view-option {
    padding: 6px 12px;
    border: none;
    background: var(--white);
    cursor: pointer;
    font-size: 16px;
    transition: var(--transition);
    border-right: 1px solid var(--border-color);
}

    .view-option:last-child {
        border-right: none;
    }

    .view-option.active {
        background-color: var(--blue-primary);
        color: var(--white);
    }

    .view-option:hover:not(.active) {
        background-color: var(--light-gray);
    }

    /* Certificate Tile View Table*/
/* View Toggle Styles */
.view-toggle-container {
    display: flex;
    align-items: center;
    gap: 20px;
}

.view-toggle {
    display: flex;
    background: #f5f5f5;
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.toggle-btn {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: #666;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 500;
}

    .toggle-btn:hover {
        background: #e0e0e0;
        color: #333;
    }

    .toggle-btn.active {
        background: #fff;
        color: #006847;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

/* Table View Styles */
.view-container {
    width: 100%;
}

.table-wrapper {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    margin-top: 20px;
}

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

    .certificates-table thead {
        background: #f8f9fa;
        border-bottom: 2px solid #e9ecef;
    }

    .certificates-table th {
        padding: 12px 16px;
        text-align: left;
        font-weight: 600;
        color: #495057;
        font-size: 16px;
        white-space: nowrap;
    }

    .certificates-table td {
        padding: 12px 16px;
        border-bottom: 1px solid #e9ecef;
        color: #212529;
        font-size: 16px;
    }

    .certificates-table tbody tr:hover {
        background: #f8f9fa;
    }

.select-column {
    width: 40px;
    text-align: center;
}

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

/* Action Icons in Table */
.table-actions {
    display: flex;
    gap: 8px;
}

.table-action-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #666;
}

    .table-action-icon:hover {
        background: #f0f0f0;
        color: #333;
    }

    .table-action-icon.download:hover {
        color: #006847;
    }

    .table-action-icon.external:hover {
        color: #0066cc;
    }

/* Responsive adjustments */
@media (max-width: 768px) {
    .results-header {
        flex-wrap: wrap;
        gap: 10px;
        padding-top: 20px;
    }

    .view-toggle-container {
        order: -1;
        width: 100%;
    }

    .table-wrapper {
        overflow-x: auto;
    }

    .certificates-table {
        min-width: 800px;
    }
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-top: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

    .results-header > * {
        display: flex;
        align-items: center;
    }

/* Add these styles to your existing styles */
#tableView {
    width: 100%;
    min-height: 400px; /* Ensure minimum height */
}

    #tableView.view-container {
        display: none; /* Hidden by default */
    }

        #tableView.view-container[style*="display: block"] {
            display: block !important;
        }

/* Enhanced Table Styles */
.table-wrapper {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    margin-top: 20px;
    border: 1px solid #e0e0e0;
}

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

    .certificates-table thead {
        background: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
    }

    .certificates-table th {
        padding: 14px 16px;
        text-align: left;
        font-weight: 600;
        color: #495057;
        white-space: nowrap;
        position: relative;
    }

        .certificates-table th i {
            margin-left: 5px;
            font-size: 16px;
            color: #adb5bd;
            cursor: pointer;
        }

        .certificates-table th:hover i {
            color: #495057;
        }

    .certificates-table td {
        padding: 12px 16px;
        border-bottom: 1px solid #e9ecef;
        color: #212529;
        vertical-align: top;
    }

    .certificates-table tbody tr:hover {
        background: #f8f9fa;
        cursor: pointer;
    }

    .certificates-table tbody tr:last-child td {
        border-bottom: none;
    }

/* Cell-specific styles */
.company-cell {
    font-weight: 500;
    color: #006847;
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-cell {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.type-cell {
    color: #666;
}

.certification-cell {
    font-size: 16px;
    font-weight: 500;
    color: #495057;
}

.date-cell {
    white-space: nowrap;
}

.asin-cell {
    font-family: monospace;
    color: #666;
}

/* Actions styling */
.table-actions {
    display: flex;
    gap: 8px;
}

.table-action-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #666;
    border: 1px solid transparent;
}

    .table-action-icon:hover {
        background: #f0f0f0;
        border-color: #e0e0e0;
    }

    .table-action-icon.download:hover {
        color: #006847;
        background: #e6f4ea;
        border-color: #006847;
    }

    .table-action-icon.external:hover {
        color: #0066cc;
        background: #e6f2ff;
        border-color: #0066cc;
    }

/* Checkbox styling */
.select-column {
    width: 40px;
    text-align: center;
}

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

input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

/* Responsive table */
@media (max-width: 1200px) {
    .certificates-table {
        font-size: 16px;
    }

        .certificates-table th,
        .certificates-table td {
            padding: 10px 12px;
        }
}

@media (max-width: 768px) {
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .certificates-table {
        min-width: 900px;
    }
}

/* Loading state */
.table-loading {
    text-align: center;
    padding: 40px;
    color: #666;
}

    .table-loading i {
        font-size: 24px;
        animation: spin 1s linear infinite;
    }

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

    100% {
        transform: rotate(360deg);
    }
}


/* Enhanced Table Styles for All Columns */
.table-wrapper {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    margin-top: 20px;
    border: 1px solid #e0e0e0;
}

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

    .certificates-table thead {
        background: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .certificates-table th {
        padding: 12px 8px;
        text-align: left;
        font-weight: 600;
        color: #495057;
        white-space: nowrap;
        position: relative;
        background: #f8f9fa;
    }

        .certificates-table th i {
            margin-left: 5px;
            font-size: 16px;
            color: #adb5bd;
            cursor: pointer;
        }

        .certificates-table th:hover i {
            color: #495057;
        }

    .certificates-table td {
        padding: 10px 8px;
        border-bottom: 1px solid #e9ecef;
        color: #212529;
        vertical-align: middle;
    }

    .certificates-table tbody tr:hover {
        background: #f8f9fa;
    }

    .certificates-table tbody tr:last-child td {
        border-bottom: none;
    }

/* Column-specific styles */
/* NOTE: Width styles moved to certificatetileview.css
   Grid column widths are defined via grid-template-columns in view-specific inline styles */
.select-column, .select-cell {
    text-align: center;
}

/* Action column/cell - NO display:flex on td/th, only on inner container */
.actions-column, .actions-cell {
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}

/* Action buttons container inside cells - this is where flex goes */
.actions-column .action-buttons,
.actions-cell .action-buttons {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
}

.cert-id-cell {
    font-weight: 600;
    color: #006847;
}

.cert-type-cell {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.csf-cell {
    font-size: 16px;
    color: #495057;
}

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

.status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
}

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

.date-cell {
    white-space: nowrap;
    font-size: 16px;
}

.company-cell {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.contact-cell {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #0066cc;
    font-size: 16px;
}

.product-cell {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-cell, .type-cell, .subcategory-cell {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
}

.location-cell {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
}

.country-cell {
    font-size: 16px;
}

.tag-cell {
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    color: #666;
}

.id-cell {
    font-family: monospace;
    font-size: 16px;
    color: #666;
}

/* Actions styling */
.table-actions {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.table-action-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #666;
    border: 1px solid transparent;
}

    .table-action-icon:hover {
        background: #f0f0f0;
        border-color: #e0e0e0;
    }

    .table-action-icon.download:hover {
        color: #006847;
        background: #e6f4ea;
        border-color: #006847;
    }

    .table-action-icon.preview:hover {
        color: #0066cc;
        background: #e6f2ff;
        border-color: #0066cc;
    }

/* Checkbox styling */
input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

/* Responsive table with horizontal scroll */
@media (max-width: 1400px) {
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .certificates-table {
        min-width: 1800px;
    }
}

/* Sticky first columns on scroll */
@media (min-width: 1401px) {
    .certificates-table {
        position: relative;
    }

    .select-column,
    .select-cell,
    .actions-column,
    .actions-cell {
        position: sticky;
        background: #fff;
        z-index: 5;
    }

    .select-column,
    .select-cell {
        left: 0;
    }

    .actions-column,
    .actions-cell {
        left: 40px;
    }

    .certificates-table thead .select-column,
    .certificates-table thead .actions-column {
        background: #f8f9fa;
    }

    .certificates-table tbody tr:hover .select-cell,
    .certificates-table tbody tr:hover .actions-cell {
        background: #f8f9fa;
    }
}

/* Loading state */
.table-loading {
    text-align: center;
    padding: 40px;
    color: #666;
}

    .table-loading i {
        font-size: 24px;
        animation: spin 1s linear infinite;
    }

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

    100% {
        transform: rotate(360deg);
    }
}

/* Table scroll shadow */
.table-wrapper {
    position: relative;
}

    .table-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 30px;
        background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .table-wrapper.scrollable::after {
        opacity: 1;
    }



    /* CertificateInternalView*/
/* Results Controls Layout - Updated for separate rows */
.export-controls-row {
    margin-bottom: 15px;
    padding: 0 8px;
}

.view-controls-row {
    margin-bottom: 20px;
    padding: 0 8px;
}

.export-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.view-toggle-container {
    display: flex;
    justify-content: flex-start;
}

    /* Update button styles to use primary green */
    .export-options .btn {
        background-color: var(--green-primary);
        color: white;
        border: none;
    }

        .export-options .btn:hover {
            background-color: var(--green-secondary);
        }

    .export-options .btn-add {
        background-color: var(--green-primary);
    }

        .export-options .btn-add:hover {
            background-color: var(--green-secondary);
        }

/* Product name - remove truncation */
.product-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--blue-dark);
    line-height: 1.3;
    margin-bottom: 6px;
    /* Remove these truncation styles */
    /* white-space: nowrap; */
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
    /* Allow text to wrap */
    white-space: normal;
    word-wrap: break-word;
}

/* Ensure card body can accommodate wrapped text */
.card-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 200px; /* Ensure minimum height for content */
}

/* Tablet responsiveness for controls — buttons wrap at content width, no stretching */
@media (max-width: 768px) {
    .export-controls-row,
    .view-controls-row {
        padding: 0 8px;
    }

        .export-options .btn {
            min-width: 140px;
        }

    .view-toggle-container {
        justify-content: center;
    }
}

/* Phone-only: stretch wrapped buttons full-width for larger tap targets.
   Scoped to ≤480px so a lone wrapped button at tablet width (e.g. "Template"
   on Internal view) does NOT inflate to 100% of the row. */
@media (max-width: 480px) {
    .export-options {
        justify-content: stretch;
    }

        .export-options .btn {
            flex: 1;
        }
}

/* Enhanced table header spacing */
.certificates-table thead th {
    padding: 14px 12px;
    font-weight: 600;
    white-space: nowrap;
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

/* Better cell spacing */
.certificates-table td {
    padding: 12px 10px;
    vertical-align: middle;
}

/* Ensure minimum column widths */
.cert-id-cell {
    min-width: 80px;
}

.cert-type-cell {
    min-width: 150px;
}

.csf-cell {
    min-width: 120px;
}

.status-cell {
    min-width: 80px;
}

.date-cell {
    min-width: 90px;
}

.company-cell {
    min-width: 200px;
}

.contact-cell {
    min-width: 150px;
}

.product-cell {
    min-width: 250px;
}

.category-cell {
    min-width: 180px;
}

.type-cell {
    min-width: 150px;
}

.subcategory-cell {
    min-width: 120px;
}

.location-cell {
    min-width: 200px;
}

.country-cell {
    min-width: 100px;
}

.tag-cell {
    min-width: 100px;
}

.id-cell {
    min-width: 120px;
}

/* Improve readability with alternating rows */
.certificates-table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

/* Better status badge styling */
.status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
}

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

/* Table wrapper with horizontal scroll */
.table-wrapper {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow-x: auto; /* Enable horizontal scrolling */
    overflow-y: visible;
    margin-top: 20px;
    border: 1px solid #e0e0e0;
    position: relative;
    width: 100%;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Ensure table doesn't wrap */
.certificates-table {
    width: auto;
    min-width: 2000px; /* Set minimum width to accommodate all columns */
    border-collapse: collapse;
    font-size: 16px;
}

/* Add scroll indicator shadow */
.table-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.table-wrapper.scrollable::after {
    opacity: 1;
}

/* Visual scroll indicator */
.table-scroll-indicator {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--blue-primary);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 16px;
    display: none;
    z-index: 10;
}

.table-wrapper.scrollable .table-scroll-indicator {
    display: block;
}

/* ===== UPDATED CSS GRID TABLE REPLACEMENT ===== */

/* Main Grid Container */
.table-grid-container {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* NOTE: Table grid styles moved to certificatetileview.css
   View-specific grid-template-columns defined in each view's inline styles */

/* Sort indicators - using FontAwesome like your original */
.sort-indicator {
    font-size: 16px;
    margin-left: 4px;
    opacity: 0.6;
    color: #666;
}

.grid-header-cell.sorted .sort-indicator {
    opacity: 1;
    color: #2c5530;
}

.grid-header-cell.sorted.asc .sort-indicator:before {
    content: "\f0de"; /* fa-sort-up */
}

.grid-header-cell.sorted.desc .sort-indicator:before {
    content: "\f0dd"; /* fa-sort-down */
}

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

/* Row Styles */
.grid-row {
    display: contents;
}

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

    .grid-row.selected .grid-cell {
        background: #e7f3ff;
    }

/* Cell Styles */
.grid-cell {
    padding: 10px 8px;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    font-size: 16px;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
}

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

    /* Special cell types */
    .grid-cell.select-cell {
        justify-content: center;
        cursor: default;
    }

    .grid-cell.actions-cell {
        justify-content: center;
        gap: 4px;
        /* min-width removed - controlled by grid-template-columns */
    }

    .grid-cell.cert-number {
        font-weight: 600;
        color: #447638;
    }

    .grid-cell.status-cell {
        justify-content: center;
    }

/* Action Buttons Container */
.action-buttons {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

/* Action Buttons */
.action-btn {
    padding: 4px 6px;
    border: none;
    background: none;
    border-radius: 4px;
    cursor: pointer;
    color: #666;
    font-size: 16px;
    transition: all 0.2s ease;
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .action-btn:hover.edit {
        background: rgba(0, 174, 239, 0.1);
        color: #00AEEF;
    }

    .action-btn:hover.download {
        background: rgba(124, 179, 66, 0.1);
        color: #7CB342;
    }

    .action-btn:hover.view {
        background: rgba(0, 123, 255, 0.1);
        color: #007bff;
    }

/* Bulk Actions Bar */
.bulk-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #e7f3ff;
    padding: 12px 20px;
    margin: 20px 0;
    border-radius: 6px;
    border: 1px solid #b3d9ff;
}

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

.selected-count {
    font-weight: 600;
    color: #0066cc;
}

.clear-selection-btn {
    background: none;
    border: 1px solid #0066cc;
    color: #0066cc;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

    .clear-selection-btn:hover {
        background: #0066cc;
        color: white;
    }

.bulk-action-btn {
    background: #2c5530;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s ease;
}

    .bulk-action-btn:hover {
        background: #234428;
    }

    .bulk-action-btn i {
        margin-right: 6px;
    }

/* Scrollable wrapper for horizontal scrolling */
.table-scroll-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: 20px;
}

/* Multi-tag containers */
.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    max-width: 100%;
    overflow: hidden;
}

/* Large Monitor Optimization (1920px and above) */
@media (min-width: 1920px) {
    .table-grid-container {
        max-width: 100%;
        margin: 0 auto;
    }

    .table-grid {
        min-width: 100%;
    }

    .grid-header-cell,
    .grid-cell {
        padding: 12px 10px;
    }
}

/* Desktop Optimization (1440px - 1919px) */
@media (min-width: 1440px) and (max-width: 1919px) {
    .table-grid-container {
        max-width: 100%;
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    /* Table grid column widths defined in view-specific inline styles */

    .grid-header-cell,
    .grid-cell {
        padding: 8px 4px;
        font-size: 16px;
    }

    .table-scroll-wrapper {
        margin: 10px;
    }

    .action-buttons {
        gap: 4px;
    }

    .action-btn {
        min-width: 24px;
        height: 24px;
        font-size: 14px;
    }
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fw-bold {
    font-weight: 600;
}