:root {
    --bs-primary: #1b5e50;
    --bs-primary-rgb: 27, 94, 80;
    --mb-sidebar-width: 15rem;
}

/* Bootstrap derives button and link colours from these, so overriding them here is enough to
   theme the whole application without touching component classes. */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #174f43;
    --bs-btn-hover-border-color: #174f43;
    --bs-btn-active-bg: #123c33;
    --bs-btn-active-border-color: #123c33;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.text-primary {
    color: var(--bs-primary) !important;
}

.mb-shell {
    min-height: 100vh;
}

.mb-sidebar {
    width: var(--mb-sidebar-width);
    background-color: #10261f;
}

/* The desktop sidebar stays pinned while the page scrolls. An explicit height stops the flex
   parent from stretching it to the page length (which would defeat sticky positioning), and
   overflow lets a long link list scroll on its own on short screens. */
.mb-sidebar-sticky {
    height: 100vh;
    overflow-y: auto;
}

.mb-sidebar .nav-link {
    color: rgba(255, 255, 255, 0.75);
    border-radius: 0.375rem;
}

.mb-sidebar .nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
}

.mb-sidebar .nav-link.active {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.16);
}

.mb-brand {
    color: #fff;
    text-decoration: none;
}

/* SMTP codes and raw responses are read character by character, so they get a mono face. */
.mb-mono {
    font-family: var(--bs-font-monospace);
    font-size: 0.875em;
}

.mb-auth-card {
    max-width: 26rem;
    width: 100%;
}

/* Email preview: fixed height, the message scrolls inside its own sandboxed frame. */
.mb-email-preview {
    height: 42rem;
    border: 0;
    background-color: #fff;
}

/* Marks the label of a compulsory field. */
.mb-required::after {
    content: " *";
    color: var(--bs-danger);
}

/* Campaign channel picker: the radio is visually hidden (.btn-check) and its label is the card. */
.mb-channel-option {
    cursor: pointer;
}

.btn-check:checked + .mb-channel-option {
    border-color: var(--bs-primary) !important;
    background-color: rgba(var(--bs-primary-rgb), 0.08);
    box-shadow: inset 0 0 0 1px var(--bs-primary);
}

.btn-check:focus-visible + .mb-channel-option {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* A message as the recipient's phone would show it, on the non-email campaign preview. */
.mb-message-bubble {
    max-width: 28rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background-color: var(--bs-tertiary-bg);
    border-radius: 1rem 1rem 1rem 0.25rem;
}