/* ============================================================
   Global base overrides — loaded AFTER modern.css on every page.
   Flattens the branded gradient backdrop to a clean white canvas.
   modern.css is NOT modified (no drift on image update).
   ============================================================ */

/* modern.css body sets both background-color (var(--wd-bg)) and a
   background-image (two radial gradients + one linear gradient).
   The gradient paints ON TOP of the color, so BOTH must be reset —
   changing only background-color would leave the gradient visible. */
body {
    background-color: #ffffff;
    background-image: none;
    background-attachment: scroll;
}

/* ============================================================
   Top navbar — the shared app shell (webmail AND account/settings
   pages both render partials/navbar.hbs), so it lives here in base.css
   rather than in webmail.css, which only loads on activeWebmail.
   modern.css styles it rgba(255,255,255,.9) + blur + a soft outer shadow.
   Over a white body the translucency reads identical, but on webmail the
   rail parks flush under the bar (top: 64) and its top edge would show
   through the 90% white — opaque here keeps that edge clean everywhere.
   The soft shadow becomes an INSET hairline: every surface in the app
   (toolbar, list header, pane header, settings panels) is a flat plane
   separated by a hairline, so the top edge should read the same. Inset
   draws inside the existing 64px box — zero layout shift, unlike a border.
   ============================================================ */
.navbar {
    background: #fff;
    box-shadow: inset 0 -1px 0 var(--wd-border, #e2e8f0);
}

/* Active section = a SOFT accent chip — the same language as the webmail
   sidebar's active folder, the toolbar's active filter and the pane's Reply
   button. The old solid teal slab was the last filled block in the chrome: it
   competed with Compose for attention and left the unread badge (also solid
   teal) with zero contrast on top of it. Hover keeps modern.css's light teal
   tint, which now sits just under the chip — a natural hover/active gradient. */
/* Specificity note: .active can be toggled at runtime and modern.css's
   generic .navbar-default .navbar-nav>li>a sits later in the load order.
   Adding a second .navbar class (0,4,1 vs 0,3,1) makes the chip win
   regardless of when the class appears. */
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:hover,
.navbar.navbar-default .navbar-nav > .active > a:focus {
    background: var(--wd-accent-soft, #d4f0eb);
    color: var(--wd-accent-strong, #0b5c56);
}

/* Unread count in the nav: a quiet neutral pill by default, mirroring the
   webmail sidebar counter (same tokens), accent-tinted when it sits on the
   active chip. Height + equal line-height do the vertical centring; display
   stays whatever the inline style / SSE handler writes (block/none). */
.navbar .navbar-nav > li > a .badge {
    display: block;
    box-sizing: border-box;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #e5e9ef;
    color: var(--wd-muted, #6b7280);
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

.navbar .navbar-nav > .active > a .badge {
    background: rgba(15, 118, 110, 0.18);
    color: var(--wd-accent-strong, #0b5c56);
}

/* Avatar: neutral hairline ring — the teal-tinted one was one more accent
   source in a bar that already carries the brand and the active chip */
.navbar-nav img.profile-image {
    border-color: rgba(15, 23, 42, 0.1);
}

/* Account dropdown: the "current page" marker uses the same soft chip
   instead of modern.css's solid teal block */
.navbar .dropdown-menu > .active > a,
.navbar .dropdown-menu > .active > a:hover,
.navbar .dropdown-menu > .active > a:focus {
    background: var(--wd-accent-soft, #d4f0eb);
    color: var(--wd-accent-strong, #0b5c56);
}

/* ============================================================
   Radius system — one8px language for every interactive surface.
   The token redefinition (modern.css ships16/10/22) aligns every
   consumer app-wide in one move: panels, tables, modals, cards,
   the popup form. The block below extends the same8px to the
   surfaces modern/lumen style without the tokens: buttons, form
   controls, menus, alerts, navbar pills. base.css loads AFTER
   lumen/wildduck/modern, so these win every equal-specificity tie.
   Intentional exceptions live elsewhere and stay untouched:
   50% circles (avatars, spinners, icon-only round buttons),
   999px pills (count badges, progress tracks, scrollbar thumbs)
   and semantic shapes (folder tabs, colour swatches, kbd).
   ============================================================ */
:root {
    --wd-radius: 8px;
    --wd-radius-sm: 8px;
    --wd-radius-lg: 12px;
}

.btn,
button,
.form-control,
.dropdown-toggle,
.dropdown-menu,
.alert,
.alert-dismissible,
.input-group,
.navbar-toggle,
.note-btn,
.note-popover {
    border-radius: 8px;
}

/* flash alerts live in the shared .flash-messages strip */
.flash-messages .alert,
.flash-messages .alert-dismissible {
    border-radius: 8px;
}

/* grouped controls keep the attached language at the new radius */
.btn-group > .btn:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.btn-group > .btn:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.btn-group > .dropdown-menu {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.dropdown-menu > li > a {
    border-radius: 8px;
}

.input-group .form-control:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.input-group .form-control:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.input-group-btn:first-child > .btn {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.input-group-btn:last-child > .btn {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* navbar shortcuts (Webmail badge link + account dropdown toggle) */
.navbar .navbar-nav > li > a {
    border-radius: 8px;
}

/* Element+class ties: modern.css styles inputs via an element list
   (input[type=…], textarea, select — specificity0,1,1) which outranks the
   plain .form-control above; these match-or-beat it and load later. */
input.form-control,
textarea.form-control,
select.form-control,
.note-form-control {
    border-radius: 8px;
}

/* summernote chrome appended to body (outside any scoped wrapper) */
.note-popover.popover,
.note-popover.popover.in {
    border-radius: 8px;
}

button.note-color-reset,
button.note-color-select,
.btn.note-color-reset,
.btn.note-color-select,
.note-color-select-btn {
    border-radius: 8px;
}

/* summernote.css ships its colour-palette buttons under an(0,8,0)-deep
   chain with5px corners; replicate the chain + one class so the8px wins
   regardless of load order (summernote.css is linked at the END of body
   by the image-only scripts partial, so it beats every equal-spec tie). */
.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-select.btn,
.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-reset.btn,
.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-select.btn {
    border-radius: 8px;
}