.gradient-bg {
    background: linear-gradient(to right, #0f172a, #1e293b);
}

/* Explicit logo size for consistency across all screens */
.logo-gradient, .text-2xl.font-extrabold {
    font-size: 1.5rem !important; /* Fixed size to match original */
}

.logo-gradient {
    color: white;
}

.sentiment-gradient-brackets {
    display: none;
}

.sentiment-mark {
    display: inline-block;
    width: 0.7em;
    height: 0.96em;
    margin-left: 0.2em;
    position: relative;
    margin-bottom: -0.1em;
    transform: skew(-20deg);
    background: linear-gradient(to bottom,
        #22C55E 0%,
        #22C55E 33%,
        #EAB308 33%,
        #EAB308 66%,
        #EF4444 66%,
        #EF4444 100%
    );
    padding: 3px;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}

.sentiment-mark::before {
    content: '';
    position: absolute;
    inset: 3px;
    background: #0f172a;
}

.sentiment-mark::after {
    display: none;
}

.button-gradient {
    background: linear-gradient(145deg, rgb(37, 99, 235), rgb(29, 78, 216));
    box-shadow: inset 0 0 15px rgba(30, 64, 175, 0.25);
    transition: all 0.3s ease;
}

.button-gradient:hover {
    background: linear-gradient(145deg, rgb(29, 78, 216), rgb(30, 64, 175));
    box-shadow: inset 0 0 20px rgba(30, 64, 175, 0.35);
    transform: translateY(-1px);
}

.text-gradient {
    background: linear-gradient(145deg, rgb(37, 99, 235), rgb(29, 78, 216));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.login-button {
    transition: all 0.3s ease;
}

.login-button:hover {
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
    transform: translateY(-1px);
}

.sentiment-gradient {
    background: linear-gradient(to right,
        #3B82F6,
        #60A5FA,
        #22C55E,
        #EAB308,
        #EF4444,
        #94A3B8,
        #60A5FA,
        #3B82F6
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% auto;
    animation: shine 20s linear infinite;
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}

/* Responsive typography for mobile devices */
@media screen and (max-width: 768px) {
    /* Exclude logo text but reduce size of other headings */

    /* Keep logo at the same fixed size we defined above */
    /* No need to change font size again since we defined it globally */

    .text-xl:not(.logo-text) {
        font-size: 1rem !important;
    }

    input, select, button {
        font-size: 0.875rem !important;
    }

    .font-semibold:not(.logo-text) {
        font-weight: 500 !important;
    }

    /* Time period and indicator controls */
    .time-period-control, .indicator-control {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Chart title and controls */
    .chart-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    /* Debug panel title */
    .debug-panel-title {
        font-size: 1rem !important;
        margin-bottom: 0.5rem;
    }

    /* Sidebar navigation adjustments */
    #sidebar .px-3.py-1\.5 {
        padding: 0.25rem 0.5rem !important;
    }

    /* Main navigation items - comprehensive targeting for all navigation links */
    #sidebar nav a,
    #sidebar nav a *,
    #sidebar nav div > a,
    #sidebar nav div > a *,
    #sidebar nav div > div > a,
    #sidebar nav div > div > a * {
        font-size: 0.875rem !important;
    }

    /* Override for sub-navigation (chart menu items) to be smaller */
    .chart-menu-item .text-sm,
    .chart-menu-item .text-sm * {
        font-size: 0.7rem !important;
    }

    /* Navigation icons */
    #sidebar svg.w-4.h-4 {
        width: 0.875rem !important;
        height: 0.875rem !important;
    }

    /* Section headers in sidebar */
    #sidebar .uppercase.tracking-wider {
        font-size: 0.7rem !important;
        letter-spacing: 0.05em !important;
    }
}

/* Even smaller text for very small screens */
@media screen and (max-width: 480px) {

    /* Keep logo at the same fixed size we defined above */
    /* No need to change font size again since we defined it globally */

    /* Make action links smaller */
    a.text-blue-500,
    a.hover\:text-blue-400,
    [class*="text-blue-"] {
        font-size: 0.95rem !important;
    }

    /* "Show more/View details" type links */
    a:has(svg),
    a[href*="videos"],
    a[href*="dashboard"],
    .pb-3 a,
    .px-4.pb-3 a {
        font-size: 0.75rem !important;
    }

    /* Target specific panel elements */
    #debug-panel h2,
    #debug-panel .text-xl,
    #debug-panel .text-lg,
    .py-1\.5.text-sm {
        font-size: 0.8rem !important;
    }

    /* Panel title specific style */
    #debug-panel {
        font-size: 0.875rem !important;
    }

    /* More specific selectors for chart controls */
    .time-period,
    .last-day,
    .price-color-indicator,
    .indicator-label {
        font-size: 0.75rem !important;
        margin-bottom: 0.125rem !important;
    }

    /* Latest Posts section */
    .text-blue-500.hover\:text-blue-400,
    .text-gray-300.text-sm {
        font-size: 0.75rem !important;
    }

    /* Time indicator text */
    .text-gray-400.text-xs {
        font-size: 0.65rem !important;
    }

    input, select, button {
        font-size: 0.8125rem !important;
        padding: 0.35rem 0.5rem !important;
    }

    /* Make select dropdown smaller on mobile */
    select {
        height: 2rem !important;
        max-width: 100% !important;
    }

    .py-1\.5 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .px-3, .px-4 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Debug panel specific styles */
    #debug-panel .p-6 {
        padding: 0.75rem !important;
    }

    table th, table td {
        padding: 0.375rem 0.5rem !important;
        font-size: 0.75rem !important;
    }

    /* Make form labels and controls more compact */
    .form-label {
        margin-bottom: 0.25rem !important;
        font-size: 0.75rem !important;
    }

    /* Adjust chart container padding */
    .chart-container {
        padding: 0.5rem !important;
    }
}