/* V10.0.17 - Notification-safe UX + KPI grid visual polish
   Loaded last to normalize prior UI layers. */
:root{
  --hsa-bg:#f6f8fb;
  --hsa-card:#ffffff;
  --hsa-line:#e5e9f0;
  --hsa-line-strong:#d6deea;
  --hsa-text:#0f172a;
  --hsa-muted:#64748b;
  --hsa-title:#0f3b82;
  --hsa-title-soft:#eaf2ff;
  --hsa-title-soft-2:#eefdf5;
  --hsa-title-soft-3:#fff7ed;
  --hsa-title-soft-4:#f5f3ff;
  --hsa-green:#047857;
  --hsa-orange:#b45309;
  --hsa-purple:#6d28d9;
  --hsa-red:#be123c;
  --hsa-shadow:0 10px 26px rgba(15,23,42,.06);
  --hsa-radius:18px;
}
html,body{max-width:100%;overflow-x:hidden;background:var(--hsa-bg)!important;}
body,.content,.main,.card,.table-wrap,.form-panel,.kpi-grid,.grid,.dashboard-admin-grid{min-width:0!important;max-width:100%!important;}
.content{gap:18px!important;padding:24px!important;}
.card,.form-panel,.table-wrap,.login-card{border:1px solid var(--hsa-line)!important;border-radius:var(--hsa-radius)!important;box-shadow:var(--hsa-shadow)!important;background:var(--hsa-card)!important;}
.card{padding:18px!important;overflow:hidden!important;}
.card-head{gap:12px!important;margin-bottom:14px!important;align-items:center!important;}
.card-head h2{font-size:17px!important;line-height:1.25!important;color:var(--hsa-text)!important;}
.card-head p{font-size:12px!important;line-height:1.4!important;color:var(--hsa-muted)!important;}

/* Toast/notification system - app style, never raw JSON on screen */
.toast,.hsa-toast{
  position:fixed!important;left:50%!important;right:auto!important;bottom:26px!important;top:auto!important;transform:translateX(-50%) translateY(0)!important;
  width:min(560px,calc(100vw - 28px))!important;z-index:99999!important;
  display:flex!important;align-items:flex-start!important;gap:11px!important;
  padding:13px 15px!important;border-radius:18px!important;border:1px solid rgba(37,99,235,.25)!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;color:#172033!important;
  box-shadow:0 18px 45px rgba(15,23,42,.22)!important;font-size:13px!important;line-height:1.4!important;font-weight:500!important;
  white-space:normal!important;overflow-wrap:anywhere!important;max-height:42vh!important;overflow:auto!important;
}
.toast[hidden],.hsa-toast[hidden]{display:none!important;}
.toast:before,.hsa-toast:before{content:"✓";display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border-radius:999px;background:#dcfce7;color:#15803d;font-weight:800;font-size:13px;}
.toast.danger,.hsa-toast.danger{border-color:rgba(225,29,72,.28)!important;background:linear-gradient(180deg,#fff,#fff6f7)!important;color:#7f1d1d!important;}
.toast.danger:before,.hsa-toast.danger:before{content:"!";background:#ffe4e6;color:#e11d48;}
.toast.warning,.hsa-toast.warning{border-color:rgba(245,158,11,.35)!important;background:linear-gradient(180deg,#fff,#fffbeb)!important;color:#78350f!important;}
.toast.warning:before,.hsa-toast.warning:before{content:"!";background:#fef3c7;color:#b45309;}
.toast.info,.hsa-toast.info{border-color:rgba(14,165,233,.28)!important;background:linear-gradient(180deg,#fff,#f0f9ff)!important;color:#0c4a6e!important;}
.toast.info:before,.hsa-toast.info:before{content:"i";background:#e0f2fe;color:#0369a1;}

/* KPI GRID - title strip + body are visually separated */
.kpi-grid{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important;align-items:stretch!important;
}
.kpi-grid .kpi,.kpi{
  position:relative!important;display:flex!important;flex-direction:column!important;gap:0!important;
  padding:0!important;min-height:126px!important;overflow:hidden!important;border-radius:18px!important;
  border:1px solid var(--hsa-line)!important;background:#fff!important;box-shadow:0 10px 24px rgba(15,23,42,.055)!important;
}
.kpi-grid .kpi span,.kpi > span:first-child{
  display:flex!important;align-items:center!important;min-height:42px!important;width:100%!important;
  padding:10px 13px!important;background:linear-gradient(135deg,var(--hsa-title-soft),#f8fbff)!important;color:var(--hsa-title)!important;
  border-bottom:1px solid #dbeafe!important;font-size:11.5px!important;line-height:1.25!important;font-weight:750!important;
  text-transform:uppercase!important;letter-spacing:.025em!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
.kpi-grid .kpi:nth-child(4n+2) span,.kpi-grid .kpi:nth-child(4n+2)>span:first-child{background:linear-gradient(135deg,var(--hsa-title-soft-2),#fbfffd)!important;color:var(--hsa-green)!important;border-bottom-color:#bbf7d0!important;}
.kpi-grid .kpi:nth-child(4n+3) span,.kpi-grid .kpi:nth-child(4n+3)>span:first-child{background:linear-gradient(135deg,var(--hsa-title-soft-3),#fffdf8)!important;color:var(--hsa-orange)!important;border-bottom-color:#fed7aa!important;}
.kpi-grid .kpi:nth-child(4n+4) span,.kpi-grid .kpi:nth-child(4n+4)>span:first-child{background:linear-gradient(135deg,var(--hsa-title-soft-4),#fdfcff)!important;color:var(--hsa-purple)!important;border-bottom-color:#ddd6fe!important;}
.kpi-grid .kpi strong,.kpi > strong{
  display:block!important;padding:13px 13px 5px!important;margin:0!important;color:#0f172a!important;font-size:22px!important;line-height:1.12!important;
  font-weight:800!important;letter-spacing:-.025em!important;overflow-wrap:anywhere!important;word-break:break-word!important;min-width:0!important;
}
.kpi-grid .kpi small,.kpi > small{
  display:block!important;padding:0 13px 13px!important;margin-top:auto!important;color:var(--hsa-muted)!important;font-size:11.5px!important;line-height:1.35!important;
  font-weight:450!important;overflow-wrap:anywhere!important;word-break:break-word!important;
}
.kpi-grid .kpi:after{content:"";position:absolute;right:12px;top:12px;width:7px;height:7px;border-radius:999px;background:currentColor;opacity:.18;}

/* KPI-like mini statistic grids */
.summary-grid,.stats-grid,.mini-grid,.dashboard-mini-grid,.metric-strip,.input-section-stats,.edit-detail-summary{
  display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;gap:12px!important;min-width:0!important;max-width:100%!important;
}
.summary-grid>*,.stats-grid>*,.mini-grid>*,.dashboard-mini-grid>*,.metric-strip>*,.input-section-stats>*,.edit-detail-summary>*{
  min-width:0!important;border:1px solid var(--hsa-line)!important;border-radius:16px!important;background:#fff!important;padding:0!important;overflow:hidden!important;box-shadow:0 8px 18px rgba(15,23,42,.045)!important;
}
.summary-grid span,.stats-grid span,.mini-grid span,.dashboard-mini-grid span,.metric-strip span,.input-section-stats span,.edit-detail-summary span{
  display:flex!important;align-items:center!important;min-height:34px!important;padding:8px 10px!important;background:#f0f7ff!important;color:#0f3b82!important;border-bottom:1px solid #dbeafe!important;font-weight:750!important;font-size:11px!important;line-height:1.2!important;letter-spacing:.015em!important;
}
.summary-grid strong,.stats-grid strong,.mini-grid strong,.dashboard-mini-grid strong,.metric-strip b,.input-section-stats b,.edit-detail-summary b{
  display:block!important;padding:10px!important;margin:0!important;color:#0f172a!important;font-size:15px!important;line-height:1.18!important;font-weight:800!important;overflow-wrap:anywhere!important;word-break:break-word!important;
}

/* Clean desktop form/tables */
label{font-weight:500!important;color:#475569!important;}
input,select,textarea{
  border:1px solid #dbe3ef!important;border-radius:13px!important;background:#fff!important;color:#0f172a!important;font-weight:450!important;box-shadow:none!important;
}
input:focus,select:focus,textarea:focus{outline:0!important;border-color:#60a5fa!important;box-shadow:0 0 0 4px rgba(96,165,250,.16)!important;}
.inline-filter,.form-grid{min-width:0!important;max-width:100%!important;}
.inline-filter{background:#fff!important;border:1px solid var(--hsa-line)!important;border-radius:18px!important;padding:12px!important;box-shadow:0 8px 20px rgba(15,23,42,.04)!important;}
.table-wrap{overflow:auto!important;max-width:100%!important;}
table{width:100%!important;min-width:760px;border-collapse:separate!important;border-spacing:0!important;}
th{background:#f8fafc!important;color:#64748b!important;font-weight:750!important;font-size:11px!important;}
td{color:#1f2937!important;}
th,td{border-bottom:1px solid var(--hsa-line)!important;}

/* Dashboard team performance cards */
.page-dashboard .dashboard-admin-grid{display:grid!important;grid-template-columns:minmax(0,1.02fr) minmax(0,1.28fr)!important;gap:18px!important;align-items:start!important;}
.page-dashboard .team-performance-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;gap:14px!important;min-width:0!important;max-width:100%!important;}
.page-dashboard .team-perf-card.clean{padding:15px!important;border-radius:18px!important;background:#fff!important;border:1px solid var(--hsa-line)!important;box-shadow:0 9px 24px rgba(15,23,42,.055)!important;overflow:hidden!important;}
.page-dashboard .team-perf-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin-bottom:12px!important;min-width:0!important;}
.page-dashboard .team-perf-head strong{font-size:15px!important;line-height:1.25!important;overflow-wrap:anywhere!important;}
.page-dashboard .team-metric-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;}
.page-dashboard .team-metric-list>div{padding:0!important;border:1px solid var(--hsa-line)!important;border-radius:14px!important;background:#fff!important;overflow:hidden!important;min-width:0!important;}
.page-dashboard .team-metric-list span{display:flex!important;align-items:center!important;min-height:31px!important;padding:7px 9px!important;background:#f8fbff!important;color:#0f3b82!important;border-bottom:1px solid #e0edff!important;font-size:10.5px!important;font-weight:750!important;line-height:1.16!important;}
.page-dashboard .team-metric-list b{display:block!important;padding:9px!important;color:#0f172a!important;font-size:13px!important;line-height:1.16!important;font-weight:800!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-word!important;}

/* Mobile app style */
@media(max-width:760px){
  body{background:#f5f7fb!important;}
  .main{width:100%!important;}
  .topbar{position:sticky!important;top:0!important;z-index:40!important;padding:10px 12px!important;border-bottom:1px solid rgba(226,232,240,.88)!important;background:rgba(255,255,255,.94)!important;backdrop-filter:blur(16px)!important;}
  .top-title h1{font-size:18px!important;line-height:1.15!important;}
  .top-title p{display:none!important;}
  .content{padding:12px 10px 92px!important;gap:12px!important;width:100%!important;}
  .card{padding:13px!important;border-radius:20px!important;box-shadow:0 10px 26px rgba(15,23,42,.07)!important;}
  .card-head{display:grid!important;grid-template-columns:minmax(0,1fr)!important;align-items:start!important;margin-bottom:10px!important;}
  .card-head h2{font-size:15px!important;line-height:1.24!important;}
  .card-head p{font-size:11.5px!important;}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;width:100%!important;}
  .kpi-grid .kpi,.kpi{min-height:112px!important;border-radius:18px!important;}
  .kpi-grid .kpi span,.kpi > span:first-child{min-height:36px!important;padding:8px 9px!important;font-size:9.6px!important;line-height:1.15!important;letter-spacing:.018em!important;}
  .kpi-grid .kpi strong,.kpi > strong{padding:10px 9px 3px!important;font-size:14.5px!important;line-height:1.12!important;letter-spacing:-.015em!important;}
  .kpi-grid .kpi small,.kpi > small{padding:0 9px 9px!important;font-size:9.6px!important;line-height:1.22!important;display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}
  .summary-grid,.stats-grid,.mini-grid,.dashboard-mini-grid,.metric-strip,.input-section-stats,.edit-detail-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
  .summary-grid span,.stats-grid span,.mini-grid span,.dashboard-mini-grid span,.metric-strip span,.input-section-stats span,.edit-detail-summary span{min-height:30px!important;padding:7px 8px!important;font-size:9.4px!important;}
  .summary-grid strong,.stats-grid strong,.mini-grid strong,.dashboard-mini-grid strong,.metric-strip b,.input-section-stats b,.edit-detail-summary b{padding:8px!important;font-size:12px!important;}
  .inline-filter{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding:10px!important;border-radius:18px!important;}
  .inline-filter label,.form-grid label{font-size:11.5px!important;gap:5px!important;min-width:0!important;}
  .inline-filter input,.inline-filter select,.inline-filter textarea,.form-grid input,.form-grid select,.form-grid textarea,input,select,textarea{min-width:0!important;width:100%!important;padding:9px 10px!important;border-radius:12px!important;font-size:12.5px!important;font-weight:450!important;}
  .form-grid,.form-grid.cols-4,.form-grid.cols-3,.form-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;}
  .span-2,.span-3,.span-4,.form-grid .span-2,.form-grid .span-3,.form-grid .span-4{grid-column:1/-1!important;}
  .form-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-top:10px!important;}
  .button,button{min-width:0!important;border-radius:13px!important;padding:9px 10px!important;font-size:12px!important;font-weight:650!important;}
  .page-dashboard .dashboard-admin-grid{grid-template-columns:minmax(0,1fr)!important;gap:12px!important;}
  .page-dashboard .team-performance-grid{grid-template-columns:minmax(0,1fr)!important;gap:10px!important;}
  .page-dashboard .team-metric-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
  .page-dashboard .team-metric-list span{min-height:29px!important;padding:6px 8px!important;font-size:9.2px!important;}
  .page-dashboard .team-metric-list b{padding:8px!important;font-size:11.5px!important;}
  .table-wrap.responsive-cards,.table-wrap:not(.keep-table){border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;}
  .table-wrap.responsive-cards table,.table-wrap:not(.keep-table) table{min-width:0!important;width:100%!important;display:block!important;background:transparent!important;}
  .table-wrap.responsive-cards thead,.table-wrap:not(.keep-table) thead{display:none!important;}
  .table-wrap.responsive-cards tbody,.table-wrap:not(.keep-table) tbody{display:grid!important;gap:9px!important;width:100%!important;}
  .table-wrap.responsive-cards tr,.table-wrap:not(.keep-table) tr{display:grid!important;gap:7px!important;padding:11px!important;border:1px solid var(--hsa-line)!important;border-radius:18px!important;background:#fff!important;box-shadow:0 8px 18px rgba(15,23,42,.045)!important;width:100%!important;min-width:0!important;max-width:100%!important;}
  .table-wrap.responsive-cards td,.table-wrap:not(.keep-table) td{display:grid!important;grid-template-columns:minmax(96px,.42fr) minmax(0,1fr)!important;gap:8px!important;align-items:start!important;padding:0!important;border:0!important;min-width:0!important;max-width:100%!important;font-size:12px!important;overflow-wrap:anywhere!important;word-break:break-word!important;}
  .table-wrap.responsive-cards td::before,.table-wrap:not(.keep-table) td::before{content:attr(data-label);color:#64748b!important;font-weight:700!important;font-size:10.5px!important;text-transform:uppercase!important;letter-spacing:.02em!important;}
  .table-wrap.keep-table{overflow:auto!important;-webkit-overflow-scrolling:touch!important;border:1px solid var(--hsa-line)!important;background:#fff!important;}
  .table-wrap.keep-table table{min-width:720px!important;}
  .toast,.hsa-toast{bottom:76px!important;width:calc(100vw - 20px)!important;border-radius:18px!important;padding:12px 13px!important;font-size:12.5px!important;}
  .mobile-bottom-nav{left:10px!important;right:10px!important;bottom:10px!important;width:auto!important;border-radius:24px!important;background:rgba(255,255,255,.96)!important;border:1px solid rgba(226,232,240,.92)!important;box-shadow:0 18px 42px rgba(15,23,42,.20)!important;}
}
@media(max-width:380px){
  .kpi-grid{gap:7px!important;}
  .kpi-grid .kpi strong,.kpi>strong{font-size:13px!important;}
  .inline-filter,.form-grid,.form-grid.cols-4,.form-grid.cols-3,.form-grid.cols-2{grid-template-columns:minmax(0,1fr)!important;}
  .form-actions{grid-template-columns:minmax(0,1fr)!important;}
}
@media(min-width:761px) and (max-width:1180px){
  .kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  .page-dashboard .dashboard-admin-grid{grid-template-columns:minmax(0,1fr)!important;}
}