/* ==========================================================================
   Haru Live
   Link Category Index - Mobile
   ========================================================================== */

.link-category-index-page {
    --lci-bg: #f5f6f8;
    --lci-card: #ffffff;

    --lci-text: #111827;
    --lci-soft: #475569;
    --lci-muted: #94a3b8;

    --lci-border: #e5e7eb;
    --lci-border-soft: #eef2f7;

    --lci-blue: #2563eb;
    --lci-blue-soft: #eff6ff;

    --lci-shadow:
        0 1px 2px rgba(15, 23, 42, .03),
        0 3px 10px rgba(15, 23, 42, .025);
}


/* ==========================================================================
   Mobile
   ========================================================================== */

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

    .link-category-index-page {
        width: 100%;
        max-width: 100%;

        padding:
            10px
            0
            28px !important;

        background:
            var(--lci-bg);

        overflow-x:
            hidden;
    }

    .link-category-index-page *,
    .link-category-index-page *::before,
    .link-category-index-page *::after {
        box-sizing:
            border-box;
    }


    /* ======================================================================
       Container
       ====================================================================== */

    .link-category-index-container {
        width:
            100%;

        max-width:
            100% !important;

        padding:
            0
            8px !important;
    }


    /* ======================================================================
       List
       ====================================================================== */

    .link-category-index-list {
        display:
            grid !important;

        grid-template-columns:
            minmax(0, 1fr);

        gap:
            8px !important;
    }

    .link-category-index-list > :not([hidden]) ~ :not([hidden]) {
        margin-top:
            0 !important;
    }


    /* ======================================================================
       Main Category Card
       ====================================================================== */

    .link-category-index-card {
        width:
            100%;

        min-width:
            0;

        padding:
            10px !important;

        border:
            1px solid
            var(--lci-border) !important;

        border-radius:
            11px !important;

        background:
            var(--lci-card) !important;

        box-shadow:
            var(--lci-shadow) !important;

        overflow:
            hidden;
    }


    /* ======================================================================
       category-tree generic handling
       ====================================================================== */

    .link-category-index-card a {
        min-width:
            0;

        color:
            inherit;
    }

    .link-category-index-card ul,
    .link-category-index-card ol {
        max-width:
            100%;
    }

    .link-category-index-card li {
        min-width:
            0;
    }


    /* ======================================================================
       Common headings inside tree
       ====================================================================== */

    .link-category-index-card h2,
    .link-category-index-card h3,
    .link-category-index-card h4,
    .link-category-index-card h5 {
        max-width:
            100%;

        margin-top:
            0;

        color:
            var(--lci-text);

        word-break:
            keep-all;
    }

    .link-category-index-card h3 {
        font-size:
            12px !important;

        font-weight:
            800 !important;

        line-height:
            1.35 !important;
    }

    .link-category-index-card h4 {
        font-size:
            10px !important;

        font-weight:
            800 !important;

        line-height:
            1.35 !important;
    }

    .link-category-index-card h5 {
        font-size:
            9px !important;

        font-weight:
            700 !important;

        line-height:
            1.35 !important;
    }


    /* ======================================================================
       Paragraphs / Description
       ====================================================================== */

    .link-category-index-card p {
        max-width:
            100%;

        margin-top:
            3px !important;

        font-size:
            7.5px !important;

        line-height:
            1.45 !important;

        color:
            #64748b !important;

        word-break:
            keep-all;
    }


    /* ======================================================================
       Count / meta text
       ====================================================================== */

    .link-category-index-card .text-xs {
        font-size:
            6.8px !important;

        line-height:
            1.35 !important;
    }

    .link-category-index-card .text-sm {
        font-size:
            7.5px !important;

        line-height:
            1.45 !important;
    }

    .link-category-index-card .text-gray-400 {
        color:
            #94a3b8 !important;
    }

    .link-category-index-card .text-gray-500 {
        color:
            #64748b !important;
    }


    /* ======================================================================
       Tree indentation
       ====================================================================== */

    .link-category-index-card .ml-2 {
        margin-left:
            5px !important;
    }

    .link-category-index-card .ml-3 {
        margin-left:
            7px !important;
    }

    .link-category-index-card .ml-4 {
        margin-left:
            9px !important;
    }

    .link-category-index-card .ml-5,
    .link-category-index-card .ml-6,
    .link-category-index-card .ml-8 {
        margin-left:
            10px !important;
    }


    /* ======================================================================
       Tree borders
       ====================================================================== */

    .link-category-index-card .border-l,
    .link-category-index-card .border-l-2 {
        border-left-color:
            #e2e8f0 !important;
    }


    /* ======================================================================
       Generic nested blocks
       ====================================================================== */

    .link-category-index-card .rounded,
    .link-category-index-card .rounded-lg,
    .link-category-index-card .rounded-xl {
        border-radius:
            8px !important;
    }

    .link-category-index-card .border {
        border-color:
            var(--lci-border) !important;
    }

    .link-category-index-card .bg-gray-50 {
        background:
            #f8fafc !important;
    }

    .link-category-index-card .bg-gray-100 {
        background:
            #f1f5f9 !important;
    }


    /* ======================================================================
       Generic buttons / links in tree
       ====================================================================== */

    .link-category-index-card a[class*="px-"],
    .link-category-index-card button {
        min-height:
            27px;

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        padding:
            4px
            7px !important;

        border-radius:
            7px !important;

        font-size:
            7px !important;

        font-weight:
            700 !important;

        line-height:
            1 !important;

        white-space:
            nowrap;

        text-decoration:
            none;
    }


    /* ======================================================================
       Grid inside category tree
       ====================================================================== */

    .link-category-index-card .grid {
        grid-template-columns:
            minmax(0, 1fr) !important;

        gap:
            6px !important;
    }


    /* ======================================================================
       Flex rows inside tree
       ====================================================================== */

    .link-category-index-card .flex {
        min-width:
            0;
    }

    .link-category-index-card .justify-between {
        gap:
            7px;
    }

    .link-category-index-card .items-start > :first-child {
        min-width:
            0;
    }


    /* ======================================================================
       Long titles
       ====================================================================== */

    .link-category-index-card .font-semibold,
    .link-category-index-card .font-bold {
        max-width:
            100%;

        word-break:
            keep-all;
    }


    /* ======================================================================
       Empty State
       ====================================================================== */

    .link-category-index-empty {
        min-height:
            130px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        padding:
            24px
            12px !important;

        border:
            1px dashed
            #e2e8f0 !important;

        border-radius:
            11px !important;

        background:
            #ffffff !important;

        box-shadow:
            none !important;

        font-size:
            8.5px !important;

        line-height:
            1.45 !important;

        color:
            #94a3b8 !important;

        text-align:
            center;

        word-break:
            keep-all;
    }

}


/* ==========================================================================
   <= 390px
   ========================================================================== */

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

    .link-category-index-container {
        padding-left:
            6px !important;

        padding-right:
            6px !important;
    }

}


/* ==========================================================================
   <= 350px
   ========================================================================== */

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

    .haru-page-header:has(.haru-page-header__actions) {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }

    .haru-page-header__actions {
        width:
            100%;

        display:
            grid !important;

        grid-template-columns:
            minmax(0, 1fr);
    }

    .haru-page-header__action {
        width:
            100%;
    }

}