/* =====================================================
   ADMIN CONTAINER
===================================================== */

.admin-container {
  padding: 24px;
  color: var(--text-primary);
}

/* =====================================================
   PENDING TOPUP CARD
===================================================== */

.admin-trx {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  transition: all .2s ease;
}

.admin-trx:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.admin-trx button {
  background: transparent;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: opacity .2s ease;
}

.admin-trx button:first-child {
  color: var(--color-primary);
}

.admin-trx button:last-child {
  color: var(--text-secondary);
}

.admin-trx button:hover {
  opacity: .7;
}

/* =====================================================
   ADMIN CARD (ADJUSTMENT PANEL)
===================================================== */

.admin-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  padding: 26px;
  margin-bottom: 28px;
  box-shadow: 0 12px 35px rgba(0,0,0,.06);
  animation: fadeUp .25s ease;
}

.admin-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
}

/* =====================================================
   FORM STYLE
===================================================== */

.admin-card label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  opacity: .85;
}

.admin-card select,
.admin-card input,
.admin-card textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-soft);
  font-size: 14px;
  margin-bottom: 16px;
  transition: all .2s ease;
  appearance: none;
}

.admin-card select:focus,
.admin-card input:focus,
.admin-card textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0,0,0,.05);
}

/* =====================================================
   BUTTON STYLE
===================================================== */

.admin-btn {
  width: 100%;
  padding: 14px;
  border-radius: 18px;
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}

/* ================= LIGHT MODE ================= */

body.light .admin-btn {
  background: linear-gradient(135deg, #1f1f1f, #333);
  color: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,.2);
}

body.light .admin-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
}

/* Light dropdown premium look */

body.light .admin-card select {
  background: #f7f3e8;        /* cream */
  color: #1b3d2f;             /* dark green */
  border: 1px solid #e2dbc9;
}

body.light .admin-card select option {
  background: #f7f3e8;
  color: #1b3d2f;
}

/* ================= DARK MODE ================= */

body.dark .admin-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 45px rgba(0,0,0,.6);
}

/* DARK FORM */

body.dark .admin-card select,
body.dark .admin-card input,
body.dark .admin-card textarea {
  background: #0f2a1f;       /* deep green */
  border: 1px solid #1d4736;
  color: #f5f5f5;
}

/* FIX DROPDOWN LIST TEXT (important) */
body.dark .admin-card select option {
  background: #0f2a1f;
  color: #f5f5f5;
}

/* DARK BUTTON */

body.dark .admin-btn {
  background: linear-gradient(135deg, #e6e6e6, #cfcfcf);
  color: #000;
}

body.dark .admin-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
}

/* =====================================================
   RESULT BOX
===================================================== */

.valid-box {
  background: #103b2a;
  color: #c9f1de;
  padding: 14px;
  border-radius: 14px;
  margin-top: 12px;
}

.invalid-box {
  background: #5c1b22;
  color: #ffd6db;
  padding: 14px;
  border-radius: 14px;
  margin-top: 12px;
}


/* =====================================================
   ADMIN SELECT PREMIUM THEME FIX
   (Fix dropdown option font color issue)
===================================================== */

/* =========================
   BASE SELECT STYLE
========================= */

.admin-card select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-soft);
  font-size: 14px;
  margin-bottom: 16px;
  transition: all .2s ease;
  appearance: none;
  color: inherit;
}

/* Focus */
.admin-card select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0,0,0,.05);
}

/* =====================================================
   LIGHT MODE
===================================================== */

body.light .admin-card select {
  background: #f7f3e8;     /* cream */
  color: #1b3d2f;          /* dark green */
  border: 1px solid #e2dbc9;
}

/* Dropdown list text color (IMPORTANT) */
body.light .admin-card select option {
  background: #f7f3e8;
  color: #1b3d2f !important;
}

/* =====================================================
   DARK MODE
===================================================== */

body.dark .admin-card select {
  background: #0f2a1f;     /* deep green */
  color: #f5f5f5;          /* cream/white */
  border: 1px solid #1d4736;
}

/* Dropdown list text color (IMPORTANT FIX) */
body.dark .admin-card select option {
  background: #0f2a1f;
  color: #f5f5f5 !important;
}

/* =====================================================
   SAFETY OVERRIDE (FOR SOME BROWSERS)
===================================================== */

.admin-card select option {
  font-size: 14px;
}
/* ===============================
   FORCE DROPDOWN COLOR OVERRIDE
   (PASTIKAN PALING BAWAH FILE)
================================= */

body.light .admin-card select,
body.light .admin-card select option {
  background: #f7f3e8 !important;
  color: #1b3d2f !important;
}

body.dark .admin-card select,
body.dark .admin-card select option {
  background: #0f2a1f !important;
  color: #f5f5f5 !important;
}


/* =====================================================
   CHECKIN MODAL (FULLSCREEN SCANNER)
===================================================== */

.checkin-modal {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
}

/* Fullscreen container */
.checkin-card {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  border-radius: 0;
  overflow: hidden;
}

/* Hide helper */
.hidden {
  display: none !important;
}

/* =====================================================
   CAMERA
===================================================== */

#reader{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
}

#reader video{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* =====================================================
   BUTTONS
===================================================== */

#closeBtn,
#switchBtn{
  position:absolute;
  z-index:20;
  background:rgba(0,0,0,0.6);
  color:#fff;
  border:none;
  padding:8px 14px;
  border-radius:12px;
  font-size:14px;
  cursor:pointer;
}

#closeBtn{
  top:20px;
  left:20px;
}

#switchBtn{
  top:20px;
  right:20px;
}

/* =====================================================
   RESULT POPUP (CENTER)
===================================================== */

#result{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:15;
  pointer-events:none;
}

.result-popup{
  min-width:240px;
  max-width:80%;
  padding:22px;
  border-radius:18px;
  text-align:center;
  font-weight:bold;
  backdrop-filter:blur(12px);
  animation:popScale 0.18s ease-out;
}

.valid-box{
  background:rgba(31,45,31,0.92);
  border:2px solid #2ecc71;
  color:#2ecc71;
}

.invalid-box{
  background:rgba(58,28,28,0.92);
  border:2px solid #e74c3c;
  color:#ff6b6b;
}

@keyframes popScale{
  from{
    transform:scale(0.85);
    opacity:0;
  }
  to{
    transform:scale(1);
    opacity:1;
  }
}

.scanner-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:70px;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0.8),
    rgba(0,0,0,0.4),
    rgba(0,0,0,0)
  );
  display:flex;
  align-items:center;
  padding:0 16px;
  z-index:20;
}

#closeBtn{
  background:#111;
  color:#fff;
  border:none;
  padding:8px 14px;
  border-radius:14px;
  font-size:14px;
  cursor:pointer;
}


input[type="checkbox"]{
  width:auto !important;
  height:auto !important;
  padding:0 !important;
  border:none !important;
  border-radius:0 !important;
  appearance:auto !important;
}
.broadcast-user-checkbox{
  width:16px !important;
  height:16px !important;
  margin-right:6px;
}

/* =====================================================
   ANIMATION
===================================================== */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}