/* mettugi MOTD compact skin for SourceBans++
   Accent #00ce2d. Dark = MOTD translucent panels; light = gif + frosted panels + black text.
   Loaded after theme.css. Relative asset URLs work under /mettugi/ or /mettugi/sourcebans/.
*/

@font-face {
  font-family: 'WILDgag-Bold';
  src: url('../fonts/WILDgag-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Green brand (replaces SB++ orange) */
  --brand-50:  #e8ffe9;
  --brand-100: #c6ffcb;
  --brand-200: #8aff96;
  --brand-300: #4dff62;
  --brand-400: #1aff3a;
  --brand-500: #00e632;
  --brand-600: #00ce2d;
  --brand-700: #00a524;
  --brand-800: #007a1b;
  --brand-900: #005412;
  --brand-950: #002e0a;

  --accent: var(--brand-600);
  --accent-hover: var(--brand-700);
  --accent-soft: rgba(0, 206, 45, 0.15);

  --gold: #f0c040;
  --gold-glow: rgba(240, 192, 64, 0.55);
  --green-glow: rgba(0, 206, 45, 0.75);

  --font-display: 'WILDgag-Bold', 'Inter', sans-serif;

  /* Light theme — translucent so MOTD background.gif shows through;
     black text stays on frosted surfaces for contrast. */
  --bg-page: rgba(245, 245, 245, 0.55);
  --bg-surface: rgba(250, 250, 250, 0.78);
  --bg-muted: rgba(238, 238, 238, 0.72);
  --border: #d4d4d8;
  --text: #111111;
  --text-muted: #3f3f46;
  --text-faint: #71717a;
  --success: #00a524;
  --success-bg: #e8ffe9;
  --warning: #b45309;
  --warning-bg: #fffbeb;

  --filter-stuck-bg: rgba(250, 250, 250, 0.94);
  --filter-stuck-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
}

/* Dark MOTD canvas — only when theme toggle resolves to dark */
html.dark {
  color-scheme: dark;
  --bg-page: #0a0a0a;
  --bg-surface: rgba(20, 20, 20, 0.88);
  --bg-muted: rgba(40, 40, 40, 0.65);
  --border: rgba(0, 206, 45, 0.35);
  --text: #f4f4f5;
  --text-muted: #c4c4c8;
  --text-faint: #8a8a90;
  --accent-soft: rgba(0, 206, 45, 0.18);
  --success: #00ce2d;
  --success-bg: rgba(0, 206, 45, 0.15);
  --warning: var(--gold);
  --warning-bg: rgba(240, 192, 64, 0.12);

  --filter-stuck-bg: rgba(12, 12, 12, 0.94);
  --filter-stuck-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
}

/* ---- Light theme surfaces (gif visible through frost) ---- */
html:not(.dark) {
  color-scheme: light;
}

html:not(.dark) body {
  background-color: #c8c8c8;
  background-image: url('../images/background.gif');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: #111111;
  text-shadow: none;
}

/* Soft wash so dark gif areas don't kill black text contrast */
html:not(.dark) body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(245, 245, 245, 0.42);
}

html:not(.dark) .sidebar {
  background: rgba(250, 250, 250, 0.82);
  border-right: 3px solid #00ce2d;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html:not(.dark) .sidebar__brand {
  border-bottom: 2px solid #00ce2d;
  background: rgba(0, 206, 45, 0.10);
}

html:not(.dark) .sidebar__brand .font-semibold,
html:not(.dark) .sidebar__brand-title {
  font-family: var(--font-display);
  color: #00a524;
  text-shadow: none;
}

html:not(.dark) .sidebar__section-label {
  color: #92600a;
  text-shadow: none;
}

html:not(.dark) .sidebar__link:hover {
  background: rgba(0, 206, 45, 0.14);
  border-color: #00ce2d;
}

html:not(.dark) .sidebar__link[aria-current="page"] {
  background: rgba(0, 206, 45, 0.26) !important;
  color: #041005 !important;
  box-shadow: none;
}

html:not(.dark) .main,
html:not(.dark) .page {
  background: transparent;
}

html:not(.dark) .topbar {
  background: rgba(250, 250, 250, 0.86);
  border-bottom: 2px solid #00ce2d;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #111111;
}

html:not(.dark) .card,
html:not(.dark) .panel,
html:not(.dark) .box,
html:not(.dark) [class*="card"],
html:not(.dark) .banlist,
html:not(.dark) .table-wrap,
html:not(.dark) .dashboard-card,
html:not(.dark) .stat-card,
html:not(.dark) .intro-card {
  background: rgba(250, 250, 250, 0.80) !important;
  border: 1px solid #d4d4d8 !important;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  color: #111111;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

html:not(.dark) h1,
html:not(.dark) h2,
html:not(.dark) h3,
html:not(.dark) .page-title,
html:not(.dark) .card__title,
html:not(.dark) .section-title {
  font-family: var(--font-display);
  color: #00a524;
  text-shadow: none;
}

html:not(.dark) .btn--primary,
html:not(.dark) .btn-primary,
html:not(.dark) button.btn.btn--primary,
html:not(.dark) a.btn.btn--primary {
  background: #00ce2d !important;
  border-color: #00a524 !important;
  color: #041005 !important;
  font-weight: 700;
  text-shadow: none;
  box-shadow: none;
}

html:not(.dark) a:not(.btn):not(.sidebar__link) {
  color: #007a1b;
}

html:not(.dark) a:not(.btn):not(.sidebar__link):hover {
  color: #92600a;
  text-shadow: none;
}

html:not(.dark) table,
html:not(.dark) .table {
  background: rgba(250, 250, 250, 0.72);
  border-color: #d4d4d8;
  color: #111111;
}

html:not(.dark) thead,
html:not(.dark) th {
  background: rgba(0, 206, 45, 0.16) !important;
  color: #005412 !important;
  border-bottom: 2px solid #00ce2d !important;
  font-family: var(--font-display);
  text-shadow: none;
}

html:not(.dark) tbody tr:hover {
  background: rgba(0, 206, 45, 0.10) !important;
}

html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea,
html:not(.dark) .form-control {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid #d4d4d8 !important;
  color: #111111 !important;
}

html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus {
  border-color: #00ce2d !important;
  box-shadow: 0 0 0 2px rgba(0, 206, 45, 0.2) !important;
}

html:not(.dark) .app-footer,
html:not(.dark) footer {
  background: rgba(238, 238, 238, 0.88);
  border-top: 2px solid #00ce2d;
  color: #3f3f46;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

html:not(.dark) ::-webkit-scrollbar-track { background: rgba(228, 228, 231, 0.7); }
html:not(.dark) ::-webkit-scrollbar-thumb { background: #00a524; border-radius: 4px; }

/* Sticky filter bars — transparent at rest; frosted when .is-stuck (JS) */
#banlist-filters,
#comms-filters {
  background: transparent !important;
  box-shadow: none !important;
  transition: background-color 0.18s ease, box-shadow 0.18s ease, backdrop-filter 0.18s ease;
}

#banlist-filters.is-stuck,
#comms-filters.is-stuck {
  background: var(--filter-stuck-bg) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--filter-stuck-shadow) !important;
  /* Bleed through parent .p-6 (1.5rem) so frosted bg is full-bleed to container edges */
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  /* Keep form controls aligned with page content; override inline padding:0.75rem 0 */
  padding: 0.75rem 1.5rem !important;
  width: auto;
  max-width: none;
  box-sizing: border-box;
}

/* ---- Dark theme (existing MOTD look) ---- */
html.dark body {
  background-color: #0a0a0a;
  background-image: url('../images/background.gif');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.85);
}

html.dark .sidebar {
  background: rgba(12, 12, 12, 0.92);
  border-right: 3px solid #00ce2d;
  box-shadow: 4px 0 24px rgba(0, 206, 45, 0.15);
}
html.dark .sidebar__brand {
  border-bottom: 2px solid #00ce2d;
  background: rgba(0, 206, 45, 0.08);
}
html.dark .sidebar__brand-mark {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
  filter: drop-shadow(0 0 6px var(--green-glow));
}
html.dark .sidebar__brand .font-semibold,
html.dark .sidebar__brand-title {
  font-family: var(--font-display);
  color: #00ce2d;
  text-shadow: 0 0 10px var(--green-glow), 0 0 4px var(--gold-glow);
  letter-spacing: 0.02em;
}
html.dark .sidebar__section-label {
  color: var(--gold);
  text-shadow: 0 0 6px var(--gold-glow);
}
html.dark .sidebar__link:hover {
  background: rgba(0, 206, 45, 0.18);
  border-color: #00ce2d;
}
html.dark .sidebar__link[aria-current="page"] {
  background: rgba(0, 206, 45, 0.45) !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(0, 206, 45, 0.35);
}

html.dark .main {
  background: transparent;
}
html.dark .topbar {
  background: rgba(12, 12, 12, 0.9);
  border-bottom: 2px solid #00ce2d;
  backdrop-filter: blur(6px);
}
html.dark .page {
  background: transparent;
}

html.dark .card,
html.dark .panel,
html.dark .box,
html.dark [class*="card"],
html.dark .banlist,
html.dark .table-wrap,
html.dark .dashboard-card,
html.dark .stat-card,
html.dark .intro-card {
  background: rgba(20, 20, 20, 0.85) !important;
  border: 2px solid rgba(0, 206, 45, 0.45) !important;
  border-radius: 0.5rem;
  box-shadow: 0 0 18px rgba(0, 206, 45, 0.12), inset 0 0 0 1px rgba(255,255,255,0.03);
}

html.dark h1,
html.dark h2,
html.dark h3,
html.dark .page-title,
html.dark .card__title,
html.dark .section-title {
  font-family: var(--font-display);
  color: #00ce2d;
  text-shadow: 2px 2px 4px #000, 0 0 12px var(--green-glow), 0 0 4px var(--gold-glow);
}

html.dark .btn--primary,
html.dark .btn-primary,
html.dark button.btn.btn--primary,
html.dark a.btn.btn--primary {
  background: #00ce2d !important;
  border-color: #00a524 !important;
  color: #041005 !important;
  font-weight: 700;
  text-shadow: none;
  box-shadow: 0 0 12px rgba(0, 206, 45, 0.4);
}
html.dark .btn--primary:hover,
html.dark .btn-primary:hover {
  background: #00e632 !important;
  box-shadow: 0 0 18px rgba(0, 206, 45, 0.55);
}
html.dark a:not(.btn):not(.sidebar__link) {
  color: #00ce2d;
}
html.dark a:not(.btn):not(.sidebar__link):hover {
  color: var(--gold);
  text-shadow: 0 0 8px var(--gold-glow);
}

html.dark table,
html.dark .table {
  background: rgba(16, 16, 16, 0.75);
  border-color: rgba(0, 206, 45, 0.3);
}
html.dark thead,
html.dark th {
  background: rgba(0, 206, 45, 0.18) !important;
  color: #00ce2d !important;
  border-bottom: 2px solid #00ce2d !important;
  font-family: var(--font-display);
  text-shadow: 0 0 6px var(--green-glow);
}
html.dark tbody tr:hover {
  background: rgba(0, 206, 45, 0.1) !important;
}

html.dark input,
html.dark select,
html.dark textarea,
html.dark .form-control {
  background: rgba(0, 0, 0, 0.55) !important;
  border: 1px solid rgba(0, 206, 45, 0.45) !important;
  color: #f4f4f5 !important;
}
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: #00ce2d !important;
  box-shadow: 0 0 0 2px rgba(0, 206, 45, 0.25) !important;
}

html.dark .app-footer,
html.dark footer {
  background: rgba(8, 8, 8, 0.92);
  border-top: 2px solid #00ce2d;
  color: var(--text-muted);
}

html.dark .login-card,
html.dark [data-testid="login-card"] {
  border: 3px solid #00ce2d !important;
  box-shadow: 0 0 28px rgba(0, 206, 45, 0.25);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark ::-webkit-scrollbar-track { background: #111; }
html.dark ::-webkit-scrollbar-thumb { background: #00ce2d; border-radius: 4px; }

/* Brand mark sizing (both themes) */
.sidebar__brand-mark {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
}