/* =========================================================
   CONTACT.SCLAB.ID INSPIRED THEME (DARK GLASS + PREMIUM)
   Applies to form & admin (native PHP + Bootstrap)
   ========================================================= */

:root{
  --bg0:#060b18;
  --bg1:#0b1220;
  --bg2:#0e1a33;

  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.10);

  --text:#eaf0ff;
  --muted: rgba(234,240,255,.72);

  --accent:#6aa7ff;
  --accent2:#7c5cff;   /* violet */
  --accent3:#27d0ff;   /* cyan */
  --success:#27d08a;
  --danger:#ff4d6d;

  --shadow: 0 22px 70px rgba(0,0,0,.40);
}

*{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(124,92,255,.35), transparent 60%),
    radial-gradient(900px 520px at 80% 0%, rgba(39,208,255,.22), transparent 55%),
    radial-gradient(900px 520px at 65% 100%, rgba(106,167,255,.14), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 55%, #070b14);
  color: var(--text);
  min-height: 100vh;
}

a{ color: var(--accent); }
a:hover{ color: #9bc2ff; }

.container, .container-fluid{ position: relative; z-index: 2; }

/* Navbar */
.navbar{
  background: rgba(6,11,24,.55) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
.navbar .navbar-brand, .navbar .nav-link{ color: rgba(234,240,255,.92) !important; }
.navbar .nav-link{ opacity:.88; }
.navbar .nav-link:hover{ opacity:1; }

/* Hero / header section */
.hero{
  position:relative;
  border-radius: 26px;
  overflow:hidden;
  background:
    radial-gradient(900px 420px at 25% 0%, rgba(124,92,255,.38), transparent 60%),
    radial-gradient(900px 520px at 85% 30%, rgba(39,208,255,.24), transparent 60%),
    linear-gradient(135deg, rgba(14,26,51,.65), rgba(6,11,24,.55));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
}
.hero .overlay{
  position:absolute; inset:0;
  background-image: url('assets/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  opacity:.10;
  mix-blend-mode: screen;
}
.hero .content{ position:relative; z-index:2; }

/* Cards (glass) */
.card, .card-elev{
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.06) !important;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  color: var(--text);
}
.card .text-muted, .card-elev .text-muted{ color: var(--muted) !important; }

/* Alerts */
.alert{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  color: var(--text);
}

/* Form wrapper – gives the “panel” vibe like contact.sclab.id */
.form-wrap{
  border-radius: 28px;
  padding: 18px;
  background:
    radial-gradient(700px 320px at 20% 0%, rgba(124,92,255,.18), transparent 65%),
    radial-gradient(700px 320px at 90% 20%, rgba(39,208,255,.14), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

/* Inputs – white, rounded, clean */
.form-control, .form-select, textarea{
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.96) !important;
  color: #0b1220 !important;
  padding: .78rem .95rem !important;
}
.form-control::placeholder, textarea::placeholder{ color: rgba(15,23,42,.50) !important; }
.form-control:focus, .form-select:focus, textarea:focus{
  border-color: rgba(106,167,255,.65) !important;
  box-shadow: 0 0 0 .25rem rgba(106,167,255,.18) !important;
}

/* Labels */
.form-label{
  font-weight: 700;
  letter-spacing: .2px;
  color: rgba(234,240,255,.92);
}
.small-help{ color: var(--muted); font-size:.92rem; }

/* Buttons */
.btn{
  border-radius: 16px !important;
  padding: .78rem 1rem !important;
  font-weight: 700;
}
.btn-primary{
  border: 0 !important;
  background: linear-gradient(135deg, rgba(124,92,255,1), rgba(39,208,255,1)) !important;
  box-shadow: 0 14px 35px rgba(124,92,255,.22);
}
.btn-primary:hover{ filter: brightness(1.05); }
.btn-success{
  border: 0 !important;
  background: linear-gradient(135deg, rgba(39,208,138,1), rgba(39,208,255,1)) !important;
}
.btn-outline-secondary{
  color: rgba(234,240,255,.92) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}
.btn-outline-secondary:hover{
  background: rgba(255,255,255,.08) !important;
}

/* Badges / KPI */
.badge-soft{
  background: rgba(255,255,255,.10);
  color: rgba(234,240,255,.92);
  border: 1px solid rgba(255,255,255,.14);
}

.kpi{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow);
}

/* Tables (admin) */
.table{
  color: rgba(234,240,255,.92);
}
.table thead th{
  color: rgba(234,240,255,.80);
  border-bottom-color: rgba(255,255,255,.10) !important;
}
.table td, .table th{
  border-top-color: rgba(255,255,255,.08) !important;
}
.table-hover tbody tr:hover{
  background: rgba(255,255,255,.04);
}

/* Side nav items */
.list-group-item-action{
  border-radius: 16px !important;
  margin-bottom: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(234,240,255,.88);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
.list-group-item-action:hover{
  background: rgba(255,255,255,.08);
  color: rgba(234,240,255,1);
  transform: translateY(-1px);
  transition: .15s ease;
}

/* Admin photo preview smaller */
.preview-img{
  width: 32px !important;
  height: 32px !important;
  object-fit: cover;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.18);
}

/* Footer */
footer{
  color: rgba(234,240,255,.65);
}


.table-wrap, .admin-table-wrap{background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:24px; padding:14px;}
.table-responsive{background: rgba(255,255,255,.02); border-radius:18px;}


/* Locked fields when 'alamat pengiriman sama' is checked */
.locked{
  pointer-events:none;
  background:#e9ecef !important;
  opacity: 0.95;
}

/* Light card overrides (admin tables on white cards) */
.card.bg-white .text-muted{ color:#475569 !important; }
.kpi.bg-white .fs-3{ color:#000 !important; }
.card .table{ color:#0f172a; }
.card .table thead th{ color:#0f172a; }


/* Participants table readability */
.table thead th{ color:#0f172a; }



/* =========================================================
   ADMIN — PARTICIPANTS (ONE PAGE LAYOUT)
   ========================================================= */
.btn-pill{
  border-radius: 999px !important;
  padding-left: 14px;
  padding-right: 14px;
}
.admin-hero .badge{
  padding: .55rem .9rem;
  font-weight: 600;
}
.filter-card .form-control,
.filter-card .form-select{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text);
}
.filter-card .form-control::placeholder{ color: rgba(234,240,255,.55); }
.filter-card .form-control:focus,
.filter-card .form-select:focus{
  box-shadow: 0 0 0 .2rem rgba(106,167,255,.18);
  border-color: rgba(106,167,255,.55);
}
.filter-card .form-label{ letter-spacing:.2px; }

.table-surface{
  background: rgba(255,255,255,.98);
}
.table-surface thead th{
  background: rgba(248,250,252,1);
  color: #0f172a;
  border-bottom: 1px solid rgba(15,23,42,.12);
  font-weight: 800;
  white-space: nowrap;
}
.table-surface tbody td{
  color: #0f172a;
}
.table-surface tbody td .text-muted,
.table-surface tbody td small.text-muted{
  color: rgba(15,23,42,.62) !important;
}
.table-surface a{ color: #2563eb; }
.table-surface a:hover{ color: #1d4ed8; }

.th-sort-link{
  color: #0f172a !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.th-sort-link:hover{ text-decoration: underline; }
.th-sort-icon{ font-weight: 900; opacity: .8; }

.table-topbar{
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.pagination-mini .page-link{
  border-radius: 10px !important;
}

.bulkbar{
  border-top: 1px solid rgba(255,255,255,.10);
}

@media (max-width: 576px){
  .admin-hero{ padding: 18px !important; border-radius: 22px; }
}