/*
 * ═══════════════════════════════════════════════════════════
 *  NEUMORPHISM.CSS  –  Trại Gà Pro
 *  Design System: Glassmorphism cards + Dark Neumorphism BTNs
 *  Font: Be Vietnam Pro (Vietnamese-optimized, Google Fonts)
 * ═══════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────────────────
   1. FONT  –  Be Vietnam Pro, tối ưu tiếng Việt
   Fallback toàn diện: Mac / Windows / Android / iOS
   ───────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&display=swap');

/* Áp dụng cho TẤT CẢ phần tử */
*,
*::before,
*::after {
  font-family:
    'Be Vietnam Pro',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    'Noto Sans',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Noto Color Emoji' !important;
}

/* ─────────────────────────────────────────────────────────
   2. DESIGN TOKENS  –  CSS Variables
   ───────────────────────────────────────────────────────── */
:root {
  /* --- Neumorphism shadows (dark theme) --- */
  --nm-light:    rgba(255,255,255,.05);
  --nm-dark:     rgba(0,0,0,.55);
  --nm-raised:   6px 6px 16px var(--nm-dark), -3px -3px 9px var(--nm-light);
  --nm-raised-s: 3px 3px 9px  var(--nm-dark), -2px -2px 5px var(--nm-light);
  --nm-inset:    inset 4px 4px 10px var(--nm-dark), inset -2px -2px 6px var(--nm-light);
  --nm-inset-s:  inset 2px 2px 6px  var(--nm-dark), inset -1px -1px 3px var(--nm-light);

  /* --- Glassmorphism --- */
  --glass-bg:     rgba(13,24,50,.72);
  --glass-border: rgba(255,255,255,.07);
  --glass-blur:   blur(14px) saturate(1.5);

  /* --- Status palette --- */
  --c-good:   #22c55e;
  --c-warn:   #f59e0b;
  --c-danger: #ef4444;
  --c-info:   #38bdf8;
  --c-gold:   #f59e0b;
  --c-silver: #94a3b8;
  --c-bronze: #b45309;
}

/* ─────────────────────────────────────────────────────────
   3. GLASSMORPHISM CARDS
   ───────────────────────────────────────────────────────── */
.card {
  background:         var(--glass-bg) !important;
  backdrop-filter:    var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border:             1px solid var(--glass-border) !important;
  box-shadow:         var(--nm-raised),
                      inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* ─────────────────────────────────────────────────────────
   4. NEUMORPHISM BUTTONS
   ───────────────────────────────────────────────────────── */
.btn {
  box-shadow:  var(--nm-raised-s) !important;
  transition:  box-shadow .12s ease, transform .1s ease !important;
  will-change: box-shadow, transform;
}
.btn:hover:not(:disabled) {
  box-shadow: 5px 5px 14px var(--nm-dark), -3px -3px 8px var(--nm-light),
              0 0 0 1px rgba(245,158,11,.12) !important;
  transform: translateY(-1px);
}
.btn:active:not(:disabled) {
  box-shadow: var(--nm-inset) !important;
  transform:  translateY(0) scale(.98);
}
.btn.primary {
  box-shadow: var(--nm-raised-s),
              0 0 22px rgba(245,158,11,.22) !important;
}
.btn.primary:active {
  box-shadow: var(--nm-inset),
              0 0 10px rgba(245,158,11,.12) !important;
}

/* ─────────────────────────────────────────────────────────
   5. NEUMORPHISM INPUTS / SELECTS
   ───────────────────────────────────────────────────────── */
input:not(.ui-num-btn),
select,
textarea {
  box-shadow:  var(--nm-inset-s) !important;
  transition:  border-color .18s, box-shadow .18s !important;
}
input:not(.ui-num-btn):focus,
select:focus,
textarea:focus {
  box-shadow:  var(--nm-inset-s),
               0 0 0 2px rgba(245,158,11,.28) !important;
}

/* ─────────────────────────────────────────────────────────
   6. SIDEBAR NAV  –  subtle glass nav items
   ───────────────────────────────────────────────────────── */
.nav.active {
  box-shadow: var(--nm-raised-s), inset 0 0 0 1px rgba(245,158,11,.25) !important;
}

/* ─────────────────────────────────────────────────────────
   7. DASHBOARD STATS ROW  (Glassmorphism stat cards)
   ───────────────────────────────────────────────────────── */
.ui-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.ui-stat-card {
  background:      var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border:          1px solid var(--glass-border);
  border-radius:   16px;
  padding:         16px 12px;
  text-align:      center;
  box-shadow:      var(--nm-raised);
  transition:      transform .18s, box-shadow .18s;
}
.ui-stat-card:hover {
  transform:   translateY(-2px);
  box-shadow:  var(--nm-raised), 0 8px 24px rgba(0,0,0,.2);
}
.ui-stat-icon { font-size: 26px; line-height: 1; margin-bottom: 8px; }
.ui-stat-val  { font-size: 24px; font-weight: 900; color: #f1f5f9; line-height: 1.1; }
.ui-stat-lbl  { font-size: 11px; color: #94a3b8; font-weight: 700;
                 margin-top: 4px; line-height: 1.4; }

/* ─────────────────────────────────────────────────────────
   8. VISUAL FARM MAP  (Dashboard)
   ───────────────────────────────────────────────────────── */
.ui-farm-map {
  background:      var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border:          1px solid var(--glass-border);
  border-radius:   18px;
  padding:         18px;
  margin-bottom:   20px;
  box-shadow:      var(--nm-raised);
}
.ui-fm-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   14px;
  flex-wrap:       wrap;
  gap:             8px;
}
.ui-fm-title {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   15px;
  font-weight: 800;
  color:       #f1f5f9;
}
.ui-fm-batch {
  font-size:    12px;
  font-weight:  800;
  background:   rgba(245,158,11,.15);
  color:        #fbbf24;
  border:       1px solid rgba(245,158,11,.3);
  border-radius: 999px;
  padding:      3px 10px;
}
.ui-fm-hint { font-size: 12px; color: #64748b; }

/* House card grid */
.ui-fm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
  gap: 12px;
}

.ui-house-card {
  border-radius:  14px;
  padding:        14px 10px;
  text-align:     center;
  cursor:         pointer;
  border:         2px solid transparent;
  box-shadow:     var(--nm-raised-s);
  transition:     all .2s ease;
  position:       relative;
  overflow:       hidden;
  user-select:    none;
  -webkit-tap-highlight-color: transparent;
}
.ui-house-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.04), transparent 60%);
  pointer-events: none;
}
.ui-house-card.good   { background: rgba(34,197,94,.1);  border-color: rgba(34,197,94,.4); }
.ui-house-card.warn   { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.4); }
.ui-house-card.danger { background: rgba(239,68,68,.1);  border-color: rgba(239,68,68,.4); }

.ui-house-card:hover  { transform: translateY(-3px) scale(1.03);
                         box-shadow: 0 14px 32px rgba(0,0,0,.4),
                                     var(--nm-raised-s); }
.ui-house-card:active { box-shadow: var(--nm-inset-s);
                         transform: translateY(0) scale(.97); }

/* Pulse animation for danger */
@keyframes hcPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.45), var(--nm-raised-s); }
  50%      { box-shadow: 0 0 0 10px rgba(239,68,68,.0), var(--nm-raised-s); }
}
.ui-house-card.danger.pulse { animation: hcPulse 2.2s ease-in-out infinite; }

.ui-hc-name  { font-size: 15px; font-weight: 900; color: #f1f5f9; margin-bottom: 6px; }
.ui-hc-count {
  font-size:   22px;
  font-weight: 900;
  color:       #f1f5f9;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.ui-hc-unit { font-size: 11px; font-weight: 700; color: #94a3b8; margin-left: 2px; }

.ui-hc-bar {
  height:        5px;
  background:    rgba(255,255,255,.1);
  border-radius: 3px;
  margin:        9px 0 7px;
  overflow:      hidden;
}
.ui-hc-bar-fill {
  height:        100%;
  border-radius: 3px;
  transition:    width .7s cubic-bezier(.34,1.56,.64,1);
}
.ui-hc-bar-fill.good   { background: linear-gradient(90deg,#22c55e,#86efac); }
.ui-hc-bar-fill.warn   { background: linear-gradient(90deg,#f59e0b,#fcd34d); }
.ui-hc-bar-fill.danger { background: linear-gradient(90deg,#ef4444,#fca5a5); }

.ui-hc-meta  { font-size: 11px; font-weight: 800; }
.text-good   { color: #4ade80; }
.text-warn   { color: #fbbf24; }
.text-danger { color: #f87171; }

/* ─────────────────────────────────────────────────────────
   9. COMPARE: PODIUM + RANK CARDS
   ───────────────────────────────────────────────────────── */
.ui-podium-wrap {
  background:      var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border:          1px solid var(--glass-border);
  border-radius:   18px;
  padding:         20px;
  margin-bottom:   20px;
  box-shadow:      var(--nm-raised);
}
.ui-section-head {
  font-size:   16px;
  font-weight: 900;
  color:       #f1f5f9;
  margin-bottom: 18px;
  display:     flex;
  align-items: center;
  gap:         8px;
}

/* Podium stage */
.ui-podium {
  display:         flex;
  align-items:     flex-end;
  justify-content: center;
  gap:             10px;
  margin-bottom:   22px;
  padding:         0 8px;
  flex-wrap:       wrap;
}
.ui-podium-slot {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  flex:           1;
  min-width:      100px;
  max-width:      175px;
}
.ui-podium-card {
  background:    rgba(255,255,255,.05);
  border:        1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding:       16px 12px 12px;
  text-align:    center;
  width:         100%;
  box-shadow:    var(--nm-raised);
  margin-bottom: 6px;
  transition:    transform .2s;
}
.ui-podium-card:hover { transform: translateY(-2px); }
.ui-podium-slot.rank1 .ui-podium-card {
  background: rgba(245,158,11,.13);
  border-color: rgba(245,158,11,.45);
  box-shadow: var(--nm-raised), 0 0 32px rgba(245,158,11,.18);
}
.ui-podium-slot.rank2 .ui-podium-card {
  background:   rgba(148,163,184,.1);
  border-color: rgba(148,163,184,.35);
}
.ui-podium-slot.rank3 .ui-podium-card {
  background:   rgba(180,83,9,.1);
  border-color: rgba(180,83,9,.35);
}
.ui-podium-medal  { font-size: 28px; line-height: 1; }
.ui-podium-name   { font-size: 16px; font-weight: 900; color: #f1f5f9; margin: 7px 0 3px; }
.ui-podium-rate   { font-size: 22px; font-weight: 900; color: var(--c-good); }
.ui-podium-lbl    { font-size: 11px; color: #94a3b8; font-weight: 700; }
.ui-podium-fcr    { font-size: 12px; color: #64748b; margin-top: 4px; }

.ui-podium-base { border-radius: 8px 8px 0 0; width: 100%; }
.ui-podium-slot.rank1 .ui-podium-base { background: linear-gradient(180deg,rgba(245,158,11,.45),rgba(245,158,11,.12)); height:90px; }
.ui-podium-slot.rank2 .ui-podium-base { background: linear-gradient(180deg,rgba(148,163,184,.35),rgba(148,163,184,.08)); height:68px; }
.ui-podium-slot.rank3 .ui-podium-base { background: linear-gradient(180deg,rgba(180,83,9,.35),rgba(180,83,9,.08)); height:50px; }

/* Rank cards list */
.ui-rank-cards { display: flex; flex-direction: column; gap: 10px; }
.ui-rank-card {
  display:       flex;
  align-items:   flex-start;
  gap:           14px;
  background:    rgba(13,24,50,.65);
  border:        1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding:       14px 16px;
  box-shadow:    var(--nm-raised-s);
  transition:    all .18s;
}
.ui-rank-card:hover {
  border-color: rgba(245,158,11,.2);
  box-shadow:   var(--nm-raised);
  transform:    translateX(3px);
}
.ui-rank-card.top3 {
  background:   rgba(13,24,50,.8);
  border-color: rgba(245,158,11,.18);
}
.ui-rc-rank {
  font-size:   22px;
  min-width:   32px;
  text-align:  center;
  flex-shrink: 0;
  padding-top: 2px;
}
.ui-rc-body  { flex: 1; min-width: 0; }
.ui-rc-name  {
  font-size:     16px;
  font-weight:   900;
  color:         #f1f5f9;
  margin-bottom: 9px;
  line-height:   1.2;
}
.ui-rc-sub   { font-size: 12px; color: #94a3b8; font-weight: 600; margin-left: 6px; }
.ui-rc-metrics { display: flex; flex-direction: column; gap: 7px; }

/* Progress bar metrics */
.ui-metric-row  {
  display:     flex;
  align-items: center;
  gap:         10px;
}
.ui-metric-lbl {
  font-size:  12px;
  color:      #94a3b8;
  font-weight: 700;
  white-space: nowrap;
  min-width:   90px;
}
.ui-metric-val {
  font-size:  13px;
  font-weight: 800;
  color:      #f1f5f9;
  white-space: nowrap;
  min-width:   52px;
  text-align:  right;
}
.ui-prog {
  flex:          1;
  height:        8px;
  background:    rgba(255,255,255,.08);
  border-radius: 4px;
  overflow:      hidden;
}
.ui-prog-fill {
  height:        100%;
  border-radius: 4px;
  transition:    width .7s cubic-bezier(.34,1.56,.64,1);
  min-width:     2px;
}
.ui-prog-fill.good { background: linear-gradient(90deg,#22c55e,#86efac); }
.ui-prog-fill.warn { background: linear-gradient(90deg,#f59e0b,#fcd34d); }
.ui-prog-fill.bad  { background: linear-gradient(90deg,#ef4444,#fca5a5); }
.ui-prog-fill.info { background: linear-gradient(90deg,#38bdf8,#7dd3fc); }

/* ─────────────────────────────────────────────────────────
   10. NUMBER INPUT  +/-  BUTTONS
   ───────────────────────────────────────────────────────── */
.ui-num-wrap {
  display:     flex;
  align-items: stretch;
  width:       100%;
  gap:         0;
}
.ui-num-wrap input[type=number] {
  flex:          1;
  min-width:     0;
  text-align:    center;
  border-radius: 0 !important;
  border-left:   0 !important;
  border-right:  0 !important;
}
.ui-num-btn {
  width:         46px;
  min-width:     46px;
  min-height:    44px;    /* iOS touch target */
  background:    linear-gradient(145deg,#131e38,#0a1425);
  border:        1px solid var(--line, #334155);
  color:         #f1f5f9;
  font-size:     22px;
  font-weight:   900;
  line-height:   1;
  cursor:        pointer;
  display:       grid;
  place-items:   center;
  box-shadow:    var(--nm-raised-s);
  transition:    all .1s;
  flex-shrink:   0;
  user-select:   none;
}
.ui-num-minus { border-radius: 12px 0 0 12px; }
.ui-num-plus  { border-radius: 0 12px 12px 0; }
.ui-num-btn:hover  { background: linear-gradient(145deg,#1c2d50,#121e36); color: #f59e0b; }
.ui-num-btn:active { box-shadow: var(--nm-inset-s); transform: scale(.95); }

/* ─────────────────────────────────────────────────────────
   11. MODAL  –  glassmorphism
   ───────────────────────────────────────────────────────── */
.box {
  background:      rgba(10,18,38,.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border:          1px solid rgba(255,255,255,.08) !important;
  box-shadow:      0 32px 72px rgba(0,0,0,.6) !important;
}

/* ─────────────────────────────────────────────────────────
   12. RESPONSIVE
   ───────────────────────────────────────────────────────── */
@media (max-width:900px) {
  .ui-fm-grid { grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); gap:10px; }
}
@media (max-width:600px) {
  .ui-fm-grid { grid-template-columns: repeat(auto-fill, minmax(90px,1fr)); gap:8px; }
  .ui-house-card { padding: 10px 8px; }
  .ui-hc-count   { font-size: 18px; }
  .ui-hc-name    { font-size: 13px; }
  .ui-stats-row  { grid-template-columns: repeat(2,1fr); gap:8px; }
  .ui-stat-val   { font-size: 20px; }
  .ui-podium     { gap: 6px; }
  .ui-podium-slot{ max-width: 130px; }
  .ui-metric-lbl { min-width: 75px; font-size: 11px; }
  .ui-metric-val { min-width: 44px; font-size: 12px; }
  .ui-rc-name    { font-size: 15px; }
}
@media (max-width:380px) {
  .ui-fm-grid { grid-template-columns: repeat(2,1fr); }
  .ui-podium  { flex-wrap: wrap; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════
   SMART DASHBOARD  v2.0
   HUD  ·  Smart House Cards  ·  Feed Predictor UI
   ═══════════════════════════════════════════════════════════ */

/* ── HUD: cảnh báo dữ liệu âm ───────────────────────────── */
.sd-hud {
  display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(127,29,29,.85),rgba(69,10,10,.9));
  border:1px solid rgba(239,68,68,.55); border-radius:14px;
  padding:14px 18px; margin-bottom:16px;
  box-shadow:0 0 0 1px rgba(239,68,68,.2),0 8px 24px rgba(239,68,68,.2),var(--nm-raised);
  animation:sdHudBlink 1.8s ease-in-out infinite;
}
@keyframes sdHudBlink {
  0%,100%{border-color:rgba(239,68,68,.55);} 50%{border-color:rgba(239,68,68,.9);}
}
.sd-hud-icon{font-size:20px;flex-shrink:0;}
.sd-hud-msg{flex:1;font-size:14px;font-weight:700;color:#fecaca;line-height:1.5;}
.sd-hud-msg strong{color:#fff;}
.sd-hud-action{font-size:12px;font-weight:800;color:rgba(255,255,255,.6);white-space:nowrap;align-self:center;flex-shrink:0;}

/* ── Farm Grid ───────────────────────────────────────────── */
.sd-farm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;}

/* ── Smart House Card ────────────────────────────────────── */
.sd-house-card{
  background:rgba(10,20,42,.8);border:2px solid rgba(255,255,255,.08);
  border-radius:18px;overflow:hidden;cursor:pointer;
  transition:all .22s ease;box-shadow:var(--nm-raised);position:relative;
}
.sd-house-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.03),transparent 55%);
  pointer-events:none;
}
.sd-house-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.5),var(--nm-raised);border-color:rgba(245,158,11,.3);}
.sd-house-card:active{box-shadow:var(--nm-inset);transform:scale(.98);}

/* ── Card Header ── */
.sd-hc-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:13px 16px 10px;border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(90deg,rgba(15,30,60,.9),rgba(10,20,40,.8));
}
.sd-hc-id{font-size:20px;font-weight:900;color:#f1f5f9;letter-spacing:-.01em;}

/* Status pills */
.sd-status-badge{font-size:11px;font-weight:800;border-radius:999px;padding:4px 10px;white-space:nowrap;}
.sd-s-ok      {background:rgba(34,197,94,.15); color:#4ade80;border:1px solid rgba(34,197,94,.3);}
.sd-s-warn    {background:rgba(245,158,11,.18);color:#fbbf24;border:1px solid rgba(245,158,11,.4);}
.sd-s-critical{background:rgba(239,68,68,.2);  color:#f87171;border:1px solid rgba(239,68,68,.5);}
.sd-s-anomaly {background:rgba(239,68,68,.25); color:#fca5a5;border:1px solid rgba(239,68,68,.6);}

/* ── Two-panel layout ── */
.sd-panels{display:grid;grid-template-columns:1fr 1fr;}
.sd-panel{padding:14px 14px 12px;position:relative;}
.sd-flock-panel{border-right:1px solid rgba(255,255,255,.06);}
.sd-feed-panel.sd-feed-warn    {background:rgba(245,158,11,.04);}
.sd-feed-panel.sd-feed-critical{background:rgba(239,68,68,.05);}

.sd-panel-title{font-size:11px;font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;}

/* ── Metric ── */
.sd-metric-main{display:flex;align-items:baseline;gap:4px;margin-bottom:6px;}
.sd-m-val {font-size:22px;font-weight:900;color:#f1f5f9;letter-spacing:-.02em;}
.sd-m-unit{font-size:12px;font-weight:700;color:#94a3b8;}
.sd-meta-row{margin-bottom:7px;}
.sd-meta-item{font-size:12px;font-weight:600;color:#94a3b8;line-height:1.4;}

/* Color helpers */
.sd-green {color:#4ade80;} .sd-orange{color:#fbbf24;} .sd-red{color:#f87171;} .sd-info{color:#7dd3fc;}

/* Age badge */
.sd-age-badge{
  display:inline-flex;align-items:center;background:rgba(56,189,248,.12);
  border:1px solid rgba(56,189,248,.25);border-radius:999px;
  padding:3px 8px;font-size:11px;font-weight:800;color:#7dd3fc;margin-bottom:8px;
}

/* ── Progress bars (in card) ── */
.sd-prog-wrap{margin-top:6px;}
.sd-prog-bar{height:7px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden;margin-bottom:5px;}
.sd-prog-fill{height:100%;border-radius:4px;transition:width .7s cubic-bezier(.34,1.56,.64,1);min-width:2px;}
.sd-prog-fill.good{background:linear-gradient(90deg,#22c55e,#86efac);}
.sd-prog-fill.warn{background:linear-gradient(90deg,#f59e0b,#fcd34d);}
.sd-prog-fill.bad {background:linear-gradient(90deg,#ef4444,#fca5a5);}
.sd-prog-fill.info{background:linear-gradient(90deg,#38bdf8,#7dd3fc);}
.sd-prog-label{display:flex;justify-content:space-between;font-size:11px;font-weight:700;color:#64748b;}

/* ── Alert badges inside card ── */
.sd-alert-badge{margin:10px -14px -12px;padding:9px 14px;font-size:12px;font-weight:800;line-height:1.4;text-align:center;}
.sd-alert-warn    {background:rgba(245,158,11,.18);color:#fbbf24;border-top:1px solid rgba(245,158,11,.35);}
.sd-alert-critical{background:rgba(239,68,68,.18); color:#fca5a5;border-top:1px solid rgba(239,68,68,.4);}
.sd-alert-endbatch{background:linear-gradient(90deg,rgba(239,68,68,.15),rgba(245,158,11,.15));color:#fcd34d;border-top:1px solid rgba(245,158,11,.4);}

/* No feed data */
.sd-no-feed-data{padding:16px 0;font-size:12px;font-weight:700;color:#475569;text-align:center;}

/* ── Card warning states ── */
/* Amber glow */
.sd-card-warn{
  border-color:rgba(245,158,11,.5)!important;
  box-shadow:var(--nm-raised),0 0 0 1px rgba(245,158,11,.15),0 4px 22px rgba(245,158,11,.18)!important;
}

/* Red glow + pulse (inset shadow = lõm xuống) */
.sd-card-critical{
  border-color:rgba(239,68,68,.65)!important;
  box-shadow:var(--nm-inset),0 0 0 2px rgba(239,68,68,.25),0 0 30px rgba(239,68,68,.25)!important;
  animation:sdCriticalPulse 1.6s ease-in-out infinite;
}
@keyframes sdCriticalPulse{
  0%,100%{box-shadow:var(--nm-inset),0 0 0 0 rgba(239,68,68,.4),0 0 20px rgba(239,68,68,.2);}
  50%    {box-shadow:var(--nm-inset),0 0 0 10px rgba(239,68,68,0),0 0 40px rgba(239,68,68,.4);}
}

/* End-of-batch amber-red dạ quang */
.sd-card-endbatch{
  border-color:rgba(245,158,11,.65)!important;
  box-shadow:var(--nm-inset),0 0 0 2px rgba(245,158,11,.22),0 0 34px rgba(245,158,11,.22),0 0 60px rgba(239,68,68,.1)!important;
  animation:sdEndbatchPulse 2.2s ease-in-out infinite;
}
@keyframes sdEndbatchPulse{
  0%,100%{border-color:rgba(245,158,11,.55);} 50%{border-color:rgba(239,68,68,.75);}
}

/* Anomaly (dữ liệu âm) */
.sd-card-anomaly{
  border-color:rgba(239,68,68,.75)!important;
  box-shadow:var(--nm-inset),0 0 0 3px rgba(239,68,68,.3),inset 0 0 22px rgba(239,68,68,.1)!important;
}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:900px){.sd-farm-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}}
@media(max-width:600px){
  .sd-farm-grid{grid-template-columns:1fr;}
  .sd-panels   {grid-template-columns:1fr;}
  .sd-flock-panel{border-right:none;border-bottom:1px solid rgba(255,255,255,.06);}
  .sd-m-val    {font-size:20px;}
  .sd-hud      {flex-direction:column;gap:8px;}
}
@media(max-width:400px){.sd-hc-id{font-size:17px;}.sd-m-val{font-size:18px;}}

/* ═══════════════════════════════════════
   SMART DASHBOARD V3 — feed-first cards
   ═══════════════════════════════════════ */
.sd-enhanced-dashboard .sd-native-stats-hidden{display:none!important;}
.sd-stat-warn{border-color:rgba(245,158,11,.35)!important;box-shadow:var(--nm-raised),0 0 0 1px rgba(245,158,11,.18)!important;}
.sd-farm-grid{grid-template-columns:repeat(auto-fill,minmax(360px,1fr));}
.sd-panels{grid-template-columns:1.15fr .85fr;}
.sd-feed-panel{min-height:210px;}
.sd-flock-panel{border-right:0;border-left:1px solid rgba(255,255,255,.06);}
.sd-feed-visual{display:grid;grid-template-columns:64px minmax(0,1fr);gap:13px;align-items:end;margin-bottom:12px;}
.sd-silo{position:relative;width:58px;height:116px;border:2px solid rgba(148,163,184,.35);border-radius:12px 12px 16px 16px;background:linear-gradient(180deg,rgba(15,23,42,.8),rgba(2,6,23,.55));overflow:hidden;box-shadow:inset 0 5px 14px rgba(0,0,0,.45);}
.sd-silo::before{content:'';position:absolute;inset:8px 10px auto auto;width:10px;height:72px;border-radius:999px;background:rgba(255,255,255,.08);z-index:2;}
.sd-silo-cap{position:absolute;left:12px;right:12px;bottom:0;height:8px;border-radius:999px;background:rgba(15,23,42,.9);z-index:3;}
.sd-silo-fill{position:absolute;left:0;right:0;bottom:0;min-height:2px;transition:height .7s cubic-bezier(.34,1.56,.64,1);}
.sd-silo.good .sd-silo-fill{background:linear-gradient(180deg,#86efac,#22c55e);}
.sd-silo.warn .sd-silo-fill{background:linear-gradient(180deg,#fcd34d,#f59e0b);}
.sd-silo.bad .sd-silo-fill{background:linear-gradient(180deg,#fca5a5,#ef4444);}
.sd-silo.info .sd-silo-fill{background:linear-gradient(180deg,#7dd3fc,#38bdf8);}
.sd-feed-copy{min-width:0;}
.sd-feed-main{display:flex;align-items:baseline;gap:5px;line-height:1;margin-bottom:7px;}
.sd-feed-main span{font-size:30px;font-weight:950;color:#f8fafc;letter-spacing:0;}
.sd-feed-main small{font-size:13px;font-weight:850;color:#94a3b8;}
.sd-feed-days{font-size:14px;font-weight:900;line-height:1.25;margin-bottom:6px;}
.sd-feed-adfi{font-size:12px;font-weight:650;color:#a7bfdc;line-height:1.35;}
.sd-feed-adfi b{color:#dbeafe;}
.sd-feed-label{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:start;}
.sd-feed-label span:last-child{text-align:right;white-space:normal;line-height:1.35;overflow-wrap:anywhere;}
.sd-flock-metrics{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:10px;}
.sd-flock-metrics div{border:1px solid rgba(148,163,184,.14);border-radius:10px;padding:8px 9px;background:rgba(15,23,42,.34);}
.sd-flock-metrics span{display:block;color:#94a3b8;font-size:11px;font-weight:850;text-transform:uppercase;line-height:1.25;margin-bottom:4px;}
.sd-flock-metrics b{display:block;color:#f8fafc;font-size:16px;line-height:1.25;overflow-wrap:anywhere;}
.sd-s-endbatch{background:linear-gradient(90deg,rgba(239,68,68,.22),rgba(245,158,11,.2));color:#fde68a;border:1px solid rgba(245,158,11,.48);}
.sd-s-closed{background:rgba(56,189,248,.14);color:#7dd3fc;border:1px solid rgba(56,189,248,.34);}
.sd-card-closed{border-color:rgba(56,189,248,.22)!important;box-shadow:var(--nm-raised),0 0 0 1px rgba(56,189,248,.08)!important;}
.sd-card-warn::after{
  content:'';position:absolute;inset:0;border-radius:18px;pointer-events:none;
  border:2px solid rgba(245,158,11,.1);animation:sdWarnPulse 1.8s ease-in-out infinite;
}
@keyframes sdWarnPulse{
  0%,100%{opacity:.35;box-shadow:inset 0 0 0 0 rgba(245,158,11,.2);}
  50%{opacity:1;box-shadow:inset 0 0 0 4px rgba(245,158,11,.32);}
}
.sd-detail-table-card .sd-detail-wrap{display:none;}
.sd-detail-table-card.sd-detail-open .sd-detail-wrap{display:block;}
.sd-detail-table-card{padding:14px;margin-top:-2px;}
.sd-detail-table-card .head{margin-bottom:0;}
.sd-detail-table-card.sd-detail-open .head{margin-bottom:12px;}
.sd-detail-toggle{min-height:34px;padding:7px 11px;border-radius:10px;}
.sd-alert-card-compact{padding:14px;}
.sd-alert-card-compact .head{margin-bottom:8px;}
.sd-mini-alert-list{display:grid;gap:8px;}
.sd-mini-alert{border:1px solid rgba(148,163,184,.18);background:rgba(15,23,42,.5);border-radius:10px;padding:9px 10px;color:#dbeafe;font-size:13px;line-height:1.35;}
.sd-mini-alert b{display:inline-flex;min-width:44px;color:#f8fafc;}
.sd-mini-alert span{color:#c4d9f0;}
.sd-mini-alert.warn{border-color:rgba(245,158,11,.38);background:rgba(113,63,18,.16);}
.sd-mini-alert.critical{border-color:rgba(239,68,68,.42);background:rgba(127,29,29,.18);}
.sd-mini-alert.endbatch{border-color:rgba(245,158,11,.5);background:linear-gradient(90deg,rgba(127,29,29,.16),rgba(113,63,18,.16));}
.sd-mini-ok{color:#bbf7d0;border-color:rgba(34,197,94,.25);background:rgba(20,83,45,.16);}
@media(max-width:980px){
  .sd-farm-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
  .sd-panels{grid-template-columns:1fr;}
  .sd-flock-panel{border-left:0;border-bottom:0;border-top:1px solid rgba(255,255,255,.06);}
}
@media(max-width:600px){
  .sd-feed-visual{grid-template-columns:52px minmax(0,1fr);gap:10px;}
  .sd-silo{width:48px;height:98px;}
  .sd-feed-main span{font-size:24px;}
  .sd-feed-label{grid-template-columns:1fr;}
  .sd-feed-label span:last-child{text-align:left;}
}