/* ============================================
   Cantaloupe - Dashboard Stylesheet
   Layout: sidebar glass + content area (theo ảnh 3)
   ============================================ */

.dash-shell { display: flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */
.dash-sidebar {
  width: 258px; flex-shrink: 0; position: sticky; top: 0; height: 100vh;
  padding: 22px 16px; display: flex; flex-direction: column;
  background: rgba(255,255,255,.55);
  border-right: 1px solid rgba(255,255,255,.6);
}
.dash-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; color: var(--green-800); padding: 6px 10px 20px; }
.dash-brand:hover { text-decoration: none; }
.dash-brand .logo { width: 36px; height: 36px; border-radius: 11px;
  background: radial-gradient(circle at 30% 30%, var(--melon-500), var(--green-600)); display: grid; place-items: center; font-size: 19px; }

.dash-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dash-nav a {
  display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: 14px;
  color: var(--slate-700); font-weight: 600; font-size: 15px; transition: background .18s, color .18s;
}
.dash-nav a:hover { background: rgba(255,255,255,.7); color: var(--green-800); text-decoration: none; }
.dash-nav a.active { background: var(--green-600); color: #fff; box-shadow: 0 6px 16px rgba(22,163,74,.35); }
.dash-nav a .ic { font-size: 19px; width: 22px; text-align: center; }

.sidebar-foot { margin-top: auto; padding-top: 16px; }
.user-chip { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 14px; background: rgba(255,255,255,.6); }
.user-chip .avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,var(--green-500),var(--melon-500));
  display: grid; place-items: center; color: #fff; font-weight: 700; flex-shrink: 0; }
.user-chip .u-name { font-weight: 700; font-size: 14px; line-height: 1.2; }
.user-chip .u-role { font-size: 12px; color: var(--slate-500); }

/* ---------- Main content ---------- */
.dash-main { flex: 1; min-width: 0; padding: 26px 32px 48px; }
.dash-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; gap: 16px; flex-wrap: wrap; }
.dash-topbar .greet h1 { font-size: 26px; margin: 0; color: var(--green-900); }
.dash-topbar .greet p { margin: 2px 0 0; color: var(--slate-500); font-size: 14px; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); background: rgba(255,255,255,.7);
  display: grid; place-items: center; cursor: pointer; font-size: 19px; position: relative; box-shadow: var(--shadow-sm); }
.icon-btn:hover { background: #fff; }
.icon-btn .notif-dot { position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--cal-alert); border: 2px solid #fff; }

/* ---------- Widgets ---------- */
.widgets { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.w { grid-column: span 12; }
.w-3 { grid-column: span 3; } .w-4 { grid-column: span 4; } .w-6 { grid-column: span 6; }
.w-8 { grid-column: span 8; } .w-9 { grid-column: span 9; }

.panel {
  background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.7); border-radius: 22px;
  padding: 22px 24px; box-shadow: 0 8px 26px rgba(20,83,45,.08);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.panel-head h3 { margin: 0; font-size: 17px; color: var(--green-900); }
.panel-head .sub { font-size: 13px; color: var(--slate-500); }

/* Stat tiles */
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat .stat-top { display: flex; align-items: center; justify-content: space-between; }
.stat .stat-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; }
.stat .stat-val { font-size: 32px; font-weight: 800; color: var(--ink); line-height: 1; }
.stat .stat-label { color: var(--slate-500); font-size: 14px; }
.stat .stat-trend { font-size: 12px; font-weight: 700; }
.trend-up { color: var(--green-600); } .trend-down { color: var(--cal-alert); }
.ic-green { background: var(--green-100); color: var(--green-700); }
.ic-red { background: #fee2e2; color: var(--cal-alert); }
.ic-blue { background: #dbeafe; color: #2563eb; }
.ic-amber { background: var(--melon-100); color: var(--melon-600); }

/* Donut center label */
.donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut-legend { display: flex; flex-direction: column; gap: 10px; }
.legend-row { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--slate-700); }
.legend-row b { margin-left: auto; }
.legend-swatch { width: 12px; height: 12px; border-radius: 4px; }

/* Alert card in dashboard */
.alert-strip { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 18px;
  background: linear-gradient(120deg, #fef2f2, #fff5f5); border: 1px solid #fecaca; }
.alert-strip .a-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--cal-alert); color: #fff; display: grid; place-items: center; font-size: 24px; flex-shrink: 0; position: relative; --ring: rgba(220,38,38,.55); }
/* Vòng sáng lan ra quanh biểu tượng: chỉ phóng to + mờ dần, việc này card đồ hoạ tự lo nên không làm giật trang */
.alert-strip .a-ic::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 3px solid var(--ring);
  animation: icRing 1.5s ease-out infinite; pointer-events: none; }
@keyframes icRing { from { transform: scale(1); opacity: 1; } to { transform: scale(1.38); opacity: 0; } }
.alert-strip .a-main { flex: 1; min-width: 0; }
.alert-strip .a-main h4 { margin: 0 0 2px; color: #b91c1c; font-size: 16px; }
.alert-strip .a-main p { margin: 0; font-size: 13px; color: var(--slate-600); }

/* ---------- Camera page ---------- */
.cam-grid { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 20px; }
.cam-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 220px; margin: 0 auto; }
.cam-btn { aspect-ratio: 1; border-radius: 16px; border: 1px solid rgba(255,255,255,.7); background: rgba(255,255,255,.85);
  font-size: 24px; cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-sm); transition: transform .06s, background .15s; color: var(--green-700); }
.cam-btn:hover { background: var(--green-600); color: #fff; }
.cam-btn:active { transform: scale(.93); }
.cam-btn.center { background: var(--green-600); color: #fff; font-size: 14px; font-weight: 700; }
.cam-btn.blank { visibility: hidden; }
/* Ô xem camera (js/camera-xoay.js): khung ảnh bên trái, nút bên phải */
.cam-xem-o { margin-bottom: 20px; }
.cam-xem { display: grid; grid-template-columns: minmax(0, 720px) minmax(240px, 1fr); gap: 28px; align-items: center; }
.cam-khung { position: relative; aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden; background: #0f172a; }
.cam-lop { position: absolute; inset: 0; }
.cam-hud { position: absolute; z-index: 2; font-size: 12px; font-weight: 700; color: #fff; padding: 4px 10px;
  border-radius: 999px; background: rgba(15,23,42,.55); pointer-events: none; }
.cam-hud.tl { top: 10px; left: 10px; }
.cam-hud.tr { top: 10px; right: 10px; background: rgba(234,115,23,.9); }
/* Dấu + ở giữa khung như kính ngắm camera */
.cam-tam { position: absolute; z-index: 2; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none; opacity: .7; }
.cam-tam::before, .cam-tam::after { content: ""; position: absolute; background: #fff; }
.cam-tam::before { left: 12px; top: 0; width: 2px; height: 26px; }
.cam-tam::after { top: 12px; left: 0; height: 2px; width: 26px; }
.cam-zoom { display: flex; gap: 10px; max-width: 220px; margin: 10px auto 0; }
.cam-zoom .btn { flex: 1; justify-content: center; font-size: 18px; font-weight: 700; }
.cam-lop svg { cursor: crosshair; }
.cam-khung.tu-do .cam-lop svg, .cam-khung.tu-do .cam-vat { cursor: move; }   /* đang di chuyển tự do */
/* Hoa, quả mô hình nhận ra: rê chuột lên thì viền sáng, bấm vào thì tô đậm */
.cam-vat { fill: transparent; stroke: transparent; stroke-width: 2.5px; vector-effect: non-scaling-stroke; cursor: pointer;
  transition: fill .15s, stroke .15s; }
.cam-vat:hover { fill: color-mix(in srgb, var(--c) 20%, transparent); stroke: var(--c); }
.cam-vat.chon { fill: color-mix(in srgb, var(--c) 32%, transparent); stroke: var(--c); stroke-width: 3px; }
.cam-noi { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
/* Vòng chạm lan ra chỗ bấm */
.cam-gon { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(15,23,42,.25); animation: cam-gon .65s ease-out forwards; }
@keyframes cam-gon { from { transform: scale(.4); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }
/* Ô kết quả hiện ngay trên chỗ bấm */
.cam-the { position: absolute; transform: translate(-50%, calc(-100% - 16px)); background: #fff; border-radius: 12px;
  padding: 8px 14px; box-shadow: 0 10px 28px rgba(15,23,42,.22); display: flex; flex-direction: column; align-items: center;
  gap: 2px; white-space: nowrap; animation: cam-hien .18s ease-out; }
.cam-the.duoi { transform: translate(-50%, 16px); }
.cam-the b { font-size: 22px; color: var(--green-900); line-height: 1.15; }
.cam-the small { font-size: 11px; color: var(--slate-500); }
@keyframes cam-hien { from { opacity: 0; } to { opacity: 1; } }
/* Bấm phím thì nút tương ứng sáng lên */
.cam-btn.dang-bam { background: var(--green-600); color: #fff; transform: scale(.93); }
.cam-zoom .btn.dang-bam { background: var(--slate-50); transform: scale(.95); }

/* Garden 2D map */
.garden-map { display: grid; gap: 10px; }
.garden-row { display: flex; align-items: center; gap: 8px; }
.garden-row .row-label { width: 62px; font-size: 12px; font-weight: 700; color: var(--slate-500); flex-shrink: 0; }
.plant-cells { display: flex; gap: 7px; flex-wrap: wrap; }
.plant { width: 26px; height: 26px; border-radius: 8px; background: var(--green-100); border: 1px solid var(--green-500);
  display: grid; place-items: center; font-size: 13px; cursor: pointer; position: relative; transition: transform .1s; }
.plant:hover { transform: scale(1.15); z-index: 2; }
.plant.sick { background: var(--cal-alert); border-color: #991b1b; color: #fff; animation: blink 1s infinite; }
.plant.scanning { border-color: var(--melon-500); box-shadow: 0 0 0 2px var(--melon-100); }
@keyframes blink { 50% { opacity: .45; } }

/* disease photo */
.disease-photo { aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; position: relative; background: linear-gradient(160deg,#dcfce7,#bbf7d0); }
.disease-photo .bbox { position: absolute; border: 3px solid var(--cal-alert); border-radius: 6px; }
.disease-photo .bbox .tag { position: absolute; top: -26px; left: -3px; background: var(--cal-alert); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 5px; white-space: nowrap; }

/* treatment box */
.treat-step { display: flex; gap: 12px; margin-bottom: 14px; }
.treat-step .n { width: 26px; height: 26px; border-radius: 50%; background: var(--green-600); color: #fff; font-weight: 700; font-size: 13px; display: grid; place-items: center; flex-shrink: 0; }
.treat-step p { margin: 0; font-size: 14px; color: var(--slate-700); }

/* disease log */
.log-item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(148,163,184,.25); }
.log-item:last-child { border-bottom: none; }
.log-thumb { width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(160deg,#dcfce7,#bbf7d0); flex-shrink: 0; display: grid; place-items: center; font-size: 24px; }
.log-thumb.danger { background: linear-gradient(160deg,#fee2e2,#fecaca); }
.log-item .log-main { flex: 1; min-width: 0; }
.log-item .log-main h4 { margin: 0 0 2px; font-size: 15px; }
.log-item .log-main .muted { font-size: 12px; }

/* ---------- Smart Calendar ---------- */
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.cal-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cal-title { font-size: 20px; font-weight: 800; color: var(--green-900); min-width: 190px; text-align: center; }
.view-switch { display: inline-flex; background: rgba(255,255,255,.7); border-radius: 999px; padding: 4px; gap: 2px; border: 1px solid rgba(255,255,255,.7); }
.view-switch button { border: none; background: none; padding: 7px 16px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--slate-600); font-family: inherit; }
.view-switch button.active { background: var(--green-600); color: #fff; }

.cal-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; font-size: 13px; }
.cal-legend .lg { display: flex; align-items: center; gap: 7px; color: var(--slate-600); }
.cal-legend .sw { width: 14px; height: 14px; border-radius: 5px; }

/* month grid */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cal-dow { text-align: center; font-weight: 700; font-size: 13px; color: var(--slate-500); padding: 6px 0; }
.cal-cell { min-height: 108px; border-radius: 14px; background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.7);
  padding: 8px; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.cal-cell.other-month { opacity: .45; }
.cal-cell.today { border-color: var(--melon-500); box-shadow: 0 0 0 2px var(--melon-100); }
.cal-cell .day-num { font-size: 13px; font-weight: 700; color: var(--slate-600); }
.cal-cell.today .day-num { color: var(--melon-600); }
.cal-event { font-size: 11px; padding: 3px 7px; border-radius: 7px; color: #fff; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; }
.cal-event.done { opacity: .55; text-decoration: line-through; }
.ev-system { background: var(--cal-system); }
.ev-manual { background: var(--cal-manual); }
.ev-alert { background: var(--cal-alert); animation: blink 1.3s infinite; }
.ev-alert.processing { animation: none; background: var(--melon-600); }
.ev-alert.done { animation: none; }
.cal-more { font-size: 10px; color: var(--slate-500); }

/* week/day list view */
.cal-list { display: flex; flex-direction: column; gap: 10px; }
.cal-list-day { }
.cal-list-day .cld-head { font-weight: 700; color: var(--green-800); margin: 10px 0 6px; font-size: 15px; }
.cal-list-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.7); }
.cal-list-item .bar { width: 5px; align-self: stretch; border-radius: 5px; }
.cal-list-item .cli-main { flex: 1; min-width: 0; }
.cal-list-item .cli-main h4 { margin: 0; font-size: 15px; }
.cal-list-item .cli-main .muted { font-size: 12px; }
.cal-list-item.done .cli-main h4 { text-decoration: line-through; color: var(--slate-400); }

/* toggle switch */
.switch { position: relative; display: inline-block; width: 48px; height: 28px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: var(--slate-300); border-radius: 999px; transition: .25s; cursor: pointer; }
.switch .slider:before { content: ""; position: absolute; height: 22px; width: 22px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .25s; box-shadow: var(--shadow-sm); }
.switch input:checked + .slider { background: var(--green-600); }
.switch input:checked + .slider:before { transform: translateX(20px); }

/* devices */
.device-row { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(148,163,184,.22); }
.device-row:last-child { border-bottom: none; }
.device-scan { min-width: 210px; }
@media (max-width: 560px) {
  .device-row { flex-wrap: wrap; }
  .device-main { flex: 1; min-width: 0; }
  .device-scan { min-width: 0; flex-basis: 100%; }
  .device-scan select { width: 100%; }
}
.device-ic { width: 50px; height: 50px; border-radius: 14px; background: var(--green-100); display: grid; place-items: center; font-size: 24px; flex-shrink: 0; }
.device-main { flex: 1; min-width: 0; }
.device-main h4 { margin: 0 0 2px; font-size: 16px; }
.device-main .muted { font-size: 13px; }

/* log table for traceability */
.trace-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(148,163,184,.2); font-size: 14px; }
.trace-item:last-child { border-bottom: none; }
.trace-item .t-time { color: var(--slate-400); font-size: 12px; white-space: nowrap; min-width: 116px; }
.trace-item .t-dot { color: var(--green-600); }

@media (max-width: 1000px) {
  .cam-grid, .cam-xem { grid-template-columns: 1fr; }
  .w-3 { grid-column: span 6; } .w-4 { grid-column: span 6; } .w-8, .w-9 { grid-column: span 12; }
}
@media (max-width: 820px) {
  .dash-sidebar { position: fixed; z-index: 200; left: 0; top: 0; transform: translateX(-100%); transition: transform .25s; box-shadow: var(--shadow-lg); }
  .dash-sidebar.open { transform: none; }
  .dash-main { padding: 20px 16px 40px; }
  .w-3, .w-4 { grid-column: span 12; }
  .cal-cell { min-height: 76px; }
}
.mobile-menu-btn { display: none; }
@media (max-width: 820px) { .mobile-menu-btn { display: grid; } }

/* ---------- Giai đoạn sinh trưởng ---------- */
.plant.st { border: 1px solid rgba(15,23,42,.15); }
.plant.pollinated { outline: 2px dashed #92400e; outline-offset: 1px; }
.plant.event { animation: blink 1.2s infinite; }
.alert-strip.stage { background: linear-gradient(120deg, #f5f3ff, #faf5ff); border-color: #ddd6fe; }
.alert-strip.stage .a-ic { background: var(--cal-ai); --ring: rgba(139,92,246,.55); }
.alert-strip.stage .a-main h4 { color: #6d28d9; }
.alert-strip.ok { background: linear-gradient(120deg,#f0fdf4,#ecfdf5); border-color: #bbf7d0; }
.alert-strip.ok .a-ic { background: var(--green-600); }
.alert-strip.ok .a-ic::after { display: none; }
.alert-strip.ok .a-main h4 { color: var(--green-800); }
.ev-ai { background: var(--cal-ai); }
.ev-ai.processing { background: var(--melon-600); }
.ev-ai.pending { animation: blink 1.3s infinite; }
.row-progress { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(148,163,184,.2); font-size: 14px; }
.row-progress:last-child { border-bottom: none; }
.row-progress .rp-name { width: 58px; font-weight: 700; color: var(--slate-600); flex-shrink: 0; }
.row-progress .rp-bar { flex: 1; display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--slate-100); min-width: 60px; }
.log-thumb.st { overflow: hidden; padding: 0; }
.log-thumb.st svg { display: block; }

/* Dòng thời gian sinh trưởng */
.row-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.row-tabs button { border: 1px solid rgba(148,163,184,.35); background: rgba(255,255,255,.8); padding: 8px 16px; border-radius: 999px; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; color: var(--slate-700); }
.row-tabs button.active { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.gantt { position: relative; margin: 26px 0 8px; }
.gantt-bar { display: flex; height: 22px; border-radius: 8px; overflow: hidden; }
.gantt-bar div { height: 100%; }
.gantt-today { position: absolute; top: -20px; bottom: -6px; border-left: 2px dashed var(--ink); }
.gantt-today span { position: absolute; top: -2px; left: 4px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.gantt-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--slate-400); margin-top: 4px; }
.tl { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.tl-item { background: rgba(255,255,255,.8); border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.8); box-shadow: var(--shadow-sm); }
.tl-item .stage-photo { border-radius: 0; aspect-ratio: 4/3; }
.tl-item .tl-body { padding: 10px 12px 14px; font-size: 13px; }
.tl-item .tl-day { font-weight: 800; color: var(--green-800); font-size: 14px; }
.tl-item.future { opacity: .55; border-style: dashed; border-color: var(--slate-300); }
.tl-item.future .stage-photo { filter: grayscale(.6); }

/* Trang Nhận diện ảnh khi mở từ thanh bên Dashboard */
.in-dash .section { padding: 0 0 24px; }
.in-dash .section-alt { background: none; }
.in-dash .container { max-width: none; padding: 0; }
.in-dash .page-intro { display: none; }
.in-dash .section-head { text-align: left; max-width: none; margin: 8px 0 18px; }
.in-dash .section-head h2 { font-size: 22px; }

/* ---------- Dashboard bản "sang hơn" (body class="dash-sang"), duyệt 28/10/2026 ----------
   Giữ màu xanh, cam và phông cũ: nền sạch, khung gọn, biểu tượng nét (CT.thayEmojiTuDong),
   nhãn "Minh hoạ" trên khung dữ liệu giả. */
.dash-sang { background: #f5f9f6; }
.dash-sang::before { display: none; }
.dash-sang .dash-sidebar { background: #fff; border-right: 1px solid rgba(15,23,42,.06); }
.dash-sang .dash-nav a:hover { background: var(--green-50); }
.dash-sang .user-chip { background: #f5f9f6; }
.dash-sang .icon-btn { background: #fff; border-color: rgba(15,23,42,.08); }
.dash-sang .panel { background: #fff; border: 1px solid rgba(15,23,42,.07); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.05); }
.dash-sang .dash-topbar .greet h1 { font-size: 28px; }
.dash-sang .dash-nav a .ic .ic-svg { width: 20px; height: 20px; }
.dash-sang .stat .stat-ic .ic-svg { width: 22px; height: 22px; }
.dash-sang .alert-strip .a-ic .ic-svg { width: 24px; height: 24px; }
.dash-sang .panel-head h3 .ic-svg { margin-right: 6px; color: var(--green-700); }
.dash-sang .device-ic .ic-svg { width: 24px; height: 24px; color: var(--green-700); }
.dash-sang .cam-btn .ic-svg { width: 22px; height: 22px; }
.dash-sang .cal-cell, .dash-sang .cal-list-item, .dash-sang .tl-item { background: #fff; border-color: rgba(15,23,42,.07); }

/* Nhãn "Minh hoạ" trên khung dữ liệu mô phỏng */
.tag-demo { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: #f1f5f9; color: #64748b; margin-left: 8px; vertical-align: middle; letter-spacing: .2px; }
.dash-section-title { font-weight: 800; font-size: 16px; color: var(--green-900); margin: 28px 0 12px; display: flex; align-items: center; }

/* Tổng quan: "Hôm nay cần làm gì" */
.task-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid rgba(15,23,42,.06); }
.task-row:last-child { border-bottom: none; }
.task-check { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--green-500); background: #fff; cursor: pointer;
  flex-shrink: 0; color: #fff; display: grid; place-items: center; font-size: 15px; line-height: 1; }
.task-check:hover { background: var(--green-50); }
.task-row.done .task-check { background: var(--green-600); border-color: var(--green-600); cursor: default; }
.task-row.done .task-title { color: var(--slate-400); text-decoration: line-through; }
.task-main { flex: 1; min-width: 0; font-size: 14px; }
.task-main .badge { margin-top: 4px; }

/* Trang Nhận diện dưa lưới: cột trái = "Ảnh của bạn" + ô "Gần đây" (chỉ trong Dashboard), cột phải = Kết quả.
   Có ô Gần đây thì 3 ô khít hàng nhau: ô Gần đây giãn cho đáy bằng đáy ô Kết quả, danh sách dài thì cuộn bên trong. */
.nd-luoi { align-items: start; }
.nd-luoi:has(#ganDayCard) { align-items: stretch; }
.nd-cot { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.nd-gan-day { flex: 1; display: flex; flex-direction: column; min-height: 260px; }
.gd-khung { position: relative; flex: 1; margin-top: 8px; }
.gd-ds { position: absolute; inset: 0; overflow-y: auto; margin: 0 -10px; }
/* Mỗi dòng: kết luận · giờ · ảnh nhỏ (giống danh sách "Gần đây" của ứng dụng chat) */
.gd-dong { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 10px;
  background: none; font: inherit; color: var(--slate-700); text-align: left; cursor: pointer; }
.gd-dong:hover { background: var(--slate-50); }
.gd-dong.dang-xem { background: var(--green-50); color: var(--green-900); font-weight: 600; }
.gd-ten { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-gio { font-size: 12px; font-weight: 400; color: var(--slate-400); white-space: nowrap; }
.gd-anh { width: 30px; height: 30px; flex: none; border-radius: 7px; object-fit: cover; background: var(--green-50); }
@media (max-width: 1000px) { .w-6 { grid-column: span 12; } }

/* Tổng quan: ô chưa làm xong (nhiệt độ, độ ẩm: chưa có cảm biến) khoá cả ô bằng tấm kính mờ có ổ khoá.
   Không dùng backdrop-filter (từng làm giật khi cuộn): làm mờ chính nội dung ô bên dưới bằng filter, rồi phủ lớp kính lên. */
.khoa-o { position: relative; overflow: hidden; }
.khoa-mo { filter: blur(5px); opacity: .85; pointer-events: none; user-select: none; }
.khoa-man { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.62), rgba(220,252,231,.38) 55%, rgba(255,255,255,.5));
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 60px rgba(255,255,255,.35); }
.khoa-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px; color: var(--green-700);
  background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,255,255,.65)); border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 10px 28px rgba(15,23,42,.12), inset 0 1px 0 #fff; }
.khoa-man b { font-size: 17px; color: var(--green-900); }
.khoa-man small { font-size: 13px; color: var(--slate-500); }

/* Trang Cài đặt: các tab nhỏ (Thông tin cá nhân, Cài đặt thông báo, Thông tin vụ mùa, Giao diện), mỗi lúc hiện một ô */
.cd-tabs { margin-bottom: 20px; }
.cd-tabs button { display: inline-flex; align-items: center; gap: 7px; }
.cd-o { max-width: 760px; }
/* Tab Giao diện: 3 ô Sáng / Tối / Thiết bị, mỗi ô có hình xem trước nhỏ, nút tròn và tên ở dưới; ô đang chọn có viền xanh */
.gdien-chon { display: flex; gap: 26px; flex-wrap: wrap; padding: 6px 0 4px; }
.gdien-kieu { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer; }
.gdien-kieu input { position: absolute; opacity: 0; pointer-events: none; }
.gdien-mau { position: relative; width: 150px; height: 100px; border-radius: 14px; overflow: hidden;
  border: 2px solid transparent; box-shadow: 0 0 0 1px var(--slate-200); transition: border-color .15s, box-shadow .15s; }
.gdien-kieu:hover .gdien-mau { box-shadow: 0 0 0 1px var(--slate-300); }
.gdien-kieu input:checked ~ .gdien-mau { border-color: var(--green-600); box-shadow: 0 0 0 4px rgba(22,163,74,.18); }
.gdien-kieu input:focus-visible ~ .gdien-mau { outline: 2px solid var(--green-500); outline-offset: 3px; }
/* Hình xem trước: chấm tròn, thanh chữ, nút (màu cố định cho từng kiểu, không đổi theo giao diện đang dùng) */
.gdien-mau i, .gdien-mau b, .gdien-mau em { position: absolute; display: block; }
.gdien-mau i { top: 14px; left: 14px; width: 12px; height: 12px; border-radius: 50%; }
.gdien-mau b { top: 12px; left: 34px; width: 58px; height: 20px; border-radius: 5px; }
.gdien-mau em { right: 14px; bottom: 14px; width: 46px; height: 24px; border-radius: 6px; background: #16a34a; }
.gdien-mau.sang { background: linear-gradient(135deg, #f0fdf4, #d7f5e1); }
.gdien-mau.sang i { background: #4ade80; }
.gdien-mau.sang b { background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.08); }
.gdien-mau.sang em { background: #4ade80; }
.gdien-mau.toi { background: #151f1a; }
.gdien-mau.toi i { background: #4ade80; }
.gdien-mau.toi b { background: #2f3d36; }
.gdien-mau.thiet-bi { background: linear-gradient(90deg, #e3f8ea 50%, #151f1a 50%); }
.gdien-mau.thiet-bi i { background: #4ade80; }
.gdien-mau.thiet-bi b { background: linear-gradient(90deg, #fff 41px, #2f3d36 41px); }   /* nửa trái sáng, nửa phải tối */
/* Nút tròn tự vẽ + tên kiểu */
.gdien-ten { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--slate-700); }
.gdien-tron { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--slate-400); flex: none; transition: border-color .15s; }
.gdien-kieu input:checked ~ .gdien-ten .gdien-tron { border: 5px solid var(--green-600); }
.gdien-kieu input:checked ~ .gdien-ten { color: var(--ink); font-weight: 600; }

/* ---------- Chế độ tối (Cài đặt > Giao diện), chỉ cho khung sau khi đăng nhập ----------
   CT.renderSidebar gắn class "che-do-toi" lên thẻ <html> nên trang công cộng không bị ảnh hưởng.
   Cách làm: đổi bảng màu (biến --green-*, --slate-*...) cho chữ sáng trên nền tối, rồi sửa riêng các chỗ ghi thẳng màu trắng.
   Giữ màu xanh lá, cam dưa của web; nút xanh, màu giai đoạn, màu Lịch không đổi. */
html.che-do-toi {
  color-scheme: dark;   /* thanh cuộn, ô chọn ngày, ô chọn của trình duyệt cũng tối theo */
  --ink: #e5ece8;
  --slate-700: #c7d2cc; --slate-600: #a9b6af; --slate-500: #93a19a; --slate-400: #7f8e86;
  --slate-300: #3b4a43; --slate-200: #2a3832; --slate-100: #1f2b25; --slate-50: #1b2721;
  --green-900: #bbf7d0; --green-800: #86efac; --green-700: #4ade80;
  --green-100: #173a25; --green-50: #13281c;
  --melon-100: #3b2614;
  --toi-nen: #0e1612;     /* nền trang */
  --toi-o: #151f1a;       /* ô, thanh bên */
  --toi-o2: #1b2721;      /* ô lồng trong ô, ô nhập, nút sáng */
  --toi-vien: rgba(255,255,255,.07);
}
.che-do-toi body, .che-do-toi body.dash-sang { background: var(--toi-nen); }
.che-do-toi body::before { display: none; }
.che-do-toi .dash-sidebar, .che-do-toi .dash-sang .dash-sidebar { background: var(--toi-o); border-right-color: var(--toi-vien); }
.che-do-toi .dash-nav a:hover { background: var(--green-50); }
.che-do-toi .user-chip, .che-do-toi .dash-sang .user-chip { background: var(--toi-o2); }
.che-do-toi .icon-btn, .che-do-toi .dash-sang .icon-btn { background: var(--toi-o2); border-color: var(--toi-vien); }
.che-do-toi .icon-btn .notif-dot { border-color: var(--toi-o2); }
.che-do-toi .panel, .che-do-toi .dash-sang .panel, .che-do-toi .card, .che-do-toi .modal {
  background: var(--toi-o); border-color: var(--toi-vien); box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25); }
.che-do-toi .toast { background: var(--toi-o2); }   /* giữ viền màu bên trái của thông báo */
.che-do-toi .modal-head, .che-do-toi .modal-foot { border-color: var(--toi-vien); }
.che-do-toi .dash-sang .cal-cell, .che-do-toi .dash-sang .cal-list-item, .che-do-toi .dash-sang .tl-item,
.che-do-toi .cal-cell, .che-do-toi .cal-list-item, .che-do-toi .tl-item { background: var(--toi-o2); border-color: var(--toi-vien); }
.che-do-toi .view-switch, .che-do-toi .row-tabs button:not(.active), .che-do-toi .cam-btn:not(.center):not(:hover):not(.dang-bam) {
  background: var(--toi-o2); border-color: var(--toi-vien); }
.che-do-toi .btn-light { background: var(--toi-o2); border-color: var(--slate-300); }
.che-do-toi .btn-light:hover { background: var(--slate-100); }
.che-do-toi .btn-primary:hover { background: #15803d; }
.che-do-toi .field input, .che-do-toi .field textarea, .che-do-toi .field select { background: #101914; border-color: rgba(148,163,184,.25); }
.che-do-toi .task-check { background: transparent; }
.che-do-toi .tag-demo { background: #1f2b25; color: #93a19a; }
.che-do-toi .stage-chip { background: color-mix(in srgb, var(--c) 22%, #151f1a); color: color-mix(in srgb, var(--c) 55%, #fff); }
.che-do-toi .stage-photo { background: #173a25; }
.che-do-toi .log-thumb { background: #173a25; }
.che-do-toi .upload-box { background: rgba(34,197,94,.06); }
.che-do-toi .cam-the { background: var(--toi-o2); }
.che-do-toi .demo-banner { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.35); color: #fcd34d; }
.che-do-toi .badge-red, .che-do-toi .ic-red { background: rgba(220,38,38,.18); color: #fca5a5; }
.che-do-toi .badge-blue, .che-do-toi .ic-blue { background: rgba(37,99,235,.2); color: #93c5fd; }
/* Dải báo trên Tổng quan */
.che-do-toi .alert-strip { background: rgba(220,38,38,.1); border-color: rgba(220,38,38,.35); }
.che-do-toi .alert-strip .a-main h4 { color: #fca5a5; }
.che-do-toi .alert-strip.stage { background: rgba(139,92,246,.12); border-color: rgba(139,92,246,.35); }
.che-do-toi .alert-strip.stage .a-main h4 { color: #c4b5fd; }
.che-do-toi .alert-strip.ok { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.3); }
.che-do-toi .alert-strip.ok .a-main h4 { color: var(--green-800); }
/* Màu ghi thẳng trong code (nhãn tím "Việc phát sinh", ô biểu tượng màu hồng) */
.che-do-toi [style*="#ede9fe"] { background: rgba(139,92,246,.2) !important; color: #c4b5fd !important; }
.che-do-toi [style*="#fce7f3"] { background: rgba(236,72,153,.18) !important; }
/* Biểu đồ (js/charts.js ghi thẳng màu chữ tối trong SVG) */
.che-do-toi .panel svg text[fill="#0f172a"], .che-do-toi .panel svg text[fill="#334155"] { fill: var(--ink); }
.che-do-toi .panel svg text[fill="#64748b"], .che-do-toi .panel svg text[fill="#94a3b8"] { fill: var(--slate-500); }
.che-do-toi #lineClimate circle[fill="#fff"] { fill: var(--toi-o); }
/* Ô nhiệt độ, độ ẩm khoá: tấm kính tối */
.che-do-toi .khoa-man { background: linear-gradient(135deg, rgba(21,31,26,.72), rgba(22,101,52,.28) 55%, rgba(21,31,26,.6));
  border-color: rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 60px rgba(255,255,255,.03); }
.che-do-toi .khoa-ic { background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); border-color: rgba(255,255,255,.16);
  color: var(--green-700); box-shadow: 0 10px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); }