/* Granica frontend styles */
/* Source of truth: this file */

@layer reset, tokens, base, components, utilities, motion, print;


/* === Reset === */
/* Minimal reset with system fonts and box-sizing */

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

html {
 font-size: 16px;
 -webkit-text-size-adjust: 100%;
 -webkit-tap-highlight-color: transparent;
}

body {
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 line-height: 1.5;
 color: var(--color-text, hsl(0 0% 13%));
 background-color: var(--color-surface, hsl(0 0% 97%));
 min-height: 100vh;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
 display: block;
 max-width: 100%;
}

input, button, textarea, select {
 font: inherit;
 color: inherit;
}

button {
 cursor: pointer;
 background: none;
 border: none;
}

a {
 color: inherit;
 text-decoration: none;
}

ul, ol {
 list-style: none;
}

h1, h2, h3, h4, h5, h6 {
 font-weight: 600;
 line-height: 1.25;
}

p {
 margin: 0;
}

:focus-visible {
 outline: 2px solid var(--color-primary, hsl(138 45% 35%));
 outline-offset: 2px;
}

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


/* === Tokens === */
/* Design Tokens - Hierarchia trzech warstw: Foundation, Semantic, Component */

/* ==================== FOUNDATION ==================== */
:root {
 /* Hue values for HSL colors */
 --hue-primary: 138;
 --hue-danger: 0;
 --hue-warning: 38;
 --hue-info: 200;
 --hue-purple: 270;

 /* Base units */
 --space-unit: 8px;
 --radius-base: 12px;
 --radius-pill: 999px;
 --font-scale: 1.25;

 /* Animation */
 --transition-fast: 150ms ease;
 --transition-base: 200ms ease;
 --transition-slow: 300ms ease;
}

/* ==================== SEMANTIC TOKENS ==================== */
:root {
 /* Primary colors */
 --color-primary: hsl(var(--hue-primary) 45% 35%);
 --color-primary-light: hsl(var(--hue-primary) 45% 45%);
 --color-primary-dark: hsl(var(--hue-primary) 45% 25%);
 --color-primary-muted: hsl(var(--hue-primary) 30% 85%);

 /* Surface colors */
 --color-surface: hsl(0 0% 97%);
 --color-surface-elevated: hsl(0 0% 100%);
 --color-surface-pressed: hsl(0 0% 94%);

 /* Text colors */
 --color-text: hsl(0 0% 13%);
 --color-text-muted: hsl(0 0% 53%);
 --color-text-inverse: hsl(0 0% 100%);

 /* Border colors */
 --color-border: hsl(var(--hue-primary) 20% 80%);
 --color-border-subtle: hsl(0 0% 90%);

 /* Status colors */
 --color-danger: hsl(var(--hue-danger) 72% 51%);
 --color-danger-light: hsl(var(--hue-danger) 72% 92%);
 --color-danger-dark: hsl(var(--hue-danger) 72% 35%);

 --color-warning: hsl(var(--hue-warning) 90% 58%);
 --color-warning-light: hsl(var(--hue-warning) 90% 92%);
 --color-warning-dark: hsl(var(--hue-warning) 90% 28%);

 --color-success: hsl(var(--hue-primary) 60% 45%);
 --color-success-light: hsl(var(--hue-primary) 60% 92%);

 --color-info: hsl(var(--hue-info) 70% 50%);
 --color-info-light: hsl(var(--hue-info) 70% 92%);

 /* Online status */
 --color-online: #22c55e;
 --color-offline: var(--color-border);
 --color-busy: var(--color-warning);
}

/* ==================== DARK THEME ==================== */
[data-theme="dark"] {
 --color-surface: hsl(138 8% 10%);
 --color-surface-elevated: hsl(138 8% 14%);
 --color-surface-pressed: hsl(138 8% 18%);

 --color-text: hsl(138 15% 90%);
 --color-text-muted: hsl(138 10% 60%);

 --color-border: hsl(138 15% 25%);
 --color-border-subtle: hsl(138 15% 20%);

 --color-primary: hsl(var(--hue-primary) 50% 55%);
 --color-primary-light: hsl(var(--hue-primary) 50% 65%);
 --color-primary-dark: hsl(var(--hue-primary) 50% 45%);
 --color-primary-muted: hsl(var(--hue-primary) 30% 25%);
}

/* Fallback dla uzytkownikow bez wybranego motywu */
@media (prefers-color-scheme: dark) {
 :root:not([data-theme="light"]) {
  --color-surface: hsl(138 8% 10%);
  --color-surface-elevated: hsl(138 8% 14%);
  --color-surface-pressed: hsl(138 8% 18%);

  --color-text: hsl(138 15% 90%);
  --color-text-muted: hsl(138 10% 60%);

  --color-border: hsl(138 15% 25%);
  --color-border-subtle: hsl(138 15% 20%);

  --color-primary: hsl(var(--hue-primary) 50% 55%);
  --color-primary-light: hsl(var(--hue-primary) 50% 65%);
  --color-primary-dark: hsl(var(--hue-primary) 50% 45%);
  --color-primary-muted: hsl(var(--hue-primary) 30% 25%);
 }
}

/* ==================== COMPONENT TOKENS ==================== */
:root {
 /* Buttons */
 --btn-primary-bg: var(--color-primary);
 --btn-primary-text: #fff;
 --btn-primary-hover-bg: var(--color-primary-light);
 --btn-secondary-bg: transparent;
 --btn-secondary-border: var(--color-primary);
 --btn-secondary-text: var(--color-primary);
 --btn-ghost-text: var(--color-text-muted);
 --btn-danger-bg: var(--color-danger);
 --btn-danger-text: #fff;

 /* Cards */
 --card-bg: var(--color-surface-elevated);
 --card-border: var(--color-border);
 --card-shadow: 0 2px 8px hsl(0 0% 0% / 0.08);
 --card-shadow-elevated: 0 4px 16px hsl(0 0% 0% / 0.12);

 /* Inputs */
 --input-bg: var(--color-surface-elevated);
 --input-border: var(--color-border);
 --input-border-focus: var(--color-primary);
 --input-focus-ring: 0 0 0 3px hsl(var(--hue-primary) 45% 35% / 0.25);
 --input-placeholder: var(--color-text-muted);

 /* Badges */
 --badge-active-bg: hsl(138 60% 92%);
 --badge-active-text: hsl(138 60% 25%);
 --badge-pending-bg: hsl(38 90% 92%);
 --badge-pending-text: hsl(38 90% 28%);
 --badge-rejected-bg: hsl(0 72% 92%);
 --badge-rejected-text: hsl(0 72% 35%);
 --badge-escaped-bg: hsl(270 60% 92%);
 --badge-escaped-text: hsl(270 60% 35%);
 --badge-zagrozenie-bg: hsl(0 72% 92%);
 --badge-zagrozenie-text: hsl(0 72% 35%);
 --badge-wydarzenie-bg: hsl(200 70% 92%);
 --badge-wydarzenie-text: hsl(200 70% 30%);

 /* Navigation */
 --nav-bg: var(--color-surface-elevated);
 --nav-border: var(--color-border);
 --nav-active: var(--color-primary);
 --nav-inactive: var(--color-text-muted);

 /* App Bar */
 --appbar-bg: var(--color-primary);
 --appbar-text: #fff;
}

[data-theme="dark"] {
 --card-shadow: 0 2px 8px hsl(0 0% 0% / 0.3);
 --card-shadow-elevated: 0 4px 16px hsl(0 0% 0% / 0.4);
 --input-focus-ring: 0 0 0 3px hsl(var(--hue-primary) 50% 55% / 0.35);

 --badge-active-bg: hsl(138 40% 20%);
 --badge-active-text: hsl(138 60% 75%);
 --badge-pending-bg: hsl(38 40% 20%);
 --badge-pending-text: hsl(38 80% 70%);
 --badge-rejected-bg: hsl(0 40% 20%);
 --badge-rejected-text: hsl(0 70% 75%);
 --badge-escaped-bg: hsl(270 40% 20%);
 --badge-escaped-text: hsl(270 70% 75%);
 --badge-zagrozenie-bg: hsl(0 40% 20%);
 --badge-zagrozenie-text: hsl(0 70% 75%);
 --badge-wydarzenie-bg: hsl(200 40% 20%);
 --badge-wydarzenie-text: hsl(200 70% 75%);
}


/* === Typography === */
/* Typographic scale - Major Third (1.25) */

:root {
 /* Font sizes */
 --text-xs: 12px;
 --text-sm: 14px;
 --text-base: 16px;
 --text-lg: 20px;
 --text-xl: 24px;
 --text-2xl: 32px;
 --text-3xl: 40px;

 /* Line heights */
 --leading-tight: 1.25;
 --leading-snug: 1.375;
 --leading-normal: 1.5;
 --leading-relaxed: 1.625;

 /* Font weights */
 --font-normal: 400;
 --font-medium: 500;
 --font-semibold: 600;
 --font-bold: 700;
}

/* Typography utility classes */
.text-xs { font-size: var(--text-xs); line-height: var(--leading-normal); }
.text-sm { font-size: var(--text-sm); line-height: var(--leading-normal); }
.text-base { font-size: var(--text-base); line-height: var(--leading-normal); }
.text-lg { font-size: var(--text-lg); line-height: var(--leading-snug); }
.text-xl { font-size: var(--text-xl); line-height: var(--leading-tight); }
.text-2xl { font-size: var(--text-2xl); line-height: var(--leading-tight); }
.text-3xl { font-size: var(--text-3xl); line-height: var(--leading-tight); }

.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

/* Text colors */
.text-primary { color: var(--color-text); }
.text-muted { color: var(--color-text-muted); }
.text-inverse { color: var(--color-text-inverse); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }
.text-success { color: var(--color-success); }

/* Truncation */
.truncate {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.line-clamp-2 {
 display: -webkit-box;
 -webkit-line-clamp: 2;
 line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

.line-clamp-3 {
 display: -webkit-box;
 -webkit-line-clamp: 3;
 line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Letter spacing */
.tracking-tight { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide { letter-spacing: 0.025em; }


/* === Accessibility === */
/* Accessibility styles */

/* Screen reader only */
.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}

/* Skip link */
.skip-link {
 position: absolute;
 top: -40px;
 left: 0;
 background: var(--color-primary);
 color: #fff;
 padding: 8px 16px;
 z-index: 10000;
 transition: top 0.2s;
}

.skip-link:focus {
 top: 0;
}

/* Focus visible styles */
:focus-visible {
 outline: 2px solid var(--color-primary);
 outline-offset: 2px;
}

/* Remove focus outline for mouse users */
:focus:not(:focus-visible) {
 outline: none;
}

/* High contrast focus */
@media (prefers-contrast: high) {
 :focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
 }
}

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

 .skeleton {
  animation: none !important;
 }

 .spinner {
  animation: none !important;
 }
}

/* ARIA live regions */
[aria-live="polite"] {
 position: absolute;
 left: -10000px;
 width: 1px;
 height: 1px;
 overflow: hidden;
}

/* Role styles */
[role="button"] {
 cursor: pointer;
}

[role="button"]:focus-visible {
 outline: 2px solid var(--color-primary);
 outline-offset: 2px;
}

/* Dialog/Modal */
[role="dialog"] {
 position: fixed;
 inset: 0;
 z-index: 1000;
 display: flex;
 align-items: center;
 justify-content: center;
 background: hsl(0 0% 0% / 0.5);
}

[role="dialog"][aria-modal="true"] {
 pointer-events: auto;
}

[role="dialog"] > * {
 pointer-events: auto;
}

/* Alert styles */
[role="alert"] {
 padding: 12px 16px;
 border-radius: var(--radius-base, 12px);
 background: var(--color-danger-light);
 color: var(--color-danger);
 border: 1px solid var(--color-danger);
}

[role="alert"].alert--success {
 background: var(--color-success-light);
 color: var(--color-success);
 border-color: var(--color-success);
}

[role="alert"].alert--warning {
 background: var(--color-warning-light);
 color: var(--color-warning);
 border-color: var(--color-warning);
}

/* Status styles */
[role="status"] {
 padding: 8px 12px;
 border-radius: var(--radius-base, 12px);
 background: var(--color-surface-elevated);
 color: var(--color-text-muted);
 font-size: var(--text-sm, 14px);
}

/* Progress indicator */
[role="progressbar"] {
 width: 100%;
 height: 4px;
 background: var(--color-border);
 border-radius: 2px;
 overflow: hidden;
}

[role="progressbar"] > * {
 height: 100%;
 background: var(--color-primary);
 transition: width 0.3s ease;
}

/* Tooltip */
[role="tooltip"] {
 position: absolute;
 padding: 6px 10px;
 background: var(--color-text);
 color: var(--color-surface);
 font-size: var(--text-xs, 12px);
 border-radius: 4px;
 white-space: nowrap;
 z-index: 1000;
 pointer-events: none;
}

/* Visually hidden but accessible */
.visually-hidden {
 position: absolute !important;
 width: 1px !important;
 height: 1px !important;
 padding: 0 !important;
 margin: -1px !important;
 overflow: hidden !important;
 clip: rect(0, 0, 0, 0) !important;
 white-space: nowrap !important;
 border: 0 !important;
}


/* === Animations === */
/* View transitions, micro-interactions, and skeleton loading */

/* View Transitions */
::view-transition-old(screen) {
 animation: slide-out-left 300ms ease forwards;
}

::view-transition-new(screen) {
 animation: slide-in-right 300ms ease forwards;
}

@keyframes slide-out-left {
 from {
  opacity: 1;
  transform: translateX(0);
 }
 to {
  opacity: 0;
  transform: translateX(-30px);
 }
}

@keyframes slide-in-right {
 from {
  opacity: 0;
  transform: translateX(30px);
 }
 to {
  opacity: 1;
  transform: translateX(0);
 }
}

/* Modal animations */
@keyframes modal-backdrop-in {
 from { opacity: 0; }
 to { opacity: 1; }
}

@keyframes modal-backdrop-out {
 from { opacity: 1; }
 to { opacity: 0; }
}

@keyframes modal-content-in {
 from {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
 }
 to {
  opacity: 1;
  transform: translateY(0) scale(1);
 }
}

@keyframes modal-content-out {
 from {
  opacity: 1;
  transform: translateY(0) scale(1);
 }
 to {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
 }
}

.modal-backdrop--enter {
 animation: modal-backdrop-in 200ms ease forwards;
}

.modal-backdrop--exit {
 animation: modal-backdrop-out 200ms ease forwards;
}

.modal-content--enter {
 animation: modal-content-in 200ms ease forwards;
}

.modal-content--exit {
 animation: modal-content-out 200ms ease forwards;
}

/* Slide up animation for bottom sheets */
@keyframes slide-up {
 from {
  transform: translateY(100%);
 }
 to {
  transform: translateY(0);
 }
}

@keyframes slide-down {
 from {
  transform: translateY(0);
 }
 to {
  transform: translateY(100%);
 }
}

.slide-up {
 animation: slide-up 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.slide-down {
 animation: slide-down 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Skeleton loading */
@keyframes skeleton-shimmer {
 0% {
  background-position: -200% 0;
 }
 100% {
  background-position: 200% 0;
 }
}

.skeleton {
 background: linear-gradient(
  90deg,
  var(--color-surface-pressed) 25%,
  var(--color-border) 50%,
  var(--color-surface-pressed) 75%
 );
 background-size: 200% 100%;
 animation: skeleton-shimmer 1.5s infinite;
 border-radius: var(--radius-base, 12px);
}

.skeleton--text {
 height: 1em;
 margin-bottom: 0.5em;
}

.skeleton--title {
 height: 1.5em;
 width: 60%;
 margin-bottom: 0.75em;
}

.skeleton--avatar {
 width: 40px;
 height: 40px;
 border-radius: 50%;
}

.skeleton--card {
 height: 120px;
}

/* Pulse animation for alerts */
@keyframes pulse {
 0%, 100% {
  opacity: 1;
 }
  50% {
  opacity: 0.7;
 }
}

.pulse {
 animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Shake animation for errors */
@keyframes shake {
 0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.shake {
 animation: shake 0.5s ease-in-out;
}

/* Fade animations */
@keyframes fade-in {
 from { opacity: 0; }
 to { opacity: 1; }
}

@keyframes fade-out {
 from { opacity: 1; }
 to { opacity: 0; }
}

.fade-in {
 animation: fade-in 200ms ease forwards;
}

.fade-out {
 animation: fade-out 200ms ease forwards;
}

/* Scale animations */
@keyframes scale-in {
 from {
  opacity: 0;
  transform: scale(0.9);
 }
 to {
  opacity: 1;
  transform: scale(1);
 }
}

.scale-in {
 animation: scale-in 200ms ease forwards;
}

/* Toast slide in */
@keyframes toast-slide-in {
 from {
  opacity: 0;
  transform: translateY(-100%);
 }
 to {
  opacity: 1;
  transform: translateY(0);
 }
}

@keyframes toast-slide-out {
 from {
  opacity: 1;
  transform: translateY(0);
 }
 to {
  opacity: 0;
  transform: translateY(-100%);
 }
}

.toast--enter {
 animation: toast-slide-in 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast--exit {
 animation: toast-slide-out 200ms ease forwards;
}

/* Spinner */
@keyframes spin {
 to { transform: rotate(360deg); }
}

.spinner {
 width: 24px;
 height: 24px;
 border: 2px solid var(--color-border);
 border-top-color: var(--color-primary);
 border-radius: 50%;
 animation: spin 1s linear infinite;
}

.spinner--sm {
 width: 16px;
 height: 16px;
 border-width: 1.5px;
}

.spinner--lg {
 width: 32px;
 height: 32px;
 border-width: 3px;
}

/* Typing indicator dots */
@keyframes typing-bounce {
 0%, 60%, 100% {
  transform: translateY(0);
 }
  30% {
  transform: translateY(-4px);
 }
}

.typing-indicator {
 display: flex;
 align-items: center;
 gap: 4px;
 padding: 8px 12px;
}

.typing-indicator__dot {
 width: 6px;
 height: 6px;
 background: var(--color-text-muted);
 border-radius: 50%;
 animation: typing-bounce 1.2s infinite;
}

.typing-indicator__dot:nth-child(1) { animation-delay: 0ms; }
.typing-indicator__dot:nth-child(2) { animation-delay: 150ms; }
.typing-indicator__dot:nth-child(3) { animation-delay: 300ms; }

/* Pull to refresh spinner */
@keyframes ptr-spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}

.ptr-indicator {
 position: absolute;
 top: -50px;
 left: 50%;
 transform: translateX(-50%);
 width: 40px;
 height: 40px;
 opacity: 0;
 transition: opacity 200ms ease;
}

.ptr-indicator--visible {
 opacity: 1;
}

.ptr-indicator--spinning {
 animation: ptr-spin 1s linear infinite;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
 *,
 *::before,
 *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
 }

 .skeleton {
  animation: none;
  background: var(--color-surface-pressed);
 }
}


/* === Buttons === */
/* Button component with variants and states */

.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 border-radius: var(--radius-pill, 999px);
 padding: 12px 24px;
 font-size: var(--text-base, 16px);
 font-weight: var(--font-semibold, 600);
 line-height: 1.25;
 text-align: center;
 white-space: nowrap;
 border: none;
 outline: none;
 background: transparent;
 color: var(--color-text);
 cursor: pointer;
 transition: all var(--transition-fast, 150ms ease);
 position: relative;
 overflow: hidden;
}

/* Button variants */
.btn--primary {
 background: var(--btn-primary-bg, var(--color-primary));
 color: var(--btn-primary-text, #fff);
}

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

.btn--ghost {
 background: transparent;
 color: var(--btn-ghost-text, var(--color-text-muted));
}

.btn--danger {
 background: var(--btn-danger-bg, var(--color-danger));
 color: var(--btn-danger-text, #fff);
}

/* Button sizes */
.btn--sm {
 padding: 8px 16px;
 font-size: var(--text-sm, 14px);
}

.btn--md {
 padding: 12px 24px;
 font-size: var(--text-base, 16px);
}

.btn--lg {
 padding: 16px 32px;
 font-size: var(--text-lg, 20px);
}

/* Button states */
.btn:hover:not(:disabled) {
 filter: brightness(1.08);
 transform: translateY(-1px);
}

.btn:active:not(:disabled) {
 transform: scale(0.98);
}

.btn:disabled {
 opacity: 0.45;
 cursor: not-allowed;
}

.btn--loading {
 pointer-events: none;
}

.btn--loading::after {
 content: '';
 width: 16px;
 height: 16px;
 border: 2px solid currentColor;
 border-right-color: transparent;
 border-radius: 50%;
 animation: btn-spin 1s linear infinite;
}

@keyframes btn-spin {
 to { transform: rotate(360deg); }
}

/* Ripple effect */
.btn::after {
 content: '';
 position: absolute;
 inset: 0;
 background: radial-gradient(circle, currentColor 10%, transparent 10%);
 background-repeat: no-repeat;
 background-position: center;
 background-size: 0% 0%;
 opacity: 0.2;
 transition: background-size 0.3s ease;
}

.btn:active::after {
 background-size: 1000% 1000%;
}

/* Icon button */
.btn--icon {
 padding: 8px;
 border-radius: var(--radius-base, 12px);
}

.btn--icon.btn--sm { padding: 6px; }
.btn--icon.btn--lg { padding: 12px; }


/* === Badges === */
/* Badge component for status and labels */

.badge {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 padding: 2px 10px;
 border-radius: var(--radius-pill, 999px);
 font-size: 11px;
 font-weight: var(--font-bold, 700);
 line-height: 1.4;
 text-transform: uppercase;
 letter-spacing: 0.025em;
 white-space: nowrap;
}

/* Status variants */
.badge--active {
 background: var(--badge-active-bg, hsl(138 60% 92%));
 color: var(--badge-active-text, hsl(138 60% 25%));
}

.badge--pending {
 background: var(--badge-pending-bg, hsl(38 90% 92%));
 color: var(--badge-pending-text, hsl(38 90% 28%));
}

.badge--rejected {
 background: var(--badge-rejected-bg, hsl(0 72% 92%));
 color: var(--badge-rejected-text, hsl(0 72% 35%));
}

.badge--escaped {
 background: var(--badge-escaped-bg, hsl(270 60% 92%));
 color: var(--badge-escaped-text, hsl(270 60% 35%));
}

/* Report type variants */
.badge--zagrozenie {
 background: var(--badge-zagrozenie-bg, hsl(0 72% 92%));
 color: var(--badge-zagrozenie-text, hsl(0 72% 35%));
}

.badge--wydarzenie {
 background: var(--badge-wydarzenie-bg, hsl(200 70% 92%));
 color: var(--badge-wydarzenie-text, hsl(200 70% 30%));
}

/* Role variants */
.badge--defender {
 background: var(--color-primary-muted);
 color: var(--color-primary-dark);
}

.badge--commander {
 background: hsl(200 70% 92%);
 color: hsl(200 70% 30%);
}

.badge--general {
 background: hsl(270 60% 92%);
 color: hsl(270 60% 35%);
}

.badge--admin {
 background: hsl(0 72% 92%);
 color: hsl(0 72% 35%);
}

/* Notification badge */
.badge--notification {
 position: absolute;
 top: -4px;
 right: -4px;
 min-width: 18px;
 height: 18px;
 padding: 0 4px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: var(--color-danger);
 color: #fff;
 font-size: 10px;
 border-radius: 9px;
}

/* Badge sizes */
.badge--sm {
 padding: 1px 6px;
 font-size: 10px;
}

.badge--lg {
 padding: 4px 14px;
 font-size: 12px;
}

/* Badge with dot */
.badge--dot::before {
 content: '';
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: currentColor;
}

/* Outline variant */
.badge--outline {
 background: transparent;
 border: 1px solid currentColor;
}


/* === Avatar === */
/* Avatar component with status indicator */

.avatar {
 position: relative;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 border-radius: 50%;
 overflow: hidden;
 background: var(--color-border);
 font-weight: var(--font-bold, 700);
 color: var(--color-text-muted);
 flex-shrink: 0;
}

/* Avatar sizes */
.avatar--sm {
 width: 32px;
 height: 32px;
 font-size: 12px;
}

.avatar--md {
 width: 40px;
 height: 40px;
 font-size: 15px;
}

.avatar--lg {
 width: 56px;
 height: 56px;
 font-size: 20px;
}

.avatar--xl {
 width: 80px;
 height: 80px;
 font-size: 28px;
}

/* Avatar image */
.avatar__image {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

/* Avatar initials */
.avatar__initials {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
 user-select: none;
}

/* Status indicator */
.avatar__status {
 position: absolute;
 bottom: 0;
 right: 0;
 width: 10px;
 height: 10px;
 border-radius: 50%;
 border: 2px solid var(--color-surface-elevated);
 background: var(--color-offline);
}

.avatar--sm .avatar__status {
 width: 8px;
 height: 8px;
 border-width: 1.5px;
}

.avatar--lg .avatar__status {
 width: 14px;
 height: 14px;
 border-width: 2.5px;
}

.avatar--xl .avatar__status {
 width: 18px;
 height: 18px;
 border-width: 3px;
}

.avatar__status--online {
 background: var(--color-online);
}

.avatar__status--offline {
 background: var(--color-offline);
}

.avatar__status--busy {
 background: var(--color-busy);
}

/* Avatar group */
.avatar-group {
 display: flex;
 align-items: center;
}

.avatar-group .avatar {
 margin-left: -8px;
 border: 2px solid var(--color-surface-elevated);
}

.avatar-group .avatar:first-child {
 margin-left: 0;
}

.avatar-group--sm .avatar { margin-left: -6px; }
.avatar-group--lg .avatar { margin-left: -12px; }

/* Avatar with border */
.avatar--bordered {
 border: 2px solid var(--color-surface-elevated);
 box-shadow: 0 0 0 1px var(--color-border);
}


/* === Cards === */
/* Card component with variants */

.card {
 background: var(--card-bg, var(--color-surface-elevated));
 border: 1px solid var(--card-border, var(--color-border));
 border-radius: var(--radius-base, 12px);
 padding: 16px;
 box-shadow: var(--card-shadow, 0 2px 8px hsl(0 0% 0% / 0.08));
 transition: transform var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
}

.card--interactive {
 cursor: pointer;
}

.card--interactive:hover {
 transform: translateY(-2px);
 box-shadow: var(--card-shadow-elevated, 0 4px 16px hsl(0 0% 0% / 0.12));
}

.card--interactive:active {
 transform: scale(0.99);
}

/* Status variants */
.card--danger {
 border-left: 4px solid var(--color-danger);
}

.card--warning {
 border-left: 4px solid var(--color-warning);
}

.card--success {
 border-left: 4px solid var(--color-success);
}

.card--info {
 border-left: 4px solid var(--color-info);
}

/* Card sections */
.card__header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 margin-bottom: 12px;
}

.card__title {
 font-size: var(--text-lg, 20px);
 font-weight: var(--font-semibold, 600);
 color: var(--color-text);
 margin: 0;
}

.card__subtitle {
 font-size: var(--text-sm, 14px);
 color: var(--color-text-muted);
 margin-top: 4px;
}

.card__content {
 color: var(--color-text);
}

.card__content p {
 margin: 0 0 12px 0;
}

.card__content p:last-child {
 margin-bottom: 0;
}

.card__footer {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 margin-top: 16px;
 padding-top: 12px;
 border-top: 1px solid var(--color-border-subtle);
}

/* Card sizes */
.card--sm { padding: 12px; }
.card--lg { padding: 24px; }

/* Skeleton loading state */
.card--skeleton {
 pointer-events: none;
}

.card--skeleton .card__title,
.card--skeleton .card__content,
.card--skeleton .card__subtitle {
 background: linear-gradient(90deg, var(--color-surface-pressed) 25%, var(--color-border) 50%, var(--color-surface-pressed) 75%);
 background-size: 200% 100%;
 animation: skeleton-shimmer 1.5s infinite;
 border-radius: 4px;
 color: transparent;
}

@keyframes skeleton-shimmer {
 0% { background-position: 200% 0; }
 100% { background-position: -200% 0; }
}


/* === Inputs === */
/* Input components with floating labels */

.input-group {
 position: relative;
 display: flex;
 flex-direction: column;
 gap: 4px;
}

.input-group__label {
 font-size: var(--text-sm, 14px);
 font-weight: var(--font-semibold, 600);
 color: var(--color-text-muted);
 transition: color var(--transition-fast, 150ms ease);
}

.input-group:focus-within .input-group__label {
 color: var(--color-primary);
}

.input-group__field {
 width: 100%;
 padding: 12px 16px;
 font-size: var(--text-base, 16px);
 line-height: 1.5;
 background: var(--input-bg, var(--color-surface-elevated));
 border: 1px solid var(--input-border, var(--color-border));
 border-radius: var(--radius-base, 12px);
 color: var(--color-text);
 transition: border-color var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
}

.input-group__field::placeholder {
 color: var(--input-placeholder, var(--color-text-muted));
 opacity: 0.7;
}

.input-group__field:focus {
 border-color: var(--input-border-focus, var(--color-primary));
 box-shadow: var(--input-focus-ring, 0 0 0 3px hsl(138 45% 35% / 0.25));
 outline: none;
}

.input-group--error .input-group__field {
 border-color: var(--color-danger);
}

.input-group--error .input-group__field:focus {
 box-shadow: 0 0 0 3px hsl(var(--hue-danger) 72% 51% / 0.25);
}

.input-group__error {
 font-size: var(--text-xs, 12px);
 color: var(--color-danger);
 margin-top: 4px;
 display: flex;
 align-items: center;
 gap: 4px;
}

/* Textarea specific */
textarea.input-group__field {
 min-height: 100px;
 resize: vertical;
}

/* Select specific */
select.input-group__field {
 appearance: none;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='currentColor' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: right 12px center;
 padding-right: 36px;
}

/* Floating label variant */
.input-group--floating {
 position: relative;
}

.input-group--floating .input-group__label {
 position: absolute;
 left: 16px;
 top: 50%;
 transform: translateY(-50%);
 background: var(--input-bg, var(--color-surface-elevated));
 padding: 0 4px;
 pointer-events: none;
 transition: all var(--transition-fast, 150ms ease);
}

.input-group--floating .input-group__field {
 padding-top: 20px;
 padding-bottom: 8px;
}

.input-group--floating .input-group__field:focus + .input-group__label,
.input-group--floating .input-group__field:not(:placeholder-shown) + .input-group__label {
 top: 0;
 font-size: var(--text-xs, 12px);
 color: var(--color-primary);
}

.input-group--floating .input-group__field::placeholder {
 color: transparent;
}

/* Character counter */
.input-group__counter {
 font-size: var(--text-xs, 12px);
 color: var(--color-text-muted);
 text-align: right;
 margin-top: 4px;
}

.input-group__counter--error {
 color: var(--color-danger);
}


/* === Stepper === */
/* Stepper/wizard component styles */

.stepper {
 display: flex;
 flex-direction: column;
 gap: 24px;
}

/* Progress indicator */
.stepper__progress {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 16px;
}

.stepper__step {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 8px;
}

.stepper__indicator {
 width: 32px;
 height: 32px;
 border-radius: 50%;
 background: var(--color-surface-pressed);
 border: 2px solid var(--color-border);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: var(--text-sm, 14px);
 font-weight: var(--font-semibold, 600);
 color: var(--color-text-muted);
 transition: all var(--transition-fast, 150ms ease);
}

.stepper__step--active .stepper__indicator {
 background: var(--color-primary);
 border-color: var(--color-primary);
 color: #fff;
}

.stepper__step--completed .stepper__indicator {
 background: var(--color-success);
 border-color: var(--color-success);
 color: #fff;
}

.stepper__label {
 font-size: var(--text-xs, 12px);
 color: var(--color-text-muted);
 font-weight: var(--font-medium, 500);
 white-space: nowrap;
}

.stepper__step--active .stepper__label {
 color: var(--color-primary);
 font-weight: var(--font-semibold, 600);
}

.stepper__line {
 flex: 1;
 height: 2px;
 background: var(--color-border);
 max-width: 60px;
 margin: 0 4px;
 margin-bottom: 20px;
}

/* Content panels */
.stepper__content {
 flex: 1;
 min-height: 0;
}

.stepper__panel {
 display: none;
 animation: fade-in 300ms ease;
}

.stepper__panel--active {
 display: block;
}

/* Footer with buttons */
.stepper__footer {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 padding-top: 16px;
 border-top: 1px solid var(--color-border-subtle);
}

.stepper__footer .btn {
 flex: 1;
}

/* Wizard step specific styles */
.wizard-step {
 display: flex;
 flex-direction: column;
 gap: 16px;
}

.wizard-step__title {
 font-size: var(--text-lg, 20px);
 font-weight: var(--font-semibold, 600);
 color: var(--color-text);
 margin-bottom: 8px;
}

.wizard-step__description {
 font-size: var(--text-sm, 14px);
 color: var(--color-text-muted);
 margin-bottom: 16px;
}

/* Location step */
.wizard-step__map {
 height: 300px;
 border-radius: var(--radius-base, 12px);
 background: var(--color-surface-pressed);
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
 overflow: hidden;
}

.wizard-step__map-pin {
 position: absolute;
 width: 40px;
 height: 40px;
 background: var(--color-primary);
 border-radius: 50% 50% 50% 0;
 transform: rotate(-45deg);
 box-shadow: 0 4px 12px hsl(var(--hue-primary) 45% 35% / 0.4);
}

.wizard-step__map-pin::after {
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%) rotate(45deg);
 width: 12px;
 height: 12px;
 background: #fff;
 border-radius: 50%;
}

.wizard-step__location-text {
 text-align: center;
 padding: 16px;
 background: var(--color-surface-elevated);
 border-radius: var(--radius-base, 12px);
 border: 1px solid var(--color-border);
}

/* Type selection step */
.wizard-step__types {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 16px;
}

.wizard-step__type-option {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 12px;
 padding: 24px;
 background: var(--color-surface-elevated);
 border: 2px solid var(--color-border);
 border-radius: var(--radius-base, 12px);
 cursor: pointer;
 transition: all var(--transition-fast, 150ms ease);
}

.wizard-step__type-option:hover {
 border-color: var(--color-primary);
 transform: translateY(-2px);
}

.wizard-step__type-option--selected {
 border-color: var(--color-primary);
 background: var(--color-primary-muted);
}

.wizard-step__type-icon {
 width: 48px;
 height: 48px;
 border-radius: var(--radius-base, 12px);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 24px;
}

.wizard-step__type-option--zagrozenie .wizard-step__type-icon {
 background: var(--color-danger-light);
 color: var(--color-danger);
}

.wizard-step__type-option--wydarzenie .wizard-step__type-icon {
 background: var(--color-info-light);
 color: var(--color-info);
}

.wizard-step__type-label {
 font-size: var(--text-base, 16px);
 font-weight: var(--font-semibold, 600);
 color: var(--color-text);
}

/* Photo upload */
.wizard-step__upload {
 border: 2px dashed var(--color-border);
 border-radius: var(--radius-base, 12px);
 padding: 32px;
 text-align: center;
 cursor: pointer;
 transition: all var(--transition-fast, 150ms ease);
}

.wizard-step__upload:hover {
 border-color: var(--color-primary);
 background: var(--color-primary-muted);
}

.wizard-step__upload--has-file {
 border-style: solid;
 border-color: var(--color-success);
 background: var(--color-success-light);
}

.wizard-step__upload-icon {
 width: 48px;
 height: 48px;
 margin: 0 auto 12px;
 color: var(--color-text-muted);
}

.wizard-step__upload-text {
 font-size: var(--text-sm, 14px);
 color: var(--color-text-muted);
}

.wizard-step__photo-preview {
 position: relative;
 border-radius: var(--radius-base, 12px);
 overflow: hidden;
}

.wizard-step__photo-preview img {
 width: 100%;
 height: 200px;
 object-fit: cover;
}

.wizard-step__photo-remove {
 position: absolute;
 top: 8px;
 right: 8px;
 width: 32px;
 height: 32px;
 background: var(--color-danger);
 color: #fff;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
}

/* Summary step */
.wizard-step__summary {
 background: var(--color-surface-elevated);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-base, 12px);
 padding: 16px;
}

.wizard-step__summary-item {
 display: flex;
 justify-content: space-between;
 padding: 12px 0;
 border-bottom: 1px solid var(--color-border-subtle);
}

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

.wizard-step__summary-label {
 font-size: var(--text-sm, 14px);
 color: var(--color-text-muted);
}

.wizard-step__summary-value {
 font-size: var(--text-sm, 14px);
 font-weight: var(--font-medium, 500);
 color: var(--color-text);
 text-align: right;
}

.wizard-step__summary-map {
 height: 150px;
 border-radius: var(--radius-base, 12px);
 background: var(--color-surface-pressed);
 margin-top: 16px;
}


/* === Chat === */
/* Chat components - conversation list and chat view */

/* Conversation List */
.conversation-list {
 display: flex;
 flex-direction: column;
}

.conversation-list-item {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 14px 16px;
 border-bottom: 1px solid var(--color-border-subtle);
 cursor: pointer;
 transition: background var(--transition-fast, 150ms ease);
}

.conversation-list-item:hover {
 background: var(--color-surface-pressed);
}

.conversation-list-item--active {
 background: var(--color-primary-muted);
}

.conversation-list-item--archived {
 opacity: 0.6;
}

.conversation-list-item__avatar {
 flex-shrink: 0;
 position: relative;
}

.conversation-list-item__content {
 flex: 1;
 min-width: 0;
 display: flex;
 flex-direction: column;
 gap: 4px;
}

.conversation-list-item__name {
 font-size: var(--text-base, 16px);
 font-weight: var(--font-semibold, 600);
 color: var(--color-text);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.conversation-list-item__preview {
 font-size: var(--text-sm, 14px);
 color: var(--color-text-muted);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.conversation-list-item__preview--unread {
 color: var(--color-text);
 font-weight: var(--font-medium, 500);
}

.conversation-list-item__meta {
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 gap: 4px;
 flex-shrink: 0;
}

.conversation-list-item__time {
 font-size: 11px;
 color: var(--color-text-muted);
}

.conversation-list-item__badge {
 min-width: 18px;
 height: 18px;
 padding: 0 5px;
 background: var(--color-danger);
 color: #fff;
 border-radius: 9px;
 font-size: 10px;
 font-weight: var(--font-bold, 700);
 display: flex;
 align-items: center;
 justify-content: center;
}

/* Swipe actions (for archive) */
.conversation-list-item__swipe {
 position: absolute;
 right: 0;
 top: 0;
 bottom: 0;
 width: 80px;
 background: var(--color-danger);
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 transform: translateX(100%);
 transition: transform var(--transition-fast, 150ms ease);
}

.conversation-list-item--swiped .conversation-list-item__swipe {
 transform: translateX(0);
}

/* Chat View */
.chat-view {
 display: flex;
 flex-direction: column;
 height: 100%;
 background: var(--color-surface);
}

.chat-view__header {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 12px 16px;
 background: var(--color-surface-elevated);
 border-bottom: 1px solid var(--color-border);
 flex-shrink: 0;
}

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

.chat-view__header-name {
 font-size: var(--text-base, 16px);
 font-weight: var(--font-semibold, 600);
 color: var(--color-text);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.chat-view__header-status {
 font-size: var(--text-xs, 12px);
 color: var(--color-text-muted);
 display: flex;
 align-items: center;
 gap: 4px;
}

.chat-view__header-status--online::before {
 content: '';
 width: 6px;
 height: 6px;
 background: var(--color-online);
 border-radius: 50%;
}

/* Messages Area */
.chat-messages {
 flex: 1;
 overflow-y: auto;
 padding: 16px;
 display: flex;
 flex-direction: column;
 gap: 8px;
 scroll-behavior: smooth;
}

/* Date separator */
.chat-date-sep {
 position: sticky;
 top: 0;
 z-index: 10;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 8px 0;
}

.chat-date-sep__text {
 font-size: 11px;
 color: var(--color-text-muted);
 background: var(--color-surface);
 padding: 4px 12px;
 border-radius: var(--radius-pill, 999px);
 backdrop-filter: blur(8px);
}

/* Message bubbles */
.msg-bubble {
 max-width: 75%;
 padding: 10px 14px;
 border-radius: 16px;
 position: relative;
 word-wrap: break-word;
}

.msg-bubble--sent {
 align-self: flex-end;
 background: var(--color-primary);
 color: #fff;
 border-bottom-right-radius: 4px;
}

.msg-bubble--received {
 align-self: flex-start;
 background: var(--color-surface-elevated);
 color: var(--color-text);
 border: 1px solid var(--color-border);
 border-bottom-left-radius: 4px;
}

.msg-bubble--ai {
 align-self: flex-start;
 background: var(--color-primary-muted);
 color: var(--color-text);
 border: 1px solid var(--color-primary);
 border-bottom-left-radius: 4px;
}

.msg-bubble__text {
 font-size: var(--text-sm, 14px);
 line-height: 1.5;
}

.msg-bubble__text p {
 margin: 0 0 8px 0;
}

.msg-bubble__text p:last-child {
 margin-bottom: 0;
}

.msg-bubble__footer {
 display: flex;
 align-items: center;
 justify-content: flex-end;
 gap: 4px;
 margin-top: 4px;
 font-size: 11px;
 opacity: 0.7;
}

.msg-bubble--sent .msg-bubble__footer {
 color: hsl(0 0% 100% / 0.8);
}

.msg-bubble--received .msg-bubble__footer,
.msg-bubble--ai .msg-bubble__footer {
 color: var(--color-text-muted);
}

.msg-bubble__status {
 display: flex;
 align-items: center;
}

.msg-bubble__status--sent::after {
 content: '✓';
}

.msg-bubble__status--delivered::after {
 content: '✓✓';
}

.msg-bubble__status--read::after {
 content: '✓✓';
 color: var(--color-success);
}

/* Reply quote */
.msg-reply-quote {
 background: hsl(0 0% 0% / 0.1);
 border-left: 3px solid currentColor;
 padding: 6px 10px;
 margin-bottom: 8px;
 border-radius: 4px;
 font-size: 12px;
 opacity: 0.9;
}

.msg-reply-quote__author {
 font-weight: var(--font-semibold, 600);
 margin-bottom: 2px;
}

.msg-reply-quote__text {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

/* Context menu */
.msg-context-menu {
 position: absolute;
 background: var(--color-surface-elevated);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-base, 12px);
 box-shadow: var(--card-shadow-elevated, 0 4px 16px hsl(0 0% 0% / 0.12));
 padding: 8px 0;
 z-index: 100;
 min-width: 160px;
}

.msg-context-menu__item {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 10px 16px;
 font-size: var(--text-sm, 14px);
 color: var(--color-text);
 cursor: pointer;
 transition: background var(--transition-fast, 150ms ease);
}

.msg-context-menu__item:hover {
 background: var(--color-surface-pressed);
}

.msg-context-menu__item--danger {
 color: var(--color-danger);
}

/* Input bar */
.chat-input-bar {
 display: flex;
 align-items: flex-end;
 gap: 8px;
 padding: 12px 16px;
 background: var(--color-surface-elevated);
 border-top: 1px solid var(--color-border);
 flex-shrink: 0;
}

.chat-input-bar__attach {
 width: 40px;
 height: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: var(--radius-base, 12px);
 color: var(--color-text-muted);
 flex-shrink: 0;
}

.chat-input-bar__attach:hover {
 background: var(--color-surface-pressed);
 color: var(--color-text);
}

.chat-input-bar__field {
 flex: 1;
 min-height: 44px;
 max-height: 120px;
 padding: 10px 14px;
 background: var(--color-surface);
 border: 1px solid var(--color-border);
 border-radius: 20px;
 font-size: var(--text-sm, 14px);
 line-height: 1.5;
 resize: none;
 overflow-y: auto;
}

.chat-input-bar__field:focus {
 border-color: var(--color-primary);
 outline: none;
}

.chat-input-bar__send {
 width: 40px;
 height: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: var(--color-primary);
 color: #fff;
 border-radius: 50%;
 flex-shrink: 0;
 transition: transform var(--transition-fast, 150ms ease);
}

.chat-input-bar__send:hover {
 transform: scale(1.05);
}

.chat-input-bar__send:active {
 transform: scale(0.95);
}

.chat-input-bar__send:disabled {
 opacity: 0.5;
 cursor: not-allowed;
 transform: none;
}

/* AI Chat separator */
.chat-ai-separator {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 16px 0;
 color: var(--color-text-muted);
 font-size: var(--text-xs, 12px);
 font-weight: var(--font-medium, 500);
 text-transform: uppercase;
 letter-spacing: 0.05em;
}

.chat-ai-separator::before,
.chat-ai-separator::after {
 content: '';
 flex: 1;
 height: 1px;
 background: var(--color-border);
}

.chat-ai-separator__icon {
 width: 20px;
 height: 20px;
 color: var(--color-primary);
}

/* Empty state */
.chat-empty {
 flex: 1;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 32px;
 text-align: center;
 color: var(--color-text-muted);
}

.chat-empty__icon {
 width: 64px;
 height: 64px;
 margin-bottom: 16px;
 opacity: 0.5;
}

.chat-empty__title {
 font-size: var(--text-lg, 20px);
 font-weight: var(--font-semibold, 600);
 color: var(--color-text);
 margin-bottom: 8px;
}

.chat-empty__text {
 font-size: var(--text-sm, 14px);
 margin-bottom: 24px;
}

.chat-empty__prompts {
 display: flex;
 flex-direction: column;
 gap: 8px;
 width: 100%;
 max-width: 300px;
}

.chat-empty__prompt {
 padding: 12px 16px;
 background: var(--color-surface-elevated);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-base, 12px);
 font-size: var(--text-sm, 14px);
 color: var(--color-text);
 cursor: pointer;
 transition: all var(--transition-fast, 150ms ease);
}

.chat-empty__prompt:hover {
 border-color: var(--color-primary);
 background: var(--color-primary-muted);
}

/* Responsive - split view on tablet+ */
@media (min-width: 768px) {
 .chat-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  height: 100%;
 }

 .chat-layout__sidebar {
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
 }

 .chat-layout__main {
  display: flex;
  flex-direction: column;
 }
}


/* === Forum === */
/* Forum components - post list, detail view, comments */

/* Forum Header */
.forum-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding: 16px;
 background: var(--color-surface-elevated);
 border-bottom: 1px solid var(--color-border);
 position: sticky;
 top: 0;
 z-index: 10;
}

.forum-header__title {
 font-size: var(--text-xl, 24px);
 font-weight: var(--font-bold, 700);
 color: var(--color-text);
}

.forum-header__actions {
 display: flex;
 gap: 8px;
}

/* Search Bar */
.forum-search {
 position: sticky;
 top: 56px;
 z-index: 10;
 padding: 12px 16px;
 background: var(--color-surface);
 border-bottom: 1px solid var(--color-border-subtle);
}

.forum-search__input {
 width: 100%;
 padding: 10px 16px 10px 40px;
 background: var(--color-surface-elevated);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-pill, 999px);
 font-size: var(--text-sm, 14px);
 color: var(--color-text);
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'%3E%3Cpath fill='%23999' d='M229.66 218.34l-50.06-50.06a88.11 88.11 0 10-11.32 11.32l50.06 50.06a8 8 0 0011.32-11.32zM40 112a72 72 0 1172 72 72.08 72.08 0 01-72-72z'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: 14px center;
}

.forum-search__input:focus {
 border-color: var(--color-primary);
 outline: none;
}

.forum-search__input::placeholder {
 color: var(--color-text-muted);
}

/* Filters */
.forum-filters {
 display: flex;
 gap: 8px;
 padding: 12px 16px;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: none;
}

.forum-filters::-webkit-scrollbar {
 display: none;
}

.forum-filter {
 flex-shrink: 0;
 padding: 6px 14px;
 background: var(--color-surface-elevated);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-pill, 999px);
 font-size: var(--text-xs, 12px);
 font-weight: var(--font-medium, 500);
 color: var(--color-text);
 white-space: nowrap;
 transition: all var(--transition-fast, 150ms ease);
}

.forum-filter:hover {
 border-color: var(--color-primary);
}

.forum-filter--active {
 background: var(--color-primary);
 border-color: var(--color-primary);
 color: #fff;
}

/* Sort Dropdown */
.forum-sort {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 8px 16px;
 font-size: var(--text-sm, 14px);
 color: var(--color-text-muted);
}

.forum-sort__select {
 padding: 6px 28px 6px 12px;
 background: var(--color-surface-elevated);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-base, 12px);
 font-size: var(--text-sm, 14px);
 color: var(--color-text);
 appearance: none;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: right 10px center;
}

/* Forum Card */
.forum-card {
 display: block;
 width: 100%;
 text-align: left;
 background: var(--card-bg, var(--color-surface-elevated));
 border: 1px solid var(--card-border, var(--color-border));
 border-radius: var(--radius-base, 12px);
 padding: 16px;
 margin-bottom: 12px;
 cursor: pointer;
 transition: transform var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
}

.forum-card:hover {
 transform: translateY(-2px);
 box-shadow: var(--card-shadow-elevated, 0 4px 16px hsl(0 0% 0% / 0.12));
}

.forum-card--pinned {
 border-left: 4px solid var(--color-primary);
}

.forum-card__header {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-bottom: 12px;
}

.forum-card__author {
 display: flex;
 align-items: center;
 gap: 8px;
}

.forum-card__author-name {
 font-size: var(--text-sm, 14px);
 font-weight: var(--font-medium, 500);
 color: var(--color-text);
}

.forum-card__meta {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: var(--text-xs, 12px);
 color: var(--color-text-muted);
}

.forum-card__meta-dot {
 width: 3px;
 height: 3px;
 background: var(--color-text-muted);
 border-radius: 50%;
}

.forum-card__region {
 padding: 2px 8px;
 background: var(--color-primary-muted);
 color: var(--color-primary);
 border-radius: 4px;
 font-size: 10px;
 font-weight: var(--font-semibold, 600);
 text-transform: uppercase;
}

.forum-card__title {
 font-size: var(--text-base, 16px);
 font-weight: var(--font-semibold, 600);
 color: var(--color-text);
 line-height: 1.4;
 margin: 0 0 8px 0;
}

.forum-card__excerpt {
 font-size: var(--text-sm, 14px);
 color: var(--color-text-muted);
 line-height: 1.5;
 margin-bottom: 12px;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

.forum-card__tags {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 margin-bottom: 12px;
}

.forum-card__tag {
 padding: 2px 8px;
 background: var(--color-surface-pressed);
 border-radius: 4px;
 font-size: 11px;
 color: var(--color-text-muted);
}

.forum-card__footer {
 display: flex;
 align-items: center;
 gap: 16px;
 padding-top: 12px;
 border-top: 1px solid var(--color-border-subtle);
 font-size: var(--text-xs, 12px);
 color: var(--color-text-muted);
}

.forum-card__stat {
 display: flex;
 align-items: center;
 gap: 4px;
}

.forum-card__stat-icon {
 width: 14px;
 height: 14px;
}

/* Forum card inner elements used by JS */
.forum-card__top {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 8px;
}

.post-title {
 font-size: var(--text-base, 16px);
 font-weight: var(--font-semibold, 600);
 color: var(--color-text);
 line-height: 1.3;
 margin-bottom: 4px;
}

.post-meta {
 display: flex;
 align-items: center;
 gap: 6px;
 font-size: var(--text-xs, 12px);
 color: var(--color-text-muted);
 flex-wrap: wrap;
}

.forum-card__pin {
 font-size: var(--text-xs, 12px);
 color: var(--color-primary);
 font-weight: var(--font-semibold, 600);
}

.forum-card__region-tag {
 display: inline-flex;
 padding: 2px 8px;
 background: var(--color-primary-muted);
 color: var(--color-primary);
 border-radius: 4px;
 font-size: var(--text-xs, 12px);
 font-weight: var(--font-semibold, 600);
}

.forum-card__comment-count {
 font-size: var(--text-xs, 12px);
 color: var(--color-text-muted);
}

/* Reactions */
.forum-card__reactions {
 display: flex;
 gap: 8px;
 margin-left: auto;
}

.forum-reaction {
 display: flex;
 align-items: center;
 gap: 4px;
 padding: 4px 8px;
 background: var(--color-surface-pressed);
 border-radius: var(--radius-pill, 999px);
 font-size: 12px;
 cursor: pointer;
 transition: all var(--transition-fast, 150ms ease);
}

.forum-reaction:hover {
 background: var(--color-primary-muted);
}

.forum-reaction--active {
 background: var(--color-primary-muted);
 color: var(--color-primary);
}

/* Detail View */
.forum-detail {
 background: var(--color-surface-elevated);
 min-height: 100%;
}

.forum-detail__header {
 padding: 20px 16px;
 border-bottom: 1px solid var(--color-border);
}

.forum-detail__title {
 font-size: var(--text-xl, 24px);
 font-weight: var(--font-bold, 700);
 color: var(--color-text);
 line-height: 1.3;
 margin-bottom: 16px;
}

.forum-detail__meta {
 display: flex;
 align-items: center;
 gap: 12px;
}

.forum-detail__content {
 padding: 20px 16px;
 font-size: var(--text-base, 16px);
 line-height: 1.7;
 color: var(--color-text);
}

.forum-detail__content p {
 margin: 0 0 16px 0;
}

.forum-detail__content p:last-child {
 margin-bottom: 0;
}

/* Comments Section */
.forum-comments {
 border-top: 1px solid var(--color-border);
}

.forum-comments__header {
 padding: 16px;
 font-size: var(--text-base, 16px);
 font-weight: var(--font-semibold, 600);
 color: var(--color-text);
}

.forum-comment {
 display: flex;
 gap: 12px;
 padding: 16px;
 border-bottom: 1px solid var(--color-border-subtle);
}

.forum-comment__avatar {
 flex-shrink: 0;
}

.forum-comment__content {
 flex: 1;
 min-width: 0;
}

.forum-comment__header {
 display: flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 6px;
}

.forum-comment__author {
 font-size: var(--text-sm, 14px);
 font-weight: var(--font-semibold, 600);
 color: var(--color-text);
}

.forum-comment__time {
 font-size: 11px;
 color: var(--color-text-muted);
}

.forum-comment__text {
 font-size: var(--text-sm, 14px);
 color: var(--color-text);
 line-height: 1.5;
}

.forum-comment__actions {
 display: flex;
 gap: 12px;
 margin-top: 8px;
}

.forum-comment__action {
 font-size: 11px;
 color: var(--color-text-muted);
 cursor: pointer;
}

.forum-comment__action:hover {
 color: var(--color-danger);
}

/* Comment Input */
.forum-comment-input {
 position: sticky;
 bottom: 0;
 display: flex;
 gap: 12px;
 padding: 16px;
 background: var(--color-surface-elevated);
 border-top: 1px solid var(--color-border);
}

.forum-comment-input__field {
 flex: 1;
 min-height: 44px;
 max-height: 120px;
 padding: 12px 16px;
 background: var(--color-surface);
 border: 1px solid var(--color-border);
 border-radius: 20px;
 font-size: var(--text-sm, 14px);
 resize: none;
}

.forum-comment-input__field:focus {
 border-color: var(--color-primary);
 outline: none;
}

.forum-comment-input__submit {
 width: 44px;
 height: 44px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: var(--color-primary);
 color: #fff;
 border-radius: 50%;
 flex-shrink: 0;
}

.forum-comment-input__submit:disabled {
 opacity: 0.5;
 cursor: not-allowed;
}

/* Empty State */
.forum-empty {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 48px 24px;
 text-align: center;
 color: var(--color-text-muted);
}

.forum-empty__icon {
 width: 64px;
 height: 64px;
 margin-bottom: 16px;
 opacity: 0.3;
}

.forum-empty__title {
 font-size: var(--text-lg, 20px);
 font-weight: var(--font-semibold, 600);
 color: var(--color-text);
 margin-bottom: 8px;
}

.forum-empty__text {
 font-size: var(--text-sm, 14px);
 margin-bottom: 24px;
}


/* === Dashboard === */
/* Dashboard layout and widgets */

.dashboard-grid {
 display: grid;
 gap: 16px;
 padding: 16px;
}

/* Stats Strip - full width */
.stats-strip {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 12px;
}

.stat-item {
 background: var(--card-bg, var(--color-surface-elevated));
 border: 1px solid var(--card-border, var(--color-border));
 border-radius: var(--radius-base, 12px);
 padding: 16px;
 text-align: center;
 transition: transform var(--transition-fast, 150ms ease);
}

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

.stat-item__value {
 font-size: var(--text-2xl, 32px);
 font-weight: var(--font-bold, 700);
 color: var(--color-text);
 line-height: 1;
 margin-bottom: 4px;
}

.stat-item__value--danger {
 color: var(--color-danger);
}

.stat-item__value--warning {
 color: var(--color-warning);
}

.stat-item__value--success {
 color: var(--color-success);
}

.stat-item__label {
 font-size: var(--text-xs, 12px);
 color: var(--color-text-muted);
 text-transform: uppercase;
 letter-spacing: 0.05em;
}

/* Alert Card */
.alert-card {
 background: var(--card-bg, var(--color-surface-elevated));
 border: 1px solid var(--color-danger);
 border-left: 4px solid var(--color-danger);
 border-radius: var(--radius-base, 12px);
 padding: 16px;
 display: flex;
 align-items: flex-start;
 gap: 12px;
 animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.alert-card__icon {
 flex-shrink: 0;
 width: 40px;
 height: 40px;
 background: var(--color-danger-light);
 border-radius: var(--radius-base, 12px);
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--color-danger);
}

.alert-card__content {
 flex: 1;
}

.alert-card__title {
 font-size: var(--text-base, 16px);
 font-weight: var(--font-semibold, 600);
 color: var(--color-text);
 margin-bottom: 4px;
}

.alert-card__text {
 font-size: var(--text-sm, 14px);
 color: var(--color-text-muted);
}

/* Widget base */
.widget {
 background: var(--card-bg, var(--color-surface-elevated));
 border: 1px solid var(--card-border, var(--color-border));
 border-radius: var(--radius-base, 12px);
 overflow: hidden;
}

.widget__header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 16px;
 border-bottom: 1px solid var(--color-border-subtle);
}

.widget__title {
 font-size: var(--text-base, 16px);
 font-weight: var(--font-semibold, 600);
 color: var(--color-text);
}

.widget__action {
 font-size: var(--text-sm, 14px);
 color: var(--color-primary);
 font-weight: var(--font-medium, 500);
}

.widget__content {
 padding: 16px;
}

/* Forum Preview Widget */
.forum-preview__item {
 display: flex;
 flex-direction: column;
 gap: 4px;
 padding: 12px 0;
 border-bottom: 1px solid var(--color-border-subtle);
}

.forum-preview__item:last-child {
 border-bottom: none;
}

.forum-preview__title {
 font-size: var(--text-sm, 14px);
 font-weight: var(--font-medium, 500);
 color: var(--color-text);
 line-height: 1.4;
}

.forum-preview__meta {
 font-size: var(--text-xs, 12px);
 color: var(--color-text-muted);
}

/* Pending Reports Widget */
.pending-list__item {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 12px;
 background: var(--color-surface);
 border-radius: var(--radius-base, 12px);
 margin-bottom: 8px;
}

.pending-list__item:last-child {
 margin-bottom: 0;
}

.pending-list__icon {
 width: 40px;
 height: 40px;
 border-radius: var(--radius-base, 12px);
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
}

.pending-list__icon--zagrozenie {
 background: var(--color-danger-light);
 color: var(--color-danger);
}

.pending-list__icon--wydarzenie {
 background: var(--color-info-light);
 color: var(--color-info);
}

.pending-list__content {
 flex: 1;
 min-width: 0;
}

.pending-list__title {
 font-size: var(--text-sm, 14px);
 font-weight: var(--font-medium, 500);
 color: var(--color-text);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.pending-list__meta {
 font-size: var(--text-xs, 12px);
 color: var(--color-text-muted);
}

.pending-list__actions {
 display: flex;
 gap: 8px;
}

.pending-list__btn {
 width: 32px;
 height: 32px;
 border-radius: var(--radius-base, 12px);
 display: flex;
 align-items: center;
 justify-content: center;
}

.pending-list__btn--approve {
 background: var(--color-success-light);
 color: var(--color-success);
}

.pending-list__btn--reject {
 background: var(--color-danger-light);
 color: var(--color-danger);
}

/* Map Widget */
.map-widget {
 height: 220px;
 border-radius: var(--radius-base, 12px);
 overflow: hidden;
 background: var(--color-surface-pressed);
}

.map-widget__placeholder {
 width: 100%;
 height: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 color: var(--color-text-muted);
 gap: 8px;
}

/* Pull to refresh */
.ptr-container {
 position: relative;
 overflow: hidden;
}

.ptr-indicator {
 position: absolute;
 top: -50px;
 left: 50%;
 transform: translateX(-50%);
 width: 40px;
 height: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity 200ms ease;
}

.ptr-indicator--visible {
 opacity: 1;
}

.ptr-indicator__spinner {
 width: 24px;
 height: 24px;
 border: 2px solid var(--color-border);
 border-top-color: var(--color-primary);
 border-radius: 50%;
 animation: spin 1s linear infinite;
}

/* Responsive */
@media (min-width: 768px) {
 .dashboard-grid {
  grid-template-columns: 1fr 1fr;
 }

 .stats-strip {
  grid-column: 1 / -1;
 }

 .alert-card {
  grid-column: 1 / -1;
 }
}

@media (min-width: 1024px) {
 .dashboard-grid {
  grid-template-columns: 1fr 1fr 1fr;
 }

 .stats-strip {
  grid-column: 1 / -1;
 }

 .alert-card {
  grid-column: 1 / -1;
 }
}


/* === Commander === */
/* Commander panel styles */

/* Sub Navigation */
.commander-nav {
 display: flex;
 gap: 8px;
 padding: 12px 16px;
 background: var(--color-surface-elevated);
 border-bottom: 1px solid var(--color-border);
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: none;
 position: sticky;
 top: 56px;
 z-index: 10;
}

.commander-nav::-webkit-scrollbar {
 display: none;
}

.commander-nav__item {
 flex-shrink: 0;
 padding: 8px 16px;
 background: transparent;
 border: 1px solid var(--color-border);
 border-radius: var(--radius-pill, 999px);
 font-size: var(--text-sm, 14px);
 font-weight: var(--font-medium, 500);
 color: var(--color-text);
 white-space: nowrap;
 transition: all var(--transition-fast, 150ms ease);
}

.commander-nav__item:hover {
 border-color: var(--color-primary);
}

.commander-nav__item--active {
 background: var(--color-primary);
 border-color: var(--color-primary);
 color: #fff;
}

/* Commander Dashboard */
.commander-dashboard {
 padding: 16px;
}

.commander-dashboard__section {
 margin-bottom: 24px;
}

.commander-dashboard__title {
 font-size: var(--text-base, 16px);
 font-weight: var(--font-semibold, 600);
 color: var(--color-text);
 margin-bottom: 12px;
}

/* Stats Grid */
.commander-stats {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 12px;
}

.commander-stat {
 background: var(--card-bg, var(--color-surface-elevated));
 border: 1px solid var(--card-border, var(--color-border));
 border-radius: var(--radius-base, 12px);
 padding: 16px;
 text-align: center;
}

.commander-stat__value {
 font-size: var(--text-2xl, 32px);
 font-weight: var(--font-bold, 700);
 color: var(--color-text);
 line-height: 1;
 margin-bottom: 4px;
}

.commander-stat__label {
 font-size: var(--text-xs, 12px);
 color: var(--color-text-muted);
 text-transform: uppercase;
 letter-spacing: 0.05em;
}

/* Chart Container */
.commander-chart {
 background: var(--card-bg, var(--color-surface-elevated));
 border: 1px solid var(--card-border, var(--color-border));
 border-radius: var(--radius-base, 12px);
 padding: 16px;
 margin-bottom: 16px;
}

.commander-chart__title {
 font-size: var(--text-base, 16px);
 font-weight: var(--font-semibold, 600);
 color: var(--color-text);
 margin-bottom: 16px;
}

.commander-chart__canvas {
 width: 100%;
 height: 200px;
}

/* Patrol List */
.patrol-list {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.patrol-item {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 12px;
 background: var(--color-surface-elevated);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-base, 12px);
}

.patrol-item__avatar {
 position: relative;
 flex-shrink: 0;
}

.patrol-item__status {
 position: absolute;
 bottom: 0;
 right: 0;
 width: 10px;
 height: 10px;
 border-radius: 50%;
 border: 2px solid var(--color-surface-elevated);
}

.patrol-item__status--online {
 background: var(--color-online);
}

.patrol-item__status--offline {
 background: var(--color-offline);
}

.patrol-item__info {
 flex: 1;
 min-width: 0;
}

.patrol-item__name {
 font-size: var(--text-sm, 14px);
 font-weight: var(--font-semibold, 600);
 color: var(--color-text);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.patrol-item__role {
 font-size: 11px;
 color: var(--color-text-muted);
}

.patrol-item__last-active {
 font-size: 11px;
 color: var(--color-text-muted);
}

.patrol-item__actions {
 display: flex;
 gap: 8px;
}

.patrol-item__btn {
 width: 36px;
 height: 36px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: var(--radius-base, 12px);
 color: var(--color-text-muted);
}

.patrol-item__btn:hover {
 background: var(--color-surface-pressed);
 color: var(--color-text);
}

/* Filter tabs */
.patrol-filters {
 display: flex;
 gap: 8px;
 padding: 0 16px 16px;
 border-bottom: 1px solid var(--color-border-subtle);
 margin-bottom: 16px;
}

.patrol-filter {
 padding: 6px 14px;
 background: var(--color-surface-elevated);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-pill, 999px);
 font-size: var(--text-xs, 12px);
 font-weight: var(--font-medium, 500);
 color: var(--color-text);
}

.patrol-filter--active {
 background: var(--color-primary);
 border-color: var(--color-primary);
 color: #fff;
}

/* Broadcast Form */
.broadcast-form {
 background: var(--card-bg, var(--color-surface-elevated));
 border: 1px solid var(--card-border, var(--color-border));
 border-radius: var(--radius-base, 12px);
 padding: 16px;
}

.broadcast-form__field {
 margin-bottom: 16px;
}

.broadcast-form__label {
 display: block;
 font-size: var(--text-sm, 14px);
 font-weight: var(--font-semibold, 600);
 color: var(--color-text);
 margin-bottom: 8px;
}

.broadcast-form__textarea {
 width: 100%;
 min-height: 120px;
 padding: 12px 16px;
 background: var(--color-surface);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-base, 12px);
 font-size: var(--text-sm, 14px);
 resize: vertical;
}

.broadcast-form__textarea:focus {
 border-color: var(--color-primary);
 outline: none;
}

.broadcast-form__options {
 display: flex;
 flex-direction: column;
 gap: 8px;
 margin-bottom: 16px;
}

.broadcast-form__option {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 10px;
 background: var(--color-surface);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-base, 12px);
 cursor: pointer;
}

.broadcast-form__option--selected {
 border-color: var(--color-primary);
 background: var(--color-primary-muted);
}

.broadcast-form__radio {
 width: 18px;
 height: 18px;
 accent-color: var(--color-primary);
}

.broadcast-form__option-label {
 font-size: var(--text-sm, 14px);
 color: var(--color-text);
}

/* Analytics Period Picker */
.analytics-period {
 display: flex;
 gap: 8px;
 padding: 16px;
 background: var(--color-surface-elevated);
 border-bottom: 1px solid var(--color-border);
}

.analytics-period__btn {
 flex: 1;
 padding: 8px 12px;
 background: transparent;
 border: 1px solid var(--color-border);
 border-radius: var(--radius-base, 12px);
 font-size: var(--text-sm, 14px);
 color: var(--color-text);
}

.analytics-period__btn--active {
 background: var(--color-primary);
 border-color: var(--color-primary);
 color: #fff;
}

/* Export buttons */
.analytics-exports {
 display: flex;
 gap: 12px;
 padding: 16px;
}

.analytics-exports__btn {
 flex: 1;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 12px;
 background: var(--color-surface-elevated);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-base, 12px);
 font-size: var(--text-sm, 14px);
 font-weight: var(--font-medium, 500);
 color: var(--color-text);
}

.analytics-exports__btn:hover {
 border-color: var(--color-primary);
}

/* Heatmap legend */
.heatmap-legend {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 12px 16px;
 font-size: var(--text-xs, 12px);
 color: var(--color-text-muted);
}

.heatmap-legend__gradient {
 flex: 1;
 height: 8px;
 background: linear-gradient(to right, hsl(138 20% 90%), hsl(138 75% 35%));
 border-radius: 4px;
}

/* Responsive */
@media (min-width: 768px) {
 .commander-stats {
  grid-template-columns: repeat(4, 1fr);
 }

 .commander-dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
 }

 .commander-dashboard__section--full {
  grid-column: 1 / -1;
 }
}


/* === App Shell === */
/* App shell layout with top bar, bottom nav, FAB and main content */

/* App shell container */
#app-shell {
 display: flex;
 flex-direction: column;
 height: 100vh;
 height: 100dvh;
 max-width: 100vw;
 overflow: hidden;
}

/* Top App Bar */
.top-bar {
 position: sticky;
 top: 0;
 z-index: 100;
 height: 56px;
 display: flex;
 align-items: center;
 gap: 12px;
 background: var(--appbar-bg, var(--color-primary));
 color: var(--appbar-text, #fff);
 padding: 0 16px;
 padding-top: env(safe-area-inset-top);
 box-shadow: 0 2px 8px hsl(0 0% 0% / 0.15);
}

.top-bar__back {
 flex-shrink: 0;
 width: 40px;
 height: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: var(--radius-base, 12px);
 color: inherit;
}

.top-bar__back:hover {
 background: hsl(0 0% 100% / 0.1);
}

.top-bar__title {
 flex: 1;
 font-size: var(--text-lg, 20px);
 font-weight: var(--font-semibold, 600);
 margin: 0;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.top-bar__actions {
 display: flex;
 align-items: center;
 gap: 8px;
}

.top-bar__region {
 font-size: var(--text-sm, 14px);
 opacity: 0.9;
 max-width: 100px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.top-bar__icon-btn {
 position: relative;
 width: 40px;
 height: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: var(--radius-base, 12px);
 color: inherit;
}

.top-bar__icon-btn:hover {
 background: hsl(0 0% 100% / 0.1);
}

/* Main Content Area */
#main {
 flex: 1;
 overflow-y: auto;
 overflow-x: hidden;
 -webkit-overflow-scrolling: touch;
 display: flex;
 flex-direction: column;
}

/* Screen container */
.screen {
 display: none;
 width: 100%;
 max-width: 600px;
 margin: 0 auto;
 padding: 16px;
 box-sizing: border-box;
}

.screen--active {
 display: block;
}

/* Bottom Navigation */
.bottom-nav {
 flex-shrink: 0;
 z-index: 100;
 height: calc(56px + env(safe-area-inset-bottom));
 padding-bottom: env(safe-area-inset-bottom);
 background: var(--nav-bg, var(--color-surface-elevated));
 border-top: 1px solid var(--nav-border, var(--color-border));
 display: grid;
 grid-template-columns: repeat(5, 1fr);
}

.bottom-nav__item {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 4px;
 padding: 8px 4px;
 color: var(--nav-inactive, var(--color-text-muted));
 font-size: 11px;
 font-weight: var(--font-medium, 500);
 transition: color var(--transition-fast, 150ms ease);
}

.bottom-nav__item:hover {
 color: var(--nav-active, var(--color-primary));
}

.bottom-nav__item--active {
 color: var(--nav-active, var(--color-primary));
}

.bottom-nav__item .icon {
 width: 24px;
 height: 24px;
}

/* Floating Action Button */
.fab-container {
 position: fixed;
 bottom: calc(72px + env(safe-area-inset-bottom));
 right: 16px;
 z-index: 200;
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 gap: 12px;
}

.fab {
 width: 56px;
 height: 56px;
 border-radius: 50%;
 background: var(--color-primary);
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 4px 16px hsl(var(--hue-primary) 45% 35% / 0.4);
 transition: transform var(--transition-base, 200ms ease), box-shadow var(--transition-base, 200ms ease);
}

.fab:hover {
 transform: scale(1.05);
 box-shadow: 0 6px 20px hsl(var(--hue-primary) 45% 35% / 0.5);
}

.fab:active {
 transform: scale(0.95);
}

.fab--open {
 transform: rotate(45deg);
}

/* Speed dial menu */
.speed-dial {
 display: flex;
 flex-direction: column;
 gap: 12px;
 align-items: flex-end;
}

.speed-dial__item {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 10px 16px;
 background: var(--color-surface-elevated);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-pill, 999px);
 box-shadow: var(--card-shadow, 0 2px 8px hsl(0 0% 0% / 0.08));
 font-size: var(--text-sm, 14px);
 font-weight: var(--font-medium, 500);
 color: var(--color-text);
 white-space: nowrap;
 opacity: 0;
 transform: translateY(20px);
 transition: opacity var(--transition-base, 200ms ease), transform var(--transition-base, 200ms ease);
}

.speed-dial:not([hidden]) .speed-dial__item {
 opacity: 1;
 transform: translateY(0);
}

.speed-dial:not([hidden]) .speed-dial__item:nth-child(1) { transition-delay: 0ms; }
.speed-dial:not([hidden]) .speed-dial__item:nth-child(2) { transition-delay: 50ms; }
.speed-dial:not([hidden]) .speed-dial__item:nth-child(3) { transition-delay: 100ms; }

/* Modals portal */
#modals-portal {
 position: fixed;
 inset: 0;
 z-index: 1000;
 pointer-events: none;
}

#modals-portal > * {
 pointer-events: auto;
}

/* Auth screen */
.auth-screen {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 min-height: 100vh;
 padding: 24px;
 background: var(--color-surface);
}

.auth-screen__logo {
 width: 80px;
 height: 80px;
 margin-bottom: 24px;
}

.auth-screen__title {
 font-size: var(--text-2xl, 32px);
 font-weight: var(--font-bold, 700);
 color: var(--color-text);
 margin-bottom: 8px;
 text-align: center;
}

.auth-screen__subtitle {
 font-size: var(--text-base, 16px);
 color: var(--color-text-muted);
 margin-bottom: 32px;
 text-align: center;
}

.auth-screen__form {
 width: 100%;
 max-width: 360px;
 display: flex;
 flex-direction: column;
 gap: 16px;
}

/* Voivodeship select screen */
.voivodeship-select {
 display: flex;
 flex-direction: column;
 min-height: 100vh;
 padding: 24px;
 background: var(--color-surface);
}

.voivodeship-select__title {
 font-size: var(--text-xl, 24px);
 font-weight: var(--font-semibold, 600);
 color: var(--color-text);
 margin-bottom: 8px;
}

.voivodeship-select__subtitle {
 font-size: var(--text-sm, 14px);
 color: var(--color-text-muted);
 margin-bottom: 24px;
}

.voivodeship-select__grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
 gap: 12px;
}

.voivodeship-select__item {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 16px 12px;
 background: var(--color-surface-elevated);
 border: 2px solid var(--color-border);
 border-radius: var(--radius-base, 12px);
 text-align: center;
 transition: all var(--transition-fast, 150ms ease);
}

.voivodeship-select__item:hover {
 border-color: var(--color-primary);
 transform: translateY(-2px);
}

.voivodeship-select__item--selected {
 border-color: var(--color-primary);
 background: var(--color-primary-muted);
}

/* Responsive - hide bottom nav on desktop */
@media (min-width: 1024px) {
 .bottom-nav {
  display: none;
 }

 .fab-container {
  bottom: 24px;
 }
}


/* === Responsive Layout === */
/* Responsive layout - Mobile first approach */

/* Base styles (Mobile: 320px+) */
:root {
 --container-max: 100%;
 --sidebar-width: 0px;
}

body {
 max-width: var(--container-max);
 margin: 0 auto;
}

/* Hide desktop-only elements */
.sidebar-nav {
 display: none;
}

/* Tablet (768px+) */
@media (min-width: 768px) {
 :root {
  --container-max: 768px;
 }

 /* Chat split view */
 .chat-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  height: 100%;
 }

 .chat-layout__sidebar {
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
 }

 .chat-layout__main {
  display: flex;
  flex-direction: column;
 }

 /* Dashboard 2 columns */
 .dashboard-grid {
  grid-template-columns: 1fr 1fr;
 }

 .stats-strip {
  grid-column: 1 / -1;
 }

 .alert-card {
  grid-column: 1 / -1;
 }

 /* Forum with sidebar */
 .forum-layout {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 16px;
 }

 .forum-layout__sidebar {
  display: block;
 }

 /* Commander dashboard */
 .commander-dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
 }

 .commander-dashboard__section--full {
  grid-column: 1 / -1;
 }

 /* Larger padding */
 .screen {
  padding: 24px;
 }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
 :root {
  --container-max: 1200px;
  --sidebar-width: 240px;
 }

 body {
  display: flex;
 }

 /* Show sidebar navigation */
 .sidebar-nav {
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  height: 100vh;
  position: sticky;
  top: 0;
  background: var(--color-surface-elevated);
  border-right: 1px solid var(--color-border);
  padding: 24px 16px;
  overflow-y: auto;
 }

 .sidebar-nav__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px 24px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
 }

 .sidebar-nav__logo-icon {
  width: 40px;
  height: 40px;
  background: var(--color-primary);
  border-radius: var(--radius-base, 12px);
  display: flex;
  align-items: center;
 justify-content: center;
  color: #fff;
 }

 .sidebar-nav__logo-text {
  font-size: var(--text-lg, 20px);
  font-weight: var(--font-bold, 700);
  color: var(--color-text);
 }

 .sidebar-nav__menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
 }

 .sidebar-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-base, 12px);
  color: var(--color-text-muted);
  font-size: var(--text-sm, 14px);
  font-weight: var(--font-medium, 500);
  transition: all var(--transition-fast, 150ms ease);
 }

 .sidebar-nav__item:hover {
  background: var(--color-surface-pressed);
  color: var(--color-text);
 }

 .sidebar-nav__item--active {
  background: var(--color-primary-muted);
  color: var(--color-primary);
 }

 .sidebar-nav__item .icon {
  width: 24px;
  height: 24px;
 }

 .sidebar-nav__footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
 }

 /* Hide bottom navigation on desktop */
 .bottom-nav {
  display: none;
 }

 /* Adjust main content */
 #main {
  flex: 1;
  overflow-y: auto;
 }

 /* FAB position adjustment */
 .fab-container {
  bottom: 24px;
  right: 24px;
 }

 /* Dashboard 3 columns */
 .dashboard-grid {
  grid-template-columns: 1fr 1fr 1fr;
 }

 .stats-strip {
  grid-column: 1 / -1;
 }

 .alert-card {
  grid-column: 1 / -1;
 }

 /* Forum layout */
 .forum-layout {
  grid-template-columns: 1fr 280px;
 }

 /* Commander 4 column stats */
 .commander-stats {
  grid-template-columns: repeat(4, 1fr);
 }

 /* Larger screens */
 .screen {
  padding: 32px;
 }
}

/* Large Desktop (1440px+) */
@media (min-width: 1440px) {
 :root {
  --container-max: 1400px;
 }

 .dashboard-grid {
  gap: 24px;
 }

 .forum-layout {
  grid-template-columns: 1fr 320px;
 }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
 .btn:hover {
  transform: none;
 }

 .card--interactive:hover {
  transform: none;
 }

 /* Larger touch targets */
 .bottom-nav__item {
  min-height: 56px;
 }

 .btn {
  min-height: 44px;
 }
}

/* Print styles */
@media print {
 .top-bar,
 .bottom-nav,
 .fab-container,
 .sidebar-nav {
  display: none !important;
 }

 #main {
  padding: 0;
  max-height: none;
 }

 .card {
  break-inside: avoid;
  box-shadow: none;
  border: 1px solid #ccc;
 }
}


/* ============================================================
   MISSING STYLES — bridging HTML/JS class names to CSS
   ============================================================ */

/* === Layout: screen-scroll, app-header, nav-item, sections === */

.screen-scroll {
 display: flex;
 flex-direction: column;
 gap: 16px;
 padding: 4px 0 24px;
}

.screen-scroll--fill {
 flex: 1;
}

.screen-credit {
 margin-top: auto;
 padding-top: 12px;
 font-size: 12px;
 line-height: 1.4;
 text-align: center;
 color: var(--color-text-muted);
 opacity: 0.85;
}

.screen-credit a {
 color: var(--color-text);
 font-weight: var(--font-medium, 500);
 text-decoration: none;
 transition: color var(--transition-fast);
}

.screen-credit a:hover {
 color: var(--color-primary);
 text-decoration: underline;
}

/* Screen active state (JS uses .active not --active) */
.screen.active { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* Chat screen fills available height */
#chat .screen-scroll { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* App header */
#app-header {
 flex-shrink: 0;
 z-index: 100;
 height: 56px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 background: var(--appbar-bg, var(--color-primary));
 color: var(--appbar-text, #fff);
 padding: 0 16px;
 padding-top: env(safe-area-inset-top);
 box-shadow: 0 2px 8px hsl(0 0% 0% / 0.15);
}

.header-copy { display: flex; flex-direction: column; }
.header-kicker { font-size: var(--text-xs, 12px); opacity: 0.8; letter-spacing: 0.05em; text-transform: uppercase; }
.header-copy h1 { font-size: var(--text-lg, 20px); font-weight: var(--font-bold, 700); line-height: 1.2; }

.header-actions { display: flex; align-items: center; gap: 8px; }
.header-region { font-size: var(--text-sm, 14px); opacity: 0.85; max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.header-icon {
 position: relative;
 width: 40px;
 height: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: var(--radius-base, 12px);
 color: inherit;
}
.header-icon:hover { background: hsl(0 0% 100% / 0.12); }
.header-icon__glyph { width: 24px; height: 24px; }
.commander-shortcut { border: 1px solid hsl(0 0% 100% / 0.14); }
.commander-shortcut:hover { border-color: hsl(0 0% 100% / 0.24); }

.bell-count {
 position: absolute;
 top: 2px;
 right: 2px;
 min-width: 18px;
 height: 18px;
 padding: 0 5px;
 background: var(--color-danger);
 color: #fff;
 font-size: 10px;
 font-weight: var(--font-bold, 700);
 border-radius: 9px;
 display: flex;
 align-items: center;
 justify-content: center;
 line-height: 1;
}

@keyframes notification-bounce {
 0%, 100% { transform: scale(1); }
 50% { transform: scale(1.25); }
}
.notification-bounce { animation: notification-bounce 0.4s ease; }

/* Bottom nav — bridge .nav-item to .bottom-nav__item styles */
.nav-item {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 2px;
 padding: 6px 4px;
 color: var(--nav-inactive, var(--color-text-muted));
 font-size: 11px;
 font-weight: var(--font-medium, 500);
 transition: color var(--transition-fast, 150ms ease);
 position: relative;
}
.nav-item:hover { color: var(--nav-active, var(--color-primary)); }
.nav-item.active { color: var(--nav-active, var(--color-primary)); }

.nav-item__pill {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 56px;
 height: 32px;
 border-radius: var(--radius-pill, 999px);
 transition: background var(--transition-fast, 150ms ease);
}
.nav-item.active .nav-item__pill { background: var(--color-primary-muted); }

.nav-item__icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.nav-item__label { line-height: 1; }

.nav-item__badge {
 position: absolute;
 top: 0;
 right: 4px;
 min-width: 16px;
 height: 16px;
 padding: 0 4px;
 background: var(--color-danger);
 color: #fff;
 font-size: 9px;
 font-weight: var(--font-bold, 700);
 border-radius: 8px;
 display: flex;
 align-items: center;
 justify-content: center;
 line-height: 1;
}

/* Section headings */
.section-heading {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 12px;
}
.section-heading--split { align-items: center; }
.section-heading--tight { margin-bottom: 12px; }
.section-heading h2 { font-size: var(--text-xl, 24px); font-weight: var(--font-bold, 700); color: var(--color-text); }
.section-heading h3 { font-size: var(--text-lg, 20px); font-weight: var(--font-semibold, 600); color: var(--color-text); }

.section-eyebrow {
 font-size: var(--text-xs, 12px);
 font-weight: var(--font-semibold, 600);
 color: var(--color-primary);
 text-transform: uppercase;
 letter-spacing: 0.05em;
 margin-bottom: 2px;
}

.section-pill {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 24px;
 height: 24px;
 padding: 0 8px;
 background: var(--color-primary);
 color: #fff;
 font-size: var(--text-xs, 12px);
 font-weight: var(--font-bold, 700);
 border-radius: var(--radius-pill, 999px);
}

.section-actions { display: flex; align-items: center; gap: 8px; }
.pending-panel { margin-bottom: 8px; }

.centered { text-align: center; }

/* Icon slots */
.icon-slot { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }


/* === Forms: floating-field, field-error, field-help, field-group === */

.field {
 position: relative;
 display: flex;
 flex-direction: column;
 gap: 4px;
 margin-bottom: 16px;
}

.floating-field {
 position: relative;
}

.floating-field input,
.floating-field textarea,
.floating-field select {
 width: 100%;
 padding: 20px 16px 8px;
 font-size: var(--text-base, 16px);
 line-height: 1.5;
 background: var(--input-bg, var(--color-surface-elevated));
 border: 1px solid var(--input-border, var(--color-border));
 border-radius: var(--radius-base, 12px);
 color: var(--color-text);
 transition: border-color var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
}

.floating-field input:focus,
.floating-field textarea:focus,
.floating-field select:focus {
 border-color: var(--input-border-focus, var(--color-primary));
 box-shadow: var(--input-focus-ring);
 outline: none;
}

.floating-field label {
 position: absolute;
 left: 16px;
 top: 50%;
 transform: translateY(-50%);
 font-size: var(--text-sm, 14px);
 color: var(--color-text-muted);
 pointer-events: none;
 transition: all var(--transition-fast, 150ms ease);
 background: var(--input-bg, var(--color-surface-elevated));
 padding: 0 4px;
}

.floating-field input:focus + label,
.floating-field input:not(:placeholder-shown) + label,
.floating-field textarea:focus + label,
.floating-field textarea:not(:placeholder-shown) + label,
.floating-field select:focus + label,
.floating-field select:not([value=""]):valid + label {
 top: 6px;
 transform: translateY(0);
 font-size: var(--text-xs, 12px);
 color: var(--color-primary);
}

/* Select always has a value so float label when option selected */
.floating-field--select label {
 top: 6px;
 transform: translateY(0);
 font-size: var(--text-xs, 12px);
}

.floating-field--select select {
 appearance: none;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: right 14px center;
 padding-right: 36px;
}

.floating-field--textarea label { top: 20px; transform: none; }
.floating-field--textarea textarea:focus + label,
.floating-field--textarea textarea:not(:placeholder-shown) + label {
 top: 6px;
}
.floating-field--textarea textarea { min-height: 100px; resize: vertical; }

.field-error {
 font-size: var(--text-xs, 12px);
 color: var(--color-danger);
 min-height: 0;
 transition: min-height var(--transition-fast);
}
.field-error:not(:empty) { min-height: 18px; margin-top: 4px; }

.field-help {
 font-size: var(--text-xs, 12px);
 color: var(--color-text-muted);
 margin-top: 4px;
}

.field-group {
 display: flex;
 flex-direction: column;
 gap: 8px;
 margin-bottom: 16px;
}
.field-group__label { font-size: var(--text-sm, 14px); font-weight: var(--font-semibold, 600); color: var(--color-text); }
.field-group__hint { font-size: var(--text-xs, 12px); color: var(--color-text-muted); }

/* Hidden file input */
input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }


/* === Buttons: cta, ghost, danger, icon, auth === */

.cta-button {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 width: 100%;
 padding: 14px 24px;
 background: var(--color-primary);
 color: #fff;
 font-size: var(--text-base, 16px);
 font-weight: var(--font-semibold, 600);
 border-radius: var(--radius-pill, 999px);
 border: none;
 cursor: pointer;
 transition: all var(--transition-fast, 150ms ease);
 position: relative;
 overflow: hidden;
}
.cta-button:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.cta-button:active:not(:disabled) { transform: scale(0.98); }
.cta-button:disabled { opacity: 0.45; cursor: not-allowed; }
.cta-button--compact { width: auto; padding: 10px 18px; font-size: var(--text-sm, 14px); }
.cta-button--submit { position: relative; }
.cta-button--submit.is-loading .button-text { opacity: 0; }
.cta-button--submit.is-loading .button-spinner { display: block; }
.cta-button--submit.is-success .button-text { opacity: 0; }
.cta-button--submit.is-success .button-check { display: block; }
.button-spinner {
 display: none;
 position: absolute;
 inset: 0;
 margin: auto;
 width: 20px;
 height: 20px;
 border: 2px solid hsl(0 0% 100% / 0.3);
 border-top-color: #fff;
 border-radius: 50%;
 animation: spin 0.8s linear infinite;
}
.button-check { display: none; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; text-align: center; line-height: 20px; }

.ghost-button {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 12px 20px;
 background: transparent;
 color: var(--color-text-muted);
 font-size: var(--text-sm, 14px);
 font-weight: var(--font-medium, 500);
 border: none;
 border-radius: var(--radius-pill, 999px);
 cursor: pointer;
 transition: all var(--transition-fast);
}
.ghost-button:hover { background: var(--color-surface-pressed); color: var(--color-text); }

.danger-button {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 padding: 12px 24px;
 background: var(--color-danger);
 color: #fff;
 font-size: var(--text-sm, 14px);
 font-weight: var(--font-semibold, 600);
 border: none;
 border-radius: var(--radius-pill, 999px);
 cursor: pointer;
 transition: all var(--transition-fast);
 margin-top: 8px;
}
.danger-button:hover { filter: brightness(1.1); }

.icon-button {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
 width: 40px;
 height: 40px;
 border: none;
 border-radius: var(--radius-base, 12px);
 cursor: pointer;
 color: var(--color-text-muted);
 background: transparent;
 transition: all var(--transition-fast);
 flex-shrink: 0;
}
.icon-button:hover { background: var(--color-surface-pressed); color: var(--color-text); }
.icon-button--soft { background: var(--color-surface-pressed); }
.icon-button--soft:hover { background: var(--color-border); }
.icon-button--ghost { background: transparent; }
.icon-button--danger { color: var(--color-danger); }
.icon-button--danger:hover { background: var(--color-danger-light); }
.icon-button--gps { width: auto; padding: 10px 16px; background: var(--color-surface-elevated); border: 1px solid var(--color-border); }
.icon-button--gps:hover { border-color: var(--color-primary); color: var(--color-primary); }
.button-label { font-size: var(--text-sm, 14px); font-weight: var(--font-medium, 500); }

.auth-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 padding: 14px 24px;
 background: var(--color-primary);
 color: #fff;
 font-size: var(--text-base, 16px);
 font-weight: var(--font-semibold, 600);
 border: none;
 border-radius: var(--radius-pill, 999px);
 cursor: pointer;
 transition: all var(--transition-fast);
 margin-top: 8px;
}
.auth-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.auth-btn:active { transform: scale(0.98); }

.auth-toggle {
 background: none;
 border: none;
 color: var(--color-primary);
 font-size: var(--text-sm, 14px);
 font-weight: var(--font-medium, 500);
 cursor: pointer;
 padding: 8px;
}
.auth-toggle:hover { text-decoration: underline; }

.new-conv-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 width: 100%;
 padding: 12px;
 background: var(--color-surface-elevated);
 border: 1px dashed var(--color-border);
 border-radius: var(--radius-base, 12px);
 color: var(--color-primary);
 font-size: var(--text-sm, 14px);
 font-weight: var(--font-medium, 500);
 cursor: pointer;
 transition: all var(--transition-fast);
 margin-bottom: 12px;
}
.new-conv-btn:hover { border-color: var(--color-primary); background: var(--color-primary-muted); }


/* === Cards: report-card, pending-card, conversation-card, summary-card, etc. === */

.report-card {
 display: block;
 width: 100%;
 text-align: left;
 background: var(--card-bg, var(--color-surface-elevated));
 border: 1px solid var(--card-border, var(--color-border));
 border-radius: var(--radius-base, 12px);
 padding: 16px;
 margin-bottom: 12px;
 box-shadow: var(--card-shadow);
 cursor: pointer;
 transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.report-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-elevated); }

.report-card__top {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 margin-bottom: 8px;
}
.report-card__title { font-size: var(--text-base, 16px); font-weight: var(--font-semibold, 600); color: var(--color-text); }
.report-card__author { font-size: var(--text-xs, 12px); color: var(--color-text-muted); }

.report-card__desc {
 font-size: var(--text-sm, 14px);
 color: var(--color-text-muted);
 line-height: 1.5;
 margin-bottom: 8px;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

.report-card__meta {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: var(--text-xs, 12px);
 color: var(--color-text-muted);
 flex-wrap: wrap;
}

.report-card__image {
 width: 100%;
 height: 160px;
 object-fit: cover;
 border-radius: 8px;
 margin-top: 8px;
}

.report-skeleton-card {
 background: var(--card-bg, var(--color-surface-elevated));
 border: 1px solid var(--card-border, var(--color-border));
 border-radius: var(--radius-base, 12px);
 padding: 16px;
 margin-bottom: 12px;
}
.report-skeleton-card__top { display: flex; justify-content: space-between; margin-bottom: 12px; }
.report-skeleton-card__meta { display: flex; gap: 8px; margin-top: 8px; }

.pending-card {
 background: var(--card-bg, var(--color-surface-elevated));
 border: 1px solid var(--card-border, var(--color-border));
 border-radius: var(--radius-base, 12px);
 padding: 16px;
 margin-bottom: 12px;
 box-shadow: var(--card-shadow);
 position: relative;
 overflow: hidden;
}

.pending-card__top {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 margin-bottom: 8px;
}

.pending-actions {
 display: flex;
 gap: 8px;
 margin-top: 12px;
}

/* Swipe actions for pending cards */
.swipe-actions {
 position: absolute;
 right: 0;
 top: 0;
 bottom: 0;
 display: flex;
 transform: translateX(100%);
 transition: transform var(--transition-fast);
}
.is-swiped .swipe-actions { transform: translateX(0); }
.swipe-approve,
.swipe-reject {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 64px;
 color: #fff;
 font-size: var(--text-xs, 12px);
 font-weight: var(--font-semibold, 600);
}
.swipe-approve { background: var(--color-success); }
.swipe-reject { background: var(--color-danger); }

.conversation-card {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 14px 16px;
 border-bottom: 1px solid var(--color-border-subtle);
 cursor: pointer;
 transition: background var(--transition-fast);
}
.conversation-card:hover { background: var(--color-surface-pressed); }

.conversation-card__top {
 flex: 1;
 min-width: 0;
 display: flex;
 flex-direction: column;
 gap: 2px;
}

.conversation-card__avatar {
 flex-shrink: 0;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background: var(--color-border);
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: var(--font-bold, 700);
 color: var(--color-text-muted);
 position: relative;
}

.avatar-dot {
 position: absolute;
 bottom: 0;
 right: 0;
 width: 10px;
 height: 10px;
 border-radius: 50%;
 border: 2px solid var(--color-surface-elevated);
 background: var(--color-online);
}

.comment-item {
 display: flex;
 flex-direction: column;
 gap: 4px;
 padding: 12px 0;
 border-bottom: 1px solid var(--color-border-subtle);
}
.comment-item:last-child { border-bottom: none; }
.comment-author { font-size: var(--text-sm, 14px); font-weight: var(--font-semibold, 600); color: var(--color-text); }
.comment-time { font-size: 11px; color: var(--color-text-muted); }

.summary-card {
 background: var(--color-surface-elevated);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-base, 12px);
 padding: 20px;
}

.summary-empty {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 padding: 24px 16px;
 color: var(--color-text-muted);
}
.summary-empty__icon { font-size: 40px; margin-bottom: 12px; }
.summary-empty p { font-size: var(--text-sm, 14px); }

.map-card {
 background: var(--card-bg, var(--color-surface-elevated));
 border: 1px solid var(--card-border, var(--color-border));
 border-radius: var(--radius-base, 12px);
 overflow: hidden;
}
.map-card__header { padding: 16px 16px 12px; }

.map-shell { height: 220px; border-radius: var(--radius-base, 12px); overflow: hidden; background: var(--color-surface-pressed); }
.map-shell--large { height: 300px; }
.map-shell--detail { height: 200px; }

.coords-pill {
 display: inline-flex;
 align-items: center;
 padding: 6px 12px;
 background: var(--color-surface-elevated);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-pill, 999px);
 font-size: var(--text-xs, 12px);
 font-family: monospace;
 color: var(--color-text-muted);
 margin-top: 8px;
}

.media-dropzone {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 8px;
 padding: 24px;
 border: 2px dashed var(--color-border);
 border-radius: var(--radius-base, 12px);
 cursor: pointer;
 text-align: center;
 color: var(--color-text-muted);
 font-size: var(--text-sm, 14px);
 transition: all var(--transition-fast);
}
.media-dropzone:hover { border-color: var(--color-primary); background: var(--color-primary-muted); }
.media-dropzone__icon { width: 32px; height: 32px; opacity: 0.5; }
.media-dropzone small { font-size: var(--text-xs, 12px); opacity: 0.7; }

.report-photo-preview {
 position: relative;
 border-radius: var(--radius-base, 12px);
 overflow: hidden;
 margin-top: 8px;
}
.report-photo-preview img { width: 100%; height: 200px; object-fit: cover; }

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


/* === Chat: chat-tab-row, chat-tab, chat-input, chat-panel, chat-header === */

.chat-tab-row {
 display: flex;
 gap: 8px;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: none;
}
.chat-tab-row::-webkit-scrollbar { display: none; }

.chat-tab {
 flex-shrink: 0;
 padding: 8px 16px;
 background: transparent;
 border: 1px solid var(--color-border);
 border-radius: var(--radius-pill, 999px);
 font-size: var(--text-sm, 14px);
 font-weight: var(--font-medium, 500);
 color: var(--color-text);
 white-space: nowrap;
 cursor: pointer;
 transition: all var(--transition-fast);
}
.chat-tab:hover { border-color: var(--color-primary); }
.chat-tab.active {
 background: var(--color-primary);
 border-color: var(--color-primary);
 color: #fff;
}

.chat-panel {
 display: flex;
 flex-direction: column;
 gap: 0;
 flex: 1;
 min-height: 0;
}


/* === Commander panel === */

.commander-screen-scroll { padding-top: 8px; }
.commander-layout { display: flex; flex-direction: column; gap: 16px; }
.commander-hero {
 background:
  radial-gradient(circle at top right, hsl(var(--hue-warning) 90% 65% / 0.18), transparent 34%),
  linear-gradient(135deg, hsl(var(--hue-primary) 48% 18%), hsl(var(--hue-primary) 40% 28%));
 color: #fff;
 border: 1px solid hsl(0 0% 100% / 0.08);
}
.commander-hero .section-eyebrow,
.commander-hero h2,
.commander-hero .section-pill,
.commander-hero .chat-tab { color: inherit; }
.commander-hero .section-pill {
 background: hsl(0 0% 100% / 0.14);
 border: 1px solid hsl(0 0% 100% / 0.12);
}
.commander-hero__description { color: hsl(0 0% 100% / 0.82); font-size: var(--text-sm, 14px); }
.commander-tab-row .chat-tab {
 border-color: hsl(0 0% 100% / 0.18);
 background: hsl(0 0% 100% / 0.04);
}
.commander-tab-row .chat-tab.active {
 background: #fff;
 color: var(--color-primary-dark);
 border-color: #fff;
}
.commander-panel-card { padding: 16px; }
.commander-panel-card--muted { border-style: dashed; }
.commander-stats { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.commander-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.commander-list { display: flex; flex-direction: column; gap: 10px; }
.commander-list--wide { gap: 14px; }
.commander-list-item {
 width: 100%;
 text-align: left;
 background: var(--color-surface);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-base, 12px);
 padding: 14px;
 transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.commander-list-item:hover { border-color: var(--color-primary); transform: translateY(-1px); }
.commander-list-item__top { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.commander-inline-action { width: auto; }
.commander-feature-card { margin-bottom: 16px; }
.commander-feature-card__row {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 align-items: center;
 justify-content: space-between;
 margin-top: 12px;
}
.commander-toolbar {
 display: grid;
 gap: 10px;
 margin-bottom: 16px;
 grid-template-columns: 1fr;
}
.commander-search-input,
.commander-filter-select,
.commander-role-select {
 width: 100%;
 min-height: 44px;
 border: 1px solid var(--color-border);
 border-radius: var(--radius-base, 12px);
 background: var(--input-bg);
 color: var(--color-text);
 padding: 0 14px;
}
.commander-search-input:focus,
.commander-filter-select:focus,
.commander-role-select:focus {
 outline: none;
 border-color: var(--color-primary);
 box-shadow: var(--input-focus-ring);
}
.commander-report-card {
 display: flex;
 flex-direction: column;
 gap: 10px;
 padding: 16px;
 border: 1px solid var(--color-border);
 border-radius: var(--radius-base, 12px);
 background: var(--color-surface);
}
.commander-report-card__header {
 display: flex;
 align-items: start;
 justify-content: space-between;
 gap: 12px;
}
.commander-report-card__actions {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
}
.commander-forum-card {
 display: grid;
 grid-template-columns: auto 1fr;
 gap: 14px;
 align-items: start;
 padding: 16px;
 border: 1px solid var(--color-border);
 border-radius: var(--radius-base, 12px);
 background: var(--color-surface);
}
.commander-bulk-check {
 display: flex;
 flex-direction: column;
 gap: 8px;
 align-items: center;
 color: var(--color-text-muted);
 font-size: 12px;
}
.commander-forum-card__body {
 display: flex;
 flex-direction: column;
 gap: 10px;
}
.commander-forum-card__top {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 align-items: start;
}
.commander-forum-card__actions {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
}
.commander-danger-button {
 min-height: 42px;
 border-radius: var(--radius-base, 12px);
 padding: 0 14px;
}
.commander-users-table {
 display: flex;
 flex-direction: column;
 gap: 12px;
}
.commander-users-table__head {
 display: none;
 color: var(--color-text-muted);
 font-size: 12px;
 text-transform: uppercase;
 letter-spacing: 0.05em;
}
.commander-users-row {
 display: grid;
 gap: 12px;
 padding: 16px;
 border: 1px solid var(--color-border);
 border-radius: var(--radius-base, 12px);
 background: var(--color-surface);
}
.commander-users-cell {
 display: flex;
 flex-direction: column;
 gap: 6px;
 color: var(--color-text);
}
.commander-users-cell--user span,
.commander-users-cell--user small { color: var(--color-text-muted); }
.commander-users-cell--actions {
 flex-direction: row;
 flex-wrap: wrap;
 align-items: center;
}
.commander-pagination {
 display: flex;
 flex-direction: column;
 gap: 10px;
 margin-top: 16px;
 color: var(--color-text-muted);
}
.commander-pagination__actions {
 display: flex;
 gap: 10px;
 flex-wrap: wrap;
}
.commander-analytics-layout {
 display: flex;
 flex-direction: column;
 gap: 16px;
}
.commander-analytics-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 align-items: center;
}
.commander-analytics-grid {
 display: grid;
 gap: 16px;
 grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.commander-chart--full { grid-column: 1 / -1; }
.commander-chart__canvas--heatmap { height: 240px; }
.commander-ban-note {
 color: var(--color-danger);
 font-weight: 600;
}
.commander-users-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.commander-user-card {
 display: flex;
 flex-direction: column;
 gap: 4px;
 padding: 14px;
 border: 1px solid var(--color-border);
 border-radius: var(--radius-base, 12px);
 background: var(--color-surface);
}
.commander-user-card span,
.commander-user-card small,
.commander-copy,
.commander-profile-copy { color: var(--color-text-muted); }
.commander-empty-state { padding: 28px 20px; }
.commander-skeleton-grid { display: grid; gap: 16px; }
.commander-skeleton {
 width: 100%;
 height: 180px;
 border-radius: var(--radius-base, 12px);
}
.commander-skeleton--hero { height: 120px; }

@media (min-width: 860px) {
 .commander-layout { gap: 20px; }
 .commander-panel-card { padding: 20px; }
 .commander-toolbar {
  grid-template-columns: minmax(260px, 1fr) 200px auto auto;
  align-items: center;
 }
 .commander-toolbar--forum {
  grid-template-columns: 200px auto auto auto;
 }
 .commander-users-table__head,
 .commander-users-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(160px, 0.8fr) minmax(150px, 0.8fr) minmax(140px, 0.7fr) minmax(220px, 1fr);
  align-items: center;
 }
 .commander-users-cell--actions {
  justify-content: flex-end;
 }
 .commander-pagination {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
 }
}

.inline-chat-messages {
 flex: 1;
 overflow-y: auto;
 display: flex;
 flex-direction: column;
 gap: 8px;
 padding: 12px 0;
 min-height: 0;
}

.chat-input {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 8px 0;
 border-top: 1px solid var(--color-border-subtle);
 flex-shrink: 0;
}

.chat-input input {
 flex: 1;
 padding: 10px 16px;
 background: var(--color-surface-elevated);
 border: 1px solid var(--color-border);
 border-radius: 20px;
 font-size: var(--text-sm, 14px);
 color: var(--color-text);
}
.chat-input input:focus { border-color: var(--color-primary); outline: none; }
.chat-input input::placeholder { color: var(--color-text-muted); }

.chat-input button {
 width: 40px;
 height: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: var(--color-primary);
 color: #fff;
 border-radius: 50%;
 flex-shrink: 0;
 transition: transform var(--transition-fast);
}
.chat-input button:hover { transform: scale(1.05); }
.chat-input button:active { transform: scale(0.95); }

.chat-header {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 12px 16px;
 border-bottom: 1px solid var(--color-border);
 flex-shrink: 0;
}
.chat-header__title {
 flex: 1;
 font-size: var(--text-base, 16px);
 font-weight: var(--font-semibold, 600);
 color: var(--color-text);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.chat-avatar {
 width: 32px;
 height: 32px;
 border-radius: 50%;
 background: var(--color-border);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 16px;
 flex-shrink: 0;
}

/* Chat message bubbles — bridge .chat-msg/.chat-cluster/.chat-stack */
.chat-cluster { display: flex; gap: 8px; margin-bottom: 4px; }
.chat-cluster--sent { flex-direction: row-reverse; }
.chat-cluster__avatar { flex-shrink: 0; }
.chat-stack { display: flex; flex-direction: column; gap: 2px; max-width: 75%; }
.chat-msg {
 padding: 10px 14px;
 border-radius: 16px;
 font-size: var(--text-sm, 14px);
 line-height: 1.5;
 word-wrap: break-word;
}
.chat-msg.sent { align-self: flex-end; background: var(--color-primary); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.received { align-self: flex-start; background: var(--color-surface-elevated); color: var(--color-text); border: 1px solid var(--color-border); border-bottom-left-radius: 4px; }
.msg-sender { font-size: var(--text-xs, 12px); font-weight: var(--font-semibold, 600); color: var(--color-primary); margin-bottom: 2px; }
.msg-time { font-size: 10px; opacity: 0.7; margin-top: 4px; text-align: right; }

/* Forum filter active state (JS uses .active) */
.forum-filter.active {
 background: var(--color-primary);
 border-color: var(--color-primary);
 color: #fff;
}
.forum-filters--inline { padding-left: 0; padding-right: 0; }
.forum-filters--sheet { flex-wrap: wrap; }


/* === Modals/Sheets === */

.modal {
 display: none;
 position: fixed;
 inset: 0;
 z-index: 1000;
 background: hsl(0 0% 0% / 0.5);
 align-items: flex-end;
 justify-content: center;
}
.modal.active,
.modal[style*="display: flex"],
.modal.modal-backdrop--enter { display: flex; }

.modal-sheet { align-items: flex-end; }

.modal-content {
 width: 100%;
 max-width: 500px;
 max-height: 90vh;
 background: var(--color-surface-elevated);
 border-radius: var(--radius-base, 12px) var(--radius-base, 12px) 0 0;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 animation: slide-up 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sheet-content { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.sheet-content--compact { gap: 12px; }

.sheet-handle {
 width: 36px;
 height: 4px;
 background: var(--color-border);
 border-radius: 2px;
 margin: 12px auto 4px;
 flex-shrink: 0;
}

.sheet-header { padding-top: 4px; }
.sheet-actions { display: flex; gap: 12px; padding-top: 8px; }
.sheet-actions .cta-button,
.sheet-actions .ghost-button { flex: 1; }

.modal-content-with-input {
 display: flex;
 flex-direction: column;
 max-height: 90vh;
}

.modal-scroll-area {
 flex: 1;
 overflow-y: auto;
 padding: 16px 20px;
 -webkit-overflow-scrolling: touch;
}

.modal-bottom-input {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 12px 20px;
 border-top: 1px solid var(--color-border);
 background: var(--color-surface-elevated);
 flex-shrink: 0;
}
.modal-bottom-input input {
 flex: 1;
 padding: 10px 16px;
 background: var(--color-surface);
 border: 1px solid var(--color-border);
 border-radius: 20px;
 font-size: var(--text-sm, 14px);
 color: var(--color-text);
}
.modal-bottom-input input:focus { border-color: var(--color-primary); outline: none; }
.modal-bottom-input input::placeholder { color: var(--color-text-muted); }
.modal-bottom-input button {
 width: 40px;
 height: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: var(--color-primary);
 color: #fff;
 border-radius: 50%;
 flex-shrink: 0;
}


/* === Landing page === */

#landing {
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 100vh;
 padding: 24px;
 background: var(--color-surface);
}

.landing-shell {
 width: 100%;
 max-width: 480px;
 display: flex;
 flex-direction: column;
 gap: 32px;
}

.landing-hero {
 text-align: center;
}

.landing-hero__badge {
 font-size: 64px;
 display: block;
 margin-bottom: 16px;
}

.landing-hero__title {
 font-size: var(--text-3xl, 32px);
 font-weight: var(--font-bold, 700);
 color: var(--color-text);
 margin-bottom: 8px;
}

.landing-hero__tagline {
 font-size: var(--text-base, 16px);
 color: var(--color-text-muted);
 line-height: 1.5;
}

.landing-features {
 display: flex;
 flex-direction: column;
 gap: 16px;
}

.landing-feature {
 background: var(--color-surface-elevated);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-base, 12px);
 padding: 20px;
 box-shadow: var(--card-shadow);
}

.landing-feature__icon {
 font-size: 32px;
 display: block;
 margin-bottom: 12px;
}

.landing-feature__title {
 font-size: var(--text-lg, 18px);
 font-weight: var(--font-bold, 700);
 color: var(--color-text);
 margin-bottom: 6px;
}

.landing-feature__desc {
 font-size: var(--text-sm, 14px);
 color: var(--color-text-muted);
 line-height: 1.5;
}

.landing-cta {
 display: flex;
 flex-direction: column;
 gap: 12px;
 align-items: center;
}

.landing-cta__btn {
 width: 100%;
 padding: 14px 24px;
 background: var(--color-primary);
 color: white;
 border: none;
 border-radius: var(--radius-base, 12px);
 font-size: var(--text-base, 16px);
 font-weight: var(--font-bold, 700);
 cursor: pointer;
 transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.landing-cta__btn:hover {
 transform: translateY(-1px);
 box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.landing-cta__btn:active {
 transform: translateY(0);
}

.landing-cta__link {
 background: none;
 border: none;
 color: var(--color-primary);
 font-size: var(--text-sm, 14px);
 cursor: pointer;
 text-decoration: underline;
 text-underline-offset: 2px;
}

@media (min-width: 640px) {
 .landing-shell {
  max-width: 560px;
 }

 .landing-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
 }

 .landing-feature {
  padding: 24px;
 }
}

/* === Auth: auth-shell, brand-lockup, frosted-card, auth-form === */

#auth-screen {
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 100vh;
 padding: 24px;
 background: var(--color-surface);
}

#voivodeship-select-screen {
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 100vh;
 padding: 24px;
 background: var(--color-surface);
}

.auth-shell {
 width: 100%;
 max-width: 400px;
 display: flex;
 flex-direction: column;
 gap: 24px;
}

.brand-lockup {
 display: flex;
 align-items: center;
 gap: 16px;
 text-align: left;
}
.brand-lockup__badge { font-size: 48px; flex-shrink: 0; }
.brand-lockup h2 { font-size: var(--text-xl, 24px); font-weight: var(--font-bold, 700); color: var(--color-text); }
.brand-lockup p { font-size: var(--text-sm, 14px); color: var(--color-text-muted); margin-top: 4px; line-height: 1.5; }

.frosted-card {
 background: var(--color-surface-elevated);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-base, 12px);
 padding: 24px;
 box-shadow: var(--card-shadow);
 backdrop-filter: blur(12px);
}

.auth-form { display: flex; flex-direction: column; gap: 4px; }
.auth-form--compact { gap: 8px; }
.auth-error { display: none; color: var(--color-danger); font-size: var(--text-sm, 14px); text-align: center; min-height: 0; }
.auth-error:not(:empty) { display: block; padding: 8px; background: var(--color-danger-light); border-radius: 8px; margin-bottom: 8px; }


/* === Badges: status-badge, type-badge === */

.status-badge {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 padding: 2px 10px;
 border-radius: var(--radius-pill, 999px);
 font-size: 11px;
 font-weight: var(--font-bold, 700);
 text-transform: uppercase;
 letter-spacing: 0.025em;
 white-space: nowrap;
}
.status-badge.status-active { background: var(--badge-active-bg); color: var(--badge-active-text); }
.status-badge.status-pending { background: var(--badge-pending-bg); color: var(--badge-pending-text); }
.status-badge.status-rejected { background: var(--badge-rejected-bg); color: var(--badge-rejected-text); }
.status-badge.status-resolved { background: var(--badge-active-bg); color: var(--badge-active-text); }
.status-badge.status-archived { background: var(--color-surface-pressed); color: var(--color-text-muted); }
.status-badge.status-escaped { background: var(--badge-escaped-bg); color: var(--badge-escaped-text); }

.type-badge {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 padding: 2px 10px;
 border-radius: var(--radius-pill, 999px);
 font-size: 11px;
 font-weight: var(--font-bold, 700);
 text-transform: uppercase;
 letter-spacing: 0.025em;
 white-space: nowrap;
}
.type-badge.type-zagrozenie { background: var(--badge-zagrozenie-bg); color: var(--badge-zagrozenie-text); }
.type-badge.type-wydarzenie { background: var(--badge-wydarzenie-bg); color: var(--badge-wydarzenie-text); }


/* === Report detail === */

.report-detail-body {
 padding: 16px 20px;
 display: flex;
 flex-direction: column;
 gap: 16px;
 overflow-y: auto;
}

.report-detail-topline {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
}

.report-detail-desc {
 font-size: var(--text-base, 16px);
 color: var(--color-text);
 line-height: 1.6;
}

.report-detail-meta {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 font-size: var(--text-sm, 14px);
 color: var(--color-text-muted);
}

.report-detail-image-wrap {
 border-radius: var(--radius-base, 12px);
 overflow: hidden;
}
.report-detail-image-wrap img { width: 100%; height: auto; display: block; }

.report-detail-map-card {
 background: var(--color-surface);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-base, 12px);
 overflow: hidden;
}

.report-detail-coords {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 12px 16px;
 font-size: var(--text-sm, 14px);
 color: var(--color-text-muted);
 font-family: monospace;
}

.report-detail-actions { display: flex; gap: 8px; }

/* Post detail */
.post-detail-body {
 display: flex;
 flex-direction: column;
 gap: 16px;
}

.post-detail-content {
 font-size: var(--text-base, 16px);
 color: var(--color-text);
 line-height: 1.7;
}
.post-detail-content p { margin: 0 0 12px; }
.post-detail-content p:last-child { margin-bottom: 0; }

.post-detail-meta {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 font-size: var(--text-sm, 14px);
 color: var(--color-text-muted);
 padding-bottom: 12px;
 border-bottom: 1px solid var(--color-border-subtle);
}


/* === Profile === */

.profile-hero {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 gap: 8px;
 padding: 24px 16px;
}
.profile-hero h2 { font-size: var(--text-xl, 24px); color: var(--color-text); }
.profile-hero p { font-size: var(--text-sm, 14px); color: var(--color-text-muted); }

.profile-avatar {
 width: 72px;
 height: 72px;
 border-radius: 50%;
 background: var(--color-primary-muted);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 32px;
 margin-bottom: 8px;
}

.profile-role {
 display: inline-flex;
 padding: 2px 12px;
 background: var(--color-primary-muted);
 color: var(--color-primary);
 border-radius: var(--radius-pill, 999px);
 font-size: var(--text-xs, 12px);
 font-weight: var(--font-semibold, 600);
 text-transform: uppercase;
}

.profile-region { font-size: var(--text-sm, 14px); color: var(--color-text-muted); }

.toggle-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 14px 0;
 border-bottom: 1px solid var(--color-border-subtle);
 font-size: var(--text-sm, 14px);
 color: var(--color-text);
 cursor: pointer;
}
.toggle-row:last-of-type { border-bottom: none; }
.toggle-row input[type="checkbox"] {
 width: 44px;
 height: 24px;
 accent-color: var(--color-primary);
}


/* === Empty states === */

.empty-state {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 40px 24px;
 text-align: center;
 color: var(--color-text-muted);
}
.empty-state__icon { font-size: 48px; margin-bottom: 16px; opacity: 0.4; }
.empty-state__title { font-size: var(--text-lg, 20px); font-weight: var(--font-semibold, 600); color: var(--color-text); margin-bottom: 8px; }
.empty-state__description { font-size: var(--text-sm, 14px); max-width: 280px; margin-bottom: 20px; line-height: 1.5; }
.empty-state__cta { margin-top: 8px; }


/* === AI markdown === */

.ai-markdown { font-size: var(--text-sm, 14px); line-height: 1.6; color: var(--color-text); }
.ai-markdown p { margin: 0 0 8px; }
.ai-markdown p:last-child { margin-bottom: 0; }
.ai-markdown strong { font-weight: var(--font-semibold, 600); }
.ai-markdown em { font-style: italic; }
.ai-markdown code { background: var(--color-surface-pressed); padding: 2px 6px; border-radius: 4px; font-size: 13px; }
.ai-markdown pre { background: var(--color-surface-pressed); padding: 12px; border-radius: 8px; overflow-x: auto; margin: 8px 0; }
.ai-markdown pre code { background: none; padding: 0; }
.ai-markdown ul, .ai-markdown ol { padding-left: 20px; margin: 8px 0; }
.ai-markdown li { margin-bottom: 4px; }
.ai-markdown h1, .ai-markdown h2, .ai-markdown h3 { margin: 12px 0 8px; }


/* === Context actions === */

.context-actions {
 display: flex;
 flex-direction: column;
 gap: 4px;
}

.context-action {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 12px 16px;
 background: transparent;
 border: none;
 border-radius: var(--radius-base, 12px);
 font-size: var(--text-sm, 14px);
 color: var(--color-text);
 cursor: pointer;
 transition: background var(--transition-fast);
 width: 100%;
 text-align: left;
}
.context-action:hover { background: var(--color-surface-pressed); }


/* === Stepper pills (report wizard) === */

.stepper-pills {
 display: flex;
 gap: 8px;
 margin-bottom: 20px;
}

.stepper-pill {
 flex: 1;
 padding: 10px 12px;
 background: var(--color-surface-pressed);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-pill, 999px);
 font-size: var(--text-xs, 12px);
 font-weight: var(--font-semibold, 600);
 color: var(--color-text-muted);
 text-align: center;
 cursor: pointer;
 transition: all var(--transition-fast);
}
.stepper-pill.active {
 background: var(--color-primary);
 border-color: var(--color-primary);
 color: #fff;
}
.stepper-pill.completed {
 background: var(--color-success-light);
 border-color: var(--color-success);
 color: var(--color-success);
}

.report-wizard { display: flex; flex-direction: column; }

.report-step { display: none; flex-direction: column; gap: 16px; }
.report-step.active { display: flex; animation: fade-in 200ms ease; }

.report-actions {
 display: flex;
 gap: 12px;
 padding-top: 16px;
 border-top: 1px solid var(--color-border-subtle);
 margin-top: 8px;
}
.report-actions .ghost-button { flex: 1; }
.report-actions .cta-button { flex: 2; }


/* === Print styles === */

.print-report-card { display: none; }

@media print {
 .print-report-card {
  display: block;
  padding: 24px;
  border: 1px solid #ccc;
  break-inside: avoid;
 }
 .print-report-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  border-bottom: 2px solid #333;
  padding-bottom: 12px;
 }
 .print-report-content { font-size: 14px; line-height: 1.6; }
 .report-qr { width: 80px; height: 80px; display: grid; grid-template-columns: repeat(auto-fill, 4px); gap: 0; }
 .report-qr__cell { width: 4px; height: 4px; }
 .report-qr__cell.is-filled { background: #000; }
}


/* === Map markers (Leaflet custom) === */

.map-threat-marker {
 position: relative;
 width: 24px;
 height: 24px;
}

.map-threat-marker__ripple {
 position: absolute;
 inset: -8px;
 border-radius: 50%;
 background: hsl(var(--hue-danger) 72% 51% / 0.25);
 animation: pulse 2s ease-in-out infinite;
}

.map-threat-marker__dot {
 position: absolute;
 inset: 0;
 border-radius: 50%;
 background: var(--color-danger);
 border: 2px solid #fff;
 box-shadow: 0 2px 6px hsl(0 0% 0% / 0.3);
}

.map-event-marker {
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background: var(--color-info);
 border: 2px solid #fff;
 box-shadow: 0 2px 6px hsl(0 0% 0% / 0.3);
}


/* === Offline / sync / undo / pull-to-refresh === */

.offline-banner {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 8px 16px;
 background: var(--color-warning);
 color: var(--color-warning-dark);
 font-size: var(--text-sm, 14px);
 font-weight: var(--font-semibold, 600);
}
.offline-banner__dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--color-warning-dark);
 animation: pulse 1.5s infinite;
}

.sync-indicator {
 padding: 8px 16px;
 background: var(--color-info-light);
 color: var(--color-info);
 font-size: var(--text-sm, 14px);
 text-align: center;
}

.undo-toast {
 position: fixed;
 bottom: calc(72px + env(safe-area-inset-bottom));
 left: 50%;
 transform: translateX(-50%);
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 12px 20px;
 background: var(--color-text);
 color: var(--color-surface);
 border-radius: var(--radius-pill, 999px);
 font-size: var(--text-sm, 14px);
 box-shadow: 0 4px 16px hsl(0 0% 0% / 0.25);
 z-index: 2000;
 animation: toast-slide-in 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.undo-toast button {
 color: var(--color-primary-light);
 font-weight: var(--font-semibold, 600);
 padding: 4px 8px;
 border-radius: 4px;
}
.undo-toast button:hover { text-decoration: underline; }

.pull-indicator {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 4px;
 text-align: center;
 font-size: var(--text-xs, 12px);
 color: var(--color-text-muted);
 opacity: 0;
 height: 0;
 overflow: hidden;
 transition: opacity 200ms ease, height 200ms ease, padding 200ms ease;
}
.pull-indicator.is-visible { opacity: 1; height: auto; padding: 12px; }
.pull-indicator__spinner {
 width: 24px;
 height: 24px;
 border: 2px solid var(--color-border);
 border-top-color: var(--color-primary);
 border-radius: 50%;
 animation: spin 1s linear infinite;
}


/* === Install prompt === */

.install-sheet { text-align: center; }
.install-benefits {
 display: flex;
 flex-direction: column;
 gap: 8px;
 text-align: left;
 padding: 12px 0;
}
.install-benefits li,
.install-benefits div {
 display: flex;
 align-items: center;
 gap: 10px;
 font-size: var(--text-sm, 14px);
 color: var(--color-text);
}