/* ================================================
   KooKoa Folders — Mobile Adaptation
   All rules scoped to body.kookoawpf-mobile
   Loaded after admin.css (dependency), higher specificity wins.
   ================================================ */

/* Instant hide on mobile — prevents flash of desktop sidebar before JS loads */
@media screen and (max-width: 782px) {
    .kookoawpf-sidebar-wrapper {
        display: none !important;
    }
    body.kookoawpf-mobile .kookoawpf-sidebar-wrapper {
        display: flex !important;
    }
}

@media screen and (max-width: 782px) {

    /* ---- Sidebar: fixed → in-flow block, height adapts to content ---- */
    body.kookoawpf-mobile .kookoawpf-sidebar-wrapper {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
        max-height: none;
        overflow: visible;
        z-index: auto;
        box-sizing: border-box;
        margin-bottom: 12px;
    }

    /* Tree container: no flex growth, auto height, scroll after ~10 folders */
    body.kookoawpf-mobile .kookoawpf-tree-container {
        flex: none;
        height: auto;
        max-height: 300px; /* ~10 folders × 30px touch target */
        overflow-y: auto;
        overflow-x: hidden;
        padding: 8px 8px 8px 0;
    }

    /* ---- Content offset reset ---- */
    body.kookoawpf-mobile #wpcontent,
    body.kookoawpf-mobile.kookoawpf-has-sidebar #wpcontent {
        padding-left: 10px !important;
    }

    /* ---- Collapsed state (default on mobile) ---- */
    body.kookoawpf-mobile .kookoawpf-sidebar-wrapper.kookoawpf-mobile-collapsed {
        height: 0 !important;
        border-width: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        margin-bottom: 0;
    }

    /* ---- Hide desktop toggle & resize handle ---- */
    body.kookoawpf-mobile #kookoawpf-toggle-sidebar,
    body.kookoawpf-mobile .kookoawpf-sidebar-resize {
        display: none !important;
    }

    /* ---- Mobile toggle bar ---- */
    .kookoawpf-mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 10px 14px;
        margin-bottom: 5px;
        background: var(--kookoawpf-bg, #0d1117);
        border: 5px solid var(--kookoawpf-green-dim, #2ea043);
        color: var(--kookoawpf-text, #fff);
        font-family: var(--kookoawpf-font, 'Share Tech Mono', monospace);
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        cursor: pointer;
        box-sizing: border-box;
        min-height: 30px;
        -webkit-tap-highlight-color: transparent;
    }

    .kookoawpf-mobile-toggle:active {
        background: var(--kookoawpf-bg-hover, #1c2333);
    }

    .kookoawpf-mobile-toggle .kookoawpf-mobile-toggle-brand {
        color: var(--kookoawpf-green, #39FF14);
        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);
    }

    .kookoawpf-mobile-toggle .kookoawpf-mobile-toggle-chevron {
        font-size: 20px;
        width: 20px;
        height: 20px;
        color: var(--kookoawpf-green, #39FF14);
        transition: transform 0.3s ease;
    }

    .kookoawpf-mobile-toggle.kookoawpf-mobile-expanded .kookoawpf-mobile-toggle-chevron {
        transform: rotate(180deg);
    }

    .kookoawpf-mobile-toggle.kookoawpf-mobile-expanded .kookoawpf-mobile-toggle-brand {
        display: none;
    }

    /* Blinking cursor on collapsed toggle bar */
    .kookoawpf-mobile-cursor {
        animation: kookoawpf-mobile-blink 0.9s step-end infinite;
    }

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

    /* ---- Fix scroll: WP media frame containers trap touch scroll on mobile ---- */
    body.kookoawpf-mobile .media-frame,
    body.kookoawpf-mobile .media-frame-content,
    body.kookoawpf-mobile .attachments-browser,
    body.kookoawpf-mobile .attachments-wrapper {
        overflow: visible !important;
    }

    /* Prevent draggable from hijacking scroll */
    body.kookoawpf-mobile .attachments-browser .attachment {
        touch-action: pan-y !important;
        -webkit-user-drag: none;
    }

    /* ---- Touch targets 30px ---- */
    body.kookoawpf-mobile .kookoawpf-nav-item {
        min-height: 30px;
        display: flex;
        align-items: center;
        padding: 8px 12px;
    }

    /* Folder rows: 30px height, everything centered via line-height */
    body.kookoawpf-mobile #kookoawpf-jstree .jstree-anchor {
        height: 30px;
        line-height: 30px;
        padding-left: 2px;
    }

    body.kookoawpf-mobile #kookoawpf-jstree .jstree-children {
        margin-left: 7px;
    }

    /* Horizontal connector: center in 30px row */
    body.kookoawpf-mobile #kookoawpf-jstree .jstree-node > .jstree-children > .jstree-node::before {
        top: 14px;
    }

    /* Last-child vertical line mask: match */
    body.kookoawpf-mobile #kookoawpf-jstree .jstree-node > .jstree-children > .jstree-node:last-child::after {
        top: 15px;
    }

    /* Only root-level nodes: reduce left margin */
    body.kookoawpf-mobile #kookoawpf-jstree > .jstree-container-ul > .jstree-node {
        margin-left: 0 !important;
    }

    body.kookoawpf-mobile #kookoawpf-jstree .jstree-node > .kookoawpf-count {
        line-height: 30px;
    }

    body.kookoawpf-mobile #kookoawpf-jstree .jstree-icon.jstree-ocl {
        width: 30px;
        height: 30px;
        line-height: 30px;
        padding: 0;
        margin-left: 0;
        position: relative;
    }

    /* Invisible hit area: extends the clickable surface of the +/- to 44×44
       (centered on the 30×30 visual) without changing the visual size.
       7px extension on every side: 30 + 7 + 7 = 44.
       Uses ::before because admin.css already paints the +/- character via
       .jstree-ocl::after — overriding ::after would erase the glyph. */
    body.kookoawpf-mobile #kookoawpf-jstree .jstree-icon.jstree-ocl::before {
        content: '';
        position: absolute;
        top: -7px;
        right: -7px;
        bottom: -7px;
        left: -7px;
    }

    /* Folder SVG icon — match 30px row height */
    body.kookoawpf-mobile #kookoawpf-jstree .jstree-icon.kookoawpf-folder-icon {
        height: 30px;
        line-height: 30px;
    }

    body.kookoawpf-mobile .kookoawpf-fb-btn {
        min-width: 30px;
        min-height: 30px;
    }

    body.kookoawpf-mobile .kookoawpf-sidebar-actions .button {
        min-height: 30px;
        padding: 8px 12px;
    }

    /* ---- Context menu → bottom sheet ---- */
    body.kookoawpf-mobile .kookoawpf-context-menu {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        min-width: 100% !important;
        max-height: 70vh;
        overflow-y: auto;
        border-radius: 12px 12px 0 0;
        border: none;
        border-top: 3px solid var(--kookoawpf-green, #39FF14);
        box-shadow: 0 -4px 20px rgba(0,0,0,0.8);
        padding: 8px 0 12px;
        padding: 8px 0 constant(safe-area-inset-bottom);
        padding: 8px 0 env(safe-area-inset-bottom, 12px);
        animation: kookoawpf-slide-up 0.25s ease-out;
    }

    @keyframes kookoawpf-slide-up {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    body.kookoawpf-mobile .kookoawpf-ctx-item {
        min-height: 36px;
        padding: 6px 20px;
        font-size: 15px;
        display: flex;
        align-items: center;
    }

    body.kookoawpf-mobile .kookoawpf-ctx-item:last-child {
        margin-bottom: 10px;
    }

    body.kookoawpf-mobile .kookoawpf-ctx-item .dashicons {
        font-size: 20px;
        width: 20px;
        height: 20px;
    }

    /* Submenu inline instead of flyout on mobile */
    body.kookoawpf-mobile .kookoawpf-ctx-submenu {
        position: static !important;
        box-shadow: none;
        border: none;
        border-top: 1px solid var(--kookoawpf-border, #1e3a2f);
        border-bottom: 1px solid var(--kookoawpf-border, #1e3a2f);
        width: 100%;
        padding-left: 20px;
    }

    /* ---- Backdrop overlay ---- */
    .kookoawpf-mobile-backdrop {
        position: fixed;
        top: 0; right: 0; bottom: 0; left: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 199999;
        -webkit-tap-highlight-color: transparent;
    }

    /* ---- Bulk organize: hide WP toolbar (blocks touch scroll),
       fix gap, breadcrumb spacing ---- */
    body.kookoawpf-mobile.kookoawpf-bulk-active .media-toolbar-mode-select {
        display: none !important;
    }

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

    body.kookoawpf-mobile.kookoawpf-bulk-active .kookoawpf-btn-bulk-organize {
        display: none !important;
    }

    body.kookoawpf-mobile .kookoawpf-btn-download,
    body.kookoawpf-mobile #kookoawpf-btn-download-selected {
        display: none !important;
    }

    /* Bulk toolbar: stack vertically */
    body.kookoawpf-mobile .kookoawpf-grid-move-wrapper {
        display: grid !important;
        grid-template-columns: auto auto 1fr;
        gap: 8px;
        float: none;
        width: 100%;
        margin: 10px 0;
        align-items: center;
    }

    /* Row 1: Select All, Delete permanently */
    /* Row 2: Move to label, select, cancel — auto via grid wrap */
    body.kookoawpf-mobile .kookoawpf-grid-move-label {
        grid-column: 1;
    }

    body.kookoawpf-mobile .kookoawpf-grid-move-select {
        grid-column: 2 / -1;
        width: 100%;
    }

    body.kookoawpf-mobile .kookoawpf-btn-cancel {
        grid-column: 1 / -1;
    }

    /* ---- Hide dynamic folder "Rules" label ---- */
    body.kookoawpf-mobile .kookoawpf-rules-label {
        display: none !important;
    }

    /* ---- Hide Upload Folder and Keyboard Shortcuts in ⋮ menu ---- */
    body.kookoawpf-mobile #kookoawpf-more-upload-folder,
    body.kookoawpf-mobile #kookoawpf-more-shortcuts,
    body.kookoawpf-mobile .kookoawpf-more-option[data-action="export-import"],
    body.kookoawpf-mobile .kookoawpf-more-option[data-action="export-import"] + .kookoawpf-more-submenu {
        display: none !important;
    }

    /* ---- Hide subfolder cards on mobile ---- */
    body.kookoawpf-mobile .kookoawpf-subfolder-cards {
        display: none !important;
    }

    /* ---- Hide modal sidebar on mobile ---- */
    body.kookoawpf-mobile .kookoawpf-modal-sidebar {
        display: none !important;
    }

    body.kookoawpf-mobile .kookoawpf-modal-has-sidebar .media-frame-title,
    body.kookoawpf-mobile .kookoawpf-modal-has-sidebar .media-frame-tab-panel {
        margin-left: 0 !important;
    }

    /* ---- Search input: prevent iOS zoom ---- */
    body.kookoawpf-mobile .kookoawpf-sidebar-search input {
        font-size: 16px;
    }

    /* ---- Settings: responsive tables (no body.kookoawpf-mobile — JS doesn't run on settings page) ---- */
    .kookoawpf-settings-wrap .form-table,
    .kookoawpf-settings-wrap .form-table tbody,
    .kookoawpf-settings-wrap .form-table tr,
    .kookoawpf-settings-wrap .form-table th,
    .kookoawpf-settings-wrap .form-table td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .kookoawpf-settings-wrap .form-table th {
        padding: 10px 10px 2px;
    }

    .kookoawpf-settings-wrap .form-table td {
        padding: 4px 10px 10px;
    }

    /* Section: reduce padding + prevent overflow */
    .kookoawpf-settings-wrap .kookoawpf-settings-section {
        padding: 16px 12px;
        overflow: hidden;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Settings wrap: prevent horizontal scroll */
    .kookoawpf-settings-wrap {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Settings tabs: 2-column grid */
    .kookoawpf-settings-tabs {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .kookoawpf-settings-tab {
        font-size: 13px;
        padding: 10px 8px;
        text-align: center;
        white-space: normal;
        border: 2px solid #ffffff !important;
        border-bottom: 2px solid #ffffff !important;
    }

    .kookoawpf-settings-tab.active {
        border-color: #ffffff !important;
    }

    /* Hide heavy bulk-scan tabs on mobile (Cleanup, Duplicates): they rely
       on large thumbnail grids and risky bulk actions that don't work well
       on small screens. Context Menu stays visible — its toggles apply to
       the long-press menu used on touch screens too. */
    .kookoawpf-settings-tab[data-tab="cleanup"],
    .kookoawpf-settings-tab[data-tab="duplicates"] {
        display: none !important;
    }

    /* PRO mode: Media Stats + Upgrade to PRO each span both columns —
       Media Stats has no pair on the row in any state, and Upgrade to
       PRO sits cleanly on its own row instead of pairing oddly. */
    .kookoawpf-settings-tabs--pro .kookoawpf-settings-tab-upgrade,
    .kookoawpf-settings-tabs--pro .kookoawpf-settings-tab[data-tab="stats"] {
        grid-column: 1 / -1;
    }
    /* FREE-only mode: Upgrade to PRO pairs side by side with the green
       Try PRO Free (fase 1) / Claim 20% Off (fase 3) tab. Both stay
       in the default 1-column slot so the grid renders them on the
       same row, matching the dark tabs above. */

    /* Settings page green tagline ("Folders, subfolders, drag & drop. Nothing
       you don't need.") — purely decorative copy, redundant on a narrow
       viewport where vertical space matters. */
    .kookoawpf-settings-tagline {
        display: none !important;
    }

    /* Reset desktop-only sizing rules that interfere with the 2-column grid
       on mobile (Media Stats was getting flex-basis: 50% + margin-left: auto
       from desktop, which collapsed the cell and pushed content right). */
    .kookoawpf-settings-tab[data-tab="stats"],
    .kookoawpf-settings-tab-end {
        flex: initial;
        margin-left: 0;
    }

    /* Force all text inside settings to wrap */
    .kookoawpf-settings-wrap .form-table td label,
    .kookoawpf-settings-wrap .form-table td,
    .kookoawpf-settings-wrap .form-table th,
    .kookoawpf-settings-wrap p,
    .kookoawpf-settings-wrap .description {
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    /* Settings inputs: full width */
    .kookoawpf-settings-wrap .form-table input[type="number"],
    .kookoawpf-settings-wrap .form-table input[type="text"],
    .kookoawpf-settings-wrap .form-table select {
        max-width: 100%;
    }

    /* Radio/checkbox labels: stack vertically */
    .kookoawpf-settings-wrap .form-table td label[style*="inline-block"] {
        display: block !important;
        margin-right: 0 !important;
        margin-bottom: 6px;
    }

    /* ---- General: hide desktop-only settings rows ---- */
    #kookoawpf-settings-subfolder-cards-row,
    #kookoawpf-settings-metadata-row,
    #kookoawpf-settings-sticky-row,
    #kookoawpf-settings-width-row,
    #kookoawpf-settings-shortcuts-row,
    #kookoawpf-settings-access-control-row,
    #kookoawpf-settings-top-level-menu-row {
        display: none !important;
    }

    /* ---- Import & Export: hide Upload Folder Structure section ---- */
    #kookoawpf-settings-upload-folder-section {
        display: none !important;
    }

    /* ---- General: hide breadcrumb style radio buttons ---- */
    #kookoawpf-settings-breadcrumb-style {
        display: none !important;
    }

    /* ---- General: color dots auto-wrap ---- */
    .kookoawpf-settings-wrap .kookoawpf-settings-color-row {
        flex-wrap: wrap !important;
    }

    /* ---- Icon blocks: auto-fit grid ---- */
    .kookoawpf-ci-row-icons {
        grid-template-columns: repeat(auto-fill, 28px) !important;
        padding-left: 0 !important;
    }

    /* ---- Colors & Icons: palette + custom slots auto-wrap ---- */
    .kookoawpf-ci-palette {
        flex-wrap: wrap !important;
    }

    .kookoawpf-ci-custom-slots {
        flex-wrap: wrap !important;
    }

    /* ---- Header: compact on mobile ---- */
    body.kookoawpf-mobile .kookoawpf-sidebar-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* ---- Sort toolbar: wrap ---- */
    body.kookoawpf-mobile .kookoawpf-sidebar-sort {
        flex-wrap: wrap;
    }

}