/* =========================================================
   TACTICAL FLOOR GAME - SHARED UI DESIGN SYSTEM
   ========================================================= */


/* =========================================================
   BRANDING
   ========================================================= */

.tfg-header-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.tfg-header-logo {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;

    display: block;

    border: 1px solid rgba(130, 190, 230, .34);
    border-radius: 50%;

    object-fit: cover;

    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .24),
        0 3px 10px rgba(0, 0, 0, .22);
}

.tfg-header-brand > span {
    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #f2c94c;
    font-weight: 700;

    text-shadow:
        0 0 2px rgba(242, 201, 76, .22),
        0 0 5px rgba(242, 201, 76, .10);
}

.tfg-login-logo {
    display: block;

    width: clamp(150px, 30vw, 190px);
    max-width: 100%;
    height: auto;

    margin: 0 auto 20px;
    padding: 0;

    border: 1px solid rgba(105, 183, 228, .38);
    border-radius: 50%;

    background: #07131f;

    object-fit: contain;

    box-shadow:
        0 14px 36px rgba(0, 0, 0, .34);
}


/* =========================================================
   UNIVERSAL PILL BUTTON
   ========================================================= */

.tfg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 38px;
    padding: 0 15px;

    border: 1px solid rgba(133, 194, 255, .22);
    border-radius: 999px;

    cursor: pointer;

    font-size: 12px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;
    white-space: nowrap;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.tfg-btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.tfg-btn-primary {
    border-color: #2b94dd;
    background: #197fc9;
    color: #ffffff;
}

.tfg-btn-primary:hover {
    background: #238ed9;
    color: #ffffff;
}

.tfg-btn-secondary {
    border-color: #31566f;
    background: #17364d;
    color: #ffffff;
}

.tfg-btn-secondary:hover {
    background: #214c69;
    color: #ffffff;
}

.tfg-btn-muted {
    border-color: #294a61;
    background: #102a3e;
    color: #dcecf5;
}

.tfg-btn-muted:hover {
    background: #183b55;
    color: #ffffff;
}

.tfg-btn-sm {
    min-height: 36px;
    padding: 0 13px;
    font-size: 11px;
}

.tfg-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 13px;
    line-height: 1;
}


/* =========================================================
   PAGE CONTEXT HEADER
   ========================================================= */

.header-left {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 18px;

    min-width: 0;
}

.brand {
    flex-shrink: 0;
}

.page-context {
    display: flex;
    align-items: baseline;
    gap: 10px;

    min-width: 0;

    padding-left: 18px;

    border-left:
        1px solid rgba(151, 185, 211, .24);
}

.page-context-title {
    flex-shrink: 0;

    color: #ffffff;

    font-size: 14px;
    font-weight: 800;

    white-space: nowrap;
}

.page-context-description {
    min-width: 0;
    max-width: min(52vw, 760px);

    overflow: hidden;

    color: #9fb8c8;

    font-size: 11px;
    line-height: 1.3;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   USERS PAGE
   ========================================================= */

.container {
    flex: 1 0 auto;

    width: calc(100% - 32px);
    max-width: none;

    margin-left: 16px;
    margin-right: 16px;
}

.card,
.table-wrap,
table {
    width: 100%;
    max-width: none;
}

.users-page-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    width: 100%;

    margin-top: 14px;
    margin-bottom: 0;
}

.users-page-actions-left,
.users-page-actions-right {
    display: contents;
}

.users-page-actions .tfg-btn-muted {
    order: 1;
}

.users-page-actions .tfg-btn-primary {
    order: 2;
}


/* =========================================================
   GLOBAL FOOTER
   ========================================================= */

body {
    min-height: 100vh;
}

.tfg-global-footer {
    flex: 0 0 auto;

    min-height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 5px 14px;

    border-top:
        1px solid rgba(126, 169, 198, .12);

    background: #06121d;

    color: #668396;

    font-size: 9px;
    line-height: 1.3;

    text-align: center;
}

.tfg-global-footer strong {
    color: #8da7b8;
    font-weight: 700;
}

.tfg-global-footer-dot {
    margin: 0 5px;
    color: #415f72;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .header-left {
        gap: 12px;
    }

    .page-context {
        gap: 7px;
        padding-left: 12px;
    }

    .page-context-description {
        max-width: 34vw;
    }
}

@media (max-width: 768px) {

    .tfg-header-logo {
        width: 31px;
        height: 31px;
        flex-basis: 31px;
    }

    .tfg-login-logo {
        width: clamp(130px, 38vw, 165px);
    }
}

@media (max-width: 720px) {

    .container {
        width: calc(100% - 20px);

        margin-left: 10px;
        margin-right: 10px;
    }

    .page-context-description {
        display: none;
    }

    .page-context-title {
        font-size: 12px;
    }

    .users-page-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .users-page-actions .tfg-btn {
        width: auto;
    }

    .tfg-global-footer {
        min-height: 25px;

        padding: 4px 8px;

        font-size: 8px;
    }
}

/* =========================================
   TFG EMBEDDED SUPPORT PAGE V1
========================================= */

body.tfg-embedded-page {
    min-height: 100vh;

    background: #071824;
}

.tfg-embedded-page .topbar,
.tfg-embedded-page .tfg-global-footer {
    display: none;
}

.tfg-embedded-page .container {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    background: transparent;
}

.tfg-embedded-page .card {
    border-radius: 9px;

    background:
        rgba(11, 35, 54, .92);
}

.tfg-embedded-page .users-page-actions {
    padding:
        0 2px 2px;
}

.tfg-embedded-page .form-card {
    border-radius: 9px;
}

@media (max-width: 720px) {

    .tfg-embedded-page .container {
        width: 100%;
        margin: 0;
    }
}

/* =========================================================
   TFG HEADER BRAND GOLD REFINE V1
   Gold lebih tajam, tipis, dan glow lebih terkontrol.
   ========================================================= */

/*
 * TFG SINGLE LINE FOOTER V1
 */
.tfg-global-footer-version {
    margin-left: 14px;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .tfg-global-footer-version {
        margin-left: 9px;
    }
}

/* =========================================================
   TFG MAP WINDOW CONTRACT V1

   Berlaku untuk WORKSPACE UTAMA yang dibuka di depan peta.

   Contoh:
   - Pustaka Aset
   - Komunikasi
   - Delegasi Kewenangan
   - Kelola Olah Yuda
   - Pengguna
   - Wide Planning
   - workspace besar sejenis

   TIDAK berlaku untuk compact dialog:
   - konfirmasi
   - Main Cepat
   - Tema
   - welcome
   - tambah kategori/tipe/kelas
   - dialog kecil sejenis

   ATURAN:
   Feature hanya mengatur CONTENT.
   Feature TIDAK BOLEH memiliki sendiri:
   - posisi overlay
   - width / height shell
   - kompensasi sidebar
   - border shell
   - border-radius shell
   - background shell
   - shadow shell
   - header shell
   - close button shell
   - breakpoint geometri dasar

   Semua properti tersebut dimiliki kontrak ini.
   ========================================================= */

.tfg-map-window-overlay {
    position:
        fixed !important;

    inset:
        0 !important;

    z-index:
        7800;

    display:
        flex;

    align-items:
        center !important;

    justify-content:
        center !important;

    box-sizing:
        border-box !important;

    padding:
        10px !important;

    background:
        rgba(2, 12, 20, .32) !important;

    backdrop-filter:
        blur(.7px) !important;

    -webkit-backdrop-filter:
        blur(.7px) !important;
}


.tfg-map-window-overlay[hidden] {
    display:
        none !important;
}


.tfg-map-window {
    box-sizing:
        border-box !important;

    width:
        min(
            1280px,
            calc(100vw - 20px)
        ) !important;

    height:
        min(
            720px,
            calc(100vh - 20px)
        ) !important;

    max-width:
        calc(100vw - 20px) !important;

    max-height:
        calc(100vh - 20px) !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    overflow:
        hidden !important;

    border:
        1px solid
        rgba(93, 178, 231, .35)
        !important;

    border-radius:
        12px !important;

    background:
        #071824 !important;

    box-shadow:
        0 24px 70px
        rgba(0, 0, 0, .58)
        !important;

    color:
        #eaf5fb;
}


.tfg-map-window-header {
    box-sizing:
        border-box !important;

    flex:
        0 0 auto !important;

    min-height:
        60px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    gap:
        12px !important;

    padding:
        9px
        12px
        9px
        18px !important;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .08)
        !important;

    background:
        #092033 !important;

    color:
        #ffffff;
}


.tfg-map-window-heading {
    flex:
        1 1 auto;

    min-width:
        0;

    display:
        block;
}


.tfg-map-window-title {
    display:
        block;

    margin:
        0;

    padding:
        0;

    color:
        #ffffff;

    font-size:
        17px;

    font-weight:
        800;

    line-height:
        1.15;
}


.tfg-map-window-subtitle {
    display:
        block;

    margin:
        3px 0 0;

    padding:
        0;

    color:
        #91aabd;

    font-size:
        10px;

    font-weight:
        400;

    line-height:
        1.2;
}


.tfg-map-window-header
.tfg-map-window-close {
    box-sizing:
        border-box !important;

    flex:
        0 0 34px !important;

    width:
        34px !important;

    min-width:
        34px !important;

    max-width:
        34px !important;

    height:
        34px !important;

    min-height:
        34px !important;

    max-height:
        34px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    border:
        1px solid
        rgba(255, 255, 255, .12)
        !important;

    border-radius:
        7px !important;

    background:
        rgba(255, 255, 255, .06)
        !important;

    color:
        #e5f1f8 !important;

    cursor:
        pointer;
}


.tfg-map-window-header
.tfg-map-window-close:hover {
    background:
        rgba(255, 255, 255, .12)
        !important;
}


/*
 * DESKTOP - sidebar terbuka.
 */
@media (min-width: 769px) {

    body:has(#sidebar:not(.collapsed))
    .tfg-map-window {
        width:
            min(
                1280px,
                calc(100vw - 340px)
            ) !important;

        max-width:
            calc(100vw - 340px)
            !important;

        height:
            min(
                720px,
                calc(100vh - 96px)
            ) !important;

        max-height:
            calc(100vh - 96px)
            !important;

        transform:
            translateX(150px)
            !important;
    }


    /*
     * DESKTOP - sidebar ringkas.
     */
    body:has(#sidebar.collapsed)
    .tfg-map-window {
        width:
            min(
                1320px,
                calc(100vw - 104px)
            ) !important;

        max-width:
            calc(100vw - 104px)
            !important;

        height:
            min(
                720px,
                calc(100vh - 96px)
            ) !important;

        max-height:
            calc(100vh - 96px)
            !important;

        transform:
            translateX(32px)
            !important;
    }
}


/*
 * TABLET / MOBILE.
 */
@media (max-width: 768px) {

    .tfg-map-window-overlay {
        padding:
            8px !important;

        background:
            rgba(2, 12, 20, .27)
            !important;

        backdrop-filter:
            blur(.4px) !important;

        -webkit-backdrop-filter:
            blur(.4px) !important;
    }


    .tfg-map-window {
        width:
            calc(100vw - 16px)
            !important;

        max-width:
            calc(100vw - 16px)
            !important;

        height:
            calc(100dvh - 16px)
            !important;

        max-height:
            calc(100dvh - 16px)
            !important;

        transform:
            none !important;
    }


    .tfg-map-window-header {
        min-height:
            52px !important;

        padding:
            8px
            9px
            8px
            12px !important;
    }
}


/*
 * Smartphone penuh mengikuti perilaku workspace Pustaka Aset.
 */
@media (max-width: 640px) {

    .tfg-map-window-overlay {
        padding:
            0 !important;
    }


    .tfg-map-window {
        width:
            100vw !important;

        max-width:
            none !important;

        height:
            100dvh !important;

        max-height:
            none !important;

        border-left:
            0 !important;

        border-right:
            0 !important;

        border-radius:
            0 !important;
    }
}

/* TFG MAP WINDOW CONTRACT V1 END */
/*
 * =========================================================
 * TFG MAP WINDOW FULL PANEL V1
 * =========================================================
 */

.tfg-map-window-overlay.is-full-panel {
    top:
        var(
            --tfg-operational-topbar-height,
            60px
        ) !important;

    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100vw !important;

    height:
        calc(
            100dvh
            -
            var(
                --tfg-operational-topbar-height,
                60px
            )
        ) !important;

    padding: 0 !important;
    overflow: hidden !important;
}


.tfg-map-window-overlay.is-full-panel
.tfg-map-window.is-full-panel {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;

    transform: none !important;

    border-radius: 0 !important;
}

/* TFG MAP WINDOW FULL PANEL V1 END */

/*
 * =========================================================
 * TFG MAP WINDOW FULL PANEL CONTROL V1
 * =========================================================
 */

.tfg-map-window-full-panel {
    position: static !important;
    flex: 0 0 34px !important;
    margin: 0 !important;
}

.tfg-map-window-full-panel[hidden] {
    display: none !important;
}

.tfg-map-window-full-panel-icon {
    width: 17px;
    height: 17px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tfg-map-window-full-panel-icon-restore {
    display: none;
}

.tfg-map-window-full-panel[
    aria-pressed="true"
]
.tfg-map-window-full-panel-icon-expand {
    display: none;
}

.tfg-map-window-full-panel[
    aria-pressed="true"
]
.tfg-map-window-full-panel-icon-restore {
    display: block;
}

/* TFG MAP WINDOW FULL PANEL CONTROL V1 END */


/*
 * =========================================================
 * TFG SCHEDULE OVERLAY PERFORMANCE V1
 * =========================================================
 *
 * Jadwal berada di atas Leaflet map.
 * Hindari backdrop blur fullscreen agar compositor browser
 * tidak terus melakukan blur pada map/tile di belakangnya.
 */

#tfgScheduleModal.tfg-schedule-modal-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* TFG SCHEDULE OVERLAY PERFORMANCE V1 END */

/*
 * =========================================================
 * TFG MAP WINDOW VIEWPORT BODY LOCK V1
 * =========================================================
 */

body.tfg-map-window-full-panel-open {
    overflow: hidden !important;
}

/* TFG MAP WINDOW VIEWPORT BODY LOCK V1 END */
/*
 * =========================================================
 * TFG MAP WINDOW PORTAL GEOMETRY ESCAPE V1
 * =========================================================
 *
 * Full Panel map-window dipindahkan langsung ke document.body.
 * Selector ini sengaja lebih spesifik daripada desktop
 * body:has(#sidebar...) .tfg-map-window agar kompensasi
 * sidebar / map-window tidak ikut berlaku di portal.
 */

@media (min-width: 769px) {

    body.tfg-map-window-full-panel-open:has(#sidebar)
    >
    .tfg-map-window-overlay.is-full-panel
    >
    .tfg-map-window.is-full-panel {
        position: absolute !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        box-sizing: border-box !important;

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

        height: 100% !important;

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

        margin: 0 !important;

        transform: none !important;

        border-radius: 0 !important;
    }
}

/* TFG MAP WINDOW PORTAL GEOMETRY ESCAPE V1 END */

/* TFG EMBEDDED DARK SCROLLBAR V1 */

body.tfg-embedded-page {
    scrollbar-color:
        rgba(93, 141, 170, .88)
        #071824;
    scrollbar-width: thin;
}

body.tfg-embedded-page * {
    scrollbar-color:
        rgba(93, 141, 170, .88)
        #071824;
    scrollbar-width: thin;
}

body.tfg-embedded-page::-webkit-scrollbar,
body.tfg-embedded-page *::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

body.tfg-embedded-page::-webkit-scrollbar-track,
body.tfg-embedded-page *::-webkit-scrollbar-track {
    background:
        #071824;
}

body.tfg-embedded-page::-webkit-scrollbar-corner,
body.tfg-embedded-page *::-webkit-scrollbar-corner {
    background:
        #071824;
}

body.tfg-embedded-page::-webkit-scrollbar-thumb,
body.tfg-embedded-page *::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            rgba(77, 132, 166, .96) 0%,
            rgba(58, 104, 133, .96) 100%
        );
    border:
        2px solid #071824;
    border-radius: 999px;
}

body.tfg-embedded-page::-webkit-scrollbar-thumb:hover,
body.tfg-embedded-page *::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            rgba(104, 170, 211, .98) 0%,
            rgba(72, 126, 160, .98) 100%
        );
}

/* TFG EMBEDDED DARK SCROLLBAR V1 END */

/* TFG EMBEDDED ROOT SCROLLBAR V1 */

html:has(body.tfg-embedded-page) {
    background:
        #071824;

    color-scheme:
        dark;

    scrollbar-color:
        rgba(93, 141, 170, .88)
        #071824;

    scrollbar-width:
        thin;
}

html:has(body.tfg-embedded-page)::-webkit-scrollbar {
    width:
        12px;

    height:
        12px;
}

html:has(body.tfg-embedded-page)::-webkit-scrollbar-track {
    background:
        #071824;
}

html:has(body.tfg-embedded-page)::-webkit-scrollbar-corner {
    background:
        #071824;
}

html:has(body.tfg-embedded-page)::-webkit-scrollbar-thumb {
    background:
        #4d84a6;

    border:
        2px solid #071824;

    border-radius:
        999px;
}

html:has(body.tfg-embedded-page)::-webkit-scrollbar-thumb:hover {
    background:
        #68aad3;
}

/* TFG EMBEDDED ROOT SCROLLBAR V1 END */