/* =============================================
   PAKAFRONT FRAMEWORK v1.0
   Modern Component Framework
   ============================================= */

/* The Inter webfont is loaded via <link> in the base templates (with
   preconnect), not @import here — an @import inside CSS is a render-blocking
   request chained behind this stylesheet. See --pf-font below for the stack. */

/* =============================================
   CSS VARIABLES
   ============================================= */
:root {
  /* Palette - Light Mode */
  --pf-bg: #f3f4f6;
  --pf-surface: #ffffff;
  --pf-surface-hover: #fcfcfc;

  --pf-ink-1: #111827;
  --pf-ink-2: #374151;
  --pf-ink-3: #9ca3af;
  --pf-ink-4: #e5e7eb;

  --pf-border: rgba(0, 0, 0, 0.06);

  /* Primary Color - Coral Accent */
  --pf-primary: #fd5c4c;
  --pf-primary-soft: #fff0ee;
  --pf-primary-dark: #ea4e3d;

  /* Semantic Colors */
  --pf-success: #10b981;
  --pf-success-soft: #ecfdf5;
  --pf-warning: #f59e0b;
  --pf-warning-soft: #fffbeb;
  --pf-danger: #ef4444;
  --pf-danger-soft: #fef2f2;
  --pf-info: #3b82f6;
  --pf-info-soft: #eff6ff;

  /* Typography */
  --pf-font: 'Inter', system-ui, -apple-system, sans-serif;

  /* Shadows */
  --pf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --pf-shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
  --pf-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
  --pf-shadow-pop: 0 10px 40px -10px rgba(0, 0, 0, 0.1);

  /* Glass Effect */
  --pf-surface-glass: rgba(255, 255, 255, 0.75);
}

/* Dark Mode Overrides */
[data-theme="dark"] {
  --pf-bg: #0b0f1a;
  --pf-surface: #161e2d;
  --pf-surface-hover: #1c263a;

  --pf-ink-1: #f8fafc;
  --pf-ink-2: #cbd5e1;
  --pf-ink-3: #64748b;
  --pf-ink-4: #2d3748;

  --pf-border: rgba(255, 255, 255, 0.08);
  --pf-primary-soft: rgba(var(--pf-primary-rgb), 0.12);
  --pf-success-soft: rgba(16, 185, 129, 0.1);
  --pf-warning-soft: rgba(245, 158, 11, 0.1);
  --pf-danger-soft: rgba(239, 68, 68, 0.1);
  --pf-info-soft: rgba(59, 130, 246, 0.1);
  --pf-surface-glass: rgba(22, 30, 45, 0.75);
}

/* =============================================
   BASE RESET
   ============================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--pf-font);
  color: var(--pf-ink-2);
  background: var(--pf-bg);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.5;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(at 10% 10%, var(--pf-primary-soft) 0%, transparent 60%),
    radial-gradient(at 90% 20%, rgba(59, 130, 246, 0.05) 0%, transparent 40%);
  opacity: 0.6;
  pointer-events: none;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.2s;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
}

/* =============================================
   CONTAINER & GRID SYSTEM
   ============================================= */
.pf-container {
  width: 100%;
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
}

.pf-container-fluid {
  width: 100%;
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
}

.pf-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -12px;
  margin-left: -12px;
  row-gap: 24px;
}

.pf-row>* {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: 12px;
  padding-left: 12px;
  margin-top: 0;
}

.pf-col {
  flex: 1 0 0%;
}

/* Grid Breakpoints */

/* Extra small (xs) - Default styling applied to all */
.pf-col-auto {
  flex: 0 0 auto;
  width: auto;
}

.pf-col-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}

.pf-col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.pf-col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.pf-col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.pf-col-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}

.pf-col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.pf-col-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}

.pf-col-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}

.pf-col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.pf-col-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}

.pf-col-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}

.pf-col-12 {
  flex: 0 0 auto;
  width: 100%;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .pf-container {
    max-width: 540px;
  }

  .pf-col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .pf-col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }

  .pf-col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }

  .pf-col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .pf-col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }

  .pf-col-sm-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }

  .pf-col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .pf-col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }

  .pf-col-sm-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }

  .pf-col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .pf-col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }

  .pf-col-sm-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }

  .pf-col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .pf-container {
    max-width: 720px;
  }

  .pf-col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .pf-col-md-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }

  .pf-col-md-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }

  .pf-col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .pf-col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }

  .pf-col-md-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }

  .pf-col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .pf-col-md-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }

  .pf-col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }

  .pf-col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .pf-col-md-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }

  .pf-col-md-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }

  .pf-col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .pf-container {
    max-width: 960px;
  }

  .pf-col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .pf-col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }

  .pf-col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }

  .pf-col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .pf-col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }

  .pf-col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }

  .pf-col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .pf-col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }

  .pf-col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }

  .pf-col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .pf-col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }

  .pf-col-lg-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }

  .pf-col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .pf-container {
    max-width: 1140px;
  }

  .pf-col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .pf-col-xl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }

  .pf-col-xl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }

  .pf-col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .pf-col-xl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }

  .pf-col-xl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }

  .pf-col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .pf-col-xl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }

  .pf-col-xl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }

  .pf-col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .pf-col-xl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }

  .pf-col-xl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }

  .pf-col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}



/* =============================================
   BUTTONS
   ============================================= */
.pf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--pf-radius-md);
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  position: relative;
  /* overflow: hidden; Removed to allow tooltips */
}

.pf-btn>* {
  position: relative;
  z-index: 2;
}

.pf-btn:disabled,
.pf-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none !important;
  transform: none !important;
}

.pf-btn-primary {
  background: var(--pf-primary);
  color: white;
  box-shadow: 0 2px 10px rgba(var(--pf-primary-rgb), 0.2);
}

.pf-btn-primary:hover {
  background: var(--pf-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--pf-primary-rgb), 0.3);
}

.pf-btn-secondary {
  background: var(--pf-surface);
  border: 1px solid var(--pf-border);
  color: var(--pf-ink-2);
}

.pf-btn-secondary:hover {
  background: var(--pf-surface-hover);
  color: var(--pf-ink-1);
}

.pf-btn-success {
  background: var(--pf-success);
  color: white;
}

.pf-btn-warning {
  background: var(--pf-warning);
  color: white;
}

.pf-btn-info {
  background: var(--pf-info);
  color: white;
}

.pf-btn-danger {
  background: var(--pf-danger);
  color: white;
}

/* Outline Buttons */
.pf-btn-outline-primary {
  background: transparent;
  border: 1px solid var(--pf-primary);
  color: var(--pf-primary);
}

.pf-btn-outline-primary:hover:not(:disabled) {
  background: var(--pf-primary-soft);
}

.pf-btn-outline-secondary {
  background: transparent;
  border: 1px solid var(--pf-border);
  color: var(--pf-ink-2);
}

.pf-btn-outline-secondary:hover:not(:disabled) {
  background: var(--pf-bg);
}

.pf-btn-outline-success {
  background: transparent;
  border: 1px solid var(--pf-success);
  color: var(--pf-success);
}

.pf-btn-outline-success:hover:not(:disabled) {
  background: var(--pf-success-soft);
}

.pf-btn-outline-warning {
  background: transparent;
  border: 1px solid var(--pf-warning);
  color: var(--pf-warning);
}

.pf-btn-outline-warning:hover:not(:disabled) {
  background: var(--pf-warning-soft);
}

.pf-btn-outline-danger {
  background: transparent;
  border: 1px solid var(--pf-danger);
  color: var(--pf-danger);
}

.pf-btn-outline-danger:hover:not(:disabled) {
  background: var(--pf-danger-soft);
}

.pf-btn-outline-info {
  background: transparent;
  border: 1px solid var(--pf-info);
  color: var(--pf-info);
}

.pf-btn-outline-info:hover:not(:disabled) {
  background: var(--pf-info-soft);
}

/* Ghost Buttons (Transparent) */
.pf-btn-ghost {
  background: transparent;
  color: var(--pf-ink-2);
}

.pf-btn-ghost:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.04);
  color: var(--pf-ink-1);
}

[data-theme="dark"] .pf-btn-ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
}

.pf-btn-ghost-primary {
  color: var(--pf-primary);
}

.pf-btn-ghost-success {
  color: var(--pf-success);
}

.pf-btn-ghost-warning {
  color: var(--pf-warning);
}

.pf-btn-ghost-danger {
  color: var(--pf-danger);
}

.pf-btn-ghost-info {
  color: var(--pf-info);
}

.pf-btn-lg {
  height: 44px;
  padding: 0 24px;
  font-size: 15px;
}

.pf-btn-sm {
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
}

/* =============================================
   BUTTON GROUPS
   ============================================= */
.pf-btn-group {
  display: inline-flex;
  vertical-align: middle;
}

.pf-btn-group>.pf-btn {
  border-radius: 0;
  position: relative;
  margin: 0;
}

/* Connect first button */
.pf-btn-group>.pf-btn:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

/* Connect last button */
.pf-btn-group>.pf-btn:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* Overlap borders to prevent double borders */
.pf-btn-group>.pf-btn:not(:first-child) {
  margin-left: -1px;
}

/* Ensure focus/hover state brings button to front */
.pf-btn-group>.pf-btn:hover,
.pf-btn-group>.pf-btn:focus,
.pf-btn-group>.pf-btn:active,
.pf-btn-group>.pf-btn.active {
  z-index: 10;
}

/* A group action that submits (e.g. a delete button) is a <form class="pf-d-inline">
   wrapping the .pf-btn, not a bare .pf-btn - CSRF needs the field inside a real form.
   That extra wrapper falls outside every ">.pf-btn" rule above, so without these the
   wrapped button keeps its lone-button radius on all four corners, sits top-aligned
   instead of centered (the group stretches the form to row height, but a plain block
   form doesn't center its own content), and never gets the border-overlap/z-index
   treatment. Mirror the rules one level deeper. */
.pf-btn-group>form {
  display: inline-flex;
  align-items: center;
}

.pf-btn-group>form>.pf-btn {
  border-radius: 0;
}

.pf-btn-group>form:first-child>.pf-btn {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.pf-btn-group>form:last-child>.pf-btn {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.pf-btn-group>form:not(:first-child) {
  margin-left: -1px;
}

.pf-btn-group>form:hover,
.pf-btn-group>form:focus-within,
.pf-btn-group>form:active {
  z-index: 10;
}

/* Mobile: Allow wrapping */
@media (max-width: 767px) {
  .pf-btn-group {
    display: flex;
    flex-wrap: wrap;
  }

  .pf-btn-group>.pf-btn,
  .pf-btn-group>form {
    flex: 1 1 auto;
    min-width: 0;
  }

  .pf-btn-group>form>.pf-btn {
    width: 100%;
  }
}

/* =============================================
   CARDS
   ============================================= */
.pf-card {
  background: var(--pf-surface);
  border-radius: var(--pf-radius-xl);
  padding: 24px;
  border: 1px solid var(--pf-border);
  box-shadow: var(--pf-shadow-card);
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.pf-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--pf-shadow-hover);
}

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

.pf-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--pf-ink-1);
}

.pf-card-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pf-ink-3);
}

.pf-card-body {
  color: var(--pf-ink-2);
}

.pf-card-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--pf-border);
}

/* =============================================
   BADGES
   ============================================= */
.pf-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--pf-radius-pill);
  font-size: 11px;
  font-weight: 700;
}

.pf-badge-success {
  background: var(--pf-success-soft);
  color: var(--pf-success);
}

.pf-badge-warning {
  background: var(--pf-warning-soft);
  color: var(--pf-warning);
}

.pf-badge-danger {
  background: var(--pf-danger-soft);
  color: var(--pf-danger);
}

.pf-badge-info {
  background: var(--pf-info-soft);
  color: var(--pf-info);
}

.pf-badge-primary {
  background: var(--pf-primary-soft);
  color: var(--pf-primary);
}

.pf-badge-secondary {
  background: var(--pf-bg);
  color: var(--pf-ink-2);
}

/* =============================================
   HEADER
   ============================================= */
.pf-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--pf-surface-glass);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--pf-border);
}

.pf-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.pf-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 700;
  color: var(--pf-ink-1);
}

.pf-brand-logo {
  height: 42px;
  width: auto;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pf-brand:hover .pf-brand-logo {
  transform: scale(1.05);
}

.pf-nav {
  display: flex;
  gap: 4px;
}

.pf-nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--pf-ink-2);
  padding: 8px 16px;
  border-radius: var(--pf-radius-pill);
  transition: all 0.15s;
}

.pf-nav-link:hover {
  background: rgba(0, 0, 0, 0.03);
  color: var(--pf-ink-1);
}

.pf-nav-link.active {
  background: var(--pf-surface);
  color: var(--pf-primary);
  font-weight: 600;
  box-shadow: var(--pf-shadow-sm);
  border: 1px solid var(--pf-border);
}

.pf-tabs {
  border-bottom: 1px solid var(--pf-border);
  gap: 1.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
  justify-content: flex-start !important;
}

@media (min-width: 768px) {
  .pf-tabs {
    justify-content: center !important;
  }
}

.pf-tabs::-webkit-scrollbar {
  display: none;
}

.pf-tabs .pf-tab-link {
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: border-bottom-color 0.2s ease-in-out;
  white-space: nowrap;
  flex-shrink: 0;
}

.pf-tabs .pf-tab-link:hover {
  border-bottom-color: var(--pf-text-muted, #9ca3af);
}

.pf-tabs .pf-tab-link.active {
  border-bottom-color: var(--pf-primary);
}

/* =============================================
   ALERTS / TIP BOXES
   ============================================= */
.pf-alert {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--pf-surface);
  padding: 20px 24px;
  border-radius: var(--pf-radius-lg);
  margin-bottom: 24px;
  border: 1px solid var(--pf-border);
}

.pf-alert-info {
  border-left: 4px solid var(--pf-info);
  background: var(--pf-info-soft);
  color: var(--pf-info);
}

.pf-alert-success {
  border-left: 4px solid var(--pf-success);
  background: var(--pf-success-soft);
  color: var(--pf-success);
}

.pf-alert-warning {
  border-left: 4px solid var(--pf-warning);
  background: var(--pf-warning-soft);
  color: var(--pf-warning);
}

.pf-alert-danger {
  border-left: 4px solid var(--pf-danger);
  background: var(--pf-danger-soft);
  color: var(--pf-danger);
}





/* =============================================
   ACCORDION
   ============================================= */
.pf-accordion {
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-sm);
  overflow: hidden;
  background: var(--pf-surface);
}

.pf-accordion-item {
  border-bottom: 1px solid var(--pf-border);
}

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

.pf-accordion-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--pf-surface);
  color: var(--pf-ink-1);
  font-weight: 600;
  text-align: left;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
  font-size: 15px;
}

.pf-accordion-button:hover {
  background: var(--pf-surface-hover);
}

.pf-accordion-button.open {
  background: var(--pf-primary-soft);
  color: var(--pf-primary);
}

.pf-accordion-icon {
  transition: transform 0.2s;
  color: var(--pf-ink-3);
}

.pf-accordion-button.open .pf-accordion-icon {
  transform: rotate(180deg);
  color: var(--pf-primary);
}

.pf-accordion-collapse {
  display: none;
  border-top: 1px solid var(--pf-border);
}

.pf-accordion-collapse.open {
  display: block;
  animation: pf-slide-down 0.2s ease-out;
}

.pf-accordion-body {
  padding: 20px;
  color: var(--pf-ink-2);
  background: var(--pf-surface);
  line-height: 1.6;
}

@keyframes pf-slide-down {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =============================================
   TABLES
   ============================================= */
.pf-table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pf-table {
  width: 100%;
  margin-bottom: 1rem;
  color: var(--pf-ink-2);
  vertical-align: top;
  border-collapse: collapse;
}

.pf-table th,
.pf-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--pf-border);
  text-align: left;
}

.pf-table th {
  font-weight: 600;
  color: var(--pf-ink-1);
  border-bottom: 2px solid var(--pf-border);
  white-space: nowrap;
}

.pf-table thead th {
  background-color: var(--pf-surface);
}

.pf-table tbody:last-of-type tr:last-child td {
  border-bottom: none;
}

/* Hover Variant */
.pf-table-hover tbody tr {
  transition: background-color 0.15s;
}

.pf-table-hover tbody tr:hover {
  background-color: var(--pf-surface-hover);
}

/* Striped Variant */
.pf-table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .pf-table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.03);
}

/* Striped Groups Variant - for tables where one record renders as more than one
   <tr> (e.g. a full-width detail/comment row under the main row). Wrap each
   record's row(s) in its own <tbody> (multiple <tbody> per <table> is valid
   HTML) so the stripe alternates per record instead of per physical <tr>. */
.pf-table-striped-groups tbody:nth-of-type(odd) tr {
  background-color: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .pf-table-striped-groups tbody:nth-of-type(odd) tr {
  background-color: rgba(255, 255, 255, 0.03);
}

/* Bordered Variant */
.pf-table-bordered {
  border: 1px solid var(--pf-border);
}

.pf-table-bordered th,
.pf-table-bordered td {
  border: 1px solid var(--pf-border);
}

.pf-table-bordered thead th,
.pf-table-bordered thead td {
  border-bottom-width: 2px;
}



/* =============================================
   MODAL
   ============================================= */
.pf-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--pf-z-modal);
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(4px);
  padding: 20px;
}

.pf-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.pf-modal-dialog {
  background: var(--pf-surface);
  width: 100%;
  max-width: 500px;
  border-radius: var(--pf-radius-lg);
  box-shadow: var(--pf-shadow-pop);
  transform: scale(0.95) translateY(10px);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.pf-modal-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.pf-modal.open .pf-modal-dialog {
  transform: scale(1) translateY(0);
}

.pf-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--pf-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pf-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--pf-ink-1);
}

.pf-modal-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background: transparent;
  border: none;
  color: var(--pf-ink-3);
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.2s;
}

.pf-modal-close .material-symbols-outlined {
  font-size: 20px;
}

.pf-modal-close:hover {
  background: var(--pf-bg);
  color: var(--pf-ink-1);
}

.pf-modal-body {
  padding: 24px;
  color: var(--pf-ink-2);
  overflow-y: auto;
  line-height: 1.6;
}

.pf-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--pf-border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: var(--pf-surface);
  border-radius: 0 0 16px 16px;
}

/* Modal Sizes */
.pf-modal-sm {
  max-width: 300px;
}

.pf-modal-lg {
  max-width: 800px;
}

body.pf-modal-open {
  overflow: hidden;
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
  .pf-modal {
    padding: 12px;
  }

  .pf-modal-dialog {
    border-radius: 12px;
    max-height: 95vh;
  }

  .pf-modal-header {
    padding: 16px 20px;
  }

  .pf-modal-title {
    font-size: 16px;
  }

  .pf-modal-body {
    padding: 20px;
  }

  .pf-modal-footer {
    padding: 12px 20px;
    flex-direction: column-reverse;
  }

  .pf-modal-footer .pf-btn {
    width: 100%;
  }
}

/* =============================================
   HAMBURGER MENU (Layer Shift)
   ============================================= */

/* Hamburger Button - single definition. (Was declared twice; the values below
   are the effective cascade of both, so nothing renders differently.) */
.pf-hamburger {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pf-surface);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-sm);
  cursor: pointer;
  color: var(--pf-ink-1);
  z-index: 1100;
  position: relative;
  transition: all 0.2s;
  box-shadow: var(--pf-shadow-sm);
}

.pf-hamburger:hover {
  box-shadow: var(--pf-shadow-hover);
  background: var(--pf-surface-hover);
  border-color: var(--pf-ink-3);
}

.pf-hamburger-lines {
  width: 20px;
  height: 14px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pf-hamburger-lines span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--pf-ink-1);
  border-radius: 2px;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

/* Animated X state */
.pf-hamburger.open .pf-hamburger-lines span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.pf-hamburger.open .pf-hamburger-lines span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.pf-hamburger.open .pf-hamburger-lines span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Off-canvas Panel (hidden under page) */
/* =============================================
   OFFCANVAS (OVERLAY MENU)
   ============================================= */

/* Main Panel */
.pf-offcanvas {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 1120;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  background-color: var(--pf-surface);
  background-clip: padding-box;
  outline: 0;
  transition: transform 0.3s ease-in-out;
  box-shadow: var(--pf-shadow-pop);
  width: 300px;
  padding: 24px;
}

/* Position: Left (Default) */
.pf-offcanvas-start {
  top: 0;
  left: 0;
  border-right: 1px solid var(--pf-border);
  transform: translateX(-100%);
}

/* Position: Right */
.pf-offcanvas-end {
  top: 0;
  right: 0;
  border-left: 1px solid var(--pf-border);
  transform: translateX(100%);
}

/* Open State */
.pf-offcanvas.open {
  transform: translateX(0);
}

/* Backdrop (Overlay) */
.pf-offcanvas-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1110;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s;
}

.pf-offcanvas-backdrop.show {
  opacity: 1;
  visibility: visible;
}

/* Content Styles (Reuse from previous version) */
.pf-offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.pf-offcanvas-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--pf-ink-1);
  margin: 0;
}

.pf-offcanvas-close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: -8px -8px -8px auto;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--pf-ink-3);
  border-radius: 50%;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.pf-offcanvas-close .material-symbols-outlined {
  font-size: 22px;
}

.pf-offcanvas-close:hover {
  color: var(--pf-ink-1);
  background: rgba(0, 0, 0, 0.05);
}

.pf-offcanvas-body {
  flex-grow: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Links & Nav */
.pf-offcanvas-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--pf-radius-sm);
  color: var(--pf-ink-2);
  font-weight: 500;
  font-size: 14px;
  transition: all 0.2s;
  text-decoration: none;
}

.pf-offcanvas-link:hover {
  background: var(--pf-surface-hover);
  color: var(--pf-ink-1);
}

.pf-offcanvas-link.active {
  background: var(--pf-primary-soft);
  color: var(--pf-primary);
  font-weight: 600;
}

.pf-offcanvas-link .material-symbols-outlined {
  font-size: 20px;
  color: inherit;
  opacity: 0.8;
}

.pf-offcanvas-divider {
  height: 1px;
  background: var(--pf-border);
  margin: 12px 0;
}

.pf-offcanvas-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pf-ink-3);
  padding: 8px 12px;
  margin-top: 8px;
}



.pf-offcanvas-toggle {
  cursor: pointer;
  justify-content: flex-start;
}

.pf-offcanvas-arrow {
  margin-left: auto;
  font-size: 18px !important;
  transition: transform 0.3s;
}

.pf-offcanvas-group.open .pf-offcanvas-arrow {
  transform: rotate(180deg);
}

.pf-offcanvas-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  padding-left: 12px;
}

.pf-offcanvas-group.open .pf-offcanvas-submenu {
  max-height: 500px;
  /* Arbitrary large height */
}

.pf-offcanvas-submenu .pf-offcanvas-link {
  font-size: 13px;
  padding: 8px 12px;
  border-left: 2px solid var(--pf-border);
  border-radius: 0 8px 8px 0;
  margin-left: 4px;
}

.pf-offcanvas-submenu .pf-offcanvas-link.active,
.pf-offcanvas-submenu .pf-offcanvas-link:hover {
  border-left-color: var(--pf-primary);
}

/* Disable body scroll when open */
body.pf-offcanvas-open {
  overflow: hidden;
}



/* =============================================
   TOASTS (NOTIFICATIONS)
   ============================================= */
.pf-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--pf-z-toast);
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  /* Allows clicking through the container area */
}

.pf-toast {
  background: var(--pf-surface);
  border: 1px solid var(--pf-border);
  box-shadow: var(--pf-shadow-pop);
  border-radius: 12px;
  padding: 16px 20px;
  min-width: 300px;
  max-width: 400px;
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  animation: pf-toast-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  position: relative;
  overflow: hidden;
  border-left: 4px solid var(--pf-primary);
  /* Default accent */
}

.pf-toast.closing {
  animation: pf-toast-out 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.pf-toast-icon {
  font-size: 24px;
  color: var(--pf-primary);
  flex-shrink: 0;
}

.pf-toast-content {
  flex: 1;
}

.pf-toast-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--pf-ink-1);
  margin-bottom: 2px;
}

.pf-toast-message {
  font-size: 13px;
  color: var(--pf-ink-2);
  line-height: 1.5;
}

.pf-toast-close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--pf-ink-3);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.2s;
  margin-top: -4px;
  margin-right: -4px;
}

.pf-toast-close .material-symbols-outlined {
  font-size: 18px;
}

.pf-toast-close:hover {
  background: var(--pf-bg);
  color: var(--pf-ink-1);
}

/* Variants */
.pf-toast-success {
  border-left-color: var(--pf-success);
}

.pf-toast-success .pf-toast-icon {
  color: var(--pf-success);
}

.pf-toast-danger {
  border-left-color: var(--pf-danger);
}

.pf-toast-danger .pf-toast-icon {
  color: var(--pf-danger);
}

.pf-toast-info {
  border-left-color: var(--pf-info);
}

.pf-toast-info .pf-toast-icon {
  color: var(--pf-info);
}

/* Animations */
@keyframes pf-toast-in {
  from {
    opacity: 0;
    transform: translateX(20px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes pf-toast-out {
  to {
    opacity: 0;
    transform: translateX(20px) scale(0.95);
    height: 0;
    margin: 0;
    padding: 0;
  }
}

/* Mobile Toast */
@media (max-width: 767px) {
  .pf-toast-container {
    left: 16px;
    right: 16px;
    bottom: 16px;
    align-items: center;
  }

  .pf-toast {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}

/* =============================================
   FORMS
   ============================================= */
.pf-form-group {
  margin-bottom: 20px;
}

.pf-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--pf-ink-1);
  margin-bottom: 8px;
}

.pf-input,
.pf-textarea,
.pf-select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-md);
  font-size: 14px;
  color: var(--pf-ink-1);
  background: var(--pf-surface);
  transition: all 0.2s;
  font-family: var(--pf-font);
}

.pf-input:focus,
.pf-textarea:focus,
.pf-select:focus {
  outline: none;
  border-color: var(--pf-primary);
  box-shadow: 0 0 0 3px var(--pf-primary-soft);
}

/* Disabled & Readonly States */
.pf-input:disabled,
.pf-textarea:disabled,
.pf-select:disabled {
  background: var(--pf-bg);
  color: var(--pf-ink-3);
  cursor: not-allowed;
  opacity: 0.7;
}

.pf-input[readonly],
.pf-textarea[readonly] {
  background: var(--pf-surface-hover);
  cursor: default;
  border-color: var(--pf-border);
}

.pf-input[readonly]:focus,
.pf-textarea[readonly]:focus {
  box-shadow: none;
  border-color: var(--pf-border);
}

.pf-textarea {
  resize: vertical;
  min-height: 100px;
}

/* Custom Checkbox & Radio */
.pf-control {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 4px 0;
  user-select: none;
}

.pf-checkbox,
.pf-radio {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--pf-border);
  background: var(--pf-surface);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
  flex-shrink: 0;
}

.pf-radio {
  border-radius: 50%;
}

.pf-checkbox:checked,
.pf-radio:checked {
  background: var(--pf-primary);
  border-color: var(--pf-primary);
}

.pf-checkbox:disabled,
.pf-radio:disabled {
  background: var(--pf-bg);
  border-color: var(--pf-ink-4);
  cursor: not-allowed;
  opacity: 0.6;
}

.pf-checkbox:disabled:checked,
.pf-radio:disabled:checked {
  background: var(--pf-ink-4);
  border-color: var(--pf-ink-4);
}

/* NOTE: the checked-state ::after markers for .pf-checkbox / .pf-radio are
   defined further down in the FORM CONTROLS section (CSS-drawn checkmark and
   dot). An earlier rule here used font-family:'Material Icons Round', a font
   the app never loads — removed. */

.pf-radio:checked::after {
  content: '';
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pf-control:hover .pf-checkbox,
.pf-control:hover .pf-radio {
  border-color: var(--pf-primary);
}

/* Custom Select */
.pf-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}

/* Small muted hint text under a field (also reused outside file inputs) */
.pf-file-hint {
  font-size: 12px;
  color: var(--pf-ink-3);
}

/* File Upload (composite: pick from disk + paste + removable list) */
.pf-file-upload {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pf-file-upload-zone {
  width: 100%;
  min-height: 96px;
  border: 2px dashed var(--pf-border);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--pf-surface);
  text-align: center;
  color: inherit;
  font: inherit;
}

.pf-file-upload-zone:hover,
.pf-file-upload-zone:focus-visible {
  border-color: var(--pf-primary);
  background: var(--pf-primary-soft);
  outline: none;
}

.pf-file-upload-icon {
  font-size: 28px;
  color: var(--pf-ink-3);
}

.pf-file-upload-text {
  font-size: 14px;
  color: var(--pf-ink-2);
}

.pf-file-upload-hint {
  font-size: 12px;
  color: var(--pf-ink-3);
}

.pf-file-upload-hint:empty {
  display: none;
}

.pf-file-upload-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pf-file-upload-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--pf-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--pf-surface) 96%, var(--pf-ink-1) 4%);
  list-style: none;
}

.pf-file-upload-item-icon {
  color: var(--pf-ink-3);
  flex-shrink: 0;
}

.pf-file-upload-item-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.pf-file-upload-item-label {
  font-weight: 700;
  color: var(--pf-ink-1);
  font-size: 14px;
}

.pf-file-upload-item-name {
  font-size: 13px;
  color: var(--pf-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-file-upload-item-remove {
  flex-shrink: 0;
}

.pf-file-upload-native,
.pf-file-upload-existing-input {
  display: none;
}

/* =============================================
   SPECIFIC COMPONENTS (HERO, PERSON, VERIF)
   ============================================= */

/* Hero Section */
.pf-hero {
  text-align: center;
  margin-bottom: 40px;
  padding: 20px 0;
}

.pf-hero-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--pf-ink-1);
  margin-bottom: 12px;
}

.pf-hero-title span {
  color: var(--pf-primary);
}

.pf-hero-desc {
  font-size: 18px;
  color: var(--pf-ink-2);
  line-height: 1.6;
}

/* Person Card (Odbiorca/Nadawca) */
.pf-person-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px 0 24px;
}

.pf-person-avatar {
  width: 100px;
  height: 100px;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: var(--pf-shadow-card);
}

.pf-person-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pf-person-placeholder {
  width: 100%;
  height: 100%;
  background: var(--pf-ink-4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pf-ink-3);
}

.pf-person-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--pf-ink-1);
  margin-bottom: 4px;
}

.pf-person-meta {
  font-size: 13px;
  color: var(--pf-ink-3);
}

.pf-person-status {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
}

/* Verification Card */
.pf-verif-status {
  text-align: center;
  padding: 16px 0;
}

.pf-verif-icon {
  font-size: 48px;
  color: var(--pf-warning);
  margin-bottom: 8px;
  display: block;
}

.pf-verif-title {
  font-weight: 700;
  color: var(--pf-ink-1);
  margin-bottom: 4px;
}

.pf-verif-desc {
  font-size: 13px;
  color: var(--pf-ink-3);
}

.pf-verif-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--pf-border);
}

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

.pf-verif-label {
  color: var(--pf-ink-2);
}

.pf-verif-val {
  font-weight: 600;
  color: var(--pf-ink-1);
}

/* Footer Specifics */
.pf-footer {
  margin-top: 60px;
  padding: 40px 0;
  border-top: 1px solid var(--pf-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--pf-ink-3);
}

.pf-footer-links {
  display: flex;
  gap: 24px;
}

.pf-footer-links a:hover {
  text-decoration: underline;
  color: var(--pf-ink-1);
}

@media (max-width: 767px) {
  .pf-footer {
    flex-direction: column-reverse;
    gap: 20px;
    text-align: center;
  }
}

/* =============================================
   SIDEBAR
   ============================================= */
.pf-sidebar {
  width: 220px;
  flex-shrink: 0;
  padding: 24px 0;
}

/* Mobile Sidebar Styling */
@media (max-width: 767px) {
  .pf-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    background: var(--pf-surface);
    z-index: 1050;
    padding: 24px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .pf-sidebar.active {
    transform: translateX(0);
  }

  .pf-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    backdrop-filter: blur(2px);
  }

  .pf-sidebar-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }
}

.pf-sidebar-group {
  margin-bottom: 24px;
}

.pf-sidebar-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pf-ink-3);
  padding: 0 12px 8px;
}

.pf-sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--pf-ink-2);
  border-radius: 12px;
  transition: all 0.15s;
  margin-bottom: 2px;
}

.pf-sidebar-link:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--pf-ink-1);
}

.pf-sidebar-link.active {
  background: var(--pf-surface-hover);
  color: var(--pf-primary);
  font-weight: 600;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}



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

/* Spacing utilities
   ---------------------------------------------------------------
   SINGLE source of truth. This used to be split across two blocks
   ("Spacing" + "Spacing Extended") with different values and an
   inconsistent !important policy, so a class resolved to one of two
   values depending on file position. The values below are exactly
   what shipped before the merge (zero visual change).

   The scale is still not internally coherent - e.g. .pf-px-2 (16px)
   vs .pf-ps-2 + .pf-pe-2 (8px each), and .pf-mt-1 == .pf-mt-2 == 8px.
   Normalising it to one clean ramp is a deliberate follow-up that
   needs a visual-regression pass (see plan.md, PR 2 follow-up).
   --------------------------------------------------------------- */
.pf-m-0 { margin: 0 !important; }
.pf-mt-0 { margin-top: 0 !important; }
.pf-mb-0 { margin-bottom: 0 !important; }
.pf-ms-0 { margin-left: 0 !important; }
.pf-me-0 { margin-right: 0 !important; }
.pf-mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.pf-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.pf-p-0 { padding: 0 !important; }
.pf-pt-0 { padding-top: 0 !important; }
.pf-pb-0 { padding-bottom: 0 !important; }
.pf-ps-0 { padding-left: 0 !important; }
.pf-pe-0 { padding-right: 0 !important; }
.pf-px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.pf-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }

.pf-ms-auto { margin-left: auto !important; }
.pf-mx-auto { margin-left: auto !important; margin-right: auto !important; }

.pf-m-1 {
  margin: 8px !important;
}
.pf-mt-1 {
  margin-top: 8px !important;
}
.pf-mb-1 {
  margin-bottom: 4px !important;
}
.pf-ms-1 {
  margin-left: 4px !important;
}
.pf-me-1 {
  margin-right: 4px !important;
}
.pf-mx-1 {
  margin-left: 4px !important;
  margin-right: 4px !important;
}
.pf-my-1 {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}
.pf-p-1 {
  padding: 8px !important;
}
.pf-pt-1 {
  padding-top: 4px !important;
}
.pf-pb-1 {
  padding-bottom: 4px !important;
}
.pf-ps-1 {
  padding-left: 4px !important;
}
.pf-pe-1 {
  padding-right: 4px !important;
}
.pf-px-1 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.pf-py-1 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.pf-m-2 {
  margin: 16px !important;
}
.pf-mt-2 {
  margin-top: 8px !important;
}
.pf-mb-2 {
  margin-bottom: 8px !important;
}
.pf-ms-2 {
  margin-left: 8px !important;
}
.pf-me-2 {
  margin-right: 8px !important;
}
.pf-mx-2 {
  margin-left: 8px !important;
  margin-right: 8px !important;
}
.pf-my-2 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}
.pf-p-2 {
  padding: 16px !important;
}
.pf-pt-2 {
  padding-top: 8px !important;
}
.pf-pb-2 {
  padding-bottom: 8px !important;
}
.pf-ps-2 {
  padding-left: 8px !important;
}
.pf-pe-2 {
  padding-right: 8px !important;
}
.pf-px-2 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.pf-py-2 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.pf-m-3 {
  margin: 24px !important;
}
.pf-mt-3 {
  margin-top: 16px !important;
}
.pf-mb-3 {
  margin-bottom: 16px !important;
}
.pf-ms-3 {
  margin-left: 16px !important;
}
.pf-me-3 {
  margin-right: 16px !important;
}
.pf-mx-3 {
  margin-left: 16px !important;
  margin-right: 16px !important;
}
.pf-my-3 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}
.pf-p-3 {
  padding: 24px !important;
}
.pf-pt-3 {
  padding-top: 16px !important;
}
.pf-pb-3 {
  padding-bottom: 16px !important;
}
.pf-ps-3 {
  padding-left: 16px !important;
}
.pf-pe-3 {
  padding-right: 16px !important;
}
.pf-px-3 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}
.pf-py-3 {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.pf-m-4 {
  margin: 32px !important;
}
.pf-mt-4 {
  margin-top: 24px !important;
}
.pf-mb-4 {
  margin-bottom: 24px !important;
}
.pf-ms-4 {
  margin-left: 24px !important;
}
.pf-me-4 {
  margin-right: 32px !important;
}
.pf-mx-4 {
  margin-left: 24px !important;
  margin-right: 24px !important;
}
.pf-my-4 {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}
.pf-p-4 {
  padding: 32px !important;
}
.pf-pt-4 {
  padding-top: 24px !important;
}
.pf-pb-4 {
  padding-bottom: 24px !important;
}
.pf-ps-4 {
  padding-left: 24px !important;
}
.pf-pe-4 {
  padding-right: 24px !important;
}
.pf-px-4 {
  padding-left: 32px !important;
  padding-right: 32px !important;
}
.pf-py-4 {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

.pf-m-5 {
  margin: 48px !important;
}
.pf-mt-5 {
  margin-top: 48px !important;
}
.pf-mb-5 {
  margin-bottom: 48px !important;
}
.pf-ms-5 {
  margin-left: 48px !important;
}
.pf-me-5 {
  margin-right: 48px !important;
}
.pf-mx-5 {
  margin-left: 48px !important;
  margin-right: 48px !important;
}
.pf-my-5 {
  margin-top: 48px !important;
  margin-bottom: 48px !important;
}
.pf-p-5 {
  padding: 48px !important;
}
.pf-pt-5 {
  padding-top: 48px !important;
}
.pf-pb-5 {
  padding-bottom: 48px !important;
}
.pf-ps-5 {
  padding-left: 48px !important;
}
.pf-pe-5 {
  padding-right: 48px !important;
}
.pf-px-5 {
  padding-left: 48px !important;
  padding-right: 48px !important;
}
.pf-py-5 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
/* Text */
.pf-text-left,
.pf-text-start {
  text-align: left;
}

.pf-text-center {
  text-align: center;
}

.pf-text-right,
.pf-text-end {
  text-align: right;
}

.pf-text-justify {
  text-align: justify;
}

.pf-text-uppercase {
  text-transform: uppercase;
}

.pf-text-lowercase {
  text-transform: lowercase;
}

.pf-text-capitalize {
  text-transform: capitalize;
}

.pf-text-nowrap {
  white-space: nowrap;
}

.pf-text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-text-primary {
  color: var(--pf-primary);
}

.pf-text-success {
  color: var(--pf-success);
}

.pf-text-warning {
  color: var(--pf-warning);
}

.pf-text-danger {
  color: var(--pf-danger);
}

.pf-text-info {
  color: var(--pf-info);
}

.pf-text-body {
  color: var(--pf-ink-2);
}

.pf-text-muted {
  color: var(--pf-ink-3);
}

.pf-text-light {
  color: var(--pf-ink-4);
}

.pf-text-white {
  color: white;
}

/* Typography */
.pf-fw-bold {
  font-weight: 700;
}

.pf-fw-semibold {
  font-weight: 600;
}

.pf-fw-normal {
  font-weight: 400;
}

.pf-fst-italic {
  font-style: italic;
}

.pf-text-decoration-underline {
  text-decoration: underline;
}

.pf-text-decoration-none {
  text-decoration: none;
}

.pf-text-justify {
  text-align: justify;
}

/* Font Sizes */
.pf-text-xs {
  font-size: 11px;
}

.pf-text-sm {
  font-size: 13px;
}

.pf-text-base {
  font-size: 15px;
}

.pf-text-lg {
  font-size: 18px;
}

.pf-text-xl {
  font-size: 24px;
}

.pf-text-2xl {
  font-size: 32px;
}

/* Borders */
.pf-border {
  border: 1px solid var(--pf-border);
}

.pf-border-top {
  border-top: 1px solid var(--pf-border);
}

.pf-border-bottom {
  border-bottom: 1px solid var(--pf-border);
}

.pf-border-left {
  border-left-style: solid;
  border-left-width: 1px;
}

.pf-border-right {
  border-right-style: solid;
  border-right-width: 1px;
}

.pf-border-start {
  border-left-style: solid;
  border-left-width: 1px;
}

.pf-border-top-4 {
  border-top-width: 4px;
}

.pf-border-top-primary {
  border-top-color: var(--pf-primary);
}

.pf-border-top-success {
  border-top-color: var(--pf-success);
}

.pf-border-top-info {
  border-top-color: var(--pf-info);
}

.pf-border-top-warning {
  border-top-color: var(--pf-warning);
}

.pf-border-top-danger {
  border-top-color: var(--pf-danger);
}

.pf-border-bottom-4 {
  border-bottom-width: 4px;
}

.pf-border-left-4 {
  border-left-width: 4px;
}

.pf-border-right-4 {
  border-right-width: 4px;
}

.pf-border-start-4 {
  border-left-width: 4px;
}

.pf-border-primary {
  border-color: var(--pf-primary);
}

.pf-border-success {
  border-color: var(--pf-success);
}

.pf-border-info {
  border-color: var(--pf-info);
}

.pf-border-warning {
  border-color: var(--pf-warning);
}

.pf-border-danger {
  border-color: var(--pf-danger);
}

.pf-border-0 {
  border: none !important;
}

.pf-rounded {
  border-radius: var(--pf-radius-sm);
}

.pf-rounded-lg {
  border-radius: var(--pf-radius-lg);
}

.pf-rounded-circle {
  border-radius: 50%;
}

.pf-rounded-0 {
  border-radius: 0;
}

/* Display */
.pf-d-inline {
  display: inline;
}

.pf-d-inline-block {
  display: inline-block;
}

.pf-d-none {
  display: none;
}

.pf-d-block {
  display: block;
}

.pf-d-flex {
  display: flex;
}

.pf-d-inline-flex {
  display: inline-flex;
}

.pf-d-grid {
  display: grid;
}

/* Flex utilities */
.pf-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pf-flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pf-gap-1 {
  gap: 8px;
}

.pf-gap-2 {
  gap: 16px;
}

.pf-gap-3 {
  gap: 24px;
}

.pf-flex-wrap {
  flex-wrap: wrap;
}

.pf-flex-nowrap {
  flex-wrap: nowrap;
}

.pf-flex-column {
  flex-direction: column !important;
}

.pf-flex-row {
  flex-direction: row !important;
}

/* Animations */
@keyframes pf-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.pf-fade-up {
  animation: pf-fade-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Cursors */
.pf-cursor-auto {
  cursor: auto;
}

.pf-cursor-default {
  cursor: default;
}

.pf-cursor-pointer {
  cursor: pointer;
}

.pf-cursor-wait {
  cursor: wait;
}

.pf-cursor-text {
  cursor: text;
}

.pf-cursor-move {
  cursor: move;
}

.pf-cursor-help {
  cursor: help;
}

.pf-cursor-not-allowed {
  cursor: not-allowed;
}

.pf-cursor-grab {
  cursor: grab;
}

.pf-cursor-grabbing {
  cursor: grabbing;
}

.pf-cursor-zoom-in {
  cursor: zoom-in;
}

.pf-cursor-zoom-out {
  cursor: zoom-out;
}

/* Responsive */
@media (max-width: 767px) {
  .pf-mobile-hide {
    display: none !important;
  }

  .pf-container {
    padding: 0 16px;
  }
}

/* =============================================
   RESPONSIVE UTILITIES 
   (Generated for sm, md, lg, xl)
   ============================================= */

/* SM (576px+) */
@media (min-width: 576px) {
  .pf-flex-sm-column {
    flex-direction: column !important;
  }

  .pf-flex-sm-row {
    flex-direction: row !important;
  }

  .pf-d-sm-none {
    display: none !important;
  }

  .pf-d-sm-block {
    display: block !important;
  }

  .pf-d-sm-flex {
    display: flex !important;
  }

  .pf-d-sm-inline-block {
    display: inline-block !important;
  }

  .pf-text-sm-left {
    text-align: left !important;
  }

  .pf-text-sm-center {
    text-align: center !important;
  }

  .pf-text-sm-right {
    text-align: right !important;
  }

  .pf-m-sm-0 {
    margin: 0 !important;
  }

  .pf-mt-sm-0 {
    margin-top: 0 !important;
  }

  .pf-mb-sm-0 {
    margin-bottom: 0 !important;
  }

  .pf-p-sm-0 {
    padding: 0 !important;
  }

  .pf-px-sm-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .pf-py-sm-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .pf-m-sm-1 {
    margin: 8px !important;
  }

  .pf-mt-sm-1 {
    margin-top: 8px !important;
  }

  .pf-mb-sm-1 {
    margin-bottom: 8px !important;
  }

  .pf-p-sm-1 {
    padding: 8px !important;
  }

  .pf-px-sm-1 {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .pf-py-sm-1 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .pf-m-sm-2 {
    margin: 16px !important;
  }

  .pf-mt-sm-2 {
    margin-top: 16px !important;
  }

  .pf-mb-sm-2 {
    margin-bottom: 16px !important;
  }

  .pf-p-sm-2 {
    padding: 16px !important;
  }

  .pf-px-sm-2 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .pf-py-sm-2 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .pf-m-sm-3 {
    margin: 24px !important;
  }

  .pf-mt-sm-3 {
    margin-top: 24px !important;
  }

  .pf-mb-sm-3 {
    margin-bottom: 24px !important;
  }

  .pf-p-sm-3 {
    padding: 24px !important;
  }

  .pf-px-sm-3 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .pf-py-sm-3 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .pf-m-sm-4 {
    margin: 32px !important;
  }

  .pf-mt-sm-4 {
    margin-top: 32px !important;
  }

  .pf-mb-sm-4 {
    margin-bottom: 32px !important;
  }

  .pf-p-sm-4 {
    padding: 32px !important;
  }

  .pf-px-sm-4 {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  .pf-py-sm-4 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  .pf-m-sm-5 {
    margin: 48px !important;
  }

  .pf-mt-sm-5 {
    margin-top: 48px !important;
  }

  .pf-mb-sm-5 {
    margin-bottom: 48px !important;
  }

  .pf-p-sm-5 {
    padding: 48px !important;
  }

  .pf-px-sm-5 {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  .pf-py-sm-5 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* MD (768px+) */
@media (min-width: 768px) {
  .pf-desktop-hide {
    display: none !important;
  }

  .pf-flex-md-column {
    flex-direction: column !important;
  }

  .pf-flex-md-row {
    flex-direction: row !important;
  }

  .pf-d-md-none {
    display: none !important;
  }

  .pf-d-md-block {
    display: block !important;
  }

  .pf-d-md-flex {
    display: flex !important;
  }

  .pf-d-md-inline-block {
    display: inline-block !important;
  }

  .pf-text-md-left {
    text-align: left !important;
  }

  .pf-text-md-center {
    text-align: center !important;
  }

  .pf-text-md-right {
    text-align: right !important;
  }

  .pf-m-md-0 {
    margin: 0 !important;
  }

  .pf-mt-md-0 {
    margin-top: 0 !important;
  }

  .pf-mb-md-0 {
    margin-bottom: 0 !important;
  }

  .pf-p-md-0 {
    padding: 0 !important;
  }

  .pf-px-md-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .pf-py-md-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .pf-m-md-1 {
    margin: 8px !important;
  }

  .pf-mt-md-1 {
    margin-top: 8px !important;
  }

  .pf-mb-md-1 {
    margin-bottom: 8px !important;
  }

  .pf-p-md-1 {
    padding: 8px !important;
  }

  .pf-px-md-1 {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .pf-py-md-1 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .pf-m-md-2 {
    margin: 16px !important;
  }

  .pf-mt-md-2 {
    margin-top: 16px !important;
  }

  .pf-mb-md-2 {
    margin-bottom: 16px !important;
  }

  .pf-p-md-2 {
    padding: 16px !important;
  }

  .pf-px-md-2 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .pf-py-md-2 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .pf-m-md-3 {
    margin: 24px !important;
  }

  .pf-mt-md-3 {
    margin-top: 24px !important;
  }

  .pf-mb-md-3 {
    margin-bottom: 24px !important;
  }

  .pf-p-md-3 {
    padding: 24px !important;
  }

  .pf-px-md-3 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .pf-py-md-3 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .pf-m-md-4 {
    margin: 32px !important;
  }

  .pf-mt-md-4 {
    margin-top: 32px !important;
  }

  .pf-mb-md-4 {
    margin-bottom: 32px !important;
  }

  .pf-p-md-4 {
    padding: 32px !important;
  }

  .pf-px-md-4 {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  .pf-py-md-4 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  .pf-m-md-5 {
    margin: 48px !important;
  }

  .pf-mt-md-5 {
    margin-top: 48px !important;
  }

  .pf-mb-md-5 {
    margin-bottom: 48px !important;
  }

  .pf-p-md-5 {
    padding: 48px !important;
  }

  .pf-px-md-5 {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  .pf-py-md-5 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* LG (992px+) */
@media (min-width: 992px) {
  .pf-flex-lg-column {
    flex-direction: column !important;
  }

  .pf-flex-lg-row {
    flex-direction: row !important;
  }

  .pf-d-lg-none {
    display: none !important;
  }

  .pf-d-lg-block {
    display: block !important;
  }

  .pf-d-lg-flex {
    display: flex !important;
  }

  .pf-d-lg-inline-block {
    display: inline-block !important;
  }

  .pf-text-lg-left {
    text-align: left !important;
  }

  .pf-text-lg-center {
    text-align: center !important;
  }

  .pf-text-lg-right {
    text-align: right !important;
  }

  .pf-m-lg-0 {
    margin: 0 !important;
  }

  .pf-mt-lg-0 {
    margin-top: 0 !important;
  }

  .pf-mb-lg-0 {
    margin-bottom: 0 !important;
  }

  .pf-p-lg-0 {
    padding: 0 !important;
  }

  .pf-px-lg-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .pf-py-lg-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .pf-m-lg-1 {
    margin: 8px !important;
  }

  .pf-mt-lg-1 {
    margin-top: 8px !important;
  }

  .pf-mb-lg-1 {
    margin-bottom: 8px !important;
  }

  .pf-p-lg-1 {
    padding: 8px !important;
  }

  .pf-px-lg-1 {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .pf-py-lg-1 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .pf-m-lg-2 {
    margin: 16px !important;
  }

  .pf-mt-lg-2 {
    margin-top: 16px !important;
  }

  .pf-mb-lg-2 {
    margin-bottom: 16px !important;
  }

  .pf-p-lg-2 {
    padding: 16px !important;
  }

  .pf-px-lg-2 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .pf-py-lg-2 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .pf-m-lg-3 {
    margin: 24px !important;
  }

  .pf-mt-lg-3 {
    margin-top: 24px !important;
  }

  .pf-mb-lg-3 {
    margin-bottom: 24px !important;
  }

  .pf-p-lg-3 {
    padding: 24px !important;
  }

  .pf-px-lg-3 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .pf-py-lg-3 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .pf-m-lg-4 {
    margin: 32px !important;
  }

  .pf-mt-lg-4 {
    margin-top: 32px !important;
  }

  .pf-mb-lg-4 {
    margin-bottom: 32px !important;
  }

  .pf-p-lg-4 {
    padding: 32px !important;
  }

  .pf-px-lg-4 {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  .pf-py-lg-4 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  .pf-m-lg-5 {
    margin: 48px !important;
  }

  .pf-mt-lg-5 {
    margin-top: 48px !important;
  }

  .pf-mb-lg-5 {
    margin-bottom: 48px !important;
  }

  .pf-p-lg-5 {
    padding: 48px !important;
  }

  .pf-px-lg-5 {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  .pf-py-lg-5 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* XL (1200px+) - Minimal set */
@media (min-width: 1200px) {
  .pf-flex-xl-column {
    flex-direction: column !important;
  }

  .pf-flex-xl-row {
    flex-direction: row !important;
  }

  .pf-d-xl-none {
    display: none !important;
  }

  .pf-d-xl-block {
    display: block !important;
  }

  .pf-d-xl-flex {
    display: flex !important;
  }

  .pf-text-xl-left {
    text-align: left !important;
  }

  .pf-text-xl-center {
    text-align: center !important;
  }

  .pf-text-xl-right {
    text-align: right !important;
  }
}

.pf-g-2 {
  gap: 8px;
}

.pf-g-3 {
  gap: 16px;
}

.pf-g-4 {
  gap: 24px;
}

/* Flex Utils */
.pf-align-items-center {
  align-items: center !important;
}

.pf-align-items-start {
  align-items: flex-start !important;
}

.pf-align-items-end {
  align-items: flex-end !important;
}

.pf-justify-content-between {
  justify-content: space-between !important;
}

.pf-justify-content-center {
  justify-content: center !important;
}

.pf-justify-content-end {
  justify-content: flex-end !important;
}

/* Sizing */
.pf-w-100 {
  width: 100% !important;
}

.pf-h-100 {
  height: 100% !important;
}

/* Colors & Bg & Text */
.pf-bg-light {
  background-color: var(--pf-bg);
}

.pf-bg-white {
  background-color: var(--pf-surface);
}

.pf-bg-primary {
  background-color: var(--pf-primary);
}

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

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

.pf-bg-danger {
  background-color: var(--pf-danger);
}

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

.pf-bg-primary-soft {
  background-color: var(--pf-primary-soft);
}

.pf-bg-success-soft {
  background-color: var(--pf-success-soft);
}

.pf-bg-warning-soft {
  background-color: var(--pf-warning-soft);
}

.pf-bg-danger-soft {
  background-color: var(--pf-danger-soft);
}

.pf-bg-info-soft {
  background-color: var(--pf-info-soft);
}

.pf-text-uppercase {
  text-transform: uppercase;
}

.pf-small {
  font-size: 0.85em;
}

.pf-h1,
.pf-h2,
.pf-h3,
.pf-h4,
.pf-h5,
.pf-h6 {
  color: var(--pf-ink-1);
  font-weight: 700;
  line-height: 1.2;
}

.pf-h1 {
  font-size: 2rem;
}

.pf-h2 {
  font-size: 1.75rem;
}

.pf-h3 {
  font-size: 1.5rem;
}

.pf-h4 {
  font-size: 1.25rem;
}

.pf-h5 {
  font-size: 1.05rem;
}

.pf-h6 {
  font-size: 0.95rem;
}

.pf-display-1 {
  font-size: 5rem;
  font-weight: 300;
  line-height: 1.2;
}

.pf-display-2 {
  font-size: 4.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.pf-display-3 {
  font-size: 4rem;
  font-weight: 300;
  line-height: 1.2;
}

.pf-display-4 {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.pf-display-5 {
  font-size: 3rem;
  font-weight: 300;
  line-height: 1.2;
}

.pf-display-6 {
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.pf-lead {
  font-size: 1.25rem;
  font-weight: 300;
}

.pf-fs-1 {
  font-size: 2.5rem !important;
}

.pf-fs-4 {
  font-size: 1.5rem !important;
}

.pf-fs-6 {
  font-size: 1rem !important;
}

/* Misc */
.pf-sticky-top {
  position: sticky;
  top: 0;
  z-index: 1020;
}

.pf-position-relative {
  position: relative;
}

.pf-shadow {
  box-shadow: var(--pf-shadow-card);
}

.pf-overflow-hidden {
  overflow: hidden;
}

.pf-overflow-auto {
  overflow: auto;
}

.pf-align-middle {
  vertical-align: middle !important;
}

.pf-main-compact {
  min-width: 0;
  max-width: 520px;
  width: 100%;
}

.pf-min-w-0 {
  min-width: 0;
}

.pf-icon-xs,
.pf-icon-sm,
.pf-icon-md,
.pf-icon-lg,
.pf-icon-xl {
  line-height: 1;
  flex-shrink: 0;
}

.pf-icon-xs {
  font-size: 14px !important;
}

.pf-icon-sm {
  font-size: 16px !important;
}

.pf-icon-md {
  font-size: 18px !important;
}

.pf-icon-lg {
  font-size: 24px !important;
}

.pf-icon-xl {
  font-size: 28px !important;
}

@keyframes pf-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.pf-spin {
  animation: pf-spin 1s linear infinite;
  display: inline-block;
}

/* --- COMPONENTS --- */

/* Dropdown */
.pf-dropdown {
  position: relative;
  display: inline-block;
}

.pf-dropdown-toggle {
  cursor: pointer;
}

.pf-dropdown-toggle::after {
  display: none;
}

/* No default arrow */

/* Opt-in caret icon for dropdown triggers that should read as a selector
   (e.g. bulk-actions menus) rather than as an action button. Markup:
   <button class="pf-dropdown-toggle" aria-expanded="false">
     Label <span class="material-symbols-outlined pf-dropdown-toggle-caret">expand_more</span>
   </button> */
.pf-dropdown-toggle-caret {
  transition: transform 0.2s ease;
}

.pf-dropdown-toggle[aria-expanded="true"] .pf-dropdown-toggle-caret {
  transform: rotate(180deg);
}
.pf-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  min-width: 240px;
  padding: 8px 0;
  margin: 8px 0 0;
  background-color: var(--pf-surface);
  background-clip: padding-box;
  border: 1px solid var(--pf-border);
  border-radius: 12px;
  box-shadow: var(--pf-shadow-pop);
}

.pf-dropdown-menu.show,
.pf-dropdown-menu.open {
  display: block;
  animation: pf-fade-up 0.2s ease-out;
}

.pf-dropdown-menu-end {
  right: 0;
  left: auto;
}

.pf-dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 16px;
  clear: both;
  font-weight: 400;
  color: var(--pf-ink-2);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  transition: all 0.2s;
}

.pf-dropdown-item:hover {
  background-color: var(--pf-bg);
  color: var(--pf-ink-1);
}

.pf-dropdown-item-danger {
  color: var(--pf-danger) !important;
}

.pf-dropdown-item-danger:hover {
  background-color: var(--pf-danger-soft) !important;
  color: var(--pf-danger) !important;
}

.pf-dropdown-item-warning {
  color: var(--pf-warning) !important;
}

.pf-dropdown-item-warning:hover {
  background-color: var(--pf-warning-soft) !important;
  color: var(--pf-warning) !important;
}

.pf-dropdown-item-info {
  color: var(--pf-info) !important;
}

.pf-dropdown-item-info:hover {
  background-color: var(--pf-info-soft) !important;
  color: var(--pf-info) !important;
}

.pf-dropdown-item-success {
  color: var(--pf-success) !important;
}

.pf-dropdown-item-success:hover {
  background-color: var(--pf-success-soft) !important;
  color: var(--pf-success) !important;
}

.pf-dropdown-item-primary {
  color: var(--pf-primary) !important;
}

.pf-dropdown-item-primary:hover {
  background-color: var(--pf-primary-soft) !important;
  color: var(--pf-primary) !important;
}

.pf-notification-menu {
  width: 320px;
  max-width: 100vw;
}

.pf-notification-badge {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  font-size: 10px !important;
  padding: 2px 4px !important;
  border-radius: 10px !important;
  transform: translate(10%, -10%) !important;
  line-height: 1 !important;
}

.pf-notification-item {
  transition: background-color 0.2s ease;
}

.pf-notification-item:hover {
  background-color: var(--pf-surface-hover);
}

.pf-notification-link {
  color: inherit;
  flex: 1;
  min-width: 0;
}

.pf-notification-icon-wrap {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.pf-notification-action {
  width: 28px;
  height: 28px;
  padding: 0;
  flex-shrink: 0;
  opacity: 0.4;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.pf-notification-item:hover .pf-notification-action,
.pf-notification-action:focus {
  opacity: 1;
}

.pf-notification-action:hover {
  opacity: 1;
  color: var(--pf-success) !important;
}

.pf-dropdown-header {
  padding: 8px 16px;
  font-weight: 600;
  color: var(--pf-ink-1);
  font-size: 0.9em;
}

.pf-dropdown-divider {
  height: 0;
  margin: 8px 0;
  overflow: hidden;
  border-top: 1px solid var(--pf-border);
}

/* Avatar */
.pf-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--pf-primary), #ff9485);
  color: white;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(var(--pf-primary-rgb), 0.25);
}

.pf-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pf-avatar-xs {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.pf-avatar-sm {
  width: 36px;
  height: 36px;
  font-size: 14px;
}

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

/* List Group */
.pf-list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
}

.pf-list-group-flush .pf-list-group-item {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

.pf-list-group-flush .pf-list-group-item:first-child {
  border-top: 0;
}

.pf-list-group-flush .pf-list-group-item:last-child {
  border-bottom: 0;
}

.pf-list-group-item {
  position: relative;
  display: block;
  padding: 12px 16px;
  color: var(--pf-ink-2);
  text-decoration: none;
  background-color: var(--pf-surface);
  border: 1px solid var(--pf-border);
  margin-bottom: -1px;
  transition: all 0.2s;
}

.pf-list-group-item:hover {
  background-color: var(--pf-surface-hover);
  z-index: 1;
}

.pf-list-group-item.active {
  z-index: 2;
  color: var(--pf-ink-1);
  background-color: var(--pf-primary-soft);
  font-weight: 600;
  border-color: var(--pf-border);
  /* Keep border subtle */
}

/* Timeline */
.pf-timeline {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 20px 0;
}

.pf-timeline::before {
  content: '';
  position: absolute;
  top: 34px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--pf-border);
  z-index: 0;
}

.pf-timeline-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.pf-timeline-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pf-surface);
  border: 2px solid var(--pf-border);
  color: var(--pf-ink-3);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 0 0 4px var(--pf-surface);
  position: relative;
  z-index: 2;
}

.pf-timeline-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--pf-ink-3);
  text-align: center;
}

/* Done State */
.pf-timeline-step.done .pf-timeline-dot {
  background: var(--pf-primary);
  border-color: var(--pf-primary);
  color: white;
}

.pf-timeline-step.done .pf-timeline-label {
  color: var(--pf-ink-1);
}

/* Active State */
.pf-timeline-step.active .pf-timeline-dot {
  background: var(--pf-surface);
  border-color: var(--pf-primary);
  color: var(--pf-primary);
  transform: scale(1.1);
  box-shadow: 0 0 0 6px var(--pf-primary-soft);
}

.pf-timeline-step.active .pf-timeline-label {
  color: var(--pf-primary);
  font-weight: 700;
}

.pf-timeline-step:hover .pf-timeline-dot {
  transform: scale(1.1);
  box-shadow: 0 0 0 6px var(--pf-primary-soft);
}

/* =============================================
   SPINNERS
   ============================================= */
/* @keyframes pf-spin is defined once, above in the ANIMATIONS section. */

.pf-spinner {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: pf-spin 0.75s linear infinite;
}

.pf-spinner-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.2em;
}

.pf-spinner-lg {
  width: 3rem;
  height: 3rem;
  border-width: 0.3em;
}

/* Spinner variants */
.pf-spinner-primary {
  color: var(--pf-primary);
}

.pf-spinner-secondary {
  color: var(--pf-ink-3);
}

.pf-spinner-success {
  color: var(--pf-success);
}

.pf-spinner-danger {
  color: var(--pf-danger);
}

.pf-spinner-warning {
  color: var(--pf-warning);
}

.pf-spinner-info {
  color: var(--pf-info);
}

.pf-spinner-light {
  color: var(--pf-surface);
}

/* =============================================
   TOOLTIPS
   ============================================= */
[data-pf-tooltip] {
  position: relative;
  cursor: pointer;
}

/* Tooltip Body */
[data-pf-tooltip]:not(.pf-tooltip-bound)::after {
  content: attr(data-pf-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--pf-ink-1);
  color: var(--pf-bg);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: var(--pf-shadow-pop);
  z-index: 1000;
  font-weight: 500;
  visibility: hidden;
  margin-bottom: 6px;
}

/* Tooltip Arrow */
[data-pf-tooltip]:not(.pf-tooltip-bound)::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  border: 6px solid transparent;
  border-top-color: var(--pf-ink-1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 1000;
  visibility: hidden;
  margin-bottom: -6px;
}

/* Hover State */
[data-pf-tooltip]:not(.pf-tooltip-bound):hover::after,
[data-pf-tooltip]:not(.pf-tooltip-bound):hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Positions */

/* Bottom */
[data-pf-tooltip-pos="bottom"]:not(.pf-tooltip-bound)::after {
  top: 100%;
  bottom: auto;
  transform: translateX(-50%) translateY(8px);
  margin-bottom: 0;
  margin-top: 6px;
}

[data-pf-tooltip-pos="bottom"]:not(.pf-tooltip-bound)::before {
  top: 100%;
  bottom: auto;
  transform: translateX(-50%) translateY(4px);
  border-top-color: transparent;
  border-bottom-color: var(--pf-ink-1);
  margin-bottom: 0;
  margin-top: -6px;
}

[data-pf-tooltip-pos="bottom"]:not(.pf-tooltip-bound):hover::after,
[data-pf-tooltip-pos="bottom"]:not(.pf-tooltip-bound):hover::before {
  transform: translateX(-50%) translateY(0);
}

/* Right */
[data-pf-tooltip-pos="right"]:not(.pf-tooltip-bound)::after {
  left: 100%;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%) translateX(8px);
  margin-bottom: 0;
  margin-left: 6px;
}

[data-pf-tooltip-pos="right"]:not(.pf-tooltip-bound)::before {
  left: 100%;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%) translateX(4px);
  border-top-color: transparent;
  border-right-color: var(--pf-ink-1);
  margin-bottom: 0;
  margin-left: -6px;
}

[data-pf-tooltip-pos="right"]:not(.pf-tooltip-bound):hover::after,
[data-pf-tooltip-pos="right"]:not(.pf-tooltip-bound):hover::before {
  transform: translateY(-50%) translateX(0);
}

/* Left */
[data-pf-tooltip-pos="left"]:not(.pf-tooltip-bound)::after {
  right: 100%;
  left: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%) translateX(-8px);
  margin-bottom: 0;
  margin-right: 6px;
}

[data-pf-tooltip-pos="left"]:not(.pf-tooltip-bound)::before {
  right: 100%;
  left: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%) translateX(-4px);
  border-top-color: transparent;
  border-left-color: var(--pf-ink-1);
  margin-bottom: 0;
  margin-right: -6px;
}

[data-pf-tooltip-pos="left"]:not(.pf-tooltip-bound):hover::after,
[data-pf-tooltip-pos="left"]:not(.pf-tooltip-bound):hover::before {
  transform: translateY(-50%) translateX(0);
}

.pf-tooltip-layer {
  position: fixed;
  top: 0;
  left: 0;
  max-width: min(320px, calc(100vw - 16px));
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--pf-ink-1);
  color: var(--pf-bg);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--pf-shadow-pop);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.16s ease, visibility 0.16s ease;
  z-index: var(--pf-z-tooltip);
}

.pf-tooltip-layer.visible {
  opacity: 1;
  visibility: visible;
}

.pf-tooltip-layer.multiline {
  white-space: normal;
}

.pf-tooltip-arrow {
  position: fixed;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s ease, visibility 0.16s ease;
  z-index: calc(var(--pf-z-tooltip) - 1);
}

.pf-tooltip-arrow.visible {
  opacity: 1;
  visibility: visible;
}

/* =============================================
   CHECKS & RADIOS
   ============================================= */
.pf-control {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  position: relative;
  min-height: 24px;
}

.pf-checkbox,
.pf-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--pf-border);
  border-radius: 6px;
  background-color: var(--pf-surface);
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

.pf-checkbox:hover,
.pf-radio:hover {
  border-color: var(--pf-ink-3);
  background-color: var(--pf-surface-hover);
}

.pf-checkbox:checked,
.pf-radio:checked {
  background-color: var(--pf-primary);
  border-color: var(--pf-primary);
  box-shadow: 0 2px 6px rgba(var(--pf-primary-rgb), 0.3);
}

.pf-checkbox:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 6px;
  border-bottom: 2px solid white;
  border-left: 2px solid white;
  transform: translate(-50%, -60%) rotate(-45deg);
}

.pf-radio {
  border-radius: 50%;
}

.pf-radio:checked::after {
  content: '';
  width: 8px;
  height: 8px;
  background-color: white;
  border-radius: 50%;
}

.pf-checkbox:disabled,
.pf-radio:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--pf-bg);
}

/* =============================================
   SWITCH
   ============================================= */
.pf-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.pf-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.pf-switch-slider {
  position: relative;
  width: 44px;
  height: 24px;
  background-color: var(--pf-border);
  border-radius: var(--pf-radius-xl);
  transition: .3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.pf-switch-slider:before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: .3s cubic-bezier(0.4, 0.0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.pf-switch input:checked+.pf-switch-slider {
  background-color: var(--pf-primary);
}

.pf-switch input:checked+.pf-switch-slider:before {
  transform: translateX(20px);
}

.pf-switch input:disabled+.pf-switch-slider {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--pf-bg);
}

.pf-switch input:disabled~.pf-switch-label {
  opacity: 0.6;
}

.pf-switch-label {
  font-size: 14px;
  color: var(--pf-ink-1);
}

/* =============================================
   INPUT GROUPS
   ============================================= */
.pf-input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

/* Inputs take available space */
.pf-input-group>.pf-input,
.pf-input-group>.pf-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  border-radius: 0;
}

/* Addons take content width and stretch height */
.pf-input-group>.pf-input-group-text,
.pf-input-group>.pf-btn {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  border-radius: 0;
  height: auto;
}

.pf-input-group>.pf-input:focus,
.pf-input-group>.pf-select:focus,
.pf-input-group>.pf-btn:focus {
  z-index: 3;
}

/* Fix borders for first item */
.pf-input-group>:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

/* Fix borders for last item */
.pf-input-group>:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* Remove side borders/margins for middle items */
.pf-input-group>:not(:first-child) {
  margin-left: -1px;
}

/* Input Group Text (Addon Styles) */
.pf-input-group-text {
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--pf-ink-2);
  text-align: center;
  white-space: nowrap;
  background-color: var(--pf-bg);
  border: 1px solid var(--pf-border);
}

/* =============================================
   DATE RANGE FIELD
   ============================================= */
.pf-date-range {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pf-date-range>.pf-input {
  flex: 1 1 140px;
  min-width: 0;
}

.pf-date-range-sep {
  flex: 0 0 auto;
  color: var(--pf-ink-2);
  font-weight: 500;
}

/* =============================================
   CAROUSEL
   ============================================= */
.pf-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--pf-radius-lg);
}

/* Viewport — clips the track */
.pf-carousel-viewport {
  overflow: hidden;
  width: 100%;
}

/* Track — holds all slides, moves via transform */
.pf-carousel-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Single slide */
.pf-carousel-slide {
  flex: 0 0 60%;
  max-width: 60%;
  padding: 0 8px;
  box-sizing: border-box;
  transition: opacity 0.5s, transform 0.5s;
  opacity: 0.5;
  transform: scale(0.88);
}

/* Active (center) slide */
.pf-carousel-slide.active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

/* Slide image */
.pf-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--pf-radius-lg);
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--pf-bg);
}

/* Slide caption */
.pf-carousel-caption {
  text-align: center;
  padding: 12px 8px 0;
  font-size: 13px;
  color: var(--pf-ink-3);
  font-weight: 500;
}

/* Navigation arrows */
.pf-carousel-prev,
.pf-carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pf-surface-glass);
  backdrop-filter: blur(8px);
  border: 1px solid var(--pf-border);
  color: var(--pf-ink-1);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--pf-shadow-card);
}

.pf-carousel-prev {
  left: 12px;
}

.pf-carousel-next {
  right: 12px;
}

.pf-carousel-prev:hover,
.pf-carousel-next:hover {
  background: var(--pf-surface);
  box-shadow: var(--pf-shadow-hover);
  transform: translateY(-50%) scale(1.08);
}

/* Dot indicators */
.pf-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 16px 0 4px;
}

.pf-carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pf-ink-4);
  border: none;
  cursor: pointer;
  transition: all 0.25s;
  padding: 0;
}

.pf-carousel-dot.active {
  background: var(--pf-primary);
  transform: scale(1.25);
}

.pf-carousel-dot:hover:not(.active) {
  background: var(--pf-ink-3);
}

/* Mobile: single slide view */
@media (max-width: 767px) {
  .pf-carousel-slide {
    flex: 0 0 85%;
    max-width: 85%;
    padding: 0 6px;
  }

  .pf-carousel-prev,
  .pf-carousel-next {
    width: 36px;
    height: 36px;
  }

  .pf-carousel-prev {
    left: 6px;
  }

  .pf-carousel-next {
    right: 6px;
  }
}

/* =============================================
   LISTS & TYPOGRAPHY LISTS
   ============================================= */
ul,
ol {
  margin: 0 0 1rem 0;
  padding: 0;
  list-style: none;
  color: var(--pf-ink-2);
}

ul li,
ol li {
  position: relative;
  margin-bottom: 0.5rem;
  padding-left: 1.75rem;
  line-height: 1.6;
}

ul li:last-child,
ol li:last-child {
  margin-bottom: 0;
}

/* Base unordered list dot */
ul:not(ol):not(.pf-list-icon):not(.pf-file-upload-list)>li::before {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 0.6rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--pf-primary);
  transition: all 0.2s ease;
}

/* Hover effect on list items */
ul:not(ol):not(.pf-list-icon):not(.pf-file-upload-list)>li:hover::before {
  transform: scale(1.3);
  background-color: var(--pf-primary-dark);
}

/* Multiple Nesting Support */
ul ul,
ul ol,
ol ul,
ol ol {
  margin-top: 0.5rem;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

ul li li,
ol li li {
  position: relative;
  margin-bottom: 0.375rem;
  padding-left: 1.75rem;
  color: var(--pf-ink-2);
  font-size: 0.95em;
}

/* Nesting Level 2 */
ul li>ul>li::before {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 0.55rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1.5px solid var(--pf-primary);
  background-color: transparent;
  transition: all 0.2s ease;
}

/* Nesting Level 3+ */
ul li li>ul>li::before {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 0.55rem;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background-color: var(--pf-primary);
  transition: all 0.2s ease;
}

/* Nested hover effect corrections */
ul li>ul>li:hover::before {
  background-color: var(--pf-primary-soft);
}

ul li li>ul>li:hover::before {
  background-color: var(--pf-primary-dark);
}

/* Ordered Lists support inline numbers */
ol {
  counter-reset: pf-counter-lvl1;
}

ol>li {
  padding-left: 2rem;
}

ol>li::before {
  content: counter(pf-counter-lvl1) ".";
  counter-increment: pf-counter-lvl1;
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  background: none;
  color: var(--pf-primary);
  font-weight: 700;
  font-size: 1rem;
}

/* Nested Ordered Lists Level 2 */
ol li>ol {
  counter-reset: pf-counter-lvl2;
}

ol li>ol>li {
  padding-left: 2rem;
}

ol li>ol>li::before {
  content: counter(pf-counter-lvl1) "." counter(pf-counter-lvl2);
  counter-increment: pf-counter-lvl2;
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--pf-primary);
  font-weight: 600;
  font-size: 0.9em;
}

/* Nested Ordered Lists Level 3 */
ol li li>ol {
  counter-reset: pf-counter-lvl3;
}

ol li li>ol>li {
  padding-left: 2.75rem;
}

ol li li>ol>li::before {
  content: counter(pf-counter-lvl1) "." counter(pf-counter-lvl2) "." counter(pf-counter-lvl3) ".";
  counter-increment: pf-counter-lvl3;
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  background: none;
  border: none;
  font-weight: 500;
  color: var(--pf-primary);
}

/* Nested Ordered Lists Level 4 */
ol li li li>ol {
  counter-reset: pf-counter-lvl4;
}

ol li li li>ol>li {
  padding-left: 3.5rem;
}

ol li li li>ol>li::before {
  content: counter(pf-counter-lvl1) "." counter(pf-counter-lvl2) "." counter(pf-counter-lvl3) "." counter(pf-counter-lvl4) ".";
  counter-increment: pf-counter-lvl4;
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  background: none;
  border: none;
  font-weight: 400;
  color: var(--pf-primary);
}

/* List variants (with material icons) */
.pf-list-icon {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
}

.pf-list-icon li {
  position: relative;
  padding-left: 2.25rem;
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.pf-list-icon li::before {
  content: none;
  display: none;
}

.pf-list-icon .pf-icon {
  position: absolute;
  left: 0;
  top: 0.1rem;
  color: var(--pf-primary);
  font-size: 1.25rem;
}

/* =====================================================================
   PAKAFRONT ENHANCEMENTS
   Accessibility, interaction states and utilities added during the
   2026-09 frontend consistency pass. Kept in one block so the additions
   are easy to review; fold into the relevant sections over time.
   ===================================================================== */

/* ---- Tokens: radius scale, primary-as-rgb, and compat aliases -------- */
:root {
  --pf-radius-sm: 8px;
  --pf-radius-md: 10px;
  --pf-radius-lg: 16px;
  --pf-radius-xl: 24px;
  --pf-radius-pill: 999px;

  --pf-primary-rgb: 253, 92, 76;

  /* Compat aliases. Canonical names are --pf-ink-*, --pf-border, --pf-surface.
     Older page CSS referenced these names and silently fell back to
     hard-coded hex (so it never themed in dark mode). Prefer the canonical
     names in new code. */
  --pf-border-color: var(--pf-border);
  --pf-text: var(--pf-ink-2);
  --pf-text-color: var(--pf-ink-1);
  --pf-text-muted: var(--pf-ink-3);
  --pf-white: var(--pf-surface);
  --pf-bg-soft: var(--pf-bg);
  --pf-bg-light: var(--pf-bg);
  --pf-shadow-md: var(--pf-shadow-card);
  --pf-shadow-lg: var(--pf-shadow-pop);

  /* Layering ladder. Components still mostly use literals; adopt these
     incrementally. The important invariant: modal/toast/tooltip sit above
     offcanvas + hamburger. */
  --pf-z-header: 50;
  --pf-z-dropdown: 1000;
  --pf-z-sticky: 1020;
  --pf-z-overlay: 1040;
  --pf-z-sidebar: 1050;
  --pf-z-hamburger: 1100;
  --pf-z-offcanvas-backdrop: 1110;
  --pf-z-offcanvas: 1120;
  --pf-z-modal: 2000;
  --pf-z-toast: 2050;
  --pf-z-tooltip: 2100;
}

/* Dark mode: real elevation values (black-on-black shadows are invisible,
   so cards / modals / dropdowns / toasts lose their separation). */
[data-theme="dark"] {
  --pf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --pf-shadow-card: 0 4px 10px -2px rgba(0, 0, 0, 0.5);
  --pf-shadow-hover: 0 12px 22px -6px rgba(0, 0, 0, 0.6);
  --pf-shadow-pop: 0 16px 44px -12px rgba(0, 0, 0, 0.7);
}

/* ---- Visible keyboard focus (framework had no :focus-visible at all) - */
:where(a, button, [role="button"], summary,
  .pf-btn, .pf-nav-link, .pf-sidebar-link, .pf-tab-link, .pf-dropdown-item,
  .pf-accordion-button, .pf-modal-close, .pf-toast-close, .pf-offcanvas-close,
  .pf-carousel-prev, .pf-carousel-next, .pf-carousel-dot):focus-visible {
  outline: 2px solid var(--pf-primary);
  outline-offset: 2px;
}

.pf-checkbox:focus-visible,
.pf-radio:focus-visible {
  outline: 2px solid var(--pf-primary);
  outline-offset: 2px;
}

/* Custom controls hide their native input — forward the ring to the skin. */
.pf-switch input:focus-visible + .pf-switch-slider {
  outline: 2px solid var(--pf-primary);
  outline-offset: 2px;
}

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

  .pf-card:hover,
  .pf-btn:hover {
    transform: none !important;
  }

  .pf-fade-up {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---- Buttons: press state + the missing semantic hovers ------------- */
.pf-btn:active:not(:disabled) {
  transform: translateY(0);
  filter: brightness(0.92);
}

.pf-btn-success:hover:not(:disabled),
.pf-btn-warning:hover:not(:disabled),
.pf-btn-info:hover:not(:disabled),
.pf-btn-danger:hover:not(:disabled) {
  filter: brightness(0.94);
  transform: translateY(-1px);
}

/* White on --pf-warning (#f59e0b) is ~2.1:1. Dark text clears AA in both
   themes (the button background stays amber in dark mode too). */
.pf-btn-warning {
  color: #1f2937;
}

/* Solid semantic buttons: the token hues give white text only 2.5-3.7:1.
   Darken the button background (not the token) so white passes WCAG AA. */
.pf-btn-success { background: #0d8f63; }
.pf-btn-danger  { background: #d42a2a; }
.pf-btn-info    { background: #2563eb; }

.pf-btn-success:hover:not(:disabled) { background: #0b7d57; }
.pf-btn-danger:hover:not(:disabled)  { background: #be2020; }
.pf-btn-info:hover:not(:disabled)    { background: #1d4ed8; }

/* .pf-btn-primary keeps the coral brand colour (#fd5c4c). White text on it is
   ~3:1 - a deliberate brand tradeoff; changing it needs design sign-off. */

.pf-btn-ghost-primary:hover:not(:disabled) { background: var(--pf-primary-soft); }
.pf-btn-ghost-success:hover:not(:disabled) { background: var(--pf-success-soft); }
.pf-btn-ghost-warning:hover:not(:disabled) { background: var(--pf-warning-soft); }
.pf-btn-ghost-danger:hover:not(:disabled)  { background: var(--pf-danger-soft); }
.pf-btn-ghost-info:hover:not(:disabled)    { background: var(--pf-info-soft); }

/* ---- Button loading state (referenced by app JS, never defined) ----- */
.pf-btn-loading,
.pf-btn.loading {
  position: relative;
  pointer-events: none;
  color: transparent !important;
}

.pf-btn-loading > *,
.pf-btn.loading > * {
  visibility: hidden;
}

.pf-btn-loading::after,
.pf-btn.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  margin: -0.5em 0 0 -0.5em;
  border: 2px solid #fff;
  border-right-color: transparent;
  border-radius: 50%;
  animation: pf-spin 0.7s linear infinite;
  visibility: visible;
}

/* Low-emphasis buttons have a light background — spin in ink, not white. */
.pf-btn-secondary.pf-btn-loading::after,
.pf-btn-outline-primary.pf-btn-loading::after,
.pf-btn-outline-secondary.pf-btn-loading::after,
.pf-btn-ghost.pf-btn-loading::after,
.pf-btn-secondary.loading::after,
.pf-btn-ghost.loading::after {
  border-color: var(--pf-ink-2);
  border-right-color: transparent;
}

/* ---- Spinner: white variant used across the verification modals ---- */
.pf-spinner-white {
  color: #fff;
}

/* ---- Contrast: colored text on -soft tints is too pale (2.0-3.0:1) -- */
.pf-badge-success, .pf-alert-success { color: #047857; }
.pf-badge-warning, .pf-alert-warning { color: #b45309; }
.pf-badge-danger,  .pf-alert-danger  { color: #b91c1c; }
.pf-badge-info,    .pf-alert-info    { color: #1d4ed8; }
.pf-badge-primary { color: var(--pf-primary-dark); }

[data-theme="dark"] .pf-badge-success, [data-theme="dark"] .pf-alert-success { color: #6ee7b7; }
[data-theme="dark"] .pf-badge-warning, [data-theme="dark"] .pf-alert-warning { color: #fcd34d; }
[data-theme="dark"] .pf-badge-danger,  [data-theme="dark"] .pf-alert-danger  { color: #fca5a5; }
[data-theme="dark"] .pf-badge-info,    [data-theme="dark"] .pf-alert-info    { color: #93c5fd; }

/* ---- Dark-mode hover gaps (rules that only had rgba(0,0,0,...) ) ---- */
[data-theme="dark"] .pf-nav-link:hover { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .pf-sidebar-link:hover { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .pf-offcanvas-close:hover { background: rgba(255, 255, 255, 0.08); }

/* ---- Form validation pattern (framework had none) ------------------ */
.pf-input.pf-is-invalid,
.pf-textarea.pf-is-invalid,
.pf-select.pf-is-invalid,
.pf-input[aria-invalid="true"],
.pf-textarea[aria-invalid="true"],
.pf-select[aria-invalid="true"] {
  border-color: var(--pf-danger);
  box-shadow: 0 0 0 3px var(--pf-danger-soft);
}

.pf-field-error {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #b91c1c;
}

[data-theme="dark"] .pf-field-error {
  color: #fca5a5;
}

.pf-form-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--pf-ink-3);
}

.pf-label-required::after,
.pf-label.pf-required::after {
  content: " *";
  color: var(--pf-danger);
  font-weight: 700;
}

/* Control locked during submit (set by changeFormState on select/checkbox/
   radio/file, where `disabled` would drop the value from a native submit). */
.pf-locked {
  pointer-events: none;
  opacity: 0.6;
}


/* ---- Touch: bring interactive controls up to a 44px target -------- */
@media (hover: none) and (pointer: coarse) {
  .pf-btn { min-height: 44px; }
  .pf-btn-sm { min-height: 40px; }

  .pf-modal-close,
  .pf-toast-close,
  .pf-offcanvas-close,
  .pf-notification-action,
  .pf-carousel-prev,
  .pf-carousel-next {
    min-width: 44px;
    min-height: 44px;
  }

  .pf-carousel-dot { width: 14px; height: 14px; }
}

/* ---- Utilities the app already references but were never defined -- */
.pf-text-ink-1 { color: var(--pf-ink-1) !important; }
.pf-text-ink-2 { color: var(--pf-ink-2) !important; }
.pf-text-ink-3 { color: var(--pf-ink-3) !important; }
.pf-fw-medium { font-weight: 500 !important; }
.pf-font-bold { font-weight: 700 !important; }
.pf-fs-sm { font-size: 13px !important; }
.pf-list-unstyled { list-style: none !important; padding-left: 0 !important; margin: 0 !important; }
.pf-bg-transparent { background: transparent !important; }
.pf-max-w-100 { max-width: 100% !important; }
.pf-flex-grow-1 { flex-grow: 1 !important; }
.pf-mt-auto { margin-top: auto !important; }
.pf-gap-4 { gap: 32px !important; }
.pf-justify-content-start { justify-content: flex-start !important; }

/* Directional spacing aliases (Bootstrap muscle-memory -> logical props) */
.pf-ml-0 { margin-left: 0 !important; }
.pf-ml-1 { margin-left: 8px !important; }
.pf-ml-2 { margin-left: 16px !important; }
.pf-ml-3 { margin-left: 24px !important; }
.pf-mr-0 { margin-right: 0 !important; }
.pf-mr-1 { margin-right: 8px !important; }
.pf-mr-2 { margin-right: 16px !important; }
.pf-mr-3 { margin-right: 24px !important; }
.pf-pl-1 { padding-left: 8px !important; }
.pf-pl-2 { padding-left: 16px !important; }
.pf-pl-3 { padding-left: 24px !important; }
.pf-pr-1 { padding-right: 8px !important; }
.pf-pr-2 { padding-right: 16px !important; }
.pf-pr-3 { padding-right: 24px !important; }

/* ---- Named component hooks referenced by templates --------------- */
.pf-offcanvas-nav { display: flex; flex-direction: column; gap: 0.25rem; }
.pf-timeline-date { display: block; font-size: 12px; color: var(--pf-ink-3); margin-top: 2px; }

/* ---- Skip link -------------------------------------------------- */
.pf-skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 3000;
  padding: 10px 16px;
  border-radius: var(--pf-radius-md);
  background: var(--pf-primary);
  color: #fff;
  font-weight: 600;
  transition: top 0.15s ease;
}

.pf-skip-link:focus {
  top: 8px;
}

/* ---- Pagination --------------------------------------------------- */
.pf-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 24px;
}

.pf-pagination-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-surface);
  color: var(--pf-ink-2);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

a.pf-pagination-item:hover {
  background: var(--pf-surface-hover);
  border-color: var(--pf-ink-3);
  color: var(--pf-ink-1);
}

.pf-pagination-item.is-current {
  background: var(--pf-primary);
  border-color: var(--pf-primary);
  color: #fff;
}

.pf-pagination-item.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.pf-pagination-item .material-symbols-outlined {
  font-size: 18px;
}

.pf-pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 36px;
  color: var(--pf-ink-3);
}

@media (hover: none) and (pointer: coarse) {
  .pf-pagination-item {
    min-width: 40px;
    height: 40px;
  }
}

/* ---- Sticky table header (opt-in) --------------------------------------
   Add .pf-table-sticky to a .pf-table inside .pf-table-responsive. Because
   .pf-table-responsive is an overflow container, the header sticks within
   *that box*, so the box also gets a max-height + vertical scroll.
   Add .pf-table-unbound-height alongside .pf-table-sticky to keep the sticky
   header but drop the max-height/scroll box (the whole page scrolls instead). */
.pf-table-responsive:has(.pf-table-sticky) {
  max-height: min(70vh, 720px);
  overflow-y: auto;
}

.pf-table-responsive:has(.pf-table-sticky.pf-table-unbound-height) {
  max-height: none;
  overflow-y: visible;
}

.pf-table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--pf-surface);
  box-shadow: inset 0 -1px 0 var(--pf-border);
}

/* ---- Small utilities referenced by views (added with scripts/frontend-checks.sh) */
.pf-bg-surface-hover { background: var(--pf-surface-hover) !important; }

@media (min-width: 768px) {
  .pf-w-md-auto { width: auto !important; }
}

/* Row gutter override (48px). */
.pf-gx-5 { margin-left: -24px !important; margin-right: -24px !important; }
.pf-gx-5 > * { padding-left: 24px !important; padding-right: 24px !important; }