/* ===================================================
   STOCK PAGES RESPONSIVE CSS
   Ensures stock-trading, stock-markets, stock-portfolio 
   are fully responsive on mobile devices
   =================================================== */

/* ===== GENERAL TABLE RESPONSIVE ===== */
.v-data-table__wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Make tables scrollable horizontally on mobile */
@media (max-width: 768px) {
    .v-data-table__wrapper table {
        min-width: 600px;
    }
    
    .profile-coins-table .v-data-table__wrapper {
        overflow-x: scroll;
    }
    
    .markets-table__main-table .v-data-table__wrapper {
        overflow-x: scroll;
    }
}

/* ===== STOCK TRADING PAGE FIXES ===== */

/* Fix min-width issues in orders tables */
@media (max-width: 900px) {
    .orders-list [style*="min-width: 800px"],
    div[style*="min-width: 800px"] {
        min-width: 100% !important;
        overflow-x: auto !important;
    }
    
    .orders-list {
        overflow-x: auto;
    }
    
    .orders-list .v-data-table__wrapper {
        overflow-x: scroll;
    }
}

/* Chart container responsive */
@media (max-width: 600px) {
    #chart-container,
    .chart-container,
    .tv-lightweight-charts {
        height: 250px !important;
        min-height: 250px !important;
    }
}

/* ===== STOCK PORTFOLIO PAGE FIXES ===== */

/* Fix wide dialogs for mobile */
@media (max-width: 1280px) {
    .v-dialog[style*="width: 1220px"],
    div[style*="width: 1220px"] {
        width: 95vw !important;
        max-width: 95vw !important;
    }
}

@media (max-width: 768px) {
    .v-dialog[style*="width: 1220px"],
    div[style*="width: 1220px"] {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
    }
    
    .v-dialog[style*="width: 450px"],
    div[style*="width: 450px"] {
        width: 90vw !important;
        max-width: 90vw !important;
    }
    
    .v-dialog[style*="width: 500px"],
    div[style*="width: 500px"] {
        width: 90vw !important;
        max-width: 90vw !important;
    }
    
    .v-dialog[style*="width: 400px"],
    div[style*="width: 400px"] {
        width: 90vw !important;
        max-width: 90vw !important;
    }
}

/* User balance section responsive */
@media (max-width: 600px) {
    .user_balance__btn,
    .user_balance__btn-circuit,
    .user_balance__btn-link {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }
    
    .user-balance__btns-section {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .user_balance__btn-link {
        width: 100%;
        text-align: center;
    }
}

/* Stock portfolio main section responsive */
@media (max-width: 768px) {
    .profile__main {
        padding: 10px !important;
    }
    
    .profile__section {
        padding: 15px !important;
    }
    
    .profile-table__header {
        flex-direction: column;
        gap: 10px;
    }
    
    .profile-table__header__btn-section {
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 5px;
    }
    
    .search-section {
        width: 100%;
    }
    
    .search-section__input-section {
        width: 100%;
    }
}

/* ===== STOCK MARKETS PAGE FIXES ===== */

/* Markets table responsive */
@media (max-width: 768px) {
    .markets-table {
        padding: 10px !important;
    }
    
    .markets-table__title {
        font-size: 18px !important;
    }
    
    .markets-table__header {
        flex-direction: column;
        gap: 10px;
    }
    
    .markets-table__search-section {
        width: 100%;
    }
    
    .markets-table__section-switch {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Table columns responsive */
@media (max-width: 600px) {
    .markets-table__main-table th:nth-child(4),
    .markets-table__main-table td:nth-child(4),
    .markets-table__main-table th:nth-child(5),
    .markets-table__main-table td:nth-child(5) {
        display: none;
    }
    
    /* Also hide high/low columns on stock tables */
    #table__crypto-markets {
        display: none;
    }
}

/* ===== TRADING PAGE SPECIFIC FIXES ===== */

/* Order book and trades responsive */
@media (max-width: 720px) {
    .book__names,
    .book__item {
        font-size: 11px !important;
    }
    
    .trades__item {
        font-size: 11px !important;
    }
    
    .order__input-wrapper input {
        font-size: 14px !important;
    }
}

/* Stock pair info header responsive */
@media (max-width: 600px) {
    .top-ghTgp {
        padding: 10px !important;
    }
    
    .top-ghTgp .stock-info,
    .pair-info {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .stock-price-info span,
    .pair-price span {
        font-size: 12px !important;
    }
}

/* ===== COIN/STOCK LIST RESPONSIVE ===== */

@media (max-width: 600px) {
    .coins__item {
        padding: 8px !important;
    }
    
    .coins__item__icon img {
        width: 20px !important;
        height: 20px !important;
    }
    
    .coins__item__name {
        font-size: 12px !important;
    }
    
    .coins__item__price {
        font-size: 11px !important;
    }
}

/* ===== SIDEBAR RESPONSIVE FOR PROFILE PAGES ===== */

@media (max-width: 1024px) {
    .profile__aside {
        width: 200px !important;
    }
    
    .profile__aside__menu-item {
        padding: 10px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 768px) {
    .profile {
        flex-direction: column;
    }
    
    .profile__aside {
        width: 100% !important;
        position: relative !important;
    }
    
    .profile__main {
        width: 100% !important;
        margin-left: 0 !important;
    }
    
    /* Horizontal scroll for sidebar menu on mobile */
    .profile__aside__menu {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 10px;
    }
    
    .profile__aside__menu-item {
        display: inline-block;
        flex-shrink: 0;
    }
}

/* ===== FORM INPUTS RESPONSIVE ===== */

@media (max-width: 600px) {
    .v-input,
    .v-text-field {
        width: 100% !important;
    }
    
    .v-autocomplete__content {
        max-width: 90vw !important;
    }
    
    .input-autocomplete-menu {
        width: 100% !important;
        min-width: 100% !important;
    }
}

/* ===== BUTTONS RESPONSIVE ===== */

@media (max-width: 480px) {
    .withdraw-popup__btn,
    .transfer-popup__btn,
    .discard-modal__verification-btn {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 10px !important;
    }
    
    .discard-modal [style*="gap"],
    .discard-modal [style*="display: flex"] {
        flex-direction: column !important;
        gap: 10px !important;
    }
}

/* ===== STOCK ICON STYLING ===== */

/* Stock icons - match crypto coin styling */
.stock-icon,
img[src*="image-stock"],
img[src*="logos/US/"],
img[src*="financialmodelingprep"] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    object-fit: contain;
    background: #ffffff;
    padding: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    vertical-align: middle;
}

/* Stock icon in table rows */
.profile-coins-table img[src*="image-stock"],
.profile-coins-table img[src*="financialmodelingprep"],
.markets-table img[src*="image-stock"],
.markets-table img[src*="financialmodelingprep"],
td img[src*="image-stock"],
td img[src*="financialmodelingprep"] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    margin-right: 8px;
}

/* Stock icon in trading header */
.top-ghTgp img[src*="image-stock"],
.top-ghTgp img[src*="financialmodelingprep"],
.pair-info img[src*="image-stock"],
.pair-info img[src*="financialmodelingprep"] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
}

/* Stock icon in coin list sidebar */
.coins__item img[src*="image-stock"],
.coins__item img[src*="financialmodelingprep"] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
}

/* Fallback for broken images */
img[src*="image-stock"]::before,
img[src*="financialmodelingprep"]::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
}

@media (max-width: 600px) {
    .stock-icon,
    img[src*="image-stock"],
    img[src*="logos/US/"],
    img[src*="financialmodelingprep"] {
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
    }
    
    .top-ghTgp img[src*="image-stock"],
    .top-ghTgp img[src*="financialmodelingprep"] {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
    }
}

/* ===== MOBILE-SPECIFIC TOUCH IMPROVEMENTS ===== */

@media (max-width: 768px) {
    /* Larger touch targets */
    .v-btn,
    button,
    .profile-table__header__btn {
        min-height: 40px;
    }
    
    /* Better spacing for touch */
    .profile-table tbody tr {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .profile-table tbody td {
        padding: 12px 8px !important;
    }
}

/* ===== TRADE INFO BAR RESPONSIVE ===== */

@media (max-width: 768px) {
    #trade-info-bar {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 12px !important;
    }
    
    #trade-info-bar > div:first-child {
        justify-content: center !important;
        gap: 16px !important;
    }
    
    #trade-info-bar > div:last-child {
        justify-content: center !important;
    }
}

@media (max-width: 480px) {
    #trade-info-bar > div:first-child {
        gap: 12px !important;
    }
    
    #trade-info-bar > div:first-child > div {
        min-width: 60px;
    }
}

/* ===== CHART TOOLBAR RESPONSIVE ===== */

@media (max-width: 768px) {
    #chart-toolbar {
        flex-wrap: wrap !important;
        gap: 4px !important;
        padding: 4px 6px !important;
    }

    #chart-toolbar > div {
        flex-wrap: wrap;
    }

    .timeframe-btn {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    #indicators-toggle-btn,
    #drawings-toggle-btn {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    #indicators-dropdown,
    #drawings-dropdown {
        min-width: 170px !important;
    }
}

@media (max-width: 480px) {
    .timeframe-btn {
        padding: 3px 6px !important;
        font-size: 10px !important;
    }

    #indicators-toggle-btn span,
    #indicators-toggle-btn {
        font-size: 10px !important;
    }

    #drawings-toggle-btn span,
    #drawings-toggle-btn {
        font-size: 10px !important;
    }
}

/* ===== MARKET ORDER FORM RESPONSIVE ===== */

@media (max-width: 420px) {
    .sym-vol-row {
        flex-direction: column !important;
        gap: 6px !important;
    }
}

@media (max-width: 600px) {
    .vol-wrapper {
        flex: 1 1 100% !important;
    }

    .vol-label {
        font-size: 10px !important;
    }

    .vol-input-row {
        height: 38px !important;
    }

    .vol-input-row .vol-input {
        font-size: 13px !important;
    }

    .vol-steppers {
        width: 28px !important;
    }

    .vol-step-btn {
        font-size: 12px !important;
    }

    .trade-calc-panel {
        padding: 6px 10px !important;
        margin: 6px 0 !important;
    }

    .trade-calc-panel .calc-row {
        font-size: 11px !important;
        padding: 2px 0 !important;
    }

    .inline-sltp-row {
        flex-direction: column !important;
        gap: 6px !important;
        margin: 6px 0 2px !important;
    }

    .sltp-toggle-label {
        font-size: 10px !important;
    }

    .sltp-price-input {
        font-size: 11px !important;
        padding: 5px 6px !important;
    }

    .order__title-fbGht {
        font-size: 12px !important;
    }

    .order_btn-fbGht {
        padding: 10px !important;
        font-size: 13px !important;
    }

    .order__market-price {
        font-size: 11px !important;
    }
}

@media (max-width: 380px) {
    .vol-input-row {
        height: 36px !important;
    }

    .vol-input-row .vol-input {
        font-size: 12px !important;
        padding: 0 4px !important;
    }
}

/* ===== ASSET CATEGORY TABS RESPONSIVE ===== */

@media (max-width: 768px) {
    .asset-cat-wrap {
        margin: 0 4px !important;
    }

    .asset-cat-tab {
        padding: 6px 7px !important;
        font-size: 10px !important;
    }

    .cat-scroll-btn {
        width: 22px !important;
        font-size: 11px !important;
        min-height: 28px;
    }
}

@media (max-width: 480px) {
    .asset-cat-tab {
        padding: 5px 6px !important;
        font-size: 9.5px !important;
    }

    .coins__search input {
        font-size: 13px !important;
    }
}

/* ===== ACCOUNT STATUS BAR RESPONSIVE ===== */

@media (max-width: 768px) {
    #account-status-bar {
        gap: 8px 14px !important;
        padding: 6px 10px !important;
        min-height: 32px !important;
        font-size: 11px !important;
    }

    .sb-item span { font-size: 10px !important; }
    .sb-item strong { font-size: 11px !important; }
}

@media (max-width: 600px) {
    #account-status-bar {
        gap: 4px 10px !important;
        padding: 5px 8px !important;
        font-size: 10px !important;
        justify-content: flex-start !important;
    }

    .sb-item span { font-size: 9px !important; }
    .sb-item strong { font-size: 10px !important; }
    .sb-equity { padding: 2px 8px !important; }
}

@media (max-width: 420px) {
    #account-status-bar {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 3px 6px !important;
        padding: 4px 6px !important;
    }

    #account-status-bar > .sb-sep { display: none !important; }
    .sb-item span { font-size: 8.5px !important; }
    .sb-item strong { font-size: 9px !important; }
}

/* ===== CLOSE POSITION POPUP RESPONSIVE ===== */

@media (max-width: 600px) {
    #close-position-overlay > div {
        padding: 16px !important;
        border-radius: 10px !important;
        width: 94% !important;
    }

    #close-position-overlay h3 {
        font-size: 16px !important;
    }

    #close-position-overlay .close-pos-row {
        font-size: 12px !important;
    }

    #close-position-cancel-btn,
    #close-position-confirm-btn {
        padding: 10px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 380px) {
    #close-position-overlay > div {
        padding: 12px !important;
        width: 97% !important;
    }

    #close-position-cancel-btn,
    #close-position-confirm-btn {
        padding: 8px !important;
        font-size: 12px !important;
    }
}

/* ===== ORDERS TAB BUTTONS RESPONSIVE ===== */

@media (max-width: 768px) {
    .button__container {
        height: auto !important;
        min-height: 38px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .button__container .rushButton {
        font-size: 12px !important;
        padding: 8px 12px !important;
        white-space: nowrap;
        flex-shrink: 0;
    }
}

@media (max-width: 480px) {
    .button__container .rushButton {
        font-size: 11px !important;
        padding: 6px 8px !important;
    }
}

/* ===== ORDERS TABLE MOBILE IMPROVEMENTS ===== */

@media (max-width: 768px) {
    .orders-list table th,
    .orders-list table td {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }

    .orders-list .close-order-btn {
        font-size: 10px !important;
        padding: 4px 8px !important;
        white-space: nowrap;
    }
}

@media (max-width: 600px) {
    .orders-list table th,
    .orders-list table td {
        padding: 5px 6px !important;
        font-size: 10px !important;
    }
}

/* ===== ORDER BOOK RESPONSIVE ===== */

@media (max-width: 600px) {
    .book__title {
        font-size: 14px !important;
        padding: 6px 12px !important;
    }

    .book__names {
        padding: 6px 12px !important;
        font-size: 10px !important;
    }

    .book__item {
        font-size: 10px !important;
        padding: 2px 12px !important;
    }

    .book__price {
        padding: 6px 10px !important;
    }

    .book__price span {
        font-size: 13px !important;
    }

    #spread-display {
        font-size: 10px !important;
    }
}

/* ===== RECENT TRADES RESPONSIVE ===== */

@media (max-width: 600px) {
    .trades__title {
        font-size: 14px !important;
        padding: 6px 12px !important;
    }

    .trades__names {
        padding: 4px 12px !important;
    }

    .trades__names-item {
        font-size: 10px !important;
    }

    .trades__item {
        font-size: 10px !important;
        padding: 0 12px !important;
    }
}

/* ===== TRADING INFO BAR (TOP) RESPONSIVE ===== */

@media (max-width: 600px) {
    .info__container {
        gap: 6px !important;
    }

    .info__pare {
        font-size: 14px !important;
    }

    .info__price {
        font-size: 14px !important;
    }

    .info__stats-title {
        font-size: 9px !important;
    }

    .info__stats-value {
        font-size: 11px !important;
    }
}

@media (max-width: 420px) {
    .info__stats {
        display: none;
    }

    .info__stats:nth-child(-n+4) {
        display: block;
    }

    .info__block {
        margin-right: 8px !important;
    }
}

/* ===== ORDER FORM TABS RESPONSIVE ===== */

@media (max-width: 600px) {
    .order__tab-fbGht .order__switch-title {
        font-size: 12px !important;
        padding: 8px 6px !important;
    }

    .order__buy,
    .order__sell {
        padding: 10px 12px 14px !important;
    }
}

@media (max-width: 420px) {
    .order__tab-fbGht .order__switch-title {
        font-size: 11px !important;
        padding: 6px 4px !important;
    }
}

/* ===== LEVERAGE SELECTOR RESPONSIVE ===== */

@media (max-width: 600px) {
    .leverage-btn {
        font-size: 12px !important;
        padding: 8px 0 !important;
    }
}

/* ===== MOBILE APP BANNER DIALOG RESPONSIVE ===== */

@media (max-width: 480px) {
    .v-dialog.dialog {
        width: 95vw !important;
        max-width: 95vw !important;
    }
}

/* ===== BODY PADDING FOR STATUS BAR ON MOBILE ===== */

@media (max-width: 420px) {
    body.has-status-bar {
        padding-bottom: 70px !important;
    }
}

/* ===== PRINT STYLES ===== */

@media print {
    .mobile-menu,
    .mobile-menu-button,
    .support-chat,
    .main-header {
        display: none !important;
    }
}


/* ===== CHART TOOLBAR ===== */

/*
 * Lets the toolbar wrap instead of running out of the chart card.
 *
 * The row is laid out with inline styles in the template and never wrapped. Seven timeframe buttons plus
 * the Indicators and Draw buttons need roughly 500px, and a button will not shrink below its own label,
 * so on a narrow window - and on any phone - the row ran past the right edge. The card deliberately sets
 * overflow:visible so the two dropdown menus are not clipped, which meant the overflowing buttons were
 * painted outside the card, over whatever sat beside it.
 *
 * Wrapping is safe for the chart height: recalcMainChartSize() measures the toolbar and resizes the
 * candles to what is left, so a second row shortens the chart rather than overlapping it.
 */
#chart-toolbar{
    flex-wrap: wrap;
    gap: 6px;
}

/* The timeframe group and the indicator/draw group. */
#chart-toolbar > div{
    flex-wrap: wrap;
}

/* Each button keeps its natural width and its label stays on one line. */
#chart-toolbar button{
    flex: 0 0 auto;
    white-space: nowrap;
}