/* ================================================
   KooKoa Folders — Bulk CSS
   Bulk Organize (Grid/List) + Folder Bulk Actions
   ================================================ */

/* ================================================
   Bulk Organize Button (List View)
   ================================================ */
/* List View - Bulk Organize Button spacing */
#kookoawpf-btn-bulk-organize-list {
    margin-left: 8px;
    vertical-align: middle;
}
#kookoawpf-btn-bulk-organize-list:disabled,
#kookoawpf-btn-bulk-organize-list[disabled] {
    background: var(--kookoawpf-bg) !important;
    border: 3px solid transparent !important;
    color: var(--kookoawpf-green) !important;
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* Grid View - Bulk Organize Button
   WP applies heavy styling to .button.media-button inside .mode-select,
   so we chain multiple classes and use body-level qualifier for max specificity. */
.kookoawpf-btn-bulk-organize,
.kookoawpf-btn-bulk-organize.button,
.kookoawpf-btn-bulk-organize.media-button,
.kookoawpf-btn-bulk-organize.button.media-button,
.mode-select .kookoawpf-btn-bulk-organize,
.mode-select .kookoawpf-btn-bulk-organize.button.media-button,
body.mode-select .kookoawpf-btn-bulk-organize,
.media-toolbar .kookoawpf-btn-bulk-organize,
.media-toolbar-secondary .kookoawpf-btn-bulk-organize,
.media-toolbar-mode-select .kookoawpf-btn-bulk-organize,
.media-toolbar-mode-select .media-toolbar-secondary .kookoawpf-btn-bulk-organize,
.kookoawpf-bulk-active .kookoawpf-btn-bulk-organize,
.kookoawpf-bulk-active .kookoawpf-btn-bulk-organize.button.media-button {
    background: var(--kookoawpf-bg) !important;
    border: 3px solid transparent !important;
    color: var(--kookoawpf-green) !important;
    font-weight: 600;
    font-family: var(--kookoawpf-font);
    box-shadow: none !important;
    text-shadow: none !important;
}

.kookoawpf-btn-bulk-organize:hover,
.kookoawpf-btn-bulk-organize:focus,
.kookoawpf-btn-bulk-organize.button:hover,
.kookoawpf-btn-bulk-organize.media-button:hover,
.kookoawpf-btn-bulk-organize.button.media-button:hover,
body.mode-select .kookoawpf-btn-bulk-organize:hover,
body.mode-select .kookoawpf-btn-bulk-organize:focus,
body.mode-select .kookoawpf-btn-bulk-organize.button.media-button:hover,
.media-toolbar .kookoawpf-btn-bulk-organize:hover,
.media-toolbar-secondary .kookoawpf-btn-bulk-organize:hover,
.media-toolbar-mode-select .kookoawpf-btn-bulk-organize:hover,
.media-toolbar-mode-select .media-toolbar-secondary .kookoawpf-btn-bulk-organize:hover,
.kookoawpf-bulk-active .kookoawpf-btn-bulk-organize:hover,
.kookoawpf-bulk-active .kookoawpf-btn-bulk-organize.button.media-button:hover {
    background: var(--kookoawpf-green) !important;
    color: var(--kookoawpf-bg) !important;
    border: 3px solid black !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Grid View - Folder Filter Dropdown */
.kookoawpf-grid-filter {
    border: 1px solid var(--kookoawpf-border-light);
    border-radius: 4px;
    color: var(--kookoawpf-text);
    font-family: var(--kookoawpf-font);
}

/* Grid View - Move dropdown in bulk-select-mode toolbar */
.kookoawpf-grid-move-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* float: right works in WP 6.x where .media-toolbar-secondary is block-level.
       WP 7.0 turned the parent into flexbox → float is ignored. margin-left: auto
       pushes us to the right edge under flex (and is a no-op under block). */
    float: right;
    margin: 10px 0 10px auto;
    flex-wrap: wrap;
}

.kookoawpf-btn-bulk-action {
    /* WP 7.0 Modern theme: force inline-flex + lock min-height so the button stays
       compact and the dashicon stays centered with the text. */
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    /* WP 7.0 Modern theme forces .button font-weight: 400 — override to keep our bold label. */
    font-weight: 700 !important;
    font-family: var(--kookoawpf-font);
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.4 !important;
    white-space: nowrap;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.kookoawpf-grid-move-wrapper .kookoawpf-btn-select-all,
.kookoawpf-btn-select-all.kookoawpf-btn-bulk-action {
    background: var(--kookoawpf-bg) !important;
    color: var(--kookoawpf-green) !important;
    border: 3px solid transparent !important;
    box-shadow: none !important;
}

.kookoawpf-grid-move-wrapper .kookoawpf-btn-select-all:hover:not([disabled]),
.kookoawpf-btn-select-all.kookoawpf-btn-bulk-action:hover:not([disabled]) {
    background: var(--kookoawpf-green) !important;
    color: var(--kookoawpf-bg) !important;
    border: 3px solid black !important;
    box-shadow: none !important;
}

.kookoawpf-grid-move-wrapper .kookoawpf-btn-select-all[disabled],
.kookoawpf-btn-select-all.kookoawpf-btn-bulk-action[disabled] {
    background: var(--kookoawpf-bg) !important;
    color: var(--kookoawpf-green) !important;
    border: 3px solid transparent !important;
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.kookoawpf-grid-move-wrapper .kookoawpf-btn-download,
.kookoawpf-btn-download.kookoawpf-btn-bulk-action {
    background: #007AFF !important;
    color: #fff !important;
    border: 3px solid #007AFF !important;
    box-shadow: none !important;
}

.kookoawpf-grid-move-wrapper .kookoawpf-btn-download:hover,
.kookoawpf-btn-download.kookoawpf-btn-bulk-action:hover {
    background: #0056CC !important;
    border: 3px solid #1d2327 !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* Download button — disabled state */
.kookoawpf-grid-move-wrapper .kookoawpf-btn-download[disabled],
.kookoawpf-btn-download.kookoawpf-btn-bulk-action[disabled],
button.kookoawpf-btn-download[disabled] {
    background: #007AFF !important;
    color: #fff !important;
    border: 3px solid #007AFF !important;
    opacity: 0.45;
    cursor: default !important;
    pointer-events: none;
}

/* Delete permanently button — red */
.kookoawpf-grid-move-wrapper .kookoawpf-btn-delete,
.kookoawpf-btn-delete.kookoawpf-btn-bulk-action {
    background: #b32d2e !important;
    color: #fff !important;
    border: 3px solid #b32d2e !important;
    box-shadow: none !important;
}

/* Delete permanently button — disabled state */
.kookoawpf-grid-move-wrapper .kookoawpf-btn-delete[disabled],
.kookoawpf-btn-delete.kookoawpf-btn-bulk-action[disabled],
button.kookoawpf-btn-delete[disabled] {
    background: #b32d2e !important;
    color: #fff !important;
    border: 3px solid #b32d2e !important;
    opacity: 0.45;
    cursor: default !important;
    pointer-events: none;
}

.kookoawpf-grid-move-wrapper .kookoawpf-btn-delete:hover,
.kookoawpf-btn-delete.kookoawpf-btn-bulk-action:hover {
    background: #8a2121 !important;
    border: 3px solid #1d2327 !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* Cancel button — WP toolbar bg is light grey (#f0f0f1 or white),
   ensure text and border are clearly visible */
.kookoawpf-grid-move-wrapper .kookoawpf-btn-cancel,
.kookoawpf-btn-cancel.kookoawpf-btn-bulk-action,
.kookoawpf-bulk-active .kookoawpf-btn-cancel,
.media-toolbar .kookoawpf-btn-cancel,
.media-toolbar-mode-select .kookoawpf-btn-cancel {
    background: #fff !important;
    color: #50575e !important;
    border: 3px solid #8c8f94 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.kookoawpf-grid-move-wrapper .kookoawpf-btn-cancel:hover,
.kookoawpf-btn-cancel.kookoawpf-btn-bulk-action:hover,
.kookoawpf-bulk-active .kookoawpf-btn-cancel:hover,
.media-toolbar .kookoawpf-btn-cancel:hover,
.media-toolbar-mode-select .kookoawpf-btn-cancel:hover {
    background: #f0f0f1 !important;
    color: #1d2327 !important;
    border: 3px solid #1d2327 !important;
    box-shadow: none !important;
}

/* Always hide WP native "Bulk select" button — replaced by our Bulk Organize */
body.kookoawpf-has-sidebar .select-mode-toggle-button,
body.kookoawpf-has-sidebar .select-mode-toggle-button.button.media-button {
    display: none !important;
}

/* Always hide WP native "Delete permanently" button/link in main toolbar —
   our Bulk Organize provides its own delete button when needed.
   Cover both sidebar open and collapsed states. */
body.kookoawpf-has-sidebar .media-toolbar .delete-selected-button,
body.kookoawpf-has-sidebar .media-toolbar-secondary .delete-selected-button,
body.kookoawpf-has-sidebar .media-toolbar .button-link-delete,
body.kookoawpf-sidebar-collapsed .media-toolbar .delete-selected-button,
body.kookoawpf-sidebar-collapsed .media-toolbar-secondary .delete-selected-button,
body.kookoawpf-sidebar-collapsed .media-toolbar .button-link-delete {
    display: none !important;
}

/* Fix scroll: browser scrollbar handles page scroll, no internal frame.
   Toolbar sticks to top while grid scrolls naturally with the page. */
.kookoawpf-bulk-active .media-frame,
.kookoawpf-bulk-active .media-frame-content {
    overflow: visible !important;
}

.kookoawpf-bulk-active .attachments-browser {
    overflow: visible !important;
}

.kookoawpf-bulk-active .attachments-browser .attachments-wrapper,
.kookoawpf-bulk-active .attachments-browser .attachments {
    top: 0 !important;
}

.kookoawpf-bulk-active .media-toolbar,
.kookoawpf-bulk-active .media-toolbar-mode-select {
    overflow: visible !important;
    position: sticky !important;
    top: 32px;
    z-index: 100;
    background: #fff;
}

/* Give the wrapper the full toolbar width so it doesn't wrap when the native
   .media-toolbar-secondary column is too narrow (e.g. on Full HD). */
.kookoawpf-bulk-active .media-toolbar-mode-select .media-toolbar-secondary {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

/* Hide ALL WP native bulk-mode buttons when our toolbar is active.
   We cover both .media-toolbar and .media-toolbar-mode-select containers.
   Our buttons are excluded via :not() on our classes. */
.kookoawpf-bulk-active .media-toolbar .media-button:not(.kookoawpf-btn-bulk-organize):not(.kookoawpf-btn-bulk-action),
.kookoawpf-bulk-active .media-toolbar-mode-select .media-button:not(.kookoawpf-btn-bulk-organize):not(.kookoawpf-btn-bulk-action),
.kookoawpf-bulk-active .media-toolbar .media-button-secondary,
.kookoawpf-bulk-active .media-toolbar-mode-select .media-button-secondary,
.kookoawpf-bulk-active .media-toolbar .deselect-all-button,
.kookoawpf-bulk-active .media-toolbar-mode-select .deselect-all-button,
.kookoawpf-bulk-active .media-toolbar .delete-selected-button,
.kookoawpf-bulk-active .media-toolbar-mode-select .delete-selected-button,
.kookoawpf-bulk-active .media-toolbar .select-all-button,
.kookoawpf-bulk-active .media-toolbar-mode-select .select-all-button {
    display: none !important;
}

.kookoawpf-grid-move-label {
    font-size: 13px;
    font-weight: 600;
    color: #1d2327;
    white-space: nowrap;
    font-family: var(--kookoawpf-font);
}

.kookoawpf-grid-move-select {
    min-width: 180px;
    padding: 0 8px;
    border: 2px solid var(--kookoawpf-green-dim);
    border-radius: 4px;
    font-size: 13px;
    background: var(--kookoawpf-bg);
    color: var(--kookoawpf-green-soft);
    cursor: pointer;
    height: 30px;
    font-family: var(--kookoawpf-font);
}

.kookoawpf-grid-move-select:focus {
    border-color: var(--kookoawpf-green);
    box-shadow: 0 0 0 1px var(--kookoawpf-green-dim);
    outline: none;
}

.kookoawpf-grid-move-select.kookoawpf-select-disabled {
    opacity: 0.45;
    cursor: default !important;
    pointer-events: none;
}

/* ================================================
   Folder Bulk Actions Toolbar (v4.5)
   ================================================ */
.kookoawpf-folder-bulk-bar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--kookoawpf-border);
    background: var(--kookoawpf-bg);
    flex-shrink: 0;
}

/* ── Master checkbox (custom styled) ── */
.kookoawpf-fb-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 6px;
    position: relative;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.kookoawpf-fb-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.kookoawpf-fb-check {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1px solid var(--kookoawpf-green-dim);
    border-radius: 3px;
    background: var(--kookoawpf-bg);
    position: relative;
}

/* Transition only on hover — prevents a white flash when the checkbox
   switches checked state (the previous `transition: all 0.15s` on the
   base rule interpolated background/border colors). */
.kookoawpf-fb-toggle:hover .kookoawpf-fb-check {
    border-color: var(--kookoawpf-green);
    box-shadow: 0 0 6px var(--kookoawpf-green-glow);
    transition: all 0.15s ease;
}

.kookoawpf-fb-toggle input:checked + .kookoawpf-fb-check {
    background: var(--kookoawpf-green);
    border-color: var(--kookoawpf-green);
}

.kookoawpf-fb-toggle input:checked + .kookoawpf-fb-check::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    width: 5px;
    height: 10px;
    border: solid var(--kookoawpf-bg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ── Action buttons ── */
.kookoawpf-fb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--kookoawpf-text-muted);
    cursor: pointer;
    opacity: 0.35;
    pointer-events: none;
}

.kookoawpf-fb-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    /* Kill WordPress' default transition on .dashicons (color 0.1s ease-in)
       which caused a white flash when the button switched state. */
    transition: none;
}

/* Enabled state (when folders are selected) */
.kookoawpf-fb-btn:not([disabled]) {
    opacity: 1;
    pointer-events: auto;
    color: var(--kookoawpf-green-soft);
}

/* Transition only on hover — prevents white flash when the button
   switches from disabled (with PRO badge) to enabled. */
.kookoawpf-fb-btn:not([disabled]):hover {
    background: var(--kookoawpf-bg-hover);
    border-color: var(--kookoawpf-green-dim);
    color: var(--kookoawpf-green);
    box-shadow: 0 0 6px var(--kookoawpf-green-glow);
    transition: all 0.15s ease;
}

/* Delete button — red accent when enabled */
.kookoawpf-fb-btn-danger:not([disabled]) {
    color: var(--kookoawpf-red);
}

.kookoawpf-fb-btn-danger:not([disabled]):hover {
    background: rgba(248, 81, 73, 0.1);
    border-color: var(--kookoawpf-red);
    color: var(--kookoawpf-red);
    box-shadow: 0 0 6px rgba(248, 81, 73, 0.25);
}

/* ── jsTree: Folder Bulk Checkbox Mode ── */
/* When bulk mode is active, inject a checkbox before each node anchor */
.kookoawpf-bulk-folder-mode #kookoawpf-jstree .jstree-node > .jstree-anchor::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--kookoawpf-green-dim);
    border-radius: 3px;
    background: var(--kookoawpf-bg);
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
    transition: all 0.15s ease;
    position: relative;
    top: -1px;
}

/* Checked state */
.kookoawpf-bulk-folder-mode #kookoawpf-jstree .jstree-node.kookoawpf-fb-selected > .jstree-anchor::before {
    background: var(--kookoawpf-green);
    border-color: var(--kookoawpf-green);
}

/* Checkmark via SVG background (cleaner than pseudo on pseudo) */
.kookoawpf-bulk-folder-mode #kookoawpf-jstree .jstree-node.kookoawpf-fb-selected > .jstree-anchor::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 11.5L3 8l1-1 2.5 2.5L12 4l1 1z' fill='%230d1117'/%3E%3C/svg%3E");
    background-size: 14px 14px;
    background-position: center;
    background-repeat: no-repeat;
}

/* Subfolder checkboxes: grey border to visually distinguish from parent folders */
.kookoawpf-bulk-folder-mode #kookoawpf-jstree .jstree-node .jstree-children .jstree-node > .jstree-anchor::before {
    border-color: #555;
}
/* Subfolder checked: restore green border */
.kookoawpf-bulk-folder-mode #kookoawpf-jstree .jstree-node .jstree-children .jstree-node.kookoawpf-fb-selected > .jstree-anchor::before {
    border-color: var(--kookoawpf-green);
}

/* Hover on unselected checkbox */
.kookoawpf-bulk-folder-mode #kookoawpf-jstree .jstree-node:not(.kookoawpf-fb-selected) > .jstree-anchor:hover::before {
    border-color: var(--kookoawpf-green);
    box-shadow: 0 0 4px var(--kookoawpf-green-glow);
}

/* Selected folder row highlight */
.kookoawpf-bulk-folder-mode #kookoawpf-jstree .jstree-node.kookoawpf-fb-selected > .jstree-anchor {
    background: rgba(57, 255, 20, 0.08) !important;
}

/* In bulk mode, hide the folder icon to make room for checkbox */
.kookoawpf-bulk-folder-mode #kookoawpf-jstree .jstree-icon.jstree-themeicon,
.kookoawpf-bulk-folder-mode #kookoawpf-jstree .jstree-icon.kookoawpf-folder-icon {
    display: none;
}

/* In bulk mode, disable tree DnD visually */
.kookoawpf-bulk-folder-mode #kookoawpf-jstree .jstree-anchor {
    cursor: pointer;
}

/* In bulk mode, disable node selection navigation */
.kookoawpf-bulk-folder-mode #kookoawpf-jstree .jstree-clicked {
    background: transparent !important;
}

/* Locked folders in bulk mode: keep original folder icon + lock badge, non-selectable */
.kookoawpf-bulk-folder-mode #kookoawpf-jstree .jstree-node.kookoawpf-fb-locked:not(.kookoawpf-fb-locked-ancestor) > .jstree-anchor::before {
    content: none;
}
.kookoawpf-bulk-folder-mode #kookoawpf-jstree .jstree-node.kookoawpf-fb-locked:not(.kookoawpf-fb-locked-ancestor) > .jstree-anchor .jstree-icon.kookoawpf-folder-icon,
.kookoawpf-bulk-folder-mode #kookoawpf-jstree .jstree-node.kookoawpf-fb-locked:not(.kookoawpf-fb-locked-ancestor) > .jstree-anchor .jstree-icon.jstree-themeicon {
    display: inline-block !important;
}
.kookoawpf-bulk-folder-mode #kookoawpf-jstree .jstree-node.kookoawpf-fb-locked:not(.kookoawpf-fb-locked-ancestor) > .jstree-anchor:hover::before {
    border: none;
    box-shadow: none;
}
.kookoawpf-bulk-folder-mode #kookoawpf-jstree .jstree-node.kookoawpf-fb-locked > .jstree-anchor {
    cursor: default;
    opacity: 0.6;
}

/* Locked ANCESTOR in bulk mode: show X instead of checkbox/folder icon */
.kookoawpf-bulk-folder-mode #kookoawpf-jstree .jstree-node.kookoawpf-fb-locked-ancestor > .jstree-anchor::before {
    content: '\274C' !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: none;
    background-image: none;
    margin-right: 6px;
    font-size: 13px;
    line-height: 1;
    vertical-align: middle;
    position: relative;
    top: -1px;
}
.kookoawpf-bulk-folder-mode #kookoawpf-jstree .jstree-node.kookoawpf-fb-locked-ancestor > .jstree-anchor .jstree-icon.kookoawpf-folder-icon,
.kookoawpf-bulk-folder-mode #kookoawpf-jstree .jstree-node.kookoawpf-fb-locked-ancestor > .jstree-anchor .jstree-icon.jstree-themeicon {
    display: none !important;
}
.kookoawpf-bulk-folder-mode #kookoawpf-jstree .jstree-node.kookoawpf-fb-locked-ancestor > .jstree-anchor:hover::before {
    border: none;
    box-shadow: none;
}

/* ── PRO badge on bulk toolbar buttons ── */
.kookoawpf-fb-btn {
    position: relative;
}
/* PRO-locked state — driven by an explicit JS class (not :has()) so the
   transition between states is atomic and no intermediate frame is visible. */
.kookoawpf-fb-btn.kookoawpf-fb-pro-locked {
    opacity: 1;
    pointer-events: none;
    cursor: default;
    color: var(--kookoawpf-text-muted);
}
.kookoawpf-fb-btn.kookoawpf-fb-pro-locked .dashicons {
    opacity: 0.35;
}