/* Mail Server monitoring page. Builds on monitoring-product.css (nnm-*).
   The project has no token build; values follow DESIGN.md and match monitoring-product.css. */
/* ds-allow-hardcode:start */
.nn-page-mailserver .nnm-page {
    --nnms-ok: #1d7448;
    --nnms-ok-bg: #e6f5ec;
    --nnms-warn: #8f560f;
    --nnms-warn-bg: #fcf0de;
    --nnms-warn-line: #d08a35;
}

/* Hero: conceptual mail path */
.nn-page-mailserver .nnm-page .nnms-flow {
    max-width: 1120px;
}
.nn-page-mailserver .nnms-flow-frame {
    padding: clamp(18px, 2.6vw, 34px);
    border: 1px solid #c9d9ea;
    border-radius: clamp(16px, 2vw, 24px);
    background: linear-gradient(180deg, #fff 0, #f4f8fd 100%);
    box-shadow: 0 28px 75px rgba(26, 57, 101, .14);
}
.nn-page-mailserver .nnms-flow-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 18px;
    margin-bottom: clamp(22px, 3vw, 34px);
    border-bottom: 1px solid var(--nnm-line);
}
.nn-page-mailserver .nnms-flow-head strong { color: var(--nnm-ink); font-size: 1rem; font-weight: 800; }
.nn-page-mailserver .nnms-flow-head span {
    padding: 3px 11px;
    border: 1px solid var(--nnm-line);
    border-radius: 999px;
    color: var(--nnm-muted);
    font-size: .8rem;
}
.nn-page-mailserver .nnms-flow-track {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1fr);
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nn-page-mailserver .nnms-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 20px 14px 18px;
    border: 1px solid #d4e1ee;
    border-radius: 14px;
    background: #fff;
    text-align: center;
}
.nn-page-mailserver .nnms-node svg {
    width: 30px;
    height: 30px;
    margin-bottom: 4px;
    fill: none;
    stroke: #245bab;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.nn-page-mailserver .nnms-node strong { color: var(--nnm-ink); font-size: .98rem; font-weight: 800; line-height: 1.6; }
.nn-page-mailserver .nnms-node span { color: var(--nnm-muted); font-size: .8rem; line-height: 1.7; }
.nn-page-mailserver .nnms-node-core { border-color: #245bab; background: #245bab; }
.nn-page-mailserver .nnms-node-core svg { stroke: #fff; }
.nn-page-mailserver .nnms-node-core strong { color: #fff; }
.nn-page-mailserver .nnms-node-core span { color: #d6e5f8; }

.nn-page-mailserver .nnms-hop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding-inline: 6px;
}
.nn-page-mailserver .nnms-proto { color: #183854; font-size: .84rem; font-weight: 800; white-space: nowrap; }
.nn-page-mailserver .nnms-line {
    position: relative;
    width: 100%;
    height: 2px;
    background: #8fb3da;
}
/* The page is RTL only, so the flow runs right to left and the arrow points left. */
.nn-page-mailserver .nnms-line::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 9px;
    height: 9px;
    border-bottom: 2px solid #8fb3da;
    border-left: 2px solid #8fb3da;
    transform: translateY(-50%) rotate(45deg);
}
.nn-page-mailserver .nnms-line-warn {
    background: repeating-linear-gradient(to left, var(--nnms-warn-line) 0 7px, transparent 7px 12px);
}
.nn-page-mailserver .nnms-line-warn::after { border-color: var(--nnms-warn-line); }
.nn-page-mailserver .nnms-status {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}
.nn-page-mailserver .nnms-status-ok { background: var(--nnms-ok-bg); color: var(--nnms-ok); }
.nn-page-mailserver .nnms-status-warn { background: var(--nnms-warn-bg); color: var(--nnms-warn); }

.nn-page-mailserver .nnms-flow-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    margin-top: clamp(22px, 3vw, 32px);
    padding-top: 18px;
    border-top: 1px solid var(--nnm-line);
}
.nn-page-mailserver .nnms-origins { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--nnm-muted); font-size: .84rem; }
.nn-page-mailserver .nnms-chip {
    padding: 4px 11px;
    border: 1px solid #d1e1f0;
    border-radius: 999px;
    background: #f3f8fe;
    color: #28517d;
    font-weight: 700;
}
.nn-page-mailserver .nnms-alert-sample {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border: 1px solid #f0d6b0;
    border-radius: 10px;
    background: var(--nnms-warn-bg);
    color: var(--nnms-warn);
    font-size: .84rem !important;
    font-weight: 600;
    line-height: 1.7;
}
.nn-page-mailserver .nnms-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nnms-warn-line);
}
.nn-page-mailserver .nnms-flow figcaption {
    margin-top: 12px;
    color: #526276;
    font-size: .875rem !important;
    line-height: 1.8;
    text-align: center;
}

/* SMTP / POP3 comparison */
.nn-page-mailserver .nnms-compare { background: #fff; }
.nn-page-mailserver .nnms-table-wrap {
    max-width: 980px;
    margin-inline: auto;
    border: 1px solid var(--nnm-line);
    border-radius: 14px;
    overflow: hidden;
}
.nn-page-mailserver .nnms-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: .95rem;
    line-height: 1.85;
}
.nn-page-mailserver .nnms-table :is(th, td) {
    padding: 17px 22px;
    border-bottom: 1px solid var(--nnm-line);
    text-align: right;
    vertical-align: top;
}
.nn-page-mailserver .nnms-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
.nn-page-mailserver .nnms-table thead th {
    background: #f3f7fb;
    color: #183854;
    font-size: 1rem;
    font-weight: 800;
}
.nn-page-mailserver .nnms-table tbody th { width: 27%; color: #183854; font-weight: 800; }
.nn-page-mailserver .nnms-table td { color: var(--nnm-muted); }
.nn-page-mailserver .nnms-table :is(td, thead th:not(:first-child)) { border-inline-start: 1px solid var(--nnm-line); }

.nn-page-mailserver .nnms-origin-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px;
    max-width: 980px;
    margin: 40px auto 0;
}
.nn-page-mailserver .nnms-origin-strip > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 18px;
    border-top: 2px solid #245bab;
}
.nn-page-mailserver .nnms-origin-strip strong { color: #183854; font-size: 1rem; font-weight: 800; }
.nn-page-mailserver .nnms-origin-strip span { color: var(--nnm-muted); font-size: .93rem; line-height: 1.9; }

/* Alert channels */
.nn-page-mailserver .nnms-channels-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 20px clamp(32px, 6vw, 90px);
    margin-bottom: 40px;
}
.nn-page-mailserver .nnms-channels-head .nnm-section-title { margin-bottom: 0 !important; }
.nn-page-mailserver .nnms-channels-head > p {
    color: var(--nnm-muted);
    font-size: 1.03rem !important;
    line-height: 2;
}
.nn-page-mailserver .nnms-channel-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nn-page-mailserver .nnms-channel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 24px 20px;
    border: 1px solid #d8e5f1;
    border-radius: 14px;
    background: #fff;
}
.nn-page-mailserver .nnms-channel strong { color: #183854; font-size: 1.08rem; font-weight: 800; }
.nn-page-mailserver .nnms-channel p { flex: 1; color: var(--nnm-muted); font-size: .93rem !important; line-height: 1.9; }
.nn-page-mailserver .nnms-channel a {
    align-self: flex-start;
    margin-top: 6px;
    color: #245bab;
    font-size: .9rem;
    font-weight: 800;
    text-decoration: none;
}
.nn-page-mailserver .nnms-channel a:hover { color: #164a87; text-decoration: underline; }
.nn-page-mailserver .nnms-channel a:focus-visible { outline: 3px solid #e6a75c; outline-offset: 3px; }
.nn-page-mailserver .nnms-channel-note {
    border: 1px solid #a9c9e7;
    border-inline-start: 5px solid #3982c4;
    background: #eaf2fb;
}
.nn-page-mailserver .nnms-channel-note strong { color: #174984; font-size: 1.16rem; }
.nn-page-mailserver .nnms-channel-note p { color: #34526f; font-weight: 600; }
.nn-page-mailserver .nnms-channel-plan { margin-top: 20px; }

.nn-page-mailserver .nnm-faq details p a { color: #245bab; font-weight: 700; text-decoration: underline; }

@media (max-width: 900px) {
    .nn-page-mailserver .nnms-channels-head { grid-template-columns: 1fr; }
    .nn-page-mailserver .nnms-channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .nn-page-mailserver .nnms-flow-track { grid-template-columns: 1fr; gap: 0; }
    .nn-page-mailserver .nnms-node { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 4px 12px; padding: 14px 16px; text-align: right; }
    .nn-page-mailserver .nnms-node svg { width: 26px; height: 26px; margin: 0; }
    .nn-page-mailserver .nnms-node span { flex-basis: 100%; padding-inline-start: 38px; }
    .nn-page-mailserver .nnms-hop {
        flex-direction: row;
        justify-content: flex-start;
        gap: 14px;
        padding: 0 28px;
        min-height: 58px;
    }
    .nn-page-mailserver .nnms-line { order: -1; flex: 0 0 2px; width: 2px; height: 58px; }
    .nn-page-mailserver .nnms-line-warn { background: repeating-linear-gradient(to bottom, var(--nnms-warn-line) 0 7px, transparent 7px 12px); }
    .nn-page-mailserver .nnms-line::after {
        top: auto;
        bottom: 1px;
        left: 50%;
        border-left: 0;
        border-right: 2px solid #8fb3da;
        transform: translateX(-50%) rotate(45deg);
    }
    .nn-page-mailserver .nnms-line-warn::after { border-color: var(--nnms-warn-line); }
    .nn-page-mailserver .nnms-flow-foot { flex-direction: column; align-items: stretch; }
}

@media (max-width: 600px) {
    .nn-page-mailserver .nnms-table-wrap { border: 0; border-radius: 0; overflow: visible; }
    .nn-page-mailserver .nnms-table thead { display: none; }
    .nn-page-mailserver .nnms-table,
    .nn-page-mailserver .nnms-table tbody,
    .nn-page-mailserver .nnms-table tr,
    .nn-page-mailserver .nnms-table :is(th, td) { display: block; width: 100%; }
    .nn-page-mailserver .nnms-table tr {
        margin-bottom: 12px;
        border: 1px solid var(--nnm-line);
        border-radius: 14px;
        overflow: hidden;
    }
    .nn-page-mailserver .nnms-table tbody th { width: 100%; background: #f3f7fb; }
    .nn-page-mailserver .nnms-table :is(th, td) { padding: 12px 18px; border-inline-start: 0; }
    .nn-page-mailserver .nnms-table tbody tr:last-child th { border-bottom: 1px solid var(--nnm-line); }
    .nn-page-mailserver .nnms-table td::before {
        content: attr(data-label);
        display: block;
        color: #245bab;
        font-size: .8rem;
        font-weight: 800;
        direction: ltr;
        text-align: right;
    }
    .nn-page-mailserver .nnms-origin-strip { grid-template-columns: 1fr; gap: 24px; }
    .nn-page-mailserver .nnms-channel-grid { grid-template-columns: 1fr; }
}
.nn-page-mailserver .nnm-step-number {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid #d7e5f6;
    border-radius: 50%;
    background: #eef5ff;
    color: #245bab;
    font-size: .95rem;
    font-weight: 800;
    line-height: 1;
}
/* ds-allow-hardcode:end */