/* ===========================================================
   An Phước Realty — design tokens
   Ink navy + jade + warm gold, tuned for a Vietnamese
   real-estate inventory tool. One typeface (Inter) end to end
   for consistency, weight/size carry the hierarchy, mono kept for
   property codes & figures.
=========================================================== */
:root{
  --ink:#132A2E;
  --ink-soft:#1D3B40;
  --paper:#F6F4EE;
  --paper-raised:#FFFFFF;
  --line:#E3DFD3;
  --jade:#1F6F5C;
  --jade-dark:#154C3F;
  --jade-tint:#E6EFEA;
  --gold:#B8863B;
  --gold-tint:#F5ECD9;
  --slate:#33392F;
  --slate-soft:#6E7568;
  --blue:#2F6FED;   --blue-tint:#E9F0FE;
  --amber:#C4801B;  --amber-tint:#FBF0DE;
  --violet:#7C5CFC; --violet-tint:#EFEAFE;
  --green:#1F9D62;  --green-tint:#E6F6EE;
  --gray:#8A8F82;   --gray-tint:#EFEEE7;
  --red:#C4483B;
  --radius-s:6px;
  --radius-m:10px;
  --radius-l:16px;
  --shadow-card: 0 1px 2px rgba(19,42,46,.06), 0 8px 24px -16px rgba(19,42,46,.25);
  --shadow-pop: 0 12px 40px -12px rgba(19,42,46,.35);
  font-synthesis: none;
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
select, input, textarea, button{min-width:0; max-width:100%;}
html,body{height:100%; overflow-x:hidden;}
body{
  margin:0;
  background:var(--paper);
  color:var(--slate);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Inter',system-ui,-apple-system,sans-serif; font-weight:700; color:var(--ink); margin:0; letter-spacing:-0.015em;}
.mono, .code, .table td strong.code, td strong{font-variant-numeric:tabular-nums;}
button, input, select{font-family:inherit; font-size:14px;}
button{cursor:pointer;}
:focus-visible{outline:2px solid var(--jade); outline-offset:2px;}

/* ---------- shell ---------- */
.app-shell{
  display:grid;
  grid-template-columns:260px 1fr;
  min-height:100vh;
}

/* ---------- sidebar ---------- */
.sidebar{
  background:var(--ink);
  color:#EAF2EE;
  display:flex;
  flex-direction:column;
  padding:22px 16px;
  position:sticky; top:0; height:100vh;
}
.brand{display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:4px 8px 22px;}
.brand-logo-plate{
  background:#fff; border-radius:12px; padding:10px 14px; display:inline-flex; align-items:center;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.brand-logo{display:block; width:148px; height:auto;}
.brand-subtitle{font-family:'Inter',sans-serif; font-weight:400; font-size:11.5px; color:#9FB8AF; padding-left:2px;}

nav{margin-top:6px;}
.nav-label{
  font-size:10.5px; letter-spacing:.09em; font-weight:600; color:#6F8B81;
  margin:18px 10px 8px; text-transform:uppercase;
}
.nav-item{
  width:100%; display:flex; align-items:center; gap:10px;
  background:transparent; border:none; color:#C7D9D2;
  padding:9px 10px; border-radius:var(--radius-s); font-size:13.5px; font-weight:500;
  text-align:left; margin-bottom:2px; transition:background .12s ease, color .12s ease;
}
.nav-ico{width:16px; text-align:center; opacity:.85; font-size:13px;}
.nav-item:hover{background:rgba(255,255,255,.06); color:#fff;}
.nav-item.active{background:var(--jade); color:#fff;}
.nav-item b{
  margin-left:auto; background:rgba(255,255,255,.14); color:#fff;
  font-size:11px; font-weight:600; padding:1px 7px; border-radius:20px;
}
.nav-item b.warm{background:var(--gold); color:#241800;}

.side-help{
  margin-top:auto; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-m); padding:14px; font-size:12.5px; color:#B9CCC4;
}
.side-help strong{display:block; color:#fff; font-size:13px; margin-bottom:3px;}
.side-help button{
  margin-top:10px; background:none; border:none; color:var(--gold); font-weight:600;
  font-size:12.5px; padding:0;
}
.profile{
  margin-top:16px; display:flex; align-items:center; gap:10px;
  border-top:1px solid rgba(255,255,255,.09); padding-top:16px;
}
.avatar{
  width:32px; height:32px; border-radius:50%; background:var(--jade-dark);
  color:#fff; font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.profile div{line-height:1.3;}
.profile strong{font-size:13px; color:#fff; display:block;}
.profile small{font-size:11.5px; color:#8FA79D;}
.profile button{margin-left:auto; background:none; border:none; color:#8FA79D; font-size:16px;}

/* ---------- workspace ---------- */
.workspace{padding:28px 34px 60px; min-width:0;}
header{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:22px;}
header h1{font-size:26px; font-weight:600;}
header p{margin:4px 0 0; color:var(--slate-soft); font-size:13.5px;}
.header-actions{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.icon-button{
  position:relative; width:38px; height:38px; border-radius:var(--radius-s);
  border:1px solid var(--line); background:var(--paper-raised); font-size:15px; color:var(--slate);
}
.icon-button i{
  position:absolute; top:8px; right:9px; width:6px; height:6px; border-radius:50%; background:var(--red);
}
button.primary{
  background:var(--jade); color:#fff; border:none; border-radius:var(--radius-s);
  padding:10px 16px; font-weight:600; font-size:13.5px; box-shadow:var(--shadow-card);
}
button.primary:hover{background:var(--jade-dark);}
button.secondary{
  background:var(--paper-raised); border:1px solid var(--line); color:var(--slate);
  border-radius:var(--radius-s); padding:10px 16px; font-weight:600; font-size:13.5px;
}

/* ---------- stat cards ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px;}
.stats article{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:16px 16px 15px; display:flex; gap:12px; align-items:flex-start; box-shadow:var(--shadow-card);
}
.stat-icon{
  width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-size:15px; flex-shrink:0;
}
.blue-bg{background:var(--blue-tint); color:var(--blue);}
.cyan-bg{background:var(--jade-tint); color:var(--jade);}
.amber-bg{background:var(--amber-tint); color:var(--amber);}
.green-bg{background:var(--green-tint); color:var(--green);}
.stats small{display:block; font-size:10.5px; letter-spacing:.06em; color:var(--slate-soft); font-weight:600;}
.stats strong{display:block; font-family:'Inter',sans-serif; font-size:22px; font-weight:800; letter-spacing:-0.01em; color:var(--ink); margin:2px 0;}
.stats em{font-style:normal; font-size:11.5px; color:var(--jade);}

/* ---------- panel / toolbar ---------- */
.panel{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-l);
  box-shadow:var(--shadow-card); overflow:hidden;
}
.panel-head{padding:18px 20px 4px;}
.panel-head h2{font-size:17px; font-weight:600;}
.toolbar{
  display:flex; flex-wrap:wrap; gap:10px; padding:18px 20px 14px; border-bottom:1px solid var(--line);
}
.toolbar > *{min-width:0;}
.search{
  display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:var(--radius-s);
  padding:0 12px; flex:1 1 240px; min-width:180px; background:var(--paper);
}
.search span{color:var(--slate-soft); font-size:14px;}
.search input{border:none; background:none; padding:9px 0; width:100%; color:var(--slate); min-width:0;}
.search input:focus{outline:none;}
.toolbar select, .toolbar .filter-button{flex:1 1 140px; max-width:220px;}
select, .filter-button{
  border:1px solid var(--line); border-radius:var(--radius-s); background:var(--paper-raised);
  padding:9px 12px; color:var(--slate); font-weight:500; text-overflow:ellipsis;
}
.filter-button{background:var(--paper); font-weight:600; color:var(--slate); flex:0 0 auto;}
.filter-button.open{background:var(--jade); color:#fff; border-color:var(--jade);}

.quick-filters{
  display:flex; align-items:center; gap:8px; padding:12px 20px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); background:var(--paper);
}
.advanced-filters{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px; padding:16px 20px;
  background:var(--jade-tint); border-bottom:1px solid var(--line);
}
.advanced-filters label{display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:600; color:var(--slate); min-width:150px; flex:1 1 160px;}
.advanced-filters label .hint{display:block; font-weight:400; color:var(--slate-soft); font-size:11px; margin-top:1px;}
.advanced-filters select, .advanced-filters input{
  border:1px solid var(--line); border-radius:var(--radius-s); padding:9px 11px; background:var(--paper-raised); color:var(--slate);
}
.advanced-filters button.secondary{flex:0 0 auto; height:38px; align-self:flex-end;}
.chip{
  border:1px solid var(--line); background:var(--paper-raised); border-radius:20px;
  padding:6px 13px; font-size:12.5px; font-weight:600; color:var(--slate);
}
.chip.warning{color:var(--amber); border-color:#EBD3A2; background:var(--amber-tint);}
.chip.active{background:var(--jade); border-color:var(--jade); color:#fff;}
.chip.warning.active{background:var(--amber); border-color:var(--amber); color:#fff;}
.quick-filters span{margin-left:auto; font-size:12.5px; color:var(--slate-soft);}

/* ---------- table ---------- */
.table-wrap{overflow-x:auto;}
table{width:100%; border-collapse:collapse; min-width:820px;}
thead th{
  text-align:left; font-size:10.5px; letter-spacing:.07em; color:var(--slate-soft);
  font-weight:700; padding:12px 20px; border-bottom:1px solid var(--line); white-space:nowrap;
}
tbody td{padding:14px 20px; border-bottom:1px solid var(--line); vertical-align:top; font-size:13.5px;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--paper);}
td strong.code{
  font-family:'Inter',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:0.01em; color:var(--ink); display:block;
}
td .intent{
  display:inline-block; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:5px; margin:4px 0;
}
.intent.sale{background:var(--jade-tint); color:var(--jade-dark);}
.intent.rent{background:var(--gold-tint); color:#7A551E;}
td small{display:block; color:var(--slate-soft); font-size:12px; line-height:1.5;}
td strong{color:var(--ink); font-weight:600;}
.status{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:20px;}
.status.blue{background:var(--blue-tint); color:var(--blue);}
.status.amber{background:var(--amber-tint); color:var(--amber);}
.status.violet{background:var(--violet-tint); color:var(--violet);}
.status.green{background:var(--green-tint); color:var(--green);}
.status.gray{background:var(--gray-tint); color:#6B7167;}

.status-select{
  appearance:none; -webkit-appearance:none;
  display:inline-flex; align-items:center;
  font-family:inherit; font-size:13.5px; font-weight:700;
  padding:6px 30px 6px 12px; border-radius:20px; border:1px solid transparent;
  cursor:pointer; margin-top:2px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23555' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.status-select:focus{outline:2px solid var(--jade); outline-offset:2px;}
.status-select.blue{background-color:var(--blue-tint); color:var(--blue);}
.status-select.amber{background-color:var(--amber-tint); color:var(--amber);}
.status-select.violet{background-color:var(--violet-tint); color:var(--violet);}
.status-select.green{background-color:var(--green-tint); color:var(--green);}
.status-select.gray{background-color:var(--gray-tint); color:#6B7167;}
.person{display:flex; align-items:center; gap:8px;}
.person span{
  width:26px; height:26px; border-radius:50%; background:var(--jade-tint); color:var(--jade-dark);
  font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.stale{color:var(--red) !important;}
.view-button{
  border:1px solid var(--line); background:var(--paper-raised); border-radius:var(--radius-s);
  padding:6px 13px; font-weight:600; font-size:12.5px; color:var(--ink);
}
.view-button:hover{border-color:var(--jade); color:var(--jade);}

.pagination{
  display:flex; align-items:center; justify-content:space-between; padding:16px 20px; flex-wrap:wrap; gap:10px;
}
.pagination span{font-size:12.5px; color:var(--slate-soft);}
.pagination div{display:flex; gap:6px;}
.pagination button{
  min-width:30px; height:30px; border-radius:7px; border:1px solid var(--line); background:var(--paper-raised);
  color:var(--slate); font-weight:600; font-size:12.5px;
}
.pagination button.current{background:var(--jade); border-color:var(--jade); color:#fff;}
.pagination button:disabled{opacity:.4; cursor:default;}

/* ---------- empty states ---------- */
.empty-state{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:60px 40px; text-align:center; max-width:480px; margin:40px auto; box-shadow:var(--shadow-card);
}
.empty-ico{
  display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px;
  border-radius:12px; background:var(--jade-tint); color:var(--jade); font-size:20px; margin-bottom:16px;
}
.empty-state h2{font-size:18px; margin-bottom:8px;}
.empty-state p{color:var(--slate-soft); font-size:13.5px; line-height:1.6; margin:0 0 18px;}

.intent-split-bar{height:14px; border-radius:20px; background:var(--gold-tint); overflow:hidden; margin-bottom:12px;}
.intent-split-fill{height:100%; background:var(--jade); border-radius:20px 0 0 20px;}
.intent-split-legend{display:flex; gap:24px; flex-wrap:wrap; font-size:13px; color:var(--slate);}
.intent-split-legend .dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px;}
.intent-split-legend .dot.sale{background:var(--jade);}
.intent-split-legend .dot.rent{background:var(--gold);}
.activity-feed{list-style:none; margin:0; padding:6px 20px 20px;}
.activity-feed li{
  display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-size:13px;
}
.activity-feed li:last-child{border-bottom:none;}
.activity-feed time{color:var(--slate-soft); font-size:12px; white-space:nowrap; margin-left:auto;}

.project-grid, .staff-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; padding:6px 20px 22px;}
.project-grid > div, .staff-grid > div{
  border:1px solid var(--line); border-radius:var(--radius-m); padding:14px; background:var(--paper);
}
.project-grid strong, .staff-grid strong{display:block; color:var(--ink); font-size:14px; margin-bottom:4px;}
.project-grid small, .staff-grid small{color:var(--slate-soft); font-size:12px;}

/* ---------- deals & revenue ---------- */
.deals-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px;}
.eyebrow{margin:0; font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--gold); text-transform:uppercase;}
.deals-title{font-size:24px; margin:4px 0 0;}
.deals-sub{margin:4px 0 0; font-size:13.5px; color:var(--slate-soft);}
.deals-head-actions{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.deals-head-actions select{border:1px solid var(--line); border-radius:var(--radius-s); padding:9px 12px; background:var(--paper-raised);}
.deals-banner{
  background:var(--blue-tint); border:1px solid #C6D9FB; color:#1E4FBF; border-radius:var(--radius-m);
  padding:14px 18px; font-size:13px; line-height:1.6; margin-bottom:18px;
}
.deals-banner strong{color:#12369A;}
.stats article.highlight{background:var(--green-tint); border-color:#B9E4CD;}
.sale-performance{
  display:flex; gap:0; background:var(--gold-tint); border:1px solid #EAD9AE; border-radius:var(--radius-l);
  padding:18px 22px; margin-bottom:18px; flex-wrap:wrap; align-items:flex-start;
}
.sale-performance-label{
  font-size:12.5px; font-weight:700; color:var(--gold); width:110px; flex-shrink:0; padding-top:2px;
}
.sale-performance-list{display:flex; flex-wrap:wrap; gap:34px; flex:1;}
.sale-performance-list div{min-width:150px;}
.sale-performance-list strong{display:block; font-size:14px; color:var(--ink); margin-bottom:2px;}
.sale-performance-list .deal-count{display:block; font-size:15px; font-weight:700; color:var(--ink); margin-bottom:2px; font-family:'Inter',sans-serif;}
.sale-performance-list small{color:var(--slate-soft); font-size:12px;}
#deals-table-body td strong.deal-code{color:var(--blue); font-family:'Inter',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:0.01em;}
#deals-table-body td .sale-closed{font-weight:700; color:var(--ink);}
#deals-table-body td .commission{color:var(--green); font-weight:700;}
.modal-overlay{
  position:fixed; inset:0; background:rgba(19,42,46,.45); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:50;
}
.modal{
  background:var(--paper-raised); border-radius:var(--radius-l); width:100%; max-width:560px;
  box-shadow:var(--shadow-pop); max-height:90vh; overflow:auto;
}
.modal.modal-lg{max-width:680px;}
.modal-head{display:flex; align-items:flex-start; justify-content:space-between; padding:22px 24px 18px; border-bottom:1px solid var(--line);}
.modal-head h2{font-size:19px;}
.modal-sub{margin:4px 0 0; font-size:13px; color:var(--slate-soft);}
.modal-close{background:var(--paper); border:none; width:30px; height:30px; border-radius:50%; font-size:14px; color:var(--slate-soft); flex-shrink:0;}
#product-form{padding:22px 24px 24px;}
#deal-form{padding:22px 24px 24px;}
.form-section{
  font-size:13px; font-weight:700; color:var(--ink); margin:0 0 14px; padding-top:4px;
}
.form-section:not(:first-child){margin-top:22px; padding-top:18px; border-top:1px solid var(--line);}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px 16px;}
.form-grid label{display:flex; flex-direction:column; gap:7px; font-size:12.5px; font-weight:600; color:var(--slate); min-width:0;}
.form-grid .span-2{grid-column:1 / -1;}
.form-grid label .hint{display:block; font-weight:400; color:var(--slate-soft); text-transform:none; letter-spacing:0; margin-top:1px; font-size:11.5px;}
.form-grid input, .form-grid select, .form-grid textarea{
  border:1.5px solid #C4BEAC; border-radius:var(--radius-s); padding:11px 12px; font-weight:400; color:var(--slate);
  background:var(--paper-raised); font-family:inherit; font-size:13.5px; transition:border-color .12s ease, box-shadow .12s ease;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus{
  outline:none; border-color:var(--jade); box-shadow:0 0 0 3px var(--jade-tint);
}
.form-grid input.auto-calc{background:var(--gold-tint); border-color:#EAD9AE;}
.form-grid textarea{resize:vertical;}
.form-grid select:disabled{background:var(--paper); color:var(--slate-soft); cursor:not-allowed;}
.form-grid .ward-status{min-height:14px;}
.form-grid .ward-status.loading{color:var(--jade);}
.form-grid .ward-status.error{color:var(--amber);}
.form-grid .ward-custom-input{margin-top:8px;}
.deal-type-badge{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:2px 0 6px; padding:10px 14px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-m);
}
.deal-type-badge .tag{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:12.5px; font-weight:700; padding:6px 13px; border-radius:20px; flex-shrink:0;
}
.deal-type-badge .tag::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex-shrink:0;}
.deal-type-badge .tag.sale{background:var(--jade-tint); color:var(--jade-dark);}
.deal-type-badge .tag.rent{background:var(--gold-tint); color:#7A551E;}
.deal-type-badge .project{font-size:12.5px; color:var(--slate-soft); line-height:1.5;}

.price-flow{
  display:flex; align-items:stretch; gap:10px; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-m); padding:16px; margin-bottom:4px; flex-wrap:wrap;
}
.price-flow-item{flex:1 1 140px; min-width:120px; display:flex; flex-direction:column; gap:6px;}
.price-flow-item label{font-size:11.5px; font-weight:700; color:var(--slate-soft); text-transform:uppercase; letter-spacing:.03em;}
.price-flow-item input{
  border:1.5px solid var(--line); border-radius:var(--radius-s); padding:10px 11px; font-size:15px; font-weight:600;
  color:var(--ink); background:var(--paper-raised); font-family:'IBM Plex Mono',monospace;
}
.price-flow-item input:focus{outline:none; border-color:var(--jade); box-shadow:0 0 0 3px var(--jade-tint);}
.price-flow-item small{font-size:11px; color:var(--slate-soft);}
.price-flow-item.highlight input{background:var(--gold-tint); border-color:#EAD9AE; color:#7A551E;}
.price-flow-item.highlight small{color:#9A7A34; font-weight:600;}
.price-flow-arrow{
  display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--slate-soft);
  font-weight:700; flex:0 0 auto; padding-top:22px;
}
@media (max-width:560px){
  .price-flow{flex-direction:column;}
  .price-flow-arrow{transform:rotate(90deg); padding:0;}
}
.checkbox-row{
  flex-direction:row !important; align-items:center; gap:9px !important; font-weight:500 !important; color:var(--slate) !important;
}
.checkbox-row input{width:16px; height:16px; accent-color:var(--jade);}
.uploader{
  border:1.5px dashed var(--line); border-radius:var(--radius-m); background:var(--paper);
  padding:26px 16px; text-align:center; cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.uploader:hover, .uploader.drag{border-color:var(--jade); background:var(--jade-tint);}
.uploader-plus{
  display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center;
  border-radius:50%; background:var(--jade-tint); color:var(--jade); font-size:16px; margin-bottom:8px;
}
.uploader strong{display:block; font-size:13.5px; color:var(--ink); font-weight:600;}
.uploader small{display:block; font-size:12px; color:var(--slate-soft); margin-top:2px;}
.uploader-preview{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; justify-content:center;}
.uploader-preview img{width:56px; height:56px; object-fit:cover; border-radius:8px; border:1px solid var(--line);}
.uploader-preview span{
  font-size:11px; background:var(--paper-raised); border:1px solid var(--line); border-radius:6px;
  padding:4px 8px; color:var(--slate-soft);
}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:24px; padding-top:18px; border-top:1px solid var(--line);}

.detail-body{padding:20px 24px 6px;}
.detail-price-box{
  background:var(--jade-tint); border-radius:var(--radius-m); padding:16px 18px; display:flex; gap:28px; margin-bottom:20px; flex-wrap:wrap;
}
.detail-price-box div strong{display:block; font-family:'Inter',sans-serif; font-weight:800; letter-spacing:-0.01em; font-size:19px; color:var(--jade-dark);}
.detail-price-box div small{color:var(--slate-soft); font-size:11.5px; text-transform:uppercase; letter-spacing:.04em;}
.detail-owner-warn{color:var(--red); font-size:12px; font-weight:600; margin-top:4px;}
.detail-owner-ok{color:var(--jade-dark); font-size:12px; font-weight:600; margin-top:4px;}

.detail-section{margin-bottom:14px; border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden;}
.detail-section-head{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; font-weight:700; color:var(--ink);
  background:var(--paper); padding:10px 14px; border-bottom:1px solid var(--line);
}
.detail-section-body{padding:12px 14px; font-size:13.5px; color:var(--slate); line-height:1.6;}
.section-hint{font-size:11px; font-weight:400; color:var(--slate-soft);}
.internal-tag{
  font-size:10px; font-weight:700; color:#9A5B1E; background:var(--amber-tint); border:1px solid #EAD0A0;
  padding:2px 8px; border-radius:10px; text-transform:uppercase; letter-spacing:.03em;
}
.detail-section.internal .detail-section-head{background:#FBF6EC;}
.detail-facts{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; padding:14px;}
.detail-facts > div{min-width:0;}
.detail-facts small{display:block; font-size:11px; color:var(--slate-soft); text-transform:uppercase; letter-spacing:.03em; margin-bottom:3px;}
.detail-facts strong{font-size:13.5px; color:var(--ink); font-weight:600;}
.detail-meta-row{display:flex; gap:20px; flex-wrap:wrap; font-size:12px; color:var(--slate-soft); padding:6px 2px 4px;}
.detail-notes{background:var(--paper); border-top:0; border-radius:0; padding:12px 14px; font-size:13.5px; color:var(--slate); line-height:1.6;}
.detail-section .detail-notes{margin-bottom:0;}
.detail-notes.empty{color:var(--slate-soft); font-style:italic;}
.detail-gallery{padding:12px 14px; display:flex; flex-wrap:wrap; gap:10px;}
.map-link{display:inline-block; margin-top:5px; font-size:12.5px; font-weight:600; color:var(--jade); text-decoration:none;}
.map-link:hover{text-decoration:underline;}
.gallery-item{position:relative; width:92px; height:92px; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:var(--paper);}
.gallery-item img, .gallery-item video{width:100%; height:100%; object-fit:cover; display:block;}
.gallery-download{
  position:absolute; bottom:4px; right:4px; width:22px; height:22px; border-radius:50%;
  background:rgba(19,42,46,.75); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:11px; text-decoration:none;
}
.detail-actions{flex-wrap:wrap;}
.detail-actions .spacer{flex:1;}
button.danger{
  background:#FBEBE8; color:var(--red); border:1px solid #F3C9C1; border-radius:var(--radius-s);
  padding:10px 16px; font-weight:600; font-size:13.5px;
}
button.danger:hover{background:#F6D8D2;}
.role-switch{
  margin-top:10px; display:flex; flex-direction:column; gap:6px;
  font-size:11.5px; color:#9FB8AF; border-top:1px solid rgba(255,255,255,.09); padding-top:10px;
}
.role-switch select{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#EAF2EE;
  border-radius:8px; padding:7px 9px; font-size:12px; font-weight:600; width:100%;
}
.role-switch select option{color:#111; background:#fff;}
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:var(--radius-m);
  font-size:13.5px; font-weight:500; box-shadow:var(--shadow-pop); z-index:60;
}

/* ---------- thông báo ---------- */
.pending-badge{
  margin-left:6px; background:var(--red); color:#fff; font-size:10.5px; font-weight:700;
  padding:1px 6px; border-radius:20px;
}
.notif-wrap{position:relative;}
.notif-panel{
  position:absolute; top:46px; right:0; width:300px; background:var(--paper-raised); border:1px solid var(--line);
  border-radius:var(--radius-m); box-shadow:var(--shadow-pop); z-index:70; overflow:hidden;
}
.notif-panel-head{
  display:flex; align-items:center; gap:8px; padding:12px 14px; font-weight:700; font-size:13px; color:var(--ink);
  border-bottom:1px solid var(--line);
}
.notif-count-pill{background:var(--red); color:#fff; font-size:11px; font-weight:700; padding:1px 7px; border-radius:20px;}
.notif-list{max-height:280px; overflow-y:auto;}
.notif-item{padding:10px 14px; border-bottom:1px solid var(--line); font-size:12.5px; cursor:pointer;}
.notif-item:hover{background:var(--paper);}
.notif-item:last-child{border-bottom:none;}
.notif-item strong{color:var(--ink);}
.notif-item small{display:block; color:var(--slate-soft); margin-top:2px;}
.notif-empty{padding:20px 14px; text-align:center; color:var(--slate-soft); font-size:12.5px;}

.deals-pending-banner{
  background:var(--gold-tint); border:1px solid #EAD9AE; color:#7A551E; border-radius:var(--radius-m);
  padding:12px 16px; font-size:13px; margin-bottom:16px;
}
.approval-badge{display:inline-block; font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap;}
.approval-badge.gray{background:var(--gray-tint); color:#6B7167;}
.approval-badge.green{background:var(--green-tint); color:var(--green);}
.approval-badge.red{background:#FBEBE8; color:var(--red);}
.approval-actions{display:flex; gap:6px; margin-top:6px;}
.approval-actions button{
  border-radius:6px; padding:4px 9px; font-size:11px; font-weight:700; border:1px solid transparent;
}
.approve-btn{background:var(--jade); color:#fff;}
.reject-btn{background:#FBEBE8; color:var(--red); border-color:#F3C9C1;}
tr.deal-row{cursor:pointer;}
tr.deal-row:hover{background:var(--jade-tint);}
tr.deal-row-pending{background:#FFFBF2;}
tr.deal-row-rejected{opacity:.6;}
tr.deal-row.row-flash{animation:rowFlash 1.6s ease;}
@keyframes rowFlash{
  0%{background:var(--gold-tint);}
  100%{background:transparent;}
}
.approve-btn-lg, .reject-btn-lg{
  border-radius:var(--radius-s); padding:10px 18px; font-weight:700; font-size:13.5px; border:1px solid transparent;
}
.approve-btn-lg{background:var(--jade); color:#fff;}
.approve-btn-lg:hover{background:var(--jade-dark);}
.reject-btn-lg{background:#FBEBE8; color:var(--red); border-color:#F3C9C1;}
.reject-btn-lg:hover{background:#F6D8D2;}

/* ---------- màn hình đăng nhập ---------- */
.login-screen{
  position:fixed; inset:0; background:var(--paper); z-index:200;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.login-card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-l);
  box-shadow:var(--shadow-pop); padding:36px 32px; width:100%; max-width:380px; text-align:center;
}
.login-card h1{font-size:19px; margin:0 0 4px;}
.login-sub{font-size:13px; color:var(--slate-soft); margin:0 0 22px;}
#login-form{text-align:left;}
#login-form label{display:block; font-size:12.5px; font-weight:600; color:var(--slate); margin-bottom:6px; margin-top:14px;}
#login-form input{
  width:100%; border:1.5px solid var(--line); border-radius:var(--radius-s); padding:11px 12px;
  font-size:13.5px; font-family:inherit; background:var(--paper-raised);
}
#login-form input:focus{outline:none; border-color:var(--jade); box-shadow:0 0 0 3px var(--jade-tint);}
.login-msg{margin-top:14px; font-size:12.5px; padding:9px 12px; border-radius:8px; background:#FBEBE8; color:var(--red);}
.login-footnote{font-size:11.5px; color:var(--slate-soft); margin:18px 0 0;}

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .app-shell{grid-template-columns:1fr;}
  .sidebar{position:relative; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px;}
  .sidebar nav{display:flex; flex-wrap:wrap; margin-top:0;}
  .side-help{display:none;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .workspace{padding:20px;}
}
@media (max-width: 560px){
  .stats{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
}