/* =========================================================
   MANAGEMENT PORTAL
   CORPORATE FINAL UI
   FINAL OVERRIDE — LOAD LAST
   ========================================================= */


/* =========================================================
   TOKENS
   ========================================================= */

:root{
    --cf-bg:#f4f7fb;
    --cf-card:#ffffff;
    --cf-card-soft:#f8fafc;

    --cf-sidebar:#153451;
    --cf-sidebar-deep:#102945;
    --cf-sidebar-text:#dce6f1;
    --cf-sidebar-muted:#8398af;

    --cf-text:#142b47;
    --cf-text-2:#425b76;
    --cf-muted:#72869c;

    --cf-border:#dce5ee;
    --cf-border-2:#cdd9e5;

    --cf-gold:#d89428;
    --cf-gold-2:#efb341;
    --cf-gold-soft:#fff6e5;

    --cf-blue:#2478cf;
    --cf-green:#15a66f;
    --cf-red:#d94e5a;
    --cf-purple:#7556df;

    --cf-shadow:0 3px 12px rgba(27,52,81,.055);
    --cf-shadow-strong:0 10px 30px rgba(30,55,82,.09);

    --cf-radius:14px;
}


/* =========================================================
   DARK TOKENS
   ========================================================= */

html[data-theme="dark"]{
    --cf-bg:#0e1927;
    --cf-card:#142437;
    --cf-card-soft:#182a3f;

    --cf-text:#eef5fb;
    --cf-text-2:#bdcad8;
    --cf-muted:#8ea2b7;

    --cf-border:#293f56;
    --cf-border-2:#38516b;

    --cf-sidebar:#122b45;
    --cf-sidebar-deep:#0d2239;

    --cf-gold-soft:rgba(216,148,40,.10);

    --cf-shadow:0 3px 14px rgba(0,0,0,.18);
    --cf-shadow-strong:0 12px 34px rgba(0,0,0,.23);
}


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

html,
body{
    background:var(--cf-bg) !important;
}

body{
    color:var(--cf-text) !important;
    font-size:13px !important;
    line-height:1.5 !important;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

*{
    box-sizing:border-box;
}

a{
    text-decoration:none;
}

.content,
.page-shell,
.main-content,
.content-area{
    background:var(--cf-bg) !important;
}

.page-shell{
    padding:16px 18px 24px !important;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.app-layout,
.app{
    min-height:100vh;
}

.content{
    min-width:0;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar{
    width:220px !important;
    min-width:220px !important;

    padding:14px 9px 12px !important;

    background:
        linear-gradient(
            180deg,
            var(--cf-sidebar) 0%,
            var(--cf-sidebar-deep) 100%
        ) !important;

    border-right:1px solid rgba(255,255,255,.055) !important;

    box-shadow:
        5px 0 20px rgba(15,37,61,.08) !important;

    scrollbar-width:thin;
    scrollbar-color:rgba(187,204,222,.25) transparent;
}

.sidebar::-webkit-scrollbar{
    width:4px !important;
}

.sidebar::-webkit-scrollbar-thumb{
    background:rgba(191,207,224,.28) !important;
    border-radius:999px;
}

.sidebar::-webkit-scrollbar-track{
    background:transparent !important;
}


/* Brand */

.brand{
    min-height:67px !important;
    padding:7px 6px 12px !important;
    margin-bottom:5px !important;
}

.brand-mark{
    width:42px !important;
    height:42px !important;

    border-radius:11px !important;

    background:
        linear-gradient(
            145deg,
            #bc741c,
            #e2a53c
        ) !important;

    color:white !important;

    box-shadow:
        0 6px 16px rgba(176,108,21,.20) !important;
}

.brand strong{
    color:#ffffff !important;

    font-size:13px !important;
    font-weight:800 !important;

    letter-spacing:.01em;
}

.brand small{
    margin-top:2px !important;

    color:#aebed0 !important;

    font-size:8px !important;
}


/* Section headings */

.nav-section{
    margin:17px 7px 6px !important;

    color:var(--cf-sidebar-muted) !important;

    font-size:8px !important;
    font-weight:800 !important;

    letter-spacing:.08em !important;
}


/* Menu */

.nav{
    padding-right:1px;
}

.nav-link{
    min-height:38px !important;

    display:flex !important;
    align-items:center !important;

    gap:8px !important;

    margin:2px 0 !important;
    padding:0 11px !important;

    border-radius:8px !important;

    color:var(--cf-sidebar-text) !important;

    font-size:10px !important;
    font-weight:600 !important;

    transition:
        background .15s ease,
        color .15s ease,
        transform .15s ease !important;
}

.nav-link > span{
    width:17px !important;
    min-width:17px !important;

    display:inline-flex !important;
    justify-content:center !important;

    color:#b8c9da !important;

    font-size:11px !important;
}

.nav-link:hover{
    background:rgba(255,255,255,.055) !important;
    color:#ffffff !important;
}

.nav-link.active{
    background:
        linear-gradient(
            90deg,
            #cf8c27,
            #efb340
        ) !important;

    color:#ffffff !important;

    box-shadow:
        0 5px 14px rgba(175,109,17,.20) !important;
}

.nav-link.active > span{
    color:#ffffff !important;
}

.nav-badge{
    margin-left:auto !important;

    padding:3px 6px !important;

    border-radius:999px !important;

    background:#7453e8 !important;
    color:white !important;

    font-size:7px !important;
}


/* Support */

.support-card{
    margin-top:18px !important;

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

    background:rgba(255,255,255,.055) !important;
}

.support-card b{
    color:#ffffff !important;
    font-size:10px !important;
}

.support-card small{
    color:#9eb0c4 !important;
    font-size:8px !important;
}


/* =========================================================
   TOPBAR
   ========================================================= */

.topbar{
    min-height:70px !important;
    height:70px !important;

    padding:0 18px !important;

    display:flex !important;
    align-items:center !important;

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

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

    box-shadow:
        0 2px 10px rgba(30,53,80,.035) !important;
}

.page-title{
    min-width:220px;
}

.page-title h1{
    margin:0 !important;

    color:var(--cf-text) !important;

    font-size:21px !important;
    font-weight:800 !important;

    line-height:1.15 !important;

    letter-spacing:-.02em;
}

.page-title p{
    margin:4px 0 0 !important;

    color:var(--cf-muted) !important;

    font-size:9px !important;
}


/* Top actions */

.top-actions{
    margin-left:auto !important;

    display:flex !important;
    align-items:center !important;

    gap:8px !important;
}


/* Search */

.top-actions .search{
    width:275px !important;
}

.top-actions .search input{
    height:39px !important;

    padding-left:34px !important;

    border:1px solid var(--cf-border) !important;
    border-radius:10px !important;

    background:var(--cf-card-soft) !important;

    color:var(--cf-text) !important;

    font-size:9px !important;

    box-shadow:none !important;
}

.top-actions .search > span{
    color:var(--cf-muted) !important;
}


/* Notification */

.top-notification{
    width:39px !important;
    height:39px !important;
    min-width:39px !important;

    border:1px solid var(--cf-border) !important;
    border-radius:10px !important;

    background:var(--cf-card-soft) !important;

    color:var(--cf-text-2) !important;

    box-shadow:none !important;
}


/* =========================================================
   THEME TOGGLE — FINAL
   ========================================================= */

.top-theme-toggle{
    position:relative !important;

    width:92px !important;
    min-width:92px !important;
    height:39px !important;

    display:grid !important;
    grid-template-columns:1fr 1fr !important;

    padding:3px !important;

    overflow:hidden !important;

    border:1px solid var(--cf-border) !important;
    border-radius:11px !important;

    background:var(--cf-card-soft) !important;

    box-shadow:none !important;
}

.top-theme-toggle:before{
    content:"" !important;

    position:absolute !important;

    top:3px !important;
    left:3px !important;

    width:41px !important;
    height:31px !important;

    border-radius:8px !important;

    background:#ffffff !important;

    border:1px solid rgba(211,147,39,.28) !important;

    box-shadow:
        0 2px 6px rgba(34,56,81,.10) !important;

    transition:transform .18s ease !important;
}

html[data-theme="dark"] .top-theme-toggle:before{
    transform:translateX(44px) !important;

    background:#274159 !important;

    border-color:#425d78 !important;
}

.top-theme-toggle span{
    position:relative !important;
    z-index:3 !important;

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

    width:auto !important;
    height:auto !important;

    color:var(--cf-muted) !important;

    font-size:12px !important;
}

.top-theme-toggle .theme-sun{
    color:#cf8a22 !important;
}

html[data-theme="dark"] .top-theme-toggle .theme-sun{
    color:#8397aa !important;
}

html[data-theme="dark"] .top-theme-toggle .theme-moon{
    color:#8bc1ed !important;
}


/* =========================================================
   PROFILE
   ========================================================= */

.top-profile{
    min-height:42px !important;

    padding:4px 5px !important;

    display:flex !important;
    align-items:center !important;

    gap:8px !important;

    border:1px solid var(--cf-border) !important;
    border-radius:11px !important;

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

    box-shadow:none !important;
}

.top-profile .avatar{
    width:33px !important;
    height:33px !important;
    min-width:33px !important;

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

    border:1px solid #efd8aa !important;
    border-radius:9px !important;

    background:#fff6e5 !important;

    color:#b77818 !important;

    font-size:11px !important;
    font-weight:800 !important;
}

html[data-theme="dark"] .top-profile .avatar{
    border-color:#5a4933 !important;
    background:#2a2b28 !important;
    color:#e2aa4a !important;
}

.profile-copy{
    min-width:100px !important;
}

.profile-copy b{
    display:block !important;

    color:var(--cf-text) !important;

    font-size:9px !important;
    font-weight:800 !important;
}

.profile-copy small{
    margin-top:2px !important;

    display:block !important;

    color:var(--cf-muted) !important;

    font-size:7px !important;
}

.top-profile .logout{
    height:30px !important;

    padding:0 8px !important;

    display:flex !important;
    align-items:center !important;

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

    color:var(--cf-muted) !important;

    font-size:7px !important;
}


/* =========================================================
   DASHBOARD GRID
   ========================================================= */

.dashboard-main{
    display:grid !important;

    grid-template-columns:
        1.25fr
        .95fr
        .75fr !important;

    gap:12px !important;

    margin-bottom:12px !important;
}

.dashboard-main > .panel{
    min-width:0 !important;

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

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

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


/* =========================================================
   PANELS
   ========================================================= */

.panel,
.site-summary,
.bottom-grid > section,
.bottom-grid > .panel{
    border:1px solid var(--cf-border) !important;

    border-radius:var(--cf-radius) !important;

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

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

.panel-head{
    min-height:46px !important;

    padding:0 14px !important;

    display:flex !important;
    align-items:center !important;

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

    background:transparent !important;
}

.panel-head h3{
    margin:0 !important;

    color:var(--cf-text) !important;

    font-size:13px !important;
    font-weight:800 !important;
}

.panel-body{
    padding:13px !important;
}


/* =========================================================
   TABLES
   ========================================================= */

.data-table,
.table-wrap table,
.leader360-table{
    width:100% !important;

    border-collapse:collapse !important;

    color:var(--cf-text) !important;
}

.data-table th,
.table-wrap th,
.leader360-table th{
    padding:9px 8px !important;

    background:var(--cf-card-soft) !important;

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

    color:var(--cf-muted) !important;

    font-size:8px !important;
    font-weight:800 !important;
}

.data-table td,
.table-wrap td,
.leader360-table td{
    padding:10px 8px !important;

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

    color:var(--cf-text-2) !important;

    font-size:9px !important;
}

.data-table tbody tr:hover,
.table-wrap tbody tr:hover{
    background:var(--cf-card-soft) !important;
}


/* =========================================================
   LEADER CARD
   ========================================================= */

.person b{
    color:var(--cf-text) !important;
    font-size:10px !important;
}

.person small{
    color:var(--cf-muted) !important;
    font-size:8px !important;
}

.site-pill{
    border-color:#c8d7e5 !important;

    color:#425b76 !important;

    background:#fff !important;

    font-size:7px !important;
}

html[data-theme="dark"] .site-pill{
    border-color:#3f5973 !important;
    background:#172a40 !important;
    color:#b7c8da !important;
}

.score-bar{
    background:#edf1f5 !important;
}

html[data-theme="dark"] .score-bar{
    background:#243a50 !important;
}

.score-fill{
    background:
        linear-gradient(
            90deg,
            #c17a1c,
            #efae35
        ) !important;
}


/* =========================================================
   SITE SUMMARY
   ========================================================= */

.site-summary{
    margin:0 0 12px !important;

    padding:14px !important;
}


/* Header */

.site-explorer .section-title{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
}

.site-explorer .section-title h3{
    margin:0 !important;

    color:var(--cf-text) !important;

    font-size:14px !important;
    font-weight:800 !important;
}

.site-explorer .section-title p{
    margin:4px 0 0 !important;

    color:var(--cf-muted) !important;

    font-size:9px !important;
}

.live-dot{
    color:var(--cf-green) !important;
    font-size:8px !important;
}


/* Toolbar */

.site-explorer-toolbar{
    margin-top:12px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    gap:12px !important;
}

.site-region-tabs{
    padding:3px !important;

    display:flex !important;

    gap:4px !important;

    border:1px solid var(--cf-border) !important;
    border-radius:10px !important;

    background:var(--cf-card-soft) !important;
}

.site-region-tabs button{
    min-width:66px !important;
    height:32px !important;

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

    gap:6px !important;

    padding:0 10px !important;

    border:0 !important;
    border-radius:7px !important;

    background:transparent !important;

    color:var(--cf-muted) !important;

    font-size:8px !important;
    font-weight:800 !important;
}

.site-region-tabs button.active{
    background:
        linear-gradient(
            90deg,
            #d28d27,
            #e8a83a
        ) !important;

    color:#ffffff !important;

    box-shadow:none !important;
}

.site-region-tabs button span{
    min-width:18px !important;
    height:18px !important;

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

    border-radius:5px !important;

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

    color:inherit !important;

    font-size:7px !important;
}


/* Search */

.site-explorer-search{
    width:240px !important;
}

.site-explorer-search input{
    width:100% !important;
    height:35px !important;

    border:1px solid var(--cf-border-2) !important;
    border-radius:9px !important;

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

    color:var(--cf-text) !important;

    font-size:8px !important;
}


/* Grid */

.site-explorer-grid{
    margin-top:11px !important;

    display:grid !important;

    grid-template-columns:
        repeat(4,minmax(0,1fr)) !important;

    gap:9px !important;

    max-height:none !important;

    overflow:visible !important;
}


/* Cards */

.site-explorer-card{
    min-height:102px !important;

    padding:11px !important;

    border:1px solid var(--cf-border) !important;
    border-radius:10px !important;

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

    box-shadow:none !important;

    transform:none !important;
}

.site-explorer-card:hover{
    border-color:#c7d6e5 !important;

    box-shadow:
        0 4px 12px rgba(31,55,82,.06) !important;

    transform:translateY(-1px) !important;
}


/* Card header */

.site-explorer-card-head{
    display:grid !important;

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

    gap:8px !important;

    align-items:center !important;
}

.site-explorer-logo{
    width:33px !important;
    height:33px !important;

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

    border-radius:9px !important;

    background:#fff5e4 !important;

    color:#d18d28 !important;

    font-size:12px !important;
}

html[data-theme="dark"] .site-explorer-logo{
    background:rgba(212,145,39,.11) !important;
}

.site-explorer-name strong{
    color:var(--cf-text) !important;

    font-size:9px !important;
    font-weight:800 !important;
}

.site-explorer-name small{
    color:var(--cf-muted) !important;

    font-size:7px !important;
}

.site-explorer-score{
    color:var(--cf-text) !important;

    font-size:16px !important;
    font-weight:800 !important;
}


/* Region badges */

.site-region-badge{
    height:16px !important;

    padding:0 5px !important;

    display:inline-flex !important;
    align-items:center !important;

    border-radius:4px !important;

    font-size:6px !important;
    font-weight:800 !important;
}

.site-region-badge.png{
    border:1px solid #f2cb85 !important;

    background:#fff7e9 !important;

    color:#c77f13 !important;
}

.site-region-badge.idn{
    border:1px solid #acd0ef !important;

    background:#eff7ff !important;

    color:#337db8 !important;
}

html[data-theme="dark"] .site-region-badge.png{
    border-color:#735730 !important;
    background:#30291f !important;
    color:#e7ad50 !important;
}

html[data-theme="dark"] .site-region-badge.idn{
    border-color:#345d7d !important;
    background:#1c3146 !important;
    color:#7eb9e6 !important;
}


/* Site score line */

.site-explorer-progress{
    height:3px !important;

    margin:9px 0 !important;

    overflow:hidden !important;

    border-radius:999px !important;

    background:#e9eef3 !important;
}

html[data-theme="dark"] .site-explorer-progress{
    background:#263c52 !important;
}

.site-explorer-progress i{
    background:
        linear-gradient(
            90deg,
            #c4781b,
            #eba837
        ) !important;
}


/* Bottom */

.site-explorer-card-foot{
    display:flex !important;
    align-items:flex-end !important;
    justify-content:space-between !important;

    gap:7px !important;
}

.site-explorer-status{
    font-size:7px !important;
    font-weight:800 !important;
}

.site-explorer-status.excellent{
    color:#0da46c !important;
}

.site-explorer-status.monitoring{
    color:#13ad79 !important;
}

.site-explorer-top{
    text-align:right !important;
}

.site-explorer-top small{
    color:var(--cf-muted) !important;
    font-size:6px !important;
}

.site-explorer-top strong,
.site-explorer-top em,
.site-explorer-top > span{
    color:var(--cf-text-2) !important;
    font-size:7px !important;
}


/* Footer */

.site-explorer-footer{
    margin-top:10px !important;
    padding-top:9px !important;

    display:flex !important;
    align-items:center !important;

    border-top:1px solid var(--cf-border) !important;
}

.site-explorer-footer span,
.site-explorer-footer small{
    color:var(--cf-muted) !important;

    font-size:7px !important;
}

.site-view-more{
    margin-left:auto !important;

    min-height:30px !important;

    border:1px solid var(--cf-border-2) !important;
    border-radius:8px !important;

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

    color:var(--cf-text-2) !important;

    font-size:7px !important;
}


/* =========================================================
   PIPELINE
   ========================================================= */

.pipeline{
    gap:11px !important;
}

.pipeline-row b{
    color:var(--cf-text) !important;
    font-size:9px !important;
}

.pipeline-row small{
    color:var(--cf-muted) !important;
    font-size:7px !important;
}

.pipeline-track{
    height:5px !important;

    background:#e9eef3 !important;
}

html[data-theme="dark"] .pipeline-track{
    background:#273d53 !important;
}


/* =========================================================
   BOTTOM GRID
   ========================================================= */

.bottom-grid{
    display:grid !important;

    grid-template-columns:
        1.15fr
        1fr
        1fr
        1fr !important;

    gap:10px !important;
}

.bottom-grid .panel{
    min-width:0 !important;
}


/* Text */

.activity b,
.agenda b,
.task b,
.insights b{
    color:var(--cf-text) !important;
    font-size:9px !important;
}

.activity p,
.agenda small,
.task small,
.insights p{
    color:var(--cf-muted) !important;
    font-size:7px !important;
}


/* =========================================================
   FORMS / BUTTONS
   ========================================================= */

input,
select,
textarea{
    color:var(--cf-text) !important;

    font-size:10px !important;
}

input::placeholder,
textarea::placeholder{
    color:#96a7b8 !important;
}

.btn{
    border-radius:8px !important;

    font-size:8px !important;
    font-weight:800 !important;
}

.btn.primary{
    border-color:#d2902c !important;

    background:
        linear-gradient(
            90deg,
            #d1902c,
            #e9ad3e
        ) !important;

    color:#ffffff !important;
}

.btn.outline{
    border-color:var(--cf-border-2) !important;

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

    color:var(--cf-text-2) !important;
}


/* =========================================================
   DARK MODE FINAL
   ========================================================= */

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .site-summary,
html[data-theme="dark"] .site-explorer-card,
html[data-theme="dark"] .top-profile{
    background:var(--cf-card) !important;
}

html[data-theme="dark"] .page-title h1,
html[data-theme="dark"] .panel-head h3,
html[data-theme="dark"] .site-explorer .section-title h3,
html[data-theme="dark"] .site-explorer-name strong,
html[data-theme="dark"] .site-explorer-score{
    color:var(--cf-text) !important;
}

html[data-theme="dark"] .data-table th{
    background:var(--cf-card-soft) !important;
}


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

@media(max-width:1350px){

    .site-explorer-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr)) !important;
    }

    .dashboard-main{
        grid-template-columns:
            1fr 1fr !important;
    }

    .dashboard-main > :last-child{
        grid-column:1/-1;
    }

    .bottom-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }

}


@media(max-width:1050px){

    .top-actions .search{
        width:210px !important;
    }

    .profile-copy{
        display:none !important;
    }

}


@media(max-width:850px){

    .sidebar{
        width:220px !important;
    }

    .site-explorer-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }

    .dashboard-main{
        grid-template-columns:1fr !important;
    }

    .dashboard-main > :last-child{
        grid-column:auto;
    }

}


@media(max-width:620px){

    .site-explorer-grid,
    .bottom-grid{
        grid-template-columns:1fr !important;
    }

    .top-actions .search{
        display:none !important;
    }

    .page-title p{
        display:none !important;
    }

}

/* =========================================================
   MANAGEMENT PORTAL
   CORPORATE FINAL V2
   READABILITY + CONTRAST + ASSESSMENT FIX
   ========================================================= */

:root{
    --v2-bg:#f5f7fa;
    --v2-card:#ffffff;

    --v2-text:#122a45;
    --v2-text-secondary:#425a73;
    --v2-muted:#687e96;

    --v2-border:#d9e3ed;
    --v2-border-strong:#c7d5e3;

    --v2-gold:#d58d22;
    --v2-gold-light:#efae3d;

    --v2-blue:#2477c9;
    --v2-green:#0ba36c;

    --v2-font:14px;
}


/* =========================================================
   GLOBAL TYPOGRAPHY
   ========================================================= */

html{
    font-size:14px !important;
}

body{
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size:14px !important;
    line-height:1.55 !important;

    color:var(--v2-text) !important;
}


/* Jangan biarkan text terlalu tipis */
body,
button,
input,
select,
textarea{
    font-weight:400;
}


/* =========================================================
   PAGE TITLE
   ========================================================= */

.page-title h1{
    font-size:24px !important;
    line-height:1.15 !important;
    font-weight:800 !important;
    color:var(--v2-text) !important;
}

.page-title p{
    margin-top:5px !important;

    font-size:11px !important;
    line-height:1.4 !important;

    color:var(--v2-muted) !important;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar{
    width:225px !important;
    min-width:225px !important;
}

.brand strong{
    font-size:15px !important;
    line-height:1.2 !important;
}

.brand small{
    font-size:9px !important;
    line-height:1.35 !important;
}

.nav-section{
    margin-top:19px !important;

    font-size:9px !important;
    font-weight:800 !important;

    letter-spacing:.075em !important;
}

.nav-link{
    min-height:41px !important;

    padding:0 12px !important;

    font-size:11px !important;
    font-weight:600 !important;
}

.nav-link > span{
    font-size:12px !important;
}

.nav-badge{
    font-size:8px !important;
}


/* =========================================================
   TOPBAR
   ========================================================= */

.topbar{
    min-height:74px !important;
    height:74px !important;
}

.top-actions .search{
    width:290px !important;
}

.top-actions .search input{
    height:41px !important;

    font-size:10px !important;
}

.profile-copy b{
    font-size:10px !important;
    font-weight:800 !important;
}

.profile-copy small{
    font-size:8px !important;
}


/* =========================================================
   THEME TOGGLE — CLEANER
   ========================================================= */

.top-theme-toggle{
    width:96px !important;
    min-width:96px !important;
    height:41px !important;

    border-color:var(--v2-border) !important;

    background:#f5f7fa !important;
}

.top-theme-toggle:before{
    top:4px !important;
    left:4px !important;

    width:42px !important;
    height:31px !important;

    background:#ffffff !important;

    border:1px solid #ecd29e !important;
}

html[data-theme="dark"] .top-theme-toggle:before{
    transform:translateX(45px) !important;
}

.top-theme-toggle span{
    font-size:14px !important;
}


/* =========================================================
   PANELS
   ========================================================= */

.panel,
.site-summary,
.bottom-grid .panel{
    border-color:var(--v2-border) !important;

    border-radius:15px !important;

    background:#fff !important;

    box-shadow:
        0 4px 14px rgba(31,55,83,.055) !important;
}

.panel-head{
    min-height:50px !important;

    padding:0 16px !important;
}

.panel-head h3{
    font-size:15px !important;
    font-weight:800 !important;

    color:var(--v2-text) !important;
}

.panel-body{
    padding:16px !important;
}


/* Links pada panel */
.panel a,
.panel-link,
.section-title a{
    font-size:10px !important;
    font-weight:650 !important;

    color:var(--v2-blue) !important;
}


/* =========================================================
   DASHBOARD TOP GRID
   ========================================================= */

.dashboard-main{
    gap:14px !important;
}

.dashboard-main > .panel{
    min-height:300px !important;
}


/* =========================================================
   TABLE / TOP LEADER
   ========================================================= */

.data-table th,
.table-wrap th{
    padding:11px 10px !important;

    font-size:9px !important;
    font-weight:800 !important;

    color:#61778f !important;
}

.data-table td,
.table-wrap td{
    padding:12px 10px !important;

    font-size:10px !important;

    color:#344e69 !important;
}

.person b{
    font-size:11px !important;
    font-weight:800 !important;

    color:#17314e !important;
}

.person small{
    margin-top:3px !important;

    font-size:8px !important;

    color:#71869c !important;
}

.site-pill{
    padding:4px 8px !important;

    font-size:8px !important;
}


/* =========================================================
   PIPELINE
   ========================================================= */

.pipeline{
    gap:15px !important;
}

.pipeline-row b{
    font-size:10px !important;
    font-weight:750 !important;

    color:#18314d !important;
}

.pipeline-row small{
    margin-top:2px !important;

    font-size:8px !important;

    color:#70859c !important;
}

.pipeline-row > strong{
    font-size:10px !important;

    color:#19334f !important;
}

.pipeline-track{
    height:6px !important;

    background:#e9eef4 !important;
}


/* =========================================================
   SITE SUMMARY HEADER
   ========================================================= */

.site-summary{
    padding:17px !important;
}

.site-explorer .section-title h3{
    font-size:16px !important;
    font-weight:800 !important;

    color:#142d49 !important;
}

.site-explorer .section-title p{
    margin-top:5px !important;

    font-size:10px !important;

    color:#687e95 !important;
}

.live-dot{
    font-size:9px !important;
    font-weight:700 !important;
}


/* =========================================================
   IDN / PNG FILTER
   ========================================================= */

.site-region-tabs{
    padding:4px !important;
}

.site-region-tabs button{
    min-width:74px !important;
    height:35px !important;

    font-size:9px !important;
}

.site-region-tabs button span{
    font-size:8px !important;
}

.site-explorer-search{
    width:250px !important;
}

.site-explorer-search input{
    height:38px !important;

    font-size:9px !important;
}


/* =========================================================
   SITE CARDS
   ========================================================= */

.site-explorer-grid{
    gap:10px !important;
}

.site-explorer-card{
    min-height:112px !important;

    padding:13px !important;

    border-color:var(--v2-border) !important;
}

.site-explorer-logo{
    width:36px !important;
    height:36px !important;
}

.site-explorer-name strong{
    font-size:10px !important;
    font-weight:800 !important;

    color:#193450 !important;
}

.site-explorer-name small{
    margin-top:3px !important;

    font-size:8px !important;

    color:#687f98 !important;
}

.site-region-badge{
    height:18px !important;

    padding:0 6px !important;

    font-size:7px !important;
}

.site-explorer-score{
    font-size:18px !important;
    font-weight:850 !important;

    color:#102d49 !important;
}

.site-explorer-progress{
    height:4px !important;

    margin:10px 0 !important;
}

.site-explorer-status{
    font-size:8px !important;
    font-weight:800 !important;
}

.site-explorer-top small{
    font-size:7px !important;
}

.site-explorer-top strong,
.site-explorer-top em,
.site-explorer-top > span{
    font-size:8px !important;
}


/* =========================================================
   BOTTOM DASHBOARD
   ========================================================= */

.bottom-grid{
    gap:12px !important;
}

.activity b,
.agenda b,
.task b,
.insights b{
    font-size:10px !important;
    font-weight:750 !important;

    color:#18314d !important;
}

.activity p,
.activity small,
.agenda small,
.task small,
.insights p{
    font-size:8px !important;
    line-height:1.5 !important;

    color:#6e839a !important;
}


/* =========================================================
   INSIGHT MANAGER
   ========================================================= */

.insights article{
    padding:12px 0 !important;
}

.insights article + article{
    border-top:1px solid #e2e8ef !important;
}

.insights b{
    color:#c77e18 !important;
}

.insights p{
    margin-top:5px !important;

    color:#536b84 !important;
}


/* =========================================================
   FORMS
   ========================================================= */

.form-grid label > span{
    font-size:11px !important;
    font-weight:700 !important;

    color:#455e79 !important;
}

input,
select,
textarea{
    font-size:11px !important;
}

.btn{
    min-height:38px !important;

    padding-left:13px !important;
    padding-right:13px !important;

    font-size:9px !important;
}


/* =========================================================
   RATA-RATA PENILAIAN LEADER
   ========================================================= */

/*
   Class .mp-assessment-panel akan diberikan lewat JS
   ke panel yang judulnya Rata-rata Penilaian Leader.
*/

.mp-assessment-panel{
    position:relative !important;

    overflow:hidden !important;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fbfcfe
        ) !important;
}


/* Header */

.mp-assessment-panel .panel-head{
    background:#fff !important;
}

.mp-assessment-panel .panel-head h3{
    color:#142d49 !important;

    font-size:15px !important;
}


/* body */

.mp-assessment-panel .panel-body{
    position:relative !important;

    min-height:245px !important;

    background:#ffffff !important;
}


/* Semua SVG text harus jelas */

.mp-assessment-panel svg text{
    fill:#263f5b !important;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size:11px !important;

    font-weight:650 !important;

    opacity:1 !important;
}


/* Garis radar */

.mp-assessment-panel svg line{
    stroke:#c9d5e1 !important;

    stroke-width:1 !important;

    opacity:.9 !important;
}


/* polygon background radar */

.mp-assessment-panel svg polygon{
    stroke:#b7c7d7 !important;

    stroke-width:1.2 !important;
}


/* polygon aktual */

.mp-assessment-panel svg polygon[fill]:not([fill="none"]){
    fill:rgba(213,141,34,.22) !important;

    stroke:#d58d22 !important;

    stroke-width:2 !important;
}


/* circles / points */

.mp-assessment-panel svg circle{
    fill:#d58d22 !important;

    stroke:#ffffff !important;

    stroke-width:2 !important;
}


/* center score generic */

.mp-assessment-panel .radar-center,
.mp-assessment-panel .overall-score,
.mp-assessment-panel .score-center{
    color:#142d49 !important;
}


/* Text descendants */

.mp-assessment-panel small{
    color:#697f96 !important;

    font-size:9px !important;
}

.mp-assessment-panel strong{
    color:#152f4b !important;
}


/* jika chart menggunakan canvas */
.mp-assessment-panel canvas{
    filter:none !important;

    opacity:1 !important;
}


/* Hilangkan glow hitam/coklat theme lama */
.mp-assessment-panel *,
.mp-assessment-panel *:before,
.mp-assessment-panel *:after{
    text-shadow:none;
}

.mp-assessment-panel .radar,
.mp-assessment-panel .radar-chart,
.mp-assessment-panel .assessment-radar{
    filter:none !important;

    box-shadow:none !important;

    background:transparent !important;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"] .mp-assessment-panel{
    background:#142438 !important;
}

html[data-theme="dark"] .mp-assessment-panel .panel-head,
html[data-theme="dark"] .mp-assessment-panel .panel-body{
    background:#142438 !important;
}

html[data-theme="dark"] .mp-assessment-panel .panel-head h3,
html[data-theme="dark"] .mp-assessment-panel strong{
    color:#edf4fb !important;
}

html[data-theme="dark"] .mp-assessment-panel svg text{
    fill:#dce7f2 !important;
}

html[data-theme="dark"] .mp-assessment-panel svg line,
html[data-theme="dark"] .mp-assessment-panel svg polygon{
    stroke:#50677f !important;
}

html[data-theme="dark"]
.mp-assessment-panel
svg polygon[fill]:not([fill="none"]){
    fill:rgba(221,158,54,.20) !important;

    stroke:#e0a13b !important;
}

html[data-theme="dark"] .mp-assessment-panel small{
    color:#93a6b9 !important;
}


/* =========================================================
   LIGHT MODE FORCE CONTRAST
   ========================================================= */

html:not([data-theme="dark"]) .panel,
html:not([data-theme="dark"]) .site-summary,
html:not([data-theme="dark"]) .site-explorer-card{
    background:#ffffff !important;
}

html:not([data-theme="dark"]) .panel h3,
html:not([data-theme="dark"]) .panel strong,
html:not([data-theme="dark"]) .site-summary h3{
    color:#142d49 !important;
}


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

@media(max-width:1350px){

    .site-explorer-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr)) !important;
    }

}

@media(max-width:950px){

    .page-title h1{
        font-size:21px !important;
    }

    .nav-link{
        font-size:10px !important;
    }

}


/* =========================================================
   MINIMUM READABLE TYPOGRAPHY
   ========================================================= */

.page-shell .panel,
.page-shell .site-summary{
    --min-readable:8px;
}

.page-shell .panel button,
.page-shell .panel a,
.page-shell .site-summary button,
.page-shell .site-summary a{
    line-height:1.35 !important;
}

.footer{
    font-size:8px !important;
    color:#71869c !important;
}


/* =========================================================
   MANAGEMENT PORTAL
   ASSESSMENT RADAR V3
   ========================================================= */

.assessment-v3{
    position:relative;

    min-height:315px;

    display:flex;
    flex-direction:column;
}

.assessment-v3-meta{
    position:absolute;

    top:0;
    right:0;

    z-index:5;

    display:flex;
    align-items:center;

    gap:7px;

    padding:5px 8px;

    border:1px solid var(--v2-border);
    border-radius:7px;

    background:#f8fafc;
}

.assessment-v3-meta span{
    color:#75899f;

    font-size:8px;
}

.assessment-v3-meta strong{
    color:#c98017;

    font-size:8px;
    font-weight:800;
}


.assessment-v3-chart{
    position:relative;

    flex:1;

    min-height:275px;

    overflow:hidden;
}

.assessment-v3-chart svg{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    overflow:visible;
}


/* Grid */

.assessment-v3-chart .radar-grid{
    fill:none !important;

    stroke:#d8e1ea !important;

    stroke-width:1 !important;
}

.assessment-v3-chart .radar-grid-25{
    opacity:.50;
}

.assessment-v3-chart .radar-grid-50{
    opacity:.65;
}

.assessment-v3-chart .radar-grid-75{
    opacity:.80;
}

.assessment-v3-chart .radar-grid-100{
    opacity:1;
}

.assessment-v3-chart line{
    stroke:#d8e1ea !important;

    stroke-width:1 !important;
}


/* Actual */

.assessment-v3-chart .radar-actual{
    fill:rgba(213,141,34,.22) !important;

    stroke:#d58d22 !important;

    stroke-width:2.4 !important;

    filter:none !important;
}

.assessment-v3-chart .radar-point{
    fill:#d58d22 !important;

    stroke:#ffffff !important;

    stroke-width:2 !important;
}


/* Center */

.assessment-v3-center{
    position:absolute;

    left:50%;
    top:50%;

    z-index:5;

    width:104px;
    height:104px;

    transform:
        translate(-50%,-50%);

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

    border:1px solid #e6c27b;
    border-radius:50%;

    background:
        rgba(255,255,255,.95);

    box-shadow:
        0 5px 18px rgba(50,71,94,.10);

    text-align:center;
}

.assessment-v3-center strong{
    display:block;

    color:#142f4c !important;

    font-size:30px !important;
    line-height:1 !important;

    font-weight:850 !important;
}

.assessment-v3-center span{
    margin-top:7px;

    color:#697f96 !important;

    font-size:9px !important;
}


/* Labels */

.assessment-label{
    position:absolute;

    z-index:6;

    min-width:105px;

    text-align:center;
}

.assessment-label span{
    display:block;

    margin-bottom:3px;

    color:#536a82 !important;

    font-size:9px !important;
    font-weight:650 !important;
}

.assessment-label strong{
    display:block;

    color:#142e49 !important;

    font-size:13px !important;
    font-weight:850 !important;
}


.assessment-label.top{
    left:50%;
    top:2px;

    transform:translateX(-50%);
}

.assessment-label.bottom{
    left:50%;
    bottom:0;

    transform:translateX(-50%);
}

.assessment-label.right-top{
    right:5px;
    top:64px;
}

.assessment-label.right-bottom{
    right:0;
    bottom:58px;
}

.assessment-label.left-top{
    left:4px;
    top:64px;
}

.assessment-label.left-bottom{
    left:0;
    bottom:58px;
}


/* Legend */

.assessment-v3-legend{
    min-height:28px;

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

    gap:18px;

    margin-top:3px;

    border-top:1px solid #edf1f5;
}

.assessment-v3-legend span{
    display:flex;
    align-items:center;

    gap:6px;

    color:#6c8197;

    font-size:8px;
}

.assessment-v3-legend i{
    width:8px;
    height:8px;

    display:block;

    border-radius:50%;
}

.assessment-v3-legend .actual{
    background:#d58d22;
}

.assessment-v3-legend .target{
    border:1px solid #9fb1c3;

    background:#ffffff;
}


/* =========================================================
   RADAR DARK MODE
   ========================================================= */

html[data-theme="dark"] .assessment-v3-meta{
    border-color:#334b64;

    background:#192b40;
}

html[data-theme="dark"] .assessment-v3-chart .radar-grid,
html[data-theme="dark"] .assessment-v3-chart line{
    stroke:#455d74 !important;
}

html[data-theme="dark"] .assessment-v3-chart .radar-actual{
    fill:rgba(221,158,54,.20) !important;

    stroke:#e0a33f !important;
}

html[data-theme="dark"] .assessment-v3-chart .radar-point{
    fill:#e0a33f !important;

    stroke:#142438 !important;
}

html[data-theme="dark"] .assessment-v3-center{
    border-color:#665437;

    background:#17283c;

    box-shadow:
        0 7px 20px rgba(0,0,0,.20);
}

html[data-theme="dark"] .assessment-v3-center strong,
html[data-theme="dark"] .assessment-label strong{
    color:#edf4fb !important;
}

html[data-theme="dark"] .assessment-v3-center span,
html[data-theme="dark"] .assessment-label span{
    color:#9fb1c3 !important;
}

html[data-theme="dark"] .assessment-v3-legend{
    border-color:#293f55;
}


/* =========================================================
   REMOVE LEGACY RADAR COMPLETELY
   ========================================================= */

.radar-placeholder{
    display:none !important;
}


/* =========================================================
   MANAGEMENT PORTAL
   READABILITY V3
   ========================================================= */

/* Sidebar */

.nav-link{
    font-size:12px !important;

    min-height:42px !important;
}

.nav-section{
    font-size:9px !important;
}

.brand strong{
    font-size:15px !important;
}

.brand small{
    font-size:9px !important;
}


/* Dashboard title */

.page-title h1{
    font-size:25px !important;
}

.page-title p{
    font-size:10px !important;
}


/* Panel titles */

.panel-head h3{
    font-size:15px !important;
}

.panel-link{
    font-size:9px !important;
}


/* Tables */

.data-table th,
.table-wrap th{
    font-size:9px !important;
}

.data-table td,
.table-wrap td{
    font-size:10px !important;
}


/* Leader */

.person b{
    font-size:11px !important;
}

.person small{
    font-size:9px !important;
}


/* Pipeline */

.pipeline-row b{
    font-size:11px !important;
}

.pipeline-row small{
    font-size:9px !important;
}

.pipeline-row > strong{
    font-size:10px !important;
}


/* Site explorer */

.site-explorer .section-title h3{
    font-size:16px !important;
}

.site-explorer .section-title p{
    font-size:10px !important;
}

.site-explorer-name strong{
    font-size:11px !important;
}

.site-explorer-name small{
    font-size:8px !important;
}

.site-explorer-score{
    font-size:19px !important;
}

.site-explorer-status{
    font-size:8px !important;
}

.site-explorer-top strong,
.site-explorer-top > span{
    font-size:8px !important;
}


/* Bottom cards */

.bottom-grid .panel-head h3{
    font-size:14px !important;
}

.activity b,
.agenda b,
.task b,
.insights b{
    font-size:10px !important;
}

.activity p,
.activity small,
.agenda small,
.task small,
.insights p{
    font-size:9px !important;
}


/* Footer */

.footer{
    font-size:9px !important;
}


/* Header profile */

.profile-copy b{
    font-size:11px !important;
}

.profile-copy small{
    font-size:8px !important;
}


/* =========================================================
   GOOGLE REGISTER COMPLETE
   STEP 6
   ========================================================= */

.google-register-complete-page{
    min-height:100vh;

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

    padding:35px;

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(45,119,191,.055),
            transparent 30%
        ),
        #f4f7fb;
}


.google-register-complete-card{
    width:min(670px,100%);

    padding:34px;

    border:1px solid #d9e3ed;
    border-radius:18px;

    background:#ffffff;

    box-shadow:
        0 18px 55px rgba(34,60,89,.11);
}


.google-register-account{
    display:flex;
    align-items:center;

    gap:15px;

    padding-bottom:20px;

    border-bottom:1px solid #e1e8ef;
}


.google-register-photo{
    width:60px;
    height:60px;

    flex:0 0 60px;

    border-radius:50%;

    object-fit:cover;
}


.google-register-photo.fallback{
    display:flex;
    align-items:center;
    justify-content:center;

    background:#fff4df;

    color:#c58119;

    font-size:21px;
    font-weight:800;
}


.google-register-account span{
    display:block;

    margin-bottom:4px;

    color:#148d66;

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

    letter-spacing:.11em;
}


.google-register-account h1{
    margin:0;

    color:#142d49 !important;

    font-size:22px;
    font-weight:800;
}


.google-register-account p{
    margin:4px 0 0;

    color:#677d94;

    font-size:10px;
}


.google-register-heading{
    margin:22px 0 20px;
}


.google-register-heading > span{
    color:#cd861b;

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

    letter-spacing:.11em;
}


.google-register-heading h2{
    margin:6px 0;

    color:#142d49 !important;

    font-size:22px;
}


.google-register-heading p{
    margin:0;

    max-width:520px;

    color:#6a8097;

    font-size:10px;

    line-height:1.6;
}


.google-register-form{
    gap:16px !important;
}


.google-register-form label > span{
    display:block;

    margin-bottom:7px;

    color:#49627d !important;

    font-size:10px !important;
    font-weight:700;
}


.google-register-form input,
.google-register-form select{
    height:44px !important;

    border:1px solid #cad6e2 !important;
    border-radius:10px !important;

    background:#ffffff !important;

    color:#223c58 !important;

    font-size:10px !important;
}


.google-register-form input:focus,
.google-register-form select:focus{
    border-color:#d39532 !important;

    box-shadow:
        0 0 0 3px rgba(211,149,50,.08) !important;
}


.google-register-note{
    display:flex;

    gap:10px;

    padding:12px;

    border:1px solid #d8e5df;
    border-radius:10px;

    background:#f4fbf8;
}


.google-register-note > span{
    width:27px;
    height:27px;

    flex:0 0 27px;

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

    border-radius:8px;

    background:#e4f5ee;

    color:#158b65;

    font-size:11px;
    font-weight:800;
}


.google-register-note strong{
    display:block;

    color:#254b3e;

    font-size:9px;
}


.google-register-note p{
    margin:3px 0 0;

    color:#668078;

    font-size:8px;

    line-height:1.5;
}


.google-register-back{
    display:block;

    margin-top:16px;

    color:#657b92;

    text-align:center;

    font-size:9px;
}


/* Dark */

html[data-theme="dark"]
.google-register-complete-page{
    background:#0e1927;
}


html[data-theme="dark"]
.google-register-complete-card{
    border-color:#2d445c;

    background:#142438;
}


html[data-theme="dark"]
.google-register-account{
    border-color:#2c4258;
}


html[data-theme="dark"]
.google-register-account h1,
html[data-theme="dark"]
.google-register-heading h2{
    color:#eef5fb !important;
}


html[data-theme="dark"]
.google-register-account p,
html[data-theme="dark"]
.google-register-heading p{
    color:#95a7ba;
}


html[data-theme="dark"]
.google-register-form label > span{
    color:#b6c5d4 !important;
}


html[data-theme="dark"]
.google-register-form input,
html[data-theme="dark"]
.google-register-form select{
    border-color:#354d66 !important;

    background:#102034 !important;

    color:#e7eef6 !important;
}


html[data-theme="dark"]
.google-register-note{
    border-color:#315347;

    background:#173128;
}


html[data-theme="dark"]
.google-register-note strong{
    color:#b9e0d1;
}


html[data-theme="dark"]
.google-register-note p{
    color:#8eb4a5;
}


@media(max-width:620px){

    .google-register-complete-page{
        padding:18px;
    }

    .google-register-complete-card{
        padding:25px 20px;
    }

    .google-register-account{
        align-items:flex-start;
    }

}


/* =========================================================
   GOOGLE AUTH STEP 7
   PENDING APPROVAL
   ========================================================= */

.google-pending-body{
    margin:0;

    min-height:100vh;

    background:#f4f7fb !important;
}


.google-pending-page{
    min-height:100vh;

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

    padding:35px;
}


.google-pending-card-v2{
    width:min(620px,100%);

    padding:32px;

    border:1px solid #d9e3ed;
    border-radius:20px;

    background:#ffffff;

    box-shadow:
        0 20px 60px rgba(31,56,84,.11);
}


.google-pending-brand{
    display:flex;
    align-items:center;

    gap:11px;

    padding-bottom:20px;

    border-bottom:1px solid #e3e9ef;
}


.google-pending-brand-mark{
    width:42px;
    height:42px;

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

    border-radius:11px;

    background:
        linear-gradient(
            145deg,
            #173653,
            #102945
        );

    color:#e5a43b;

    font-size:17px;
}


.google-pending-brand strong{
    display:block;

    color:#17314d;

    font-size:12px;
    font-weight:800;
}


.google-pending-brand small{
    display:block;

    margin-top:2px;

    color:#74889e;

    font-size:8px;
}


.google-pending-status{
    padding:30px 0 24px;

    text-align:center;
}


.google-pending-status-icon{
    width:65px;
    height:65px;

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

    margin:0 auto 15px;

    border:1px solid #b8e1d0;
    border-radius:18px;

    background:#ecf8f3;

    color:#14976b;

    font-size:25px;
    font-weight:800;
}


.google-pending-kicker{
    color:#c98118;

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

    letter-spacing:.12em;
}


.google-pending-status h1{
    margin:8px 0;

    color:#142d49 !important;

    font-size:25px;
    font-weight:800;
}


.google-pending-status p{
    max-width:440px;

    margin:0 auto;

    color:#657b92;

    font-size:10px;
    line-height:1.65;
}


/* Progress */

.google-pending-progress{
    display:grid;

    grid-template-columns:
        1fr
        40px
        1fr
        40px
        1fr;

    align-items:center;

    margin:0 0 24px;

    padding:14px;

    border:1px solid #e0e7ee;
    border-radius:12px;

    background:#f9fbfc;
}


.google-pending-progress > div{
    display:flex;
    align-items:center;

    gap:8px;

    min-width:0;
}


.google-pending-progress > div > span{
    width:29px;
    height:29px;

    flex:0 0 29px;

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

    border:1px solid #d4dee8;
    border-radius:8px;

    background:#ffffff;

    color:#8295a9;

    font-size:8px;
    font-weight:800;
}


.google-pending-progress > div.done > span{
    border-color:#b8dfcf;

    background:#eaf7f2;

    color:#158e68;
}


.google-pending-progress > div.current > span{
    border-color:#e9c783;

    background:#fff6e6;

    color:#c88118;
}


.google-pending-progress strong{
    display:block;

    color:#344e69;

    font-size:8px;
}


.google-pending-progress small{
    display:block;

    margin-top:1px;

    color:#8295a9;

    font-size:7px;
}


.google-pending-progress i{
    height:1px;

    display:block;

    background:#dce4ec;
}


/* Account */

.google-pending-account{
    padding:16px;

    border:1px solid #dde6ee;
    border-radius:13px;

    background:#ffffff;
}


.google-pending-account-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:15px;

    margin-bottom:14px;
}


.google-pending-account-head small{
    color:#7c90a5;

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

    letter-spacing:.08em;
}


.google-pending-account-head h2{
    margin:3px 0 0;

    color:#17314d !important;

    font-size:17px;
}


.google-pending-badge{
    padding:5px 8px;

    border:1px solid #edcd94;
    border-radius:999px;

    background:#fff8eb;

    color:#c9821a;

    font-size:7px;
    font-weight:800;
}


.google-pending-data{
    display:grid;

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

    gap:8px;
}


.google-pending-data > div{
    padding:10px;

    border:1px solid #e3e9ef;
    border-radius:9px;

    background:#f9fbfc;
}


.google-pending-data small{
    display:block;

    color:#7a8fa4;

    font-size:7px;
}


.google-pending-data strong{
    display:block;

    margin-top:3px;

    overflow:hidden;

    color:#314b66;

    font-size:9px;

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


/* Notice */

.google-pending-notice{
    display:flex;

    gap:10px;

    margin-top:14px;

    padding:12px;

    border:1px solid #cfdfea;
    border-radius:10px;

    background:#f3f8fc;
}


.google-pending-notice > span{
    color:#3778ad;

    font-size:16px;
}


.google-pending-notice strong{
    color:#31526e;

    font-size:9px;
}


.google-pending-notice p{
    margin:3px 0 0;

    color:#6e8499;

    font-size:8px;
    line-height:1.5;
}


.google-pending-actions{
    margin-top:18px;
}


/* Dark */

html[data-theme="dark"]
.google-pending-body{
    background:#0e1927 !important;
}


html[data-theme="dark"]
.google-pending-card-v2{
    border-color:#2c435b;

    background:#142438;
}


html[data-theme="dark"]
.google-pending-brand{
    border-color:#2e445a;
}


html[data-theme="dark"]
.google-pending-brand strong,
html[data-theme="dark"]
.google-pending-status h1,
html[data-theme="dark"]
.google-pending-account-head h2{
    color:#eef5fb !important;
}


html[data-theme="dark"]
.google-pending-brand small,
html[data-theme="dark"]
.google-pending-status p{
    color:#95a8bb;
}


html[data-theme="dark"]
.google-pending-progress,
html[data-theme="dark"]
.google-pending-data > div{
    border-color:#30475f;

    background:#172a3f;
}


html[data-theme="dark"]
.google-pending-account{
    border-color:#30475f;

    background:#142438;
}


html[data-theme="dark"]
.google-pending-progress strong,
html[data-theme="dark"]
.google-pending-data strong{
    color:#c5d2df;
}


html[data-theme="dark"]
.google-pending-notice{
    border-color:#31526c;

    background:#172c40;
}


@media(max-width:620px){

    .google-pending-page{
        padding:18px;
    }

    .google-pending-card-v2{
        padding:24px 19px;
    }

    .google-pending-progress{
        grid-template-columns:1fr;
        gap:8px;
    }

    .google-pending-progress i{
        display:none;
    }

    .google-pending-data{
        grid-template-columns:1fr;
    }

}


/* =========================================================
   REGISTER CORPORATE POLISH V3
   ========================================================= */

.register-corporate-v2 .corporate-register-card{
    width:min(720px,100%) !important;
    padding:38px 36px 30px !important;
    border-radius:20px !important;
}

.register-corporate-v2 .corporate-register-kicker{
    display:block;
    margin-bottom:8px !important;
    font-size:9px !important;
    font-weight:800 !important;
    letter-spacing:.12em !important;
}

.register-corporate-v2 .corporate-register-card h2{
    margin:0 0 7px !important;
    font-size:26px !important;
    line-height:1.2 !important;
}

.register-corporate-v2 .corporate-register-subtitle{
    margin:0 0 22px !important;
    font-size:10px !important;
    line-height:1.55 !important;
}


/* =========================================================
   GOOGLE AREA
   ========================================================= */

.register-corporate-v2 .google-login-wrap{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
}

.register-corporate-v2 .google-official-wrap{
    width:100% !important;
    display:block !important;
}

.register-corporate-v2 .google-button-container{
    width:100% !important;
    display:flex !important;
    justify-content:flex-start !important;
}

.register-corporate-v2 .g_id_signin{
    width:100% !important;
    max-width:none !important;
}

.register-corporate-v2 .auth-divider{
    margin:20px 0 18px !important;
    color:#7c8fa3 !important;
    font-size:9px !important;
}

.register-corporate-v2 .auth-divider:before,
.register-corporate-v2 .auth-divider:after{
    background:#dce5ee !important;
}


/* =========================================================
   FORM
   ========================================================= */

.register-corporate-v2 .corporate-register-form{
    display:flex !important;
    flex-direction:column !important;
    gap:18px !important;
}

.register-corporate-v2 .register-two{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:14px !important;
}

.register-corporate-v2 .corporate-register-form label{
    display:block !important;
    margin:0 !important;
}

.register-corporate-v2 .corporate-register-form label > span{
    display:block !important;
    margin-bottom:7px !important;
    color:#566d85 !important;
    font-size:10px !important;
    font-weight:700 !important;
}

.register-corporate-v2 .corporate-register-form input,
.register-corporate-v2 .corporate-register-form select{
    width:100% !important;
    height:46px !important;
    padding:0 13px !important;
    border:1px solid #ccd8e4 !important;
    border-radius:10px !important;
    background:#ffffff !important;
    color:#253e59 !important;
    font-size:10px !important;
    box-shadow:none !important;
}

.register-corporate-v2 .corporate-register-form input:focus,
.register-corporate-v2 .corporate-register-form select:focus{
    border-color:#d1922f !important;
    box-shadow:
        0 0 0 3px rgba(209,146,47,.08) !important;
    outline:none !important;
}

.register-corporate-v2 .corporate-register-form input::placeholder{
    color:#9baabc !important;
}


/* password wrapper */
.register-corporate-v2 .corporate-input-wrap{
    position:relative !important;
}

.register-corporate-v2 .corporate-input-wrap input{
    padding-right:42px !important;
}

.register-corporate-v2 .password-toggle{
    right:8px !important;
    width:30px !important;
    height:30px !important;
    color:#7c90a5 !important;
}


/* =========================================================
   SUBMIT
   ========================================================= */

.register-corporate-v2 .corporate-login-submit{
    margin-top:2px !important;
    height:48px !important;
    border-radius:10px !important;
    font-size:10px !important;
    font-weight:800 !important;
    letter-spacing:.01em !important;
    box-shadow:
        0 8px 18px rgba(204,136,30,.16) !important;
}


/* =========================================================
   LOGIN LINK
   ========================================================= */

.register-corporate-v2 .corporate-register-login{
    margin-top:2px !important;
    padding-top:4px !important;
    color:#7d90a4 !important;
    font-size:9px !important;
}

.register-corporate-v2 .corporate-register-login a{
    color:#c9841d !important;
    font-weight:800 !important;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"]
.register-corporate-v2
.corporate-register-form label > span{
    color:#b7c5d4 !important;
}

html[data-theme="dark"]
.register-corporate-v2
.corporate-register-form input,
html[data-theme="dark"]
.register-corporate-v2
.corporate-register-form select{
    border-color:#354d66 !important;
    background:#102034 !important;
    color:#e8eef5 !important;
}

html[data-theme="dark"]
.register-corporate-v2
.auth-divider{
    color:#8ca0b5 !important;
}

html[data-theme="dark"]
.register-corporate-v2
.auth-divider:before,
html[data-theme="dark"]
.register-corporate-v2
.auth-divider:after{
    background:#2d4359 !important;
}


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

@media(max-width:700px){

    .register-corporate-v2 .corporate-register-card{
        padding:28px 22px 24px !important;
    }

    .register-corporate-v2 .register-two{
        grid-template-columns:1fr !important;
        gap:16px !important;
    }

}

/* =========================================================
   MANAGEMENT PORTAL
   REGISTER MOCKUP FINAL V4
   ========================================================= */

.register-corporate-v2{
    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(48,103,157,.055),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(48,103,157,.035),
            transparent 30%
        ),
        #f4f7fb !important;
}


/* =========================================================
   RIGHT REGISTER PANEL
   ========================================================= */

.register-corporate-v2 .corporate-register-panel{
    min-height:100vh !important;

    padding:46px 40px !important;

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

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(219,229,239,.55),
            transparent 32%
        ),
        #f5f8fc !important;
}


/* =========================================================
   MAIN CARD
   ========================================================= */

.register-corporate-v2 .corporate-register-card{
    width:min(780px,100%) !important;

    margin:0 auto !important;

    padding:42px 46px 34px !important;

    border:1px solid #d8e2ec !important;
    border-radius:22px !important;

    background:#ffffff !important;

    box-shadow:
        0 22px 65px rgba(35,61,89,.12) !important;
}


/* =========================================================
   REGISTER HEADER
   ========================================================= */

.register-corporate-v2 .corporate-register-kicker{
    display:block !important;

    margin:0 0 10px !important;

    color:#d28b20 !important;

    text-align:center !important;

    font-size:10px !important;
    font-weight:850 !important;

    letter-spacing:.11em !important;
}


.register-corporate-v2 .corporate-register-card > h2{
    margin:0 !important;

    color:#142d49 !important;

    text-align:center !important;

    font-size:30px !important;
    line-height:1.2 !important;

    font-weight:850 !important;

    letter-spacing:-.025em !important;
}


.register-corporate-v2 .corporate-register-subtitle{
    max-width:520px !important;

    margin:10px auto 26px !important;

    color:#687e95 !important;

    text-align:center !important;

    font-size:11px !important;
    line-height:1.55 !important;
}


/* =========================================================
   GOOGLE REGISTER AREA
   ========================================================= */

.register-corporate-v2 .google-login-wrap{
    width:100% !important;

    margin:0 auto !important;
    padding:0 !important;

    display:flex !important;
    justify-content:center !important;
}


.register-corporate-v2 .google-official-wrap{
    width:100% !important;

    display:flex !important;
    justify-content:center !important;
}


.register-corporate-v2 .google-button-container{
    width:100% !important;

    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
}


/*
 Google merender iframe sendiri.
 Wrapper ini membuat posisinya benar-benar center.
*/

.register-corporate-v2 .g_id_signin{
    width:100% !important;

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

    text-align:center !important;
}


.register-corporate-v2 .g_id_signin > div{
    margin-left:auto !important;
    margin-right:auto !important;
}


.register-corporate-v2 .google-button-container iframe{
    display:block !important;

    margin-left:auto !important;
    margin-right:auto !important;
}


/* Area visual Google seperti mockup */

.register-corporate-v2 .google-button-container{
    max-width:610px !important;

    min-height:58px !important;

    margin:0 auto !important;
    padding:7px 8px !important;

    border:1px solid #e1e7ed !important;
    border-radius:13px !important;

    background:#ffffff !important;

    box-shadow:
        0 5px 18px rgba(35,56,79,.07) !important;
}


/* =========================================================
   DIVIDER
   ========================================================= */

.register-corporate-v2 .auth-divider{
    width:100% !important;

    margin:24px 0 25px !important;

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

    gap:14px !important;

    color:#74889e !important;

    text-align:center !important;

    font-size:10px !important;
}


.register-corporate-v2 .auth-divider:before,
.register-corporate-v2 .auth-divider:after{
    content:"" !important;

    flex:1 !important;

    height:1px !important;

    background:#d8e2eb !important;
}


/* =========================================================
   FORM LAYOUT
   ========================================================= */

.register-corporate-v2 .corporate-register-form{
    width:100% !important;

    display:flex !important;
    flex-direction:column !important;

    gap:19px !important;
}


.register-corporate-v2 .register-two{
    width:100% !important;

    display:grid !important;

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

    gap:18px !important;
}


.register-corporate-v2 .corporate-register-form label{
    width:100% !important;

    display:block !important;

    margin:0 !important;
}


.register-corporate-v2
.corporate-register-form
label > span{
    display:block !important;

    margin:0 0 8px !important;

    color:#425b75 !important;

    font-size:11px !important;
    font-weight:750 !important;
}


/* =========================================================
   INPUTS
   ========================================================= */

.register-corporate-v2
.corporate-register-form input,

.register-corporate-v2
.corporate-register-form select{
    width:100% !important;

    height:50px !important;

    padding:0 15px !important;

    border:1px solid #cbd7e3 !important;
    border-radius:11px !important;

    background:#ffffff !important;

    color:#203b58 !important;

    font-size:11px !important;

    outline:none !important;

    box-shadow:none !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease !important;
}


.register-corporate-v2
.corporate-register-form input::placeholder{
    color:#94a5b8 !important;
}


.register-corporate-v2
.corporate-register-form input:focus,

.register-corporate-v2
.corporate-register-form select:focus{
    border-color:#d39331 !important;

    background:#ffffff !important;

    box-shadow:
        0 0 0 3px rgba(211,147,49,.09) !important;
}


/* =========================================================
   PASSWORD
   ========================================================= */

.register-corporate-v2 .corporate-input-wrap{
    position:relative !important;

    width:100% !important;
}


.register-corporate-v2
.corporate-input-wrap input{
    padding-right:48px !important;
}


.register-corporate-v2 .password-toggle{
    position:absolute !important;

    right:10px !important;
    top:50% !important;

    width:32px !important;
    height:32px !important;

    transform:translateY(-50%) !important;

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

    border:0 !important;

    background:transparent !important;

    color:#71869c !important;

    cursor:pointer !important;
}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.register-corporate-v2
.corporate-login-submit{
    width:100% !important;

    height:52px !important;

    margin:2px 0 0 !important;

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

    border:1px solid #d28b21 !important;
    border-radius:11px !important;

    background:
        linear-gradient(
            90deg,
            #d88916 0%,
            #e9a52f 52%,
            #e19a26 100%
        ) !important;

    color:#ffffff !important;

    font-size:11px !important;
    font-weight:850 !important;

    letter-spacing:.01em !important;

    box-shadow:
        0 8px 20px rgba(203,132,24,.18) !important;

    cursor:pointer !important;
}


.register-corporate-v2
.corporate-login-submit:hover{
    transform:translateY(-1px) !important;

    box-shadow:
        0 10px 24px rgba(203,132,24,.23) !important;
}


/* =========================================================
   LOGIN LINK
   ========================================================= */

.register-corporate-v2
.corporate-register-login{
    margin:2px 0 0 !important;
    padding-top:5px !important;

    color:#71869c !important;

    text-align:center !important;

    font-size:10px !important;
}


.register-corporate-v2
.corporate-register-login a{
    color:#c77e17 !important;

    font-weight:850 !important;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"]
.register-corporate-v2
.corporate-register-card{
    border-color:#2c435b !important;

    background:#142438 !important;
}


html[data-theme="dark"]
.register-corporate-v2
.corporate-register-card > h2{
    color:#eef5fb !important;
}


html[data-theme="dark"]
.register-corporate-v2
.corporate-register-subtitle{
    color:#96a9bc !important;
}


html[data-theme="dark"]
.register-corporate-v2
.google-button-container{
    border-color:#334a62 !important;

    background:#172a3e !important;
}


html[data-theme="dark"]
.register-corporate-v2
.auth-divider{
    color:#94a7ba !important;
}


html[data-theme="dark"]
.register-corporate-v2
.auth-divider:before,

html[data-theme="dark"]
.register-corporate-v2
.auth-divider:after{
    background:#30465d !important;
}


html[data-theme="dark"]
.register-corporate-v2
.corporate-register-form
label > span{
    color:#b7c6d5 !important;
}


html[data-theme="dark"]
.register-corporate-v2
.corporate-register-form input,

html[data-theme="dark"]
.register-corporate-v2
.corporate-register-form select{
    border-color:#354d66 !important;

    background:#102034 !important;

    color:#e7eef6 !important;
}


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

@media(max-width:760px){

    .register-corporate-v2
    .corporate-register-panel{
        padding:22px !important;
    }

    .register-corporate-v2
    .corporate-register-card{
        padding:30px 22px 26px !important;
    }

    .register-corporate-v2
    .register-two{
        grid-template-columns:1fr !important;

        gap:18px !important;
    }

    .register-corporate-v2
    .corporate-register-card > h2{
        font-size:25px !important;
    }

}