// File Manager content grid styles (basic variant)

/* WHY: `@property … initial-value: inherit` is invalid and Capacitor replaceSync drops the sheet. */

//
@layer components {
    /* WHY: no subgrid — Android WebView collapses name/size to 0 and spills Actions. */
    $row-grid:        [icon] 2rem [name] minmax(5rem, 1fr) [size] 4.25rem [date] minmax(0, 7.5rem) [actions] 6.4rem;
    $row-grid-mobile: [icon] 2rem [name] minmax(4.5rem, 1fr) [size] 3.75rem [date] 0 [actions] 6.4rem;

    :host(ui-file-manager-content) {
        & {
            /* WHY: perspective + isolation skipped descendant text paint on Capacitor WebView. */
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            inline-size: 100%;
            block-size: 100%;
            min-inline-size: 0;
            min-block-size: 0;
            overflow: hidden;
            scrollbar-width: none;
            scrollbar-color: transparent transparent;
            scrollbar-gutter: auto;
            grid-column: 1 / -1;
            z-index: 1;
            position: relative;
            contain: none;
            container-type: size;

            touch-action: manipulation;
            pointer-events: auto;
            border-radius: 0;
            margin: 0;

            color-scheme: inherit;
            background-color: #f7f8fc;
            background-color: light-dark(#f7f8fc, #1a1d24);
            background-color: var(--color-surface-container-low);
            color: #1a1c1f;
            color: light-dark(#1a1c1f, #e8eaed);
            color: var(--color-on-surface);

            outline: none 0px transparent;
            border: none 0px transparent;
        }

        .fm-grid {
            display: flex;
            flex-direction: column;
            align-content: start;
            inline-size: 100%;
            min-inline-size: 0;
            min-block-size: 0;
            block-size: 100%;
            flex: 1 1 auto;
            overflow: hidden;
            scrollbar-width: none;
            scrollbar-color: transparent transparent;
            scrollbar-gutter: auto;

            touch-action: manipulation;
            pointer-events: none;
            outline: none 0px transparent;
            border: none 0px transparent;
        }

        .fm-grid-rows {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            align-content: start;

            gap: var(--gap-sm, 0.5rem);
            overflow: auto;
            scrollbar-gutter: stable;
            min-block-size: 0;

            scrollbar-width: thin;
            scrollbar-color: color-mix(in oklab, var(--color-on-surface) 22%, transparent) transparent;

            inline-size: 100%;
            block-size: 100%;
            min-inline-size: 0;
            z-index: 1;

            content-visibility: visible;
            contain-intrinsic-size: 1px var(--ui-explorer-row-height, var(--touch-min, 3rem));
            contain: none;

            //
            touch-action: manipulation;
            pointer-events: auto;

            //
            slot { display: contents !important; }
        }

        :where(.row) {
            background-color: color-mix(in oklab, var(--color-on-surface, #fff) 3%, transparent);
            color: var(--color-on-surface);

            display: grid;
            grid-template-columns: #{$row-grid};
            /* WHY: minmax(0, …) + min-block-size:0 collapsed rows below --touch-min on Android WebView. */
            grid-template-rows: minmax(var(--ui-explorer-row-height, var(--touch-min, 3rem)), auto);
            order: var(--order, 1) !important;
            min-block-size: var(--ui-explorer-row-height, var(--touch-min, 3rem));
            box-sizing: border-box;

            inline-size: 100%;
            min-inline-size: 0;
            place-content: center;
            place-items: center;
            place-self: stretch;
            justify-items: start;
            padding: 0.35rem 0.65rem;
            border-radius: var(--radius-lg, 0.75rem);
            border: none;
            cursor: pointer;
            pointer-events: auto;
            touch-action: manipulation;
            block-size: auto;
            user-drag: none;
            -webkit-user-drag: none;

            text-align: start;
            text-wrap: nowrap;
            text-overflow: ellipsis;
            white-space: nowrap;
            letter-spacing: normal;
            overflow: hidden;
            gap: 0.35rem;
            flex-wrap: nowrap;

            // no draggable available on mobile (touch devices currently)
            @media (hover: hover) and (pointer: fine) {
                user-drag: element;
                -webkit-user-drag: element;
            }

            ui-icon {
                --ui-icon-size: var(--ui-explorer-icon-size, 1.5rem);
                --ui-icon-padding: 0px;
                inline-size: var(--ui-icon-size);
                block-size: var(--ui-icon-size);
                min-inline-size: var(--ui-icon-size);
                min-block-size: var(--ui-icon-size);
                flex-shrink: 0;
                place-content: center;
                place-items: center;
            }

            a, span {
                background-color: transparent !important;
            }

            & > * {
                background-color: transparent !important;
                min-block-size: 0;
                block-size: auto;
            }
        }

        .row {
            &:hover {
                background-color: color-mix(in oklab, var(--color-on-surface) 8%, transparent);
            }
            &:active {
                background-color: color-mix(in oklab, var(--color-on-surface) 11%, transparent);
            }
            &:focus-visible {
                outline: 2px solid var(--color-primary, #5a7fff);
                outline-offset: -2px;
            }
        }

        .c:not(.icon) {
            min-inline-size: 0;
            display: flex;
            flex-direction: row;
            text-align: start;
            text-wrap: nowrap;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            inline-size: auto;
            place-content: center;
            place-items: center;
            justify-content: start;
            color: inherit;
            min-block-size: 0;
            block-size: auto;
        }

        /* WHY: anonymous flex text nodes often do not paint on Android WebView. */
        .c.name,
        .c.size,
        .c.date {
            display: block;
            color: #1a1c1f;
            color: light-dark(#1a1c1f, #e8eaed);
            color: var(--color-on-surface);
            -webkit-text-fill-color: currentColor;
        }

        .c .t {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: inherit;
            -webkit-text-fill-color: currentColor;
        }

        .icon {
            display: flex;
            grid-column: icon;
            place-content: center;
            place-items: center;
            overflow: visible;
            flex-shrink: 0;
            inline-size: 1.5rem;
            block-size: 1.5rem;
            min-inline-size: 1.5rem;
            min-block-size: 1.5rem;
            aspect-ratio: 1;

            ui-icon,
            img {
                --ui-icon-size: var(--ui-explorer-icon-size, 1.5rem);
                --ui-icon-padding: 0px;
                inline-size: var(--ui-icon-size) !important;
                block-size: var(--ui-icon-size) !important;
                min-inline-size: var(--ui-icon-size) !important;
                min-block-size: var(--ui-icon-size) !important;
                max-inline-size: var(--ui-icon-size) !important;
                max-block-size: var(--ui-icon-size) !important;
                flex-shrink: 0;
                object-fit: contain;
            }
        }
        .name { grid-column: name; inline-size: stretch; }
        .size {
            grid-column: size;
            justify-content: end;
            text-align: end;
        }
        .date {
            grid-column: date;
            justify-content: end;
            text-align: end;
        }
        .actions { grid-column: actions; }

        .row, ::slotted(.row), .fm-grid-header {
            grid-template-columns: #{$row-grid};
        }

        @container (inline-size <= 600px) {
            .row, ::slotted(.row), .fm-grid-header { grid-template-columns: #{$row-grid-mobile}; }
            .date { display: none !important; }
        }

        //
        .actions {
            background-color: color-mix(in oklab, var(--color-on-surface, #fff) 5%, transparent);
            color: var(--color-on-surface);

            pointer-events: none;
            padding: 0.2rem;
            max-inline-size: stretch;
            border-radius: 999px;
            border: none;

            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            place-content: center;
            place-items: center;
            place-self: center;
            justify-content: flex-end;
            justify-self: end;
            inline-size: 6.4rem;
            max-inline-size: 6.4rem;
            block-size: 2.125rem;
            gap: 0.15rem;
            overflow: hidden;
        }

        .action-btn {
            background-color: transparent;
            color: var(--color-on-surface);

            pointer-events: auto;
            appearance: none;
            border: none;
            padding: 0;
            border-radius: 999px;
            cursor: pointer;
            inline-size: 1.85rem;
            block-size: 1.85rem;
            min-inline-size: 1.85rem;
            min-block-size: 1.85rem;
            flex-shrink: 0;
            aspect-ratio: 1;
            display: inline-flex;
            place-content: center;
            place-items: center;
            transition: background 0.14s ease, transform 0.1s ease;
            position: relative;
            overflow: hidden;
            box-shadow: none;

            &:hover {
                background-color: color-mix(in oklab, var(--color-on-surface) 12%, transparent);
            }

            &:active {
                transform: scale(0.94);
            }

            &:focus-visible {
                outline: 2px solid color-mix(in oklab, var(--color-primary, #5a7fff) 55%, transparent);
                outline-offset: 1px;
            }

            ui-icon {
                --ui-icon-size: var(--ui-explorer-action-icon-size, 1.15rem);
                --ui-icon-padding: 0px;
                inline-size: var(--ui-icon-size) !important;
                block-size: var(--ui-icon-size) !important;
                min-inline-size: var(--ui-icon-size) !important;
                min-block-size: var(--ui-icon-size) !important;
                max-inline-size: var(--ui-icon-size) !important;
                max-block-size: var(--ui-icon-size) !important;
            }
        }

        .fm-grid-header {
            position: sticky !important;
            display: grid;
            grid-template-columns: #{$row-grid};
            box-sizing: border-box;
            inline-size: 100%;
            min-inline-size: 0;
            inset-block-start: 0;
            z-index: 8;
            padding: 0.4rem 0.65rem;
            border-radius: 0;
            border: none;
            box-shadow: 0 1px 0 color-mix(in oklab, var(--color-on-surface, #fff) 6%, transparent);
            background: color-mix(in oklab, var(--color-on-surface, #fff) 3.5%, transparent);
            font-size: 0.6875rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: #5c5f66;
            color: light-dark(#5c5f66, #c4c7ce);
            color: var(--color-on-surface-variant);
            -webkit-text-fill-color: currentColor;
            opacity: 1;
            gap: 0.35rem;
            min-block-size: 2rem;

            place-content: center;
            place-items: center;
            justify-content: start;
            justify-items: start;
            text-align: start;

            touch-action: manipulation;
            pointer-events: auto;

            & > * { inline-size: auto; }

            .c { font-weight: 600; }
            .icon { grid-column: icon; }
            .name { grid-column: name; inline-size: stretch; }
            .size {
                grid-column: size;
                justify-content: end;
                text-align: end;
            }
            .date {
                grid-column: date;
                justify-content: end;
                text-align: end;
            }
            .actions {
                grid-column: actions;
                inline-size: stretch;
                block-size: fit-content;
                box-shadow: none;
                padding: 0;
                max-inline-size: stretch;
                border-radius: 0;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                place-content: center;
                place-items: center;
                text-wrap: nowrap;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                gap: 0.25rem;

                justify-content: flex-end;
                justify-items: end;
                justify-self: end;
                text-align: end;
            }
        }

    }
}