/* ============================================
   تم شب (Dark Mode) برای GMO Gold Market
   ============================================ */

/* متغیرهای تم شب */
:root {
    --dark-bg-primary: #1a1a2e;
    --dark-bg-secondary: #16213e;
    --dark-bg-card: #1e2a4a;
    --dark-bg-card-hover: #2a3a5e;
    --dark-text-primary: #e8e8e8;
    --dark-text-secondary: #b0b0b0;
    --dark-text-muted: #7a7a7a;
    --dark-border: #2a3a5e;
    --dark-shadow: rgba(0, 0, 0, 0.6);
    --dark-accent-blue: #336db1;
    --dark-accent-green: #4CAF50;
    --dark-accent-red: #ff6b6b;
    --dark-accent-yellow: #ffd93d;
    --dark-gradient-start: #1a1a2e;
    --dark-gradient-end: #16213e;
}
/* ===== ستون مخاطبین گفتگو =====*/
.chat-bubble strong {
    color: var(--dark-accent-red);
  }
  .code-badge {
    background-color: rgba(13, 71, 161, 0.7);
    color: var(--dark-text-primary);
  }
.chat-sidebar {
    background: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-bg-primary) !important;
}

.sidebar-title{
    color: #fff !important;
    border-bottom: 1px solid #000;
}

.contact-name{
    color: #fff !important;
}

.contact-item.active{
    background: var(--dark-accent-blue) !important;
}

.contact-item:hover {
    background: var(--dark-accent-blue);
}

/* ===== تغییرات اصلی Body ===== */
body {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* ===== جعبه‌های محتوا ===== */
.box-container {
    background-color: var(--dark-bg-secondary) !important;
    box-shadow: 0 2px 10px var(--dark-shadow) !important;
    border: 1px solid var(--dark-border) !important;
}

/* ===== کارت‌ها ===== */
.card2 {
    background-color: var(--dark-bg-card) !important;
    border-right-color: var(--dark-accent-blue) !important;
    color: var(--dark-text-primary) !important;
}

.card2-blink {
    animation: blinkBorderDark 0.6s ease-in-out infinite;
}

@keyframes blinkBorderDark {
    0% { border-right-color: var(--dark-accent-blue); background-color: var(--dark-bg-card); }
    50% { border-right-color: var(--dark-accent-red); background-color: #2a1a1a; }
    100% { border-right-color: var(--dark-accent-blue); background-color: var(--dark-bg-card); }
}
.card3{
    background-color: rgba(244, 67, 54, 0.15);
    color: #fff;
}
/* ===== جدول ===== */
.tbl-css-1 tr:nth-child(even),
.tbl-css-2 tr:nth-child(even),
.tbl-css-3 tr:nth-child(even) {
    background-color: var(--dark-bg-card) !important;
}

.tbl-css-1 tr:nth-child(odd),
.tbl-css-2 tr:nth-child(odd),
.tbl-css-3 tr:nth-child(odd) {
    background-color: var(--dark-bg-secondary) !important;
}

.tbl-css-1 td,
.tbl-css-1 th,
.tbl-css-2 td,
.tbl-css-2 th,
.tbl-css-3 td,
.tbl-css-3 th {
    border-bottom: 1px solid var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

.tbl-css-1 tr:first-child,
.tbl-css-2 caption,
.tbl-css-3 caption {
    background-color: var(--dark-bg-card-hover) !important;
    color: #fff !important;
}

.tbl-css-1 tr:hover,
.tbl-css-2 tr:hover,
.tbl-css-3 tr:hover {
    color: var(--dark-accent-blue) !important;
    background-color: var(--dark-bg-card-hover) !important;
}

/* ===== برچسب‌های قیمت ===== */
.txt-container {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

.lblnum {
    color: var(--dark-text-primary) !important;
}

/* ===== وضعیت‌های قیمت ===== */
.gColor-transition {
    background-color: var(--dark-bg-card) !important;
    color: var(--dark-accent-green) !important;
}

.rColor-transition {
    background-color: var(--dark-bg-card) !important;
    color: var(--dark-accent-red) !important;
}

@keyframes GcolorCycle {
    0% { background-color: var(--dark-bg-card); color: var(--dark-text-primary); }
    1.67% { background-color: #1a3a1a; color: var(--dark-accent-green); }
    100% { background-color: var(--dark-bg-card); color: var(--dark-text-primary); }
}

@keyframes RcolorCycle {
    0% { background-color: var(--dark-bg-card); color: var(--dark-text-primary); }
    1.67% { background-color: #3a1a1a; color: var(--dark-accent-red); }
    100% { background-color: var(--dark-bg-card); color: var(--dark-text-primary); }
}

/* ===== نمودار پیوت ===== */
#ppchart {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-accent-blue) !important;
}

#ppchart canvas {
    background-color: var(--dark-bg-secondary) !important;
}

/* ===== کانوس نمودار سیگنال ===== */
#signalchart {
    background-color: var(--dark-bg-secondary) !important;
}

/* ===== وضعیت‌های بازار ===== */
.status-bull {
    color: var(--dark-accent-green) !important;
    border-right-color: var(--dark-accent-green) !important;
    background-color: rgba(76, 175, 80, 0.15) !important;
}

.status-bear {
    color: var(--dark-accent-red) !important;
    border-right-color: var(--dark-accent-red) !important;
    background-color: rgba(244, 67, 54, 0.15) !important;
}

.status-neutral {
    color: var(--dark-text-secondary) !important;
    border-right-color: var(--dark-text-muted) !important;
    background-color: rgba(117, 117, 117, 0.1) !important;
}

/* ===== نوار درصد خریدار/فروشنده ===== */
.bpbull {
    background-color: rgba(76, 175, 80, 0.12) !important;
    border-color: var(--dark-accent-green) !important;
}

.bpbear {
    background-color: rgba(244, 67, 54, 0.2) !important;
    border-color: var(--dark-accent-red) !important;
}

.blbull {
    color: var(--dark-accent-green) !important;
}

.blbear {
    color: var(--dark-accent-red) !important;
}

/* ===== نوار وضعیت ===== */
.status-bar {
    color: var(--dark-text-secondary) !important;
}

.status-item {
    color: var(--dark-text-secondary) !important;
}

/* ===== مودال تحلیل ===== */
.modal-content {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

.modal-body {
    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
    color: var(--dark-text-primary) !important;
}

#analysis-text {
    color: var(--dark-text-primary) !important;
}

.close-button {
    color: var(--dark-text-secondary) !important;
}

.close-button:hover {
    color: var(--dark-text-primary) !important;
}

/* ===== جعبه پیام ===== */
#smsbox {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border) !important;
}

#smsboxtext {
    color: var(--dark-text-primary) !important;
}

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

.closebtn:hover {
    color: var(--dark-text-primary) !important;
}

/* ===== جعبه انتظار سیگنال ===== */
#waitingsignal {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

#waitingsignal_lbl {
    color: var(--dark-text-primary) !important;
}

._vbar {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* ===== دکمه‌ها ===== */
.nav-button.back {
    background-color: #2a2a3a !important;
    color: var(--dark-text-primary) !important;
    border-left-color: #3a3a4a !important;
}

.nav-button.back:hover {
    background-color: #3a3a4a !important;
}

.nav-button.forward {
    background-color: var(--dark-accent-blue) !important;
    color: #fff !important;
    border-right-color: #2a6aaa !important;
}

.nav-button.forward:hover {
    background-color: #2a7add !important;
}

/* ===== سوئیچ‌ها ===== */
.switch .slider {
    background-color: #3a3a4a !important;
}

.switch input:checked + .slider {
    background-color: var(--dark-accent-blue) !important;
}

.switch-lable {
    color: var(--dark-text-secondary) !important;
}

.switch-sub-lable {
    color: var(--dark-text-muted) !important;
}

/* ===== وضعیت اتصال ===== */
#connectionText {
    color: var(--dark-text-secondary) !important;
}

.status-dot.offline {
    background: var(--dark-accent-red) !important;
}

/* ===== تیترها ===== */
.caption {
    color: var(--dark-text-primary) !important;
}



    .chat-bubble {
        background-color: var(--dark-bg-card) !important;
        color: var(--dark-text-primary) !important;
        border:1px solid var(--dark-bg-primary) !important
    }
    
    .message-row.received .chat-bubble {
        background-color: var(--dark-bg-card) !important;
        color: var(--dark-text-primary) !important;
    }
    
    .message-row.sent .chat-bubble {
        background-color: var(--dark-accent-blue) !important;
        color: #fff !important;
    }


/* ===== اسکرول بار ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

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

::-webkit-scrollbar-thumb:hover {
    background: var(--dark-accent-blue);
}

/* ===== اگر فریم OD18 دارید ===== */
#OD18 {
    background-color: var(--dark-bg-secondary) !important;
}

/* ===== کادرهای ورودی ===== */
input, select, textarea {
    background-color: var(--dark-bg-card) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border) !important;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--dark-accent-blue) !important;
    outline: none !important;
}

/* ===== برچسب قیمت‌ها ===== */
.lblPer {
    color: var(--dark-text-secondary) !important;
}

/* ===== عددهای پیوت ===== */
.ppsize {
    color: var(--dark-text-muted) !important;
}

/* ===== وضعیت دات ===== */
.status-dot {
    background: var(--dark-text-muted) !important;
}

.status-dot.online {
    background: var(--dark-accent-green) !important;
    box-shadow: 0 0 12px rgba(76, 175, 80, 0.3) !important;
}

.status-dot.updating {
    background: var(--dark-accent-yellow) !important;
}