/* Minimal Custom CSS Overrides for Tailwind - Only for complex components */

/* Custom primary color - can be used with bg-[#3A7CB1] in Tailwind */
:root {
    --primary-blue: #3A7CB1;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
}

/* Ensure no horizontal scrollbars globally */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Complex JavaScript-dependent styles that can't use Tailwind utilities */
/* Log color classes for action log statuses */
.log_color_1 { color: #006600; }
.log_color_2 { color: #FF6600; }
.log_color_3 { color: #FF0000; }
.log_color_4 { color: #0000FF; }

/* CPV tree and category tree styles - complex JavaScript components */
.categorycpv-tree,
#categorycpv-tree-filter {
    max-width: 100%;
    overflow-x: hidden;
    word-wrap: break-word;
    min-height: 300px;
    max-height: 600px;
    overflow-y: auto;
}

/* CPV tree in sidebar - specific styling */
#categorycpv-tree-filter-sidebar {
    max-width: 100%;
    overflow-x: hidden;
    word-wrap: break-word;
    min-height: 200px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    background: white;
    padding: 4px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
}

#cpv-tree-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#cpv-tree-sidebar .categorycpv-tree {
    flex: 1;
    overflow-y: auto;
    background: white;
}

/* Tree node hide/show functionality */
.hide {
    display: none !important;
}

/* Ensure opened tree nodes display their children */
.categorycpv-tree li.open ul.hide {
    display: none !important;
}

.categorycpv-tree li.open ul:not(.hide) {
    display: block !important;
}

/* Tree node states */
.categorycpv-tree li {
    text-align: left;
    font-size: 13px;
    list-style: none;
    margin: 2px 0;
    padding: 2px 0;
}

/* Level 2 Sub-Items Styles Documentation:
 * Level 2 sub-items (ul[data-lvl="2"]) receive:
 * - padding-left: 25px !important (indentation from parent)
 * - margin-left: 0 !important
 * - Base styles: list-style: none, margin: 0, padding: 0
 * - Tailwind base styles: box-sizing, border, font properties, etc.
 */

/* Icon container styles - SVG icons are injected via JavaScript */
/* Icons appear BEFORE checkboxes and are sized to match checkbox size */
.categorycpv-tree li.close > span.parent,
.categorycpv-tree li.open > span.parent {
    padding-left: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    width: 14px;
    min-height: 14px;
    height: 14px;
    user-select: none;
    margin-right: 4px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* SVG icon styles - sized to match checkbox (~13px typical checkbox size) */
.categorycpv-tree span.parent svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    color: #3A7CB1;
    pointer-events: none; /* Allow clicks to pass through to parent span */
}

.categorycpv-tree li.parent,
.categorycpv-tree li.parent > span {
    cursor: pointer;
}

.categorycpv-tree li.parent {
    position: relative;
}

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

/* Root level - no padding */
.categorycpv-tree > ul,
.categorycpv-tree #parent_0 {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Nested levels - progressive indentation based on data-lvl attribute */
/* Level 2 Sub-Items: ul[data-lvl="2"]
 * Styles applied:
 * - padding-left: 25px !important (indentation from parent level)
 * - margin-left: 0 !important
 * - Inherits base styles: list-style: none, margin: 0, padding: 0
 * - Inherits Tailwind base: box-sizing: border-box, border-width: 0, etc.
 */
.categorycpv-tree ul[data-lvl="2"] {
    padding-left: 25px !important;
    margin-left: 0 !important;
}

.categorycpv-tree ul[data-lvl="3"] {
    padding-left: 50px !important;
    margin-left: 0 !important;
}

.categorycpv-tree ul[data-lvl="4"] {
    padding-left: 75px !important;
    margin-left: 0 !important;
}

.categorycpv-tree ul[data-lvl="5"] {
    padding-left: 100px !important;
    margin-left: 0 !important;
}

.categorycpv-tree ul[data-lvl="6"] {
    padding-left: 125px !important;
    margin-left: 0 !important;
}

/* CRITICAL: Ensure nested items inside parent nodes are indented when opened */
/* This targets ul elements that are direct children of li nodes */
.categorycpv-tree li[id^="node_"] > ul[id^="parent_"] {
    padding-left: 25px !important;
    margin-left: 0 !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}

/* Fallback: use parent ID selector for nested items */
.categorycpv-tree ul[id^="parent_"]:not(#parent_0) {
    padding-left: 25px !important;
    margin-left: 0 !important;
    margin-top: 2px;
    margin-bottom: 2px;
}

/* Additional indentation for deeper nested levels */
.categorycpv-tree li[id^="node_"] li[id^="node_"] > ul[id^="parent_"] {
    padding-left: 25px !important;
    margin-left: 0 !important;
}

.categorycpv-tree li[id^="node_"] li[id^="node_"] li[id^="node_"] > ul[id^="parent_"] {
    padding-left: 25px !important;
    margin-left: 0 !important;
}

/* Ensure opened nodes show their children with proper indentation */
.categorycpv-tree li.open > ul[id^="parent_"] {
    padding-left: 25px !important;
    margin-left: 0 !important;
    display: block !important;
}

.categorycpv-tree input[type="checkbox"] {
    margin-right: 5px;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    vertical-align: middle;
}

.categorycpv-tree span.parent {
    display: inline-block;
    min-width: 20px;
    min-height: 16px;
}

/* Category tree search */
.categorycpv-tree-search {
    text-align: left;
}

/* Search result items */
.data-search-item.hide {
    display: none !important;
}

.search-result-node.selected {
    background-color: #e8f5e9;
    font-weight: bold;
}

/* Selected label styles for CPV filters */
.selected-label {
    display: inline-block;
    padding: 5px 10px;
    margin: 5px;
    background-color: #e8f5e9;
    border: 1px solid #4caf50;
    border-radius: 4px;
    cursor: pointer;
}

/* Mobile menu overlay and sidebar animations */
#mobile-menu-overlay {
    transition: opacity 0.3s ease;
}

#mobile-menu {
    transition: transform 0.3s ease;
}

#mobile-menu.hidden {
    display: none !important;
}

#mobile-menu-overlay.hidden {
    display: none !important;
}

/* Category sidebar mobile toggle */
#contentleft.mobile-open {
    display: block !important;
}

#contentleft.hidden {
    display: none !important;
}

#contentleft.block {
    display: block !important;
}

/* Ensure contentleft is visible on desktop */
@media (min-width: 768px) {
    #contentleft {
        display: block !important;
        visibility: visible !important;
    }
}

/* Hide contentleft on mobile by default */
@media (max-width: 767px) {
    #contentleft:not(.mobile-open) {
        display: none !important;
    }
}

/* Override inline style on desktop */
@media (min-width: 768px) {
    #contentleft[style*="display: none"],
    #contentleft[style*="display:none"] {
        display: block !important;
        visibility: visible !important;
    }
}

/* Third-party component overrides if needed */
/* Add specific overrides here only if Tailwind utilities don't work */