:root {
  --project-bg: #eef2ef;
  --project-surface: rgba(255, 255, 255, 0.92);
  --project-surface-strong: #ffffff;
  --project-ink: #17221e;
  --project-muted: #61706b;
  --project-accent: #245f56;
  --project-accent-dark: #183a35;
  --project-highlight: #d8b978;
  --project-line: rgba(24, 58, 53, 0.1);
  --project-shadow: 0 22px 46px rgba(23, 34, 30, 0.1);
}

body.project-hub-body {
  min-height: 100vh;
  color: var(--project-ink);
  background:
    radial-gradient(circle at top left, rgba(36, 95, 86, 0.14), transparent 30%),
    radial-gradient(circle at bottom right, rgba(216, 185, 120, 0.2), transparent 28%),
    linear-gradient(180deg, #f7f9f7 0%, var(--project-bg) 100%);
  font-family: "Manrope", sans-serif;
}

.project-hub-navbar {
  background: linear-gradient(135deg, rgba(24, 58, 53, 0.96), rgba(36, 95, 86, 0.92));
  backdrop-filter: blur(14px);
}

.brand-mark {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.95rem;
  color: var(--project-accent-dark);
  background: linear-gradient(135deg, #fff8ef, #f2d8b8);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
}

.brand-title,
.display-6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: "Space Grotesk", sans-serif;
}

.brand-subtitle {
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.16em;
}

.user-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: white;
  line-height: 1.1;
}

.user-pill__name {
  font-weight: 700;
}

.user-pill__role {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.78;
}

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--project-accent);
}

.project-hub-hero-card,
.project-summary-card,
.project-form-card,
.project-side-card,
.kanban-column,
.empty-state-card {
  background: var(--project-surface);
  border-radius: 1.75rem;
  box-shadow: var(--project-shadow);
}

.project-hub-hero-copy {
  background:
    linear-gradient(160deg, rgba(24, 58, 53, 0.98), rgba(36, 95, 86, 0.94)),
    linear-gradient(135deg, rgba(216, 185, 120, 0.18), transparent 45%);
  color: #f7fbfa;
}

.project-chip {
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  font-weight: 700;
}

.hero-copy-muted {
  max-width: 28rem;
  color: rgba(247, 251, 250, 0.78);
}

.eyebrow--light {
  color: rgba(216, 185, 120, 0.96);
}

.project-summary-card,
.project-form-card,
.project-side-card,
.task-card,
.task-entry-card,
.task-empty-card,
.empty-state-card {
  backdrop-filter: blur(16px);
}

.project-summary-card:hover {
  transform: translateY(-4px);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.status-mini-card {
  padding: 1rem;
  border: 1px solid var(--project-line);
  border-radius: 1.2rem;
  background: rgba(255, 255, 255, 0.72);
}

.kanban-column {
  padding: 1.25rem;
  border: 1px solid rgba(17, 71, 63, 0.08);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.kanban-column__header {
  min-height: 4rem;
}

.kanban-column--dragover {
  border-color: rgba(36, 95, 86, 0.28);
  box-shadow: inset 0 0 0 1px rgba(36, 95, 86, 0.16);
  transform: translateY(-2px);
}

.task-card {
  background: var(--project-surface-strong);
  border-radius: 1.25rem;
  cursor: grab;
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.task-card:hover {
  transform: translateY(-2px);
}

.task-card--dragging {
  opacity: 0.55;
  cursor: grabbing;
}

.task-entry-card,
.task-empty-card {
  background: rgba(255, 255, 255, 0.74);
  border-radius: 1.2rem;
}

.project-task-modal .modal-content {
  border-radius: 1.75rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 28px 60px rgba(23, 34, 30, 0.16);
  backdrop-filter: blur(20px);
}

.project-task-modal .modal-header,
.project-task-modal .modal-body {
  background: transparent;
}

.project-task-modal .btn-close {
  border-radius: 999px;
  background-color: rgba(24, 58, 53, 0.08);
  opacity: 1;
}

.project-actions-menu {
  min-width: 15rem;
  border-radius: 1rem;
  padding: 0.5rem;
}

.project-actions-menu .dropdown-item {
  border-radius: 0.8rem;
  padding: 0.7rem 0.9rem;
}

.project-actions-menu .dropdown-item:hover,
.project-actions-menu .dropdown-item:focus {
  background: rgba(36, 95, 86, 0.08);
  color: var(--project-accent-dark);
}

.modal-attachments-block {
  padding: 1rem;
  border-radius: 1.25rem;
  background: rgba(36, 95, 86, 0.04);
  border: 1px solid rgba(36, 95, 86, 0.08);
}

.modal-form-note {
  padding: 0.9rem 1rem;
  border-radius: 1rem;
  background: rgba(216, 185, 120, 0.16);
  color: var(--project-accent-dark);
  font-size: 0.95rem;
}

.attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.attachment-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.35rem 0.3rem 0.8rem;
  border-radius: 999px;
  color: var(--project-accent-dark);
  background: rgba(36, 95, 86, 0.08);
  border: 1px solid rgba(36, 95, 86, 0.12);
}

.attachment-pill:hover {
  background: rgba(36, 95, 86, 0.14);
}

.attachment-pill__download {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: inherit;
  text-decoration: none;
}

.attachment-pill__form {
  display: inline-flex;
  margin: 0;
}

.attachment-pill__remove {
  border: none;
  background: rgba(24, 58, 53, 0.08);
  color: var(--project-accent-dark);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 700;
}

.attachment-pill__remove:hover {
  background: rgba(24, 58, 53, 0.16);
}

.member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--project-line);
}

.form-control,
.form-select {
  border-radius: 1rem;
  border-color: rgba(17, 71, 63, 0.14);
  padding: 0.85rem 1rem;
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(31, 122, 107, 0.45);
  box-shadow: 0 0 0 0.25rem rgba(31, 122, 107, 0.14);
}

.btn-dark {
  background: linear-gradient(135deg, var(--project-accent-dark), var(--project-accent));
  border: none;
}

.btn-dark:hover,
.btn-dark:focus {
  background: linear-gradient(135deg, #0b362f, #165f53);
}

.min-vh-75 {
  min-height: 75vh;
}

@media (max-width: 991.98px) {
  .user-pill {
    width: 100%;
    border-radius: 1rem;
  }

  .kanban-column {
    padding: 1rem;
  }
}