/* O9C compact mobile UI — presentation only. */
:root{
  --o9c-blue:#004B93;
  --o9c-cyan:#00AEEF;
  --o9c-dark:#172B4D;
  --o9c-bg:#F3F8FC;
  --o9c-card:#FFFFFF;
  --o9c-border:#D8E6F2;
  --o9c-text:#102033;
  --o9c-muted:#63748a;
  --o9c-green:#0F8A4B;
  --o9c-yellow:#FFD200;
}

.o9c-nav{
  background:linear-gradient(90deg,var(--o9c-blue),var(--o9c-cyan));
  color:white;
  border-bottom:4px solid var(--o9c-yellow);
  padding:12px 18px;
  position:sticky;
  top:0;
  z-index:1000;
  box-shadow:0 2px 12px rgba(0,0,0,.14);
}

.o9c-nav-inner{
  max-width:1500px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.o9c-brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:white;
  text-decoration:none;
  font-weight:900;
  margin-right:8px;
  white-space:nowrap;
}

.o9c-brand img{
  height:30px;
  width:auto;
  background:white;
  border-radius:8px;
  padding:4px 6px;
}

.o9c-mainnav{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.o9c-link,
.o9c-nav summary{
  color:white;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12);
  border-radius:999px;
  padding:9px 12px;
  font-weight:850;
  line-height:1;
  cursor:pointer;
  list-style:none;
  min-height:38px;
  display:flex;
  align-items:center;
}

.o9c-nav summary::-webkit-details-marker{display:none;}
.o9c-link.active,
.o9c-nav details[open] > summary,
.o9c-link:hover,
.o9c-nav summary:hover{
  background:white;
  color:var(--o9c-blue);
}

.o9c-group{
  position:relative;
}

.o9c-menu{
  display:grid;
  gap:6px;
  min-width:210px;
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  background:white;
  color:var(--o9c-text);
  border:1px solid var(--o9c-border);
  border-radius:16px;
  padding:8px;
  box-shadow:0 14px 30px rgba(10,35,109,.18);
}

.o9c-menu a{
  color:var(--o9c-blue);
  text-decoration:none;
  font-weight:850;
  padding:10px 12px;
  border-radius:12px;
}

.o9c-menu a.active,
.o9c-menu a:hover{
  background:var(--o9c-bg);
}

/* Algemene breedtebescherming */
html, body{
  max-width:100%;
  overflow-x:hidden;
}

main{
  max-width:1500px;
  margin-left:auto;
  margin-right:auto;
}

.o8b-tablewrap,
.tablewrap,
.table-wrap{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* Dashboard en operationele pagina's: technische kolommen standaard compacter. */
body[data-o9c-page="root"] table th:nth-child(3),
body[data-o9c-page="root"] table td:nth-child(3),
body[data-o9c-page="root"] table th:nth-child(4),
body[data-o9c-page="root"] table td:nth-child(4),
body[data-o9c-page="root"] table th:nth-child(7),
body[data-o9c-page="root"] table td:nth-child(7),
body[data-o9c-page="vertrekken"] table th:nth-child(3),
body[data-o9c-page="vertrekken"] table td:nth-child(3),
body[data-o9c-page="vertrekken"] table th:nth-child(4),
body[data-o9c-page="vertrekken"] table td:nth-child(4),
body[data-o9c-page="vertrekken"] table th:nth-child(7),
body[data-o9c-page="vertrekken"] table td:nth-child(7),
body[data-o9c-page="aankomsten"] table th:nth-child(3),
body[data-o9c-page="aankomsten"] table td:nth-child(3),
body[data-o9c-page="aankomsten"] table th:nth-child(4),
body[data-o9c-page="aankomsten"] table td:nth-child(4),
body[data-o9c-page="aankomsten"] table th:nth-child(7),
body[data-o9c-page="aankomsten"] table td:nth-child(7){
  display:none;
}

/* Onderweg-radar kolommen: status, tijd, omloop, route, dienst, bus blijven zichtbaar. */
body[data-o9c-page="omloopradar"] table th:nth-child(4),
body[data-o9c-page="omloopradar"] table td:nth-child(4),
body[data-o9c-page="omloopradar"] table th:nth-child(5),
body[data-o9c-page="omloopradar"] table td:nth-child(5),
body[data-o9c-page="omloopradar"] table th:nth-child(8),
body[data-o9c-page="omloopradar"] table td:nth-child(8),
body[data-o9c-page="onderweg-radar"] table th:nth-child(4),
body[data-o9c-page="onderweg-radar"] table td:nth-child(4),
body[data-o9c-page="onderweg-radar"] table th:nth-child(5),
body[data-o9c-page="onderweg-radar"] table td:nth-child(5),
body[data-o9c-page="onderweg-radar"] table th:nth-child(8),
body[data-o9c-page="onderweg-radar"] table td:nth-child(8){
  display:none;
}

body[data-o9c-page] table td[data-label="Tijd"],
body[data-o9c-page] table td[data-label="Bus"],
body[data-o9c-page] table td[data-label="Omloop"],
body[data-o9c-page] table td[data-label="Route"],
body[data-o9c-page] table td[data-label="Status"]{
  font-weight:850;
}

body[data-o9c-page] .o8b-badge,
body[data-o9c-page] .badge{
  white-space:nowrap;
}

/* Mobiel: tabellen worden kaartregels met labels. */
@media (max-width:760px){
  .o9c-nav{
    position:sticky;
    padding:10px;
  }

  .o9c-nav-inner{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  .o9c-brand{
    justify-content:flex-start;
    font-size:1rem;
  }

  .o9c-mainnav{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    width:100%;
  }

  .o9c-link,
  .o9c-nav summary{
    width:100%;
    border-radius:14px;
    justify-content:space-between;
  }

  .o9c-group{
    width:100%;
  }

  .o9c-menu{
    position:static;
    width:100%;
    min-width:0;
    box-shadow:none;
    margin-top:6px;
    border-radius:14px;
  }

  main{
    width:100%;
    padding-left:10px !important;
    padding-right:10px !important;
  }

  .card,
  .panel,
  section,
  article{
    max-width:100%;
  }

  table{
    width:100%;
    min-width:0 !important;
    border-collapse:separate !important;
    border-spacing:0 10px !important;
  }

  table thead{
    display:none !important;
  }

  table,
  table tbody,
  table tr,
  table td{
    display:block;
    width:100%;
  }

  table tr{
    background:white;
    border:1px solid var(--o9c-border);
    border-radius:16px;
    margin-bottom:10px;
    padding:10px;
    box-shadow:0 2px 10px rgba(20,45,80,.06);
  }

  table td{
    border:0 !important;
    padding:7px 4px !important;
    display:grid !important;
    grid-template-columns:minmax(92px,38%) minmax(0,1fr);
    gap:10px;
    align-items:start;
    white-space:normal !important;
    overflow-wrap:anywhere;
  }

  table td::before{
    content:attr(data-label);
    color:var(--o9c-muted);
    font-weight:850;
    font-size:.82rem;
    text-transform:uppercase;
    letter-spacing:.02em;
  }

  table td[data-label="Lijn/type"],
  table td[data-label="Rit"],
  table td[data-label="Materieel"],
  body[data-o9c-page="diensten"] table td[data-label="Regels"],
  body[data-o9c-page="diensten"] table td[data-label="Ritten"],
  body[data-o9c-page="diensten"] table td[data-label="Materieel"],
  body[data-o9c-page="omlopen"] table td[data-label="Regels"],
  body[data-o9c-page="omlopen"] table td[data-label="Materieel"]{
    display:none !important;
  }

  body[data-o9c-page="aankomsten"] table td[data-label="Acties"]{
    grid-template-columns:1fr;
  }

  body[data-o9c-page="aankomsten"] table td[data-label="Acties"]::before{
    content:"Acties";
    margin-bottom:4px;
  }

  form,
  input,
  select,
  textarea,
  button,
  .button,
  .btn{
    max-width:100%;
  }

  .o8b-actions,
  .actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .o8b-actions form,
  .actions form{
    width:100%;
  }

  .o8b-actions button,
  .actions button{
    width:100%;
  }
}


/* GARAGE_TABLE_5COL_VISIBLE_START
   De garage-tabellen hebben nu zelf exact 5 kolommen:
   Tijd | Omloop | Route | Dienst | Bus.
   Oude nth-child-regels verborgen kolom 3/4/7 voor de oude 8-kolomstabel.
   Voor deze nieuwe tabellen moeten alle 5 kolommen zichtbaar blijven.
*/
body[data-o9c-page="root"] table[data-garage-single-time-route-table="1"] th,
body[data-o9c-page="root"] table[data-garage-single-time-route-table="1"] td,
body[data-o9c-page="vertrekken"] table[data-garage-single-time-route-table="1"] th,
body[data-o9c-page="vertrekken"] table[data-garage-single-time-route-table="1"] td,
body[data-o9c-page="aankomsten"] table[data-garage-single-time-route-table="1"] th,
body[data-o9c-page="aankomsten"] table[data-garage-single-time-route-table="1"] td,
body[data-o9c-page="root"] table[data-o14-final-garage-table="1"] th,
body[data-o9c-page="root"] table[data-o14-final-garage-table="1"] td,
body[data-o9c-page="vertrekken"] table[data-o14-final-garage-table="1"] th,
body[data-o9c-page="vertrekken"] table[data-o14-final-garage-table="1"] td,
body[data-o9c-page="aankomsten"] table[data-o14-final-garage-table="1"] th,
body[data-o9c-page="aankomsten"] table[data-o14-final-garage-table="1"] td {
  display: table-cell !important;
}
/* GARAGE_TABLE_5COL_VISIBLE_END */