/* ================================================================
   E-Diagnostyka — Etap 2: modernizacja UI bez zmiany logiki
   Zakres: spójne karty, tabele, formularze, statusy, modale, mobile
================================================================ */

:root {
  --etap2-radius-xs: 8px;
  --etap2-radius-sm: 12px;
  --etap2-radius-md: 16px;
  --etap2-radius-lg: 22px;
  --etap2-shadow-card: 0 18px 56px rgba(0, 0, 0, .30), 0 0 0 1px rgba(96, 165, 250, .05) inset;
  --etap2-shadow-hover: 0 22px 72px rgba(0, 0, 0, .36), 0 0 42px rgba(29, 111, 232, .10);
  --etap2-surface-glass: linear-gradient(145deg, rgba(17, 28, 45, .91), rgba(8, 13, 20, .82));
  --etap2-surface-soft: linear-gradient(145deg, rgba(15, 26, 42, .96), rgba(9, 16, 28, .94));
  --etap2-border-soft: rgba(98, 151, 224, .20);
  --etap2-border-strong: rgba(96, 165, 250, .38);
  --etap2-focus: 0 0 0 3px rgba(59, 142, 255, .20), 0 0 0 1px rgba(59, 142, 255, .70);
}

html {
  color-scheme: dark;
}

body {
  background:
    radial-gradient(circle at 18% 10%, rgba(29, 111, 232, .12), transparent 30%),
    radial-gradient(circle at 86% 18%, rgba(0, 194, 204, .08), transparent 28%),
    radial-gradient(circle at 52% 100%, rgba(34, 197, 94, .05), transparent 35%),
    var(--bg-base);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(96, 165, 250, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 165, 250, .028) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), transparent 78%);
}

::selection {
  background: rgba(59, 142, 255, .32);
  color: #fff;
}

/* ── Shell ─────────────────────────────────────────────────── */
.app-shell {
  isolation: isolate;
}

.main-content {
  min-width: 0;
}

.topbar {
  background: rgba(8, 13, 20, .84);
  border-bottom-color: rgba(96, 165, 250, .18);
  box-shadow: 0 12px 34px rgba(0,0,0,.18);
  backdrop-filter: blur(18px);
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(11, 18, 29, .98), rgba(7, 11, 18, .98)),
    radial-gradient(circle at 50% 0%, rgba(59, 142, 255, .16), transparent 34%);
  border-right-color: rgba(96, 165, 250, .18);
}

.sidebar__nav-link,
.sidebar a,
.nav-link {
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.sidebar__nav-link:hover,
.sidebar a:hover,
.nav-link:hover {
  transform: translateX(2px);
}

/* ── Unified cards ─────────────────────────────────────────── */
.home-card,
.card,
.settings-inner-card,
.settings-card,
.notif-switch-card,
.logs-stat,
.stat-card,
.module-card,
.login-card,
.alarms-detail,
.jk-schedule-modal__dialog {
  border-color: var(--etap2-border-soft) !important;
  box-shadow: var(--etap2-shadow-card);
  backdrop-filter: blur(16px);
}

.home-card,
.card,
.settings-inner-card,
.settings-card,
.notif-switch-card,
.alarms-detail {
  background: var(--etap2-surface-glass) !important;
}

.home-card,
.card,
.settings-inner-card,
.settings-card,
.notif-switch-card,
.logs-stat,
.module-card,
.stat-card {
  position: relative;
  overflow: hidden;
}

.home-card::before,
.card::before,
.settings-inner-card::before,
.settings-card::before,
.notif-switch-card::before,
.logs-stat::before,
.module-card::before,
.stat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), transparent 30%),
    radial-gradient(circle at 14% 0%, rgba(59, 142, 255, .09), transparent 32%);
  opacity: .92;
}

.home-card > *,
.card > *,
.settings-inner-card > *,
.settings-card > *,
.notif-switch-card > *,
.logs-stat > *,
.module-card > *,
.stat-card > * {
  position: relative;
  z-index: 1;
}

.home-card:hover,
.card:hover,
.settings-inner-card:hover,
.notif-switch-card:hover,
.module-card:hover,
.stat-card:hover {
  border-color: var(--etap2-border-strong) !important;
  box-shadow: var(--etap2-shadow-hover);
}

.panel-title,
.section-label,
.settings-accordion__title {
  letter-spacing: .01em;
}

.panel-title {
  gap: 12px;
}

.panel-title a,
.card-footer-link {
  color: #8fc5ff;
  font-weight: 700;
}

.panel-title a:hover,
.card-footer-link:hover {
  color: #67e8f9;
}

/* ── KPI cards ─────────────────────────────────────────────── */
.stat-card {
  min-height: 112px;
  border-radius: var(--etap2-radius-md) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-card__icon {
  box-shadow: 0 12px 30px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.08);
}

.stat-card__value {
  letter-spacing: -.02em;
}

.stat-card__delta,
.stat-card__sub {
  font-weight: 700;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn,
button.btn,
.home-select,
select,
button,
.btn-icon,
.tab-btn,
.map-toolbox__toggle,
.jk-quick-filter {
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
}

.btn,
button.btn,
.btn-icon,
.tab-btn,
.map-toolbox__toggle,
.jk-quick-filter {
  border-radius: var(--etap2-radius-sm) !important;
}

.btn:hover,
button.btn:hover,
.btn-icon:hover,
.tab-btn:hover,
.map-toolbox__toggle:hover,
.jk-quick-filter:hover {
  transform: translateY(-1px);
}

.btn--primary,
button.btn--primary {
  background: linear-gradient(135deg, #1d6fe8, #00c2cc) !important;
  border-color: rgba(103, 232, 249, .42) !important;
  box-shadow: 0 14px 32px rgba(29, 111, 232, .25);
}

.btn--primary:hover,
button.btn--primary:hover {
  box-shadow: 0 18px 42px rgba(29, 111, 232, .34), 0 0 30px rgba(0, 194, 204, .16);
}

.btn--secondary,
button.btn--secondary,
.btn--ghost,
button.btn--ghost {
  background: rgba(15, 26, 42, .72) !important;
  border-color: rgba(96, 165, 250, .22) !important;
}

.btn--secondary:hover,
button.btn--secondary:hover,
.btn--ghost:hover,
button.btn--ghost:hover {
  background: rgba(29, 111, 232, .14) !important;
  border-color: rgba(96, 165, 250, .40) !important;
}

button:disabled,
.btn:disabled,
[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .56 !important;
  transform: none !important;
}

/* ── Forms ─────────────────────────────────────────────────── */
.input,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.home-select {
  border-color: rgba(96, 165, 250, .22) !important;
  background: rgba(5, 12, 22, .76) !important;
  color: var(--text-primary) !important;
  border-radius: var(--etap2-radius-sm) !important;
}

.input:hover,
input:not([type="checkbox"]):not([type="radio"]):hover,
select:hover,
textarea:hover,
.home-select:hover {
  border-color: rgba(96, 165, 250, .36) !important;
}

.input:focus,
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus,
.home-select:focus,
button:focus-visible,
a:focus-visible,
.tab-btn:focus-visible {
  outline: none !important;
  box-shadow: var(--etap2-focus) !important;
  border-color: rgba(96, 165, 250, .62) !important;
}

.form-label,
.form-group label,
.logs-field label {
  color: #c7d8ef;
  font-weight: 800;
  letter-spacing: .02em;
}

.form-group,
.form-field,
.logs-field {
  min-width: 0;
}

/* ── Tables ────────────────────────────────────────────────── */
.table-wrap,
.table-responsive,
.logs-table-wrap,
.alarms-table-wrap {
  border-color: rgba(96, 165, 250, .18) !important;
  border-radius: var(--etap2-radius-md) !important;
  overflow: auto;
  background: rgba(5, 12, 22, .36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

table,
.table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

thead th,
.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(9, 16, 28, .96) !important;
  color: #b9d4f5 !important;
  border-bottom: 1px solid rgba(96, 165, 250, .22) !important;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

tbody tr,
.table tbody tr {
  transition: background .14s ease, transform .14s ease;
}

tbody tr:hover,
.table tbody tr:hover {
  background: rgba(29, 111, 232, .085) !important;
}

td,
th,
.table td,
.table th {
  vertical-align: middle;
}

/* ── Badges and statuses ───────────────────────────────────── */
.badge,
.status-badge,
.logs-pill,
[data-status-badge] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, .20);
  background: rgba(15, 26, 42, .72);
  color: #c8d9ef;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.badge-dot,
.status-dot,
.logs-pill::before {
  box-shadow: 0 0 12px currentColor;
}

.status-online,
.badge--success,
.badge--ok,
.is-online {
  color: var(--green) !important;
  border-color: var(--green-border) !important;
  background: rgba(34, 197, 94, .11) !important;
}

.status-offline,
.badge--danger,
.badge--critical,
.is-offline {
  color: var(--red) !important;
  border-color: var(--red-border) !important;
  background: rgba(239, 68, 68, .11) !important;
}

.status-warning,
.badge--warn,
.is-warning {
  color: var(--yellow) !important;
  border-color: var(--yellow-border) !important;
  background: rgba(245, 158, 11, .12) !important;
}

.status-info,
.badge--info,
.is-info {
  color: #67e8f9 !important;
  border-color: rgba(103, 232, 249, .24) !important;
  background: rgba(8, 145, 178, .13) !important;
}

.status-muted,
.badge--muted,
.is-muted {
  color: #94a3b8 !important;
  border-color: rgba(148, 163, 184, .22) !important;
  background: rgba(148, 163, 184, .09) !important;
}

/* ── Empty states and loaders ───────────────────────────────── */
.empty-state {
  border: 1px dashed rgba(96, 165, 250, .20);
  border-radius: var(--etap2-radius-md);
  background:
    linear-gradient(145deg, rgba(15, 26, 42, .56), rgba(8, 13, 20, .42)),
    radial-gradient(circle at 50% 0%, rgba(59, 142, 255, .09), transparent 45%);
  color: #9eb7d6;
}

.jk-skeleton-line,
.jk-skeleton-pill,
.jk-table-skeleton span,
.jk-log-skeleton span {
  background: rgba(125, 170, 230, .13) !important;
}

/* ── Details, timelines, logs ───────────────────────────────── */
.detail-row,
.dash-event,
.event-list > *,
.logs-entry,
.alarm-item {
  border-color: rgba(96, 165, 250, .14) !important;
}

.dash-event,
.event-list > * {
  border-radius: var(--etap2-radius-sm);
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.dash-event:hover,
.event-list > *:hover {
  background: rgba(29, 111, 232, .08) !important;
  border-color: rgba(96, 165, 250, .28) !important;
}

.detail-key {
  color: #89a9cf;
  font-weight: 800;
}

.detail-val,
.mono {
  color: #d9e8fb;
}

/* ── Modals ────────────────────────────────────────────────── */
.modal,
.dialog,
.jk-schedule-modal__dialog,
[role="dialog"] {
  border-color: rgba(96, 165, 250, .24) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.52), 0 0 54px rgba(29, 111, 232, .12) !important;
}

.jk-schedule-modal__backdrop,
.modal-backdrop,
.dialog-backdrop {
  backdrop-filter: blur(10px);
  background: rgba(2, 6, 14, .72) !important;
}

/* ── Login and auth pages ──────────────────────────────────── */
.login-card {
  border-radius: 24px !important;
  background: linear-gradient(145deg, rgba(9, 16, 28, .92), rgba(3, 10, 22, .78)) !important;
  border-color: rgba(103, 232, 249, .20) !important;
}

.logo-mark {
  letter-spacing: .08em;
}

.login-divider {
  background: linear-gradient(90deg, transparent, rgba(103, 232, 249, .45), rgba(29, 111, 232, .45), transparent) !important;
}

/* ── Mobile and responsive polish ───────────────────────────── */
@media (max-width: 1180px) {
  .dashboard-metrics-right,
  .settings-card-grid,
  .notif-switch-grid,
  .module-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  }
}

@media (max-width: 920px) {
  .app-shell {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "topbar"
      "main" !important;
  }

  .topbar {
    padding-inline: 14px;
  }

  .topbar__title p,
  .topbar__status,
  .topbar__user-info {
    display: none !important;
  }

  .main-content,
  .dashboard-main {
    padding: 14px !important;
  }

  /* Stack z gap (--panel-gap) zostaje dla Dashboardu columns-force
     oraz Status (.status-layout); display:block + margin-bottom
     dotyczy pozostałych układów stron. */
  .home-dashboard:not(.home-dashboard--columns-force):not(.status-layout),
  .alarms-layout,
  .settings-layout,
  .logs-layout {
    display: block !important;
  }

  .home-dashboard:not(.home-dashboard--columns-force):not(.status-layout) .home-card,
  .card,
  .settings-inner-card,
  .alarms-detail {
    margin-bottom: 14px;
  }
}

@media (max-width: 720px) {
  html { font-size: 13px; }

  .settings-card-grid,
  .notif-switch-grid,
  .module-grid,
  .form-grid,
  .logs-filters,
  .alarms-filters {
    grid-template-columns: 1fr !important;
  }

  .stat-card:not(.home-kpi) {
    min-height: 96px;
  }

  .panel-title {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .btn,
  button.btn,
  .home-select,
  select,
  input,
  textarea {
    min-height: 42px;
  }

  .table-wrap,
  .table-responsive,
  .logs-table-wrap,
  .alarms-table-wrap {
    margin-inline: -2px;
  }

  .login-card {
    width: min(100% - 24px, 460px) !important;
    margin-inline: auto !important;
  }
}

@media (max-width: 520px) {
  .main-content,
  .dashboard-main {
    padding: 10px !important;
  }

  .home-card,
  .card,
  .stat-card,
  .settings-inner-card,
  .notif-switch-card {
    border-radius: 16px !important;
  }

  .stat-card__head {
    gap: 11px;
  }

  .stat-card:not(.home-kpi) .stat-card__icon {
    width: 40px !important;
    height: 40px !important;
  }

  .topbar__title h1 {
    font-size: 17px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

/* Etap 6: tryb serwisowy jako osobny stan, bez czerwonego alarmu. */
.status-serwis,
.badge--service,
.is-service {
  color: #c4b5fd !important;
  border-color: rgba(167, 139, 250, .30) !important;
  background: rgba(139, 92, 246, .13) !important;
}