/* public/css/theme-light.css */

/* ===============================
   📱 Konsistensi Font & Theme di Semua Device
   =============================== */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 16px;
  font-family: 'Poppins', sans-serif;
  line-height: 1.5;
  /* Force light color scheme */
  color-scheme: light;
}

body {
  font-size: 1rem;
  background-color: #ffffff !important;
  color: #1f2937 !important;
  margin: 0;
  padding: 0;
  /* Force light color scheme */
  color-scheme: light;
}

/* Override dark mode dari device */
@media (prefers-color-scheme: dark) {
  html, body {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    color-scheme: light !important;
  }
}

/* ===============================
   🎨 Typography
   =============================== */

/* Heading - Text Hitam */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  margin: 0 0 0.5em;
  line-height: 1.2;
  color: #111827 !important;
}
h1 { font-size: 32px !important; }
h2 { font-size: 24px !important; }
h3 { font-size: 20px !important; }

/* Text umum - Text Hitam/Abu Gelap */
p, span, label { 
  font-size: 1rem; 
  color: #374151 !important; 
}

/* ===============================
   🎨 Light Theme Components
   =============================== */

/* Card */
.card {
  background-color: #ffffff !important; 
  color: #1f2937 !important;
  border: 1px solid #e5e7eb !important;
}
.card-header {
  background-color: #f9fafb !important;
  color: #111827 !important;
  border-bottom: 1px solid #e5e7eb !important;
}
.card-title,
.card-text,
.card-body,
.fw-bold {
  color: #111827 !important;
}

/* Input & Form */
.form-control {
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
  color: #111827 !important;
  font-size: 1rem;
}
.form-control:focus {
  background-color: #ffffff !important;
  color: #111827 !important;
  border-color: #f97316 !important;
  box-shadow: 0 0 0 0.25rem rgba(249,115,22,0.3) !important;
}

/* Placeholder text - Abu-abu */
.form-control::placeholder {
  color: #9ca3af !important;
  opacity: 1;
  font-size: 0.95rem;
}

/* Select & Textarea */
select.form-control,
textarea.form-control {
  background-color: #ffffff !important;
  color: #111827 !important;
}

/* ===============================
   🔔 Alert & Notification
   =============================== */

/* Alert */
.alert-danger {
  background-color: #dc2626 !important;
  border: none !important;
  color: #fff !important;
  font-size: 0.95rem;
}
.alert-warning {
  background-color: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fcd34d !important;
  font-size: 0.95rem;
}
.alert-success {
  background-color: #d1fae5 !important;
  color: #065f46 !important;
  border: 1px solid #6ee7b7 !important;
  font-size: 0.95rem;
}
.alert-info {
  background-color: #dbeafe !important;
  color: #1e40af !important;
  border: 1px solid #93c5fd !important;
  font-size: 0.95rem;
}

/* Floating Alert */
#page-alert {
  position: fixed;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  min-width: 350px;
  opacity: 0;
  transition: all 0.5s ease;
  font-size: 0.95rem;
}
#page-alert.show {
  top: 20px;
  opacity: 1;
}

/* ===============================
   🎨 Buttons
   =============================== */

/* 🔘 Tombol bulat */
.btn-orange-circle {
  background: linear-gradient(to right, #f97316, #fbbf24);
  border: none;
  color: white !important;
  border-radius: 12px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  font-size: 1rem;
}
.btn-orange-circle:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(249, 115, 22, 0.3);
}

/* 🔶 Tombol pill */
.btn-orange-pill {
  background: linear-gradient(to right, #f97316, #fbbf24);
  border: none;
  color: white !important;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 500;
  font-size: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-orange-pill:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 8px rgba(249, 115, 22, 0.3);
  color: white !important;
}

/* Tombol outline oranye */
.btn-outline-orange {
  border: 2px solid #f97316 !important;
  color: #f97316 !important;
  background-color: transparent !important;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.2s ease;
}
.btn-outline-orange:hover {
  background-color: #f97316 !important;
  color: #fff !important;
}

/* Disabled state */
.btn[disabled],
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Trash button */
.trash-btn {
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.trash-btn:hover {
  background-color: #dc2626 !important;
  transform: scale(1.1);
}

/* ===============================
   🎨 Custom Styling
   =============================== */

/* Logo Gradient */
.logo-gradient {
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(to right, #f97316, #fbbf24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-decoration: none;
  display: inline-block;
  transition: opacity 0.3s ease;
  font-size: 1.25rem;
}
.logo-gradient:hover {
  opacity: 0.85;
}

/* Warna utama oranye */
.text-orange {
  color: #f97316 !important;
}

.bg-orange {
  background-color: #f97316 !important;
}

/* Text colors */
.text-gray-900 {
  color: #111827 !important;
}
.text-gray-800 {
  color: #1f2937 !important;
}
.text-gray-700 {
  color: #374151 !important;
}
.text-gray-600 {
  color: #4b5563 !important;
}
.text-gray-500 {
  color: #6b7280 !important;
}

/* ===============================
   ✨ Animations
   =============================== */

.fade-in { 
  animation: fadeIn 0.3s ease-in-out; 
}
.fade-out { 
  animation: fadeOut 0.3s ease-in-out forwards; 
}

@keyframes fadeIn { 
  from { opacity: 0; transform: scale(0.95); } 
  to { opacity: 1; transform: scale(1); } 
}

@keyframes fadeOut { 
  from { opacity: 1; transform: scale(1); } 
  to { opacity: 0; transform: scale(0.95); } 
}

/* ===============================
   📱 Responsive Adjustments
   =============================== */

@media (max-width: 768px) {
  h1 { font-size: 28px !important; }
  h2 { font-size: 22px !important; }
  h3 { font-size: 18px !important; }
  
  .btn-orange-pill {
    padding: 6px 12px;
    font-size: 0.9rem;
  }
}

/* ===============================
   🔧 Override Browser Defaults
   =============================== */

/* Force white background untuk autocomplete */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
  -webkit-text-fill-color: #111827 !important;
}

/* Force light scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #f3f4f6;
}

::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}