/* public/assets/ui/framework/15_legacy_bridge.css
   KomodUI Legacy Bridge v0.1
   Goal: keep existing markup working while we migrate to new utility/system classes.
   DO NOT add new UI here; only mapping/compat.
*/

/* =========================
   Buttons (legacy -> new)
   ========================= */

/* Existing .btn is already defined in 14_buttons.css (base).
   Here we map old variants to new look (same visuals). */

.btn-primary { /* legacy name */
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.btn-outline { /* legacy name */
  background: var(--color-bg-white);
  border-color: var(--color-border);
  color: var(--color-text-main);
}
.btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.btn-accent { /* legacy name */
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.btn-accent:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.btn-sm { /* legacy name */
  padding: 8px 12px;
  font-size: var(--text-sm);
}

/* =========================
   Header icon buttons (legacy)
   ========================= */

/* In old CSS you used .header-notifications as a button;
   now it can visually behave like .btn-icon */
.header-notifications {
  width: 40px;
  height: 40px;
  border-radius: 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  color: var(--color-text-main);

  transition: var(--transition);
}

.header-notifications:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.header-notifications i {
  font-size: 1.35rem;
}

/* =========================
   Images / avatars legacy fixes
   ========================= */

.header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Prevent horizontal overflow from accidental long content */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Any flex children should be allowed to shrink */
.header-inner > * {
  min-width: 0;
}