/* public/css/style.css - Warm Blue Design System */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── CSS Variables ──────────────────────────────────────── */
:root {
  --page-bg:     #f0f6ff;
  --sidebar-bg:  #1e40af;
  --sidebar-w:   256px;
  --white:       #ffffff;
  --blue-50:     #eff6ff;
  --blue-100:    #dbeafe;
  --blue-200:    #bfdbfe;
  --blue-300:    #93c5fd;
  --blue-400:    #60a5fa;
  --blue-500:    #3b82f6;
  --blue-600:    #2563eb;
  --blue-700:    #1d4ed8;
  --blue-800:    #1e40af;
  --blue-900:    #1e3a8a;
  --text-h:      #1e3a8a;
  --text-body:   #374151;
  --text-muted:  #6b7280;
  --border:      #dbeafe;
  --success:     #059669;
  --danger:      #ef4444;
  --warning:     #f59e0b;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --shadow-card: 0 1px 3px rgba(37,99,235,0.07), 0 4px 16px rgba(37,99,235,0.05);
  --shadow-lg:   0 8px 32px rgba(37,99,235,0.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Noto Sans Thai','Inter',sans-serif; background: var(--page-bg); color: var(--text-body); min-height: 100vh; }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--blue-50); }
::-webkit-scrollbar-thumb { background: var(--blue-300); border-radius: 99px; }

/* ── Sidebar Layout ──────────────────────────────────────── */
.sidebar { width: var(--sidebar-w); position: fixed; top: 0; left: 0; height: 100%; z-index: 50; background: linear-gradient(180deg, #1e40af 0%, #1e3a8a 100%); box-shadow: 4px 0 20px rgba(30,58,138,0.15); overflow-y: auto; transition: transform .3s ease; }
.main-content { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }

/* ── Cards ───────────────────────────────────────────────── */
.card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); border: 1px solid var(--blue-100); }

/* ── Gradient text ───────────────────────────────────────── */
.gradient-text { background: linear-gradient(135deg, #2563eb,#0ea5e9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ── Animations ──────────────────────────────────────────── */
@keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.fade-up { animation: fadeUp .35s ease both; }
.delay-1 { animation-delay:.05s; } .delay-2 { animation-delay:.10s; }
.delay-3 { animation-delay:.15s; } .delay-4 { animation-delay:.20s; }
.delay-5 { animation-delay:.25s; }

@keyframes spin { to { transform: rotate(360deg); } }
.spinner { animation: spin .7s linear infinite; display:inline-block; width:16px;height:16px; border:2px solid var(--blue-200); border-top-color:var(--blue-600); border-radius:50%; }

@keyframes modalIn { from{opacity:0;transform:scale(.95) translateY(10px);} to{opacity:1;transform:none;} }
.modal-in { animation: modalIn .22s cubic-bezier(.34,1.56,.64,1) both; }

/* ── Nav active indicator ────────────────────────────────── */
.nav-active-bar::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:65%; background:#93c5fd; border-radius:0 3px 3px 0; }

/* ── Table row hover ─────────────────────────────────────── */
.tbl-row:hover { background: #f8fbff; }

/* ── day-of-week tags ────────────────────────────────────── */
.day-tag { display:inline-block;padding:2px 10px;border-radius:6px;font-size:11px;font-weight:600; }
.day-จันทร์    { background:#ede9fe;color:#6d28d9; }
.day-อังคาร    { background:#fee2e2;color:#b91c1c; }
.day-พุธ        { background:#dcfce7;color:#15803d; }
.day-พฤหัสบดี   { background:#fef3c7;color:#b45309; }
.day-ศุกร์       { background:#dbeafe;color:#1d4ed8; }
.day-เสาร์       { background:#f3e8ff;color:#7c3aed; }
.day-อาทิตย์    { background:#ffedd5;color:#c2410c; }

/* ── Status top borders ──────────────────────────────────── */
.top-blue   { border-top: 3px solid #3b82f6 !important; }
.top-sky    { border-top: 3px solid #0ea5e9 !important; }
.top-indigo { border-top: 3px solid #6366f1 !important; }
.top-green  { border-top: 3px solid #10b981 !important; }
.top-amber  { border-top: 3px solid #f59e0b !important; }
.top-red    { border-top: 3px solid #ef4444 !important; }

/* ── Chart canvas ────────────────────────────────────────── */
.chart-wrap { position:relative; width:100%; }

/* ── Upload drag ─────────────────────────────────────────── */
.drag-active { border-color: var(--blue-500) !important; background: var(--blue-50) !important; }

/* ── Mobile ──────────────────────────────────────────────── */
@media(max-width:768px){
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .main-content { margin-left:0 !important; }
}

/* ── Print ───────────────────────────────────────────────── */
@media print {
  .sidebar,.topbar,.no-print { display:none !important; }
  .main-content { margin-left:0; }
  .card { box-shadow:none; border:1px solid #ccc; }
}