/* Target Path: style.css */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --neon-indigo: #4f46e5;
  --neon-indigo-glow: rgba(79, 70, 229, 0.15);
  --neon-emerald: #059669;
  
  /* Light Warm Beige Theme Colors */
  --bg-dark: #fbfaf7;       /* สีเบจเนื้อสว่างมาก */
  --bg-card: #ffffff;       /* การ์ดสีขาวสะอาด */
  --text-primary: #1c1917;  /* ตัวหนังสือสีน้ำตาลหินเข้ม */
  --text-secondary: #57534e;/* ตัวหนังสือรองสีน้ำตาลหินปานกลาง */
  --border-color: #e7e5e4;  /* สีเส้นขอบเทาเนื้อ */
  --bg-hover: #f5f2eb;      /* สี Hover ต่างๆ */
}

body {
  font-family: 'Outfit', sans-serif;
  background-color: var(--bg-dark) !important;
  color: var(--text-primary) !important;
  overscroll-behavior-y: none; /* Anti-Pull-to-Refresh */
  -webkit-tap-highlight-color: transparent;
}

/* Override Tailwind Dark Classes to Light Warm Beige */
.bg-gray-950, .bg-gray-900, .bg-gray-900\/50, .bg-gradient-to-br, #auth-overlay {
  background-color: var(--bg-dark) !important;
  background-image: none !important; /* ปิด gradient เดิม */
}

.text-white, .text-gray-200, .text-gray-300 {
  color: var(--text-primary) !important;
}

.text-gray-400, .text-gray-500 {
  color: var(--text-secondary) !important;
}

.border-gray-800, .border-gray-700, .border-gray-700\/50 {
  border-color: var(--border-color) !important;
}

/* Hide scrollbar for clean look */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Organic Shapes & Intentional Asymmetry */
.organic-card, .auth-card {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  border-radius: 24px 12px 32px 16px;
  box-shadow: 0 10px 30px -10px rgba(120, 110, 90, 0.12), inset 0 1px 1px rgba(255,255,255,0.8);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.organic-card:hover {
  border-radius: 16px 32px 12px 24px;
  transform: translateY(-2px);
  box-shadow: 0 15px 40px -10px rgba(120, 110, 90, 0.2), inset 0 1px 1px rgba(255,255,255,1);
}

.organic-header {
  background-color: rgba(251, 250, 247, 0.85) !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-radius: 0 0 24px 24px;
}

/* Neon Glows tailored for Light Theme */
.neon-glow-btn {
  box-shadow: 0 4px 14px var(--neon-indigo-glow);
}
.neon-glow-btn:hover {
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.3);
}
.neon-glow-subtle {
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.neon-text {
  color: var(--neon-indigo) !important;
  text-shadow: 0 0 15px rgba(79, 70, 229, 0.1);
}

/* Priority Colors */
.priority-red { border-left: 4px solid #ef4444 !important; }
.priority-orange { border-left: 4px solid #f97316 !important; }
.priority-blue { border-left: 4px solid #3b82f6 !important; }
.priority-gray { border-left: 4px solid #78716c !important; }

/* Habit Grid */
.habit-block {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background-color: #e7e5e4;
  transition: all 0.2s;
}
.habit-block.level-1 { background-color: #d1fae5; }
.habit-block.level-2 { background-color: #a7f3d0; }
.habit-block.level-3 { background-color: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.3); }
.habit-block.level-4 { background-color: #059669; box-shadow: 0 0 12px rgba(5, 150, 105, 0.4); }

/* Navigation Animations */
.nav-btn {
  position: relative;
  color: var(--text-secondary) !important;
}
.nav-btn.active {
  color: var(--neon-indigo) !important;
  transform: translateY(-2px);
}
.nav-btn.active i, .nav-btn.active span {
  color: var(--neon-indigo) !important;
}
.nav-btn.active::after {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 4px;
  background-color: var(--neon-indigo);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 10px var(--neon-indigo-glow);
}

/* Global Navigation Styles */
nav {
  background-color: rgba(251, 250, 247, 0.92) !important;
  border-top: 1px solid var(--border-color) !important;
}

/* Header Adjustments */
header div, header span, header i {
  color: var(--text-primary) !important;
}
.bg-gray-800, .bg-gray-800\/80 {
  background-color: #f5f2eb !important;
  border-color: var(--border-color) !important;
}

/* Forms, Inputs & Date Picker customization */
input, select, textarea {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--neon-indigo) !important;
  outline: none;
}

/* Editor.js Light Mode Overrides */
.ce-block__content, .ce-toolbar__content {
  max-width: 100%;
}
.ce-paragraph {
  color: var(--text-primary) !important;
}
.ce-header {
  color: var(--text-primary) !important;
}
.cdx-block {
  padding: 0.4em 0;
}
.ce-toolbar__actions {
  background-color: var(--bg-hover) !important;
  border-radius: 8px;
  padding: 2px;
}
.ce-popover, .ce-settings {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
.ce-popover__item:hover, .ce-settings__button:hover {
  background-color: var(--bg-hover) !important;
}
.ce-popover__item-icon, .ce-popover__item-label {
  color: var(--text-primary) !important;
}

/* DataTables Light Mode Overrides */
table.dataTable tbody tr {
  background-color: transparent !important;
  color: var(--text-primary) !important;
}
table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
  background-color: transparent !important;
}
table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
  background-color: transparent !important;
}
table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.display tbody tr:hover {
  background-color: var(--bg-hover) !important;
}
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
  color: var(--text-secondary) !important;
  margin-bottom: 10px;
}
.dataTables_wrapper .dataTables_filter input {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
  padding: 4px 8px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--text-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--neon-indigo) !important;
  color: white !important;
  border-color: var(--neon-indigo) !important;
  border-radius: 8px;
}
table.dataTable thead th, table.dataTable thead td {
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-color) !important;
}
table.dataTable.no-footer {
  border-bottom: 1px solid var(--border-color) !important;
}

/* Modal details in Light Theme */
#detail-modal {
  background-color: var(--bg-dark) !important;
}
#detail-modal .bg-gray-900 {
  background-color: #f0ebe1 !important;
  border-bottom: 1px solid var(--border-color) !important;
}

/* Kanban custom cards styles */
.task-card {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
}
.task-card:hover {
  background-color: var(--bg-hover) !important;
}

/* SweetAlert2 style tweaks for Light Warm Beige */
.swal2-popup {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 20px !important;
}
.swal2-title {
  color: var(--text-primary) !important;
}
.swal2-content {
  color: var(--text-secondary) !important;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

/* Utilities for JS */
.hidden-safe {
  display: none !important;
}

/* Pomodoro Active Task Indicator */
#pomodoro-active-task-name {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-top: -0.5rem;
  margin-bottom: 1rem;
  font-weight: 500;
  text-align: center;
}

/* Task Modal/Drawer Custom Styles */
#task-form-modal {
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease-in-out;
  background-color: rgba(15, 12, 10, 0.6) !important; /* Darker backdrop blur */
}
#task-form-modal.translate-y-full {
  pointer-events: none;
  opacity: 0;
  transform: translateY(100%);
}
#task-form-modal:not(.translate-y-full) {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}

#task-detail-form textarea {
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  line-height: 1.5;
}