/* Badger Repair — customer-portal modal + button styles.
 * Added 2026-04-17. Light default (portal context), dark override for admin.
 * Uses px absolute values — ERP html base is 62.5%/10px which shrinks rem.
 * Mobile-first: base rules size for small screens, @media(min-width:560px) scales up.
 */

/* ============ Connection actions layout: stack | The Badger ============
 * Test + Reboot stacked vertically on the LEFT, big Badger character on the RIGHT
 * filling the card height vertically.
 */
.connection-actions {
    display: flex; align-items: stretch; gap: 10px;
    flex-shrink: 0;
}
.connection-actions__stack {
    display: flex; flex-direction: column; gap: 6px; justify-content: center;
}
.connection-actions__stack .btn {
    min-width: 100px;
}

/* ============ The BADGER character button ============
 * Full-height vertical card on the right side of each connection row.
 * Big SVG face, label below, sparkle in the corner, idle bob, hover wiggle.
 */
.badger-character {
    position: relative;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px;
    padding: 6px 12px 5px;
    background: linear-gradient(160deg, #fef3c7 0%, #fcd34d 55%, #f59e0b 100%);
    border: 2px solid #1e293b;
    border-radius: 12px;
    color: #1e293b; font-weight: 700; font-size: 11px;
    cursor: pointer; white-space: nowrap;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.18s ease,
                background 0.25s ease;
    box-shadow: 0 2px 0 #1e293b, 0 4px 10px rgba(245, 158, 11, 0.28);
    animation: badgerCharIdle 4.5s ease-in-out infinite;
    min-width: 96px;
    align-self: stretch;
}
.badger-character:hover {
    transform: translateY(-2px) scale(1.05) rotate(-2deg);
    background: linear-gradient(160deg, #fde68a 0%, #fbbf24 55%, #d97706 100%);
    box-shadow: 0 4px 0 #1e293b, 0 10px 22px rgba(245, 158, 11, 0.42);
    animation-play-state: paused;
}
.badger-character:active {
    transform: translateY(1px) scale(0.97);
    box-shadow: 0 1px 0 #1e293b, 0 2px 6px rgba(245, 158, 11, 0.28);
}

.badger-character__face {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    background: #ffffff; border-radius: 50%;
    overflow: hidden;
    box-shadow: inset 0 0 0 1.5px #1e293b;
}
.badger-character__svg { width: 100%; height: 100%; display: block; }
.badger-character__label { line-height: 1.1; letter-spacing: 0.2px; }

.badger-character__sparkle {
    position: absolute; top: -7px; right: -7px;
    width: 16px; height: 16px;
    animation: badgerSparkle 2.4s ease-in-out infinite;
    transform-origin: center;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.20));
}
.badger-character__sparkle svg { width: 100%; height: 100%; display: block; }

/* Idle: gentle bob — sniff-around vibe, every 4.5s */
@keyframes badgerCharIdle {
    0%, 80%, 100% { transform: translateY(0) rotate(0deg); }
    85%           { transform: translateY(-3px) rotate(-2deg); }
    90%           { transform: translateY(-1px) rotate(2deg); }
    95%           { transform: translateY(-2px) rotate(-1deg); }
}

/* Sparkle pulse */
@keyframes badgerSparkle {
    0%, 100% { transform: scale(1) rotate(0deg);    opacity: 0.85; }
    25%      { transform: scale(1.3) rotate(15deg);  opacity: 1; }
    50%      { transform: scale(0.95) rotate(-10deg); opacity: 0.7; }
    75%      { transform: scale(1.15) rotate(8deg);  opacity: 1; }
}

/* Hover: ears wiggle, face hops */
.badger-character:hover .badger-character__ear--left  { animation: badgerEarLeft  0.45s ease-in-out infinite alternate; transform-origin: 26px 28px; }
.badger-character:hover .badger-character__ear--right { animation: badgerEarRight 0.45s ease-in-out infinite alternate; transform-origin: 74px 28px; }
.badger-character:hover .badger-character__face      { animation: badgerFaceHop 0.6s ease-in-out infinite; }

@keyframes badgerEarLeft  { from { transform: rotate(-10deg); } to { transform: rotate(12deg); } }
@keyframes badgerEarRight { from { transform: rotate(10deg);  } to { transform: rotate(-12deg); } }
@keyframes badgerFaceHop  { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-2px) rotate(6deg); } }

/* Mobile: connection-item itself becomes a column; Badger takes full width */
@media (max-width: 575px) {
    .connection-item .d-flex.justify-content-between {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px;
    }
    .connection-actions {
        flex-direction: column-reverse;
        gap: 8px;
        align-items: stretch;
    }
    .connection-actions__stack {
        flex-direction: row;
        gap: 6px;
        justify-content: stretch;
    }
    .connection-actions__stack .btn {
        flex: 1;
        min-width: 0;
    }
    .badger-character {
        min-width: 0;
        width: 100%;
        padding: 14px 16px 12px;
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .badger-character,
    .badger-character__sparkle,
    .badger-character:hover .badger-character__face,
    .badger-character:hover .badger-character__ear--left,
    .badger-character:hover .badger-character__ear--right { animation: none !important; }
    .badger-character:hover { transform: scale(1.02); }
}

/* ============ Badger MODAL ============ */
.badger-repair-btn { white-space: nowrap; }

/* Overlay + centered box */
.badger-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    z-index: 2000; display: none; align-items: center; justify-content: center;
    padding: 12px;
}
.badger-modal-overlay[style*="display: block"],
.badger-modal-overlay[style*="display:block"] { display: flex !important; }

.badger-modal-box {
    background: #ffffff; color: #0f172a;
    border-radius: 14px; padding: 24px 20px 20px;
    width: 100%; max-width: 520px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25), 0 2px 8px rgba(15, 23, 42, 0.08);
    animation: badgerPop 0.22s ease-out;
    border-top: 5px solid #94a3b8;
    max-height: calc(100vh - 24px); overflow-y: auto;
}
@media (min-width: 560px) {
    .badger-modal-box { padding: 32px 32px 24px; border-radius: 16px; }
}
@keyframes badgerPop {
    from { transform: scale(0.94) translateY(6px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}

.badger-result             { text-align: center; }
.badger-result__hero       { padding: 4px 0 18px; }

/* Circular badge behind the SVG badger */
.badger-result__emoji-wrap {
    display: inline-flex; align-items: center; justify-content: center;
    width: 72px; height: 72px; border-radius: 50%;
    background: #f1f5f9; margin-bottom: 14px;
}

/* Always-on animations inside the modal — ears wiggle, face hops gently */
.badger-result__emoji-wrap .badger-svg__ear--left,
.badger-result__emoji-wrap .badger-svg__inner-ear--left {
    animation: badgerEarLeft 0.55s ease-in-out infinite alternate;
    transform-origin: 26px 28px;
    transform-box: view-box;
}
.badger-result__emoji-wrap .badger-svg__ear--right,
.badger-result__emoji-wrap .badger-svg__inner-ear--right {
    animation: badgerEarRight 0.55s ease-in-out infinite alternate;
    transform-origin: 74px 28px;
    transform-box: view-box;
}
.badger-result__emoji-wrap .badger-svg {
    animation: badgerFaceHop 2.2s ease-in-out infinite;
    transform-origin: 50% 60%;
    transform-box: view-box;
}
@media (prefers-reduced-motion: reduce) {
    .badger-result__emoji-wrap .badger-svg,
    .badger-result__emoji-wrap .badger-svg__ear--left,
    .badger-result__emoji-wrap .badger-svg__ear--right,
    .badger-result__emoji-wrap .badger-svg__inner-ear--left,
    .badger-result__emoji-wrap .badger-svg__inner-ear--right { animation: none !important; }
}
@media (min-width: 560px) {
    .badger-result__emoji-wrap { width: 88px; height: 88px; margin-bottom: 16px; }
}
.badger-svg { width: 100%; height: 100%; display: block; }

.badger-result__headline {
    font-size: 19px; font-weight: 700; margin: 0 0 8px;
    line-height: 1.3; color: #0f172a;
}
@media (min-width: 560px) {
    .badger-result__headline { font-size: 22px; }
}

.badger-result__subtext {
    font-size: 14px; color: #475569; margin: 0 auto;
    line-height: 1.5; max-width: 420px;
}
@media (min-width: 560px) {
    .badger-result__subtext { font-size: 15px; }
}

.badger-result__actions {
    display: flex; flex-direction: column; gap: 10px;
    margin-top: 20px; align-items: stretch;
}
@media (min-width: 560px) {
    .badger-result__actions { flex-direction: row; justify-content: center; margin-top: 24px; }
}

.badger-result__actions .badger-cta {
    width: 100%; padding: 12px 20px;
    font-weight: 600; font-size: 15px;
    border-radius: 8px; border: 0; cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease;
}
@media (min-width: 560px) {
    .badger-result__actions .badger-cta { min-width: 124px; width: auto; padding: 10px 22px; }
}
.badger-result__actions .badger-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
}
.badger-result__actions .badger-cta:active { transform: translateY(0); }

.badger-result__actions .btn-primary  { background: #7c3aed; color: #fff; }
.badger-result__actions .btn-primary:hover  { background: #6d28d9; }
.badger-result__actions .btn-secondary { background: #f1f5f9; color: #334155; }
.badger-result__actions .btn-secondary:hover { background: #e2e8f0; }

/* Severity: top border + emoji badge tint + headline color */
.badger-modal-box:has(.badger-result--ok)       { border-top-color: #10b981; }
.badger-modal-box:has(.badger-result--repaired) { border-top-color: #3b82f6; }
.badger-modal-box:has(.badger-result--warning)  { border-top-color: #f59e0b; }
.badger-modal-box:has(.badger-result--critical) { border-top-color: #ef4444; }
.badger-modal-box:has(.badger-result--info)     { border-top-color: #64748b; }

.badger-result--ok       .badger-result__emoji-wrap { background: #d1fae5; }
.badger-result--repaired .badger-result__emoji-wrap { background: #dbeafe; }
.badger-result--warning  .badger-result__emoji-wrap { background: #fef3c7; }
.badger-result--critical .badger-result__emoji-wrap { background: #fee2e2; }
.badger-result--info     .badger-result__emoji-wrap { background: #f1f5f9; }

.badger-result--ok       .badger-result__headline { color: #047857; }
.badger-result--repaired .badger-result__headline { color: #1d4ed8; }
.badger-result--warning  .badger-result__headline { color: #b45309; }
.badger-result--critical .badger-result__headline { color: #b91c1c; }

/* DARK theme (admin with data-erp-theme=dark) */
html[data-erp-theme="dark"] .badger-modal-box { background: #1e293b; color: #f1f5f9; }
html[data-erp-theme="dark"] .badger-result__headline { color: #f1f5f9; }
html[data-erp-theme="dark"] .badger-result__subtext  { color: rgba(241, 245, 249, 0.78); }
html[data-erp-theme="dark"] .badger-result__emoji-wrap { background: #334155; }
html[data-erp-theme="dark"] .badger-result--ok       .badger-result__emoji-wrap { background: rgba(16, 185, 129, 0.18); }
html[data-erp-theme="dark"] .badger-result--repaired .badger-result__emoji-wrap { background: rgba(59, 130, 246, 0.20); }
html[data-erp-theme="dark"] .badger-result--warning  .badger-result__emoji-wrap { background: rgba(245, 158, 11, 0.20); }
html[data-erp-theme="dark"] .badger-result--critical .badger-result__emoji-wrap { background: rgba(239, 68, 68, 0.20); }
html[data-erp-theme="dark"] .badger-result--ok       .badger-result__headline { color: #6ee7b7; }
html[data-erp-theme="dark"] .badger-result--repaired .badger-result__headline { color: #93c5fd; }
html[data-erp-theme="dark"] .badger-result--warning  .badger-result__headline { color: #fcd34d; }
html[data-erp-theme="dark"] .badger-result--critical .badger-result__headline { color: #fca5a5; }
html[data-erp-theme="dark"] .badger-result__actions .btn-secondary { background: #334155; color: #e2e8f0; }
html[data-erp-theme="dark"] .badger-result__actions .btn-secondary:hover { background: #475569; }