/* =====================
   RULES – Dominate (Premium v6)
   - Beholder rule-rows (billede 1)
   - Kategori cards = reference "group" look (billede 2)
   - Grøn accent (Dominate)
   ===================== */

:root{
  --r-bg: #050509;

  /* surfaces */
  --r-surface: rgba(13,13,13,0.30);
  --r-surface-2: rgba(255,255,255,0.03);
  --r-surface-3: rgba(12,12,12,0.32);

  /* borders */
  --r-border: rgba(255,255,255,0.08);
  --r-border-2: rgba(255,255,255,0.12);

  /* text */
  --r-text: rgba(255,255,255,0.92);
  --r-muted: rgba(255,255,255,0.72);
  --r-muted-2: rgba(255,255,255,0.60);

  /* accent */
  --r-accent: rgba(2,207,92,0.92);
  --r-accent-soft: rgba(2,207,92,0.10);
  --r-accent-border: rgba(2,207,92,0.22);

  /* shadows (rolig/premium) */
  --r-shadow: 0 18px 70px rgba(0,0,0,0.55);
  --r-shadow-soft: 0 12px 34px rgba(0,0,0,0.42);
  --r-glow: 0 0 0 1px rgba(2,207,92,0.06) inset, 0 0 18px rgba(2,207,92,0.08);
}

html, body{ margin:0; padding:0; }

/* Base */
.rules-body{
  min-height: 100vh;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;

  color:#fff;
  font-family: var(--main-font);
  padding: 110px 0 0;

  background:
    radial-gradient(circle at 50% 0%, rgba(2,207,92,0.09), rgba(0,0,0,0) 55%),
    radial-gradient(circle at 20% 20%, rgba(2,207,92,0.06), rgba(0,0,0,0) 45%),
    #060707;
}

.rules-wrapper{
  flex:1 0 auto;
  max-width: 1160px;
  margin:0 auto;
  padding: 0 24px 70px;
}

.rules-body footer,
.rules-body .footer,
.rules-body .site-footer{ margin-top:auto; }

/* tap highlight */
.rules-card,
.rules-chip,
.rules-type-btn,
.rule-item,
.rules-admin-btn,
.rules-admin-tab,
.rules-admin-close,
.rules-admin-submit,
.rule-edit-btn,
.rule-delete-btn,
.category-delete-btn{ -webkit-tap-highlight-color: transparent; }

.rules-body ::selection{ background: rgba(2,207,92,0.22); color:#fff; }

/* =====================
   HERO
   ===================== */
.rules-hero{ margin: 12px 0 18px; }

.rules-hero-top{
  position:relative;
  overflow:hidden;

  padding: 24px 24px 20px;
  border-radius: 22px;

  background: rgba(13,13,13,0.28);
  border: 1px solid var(--r-border);
  box-shadow: var(--r-shadow);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.rules-hero-top::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.00) 52%);
  pointer-events:none;
  opacity:0.45;
}

.rules-hero-text{ min-width:0; }

.rules-kicker{
  margin:0 0 8px;
  font-size:0.78rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color: rgba(255,255,255,0.62);
}

.rules-title{
  margin:0 0 8px;
  font-size: clamp(2.1rem, 3.4vw, 2.8rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;

  background: linear-gradient(90deg, var(--servername-gradient));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.rules-lead{
  margin:0;
  font-size:1rem;
  line-height:1.75;
  color: rgba(255,255,255,0.68);
  max-width: 80ch;
}

.rules-hero-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  flex-shrink:0;
}

/* type switch */
.rules-type-switch{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px;
  border-radius:999px;

  background: rgba(13,13,13,0.35);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
}

.rules-type-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:999px;
  text-decoration:none;

  font-size:0.82rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;

  color: rgba(255,255,255,0.82);
  border:1px solid transparent;

  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.rules-type-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(2,207,92,0.30);
  background: rgba(9, 16, 12, 0.55);
}

.rules-type-btn.is-active{
  color:#fff;
  background: rgba(2,207,92,0.10);
  border-color: rgba(2,207,92,0.24);
  box-shadow: 0 0 0 1px rgba(2,207,92,0.08) inset;
}

/* admin btn */
.rules-admin-btn{
  padding:10px 16px;
  border-radius:12px;

  border:1px solid rgba(255,255,255,0.12);
  background: rgba(13,13,13,0.35);
  color: rgba(255,255,255,0.92);

  font-size:0.82rem;
  font-weight:800;
  letter-spacing:0.14em;
  text-transform:uppercase;

  cursor:pointer;
  backdrop-filter: blur(10px);

  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.rules-admin-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(2,207,92,0.30);
  background: rgba(9, 16, 12, 0.55);
  box-shadow: var(--r-shadow-soft);
}

/* =====================
   Sticky category bar
   ===================== */
.rules-stickybar{
  margin-top: 12px;
  position: sticky;
  top: 86px;
  z-index: 50;
}

.rules-stickybar-inner{
  display:flex;
  align-items:center;
  gap:14px;

  padding:10px 12px;
  border-radius:16px;

  background: rgba(13,13,13,0.28);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--r-shadow-soft);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.rules-stickybar-title{
  display:inline-flex;
  align-items:center;
  gap:10px;

  font-size:0.78rem;
  font-weight:900;
  letter-spacing:0.16em;
  text-transform:uppercase;

  color: rgba(255,255,255,0.72);
  white-space:nowrap;
  padding:0 6px;
}

.rules-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(2,207,92,0.80);
  box-shadow: 0 0 12px rgba(2,207,92,0.18);
}

.rules-quicknav{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  overflow:auto;
  padding:4px 2px;
  scrollbar-width:thin;
}

.rules-quicknav::-webkit-scrollbar{ height:10px; }
.rules-quicknav::-webkit-scrollbar-track{
  background: rgba(0,0,0,0.25);
  border-radius:999px;
}
.rules-quicknav::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.10);
  border-radius:999px;
  border: 2px solid rgba(10,10,12,0.55);
}

.rules-chip{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(13,13,13,0.35);
  color: rgba(255,255,255,0.82);
  border-radius:999px;

  padding:10px 12px;
  font-size:0.80rem;
  font-weight:800;

  cursor:pointer;
  white-space:nowrap;

  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.rules-chip:hover{
  transform: translateY(-1px);
  border-color: rgba(2,207,92,0.30);
  background: rgba(9, 16, 12, 0.55);
}

.rules-chip.is-active{
  background: rgba(2,207,92,0.10);
  border-color: rgba(2,207,92,0.24);
  box-shadow: 0 0 0 1px rgba(2,207,92,0.08) inset;
}

/* =====================
   Empty page
   ===================== */
.rules-empty{
  margin-top: 18px;
  padding: 18px 18px;
  border-radius: 18px;

  background: rgba(13,13,13,0.28);
  border: 1px solid var(--r-border);
  box-shadow: var(--r-shadow-soft);
  backdrop-filter: blur(12px);
}

.rules-empty h2{
  margin:0 0 6px;
  font-size:1.1rem;
  font-weight:900;
}

.rules-empty p{
  margin:0 0 12px;
  color: rgba(255,255,255,0.70);
  line-height:1.7;
}

/* =====================
   Grid (1 kolonne)
   ===================== */
.rules-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 18px;
}

/* ============================================================
   CATEGORY SECTION (titel + desc udenfor card) – som billedet
   ============================================================ */
.rules-section{
  margin-top: 26px;
}

.rules-sectionTop{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.rules-sectionTitle{
  margin: 0;
  font-size: 48px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-shadow: 0 18px 70px rgba(0,0,0,0.55);
}

.rules-sectionDesc{
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(255,255,255,0.78);
  max-width: 92ch;
}

.rules-sectionRight{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-shrink: 0;
}

/* Mobile size som reference */
@media (max-width: 920px){
  .rules-sectionTitle{ font-size: 38px; }
}


/* ============================================================
   CATEGORY CARD – "GROUP" LOOK (som billede 2)
   - Selve card = container (group)
   - Head = header bar
   - Body = padded area med dine rule-rows
   ============================================================ */
.rules-card{
  position:relative;
  overflow:hidden;

  border-radius: 18px;
  padding: 0; /* vigtigt: vi bygger head/body som reference */

  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(13,13,13,0.30);
  box-shadow: var(--r-shadow-soft);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.rules-card:hover,
.rules-card:focus-within{
  transform: translateY(-2px);
  border-color: rgba(2,207,92,0.18);
  box-shadow: 0 22px 70px rgba(0,0,0,0.60), var(--r-glow);
}

.rules-card :focus{ outline:none; }

/* header bar */
.rules-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* venstre side: ikon + titel */
.rules-card-left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width:0;
}

.rules-card-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;

  background: rgba(12,12,12,0.32);
  border: 1px solid rgba(255,255,255,0.10);

  display:inline-flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
  flex: 0 0 44px;
}

.rules-card-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding: 8px;
  filter: grayscale(1) brightness(1.08) contrast(1.05);
  opacity: 0.95;
}

.rules-card-icon span{
  font-size: 18px;
  line-height: 1;
  opacity: 0.9;
}

.rules-card-metaText{ min-width:0; }

.rules-card-titleRow{
  display:flex;
  align-items:baseline;
  gap: 10px;
  flex-wrap:wrap;
}

.rules-card-title{
  margin:0;
  font-size: 0.92rem;      /* mere “groupTitle” vibe */
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
}

.rules-range{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 6px 10px;
  border-radius: 999px;

  background: rgba(13,13,13,0.35);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.62);

  font-size: 0.70rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* beskrivelse under header – reference “groupLead” */
.rules-card-desc{
  margin: 8px 0 0;
  font-size: 0.90rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.62);
  max-width: 92ch;
}

/* højre side: count pill + admin */
.rules-card-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 10px;
  flex-shrink:0;
}

/* count pill – som reference (roleg) */
.rules-count-pill{
  padding: 8px 12px;
  border-radius: 999px;

  background: rgba(9, 16, 12, 0.60);
  border: 1px solid rgba(2,207,92,0.18);
  color: rgba(2,207,92,0.92);

  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rules-card-admin{
  display:flex;
  gap: 8px;
  align-items:center;
}

/* body padding inde i card (holder dine rows pænt) */
.rules-card > .rules-card-empty,
.rules-card > .rules-list{
  padding: 14px 14px 16px;
}

/* Empty inside card */
.rules-card-empty{
  margin: 0;
  border-radius: 14px;

  background: rgba(12,12,12,0.32);
  border: 1px solid rgba(255,255,255,0.08);

  color: rgba(255,255,255,0.70);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ============================================================
   RULE ROWS – BEHOLD (billede 1)
   (ingen ændringer i look, men sikrer padding spiller med group)
   ============================================================ */
.rules-list{
  list-style:none;
  margin:0;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.rule-item{
  display:flex;
  align-items:flex-start;
  gap: 14px;

  padding: 16px 18px;
  border-radius: 16px;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.02) 100%);

  border: 1px solid rgba(255,255,255,0.08);

  /* venstre accent som reference */
  box-shadow: 3px 0 0 0 rgba(2,207,92,0.35) inset;
}

/* “2.1 / 2.2” style i grøn (ingen cirkel) */
.rule-index{
  width: 62px;
  flex: 0 0 62px;

  height:auto;
  margin-top: 2px;

  border: none;
  background: transparent;

  display:flex;
  align-items:flex-start;
  justify-content:flex-start;

  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: rgba(2,207,92,0.92);
}

.rule-main{
  width: 100%;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
}

.rule-main-text{ flex: 1 1 auto; min-width: 0; }

/* ====== ✅ FIX til linjeskift (KUN denne del er ændret) ====== */
.rule-text{
  font-size: 0.98rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.86);

  /* før: inline-flex + wrap (det ødelægger <br>) */
  display:flex;
  align-items:flex-start;
  gap: 10px;

  min-width: 0;
}

.rule-text strong{ color: rgba(255,255,255,0.95); }

/* Ny wrapper til teksten, så <br> opfører sig normalt */
.rule-content{
  display:block;
  min-width:0;
  flex: 1 1 auto;
}

/* “R1 / G1” badge */
.rule-code{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 6px 10px;
  border-radius: 999px;
  margin:0;

  background: rgba(2,207,92,0.10);
  border: 1px solid rgba(2,207,92,0.18);
  color: rgba(2,207,92,0.92);

  font-size: 0.70rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  flex: 0 0 auto;
}
/* ====== ✅ FIX slut ====== */

/* =====================
   Admin buttons
   ===================== */
.rule-actions{
  display:flex;
  flex-direction:column;
  gap: 8px;
  align-items:flex-end;
  flex-shrink:0;
}

.rule-edit-btn{
  padding: 9px 13px;
  border-radius: 12px;

  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.92);

  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.rule-edit-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.18);
  box-shadow: var(--r-shadow-soft);
}

.rule-delete-btn,
.category-delete-btn{
  padding: 9px 13px;
  border-radius: 12px;

  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(179,38,30,0.92);
  color:#fff;

  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  cursor:pointer;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

.rule-delete-btn:hover,
.category-delete-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.07);
  box-shadow: var(--r-shadow-soft);
}


.rules-admin-tab:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.16);
}

.rules-admin-tab-active{
  color:#fff;
  background: var(--r-accent-soft);
  border-color: var(--r-accent-border);
  box-shadow: 0 0 0 1px rgba(2,207,92,0.08) inset;
}

.rules-admin-body{
  padding: 0 18px 18px;
  overflow:auto;
}

.rules-admin-panel{ display:none; }
.rules-admin-panel-active{ display:block; }

.rules-admin-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:12px;
}

.rules-admin-field label{
  font-size:0.76rem;
  font-weight:900;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color: rgba(255,255,255,0.70);
}

.rules-admin-field input[type="text"],
.rules-admin-field input[type="file"],
.rules-admin-field input[type="number"],
.rules-admin-field select,
.rules-admin-field textarea{
  background: rgba(7,7,9,0.98);
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.14);
  padding:10px 12px;

  color:#fff;
  font-size:0.92rem;
  outline:none;

  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.rules-admin-field textarea{
  resize:vertical;
  min-height:190px;
}

.rules-admin-field input:focus,
.rules-admin-field select:focus,
.rules-admin-field textarea:focus{
  border-color: rgba(2,207,92,0.40);
  box-shadow: 0 0 0 1px rgba(2,207,92,0.14);
  background: rgba(8,8,10,0.98);
}

.rules-admin-actions{
  position:sticky;
  bottom:0;
  display:flex;
  justify-content:flex-end;
  padding-top:12px;

  background: linear-gradient(to top, rgba(10,10,12,0.86), rgba(10,10,12,0));
}

.rules-admin-submit{
  padding:10px 16px;
  border-radius:12px;

  border:1px solid rgba(2,207,92,0.32);
  background: rgba(2,207,92,0.12);
  color:#fff;

  font-size:0.82rem;
  font-weight:900;
  letter-spacing:0.14em;
  text-transform:uppercase;

  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.rules-admin-submit:hover{
  transform: translateY(-1px);
  background: rgba(2,207,92,0.16);
  border-color: rgba(2,207,92,0.46);
  box-shadow: 0 0 16px rgba(2,207,92,0.12);
}

/* =====================
   Modals – matcher rules.php look
   ===================== */
.rules-admin-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
  font-family: var(--main-font);
}
.rules-admin-modal.open{ display:block; }

/* backdrop = samme “Dominate” vibe */
.rules-admin-backdrop{
  position:absolute;
  inset:0;
  background:
    radial-gradient(60% 55% at 50% 6%, rgba(2, 207, 92, 0.12), rgba(5, 5, 9, 0) 60%),
    radial-gradient(40% 35% at 16% 18%, rgba(255,255,255,0.06), rgba(0,0,0,0) 55%),
    rgba(0,0,0,0.78);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* dialog = glass card + glow som resten */
.rules-admin-dialog{
  position:relative;
  width: min(920px, calc(100% - 36px));
  margin: 92px auto 28px;
  border-radius: 22px;
  overflow:hidden;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 28%, rgba(10,10,12,0.86) 100%),
    rgba(10,10,12,0.86);

  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 26px 70px rgba(0,0,0,0.86), var(--r-glow);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  display:flex;
  flex-direction:column;
  max-height: calc(100vh - 140px);
}

/* top accent line */
.rules-admin-dialog::before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:12px;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(2,207,92,0.70), rgba(2,207,92,0));
  opacity: 0.45;
}

/* header */
.rules-admin-header{
  padding: 18px 18px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(13,13,13,0.22);
}

.rules-admin-header h2{
  margin:0;
  font-size:1.05rem;
  font-weight:900;
  letter-spacing:0.02em;
  color: rgba(255,255,255,0.92);
}

.rules-admin-close{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.86);
  cursor:pointer;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.rules-admin-close:hover{
  transform: translateY(-1px);
  background: rgba(2,207,92,0.10);
  border-color: rgba(2,207,92,0.26);
  box-shadow: 0 0 16px rgba(2,207,92,0.12);
}

.rules-admin-close:focus,
.rules-admin-close:focus-visible{ outline:none; }

/* tabs = samme “pill” stil som chips */
.rules-admin-tabs{
  padding: 12px 18px 14px;
  display:inline-flex;
  gap:8px;
  flex-wrap:wrap;

  background: rgba(13,13,13,0.16);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.rules-admin-tab{
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(13,13,13,0.35);
  border-radius:999px;
  padding: 10px 14px;

  font-size:0.78rem;
  font-weight:900;
  letter-spacing:0.14em;
  text-transform:uppercase;

  color: rgba(255,255,255,0.78);
  cursor:pointer;

  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.rules-admin-tab:hover{
  transform: translateY(-1px);
  border-color: rgba(2,207,92,0.28);
  background: rgba(9, 16, 12, 0.55);
}

.rules-admin-tab-active{
  color:#fff;
  background: rgba(2,207,92,0.12);
  border-color: rgba(2,207,92,0.28);
  box-shadow: 0 0 0 1px rgba(2,207,92,0.10) inset;
}

/* body */
.rules-admin-body{
  padding: 16px 18px 18px;
  overflow:auto;
}

/* scrollbar (matcher screenshot vibe) */
.rules-admin-body::-webkit-scrollbar{ width: 12px; }
.rules-admin-body::-webkit-scrollbar-track{
  background: rgba(0,0,0,0.25);
  border-radius: 999px;
}
.rules-admin-body::-webkit-scrollbar-thumb{
  background: rgba(2,207,92,0.55);
  border-radius: 999px;
  border: 3px solid rgba(10,10,12,0.65);
}
.rules-admin-body{ scrollbar-width: thin; scrollbar-color: rgba(2,207,92,0.55) rgba(0,0,0,0.25); }

.rules-admin-panel{ display:none; }
.rules-admin-panel-active{ display:block; }

/* fields */
.rules-admin-field{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:14px;
}

.rules-admin-field label{
  font-size:0.76rem;
  font-weight:900;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color: rgba(255,255,255,0.70);
}

/* inputs = samme “glass input” som resten */
.rules-admin-field input[type="text"],
.rules-admin-field input[type="file"],
.rules-admin-field input[type="number"],
.rules-admin-field select,
.rules-admin-field textarea{
  width:100%;
  background: rgba(7,7,9,0.92);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  padding: 12px 12px;

  color:#fff;
  font-size:0.92rem;
  outline:none;

  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.rules-admin-field textarea{
  resize:vertical;
  min-height:190px;
}

.rules-admin-field input::placeholder,
.rules-admin-field textarea::placeholder{
  color: rgba(255,255,255,0.46);
}

/* select polish */
.rules-admin-field select{
  appearance:none;
  -webkit-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.70) 50%),
    linear-gradient(135deg, rgba(255,255,255,0.70) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right: 44px;
}

.rules-admin-field input:focus,
.rules-admin-field select:focus,
.rules-admin-field textarea:focus{
  border-color: rgba(2,207,92,0.42);
  box-shadow: 0 0 0 1px rgba(2,207,92,0.16), 0 0 0 4px rgba(2,207,92,0.08);
  background: rgba(8,8,10,0.96);
}

/* file input button */
.rules-admin-field input[type="file"]{
  padding: 10px 12px;
}
.rules-admin-field input[type="file"]::file-selector-button{
  margin-right: 12px;
  padding: 10px 12px;
  border-radius: 12px;

  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.90);

  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor:pointer;

  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.rules-admin-field input[type="file"]::file-selector-button:hover{
  transform: translateY(-1px);
  border-color: rgba(2,207,92,0.26);
  background: rgba(2,207,92,0.10);
}

/* actions (sticky) */
.rules-admin-actions{
  position:sticky;
  bottom:0;
  display:flex;
  justify-content:flex-end;
  padding: 12px 0 0;

  background: linear-gradient(to top, rgba(10,10,12,0.92), rgba(10,10,12,0));
}

.rules-admin-submit{
  padding:12px 18px;
  border-radius:14px;

  border:1px solid rgba(2,207,92,0.34);
  background: rgba(2,207,92,0.12);
  color:#fff;

  font-size:0.82rem;
  font-weight:900;
  letter-spacing:0.14em;
  text-transform:uppercase;

  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.rules-admin-submit:hover{
  transform: translateY(-1px);
  background: rgba(2,207,92,0.16);
  border-color: rgba(2,207,92,0.48);
  box-shadow: 0 0 18px rgba(2,207,92,0.12), var(--r-shadow-soft);
}

/* Responsive */
@media (max-width: 960px){
  .rules-admin-dialog{
    margin: 86px auto 20px;
    width: calc(100% - 22px);
  }
}

@media (max-width: 640px){
  .rules-admin-dialog{
    margin: 76px auto 16px;
    max-height: calc(100vh - 110px);
    border-radius: 18px;
  }

  .rules-admin-header{ padding: 16px 16px 12px; }
  .rules-admin-tabs{ padding: 10px 16px 12px; }
  .rules-admin-body{ padding: 14px 16px 16px; }
}


/* icon gallery */
.icon-choices{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:6px;
  max-height:160px;
  overflow-y:auto;
  padding:4px 0;
}

.icon-choice{ position:relative; cursor:pointer; }
.icon-choice input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; }

.icon-choice img,
.icon-choice span{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.03);

  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-size:11px;
  color: rgba(255,255,255,0.76);

  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.icon-choice img{
  object-fit:contain;
  padding:4px;
  filter: grayscale(1) brightness(1.12) contrast(1.05);
  opacity:0.95;
}

.icon-choice:hover img,
.icon-choice:hover span{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.30);
  background: rgba(255,255,255,0.05);
}

.icon-choice input[type="radio"]:checked + img,
.icon-choice input[type="radio"]:checked + span{
  border-color: rgba(2,207,92,0.55);
  background: rgba(2,207,92,0.10);
  box-shadow: 0 0 0 2px rgba(2,207,92,0.14);
  transform: translateY(-1px) scale(1.03);
}

/* =====================
   Soft navigation fade
   ===================== */
#rulesContent{
  transition: opacity .18s ease, transform .18s ease;
  will-change: opacity, transform;
}
#rulesContent.is-leaving{
  opacity:0;
  transform: translateY(10px);
  pointer-events:none;
}
#rulesContent.is-entering{
  opacity:0;
  transform: translateY(10px);
}
@media (prefers-reduced-motion: reduce){
  #rulesContent{ transition:none; }
  #rulesContent.is-leaving,
  #rulesContent.is-entering{ opacity:1; transform:none; }
}

/* =====================
   Responsive
   ===================== */
@media (max-width: 960px){
  .rules-grid{ gap: 14px; }

  .rules-hero-top{
    flex-direction:column;
    align-items:flex-start;
  }

  .rules-hero-actions{ align-items:flex-start; }

  .rules-stickybar{ top: 78px; }

  .rules-admin-dialog{
    margin: 86px auto 20px;
    width: calc(100% - 22px);
  }
}

@media (max-width: 640px){
  .rules-wrapper{ padding: 0 16px 60px; }
  .rules-body{ padding-top: 96px; }

  .rules-hero-top{
    padding: 18px 16px 16px;
    border-radius: 18px;
  }

  /* card: stadig group-look */
  .rules-card{ border-radius: 16px; }
  .rules-card-head{ padding: 12px 12px; }
  .rules-card > .rules-card-empty,
  .rules-card > .rules-list{ padding: 12px 12px 14px; }

  .rules-card-icon{
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex: 0 0 40px;
  }

  .rule-item{
    padding: 14px 14px;
    gap: 12px;
  }

  .rule-index{
    width: 52px;
    flex: 0 0 52px;
    font-size: 0.88rem;
  }

  .rule-actions{ flex-direction: row; }

  .rules-stickybar-inner{
    border-radius: 14px;
    padding: 10px 10px;
  }

  .rules-admin-dialog{
    margin: 76px auto 16px;
    max-height: calc(100vh - 110px);
    border-radius: 18px;
  }

  .rules-admin-header{ padding: 16px 16px 10px; }
  .rules-admin-tabs{ padding: 0 16px 10px; }
  .rules-admin-body{ padding: 0 16px 16px; }
}

.rule-inline-code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.92em;
  padding: 4px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
}

/* =====================
   FIX: Modal overflow + body scroll
   ===================== */

/* lås baggrunden når en modal er åben */
body.modal-open{
  overflow: hidden;
}

/* sørg for at dialog aldrig kan blive “for høj” */
.rules-admin-dialog{
  max-height: calc(100vh - 140px);
  display:flex;
  flex-direction:column;
}

/* body inde i modal skal være den der scroller */
.rules-admin-body{
  overflow: auto;
  min-height: 0; /* vigtig i flex layout, ellers kan den “push’e” */
}

/* små skærme: lidt mere plads */
@media (max-width: 640px){
  .rules-admin-dialog{
    max-height: calc(100vh - 110px);
  }
}

/* =====================
   FIX: Stop side-til-side scroll i modals
   (lange ord / flex overflow)
   ===================== */

/* 1) Sørg for at intet kan lave horisontal scroll på siden når modal er åben */
body.modal-open{
  overflow: hidden;
  overflow-x: hidden;
}

/* 2) Lås modal til viewport bredde og skjul horisontal overflow */
.rules-admin-modal,
.rules-admin-dialog,
.rules-admin-body{
  max-width: 100vw;
  overflow-x: hidden;
}

/* 3) VIGTIG: Flex children må gerne krympe (ellers kan de presse bredden ud) */
.rules-admin-dialog *{
  min-width: 0;
}

/* 4) Bryd lange ord i inputs/textarea og labels (så “aaaaaaaa...” ikke skubber) */
.rules-admin-field,
.rules-admin-field label{
  overflow-wrap: anywhere;
  word-break: break-word;
}

.rules-admin-field input[type="text"],
.rules-admin-field input[type="number"],
.rules-admin-field textarea{
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;     /* bryd lange strenge */
  word-break: break-word;
}

/* 5) Hvis browseren stadig vil give “mikro” horizontal scroll pga. 100vw,
      så brug 100% i stedet for vw på dialogen */
.rules-admin-dialog{
  width: min(920px, calc(100% - 36px)); /* (du har den allerede - men vi re-sikrer) */
}

/* =====================
   FIX: Knappen skal IKKE følge med ved scroll
   ===================== */
.rules-admin-actions{
  position: static !important;
  bottom: auto !important;
  background: none !important;
  padding-top: 14px !important;

  display: flex;
  justify-content: flex-end;
}

/* =====================
   FIX: Rule-row auto height + knapper følger med
   ===================== */

/* Fjern evt. OL tal (hvis "1" stadig vises helt til venstre) */
ol.rules-list{
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
ol.rules-list > li::marker{ content: ""; }

/* Lad hele rækken strække sig efter højeste indhold */
.rule-item{
  align-items: stretch !important;
}

/* Sørg for at højre/venstre kolonner kan fylde højden */
.rule-main{
  align-items: stretch !important;
}

/* Tekstområdet må gerne strække sig */
.rule-text{
  align-self: stretch !important;
}

/* Knapper: fyld højden og centrer dem pænt */
.rule-actions{
  align-self: stretch !important;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center !important;
}

/* Mobile: knapper i række – align pænt */
@media (max-width: 640px){
  .rule-actions{
    flex-direction: row;
    justify-content: flex-end !important;
    align-self: auto !important;
    height: auto;
  }
}

/* =====================
   Rule note (BEMÆRK)
   ===================== */
.rule-note{
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 16px;

  background: rgba(2,207,92,0.10);
  border: 1px solid rgba(2,207,92,0.22);

  box-shadow:
    0 0 0 1px rgba(0,0,0,0.35) inset,
    0 18px 60px rgba(0,0,0,0.45);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.rule-note-kicker{
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(2,207,92,0.92);
  margin-bottom: 6px;
}

.rule-note-text{
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.92);
}

/* mobil: lidt strammere */
@media (max-width: 640px){
  .rule-note{ padding: 12px 14px; border-radius: 14px; }
  .rule-note-text{ font-size: 0.92rem; }
}

/* ============================================================
   MOBILE PATCH (telefon / små tablets)
   Indsæt nederst i rulesStyle.css
   ============================================================ */

/* 1) Generel: undgå horisontal scroll */
html, body{
  max-width: 100%;
  overflow-x: hidden;
}
.rules-wrapper,
.rules-hero-top,
.rules-stickybar-inner,
.rules-card,
.rule-item{
  min-width: 0;
}

/* 2) HERO: gør actions fuld bredde på telefon */
@media (max-width: 640px){
  .rules-hero-actions{
    width: 100%;
    align-items: stretch;
  }

  .rules-type-switch{
    width: 100%;
    justify-content: space-between;
  }

  .rules-type-btn{
    flex: 1 1 0;
    padding: 12px 10px;
    font-size: 0.78rem;
  }

  .rules-admin-btn{
    width: 100%;
    justify-content: center;
    padding: 12px 14px;
  }

  .rules-lead{
    font-size: 0.95rem;
    line-height: 1.7;
  }
}

/* 3) Stickybar: bedre til små skærme */
@media (max-width: 640px){
  .rules-stickybar{ top: 72px; } /* lidt lavere hvis navbar fylder */

  .rules-stickybar-inner{
    gap: 10px;
  }

  .rules-stickybar-title{
    display: none; /* giver mere plads på telefon */
  }

  .rules-quicknav{
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 6px 2px;
  }

  .rules-chip{
    scroll-snap-align: start;
    padding: 10px 12px;
    font-size: 0.78rem;
  }
}

/* 4) Section titel: skaler bedre på telefon */
@media (max-width: 640px){
  .rules-sectionTitle{
    font-size: clamp(26px, 7vw, 34px);
    line-height: 1.08;
  }

  .rules-sectionTop{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .rules-sectionRight{
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .rules-sectionDesc{
    font-size: 0.94rem;
    line-height: 1.75;
    max-width: 100%;
  }
}

/* 5) CARD head: stack højre/venstre pænt på telefon */
@media (max-width: 640px){
  .rules-card-head{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .rules-card-left{
    width: 100%;
  }

  .rules-card-right{
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .rules-card-desc{
    max-width: 100%;
  }
}

/* 6) RULE ROWS: gør dem mobile-venlige (stack) */
@media (max-width: 640px){
  .rule-item{
    padding: 14px 14px;
  }

  /* index + main skal kunne bryde */
  .rule-item{
    flex-direction: column;
    gap: 10px;
  }

  .rule-index{
    width: auto;
    flex: 0 0 auto;
    margin-top: 0;
    font-size: 0.88rem;
  }

  .rule-main{
    flex-direction: column;
    gap: 10px;
  }

  .rule-main-text{
    width: 100%;
  }

  /* badge + tekst: hold det læsbart */
  .rule-text{
    gap: 8px;
    flex-wrap: wrap;
  }

  .rule-code{
    padding: 6px 10px;
    font-size: 0.68rem;
  }

  /* knapper på række, fuld touch-friendly */
  .rule-actions{
    width: 100%;
    flex-direction: row;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
  }

  .rule-edit-btn,
  .rule-delete-btn{
    padding: 12px 14px;
    font-size: 0.72rem;
    border-radius: 12px;
  }
}

/* 7) Ekstra: hvis du vil have knapper fylder hele bredden på helt små skærme */
@media (max-width: 420px){
  .rule-actions{
    justify-content: stretch;
  }

  .rule-edit-btn,
  .rule-delete-btn{
    flex: 1 1 0;
    justify-content: center;
    text-align: center;
  }
}