/*!
 * Leesbaarheid — 29-08-2026
 * ---------------------------------------------------------------------------
 * De tekst op desktop was te klein. Bootstrap 3.3.6 zet body op 14px, en een
 * groot deel van de componenten draagt daarnaast een EIGEN vaste pixelmaat die
 * niet meeschaalt als je body verandert. Alleen body ophogen levert daarom een
 * scheve pagina op: grotere lopende tekst naast knoppen en invoervelden die op
 * 14px blijven staan.
 *
 * TWEE DINGEN BLIJVEN AF
 *   1. html { font-size: 10px } in de bundel. Daar hangen alle rem-waarden aan;
 *      wie daaraan draait verschuift de hele opmaak.
 *   2. bootstrap.css zelf. Dat is een vendorbestand en verdwijnt bij een
 *      volgende update. Alles staat daarom hier, in een eigen bestand dat NA
 *      style.css wordt geladen.
 *
 * Dit bestand wordt door de voorkant en door het beheerscherm allebei geladen.
 * De selectors zijn Bootstrap-selectors die in beide stapels bestaan; wat maar
 * aan een kant voorkomt staat verderop apart.
 */

/* ---------------------------------------------------------------------------
   1. DE BASIS
   14 wordt 16, en de regelafstand gaat van 1.43 naar 1.5. Een grotere letter
   met dezelfde krappe regelafstand leest niet beter, alleen groter.
--------------------------------------------------------------------------- */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   2. COMPONENTEN MET EEN EIGEN VASTE MAAT
   Deze staan in Bootstrap op 14px en schalen dus NIET mee met body. Zonder
   deze regels blijven knoppen en invoervelden achter bij de rest.

   De kleine varianten - btn-sm, btn-xs, input-sm, badge, label, tooltip -
   blijven bewust op 12px. Daar is klein de bedoeling.
--------------------------------------------------------------------------- */
.form-control,
.input-group-addon,
.btn,
.popover,
.table,
.dropdown-menu > li > a,
.list-group-item,
.alert,
.breadcrumb,
.pagination > li > a,
.pagination > li > span,
.well {
  font-size: 16px;
}

/* De hoogte van een invoerveld staat in Bootstrap vast op 34px. Dat is gerekend
   met 14px tekst; met 16px loopt de letter tegen de rand. 38px is dezelfde
   berekening met de nieuwe maat: 16 x 1.42857 afgerond 23, plus 12 binnenruimte,
   plus 2 rand. De knop komt met dezelfde binnenruimte op precies dezelfde
   hoogte uit, zodat een input-group op een rij blijft staan. */
.form-control { height: 38px; }
textarea.form-control,
select[multiple].form-control { height: auto; }

/* De grote varianten in verhouding mee. */
.input-lg,
.btn-lg,
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn { font-size: 20px; }
.input-lg,
.input-group-lg > .form-control { height: 50px; }

/* ---------------------------------------------------------------------------
   3. KOPPEN
   h5 stond op 14px en h6 op 12px: allebei kleiner dan de nieuwe lopende tekst,
   wat een kop tot een voetnoot maakt. De grotere koppen h1 tot en met h4 staan
   al ruim boven 16px en blijven zoals ze zijn.
--------------------------------------------------------------------------- */
h5, .h5 { font-size: 16px; }
h6, .h6 { font-size: 14px; }
.panel-title { font-size: 18px; }
.lead { font-size: 18px; }
legend { font-size: 22px; }

/* ---------------------------------------------------------------------------
   4. HULPTEKST: GROTER EN DONKERDER
   De grijstint uit Bootstrap is #777 en dat haalt op wit 4,48:1 - net onder de
   4,5:1 van AA. Op de lichtgrijze paneelachtergrond #f8fafc zakt hij naar
   4,28:1. Deze tint haalt 5,98:1 op wit en 5,72:1 op dat paneel, dus ook met
   wat speling boven de grens.

   De maat gaat van 12 naar 14px: hulptekst hoort kleiner te zijn dan de tekst
   erboven, maar niet onleesbaar.
--------------------------------------------------------------------------- */
.help-block,
.text-muted,
.form-text,
small.text-muted {
  color: #5b6472;
  font-size: 14px;
}
/* Op een donkere ondergrond zou die tint juist verdwijnen; daar blijft de
   lichte variant staan. */
.bg-dark .text-muted,
.navbar-inverse .text-muted,
footer .text-muted { color: #c7ccd4; }

/* small en .small staan in Bootstrap op 85% en schalen dus vanzelf mee met de
   nieuwe body; die hoeven hier niet genoemd te worden. */

/* ---------------------------------------------------------------------------
   5. DE BALK BOVENAAN HET BEHEERSCHERM
   De hoogte daarvan is vastgezet op 50px, gerekend met 15px binnenruimte boven
   en onder plus een regelhoogte van 20px. Met 16px tekst wordt die regelhoogte
   24 en groeit de balk naar 54px, waardoor hij niet meer aansluit op de
   zijbalk. De binnenruimte gaat daarom naar 13px, zodat de balk exact 50px
   blijft: 13 + 24 + 13.
--------------------------------------------------------------------------- */
.navbar-nav > li > a {
  padding-top: 13px;
  padding-bottom: 13px;
}

/* ---------------------------------------------------------------------------
   6. LOSSE LEESTEKST DIE OP 12 OF 13px STOND
   Alleen tekst die je echt LEEST. Prijsregels, tabbladen, meldingen in
   pop-ups, notities. Wat een merkje, een pictogram of een bewust klein
   knopje is blijft staan waar het stond.
--------------------------------------------------------------------------- */
/* voorkant */
.nav-tabs,
.block-pad .content a,
.price_details,
.discounts,
.searchbox input,
.selectz { font-size: 13px; }

.itemlabel3,
.labelleft2,
.select2-choice,
.datepicker.dropdown-menu:not(.clockface),
.search_choose_country_btn,
.packs_list .packTitle .item_price { font-size: 14px; }

/* beheerscherm: de pop-ups en de notitieblokken zijn lopende tekst */
.car_cities_prices_popup,
.car_transfer_enable_city_popup,
.car_transfer_edit_city_popup,
.car_transfer_delete_city_popup,
.note_delete_popup,
.note_edit_popup,
.user_note_popup,
.car_supplier_cities_popup { font-size: 14px; }

/* ---------------------------------------------------------------------------
   7. HET BEHEERSCHERM HEEFT EEN EIGEN SCHAAL
   apple-admin.css legt over Bootstrap heen een eigen maatvoering, en schrijft
   die met een body-voorvoegsel: "body .form-control" weegt zwaarder dan de
   ".form-control" hierboven, dus die regels komen daar niet doorheen. Voor het
   beheerscherm staat het daarom nog een keer, met hetzelfde voorvoegsel.

   Dit bestand wordt na apple-admin.css geladen, dus bij gelijk gewicht wint
   deze. De selectors zijn letterlijk overgenomen uit apple-admin.css, zodat
   een invoerveld binnen .apple dezelfde maat houdt als een .form-control.

   Ze staan wel op body.pt-admin en niet op body: dit bestand wordt ook door
   de voorkant geladen, en een kale "body label { 14px }" bepaalde daar de
   maat van elk label op de openbare site. Die klasse zet
   Admin/views/includes/header.php.

   Wat NIET meegroeit, en waarom:
     - tabelkoppen (11px, hoofdletters, met letterafstand) zijn een kopje boven
       een kolom, geen leestekst
     - btn-sm (12px), btn-xs (11px), .badge en .label zijn bewust klein
     - de tint van de hulptekst is hier #6E6E73 en haalt op wit 5,07:1. Die
       zit dus al boven AA en blijft staan; alleen de maat gaat omhoog.
--------------------------------------------------------------------------- */
body.pt-admin .form-control,
body.pt-admin .apple input[type="text"], body.pt-admin .apple input[type="email"],
body.pt-admin .apple input[type="number"], body.pt-admin .apple input[type="password"],
body.pt-admin .apple input[type="date"], body.pt-admin .apple input[type="search"],
body.pt-admin .apple input[type="url"], body.pt-admin .apple input[type="tel"],
body.pt-admin .apple select, body.pt-admin .apple textarea {
  height: 38px;
  font-size: 16px;
}
body.pt-admin textarea.form-control, body.pt-admin .apple textarea { height: auto; }

body.pt-admin label { font-size: 14px; }
body.pt-admin .help-block { font-size: 13px; }

body.pt-admin .btn, body.pt-admin .apple .btn { font-size: 14px; }
body.pt-admin .btn-lg { font-size: 16px; }

body.pt-admin .table > tbody > tr > td { font-size: 14px; }