/* shine.css — trekt de stijl van de header (diagonaal verloop + diepte, zie
   /css/header-shine.css) door naar de rest van de pagina (knoppen, kaarten,
   tabellen, footer). Gebruikt door ed en de WK darts-landingspagina. Laadt
   als laatste (na header-shine.css) en zet alleen background-image/schaduw
   bovenop de bestaande regels, zodat bij weghalen alles terugvalt op de
   vlakke --primary-kleur. */

:root {
  --hs-gradient-hover: linear-gradient(120deg, var(--primary-hover, var(--primary)) 0%, color-mix(in srgb, var(--primary) 62%, black) 100%);
  /* verticaal: per cel gelijk, dus naadloos over een hele tabelkop */
  --hs-gradient-v: linear-gradient(180deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 88%, black) 100%);
  --shadow-card: 0 2px 6px rgba(10, 30, 64, 0.10), 0 10px 26px rgba(10, 30, 64, 0.20);
  /* ed heet 'm --accent-secondary, de root-site --accent-orange */
  --hs-orange: var(--accent-secondary, var(--accent-orange));
}

/* Nav onder de header: zelfde verloop, zodat balk en menu één geheel zijn. */
.full-nav {
  background-image: var(--hs-gradient);
}

.full-nav a {
  text-shadow: var(--hs-text-shadow);
}

/* Kaarten: zachter randje, rondere hoeken en een diepere schaduw, zoals de
   hub-kaarten op het admin-dashboard. */
.box,
.box_color {
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

/* Alles wat vlak --primary gevuld was krijgt het diagonale verloop. */
.box_color,
.btn-submit,
.btn-submit_alt,
.btn-submit_sl,
.picks-table-controls .btn-toggle.active,
.tab-button,
.sub-tab-button,
.period-badge,
#temp-info-box,
#toggle-password-link.active,
.subleague-list li.open a,
.matchday,
#confirmModalTitle,
.modal-box .modal-title,
.modal-box .modalTitle,
.modal-box #modal-title,
.modal-box #modalTitle,
#modal-close-btn,
.section-divider {
  background-image: var(--hs-gradient);
}

/* Modals: titelband (modal.css) in het verloop met tekstschaduw, iets rondere
   kaart. Waarschuwing/fout (.is-warning/.is-danger) zetten hun eigen kleur
   met een hogere specificiteit en houden die. */
.modal-box,
.picks-modal-content {
  border-radius: 16px;
}

.modal-box .modal-title,
.modal-box .modalTitle,
.modal-box #modal-title,
.modal-box #modalTitle,
.modal-box #confirmModalTitle {
  text-shadow: var(--hs-text-shadow);
}

/* Picks-pop-up bij een naam (.picks-modal-content, 20px padding): de titel
   als band over de volle breedte, met het kruisje wit erin. */
.picks-modal-content #picksModalTitle {
  margin: -20px -20px 15px;
  padding: 1rem 50px 1rem 20px;
  background-color: var(--primary);
  background-image: var(--hs-gradient);
  color: var(--white, #fff);
  text-shadow: var(--hs-text-shadow);
}

.picks-modal-content .picks-modal-close {
  top: 0.85rem;
  color: var(--white, #fff);
  text-shadow: var(--hs-text-shadow);
}

.btn-submit,
.btn-submit_alt,
.btn-submit_sec,
.btn-submit_sl,
.tab-button,
.sub-tab-button,
.matchday {
  text-shadow: var(--hs-text-shadow);
}

/* Geen rand om de knoppen: een witte of vlakke rand in de knopkleur tekent
   een lichte lijn om het verloop. Transparant i.p.v. weg, zodat de maat gelijk blijft. */
.btn-submit,
.btn-submit_alt,
.btn-submit_sec,
.btn-submit_sl,
.btn-submit:hover,
.btn-submit_alt:hover,
.btn-submit_sec:hover,
.btn-submit_sl:hover {
  border-color: transparent;
}

.btn-submit,
.btn-submit_alt,
.btn-submit_sec,
.btn-submit_sl {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 3px 8px rgba(0, 0, 0, 0.18);
}

/* De :hover-regels gebruiken de background-shorthand en wissen daarmee het
   verloop; hier een iets donkerder verloop terugzetten. */
.btn-submit:hover,
.btn-submit_alt:hover,
.btn-submit_sl:hover,
.tab-button:hover,
.sub-tab-button:hover,
#modal-close-btn:hover {
  background-image: var(--hs-gradient-hover);
}

/* Oranje knoppen (actieve tab, CTA-knop) houden hun kleur, maar krijgen
   hetzelfde diagonale verloop. */
.btn-submit_sec,
.tab-button.active,
.sub-tab-button.active {
  background-image: linear-gradient(120deg, var(--hs-orange) 0%, color-mix(in srgb, var(--hs-orange) 82%, black) 100%);
}

/* Rondenummer ("Ronde 12"): als een klein badge-blokje. */
.matchday {
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Tabellen: zachte schaduw onder de hele tabel (ed zet dit zelf al via
   --shadow-raised in ed/css/tables.css, darts in darts/css/theme.css). */
table {
  box-shadow: 0 2px 6px rgba(10, 30, 64, 0.08), 0 8px 20px rgba(10, 30, 64, 0.14);
}

/* Mijn spellen-tegels (css/my_games_tiles.css) en badge-tegels: schaduw,
   sterker bij hover. */
.my-games-tiles .game-card-item,
.badge-card {
  box-shadow: 0 2px 6px rgba(10, 30, 64, 0.10), 0 8px 20px rgba(10, 30, 64, 0.18);
}

.my-games-tiles .game-card-item:hover,
.badge-card:hover {
  box-shadow: 0 4px 10px rgba(10, 30, 64, 0.14), 0 12px 28px rgba(10, 30, 64, 0.24);
}

/* Speltegels (homepage Alle spellen, archief): ronde hoeken, schaduw en het
   verloop in de titelbalk. Geen overflow:hidden (dan valt de vrienden-popover
   weg), dus de titelbalk krijgt zelf de bovenhoeken. */
.game-overview > .game-box {
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(10, 30, 64, 0.10), 0 8px 20px rgba(10, 30, 64, 0.18);
}

.game-overview > .game-box > .game-title,
.game-overview > .game-box > .game-title-alert {
  border-radius: 11px 11px 0 0;
}

.game-overview > .game-box > .game-title {
  background-image: var(--hs-gradient);
  text-shadow: var(--hs-text-shadow);
}

/* Tabelkoppen: verticaal verloop (per cel gelijk, dus naadloos). */
table th {
  background-image: var(--hs-gradient-v);
  text-shadow: var(--hs-text-shadow);
}

/* Radio's en checkboxes in de modulekleur i.p.v. browser-blauw/grijs. */
input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--primary);
}

/* Footer: van zwart naar diep modulegroen. */
.main-footer {
  background-image: linear-gradient(120deg, #000 0%, #000 45%, var(--hs-deep) 100%);
}