/* Gemeinsame, moderate Flat-Design-Schicht für alle Sharkz-Bereiche. */
:root {
  --flat-radius-control: 6px;
  --flat-radius-surface: 9px;
  --flat-border: #dde1e8;
  --flat-surface: #ffffff;
  --flat-muted-surface: #f6f7f9;
  --flat-focus: #6558e8;
}

button,
input,
select,
textarea,
[class*="button"],
[class*="-btn"],
[class$="btn"] {
  border-radius: var(--flat-radius-control) !important;
  box-shadow: none !important;
}

input,
select,
textarea {
  border-color: var(--flat-border) !important;
  background-image: none !important;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--flat-focus) 38%, transparent);
  outline-offset: 2px;
}

:where(
  [class*="card"],
  [class*="panel"],
  [class*="modal"],
  [class*="dialog"],
  [class*="dropdown"],
  [class*="popover"],
  [class*="widget"],
  [class*="tile"],
  [class*="box"]
) {
  border-radius: var(--flat-radius-surface) !important;
  box-shadow: none !important;
}

:where(table, .table, [class*="table"]) {
  border-color: var(--flat-border) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

:where(th, [class*="table-head"], [class*="table__head"]) {
  background-image: none !important;
  background-color: var(--flat-muted-surface) !important;
}

:where([class*="badge"], [class*="tag"], [class*="status"], [class*="chip"]) {
  border-radius: 5px !important;
  box-shadow: none !important;
}

:where([class*="hero"], [class*="banner"], [class*="cta"]) {
  box-shadow: none !important;
}

:where(button, a, [class*="card"], [class*="panel"]) {
  text-shadow: none !important;
}

:where(button, [class*="button"], [class*="-btn"], [class$="btn"]):hover {
  box-shadow: none !important;
  transform: none !important;
}

@media (max-width: 700px) {
  :root {
    --flat-radius-control: 5px;
    --flat-radius-surface: 7px;
  }
}