import { stylesTokens } from "./theme";

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

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

  topBar: {
    position: "relative",
    zIndex: 50,
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    gap: 10,
    padding: "14px 16px",
    borderRadius: 18,
    background: `linear-gradient(135deg, rgba(31, 28, 32, 0.90), ${stylesTokens.panelBg})`,
    border: `1px solid ${stylesTokens.headerBorder}`,
    boxShadow: "0 18px 42px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.08)",
    backdropFilter: "blur(14px) saturate(1.12)",
    WebkitBackdropFilter: "blur(14px) saturate(1.12)",
  },

  card: {
    borderRadius: 20,
    overflow: "hidden",
    border: `1px solid ${stylesTokens.panelBorder}`,
    background: `linear-gradient(145deg, rgba(25, 24, 28, 0.88), ${stylesTokens.panelBg})`,
    boxShadow: "0 20px 48px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.07)",
    backdropFilter: "blur(14px) saturate(1.08)",
    WebkitBackdropFilter: "blur(14px) saturate(1.08)",
  },

  cardBody: {
    padding: "14px 16px",
    display: "flex",
    gap: 10,
    alignItems: "center",
  },

  sectionHeader: {
    padding: "13px 16px",
    fontWeight: 1000,
    fontFamily: '"Cinzel Decorative", "IM Fell English", system-ui',
    letterSpacing: 1.5,
    fontSize: 14,
    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.72)",
  },

  row: {
    display: "grid",
    gridTemplateColumns: "1fr 54px 68px",
    gap: 10,
    padding: "13px 16px",
    alignItems: "center",
    borderBottom: "1px solid rgba(233,216,166,0.10)",
    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: 13,
    border: `1px solid rgba(233,216,166,0.22)`,
    background: "rgba(255,255,255,0.055)",
    color: stylesTokens.textGold,
    cursor: "pointer",
    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.06)",
  },

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

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

  primaryBtn: {
    padding: "11px 15px",
    borderRadius: 13,
    border: `1px solid rgba(233,216,166,0.34)`,
    background: "linear-gradient(135deg, rgba(233,216,166,0.28), rgba(120,88,35,0.20))",
    color: stylesTokens.textGold,
    fontWeight: 1000,
    cursor: "pointer",
    boxShadow: "0 8px 20px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.11)",
  },

  secondaryBtn: {
    padding: "10px 12px",
    borderRadius: 13,
    border: `1px solid rgba(233,216,166,0.18)`,
    background: "rgba(255,255,255,0.055)",
    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: 14,
    borderRadius: 20,
    border: `1px solid ${stylesTokens.panelBorder}`,
    background: `linear-gradient(145deg, rgba(25, 24, 28, 0.86), ${stylesTokens.panelBg})`,
    boxShadow: "0 18px 42px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.06)",
    backdropFilter: "blur(14px) saturate(1.08)",
    WebkitBackdropFilter: "blur(14px) saturate(1.08)",
  },
  adminTop: {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    gap: 10,
  },
  adminTitle: {
    fontWeight: 1000,
    color: stylesTokens.textGold,
  },
  adminFieldLabel: {
    display: "grid",
    gap: 5,
    color: stylesTokens.textDim,
    fontSize: 12,
    fontWeight: 800,
  },
  userRow: {
    display: "grid",
    gap: 8,
    padding: 10,
    borderRadius: 12,
    background: "rgba(255,255,255,0.055)",
    border: `1px solid rgba(233,216,166,0.10)`,
  },

  // Modal
  modalOverlay: {
    position: "fixed",
    inset: 0,                  // statt top/left/right/bottom
    width: "100%",             // ✅ NICHT 100vw
    height: "100%",            // ✅ NICHT 100vh
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    padding: "calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left))",
    boxSizing: "border-box",   // wichtig bei padding
    zIndex: 2147483647,
    background: "rgba(0,0,0,0.72)",
    overflowY: "auto",
  },

  modalCard: {
    width: "min(560px, 100%)",
    borderRadius: 20,
    border: `1px solid rgba(233,216,166,0.18)`,
    background: "linear-gradient(145deg, rgba(27,25,30,0.98), rgba(11,11,14,0.98))",
    boxShadow: "0 24px 70px rgba(0,0,0,0.78), inset 0 1px 0 rgba(255,255,255,0.07)",
    padding: 16,
    maxHeight: "calc(100dvh - 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: 24,
    position: "relative",
    zIndex: 2,
    border: `1px solid ${stylesTokens.headerBorder}`,
    background: `linear-gradient(145deg, rgba(29, 27, 31, 0.92), ${stylesTokens.panelBg})`,
    boxShadow: "0 24px 80px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.08)",
    backdropFilter: "blur(16px) saturate(1.12)",
    WebkitBackdropFilter: "blur(16px) saturate(1.12)",
    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: "11px 12px",
    borderRadius: 13,
    border: `1px solid rgba(233,216,166,0.22)`,
    background: "rgba(7,7,10,0.64)",
    color: stylesTokens.textMain,
    outline: "none",
    fontSize: 16,
  },
  loginBtn: {
    padding: "12px 15px",
    borderRadius: 14,
    border: `1px solid rgba(233,216,166,0.34)`,
    background: "linear-gradient(135deg, rgba(233,216,166,0.28), rgba(120,88,35,0.20))",
    color: stylesTokens.textGold,
    fontWeight: 1000,
    fontSize: 16,
    cursor: "pointer",
    boxShadow: "0 8px 20px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.11)",
  },
  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.72) contrast(1.12) brightness(0.42) blur(1.2px)",
    transform: "scale(1.015)",
    backgroundColor: "rgba(8, 7, 12, 0.34)",
    backgroundBlendMode: "multiply",
  },

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

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

  userBtn: {
    display: "inline-flex",
    alignItems: "center",
    gap: 8,
    padding: "10px 12px",
    borderRadius: 14,
    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(145deg, rgba(29,27,33,0.98), rgba(10,10,13,0.96))",
    boxShadow: "0 18px 55px rgba(0,0,0,0.70)",
    overflow: "hidden",
    zIndex: 99999,
    backdropFilter: "blur(14px)",
  },

  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)",
  },
};