/* ============================
   General
============================ */
:root{
  --brand: #b8863f;
  --brand-dark: #7d5a28;
  --brand-light: #f3ead4;
  --ok: #16a34a;
  --warn: #f59e0b;
  --danger: #dc2626;
}

body{
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ============================
   Header / Nav (white, luxury style)
============================ */
#site-header{
  background: #ffffff;
  border-bottom: 1px solid #f0e9da;
}
#site-header a.nav-link{
  color: #64748b;
  transition: color .15s, background-color .15s;
}
#site-header a.nav-link:hover,
#site-header a.nav-link.active{
  color: var(--brand-dark);
  background-color: var(--brand-light);
}

/* ============================
   Period tabs
============================ */
.period-tab-btn{
  transition: all .15s ease;
}
.period-tab-btn.active{
  background-color: var(--brand);
  color: #fff;
  box-shadow: 0 2px 6px rgba(184,134,63,.35);
}

/* ============================
   KPI Cards
============================ */
.kpi-card{
  transition: transform .15s, box-shadow .15s;
}
.kpi-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -8px rgba(0,0,0,.15);
}
.kpi-icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.trend-up{ color: var(--ok); }
.trend-down{ color: var(--danger); }
.trend-flat{ color: #64748b; }

/* ============================
   Chart containers
============================ */
.chart-box{
  position: relative;
  width: 100%;
  height: 260px;
}
@media (min-width: 640px){
  .chart-box{ height: 320px; }
}

/* ============================
   Table
============================ */
.data-table{
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
.data-table th{
  position: sticky;
  top: 0;
  background: #f8fafc;
  z-index: 1;
}
.data-table tbody tr:hover{
  background-color: #f8fafc;
}
.data-table td, .data-table th{
  padding: 10px 12px;
  border-bottom: 1px solid #eef2f7;
  font-size: 14px;
}

/* scrollbar */
.table-scroll{
  max-height: 480px;
  overflow-y: auto;
}
.table-scroll::-webkit-scrollbar{ width: 8px; }
.table-scroll::-webkit-scrollbar-thumb{ background: #d1d5db; border-radius: 8px; }

/* badge */
.ratio-badge{
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
}
.ratio-good{ background: #f0fdf4; color: #15803d; }
.ratio-mid{ background: #fefbeb; color: #a16207; }
.ratio-bad{ background: #fef2f2; color: #b91c1c; }

/* Badge % Ads/Doanh thu nổi bật trong khung ngày-tháng của Tổng quan */
.ratio-badge-lg{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
}
@media (min-width: 640px){
  .ratio-badge-lg{ font-size: 30px; padding: 10px 24px; }
}
.ratio-badge-lg.ratio-good{ background: #f0fdf4; color: #15803d; box-shadow: inset 0 0 0 1px rgba(21,128,61,.15); }
.ratio-badge-lg.ratio-mid{ background: #fefbeb; color: #a16207; box-shadow: inset 0 0 0 1px rgba(161,98,7,.18); }
.ratio-badge-lg.ratio-bad{ background: #fef2f2; color: #b91c1c; box-shadow: inset 0 0 0 1px rgba(185,28,28,.18); }

/* ============================
   Luxury white theme touches
============================ */
/* Lưu ý: loại trừ .section-header-bar để không đè trắng lên thanh tiêu đề
   màu "Tổng quan báo cáo" (bug cũ khiến thanh tiêu đề bị ẩn thành ô trắng trống). */
.kpi-card, #dashboard-section > div:not(.section-header-bar){
  background: #ffffff;
}
body{
  background: #fafaf7;
}
.kpi-icon{
  border: 1px solid rgba(0,0,0,.03);
}

/* toast */
#toast-container{
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast{
  background: #1f2937;
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
  animation: fadeInUp .2s ease;
}
.toast.success{ background: #7d5a28; }
.toast.error{ background: #dc2626; }
@keyframes fadeInUp{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}

/* modal */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
}
/* Đảm bảo modal luôn thực sự ẩn khi có class .hidden, không phụ thuộc
   vào thứ tự nạp CSS giữa Tailwind CDN và style.css (tránh bug chặn click
   toàn trang do overlay vô hình vẫn hiển thị display:flex). */
.modal-overlay.hidden{
  display: none !important;
}

input[type="date"], input[type="week"], input[type="month"]{
  color-scheme: light;
}

/* ============================
   Bulk entry table inputs
============================ */
.bulk-input{
  width: 100%;
  min-width: 110px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 13px;
  background: #fff;
}
.bulk-input:focus{
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(184,134,63,.15);
}
.bulk-row-remove-btn{
  color: #cbd5e1;
  transition: color .15s;
}
.bulk-row-remove-btn:hover{
  color: #dc2626;
}

/* Toggle icon xoay khi mở/đóng bảng nhập hàng loạt */
#bulk-toggle-icon{
  transition: transform .2s ease;
}
#bulk-toggle-icon.rotate-180{
  transform: rotate(180deg);
}

/* ============================
   Mobile fine-tuning
============================ */
@media (max-width: 639px){
  #site-header h1{ font-size: 15px; }
  #site-header p{ display: none; }
  .kpi-card{ padding: 14px !important; }
  .kpi-icon{ width: 36px; height: 36px; font-size: 15px; }
  #toast-container{
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
  .toast{ font-size: 13px; }
}

/* ============================
   Section shell — chia rõ từng khối
   (mỗi section có 1 thanh tiêu đề màu riêng
   + phần thân nền trắng, viền + bóng rõ ràng)
============================ */
.section-shell{
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #eef0f4;
  box-shadow: 0 4px 18px -6px rgba(15,23,42,.06);
  overflow: hidden;
}
.section-body{
  padding: 20px;
}
@media (min-width: 640px){
  .section-body{ padding: 24px; }
}

.section-header-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 20px;
  color: #fff;
  cursor: default;
}
@media (min-width: 640px){
  .section-header-bar{ padding: 16px 24px; }
}
.section-header-bar h2{ color: #fff; margin: 0; }
.section-header-bar i{ color: #fff; }

.badge-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.header-amber{ background: linear-gradient(135deg, #c9a35a, #9c6f31); }
.header-blue{ background: linear-gradient(135deg, #5b8def, #3562c7); }
.header-slate{ background: linear-gradient(135deg, #475569, #1e293b); }
.header-green{ background: linear-gradient(135deg, #34a672, #1f7a52); }

#bulk-toggle-btn.section-header-bar span#bulk-toggle-label,
#bulk-toggle-btn.section-header-bar i#bulk-toggle-icon{
  color: #fff;
}
#bulk-toggle-btn.section-header-bar:hover{
  filter: brightness(1.05);
}

/* ============================
   Responsive tables -> card layout trên mobile
   (Lịch sử dữ liệu + Nhập hàng loạt): mỗi dòng
   hiển thị dạng thẻ dọc, tránh bị kéo ngang.
============================ */
@media (max-width: 767px){
  .responsive-table thead{ display: none; }
  .responsive-table, .responsive-table tbody{ display: block; width: 100%; }
  .responsive-table tr{
    display: block;
    width: 100%;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #fff;
  }
  .responsive-table tr:last-child{ margin-bottom: 0; }
  .responsive-table td{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 2px;
    border-bottom: 1px dashed #f1f4f8;
    text-align: right;
    font-size: 14px;
    white-space: normal;
  }
  .responsive-table td:last-child{ border-bottom: none; }
  .responsive-table td::before{
    content: attr(data-label);
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    text-align: left;
    flex-shrink: 0;
  }
  .responsive-table td[data-label=""]::before{ display: none; }
  .responsive-table td.max-w-\[220px\]{ max-width: none; }

  /* Ô có input (bulk / inline-edit) cần chiếm hết chiều rộng còn lại */
  .responsive-table td input,
  .responsive-table td select{
    width: 100%;
    max-width: 220px;
  }
  .responsive-table td:has(input){ justify-content: flex-end; }

  /* Hành động (Sửa/Xoá, Lưu/Huỷ, Xoá dòng) căn giữa, không xổ dọc chật */
  .responsive-table td[data-label="Hành động"],
  .responsive-table td[data-label=""]{
    justify-content: center;
  }
  .bulk-row-remove-btn .remove-label{ font-size: 12px; margin-left: 4px; }

  .history-table-wrap, .bulk-table-wrap{
    max-height: none;
    overflow: visible;
    border: none !important;
  }
  .history-table-wrap .data-table thead,
  .bulk-table-wrap .data-table thead{ display: none; }
}

@media (min-width: 768px){
  .remove-label{ display: none; }
}