/* ========================================
   NOTE / FREQ APP STYLES
   ======================================== */



/* ========================================
   GLOBAL RESET
   ======================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Body gradient achtergrond */
body {
  background: linear-gradient(145deg, #f7f7f7, #eaeaea) !important;
  margin: 0;
  padding: 0;
}

/* ========================================
   JSON BOX - VERBERGEN
   ======================================== */
.jsonld-box {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

/* ========================================
   APP CONTAINER
   ======================================== */
#freq-calc-container {
  font-weight: 500;
  border: none;
  border-radius: 0;
  background: transparent !important;
  padding: 10px 16px 16px 16px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ========================================
   BUTTONS
   ======================================== */
#freq-calc-container button {
  border: 1px solid #ccc;
  background-color: #fff;
  color: #333;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
  border-radius: 4px;
  font-size: 1em;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

#freq-calc-container button:hover {
  box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
}

.arrow-button {
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 1.5em;
  font-weight: 700;
  background: none;
  border: none;
  cursor: pointer;
  color: #000;
}

/* ========================================
   LOGO
   ======================================== */
#logo-container {
  text-align: center;
  margin-bottom: 10px;
}

#logo-container img {
  max-height: 50px;
  opacity: 0.75;
}

/* ========================================
   SLIDER TILE
   ======================================== */
.slider-tile {
  margin-bottom: 4px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.slider-tile .label-text {
  font-size: 1.2em;
  font-weight: 600;
  margin-bottom: 0;
  display: block;
}

.slider-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.slider-control input[type="range"] {
  flex: 1;
  margin: 10px 0;
  min-width: 0;
  max-width: 100%;
}

/* ========================================
   FREQUENCY TABLE
   ======================================== */
#scale-table {
  margin-top: 20px;
  margin-bottom: 12px;
  width: 100%;
  text-align: center;
}

#scale-table table {
  width: 100%;
  max-width: 343px;
  margin: 0 auto;
  border-spacing: 0;
  border-collapse: collapse;
  font-size: 1em;
  table-layout: fixed;
}

#scale-table colgroup col:nth-child(1) {
  width: 26%;
}

#scale-table colgroup col:nth-child(2),
#scale-table colgroup col:nth-child(3) {
  width: 37%;
}

#scale-table th, 
#scale-table td {
  border: 1px solid #ccc;
  padding: 3px 5px;
  text-align: center;
  line-height: 1.2;
}

#scale-table th {
  background-color: #e8f4f8;
  font-weight: bold;
}

/* ========================================
   HEADER - VERBORGEN
   ======================================== */
.app-header {
  display: none !important;
}

/* ========================================
   MOBILE - FULLSCREEN
   ======================================== */
@media (max-width: 768px) {
  /* App container */
  #freq-calc-container {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 10px 16px 16px 16px !important;
    box-sizing: border-box !important;
  }

  /* Bottom navigation op mobile */
  .app-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  /* Slider fixes op mobile */
  .slider-tile {
    padding: 0 8px;
    box-sizing: border-box;
  }

  .slider-control {
    max-width: 100%;
    overflow: hidden;
  }

  .slider-control input[type="range"] {
    min-width: 0 !important;
    width: 100%;
  }

  .arrow-button {
    flex-shrink: 0;
  }
}

/* ========================================
   DESKTOP - GSM FORMAAT
   ======================================== */
@media (min-width: 769px) {
  /* App container desktop */
  #freq-calc-container {
    width: 100% !important;
    max-width: 100% !important;   /* of 400px als je wil */
    height: 812px !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    margin: 0 !important;
  }
  
  /* Body layout desktop */
  body {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-height: 100vh !important;
    padding-top: 0 !important;
  }

  /* Bottom navigation desktop - binnen app container */
  body .app-bottom-nav {
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 1000 !important;
    margin: 0 !important;
  }
}


/* Dit staat WEL in de oude app maar NIET in tool.css: */

.slider-tile .label-text {
/*font-family: Roboto, "Segoe UI", Inter, system-ui, -apple-system, Arial, sans-serif!important;*/
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

 /* font-family: 'Roboto Condensed', sans-serif !important;*/
font-weight: 600 !important;
  font-size: 1.3em;
}

.arrow-button {
  width: 40px;
  height: 40px;
  /* FORCE same button look */
  -webkit-appearance:none;
  appearance:none;
  background:#fff !important;
  border:1px solid rgba(0,0,0,.18) !important;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.18) !important;



display:flex;
  align-items:center;      /* verticaal */
  justify-content:center;  /* horizontaal */
  padding:0;               /* voorkomt “offset” door default padding */
  line-height:0;           /* voorkomt baseline-gedoe */

}

.arrow-button svg {
  width: 24px !important; 
  height: 24px !important;  
  display: block;
}

/* Table zebra stripes */
#scale-table tr:nth-child(even) {
  background-color: #fff;
}

#scale-table tr:nth-child(odd) {
  background-color: #f9f9f9;
}

/* Base voor de hele tabel */
#scale-table table{
  /*font-family: Roboto, "Segoe UI", Inter, system-ui, -apple-system, Arial, sans-serif!important;*/
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px !important;     /* of 1em, maar px is hier super duidelijk */
}

/* Cells: zelfde size */
#scale-table th,
#scale-table td{
  font-size: 1em !important;      /* = 16px */
  line-height: 1.2 !important;    /* optioneel: maakt header/body ook visueel gelijk */
}

/* Gewichten */
#scale-table td{ font-weight: 400 !important; }
#scale-table th{ font-weight: 700 !important; }