/**
 * ============================================================
 * Rescue Hero Zero Design System v1.0
 * Official Brand Identity Implementation
 * ============================================================
 * 
 * Mission: Rugged, offline-first survival appliance UI
 * Inspiration: Garmin Tactical + UniFi Dream Machine + Military Tablet
 * 
 * Color Palette:
 * - Primary: #0F1113 (charcoal) - Main backgrounds
 * - Secondary: #3A5F3A (tactical green) - Military/tactical accents
 * - Accent: #FF8A00 (survival orange) - High-visibility CTAs
 * - Surface: #2A2D31 (steel gray) - Card/panel backgrounds
 * - Text: #E8E8E8 (soft white) - Primary text
 */

/* ============================================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================ */

:root {
  /* COLOR PALETTE (OFFICIAL) */
  --pz-primary: #0F1113;          /* Charcoal - main backgrounds */
  --pz-secondary: #3A5F3A;        /* Tactical green - accents */
  --pz-accent: #FF8A00;           /* Survival orange - CTAs */
  --pz-surface: #2A2D31;          /* Steel gray - card surfaces */
  --pz-text: #E8E8E8;             /* Soft white - primary text */
  --pz-muted: #9A9A9A;            /* Gray - secondary text */
  --pz-bg: #0F1113;               /* Same as primary */
  --pz-bg-alt: #1A1D20;           /* Slightly lighter variant */
  --pz-border-subtle: #1A1C1F;    /* Light dividers */
  --pz-border: #3C3F44;           /* Strong component borders */
  --pz-success: #4CAF50;          /* Green - operational status */
  --pz-warning: #FFB300;          /* Amber - caution status */
  --pz-danger: #E53935;           /* Red - failed/offline status */

  /* TYPOGRAPHY SYSTEM */
  --pz-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pz-font-size-xs: 0.8rem;      /* Code, metadata */
  --pz-font-size-sm: 0.85rem;     /* Small labels, captions */
  --pz-font-size-base: 0.95rem;   /* Body text */
  --pz-font-size-lg: 1.1rem;      /* Larger body */
  --pz-font-size-xl: 1.2rem;      /* H3 subheadings */
  --pz-font-size-2xl: 1.8rem;     /* H2 headings */
  --pz-font-size-3xl: 2.4rem;     /* H1 display */
  
  --pz-font-weight-light: 350;    /* Light - reduced emphasis */
  --pz-font-weight-normal: 400;   /* Regular - code, technical */
  --pz-font-weight-medium: 500;   /* Medium - headings, bold labels */

  /* SPACING SCALE (4px base) */
  --pz-space-xs: 4px;             /* 8 * 0.5 */
  --pz-space-sm: 8px;             /* 8 * 1 */
  --pz-space-md: 12px;            /* 8 * 1.5 */
  --pz-space-lg: 16px;            /* 8 * 2 */
  --pz-space-xl: 24px;            /* 8 * 3 */
  --pz-space-2xl: 32px;           /* 8 * 4 */
  --pz-space-3xl: 48px;           /* 8 * 6 */

  /* SHAPES & RADIUS */
  --pz-radius-sm: 4px;            /* Minimal rounding */
  --pz-radius: 6px;               /* Buttons, inputs */
  --pz-radius-lg: 8px;            /* Cards */
  --pz-radius-xl: 12px;           /* Large sections */
  --pz-radius-pill: 20px;         /* Status pills */

  /* BORDERS */
  --pz-border-width: 1px;

  /* SHADOWS (Dark-optimized) */
  --pz-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --pz-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --pz-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);

  /* TRANSITIONS */
  --pz-transition-fast: 120ms ease-out;       /* Button press, hover */
  --pz-transition-normal: 180ms ease-out;     /* Sidebar, panels */
  --pz-transition-slow: 300ms ease-out;       /* Page transitions */
}

/* ============================================================
   RESET & BASE STYLES
   ============================================================ */

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

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: var(--pz-bg);
  color: var(--pz-text);
  font-family: var(--pz-font-family);
  font-size: var(--pz-font-size-base);
  font-weight: var(--pz-font-weight-light);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--pz-font-weight-medium);
  line-height: 1.2;
  color: var(--pz-text);
}

h1 { 
  font-size: var(--pz-font-size-3xl);
  letter-spacing: 0.06em;
}
h2 { 
  font-size: var(--pz-font-size-2xl);
  letter-spacing: 0.04em;
}
h3 { 
  font-size: var(--pz-font-size-xl);
  letter-spacing: 0.02em;
}
h4 { font-size: var(--pz-font-size-lg); }
h5, h6 { font-size: var(--pz-font-size-base); }

p {
  margin: 0;
  color: var(--pz-text);
}

a {
  color: var(--pz-accent);
  text-decoration: none;
  transition: color var(--pz-transition-fast);
}

a:hover {
  color: #ffb347;
  text-decoration: underline;
}

code {
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: var(--pz-font-size-xs);
  background: var(--pz-bg-alt);
  color: var(--pz-accent);
  padding: var(--pz-space-xs) var(--pz-space-sm);
  border-radius: var(--pz-radius-sm);
}

/* ============================================================
   LAYOUT COMPONENTS
   ============================================================ */

.pz-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.pz-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pz-header {
  height: 64px;
  background: var(--pz-primary);
  border-bottom: var(--pz-border-width) solid var(--pz-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pz-space-xl);
  box-shadow: var(--pz-shadow-sm);
  flex-shrink: 0;
  gap: var(--pz-space-xl);
}

.pz-header-left {
  display: flex;
  align-items: center;
  gap: var(--pz-space-lg);
}

.pz-header-right {
  display: flex;
  align-items: center;
  gap: var(--pz-space-lg);
  margin-left: auto;
}

.pz-page-title {
  font-size: var(--pz-font-size-xl);
  font-weight: var(--pz-font-weight-medium);
  color: var(--pz-text);
  margin: 0;
}

.pz-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--pz-space-xl);
}

.pz-footer {
  padding: var(--pz-space-lg);
  text-align: center;
  font-size: var(--pz-font-size-sm);
  color: var(--pz-muted);
  border-top: var(--pz-border-width) solid var(--pz-border);
  background: var(--pz-primary);
  flex-shrink: 0;
}

/* ============================================================
   SIDEBAR NAVIGATION
   ============================================================ */

.pz-sidebar {
  width: 280px;
  background: var(--pz-primary);
  border-right: var(--pz-border-width) solid var(--pz-border);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--pz-transition-normal);
  z-index: 1000;
  flex-shrink: 0;
}

.pz-sidebar-header {
  padding: var(--pz-space-xl);
  border-bottom: var(--pz-border-width) solid var(--pz-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: var(--pz-space-lg);
}

.pz-logo {
  font-size: var(--pz-font-size-xl);
  font-weight: var(--pz-font-weight-medium);
  color: var(--pz-accent);
  margin: 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pz-sidebar-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--pz-space-md);
  margin: -var(--pz-space-md);
  color: var(--pz-text);
}

.pz-sidebar-toggle span {
  width: 24px;
  height: 2px;
  background: var(--pz-text);
  transition: transform var(--pz-transition-fast);
  border-radius: 1px;
}

.pz-nav-list {
  list-style: none;
  margin: 0;
  padding: var(--pz-space-lg) var(--pz-space-md);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-sm);
}

.pz-nav-item {
  display: flex;
  align-items: center;
  gap: var(--pz-space-lg);
  padding: var(--pz-space-md) var(--pz-space-lg);
  border-radius: var(--pz-radius);
  color: var(--pz-muted);
  text-decoration: none;
  transition: all var(--pz-transition-fast);
  font-size: var(--pz-font-size-base);
  font-weight: var(--pz-font-weight-normal);
  cursor: pointer;
  border-left: 3px solid transparent;
}

.pz-nav-item:hover {
  color: var(--pz-text);
  background: rgba(255, 138, 0, 0.08);
}

.pz-nav-item.pz-nav-active {
  color: var(--pz-accent);
  background: rgba(255, 138, 0, 0.12);
  border-left-color: var(--pz-accent);
}

.pz-nav-item .icon {
  font-size: var(--pz-font-size-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
}

/* ============================================================
   SIDEBAR FOOTER STYLES - Consolidate inline styles
   LOW PRIORITY OPTIMIZATION: Move inline styles to classes
   ============================================================ */

.pz-sidebar-spacer {
  flex: 1;
}

.pz-sidebar-footer {
  padding: var(--pz-space-lg);
  border-top: var(--pz-border-width) solid var(--pz-border);
  text-align: center;
}

.pz-sidebar-footer p {
  font-size: var(--pz-font-size-xs);
  color: var(--pz-muted);
  margin: 0;
}

/* ============================================================
   CONTENT COMPONENTS
   ============================================================ */

.pz-section {
  margin-bottom: var(--pz-space-2xl);
}

.pz-section-header {
  margin-bottom: var(--pz-space-lg);
}

.pz-section-header h2 {
  color: var(--pz-text);
  margin-bottom: var(--pz-space-sm);
}

.pz-section-header p {
  color: var(--pz-muted);
  font-size: var(--pz-font-size-sm);
  margin: 0;
}

.pz-card {
  background: var(--pz-surface);
  border: var(--pz-border-width) solid var(--pz-border);
  border-radius: var(--pz-radius-lg);
  padding: var(--pz-space-lg);
  box-shadow: var(--pz-shadow-sm);
  transition: all var(--pz-transition-fast);
}

.pz-card:hover {
  border-color: var(--pz-accent);
  box-shadow: var(--pz-shadow-md);
  transform: translateY(-2px);
}

.pz-card h3 {
  margin-bottom: var(--pz-space-md);
  color: var(--pz-text);
}

.pz-card p {
  color: var(--pz-muted);
  margin-bottom: var(--pz-space-md);
}

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

.pz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--pz-space-xl);
}

/* ============================================================
   BUTTONS & CONTROLS
   ============================================================ */

.pz-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pz-space-md);
  padding: var(--pz-space-md) var(--pz-space-lg);
  border: var(--pz-border-width) solid var(--pz-accent);
  background: var(--pz-accent);
  color: var(--pz-primary);
  border-radius: var(--pz-radius);
  font-size: var(--pz-font-size-base);
  font-weight: var(--pz-font-weight-medium);
  cursor: pointer;
  transition: all var(--pz-transition-fast);
  text-decoration: none;
}

.pz-button:hover {
  background: #ffb347;
  border-color: #ffb347;
  transform: translateY(-1px);
  box-shadow: var(--pz-shadow-sm);
}

.pz-button:active {
  transform: translateY(0);
}

.pz-button-secondary {
  background: transparent;
  color: var(--pz-accent);
  border-color: var(--pz-accent);
}

.pz-button-secondary:hover {
  background: rgba(255, 138, 0, 0.1);
}

.pz-button-small {
  padding: var(--pz-space-sm) var(--pz-space-md);
  font-size: var(--pz-font-size-sm);
}

.pz-button-tactical {
  background: var(--pz-secondary);
  border-color: var(--pz-secondary);
  color: var(--pz-text);
}

.pz-button-tactical:hover {
  background: #4a7a4a;
}

.pz-back-button {
  display: inline-flex;
  align-items: center;
  gap: var(--pz-space-sm);
  padding: var(--pz-space-sm) var(--pz-space-lg);
  color: var(--pz-accent);
  background: transparent;
  border: var(--pz-border-width) solid var(--pz-accent);
  border-radius: var(--pz-radius);
  font-size: var(--pz-font-size-sm);
  cursor: pointer;
  transition: all var(--pz-transition-fast);
  text-decoration: none;
}

.pz-back-button:hover {
  background: rgba(255, 138, 0, 0.1);
}

/* ============================================================
   FORMS & INPUTS
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
  padding: var(--pz-space-md);
  background: var(--pz-bg);
  border: var(--pz-border-width) solid var(--pz-border);
  color: var(--pz-text);
  border-radius: var(--pz-radius);
  cursor: pointer;
  margin-top: var(--pz-space-md);
  font-size: var(--pz-font-size-base);
  font-family: var(--pz-font-family);
  transition: all var(--pz-transition-fast);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
textarea:hover,
select:hover {
  border-color: var(--pz-accent);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--pz-accent);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.1);
}

label {
  display: block;
  margin-bottom: var(--pz-space-md);
  font-weight: var(--pz-font-weight-medium);
  color: var(--pz-text);
}

/* ============================================================
   STATUS & INDICATOR COMPONENTS
   ============================================================ */

.pz-status-indicators {
  display: flex;
  align-items: center;
  gap: var(--pz-space-md);
}

.pz-status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--pz-space-sm);
  padding: var(--pz-space-sm) var(--pz-space-lg);
  background: rgba(76, 175, 80, 0.1);
  border: var(--pz-border-width) solid rgba(76, 175, 80, 0.3);
  border-radius: var(--pz-radius-pill);
  font-size: var(--pz-font-size-sm);
  color: var(--pz-success);
  font-weight: var(--pz-font-weight-medium);
}

.pz-status-pill.warning {
  background: rgba(255, 179, 0, 0.1);
  border-color: rgba(255, 179, 0, 0.3);
  color: var(--pz-warning);
}

.pz-status-pill.danger {
  background: rgba(229, 57, 53, 0.1);
  border-color: rgba(229, 57, 53, 0.3);
  color: var(--pz-danger);
}

.pz-status-dot {
  width: 8px;
  height: 8px;
  background: var(--pz-success);
  border-radius: 50%;
  animation: pz-pulse 2s infinite;
  flex-shrink: 0;
}

.pz-status-pill.warning .pz-status-dot {
  background: var(--pz-warning);
}

.pz-status-pill.danger .pz-status-dot {
  background: var(--pz-danger);
}

/* ============================================================
   TOOLBAR & LAYOUT COMPONENTS
   ============================================================ */

.pz-toolbar {
  display: flex;
  align-items: center;
  gap: var(--pz-space-lg);
  padding: var(--pz-space-lg);
  background: var(--pz-surface);
  border: var(--pz-border-width) solid var(--pz-border);
  border-radius: var(--pz-radius);
  margin-bottom: var(--pz-space-lg);
}

.pz-toolbar-left {
  display: flex;
  align-items: center;
  gap: var(--pz-space-lg);
}

.pz-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--pz-space-lg);
  margin-left: auto;
}

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

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pz-font-size-sm);
}

table th,
table td {
  padding: var(--pz-space-md);
  border-bottom: var(--pz-border-width) solid var(--pz-border);
  text-align: left;
}

table th {
  background: var(--pz-bg-alt);
  color: var(--pz-muted);
  font-weight: var(--pz-font-weight-medium);
}

table tr:hover {
  background: var(--pz-bg-alt);
}

/* ============================================================
   ANIMATIONS & KEYFRAMES
   ============================================================ */

@keyframes pz-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.pz-flex {
  display: flex;
}

.pz-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pz-gap-xs { gap: var(--pz-space-xs); }
.pz-gap-sm { gap: var(--pz-space-sm); }
.pz-gap-md { gap: var(--pz-space-md); }
.pz-gap-lg { gap: var(--pz-space-lg); }
.pz-gap-xl { gap: var(--pz-space-xl); }

.pz-mt-xs { margin-top: var(--pz-space-xs); }
.pz-mt-sm { margin-top: var(--pz-space-sm); }
.pz-mt-md { margin-top: var(--pz-space-md); }
.pz-mt-lg { margin-top: var(--pz-space-lg); }
.pz-mt-xl { margin-top: var(--pz-space-xl); }

.pz-text-muted { color: var(--pz-muted); }
.pz-text-accent { color: var(--pz-accent); }
.pz-text-success { color: var(--pz-success); }
.pz-text-warning { color: var(--pz-warning); }
.pz-text-danger { color: var(--pz-danger); }

.pz-font-sm { font-size: var(--pz-font-size-sm); }
.pz-font-base { font-size: var(--pz-font-size-base); }
.pz-font-lg { font-size: var(--pz-font-size-lg); }

.pz-weight-light { font-weight: var(--pz-font-weight-light); }
.pz-weight-normal { font-weight: var(--pz-font-weight-normal); }
.pz-weight-medium { font-weight: var(--pz-font-weight-medium); }

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

/* ============================================================
   RESPONSIVE DESIGN - TABLET (≥768px to <1024px)
   ============================================================ */

@media (max-width: 1024px) {
  .pz-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

/* ============================================================
   RESPONSIVE DESIGN - MOBILE (<768px)
   ============================================================ */

@media (max-width: 768px) {
  .pz-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 280px;
    z-index: 2000;
    transform: translateX(-100%);
    box-shadow: var(--pz-shadow-lg);
  }

  .pz-sidebar.open {
    transform: translateX(0);
  }

  .pz-sidebar-toggle {
    display: flex;
  }

  .pz-content {
    padding: var(--pz-space-lg);
  }

  .pz-header {
    padding: 0 var(--pz-space-lg);
  }

  .pz-page-title {
    font-size: var(--pz-font-size-lg);
  }

  .pz-grid {
    grid-template-columns: 1fr;
  }

  .pz-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .pz-toolbar-right {
    width: 100%;
    margin-left: 0;
  }
}

/* ============================================================
   RESPONSIVE DESIGN - MICRO (<480px)
   ============================================================ */

@media (max-width: 480px) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  .pz-sidebar {
    width: 100%;
    transform: translateX(-100%);
  }

  .pz-sidebar.open {
    transform: translateX(0);
  }

  .pz-container {
    flex-direction: column;
  }

  .pz-header {
    height: auto;
    padding: var(--pz-space-md);
    flex-wrap: wrap;
  }

  .pz-page-title {
    font-size: var(--pz-font-size-lg);
  }

  .pz-main {
    width: 100%;
    max-width: 100%;
    padding: 0 var(--pz-space-md);
  }

  .pz-content {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: var(--pz-space-md);
  }

  .pz-section {
    margin-bottom: var(--pz-space-xl);
  }

  .grid,
  .pz-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .pz-card,
  .card,
  .pdf-tile,
  .tile,
  .tool-card {
    width: 100%;
    max-width: 100%;
  }

  img,
  video,
  iframe {
    max-width: 100%;
    height: auto;
  }

  body {
    font-size: var(--pz-font-size-sm);
  }

  h1 {
    font-size: var(--pz-font-size-xl);
  }

  h2 {
    font-size: var(--pz-font-size-lg);
  }
}

/* ============================================================
   WEBKIT SCROLLBAR STYLING
   ============================================================ */

.pz-sidebar::-webkit-scrollbar,
.pz-content::-webkit-scrollbar {
  width: 8px;
}

.pz-sidebar::-webkit-scrollbar-track,
.pz-content::-webkit-scrollbar-track {
  background: var(--pz-bg);
}

.pz-sidebar::-webkit-scrollbar-thumb,
.pz-content::-webkit-scrollbar-thumb {
  background: var(--pz-border);
  border-radius: 4px;
}

.pz-sidebar::-webkit-scrollbar-thumb:hover,
.pz-content::-webkit-scrollbar-thumb:hover {
  background: var(--pz-accent);
}

/* ============================================================
   PERFORMANCE: DISABLE ANIMATIONS FOR LOW-END DEVICES
   MEDIUM PRIORITY FIX: ARM1176 (Pi Zero) struggles with CSS transforms
   - Respects prefers-reduced-motion user setting
   - Disables transitions/animations on Pi Zero (detected via media query)
   ============================================================ */

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

/* For low-power devices (e.g., Pi Zero), disable smooth transitions */
@media (max-width: 600px) and (hover: none) {
  /* Likely mobile/low-power device: disable jank-causing animations */
  :root {
    --pz-transition-fast: 0ms;     /* Instant button press */
    --pz-transition-normal: 0ms;   /* Instant sidebar toggle */
    --pz-transition-slow: 0ms;     /* Instant page transitions */
  }
  
  /* Also disable hover animations on touch devices */
  .pz-card:hover,
  .pz-button:hover,
  .pz-nav-item:hover {
    transform: none !important;
  }
}