:root {
  /* Warna Utama */
  --primary-color: #3a7bd5;
  --primary-light: #45aaf2;
  --primary-gradient: linear-gradient(135deg, #3a7bd5, #2b86c5);
  --secondary-color: #5e72e4;
  --info-color: #11cdef;
  --success-color: #2dce89;
  --warning-color: #fb6340;
  --danger-color: #f5365c;
  
  /* Warna Background */
  --bg-dark: #151b2e;  /* Lebih gelap dan kontras */
  --bg-darker: #0d1220; /* Lebih gelap dan kontras */
  --bg-card: rgba(31, 36, 55, 0.7); /* Sekarang transparan untuk efek glass */
  --bg-card-header: rgba(38, 44, 67, 0.8); /* Lebih transparan untuk efek glass */
  --bg-sidebar: rgba(31, 36, 55, 0.7); /* Transparan untuk efek glass */
  --bg-input: rgba(42, 48, 66, 0.8); /* Lebih transparan */
  --bg-glass: rgba(31, 36, 55, 0.6); /* Warna dasar untuk glassmorphism */
  --blur-effect: blur(10px);
  
  /* Warna Teks */
  --text-primary: #e9ecef;
  --text-secondary: #adb5bd;
  --text-muted: #707a8a;
  --text-light: #ced4da;
  
  /* Warna Border */
  --border-color: rgba(255, 255, 255, 0.1); /* Border lebih halus dan transparan */
  --border-light: rgba(255, 255, 255, 0.15);
  
  /* Shadow dan Efek */
  --shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, 0.15);
  --shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.25);
  --transition: all 0.3s ease;
  --card-radius: 0.75rem;
  --btn-radius: 0.5rem;
}

/* Style Dasar */
body {
  background-color: var(--bg-darker);
  color: var(--text-primary);
  font-family: 'Inter', 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
  transition: var(--transition);
  background-image: 
    radial-gradient(circle at top right, rgba(94, 114, 228, 0.15), transparent 60%),
    radial-gradient(circle at bottom left, rgba(45, 206, 137, 0.1), transparent 60%),
    linear-gradient(to bottom right, rgba(17, 205, 239, 0.05), rgba(245, 54, 92, 0.05));
  background-attachment: fixed;
  background-size: 200% 200%, 200% 200%, 100% 100%;
  position: relative;
}

/* Overlay pattern untuk texture */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: -1;
  opacity: 0.4;
}

/* Layout App */
.app-sidebar {
  background-color: var(--bg-glass);
  backdrop-filter: var(--blur-effect);
  -webkit-backdrop-filter: var(--blur-effect);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.app-header {
  background-color: var(--bg-glass);
  backdrop-filter: var(--blur-effect);
  -webkit-backdrop-filter: var(--blur-effect);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.app-content {
  padding: 20px;
  background-color: transparent;
  margin-top: 64px; /* Perbesar jarak dari navbar ke panel utama */
}

/* Style Card */
.tile, .trading-card, .card {
  border-radius: 10px !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08) !important;
  background: var(--bg-card, #23272f) !important;
  margin-bottom: 0.7rem !important;
  padding: 0.45rem 0.7rem !important;
  border: 1px solid var(--border-color, #2c2f36) !important;
  transition: box-shadow 0.2s, transform 0.2s;
}

.tile:hover, .trading-card:hover, .card:hover {
  box-shadow: 0 6px 24px rgba(58,123,213,0.18) !important;
  transform: translateY(-2px) scale(1.01);
}

.tile-title {
  padding: 0;
  margin: 0;
}

.tile-body, .trading-card-body, .card-body {
  padding: 0.6rem 0.5rem !important;
}

.tile {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.trading-card {
  margin-bottom: 0.5rem !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  background: var(--bg-card, #23272f) !important;
  border: 1px solid var(--border-color, #2c2f36) !important;
}

.trading-card-body {
  padding: 0.5rem 0.4rem !important;
}

.card {
  border-radius: 10px !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08) !important;
  background: var(--bg-card, #23272f) !important;
  border: 1px solid var(--border-color, #2c2f36) !important;
}

.card-body {
  padding: 0.6rem 0.5rem !important;
}

.tile-title .btn.btn-primary.btn-block {
  background: var(--bg-darker);
  border: 1px solid var(--border-light);
  border-radius: 0;
  color: var(--text-primary);
  font-weight: 600;
  padding: 0.75rem 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: none;
  transition: var(--transition);
}

.tile-title .btn.btn-primary.btn-block:hover {
  background: rgba(13, 18, 32, 0.9);
  border-color: var(--primary-color);
}

/* Panel titles styling - dark mode */
.btn.btn-primary.btn-block {
  background: var(--bg-darker);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: none;
  transition: var(--transition);
}

.btn.btn-primary.btn-block:hover {
  background: rgba(13, 18, 32, 0.9);
  border-color: var(--primary-color);
}

/* Tombol */
.btn {
  border-radius: var(--btn-radius);
  font-weight: 500;
  padding: 0.5rem 1rem;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
  border: none;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.btn-primary {
  background: var(--primary-gradient);
  border: none;
}

.btn-secondary {
  background-color: var(--bg-card-header);
  color: var(--text-light);
  border: 1px solid var(--border-light);
}

.btn-success {
  background: linear-gradient(135deg, var(--success-color), #26af74);
}

.btn-danger {
  background: linear-gradient(135deg, var(--danger-color), #d92550);
}

.btn-info {
  background: linear-gradient(135deg, var(--info-color), #0da5c4);
}

.btn-block {
  width: 100%;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

/* Form Controls */
.form-control {
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--btn-radius);
  color: var(--text-primary);
  padding: 0.6rem 0.75rem;
  transition: var(--transition);
}

.form-control:focus {
  background-color: var(--bg-input);
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(58, 123, 213, 0.25);
  color: var(--text-primary);
}

.form-control-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

/* Styling Select */
select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem;
  padding-right: 2rem;
  appearance: none;
}

/* Navigasi Tab */
.nav-tabs {
  border-bottom: 1px solid var(--border-color);
}

.nav-tabs .nav-link {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  position: relative;
  transition: var(--transition);
  padding: 0.75rem 1rem;
  border-radius: 0;
}

.nav-tabs .nav-link:hover {
  color: var(--text-primary);
  border: none;
}

.nav-tabs .nav-link.active {
  background: transparent;
  border: none;
  color: var(--primary-light);
}

.nav-tabs .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--primary-gradient);
}

/* Konten Tab */
.tab-content {
  padding: 1rem 0;
}

.tab-pane {
  background: transparent;
}

/* Table */
.table {
  color: var(--text-primary);
}

.table thead th {
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}

.table td, .table th {
  padding: 0.75rem;
  border-top: 1px solid var(--border-color);
}

.table-hover tbody tr:hover {
  background-color: rgba(255,255,255,0.03);
}

/* Statistik Panel Akun */
.btn-sm.btn-block {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}

.btn-sm.btn-block span {
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.btn-sm.btn-block b {
  display: block;
  font-size: 0.75rem;
  opacity: 0.8;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Text area */
textarea.form-control {
  border-radius: var(--card-radius);
  resize: none;
}

/* Panel Advanced */
.custom-switch .custom-control-label::before {
  background-color: var(--bg-input);
  border-color: var(--border-color);
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* Style info-box dalam tema gelap */
.info-box {
  background: linear-gradient(145deg, var(--bg-card-header), var(--bg-card)); /* Gradasi halus */
  border: 1px solid var(--border-light); /* Border lebih terang sedikit */
  border-radius: var(--btn-radius);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm); /* Tambahkan shadow halus */
  min-height: 90px;
  padding: 0.75rem 1rem; /* Sesuaikan padding */
  display: flex; /* Pastikan flex */
  align-items: center; /* Pusatkan konten secara vertikal */
  transition: var(--transition);
}

.info-box:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.info-box .info-box-content {
  padding: 0;
  flex-grow: 1; /* Biarkan konten mengisi ruang */
}

.info-box .info-box-text {
  color: var(--text-secondary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex; /* Gunakan flex untuk ikon */
  align-items: center; /* Sejajarkan ikon dan teks */
  margin-bottom: 0.25rem; /* Jarak antara teks dan angka */
}

/* Tambahkan style untuk ikon di info-box */
.info-box .info-box-text i {
    margin-right: 8px; /* Jarak ikon dari teks */
    font-size: 0.9rem; /* Ukuran ikon */
    color: var(--primary-light); /* Warna ikon */
    width: 16px; /* Lebar tetap untuk ikon */
    text-align: center;
}

.info-box .info-box-number {
  color: var(--primary-light); /* Gunakan warna primer terang untuk angka */
  font-size: 1.5rem; /* Sedikit perbesar angka */
  font-weight: 600;
  line-height: 1.2;
}

.card {
  background-color: var(--bg-card);
  border: none;
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
}

.card-header {
  background-color: var(--bg-card-header);
  border-bottom: 1px solid var(--border-color);
  padding: 0.75rem 1rem; /* Adjust padding */
  color: var(--text-light); /* Lighter text for header */
}

/* Style card header di dalam tab */
.tab-content .card-header {
    padding: 0.75rem 1rem; /* Padding konsisten */
}

.tab-content .card-header h6 {
    font-size: 0.9rem; /* Ukuran font header card */
    font-weight: 500;
    color: var(--text-primary);
}

.tab-content .card-header i {
    color: var(--primary-light); /* Warna ikon di header card */
}

/* Style card body di dalam tab */
.tab-content .card-body {
    padding: 1rem; /* Padding untuk isi card */
}

.tab-content .card-body .form-group label {
    color: var(--text-secondary); /* Warna label form */
    font-size: 0.8rem; /* Ukuran font label */
}

/* Style alert di dalam card */
.tab-content .card-body .alert {
    background-color: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.tab-content .card-body .alert-info {
    border-left: 3px solid var(--info-color); /* Aksen warna info */
}

/* Responsive grid: kolom jadi 1 di mobile */
@media (max-width: 991.98px) {
  .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 4px;
    padding-right: 4px;
  }
  .tile, .trading-card, .card {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
}

/* Panel/card lebih kompak di mobile */
@media (max-width: 767.98px) {
  .tile, .trading-card, .card {
    padding: 0.25rem 0.1rem !important;
    margin-bottom: 0.4rem !important;
    min-height: 120px;
  }
  .tile-body, .trading-card-body, .card-body {
    padding: 0.25rem 0.1rem !important;
  }
  .tile {
    min-height: 120px;
  }
  .tile-title, .card-title {
    font-size: 1rem !important;
    padding: 0.3rem 0.5rem !important;
  }
  .btn, .btn-sm, .btn-block {
    font-size: 0.85rem !important;
    padding: 0.3rem 0.7rem !important;
  }
  .form-control, .form-control-sm {
    font-size: 0.85rem !important;
    padding: 0.2rem 0.4rem !important;
  }
  .stat-grid {
    grid-template-columns: 1fr !important;
    gap: 6px;
  }
  .indicator-pill {
    flex-direction: row;
    align-items: center;
    padding: 4px 2px;
    font-size: 0.9rem;
  }
  .indicator-pill .label {
    margin-bottom: 0;
    margin-right: 6px;
  }
  .mini-chart {
    display: none;
  }
}

/* Table responsive: scroll horizontal di mobile */
@media (max-width: 767.98px) {
  .table-responsive, .box-body.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .table, .result-table, .dark-theme-table {
    min-width: 600px;
    font-size: 0.8rem;
  }
}

/* Modal dan alert padding lebih kecil di mobile */
@media (max-width: 576px) {
  .modal-content, .glassmorphism {
    padding: 0.5rem !important;
  }
  .modal-header, .modal-footer {
    padding: 0.5rem 0.7rem !important;
  }
  .alert, .alert-info {
    padding: 0.5rem 0.7rem !important;
    font-size: 0.9rem;
  }
}

/* Panel grid spacing di mobile */
@media (max-width: 576px) {
  .row {
    margin-left: -2px;
    margin-right: -2px;
  }
  .row > [class*="col-"] {
    padding-left: 2px;
    padding-right: 2px;
  }
}

/* Responsif Mobile */
@media (max-width: 992px) {
  .app-content {
    padding: 10px;
    margin-top: 36px; /* Jarak lebih kecil di mobile/tablet */
  }
  
  .col-md-12, .col-lg-12 {
    padding-left: 5px;
    padding-right: 5px;
  }
  
  .tile {
    margin-bottom: 10px;
  }
  
  .tile-body {
    padding: 0.75rem;
  }
  
  .form-group {
    margin-bottom: 0.5rem;
  }
}

@media (min-width: 992px) {
  .row > .col-lg-8, .row > .col-lg-4, .row > .col-md-7, .row > .col-md-5 {
    display: flex;
    flex-direction: column;
  }
  .row > .col-lg-8 > .tile,
  .row > .col-lg-4 > .tile,
  .row > .col-md-7 > .tile,
  .row > .col-md-5 > .tile {
    flex: 1 1 100%;
    min-height: 260px;
  }
}

/* Perbaikan untuk panel yang terlalu panjang */
.col-lg-3 .tile {
  height: auto !important;
  margin-bottom: 8px;
}

.col-lg-3 .bg-dark {
  padding: 5px !important;
  min-height: auto !important;
}

.col-lg-3 .bg-dark button {
  height: 40px !important;
  min-height: 40px !important;
}

.col-lg-3 .bg-dark.p-11, 
.col-lg-3 .bg-dark.p-10 {
  min-height: 40px !important;
  padding: 3px !important;
}

/* Khusus untuk Ponsel */
@media (max-width: 576px) {
  .app-header .app-nav__item {
    padding: 0 10px;
  }
  
  .tabs .nav-link {
    padding: 0.5rem;
  }
  
  .tile-body {
    padding: 0.5rem;
  }
  
  .info-box-number {
    font-size: 1.25rem;
  }
  
  .hidden-xs {
    display: none !important;
  }
}

/* Scrollbar Gelap */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-darker);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Styling untuk Dark Theme Table Result Profit */
.dark-theme-table {
  background-color: var(--bg-card);
  color: var(--text-primary);
  border-collapse: separate;
  border-spacing: 0;
}

.dark-theme-table thead th {
  background-color: var(--bg-card-header);
  color: var(--text-light);
  border-color: var(--border-color);
  border-bottom: 2px solid var(--border-light);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  padding: 0.75rem;
  position: sticky;
  top: 0;
  z-index: 10;
}

.dark-theme-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: var(--transition);
}

.dark-theme-table tbody tr:hover {
  background-color: rgba(255,255,255,0.05);
}

.dark-theme-table td {
  border-color: var(--border-color);
  padding: 0.6rem 0.75rem;
  vertical-align: middle;
}

/* Status badges untuk profit/loss - DIPERBAIKI */
.badge-profit {
  background: linear-gradient(135deg, rgba(45, 206, 137, 0.8), rgba(45, 206, 137, 0.6));
  color: #fff;
  font-weight: 600;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  display: inline-block;
  min-width: 60px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(45, 206, 137, 0.3);
}

.badge-loss {
  background: linear-gradient(135deg, rgba(245, 54, 92, 0.8), rgba(245, 54, 92, 0.6));
  color: #fff;
  font-weight: 600;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  display: inline-block;
  min-width: 60px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(245, 54, 92, 0.3);
}

.badge-profit::before {
  content: "\f062  "; /* fa-arrow-up */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 4px;
}
.badge-loss::before {
  content: "\f063  "; /* fa-arrow-down */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 4px;
}

/* Values untuk profit/loss - LEBIH HALUS */
.value-profit {
  color: var(--success-color);
  font-weight: 500;
}

.value-loss {
  color: var(--danger-color);
  font-weight: 500;
}

/* Buang class text-profit and text-loss yang mempengaruhi baris */
.text-profit, .text-loss {
  /* Hapus styling untuk mencegah warna memanjang pada baris */
}

/* Status indicator untuk baris */
.trade-row-profit td:last-child {
  border-right: 3px solid rgba(45, 206, 137, 0.4);
}

.trade-row-loss td:last-child {
  border-right: 3px solid rgba(245, 54, 92, 0.4);
}

/* Animasi untuk hasil baru */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

/* Custom Components */
.input-group .input-group-addon {
  background-color: var(--bg-card-header);
  border: 1px solid var(--border-color);
  border-right: none;
  border-radius: var(--btn-radius) 0 0 var(--btn-radius);
  padding: 0.25rem 0.75rem;
  display: flex;
  align-items: center;
}

.input-group .form-control {
  border-radius: 0 var(--btn-radius) var(--btn-radius) 0;
}

.input-group .input-group-btn .btn {
  border-radius: 0 var(--btn-radius) var(--btn-radius) 0;
  margin-left: -1px;
}

/* Sidebar Menu Items */
.app-menu__item {
  border-left: 3px solid transparent;
  transition: var(--transition);
}

.app-menu__item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-left-color: var(--primary-light);
}

.app-menu__item.active {
  background-color: rgba(255, 255, 255, 0.05);
  border-left-color: var(--primary-color);
}

.app-menu__icon {
  color: var(--text-secondary);
}

/* Chart dan Panel Grafik */
#chartContainer, #lihatchart {
  background-color: var(--bg-card);
  border-radius: var(--card-radius);
  overflow: hidden;
}

/* Penyesuaian Warna untuk Status Panel */
.bg-dark {
  background-color: var(--bg-card-header) !important;
}

.bg-dark .text-white {
  color: var(--text-secondary) !important;
}

/* Footer Styling */
.footer {
  padding: 1rem 0;
  color: var(--text-secondary);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background-color: transparent;
}

.footer a {
  color: var(--primary-light);
  transition: var(--transition);
}

.footer a:hover {
  color: var(--primary-color);
  text-decoration: none;
}

/* Progress Bar Styling */
.progress {
  overflow: hidden; /* Ensure inner bar respects border-radius */
  margin-bottom: 3px; /* Space below each bar */
}

.progress-bar {
  transition: width 0.6s ease; /* Smooth transition for width changes */
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}

#tp-progress {
  background-color: var(--success-color) !important; /* Override Bootstrap */
}

#sl-progress {
  background-color: var(--danger-color) !important; /* Override Bootstrap */
}

/* Sparkline Styling */
.sparkline {
  margin-left: 5px; /* Add some space next to the number */
  vertical-align: middle; /* Align vertically with the text */
}

/* Style Peity SVG elements (optional, Peity usually handles colors via options) */
.sparkline svg {
  /* You might adjust stroke width or other SVG attributes here if needed */
}

/* Change text color for specific buttons */
#dis_balance + br + b, /* Target <b> after <br> following #dis_balance */
#dis_signal + br + b { /* Target <b> after <br> following #dis_signal */
  color: var(--text-primary) !important; /* Use primary text color (light) */
}

/* Style Glassmorphism untuk Modal */
.modal-content.glassmorphism {
  background-color: var(--bg-glass) !important;
  backdrop-filter: var(--blur-effect);
  -webkit-backdrop-filter: var(--blur-effect);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text-primary);
}

.modal-header.glassmorphism {
  background-color: rgba(31, 36, 55, 0.8) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.modal-footer.glassmorphism {
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  background-color: rgba(31, 36, 55, 0.5) !important;
}

/* Custom SweetAlert Glassmorphism */
.sweet-alert.glassmorphism {
  background-color: var(--bg-glass) !important;
  backdrop-filter: var(--blur-effect);
  -webkit-backdrop-filter: var(--blur-effect);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow);
  border-radius: var(--card-radius);
}

.sweet-alert.glassmorphism h2,
.sweet-alert.glassmorphism p {
  color: var(--text-primary) !important;
}

.sweet-alert.glassmorphism .sa-icon.sa-success .sa-fix,
.sweet-alert.glassmorphism .sa-icon.sa-success::after,
.sweet-alert.glassmorphism .sa-icon.sa-success::before {
  background-color: transparent !important;
}

.sweet-alert.glassmorphism .sa-button-container .confirm {
  background-color: var(--primary-color) !important;
}

/* Glassmorphism untuk modal box dalam SweetAlert */
.glassmorphism .box {
  background-color: transparent !important;
  box-shadow: none !important;
}

.glassmorphism .box-header {
  background-color: rgba(31, 36, 55, 0.8) !important;
  color: var(--text-primary) !important;
  border-radius: var(--btn-radius) var(--btn-radius) 0 0;
}

.glassmorphism .box-body {
  background-color: rgba(31, 36, 55, 0.5) !important;
  color: var(--text-primary) !important;
  padding: 15px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glassmorphism .box-widget {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--card-radius);
  overflow: hidden;
  background-color: transparent !important;
}

.glassmorphism .overlay {
  background-color: transparent !important;
}

/* KHUSUS UNTUK RESULT TABLE - PERBAIKAN URGENT */
.result-table {
  color: var(--text-primary) !important;
  background-color: var(--bg-card) !important;
  border-collapse: separate;
  border-spacing: 0;
}

.result-table tbody tr {
  background-color: var(--bg-card) !important; /* PENTING: Override background apapun */
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-color);
}

.result-table tbody tr:nth-child(odd) {
  background-color: rgba(31, 36, 55, 0.7) !important; /* Sedikit lebih terang untuk baris ganjil */
}

.result-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.result-table tbody td {
  border-top: none !important; /* Hapus border default bootstrap */
  border-bottom: 1px solid var(--border-color);
  padding: 0.5rem 0.75rem;
}

/* Label Status dengan Badge */
.result-status-profit {
  background-color: rgba(45, 206, 137, 0.2);
  color: var(--success-color);
  font-weight: 600;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  display: inline-block;
  min-width: 60px;
  text-align: center;
  border: 1px solid rgba(45, 206, 137, 0.3);
}

.result-status-loss {
  background-color: rgba(245, 54, 92, 0.2);
  color: var(--danger-color);
  font-weight: 600;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  display: inline-block;
  min-width: 60px;
  text-align: center;
  border: 1px solid rgba(245, 54, 92, 0.3);
}

/* Nilai Buy/Sell dengan warna */
.result-value-profit {
  color: var(--success-color);
  font-weight: 500;
}

.result-value-loss {
  color: var(--danger-color);
  font-weight: 500;
}

/* FORCE STYLE - UNTUK MEMASTIKAN TIDAK ADA OVERRIDE */
.result-table tr.profit-row td,
.result-table tr.loss-row td {
  background-color: transparent !important;
  color: var(--text-primary) !important;
}

/* FORCE REMOVE ANY PREVIOUS STYLING */
.badge-profit, .badge-loss, .text-profit, .text-loss, 
.value-profit, .value-loss, .trade-row-profit, .trade-row-loss {
  /* Reset all previous styling */
  all: initial;
  font-family: inherit;
}

/* IMPORTANT STYLES TO RETAIN TEXT COLOR */
.result-table td, .result-table th {
  color: var(--text-primary) !important; 
}

@media (max-width: 767.98px) {
  .d-flex.justify-content-center.align-items-center.mb-3 > .btn {
    width: 100% !important;
    margin-bottom: 0.5rem;
  }
  .d-flex.justify-content-center.align-items-center.mb-3 {
    flex-direction: column !important;
    gap: 0 !important;
  }
}

/* Highlight indikator aktif */
.trading-card.active-indicator,
.trading-card.active-indicator:focus,
.trading-card.active-indicator:hover {
  border: 2px solid var(--primary-color) !important;
  box-shadow: 0 0 0 2px rgba(58,123,213,0.15) !important;
  position: relative;
}

/* Badge "Active" indikator */
.trading-card.active-indicator::after {
  content: "Active";
  position: absolute;
  top: 8px;
  right: 12px;
  background: var(--primary-gradient);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(58,123,213,0.12);
  z-index: 2;
  letter-spacing: 0.5px;
  pointer-events: none;
}

/* Glassmorphism & transparan untuk semua panel */
.theme-bg-card,
.glassmorphism,
.trading-card.theme-bg-card,
.trading-card.glassmorphism,
.tile.theme-bg-card,
.tile.glassmorphism,
.card.theme-bg-card,
.card.glassmorphism {
  background: var(--bg-glass) !important;
  backdrop-filter: var(--blur-effect) !important;
  -webkit-backdrop-filter: var(--blur-effect) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Hapus background solid pada .trading-card dan .tile jika ada .theme-bg-card atau .glassmorphism */
.trading-card.theme-bg-card,
.trading-card.glassmorphism,
.tile.theme-bg-card,
.tile.glassmorphism {
  background: var(--bg-glass) !important;
}

/* Baris Loss Level - Spot Analyzer - Profit Level */
.level-container {
  background: var(--bg-card-header) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  border: 1px solid var(--border-color) !important;
  margin-bottom: 0 !important;
  padding: 0.15rem !important;
  min-height: 2rem !important;
}
.level-container i,
.level-container span,
.level-container small {
  font-size: 0.95rem !important;
}
.level-container small {
  font-size: 0.65rem !important;
}
.level-container .progress {
  height: 5px !important;
  margin-bottom: 0 !important;
}
.spot-analyze-container {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  min-width: 120px !important;
  max-width: 180px !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.spot-value {
  font-size: 1.7rem !important; /* lebih kecil, tetap tebal */
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  text-align: center;
  margin: 0 auto;
  padding: 0 4px;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: color 0.2s, text-shadow 0.2s;
  animation: spotPulse 1.1s cubic-bezier(.4,0,.2,1) infinite;
  line-height: 1.1;
  color: #e9ecef !important; /* selalu terang */
}

/* Warna spot naik/turun lebih terang dan tidak pernah hitam */
.spot-up {
  color: #3fff8c !important;
  text-shadow: 0 0 10px #3fff8c, 0 0 2px #1f7d4c;
}
.spot-down {
  color: #ff4d6d !important;
  text-shadow: 0 0 10px #ff4d6d, 0 0 2px #7d1f2a;
}

/* Animasi pulse lebih jelas */
@keyframes spotPulse {
  0% { text-shadow: 0 0 0 rgba(0,0,0,0.2);}
  50% { text-shadow: 0 0 24px rgba(58,123,213,0.25);}
  100% { text-shadow: 0 0 0 rgba(0,0,0,0.2);}
}

/* Garis dan glow tetap center dan proporsional */
.spot-analyzer-line {
  width: 80%;
  height: 2px !important;
  margin: 6px auto 0 auto !important;
  background: linear-gradient(90deg, var(--danger-color), var(--warning-color), var(--success-color)) !important;
  border-radius: 2px;
}
.spot-glow {
  height: 8px !important;
  width: 28px !important;
  background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
  border-radius: 4px !important;
  margin: 4px auto 0 auto !important;
  opacity: 0.8;
  filter: blur(2px);
}

/* Responsive: tetap center dan proporsional */
@media (max-width: 767.98px) {
  .spot-analyze-container {
    min-width: 80px !important;
    max-width: 120px !important;
    padding: 0 !important;
  }
  .spot-value {
    font-size: 1.05rem !important;
    padding: 0 1px;
  }
  .spot-analyzer-line {
    width: 90%;
  }
  .spot-glow {
    width: 16px !important;
    height: 5px !important;
  }
}

/* Tombol Start, Reset, Mute sejajar dan dark */
.button-bar-dark {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0 !important;
  margin-bottom: 18px !important;
  width: 100%;
}

#startStopButton {
  margin-right: 18px !important;
}

#resetButton {
  margin-right: 32px !important;
}

#mute-btn {
  margin-left: auto !important;
  /* agar mute selalu di kanan */
}

/* Responsive: tombol tetap proporsional di mobile */
@media (max-width: 767.98px) {
  .button-bar-dark {
    gap: 0 !important;
    margin-bottom: 10px !important;
  }
  #startStopButton {
    margin-right: 6px !important;
  }
  #resetButton {
    margin-right: 16px !important;
  }
  #mute-btn {
    min-width: 32px;
    min-height: 32px;
    font-size: 1rem;
    margin-left: auto !important;
  }
}

/* Log Panel Styling */
#log-panel {
  background: rgba(31,36,55,0.7);
  border-radius: 10px;
  font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
  font-size: 12px;
  color: #e9ecef;
  min-height: 380px;
  max-height: 400px;
  overflow-y: auto;
  padding: 10px 8px 10px 12px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
  transition: background 0.3s;
}

/* Log Entry */
.log-entry {
  display: flex;
  align-items: flex-start;
  margin-bottom: 4px;
  opacity: 0.96;
  border-radius: 6px;
  padding: 4px 8px 4px 6px;
  background: rgba(255,255,255,0.02);
  animation: logFadeIn 0.5s;
  transition: background 0.2s;
  word-break: break-word;
}
.log-entry:last-child {
  margin-bottom: 0;
}
@keyframes logFadeIn {
  from { opacity: 0; transform: translateY(12px);}
  to { opacity: 0.96; transform: translateY(0);}
}

/* Log Type Badges */
.log-badge {
  display: inline-block;
  min-width: 48px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 8px;
  padding: 2px 8px;
  margin-right: 8px;
  text-align: center;
  letter-spacing: 0.5px;
  opacity: 0.85;
}
.log-info { background: #3a7bd5; color: #fff; }
.log-win { background: #2dce89; color: #fff; }
.log-loss { background: #f5365c; color: #fff; }
.log-signal { background: #11cdef; color: #fff; }
.log-error { background: #fb6340; color: #fff; }
.log-warning { background: #f1c40f; color: #222; }
.log-system { background: #adb5bd; color: #222; }

/* Log timestamp */
.log-timestamp {
  color: #bbb;
  font-size: 10px;
  margin-right: 8px;
  min-width: 60px;
  opacity: 0.7;
  font-family: inherit;
}

/* Log panel buttons */
#copy-log-btn, #download-log-btn {
  margin-left: 4px;
  margin-bottom: 2px;
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 6px;
  opacity: 0.85;
  transition: background 0.2s;
}
#copy-log-btn:hover, #download-log-btn:hover {
  opacity: 1;
}

/* Responsive log panel */
@media (max-width: 767.98px) {
  #log-panel {
    font-size: 11px;
    min-height: 220px;
    max-height: 240px;
    padding: 6px 3px 6px 6px;
  }
  .log-entry { padding: 3px 4px 3px 4px; }
  .log-timestamp { min-width: 40px; font-size: 9px; }
  #copy-log-btn, #download-log-btn { font-size: 11px; padding: 2px 6px; }
}