/* Cloudpedia Top Bar — full-width sticky navigation element
   Scope: all selectors under .cp-top-bar, .cp-verify-banner or .cp-twofa-banner */

/* Top Bar Container — full width, sticky, 56px tall */
.cp-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 56px;
    padding: 0 24px;
    background-color: var(--cp-surface);
    border-bottom: 1px solid var(--cp-border-neutral);
    gap: 16px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    box-sizing: border-box;
}

/* Left side: Mobile toggle + Section name */
.cp-top-bar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.cp-top-bar .cp-mobile-menu-toggle {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--cp-gray-900);
    font-size: 18px;
}

.cp-top-bar .cp-mobile-menu-toggle:hover {
    background-color: var(--cp-surface-muted);
}

.cp-top-bar .cp-mobile-menu-toggle:focus-visible {
    outline: 2px solid var(--cp-primary-500);
    outline-offset: 2px;
}

.cp-top-bar-section-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--cp-gray-900);
    white-space: nowrap;
    text-transform: none;
}

/* Right side: Icons and controls */
.cp-top-bar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Notifications (details element) */
.cp-top-bar-notifications {
    position: relative;
}

.cp-top-bar-notifications summary {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--cp-gray-600);
    width: 40px;
    height: 40px;
    list-style: none;
    position: relative;
}

.cp-top-bar-notifications summary:hover {
    color: var(--cp-gray-900);
}

.cp-top-bar-notifications summary:focus-visible {
    outline: 2px solid var(--cp-primary-500);
    outline-offset: 2px;
}

.cp-top-bar-bell {
    width: 20px;
    height: 20px;
}

/* Badge centered on the icon's top-right corner (#414): 40px control, 20px icon
   spans box coords 10-30, so a 16px badge at top:2px right:2px puts the badge
   center exactly on the icon corner (30,10) — the classic notification look.
   (The approved mock badges the bell at top:6/right:6; on the cart that floats
   over the SVG's empty top-right corner because the cart glyph slants away —
   user rejected 2026-10-09. 999px radius keeps single digits circular while
   multi-digit counts grow into a pill.) */
.cp-top-bar-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background-color: var(--cp-primary-500);
    color: var(--cp-surface);
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    line-height: 1;
}

.cp-top-bar-notifications-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background-color: var(--cp-surface);
    border: 1px solid var(--cp-border-neutral);
    border-radius: 8px;
    box-shadow: 0 12px 32px var(--cp-shadow-pop);
    min-width: 320px;
    z-index: 1000;
}

.cp-top-bar-notifications-panel .client-alerts {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cp-top-bar-notifications-panel .client-alerts li {
    border-bottom: 1px solid var(--cp-border-neutral);
}

.cp-top-bar-notifications-panel .client-alerts li:last-child {
    border-bottom: none;
}

.cp-top-bar-notifications-panel .client-alerts a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    color: var(--cp-gray-900);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.5;
}

.cp-top-bar-notifications-panel .client-alerts a:hover {
    background-color: var(--cp-surface-muted);
}

.cp-top-bar-notifications-panel .client-alerts i {
    flex-shrink: 0;
    margin-top: 2px;
}

.cp-top-bar-notifications-panel .client-alerts .none {
    padding: 12px 16px;
    color: var(--cp-gray-600);
    text-align: center;
    font-size: 13px;
}

/* Cart button */
.cp-top-bar-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--cp-gray-600);
    width: 40px;
    height: 40px;
    position: relative;
    text-decoration: none;
}

.cp-top-bar-cart:hover {
    color: var(--cp-gray-900);
}

.cp-top-bar-cart:focus-visible {
    outline: 2px solid var(--cp-primary-500);
    outline-offset: 2px;
}

.cp-top-bar-cart svg {
    width: 20px;
    height: 20px;
}

/* Divider */
.cp-top-bar-divider {
    width: 1px;
    height: 24px;
    background-color: var(--cp-border-neutral);
}

/* Account button — name and icon flex layout */
.cp-top-bar-account {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: var(--cp-gray-900);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.cp-top-bar-account:hover {
    color: var(--cp-primary-500);
}

.cp-top-bar-account:focus-visible {
    outline: 2px solid var(--cp-primary-500);
    outline-offset: 2px;
}

.cp-top-bar-account-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-top-bar-account-icon {
    display: none;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Account switch icon */
.cp-top-bar-account-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--cp-gray-600);
    border-radius: 6px;
    padding: 6px;
    cursor: pointer;
    color: var(--cp-gray-600);
    width: 32px;
    height: 32px;
    text-decoration: none;
}

.cp-top-bar-account-switch:hover {
    color: var(--cp-gray-900);
    border-color: var(--cp-gray-900);
}

.cp-top-bar-account-switch:focus-visible {
    outline: 2px solid var(--cp-primary-500);
    outline-offset: 2px;
}

.cp-top-bar-account-switch svg {
    width: 16px;
    height: 16px;
}

/* Return to Admin button */
.cp-top-bar-return-admin {
    padding: 6px 12px;
    background-color: transparent;
    border: 1px solid var(--cp-warning-500);
    border-radius: 6px;
    color: var(--cp-warning-500);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.cp-top-bar-return-admin:hover {
    background-color: var(--cp-warning-500-soft);
}

.cp-top-bar-return-admin:focus-visible {
    outline: 2px solid var(--cp-primary-500);
    outline-offset: 2px;
}

.cp-top-bar-admin-short {
    display: none;
}

/* Mobile layout <= 768px */
@media (max-width: 768px) {
    .cp-top-bar {
        padding: 0 16px;
    }

    .cp-top-bar .cp-mobile-menu-toggle {
        display: flex;
    }

    .cp-top-bar-account {
        padding: 8px;
        background: none;
        border: 1px solid var(--cp-gray-600);
        border-radius: 6px;
        width: 32px;
        height: 32px;
        gap: 0;
    }

    .cp-top-bar-account-name {
        display: none;
    }

    .cp-top-bar-account-icon {
        display: block;
    }

    .cp-top-bar-admin-long {
        display: none;
    }

    .cp-top-bar-admin-short {
        display: inline;
    }

    .cp-top-bar-account-switch {
        width: 32px;
        height: 32px;
    }

    .cp-top-bar-divider {
        display: none;
    }
}

/* Desktop layout > 768px */
@media (min-width: 769px) {
}

/* Email Verification Banner — wrapping div for parent JS compatibility */
.cp-verify-banner-wrap {
    background-color: var(--cp-surface);
}

.cp-verify-banner-wrap.verification-banner.email-verification {
    background-color: var(--cp-surface);
}

/* Override parent cloudx.css container styling to prevent double pink background */
.cp-verify-banner-wrap.email-verification .container {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

.cp-verify-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    background-color: var(--cp-danger-soft-bg);
    border: 1px solid var(--cp-danger-soft-border);
    border-radius: 8px;
    margin: 12px auto;
    max-width: var(--cp-content-max);
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.cp-verify-banner-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.cp-verify-banner-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--cp-danger);
    font-size: 18px;
}

.cp-verify-banner-text {
    font-size: 14px;
    color: var(--cp-danger);
}

.cp-verify-banner-resend {
    flex-shrink: 0;
    padding: 6px 12px;
    background-color: var(--cp-danger);
    color: var(--cp-surface);
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.cp-verify-banner-resend:hover {
    background-color: var(--cp-warning-700);
}

.cp-verify-banner-close {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--cp-danger);
    font-size: 20px;
    line-height: 1;
}

.cp-verify-banner-close:hover {
    opacity: 0.8;
}

/* Mobile layout for verify banner */
@media (max-width: 768px) {
    .cp-verify-banner {
        flex-wrap: wrap;
        gap: 8px;
        position: relative;
    }

    .cp-verify-banner-left {
        order: 1;
        width: 100%;
    }

    .cp-verify-banner-resend {
        order: 2;
        width: calc(100% - 32px - 8px);
    }

    .cp-verify-banner-close {
        order: 3;
        position: absolute;
        top: 12px;
        right: 12px;
        padding: 0;
    }
}

/* =========================================================================
   2FA BANNER (#401) — Home-only recommendation, sits under the email banner.
   Scope: .cp-twofa-banner* (wrapper and tokens follow the email banner).
   ========================================================================= */
.cp-twofa-banner-wrap {
    background-color: var(--cp-surface);
}

/* Override parent cloudx.css container styling, as for the email banner */
.cp-twofa-banner-wrap .container {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

.cp-twofa-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--cp-content-max);
  margin: 12px auto;
  padding: 12px 16px;
  border: 1px solid var(--cp-warning-500);
  border-radius: 8px;
  background: var(--cp-warning-500-soft);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
/* Stacked under the email banner: an 8px gap. Only positive margins — the
   email banner (rendered only when WHMCS shows it) gives up 4px of its
   bottom margin and the 2FA banner drops its top margin, so the 2FA banner
   alone keeps its full 12px clearance below the Top Bar. */
.cp-verify-banner-wrap:has(+ .cp-twofa-banner-wrap) .cp-verify-banner { margin-bottom: 8px; }
.cp-verify-banner-wrap + .cp-twofa-banner-wrap .cp-twofa-banner { margin-top: 0; }
.cp-twofa-banner-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.cp-twofa-banner-icon { flex-shrink: 0; display: inline-flex; width: 20px; height: 20px; color: var(--cp-warning-700); }
.cp-twofa-banner-icon svg { width: 20px; height: 20px; }
.cp-twofa-banner-text { font-size: 14px; color: var(--cp-warning-700); }
.cp-twofa-banner-action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--cp-warning-500);
  border-radius: 8px;
  background: var(--cp-surface);
  color: var(--cp-warning-700);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.cp-twofa-banner-action:hover { background: var(--cp-warning-500); border-color: var(--cp-warning-500); color: var(--cp-surface); text-decoration: none; }
.cp-twofa-banner-close {
  flex-shrink: 0;
  padding: 4px 8px;
  border: 0;
  background: none;
  color: var(--cp-warning-700);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.cp-twofa-banner-close:hover { opacity: .8; }
/* Mobile layout, same breakpoint as the email banner */
@media (max-width: 768px) {
  .cp-twofa-banner { position: relative; flex-wrap: wrap; gap: 8px; }
  .cp-twofa-banner-left { width: 100%; padding-right: 28px; }
  .cp-twofa-banner-action { width: 100%; justify-content: center; }
  .cp-twofa-banner-close { position: absolute; top: 12px; right: 12px; padding: 0; }
}