/* ==========================================================================
   v0.21.0 Business UI Modes
   --------------------------------------------------------------------------
   Business modes are a presentation/workflow layer only.
   ========================================================================== */

.businessModeButton{
  width:100%;
  margin:16px 0 2px;
  display:grid;
  grid-template-columns:48px 1fr auto;
  gap:12px;
  align-items:center;
  text-align:left;
  min-height:72px;
  padding:11px 13px;
  border-radius:13px!important;
  background:#fff!important;
  color:var(--ux-text)!important;
  border:1px solid var(--ux-border)!important;
  box-shadow:none!important;
}
.businessModeButton:hover{
  border-color:#a8c6dc!important;
  background:#fbfdff!important;
}
.businessModeIcon{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:linear-gradient(145deg,#effaf3,#eef6fb);
  font-size:26px;
}
.businessModeCopy{
  min-width:0;
  display:grid;
  gap:1px;
}
.businessModeEyebrow{
  color:var(--ux-muted);
  font-size:11px;
  font-weight:750;
}
.businessModeCopy strong{
  font-size:15px;
}
.businessModeChange{
  color:var(--ux-blue);
  font-size:12px;
  font-weight:850;
}

.businessModeChoiceGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}
.businessModeChoice{
  position:relative;
  display:grid;
  grid-template-columns:48px 1fr;
  gap:11px;
  align-items:center;
  text-align:left;
  min-height:88px;
  padding:13px;
  border:1px solid var(--ux-border)!important;
  border-radius:12px!important;
  background:#fff!important;
  color:var(--ux-text)!important;
}
.businessModeChoice:hover{
  border-color:#8db9d9!important;
  background:#f7fbff!important;
}
.businessModeChoice.selected{
  border:2px solid var(--ux-green)!important;
  background:#f6fbf8!important;
}
.businessModeChoiceIcon{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#f3f6f8;
  font-size:27px;
}
.businessModeChoiceCopy{
  display:grid;
  gap:3px;
}
.businessModeChoiceCopy strong{
  font-size:14px;
}
.businessModeChoiceCopy span{
  color:var(--ux-muted);
  font-size:12px;
  line-height:1.35;
}
.businessModeSafety{
  margin-top:14px;
  padding:11px 13px;
  border-radius:9px;
  background:#edf7f1;
  color:#175d3a;
  font-size:12px;
  line-height:1.45;
}

.modePilotEyebrow{
  margin-bottom:4px;
  color:var(--ux-blue);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.modeWorkspaceNotice{
  margin-top:14px;
  padding:12px 13px;
  border-left:4px solid var(--ux-green);
  border-radius:8px;
  background:#f4faf6;
  line-height:1.45;
  font-size:13px;
}
.modeWorkspaceBody{
  margin-top:14px;
}
.modeWorkspaceCard{
  display:grid;
  grid-template-columns:36px 1fr;
  gap:10px;
  align-items:start;
  padding:11px 12px;
  border:1px solid var(--ux-border);
  border-radius:9px;
  background:#fff;
}
.modeWorkspaceCard + .modeWorkspaceCard{
  margin-top:8px;
}
.modeWorkspaceCard .icon{
  font-size:22px;
}
.modeWorkspaceCard strong{
  display:block;
  margin-bottom:2px;
}
.modeWorkspaceCard .small{
  line-height:1.4;
}
.modeWorkspaceActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-top:16px;
}

.homeShortcutCard[data-canonical-flow="operational"]{
  border-style:dashed!important;
}
.homeShortcutCard[data-canonical-flow="expense"] .homeShortcutIcon{
  background:linear-gradient(145deg,#fff8e7,#f6fbf8);
}
.homeShortcutCard[data-canonical-flow="income"] .homeShortcutIcon{
  background:linear-gradient(145deg,#eef8ff,#edf7f1);
}

@media(max-width:700px){
  .businessModeChoiceGrid{grid-template-columns:1fr}
  .businessModeButton{grid-template-columns:44px 1fr auto}
}

.reviewModeContext{
  margin-top:3px;
  color:var(--ux-blue);
  font-weight:700;
}