/* ==========================================================================
   Haru Live
   Links Index - Mobile
   ========================================================================== */

.links-index-page {
    --li-bg: #f5f6f8;
    --li-card: #ffffff;

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

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

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

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


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

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

    /* ======================================================================
       Page
       ====================================================================== */

    .links-index-page {
        width: 100%;
        max-width: 100%;

        padding:
            10px
            0
            28px !important;

        background:
            var(--li-bg);

        overflow-x:
            hidden;
    }

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

    .links-index-container {
        display:
            grid !important;

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

        gap:
            9px !important;

        width:
            100%;

        max-width:
            100% !important;

        padding:
            0
            8px !important;
    }

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


    /* ======================================================================
       Alerts
       ====================================================================== */

    .links-index-container > .bg-green-50,
    .links-index-container > .bg-red-50 {
        padding:
            8px
            9px !important;

        border-radius:
            8px !important;

        font-size:
            8.5px !important;

        line-height:
            1.45 !important;
    }

    .links-index-container > .bg-green-50 {
        border:
            1px solid
            #bbf7d0;

        background:
            #f0fdf4 !important;

        color:
            #15803d !important;
    }

    .links-index-container > .bg-red-50 {
        border:
            1px solid
            #fecaca;

        background:
            #fef2f2 !important;

        color:
            #b91c1c !important;
    }


    /* ======================================================================
       Featured Section
       ====================================================================== */

    .links-featured {
        width:
            100%;

        padding:
            10px !important;

        border:
            1px solid
            #bfdbfe !important;

        border-radius:
            11px !important;

        background:
            #eff6ff !important;

        box-shadow:
            var(--li-shadow) !important;
    }

    .links-featured > .mb-4 {
        margin-bottom:
            7px !important;
    }

    .links-featured h3 {
        margin:
            0;

        font-size:
            12px !important;

        font-weight:
            800 !important;

        line-height:
            1.3 !important;

        color:
            #1d4ed8 !important;
    }

    .links-featured > .grid {
        grid-template-columns:
            minmax(0, 1fr) !important;

        gap:
            7px !important;
    }


    /* ======================================================================
       Category
       ====================================================================== */

    .links-category {
        width:
            100%;

        padding:
            10px !important;

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

        border-radius:
            11px !important;

        background:
            #ffffff !important;

        box-shadow:
            var(--li-shadow) !important;
    }

    .links-category__header {
        display:
            grid !important;

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

        gap:
            8px !important;

        margin-bottom:
            8px !important;
    }

    .links-category__header > div:first-child {
        min-width:
            0;
    }

    .links-category__header h3 {
        margin:
            0;

        font-size:
            12px !important;

        font-weight:
            800 !important;

        line-height:
            1.35 !important;

        color:
            #111827 !important;
    }

    .links-category__header h3 a {
        color:
            inherit !important;

        text-decoration:
            none !important;
    }

    .links-category__header .mt-1.flex.flex-wrap {
        gap:
            5px !important;

        margin-top:
            3px !important;

        font-size:
            6.8px !important;

        line-height:
            1.35 !important;

        color:
            #94a3b8 !important;
    }

    .links-category__header p {
        margin-top:
            4px !important;

        font-size:
            7.5px !important;

        line-height:
            1.45 !important;

        color:
            #64748b !important;

        word-break:
            keep-all;
    }


    /* ======================================================================
       Category Actions
       ====================================================================== */

    .links-category__header > .flex.shrink-0 {
        gap:
            4px !important;

        align-self:
            start;
    }

    .links-category__header > .flex.shrink-0 a,
    .links-category__header > .flex.shrink-0 button {
        min-height:
            26px;

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        padding:
            4px
            7px !important;

        border-radius:
            999px !important;

        font-size:
            6.8px !important;

        font-weight:
            700 !important;

        line-height:
            1 !important;

        white-space:
            nowrap;

        text-decoration:
            none !important;
    }


    /* ======================================================================
       Links Grid
       ====================================================================== */

    .links-category > .grid {
        grid-template-columns:
            minmax(0, 1fr) !important;

        gap:
            7px !important;
    }


    /* ======================================================================
       Link Card
       ====================================================================== */

    .links-card {
        width:
            100%;

        min-width:
            0;

        padding:
            9px !important;

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

        border-radius:
            9px !important;

        background:
            #ffffff !important;

        box-shadow:
            none !important;
    }

    .links-card--featured {
        border-color:
            #dbeafe !important;
    }

    .links-card:hover {
        background:
            #f8fafc !important;
    }

    .links-card--featured:hover {
        background:
            #f8fbff !important;
    }


    /* category breadcrumb */
    .links-card > .mb-1.text-xs.text-gray-400 {
        margin-bottom:
            4px !important;

        overflow:
            hidden;

        font-size:
            6.5px !important;

        line-height:
            1.3 !important;

        color:
            #94a3b8 !important;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;
    }


    /* ======================================================================
       Link Title Row
       ====================================================================== */

    .links-card > .flex.items-center.gap-2 {
        min-width:
            0;

        gap:
            5px !important;
    }

    .links-card > .flex.items-center.gap-2 > span {
        flex:
            0 0 auto;

        padding:
            3px
            5px !important;

        border-radius:
            999px !important;

        font-size:
            6.5px !important;

        font-weight:
            700 !important;

        line-height:
            1 !important;
    }

    .links-card > .flex.items-center.gap-2 > a {
        min-width:
            0;

        overflow:
            hidden;

        font-size:
            10px !important;

        font-weight:
            800 !important;

        line-height:
            1.35 !important;

        color:
            #111827 !important;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;

        text-decoration:
            none !important;
    }


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

    .links-card > .mt-1.text-sm,
    .links-card > .mt-2.text-sm {
        margin-top:
            4px !important;

        font-size:
            7.5px !important;

        line-height:
            1.45 !important;

        color:
            #64748b !important;

        word-break:
            keep-all;
    }


    /* ======================================================================
       Tags
       ====================================================================== */

    .links-tags,
    .links-card > .mt-2.flex.flex-wrap.gap-1 {
        gap:
            3px !important;

        margin-top:
            5px !important;
    }

    .links-tags a,
    .links-card > .mt-2.flex.flex-wrap.gap-1 a {
        min-height:
            20px;

        display:
            inline-flex;

        align-items:
            center;

        padding:
            3px
            5px !important;

        border-radius:
            999px !important;

        background:
            #f1f5f9 !important;

        font-size:
            6.3px !important;

        line-height:
            1 !important;

        color:
            #64748b !important;

        text-decoration:
            none !important;

        white-space:
            nowrap;
    }


    /* ======================================================================
       URL
       ====================================================================== */

    .links-url,
    .links-card > a.mt-2.block.truncate {
        display:
            block;

        max-width:
            100%;

        margin-top:
            5px !important;

        overflow:
            hidden;

        font-size:
            6.8px !important;

        line-height:
            1.35 !important;

        color:
            var(--li-blue) !important;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;
    }


    /* ======================================================================
       View All
       ====================================================================== */

    .links-category > .mt-4.text-right {
        margin-top:
            7px !important;
    }

    .links-category > .mt-4.text-right a {
        display:
            inline-flex;

        align-items:
            center;

        min-height:
            28px;

        font-size:
            7.5px !important;

        font-weight:
            700 !important;

        color:
            var(--li-blue) !important;

        text-decoration:
            none !important;
    }


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

    .links-empty,
    .links-category > .border-dashed,
    .links-index-container > .text-center.text-gray-500 {
        min-height:
            110px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        padding:
            20px
            12px !important;

        border:
            1px dashed
            #e2e8f0 !important;

        border-radius:
            9px !important;

        background:
            #ffffff !important;

        font-size:
            8px !important;

        line-height:
            1.45 !important;

        color:
            #94a3b8 !important;

        text-align:
            center;

        word-break:
            keep-all;
    }

}


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

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

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

        padding-right:
            6px !important;
    }

    .links-category__header {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .links-category__header > .flex.shrink-0 {
        width:
            100%;
    }

    .links-category__header > .flex.shrink-0 a,
    .links-category__header > .flex.shrink-0 form,
    .links-category__header > .flex.shrink-0 button {
        flex:
            1 1 0;

        width:
            100%;
    }

}


/* ==========================================================================
   <= 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:
            repeat(2, minmax(0, 1fr));
    }

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

}