/* ============================================
   KooKoa Folders — Media Modal CSS
   Sidebar layout, resize handle, scrollbar,
   search override, breadcrumb, WP fixes
   ============================================ */

/* Frame layout: push content right to make room for sidebar */
.kookoawpf-modal-has-sidebar {
    position: relative;
}
/* Title and tab-panel get left offset set dynamically by JS (_updateModalLayout).
   This CSS provides the initial default; JS overrides via inline style. */
.kookoawpf-modal-has-sidebar .media-frame-title,
.kookoawpf-modal-has-sidebar .media-frame-tab-panel {
    left: 300px;
}
/* Override WP's hide-menu that sets left:0 */
.kookoawpf-modal-has-sidebar.hide-menu .media-frame-title,
.kookoawpf-modal-has-sidebar.hide-menu .media-frame-tab-panel {
    left: 300px;
}

/* The sidebar panel — overrides .kookoawpf-sidebar-wrapper defaults for modal context */
.kookoawpf-modal-sidebar.kookoawpf-sidebar-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 300px; /* dynamic via inline style from JS */
    background: var(--kookoawpf-bg, #0d1117);
    border: 5px solid var(--kookoawpf-green-dim) !important;
    display: flex;
    flex-direction: column;
    overflow: visible;
    z-index: 101;
    font-family: 'Share Tech Mono', monospace;
    box-sizing: border-box;
}

/* Override WP media modal link color for nav items */
.kookoawpf-modal-sidebar .kookoawpf-nav-item,
.kookoawpf-modal-sidebar .kookoawpf-nav-item:visited {
    color: #ffffff !important;
}
.kookoawpf-modal-sidebar .kookoawpf-nav-item:hover,
.kookoawpf-modal-sidebar .kookoawpf-nav-item:focus {
    color: #39FF14 !important;
}
.kookoawpf-modal-sidebar .kookoawpf-nav-item.active,
.kookoawpf-modal-sidebar .kookoawpf-nav-item.active:visited {
    color: #39FF14 !important;
}

/* Override WP media modal input styles for search — exact copy of main sidebar */
.kookoawpf-modal-sidebar .kookoawpf-sidebar-search input {
    width: 100% !important;
    padding: 6px 10px !important;
    font-size: var(--kookoawpf-tree-font-size) !important;
    border: 1px solid var(--kookoawpf-border-light) !important;
    border-radius: 4px !important;
    background: var(--kookoawpf-bg-light) !important;
    color: var(--kookoawpf-green-soft) !important;
    font-family: var(--kookoawpf-font) !important;
    box-shadow: none !important;
    outline: none !important;
    height: 40px !important;
    line-height: 26px !important;
    box-sizing: border-box !important;
}
.kookoawpf-modal-sidebar .kookoawpf-sidebar-search input:focus {
    border-color: var(--kookoawpf-green) !important;
    box-shadow: 0 0 0 1px var(--kookoawpf-green-dim), 0 0 8px var(--kookoawpf-green-glow) !important;
    outline: none !important;
    color: var(--kookoawpf-green) !important;
    background: var(--kookoawpf-bg-light) !important;
}
.kookoawpf-modal-sidebar .kookoawpf-sidebar-search input::placeholder {
    color: var(--kookoawpf-text-muted) !important;
}
.kookoawpf-modal-sidebar .kookoawpf-sidebar-search input:focus::placeholder {
    color: transparent !important;
}

/* Modal sidebar inherits all styling from .kookoawpf-sidebar-wrapper,
   .kookoawpf-sidebar-header, .kookoawpf-nav-item, .kookoawpf-tree-container, etc.
   No need to duplicate those rules here. */

/* Modal sidebar uses same classes as main sidebar — no tree CSS duplication needed.
   Only modal-specific overrides below. */

/* Hide WP's default media-frame-menu when our sidebar is present */
.kookoawpf-modal-has-sidebar .media-frame-menu,
.kookoawpf-modal-has-sidebar .media-frame-menu-heading {
    display: none !important;
}

/* Fix for modal with sidebar — ensure frame and content fill properly */
.media-frame.kookoawpf-modal-has-sidebar {
    height: 100% !important;
    position: relative !important;
}
.kookoawpf-modal-has-sidebar .media-frame-tab-panel {
    position: absolute !important;
    top: 0;
    right: 0;
    bottom: 0;
}
/* Elements inside tab-panel: tab-panel already has left:280px,
   so children must reset to 0 to avoid double offset */
.kookoawpf-modal-has-sidebar .media-frame-tab-panel .media-frame-router,
.kookoawpf-modal-has-sidebar .media-frame-tab-panel .media-frame-content,
.kookoawpf-modal-has-sidebar .media-frame-tab-panel .media-frame-toolbar {
    left: 0 !important;
}

/* Modal breadcrumb bar — layout only, colors come from .kookoawpf-breadcrumb-retro */
.kookoawpf-modal-breadcrumb {
    position: relative;
    z-index: 1;
}

/* Modal sidebar resize handle — matches main sidebar pill */
.kookoawpf-modal-resize-handle {
    position: absolute;
    top: 0;
    right: -12px;
    bottom: 0;
    width: 24px;
    cursor: col-resize;
    z-index: 10;
}
.kookoawpf-modal-resize-handle::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-modal-resize-handle:hover::after {
    background: var(--kookoawpf-green);
    box-shadow: 0 0 8px var(--kookoawpf-green-glow);
    height: 66px;
}
.kookoawpf-modal-resize-handle:active::after {
    background: var(--kookoawpf-green);
    box-shadow: 0 0 12px var(--kookoawpf-green-glow);
    height: 74px;
}
/* When scrollbar is visible, shift pill right and add black border */
.kookoawpf-modal-has-scrollbar .kookoawpf-modal-resize-handle {
    right: -16px;
    width: 16px;
}
.kookoawpf-modal-has-scrollbar .kookoawpf-modal-resize-handle::after {
    border-radius: 0 4px 4px 0;
}
.kookoawpf-modal-has-scrollbar .kookoawpf-modal-resize-handle:hover::after {
    border-top: 3px solid black;
    border-right: 3px solid black;
    border-bottom: 3px solid black;
}

/* Scrollbar styling for the modal tree */
.kookoawpf-modal-tree-container {
    scrollbar-width: thin;
    scrollbar-color: #30363d #0d1117;
}
.kookoawpf-modal-tree-container::-webkit-scrollbar {
    width: 6px;
}
.kookoawpf-modal-tree-container::-webkit-scrollbar-track {
    background: #0d1117;
}
.kookoawpf-modal-tree-container::-webkit-scrollbar-thumb {
    background: #30363d;
    border-radius: 3px;
}
.kookoawpf-modal-tree-container::-webkit-scrollbar-thumb:hover {
    background: #484f58;
}

/* Fix: WP leaves inline display:block on .uploader-inline after library.reset()
   even after adding .hidden class. The inline style overrides the class.
   !important in stylesheet overrides inline styles. */
.media-modal .attachments-browser .uploader-inline.hidden {
    display: none !important;
}

/* ── Fix: force our modal dialogs inside media-modal to match library styling ── */
.media-modal .kookoawpf-modal-close {
    padding: 4px 6px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    font-size: 32px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}