/* ===========================================================
   KiSmart - Jurnal Mode Colors Fix v1.0.0
   Tanggal: 2026-05-30

   Perbaikan untuk:
   1. Mode Otomatis: warna hijau/emerald saat aktif
   2. Mode Manual: warna biru/indigo saat aktif
   3. Perbedaan warna yang jelas antara mode aktif dan tidak aktif
   4. Efek sentuhan profesional (150-200ms transition)

   =========================================================== */

:root {
  /* Jurnal mode colors */
  --mode-otomatis: #1f7a4d;
  --mode-otomatis-bg: rgba(31, 122, 77, 0.1);
  --mode-otomatis-bg-active: rgba(31, 122, 77, 0.2);
  --mode-otomatis-border: rgba(31, 122, 77, 0.4);

  --mode-manual: #4f46e5;
  --mode-manual-bg: rgba(79, 70, 229, 0.1);
  --mode-manual-bg-active: rgba(79, 70, 229, 0.2);
  --mode-manual-border: rgba(79, 70, 229, 0.4);

  --mode-inactive: #6b7280;
  --mode-inactive-bg: #f9fafb;
  --mode-inactive-border: #e5e7eb;
}

/* ===========================================================
   1. MODE BUTTON BASE STYLES
   =========================================================== */

/* Base button for mode selection */
button[class*="mode"],
button[data-mode],
.MODE_BUTTON,
.mode-btn,
.mode-selector button,
[role="tab"][data-mode],
.segment-control button,
.toggle-mode button {
  transition: all 150ms ease !important;
  cursor: pointer !important;
  border-radius: 10px !important;
  padding: 8px 16px !important;
  min-height: 40px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border: 2px solid transparent !important;
  background: var(--mode-inactive-bg) !important;
  color: var(--mode-inactive) !important;
}

/* ===========================================================
   2. OTOMATIS MODE - Emerald/Green
   =========================================================== */

/* Otomatis active state */
button[class*="mode"]:active,
button[data-mode="otomatis"],
button[data-mode="otomatis"]:active,
.MODE_BUTTON.OTOMATIS.active,
.mode-btn.otomatis.active,
.mode-btn.otomatis[data-state="active"],
button[data-value="OTOMATIS"].active,
button.mode-otomatis.active,
.mode-selector button.otomatis.active,
.segment-control button:first-child.active,
[role="tab"]:contains("Otomatis").active,
button:has(span:contains("Otomatis")).active {
  background: var(--mode-otomatis-bg-active) !important;
  border-color: var(--mode-otomatis) !important;
  color: var(--mode-otomatis) !important;
  box-shadow: 0 2px 8px rgba(31, 122, 77, 0.25) !important;
  transform: scale(0.98) !important;
}

/* Otomatis not active but clickable */
button[class*="mode"]:not([data-mode="manual"]),
button[data-mode="otomatis"]:not(.active),
.mode-btn.otomatis:not(.active) {
  background: var(--mode-otomatis-bg) !important;
  border-color: var(--mode-otomatis-border) !important;
  color: var(--mode-otomatis) !important;
}

button[class*="mode"]:not([data-mode="manual"]):hover {
  background: var(--mode-otomatis-bg-active) !important;
  transform: translateY(-1px) !important;
}

/* ===========================================================
   3. MANUAL MODE - Indigo/Blue
   =========================================================== */

/* Manual active state */
button[class*="mode"]:active,
button[data-mode="manual"],
button[data-mode="manual"]:active,
.MODE_BUTTON.MANUAL.active,
.mode-btn.manual.active,
.mode-btn.manual[data-state="active"],
button[data-value="MANUAL"].active,
button.mode-manual.active,
.mode-selector button.manual.active,
.segment-control button:last-child.active,
[role="tab"]:contains("Manual").active,
button:has(span:contains("Manual")).active {
  background: var(--mode-manual-bg-active) !important;
  border-color: var(--mode-manual) !important;
  color: var(--mode-manual) !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25) !important;
  transform: scale(0.98) !important;
}

/* Manual not active but clickable */
button[data-mode="manual"]:not(.active),
.mode-btn.manual:not(.active) {
  background: var(--mode-manual-bg) !important;
  border-color: var(--mode-manual-border) !important;
  color: var(--mode-manual) !important;
}

button[data-mode="manual"]:not(.active):hover {
  background: var(--mode-manual-bg-active) !important;
  transform: translateY(-1px) !important;
}

/* ===========================================================
   4. RADIO/SELECT MODE SELECTOR
   =========================================================== */

/* Radio group style for mode selection */
[role="radiogroup"] button,
[role="radiogroup"] [role="radio"] {
  transition: all 150ms ease !important;
  cursor: pointer !important;
}

/* Otomatis radio checked */
[role="radiogroup"] [role="radio"][data-checked="true"]:not([data-value="manual"]),
[role="radiogroup"] button[aria-checked="true"]:not([data-value="manual"]),
.radio-option.otomatis.checked {
  background: var(--mode-otomatis-bg-active) !important;
  border-color: var(--mode-otomatis) !important;
  color: var(--mode-otomatis) !important;
}

/* Manual radio checked */
[role="radiogroup"] [role="radio"][data-checked="true"][data-value="manual"],
[role="radiogroup"] button[aria-checked="true"][data-value="manual"],
.radio-option.manual.checked {
  background: var(--mode-manual-bg-active) !important;
  border-color: var(--mode-manual) !important;
  color: var(--mode-manual) !important;
}

/* ===========================================================
   5. BADGE/INDICATOR FOR ACTIVE MODE
   =========================================================== */

/* Badge showing current mode */
[class*="mode-badge"],
[data-mode-badge],
.mode-indicator {
  transition: all 150ms ease !important;
}

/* Badge Otomatis active */
.mode-badge.otomatis,
.mode-indicator.otomatis {
  background: var(--mode-otomatis-bg) !important;
  color: var(--mode-otomatis) !important;
  border-color: var(--mode-otomatis-border) !important;
}

/* Badge Manual active */
.mode-badge.manual,
.mode-indicator.manual {
  background: var(--mode-manual-bg) !important;
  color: var(--mode-manual) !important;
  border-color: var(--mode-manual-border) !important;
}

/* ===========================================================
   6. CONTENT AREA DIFFERENTIATION
   =========================================================== */

/* Otomatis mode content container */
[data-mode="otomatis"] + *,
.mode-otomatis-content,
.otomatis-form {
  border-left: 3px solid var(--mode-otomatis) !important;
  background: linear-gradient(to right, rgba(31, 122, 77, 0.03), transparent) !important;
}

/* Manual mode content container */
[data-mode="manual"] + *,
.mode-manual-content,
.manual-form {
  border-left: 3px solid var(--mode-manual) !important;
  background: linear-gradient(to right, rgba(79, 70, 229, 0.03), transparent) !important;
}

/* ===========================================================
   7. HOVER EFFECTS
   =========================================================== */

button[class*="mode"]:hover,
.mode-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

button[class*="mode"]:active {
  transform: scale(0.98) !important;
}

/* ===========================================================
   8. DESKTOP SIZING
   =========================================================== */
@media (min-width: 1024px) {
  button[class*="mode"],
  .mode-btn {
    padding: 10px 20px !important;
    min-height: 44px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
  }
}

/* ===========================================================
   9. MOBILE SIZING
   =========================================================== */
@media (max-width: 767px) {
  button[class*="mode"],
  .mode-btn {
    padding: 10px 16px !important;
    font-size: 14px !important;
    min-height: 48px !important;
    /* Prevent double-tap zoom */
    touch-action: manipulation !important;
  }
}

/* ===========================================================
   10. SPECIFIC SELECTORS - Handle different markup
   =========================================================== */

/* Label-based selection */
button:has(span:contains("Otomatis")):not(:has(span:contains("Manual"))) {
  background: var(--mode-otomatis-bg) !important;
  color: var(--mode-otomatis) !important;
}

button:has(span:contains("Manual")):not(:has(span:contains("Otomatis"))) {
  background: var(--mode-manual-bg) !important;
  color: var(--mode-manual) !important;
}

/* Active state via class */
button.mode-active:not([data-mode="manual"]) {
  background: var(--mode-otomatis-bg-active) !important;
  border-color: var(--mode-otomatis) !important;
  color: var(--mode-otomatis) !important;
}

button.mode-active[data-mode="manual"] {
  background: var(--mode-manual-bg-active) !important;
  border-color: var(--mode-manual) !important;
  color: var(--mode-manual) !important;
}

/* ===========================================================
   11. ALTERNATIVE MODE NAMING
   =========================================================== */

/* NORMAL = Otomatis */
button[data-value="NORMAL"],
button[data-mode="normal"],
.mode-btn.normal {
  background: var(--mode-otomatis-bg) !important;
  border-color: var(--mode-otomatis-border) !important;
  color: var(--mode-otomatis) !important;
}

button[data-value="NORMAL"].active,
button[data-mode="normal"].active,
.mode-btn.normal.active {
  background: var(--mode-otomatis-bg-active) !important;
  border-color: var(--mode-otomatis) !important;
  color: var(--mode-otomatis) !important;
}

/* PENGGANTI / PIJAM = Manual */
button[data-value="PENGGANTI"],
button[data-value="PIKET"],
button[data-mode="pengganti"],
button[data-mode="piket"],
.mode-btn.pengganti,
.mode-btn.piket {
  background: var(--mode-manual-bg) !important;
  border-color: var(--mode-manual-border) !important;
  color: var(--mode-manual) !important;
}

button[data-value="PENGGANTI"].active,
button[data-value="PIKET"].active {
  background: var(--mode-manual-bg-active) !important;
  border-color: var(--mode-manual) !important;
  color: var(--mode-manual) !important;
}

/* ===========================================================
   12. TAB STYLE MODE SELECTORS
   =========================================================== */

/* Tab group for mode selection */
[role="tablist"]:has(button:contains("Otomatis")):has(button:contains("Manual")) {
  display: flex !important;
  gap: 4px !important;
  padding: 4px !important;
  background: rgba(0, 0, 0, 0.03) !important;
  border-radius: 12px !important;
}

/* Tab in mode selector */
[role="tablist"] button:contains("Otomatis"):active {
  background: var(--mode-otomatis-bg-active) !important;
  color: var(--mode-otomatis) !important;
}

[role="tablist"] button:contains("Manual"):active {
  background: var(--mode-manual-bg-active) !important;
  color: var(--mode-manual) !important;
}

/* ===========================================================
   13. TOUCH FEEDBACK - Active/Pressed
   =========================================================== */

/* Touch down effect */
@media (hover: none) {
  button[class*="mode"]:active {
    transform: scale(0.96) !important;
    transition: transform 50ms ease !important;
  }
}

/* ===========================================================
   14. FOCUS STATES (accessibility)
   =========================================================== */

button[class*="mode"]:focus-visible,
.mode-btn:focus-visible {
  outline: 2px solid var(--mode-otomatis) !important;
  outline-offset: 2px !important;
}

button[data-mode="manual"]:focus-visible,
.mode-btn.manual:focus-visible {
  outline-color: var(--mode-manual) !important;
}

/* ===========================================================
   15. PRINT STYLES
   =========================================================== */
@media print {
  button[class*="mode"],
  .mode-btn {
    border: 1px solid #ccc !important;
    background: #f9f9f9 !important;
    color: #333 !important;
    box-shadow: none !important;
  }

  button.mode-active:not([data-mode="manual"]) {
    border-color: #1f7a4d !important;
  }

  button.mode-active[data-mode="manual"] {
    border-color: #4f46e5 !important;
  }
}