/* ============================================================
   Academic & Office Excellence — CSS tùy chỉnh dùng chung
   Bổ trợ cho Tailwind CDN (token trong js/tailwind-config.js)
   ============================================================ */

:root {
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-card: 0px 1px 3px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.08);
}

body {
  font-family: "Be Vietnam Pro", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
.material-symbols-outlined.is-filled {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* ---------- Bề mặt & hiệu ứng nền ---------- */
.hero-gradient {
  background: radial-gradient(circle at top right, #e5eeff 0%, #f8f9ff 100%);
}
.hero-gradient-mobile {
  background: linear-gradient(135deg, #2563eb 0%, #004ac6 100%);
}
.glass-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.card-shadow {
  box-shadow: var(--shadow-card);
}

/* ---------- Chi tiết trình duyệt ---------- */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

.hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ---------- Scroll reveal (kích hoạt bởi js/main.js) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-premium), transform 0.7s var(--ease-premium);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Header nổi khi cuộn ---------- */
.site-header {
  transition: box-shadow 0.3s var(--ease-premium), background-color 0.3s var(--ease-premium);
}
.site-header.is-scrolled {
  box-shadow: 0 4px 20px rgba(11, 28, 48, 0.08);
}

/* ---------- Menu mobile: overlay + stagger ---------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(248, 249, 255, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-premium), visibility 0.4s;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
}
.mobile-menu .menu-link {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease-premium), transform 0.5s var(--ease-premium);
}
.mobile-menu.is-open .menu-link {
  opacity: 1;
  transform: translateY(0);
}
.mobile-menu.is-open .menu-link:nth-child(1) { transition-delay: 80ms; }
.mobile-menu.is-open .menu-link:nth-child(2) { transition-delay: 140ms; }
.mobile-menu.is-open .menu-link:nth-child(3) { transition-delay: 200ms; }
.mobile-menu.is-open .menu-link:nth-child(4) { transition-delay: 260ms; }
.mobile-menu.is-open .menu-link:nth-child(5) { transition-delay: 320ms; }
.mobile-menu.is-open .menu-link:nth-child(6) { transition-delay: 380ms; }

/* Hamburger 2 gạch morph thành X */
.hamburger { position: relative; width: 24px; height: 16px; display: inline-block; }
.hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.35s var(--ease-premium), top 0.35s var(--ease-premium);
}
.hamburger span:first-child { top: 2px; }
.hamburger span:last-child { top: 12px; }
.is-open-toggle .hamburger span:first-child { top: 7px; transform: rotate(45deg); }
.is-open-toggle .hamburger span:last-child { top: 7px; transform: rotate(-45deg); }

/* ---------- Form ---------- */
.input-focus-ring {
  outline: none;
  transition: border-color 0.25s var(--ease-premium), box-shadow 0.25s var(--ease-premium);
}
.input-focus-ring:focus {
  border-color: #004ac6;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
.field-error { border-color: #ba1a1a !important; }
.field-error:focus { box-shadow: 0 0 0 3px rgba(186, 26, 26, 0.15); }

/* Bước form: ẩn/hiện có chuyển động */
.form-step { display: none; }
.form-step.is-active { display: block; animation: step-in 0.45s var(--ease-premium); }
@keyframes step-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---------- Biểu đồ (admin) ---------- */
.chart-bar-fill {
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 0.8s var(--ease-premium);
}
.chart-bar-fill.is-grown { transform: scaleY(1); }

.chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: #213145;
  color: #eaf1ff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  transform: translate(-50%, -110%);
  opacity: 0;
  transition: opacity 0.2s var(--ease-premium);
  z-index: 30;
}
.chart-tooltip.is-visible { opacity: 1; }

.progress-fill {
  width: 0;
  transition: width 1s var(--ease-premium);
}

/* ---------- Sidebar admin (drawer trên mobile) ---------- */
.admin-sidebar {
  transition: transform 0.4s var(--ease-premium);
}
@media (max-width: 767px) {
  .admin-sidebar { transform: translateX(-100%); }
  .admin-sidebar.is-open { transform: translateX(0); }
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(11, 28, 48, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-premium), visibility 0.3s;
}
.sidebar-backdrop.is-visible { opacity: 1; visibility: visible; }

/* ---------- Tiện ích chung ---------- */
.tap-scale { transition: transform 0.2s var(--ease-premium); }
.tap-scale:active { transform: scale(0.97); }

.file-chip { animation: step-in 0.35s var(--ease-premium); }

body.menu-locked { overflow: hidden; }

/* ---------- Toast thông báo (Supabase) ---------- */
.toast-stack {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: min(92vw, 380px);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  background: #ffffff;
  color: #0b1c30;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.25);
  border-left: 4px solid #2563eb;
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.45s var(--ease-premium), opacity 0.45s var(--ease-premium);
}
.toast.is-visible { transform: translateX(0); opacity: 1; }
.toast.is-leaving { transform: translateX(120%); opacity: 0; }
.toast--success { border-left-color: #0d8a4f; }
.toast--error { border-left-color: #d21c3c; }
.toast--info { border-left-color: #2563eb; }
.toast__icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.toast--success .toast__icon { color: #0d8a4f; }
.toast--error .toast__icon { color: #d21c3c; }
.toast--info .toast__icon { color: #2563eb; }
.toast__body { min-width: 0; flex: 1; }
.toast__title { font-weight: 700; font-size: 0.9rem; }
.toast__msg { font-size: 0.82rem; color: #475569; margin-top: 1px; word-break: break-word; }
@media (prefers-color-scheme: dark) {
  .toast { background: #16232e; color: #e8eef4; }
  .toast__msg { color: #9fb0bd; }
}

/* ---------- Trạng thái nút đang xử lý ---------- */
.is-busy { opacity: 0.7; pointer-events: none; cursor: progress; }

/* Dòng đơn hàng vừa được thêm/cập nhật qua realtime */
@keyframes row-flash {
  0% { background-color: rgba(37, 99, 235, 0.18); }
  100% { background-color: transparent; }
}
.row-flash { animation: row-flash 1.6s var(--ease-premium); }

/* ---------- Drawer chi tiết đơn hàng (slide-over) ---------- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(11, 28, 48, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-premium), visibility 0.3s;
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.admin-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(94vw, 460px);
  z-index: 61;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.42s var(--ease-premium);
  box-shadow: -14px 0 44px rgba(0, 0, 0, 0.18);
}
.admin-drawer.is-open { transform: translateX(0); }

/* ---------- Dropdown thông báo ---------- */
.notif-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(90vw, 360px);
  z-index: 55;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s var(--ease-premium), transform 0.2s var(--ease-premium), visibility 0.2s;
}
.notif-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
/* Trên điện thoại: neo dropdown ngay dưới header, tràn đều 2 mép, không lệch */
@media (max-width: 640px) {
  .notif-menu {
    position: fixed;
    top: 4rem;
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    transform: translateY(-6px);
  }
  .notif-menu.is-open { transform: translateY(0); }
}
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Select trạng thái trong bảng đơn admin */
.status-select {
  appearance: none;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.6rem;
  padding: 0.3rem 1.8rem 0.3rem 0.7rem;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Ô chọn ngày (deadline): ẩn icon lịch mặc định của trình duyệt và để icon
   calendar_today tự style hiển thị. Icon mặc định được phủ trong suốt lên
   toàn ô nên bấm bất kỳ đâu trong ô đều mở được lịch. */
input[type="date"] {
  position: relative;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button {
  -webkit-appearance: none;
  display: none;
}

/* ============================================================
   Hero slideshow — tự đổi ảnh sau 5s (crossfade mượt)
   Ảnh nằm trong thư mục images/ (xem images/README.md)
   ============================================================ */
.hero-slideshow {
  position: relative;
  aspect-ratio: 3 / 2; /* tỉ lệ ảnh 1200x800 */
}
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.hero-slide.is-active {
  opacity: 1;
}