/* hi-area-dragdrop-v1 • monochrome icons, soft dashboard, individual room borders. */
html[data-page-view="home"] .headline,
html[data-page-view="home"] .headline em { color:#d2d5da!important; }
html[data-page-view="home"] .section-heading h2 {color:#c7cbd1!important;}
html[data-page-view="home"] .stat-num {color:#d6d8de!important;}
html[data-page-view="home"] .subline,
html[data-page-view="home"] .section-heading .sub {color:#9398a1!important;}
html[data-page-view="home"] .stat-label,
html[data-page-view="home"] .area-card-copy strong {color:#c9cbd1!important;}
/* Make *all* room SVGs monochrome like the sidebar labels, not custom per-room ink. */
html .sidebar .area-link .room-icon,
html .areas-grid .area-card .room-icon,
html .filter-row .chip .room-icon,
html .places-grid .place-card .room-icon {
  color:inherit!important;stroke:currentColor!important;stroke-width:.8!important;
  background:transparent!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;filter:none!important;
}
html .sidebar .area-link .room-icon {color:inherit!important;}
html .sidebar .area-link.active .room-icon {color:inherit!important;}
html .areas-grid .area-card .room-icon {color:#c9cbd1!important;}
/* A separate color gradient *border* on each room card, keeping the inside calm. */
html .areas-grid .area-card.area-card--detail {
  border:1px solid transparent!important;
  background:linear-gradient(104deg,rgba(var(--hi-area-rgb),.09) 0%,#1a1b1e 62%) padding-box,
    linear-gradient(120deg,rgba(var(--hi-area-rgb),.88) 0%,rgba(var(--hi-area-rgb),.38) 49%,rgba(var(--hi-area-rgb),.12) 100%) border-box!important;
  box-shadow:none!important;
}
html .areas-grid .area-card.area-card--detail:hover,
html .areas-grid .area-card.area-card--detail:focus-visible {
  background:linear-gradient(104deg,rgba(var(--hi-area-rgb),.15) 0%,#1a1b1e 65%) padding-box,
    linear-gradient(115deg,rgba(var(--hi-area-rgb),1),rgba(var(--hi-area-rgb),.35)) border-box!important;
}
/* Items are movable only in inventory/room lists. Keep product card clicks intact. */
.product-card[data-drag-item]{cursor:grab;}
.product-card.hi-drag-source{opacity:.47;cursor:grabbing;transform:scale(.98)!important;}
.sidebar .area-link.hi-drop-ready,
.filter-row .chip.hi-drop-ready {
  outline:2px solid #b28adf!important;outline-offset:2px;
  box-shadow:0 0 0 3px #6d4daa40,0 0 22px #9164dd55!important;
  background-color:#292039!important;
}
.hi-drag-ghost {
  position:fixed;z-index:99999;pointer-events:none;
  transform:translate(15px,-50%);max-width:min(70vw,260px);
  border:1px solid #a982d1;border-radius:10px;
  padding:10px 14px;color:#e6deef;background:#26202fcf;
  box-shadow:0 9px 28px #0009;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font:500 13px Inter,system-ui,sans-serif;
}
html[data-page-view="items"] .filter-row,
html[data-page-view="low"] .filter-row {
  position:sticky;top:70px;z-index:15;padding:8px 2px;
  background:#111214f2;border-radius:12px;
}
@media(max-width:900px){
 html[data-page-view="items"] .filter-row,
 html[data-page-view="low"] .filter-row {top:56px;}
}
@media(prefers-reduced-motion:reduce){
 .product-card[data-drag-item],.hi-drag-ghost{transition:none!important;animation:none!important;}
}

/* hi-finalize-v1: real per-room border overlays, stable after legacy Dark CSS overrides. */
html .areas-grid .area-card.area-card--detail{
  position:relative!important;isolation:isolate;
  border:1px solid rgba(var(--hi-area-rgb,160,165,179),.58)!important;
  background:linear-gradient(115deg,rgba(var(--hi-area-rgb,160,165,179),.095),#1a1b1e 68%)!important;
  border-radius:15px!important;
  box-shadow:inset 0 0 0 1px rgba(var(--hi-area-rgb,160,165,179),.08)!important;
}
html .areas-grid .area-card.area-card--detail::after{
  content:"";position:absolute;inset:-1px;z-index:2;pointer-events:none;
  padding:2px;border-radius:inherit;
  background:linear-gradient(115deg,
     rgba(var(--hi-area-rgb,160,165,179),1) 0%,
     rgba(var(--hi-area-rgb,160,165,179),.62) 38%,
     rgba(var(--hi-area-rgb,160,165,179),.16) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
html .areas-grid .area-card.area-card--detail:hover::after,
html .areas-grid .area-card.area-card--detail:focus-visible::after{filter:brightness(1.35)}
/* The three KPI cards keep their full-card soft gradients; glyphs now match sidebar text. */
html .stats-grid > .stat-card .stat-icon,
html .stats-grid > .stat-card.danger .stat-icon,
html .stats-grid > .stat-card .stat-icon svg,
html .stats-grid > .stat-card .stat-icon .line-icon{
  color:#bfc2ca!important;stroke:currentColor!important;
}

/* hi-csp-safe-area-palette-v1 — each fixed room has a real CSS color. */
html .areas-grid .area-card--detail[data-area="Bếp"] {--hi-area-rgb:218,100,107;}
html .areas-grid .area-card--detail[data-area="Kho"] {--hi-area-rgb:220,183,100;}
html .areas-grid .area-card--detail[data-area="Nhà tắm"],
html .areas-grid .area-card--detail[data-area="Phòng tắm"] {--hi-area-rgb:107,157,217;}
html .areas-grid .area-card--detail[data-area="Phòng làm việc"] {--hi-area-rgb:91,195,188;}
html .areas-grid .area-card--detail[data-area="Phòng ngủ"] {--hi-area-rgb:213,140,177;}
html .areas-grid .area-card--detail[data-area="Phòng khách"] {--hi-area-rgb:222,143,97;}
html .areas-grid .area-card--detail[data-area="Ban công"] {--hi-area-rgb:112,179,126;}
html .areas-grid .area-card--detail[data-area="Thú cưng"] {--hi-area-rgb:167,141,210;}