/* =================================================================
   CASTLE CAPITAL — MOBILE READABILITY OVERHAUL
   Applied globally to every page.
   Targets: ≤768px (tablet), ≤480px (phone), ≤375px (small phone)
   ================================================================= */

/* -----------------------------------------------------------------
   BASE: Improve defaults for ALL screen sizes
   ----------------------------------------------------------------- */

/* Better base line-height for readability */
body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Ensure touch targets are 44px minimum (Apple HIG / WCAG) */
a, button, [role="button"], input[type="submit"], .btn, .castle-btn,
.nav-link, .btn-client-portal, .btn-primary, .btn-plan, .time-toggle,
.chart-type-btn, .faq-question {
    min-height: 44px;
    /* Only enforce on mobile — see below */
}

/* -----------------------------------------------------------------
   TABLET: ≤ 768px
   ----------------------------------------------------------------- */
@media (max-width: 768px) {

    /* --- Global container --- */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* --- Navigation --- */
    .navbar-brand {
        font-size: 1.25rem !important;
    }

    .navbar-toggler {
        display: block !important;
        font-size: 1.5rem;
        padding: 0.5rem;
        min-height: 44px;
        min-width: 44px;
    }

    .navbar-nav {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 1.5rem;
        gap: 0.75rem;
        z-index: 999;
    }

    .navbar-nav.active {
        display: flex !important;
    }

    /* --- Hero Sections (all pages share this pattern) --- */
    .hero-section {
        padding-top: 100px !important;
        padding-bottom: 3rem !important;
    }

    .hero-main-title {
        font-size: clamp(2rem, 7vw, 3rem) !important;
        line-height: 1.15 !important;
    }

    .hero-title {
        font-size: clamp(2rem, 7vw, 2.5rem) !important;
        line-height: 1.15 !important;
    }

    .hero-subtitle {
        font-size: clamp(1.1rem, 3.5vw, 1.5rem) !important;
        line-height: 1.4 !important;
    }

    .hero-description {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        padding: 0 0.5rem;
    }

    /* --- Section Titles --- */
    .section-title {
        font-size: clamp(1.75rem, 5vw, 2.5rem) !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }

    .section-subtitle {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 2.5rem !important;
    }

    /* --- Stats Grids --- */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    .stat-card {
        padding: 1.25rem !important;
    }

    .stat-number {
        font-size: clamp(1.5rem, 5vw, 2rem) !important;
    }

    .stat-label {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
    }

    /* --- Card Grids (philosophy, services, approach, tech, risk, etc.) --- */
    .philosophy-grid,
    .tech-grid,
    .risk-grid,
    .services-grid,
    .approach-grid,
    .culture-values,
    .section-grid,
    .values-grid,
    .advantages-grid,
    .process-grid,
    .metrics-grid:not(.dashboard-container .metrics-grid) {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    .philosophy-card,
    .tech-card,
    .service-card,
    .approach-card,
    .risk-card,
    .culture-value,
    .value-card,
    .section-card {
        padding: 1.5rem !important;
    }

    /* Service / approach / value card titles */
    .service-title,
    .approach-title,
    .culture-value-title,
    .section-card-title,
    .value-card-title,
    .process-title,
    .advantage-title {
        font-size: 1.25rem !important;
    }

    .service-description,
    .approach-description,
    .culture-value-description,
    .section-card-description,
    .value-card-description,
    .process-description,
    .advantage-description {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    /* Value card icons */
    .value-card-icon,
    .section-card-icon {
        font-size: 2rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* --- Team Cards --- */
    .team-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .team-card {
        padding: 2rem 1.5rem !important;
    }

    .team-name {
        font-size: 1.5rem !important;
    }

    .team-role {
        font-size: 0.95rem !important;
    }

    .team-description {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    .expertise-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }

    .team-links {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .team-link {
        justify-content: center !important;
        padding: 0.75rem 1rem !important;
    }

    .team-avatar {
        width: 90px !important;
        height: 90px !important;
        font-size: 2.25rem !important;
    }

    /* --- Pricing Cards --- */
    .pricing-grid {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        gap: 1.25rem !important;
    }

    .pricing-card {
        padding: 1.5rem !important;
        min-height: auto !important;
    }

    .plan-name {
        font-size: 1.5rem !important;
    }

    .price {
        font-size: 2.5rem !important;
    }

    .features-list li {
        font-size: 0.95rem !important;
        padding: 0.5rem 0 !important;
    }

    .btn-plan {
        padding: 0.875rem 1.5rem !important;
        font-size: 1rem !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* --- Comparison Table --- */
    .comparison-table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin: 0 -1rem;
        padding: 0 1rem;
    }

    .comparison-table table {
        min-width: 500px !important;
        font-size: 0.85rem !important;
    }

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

    /* --- FAQ --- */
    .faq-question {
        padding: 1rem !important;
        font-size: 1rem !important;
        text-align: left !important;
    }

    .faq-answer {
        padding: 0 1rem 1rem !important;
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    /* --- CTA Sections --- */
    .cta-title {
        font-size: clamp(1.75rem, 5vw, 2.5rem) !important;
        line-height: 1.2 !important;
    }

    .cta-subtitle {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        padding: 0 0.5rem;
    }

    .cta-buttons {
        flex-direction: column !important;
        gap: 0.75rem !important;
        max-width: 100% !important;
    }

    .cta-buttons a,
    .cta-buttons .btn-primary,
    .cta-buttons .btn-secondary {
        width: 100% !important;
        text-align: center !important;
        padding: 1rem 1.5rem !important;
    }

    /* --- Trust Badges --- */
    .trust-badges {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    .trust-badge {
        flex-direction: column !important;
        text-align: center !important;
        padding: 1rem 0.5rem !important;
        font-size: 0.85rem !important;
    }

    /* --- Culture Quote --- */
    .culture-quote {
        padding: 1.5rem !important;
    }

    .culture-quote-text {
        font-size: 1.05rem !important;
        line-height: 1.6 !important;
    }

    /* --- Disclaimer / Disclosure sections (fight inline styles) --- */
    .disclaimer-card {
        padding: 1.25rem !important;
    }

    .disclaimer-text {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }

    /* Inline-styled disclosure sections */
    section[style*="padding: 3rem"] {
        padding: 1.5rem 0 !important;
    }

    section[style*="padding: 2rem"] {
        padding: 1.25rem 0 !important;
    }

    /* Regulatory disclosure text */
    .regulatory-notice {
        padding: 1rem !important;
        font-size: 0.85rem !important;
    }

    .regulatory-notice p {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }

    /* --- Footer --- */
    .footer {
        padding: 2.5rem 0 1.5rem !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .footer-brand {
        font-size: 1.25rem !important;
    }

    .footer-heading {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }

    .footer-links {
        font-size: 0.9rem !important;
    }

    .footer-links li {
        margin-bottom: 0.4rem !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        gap: 0.75rem !important;
        text-align: center !important;
        font-size: 0.8rem !important;
    }

    .footer-bottom p {
        font-size: 0.8rem !important;
        line-height: 1.5 !important;
    }

    /* --- Buttons: enforce touch targets --- */
    .btn-primary,
    .btn-plan,
    .castle-btn,
    .btn-client-portal {
        min-height: 48px !important;
        padding: 0.875rem 1.5rem !important;
        font-size: 1rem !important;
    }

    /* --- Performance page stats --- */
    .hero-stats {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .stat-divider {
        width: 40px !important;
        height: 1px !important;
    }

    /* --- Contact form --- */
    .contact-form {
        padding: 1.5rem !important;
    }

    .contact-info {
        padding: 1.5rem !important;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        font-size: 16px !important;   /* Prevents iOS zoom on focus */
        padding: 0.75rem !important;
    }

    /* --- Client Pricing (authenticated) --- */
    .pricing-hero {
        padding: 2.5rem 1rem !important;
    }

    .pricing-hero h1 {
        font-size: 1.75rem !important;
    }

    .pricing-hero p {
        font-size: 0.95rem !important;
    }

    .pricing-amount {
        font-size: 2rem !important;
    }

    /* Bootstrap card padding override on mobile */
    .card-body.p-4 {
        padding: 1.25rem !important;
    }

    .card-body.p-5 {
        padding: 1.5rem !important;
    }

    /* --- Login / Register cards --- */
    .login-card,
    .register-card {
        padding: 1.5rem !important;
        margin: 1rem !important;
        width: calc(100% - 2rem) !important;
        max-width: 100% !important;
    }

    .login-title,
    .register-title {
        font-size: 1.5rem !important;
    }

    .login-subtitle,
    .register-subtitle {
        font-size: 0.95rem !important;
    }

    /* --- Legal pages (privacy, terms) --- */
    .legal-container {
        padding: 1rem !important;
    }

    .page-header-card {
        padding: 1.5rem !important;
    }

    .page-title {
        font-size: 1.75rem !important;
    }

    /* --- Positions page --- */
    .positions-container,
    .trading-container,
    .strategies-container {
        padding: 1rem !important;
    }

    .controls-bar {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .filter-buttons {
        flex-wrap: wrap !important;
        gap: 0.375rem !important;
    }

    .filter-buttons button {
        flex: 1 1 auto !important;
        min-width: 60px !important;
        font-size: 0.8rem !important;
        padding: 0.5rem !important;
    }

    /* Table overflow */
    .positions-table,
    table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        font-size: 0.85rem !important;
    }

    .positions-table th,
    .positions-table td {
        padding: 0.5rem 0.4rem !important;
        white-space: nowrap !important;
    }

    /* Summary cards in positions */
    .summary-cards {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
    }

    /* Trading page bot cards */
    .account-metrics {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
    }

    .bot-card-wrapper {
        padding: 1.25rem !important;
    }

    .allocation-breakdown {
        gap: 0.5rem !important;
    }

    /* --- Approach icons --- */
    .approach-icon,
    .plan-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.5rem !important;
    }

    /* --- Philosophy list items --- */
    .philosophy-list li {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        padding: 0.5rem 0 !important;
    }
}

/* -----------------------------------------------------------------
   PHONE: ≤ 480px
   ----------------------------------------------------------------- */
@media (max-width: 480px) {

    .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Hero */
    .hero-section {
        padding-top: 90px !important;
        padding-bottom: 2rem !important;
    }

    .hero-main-title {
        font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
    }

    .hero-title {
        font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
    }

    .hero-subtitle {
        font-size: 1rem !important;
    }

    .hero-description {
        font-size: 0.9rem !important;
    }

    .logo-image {
        width: 80px !important;
        height: 80px !important;
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
    }

    .stat-card {
        padding: 1rem !important;
    }

    .stat-number {
        font-size: 1.35rem !important;
    }

    .stat-label {
        font-size: 0.75rem !important;
    }

    .backtest-badge {
        font-size: 0.6rem !important;
        padding: 0.15rem 0.5rem !important;
    }

    /* Section titles */
    .section-title {
        font-size: 1.5rem !important;
    }

    .section-subtitle {
        font-size: 0.9rem !important;
    }

    /* Cards */
    .philosophy-card,
    .tech-card,
    .service-card,
    .approach-card,
    .risk-card,
    .culture-value {
        padding: 1.25rem !important;
    }

    .team-card {
        padding: 1.5rem 1.25rem !important;
    }

    .pricing-card {
        padding: 1.25rem !important;
    }

    .price {
        font-size: 2rem !important;
    }

    .plan-name {
        font-size: 1.35rem !important;
    }

    /* CTA */
    .cta-title {
        font-size: 1.5rem !important;
    }

    .cta-subtitle {
        font-size: 0.9rem !important;
    }

    /* Trust badges stack to 1 col */
    .trust-badges {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Positions/trading */
    .summary-cards {
        grid-template-columns: 1fr !important;
    }

    .account-metrics {
        grid-template-columns: 1fr !important;
    }

    /* Footer */
    .footer-bottom p {
        font-size: 0.75rem !important;
    }

    /* Login/Register */
    .login-card,
    .register-card {
        padding: 1.25rem !important;
        margin: 0.5rem !important;
        width: calc(100% - 1rem) !important;
    }

    .login-title,
    .register-title {
        font-size: 1.35rem !important;
    }

    /* Comparison table */
    .comparison-table table {
        font-size: 0.8rem !important;
    }

    /* FAQ */
    .faq-question span {
        font-size: 0.9rem !important;
    }

    .faq-answer p {
        font-size: 0.85rem !important;
    }
}

/* -----------------------------------------------------------------
   SMALL PHONE: ≤ 375px (iPhone SE, etc.)
   ----------------------------------------------------------------- */
@media (max-width: 375px) {

    .container {
        padding-left: 0.625rem !important;
        padding-right: 0.625rem !important;
    }

    .hero-main-title,
    .hero-title {
        font-size: 1.5rem !important;
    }

    .hero-subtitle {
        font-size: 0.9rem !important;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.375rem !important;
    }

    .stat-card {
        padding: 0.75rem !important;
    }

    .stat-number {
        font-size: 1.2rem !important;
    }

    .stat-label {
        font-size: 0.7rem !important;
    }

    .section-title {
        font-size: 1.3rem !important;
    }

    .team-name {
        font-size: 1.25rem !important;
    }

    .team-avatar {
        width: 70px !important;
        height: 70px !important;
        font-size: 1.75rem !important;
    }

    .philosophy-card,
    .tech-card,
    .service-card,
    .approach-card,
    .pricing-card {
        padding: 1rem !important;
    }

    .price {
        font-size: 1.75rem !important;
    }

    /* Ensure nothing overflows */
    .footer-bottom p {
        word-break: break-word !important;
    }
}

/* -----------------------------------------------------------------
   LANDSCAPE PHONE (short + wide)
   ----------------------------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        min-height: auto !important;
        padding-top: 80px !important;
        padding-bottom: 2rem !important;
    }

    .hero-main-title,
    .hero-title {
        font-size: 2rem !important;
    }
}

/* -----------------------------------------------------------------
   NAVBAR-EXPAND-LG: Proper collapse below 992px
   ----------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* Show hamburger */
    .navbar-toggler, #navbarToggler {
        display: block !important;
    }

    /* Hide nav links until .show */
    .navbar-collapse:not(.show) {
        display: none !important;
    }

    /* When open, display as block */
    .navbar-collapse.show {
        display: block !important;
    }

    /* Stack nav items vertically */
    .navbar-collapse .navbar-nav {
        flex-direction: column !important;
        display: flex !important;
        width: 100% !important;
    }

    .navbar-collapse .nav-item {
        margin: 0 !important;
        width: 100% !important;
    }
}

/* Above 992px: desktop nav, no toggler */
@media (min-width: 992px) {
    .navbar-toggler {
        display: none !important;
    }

    /* Only target dashboard nav (has .dashboard-nav class), not landing page */
    .dashboard-nav {
        display: flex !important;
        flex-basis: auto !important;
        align-items: center !important;
        width: 100% !important;
    }

    .dashboard-nav .navbar-nav {
        flex-direction: row !important;
        align-items: center !important;
    }

    .dashboard-nav .nav-item {
        margin-left: 0.25rem !important;
    }
}

/* -----------------------------------------------------------------
   NAVBAR + TOP SPACING: Eliminate dead space on mobile
   ----------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Reduce body padding-top for fixed navbar (navbar is ~60px on mobile) */
    body {
        padding-top: 60px !important;
    }

    /* Kill the excessive main margin-top (inline style has margin-top: 80px) */
    main.container-fluid,
    main[style*="margin-top"] {
        margin-top: 0 !important;
        padding-top: 0.5rem !important;
    }

    /* Reduce navbar height on mobile + fix stacking for dropdown */
    .castle-navbar, .navbar.fixed-top, nav.navbar {
        min-height: auto !important;
        max-height: none !important;
        padding: 0.5rem 0 !important;
        z-index: 1050 !important;
        overflow: visible !important;
    }

    /* Tone down the gold bottom border on mobile */
    .castle-navbar {
        border-bottom-width: 2px !important;
    }

    /* Dashboard header: reduce top margin */
    .dashboard-header {
        margin-top: 0.5rem !important;
    }

    /* Dashboard container: tighter top padding */
    .dashboard-container {
        padding-top: 0.5rem !important;
    }

    /* --- navbar-expand-lg: show toggler, collapse nav below 992px --- */
    .navbar-expand-lg .navbar-toggler,
    .navbar-toggler,
    #navbarToggler {
        display: block !important;
        border: 1px solid rgba(201, 167, 78, 0.5) !important;
        border-radius: 8px !important;
        padding: 0.5rem !important;
        min-width: 44px !important;
        min-height: 44px !important;
        background: transparent !important;
        cursor: pointer !important;
    }

    .navbar-toggler-icon {
        display: block !important;
        width: 1.5em !important;
        height: 1.5em !important;
    }

    /* Hide the desktop nav by default (controlled by collapse) */
    .dashboard-nav {
        /* .collapse:not(.show) handles hiding via local-bootstrap.css */
    }

    /* --- Force nav links visible inside open menu --- */
    .dashboard-nav .navbar-nav,
    .navbar-collapse.show .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.125rem !important;
    }

    .dashboard-nav .nav-item,
    .navbar-collapse.show .nav-item {
        margin: 0 !important;
        width: 100% !important;
    }

    /* Override dark-theme-global max-height and padding */
    .navbar-collapse {
        padding: 0.5rem !important;
        max-height: none !important;
    }

    /* Navbar must not clip the dropdown */
    .castle-navbar, .navbar.fixed-top {
        max-height: none !important;
        overflow: visible !important;
    }

    /* --- Mobile nav panel (toggled via inline display:block/none) --- */
    .dashboard-nav[style*="display: block"],
    .dashboard-nav[style*="display:block"],
    .navbar-collapse.show,
    nav .navbar-collapse.show,
    .castle-navbar .navbar-collapse.show {
        display: block !important;
        position: fixed !important;
        top: 52px !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        z-index: 9999 !important;
        max-height: none !important;
        overflow-y: auto !important;
        background: rgba(15, 26, 42, 0.98) !important;
        backdrop-filter: blur(30px) !important;
        -webkit-backdrop-filter: blur(30px) !important;
        border: 1px solid rgba(201, 167, 78, 0.3) !important;
        border-radius: 10px !important;
        padding: 0.375rem !important;
        margin-top: 0 !important;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
    }

    /* Kill the gold accent bar on the menu */
    .navbar-collapse::before {
        display: none !important;
    }

    /* Nav links — compact to fit everything in one screen */
    .dashboard-nav .castle-nav-link,
    .dashboard-nav .nav-link,
    .navbar-collapse.show .castle-nav-link,
    .navbar-collapse.show .nav-link {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        padding: 0.5rem 0.625rem !important;
        min-height: 36px !important;
        margin: 0 0 2px 0 !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border-radius: 6px !important;
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 0.85rem !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        transform: none !important;
    }

    .navbar-collapse.show .castle-nav-link:hover,
    .navbar-collapse.show .castle-nav-link:active,
    .navbar-collapse.show .nav-link:hover,
    .navbar-collapse.show .nav-link:active {
        background: rgba(201, 167, 78, 0.2) !important;
        color: #C9A74E !important;
        transform: none !important;
    }

    .navbar-collapse.show .castle-nav-link.active {
        background: rgba(201, 167, 78, 0.12) !important;
        border-left: 3px solid #C9A74E !important;
        color: #C9A74E !important;
    }

    /* Nav link icons — smaller */
    .navbar-collapse.show .castle-nav-link i,
    .navbar-collapse.show .nav-link i {
        width: 16px !important;
        text-align: center !important;
        color: #C9A74E !important;
        font-size: 0.75rem !important;
    }

    /* Tight spacing between nav groups */
    .navbar-collapse.show .navbar-nav {
        gap: 0 !important;
        margin-bottom: 0.125rem !important;
        padding: 0 !important;
    }

    /* Nav items — zero extra margin */
    .navbar-collapse.show .nav-item {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* User dropdown section */
    .navbar-collapse.show .castle-dropdown-toggle,
    .castle-navbar .navbar-collapse .castle-dropdown-toggle {
        padding: 0.5rem 0.625rem !important;
        min-height: 36px !important;
        font-size: 0.85rem !important;
    }

    .navbar-collapse.show .castle-dropdown-menu,
    .castle-navbar .navbar-collapse .castle-dropdown-menu {
        padding: 0.125rem !important;
        margin-top: 2px !important;
    }

    .navbar-collapse.show .castle-dropdown-item,
    .castle-navbar .navbar-collapse .castle-dropdown-item {
        padding: 0.4rem 0.625rem !important;
        min-height: 34px !important;
        font-size: 0.8rem !important;
    }

    .navbar-collapse.show .dropdown-header {
        padding: 0.25rem 0.625rem !important;
        font-size: 0.75rem !important;
    }

    .navbar-collapse.show .dropdown-divider {
        margin: 2px 0 !important;
    }
}

@media (max-width: 480px) {
    body {
        padding-top: 56px !important;
    }

    .castle-navbar {
        border-bottom-width: 1px !important;
    }
}

/* -----------------------------------------------------------------
   NAVBAR DROPDOWN: Fix invisible dropdown on mobile
   ----------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Force the dropdown menu to behave as inline content in mobile nav */
    .navbar-collapse .castle-dropdown-menu,
    .navbar-collapse .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        min-width: unset !important;
        max-width: unset !important;
        margin-top: 0.5rem !important;
        padding: 0.5rem !important;
        background: rgba(15, 26, 42, 0.95) !important;
        border: 1px solid rgba(201, 167, 78, 0.3) !important;
        border-radius: 8px !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        display: none;
    }

    /* When Bootstrap or Castle JS adds .show, display it */
    .navbar-collapse .castle-dropdown-menu.show,
    .navbar-collapse .dropdown-menu.show {
        display: block !important;
    }

    /* Remove the right-align that pushes it offscreen */
    .navbar-collapse .dropdown-menu-end {
        right: auto !important;
        left: 0 !important;
    }

    /* Dropdown items - big touch targets, clearly visible */
    .navbar-collapse .castle-dropdown-item,
    .navbar-collapse .dropdown-item {
        color: rgba(255, 255, 255, 0.9) !important;
        padding: 0.875rem 1rem !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        border-radius: 6px !important;
        font-size: 0.95rem !important;
    }

    .navbar-collapse .castle-dropdown-item:hover,
    .navbar-collapse .castle-dropdown-item:active,
    .navbar-collapse .dropdown-item:hover,
    .navbar-collapse .dropdown-item:active {
        background: rgba(201, 167, 78, 0.2) !important;
        color: #C9A74E !important;
    }

    /* Dropdown toggle in mobile nav */
    .navbar-collapse .castle-dropdown-toggle {
        width: 100% !important;
        justify-content: flex-start !important;
        padding: 0.75rem 1rem !important;
        min-height: 48px !important;
        font-size: 1rem !important;
        color: rgba(255, 255, 255, 0.9) !important;
    }

    /* Dropdown header (user name) */
    .navbar-collapse .dropdown-header {
        color: #C9A74E !important;
        font-size: 0.85rem !important;
        padding: 0.5rem 1rem !important;
    }

    /* Dropdown divider */
    .navbar-collapse .dropdown-divider {
        border-color: rgba(255, 255, 255, 0.15) !important;
        margin: 0.25rem 0 !important;
    }

    /* Ensure the dropdown container doesn't clip */
    .navbar-collapse .castle-dropdown,
    .navbar-collapse .nav-item.dropdown {
        position: relative !important;
        overflow: visible !important;
    }
}

/* -----------------------------------------------------------------
   DASHBOARD CARDS: Soften borders/accents on mobile
   ----------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Reduce the gold accent line thickness on cards */
    .dashboard-header::before,
    .metric-card::before,
    .content-section::before,
    .main-content > div::before,
    .main-content > section::before,
    .section-wrapper::before,
    .dashboard-section::before,
    .performance-chart::before {
        height: 2px !important;
    }

    /* Soften card borders */
    .main-content > div,
    .main-content > section {
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 14px !important;
        padding: 1.25rem !important;
    }

    /* Reduce card box shadows on mobile (less visual noise) */
    .metric-card,
    .content-section,
    .alert,
    .dashboard-header {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
        border-radius: 14px !important;
    }

    /* Alerts: slightly thinner left border */
    .alert-warning,
    .alert-info,
    .alert-success {
        border-left-width: 3px !important;
        border-radius: 12px !important;
    }
}

/* -----------------------------------------------------------------
   DASHBOARD: Non-admin mobile fixes
   ----------------------------------------------------------------- */
@media (max-width: 768px) {

    /* Subscription banner flex layout */
    .alert > div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 1rem !important;
        text-align: center !important;
    }

    .alert h3 {
        font-size: 1.1rem !important;
    }

    .alert p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }

    /* Active bot card */
    #active-bot-card > div {
        flex-direction: column !important;
        text-align: center !important;
        gap: 1rem !important;
    }

    /* Portfolio management inline grid */
    .section-body div[style*="grid-template-columns: repeat(auto-fit"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Investment status card inner grids */
    div[style*="grid-template-columns: repeat(auto-fit, minmax(180px"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
    }

    div[style*="grid-template-columns: repeat(auto-fit, minmax(150px"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Investment card big numbers */
    div[style*="font-size: 1.75rem"] {
        font-size: 1.35rem !important;
    }

    /* Chart height */
    .performance-chart div[style*="height: 320px"] {
        height: 250px !important;
    }

    /* OAuth account cards */
    .oauth-account-card {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
        padding: 1rem !important;
    }

    .oauth-account-info {
        gap: 0.75rem !important;
    }

    .oauth-account-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }

    .oauth-account-details h4 {
        font-size: 0.9rem !important;
    }

    .oauth-account-details p {
        font-size: 0.8rem !important;
    }

    .oauth-account-actions {
        flex-direction: row !important;
        gap: 0.5rem !important;
    }

    .oauth-account-actions button {
        flex: 1 !important;
        font-size: 0.8rem !important;
        padding: 0.5rem !important;
        min-height: 44px !important;
    }

    /* Pricing/subscription toggle */
    .pricing-toggle .toggle-wrapper {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.5rem !important;
    }

    /* Portfolio backtest / chart controls */
    .chart-controls {
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
    }
}

@media (max-width: 480px) {
    /* Investment card grid goes single col */
    div[style*="grid-template-columns: repeat(auto-fit, minmax(180px"] {
        grid-template-columns: 1fr !important;
    }

    div[style*="font-size: 1.75rem"] {
        font-size: 1.2rem !important;
    }

    .oauth-account-actions {
        flex-direction: column !important;
    }
}

/* -----------------------------------------------------------------
   iOS INPUT ZOOM PREVENTION
   ----------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* -----------------------------------------------------------------
   SAFE AREA INSETS (iPhone X+ notch/home indicator)
   ----------------------------------------------------------------- */
@supports (padding: max(0px)) {
    .navbar {
        padding-top: max(0.5rem, env(safe-area-inset-top)) !important;
    }

    .footer {
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom)) !important;
    }

    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}