/* ═══════════════════════════════════════════════════════
   FLIPPERBAREN — PINBALL ARCADE DARK THEME (local2.css)
   Aktiveras genom att byta local.css → local2.css i
   load_meta_standard.php och load_js_standard.php
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'Pinball Fantasies';
  src: url('/PinballFantasies.ttf');
}

:root {
  --bg:       #08080f;
  --card:     #111120;
  --card2:    #1a1a2e;
  --accent:   #e8ff40;   /* neon gul — Flipperbaren-gul */
  --neon-r:   #ff3a3a;   /* neon röd */
  --neon-b:   #40c8ff;   /* neon blå */
  --neon-g:   #3dff8f;   /* neon grön */
  --neon-p:   #d040ff;   /* neon lila */
  --text:     #f0f0f0;
  --muted:    #9090b0;
  --border:   rgba(255,255,255,0.13);
}

/* ── BODY & PAGE ── */
html, body,
.ui-page, .ui-mobile-viewport {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* ── HEADER / TOOLBAR ── */
.ui-bar-a,
.ui-page-theme-a .ui-bar-inherit,
html .ui-bar-a .ui-bar-inherit,
html .ui-body-a .ui-bar-inherit,
html body .ui-group-theme-a .ui-bar-inherit {
  background: linear-gradient(180deg, #111128 0%, #0a0a18 100%) !important;
  border-bottom: 2px solid var(--accent) !important;
  color: var(--text) !important;
  text-shadow: none !important;
}

/* Sidrubrik i header */
.ui-bar-a h1, .ui-bar-a h2, .ui-bar-a h3 {
  font-family: 'DM Sans', sans-serif !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-shadow: none !important;
  font-size: 18px !important;
}

/* ── CONTENT ── */
.ui-content {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  padding-top: 0 !important;
}

.ui-body-a {
  background-color: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  text-shadow: none !important;
}

/* ── LISTOR ── */
.ui-listview > li,
.ui-listview > li a,
.ui-listview > li .ui-btn {
  background: var(--card) !important;
  color: var(--text) !important;
  text-shadow: none !important;
  border-color: var(--border) !important;
  font-family: 'DM Sans', sans-serif !important;
}

.ui-listview > li:nth-child(even):not(.ui-li-divider),
.ui-listview > li:nth-child(even):not(.ui-li-divider) a {
  background: var(--card2) !important;
  text-shadow: none !important;
}

.ui-listview > li:nth-child(odd):not(.ui-li-divider),
.ui-listview > li:nth-child(odd):not(.ui-li-divider) a {
  background: var(--card) !important;
  text-shadow: none !important;
}

.ui-listview > li a:hover,
.ui-listview > li a:active {
  background: #1e1e32 !important;
  color: var(--accent) !important;
}

/* ── AVDELARE (dividers) ── */
.ui-li-divider {
  background: linear-gradient(90deg, #1a1a30 0%, #14142a 100%) !important;
  color: var(--accent) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  font-size: 13px !important;
  border-top: 1px solid rgba(232,255,64,0.2) !important;
  border-bottom: 1px solid rgba(232,255,64,0.2) !important;
  text-shadow: none !important;
}

/* ── KNAPPAR ── */
.ui-btn,
.ui-btn-a,
.ui-page-theme-a .ui-btn {
  background: var(--card2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  text-shadow: none !important;
  font-family: 'DM Sans', sans-serif !important;
  border-radius: 8px !important;
}

.ui-btn:hover, .ui-btn:active {
  background: #252540 !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* Primärknapp */
.ui-btn-b {
  background: var(--accent) !important;
  color: #000 !important;
  font-weight: 700 !important;
  border-color: var(--accent) !important;
  text-shadow: none !important;
}

/* Ångra/destructive knapp */
.ui-btn[data-theme="b"].ui-btn-icon-left,
input[type="submit"] {
  background: var(--accent) !important;
  color: #000 !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

/* ── COLLAPSIBLE ── */
.ui-collapsible-heading-toggle {
  background: var(--card2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  text-shadow: none !important;
  font-family: 'DM Sans', sans-serif !important;
}

.ui-collapsible-heading-toggle:hover {
  background: #222235 !important;
  color: var(--accent) !important;
}

/* Dag-kollapsar — neon blå */
#list_mandag  .ui-collapsible-heading-toggle,
#list_tisdag  .ui-collapsible-heading-toggle,
#list_onsdag  .ui-collapsible-heading-toggle,
#list_torsdag .ui-collapsible-heading-toggle,
#list_fredag  .ui-collapsible-heading-toggle,
#list_lordag  .ui-collapsible-heading-toggle,
#list_sondag  .ui-collapsible-heading-toggle {
  background: #0d1a2a !important;
  color: var(--neon-b) !important;
  border-color: rgba(64,200,255,0.25) !important;
  text-shadow: 0 0 6px rgba(64,200,255,0.3) !important;
}

/* Nyheter — neon grön */
#list_nyheter .ui-btn {
  background: #0d2018 !important;
  color: var(--neon-g) !important;
  border-color: rgba(61,255,143,0.25) !important;
  text-shadow: 0 0 6px rgba(61,255,143,0.3) !important;
}

/* Saknade tider — neon röd */
#list_saknade_tider .ui-btn {
  background: #2a0d0d !important;
  color: var(--neon-r) !important;
  border-color: rgba(255,58,58,0.25) !important;
  text-shadow: 0 0 6px rgba(255,58,58,0.3) !important;
}

/* ── FORMULÄR ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
  background: var(--card2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  text-shadow: none !important;
  border-radius: 8px !important;
  font-family: 'DM Sans', sans-serif !important;
}

input::placeholder, textarea::placeholder {
  color: var(--muted) !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(232,255,64,0.15) !important;
}

/* ── RUBRIKER ── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'DM Sans', sans-serif !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
}

/* ── LÄNKAR ── */
a, a:visited {
  color: var(--accent) !important;
  text-decoration: none !important;
}

a:hover, a:active {
  color: #fff !important;
  text-shadow: 0 0 8px rgba(232,255,64,0.5) !important;
}

/* ── POPUP / DIALOG ── */
.ui-popup-container .ui-content,
.ui-popup-container .ui-bar-a {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* ── MMENU SIDEBAR ── */
.mm-menu {
  background: var(--card) !important;
  color: var(--text) !important;
  border-right: 1px solid rgba(232,255,64,0.2) !important;
}

.mm-listitem, .mm-listitem a, .mm-listitem span {
  color: var(--text) !important;
  border-color: var(--border) !important;
  font-family: 'DM Sans', sans-serif !important;
}

.mm-listitem:hover, .mm-listitem:active {
  background: var(--card2) !important;
  color: var(--accent) !important;
}

.mm-navbar {
  background: #0a0a18 !important;
  border-bottom: 1px solid rgba(232,255,64,0.2) !important;
  color: var(--accent) !important;
}

.mm-navbar__title {
  color: var(--accent) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
}

/* ── TABELLER ── */
table {
  background: var(--card) !important;
  color: var(--text) !important;
  border-collapse: collapse;
}

th {
  background: #1a1a30 !important;
  color: var(--accent) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  border-color: var(--border) !important;
  text-shadow: none !important;
}

td {
  border-color: var(--border) !important;
  color: var(--text) !important;
}

tr:nth-child(even) td {
  background: var(--card2) !important;
}

/* ── PRODUKTBILDER ── */
div[style*="position:absolute"] > img {
  width: 56px;
  height: 80px !important;
  object-fit: contain;
  background-color: var(--card2);
  border-radius: 4px;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2a2a44; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }