/*
 * Regions Turneringen Notifications – Frontend UI (dark/gold)
 *
 * KRAV:
 * - 100% scoped til .rt-ui wrapper (ingen globale styles)
 * - Genbrug præcise farver/alpha-værdier fra "Regions Turnering" theme tokens
 */

.rt-ui{
  --rt-gold:#9a7e10;
  --rt-bg:#070708;
  --rt-card:#0f0f12;
  --rt-card2:#0b0b0e;
  --rt-text:#ffffff;
  --rt-muted:rgba(255,255,255,.65);
  color:var(--rt-text);
}

/* Base layout (kun inde i wrapper) */
.rt-ui,
.rt-ui *,
.rt-ui *::before,
.rt-ui *::after{ box-sizing:border-box; }

.rt-ui{
  background:var(--rt-bg);
  border-radius:18px;
  border:1px solid rgba(154,126,16,.35);
  box-shadow:0 12px 35px rgba(0,0,0,.45);
  overflow:hidden;
}

.rt-ui .rt-ui__container{
  max-width:1080px;
  margin:0 auto;
  padding:18px 14px;
}

/* Cards */
.rt-ui .rt-ui__card{
  border-radius:18px;
  border:1px solid rgba(154,126,16,.35);
  box-shadow:0 12px 35px rgba(0,0,0,.45);
  background:
    radial-gradient(120% 120% at 50% 20%, rgba(154,126,16,.14), rgba(0,0,0,0)),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,0));
  background-color:var(--rt-card);
  padding:18px;
}

.rt-ui .rt-ui__card + .rt-ui__card{ margin-top:14px; }

.rt-ui .rt-ui__card-header{
  padding-bottom:12px;
  margin-bottom:12px;
  border-bottom:1px solid rgba(154,126,16,.16);
}

.rt-ui .rt-ui__title{
  margin:0;
  color:var(--rt-gold);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.4px;
  font-size:16px;
}

.rt-ui .rt-ui__subtitle{
  margin:6px 0 0;
  color:var(--rt-muted);
  font-size:13px;
}

.rt-ui .rt-ui__card-body{ padding-top:2px; }

.rt-ui .rt-ui__notice{ margin:0; color:var(--rt-text); font-size:14px; }

.rt-ui .rt-ui__link,
.rt-ui a{
  color:var(--rt-gold);
  text-decoration:underline;
  text-underline-offset:3px;
}

.rt-ui a:hover{ filter:brightness(1.08); }

/* Controls container (bruges hvis der senere tilføjes filtre) */
.rt-ui .rt-ui__controls{
  border-radius:14px;
  border:1px solid rgba(154,126,16,.35);
  background:linear-gradient(180deg, rgba(154,126,16,.15), rgba(0,0,0,0));
  padding:14px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:14px;
}

.rt-ui .rt-ui__field{ display:flex; flex-direction:column; gap:6px; min-width:200px; }

.rt-ui .rt-ui__label{
  color:var(--rt-gold);
  font-weight:700;
  font-size:13px;
}

/* Inputs / selects (WP tema kan override -> !important kun på bg/color/border) */
.rt-ui input[type="text"],
.rt-ui input[type="email"],
.rt-ui input[type="number"],
.rt-ui input[type="date"],
.rt-ui input[type="time"],
.rt-ui select,
.rt-ui textarea{
  background:#000000 !important;
  color:#ffffff !important;
  border:1px solid rgba(154,126,16,.5) !important;
  border-radius:10px;
  padding:10px 12px;
  outline:none;
}

.rt-ui select{ color:var(--rt-gold) !important; }

.rt-ui input::placeholder,
.rt-ui textarea::placeholder{ color:rgba(255,255,255,.5); }

.rt-ui input:focus,
.rt-ui select:focus,
.rt-ui textarea:focus{
  border-color:rgba(154,126,16,.55) !important;
  box-shadow:0 0 0 3px rgba(154,126,16,.14);
}

/* Buttons */
.rt-ui .rt-ui__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:12px;
  padding:10px 14px;
  font-weight:800;
  font-size:14px;
  cursor:pointer;
  text-decoration:none;
  border:1px solid transparent;
  transition:filter .12s ease, background-color .12s ease, box-shadow .12s ease;
}

.rt-ui .rt-ui__btn--primary{
  background:var(--rt-gold);
  color:#000;
}

.rt-ui .rt-ui__btn--primary:hover{
  filter:brightness(.92);
  box-shadow:0 0 0 3px rgba(154,126,16,.12);
}

.rt-ui .rt-ui__btn--outline{
  background:transparent;
  color:var(--rt-text);
  border-color:rgba(154,126,16,.55);
}

.rt-ui .rt-ui__btn--outline:hover{ background:rgba(154,126,16,.06); }

/* Notifications list */
.rt-ui .rt-notifications-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.rt-ui .rt-notifications-item{
  border-radius:14px;
  border:1px solid rgba(154,126,16,.22);
  background:
    radial-gradient(120% 120% at 50% 20%, rgba(154,126,16,.12), rgba(0,0,0,0)),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,0));
  background-color:var(--rt-card2);
  padding:12px 12px;
}

.rt-ui .rt-notifications-item:hover{
  background-color:var(--rt-card2);
  box-shadow:0 0 0 3px rgba(154,126,16,.12);
}

.rt-ui .rt-notifications-item-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  padding-bottom:8px;
  margin-bottom:8px;
  border-bottom:1px solid rgba(154,126,16,.16);
}

.rt-ui .rt-notifications-date{
  color:var(--rt-muted);
  font-size:12px;
  font-weight:700;
  letter-spacing:.2px;
}

.rt-ui .rt-notifications-title{
  color:var(--rt-gold);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.35px;
  font-size:13px;
  flex:1 1 260px;
}

/* Badge / pill */
.rt-ui .rt-notification-new{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(154,126,16,.45);
  background:rgba(154,126,16,.06);
  color:var(--rt-gold);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}

.rt-ui .rt-notifications-message{
  color:var(--rt-text);
  font-size:13px;
  line-height:1.45;
}

.rt-ui .rt-notifications-message p{
  margin:0 0 8px 0;
  color:var(--rt-text);
}

.rt-ui .rt-notifications-message p:last-child{ margin-bottom:0; }

/* Collapsed state for long messages */
.rt-ui .rt-notifications-message--collapsed{
  max-height:4.4em; /* ~3 linjer */
  overflow:hidden;
  position:relative;
}

.rt-ui .rt-notifications-message--collapsed::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2.2em;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(7,7,8,.95));
  pointer-events:none;
}

.rt-ui .rt-notification-toggle{
  display:inline-block;
  margin-top:8px;
  color:var(--rt-gold);
  font-size:13px;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px;
}

.rt-ui .rt-notification-toggle:hover{ filter:brightness(1.08); }

/* Tables (generiske tokens – hvis plugin senere viser tabeller) */
.rt-ui .rt-ui__table{
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(154,126,16,.22);
}

.rt-ui table{ width:100%; border-collapse:collapse; }

.rt-ui thead th{
  background:rgba(154,126,16,.10);
  color:var(--rt-gold);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.35px;
  padding:10px 12px;
}

.rt-ui tbody td{
  color:var(--rt-text);
  font-size:13px;
  padding:10px 12px;
  border-top:1px solid rgba(154,126,16,.16);
}

/* Responsive */
@media (max-width: 560px){
  .rt-ui .rt-ui__container{ padding:14px 12px; }
  .rt-ui .rt-ui__card{ padding:14px; }
  .rt-ui .rt-notifications-title{ flex:1 1 100%; }
}