/* External Sendy UX overlay injected by nginx. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
    --bf-font: "Manrope", "Questrial", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bf-bg: #fbf7ff;
    --bf-bg-soft: #f5efff;
    /* --bf-panel: #ffffff; */
    /* --bf-panel-soft: #fcf8ff; */
    --bf-ink: #142033;
    --bf-muted: #66758c;
    --bf-border: #2d2d2d;
    --bf-border-strong: #E1EAFD;
    --bf-accent: #334bea;
    --bf-accent: #000000;
    --bf-accent-strong: #212dce;
    --bf-accent-strong: oklch(0.37 0.05 18.22);
    --bf-accent-soft: #f5f6ff;
    --bf-accent-soft: oklch(97.7% .014 308.299);
    --bf-nav: #ffffff;
    --bf-nav-soft: #ffffff;
    --bf-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    --bf-shadow-soft: 0 10px 24px rgba(15, 23, 42, 0.05);
}

html{
    background: linear-gradient(180deg, #f6f0ff 0%, #fcf8ff 100%);
}

body{
    min-height: 100vh;
    /* all.css gives body 60px of top and 56px of bottom padding to clear the
       fixed navbar and footer. Without border-box those add to the 100vh
       min-height instead of fitting inside it, so every page was 116px taller
       than the viewport and scrolled even with no content to scroll to. */
    box-sizing: border-box;
    background: radial-gradient(circle at top left, rgb(124 194 255 / 5%), transparent 24%), linear-gradient(180deg, #1c1c1c 0%, #1d1d1d 100%);
    color: var(--bf-ink);
    font-family: var(--bf-font);
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.separator{
    display: none;
}

body,
button,
input,
select,
textarea{
    font-family: var(--bf-font);
}

a{
    color: oklch(0.42 0 0);
    transition: color 0.18s ease, opacity 0.18s ease, background 0.18s ease;
}

a:hover{
    color: var(--bf-accent-strong);
    text-decoration: none;
}

p{
    line-height: 25px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.lead{
    color: var(--bf-ink);
    font-family: var(--bf-font);
}

h2{
    margin: 0 0 14px;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.05em;
}

blockquote{
    padding: 20px;
    background: #FAFBFD;
    border-radius: 10px;
    border-left: 5px solid #E1EBFD;
    border-top:  1px solid #E1EBFD;
    border-right: 1px solid #E1EBFD;
    border-bottom: 1px solid #E1EBFD;
    /* border: solid 1px #E1EBFD; */
}
.tooltip{
    font-size: 10px;
    /* Bootstrap 2 ships .tooltip at z-index 1020, below .navbar-fixed-top's
       1030, so any tooltip that opens upward near the top of the page (e.g.
       the info icon beside "Set a title for this campaign?" on edit.php) was
       drawn behind the fixed header. 1070 matches Bootstrap 3's tooltip layer
       and keeps tooltips above modals (1050) too. */
    z-index: 1070;
}

.lead,
.lead a{
    margin: 8px 0 10px;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.05em;
    color: var(--bf-ink);
}

.top-brand-pencil{
    color: var(--bf-accent);
}

.navbar-fixed-top{
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.07);
}

.navbar-fixed-top .navbar-inner{
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid var(--bf-border);
    box-shadow: none;
}

.navbar .brand{
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin: 6px 0 0;
    padding-left: 0px;
    color: oklch(0 0 0);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.04em;
    text-shadow: none;
}

.navbar .brand:hover{
    color: var(--bf-accent);
}

#forgot-form input{
    width: 192px;
}

.navbar .btn-group{
    margin-top: 10px;
}

/* These two buttons (brand switcher, user menu) each hold a mix of an image or
   icon glyph, a text label and a caret. Under inline layout every one of those
   lands on a different vertical position — the image on `vertical-align`, the
   glyph on the text baseline, the caret hand-nudged down with a margin — so the
   row read as staggered on a phone, where the labels are hidden and only the
   icons are left to compare. A flex row centres all three on one axis and
   spaces them itself, so none of them need their own nudge. */
.navbar .btn-group > .btn{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: auto;
    padding: 6px 8px;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: #0f172a;
    font-size: 14px;
    font-weight: 600;
}

.navbar .btn-group > .btn:hover,
.navbar .btn-group > .btn:focus,
/* Bootstrap paints an open .dropdown-toggle with its pressed background —
   #e6e6e6 for the brand switcher, and #222 for the user menu, which is
   .btn-inverse. Either one is a slab of the wrong colour behind the icon and
   caret. Flat and transparent while open, like hover. */
.navbar .btn-group.open > .btn.dropdown-toggle,
.navbar .btn-group.open > .btn.dropdown-toggle:hover,
.navbar .btn-group.open > .btn.dropdown-toggle:focus{
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--bf-accent-strong);
    transform: none;
}

.navbar .btn-group > .btn .icon-user{
    display: inline-block;
}

.navbar .btn-group > .btn .caret{
    /* The margin dropped the caret from the top of the line box down to the
       middle under inline layout, which the flex row above replaced. (Colour is
       already currentColor for every .btn caret further down this sheet.) */
    margin-top: 0;
}

.tooltip-inner{
    font-size: 12px;
    padding: 8px 10px;
}

.ares-test-form{
    position: relative;
    top: 20px;
}
.alert a{
    color: #FFF;
}

.ses-quota-production-link{
    color: #8ab4ff;
}

.ses-quota-production-link:hover{
    color: #adc7ff;
}

#preview-form{
    margin: 15px 0 0 10px;
}

.container-fluid{
    padding-left: 24px;
    padding-right: 24px;
}

.container-fluid > .row-fluid{
    margin-top: 20px;
}

.container-fluid > .row-fluid > .span2,
.container-fluid > .row-fluid > .span10,
.container-fluid > .row-fluid > .sendy-report-card{
    min-height: 1px;
}

.container-fluid > .row-fluid > .span2{
    position: sticky;
    top: 88px;
}

.container-fluid > .row-fluid > .span10,
.container-fluid > .row-fluid > .sendy-report-card{
    background: white;
    /* border: 1px solid var(--bf-border); */
    border-radius: 24px;
    padding: 24px 28px 22px;
    box-shadow: var(--bf-shadow);
}

.container-fluid > .row-fluid > .span10 > .row-fluid:first-child{
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 18px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.container-fluid > .row-fluid > .span10 > .row-fluid:first-child > [class*="span"]{
    float: none;
    width: auto;
    margin-left: 0;
}

.container-fluid > .row-fluid > .span10 > .row-fluid:first-child br{
    display: none;
}

.container-fluid > .row-fluid > .span10 > .row-fluid:first-child .lead,
.container-fluid > .row-fluid > .span10 > .row-fluid:first-child .lead a{
    margin: 0 0 4px;
}

.container-fluid > .row-fluid > .span10 > .row-fluid:first-child h2{
    margin: 0;
    font-size: 21px;
}

.container-fluid > .row-fluid > .span10 > .row-fluid:first-child .well + .alert{
    margin-bottom: 20px;
}

.sidebar-box{
    padding: 14px 0;
    border-radius: 10px;
}

.sidebar-box .nav{
    margin-bottom: 4px;
}

.sidebar-box .nav-header{
    margin: 14px 18px 10px;
    padding: 0;
    color: var(--bf-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: none;
}

.sidebar-box .nav-list > li > a{
    margin: 2px 10px;
    padding: 12px 14px;
    border-radius: 14px;
    color: #233146;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-shadow: none;
}

.sidebar-box .nav-list > li > a:hover,
.sidebar-box .nav-list > li > a:focus{
    background: linear-gradient(180deg, #f5f8ff 0%, #f5f8ff 100%) !important;
    color: #233146 !important;
    text-shadow: none !important;
    box-shadow: inset 0 0 0 1px rgb(51 120 234 / 10%);
}

.sidebar-box .nav-list [class^="icon-"]{
    margin-right: 10px;
    color: #8b9ab0;
}

.sidebar-box .nav-list > .active > a,
.sidebar-box .nav-list > .active > a:hover,
.sidebar-box .nav-list > .active > a:focus{
    background: linear-gradient(180deg, #f5f8ff 0%, #f5f8ff 100%) !important;
    color: #233146 !important;
    text-shadow: none !important;
    box-shadow: inset 0 0 0 1px rgb(51 120 234 / 10%);
}

.sidebar-box .nav-list > .active > a [class^="icon-"],
.sidebar-box .nav-list > .active > a .icon-white{
    color: var(--bf-accent) !important;
}

.sidebar-box .nav-list > .active > a .caret{
    border-top-color: var(--bf-ink);
    border-bottom-color: var(--bf-ink);
    opacity: 1;
    filter: alpha(opacity=100);
}

#sidebar-new-campaign-dropdown.active > a .caret,
#sidebar-new-campaign-dropdown.active > a:hover .caret,
#sidebar-new-campaign-dropdown.active > a:focus .caret,
#sidebar-new-template-dropdown.active > a .caret,
#sidebar-new-template-dropdown.active > a:hover .caret,
#sidebar-new-template-dropdown.active > a:focus .caret{
    border-top: 4px solid var(--bf-ink) !important;
    border-right: 4px solid transparent !important;
    border-left: 4px solid transparent !important;
    opacity: 1 !important;
    filter: alpha(opacity=100);
}

#sidebar-new-campaign-dropdown > a,
#sidebar-new-template-dropdown > a,
.new-campaign-toggle{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

#sidebar-new-campaign-dropdown > a,
#sidebar-new-template-dropdown > a{
    display: flex;
}

#sidebar-new-campaign-dropdown > a [class^="icon-"],
#sidebar-new-template-dropdown > a [class^="icon-"],
.new-campaign-toggle [class^="icon-"]{
    flex: 0 0 auto;
    margin-right: 0;
}

#sidebar-new-campaign-dropdown > a .new-campaign-label,
#sidebar-new-template-dropdown > a .new-template-label,
.new-campaign-toggle .new-campaign-label{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

#sidebar-new-campaign-dropdown > a .caret,
#sidebar-new-template-dropdown > a .caret,
.new-campaign-toggle .caret{
    flex: 0 0 auto;
    margin-top: 0;
}

/* The "New campaign"/"New template"/autoresponder menus list every saved
   template, so a brand with a lot of them opened a menu taller than the
   viewport. The menu is absolutely positioned, which still counts towards the
   document's scroll height, so toggling it stretched the whole page instead of
   just overlaying it. Cap the height and scroll inside the menu instead. */
.dropdown-menu.new-campaign-dropdown-menu{
    max-height: min(60vh, 380px);
    max-width: 280px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Bootstrap keeps menu items on one line, so with overflow-x hidden a long
   template name would be clipped mid-word without this. */
.dropdown-menu.new-campaign-dropdown-menu > li > a{
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pinned to the top of the (now scrollable) menu so the filter stays reachable
   after you scroll into the results. The -8px offset parks it against the
   menu's border rather than its padding box, so items don't slide through a
   gap above it; the matching padding-top keeps the field where it looks like
   it belongs. Opaque background for the same reason. */
.dropdown-menu .new-campaign-template-search-row{
    position: sticky;
    top: -8px;
    z-index: 1;
    padding: 8px 4px 6px;
    background: #ffffff;
}

.dropdown-menu .new-campaign-template-search-form{
    margin: 0;
}

.dropdown-menu input.new-campaign-template-search{
    box-sizing: border-box;
    width: 100%;
    height: 34px;
    min-height: 34px;
    margin: 0;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 13px;
}

.dropdown-menu .new-campaign-template-empty{
    padding: 8px 12px;
    color: var(--bf-muted);
    font-size: 13px;
}

.btn,
#campaign-save-only-btn,
#autoresponder-save-only-btn{
    /* Bootstrap's .btn lost its display:inline-block somewhere upstream, so
       <a class="btn"> stayed a plain inline box. Inline boxes fragment their
       padding and background across line boxes, so any long-labelled link
       button broke into two offset pill halves with the text overlapping once
       it wrapped. <button class="btn"> was unaffected (buttons are inline-block
       by default), which is why this only showed on the anchor-based ones. */
    display: inline-block;
    vertical-align: middle;
    padding: 12px 14px;
    border: 1px solid var(--bf-border);
    border-radius: 20px;
    background: oklch(1 0 0);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
    color: #1e293b;
    font-size: 13px;
    font-weight: 700;
    text-shadow: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.btn:hover,
.btn:focus,
#campaign-save-only-btn:hover,
#autoresponder-save-only-btn:hover,
#campaign-save-only-btn:focus,
#autoresponder-save-only-btn:focus{
    border-color: var(--bf-border-strong);
    background: #F6F8FF;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    color: var(--bf-ink);
    transform: translateY(-1px);
}

.btn-primary{
    background: linear-gradient(180deg, #a855f7 0%, #9333ea 100%);
    border-color: #E1EAFD;
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus{
    background: linear-gradient(180deg, #9333ea 0%, #7e22ce 100%);
    border-color: #7e22ce;
    color: #ffffff;
}

.btn-inverse{
    background: linear-gradient(180deg, #a855f7 0%, #9333ea 100%);
    border-color: #9333ea;
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(147, 51, 234, 0.18);
}

.btn-inverse:hover,
.btn-inverse:focus{
    background: linear-gradient(180deg, #9333ea 0%, #7e22ce 100%);
    border-color: #7e22ce;
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(126, 34, 206, 0.22);
}

.btn-white{
    background: #ffffff;
    border-color: var(--bf-border);
    color: #1e293b;
}

.btn-white:hover,
.btn-white:focus{
    background: #fcf8ff;
    border-color: var(--bf-border-strong);
    color: var(--bf-ink);
}

.btn-group > .btn:first-child,
.btn-group > .btn + .dropdown-toggle{/* border-radius: 20px; */}

.btn-group[data-toggle="buttons-radio"] > .btn.active,
.btn-group[data-toggle="buttons-radio"] > .btn.active:hover,
.btn-group[data-toggle="buttons-radio"] > .btn.active:focus,
.btn-group[data-toggle="buttons-radio"] > .btn:active,
.btn-group.tracking > .btn.active,
.btn-group.tracking > .btn.active:hover,
.btn-group.tracking > .btn.active:focus,
.btn-group.tracking > .btn:active{
    background: linear-gradient(180deg, #242428 0%, #17171b 100%);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--bf-ink);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
    text-shadow: none;
    transform: none;
    z-index: 2;
}

.btn-group[data-toggle="buttons-radio"] > .btn.active [class^="icon-"],
.btn-group[data-toggle="buttons-radio"] > .btn:active [class^="icon-"],
.btn-group.tracking > .btn.active [class^="icon-"],
.btn-group.tracking > .btn:active [class^="icon-"]{
    color: currentColor;
}

.btn .caret{
    margin-top: 8px;
}

.dropdown-menu{
    margin-top: 10px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid var(--bf-border);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
}

.dropdown-menu .divider{
    margin: 8px 0;
    border-bottom-color: #e2ebff;
    background-color: #f9fbff;
}

.dropdown-menu .dropdown-header{
    padding: 8px 12px 6px;
    color: var(--bf-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dropdown-menu a{
    padding: 10px 12px;
    border-radius: 10px;
    color: #223149;
    font-weight: 600;
    font-size: 13px;
}

.dropdown-menu li > a:hover,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover{
    background: linear-gradient(180deg, #f5f8ff 0%, #f5f8ff 100%) !important;
    color: #233146 !important;
    text-shadow: none !important;
    box-shadow: inset 0 0 0 1px rgb(51 120 234 / 10%);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
textarea,
select,
.uneditable-input{
    min-height: 42px;
    border: 1px solid var(--bf-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.02);
    color: var(--bf-ink);
    font-size: 14px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    padding: 2px 12px;
}

textarea{
    min-height: 120px;
    padding: 10px 10px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus{
    border-color: rgba(147, 51, 234, 0.4);
    box-shadow: 0 0 0 4px rgba(147, 51, 234, 0.1);
    border-radius: 14px;
}

input[type="file"]{
    display: block;
    width: 100%;
    height: 34px;
    max-width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--bf-muted);
    font-size: 12px;
    line-height: 34px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

input[type="file"]::file-selector-button{
    margin-right: 8px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--bf-border);
    border-radius: 11px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f6ff 100%);
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.04);
    color: var(--bf-ink);
    font-family: var(--bf-font);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

input[type="file"]::-webkit-file-upload-button{
    margin-right: 8px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--bf-border);
    border-radius: 11px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f6ff 100%);
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.04);
    color: var(--bf-ink);
    font-family: var(--bf-font);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

input[type="file"]:hover::file-selector-button,
input[type="file"]:focus::file-selector-button,
input[type="file"]:hover::-webkit-file-upload-button,
input[type="file"]:focus::-webkit-file-upload-button{
    border-color: var(--bf-border-strong);
    background: #F6F8FF;
    color: var(--bf-accent-strong);
}

select,
input[type="file"]{
    height: 48px;
}

.thirtytwo{
    margin-top: 6px;
}

#attachments{
    max-width: 100%;
}

#attachments::file-selector-button,
#attachments::-webkit-file-upload-button{
    min-width: 94px;
}

label,
.control-label{
    color: #304155;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

legend{
    margin-bottom: 16px;
    border-bottom: 1px solid var(--bf-border);
    color: var(--bf-ink);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.help-block,
.muted{
    color: var(--bf-muted);
}

.form-search{
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-search .search-query{
    width: 240px !important;
    height: 42px;
    padding-left: 14px;
    padding-right: 14px;
    margin-bottom: 0;
}

/* --- Page toolbars (lists, campaigns) -----------------------------------
   Both pages line up a .btn pill, a custom dropdown, a settings cog and a
   search field, and each control arrived with its own intrinsic height. Give
   them one height and one vertical rhythm. Page-specific stacking stays with
   the page; only what both toolbars share lives here. */
.list-toolbar{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.list-toolbar-right{
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* subscribers.php hangs its search form straight off the toolbar instead of
   wrapping it in a right-hand group, so it needs the same nudge to the end of
   the row that .list-toolbar-right gets. It used to float:right out of an
   unclearfixed container, which let the panel below it slide underneath. */
.list-toolbar > .form-search{
    margin-left: auto;
}

.list-toolbar .btn,
.list-toolbar .custom-dropdown-toggle,
.list-toolbar .settings-toggle,
.list-toolbar .search-query,
.app-toolbar-left .btn,
.app-toolbar-left .custom-dropdown-toggle,
.list-toolbar-right .btn,
.list-toolbar-right .settings-toggle,
.list-toolbar-right .search-query{
    height: 42px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* A flex container drops the whitespace text node that used to separate an
   icon from its label, so restore it as a gap. */
.list-toolbar .btn,
.app-toolbar-left .btn,
.list-toolbar-right .btn{
    justify-content: center;
    gap: 6px;
}

/* Bootstrap's form{margin:0 0 20px} otherwise leaves the search form 20px
   taller than the icons beside it, so the toolbar row sits off-centre. */
.list-toolbar .form-search,
.list-toolbar-right .form-search{
    margin: 0;
}

@media only screen and (max-width: 767px) {
    /* The phone rules further down turn .form-search into a block — full-width
       input with its button beneath — which inside these flex toolbars drops
       the button onto its own indented line and leaves the group looking
       broken. Keep the input and its button on one line, and let the form sit
       beside the icons only while it still has room for both: the 260px basis
       drops it onto a row of its own once the icons crowd it, which is what
       stops the campaigns toolbar — an RSS button as well as a cog — from
       overflowing a 320px screen and clipping the search button. */
    /* Stack the toolbar into full-width rows: left to themselves the controls
       keep their intrinsic widths and wrap wherever they land, leaving them on
       several different left edges. */
    .list-toolbar{
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .list-toolbar > .btn,
    .list-toolbar .custom-dropdown,
    .list-toolbar .custom-dropdown-toggle{
        width: 100%;
    }
    .list-toolbar-right{
        margin-left: 0;
        margin-top: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .list-toolbar .form-search,
    .list-toolbar-right .form-search{
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }
    /* The basis belongs only inside the right-hand group, which stays a row on
       phones. Hung directly off the stacked toolbar the form is a COLUMN item,
       where a basis sizes the main axis — 260px of height rather than width. */
    .list-toolbar-right .form-search{
        flex: 1 1 260px;
    }
    .list-toolbar .form-search .search-query,
    .list-toolbar-right .form-search .search-query{
        width: 100% !important;
        min-width: 0;
        flex: 1;
        margin-bottom: 0;
    }
    .list-toolbar .form-search .btn,
    .list-toolbar-right .form-search .btn{
        flex: 0 0 auto;
    }
}

/* --- Search results summary bar (search-campaigns, search-all-lists) -----
   The keyword/results line and the re-search controls used to be two
   separate blocks, the second pulled up over the first with
   float:right;margin-top:-34px. That only ever lined up at desktop widths:
   once the controls wrapped they sat straight on top of the keyword line,
   and the back link — floated inside a floated box — landed under the
   search button instead of beside it. Make the well itself the row, so the
   two halves share a baseline on desktop and stack cleanly on a phone. */
.search-summary{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
}

.search-summary > p{
    margin: 0;
}

.search-summary-actions{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    /* min-width:auto would floor this box at the width of its own content —
       an unshrinkable search button included — and let it hang out of the
       well on a phone rather than letting the input give up the space. */
    min-width: 0;
}

/* Bootstrap's form{margin:0 0 20px} would otherwise push the row off-centre. */
.search-summary .form-search{
    margin: 0;
}

.search-summary .form-search .btn{
    height: 42px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    white-space: nowrap;
}

.search-summary-back{
    white-space: nowrap;
}

/* The narrow-screen rules further down turn .form-search into a block — a
   full-width input with its button dropped onto the next line — which inside
   this flex row leaves the button on its own indented line. Keep the input and
   its button on one row at every width and let the input take up the slack. */
.search-summary .form-search{
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.search-summary .form-search .search-query{
    width: auto !important;
    min-width: 0;
    flex: 1 1 200px;
    margin-bottom: 0;
}

.search-summary .form-search .btn{
    flex: 0 0 auto;
}

@media only screen and (max-width: 767px) {
    .search-summary{
        flex-direction: column;
        align-items: stretch;
        /* A *wrapping* column container sizes each flex line to its widest
           item, so stretch would line the rows up against the search form's
           natural width and hang them out of the well. One line only, and
           stretch then means the width of the well. */
        flex-wrap: nowrap;
    }
    .search-summary .form-search{
        flex: 1 1 100%;
        flex-wrap: wrap;
    }
    /* Below roughly 320px of well the field and its button no longer fit on
       one line without squeezing the field down to a few characters, so let
       the button drop to a full-width row of its own instead. */
    .search-summary .form-search .search-query{
        flex: 1 1 140px;
    }
    .search-summary .form-search .btn{
        flex: 1 1 auto;
    }
}

.campaigns-rss-btn{
    height: 42px !important;
    box-sizing: border-box;
    padding: 0 12px !important;
    margin-right: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#email_list{
    height: 250px;
    width: 85%;
}

.input-prepend.input-append .add-on:first-child, .input-prepend.input-append .btn:first-child,
.input-prepend.input-append .add-on:last-child, .input-prepend.input-append .btn:last-child {
    padding: 14px 10px;
}

.dashed-box{
    margin-top: 20px;
}

.well,
.grand_total,
#attachments li,
#rdp-email,
.rounded-dashed-box{
    margin-top: 0;
    background: #FAFBFD;
    /* background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%); */
    border: 1px solid var(--bf-border);
    /* border-radius: 10px; */
    box-shadow: 0px 10px 30px -26px rgba(0,0,0,0.75);
    padding: 20px;
    border-radius: 14px;
}
#rdp-email {
    border-radius: 0px;
    padding: 10px 20px;
}

#datepicker{
    width: 200px;
}

.input-prepend.date{
    display: inline-flex;
    align-items: center;
}

.input-prepend.date .datepicker-label{
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
}

.input-prepend.date > .add-on,
.input-prepend.date .datepicker-label > .add-on{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: -1px;
    white-space: nowrap;
}

.input-prepend.date input{
    margin-bottom: 0;
}

.well:hover{
    box-shadow: 0px 10px 30px -22px rgba(0,0,0,0.75);
}

.sendy-report-card.span8 .sendy-link-activity-table{
    table-layout: fixed;
    width: 100%;
}

.sendy-report-card.span8 .sendy-link-activity-table th,
.sendy-report-card.span8 .sendy-link-activity-table td{
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sendy-report-card.span8 .sendy-link-activity-table td:first-child a{
    display: inline-block;
    max-width: 100%;
}

.sendy-report-card{
    position: relative;
    transition: width 220ms ease, margin-left 220ms ease, box-shadow 220ms ease;
}

.sendy-report-card.sendy-report-card-split{
    animation: sendy-report-card-split 220ms ease;
}

.sendy-report-card.sendy-report-card-wide{
    animation: sendy-report-card-wide 220ms ease;
}

.report-metrics-row{
    margin-top: 8px;
}

.report-metrics-grid{
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
}

.report-metric-card{
    position: relative;
    flex: 1 1 140px;
    min-width: 140px;
    min-height: 112px;
    box-sizing: border-box;
    padding: 18px 20px 16px;
    background: #1c1c20;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
}

.report-metric-pill{
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    padding: 8px 14px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.report-metric-label,
.report-metric-detail{
    display: block;
}

.report-metric-label{
    margin-top: 12px;
    color: #f1f1f4;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.18;
}

.report-metric-detail{
    margin-top: 8px;
    color: #aaaab4;
    font-size: 13px;
    line-height: 1.25;
}

.report-metric-opened{
    background: #14b84a;
}

.report-metric-clicked{
    background: #651fff;
}

.report-metric-ctor{
    background: #008f9c;
}

.report-metric-unsubscribed{
    background: #ff1212;
}

.report-metric-not-opened{
    background: #ffb000;
}

.report-metric-bounced,
.report-metric-spam{
    background: #050507;
}

.report-metric-disabled{
    background: #6f7380;
    font-size: 12px;
    line-height: 1.15;
    white-space: normal;
}

.report-metric-actions{
    position: absolute;
    right: 14px;
    bottom: 12px;
    display: flex;
    gap: 8px;
}

.report-metric-actions .notopened-export-btns{
    float: none;
    margin: 0;
    color: #aaaab4;
}

@keyframes sendy-report-card-split{
    from{
        transform: translateX(10px);
    }
    to{
        transform: translateX(0);
    }
}

@keyframes sendy-report-card-wide{
    from{
        transform: translateX(-10px);
    }
    to{
        transform: translateX(0);
    }
}

#sendy-report-analysis-panel{
    opacity: 0;
    transform: translateX(18px);
    transition: opacity 200ms ease, transform 200ms ease;
}

/* The panel scrolls inside itself so reading a long analysis doesn't drag the
   whole report page along with it. Only the body scrolls; the heading and its
   close button stay pinned. */
.sendy-report-analysis-well{
    /* The navbar and the footer are both position:fixed, so the panel has to
       stick below one and stop above the other — otherwise its top slides under
       the navbar and its last lines hide behind the footer. The offsets are the
       body padding all.css uses to clear those bars, plus a 20px gutter. */
    --skry-report-panel-top: 80px;
    --skry-report-panel-bottom: 76px;
    position: sticky;
    top: var(--skry-report-panel-top);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--skry-report-panel-top) - var(--skry-report-panel-bottom));
}

.sendy-report-analysis-well > #sendy-report-analysis-close{
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 1;
}

.sendy-report-analysis-well > h2{
    flex: 0 0 auto;
    padding-right: 24px;
}

.sendy-report-analysis-well > #sendy-report-analysis-content{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#sendy-report-analysis-panel.sendy-report-analysis-panel-open{
    opacity: 1;
    transform: translateX(0);
}

/* The report heading and its analyse/score column sit in one flex row. The
   actions used to be absolutely positioned over a fixed-height heading, which
   let the campaign score spill onto the "Sent on" block below it. */
.sendy-report-analysis-shell{
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.sendy-report-heading-main{
    flex: 1 1 auto;
    min-width: 0;
}

.sendy-report-analysis-actions{
    flex: 0 0 auto;
    width: 360px;
    max-width: 45%;
    text-align: right;
}

.sendy-report-score{
    width: 188px;
    margin-top: 18px;
    margin-left: auto;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
}

.sendy-report-score-row{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.sendy-report-score-label{
    color: #aaaab4;
    font-size: 12px;
    line-height: 1.2;
}

.sendy-report-score strong{
    color: #f9fafb;
    font-size: 40px;
    line-height: 1;
}

.sendy-report-score small{
    margin-left: 2px;
    color: #aaaab4;
    font-size: 12px;
    font-weight: normal;
}

.sendy-report-score-bar{
    height: 7px;
    margin-top: 8px;
    overflow: hidden;
    background: #374151;
    border-radius: 999px;
}

.sendy-report-score-bar span{
    display: block;
    height: 100%;
    background: #9E43EF;
    border-radius: 999px;
    transition: width 220ms ease;
}

@media (max-width: 979px){
    .sendy-report-analysis-shell{
        display: block;
    }

    /* Stacked below the report rather than beside it, so there is nothing to
       stick to and no reason to cap its height. */
    .sendy-report-analysis-well{
        position: static;
        max-height: none;
    }

    .sendy-report-analysis-actions{
        width: auto;
        max-width: none;
        margin: 12px 0 18px;
    }
}

#sendy-report-analysis-content > strong,
#sendy-report-analysis-content > p > strong:only-child,
#sendy-report-analysis-content h3 strong,
#sendy-report-analysis-content h4 strong{
    color: #9E43EF;
}

.sendy-editor-toolbar{
    margin-bottom: 0;
}

.sendy-editor-toolbar .btn-group,
.sendy-content-improvements-shell{
    margin-bottom: 0;
}

.sendy-content-improvements-shell .btn{
    float: left;
    margin: -1px 0 0 4px;
}

.sendy-content-improvements-panel{
    clear: both;
    margin: 70px 0 18px;
    padding: 18px;
    background: #1f2937;
    border: 1px solid var(--bf-border);
    border-radius: 8px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.28);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 200ms ease, transform 200ms ease;
    /* The analysis scrolls inside the card so a long one doesn't push the
       editor off-screen. Only the body scrolls; the heading and its close
       button stay pinned. */
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: 60vh;
}

.sendy-content-improvements-panel > .sendy-content-improvements-close{
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 1;
}

.sendy-content-improvements-panel > h2{
    flex: 0 0 auto;
    padding-right: 24px;
}

.sendy-content-improvements-panel > .sendy-content-improvements-content{
    flex: 1 1 auto;
    min-height: 0;
    padding-right: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sendy-content-improvements-panel.sendy-content-improvements-panel-open{
    opacity: 1;
    transform: translateY(0);
}

.sendy-content-improvements-content > strong,
.sendy-content-improvements-content > p > strong:only-child,
.sendy-content-improvements-content h3 strong,
.sendy-content-improvements-content h4 strong{
    color: #9E43EF;
}

#forgot-form{
    height: 215px;
}

#marketing-permission, #what-to-expect {
    width: 340px;
}

code,
pre{
    color: var(--bf-accent-strong);
    background-color: #F6F8FF;
    border: 1px solid var(--bf-border);
    border-radius: 14px;
    font-size: 13px;
}

.label{
    padding: 4px 10px 5px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-shadow: none;
}

/* The report summary card (report.php, ares-report.php) prints each value —
   "From name <email>", list/segment names — as a .label pill, and Bootstrap 2
   sets .label to white-space:nowrap. A long from-address or list name could
   therefore never wrap: the pill spilled out of the blockquote and stretched
   the page into horizontal scroll. Inside a blockquote, let those pills wrap
   and break mid-token so they stay within the card. */
blockquote .label{
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.label-info,
.badge-info{
    background: linear-gradient(180deg, #a855f7 0%, #9333ea 100%);
    border-color: #9333ea;
}

.badge{
    border-radius: 20px;
}

.alert{
    border: 1px solid #EFEABF;
    border-radius: 16px;
    box-shadow: none;
    color: #304155;
}

.alert-info{
    background: #faf5ff;
    border-color: #e9d5ff;
    color: #7e22ce;
}

.alert-success{
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #15803d;
}

.alert-danger,
.alert-error{
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

.alert-warning{
    background: #fffbeb;
    border-color: #fde68a;
    color: #b45309;
}

table.table{
    margin-top: 26px;
    background: #ffffff;
    /* border: 1px solid var(--bf-border); */
    border-radius: 20px;
    box-shadow: var(--bf-shadow-soft);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

/* Below 767px responsive-tables.js splits a .responsive table by cloning it
   into a pinned first column plus a scrollable remainder. Both halves are
   .table, so each would otherwise take the card treatment above — two rounded,
   shadowed surfaces side by side, reading as two unrelated tables. Give the
   card to the wrapper and flatten the halves so they share one surface.
   No background is set here on purpose: .table-wrapper already carries
   overflow:hidden, so each half's own background clips to the rounded corners,
   and that keeps the dark table background showing through rather than white. */
@media only screen and (max-width: 767px) {
    div.table-wrapper{
        margin-top: 26px;
        border-radius: 20px;
        box-shadow: var(--bf-shadow-soft);
    }
    div.table-wrapper table.table{
        margin-top: 0;
        border-radius: 0;
        box-shadow: none;
    }
    /* responsive-tables.css divides the halves with a hard #ccc line, darker
       than any other rule in these tables. */
    div.table-wrapper .pinned{
        border-right: 1px solid var(--bf-border);
    }
}

.table th,
.table td{
    padding: 14px 14px;
    border-top: 1px solid var(--bf-border);
    vertical-align: middle;
    font-size: 14px;
}

.table thead th{
    background: #fafbfd;
    border-top: none;
    color: var(--bf-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.table-striped tbody tr:nth-child(odd) td,
.table-striped tbody tr:nth-child(odd) th{
    background: #fafbfd;
}

.table-bordered{
    border: 1px solid #E0E9FD;;
}
.table-bordered th, .table-bordered td {
    border-left: 1px solid #E0E9FD;
}

.table tbody tr:hover td{
    background: #f0f2f5;
}

.pagination{
    margin-top: 18px;
}

.pagination ul{
    background: #ffffff;
    border: 1px solid var(--bf-border);
    border-radius: 16px;
    box-shadow: var(--bf-shadow-soft);
}

.pagination ul > li > a,
.pagination ul > li > span{
    border-left-color: var(--bf-border);
    color: #314155;
    font-weight: 700;
}

.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span{
    border-left: 0;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.pagination ul > li:last-child > a,
.pagination ul > li:last-child > span{
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

.pagination ul > .active > a,
.pagination ul > .active > span,
.pagination ul > .active > a:hover,
.pagination ul > .active > span:hover{
    background: var(--bf-accent-soft);
    color: var(--bf-accent-strong);
}

.footer-left{
    float: none;
    margin: 0;
}

.footer-right{
    float: none;
    margin: 0 0 0 auto;
}

hr{
    border-top: 1px solid var(--bf-border);
}

footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--bf-muted);
}

footer a{
    color: #42526b;
}

#footer-mode{
    float: none;
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-top: 0;
    vertical-align: middle;
}

#footer-mode a{
    width: auto;
    height: auto;
    font-size: 13px;
}

#footer-mode .btn{
    width: 44px;
    min-width: 44px;
    min-height: 34px;
    height: 34px;
    padding: 0;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#footer-mode .btn:first-child{
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

#footer-mode .btn:last-child{
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

#footer-mode i{
    float: none;
    margin: 0;
    line-height: 1;
}

.modal{
    border: 1px solid var(--bf-border);
    border-radius: 22px;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.2);
}

.modal-header,
.modal-footer{
    background: #fcf8ff;
    border-color: var(--bf-border);
}

.modal-header h3{
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.close{
    opacity: 0.55;
}

.close:hover{
    opacity: 0.8;
}

#wrapper{
    border-radius: 22px;
}

#brands-table{
    margin-top: 15px;
}

#brands-table th,
#brands-table td{
    padding: 12px 10px;
}

#brands-table td p{
    margin: 0;
}

#brands-table td:nth-child(2) a{
    display: inline-flex;
    align-items: center;
    gap: 0;
    float: none !important;
}

#brands-table td:nth-child(2) a img{
    display: inline-block;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

#brands-table td:nth-child(3){
    text-align: left;
}

#brands-table td:nth-child(4) p{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

#brands-table td:nth-child(4) a.btn{
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    margin: 0;
    padding: 0 12px;
    font-size: 12px;
    border-radius: 20px;
}

#brands-table td:nth-child(4) a.btn:nth-child(-n+4){
    width: 36px;
    padding: 0;
}

#brands-table td:nth-child(4) a.btn .icon{
    line-height: 1;
}

#brands-table td:nth-child(4) .pie_open_rate{
    float: none;
    width: 16px;
}

#brands-table td:nth-child(4) .open_rate_no{
    float: none;
    margin-left: 0;
}

.brand-smtp-icons{
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.brand-smtp-icons img{
    margin: 0;
}

#brands-table td:nth-child(3) .brand-smtp-icons[title*="Amazon"]::after{
    content: "AWS";
    color: var(--bf-accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

textarea#html + .ck.ck-editor{
    display: block;
    width: 100%;
    margin-right: auto;
    --ck-border-radius: 18px;
    --ck-color-base-border: var(--bf-border);
    --ck-color-toolbar-border: var(--bf-border);
    --ck-color-focus-border: #d9c8ff;
    --ck-color-button-default-hover-background: #faf5ff;
    --ck-color-button-default-active-background: #f4ecff;
    --ck-color-button-on-background: #f3e8ff;
    --ck-color-button-on-hover-background: #eadcff;
    --ck-color-button-on-active-background: #eadcff;
    --ck-color-button-on-color: var(--bf-accent-strong);
}

textarea#html + .ck.ck-editor.ck-rounded-corners .ck.ck-toolbar,
textarea#html + .ck.ck-editor .ck.ck-toolbar.ck-rounded-corners{
    padding: 8px 10px;
    border-color: var(--bf-border);
    border-bottom: 0;
    border-radius: var(--ck-border-radius) var(--ck-border-radius) 0 0;
    background: #fefefe;
}

textarea#html + .ck.ck-editor .ck-editor__top{
    border-radius: var(--ck-border-radius) var(--ck-border-radius) 0 0;
    overflow: hidden;
}

textarea#html + .ck.ck-editor .ck-toolbar .ck-button{
    min-width: 30px;
    min-height: 30px;
}

textarea#html + .ck.ck-editor .ck-toolbar .ck-button.ck-on{
    color: var(--bf-accent-strong);
}

textarea#html + .ck.ck-editor .ck-editor__main > .ck-editor__editable{
    min-height: 570px;
    padding: 28px 32px;
    margin-bottom: 20px;
    border: 1px solid var(--bf-border);
    border-radius: 0 0 20px 20px;
    background: #ffffff;
    box-shadow: 0 18px 34px rgb(61 39 96 / 10%);
    font-size: 15px;
    line-height: 1.72;
}

textarea#html + .ck.ck-editor .ck-editor__main > .ck-editor__editable.ck-focused{
    border-color: #d9c8ff;
    box-shadow: 0 0 0 4px rgb(168 85 247 / 10%), 0 18px 34px rgb(61 39 96 / 10%);
}

textarea#html + .ck.ck-editor .ck-editor__main > .ck-source-editing-area{
    margin-bottom: 20px;
    border: 1px solid var(--bf-border);
    border-top: 0;
    border-radius: 0 0 20px 20px;
    background: #ffffff;
    box-shadow: 0 18px 34px rgb(61 39 96 / 10%);
    overflow: hidden;
}

textarea#html + .ck.ck-editor .ck-editor__main > .ck-source-editing-area textarea{
    min-height: 570px;
    padding: 28px 32px;
    border: 0;
    border-radius: 0 0 20px 20px;
    box-shadow: none;
}

textarea#html + .ck.ck-editor .ck-editor__main > .ck-source-editing-area:focus-within{
    border-color: #d9c8ff;
    box-shadow: 0 0 0 4px rgb(168 85 247 / 10%), 0 18px 34px rgb(61 39 96 / 10%);
}

@media (max-width: 979px){
    .container-fluid{
        padding-left: 16px;
        padding-right: 16px;
    }

    .container-fluid > .row-fluid > .span2,
    .container-fluid > .row-fluid > .span10{
        position: static;
        width: 100%;
        margin-left: 0;
    }

    .container-fluid > .row-fluid > .span10{
        margin-top: 18px;
        padding: 22px 20px 18px;
    }

    .form-search{
        display: block;
    }

    .form-search .search-query{
        width: 100% !important;
        margin-bottom: 10px;
        /* content-box + the 14px side padding above pushed this ~14px past
           its column, so the page scrolled sideways on tablets. */
        box-sizing: border-box;
    }
}

/* Phone gutter. Two separate insets used to stack up on a phone: Bootstrap's
   responsive sheet pads <body> 20px on each side, and the <=979px block above
   pads .container-fluid another 16px. Every card, well and table therefore
   started 36px in from each edge — roughly 81% of a 390px screen, with the
   widest tables losing columns to the split/scroll treatment sooner than they
   needed to. Collapse both insets into a single small gutter so page content
   keeps 96% of the viewport at any phone width.

   The gutter is a variable because the navbar has to track it: the <style>
   block in includes/header.php pads the bar by (gutter - 5px), the 5px being
   .navbar-inner's own phone padding, so the header contents stay lined up with
   the page beneath them. Change it here and the bar follows. */
@media (max-width: 767px){
    :root{
        --skry-phone-gutter: 2vw;
    }

    body{
        padding-left: 0;
        padding-right: 0;
    }

    /* Bootstrap keeps the fixed bars full-bleed by cancelling the body padding
       with a matching -20px margin. With that padding gone the margin would
       instead drag the bars 20px off the left edge. */
    .navbar-fixed-top,
    .navbar-fixed-bottom{
        margin-left: 0;
        margin-right: 0;
    }

    .container-fluid{
        padding-left: var(--skry-phone-gutter);
        padding-right: var(--skry-phone-gutter);
    }
}

/* Phone only. Bootstrap's phone rules give every [class*="span"]
   float:left/width:auto, so a page's content column shrink-to-fits its widest
   child instead of filling the gutter set above. (The .container-fluid >
   .row-fluid selectors in the <=979px block never match: header.php wraps the
   page in .container-fluid > .flex-grow, so a page's .row-fluid is a
   grandchild.) Kept in sync with css/all2.css — this file replaces it wholesale
   in dark mode rather than layering on top of it. */
@media (max-width: 767px){
    .row-fluid > .span2,
    .row-fluid > .span10,
    .row-fluid > .span12{
        position: static;
        float: none;
        width: 100%;
        margin-left: 0;
        box-sizing: border-box;
    }
}

/* Dark mode refinement */
:root{
    color-scheme: dark;
    --bf-bg: #0f0f10;
    --bf-bg-soft: #151516;
    --bf-panel: #19191b;
    --bf-panel-soft: #202023;
    --bf-panel-elevated: #2a2a2f;
    --bf-ink: #f2f2f3;
    --bf-ink-soft: #d8d8dc;
    --bf-muted: #9d9da5;
    --bf-border: #34343a;
    --bf-border-strong: #505058;
    --bf-accent: #e3e3e6;
    --bf-accent-strong: #ffffff;
    --bf-accent-soft: rgba(255, 255, 255, 0.1);
    --bf-success: #52d88b;
    --bf-warning: #f6c86b;
    --bf-danger: #ff808d;
    --bf-highlight: rgba(255, 255, 255, 0.07);
    --bf-highlight-strong: rgba(255, 255, 255, 0.12);
    --bf-shadow: 0 24px 48px rgba(0, 0, 0, 0.34);
    --bf-shadow-soft: 0 14px 28px rgba(0, 0, 0, 0.22);
}

html{
    background: linear-gradient(180deg, #0c0c0d 0%, #171719 100%);
}

body{
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.06), transparent 30%),
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.04), transparent 24%),
        linear-gradient(180deg, #0f0f10 0%, #121214 42%, #18181b 100%);
    color: var(--bf-ink);
}

body,
button,
input,
select,
textarea{
    color: var(--bf-ink);
}

::selection{
    background: rgba(255, 255, 255, 0.24);
    color: #f7fbff;
}

::placeholder{
    color: #84848b;
}

a{
    color: var(--bf-accent);
}

a:hover{
    color: var(--bf-accent-strong);
}

h1,
h2,
h3,
h4,
h5,
h6,
.lead,
.lead a,
legend{
    color: var(--bf-ink);
}

blockquote{
    background: rgba(26, 26, 30, 0.92);
    border-top-color: rgba(255, 255, 255, 0.08);
    border-right-color: rgba(255, 255, 255, 0.08);
    border-bottom-color: rgba(255, 255, 255, 0.08);
    border-left-color: rgba(255, 255, 255, 0.24);
    color: var(--bf-ink-soft);
}



.navbar-fixed-top{
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.26);
}

.navbar-fixed-top .navbar-inner{
    background: rgba(14, 14, 16, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(18px);
}

/* Mobile sidebar-drawer toggle — light icon against the dark navbar. */
#hamburger-button{
    color: var(--bf-ink);
    background: none;
    border: 0;
    line-height: 0;
    vertical-align: middle;
}

.navbar .brand{
    color: var(--bf-ink);
}

.navbar .brand:hover{
    color: var(--bf-accent-strong);
}

.main-gravatar{
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.navbar .btn-group > .btn{
    color: var(--bf-ink-soft);
}

.navbar .btn-group > .btn:hover,
.navbar .btn-group > .btn:focus{
    color: var(--bf-accent-strong);
}

.container-fluid > .row-fluid > .span10,
.container-fluid > .row-fluid > .sendy-report-card{
    background: linear-gradient(180deg, rgba(28, 28, 31, 0.96) 0%, rgba(18, 18, 21, 0.96) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: var(--bf-shadow);
}

.sidebar-box{
    background: linear-gradient(180deg, rgba(24, 24, 27, 0.96) 0%, rgba(16, 16, 19, 0.96) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: var(--bf-shadow-soft);
}

.sidebar-box .nav-header{
    color: #a2a2aa;
}

.sidebar-box .nav-list > li > a{
    color: var(--bf-ink-soft);
}

.sidebar-box .nav-list [class^="icon-"]{
    color: #8b8b95;
}

.sidebar-box .nav-list > li > a:hover,
.sidebar-box .nav-list > li > a:focus,
.sidebar-box .nav-list > .active > a,
.sidebar-box .nav-list > .active > a:hover,
.sidebar-box .nav-list > .active > a:focus{
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.06) 100%) !important;
    color: var(--bf-ink) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.sidebar-box .nav-list > .active > a [class^="icon-"],
.sidebar-box .nav-list > .active > a .icon-white{
    color: var(--bf-accent-strong) !important;
}

.btn,
#campaign-save-only-btn,
#autoresponder-save-only-btn{
    padding: 12px 14px;
    background: linear-gradient(180deg, #29292d 0%, #1d1d21 100%);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: var(--bf-shadow-soft);
    color: var(--bf-ink);
}

.btn:hover,
.btn:focus,
#campaign-save-only-btn:hover,
#autoresponder-save-only-btn:hover,
#campaign-save-only-btn:focus,
#autoresponder-save-only-btn:focus{
    background: linear-gradient(180deg, #333338 0%, #242429 100%);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 18px 28px rgba(0, 0, 0, 0.26);
    color: var(--bf-ink);
}

.btn.disabled,
.btn[disabled],
.btn.disabled:hover,
.btn[disabled]:hover{
    background: linear-gradient(180deg, #1a1a1d 0%, #131316 100%);
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: none;
    color: #7d7d84;
}

.btn-primary{
    background: linear-gradient(180deg, #a855f7 0%, #9333ea 100%);
    border-color: #9333ea;
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus{
    background: linear-gradient(180deg, #9333ea 0%, #7e22ce 100%);
    border-color: #7e22ce;
    color: #ffffff;
}

.btn-inverse{
    background: linear-gradient(180deg, #a855f7 0%, #9333ea 100%);
    border-color: #9333ea;
    box-shadow: 0 10px 22px rgba(147, 51, 234, 0.18);
    color: #ffffff;
}

.btn-inverse:hover,
.btn-inverse:focus{
    background: linear-gradient(180deg, #9333ea 0%, #7e22ce 100%);
    border-color: #7e22ce;
    box-shadow: 0 12px 24px rgba(126, 34, 206, 0.22);
    color: #ffffff;
}

.btn-white{
    background: linear-gradient(180deg, #25252a 0%, #1a1a1f 100%);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--bf-ink);
}

.btn-white:hover,
.btn-white:focus{
    background: linear-gradient(180deg, #303036 0%, #212126 100%);
    border-color: rgba(255, 255, 255, 0.16);
    color: var(--bf-ink);
}

.btn-group.tracking > .btn{
    padding: 12px 14px;
    font-size: 13px;
}

#rules-status-btns .btn{
    width: 35px;
    height: 14px;
    font-size: 12px;
    padding: 3px 10px 8px 10px;
}

.btn-group[data-toggle="buttons-radio"] > .btn.active,
.btn-group[data-toggle="buttons-radio"] > .btn.active:hover,
.btn-group[data-toggle="buttons-radio"] > .btn.active:focus,
.btn-group[data-toggle="buttons-radio"] > .btn:active,
.btn-group.tracking > .btn.active,
.btn-group.tracking > .btn.active:hover,
.btn-group.tracking > .btn.active:focus,
.btn-group.tracking > .btn:active{
    background: linear-gradient(180deg, #242428 0%, #17171b 100%);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--bf-ink);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
    text-shadow: none;
    transform: none;
    z-index: 2;
}

.btn .caret,
.dropup .btn .caret{
    border-top-color: currentColor;
    border-bottom-color: currentColor;
}

.dropdown-menu{
    background: linear-gradient(180deg, rgba(29, 29, 33, 0.98) 0%, rgba(18, 18, 21, 0.98) 100%);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: var(--bf-shadow);
}

.dropdown-menu .divider{
    border-bottom-color: rgba(255, 255, 255, 0.06);
    background-color: rgba(255, 255, 255, 0.04);
}

.dropdown-menu .dropdown-header{
    color: #a5a5ad;
}

/* The sticky search row has to be opaque so items don't show through it as
   they scroll under; solid #1d1d21 matches the top of the menu's gradient. */
.dropdown-menu .new-campaign-template-search-row{
    background: #1d1d21;
}

.dropdown-menu a{
    color: var(--bf-ink-soft);
}

.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover{
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.06) 100%) !important;
    color: var(--bf-ink) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
textarea,
select,
.uneditable-input{
    background: #17171a;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.32);
    color: var(--bf-ink);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus{
    background: #1b1b1f;
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
    color: var(--bf-ink);
}

input[disabled],
textarea[disabled],
select[disabled]{
    background: #111821;
    color: #7c7c84;
}

select option{
    background: #17171a;
    color: var(--bf-ink);
}

input[type="file"]{
    color: var(--bf-muted);
}

input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button{
    background: linear-gradient(180deg, #27272c 0%, #1b1b20 100%);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
    color: var(--bf-ink);
}

input[type="file"]:hover::file-selector-button,
input[type="file"]:focus::file-selector-button,
input[type="file"]:hover::-webkit-file-upload-button,
input[type="file"]:focus::-webkit-file-upload-button{
    background: linear-gradient(180deg, #313137 0%, #222228 100%);
    border-color: rgba(255, 255, 255, 0.16);
    color: var(--bf-accent-strong);
}

input[type="checkbox"],
input[type="radio"]{
    accent-color: var(--bf-accent);
}

.input-prepend .add-on,
.input-append .add-on{
    height: 18px;
    min-width: 16px;
    padding: 6px;
    line-height: 18px;
    background: linear-gradient(180deg, #242429 0%, #1a1a1e 100%);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--bf-ink-soft);
    text-shadow: none;
}

label,
.control-label{
    color: var(--bf-ink-soft);
}

.help-block,
.help-inline,
.muted,
.wysiwyg-note,
.data-type,
.last-update,
.seg-note,
.thirtytwo,
.recovery,
#set-campaign-title-btn,
#set-campaign-title-btn-info,
.trigger-action,
.zap-description,
.datepicker-label{
    color: var(--bf-muted);
}

#set-campaign-title-btn:hover{
    color: var(--bf-accent-strong);
}

#email_list option,
#email_list_exclude option,
#seg_list option,
#seg_list_exclude option{
    background: #17171a;
    color: #e7e7eb;
    -webkit-text-fill-color: #e7e7eb;
}

#email_list option:checked,
#email_list_exclude option:checked,
#seg_list option:checked,
#seg_list_exclude option:checked{
    background: #34343b linear-gradient(0deg, #34343b 0%, #34343b 100%);
    box-shadow: inset 0 0 0 9999px #34343b;
    color: #e7e7eb;
    -webkit-text-fill-color: #e7e7eb;
    font-weight: 700;
}

#email_list option:disabled,
#email_list_exclude option:disabled,
#seg_list option:disabled,
#seg_list_exclude option:disabled{
    color: #7f7f87;
    -webkit-text-fill-color: #7f7f87;
}

.well,
.grand_total,
#attachments li,
#rdp-email,
.rounded-dashed-box,
.dashed-box{
    background: linear-gradient(180deg, rgba(28, 28, 32, 0.94) 0%, rgba(19, 19, 22, 0.94) 100%);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: var(--bf-shadow-soft);
    color: var(--bf-ink-soft);
}

.dashed-box,
.rounded-dashed-box{
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.14);
}

code,
pre{
    background-color: #121214;
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--bf-ink);
}

.alert{
    background: rgba(28, 28, 32, 0.9);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--bf-ink-soft);
}

.alert-info{
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--bf-ink-soft);
}

.alert-success{
    background: rgba(82, 216, 139, 0.14);
    border-color: rgba(82, 216, 139, 0.22);
    color: #a7f2c5;
}

.alert-danger,
.alert-error{
    background: rgba(255, 128, 141, 0.14);
    border-color: rgba(255, 128, 141, 0.22);
    color: #ffc3cb;
}

.alert-warning{
    background: rgba(246, 200, 107, 0.15);
    border-color: rgba(246, 200, 107, 0.22);
    color: #ffe09a;
}

table.table{
    background: rgba(17, 17, 20, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: var(--bf-shadow-soft);
}

.table th,
.table td{
    border-top-color: rgba(255, 255, 255, 0.07);
    color: var(--bf-ink-soft);
}

.table thead th{
    background: rgba(255, 255, 255, 0.04);
    color: #a9a9b1;
}

.table-striped tbody tr:nth-child(odd) td,
.table-striped tbody tr:nth-child(odd) th{
    background: rgba(255, 255, 255, 0.02);
}

.table tbody tr:hover td{
    background: rgba(255, 255, 255, 0.06);
    color: var(--bf-ink);
}

.table-bordered,
.table-bordered th,
.table-bordered td{
    border-color: rgba(255, 255, 255, 0.07);
}

.tablesorter-default,
.tablesorter-default td,
.tablesorter-default tfoot td,
.tablesorter-default tfoot th{
    background-color: transparent;
    color: var(--bf-ink-soft);
}

.tablesorter-default .header,
.tablesorter-default .tablesorter-header{
    color: #a9a9b1;
}

.tablesorter-default tr.odd > td{
    background-color: rgba(255, 255, 255, 0.02) !important;
}

.tablesorter-default tr.even > td{
    background-color: transparent !important;
}

.tablesorter-default tbody > tr.even:hover > td,
.tablesorter-default tbody > tr.hover > td,
.tablesorter-default tbody > tr.odd:hover > td,
.tablesorter-default tbody > tr:hover > td{
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--bf-ink) !important;
}

.tablesorter-default input.tablesorter-filter,
.tablesorter-default select.tablesorter-filter{
    background-color: #17171a;
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--bf-ink);
}

.tablesorter-default caption{
    background-color: transparent;
    color: var(--bf-muted);
}

.nav-tabs{
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.nav-tabs > li{
    margin-bottom: -1px;
}

.nav-tabs > li > a{
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--bf-ink-soft);
    border-radius: 16px 16px 0 0;
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus,
.nav-tabs > li > a.tab-active,
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus{
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.06) 100%);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--bf-ink);
}

#pagination{
    display: inline-flex;
    gap: 0;
    margin-top: 18px;
}

#pagination .btn{
    min-width: 44px;
    padding-left: 12px;
    padding-right: 12px;
}

.pagination ul{
    background: linear-gradient(180deg, rgba(29, 29, 33, 0.98) 0%, rgba(18, 18, 21, 0.98) 100%);
    border-color: rgba(255, 255, 255, 0.08);
}

.pagination ul > li > a,
.pagination ul > li > span{
    border-left-color: rgba(255, 255, 255, 0.08);
    color: var(--bf-ink-soft);
}

.pagination ul > .active > a,
.pagination ul > .active > span,
.pagination ul > .active > a:hover,
.pagination ul > .active > span:hover{
    background: rgba(255, 255, 255, 0.1);
    color: var(--bf-ink);
}

hr{
    border-top-color: rgba(255, 255, 255, 0.08);
}

footer,
footer a{
    color: var(--bf-muted);
}

footer a:hover{
    color: var(--bf-accent-strong);
}

.modal{
    background: linear-gradient(180deg, #1a1a1d 0%, #121214 100%);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: var(--bf-shadow);
    color: var(--bf-ink-soft);
}

.modal-header,
.modal-footer{
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

.modal-header h3{
    color: var(--bf-ink);
}

.modal-backdrop,
.modal-backdrop.fade.in{
    background: rgba(0, 0, 0, 0.78);
    opacity: 1;
}

.close{
    color: var(--bf-muted);
    text-shadow: none;
}

.close:hover{
    color: var(--bf-ink);
}

.tooltip-inner{
    background: #141416;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--bf-shadow-soft);
    color: var(--bf-ink);
}

.tooltip.top .tooltip-arrow{
    border-top-color: #141416;
}

.tooltip.right .tooltip-arrow{
    border-right-color: #141416;
}

.tooltip.left .tooltip-arrow{
    border-left-color: #141416;
}

.tooltip.bottom .tooltip-arrow{
    border-bottom-color: #141416;
}

.pika-single{
    background: #242429;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: var(--bf-shadow-soft);
    color: var(--bf-ink);
}

.pika-single:before{
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.pika-single:after{
    border-bottom-color: #242429;
}

.pika-label{
    background-color: transparent;
    color: var(--bf-ink);
}

.pika-table th{
    color: var(--bf-muted);
}

.pika-button{
    background: transparent;
    border-radius: 10px;
    color: var(--bf-ink-soft);
}

.pika-button:hover{
    background: rgba(255, 255, 255, 0.08);
}

.is-today .pika-button{
    color: var(--bf-accent);
}

.is-selected .pika-button,
.has-event .pika-button{
    background: linear-gradient(180deg, #efeff1 0%, #bdbdc3 100%);
    box-shadow: none;
    color: #111114;
}

.is-disabled .pika-button,
.is-inrange .pika-button{
    background: rgba(255, 255, 255, 0.05);
    color: #7c7c84;
}

.cke_chrome{
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    box-shadow: var(--bf-shadow-soft) !important;
    background: linear-gradient(180deg, #1a1a1d 0%, #121214 100%) !important;
}

.cke_top,
.cke_bottom{
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

.cke_toolgroup,
.cke_combo_button{
    background: #26262b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

.cke_toolgroup:hover,
.cke_combo_button:hover,
.cke_toolgroup:focus,
.cke_combo_button:focus{
    border-color: rgba(255, 255, 255, 0.16) !important;
}

.cke_button_icon{
    opacity: 0.9;
}

.cke_combo_text,
.cke_combo_open,
.cke_path_item,
.cke_path_empty{
    color: var(--bf-ink-soft) !important;
}

.cke_source{
    background: #17171a !important;
    color: var(--bf-ink) !important;
}

@media (max-width: 979px){
    .nav-tabs{
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        border-bottom: 0;
    }

    .nav-tabs > li{
        float: none;
        margin: 0;
    }

    .nav-tabs > li > a{
        border-radius: 16px;
        margin: 0;
    }

    #wrapper{
        width: min(100%, 320px);
    }
}

/* Until responsive-tables.js splits table.responsive, a wide table sits
   unconstrained in its column and the whole page scrolls sideways on a phone,
   which is very visible on the heavier pages (/list, /app). The script now
   splits just after the page's ready handlers instead of waiting for window
   'load', so that gap is short — but it is still a gap, and the script does
   not run at all with JS disabled.

   Contain the table itself in the meantime. The script re-parents the table
   into div.scrollable when it runs, so the :not(.scrollable) parent check
   switches this rule off at exactly the right moment and the split view gets
   its normal table layout back. */
@media only screen and (max-width: 767px) {
    :not(.scrollable) > table.responsive {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
}

/* Wide first column (campaigns). responsive-tables.js normally splits a
   table.responsive on a phone: the first column is copied into a pinned strip
   taking 35% of the width while the rest scrolls beside it, which left campaign
   titles cut off after a handful of characters. A table marked
   .first-col-full opts out of that and keeps one table, with its first column
   widened to the full width on screen — the title gets the whole viewport and
   the numbers are a swipe to the right.

   The rule above ( :not(.scrollable) > table.responsive ) already makes an
   unsplit table its own horizontal scroll container, which is exactly what
   this needs; the column width itself is measured in responsive-tables.js,
   because a percentage on a table cell resolves against the table's own auto
   width rather than against the scroll port. */
@media only screen and (max-width: 767px) {
    /* responsive-tables.css hides the first column because the pinned copy is
       what draws it. There is no copy here, so put it back. */
    /* The other columns stay nowrap — they are short, and their natural width
       is what makes them worth scrolling to. The title has a whole screen, so
       let it use two lines rather than trail off. */
    table.responsive.first-col-full th:first-child,
    table.responsive.first-col-full td:first-child{
        display: table-cell;
        white-space: normal;
        overflow: visible;
        /* The measured width is the width on screen, so the cell's padding has
           to come out of it rather than be added to it — otherwise the column
           ends ~28px past the right edge and the tail of a long title is
           hidden until you scroll. */
        box-sizing: border-box;
    }
}

/* Campaign row, first cell (app.php, search-campaigns.php). The cell is a
   status pill followed by the campaign title and, depending on the row, one or
   two small action links — Edit, Resume, Stop. All of it used to sit in one run
   of inline text, and a .label is a padded box drawn on a 14px line: its
   background printed above and below that line, so as soon as the title wrapped
   — which it does on every phone — the pill overlapped the line underneath it.

   The cell is now two columns: the pill, and a block holding everything else.
   The pill can no longer collide with anything, and the text beside it wraps
   within its own column instead of running back underneath the pill. The text
   block keeps its contents inline, so the "|" separators stay next to what they
   separate rather than being stranded on a line of their own — which is what
   happens if the pieces are made flex items individually. */
.campaign-cell{
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.campaign-cell > .label{
    flex: none;
}

/* min-width:0 lets the text column shrink below the width of its longest word —
   a flex item refuses to by default — and anywhere breaks a long unbroken
   subject line rather than pushing the row into a horizontal scroll. */
.campaign-cell-body{
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* The rows space the title from the pill with an inline margin-left:5px, which
   now doubles up with the gap above. */
.campaign-cell-body > a{
    margin-left: 0 !important;
}