/* Tools Feature CSS
   Phase 1/4: Dashboard- und Grid-Styling aus legacy style.css extrahiert
   Phase 2/4: Push-/PWA-Box bleibt im selben Feature-Bundle
*/

.pushbox{
  margin-top: 10px;
  border-radius: 18px;
  padding: 12px 14px;
  border: 1px solid var(--chat-border);
  background: color-mix(in srgb, var(--chat-bg) 70%, var(--chat-surface));
  box-shadow: var(--shadow-btn);
}

.pushbox-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.pushbox-title{ font-weight: 900; }
.pushbox-sub{ font-size: 12px; color: var(--chat-muted); }
.pushbox-actions{ display:flex; gap: 10px; flex-wrap: wrap; }

.tools-stack{ display:block; }

.toolscard{
  border-radius: 24px;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--chat-surface) 88%, transparent), color-mix(in srgb, var(--chat-bg) 72%, transparent)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06), rgba(255,255,255,.14)) border-box;
  box-shadow: 0 18px 55px rgba(0,0,0,.20);
  padding: 14px;
}

.toolscard-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 10px;
  margin-bottom: 12px;
}

.toolscard-title{ font-weight: 1100; font-size: 18px; }
.toolscard-sub{ font-weight: 900; opacity: .85; font-size: 12px; }

.tools-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 1100px){
  .tools-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px){
  .tools-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.toolpad{
  text-align:left;
  border-radius: 18px;
  padding: 14px;
  border: 1px solid var(--chat-border);
  background: color-mix(in srgb, var(--chat-bg) 65%, var(--chat-surface));
  box-shadow: var(--shadow-btn);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap: 6px;
  transition: transform .08s ease, opacity .12s ease;
}

.toolpad:hover{ opacity:.95; transform: translateY(-1px); }
.toolpad:active{ transform: translateY(0px) scale(.99); }

.toolpad-ico{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 20px;
  background: var(--chat-surface);
  border: 1px solid var(--chat-border);
  box-shadow: var(--shadow-btn);
}

.toolpad-title{ font-weight: 1000; font-size: 14px; }
.toolpad-sub{ font-size: 12px; color: var(--chat-muted); line-height: 1.2; }

.toolpad.danger{
  border-color: color-mix(in srgb, #ef4444 35%, var(--chat-border));
  box-shadow: var(--shadow-btn), 0 0 0 2px color-mix(in srgb, #ef4444 20%, transparent);
}