/* FORCE OVERRIDE LEGACY CSS */
:root[data-theme="dark"] body {
  background: #0b0b0b !important;
  color: #f7f7f7 !important;
}

/* TABLE */
:root[data-theme="dark"] .table {
  background: #121212;
  color: #f7f7f7;
}

:root[data-theme="dark"] .table th,
:root[data-theme="dark"] .table td {
  border-color: rgba(255,255,255,.15);
}

/* INPUT GROUP */
:root[data-theme="dark"] .input-group-text {
  background: #1a1a1a;
  color: #f7f7f7;
  border-color: rgba(255,255,255,.15);
}

/* ALERT */
:root[data-theme="dark"] .alert {
  background: #1a1a1a;
  color: #f7f7f7;
  border-color: rgba(255,255,255,.2);
}

/* BUTTON OVERRIDE */
:root[data-theme="dark"] .btn-dark,


	
#container {
    height: auto !important;
    overflow: visible !important;
}	
	
body {
    height: auto !important;
    overflow: visible !important;
}		 



/* ==========================
   BUTTON FIX
========================== */
:root[data-theme="dark"] .btn-warning,
:root[data-theme="dark"] .btn-danger,
:root[data-theme="dark"] .btn-outline-primary {
  filter: brightness(.9);
}

/* ==========================
   MODAL
========================== */
:root[data-theme="dark"] .modal-content {
  background: #121212;
  color: #f7f7f7;
  border: 1px solid rgba(255,255,255,.15);
}

:root[data-theme="dark"] .modal-header {
  border-bottom: 1px solid rgba(255,255,255,.15);
}

:root[data-theme="dark"] .modal-footer {
  border-top: 1px solid rgba(255,255,255,.15);
}

/* ==========================
   PAGINATION
========================== */
:root[data-theme="dark"] .btn-outline-primary {
  color: #f7f7f7;
  border-color: rgba(255,255,255,.3);
}

:root[data-theme="dark"] .btn-outline-primary:hover {
  background: rgba(255,255,255,.15);
}

/* =====================================================
   DARK MODE – ACCESS SETTING PAGE (BOOTSTRAP 5)
===================================================== */

/* BODY & CONTAINER */
:root[data-theme="dark"] body {
  background: #0b0b0b !important;
  color: #f7f7f7 !important;
}

:root[data-theme="dark"] .container {
  background: transparent !important;
}

/* CARD */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .global-select {
  background: #121212 !important;
  border-color: rgba(255,255,255,.15) !important;
}

/* TABLE */
:root[data-theme="dark"] .table {
  --bs-table-bg: #121212;
  --bs-table-striped-bg: #1a1a1a;
  --bs-table-striped-color: #f7f7f7;
  --bs-table-hover-bg: #222;
  --bs-table-hover-color: #ffffff;
  --bs-table-border-color: rgba(255,255,255,.15);
  color: #f7f7f7 !important;
}

:root[data-theme="dark"] .table th,
:root[data-theme="dark"] .table td {
  background-color: transparent !important;
  color: #f7f7f7 !important;
}

/* TABLE HEADER */
:root[data-theme="dark"] .table thead th {
  background: #1f1f1f !important;
  color: #d4af37 !important;
}

/* ACCORDION */
:root[data-theme="dark"] .accordion-item {
  background: #121212;
  border-color: rgba(255,255,255,.15);
}

:root[data-theme="dark"] .accordion-button {
  background: #1a1a1a !important;
  color: #f7f7f7 !important;
}

:root[data-theme="dark"] .accordion-button:not(.collapsed) {
  background: #222 !important;
  color: #d4af37 !important;
}

:root[data-theme="dark"] .accordion-body {
  background: #121212;
  color: #f7f7f7;
}

/* FORM */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
  background: #161616;
  color: #f7f7f7;
  border-color: rgba(255,255,255,.2);
}

:root[data-theme="dark"] .form-control::placeholder {
  color: #aaa;
}

/* CHECKBOX */
:root[data-theme="dark"] input[type="checkbox"] {
  accent-color: #0d6efd;
}

/* LABEL */
:root[data-theme="dark"] label,
:root[data-theme="dark"] strong {
  color: #f7f7f7;
}

/* BUTTON */
:root[data-theme="dark"] .btn-primary {
  background: #0d6efd;
  border-color: #0d6efd;
}

:root[data-theme="dark"] .btn-primary:hover {
  background: #0b5ed7;
}

/* SWEETALERT */
:root[data-theme="dark"] .swal2-popup {
  background: #121212 !important;
  color: #f7f7f7 !important;
}


/* ==========================
   FIX TABLE TEXT DARK MODE
========================== */
:root[data-theme="dark"] .table {
  color: #f7f7f7 !important;
}

/* FORCE semua cell ikut warna text */
:root[data-theme="dark"] .table th,
:root[data-theme="dark"] .table td {
  color: #f7f7f7 !important;
  background-color: transparent !important;
}

/* STRIPED ROWS */
:root[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #1a1a1a !important;
  color: #f7f7f7 !important;
}

:root[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) > * {
  background-color: #121212 !important;
  color: #f7f7f7 !important;
}

/* HOVER */
:root[data-theme="dark"] .table-hover > tbody > tr:hover > * {
  background-color: #24242
}

/* ==========================
   FORCE FORM DARK MODE
========================== */
:root[data-theme="dark"] body {
  background: #0b0b0b !important;
  color: #f7f7f7 !important;
}

:root[data-theme="dark"] .container {
  background: transparent !important;
}

:root[data-theme="dark"] .card {
  background: #121212 !important;
}

:root[data-theme="dark"] .card-header {
  background: rgba(255,255,255,.05) !important;
  color: #d4af37 !important;
}

:root[data-theme="dark"] label {
  color: #bdbdbd !important;
}


/* =====================================================
   TRAINING MODUL – DARK MODE FIX
===================================================== */

/* SEARCH INPUT */
:root[data-theme="dark"] .training-modul-page .form-control {
  background: #161616;
  color: #f7f7f7;
  border-color: rgba(255,255,255,.2);
}

:root[data-theme="dark"] .training-modul-page .form-control::placeholder {
  color: #9e9e9e;
}

/* CARD */
:root[data-theme="dark"] .training-modul-page .modul-card {
  background: #121212 !important;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 4px 12px rgba(0,0,0,.6);
}

/* CARD TITLE */
:root[data-theme="dark"] .training-modul-page .modul-title {
  color: #f7f7f7;
}

/* CARD DATE */
:root[data-theme="dark"] .training-modul-page .modul-date {
  color: #bdbdbd !important;
}

/* IMAGE FIX */
:root[data-theme="dark"] .training-modul-page .card-img-top {
  filter: brightness(.9) contrast(1.05);
}

/* BUTTON PREVIEW */
:root[data-theme="dark"] .training-modul-page .btn-warning {
  background: rgba(255,193,7,.15) !important;
  border-color: rgba(255,193,7,.4);
  color: #ffc107;
}

:root[data-theme="dark"] .training-modul-page .btn-warning:hover {
  background: rgba(255,193,7,.25) !important;
}

/* PAGINATION */
:root[data-theme="dark"] .pagination .page-link {
  background: #161616;
  color: #f7f7f7;
  border-color: rgba(255,255,255,.15);
}

:root[data-theme="dark"] .pagination .page-item.active .page-link {
  background: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}

:root[data-theme="dark"] .pagination .page-link:hover {
  background: rgba(255,255,255,.15);
}

/* NAVBAR */
:root[data-theme="dark"] .navbar {
  background: transparent;
}



/* =====================================================
   DARK MODE – TRAINING / QUIZ PAGE
===================================================== */

/* PANEL (BOOTSTRAP 3 STYLE) */
:root[data-theme="dark"] .panel {
  background: #121212 !important;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  margin-bottom: 1rem;
}

:root[data-theme="dark"] .panel-heading {
  background: #1f1f1f !important;
  color: #d4af37 !important;
  border-bottom: 1px solid rgba(255,255,255,.15);
  padding: .75rem 1rem;
}

:root[data-theme="dark"] .panel-body {
  background: #121212 !important;
  color: #f7f7f7 !important;
  padding: 1rem;
}

/* TABLE INSIDE PANEL */
:root[data-theme="dark"] .panel .table {
  --bs-table-bg: #121212;
  --bs-table-striped-bg: #1a1a1a;
  --bs-table-border-color: rgba(255,255,255,.15);
  color: #f7f7f7;
}

/* QUIZ OPTION */
:root[data-theme="dark"] .frb label {
  background: #161616;
  color: #f7f7f7;
  border: 1px solid rgba(255,255,255,.2);
}

:root[data-theme="dark"] .frb label:hover {
  background: #1f1f1f;
}

/* SELECTED ANSWER */
:root[data-theme="dark"] .frb input:checked + label {
  background: #b08222;
  color: #ffffff;
  border-color: #b08222;
}

/* SUBMIT BUTTON */
:root[data-theme="dark"] .btn-warning {
  background: #b08222;
  border-color: #b08222;
  color: #fff;
}

/* CONTAINER FIX */
:root[data-theme="dark"] .container {
  background: transparent !important;
}

/* =====================================================
   LIGHT MODE – TRAINING / QUIZ PAGE (MIRROR DARK MODE)
===================================================== */

/* PANEL (BOOTSTRAP 3 STYLE) */
:root[data-theme="light"] .panel {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 6px;
  margin-bottom: 1rem;
}

:root[data-theme="light"] .panel-heading {
  background: #f1f3f5 !important;
  color: #b08222 !important;
  border-bottom: 1px solid rgba(0,0,0,.15);
  padding: .75rem 1rem;
}

:root[data-theme="light"] .panel-body {
  background: #ffffff !important;
  color: #1c1c1c !important;
  padding: 1rem;
}

/* TABLE INSIDE PANEL */
:root[data-theme="light"] .panel .table {
  --bs-table-bg: #ffffff;
  --bs-table-striped-bg: #f1f3f5;
  --bs-table-border-color: rgba(0,0,0,.15);
  color: #1c1c1c;
}

/* QUIZ OPTION */
:root[data-theme="light"] .frb label {
  background: #ffffff;
  color: #1c1c1c;
  border: 1px solid rgba(0,0,0,.2);
}

:root[data-theme="light"] .frb label:hover {
  background: #f1f3f5;
}

/* SELECTED ANSWER */
:root[data-theme="light"] .frb input:checked + label {
  background: #b08222;
  color: #ffffff;
  border-color: #b08222;
}

/* SUBMIT BUTTON */
:root[data-theme="light"] .btn-warning {
  background: #b08222;
  border-color: #b08222;
  color: #ffffff;
}

/* CONTAINER FIX */
:root[data-theme="light"] .container {
  background: transparent !important;
}


/* =====================================================
   LOGIN PAGE
===================================================== */
.login-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 20px rgba(0,0,0,.25);
}

:root[data-theme="light"] .login-card {
  background: #ffffff;
  color: #1c1c1c;
  box-shadow: 1px 1px 10px 1px rgba(0,0,0,.25);	
}

:root[data-theme="dark"] .login-card {
  background: #121212;
  color: #f7f7f7;
}

.visual {
  background: linear-gradient(135deg,#99913C,#C7C057);
  color: #000;
}

:root[data-theme="dark"] .visual {
  background: linear-gradient(135deg,#333,#111);
  color: #f7f7f7;
}

/* =====================================================
   FORM
===================================================== */
:root[data-theme="dark"] .form-control {
  background: #161616;
  color: #f7f7f7;
  border-color: rgba(255,255,255,.2);
}

:root[data-theme="dark"] .form-control::placeholder {
  color: #aaa;
}

:root[data-theme="dark"] label {
  color: #bdbdbd;
}

/* =====================================================
   BUTTON
===================================================== */
.btn-gradient {
  background: linear-gradient(90deg,#ff7a18,#af002d 51%, #319197);
  color: #fff;
  border: none;
}

:root[data-theme="dark"] .btn-gradient {
  background: linear-gradient(90deg,#99913C,#C7C057);
  color: #000;
}

/* =====================================================
   ALERT
===================================================== */
:root[data-theme="dark"] .alert {
  background: #1a1a1a;
  color: #f7f7f7;
  border-color: rgba(255,255,255,.2);
}

/* =====================================================
   FOOTER
===================================================== */
.app-footer {
  position: relative;
  bottom: 0;
  width: 100%;
  padding: .75rem 0;
  font-size: .85rem;
  text-align: center;
}

:root[data-theme="light"] .app-footer {
  background: transparent;
  color: #000;
}

:root[data-theme="dark"] .app-footer {
  background: transparent;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.1);
}

/* =====================================================
   FIX HEIGHT / OVERFLOW
===================================================== */
body, #container {
  height: auto !important;
  overflow: visible !important;
}


:root[data-theme="dark"] .input-group .btn-outline-secondary {
  background: #1a1a1a;
  color: #f7f7f7;
  border-color: rgba(255,255,255,.2);
}

:root[data-theme="dark"] .input-group .btn-outline-secondary:hover {
  background: #222;
}

/* ================= CHECKBOX GOLD BORDER (LIGHT MODE ONLY) ================= */

[data-theme="light"] input[type="checkbox"].form-check-input {
    accent-color: #c9a227;
    border: 1.5px solid #c9a227;
}


/* saat hover */
[data-theme="light"] input[type="checkbox"].form-check-input:hover {
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.5);
}

/* saat checked */
[data-theme="light"] input[type="checkbox"].form-check-input:checked {
    background-color: #d4af37;
    border-color: #d4af37;
}


/* ================= GLOBAL TOAST ================= */
.toast-global{
  position:fixed;
  top:20px;
  right:20px;
  z-index:99999;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  border-radius:12px;
  font-size:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  opacity:0;
  transform:translateY(-10px);
  pointer-events:none;
  transition:.3s ease;
}

.toast-global.show{
  opacity:1;
  transform:translateY(0);
}

/* success */
.toast-success{
  background:#1f7a3d;
  color:#fff;
}

/* error */
.toast-error{
  background:#b02a37;
  color:#fff;
}