/*
  Theme: Dark (V2)
  Based on Light (V2) design system:
  - Text: near-white
  - Background: deep navy
  - Menus: gray shades (opaque)
  - Actions: blue shades
  Exceptions:
  - Dangerous/negative: red
  - Positive: green
  UX:
  - Slightly larger/bolder header
  - Stronger hover on actions
  - Zebra rows for tables/lists/messages
  - Darker section borders
  - Subtle dynamic animations (respects prefers-reduced-motion)
*/

:root[data-theme="dark"] {
  color-scheme: dark;

  /* Base palette */
  --bg: #0b1220;
  --card: #0f172a;
  --surface-2: #111827;
  --text: #e5e7eb;
  --muted: #9ca3af;

  /* Stronger outlines */
  --border: #223047;
  --border-strong: rgba(148, 163, 184, 0.34);

  /* Actions */
  --blue: #60a5fa;
  --blue-600: #3b82f6;
  --blue-50: #0b1e3a; /* solid (no transparency) */

  /* Hover sweep animation (seamless loop) */
  --sweep-period: 240px;
  --sweep-speed: 1.05s;
  --sweep-angle: 110deg;
  --sweep-blue1: #2563eb;
  --sweep-blue2: #3b82f6;
  --sweep-blue3: #60a5fa;

  /* Status */
  --danger: #f87171;
  --success: #4ade80;
  --warning: #fbbf24;

  /* Shadows */
  --shadow: 0 18px 44px rgba(0,0,0,0.50);
  --shadow-sm: 0 12px 30px rgba(0,0,0,0.42);

  --focus: 0 0 0 3px rgba(96,165,250,0.22);

  /* Opaque topbar + menus */
  --topbar-bg: #0b1220;
  --menu-bg: #0f172a;

  /* Inputs */
  --input-bg: #0b1426;

  /* Menu tokens (gray shades) */
  --menu-item-bg: #111827;
  --menu-item-hover-bg: #1f2937;
  --menu-item-active-bg: #0b2a5b; /* subtle blue hint */
  --menu-border: #223047;
  --menu-border-strong: #2f3f5c;

  /* Zebra / text surfaces */
  --zebra-odd: #0f172a;
  --zebra-even: #111b31;
  --zebra: #111b31; /* compatibility */

  /* Optional background gradient (kept subtle; still dark) */
  --bg-grad:
    radial-gradient(900px circle at 12% -10%, rgba(96,165,250,0.10), transparent 55%),
    linear-gradient(180deg, #0b1220 0%, #0b1220 40%, #0c1426 100%);
}


/* ---------- Subtle animations (disabled if user prefers reduced motion) ---------- */
@keyframes lumaViewIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes lumaDropIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes lumaToastIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes lumaBlueSweep {
  from { background-position: 0 0; }
  to   { background-position: var(--sweep-period, 240px) 0; }
}

@keyframes lumaCardShine {
  from { transform: translateX(-120%) skewX(-20deg); opacity: 0; }
  25%  { opacity: 0.9; }
  to   { transform: translateX(140%) skewX(-20deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="dark"] * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* App view transition (router toggles #app.viewIn) */
:root[data-theme="dark"] #app.viewIn {
  animation: lumaViewIn .20s ease-out;
}


/* ---------- Header / topbar ---------- */
:root[data-theme="dark"] .topbar {
  background: var(--topbar-bg);
  backdrop-filter: none; /* no transparency/blur */
  border-bottom: 1px solid var(--border);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
  font-size: 15px;
}

:root[data-theme="dark"] .nav a,
:root[data-theme="dark"] .nav button,
:root[data-theme="dark"] .navDrop summary {
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* Menus: gray shades (opaque) */
:root[data-theme="dark"] .nav a,
:root[data-theme="dark"] .nav button,
:root[data-theme="dark"] .navDrop summary {
  border: 1px solid var(--menu-border);
  background: var(--menu-item-bg);
  color: var(--text);
}

:root[data-theme="dark"] .nav a:hover,
:root[data-theme="dark"] .nav button:hover,
:root[data-theme="dark"] .navDrop summary:hover {
  background-color: var(--menu-item-hover-bg);
  background-image: linear-gradient(var(--sweep-angle), var(--menu-item-hover-bg) 0%, #0b2a5b 25%, var(--menu-item-hover-bg) 50%, #0b2a5b 75%, var(--menu-item-hover-bg) 100%);
  background-size: var(--sweep-period) 100%;
  background-repeat: repeat;
  animation: lumaBlueSweep 1.15s linear infinite;
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.40);
}

:root[data-theme="dark"] .nav a.active,
:root[data-theme="dark"] .navDrop[open] summary,
:root[data-theme="dark"] .navDrop summary.active {
  background: var(--menu-item-active-bg);
  border-color: var(--blue);
  box-shadow: var(--focus);
}

/* Dropdown menu: opaque (no transparency) */
:root[data-theme="dark"] .navDropMenu {
  background: var(--menu-bg);
  border-color: var(--menu-border);
}

:root[data-theme="dark"] .navDrop[open] .navDropMenu {
  animation: lumaDropIn .14s ease-out;
  transform-origin: top left;
}

:root[data-theme="dark"] .navDropMenu a:hover {
  background-color: var(--menu-item-hover-bg);
  background-image: linear-gradient(var(--sweep-angle), var(--menu-item-hover-bg) 0%, #0b2a5b 25%, var(--menu-item-hover-bg) 50%, #0b2a5b 75%, var(--menu-item-hover-bg) 100%);
  background-size: var(--sweep-period) 100%;
  background-repeat: repeat;
  animation: lumaBlueSweep 1.15s linear infinite;
}


/* ---------- Buttons / actions (stronger hover) ---------- */
:root[data-theme="dark"] .btn {
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

:root[data-theme="dark"] .btn:hover {
  transform: translateY(-3px);
  background-color: var(--blue-600);
  background-image: linear-gradient(var(--sweep-angle), var(--sweep-blue1) 0%, var(--sweep-blue2) 28%, var(--sweep-blue3) 50%, var(--sweep-blue2) 72%, var(--sweep-blue1) 100%);
  background-size: var(--sweep-period) 100%;
  background-repeat: repeat;
  animation: lumaBlueSweep var(--sweep-speed) linear infinite;
  box-shadow: 0 16px 34px rgba(59, 130, 246, 0.28);
}

:root[data-theme="dark"] .btn.secondary:hover {
  background-color: var(--menu-item-hover-bg);
  background-image: linear-gradient(var(--sweep-angle), #111827 0%, #0b2a5b 25%, #1d4ed8 50%, #0b2a5b 75%, #111827 100%);
  background-size: var(--sweep-period) 100%;
  background-repeat: repeat;
  animation: lumaBlueSweep var(--sweep-speed) linear infinite;
  box-shadow: 0 14px 30px rgba(59, 130, 246, 0.20);
}

:root[data-theme="dark"] .btn.danger {
  background: #2a0f14; /* solid */
}

:root[data-theme="dark"] .btn.danger:hover {
  background: #3a1016; /* solid */
  background-image: none;
  animation: none;
  box-shadow: 0 14px 32px rgba(248, 113, 113, 0.18);
}


/* ---------- Cards / sections (darker outlines + subtle hover) ---------- */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .pluginCard {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

:root[data-theme="dark"] .card:hover,
:root[data-theme="dark"] .pluginCard:hover {
  border-color: var(--menu-border-strong);
  box-shadow: var(--shadow);
}


/* ---------- Zebra rows ---------- */
/* Tables */
:root[data-theme="dark"] :where(.table tbody tr:nth-child(odd) td,
                                    .container table tbody tr:nth-child(odd) td) {
  background: var(--zebra-odd);
}
:root[data-theme="dark"] :where(.table tbody tr:nth-child(even) td,
                                    .container table tbody tr:nth-child(even) td) {
  background: var(--zebra-even);
}

/* Generic zebra helper for card/list containers */
:root[data-theme="dark"] .zebra > :nth-child(odd) { background: var(--zebra-odd); }
:root[data-theme="dark"] .zebra > :nth-child(even){ background: var(--zebra-even); }

/* MP threads list */
:root[data-theme="dark"] #mpThreads.zebra .card { margin: 8px 0; box-shadow: none; }
:root[data-theme="dark"] .mpThreadCard.active { border-color: var(--blue); background: var(--menu-item-active-bg); }

/* MP messages */
:root[data-theme="dark"] #mpMsgs .mpMsgBubble{
  background: var(--zebra-odd);
  border: 1px solid var(--border);
}
:root[data-theme="dark"] #mpMsgs > div:nth-child(even) .mpMsgBubble{ background: var(--zebra-even); }
:root[data-theme="dark"] #mpMsgs .mpMsgBubble.mine{ border-left: 3px solid var(--blue); }

/* Forum posts */
:root[data-theme="dark"] #postsWrap.zebra > .card{ box-shadow: none; border-color: var(--border); }
:root[data-theme="dark"] #postsWrap.zebra > .card:nth-child(odd){ background: var(--zebra-odd); }
:root[data-theme="dark"] #postsWrap.zebra > .card:nth-child(even){ background: var(--zebra-even); }

/* Forum cards */
:root[data-theme="dark"] .forumCardAccent {
  border-left: 4px solid var(--border-strong);
  background: var(--zebra-odd);
}
:root[data-theme="dark"] .forumCardAccent:nth-child(even){ background: var(--zebra-even); }


/* ---------- Toast animation ---------- */
:root[data-theme="dark"] .toast { animation: lumaToastIn .16s ease-out; }


/* ---------- Details cards (accordion) ---------- */
:root[data-theme="dark"] details.card[open] > summary { background: #0b2a5b; }


/* Notifications */
:root[data-theme="dark"] .notifList > .notifItem{
  box-shadow: none;
  border: 1px solid var(--border);
  margin: 8px 0;
}
:root[data-theme="dark"] .notifList > .notifItem:nth-child(odd){ background: var(--zebra-odd); }
:root[data-theme="dark"] .notifList > .notifItem:nth-child(even){ background: var(--zebra-even); }
:root[data-theme="dark"] .notifList > .notifItem.unread{
  border-color: rgba(251, 191, 36, 0.65);
  background: #2a1d06; /* solid */
}


/* Admin dropdown: full-width square buttons */
:root[data-theme="dark"] #adminDropMenu a{
  display:block;
  width:100%;
  border-radius:0;
  margin:0;
  padding:10px 12px;
  border:1px solid var(--menu-border);
  background: var(--menu-item-bg);
}
:root[data-theme="dark"] #adminDropMenu a + a{ border-top:none; }
:root[data-theme="dark"] #adminDropMenu a:hover{
  background-color: var(--menu-item-hover-bg);
  background-image: linear-gradient(var(--sweep-angle), #111827 0%, #0b2a5b 25%, #1d4ed8 50%, #0b2a5b 75%, #111827 100%);
  background-size: var(--sweep-period) 100%;
  background-repeat: repeat;
  animation: lumaBlueSweep var(--sweep-speed) linear infinite;
  border-color: var(--blue);
}


/* Apps page cards: hover animation */
:root[data-theme="dark"] .grid.cols3 .pluginCardLink{ position:relative; overflow:hidden; }
:root[data-theme="dark"] .grid.cols3 .pluginCardLink::after{
  content:"";
  position:absolute;
  top:-20%;
  left:-60%;
  width:40%;
  height:140%;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(96,165,250,0.16), rgba(0,0,0,0));
  transform: translateX(-120%) skewX(-20deg);
  pointer-events:none;
}
:root[data-theme="dark"] .grid.cols3 .pluginCardLink:hover{
  transform: translateY(-6px) scale(1.01);
  border-color: var(--blue);
}
:root[data-theme="dark"] .grid.cols3 .pluginCardLink:hover::after{ animation: lumaCardShine .65s ease-out; }


/* FTP plugin: dark overrides + alternating rows */
:root[data-theme="dark"] .ftp-wrap .ftp-list{ border:1px solid var(--border); border-radius:12px; overflow:hidden; }
:root[data-theme="dark"] .ftp-wrap .ftp-listHead{ background:#0b1426; border-bottom:1px solid var(--border); color: var(--text); }
:root[data-theme="dark"] .ftp-wrap .ftp-row{ border-bottom:1px solid var(--border); background: var(--zebra-odd); }
:root[data-theme="dark"] .ftp-wrap .ftp-row:nth-child(even){ background: var(--zebra-even); }
:root[data-theme="dark"] .ftp-wrap .ftp-row:hover{
  background-image: linear-gradient(90deg, #0f172a, #0b2a5b, #1d4ed8, #0b2a5b, #0f172a);
  background-size: 240% 100%;
  animation: lumaBlueSweep 1.15s linear infinite;
}
:root[data-theme="dark"] .ftp-wrap .ftp-dot{ background:#475569; }
:root[data-theme="dark"] .ftp-wrap .ftp-dot.ok{ background: var(--success); }
:root[data-theme="dark"] .ftp-wrap .ftp-dot.ko{ background: var(--danger); }
:root[data-theme="dark"] .ftp-wrap .ftp-drop{ border:1px dashed var(--border); background: var(--zebra-even); }
:root[data-theme="dark"] .ftp-wrap .ftp-drop.drag{ background: #0b2a5b; border-color: var(--blue); }