:root {
    --sender-bg: #f5f7f9;
    --sender-surface: #fff;
    --sender-surface-muted: #f8fafc;
    --sender-border: #dde3ea;
    --sender-border-soft: #edf1f5;
    --sender-text: #1f2933;
    --sender-muted: #5f6d80;
    --sender-primary: #1f6feb;
    --sender-radius: .35rem;
    --sender-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

body {
    background-color: var(--sender-bg);
    color: var(--sender-text);
    font-size: .94rem;
}

a {
    color: #155dbd;
}

a:hover {
    color: #0f4ea3;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--sender-text);
    font-weight: 700;
    letter-spacing: 0;
}

h2 {
    font-size: 1.35rem;
}

h5 {
    font-size: 1rem;
}

body > nav.navbar {
    border-bottom: 1px solid var(--sender-border);
    box-shadow: none !important;
    margin-bottom: .8rem !important;
    padding-bottom: .55rem !important;
    padding-top: .55rem !important;
}

.app-brand {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 700;
}

.app-shell-layout {
    min-height: 100vh;
}

.app-sidebar {
    background: #fff;
    border-right: 1px solid var(--sender-border);
    bottom: 0;
    display: flex;
    flex-direction: column;
    left: 0;
    overflow-y: auto;
    padding: 1rem .85rem;
    position: fixed;
    top: 0;
    width: 272px;
    z-index: 1030;
}

.app-sidebar-header {
    align-items: center;
    display: flex;
    min-height: 42px;
    padding: 0 .35rem .8rem;
}

.app-sidebar-brand {
    color: var(--sender-text);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0;
}

.app-sidebar-brand:hover {
    color: var(--sender-text);
    text-decoration: none;
}

.app-sidebar-section {
    border-bottom: 1px solid var(--sender-border-soft);
    margin-bottom: .8rem;
    padding: 0 .35rem .8rem;
}

.app-sidebar-label,
.app-sidebar-group-title {
    color: var(--sender-muted);
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .04em;
    margin-bottom: .38rem;
    text-transform: uppercase;
}

.app-sidebar-workspace-select {
    font-size: .86rem;
    min-height: 36px;
}

.app-sidebar-minor-link,
.app-sidebar-primary-action,
.app-sidebar-link {
    align-items: center;
    border-radius: .35rem;
    display: flex;
    gap: .55rem;
    text-decoration: none;
}

.app-sidebar-minor-link {
    color: #4b5565;
    font-size: .84rem;
    font-weight: 650;
    margin-top: .45rem;
}

.app-sidebar-minor-link:hover {
    color: var(--sender-primary);
    text-decoration: none;
}

.app-sidebar-primary-action {
    background: var(--sender-primary);
    color: #fff;
    font-size: .9rem;
    font-weight: 750;
    justify-content: center;
    margin: 0 .35rem 1rem;
    padding: .48rem .7rem;
}

.app-sidebar-primary-action:hover {
    background: #155dbd;
    color: #fff;
    text-decoration: none;
}

.app-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.app-sidebar-group {
    padding: 0 .35rem;
}

.app-sidebar-link {
    color: #364152;
    font-size: .9rem;
    font-weight: 650;
    margin-bottom: .1rem;
    min-height: 34px;
    padding: .38rem .48rem;
}

.app-sidebar-link .fa,
.app-sidebar-link .far {
    color: #697586;
    font-size: .9rem;
    text-align: center;
    width: 1rem;
}

.app-sidebar-link:hover {
    background: var(--sender-surface-muted);
    color: var(--sender-text);
    text-decoration: none;
}

.app-sidebar-link.active {
    background: #edf4ff;
    color: #155dbd;
    font-weight: 800;
}

.app-sidebar-link.active .fa,
.app-sidebar-link.active .far {
    color: #155dbd;
}

.app-sidebar-empty {
    color: var(--sender-muted);
    font-size: .84rem;
    line-height: 1.35;
    padding: .25rem .45rem .45rem;
}

.app-main {
    margin-left: 272px;
    min-height: 100vh;
    min-width: 0;
}

.app-topbar {
    align-items: center;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--sender-border);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    min-height: 58px;
    padding: .55rem 1.2rem;
    position: sticky;
    top: 0;
    z-index: 1010;
}

.app-topbar-left,
.app-topbar-actions {
    align-items: center;
    display: flex;
    gap: .75rem;
    min-width: 0;
}

.app-topbar-actions {
    flex-shrink: 0;
}

.app-sidebar-toggle {
    color: var(--sender-text);
    display: none;
    font-size: 1.1rem;
    padding: .25rem .35rem;
}

.app-topbar-kicker {
    color: var(--sender-muted);
    font-size: .72rem;
    font-weight: 750;
    line-height: 1.1;
    text-transform: uppercase;
}

.app-topbar-title {
    color: var(--sender-text);
    font-size: .98rem;
    font-weight: 800;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-topbar-icon,
.app-topbar-user {
    align-items: center;
    color: #4b5565;
    display: inline-flex;
    min-height: 34px;
    text-decoration: none;
}

.app-topbar-icon {
    justify-content: center;
    position: relative;
    width: 34px;
}

.app-topbar-icon:hover,
.app-topbar-user:hover {
    color: var(--sender-text);
    text-decoration: none;
}

.app-notification-badge {
    font-size: .58rem;
    left: 18px;
    padding: .12rem .28rem;
    position: absolute;
    top: 2px;
}

.app-content {
    padding: 1rem 1.2rem 2rem;
}

.app-public-content {
    padding: 1rem 0 2rem;
}

.app-sidebar-backdrop {
    background: rgba(15, 23, 42, .42);
    display: none;
    inset: 0;
    position: fixed;
    z-index: 1020;
}

nav.navbar .navbar-brand {
    font-size: 1.25rem;
}

nav.navbar .nav-link {
    border-radius: .3rem;
    font-size: .92rem;
    padding: .42rem .6rem;
}

nav.navbar .nav-link.active {
    background: var(--sender-surface-muted);
    color: var(--sender-text) !important;
    font-weight: 700;
}

.dropdown-menu {
    border-color: var(--sender-border);
    border-radius: var(--sender-radius);
    box-shadow: 0 8px 20px rgba(16, 24, 40, .08);
    font-size: .9rem;
}

.dropdown-item {
    padding: .42rem .9rem;
}

.container-fluid.app-shell {
    margin: 0 auto;
    max-width: 1680px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.table-sm {
    font-size: 87.5%;
}

.table {
    color: var(--sender-text);
    font-size: .9rem;
}

.table td,
.table th {
    border-color: var(--sender-border-soft);
    padding: .48rem .65rem;
    vertical-align: middle;
}

.table thead th {
    background: var(--sender-surface-muted);
    border-bottom: 1px solid var(--sender-border);
    color: #4b5565;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

.table-hover tbody tr:hover {
    background-color: #f8fbff;
}

.btn {
    border-radius: .3rem;
    font-weight: 600;
}

.btn-primary {
    background-color: var(--sender-primary);
    border-color: var(--sender-primary);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: #155dbd;
    border-color: #155dbd;
    color: #fff;
}

.btn-outline-secondary {
    border-color: #8793a2;
    color: var(--sender-muted);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:not(:disabled):not(.disabled):active {
    background-color: var(--sender-muted);
    border-color: var(--sender-muted);
    color: #fff;
}

.btn:not(.btn-sm) {
    font-size: .9rem;
    padding: .38rem .72rem;
}

.btn-sm {
    font-size: .8rem;
    padding: .22rem .48rem;
}

.badge {
    border-radius: 999px;
    font-weight: 650;
    letter-spacing: 0;
    padding: .25em .55em;
}

.form-control {
    border-color: #cfd7e2;
    border-radius: .3rem;
    color: var(--sender-text);
    font-size: .92rem;
    min-height: calc(1.45em + .62rem + 2px);
    padding: .3rem .55rem;
}

.form-control:focus {
    border-color: #80aef3;
    box-shadow: 0 0 0 .12rem rgba(31, 111, 235, .16);
}

.form-group {
    margin-bottom: .8rem;
}

.form-group label,
label {
    color: #344054;
    font-size: .84rem;
    font-weight: 650;
    margin-bottom: .25rem;
}

.text-muted {
    color: var(--sender-muted) !important;
}

.app-panel,
.app-table-panel,
.app-card,
.app-form-panel {
    background: var(--sender-surface);
    border: 1px solid var(--sender-border);
    border-radius: var(--sender-radius);
    box-shadow: var(--sender-shadow);
}

.app-panel,
.app-form-panel {
    padding: .95rem;
}

.app-table-panel {
    overflow: hidden;
}

.scheduler-campaign-viewbar {
    background: var(--sender-surface-muted);
    border-bottom: 1px solid var(--sender-border);
    gap: .75rem;
    min-height: 50px;
    padding: .55rem .75rem;
}

.scheduler-campaign-viewbar .btn {
    min-width: 96px;
}

.scheduler-campaign-archived > td {
    background: var(--sender-surface-muted);
}

.app-panel-title,
.app-section-title {
    align-items: center;
    display: flex;
    font-size: .98rem;
    font-weight: 700;
    justify-content: space-between;
    margin-bottom: .65rem;
}

.app-stat-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-bottom: 1rem;
}

.app-stat-card {
    background: var(--sender-surface);
    border: 1px solid var(--sender-border);
    border-radius: var(--sender-radius);
    box-shadow: var(--sender-shadow);
    min-height: 76px;
    padding: .65rem .75rem;
}

.app-stat-label {
    color: var(--sender-muted);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 0;
}

.app-stat-value {
    color: var(--sender-text);
    font-size: 1.35rem;
    font-weight: 750;
    line-height: 1.15;
    margin-top: .18rem;
}

.app-empty {
    color: var(--sender-muted);
    padding: 1.5rem 1rem;
}

.app-kicker {
    color: var(--sender-muted);
    font-size: .86rem;
}

.card {
    border-color: var(--sender-border);
    border-radius: var(--sender-radius);
    box-shadow: var(--sender-shadow);
}

.card-header {
    background: var(--sender-surface-muted);
    border-bottom-color: var(--sender-border);
    font-weight: 700;
    padding: .55rem .75rem;
}

.card-body {
    padding: .85rem;
}

.alert {
    border-radius: var(--sender-radius);
    box-shadow: none;
    padding: .65rem .8rem;
}

.progress {
    background-color: #e8edf3;
    border-radius: 999px;
}

.nav-tabs {
    border-bottom-color: var(--sender-border);
    gap: .18rem;
}

.nav-tabs .nav-link {
    border-radius: .3rem .3rem 0 0;
    color: #4b5565;
    font-size: .9rem;
    padding: .45rem .68rem;
}

.nav-tabs .nav-link.active {
    border-color: var(--sender-border) var(--sender-border) var(--sender-surface);
    color: var(--sender-text);
    font-weight: 700;
}

.pagination .page-link {
    border-color: var(--sender-border);
    color: #155dbd;
    padding: .3rem .55rem;
}

.bg-white.border,
.bg-white.border.rounded,
.border.bg-white,
.scheduler-filter-panel,
.analytics-filter-panel,
.analytics-card,
.analytics-panel,
.analytics-table-panel,
.health-item,
.report-panel,
.metric-tile,
.list-panel,
.list-card,
.launch-section,
.launch-side,
.launch-card,
.template-editor-panel,
.template-help-panel,
.smtp-editor-header,
.smtp-editor-panel,
.smtp-editor-actions {
    border-color: var(--sender-border) !important;
    border-radius: var(--sender-radius) !important;
    box-shadow: var(--sender-shadow) !important;
}

.analytics-card,
.health-item,
.metric-tile,
.list-card,
.launch-card {
    min-height: 82px !important;
    padding: .72rem .82rem !important;
}

.analytics-panel,
.analytics-table-panel,
.report-panel,
.list-panel,
.launch-section,
.launch-side,
.template-editor-panel,
.template-help-panel {
    padding: .85rem !important;
}

.analytics-card-value,
.health-item-value,
.metric-value,
.list-card-value,
.launch-value {
    font-size: 1.42rem !important;
}

.analytics-card-label,
.metric-label,
.list-card-label,
.launch-label,
.campaign-data-label {
    letter-spacing: 0 !important;
}

.analytics-chart,
.report-chart,
.list-chart {
    min-height: 260px;
}

.alert ul,
form small.form-text ul {
    margin-bottom: 0;
    list-style: none;
    padding: 0;
}

.pagination .page-item {
    min-width: 38px;
    text-align: center;
}

.scheduler-page-header {
    gap: 1rem;
    background: var(--sender-surface);
    border: 1px solid var(--sender-border);
    border-radius: var(--sender-radius);
    box-shadow: var(--sender-shadow);
    padding: .85rem .95rem;
}

.scheduler-page-header h2 {
    font-size: 1.35rem;
}

.scheduler-project-bar {
    background: var(--sender-surface);
    border: 1px solid var(--sender-border);
    border-radius: var(--sender-radius);
    box-shadow: var(--sender-shadow);
    gap: .75rem;
    padding: .55rem .75rem;
}

.scheduler-project-bar .nav-pills {
    gap: .15rem;
}

.scheduler-project-bar .nav-pills .nav-link {
    border-radius: .3rem;
    color: #4b5565;
    padding: .28rem .55rem;
}

.scheduler-project-bar .nav-pills .nav-link.active {
    background: #edf4ff;
    color: #155dbd;
    font-weight: 700;
}

.scheduler-action-bar,
.scheduler-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
}

.scheduler-action-bar .btn,
.scheduler-row-actions .btn {
    white-space: normal;
}

.scheduler-action-bar .btn {
    white-space: nowrap;
}

.scheduler-row-actions form {
    margin-bottom: 0;
}

.scheduler-table-actions {
    min-width: 238px;
}

.campaign-row-actions {
    flex-wrap: nowrap;
}

.scheduler-row-action-icon {
    align-items: center;
    display: inline-flex;
    flex: 0 0 32px;
    height: 32px;
    justify-content: center;
    padding: 0;
    width: 32px;
}

.scheduler-filter-panel {
    background: #fff;
    border: 1px solid var(--sender-border);
    border-radius: var(--sender-radius);
    margin-bottom: 1rem;
    padding: .85rem;
}

.scheduler-filter-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    gap: 1rem;
    align-items: end;
}

.scheduler-filter-grid-wide {
    grid-template-columns: repeat(3, minmax(240px, 1fr)) auto;
}

.scheduler-filter-field {
    min-width: 0;
}

.scheduler-filter-label {
    color: #343a40;
    display: block;
    font-size: .82rem;
    font-weight: 700;
    margin-bottom: .3rem;
}

.scheduler-multiselect {
    min-height: 7.2rem;
    overflow: auto;
}

.scheduler-multiselect option {
    padding: .35rem .45rem;
}

.scheduler-select-summary {
    color: var(--sender-muted);
    font-size: .8rem;
    margin-top: .25rem;
    min-height: 1.1rem;
}

.scheduler-multiselect.scheduler-multiselect-compact {
    min-height: 3.25rem;
}

.sender-upload-native {
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    overflow: hidden !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
}

.sender-file-picker {
    align-items: center;
    background: var(--sender-surface-muted);
    border: 1px dashed var(--sender-input-border);
    border-radius: var(--sender-radius);
    display: flex;
    gap: .75rem;
    min-height: 56px;
    padding: .55rem .65rem;
    transition: background-color .12s ease, border-color .12s ease;
}

.sender-file-picker.is-dragging {
    background: var(--sender-primary-soft);
    border-color: var(--sender-focus-border);
}

.sender-file-picker-button {
    flex: 0 0 auto;
}

.sender-file-picker-name {
    color: var(--sender-text);
    font-size: .9rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.scheduler-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}

.scheduler-email-preview {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    overflow: hidden;
}

.scheduler-email-preview-frame {
    display: block;
    width: 100%;
    min-height: 420px;
    border: 0;
    background: #fff;
}

.scheduler-preview-text pre {
    white-space: pre-wrap;
    word-break: break-word;
}

.smtp-editor-header {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .35rem;
    padding: 1rem;
}

.smtp-editor-header h2 {
    font-size: 1.45rem;
}

.smtp-editor-summary {
    color: #6c757d;
    display: flex;
    flex-wrap: wrap;
    font-size: .86rem;
    gap: .4rem;
}

.smtp-editor-summary span {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 999px;
    padding: .16rem .55rem;
}

.smtp-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.smtp-editor-panel {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .35rem;
    padding: .8rem .9rem .65rem;
}

.smtp-editor-panel-core {
    grid-column: 1 / 2;
    grid-row: 1;
}

.smtp-editor-panel-connection {
    grid-column: 2 / 3;
    grid-row: 1;
}

.smtp-editor-panel-limits {
    grid-column: 1 / 2;
    grid-row: 2;
}

.smtp-editor-panel-replies {
    grid-column: 1 / -1;
    grid-row: 3;
}

.smtp-editor-panel-pace {
    grid-column: 2 / 3;
    grid-row: 2;
}

.smtp-editor-actions {
    grid-column: 1 / -1;
}

.smtp-editor-section-title {
    color: #212529;
    font-size: .9rem;
    font-weight: 700;
    margin-bottom: .75rem;
}

.smtp-editor-note {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: var(--sender-radius);
    color: #495057;
    font-size: .84rem;
    line-height: 1.4;
    padding: .5rem .65rem;
}

.smtp-editor-form .form-group {
    margin-bottom: .65rem;
}

.smtp-editor-form label {
    color: #343a40;
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: .2rem;
}

.smtp-editor-form .form-control {
    font-size: .92rem;
    height: calc(1.5em + .55rem + 2px);
    padding: .275rem .55rem;
}

.smtp-editor-form small.form-text {
    display: none;
}

.smtp-editor-form .form-check {
    margin-bottom: .35rem;
}

.smtp-editor-form .form-check-label {
    margin-bottom: 0;
}

.smtp-editor-toggle-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.smtp-editor-toggle-row .form-group,
.smtp-editor-toggle-inline .form-group {
    margin-bottom: 0;
}

.smtp-editor-toggle-inline {
    margin-left: 1rem;
    min-width: 180px;
}

.smtp-editor-actions {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .35rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
    padding: .75rem .95rem;
}

@media (max-width: 767.98px) {
    body > nav.navbar {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .container-fluid.app-shell {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .scheduler-page-header {
        padding: .75rem;
    }

    .scheduler-page-header h2 {
        font-size: 1.2rem;
    }

    .scheduler-project-bar {
        align-items: stretch !important;
    }

    .scheduler-project-bar .nav-pills {
        overflow-x: auto;
        padding-bottom: .15rem;
        width: 100%;
    }

    .scheduler-action-bar,
    .scheduler-row-actions {
        justify-content: flex-start;
    }

    .scheduler-action-bar .btn,
    .scheduler-row-actions .btn {
        width: 100%;
    }

    .scheduler-filter-grid,
    .scheduler-filter-grid-wide {
        grid-template-columns: 1fr;
    }

    .scheduler-filter-actions {
        justify-content: stretch;
    }

    .scheduler-filter-actions .btn {
        width: 100%;
    }

    .smtp-editor-header h2 {
        font-size: 1.25rem;
    }

    .smtp-editor-grid {
        grid-template-columns: 1fr;
    }

    .smtp-editor-panel-core,
    .smtp-editor-panel-connection,
    .smtp-editor-panel-limits,
    .smtp-editor-panel-replies,
    .smtp-editor-panel-pace,
    .smtp-editor-actions {
        grid-column: auto;
        grid-row: auto;
    }

    .smtp-editor-toggle-inline {
        margin-left: 0;
        margin-top: .5rem;
        width: 100%;
    }

    .smtp-editor-actions .btn {
        width: 100%;
    }
}

@media (max-width: 991.98px) {
    body.app-sidebar-open {
        overflow: hidden;
    }

    .app-sidebar {
        box-shadow: 12px 0 30px rgba(15, 23, 42, .14);
        transform: translateX(-100%);
        transition: transform .18s ease;
    }

    body.app-sidebar-open .app-sidebar {
        transform: translateX(0);
    }

    body.app-sidebar-open .app-sidebar-backdrop {
        display: block;
    }

    .app-main {
        margin-left: 0;
    }

    .app-sidebar-toggle {
        display: inline-flex;
    }

    .app-topbar {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .app-topbar-actions {
        gap: .45rem;
    }

    .app-topbar-user {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-content {
        padding: .85rem .75rem 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .app-sidebar {
        width: min(86vw, 286px);
    }

    .app-topbar-kicker {
        display: none;
    }

    .app-topbar-actions .btn-group-sm .btn {
        padding-left: .38rem;
        padding-right: .38rem;
    }

}
