/* Custom Styles */
:root {
    --primary-color-rgb: 59, 130, 246; /* Default Blue */
}
body.theme-orange { --primary-color-rgb: 255, 152, 0; }
body.theme-blue { --primary-color-rgb: 59, 130, 246; }
body.theme-green { --primary-color-rgb: 34, 197, 94; }
body.theme-red { --primary-color-rgb: 239, 68, 68; } /* red-500 */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #0e1117;
    overflow-x: hidden; /* Prevent horizontal scroll */
    overflow-y: auto; /* Allow vertical scroll if needed */
}

#welcome-screen {
    position: relative;
    overflow: hidden;
}

/* --- Control Buttons --- */
.control-btn {
    position: absolute;
    top: 1.5rem;
    z-index: 10;
    background: rgba(30, 34, 45, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #a9aeb8;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.control-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fafafa;
}
#color-toggle { right: 1.5rem; }
#color-toggle:hover { transform: scale(1.1); }
#anim-toggle { right: 5.5rem; } /* Repositioned */
#anim-toggle:hover { transform: scale(1.1); }

/* --- General Background Container Styles --- */
.bg-container { display: none; }
body.animations-enabled.plexus-active .plexus-container { 
    display: block; 
}
.plexus-container {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
}
#plexus-bg {
    display: block;
}

/* Glassmorphism Card Style */
.glass-card {
    background: rgba(30, 34, 45, 0.1); border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    backdrop-filter: blur(2px); /* Reduced blur */
    -webkit-backdrop-filter: blur(2px); /* Reduced blur for Safari */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    z-index: 1; 
}

/* Sidebar Nav Link */
.nav-link { display: flex; align-items: center; padding: 0.75rem 1.5rem; border-radius: 0.5rem; margin-bottom: 0.5rem; color: #a9aeb8; transition: all 0.2s ease-in-out; font-weight: 500; }
.nav-link:hover { background: rgba(255, 255, 255, 0.05); color: #fafafa; }
.nav-link.active { 
    background-image: linear-gradient(to right, rgb(var(--primary-color-rgb)), color-mix(in srgb, rgb(var(--primary-color-rgb)) 80%, black)); 
    color: white; font-weight: 600; 
    box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.2); 
}
.nav-link i { transition: transform 0.2s ease-in-out; }
.nav-link.active i { transform: scale(1.1); }

/* Table styles */
.trade-table { width: 100%; border-collapse: collapse; }
.trade-table th, .trade-table td { padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.trade-table th { font-weight: 600; color: #a9aeb8; font-size: 0.8rem; text-transform: uppercase; }
.trade-table tbody tr:hover { background-color: rgba(255, 255, 255, 0.03); }
.text-green-400 { color: #4ade80; }
.text-red-400 { color: #f87171; }
.text-yellow-400 { color: #facc15; } /* Added yellow color */

/* Market News Styles */
.impact-icon {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.impact-high { background-color: #ef4444; } /* red-500 */
.impact-medium { background-color: #f97316; } /* orange-500 */
.impact-low { background-color: #facc15; } /* yellow-400 */
.impact-none { background-color: #6b7280; } /* gray-500 */

.news-value {
    font-family: 'monospace';
    font-size: 0.95rem;
}

/* Generic Tab Bar Styles (News, AI Analysis) */
.tab-bar {
    display: flex;
    gap: 0.5rem; /* 8px */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap; /* Allow tabs to wrap on small screens */
}
.tab-item {
    padding: 0.75rem 1.25rem; /* py-3 px-5 */
    font-weight: 500;
    color: #a9aeb8; /* text-gray-400 */
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    white-space: nowrap;
}
.tab-item:hover {
    color: #fafafa; /* text-white */
}
.tab-item.active {
    color: rgb(var(--primary-color-rgb));
    border-bottom-color: rgb(var(--primary-color-rgb));
}

/* General News Card Styles */
.news-card-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem; /* 16px */
}
@media (min-width: 768px) { /* md: */
    .news-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) { /* lg: */
    .news-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.news-card {
    background: rgba(30, 34, 45, 0.3); /* Slightly different from glass-card */
    border-radius: 0.75rem; /* rounded-xl */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.25rem; /* p-5 */
    transition: all 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
}
.news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
}
.news-card-source {
    font-size: 0.875rem; /* text-sm */
    font-weight: 600;
    color: rgb(var(--primary-color-rgb));
    margin-bottom: 0.25rem;
}
.news-card-time {
    font-size: 0.75rem; /* text-xs */
    color: #a9aeb8; /* text-gray-400 */
    margin-bottom: 0.75rem;
}
.news-card-headline {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600;
    color: #fafafa; /* text-white */
    margin-bottom: 0.5rem;
}
.news-card-snippet {
    font-size: 0.875rem; /* text-sm */
    color: #d1d5db; /* text-gray-300 */
    line-height: 1.6;
    flex-grow: 1;
}

/* --- AI Sentiment Circular Gauge (Similar to Account Info) --- */
.risk-gauge-circular {
    width: 10rem; /* w-40 */
    height: 10rem; /* h-40 */
    position: relative;
    margin: 0 auto; /* Center it */
}
.risk-gauge-circular svg {
     width: 100%;
     height: 100%;
}
.risk-gauge-circular circle {
    transition: stroke-dashoffset 0.5s ease-out, stroke 0.5s ease-out;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}
.risk-gauge-circular .gauge-center-text { /* Reusing gauge-text concept */
     font-size: 1.5rem; /* text-2xl */
     font-weight: bold;
}
 .risk-gauge-circular .gauge-center-label { /* Reusing gauge-label concept */
    font-size: 0.875rem; /* text-sm */
    color: #a9aeb8; /* text-gray-400 */
}

/* AI Prediction Card Styles */
.prediction-card {
    background: rgba(30, 34, 45, 0.3);
    border-radius: 0.75rem; /* rounded-xl */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem; /* p-4 */
    display: flex;
    align-items: center;
    gap: 1rem; /* gap-4 */
    transition: all 0.2s ease-in-out;
}
.prediction-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.02);
}
.prediction-icon {
    font-size: 2rem; /* text-3xl */
    flex-shrink: 0;
    width: 2.5rem; /* w-10 */
    text-align: center;
}
.prediction-icon-up { color: #4ade80; } /* text-green-400 */
.prediction-icon-down { color: #f87171; } /* text-red-400 */
.prediction-icon-neutral { color: #facc15; } /* text-yellow-400 */

/* Animations */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.fade-in-up { animation: fadeInUp 0.6s ease-out forwards; opacity: 0; }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
.fade-out { animation: fadeOut 0.5s ease-out forwards; }

/* --- START: Modal Styles --- */
#prop-settings-modal {
    transition: opacity 0.3s ease-in-out;
}
#prop-settings-modal .glass-card {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transform: scale(0.95);
    opacity: 0;
}
#prop-settings-modal.open {
    opacity: 1;
}
#prop-settings-modal.open .glass-card {
    transform: scale(1);
    opacity: 1;
}
/* Custom Form Input Styles */
.form-input {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: white;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.form-input:focus {
    outline: none;
    border-color: rgb(var(--primary-color-rgb));
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.5);
}
.form-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #a9aeb8;
}
.form-button {
    background-image: linear-gradient(to right, rgb(var(--primary-color-rgb)), color-mix(in srgb, rgb(var(--primary-color-rgb)) 80%, black)); 
    color: white; font-weight: 600; 
    box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.2); 
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease-in-out;
}
.form-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--primary-color-rgb), 0.3);
}
/* --- END: Modal Styles --- */

/* --- START: Added styles for password toggle --- */
.password-toggle-btn {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #a9aeb8;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
}
.password-toggle-btn:hover {
    color: #fafafa;
}
.form-input-wrapper {
    position: relative;
}
/* --- END: Added styles for password toggle --- */

/* --- START: Added Journal Styles --- */
textarea.form-input {
    min-height: 120px;
    resize: vertical;
}

.journal-card {
    background: rgba(30, 34, 45, 0.3);
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    transition: all 0.2s ease-in-out;
}
.journal-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
}
.journal-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
}
.journal-card-body {
    font-size: 0.9rem;
    color: #d1d5db;
    line-height: 1.6;
    white-space: pre-wrap; /* Respects newlines in notes */
    word-break: break-word;
}
.journal-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: #a9aeb8;
}
.emotion-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-weight: 500;
    font-size: 0.75rem;
    background-color: rgba(255, 255, 255, 0.1);
}
.delete-journal-btn {
    background: none;
    border: none;
    color: #a9aeb8;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
}
.delete-journal-btn:hover {
    color: #f87171; /* red-400 */
}
/* --- END: Added Journal Styles --- */

/* --- START: Added Checklist Styles --- */
.checklist-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 0.2s ease-in-out;
    min-height: 50px; /* Ensure consistent height */
}
.checklist-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}
.checklist-item input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    margin-right: 1rem;
    accent-color: rgb(var(--primary-color-rgb));
    flex-shrink: 0;
    cursor: pointer;
}
.checklist-item label {
    flex-grow: 1;
    color: #d1d5db;
    cursor: pointer;
    line-height: 1.4; /* Improve readability */
}
.checklist-item-nested {
    padding-left: 2.85rem; /* Align with checkbox text */
    margin-bottom: 0.5rem; /* Added margin for nested items */
    background-color: rgba(255, 255, 255, 0.01); /* Slightly different background */
    border-left: 2px solid rgba(var(--primary-color-rgb), 0.3); /* Add left border */
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    min-height: auto; /* Allow nested to be shorter */
}
.checklist-group { /* New style for grouping */
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.checklist-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* --- END: Added Checklist Styles --- */

/* --- REMOVED: Custom scrollbar for earnings gauges --- */
/*
#earnings-gauge-container::-webkit-scrollbar {
    height: 8px;
}
#earnings-gauge-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}
#earnings-gauge-container::-webkit-scrollbar-thumb {
    background: rgba(var(--primary-color-rgb), 0.6);
    border-radius: 4px;
}
#earnings-gauge-container::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--primary-color-rgb), 0.8);
}
*/

/* Skeleton Loader */
.skeleton-loader { background-color: rgba(255, 255, 255, 0.05); border-radius: 0.5rem; position: relative; overflow: hidden; }
.skeleton-loader::after { content: ''; position: absolute; top: 0; left: -150%; width: 150%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent); animation: shimmer 1.5s infinite; }
@keyframes shimmer { 0% { left: -150%; } 100% { left: 150%; } }

/* System Log styles */
.log-entry { font-family: 'monospace'; font-size: 0.9rem; padding: 0.25rem 0.5rem; border-radius: 0.25rem; }
.log-level-INFO { color: #60a5fa; }
.log-level-ERROR { color: #f87171; }
.log-level-SUCCESS { color: #4ade80; }

/* Responsive Sidebar */
#sidebar {
    transition: transform 0.3s ease-in-out;
}
@media (max-width: 768px) {
    #sidebar {
        transform: translateX(-100%); /* Start off-screen to the left for LTR */
    }
    #sidebar.open {
        transform: translateX(0);
    }
    main { /* Add padding to main content when sidebar is hidden */
       margin-left: 0 !important; 
    }
}

/* New style for the active launch button */
#launch-button.active-theme {
    background-image: linear-gradient(to right, rgb(var(--primary-color-rgb)), color-mix(in srgb, rgb(var(--primary-color-rgb)) 80%, black));
}

/* Styles for the Account Info dashboard */
.progress-ring__circle {
    transition: stroke-dashoffset 0.5s ease-out, stroke 0.5s ease-out;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

/* Prop Challenge Progress Bar Styles */
.progress-bar-container {
    height: 0.75rem; /* h-3 */
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 9999px; /* rounded-full */
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    border-radius: 9999px; /* rounded-full */
    transition: width 0.3s ease-in-out;
}

 /* Slightly Larger Gauge for Prop Challenge Days */
.gauge-md { /* Changed class name for clarity */
    width: 7rem; /* w-28, increased size */
    height: 7rem; /* h-28, increased size */
}
/* --- Removed empty .gauge-md svg ruleset --- */
.gauge-md circle {
    stroke-width: 6; 
}
.gauge-md .gauge-text {
    font-size: 1.125rem; /* text-lg, increased size */
}
 .gauge-md .gauge-label {
    font-size: 0.75rem; /* text-xs */
    line-height: 1rem; /* Adjust line height for wrapping */
}

/* --- START: Added for Earnings Gauge Scrollbar --- */
#earnings-gauge-container {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(var(--primary-color-rgb), 0.5) rgba(255, 255, 255, 0.1); /* Firefox */
}
#earnings-gauge-container::-webkit-scrollbar {
    height: 8px;
}
#earnings-gauge-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}
#earnings-gauge-container::-webkit-scrollbar-thumb {
    background-color: rgba(var(--primary-color-rgb), 0.5);
    border-radius: 4px;
}
#earnings-gauge-container::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--primary-color-rgb), 0.7);
}
/* --- END: Added for Earnings Gauge Scrollbar --- */


/* --- New rule to prevent scroll on welcome screen --- */
body.welcome-active {
    overflow-y: hidden;
}