/* ==========================================================================
   PTKT - Custom Styles for STOCK36 PRO
   ========================================================================== */

/* Custom Scrollbar cho Dark Mode */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #151924; 
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #363C4E; 
    border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #4B5563; 
}

/* =====================
   LOGO - Đồng bộ với style.css của các trang khác
   ===================== */
.ptkt-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.ptkt-logo-icon {
    font-size: 26px;
    background: linear-gradient(135deg, #00e5ff, #00e676);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 8px rgba(0, 230, 118, 0.4));
    line-height: 1;
}

.ptkt-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.ptkt-logo-text span {
    font-size: 16px;
    font-weight: 800;
    color: #e2e8f0;
    letter-spacing: 0.3px;
}

.ptkt-logo-text strong {
    color: #00e676;
    font-weight: 900;
    text-shadow: 0 0 8px rgba(0, 230, 118, 0.3);
}

.ptkt-logo-text small {
    font-size: 11px;
    color: #64748b;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 500;
    /* override Tailwind's text-fill */
    -webkit-text-fill-color: #64748b;
}

/* Light theme: logo text đậm hơn */
body.light-theme .ptkt-logo-text span { color: #111827; }
body.light-theme .ptkt-logo-text small {
    color: #374151;
    -webkit-text-fill-color: #374151;
}

/* Toolbar Buttons */
.toolbar-btn {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 500;
    font-size: 0.75rem;
    color: #9CA3AF;
    border: 1px solid transparent;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.toolbar-btn:hover {
    color: #F3F4F6;
    background-color: #2A2E39;
}
.toolbar-btn.active {
    color: #2962FF;
    background-color: rgba(41, 98, 255, 0.1);
    border-color: rgba(41, 98, 255, 0.3);
}

/* ── TIMEFRAME BUTTONS ── */
.tf-btn {
    padding: 0.2rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: #6B7280;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: all 0.2s;
    letter-spacing: 0.03em;
}
.tf-btn:hover { color: #E2E8F0; background: #2A2E39; }
.tf-btn.active {
    color: #fff;
    background: rgba(41, 98, 255, 0.2);
    border-color: rgba(41, 98, 255, 0.5);
}

/* ── INDICATOR GROUP BUTTON (nhóm dropdown) ── */
.indicator-group-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.18rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #9CA3AF;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 5px;
    transition: all 0.2s;
    white-space: nowrap;
    cursor: pointer;
}
.indicator-group-btn:hover {
    color: #E2E8F0;
    background: #2A2E39;
    border-color: rgba(255,255,255,0.15);
}
.indicator-group-btn.open {
    color: #fff;
    background: #363C4E;
    border-color: rgba(41, 98, 255, 0.4);
}

/* ── INDICATOR DROPDOWN POPUP ── */
.indicator-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 200;
    min-width: 220px;
    background: #1a1f2e;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(41,98,255,0.1);
    padding: 4px 0;
    max-height: 55vh;
    overflow-y: auto;
    overflow-x: hidden;
    animation: ddSlideIn 0.15s ease;
}

/* Scrollbar mỏng cho dropdown */
.indicator-dropdown::-webkit-scrollbar {
    width: 4px;
}
.indicator-dropdown::-webkit-scrollbar-track {
    background: transparent;
}
.indicator-dropdown::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}
.indicator-dropdown::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}


@keyframes ddSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ind-dd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #CBD5E1;
    cursor: pointer;
    transition: background 0.15s;
}
.ind-dd-item:hover {
    background: rgba(41, 98, 255, 0.12);
    color: #fff;
}
.ind-dd-item.ind-dd-toggle {
    justify-content: flex-start;
}
.ind-dd-item.active-overlay {
    background: rgba(41, 98, 255, 0.15);
    color: #fff;
}
.ind-dd-hint {
    font-size: 0.65rem;
    color: #475569;
    font-weight: 400;
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
}
.ind-dd-badge {
    margin-left: auto;
    font-size: 0.6rem;
    font-weight: 800;
    color: #22d3ee;
    background: rgba(34, 211, 238, 0.15);
    border: 1px solid rgba(34, 211, 238, 0.3);
    border-radius: 3px;
    padding: 0 4px;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}


/* Sub-pane Tabs */
.subpane-tab {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6B7280;
    border-radius: 0.25rem;
    transition: all 0.2s;
    text-transform: uppercase;
}
.subpane-tab:hover { color: #D1D5DB; }
.subpane-tab.active {
    background-color: #363C4E;
    color: #F3F4F6;
}

/* Screener Table Rows */
#screenerBody tr {
    cursor: pointer;
    transition: background-color 0.15s;
}
#screenerBody tr:hover { background-color: #2A2E39 !important; }
#screenerBody tr.selected {
    background-color: rgba(41, 98, 255, 0.15) !important;
    border-left: 2px solid #2962FF;
}

/* Resizable Pane */
.resizable-y { position: relative; }
.resizable-y::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 6px;
    background-color: transparent;
    cursor: ns-resize;
    z-index: 50;
}
.resizable-y:hover::before { background-color: rgba(41, 98, 255, 0.5); }

/* Utils */
.text-xxs {
    font-size: 0.65rem;
    line-height: 1rem;
}

/* =====================
   DRAWING BTN ACTIVE STATE
   ===================== */
.drawing-btn.active {
    background-color: rgba(41, 98, 255, 0.2) !important;
    color: #2962FF !important;
    border-right: 2px solid #2962FF;
}

/* Watermark */
#chartWatermark { color: rgba(255, 255, 255, 0.04); }

/* =====================
   LIGHT THEME - Đồng bộ hoàn chỉnh với style.css của hệ thống
   ===================== */

/* CSS variables - giống style.css */
body.light-theme {
    --border-color: #e5e7eb;
    --text-primary: #111827;
    --text-muted: #374151;
    --card-bg: #ffffff;
    --color-buy: #059669;
    --color-sell: #dc2626;
    --color-hold: #d97706;
    --color-observe: #0284c7;
}

/* === Backgrounds === */
body.light-theme { background-color: #f8fafc !important; color: #111827 !important; }
body.light-theme .bg-dark-900 { background-color: #f8fafc !important; }
body.light-theme .bg-dark-800 { 
    background-color: #ffffff !important; 
    box-shadow: 0 4px 24px -2px rgba(14, 165, 233, 0.05) !important;
}
body.light-theme .bg-dark-700 { background-color: #f1f5f9 !important; }

/* === Borders === */
body.light-theme .border-dark-700,
body.light-theme .border-dark-600 { border-color: #e2e8f0 !important; }
body.light-theme .border-dark-700\/50 { border-color: rgba(226,232,240,0.7) !important; }
body.light-theme .divide-dark-700 > :not([hidden]) ~ :not([hidden]) { border-color: #e2e8f0 !important; }

/* === Text === */
body.light-theme .text-gray-400,
body.light-theme .text-gray-300,
body.light-theme .text-gray-200 { color: #374151 !important; }
body.light-theme .text-white { color: #111827 !important; }
body.light-theme .text-gray-500 { color: #6b7280 !important; }
body.light-theme .hover\:text-white:hover,
body.light-theme .hover\:text-gray-200:hover { color: #111827 !important; }

/* === Header & Drawer === */
body.light-theme header { background-color: #ffffff !important; border-color: #e5e7eb !important; }
body.light-theme #navDrawer { background-color: #ffffff !important; border-color: #e5e7eb !important; }
body.light-theme #navBackdrop { background-color: rgba(0,0,0,0.35); }

/* === Hamburger lines === */
body.light-theme #navMenuToggle span { background-color: #374151; }

/* === Search input === */
body.light-theme #searchInput {
    background-color: #f1f5f9 !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
}
body.light-theme #searchDropdown {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

/* === Hover backgrounds === */
body.light-theme .hover\:bg-dark-700:hover { background-color: #e5e7eb !important; }
body.light-theme .hover\:bg-dark-800:hover { background-color: #f1f5f9 !important; }

/* === Toolbar & Drawing buttons === */
body.light-theme .toolbar-btn { color: #374151 !important; }
body.light-theme .toolbar-btn:hover { background-color: #e5e7eb !important; color: #111827 !important; }
body.light-theme .toolbar-btn.active { color: #1d4ed8 !important; background-color: rgba(29,78,216,0.1) !important; }

body.light-theme .drawing-btn { color: #374151 !important; }
body.light-theme .drawing-btn:hover { background-color: #e5e7eb !important; }
body.light-theme .drawing-btn.active {
    color: #1d4ed8 !important;
    background-color: rgba(29,78,216,0.15) !important;
    border-right-color: #1d4ed8 !important;
}

/* === Popup menu nhóm công cụ vẽ === */
body.light-theme [class*="group-hover:flex"][class*="bg-dark-800"] {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

/* === Screener sidebar === */
body.light-theme #screenerList { background-color: #f3f4f6 !important; }
body.light-theme #screenerBody tr:hover { background-color: #e5e7eb !important; }
body.light-theme #screenerHead { background-color: #ffffff !important; }

/* === Subpane tabs === */
body.light-theme .subpane-tab { color: #6b7280 !important; }
body.light-theme .subpane-tab:hover { color: #111827 !important; }
body.light-theme .subpane-tab.active { background-color: #e5e7eb !important; color: #111827 !important; }

/* === Brand colors - tối hơn cho light mode === */
body.light-theme .text-brand-blue,
body.light-theme .text-blue-400 { color: #1d4ed8 !important; }
body.light-theme .text-brand-green,
body.light-theme .text-green-400 { color: #15803d !important; }
body.light-theme .text-brand-gold,
body.light-theme .text-yellow-400 { color: #d97706 !important; }
body.light-theme .text-red-400 { color: #b91c1c !important; }
body.light-theme .text-purple-400 { color: #7e22ce !important; }
body.light-theme .text-teal-400 { color: #0f766e !important; }

/* === Badge backgrounds === */
body.light-theme .bg-yellow-900\/30 { background-color: rgba(217,119,6,0.1) !important; }
body.light-theme .border-yellow-700\/50 { border-color: rgba(217,119,6,0.3) !important; }
body.light-theme .bg-green-900\/30 { background-color: rgba(21,128,61,0.1) !important; }
body.light-theme .border-green-700\/50 { border-color: rgba(21,128,61,0.3) !important; }
body.light-theme .bg-red-900\/30 { background-color: rgba(185,28,28,0.1) !important; }
body.light-theme .border-red-700\/50 { border-color: rgba(185,28,28,0.3) !important; }
body.light-theme .bg-blue-900\/50 { background-color: #dbeafe !important; color: #1e3a8a !important; border-color: #bfdbfe !important; }
body.light-theme .bg-blue-900\/40 { background-color: rgba(29,78,216,0.1) !important; }
body.light-theme .border-blue-700 { border-color: rgba(29,78,216,0.3) !important; }

/* Active nav link */
body.light-theme .bg-brand-blue\/20 { background-color: rgba(29,78,216,0.1) !important; }
body.light-theme .border-brand-blue\/40 { border-color: rgba(29,78,216,0.3) !important; }

/* === Select dropdowns === */
body.light-theme select {
    background-color: #f1f5f9 !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
}

/* === Scrollbar light mode === */
body.light-theme .custom-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; }
body.light-theme .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; }
body.light-theme .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* === Watermark light mode === */
body.light-theme #chartWatermark { color: rgba(0, 0, 0, 0.07); }

/* === Hover badge brand colors === */
body.light-theme .hover\:bg-brand-gold\/10:hover { background-color: rgba(217,119,6,0.1) !important; }
body.light-theme .border-brand-gold\/30 { border-color: rgba(217,119,6,0.4) !important; }
body.light-theme .hover\:bg-purple-400\/10:hover { background-color: rgba(126,34,206,0.1) !important; }
body.light-theme .border-purple-400\/30 { border-color: rgba(126,34,206,0.4) !important; }
body.light-theme .hover\:bg-teal-400\/10:hover { background-color: rgba(15,118,110,0.1) !important; }
body.light-theme .border-teal-400\/30 { border-color: rgba(15,118,110,0.4) !important; }

/* === Nút Chụp Ảnh - light mode (target by ID) === */
body.light-theme #btnSnapshot {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
}
body.light-theme #btnSnapshot:hover {
    background-color: #1d4ed8 !important;
    color: #ffffff !important;
}
body.light-theme #btnSnapshot i,
body.light-theme #btnSnapshot span { color: #ffffff !important; }

body.light-theme #btnQuickAdd {
    background-color: #e2e8f0 !important;
    color: #1e40af !important;
    border-color: #cbd5e1 !important;
}
body.light-theme #btnQuickAdd:hover {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/* =====================
   LIGHT THEME - Modals & Panels
   ===================== */

/* === Modal nền: bg-dark-900 trong modal === */
body.light-theme .rounded-t-xl.bg-dark-900,
body.light-theme .rounded-t-lg.bg-dark-900,
body.light-theme .bg-dark-900.rounded-t-xl,
body.light-theme .bg-dark-900.rounded-t-lg { background-color: #e8edf5 !important; }

/* === Input/Textarea trong modal === */
body.light-theme textarea,
body.light-theme input[type="text"] {
    background-color: #f1f5f9 !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}
body.light-theme textarea::placeholder,
body.light-theme input[type="text"]::placeholder { color: #9ca3af !important; }

/* === Nút Hủy trong modal (bg-dark-600) === */
body.light-theme button.bg-dark-600 {
    background-color: #e2e8f0 !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
}
body.light-theme button.bg-dark-600:hover {
    background-color: #d1d5db !important;
    color: #111827 !important;
}
body.light-theme button.hover\\:bg-dark-500:hover {
    background-color: #d1d5db !important;
    color: #111827 !important;
}

/* === Nút Xác nhận (bg-brand-blue) — giữ nguyên màu xanh dương === */
body.light-theme button.bg-brand-blue { color: #ffffff !important; }

/* === Nút X đóng modal === */
body.light-theme .text-gray-400 { color: #6b7280 !important; }
body.light-theme button.text-gray-400:hover { color: #111827 !important; }

/* === Label nhỏ trong modal === */
body.light-theme .text-xs.text-gray-400 { color: #6b7280 !important; }

/* === Gợi ý phím tắt (italic) === */
body.light-theme .text-xs.text-gray-500 { color: #9ca3af !important; }
body.light-theme kbd {
    background-color: #e2e8f0 !important;
    color: #374151 !important;
    border: 1px solid #d1d5db;
}

/* === Indicator Settings Modal: content area === */
body.light-theme #indicatorSettingsModal .bg-dark-700 { background-color: #f1f5f9 !important; }
body.light-theme #indicatorSettingsModal input[type="range"] { accent-color: #2962ff; }
body.light-theme #indicatorSettingsModal input[type="number"] {
    background-color: #f1f5f9 !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}
body.light-theme #indicatorSettingsModal label { color: #374151 !important; }

/* === Overlay Style Modal (Màu đường kẻ) === */
body.light-theme #overlayStyleModal h3 { color: #374151 !important; }
body.light-theme #overlayStyleModal .border-dark-700 { border-color: #e2e8f0 !important; }
body.light-theme #overlayStyleModal .text-red-400 { color: #b91c1c !important; }

/* === Indicator tag badges trong chart toolbar === */
body.light-theme .bg-dark-700.border.border-dark-600 {
    background-color: #e8edf5 !important;
    border-color: #d1d5db !important;
    color: #374151 !important;
}

/* === Nút kéo thả pane (dark-600 bg) === */
body.light-theme .bg-dark-600 { background-color: #e2e8f0 !important; }

/* === Compare Panel Light Theme === */
body.light-theme #comparePanel > div {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}
body.light-theme #comparePanel h3.text-teal-400 { color: #0f766e !important; }
body.light-theme #comparePanel .bg-teal-900\\/20 { background-color: #f0fdfa !important; border-color: #ccfbf1 !important; }
body.light-theme #comparePanel .text-gray-500,
body.light-theme #comparePanel .text-gray-600 { color: #6b7280 !important; }
body.light-theme #comparePanel .compare-tag {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}
body.light-theme #comparePanel .compare-tag span.text-white { color: #0f172a !important; }
body.light-theme #comparePanel input#compareTickerInput {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
body.light-theme #comparePanel input#compareTickerInput:focus { border-color: #0f766e !important; }

/* USER MENU STYLES ADDED FOR PROFILE ICON */
.user-menu {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}
.user-avatar-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px;
    border-radius: 20px;
    background: rgba(255,255,255,0.05);
    transition: background 0.2s;
}
.user-avatar-wrap:hover { background: rgba(255,255,255,0.1); }
.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.1);
}
.user-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
    padding-right: 6px;
}
.user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 220px;
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 8px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: none;
    z-index: 999;
}
.user-dropdown.show { display: block; animation: dropIn 0.2s ease; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.user-info-header {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.user-info-header strong { font-size: 14px; }
.vip-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
    font-weight: 700;
}
.vip-badge.vip { background: #f5a623; color: #000; }
.vip-badge.free { background: rgba(255,255,255,0.1); color: #fff; }

.user-dropdown hr {
    border: 0;
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}
.dropdown-item {
    display: block;
    padding: 10px 16px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 13.5px;
    transition: background 0.2s;
}
.dropdown-item:hover { background: rgba(255,255,255,0.05); color: #fff; }

/* Mobile responsive fix: Ẩn nút đăng nhập và user menu trên mobile để không vỡ khung header */
@media (max-width: 768px) {
    .ptkt-header-right .btn-login-nav,
    .ptkt-header-right .user-menu {
        display: none !important;
    }
}