/* =========================
   CM GearCalc (Shoptet)
   cílová šířka: max 800px
   ========================= */

#cm-gearcalc{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#111;
}
#cm-gearcalc *{ box-sizing:border-box; }

#cm-gearcalc .wrap{
  max-width:800px;          /* <-- tvůj limit */
  margin:0 auto;
  padding:14px;
}

#cm-gearcalc h2{ margin:0 0 6px; font-size:20px; }
#cm-gearcalc .sub{ margin:0 0 14px; color:#555; font-size:13px; }

/* 2 panely vedle sebe jen když je opravdu místo */
#cm-gearcalc .grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
@media (min-width: 860px){
  #cm-gearcalc .grid{ grid-template-columns: 1fr 1fr; }
}

#cm-gearcalc .panel{
  border:1px solid #ddd;
  background:#fff;
  padding:12px;
  border-radius:12px;
}
#cm-gearcalc .panel h3{ margin:0 0 10px; font-size:16px; }
#cm-gearcalc .smallTitle{ margin:0 0 8px; font-size:14px; }

/* bloky */
#cm-gearcalc .blocks{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-bottom:12px;
}
#cm-gearcalc .block{
  border:1px solid #eee;
  background:#fafafa;
  border-radius:12px;
  padding:10px;
  min-width:0;
}
#cm-gearcalc .blockTitle{
  font-size:12px;
  font-weight:900;
  color:#333;
  margin:0 0 8px 0;
  letter-spacing:.2px;
  text-transform:uppercase;
}

#cm-gearcalc .row{ display:flex; gap:10px; flex-wrap:wrap; }
#cm-gearcalc .field{ flex:1 1 190px; min-width:150px; }

#cm-gearcalc label{
  display:block;
  font-size:12px;
  color:#555;
  margin:0 0 6px;
  line-height:1.2;
}

/* --- sjednocení Shoptet form prvků --- */
#cm-gearcalc select,
#cm-gearcalc input[type="number"]{
  width:100%;
  height:40px;
  line-height:40px;
  padding:0 10px;
  border:1px solid #ccc;
  border-radius:10px;
  font-size:14px;
  background:#fff;
}

#cm-gearcalc input[type="range"]{
  width:100%;
  accent-color:#c40000;
}

/* převodníky */
#cm-gearcalc .rings{ display:flex; gap:8px; flex-wrap:wrap; }
#cm-gearcalc .rings input{
  width:78px;               /* menší než dřív */
  text-align:center;
  height:38px;
  line-height:38px;
  padding:0 8px;
}

/* =========================
   Výstupy: tabulka + souhrn
   ========================= */

#cm-gearcalc .outGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

/* souhrn pod tabulkou (šetří šířku) */
#cm-gearcalc .summary{
  border:1px solid #eee;
  background:#fafafa;
  padding:10px;
  border-radius:12px;
  font-size:13px;
  color:#222;
}
#cm-gearcalc .summary b{ font-weight:800; }
#cm-gearcalc .summary .kv{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin:6px 0;
}
#cm-gearcalc .summary .kv span{ color:#555; }
#cm-gearcalc .summary .hr{ height:1px; background:#e7e7e7; margin:10px 0; }

/* tabulky vždy v wrapperu, aby nikdy nepřetekly */
#cm-gearcalc .tableWrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:10px;
}

/* =========================
   TABULKY – hodně kompaktní
   ========================= */

#cm-gearcalc table{
  width:max-content;        /* <-- klíč: tabulka se smrskne podle obsahu */
  min-width:100%;           /* ale nikdy menší než panel */
  border-collapse:collapse;
}

#cm-gearcalc th,
#cm-gearcalc td{
  border:1px solid #eee;
  padding:3px 4px;          /* hodně úzké */
  font-size:11px;           /* menší písmo */
  text-align:center;
  vertical-align:middle;
  white-space:nowrap;
}

#cm-gearcalc th{
  background:#f5f5f5;
  font-weight:800;
}

/* první sloupec (Pastorek) extra úzký */
#cm-gearcalc th:first-child,
#cm-gearcalc td:first-child{
  width:46px;
  padding-left:3px;
  padding-right:3px;
  font-weight:800;
  background:#fbfbfb;
}

/* zelené překryvy */
#cm-gearcalc td.inrange{ background: rgba(46, 204, 113, 0.14); }

/* =========================
   Kadence + rychlosti
   ========================= */

#cm-gearcalc .cadenceBox{
  margin-top:14px;
  border:1px solid #ddd;
  background:#fff;
  padding:12px;
  border-radius:12px;
}
#cm-gearcalc .cadTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
#cm-gearcalc .cadVal{ font-weight:900; }
#cm-gearcalc .muted{ color:#666; font-size:12px; }

#cm-gearcalc .speedGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:12px;
}
@media (min-width: 860px){
  #cm-gearcalc .speedGrid{ grid-template-columns:1fr 1fr; }
}

/* =========================
   Sdílení
   ========================= */
#cm-gearcalc .shareBar{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
#cm-gearcalc .shareMsg{ font-size:12px; color:#666; }
#cm-gearcalc .shareBtn{
  border:1px solid #ccc;
  background:#fff;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
}