@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=TASA+Explorer:wght@400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    --bg-15: rgba(15, 15, 15, 1);
    --bg-20: rgba(20, 20, 20, 1);
    --bg-27: rgba(27, 27, 27, 1);
    --bg-35: rgba(35, 35, 35, 1);
    --bg-38: rgba(38, 38, 38, 1);
    --bg-45: rgba(45, 45, 45, 1);
    --bg-50: rgba(50, 50, 50, 1);
    --bg-55: rgba(55, 55, 55, 1);
    --bg-60: rgba(60, 60, 60, 1);
    --bg-70: rgba(70, 70, 70, 1);

    --color-baground-white: rgba(255, 255, 255, 0.2);
    --color-baground-green: rgba(16, 185, 129, .1);
    --color-baground-yellow: rgba(185, 160, 16, 0.1);
    --color-baground-red: rgba(244, 63, 94, 0.1);

    --bg-popup: rgba(20, 20, 20, 1);
    --border-popup: 1px solid var(--bg-35);

    --white: rgb(245, 245, 245);

    --gray: rgb(163, 163, 163);
    --gray-primary: rgb(115, 115, 115);
    --gray-secondary: rgb(201, 201, 201);

    --green: rgb(52, 211, 153);
    --green-secondary: rgb(47, 180, 131);
    --green-primary: rgb(31, 230, 157);
    --green-border: rgba(16, 185, 129, 0.2);
    
    --red: rgb(250, 93, 117);
    --red-secondary: rgb(216, 78, 98);
    --red-primary: rgb(247, 66, 93);
    --red-border: rgba(244, 63, 94, 0.2);
    
    --yellow: rgb(211, 161, 52);
    --yellow-secondary: rgb(179, 136, 44);
    --yellow-primary: rgb(248, 181, 36);
    --yellow-border: rgba(185, 140, 16, 0.2);
    
    --wg-300: 300;
    --wg-400: 400;
    --wg-500: 500;
    --wg-600: 600;
    --wg-700: 700;
    --wg-800: 800;

    --sz-10: 10px;
    --sz-12: 12px;
    --sz-14: 14px;
    --sz-16: 16px;
    --sz-18: 18px;
    --sz-20: 20px;
    --sz-22: 22px;
    --sz-24: 24px;
    --sz-26: 26px;
    --sz-28: 28px;
    --sz-30: 30px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    
    color: var(--white);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body {
    font-family: "Inter", sans-serif;
    background: var(--bg-15);
    min-height: 100vh;
}

button {
    outline: none;
}

body.popup-open {
    overflow: hidden;
}

h2 {
    font-size: var(--sz-20);
    font-weight: var(--wg-600);
}

h3 {
    font-size: var(--sz-20);
    font-weight: var(--wg-700);
}

a {
    text-decoration: none;
}

.hidden { display: none; }

/* Color Hlper */
.green {
    color: var(--green);
}

.red {
    color: var(--red);
}

.gray {
    color: var(--gray);
}

.gray-secondary {
    color: var(--gray-secondary);
}

.white {
    color: var(--white);
}

/* Btn Global */
.btn {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    overflow: hidden;

    font-size: var(--sz-12);
    font-family: inherit;
    font-weight: var(--wg-700);
}

.btn:active {
    transform: scale(0.95);
}

.btn.loading {
    pointer-events: none;
    opacity: 0.8;
}

.btn-default {
    color: var(--white);
    background: var(--bg-27);
    border: 1px solid var(--bg-38);
}

.btn-default:hover {
    background: var(--bg-35);
    border-color: var(--bg-55);
}

.btn-green {
    color: var(--bg-27);
    background: var(--green-secondary);
    border: 1px solid var(--green);
}

.btn-green:hover {
    background: var(--green);
    border-color: var(--green-primary);
}

.btn-red {
    color: var(--bg-27);
    background: var(--red-secondary);
    border: 1px solid var(--red);
}

.btn-red:hover {
    background: var(--red);
    border-color: var(--red-primary);
}

.btn-close {
    padding: 6px;
}

/* Loading Style Btn */
.btn-text {
    display: inline-block;
    color: var(--bg-38);
    transition: opacity 0.3s ease-in-out;
}

.btn.loading .btn-text {
    opacity: 0;
}

.btn-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border: 2px solid var(--bg-38);
    border-top-color: transparent;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

.btn.loading .btn-loader {
    opacity: 1;
    animation: spin 0.6s linear infinite;
}

@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Button Radio */
.btn-radio-wrapper {
    padding: 2px;
    border-radius: 12px;
    border: 1px solid var(--bg-38);
    cursor: pointer;
}

.btn-radio {
    background: var(--bg-20);
    color: var(--gray);
    border: none;
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-radio:hover {
    background: var(--bg-27);
    color: var(--white);
}

.btn-radio.active {
    background: var(--color-baground-green);
    color: var(--green);
}

/* Input Clik Number None */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* -------------------------- */
/* ========= Navbar ========= */
/* -------------------------- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 60px;
    background: var(--bg-20);
    border-bottom: 1px solid var(--bg-38);
    z-index: 1000;
    width: 100%;
}

.box-menu-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.box-menu-in {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 38px;
    transition: all 0.2s;
    cursor: pointer;
}

.box-logo {
    display: flex;
    gap: 10px;
}

.box-menu-in.active,
.box-menu-in:hover {
    background: var(--color-baground-white);
}

.box-menu-in.active span,
.box-menu-in:hover span {
    color: var(--white);
}

.box-menu-in.active svg,
.box-menu-in:hover svg {
    fill: var(--white);
}

.box-menu-in svg {
    fill: var(--gray);
}

.box-menu-in span {
    font-size: var(--sz-14);
    font-weight: var(--wg-400);
    color: var(--gray);
}

.title-navbar  {
    font-family: "TASA Explorer", sans-serif;
    font-size: var(--sz-20);
    font-weight: var(--wg-700);
}

.subtitle-navbar {
    font-size: var(--sz-12);
    color: var(--gray);
    /* font-style: italic; */
    display: block;
    margin-top: 7px;
    text-align: center;
}

.icon-title-navbar {
    height: 25px;
    width: 25px;
}

.icon-account {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    border: 1px solid var(--bg-70);
    cursor: pointer;
}

/* ------ Animasi In Style ------ */
.fade-up {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ------------------------------------- */
/* ========= Jurnaling Secsion ========= */
/* ------------------------------------- */

.jurnaling {
    position: relative;
    margin: 90px 40px 40px;
}

/* ------ Stats Jurnal ------ */
.title-jurnaling {
    font-size: var(--sz-30);
    font-weight: var(--wg-500);
    margin-bottom: 5px;
}

.subtitle-jurnaling {
    font-size: var(--sz-14);
    font-weight: var(--wg-400);
    color: var(--gray);
    margin-bottom: 25px;
}

.wrapper-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    width: 100%;
    margin-bottom: 25px;
}

.box-stats {
    padding: 20px;
    border-radius: 15px;
    width: 100%;
    border: 1px solid var(--bg-38);
}

.box-stats-normal {
    background: var(--bg-20);
}

.box-stats-green {
    background: linear-gradient(135deg, rgba(20, 20, 20, 1) 0%, rgba(16, 185, 129, 0.05) 100%);
}

.box-stats-red {
    background: linear-gradient(135deg, rgba(20, 20, 20, 1) 0%, rgba(244, 63, 94, 0.05) 100%);
}

.bx-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title-front {
    font-size: var(--sz-12);
    color: var(--gray);
    font-weight: var(--wg-500);
}

.icon-front-box {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7px;
    border-radius: 10px;
    border: 1px solid rgba(64, 64, 64, .2);
}

.icon-front-box-normal {
    background: var(--bg-38);
}

.icon-front-box-green {
    background: rgba(16, 185, 129, .05);
}

.icon-front-box-red {
    background: rgba(244, 63, 94, .05);
}

.icon-green {
    fill: var(--green);
}

.icon-red {
    fill: var(--red);
}

.mid-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 130px;
}

.bx-content {
    left: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mg {
    position: relative;
    padding: 0 45px 0 10px;
}

.mg::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 1px;
    background: rgba(116, 116, 116, 0.2);
    border-radius: 2px;
}

.title-mid-content {
    font-size: var(--sz-12);
    color: var(--gray-primary);
    font-weight: var(--wg-400);
}

.pairs-mid-content {
    font-size: var(--sz-22);
    font-weight: var(--wg-500);
}

.value-mid-content {
    font-size: var(--sz-12);
    color: var(--gray);
    font-weight: var(--wg-400);
}

.text-mid-content {
    font-size: var(--sz-24);
    font-weight: var(--wg-600);
}

.box-in-mid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.pairs-mid-content {
    font-size: var(--sz-24);
    font-weight: var(--wg-600);
}

.date-mid-content {
    font-size: var(--sz-18);
    font-weight: var(--wg-500); 
    color: var(--gray);
}

.subtitle-front {
    font-size: var(--sz-14);
    color: var(--white);
    font-weight: var(--wg-400);
    margin-bottom: 10px;
}

.ps {
    display: flex;
    gap: 6px;
}

.footer-font {
    font-size: var(--sz-12);
    color: var(--gray-primary);
    font-weight: var(--wg-400);
}

.sub-profite {
    color: var(--green);
}

.sub-lose {
    color: var(--red);
}

/* ------ Container Tabel ------ */
.subcontainer-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 15px;
}

.box-edit {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-jurnal {
    padding: 6px 25px;
}

.icn-tl {
    fill: var(--color-text, rgb(163, 163, 163));
    transition: fill 0.2s ease-in-out, transform 0.15s ease-in-out;
}

.btn:hover .icn-tl {
    fill: var(--white);
}

#btnEdit.active svg {
    fill: var(--green); 
}

.tabel-trade tbody tr.editable:hover {
    background-color: var(--color-baground-green);
}

/* Tabel */
.tabel-box {
    background: var(--bg-20);
    border: 1px solid var(--bg-38);
    padding: 20px;
    border-radius: 15px;
}

.tabel-trade {
    width: 100%;
    border: none;
    border-collapse: collapse;
    table-layout: fixed;
}

.no-tabel,
.causes-tabel,
.files-tabel,
.class-tabel,
.rr-tabel {
    width: 60px;
}

.result-tabel,
.pos-tabel {
    width: 75px;
}

th, td {
    font-family: inherit;
    text-align: center;
    border: none;
}

/* Deposit Withdraw */
.deposit {
    background: linear-gradient(135deg, rgba(2, 255, 200, 0.1) 0%, rgba(0, 85, 55, 0.1) 100%) !important;
}

.withdraw {
    background: linear-gradient(135deg, rgba(255, 2, 2, 0.1) 0%, rgba(85, 0, 0, 0.1) 100%) !important;
}

.tabel-trade thead tr th {
    font-size: var(--sz-12);
    text-transform: uppercase;
    color: var(--gray);
    font-weight: var(--wg-600);
    padding: 16px 0;
}

.tabel-trade tbody tr td {
    padding: 16px 0;
}

.tabel-trade thead tr {
    border-bottom: 1px solid var(--bg-27);
    cursor: pointer;
}

.tabel-trade thead .sweep:hover {
    color: var(--white);
}

.tabel-trade tbody tr {
    border-bottom: 1px solid var(--bg-27);
}

th.sortable {
    cursor: pointer;
    position: relative;
}

.tabel-trade tbody tr:nth-child(odd) {
    background-color: rgba(25, 25, 25, 0.5);
}

.tabel-trade tbody tr:nth-child(even) {
    background-color: rgba(25, 25, 25, 1);
}

.row-title {
    display: flex;
    justify-content: center;
    align-self: center;
    gap: 3px;
    width: 100%;
    vertical-align: middle;
}

/* No, Date */
.no,
.date {
    font-size: var(--sz-12);
    font-weight: var(--wg-400);
    color: var(--gray);
}

/* Pairs */
.pairs {
    font-size: var(--sz-12);
    font-weight: var(--wg-400);
    color: var(--white);
}

/* Method */
.method {
    font-size: var(--sz-12);
    font-weight: var(--wg-400);
    color: var(--white);
}

/* Confluance */
.confluance {
    font-size: var(--sz-12);
    font-weight: var(--wg-400);
    color: var(--green);
    border: 1px solid var(--green-border);
    background: var(--color-baground-green);
    border-radius: 8px;
    padding: 2px 0;
}

/* RR */
.rr-win {
    font-size: var(--sz-12);
    font-weight: var(--wg-400);
    color: var(--green);
}

.rr-lose {
    font-size: var(--sz-12);
    font-weight: var(--wg-400);
    color: var(--red);
}

.rr-null {
    font-size: var(--sz-12);
    font-weight: var(--wg-400);
    color: var(--gray);
}

/* Behavior */
.behavior {
    font-size: var(--sz-12);
    font-weight: var(--wg-400);
    color: var(--white);
}

/* Casuses & */
.box-causes {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    width: fit-content;
    border-radius: 6px;
    cursor: pointer;
    margin: 0 auto;
    transition: all 0.1s;
}

.box-causes:hover,
.box-causes:hover .icon-causes {
    background-color: var(--bg-38);
    fill: var(--white);
}

.icon-causes {
    fill: var(--gray-primary);
}

/* Psychology */
.confident {
    font-size: var(--sz-12);
    font-weight: var(--wg-400);
    color: var(--green);
    border: 1px solid var(--green-border);
    background: var(--color-baground-green);
    border-radius: 8px;
    padding: 2px 0;
}

.doubtful {
    font-size: var(--sz-12);
    font-weight: var(--wg-400);
    color: var(--yellow);
    border: 1px solid var(--yellow-border);
    background: var(--color-baground-yellow);
    border-radius: 8px;
    padding: 2px 0;
}

.reckless {
    font-size: var(--sz-12);
    font-weight: var(--wg-400);
    color: var(--red);
    border: 1px solid var(--red-border);
    background: var(--color-baground-red);
    border-radius: 8px;
    padding: 2px 0;
}

/* Class */
.class {
    font-size: var(--sz-12);
    font-weight: var(--wg-400);
    color: var(--white);
}

/* Pos */
.short {
    font-size: var(--sz-12);
    font-weight: var(--wg-400);
    color: var(--red);
    border: 1px solid var(--red-border);
    background: var(--color-baground-red);
    border-radius: 8px;
    padding: 2px 0;
}

.long {
    font-size: var(--sz-12);
    font-weight: var(--wg-400);
    color: var(--green);
    border: 1px solid var(--green-border);
    background: var(--color-baground-green);
    border-radius: 8px;
    padding: 2px 0;
}

/* Margin */
.margin {
    font-size: var(--sz-12);
    font-weight: var(--wg-400);
    color: var(--white);
}

/* Result */
.result-lose {
    font-size: var(--sz-12);
    font-weight: var(--wg-400);
    color: var(--red);
    border: 1px solid var(--red-border);
    background: var(--color-baground-red);
    border-radius: 8px;
    padding: 2px 0;
}

.result-win {
    font-size: var(--sz-12);
    font-weight: var(--wg-400);
    color: var(--green);
    border: 1px solid var(--green-border);
    background: var(--color-baground-green);
    border-radius: 8px;
    padding: 2px 0;
}

.result-missed {
    font-size: var(--sz-12);
    font-weight: var(--wg-400);
    color: var(--gray);
    border: 1px solid var(--bg-38);
    background: var(--bg-27);
    border-radius: 8px;
    padding: 2px 0;
}

.result-break-even {
    font-size: var(--sz-12);
    font-weight: var(--wg-400);
    color: var(--green);
    border: 1px solid var(--green-border);
    background: var(--color-baground-green);
    border-radius: 8px;
    padding: 2px 0;
}

/* PnL */
.pnl-win {
    font-size: var(--sz-12);
    font-weight: var(--wg-400);
    color: var(--green);
}

.pnl-loss {
    font-size: var(--sz-12);
    font-weight: var(--wg-400);
    color: var(--red);
}

.pnl-null {
    font-size: var(--sz-12);
    font-weight: var(--wg-400);
    color: var(--gray);
}

/* ------ Tooltip Jurnal Tabel ------ */
.tooltip-box {
    position: fixed;
    min-width: 200px;
    max-width: 560px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(61, 61, 61, 0.65);
    backdrop-filter: blur(3px);
    color: var(--white);
    z-index: 100;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-100px) translateX(-40px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.tooltip-box.show {
    opacity: 1;
    transform: translateY(-100px) translateX(-40px);
}

.tooltip-box.hidden {
    display: none;
}

.tooltip-title {
    font-weight: var(--wg-600);
    margin-bottom: 6px;
    font-size: 14px;
    opacity: 0.9;
}

.tooltip-text {
    font-size: 13px;
    opacity: 0.8;
}

.tooltip-imgs {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.tooltip-imgs img {
    width: auto;
    max-width: 240px;
    height: 140px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.15);
}

.tooltip-link {
    margin-top: 8px;
    display: inline-block;
    font-size: 13px;
    color: #66b3ff;
    text-decoration: none;
}

.tooltip-link:hover {
    text-decoration: underline;
}

/* ------ Pagination ------ */
.container-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 0;
    width: 100%;
}

.wrapper-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-pagination  {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    width: 35px;
    border-radius: 10px;
    border: 1px solid var(--bg-45);
    transition: all 0.3s ease;
    cursor: pointer;
}

.box-page-of:hover,
.box-page-rows:hover,
.box-number-page:hover,
.btn-pagination:hover  {
    border-color: var(--bg-60);
    background: var(--bg-27);
}

.box-number-page:active,
.btn-pagination:active {
    transform: scale(0.9);
}

.wrapper-page-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 4px;
}

.box-number-page  {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    width: 35px;
    border-radius: 10px;
    border: 1px solid var(--bg-45);
    transition: all 0.3s ease;
    cursor: pointer;
}

.box-number-page.active {
    background: var(--green-border);
    border-color: var(--green-border);
}

.box-more  {
    display: flex;
    align-items: end;
    justify-content: center;
    height: 35px;
    width: 35px;
}

.number-page {
    font-size: var(--sz-12);
}

.wrapper-page-of {
    display: flex;
    align-items: center;
    gap: 6px;
}

.page-text {
    font-size: var(--sz-12);
    color: var(--gray);
}

.box-page-of  {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 35px;
    min-width: 35px;
    padding: 0 12px;
    border-radius: 10px;
    margin-left: 10px;
    border: 1px solid var(--bg-45);
    transition: all 0.3s ease;
    cursor: pointer;
}

.number-page-active {
    font-size: var(--sz-12);
}

.box-page-rows  {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 35px;
    padding: 0 12px;
    border-radius: 10px;
    margin-left: 10px;
    border: 1px solid var(--bg-45);
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Dropdown Menu Pagination */
.dropdown-menu {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: fit-content;
    min-width: 100%;
    white-space: nowrap;
    background: var(--bg-27);
    border: 1px solid var(--bg-45);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    z-index: 10;
    display: none;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 6px;
}

.dropdown-menu.active {
    display: flex;
}

.dropdown-item {
    padding: 8px 16px;
    font-size: var(--sz-12);
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
}

.dropdown-item:hover {
    background: var(--bg-38);
}

/* ------ Button Up Instan ------ */
.box-up {
    position: fixed;
    bottom: 30px;
    right: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-27);
    border: 1px solid var(--bg-55);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
}

.box-up:hover {
    background: var(--color-baground-green);
    border: 1px solid var(--green);
}

.box-up:active {
    transform: scale(0.95);
}

.box-up svg {
    fill: var(--gray);
}

.box-up:hover svg {
    fill: var(--green);
}

/* ------ Popup Delet ------ */
#confirmPopup {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(1px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.2s ease-out;
}

#confirmPopup.hidden {
    display: none;
}

.confirm-popup-content {
    background: var(--bg-20);
    color: var(--white);
    padding: 32px;
    border-radius: 15px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    width: 340px;
    border: var(--border-popup);
    animation: scaleIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9) translateY(-20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.confirm-icon-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.confirm-icon-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: rgba(239, 68, 68, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-icon-svg {
    width: 32px;
    height: 32px;
    stroke: var(--white);
}

.confirm-title {
    font-size: 18px;
    font-weight: var(--wg-600);
    margin-bottom: 8px;
    text-align: center;
}

.confirm-message {
    font-size: 14px;
    color: var(--white);
    margin-bottom: 24px;
    text-align: center;
    line-height: 1.6;
}

.confirm-buttons {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.btn-delete {
    padding: 10px 25px;
}

/* ------------------------------------- */
/* ========= Statistic Secsion ========= */
/* ------------------------------------- */

.statistic {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 90px 40px 40px;
    min-height: auto;
}

.container-statistic {
    display: flex;
    gap: 15px;
}

/* ------ Statistic Header ------ */
.box-statistic {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.row-box-statistic {
    display: flex;
    align-items: center;
    gap: 6px;
}

.min-title {
    font-size: var(--sz-14);
    color: var(--gray);
}

.total-equity {
    font-size: var(--sz-18);
    font-weight: var(--wg-500);
}

.persentase-fees {
    font-size: var(--sz-14);
    color: var(--red);
}

.bx-in-st {
    display: flex;
    gap: 6px;
    align-items: center;
}

.circle-hj {
    background-color: var(--green);
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.if-eq {
    font-size: var(--sz-12);
    color: var(--gray);
}

.if-tl-eq {
    font-size: var(--sz-12);
    color: var(--white);
}

.value-wd {
    font-size: var(--sz-12);
    color: var(--green);
    background-color: var(--color-baground-green);
    border: 1px solid var(--green-border);
    border-radius: 15px;
    padding: 2px 7px;
}

.box-share {
    display: flex;
    align-items: center;
    justify-content: end;
    height: 100%;
    gap: 8px;
    flex: 1;
}

.btn-sop-secondary {
    padding: 10px;
}

.btn-share {
    display: flex;
    gap: 6px;
    padding: 10px 20px;
}

/* ------ Statistic & Chart Balance ------ */
.chart-balance {
    display: flex;
    justify-content: space-between;
    height: 475px;
    width: 100%;
    padding: 20px;
    gap: 40px;
    border-radius: 15px;
    background: var(--bg-20);
    border: 1px solid var(--bg-38);
}

.bx-statistic-in {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 10px 0;
    width: 275px;
}

.bx-in-ll {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 15px 15px;
}

.border-btn {
    border-bottom: 1px solid var(--bg-38);
}

.bx-in-sta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bx-prgs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.value-lessons {
    font-size: var(--sz-12);
}

.min-subttl {
    font-size: var(--sz-12);
    color: var(--gray);
}

.min-perst {
    font-size: var(--sz-12);
    color: var(--gray);
}

.progress-statistic {
    width: 100%;
    height: 4px;
    background: var(--bg-38); 
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.progress-statistic::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: var(--win-percent, 0%);
    background: linear-gradient(135deg, var(--green-secondary) 0%, rgba(16, 185, 129, 0.5) 100%);
}

.tx-ll {
    font-size: var(--sz-14);
}

.ath-balance {
    font-size: var(--sz-18);
    font-weight: var(--wg-400);
    color: var(--green);
}

.bx-in-bl {
    display: flex;
    align-items: center;
    gap: 4px;
}

.roi-bl-ath-svg {
    fill: var(--green);
}

.roi-bl-ath {
    font-size: var(--sz-14);
    color: var(--green);
}

.x-progress {
    display: flex;
    align-items: center;
    justify-content: start;
    overflow: hidden;
    height: 40px;
    width: 100%;
    border-radius: 10px;
    background-color: var(--bg-27);
}

.bx-usd {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: var(--color-baground-red);
}

.value-dropdown {
    font-size: var(--sz-12);
    color: var(--red);
}

.bx-dwn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}

.circle-dwn {
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: var(--red);
}

.min-dwn-roi {
    font-size: var(--sz-12);
    color: var(--red);
}

/* Chart Balance */
.container-chart-balance {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
}

.chart-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

#radarPnl, #radarRR {
    position: absolute;
    transform: translate(-50%, -50%);
}

.tooltip-balance {
    position: absolute;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(99, 99, 99, 0.2);
    backdrop-filter: blur(4px);
    color: var(--white);
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 13px;
    pointer-events: none;
    display: none;
    z-index: 10;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
}

.tooltip-balance.active {
    display: block;
}

.tooltip-stats {
    font-size: 14px;
    color: var(--white);
}

.tooltip-date-balance {
    font-size: 12px;
    color: var(--gray);
}

.date-label-balance {
    position: absolute;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(99, 99, 99, 0.2);
    backdrop-filter: blur(4px);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 11px;
    pointer-events: none;
    display: none;
    z-index: 10;
    font-weight: var(--wg-600);
}

.date-label-balance.active {
    display: block;
}

.circle-balance {
    display: none;
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
    background: var(--circlebalance-color, rgb(13,185,129));
}

.circle-balance::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--circlebalance-after-color, rgba(13,185,129, 0.6));
    transform: translate(-50%, -50%);
    animation: pulse-circlebalance 2s infinite;
}

@keyframes pulse-circlebalance {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0; }
}

.btn-wrapper-filter {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.bx-wr-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#toggleCircles {
    background: var(--bg-20);
    border: 1px solid var(--bg-38);
    color: var(--gray);
    border-radius: 12px;
    height: 100%;
    padding: 0 15px;
    cursor: pointer;
    transition: all 0.1s ease;
}

#toggleCircles.on {
    background: var(--color-baground-green);
    border: 1px solid var(--green-border);
    color: var(--green);
}

#toggleCircles.off {
    background: var(--bg-20);
    border: 1px solid var(--bg-38);
    color: var(--gray);
}

.stats-balance-wrapper {
    display: flex;
    justify-content: end;
}

.stats-balance-time {
    display: flex;
    flex-direction: column;
    text-align: right;
    gap: 4px;
}

.subtitle-stats-balance {
    font-size: var(--sz-14);
    font-weight: var(--wg-400);
    color: var(--gray);
}

.balance-pnl {
    font-size: var(--sz-20);
    font-weight: var(--wg-600);
    color: var(--green);
}

/* ------ Chart PnL-RR & Detailed Statistics ------ */
.chart-rr-pnl {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 420px;
    width: 100%;
    border-radius: 15px;
    padding: 20px;
    background: var(--bg-20);
    border: 1px solid var(--bg-38);
}

.statistic-rr-pnl {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 420px;
    min-width: 250px;
    border-radius: 15px;
    padding: 20px;
    background: var(--bg-20);
    border: 1px solid var(--bg-38);
}

.box-title-statsrr {
    width: 100%;
    margin-bottom: 10px;
}

.toggle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 15px;
}

.radio-group {
    display: flex;
    gap: 60px;
    position: relative;
}

.radio-option {
    position: relative;
    cursor: pointer;
}

.radio-option input[type="radio"] {
    display: none;
}

.radio-label {
    font-size: var(--sz-14);
    color: var(--gray-primary);
    font-weight: var(--wg-600);
    transition: color 0.3s ease;
}

.radio-option input[type="radio"]:checked + .radio-label {
    color: var(--green);
    font-weight: var(--wg-600);
}

.active-line {
    position: absolute;
    bottom: -6px;
    height: 2px;
    background: var(--green);
    border-radius: 2px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-content:not(.active) {
    pointer-events: none;
}

.container-main-rr {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    position: relative;
    overflow: hidden;
    overflow-y: auto;
}

.container-quality.active {
    transform: translateX(0);
}

.container-quality:not(.active) {
    transform: translateX(-100%);
}

.container-averages.active {
    transform: translateX(0);
}

.container-averages:not(.active) {
    transform: translateX(100%);
}

.title-stats-rr {
    font-size: var(--sz-14);
    color: var(--gray);
}

.header-rr-pnl {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.legend-item span {
    color: var(--gray);
    font-weight: var(--wg-500);
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.legend-dot.pnl {
    background: #00ffcc;
}

.legend-dot.rr {
    background: #ff9500;
}

.header-title-rr-pnl {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0 35px;
}

.title-chart-pnl {
    font-size: var(--sz-12);
    color: #00ffcc;
}

.title-chart-rr {
    font-size: var(--sz-12);
    color: #ff9500;
}

.chart-container {
    position: relative;
    height: 320px;
    width: 100%;
}

canvas {
    display: block;
    height: 100%;
    width: 100%;
}

.tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(99, 99, 99, 0.2);
    backdrop-filter: blur(4px);
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 12px;
    pointer-events: none;
    display: none;
    z-index: 10;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.tooltip-date {
    color: var(--gray);
    margin-bottom: 8px;
    font-size: 11px;
}

.tooltip-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0;
}

.tooltip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.tooltip-label {
    min-width: 40px;
}

.tooltip-green {
    color: #34D399;
}

.tooltip-yellow {
    color: #ff9500;
}

.tooltip-value {
    font-weight: var(--wg-500);
    color: var(--white);
}

.pnl {
    --circle-color: #00ffcc;
    --circle-color-rgba: 0, 255, 204;
    --border-color: #00ffcc;
}

.rr {
    --circle-color: #ff9500;
    --circle-color-rgba: 255, 149, 0;
    --border-color: #ff9500;
}

.radar {
    display: none;
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--circle-color, var(--white));
    border: 2px solid var(--border-color, #000);
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
}

.radar::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(var(--circle-color-rgba), 0.6);
    transform: translate(-50%, -50%);
    animation: pulse-radar 2s infinite;
}

@keyframes pulse-radar {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0; }
}

.bx-statsrrpnl {
    display: flex;
    align-items: center;
    justify-content: start;
    width: 100%;
    gap: 8px;
    margin-bottom: 10px;
}

.tl-stats {
    font-size: var(--sz-12);
    color: var(--gray);
}

.bx-statsrrpnl .left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bx-statsrrpnl .value-tl-stats {
    font-size: var(--sz-12);
    font-weight: var(--wg-600);
    color: var(--green);
}

.value-tl-stats-red {
    font-size: var(--sz-12);
    font-weight: var(--wg-600);
    color: var(--red);
}

.icon-stats-rp {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
    border-radius: 8px;
    background: var(--bg-27);
    border: 1px solid var(--bg-38);
}

/* ------ Monly Report ------ */
.container-monly {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 15px;
    height: 515px;
    width: 470px;
    padding: 20px;
    border-radius: 15px;
    background: var(--bg-20);
    border: 1px solid var(--bg-38);
}

.title-monly {
    font-size: var(--sz-18);
    color: var(--white);
    font-weight: var(--wg-500);
}

.months-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    width: 100%;
}

.month-card {
    background: var(--bg-27);    
    border-radius: 8px;
    padding: 8px;
    text-align: center;
    border: 1px solid var(--bg-45);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.month-card:active {
    transform: scale(0.98);
}

.month-card:hover {
    background: var(--bg-35);
    border-color: var(--bg-45);    
}

.month-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray);
    margin-bottom: 6px;
}

.profit-loss {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 6px;
}

.profit-loss.positive {
    color: var(--green);
}

.profit-loss.negative {
    color: var(--red);
}

.return-rate {
    font-size: 10px;
    font-weight: 600;
}

.return-rate.positive {
    color: var(--green-secondary);
}

.return-rate.negative {
    color: var(--red-secondary);
}

.no-data {
    grid-column: 1 / -1;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.chart-container-performance {
    display: flex;
    flex-direction: column;
    background: var(--bg-27);
    padding: 15px;
    border-radius: 10px;
    width: 100%;
    height: 100%;
}

.chart-container-performance h3 {
    color: var(--white);
    font-size: 12px;
    text-align: center;
    
    margin-bottom: 10px;
}

.bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    height: 100%;
    padding: 12px 0 10px;
}

.bar {
    flex: 1;
    border-radius: 4px 4px 0 0;
    position: relative;
    transition: all 0.3s;
    cursor: pointer;
    min-width: 10px;
}

.bar:hover {
    filter: brightness(1.3);
}

#barChart:hover .bar {
    opacity: 0.6;
}

#barChart .bar:hover {
    opacity: 1 !important;
}

.bar-label {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: var(--gray-primary);
    white-space: nowrap;
}

.bar-value {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: bold;
    color: var(--gray);
}

/* ------ Calender Trading ------ */
.calendar-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 515px;
    flex: 1;
    padding: 20px;
    border-radius: 15px;
    background: var(--bg-20);
    border: 1px solid var(--bg-38);
}

.calendar-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 6px;
}

.nav-btn {
    width: 30px;
    height: 30px;
    color: var(--bg-27);
    background: rgba(16, 185, 129, 0.5);
    border: 1px solid var(--green-secondary);
}

.nav-btn:hover {
    background: rgba(16, 185, 129, 0.8);
    border-color: var(--green-primary);
}

.month-year-selector {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 150px;
}

.current-month {
    font-size: 14px;
    font-weight: 700;
    color: var(--white);
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 8px;
    transition: background 0.2s;
}

.current-month:hover {
    background: var(--bg-35);
}

/* Custom Select Styling */
.custom-select {
    position: relative;
    min-width: 120px;
    z-index: 1000;
}

.select-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border: 1px solid var(--bg-45);
    border-radius: 8px;
    background: var(--bg-35);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--white);
    transition: all 0.2s;
    min-height: 38px;
}

.select-header:hover {
    border-color: var(--green);
    background: var(--bg-38);
}

.select-header svg {
    transition: transform 0.2s;
}

.custom-select.active .select-header svg {
    transform: rotate(180deg);
}

.custom-select.active .select-header {
    border-color: var(--green);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.select-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-35);
    border: 1px solid var(--bg-45);
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    z-index: 1001;
}

.custom-select.active .select-options {
    display: block;
}

.select-option {
    padding: 10px 15px;
    font-size: 12px;
    color: var(--white);
    cursor: pointer;
    transition: background 0.2s;
}

.select-option:hover {
    background: var(--bg-38);
}

.select-option.selected {
    background: var(--green-secondary);
    color: var(--white);
}

/* Scrollbar styling untuk select options */
.select-options::-webkit-scrollbar {
    width: 6px;
}

.select-options::-webkit-scrollbar-track {
    background: var(--bg-27);
    border-radius: 0 0 8px 0;
}

.select-options::-webkit-scrollbar-thumb {
    background: var(--bg-45);
    border-radius: 3px;
}

.select-options::-webkit-scrollbar-thumb:hover {
    background: var(--green-secondary);
}

/* Date picker adjustments */
.date-picker-inputs {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    position: relative;
    z-index: 100;
}

/* Pastikan date picker muncul di atas semua elemen */
.date-picker {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    background: var(--bg-27);
    border: 1px solid var(--bg-35);
    border-radius: 10px;
    padding: 15px;
    z-index: 1000;
    display: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.date-picker.active {
    display: block;
}

/* .date-picker-inputs {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
} */

.date-picker select {
    padding: 10px 15px;
    border: 1px solid var(--bg-45);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background: var(--bg-35);
}

.date-picker select:focus {
    outline: none;
    border-color: var(--green);
}

.date-picker-buttons {
    display: flex;
    gap: 8px;
}

.date-picker-btn {
    flex: 1;
    padding: 8px;
}

.days-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    padding: 0 8px;
}

.day-name {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--gray);
    padding: 8px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(6, 1fr);
    height: 100%;
    gap: 4px;
}

.day-cell {
    background: var(--bg-27);
    border: 1px solid var(--bg-45);
    border-radius: 8px;
    padding: 10px 7px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: default;
}

.day-cell.future {
    opacity: 0.3;
    pointer-events: none;
}

.day-cell.other-month {
    opacity: 0.3;
    pointer-events: none;
}

.day-cell.past, .day-cell.today {
    background: var(--white);
}

.day-cell.positive {
    background: var(--color-baground-green);
    border-color: var(--green-secondary);
    cursor: pointer;
}

.day-cell.positive:hover {
    background: rgba(16, 185, 129, 0.2);
}

.day-cell.negative {
    background: var(--color-baground-red);
    border-color: var(--red-secondary);
    cursor: pointer;
}

.day-cell.negative:hover {
    background: rgba(244, 63, 94, 0.2);
}

.day-cell.empty {
    background: var(--bg-27);
}

.day-number {
    font-size: 12px;
    font-weight: 700;
    color: var(--white);
}

.pnl-value {
    font-size: 12px;
    font-weight: 500;
    margin-top: 4px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.positive .pnl-value {
    color: var(--green);
}

.negative .pnl-value {
    color: var(--red);
}

.empty .pnl-value {
    color: var(--gray-primary);
}

/* Tooltip */
.tooltip-calender {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: var(--bg-38);
    border: 1px solid var(--bg-45);
    color: var(--gray);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.day-cell:hover .tooltip-calender {
    opacity: 1;
}

.tooltip-calender p {
    margin: 0;
}

.date-daily-pnl {
    color: var(--gray);
}

.wrapper-pnl-daily {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.pnl-label {
    color: var(--white);
}

.pnl-value.positive { color: var(--green); }
.pnl-value.negative { color: var(--red); }

/* ------ Detailed Statistics ------ */
.winrate {
    font-size: var(--sz-12);
    font-weight: var(--wg-500);
    padding: 2px 10px;
    width: min-content;
    border-radius: 6px;
    background: var(--color-baground-green);
    border: 1px solid var(--green-border);
    color: var(--green);
}

.stats-wr-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    width: 100%;
    height: 100%;
}

.row-stats-wr {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 4px;
}

.ttl-stats-wr {
    font-size: var(--sz-14);
    color: var(--gray);
}

.row-in-wr {
    display: flex;
    flex-direction: column;
}

.data-stats-wr {
    font-size: var(--sz-12);
    font-weight: var(--wg-600);
}

/* ------ Chart Pairs ------ */
.container-chart-pairs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 420px;
    width: auto;
    min-width: 420px;
    border-radius: 15px;
    padding: 20px;
    background: var(--bg-20);
    border: 1px solid var(--bg-38);
}

.container-in-pairs {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 350px;
}

.title-pairs-chart {
    position: absolute;
    top: 0;
    left: 0;
    font-size: var(--sz-18);
    color: var(--white);
    font-weight: var(--wg-500);
}

.chart-container-pairs { 
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-container-pairs svg { 
    transform: rotate(-90deg); 
}

.chart-center {
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    text-align:center;
}

.total-value-pairs {
    font-size: var(--sz-24);
    font-weight: var(--wg-700);
    color:var(--wg-700);
}

.tooltip-pairs {
    position: absolute;
    display:flex;
    justify-content:center;
    align-items:center;
    background: rgba(30,30,30,0.95);
    border:1px solid #3a3a3a;
    border-radius:13px;
    padding:2px 10px 2px 2px;
    gap:7px;
    opacity:0;
    pointer-events:none;
    transition: opacity 0.3s ease;
    box-shadow:0 6px 18px rgba(0,0,0,0.4);
    z-index:1;
}

.tooltip-pairs.show { 
    opacity:1; 
}

.tooltip-icon { 
    width:22px; 
    height:22px; 
    border-radius:50%; 
}

.tooltip-value-pairs { 
    font-size:11px; 
    color:var(--white); 
    font-weight:var(--wg-600); 
}

.segment { 
    cursor:pointer; 
}


circle.segment { 
    animation: fillChart 1.5s ease-out forwards; 
}

@keyframes fillChart { from { stroke-dashoffset: 628; } }

.wrapper-paris-identifier {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 380px;
    overflow-y: auto;
}

.box-identifier-pairs {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 8px;
}

.bx-in-identifier {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.circle-pairs {
    height: 8px;
    width: 8px;
    border-radius: 50%;
}

.text-pairs-chart {
    font-size: var(--sz-14);
    color: var(--gray);
}

/* ------ Global Summary ------ */
.container-statistic-pairs {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 420px;
    width: auto;
    min-width: 370px;
    border-radius: 15px;
    padding: 20px;
    background: var(--bg-20);
    border: 1px solid var(--bg-38);
}

.card-title {
    font-size: var(--sz-18);
    font-weight: var(--wg-500);
    color: var(--white);
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stats-row-progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stats-row-style-trading {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat-label {
    font-size: 0.75em;
    color: var(--gray);
}

.stat-value {
    font-size: var(--sz-12);
    font-weight: var(--wg-400);
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    transition: width 0.8s ease;
}

.progress-green { 
    background: linear-gradient(135deg, rgba(16, 185, 129, 1) 0%, rgba(16, 185, 129, 0.5) 100%); 
}

.badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.65em;
    font-weight: var(--wg-600);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-green {
    background: var(--color-baground-green);
    border: 1px solid var(--green-border);
    color: var(--green);
}

.badge-gray {
    background: var(--color-baground-white);
    border: 1px solid var(--gray-primary);
    color: var(--white);
}

.title-trading-style {
    font-size: var(--sz-14);
    color: var(--white);
}

.hr-h {
    height: 1px;
    border: none;
    background: var(--bg-38);
}

.mental-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.mental-box {
    text-align: center;
    padding: 10px 6px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 1px solid var(--bg-38);
}

.mental-label {
    font-size: var(--sz-10);
    text-transform: uppercase;
    margin-bottom: 2px;
    letter-spacing: 0.3px;
}

.mental-value {
    font-size: var(--sz-14);
    font-weight: var(--wg-600);
}

/* ------ Statistic Bheavior Single ------ */
.container-bias-pairs {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 420px;
    flex: 1;
    gap: 15px;
}

.subcontainer-continuation,
.subcontainer-reversal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    width: 100%;
    border-radius: 15px;
    padding: 20px;
    background: var(--bg-20);
    border: 1px solid var(--bg-38);
}

.performance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bg-38);
}

.performance-title {
    font-size: var(--sz-16);
    font-weight: var(--wg-500);
    display: flex;
    align-items: center;
    gap: 6px;
}

.winrate-badge {
    font-size: var(--sz-12);
    font-weight: var(--wg-500);
    padding: 4px 10px;
    border-radius: 8px;
}

.winrate-positive {
    background: var(--color-baground-green);
    border: 1px solid var(--green-border);
    color: var(--green);
}

.winrate-negative {
    background: var(--color-baground-red);
    border: 1px solid var(--red-border);
    color: var(--red);
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    width: 100%;
    height: 100%;
}

.metric-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.metric-label {
    font-size: 0.65em;
    color: var(--color-text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.metric-value {
    font-size: var(--sz-16);
    font-weight: var(--wg-500);
}

/* ------ Chart WR ------ */
.container-chart-wr {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: start;
    justify-content: space-between;
    height: 420px;
    width: 420px;
    border-radius: 15px;
    padding: 20px;
    background: var(--bg-20);
    border: 1px solid var(--bg-38);
}

.title-pairs-wr {
    font-size: var(--sz-18);
    color: var(--white);
    font-weight: var(--wg-500);
    width: 100%;
}

.wrapper-chartwr {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#wrChartSVG {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    width: 170px;
    height: 170px;
    z-index: 1;
}

#donutChart {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* ------ Pair ------ */
.container-stats-pairs {
    display: flex;
    flex-direction: column;
    flex: 1;
    border-radius: 15px;
    padding: 20px;
    background: var(--bg-20);
    border: 1px solid var(--bg-38);
    max-height: 420px;
}

.container-stats-pairs h2 {
    font-size: var(--sz-18);
    font-weight: var(--wg-500);
    margin-bottom: 10px;
}

.pairs-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    padding: 0 4px;
    overflow: hidden;
}

.pairs-body {
    overflow-y: auto;
}

/* Header */
.pairs-header {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    padding: 14px 0;
    text-align: center;
    border-bottom: 1px solid var(--bg-38);
}

.pairs-header div {
    text-transform: uppercase;
    color: var(--gray);
    font-size: var(--sz-12);
    font-weight: var(--wg-500);
}

/* Baris Data */
.pairs-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    align-items: center;
    padding: 10px 0;
    color: var(--white);
    font-size: var(--sz-12);
    text-align: center;
    border-bottom: 1px solid var(--bg-38);
    transition: background 0.2s ease;
    cursor: pointer;
}

.pairs-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.no-date {
    opacity: 0.35;
}

/* Kolom Pair */
.pair-item {
    font-size: var(--sz-12);
    font-weight: var(--wg-600);
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 6px;
    padding: 0 4px;
}

.icon-tabel {
    border-radius: 50%;
    height: 23px;
    width: 23px;
}

.null {
    color: var(--gray);
    opacity: 0.5;
}

.pairs-row div:nth-child(3) {
    color: var(--green);
}

.pairs-row div:nth-child(4) {
    color: var(--red);
}

.no-data-pairs {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    color: var(--gray);
}

/* ----------------------------------- */
/* ========== Notes Secsion ========== */
/* ----------------------------------- */
.notes {
    display: flex;
    flex-direction: column;
    margin: 90px 40px 40px;
}

.notes h2 {
    font-size: var(--sz-30);
    font-weight: var(--wg-500);
}

.wrapper-stats-notes {
    position: relative;
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 20px;
    
    margin-top: 20px;
}

.subcontainer-stats-notes {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    padding: 20px;
    border-radius: 15px;
    background: var(--bg-20);
    border: 1px solid var(--bg-38);
}

.stats-informasion {
    font-size: var(--sz-18);
    font-weight: var(--wg-700);
}

.name-stats-notes {
    font-size: var(--sz-14);
    color: var(--gray);
}

.title-notes {
    font-size: var(--sz-18);
    color: var(--white);
    font-weight: var(--wg-500);
}

.left-notes-add,
.right-notes {
    padding: 20px;
    border-radius: 15px;
    background: var(--bg-20);
    border: 1px solid var(--bg-38);
}

.left-notes-add {
    position: sticky;
    top: 80px;
    width: 35%;
}

.right-notes {
    flex: 1;
}

.wrapper-from-notes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    
    margin: 15px 0;
}

.btn-notes {
    width: 100%;
    padding: 10px 0;
}

.wrapper-notes-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}

.column-filter-notes  {
    display: flex;
    gap: 6px;
}

.btn-filter-notes {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: var(--bg-27);
    border-radius: 10px;
    border: 1px solid var(--bg-45);
    cursor: pointer;
}

.btn-filter-notes:hover {
    background: var(--bg-35);
    border-color: var(--bg-50);
}

.btn-filter-notes.active {
    background: var(--color-baground-green);
    border-color: var(--green-border);
}

.btn-filter-notes span {
    font-size: var(--sz-12);
}

.wrapper-content-notes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    max-height: 800px;

    margin-top: 15px;
}

.content-notes {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--bg-27);
    border: 1px solid var(--bg-45);
    padding: 20px;
    border-radius: 10px;
}

.title-content-notes {
    font-size: var(--sz-18);
    font-weight: var(--wg-600);
}

.date-content-notes {
    font-size: var(--sz-14);
    color: var(--gray);
}

.content-main-notes {
    margin: 8px 0;
    font-size: var(--sz-16);
    opacity: 0.7;
}

.learning-content-notes {
    padding: 15px;
    border-radius: 6px;
    background: var(--color-baground-red);
    border-left: 2px solid var(--red);
    font-size: var(--sz-14);
}

.action-content-plan-notes {
    padding: 15px;
    border-radius: 6px;
    background: var(--color-baground-green);
    font-size: var(--sz-14);
}

.text-learning-notes,
.action-content-plan {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wrapper-position-right-notes {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.box-delete-notes {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 10px;
    background: var(--color-baground-red);
    border: 1px solid var(--red);
    cursor: pointer;
}

.box-delete-notes:active {
    transform: scale(0.95);
}

.box-delete-notes svg {
    fill: var(--red);
}

.wrapper-input-notes {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.btn-setting-input-notes {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 45px;
}

.box-category-notes {
    padding: 8px 15px;
    border-radius: 10px;
    border: 1px solid var(--green-border);
    background: var(--color-baground-green);
}

.text-category-notes {
    font-size: var(--sz-14);
    color: var(--green);
}

/* ------ Popup Delet Notes ------ */
#confirmDeleteNotes {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(1px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.2s ease-out;
}

#confirmDeleteNotes.hidden {
    display: none;
}

/* ----------------------------------- */
/* ========= Setting Secsion ========= */
/* ----------------------------------- */

.setting {
    display: flex;
    flex-direction: column;
    margin: 90px 40px 40px;
}

.setting h2 {
    font-size: var(--sz-30);
    font-weight: var(--wg-500);
    margin-bottom: 15px;
}

/* ------- Pofile ------- */
.container-profile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-radius: 15px;
    background: var(--bg-20);
    border: 1px solid var(--bg-38);
    margin-bottom: 15px;
}

.raw-profile-setting {
    display: flex;
    align-items: center;
    gap: 8px;
}

.box-profile {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.box-profile img {
    border-radius: 50%;
    height: 38px;
    width: 38px;
    border: 2px solid var(--bg-70);
}

.username {
    font-size: 18px;
}

.email {
    font-size: 14px;
    color: var(--gray);
}

.wrapper-button-profile {
    display: flex;
    gap: 10px;
}

/* Edit Profile */
.btn-edit-profile {
    padding: 8px;
}

.wrapper-edit-profile {
    display: flex;
    width: 800px;
    height: 100%;
    overflow: hidden;
}

.left-panel {
    width: 50%;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 25px;
}

.right-panel {
    width: 50%;
    padding: 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--bg-35);
    border-radius: 0 15px 15px 0;
    overflow: hidden;
}

.right-panel svg {
    position: absolute;
    top: 50%;
    height: 450px;
}

.user-card-main {
    background: rgba(40, 40, 40, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border-radius: 14px;
    padding: 15px;
    text-align: center;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.user-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgba(40, 40, 40, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    border-radius: 10px;
    /* padding: 48px 40px; */
    padding: 20px;
    text-align: center;
    width: 100%;
    height: 100%;
}

.wrapper-chard {
    margin: 0 auto 12px;
    position: relative;
}

.rope-hanger {
    background: rgba(148, 148, 148, 0.2);
    border: 1px solid rgba(102, 102, 102, 0.6);
    border-radius: 6px;
    height: 100vh;
    width: 45px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.1);
}

.hole-chard {
    width: 50px;
    height: 10px;
    border-radius: 10px;
    background: #000;
}

.form-group-profile {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.row-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.altert-text {
    font-size: 12px;
    font-weight: 600;
    color: #bb0b0b;
}

.row-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

#tooltipUsername,
.tooltipPassword {
    fill: #666;
    transition: all 0.2s ease;
    cursor: pointer;
}

#tooltipUsername:hover,
.tooltipPassword:hover {
    fill: #fff;
    cursor: pointer;
}

.tooltip-wrapper {
    position: relative;
    display: inline-block;
    padding-top: 6px;
    cursor: help;
}

.tooltip-wrapper .tooltip-content {
    visibility: hidden;
    width: 220px;
    background-color: #333;
    color: #eee;
    text-align: left;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.4;
    position: absolute;
    z-index: 10;
    bottom: 30px;
    left: -8px;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    white-space: normal;
}

.tooltip-wrapper:hover .tooltip-content {
    visibility: visible;
    opacity: 1;
}

.tooltip-wrapper .tooltip-content::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 10px;
    margin-top: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

input[type="text"] {
    background: var(--bg-27);
    border: 1px solid var(--bg-45);
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 15px;
    color: var(--white);
    outline: none;
    transition: all 0.3s ease;
}

input[type="text"]:focus {
    border-color: var(--green);
    background: var(--bg-38);
}

input[type="text"]::placeholder {
    color: var(--gray-primary);
}

input[type="file"] {
    display: none;
}

.file-upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 180px;
    padding: 40px 20px;
    border: 1px dashed var(--bg-55);
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: var(--bg-38);
}

.file-upload-area:hover {
    border-color: var(--bg-70);
    background: var(--bg-45);
}

.file-upload-area.dragover {
    border-color: var(--bg-70);
    background: var(--bg-45);
}

.upload-text {
    color: #b8b8b8;
    font-size: 14px;
}

.upload-icon {
    color: var(--red);
    font-size: 32px;
}

.file-name {
    color: var(--red);
    font-size: 13px;
}

.btn-delete-foto {
    padding: 6px 12px;
}

.preview-section {
    text-align: center;
}

.profile-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.avatar {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    object-fit: cover;
    background: rgba(40, 40, 40, 0.6);
    border: 1px dashed rgba(255, 255, 255, 0.2);
}

.profile-name {
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    margin-top: 10px;
}

.profile-placeholder {
    color: #666;
}

.user-id-container {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 16px;
}

.barcode {
    height: 40px;
    margin-bottom: 12px;
    box-shadow: 0 0 8px rgba(5, 187, 102, 0.2);
    background: repeating-linear-gradient(
        90deg,
        #0bbb80,
        #0ec25f 2px,
        transparent 2px,
        transparent 4px,
        #0bbb80 4px,
        #0ec25f 6px,
        transparent 6px,
        transparent 10px,
        #0bbb95 10px,
        #0ec25f 11px,
        transparent 11px,
        transparent 13px
    );
    opacity: 0.6;
}

.user-id {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #666;
    letter-spacing: 1px;
}

/* Logout */
.row-profile {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    cursor: pointer;
    margin: 5px 0;
    transition: background 0.15s ease, color 0.15s ease, fill 0.15s ease;
}

.row-profile svg {
    fill: var(--gray);
}

.title-menu {
    font-size: 12px;
    color: var(--gray);
}

.container-setting {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
    padding: 20px;
    border-radius: 15px;
    background: var(--bg-20);
    border: 1px solid var(--bg-38);
}

.container-setting h2 {
    font-size: 16px;
    font-weight: var(--wg-600);
}

.info-text {
    font-size: var(--sz-12);
    color: var(--gray);
}

.button-group {
    display: flex;
    justify-content: space-between;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 250px;
}

.percent-sign {
    position: absolute;
    right: 15px;
    color: var(--gray);
    font-weight: var(--wg-600);
    pointer-events: none;
}

/* Download Data*/
.column-download {
    display: flex;
    gap: 10px;
}

.btn-download {
    padding: 10px 25px;
}

/* ---------------------------------------- */
/* ========= Popup Inisialisasion ========= */
/* ---------------------------------------- */

/* ------ Global Setting ------ */
body.popup-open .popup-overlay,
body.popup-open .popup-container {
    pointer-events: auto;
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(2px);
    z-index: 100;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: none;
    pointer-events: none; 
}

.popup-overlay.show {
    display: block;
    pointer-events: all; 
}

.popup-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    display: none;
    flex-direction: column;
    border-radius: 15px;
    width: auto;
    z-index: 101;
    background: var(--bg-20);
    border: var(--border-popup);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform 0.3s ease;
}

.popup-container.show {
    display: flex;
    transform: translate(-50%, -50%) scale(1);
}

@keyframes slideIn {
    from { opacity: 0; transform: translate(-50%, -45%) scale(0.9); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ------ Popup Add ------ */
.popup-add {
    padding: 20px;
    width: 60%;
}

.wrapper-add {
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-body {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px 0;
    flex: 1;
}

.popup-body::-webkit-scrollbar {
    width: 8px;
}

.popup-body::-webkit-scrollbar-track {
    background: var(--bg-27);
    border-radius: 10px;
}

.popup-body::-webkit-scrollbar-thumb {
    background: var(--bg-55);
    border-radius: 10px;
}

.popup-body::-webkit-scrollbar-thumb:hover {
    background: var(--gray-primary);
}

.form-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.grid-sesion {
    display: flex;
    width: 100%;
    gap: 6px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;

    margin-bottom: 6px;
}

.form-group label {
    font-size: var(--sz-12);
    font-weight: var(--wg-500);
    text-transform: uppercase;
}

/* Clear */
.input-with-clear {
    position: relative;
    width: 100%;
}

.input-with-clear .clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--gray-primary);
    backdrop-filter: blur(5px);
    border: 1px solid var(--bg-45);
    font-size: var(--sz-14);
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s ease;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    pointer-events: none;
}

.input-with-clear.has-value .clear-btn {
    opacity: 1;
    pointer-events: auto;
}

.input-with-clear .clear-btn:hover {
    fill: var(--red);
    background: var(--color-baground-red);
    border-color: var(--red-border);
}

.input-with-clear .clear-btn:hover svg {
    fill: var(--red);
}

.clear-btn svg {
    height: 9px;
    width: 9px;
}

.form-group input,
.form-group textarea {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    width: 100%;
    padding: 11px 14px;
    background: var(--bg-27) !important;
    border: 1px solid var(--bg-50);
    border-radius: 8px;
    font-size: var(--sz-14);
    color: var(--white);
    font-family: inherit;
    resize: none;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--green);
    background: var(--bg-38);
}

.form-group input:hover,
.form-group textarea:hover {
    border-color: var(--gray-primary);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--gray-primary);
    opacity: 0.6;
}

input:-webkit-autofill,
textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--white) !important;
    caret-color: var(--white) !important;
    transition: background-color 5000s ease-in-out 0s;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 10px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20" fill="%23e3e3e3"><path d="M202.87-71.87q-37.78 0-64.39-26.61t-26.61-64.39v-554.26q0-37.78 26.61-64.39t64.39-26.61H240v-80h85.5v80h309v-80H720v80h37.13q37.78 0 64.39 26.61t26.61 64.39v195.7h-91V-560H202.87v397.13h275.7v91h-275.7Zm0-568.13h554.26v-77.13H202.87V-640Zm0 0v-77.13V-640Zm355.7 568.13v-129.7L781-423q9.72-9.76 21.59-14.1 11.88-4.33 23.76-4.33 12.95 0 24.8 4.85Q863-431.72 872.7-422l37 37q8.67 9.72 13.55 21.59 4.88 11.88 4.88 23.76 0 12.19-4.36 24.41T909.7-293.3L688.26-71.87H558.57Zm304.78-267.78-37-37 37 37Zm-240 203h38L781.39-257.7l-18-19-19-18-121.04 120.05v38ZM763.39-276.7l-19-18 37 37-18-19Z"/></svg>') no-repeat center;
    opacity: 0.8;
    cursor: pointer;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Custom Dropdown Styles */
.custom-dropdown {
    position: relative;
    width: 100%;
}

.dropdown-selected {
    position: relative;
    width: 100%;
    height: 42px;
    padding: 0 14px;
    background: var(--bg-27);
    border: 1px solid var(--bg-50);
    border-radius: 8px;
    font-size: var(--sz-14);
    color: var(--white);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.dropdown-selected:hover {
    border-color: var(--gray-primary);
}

.dropdown-selected.active {
    border-color: var(--green);
    background: var(--bg-38);
}

.dropdown-selected .placeholder {
    color: var(--gray-primary);
    opacity: 0.6;
}

.icon-container {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-icon {
    position: absolute;
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
    transition: all 0.3s ease;
    cursor: pointer;
    pointer-events: auto;
    backdrop-filter: blur(5px);
    border: 1px solid var(--bg-45);
    width: 100%;
    height: 100%;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: transparent;
}

.close-icon svg,
.close-icon path {
    pointer-events: visiblePainted;
}

.dropdown-arrow {
    position: absolute;
    opacity: 1;
    visibility: visible;
    transform: rotate(0deg);
    transition: all 0.3s ease;
    pointer-events: none;
}

.dropdown-selected.has-value .close-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    pointer-events: auto;
}

.dropdown-selected.has-value .dropdown-arrow {
    opacity: 0;
    visibility: hidden;
    transform: rotate(90deg) scale(0.5);
    pointer-events: none;
}

.close-icon:hover {
    fill: var(--red) !important;
    background: var(--color-baground-red);
    border-color: var(--red-border);
}

.dropdown-selected.has-value:hover .close-icon {
    opacity: 1;
}

.dropdown-selected.active .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-options {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-27);
    border: 1px solid var(--bg-38);
    border-radius: 8px;
    max-height: 123px;
    overflow-y: auto;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.1s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.dropdown-options.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-options::-webkit-scrollbar {
    width: 6px;
}

.dropdown-options::-webkit-scrollbar-track {
    background: var(--bg-27);
}

.dropdown-options::-webkit-scrollbar-thumb {
    background: var(--bg-55);
    border-radius: 10px;
}

.dropdown-option {
    padding: 12px 14px;
    font-size: var(--sz-14);
    color: var(--white);
    cursor: pointer;
    transition: all 0.1s ease;
}

.dropdown-option:hover {
    background: var(--bg-38);
}

.dropdown-option.selected {
    background: var(--color-baground-green);
    color: var(--green);
    font-weight: var(--wg-500);
}

.confluance-wrapper,
.file-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.sub-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sub-field label {
    font-size: var(--sz-10);
    color: var(--gray-primary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.popup-footer {
    /* padding: 15px 25px; */
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.row-btn-edit {
    display: flex;
    gap: 8px;
}

.btn-add {
    padding: 10px 25px;
}

.btn-submit {
    display: none;
    padding: 10px 25px;
}

.btn-submit.active {
    display: inline-flex;
}

/* ------ Popup Edit ------ */
.popup-edit-trade,
.popup-edit-transfer {
    padding: 20px;
    width: 60%;
}

.box-auto {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    padding: 6px;
    background: var(--bg-38);
    border: 1px solid var(--bg-55);
    transition: all 0.1s ease-in-out;
    cursor: pointer;
}

.box-auto:hover {
    background: var(--color-baground-green);
    border: 1px solid var(--green);
}

.box-auto:hover svg {
    fill: var(--green);
}

.box-auto:active {
    transform: scale(0.95);
}

#btnAuto.active {
    scale: 0.95;
    transition: 0.2s;
    filter: brightness(1.2);
}

.btn-edit {
    padding: 10px 25px;
}

/* ------ Popup Caculate ------ */
.popup-caculate {
    padding: 20px;
    max-width: 480px;
}

.wrapper-title-caculate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.informasion-risk {
    font-size: var(--sz-12);
    font-weight: var(--wg-600);
    color: var(--red);
}

.risk-display {
    background: var(--bg-27);
    border-radius: 8px;
    padding: 20px 10px;
    text-align: center;
    margin-bottom: 10px;
    border: 1px solid var(--bg-45);
}

.risk-label {
    font-size: 12px;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.risk-value {
    font-size: 22px;
    font-weight: var(--wg-700);
    color: var(--green);
}

.con-information {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
}

.row-box {
    display: flex;
    gap: 6px;
    width: 100%;
}

.row-if {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-27);
    padding: 12px 20px;
    border-radius: 8px;
    border: 1px solid var(--bg-45);
    transition: all 0.3s ease;
    cursor: pointer;
    width: 50%;
}

.row-if:hover {
    background: var(--bg-38);
}

.row-if label {
    font-size: 12px;
    font-weight: var(--wg-600);
    color: var(--gray);
}

.value-caculate {
    font-size: 12px;
    font-weight: var(--wg-600);
    color: var(--green);
}

.container-input {
    display: flex;
    gap: 16px;
    width: 100%;
    margin-bottom: 24px;
}

.input-group {
    display: flex;
    flex-direction: column;
    width: 50%;
    gap: 8px;
}

.label-input-cc {
    font-size: 12px;
    font-weight: var(--wg-500);
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.input-wrapper-caculate {
    position: relative;
    display: inline-block;
}

.input-wrapper-caculate input {
    width: 100%;
    padding-right: 40px;
}

.input-wrapper-caculate .icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--gray-primary);
    pointer-events: none;
}

input[type="number"] {
    background: var(--bg-27);
    border: 1px solid var(--bg-45);
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 15px;
    color: var(--white);
    outline: none;
    transition: all 0.3s ease;
}

input[type="number"]:focus {
    border-color: var(--green);
    background: var(--bg-38);
}

input[type="number"]::placeholder {
    color: var(--gray-primary);
}

.toast {
    position: fixed;
    top: 20px;
    right: 30px;
    background: var(--bg-27);
    border: 1px solid var(--bg-50);
    border-radius: 10px;
    padding: 12px 20px;
    color: var(--white);
    font-size: 14px;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 1000;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.btn-caculate {
    padding: 10px 0;
}

/* ------ Popup Share ------ */
.popup-share {
    padding: 20px;
}

.container-share {
    display: flex;
    align-items: center;
    justify-content: center;
}

#canvasShare {
    border-radius: 10px;
    height: 300px;
    width: auto;
    margin: 20px 0;

    border: 1px solid rgb(71, 75, 72);
}

.wrapper-btn-share {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wraaper-row-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.box-btn-share {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 10px;
    background: var(--bg-38);
    border: 1px solid var(--bg-55);
    transition: all 0.1s ease;
    cursor: pointer;
}

.box-btn-share svg {
    fill: var(--gray-primary);
}

.box-btn-share:hover {
    background: var(--bg-55);
    border-color: var(--bg-70);
}

.box-btn-share:hover svg {
    fill: var(--white);
}

.box-btn-share:active {
    transform: translateY(1px);
}

.margin-right {
    margin-right: 10px;
}

/* ------ Popup Sop ------ */
.popup-sop {
    padding: 20px;
}

.container-sop {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    height: 330px;
    margin-top: 15px;
}

.wrapper-sop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 320px;
    height: 100%;
}

.rule-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(90deg, rgba(6, 68, 47, 0.15) 0%, rgba(38, 38, 38, 1) 100%);
    border-radius: 10px;
    padding: 10px 15px;
    width: 100%;
    border: 1px solid var(--bg-55);
    border-left: 2px solid var(--green);
    transition: all 0.2 ease;
    cursor: pointer;
}

.rule-row:hover {
    filter: brightness(1.2);
}

.rule-info {
    flex: 1;
}

.rule-label {
    font-size: 12px;
    color: var(--gray);
    font-weight: var(--wg-500);
    margin-bottom: 3px;
}

.rule-value {
    font-size: var(--sz-14);
    color: var(--green);
    font-weight: var(--wg-600);
    display: inline-block;
}

.progress-wrapper {
    flex: 1;
    margin-left: 15px;
}
        
.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.progress-label {
    font-size: 11px;
    color: var(--white);
    font-weight: var(--wg-500);
}

.progress-count {
    font-size: 11px;
    font-weight: var(--wg-600);
    color: var(--green);
}

.progress-bar-sop {
    height: 10px;
    background: var(--bg-55);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.progress-fill-sop {
    height: 100%;
    border-radius: 8px;
    transition: width 0.3s ease;
    background: linear-gradient(90deg, rgb(10, 114, 79) 0%, rgba(16, 185, 129, 1) 100%);
}

.progress-fill-sop.warning {
    background: linear-gradient(90deg, rgb(114, 90, 10) 0%, rgb(185, 140, 16) 100%);
}

.progress-fill-sop.danger {
    background: linear-gradient(90deg, rgb(114, 10, 10) 0%, rgb(185, 16, 16) 100%);
}

.info-grid {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.info-card {
    background: #334155;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    border: 1px solid #475569;
}

.info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.info-label {
    font-size: 10px;
    color: var(--gray);
    margin-bottom: 2px;
}

.info-value {
    font-size: var(--sz-12);
    font-weight: var(--wg-600);
    color: var(--green);
}
        
.info-card.active {
    border-color: var(--green-secondary);
    background: linear-gradient(155deg, rgba(20, 20, 20, 1) 0%, rgba(16, 185, 129, 0.2) 100%);
}

.info-card.active .info-value {
    color: #6ee7b7;
}

.info-card.warning {
    border-color: #c08b30;
    background: linear-gradient(155deg, rgba(20, 20, 20, 1) 0%, rgba(204, 164, 34, 0.2) 100%);
}

.info-card.warning .info-value {
    color: #fbbf24;
}

.info-card.danger {
    border-color: #c74747;
    background: linear-gradient(155deg, rgba(20, 20, 20, 1) 0%, rgba(204, 34, 60, 0.2) 100%);
}

.info-card.danger .info-value {
    color: #fca5a5;
}

/* ------ Popup Logout ------ */
.popup-edit-sop {
    width: 320px;
    padding: 24px;
    text-align: center;
}

.popup-edit-sop .popup-title {
    margin: 0 0 12px;
    font-size: 18px;
}

.popup-edit-sop .edit-rule-label {
    font-size: 14px;
    color: var(--text-secondary, #888);
    margin-bottom: 16px;
}

.popup-edit-sop .popup-actions {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-top: 20px;
}

.btn-edit-sop {
    padding: 10px 0;
    flex: 1;
}


/* ------ Popup Logout ------ */
#logoutModal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(1px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease-out;
}

#logoutModal.hidden {
    display: none;
}

/* ------ Popup Edit Dropdown ------ */
.container-edit-dropdown {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    display: none;
    flex-direction: column;
    border-radius: 15px;
    padding: 15px;
    width: auto;
    z-index: 101;
    background: var(--bg-20);
    border: var(--border-popup);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform 0.3s ease;
    z-index:10000;
}

.container-edit-dropdown h3 {
    margin-bottom: 15px;
}

.wrapper-btn-dropdown {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    gap: 10px;
}

.btn-dropdown {
    padding: 10px 20px;
}

.btn-remove {
    padding: 6px;
}

.btn-remove svg {
    pointer-events: none;
}

#editOptionsList {
    min-height: 150px;
    max-height: 150px;
    padding: 4px 15px;
    border: 1px solid var(--bg-38);
    border-radius: 8px;
    overflow: hidden;
    overflow-y: auto;
}

/* ------ Popup Account Menu ------ */
.container-popup-account {
    display: none;
    position: fixed;
    background: var(--bg-38);
    min-width: 200px;
    border-radius: 6px;
    padding: 0 5px;
    border: 1px solid var(--bg-55);
    z-index: 1000;
    overflow: hidden;
}

.line-gap {
    height: 1px;
    width: 100%;
    background: var(--bg-55);
}

.row-account {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    cursor: pointer;
    margin: 5px 0;
    transition: background 0.15s ease, color 0.15s ease, fill 0.15s ease;
}

.row-account svg {
    fill: var(--gray);
}

.row-account:hover {
    background: var(--bg-55);
}

.row-account:hover .title-menu {
    color: var(--white);
}

.row-account:hover svg {
    fill: var(--white);
}

/* ------ Popup Account ------ */
.popup-account {
    padding: 20px;
}

#closeAccount {
    position: absolute;
    top: 20px;
    right: 20px;
}

.popup-account h3 {
    margin-bottom: 8px;
}

.subtitle-account {
    font-size: var(--sz-14);
    color: var(--gray);

    margin-bottom: 25px;
}

.wrapper-account {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--bg-35);
    border-radius: 10px;
    padding: 10px;
    width: 450px;

    margin-bottom: 25px;
}

.column-account {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 4px 0;
}

.column-box-account {
    display: flex;
    align-items: center;
    gap: 6px;
}

.column-box-account img {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border: 1px solid var(--bg-60);
}

.usernmae-account {
    font-size: var(--sz-14);
    font-weight: var(--wg-700);
    color: var(--white);
}

.text-account-active {
    font-size: var(--sz-12);
    font-weight: var(--wg-600);
    color: var(--green);
}

.btn-close-account {
    padding: 6px;
}

.btn-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
    height: 37px;
    width: 37px;
}

.btn-switch {
    color: var(--white);
    background: var(--bg-45);
    border: 1px solid var(--bg-50);
    padding: 10px 24px;
}

.btn-logout:hover ,
.btn-switch:hover {
    background: var(--bg-50);
    border-color: var(--bg-60);
}

.btn-add-account {
    padding: 10px;
}

/* ------ Signout Popup ------ */
.container-logout {
    display: none;
    position: fixed;
    background: var(--bg-27);
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--bg-45);
    z-index: 1001;
}

.container-logout.show {
    display: block;
}

.signout-btn-universal {
    padding: 6px 25px;
    cursor: pointer;
}

.signout-btn-universal:hover {
    background: var(--color-baground-red);
}

.text-signout {
    font-size: var(--sz-12);
}

/* ------ Popup Monthly ------ */
.popup-monthly {
    /* display: flex; */
    flex-direction: column;
    min-height: 380px;
    min-width: 700px;
    padding: 20px;
}

.column-title-popup {
    display: flex;
    align-items: center;
    gap: 8px;
}

.maincontainer-stats {
    display: flex;
    gap: 20px;
    width: 100%;
    flex: 1;
    padding-top: 15px;
    height: 100%;
}

.leftcontainer,
.rightcontainer {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.subcontainer-trading-summary {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.subcontainer-stats {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
    padding: 10px 0;
    min-height: 0;

    border-radius: 10px;
    border: 1px solid var(--bg-45);
    background: var(--bg-27);
    padding: 10px 16px;
    margin-top: 8px;
}

.subcolumn-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
}

.text-title {
    font-size: var(--sz-14);
    color: var(--gray);
}

.value-stats {
    font-size: var(--sz-14);
}

.wr-red {
    font-weight: var(--wg-600);
    color: var(--red);
}

.wr-green {
    font-weight: var(--wg-600);
    color: var(--green);
}

.subcolumn-stats-one {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    flex: 1;
}

.balance-value-monthly {
    font-size: var(--sz-18);
    font-weight: var(--wg-700);
}

.pnl-value-monthly {
    font-size: var(--sz-14);
    color: var(--green);
}

/* ------ Block Non Dekstop ------ */
#deviceBlocker {
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.85);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    font-family: sans-serif;
    text-align: center;
}

#deviceBlocker svg {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    fill: white;
}

#deviceBlocker h1 {
    font-size: 24px;
    margin-bottom: 10px;
}

#deviceBlocker p {
    font-size: 16px;
    max-width: 400px;
    line-height: 1.5;
}