/* =========================================================
   RTP PLATFORM
   GLOBAL RESPONSIVE SYSTEM
   Desktop + Tablet + Mobile
   ========================================================= */


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 1024px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    main,
    .main-content,
    .content,
    .page-content {
        max-width: 100%;
        box-sizing: border-box;
    }

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

    .watchlist {
        width: 100% !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 768px) {

    * {
        box-sizing: border-box;
    }

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }


    /* -----------------------------------------------------
       GLOBAL PAGE LAYOUT
       ----------------------------------------------------- */

    .app,
    .app-container,
    .layout,
    .dashboard-layout,
    .main-layout,
    .page-layout {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    /* -----------------------------------------------------
       SIDEBAR
       ----------------------------------------------------- */

    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -280px !important;

        width: 260px !important;
        max-width: 80vw !important;
        height: 100vh !important;

        margin: 0 !important;
        z-index: 99999 !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        transition: left 0.25s ease !important;
    }


    .sidebar.active,
    .sidebar.open,
    .sidebar.show {
        left: 0 !important;
    }


    /* -----------------------------------------------------
       MAIN CONTENT
       ----------------------------------------------------- */

    main,
    .main-content,
    .content,
    .page-content,
    .dashboard-content {

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 12px !important;

        box-sizing: border-box !important;
    }


    /* Remove desktop offsets */

    main[style],
    .main-content[style],
    .content[style] {
        margin-left: 0 !important;
        width: 100% !important;
    }


    /* -----------------------------------------------------
       HEADER / TOPBAR
       ----------------------------------------------------- */

    header,
    .header,
    .topbar,
    .top-header {

        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------------------
       DASHBOARD
       ----------------------------------------------------- */

    .dashboard-grid {

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .dashboard-grid > * {

        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        margin-bottom: 14px !important;
    }


    /* -----------------------------------------------------
       CARDS
       ----------------------------------------------------- */

    .card,
    .stat-card,
    .account-card,
    .chart-box,
    .watchlist,
    .panel,
    .box {

        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding: 14px !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------------------
       GRID SYSTEM
       ----------------------------------------------------- */

    .stats-grid,
    .cards-grid,
    .metrics-grid,
    .accounts-grid,
    .analytics-grid {

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
    }


    .stats-grid > *,
    .cards-grid > *,
    .metrics-grid > *,
    .accounts-grid > *,
    .analytics-grid > * {

        width: 100% !important;
        max-width: 100% !important;

        margin-bottom: 14px !important;
    }


    /* -----------------------------------------------------
       TABLES
       ----------------------------------------------------- */

    .table-container,
    .table-wrapper {

        width: 100% !important;
        max-width: 100% !important;

        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }


    table {

        width: 100% !important;
        max-width: 100% !important;

        font-size: 13px !important;
    }


    th,
    td {

        padding: 8px !important;

        white-space: nowrap;
    }


    /* -----------------------------------------------------
       BUTTONS
       ----------------------------------------------------- */

    button {

        max-width: 100%;
        box-sizing: border-box;
    }


    .dashboard-symbol-buttons,
    .top-right,
    .symbol-buttons,
    .market-buttons {

        display: flex !important;

        flex-wrap: wrap !important;

        gap: 6px !important;

        width: 100% !important;
    }


    .dashboard-symbol-buttons button,
    .top-right button,
    .symbol-buttons button,
    .market-buttons button {

        flex: 0 0 auto !important;

        padding: 8px 13px !important;

        font-size: 13px !important;
    }


    /* -----------------------------------------------------
       FORMS
       ----------------------------------------------------- */

    input,
    select,
    textarea {

        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;

        font-size: 15px !important;
    }


    /* -----------------------------------------------------
       TRADINGVIEW
       ----------------------------------------------------- */

    .tradingview-widget-container {

        width: 100% !important;
        max-width: 100% !important;

        overflow: hidden !important;
    }


    .chart-placeholder {

        width: 100% !important;
        max-width: 100% !important;

        min-height: 380px !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------------------
       HEADINGS
       ----------------------------------------------------- */

    h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    h2 {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }

    h3 {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }


    /* -----------------------------------------------------
       TEXT
       ----------------------------------------------------- */

    p,
    li,
    span {

        max-width: 100%;
    }


    /* -----------------------------------------------------
       IMAGES
       ----------------------------------------------------- */

    img {

        max-width: 100%;
        height: auto;
    }


    /* -----------------------------------------------------
       SECTIONS
       ----------------------------------------------------- */

    section {

        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;
    }
}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media screen and (max-width: 480px) {

    main,
    .main-content,
    .content,
    .page-content,
    .dashboard-content {

        padding: 10px !important;
    }


    h1 {
        font-size: 25px !important;
    }

    h2 {
        font-size: 20px !important;
    }

    h3 {
        font-size: 17px !important;
    }


    .card,
    .stat-card,
    .account-card,
    .chart-box,
    .watchlist,
    .panel,
    .box {

        padding: 12px !important;
    }


    .dashboard-symbol-buttons button,
    .top-right button,
    .symbol-buttons button,
    .market-buttons button {

        padding: 8px 11px !important;

        font-size: 12px !important;
    }


    table {

        font-size: 12px !important;
    }


    th,
    td {

        padding: 7px !important;
    }
}