/**
 * Hierarchical Taxonomy Display Widget Styles
 * Modern, clean design with expandable hierarchical categories
 */



.workscout-hierarchical-taxonomy-display .workscout-grid {
    display: block;
    columns: var(--columns, 3);
    column-gap: 16px;
    column-fill: balance;
}

.workscout-hierarchical-taxonomy-display .workscout-grid-cols-2 {
    --columns: 2;
}

.workscout-hierarchical-taxonomy-display .workscout-grid-cols-3 {
    --columns: 3;
}

.workscout-hierarchical-taxonomy-display .workscout-grid-cols-4 {
    --columns: 4;
}

.workscout-hierarchical-taxonomy-display .workscout-hierarchical-taxonomy-card {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
    transition: box-shadow 0.2s ease-in-out;
    break-inside: avoid;
    margin-bottom: 16px;
    display: inline-block;
    width: 100%;
}

/* The class is repeated on purpose. Elementor's "Card Shadow" control prints
   `{{WRAPPER}} .workscout-hierarchical-taxonomy-card` (0,4,0) and is not hover
   scoped, so it also applied on hover and flattened the lift as soon as an
   author set a shadow. Doubling the card class puts this rule at (0,4,1): the
   class counts tie at four and the element part decides it, so the hover
   shadow wins while the resting shadow is left to the control. The dark mode
   override below keeps its id selector and still wins over both. */
body .workscout-hierarchical-taxonomy-display .workscout-hierarchical-taxonomy-card.workscout-hierarchical-taxonomy-card:hover {
    box-shadow:  0 2px 4px rgba(0, 0, 0, 0.06);
}

body .workscout-hierarchical-taxonomy-item:hover {


}
.workscout-hierarchical-taxonomy-card svg path,
.workscout-hierarchical-taxonomy-card svg circle,
.workscout-hierarchical-taxonomy-card svg rect,
.workscout-hierarchical-taxonomy-card svg polygon {
    fill: var(--workscout-primary-color, #26ae61) !important;
    transition: fill 0.3s ease;
}
.workscout-hierarchical-taxonomy-display .workscout-hierarchical-taxonomy-item {
    padding: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    background: #ffffff;
}

.workscout-hierarchical-taxonomy-display .workscout-hierarchical-taxonomy-item:hover {
    background-color: #f8f8f8 !important;
}

.workscout-hierarchical-taxonomy-display .workscout-hierarchical-taxonomy-item.workscout-has-children:hover {
    background-color: #f8f8f8 !important;
}

/* Flex utilities */
.workscout-hierarchical-taxonomy-display .workscout-flex {
    display: flex;
}

.workscout-hierarchical-taxonomy-display .workscout-items-center {
    align-items: center;
}

.workscout-hierarchical-taxonomy-display .workscout-justify-between {
    justify-content: space-between;
}

.workscout-hierarchical-taxonomy-display .workscout-space-x-2 > * + * {
    margin-left: 8px;
}

.workscout-hierarchical-taxonomy-display .workscout-space-x-3 > * + * {
    margin-left: 12px;
}

.workscout-hierarchical-taxonomy-display .workscout-flex-shrink-0 {
    flex-shrink: 0;
}

.workscout-hierarchical-taxonomy-display .workscout-flex-grow {
    flex-grow: 1;
}

/* Sizing utilities */
.workscout-hierarchical-taxonomy-display .workscout-w-4 {
    width: 16px;
}

.workscout-hierarchical-taxonomy-display .workscout-h-4 {
    height: 16px;
}

.workscout-hierarchical-taxonomy-display .workscout-w-5 {
    width: 20px;
}

.workscout-hierarchical-taxonomy-display .workscout-h-5 {
    height: 20px;
}

/* Typography */
.workscout-hierarchical-taxonomy-display .workscout-font-semibold {
    font-weight: 600;
}

.workscout-hierarchical-taxonomy-display .workscout-font-medium {
    font-weight: 500;
}

.workscout-hierarchical-taxonomy-display .workscout-text-sm {
    font-size: 14px;
    line-height: 20px;
}

.workscout-hierarchical-taxonomy-display .workscout-text-xs {
    font-size: 12px;
    line-height: 16px;
}

.workscout-hierarchical-taxonomy-display .workscout-m-0 {
    margin: 0;
}

.workscout-hierarchical-taxonomy-display .workscout-text-decoration-none {
    text-decoration: none !important;
    color: inherit;
}

.workscout-hierarchical-taxonomy-display .workscout-text-decoration-none:hover {
    text-decoration: none !important;
    color: inherit;
}

/* Icon styling */
.workscout-hierarchical-taxonomy-display .workscout-taxonomy-icon {
    color: var(--workscout-primary-color, #26ae61) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.workscout-hierarchical-taxonomy-display .workscout-taxonomy-icon i {
    font-size: 20px;
}

.workscout-hierarchical-taxonomy-display .workscout-taxonomy-icon svg {
    fill: var(--workscout-primary-color, #26ae61) !important;
    color: inherit;
    max-height: 25px;
}

.workscout-hierarchical-taxonomy-display .workscout-taxonomy-icon img {
    max-width: 100%;
    max-height: 25px;
    display: block;
}

/* Title styling */
.workscout-hierarchical-taxonomy-display .workscout-taxonomy-title {
    color: #111827;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    margin: 0;
}

.workscout-hierarchical-taxonomy-display .workscout-taxonomy-count {
    color: #6a6a6a;
    font-size: 12px;
    line-height: 16px;
    margin: 0;
    margin-top: 2px;
}

/* Children container */
body .workscout-hierarchical-taxonomy-display .workscout-hierarchical-taxonomy-card .workscout-children-container {
    background-color: transparent;
    border-top: 1px solid #e0e0e0;
    overflow: hidden;
}

body .workscout-hierarchical-taxonomy-display .workscout-hierarchical-taxonomy-card .workscout-child-taxonomy-item {
    padding: 9px 16px;
    border-top: 1px solid #e0e0e0;
    transition: background-color 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: inherit;
    background-color: transparent;
}

body .workscout-hierarchical-taxonomy-display .workscout-hierarchical-taxonomy-card .workscout-child-taxonomy-item:first-child {
    border-top: none;
}

body .workscout-hierarchical-taxonomy-display .workscout-hierarchical-taxonomy-card .workscout-child-taxonomy-item:hover {
    background-color: #f8f8f8 !important;
    text-decoration: none;
    color: inherit;
}

body .workscout-hierarchical-taxonomy-display .workscout-hierarchical-taxonomy-card .workscout-child-taxonomy-title {
    color: #374151;
    font-size: 14px;
    line-height: 20px;
}

body .workscout-hierarchical-taxonomy-display .workscout-hierarchical-taxonomy-card .workscout-child-taxonomy-item .workscout-taxonomy-icon {
    color: var(--workscout-primary-color, #26ae61) !important;
    width: 16px;
    height: 16px;
}

body .workscout-hierarchical-taxonomy-display .workscout-hierarchical-taxonomy-card .workscout-child-taxonomy-item .workscout-taxonomy-icon i {
    font-size: 16px;
}

/* Utility classes */
.workscout-hierarchical-taxonomy-display .workscout-hidden {
    display: none;
}

.workscout-hierarchical-taxonomy-display .workscout-cursor-pointer {
    cursor: pointer;
}

.workscout-hierarchical-taxonomy-display .workscout-transition-colors {
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.workscout-hierarchical-taxonomy-display .workscout-duration-200 {
    transition-duration: 0.2s;
}

/* Editor-only configuration hint */
.workscout-hierarchical-taxonomy-notice {
    margin: 0;
    padding: 16px;
    border: 1px dashed #d0d0d0;
    border-radius: 6px;
    color: #6a6a6a;
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 768px) {
    .workscout-hierarchical-taxonomy-display .workscout-grid {
        columns: 1;
    }

    .workscout-hierarchical-taxonomy-display .workscout-hierarchical-taxonomy-item {
        padding: 14px;
    }

    .workscout-hierarchical-taxonomy-display .workscout-child-taxonomy-item {
        padding: 10px 14px;
    }
}

@media (max-width: 1024px) {
    .workscout-hierarchical-taxonomy-display .workscout-grid-cols-4 {
        --columns: 2;
    }

    .workscout-hierarchical-taxonomy-display .workscout-grid-cols-3 {
        --columns: 2;
    }
}

/* Loading state */
.workscout-hierarchical-taxonomy-display .workscout-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Focus states for accessibility */
.workscout-hierarchical-taxonomy-display .workscout-hierarchical-taxonomy-item:focus,
.workscout-hierarchical-taxonomy-display .workscout-child-taxonomy-item:focus {
    outline: 2px solid var(--workscout-primary-color, #26ae61);
    outline-offset: 2px;
}

/* Empty state */
.workscout-hierarchical-taxonomy-display .workscout-empty-state {
    text-align: center;
    padding: 32px;
    color: #6a6a6a;
    font-style: italic;
}

/* Custom scrollbar for child containers with many items */
.workscout-hierarchical-taxonomy-display .workscout-children-container {
    max-height: 390px;
    overflow-y: auto !important;
}

.workscout-hierarchical-taxonomy-display .workscout-children-container::-webkit-scrollbar {
    width: 4px;
}

.workscout-hierarchical-taxonomy-display .workscout-children-container::-webkit-scrollbar-track {
    background: #f0f0f0;
}

.workscout-hierarchical-taxonomy-display .workscout-children-container::-webkit-scrollbar-thumb {
    background: #d0d0d0;
    border-radius: 2px;
}

.workscout-hierarchical-taxonomy-display .workscout-children-container::-webkit-scrollbar-thumb:hover {
    background: #9a9a9a;
}

/* ===== DARK MODE STYLES ===== */
/* Dark mode styles for the hierarchical taxonomy widget */

/* Main container dark mode */
body#dark-mode .workscout-hierarchical-taxonomy-display {
    background-color: #1a1a1a;
}

/* Grid dark mode */
body#dark-mode .workscout-hierarchical-taxonomy-display .workscout-hierarchical-taxonomy-grid {
    background-color: #1a1a1a;
}

/* Card dark mode */
body#dark-mode .workscout-hierarchical-taxonomy-display .workscout-hierarchical-taxonomy-card {
    background-color: #2d2d2d;
    border-color: #404040;
}

body#dark-mode .workscout-hierarchical-taxonomy-display .workscout-hierarchical-taxonomy-card:hover {
    background-color: #333333;
    border-color: #555555;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Main taxonomy item dark mode */
body#dark-mode .workscout-hierarchical-taxonomy-display .workscout-hierarchical-taxonomy-item {
    color: #e0e0e0;
}

body#dark-mode .workscout-hierarchical-taxonomy-display .workscout-hierarchical-taxonomy-item:hover {
    background-color: #333333 !important;
}

/* Taxonomy title dark mode */
body#dark-mode .workscout-hierarchical-taxonomy-display .workscout-taxonomy-title {
    color: #ffffff;
}

/* Taxonomy count dark mode */
body#dark-mode .workscout-hierarchical-taxonomy-display .workscout-taxonomy-count {
    color: #a0a0a0;
    background-color: #404040;
}

/* Expand arrow dark mode */
body#dark-mode .workscout-hierarchical-taxonomy-display .workscout-taxonomy-arrow {
    color: #a0a0a0;
}

body#dark-mode .workscout-hierarchical-taxonomy-display .workscout-taxonomy-arrow:hover {
    color: #ffffff;
}

/* Children container dark mode */
body#dark-mode .workscout-hierarchical-taxonomy-display .workscout-hierarchical-taxonomy-card .workscout-children-container {
    background-color: #252525;
    border-top-color: #404040;
}

/* Child taxonomy item dark mode */
body#dark-mode .workscout-hierarchical-taxonomy-display .workscout-child-taxonomy-item {
    color: #d0d0d0;
    border-top-color: #3a3a3a;
}

body#dark-mode .workscout-hierarchical-taxonomy-display .workscout-child-taxonomy-item:hover {
    background-color: #2f2f2f !important;
    color: #ffffff;
}

/* Child taxonomy title dark mode */
body#dark-mode .workscout-hierarchical-taxonomy-display .workscout-child-taxonomy-title {
    color: #d0d0d0;
}

body#dark-mode .workscout-hierarchical-taxonomy-display .workscout-child-taxonomy-item:hover .workscout-child-taxonomy-title {
    color: #ffffff;
}

/* Icons dark mode */
body#dark-mode .workscout-hierarchical-taxonomy-display .workscout-taxonomy-icon {
    color: #a0a0a0;
}

body#dark-mode .workscout-hierarchical-taxonomy-display .workscout-hierarchical-taxonomy-item:hover .workscout-taxonomy-icon,
body#dark-mode .workscout-hierarchical-taxonomy-display .workscout-child-taxonomy-item:hover .workscout-taxonomy-icon {
    color: #ffffff;
}

/* Empty state dark mode */
body#dark-mode .workscout-hierarchical-taxonomy-display .workscout-empty-state {
    color: #a0a0a0;
}

/* Scrollbar dark mode */
body#dark-mode .workscout-hierarchical-taxonomy-display .workscout-children-container::-webkit-scrollbar-track {
    background: #2d2d2d;
}

body#dark-mode .workscout-hierarchical-taxonomy-display .workscout-children-container::-webkit-scrollbar-thumb {
    background: #555555;
}

body#dark-mode .workscout-hierarchical-taxonomy-display .workscout-children-container::-webkit-scrollbar-thumb:hover {
    background: #777777;
}

body#dark-mode body .workscout-hierarchical-taxonomy-item:hover {
    background-color: #444 !important
}