
/* V582 - Daily Report visual parity */
:root{
  --v582-bg:#f4f7fb;
  --v582-card:#fff;
  --v582-text:#172033;
  --v582-muted:#6d7788;
  --v582-border:#e7ebf1;
  --v582-radius:14px;
  --v582-shadow:0 6px 24px rgba(26,39,63,.06);
}
.v577-page{
  background:var(--v582-bg)!important;
  min-height:100vh;
  padding:22px 24px 36px!important;
  color:var(--v582-text)!important;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;
}
.v577-page *{box-sizing:border-box}
.v577-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:18px!important;
  margin:0 0 16px!important;
}
.v577-head h1{
  margin:0!important;
  font-size:27px!important;
  line-height:1.2!important;
  letter-spacing:.2px!important;
  color:#14213b!important;
  font-weight:800!important;
}
.v577-head p{
  margin:6px 0 0!important;
  color:var(--v582-muted)!important;
  font-size:13px!important;
}
.v577-head button,
.v577-head .btn,
.v577-topbar button{
  border:1px solid #dbe2eb!important;
  background:#fff!important;
  color:#24324a!important;
  border-radius:9px!important;
  min-height:38px!important;
  padding:0 14px!important;
  font-weight:700!important;
  box-shadow:none!important;
}
.v577-head button:hover,.v577-topbar button:hover{background:#f8fafc!important}
.v577-topbar{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:12px!important;
  padding:11px 13px!important;
  background:#fff!important;
  border:1px solid var(--v582-border)!important;
  border-radius:12px!important;
  box-shadow:var(--v582-shadow)!important;
  margin-bottom:14px!important;
}
.v577-topbar input[type="date"]{
  height:38px!important;border:1px solid #dbe2eb!important;border-radius:9px!important;
  padding:0 11px!important;background:#fff!important;color:#27334a!important;font-weight:700!important;
}
.v577-tabs{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  padding:5px!important;
  margin:0 0 14px!important;
  background:#eaf0f7!important;
  border-radius:11px!important;
  width:max-content!important;
  max-width:100%!important;
}
.v577-tabs button{
  height:34px!important;
  border:0!important;
  border-radius:8px!important;
  padding:0 14px!important;
  background:transparent!important;
  color:#68758a!important;
  font-weight:700!important;
  font-size:12px!important;
}
.v577-tabs button.active,.v577-tabs button[aria-selected="true"]{
  background:#fff!important;
  color:#14213b!important;
  box-shadow:0 2px 8px rgba(26,39,63,.08)!important;
}
.v577-banner{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:20px!important;
  padding:18px 20px!important;
  margin:0 0 16px!important;
  border:1px solid #dfe6ef!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,#ffffff 0%,#f7fafc 100%)!important;
  box-shadow:var(--v582-shadow)!important;
  overflow:hidden!important;
}
.v577-banner:before{
  content:""!important;position:absolute!important;left:0!important;top:0!important;bottom:0!important;width:5px!important;
  background:#24446d!important;
}
.v577-banner h2{
  margin:3px 0 4px!important;font-size:25px!important;color:#17253f!important;font-weight:800!important;
}
.v577-banner span,.v577-banner p,.v577-banner small{color:#68758a!important}
.v577-banner aside{
  text-align:right!important;
  min-width:210px!important;
}
.v577-banner aside strong{
  display:block!important;
  font-size:12px!important;
  letter-spacing:.3px!important;
  color:#2d6a4f!important;
  margin-bottom:4px!important;
}
.v577-banner:after{
  content:"PHÁT SINH SAU 17:30 VẪN ĐƯỢC GHI NHẬN · 00:05 CHỐT CHÍNH THỨC"!important;
  display:block!important;
  flex-basis:100%!important;
  width:100%!important;
  margin-top:2px!important;
  padding:9px 12px!important;
  border:1px solid #f1dfb9!important;
  border-radius:9px!important;
  background:#fffaf0!important;
  color:#7a5b20!important;
  font-size:11px!important;
  font-weight:800!important;
  letter-spacing:.15px!important;
}
.v577-kpis{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  margin-bottom:14px!important;
}
.v577-kpi{
  min-height:118px!important;
  background:#fff!important;
  border:1px solid var(--v582-border)!important;
  border-radius:13px!important;
  padding:15px 16px!important;
  box-shadow:var(--v582-shadow)!important;
}
.v577-kpi small,.v577-kpi span{
  display:block!important;
  color:#738095!important;
  font-size:11px!important;
  font-weight:700!important;
  text-transform:uppercase!important;
  letter-spacing:.25px!important;
}
.v577-kpi strong{
  display:block!important;
  margin-top:10px!important;
  font-size:22px!important;
  line-height:1.15!important;
  color:#17253f!important;
  font-weight:800!important;
  word-break:break-word!important;
}
.v577-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.65fr) minmax(320px,.95fr)!important;
  gap:14px!important;
  align-items:start!important;
}
.v577-card,.v577-chart,.v577-panel,.v577-section{
  background:#fff!important;
  border:1px solid var(--v582-border)!important;
  border-radius:13px!important;
  box-shadow:var(--v582-shadow)!important;
}
.v577-card,.v577-panel,.v577-section{padding:16px!important}
.v577-card h3,.v577-panel h3,.v577-section h3,.v577-chart h3{
  margin:0 0 13px!important;
  color:#17253f!important;
  font-size:14px!important;
  font-weight:800!important;
}
.v577-chart{
  padding:16px!important;
  min-height:310px!important;
}
.v577-chart svg,.v577-chart canvas{max-width:100%!important}
.v577-orders{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:10px!important;
}
.v577-orders>div{
  padding:12px!important;
  border:1px solid #e7ebf1!important;
  background:#fbfcfe!important;
  border-radius:10px!important;
}
.v577-orders strong{font-size:20px!important;color:#17253f!important}
.v577-table{
  width:100%!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  overflow:hidden!important;
}
.v577-table th{
  background:#f7f9fc!important;color:#68758a!important;
  font-size:10px!important;text-transform:uppercase!important;
  letter-spacing:.2px!important;font-weight:800!important;
  padding:10px 11px!important;border-bottom:1px solid #e7ebf1!important;
}
.v577-table td{
  padding:11px!important;border-bottom:1px solid #edf0f4!important;
  color:#2a3549!important;font-size:12px!important;
}
.v577-table tr:last-child td{border-bottom:0!important}
.v577-note textarea{
  width:100%!important;min-height:110px!important;resize:vertical!important;
  border:1px solid #dfe5ed!important;border-radius:9px!important;padding:11px!important;
  font:inherit!important;color:#26334a!important;background:#fff!important;
}
.v577-auto{
  background:linear-gradient(135deg,#172944,#223d63)!important;
  color:#fff!important;border:0!important;
}
.v577-auto h3,.v577-auto strong,.v577-auto p,.v577-auto small{color:#fff!important}
.v577-auto button{
  background:#fff!important;color:#1d3557!important;border:0!important;border-radius:8px!important;
  height:36px!important;padding:0 12px!important;font-weight:800!important;
}
.v577-history .status-final,
.v577-history .final{color:#277a55!important;font-weight:800!important}
.v577-history .status-quick,
.v577-history .quick{color:#b7791f!important;font-weight:800!important}

/* Make generic sections within daily report form the same polished grid */
.v577-page section:not(.v577-banner):not(.v577-kpis){
  border-color:var(--v582-border);
}
@media(max-width:1380px){
  .v577-kpis{grid-template-columns:repeat(4,minmax(150px,1fr))!important}
  .v577-grid{grid-template-columns:minmax(0,1.45fr) minmax(300px,.9fr)!important}
}
@media(max-width:1100px){
  .v577-page{padding:15px!important}
  .v577-head{flex-direction:column!important}
  .v577-head h1{font-size:22px!important}
  .v577-topbar{align-items:stretch!important;flex-direction:column!important}
  .v577-tabs{width:100%!important;overflow:auto!important}
  .v577-banner{align-items:flex-start!important;flex-direction:column!important}
  .v577-banner aside{text-align:left!important;min-width:0!important}
  .v577-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .v577-grid{grid-template-columns:1fr!important}
}
@media(max-width:560px){
  .v577-page{padding:10px!important}
  .v577-kpis{grid-template-columns:1fr!important;gap:9px!important}
  .v577-kpi{min-height:100px!important}
  .v577-kpi strong{font-size:20px!important}
  .v577-orders{grid-template-columns:1fr!important}
  .v577-tabs button{white-space:nowrap!important}
}
@media print{
  .v577-page{background:#fff!important;padding:0!important}
  .v577-head button,.v577-tabs,.v577-topbar button{display:none!important}
  .v577-card,.v577-chart,.v577-panel,.v577-section,.v577-kpi,.v577-banner{
    box-shadow:none!important;break-inside:avoid!important
  }
}
