/* status.mijniqan.nl — in the style of carescreen.nl: Inter, blue #2F80ED,
   dark blue #0A3975, orange accent #F79300. */

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --blue: #2f80ed;
  --blue-dark: #0a3975;
  --blue-ultra-light: #e8f1fd;
  --orange: #f79300;
  --text: #111111;
  --text-soft: #5b6472;
  --line: #e3e7ee;
  --bg: #f6f8fb;
  --card: #ffffff;

  --up: #22a06b;
  --up-bg: #e6f6ee;
  --degraded: #f79300;
  --degraded-bg: #fff3e0;
  --down: #d93f3f;
  --down-bg: #fdecec;
  --maint: #2f80ed;
  --maint-bg: #e8f1fd;
  --none: #d5dbe4;

  --radius: 14px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
}

a { color: var(--blue); }

.wrap { max-width: 860px; margin: 0 auto; padding: 0 20px; }

/* --- header ---------------------------------------------------------- */

.top { background: var(--card); border-bottom: 1px solid var(--line); }
.top__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.top__logo img { display: block; height: 36px; width: auto; }
.top__label {
  font-weight: 600; font-size: 14px; color: var(--blue-dark);
  background: var(--blue-ultra-light); padding: 6px 12px; border-radius: 999px;
}

/* main.wrap, not main: .wrap's padding shorthand would win otherwise. */
main.wrap { padding-top: 32px; padding-bottom: 24px; }

/* --- summary ------------------------------------------------------- */

.summary {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 24px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line);
}
.summary__icon {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--none) center / 24px no-repeat;
}
.summary__title { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 700; }
.summary__meta { margin: 2px 0 0; color: var(--text-soft); font-size: 14px; }

.summary--up { background: var(--up-bg); border-color: transparent; }
.summary--up .summary__icon { background-color: var(--up); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.summary--degraded { background: var(--degraded-bg); border-color: transparent; }
.summary--degraded .summary__icon,
.summary--down .summary__icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v7M12 17.5v.5'/%3E%3C/svg%3E"); }
.summary--degraded .summary__icon { background-color: var(--degraded); }
.summary--down { background: var(--down-bg); border-color: transparent; }
.summary--down .summary__icon { background-color: var(--down); }
.summary--maint { background: var(--maint-bg); border-color: transparent; }
.summary--maint .summary__icon { background-color: var(--maint); }
.summary--stale .summary__meta { color: var(--down); font-weight: 600; }

/* --- blocks ------------------------------------------------------------ */

.block { margin-top: 36px; }
.block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.block__title { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: var(--blue-dark); }
.block__hint { color: var(--text-soft); font-size: 14px; margin-bottom: 12px; }

/* --- components ---------------------------------------------------- */

.components {
  list-style: none; margin: 0; padding: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.component { padding: 18px 22px; }
.component + .component { border-top: 1px solid var(--line); }
.component__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.component__name { font-weight: 600; font-size: 16px; }
.component__state { font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.component__state--up { color: var(--up); }
.component__state--degraded { color: #b36b00; }
.component__state--down { color: var(--down); }

.bars { display: flex; gap: 2px; margin-top: 12px; height: 34px; }
.bar {
  flex: 1 1 0; min-width: 0; border-radius: 3px; background: var(--none);
  border: 0; padding: 0; cursor: default;
}
.bar--up { background: var(--up); }
.bar--degraded { background: var(--degraded); }
.bar--down { background: var(--down); }
.bar:hover, .bar:focus-visible { opacity: .75; outline: none; }
.bar:focus-visible { box-shadow: 0 0 0 2px var(--blue); }

.component__foot { display: flex; justify-content: space-between; margin-top: 6px; font-size: 13px; color: var(--text-soft); }

.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--none); }
.dot--up { background: var(--up); }
.dot--degraded { background: var(--degraded); }
.dot--down { background: var(--down); }
.dot--maint { background: var(--maint); }

.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 13px; color: var(--text-soft); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }

/* --- incidents ------------------------------------------------------- */

.incident {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 22px; margin-bottom: 12px;
  border-left: 5px solid var(--down);
}
.incident--opgelost { border-left-color: var(--up); }
.incident--gepland, .incident--onderhoud { border-left-color: var(--maint); }
.incident--oorzaak { border-left-color: var(--degraded); }
.incident__title { margin: 0; font-size: 16px; font-weight: 700; }
.incident__when { margin: 2px 0 0; font-size: 13px; color: var(--text-soft); }
.updates { list-style: none; margin: 12px 0 0; padding: 0; }
.update { position: relative; padding-left: 18px; margin-top: 10px; font-size: 15px; }
.update::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--line);
}
.update__status { font-weight: 600; }
.update__time { color: var(--text-soft); font-size: 13px; }

.day { margin-bottom: 22px; }
.day__date { font-size: 14px; font-weight: 600; color: var(--text-soft); margin: 0 0 8px; }
.empty { color: var(--text-soft); font-size: 15px; margin: 0; }

/* --- tooltip ---------------------------------------------------------- */

.tip {
  position: fixed; z-index: 10; pointer-events: none;
  background: var(--blue-dark); color: #fff; font-size: 13px; line-height: 1.45;
  padding: 8px 12px; border-radius: 8px; max-width: 240px;
  box-shadow: 0 6px 20px rgba(10, 57, 117, .25);
}
.tip strong { display: block; font-weight: 600; }

/* --- footer --------------------------------------------------------- */

.foot { color: var(--text-soft); font-size: 14px; padding: 24px 0 40px; }
.foot p { margin: 0 0 6px; }

/* --- small screens ---------------------------------------------------- */

@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  .top__inner { height: 60px; }
  .top__logo img { height: 28px; }
  main.wrap { padding-top: 20px; }
  .summary { padding: 18px; }
  .summary__title { font-size: 19px; }
  .component { padding: 16px; }
  .bars { height: 28px; gap: 1px; }
  .incident { padding: 16px; }
}