/* =========================================================

   GETICK — Mobile Layout & Density (ULTRA COMPACT)

   Content-only overrides (no sidebar logic)

   ========================================================= */



@media (max-width: 600px){



  /* ---------------------------------------------------------

     Global mobile density

     --------------------------------------------------------- */

  :root{

    --ui-scale: 0.72;            /* smaller, trader-dense */

    --gap-after-topbar: 12px;    /* reduce vertical dead space */

  }



  /* Prevent sideways scrolling */

  html, body{

    overflow-x: hidden;

  }



  /* ---------------------------------------------------------

     Page padding

     --------------------------------------------------------- */

  .content{

    padding-left: 10px !important;

    padding-right: 10px !important;

    padding-bottom: 12px !important;

  }



  /* ---------------------------------------------------------

     Topbar

     --------------------------------------------------------- */

  .topbar{

    padding: 8px 10px !important;

    backdrop-filter: blur(12px);

  }



  .topbar-title{

    font-size: 16px !important;

    letter-spacing: .2px;

  }



  .brand-logo{

    font-size: 20px !important;

  }



  /* ---------------------------------------------------------

     Cards

     --------------------------------------------------------- */

  .ui-card{

    border-radius: 12px !important;

  }



  .ui-card-header{

    padding: 8px 10px !important;

    font-size: 12.8px !important;

  }



  .ui-card-body{

    padding: 8px 10px !important;

  }



  /* ---------------------------------------------------------

     Buttons

     --------------------------------------------------------- */

  .btn,

  .btn-brand{

    padding: 7px 9px !important;

    border-radius: 12px !important;

    font-size: 12.5px !important;

  }



  /* ---------------------------------------------------------

     Tables — compact & swipeable

     --------------------------------------------------------- */

  .market-table,

  .uw-table{

    display: block;

    overflow-x: auto;

    white-space: nowrap;



    font-size: 11px !important;

    -webkit-overflow-scrolling: touch;

  }



  .market-table thead th{

    padding: 6px 6px !important;

  }



  .market-table td{

    padding: 6px 6px !important;

  }



  /* ---------------------------------------------------------

     Plotly charts

     --------------------------------------------------------- */

  .js-plotly-plot,

  .dash-graph{

    max-height: 280px !important;

  }



  /* ---------------------------------------------------------

     Bootstrap grid spacing

     --------------------------------------------------------- */

  .row, .g-1, .g-2, .g-3, .g-4{

    --bs-gutter-x: 10px;

    --bs-gutter-y: 10px;

  }



  /* ---------------------------------------------------------

     Inputs / dropdowns

     --------------------------------------------------------- */

  input, select, textarea{

    font-size: 12.5px !important;

  }

}



/* Extra-tight for very small phones */

@media (max-width: 380px){

  :root{

    --ui-scale: 0.68;

  }

}