/* =============================================================
   DENTIST TYCOON — style.css
   Retro Windows-95/98-look: grijze panelen, 3D-beveled knoppen,
   blauwe titelbalken en een pixelig bitmapfont-gevoel.
   ============================================================= */

:root {
  --face:    #c0c0c0;
  --face-hi: #d4d0c8;
  --light:   #ffffff;
  --shadow:  #808080;
  --dark:    #000000;
  --title:   #000080;
  --title2:  #1084d0;
  --text:    #000000;
  --green:   #007a00;
  --red:     #a00000;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  overflow: hidden;
  background: #0d3c0d;
  font-family: "MS Sans Serif", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 12px;
  color: var(--text);
  -webkit-font-smoothing: none;
  user-select: none;
}

#app { display: flex; flex-direction: column; height: 100%; }

/* ---------- generieke Win95-onderdelen ---------- */

.panel {
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--shadow) var(--shadow) var(--light);
}

.sunken {
  background: var(--face);
  border: 2px solid;
  border-color: var(--shadow) var(--light) var(--light) var(--shadow);
  padding: 4px 6px;
}

.readout {
  background: #000000;
  color: #00e000;
  font-family: "Consolas", "Courier New", monospace;
  font-weight: bold;
  padding: 2px 7px;
  border: 2px solid;
  border-color: var(--shadow) var(--light) var(--light) var(--shadow);
  letter-spacing: .5px;
  white-space: nowrap;
}
.readout.money { color: #ffe14d; min-width: 92px; text-align: right; }
.readout.stars { color: #ffd83d; letter-spacing: 1px; font-size: 13px; }

.btn {
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--shadow) var(--shadow) var(--light);
  padding: 3px 8px;
  font-family: inherit;
  font-size: 11px;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--face-hi); }
.btn:active, .btn.active {
  border-color: var(--shadow) var(--light) var(--light) var(--shadow);
  padding: 4px 7px 2px 9px;
}
.btn:disabled { color: var(--shadow); text-shadow: 1px 1px 0 var(--light); cursor: default; }
.btn.sq { padding: 3px 7px; min-width: 30px; font-size: 11px; }
.btn.sq:active, .btn.sq.active { padding: 4px 6px 2px 8px; }
.btn.wide { display: block; width: 100%; margin: 4px 0; }
.btn.danger { color: #7a0000; font-weight: bold; }
.btn.primary { font-weight: bold; }

.lbl { font-size: 10px; color: #303030; text-transform: uppercase; letter-spacing: .5px; }
.small { font-size: 11px; line-height: 1.45; }
.mt { margin-top: 8px; }
.hidden { display: none !important; }

/* ---------- bovenbalk ---------- */

#topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 6px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}
.tb-group { display: flex; align-items: center; gap: 4px; }
.tb-group + .tb-group { border-left: 1px solid var(--shadow); padding-left: 10px; }
.tb-right { margin-left: auto; border-left: none !important; }
.tb-icon { font-size: 16px; }
.tb-title { font-weight: bold; font-size: 13px; letter-spacing: .3px; }

/* ---------- midden ---------- */

#middle { flex: 1 1 auto; display: flex; min-height: 0; }

#sidebar {
  flex: 0 0 272px;
  padding: 5px;
  display: flex; flex-direction: column;
  overflow-y: auto;
}

.win-title {
  background: linear-gradient(90deg, var(--title), var(--title2));
  color: #ffffff;
  font-weight: bold;
  font-size: 11px;
  padding: 2px 6px;
  margin-bottom: 4px;
}

.tabs { display: flex; gap: 2px; margin-bottom: 5px; }
.tab {
  flex: 1;
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--shadow) var(--shadow) var(--light);
  border-bottom: none;
  padding: 3px 2px;
  font-family: inherit; font-size: 11px;
  cursor: pointer;
}
.tab.active { background: var(--face-hi); font-weight: bold; }

/* Bouwmenu als raster: met veel voorwerpen is een lange lijst
   onwerkbaar. Drie kolommen bij een breed paneel, twee bij een smal. */
.item-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  align-content: start;
  margin-top: 5px;
}

/* De sloophamer staat BOVEN de lijst, samen met het vloerslot dat hem
   afremt. Onder de lijst verdween hij uit beeld zodra er veel items in
   een categorie zaten — en dat gold in elk tabblad opnieuw.

   Hij is ook de enige knop die iets kapot maakt, dus die mag er naar
   uitzien: rood, breed, met het gereedschap ernaast en een regel
   eronder die zegt wat er gebeurt. */
.btn.bulldoze {
  display: flex; align-items: center; gap: 7px;
  width: 100%; margin-top: 4px;
  padding: 5px 7px;
  text-align: left;
  white-space: normal;
  background: linear-gradient(#e8d0cc, #d8b8b2);
  border-color: #ffffff #7a5a56 #7a5a56 #ffffff;
  color: #6a0e0e;
}
.btn.bulldoze:hover { background: linear-gradient(#f2dedb, #e2c8c2); }
.btn.bulldoze .bd-ico { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.btn.bulldoze .bd-txt { font-size: 13px; font-weight: bold; line-height: 1.1; min-width: 0; }
.btn.bulldoze .bd-txt small {
  display: block; font-size: 10px; font-weight: normal; color: #7a3a3a;
}
/* Aan: geen twijfel over waar je in zit. */
.btn.bulldoze.active {
  background: linear-gradient(#b02a2a, #8a1a1a);
  border-color: #7a1010 #ff9a9a #ff9a9a #7a1010;
  color: #ffffff;
  padding: 6px 7px 4px 9px;
}
.btn.bulldoze.active .bd-txt small { color: #ffd2d2; }

.item {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--shadow) var(--shadow) var(--light);
  padding: 3px 2px 2px;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  min-width: 0;
}
.item:hover { background: var(--face-hi); }
.item.active { border-color: var(--shadow) var(--light) var(--light) var(--shadow); background: #b8c8e0; }
.item.locked { cursor: default; opacity: .55; }

/* Kerstboompje in de bovenbalk, alleen in de kerstperiode. */
#kerstbox { text-shadow: 0 0 6px rgba(120, 190, 255, .55); }
.item canvas { image-rendering: pixelated; flex: 0 0 auto; }
.item .nm {
  font-size: 11px; font-weight: bold; line-height: 1.1;
  width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.item .pr { font-size: 11px; color: #005000; font-weight: bold; }
.item .pr.no { color: var(--red); }
.item .lk { font-size: 9px; color: #7a0000; }

.statlist { display: grid; grid-template-columns: auto auto; gap: 1px 6px; }
.statlist b { text-align: right; }

/* ---------- speelveld ---------- */

#viewport { flex: 1 1 auto; position: relative; overflow: hidden; background: #2c4a2a; }
#game { display: block; image-rendering: pixelated; cursor: default; }
#game.panning { cursor: grabbing; }
#game.building { cursor: crosshair; }

#mmWrap { position: absolute; right: 8px; bottom: 8px; padding: 3px; width: 124px; }
.mm-head { font-size: 10px; font-weight: bold; text-align: center; margin-bottom: 2px; }
#minimap {
  display: block; image-rendering: pixelated;
  border: 2px solid; border-color: var(--shadow) var(--light) var(--light) var(--shadow);
}
.mm-zoom { display: flex; gap: 3px; margin-top: 3px; }
.mm-zoom .btn { flex: 1; }

#tooltip {
  position: absolute;
  background: #ffffe1;
  border: 1px solid #000000;
  padding: 3px 6px;
  font-size: 11px;
  pointer-events: none;
  display: none;
  max-width: 220px;
  box-shadow: 2px 2px 0 rgba(0,0,0,.35);
  z-index: 30;
}

#msgs {
  position: absolute; left: 8px; bottom: 8px;
  display: flex; flex-direction: column; gap: 3px;
  max-width: 320px;
  pointer-events: none;
}
.msg {
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--shadow) var(--shadow) var(--light);
  padding: 3px 7px;
  font-size: 11px;
  animation: msgIn .18s ease-out;
}
.msg.good { border-left: 5px solid var(--green); }
.msg.bad  { border-left: 5px solid var(--red); }
.msg.info { border-left: 5px solid var(--title); }
@keyframes msgIn { from { transform: translateX(-14px); opacity: 0 } to { transform: none; opacity: 1 } }

/* ---------- vensters ---------- */

.win {
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--shadow) var(--shadow) var(--light);
  box-shadow: 3px 3px 0 rgba(0,0,0,.4);
}
#infoWin { position: absolute; width: 234px; z-index: 25; }
.win-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(90deg, var(--title), var(--title2));
  color: #ffffff; font-weight: bold; font-size: 11px;
  padding: 2px 3px 2px 6px;
  cursor: move;
}
.win-x {
  background: var(--face);
  border: 2px solid; border-color: var(--light) var(--shadow) var(--shadow) var(--light);
  width: 18px; height: 16px; line-height: 1;
  font-size: 9px; cursor: pointer; font-family: inherit;
}
.win-body { padding: 7px; }

#modalRoot { position: fixed; inset: 0; z-index: 50; }
#modalBack { position: absolute; inset: 0; background: rgba(0,0,0,.35); }
#modalWin {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(660px, 94vw);
  max-height: 88vh;
  display: flex; flex-direction: column;
}
#modalWin .win-body { overflow-y: auto; }

/* ---------- inhoud van vensters ---------- */

.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; font-size: 11px; margin-bottom: 6px; }
.kv b { text-align: right; }

.bar { background: #000; border: 1px solid var(--shadow); height: 10px; position: relative; }
.bar > i { display: block; height: 100%; background: #00b000; }
.bar.mood > i { background: linear-gradient(90deg, #d04040, #e0c040 55%, #40c040); }

table.grid { width: 100%; border-collapse: collapse; font-size: 11px; }
table.grid th, table.grid td { padding: 3px 5px; text-align: left; }
table.grid th {
  background: var(--face);
  border: 2px solid; border-color: var(--light) var(--shadow) var(--shadow) var(--light);
  font-size: 10px; text-transform: uppercase;
}
table.grid td { border-bottom: 1px solid #b0b0b0; }
table.grid tr:nth-child(even) td { background: #cacaca; }
table.grid td.num, table.grid th.num { text-align: right; }
.pos { color: var(--green); font-weight: bold; }
.neg { color: var(--red); font-weight: bold; }

.cols { display: flex; gap: 10px; align-items: flex-start; }
.cols > div { flex: 1; min-width: 0; }
.card {
  border: 2px solid; border-color: var(--shadow) var(--light) var(--light) var(--shadow);
  padding: 5px 6px; margin-bottom: 5px; background: #cdcdcd;
}
.card .row { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.card .nm { font-weight: bold; }

/* savegame-kaartjes met miniatuur */
.card.slot .thumb {
  width: 96px; height: 60px;
  object-fit: cover;
  image-rendering: pixelated;
  border: 2px solid;
  border-color: var(--shadow) var(--light) var(--light) var(--shadow);
  background: #2c4a2a;
  flex: 0 0 auto;
}
.card.slot .thumb.noimg {
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; text-align: center; color: #55606a;
}
.card.slot .row { align-items: flex-start; gap: 8px; }
.card.slot input[type=text] { font-family: inherit; font-size: 11px; padding: 3px; }
.card .sub { font-size: 10px; color: #303030; }
.stars-s { color: #a06000; letter-spacing: 1px; }

.goal { margin-bottom: 8px; }
.goal .top { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 2px; }
.goal.done .top { color: var(--green); font-weight: bold; }

input[type=range] { width: 100%; }
h4 { margin: 0 0 5px; font-size: 12px; }
p { margin: 0 0 7px; line-height: 1.5; }
ul { margin: 0 0 7px; padding-left: 18px; line-height: 1.55; }
kbd {
  background: var(--face); border: 2px solid;
  border-color: var(--light) var(--shadow) var(--shadow) var(--light);
  padding: 0 4px; font-family: inherit; font-size: 10px;
}

/* ---------- onderbalk ---------- */

#bottombar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px;
}
#quickStats { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; align-items: center; }
#quickStats .qs { display: flex; gap: 4px; align-items: center; }
#quickStats .qs b { font-family: "Consolas", monospace; }
.bb-right { margin-left: auto; display: flex; gap: 4px; }

@media (max-width: 1100px) {
  #sidebar { flex-basis: 190px; }
  .item-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  #sidebar { flex-basis: 172px; }
  .tb-right .btn { font-size: 10px; padding: 3px 5px; }
}

/* ============ POPUP-MELDINGEN ============
   Belangrijke meldingen (geen tandarts, internetstoring, te weinig
   perslucht) komen niet als tekstregeltje langs maar als venster in
   beeld. De kleurbalk links vertelt meteen hoe ernstig het is. */
.popup {
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  background: #d8d4c8;
  padding: 8px 10px 8px 12px;
  border-left-width: 6px;
  line-height: 1.45;
}
.popup.bad  { border-left-color: #b02020; }
.popup.warn { border-left-color: #d08a10; }
.popup.good { border-left-color: #1c7a1c; }
.popup.info { border-left-color: #2a5f9e; }
.popup p:first-child { margin-top: 0; }
.popup p:last-child { margin-bottom: 0; }
.popup-btns { display: flex; gap: 6px; margin-top: 10px; }
.popup-btns .btn { flex: 1; }

/* Losse label-tekstjes in lijsten (bijvoorbeeld "loopt nog 3 dagen"). */
.tag {
  flex: 0 0 auto; font-size: 10px; padding: 2px 5px;
  border: 1px solid #808080; background: #cfcbc0; white-space: nowrap;
}
.tag.good { background: #bcd9bc; border-color: #4a7a4a; }
.bad-box { border-left: 5px solid #b02020; }

/* Kaartjes met een plaatje erbij (vrijgespeelde apparaten). */
.card.unlock .row { align-items: flex-start; gap: 8px; }
.card.unlock img {
  width: 56px; height: 44px; flex: 0 0 auto;
  image-rendering: pixelated;
  border: 1px solid #9a9a9a; background: #bfc7cc;
}

/* ============ MEDITALL-WOORDMERK ============
   Voor boven in een venster dat over hun dienstverlening gaat (de
   internetstoring). Het echte logo is een woordmerk met een verloop
   van lichtblauw naar blauw en daaronder een wijd gespatieerde
   ondertitel; dat is in HTML beter na te maken dan in pixels. */
.mtl-logo {
  text-align: center;
  padding: 9px 6px 8px;
  margin-bottom: 8px;
  background: #ffffff;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
}
.mtl-logo .wm {
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 26px; font-weight: 600; line-height: 1;
  letter-spacing: 3px; text-indent: 3px;
  color: #3aa5d5;
}
/* Het kleurverloop alleen waar de browser tekst kan clippen; anders
   blijft het bij de effen huisstijlkleur hierboven. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .mtl-logo .wm {
    background: linear-gradient(100deg, #7cc3e2 0%, #3aa5d5 34%, #2c8fc2 52%, #56b1da 74%, #8ccbe6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.mtl-logo .sub {
  margin-top: 5px;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 8px; letter-spacing: 4px; text-indent: 4px;
  color: #7cc3e2;
}

/* Meldingen zijn smaller dan de grote vensters. Een popup bevat maar
   een alinea of twee; in de volle 660 px werd dat een lange lage
   strook. Op deze breedte wordt hij ongeveer even hoog als breed en
   leest de tekst in regels van een normale lengte. */
#modalWin.popup-win { width: min(300px, 92vw); }
#modalWin.popup-win .win-body { padding: 8px; }
/* Een korte melding van één alinea bleef anders een lage strook. Met
   een minimumhoogte én de tekst verticaal gecentreerd wordt het een
   nette, bijna vierkante meldingsbox in plaats van een reep. */
#modalWin.popup-win .popup {
  min-height: 96px;
  display: flex; flex-direction: column; justify-content: center;
}

/* ============ INSTELLINGEN ============
   De Aan/Uit-knop en het keuzelijstje in het instellingenvenster.
   Een select ziet er van zichzelf modern uit; met deze randen past
   hij bij de rest van het Windows-95 thema. */
.set-tog { flex: 0 0 auto; min-width: 58px; }
.set-tog.on { color: #0a5c0a; font-weight: bold; }
.set-sel {
  flex: 0 0 auto;
  font-family: inherit; font-size: 11px; padding: 2px 3px;
  background: var(--face); color: #000;
  border: 2px solid; border-color: var(--shadow) var(--light) var(--light) var(--shadow);
}

/* =============================================================
   STARTMENU

   De opzet van RollerCoaster Tycoon: je kijkt naar het terrein, de
   camera schuift er langzaam overheen, en daaroverheen staat één
   paneel met het logo en de knoppen. In menustand verbergt #app zijn
   eigen balken, zodat het speelveld het hele scherm vult.
   ============================================================= */

#app.menu #topbar,
#app.menu #sidebar,
#app.menu #bottombar,
#app.menu #mmWrap,
#app.menu #infoWin,
#app.menu #msgs { display: none !important; }

#startmenu {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  /* Onder #modalRoot (50), want Laden, Instellingen en de uitleg
     openen als gewoon venster BOVEN het startscherm. */
  z-index: 45;
}

/* Donkere randen rondom, zodat het paneel loskomt van het gras. */
.sm-vignet {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%,
              rgba(0,0,0,0) 35%, rgba(0,0,0,.45) 100%);
  pointer-events: none;
}

.sm-panel {
  position: relative;
  width: min(460px, 92vw);
  padding: 14px 16px 12px;
  text-align: center;
  background: linear-gradient(#d6d2ca, #b8b4ac);
  border: 3px solid;
  border-color: #ffffff #6e6a63 #6e6a63 #ffffff;
  box-shadow: 0 10px 26px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.35);
}

.sm-logo { display: flex; align-items: center; justify-content: center; gap: 10px; }
.sm-tooth { font-size: 56px; line-height: 1; filter: drop-shadow(0 3px 2px rgba(0,0,0,.45)); }
.sm-words { text-align: left; }

/* Het wordmerk: zwaar, goudkleurig en met een dikke donkere rand, net
   als de plaat op de doos van een tycoongame uit de jaren negentig. */
.sm-word {
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: 54px; line-height: .86; letter-spacing: 1px;
  color: #ffe36a;
  text-shadow:
    -2px 0 #3a2704, 2px 0 #3a2704, 0 -2px #3a2704, 0 2px #3a2704,
    0 4px 0 #b07a12, 0 6px 0 #7a5208, 0 8px 8px rgba(0,0,0,.5);
}
.sm-word2 { color: #9fe0ff; text-shadow:
    -2px 0 #06304a, 2px 0 #06304a, 0 -2px #06304a, 0 2px #06304a,
    0 4px 0 #1b6a9c, 0 6px 0 #0d4468, 0 8px 8px rgba(0,0,0,.5); }

.sm-sub {
  margin: 12px 0 10px;
  font-size: 12px; font-weight: bold; color: #303030;
  text-shadow: 1px 1px 0 rgba(255,255,255,.7);
}

.sm-btns { display: flex; flex-direction: column; gap: 6px; }

/* Grote knoppen met een regel uitleg eronder: in RCT1 staan de knoppen
   ook onder elkaar met een pictogram ervoor. */
.sm-btn {
  display: block; width: 100%; text-align: left;
  padding: 7px 10px;
  font-family: inherit; color: #000; cursor: pointer;
  background: var(--face);
  border: 3px solid;
  border-color: var(--light) var(--shadow) var(--shadow) var(--light);
}
.sm-btn:hover { background: var(--face-hi); }
.sm-btn:active {
  border-color: var(--shadow) var(--light) var(--light) var(--shadow);
  padding: 8px 9px 6px 11px;
}
.sm-btn b { display: block; font-size: 14px; }
.sm-btn span { display: block; font-size: 11px; color: #404040; }

.sm-btn:disabled { color: var(--shadow); text-shadow: 1px 1px 0 var(--light); cursor: default; }
.sm-btn:disabled span { color: var(--shadow); }
.sm-btn:disabled:active { border-color: var(--light) var(--shadow) var(--shadow) var(--light); padding: 7px 10px; }

/* "made by Meditall" onder de knoppen: het woordmerk in de huisstijl,
   iets kleiner dan in de vensters van het spel. */
.sm-made { margin-top: 12px; }
.sm-made-by {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: #4a4a4a; text-shadow: 1px 1px 0 rgba(255,255,255,.6);
  margin-bottom: 3px;
}
.sm-made .mtl-logo { margin: 0 auto; max-width: 240px; padding: 6px 6px 5px; }
.sm-made .mtl-logo .wm { font-size: 20px; letter-spacing: 2px; }
.sm-made .mtl-logo .sub { font-size: 8px; }

/* Tekstvak voor het exporteren/importeren van een praktijk: zelfde
   ingezonken look als de rest, en een vast lettertype zodat je ziet
   dat het data is en geen proza. */
#exText, #svText {
  font-family: "Consolas", "Courier New", monospace;
  font-size: 10px;
  background: #ffffff;
  border: 2px solid;
  border-color: var(--shadow) var(--light) var(--light) var(--shadow);
  padding: 4px;
  margin: 4px 0;
  resize: vertical;
}