/* System SzK v2 — uzupełnienia do motywu Vuexy */

.app-logo { max-height: 28px; max-width: 110px; }
.app-logo-auth { max-height: 48px; max-width: 200px; }
.app-brand { padding: 1.25rem 1.5rem; }
.app-brand-text { font-weight: 600; font-size: 1.05rem; color: var(--bs-heading-color); }
[data-bs-theme="dark"] .app-logo,
[data-bs-theme="dark"] .app-logo-auth { filter: brightness(0) invert(.92); }

.layout-navbar-fixed .content-wrapper .container-p-y:not([class^=pt-]):not([class*=" pt-"]) { padding-block-start: 2rem !important; }

/* Tabele list */
div.card-datatable .dt-container > .row { --bs-gutter-x: 0; padding-inline: 1.5rem; margin-inline: 0 !important; }
.table td.text-nowrap-sm { white-space: nowrap; }
.table .search-hidden { display: none; }

/* Etapy realizacji */
.stage-icons { display: inline-flex; gap: 4px; }
.stage-ico { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; border: 1px solid var(--bs-border-color); background: transparent; color: var(--bs-body-color); opacity: .7; transition: background .15s, color .15s, border-color .15s; }
.stage-ico .icon-base { font-size: 18px; width: 18px; height: 18px; }
.stage-ico.on { background: var(--bs-success); border-color: var(--bs-success); color: #fff; opacity: 1; }
button.stage-ico { cursor: pointer; }
button.stage-ico:hover { border-color: var(--bs-success); color: var(--bs-success); opacity: 1; }
button.stage-ico.on:hover { color: #fff; filter: brightness(.92); }
button.stage-ico:disabled { opacity: .5; }
.stage-table tr.stage-row { cursor: pointer; }
.stage-table tr.stage-row:hover .stage-ico:not(.on) { border-color: var(--bs-success); color: var(--bs-success); opacity: 1; }

/* Karta klienta */
.client-side dt { font-weight: 500; color: var(--bs-secondary-color); font-size: .8125rem; margin-bottom: .1rem; }
.client-side dd { margin-bottom: .75rem; word-break: break-word; }
.section-title { font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); font-weight: 600; margin: 1.75rem 0 1rem; display: flex; align-items: center; gap: .5rem; }
.section-title:first-child { margin-top: 0; }
.section-title::after { content: ''; flex: 1; border-bottom: 1px solid var(--bs-border-color); }

/* Dziennik */
.log-changes { margin: .35rem 0 0; padding: 0; list-style: none; font-size: .8125rem; }
.log-changes li { padding: .1rem 0; }
.log-changes del { color: var(--bs-danger); text-decoration: line-through; }
.log-changes ins { color: var(--bs-success); text-decoration: none; }
.timeline .timeline-item { padding-bottom: 1rem; }

.select2-container { width: 100% !important; }
.nav-pills .nav-link { text-transform: none; }
.cursor-pointer { cursor: pointer; }
.min-w-0 { min-width: 0; }

/* Logowanie: delikatne tło — siatka kropek wygaszana ku środkowi + miękkie plamy koloru głównego */
body.auth-bg { background-color: var(--bs-body-bg); position: relative; }
body.auth-bg::before, body.auth-bg::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; }
body.auth-bg::before {
  background-image: radial-gradient(color-mix(in srgb, var(--bs-primary) 22%, transparent) 1px, transparent 1.2px);
  background-size: 1.25vw 1.25vw;
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 18%, #000 75%);
          mask-image: radial-gradient(ellipse at center, transparent 18%, #000 75%);
}
body.auth-bg::after {
  background:
    radial-gradient(40vw 40vw at 8% 12%, color-mix(in srgb, var(--bs-primary) 10%, transparent), transparent 70%),
    radial-gradient(36vw 36vw at 94% 90%, color-mix(in srgb, var(--bs-info) 9%, transparent), transparent 70%);
}
body.auth-bg > .container-xxl { position: relative; z-index: 1; }
@media (max-width: 767.98px) { body.auth-bg::before { background-size: 4.5vw 4.5vw; } }

/* Serwery */
.srv-mono { font-family: var(--bs-font-monospace); font-variant-numeric: tabular-nums; }
.srv-countdown { width: 4rem; height: .25rem; }
.srv-box { background: var(--bs-gray-50, rgba(var(--bs-body-color-rgb), .03)); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); padding: .5rem; }
.srv-chart { display: block; width: 100%; overflow: visible; }
.srv-chart-line { fill: none; stroke: var(--bs-primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.srv-chart-area { fill: color-mix(in srgb, var(--bs-primary) 12%, transparent); }
.srv-chart-disk { stroke: var(--bs-success); opacity: .6; }
.srv-chart-dot { fill: var(--bs-success); }
.srv-tip { position: fixed; pointer-events: none; z-index: 2000; }
.srv-scroll { max-height: 22rem; overflow-y: auto; }
.srv-cell { max-width: 14rem; }
.srv-cmd { max-width: 22rem; font-size: .8125rem; }
.srv-mini-bar { width: 2.5rem; }
.srv-card { border-top: .1875rem solid var(--srv-accent, var(--bs-primary)); }
.srv-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.srv-stat { padding: .875rem 1rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); }
@media (min-width: 768px) { .srv-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .srv-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .srv-stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.srv-plan-progress { width: 100%; max-width: 18rem; }
.srv-tabs .nav-link { text-transform: none; }
.srv-table-sm thead th { font-size: .6875rem; padding-top: .625rem; padding-bottom: .625rem; }
.srv-table-sm td { font-size: .8125rem; }

/* Serwery: wykresy z dymkiem przy punkcie */
.srv-chart-wrap { position: relative; }
.srv-chart-area-disk { fill: color-mix(in srgb, var(--bs-success) 10%, transparent); }
.srv-chart-guide, .srv-chart-hl { position: absolute; pointer-events: none; opacity: 0; transition: opacity .12s; }
.srv-chart-guide { top: 0; bottom: 0; left: var(--hx); border-left: 1px dashed color-mix(in srgb, var(--chart-color) 60%, transparent); }
.srv-chart-hl { left: var(--hx); top: var(--hy); width: .75rem; height: .75rem; margin: -.375rem 0 0 -.375rem; border-radius: 50%;
  background: var(--chart-color); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--chart-color) 25%, transparent), 0 0 .75rem var(--chart-color); }
.srv-chart-wrap.hover .srv-chart-guide, .srv-chart-wrap.hover .srv-chart-hl { opacity: 1; }
.srv-tip { position: fixed; z-index: 2000; pointer-events: none; opacity: 0; transform: translateY(.25rem); transition: opacity .12s, transform .12s;
  background: var(--bs-paper-bg, var(--bs-body-bg)); color: var(--bs-body-color); border: 1px solid var(--bs-border-color);
  border-left: .1875rem solid var(--tip-color, var(--bs-primary)); border-radius: var(--bs-border-radius); padding: .4rem .65rem;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); font-size: .8125rem; white-space: nowrap; }
.srv-tip.show { opacity: 1; transform: none; }
.srv-tip-label { font-size: .6875rem; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .03em; }
.srv-tip-value { font-weight: 600; color: var(--bs-heading-color); font-family: var(--bs-font-monospace); }
.srv-tip-sub { font-size: .75rem; color: var(--bs-secondary-color); }

/* Serwery: usługi */
.srv-svc-summary { display: flex; align-items: center; gap: .875rem; padding: .875rem 1rem; border-radius: var(--bs-border-radius); }
.srv-svc-summary.is-ok { background: color-mix(in srgb, var(--bs-success) 12%, transparent); color: var(--bs-success); }
.srv-svc-summary.is-down { background: color-mix(in srgb, var(--bs-danger) 12%, transparent); color: var(--bs-danger); }
.srv-svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.srv-svc { display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); }
.srv-svc.is-down { border-color: color-mix(in srgb, var(--bs-danger) 50%, transparent); background: color-mix(in srgb, var(--bs-danger) 6%, transparent); }
.srv-svc-icon { width: 2rem; height: 2rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--bs-border-radius);
  background: color-mix(in srgb, var(--bs-primary) 12%, transparent); color: var(--bs-primary); }
.srv-svc.is-down .srv-svc-icon { background: color-mix(in srgb, var(--bs-danger) 14%, transparent); color: var(--bs-danger); }
.srv-svc-name { flex-grow: 1; font-size: .875rem; }
.srv-svc.is-down .srv-svc-name { color: var(--bs-danger); }
.srv-pulse { width: .5rem; height: .5rem; flex-shrink: 0; border-radius: 50%; background: var(--bs-success); animation: srv-pulse 2s infinite; }
.srv-svc.is-down .srv-pulse { background: var(--bs-danger); animation: none; }
@keyframes srv-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bs-success) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 .5rem transparent; } }
@media (prefers-reduced-motion: reduce) { .srv-pulse { animation: none; } }

/* Serwery: kolejka poczty */
.srv-q-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 575.98px) { .srv-q-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .srv-svc-grid { grid-template-columns: 1fr; } }
.srv-q-stat { display: flex; align-items: center; gap: .625rem; padding: .625rem .75rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); }
.srv-q-list { display: flex; flex-direction: column; }
.srv-q-item { display: flex; align-items: center; gap: .75rem; padding: .625rem .25rem; border-bottom: 1px solid var(--bs-border-color); }
.srv-q-item:last-child { border-bottom: 0; }
.srv-q-empty { text-align: center; padding: 1.5rem 0; }
.srv-q-empty .ti { font-size: 2.5rem; color: var(--bs-success); margin-bottom: .5rem; }

/* Uptime */
@media (min-width: 1200px) { .srv-stats-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.up-search { max-width: 22rem; }
.up-table td { vertical-align: middle; }
.up-row { cursor: pointer; }
.up-row-down { background: color-mix(in srgb, var(--bs-danger) 6%, transparent); }
.up-domain:hover { text-decoration: underline; }
.up-bar { display: flex; gap: 1px; height: 1.375rem; align-items: stretch; min-width: 10rem; }
.up-b { flex: 1; border-radius: 1px; background: var(--bs-border-color); }
.up-b-ok { background: color-mix(in srgb, var(--bs-success) 75%, transparent); }
.up-b-part { background: var(--bs-warning); }
.up-b-down { background: var(--bs-danger); }
.up-b:hover { filter: brightness(1.3); transform: scaleY(1.15); }
.up-dot { display: inline-block; width: .4rem; height: .4rem; border-radius: 50%; background: var(--bs-success); margin-right: .3rem; vertical-align: middle; animation: srv-pulse 2s infinite; }
.up-srv { transition: transform .15s, box-shadow .15s; }
.up-srv:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .2); }
.up-timeline { border-left: 2px solid var(--bs-border-color); margin-left: .375rem; padding-left: 1rem; display: flex; flex-direction: column; gap: .875rem; }
.up-tl-item { position: relative; }
.up-tl-item::before { content: ''; position: absolute; left: -1.4375rem; top: .3rem; width: .625rem; height: .625rem; border-radius: 50%; background: var(--bs-warning); box-shadow: 0 0 0 .1875rem var(--bs-paper-bg, var(--bs-body-bg)); }
.up-tl-item.is-open::before { background: var(--bs-danger); }
.up-copy { width: 1.5rem; height: 1.5rem; margin-left: .25rem; opacity: .45; vertical-align: middle; }
.up-row:hover .up-copy, .up-copy:focus { opacity: 1; }
.up-exc { padding: .875rem 1rem; border: 1px dashed color-mix(in srgb, var(--bs-warning) 60%, transparent); border-radius: var(--bs-border-radius); }
.up-note { max-width: 16rem; }

/* DNS Lookup */
.dns-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; }
.dns-type { display: flex; flex-direction: column; align-items: flex-start; text-align: left; line-height: 1.2; padding: .4rem .6rem; }
.dns-section { padding: 1rem 0; border-top: 1px solid var(--bs-border-color); }
.dns-diag { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .625rem; }
.dns-diag-item { display: flex; gap: .625rem; padding: .625rem .75rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); }
.dns-diag-item > .ti { font-size: 1.25rem; flex-shrink: 0; margin-top: .05rem; }
.dns-break, .dns-val { overflow-wrap: anywhere; }
.dns-records { border-top: 1px solid var(--bs-border-color); }
.dns-rec { padding: .75rem 0; border-bottom: 1px solid var(--bs-border-color); }
.dns-rec:last-child { border-bottom: 0; }
.dns-rec-head { display: flex; align-items: center; gap: .625rem; margin-bottom: .25rem; }
.dns-badge { min-width: 3.5rem; font-family: var(--bs-font-monospace); }
.dns-badge-A { background: color-mix(in srgb, var(--bs-primary) 18%, transparent); color: var(--bs-primary); }
.dns-badge-AAAA { background: color-mix(in srgb, var(--bs-info) 18%, transparent); color: var(--bs-info); }
.dns-badge-CNAME { background: color-mix(in srgb, #c084fc 20%, transparent); color: #c084fc; }
.dns-badge-MX { background: color-mix(in srgb, var(--bs-success) 18%, transparent); color: var(--bs-success); }
.dns-badge-NS { background: color-mix(in srgb, var(--bs-warning) 18%, transparent); color: var(--bs-warning); }
.dns-badge-TXT { background: color-mix(in srgb, var(--bs-secondary) 25%, transparent); color: var(--bs-body-color); }
.dns-badge-SOA, .dns-badge-CAA, .dns-badge-PTR { background: color-mix(in srgb, var(--bs-danger) 15%, transparent); color: var(--bs-danger); }
.dns-table td { border: 0; padding: .3rem .5rem; vertical-align: middle; }
.dns-table .dns-copy, .dns-card .card-header .dns-copy { width: 1.5rem; height: 1.5rem; margin-left: .25rem; opacity: .45; }
.dns-table tr:hover .dns-copy, .dns-copy:focus { opacity: 1; }
.dns-pri { width: 3rem; }
.dns-cmp td, .dns-cmp th { vertical-align: top; }
.dns-raw { max-height: 18rem; overflow: auto; white-space: pre-wrap; background: var(--bs-tertiary-bg, rgba(0, 0, 0, .1)); padding: .75rem; border-radius: var(--bs-border-radius); }
.btn-check + .dns-type { background: transparent; color: var(--bs-secondary-color); border-color: var(--bs-border-color); }
.btn-check:checked + .dns-type { background: color-mix(in srgb, var(--bs-primary) 16%, transparent); color: var(--bs-primary); border-color: var(--bs-primary); }

/* ── Poczta (monitor wysyłki) ─────────────────────────────── */
.mm-table td { vertical-align: middle; }
.mm-row { cursor: pointer; }
.mm-row:hover .mm-sender { color: var(--bs-primary) !important; }
.mm-subj { max-width: 15rem; }
.mm-subj-wide { max-width: 26rem; }
.mm-rcpt { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-note { max-width: 14rem; }
.mm-spark { display: inline-flex; align-items: flex-end; gap: 1px; height: 1.375rem; width: 6.5rem; }
.mm-spark i { flex: 1; min-height: 1px; background: color-mix(in srgb, var(--bs-primary) 55%, transparent); border-radius: 1px; }
.mm-spark i[style*="height:0%"] { background: var(--bs-border-color); height: 1px !important; }
.mm-bars { display: flex; align-items: flex-end; gap: 1px; height: 7rem; padding-bottom: 1px; border-bottom: 1px solid var(--bs-border-color); }
.mm-bars-d { height: 5rem; gap: 3px; }
.mm-bar { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; }
.mm-bar.is-mark { background: color-mix(in srgb, var(--bs-danger) 10%, transparent); }
.mm-bar-fill { position: relative; width: 100%; display: flex; align-items: flex-end; background: color-mix(in srgb, var(--bs-primary) 45%, transparent); border-radius: 1px 1px 0 0; }
.mm-bar-new { width: 100%; background: var(--bs-danger); opacity: .85; border-radius: 1px 1px 0 0; }
.mm-bar-fail { position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--bs-warning); }
.mm-bar:hover .mm-bar-fill { filter: brightness(1.25); }
.mm-ticks { display: flex; font-size: .6875rem; color: var(--bs-secondary-color); margin-top: .375rem; }
.mm-ticks span { flex: 1; }
.mm-key { display: inline-block; width: .625rem; height: .625rem; border-radius: 2px; vertical-align: -1px; margin-right: .25rem; }
.mm-key-known { background: color-mix(in srgb, var(--bs-primary) 45%, transparent); }
.mm-key-new { background: var(--bs-danger); }
.mm-key-mark { background: color-mix(in srgb, var(--bs-danger) 15%, transparent); border: 1px solid color-mix(in srgb, var(--bs-danger) 30%, transparent); }
.mm-alert { padding: 1rem 1.125rem; border: 1px solid var(--bs-border-color); border-left: .25rem solid var(--bs-warning); border-radius: var(--bs-border-radius); }
.mm-alert-high { border-left-color: var(--bs-danger); background: color-mix(in srgb, var(--bs-danger) 4%, transparent); }
.mm-chip { display: inline-block; padding: .0625rem .5rem; margin: 0 .125rem .25rem 0; border-radius: 1rem; background: var(--bs-gray-100, rgba(0,0,0,.04)); border: 1px solid var(--bs-border-color); font-size: .75rem; }
.mm-cty { margin-bottom: .625rem; }
.mm-tabs { padding: 0 1.5rem; }
.mm-tabs .nav-link { padding-top: 1rem; padding-bottom: .875rem; }
.mm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: 1rem 1.5rem; }
.mm-seg { display: inline-flex; padding: .1875rem; gap: .1875rem; border-radius: var(--bs-border-radius); background: var(--bs-tertiary-bg, rgba(0,0,0,.04)); border: 1px solid var(--bs-border-color); }
.mm-seg button { display: inline-flex; align-items: center; border: 0; background: transparent; color: var(--bs-body-color); font-size: .8125rem; font-weight: 500; padding: .3125rem .875rem; border-radius: calc(var(--bs-border-radius) - .125rem); transition: background .15s, color .15s; }
.mm-seg button:hover { color: var(--bs-heading-color); }
.mm-seg button.active { background: var(--bs-paper-bg, var(--bs-body-bg)); color: var(--bs-heading-color); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.mm-seg-n { margin-left: .5rem; padding: 0 .4375rem; border-radius: 1rem; font-size: .75rem; line-height: 1.25rem; background: color-mix(in srgb, var(--bs-secondary-color) 15%, transparent); }
.mm-seg-n:empty { display: none; }
.mm-search { width: 22rem; max-width: 100%; }
.mm-attr { margin-top: .75rem; font-size: .6875rem; } .mm-attr a { color: var(--bs-secondary-color); }
.rbl-table td, .rbl-table th { vertical-align: middle; } .rbl-ip { font-size: .75rem; } .rbl-reason { max-width: 28rem; }
/* ── Zasoby kont ──────────────────────────────────────────── */
.res-table td { vertical-align: middle; }
.res-table th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.res-table th[data-sort]:hover, .res-table th.is-sorted { color: var(--bs-primary); }
.res-row { cursor: pointer; }
.res-row:hover .res-user { color: var(--bs-primary) !important; }
.res-client { max-width: 16rem; }
.res-meter { height: .25rem; border-radius: 1rem; background: var(--bs-border-color); margin-top: .25rem; min-width: 4rem; overflow: hidden; }
.res-meter i { display: block; height: 100%; border-radius: 1rem; }
.res-bars { height: 6rem; }
.res-flags { min-width: 7rem; }
/* ── Serwery: lista (kafelki, karty, porównanie) ─────────── */
.srv-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .875rem .75rem; }
.srv-kpi { display: flex; align-items: flex-start; gap: .5rem; min-width: 0; color: inherit; }
.srv-kpi i { margin-top: .125rem; }
a.srv-kpi:hover .fw-semibold { text-decoration: underline; }
.srv-disk-row { display: flex; align-items: center; gap: .625rem; }
.srv-disk-row > span:first-child { width: 2.75rem; flex-shrink: 0; }
/* Uptime → Certyfikaty: nagłówki sekcji w kolorze sekcji (jasny i ciemny motyw) */
.up-table .up-tls-head td { background: color-mix(in srgb, var(--tls-c) 12%, var(--bs-paper-bg, var(--bs-body-bg))) !important; border-left: .25rem solid var(--tls-c);
  border-top: 1px solid color-mix(in srgb, var(--tls-c) 35%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--tls-c) 35%, transparent); padding: .875rem 1.25rem !important; }
.up-table .up-tls-gap td { height: 1.25rem; padding: 0 !important; border: 0 !important; background: transparent !important; }