:root{ --brand-blue:#132a45; --brand-orange:#ef7d4a; }
.brand-bar{ background:linear-gradient(90deg,var(--brand-blue),#1c3657); color:#fff; padding:.35rem .75rem; display:flex; align-items:center; gap:.5rem; box-shadow:0 1px 2px rgba(0,0,0,.12); }
.brand-logo{ height:24px; width:auto; }
.brand-title{ font-weight:700; letter-spacing:.2px; }
.badge.brand{ background:var(--brand-orange); }
.btn.brand{ border-color:#fbe7de; background:#fff7f3; color:#7a2e13; }
.btn.brand:hover{ background:#ffefe7; }
.table-muted tbody tr:nth-child(odd){ background:#fafafa; }
.cell-note{ max-width: 380px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }



/* === Payslashes-style branding === */
:root{
  --brand-blue:#132a45;
  --brand-orange:#ef7d4a;
  --brand-purple:#5c2d91;
  --brand-green:#00c853;
}

/* Floating chat button */
.chat-fab{
  position:fixed;
  bottom:1.5rem;
  right:1.5rem;
  width:56px;
  height:56px;
  border-radius:9999px;
  background:var(--brand-purple);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:13px;
  text-decoration:none;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  z-index:900;
}
.chat-fab:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 36px rgba(0,0,0,.4);
}
.chat-badge{
  position:absolute;
  top:-4px;
  right:-4px;
  background:#ff5252;
  color:#fff;
  min-width:18px;
  padding:2px 6px;
  border-radius:9999px;
  font-size:10px;
  font-weight:700;
}

/* Support widget panel (bottom-right) */
.support-widget{
  position:fixed;
  bottom:96px;
  right:24px;
  width:340px;
  max-width:calc(100% - 2rem);
  background:#fff;
  border-radius:18px;
  box-shadow:0 22px 45px rgba(0,0,0,.35);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  z-index:850;
}

.support-header{
  background:linear-gradient(135deg,var(--brand-purple),#8743ff);
  color:#fff;
  padding:12px 14px;
}
.support-header-title{
  font-size:14px;
  font-weight:700;
}
.support-header-sub{
  font-size:11px;
  opacity:.9;
}

.support-body{
  padding:10px 14px 8px 14px;
  background:#f6f3ff;
}
.support-intro{
  font-size:12px;
  color:#4b5563;
  margin-bottom:8px;
}
.support-quick-links{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.support-quick{
  border:none;
  background:#fff;
  border-radius:10px;
  padding:8px 10px;
  text-align:left;
  display:flex;
  align-items:flex-start;
  gap:8px;
  cursor:pointer;
  font-size:11px;
  box-shadow:0 1px 2px rgba(15,23,42,.15);
}
.support-quick:hover{
  background:#f3e8ff;
}
.support-icon{
  font-size:14px;
}
.support-text{
  display:flex;
  flex-direction:column;
}
.support-label{
  font-weight:600;
  color:#111827;
}
.support-desc{
  color:#6b7280;
  font-size:11px;
}

/* Input row */
.support-input{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-top:1px solid #e5e7eb;
  background:#fff;
}
.support-input input{
  flex:1;
  border-radius:9999px;
  border:1px solid #e5e7eb;
  font-size:11px;
  padding:7px 11px;
  outline:none;
}
.support-input input:focus{
  border-color:var(--brand-purple);
  box-shadow:0 0 0 1px rgba(92,45,145,.25);
}
.support-input button{
  border:none;
  border-radius:9999px;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--brand-purple);
  color:#fff;
  font-size:14px;
  cursor:pointer;
}

/* Footer small tweaks */
footer .material-icons{
  font-size:14px;
}

/* Basic brand helpers */
.brand-bar{
  background:linear-gradient(90deg,var(--brand-blue),#0b2140);
  color:#fff;
  padding:.35rem .75rem;
  font-size:.75rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.5rem;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.brand-logo{
  height:24px;
  width:auto;
}
.brand-title{
  font-weight:700;
  letter-spacing:.2px;
}
.badge.brand{
  background:var(--brand-orange);
}



/* === Softer, flatter Payslashes-style support widget === */
.support-widget{
  position:fixed;
  bottom:90px;
  right:24px;
  width:360px;
  max-width:calc(100% - 2rem);
  background:#ffffff;
  border-radius:12px;
  border:1px solid #e5e7eb;
  box-shadow:0 4px 14px rgba(15,23,42,.12);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  z-index:850;
}

.support-header{
  background:linear-gradient(135deg,#5c2d91,#8743ff);
  color:#fff;
  padding:10px 14px;
}

.support-header-title{
  font-size:14px;
  font-weight:600;
}

.support-header-sub{
  font-size:11px;
  opacity:.95;
}

.support-body{
  padding:10px 14px 12px 14px;
  background:#f9fafb;
}

.support-intro{
  font-size:11px;
  color:#4b5563;
  margin-bottom:8px;
}

.support-card{
  background:#ffffff;
  border-radius:8px;
  border:1px solid #e5e7eb;
  padding:8px 10px;
}

.support-card-title{
  font-size:12px;
  font-weight:600;
  color:#111827;
  margin-bottom:6px;
}

.support-row{
  width:100%;
  margin-top:4px;
  border:none;
  background:#ffffff;
  border-radius:6px;
  padding:6px 8px;
  display:flex;
  align-items:flex-start;
  gap:8px;
  cursor:pointer;
  text-align:left;
}

.support-row:hover{
  background:#f3e8ff;
}

.support-row-icon{
  font-size:16px;
}

.support-row-main{
  display:flex;
  flex-direction:column;
}

.support-row-label{
  font-size:11px;
  font-weight:600;
  color:#111827;
}

.support-row-desc{
  font-size:11px;
  color:#6b7280;
}

.support-input{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-top:1px solid #e5e7eb;
  background:#ffffff;
}

.support-input input{
  flex:1;
  border-radius:9999px;
  border:1px solid #d1d5db;
  font-size:11px;
  padding:7px 11px;
  outline:none;
}

.support-input input:focus{
  border-color:#5c2d91;
  box-shadow:0 0 0 1px rgba(92,45,145,.2);
}

.support-input button{
  border:none;
  border-radius:9999px;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#5c2d91;
  color:#fff;
  font-size:13px;
  cursor:pointer;
}

/* Softer chat fab */
.chat-fab{
  position:fixed;
  bottom:1.5rem;
  right:1.5rem;
  width:52px;
  height:52px;
  border-radius:9999px;
  background:#5c2d91;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:12px;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(15,23,42,.28);
  z-index:900;
}



/* Support bot greeting card (top of widget) */
.support-bot-card{
  margin-bottom:8px;
  background:#ffffff;
  border-radius:8px;
  border:1px solid #e5e7eb;
  padding:6px 8px;
}

.support-bot-label{
  font-size:11px;
  font-weight:600;
  color:#6b7280;
  margin-bottom:4px;
}

.support-bot-message{
  font-size:11px;
  color:#111827;
}

/* Row layout with right-side action text */
.support-row{
  width:100%;
  margin-top:4px;
  border:none;
  background:#ffffff;
  border-radius:6px;
  padding:6px 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  cursor:pointer;
  text-align:left;
}

.support-row-main{
  display:flex;
  flex-direction:column;
}

.support-row-label{
  font-size:11px;
  font-weight:600;
  color:#111827;
}

.support-row-desc{
  font-size:11px;
  color:#6b7280;
}

.support-row-action{
  font-size:11px;
  font-weight:600;
  color:#4f46e5;
}