cluedo-hp-webapp/frontend/src/styles/styles.js

import { stylesTokens } from "./theme";

export const styles = {
  page: {
    minHeight: "100dvh",
    background: "transparent",
    position: "relative",
    zIndex: 1,
  },

  shell: {
    fontFamily: '"IM Fell English", system-ui',
    padding: 16,
    maxWidth: 680,
    margin: "0 auto",
  },

  topBar: {
    position: "relative",
    zIndex: 50,
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    gap: 10,
    padding: 12,
    borderRadius: 16,
    background: stylesTokens.panelBg,
    border: `1px solid ${stylesTokens.panelBorder}`,
    boxShadow: "0 12px 30px rgba(0,0,0,0.45)",
    backdropFilter: "blur(6px)",
  },

  card: {
    borderRadius: 18,
    overflow: "hidden",
    border: `1px solid ${stylesTokens.panelBorder}`,
    background: "rgba(18, 18, 20, 0.50)",
    boxShadow: "0 18px 40px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.06)",
  },

  cardBody: {
    padding: 12,
    display: "flex",
    gap: 10,
    alignItems: "center",
  },

  sectionHeader: {
    padding: "11px 14px",
    fontWeight: 1000,
    fontFamily: '"Cinzel Decorative", "IM Fell English", system-ui',
    letterSpacing: 1.0,
    color: stylesTokens.textGold,

    // WICHTIG: Header-Farben aus Theme-Tokens, nicht hart codiert
    background: `linear-gradient(180deg, ${stylesTokens.headerBgTop}, ${stylesTokens.headerBgBottom})`,
    borderBottom: `1px solid ${stylesTokens.headerBorder}`,

    textTransform: "uppercase",
    textShadow: "0 1px 0 rgba(0,0,0,0.6)",
  },

  row: {
    display: "grid",
    gridTemplateColumns: "1fr 54px 68px",
    gap: 10,
    padding: "12px 14px",
    alignItems: "center",
    borderBottom: "1px solid rgba(233,216,166,0.08)",
    borderLeft: "4px solid rgba(0,0,0,0)",
  },

  name: {
    cursor: "pointer",
    userSelect: "none",
    fontWeight: 800,
    letterSpacing: 0.2,
    color: stylesTokens.textMain,
  },

  statusCell: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  },

  statusBadge: {
    width: 34,
    height: 34,
    display: "inline-flex",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 999,
    border: `1px solid rgba(233,216,166,0.18)`,
    fontWeight: 1100,
    fontSize: 16,
    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.06)",
  },

  tagBtn: {
    padding: "8px 0",
    fontWeight: 1000,
    borderRadius: 12,
    border: `1px solid rgba(233,216,166,0.18)`,
    background: "rgba(255,255,255,0.06)",
    color: stylesTokens.textGold,
    cursor: "pointer",
    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.06)",
  },

  helpBtn: {
    padding: "10px 12px",
    borderRadius: 12,
    border: `1px solid rgba(233,216,166,0.18)`,
    background: "rgba(255,255,255,0.06)",
    color: stylesTokens.textGold,
    fontWeight: 1000,
    cursor: "pointer",
    whiteSpace: "nowrap",
    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.06)",
  },

  input: {
    width: "100%",
    padding: "10px 12px",
    borderRadius: 14,
    border: `1px solid rgba(233,216,166,0.18)`,
    background: "rgba(10,10,12,0.55)",
    color: stylesTokens.textMain,
    outline: "none",
    fontSize: 15,
  },

  primaryBtn: {
    padding: "10px 12px",
    borderRadius: 12,
    border: `1px solid rgba(233,216,166,0.28)`,
    background: "linear-gradient(180deg, rgba(233,216,166,0.24), rgba(233,216,166,0.10))",
    color: stylesTokens.textGold,
    fontWeight: 1000,
    cursor: "pointer",
    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.08)",
  },

  secondaryBtn: {
    padding: "10px 12px",
    borderRadius: 12,
    border: `1px solid rgba(233,216,166,0.18)`,
    background: "rgba(255,255,255,0.05)",
    color: stylesTokens.textMain,
    fontWeight: 900,
    cursor: "pointer",
    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.06)",
  },

  // Admin
  adminWrap: {
    position: "relative",
    zIndex: 1,
    marginTop: 14,
    padding: 12,
    borderRadius: 16,
    border: `1px solid rgba(233,216,166,0.14)`,
    background: "rgba(18, 18, 20, 0.40)",
    boxShadow: "0 12px 30px rgba(0,0,0,0.45)",
    backdropFilter: "blur(6px)",
  },
  adminTop: {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    gap: 10,
  },
  adminTitle: {
    fontWeight: 1000,
    color: stylesTokens.textGold,
  },
  userRow: {
    display: "grid",
    gridTemplateColumns: "1fr 80px 90px",
    gap: 8,
    padding: 10,
    borderRadius: 12,
    background: "rgba(255,255,255,0.06)",
    border: `1px solid rgba(233,216,166,0.10)`,
  },

  // Modal
  modalOverlay: {
    position: "fixed",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    width: "100vw",
    height: "100vh",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    padding: 12,
    zIndex: 2147483647, // wirklich ganz oben
    background: "rgba(0,0,0,0.72)",
    overflowY: "auto",
  },

  modalCard: {
    width: "min(560px, 100%)",
    borderRadius: 18,
    border: `1px solid rgba(233,216,166,0.18)`,
    background: "rgba(12,12,14,0.96)",
    boxShadow: "0 18px 55px rgba(0,0,0,0.70)",
    padding: 14,
    maxHeight: "calc(100vh - 32px)",
    overflow: "auto",
  },
  modalHeader: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    gap: 10,
  },
  modalCloseBtn: {
    width: 38,
    height: 38,
    borderRadius: 12,
    border: `1px solid rgba(233,216,166,0.18)`,
    background: "rgba(255,255,255,0.06)",
    color: stylesTokens.textGold,
    fontWeight: 1000,
    cursor: "pointer",
    lineHeight: "38px",
    textAlign: "center",
  },

  // Help
  helpBody: {
    marginTop: 10,
    paddingTop: 4,
    maxHeight: "70vh",
    overflow: "auto",
  },
  helpSectionTitle: {
    fontWeight: 1000,
    color: stylesTokens.textGold,
    marginTop: 10,
    marginBottom: 6,
  },
  helpText: {
    color: stylesTokens.textMain,
    opacity: 0.92,
    lineHeight: 1.35,
  },
  helpList: {
    marginTop: 10,
    display: "grid",
    gap: 8,
  },
  helpListRow: {
    display: "grid",
    gridTemplateColumns: "42px 1fr",
    gap: 10,
    alignItems: "center",
    color: stylesTokens.textMain,
  },
  helpBadge: {
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    width: 38,
    height: 38,
    borderRadius: 12,
    border: `1px solid rgba(233,216,166,0.18)`,
    fontWeight: 1100,
    fontSize: 18,
  },
  helpMiniTag: {
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    width: 38,
    height: 38,
    borderRadius: 12,
    border: `1px solid rgba(233,216,166,0.18)`,
    background: "rgba(255,255,255,0.06)",
    color: stylesTokens.textGold,
    fontWeight: 1100,
  },
  helpDivider: {
    margin: "14px 0",
    height: 1,
    background: "rgba(233,216,166,0.12)",
  },

  // Login
  loginPage: {
    minHeight: "100dvh",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    overflow: "hidden",
    padding: 20,
    background: "transparent",
    zIndex: 1,
  },
  loginCard: {
    width: "100%",
    maxWidth: 420,
    padding: 26,
    borderRadius: 22,
    position: "relative",
    zIndex: 2,
    border: `1px solid rgba(233,216,166,0.18)`,
    background: "rgba(18, 18, 20, 0.55)",
    boxShadow: "0 18px 60px rgba(0,0,0,0.70)",
    backdropFilter: "blur(8px)",
    animation: "popIn 240ms ease-out",
    color: stylesTokens.textMain,
  },
  loginTitle: {
    fontFamily: '"Cinzel Decorative", "IM Fell English", system-ui',
    fontWeight: 1000,
    fontSize: 26,
    color: stylesTokens.textGold,
    textAlign: "center",
    letterSpacing: 0.6,
  },
  loginSubtitle: {
    marginTop: 6,
    textAlign: "center",
    color: stylesTokens.textMain,
    opacity: 0.9,
    fontSize: 15,
    lineHeight: 1.4,
  },
  loginFieldWrap: {
    width: "100%",
    display: "flex",
    justifyContent: "center",
  },
  loginInput: {
    width: "100%",
    padding: 10,
    borderRadius: 12,
    border: `1px solid rgba(233,216,166,0.18)`,
    background: "rgba(10,10,12,0.60)",
    color: stylesTokens.textMain,
    outline: "none",
    fontSize: 16,
  },
  loginBtn: {
    padding: "12px 14px",
    borderRadius: 14,
    border: `1px solid rgba(233,216,166,0.28)`,
    background: "linear-gradient(180deg, rgba(233,216,166,0.24), rgba(233,216,166,0.10))",
    color: stylesTokens.textGold,
    fontWeight: 1000,
    fontSize: 16,
    cursor: "pointer",
    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.08)",
  },
  loginHint: {
    marginTop: 18,
    fontSize: 13,
    opacity: 0.78,
    textAlign: "center",
    color: stylesTokens.textDim,
    lineHeight: 1.35,
  },

  candleGlowLayer: {
    position: "absolute",
    inset: 0,
    pointerEvents: "none",
    background: `
      radial-gradient(circle at 20% 25%, rgba(255, 200, 120, 0.16), rgba(0,0,0,0) 40%),
      radial-gradient(circle at 80% 30%, rgba(255, 210, 140, 0.12), rgba(0,0,0,0) 42%),
      radial-gradient(circle at 55% 75%, rgba(255, 180, 100, 0.08), rgba(0,0,0,0) 45%)
    `,
    animation: "candleGlow 3.8s ease-in-out infinite",
    mixBlendMode: "multiply",
  },

  inputRow: {
    display: "flex",
    alignItems: "stretch",
    width: "100%",
  },
  inputInRow: {
    flex: 1,
    padding: 10,
    borderRadius: "12px 0 0 12px",
    border: `1px solid rgba(233,216,166,0.18)`,
    background: "rgba(10,10,12,0.60)",
    color: stylesTokens.textMain,
    outline: "none",
    minWidth: 0,
    fontSize: 16,
  },
  pwToggleBtn: {
    width: 48,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    borderRadius: "0 12px 12px 0",
    border: `1px solid rgba(233,216,166,0.18)`,
    borderLeft: "none",
    background: "rgba(255,255,255,0.06)",
    color: stylesTokens.textGold,
    cursor: "pointer",
    fontWeight: 900,
    padding: 0,
  },

  // Background
  bgFixed: {
    position: "fixed",
    top: 0,
    left: 0,
    width: "100vw",
    height: "100dvh",
    zIndex: -1,
    pointerEvents: "none",
    transform: "translateZ(0)",
    backfaceVisibility: "hidden",
    willChange: "transform",
  },

  bgMap: {
    position: "absolute",
    inset: 0,
    backgroundImage: stylesTokens.bgImage,
    backgroundSize: "cover",
    backgroundPosition: "center",
    backgroundRepeat: "no-repeat",
    filter: "saturate(0.9) contrast(1.05) brightness(0.55)",
  },

  chipGrid: {
    marginTop: 12,
    display: "grid",
    gridTemplateColumns: "repeat(5, minmax(0, 1fr))",
    gap: 8,
  },

  chipBtn: {
    padding: "10px 14px",
    borderRadius: 12,
    border: "1px solid rgba(233,216,166,0.18)",
    background: "rgba(255,255,255,0.06)",
    color: stylesTokens.textGold,
    fontWeight: 1000,
    cursor: "pointer",
    minWidth: 64,
  },

  userBtn: {
    display: "inline-flex",
    alignItems: "center",
    gap: 8,
    padding: "10px 12px",
    borderRadius: 12,
    border: `1px solid rgba(233,216,166,0.18)`,
    background: "rgba(255,255,255,0.05)",
    color: stylesTokens.textMain,
    fontWeight: 900,
    cursor: "pointer",
    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.06)",
    maxWidth: 180,
  },

  userDropdown: {
    position: "absolute",
    right: 0,
    top: "calc(100% + 8px)",
    minWidth: 220,
    borderRadius: 14,
    border: `1px solid rgba(233,216,166,0.18)`,
    background: "linear-gradient(180deg, rgba(20,20,24,0.96), rgba(12,12,14,0.92))",
    boxShadow: "0 18px 55px rgba(0,0,0,0.70)",
    overflow: "hidden",
    zIndex: 99999,
    backdropFilter: "blur(8px)",
  },

  userDropdownItem: {
    width: "100%",
    textAlign: "left",
    padding: "10px 12px",
    border: "none",
    background: "transparent",
    color: stylesTokens.textMain,
    fontWeight: 900,
    cursor: "pointer",
  },

  userDropdownDivider: {
    height: 1,
    background: "rgba(233,216,166,0.12)",
  },
};