/* =====================================================================
   assets/site-patch.css  (v3 — LIGHT THEME)
   Load AFTER assets/style.css on the marketing pages, and after
   adminlte.min.css / custom.css on admin.html and distributor.html.
   Then load assets/light-theme.css after this file.

   Only colours/surfaces changed vs v2. All sizes, paddings, media
   queries, class names and behaviour hooks are identical.
   ===================================================================== */

/* ---------------- brand logo ---------------- */
a.logo,
a.brand-link { display: inline-flex; align-items: center; line-height: 0; }

/* The logo artwork is drawn on a dark plate, so it keeps its own dark
   chip on the white header — this is what preserves edge quality.
   If you later export a logo for light backgrounds, set
   .brand-logo{background:transparent} here and nothing else changes. */
.brand-logo {
  display: block; width: auto; height: 46px;
  border-radius: 8px;
  background: #0f172a;
  padding: 2px 6px;
  box-shadow: 0 1px 2px rgba(15,23,42,.10);
}
.brand-logo-sm { height: 38px; }

/* AdminLTE sidebar */
a.brand-link { justify-content: center; padding: 10px 8px !important; }
.brand-logo-console { height: 40px; padding: 2px 4px; }
.brand-sub {
  margin-left: 8px; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: #5b6b85;
}

/* Console login boxes */
.brand-logo-login { height: 62px; margin: 0 auto; padding: 4px 10px; }
.login-box .card-header {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(15,23,42,.08);
  padding: 16px 12px;
}

@media (max-width: 720px) {
  .brand-logo { height: 38px; }
  .brand-logo-sm { height: 32px; }
  .brand-logo-login { height: 52px; }
}

/* ------------- My Account dropdown ------------- */
header .menu > li > a.no-nav { cursor: pointer; }
header .drop a i { width: 16px; margin-right: 8px; opacity: .8; }
header .drop a { white-space: nowrap; }

/* Mobile: tapping "My Account" opens the two portal links */
@media (max-width: 992px) {
  header .menu > li.open .drop { display: block; }
}

/* ------------- inline form feedback ------------- */
.out { margin-top: 10px; font-size: 13px; min-height: 18px; line-height: 1.5; }
.out.ok  { color: var(--teal, #0d9488); }
.out.err { color: #dc2626; }

/* ------------------- toasts -------------------- */
#site-toast-wrap {
  position: fixed; right: 18px; bottom: 18px; z-index: 99999;
  display: flex; flex-direction: column; gap: 10px; max-width: 370px;
}
.site-toast {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 15px; border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 14px 38px rgba(15,23,42,.16);
  color: #0f172a; font-size: 13.2px;
  animation: siteToastIn .22s ease-out;
}
.site-toast.out { opacity: 0; transform: translateY(8px); transition: .55s; }
.site-toast strong { display: block; margin-bottom: 3px; font-size: 13.6px; color: #0f172a; }
.site-toast span { color: #5b6b85; }
.site-toast i { font-size: 17px; margin-top: 1px; }
.site-toast.ok i  { color: #0d9488; }
.site-toast.err i { color: #dc2626; }

@keyframes siteToastIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 520px) {
  #site-toast-wrap { left: 14px; right: 14px; max-width: none; }
}