/* FILORUM CRM - Design System */

:root {
  --color-primary-start: #5BB8F5;
  --color-primary-end: #2651E8;
  --color-primary-gradient: linear-gradient(135deg, #5BB8F5 0%, #2651E8 100%);
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F7F9FC;
  --color-bg-tertiary: #EEF2F7;
  --color-text-primary: #1A1D23;
  --color-text-secondary: #6B7280;
  --color-text-tertiary: #9CA3AF;
  --color-border: #CDD3DC;
  --color-success: #10B981;
  --color-error: #EF4444;
  --color-warning: #F59E0B;
  --color-info: #3B82F6;

  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Font displayowy marki — @font-face w css/fonts.css (self-hosted, RODO).
     Tylko nagłówki/przyciski/nawigacja — tekst główny zostaje na --font-family. */
  --font-display: 'Quicksand', var(--font-family);
  --font-size-small: 13px;
  --font-size-body: 14px;
  --font-size-medium: 16px;
  --font-size-h3: 20px;
  --font-size-h2: 24px;
  --font-size-h1: 30px;

  /* ── Skala warstw (z-index) ──────────────────────────────────────────
     Jedyne źródło prawdy dla nakładających się warstw. Nie wpisuj liczb
     w regułach — użyj tokenu. Zasady i wyjątki: docs/NAWIGACJA.md.
     Modal transakcyjny leży PONAD panelem bocznym — to jedyne dozwolone
     zagnieżdżenie overlayów w aplikacji. */
  --z-sidebar:        100;
  --z-header:         200;
  --z-drawer-overlay: 900;
  --z-drawer:         901;
  --z-modal-overlay: 1000;
  --z-modal:         1001;
  --z-toast:         1100;
  --z-tooltip:       1200;

  --sidebar-width: 72px;
  --border-radius: 8px;
  --border-radius-sm: 6px;
  --border-radius-lg: 12px;
  --border-radius-pill: 20px;
  --border-radius-xs: 4px;

  /* Status colour pairs */
  --color-success-bg:   #D1FAE5;
  --color-success-text: #065F46;
  --color-success-alt:  #16A34A;
  --color-success-dark: #059669;  /* używany w stat-icon, event-rule-icon */
  --color-error-bg:     #FEE2E2;
  --color-error-text:   #991B1B;
  --color-error-dark:   #DC2626;
  --color-error-border: #FECACA;
  --color-warning-bg:   #FEF3C7;
  --color-warning-text: #92400E;
  --color-warning-dark: #D97706;
  --color-info-bg:      #DBEAFE;
  --color-info-text:    #1E40AF;
  --color-neutral-muted: #9CA3AF;
  --color-surface-hover: #FAFAFA;

  /* F-20 — Icon palette dla .stat-icon.* (rozszerza primary o akcenty
     wizualne dla różnych typów KPI). Wprowadzone jako tokeny żeby uniknąć
     hardkodowania w klasach. */
  --color-icon-blue:   #3B82F6;
  --color-icon-purple: #8B5CF6;
  --color-icon-orange: #F97316;
  --color-icon-amber:  #F59E0B;
  --color-icon-pink:   #EC4899;
  --color-icon-teal:   #14B8A6;

  /* Card tokens */
  --card-padding:    20px;
  --card-padding-lg: 24px;
  --card-shadow:     0 1px 3px rgba(0, 0, 0, 0.06);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
  background: #FFFFFF;
  line-height: 1.5;
}

a {
  color: var(--color-primary-end);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ===== TYPOGRAFIA DISPLAYOWA (Quicksand) =====
   Nagłówki, przyciski, nawigacja górna i tytuły kart/sekcji.
   Tabele, formularze i tekst główny zostają na --font-family. */
h1, h2, h3,
.btn,
.create-btn,
.page-title,
.card-title,
.modal-title,
.fl-drawer-title,
.login-title {
  font-family: var(--font-display);
}

/* ===== BUTTONS ===== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-body);
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
  text-decoration: none;
  line-height: 1;
}

.btn-primary {
  background: var(--color-primary-gradient);
  color: white;
  border: none;
}

.btn-primary:hover {
  opacity: 0.9;
  text-decoration: none;
  color: white;
}

.btn-secondary {
  background: white;
  color: var(--color-primary-end);
  border: 1px solid var(--color-primary-end);
}

.btn-secondary:hover {
  background: var(--color-bg-secondary);
  text-decoration: none;
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.btn-ghost:hover {
  background: var(--color-bg-tertiary);
  text-decoration: none;
}

.btn-danger {
  background: linear-gradient(135deg, var(--color-error) 0%, var(--color-error-dark) 100%);
  color: white;
  border: none;
}

.btn-danger:hover {
  opacity: 0.9;
  text-decoration: none;
  color: white;
}

.btn-sm {
  padding: 5px 10px;
  font-size: var(--font-size-small);
}

.btn-ghost-danger {
  color: var(--color-error-dark);
  border-color: var(--color-error-border);
}
.btn-ghost-danger:hover { background: var(--color-error-bg); border-color: var(--color-error); }

.btn-ghost-success {
  color: var(--color-success-alt);
  border-color: #A7F3D0;
}
.btn-ghost-success:hover { background: var(--color-success-bg); border-color: var(--color-success-alt); }

.btn-icon {
  padding: 6px 8px;
}

/* ===== CARDS ===== */

.card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.card-title {
  font-size: var(--font-size-medium);
  font-weight: 600;
  color: var(--color-text-primary);
}

/* ===== BADGES ===== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--border-radius-lg);
  font-size: var(--font-size-small);
  font-weight: 500;
}

.badge-success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.badge-error {
  background: var(--color-error-bg);
  color: var(--color-error-text);
}

.badge-warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.badge-info {
  background: var(--color-info-bg);
  color: var(--color-info-text);
}

.badge-neutral {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

/* ===== SIDEBAR (narrow icon strip — make.com style) ===== */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: #FFFFFF;
  border-right: 1px solid var(--color-border);
  box-shadow: 2px 0 8px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: var(--z-sidebar);
  overflow: visible;
  padding: 24px 0;
  transition: width 0.25s ease;
}

.sidebar.sidebar-expanded {
  width: 220px;
  align-items: flex-start;
}

.hamburger-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  border-radius: 8px;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  transition: all 0.2s;
  flex-shrink: 0;
}

.hamburger-btn:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

.sidebar.sidebar-expanded .hamburger-btn {
  width: 100%;
  justify-content: flex-start;
  padding-left: 16px;
  border-radius: 0;
}

/* Logo area — hidden (logo moved to app-header) */
.sidebar-logo { display: none; }
.sidebar-logo-img { display: none; }
.sidebar-logo-text { display: none; }
.sidebar-clinic-name { display: none; }
.sidebar-separator { display: none; }

/* Nav */
.sidebar-nav {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0;
  gap: 2px;
}

.sidebar-nav-label { display: none; }

/* Nav item */
.sidebar-item {
  position: relative;
  width: 48px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 12px;
  border-radius: 8px;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  cursor: pointer;
  height: 48px;
}

.sidebar-item:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  text-decoration: none;
}

.sidebar-item.active {
  background: var(--color-primary-gradient);
  color: white;
}

/* The SVG icon wrapper */
.sidebar-item-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Nav text label — hidden by default, shown in expanded sidebar */
.sidebar-item-label {
  display: none;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

/* Expanded sidebar nav-item styles */
.sidebar.sidebar-expanded .sidebar-nav {
  align-items: flex-start;
}

.sidebar.sidebar-expanded .sidebar-item {
  width: 100%;
  justify-content: flex-start;
  padding-left: 16px;
  gap: 12px;
  border-radius: 0;
}

.sidebar.sidebar-expanded .sidebar-item-label {
  display: inline;
}

/* Notification dot on sidebar item */
.sidebar-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  background: var(--color-error);
  color: white;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  border: 1.5px solid #FFFFFF;
}
.sidebar-badge-orange { background: #F97316; }

/* Footer */
.sidebar-footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0 12px;
  border-top: 1px solid var(--color-border);
  gap: 8px;
}

.sidebar-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.sidebar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg,var(--color-primary-start),var(--color-primary-end));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  cursor: default;
}

.sidebar-user-info  { display: none; }
.sidebar-user-name  { display: none; }
.sidebar-user-role  { display: none; }

/* ===== SIDEBAR TOOLTIPS ===== */
/* Show tooltip to the right when sidebar is collapsed */

.sidebar-item[data-tooltip],
.sidebar-logout[data-tooltip] {
  position: relative;
}

.sidebar-item[data-tooltip]::after,
.sidebar-logout[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: var(--color-text-primary);
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: var(--z-tooltip);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  line-height: 1.3;
}

/* Arrow pointing left */
.sidebar-item[data-tooltip]::before,
.sidebar-logout[data-tooltip]::before {
  content: '';
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  border: 5px solid transparent;
  border-right-color: var(--color-text-primary);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: var(--z-tooltip);
}

.sidebar-item[data-tooltip]:hover::after,
.sidebar-item[data-tooltip]:hover::before,
.sidebar-logout[data-tooltip]:hover::after,
.sidebar-logout[data-tooltip]:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Hide tooltips when sidebar is expanded (labels already visible) */
.sidebar.sidebar-expanded .sidebar-item[data-tooltip]::after,
.sidebar.sidebar-expanded .sidebar-item[data-tooltip]::before,
.sidebar.sidebar-expanded .sidebar-logout[data-tooltip]::after,
.sidebar.sidebar-expanded .sidebar-logout[data-tooltip]::before {
  display: none;
}

/* Logout icon button */
.sidebar-logout {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--color-text-tertiary);
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  text-decoration: none;
}
.sidebar-logout:hover {
  background: var(--color-error-bg);
  color: var(--color-error);
  text-decoration: none;
}

/* ===== MAIN CONTENT ===== */

.main-content {
  margin-left: var(--sidebar-width);
  padding: 24px 32px 32px;
  min-height: 100vh;
  background: #FFFFFF;
  transition: margin-left 0.25s ease;
}

.main-content.sidebar-expanded-offset {
  margin-left: 220px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.page-title {
  font-size: var(--font-size-h2);
  font-weight: 700;
  color: var(--color-text-primary);
}

.page-subtitle {
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
  margin-top: 4px;
}

/* ===== APP HEADER ===== */

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.header-logo:hover {
  text-decoration: none;
}

/* Poziomy lockup (znak + napis w krzywych) — napis jest częścią SVG */
.header-logo-img {
  height: 36px;
  width: auto;
  object-fit: contain;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.notification-bell {
  position: relative;
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: color 0.2s;
  padding: 0;
}

.notification-bell:hover {
  color: var(--color-text-primary);
}

/* F-33 — Animacja dzwonka odpala się 3× po pojawieniu się nowych
   powiadomień, potem milknie (zamiast infinite). JS może wymusić
   reset przez toggle klasy. */
.notification-bell.has-notifications {
  animation: bell-ring 3s ease-in-out 1s 3;
  transform-origin: top center;
}

@keyframes bell-ring {
  0%,  55%, 100% { transform: rotate(0deg); }
  5%             { transform: rotate(18deg); }
  10%            { transform: rotate(-16deg); }
  15%            { transform: rotate(13deg); }
  20%            { transform: rotate(-10deg); }
  25%            { transform: rotate(6deg); }
  30%            { transform: rotate(-3deg); }
  35%            { transform: rotate(0deg); }
}

/* ===== CREATE BUTTON (pill) + DROPDOWN ===== */

.create-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-display);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  line-height: 1.4;
}

.create-btn:hover {
  border-color: var(--color-primary-start);
  color: var(--color-primary-end);
  background: #F5FAFF;
  box-shadow: 0 1px 3px rgba(38, 81, 232, 0.08);
}

.create-btn svg {
  flex-shrink: 0;
  stroke: currentColor;
}

.create-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--color-bg-primary);
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  min-width: 200px;
  padding: 6px;
  z-index: var(--z-header);
  animation: dropdownIn 0.2s ease-out;
}

.create-dropdown.show { display: block; }

.create-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--color-text-primary);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s;
}

.create-dropdown-item:hover {
  background: var(--color-bg-secondary);
  color: var(--color-primary-end);
  text-decoration: none;
}

.create-dropdown-item svg {
  flex-shrink: 0;
  color: var(--color-text-secondary);
}

.create-dropdown-item:hover svg {
  color: var(--color-primary-end);
}

.notification-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--color-error);
  color: white;
  border-radius: 10px;
  min-width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid var(--color-bg-primary);
  padding: 0 3px;
}

.notification-dropdown {
  border: 1.5px solid var(--color-border);
}

.company-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.user-avatar-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary-gradient);
  color: white;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-border);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
  position: relative;
  flex-shrink: 0;
  user-select: none;
}

.user-avatar-btn:hover {
  border-color: var(--color-primary-start);
  transform: scale(1.05);
}

.user-dropdown {
  position: absolute;
  top: 52px;
  right: 0;
  background: var(--color-bg-primary);
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  width: 210px;
  z-index: var(--z-header);
  display: none;
  animation: dropdownIn 0.2s ease-out;
}

.user-dropdown.show {
  display: block;
}

@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.user-dropdown-header {
  padding: 16px;
  border-bottom: 1px solid var(--color-border);
}

.user-dropdown-name {
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.user-dropdown-role {
  color: var(--color-text-secondary);
  font-size: 13px;
}

.user-dropdown-company {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 500;
}

.user-dropdown-company svg {
  flex-shrink: 0;
  color: var(--color-text-secondary);
}

.user-dropdown-company span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-dropdown-menu {
  padding: 8px;
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.user-dropdown-item:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  text-decoration: none;
}

.user-dropdown-item.danger {
  color: var(--color-error);
}

.user-dropdown-item.danger:hover {
  background: var(--color-error-bg);
  color: var(--color-error);
  text-decoration: none;
}

/* ===== NOTIFICATION DROPDOWN ===== */

.notif-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: -8px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  width: 340px;
  max-height: 420px;
  overflow: hidden;
  z-index: var(--z-header);
  flex-direction: column;
  animation: dropdownIn 0.2s ease-out;
}

.notif-dropdown.show {
  display: flex;
}

.notif-dropdown-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.notif-dropdown-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-primary);
}

.notif-dropdown-body {
  overflow-y: auto;
  flex: 1;
}

.notif-empty {
  padding: 24px 18px;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 14px;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s;
  text-decoration: none;
  color: inherit;
}

.notif-item:last-child {
  border-bottom: none;
}

.notif-item:hover {
  background: var(--color-bg-secondary);
  text-decoration: none;
}

.notif-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notif-item-icon.warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-dark);
}

.notif-item-icon.error {
  background: var(--color-error-bg);
  color: var(--color-error-dark);
}

.notif-item-icon.info {
  background: var(--color-info-bg);
  color: var(--color-info-text);
}

.notif-item-icon.success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.notif-item-content {
  flex: 1;
  min-width: 0;
}

.notif-item-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.notif-item-msg {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* ===== STATS CARDS ===== */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--color-bg-primary);
  border: 1.5px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.stat-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.stat-card-label {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  font-weight: 500;
}

.stat-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--color-primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.stat-card-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.stat-card-period {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 4px;
}

.stat-card-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 14px 0 10px;
}

.stat-card-secondary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.stat-card-secondary-label {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.stat-card-secondary-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* ===== TABLES ===== */

.table-container {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  background: var(--color-bg-secondary);
  padding: 10px 16px;
  text-align: left;
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--color-border);
}

td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
}

tr:last-child td {
  border-bottom: none;
}

tr:hover td {
  background: var(--color-bg-secondary);
}

/* ===== FORMS ===== */

.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

.form-control {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-body);
  font-family: var(--font-family);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  transition: border-color 0.15s ease;
  outline: none;
}

.form-control:focus {
  border-color: var(--color-primary-end);
  box-shadow: 0 0 0 3px rgba(38, 81, 232, 0.1);
}

.form-hint {
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin-top: 4px;
}

select.form-control {
  cursor: pointer;
}

textarea.form-control {
  resize: vertical;
  min-height: 80px;
}

/* ===== FLASH MESSAGES ===== */

.flash-messages {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
}

.flash {
  padding: 12px 16px;
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-body);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: slideIn 0.2s ease;
}

.flash-success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-left: 3px solid var(--color-success);
}

.flash-error {
  background: var(--color-error-bg);
  color: var(--color-error-text);
  border-left: 3px solid var(--color-error);
}

.flash-warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border-left: 3px solid var(--color-warning);
}

.flash-info, .flash-message {
  background: var(--color-info-bg);
  color: var(--color-info-text);
  border-left: 3px solid var(--color-info);
}

.flash-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
}

@keyframes slideIn {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ===== AVATAR ===== */

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary-gradient);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.avatar-sm {
  width: 26px;
  height: 26px;
  font-size: 11px;
}

/* ===== TABS ===== */

.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 20px;
}

.tab-item {
  padding: 10px 20px;
  font-size: var(--font-size-body);
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
  text-decoration: none;
  margin-bottom: -1px;
}

.tab-item:hover {
  color: var(--color-text-primary);
  text-decoration: none;
}

.tab-item.active {
  color: var(--color-primary-end);
  border-bottom-color: var(--color-primary-end);
}

/* ===== TIMELINE ===== */

.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.1s ease;
}

.timeline-item:last-child {
  border-bottom: none;
}

.timeline-item:hover {
  background: var(--color-bg-secondary);
}

.timeline-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.timeline-content {
  flex: 1;
  min-width: 0;
}

.timeline-title {
  font-weight: 500;
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-meta {
  font-size: var(--font-size-small);
  color: var(--color-text-tertiary);
  margin-top: 2px;
}

.timeline-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.timeline-card {
  border: 1.5px solid var(--color-border);
}

/* ===== GRID LAYOUTS ===== */

.two-column {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  align-items: start;
}

.three-column {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

/* ===== EMPTY STATE ===== */

.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--color-text-secondary);
}

.empty-state-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.empty-state-title {
  font-size: var(--font-size-medium);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.empty-state-text {
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
  max-width: 360px;
  margin: 0 auto;
}

/* ===== MODAL ===== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: var(--z-modal-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

.modal {
  background: var(--color-bg-primary);
  border-radius: var(--border-radius);
  padding: 28px;
  max-width: 520px;
  width: 100%;
  margin: 20px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.modal-title {
  font-size: var(--font-size-h3);
  font-weight: 700;
}

.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: var(--color-text-secondary);
  line-height: 1;
}

/* ===== TOGGLE SWITCH ===== */

.toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--color-border);
  border-radius: 22px;
  transition: 0.2s;
}

.toggle-slider:before {
  position: absolute;
  content: '';
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.2s;
}

.toggle input:checked + .toggle-slider {
  background: var(--color-success);
}

.toggle input:checked + .toggle-slider:before {
  transform: translateX(18px);
}

/* ===== SEARCH BAR ===== */

.search-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}

.search-input {
  flex: 1;
  max-width: 320px;
}

/* ===== PAGINATION ===== */

.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 16px;
  justify-content: center;
}

.page-link {
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: all 0.12s ease;
}

.page-link:hover {
  background: var(--color-bg-secondary);
  text-decoration: none;
}

.page-link.active {
  background: var(--color-primary-gradient);
  color: white;
  border-color: transparent;
}

/* ===== LOGIN PAGE ===== */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-bg-tertiary) 0%, var(--color-bg-secondary) 100%);
}

.login-card {
  background: var(--color-bg-primary);
  border-radius: var(--border-radius-lg);
  padding: 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.login-logo {
  text-align: center;
  margin-bottom: 28px;
}

/* Pionowy lockup (znak nad napisem w krzywych) */
.login-logo-img {
  height: 108px;
  width: auto;
  object-fit: contain;
  margin-bottom: 8px;
}

.login-subtitle {
  font-size: var(--font-size-small);
  color: var(--color-text-tertiary);
  margin-top: 4px;
}

.login-title {
  font-size: var(--font-size-h3);
  font-weight: 700;
  text-align: center;
  margin-bottom: 24px;
}

/* ===== RULE BUILDER ===== */

.step-builder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  min-height: 300px;
}

.step-type-card {
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.step-type-card:hover {
  border-color: var(--color-primary-end);
  background: var(--color-bg-secondary);
}

.step-type-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.step-card {
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  background: var(--color-bg-secondary);
  margin-bottom: 8px;
  position: relative;
}

.step-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* ===== WIZARD STEPS ===== */

.wizard-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 28px;
}

.wizard-step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.wizard-step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-small);
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid var(--color-border);
  color: var(--color-text-tertiary);
  background: white;
}

.wizard-step.active .wizard-step-number {
  background: var(--color-primary-gradient);
  color: white;
  border-color: transparent;
}

.wizard-step.completed .wizard-step-number {
  background: var(--color-success);
  color: white;
  border-color: transparent;
}

.wizard-step-label {
  font-size: var(--font-size-small);
  font-weight: 500;
  color: var(--color-text-secondary);
}

.wizard-step.active .wizard-step-label {
  color: var(--color-primary-end);
  font-weight: 600;
}

.wizard-connector {
  flex: 1;
  height: 1px;
  background: var(--color-border);
  max-width: 40px;
}

/* ===== UTILITIES ===== */

.text-muted    { color: var(--color-text-secondary); }
.text-success  { color: var(--color-success-alt); }
.text-error    { color: var(--color-error-dark); }
.text-warning  { color: var(--color-warning-dark); }
.text-primary  { color: var(--color-primary-end); }
.border-error  { border-color: var(--color-error-border); }
.legend-purple { background: #6366F1; }
.legend-green  { background: var(--color-success); }
.text-small { font-size: var(--font-size-small); }
.text-center { text-align: center; }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mb-4 { margin-bottom: 4px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.w-full { width: 100%; }

/* ===== BADGE GRAY ===== */
.badge-gray {
  background: #F3F4F6;
  color: #374151;
}


/* ===== STAT CARD DELTA ===== */
.stat-card-delta {
  font-size: 12px;
  font-weight: 500;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.stat-card-delta.positive { color: var(--color-success-alt); }
.stat-card-delta.negative { color: var(--color-error-dark); }
.stat-card-delta.neutral  { color: var(--color-text-tertiary); }

/* ===== HAMBURGER BUTTON ===== */
.hamburger {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: var(--z-header);
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ===== SIDEBAR OVERLAY (MOBILE) ===== */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: calc(var(--z-sidebar) - 1);
}
.sidebar-overlay.visible { display: block; }


/* ===== FLASH FIX (inside main content, not fixed) ===== */
.flash {
  margin-bottom: 12px;
  position: relative;
  top: auto;
  right: auto;
}

/* ===== FORM ERROR STATE ===== */
.form-control.error {
  border-color: var(--color-error);
}
.form-control.error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.form-error {
  font-size: 12px;
  color: var(--color-error);
  margin-top: 4px;
}

/* ===== CARD HOVER (clickable) ===== */
.card-clickable {
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}
.card-clickable:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* ===== DRAG HANDLE ===== */
.drag-handle {
  cursor: grab;
  color: var(--color-text-tertiary);
  font-size: 16px;
  flex-shrink: 0;
  padding: 2px 4px;
  user-select: none;
}
.drag-handle:active { cursor: grabbing; }
.sortable-ghost { opacity: 0.4; background: var(--color-bg-tertiary); }

/* ===== INTEGRATIONS ROW LAYOUT ===== */

.integrations-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
  gap: 12px;
}

.integrations-search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  padding: 7px 12px;
  background: var(--color-bg-primary);
  width: 240px;
  transition: border-color 0.2s;
}

.integrations-search:focus-within {
  border-color: #2563EB;
}

.integrations-search input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--color-text-primary);
  width: 100%;
}

.integrations-search input::placeholder {
  color: var(--color-text-secondary);
}

.integrations-list {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.integration-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 16px 20px;
  gap: 16px;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s;
}

.integration-row:last-child {
  border-bottom: none;
}

.integration-row:hover {
  background: var(--color-bg-secondary);
}

.integration-icon-wrap {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}

.integration-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 1px solid var(--color-border);
}

.integration-chain-badge {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 18px;
  height: 18px;
  background: var(--color-bg-primary);
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.integration-info {
  flex: 1;
  min-width: 0;
}

.integration-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.integration-description {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.integration-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.integration-stat-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.int-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.int-stat svg {
  opacity: 0.6;
}

.int-date {
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.status-badge.connected {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.status-badge.unconfigured {
  background: #F3F4F6;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.status-badge.error {
  background: var(--color-error-bg);
  color: var(--color-error-text);
}

.status-badge.configured {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.btn-reauthorize {
  padding: 6px 13px;
  border-radius: 6px;
  border: 1.5px solid #2563EB;
  background: var(--color-bg-primary);
  color: #2563EB;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-reauthorize:hover {
  background: #EFF6FF;
}

.btn-verify {
  padding: 6px 13px;
  border: 1.5px solid var(--color-border);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.btn-verify:hover {
  background: var(--color-bg-secondary);
  border-color: #aaa;
}

.btn-verify:disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

.btn-sync {
  padding: 6px 13px;
  border: 1.5px solid var(--color-border);
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.btn-sync:hover {
  background: var(--color-bg-secondary);
}

.btn-sync:disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

.btn-more {
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 18px;
  justify-content: center;
  flex-shrink: 0;
}

.btn-more:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

/* ===== DASHBOARD V2 – STAT CARDS ===== */

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.stat-title {
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 500;
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}
.stat-icon.blue   { background: var(--color-icon-blue); }
.stat-icon.purple { background: var(--color-icon-purple); }
.stat-icon.orange { background: var(--color-icon-orange); }
.stat-icon.green  { background: var(--color-success); }
.stat-icon.red    { background: var(--color-error); }
.stat-icon.amber  { background: var(--color-icon-amber); }

.stat-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 28px;
  margin-bottom: 12px;
}

.spark-bar {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: #E5E9F0;
  min-height: 3px;
  transition: background 0.2s;
}
.spark-bar.active  { background: var(--color-primary-start); opacity: 0.5; }
.spark-bar.current { background: var(--color-primary-end);   opacity: 1; }
.stat-card:hover .spark-bar.active  { opacity: 0.7; }
.stat-card:hover .spark-bar.current { opacity: 1; }

.stat-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
  line-height: 1;
}

.stat-change {
  font-size: 14px;
  font-weight: 500;
}
.stat-change.positive { color: var(--color-success); }
.stat-change.negative { color: var(--color-error); }
.stat-change.neutral  { color: var(--color-text-secondary); }

/* ===== DASHBOARD V2 – THREE-COL SECTION ===== */

/* Siatka 3 kolumn */
.timeline-section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  align-items: start;
}

/* Karta osi czasu */
.timeline-card {
  background: var(--color-bg-primary);
  border: 1.5px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
}

/* Nadpisanie card-header wewnątrz kart dashboard */
.timeline-card .card-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: flex-start;
  margin-bottom: 0;
}

.timeline-card .card-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Nagłówek z filtrem czasu pod tytułem */
.card-header-stacked {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.card-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Badge z liczbą pozycji */
.card-count {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  padding: 2px 8px;
  border-radius: var(--border-radius-lg);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.view-all-link {
  color: var(--color-primary-start);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.view-all-link:hover { text-decoration: underline; }

/* Pill-selector filtra czasu */
.time-filters {
  display: flex;
  gap: 2px;
  background: var(--color-bg-secondary);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  align-self: flex-start;
}

.time-filter {
  padding: 5px 13px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
  font-family: var(--font-family);
  line-height: 1.5;
  text-decoration: none;
  display: inline-block;
}
.time-filter:hover { color: var(--color-text-primary); text-decoration: none; }
.time-filter.active {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
}

/* Zakładki typów zdarzeń */
.event-tabs {
  display: flex;
  padding: 0 24px;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.event-tabs::-webkit-scrollbar { display: none; }

.event-tab {
  padding: 16px 20px;
  border-bottom: 2px solid transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  transition: all 0.2s;
  text-decoration: none;
}
.event-tab:hover { color: var(--color-text-primary); text-decoration: none; }
.event-tab.active {
  color: var(--color-primary-start);
  border-bottom-color: var(--color-primary-start);
}

/* Elementy listy zdarzeń */
.event-item {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-border);
  gap: 0;
  transition: background 0.2s;
}
.event-item:last-child { border-bottom: none; }
.event-item:hover { background: var(--color-bg-secondary); }

.event-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 13px;
  margin-right: 16px;
  flex-shrink: 0;
}
/* F-21 — usunięto 8 par gradientów per-pierwsza-litera (paleta poza design
   systemem, brak fallbacku dla 18 liter alfabetu). Wszystkie avatary używają
   primary gradient zdefiniowanego na .event-avatar wyżej. */

.event-content { flex: 1; min-width: 0; }
.event-name {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 14px;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event-details { color: var(--color-text-secondary); font-size: 14px; }

.event-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.event-type-badge svg {
  width: 12px; height: 12px;
  stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0;
}

.event-status {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.event-status.scheduled { background: #E0E7FF; color: #3730A3; }
.event-status.sent      { background: var(--color-success-bg); color: var(--color-success-text); }
.event-status.pending   { background: var(--color-warning-bg); color: var(--color-warning-text); }
.event-status.failed    { background: var(--color-error-bg); color: var(--color-error-text); }
.event-status.delivered { background: var(--color-success-bg); color: var(--color-success-text); }
.event-status.other     { background: #F3F4F6; color: #374151; }

.event-time {
  color: var(--color-text-secondary);
  font-size: 13px;
  margin-left: 16px;
  flex-shrink: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Elementy zaplanowanych wiadomości i zadań */
.scheduled-item {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-border);
}
.scheduled-item:last-child { border-bottom: none; }

.scheduled-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--color-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.scheduled-icon.task { background: var(--color-success-bg); color: var(--color-success-dark); }

.scheduled-content { flex: 1; min-width: 0; }
.scheduled-title {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 14px;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scheduled-time {
  color: var(--color-text-secondary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}


/* Blok nieudanych wiadomości (admin) */
.failed-inline-card {
  border: 1.5px solid #FECACA;
  border-radius: var(--border-radius);
  overflow: hidden;
  margin: 16px 24px 0;
}
.failed-inline-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-error-border);
  background: var(--color-error-bg);
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-error-dark);
  font-weight: 600;
  font-size: 14px;
}
.failed-inline-card .scheduled-item {
  padding: 12px 16px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .hamburger { display: flex; }

  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: var(--z-sidebar);
  }
  /* Na mobile sidebar po otwarciu od razu pokazuje pełne etykiety obok ikon */
  .sidebar.sidebar-open {
    transform: translateX(0);
    width: 260px;
    align-items: flex-start;
  }
  .sidebar.sidebar-open .sidebar-nav { align-items: flex-start; }
  .sidebar.sidebar-open .sidebar-item {
    width: 100%;
    justify-content: flex-start;
    padding-left: 16px;
    gap: 12px;
    border-radius: 0;
  }
  .sidebar.sidebar-open .sidebar-item-label { display: inline; }
  .sidebar.sidebar-open .hamburger-btn {
    width: 100%;
    justify-content: flex-start;
    padding-left: 16px;
    border-radius: 0;
  }
  .sidebar.sidebar-open .sidebar-user-info,
  .sidebar.sidebar-open .sidebar-user-name,
  .sidebar.sidebar-open .sidebar-user-role { display: block; }

  .main-content {
    margin-left: 0;
    padding: 72px 16px 24px;
  }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .two-column { grid-template-columns: 1fr; }
  .three-column { grid-template-columns: 1fr; }
  .step-builder { grid-template-columns: 1fr; }

  .table-container { overflow-x: auto; }
  .table { min-width: 600px; }

  .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* =====================================================================
   PLATFORM UI UNIFICATION  (F-07 — bez !important po unifikacji inline CSS)
   Dashboard jest źródłem prawdy dla designu. Poniższe reguły zapewniają
   spójny wygląd .kpi-*, .panel, .filter-chip, .range-* w sekcjach
   Raporty/Zadania. Po uporządkowaniu inline CSS w reports.html
   (PR F-07) blok ten nie wymaga już !important.
   ===================================================================== */

/* (Zadania) — sekcja używa już bezpośrednio .stat-card; klikalność i stan
   .active są dostarczane lokalnie przez .tasks-page w zadania.html. */

/* KPI w Raportach — fallback spójny ze .stat-card (właściwe wartości
   zdefiniowane lokalnie w reports.html, te tu jako bezpiecznik). */
.kpi-card {
  background: var(--color-bg-primary);
  border: 1.5px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.kpi-grid { gap: 16px; margin-bottom: 24px; }
.kpi-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
}
.kpi-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.kpi-sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-top: 8px;
}

/* Panele w Raportach — wyrównaj do .timeline-card */
.panel {
  border-radius: var(--border-radius);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border: 1.5px solid var(--color-border);
}
.panel-title {
  padding: 0 0 12px 0;
  font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}

/* Filtr-pigułki: .filter-chip (Zadania), .range-btn (Raporty)
   — wygląd jak .time-filter na Dashboardzie */
.filter-chip {
  border: none;
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  border-radius: var(--border-radius-sm);
  padding: 6px 14px;
  font-weight: 500;
  transition: all 0.15s;
}
.filter-chip:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}
.filter-chip.active {
  background: var(--color-primary-gradient);
  color: #fff;
  font-weight: 600;
}

.range-group {
  border-radius: var(--border-radius);
  background: var(--color-bg-secondary);
  padding: 3px;
  gap: 2px;
}
.range-btn {
  border-radius: var(--border-radius-sm);
  font-weight: 500;
  padding: 5px 13px;
  font-size: 13px;
  transition: all 0.15s;
}
.range-btn + .range-btn { border-left: none; }
.range-btn.active {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
}
.range-btn:hover:not(.active):not(:disabled) {
  background: transparent !important;
  color: var(--color-text-primary) !important;
}

/* Tab bar w Raportach — wyrównaj do estetyki dashboardu */
.tab-bar { border-bottom: 1px solid var(--color-border) !important; }
.tab-btn {
  color: var(--color-text-secondary);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}
.tab-btn.active {
  color: var(--color-primary-end) !important;
  border-bottom-color: var(--color-primary-end) !important;
  font-weight: 600 !important;
}

/* Przyciski akcji — wyrównaj do .btn-primary / .btn-secondary */
.btn-export {
  background: var(--color-primary-gradient) !important;
  border-radius: var(--border-radius-sm) !important;
  padding: 7px 14px !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(38,81,232,0.18);
}
.btn-export:hover { filter: brightness(1.05); }
.btn-export.sm { padding: 5px 11px !important; font-size: 12px !important; }


/* Reports breadcrumbs i nagłówek — w stylu .page-header */
.reports-page { padding: 32px !important; }
.reports-head { margin-bottom: 24px !important; }
.reports-title { font-size: var(--font-size-h2) !important; font-weight: 700 !important; }
.reports-sub { font-size: var(--font-size-body) !important; color: var(--color-text-secondary) !important; margin-top: 4px !important; }
.crumbs { margin-bottom: 12px; font-size: 12px; }

/* Zadania: nagłówek strony – większe, spójne marginesy */
.tasks-top { padding: 32px 32px 0 !important; }
.tasks-top .page-title { font-size: var(--font-size-h2); margin-bottom: 4px; }
.tasks-filters { padding: 14px 32px !important; }

/* Integration row – spójna karta z dashboardowymi kartami */
.integrations-list { 
  background: var(--color-bg-primary);
  border: 1.5px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.integration-row { padding: 18px 22px; }
.integration-icon-circle {
  border-radius: 10px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}

/* Empty-state ikony – delikatniejsze i spójne */
.empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--color-bg-secondary);
  color: var(--color-text-tertiary);
  margin: 0 auto 12px;
  font-size: 28px;
}
.empty-state-icon svg { width: 28px; height: 28px; stroke-width: 1.75; }

/* Inline ikony tekstowe (np. lista pacjentów: SMS/Email/MyDr) */
.cell-icon-text {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--color-text-secondary);
}
.cell-icon-text svg { width: 14px; height: 14px; opacity: 0.75; flex-shrink: 0; }

/* "więcej" – zaokrąglony przycisk z kropkami */
.btn-more { font-size: 16px; line-height: 1; }

/* ── Integracje – Mobile ── */
@media (max-width: 768px) {
  .integrations-topbar { margin-bottom: 10px; padding: 0 16px; }
  .integrations-search { width: 100%; }

  .integrations-list { margin: 0 12px; border-radius: 10px; }

  .integration-row {
    padding: 14px 14px !important;
    gap: 10px;
    align-items: flex-start;
  }
  .integration-icon-wrap { width: 36px; height: 36px; }
  .integration-icon-circle { width: 36px; height: 36px; }
  .integration-icon-circle svg { width: 18px; height: 18px; }
  .integration-chain-badge { width: 14px; height: 14px; bottom: -2px; right: -2px; }
  .integration-chain-badge svg { width: 8px; height: 8px; }

  .integration-info { flex: 1 1 calc(100% - 50px); min-width: 0; }
  .integration-name { font-size: 14px; }
  .integration-description {
    font-size: 12px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.35;
  }

  .integration-controls {
    flex-basis: 100%;
    gap: 8px;
    justify-content: flex-start;
    margin-top: 4px;
  }
  .integration-stat-group { gap: 10px; }
  .int-stat { font-size: 12px; }
  .int-date { display: none; }

  .status-badge { font-size: 11px; padding: 3px 8px; }

  .btn-reauthorize, .btn-verify, .btn-sync {
    padding: 7px 12px !important;
    font-size: 12px !important;
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
  }
  .btn-more { width: 32px; height: 32px; flex-shrink: 0; }
}

/* ═════════════ SHARED SIDE DRAWER (fl-drawer) ═════════════ */
.fl-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(2px);
  z-index: var(--z-drawer-overlay);
  opacity: 0;
  transition: opacity .2s ease;
}
.fl-overlay.open { opacity: 1; }
.fl-overlay[hidden] { display: none; }

.fl-drawer {
  position: fixed; top: 0; right: 0;
  height: 100vh; width: 460px; max-width: 100vw;
  background: var(--color-bg-primary);
  display: flex; flex-direction: column;
  box-shadow: -10px 0 30px rgba(0,0,0,.10);
  transform: translateX(100%);
  transition: transform .2s ease;
  z-index: var(--z-drawer);
}
.fl-drawer.open { transform: translateX(0); }
.fl-drawer[hidden] { display: none; }

.fl-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  gap: 12px;
}
.fl-drawer-title {
  font-size: 15px; font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  min-width: 0;
  flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fl-drawer-close {
  background: transparent; border: none;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--border-radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  flex-shrink: 0;
}
.fl-drawer-close:hover {
  background: #F3F4F6;
  color: var(--color-text-primary);
}

.fl-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  font-size: 13px;
  color: var(--color-text-primary);
}

.fl-drawer-footer {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 14px 20px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-primary);
  flex-shrink: 0;
}
.fl-drawer-footer[hidden] { display: none; }

.fl-drawer-loading {
  display: flex; align-items: center; justify-content: center;
  padding: 60px 20px;
}
.fl-drawer-loading .fl-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary-end);
  border-radius: 50%;
  animation: fl-drawer-spin .7s linear infinite;
}
@keyframes fl-drawer-spin { to { transform: rotate(360deg); } }

/* =====================================================================
   PEEK-DRAWER PACJENTA (patient-peek.js)
   Style są globalne, bo peek otwiera się z siedmiu ekranów — trzymanie ich
   w bloku {% block extra_css %} listy pacjentów dawałoby nieostylowany panel
   wszędzie indziej. Zob. docs/NAWIGACJA.md.
   ===================================================================== */

.peek-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: -4px 0 14px;
  font-size: 12px; color: var(--color-text-secondary);
}
.peek-meta-sep { color: var(--color-text-tertiary); }
.peek-badge-mydr {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--border-radius-pill);
  background: var(--color-info-bg); color: var(--color-info-text);
}

.peek-block { display: flex; flex-direction: column; }
.peek-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--color-border); gap: 10px;
}
.peek-row:last-child { border-bottom: none; }
.peek-key {
  font-size: 11px; color: var(--color-text-secondary); font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; flex-shrink: 0;
}
.peek-val {
  font-size: 13px; font-weight: 500; color: var(--color-text-primary); text-align: right;
  /* Długi email nie ma gdzie się złamać — bez tego rozpycha wiersz na wąskim
     ekranie (sheet mobilny ma tylko szerokość viewportu). */
  min-width: 0; overflow-wrap: anywhere;
}
.peek-val a { color: var(--color-primary-end); text-decoration: none; }
.peek-val a:hover { text-decoration: underline; }
.peek-consents { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.peek-none { color: var(--color-text-tertiary); font-size: 12px; }

.peek-section-title {
  font-size: 11px; font-weight: 600; color: var(--color-text-secondary);
  text-transform: uppercase; letter-spacing: .04em; margin: 18px 0 8px;
}

.peek-items { display: flex; flex-direction: column; gap: 6px; }
.peek-item {
  display: block; padding: 8px 10px;
  background: var(--color-bg-secondary); border: 1px solid var(--color-border);
  border-radius: var(--border-radius); text-decoration: none;
}
.peek-item-head { display: flex; align-items: center; gap: 8px; }
.peek-item-icon { flex-shrink: 0; color: var(--color-text-secondary); }
.peek-item-label {
  font-weight: 600; font-size: 12.5px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.peek-item-when {
  margin-left: auto; font-size: 11px; color: var(--color-text-secondary); white-space: nowrap;
}
.peek-item-excerpt {
  margin-top: 4px; font-size: 12px; color: var(--color-text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Klikalne są WYŁĄCZNIE pozycje mające własny widok szczegółu (zdarzenia).
   Interakcje są tekstem i celowo nie udają linku — bez kursora, bez hovera.
   Zob. docs/NAWIGACJA.md. */
.peek-item-link { cursor: pointer; }
.peek-item-link .peek-item-label { color: var(--color-primary-end); }
.peek-item-link:hover { border-color: var(--color-primary-end); }
.peek-item-arrow {
  margin-left: 6px; color: var(--color-primary-end); opacity: 0;
  transition: opacity .12s; font-size: 12px;
}
.peek-item-link:hover .peek-item-arrow { opacity: 1; }
div.peek-item { cursor: default; }
div.peek-item .peek-item-label { color: var(--color-text-primary); }

.peek-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.peek-tag-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  background: var(--color-bg-primary); border: 1px solid var(--color-border);
  border-radius: var(--border-radius-pill);
  font-size: 12px; color: var(--color-text-primary);
}
.peek-tag-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }

.peek-consent-badge {
  font-size: 11px; padding: 2px 8px; border-radius: var(--border-radius-xs); font-weight: 600;
}
.peek-consent-badge.on  { background: var(--color-success-bg); color: var(--color-success-text); }
/* Odmowa zgody w kolorze ostrzegawczym, nie neutralnym — kontrast tekstu
   na tle >= 4.5:1 (--color-error-text #991B1B na #FEE2E2). */
.peek-consent-badge.off { background: var(--color-error-bg); color: var(--color-error-text); }

.peek-error { padding: 40px 20px; text-align: center; }
.peek-error p { margin: 0 0 14px; font-size: 13px; color: var(--color-text-secondary); }

.peek-action-profile { margin-left: auto; text-decoration: none; }

/* Wiersz-otwieracz peeka (lista pacjentów i inne tabele) */
.patient-row { cursor: pointer; transition: background .12s, box-shadow .12s; }
.patient-row:hover { background: var(--color-bg-secondary); }
.patient-row.is-active {
  background: var(--color-info-bg);
  box-shadow: inset 3px 0 0 var(--color-primary-end);
}

/* Mobile: pełnoekranowy sheet wjeżdżający z dołu */
@media (max-width: 768px) {
  .fl-drawer {
    /* Rozpięcie na left+right zamiast width:100vw — 100vw bywa liczone razem
       z paskiem przewijania i sam bywa źródłem poziomego przepełnienia. */
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto; height: 92vh;
    border-top-left-radius: var(--border-radius-lg);
    border-top-right-radius: var(--border-radius-lg);
    transform: translateY(100%);
  }
  .fl-drawer.open { transform: translateY(0); }
}

/* =====================================================================
   F-05 — GLOBALNY FOCUS STATE (a11y / keyboard navigation)
   Używamy :focus-visible, by nie pokazywać outline przy kliknięciu myszą.
   ===================================================================== */

.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible,
.btn-danger:focus-visible,
.btn-ghost-danger:focus-visible,
.btn-ghost-success:focus-visible,
.btn-sm:focus-visible,
.btn-reauthorize:focus-visible,
.btn-verify:focus-visible,
.btn-sync:focus-visible,
.btn-more:focus-visible,
.sidebar-item:focus-visible,
.sidebar-logout:focus-visible,
.hamburger-btn:focus-visible,
.hamburger:focus-visible,
.tab-item:focus-visible,
.event-tab:focus-visible,
.time-filter:focus-visible,
.filter-chip:focus-visible,
.range-btn:focus-visible,
.create-btn:focus-visible,
.notification-bell:focus-visible,
.user-avatar-btn:focus-visible,
.page-link:focus-visible,
.modal-close:focus-visible,
.flash-close:focus-visible,
.fl-drawer-close:focus-visible,
.view-all-link:focus-visible,
.create-dropdown-item:focus-visible,
.user-dropdown-item:focus-visible,
.notif-item:focus-visible,
.step-type-card:focus-visible,
.card-clickable:focus-visible {
  outline: 2px solid var(--color-primary-end);
  outline-offset: 2px;
  border-radius: var(--border-radius-sm);
}

/* Toggle switch — focus na samym wrapperze nic nie daje, bo input jest opacity:0;
   wymuszamy obrys na sliderze. */
.toggle input:focus-visible + .toggle-slider {
  outline: 2px solid var(--color-primary-end);
  outline-offset: 2px;
}

/* Checkbox/radio — natywne, ale dorzucamy ring */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid var(--color-primary-end);
  outline-offset: 2px;
}

/* Linki tekstowe inline (np. „Edytuj"/„Kroki" w tabelach) — gdy nie mają klasy .btn */
table a:focus-visible,
.timeline-item a:focus-visible {
  outline: 2px solid var(--color-primary-end);
  outline-offset: 2px;
  border-radius: 2px;
}

/* =====================================================================
   F-12 — DASHBOARD TIMELINE breakpointy.
   Po review (2026-05-25): 1400px było za wysokie — Replit embed window
   i wiele laptopów 1366×768 wpadało w 2+1 layout w którym 3. kolumna
   (Zadania) leciała na dół full-width i była daleko od oka.
   Obniżono do 1200px — 3 kolumny widoczne na 1366px+ monitorach.
   Plus dodano pełny mobilny breakpoint 900px (1 kolumna).
   ===================================================================== */

@media (max-width: 1200px) {
  .timeline-section {
    grid-template-columns: 1fr 1fr;
  }
  .timeline-section > :nth-child(3) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .timeline-section {
    grid-template-columns: 1fr;
  }
  .timeline-section > :nth-child(3) {
    grid-column: auto;
  }
}

/* =====================================================================
   F-14 — MOBILNA LISTA PACJENTÓW (i inne stat-card + filter-chip).
   Naprawy: stat-icon nie chowa się przed tytułem, filter chips zwijają
   się w jeden rząd z poziomym przewijaniem, hamburger nie nakłada się
   na nagłówek karty.
   ===================================================================== */

@media (max-width: 768px) {
  /* Tytuł karty nie wchodzi pod ikonę */
  .stat-card .stat-title,
  .stat-card .stat-card-label {
    min-width: 0;
    padding-right: 8px;
  }
  .stat-card .stat-icon,
  .stat-card .stat-card-icon {
    flex-shrink: 0;
  }
  .stat-header {
    align-items: flex-start;
    gap: 8px;
  }

  /* Filter chips: jeden rząd z horizontal scroll zamiast łamania linii */
  .filter-chip,
  .time-filter,
  .range-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }
  /* Pacjenci — kontener chipów filtrów (klasa zależna od templatu) */
  .search-bar + form,
  .patient-filters,
  .filter-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    flex-wrap: nowrap !important;
  }

  /* Hamburger nie nakłada się na pierwszy element — odsuwamy z lewej krawędzi */
  .hamburger {
    top: 16px;
    left: 16px;
  }
  /* Daj treści place na hamburger */
  .main-content {
    padding-top: 72px;
  }
}