/*
 * FlowDocs - Main Stylesheet
 * Pro Kinetics Document Automation
 * Based on Pro Kinetics Design System
 */

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

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--pk-slate);
  background: var(--page-bg);
  min-height: 100vh;
}

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

.site-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  box-shadow: var(--shadow-xs);
  height: var(--header-height);
  display: flex;
  align-items: center;
}

.header-content {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--space-7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.site-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--pk-gray-900);
  flex-shrink: 0;
  margin-right: var(--space-10);
}

.logo-icon {
  width: 28px;
  height: 28px;
  background: var(--pk-orange);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.logo-icon img,
.logo-icon svg {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}

.logo-img {
  display: none;
}

.site-logo:hover .logo-img {
  transform: scale(1.05);
}

.site-title {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--pk-gray-900);
  letter-spacing: -0.3px;
  line-height: var(--leading-tight);
}

.site-subtitle {
  display: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex: 1;
}

.nav-link {
  color: var(--pk-gray-500);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  position: relative;
}

.nav-link:hover {
  color: var(--pk-gray-700);
  background-color: var(--pk-gray-100);
}

.nav-link.active {
  color: var(--pk-orange);
  background-color: transparent;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: -10px;
  height: 2px;
  background: var(--pk-orange);
  border-radius: 2px 2px 0 0;
}

.nav-user {
  color: var(--pk-gray-600);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  display: flex;
  align-items: center;
}

/* ================================
 * MOBILE MENU TOGGLE
 * ================================ */

.mobile-menu-toggle {
  display: none; /* Hidden on desktop */
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  z-index: 1001;
}

.hamburger-icon {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--pk-gray-600);
  position: relative;
  transition: all 0.3s ease;
}

.hamburger-icon::before,
.hamburger-icon::after {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--pk-gray-600);
  position: absolute;
  transition: all 0.3s ease;
}

.hamburger-icon::before {
  top: -7px;
}

.hamburger-icon::after {
  top: 7px;
}

/* Active state (X icon) */
.mobile-menu-toggle.active .hamburger-icon {
  background: transparent;
}

.mobile-menu-toggle.active .hamburger-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.mobile-menu-toggle.active .hamburger-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

.nav-link-button {
  background: var(--pk-white);
  border: 1px solid var(--pk-gray-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-family: var(--font-sans);
  margin: 0;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.nav-link-button:hover {
  border-color: var(--pk-gray-300);
  background: var(--pk-gray-50);
}

/* ================================
 * NAVIGATION DROPDOWNS
 * ================================ */

.nav-dropdown {
  position: relative;
  display: inline-block;
}

.nav-dropdown-toggle {
  background: none;
  border: none;
  margin: 0;
}

.nav-dropdown-toggle:hover {
  color: var(--pk-gray-700);
  background: var(--pk-gray-100);
}

.nav-dropdown-toggle.active {
  color: var(--pk-orange);
  background: transparent;
}

.nav-dropdown-chevron {
  font-size: var(--text-micro);
  margin-left: 4px;
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--pk-white);
  border: 1px solid var(--pk-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  min-width: 200px;
  padding: var(--space-1);
  margin-top: var(--space-1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 1000;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-toggle[aria-expanded="true"] + .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--pk-gray-700);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: background-color var(--transition-fast);
  white-space: nowrap;
  border-radius: var(--radius-md);
}

.nav-dropdown-item:hover {
  background-color: var(--pk-gray-100);
  color: var(--pk-gray-900);
}

.nav-dropdown-item.active {
  color: var(--pk-orange);
}

.nav-dropdown-item i {
  font-size: var(--text-label);
  width: 16px;
  flex-shrink: 0;
  color: var(--pk-gray-400);
}

/* Utility group — pushed to the right */
.nav-utility {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* Theme toggle — small icon-only ghost button */
.theme-toggle {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--pk-gray-500);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.theme-toggle:hover {
  color: var(--pk-gray-700);
  background: var(--pk-gray-100);
}

/* User menu trigger — avatar + chevron */
.nav-user-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 32px;
  padding: 0 var(--space-2) 0 var(--space-1);
  border: none;
  background: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-sans);
  color: var(--pk-gray-500);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav-user-menu-toggle:hover {
  background: var(--pk-gray-100);
  color: var(--pk-gray-700);
}

.nav-user-menu-toggle .nav-dropdown-chevron {
  font-size: var(--text-micro);
  margin: 0;
}

.nav-user-avatar {
  width: 26px;
  height: 26px;
  background: var(--pk-orange-subtle);
  color: var(--pk-orange);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-micro);
  font-weight: var(--font-semibold);
  letter-spacing: 0;
  flex-shrink: 0;
}

/* User menu dropdown — anchored to the right */
.nav-user-menu-menu {
  left: auto;
  right: 0;
  min-width: 220px;
}

.nav-user-menu-header {
  padding: var(--space-3) var(--space-3) var(--space-2);
}

.nav-user-name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--pk-gray-800);
  line-height: 1.3;
}

.nav-user-email {
  font-size: var(--text-micro);
  color: var(--pk-gray-500);
  line-height: 1.3;
  margin-top: 2px;
  word-break: break-all;
}

.nav-dropdown-divider {
  height: 1px;
  background: var(--pk-gray-200);
  margin: var(--space-1) 0;
}

/* Logout button styled as a dropdown item */
.nav-dropdown-item-button {
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
}

.badge-count {
  color: white;
  font-size: var(--text-micro);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  margin-left: auto;
  display: inline-block;
  background: var(--pk-orange);
}
.badge-count.badge-low {
  background: var(--pk-success-600);
}
.badge-count.badge-mid {
  background: var(--pk-warning-600);
}

.site-main {
  flex: 1;
  padding: var(--space-6) 0;
}

.container,
.container-full-width {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--space-7);
}

.site-footer {
  background: var(--pk-slate);
  color: var(--pk-white);
  padding: var(--space-5) var(--space-7);
  margin-top: auto;
}

.footer-content {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
}

.footer-text {
  font-size: var(--text-sm);
  color: var(--pk-gray-400);
}

.footer-links {
  display: flex;
  gap: var(--space-4);
}

.footer-link {
  color: var(--pk-gray-200);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-link:hover {
  color: var(--pk-orange);
}

/* ================================
 * CARD STYLES
 * ================================ */

.card {
  background: var(--pk-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: var(--space-6);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(0, 0, 0, 0.12);
}

.card-header {
  margin-bottom: var(--space-5);
}

.card-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--pk-slate-dark);
  margin-bottom: var(--space-2);
}

.card-subtitle {
  font-size: var(--text-base);
  color: var(--pk-slate-lighter);
  line-height: var(--leading-normal);
}

/* ================================
 * TYPOGRAPHY
 * ================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--pk-slate-dark);
}

h1 {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-4);
}

h2 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-4);
}

h3 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
}

p {
  margin-bottom: var(--space-4);
  line-height: var(--leading-relaxed);
}

/* ================================
 * MESSAGES / ALERTS
 * ================================ */

.messages {
  margin-bottom: var(--space-6);
}

.message {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  border-left: 4px solid;
  animation: slideIn 0.3s ease-out;
}

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

.message::before {
  content: "";
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  margin-top: 2px;
}

.message.success {
  background-color: var(--pk-success-light);
  color: var(--pk-success-dark);
  border-left-color: var(--pk-success);
}

.message.success::before {
  background-color: var(--pk-success);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}

.message.error {
  background-color: var(--pk-error-light);
  color: var(--pk-error-dark);
  border-left-color: var(--pk-error);
}

.message.error::before {
  background-color: var(--pk-error);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}

.message.warning {
  background-color: var(--pk-warning-light);
  color: var(--pk-warning-dark);
  border-left-color: var(--pk-warning);
}

.message.warning::before {
  background-color: var(--pk-warning);
}

.message.info {
  background-color: var(--pk-info-light);
  color: var(--pk-info-dark);
  border-left-color: var(--pk-info);
}

.message.info::before {
  background-color: var(--pk-info);
}

/* ================================
 * RESPONSIVE DESIGN
 * ================================ */

/* NOTE: Media queries are ordered from largest to smallest breakpoints
 * This follows mobile-first best practices and prevents override conflicts */

/* Large screens - Default styles apply (>1200px) */
/* No media query needed - default styles */

/* Medium/Tablet screens (769px - 1200px) */
@media screen and (max-width: 1200px) and (min-width: 769px) {
  .header-content {
    gap: var(--space-3);
    padding: 0 var(--space-5);
  }

  .site-nav {
    gap: var(--space-2);
  }

  .nav-link,
  .nav-user,
  .nav-link-button {
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-3);
    white-space: nowrap;
  }

  .environment-indicator {
    font-size: var(--text-xs);
  }

  .environment-badge {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }

  /* Hide environment arrow on medium screens to save space */
  .environment-arrow {
    display: none;
  }
}

/* Small/Mobile screens (≤768px) */
@media screen and (max-width: 768px) {
  .site-header {
    height: auto;
    padding: var(--space-3) 0;
  }

  .header-content {
    flex-wrap: nowrap;
    gap: var(--space-4);
    padding: 0 var(--space-5);
  }

  /* Show mobile menu toggle */
  .mobile-menu-toggle {
    display: block;
    min-width: 44px;
    min-height: 44px;
  }

  /* Ensure theme toggle also meets touch target size */
  .theme-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  /* Hide navigation by default on mobile */
  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    /* 100vh on iOS resolves to the *large* viewport (toolbars retracted), which
       is taller than the visible area. The drawer's content then fits inside that
       oversized box, so overflow-y never triggers and bottom items hide behind the
       Safari toolbar with no way to scroll. dvh tracks the visible area, so when
       content exceeds it the drawer scrolls. 100vh stays as the fallback. */
    height: 100vh;
    height: 100dvh;
    width: 280px;
    max-width: 85vw;
    background: var(--pk-white);
    flex-direction: column;
    gap: 0;
    padding: 80px var(--space-5) var(--space-5);
    box-shadow: -4px 0 10px rgba(0, 0, 0, 0.1);
    border-left: 1px solid var(--pk-gray-200);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    /* Must exceed --z-sticky (1020) so the open drawer sits above the sticky header */
    z-index: 1025;
  }

  /* Backdrop overlay injected by nav-toggle.js.
     The drawer (.site-nav, z 1025) is nested inside the sticky .site-header,
     whose own z-index (--z-sticky: 1020) traps the drawer's z-index inside that
     stacking context. So the overlay must sit BELOW the header context (<1020)
     for the drawer to render above it and stay tappable; page content behind
     the header still dims. */
  .nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1019;
  }

  .nav-overlay.active {
    display: block;
  }

  /* Show navigation when active */
  .site-nav.mobile-active {
    transform: translateX(0);
  }

  /* The drawer is a flex column; without this its children flex-shrink to fit
     (combined with min-height:0 below they crush — e.g. Dashboard collapsing to
     just its padding). Pin them to natural height so the drawer scrolls instead. */
  .site-nav > * {
    flex-shrink: 0;
  }

  .nav-link,
  .nav-user,
  .nav-link-button {
    display: block;
    text-align: left;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-1);
    color: var(--pk-gray-700);
    min-height: 0;
  }

  /* Suppress underline indicator on mobile (stacked items) */
  .nav-link.active::after {
    display: none;
  }

  .nav-link.active {
    background-color: var(--pk-orange-subtle);
    color: var(--pk-orange);
  }

  .nav-link:hover,
  .nav-link-button:hover {
    background-color: var(--pk-gray-100);
  }

  /* Utility group on mobile — full width, no auto-margin */
  .nav-utility {
    width: 100%;
    margin-left: 0;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--pk-gray-200);
    gap: var(--space-3);
  }

  .nav-user-menu {
    flex: 1;
  }

  .nav-user-menu-toggle {
    width: 100%;
    justify-content: flex-start;
    padding: var(--space-2);
  }

  .nav-user-menu-menu {
    position: static;
    box-shadow: none;
    border: none;
    background: var(--pk-gray-50);
    width: 100%;
    margin-top: var(--space-2);
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* Environment indicator on mobile */
  .environment-indicator {
    margin-bottom: var(--space-3);
  }

  /* Navigation dropdowns on mobile */
  .nav-dropdown {
    width: 100%;
  }

  .nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
  }

  .nav-dropdown-toggle i {
    transition: transform var(--transition-fast);
  }

  .nav-dropdown-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
  }

  .nav-user-menu-toggle .nav-dropdown-chevron {
    transition: transform var(--transition-fast);
  }

  .nav-user-menu-toggle[aria-expanded="true"] .nav-dropdown-chevron {
    transform: rotate(180deg);
  }

  .nav-dropdown-menu {
    position: static;
    background: var(--pk-gray-50);
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .nav-dropdown-toggle[aria-expanded="true"] + .nav-dropdown-menu,
  .nav-user-menu-toggle[aria-expanded="true"] + .nav-dropdown-menu {
    /* Must exceed the tallest submenu (Manage = 9 items, ~326px) so no item is
       clipped — previously 300px cut off the last item (Admin) to a sliver. The
       drawer itself scrolls (overflow-y:auto + 100dvh), so a generous cap is safe. */
    max-height: 600px;
  }

  .nav-dropdown-item {
    padding: var(--space-3) var(--space-5);
    color: var(--pk-gray-700);
  }

  .nav-dropdown-item:hover {
    background-color: var(--pk-gray-100);
  }

  .nav-dropdown-item.active {
    background-color: var(--pk-orange-subtle);
    color: var(--pk-orange);
  }

  .card {
    padding: var(--space-6);
  }

  .footer-content {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }

  .footer-links {
    flex-direction: column;
    gap: var(--space-3);
  }
}

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

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

.text-placeholder {
  color: var(--pk-gray-400);
}

/* Display utilities — replace common inline style="display: ..." */
.d-none {
  display: none;
}

.d-flex {
  display: flex;
}

.d-block {
  display: block;
}

.d-inline {
  display: inline;
}

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

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

.mt-4 {
  margin-top: var(--space-5);
}

.mt-6 {
  margin-top: var(--space-7);
}

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

.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-height) - 80px);
  padding: var(--space-7);
}

.login-card {
  max-width: 400px;
  width: 100%;
  padding: var(--space-10);
}

.login-header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.login-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--pk-gray-900);
  text-align: center;
  margin-bottom: var(--space-2);
}

.login-subtitle {
  font-size: var(--text-sm);
  color: var(--pk-gray-500);
  text-align: center;
  margin-bottom: var(--space-7);
}

.login-form .form-group:last-of-type {
  margin-bottom: var(--space-6);
}

.login-actions {
  margin-top: var(--space-6);
  padding-top: 0;
  border-top: none;
}

.btn-block {
  width: 100%;
  min-width: auto;
}

.login-footer {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--pk-gray-200);
}

.login-footer p {
  margin: 0;
  font-size: var(--text-sm);
}

.login-footer a {
  color: var(--pk-gray-500);
  text-decoration: none;
}

.login-footer a:hover {
  color: var(--pk-orange);
  text-decoration: underline;
}

@media (max-width: 576px) {
  .login-container {
    min-height: auto;
    padding: var(--space-4);
  }

  .login-card {
    padding: var(--space-6);
  }
}

/* ================================
 * INLINE STYLE REPLACEMENTS
 * ================================ */

/* Stats summary row (eDocs review) */
.stats-summary-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--color-surface-subtle);
  border-radius: var(--radius-lg);
}

.stats-summary-item {
  flex: 1;
}

.stats-summary-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}

.stats-summary-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--pk-gray-900);
}

/* Filter action row */
.filter-actions-row {
  margin-top: 0.75rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Help/info card */
.help-card {
  margin-top: 1rem;
  background: var(--pk-info-light);
  border: 1px solid var(--pk-info-light);
}

.help-card-body {
  padding: 1rem;
}

.help-card-title {
  margin: 0 0 0.5rem 0;
  color: var(--pk-info-dark);
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
}

.help-card-list {
  margin: 0;
  padding-left: 1.5rem;
  color: var(--pk-info-dark);
  font-size: var(--text-sm);
}

/* Alert boxes used in environment switch modal etc. */
.alert-box {
  border-radius: var(--radius-lg);
  padding: 1rem;
  margin-bottom: 1rem;
}

/* File cell with name + size */
.file-cell-name {
  font-weight: var(--font-medium);
  color: var(--pk-gray-900);
}

.file-cell-size {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Inline form (used for inline POST actions) */
.inline-form {
  margin: 0;
  display: inline;
}