/* assets/99_responsive_scale.css

   GETICK — Responsive UI Scaling (LAPTOP-TUNED)

*/



:root{

  /* More aggressive laptop scaling */

  --ui-scale: clamp(0.82, 0.70 + 0.00014 * 100vw, 1.00);



  /* Scale core layout vars */

  --sidebar-w: calc(280px * var(--ui-scale));

  --topbar-h:  calc(72px  * var(--ui-scale));

  --gap-after-topbar: calc(22px * var(--ui-scale));



  --hamburger-left: calc(14px * var(--ui-scale));

  --hamburger-w:    calc(44px * var(--ui-scale));

  --hamburger-gap:  calc(14px * var(--ui-scale));



  /* Typography + spacing */

  --ui-font:    calc(12px * var(--ui-scale));

  --ui-font-sm: calc(11px * var(--ui-scale));

  --ui-font-lg: calc(14px * var(--ui-scale));



  --ui-pad:    calc(10px * var(--ui-scale));

  --ui-gap:    calc(12px * var(--ui-scale));

  --ui-radius: calc(14px * var(--ui-scale));

}



/* Base typography */

body{ font-size: var(--ui-font); }



/* Headlines */

.topbar-title{ font-size: calc(24px * var(--ui-scale)); }

.brand-logo{   font-size: calc(28px * var(--ui-scale)); }



/* Sidebar nav */

.nav-pills .nav-link{

  border-radius: calc(14px * var(--ui-scale));

  padding: calc(10px * var(--ui-scale)) calc(14px * var(--ui-scale));

}



/* Tables */

.market-table{ font-size: calc(12px * var(--ui-scale)); }

.market-table thead th{ padding: calc(10px * var(--ui-scale)); }

.market-table td{ padding: calc(8px * var(--ui-scale)) calc(10px * var(--ui-scale)); }



/* Mobile is handled elsewhere */

@media (max-width: 600px){

  :root{ --ui-scale: 0.78; }

}

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

   TXE Heatmap — Horizontal scroll when clipped (non-ultrawide)

   Put in: /assets/99_responsive_scale.css (VERY END)

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



/* 1) Wrapper: enable horizontal scroll */

@media (max-width: 1440px){



  /* si tu wrapper real es .uw-table-scroll */

  .txe-wrap .uw-table-scroll{

    overflow-x: auto !important;

    overflow-y: auto !important;        /* mantiene scroll vertical si aplica */

    -webkit-overflow-scrolling: touch;  /* iOS smooth */

  }



  /* si en algunos lugares usás .txe-heatmap-scroll */

  .txe-wrap .txe-heatmap-scroll{

    overflow-x: auto !important;

    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;

  }



  /* 2) Table should not shrink weirdly */

  .txe-wrap .txe-heatmap-table{

    width: max-content !important;  /* permite que la tabla sea “más ancha” */

    min-width: 100% !important;     /* pero si entra, ocupa todo */

  }



  /* 3) Optional: keep header readable */

  .txe-wrap .txe-heatmap-table thead th{

    white-space: nowrap;

  }

}

@media (max-width: 1440px){

  .txe-wrap .txe-heatmap-table td,

  .txe-wrap .txe-heatmap-table th{

    min-width: 78px;  /* ajustá a gusto */

  }



  /* Strike column más angosta */

  .txe-wrap .txe-heatmap-table td[data-col="0"],

  .txe-wrap .txe-heatmap-table th:first-child{

    min-width: 60px;

  }

}