/* ========== Xmas theme — festive visuals + crisp legibility (low-cost) ========== */

/* ----- Tokens ----- */
:root{
  --xmas-green:#0d3a2f;       /* evergreen */
  --xmas-dew:#14614a;         /* lighter evergreen */
  --xmas-holly:#a90f1a;       /* holly red (navbar) */
  --xmas-holly-dark:#7a0b14;  /* darker holly for gradient */
  --xmas-gold:#ffd27a;        /* warm lights */

  --xmas-text:#eef9f5;        /* near-white */
  --xmas-text-muted:#d4e8e0;

  --xmas-surface:#132a21;     /* base surface (solid) */
  --xmas-surface-2:#163427;   /* header/striping */
  --xmas-surface-3:#193b2c;   /* hover/active */

  --xmas-border:rgba(255,255,255,.20);
}

/* ----- Page background & global text ----- */
html, body{ height:100%; }
body{
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(1000px 500px at 120% 10%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, #082218 0%, #0a2b1f 60%, #0a2b1f 100%);
  color: var(--xmas-text);
}

/* Make common containers & text readable on the dark palette */
main, .container, .container-fluid,
.card, .card-body, .card-header,
.modal, .modal-content, .modal-body, .modal-header, .modal-footer,
.dropdown-menu, .toast, .list-group-item,
.alert, .jumbotron, .accordion-item,
.form-label, label, .pagination,
.nav-link, .navbar-brand, .breadcrumb,
.badge, .btn-link, .offcanvas, .offcanvas-body
{ color: var(--xmas-text) !important; }

/* Some Bootstrap utilities force black; override for dark theme */
.text-dark, .text-black, .text-body, .text-secondary { color: var(--xmas-text) !important; }

/* Links — calm gold, brighter on hover */
a, .link-primary{ color: #ffdc95; }
a:hover{ color: #ffeac0; }

/* Buttons */
.btn-primary, .btn-success{
  background: linear-gradient(180deg, var(--xmas-dew), var(--xmas-green));
  border: 1px solid #0b2e23;
  color: #fff;
}
.btn-primary:hover, .btn-success:hover{ filter: brightness(1.06); }

/* Outlines keep contrast */
.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark{
  color: var(--xmas-text) !important;
  border-color: var(--xmas-border) !important;
}
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover{
  background-color: var(--xmas-surface-3) !important;
}

/* ----- Navbar stays fixed at top ----- */
.navbar.navbar-dark{
  background: linear-gradient(180deg, var(--xmas-holly) 0%, var(--xmas-holly-dark) 100%) !important;
  border-bottom: 1px solid rgba(0,0,0,.25);
}
.navbar.fixed-top{ position: fixed !important; top:0; left:0; right:0; z-index:1050; }
.navbar .nav-link, .navbar .navbar-brand{ color:#fff !important; }
.navbar .nav-link:hover{ color: var(--xmas-gold) !important; }

/* Headings — tiny accent line only on h1 */
h1{ position: relative; }
/* h1::after{
  content:"";
  display:block; width:52px; height:2px; margin-top:.45rem;
  background: linear-gradient(90deg, var(--xmas-holly), var(--xmas-gold));
  border-radius:2px;
} */
h2::after, h3::after{ content:none !important; }

/* ====================================================================== */
/* Festive lights — hang from the bottom edge of the navbar               */
/* ====================================================================== */
#xmas-lights{
  position: absolute;
  left:0; bottom:-44px;
  width:100%;
  display:flex; justify-content:space-between; gap:12px;
  padding:16px 10px 0;
  z-index:1045;
  pointer-events:none;
  contain: paint;               /* isolate repaints */
}

#xmas-lights .bulb{
  --min: .35;                  /* per-bulb minimum opacity (JS randomizes) */
  --dur: 3.6s;                 /* per-bulb duration (JS randomizes) */

  position:relative;
  margin-top:16px;
  width:14px; height:22px; border-radius:8px 8px 12px 12px;
  background:#ffdfa8;          /* warm white default */
  border:1px solid rgba(0,0,0,.25);
  opacity:.98;

  /* subtle static glow; animation only on opacity (GPU-friendly) */
  box-shadow: 0 3px 8px rgba(255,220,120,.22);
  will-change: opacity;
  animation: blinkSmoothVar var(--dur) ease-in-out infinite;
}

/* cords */
#xmas-lights .bulb::before{
  content:"";
  position:absolute; top:-18px; left:50%; transform:translateX(-50%);
  width:2px; height:18px; background:rgba(0,0,0,.45); border-radius:2px;
}

/* colored accents */
#xmas-lights .bulb:nth-child(6n+1){ background:#ff6b6b; }
#xmas-lights .bulb:nth-child(6n+3){ background:#74f39b; }
#xmas-lights .bulb:nth-child(6n+5){ background:#9ed9ff; }

/* Smooth twinkle — amplitude controlled by --min per bulb */
@keyframes blinkSmoothVar{
  0%, 100% { opacity: var(--min); }
  50%      { opacity: 1; }
}

/* Low-end fallback: stepped twinkle (still uses --min) */
.xmas-low-end #xmas-lights .bulb{
  animation: blinkStepVar var(--dur) steps(2, end) infinite;
}
@keyframes blinkStepVar{
  0%, 100% { opacity: var(--min); }
  50%      { opacity: 1; }
}

/* ====================================================================== */
/* Snow (low-res canvas is upscaled)                                      */
/* ====================================================================== */
#xmas-snow{
  position: fixed; inset:0; width:100%; height:100%;
  z-index:1030; pointer-events:none;
  image-rendering:auto;
}

/* ====================================================================== */
/* Toggle (always bottom-right)                                           */
/* ====================================================================== */
#xmas-toggle{
  position:fixed; right:1rem; bottom:1rem; z-index:1060;
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.45rem .8rem;
  border-radius:.65rem;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.10);
  color:var(--xmas-text);
  font-weight:600; font-size:.875rem;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  backdrop-filter: blur(4px);
}
#xmas-toggle .dot{
  width:.6rem; height:.6rem; border-radius:50%;
  background:#77ff88; box-shadow:0 0 6px rgba(119,255,136,.6);
}
#xmas-toggle.off .dot{
  background:#ff6666; box-shadow:0 0 6px rgba(255,102,102,.6);
}

/* ====================================================================== */
/* Solid containers (no transparency)                                     */
/* ====================================================================== */
.card, .modal-content, .dropdown-menu, .toast, 
.list-group-item, .accordion-item, .alert, .badge.bg-light,
.form-control, .form-select, .form-check-input, .offcanvas,
.pagination .page-link{
  background-color: var(--xmas-surface) !important;
  color: var(--xmas-text) !important;
  border: 1px solid var(--xmas-border) !important;
  background-image: none !important;
  backdrop-filter: none !important;
}

body .jumbotron,
main .jumbotron,
.container .jumbotron{
  background-color: var(--xmas-surface) !important;
  color: var(--xmas-text) !important;
  border: 1px solid var(--xmas-border) !important;
  background-image: none !important;
  backdrop-filter: none !important;
}
/* Inputs/placeholder */
.form-control::placeholder{ color: var(--xmas-text-muted); opacity: .95; }
.form-select option{ color: #000; }

/* Card/modal headers */
.card-header, .modal-header, .dropdown-header, .accordion-header{
  background-color: var(--xmas-surface-2) !important;
  color: var(--xmas-text) !important;
  border-bottom: 1px solid var(--xmas-border) !important;
}

/* ====================================================================== */
/* Tables — SOLID & HIGH CONTRAST                                         */
/* ====================================================================== */
.table{
  color: var(--xmas-text) !important;
  background-color: var(--xmas-surface) !important;
  border-color: var(--xmas-border) !important;
}
.table thead, .table tbody, .table tfoot,
.table tr, .table td, .table th{
  background-color: var(--xmas-surface) !important;
  color: var(--xmas-text) !important;
  border-color: var(--xmas-border) !important;
}
.table thead th{
  background-color: var(--xmas-surface-2) !important;
  color: var(--xmas-text) !important;
  font-weight:700;
  border-bottom:1px solid var(--xmas-border) !important;
}
.table-striped > tbody > tr:nth-of-type(odd){
  background-color: var(--xmas-surface-2) !important;
  color: var(--xmas-text) !important;
}
.table-hover > tbody > tr:hover{
  background-color: var(--xmas-surface-3) !important;
  color: var(--xmas-text) !important;
}
.table td *, .table th *{ color: var(--xmas-text) !important; }
.table a{ color: var(--xmas-text) !important; text-decoration:none; }
.table a:hover{ color: var(--xmas-gold) !important; text-decoration:underline; }
.table .text-muted, .table small, .table .small{ color: var(--xmas-text-muted) !important; }

/* ====================================================================== */
/* Scoreboard                                                              */
/* ====================================================================== */
.scoreboard, .scoreboard *{ color: var(--xmas-text) !important; }
#score-graph, #score-graph > div{
  background-color:#fff !important; color:#111 !important;
  border:1px solid rgba(0,0,0,.08);
  border-radius:.75rem; box-shadow:0 2px 10px rgba(0,0,0,.15);
  padding:.25rem;
}
.scoreboard .card, .scoreboard .card-body, .scoreboard table{
  background-color: var(--xmas-surface) !important;
  color: var(--xmas-text) !important;
}

/* ====================================================================== */
/* Accessibility                                                           */
/* ====================================================================== */
@media (prefers-reduced-motion: reduce){
  #xmas-lights, #xmas-snow{ display:none !important; }
  *{ animation:none !important; transition:none !important; }
}
/* Manual kill switch (persisted) */
.xmas-off #xmas-lights, .xmas-off #xmas-snow{ display:none !important; }
.xmas-off *{ animation:none !important; transition:none !important; }


/* ------------------------------
   Sticky footer fix for CTFd
--------------------------------*/
html, body {
	height:100%;
	margin:0;
	padding:0;
}
body {
	display:flex;
	flex-direction:column;
	min-height:100vh;
}

/* låt main växa för att trycka ner footern */
main {
	/*display:block;
	width:100%;
	margin-bottom: 0px;*/
	flex: 1 0 auto;
}

.footer {
  flex-shrink:0;
	/*margin-top: auto;*/
  width: 100%;
  background-color: var(--xmas-surface-2);
  color: var(--xmas-text-muted);
  text-align: center;
  line-height: 60px;
  height: 60px;
  border-top: 1px solid var(--xmas-border);
  position: relative;
  z-index: 10;
}
.footer .text-muted {
	color: #fff !important;
}

.form-select option{
	color: var(--xmas-text) !important;
}