/* ==========================================================================
   TEMPO ARCHIVE
   VIEWPORT + SCROLL STABILITY FINAL
   ========================================================================== */


/* ==========================================================================
   1. BASE VIEWPORT
   ========================================================================== */

html {
    width: 100%;
    min-width: 320px;
    min-height: 100%;

    overflow-x: auto;
    overflow-y: auto;
}


body {
    width: 100%;
    min-width: 320px;
    min-height: 100dvh;

    margin: 0;

    overflow-x: auto;
    overflow-y: auto;
}


/* ==========================================================================
   2. DASHBOARD BASE
   Dashboard tetap memenuhi viewport.
   Scroll tidak dilempar secara acak ke BODY.
   ========================================================================== */

#dashboard-public.aktif-dashboard,
#dashboard-private.aktif-dashboard {
    position: fixed !important;
    inset: 0 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;

    box-sizing: border-box !important;
}


/* ==========================================================================
   3. DESKTOP / LAPTOP
   ========================================================================== */

@media (min-width: 961px) {

    #dashboard-public.aktif-dashboard,
    #dashboard-private.aktif-dashboard {
        display: flex !important;
        flex-direction: row !important;

        overflow: hidden !important;
    }


    #dashboard-public.aktif-dashboard
    > .sidebar-menu,

    #dashboard-private.aktif-dashboard
    > .sidebar-menu {
        flex: 0 0 320px !important;

        width: 320px !important;
        min-width: 320px !important;
        max-width: 320px !important;

        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        box-sizing: border-box !important;
    }


    #dashboard-public.aktif-dashboard
    > .main-content,

    #dashboard-private.aktif-dashboard
    > .main-content {
        flex: 1 1 auto !important;

        width: auto !important;
        min-width: 0 !important;

        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior-y: contain;

        box-sizing: border-box !important;

        -webkit-overflow-scrolling: touch;
    }
}


/* ==========================================================================
   4. TABLET / BROWSER SEMPIT / SPLIT WINDOW
   Dashboard menjadi satu scroll surface vertikal.
   ========================================================================== */

@media (max-width: 960px) {

    #dashboard-public.aktif-dashboard,
    #dashboard-private.aktif-dashboard {
        display: flex !important;
        flex-direction: column !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior-y: contain;

        -webkit-overflow-scrolling: touch;
    }


    #dashboard-public.aktif-dashboard
    > .sidebar-menu,

    #dashboard-private.aktif-dashboard
    > .sidebar-menu {
        flex: 0 0 auto !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        max-height: min(42dvh, 360px) !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        box-sizing: border-box !important;
    }


    #dashboard-public.aktif-dashboard
    > .main-content,

    #dashboard-private.aktif-dashboard
    > .main-content {
        flex: 0 0 auto !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow-x: hidden !important;
        overflow-y: visible !important;

        box-sizing: border-box !important;

        padding-bottom:
            max(
                80px,
                env(safe-area-inset-bottom)
            )
            !important;
    }
}


/* ==========================================================================
   5. PRIVATE HOME
   Pada viewport normal daftar room boleh scroll sendiri.
   ========================================================================== */

@media (min-width: 961px) and (min-height: 761px) {

    #dashboard-private.aktif-dashboard
    > .main-content:has(
        #list-frasa-box-private
        .tt-private-v4-home
    ) {
        display: flex !important;
        flex-direction: column !important;

        overflow: hidden !important;
    }


    #dashboard-private.aktif-dashboard
    > .main-content:has(
        #list-frasa-box-private
        .tt-private-v4-home
    )
    .tt-private-drive-content {
        display: flex !important;
        flex-direction: column !important;

        flex: 1 1 auto !important;

        min-height: 0 !important;

        overflow: hidden !important;
    }


    #dashboard-private
    #list-frasa-box-private:has(
        .tt-private-v4-home
    ) {
        flex: 1 1 auto !important;

        min-height: 0 !important;

        overflow: hidden !important;
    }


    #dashboard-private
    .tt-private-v4-home {
        display: flex !important;
        flex-direction: column !important;

        height: 100% !important;
        min-height: 0 !important;

        overflow: hidden !important;
    }


    #dashboard-private
    .tt-private-v4-room-grid {
        flex: 1 1 auto !important;

        min-height: 0 !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior-y: contain;

        scrollbar-gutter: stable;
    }
}


/* ==========================================================================
   6. VIEWPORT PENDEK
   Browser tidak harus fullscreen.
   Private Home boleh memanjang dan seluruh konten bisa dicapai.
   ========================================================================== */

@media (min-width: 821px) and (max-height: 760px) {

    #dashboard-private.aktif-dashboard
    > .main-content:has(
        #list-frasa-box-private
        .tt-private-v4-home
    ) {
        display: block !important;

        height: 100dvh !important;
        max-height: 100dvh !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
    }


    #dashboard-private.aktif-dashboard
    > .main-content:has(
        #list-frasa-box-private
        .tt-private-v4-home
    )
    .tt-private-drive-content {
        display: block !important;

        min-height: 0 !important;

        overflow: visible !important;
    }


    #dashboard-private
    #list-frasa-box-private:has(
        .tt-private-v4-home
    ) {
        min-height: 0 !important;

        overflow: visible !important;
    }


    #dashboard-private
    .tt-private-v4-home {
        display: block !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        overflow: visible !important;

        padding-bottom: 60px !important;
    }


    #dashboard-private
    .tt-private-v4-room-grid {
        min-height: 0 !important;

        overflow: visible !important;
    }
}


/* ==========================================================================
   7. WATERMARK RESPONSIVE
   Posisi tetap visual-center dan tidak ikut scroll.
   ========================================================================== */

.main-content::before,
.main-content::after {
    pointer-events: none !important;
}


@media (max-width: 960px) {

    .main-content::before,
    .main-content::after {
        left: 50vw !important;
    }

}


@media (max-width: 600px) {

    .main-content::before {
        width: min(380px, 72vw) !important;
    }

    .main-content::after {
        width: min(470px, 86vw) !important;
    }
}


/* ==========================================================================
   8. PRIVATE HERO BORDER
   Seluruh perimeter Ruang Pribadi harus utuh.
   ========================================================================== */

#dashboard-private
.tt-private-v4-hero {
    border-top-color:
        rgba(255, 215, 0, 0.23)
        !important;
}


/* ==========================================================================
   9. FLEX/GRID ANTI OVERFLOW
   ========================================================================== */

#dashboard-public *,
#dashboard-private * {
    box-sizing: border-box;
}


#dashboard-public .main-content,
#dashboard-private .main-content,
#dashboard-public .phrases-list-container,
#dashboard-private .phrases-list-container,
#dashboard-private .tt-private-v4-home {
    min-width: 0;
}


/* ==========================================================================
   END VIEWPORT + SCROLL STABILITY
   ========================================================================== */
/* ========================================================================== 
   10. PUBLIC + PRIVATE HERO PERIMETER — PRODUCTION FIX 2026-08-17
   Menjaga garis kartu tetap utuh pada Chromium saat backdrop-filter / sticky
   layer dikomposisikan. Border asli dipertahankan; lapisan inset memastikan
   sisi atas dan sudut tidak tampak putus tanpa mengubah geometri layout.
   ========================================================================== */

#dashboard-public .tt-overview-hero,
#dashboard-private .tt-private-v4-hero {
    isolation: isolate;
}

#dashboard-public .tt-overview-hero {
    border-color: rgba(255, 215, 0, 0.30) !important;
    box-shadow:
        0 24px 58px rgba(0, 0, 0, 0.24),
        inset 0 0 0 1px rgba(255, 215, 0, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

#dashboard-private .tt-private-v4-hero {
    position: relative;
    border: 1px solid rgba(255, 215, 0, 0.25) !important;
    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.24),
        inset 0 0 0 1px rgba(255, 215, 0, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

#dashboard-public .tt-overview-hero::after,
#dashboard-private .tt-private-v4-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 30;
    box-sizing: border-box;
    border: 1px solid rgba(255, 215, 0, 0.16);
    border-radius: inherit;
    pointer-events: none;
}

/* ========================================================================== 
   END PUBLIC + PRIVATE HERO PERIMETER FIX
   ========================================================================== */


/* ========================================================================== 
   11. NARROW WINDOW SCROLL CHAIN — 2026-08-18
   Saat browser di-split/minimize, dashboard tetap menjadi scroll surface utama.
   ========================================================================== */

@media (max-width: 960px) {
    #dashboard-public.aktif-dashboard,
    #dashboard-private.aktif-dashboard {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: auto !important;
        touch-action: pan-y;
    }

    #dashboard-public.aktif-dashboard > .sidebar-menu,
    #dashboard-private.aktif-dashboard > .sidebar-menu {
        overscroll-behavior-y: auto !important;
        touch-action: pan-y;
    }

    #dashboard-public.aktif-dashboard > .main-content,
    #dashboard-private.aktif-dashboard > .main-content {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        overscroll-behavior-y: auto !important;
        touch-action: pan-y;
    }

    /* Sticky desktop tidak boleh mengunci scroll pada split-window/tablet. */
    #dashboard-public .tempototo-sticky-topbar,
    #dashboard-private .tempototo-sticky-topbar {
        position: relative !important;
        top: auto !important;
        transform: none !important;
    }
}

/* ========================================================================== 
   END NARROW WINDOW SCROLL CHAIN
   ========================================================================== */

/* ==========================================================================
   TEMPO ARCHIVE — PROPORTIONAL VIEWPORT MODE
   Desktop composition dipertahankan pada browser besar maupun kecil.
   Tidak pindah menjadi layout vertikal.
   ========================================================================== */

:root {
    --tt-dashboard-scale: 1;
    --tt-dashboard-layout-width: 100vw;
    --tt-dashboard-layout-height: 100dvh;
}


#dashboard-public.aktif-dashboard,
#dashboard-private.aktif-dashboard {
    display: flex !important;
    flex-direction: row !important;

    position: fixed !important;
    top: 0 !important;
    left: 0 !important;

    width:
        var(
            --tt-dashboard-layout-width
        )
        !important;

    min-width:
        var(
            --tt-dashboard-layout-width
        )
        !important;

    max-width:
        none
        !important;

    height:
        var(
            --tt-dashboard-layout-height
        )
        !important;

    min-height:
        var(
            --tt-dashboard-layout-height
        )
        !important;

    max-height:
        none
        !important;

    overflow:
        hidden
        !important;

    zoom:
        var(
            --tt-dashboard-scale
        );

    transform-origin:
        top left
        !important;
}


#dashboard-public.aktif-dashboard
> .sidebar-menu,

#dashboard-private.aktif-dashboard
> .sidebar-menu {
    flex:
        0 0 320px
        !important;

    width:
        320px
        !important;

    min-width:
        320px
        !important;

    max-width:
        320px
        !important;

    height:
        100%
        !important;

    min-height:
        0
        !important;

    max-height:
        none
        !important;

    overflow-x:
        hidden
        !important;

    overflow-y:
        auto
        !important;
}


#dashboard-public.aktif-dashboard
> .main-content,

#dashboard-private.aktif-dashboard
> .main-content {
    flex:
        1 1 auto
        !important;

    width:
        auto
        !important;

    min-width:
        0
        !important;

    max-width:
        none
        !important;

    height:
        100%
        !important;

    min-height:
        0
        !important;

    max-height:
        none
        !important;

    overflow-x:
        hidden
        !important;

    overflow-y:
        auto
        !important;
}


/*
 * CHIP KATEGORI
 * Ruang nama, pin dan checkbox tidak saling mendorong.
 */

#chips-kategori-box-public
.category-chip,

#chips-kategori-box-private
.category-chip {
    width:
        100%
        !important;

    min-width:
        0
        !important;

    flex:
        0 0 auto
        !important;

    display:
        flex
        !important;

    align-items:
        center
        !important;

    justify-content:
        flex-start
        !important;

    gap:
        8px
        !important;
}


#chips-kategori-box-public
.category-chip
.category-label,

#chips-kategori-box-private
.category-chip
.category-label {
    flex:
        1 1 auto
        !important;

    min-width:
        0
        !important;
}


#chips-kategori-box-public
.category-chip
.category-name,

#chips-kategori-box-private
.category-chip
.category-name {
    display:
        block
        !important;

    width:
        100%
        !important;

    overflow:
        hidden
        !important;

    text-overflow:
        ellipsis
        !important;

    white-space:
        nowrap
        !important;
}


#chips-kategori-box-public
.category-chip
.pin-chip-btn,

#chips-kategori-box-private
.category-chip
.pin-chip-btn {
    flex:
        0 0 42px
        !important;

    width:
        42px
        !important;
}


#chips-kategori-box-public
.category-chip
.kategori-check-wrap,

#chips-kategori-box-private
.category-chip
.kategori-check-wrap {
    flex:
        0 0 30px
        !important;

    width:
        30px
        !important;
}


/* Tidak pernah ubah sidebar menjadi header atas */
@media (max-width: 960px) {

    #dashboard-public.aktif-dashboard,
    #dashboard-private.aktif-dashboard {
        flex-direction:
            row
            !important;
    }


    #dashboard-public.aktif-dashboard
    > .sidebar-menu,

    #dashboard-private.aktif-dashboard
    > .sidebar-menu {
        flex:
            0 0 320px
            !important;

        width:
            320px
            !important;

        min-width:
            320px
            !important;

        max-width:
            320px
            !important;

        height:
            100%
            !important;

        max-height:
            none
            !important;
    }


    #dashboard-public.aktif-dashboard
    > .main-content,

    #dashboard-private.aktif-dashboard
    > .main-content {
        flex:
            1 1 auto
            !important;

        width:
            auto
            !important;

        height:
            100%
            !important;

        overflow-y:
            auto
            !important;
    }


    #dashboard-public
    .tempototo-sticky-topbar,

    #dashboard-private
    .tempototo-sticky-topbar {
        position:
            sticky
            !important;

        top:
            0
            !important;
    }
}

/* ==========================================================================
   END PROPORTIONAL VIEWPORT MODE
   ========================================================================== */

/* ==========================================================================
   SIDEBAR CATEGORY CHECKBOX — FINAL GEOMETRY FIX
   Mengoreksi wrapper 30px dari proportional viewport.
   ========================================================================== */


/*
 * Wrapper harus benar-benar kotak.
 */
#dashboard-public
#chips-kategori-box-public
.category-chip
.kategori-check-wrap,

#dashboard-private
#chips-kategori-box-private
.category-chip
.kategori-check-wrap {

    position:
        absolute
        !important;

    right:
        10px
        !important;

    top:
        50%
        !important;

    transform:
        translateY(-50%)
        !important;


    width:
        22px
        !important;

    min-width:
        22px
        !important;

    max-width:
        22px
        !important;


    height:
        22px
        !important;

    min-height:
        22px
        !important;

    max-height:
        22px
        !important;


    flex:
        0 0 22px
        !important;


    display:
        inline-flex
        !important;

    align-items:
        center
        !important;

    justify-content:
        center
        !important;


    margin:
        0
        !important;

    padding:
        0
        !important;


    line-height:
        0
        !important;

    box-sizing:
        border-box
        !important;

    overflow:
        visible
        !important;
}


/*
 * Input asli tetap tersembunyi.
 */
#dashboard-public
#chips-kategori-box-public
.category-chip
.kategori-checkbox,

#dashboard-private
#chips-kategori-box-private
.category-chip
.kategori-checkbox {

    position:
        absolute
        !important;

    width:
        1px
        !important;

    height:
        1px
        !important;

    opacity:
        0
        !important;

    pointer-events:
        none
        !important;
}


/*
 * Kotak visual checkbox.
 */
#dashboard-public
#chips-kategori-box-public
.category-chip
.kategori-check-custom,

#dashboard-private
#chips-kategori-box-private
.category-chip
.kategori-check-custom {

    display:
        inline-flex
        !important;

    align-items:
        center
        !important;

    justify-content:
        center
        !important;


    width:
        18px
        !important;

    min-width:
        18px
        !important;

    max-width:
        18px
        !important;


    height:
        18px
        !important;

    min-height:
        18px
        !important;

    max-height:
        18px
        !important;


    flex:
        0 0 18px
        !important;

    aspect-ratio:
        1 / 1
        !important;


    margin:
        0
        !important;

    padding:
        0
        !important;


    border:
        1px solid
        rgba(
            255,
            215,
            0,
            0.42
        )
        !important;

    border-radius:
        6px
        !important;


    background:
        rgba(
            255,
            255,
            255,
            0.035
        )
        !important;


    box-sizing:
        border-box
        !important;

    transform:
        none
        !important;
}


/*
 * Checked.
 */
#dashboard-public
#chips-kategori-box-public
.category-chip
.kategori-checkbox:checked
+
.kategori-check-custom,

#dashboard-private
#chips-kategori-box-private
.category-chip
.kategori-checkbox:checked
+
.kategori-check-custom {

    border-color:
        rgba(
            255,
            215,
            0,
            0.92
        )
        !important;

    background:
        linear-gradient(
            135deg,
            #ffd83f,
            #ffb02f
        )
        !important;

    box-shadow:
        0 0 13px
        rgba(
            255,
            215,
            0,
            0.18
        )
        !important;
}


/*
 * Tanda centang.
 */
#dashboard-public
#chips-kategori-box-public
.category-chip
.kategori-checkbox:checked
+
.kategori-check-custom::after,

#dashboard-private
#chips-kategori-box-private
.category-chip
.kategori-checkbox:checked
+
.kategori-check-custom::after {

    content:
        "✓"
        !important;

    display:
        block
        !important;

    color:
        #171717
        !important;

    font-size:
        11px
        !important;

    font-weight:
        1000
        !important;

    line-height:
        1
        !important;
}

/* ==========================================================================
   END SIDEBAR CHECKBOX GEOMETRY FIX
   ========================================================================== */

/* ==========================================================================
   PUBLIC ARCHIVE WATERMARK — FINAL VISUAL CENTER FIX
   Watermark selalu berada di tengah AREA CONTENT,
   bukan di tengah seluruh browser.
   Aman untuk proportional dashboard scaling.
   ========================================================================== */


/*
 * Sidebar Public menggunakan lebar dasar 320px.
 *
 * Alih-alih watermark berupa kotak kecil yang digeser
 * dengan left: 50vw / calc(50vw + ...),
 *
 * pseudo-element sekarang dibuat memenuhi SELURUH
 * area Main Content setelah sidebar.
 *
 * Logo kemudian dicenter di dalam area tersebut.
 *
 * Jadi:
 *
 * ┌──────────────┬───────────────────────────────────────┐
 * │   SIDEBAR    │               LOGO                   │
 * │    320px     │             (CENTER)                 │
 * │              │                                      │
 * └──────────────┴───────────────────────────────────────┘
 */


/* ==========================================================
   LOGO WATERMARK
   ========================================================== */

#dashboard-public.aktif-dashboard
> .main-content::before {

    content:
        ""
        !important;


    /*
     * Tetap diam walaupun content di-scroll.
     */
    position:
        fixed
        !important;


    /*
     * Mulai tepat setelah sidebar.
     *
     * 320px adalah lebar BASE sidebar sebelum
     * proportional zoom diterapkan.
     *
     * Karena seluruh dashboard ikut di-zoom,
     * nilai ini ikut mengecil proporsional secara visual.
     */
    left:
        320px
        !important;

    top:
        0
        !important;


    right:
        auto
        !important;

    bottom:
        auto
        !important;


    /*
     * Area watermark = seluruh area dashboard
     * dikurangi sidebar.
     *
     * Variable ini sudah dibuat oleh
     * PROPORTIONAL DASHBOARD SCALE.
     */
    width:
        calc(
            var(
                --tt-dashboard-layout-width,
                100vw
            )
            - 320px
        )
        !important;


    /*
     * Ikuti tinggi dashboard hasil scaling.
     */
    height:
        var(
            --tt-dashboard-layout-height,
            100vh
        )
        !important;


    /*
     * Matikan bentuk kotak/aspect-ratio lama.
     */
    max-width:
        none
        !important;

    max-height:
        none
        !important;

    aspect-ratio:
        auto
        !important;


    /*
     * Tidak perlu translate lagi.
     * Logo dicenter melalui background-position.
     */
    transform:
        none
        !important;


    /*
     * WATERMARK
     */
    background-image:
        url(
            "logo-tempototo-transparent.webp"
        )
        !important;

    background-repeat:
        no-repeat
        !important;


    /*
     * 50% = tepat tengah horizontal MAIN CONTENT.
     *
     * 62% = visual-center vertikal setelah memperhitungkan
     * toolbar/header bagian atas.
     */
    background-position:
        50% 62%
        !important;


    /*
     * Ukuran dasar 500px.
     *
     * Karena dashboard menggunakan zoom proporsional,
     * watermark juga otomatis mengecil bersama UI.
     */
    background-size:
        500px 500px
        !important;


    opacity:
        0.075
        !important;


    filter:
        brightness(1.22)
        contrast(1.08)
        saturate(0.96)
        drop-shadow(
            0 0 28px
            rgba(
                255,
                210,
                0,
                0.12
            )
        )
        !important;


    pointer-events:
        none
        !important;

    user-select:
        none
        !important;


    z-index:
        0
        !important;
}


/* ==========================================================
   AURA / CAHAYA WATERMARK
   Harus menggunakan pusat yang PERSIS sama dengan logo.
   ========================================================== */

#dashboard-public.aktif-dashboard
> .main-content::after {

    content:
        ""
        !important;


    position:
        fixed
        !important;


    left:
        320px
        !important;

    top:
        0
        !important;


    right:
        auto
        !important;

    bottom:
        auto
        !important;


    width:
        calc(
            var(
                --tt-dashboard-layout-width,
                100vw
            )
            - 320px
        )
        !important;


    height:
        var(
            --tt-dashboard-layout-height,
            100vh
        )
        !important;


    max-width:
        none
        !important;

    max-height:
        none
        !important;

    aspect-ratio:
        auto
        !important;


    transform:
        none
        !important;


    /*
     * Cahaya ditempatkan di titik yang sama:
     * 50% horizontal
     * 62% vertical
     */
    background:
        radial-gradient(
            circle 340px
            at 50% 62%,

            rgba(
                255,
                210,
                0,
                0.060
            )
            0%,

            rgba(
                255,
                210,
                0,
                0.022
            )
            38%,

            transparent
            72%
        )
        !important;


    pointer-events:
        none
        !important;

    user-select:
        none
        !important;


    z-index:
        0
        !important;
}


/* ==========================================================
   SAFE WATERMARK STACKING CONTEXT
   Tidak mengubah positioning elemen UI lain.
   ========================================================== */

#dashboard-public.aktif-dashboard
> .main-content {

    position:
        relative
        !important;

    isolation:
        isolate
        !important;
}


/* ==========================================================================
   END PUBLIC WATERMARK FINAL VISUAL CENTER FIX
   ========================================================================== */