/* Foundation CSS - PQE
 */

/* ===================================
   1. DESIGN TOKENS
   =================================== */

:root {
  /* Brand */
  --brand-dark: #1A2C35; /* PQE deep blue-grey */
  --brand-dark-700: #0F1F26; /* darker hover tint  REMOVE??*/
  --accent-600: #37BC20;     /* PQE logo green (accent only) */
  --accent-100: #eafbe7;

/* NEW: Primary UI color - Steel Teal */
  --primary-500: #4A7C83;     /* Steel teal - main primary color */
  --primary-600: #4A7C83;     /* Steel teal - keeping same for consistency */
  --primary-700: #3A6269;     /* Steel teal - darker for hover */
  --primary-100: rgba(74, 124, 131, 0.08); /* Steel teal - light tint for hover backgrounds */

  /* Neutrals */
  --neutral-900: #0b0b0c;
  --neutral-700: #3a3a3d;
  --neutral-500: #6f7377;
  --neutral-300: #e2e6ea;
  --neutral-100: #f6f8fa;

  /* Text */
  --text-strong: var(--brand-dark);
  --text: var(--neutral-900);
  --text-muted: var(--neutral-500);
  --text-inverse: #ffffff;

  /* Surfaces */
  --bg-page: #FAFAFB;   /* tinted page bg */
  --bg-elev-1: #ffffff;            /* cards, header */
  --bg-elev-2: #F4F6F8; /* secondary bands */
  --bg-footer: var(--brand-dark);  /* dark footer */
  --border: var(--neutral-300);

  /* Effects */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06),
               0 1px 2px rgba(0,0,0,0.04);

  /* Links & focus */
  --link: var(--primary-500);
  --link-hover: var(--primary-700);
  --focus-ring: 2px solid var(--accent-600); /* green focus for high visibility - DO WE LIKE THIS EFFECT??*/

  /* Radii & motion */
  --radius-md: 12px;
  --radius-sm: 8px;
  --duration-1: 160ms;

  /* Spacing */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ===================================
   2. RESET & BASE STYLES
   =================================== */

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

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg-page);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ===================================
   3. TYPOGRAPHY
   =================================== */

h1 { 
  font-size: 2.5rem; 
  line-height: 1.2; 
  font-weight: 700; 
  color: var(--text-strong);
  margin-bottom: 24px;
}

h2 { 
  font-size: 2rem;   
  line-height: 1.3; 
  font-weight: 700;
  margin-bottom: 20px;
}

h3 { 
  font-size: 1.5rem; 
  line-height: 1.35; 
  font-weight: 700;
  margin-bottom: 16px;
}

h4 { 
  font-size: 1.25rem;
  line-height: 1.4; 
  font-weight: 700;
  margin-bottom: 12px;
}

p { 
  font-size: 1rem; 
  line-height: 1.6;
  margin-bottom: 16px;
}

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

li { 
  font-size: 1rem; 
  line-height: 1.6; 
}

/* Markdown content styling */
.content ul, .content ol,
.markdown ul, .markdown ol {
  margin: 24px 0 32px 0;
  padding-left: 32px;
}

.content li,
.markdown li {
  margin-bottom: 12px;
  line-height: 1.7;
}

small { 
  font-size: 0.875rem; 
  line-height: 1.45; 
  color: var(--text-muted); 
}

/* ===================================
   4. LAYOUT & SURFACES
   =================================== */

.container { 
  max-width: 1200px; 
  margin-inline: auto; 
  padding-inline: 24px; 
}

.section { 
  padding: 56px 0; 
  background: var(--bg-page); 
}

.card {
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

/* ===================================
   5. HEADER (Light Navigation)
   =================================== */

.header {
  position: sticky; 
  top: 0; 
  z-index: 1000;
  background: var(--bg-elev-1);
  border-bottom: 1px solid var(--border);
  height: 64px;
}

.header .container { 
  height: 64px; 
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  gap: 20px; 
}

/* Logo styling */
.logo {
  display: flex;
  align-items: center;
}

.logo a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.logo img {
  height: 32px;
  width: auto;
}

.nav { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  position: relative;
}

/* Mobile menu toggle */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.hamburger {
  width: 25px;
  height: 3px;
  background: var(--text-strong);
  margin: 3px 0;
  transition: all var(--duration-1) ease;
}

/* Navigation links */
.nav-links {
  display: flex;
  list-style: none;
  gap: 32px;
  align-items: center;
  margin: 0;
  padding: 0;
}

.nav-links li {
  margin-bottom: 0;
  line-height: 1.6;
}

.nav-link {
  color: var(--brand-dark);
  text-decoration: none;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: all var(--duration-1) ease;
}

.nav-link:hover { 
  background: var(--neutral-100); 
}

/* Navigation dropdowns */
.nav-dropdown {
  position: relative;
}

.dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dropdown-arrow {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
  opacity: 0.7;
}

.nav-dropdown:hover .dropdown-arrow {
  transform: rotate(180deg);
  opacity: 1;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  list-style: none;
  padding: 4px 0;
  min-width: 200px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-10px);
  transition: all 0.2s ease;
  margin: 0;
}

.nav-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown-link {
  display: block;
  padding: 8px 16px;
  color: var(--brand-dark);
  text-decoration: none;
  font-weight: 400;
  /* font-size: 0.875rem; */
  transition: background-color var(--duration-1) ease;
  border-bottom: 1px solid var(--border);
}

.dropdown-link:last-child {
  border-bottom: none;
}

.dropdown-link:hover {
  background: var(--bg-elev-2);
  color: var(--primary-600);
}

/* User dropdown specific styles */
.user-dropdown-trigger {
  font-weight: 500;
  color: var(--brand-dark) !important;
  font-size: 0.875rem;
}

.user-dropdown-menu {
  right: 0;
  left: auto;
  transform: translateX(0) translateY(-10px);
}

.nav-dropdown.user-dropdown:hover .user-dropdown-menu {
  transform: translateX(0) translateY(0);
}

/* Sign in button */
.signin-nav-link {
  background: var(--primary-500) !important;
  color: var(--text-inverse) !important;
  border-radius: var(--radius-sm);
}

.signin-nav-link:hover {
  background: var(--primary-700) !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: flex;
  }
  
  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    flex-direction: column;
    gap: 0;
    min-width: 280px;
    padding: 8px;
    z-index: 1000;
  }
  
  .nav-links--mobile-open {
    display: flex;
  }
  
  .nav-link {
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-weight: 500;
    margin-bottom: 2px;
    transition: all var(--duration-1) ease;
  }
  
  .nav-link:hover {
    background: var(--primary-100);
    color: var(--primary-600);
  }
  
  .signin-nav-link {
    background: var(--primary-500) !important;
    color: var(--text-inverse) !important;
    font-weight: 600 !important;
    margin-top: 8px;
  }
  
  .signin-nav-link:hover {
    background: var(--primary-700) !important;
    color: var(--text-inverse) !important;
  }
  
  .nav-dropdown .dropdown-menu {
    position: static;
    transform: none;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-sm);
    margin: 4px 0 8px 0;
    opacity: 1;
    visibility: visible;
    display: none;
    overflow: hidden;
  }
  
  .nav-dropdown:hover .dropdown-menu {
    display: block;
    transform: none;
  }
  
  .dropdown-link {
    padding: 10px 16px;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
    font-weight: 400;
    transition: all var(--duration-1) ease;
  }
  
  .dropdown-link:last-child {
    border-bottom: none;
  }
  
  .dropdown-link:hover {
    background: var(--primary-100);
    color: var(--primary-600);
  }
  
  .user-dropdown-trigger {
    color: var(--text-muted) !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    background: var(--bg-elev-2) !important;
  }
  
  .user-dropdown-trigger:hover {
    background: var(--primary-100) !important;
    color: var(--primary-600) !important;
  }
}

/* ===================================
   6. FOOTER (Dark)
   =================================== */

.footer {
  background: var(--bg-footer);
  color: var(--text-inverse);
  padding: 32px 0 24px 0;
  margin-top: auto;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.footer-logo {
  height: 40px;
  width: auto;
  margin-bottom: 8px;
}

.footer-tagline {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.footer-copyright {
  display: flex;
  align-items: center;
}

.footer-copyright p {
  margin: 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
}

.footer a { 
  color: #ffffff; 
  text-decoration: underline; 
  text-underline-offset: 2px; 
}

.footer a:hover { 
  opacity: 0.9; 
}

.footer--accent a { 
  color: var(--accent-600); 
  text-decoration: none; 
}

.footer--accent a:hover { 
  text-decoration: underline; 
}

/* Responsive footer */
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }
  
  .footer-brand {
    align-items: center;
    text-align: center;
  }
}

/* ===================================
   6A. SUB-NAVIGATION
   =================================== */

.sub-nav {
  background: var(--brand-dark);
  border-top: 1px solid var(--border);
  padding: 12px 0;
}

.sub-nav .container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.sub-nav-links {
  display: flex;
  list-style: none;
  gap: 32px;
  margin: 0;
  padding: 0;
  align-items: center;
}

.sub-nav-link {
  color: var(--text-inverse);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-1) ease;
}

.sub-nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-inverse);
}

.sub-nav-link:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 2px var(--accent-600);
}

/* Active state for current section */
.sub-nav-link--active {
  background: rgba(255, 255, 255, 0.15);
  font-weight: 600;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .sub-nav-links {
    gap: 16px;
    flex-wrap: wrap;
  }
  
  .sub-nav-link {
    font-size: 0.8rem;
    padding: 6px 10px;
  }
}

/* ===================================
   7. LINKS & FOCUS
   =================================== */

a { 
  color: var(--link); 
  text-underline-offset: 2px; 
}

a:hover { 
  color: var(--link-hover); 
}

:focus-visible { 
  outline: var(--focus-ring); 
  outline-offset: 2px; 
}

/* ===================================
   8. BUTTONS
   =================================== */

:root {
  --btn-radius: 10px;
  --btn-padding-y: 10px;
  --btn-padding-x: 14px;
  --btn-font-weight: 600;
  --btn-transition: var(--duration-1) ease;
  --btn-shadow-focus: 0 0 0 4px rgba(55,188,32,0.20); /* green accent */
  --btn-shadow-press: inset 0 1px 2px rgba(0,0,0,0.10);
}

/* Base */
.btn {
  display: inline-flex; 
  align-items: center; 
  gap: 8px;
  border-radius: var(--btn-radius);
  font-weight: var(--btn-font-weight);
  font-size: 1rem;
  line-height: 1;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border: 1px solid transparent;
  cursor: pointer; 
  user-select: none;
  text-decoration: none;
  transition: background-color var(--btn-transition),
              color var(--btn-transition),
              border-color var(--btn-transition),
              box-shadow var(--btn-transition),
              transform var(--btn-transition);
}

.btn:focus-visible { 
  outline: none; 
  box-shadow: var(--btn-shadow-focus); 
}

.btn:active { 
  transform: translateY(0.5px); 
  box-shadow: var(--btn-shadow-press); 
}

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

/* Variants */
.btn--primary {
  background: var(--primary-500);
  color: #fff;
  border-color: var(--primary-500);
  font-weight: 500;
}

.btn--primary:hover { 
  background: var(--primary-700);
  color: #fff;
  border-color: var(--primary-700);
}

.btn--secondary {
  background: transparent;
  color: var(--primary-500);
  border-color: var(--primary-500);
}

.btn--secondary:hover { 
  background: var(--primary-100); 
}

.btn--tertiary {
  background: transparent;
  color: var(--primary-500);
  border-color: transparent;
}

.btn--tertiary:hover { 
  background: var(--neutral-100); 
}

.btn--danger {
  background: #b11e2f;
  color: #fff;
  border-color: #b11e2f;
  font-weight: 500;
}

.btn--danger:hover {
  background: #8A1724;
  border-color: #8A1724;
}

.btn--danger-secondary {
  background: transparent;
  color: #B11E2F;
  border: 1px solid #B11E2F;
}

.btn--danger-secondary:hover {
  background: rgba(177, 30, 47, 0.08);  /* Subtle red tint */
}

/* On dark surfaces (e.g., footer) */
.btn--on-dark {
  color: #ffffff;
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.06);
}

.btn--on-dark:hover { 
  background: rgba(255,255,255,0.12); 
  border-color: rgba(255,255,255,0.35);
}

.btn--tertiary-on-dark {
  background: transparent;
  color: rgba(255,255,255,0.9);
  border-color: transparent;
}

.btn--tertiary-on-dark:hover {
  background: rgba(255,255,255,0.08);
}

/* Sizes */
.btn--sm { 
  padding: 4px 8px; 
  font-size: 0.85rem; 
  border-radius: 8px; 
}

.btn--md { /* default */ }

.btn--lg { 
  padding: 12px 18px; 
  font-size: 1.05rem; 
  border-radius: 12px; 
}

.btn--icon { 
  padding: 10px; 
  width: 40px; 
  height: 40px; 
  justify-content: center; 
}

/* ===================================
   9. FORMS
   =================================== */

:root {
  --field-radius: 10px;
  --field-padding-y: 10px;
  --field-padding-x: 12px;
  --field-gap: 8px;
  --field-bg: #fff;
  --field-border: var(--border);
  --field-border-hover: #d5dbe0;
  --field-placeholder: var(--neutral-500);
  --field-danger: #b11e2f;
  --field-danger-bg: #fdecef;
  --field-success: #138a36;
  --field-success-bg: #e9f7ee;
  --field-transition: var(--duration-1) ease;
  --field-shadow-inset: inset 0 1px 1px rgba(0,0,0,0.03);
  --field-shadow-focus: 0 0 0 4px rgba(55,188,32,0.20); /* green accent */
}

.field { 
  display: grid; 
  gap: var(--field-gap); 
}

.label { 
  font-weight: 600; 
  color: var(--text-strong); 
}

.label--required::after { 
  content: " *"; 
  color: var(--accent-600); 
  font-weight: 700; 
}

.help { 
  color: var(--text-muted); 
  font-size: 0.925rem; 
}

.msg { 
  font-size: 0.9rem; 
}

.msg--error { 
  color: var(--field-danger); 
}

.input, .textarea, .select {
  font-family: inherit;
  width: 100%;
  background: var(--field-bg);
  color: var(--text);
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius);
  padding: var(--field-padding-y) var(--field-padding-x);
  font-size: 1rem;
  transition: border-color var(--field-transition),
              box-shadow var(--field-transition),
              background-color var(--field-transition);
  box-shadow: var(--field-shadow-inset);
}

.input::placeholder, .textarea::placeholder { 
  color: var(--field-placeholder); 
}

.input:hover, .textarea:hover, .select:hover { 
  border-color: var(--field-border-hover); 
}

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

/* Select caret */
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5l4 4 4-4' stroke='%231A2C35' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* Validation */
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { 
  border-color: var(--field-danger); 
}

.input[aria-invalid="true"]:focus-visible,
.select[aria-invalid="true"]:focus-visible,
.textarea[aria-invalid="true"]:focus-visible { 
  box-shadow: 0 0 0 4px rgba(177,30,47,0.20); 
}

/* Groups & grid */
.form-grid { 
  display: grid; 
  gap: 16px; 
}

.form-grid--2 { 
  grid-template-columns: 1fr 1fr; 
}

@media (max-width: 800px) { 
  .form-grid--2 { 
    grid-template-columns: 1fr; 
  } 
}

/* Edit form specific */
.edit-form {
  background: var(--bg-elev-1);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  gap: 24px;
}

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.form-header h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0;
}

/* ===================================
   10. UTILITY CLASSES
   =================================== */

/* Display */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }

/* Flexbox */
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }

/* Gaps */
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }

/* Spacing */
.p-0 { padding: 0; }
.p-1 { padding: 4px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.p-6 { padding: 24px; }
.p-8 { padding: 32px; }

.px-2 { padding-left: 8px; padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.px-6 { padding-left: 24px; padding-right: 24px; }

.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.py-6 { padding-top: 24px; padding-bottom: 24px; }

.m-0 { margin: 0; }
.m-1 { margin: 4px; }
.m-2 { margin: 8px; }
.m-3 { margin: 12px; }
.m-4 { margin: 16px; }
.m-6 { margin: 24px; }

.mx-auto { margin-left: auto; margin-right: auto; }
.my-4 { margin-top: 16px; margin-bottom: 16px; }
.my-6 { margin-top: 24px; margin-bottom: 24px; }

.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }

.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }

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

.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-strong { color: var(--text-strong); }
.text-muted { color: var(--text-muted); }
.text-inverse { color: var(--text-inverse); }

/* Borders */
.border { border: 1px solid var(--border); }
.border-t { border-top: 1px solid var(--border); }
.border-b { border-bottom: 1px solid var(--border); }
.border-l { border-left: 1px solid var(--border); }
.border-r { border-right: 1px solid var(--border); }

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

/* Shadows */
.shadow { box-shadow: var(--shadow-sm); }

/* Width/Height */
.w-full { width: 100%; }
.h-full { height: 100%; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }

/* Cursor */
.cursor-pointer { cursor: pointer; }

/* ===================================
   11. RESPONSIVE DESIGN
   =================================== */

@media (max-width: 768px) {
  .container {
    padding-inline: 16px;
  }
  
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.25rem; }
  
  .section {
    padding: 32px 0;
  }
}

/* ===================================
   12. DATA TABLES 
   =================================== */

/* Table system following STYLE.md v0.7 principles */
.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-elev-1);
}

.table th {
  background: var(--bg-elev-1);
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--text-strong);
  font-size: 0.875rem;
  line-height: 1.45;
}

.table td {
  padding: 12px 16px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text);
  border-top: 1px solid var(--border);
}

/* Hover effects removed - should only be used for interactive rows */

/* Table variants */
.table--compact th,
.table--compact td {
  padding: 8px 12px;
}

.table--borderless td {
  border-top: none;
}

/* ===================================
   13. STATUS & BADGES
   =================================== */

/* Status badges following button styling principles */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.badge--primary {
  background: var(--primary-600);
  color: #fff;
}

.badge--success {
  background: var(--field-success);
  color: #fff;
}

.badge--muted {
  background: var(--neutral-300);
  color: var(--text-muted);
}

.badge--accent {
  background: var(--accent-100);
  color: var(--primary-600);
}

/* ===================================
   14. CARD VARIANTS
   =================================== */

/* Danger/warning cards using form danger tokens */
.card--danger {
  border-color: var(--field-danger);
  /* background: var(--field-danger-bg); */
}

.card--danger .card-title {
  color: var(--field-danger);
}

.card-header {
  margin-bottom: 16px;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-strong);
  margin: 0 0 12px 0;
}

.card-content {
  color: var(--text);
}

.card-footer {
  margin-top: auto;
  padding-top: 8px;
  text-align: right;
}

/* Interactive card modifier for clickable cards */
.card--interactive {
  cursor: pointer;
  transition: box-shadow var(--duration-1) ease, transform var(--duration-1) ease;
}

.card--interactive:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}


/* Hero sections */
.hero-section {
  text-align: center;
  margin-bottom: 32px;
  padding: 64px 0 32px 0;
  /* not needed? */
  /* background: var(--bg-page); */
}

.hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 8px;
  line-height: 1.2;
}

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--text-muted);
  margin-bottom: 0;
  line-height: 1.6;
}


/* ===================================
   13. NAVIGATION COMPONENTS
   =================================== */

/* Back navigation - reusable navigation for returning to parent/list views */
.back-nav {
  margin: 0 auto;
  max-width: 1000px;
  margin-top: 16px;
  margin-bottom: 0px;
  text-align: right;
}

.back-link {
  color: var(--primary-600);
  text-decoration: none;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: color var(--duration-1) ease;
  background: var(--bg-page);
  padding: 8px 16px;
}

.back-link:hover {
  color: var(--primary-700);
}

/* ===================================
   14. MAIN LAYOUT
   =================================== */

.main {
  flex: 1;
  padding: 0 0 32px 0;
}

/* Loading indicator */
.loading-indicator {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0;
  margin: 0;
  text-align: center;
  color: var(--text-muted);
}

.loading-indicator.htmx-indicator {
  display: flex;
}

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

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}