/* 
  styles.css - Styling & Print Layout สำหรับเว็บแอปค่ากราวด์หม้อแปลง PEA
*/

@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700;800&family=Charm:wght@400;700&display=swap');

:root {
  --pea-purple: #74167e;
  --pea-purple-dark: #580d60;
  --pea-purple-light: #9d2ca7;
  --pea-orange: #ea580c;
}

body {
  font-family: 'Sarabun', sans-serif;
  background-color: #f8fafc;
  color: #1e293b;
  -webkit-font-smoothing: antialiased;
}

.font-script {
  font-family: 'Charm', cursive;
  font-size: 1.1rem;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Custom Leaflet Map styling */
.leaflet-popup-content-wrapper {
  border-radius: 1rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  font-family: 'Sarabun', sans-serif;
  padding: 4px;
}
.leaflet-popup-content {
  margin: 10px 12px;
  line-height: 1.4;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.animate-fade-in {
  animation: fadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Dashboard Hero Banner Gradient */
.dash-hero-banner {
  background: linear-gradient(135deg, #2e073f 0%, #4a1259 45%, #1e1b4b 100%);
}

/* ==================== โหมดสีหน้าจอ (Dark Mode & Eye-Care Soft Mode) ==================== */
@media screen {
  /* 1. โหมดมืดสบายตา (Dark Mode) */
  body.theme-dark {
    background-color: #0b1120 !important;
    color: #e2e8f0 !important;
  }

  body.theme-dark header,
  body.theme-dark footer {
    background-color: #111827 !important;
    border-color: #1f2937 !important;
  }

  body.theme-dark .bg-white:not(.print-page):not(.print-page *) {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
  }

  body.theme-dark .bg-slate-50:not(.print-page *) {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
  }

  body.theme-dark .bg-slate-100:not(.print-page *) {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
  }

  body.theme-dark .text-slate-900:not(.print-page *),
  body.theme-dark .text-slate-800:not(.print-page *) {
    color: #f8fafc !important;
  }

  body.theme-dark .text-slate-700:not(.print-page *),
  body.theme-dark .text-slate-600:not(.print-page *) {
    color: #cbd5e1 !important;
  }

  body.theme-dark .text-slate-500:not(.print-page *),
  body.theme-dark .text-slate-400:not(.print-page *) {
    color: #94a3b8 !important;
  }

  body.theme-dark .border-slate-100:not(.print-page *),
  body.theme-dark .border-slate-200:not(.print-page *),
  body.theme-dark .border-slate-300:not(.print-page *) {
    border-color: #334155 !important;
  }

  body.theme-dark .text-pea-purple:not(.print-page *) {
    color: #d8b4fe !important;
  }

  body.theme-dark .bg-purple-50:not(.print-page *) {
    background-color: rgba(116, 22, 126, 0.35) !important;
    border-color: #9d2ca7 !important;
    color: #f3e8ff !important;
  }

  body.theme-dark .bg-purple-100:not(.print-page *) {
    background-color: rgba(126, 34, 206, 0.3) !important;
    color: #e9d5ff !important;
  }

  body.theme-dark .bg-emerald-50:not(.print-page *) {
    background-color: rgba(6, 78, 59, 0.35) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    color: #a7f3d0 !important;
  }

  body.theme-dark .bg-emerald-100:not(.print-page *) {
    background-color: rgba(6, 95, 70, 0.45) !important;
    color: #6ee7b7 !important;
  }

  body.theme-dark .bg-amber-50:not(.print-page *) {
    background-color: rgba(120, 53, 15, 0.35) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
    color: #fde68a !important;
  }

  body.theme-dark .bg-amber-100:not(.print-page *) {
    background-color: rgba(146, 64, 14, 0.45) !important;
    color: #fcd34d !important;
  }

  body.theme-dark .bg-red-50:not(.print-page *) {
    background-color: rgba(127, 29, 29, 0.35) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #fecaca !important;
  }

  body.theme-dark .bg-red-100:not(.print-page *) {
    background-color: rgba(153, 27, 27, 0.45) !important;
    color: #fca5a5 !important;
  }

  body.theme-dark input:not([disabled]):not([readonly]),
  body.theme-dark select,
  body.theme-dark textarea {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #475569 !important;
  }

  body.theme-dark input[disabled],
  body.theme-dark input[readonly] {
    background-color: #111827 !important;
    color: #64748b !important;
    border-color: #1f2937 !important;
  }

  /* 2. โหมดถนอมสายตา (Warm Soft / Eye-Care Mode) */
  body.theme-soft {
    background-color: #e6e2d8 !important;
    color: #292524 !important;
  }

  body.theme-soft header,
  body.theme-soft footer {
    background-color: #f0ede4 !important;
    border-color: #d6d1c4 !important;
  }

  body.theme-soft .bg-white:not(.print-page):not(.print-page *) {
    background-color: #f7f4ec !important;
    border-color: #dcd6c8 !important;
  }

  body.theme-soft .bg-slate-50:not(.print-page *) {
    background-color: #ebe7dd !important;
    border-color: #d6d1c4 !important;
  }
}

/* Print Stylesheet for PEA Report Form */
@media print {
  body {
    background-color: white !important;
    color: black !important;
    font-size: 10pt !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ซ่อน UI ทั้งหมด ยกเว้นใบงาน */
  header, nav, #tab-nav-bar, #filter-section, #transformers-grid, 
  .no-print, button, input, select, #toast-container, .nav-tab-btn, footer {
    display: none !important;
  }

  /* แสดงเฉพาะ printable sheet */
  .printable-sheet {
    display: block !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .print-page {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 265mm !important;
    page-break-after: always !important;
    break-after: page !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    box-sizing: border-box !important;
  }

  .print-page:last-child {
    page-break-after: auto !important;
    break-after: auto !important;
    min-height: auto !important;
  }

  /* บังคับพิมพ์สี */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  @page {
    size: A4 portrait;
    margin: 10mm 12mm;
  }

  .signature-section {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .report-avoid-break {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
}