/* ---------------------------------------------------------------
   Flat surfaces: the Soft UI theme paints alerts, badges and buttons
   with loud diagonal gradients. This file replaces them with flat,
   softer colours. Loaded after soft-ui-dashboard.css.
   --------------------------------------------------------------- */

/* --- Alerts / banners ------------------------------------------ */
.alert {
  background-image: none !important;
  background-color: var(--alert-bg);
  border: 1px solid var(--alert-bd);
  border-radius: .75rem;
  color: #67748e;
}

.alert-success   { --alert-bg: #eef9f1; --alert-bd: #a8ddba; --alert-fg: #1a7f42; }
.alert-warning   { --alert-bg: #fff8e8; --alert-bd: #f2d597; --alert-fg: #a2700a; }
.alert-danger    { --alert-bg: #fdeeee; --alert-bd: #f2b3b3; --alert-fg: #c02929; }
.alert-info      { --alert-bg: #eaf4fd; --alert-bd: #a9cdf0; --alert-fg: #12609e; }
.alert-primary   { --alert-bg: #fdeafa; --alert-bd: #f0b6e4; --alert-fg: #a10a7d; }
.alert-secondary { --alert-bg: #eef1f6; --alert-bd: #ccd4e0; --alert-fg: #4f5867; }
.alert-dark      { --alert-bg: #eceef3; --alert-bd: #c4cad8; --alert-fg: #2c3154; }
.alert-light     { --alert-bg: #f6f7f9; --alert-bd: #dfe3e9; --alert-fg: #4f5867; }

/* Accent carried by the leading icon, a bold lead-in, and headings.
   Scoped to direct-ish children so icons inside nested buttons keep their own colour. */
.alert > i,
.alert > .alert-icon i,
.alert > div > i,
.alert > .alert-text > i,
.alert strong,
.alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert h6,
.alert .alert-heading { color: var(--alert-fg); }

/* Views set text-white to survive the old gradient; neutralise it here
   instead of editing ~16 blade files, Alpine :class bindings included. */
.alert.text-white,
.alert .text-white,
.alert .alert-text { color: #67748e !important; }

.alert .btn-close,
.alert .btn-close.text-white { color: #8392ab !important; opacity: .6; }

/* Opt-in circle icon: <span class="alert-dot"><i class="fas fa-check"></i></span> */
.alert .alert-dot {
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--alert-fg);
  color: #fff !important;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Buttons that sit inside a banner and must read against its pale fill. */
.alert .btn-accent,
.alert .btn-accent:hover,
.alert .btn-accent:focus {
  background-color: var(--alert-fg);
  background-image: none;
  border: 1px solid var(--alert-fg);
  color: #fff !important;
}
.alert .btn-accent-outline,
.alert .btn-accent-outline:hover,
.alert .btn-accent-outline:focus {
  background-color: #fff;
  background-image: none;
  border: 1px solid var(--alert-fg);
  color: var(--alert-fg) !important;
}
.alert .btn-accent:hover,
.alert .btn-accent-outline:hover { filter: brightness(.95); }

/* --- Flat fills for badges and buttons -------------------------- */
.bg-flat-primary   { background-color: #cb0c9f !important; }
.bg-flat-success   { background-color: #1a7f42 !important; }
.bg-flat-info      { background-color: #12609e !important; }
.bg-flat-danger    { background-color: #c02929 !important; }
.bg-flat-warning   { background-color: #a2700a !important; }
.bg-flat-secondary { background-color: #67748e !important; }

[class*="bg-flat-"] {
  background-image: none !important;
  border: none;
  color: #fff !important;
}
.btn[class*="bg-flat-"]:hover,
.btn[class*="bg-flat-"]:focus { filter: brightness(.92); color: #fff !important; }

/* Accent text that matches the flat fills (the theme's .text-success is a vivid lime). */
.text-flat-success { color: #1a7f42 !important; }