/* ================================================
   KooKoa Folders - Retro Terminal Theme
   Brand: Black + Phosphor Green, 80s Terminal

   Sections:
   1. CSS Variables
   2. Global Utilities
   3. Sidebar Wrapper & Layout
   4. Sidebar Header & Actions
   5. Sort Toolbar
   6. More Menu (⋮)
   7. Search
   8. Navigation (All Items / Uncategorized)
   9. Tree Container & Empty States
   10. jstree Customizations
   11. Tooltips (Dynamic + Metadata)
   12. Drag & Drop
   13. Resize Handle
   14. Toggle Sidebar & Collapsed
   15. Folder Column (List View)
   16. Loading Indicator
   17. Responsive
   ================================================ */

/* ================================================
   1. CSS Variables
   ================================================ */
:root {
    --kookoawpf-bg: #0d1117;
    --kookoawpf-bg-light: #161b22;
    --kookoawpf-bg-hover: #1c2333;
    --kookoawpf-border: #1e3a2f;
    --kookoawpf-border-light: #264a3a;
    --kookoawpf-green: #39FF14;
    --kookoawpf-green-soft: #4ADE80;
    --kookoawpf-green-dim: #2ea043;
    --kookoawpf-green-glow: rgba(57, 255, 20, 0.15);
    --kookoawpf-green-glow-strong: rgba(57, 255, 20, 0.25);
    --kookoawpf-text: #ffffff;
    --kookoawpf-text-muted: #ffffff;
    --kookoawpf-red: #FF3B30;
    --kookoawpf-orange: #FF9500;
    --kookoawpf-hover: #161b22;
    --kookoawpf-font: 'Share Tech Mono', 'Courier New', monospace;
    --kookoawpf-tree-font-size: 13px;
}

/* ================================================
   2. Global Utilities
   ================================================ */

/* Force green highlight on all plugin selects */
.kookoawpf-modal select,
.kookoawpf-sidebar-wrapper select,
.kookoawpf-rule-field-select,
.kookoawpf-rule-value-select,
#kookoawpf-folder-parent-select,
#kookoawpf-bulk-folder-select,
#kookoawpf-grid-filter {
    accent-color: var(--kookoawpf-green);
}

.kookoawpf-modal select option,
.kookoawpf-rule-field-select option,
.kookoawpf-rule-value-select option,
#kookoawpf-folder-parent-select option,
#kookoawpf-bulk-folder-select option {
    background: var(--kookoawpf-bg-light);
    color: #ffffff;
}

.kookoawpf-modal select option:checked,
.kookoawpf-rule-field-select option:checked,
.kookoawpf-rule-value-select option:checked,
#kookoawpf-folder-parent-select option:checked,
#kookoawpf-bulk-folder-select option:checked {
    background: var(--kookoawpf-green-dim) linear-gradient(0deg, var(--kookoawpf-green-dim) 0%, var(--kookoawpf-green-dim) 100%);
    color: var(--kookoawpf-green);
}

/* Global disabled state — matches star/lock/trash disabled look (opacity 0.35) */
.kookoawpf-ui-disabled {
    opacity: 0.35 !important;
    pointer-events: none !important;
    cursor: default !important;
}

/* WP 7.0 Modern admin theme broke .dashicons rendering in two ways:
   (1) line-height inherited from new tall .button default (~26.6px) pushes
       the glyph below its 14-16px box. Fix globally with !important to beat
       WP 7.0's own values.
   (2) WP 7.0 paints specific dashicon glyphs (notably -plus-alt2) with its
       accent blue (#3858E9) using high-specificity selectors. We can't kill
       it generically without also stomping plugin rules that DELIBERATELY
       color the icon (context menu, sort, more, badge, drag-helper). So we
       limit "color: inherit !important" to the buttons/widgets that DO rely
       on inheritance — never to general kookoawpf-* descendants. */
[class*="kookoawpf-"] .dashicons {
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* Defense-in-depth color-inheritance lock — every KooKoa button/widget that
   relies on the parent's color to paint its dashicon (no explicit color rule
   on the dashicon). Without this, WP 7.0 -plus-alt2 (and any future Modern
   theme override) would leak through. Selectors with explicit color elsewhere
   (context-menu, sort, more, badge, drag-helper) are NOT included here so
   they keep working. */
.kookoawpf-btn-new .dashicons,
.kookoawpf-empty-state-btn .dashicons,
.kookoawpf-btn-icon .dashicons,
.kookoawpf-sidebar-actions .dashicons,
.kookoawpf-nav-item .dashicons,
.kookoawpf-fb-btn .dashicons,
.kookoawpf-btn-bulk-action .dashicons,
.kookoawpf-toggle-sidebar .dashicons {
    color: inherit !important;
}

/* Expand/Collapse All disabled inside more dropdown */
.kookoawpf-more-option.kookoawpf-ui-disabled {
    opacity: 0.35 !important;
    pointer-events: none !important;
}

/* ================================================
   3. Sidebar Wrapper & Layout
   ================================================ */
.kookoawpf-sidebar-wrapper {
    position: fixed;
    top: 32px;
    left: 160px;
    bottom: 0;
    width: 280px;
    background: var(--kookoawpf-bg);
    border: 5px solid var(--kookoawpf-green-dim);
    z-index: 990;
    display: flex;
    flex-direction: column;
    overflow: visible;
    box-sizing: border-box;
    font-family: var(--kookoawpf-font);
    transition: left 0.2s ease;
}

.folded .kookoawpf-sidebar-wrapper { left: 36px; }
.auto-fold .kookoawpf-sidebar-wrapper { left: 36px; }
@media screen and (min-width: 961px) { .auto-fold:not(.folded) .kookoawpf-sidebar-wrapper { left: 160px; } }

body.kookoawpf-has-sidebar #wpcontent { padding-left: 310px; }
body.kookoawpf-has-sidebar #wpbody-content { box-sizing: border-box; }
body.kookoawpf-sidebar-collapsed #wpcontent { padding-left: 0 !important; }
.kookoawpf-sidebar-wrapper.kookoawpf-collapsed { width: 0; border-right: none; overflow: hidden; }

/* ================================================
   4. Sidebar Header & Actions
   ================================================ */
.kookoawpf-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--kookoawpf-border);
    background: var(--kookoawpf-bg-light);
    flex-shrink: 0;
}

.kookoawpf-sidebar-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
    text-shadow: 0 0 7px rgba(57, 255, 20, 0.64), 0 0 20px rgba(57, 255, 20, 0.4), 0 0 40px rgba(57, 255, 20, 0.24);
    color: var(--kookoawpf-green);
    font-family: var(--kookoawpf-font);
    letter-spacing: 1px;
}

.kookoawpf-sidebar-title .kookoawpf-brand {
    color: var(--kookoawpf-green);
    font-weight: 700;
    letter-spacing: 0;
    margin-right: 2px;
}

.kookoawpf-brand-cursor {
    animation: kookoawpf-blink 0.9s step-end 3;
}
.kookoawpf-brand-cursor.kookoawpf-blink-action {
    animation: kookoawpf-blink-action 0.9s step-end 3 !important;
}

@keyframes kookoawpf-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
@keyframes kookoawpf-blink-action {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.kookoawpf-sidebar-title .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: var(--kookoawpf-green);
}

.kookoawpf-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--kookoawpf-green);
    font-family: var(--kookoawpf-font);
    letter-spacing: 1px;
}

.kookoawpf-sidebar-actions {
    display: flex;
    gap: 4px;
}

.kookoawpf-sidebar-actions .button,
.kookoawpf-sidebar-actions .button.kookoawpf-btn-new,
#kookoawpf-btn-new-folder,
#kookoawpf-btn-new-dynamic {
    padding: 2px 6px;
    min-height: 28px;
    background: #0d1117 !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #2ea043 !important;
    color: #4ADE80 !important;
    box-shadow: none !important;
    outline: none !important;
}

.kookoawpf-sidebar-actions .button:hover,
.kookoawpf-sidebar-actions .button.kookoawpf-btn-new:hover,
#kookoawpf-btn-new-folder:hover,
#kookoawpf-btn-new-dynamic:hover {
    background: #161b22 !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #39FF14 !important;
    color: #39FF14 !important;
    box-shadow: none !important;
    outline: none !important;
}

.kookoawpf-sidebar-actions .button:focus,
.kookoawpf-sidebar-actions .button:active,
.kookoawpf-sidebar-actions .button.kookoawpf-btn-new:focus,
.kookoawpf-sidebar-actions .button.kookoawpf-btn-new:active,
#kookoawpf-btn-new-folder:focus,
#kookoawpf-btn-new-folder:active,
#kookoawpf-btn-new-dynamic:focus,
#kookoawpf-btn-new-dynamic:active {
    background: #0d1117 !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #2ea043 !important;
    color: #4ADE80 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Smart Folder button (lightning bolt): orange hover/focus/active to
   distinguish it from the green New Folder button next to it. */
#kookoawpf-btn-new-dynamic:hover {
    border-color: #FF9500 !important;
    color: #FF9500 !important;
}
#kookoawpf-btn-new-dynamic:focus,
#kookoawpf-btn-new-dynamic:active {
    border-color: #cc7700 !important;
    color: #FF9500 !important;
}

/* Collapse/Expand buttons - disabled state (no subfolders) */
.kookoawpf-sidebar-actions .button.kookoawpf-btn-disabled {
    background: var(--kookoawpf-bg-light) !important;
    border-color: var(--kookoawpf-border-light) !important;
    color: var(--kookoawpf-text-muted) !important;
    opacity: 0.5;
    cursor: not-allowed;
}

.kookoawpf-sidebar-actions .button.kookoawpf-btn-disabled:hover {
    background: var(--kookoawpf-bg-light) !important;
    border-color: var(--kookoawpf-border-light) !important;
    color: var(--kookoawpf-text-muted) !important;
}

.kookoawpf-sidebar-actions .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* New Folder Button */
.kookoawpf-btn-new {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--kookoawpf-green-dim) !important;
    border-color: var(--kookoawpf-green) !important;
    color: var(--kookoawpf-bg) !important;
    /* WP 7.0 Modern theme forces .button font-weight: 500. Force bold back. */
    font-weight: 700 !important;
    font-family: var(--kookoawpf-font);
    text-shadow: none;
    width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.kookoawpf-btn-new .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* WP 7.0 Modern theme forces .dashicons-plus-alt2 color to its accent blue
       with enough specificity to beat the global :where() rule. Force inherit
       here so the icon takes the button's green. */
    color: inherit !important;
}

.kookoawpf-btn-new:hover {
    background: var(--kookoawpf-green) !important;
    color: var(--kookoawpf-bg) !important;
    box-shadow: 0 0 8px var(--kookoawpf-green-glow-strong);
}

#kookoawpf-btn-new-folder {
    width: auto !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 8px !important;
    gap: 3px;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--kookoawpf-green) !important;
    text-shadow: 0 0 5px rgba(57, 255, 20, 0.45), 0 0 14px rgba(57, 255, 20, 0.25);
}

#kookoawpf-btn-new-folder .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

#kookoawpf-btn-new-dynamic {
    font-size: 17px;
    width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
}

#kookoawpf-btn-new-dynamic.kookoawpf-btn-new {
    border-color: var(--kookoawpf-border-light) !important;
}

.kookoawpf-btn-new.kookoawpf-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Export/Import Icon Buttons */
.kookoawpf-btn-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 1px solid var(--kookoawpf-border) !important;
    color: var(--kookoawpf-text-muted) !important;
    width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    line-height: 1 !important;
    cursor: pointer;
}
.kookoawpf-btn-icon .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
}
.kookoawpf-btn-icon:hover {
    background: var(--kookoawpf-green-dim) !important;
    border-color: var(--kookoawpf-green) !important;
    color: var(--kookoawpf-green) !important;
    box-shadow: 0 0 6px var(--kookoawpf-green-glow);
}

/* ================================================
   5. Sort Toolbar
   ================================================ */
.kookoawpf-sidebar-sort {
    padding: 6px 14px;
    border-bottom: 1px solid var(--kookoawpf-border);
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
}
.kookoawpf-sort-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    background: none;
    border: 1px solid transparent;
    color: var(--kookoawpf-text-muted);
    font-family: var(--kookoawpf-font);
    font-size: 13px;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 0;
    text-align: left;
}
.kookoawpf-sort-toggle:hover {
    color: var(--kookoawpf-green);
    border-color: var(--kookoawpf-border);
    background: var(--kookoawpf-bg-hover);
}
.kookoawpf-sort-toggle .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}
.kookoawpf-sort-label {
    flex: 1;
    font-size: 13px;
}
.kookoawpf-sort-current {
    color: var(--kookoawpf-green);
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.kookoawpf-sort-current .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--kookoawpf-green);
}

/* Sort Dropdown */
.kookoawpf-sort-dropdown {
    position: absolute;
    top: 100%;
    left: 6px;
    right: 6px;
    z-index: 10000;
    background: var(--kookoawpf-bg);
    border: 1px solid var(--kookoawpf-green);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 10px rgba(57, 255, 20, 0.1);
    padding: 8px 0;
}
.kookoawpf-sort-group-title {
    padding: 6px 14px 4px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--kookoawpf-green);
    font-family: var(--kookoawpf-font);
    font-weight: 700;
}
.kookoawpf-sort-option,
.kookoawpf-sort-dir {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    color: var(--kookoawpf-text);
    text-decoration: none;
    font-size: 13px;
    font-family: var(--kookoawpf-font);
    cursor: pointer;
    transition: background 0.15s;
    background: transparent;
}
.kookoawpf-sort-option:hover,
.kookoawpf-sort-dir:hover {
    background: var(--kookoawpf-bg-hover);
    color: var(--kookoawpf-green);
}
.kookoawpf-sort-option:focus,
.kookoawpf-sort-dir:focus {
    outline: none;
    box-shadow: none;
}
.kookoawpf-sort-option:focus-visible,
.kookoawpf-sort-dir:focus-visible {
    outline: 2px solid var(--kookoawpf-green-dim);
    outline-offset: -2px;
}
.kookoawpf-sort-option .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--kookoawpf-green-soft);
}
.kookoawpf-sort-dir .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--kookoawpf-text-muted);
}
.kookoawpf-sort-option:hover .dashicons {
    color: var(--kookoawpf-green);
}
.kookoawpf-sort-dir:hover .dashicons {
    color: var(--kookoawpf-green);
}
.kookoawpf-sort-active {
    background: rgba(57, 255, 20, 0.10) !important;
    color: var(--kookoawpf-green) !important;
}
.kookoawpf-sort-active .dashicons {
    color: var(--kookoawpf-green) !important;
}
.kookoawpf-sort-active::after {
    content: '✓';
    margin-left: auto;
    color: var(--kookoawpf-green);
    font-size: 14px;
    font-weight: 700;
}
.kookoawpf-sort-disabled {
    opacity: 0.35;
    pointer-events: none;
}
.kookoawpf-sort-hint {
    color: var(--kookoawpf-orange);
    font-size: 13px;
    font-weight: 700;
}
.kookoawpf-sort-sep {
    height: 1px;
    background: var(--kookoawpf-border);
    margin: 6px 0;
}

/* ================================================
   6. More Menu (⋮)
   ================================================ */
.kookoawpf-more-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    color: var(--kookoawpf-text-muted);
    cursor: pointer;
    border-radius: 0;
    transition: all 0.15s;
    flex-shrink: 0;
    margin-left: auto;
}
.kookoawpf-more-toggle:hover {
    color: var(--kookoawpf-green);
    border-color: var(--kookoawpf-border);
    background: var(--kookoawpf-bg-hover);
}
.kookoawpf-more-toggle .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    transform: rotate(90deg);
}
.kookoawpf-more-dropdown {
    position: absolute;
    top: 100%;
    right: 6px;
    left: auto;
    z-index: 10000;
    background: var(--kookoawpf-bg);
    border: 1px solid var(--kookoawpf-green);
    box-shadow: 0 4px 20px rgba(0,0,0,0.8), 0 0 10px rgba(57,255,20,0.1);
    padding: 6px 0;
    min-width: 180px;
}
.kookoawpf-more-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    color: var(--kookoawpf-text);
    text-decoration: none;
    font-size: 13px;
    font-family: var(--kookoawpf-font);
    cursor: pointer;
    transition: background 0.15s;
    background: transparent;
}
.kookoawpf-more-option:visited,
.kookoawpf-more-option:active {
    color: var(--kookoawpf-text);
}
.kookoawpf-more-option:visited:hover {
    color: var(--kookoawpf-green);
}
.kookoawpf-more-option:hover {
    background: var(--kookoawpf-bg-hover);
    color: var(--kookoawpf-green);
}
.kookoawpf-more-option:focus {
    outline: none;
    box-shadow: none;
    color: var(--kookoawpf-text);
}
.kookoawpf-more-option:focus:hover {
    outline: none;
    box-shadow: none;
    color: var(--kookoawpf-green);
}
.kookoawpf-more-option .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--kookoawpf-green-soft);
}
.kookoawpf-more-option:hover .dashicons {
    color: var(--kookoawpf-green);
}
.kookoawpf-more-option.kookoawpf-more-active {
    background: rgba(57, 255, 20, 0.1);
    color: var(--kookoawpf-green);
}
.kookoawpf-more-option.kookoawpf-more-active .dashicons {
    color: var(--kookoawpf-green);
}
.kookoawpf-more-option.kookoawpf-more-active::after {
    content: '✓';
    margin-left: auto;
    color: var(--kookoawpf-green);
    font-size: 14px;
    font-weight: 700;
}

/* More dropdown — PRO-locked option (free): dim label + icon, keep PRO badge
   fully opaque. Pure visual indicator, click is intercepted in JS to do nothing. */
.kookoawpf-more-option.kookoawpf-more-pro {
    cursor: default;
}
.kookoawpf-more-option.kookoawpf-more-pro > .dashicons,
.kookoawpf-more-option.kookoawpf-more-pro > .kookoawpf-more-label {
    opacity: 0.35;
}
.kookoawpf-more-option.kookoawpf-more-pro:hover {
    background: transparent;
    color: var(--kookoawpf-text);
}
.kookoawpf-more-option.kookoawpf-more-pro:hover > .dashicons {
    color: var(--kookoawpf-green-soft);
}

/* More dropdown — submenu (Export/Import) */
.kookoawpf-more-has-sub {
    position: relative;
}
.kookoawpf-more-has-sub > .kookoawpf-more-option {
    justify-content: flex-start;
}
.kookoawpf-more-arrow {
    margin-left: auto;
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
    color: var(--kookoawpf-green-dim);
}
.kookoawpf-more-has-sub.kookoawpf-more-sub-open > .kookoawpf-more-option .kookoawpf-more-arrow {
    color: var(--kookoawpf-green);
}
.kookoawpf-more-submenu {
    display: none;
    position: absolute;
    top: -6px;
    left: 100%;
    z-index: 10001;
    background: var(--kookoawpf-bg);
    border: 1px solid var(--kookoawpf-green);
    box-shadow: 0 4px 20px rgba(0,0,0,0.8), 0 0 10px rgba(57,255,20,0.1);
    padding: 6px 0;
    min-width: 170px;
}
.kookoawpf-more-has-sub.kookoawpf-more-sub-open > .kookoawpf-more-submenu {
    display: block;
}

/* Folder ID badge */
.kookoawpf-folder-id-badge {
    font-size: 11px;
    font-family: var(--kookoawpf-font);
    color: #FF9500;
    margin-right: 3px;
    vertical-align: middle;
    letter-spacing: 0.5px;
}

/* ================================================
   6.5 Migration hint (sits between sidebar header and search)
   ================================================ */
.kookoawpf-sidebar-migrate-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: var(--kookoawpf-bg);
    border-top: 2px solid #FF9500;
    border-bottom: 2px solid #FF9500;
    flex-shrink: 0;
}
.kookoawpf-sidebar-migrate-hint-link {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    color: #FF9500;
    font-family: 'Share Tech Mono', monospace;
    font-size: 15px;
    text-decoration: none;
    line-height: 1.3;
    transition: color 0.15s;
}
.kookoawpf-sidebar-migrate-hint-link:hover,
.kookoawpf-sidebar-migrate-hint-link:focus,
.kookoawpf-sidebar-migrate-hint-link:active {
    color: #39FF14;
    text-decoration: none;
    outline: none;
    box-shadow: none;
}
.kookoawpf-sidebar-migrate-hint-line1 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.kookoawpf-sidebar-migrate-hint-line1--multi {
    font-size: 14px;
}
.kookoawpf-sidebar-migrate-hint-line1 .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}
.kookoawpf-sidebar-migrate-hint-link:hover .kookoawpf-sidebar-migrate-hint-line2 {
    text-decoration: underline;
}
.kookoawpf-sidebar-migrate-hint-line2 {
    font-weight: bold;
    letter-spacing: 0.5px;
}
.kookoawpf-sidebar-migrate-hint-dismiss {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: #ffffff;
    cursor: pointer;
    font-size: 36px;
    line-height: 1;
    padding: 0 4px;
    font-family: inherit;
    transition: color 0.15s;
}
.kookoawpf-sidebar-migrate-hint-dismiss:hover,
.kookoawpf-sidebar-migrate-hint-dismiss:focus,
.kookoawpf-sidebar-migrate-hint-dismiss:active {
    color: #FF3B30;
    outline: none;
    box-shadow: none;
}

/* ================================================
   7. Search
   ================================================ */
.kookoawpf-sidebar-search {
    padding: 8px 14px;
    border-bottom: 1px solid var(--kookoawpf-border);
    flex-shrink: 0;
    background: var(--kookoawpf-bg);
}

.kookoawpf-sidebar-search input {
    width: 100%;
    padding: 6px 10px;
    font-size: var(--kookoawpf-tree-font-size) !important;
    border: 1px solid var(--kookoawpf-border-light);
    border-radius: 4px;
    background: var(--kookoawpf-bg-light);
    color: var(--kookoawpf-green-soft);
    font-family: var(--kookoawpf-font);
}

.kookoawpf-sidebar-search input::placeholder {
    color: var(--kookoawpf-text-muted);
}
.kookoawpf-sidebar-search input:focus::placeholder {
    color: transparent;
}

.kookoawpf-sidebar-search input:focus {
    border-color: var(--kookoawpf-green);
    box-shadow: 0 0 0 1px var(--kookoawpf-green-dim), 0 0 8px var(--kookoawpf-green-glow);
    outline: none;
    color: var(--kookoawpf-green);
}

/* ================================================
   8. Navigation (All Items / Uncategorized)
   ================================================ */
.kookoawpf-sidebar-nav {
    padding: 6px 8px;
    border-bottom: 1px solid var(--kookoawpf-border);
    flex-shrink: 0;
    background: var(--kookoawpf-bg);
}

.kookoawpf-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px 7px 15px;
    border-radius: 4px;
    color: var(--kookoawpf-text);
    text-decoration: none;
    font-size: var(--kookoawpf-tree-font-size);
    font-family: var(--kookoawpf-font);
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}

.kookoawpf-nav-item:hover,
.kookoawpf-nav-item:focus,
.kookoawpf-nav-item:active {
    background: var(--kookoawpf-bg-hover) !important;
    color: var(--kookoawpf-green) !important;
    outline: none !important;
    box-shadow: none !important;
}

.kookoawpf-nav-item:hover .kookoawpf-nav-count,
.kookoawpf-nav-item:focus .kookoawpf-nav-count,
.kookoawpf-nav-item:active .kookoawpf-nav-count {
    color: var(--kookoawpf-green) !important;
}

.kookoawpf-nav-item.active,
.kookoawpf-nav-item.active:hover,
.kookoawpf-nav-item.active:focus,
.kookoawpf-nav-item.active:active,
.kookoawpf-nav-item.active:visited {
    background: rgba(57, 255, 20, 0.10) !important;
    color: var(--kookoawpf-green) !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

.kookoawpf-nav-item.active .kookoawpf-nav-count,
.kookoawpf-nav-item.active:hover .kookoawpf-nav-count,
.kookoawpf-nav-item.active:focus .kookoawpf-nav-count,
.kookoawpf-nav-item.active:active .kookoawpf-nav-count,
.kookoawpf-nav-item.active:visited .kookoawpf-nav-count {
    color: var(--kookoawpf-green) !important;
}

/* Green left bar on active nav item via pseudo-element */
.kookoawpf-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: #39FF14;
    border-radius: 0;
}

.kookoawpf-nav-item .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.kookoawpf-nav-label { flex: 1; }

.kookoawpf-nav-count {
    font-size: var(--kookoawpf-tree-font-size);
    opacity: 1;
    color: #ffffff;
}

/* ================================================
   9. Tree Container & Empty States
   ================================================ */
.kookoawpf-tree-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    background: var(--kookoawpf-bg);
}

/* Custom scrollbar for sidebar */
.kookoawpf-tree-container {
    scrollbar-color: var(--kookoawpf-green-dim) var(--kookoawpf-bg);
}
.kookoawpf-tree-container::-webkit-scrollbar { width: 10px; }
.kookoawpf-tree-container::-webkit-scrollbar-track { background: var(--kookoawpf-bg); }
.kookoawpf-tree-container::-webkit-scrollbar-thumb { background: var(--kookoawpf-green-dim); border-radius: 5px; }
.kookoawpf-tree-container::-webkit-scrollbar-thumb:hover { background: var(--kookoawpf-green); }

/* Empty state — shown when 0 folders */
.kookoawpf-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 16px 24px;
    text-align: center;
    flex: 1;
    background: var(--kookoawpf-bg);
}
.kookoawpf-empty-state-img-wrap {
    position: relative;
    width: 300px;
    max-width: 100%;
    margin-bottom: 16px;
    line-height: 0;
    filter: brightness(1.1);
}
.kookoawpf-empty-state-img {
    width: 300px;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid var(--kookoawpf-green);
    opacity: 0.85;
    margin-bottom: 16px;
}
.kookoawpf-empty-state-img-wrap .kookoawpf-empty-state-img {
    display: block;
    width: 100%;
    margin-bottom: 0;
}
.kookoawpf-empty-state-img-wrap .kookoawpf-empty-state-img--hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}
.kookoawpf-empty-state:hover .kookoawpf-empty-state-img-wrap .kookoawpf-empty-state-img--base,
.kookoawpf-empty-state.kookoawpf-empty-state--active .kookoawpf-empty-state-img-wrap .kookoawpf-empty-state-img--base {
    opacity: 0;
}
.kookoawpf-empty-state:hover .kookoawpf-empty-state-img-wrap .kookoawpf-empty-state-img--hover,
.kookoawpf-empty-state.kookoawpf-empty-state--active .kookoawpf-empty-state-img-wrap .kookoawpf-empty-state-img--hover {
    opacity: 0.85;
}
.kookoawpf-empty-state-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 16px;
    color: var(--kookoawpf-green);
    margin: 0 0 16px;
}
.kookoawpf-empty-state-btn {
    font-family: 'Share Tech Mono', monospace;
    font-size: 15px;
    color: #4ADE80;
    background: #0d1117;
    border: 2px solid #2ea043;
    padding: 6px 14px;
    min-height: 28px;
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: none;
    outline: none;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.kookoawpf-empty-state-btn:hover {
    background: #161b22;
    color: #39FF14;
    border: 2px solid #39FF14;
}
.kookoawpf-empty-state-btn .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Modal empty state */
.kookoawpf-modal-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 16px 24px;
    text-align: center;
    flex: 1;
    background: var(--kookoawpf-bg);
}

/* ================================================
   10. jstree Customizations
   ================================================ */

/* --- Nodes & Anchors --- */
#kookoawpf-jstree .jstree-node {
    margin-left: 10px;
    position: relative;
    min-height: 32px;
    line-height: 32px;
}

#kookoawpf-jstree .jstree-anchor {
    min-width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    padding: 0 38px 0 8px;
    border-radius: 0;
    font-size: var(--kookoawpf-tree-font-size);
    height: 32px;
    line-height: 32px;
    color: #fff !important;
    font-family: var(--kookoawpf-font);
    vertical-align: top;
    box-sizing: border-box;
}

/* Folder text truncation — only the text span clips, icons stay visible */
#kookoawpf-jstree .kookoawpf-folder-text {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 32px;
}

/* --- OCL toggle (+/-) --- */
#kookoawpf-jstree .jstree-icon.jstree-ocl {
    vertical-align: top;
}

#kookoawpf-jstree .jstree-node > .jstree-icon.jstree-ocl {
    background-image: none !important;
    position: relative;
    width: 18px;
    height: 32px;
    line-height: 32px;
    margin-right: 0;
    vertical-align: top;
}
#kookoawpf-jstree .jstree-closed > .jstree-icon.jstree-ocl::after {
    content: '+';
    position: absolute;
    top: 2px; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    background: var(--kookoawpf-bg, #0d1117);
    z-index: 3;
}
#kookoawpf-jstree .jstree-open > .jstree-icon.jstree-ocl::after {
    content: '−';
    position: absolute;
    top: 2px; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    background: var(--kookoawpf-bg, #0d1117);
    z-index: 3;
}
/* Hide + / − on leaf nodes (no children) */
#kookoawpf-jstree .jstree-leaf > .jstree-icon.jstree-ocl::after {
    display: none;
}

/* --- Folder Icons --- */
.kookoawpf-folder-icon:before { content: none; }

#kookoawpf-jstree .jstree-icon.kookoawpf-folder-icon {
    background-image: none !important;
    width: 26px;
    height: 32px;
    line-height: 32px;
    vertical-align: top;
}

.kookoawpf-svg-folder {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -2px;
    transition: color 0.15s;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2));
}

/* Emoji folder icon (custom) */
.kookoawpf-emoji-icon {
    display: inline-block;
    font-size: 18px;
    line-height: 32px;
    vertical-align: middle;
    position: relative;
    top: 0;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif;
    font-style: normal;
}

/* --- Hover & Selection States --- */
#kookoawpf-jstree .jstree-anchor:hover,
#kookoawpf-jstree .jstree-anchor.kookoawpf-hover-sync {
    background: var(--kookoawpf-bg-hover) !important;
    color: var(--kookoawpf-green) !important;
}

/* Disable hover highlight on dynamic nodes during item drag */
.kookoawpf-dragging #kookoawpf-jstree .kookoawpf-dynamic-node > .jstree-anchor:hover {
    background: transparent !important;
    color: var(--kookoawpf-text) !important;
}

/* Disable hover highlight on ALL nodes during folder tree drag (reorder)
   except when drag-in is active (drop inside) */
.kookoawpf-tree-dragging #kookoawpf-jstree .jstree-node:not(.drag-in) > .jstree-anchor:hover {
    background: transparent !important;
    color: var(--kookoawpf-text) !important;
}

/* Active folder: override jstree defaults */
#kookoawpf-jstree .jstree-clicked {
    background: transparent !important;
    color: var(--kookoawpf-green) !important;
    box-shadow: none !important;
}

#kookoawpf-jstree .jstree-anchor:focus,
#kookoawpf-jstree .jstree-anchor:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

#kookoawpf-jstree .kookoawpf-context-active > .jstree-anchor {
    background: var(--kookoawpf-green-glow-strong) !important;
    color: var(--kookoawpf-green) !important;
    outline: 2px dashed var(--kookoawpf-green-dim) !important;
}

#kookoawpf-jstree .jstree-hovered {
    background: var(--kookoawpf-bg-hover) !important;
    color: var(--kookoawpf-green) !important;
    box-shadow: none !important;
}

#kookoawpf-jstree .jstree-wholerow-clicked {
    background: transparent !important;
}

#kookoawpf-jstree .jstree-wholerow-hovered {
    background: var(--kookoawpf-bg-hover) !important;
}

/* Active folder: sharp corners override */
#kookoawpf-jstree .jstree-wholerow-clicked,
#kookoawpf-jstree .jstree-anchor.jstree-clicked {
    border-radius: 0 !important;
}

/* Active folder: full-row green background (matches All Items / Uncategorized) */
#kookoawpf-jstree .kookoawpf-node-active > .jstree-anchor {
    background: rgba(57, 255, 20, 0.10) !important;
}

/* --- Drop Hover --- */
.kookoawpf-drop-hover > .jstree-anchor,
.kookoawpf-nav-item.kookoawpf-drop-hover {
    background: var(--kookoawpf-green-glow-strong) !important;
    color: var(--kookoawpf-green) !important;
    outline: 2px dashed var(--kookoawpf-green-dim);
}

/* --- jstree dots, lines, background reset --- */
.jstree-default .jstree-node,
.jstree-default .jstree-icon {
    background-image: none;
}

/* --- Counts --- */
#kookoawpf-jstree .jstree-node > .kookoawpf-count {
    position: absolute;
    right: 8px;
    top: 0;
    font-size: var(--kookoawpf-tree-font-size);
    line-height: 32px;
    color: #ffffff !important;
    pointer-events: none;
    z-index: 2;
}

#kookoawpf-jstree .jstree-node > .jstree-anchor:hover ~ .kookoawpf-count {
    color: var(--kookoawpf-green) !important;
}

/* Hide item counts when "Show item count" setting is disabled */
.kookoawpf-hide-counts .kookoawpf-count,
.kookoawpf-hide-counts .kookoawpf-nav-count {
    display: none !important;
}

/* --- Lock / Pin badge icons --- */
.kookoawpf-badge-icon {
    margin-left: 4px;
    vertical-align: middle;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.kookoawpf-badge-icon .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 14px;
}

.kookoawpf-badge-pin .dashicons {
    color: #F5BF42;
}

.kookoawpf-badge-lock .dashicons {
    color: #F5BF42;
}

/* --- Search result highlight --- */
#kookoawpf-jstree .jstree-search,
#kookoawpf-jstree .jstree-anchor.jstree-search,
#kookoawpf-jstree .jstree-anchor.jstree-search .kookoawpf-folder-text {
    color: #FF9500 !important;
    font-style: normal !important;
    font-weight: bold !important;
}

/* --- Loading throbber hide --- */
#kookoawpf-jstree .jstree-loading > .jstree-ocl,
.jstree-default .jstree-loading > .jstree-ocl {
    background: none !important;
}

/* Hide the "Loading ..." text node that flashes during refresh */
#kookoawpf-jstree .jstree-initial-node,
#kookoawpf-jstree .jstree-loading {
    display: none !important;
}

/* ================================================
   11. Tooltips (Dynamic + Metadata)
   ================================================ */

/* "RULES" label on dynamic folder nodes */
.kookoawpf-rules-label {
    font-size: 11px;
    font-family: var(--kookoawpf-font);
    color: #FF9500;
    text-decoration: underline;
    cursor: pointer;
    margin-left: 4px;
    letter-spacing: 0.5px;
}
.kookoawpf-rules-label:hover {
    color: #FF9500;
}

.kookoawpf-dynamic-tooltip {
    position: absolute;
    z-index: 999999;
    background: var(--kookoawpf-bg);
    border: 2px solid var(--kookoawpf-green-dim);
    border-radius: 0;
    padding: 10px 14px;
    min-width: 180px;
    max-width: 280px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    font-family: var(--kookoawpf-font);
    font-size: 13px;
    color: var(--kookoawpf-text);
    pointer-events: auto;
}

.kookoawpf-tip-title {
    font-size: 13px;
    font-weight: bold;
    color: var(--kookoawpf-orange);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.kookoawpf-tip-rules {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kookoawpf-tip-rules li {
    padding-top: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--kookoawpf-green);
}

.kookoawpf-tip-rules li:last-child {
    border-bottom: none;
    padding-bottom: 3px;
}

.kookoawpf-tip-field {
    color: var(--kookoawpf-text-muted);
}

.kookoawpf-tip-value {
    color: var(--kookoawpf-green);
}

/* Metadata Tooltip */
.kookoawpf-metadata-tooltip {
    position: absolute;
    z-index: 999999;
    background: var(--kookoawpf-bg);
    border: 2px solid var(--kookoawpf-green-dim);
    border-radius: 0;
    padding: 10px 14px;
    min-width: 160px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    font-family: var(--kookoawpf-font);
    font-size: 13px;
    color: var(--kookoawpf-text);
    pointer-events: none;
}

.kookoawpf-meta-title {
    font-size: 13px;
    font-weight: bold;
    color: var(--kookoawpf-orange);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.kookoawpf-meta-table {
    border-spacing: 14px 0;
    margin-left: -14px;
}

.kookoawpf-meta-table td {
    padding: 2px 0;
    border: none;
    vertical-align: top;
}

.kookoawpf-meta-label {
    color: #ffffff;
    padding-right: 21px;
    white-space: nowrap;
}

.kookoawpf-meta-value {
    color: var(--kookoawpf-green);
    white-space: nowrap;
}

/* EXIF block — separator + title inherits orange from .kookoawpf-meta-title */
.kookoawpf-meta-title-exif {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--kookoawpf-green-dim);
}

/* ================================================
   12. Drag & Drop
   ================================================ */
.kookoawpf-drag-helper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    background: var(--kookoawpf-bg-light);
    color: var(--kookoawpf-green);
    border: 2px solid var(--kookoawpf-green);
    border-radius: 6px;
    font-size: 13px;
    font-family: var(--kookoawpf-font);
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(57, 255, 20, 0.25);
    pointer-events: none;
    position: relative;
}
.kookoawpf-drag-helper .kookoawpf-drag-thumb {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--kookoawpf-border);
}
.kookoawpf-drag-helper .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: var(--kookoawpf-green);
}
.kookoawpf-drag-helper .kookoawpf-drag-label {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kookoawpf-drag-helper .kookoawpf-drag-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    color: #0d1117;
    background: var(--kookoawpf-green);
    border-radius: 9px;
    padding: 0 4px;
}

/* ================================================
   13. Resize Handle
   ================================================ */
.kookoawpf-sidebar-resize {
    position: absolute;
    top: 0;
    right: -12px;
    bottom: 0;
    width: 24px;
    cursor: col-resize;
    z-index: 999;
}
.kookoawpf-has-scrollbar .kookoawpf-sidebar-resize {
    right: -16px;
    width: 16px;
}
.kookoawpf-has-scrollbar .kookoawpf-sidebar-resize::after {
    border-radius: 0 4px 4px 0;
}
.kookoawpf-has-scrollbar .kookoawpf-sidebar-resize:hover::after {
    border-top: 3px solid black;
    border-right: 3px solid black;
    border-bottom: 3px solid black;
}

/* Grip pill — sits on the inner edge of the border */
.kookoawpf-sidebar-resize::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    width: 8px;
    height: 58px;
    border-radius: 4px 0 0 4px;
    background: var(--kookoawpf-green-dim);
    transition: background 0.2s, box-shadow 0.2s, height 0.2s;
}

.kookoawpf-sidebar-resize:hover::after {
    background: var(--kookoawpf-green);
    box-shadow: 0 0 8px var(--kookoawpf-green-glow);
    height: 66px;
}

.kookoawpf-sidebar-resize:active::after {
    background: var(--kookoawpf-green);
    box-shadow: 0 0 12px var(--kookoawpf-green-glow);
    height: 74px;
}

/* ================================================
   14. Toggle Sidebar & Collapsed
   ================================================ */
.kookoawpf-toggle-sidebar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 60px;
    padding: 0;
    background: var(--kookoawpf-bg);
    border: 5px solid var(--kookoawpf-green-dim);
    border-radius: 0 0 4px 0;
    cursor: pointer;
    transition: all 0.2s;
    position: absolute;
    right: -33px;
    top: -5px;
    z-index: 1000;
    /* Inner .kookoawpf-toggle-arrow inherits color via the global
       [class*="kookoawpf-"] .dashicons { color: inherit } rule, so we must set
       it explicitly here. Without this, the arrow inherits from body (black). */
    color: var(--kookoawpf-green);
}

.kookoawpf-toggle-sidebar:hover {
    background: var(--kookoawpf-bg-hover);
    border-color: var(--kookoawpf-green);
    color: var(--kookoawpf-green-soft);
}

.kookoawpf-toggle-arrow {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: var(--kookoawpf-green);
    transition: color 0.2s;
}

.kookoawpf-toggle-sidebar:hover .kookoawpf-toggle-arrow {
    color: var(--kookoawpf-green-soft);
}

/* Collapsed sidebar styles */
.kookoawpf-sidebar-wrapper.kookoawpf-collapsed {
    width: 0 !important;
    border: none !important;
    padding: 0;
    overflow: visible;
}
.kookoawpf-sidebar-wrapper.kookoawpf-collapsed > *:not(.kookoawpf-toggle-sidebar) {
    display: none !important;
}
.kookoawpf-sidebar-wrapper.kookoawpf-collapsed .kookoawpf-toggle-sidebar {
    right: -32px;
    top: 0;
}

body.kookoawpf-sidebar-collapsed #wpcontent {
    padding-left: 40px !important;
}

/* ================================================
   15. Folder Column (List View)
   ================================================ */
.column-kookoawpf_folder {
    width: 10%;
}

.kookoawpf-folder-tag {
    display: inline-block;
    margin: 1px 2px;
}

.kookoawpf-uncategorized {
    color: #a7aaad;
    font-style: italic;
}

/* ================================================
   16. Loading Indicator
   ================================================ */
.kookoawpf-loading {
    text-align: center;
    padding: 20px;
    color: var(--kookoawpf-green-dim);
    font-family: var(--kookoawpf-font);
}

.kookoawpf-loading:after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--kookoawpf-border-light);
    border-top-color: var(--kookoawpf-green);
    border-radius: 50%;
    animation: kookoawpf-spin 0.6s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

@keyframes kookoawpf-spin {
    to { transform: rotate(360deg); }
}

/* ================================================
   17. Responsive
   ================================================ */
@media screen and (max-width: 960px) {
    .kookoawpf-sidebar-wrapper { left: 36px; }
}

@media screen and (max-width: 782px) {
    .kookoawpf-sidebar-wrapper { left: 0; width: 240px !important; }
    body.kookoawpf-has-sidebar #wpcontent { padding-left: 270px; }
}

@media screen and (max-width: 600px) {
    .kookoawpf-sidebar-wrapper { top: 46px; }
}

/* ── Folder stats bar + Upgrade link (sidebar footer) ─────────── */
.kookoawpf-free-limits {
    border-top: 1px solid #39FF14;
    padding: 8px 12px;
    background: #0d1117;
}
.kookoawpf-free-limits-row {
    display: flex;
    justify-content: space-between;
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    color: #ffffff;
    padding: 6px 0;
}
.kookoawpf-free-limits-row em {
    font-style: normal;
    color: #39FF14;
    margin-left: 2px;
}
.kookoawpf-free-limits-upgrade-wrap {
    display: flex;
    align-items: center;
}
.kookoawpf-free-limits-version {
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    color: #39FF14;
}
.kookoawpf-free-limits-upgrade {
    font-family: 'Share Tech Mono', monospace;
    font-size: 15px;
    font-weight: bold;
    color: #FF9500;
    text-decoration: none;
    margin-left: auto;
}
.kookoawpf-free-limits-upgrade:hover,
.kookoawpf-free-limits-upgrade:visited:hover {
    color: #39FF14;
}
.kookoawpf-free-limits-upgrade:visited,
.kookoawpf-free-limits-upgrade:focus {
    color: #FF9500;
    outline: none;
    box-shadow: none;
}
.kookoawpf-free-limits-thanks,
.kookoawpf-free-limits-thanks:hover {
    color: #FF9500;
    cursor: default;
}

/* Bootstrap mask: hide the server-rendered "All items" grid while the
   initial filtered refetch is in flight when the page loads with a
   ?kookoawpf_folder=… in the URL. Removed by admin.js once Backbone has
   reset the collection to the filtered models. */
body.kookoawpf-grid-loading .attachments-browser ul.attachments {
    visibility: hidden;
}