/* 1. Amsterdam merk-tokens -------------------------------------------- */
:root {
  --ams-red: #EC0000;          /* Amsterdam rood (accenten, randen) */
  --ams-blue: #004699;         /* Amsterdam donkerblauw — knopvlak met witte tekst */
  --ams-blue-hover: #00387A;   /* donkerder blauw bij hover/focus */

  /* Accent voor TEKST/LINKS/SELECTIE bovenop de pagina-achtergrond */
  --ams-accent: #004699;
  --ams-accent-hover: #00387A;
}

/* Donkere modus: lichter blauw zodat links/tekst leesbaar blijven (contrast).
   Knopvlakken blijven gewoon #004699 met witte tekst — dat leest in beide modes. */
[data-color-scheme='dark'] {
  --ams-accent: #6BA8E5;
  --ams-accent-hover: #8FC0EE;
}

/* 2. Knoppen (primair) ----------------------------------------------- */
.button,
.btn,
.simple_form button,
.button.logo-button,
.simple_form .block-button,
.simple_form .button {
  background-color: var(--ams-blue);
  color: #fff;
  border-radius: 0; /* Amsterdam = strakke, rechte hoeken */
}

.button:hover, .button:focus, .button:active,
.btn:hover, .btn:focus, .btn:active,
.simple_form button:hover, .simple_form button:focus, .simple_form button:active,
.simple_form .block-button:hover, .simple_form .block-button:focus, .simple_form .block-button:active,
.simple_form .button:hover, .simple_form .button:focus, .simple_form .button:active {
  background-color: var(--ams-blue-hover);
}

/* Gevulde accent-vlakken (geselecteerde admin-tabs, actieve nav, toggles) */
.admin-wrapper .content__heading__tabs a.selected,
.admin-wrapper .sidebar ul .simple-navigation-active-leaf a,
.dimension__item__indicator,
.react-toggle--checked .react-toggle-track {
  background-color: var(--ams-blue);
}

.admin-wrapper .content__heading__tabs a.selected:hover,
.admin-wrapper .content__heading__tabs a.selected:focus,
.admin-wrapper .content__heading__tabs a.selected:active,
.admin-wrapper .sidebar ul .simple-navigation-active-leaf a:hover,
.dimension__item__indicator--80,
.button.disabled, .button:disabled,
.react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track {
  background-color: var(--ams-blue-hover);
}

/* 3. Knoppen (secundair / tertiair) ---------------------------------- */
/* Was 'background: white' — dat brak in dark mode. Nu transparant,
   zodat de knop op zowel een lichte als donkere achtergrond werkt. */
.button.button-tertiary,
.button.button-secondary {
  background: transparent !important;
  color: var(--ams-accent) !important;
  border: 1px solid var(--ams-accent) !important;
}

.button.button-tertiary:hover, .button.button-tertiary:focus, .button.button-tertiary:active,
.button.button-secondary:hover, .button.button-secondary:focus, .button.button-secondary:active {
  background: transparent !important;
  color: var(--ams-accent-hover) !important;
  box-shadow: inset 0 0 0 2px var(--ams-accent-hover);
}

/* 4. Tekst / links / selectie (blauw accent) ------------------------- */
.link-footer p a,
.column-link--transparent.active,
.notification__message .fa,
.column-back-button,
.column-header__back-button,
.simple_form .recommended,
.empty-column-indicator a,
.follow_requests-unlocked_explanation a,
.filters .filter-subset a.selected,
.admin-wrapper .content .muted-hint a, body .muted-hint a,
.back-link a,
.about__section__title {
  color: var(--ams-accent);
}

/* 5. Rode accenten --------------------------------------------------- */
.dashboard__quick-access {
  background: var(--ams-red);
}
.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
  background: var(--ams-red);
}
.retention__table__box {
  background: color-mix(in srgb, var(--ams-red) 52%, transparent);
}
.sparkline__graph path:last-child {
  stroke: color-mix(in srgb, var(--ams-red) 47%, transparent) !important;
}
.sparkline__graph path:first-child {
  fill: color-mix(in srgb, var(--ams-red) 50%, transparent) !important;
}
.rules-list li::before {
  background: color-mix(in srgb, var(--ams-red) 47%, transparent);
}
.compose-form .compose-form__warning,
.simple_form .recommended {
  border-color: var(--ams-red);
}
.follow_requests-unlocked_explanation a,
.filters .filter-subset a.selected {
  border-bottom-color: var(--ams-red);
}

/* 6. Formulier-velden (focus/checked) -------------------------------- */
/* Zoekveld: alleen rechte hoeken afdwingen, achtergrond/tekst laten we
   aan het thema over zodat het in dark mode niet wit oplicht. */
.search__input {
  border-radius: 0;
}

.radio-button__input.checked {
  border-color: var(--ams-blue-hover);
  background: var(--ams-blue-hover);
}

.simple_form input[type="datetime-local"]:active, .simple_form input[type="datetime-local"]:focus,
.simple_form input[type="email"]:active, .simple_form input[type="email"]:focus,
.simple_form input[type="number"]:active, .simple_form input[type="number"]:focus,
.simple_form input[type="password"]:active, .simple_form input[type="password"]:focus,
.simple_form input[type="text"]:active, .simple_form input[type="text"]:focus,
.simple_form input[type="url"]:active, .simple_form input[type="url"]:focus,
.simple_form textarea:active, .simple_form textarea:focus {
  border-color: var(--ams-accent);
}